feat: onboarding

src/components/StartButton.vue

@@ -5,10 +5,12 @@ import ContextMenu from 'primevue/contextmenu';
 import { useConfirm } from 'primevue/useconfirm';
 import { listen } from '@tauri-apps/api/event';
 import { getCurrentWindow } from '@tauri-apps/api/window';
+import Onboarding from './Onboarding.vue';
 import { invoke } from '../invoke';
-import { usePrfStore } from '../stores';
+import { useClientStore, usePrfStore } from '../stores';
 
 const prf = usePrfStore();
+const client = useClientStore();
 const confirmDialog = useConfirm();
 
 type StartStatus = 'ready' | 'preparing' | 'running';
@@ -98,6 +100,7 @@ const menuItems = [
     {
         label: 'Refresh and start',
         icon: 'pi pi-sync',
+        tooltip: 'test',
         command: async () => await startline(false, true),
     },
     {
@@ -110,6 +113,14 @@ const menuItems = [
         icon: 'pi pi-link',
         command: createShortcut,
     },
+    {
+        label: 'Help',
+        icon: 'pi pi-question-circle',
+        command: () => {
+            onboardingFirstTime.value = false;
+            onboardingVisible.value = true;
+        },
+    },
 ];
 const menu = ref();
 
@@ -117,9 +128,38 @@ const showContextMenu = (event: Event) => {
     event.preventDefault();
     menu.value.show(event);
 };
+
+const onboardingVisible = ref(false);
+const onboardingFirstTime = ref(false);
+
+const tryStart = () => {
+    const game = prf.current?.meta.game;
+
+    if (game !== undefined) {
+        if (client.onboarded.includes(game)) {
+            startline(false, false);
+        } else {
+            onboardingVisible.value = true;
+            onboardingFirstTime.value = true;
+            client.setOnboarded(game);
+        }
+    }
+};
 </script>
 
 <template>
+    <Onboarding
+        :visible="onboardingVisible"
+        :first-time="onboardingFirstTime"
+        :on-finish="
+            () => {
+                onboardingVisible = false;
+                if (onboardingFirstTime === true) {
+                    startline(false, false);
+                }
+            }
+        "
+    />
     <ContextMenu ref="menu" :model="menuItems" />
     <Button
         v-if="startStatus === 'ready'"
@@ -130,7 +170,7 @@ const showContextMenu = (event: Event) => {
         aria-label="start"
         size="small"
         class="m-2.5"
-        @click="startline(false, false)"
+        @click="tryStart"
         @contextmenu="showContextMenu"
     />
     <Button