start display of starred projects (but without setting start & not sure about endpoint)

.gitignore

@@ -2,6 +2,8 @@
 node_modules
 /dist
 signature.bin
+# generated during `npm run build`
+sw_scripts-combined.js
 *.pem
 verified.txt
 myenv

CHANGELOG.md

@@ -6,6 +6,31 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+### Changed in DB
+- ?
+
+
+## [0.2.14] - 2024.02.14
+### Changed
+- Combine all service worker scripts into a single file
+### Changed in DB
+- Nothing
+
+
+## [0.2.13] - 2024.02.07
+### Added
+- Display of user's offers
+- Check for valid DIDs
+### Fixed
+- Name display on give prompt
+- Non-numbers on number input & autocapitalize on URL input
+### Changed in DB
+- Nothing
+
+
+## [0.2.12] - 2024.02.01
+### Added
+- Prompts for gratitude
 
 
 ## [0.2.11] - 2024.01.28

README.md

@@ -1,6 +1,14 @@
 # TimeSafari.app - Crowd-Funder for Time - PWA
 
-## Project setup
+[Time Safari](https://timesafari.org/) allows people to ease into collaboration: start with expressions of gratitude
+and expand to crowd-fund with time & money, then record and see the impact of contributions.
+
+## Roadmap
+
+See [project.task.yaml](project.task.yaml) for current priorities.
+(Numbers at the beginning of lines are estimated hours. See [taskyaml.org](https://taskyaml.org/) for details.)
+
+## Setup
 
 We have pkgx.dev set up in package.json, so you can use `dev` to set up the dev environment.
 
@@ -34,12 +42,6 @@ npm run lint
 
 * `npm run build`
 
-...to make sure the service worker scripts are in proper form. (It's only important if you changed something in that directory.)
-
-* `cp sw_scripts/[ns]* dist/`
-
-... to copy the contents of the `sw_scripts` folder to the `dist` folder - except additional_scripts.js.
-
 * Get on the server and back up the time-safari folder.
 
 * `rsync -azvu -e "ssh -i ~/.ssh/..." dist ubuntutest@test.timesafari.app:time-safari`
@@ -81,7 +83,8 @@ To add an icon, add to main.ts and reference with `fa` element and `icon` attrib
 - Backup seed & data & get a CSV dump from Endorser Mobile.
 - Check that the version is updated.
 - Clear the browser data & add identity & import Time Safari contacts and then CSV contacts.
-- Clear the browser data again. (See "Reset" below.) Make sure that it's using the test API (under Identity in 'Advanced').
+- Make sure that it's using the test API (under Identity in 'Advanced').
+- Clear the browser data again. (See "Reset" below.)
   - Go to the account page before visiting the home page to see that there is no ID.
   - On the home page:
     - Check that it generated an ID.
@@ -107,20 +110,6 @@ To add an icon, add to main.ts and reference with `fa` element and `icon` attrib
 - Offer, deliver a give, and confirm. Create a third user and test connections.
 - Switch to "no identifier" to see that things look OK without any ID.
 
-
-
-## Scenarios
-
-- Create a new identity as prompted. Go to "Your Identity" screen and copy the ID to the clipboard.
-
-- Go back to /start and import test User #0 `did:ethr:0x0000694B58C2cC69658993A90D3840C560f2F51F` with this this seed phrase:
-  `rigid shrug mobile smart veteran half all pond toilet brave review universe ship congress found yard skate elite apology jar uniform subway slender luggage`
-  (Other test users are found [here](https://github.com/trentlarson/endorser-ch/blob/master/test/util.js).)
-
-- Go to "Your Contacts" screen and add the ID you copied to the clipboard, and hit "+" to add them.
-
-- Click on the "Registration Unknown" button and register that person to be able to make claims as them.
-
 ### Clear/Reset data & restart
 
 * Clear cache for site. (In Chrome, go to `chrome://settings/cookies` and "all site data and permissions"; in Firefox, go to `about:preferences` and search for "cache" then "Manage Data", and also manually remove the IndexedDB data if the DBs still show.)
@@ -172,3 +161,4 @@ Gifts make the world go 'round!
 * [Forest floor image](https://www.goodfreephotos.com/albums/textures/leafy-autumn-forest-floor.jpg)
 * Time Safari logo assisted by [DALL-E in ChatGPT](https://chat.openai.com/g/g-2fkFE8rbu-dall-e)
 * [DiceBear](https://www.dicebear.com/licenses/) and [Avataaars](https://www.dicebear.com/styles/avataaars/#details) for human-looking identicons
+* Some gratitude prompts thanks to [Develop Good Habits](https://www.developgoodhabits.com/gratitude-journal-prompts/)

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "TimeSafari_Test",
-  "version": "0.2.11",
+  "version": "0.2.15-beta",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "TimeSafari_Test",
-      "version": "0.2.11",
+      "version": "0.2.15-beta",
       "dependencies": {
         "@dicebear/collection": "^5.3.5",
         "@dicebear/core": "^5.3.5",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "TimeSafari_Test",
-  "version": "0.2.11",
+  "version": "0.2.15-beta",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

project.task.yaml

@@ -1,29 +1,57 @@
 
-tasks:
+tasks :
 
-- anchor hash into BTC
-- prompt for the name directly when they visit the QR scan page
-- bug - user on new phone did not prompt him to install
-- image on give
+- 01 release server & client for fix to project-editing
+
+- .5 fix timeSafari.org cert renewals
+- .2 anchor hash into BTC
+- .1 add step 1 to onboarding hints to "install"
+
+- 01 bookmarks for BVC
+
+- 24 compelling UI for credential presentations
+  - discover who in my network has activity on a project
+- 24 compelling UI for statistics (eg. World?)
+
+- .5 stop from seeing an error on the first page when browser doesn't support service workers (which I've seen on iPhone; visible in Firefox private window)
+- .2 add links between projects
+- 32 image on give :
   - Show a camera to take a picture
   - Scale the image to a reasonable size
   - Upload to a public readable place
-    - check the rate limits
-    - use CID
-    - put the image URL in the claim
+  - check the rate limits
+  - use CID
+  - put the image URL in the claim
   - Rates - images erased?
-    - image not associated with JWT ULID since that's assigned later
-- mark a project as inactive
-- allow to see and reset DB password
-- add share button for sending a message to confirmers when we can't see the claim (like the "visible" links)
-- add TimeSafari as a shareable app https://developer.mozilla.org/en-US/docs/Web/Manifest/share_target
-- choose a project's alternative agent ("authorized representative") via a contact chooser (not just copy-paste a DID)
+  - image not associated with JWT ULID since that's assigned later
+
+- 24 make the contact browsing on the front page something that invites more action
+
+- .2 list the "show more" contacts alphabetically
+- .5 change server plan & project endpoints to use jwtId as identifier rather than rowid
+- 16 edit offers & gives, or revoke allowing re-creation
+- .1 When available in the server, give message for 'nonAmountGiven' on offers on ProjectsView page.
+- .1 Add help instructions for "Encryption key has changed" error. (It is a problem if localStorage is cleared, but the contacts & settings remain and they have to restore their seeds.)
+- .5 add more detail on TimeSafari.org
+- .1 show better error when user with no ID goes to the "My Project" page
+- 08 add button to front page to prompt for ideas for gratitude :
+  - show previous on "Your" screen
+  - checkboxes - randomize vs show in order, show non-person-oriented messages, show only contacts, show only projects
+
+- 08 allow user to add a time when they want their daily notification
+
+- .5 prompt for the name directly when they visit the QR scan page
+- 01 mark a project as inactive
+- 01 add share button for sending a message to confirmers when we can't see the claim (like the "visible" links)
+- .5 add TimeSafari as a shareable app https://developer.mozilla.org/en-US/docs/Web/Manifest/share_target
+- .5 choose a project's alternative agent ("authorized representative") via a contact chooser (not just copy-paste a DID)
 - .5 find out why clicking quickly back-and-forth onto the "my project" page often shows error "You need an identifier to load your projects." (easier to reproduce on desktop?)
 - .5 bug - it didn't show the "fulfills offer" on the claim detail page for a give that had one - https://test.timesafari.app/claim/01HMFWRPA3PD6Q9EYFKX3MC41J
 - 01 replace all "confirm" prompts with nicer modal
 - .1 hide project-create button on project page if not registered
 - .1 hide offer & give buttons on project list page if not registered
 - .1 add cursor-pointer on the icons for giving on the project page, and on the list of projects on the discover page
+- .2 record when InfiniteScroll hits the end of the list and don't trigger any more loads
 
 - bug - turning notifications on from the help screen did not stay, though account screen toggle did stay (From Jason on iPhone.)
 - refactor - supply the projectId to the OfferDialog just like we do with the GiftedDialog offerId (in the "open" method, maybe as well as an attribute)
@@ -112,16 +140,14 @@ tasks:
   - badge for amount given/offered to your project
   - set a goal of given/offers
 
-- automated tests, eg. cypress
+- automated tests, eg. pup-test or cypress
 
 - Notifications (wake on the phone, push notifications)
   - 02 change push server so that the web-push/subscribe call sets up a thread for the 10-seconds-later push notification, but returns immediately to the callee
   - pull instead of push, maybe via scheduled runs
   - have a notification pop-up on Mac screen
 
-- Connect with phone contacts
-
-- Multiple identities
+- 16 Connect with phone contacts - this may be a whole different app, because we want a quick link A) to the same phone contact and B) from the phone contact app
 
 - Support KERI AIDs
 - Support Peer DIDs
@@ -129,12 +155,11 @@ tasks:
 - Write to or read from a different ledger (eg. private ACDC, EAS & attest.sh)
 
 - 01 On nearby search, if user starts changing their box but cancels and goes back to the map it is zoomed far out. Fix to fit the box better.
-- 16 From the home screen, make the quick action even easier.
 
-- allow some gives even if they aren't registered - maybe someday as a gift to the world, but we really want this to be built via personal connections
+- allow some gives even if they aren't registered - maybe someday as a gift to the world, but we really want this to be built via personal connections -- and that allows spam
 - .1 When Chrome shows compatibility https://developer.mozilla.org/en-US/docs/Web/API/Web_Share_API#api.navigator.canshare
   then change the canShare check in this app to check the real canShare() method.
 
-log:
+log :
 - videos for multiple identities https://youtu.be/p8L87AeD76w and for adding time to contacts https://youtu.be/7Yylczevp10 done:2023-03-29
 - project lists, contact totals & actions, multiple identifiers, stats-world, activity feed, rename of this project file (use "--follow --") milestone:2 done:2023-06-27

src/App.vue

@@ -353,7 +353,7 @@ export default class App extends Vue {
       }
     }
     // there may be a long pause here on first initialization
-    navigator.serviceWorker.ready.then(() => {
+    navigator.serviceWorker?.ready.then(() => {
       this.serviceWorkerReady = true;
     });
   }
@@ -443,7 +443,7 @@ export default class App extends Vue {
         this.subscribeToPush()
           .then(() => {
             console.log("Subscribed successfully.");
-            return navigator.serviceWorker.ready;
+            return navigator.serviceWorker?.ready;
           })
           .then((registration) => {
             return registration.pushManager.getSubscription();
@@ -575,7 +575,7 @@ export default class App extends Vue {
 
   async turnOffNotifications() {
     let subscription;
-    const pushProviderSuccess = await navigator.serviceWorker.ready
+    const pushProviderSuccess = await navigator.serviceWorker?.ready
       .then((registration) => {
         return registration.pushManager.getSubscription();
       })

src/components/GiftedDialog.vue

@@ -25,7 +25,7 @@
           <fa icon="chevron-left" />
         </div>
         <input
-          type="text"
+          type="number"
           class="w-full border border-r-0 border-slate-400 px-2 py-2 text-center"
           v-model="amountInput"
         />
@@ -112,14 +112,6 @@ export default class GiftedDialog extends Vue {
   async open(giver?: GiverInputInfo, offerId?: string) {
     this.description = "";
     this.giver = giver || {};
-    if (!this.giver.name) {
-      this.giver.name = didInfo(
-        this.giver.did,
-        this.activeDid,
-        this.allMyDids,
-        this.allContacts,
-      );
-    }
     // if we show "given to user" selection, default checkbox to true
     this.givenToUser = this.showGivenToUser;
     this.amountInput = "0";
@@ -137,6 +129,14 @@ export default class GiftedDialog extends Vue {
       const allAccounts = await accountsDB.accounts.toArray();
       this.allMyDids = allAccounts.map((acc) => acc.did);
 
+      if (!this.giver.name) {
+        this.giver.name = didInfo(
+          this.giver.did,
+          this.activeDid,
+          this.allMyDids,
+          this.allContacts,
+        );
+      }
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (err: any) {
       console.error("Error retrieving settings from database:", err);

src/components/GiftedPrompts.vue

@@ -0,0 +1,241 @@
+<template>
+  <div v-if="visible" class="dialog-overlay">
+    <div class="dialog">
+      <h1 class="text-xl font-bold text-center mb-4">Here's one:</h1>
+      <span class="flex justify-between">
+        <span
+          class="rounded-l border border-slate-400 bg-slate-200 px-4 py-2 flex"
+          @click="prevIdea()"
+        >
+          <fa icon="chevron-left" class="m-auto" />
+        </span>
+
+        <div class="m-2">
+          <span v-if="currentIdeaIndex < IDEAS.length">
+            <p class="text-center text-lg font-bold">
+              {{ IDEAS[currentIdeaIndex] }}
+            </p>
+          </span>
+          <div v-if="currentIdeaIndex == IDEAS.length + 0">
+            <p class="text-center">
+              <span
+                v-if="currentContact == null"
+                class="text-orange-500 text-lg font-bold"
+              >
+                That's all your contacts.
+              </span>
+              <span v-else>
+                <span class="text-lg font-bold">
+                  Did {{ currentContact.name || AppString.NO_CONTACT_NAME }}
+                  <br />
+                  or someone near them do anything &ndash; maybe a while ago?
+                </span>
+                <span class="flex justify-between">
+                  <span />
+                  <button
+                    class="text-center bg-slate-500 text-white px-1.5 py-2 rounded-md mt-4"
+                    @click="nextIdeaPastContacts()"
+                  >
+                    Skip Contacts <fa icon="forward" />
+                  </button>
+                </span>
+              </span>
+            </p>
+          </div>
+        </div>
+
+        <span
+          class="rounded-r border border-slate-400 bg-slate-200 px-4 py-2 flex"
+          @click="nextIdea()"
+        >
+          <fa icon="chevron-right" class="m-auto" />
+        </span>
+      </span>
+      <button
+        class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mt-4"
+        @click="cancel"
+      >
+        That's it!
+      </button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component } from "vue-facing-decorator";
+
+import { AppString } from "@/constants/app";
+import { db } from "@/db/index";
+import { Contact } from "@/db/tables/contacts";
+
+interface Notification {
+  group: string;
+  type: string;
+  title: string;
+  text: string;
+}
+
+@Component
+export default class GivenPrompts extends Vue {
+  $notify!: (notification: Notification, timeout?: number) => void;
+
+  IDEAS = [
+    "Did anyone fix food for you?",
+    "Did a family member do something for you?",
+    "Did anyone give you a compliment?",
+    "Who is someone you can always rely on, and how did they demonstrate that?",
+    "Did you see anyone give to someone else?",
+    "Is there someone who you have never met who has helped you somehow?",
+    "How did an artist or musician or author inspire you?",
+    "What inspiration did you get from someone who handled tragedy well?",
+    "Did some organization give something worth respect?",
+    "Who last gave you a good laugh?",
+    "Do you recall anything that was given to you while you were young?",
+    "Did someone forgive you or overlook a mistake?",
+    "Do you know of a way an ancestor contributed to your life?",
+    "Did anyone give you help at work?",
+    "How did a teacher or mentor or great example help you?",
+  ];
+  OTHER_PROMPTS = 1;
+  CONTACT_PROMPT_INDEX = this.IDEAS.length; // expected after other prompts
+
+  currentContact: Contact | undefined = undefined;
+  currentIdeaIndex = 0;
+  numContacts = 0;
+  shownContactDbIndices: number[] = [];
+  visible = false;
+
+  AppString = AppString;
+
+  async open() {
+    this.visible = true;
+
+    await db.open();
+    this.numContacts = await db.contacts.count();
+  }
+
+  close() {
+    // close the dialog but don't change values (just in case some actions are added later)
+    this.visible = false;
+  }
+
+  /**
+   * Get the next idea.
+   * If it is a contact prompt, loop through.
+   */
+  async nextIdea() {
+    // if we're incrementing to the contact prompt
+    // or if we're at the contact prompt and there was a previous contact...
+    if (
+      this.currentIdeaIndex == this.CONTACT_PROMPT_INDEX - 1 ||
+      (this.currentIdeaIndex == this.CONTACT_PROMPT_INDEX &&
+        this.shownContactDbIndices.length < this.numContacts)
+    ) {
+      this.currentIdeaIndex = this.CONTACT_PROMPT_INDEX;
+      this.findNextUnshownContact();
+    } else {
+      // we're not at the contact prompt (or we ran out), so increment the idea index
+      this.currentIdeaIndex =
+        (this.currentIdeaIndex + 1) % (this.IDEAS.length + this.OTHER_PROMPTS);
+      // ... and clear out any other prompt info
+      this.currentContact = undefined;
+      this.shownContactDbIndices = [];
+    }
+  }
+
+  prevIdea() {
+    if (
+      this.currentIdeaIndex ==
+        (this.CONTACT_PROMPT_INDEX + 1) %
+          (this.IDEAS.length + this.OTHER_PROMPTS) ||
+      (this.currentIdeaIndex == this.CONTACT_PROMPT_INDEX &&
+        this.shownContactDbIndices.length < this.numContacts)
+    ) {
+      this.currentIdeaIndex = this.CONTACT_PROMPT_INDEX;
+      this.findNextUnshownContact();
+    } else {
+      // we're not at the contact prompt (or we ran out), so increment the idea index
+      this.currentIdeaIndex--;
+      if (this.currentIdeaIndex < 0) {
+        this.currentIdeaIndex = this.IDEAS.length - 1 + this.OTHER_PROMPTS;
+      }
+      // ... and clear out any other prompt info
+      this.currentContact = undefined;
+      this.shownContactDbIndices = [];
+    }
+  }
+
+  nextIdeaPastContacts() {
+    this.currentIdeaIndex = 0;
+    this.currentContact = undefined;
+    this.shownContactDbIndices = [];
+  }
+
+  async findNextUnshownContact() {
+    // get a random contact
+    if (this.shownContactDbIndices.length === this.numContacts) {
+      // no more contacts to show
+      this.currentContact = undefined;
+    } else {
+      // get a random contact that hasn't been shown yet
+      let someContactDbIndex = Math.floor(Math.random() * this.numContacts);
+      // and guarantee that one is found by walking past shown contacts
+      let shownContactIndex =
+        this.shownContactDbIndices.indexOf(someContactDbIndex);
+      while (shownContactIndex !== -1) {
+        // increment both indices until we find a spot where "shown" skips a spot
+        shownContactIndex = (shownContactIndex + 1) % this.numContacts;
+        someContactDbIndex = (someContactDbIndex + 1) % this.numContacts;
+        if (
+          this.shownContactDbIndices[shownContactIndex] !== someContactDbIndex
+        ) {
+          // we found a contact that hasn't been shown yet
+          break;
+        }
+        // continue
+        // ... and there must be at least one because shownContactDbIndices length < numContacts
+      }
+      this.shownContactDbIndices.push(someContactDbIndex);
+      this.shownContactDbIndices.sort();
+
+      // get the contact at that offset
+      await db.open();
+      this.currentContact = await db.contacts
+        .offset(someContactDbIndex)
+        .first();
+    }
+  }
+
+  cancel() {
+    this.currentContact = undefined;
+    this.currentIdeaIndex = 0;
+    this.numContacts = 0;
+    this.shownContactDbIndices = [];
+
+    this.close();
+  }
+}
+</script>
+
+<style>
+.dialog-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 1.5rem;
+}
+
+.dialog {
+  background-color: white;
+  padding: 1rem;
+  border-radius: 0.5rem;
+  width: 100%;
+  max-width: 500px;
+}
+</style>

src/components/OfferDialog.vue

@@ -23,7 +23,7 @@
           <fa icon="chevron-left" />
         </div>
         <input
-          type="text"
+          type="number"
           class="w-full border border-r-0 border-slate-400 px-2 py-2 text-center"
           v-model="amountInput"
         />

src/constants/app.ts

@@ -11,6 +11,8 @@ export enum AppString {
   PROD_PUSH_SERVER = "https://timesafari.app",
   TEST1_PUSH_SERVER = "https://test.timesafari.app",
   TEST2_PUSH_SERVER = "https://timesafari-pwa.anomalistlabs.com",
+
+  NO_CONTACT_NAME = "(no name)",
 }
 
 export const DEFAULT_ENDORSER_API_SERVER = AppString.TEST_ENDORSER_API_SERVER;

src/db/tables/settings.ts

@@ -31,12 +31,15 @@ export type Settings = {
   }>;
 
   showContactGivesInline?: boolean; // Display contact inline or not
+  starredProjects?: Array<string>; // Array of starred project IDs
   vapid?: string; // VAPID (Voluntary Application Server Identification) field for web push
   warnIfProdServer?: boolean; // Warn if using a production server
   warnIfTestServer?: boolean; // Warn if using a testing server
   webPushServer?: string; // Web Push server URL
 };
 
+export const DEFAULT_SETTINGS: Settings = { id: 1 };
+
 /**
  * Schema for the Settings table in the database.
  */

src/libs/endorserServer.ts

@@ -80,9 +80,13 @@ export interface GiveServerRecord {
 export interface OfferServerRecord {
   amount: number;
   amountGiven: number;
+  amountGivenConfirmed: number;
   fullClaim: OfferVerifiableCredential;
   fulfillsPlanHandleId: string;
   handleId: string;
+  jwtId: string;
+  nonAmountGivenConfirmed: number;
+  objectDescription: string;
   offeredByDid: string;
   recipientDid: string;
   requirementsMet: boolean;
@@ -99,6 +103,7 @@ export interface PlanServerRecord {
   handleId: string;
   locLat?: number;
   locLon?: number;
+  name: string;
   startTime?: string;
   url?: string;
 }
@@ -140,11 +145,63 @@ export interface PlanVerifiableCredential {
   agent?: { identifier: string };
   description?: string;
   identifier?: string;
+  lastClaimId?: string;
   location?: {
     geo: { "@type": "GeoCoordinates"; latitude: number; longitude: number };
   };
 }
 
+/**
+ * Represents data about a project
+ *
+ * @deprecated
+ * We should use PlanServerRecord instead.
+ **/
+export interface PlanData {
+  /**
+   * Name of the project
+   **/
+  name: string;
+  /**
+   * Description of the project
+   **/
+  description: string;
+  /**
+   * URL referencing information about the project
+   **/
+  handleId: string;
+  /**
+   * The DID of the issuer
+   */
+  issuerDid: string;
+  /**
+   * The Identier of the project -- different from jwtId, needs to be fixed
+   **/
+  rowid?: string;
+}
+
+export interface RateLimits {
+  doneClaimsThisWeek: string;
+  doneRegistrationsThisMonth: string;
+  maxClaimsPerWeek: string;
+  maxRegistrationsPerMonth: string;
+  nextMonthBeginDateTime: string;
+  nextWeekBeginDateTime: string;
+}
+
+export interface VerifiableCredential {
+  "@context": string;
+  "@type": string;
+  name: string;
+  description: string;
+  identifier?: string;
+}
+
+export interface WorldProperties {
+  startTime?: string;
+  endTime?: string;
+}
+
 export interface RegisterVerifiableCredential {
   "@context": string;
   "@type": string;
@@ -153,15 +210,43 @@ export interface RegisterVerifiableCredential {
   participant: { identifier: string };
 }
 
+// now for some of the error & other wrapper types
+
+export interface ResultWithType {
+  type: string;
+}
+
+export interface SuccessResult extends ResultWithType {
+  type: "success";
+  response: AxiosResponse<ClaimResult>;
+}
+
+export interface ErrorResponse {
+  error?: {
+    message?: string;
+  };
+}
+
+export interface ErrorResult {
+  type: "error";
+  error: InternalError;
+}
+
 export interface InternalError {
   error: string; // for system logging
   userMessage?: string; // for user display
 }
 
+export type CreateAndSubmitClaimResult = SuccessResult | ErrorResult;
+
 // This is used to check for hidden info.
 // See https://github.com/trentlarson/endorser-ch/blob/0cb626f803028e7d9c67f095858a9fc8542e3dbd/server/api/services/util.js#L6
 const HIDDEN_DID = "did:none:HIDDEN";
 
+export function isDid(did: string) {
+  return did.startsWith("did:");
+}
+
 export function isHiddenDid(did: string) {
   return did === HIDDEN_DID;
 }
@@ -294,22 +379,6 @@ export function didInfo(
   }
 }
 
-export interface ResultWithType {
-  type: string;
-}
-
-export interface SuccessResult extends ResultWithType {
-  type: "success";
-  response: AxiosResponse<ClaimResult>;
-}
-
-export interface ErrorResult {
-  type: "error";
-  error: InternalError;
-}
-
-export type CreateAndSubmitClaimResult = SuccessResult | ErrorResult;
-
 /**
  * For result, see https://api.endorser.ch/api-docs/#/claims/post_api_v2_claim
  *
@@ -487,57 +556,3 @@ export function isNumeric(str: string): boolean {
 export function numberOrZero(str: string): number {
   return isNumeric(str) ? +str : 0;
 }
-
-export interface ErrorResponse {
-  error?: {
-    message?: string;
-  };
-}
-
-export interface RateLimits {
-  doneClaimsThisWeek: string;
-  doneRegistrationsThisMonth: string;
-  maxClaimsPerWeek: string;
-  maxRegistrationsPerMonth: string;
-  nextMonthBeginDateTime: string;
-  nextWeekBeginDateTime: string;
-}
-
-/**
- * Represents data about a project
- **/
-export interface ProjectData {
-  /**
-   * Name of the project
-   **/
-  name: string;
-  /**
-   * Description of the project
-   **/
-  description: string;
-  /**
-   * URL referencing information about the project
-   **/
-  handleId: string;
-  /**
-   * The DID of the issuer
-   */
-  issuerDid: string;
-  /**
-   * The Identier of the project
-   **/
-  rowid: string;
-}
-
-export interface VerifiableCredential {
-  "@context": string;
-  "@type": string;
-  name: string;
-  description: string;
-  identifier?: string;
-}
-
-export interface WorldProperties {
-  startTime?: string;
-  endTime?: string;
-}

src/libs/util.ts

@@ -36,6 +36,25 @@ export const UNIT_LONG: Record<string, string> = {
 };
 /* eslint-enable prettier/prettier */
 
+const UNIT_CODES: Record<string, Record<string, string>> = {
+  BTC: {
+    name: "Bitcoin",
+    faIcon: "bitcoin-sign",
+  },
+  HUR: {
+    name: "hours",
+    faIcon: "clock",
+  },
+  USD: {
+    name: "US Dollars",
+    faIcon: "dollar",
+  },
+};
+
+export function iconForUnitCode(unitCode: string) {
+  return UNIT_CODES[unitCode]?.faIcon || "question";
+}
+
 export const isGlobalUri = (uri: string) => {
   return uri && uri.match(new RegExp(/^[A-Za-z][A-Za-z0-9+.-]+:/));
 };

src/main.ts

@@ -36,8 +36,10 @@ import {
   faFileLines,
   faFloppyDisk,
   faFolderOpen,
+  faForward,
   faGift,
   faGlobe,
+  faHammer,
   faHand,
   faHandHoldingHeart,
   faHouseChimney,
@@ -59,6 +61,7 @@ import {
   faSquareCaretDown,
   faSquareCaretUp,
   faSquarePlus,
+  faStar,
   faTrashCan,
   faTriangleExclamation,
   faUser,
@@ -92,8 +95,10 @@ library.add(
   faFileLines,
   faFloppyDisk,
   faFolderOpen,
+  faForward,
   faGift,
   faGlobe,
+  faHammer,
   faHand,
   faHandHoldingHeart,
   faHouseChimney,
@@ -115,6 +120,7 @@ library.add(
   faSquareCaretDown,
   faSquareCaretUp,
   faSquarePlus,
+  faStar,
   faTrashCan,
   faTriangleExclamation,
   faUser,

src/registerServiceWorker.ts

@@ -3,7 +3,7 @@
 import { register } from "register-service-worker";
 
 if (process.env.NODE_ENV === "production") {
-  register("/additional-scripts.js", {
+  register("/sw_scripts-combined.js", {
     ready() {
       console.log(
         "App is being served from cache by a service worker.\n" +

src/router/index.ts

@@ -136,14 +136,6 @@ const routes: Array<RouteRecordRaw> = [
         /* webpackChunkName: "new-edit-account" */ "../views/NewEditAccountView.vue"
       ),
   },
-  {
-    path: "/new-edit-commitment",
-    name: "new-edit-commitment",
-    component: () =>
-      import(
-        /* webpackChunkName: "new-edit-commitment" */ "../views/NewEditCommitmentView.vue"
-      ),
-  },
   {
     path: "/new-edit-project",
     name: "new-edit-project",

src/views/AccountViewView.vue

@@ -688,7 +688,7 @@ export default class AccountViewView extends Vue {
     ) {
       this.publicHex = identity.keys[0].publicKeyHex;
       this.publicBase64 = Buffer.from(this.publicHex, "hex").toString("base64");
-      this.derivationPath = identity.keys[0].meta.derivationPath as string;
+      this.derivationPath = identity.keys[0].meta?.derivationPath as string;
 
       db.settings.update(MASTER_SETTINGS_KEY, {
         activeDid: identity.did,
@@ -974,7 +974,8 @@ export default class AccountViewView extends Vue {
     if (identity) {
       this.checkLimitsFor(identity);
     } else {
-      this.limitsMessage = "You have no identifier.";
+      this.limitsMessage =
+        "You have no identifier, or your data has been corrupted.";
     }
   }
 
@@ -1015,6 +1016,17 @@ export default class AccountViewView extends Vue {
       }
     } catch (error) {
       this.handleRateLimitsError(error);
+
+      try {
+        await db.open();
+        db.settings.update(MASTER_SETTINGS_KEY, {
+          isRegistered: false,
+        });
+        this.isRegistered = false;
+      } catch (err) {
+        console.error("Got an error marking user not registered:", err);
+        // already set an error notification for the user
+      }
     }
 
     this.loadingLimits = false;
@@ -1043,17 +1055,12 @@ export default class AccountViewView extends Vue {
       this.limitsMessage =
         (data?.error?.message as string) || "Bad server response.";
       console.error(
-        "Got bad response retrieving limits, which usually means user isn't registered. Server says:",
-        this.limitsMessage,
+        "Got bad response retrieving limits, which usually means user isn't registered:",
+        error,
       );
-    } else if (
-      error instanceof Error &&
-      error.message ===
-        "Attempted to load Give records with no identifier available."
-    ) {
-      this.limitsMessage = "You have no identifier.";
     } else {
-      // Handle other unknown errors
+      this.limitsMessage = "Got an error retrieving limits.";
+      console.error("Got some error retrieving limits:", error);
     }
   }
 

src/views/ClaimView.vue

@@ -564,8 +564,10 @@ export default class ClaimView extends Vue {
   }
 
   async loadClaim(claimId: string, identity: IIdentifier) {
-    const url =
-      this.apiServer + "/api/claim/byHandle/" + encodeURIComponent(claimId);
+    const urlPath = libsUtil.isGlobalUri(claimId)
+      ? "/api/claim/byHandle/"
+      : "/api/claim/";
+    const url = this.apiServer + urlPath + encodeURIComponent(claimId);
     const headers = await this.getHeaders(identity);
 
     try {

src/views/ContactsView.vue

@@ -13,7 +13,7 @@
           @click="showHintsForOnboarding()"
           class="text-xs uppercase bg-blue-500 text-white px-1.5 py-1 rounded-md ml-1"
         >
-          Onboarding Hints
+          Onboarding Guide
         </a>
       </span>
     </div>
@@ -44,14 +44,14 @@
       <div class="w-full text-right">
         Hours to Add:
         <input
-          class="border border rounded border-slate-400 w-24 text-right"
+          class="border rounded border-slate-400 w-24 text-right"
           type="text"
           placeholder="1"
           v-model="hourInput"
         />
         <br />
         <input
-          class="border border rounded border-slate-400 w-48"
+          class="border rounded border-slate-400 w-48"
           type="text"
           placeholder="Description"
           v-model="hourDescriptionInput"
@@ -75,7 +75,7 @@
         <br />
         (Only most recent hours included. To see more, click
         <span
-          class="text-sm uppercase bg-slate-500 text-white px-2 py-1.5 rounded-md"
+          class="text-sm uppercase bg-slate-500 text-white px-1 py-1 rounded-md"
         >
           <fa icon="file-lines" class="fa-fw" />
         </span>
@@ -98,7 +98,7 @@
               class="inline-block align-text-bottom border border-slate-300 rounded"
               @click="showLargeIdenticon = contact.did"
             ></EntityIcon>
-            {{ contact.name || "(no name)" }}
+            {{ contact.name || AppString.NO_CONTACT_NAME }}
             <button
               class="text-sm uppercase bg-slate-500 text-white px-1 rounded-md"
               @click="
@@ -289,7 +289,7 @@ import * as R from "ramda";
 import { IIdentifier } from "@veramo/core";
 import { Component, Vue } from "vue-facing-decorator";
 
-import { NotificationIface } from "@/constants/app";
+import { AppString, NotificationIface } from "@/constants/app";
 import { accountsDB, db } from "@/db/index";
 import { Contact } from "@/db/tables/contacts";
 import { MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings";
@@ -303,6 +303,7 @@ import {
   CONTACT_URL_PREFIX,
   GiveServerRecord,
   GiveVerifiableCredential,
+  isDid,
   RegisterVerifiableCredential,
   SERVICE_ID,
 } from "@/libs/endorserServer";
@@ -349,6 +350,7 @@ export default class ContactsView extends Vue {
   showGiveConfirmed = true;
   showLargeIdenticon = "";
 
+  AppString = AppString;
   libsUtil = libsUtil;
 
   async created() {
@@ -696,6 +698,18 @@ export default class ContactsView extends Vue {
       );
       return;
     }
+    if (!isDid(newContact.did)) {
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Invalid DID",
+          text: "The DID is not valid. It must begin with 'did:'",
+        },
+        -1,
+      );
+      return;
+    }
     newContact.seesMe = true; // since we will immediately set that on the server
     return db.contacts
       .add(newContact)
@@ -780,7 +794,7 @@ export default class ContactsView extends Vue {
   async register(contact: Contact) {
     if (
       confirm(
-        "Are you sure you want to use one of your registrations for " +
+        "Are you sure you want to register " +
           this.nameForDid(this.contacts, contact.did) +
           (contact.registered
             ? " -- especially since they are already marked as registered"
@@ -856,7 +870,7 @@ export default class ContactsView extends Vue {
             this.$notify(
               {
                 group: "alert",
-                type: "info",
+                type: "success",
                 title: "Registration Success",
                 text:
                   (contact.name || "That unnamed person") +

src/views/DiscoverView.vue

@@ -1,5 +1,5 @@
 <template>
-  <QuickNav selected="Discover"></QuickNav>
+  <QuickNav selected="Discover" />
   <TopMessage />
 
   <!-- CONTENT -->
@@ -28,6 +28,20 @@
     <!-- Result Tabs -->
     <div class="text-center text-slate-500 border-b border-slate-300">
       <ul class="flex flex-wrap justify-center gap-4 -mb-px">
+        <li>
+          <a
+            href="#"
+            @click="
+              projects = [];
+              isRemoteActive = false;
+              isLocalActive = false;
+              isStarActive = true;
+            "
+            v-bind:class="computedStarTabClassNames()"
+          >
+            <fa icon="star" class="fa-fw" />
+          </a>
+        </li>
         <li>
           <a
             href="#"
@@ -35,6 +49,7 @@
               projects = [];
               isLocalActive = true;
               isRemoteActive = false;
+              isStarActive = false;
               searchLocal();
             "
             v-bind:class="computedLocalTabClassNames()"
@@ -51,13 +66,14 @@
         <li>
           <a
             href="#"
-            v-bind:class="computedRemoteTabClassNames()"
             @click="
               projects = [];
               isRemoteActive = true;
               isLocalActive = false;
+              isStarActive = false;
               searchAll();
             "
+            v-bind:class="computedRemoteTabClassNames()"
           >
             Anywhere
             <span
@@ -71,8 +87,11 @@
       </ul>
     </div>
 
+    <div v-if="isStarActive && projects.length == 0">
+      <div class="mt-4 text-center">You have not starred any projects.</div>
+    </div>
     <div v-if="isLocalActive">
-      <div>
+      <div class="mt-2 text-center">
         <button
           class="ml-2 px-4 py-2 rounded-md bg-blue-200 text-blue-500"
           @click="$router.push({ name: 'search-area' })"
@@ -131,9 +150,14 @@ import { Component, Vue } from "vue-facing-decorator";
 
 import { accountsDB, db } from "@/db/index";
 import { Contact } from "@/db/tables/contacts";
-import { BoundingBox, MASTER_SETTINGS_KEY } from "@/db/tables/settings";
+import {
+  BoundingBox,
+  DEFAULT_SETTINGS,
+  MASTER_SETTINGS_KEY,
+  Settings,
+} from "@/db/tables/settings";
 import { accessToken } from "@/libs/crypto";
-import { didInfo, ProjectData } from "@/libs/endorserServer";
+import { didInfo, PlanData, PlanServerRecord } from "@/libs/endorserServer";
 import QuickNav from "@/components/QuickNav.vue";
 import InfiniteScroll from "@/components/InfiniteScroll.vue";
 import EntityIcon from "@/components/EntityIcon.vue";
@@ -164,23 +188,27 @@ export default class DiscoverView extends Vue {
   allMyDids: Array<string> = [];
   apiServer = "";
   searchTerms = "";
-  projects: ProjectData[] = [];
+  projects: PlanData[] = [];
   isLoading = false;
   isLocalActive = true;
   isRemoteActive = false;
+  isStarActive = false;
   localCount = -1;
   remoteCount = -1;
   searchBox: { name: string; bbox: BoundingBox } | null = null;
+  starredProjects: Array<string> = [];
 
   // make this function available to the Vue template
   didInfo = didInfo;
 
   async mounted() {
     await db.open();
-    const settings = await db.settings.get(MASTER_SETTINGS_KEY);
-    this.activeDid = settings?.activeDid || "";
-    this.apiServer = settings?.apiServer || "";
+    const settings: Settings =
+      (await db.settings.get(MASTER_SETTINGS_KEY)) || DEFAULT_SETTINGS;
+    this.activeDid = (settings?.activeDid as string) || "";
+    this.apiServer = (settings?.apiServer as string) || "";
     this.searchBox = settings?.searchBoxes?.[0] || null;
+    this.starredProjects = settings?.starredProjects || [];
 
     this.allContacts = await db.contacts.toArray();
 
@@ -188,7 +216,9 @@ export default class DiscoverView extends Vue {
     const allAccounts = await accountsDB.accounts.toArray();
     this.allMyDids = allAccounts.map((acc) => acc.did);
 
-    if (this.searchBox) {
+    if (this.starredProjects.length > 0) {
+      await this.searchStars();
+    } else if (this.searchBox) {
       await this.searchLocal();
     } else {
       this.isLocalActive = false;
@@ -203,7 +233,9 @@ export default class DiscoverView extends Vue {
   }
 
   public async searchSelected() {
-    if (this.isLocalActive) {
+    if (this.isStarActive) {
+      await this.searchStars();
+    } else if (this.isLocalActive) {
       await this.searchLocal();
     } else {
       await this.searchAll();
@@ -276,7 +308,7 @@ export default class DiscoverView extends Vue {
 
       const results = await response.json();
 
-      const plans: ProjectData[] = results.data;
+      const plans: PlanData[] = results.data;
       if (plans) {
         for (const plan of plans) {
           const { name, description, handleId, issuerDid, rowid } = plan;
@@ -360,7 +392,7 @@ export default class DiscoverView extends Vue {
 
       if (results.data) {
         if (beforeId) {
-          const plans: ProjectData[] = results.data;
+          const plans: PlanData[] = results.data;
           for (const plan of plans) {
             const { name, description, handleId, issuerDid, rowid } = plan;
             this.projects.push({
@@ -395,6 +427,71 @@ export default class DiscoverView extends Vue {
     }
   }
 
+  public async searchStars() {
+    this.resetCounts();
+
+    if (this.starredProjects.length == 0) {
+      this.projects = [];
+      return;
+    }
+
+    try {
+      this.isLoading = true;
+      const response = await fetch(
+        this.apiServer +
+          "/api/v2/report/plans?handleIds=" +
+          encodeURIComponent(JSON.stringify(this.starredProjects)),
+        {
+          method: "GET",
+          headers: await this.buildHeaders(),
+        },
+      );
+
+      if (response.status !== 200) {
+        const details = await response.text();
+        console.log("Problem with full search:", details);
+        this.$notify(
+          {
+            group: "alert",
+            type: "danger",
+            title: "Error",
+            text: `There was a problem accessing the server. Try again later.`,
+          },
+          -1,
+        );
+
+        throw details;
+      }
+
+      const results = await response.json();
+
+      const plans: PlanServerRecord[] = results.data;
+      if (plans) {
+        for (const plan of plans) {
+          const { name, description, handleId, issuerDid } = plan;
+          this.projects.push({ name, description, handleId, issuerDid });
+        }
+        this.remoteCount = this.projects.length;
+      } else {
+        throw JSON.stringify(results);
+      }
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } catch (e: any) {
+      console.log("Error with feed load:", e);
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text: e.userMessage || "There was a problem retrieving projects.",
+        },
+        -1,
+      );
+    } finally {
+      this.isLoading = false;
+    }
+  }
+
   /**
    * Data loader used by infinite scroller
    * @param payload is the flag from the InfiniteScroll indicating if it should load
@@ -422,19 +519,39 @@ export default class DiscoverView extends Vue {
     this.$router.push(route);
   }
 
+  public computedStarTabClassNames() {
+    return {
+      "inline-block": true,
+      "py-3": true,
+      "rounded-t-lg": true,
+      "border-b-2": true,
+
+      active: this.isStarActive,
+      "text-black": this.isStarActive,
+      "border-black": this.isStarActive,
+      "font-semibold": this.isStarActive,
+
+      "text-blue-600": !this.isStarActive,
+      "border-transparent": !this.isStarActive,
+      "hover:border-slate-400": !this.isStarActive,
+    };
+  }
+
   public computedLocalTabClassNames() {
     return {
       "inline-block": true,
       "py-3": true,
       "rounded-t-lg": true,
       "border-b-2": true,
+
       active: this.isLocalActive,
-      "text-blue-600": this.isLocalActive,
-      "border-blue-600": this.isLocalActive,
+      "text-black": this.isLocalActive,
+      "border-black": this.isLocalActive,
       "font-semibold": this.isLocalActive,
+
+      "text-blue-600": !this.isLocalActive,
       "border-transparent": !this.isLocalActive,
-      "hover:text-slate-600": !this.isLocalActive,
-      "hover:border-slate-300": !this.isLocalActive,
+      "hover:border-slate-400": !this.isLocalActive,
     };
   }
 
@@ -444,13 +561,15 @@ export default class DiscoverView extends Vue {
       "py-3": true,
       "rounded-t-lg": true,
       "border-b-2": true,
+
       active: this.isRemoteActive,
-      "text-blue-600": this.isRemoteActive,
-      "border-blue-600": this.isRemoteActive,
+      "text-black": this.isRemoteActive,
+      "border-black": this.isRemoteActive,
       "font-semibold": this.isRemoteActive,
+
+      "text-blue-600": !this.isRemoteActive,
       "border-transparent": !this.isRemoteActive,
-      "hover:text-slate-600": !this.isRemoteActive,
-      "hover:border-slate-300": !this.isRemoteActive,
+      "hover:border-slate-400": !this.isRemoteActive,
     };
   }
 }

src/views/HomeView.vue

@@ -90,10 +90,11 @@
         giving.
         <router-link
           :to="{ name: 'contact-qr' }"
-          class="block text-center text-md font-bold uppercase bg-blue-500 text-white mt-2 mb-4 px-2 py-3 rounded-md"
+          class="block text-center text-md font-bold uppercase bg-blue-500 text-white mt-2 px-2 py-3 rounded-md"
         >
           Show Them Your Identifier Info</router-link
         >
+        <br />
         To double-check that you're registered,
         <br />
         <router-link :to="{ name: 'account' }" class="text-blue-500">
@@ -104,7 +105,15 @@
 
       <div v-else>
         <!-- activeDid && isRegistered -->
-        <h2 class="text-xl font-bold mb-4">Record Something Given</h2>
+        <div class="flex justify-between mb-4">
+          <h2 class="text-xl font-bold">Record Something Given</h2>
+          <button
+            @click="openGiftedPrompts()"
+            class="block text-center text-md font-bold bg-blue-500 text-white px-2 py-3 rounded-md"
+          >
+            Ideas...
+          </button>
+        </div>
 
         <ul class="grid grid-cols-4 gap-x-3 gap-y-5 text-center mb-5">
           <li @click="openDialog()">
@@ -160,6 +169,7 @@
       message="Received from"
       showGivenToUser="true"
     />
+    <GiftedPrompts ref="giftedPrompts" />
 
     <!-- Results List -->
     <div class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4">
@@ -201,10 +211,7 @@
                   "
                   class="justify-end"
                 >
-                  <fa
-                    icon="hand-holding-heart"
-                    class="ml-4 pl-2 text-blue-500"
-                  ></fa>
+                  <fa icon="hammer" class="ml-4 pl-2 text-blue-500"></fa>
                 </router-link>
               </span>
             </div>
@@ -226,6 +233,7 @@ import { Component, Vue } from "vue-facing-decorator";
 
 import EntityIcon from "@/components/EntityIcon.vue";
 import GiftedDialog from "@/components/GiftedDialog.vue";
+import GiftedPrompts from "@/components/GiftedPrompts.vue";
 import InfiniteScroll from "@/components/InfiniteScroll.vue";
 import QuickNav from "@/components/QuickNav.vue";
 import TopMessage from "@/components/TopMessage.vue";
@@ -252,6 +260,7 @@ interface Notification {
 @Component({
   components: {
     GiftedDialog,
+    GiftedPrompts,
     QuickNav,
     EntityIcon,
     InfiniteScroll,
@@ -500,5 +509,9 @@ export default class HomeView extends Vue {
   openDialog(giver: GiverInputInfo) {
     (this.$refs.customDialog as GiftedDialog).open(giver);
   }
+
+  openGiftedPrompts() {
+    (this.$refs.giftedPrompts as GiftedPrompts).open();
+  }
 }
 </script>

src/views/IdentitySwitcherView.vue

@@ -18,13 +18,23 @@
     <!-- Identity List -->
 
     <!-- Current Identity - Display First! -->
-    <div class="block bg-slate-100 rounded-md flex items-center px-4 py-3 mb-4">
-      <fa icon="circle-check" class="fa-fw text-blue-600 text-xl mr-3"></fa>
-      <span class="overflow-hidden">
-        <div class="text-sm text-slate-500 truncate">
+    <div
+      v-if="activeDid && !activeDidInIdentities"
+      class="block bg-slate-100 rounded-md flex items-center px-4 py-3 mb-4"
+    >
+      <fa icon="circle-check" class="fa-fw text-red-600 text-xl mr-3"></fa>
+      <div class="text-sm text-slate-500">
+        <div class="overflow-hidden truncate">
           <b>ID:</b> <code>{{ activeDid }}</code>
         </div>
-      </span>
+        <b
+          >There is a data corruption error: this identity is selected but it is
+          not in storage. You cannot send any more claims with this identity
+          until you import the seed again. This may require reinstalling the
+          app; if you know how, you can also clear out the TimeSafariAccounts
+          IndexedDB. Be sure to back up all your Settings & Contacts first.</b
+        >
+      </div>
     </div>
 
     <!-- Other Identity/ies -->
@@ -35,7 +45,12 @@
         :key="ident.did"
         @click="switchAccount(ident.did)"
       >
-        <fa icon="circle" class="fa-fw text-slate-400 text-xl mr-3"></fa>
+        <fa
+          v-if="ident.did === activeDid"
+          icon="circle-check"
+          class="fa-fw text-blue-600 text-xl mr-3"
+        />
+        <fa v-else icon="circle" class="fa-fw text-slate-400 text-xl mr-3" />
         <span class="overflow-hidden">
           <h2 class="text-xl font-semibold mb-0"></h2>
           <div class="text-sm text-slate-500 truncate">
@@ -85,21 +100,12 @@ export default class IdentitySwitcherView extends Vue {
   Constants = AppString;
   public accounts: typeof AccountsSchema;
   public activeDid = "";
+  public activeDidInIdentities = false;
   public apiServer = "";
   public apiServerInput = "";
   public otherIdentities: Array<{ did: string }> = [];
   public showContactGives = false;
 
-  public async getIdentity(activeDid: string) {
-    await accountsDB.open();
-    const account = await accountsDB.accounts
-      .where("did")
-      .equals(activeDid)
-      .first();
-    const identity = JSON.parse((account?.identity as string) || "null");
-    return identity;
-  }
-
   async created() {
     try {
       await db.open();
@@ -109,19 +115,13 @@ export default class IdentitySwitcherView extends Vue {
       this.apiServerInput = settings?.apiServer || "";
       this.showContactGives = !!settings?.showContactGivesInline;
 
-      const identity = await this.getIdentity(this.activeDid);
-
-      if (identity) {
-        db.settings.update(MASTER_SETTINGS_KEY, {
-          activeDid: identity.did,
-        });
-      }
       await accountsDB.open();
       const accounts = await accountsDB.accounts.toArray();
       for (let n = 0; n < accounts.length; n++) {
         const did = JSON.parse(accounts[n].identity)["did"];
-        if (did && this.activeDid !== did) {
-          this.otherIdentities.push({ did: did });
+        this.otherIdentities.push({ did: did });
+        if (did && this.activeDid === did) {
+          this.activeDidInIdentities = true;
         }
       }
     } catch (err) {
@@ -147,16 +147,6 @@ export default class IdentitySwitcherView extends Vue {
     await db.settings.update(MASTER_SETTINGS_KEY, {
       activeDid: did,
     });
-    this.activeDid = did || "";
-    this.otherIdentities = [];
-    await accountsDB.open();
-    const accounts = await accountsDB.accounts.toArray();
-    for (let n = 0; n < accounts.length; n++) {
-      const did = JSON.parse(accounts[n].identity)["did"];
-      if (did && this.activeDid !== did) {
-        this.otherIdentities.push({ did: did });
-      }
-    }
     this.$router.push({ name: "account" });
   }
 }

src/views/NewEditCommitmentView.vue

@@ -1,67 +0,0 @@
-<template>
-  <!-- CONTENT -->
-  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
-    <div id="ViewBreadcrumb" class="mb-8">
-      <h1 class="text-lg text-center font-light relative px-7">
-        <!-- Cancel -->
-        <router-link
-          :to="{ name: 'project' }"
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          ><fa icon="chevron-left" class="fa-fw"></fa>
-        </router-link>
-
-        Make Commitment
-      </h1>
-    </div>
-
-    <!-- Project Details -->
-
-    <select class="block w-full rounded border border-slate-400 mb-4 px-3 py-2">
-      <option disabled>Choose a commitment type…</option>
-      <option selected>Time</option>
-      <option>Cryptocurrency</option>
-      <option>Money</option>
-    </select>
-
-    <!-- Time amount -->
-    <div class="mb-4 flex items-stretch">
-      <input
-        type="number"
-        placeholder="0.0"
-        class="block w-full rounded-l border border-slate-400 px-3 py-2"
-      />
-      <span
-        class="px-4 py-2 rounded-r bg-slate-200 border border-l-0 border-slate-400"
-        >hours</span
-      >
-    </div>
-
-    <!-- Crypto amount -->
-
-    <!-- Money amount -->
-
-    <div class="mt-8">
-      <input
-        type="submit"
-        class="block w-full text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-2"
-        value="Commit"
-      />
-      <button
-        type="button"
-        class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md"
-      >
-        Maybe Later
-      </button>
-    </div>
-  </section>
-</template>
-
-<script lang="ts">
-import { Component, Vue } from "vue-facing-decorator";
-
-@Component({
-  components: {},
-})
-export default class NewEditCommitmentView extends Vue {}
-</script>

src/views/NewEditProjectView.vue

@@ -60,6 +60,7 @@
     <input
       v-model="fullClaim.url"
       placeholder="Website"
+      autocapitalize="none"
       class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
     />
 
@@ -170,6 +171,7 @@ export default class NewEditProjectView extends Vue {
   includeLocation = false;
   isHiddenSave = false;
   isHiddenSpinner = true;
+  lastClaimJwtId = "";
   latitude = 0;
   longitude = 0;
   numAccounts = 0;
@@ -188,7 +190,7 @@ export default class NewEditProjectView extends Vue {
       .where("did")
       .equals(activeDid)
       .first();
-    const identity = JSON.parse(account?.identity || "null");
+    const identity = JSON.parse((account?.identity as string) || "null");
 
     if (!identity) {
       throw new Error(
@@ -210,8 +212,8 @@ export default class NewEditProjectView extends Vue {
   async created() {
     await db.open();
     const settings = await db.settings.get(MASTER_SETTINGS_KEY);
-    this.activeDid = settings?.activeDid || "";
-    this.apiServer = settings?.apiServer || "";
+    this.activeDid = (settings?.activeDid as string) || "";
+    this.apiServer = (settings?.apiServer as string) || "";
 
     if (this.projectId) {
       if (this.numAccounts === 0) {
@@ -223,12 +225,12 @@ export default class NewEditProjectView extends Vue {
             "An ID is chosen but there are no keys for it so it cannot be used to talk with the service. Switch your ID.",
           );
         }
-        this.LoadProject(identity);
+        this.loadProject(identity);
       }
     }
   }
 
-  async LoadProject(identity: IIdentifier) {
+  async loadProject(identity: IIdentifier) {
     const url =
       this.apiServer +
       "/api/claim/byHandle/" +
@@ -244,6 +246,7 @@ export default class NewEditProjectView extends Vue {
       if (resp.status === 200) {
         this.projectIssuerDid = resp.data.issuer;
         this.fullClaim = resp.data.claim;
+        this.lastClaimJwtId = resp.data.id;
         if (this.fullClaim?.location) {
           this.includeLocation = true;
           this.latitude = this.fullClaim.location.geo.latitude;
@@ -258,11 +261,11 @@ export default class NewEditProjectView extends Vue {
     }
   }
 
-  private async SaveProject(identity: IIdentifier) {
+  private async saveProject(identity: IIdentifier) {
     // Make a claim
     const vcClaim: PlanVerifiableCredential = this.fullClaim;
     if (this.projectId) {
-      vcClaim.identifier = this.projectId;
+      vcClaim.lastClaimId = this.lastClaimJwtId;
     }
     if (this.agentDid) {
       vcClaim.agent = {
@@ -341,7 +344,9 @@ export default class NewEditProjectView extends Vue {
         if (serverError) {
           console.error("Got error from server", serverError);
           if (Object.prototype.hasOwnProperty.call(serverError, "message")) {
-            userMessage = serverError.response?.data?.error?.message || ""; // This is info for the user.
+            userMessage =
+              (serverError.response?.data?.error?.message as string) ||
+              userMessage;
             this.$notify(
               {
                 group: "alert",
@@ -391,7 +396,7 @@ export default class NewEditProjectView extends Vue {
       console.error("Error: there is no account.");
     } else {
       const identity = await this.getIdentity(this.activeDid);
-      this.SaveProject(identity);
+      this.saveProject(identity);
     }
   }
 

src/views/ProjectViewView.vue

@@ -216,7 +216,7 @@
               </span>
               <span v-if="offer.amount" class="whitespace-nowrap">
                 <fa
-                  :icon="iconForUnitCode(offer.unit)"
+                  :icon="libsUtil.iconForUnitCode(offer.unit)"
                   class="fa-fw text-slate-400"
                 />{{ offer.amount }}
               </span>
@@ -274,7 +274,7 @@
               </span>
               <span v-if="give.amount" class="whitespace-nowrap">
                 <fa
-                  :icon="iconForUnitCode(give.unit)"
+                  :icon="libsUtil.iconForUnitCode(give.unit)"
                   class="fa-fw text-slate-400"
                 />{{ give.amount }}
               </span>
@@ -755,25 +755,6 @@ export default class ProjectViewView extends Vue {
     (this.$refs.customGiveDialog as GiftedDialog).open(giver, offer.handleId);
   }
 
-  UNIT_CODES: Record<string, Record<string, string>> = {
-    BTC: {
-      name: "Bitcoin",
-      faIcon: "bitcoin-sign",
-    },
-    HUR: {
-      name: "hours",
-      faIcon: "clock",
-    },
-    USD: {
-      name: "US Dollars",
-      faIcon: "dollar",
-    },
-  };
-
-  iconForUnitCode(unitCode: string) {
-    return this.UNIT_CODES[unitCode]?.faIcon || "question";
-  }
-
   // return an HTTPS URL if it's not a global URL
   addScheme(url: string) {
     if (!libsUtil.isGlobalUri(url)) {

src/views/ProjectsView.vue

@@ -8,8 +8,44 @@
       Your Ideas
     </h1>
 
-    <!-- Quick Search -->
+    <!-- Result Tabs -->
+    <div class="text-center text-slate-500 border-b border-slate-300">
+      <ul class="flex flex-wrap justify-center gap-4 -mb-px">
+        <li>
+          <a
+            href="#"
+            @click="
+              offers = [];
+              projects = [];
+              showOffers = true;
+              showProjects = false;
+              loadOffers();
+            "
+            v-bind:class="computedOfferTabClassNames()"
+          >
+            Offers
+          </a>
+        </li>
+        <li>
+          <a
+            href="#"
+            @click="
+              offers = [];
+              projects = [];
+              showOffers = false;
+              showProjects = true;
+              loadProjects();
+            "
+            v-bind:class="computedProjectTabClassNames()"
+          >
+            Projects
+          </a>
+        </li>
+      </ul>
+    </div>
 
+    <!-- Quick Search -->
+    <!--
     <div id="QuickSearch" class="mb-4 flex">
       <input
         type="text"
@@ -22,9 +58,11 @@
         <fa icon="magnifying-glass" class="fa-fw"></fa>
       </button>
     </div>
+    -->
 
     <!-- New Project -->
     <button
+      v-if="showProjects"
       class="fixed right-6 bottom-24 text-center text-4xl leading-none bg-blue-600 text-white w-14 py-2.5 rounded-full"
       @click="onClickNewProject()"
     >
@@ -39,8 +77,108 @@
       <fa icon="spinner" class="fa-spin-pulse"></fa>
     </div>
 
-    <!-- Results List -->
-    <InfiniteScroll @reached-bottom="loadMoreData">
+    <!-- Offer Results List -->
+    <InfiniteScroll v-if="showOffers" @reached-bottom="loadMoreOfferData">
+      <ul class="border-t border-slate-300">
+        <li
+          class="border-b border-slate-300"
+          v-for="offer in offers"
+          :key="offer.handleId"
+        >
+          <div class="block py-4 flex gap-4">
+            <div v-if="offer.fulfillsPlanHandleId" class="flex-none w-12">
+              <ProjectIcon
+                :entityId="offer.fulfillsPlanHandleId"
+                :iconSize="48"
+                class="inline-block align-middle border border-slate-300 rounded-md"
+              ></ProjectIcon>
+            </div>
+            <div v-if="offer.recipientDid" class="flex-none w-12">
+              <EntityIcon
+                :entityId="offer.recipientDid"
+                :iconSize="48"
+                class="inline-block align-middle border border-slate-300 rounded-md"
+              ></EntityIcon>
+            </div>
+
+            <div>
+              <div>
+                {{ offer.objectDescription }}
+              </div>
+
+              <span class="text-sm">
+                <span v-if="offer.amount">
+                  <fa
+                    :icon="libsUtil.iconForUnitCode(offer.unit)"
+                    class="fa-fw text-slate-400"
+                  />
+
+                  <span v-if="offer.amountGiven >= offer.amount">
+                    <fa icon="check-circle" class="fa-fw text-green-500" />
+                    All {{ offer.amount }} given
+                  </span>
+                  <span v-else>
+                    <fa
+                      icon="triangle-exclamation"
+                      class="fa-fw text-yellow-500"
+                    />
+                    {{ offer.amountGiven ? "" : "All" }}
+                    {{ offer.amount - (offer.amountGiven || 0) }} remaining
+                  </span>
+
+                  <span v-if="offer.amountGiven > 0">
+                    <span class="text-sm text-slate-400">
+                      ({{ offer.amountGiven }} given,
+                      <span
+                        v-if="offer.amountGivenConfirmed >= offer.amountGiven"
+                      >
+                        <!-- no need for green icon; unnecessary if there's already a green, confusing if there's a yellow -->
+                        all
+                      </span>
+                      <span v-else>
+                        <!-- only show icon if there's not already a warning -->
+                        <fa
+                          v-if="offer.amountGiven >= offer.amount"
+                          icon="triangle-exclamation"
+                          class="fa-fw text-yellow-300"
+                        />
+                        {{ offer.amountGivenConfirmed || 0 }}
+                      </span>
+                      of that is confirmed)
+                    </span>
+                  </span>
+                </span>
+                <span v-else>
+                  <!-- Non-amount offer -->
+                  <span v-if="offer.nonAmountGivenConfirmed">
+                    <fa icon="check-circle" class="fa-fw text-green-500" />
+                    {{ offer.nonAmountGivenConfirmed }}
+                    {{ offer.nonAmountGivenConfirmed == 1 ? "give" : "gives" }}
+                    are confirmed.
+                  </span>
+                  <span v-else>
+                    <fa
+                      icon="triangle-exclamation"
+                      class="fa-fw text-yellow-500"
+                    />
+                    <span class="text-sm">Not confirmed by anyone</span>
+                  </span>
+                </span>
+
+                <a @click="onClickLoadClaim(offer.jwtId)">
+                  <fa
+                    icon="circle-info"
+                    class="pl-2 text-blue-500 cursor-pointer"
+                  ></fa>
+                </a>
+              </span>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </InfiniteScroll>
+    <!-- Project Results List -->
+    <InfiniteScroll v-if="showProjects" @reached-bottom="loadMoreProjectData">
       <ul class="border-t border-slate-300">
         <li
           class="border-b border-slate-300"
@@ -74,15 +212,18 @@
 
 <script lang="ts">
 import { Component, Vue } from "vue-facing-decorator";
+
 import { accountsDB, db } from "@/db/index";
 import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
 import { accessToken } from "@/libs/crypto";
+import * as libsUtil from "@/libs/util";
 import { IIdentifier } from "@veramo/core";
 import InfiniteScroll from "@/components/InfiniteScroll.vue";
 import QuickNav from "@/components/QuickNav.vue";
 import ProjectIcon from "@/components/ProjectIcon.vue";
 import TopMessage from "@/components/TopMessage.vue";
-import { ProjectData } from "@/libs/endorserServer";
+import { OfferServerRecord, PlanData } from "@/libs/endorserServer";
+import EntityIcon from "@/components/EntityIcon.vue";
 
 interface Notification {
   group: string;
@@ -92,16 +233,21 @@ interface Notification {
 }
 
 @Component({
-  components: { InfiniteScroll, QuickNav, ProjectIcon, TopMessage },
+  components: { EntityIcon, InfiniteScroll, QuickNav, ProjectIcon, TopMessage },
 })
 export default class ProjectsView extends Vue {
   $notify!: (notification: Notification, timeout?: number) => void;
 
   apiServer = "";
-  projects: ProjectData[] = [];
-  current: IIdentifier;
+  projects: PlanData[] = [];
+  currentIid: IIdentifier;
   isLoading = false;
   numAccounts = 0;
+  offers: OfferServerRecord[] = [];
+  showOffers = true;
+  showProjects = false;
+
+  libsUtil = libsUtil;
 
   /**
    * 'created' hook runs when the Vue instance is first created
@@ -110,8 +256,8 @@ export default class ProjectsView extends Vue {
     try {
       await db.open();
       const settings = await db.settings.get(MASTER_SETTINGS_KEY);
-      const activeDid = settings?.activeDid || "";
-      this.apiServer = settings?.apiServer || "";
+      const activeDid: string = (settings?.activeDid as string) || "";
+      this.apiServer = (settings?.apiServer as string) || "";
 
       await accountsDB.open();
       this.numAccounts = await accountsDB.accounts.count();
@@ -127,12 +273,11 @@ export default class ProjectsView extends Vue {
           -1,
         );
       } else {
-        const identity = await this.getIdentity(activeDid);
-        this.current = identity;
-        this.loadProjects(identity);
+        this.currentIid = await this.getIdentity(activeDid);
+        await this.loadOffers();
       }
     } catch (err) {
-      console.log("Error initializing:", err);
+      console.error("Error initializing:", err);
       this.$notify(
         {
           group: "alert",
@@ -150,7 +295,7 @@ export default class ProjectsView extends Vue {
    * @param url the url used to fetch the data
    * @param token Authorization token
    **/
-  async dataLoader(url: string, token: string) {
+  async projectDataLoader(url: string, token: string) {
     const headers: { [key: string]: string } = {
       "Content-Type": "application/json",
       Authorization: `Bearer ${token}`,
@@ -160,13 +305,17 @@ export default class ProjectsView extends Vue {
       this.isLoading = true;
       const resp = await this.axios.get(url, { headers });
       if (resp.status === 200 || !resp.data.data) {
-        const plans: ProjectData[] = resp.data.data;
+        const plans: PlanData[] = resp.data.data;
         for (const plan of plans) {
           const { name, description, handleId, issuerDid, rowid } = plan;
           this.projects.push({ name, description, handleId, issuerDid, rowid });
         }
       } else {
-        console.log("Bad server response & data:", resp.status, resp.data);
+        console.error(
+          "Bad server response & data for plans:",
+          resp.status,
+          resp.data,
+        );
         this.$notify(
           {
             group: "alert",
@@ -179,7 +328,7 @@ export default class ProjectsView extends Vue {
       }
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (error: any) {
-      console.error("Got error loading projects:", error.message || error);
+      console.error("Got error loading plans:", error.message || error);
       this.$notify(
         {
           group: "alert",
@@ -198,15 +347,44 @@ export default class ProjectsView extends Vue {
    * Data loader used by infinite scroller
    * @param payload is the flag from the InfiniteScroll indicating if it should load
    **/
-  async loadMoreData(payload: boolean) {
+  async loadMoreProjectData(payload: boolean) {
     if (this.projects.length > 0 && payload) {
       const latestProject = this.projects[this.projects.length - 1];
-      const url = `${this.apiServer}/api/v2/report/plansByIssuer?beforeId=${latestProject.rowid}`;
-      const token = await accessToken(this.current);
-      await this.dataLoader(url, token);
+      await this.loadProjects(
+        this.currentIid,
+        `beforeId=${latestProject.rowid}`,
+      );
     }
   }
 
+  /**
+   * Load projects initially
+   * @param identifier of the user
+   * @param urlExtra additional url parameters in a string
+   **/
+  async loadProjects(identifier?: IIdentifier, urlExtra: string = "") {
+    const identity = identifier || this.currentIid;
+    const url = `${this.apiServer}/api/v2/report/plansByIssuer?${urlExtra}`;
+    const token: string = await accessToken(identity);
+    await this.projectDataLoader(url, token);
+  }
+
+  public async getIdentity(activeDid: string): Promise<IIdentifier> {
+    await accountsDB.open();
+    const account = await accountsDB.accounts
+      .where("did")
+      .equals(activeDid)
+      .first();
+    const identity = JSON.parse((account?.identity as string) || "null");
+
+    if (!identity) {
+      throw new Error(
+        "Attempted to load project records with no identifier available.",
+      );
+    }
+    return identity;
+  }
+
   /**
    * Handle clicking on a project entry found in the list
    * @param id of the project
@@ -219,32 +397,6 @@ export default class ProjectsView extends Vue {
     this.$router.push(route);
   }
 
-  /**
-   * Load projects initially
-   * @param identity of the user
-   **/
-  async loadProjects(identity: IIdentifier) {
-    const url = `${this.apiServer}/api/v2/report/plansByIssuer`;
-    const token: string = await accessToken(identity);
-    await this.dataLoader(url, token);
-  }
-
-  public async getIdentity(activeDid: string) {
-    await accountsDB.open();
-    const account = await accountsDB.accounts
-      .where("did")
-      .equals(activeDid)
-      .first();
-    const identity = JSON.parse(account?.identity || "null");
-
-    if (!identity) {
-      throw new Error(
-        "Attempted to load project records with no identifier available.",
-      );
-    }
-    return identity;
-  }
-
   /**
    * Handling clicking on the new project button
    **/
@@ -255,5 +407,120 @@ export default class ProjectsView extends Vue {
     };
     this.$router.push(route);
   }
+
+  onClickLoadClaim(jwtId: string) {
+    const route = {
+      path: "/claim/" + encodeURIComponent(jwtId),
+    };
+    this.$router.push(route);
+  }
+
+  /**
+   * Core offer data loader
+   * @param url the url used to fetch the data
+   * @param token Authorization token
+   **/
+  async offerDataLoader(url: string, token: string) {
+    const headers: { [key: string]: string } = {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${token}`,
+    };
+
+    try {
+      this.isLoading = true;
+      const resp = await this.axios.get(url, { headers });
+      if (resp.status === 200 || !resp.data.data) {
+        this.offers = this.offers.concat(resp.data.data);
+      } else {
+        console.error(
+          "Bad server response & data for offers:",
+          resp.status,
+          resp.data,
+        );
+        this.$notify(
+          {
+            group: "alert",
+            type: "danger",
+            title: "Error",
+            text: "Failed to get offers from the server. Try again later.",
+          },
+          -1,
+        );
+      }
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } catch (error: any) {
+      console.error("Got error loading offers:", error.message || error);
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text: "Got an error loading offers.",
+        },
+        -1,
+      );
+    } finally {
+      this.isLoading = false;
+    }
+  }
+
+  /**
+   * Data loader used by infinite scroller
+   * @param payload is the flag from the InfiniteScroll indicating if it should load
+   **/
+  async loadMoreOfferData(payload: boolean) {
+    if (this.offers.length > 0 && payload) {
+      const latestOffer = this.offers[this.offers.length - 1];
+      await this.loadOffers(this.currentIid, `&beforeId=${latestOffer.jwtId}`);
+    }
+  }
+
+  /**
+   * Load offers initially
+   * @param identifier of the user
+   * @param urlExtra additional url parameters in a string
+   **/
+  async loadOffers(identifier?: IIdentifier, urlExtra: string = "") {
+    const identity = identifier || this.currentIid;
+    const url = `${this.apiServer}/api/v2/report/offers?offeredByDid=${identity.did}${urlExtra}`;
+    const token: string = await accessToken(identity);
+    await this.offerDataLoader(url, token);
+  }
+
+  public computedOfferTabClassNames() {
+    return {
+      "inline-block": true,
+      "py-3": true,
+      "rounded-t-lg": true,
+      "border-b-2": true,
+
+      active: this.showOffers,
+      "text-black": this.showOffers,
+      "border-black": this.showOffers,
+      "font-semibold": this.showOffers,
+
+      "text-blue-600": !this.showOffers,
+      "border-transparent": !this.showOffers,
+      "hover:border-slate-400": !this.showOffers,
+    };
+  }
+
+  public computedProjectTabClassNames() {
+    return {
+      "inline-block": true,
+      "py-3": true,
+      "rounded-t-lg": true,
+      "border-b-2": true,
+
+      active: this.showProjects,
+      "text-black": this.showProjects,
+      "border-black": this.showProjects,
+      "font-semibold": this.showProjects,
+
+      "text-blue-600": !this.showProjects,
+      "border-transparent": !this.showProjects,
+      "hover:border-slate-400": !this.showProjects,
+    };
+  }
 }
 </script>

src/views/StartView.vue

@@ -38,7 +38,7 @@
         @click="onClickYes()"
         class="block w-full text-center text-lg uppercase bg-blue-600 text-white px-2 py-3 rounded-md"
       >
-        Yes
+        Yes, generate one
       </a>
       <a
         @click="onClickNo()"

sw_combine.js

@@ -0,0 +1,29 @@
+/**
+ * We've seen cases where the functions inside safari-notifications.js are not found.
+ * This is our attempt to ensure that all the functions are available.
+ */
+
+const fs = require("fs");
+const path = require("path");
+
+const swScriptsDir = path.resolve(__dirname, "sw_scripts");
+const outputFile = path.resolve(__dirname, "sw_scripts-combined.js");
+
+// Read all files in the sw_scripts directory
+fs.readdir(swScriptsDir, (err, files) => {
+  if (err) {
+    console.error("Error reading directory:", err);
+    return;
+  }
+
+  // Combine files content into one script
+  const combinedContent = files
+    .filter((file) => path.extname(file) === ".js")
+    .map((file) => fs.readFileSync(path.join(swScriptsDir, file), "utf8"))
+    .join("\n");
+
+  // Write the combined content to the output file
+  fs.writeFileSync(outputFile, combinedContent, "utf8");
+
+  console.log("Service worker files combined.");
+});

sw_scripts/additional-scripts.js

@@ -1,5 +1,6 @@
 /* eslint-env serviceworker */
 /* global workbox */
+/* eslint-disable */ /* ... because old-browser-compatible files in this directory are combined into a single script during `npm run build` */
 importScripts(
   "https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js",
 );
@@ -7,7 +8,9 @@ importScripts(
 function logConsoleAndDb(message, arg1, arg2) {
   // in chrome://serviceworker-internals note that the arg1 and arg2 here will show as "[object Object]" in that page but will show as expandable objects in the console
   console.log(`${new Date().toISOString()} ${message}`, arg1, arg2);
-  if (self.appendDailyLog) {
+  // appendDailyLog is injected at build time by the vue.config.js configureWebpack apply plugin
+  // eslint-disable-next-line no-undef
+  if (appendDailyLog) {
     let fullMessage = `${new Date().toISOString()} ${message}`;
     if (arg1) {
       fullMessage += `\n${JSON.stringify(arg1)}`;
@@ -15,25 +18,19 @@ function logConsoleAndDb(message, arg1, arg2) {
     if (arg2) {
       fullMessage += `\n${JSON.stringify(arg2)}`;
     }
-    self.appendDailyLog(fullMessage);
+    // appendDailyLog is injected from safari-notifications.js at build time by the vue.config.js configureWebpack apply plugin
+    // eslint-disable-next-line no-undef
+    appendDailyLog(fullMessage);
   } else {
-    // sometimes we get the error: "Uncaught TypeError: self.appendDailyLog is not a function"
+    // sometimes we get the error: "Uncaught TypeError: appendDailyLog is not a function"
     console.log(
-      "Not logging to DB (often because self.appendDailyLog doesn't exist).",
+      "Not logging to DB (often because appendDailyLog doesn't exist).",
     );
   }
 }
 
-self.addEventListener("install", async (event) => {
-  console.log("Service worker got install event. Importing scripts...", event);
-  await importScripts(
-    "safari-notifications.js",
-    "nacl.js",
-    "noble-curves.js",
-    "noble-hashes.js",
-  );
-  // this should now be available
-  logConsoleAndDb("Service worker imported all scripts.");
+self.addEventListener("install", async (/* event */) => {
+  logConsoleAndDb("Service worker finished installation.");
 });
 
 self.addEventListener("activate", (event) => {
@@ -84,7 +81,9 @@ self.addEventListener("push", function (event) {
           } else {
             title = payload.title || "Update";
           }
-          message = await self.getNotificationCount();
+          // getNotificationCount is injected from safari-notifications.js at build time by the vue.config.js configureWebpack apply plugin
+          // eslint-disable-next-line no-undef
+          message = await getNotificationCount();
         }
         if (message) {
           const options = {

sw_scripts/safari-notifications.js

@@ -547,7 +547,11 @@ async function getNotificationCount() {
       newClaims++;
     }
     if (newClaims > 0) {
-      result = `There are ${newClaims} new activities on Time Safari`;
+      if (newClaims === 1) {
+        result = "There is 1 new activity on Time Safari";
+      } else {
+        result = `There are ${newClaims} new activities on Time Safari`;
+      }
     }
     const most_recent_notified = claims[0]["id"];
     await setMostRecentNotified(most_recent_notified);

vue.config.js

@@ -1,5 +1,6 @@
 const { defineConfig } = require("@vue/cli-service");
 const { gitDescribeSync } = require("git-describe");
+const { exec } = require("child_process");
 
 process.env.VUE_APP_GIT_HASH = gitDescribeSync().hash;
 
@@ -10,6 +11,23 @@ module.exports = defineConfig({
     experiments: {
       topLevelAwait: true,
     },
+    plugins: [
+      {
+        // Still don't know why this runs three times.
+        apply: (compiler) => {
+          compiler.hooks.beforeCompile.tap("BeforeCompile", () => {
+            // Execute combine-sw.js script
+            exec("node sw_combine.js", (error, stdout, stderr) => {
+              if (error || stderr) {
+                console.error("Service worker files error:", error || stderr);
+              } else {
+                console.log("Finished combining service worker files.", stdout);
+              }
+            });
+          });
+        },
+      },
+    ],
   },
   pwa: {
     iconPaths: {
@@ -17,7 +35,8 @@ module.exports = defineConfig({
     },
     workboxPluginMode: "InjectManifest",
     workboxOptions: {
-      swSrc: "./sw_scripts/additional-scripts.js",
+      // this script will be checked for linting (sw_scripts/* files generate about 1000 linting errors)
+      swSrc: "./sw_scripts-combined.js",
     },
   },
 });