show first time helper modal

Author: danilopolani

packages/main/src/index.ts

@@ -12,6 +12,9 @@ import './securityRestrictions';
 import { Twitch } from './workers/Twitch';
 import { WorkflowQueue } from './workers/WorkflowQueue';
 import { trayIcon } from './images';
+import { tellRenderer } from './helpers';
+import { get as generalStoreGet } from './stores/general';
+import { FIRST_TIME_APP_SUBJECT } from '~shared/global';
 
 if (import.meta.env.VITE_SENTRY_DSN) {
   Sentry.init({
@@ -72,6 +75,12 @@ app
   .then(restoreOrCreateWindow)
   .catch((err) => console.error('Failed create window:', (err as Error).message))
   .then(async () => {
+    if (generalStoreGet<boolean>('firstTimeInApp')) {
+      tellRenderer({
+        subject: FIRST_TIME_APP_SUBJECT,
+      });
+    }
+
     // Set icon tray
     if (process.platform === 'win32') {
       app.setAppUserModelId('Streamflow');

packages/renderer/src/App.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { useNotification, NButton } from 'naive-ui';
-import { onMounted } from 'vue';
+import { useNotification, NButton, NModal } from 'naive-ui';
+import { onMounted, ref } from 'vue';
 import { type Router, useRouter } from 'vue-router';
 import { type WorkerMessage } from '../../shared/WorkerMessage';
 import {
@@ -18,9 +18,11 @@ import { useTwitch } from './stores/twitch';
 import ContextMenu from '/@/components/ContextMenu.vue';
 import { ObsWebSocketSubject } from '~shared/ObsWebSocketSettings';
 import { TwitchSubject } from '~shared/TwitchSettings';
+import { FIRST_TIME_APP_SUBJECT } from '~shared/global';
 
 const APP_VERSION = import.meta.env.VITE_APP_VERSION;
 let router: Router;
+const showFirstTimeModal = ref(false);
 
 onMounted(() => {
   const notification = useNotification();
@@ -40,6 +42,11 @@ onMounted(() => {
           rewards: JSON.parse(e.data.message!),
         });
 
+        break;
+      }
+      case FIRST_TIME_APP_SUBJECT: {
+        showFirstTimeModal.value = true;
+
         break;
       }
     }
@@ -106,6 +113,28 @@ onMounted(() => {
 <template>
   <context-menu />
 
+  <n-modal
+    :show="showFirstTimeModal"
+    :show-icon="false"
+    preset="dialog"
+    title="First time?"
+    transform-origin="center">
+    <div class="mb-6"></div>
+
+    <div class="!text-base">
+      <p class="mb-4">Welcome to <strong class="text-primary">Streamflow</strong>, the open-source toolkit for streamers!</p>
+      <p class="mb-2">Just a few things before getting started; you can change these behaviours in the app <strong>Settings</strong>.</p>
+      <ol class="list-disc pl-8">
+        <li>When you <strong>close the app</strong>, it will run in the background. You can force-close it in the tray icons</li>
+        <li>By default the app will <strong>open with your computer start up</strong> in the tray icon, so you don't open it manually!</li>
+      </ol>
+    </div>
+
+    <template #action>
+      <n-button type="primary" @click="showFirstTimeModal = false">Got it</n-button>
+    </template>
+  </n-modal>
+
   <main id="router-content">
     <router-view></router-view>
   </main>

packages/shared/global.ts

@@ -1 +1,3 @@
 export const HTTP_SERVER_PORT = 28591;
+
+export const FIRST_TIME_APP_SUBJECT = 'FIRST_TIME_APP';