[DO NOT MERGE] Changed color of continue button of welcome modal to grey, added composable useTour and added TooltipTour component

kolibri/plugins/device/assets/src/views/WelcomeModal.vue

@@ -2,7 +2,6 @@
 
   <KModal
     :title="$tr('welcomeModalHeader')"
-    :submitText="coreString('continueAction')"
     @submit="$emit('submit')"
   >
     <p
@@ -12,6 +11,11 @@
     >
       {{ paragraph }}
     </p>
+    <template #actions>
+      <KButton @click="$emit('submit')">
+        {{ coreString('continueAction') }}
+      </KButton>
+    </template>
   </KModal>
 
 </template>

kolibri/plugins/learn/assets/src/views/ChannelCard.vue

@@ -68,7 +68,10 @@
         v-if="isRemote"
         class="wifi-icon"
       >
-        <KIcon icon="wifi" />
+        <KIcon
+          :data-onboarding-id="isFirst ? 'wifiIconFirstChannelCard' : null"
+          icon="wifi"
+        />
       </div>
     </div>
   </router-link>
@@ -82,6 +85,8 @@
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
   import CoachContentLabel from 'kolibri-common/components/labels/CoachContentLabel';
   import useUser from 'kolibri/composables/useUser';
+  import useTour from 'kolibri-common/composables/useTour';
+  import { getCurrentInstance, onMounted, nextTick } from 'vue';
   import ChannelThumbnail from './ChannelThumbnail';
 
   export default {
@@ -90,20 +95,41 @@
       ChannelThumbnail,
       CoachContentLabel,
     },
-    setup() {
+    setup(props) {
       const { windowGutter } = useKResponsiveWindow();
       const { isUserLoggedIn, isLearner } = useUser();
+      const { registerStep } = useTour();
+
+      onMounted(async () => {
+        await nextTick();
+
+        if (props.isFirst) {
+          registerStep({
+            key: 'wifiIconFirstChannelCard',
+            content:
+              'You can explore and add channel resources from someone else’s library when you see this symbol.',
+            stepIndex: 2,
+          });
+          console.log('✅ Registered tooltip for wifi icon in first ChannelCard');
+        }
+      });
+
       return {
         windowGutter,
         isUserLoggedIn,
         isLearner,
+        registerStep,
       };
     },
     props: {
       title: {
         type: String,
         required: true,
       },
+      isFirst: {
+        type: Boolean,
+        required: true,
+      },
       tagline: {
         type: String,
         default: null,

kolibri/plugins/learn/assets/src/views/ChannelCardGroupGrid.vue

@@ -2,11 +2,14 @@
 
   <KGrid gutter="16">
     <KGridItem
-      v-for="content in contents"
+      v-for="(content, index) in contents"
       :key="content.id"
       :layout="{ span: layoutSpan }"
     >
       <ChannelCard
+        v-if="index === 0"
+        data-onboarding-id="firstChannelCard"
+        :isFirst="true"
         :isMobile="windowIsSmall"
         :title="content.title || content.name"
         :thumbnail="content.thumbnail"
@@ -15,6 +18,17 @@
         :link="genContentLinkBackLinkCurrentPage(content.id, false, deviceId)"
         :isRemote="isRemote"
       />
+      <ChannelCard
+        v-else
+        :isMobile="windowIsSmall"
+        :title="content.title || content.name"
+        :thumbnail="content.thumbnail"
+        :tagline="content.tagline || content.description"
+        :isFirst="false"
+        :numCoachContents="content.num_coach_contents"
+        :link="genContentLinkBackLinkCurrentPage(content.id, false, deviceId)"
+        :isRemote="isRemote"
+      />
     </KGridItem>
     <slot></slot>
   </KGrid>
@@ -26,6 +40,8 @@
 
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
   import { validateObject } from 'kolibri/utils/objectSpecs';
+  import useTour from 'kolibri-common/composables/useTour';
+  import { onMounted, nextTick } from 'vue';
   import useCardLayoutSpan from '../composables/useCardLayoutSpan';
   import useContentLink from '../composables/useContentLink';
   import ChannelCard from './ChannelCard';
@@ -39,10 +55,22 @@
       const { genContentLinkBackLinkCurrentPage } = useContentLink();
       const { windowIsSmall } = useKResponsiveWindow();
       const { layoutSpan } = useCardLayoutSpan();
+      const { registerStep } = useTour();
+
+      onMounted(async () => {
+        await nextTick();
+        registerStep({
+          key: 'firstChannelCard',
+          content: 'Channels are collections of videos, exercises, and other learning resources.',
+          stepIndex: 1,
+        });
+      });
+
       return {
         genContentLinkBackLinkCurrentPage,
         windowIsSmall,
         layoutSpan,
+        registerStep,
       };
     },
     props: {

kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue

@@ -177,6 +177,11 @@
           :canDownloadExternally="canDownloadExternally && !deviceId"
         />
       </SidePanelModal>
+      <TooltipTour
+        v-if="tourActive"
+        :steps="steps"
+        @tourEnded="tourActive = false"
+      />
     </LearnAppBarPage>
   </div>
 
@@ -187,7 +192,7 @@
 
   import { get, set } from '@vueuse/core';
 
-  import { onMounted, getCurrentInstance, ref, watch } from 'vue';
+  import { onMounted, getCurrentInstance, ref, watch, nextTick } from 'vue';
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
   import useUser from 'kolibri/composables/useUser';
@@ -201,6 +206,8 @@
   import SidePanelModal from 'kolibri-common/components/SidePanelModal';
   import SearchFiltersPanel from 'kolibri-common/components/SearchFiltersPanel';
   import useChannels from 'kolibri-common/composables/useChannels';
+  import TooltipTour from 'kolibri-common/components/onboarding/TooltipTour.vue';
+  import useTour from 'kolibri-common/composables/useTour';
   import { KolibriStudioId, PageNames } from '../../constants';
   import useCardViewStyle from '../../composables/useCardViewStyle';
   import useContentLink from '../../composables/useContentLink';
@@ -245,13 +252,14 @@
       OtherLibraries,
       PostSetupModalGroup,
       NoResourcePage,
+      TooltipTour,
     },
     mixins: [commonLearnStrings, commonCoreStrings],
     setup(props) {
       const currentInstance = getCurrentInstance().proxy;
       const store = currentInstance.$store;
       const router = currentInstance.$router;
-
+      const { steps, tourActive, startTour, registerStep } = useTour();
       const {
         isUserLoggedIn,
         isCoach,
@@ -285,11 +293,32 @@
       const { deviceName } = currentDeviceData();
       const { fetchChannels } = useChannels();
 
-      onMounted(() => {
+      onMounted(async () => {
         const keywords = currentRoute().query.keywords;
         if (keywords && keywords.length) {
           search(keywords);
         }
+
+        const stepsToRegister = [
+          {
+            key: 'Library',
+            content:
+              'This is where you’ll find channels that you have added to your library. You can also see available libraries around you.',
+            stepIndex: 0,
+          },
+          {
+            key: 'menubar',
+            content: 'Find other ways to use Kolibri and add resources to your library here.',
+            stepIndex: 3,
+          },
+        ];
+        await nextTick();
+        stepsToRegister.forEach(step => {
+          const el = document.querySelector(`[data-onboarding-id="${step.key}"]`);
+          if (el) {
+            registerStep(step);
+          }
+        });
       });
 
       const rootNodes = ref([]);
@@ -421,6 +450,10 @@
         isUserLoggedIn,
         canManageContent,
         isLearnerOnlyImport,
+        steps,
+        registerStep,
+        tourActive,
+        startTour,
       };
     },
     props: {
@@ -548,8 +581,9 @@
     },
     methods: {
       hideWelcomeModal() {
-        window.localStorage.setItem(welcomeDismissalKey, true);
+        window.localStorage.setItem(welcomeDismissalKey, false);
         this.$store.commit('SET_WELCOME_MODAL_VISIBLE', false);
+        this.startTour();
       },
       findFirstEl() {
         this.$refs.resourcePanel.focusFirstEl();