add basic page-by-page onboarding help

src/views/DiscoverView.vue

@@ -9,6 +9,8 @@
       Discover Projects
     </h1>
 
+    <OnboardingDialog ref="onboardingDialog" />
+
     <!-- Quick Search -->
     <div
       id="QuickSearch"
@@ -144,16 +146,19 @@ import { Router } from "vue-router";
 import QuickNav from "@/components/QuickNav.vue";
 import InfiniteScroll from "@/components/InfiniteScroll.vue";
 import ProjectIcon from "@/components/ProjectIcon.vue";
+import OnboardingDialog from "@/components/OnboardingDialog.vue";
 import TopMessage from "@/components/TopMessage.vue";
 import { NotificationIface } from "@/constants/app";
 import { accountsDB, db, retrieveSettingsForActiveAccount } from "@/db/index";
 import { Contact } from "@/db/tables/contacts";
 import { BoundingBox } from "@/db/tables/settings";
 import { didInfo, getHeaders, PlanData } from "@/libs/endorserServer";
+import { OnboardPage } from "@/libs/util";
 
 @Component({
   components: {
     InfiniteScroll,
+    OnboardingDialog,
     ProjectIcon,
     QuickNav,
     TopMessage,
@@ -192,6 +197,12 @@ export default class DiscoverView extends Vue {
 
     this.searchTerms = (this.$route as Router).query["searchText"] || "";
 
+    if (!settings.finishedOnboarding) {
+      (this.$refs.onboardingDialog as OnboardingDialog).open(
+        OnboardPage.Discover,
+      );
+    }
+
     if (this.searchBox) {
       await this.searchLocal();
     } else {

src/views/HelpOnboardingView.vue

@@ -29,10 +29,10 @@
     </p>
 
     <h1 class="mt-4 font-bold text-xl">Next Steps</h1>
-    Although not totally necessary, these are important to understand.
+    Although not totally necessary, backups are important to understand.
 
     <div class="ml-4">
-      <h1 class="font-bold text-xl">Backups</h1>
+      <h1 class="font-bold text-xl">Without a backup, you can lose data.</h1>
       <div>
         <p>
           Exporting backups (from the Account <fa icon="circle-user" /> screen)

src/views/HelpView.vue

@@ -27,6 +27,14 @@
         This app focuses on gifts & gratitude, using them to build cool things together with your network.
       </p>
 
+      <p class="ml-4">
+        If you'd like to see the page-by-page help,
+        <span
+          @click="unsetFinishedOnboarding()"
+          class="text-blue-500 cursor-pointer"
+        >click here</span>.
+      </p>
+
       <h2 class="text-xl font-semibold">What is the idea here?</h2>
       <p>
         We are building networks of people who want to grow good society from the ground up, using modern
@@ -548,11 +556,13 @@
 
 <script lang="ts">
 import { Component, Vue } from "vue-facing-decorator";
+import { Router } from "vue-router";
 import { useClipboard } from "@vueuse/core";
 
 import * as Package from "../../package.json";
 import QuickNav from "@/components/QuickNav.vue";
 import { NotificationIface } from "@/constants/app";
+import {retrieveSettingsForActiveAccount, updateAccountSettings} from "@/db/index";
 
 @Component({ components: { QuickNav } })
 export default class Help extends Vue {
@@ -575,5 +585,15 @@ export default class Help extends Vue {
       .copy(text)
       .then(() => setTimeout(fn, 2000));
   }
+
+  async unsetFinishedOnboarding() {
+    const settings = await retrieveSettingsForActiveAccount();
+    if (settings.activeDid) {
+      await updateAccountSettings(settings.activeDid || "", {
+        finishedOnboarding: false,
+      });
+    }
+    (this.$router as Router).push({ name: "home" });
+  }
 }
 </script>

src/views/HomeView.vue

@@ -8,6 +8,8 @@
       {{ AppString.APP_NAME }}
     </h1>
 
+    <OnboardingDialog ref="onboardingDialog" />
+
     <!-- prompt to install notifications with notificationsSupported, which we're making an advanced feature -->
     <div class="mb-8 mt-8">
       <div
@@ -326,6 +328,7 @@ import GiftedDialog from "@/components/GiftedDialog.vue";
 import GiftedPrompts from "@/components/GiftedPrompts.vue";
 import FeedFilters from "@/components/FeedFilters.vue";
 import InfiniteScroll from "@/components/InfiniteScroll.vue";
+import OnboardingDialog from "@/components/OnboardingDialog.vue";
 import QuickNav from "@/components/QuickNav.vue";
 import TopMessage from "@/components/TopMessage.vue";
 import UserNameDialog from "@/components/UserNameDialog.vue";
@@ -335,10 +338,10 @@ import {
   PASSKEYS_ENABLED,
 } from "@/constants/app";
 import {
-  db,
   accountsDB,
-  updateAccountSettings,
+  db,
   retrieveSettingsForActiveAccount,
+  updateAccountSettings,
 } from "@/db/index";
 import { Contact } from "@/db/tables/contacts";
 import {
@@ -358,6 +361,7 @@ import {
 import {
   generateSaveAndActivateIdentity,
   GiverReceiverInputInfo,
+  OnboardPage,
   registerSaveAndActivatePasskey,
 } from "@/libs/util";
 
@@ -384,12 +388,13 @@ interface GiveRecordWithContactInfo extends GiveSummaryRecord {
     },
   },
   components: {
+    EntityIcon,
+    FeedFilters,
     GiftedDialog,
     GiftedPrompts,
-    FeedFilters,
-    QuickNav,
-    EntityIcon,
     InfiniteScroll,
+    OnboardingDialog,
+    QuickNav,
     TopMessage,
     UserNameDialog,
   },
@@ -448,6 +453,12 @@ export default class HomeView extends Vue {
 
       this.isAnyFeedFilterOn = isAnyFeedFilterOn(settings);
 
+      if (!settings.finishedOnboarding) {
+        (this.$refs.onboardingDialog as OnboardingDialog).open(
+          OnboardPage.Home,
+        );
+      }
+
       // someone may have have registered after sharing contact info, so recheck
       if (!this.isRegistered && this.activeDid) {
         try {

src/views/ProjectsView.vue

@@ -6,6 +6,8 @@
     <!-- Heading -->
     <h1 id="ViewHeading" class="text-4xl text-center font-light">Your Ideas</h1>
 
+    <OnboardingDialog ref="onboardingDialog" />
+
     <!-- Result Tabs -->
     <div class="text-center text-slate-500 border-b border-slate-300 mt-8">
       <ul class="flex flex-wrap justify-center gap-4 -mb-px">
@@ -261,10 +263,14 @@ import { Router } from "vue-router";
 import { NotificationIface } from "@/constants/app";
 import { accountsDB, db, retrieveSettingsForActiveAccount } from "@/db/index";
 import * as libsUtil from "@/libs/util";
+import EntityIcon from "@/components/EntityIcon.vue";
 import InfiniteScroll from "@/components/InfiniteScroll.vue";
 import QuickNav from "@/components/QuickNav.vue";
+import OnboardingDialog from "@/components/OnboardingDialog.vue";
 import ProjectIcon from "@/components/ProjectIcon.vue";
 import TopMessage from "@/components/TopMessage.vue";
+import UserNameDialog from "@/components/UserNameDialog.vue";
+import { Contact } from "@/db/tables/contacts";
 import {
   didInfo,
   getHeaders,
@@ -272,15 +278,14 @@ import {
   OfferSummaryRecord,
   PlanData,
 } from "@/libs/endorserServer";
-import EntityIcon from "@/components/EntityIcon.vue";
-import { Contact } from "@/db/tables/contacts";
-import UserNameDialog from "@/components/UserNameDialog.vue";
+import { OnboardPage } from "@/libs/util";
 
 @Component({
   components: {
     EntityIcon,
     InfiniteScroll,
     QuickNav,
+    OnboardingDialog,
     ProjectIcon,
     TopMessage,
     UserNameDialog,
@@ -325,6 +330,12 @@ export default class ProjectsView extends Vue {
       const allAccounts = await accountsDB.accounts.toArray();
       this.allMyDids = allAccounts.map((acc) => acc.did);
 
+      if (!settings.finishedOnboarding) {
+        (this.$refs.onboardingDialog as OnboardingDialog).open(
+          OnboardPage.Create,
+        );
+      }
+
       if (allAccounts.length === 0) {
         console.error("No accounts found.");
         this.errNote("You need an identifier to load your projects.");