fix: moved onboarding related ui and code in separate component

frontend/src/components/Layouts/AppSidebar.vue

@@ -112,11 +112,7 @@
     </div>
     <Notifications />
     <Settings />
-    <HelpModal
+    <HelpModal v-if="showHelpModal" v-model="showHelpModal" />
-      v-if="showHelpModal"
-      v-model="showHelpModal"
-      :isOnboardingStepsCompleted="isOnboardingStepsCompleted"
-    />
   </div>
 </template>
 

frontend/src/components/Modals/HelpModal.vue

@@ -5,63 +5,33 @@
     :class="[minimize ? 'right-0 top-[calc(100%_-_110px)]' : 'right-0']"
     @click.stop
   >
-    <div class="overflow-hidden flex flex-col gap-4">
+    <div class="flex items-center justify-between">
-      <div class="flex items-center justify-between">
+      <div class="text-base font-medium ml-1">
-        <div>
+        <div v-if="minimize && !isOnboardingStepsCompleted">
-          <div v-if="minimize" class="text-base font-medium ml-1">
+          {{ __('Getting started') }}
-            {{ __('Getting started') }}
-          </div>
         </div>
-        <div>
+        <div v-else>
-          <Button @click="minimize = !minimize" variant="ghost">
+          {{ __('Help center') }}
-            <component
-              :is="minimize ? MaximizeIcon : MinimizeIcon"
-              class="h-3.5"
-            />
-          </Button>
-          <Button variant="ghost" @click="show = false">
-            <FeatherIcon name="x" class="h-3.5" />
-          </Button>
         </div>
       </div>
-      <div class="flex flex-col justify-center items-center gap-1 mb-3">
+      <div>
-        <CRMLogo class="size-10 shrink-0 rounded mb-4" />
+        <Button @click="minimize = !minimize" variant="ghost">
-        <div class="text-base font-medium">
+          <component
-          {{ __('Welcome to Frappe CRM') }}
+            :is="minimize ? MaximizeIcon : MinimizeIcon"
-        </div>
+            class="h-3.5"
-        <div class="text-p-base font-normal">
-          {{ __('{0}/{1} steps completed', [stepsCompleted, totalSteps]) }}
-        </div>
-      </div>
-      <div class="flex flex-col gap-2.5 overflow-hidden">
-        <div class="flex justify-between items-center py-0.5">
-          <div class="text-base font-medium">{{ __('Getting started') }}</div>
-          <Badge
-            :label="__('{0}% completed', [completedPercentage])"
-            theme="orange"
-            size="lg"
           />
-        </div>
+        </Button>
-        <div class="flex flex-col gap-1.5 overflow-y-auto">
+        <Button variant="ghost" @click="show = false">
-          <div
+          <FeatherIcon name="x" class="h-3.5" />
-            v-for="step in steps"
+        </Button>
-            :key="step.title"
-            class="w-full flex gap-2 items-center hover:bg-surface-gray-1 rounded px-2 py-1.5 cursor-pointer"
-            :class="[
-              step.completed
-                ? 'text-ink-gray-5 line-through'
-                : 'text-ink-gray-8',
-            ]"
-            @click="() => !step.completed && step.onClick()"
-          >
-            <component :is="step.icon" class="h-4" />
-            <div class="text-base">{{ step.title }}</div>
-          </div>
-        </div>
       </div>
     </div>
+    <div class="h-full overflow-hidden flex flex-col">
+      <OnboardingSteps v-if="!isOnboardingStepsCompleted" />
+    </div>
     <div class="flex flex-col gap-1.5">
       <div
+        v-if="!isOnboardingStepsCompleted"
         class="w-full flex gap-2 items-center hover:bg-surface-gray-1 text-ink-gray-8 rounded px-2 py-1.5 cursor-pointer"
       >
         <HelpIcon class="h-4" />
@@ -74,15 +44,8 @@
 import MinimizeIcon from '@/components/Icons/MinimizeIcon.vue'
 import MaximizeIcon from '@/components/Icons/MaximizeIcon.vue'
 import HelpIcon from '@/components/Icons/HelpIcon.vue'
-import CRMLogo from '@/components/Icons/CRMLogo.vue'
+import OnboardingSteps from '@/components/OnboardingSteps.vue'
-import { useOnboarding, minimize } from '@/composables/onboarding'
+import { isOnboardingStepsCompleted, minimize } from '@/composables/onboarding'
-
-const props = defineProps({
-  isOnboardingStepsCompleted: Boolean,
-})
 
 const show = defineModel()
-
-const { steps, stepsCompleted, totalSteps, completedPercentage } =
-  useOnboarding()
 </script>

frontend/src/components/OnboardingSteps.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="flex flex-col justify-center items-center gap-1 mb-3">
+    <CRMLogo class="size-10 shrink-0 rounded mb-4" />
+    <div class="text-base font-medium">
+      {{ __('Welcome to Frappe CRM') }}
+    </div>
+    <div class="text-p-base font-normal">
+      {{ __('{0}/{1} steps completed', [stepsCompleted, totalSteps]) }}
+    </div>
+  </div>
+  <div class="flex flex-col gap-2.5 overflow-hidden">
+    <div class="flex justify-between items-center py-0.5">
+      <div class="text-base font-medium">{{ __('Getting started') }}</div>
+      <Badge
+        :label="__('{0}% completed', [completedPercentage])"
+        theme="orange"
+        size="lg"
+      />
+    </div>
+    <div class="flex flex-col gap-1.5 overflow-y-auto">
+      <div
+        v-for="step in steps"
+        :key="step.title"
+        class="w-full flex gap-2 items-center hover:bg-surface-gray-1 rounded px-2 py-1.5 cursor-pointer"
+        :class="[
+          step.completed ? 'text-ink-gray-5 line-through' : 'text-ink-gray-8',
+        ]"
+        @click="() => !step.completed && step.onClick()"
+      >
+        <component :is="step.icon" class="h-4" />
+        <div class="text-base">{{ step.title }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import CRMLogo from '@/components/Icons/CRMLogo.vue'
+import { useOnboarding } from '@/composables/onboarding'
+
+const emit = defineEmits(['close'])
+
+const { steps, stepsCompleted, totalSteps, completedPercentage } =
+  useOnboarding()
+</script>