fix: show getting started banner in sidebar if not completed

frontend/src/components/GettingStartedBanner.vue

@@ -0,0 +1,33 @@
+<template>
+  <div
+    v-if="!isSidebarCollapsed"
+    class="m-2 flex flex-col gap-3 shadow-sm rounded-lg py-2.5 px-3 bg-surface-white text-base"
+  >
+    <div class="inline-flex gap-2">
+      <StepsIcon class="h-4 my-0.5" />
+      <div class="flex flex-col text-p-sm gap-0.5">
+        <div class="text-ink-gray-9 font-medium">
+          {{ __('Gettings started') }}
+        </div>
+        <div class="text-ink-gray-7">{{ __('4/10 steps') }}</div>
+      </div>
+    </div>
+    <Button
+      :label="__('Complete now')"
+      theme="blue"
+      @click="emit('completeNow')"
+    />
+  </div>
+</template>
+<script setup>
+import StepsIcon from '@/components/Icons/StepsIcon.vue'
+
+const props = defineProps({
+  isSidebarCollapsed: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emit = defineEmits(['completeNow'])
+</script>

frontend/src/components/Icons/StepsIcon.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M8 6.5C9.10457 6.5 10 5.60457 10 4.5C10 3.39543 9.10457 2.5 8 2.5C6.89543 2.5 6 3.39543 6 4.5C6 5.60457 6.89543 6.5 8 6.5ZM8 7.5C9.65685 7.5 11 6.15685 11 4.5C11 2.84315 9.65685 1.5 8 1.5C6.34315 1.5 5 2.84315 5 4.5C5 6.15685 6.34315 7.5 8 7.5ZM12 13.5C13.1046 13.5 14 12.6046 14 11.5C14 10.3954 13.1046 9.5 12 9.5C10.8954 9.5 10 10.3954 10 11.5C10 12.6046 10.8954 13.5 12 13.5ZM12 14.5C13.6569 14.5 15 13.1569 15 11.5C15 9.84315 13.6569 8.5 12 8.5C10.3431 8.5 9 9.84315 9 11.5C9 13.1569 10.3431 14.5 12 14.5ZM6 11.5C6 12.6046 5.10457 13.5 4 13.5C2.89543 13.5 2 12.6046 2 11.5C2 10.3954 2.89543 9.5 4 9.5C5.10457 9.5 6 10.3954 6 11.5ZM7 11.5C7 13.1569 5.65685 14.5 4 14.5C2.34315 14.5 1 13.1569 1 11.5C1 9.84315 2.34315 8.5 4 8.5C5.65685 8.5 7 9.84315 7 11.5Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

frontend/src/components/Layouts/AppSidebar.vue

@@ -74,7 +74,13 @@
     <div class="m-2 flex flex-col gap-1">
       <SignupBanner :isSidebarCollapsed="isSidebarCollapsed" />
       <TrialBanner v-if="isFCSite" />
+      <GettingStartedBanner
+        v-if="!isOnboardingStepsCompleted"
+        :isSidebarCollapsed="isSidebarCollapsed"
+        @completeNow="showHelpModal = true"
+      />
       <SidebarLink
+        v-else
         :label="__('Help')"
         :isCollapsed="isSidebarCollapsed"
         @click="showHelpModal = !showHelpModal"
@@ -101,7 +107,11 @@
     </div>
     <Notifications />
     <Settings />
-    <HelpModal v-if="showHelpModal" v-model="showHelpModal" />
+    <HelpModal
+      v-if="showHelpModal"
+      v-model="showHelpModal"
+      :isOnboardingStepsCompleted="isOnboardingStepsCompleted"
+    />
   </div>
 </template>
 
@@ -124,6 +134,7 @@ import SidebarLink from '@/components/SidebarLink.vue'
 import Notifications from '@/components/Notifications.vue'
 import Settings from '@/components/Settings/Settings.vue'
 import SignupBanner from '@/components/SignupBanner.vue'
+import GettingStartedBanner from '@/components/GettingStartedBanner.vue'
 import HelpModal from '@/components/Modals/HelpModal.vue'
 import { viewsStore } from '@/stores/views'
 import {
@@ -246,5 +257,9 @@ function getIcon(routeName, icon) {
   }
 }
 
+const isOnboardingStepsCompleted = useStorage(
+  'isOnboardingStepsCompleted',
+  false,
+)
 const showHelpModal = ref(false)
 </script>

frontend/src/components/Modals/HelpModal.vue

@@ -24,6 +24,10 @@ import MinimizeIcon from '@/components/Icons/MinimizeIcon.vue'
 import MaximizeIcon from '@/components/Icons/MaximizeIcon.vue'
 import { ref } from 'vue'
 
+const props = defineProps({
+  isOnboardingStepsCompleted: Boolean,
+})
+
 const show = defineModel()
 const minimize = ref(false)
 </script>