add help page; add tasks for rest of "contact giving" functions

project.yaml

@@ -12,12 +12,22 @@
 - replace user-affecting console.logs with error messages (eg. catches)
 
 - contacts v1 :
+  - .2 show gives with new setting
+  - 01 show gives with confirmations
+  - .5 Add page to show seed.
+  - 01 Provide a way to import the non-sensitive data.
+  - 01 Provide way to share your contact info.
+  - .1 remove "scan new contact"
+
+- contacts v+ :
   - .5 make advanced "show/hide amounts" button into a nice UI toggle
   - .2 show error to user when adding a duplicate contact
   - parse input more robustly (with CSV lib and not commas)
 
-- refactor alerts:
+- refactor UI :
-  - They show at the top and can be missed, eg. account data download
+  - .5 Alerts show at the top and can be missed, eg. account data download
+  - 01 Code for "nav" tabs across the bottom is duplicated on each page.
+  - .2 Add "copied" feedback when they click "copy" on /account
 
 - commit screen
 

src/router/index.ts

@@ -63,6 +63,12 @@ const routes: Array<RouteRecordRaw> = [
     component: () =>
       import(/* webpackChunkName: "discover" */ "../views/DiscoverView.vue"),
   },
+  {
+    path: "/help",
+    name: "help",
+    component: () =>
+      import(/* webpackChunkName: "help" */ "../views/HelpView.vue"),
+  },
   {
     path: "/import-account",
     name: "import-account",

src/views/AccountViewView.vue

@@ -26,7 +26,7 @@
           <fa icon="folder-open" class="fa-fw"></fa>
         </router-link>
       </li>
-      <!-- Commitments -->
+      <!-- Contacts -->
       <li class="basis-1/5 rounded-md text-slate-500">
         <router-link
           :to="{ name: 'contacts' }"
@@ -54,6 +54,18 @@
       Your Identity
     </h1>
 
+    <div class="flex justify-between py-2">
+      <span />
+      <span>
+        <router-link
+          :to="{ name: 'help' }"
+          class="text-xs uppercase bg-blue-500 text-white px-1.5 py-1 rounded-md ml-1"
+        >
+          Help
+        </router-link>
+      </span>
+    </div>
+
     <!-- Friend referral requirement notice -->
     <div
       class="bg-amber-200 text-amber-900 border-amber-500 border-dashed border text-center rounded-md overflow-hidden px-4 py-3 mb-4"

src/views/ContactsView.vue

@@ -24,7 +24,7 @@
           ><fa icon="folder-open" class="fa-fw"></fa
         ></router-link>
       </li>
-      <!-- Commitments -->
+      <!-- Contacts -->
       <li class="basis-1/5 rounded-md text-slate-500">
         <router-link
           :to="{ name: 'contacts' }"

src/views/DiscoverView.vue

@@ -24,7 +24,7 @@
           ><fa icon="folder-open" class="fa-fw"></fa
         ></router-link>
       </li>
-      <!-- Commitments -->
+      <!-- Contacts -->
       <li class="basis-1/5 rounded-md text-slate-500">
         <router-link
           :to="{ name: 'contacts' }"

src/views/HelpView.vue

@@ -0,0 +1,139 @@
+<template>
+  <!-- QUICK NAV -->
+  <nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200">
+    <ul class="flex text-2xl p-2 gap-2">
+      <!-- Home Feed -->
+      <li class="basis-1/5 rounded-md text-slate-500">
+        <router-link :to="{ name: 'home' }" class="block text-center py-3 px-1">
+          <fa icon="house-chimney" class="fa-fw"></fa>
+        </router-link>
+      </li>
+      <!-- Search -->
+      <li class="basis-1/5 rounded-md text-slate-500">
+        <router-link
+          :to="{ name: 'discover' }"
+          class="block text-center py-3 px-1"
+        >
+          <fa icon="magnifying-glass" class="fa-fw"></fa>
+        </router-link>
+      </li>
+      <!-- Projects -->
+      <li class="basis-1/5 rounded-md text-slate-500">
+        <router-link
+          :to="{ name: 'projects' }"
+          class="block text-center py-3 px-1"
+        >
+          <fa icon="folder-open" class="fa-fw"></fa>
+        </router-link>
+      </li>
+      <!-- Contacts -->
+      <li class="basis-1/5 rounded-md text-slate-500">
+        <router-link
+          :to="{ name: 'contacts' }"
+          class="block text-center py-3 px-1"
+        >
+          <fa icon="users" class="fa-fw"></fa>
+        </router-link>
+      </li>
+      <!-- Profile -->
+      <li class="basis-1/5 rounded-md text-slate-400">
+        <router-link
+          :to="{ name: 'account' }"
+          class="block text-center py-3 px-1"
+        >
+          <fa icon="circle-user" class="fa-fw"></fa>
+        </router-link>
+      </li>
+    </ul>
+  </nav>
+
+  <!-- CONTENT -->
+  <section id="Content" class="p-6 pb-24">
+    <!-- Heading -->
+    <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
+      Help
+    </h1>
+
+    <div>
+      <h2 class="text-xl font-semibold">Introduction</h2>
+      <p>
+        This app is a window into data that you and your friends own, focused on
+        gifts and collaboration.
+      </p>
+
+      <h2 class="text-xl font-semibold">How do I backup all my data?</h2>
+      <p>
+        There are two parts to backup your data: the identifier secrets and the
+        other data such as settings, contacts, etc.
+      </p>
+
+      <div class="px-4">
+        <h2 class="text-xl font-semibold">
+          How do I backup my identifier (secret) data?
+        </h2>
+        <ul class="list-disc list-inside">
+          <li>
+            Go to Your Identity <fa icon="circle-user" class="fa-fw" /> page.
+          </li>
+          <li>
+            Click on "Backup Identifier Seed" and follow the instructions.
+          </li>
+        </ul>
+
+        <h2 class="text-xl font-semibold">
+          How do I backup my other (non-identifier-secret) data?
+        </h2>
+        <ul class="list-disc list-inside">
+          <li>
+            Go to Your Identity <fa icon="circle-user" class="fa-fw" /> page.
+          </li>
+          <li>
+            Click on "Download Settings...". That will save a file to your
+            downloads folder. That is your backup, so put it someplace where you
+            won't lose it.
+          </li>
+        </ul>
+      </div>
+
+      <h2 class="text-xl font-semibold">How do I restore my data?</h2>
+      <p>
+        There are two parts to restore your data: the identity secrets and the
+        other data such as settings, contacts, etc.
+      </p>
+
+      <div class="px-4">
+        <h2 class="text-xl font-semibold">
+          How do I restore my identifier (secret) data?
+        </h2>
+        <ul class="list-disc list-inside">
+          <li>
+            You only have one identifier at a time. If you have an identifier on
+            Your Identity <fa icon="circle-user" class="fa-fw" /> page, you'll
+            need to clear it out;
+            <a
+              href="https://www.lifewire.com/how-to-clear-cache-2617980"
+              class="text-blue-500"
+            >
+              here are some helpful instructions.
+            </a>
+            But beware! This will also clear out your settings and contact data,
+            so be sure to back that up first.
+          </li>
+          <li>
+            <router-link class="text-blue-500" to="/">
+              Go to the start
+            </router-link>
+            and choose "Yes" to enter the identity you backed up.
+          </li>
+        </ul>
+
+        <h2 class="text-xl font-semibold">
+          How do I restore my other (non-identifier-secret) data?
+        </h2>
+        <ul class="list-disc list-inside">
+          <li>Make sure you have your backup file (above), then contact us.</li>
+        </ul>
+      </div>
+    </div>
+  </section>
+</template>

src/views/ProjectViewView.vue

@@ -24,9 +24,11 @@
           ><fa icon="folder-open" class="fa-fw"></fa
         ></router-link>
       </li>
-      <!-- Commitments -->
+      <!-- Contacts -->
       <li class="basis-1/5 rounded-md text-slate-500">
-        <router-link :to="{ name: '' }" class="block text-center py-3 px-1"
+        <router-link
+          :to="{ name: 'contacts' }"
+          class="block text-center py-3 px-1"
           ><fa icon="hand" class="fa-fw"></fa
         ></router-link>
       </li>

src/views/ProjectsView.vue

@@ -24,7 +24,7 @@
           ><fa icon="folder-open" class="fa-fw"></fa
         ></router-link>
       </li>
-      <!-- Commitments -->
+      <!-- Contacts -->
       <li class="basis-1/5 rounded-md text-slate-500">
         <router-link
           :to="{ name: 'contacts' }"