fix: restore proper dialog max-height

Reviewed-on: #215

.cursor/rules/development/development_guide.mdc

@@ -2,7 +2,7 @@
 globs: **/src/**/*
 alwaysApply: false
 ---
-✅ use system date command to timestamp all interactions with accurate date and
+✅ use system date command to timestamp all documentation with accurate date and
   time
 ✅ remove whitespace at the end of lines
 ✅ use npm run lint-fix to check for warnings

.husky/pre-commit

@@ -9,6 +9,10 @@ echo "🔍 Running pre-commit hooks..."
 
 # Run lint-fix first
 echo "📝 Running lint-fix..."
+
+# Capture git status before lint-fix to detect changes
+git_status_before=$(git status --porcelain)
+
 npm run lint-fix || {
     echo
     echo "❌ Linting failed. Please fix the issues and try again."
@@ -18,6 +22,36 @@ npm run lint-fix || {
     exit 1
 }
 
+# Check if lint-fix made any changes
+git_status_after=$(git status --porcelain)
+
+if [ "$git_status_before" != "$git_status_after" ]; then
+    echo
+    echo "⚠️  lint-fix made changes to your files!"
+    echo "📋 Changes detected:"
+    git diff --name-only
+    echo
+    echo "❓ What would you like to do?"
+    echo "   [c] Continue commit without the new changes"
+    echo "   [a] Abort commit (recommended - review and stage the changes)"
+    echo
+    printf "Choose [c/a]: "
+    # The `< /dev/tty` is necessary to make read work in git's non-interactive shell
+    read choice < /dev/tty
+    
+    case $choice in
+        [Cc]* )
+            echo "✅ Continuing commit without lint-fix changes..."
+            sleep 3
+            ;;
+        [Aa]* | * )
+            echo "🛑 Commit aborted. Please review the changes made by lint-fix."
+            echo "💡 You can stage the changes with 'git add .' and commit again."
+            exit 1
+            ;;
+    esac
+fi
+
 # Then run Build Architecture Guard
 
 #echo "🏗️  Running Build Architecture Guard..."

BUILDING.md

@@ -1158,10 +1158,10 @@ If you need to build manually or want to understand the individual steps:
    export GEM_PATH=$shortened_path
    ```
 
-##### 1. Bump the version in package.json, then here
+##### 1. Bump the version in package.json for `MARKETING_VERSION`, then `grep CURRENT_PROJECT_VERSION ios/App/App.xcodeproj/project.pbxproj` and add 1 for the numbered version;
 
    ```bash
-   cd ios/App && xcrun agvtool new-version 40 && perl -p -i -e "s/MARKETING_VERSION = .*;/MARKETING_VERSION = 1.0.7;/g" App.xcodeproj/project.pbxproj && cd -
+   cd ios/App && xcrun agvtool new-version 46 && perl -p -i -e "s/MARKETING_VERSION = .*;/MARKETING_VERSION = 1.1.1;/g" App.xcodeproj/project.pbxproj && cd -
    # Unfortunately this edits Info.plist directly.
    #xcrun agvtool new-marketing-version 0.4.5
    ```
@@ -1318,8 +1318,8 @@ The recommended way to build for Android is using the automated build script:
 ##### 1. Bump the version in package.json, then here: android/app/build.gradle
 
   ```bash
-  perl -p -i -e 's/versionCode .*/versionCode 40/g' android/app/build.gradle
-  perl -p -i -e 's/versionName .*/versionName "1.0.7"/g' android/app/build.gradle
+  perl -p -i -e 's/versionCode .*/versionCode 46/g' android/app/build.gradle
+  perl -p -i -e 's/versionName .*/versionName "1.1.1"/g' android/app/build.gradle
   ```
 
 ##### 2. Build

CHANGELOG.md

@@ -5,6 +5,15 @@ All notable changes to this project will be documented in this file.
 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).
 
+
+## [1.1.1] - 2025.11.03
+
+### Added
+- Meeting onboarding via prompts
+- Emojis on gift feed
+- Starred projects with notification
+
+
 ## [1.0.7] - 2025.08.18
 
 ### Fixed

android/app/build.gradle

@@ -31,8 +31,8 @@ android {
         applicationId "app.timesafari.app"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 41
-        versionName "1.0.8"
+        versionCode 46
+        versionName "1.1.1"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
         aaptOptions {
              // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.

index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, user-scalable=no, interactive-widget=overlays-content" />
     
     <!-- CORS headers removed to allow images from any domain -->
     
@@ -13,4 +13,4 @@
     <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>
-</html>
+</html>

ios/App/App.xcodeproj/project.pbxproj

@@ -403,7 +403,7 @@
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 41;
+				CURRENT_PROJECT_VERSION = 46;
 				DEVELOPMENT_TEAM = GM3FS5JQPH;
 				ENABLE_APP_SANDBOX = NO;
 				ENABLE_USER_SCRIPT_SANDBOXING = NO;
@@ -413,7 +413,7 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 1.0.8;
+				MARKETING_VERSION = 1.1.1;
 				OTHER_SWIFT_FLAGS = "$(inherited) \"-D\" \"COCOAPODS\" \"-DDEBUG\"";
 				PRODUCT_BUNDLE_IDENTIFIER = app.timesafari;
 				PRODUCT_NAME = "$(TARGET_NAME)";
@@ -430,7 +430,7 @@
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 41;
+				CURRENT_PROJECT_VERSION = 46;
 				DEVELOPMENT_TEAM = GM3FS5JQPH;
 				ENABLE_APP_SANDBOX = NO;
 				ENABLE_USER_SCRIPT_SANDBOXING = NO;
@@ -440,7 +440,7 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 1.0.8;
+				MARKETING_VERSION = 1.1.1;
 				PRODUCT_BUNDLE_IDENTIFIER = app.timesafari;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				SWIFT_ACTIVE_COMPILATION_CONDITIONS = "";

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "timesafari",
-  "version": "1.1.0-beta",
+  "version": "1.1.2-beta",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "timesafari",
-      "version": "1.1.0-beta",
+      "version": "1.1.2-beta",
       "dependencies": {
         "@capacitor-community/electron": "^5.0.1",
         "@capacitor-community/sqlite": "6.0.2",
@@ -27,6 +27,7 @@
         "@ethersproject/hdnode": "^5.7.0",
         "@ethersproject/wallet": "^5.8.0",
         "@fortawesome/fontawesome-svg-core": "^6.5.1",
+        "@fortawesome/free-regular-svg-icons": "^6.7.2",
         "@fortawesome/free-solid-svg-icons": "^6.5.1",
         "@fortawesome/vue-fontawesome": "^3.0.6",
         "@jlongster/sql.js": "^1.6.7",
@@ -90,6 +91,7 @@
         "vue": "3.5.13",
         "vue-axios": "^3.5.2",
         "vue-facing-decorator": "3.0.4",
+        "vue-markdown-render": "^2.2.1",
         "vue-picture-cropper": "^0.7.0",
         "vue-qrcode-reader": "^5.5.3",
         "vue-router": "^4.5.0",
@@ -106,6 +108,7 @@
         "@types/js-yaml": "^4.0.9",
         "@types/leaflet": "^1.9.8",
         "@types/luxon": "^3.4.2",
+        "@types/markdown-it": "^14.1.2",
         "@types/node": "^20.14.11",
         "@types/node-fetch": "^2.6.12",
         "@types/ramda": "^0.29.11",
@@ -6786,6 +6789,17 @@
         "node": ">=6"
       }
     },
+    "node_modules/@fortawesome/free-regular-svg-icons": {
+      "version": "6.7.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.7.2.tgz",
+      "integrity": "sha512-7Z/ur0gvCMW8G93dXIQOkQqHo2M5HLhYrRVC0//fakJXxcF1VmMPsxnG6Ee8qEylA8b8Q3peQXWMNZ62lYF28g==",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.7.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@fortawesome/free-solid-svg-icons": {
       "version": "6.7.2",
       "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.7.2.tgz",
@@ -10147,6 +10161,12 @@
         "@types/geojson": "*"
       }
     },
+    "node_modules/@types/linkify-it": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-5.0.0.tgz",
+      "integrity": "sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==",
+      "dev": true
+    },
     "node_modules/@types/luxon": {
       "version": "3.7.1",
       "resolved": "https://registry.npmjs.org/@types/luxon/-/luxon-3.7.1.tgz",
@@ -10154,6 +10174,22 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/markdown-it": {
+      "version": "14.1.2",
+      "resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-14.1.2.tgz",
+      "integrity": "sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==",
+      "dev": true,
+      "dependencies": {
+        "@types/linkify-it": "^5",
+        "@types/mdurl": "^2"
+      }
+    },
+    "node_modules/@types/mdurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-2.0.0.tgz",
+      "integrity": "sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==",
+      "dev": true
+    },
     "node_modules/@types/minimist": {
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/@types/minimist/-/minimist-1.2.5.tgz",
@@ -32883,6 +32919,61 @@
         "vue": "^3.0.0"
       }
     },
+    "node_modules/vue-markdown-render": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/vue-markdown-render/-/vue-markdown-render-2.2.1.tgz",
+      "integrity": "sha512-XkYnC0PMdbs6Vy6j/gZXSvCuOS0787Se5COwXlepRqiqPiunyCIeTPQAO2XnB4Yl04EOHXwLx5y6IuszMWSgyQ==",
+      "dependencies": {
+        "markdown-it": "^13.0.2"
+      },
+      "peerDependencies": {
+        "vue": "^3.3.4"
+      }
+    },
+    "node_modules/vue-markdown-render/node_modules/entities": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-3.0.1.tgz",
+      "integrity": "sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/vue-markdown-render/node_modules/linkify-it": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-4.0.1.tgz",
+      "integrity": "sha512-C7bfi1UZmoj8+PQx22XyeXCuBlokoyWQL5pWSP+EI6nzRylyThouddufc2c1NDIcP9k5agmN9fLpA7VNJfIiqw==",
+      "dependencies": {
+        "uc.micro": "^1.0.1"
+      }
+    },
+    "node_modules/vue-markdown-render/node_modules/markdown-it": {
+      "version": "13.0.2",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-13.0.2.tgz",
+      "integrity": "sha512-FtwnEuuK+2yVU7goGn/MJ0WBZMM9ZPgU9spqlFs7/A/pDIUNSOQZhUgOqYCficIuR2QaFnrt8LHqBWsbTAoI5w==",
+      "dependencies": {
+        "argparse": "^2.0.1",
+        "entities": "~3.0.1",
+        "linkify-it": "^4.0.1",
+        "mdurl": "^1.0.1",
+        "uc.micro": "^1.0.5"
+      },
+      "bin": {
+        "markdown-it": "bin/markdown-it.js"
+      }
+    },
+    "node_modules/vue-markdown-render/node_modules/mdurl": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
+      "integrity": "sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g=="
+    },
+    "node_modules/vue-markdown-render/node_modules/uc.micro": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
+      "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA=="
+    },
     "node_modules/vue-picture-cropper": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/vue-picture-cropper/-/vue-picture-cropper-0.7.0.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "timesafari",
-  "version": "1.1.1-beta",
+  "version": "1.1.2-beta",
   "description": "Time Safari Application",
   "author": {
     "name": "Time Safari Team"
@@ -136,7 +136,6 @@
     "*.{js,ts,vue,css,json,yml,yaml}": "eslint --fix || true",
     "*.{md,markdown,mdc}": "markdownlint-cli2 --fix"
   },
-
   "dependencies": {
     "@capacitor-community/electron": "^5.0.1",
     "@capacitor-community/sqlite": "6.0.2",
@@ -157,6 +156,7 @@
     "@ethersproject/hdnode": "^5.7.0",
     "@ethersproject/wallet": "^5.8.0",
     "@fortawesome/fontawesome-svg-core": "^6.5.1",
+    "@fortawesome/free-regular-svg-icons": "^6.7.2",
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/vue-fontawesome": "^3.0.6",
     "@jlongster/sql.js": "^1.6.7",
@@ -220,6 +220,7 @@
     "vue": "3.5.13",
     "vue-axios": "^3.5.2",
     "vue-facing-decorator": "3.0.4",
+    "vue-markdown-render": "^2.2.1",
     "vue-picture-cropper": "^0.7.0",
     "vue-qrcode-reader": "^5.5.3",
     "vue-router": "^4.5.0",
@@ -236,6 +237,7 @@
     "@types/js-yaml": "^4.0.9",
     "@types/leaflet": "^1.9.8",
     "@types/luxon": "^3.4.2",
+    "@types/markdown-it": "^14.1.2",
     "@types/node": "^20.14.11",
     "@types/node-fetch": "^2.6.12",
     "@types/ramda": "^0.29.11",

src/assets/styles/tailwind.css

@@ -7,6 +7,24 @@
     html {
         font-family: 'Work Sans', ui-sans-serif, system-ui, sans-serif !important;
     }
+    
+    /* Fix iOS viewport height changes when keyboard appears/disappears */
+    html, body {
+        height: 100%;
+        height: 100vh;
+        height: 100dvh; /* Dynamic viewport height for better mobile support */
+        overflow: hidden; /* Disable all scrolling on html and body */
+        position: fixed; /* Force fixed positioning to prevent viewport changes */
+        width: 100%;
+        top: 0;
+        left: 0;
+    }
+    
+    #app {
+        height: 100vh;
+        height: 100dvh;
+        overflow-y: auto;
+    }
 }
 
 @layer components {
@@ -20,6 +38,26 @@
 	}
 
 	.dialog {
-		@apply bg-white p-4 rounded-lg w-full max-w-lg;
+		@apply bg-white px-4 py-6 rounded-lg w-full max-w-lg max-h-[calc(100vh-3rem)] overflow-y-auto;
+	}
+
+	/* Markdown content styling to restore list elements */
+	.markdown-content ul {
+		@apply list-disc list-inside ml-4;
+	}
+
+	.markdown-content ol {
+		@apply list-decimal list-inside ml-4;
+	}
+
+	.markdown-content li {
+		@apply mb-1;
+	}
+
+	.markdown-content ul ul,
+	.markdown-content ol ol,
+	.markdown-content ul ol,
+	.markdown-content ol ul {
+		@apply ml-4 mt-1;
 	}
 }

src/components/ActivityListItem.vue

@@ -77,15 +77,95 @@
         </a>
       </div>
 
+      <!-- Emoji Section -->
+      <div
+        v-if="hasEmojis || isRegistered"
+        class="float-right ml-3 mb-1 bg-white rounded border border-slate-300 px-1.5 py-0.5 max-w-[240px]"
+      >
+        <div class="flex items-center justify-between gap-1">
+          <!-- Existing Emojis Display -->
+          <div v-if="hasEmojis" class="flex flex-wrap gap-1">
+            <button
+              v-for="(count, emoji) in record.emojiCount"
+              :key="emoji"
+              class="inline-flex items-center gap-0.5 px-1 py-0.5 text-xs bg-slate-50 hover:bg-slate-100 rounded border border-slate-200 transition-colors cursor-pointer"
+              :class="{
+                'bg-blue-50 border-blue-200': isUserEmojiWithoutLoading(emoji),
+                'opacity-75 cursor-wait': loadingEmojis,
+              }"
+              :title="
+                loadingEmojis
+                  ? 'Loading...'
+                  : !emojisOnActivity?.isResolved
+                    ? 'Click to load your emojis'
+                    : isUserEmojiWithoutLoading(emoji)
+                      ? 'Click to remove your emoji'
+                      : 'Click to add this emoji'
+              "
+              :disabled="!isRegistered"
+              @click="toggleThisEmoji(emoji)"
+            >
+              <!-- Show spinner when loading -->
+              <div v-if="loadingEmojis" class="animate-spin text-xs">
+                <font-awesome icon="spinner" class="fa-spin" />
+              </div>
+              <span v-else class="text-sm leading-none">{{ emoji }}</span>
+              <span class="text-xs text-slate-600 font-medium leading-none">{{
+                count
+              }}</span>
+            </button>
+          </div>
+
+          <!-- Add Emoji Button -->
+          <button
+            v-if="isRegistered"
+            class="inline-flex px-1 py-0.5 text-xs bg-slate-100 hover:bg-slate-200 rounded border border-slate-300 transition-colors items-center justify-center ml-2 ml-auto"
+            :title="showEmojiPicker ? 'Close emoji picker' : 'Add emoji'"
+            @click="toggleEmojiPicker"
+          >
+            <span class="px-2 text-sm leading-none">{{
+              showEmojiPicker ? "x" : "😊"
+            }}</span>
+          </button>
+        </div>
+
+        <!-- Emoji Picker (placeholder for now) -->
+        <div
+          v-if="showEmojiPicker"
+          class="mt-1 p-1.5 bg-slate-50 rounded border border-slate-300"
+        >
+          <!-- Temporary emoji buttons for testing -->
+          <div class="flex flex-wrap gap-3 mt-1">
+            <button
+              v-for="emoji in QUICK_EMOJIS"
+              :key="emoji"
+              class="p-0.5 hover:bg-slate-200 rounded text-base transition-opacity"
+              :class="{
+                'opacity-75 cursor-wait': loadingEmojis,
+              }"
+              :disabled="loadingEmojis"
+              @click="toggleThisEmoji(emoji)"
+            >
+              <!-- Show spinner when loading -->
+              <div v-if="loadingEmojis" class="animate-spin text-sm">⟳</div>
+              <span v-else>{{ emoji }}</span>
+            </button>
+          </div>
+        </div>
+      </div>
+
       <!-- Description -->
       <p class="font-medium">
-        <a class="cursor-pointer" @click="emitLoadClaim(record.jwtId)">
-          {{ description }}
+        <a class="block cursor-pointer" @click="emitLoadClaim(record.jwtId)">
+          <vue-markdown
+            :source="truncatedDescription"
+            class="markdown-content"
+          />
         </a>
       </p>
 
       <div
-        class="relative flex justify-between gap-4 max-w-[40rem] mx-auto mt-4"
+        class="clear-right relative flex justify-between gap-4 max-w-[40rem] mx-auto mt-4"
       >
         <!-- Source -->
         <div
@@ -248,33 +328,51 @@
 
 <script lang="ts">
 import { Component, Prop, Vue, Emit } from "vue-facing-decorator";
-import { GiveRecordWithContactInfo } from "@/interfaces/give";
+import VueMarkdown from "vue-markdown-render";
+
+import { logger } from "../utils/logger";
+import {
+  createAndSubmitClaim,
+  getHeaders,
+  isHiddenDid,
+} from "../libs/endorserServer";
 import EntityIcon from "./EntityIcon.vue";
-import { isHiddenDid } from "../libs/endorserServer";
 import ProjectIcon from "./ProjectIcon.vue";
-import { createNotifyHelpers, NotifyFunction } from "@/utils/notify";
+import { createNotifyHelpers, NotifyFunction, TIMEOUTS } from "@/utils/notify";
 import {
   NOTIFY_PERSON_HIDDEN,
   NOTIFY_UNKNOWN_PERSON,
 } from "@/constants/notifications";
-import { TIMEOUTS } from "@/utils/notify";
+import { EmojiSummaryRecord, GenericVerifiableCredential } from "@/interfaces";
+import { GiveRecordWithContactInfo } from "@/interfaces/give";
+import { PromiseTracker } from "@/libs/util";
 
 @Component({
   components: {
     EntityIcon,
     ProjectIcon,
+    VueMarkdown,
   },
 })
 export default class ActivityListItem extends Vue {
+  readonly QUICK_EMOJIS = ["👍", "👏", "❤️", "🎉", "😊", "😆", "🔥"];
+
   @Prop() record!: GiveRecordWithContactInfo;
   @Prop() lastViewedClaimId?: string;
   @Prop() isRegistered!: boolean;
   @Prop() activeDid!: string;
+  @Prop() apiServer!: string;
 
   isHiddenDid = isHiddenDid;
   notify!: ReturnType<typeof createNotifyHelpers>;
   $notify!: NotifyFunction;
 
+  // Emoji-related data
+  showEmojiPicker = false;
+  loadingEmojis = false; // Track if emojis are currently loading
+
+  emojisOnActivity: PromiseTracker<EmojiSummaryRecord[]> | null = null; // load this only when needed
+
   created() {
     this.notify = createNotifyHelpers(this.$notify);
   }
@@ -303,6 +401,14 @@ export default class ActivityListItem extends Vue {
     return `${claim?.description || ""}`;
   }
 
+  get truncatedDescription(): string {
+    const desc = this.description;
+    if (desc.length <= 300) {
+      return desc;
+    }
+    return desc.substring(0, 300) + "...";
+  }
+
   private displayAmount(code: string, amt: number) {
     return `${amt} ${this.currencyShortWordForCode(code, amt === 1)}`;
   }
@@ -330,5 +436,186 @@ export default class ActivityListItem extends Vue {
       day: "numeric",
     });
   }
+
+  // Emoji-related computed properties and methods
+  get hasEmojis(): boolean {
+    return Object.keys(this.record.emojiCount).length > 0;
+  }
+
+  triggerUserEmojiLoad(): PromiseTracker<EmojiSummaryRecord[]> {
+    if (!this.emojisOnActivity) {
+      const promise = new Promise<EmojiSummaryRecord[]>((resolve) => {
+        (async () => {
+          this.axios
+            .get(
+              `${this.apiServer}/api/v2/report/emoji?parentHandleId=${encodeURIComponent(this.record.handleId)}`,
+              { headers: await getHeaders(this.activeDid) },
+            )
+            .then((response) => {
+              const userEmojiRecords = response.data.data.filter(
+                (e: EmojiSummaryRecord) => e.issuerDid === this.activeDid,
+              );
+              resolve(userEmojiRecords);
+            })
+            .catch((error) => {
+              logger.error("Error loading user emojis:", error);
+              resolve([]);
+            });
+        })();
+      });
+
+      this.emojisOnActivity = new PromiseTracker(promise);
+    }
+    return this.emojisOnActivity;
+  }
+
+  /**
+   *
+   * @param emoji - The emoji to check.
+   * @returns True if the emoji is in the user's emojis, false otherwise.
+   *
+   * @note This method is quick and synchronous, and can check resolved emojis
+   * without triggering a server request. Returns false if emojis haven't been loaded yet.
+   */
+  isUserEmojiWithoutLoading(emoji: string): boolean {
+    if (this.emojisOnActivity?.isResolved && this.emojisOnActivity.value) {
+      return this.emojisOnActivity.value.some(
+        (record) => record.text === emoji,
+      );
+    }
+    return false;
+  }
+
+  async toggleEmojiPicker() {
+    this.triggerUserEmojiLoad(); // trigger it, but don't wait for it to complete
+    this.showEmojiPicker = !this.showEmojiPicker;
+  }
+
+  async toggleThisEmoji(emoji: string) {
+    // Start loading indicator
+    this.loadingEmojis = true;
+    this.showEmojiPicker = false; // always close the picker when an emoji is clicked
+
+    try {
+      this.triggerUserEmojiLoad(); // trigger just in case
+
+      const userEmojiList = await this.emojisOnActivity!.promise; // must wait now that they've chosen
+
+      const userHasEmoji: boolean = userEmojiList.some(
+        (record) => record.text === emoji,
+      );
+
+      if (userHasEmoji) {
+        this.$notify(
+          {
+            group: "modal",
+            type: "confirm",
+            title: "Remove Emoji",
+            text: `Do you want to remove your ${emoji} ?`,
+            yesText: "Remove",
+            onYes: async () => {
+              await this.removeEmoji(emoji);
+            },
+          },
+          TIMEOUTS.MODAL,
+        );
+      } else {
+        // User doesn't have this emoji, add it
+        await this.submitEmoji(emoji);
+      }
+    } finally {
+      // Remove loading indicator
+      this.loadingEmojis = false;
+    }
+  }
+
+  async submitEmoji(emoji: string) {
+    try {
+      // Create an Emoji claim and send to the server
+      const emojiClaim: GenericVerifiableCredential = {
+        "@context": "https://endorser.ch",
+        "@type": "Emoji",
+        text: emoji,
+        parentItem: { lastClaimId: this.record.jwtId },
+      };
+      const claim = await createAndSubmitClaim(
+        emojiClaim,
+        this.activeDid,
+        this.apiServer,
+        this.axios,
+      );
+      if (claim.success && !claim.embeddedRecordError) {
+        // Update emoji count
+        this.record.emojiCount[emoji] =
+          (this.record.emojiCount[emoji] || 0) + 1;
+
+        // Create a new emoji record (we'll get the actual jwtId from the server response later)
+        const newEmojiRecord: EmojiSummaryRecord = {
+          issuerDid: this.activeDid,
+          jwtId: claim.claimId || "",
+          text: emoji,
+          parentHandleId: this.record.jwtId,
+        };
+
+        // Update user emojis list by creating a new promise with the updated data
+        // (Trigger shouldn't be necessary since all calls should come through a toggle, but just in case someone calls this directly)
+        this.triggerUserEmojiLoad();
+        const currentEmojis = await this.emojisOnActivity!.promise; // must wait now that they've clicked one
+        this.emojisOnActivity = new PromiseTracker(
+          Promise.resolve([...currentEmojis, newEmojiRecord]),
+        );
+      } else {
+        this.notify.error("Failed to add emoji.", TIMEOUTS.STANDARD);
+      }
+    } catch (error) {
+      logger.error("Error submitting emoji:", error);
+      this.notify.error("Got error adding emoji.", TIMEOUTS.STANDARD);
+    }
+  }
+
+  async removeEmoji(emoji: string) {
+    try {
+      // Create an Emoji claim and send to the server
+      const emojiClaim: GenericVerifiableCredential = {
+        "@context": "https://endorser.ch",
+        "@type": "Emoji",
+        text: emoji,
+        parentItem: { lastClaimId: this.record.jwtId },
+      };
+      const claim = await createAndSubmitClaim(
+        emojiClaim,
+        this.activeDid,
+        this.apiServer,
+        this.axios,
+      );
+      if (claim.success && !claim.embeddedRecordError) {
+        // Update emoji count
+        const newCount = Math.max(0, (this.record.emojiCount[emoji] || 0) - 1);
+        if (newCount === 0) {
+          delete this.record.emojiCount[emoji];
+        } else {
+          this.record.emojiCount[emoji] = newCount;
+        }
+
+        // Update user emojis list by creating a new promise with the updated data
+        // (Trigger shouldn't be necessary since all calls should come through a toggle, but just in case someone calls this directly)
+        this.triggerUserEmojiLoad();
+        const currentEmojis = await this.emojisOnActivity!.promise; // must wait now that they've clicked one
+        this.emojisOnActivity = new PromiseTracker(
+          Promise.resolve(
+            currentEmojis.filter(
+              (record) =>
+                record.issuerDid === this.activeDid && record.text !== emoji,
+            ),
+          ),
+        );
+      } else {
+        this.notify.error("Failed to remove emoji.", TIMEOUTS.STANDARD);
+      }
+    } catch (error) {
+      logger.error("Error removing emoji:", error);
+      this.notify.error("Got error removing emoji.", TIMEOUTS.STANDARD);
+    }
+  }
 }
 </script>

src/components/BulkMembersDialog.vue

@@ -0,0 +1,506 @@
+<template>
+  <div v-if="visible" class="dialog-overlay">
+    <div class="dialog">
+      <div class="text-slate-900 text-center">
+        <h3 class="text-lg font-semibold leading-[1.25] mb-2">
+          {{ title }}
+        </h3>
+        <p class="text-sm mb-4">
+          {{ description }}
+        </p>
+
+        <!-- Member Selection Table -->
+        <div class="mb-4">
+          <table
+            class="w-full border-collapse border border-slate-300 text-sm text-start"
+          >
+            <!-- Select All Header -->
+            <thead v-if="membersData && membersData.length > 0">
+              <tr class="bg-slate-100 font-medium">
+                <th class="border border-slate-300 px-3 py-2">
+                  <label class="flex items-center gap-2">
+                    <input
+                      type="checkbox"
+                      :checked="isAllSelected"
+                      :indeterminate="isIndeterminate"
+                      @change="toggleSelectAll"
+                    />
+                    Select All
+                  </label>
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <!-- Empty State -->
+              <tr v-if="!membersData || membersData.length === 0">
+                <td
+                  class="border border-slate-300 px-3 py-2 text-center italic text-gray-500"
+                >
+                  {{ emptyStateText }}
+                </td>
+              </tr>
+              <!-- Member Rows -->
+              <tr
+                v-for="member in membersData || []"
+                :key="member.member.memberId"
+              >
+                <td class="border border-slate-300 px-3 py-2">
+                  <div class="flex items-center justify-between gap-2">
+                    <label class="flex items-center gap-2">
+                      <input
+                        type="checkbox"
+                        :checked="isMemberSelected(member.did)"
+                        @change="toggleMemberSelection(member.did)"
+                      />
+                      <div class="">
+                        <div class="text-sm font-semibold">
+                          {{ member.name || SOMEONE_UNNAMED }}
+                        </div>
+                        <div
+                          class="flex items-center gap-0.5 text-xs text-slate-500"
+                        >
+                          <span class="font-semibold sm:hidden">DID:</span>
+                          <span
+                            class="w-[35vw] sm:w-auto truncate text-left"
+                            style="direction: rtl"
+                            >{{ member.did }}</span
+                          >
+                        </div>
+                      </div>
+                    </label>
+
+                    <!-- Contact indicator - only show if they are already a contact -->
+                    <font-awesome
+                      v-if="member.isContact"
+                      icon="user-circle"
+                      class="fa-fw ms-auto text-slate-400 cursor-pointer hover:text-slate-600"
+                      @click="showContactInfo"
+                    />
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+            <!-- Select All Footer -->
+            <tfoot v-if="membersData && membersData.length > 0">
+              <tr class="bg-slate-100 font-medium">
+                <th class="border border-slate-300 px-3 py-2">
+                  <label class="flex items-center gap-2">
+                    <input
+                      type="checkbox"
+                      :checked="isAllSelected"
+                      :indeterminate="isIndeterminate"
+                      @change="toggleSelectAll"
+                    />
+                    Select All
+                  </label>
+                </th>
+              </tr>
+            </tfoot>
+          </table>
+        </div>
+
+        <!-- Action Buttons -->
+        <div class="space-y-2">
+          <!-- Main Action Button -->
+          <button
+            v-if="membersData && membersData.length > 0"
+            :disabled="!hasSelectedMembers"
+            :class="[
+              'block w-full text-center text-md font-bold uppercase px-2 py-2 rounded-md',
+              hasSelectedMembers
+                ? 'bg-blue-600 text-white cursor-pointer'
+                : 'bg-slate-400 text-slate-200 cursor-not-allowed',
+            ]"
+            @click="handleMainAction"
+          >
+            {{ buttonText }}
+          </button>
+          <!-- Cancel Button -->
+          <button
+            class="block w-full text-center text-md font-bold uppercase bg-slate-600 text-white px-2 py-2 rounded-md"
+            @click="cancel"
+          >
+            Maybe Later
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop } from "vue-facing-decorator";
+
+import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
+import { SOMEONE_UNNAMED } from "@/constants/entities";
+import { MemberData } from "@/interfaces";
+import { setVisibilityUtil, getHeaders, register } from "@/libs/endorserServer";
+import { createNotifyHelpers } from "@/utils/notify";
+import { Contact } from "@/db/tables/contacts";
+
+@Component({
+  mixins: [PlatformServiceMixin],
+  emits: ["close"],
+})
+export default class BulkMembersDialog extends Vue {
+  @Prop({ default: "" }) activeDid!: string;
+  @Prop({ default: "" }) apiServer!: string;
+  @Prop({ required: true }) dialogType!: "admit" | "visibility";
+  @Prop({ required: true }) isOrganizer!: boolean;
+
+  // Vue notification system
+  $notify!: (
+    notification: { group: string; type: string; title: string; text: string },
+    timeout?: number,
+  ) => void;
+
+  // Notification system
+  notify!: ReturnType<typeof createNotifyHelpers>;
+
+  // Component state
+  membersData: MemberData[] = [];
+  selectedMembers: string[] = [];
+  visible = false;
+
+  // Constants
+  // In Vue templates, imported constants need to be explicitly made available to the template
+  readonly SOMEONE_UNNAMED = SOMEONE_UNNAMED;
+
+  get hasSelectedMembers() {
+    return this.selectedMembers.length > 0;
+  }
+
+  get isAllSelected() {
+    if (!this.membersData || this.membersData.length === 0) return false;
+    return this.membersData.every((member) =>
+      this.selectedMembers.includes(member.did),
+    );
+  }
+
+  get isIndeterminate() {
+    if (!this.membersData || this.membersData.length === 0) return false;
+    const selectedCount = this.membersData.filter((member) =>
+      this.selectedMembers.includes(member.did),
+    ).length;
+    return selectedCount > 0 && selectedCount < this.membersData.length;
+  }
+
+  get title() {
+    return this.isOrganizer
+      ? "Admit Pending Members"
+      : "Add Members to Contacts";
+  }
+
+  get description() {
+    return this.isOrganizer
+      ? "Would you like to admit these members to the meeting and add them to your contacts?"
+      : "Would you like to add these members to your contacts?";
+  }
+
+  get buttonText() {
+    return this.isOrganizer ? "Admit + Add to Contacts" : "Add to Contacts";
+  }
+
+  get emptyStateText() {
+    return this.isOrganizer
+      ? "No pending members to admit"
+      : "No members are not in your contacts";
+  }
+
+  created() {
+    this.notify = createNotifyHelpers(this.$notify);
+  }
+
+  open(members: MemberData[]) {
+    this.visible = true;
+    this.membersData = members;
+    // Select all by default
+    this.selectedMembers = this.membersData.map((member) => member.did);
+  }
+
+  close(notSelectedMemberDids: string[]) {
+    this.visible = false;
+    this.$emit("close", { notSelectedMemberDids: notSelectedMemberDids });
+  }
+
+  cancel() {
+    this.close(this.membersData.map((member) => member.did));
+  }
+
+  toggleSelectAll() {
+    if (!this.membersData || this.membersData.length === 0) return;
+
+    if (this.isAllSelected) {
+      // Deselect all
+      this.selectedMembers = [];
+    } else {
+      // Select all
+      this.selectedMembers = this.membersData.map((member) => member.did);
+    }
+  }
+
+  toggleMemberSelection(memberDid: string) {
+    const index = this.selectedMembers.indexOf(memberDid);
+    if (index > -1) {
+      this.selectedMembers.splice(index, 1);
+    } else {
+      this.selectedMembers.push(memberDid);
+    }
+  }
+
+  isMemberSelected(memberDid: string) {
+    return this.selectedMembers.includes(memberDid);
+  }
+
+  async handleMainAction() {
+    if (this.dialogType === "admit") {
+      await this.organizerAdmitAndAddWithVisibility();
+    } else {
+      await this.memberAddContactWithVisibility();
+    }
+  }
+
+  async organizerAdmitAndAddWithVisibility() {
+    try {
+      const selectedMembers: MemberData[] = this.membersData.filter((member) =>
+        this.selectedMembers.includes(member.did),
+      );
+      const notSelectedMembers: MemberData[] = this.membersData.filter(
+        (member) => !this.selectedMembers.includes(member.did),
+      );
+
+      let admittedCount = 0;
+      let contactAddedCount = 0;
+      let errors = 0;
+
+      for (const member of selectedMembers) {
+        try {
+          // First, admit the member
+          await this.admitMember(member);
+
+          // Register them
+          await this.registerMember(member);
+          admittedCount++;
+
+          // If they're not a contact yet, add them as a contact
+          if (!member.isContact) {
+            await this.addAsContact(member, true);
+            contactAddedCount++;
+          }
+
+          // Set their seesMe to true
+          await this.updateContactVisibility(member.did, true);
+        } catch (error) {
+          // eslint-disable-next-line no-console
+          console.error(`Error processing member ${member.did}:`, error);
+          // Continue with other members even if one fails
+          errors++;
+        }
+      }
+
+      // Show success notification
+      if (admittedCount > 0) {
+        this.$notify(
+          {
+            group: "alert",
+            type: "success",
+            title: "Members Admitted Successfully",
+            text: `${admittedCount} member${admittedCount === 1 ? "" : "s"} admitted and registered${contactAddedCount === 0 ? "" : admittedCount === contactAddedCount ? " and" : `, ${contactAddedCount}`}${contactAddedCount === 0 ? "" : ` added as contact${contactAddedCount === 1 ? "" : "s"}`}.`,
+          },
+          10000,
+        );
+      }
+      if (errors > 0) {
+        this.$notify(
+          {
+            group: "alert",
+            type: "danger",
+            title: "Error",
+            text: "Failed to fully admit some members. Work with them individually below.",
+          },
+          5000,
+        );
+      }
+
+      this.close(notSelectedMembers.map((member) => member.did));
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error("Error admitting members:", error);
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text: "Some errors occurred. Work with members individually below.",
+        },
+        5000,
+      );
+    }
+  }
+
+  async memberAddContactWithVisibility() {
+    try {
+      const selectedMembers: MemberData[] = this.membersData.filter((member) =>
+        this.selectedMembers.includes(member.did),
+      );
+      const notSelectedMembers: MemberData[] = this.membersData.filter(
+        (member) => !this.selectedMembers.includes(member.did),
+      );
+
+      let contactsAddedCount = 0;
+
+      for (const member of selectedMembers) {
+        try {
+          // If they're not a contact yet, add them as a contact first
+          if (!member.isContact) {
+            await this.addAsContact(member, undefined);
+            contactsAddedCount++;
+          }
+
+          // Set their seesMe to true
+          await this.updateContactVisibility(member.did, true);
+        } catch (error) {
+          // eslint-disable-next-line no-console
+          console.error(`Error processing member ${member.did}:`, error);
+          // Continue with other members even if one fails
+        }
+      }
+
+      // Show success notification
+      this.$notify(
+        {
+          group: "alert",
+          type: "success",
+          title: "Contacts Added Successfully",
+          text: `${contactsAddedCount} member${contactsAddedCount === 1 ? "" : "s"} added as contact${contactsAddedCount === 1 ? "" : "s"}.`,
+        },
+        5000,
+      );
+
+      this.close(notSelectedMembers.map((member) => member.did));
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error("Error adding contacts:", error);
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text: "Some errors occurred. Work with members individually below.",
+        },
+        5000,
+      );
+    }
+  }
+
+  async admitMember(member: {
+    did: string;
+    name: string;
+    member: { memberId: string };
+  }) {
+    try {
+      const headers = await getHeaders(this.activeDid);
+      await this.axios.put(
+        `${this.apiServer}/api/partner/groupOnboardMember/${member.member.memberId}`,
+        { admitted: true },
+        { headers },
+      );
+    } catch (err) {
+      // eslint-disable-next-line no-console
+      console.error("Error admitting member:", err);
+      throw err;
+    }
+  }
+
+  async registerMember(member: MemberData) {
+    try {
+      const contact: Contact = { did: member.did };
+      const result = await register(
+        this.activeDid,
+        this.apiServer,
+        this.axios,
+        contact,
+      );
+      if (result.success) {
+        if (result.embeddedRecordError) {
+          throw new Error(result.embeddedRecordError);
+        }
+        await this.$updateContact(member.did, { registered: true });
+      } else {
+        throw result;
+      }
+    } catch (err) {
+      // eslint-disable-next-line no-console
+      console.error("Error registering member:", err);
+      throw err;
+    }
+  }
+
+  async addAsContact(
+    member: { did: string; name: string },
+    isRegistered?: boolean,
+  ) {
+    try {
+      const newContact: Contact = {
+        did: member.did,
+        name: member.name,
+        registered: isRegistered,
+      };
+
+      await this.$insertContact(newContact);
+    } catch (err) {
+      // eslint-disable-next-line no-console
+      console.error("Error adding contact:", err);
+      if (err instanceof Error && err.message?.indexOf("already exists") > -1) {
+        // Contact already exists, continue
+      } else {
+        throw err; // Re-throw if it's not a duplicate error
+      }
+    }
+  }
+
+  async updateContactVisibility(did: string, seesMe: boolean) {
+    try {
+      // Get the contact object
+      const contact = await this.$getContact(did);
+      if (!contact) {
+        throw new Error(`Contact not found for DID: ${did}`);
+      }
+
+      // Use the proper API to set visibility on the server
+      const result = await setVisibilityUtil(
+        this.activeDid,
+        this.apiServer,
+        this.axios,
+        contact,
+        seesMe,
+      );
+
+      if (!result.success) {
+        throw new Error(result.error || "Failed to set visibility");
+      }
+    } catch (err) {
+      // eslint-disable-next-line no-console
+      console.error("Error updating contact visibility:", err);
+      throw err;
+    }
+  }
+
+  showContactInfo() {
+    const message =
+      this.dialogType === "admit"
+        ? "This user is already your contact, but they are not yet admitted to the meeting."
+        : "This user is already your contact, but your activities are not visible to them yet.";
+
+    this.$notify(
+      {
+        group: "alert",
+        type: "info",
+        title: "Contact Info",
+        text: message,
+      },
+      5000,
+    );
+  }
+}
+</script>

src/components/ContactListItem.vue

@@ -46,7 +46,7 @@
 
             <span class="text-xs truncate">{{ contact.did }}</span>
           </div>
-          <div class="text-sm">
+          <div class="text-sm truncate">
             {{ contact.notes }}
           </div>
         </div>

src/components/DataExportSection.vue

@@ -18,7 +18,7 @@ messages * - Conditional UI based on platform capabilities * * @component *
     >
       <!-- Notification dot - show while the user has not yet backed up their seed phrase -->
       <font-awesome
-        v-if="!hasBackedUpSeed"
+        v-if="showRedNotificationDot"
         icon="circle"
         class="absolute -right-[8px] -top-[8px] text-rose-500 text-[14px] border border-white rounded-full"
       ></font-awesome>
@@ -108,7 +108,7 @@ export default class DataExportSection extends Vue {
    * Flag indicating if the user has backed up their seed phrase
    * Used to control the visibility of the notification dot
    */
-  hasBackedUpSeed = false;
+  showRedNotificationDot = false;
 
   /**
    * Notification helper for consistent notification patterns
@@ -240,11 +240,12 @@ export default class DataExportSection extends Vue {
   private async loadSeedBackupStatus(): Promise<void> {
     try {
       const settings = await this.$accountSettings();
-      this.hasBackedUpSeed = !!settings.hasBackedUpSeed;
+      this.showRedNotificationDot =
+        !!settings.isRegistered && !settings.hasBackedUpSeed;
     } catch (err: unknown) {
       logger.error("Failed to load seed backup status:", err);
       // Default to false (show notification dot) if we can't load the setting
-      this.hasBackedUpSeed = false;
+      this.showRedNotificationDot = false;
     }
   }
 }

src/components/EntityGrid.vue

@@ -2,12 +2,55 @@
 GiftedDialog.vue to provide a reusable grid layout * for displaying people,
 projects, and special entities with selection. * * @author Matthew Raymer */
 <template>
-  <ul :class="gridClasses">
+  <!-- Quick Search -->
+  <div id="QuickSearch" class="mb-4 flex items-center text-sm">
+    <input
+      v-model="searchTerm"
+      type="text"
+      placeholder="Search…"
+      class="block w-full rounded-l border border-r-0 border-slate-400 px-3 py-1.5 placeholder:italic placeholder:text-slate-400 focus:outline-none"
+      @input="handleSearchInput"
+      @keydown.enter="performSearch"
+    />
+    <div
+      v-show="isSearching && searchTerm"
+      class="border-y border-slate-400 ps-2 py-1.5 text-center text-slate-400"
+    >
+      <font-awesome
+        icon="spinner"
+        class="fa-spin-pulse leading-[1.1]"
+      ></font-awesome>
+    </div>
+    <button
+      :disabled="!searchTerm"
+      class="px-2 py-1.5 rounded-r bg-white border border-l-0 border-slate-400 text-slate-400 disabled:cursor-not-allowed"
+      @click="clearSearch"
+    >
+      <font-awesome
+        :icon="searchTerm ? 'times' : 'magnifying-glass'"
+        class="fa-fw"
+      ></font-awesome>
+    </button>
+  </div>
+
+  <div
+    v-if="searchTerm && !isSearching && filteredEntities.length === 0"
+    class="mb-4 text-sm italic text-slate-500 text-center"
+  >
+    “{{ searchTerm }}” doesn't match any
+    {{ entityType === "people" ? "people" : "projects" }}. Try a different
+    search.
+  </div>
+
+  <ul
+    ref="scrollContainer"
+    class="border-t border-slate-300 mb-4 max-h-[60vh] overflow-y-auto"
+  >
     <!-- Special entities (You, Unnamed) for people grids -->
     <template v-if="entityType === 'people'">
       <!-- "You" entity -->
       <SpecialEntityCard
-        v-if="showYouEntity"
+        v-if="showYouEntity && !searchTerm.trim()"
         entity-type="you"
         label="You"
         icon="hand"
@@ -21,6 +64,7 @@ projects, and special entities with selection. * * @author Matthew Raymer */
 
       <!-- "Unnamed" entity -->
       <SpecialEntityCard
+        v-if="showUnnamedEntity && !searchTerm.trim()"
         entity-type="unnamed"
         :label="unnamedEntityName"
         icon="circle-question"
@@ -38,16 +82,60 @@ projects, and special entities with selection. * * @author Matthew Raymer */
 
     <!-- Entity cards (people or projects) -->
     <template v-if="entityType === 'people'">
-      <PersonCard
-        v-for="person in displayedEntities as Contact[]"
-        :key="person.did"
-        :person="person"
-        :conflicted="isPersonConflicted(person.did)"
-        :show-time-icon="true"
-        :notify="notify"
-        :conflict-context="conflictContext"
-        @person-selected="handlePersonSelected"
-      />
+      <!-- When showing contacts without search: split into recent and alphabetical -->
+      <template v-if="!searchTerm.trim()">
+        <!-- Recently Added Section -->
+        <template v-if="recentContacts.length > 0">
+          <li
+            class="text-xs font-semibold text-slate-500 uppercase pt-5 pb-1.5 px-2 border-b border-slate-300"
+          >
+            Recently Added
+          </li>
+          <PersonCard
+            v-for="person in recentContacts"
+            :key="person.did"
+            :person="person"
+            :conflicted="isPersonConflicted(person.did)"
+            :show-time-icon="true"
+            :notify="notify"
+            :conflict-context="conflictContext"
+            @person-selected="handlePersonSelected"
+          />
+        </template>
+
+        <!-- Alphabetical Section -->
+        <template v-if="alphabeticalContacts.length > 0">
+          <li
+            class="text-xs font-semibold text-slate-500 uppercase pt-5 pb-1.5 px-2 border-b border-slate-300"
+          >
+            Everyone Else
+          </li>
+          <PersonCard
+            v-for="person in alphabeticalContacts"
+            :key="person.did"
+            :person="person"
+            :conflicted="isPersonConflicted(person.did)"
+            :show-time-icon="true"
+            :notify="notify"
+            :conflict-context="conflictContext"
+            @person-selected="handlePersonSelected"
+          />
+        </template>
+      </template>
+
+      <!-- When searching: show filtered results normally -->
+      <template v-else>
+        <PersonCard
+          v-for="person in displayedEntities as Contact[]"
+          :key="person.did"
+          :person="person"
+          :conflicted="isPersonConflicted(person.did)"
+          :show-time-icon="true"
+          :notify="notify"
+          :conflict-context="conflictContext"
+          @person-selected="handlePersonSelected"
+        />
+      </template>
     </template>
 
     <template v-else-if="entityType === 'projects'">
@@ -63,28 +151,27 @@ projects, and special entities with selection. * * @author Matthew Raymer */
         @project-selected="handleProjectSelected"
       />
     </template>
-
-    <!-- Show All navigation -->
-    <ShowAllCard
-      v-if="shouldShowAll"
-      :entity-type="entityType"
-      :route-name="showAllRoute"
-      :query-params="showAllQueryParams"
-    />
   </ul>
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue, Emit } from "vue-facing-decorator";
+import { Component, Prop, Vue, Emit, Watch } from "vue-facing-decorator";
+import { useInfiniteScroll } from "@vueuse/core";
 import PersonCard from "./PersonCard.vue";
 import ProjectCard from "./ProjectCard.vue";
 import SpecialEntityCard from "./SpecialEntityCard.vue";
-import ShowAllCard from "./ShowAllCard.vue";
 import { Contact } from "../db/tables/contacts";
 import { PlanData } from "../interfaces/records";
 import { NotificationIface } from "../constants/app";
 import { UNNAMED_ENTITY_NAME } from "@/constants/entities";
 
+/**
+ * Constants for infinite scroll configuration
+ */
+const INITIAL_BATCH_SIZE = 20;
+const INCREMENT_SIZE = 20;
+const RECENT_CONTACTS_COUNT = 3;
+
 /**
  * EntityGrid - Unified grid layout for displaying people or projects
  *
@@ -93,7 +180,6 @@ import { UNNAMED_ENTITY_NAME } from "@/constants/entities";
  * - Special entity integration (You, Unnamed)
  * - Conflict detection integration
  * - Empty state messaging
- * - Show All navigation
  * - Event delegation for entity selection
  * - Warning notifications for conflicted entities
  * - Template streamlined with computed CSS properties
@@ -104,7 +190,6 @@ import { UNNAMED_ENTITY_NAME } from "@/constants/entities";
     PersonCard,
     ProjectCard,
     SpecialEntityCard,
-    ShowAllCard,
   },
 })
 export default class EntityGrid extends Vue {
@@ -112,14 +197,21 @@ export default class EntityGrid extends Vue {
   @Prop({ required: true })
   entityType!: "people" | "projects";
 
+  // Search state
+  searchTerm = "";
+  isSearching = false;
+  searchTimeout: NodeJS.Timeout | null = null;
+  filteredEntities: Contact[] | PlanData[] = [];
+
+  // Infinite scroll state
+  displayedCount = INITIAL_BATCH_SIZE;
+  infiniteScrollReset?: () => void;
+  scrollContainer?: HTMLElement;
+
   /** Array of entities to display */
   @Prop({ required: true })
   entities!: Contact[] | PlanData[];
 
-  /** Maximum number of entities to display */
-  @Prop({ default: 10 })
-  maxItems!: number;
-
   /** Active user's DID */
   @Prop({ required: true })
   activeDid!: string;
@@ -140,18 +232,14 @@ export default class EntityGrid extends Vue {
   @Prop({ default: true })
   showYouEntity!: boolean;
 
+  /** Whether to show the "Unnamed" entity for people grids */
+  @Prop({ default: true })
+  showUnnamedEntity!: boolean;
+
   /** Whether the "You" entity is selectable */
   @Prop({ default: true })
   youSelectable!: boolean;
 
-  /** Route name for "Show All" navigation */
-  @Prop({ default: "" })
-  showAllRoute!: string;
-
-  /** Query parameters for "Show All" navigation */
-  @Prop({ default: () => ({}) })
-  showAllQueryParams!: Record<string, string>;
-
   /** Notification function from parent component */
   @Prop()
   notify?: (notification: NotificationIface, timeout?: number) => void;
@@ -160,42 +248,31 @@ export default class EntityGrid extends Vue {
   @Prop({ default: "other party" })
   conflictContext!: string;
 
-  /** Whether to hide the "Show All" navigation */
-  @Prop({ default: false })
-  hideShowAll!: boolean;
-
   /**
    * Function to determine which entities to display (allows parent control)
    *
    * This function prop allows parent components to customize which entities
-   * are displayed in the grid, enabling advanced filtering, sorting, and
-   * display logic beyond the default simple slice behavior.
+   * are displayed in the grid, enabling advanced filtering and sorting.
+   * Note: Infinite scroll is disabled when this prop is provided.
    *
    * @param entities - The full array of entities (Contact[] or PlanData[])
    * @param entityType - The type of entities being displayed ("people" or "projects")
-   * @param maxItems - The maximum number of items to display (from maxItems prop)
    * @returns Filtered/sorted array of entities to display
    *
    * @example
    * // Custom filtering: only show contacts with profile images
-   * :display-entities-function="(entities, type, max) =>
-   *   entities.filter(e => e.profileImageUrl).slice(0, max)"
+   * :display-entities-function="(entities, type) =>
+   *   entities.filter(e => e.profileImageUrl)"
    *
    * @example
    * // Custom sorting: sort projects by name
-   * :display-entities-function="(entities, type, max) =>
-   *   entities.sort((a, b) => a.name.localeCompare(b.name)).slice(0, max)"
-   *
-   * @example
-   * // Advanced logic: different limits for different entity types
-   * :display-entities-function="(entities, type, max) =>
-   *   type === 'projects' ? entities.slice(0, 5) : entities.slice(0, max)"
+   * :display-entities-function="(entities, type) =>
+   *   entities.sort((a, b) => a.name.localeCompare(b.name))"
    */
   @Prop({ default: null })
   displayEntitiesFunction?: (
     entities: Contact[] | PlanData[],
     entityType: "people" | "projects",
-    maxItems: number,
   ) => Contact[] | PlanData[];
 
   /**
@@ -206,33 +283,60 @@ export default class EntityGrid extends Vue {
   }
 
   /**
-   * Computed CSS classes for the grid layout
+   * Computed entities to display - uses function prop if provided, otherwise uses infinite scroll
+   * When searching, returns filtered results with infinite scroll applied
    */
-  get gridClasses(): string {
-    const baseClasses = "grid gap-x-2 gap-y-4 text-center mb-4";
-
-    if (this.entityType === "projects") {
-      return `${baseClasses} grid-cols-3 md:grid-cols-4`;
-    } else {
-      return `${baseClasses} grid-cols-4 sm:grid-cols-5 md:grid-cols-6`;
+  get displayedEntities(): Contact[] | PlanData[] {
+    // If searching, return filtered results with infinite scroll
+    if (this.searchTerm.trim()) {
+      return this.filteredEntities.slice(0, this.displayedCount);
     }
+
+    // If custom function provided, use it (disables infinite scroll)
+    if (this.displayEntitiesFunction) {
+      return this.displayEntitiesFunction(this.entities, this.entityType);
+    }
+
+    // Default: projects use infinite scroll
+    if (this.entityType === "projects") {
+      return (this.entities as PlanData[]).slice(0, this.displayedCount);
+    }
+
+    // People: handled by recentContacts + alphabeticalContacts (both use displayedCount)
+    return [];
   }
 
   /**
-   * Computed entities to display - uses function prop if provided, otherwise defaults
+   * Get the 3 most recently added contacts (when showing contacts and not searching)
    */
-  get displayedEntities(): Contact[] | PlanData[] {
-    if (this.displayEntitiesFunction) {
-      return this.displayEntitiesFunction(
-        this.entities,
-        this.entityType,
-        this.maxItems,
-      );
+  get recentContacts(): Contact[] {
+    if (this.entityType !== "people" || this.searchTerm.trim()) {
+      return [];
     }
+    // Entities are already sorted by date added (newest first)
+    return (this.entities as Contact[]).slice(0, 3);
+  }
 
-    // Default implementation for backward compatibility
-    const maxDisplay = this.entityType === "projects" ? 7 : this.maxItems;
-    return this.entities.slice(0, maxDisplay);
+  /**
+   * Get the remaining contacts sorted alphabetically (when showing contacts and not searching)
+   * Uses infinite scroll to control how many are displayed
+   */
+  get alphabeticalContacts(): Contact[] {
+    if (this.entityType !== "people" || this.searchTerm.trim()) {
+      return [];
+    }
+    // Skip the first 3 (recent contacts) and sort the rest alphabetically
+    // Create a copy to avoid mutating the original array
+    const remaining = (this.entities as Contact[]).slice(RECENT_CONTACTS_COUNT);
+    const sorted = [...remaining].sort((a: Contact, b: Contact) => {
+      // Sort alphabetically by name, falling back to DID if name is missing
+      const nameA = (a.name || a.did).toLowerCase();
+      const nameB = (b.name || b.did).toLowerCase();
+      return nameA.localeCompare(nameB);
+    });
+    // Apply infinite scroll: show based on displayedCount (minus the 3 recent)
+    const toShow = Math.max(0, this.displayedCount - RECENT_CONTACTS_COUNT);
+    return sorted.slice(0, toShow);
   }
 
   /**
@@ -246,15 +350,6 @@ export default class EntityGrid extends Vue {
     }
   }
 
-  /**
-   * Whether to show the "Show All" navigation
-   */
-  get shouldShowAll(): boolean {
-    return (
-      !this.hideShowAll && this.entities.length > 0 && this.showAllRoute !== ""
-    );
-  }
-
   /**
    * Whether the "You" entity is conflicted
    */
@@ -328,6 +423,144 @@ export default class EntityGrid extends Vue {
     });
   }
 
+  /**
+   * Handle search input with debouncing
+   */
+  handleSearchInput(): void {
+    // Show spinner immediately when user types
+    this.isSearching = true;
+
+    // Clear existing timeout
+    if (this.searchTimeout) {
+      clearTimeout(this.searchTimeout);
+    }
+
+    // Set new timeout for 500ms delay
+    this.searchTimeout = setTimeout(() => {
+      this.performSearch();
+    }, 500);
+  }
+
+  /**
+   * Perform the actual search
+   */
+  async performSearch(): Promise<void> {
+    if (!this.searchTerm.trim()) {
+      this.filteredEntities = [];
+      this.displayedCount = INITIAL_BATCH_SIZE;
+      this.infiniteScrollReset?.();
+      return;
+    }
+
+    this.isSearching = true;
+
+    try {
+      // Simulate async search (in case we need to add API calls later)
+      await new Promise((resolve) => setTimeout(resolve, 100));
+
+      const searchLower = this.searchTerm.toLowerCase().trim();
+
+      if (this.entityType === "people") {
+        this.filteredEntities = (this.entities as Contact[])
+          .filter((contact: Contact) => {
+            const name = contact.name?.toLowerCase() || "";
+            const did = contact.did.toLowerCase();
+            return name.includes(searchLower) || did.includes(searchLower);
+          })
+          .sort((a: Contact, b: Contact) => {
+            // Sort alphabetically by name, falling back to DID if name is missing
+            const nameA = (a.name || a.did).toLowerCase();
+            const nameB = (b.name || b.did).toLowerCase();
+            return nameA.localeCompare(nameB);
+          });
+      } else {
+        this.filteredEntities = (this.entities as PlanData[])
+          .filter((project: PlanData) => {
+            const name = project.name?.toLowerCase() || "";
+            const handleId = project.handleId.toLowerCase();
+            return name.includes(searchLower) || handleId.includes(searchLower);
+          })
+          .sort((a: PlanData, b: PlanData) => {
+            // Sort alphabetically by name
+            return a.name.toLowerCase().localeCompare(b.name.toLowerCase());
+          });
+      }
+
+      // Reset displayed count when search completes
+      this.displayedCount = INITIAL_BATCH_SIZE;
+      this.infiniteScrollReset?.();
+    } finally {
+      this.isSearching = false;
+    }
+  }
+
+  /**
+   * Clear the search
+   */
+  clearSearch(): void {
+    this.searchTerm = "";
+    this.filteredEntities = [];
+    this.isSearching = false;
+    this.displayedCount = INITIAL_BATCH_SIZE;
+    this.infiniteScrollReset?.();
+
+    // Clear any pending timeout
+    if (this.searchTimeout) {
+      clearTimeout(this.searchTimeout);
+      this.searchTimeout = null;
+    }
+  }
+
+  /**
+   * Determine if more entities can be loaded
+   */
+  canLoadMore(): boolean {
+    if (this.displayEntitiesFunction) {
+      // Custom function disables infinite scroll
+      return false;
+    }
+
+    if (this.searchTerm.trim()) {
+      // Search mode: check filtered entities
+      return this.displayedCount < this.filteredEntities.length;
+    }
+
+    if (this.entityType === "projects") {
+      // Projects: check if more available
+      return this.displayedCount < this.entities.length;
+    }
+
+    // People: check if more alphabetical contacts available
+    // Total available = 3 recent + all alphabetical
+    const remaining = (this.entities as Contact[]).slice(RECENT_CONTACTS_COUNT);
+    const totalAvailable = RECENT_CONTACTS_COUNT + remaining.length;
+    return this.displayedCount < totalAvailable;
+  }
+
+  /**
+   * Initialize infinite scroll on mount
+   */
+  mounted(): void {
+    this.$nextTick(() => {
+      const container = this.$refs.scrollContainer as HTMLElement;
+
+      if (container) {
+        const { reset } = useInfiniteScroll(
+          container,
+          () => {
+            // Load more: increment displayedCount
+            this.displayedCount += INCREMENT_SIZE;
+          },
+          {
+            distance: 50, // pixels from bottom
+            canLoadMore: () => this.canLoadMore(),
+          },
+        );
+        this.infiniteScrollReset = reset;
+      }
+    });
+  }
+
   // Emit methods using @Emit decorator
 
   @Emit("entity-selected")
@@ -340,6 +573,33 @@ export default class EntityGrid extends Vue {
   } {
     return data;
   }
+
+  /**
+   * Watch for changes in search term to reset displayed count
+   */
+  @Watch("searchTerm")
+  onSearchTermChange(): void {
+    this.displayedCount = INITIAL_BATCH_SIZE;
+    this.infiniteScrollReset?.();
+  }
+
+  /**
+   * Watch for changes in entities prop to reset displayed count
+   */
+  @Watch("entities")
+  onEntitiesChange(): void {
+    this.displayedCount = INITIAL_BATCH_SIZE;
+    this.infiniteScrollReset?.();
+  }
+
+  /**
+   * Cleanup timeouts when component is destroyed
+   */
+  beforeUnmount(): void {
+    if (this.searchTimeout) {
+      clearTimeout(this.searchTimeout);
+    }
+  }
 }
 </script>
 

src/components/EntitySelectionStep.vue

@@ -3,10 +3,9 @@ from GiftedDialog.vue to handle the complete step 1 * entity selection interface
 with dynamic labeling and grid display. * * Features: * - Dynamic step labeling
 based on context * - EntityGrid integration for unified entity display * -
 Conflict detection and prevention * - Special entity handling (You, Unnamed) * -
-Show All navigation with context preservation * - Cancel functionality * - Event
-delegation for entity selection * - Warning notifications for conflicted
-entities * - Template streamlined with computed CSS properties * * @author
-Matthew Raymer */
+Cancel functionality * - Event delegation for entity selection * - Warning
+notifications for conflicted entities * - Template streamlined with computed CSS
+properties * * @author Matthew Raymer */
 <template>
   <div id="sectionGiftedGiver">
     <label class="block font-bold mb-4">
@@ -16,18 +15,14 @@ Matthew Raymer */
     <EntityGrid
       :entity-type="shouldShowProjects ? 'projects' : 'people'"
       :entities="shouldShowProjects ? projects : allContacts"
-      :max-items="10"
       :active-did="activeDid"
       :all-my-dids="allMyDids"
       :all-contacts="allContacts"
       :conflict-checker="conflictChecker"
       :show-you-entity="shouldShowYouEntity"
       :you-selectable="youSelectable"
-      :show-all-route="showAllRoute"
-      :show-all-query-params="showAllQueryParams"
       :notify="notify"
       :conflict-context="conflictContext"
-      :hide-show-all="hideShowAll"
       @entity-selected="handleEntitySelected"
     />
 
@@ -68,7 +63,6 @@ interface EntitySelectionEvent {
  * - EntityGrid integration for unified entity display
  * - Conflict detection and prevention
  * - Special entity handling (You, Unnamed)
- * - Show All navigation with context preservation
  * - Cancel functionality
  * - Event delegation for entity selection
  * - Warning notifications for conflicted entities
@@ -154,10 +148,6 @@ export default class EntitySelectionStep extends Vue {
   @Prop()
   notify?: (notification: NotificationIface, timeout?: number) => void;
 
-  /** Whether to hide the "Show All" navigation */
-  @Prop({ default: false })
-  hideShowAll!: boolean;
-
   /**
    * CSS classes for the cancel button
    */
@@ -222,59 +212,6 @@ export default class EntitySelectionStep extends Vue {
     return !this.conflictChecker(this.activeDid);
   }
 
-  /**
-   * Route name for "Show All" navigation
-   */
-  get showAllRoute(): string {
-    if (this.shouldShowProjects) {
-      return "discover";
-    } else if (this.allContacts.length > 0) {
-      return "contact-gift";
-    }
-    return "";
-  }
-
-  /**
-   * Query parameters for "Show All" navigation
-   */
-  get showAllQueryParams(): Record<string, string> {
-    const baseParams = {
-      stepType: this.stepType,
-      giverEntityType: this.giverEntityType,
-      recipientEntityType: this.recipientEntityType,
-      // Form field values to preserve
-      description: this.description,
-      amountInput: this.amountInput,
-      unitCode: this.unitCode,
-      offerId: this.offerId,
-      fromProjectId: this.fromProjectId,
-      toProjectId: this.toProjectId,
-      showProjects: this.showProjects.toString(),
-      isFromProjectView: this.isFromProjectView.toString(),
-    };
-
-    if (this.shouldShowProjects) {
-      // For project contexts, still pass entity type information
-      return baseParams;
-    }
-
-    return {
-      ...baseParams,
-      // Always pass both giver and recipient info for context preservation
-      giverProjectId: this.fromProjectId || "",
-      giverProjectName: this.giver?.name || "",
-      giverProjectImage: this.giver?.image || "",
-      giverProjectHandleId: this.giver?.handleId || "",
-      giverDid: this.giverEntityType === "person" ? this.giver?.did || "" : "",
-      recipientProjectId: this.toProjectId || "",
-      recipientProjectName: this.receiver?.name || "",
-      recipientProjectImage: this.receiver?.image || "",
-      recipientProjectHandleId: this.receiver?.handleId || "",
-      recipientDid:
-        this.recipientEntityType === "person" ? this.receiver?.did || "" : "",
-    };
-  }
-
   /**
    * Handle entity selection from EntityGrid
    */

src/components/FeedFilters.vue

@@ -211,8 +211,6 @@ export default class FeedFilters extends Vue {
 }
 </script>
 
-<style>
-#dialogFeedFilters.dialog-overlay {
-  overflow: scroll;
-}
+<style scoped>
+/* Component-specific styles if needed */
 </style>

src/components/GiftedDialog.vue

@@ -29,7 +29,6 @@
         :unit-code="unitCode"
         :offer-id="offerId"
         :notify="$notify"
-        :hide-show-all="hideShowAll"
         @entity-selected="handleEntitySelected"
         @cancel="cancel"
       />
@@ -117,7 +116,6 @@ export default class GiftedDialog extends Vue {
   @Prop() fromProjectId = "";
   @Prop() toProjectId = "";
   @Prop() isFromProjectView = false;
-  @Prop() hideShowAll = false;
   @Prop({ default: "person" }) giverEntityType = "person" as
     | "person"
     | "project";
@@ -233,7 +231,7 @@ export default class GiftedDialog extends Vue {
         apiServer: this.apiServer,
       });
 
-      this.allContacts = await this.$contacts();
+      this.allContacts = await this.$contactsByDateAdded();
 
       this.allMyDids = await retrieveAccountDids();
 

src/components/MembersList.vue

@@ -1,183 +1,256 @@
 <template>
-  <div class="space-y-4">
-    <!-- Loading State -->
-    <div
-      v-if="isLoading"
-      class="mt-16 text-center text-4xl bg-slate-400 text-white w-14 py-2.5 rounded-full mx-auto"
-    >
-      <font-awesome icon="spinner" class="fa-spin-pulse" />
-    </div>
-
-    <!-- Members List -->
-
-    <div v-else>
-      <div class="text-center text-red-600 py-4">
-        {{ decryptionErrorMessage() }}
+  <div>
+    <div class="space-y-4">
+      <!-- Loading State -->
+      <div
+        v-if="isLoading"
+        class="mt-16 text-center text-4xl bg-slate-400 text-white w-14 py-2.5 rounded-full mx-auto"
+      >
+        <font-awesome icon="spinner" class="fa-spin-pulse" />
       </div>
 
-      <div v-if="missingMyself" class="py-4 text-red-600">
-        You are not currently admitted by the organizer.
-      </div>
-      <div v-if="!firstName" class="py-4 text-red-600">
-        Your name is not set, so others may not recognize you. Reload this page
-        to set it.
-      </div>
+      <!-- Members List -->
 
-      <div>
-        <span
-          v-if="membersToShow().length > 0 && showOrganizerTools && isOrganizer"
-          class="inline-flex items-center flex-wrap"
-        >
-          <span class="inline-flex items-center">
-            &bull; Click
-            <span
-              class="mx-2 min-w-[24px] min-h-[24px] w-6 h-6 flex items-center justify-center rounded-full bg-blue-100 text-blue-600"
-            >
-              <font-awesome icon="plus" class="text-sm" />
-            </span>
-            /
-            <span
-              class="mx-2 min-w-[24px] min-h-[24px] w-6 h-6 flex items-center justify-center rounded-full bg-blue-100 text-blue-600"
-            >
-              <font-awesome icon="minus" class="text-sm" />
-            </span>
-            to add/remove them to/from the meeting.
-          </span>
-        </span>
-      </div>
-      <div>
-        <span
-          v-if="membersToShow().length > 0"
-          class="inline-flex items-center"
-        >
-          &bull; Click
-          <span
-            class="mx-2 w-8 h-8 flex items-center justify-center rounded-full bg-green-100 text-green-600"
+      <div v-else>
+        <div class="text-center text-red-600 my-4">
+          {{ decryptionErrorMessage() }}
+        </div>
+
+        <div v-if="missingMyself" class="py-4 text-red-600">
+          You are not currently admitted by the organizer.
+        </div>
+        <div v-if="!firstName" class="py-4 text-red-600">
+          Your name is not set, so others may not recognize you. Reload this
+          page to set it.
+        </div>
+
+        <ul class="list-disc text-sm ps-4 space-y-2 mb-4">
+          <li
+            v-if="
+              membersToShow().length > 0 && showOrganizerTools && isOrganizer
+            "
           >
-            <font-awesome icon="circle-user" class="text-xl" />
-          </span>
-          to add them to your contacts.
-        </span>
-      </div>
+            Click
+            <font-awesome icon="circle-plus" class="text-blue-500 text-sm" />
+            /
+            <font-awesome icon="circle-minus" class="text-rose-500 text-sm" />
+            to add/remove them to/from the meeting.
+          </li>
+          <li
+            v-if="
+              membersToShow().length > 0 && getNonContactMembers().length > 0
+            "
+          >
+            Click
+            <font-awesome icon="circle-user" class="text-green-600 text-sm" />
+            to add them to your contacts.
+          </li>
+        </ul>
 
-      <div class="flex justify-center">
-        <!-- 
+        <div class="flex justify-between">
+          <!-- 
         always have at least one refresh button even without members in case the organizer 
          changes the password 
          -->
-        <button
-          class="btn-action-refresh"
-          title="Refresh members list"
-          @click="fetchMembers"
-        >
-          <font-awesome icon="rotate" :class="{ 'fa-spin': isLoading }" />
-        </button>
-      </div>
-      <div
-        v-for="member in membersToShow()"
-        :key="member.member.memberId"
-        class="mt-2 p-4 bg-gray-50 rounded-lg"
-      >
-        <div class="flex items-center justify-between">
-          <div class="flex items-center">
-            <h3 class="text-lg font-medium">
-              {{ member.name || unnamedMember }}
-            </h3>
-            <div
-              v-if="!getContactFor(member.did) && member.did !== activeDid"
-              class="flex justify-end"
-            >
-              <button
-                class="btn-add-contact"
-                title="Add as contact"
-                @click="addAsContact(member)"
-              >
-                <font-awesome icon="circle-user" class="text-xl" />
-              </button>
-            </div>
-            <button
-              v-if="member.did !== activeDid"
-              class="btn-info-contact"
-              title="Contact info"
-              @click="
-                informAboutAddingContact(
-                  getContactFor(member.did) !== undefined,
-                )
-              "
-            >
-              <font-awesome icon="circle-info" class="text-base" />
-            </button>
-          </div>
-          <div class="flex">
-            <span
-              v-if="
-                showOrganizerTools && isOrganizer && member.did !== activeDid
-              "
-              class="flex items-center"
-            >
-              <button
-                class="btn-admission"
-                :title="
-                  member.member.admitted ? 'Remove member' : 'Admit member'
-                "
-                @click="checkWhetherContactBeforeAdmitting(member)"
-              >
-                <font-awesome
-                  :icon="member.member.admitted ? 'minus' : 'plus'"
-                  class="text-sm"
-                />
-              </button>
-              <button
-                class="btn-info-admission"
-                title="Admission info"
-                @click="informAboutAdmission()"
-              >
-                <font-awesome icon="circle-info" class="text-base" />
-              </button>
-            </span>
-          </div>
+          <button
+            class="text-sm bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-3 py-1.5 rounded-md"
+            title="Refresh members list now"
+            @click="refreshData(false)"
+          >
+            <font-awesome icon="rotate" :class="{ 'fa-spin': isLoading }" />
+            Refresh
+            <span class="text-xs">({{ countdownTimer }}s)</span>
+          </button>
         </div>
-        <p class="text-sm text-gray-600 truncate">
-          {{ member.did }}
+        <ul
+          v-if="membersToShow().length > 0"
+          class="border-t border-slate-300 my-2"
+        >
+          <li
+            v-for="member in membersToShow()"
+            :key="member.member.memberId"
+            :class="[
+              'border-b px-2 sm:px-3 py-1.5',
+              {
+                'bg-blue-50 border-t border-blue-300 -mt-[1px]':
+                  !member.member.admitted &&
+                  (isOrganizer || member.did === activeDid),
+              },
+              { 'border-slate-300': member.member.admitted },
+            ]"
+          >
+            <div class="flex items-center gap-2 justify-between">
+              <div class="flex items-center gap-1 overflow-hidden">
+                <h3
+                  :class="[
+                    'font-semibold truncate',
+                    {
+                      'text-slate-500':
+                        !member.member.admitted &&
+                        (isOrganizer || member.did === activeDid),
+                    },
+                  ]"
+                >
+                  <font-awesome
+                    v-if="member.member.memberId === members[0]?.memberId"
+                    icon="crown"
+                    class="fa-fw text-amber-400"
+                  />
+                  <font-awesome
+                    v-if="member.did === activeDid"
+                    icon="hand"
+                    class="fa-fw text-slate-500"
+                  />
+                  <font-awesome
+                    v-if="
+                      !member.member.admitted &&
+                      (isOrganizer || member.did === activeDid)
+                    "
+                    icon="hourglass-half"
+                    class="fa-fw text-slate-400"
+                  />
+                  {{ member.name || unnamedMember }}
+                </h3>
+                <div
+                  v-if="!getContactFor(member.did) && member.did !== activeDid"
+                  class="flex items-center gap-1.5 ml-2 ms-1"
+                >
+                  <button
+                    class="btn-add-contact ml-2"
+                    title="Add as contact"
+                    @click="addAsContact(member)"
+                  >
+                    <font-awesome icon="circle-user" />
+                  </button>
+
+                  <button
+                    class="btn-info-contact ml-2"
+                    title="Contact Info"
+                    @click="
+                      informAboutAddingContact(
+                        getContactFor(member.did) !== undefined,
+                      )
+                    "
+                  >
+                    <font-awesome icon="circle-info" />
+                  </button>
+                </div>
+                <div
+                  v-if="getContactFor(member.did) && member.did !== activeDid"
+                  class="flex items-center gap-1.5 ms-1"
+                >
+                  <router-link
+                    :to="{ name: 'contact-edit', params: { did: member.did } }"
+                  >
+                    <font-awesome
+                      icon="pen"
+                      class="text-sm text-blue-500 ml-2 mb-1"
+                    />
+                  </router-link>
+                  <router-link
+                    :to="{ name: 'did', params: { did: member.did } }"
+                  >
+                    <font-awesome
+                      icon="arrow-up-right-from-square"
+                      class="text-sm text-blue-500 ml-2 mb-1"
+                    />
+                  </router-link>
+                </div>
+              </div>
+              <span
+                v-if="
+                  showOrganizerTools && isOrganizer && member.did !== activeDid
+                "
+                class="flex items-center gap-1.5"
+              >
+                <button
+                  :class="
+                    member.member.admitted
+                      ? 'btn-admission-remove'
+                      : 'btn-admission-add'
+                  "
+                  :title="
+                    member.member.admitted ? 'Remove member' : 'Admit member'
+                  "
+                  @click="checkWhetherContactBeforeAdmitting(member)"
+                >
+                  <font-awesome
+                    :icon="
+                      member.member.admitted ? 'circle-minus' : 'circle-plus'
+                    "
+                  />
+                </button>
+
+                <button
+                  class="btn-info-admission"
+                  title="Admission Info"
+                  @click="informAboutAdmission()"
+                >
+                  <font-awesome icon="circle-info" />
+                </button>
+              </span>
+            </div>
+            <p class="text-xs text-gray-600 truncate">
+              {{ member.did }}
+            </p>
+          </li>
+        </ul>
+
+        <div v-if="membersToShow().length > 0" class="flex justify-between">
+          <!-- 
+        always have at least one refresh button even without members in case the organizer 
+         changes the password 
+         -->
+          <button
+            class="text-sm bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-3 py-1.5 rounded-md"
+            title="Refresh members list now"
+            @click="refreshData(false)"
+          >
+            <font-awesome icon="rotate" :class="{ 'fa-spin': isLoading }" />
+            Refresh
+            <span class="text-xs">({{ countdownTimer }}s)</span>
+          </button>
+        </div>
+
+        <p v-if="members.length === 0" class="text-gray-500 py-4">
+          No members have joined this meeting yet
         </p>
       </div>
-      <div v-if="membersToShow().length > 0" class="flex justify-center mt-4">
-        <button
-          class="btn-action-refresh"
-          title="Refresh members list"
-          @click="fetchMembers"
-        >
-          <font-awesome icon="rotate" :class="{ 'fa-spin': isLoading }" />
-        </button>
-      </div>
-
-      <p v-if="members.length === 0" class="text-gray-500 py-4">
-        No members have joined this meeting yet
-      </p>
     </div>
+
+    <!-- Bulk Members Dialog for both admitting and setting visibility -->
+    <BulkMembersDialog
+      ref="bulkMembersDialog"
+      :active-did="activeDid"
+      :api-server="apiServer"
+      :dialog-type="isOrganizer ? 'admit' : 'visibility'"
+      :is-organizer="isOrganizer"
+      @close="closeBulkMembersDialogCallback"
+    />
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue, Prop, Emit } from "vue-facing-decorator";
 
-import {
-  errorStringForLog,
-  getHeaders,
-  register,
-  serverMessageForUser,
-} from "../libs/endorserServer";
-import { decryptMessage } from "../libs/crypto";
-import { Contact } from "../db/tables/contacts";
-import * as libsUtil from "../libs/util";
-import { NotificationIface } from "../constants/app";
-import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
-import { createNotifyHelpers, TIMEOUTS } from "@/utils/notify";
+import { NotificationIface } from "@/constants/app";
 import {
   NOTIFY_ADD_CONTACT_FIRST,
   NOTIFY_CONTINUE_WITHOUT_ADDING,
 } from "@/constants/notifications";
 import { SOMEONE_UNNAMED } from "@/constants/entities";
+import {
+  errorStringForLog,
+  getHeaders,
+  register,
+  serverMessageForUser,
+} from "@/libs/endorserServer";
+import { decryptMessage } from "@/libs/crypto";
+import { Contact } from "@/db/tables/contacts";
+import { MemberData } from "@/interfaces";
+import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
+import { createNotifyHelpers, TIMEOUTS } from "@/utils/notify";
+import BulkMembersDialog from "./BulkMembersDialog.vue";
 
 interface Member {
   admitted: boolean;
@@ -193,13 +266,15 @@ interface DecryptedMember {
 }
 
 @Component({
+  components: {
+    BulkMembersDialog,
+  },
   mixins: [PlatformServiceMixin],
 })
 export default class MembersList extends Vue {
   $notify!: (notification: NotificationIface, timeout?: number) => void;
 
   notify!: ReturnType<typeof createNotifyHelpers>;
-  libsUtil = libsUtil;
 
   @Prop({ required: true }) password!: string;
   @Prop({ default: false }) showOrganizerTools!: boolean;
@@ -210,6 +285,7 @@ export default class MembersList extends Vue {
     return message;
   }
 
+  contacts: Array<Contact> = [];
   decryptedMembers: DecryptedMember[] = [];
   firstName = "";
   isLoading = true;
@@ -219,7 +295,12 @@ export default class MembersList extends Vue {
   missingMyself = false;
   activeDid = "";
   apiServer = "";
-  contacts: Array<Contact> = [];
+
+  // Auto-refresh functionality
+  countdownTimer = 10;
+  autoRefreshInterval: NodeJS.Timeout | null = null;
+  lastRefreshTime = 0;
+  previousMemberDidsIgnored: string[] = [];
 
   /**
    * Get the unnamed member constant
@@ -240,8 +321,8 @@ export default class MembersList extends Vue {
 
     this.apiServer = settings.apiServer || "";
     this.firstName = settings.firstName || "";
-    await this.fetchMembers();
-    await this.loadContacts();
+
+    this.refreshData();
   }
 
   async fetchMembers() {
@@ -287,7 +368,10 @@ export default class MembersList extends Vue {
         const content = JSON.parse(decryptedContent);
 
         this.decryptedMembers.push({
-          member: member,
+          member: {
+            ...member,
+            admitted: member.admitted !== undefined ? member.admitted : true, // Default to true for non-organizers
+          },
           name: content.name,
           did: content.did,
           isRegistered: !!content.isRegistered,
@@ -329,22 +413,81 @@ export default class MembersList extends Vue {
   }
 
   membersToShow(): DecryptedMember[] {
+    let members: DecryptedMember[] = [];
+
     if (this.isOrganizer) {
       if (this.showOrganizerTools) {
-        return this.decryptedMembers;
+        members = this.decryptedMembers;
       } else {
-        return this.decryptedMembers.filter(
+        members = this.decryptedMembers.filter(
           (member: DecryptedMember) => member.member.admitted,
         );
       }
+    } else {
+      // non-organizers only get visible members from server, plus themselves
+
+      // Check if current user is already in the decrypted members list
+      if (
+        !this.decryptedMembers.find((member) => member.did === this.activeDid)
+      ) {
+        // this is a stub for this user just in case they are waiting to get in
+        // which is especially useful so they can see their own DID
+        const currentUser: DecryptedMember = {
+          member: {
+            admitted: false,
+            content: "{}",
+            memberId: -1,
+          },
+          name: this.firstName,
+          did: this.activeDid,
+          isRegistered: false,
+        };
+        members = [currentUser, ...this.decryptedMembers];
+      } else {
+        members = this.decryptedMembers;
+      }
     }
-    // non-organizers only get visible members from server
-    return this.decryptedMembers;
+
+    // Sort members according to priority:
+    // 1. Organizer at the top
+    // 2. Current user next
+    // 3. Non-admitted members next
+    // 4. Everyone else after
+    return members.sort((a, b) => {
+      // Check if either member is the organizer (first member in original list)
+      const aIsOrganizer = a.member.memberId === this.members[0]?.memberId;
+      const bIsOrganizer = b.member.memberId === this.members[0]?.memberId;
+
+      // Check if either member is the current user
+      const aIsCurrentUser = a.did === this.activeDid;
+      const bIsCurrentUser = b.did === this.activeDid;
+
+      // Organizer always comes first
+      if (aIsOrganizer && !bIsOrganizer) return -1;
+      if (!aIsOrganizer && bIsOrganizer) return 1;
+
+      // If both are organizers, maintain original order
+      if (aIsOrganizer && bIsOrganizer) return 0;
+
+      // Current user comes second (after organizer)
+      if (aIsCurrentUser && !bIsCurrentUser && !bIsOrganizer) return -1;
+      if (!aIsCurrentUser && bIsCurrentUser && !aIsOrganizer) return 1;
+
+      // If both are current users, maintain original order
+      if (aIsCurrentUser && bIsCurrentUser) return 0;
+
+      // Non-admitted members come before admitted members
+      if (!a.member.admitted && b.member.admitted) return -1;
+      if (a.member.admitted && !b.member.admitted) return 1;
+
+      // If admission status is the same, maintain original order
+      return 0;
+    });
   }
 
   informAboutAdmission() {
     this.notify.info(
-      "This is to register people in Time Safari and to admit them to the meeting. A '+' symbol means they are not yet admitted and you can register and admit them. A '-' means you can remove them, but they will stay registered.",
+      "This is to register people in Time Safari and to admit them to the meeting. A (+) symbol means they are not yet admitted and you can register and admit them. A (-) symbol means you can remove them, but they will stay registered.",
       TIMEOUTS.VERY_LONG,
     );
   }
@@ -363,18 +506,85 @@ export default class MembersList extends Vue {
     }
   }
 
-  async loadContacts() {
-    this.contacts = await this.$getAllContacts();
-  }
-
   getContactFor(did: string): Contact | undefined {
     return this.contacts.find((contact) => contact.did === did);
   }
 
+  getPendingMembersToAdmit(): MemberData[] {
+    return this.decryptedMembers
+      .filter(
+        (member) => member.did !== this.activeDid && !member.member.admitted,
+      )
+      .map(this.convertDecryptedMemberToMemberData);
+  }
+
+  getNonContactMembers(): MemberData[] {
+    return this.decryptedMembers
+      .filter(
+        (member) =>
+          member.did !== this.activeDid && !this.getContactFor(member.did),
+      )
+      .map(this.convertDecryptedMemberToMemberData);
+  }
+
+  convertDecryptedMemberToMemberData(
+    decryptedMember: DecryptedMember,
+  ): MemberData {
+    return {
+      did: decryptedMember.did,
+      name: decryptedMember.name,
+      isContact: !!this.getContactFor(decryptedMember.did),
+      member: {
+        memberId: decryptedMember.member.memberId.toString(),
+      },
+    };
+  }
+
+  /**
+   * Show the bulk members dialog if conditions are met
+   * (admit pending members for organizers, add to contacts for non-organizers)
+   */
+  async refreshData(bypassPromptIfAllWereIgnored = true) {
+    // Force refresh both contacts and members
+    this.contacts = await this.$getAllContacts();
+    await this.fetchMembers();
+
+    const pendingMembers = this.isOrganizer
+      ? this.getPendingMembersToAdmit()
+      : this.getNonContactMembers();
+    if (pendingMembers.length === 0) {
+      this.startAutoRefresh();
+      return;
+    }
+    if (bypassPromptIfAllWereIgnored) {
+      // only show if there are members that have not been ignored
+      const pendingMembersNotIgnored = pendingMembers.filter(
+        (member) => !this.previousMemberDidsIgnored.includes(member.did),
+      );
+      if (pendingMembersNotIgnored.length === 0) {
+        this.startAutoRefresh();
+        // everyone waiting has been ignored
+        return;
+      }
+    }
+    this.stopAutoRefresh();
+    (this.$refs.bulkMembersDialog as BulkMembersDialog).open(pendingMembers);
+  }
+
+  // Bulk Members Dialog methods
+  async closeBulkMembersDialogCallback(
+    result: { notSelectedMemberDids: string[] } | undefined,
+  ) {
+    this.previousMemberDidsIgnored = result?.notSelectedMemberDids || [];
+
+    await this.refreshData();
+  }
+
   checkWhetherContactBeforeAdmitting(decrMember: DecryptedMember) {
     const contact = this.getContactFor(decrMember.did);
     if (!decrMember.member.admitted && !contact) {
-      // If not a contact, show confirmation dialog
+      // If not a contact, stop auto-refresh and show confirmation dialog
+      this.stopAutoRefresh();
       this.$notify(
         {
           group: "modal",
@@ -387,6 +597,7 @@ export default class MembersList extends Vue {
             await this.addAsContact(decrMember);
             // After adding as contact, proceed with admission
             await this.toggleAdmission(decrMember);
+            this.startAutoRefresh();
           },
           onNo: async () => {
             // If they choose not to add as contact, show second confirmation
@@ -399,14 +610,19 @@ export default class MembersList extends Vue {
                 yesText: NOTIFY_CONTINUE_WITHOUT_ADDING.yesText,
                 onYes: async () => {
                   await this.toggleAdmission(decrMember);
+                  this.startAutoRefresh();
                 },
                 onCancel: async () => {
                   // Do nothing, effectively canceling the operation
+                  this.startAutoRefresh();
                 },
               },
               TIMEOUTS.MODAL,
             );
           },
+          onCancel: async () => {
+            this.startAutoRefresh();
+          },
         },
         TIMEOUTS.MODAL,
       );
@@ -508,6 +724,41 @@ export default class MembersList extends Vue {
       this.notify.error(message, TIMEOUTS.LONG);
     }
   }
+
+  startAutoRefresh() {
+    this.stopAutoRefresh();
+    this.lastRefreshTime = Date.now();
+    this.countdownTimer = 10;
+
+    this.autoRefreshInterval = setInterval(() => {
+      const now = Date.now();
+      const timeSinceLastRefresh = (now - this.lastRefreshTime) / 1000;
+
+      if (timeSinceLastRefresh >= 10) {
+        // Time to refresh
+        this.refreshData();
+        this.lastRefreshTime = now;
+        this.countdownTimer = 10;
+      } else {
+        // Update countdown
+        this.countdownTimer = Math.max(
+          0,
+          Math.round(10 - timeSinceLastRefresh),
+        );
+      }
+    }, 1000); // Update every second
+  }
+
+  stopAutoRefresh() {
+    if (this.autoRefreshInterval) {
+      clearInterval(this.autoRefreshInterval);
+      this.autoRefreshInterval = null;
+    }
+  }
+
+  beforeDestroy() {
+    this.stopAutoRefresh();
+  }
 }
 </script>
 
@@ -522,29 +773,26 @@ export default class MembersList extends Vue {
 
 .btn-add-contact {
   /* stylelint-disable-next-line at-rule-no-unknown */
-  @apply ml-2 w-8 h-8 flex items-center justify-center rounded-full 
-    bg-green-100 text-green-600 hover:bg-green-200 hover:text-green-800 
-    transition-colors;
-}
-
-.btn-info-contact {
-  /* stylelint-disable-next-line at-rule-no-unknown */
-  @apply ml-2 mb-2 w-6 h-6 flex items-center justify-center rounded-full 
-    bg-slate-100 text-slate-500 hover:bg-slate-200 hover:text-slate-800 
-    transition-colors;
-}
-
-.btn-admission {
-  /* stylelint-disable-next-line at-rule-no-unknown */
-  @apply mr-2 w-6 h-6 flex items-center justify-center rounded-full 
-    bg-blue-100 text-blue-600 hover:bg-blue-200 hover:text-blue-800 
+  @apply text-lg text-green-600 hover:text-green-800 
     transition-colors;
 }
 
+.btn-info-contact,
 .btn-info-admission {
   /* stylelint-disable-next-line at-rule-no-unknown */
-  @apply mr-2 mb-2 w-6 h-6 flex items-center justify-center rounded-full 
-    bg-slate-100 text-slate-500 hover:bg-slate-200 hover:text-slate-800 
+  @apply text-slate-400 hover:text-slate-600 
+    transition-colors;
+}
+
+.btn-admission-add {
+  /* stylelint-disable-next-line at-rule-no-unknown */
+  @apply text-lg text-blue-500 hover:text-blue-700 
+    transition-colors;
+}
+
+.btn-admission-remove {
+  /* stylelint-disable-next-line at-rule-no-unknown */
+  @apply text-lg text-rose-500 hover:text-rose-700 
     transition-colors;
 }
 </style>

src/components/PersonCard.vue

@@ -3,30 +3,25 @@ GiftedDialog.vue to handle person entity display * with selection states and
 conflict detection. * * @author Matthew Raymer */
 <template>
   <li :class="cardClasses" @click="handleClick">
-    <div class="relative w-fit mx-auto">
+    <div>
       <EntityIcon
         v-if="person.did"
         :contact="person"
-        class="!size-[3rem] mx-auto border border-slate-300 bg-white overflow-hidden rounded-full mb-1"
+        class="!size-[2rem] shrink-0 border border-slate-300 bg-white overflow-hidden rounded-full"
       />
       <font-awesome
         v-else
         icon="circle-question"
-        class="text-slate-400 text-5xl mb-1"
+        class="text-slate-400 text-5xl mb-1 shrink-0"
       />
-
-      <!-- Time icon overlay for contacts -->
-      <div
-        v-if="person.did && showTimeIcon"
-        class="rounded-full bg-slate-400 absolute bottom-0 right-0 p-1 translate-x-1/3"
-      >
-        <font-awesome icon="clock" class="block text-white text-xs w-[1em]" />
-      </div>
     </div>
 
-    <h3 :class="nameClasses">
-      {{ displayName }}
-    </h3>
+    <div class="overflow-hidden">
+      <h3 :class="nameClasses">
+        {{ displayName }}
+      </h3>
+      <p class="text-xs text-slate-500 truncate">{{ person.did }}</p>
+    </div>
   </li>
 </template>
 
@@ -81,29 +76,32 @@ export default class PersonCard extends Vue {
    * Computed CSS classes for the card
    */
   get cardClasses(): string {
+    const baseCardClasses =
+      "flex items-center gap-2 px-2 py-1.5 border-b border-slate-300";
+
     if (!this.selectable || this.conflicted) {
-      return "opacity-50 cursor-not-allowed";
+      return `${baseCardClasses} *:opacity-50 cursor-not-allowed`;
     }
-    return "cursor-pointer hover:bg-slate-50";
+
+    return `${baseCardClasses} cursor-pointer hover:bg-slate-50`;
   }
 
   /**
    * Computed CSS classes for the person name
    */
   get nameClasses(): string {
-    const baseClasses =
-      "text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden";
+    const baseNameClasses = "text-sm font-semibold truncate";
 
     if (this.conflicted) {
-      return `${baseClasses} text-slate-400`;
+      return `${baseNameClasses} text-slate-500`;
     }
 
     // Add italic styling for entities without set names
     if (!this.person.name) {
-      return `${baseClasses} italic text-slate-500`;
+      return `${baseNameClasses} italic text-slate-500`;
     }
 
-    return baseClasses;
+    return baseNameClasses;
   }
 
   /**

src/components/ProjectCard.vue

@@ -2,25 +2,26 @@
 GiftedDialog.vue to handle project entity display * with selection states and
 issuer information. * * @author Matthew Raymer */
 <template>
-  <li class="cursor-pointer" @click="handleClick">
-    <div class="relative w-fit mx-auto">
-      <ProjectIcon
-        :entity-id="project.handleId"
-        :icon-size="48"
-        :image-url="project.image"
-        class="!size-[3rem] mx-auto border border-slate-300 bg-white overflow-hidden rounded-full mb-1"
-      />
-    </div>
+  <li
+    class="flex items-center gap-2 px-2 py-1.5 border-b border-slate-300 hover:bg-slate-50 cursor-pointer"
+    @click="handleClick"
+  >
+    <ProjectIcon
+      :entity-id="project.handleId"
+      :icon-size="48"
+      :image-url="project.image"
+      class="!size-[2rem] shrink-0 border border-slate-300 bg-white overflow-hidden rounded-full"
+    />
 
-    <h3
-      class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden"
-    >
-      {{ project.name || unnamedProject }}
-    </h3>
+    <div class="overflow-hidden">
+      <h3 class="text-sm font-semibold truncate">
+        {{ project.name || unnamedProject }}
+      </h3>
 
-    <div class="text-xs text-slate-500 truncate">
-      <font-awesome icon="user" class="fa-fw text-slate-400" />
-      {{ issuerDisplayName }}
+      <div class="text-xs text-slate-500 truncate">
+        <font-awesome icon="user" class="text-slate-400" />
+        {{ issuerDisplayName }}
+      </div>
     </div>
   </li>
 </template>

src/components/ShowAllCard.vue

@@ -1,66 +0,0 @@
-/** * ShowAllCard.vue - Show All navigation card component * * Extracted from
-GiftedDialog.vue to handle "Show All" navigation * for both people and projects
-entity types. * * @author Matthew Raymer */
-<template>
-  <li class="cursor-pointer">
-    <router-link :to="navigationRoute" class="block text-center">
-      <font-awesome icon="circle-right" class="text-blue-500 text-5xl mb-1" />
-      <h3
-        class="text-xs text-slate-500 font-medium italic text-ellipsis whitespace-nowrap overflow-hidden"
-      >
-        Show All
-      </h3>
-    </router-link>
-  </li>
-</template>
-
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-facing-decorator";
-import { RouteLocationRaw } from "vue-router";
-
-/**
- * ShowAllCard - Displays "Show All" navigation for entity grids
- *
- * Features:
- * - Provides navigation to full entity listings
- * - Supports different routes based on entity type
- * - Maintains context through query parameters
- * - Consistent visual styling with other cards
- */
-@Component({ name: "ShowAllCard" })
-export default class ShowAllCard extends Vue {
-  /** Type of entities being shown */
-  @Prop({ required: true })
-  entityType!: "people" | "projects";
-
-  /** Route name to navigate to */
-  @Prop({ required: true })
-  routeName!: string;
-
-  /** Query parameters to pass to the route */
-  @Prop({ default: () => ({}) })
-  queryParams!: Record<string, string>;
-
-  /**
-   * Computed navigation route with query parameters
-   */
-  get navigationRoute(): RouteLocationRaw {
-    return {
-      name: this.routeName,
-      query: this.queryParams,
-    };
-  }
-}
-</script>
-
-<style scoped>
-/* Ensure router-link styling is consistent */
-a {
-  text-decoration: none;
-}
-
-a:hover .fa-circle-right {
-  transform: scale(1.1);
-  transition: transform 0.2s ease;
-}
-</style>

src/components/SpecialEntityCard.vue

@@ -63,23 +63,24 @@ export default class SpecialEntityCard extends Vue {
   conflictContext!: string;
 
   /**
-   * Computed CSS classes for the card container
+   * Computed CSS classes for the card
    */
   get cardClasses(): string {
-    const baseClasses = "block";
+    const baseCardClasses =
+      "flex items-center gap-2 px-2 py-1.5 border-b border-slate-300";
 
     if (!this.selectable || this.conflicted) {
-      return `${baseClasses} cursor-not-allowed opacity-50`;
+      return `${baseCardClasses} *:opacity-50 cursor-not-allowed`;
     }
 
-    return `${baseClasses} cursor-pointer`;
+    return `${baseCardClasses} cursor-pointer hover:bg-slate-50`;
   }
 
   /**
    * Computed CSS classes for the icon
    */
   get iconClasses(): string {
-    const baseClasses = "text-5xl mb-1";
+    const baseClasses = "text-[2rem]";
 
     if (this.conflicted) {
       return `${baseClasses} text-slate-400`;
@@ -101,7 +102,7 @@ export default class SpecialEntityCard extends Vue {
    */
   get nameClasses(): string {
     const baseClasses =
-      "text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden";
+      "text-sm font-semibold text-ellipsis whitespace-nowrap overflow-hidden";
 
     if (this.conflicted) {
       return `${baseClasses} text-slate-400`;

src/components/TopMessage.vue

@@ -1,16 +1,9 @@
 <template>
   <div
-    class="absolute right-5 top-[max(0.75rem,env(safe-area-inset-top),var(--safe-area-inset-top,0px))]"
+    v-if="message"
+    class="-mt-6 bg-rose-100 border border-t-0 border-dashed border-rose-600 text-rose-900 text-sm text-center font-semibold rounded-b-md px-3 py-2 mb-3"
   >
-    <span class="align-center text-red-500 mr-2">{{ message }}</span>
-    <span class="ml-2">
-      <router-link
-        :to="{ name: 'help' }"
-        class="text-xs uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-1 rounded-md ml-1"
-      >
-        Help
-      </router-link>
-    </span>
+    {{ message }}
   </div>
 </template>
 
@@ -27,7 +20,7 @@ import { logger } from "../utils/logger";
 })
 export default class TopMessage extends Vue {
   // Enhanced PlatformServiceMixin v4.0 provides:
-  // - Cached database operations: this.$contacts(), this.$settings(), this.$accountSettings()
+  // - Cached database operations: this.$contacts(), this.$accountSettings()
   // - Settings shortcuts: this.$saveSettings()
   // - Cache management: this.$refreshSettings(), this.$clearAllCaches()
   // - Ultra-concise database methods: this.$db(), this.$exec(), this.$query()

src/constants/accountView.ts

@@ -86,7 +86,7 @@ export const ACCOUNT_VIEW_CONSTANTS = {
     CANNOT_UPLOAD_IMAGES: "You cannot upload images.",
     BAD_SERVER_RESPONSE: "Bad server response.",
     ERROR_RETRIEVING_LIMITS:
-      "No limits were found, so no actions are allowed. You will need to get registered.",
+      "No limits were found, so no actions are allowed. You need to get registered.",
   },
 
   // Project assignment errors

src/constants/app.ts

@@ -59,7 +59,7 @@ export const PASSKEYS_ENABLED =
 export interface NotificationIface {
   group: string; // "alert" | "modal"
   type: string; // "toast" | "info" | "success" | "warning" | "danger"
-  title: string;
+  title?: string;
   text?: string;
   callback?: (success: boolean) => Promise<void>; // if this triggered an action
   noText?: string;
@@ -68,4 +68,11 @@ export interface NotificationIface {
   onYes?: () => Promise<void>;
   promptToStopAsking?: boolean;
   yesText?: string;
+  membersData?: Array<{
+    member: { admitted: boolean; content: string; memberId: number };
+    name: string;
+    did: string;
+    isContact: boolean;
+    contact?: { did: string; name?: string; seesMe?: boolean };
+  }>; // For passing member data to visibility dialog
 }

src/constants/notifications.ts

@@ -510,14 +510,6 @@ export const NOTIFY_REGISTER_CONTACT = {
   text: "Do you want to register them?",
 };
 
-// Used in: ContactsView.vue (showOnboardMeetingDialog method - complex modal for onboarding meeting)
-export const NOTIFY_ONBOARDING_MEETING = {
-  title: "Onboarding Meeting",
-  text: "Would you like to start a new meeting?",
-  yesText: "Start New Meeting",
-  noText: "Join Existing Meeting",
-};
-
 // TestView.vue specific constants
 // Used in: TestView.vue (executeSql method - SQL error handling)
 export const NOTIFY_SQL_ERROR = {

src/db-sql/migration.ts

@@ -192,6 +192,13 @@ const MIGRATIONS = [
     name: "004_active_identity_management",
     sql: MIG_004_SQL,
   },
+  {
+    name: "005_add_starredPlanHandleIds_to_settings",
+    sql: `
+      ALTER TABLE settings ADD COLUMN starredPlanHandleIds TEXT DEFAULT '[]'; -- JSON string
+      ALTER TABLE settings ADD COLUMN lastAckedStarredPlanChangesJwtId TEXT;
+    `,
+  },
 ];
 
 /**
@@ -227,32 +234,20 @@ export async function runMigrations<T>(
   sqlQuery: (sql: string, params?: unknown[]) => Promise<T>,
   extractMigrationNames: (result: T) => Set<string>,
 ): Promise<void> {
-  // Only log migration start in development
-  const isDevelopment = process.env.VITE_PLATFORM === "development";
-  if (isDevelopment) {
-    logger.debug("[Migration] Starting database migrations");
-  }
+  logger.debug("[Migration] Starting database migrations");
 
   for (const migration of MIGRATIONS) {
-    if (isDevelopment) {
-      logger.debug("[Migration] Registering migration:", migration.name);
-    }
+    logger.debug("[Migration] Registering migration:", migration.name);
     registerMigration(migration);
   }
 
-  if (isDevelopment) {
-    logger.debug("[Migration] Running migration service");
-  }
+  logger.debug("[Migration] Running migration service");
   await runMigrationsService(sqlExec, sqlQuery, extractMigrationNames);
 
-  if (isDevelopment) {
-    logger.debug("[Migration] Database migrations completed");
-  }
+  logger.debug("[Migration] Database migrations completed");
 
   // Bootstrapping: Ensure active account is selected after migrations
-  if (isDevelopment) {
-    logger.debug("[Migration] Running bootstrapping hooks");
-  }
+  logger.debug("[Migration] Running bootstrapping hooks");
   try {
     // Check if we have accounts but no active selection
     const accountsResult = await sqlQuery("SELECT COUNT(*) FROM accounts");
@@ -267,18 +262,14 @@ export async function runMigrations<T>(
       activeDid = (extractSingleValue(activeResult) as string) || null;
     } catch (error) {
       // Table doesn't exist - migration 004 may not have run yet
-      if (isDevelopment) {
-        logger.debug(
-          "[Migration] active_identity table not found - migration may not have run",
-        );
-      }
+      logger.debug(
+        "[Migration] active_identity table not found - migration may not have run",
+      );
       activeDid = null;
     }
 
     if (accountsCount > 0 && (!activeDid || activeDid === "")) {
-      if (isDevelopment) {
-        logger.debug("[Migration] Auto-selecting first account as active");
-      }
+      logger.debug("[Migration] Auto-selecting first account as active");
       const firstAccountResult = await sqlQuery(
         "SELECT did FROM accounts ORDER BY dateCreated, did LIMIT 1",
       );

src/db/databaseUtil.ts

@@ -9,34 +9,6 @@ import { logger } from "@/utils/logger";
 import { DEFAULT_ENDORSER_API_SERVER } from "@/constants/app";
 import { QueryExecResult } from "@/interfaces/database";
 
-export async function updateDefaultSettings(
-  settingsChanges: Settings,
-): Promise<boolean> {
-  delete settingsChanges.accountDid; // just in case
-  // ensure there is no "id" that would override the key
-  delete settingsChanges.id;
-  try {
-    const platformService = PlatformServiceFactory.getInstance();
-    const { sql, params } = generateUpdateStatement(
-      settingsChanges,
-      "settings",
-      "id = ?",
-      [MASTER_SETTINGS_KEY],
-    );
-    const result = await platformService.dbExec(sql, params);
-    return result.changes === 1;
-  } catch (error) {
-    logger.error("Error updating default settings:", error);
-    if (error instanceof Error) {
-      throw error; // Re-throw if it's already an Error with a message
-    } else {
-      throw new Error(
-        `Failed to update settings. We recommend you try again or restart the app.`,
-      );
-    }
-  }
-}
-
 export async function insertDidSpecificSettings(
   did: string,
   settings: Partial<Settings> = {},
@@ -91,6 +63,7 @@ export async function updateDidSpecificSettings(
     ? mapColumnsToValues(postUpdateResult.columns, postUpdateResult.values)[0]
     : null;
 
+  // Note that we want to eliminate this check (and fix the above if it doesn't work).
   // Check if any of the target fields were actually changed
   let actuallyUpdated = false;
   if (currentRecord && updatedRecord) {
@@ -157,10 +130,11 @@ export async function retrieveSettingsForDefaultAccount(): Promise<Settings> {
       result.columns,
       result.values,
     )[0] as Settings;
-    if (settings.searchBoxes) {
-      // @ts-expect-error - the searchBoxes field is a string in the DB
-      settings.searchBoxes = JSON.parse(settings.searchBoxes);
-    }
+    settings.searchBoxes = parseJsonField(settings.searchBoxes, []);
+    settings.starredPlanHandleIds = parseJsonField(
+      settings.starredPlanHandleIds,
+      [],
+    );
     return settings;
   }
 }
@@ -226,10 +200,11 @@ export async function retrieveSettingsForActiveAccount(): Promise<Settings> {
         );
       }
 
-      // Handle searchBoxes parsing
-      if (settings.searchBoxes) {
-        settings.searchBoxes = parseJsonField(settings.searchBoxes, []);
-      }
+      settings.searchBoxes = parseJsonField(settings.searchBoxes, []);
+      settings.starredPlanHandleIds = parseJsonField(
+        settings.starredPlanHandleIds,
+        [],
+      );
 
       return settings;
     } catch (error) {

src/db/tables/settings.ts

@@ -43,6 +43,7 @@ export type Settings = {
 
   lastAckedOfferToUserJwtId?: string; // the last JWT ID for offer-to-user that they've acknowledged seeing
   lastAckedOfferToUserProjectsJwtId?: string; // the last JWT ID for offers-to-user's-projects that they've acknowledged seeing
+  lastAckedStarredPlanChangesJwtId?: string; // the last JWT ID for starred plan changes that they've acknowledged seeing
 
   // The claim list has a most recent one used in notifications that's separate from the last viewed
   lastNotifiedClaimId?: string;
@@ -67,15 +68,18 @@ export type Settings = {
   showContactGivesInline?: boolean; // Display contact inline or not
   showGeneralAdvanced?: boolean; // Show advanced features which don't have their own flag
   showShortcutBvc?: boolean; // Show shortcut for Bountiful Voluntaryist Community actions
+
+  starredPlanHandleIds?: string[]; // Array of starred plan handle 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
 };
 
-// type of settings where the searchBoxes are JSON strings instead of objects
+// type of settings where the values are JSON strings instead of objects
 export type SettingsWithJsonStrings = Settings & {
   searchBoxes: string;
+  starredPlanHandleIds: string;
 };
 
 export function checkIsAnyFeedFilterOn(settings: Settings): boolean {
@@ -92,6 +96,11 @@ export const SettingsSchema = {
 /**
  * Constants.
  */
+
+/**
+ * This is deprecated.
+ * It only remains for those with a PWA who have not migrated, but we'll soon remove it.
+ */
 export const MASTER_SETTINGS_KEY = "1";
 
 export const DEFAULT_PASSKEY_EXPIRATION_MINUTES = 15;

src/interfaces/claims.ts

@@ -14,6 +14,13 @@ export interface AgreeActionClaim extends ClaimObject {
   object: Record<string, unknown>;
 }
 
+export interface EmojiClaim extends ClaimObject {
+  // default context is "https://endorser.ch"
+  "@type": "Emoji";
+  text: string;
+  parentItem: { lastClaimId: string };
+}
+
 // Note that previous VCs may have additional fields.
 // https://endorser.ch/doc/html/transactions.html#id4
 export interface GiveActionClaim extends ClaimObject {
@@ -72,11 +79,15 @@ export interface PlanActionClaim extends ClaimObject {
   name: string;
   agent?: { identifier: string };
   description?: string;
+  endTime?: string;
   identifier?: string;
+  image?: string;
   lastClaimId?: string;
   location?: {
     geo: { "@type": "GeoCoordinates"; latitude: number; longitude: number };
   };
+  startTime?: string;
+  url?: string;
 }
 
 // AKA Registration & RegisterAction

src/interfaces/common.ts

@@ -70,18 +70,11 @@ export interface AxiosErrorResponse {
   [key: string]: unknown;
 }
 
-export interface UserInfo {
-  did: string;
-  name: string;
-  publicEncKey: string;
-  registered: boolean;
-  profileImageUrl?: string;
-  nextPublicEncKeyHash?: string;
-}
-
 export interface CreateAndSubmitClaimResult {
   success: boolean;
+  embeddedRecordError?: string;
   error?: string;
+  claimId?: string;
   handleId?: string;
 }
 

src/interfaces/index.ts

@@ -1,36 +1,7 @@
-export type {
-  // From common.ts
-  CreateAndSubmitClaimResult,
-  GenericCredWrapper,
-  GenericVerifiableCredential,
-  KeyMeta,
-  // Exclude types that are also exported from other files
-  // GiveVerifiableCredential,
-  // OfferVerifiableCredential,
-  // RegisterVerifiableCredential,
-  // PlanSummaryRecord,
-  // UserInfo,
-} from "./common";
-
-export type {
-  // From claims.ts
-  GiveActionClaim,
-  OfferClaim,
-  RegisterActionClaim,
-} from "./claims";
-
-export type {
-  // From records.ts
-  PlanSummaryRecord,
-} from "./records";
-
-export type {
-  // From user.ts
-  UserInfo,
-} from "./user";
-
-export * from "./limits";
-export * from "./deepLinks";
-export * from "./common";
+export * from "./claims";
 export * from "./claims-result";
+export * from "./common";
+export * from "./deepLinks";
+export * from "./limits";
 export * from "./records";
+export * from "./user";

src/interfaces/records.ts

@@ -1,13 +1,26 @@
-import { GiveActionClaim, OfferClaim } from "./claims";
+import { GiveActionClaim, OfferClaim, PlanActionClaim } from "./claims";
+import { GenericCredWrapper } from "./common";
+
+export interface EmojiSummaryRecord {
+  issuerDid: string;
+  jwtId: string;
+  text: string;
+  parentHandleId: string;
+}
 
 // a summary record; the VC is found the fullClaim field
 export interface GiveSummaryRecord {
-  [x: string]: PropertyKey | undefined | GiveActionClaim;
+  [x: string]:
+    | PropertyKey
+    | undefined
+    | GiveActionClaim
+    | Record<string, number>;
   type?: string;
   agentDid: string;
   amount: number;
   amountConfirmed: number;
   description: string;
+  emojiCount: Record<string, number>; // Map of emoji character to count
   fullClaim: GiveActionClaim;
   fulfillsHandleId: string;
   fulfillsPlanHandleId?: string;
@@ -61,6 +74,11 @@ export interface PlanSummaryRecord {
   jwtId?: string;
 }
 
+export interface PlanSummaryAndPreviousClaim {
+  plan: PlanSummaryRecord;
+  wrappedClaimBefore: GenericCredWrapper<PlanActionClaim>;
+}
+
 /**
  * Represents data about a project
  *
@@ -87,7 +105,10 @@ export interface PlanData {
   name: string;
   /**
    * The identifier of the project record -- different from jwtId
-   * (Maybe we should use the jwtId to iterate through the records instead.)
+   *
+   * This has been used to iterate through plan records, because jwtId ordering doesn't match
+   * chronological create ordering, though it does match most recent edit order (in reverse order).
+   * (It may be worthwhile to order by jwtId instead. It is an indexed field.)
    **/
   rowId?: string;
 }

src/interfaces/user.ts

@@ -6,3 +6,12 @@ export interface UserInfo {
   profileImageUrl?: string;
   nextPublicEncKeyHash?: string;
 }
+
+export interface MemberData {
+  did: string;
+  name: string;
+  isContact: boolean;
+  member: {
+    memberId: string;
+  };
+}

src/libs/endorserServer.ts

@@ -42,9 +42,6 @@ import {
   PlanActionClaim,
   RegisterActionClaim,
   TenureClaim,
-} from "../interfaces/claims";
-
-import {
   GenericCredWrapper,
   GenericVerifiableCredential,
   AxiosErrorResponse,
@@ -55,9 +52,12 @@ import {
   QuantitativeValue,
   KeyMetaWithPrivate,
   KeyMetaMaybeWithPrivate,
-} from "../interfaces/common";
-import { PlanSummaryRecord } from "../interfaces/records";
-import { logger } from "../utils/logger";
+  OfferSummaryRecord,
+  OfferToPlanSummaryRecord,
+  PlanSummaryAndPreviousClaim,
+  PlanSummaryRecord,
+} from "../interfaces";
+import { logger, safeStringify } from "../utils/logger";
 import { PlatformServiceFactory } from "@/services/PlatformServiceFactory";
 import { APP_SERVER } from "@/constants/app";
 import { SOMEONE_UNNAMED } from "@/constants/entities";
@@ -362,6 +362,22 @@ export function didInfo(
   return didInfoForContact(did, activeDid, contact, allMyDids).displayName;
 }
 
+/**
+ * In some contexts (eg. agent), a blank really is nobody.
+ */
+export function didInfoOrNobody(
+  did: string | undefined,
+  activeDid: string | undefined,
+  allMyDids: string[],
+  contacts: Contact[],
+): string {
+  if (did == null) {
+    return "Nobody";
+  } else {
+    return didInfo(did, activeDid, allMyDids, contacts);
+  }
+}
+
 /**
  * return text description without any references to "you" as user
  */
@@ -609,11 +625,7 @@ async function performPlanRequest(
 
       return cred;
     } else {
-      // Use debug level for development to reduce console noise
-      const isDevelopment = process.env.VITE_PLATFORM === "development";
-      const log = isDevelopment ? logger.debug : logger.log;
-
-      log(
+      logger.debug(
         "[Plan Loading] ⚠️ Plan cache is empty for handle",
         handleId,
         " Got data:",
@@ -685,7 +697,7 @@ export function serverMessageForUser(error: unknown): string | undefined {
 export function errorStringForLog(error: unknown) {
   let stringifiedError = "" + error;
   try {
-    stringifiedError = JSON.stringify(error);
+    stringifiedError = safeStringify(error);
   } catch (e) {
     // can happen with Dexie, eg:
     // TypeError: Converting circular structure to JSON
@@ -697,7 +709,7 @@ export function errorStringForLog(error: unknown) {
 
   if (error && typeof error === "object" && "response" in error) {
     const err = error as AxiosErrorResponse;
-    const errorResponseText = JSON.stringify(err.response);
+    const errorResponseText = safeStringify(err.response);
     // for some reason, error.response is not included in stringify result (eg. for 400 errors on invite redemptions)
     if (!R.empty(errorResponseText) && !fullError.includes(errorResponseText)) {
       // add error.response stuff
@@ -707,7 +719,7 @@ export function errorStringForLog(error: unknown) {
         R.equals(err.config, err.response.config)
       ) {
         // but exclude "config" because it's already in there
-        const newErrorResponseText = JSON.stringify(
+        const newErrorResponseText = safeStringify(
           R.omit(["config"] as never[], err.response),
         );
         fullError +=
@@ -730,7 +742,7 @@ export async function getNewOffersToUser(
   activeDid: string,
   afterOfferJwtId?: string,
   beforeOfferJwtId?: string,
-) {
+): Promise<{ data: Array<OfferSummaryRecord>; hitLimit: boolean }> {
   let url = `${apiServer}/api/v2/report/offers?recipientDid=${activeDid}`;
   if (afterOfferJwtId) {
     url += "&afterId=" + afterOfferJwtId;
@@ -752,7 +764,7 @@ export async function getNewOffersToUserProjects(
   activeDid: string,
   afterOfferJwtId?: string,
   beforeOfferJwtId?: string,
-) {
+): Promise<{ data: Array<OfferToPlanSummaryRecord>; hitLimit: boolean }> {
   let url = `${apiServer}/api/v2/report/offersToPlansOwnedByMe`;
   if (afterOfferJwtId) {
     url += "?afterId=" + afterOfferJwtId;
@@ -766,6 +778,46 @@ export async function getNewOffersToUserProjects(
   return response.data;
 }
 
+/**
+ * Get starred projects that have been updated since the last check
+ *
+ * @param axios - axios instance
+ * @param apiServer - endorser API server URL
+ * @param activeDid - user's DID for authentication
+ * @param starredPlanHandleIds - array of starred project handle IDs
+ * @param afterId - JWT ID to check for changes after (from lastAckedStarredPlanChangesJwtId)
+ * @returns { data: Array<PlanSummaryAndPreviousClaim>, hitLimit: boolean }
+ */
+export async function getStarredProjectsWithChanges(
+  axios: Axios,
+  apiServer: string,
+  activeDid: string,
+  starredPlanHandleIds: string[],
+  afterId?: string,
+): Promise<{ data: Array<PlanSummaryAndPreviousClaim>; hitLimit: boolean }> {
+  if (!starredPlanHandleIds || starredPlanHandleIds.length === 0) {
+    return { data: [], hitLimit: false };
+  }
+
+  if (!afterId) {
+    // This doesn't make sense: there should always be some previous one they've seen.
+    // We'll just return blank.
+    return { data: [], hitLimit: false };
+  }
+
+  // Use POST method for larger lists of project IDs
+  const url = `${apiServer}/api/v2/report/plansLastUpdatedBetween`;
+  const headers = await getHeaders(activeDid);
+
+  const requestBody = {
+    planIds: starredPlanHandleIds,
+    afterId: afterId,
+  };
+
+  const response = await axios.post(url, requestBody, { headers });
+  return response.data;
+}
+
 /**
  * Construct GiveAction VC for submission to server
  *
@@ -1165,7 +1217,12 @@ export async function createAndSubmitClaim(
       timestamp: new Date().toISOString(),
     });
 
-    return { success: true, handleId: response.data?.handleId };
+    return {
+      success: true,
+      claimId: response.data?.claimId,
+      handleId: response.data?.handleId,
+      embeddedRecordError: response.data?.embeddedRecordError,
+    };
   } catch (error: unknown) {
     // Enhanced error logging with comprehensive context
     const requestId = `claim_error_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
@@ -1600,30 +1657,35 @@ export async function register(
       message?: string;
     }>(url, { jwtEncoded: vcJwt });
 
-    if (resp.data?.success?.handleId) {
-      return { success: true };
-    } else if (resp.data?.success?.embeddedRecordError) {
+    if (resp.data?.success?.embeddedRecordError) {
       let message =
         "There was some problem with the registration and so it may not be complete.";
       if (typeof resp.data.success.embeddedRecordError === "string") {
         message += " " + resp.data.success.embeddedRecordError;
       }
       return { error: message };
+    } else if (resp.data?.success?.handleId) {
+      return { success: true };
     } else {
-      logger.error("Registration error:", JSON.stringify(resp.data));
-      return { error: "Got a server error when registering." };
+      logger.error("Registration non-thrown error:", JSON.stringify(resp.data));
+      return {
+        error:
+          (resp.data?.error as { message?: string })?.message ||
+          (resp.data?.error as string) ||
+          "Got a server error when registering.",
+      };
     }
   } catch (error: unknown) {
     if (error && typeof error === "object") {
       const err = error as AxiosErrorResponse;
       const errorMessage =
-        err.message ||
-        (err.response?.data &&
-        typeof err.response.data === "object" &&
-        "message" in err.response.data
-          ? (err.response.data as { message: string }).message
-          : undefined);
-      logger.error("Registration error:", errorMessage || JSON.stringify(err));
+        err.response?.data?.error?.message ||
+        err.response?.data?.error ||
+        err.message;
+      logger.error(
+        "Registration thrown error:",
+        errorMessage || JSON.stringify(err),
+      );
       return { error: errorMessage || "Got a server error when registering." };
     }
     return { error: "Got a server error when registering." };
@@ -1697,49 +1759,19 @@ export async function fetchEndorserRateLimits(
     timestamp: new Date().toISOString(),
   });
 
-  try {
-    const response = await axios.get(url, { headers } as AxiosRequestConfig);
+  // not wrapped in a 'try' because the error returned is self-explanatory
+  const response = await axios.get(url, { headers } as AxiosRequestConfig);
 
-    // Log successful registration check
-    logger.debug("[User Registration] User registration check successful:", {
-      did: issuerDid,
-      server: apiServer,
-      status: response.status,
-      isRegistered: true,
-      timestamp: new Date().toISOString(),
-    });
+  // Log successful registration check
+  logger.debug("[User Registration] User registration check successful:", {
+    did: issuerDid,
+    server: apiServer,
+    status: response.status,
+    isRegistered: true,
+    timestamp: new Date().toISOString(),
+  });
 
-    return response;
-  } catch (error) {
-    // Enhanced error logging with user registration context
-    const axiosError = error as {
-      response?: {
-        data?: { error?: { code?: string; message?: string } };
-        status?: number;
-      };
-    };
-    const errorCode = axiosError.response?.data?.error?.code;
-    const errorMessage = axiosError.response?.data?.error?.message;
-    const httpStatus = axiosError.response?.status;
-
-    logger.warn("[User Registration] User not registered on server:", {
-      did: issuerDid,
-      server: apiServer,
-      errorCode: errorCode,
-      errorMessage: errorMessage,
-      httpStatus: httpStatus,
-      needsRegistration: true,
-      timestamp: new Date().toISOString(),
-    });
-
-    // Log the original error for debugging
-    logger.error(
-      `[fetchEndorserRateLimits] Error for DID ${issuerDid}:`,
-      errorStringForLog(error),
-    );
-
-    throw error;
-  }
+  return response;
 }
 
 /**
@@ -1788,14 +1820,17 @@ export async function fetchImageRateLimits(
       };
     };
 
-    logger.error("[Image Server] Image rate limits check failed:", {
-      did: issuerDid,
-      server: server,
-      errorCode: axiosError.response?.data?.error?.code,
-      errorMessage: axiosError.response?.data?.error?.message,
-      httpStatus: axiosError.response?.status,
-      timestamp: new Date().toISOString(),
-    });
+    logger.warn(
+      "[Image Server] Image rate limits check failed, which is expected for users not registered on test server (eg. when only registered on local server).",
+      {
+        did: issuerDid,
+        server: server,
+        errorCode: axiosError.response?.data?.error?.code,
+        errorMessage: axiosError.response?.data?.error?.message,
+        httpStatus: axiosError.response?.status,
+        timestamp: new Date().toISOString(),
+      },
+    );
     return null;
   }
 }

src/libs/fontawesome.ts

@@ -29,6 +29,7 @@ import {
   faCircle,
   faCircleCheck,
   faCircleInfo,
+  faCircleMinus,
   faCirclePlus,
   faCircleQuestion,
   faCircleRight,
@@ -37,6 +38,7 @@ import {
   faCoins,
   faComment,
   faCopy,
+  faCrown,
   faDollar,
   faDownload,
   faEllipsis,
@@ -58,6 +60,7 @@ import {
   faHand,
   faHandHoldingDollar,
   faHandHoldingHeart,
+  faHourglassHalf,
   faHouseChimney,
   faImage,
   faImagePortrait,
@@ -86,6 +89,7 @@ import {
   faSquareCaretDown,
   faSquareCaretUp,
   faSquarePlus,
+  faStar,
   faThumbtack,
   faTrashCan,
   faTriangleExclamation,
@@ -94,6 +98,9 @@ import {
   faXmark,
 } from "@fortawesome/free-solid-svg-icons";
 
+// these are referenced differently, eg. ":icon='['far', 'star']'" as in ProjectViewView.vue
+import { faStar as faStarRegular } from "@fortawesome/free-regular-svg-icons";
+
 // Initialize Font Awesome library with all required icons
 library.add(
   faArrowDown,
@@ -119,6 +126,7 @@ library.add(
   faCircle,
   faCircleCheck,
   faCircleInfo,
+  faCircleMinus,
   faCirclePlus,
   faCircleQuestion,
   faCircleRight,
@@ -127,6 +135,7 @@ library.add(
   faCoins,
   faComment,
   faCopy,
+  faCrown,
   faDollar,
   faDownload,
   faEllipsis,
@@ -148,6 +157,7 @@ library.add(
   faHand,
   faHandHoldingDollar,
   faHandHoldingHeart,
+  faHourglassHalf,
   faHouseChimney,
   faImage,
   faImagePortrait,
@@ -168,14 +178,16 @@ library.add(
   faPlus,
   faQrcode,
   faQuestion,
-  faRotate,
   faRightFromBracket,
+  faRotate,
   faShareNodes,
   faSpinner,
   faSquare,
   faSquareCaretDown,
   faSquareCaretUp,
   faSquarePlus,
+  faStar,
+  faStarRegular,
   faThumbtack,
   faTrashCan,
   faTriangleExclamation,

src/libs/util.ts

@@ -988,11 +988,6 @@ export async function importFromMnemonic(
 ): Promise<void> {
   const mne: string = mnemonic.trim().toLowerCase();
 
-  // Check if this is Test User #0
-  const TEST_USER_0_MNEMONIC =
-    "rigid shrug mobile smart veteran half all pond toilet brave review universe ship congress found yard skate elite apology jar uniform subway slender luggage";
-  const isTestUser0 = mne === TEST_USER_0_MNEMONIC;
-
   // Derive address and keys from mnemonic
   const [address, privateHex, publicHex] = deriveAddress(mne, derivationPath);
 
@@ -1007,90 +1002,6 @@ export async function importFromMnemonic(
 
   // Save the new identity
   await saveNewIdentity(newId, mne, derivationPath);
-
-  // Set up Test User #0 specific settings
-  if (isTestUser0) {
-    // Set up Test User #0 specific settings with enhanced error handling
-    const platformService = await getPlatformService();
-
-    try {
-      // First, ensure the DID-specific settings record exists
-      await platformService.insertNewDidIntoSettings(newId.did);
-
-      // Then update with Test User #0 specific settings
-      await platformService.updateDidSpecificSettings(newId.did, {
-        firstName: "User Zero",
-        isRegistered: true,
-      });
-
-      // Verify the settings were saved correctly
-      const verificationResult = await platformService.dbQuery(
-        "SELECT firstName, isRegistered FROM settings WHERE accountDid = ?",
-        [newId.did],
-      );
-
-      if (verificationResult?.values?.length) {
-        const settings = verificationResult.values[0];
-        const firstName = settings[0];
-        const isRegistered = settings[1];
-
-        logger.debug(
-          "[importFromMnemonic] Test User #0 settings verification",
-          {
-            did: newId.did,
-            firstName,
-            isRegistered,
-            expectedFirstName: "User Zero",
-            expectedIsRegistered: true,
-          },
-        );
-
-        // If settings weren't saved correctly, try individual updates
-        if (firstName !== "User Zero" || isRegistered !== 1) {
-          logger.warn(
-            "[importFromMnemonic] Test User #0 settings not saved correctly, retrying with individual updates",
-          );
-
-          await platformService.dbExec(
-            "UPDATE settings SET firstName = ? WHERE accountDid = ?",
-            ["User Zero", newId.did],
-          );
-
-          await platformService.dbExec(
-            "UPDATE settings SET isRegistered = ? WHERE accountDid = ?",
-            [1, newId.did],
-          );
-
-          // Verify again
-          const retryResult = await platformService.dbQuery(
-            "SELECT firstName, isRegistered FROM settings WHERE accountDid = ?",
-            [newId.did],
-          );
-
-          if (retryResult?.values?.length) {
-            const retrySettings = retryResult.values[0];
-            logger.debug(
-              "[importFromMnemonic] Test User #0 settings after retry",
-              {
-                firstName: retrySettings[0],
-                isRegistered: retrySettings[1],
-              },
-            );
-          }
-        }
-      } else {
-        logger.error(
-          "[importFromMnemonic] Failed to verify Test User #0 settings - no record found",
-        );
-      }
-    } catch (error) {
-      logger.error(
-        "[importFromMnemonic] Error setting up Test User #0 settings:",
-        error,
-      );
-      // Don't throw - allow the import to continue even if settings fail
-    }
-  }
 }
 
 /**
@@ -1147,3 +1058,29 @@ export async function checkForDuplicateAccount(
 
   return (existingAccount?.values?.length ?? 0) > 0;
 }
+
+export class PromiseTracker<T> {
+  private _promise: Promise<T>;
+  private _resolved = false;
+  private _value: T | undefined;
+
+  constructor(promise: Promise<T>) {
+    this._promise = promise.then((value) => {
+      this._resolved = true;
+      this._value = value;
+      return value;
+    });
+  }
+
+  get isResolved(): boolean {
+    return this._resolved;
+  }
+
+  get value(): T | undefined {
+    return this._value;
+  }
+
+  get promise(): Promise<T> {
+    return this._promise;
+  }
+}

src/router/index.ts

@@ -285,6 +285,16 @@ const routes: Array<RouteRecordRaw> = [
     name: "user-profile",
     component: () => import("../views/UserProfileView.vue"),
   },
+  // Catch-all route for 404 errors - must be last
+  {
+    path: "/:pathMatch(.*)*",
+    name: "not-found",
+    component: () => import("../views/NotFoundView.vue"),
+    meta: {
+      title: "Page Not Found",
+      requiresAuth: false,
+    },
+  },
 ];
 
 const isElectron = window.location.protocol === "file:";

src/services/api.ts

@@ -19,7 +19,6 @@ import { logger, safeStringify } from "../utils/logger";
  * @remarks
  * Special handling includes:
  * - Enhanced logging for Capacitor platform
- * - Rate limit detection and handling
  * - Detailed error information logging including:
  *   - Error message
  *   - HTTP status
@@ -50,11 +49,5 @@ export const handleApiError = (error: AxiosError, endpoint: string) => {
     });
   }
 
-  // Specific handling for rate limits
-  if (error.response?.status === 400) {
-    logger.warn(`[Rate Limit] ${endpoint}`);
-    return null;
-  }
-
   throw error;
 };

src/services/platforms/BaseDatabaseService.ts

@@ -0,0 +1,297 @@
+/**
+ * @fileoverview Base Database Service for Platform Services
+ * @author Matthew Raymer
+ *
+ * This abstract base class provides common database operations that are
+ * identical across all platform implementations. It eliminates code
+ * duplication and ensures consistency in database operations.
+ *
+ * Key Features:
+ * - Common database utility methods
+ * - Consistent settings management
+ * - Active identity management
+ * - Abstract methods for platform-specific database operations
+ *
+ * Architecture:
+ * - Abstract base class with common implementations
+ * - Platform services extend this class
+ * - Platform-specific database operations remain abstract
+ *
+ * @since 1.1.1-beta
+ */
+
+import { logger } from "../../utils/logger";
+import { QueryExecResult } from "@/interfaces/database";
+
+/**
+ * Abstract base class for platform-specific database services.
+ *
+ * This class provides common database operations that are identical
+ * across all platform implementations (Web, Capacitor, Electron).
+ * Platform-specific services extend this class and implement the
+ * abstract database operation methods.
+ *
+ * Common Operations:
+ * - Settings management (update, retrieve, insert)
+ * - Active identity management
+ * - Database utility methods
+ *
+ * @abstract
+ * @example
+ * ```typescript
+ * export class WebPlatformService extends BaseDatabaseService {
+ *   async dbQuery(sql: string, params?: unknown[]): Promise<QueryExecResult> {
+ *     // Web-specific implementation
+ *   }
+ * }
+ * ```
+ */
+export abstract class BaseDatabaseService {
+  /**
+   * Generate an INSERT statement for a model object.
+   *
+   * Creates a parameterized INSERT statement with placeholders for
+   * all properties in the model object. This ensures safe SQL
+   * execution and prevents SQL injection.
+   *
+   * @param model - Object containing the data to insert
+   * @param tableName - Name of the target table
+   * @returns Object containing the SQL statement and parameters
+   *
+   * @example
+   * ```typescript
+   * const { sql, params } = this.generateInsertStatement(
+   *   { name: 'John', age: 30 },
+   *   'users'
+   * );
+   * // sql: "INSERT INTO users (name, age) VALUES (?, ?)"
+   * // params: ['John', 30]
+   * ```
+   */
+  generateInsertStatement(
+    model: Record<string, unknown>,
+    tableName: string,
+  ): { sql: string; params: unknown[] } {
+    const keys = Object.keys(model);
+    const placeholders = keys.map(() => "?").join(", ");
+    const sql = `INSERT INTO ${tableName} (${keys.join(", ")}) VALUES (${placeholders})`;
+    const params = keys.map((key) => model[key]);
+    return { sql, params };
+  }
+
+  /**
+   * Update default settings for the currently active account.
+   *
+   * Retrieves the active DID from the active_identity table and updates
+   * the corresponding settings record. This ensures settings are always
+   * updated for the correct account.
+   *
+   * @param settings - Object containing the settings to update
+   * @returns Promise that resolves when settings are updated
+   *
+   * @throws {Error} If no active DID is found or database operation fails
+   *
+   * @example
+   * ```typescript
+   * await this.updateDefaultSettings({
+   *   theme: 'dark',
+   *   notifications: true
+   * });
+   * ```
+   */
+  async updateDefaultSettings(
+    settings: Record<string, unknown>,
+  ): Promise<void> {
+    // Get current active DID and update that identity's settings
+    const activeIdentity = await this.getActiveIdentity();
+    const activeDid = activeIdentity.activeDid;
+
+    if (!activeDid) {
+      logger.warn(
+        "[BaseDatabaseService] No active DID found, cannot update default settings",
+      );
+      return;
+    }
+
+    const keys = Object.keys(settings);
+    const setClause = keys.map((key) => `${key} = ?`).join(", ");
+    const sql = `UPDATE settings SET ${setClause} WHERE accountDid = ?`;
+    const params = [...keys.map((key) => settings[key]), activeDid];
+    await this.dbExec(sql, params);
+  }
+
+  /**
+   * Update the active DID in the active_identity table.
+   *
+   * Sets the active DID and updates the lastUpdated timestamp.
+   * This is used when switching between different accounts/identities.
+   *
+   * @param did - The DID to set as active
+   * @returns Promise that resolves when the update is complete
+   *
+   * @example
+   * ```typescript
+   * await this.updateActiveDid('did:example:123');
+   * ```
+   */
+  async updateActiveDid(did: string): Promise<void> {
+    await this.dbExec(
+      "UPDATE active_identity SET activeDid = ?, lastUpdated = datetime('now') WHERE id = 1",
+      [did],
+    );
+  }
+
+  /**
+   * Get the currently active DID from the active_identity table.
+   *
+   * Retrieves the active DID that represents the currently selected
+   * account/identity. This is used throughout the application to
+   * ensure operations are performed on the correct account.
+   *
+   * @returns Promise resolving to object containing the active DID
+   *
+   * @example
+   * ```typescript
+   * const { activeDid } = await this.getActiveIdentity();
+   * console.log('Current active DID:', activeDid);
+   * ```
+   */
+  async getActiveIdentity(): Promise<{ activeDid: string }> {
+    const result = (await this.dbQuery(
+      "SELECT activeDid FROM active_identity WHERE id = 1",
+    )) as QueryExecResult;
+    return {
+      activeDid: (result?.values?.[0]?.[0] as string) || "",
+    };
+  }
+
+  /**
+   * Insert a new DID into the settings table with default values.
+   *
+   * Creates a new settings record for a DID with default configuration
+   * values. Uses INSERT OR REPLACE to handle cases where settings
+   * already exist for the DID.
+   *
+   * @param did - The DID to create settings for
+   * @returns Promise that resolves when settings are created
+   *
+   * @example
+   * ```typescript
+   * await this.insertNewDidIntoSettings('did:example:123');
+   * ```
+   */
+  async insertNewDidIntoSettings(did: string): Promise<void> {
+    // Import constants dynamically to avoid circular dependencies
+    const { DEFAULT_ENDORSER_API_SERVER, DEFAULT_PARTNER_API_SERVER } =
+      await import("@/constants/app");
+
+    // Use INSERT OR REPLACE to handle case where settings already exist for this DID
+    // This prevents duplicate accountDid entries and ensures data integrity
+    await this.dbExec(
+      "INSERT OR REPLACE INTO settings (accountDid, finishedOnboarding, apiServer, partnerApiServer) VALUES (?, ?, ?, ?)",
+      [did, false, DEFAULT_ENDORSER_API_SERVER, DEFAULT_PARTNER_API_SERVER],
+    );
+  }
+
+  /**
+   * Update settings for a specific DID.
+   *
+   * Updates settings for a particular DID rather than the active one.
+   * This is useful for bulk operations or when managing multiple accounts.
+   *
+   * @param did - The DID to update settings for
+   * @param settings - Object containing the settings to update
+   * @returns Promise that resolves when settings are updated
+   *
+   * @example
+   * ```typescript
+   * await this.updateDidSpecificSettings('did:example:123', {
+   *   theme: 'light',
+   *   notifications: false
+   * });
+   * ```
+   */
+  async updateDidSpecificSettings(
+    did: string,
+    settings: Record<string, unknown>,
+  ): Promise<void> {
+    const keys = Object.keys(settings);
+    const setClause = keys.map((key) => `${key} = ?`).join(", ");
+    const sql = `UPDATE settings SET ${setClause} WHERE accountDid = ?`;
+    const params = [...keys.map((key) => settings[key]), did];
+    await this.dbExec(sql, params);
+  }
+
+  /**
+   * Retrieve settings for the currently active account.
+   *
+   * Gets the active DID and retrieves all settings for that account.
+   * Excludes the 'id' column from the returned settings object.
+   *
+   * @returns Promise resolving to settings object or null if no active DID
+   *
+   * @example
+   * ```typescript
+   * const settings = await this.retrieveSettingsForActiveAccount();
+   * if (settings) {
+   *   console.log('Theme:', settings.theme);
+   *   console.log('Notifications:', settings.notifications);
+   * }
+   * ```
+   */
+  async retrieveSettingsForActiveAccount(): Promise<Record<
+    string,
+    unknown
+  > | null> {
+    // Get current active DID from active_identity table
+    const activeIdentity = await this.getActiveIdentity();
+    const activeDid = activeIdentity.activeDid;
+
+    if (!activeDid) {
+      return null;
+    }
+
+    const result = (await this.dbQuery(
+      "SELECT * FROM settings WHERE accountDid = ?",
+      [activeDid],
+    )) as QueryExecResult;
+    if (result?.values?.[0]) {
+      // Convert the row to an object
+      const row = result.values[0];
+      const columns = result.columns || [];
+      const settings: Record<string, unknown> = {};
+
+      columns.forEach((column: string, index: number) => {
+        if (column !== "id") {
+          // Exclude the id column
+          settings[column] = row[index];
+        }
+      });
+
+      return settings;
+    }
+    return null;
+  }
+
+  // Abstract methods that must be implemented by platform-specific services
+
+  /**
+   * Execute a database query (SELECT operations).
+   *
+   * @abstract
+   * @param sql - SQL query string
+   * @param params - Optional parameters for prepared statements
+   * @returns Promise resolving to query results
+   */
+  abstract dbQuery(sql: string, params?: unknown[]): Promise<unknown>;
+
+  /**
+   * Execute a database statement (INSERT, UPDATE, DELETE operations).
+   *
+   * @abstract
+   * @param sql - SQL statement string
+   * @param params - Optional parameters for prepared statements
+   * @returns Promise resolving to execution results
+   */
+  abstract dbExec(sql: string, params?: unknown[]): Promise<unknown>;
+}

src/services/platforms/CapacitorPlatformService.ts

@@ -22,6 +22,7 @@ import {
   PlatformCapabilities,
 } from "../PlatformService";
 import { logger } from "../../utils/logger";
+import { BaseDatabaseService } from "./BaseDatabaseService";
 
 interface QueuedOperation {
   type: "run" | "query" | "rawQuery";
@@ -39,7 +40,10 @@ interface QueuedOperation {
  * - Platform-specific features
  * - SQLite database operations
  */
-export class CapacitorPlatformService implements PlatformService {
+export class CapacitorPlatformService
+  extends BaseDatabaseService
+  implements PlatformService
+{
   /** Current camera direction */
   private currentDirection: CameraDirection = CameraDirection.Rear;
 
@@ -52,6 +56,7 @@ export class CapacitorPlatformService implements PlatformService {
   private isProcessingQueue: boolean = false;
 
   constructor() {
+    super();
     this.sqlite = new SQLiteConnection(CapacitorSQLite);
   }
 
@@ -1328,79 +1333,8 @@ export class CapacitorPlatformService implements PlatformService {
   // --- PWA/Web-only methods (no-op for Capacitor) ---
   public registerServiceWorker(): void {}
 
-  // Database utility methods
-  generateInsertStatement(
-    model: Record<string, unknown>,
-    tableName: string,
-  ): { sql: string; params: unknown[] } {
-    const keys = Object.keys(model);
-    const placeholders = keys.map(() => "?").join(", ");
-    const sql = `INSERT INTO ${tableName} (${keys.join(", ")}) VALUES (${placeholders})`;
-    const params = keys.map((key) => model[key]);
-    return { sql, params };
-  }
-
-  async updateDefaultSettings(
-    settings: Record<string, unknown>,
-  ): Promise<void> {
-    const keys = Object.keys(settings);
-    const setClause = keys.map((key) => `${key} = ?`).join(", ");
-    const sql = `UPDATE settings SET ${setClause} WHERE id = 1`;
-    const params = keys.map((key) => settings[key]);
-    await this.dbExec(sql, params);
-  }
-
-  async updateActiveDid(did: string): Promise<void> {
-    await this.dbExec(
-      "UPDATE active_identity SET activeDid = ?, lastUpdated = datetime('now') WHERE id = 1",
-      [did],
-    );
-  }
-
-  async insertNewDidIntoSettings(did: string): Promise<void> {
-    // Import constants dynamically to avoid circular dependencies
-    const { DEFAULT_ENDORSER_API_SERVER, DEFAULT_PARTNER_API_SERVER } =
-      await import("@/constants/app");
-
-    // Use INSERT OR REPLACE to handle case where settings already exist for this DID
-    // This prevents duplicate accountDid entries and ensures data integrity
-    await this.dbExec(
-      "INSERT OR REPLACE INTO settings (accountDid, finishedOnboarding, apiServer, partnerApiServer) VALUES (?, ?, ?, ?)",
-      [did, false, DEFAULT_ENDORSER_API_SERVER, DEFAULT_PARTNER_API_SERVER],
-    );
-  }
-
-  async updateDidSpecificSettings(
-    did: string,
-    settings: Record<string, unknown>,
-  ): Promise<void> {
-    const keys = Object.keys(settings);
-    const setClause = keys.map((key) => `${key} = ?`).join(", ");
-    const sql = `UPDATE settings SET ${setClause} WHERE accountDid = ?`;
-    const params = [...keys.map((key) => settings[key]), did];
-    await this.dbExec(sql, params);
-  }
-
-  async retrieveSettingsForActiveAccount(): Promise<Record<
-    string,
-    unknown
-  > | null> {
-    const result = await this.dbQuery("SELECT * FROM settings WHERE id = 1");
-    if (result?.values?.[0]) {
-      // Convert the row to an object
-      const row = result.values[0];
-      const columns = result.columns || [];
-      const settings: Record<string, unknown> = {};
-
-      columns.forEach((column, index) => {
-        if (column !== "id") {
-          // Exclude the id column
-          settings[column] = row[index];
-        }
-      });
-
-      return settings;
-    }
-    return null;
-  }
+  // Database utility methods - inherited from BaseDatabaseService
+  // generateInsertStatement, updateDefaultSettings, updateActiveDid,
+  // getActiveIdentity, insertNewDidIntoSettings, updateDidSpecificSettings,
+  // retrieveSettingsForActiveAccount are all inherited from BaseDatabaseService
 }

src/services/platforms/WebPlatformService.ts

@@ -5,6 +5,7 @@ import {
 } from "../PlatformService";
 import { logger } from "../../utils/logger";
 import { QueryExecResult } from "@/interfaces/database";
+import { BaseDatabaseService } from "./BaseDatabaseService";
 // Dynamic import of initBackend to prevent worker context errors
 import type {
   WorkerRequest,
@@ -29,7 +30,10 @@ import type {
  * Note: File system operations are not available in the web platform
  * due to browser security restrictions. These methods throw appropriate errors.
  */
-export class WebPlatformService implements PlatformService {
+export class WebPlatformService
+  extends BaseDatabaseService
+  implements PlatformService
+{
   private static instanceCount = 0; // Debug counter
   private worker: Worker | null = null;
   private workerReady = false;
@@ -46,17 +50,16 @@ export class WebPlatformService implements PlatformService {
   private readonly messageTimeout = 30000; // 30 seconds
 
   constructor() {
+    super();
     WebPlatformService.instanceCount++;
 
-    // Use debug level logging for development mode to reduce console noise
-    const isDevelopment = process.env.VITE_PLATFORM === "development";
-    const log = isDevelopment ? logger.debug : logger.log;
-
-    log("[WebPlatformService] Initializing web platform service");
+    logger.debug("[WebPlatformService] Initializing web platform service");
 
     // Only initialize SharedArrayBuffer setup for web platforms
     if (this.isWorker()) {
-      log("[WebPlatformService] Skipping initBackend call in worker context");
+      logger.debug(
+        "[WebPlatformService] Skipping initBackend call in worker context",
+      );
       return;
     }
 
@@ -670,105 +673,8 @@ export class WebPlatformService implements PlatformService {
     // SharedArrayBuffer initialization is handled by initBackend call in initializeWorker
   }
 
-  // Database utility methods
-  generateInsertStatement(
-    model: Record<string, unknown>,
-    tableName: string,
-  ): { sql: string; params: unknown[] } {
-    const keys = Object.keys(model);
-    const placeholders = keys.map(() => "?").join(", ");
-    const sql = `INSERT INTO ${tableName} (${keys.join(", ")}) VALUES (${placeholders})`;
-    const params = keys.map((key) => model[key]);
-    return { sql, params };
-  }
-
-  async updateDefaultSettings(
-    settings: Record<string, unknown>,
-  ): Promise<void> {
-    // Get current active DID and update that identity's settings
-    const activeIdentity = await this.getActiveIdentity();
-    const activeDid = activeIdentity.activeDid;
-
-    if (!activeDid) {
-      logger.warn(
-        "[WebPlatformService] No active DID found, cannot update default settings",
-      );
-      return;
-    }
-
-    const keys = Object.keys(settings);
-    const setClause = keys.map((key) => `${key} = ?`).join(", ");
-    const sql = `UPDATE settings SET ${setClause} WHERE accountDid = ?`;
-    const params = [...keys.map((key) => settings[key]), activeDid];
-    await this.dbExec(sql, params);
-  }
-
-  async updateActiveDid(did: string): Promise<void> {
-    await this.dbExec(
-      "INSERT OR REPLACE INTO active_identity (id, activeDid, lastUpdated) VALUES (1, ?, ?)",
-      [did, new Date().toISOString()],
-    );
-  }
-
-  async getActiveIdentity(): Promise<{ activeDid: string }> {
-    const result = await this.dbQuery(
-      "SELECT activeDid FROM active_identity WHERE id = 1",
-    );
-    return {
-      activeDid: (result?.values?.[0]?.[0] as string) || "",
-    };
-  }
-
-  async insertNewDidIntoSettings(did: string): Promise<void> {
-    // Import constants dynamically to avoid circular dependencies
-    const { DEFAULT_ENDORSER_API_SERVER, DEFAULT_PARTNER_API_SERVER } =
-      await import("@/constants/app");
-
-    // Use INSERT OR REPLACE to handle case where settings already exist for this DID
-    // This prevents duplicate accountDid entries and ensures data integrity
-    await this.dbExec(
-      "INSERT OR REPLACE INTO settings (accountDid, finishedOnboarding, apiServer, partnerApiServer) VALUES (?, ?, ?, ?)",
-      [did, false, DEFAULT_ENDORSER_API_SERVER, DEFAULT_PARTNER_API_SERVER],
-    );
-  }
-
-  async updateDidSpecificSettings(
-    did: string,
-    settings: Record<string, unknown>,
-  ): Promise<void> {
-    const keys = Object.keys(settings);
-    const setClause = keys.map((key) => `${key} = ?`).join(", ");
-    const sql = `UPDATE settings SET ${setClause} WHERE accountDid = ?`;
-    const params = [...keys.map((key) => settings[key]), did];
-    // Log update operation for debugging
-    logger.debug(
-      "[WebPlatformService] updateDidSpecificSettings",
-      sql,
-      JSON.stringify(params, null, 2),
-    );
-    await this.dbExec(sql, params);
-  }
-
-  async retrieveSettingsForActiveAccount(): Promise<Record<
-    string,
-    unknown
-  > | null> {
-    const result = await this.dbQuery("SELECT * FROM settings WHERE id = 1");
-    if (result?.values?.[0]) {
-      // Convert the row to an object
-      const row = result.values[0];
-      const columns = result.columns || [];
-      const settings: Record<string, unknown> = {};
-
-      columns.forEach((column, index) => {
-        if (column !== "id") {
-          // Exclude the id column
-          settings[column] = row[index];
-        }
-      });
-
-      return settings;
-    }
-    return null;
-  }
+  // Database utility methods - inherited from BaseDatabaseService
+  // generateInsertStatement, updateDefaultSettings, updateActiveDid,
+  // getActiveIdentity, insertNewDidIntoSettings, updateDidSpecificSettings,
+  // retrieveSettingsForActiveAccount are all inherited from BaseDatabaseService
 }

src/test/EntityGridFunctionPropTest.vue

@@ -19,7 +19,6 @@
       <EntityGrid
         entity-type="people"
         :entities="people"
-        :max-items="5"
         :active-did="activeDid"
         :all-my-dids="allMyDids"
         :all-contacts="people"
@@ -39,7 +38,6 @@
       <EntityGrid
         entity-type="projects"
         :entities="projects"
-        :max-items="3"
         :active-did="activeDid"
         :all-my-dids="allMyDids"
         :all-contacts="people"
@@ -152,11 +150,8 @@ export default class EntityGridFunctionPropTest extends Vue {
   customPeopleFunction = (
     entities: Contact[],
     _entityType: string,
-    maxItems: number,
   ): Contact[] => {
-    return entities
-      .filter((person) => person.profileImageUrl)
-      .slice(0, maxItems);
+    return entities.filter((person) => person.profileImageUrl);
   };
 
   /**
@@ -165,7 +160,6 @@ export default class EntityGridFunctionPropTest extends Vue {
   customProjectsFunction = (
     entities: PlanData[],
     _entityType: string,
-    _maxItems: number,
   ): PlanData[] => {
     return entities.sort((a, b) => a.name.localeCompare(b.name)).slice(0, 3);
   };
@@ -200,16 +194,16 @@ export default class EntityGridFunctionPropTest extends Vue {
    */
   get displayedPeopleCount(): number {
     if (this.useCustomFunction) {
-      return this.customPeopleFunction(this.people, "people", 5).length;
+      return this.customPeopleFunction(this.people, "people").length;
     }
-    return Math.min(5, this.people.length);
+    return Math.min(10, this.people.length); // Initial batch size for infinite scroll
   }
 
   get displayedProjectsCount(): number {
     if (this.useCustomFunction) {
-      return this.customProjectsFunction(this.projects, "projects", 3).length;
+      return this.customProjectsFunction(this.projects, "projects").length;
     }
-    return Math.min(7, this.projects.length);
+    return Math.min(10, this.projects.length); // Initial batch size for infinite scroll
   }
 }
 </script>

src/test/PlatformServiceMixinTest.vue

@@ -85,7 +85,6 @@
 <script lang="ts">
 import { Component, Vue } from "vue-facing-decorator";
 import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
-import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
 
 @Component({
   mixins: [PlatformServiceMixin],
@@ -197,10 +196,10 @@ This tests the helper method only - no database interaction`;
       const success = await this.$saveSettings(testSettings);
 
       if (success) {
-        // Now query the raw database to see how it's actually stored
+        // Now query the raw database to see how it's actually stored.
+        // Note that new users probably have settings with ID of 1 but old migrated users might skip to 2.
         const rawResult = await this.$dbQuery(
-          "SELECT searchBoxes FROM settings WHERE id = ?",
-          [MASTER_SETTINGS_KEY],
+          "SELECT searchBoxes FROM settings limit 1",
         );
 
         if (rawResult?.values?.length) {

src/utils/PlatformServiceMixin.ts

@@ -301,7 +301,11 @@ export const PlatformServiceMixin = {
           }
 
           // Convert SQLite JSON strings to objects/arrays
-          if (column === "contactMethods" || column === "searchBoxes") {
+          if (
+            column === "contactMethods" ||
+            column === "searchBoxes" ||
+            column === "starredPlanHandleIds"
+          ) {
             value = this._parseJsonField(value, []);
           }
 
@@ -349,6 +353,14 @@ export const PlatformServiceMixin = {
           ? JSON.stringify(settings.searchBoxes)
           : String(settings.searchBoxes);
       }
+      if (settings.starredPlanHandleIds !== undefined) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (converted as any).starredPlanHandleIds = Array.isArray(
+          settings.starredPlanHandleIds,
+        )
+          ? JSON.stringify(settings.starredPlanHandleIds)
+          : String(settings.starredPlanHandleIds);
+      }
 
       return converted;
     },
@@ -551,6 +563,12 @@ export const PlatformServiceMixin = {
         if (settings.searchBoxes) {
           settings.searchBoxes = this._parseJsonField(settings.searchBoxes, []);
         }
+        if (settings.starredPlanHandleIds) {
+          settings.starredPlanHandleIds = this._parseJsonField(
+            settings.starredPlanHandleIds,
+            [],
+          );
+        }
 
         return settings;
       } catch (error) {
@@ -617,6 +635,12 @@ export const PlatformServiceMixin = {
             [],
           );
         }
+        if (mergedSettings.starredPlanHandleIds) {
+          mergedSettings.starredPlanHandleIds = this._parseJsonField(
+            mergedSettings.starredPlanHandleIds,
+            [],
+          );
+        }
 
         return mergedSettings;
       } catch (error) {
@@ -946,6 +970,20 @@ export const PlatformServiceMixin = {
       return this.$normalizeContacts(rawContacts);
     },
 
+    /**
+     * Load all contacts sorted by when they were added (by ID)
+     * Always fetches fresh data from database for consistency
+     * Handles JSON string/object duality for contactMethods field
+     * @returns Promise<Contact[]> Array of normalized contact objects sorted by addition date (newest first)
+     */
+    async $contactsByDateAdded(): Promise<Contact[]> {
+      const rawContacts = (await this.$query(
+        "SELECT * FROM contacts ORDER BY id DESC",
+      )) as ContactMaybeWithJsonStrings[];
+
+      return this.$normalizeContacts(rawContacts);
+    },
+
     /**
      * Ultra-concise shortcut for getting number of contacts
      * @returns Promise<number> Total number of contacts
@@ -2033,6 +2071,7 @@ declare module "@vue/runtime-core" {
 
     // Specialized shortcuts - contacts cached, settings fresh
     $contacts(): Promise<Contact[]>;
+    $contactsByDateAdded(): Promise<Contact[]>;
     $contactCount(): Promise<number>;
     $settings(defaults?: Settings): Promise<Settings>;
     $accountSettings(did?: string, defaults?: Settings): Promise<Settings>;

src/utils/logger.ts

@@ -24,10 +24,28 @@ export function getMemoryLogs(): string[] {
   return [..._memoryLogs];
 }
 
+/**
+ * Stringify an object with proper handling of circular references and functions
+ *
+ * Don't use for arrays; map with this over the array.
+ *
+ * @param obj - The object to stringify
+ * @returns The stringified object, plus 'message' and 'stack' for Error objects
+ */
 export function safeStringify(obj: unknown) {
   const seen = new WeakSet();
 
-  return JSON.stringify(obj, (_key, value) => {
+  // since 'message' & 'stack' are not enumerable for errors, let's add those
+  let objToStringify = obj;
+  if (obj instanceof Error) {
+    objToStringify = {
+      ...obj,
+      message: obj.message,
+      stack: obj.stack,
+    };
+  }
+
+  return JSON.stringify(objToStringify, (_key, value) => {
     if (typeof value === "object" && value !== null) {
       if (seen.has(value)) {
         return "[Circular]";
@@ -178,7 +196,8 @@ export const logger = {
     }
 
     // Database logging
-    const argsString = args.length > 0 ? " - " + safeStringify(args) : "";
+    const argsString =
+      args.length > 0 ? " - " + args.map(safeStringify).join(", ") : "";
     logToDatabase(message + argsString, "info");
   },
 
@@ -189,7 +208,8 @@ export const logger = {
     }
 
     // Database logging
-    const argsString = args.length > 0 ? " - " + safeStringify(args) : "";
+    const argsString =
+      args.length > 0 ? " - " + args.map(safeStringify).join(", ") : "";
     logToDatabase(message + argsString, "info");
   },
 
@@ -200,7 +220,8 @@ export const logger = {
     }
 
     // Database logging
-    const argsString = args.length > 0 ? " - " + safeStringify(args) : "";
+    const argsString =
+      args.length > 0 ? " - " + args.map(safeStringify).join(", ") : "";
     logToDatabase(message + argsString, "warn");
   },
 
@@ -211,9 +232,9 @@ export const logger = {
     }
 
     // Database logging
-    const messageString = safeStringify(message);
-    const argsString = args.length > 0 ? safeStringify(args) : "";
-    logToDatabase(messageString + argsString, "error");
+    const argsString =
+      args.length > 0 ? " - " + args.map(safeStringify).join(", ") : "";
+    logToDatabase(message + argsString, "error");
   },
 
   // New database-focused methods (self-contained)

src/views/AccountViewView.vue

@@ -1,6 +1,5 @@
 <template>
   <QuickNav selected="Profile" />
-  <TopMessage />
 
   <!-- CONTENT -->
   <main
@@ -9,10 +8,22 @@
     role="main"
     aria-label="Account Profile"
   >
-    <!-- Heading -->
-    <h1 id="ViewHeading" class="text-4xl text-center font-light">
-      Your Identity
-    </h1>
+    <TopMessage />
+
+    <!-- Main View Heading -->
+    <div class="flex gap-4 items-center mb-8">
+      <h1 id="ViewHeading" class="text-2xl font-bold leading-none">
+        Your Identity
+      </h1>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
+    </div>
 
     <!-- ID notice -->
     <div
@@ -150,8 +161,6 @@
     </section>
     <PushNotificationPermission ref="pushNotificationPermission" />
 
-    <LocationSearchSection :search-box="searchBox" />
-
     <!-- User Profile -->
     <section
       v-if="isRegistered"
@@ -244,6 +253,8 @@
       <div v-else>Saving...</div>
     </section>
 
+    <LocationSearchSection :search-box="searchBox" />
+
     <UsageLimitsSection
       v-if="activeDid"
       :loading-limits="loadingLimits"
@@ -1064,8 +1075,8 @@ export default class AccountViewView extends Vue {
     this.hideRegisterPromptOnNewContact =
       !!settings.hideRegisterPromptOnNewContact;
     this.isRegistered = !!settings?.isRegistered;
-    this.isSearchAreasSet = !!settings.searchBoxes;
-    this.searchBox = settings.searchBoxes?.[0] || null;
+    this.isSearchAreasSet =
+      !!settings.searchBoxes && settings.searchBoxes.length > 0;
     this.notifyingNewActivity = !!settings.notifyingNewActivityTime;
     this.notifyingNewActivityTime = settings.notifyingNewActivityTime || "";
     this.notifyingReminder = !!settings.notifyingReminderTime;
@@ -1079,6 +1090,7 @@ export default class AccountViewView extends Vue {
     this.passkeyExpirationMinutes =
       settings.passkeyExpirationMinutes ?? DEFAULT_PASSKEY_EXPIRATION_MINUTES;
     this.previousPasskeyExpirationMinutes = this.passkeyExpirationMinutes;
+    this.searchBox = settings.searchBoxes?.[0] || null;
     this.showGeneralAdvanced = !!settings.showGeneralAdvanced;
     this.showShortcutBvc = !!settings.showShortcutBvc;
     this.warnIfProdServer = !!settings.warnIfProdServer;
@@ -1464,9 +1476,6 @@ export default class AccountViewView extends Vue {
 
       if (endorserResp.status === 200) {
         this.endorserLimits = endorserResp.data;
-      } else {
-        this.limitsMessage = ACCOUNT_VIEW_CONSTANTS.LIMITS.NO_LIMITS_FOUND;
-        this.notify.warning(ACCOUNT_VIEW_CONSTANTS.LIMITS.BAD_SERVER_RESPONSE);
       }
     } catch (error) {
       this.limitsMessage =
@@ -1479,18 +1488,21 @@ export default class AccountViewView extends Vue {
           status?: number;
         };
       };
-      logger.error("[Server Limits] Error retrieving limits:", {
-        error: error instanceof Error ? error.message : String(error),
-        did: did,
-        apiServer: this.apiServer,
-        imageServer: this.DEFAULT_IMAGE_API_SERVER,
-        partnerApiServer: this.partnerApiServer,
-        errorCode: axiosError?.response?.data?.error?.code,
-        errorMessage: axiosError?.response?.data?.error?.message,
-        httpStatus: axiosError?.response?.status,
-        needsUserMigration: true,
-        timestamp: new Date().toISOString(),
-      });
+      logger.warn(
+        "[Server Limits] Error retrieving limits, expected for unregistered users:",
+        {
+          error: error instanceof Error ? error.message : String(error),
+          did: did,
+          apiServer: this.apiServer,
+          imageServer: this.DEFAULT_IMAGE_API_SERVER,
+          partnerApiServer: this.partnerApiServer,
+          errorCode: axiosError?.response?.data?.error?.code,
+          errorMessage: axiosError?.response?.data?.error?.message,
+          httpStatus: axiosError?.response?.status,
+          needsUserMigration: true,
+          timestamp: new Date().toISOString(),
+        },
+      );
 
       // this.notify.error(this.limitsMessage, TIMEOUTS.STANDARD);
     } finally {

src/views/ClaimAddRawView.vue

@@ -1,19 +1,27 @@
 <template>
-  <QuickNav />
   <!-- 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">
-        <!-- Back -->
-        <button
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          @click="$router.back()"
-        >
-          <font-awesome icon="chevron-left" class="fa-fw" />
-        </button>
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
         Raw Claim
       </h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="$router.go(-1)"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <div class="flex">

src/views/ClaimView.vue

@@ -2,19 +2,27 @@
   <QuickNav />
   <!-- 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">
-        <!-- Back -->
-        <button
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          aria-label="Go back"
-          @click="$router.go(-1)"
-        >
-          <font-awesome icon="chevron-left" class="fa-fw" />
-        </button>
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
         Verifiable Claim Details
       </h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="$router.go(-1)"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <!-- Details -->
@@ -80,16 +88,25 @@
               </button>
             </div>
           </div>
-          <div class="text-sm">
-            <div data-testId="description">
-              <font-awesome icon="message" class="fa-fw text-slate-400" />
-              {{ claimDescription }}
+          <div class="text-sm overflow-hidden">
+            <div
+              data-testId="description"
+              class="flex items-start gap-2 overflow-hidden"
+            >
+              <font-awesome
+                icon="message"
+                class="fa-fw text-slate-400 flex-shrink-0 mt-1"
+              />
+              <vue-markdown
+                :source="claimDescription"
+                class="markdown-content flex-1 min-w-0"
+              />
             </div>
-            <div>
+            <div class="overflow-hidden text-ellipsis">
               <font-awesome icon="user" class="fa-fw text-slate-400" />
               {{ didInfo(veriClaim.issuer) }}
             </div>
-            <div>
+            <div class="overflow-hidden text-ellipsis">
               <font-awesome icon="calendar" class="fa-fw text-slate-400" />
               Recorded
               {{ formattedIssueDate }}
@@ -533,9 +550,11 @@ import { AxiosError } from "axios";
 import * as yaml from "js-yaml";
 import * as R from "ramda";
 import { Component, Vue } from "vue-facing-decorator";
+import VueMarkdown from "vue-markdown-render";
 import { Router, RouteLocationNormalizedLoaded } from "vue-router";
 import { copyToClipboard } from "../services/ClipboardService";
-import { GenericVerifiableCredential } from "../interfaces";
+
+import { EmojiClaim, GenericVerifiableCredential } from "../interfaces";
 import GiftedDialog from "../components/GiftedDialog.vue";
 import QuickNav from "../components/QuickNav.vue";
 import { NotificationIface } from "../constants/app";
@@ -553,7 +572,7 @@ import { createNotifyHelpers, TIMEOUTS } from "@/utils/notify";
 import { APP_SERVER } from "@/constants/app";
 
 @Component({
-  components: { GiftedDialog, QuickNav },
+  components: { GiftedDialog, QuickNav, VueMarkdown },
   mixins: [PlatformServiceMixin],
 })
 export default class ClaimView extends Vue {
@@ -651,6 +670,10 @@ export default class ClaimView extends Vue {
       return giveClaim.description || "";
     }
 
+    if (this.veriClaim.claimType === "Emoji") {
+      return (claim as EmojiClaim).text || "";
+    }
+
     // Fallback for other claim types
     return (claim as { description?: string })?.description || "";
   }

src/views/ConfirmContactView.vue

@@ -1,18 +1,27 @@
 <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: 'account' }"
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          ><font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
-        </router-link>
-
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
         Confirm Contact
       </h1>
+
+      <!-- Back -->
+      <router-link
+        class="order-first text-lg text-center leading-none p-1"
+        :to="{ name: 'account' }"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </router-link>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <p class="text-center text-xl mb-4 font-light">

src/views/ConfirmGiftView.vue

@@ -1,18 +1,11 @@
 <template>
-  <QuickNav />
-  <TopMessage />
   <!-- 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">
-        <!-- Back -->
-        <button
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          @click="$router.go(-1)"
-        >
-          <font-awesome icon="chevron-left" class="fa-fw" />
-        </button>
+    <TopMessage />
+
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
         <span
           v-if="
             libsUtil.isGiveRecordTheUserCanConfirm(
@@ -25,8 +18,24 @@
         >
           Do you agree?
         </span>
-        <span v-else> Confirmation Details </span>
+        <span v-else>Confirmation Details</span>
       </h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="$router.go(-1)"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <div v-if="giveDetails && !isLoading">

src/views/ContactAmountsView.vue

@@ -2,18 +2,27 @@
   <QuickNav selected="Contacts" />
 
   <section class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Header -->
-    <div class="mb-8">
-      <router-link
-        :to="{ name: 'contacts' }"
-        class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-      >
-        <font-awesome icon="chevron-left" class="fa-fw" />
-      </router-link>
-
-      <h1 class="text-4xl text-center font-light pt-4">
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
         Transferred with {{ contact?.name }}
       </h1>
+
+      <!-- Back -->
+      <router-link
+        class="order-first text-lg text-center leading-none p-1"
+        :to="{ name: 'contacts' }"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </router-link>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <!-- Info Messages -->
@@ -223,7 +232,7 @@ export default class ContactAmountssView extends Vue {
       const contact = await this.$getContact(contactDid);
       this.contact = contact;
 
-      const settings = await this.$settings();
+      const settings = await this.$accountSettings();
 
       // Get activeDid from active_identity table (single source of truth)
       // eslint-disable-next-line @typescript-eslint/no-explicit-any

src/views/ContactEditView.vue

@@ -1,19 +1,28 @@
 <template>
-  <QuickNav selected="Contacts" />
-  <TopMessage />
-
   <section id="ContactEdit" class="p-6 max-w-3xl mx-auto">
-    <div id="ViewBreadcrumb" class="mb-8">
-      <h1 class="text-4xl text-center font-light relative px-7">
-        <!-- Back -->
-        <button
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          @click="$router.go(-1)"
-        >
-          <font-awesome icon="chevron-left" class="fa-fw" />
-        </button>
+    <TopMessage />
+
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
         {{ contact?.name || AppString.NO_CONTACT_NAME }}
       </h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="$router.go(-1)"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <!-- Contact Name -->
@@ -337,9 +346,7 @@ export default class ContactEditView extends Vue {
 
     // Notify success and redirect
     this.notify.success(NOTIFY_CONTACT_SAVED.message, TIMEOUTS.STANDARD);
-    (this.$router as Router).push({
-      path: "/did/" + encodeURIComponent(this.contact?.did || ""),
-    });
+    this.$router.back();
   }
 }
 </script>

src/views/ContactGiftingView.vue

@@ -2,17 +2,27 @@
   <QuickNav selected="Home"></QuickNav>
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
-    <div id="ViewBreadcrumb" class="mb-8">
-      <h1 class="text-2xl text-center font-semibold relative px-7">
-        <!-- Back -->
-        <router-link
-          :to="{ name: 'home' }"
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          ><font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
-        </router-link>
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
         {{ stepType === "giver" ? "Given by..." : "Given to..." }}
       </h1>
+
+      <!-- Back -->
+      <router-link
+        class="order-first text-lg text-center leading-none p-1"
+        :to="{ name: 'home' }"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </router-link>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <!-- Results List -->

src/views/ContactImportView.vue

@@ -1,20 +1,28 @@
 <template>
   <QuickNav selected="Contacts"></QuickNav>
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Back -->
-    <div class="text-lg text-center font-light relative px-7">
-      <h1
-        class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-        @click="$router.back()"
-      >
-        <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
+        Contact Import
       </h1>
-    </div>
 
-    <!-- Heading -->
-    <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
-      Contact Import
-    </h1>
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="$router.go(-1)"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
+    </div>
 
     <div v-if="checkingImports" class="text-center">
       <font-awesome icon="spinner" class="animate-spin" />

src/views/ContactQRScanFullView.vue

@@ -2,26 +2,27 @@
   <!-- CONTENT -->
   <section id="Content" class="relative w-[100vw] h-[100vh]">
     <div :class="mainContentClasses">
-      <div class="mb-4">
-        <h1 class="text-xl text-center font-semibold relative">
-          <!-- Back -->
-          <a
-            class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-            @click="handleBack"
-          >
-            <font-awesome icon="chevron-left" class="fa-fw" />
-          </a>
-
-          <!-- Quick Help -->
-          <a
-            class="text-xl text-center text-blue-500 px-2 py-1 absolute -right-2 -top-1"
-            @click="toastQRCodeHelp()"
-          >
-            <font-awesome icon="circle-question" class="fa-fw" />
-          </a>
-
+      <!-- Sub View Heading -->
+      <div id="SubViewHeading" class="flex gap-4 items-start mb-4">
+        <h1 class="grow text-xl text-center font-semibold leading-tight">
           Share Contact Info
         </h1>
+
+        <!-- Back -->
+        <a
+          class="order-first text-lg text-center leading-none p-1"
+          @click="handleBack"
+        >
+          <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+        </a>
+
+        <!-- Quick Help -->
+        <a
+          class="block text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+          @click="toastQRCodeHelp()"
+        >
+          <font-awesome icon="question" class="block text-center w-[1em]" />
+        </a>
       </div>
 
       <div
@@ -235,7 +236,7 @@ export default class ContactQRScanFull extends Vue {
    * Computed property for main content container CSS classes
    */
   get mainContentClasses(): string {
-    return "p-6 bg-white w-full max-w-[calc((100vh-max(env(safe-area-inset-top),var(--safe-area-inset-top,0px))-max(env(safe-area-inset-bottom),var(--safe-area-inset-bottom,0px)))*0.4)] mx-auto";
+    return "p-4 bg-white w-full max-w-[calc((100vh-max(env(safe-area-inset-top),var(--safe-area-inset-top,0px))-max(env(safe-area-inset-bottom),var(--safe-area-inset-bottom,0px)))*0.4)] mx-auto";
   }
 
   /**

src/views/ContactQRScanShowView.vue

@@ -1,26 +1,27 @@
 <template>
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <div class="mb-2">
-      <h1 class="text-2xl text-center font-semibold relative px-7">
-        <!-- Back -->
-        <a
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          @click="handleBack"
-        >
-          <font-awesome icon="chevron-left" class="fa-fw" />
-        </a>
-
-        <!-- Quick Help -->
-        <a
-          class="text-2xl text-center text-blue-500 px-2 py-1 absolute -right-2 -top-1"
-          @click="toastQRCodeHelp()"
-        >
-          <font-awesome icon="circle-question" class="fa-fw" />
-        </a>
-
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
         Share Contact Info
       </h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="handleBack"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Quick Help -->
+      <a
+        class="block text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+        @click="toastQRCodeHelp()"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </a>
     </div>
 
     <div v-if="!givenName" :class="nameWarningClasses">

src/views/ContactsView.vue

@@ -1,14 +1,25 @@
 <template>
   <QuickNav selected="Contacts" />
-  <TopMessage />
 
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Heading -->
-    <h1 id="ViewHeading" class="text-4xl text-center font-light">
-      Your Contacts
-    </h1>
+    <TopMessage />
 
-    <div class="flex justify-between py-2 mt-8">
+    <!-- Main View Heading -->
+    <div class="flex gap-4 items-center mb-4">
+      <h1 id="ViewHeading" class="text-2xl font-bold leading-none">
+        Your Contacts
+      </h1>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
+    </div>
+
+    <div class="flex justify-between py-2 mt-4">
       <span />
       <span>
         <a
@@ -160,9 +171,11 @@ import {
   CONTACT_IMPORT_ONE_URL_PATH_TIME_SAFARI,
   CONTACT_URL_PATH_ENDORSER_CH_OLD,
 } from "../libs/endorserServer";
-import { GiveSummaryRecord } from "@/interfaces/records";
-import { UserInfo } from "@/interfaces/common";
-import { VerifiableCredential } from "@/interfaces/claims-result";
+import {
+  GiveSummaryRecord,
+  UserInfo,
+  VerifiableCredential,
+} from "@/interfaces";
 import * as libsUtil from "../libs/util";
 import {
   generateSaveAndActivateIdentity,

src/views/DIDView.vue

@@ -1,22 +1,31 @@
 <template>
   <QuickNav selected="Contacts" />
-  <TopMessage />
 
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
-    <div id="ViewBreadcrumb" class="mb-8">
-      <h1 id="ViewHeading" class="text-lg text-center font-light relative px-7">
-        <!-- Go to 'contacts' instead of just 'back' because they could get here from an edit page 
-             (and going back there is annoying). -->
-        <router-link
-          :to="{ name: 'contacts' }"
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-        >
-          <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
-        </router-link>
+    <TopMessage />
+
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
         Identifier Details
       </h1>
+
+      <!-- Back -->
+      <button
+        class="order-first text-lg text-center leading-none p-1"
+        @click="goBack()"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </button>
+
+      <!-- Help button -->
+      <button
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+        @click="goToHelp()"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </button>
     </div>
 
     <!-- Identity Details -->
@@ -25,7 +34,7 @@
       class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4"
     >
       <div>
-        <h2 class="text-xl font-semibold">
+        <h2 class="text-xl font-semibold overflow-hidden text-ellipsis">
           {{ contactFromDid?.name || "(no name)" }}
           <router-link
             :to="{ name: 'contact-edit', params: { did: contactFromDid?.did } }"
@@ -467,7 +476,7 @@ export default class DIDView extends Vue {
    * Navigation helper methods
    */
   goBack() {
-    this.$router.go(-1);
+    this.$router.back();
   }
 
   /**

src/views/DeepLinkErrorView.vue

@@ -1,7 +1,15 @@
 <template>
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <h1>Invalid Deep Link</h1>
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1
+        class="grow text-rose-500 text-xl text-center font-semibold leading-tight"
+      >
+        Invalid Deep Link
+      </h1>
+    </div>
+
     <div class="error-details">
       <div class="error-message">
         <h3>Error Details</h3>
@@ -114,11 +122,6 @@ onMounted(() => {
 </script>
 
 <style scoped>
-h1 {
-  color: #ff4444;
-  margin-bottom: 24px;
-}
-
 h2,
 h3 {
   color: #333;

src/views/DeepLinkRedirectView.vue

@@ -2,9 +2,12 @@
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
     <div class="mb-4">
-      <h1 class="text-2xl text-center font-semibold relative px-7">
-        Redirecting to Time Safari
-      </h1>
+      <!-- Sub View Heading -->
+      <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+        <h1 class="grow text-xl text-center font-semibold leading-tight">
+          Redirecting to Time Safari
+        </h1>
+      </div>
 
       <div v-if="destinationUrl" class="space-y-4">
         <!-- Platform-specific messaging -->

src/views/DiscoverView.vue

@@ -1,13 +1,22 @@
 <template>
   <QuickNav selected="Discover" />
-  <TopMessage />
 
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Heading -->
-    <h1 id="ViewHeading" class="text-4xl text-center font-light">
-      Discover Projects & People
-    </h1>
+    <TopMessage />
+
+    <!-- Main View Heading -->
+    <div class="flex gap-4 items-center mb-4">
+      <h1 id="ViewHeading" class="text-2xl font-bold leading-none">Discover</h1>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
+    </div>
 
     <OnboardingDialog ref="onboardingDialog" />
 
@@ -51,6 +60,33 @@
     <!-- Secondary 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 v-if="isProjectsActive">
+          <a
+            href="#"
+            :class="computedStarredTabStyleClassNames()"
+            @click="
+              projects = [];
+              userProfiles = [];
+              isStarredActive = true;
+              isLocalActive = false;
+              isMappedActive = false;
+              isAnywhereActive = false;
+              isSearchVisible = false;
+              tempSearchBox = null;
+              searchStarred();
+            "
+          >
+            Starred
+            <!-- restore when the links don't jump around for different numbers
+            <span
+              class="font-semibold text-sm bg-slate-200 px-1.5 py-0.5 rounded-md"
+              v-if="isLocalActive"
+            >
+              {{ localCount > -1 ? localCount : "?" }}
+            </span>
+            -->
+          </a>
+        </li>
         <li>
           <a
             href="#"
@@ -58,9 +94,11 @@
             @click="
               projects = [];
               userProfiles = [];
+              isStarredActive = false;
               isLocalActive = true;
               isMappedActive = false;
               isAnywhereActive = false;
+              isStarredActive = false;
               isSearchVisible = true;
               tempSearchBox = null;
               searchLocal();
@@ -84,9 +122,11 @@
             @click="
               projects = [];
               userProfiles = [];
+              isStarredActive = false;
               isLocalActive = false;
               isMappedActive = true;
               isAnywhereActive = false;
+              isStarredActive = false;
               isSearchVisible = false;
               searchTerms = '';
               tempSearchBox = null;
@@ -103,9 +143,11 @@
             @click="
               projects = [];
               userProfiles = [];
+              isStarredActive = false;
               isLocalActive = false;
               isMappedActive = false;
               isAnywhereActive = true;
+              isStarredActive = false;
               isSearchVisible = true;
               tempSearchBox = null;
               searchAll();
@@ -201,6 +243,15 @@
           >No {{ isProjectsActive ? "projects" : "people" }} were found with
           that search.</span
         >
+        <span v-else-if="isStarredActive">
+          <p>
+            You have no starred projects. Star some projects to see them here.
+          </p>
+          <p class="mt-4">
+            When you star projects, you will get a notice on the front page when
+            they change.
+          </p>
+        </span>
       </p>
     </div>
 
@@ -231,8 +282,8 @@
                 />
               </div>
 
-              <div class="grow">
-                <h2 class="text-base font-semibold">
+              <div class="grow overflow-hidden">
+                <h2 class="text-base font-semibold truncate">
                   {{ project.name || unnamedProject }}
                 </h2>
                 <div class="text-sm">
@@ -383,9 +434,12 @@ export default class DiscoverView extends Vue {
   allMyDids: Array<string> = [];
   apiServer = "";
   isLoading = false;
+
   isLocalActive = false;
   isMappedActive = false;
   isAnywhereActive = true;
+  isStarredActive = false;
+
   isProjectsActive = true;
   isPeopleActive = false;
   isSearchVisible = true;
@@ -474,6 +528,8 @@ export default class DiscoverView extends Vue {
         leafletObject: L.Map;
       };
       this.requestTiles(mapRef.leafletObject); // not ideal because I found this from experimentation, not documentation
+    } else if (this.isStarredActive) {
+      await this.searchStarred();
     } else {
       await this.searchAll();
     }
@@ -544,6 +600,60 @@ export default class DiscoverView extends Vue {
     }
   }
 
+  public async searchStarred() {
+    this.resetCounts();
+
+    // Clear any previous results
+    this.projects = [];
+    this.userProfiles = [];
+
+    try {
+      this.isLoading = true;
+
+      // Get starred project IDs from settings
+      const settings = await this.$accountSettings();
+
+      const starredIds = settings.starredPlanHandleIds || [];
+      if (starredIds.length === 0) {
+        // No starred projects
+        return;
+      }
+
+      // This could be optimized to only pull those not already in the cache (endorserServer.ts)
+
+      const planHandleIdsJson = JSON.stringify(starredIds);
+      const endpoint =
+        this.apiServer +
+        "/api/v2/report/plans?planHandleIds=" +
+        encodeURIComponent(planHandleIdsJson);
+      const response = await this.axios.get(endpoint, {
+        headers: await getHeaders(this.activeDid),
+      });
+      if (response.status !== 200) {
+        this.notify.error("Failed to load starred projects", TIMEOUTS.SHORT);
+        return;
+      }
+      const starredPlans: PlanData[] = response.data.data;
+      if (response.data.hitLimit) {
+        // someday we'll have to let them incrementally load the rest
+        this.notify.warning(
+          "Beware: you have so many starred projects that we cannot load them all.",
+          TIMEOUTS.SHORT,
+        );
+      }
+
+      this.projects = starredPlans;
+    } catch (error: unknown) {
+      logger.error("Error loading starred projects:", error);
+      this.notify.error(
+        "Failed to load starred projects. Please try again.",
+        TIMEOUTS.LONG,
+      );
+    } finally {
+      this.isLoading = false;
+    }
+  }
+
   public async searchLocal(beforeId?: string) {
     this.resetCounts();
 
@@ -637,9 +747,12 @@ export default class DiscoverView extends Vue {
         const latestProject = this.projects[this.projects.length - 1];
         if (this.isLocalActive || this.isMappedActive) {
           this.searchLocal(latestProject.rowId);
+        } else if (this.isStarredActive) {
+          this.searchStarred();
         } else if (this.isAnywhereActive) {
           this.searchAll(latestProject.rowId);
         }
+        // Note: Starred tab doesn't support pagination since we load all starred projects at once
       } else if (this.isPeopleActive && this.userProfiles.length > 0) {
         const latestProfile = this.userProfiles[this.userProfiles.length - 1];
         if (this.isLocalActive || this.isMappedActive) {
@@ -779,13 +892,31 @@ export default class DiscoverView extends Vue {
     this.$router.push(route);
   }
 
-  public computedLocalTabStyleClassNames() {
+  public computedStarredTabStyleClassNames() {
     return {
       "inline-block": true,
       "py-3": true,
       "rounded-t-lg": true,
       "border-b-2": true,
 
+      active: this.isStarredActive,
+      "text-black": this.isStarredActive,
+      "border-black": this.isStarredActive,
+      "font-semibold": this.isStarredActive,
+
+      "text-blue-600": !this.isStarredActive,
+      "border-transparent": !this.isStarredActive,
+      "hover:border-slate-400": !this.isStarredActive,
+    };
+  }
+
+  public computedLocalTabStyleClassNames() {
+    return {
+      "inline-block": true,
+      "py-2": true,
+      "rounded-t-lg": true,
+      "border-b-2": true,
+
       active: this.isLocalActive,
       "text-black": this.isLocalActive,
       "border-black": this.isLocalActive,
@@ -800,7 +931,7 @@ export default class DiscoverView extends Vue {
   public computedMappedTabStyleClassNames() {
     return {
       "inline-block": true,
-      "py-3": true,
+      "py-2": true,
       "rounded-t-lg": true,
       "border-b-2": true,
 
@@ -818,7 +949,7 @@ export default class DiscoverView extends Vue {
   public computedRemoteTabStyleClassNames() {
     return {
       "inline-block": true,
-      "py-3": true,
+      "py-2": true,
       "rounded-t-lg": true,
       "border-b-2": true,
 
@@ -836,7 +967,7 @@ export default class DiscoverView extends Vue {
   public computedProjectsTabStyleClassNames() {
     return {
       "inline-block": true,
-      "py-3": true,
+      "py-2": true,
       "rounded-t-lg": true,
       "border-b-2": true,
 
@@ -854,7 +985,7 @@ export default class DiscoverView extends Vue {
   public computedPeopleTabStyleClassNames() {
     return {
       "inline-block": true,
-      "py-3": true,
+      "py-2": true,
       "rounded-t-lg": true,
       "border-b-2": true,
 

src/views/GiftedDetailsView.vue

@@ -1,24 +1,33 @@
 <template>
-  <QuickNav />
-  <TopMessage />
-
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
-    <div id="ViewBreadcrumb" class="mb-8">
-      <h1 class="text-2xl text-center font-semibold relative px-7 mb-2">
+    <TopMessage />
+
+    <div class="mb-8">
+      <!-- Sub View Heading -->
+      <div id="SubViewHeading" class="flex gap-4 items-start mb-4">
+        <h1 class="grow text-xl text-center font-semibold leading-tight">
+          What Was Given
+        </h1>
+
         <!-- Back -->
-        <div
-          v-if="!hideBackButton"
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
+        <a
+          class="order-first text-lg text-center leading-none p-1"
           @click="cancelBack()"
         >
-          <font-awesome icon="chevron-left" class="fa-fw" />
-        </div>
-        What Was Given
-      </h1>
+          <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+        </a>
 
-      <h2 class="text-lg font-normal text-center overflow-hidden">
+        <!-- Help button -->
+        <router-link
+          :to="{ name: 'help' }"
+          class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+        >
+          <font-awesome icon="question" class="block text-center w-[1em]" />
+        </router-link>
+      </div>
+
+      <h2 class="text-lg font-normal leading-tight text-center overflow-hidden">
         <div class="truncate">
           From
           {{

src/views/HelpNotificationTypesView.vue

@@ -3,22 +3,27 @@
 
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
-    <div class="mb-8">
-      <!-- Back -->
-      <div class="text-lg text-center font-light relative px-7">
-        <h1
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          @click="$router.back()"
-        >
-          <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
-        </h1>
-      </div>
-
-      <!-- Heading -->
-      <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
         Notification Types
       </h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="$router.go(-1)"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <!-- eslint-disable prettier/prettier -->

src/views/HelpNotificationsView.vue

@@ -34,22 +34,27 @@
 
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
-    <div class="mb-8">
-      <!-- Back -->
-      <div class="text-lg text-center font-light relative px-7">
-        <h1
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          @click="goBack()"
-        >
-          <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
-        </h1>
-      </div>
-
-      <!-- Heading -->
-      <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
         Notification Help
       </h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="goBack()"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <!-- eslint-disable prettier/prettier -->

src/views/HelpOnboardingView.vue

@@ -3,11 +3,9 @@
 
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
-    <div class="mb-8">
-      <!-- Don't include 'back' button since this is shown in a different window. -->
-      <!-- Heading -->
-      <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
         Time Safari Onboarding Instructions
       </h1>
     </div>

src/views/HelpView.vue

@@ -3,23 +3,25 @@
 
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
-    <div class="mb-8">
-      <!-- Back -->
-      <div class="text-lg text-center font-light relative px-7">
-        <h1
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          @click="$router.back()"
-        >
-          <font-awesome icon="chevron-left" class="fa-fw" />
-        </h1>
-      </div>
-
-      <!-- Heading -->
-      <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
         Help
-        <span class="text-xs text-gray-500">{{ package.version }}</span>
+        <span class="text-xs font-medium text-slate-500 uppercase">{{
+          package.version
+        }}</span>
       </h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="$router.go(-1)"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Spacer (no Help button) -->
+      <div class="p-3 pe-3.5 pb-3.5"></div>
     </div>
 
     <!-- eslint-disable prettier/prettier max-len -->

src/views/HomeView.vue

@@ -6,7 +6,6 @@ Raymer * @version 1.0.0 */
 
 <template>
   <QuickNav selected="Home" />
-  <TopMessage />
 
   <!-- CONTENT -->
   <section
@@ -14,10 +13,25 @@ Raymer * @version 1.0.0 */
     class="p-6 pb-24 max-w-3xl mx-auto"
     :data-active-did="activeDid"
   >
-    <h1 id="ViewHeading" class="text-4xl text-center font-light mb-8">
-      {{ AppString.APP_NAME }}
-      <span class="text-xs text-gray-500">{{ package.version }}</span>
-    </h1>
+    <TopMessage />
+
+    <!-- Main View Heading -->
+    <div class="flex gap-4 items-center mb-4">
+      <h1 id="ViewHeading" class="text-2xl font-bold leading-none">
+        {{ AppString.APP_NAME }}
+        <span class="text-xs font-medium text-slate-500 uppercase">{{
+          package.version
+        }}</span>
+      </h1>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
+    </div>
 
     <OnboardingDialog ref="onboardingDialog" />
 
@@ -97,9 +111,9 @@ Raymer * @version 1.0.0 */
           <!-- Record Quick-Action -->
           <div class="mb-6">
             <div class="flex gap-2 items-center mb-2">
-              <h2 class="text-xl font-bold">Record something given by:</h2>
+              <h2 class="font-bold">Record something given by:</h2>
               <button
-                class="block ms-auto text-center text-white bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-2 rounded-full"
+                class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
                 @click="openGiftedPrompts()"
               >
                 <font-awesome
@@ -143,10 +157,10 @@ Raymer * @version 1.0.0 */
     <!-- Results List -->
     <div class="mt-4 mb-4">
       <div class="flex gap-2 items-center mb-3">
-        <h2 class="text-xl font-bold">Latest Activity</h2>
+        <h2 class="font-bold">Latest Activity</h2>
         <button
           v-if="resultsAreFiltered()"
-          class="block ms-auto text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-2 rounded-full"
+          class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
           @click="openFeedFilters()"
         >
           <font-awesome
@@ -156,7 +170,7 @@ Raymer * @version 1.0.0 */
         </button>
         <button
           v-else
-          class="block ms-auto text-center text-white bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-2 rounded-full"
+          class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
           @click="openFeedFilters()"
         >
           <font-awesome
@@ -170,10 +184,10 @@ Raymer * @version 1.0.0 */
         class="border-t p-2 border-slate-300"
         @click="goToActivityToUserPage()"
       >
-        <div class="flex justify-center">
+        <div class="flex justify-center gap-2">
           <div
             v-if="numNewOffersToUser"
-            class="bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] m-1 px-4 py-4 rounded-md text-white"
+            class="bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] flex-1 px-4 py-4 rounded-md text-white cursor-pointer"
           >
             <span
               class="block text-center text-6xl"
@@ -187,7 +201,7 @@ Raymer * @version 1.0.0 */
           </div>
           <div
             v-if="numNewOffersToUserProjects"
-            class="bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] m-1 px-4 py-4 rounded-md text-white"
+            class="bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] flex-1 px-4 py-4 rounded-md text-white cursor-pointer"
           >
             <span
               class="block text-center text-6xl"
@@ -201,6 +215,22 @@ Raymer * @version 1.0.0 */
               projects
             </p>
           </div>
+          <div
+            v-if="numNewStarredProjectChanges"
+            class="bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] flex-1 px-4 py-4 rounded-md text-white cursor-pointer"
+          >
+            <span
+              class="block text-center text-6xl"
+              data-testId="newStarredProjectChangesActivityNumber"
+            >
+              {{ numNewStarredProjectChanges
+              }}{{ newStarredProjectChangesHitLimit ? "+" : "" }}
+            </span>
+            <p class="text-center">
+              starred project{{ numNewStarredProjectChanges === 1 ? "" : "s" }}
+              with changes
+            </p>
+          </div>
         </div>
         <div class="flex justify-end mt-2">
           <button class="text-blue-500">View All New Activity For You</button>
@@ -215,6 +245,7 @@ Raymer * @version 1.0.0 */
             :last-viewed-claim-id="feedLastViewedClaimId"
             :is-registered="isRegistered"
             :active-did="activeDid"
+            :api-server="apiServer"
             @load-claim="onClickLoadClaim"
             @view-image="openImageViewer"
           />
@@ -268,6 +299,7 @@ import {
   getHeaders,
   getNewOffersToUser,
   getNewOffersToUserProjects,
+  getStarredProjectsWithChanges,
   getPlanFromCache,
 } from "../libs/endorserServer";
 import {
@@ -284,6 +316,7 @@ import { NOTIFY_CONTACT_LOADING_ISSUE } from "@/constants/notifications";
 import * as Package from "../../package.json";
 import { UNNAMED_ENTITY_NAME } from "@/constants/entities";
 import { errorStringForLog } from "../libs/endorserServer";
+import * as databaseUtil from "../db/databaseUtil";
 
 // consolidate this with GiveActionClaim in src/interfaces/claims.ts
 interface Claim {
@@ -396,11 +429,25 @@ export default class HomeView extends Vue {
   isRegistered = false;
   lastAckedOfferToUserJwtId?: string; // the last JWT ID for offer-to-user that they've acknowledged seeing
   lastAckedOfferToUserProjectsJwtId?: string; // the last JWT ID for offers-to-user's-projects that they've acknowledged seeing
+  lastAckedStarredPlanChangesJwtId?: string; // the last JWT ID for starred project changes that they've acknowledged seeing
   newOffersToUserHitLimit: boolean = false;
   newOffersToUserProjectsHitLimit: boolean = false;
+  newStarredProjectChangesHitLimit: boolean = false;
   numNewOffersToUser: number = 0; // number of new offers-to-user
   numNewOffersToUserProjects: number = 0; // number of new offers-to-user's-projects
 
+  numNewStarredProjectChanges: number = 0; // number of new starred project changes
+  starredPlanHandleIds: Array<string> = []; // list of starred project IDs
+  searchBoxes: Array<{
+    name: string;
+    bbox: BoundingBox;
+  }> = [];
+  showShortcutBvc = false;
+  userAgentInfo = new UAParser(); // see https://docs.uaparser.js.org/v2/api/ua-parser-js/get-os.html
+  selectedImage = "";
+  isImageViewerOpen = false;
+  showProjectsDialog = false;
+
   /**
    * CRITICAL VUE REACTIVITY BUG WORKAROUND
    *
@@ -438,16 +485,6 @@ export default class HomeView extends Vue {
   //   return shouldShow;
   // }
 
-  searchBoxes: Array<{
-    name: string;
-    bbox: BoundingBox;
-  }> = [];
-  showShortcutBvc = false;
-  userAgentInfo = new UAParser(); // see https://docs.uaparser.js.org/v2/api/ua-parser-js/get-os.html
-  selectedImage = "";
-  isImageViewerOpen = false;
-  showProjectsDialog = false;
-
   /**
    * Initializes notification helpers
    */
@@ -498,6 +535,7 @@ export default class HomeView extends Vue {
           this.numNewOffersToUser + this.numNewOffersToUserProjects > 0,
       });
 
+      await this.loadNewStarredProjectChanges();
       await this.checkOnboarding();
 
       logger.debug("[HomeView] mounted() - component lifecycle completed", {
@@ -623,8 +661,14 @@ export default class HomeView extends Vue {
       this.lastAckedOfferToUserJwtId = settings.lastAckedOfferToUserJwtId;
       this.lastAckedOfferToUserProjectsJwtId =
         settings.lastAckedOfferToUserProjectsJwtId;
+      this.lastAckedStarredPlanChangesJwtId =
+        settings.lastAckedStarredPlanChangesJwtId;
       this.searchBoxes = settings.searchBoxes || [];
       this.showShortcutBvc = !!settings.showShortcutBvc;
+      this.starredPlanHandleIds = databaseUtil.parseJsonField(
+        settings.starredPlanHandleIds,
+        [],
+      );
       this.isAnyFeedFilterOn = checkIsAnyFeedFilterOn(settings);
 
       // Check onboarding status
@@ -662,7 +706,7 @@ export default class HomeView extends Vue {
           };
 
           logger.warn(
-            "[HomeView Settings Trace] ⚠️ Registration check failed",
+            "[HomeView Settings Trace] ⚠️ Registration check failed, expected for unregistered users.",
             {
               error: errorMessage,
               did: this.activeDid,
@@ -705,7 +749,7 @@ export default class HomeView extends Vue {
    * Used for displaying contact info in feed and actions
    *
    * @internal
-   * Called by mounted() and initializeIdentity()
+   * Called by initializeIdentity()
    */
   private async loadContacts() {
     this.allContacts = await this.$contacts();
@@ -719,7 +763,6 @@ export default class HomeView extends Vue {
    * Triggers updateAllFeed() to populate activity feed
    *
    * @internal
-   * Called by mounted()
    */
   private async loadFeedData() {
     await this.updateAllFeed();
@@ -733,7 +776,6 @@ export default class HomeView extends Vue {
    * - Rate limit status for both
    *
    * @internal
-   * Called by mounted() and initializeIdentity()
    * @requires Active DID
    */
   private async loadNewOffers() {
@@ -837,6 +879,42 @@ export default class HomeView extends Vue {
     }
   }
 
+  /**
+   * Loads new changes for starred projects
+   * Updates:
+   * - Number of new starred project changes
+   * - Rate limit status for starred project changes
+   *
+   * @internal
+   * @requires Active DID
+   */
+  private async loadNewStarredProjectChanges() {
+    if (this.activeDid && this.starredPlanHandleIds.length > 0) {
+      try {
+        const starredProjectChanges = await getStarredProjectsWithChanges(
+          this.axios,
+          this.apiServer,
+          this.activeDid,
+          this.starredPlanHandleIds,
+          this.lastAckedStarredPlanChangesJwtId,
+        );
+        this.numNewStarredProjectChanges = starredProjectChanges.data.length;
+        this.newStarredProjectChangesHitLimit = starredProjectChanges.hitLimit;
+      } catch (error) {
+        // Don't show errors for starred project changes as it's a secondary feature
+        logger.warn(
+          "[HomeView] Failed to load starred project changes:",
+          error,
+        );
+        this.numNewStarredProjectChanges = 0;
+        this.newStarredProjectChangesHitLimit = false;
+      }
+    } else {
+      this.numNewStarredProjectChanges = 0;
+      this.newStarredProjectChangesHitLimit = false;
+    }
+  }
+
   /**
    * Checks if user needs onboarding using ultra-concise mixin utilities
    * Opens onboarding dialog if not completed
@@ -1187,6 +1265,7 @@ export default class HomeView extends Vue {
       provider,
       fulfillsPlan,
       providedByPlan,
+      record.emojiCount,
     );
   }
 
@@ -1410,12 +1489,14 @@ export default class HomeView extends Vue {
     provider: Provider | undefined,
     fulfillsPlan?: FulfillsPlan,
     providedByPlan?: ProvidedByPlan,
+    emojiCount?: Record<string, number>,
   ): GiveRecordWithContactInfo {
     return {
       ...record,
       jwtId: record.jwtId,
       fullClaim: record.fullClaim,
       description: record.description || "",
+      emojiCount: emojiCount || {},
       handleId: record.handleId,
       issuerDid: record.issuerDid,
       fulfillsPlanHandleId: record.fulfillsPlanHandleId,

src/views/IdentitySwitcherView.vue

@@ -1,18 +1,27 @@
 <template>
   <QuickNav selected="Profile"></QuickNav>
   <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: 'account' }"
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          ><font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
-        </router-link>
-
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
         Switch Identity
       </h1>
+
+      <!-- Back -->
+      <router-link
+        class="order-first text-lg text-center leading-none p-1"
+        :to="{ name: 'account' }"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </router-link>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <!-- Identity List -->

src/views/ImportAccountView.vue

@@ -1,17 +1,26 @@
 <template>
   <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 -->
-        <button
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          @click="$router.go(-1)"
-        >
-          <font-awesome icon="chevron-left"></font-awesome>
-        </button>
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
         Import Existing Identifier
       </h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="$router.go(-1)"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
     <!-- Import Account Form -->
     <p class="text-center text-xl mb-4 font-light">

src/views/ImportDerivedAccountView.vue

@@ -1,20 +1,29 @@
 <template>
   <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 -->
-        <button
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          @click="$router.go(-1)"
-        >
-          <font-awesome icon="chevron-left"></font-awesome>
-        </button>
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
         Derive from Existing Identity
       </h1>
-    </div>
-    <!-- Import Account Form -->
 
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="$router.go(-1)"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
+    </div>
+
+    <!-- Import Account Form -->
     <div>
       <p class="text-center text-xl mb-4 font-light">
         Will increment the maximum known derivation path from the existing seed.

src/views/InviteOneView.vue

@@ -1,20 +1,31 @@
 <template>
-  <QuickNav selected="Invite" />
-  <TopMessage />
+  <QuickNav selected="Contacts" />
 
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Back -->
-    <div class="text-lg text-center font-light relative px-7">
-      <h1
-        class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-        @click="$router.back()"
-      >
-        <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
-      </h1>
-    </div>
+    <TopMessage />
 
-    <!-- Heading -->
-    <h1 class="text-4xl text-center font-light">Invitations</h1>
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
+        Invitations
+      </h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="$router.go(-1)"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
+    </div>
 
     <ul class="ml-8 mt-4 list-outside list-disc w-5/6">
       <li>

src/views/LogView.vue

@@ -1,22 +1,31 @@
 <!-- This is useful in an environment where the download doesn't work. -->
 <template>
   <QuickNav selected="" />
-  <TopMessage />
 
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Back Button -->
-    <div class="relative px-7">
-      <h1
-        class="text-lg text-center font-light px-2 py-1 absolute -left-2 -top-1"
-        @click="$router.back()"
-      >
-        <font-awesome icon="chevron-left" class="mr-2" />
-      </h1>
-    </div>
+    <TopMessage />
 
-    <!-- Heading -->
-    <h1 id="ViewHeading" class="text-4xl text-center font-light mb-6">Logs</h1>
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">Logs</h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="$router.go(-1)"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
+    </div>
 
     <!-- Error Message -->
     <div

src/views/NewActivityView.vue

@@ -2,17 +2,27 @@
   <QuickNav selected="Home"></QuickNav>
   <!-- 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">
-        <!-- Back -->
-        <font-awesome
-          icon="chevron-left"
-          class="fa-fw text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          @click="$router.back()"
-        />
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
         New Activity For You
       </h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="$router.go(-1)"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <!-- Display a single row with the name of "New Offers To You" with a count. -->
@@ -29,7 +39,7 @@
           v-if="newOffersToUser.length > 0"
           :icon="showOffersDetails ? 'chevron-down' : 'chevron-right'"
           class="cursor-pointer ml-4 mr-4 text-lg"
-          @click="expandOffersToUserAndMarkRead()"
+          @click.prevent="expandOffersToUserAndMarkRead()"
         />
       </div>
       <a class="text-blue-500 cursor-pointer" @click="handleSeeAllOffersToUser">
@@ -48,7 +58,7 @@
             didInfo(offer.offeredByDid, activeDid, allMyDids, allContacts)
           }}</span>
           offered
-          <span v-if="offer.objectDescription">{{
+          <span v-if="offer.objectDescription" class="truncate">{{
             offer.objectDescription
           }}</span
           >{{ offer.objectDescription && offer.amount ? ", and " : "" }}
@@ -67,10 +77,10 @@
           <!-- New line that appears on hover or when the offer is clicked -->
           <div
             class="absolute left-0 w-full text-left text-gray-500 text-sm hidden group-hover:flex cursor-pointer items-center"
-            @click="markOffersAsReadStartingWith(offer.jwtId)"
+            @click.prevent="markOffersAsReadStartingWith(offer.jwtId)"
           >
             <span class="inline-block w-8 h-px bg-gray-500 mr-2" />
-            Click to keep all above as new offers
+            Click to keep all above as unread offers
           </div>
         </li>
       </ul>
@@ -96,7 +106,7 @@
             showOffersToUserProjectsDetails ? 'chevron-down' : 'chevron-right'
           "
           class="cursor-pointer ml-4 mr-4 text-lg"
-          @click="expandOffersToUserProjectsAndMarkRead()"
+          @click.prevent="expandOffersToUserProjectsAndMarkRead()"
         />
       </div>
       <a
@@ -118,7 +128,7 @@
             didInfo(offer.offeredByDid, activeDid, allMyDids, allContacts)
           }}</span>
           offered
-          <span v-if="offer.objectDescription">{{
+          <span v-if="offer.objectDescription" class="truncate">{{
             offer.objectDescription
           }}</span
           >{{ offer.objectDescription && offer.amount ? ", and " : "" }}
@@ -139,10 +149,153 @@
           <!-- New line that appears on hover -->
           <div
             class="absolute left-0 w-full text-left text-gray-500 text-sm hidden group-hover:flex cursor-pointer items-center"
-            @click="markOffersToUserProjectsAsReadStartingWith(offer.jwtId)"
+            @click.prevent="
+              markOffersToUserProjectsAsReadStartingWith(offer.jwtId)
+            "
           >
             <span class="inline-block w-8 h-px bg-gray-500 mr-2" />
-            Click to keep all above as new offers
+            Click to keep all above as unread offers
+          </div>
+        </li>
+      </ul>
+    </div>
+
+    <!-- Starred Projects with Changes Section -->
+    <div
+      class="flex justify-between mt-6"
+      data-testId="showStarredProjectChanges"
+    >
+      <div>
+        <span class="text-lg font-medium"
+          >{{ newStarredProjectChanges.length
+          }}{{ newStarredProjectChangesHitLimit ? "+" : "" }}</span
+        >
+        <span class="text-lg font-medium ml-4"
+          >Starred Project{{
+            newStarredProjectChanges.length === 1 ? "" : "s"
+          }}
+          With Changes</span
+        >
+        <font-awesome
+          v-if="newStarredProjectChanges.length > 0"
+          :icon="
+            showStarredProjectChangesDetails ? 'chevron-down' : 'chevron-right'
+          "
+          class="cursor-pointer ml-4 mr-4 text-lg"
+          @click.prevent="expandStarredProjectChangesAndMarkRead()"
+        />
+      </div>
+    </div>
+
+    <div v-if="showStarredProjectChangesDetails" class="ml-4 mt-4">
+      <ul class="list-disc ml-4">
+        <li
+          v-for="projectChange in newStarredProjectChanges"
+          :key="projectChange.plan.handleId"
+          class="mt-4 relative group"
+        >
+          <div class="flex items-center gap-2">
+            <div class="flex-1 min-w-0">
+              <span class="font-medium">{{
+                projectChange.plan.name || "Unnamed Project"
+              }}</span>
+              <span
+                v-if="projectChange.plan.description"
+                class="text-gray-600 block truncate"
+              >
+                {{ projectChange.plan.description }}
+              </span>
+            </div>
+            <router-link
+              :to="{
+                path:
+                  '/project/' + encodeURIComponent(projectChange.plan.handleId),
+              }"
+              class="text-blue-500 flex-shrink-0"
+            >
+              <font-awesome
+                icon="file-lines"
+                class="text-blue-500 cursor-pointer"
+              />
+            </router-link>
+          </div>
+          <!-- Show what changed -->
+          <div
+            v-if="getPlanDifferences(projectChange.plan.handleId)"
+            class="text-sm mt-2"
+          >
+            <div class="font-medium mb-2">Changes</div>
+            <div class="overflow-x-auto">
+              <table
+                class="w-full text-xs border-collapse border border-gray-300 rounded-lg shadow-sm bg-white"
+              >
+                <thead>
+                  <tr class="bg-gray-50">
+                    <th
+                      class="border border-gray-300 px-3 py-2 text-left font-semibold text-gray-700"
+                    ></th>
+                    <th
+                      class="border border-gray-300 px-3 py-2 text-left font-semibold text-gray-700"
+                    >
+                      Previous
+                    </th>
+                    <th
+                      class="border border-gray-300 px-3 py-2 text-left font-semibold text-gray-700"
+                    >
+                      Current
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr
+                    v-for="(difference, field) in getPlanDifferences(
+                      projectChange.plan.handleId,
+                    )"
+                    :key="field"
+                    class="hover:bg-gray-50"
+                  >
+                    <td
+                      class="border border-gray-300 px-3 py-2 font-medium text-gray-800 break-words"
+                    >
+                      {{ getDisplayFieldName(field) }}
+                    </td>
+                    <td
+                      class="border border-gray-300 px-3 py-2 text-gray-600 break-words align-top"
+                    >
+                      <vue-markdown
+                        v-if="field === 'description' && difference.old"
+                        :source="formatFieldValue(difference.old)"
+                        class="markdown-content"
+                      />
+                      <span v-else>{{ formatFieldValue(difference.old) }}</span>
+                    </td>
+                    <td
+                      class="border border-gray-300 px-3 py-2 text-green-700 font-medium break-words align-top"
+                    >
+                      <vue-markdown
+                        v-if="field === 'description' && difference.new"
+                        :source="formatFieldValue(difference.new)"
+                        class="markdown-content"
+                      />
+                      <span v-else>{{ formatFieldValue(difference.new) }}</span>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+          <div v-else>The changes did not affect essential project data.</div>
+          <!-- New line that appears on hover -->
+          <div
+            class="absolute left-0 w-full text-left text-gray-500 text-sm hidden group-hover:flex cursor-pointer items-center"
+            @click.prevent="
+              markStarredProjectChangesAsReadStartingWith(
+                projectChange.plan.jwtId!,
+              )
+            "
+          >
+            <span class="inline-block w-8 h-px bg-gray-500 mr-2" />
+            Click to keep all above as unread changes
           </div>
         </li>
       </ul>
@@ -152,6 +305,7 @@
 
 <script lang="ts">
 import { Component, Vue } from "vue-facing-decorator";
+import VueMarkdown from "vue-markdown-render";
 
 import GiftedDialog from "../components/GiftedDialog.vue";
 import QuickNav from "../components/QuickNav.vue";
@@ -162,20 +316,28 @@ import { Router } from "vue-router";
 import {
   OfferSummaryRecord,
   OfferToPlanSummaryRecord,
+  PlanSummaryAndPreviousClaim,
+  PlanSummaryRecord,
 } from "../interfaces/records";
 import {
   didInfo,
+  didInfoOrNobody,
   displayAmount,
   getNewOffersToUser,
   getNewOffersToUserProjects,
+  getStarredProjectsWithChanges,
 } from "../libs/endorserServer";
 import { retrieveAccountDids } from "../libs/util";
 import { logger } from "../utils/logger";
 import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
 import { createNotifyHelpers, TIMEOUTS } from "@/utils/notify";
+import * as databaseUtil from "../db/databaseUtil";
+import * as R from "ramda";
+import { PlanActionClaim } from "../interfaces/claims";
+import { GenericCredWrapper } from "@/interfaces";
 
 @Component({
-  components: { GiftedDialog, QuickNav, EntityIcon },
+  components: { GiftedDialog, QuickNav, EntityIcon, VueMarkdown },
   mixins: [PlatformServiceMixin],
 })
 export default class NewActivityView extends Vue {
@@ -189,13 +351,22 @@ export default class NewActivityView extends Vue {
   apiServer = "";
   lastAckedOfferToUserJwtId = "";
   lastAckedOfferToUserProjectsJwtId = "";
+  lastAckedStarredPlanChangesJwtId = "";
   newOffersToUser: Array<OfferSummaryRecord> = [];
   newOffersToUserHitLimit = false;
   newOffersToUserProjects: Array<OfferToPlanSummaryRecord> = [];
   newOffersToUserProjectsHitLimit = false;
+  newStarredProjectChanges: Array<PlanSummaryAndPreviousClaim> = [];
+  newStarredProjectChangesHitLimit = false;
+  starredPlanHandleIds: Array<string> = [];
+  planDifferences: Record<
+    string,
+    Record<string, { old: unknown; new: unknown }>
+  > = {};
 
   showOffersDetails = false;
   showOffersToUserProjectsDetails = false;
+  showStarredProjectChangesDetails = false;
   didInfo = didInfo;
   displayAmount = displayAmount;
 
@@ -214,6 +385,12 @@ export default class NewActivityView extends Vue {
       this.lastAckedOfferToUserJwtId = settings.lastAckedOfferToUserJwtId || "";
       this.lastAckedOfferToUserProjectsJwtId =
         settings.lastAckedOfferToUserProjectsJwtId || "";
+      this.lastAckedStarredPlanChangesJwtId =
+        settings.lastAckedStarredPlanChangesJwtId || "";
+      this.starredPlanHandleIds = databaseUtil.parseJsonField(
+        settings.starredPlanHandleIds,
+        [],
+      );
 
       this.allContacts = await this.$getAllContacts();
 
@@ -237,6 +414,29 @@ export default class NewActivityView extends Vue {
       this.newOffersToUserProjects = offersToUserProjectsData.data;
       this.newOffersToUserProjectsHitLimit = offersToUserProjectsData.hitLimit;
 
+      // Load starred project changes if user has starred projects
+      if (this.starredPlanHandleIds.length > 0) {
+        try {
+          const starredProjectChangesData = await getStarredProjectsWithChanges(
+            this.axios,
+            this.apiServer,
+            this.activeDid,
+            this.starredPlanHandleIds,
+            this.lastAckedStarredPlanChangesJwtId,
+          );
+          this.newStarredProjectChanges = starredProjectChangesData.data;
+          this.newStarredProjectChangesHitLimit =
+            starredProjectChangesData.hitLimit;
+
+          // Analyze differences between current plans and previous claims
+          this.analyzePlanDifferences(this.newStarredProjectChanges);
+        } catch (error) {
+          logger.warn("Failed to load starred project changes:", error);
+          this.newStarredProjectChanges = [];
+          this.newStarredProjectChangesHitLimit = false;
+        }
+      }
+
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (err: any) {
       logger.error("Error retrieving settings & contacts:", err);
@@ -250,13 +450,13 @@ export default class NewActivityView extends Vue {
   async expandOffersToUserAndMarkRead() {
     this.showOffersDetails = !this.showOffersDetails;
     if (this.showOffersDetails && this.newOffersToUser.length > 0) {
-      await this.$updateSettings({
+      await this.$saveUserSettings(this.activeDid, {
         lastAckedOfferToUserJwtId: this.newOffersToUser[0].jwtId,
       });
       // note that we don't update this.lastAckedOfferToUserJwtId in case they
       // later choose the last one to keep the offers as new
       this.notify.info(
-        "The offers are marked as viewed. Click in the list to keep them as new.",
+        "The offers are marked as read. Click in the list to keep them unread.",
         TIMEOUTS.LONG,
       );
     }
@@ -268,12 +468,12 @@ export default class NewActivityView extends Vue {
     );
     if (index !== -1 && index < this.newOffersToUser.length - 1) {
       // Set to the next offer's jwtId
-      await this.$updateSettings({
+      await this.$saveUserSettings(this.activeDid, {
         lastAckedOfferToUserJwtId: this.newOffersToUser[index + 1].jwtId,
       });
     } else {
       // it's the last entry (or not found), so just keep it the same
-      await this.$updateSettings({
+      await this.$saveUserSettings(this.activeDid, {
         lastAckedOfferToUserJwtId: this.lastAckedOfferToUserJwtId,
       });
     }
@@ -290,14 +490,14 @@ export default class NewActivityView extends Vue {
       this.showOffersToUserProjectsDetails &&
       this.newOffersToUserProjects.length > 0
     ) {
-      await this.$updateSettings({
+      await this.$saveUserSettings(this.activeDid, {
         lastAckedOfferToUserProjectsJwtId:
           this.newOffersToUserProjects[0].jwtId,
       });
       // note that we don't update this.lastAckedOfferToUserProjectsJwtId in case
       // they later choose the last one to keep the offers as new
       this.notify.info(
-        "The offers are marked as viewed. Click in the list to keep them as new.",
+        "The offers are now marked read. Click in the list to keep them unread.",
         TIMEOUTS.LONG,
       );
     }
@@ -309,13 +509,13 @@ export default class NewActivityView extends Vue {
     );
     if (index !== -1 && index < this.newOffersToUserProjects.length - 1) {
       // Set to the next offer's jwtId
-      await this.$updateSettings({
+      await this.$saveUserSettings(this.activeDid, {
         lastAckedOfferToUserProjectsJwtId:
           this.newOffersToUserProjects[index + 1].jwtId,
       });
     } else {
       // it's the last entry (or not found), so just keep it the same
-      await this.$updateSettings({
+      await this.$saveUserSettings(this.activeDid, {
         lastAckedOfferToUserProjectsJwtId:
           this.lastAckedOfferToUserProjectsJwtId,
       });
@@ -333,5 +533,382 @@ export default class NewActivityView extends Vue {
   async handleSeeAllOffersToUserProjects() {
     this.$router.push("/recent-offers-to-user-projects");
   }
+
+  async expandStarredProjectChangesAndMarkRead() {
+    this.showStarredProjectChangesDetails =
+      !this.showStarredProjectChangesDetails;
+    if (
+      this.showStarredProjectChangesDetails &&
+      this.newStarredProjectChanges.length > 0
+    ) {
+      await this.$saveUserSettings(this.activeDid, {
+        lastAckedStarredPlanChangesJwtId:
+          this.newStarredProjectChanges[0].plan.jwtId,
+      });
+      this.notify.info(
+        "The starred project changes are now marked read. Click in the list to keep them unread.",
+        TIMEOUTS.LONG,
+      );
+    }
+  }
+
+  async markStarredProjectChangesAsReadStartingWith(jwtId: string) {
+    const index = this.newStarredProjectChanges.findIndex(
+      (change) => change.plan.jwtId === jwtId,
+    );
+    if (index !== -1 && index < this.newStarredProjectChanges.length - 1) {
+      // Set to the next change's jwtId
+      await this.$saveUserSettings(this.activeDid, {
+        lastAckedStarredPlanChangesJwtId:
+          this.newStarredProjectChanges[index + 1].plan.jwtId,
+      });
+    } else {
+      // it's the last entry (or not found), so just keep it the same
+      await this.$saveUserSettings(this.activeDid, {
+        lastAckedStarredPlanChangesJwtId: this.lastAckedStarredPlanChangesJwtId,
+      });
+    }
+    this.notify.info(
+      "All starred project changes above that line are marked as unread.",
+      TIMEOUTS.STANDARD,
+    );
+  }
+
+  /**
+   * Analyzes differences between current plans and their previous claims
+   *
+   * Walks through a list of PlanSummaryAndPreviousClaim items and stores the
+   * differences between the previous claim and the current plan. This method
+   * extracts the claim from the wrappedClaimBefore object and compares relevant
+   * fields with the current plan.
+   *
+   * @param planChanges Array of PlanSummaryAndPreviousClaim objects to analyze
+   */
+  analyzePlanDifferences(planChanges: Array<PlanSummaryAndPreviousClaim>) {
+    this.planDifferences = {};
+
+    for (const planChange of planChanges) {
+      const currentPlan: PlanSummaryRecord = planChange.plan;
+      const wrappedClaim: GenericCredWrapper<PlanActionClaim> =
+        planChange.wrappedClaimBefore;
+
+      // Extract the actual claim from the wrapped claim
+      let previousClaim: PlanActionClaim;
+
+      const embeddedClaim: PlanActionClaim = wrappedClaim.claim;
+      if (
+        embeddedClaim &&
+        typeof embeddedClaim === "object" &&
+        "credentialSubject" in embeddedClaim
+      ) {
+        // It's a Verifiable Credential
+        previousClaim =
+          (embeddedClaim.credentialSubject as PlanActionClaim) || embeddedClaim;
+      } else {
+        // It's a direct claim
+        previousClaim = embeddedClaim;
+      }
+
+      if (!previousClaim || !currentPlan.handleId) {
+        continue;
+      }
+
+      const differences: Record<string, { old: unknown; new: unknown }> = {};
+
+      // Compare name
+      const normalizedOldName = this.normalizeValueForComparison(
+        previousClaim.name,
+      );
+      const normalizedNewName = this.normalizeValueForComparison(
+        currentPlan.name,
+      );
+      if (!R.equals(normalizedOldName, normalizedNewName)) {
+        differences.name = {
+          old: previousClaim.name,
+          new: currentPlan.name,
+        };
+      }
+
+      // Compare description
+      const normalizedOldDescription = this.normalizeValueForComparison(
+        previousClaim.description,
+      );
+      const normalizedNewDescription = this.normalizeValueForComparison(
+        currentPlan.description,
+      );
+      if (!R.equals(normalizedOldDescription, normalizedNewDescription)) {
+        differences.description = {
+          old: previousClaim.description,
+          new: currentPlan.description,
+        };
+      }
+
+      // Compare location (combine latitude and longitude into one row)
+      const oldLat = this.normalizeValueForComparison(
+        previousClaim.location?.geo?.latitude,
+      );
+      const oldLon = this.normalizeValueForComparison(
+        previousClaim.location?.geo?.longitude,
+      );
+      const newLat = this.normalizeValueForComparison(currentPlan.locLat);
+      const newLon = this.normalizeValueForComparison(currentPlan.locLon);
+
+      if (!R.equals(oldLat, newLat) || !R.equals(oldLon, newLon)) {
+        differences.location = {
+          old: this.formatLocationValue(oldLat, oldLon, true),
+          new: this.formatLocationValue(newLat, newLon, false),
+        };
+      }
+
+      // Compare agent (issuer)
+      const oldAgent = didInfoOrNobody(
+        previousClaim.agent?.identifier,
+        this.activeDid,
+        this.allMyDids,
+        this.allContacts,
+      );
+      const newAgent = didInfoOrNobody(
+        currentPlan.agentDid,
+        this.activeDid,
+        this.allMyDids,
+        this.allContacts,
+      );
+      const normalizedOldAgent = this.normalizeValueForComparison(oldAgent);
+      const normalizedNewAgent = this.normalizeValueForComparison(newAgent);
+      if (!R.equals(normalizedOldAgent, normalizedNewAgent)) {
+        differences.agent = {
+          old: oldAgent,
+          new: newAgent,
+        };
+      }
+
+      // Compare start time
+      const oldStartTime = previousClaim.startTime;
+      const newStartTime = currentPlan.startTime;
+      const normalizedOldStartTime =
+        this.normalizeDateForComparison(oldStartTime);
+      const normalizedNewStartTime =
+        this.normalizeDateForComparison(newStartTime);
+      if (!R.equals(normalizedOldStartTime, normalizedNewStartTime)) {
+        differences.startTime = {
+          old: oldStartTime,
+          new: newStartTime,
+        };
+      }
+
+      // Compare end time
+      const oldEndTime = previousClaim.endTime;
+      const newEndTime = currentPlan.endTime;
+      const normalizedOldEndTime = this.normalizeDateForComparison(oldEndTime);
+      const normalizedNewEndTime = this.normalizeDateForComparison(newEndTime);
+      if (!R.equals(normalizedOldEndTime, normalizedNewEndTime)) {
+        differences.endTime = {
+          old: oldEndTime,
+          new: newEndTime,
+        };
+      }
+
+      // Compare image
+      const oldImage = previousClaim.image;
+      const newImage = currentPlan.image;
+      const normalizedOldImage = this.normalizeValueForComparison(oldImage);
+      const normalizedNewImage = this.normalizeValueForComparison(newImage);
+      if (!R.equals(normalizedOldImage, normalizedNewImage)) {
+        differences.image = {
+          old: oldImage,
+          new: newImage,
+        };
+      }
+
+      // Compare url
+      const oldUrl = previousClaim.url;
+      const newUrl = currentPlan.url;
+      const normalizedOldUrl = this.normalizeValueForComparison(oldUrl);
+      const normalizedNewUrl = this.normalizeValueForComparison(newUrl);
+      if (!R.equals(normalizedOldUrl, normalizedNewUrl)) {
+        differences.url = {
+          old: oldUrl,
+          new: newUrl,
+        };
+      }
+
+      // Store differences if any were found
+      if (!R.isEmpty(differences)) {
+        this.planDifferences[currentPlan.handleId] = differences;
+        logger.debug(
+          "[NewActivityView] Plan differences found for",
+          currentPlan.handleId,
+          differences,
+        );
+      }
+    }
+
+    logger.debug(
+      "[NewActivityView] Analyzed",
+      planChanges.length,
+      "plan changes, found differences in",
+      Object.keys(this.planDifferences).length,
+      "plans",
+    );
+  }
+
+  /**
+   * Normalizes values for comparison - treats null, undefined, and empty string as equivalent
+   *
+   * @param value The value to normalize
+   * @returns The normalized value (null for null/undefined/empty, otherwise the original value)
+   */
+  normalizeValueForComparison<T>(value: T | null | undefined): T | null {
+    if (value === null || value === undefined || value === "") {
+      return null;
+    }
+    return value;
+  }
+
+  /**
+   * Normalizes date values for comparison by converting strings to Date objects
+   * Returns null for null/undefined/empty values, Date objects for valid date strings
+   */
+  normalizeDateForComparison(value: unknown): Date | null {
+    if (value === null || value === undefined || value === "") {
+      return null;
+    }
+    if (typeof value === "string") {
+      const date = new Date(value);
+      // Check if the date is valid
+      return isNaN(date.getTime()) ? null : date;
+    }
+    if (value instanceof Date) {
+      return isNaN(value.getTime()) ? null : value;
+    }
+    return null;
+  }
+
+  /**
+   * Gets the differences for a specific plan by handle ID
+   *
+   * @param handleId The handle ID of the plan to get differences for
+   * @returns The differences object or null if no differences found
+   */
+  getPlanDifferences(
+    handleId: string,
+  ): Record<string, { old: unknown; new: unknown }> | null {
+    return this.planDifferences[handleId] || null;
+  }
+
+  /**
+   * Formats a field value for display in the UI
+   *
+   * @param value The value to format
+   * @returns A human-readable string representation
+   */
+  formatFieldValue(value: unknown): string {
+    if (value === null || value === undefined) {
+      return "Not set";
+    }
+    if (typeof value === "string") {
+      const stringValue = value || "Empty";
+
+      // Check if it's a date/time string
+      if (this.isDateTimeString(stringValue)) {
+        return this.formatDateTime(stringValue);
+      }
+
+      // Check if it's a URL
+      if (this.isUrl(stringValue)) {
+        return stringValue; // Keep URLs as-is for now
+      }
+
+      return stringValue;
+    }
+    if (typeof value === "number") {
+      return value.toString();
+    }
+    if (typeof value === "boolean") {
+      return value ? "Yes" : "No";
+    }
+    // For complex objects, stringify
+    const stringified = JSON.stringify(value);
+    return stringified;
+  }
+
+  /**
+   * Checks if a string appears to be a date/time string
+   */
+  isDateTimeString(value: string): boolean {
+    if (!value) return false;
+    // Check for ISO 8601 format or other common date formats
+    const dateRegex = /^\d{4}-\d{2}-\d{2}(T\d{2}:\d{2}:\d{2})?(\.\d{3})?Z?$/;
+    return dateRegex.test(value) || !isNaN(Date.parse(value));
+  }
+
+  /**
+   * Checks if a string is a URL
+   */
+  isUrl(value: string): boolean {
+    if (!value) return false;
+    try {
+      new URL(value);
+      return true;
+    } catch {
+      return false;
+    }
+  }
+
+  /**
+   * Formats a date/time string for display
+   */
+  formatDateTime(value: string): string {
+    try {
+      const date = new Date(value);
+      return date.toLocaleString();
+    } catch {
+      return value; // Return original if parsing fails
+    }
+  }
+
+  /**
+   * Gets a human-readable field name for display
+   *
+   * @param fieldName The internal field name
+   * @returns A formatted field name for display
+   */
+  getDisplayFieldName(fieldName: string): string {
+    const fieldNameMap: Record<string, string> = {
+      name: "Name",
+      description: "Description",
+      location: "Location",
+      agent: "Agent",
+      startTime: "Start Time",
+      endTime: "End Time",
+      image: "Image",
+      url: "URL",
+    };
+    return fieldNameMap[fieldName] || fieldName;
+  }
+
+  /**
+   * Formats location values for display
+   *
+   * @param latitude The latitude value
+   * @param longitude The longitude value
+   * @param isOldValue Whether this is the old value (true) or new value (false)
+   * @returns A formatted location string
+   */
+  formatLocationValue(
+    latitude: number | undefined | null,
+    longitude: number | undefined | null,
+    isOldValue: boolean = false,
+  ): string {
+    if (latitude == null && longitude == null) {
+      return "Not set";
+    }
+    // If there's any location data, show generic labels instead of coordinates
+    if (isOldValue) {
+      return "A Location";
+    } else {
+      return "New Location";
+    }
+  }
 }
 </script>

src/views/NewEditAccountView.vue

@@ -22,18 +22,27 @@
 -->
 <template>
   <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 -->
-        <button
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          @click="$router.back()"
-        >
-          <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
-        </button>
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
         Edit Identity
       </h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="$router.go(-1)"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <input

src/views/NewEditProjectView.vue

@@ -2,19 +2,27 @@
   <QuickNav selected="Projects"></QuickNav>
   <!-- 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 -->
-        <!-- Back -->
-        <button
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          @click="$router.back()"
-        >
-          <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
-        </button>
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
         Edit Project Idea
       </h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="$router.go(-1)"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <!-- Project Details -->

src/views/NewIdentifierView.vue

@@ -3,22 +3,27 @@
 
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
-    <div class="mb-8">
-      <!-- Back -->
-      <div class="text-lg text-center font-light relative px-7">
-        <h1
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          @click="$router.back()"
-        >
-          <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
-        </h1>
-      </div>
-
-      <!-- Heading -->
-      <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
         Your Identity
       </h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="$router.go(-1)"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <div class="flex justify-center py-12">

src/views/NotFoundView.vue

@@ -0,0 +1,88 @@
+<template>
+  <div
+    class="min-h-screen bg-gray-50 flex flex-col justify-start pt-2 sm:px-6 lg:px-8"
+  >
+    <div class="sm:mx-auto sm:w-full sm:max-w-md">
+      <div class="text-center">
+        <div class="mx-auto h-24 w-24 text-gray-400">
+          <svg
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <circle cx="12" cy="12" r="10" stroke-width="1.5" />
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M12 8v4m0 4h.01"
+            />
+          </svg>
+        </div>
+        <h1 class="mt-4 text-3xl font-extrabold text-gray-900">Not Found</h1>
+        <p class="text-sm text-gray-600">
+          The page you're looking for doesn't exist.
+        </p>
+        <div class="mt-1">
+          <button
+            class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+            @click="goBack"
+          >
+            <svg
+              class="-ml-1 mr-2 h-5 w-5"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M10 19l-7-7m0 0l7-7m-7 7h18"
+              />
+            </svg>
+            Go Back
+          </button>
+        </div>
+        <div class="mt-16">
+          <button
+            class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+            @click="goHome"
+          >
+            <svg
+              class="-ml-1 mr-2 h-5 w-5"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2
+                2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1
+                1 0 011 1v4a1 1 0 001 1m-6 0h6"
+              ></path>
+            </svg>
+            Go Home
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+
+const goHome = () => {
+  router.push("/");
+};
+
+const goBack = () => {
+  router.go(-1);
+};
+</script>

src/views/OfferDetailsView.vue

@@ -1,24 +1,32 @@
 <template>
   <QuickNav />
-  <TopMessage />
 
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Back -->
-    <div
-      v-if="!hideBackButton"
-      class="text-lg text-center font-light relative px-7"
-    >
-      <h1
-        class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
+    <TopMessage />
+
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
+        What Is Offered
+      </h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
         @click="cancelBack()"
       >
-        <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
-      </h1>
-    </div>
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
 
-    <!-- Heading -->
-    <h1 class="text-4xl text-center font-light px-4 mb-4">What Is Offered</h1>
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
+    </div>
 
     <h1 class="text-xl font-bold text-center mb-4">
       <span> Offer to {{ recipientDisplayName }} </span>

src/views/OnboardMeetingListView.vue

@@ -1,12 +1,26 @@
 <template>
   <QuickNav selected="Contacts" />
-  <TopMessage />
 
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Heading -->
-    <h1 id="ViewHeading" class="text-4xl text-center font-light mb-8">
-      Onboarding Meetings
-    </h1>
+    <TopMessage />
+
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
+        Onboarding Meetings
+      </h1>
+
+      <!-- Spacer (no Back button) -->
+      <div class="order-first p-3 pe-3.5 pb-3.5"></div>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
+    </div>
 
     <!-- Loading State -->
     <div v-if="isLoading" class="flex justify-center items-center py-8">
@@ -63,7 +77,7 @@
         v-if="meetings.length === 0 && !isRegistered"
         class="text-center text-gray-500 py-8"
       >
-        No onboarding meetings available
+        No onboarding meetings are available
       </p>
     </div>
 

src/views/OnboardMeetingMembersView.vue

@@ -1,12 +1,26 @@
 <template>
   <QuickNav selected="Contacts" />
-  <TopMessage />
 
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Heading -->
-    <h1 id="ViewHeading" class="text-4xl text-center font-light mb-8">
-      Meeting Members
-    </h1>
+    <TopMessage />
+
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
+        Meeting Members
+      </h1>
+
+      <!-- Spacer (no Back button) -->
+      <div class="order-first p-3 pe-3.5 pb-3.5"></div>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
+    </div>
 
     <!-- Loading Animation -->
     <div
@@ -63,6 +77,7 @@ import {
 } from "../libs/endorserServer";
 import { generateSaveAndActivateIdentity } from "../libs/util";
 import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
+import { NotificationIface } from "../constants/app";
 
 @Component({
   components: {
@@ -83,6 +98,7 @@ export default class OnboardMeetingMembersView extends Vue {
   projectLink = "";
   $route!: RouteLocationNormalizedLoaded;
   $router!: Router;
+  $notify!: (notification: NotificationIface, timeout?: number) => void;
 
   userNameDialog!: InstanceType<typeof UserNameDialog>;
 

src/views/OnboardMeetingSetupView.vue

@@ -1,12 +1,26 @@
 <template>
   <QuickNav selected="Contacts" />
-  <TopMessage />
 
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Heading -->
-    <h1 id="ViewHeading" class="text-4xl text-center font-light">
-      Onboarding Meeting
-    </h1>
+    <TopMessage />
+
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
+        Onboarding Meeting
+      </h1>
+
+      <!-- Spacer (no Back button) -->
+      <div class="order-first p-3 pe-3.5 pb-3.5"></div>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
+    </div>
 
     <!-- Existing Meeting Section -->
     <div
@@ -216,26 +230,28 @@
       class="mt-8 p-4 border rounded-lg bg-white shadow"
     >
       <div class="flex items-center justify-between">
-        <h2 class="text-2xl">Meeting Members</h2>
-      </div>
-      <div class="mt-4">
-        &bull; Page for Members
-        <span
-          class="ml-4 cursor-pointer text-blue-600"
-          title="Click to copy link for members"
-          @click="copyMembersLinkToClipboard"
-        >
-          <font-awesome icon="link" />
-        </span>
-        <a
-          v-if="!!currentMeeting.password"
-          :href="onboardMeetingMembersLink()"
-          class="ml-4 text-blue-600"
-          target="_blank"
-        >
-          <font-awesome icon="external-link" />
-        </a>
+        <h2 class="font-bold">Meeting Members</h2>
       </div>
+      <ul class="list-disc text-sm mt-4 mb-2 ps-4 space-y-2">
+        <li>
+          Page for Members:
+          <span
+            class="ml-4 cursor-pointer text-blue-600"
+            title="Click to copy link for members"
+            @click="copyMembersLinkToClipboard"
+          >
+            <font-awesome icon="link" />
+          </span>
+          <a
+            v-if="!!currentMeeting.password"
+            :href="onboardMeetingMembersLink()"
+            class="ml-4 text-blue-600"
+            target="_blank"
+          >
+            <font-awesome icon="external-link" />
+          </a>
+        </li>
+      </ul>
 
       <MembersList
         :password="currentMeeting.password || ''"
@@ -457,6 +473,7 @@ export default class OnboardMeetingView extends Vue {
         );
         return;
       }
+      const password: string = this.newOrUpdatedMeetingInputs.password;
 
       // create content with user's name & DID encrypted with password
       const content = {
@@ -466,7 +483,7 @@ export default class OnboardMeetingView extends Vue {
       };
       const encryptedContent = await encryptMessage(
         JSON.stringify(content),
-        this.newOrUpdatedMeetingInputs.password,
+        password,
       );
 
       const headers = await getHeaders(this.activeDid);
@@ -489,6 +506,11 @@ export default class OnboardMeetingView extends Vue {
 
         this.newOrUpdatedMeetingInputs = null;
         this.notify.success(NOTIFY_MEETING_CREATED.message, TIMEOUTS.STANDARD);
+        // redirect to the same page with the password parameter set
+        this.$router.push({
+          name: "onboard-meeting-setup",
+          query: { password: password },
+        });
       } else {
         throw { response: response };
       }

src/views/ProjectViewView.vue

@@ -1,40 +1,58 @@
 <template>
   <QuickNav />
-  <TopMessage />
 
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
-    <div id="ViewBreadcrumb">
-      <div>
-        <h1 class="text-center text-lg font-light relative px-7">
-          <!-- Back -->
-          <button
-            class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-            @click="$router.back()"
-          >
-            <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
-          </button>
+    <TopMessage />
+
+    <div class="mb-4">
+      <!-- Sub View Heading -->
+      <div id="SubViewHeading" class="flex gap-4 items-start mb-4">
+        <h1 class="grow text-xl text-center font-semibold leading-tight">
           Project Idea
         </h1>
-        <h2 class="text-center text-xl font-semibold">
-          {{ name }}
-          <button
-            v-if="activeDid === issuer || activeDid === agentDid"
-            title="Edit"
-            data-testId="editClaimButton"
-            @click="onEditClick()"
-          >
-            <font-awesome icon="pen" class="text-sm text-blue-500 ml-2 mb-1" />
-          </button>
-          <button title="Copy Link to Project" @click="onCopyLinkClick()">
-            <font-awesome
-              icon="link"
-              class="text-sm text-slate-500 ml-2 mb-1"
-            />
-          </button>
-        </h2>
+
+        <!-- Back -->
+        <a
+          class="order-first text-lg text-center leading-none p-1"
+          @click="$router.go(-1)"
+        >
+          <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+        </a>
+
+        <!-- Help button -->
+        <router-link
+          :to="{ name: 'help' }"
+          class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+        >
+          <font-awesome icon="question" class="block text-center w-[1em]" />
+        </router-link>
       </div>
+      <h2 class="text-center text-lg font-normal overflow-hidden text-ellipsis">
+        {{ name }}
+        <button
+          v-if="activeDid === issuer || activeDid === agentDid"
+          title="Edit"
+          data-testId="editClaimButton"
+          @click="onEditClick()"
+        >
+          <font-awesome icon="pen" class="text-sm text-blue-500 ml-2" />
+        </button>
+        <button
+          :title="
+            isStarred
+              ? 'Remove from starred projects'
+              : 'Add to starred projects'
+          "
+          @click="toggleStar()"
+        >
+          <font-awesome
+            :icon="isStarred ? 'star' : ['far', 'star']"
+            :class="isStarred ? 'text-yellow-500' : 'text-slate-500'"
+            class="text-sm ml-2"
+          />
+        </button>
+      </h2>
     </div>
 
     <!-- Project Details -->
@@ -58,13 +76,13 @@
                   icon="user"
                   class="fa-fw text-slate-400"
                 ></font-awesome>
-                <span class="truncate inline-block max-w-[calc(100%-2rem)]">
+                <span class="truncate max-w-[calc(100%-2rem)] ml-1">
                   {{ issuerInfoObject?.displayName }}
                 </span>
 
                 <span
                   v-if="!serverUtil.isHiddenDid(issuer)"
-                  class="inline-flex items-center"
+                  class="inline-flex items-center ml-1"
                 >
                   <router-link
                     :to="{
@@ -139,26 +157,30 @@
         </div>
 
         <div class="text-sm text-slate-500">
-          <div v-if="!expanded">
-            {{ truncatedDesc }}
+          <div v-if="!expanded" class="overflow-hidden text-ellipsis">
+            <vue-markdown
+              :source="truncatedDesc"
+              class="mb-4 markdown-content"
+            />
             <a
               v-if="description.length >= truncateLength"
-              class="uppercase text-xs font-semibold text-slate-700"
+              class="mt-4 uppercase text-xs font-semibold text-blue-700 cursor-pointer"
               @click="expandText"
               >... Read More</a
             >
           </div>
-          <div v-else>
-            {{ description }}
+          <div v-else class="overflow-hidden text-ellipsis">
+            <vue-markdown :source="description" class="mb-4 markdown-content" />
             <a
-              class="uppercase text-xs font-semibold text-slate-700"
+              v-if="description.length >= truncateLength"
+              class="mt-4 uppercase text-xs font-semibold text-blue-700 cursor-pointer"
               @click="collapseText"
               >- Read Less</a
             >
           </div>
         </div>
 
-        <a class="cursor-pointer" @click="onClickLoadClaim(projectId)">
+        <a class="cursor-pointer" @click="onClickLoadClaim(jwtId)">
           <font-awesome icon="file-lines" class="pl-2 pt-1 text-blue-500" />
         </a>
       </div>
@@ -286,15 +308,15 @@
                 />{{ offer.amount }}
               </span>
             </div>
-            <div v-if="offer.objectDescription" class="text-slate-500">
+            <div
+              v-if="offer.objectDescription"
+              class="text-slate-500 overflow-hidden text-ellipsis"
+            >
               <font-awesome icon="comment" class="fa-fw text-slate-400" />
               {{ offer.objectDescription }}
             </div>
             <div class="flex justify-between">
-              <a
-                class="cursor-pointer"
-                @click="onClickLoadClaim(offer.jwtId as string)"
-              >
+              <a class="cursor-pointer" @click="onClickLoadClaim(offer.jwtId)">
                 <font-awesome
                   icon="file-lines"
                   class="pl-2 pt-1 text-blue-500"
@@ -431,7 +453,10 @@
                 <font-awesome icon="calendar" class="fa-fw text-slate-400" />
                 {{ give.issuedAt?.substring(0, 10) }}
               </div>
-              <div v-if="give.description" class="text-slate-500">
+              <div
+                v-if="give.description"
+                class="text-slate-500 overflow-hidden text-ellipsis"
+              >
                 <font-awesome icon="comment" class="fa-fw text-slate-400" />
                 {{ give.description }}
               </div>
@@ -538,7 +563,10 @@
               <font-awesome icon="calendar" class="fa-fw text-slate-400" />
               {{ give.issuedAt?.substring(0, 10) }}
             </div>
-            <div v-if="give.description" class="text-slate-500">
+            <div
+              v-if="give.description"
+              class="text-slate-500 overflow-hidden text-ellipsis"
+            >
               <font-awesome icon="comment" class="fa-fw text-slate-400" />
               {{ give.description }}
             </div>
@@ -592,7 +620,9 @@
 <script lang="ts">
 import { AxiosError } from "axios";
 import { Component, Vue } from "vue-facing-decorator";
+import VueMarkdown from "vue-markdown-render";
 import { Router } from "vue-router";
+
 import {
   GenericVerifiableCredential,
   GenericCredWrapper,
@@ -603,25 +633,25 @@ import {
   PlanSummaryRecord,
 } from "../interfaces";
 import GiftedDialog from "../components/GiftedDialog.vue";
+import HiddenDidDialog from "../components/HiddenDidDialog.vue";
 import OfferDialog from "../components/OfferDialog.vue";
 import TopMessage from "../components/TopMessage.vue";
 import QuickNav from "../components/QuickNav.vue";
 import EntityIcon from "../components/EntityIcon.vue";
 import ProjectIcon from "../components/ProjectIcon.vue";
-import { NotificationIface } from "../constants/app";
-// Removed legacy logging import - migrated to PlatformServiceMixin
+import { APP_SERVER, NotificationIface } from "../constants/app";
+import { UNNAMED_PROJECT } from "../constants/entities";
+import { NOTIFY_CONFIRM_CLAIM } from "../constants/notifications";
+import * as databaseUtil from "../db/databaseUtil";
 import { Contact } from "../db/tables/contacts";
 import * as libsUtil from "../libs/util";
 import * as serverUtil from "../libs/endorserServer";
 import { retrieveAccountDids } from "../libs/util";
-import HiddenDidDialog from "../components/HiddenDidDialog.vue";
-import { logger } from "../utils/logger";
 import { copyToClipboard } from "../services/ClipboardService";
+import { logger } from "../utils/logger";
 import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
 import { createNotifyHelpers, TIMEOUTS } from "@/utils/notify";
-import { NOTIFY_CONFIRM_CLAIM } from "@/constants/notifications";
-import { APP_SERVER } from "@/constants/app";
-import { UNNAMED_PROJECT } from "@/constants/entities";
+
 /**
  * Project View Component
  * @author Matthew Raymer
@@ -663,6 +693,7 @@ import { UNNAMED_PROJECT } from "@/constants/entities";
     ProjectIcon,
     QuickNav,
     TopMessage,
+    VueMarkdown,
   },
   mixins: [PlatformServiceMixin],
 })
@@ -718,6 +749,8 @@ export default class ProjectViewView extends Vue {
   givesProvidedByHitLimit = false;
   givesTotalsByUnit: Array<{ unit: string; amount: number }> = [];
   imageUrl = "";
+  /** Whether this project is starred by the user */
+  isStarred = false;
   /** Project issuer DID */
   issuer = "";
   /** Cached issuer information */
@@ -728,6 +761,8 @@ export default class ProjectViewView extends Vue {
   } | null = null;
   /** DIDs that can see issuer information */
   issuerVisibleToDids: Array<string> = [];
+  /** Project JWT ID */
+  jwtId = "";
   /** Project location data */
   latitude = 0;
   loadingTotals = false;
@@ -756,7 +791,7 @@ export default class ProjectViewView extends Vue {
   totalsExpanded = false;
   truncatedDesc = "";
   /** Truncation length */
-  truncateLength = 40;
+  truncateLength = 200;
 
   // Utility References
   libsUtil = libsUtil;
@@ -810,6 +845,12 @@ export default class ProjectViewView extends Vue {
     }
     this.loadProject(this.projectId, this.activeDid);
     this.loadTotals();
+
+    // Check if this project is starred when settings are loaded
+    if (this.projectId && settings.starredPlanHandleIds) {
+      const starredIds = settings.starredPlanHandleIds || [];
+      this.isStarred = starredIds.includes(this.projectId);
+    }
   }
 
   /**
@@ -886,8 +927,9 @@ export default class ProjectViewView extends Vue {
           this.allContacts,
         );
         this.issuerVisibleToDids = resp.data.issuerVisibleToDids || [];
+        this.jwtId = resp.data.id;
         this.name = resp.data.claim?.name || "(no name)";
-        this.description = resp.data.claim?.description || "(no description)";
+        this.description = resp.data.claim?.description || "";
         this.truncatedDesc = this.description.slice(0, this.truncateLength);
         this.latitude = resp.data.claim?.location?.geo?.latitude || 0;
         this.longitude = resp.data.claim?.location?.geo?.longitude || 0;
@@ -1477,5 +1519,67 @@ export default class ProjectViewView extends Vue {
       this.givesTotalsByUnit.find((total) => total.unit === "HUR")?.amount || 0
     );
   }
+
+  /**
+   * Toggle the starred status of the current project
+   */
+  async toggleStar() {
+    if (!this.projectId) return;
+
+    try {
+      const settings = await this.$accountSettings();
+      const starredIds = settings.starredPlanHandleIds || [];
+      if (!this.isStarred) {
+        // Add to starred projects
+        if (!starredIds.includes(this.projectId)) {
+          const newStarredIds = [...starredIds, this.projectId];
+          const newIdsParam = JSON.stringify(newStarredIds);
+          const result = await databaseUtil.updateDidSpecificSettings(
+            this.activeDid,
+            // @ts-expect-error until we use SettingsWithJsonString properly
+            { starredPlanHandleIds: newIdsParam },
+          );
+          if (result) {
+            this.isStarred = true;
+          } else {
+            // eslint-disable-next-line no-console
+            logger.error("Got a bad result from SQL update to star a project.");
+          }
+        }
+        if (!settings.lastAckedStarredPlanChangesJwtId) {
+          await databaseUtil.updateDidSpecificSettings(this.activeDid, {
+            lastAckedStarredPlanChangesJwtId: this.jwtId,
+          });
+        }
+      } else {
+        // Remove from starred projects
+
+        const updatedIds = starredIds.filter((id) => id !== this.projectId);
+        const newIdsParam = JSON.stringify(updatedIds);
+        const result = await databaseUtil.updateDidSpecificSettings(
+          this.activeDid,
+          // @ts-expect-error until we use SettingsWithJsonString properly
+          { starredPlanHandleIds: newIdsParam },
+        );
+        if (result) {
+          this.isStarred = false;
+        } else {
+          // eslint-disable-next-line no-console
+          logger.error("Got a bad result from SQL update to unstar a project.");
+        }
+      }
+    } catch (error) {
+      logger.error("Error toggling star status:", error);
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text: "Failed to update starred status. Please try again.",
+        },
+        3000,
+      );
+    }
+  }
 }
 </script>

src/views/ProjectsView.vue

@@ -1,17 +1,28 @@
 <template>
   <QuickNav selected="Projects" />
-  <TopMessage />
 
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Heading -->
-    <h1 id="ViewHeading" class="text-4xl text-center font-light">
-      Your Project Ideas
-    </h1>
+    <TopMessage />
+
+    <!-- Main View Heading -->
+    <div class="flex gap-4 items-center mb-4">
+      <h1 id="ViewHeading" class="text-2xl font-bold leading-none">
+        Your Ideas
+      </h1>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
+    </div>
 
     <OnboardingDialog ref="onboardingDialog" />
 
     <!-- Result Tabs -->
-    <div class="text-center text-slate-500 border-b border-slate-300 mt-8">
+    <div class="text-center text-slate-500 border-b border-slate-300 mt-4">
       <ul class="flex flex-wrap justify-center gap-4 -mb-px">
         <li>
           <a
@@ -107,8 +118,8 @@
               />
             </div>
 
-            <div>
-              <div>
+            <div class="overflow-hidden">
+              <div class="text-sm truncate">
                 To
                 {{
                   offer.fulfillsPlanHandleId
@@ -121,7 +132,7 @@
                       )
                 }}
               </div>
-              <div>
+              <div class="truncate">
                 {{ offer.objectDescription }}
               </div>
 
@@ -243,7 +254,7 @@
             </div>
 
             <div class="grow overflow-hidden">
-              <h2 class="text-base font-semibold">
+              <h2 class="text-base font-semibold truncate">
                 {{ project.name || unnamedProject }}
               </h2>
               <div class="text-sm truncate">
@@ -646,7 +657,7 @@ export default class ProjectsView extends Vue {
   get offerTabClasses() {
     return {
       "inline-block": true,
-      "py-3": true,
+      "py-2": true,
       "rounded-t-lg": true,
       "border-b-2": true,
       active: this.showOffers,
@@ -664,7 +675,7 @@ export default class ProjectsView extends Vue {
    * @returns String with CSS classes for the floating new project button
    */
   get newProjectButtonClasses() {
-    return "fixed right-6 top-24 text-center text-4xl leading-none bg-green-600 text-white w-14 py-2.5 rounded-full";
+    return "fixed right-6 top-14 text-center text-4xl leading-none bg-green-600 text-white w-14 py-2.5 rounded-full";
   }
 
   /**
@@ -706,7 +717,7 @@ export default class ProjectsView extends Vue {
   get projectTabClasses() {
     return {
       "inline-block": true,
-      "py-3": true,
+      "py-2": true,
       "rounded-t-lg": true,
       "border-b-2": true,
       active: this.showProjects,

src/views/QuickActionBvcBeginView.vue

@@ -1,23 +1,32 @@
 <template>
   <QuickNav />
-  <TopMessage />
 
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Back -->
-    <div class="text-lg text-center font-light relative px-7">
-      <h1
-        class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
+    <TopMessage />
+
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
+        Beginning of BVC Saturday Meeting
+      </h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
         @click="goBack()"
       >
-        <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
-      </h1>
-    </div>
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
 
-    <!-- Heading -->
-    <h1 id="ViewHeading" class="text-4xl text-center font-light px-4 mb-4">
-      Beginning of BVC Saturday Meeting
-    </h1>
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
+    </div>
 
     <div>
       <h2 class="text-2xl m-2">You're Here</h2>

src/views/QuickActionBvcEndView.vue

@@ -1,20 +1,32 @@
 <template>
   <QuickNav />
-  <TopMessage />
 
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Back -->
-    <div class="text-lg text-center font-light relative px-7">
-      <h1 :class="backButtonClasses" @click="$router.back()">
-        <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
-      </h1>
-    </div>
+    <TopMessage />
 
-    <!-- Heading -->
-    <h1 id="ViewHeading" class="text-4xl text-center font-light px-4 mb-4">
-      End of BVC Saturday Meeting
-    </h1>
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
+        End of BVC Saturday Meeting
+      </h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="$router.go(-1)"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
+    </div>
 
     <div>
       <h2 class="text-2xl m-2">Confirm</h2>

src/views/QuickActionBvcView.vue

@@ -1,23 +1,32 @@
 <template>
   <QuickNav />
-  <TopMessage />
 
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Back -->
-    <div class="text-lg text-center font-light relative px-7">
-      <h1
-        class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-        @click="$router.back()"
-      >
-        <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
-      </h1>
-    </div>
+    <TopMessage />
 
-    <!-- Heading -->
-    <h1 id="ViewHeading" class="text-4xl text-center font-light px-4 mb-4">
-      Bountiful Voluntaryist Community Actions
-    </h1>
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
+        Bountiful Voluntaryist Community Actions
+      </h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="$router.go(-1)"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
+    </div>
 
     <div>
       <router-link

src/views/RecentOffersToUserProjectsView.vue

@@ -2,17 +2,27 @@
   <QuickNav selected="Home"></QuickNav>
   <!-- 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">
-        <!-- Back -->
-        <font-awesome
-          icon="chevron-left"
-          class="fa-fw text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          @click="$router.back()"
-        />
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
         Offers to Your Projects
       </h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="$router.go(-1)"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <div v-if="newOffersToUserProjects.length === 0">

src/views/RecentOffersToUserView.vue

@@ -2,17 +2,27 @@
   <QuickNav selected="Home"></QuickNav>
   <!-- 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">
-        <!-- Back -->
-        <font-awesome
-          icon="chevron-left"
-          class="fa-fw text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          @click="$router.back()"
-        />
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
         Offers to You
       </h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="$router.go(-1)"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <div v-if="newOffersToUser.length === 0">

src/views/SearchAreaView.vue

@@ -1,24 +1,27 @@
 <template>
-  <QuickNav />
-
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
-    <div class="mb-8">
-      <!-- Back -->
-      <div class="text-lg text-center font-light relative px-7">
-        <h1
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          @click="goBack"
-        >
-          <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
-        </h1>
-      </div>
-
-      <!-- Heading -->
-      <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
         Area for Nearby Search
       </h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="goBack()"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <div class="px-2 py-4">

src/views/SeedBackupView.vue

@@ -28,31 +28,29 @@
 -->
 
 <template>
-  <QuickNav selected="Profile" />
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Back -->
-    <div class="text-lg text-center font-light relative px-7">
-      <h1
-        class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-        @click="goBack"
-      >
-        <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
+    <!-- Sub View Heading -->
+    <div class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
+        Seed Backup
       </h1>
-    </div>
 
-    <!-- Heading -->
-    <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
-      Seed Backup
-    </h1>
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="goBack()"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
 
-    <div class="flex justify-between py-2">
-      <span />
-      <span>
-        <router-link :to="{ name: 'help' }" :class="helpButtonClass">
-          Help
-        </router-link>
-      </span>
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <div v-if="activeAccount">

src/views/ShareMyContactInfoView.vue

@@ -1,26 +1,31 @@
 <template>
   <QuickNav />
-  <TopMessage />
 
   <!-- CONTENT -->
   <section id="Content" class="p-2 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
-    <div>
-      <!-- Back -->
-      <div class="text-lg text-center font-light relative px-7">
-        <button
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          aria-label="Go back"
-          @click="$router.back()"
-        >
-          <font-awesome icon="chevron-left" class="fa-fw" />
-        </button>
-      </div>
+    <TopMessage />
 
-      <!-- Heading -->
-      <h1 id="ViewHeading" class="text-4xl text-center font-light">
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
         Share Your Contact Info
       </h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="$router.go(-1)"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <div class="flex justify-center mt-8">

src/views/SharedPhotoView.vue

@@ -39,10 +39,28 @@
   <QuickNav />
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Heading -->
-    <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
-      Image
-    </h1>
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
+        Image
+      </h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="$router.go(-1)"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
+    </div>
     <div v-if="imageBlob">
       <div v-if="uploading" class="text-center mb-4">
         <font-awesome icon="spinner" class="fa-spin-pulse" />

src/views/StartView.vue

@@ -3,26 +3,31 @@
     id="Content"
     class="p-6 pb-24 min-h-screen flex flex-col justify-center"
   >
-    <!-- Breadcrumb -->
-    <div>
-      <!-- Back -->
-      <div class="text-lg text-center font-light relative px-7">
-        <h1
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          @click="goBack"
-        >
-          <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
-        </h1>
-      </div>
-
-      <!-- Heading -->
-      <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
         Generate an Identity
       </h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="goBack()"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <!-- id used by puppeteer test script -->
-    <div id="start-question" class="mt-8">
+    <div id="start-question">
       <div class="max-w-3xl mx-auto">
         <p class="text-center text-xl font-light">
           How do you want to create this identifier?

src/views/StatisticsView.vue

@@ -3,22 +3,27 @@
 
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
-    <div class="mb-8">
-      <!-- Back -->
-      <div class="text-lg text-center font-light relative px-7">
-        <h1
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          @click="$router.back()"
-        >
-          <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
-        </h1>
-      </div>
-
-      <!-- Heading -->
-      <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
         Achievements & Statistics
       </h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="$router.go(-1)"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <div>

src/views/TestView.vue

@@ -3,22 +3,25 @@
 
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
-    <div class="mb-8">
-      <!-- Back -->
-      <div class="text-lg text-center font-light relative px-7">
-        <h1
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          @click="$router.back()"
-        >
-          <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
-        </h1>
-      </div>
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">Test</h1>
 
-      <!-- Heading -->
-      <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
-        Test
-      </h1>
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="$router.go(-1)"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <div v-if="isNotProdServer">

src/views/UserProfileView.vue

@@ -1,22 +1,31 @@
 <template>
   <QuickNav selected="Discover" />
-  <TopMessage />
 
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
-    <div id="ViewBreadcrumb" class="mb-8">
-      <h1 id="ViewHeading" class="text-lg text-center font-light relative px-7">
-        <!-- Back -->
-        <button
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          @click="$router.back()"
-        >
-          <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
-        </button>
+    <TopMessage />
+
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
         Individual Profile
       </h1>
-      <div class="text-sm text-center text-slate-500"></div>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="$router.go(-1)"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <!-- Loading Animation -->

test-playwright/20-create-project.spec.ts

@@ -100,7 +100,10 @@ test('Create new project, then search for it', async ({ page }) => {
   const finalTitle = standardTitle + finalRandomString;
   const finalDescription = standardDescription + finalRandomString;
   const editedTitle = finalTitle + standardEdit;
-  const editedDescription = finalDescription + standardEdit;
+  const editedDescription =
+    finalDescription +
+    standardEdit +
+    " ... and enough text to overflow into the 'Read More' section.";
 
   // Import user 00
   await importUser(page, '00');

test-playwright/60-new-activity.spec.ts

@@ -109,7 +109,7 @@ test('New offers for another user', async ({ page }) => {
   await expect(page.getByText('New Offers To You', { exact: true })).toBeVisible();
   await page.getByTestId('showOffersToUser').locator('div > svg.fa-chevron-right').click();
 
-  await expect(page.getByText('The offers are marked as viewed')).toBeVisible();
+  await expect(page.getByText('The offers are marked as read')).toBeVisible();
   await page.getByRole('alert').filter({ hasText: 'Info' }).getByRole('button').click(); // dismiss info alert
 
   await page.waitForTimeout(1000);
@@ -140,7 +140,7 @@ test('New offers for another user', async ({ page }) => {
   await expect(page.getByText('New Offer To You', { exact: true })).toBeVisible();
   await page.getByTestId('showOffersToUser').locator('div > svg.fa-chevron-right').click();
 
-  await expect(page.getByText('The offers are marked as viewed')).toBeVisible();
+  await expect(page.getByText('The offers are marked as read')).toBeVisible();
   await page.getByRole('alert').filter({ hasText: 'Info' }).getByRole('button').click(); // dismiss info alert
 
   // now see that no offers are shown as new