Linting

Merge branch 'master' into view-headings-refresh
feat: restored TopMessage
2025-10-07 16:38:35 +08:00 · 2025-10-07 16:37:36 +08:00 · 2025-10-06 18:42:05 +08:00 · 2025-10-05 15:31:08 -06:00 · 2025-10-05 13:33:58 -06:00 · 2025-10-05 10:43:05 -06:00
78 changed files with 2364 additions and 797 deletions
--- a/.cursor/rules/development/development_guide.mdc
+++ b/.cursor/rules/development/development_guide.mdc
@@ -4,7 +4,6 @@ alwaysApply: false
 ---
 ✅ use system date command to timestamp all interactions with accurate date and
  time
-✅ python script files must always have a blank line at their end
 ✅ remove whitespace at the end of lines
 ✅ use npm run lint-fix to check for warnings
 ✅ do not use npm run dev let me handle running and supplying feedback
@@ -22,12 +21,10 @@ alwaysApply: false

 - [ ] **Timestamp Usage**: Include accurate timestamps in all interactions
 - [ ] **Code Quality**: Use npm run lint-fix to check for warnings
- [ ] **File Standards**: Ensure Python files have blank line at end
 - [ ] **Whitespace**: Remove trailing whitespace from all lines

 ### After Development

 - [ ] **Linting Check**: Run npm run lint-fix to verify code quality
- [ ] **File Validation**: Confirm Python files end with blank line
 - [ ] **Whitespace Review**: Verify no trailing whitespace remains
 - [ ] **Documentation**: Update relevant documentation with changes
--- a/package-lock.json
+++ b/package-lock.json
@@ -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",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "timesafari",
-  "version": "1.1.0-beta",
+  "version": "1.1.1-beta",
  "description": "Time Safari Application",
  "author": {
    "name": "Time Safari Team"
@@ -106,7 +106,7 @@
    "guard": "bash ./scripts/build-arch-guard.sh",
    "guard:test": "bash ./scripts/build-arch-guard.sh --staged",
    "guard:setup": "npm run prepare && echo '✅ Build Architecture Guard is now active!'",
-    "clean:android": "./scripts/clean-android.sh",
+    "clean:android": "./scripts/uninstall-android.sh",
    "clean:ios": "rm -rf ios/App/build ios/App/Pods ios/App/output ios/App/App/public ios/DerivedData ios/capacitor-cordova-ios-plugins ios/App/App/capacitor.config.json ios/App/App/config.xml || true",
    "clean:electron": "./scripts/build-electron.sh --clean",
    "clean:all": "npm run clean:ios && npm run clean:android && npm run clean:electron",
@@ -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",
--- a/scripts/build-android.sh
+++ b/scripts/build-android.sh
@@ -22,6 +22,7 @@
 #   --sync                  Sync Capacitor only
 #   --assets                Generate assets only
 #   --deploy                Deploy APK to connected device
+#   --uninstall             Uninstall app from connected device
 #   -h, --help             Show this help message
 #   -v, --verbose          Enable verbose logging
 #
@@ -196,6 +197,7 @@ SYNC_ONLY=false
 ASSETS_ONLY=false
 DEPLOY_APP=false
 AUTO_RUN=false
+UNINSTALL=false
 CUSTOM_API_IP=""

 # Function to parse Android-specific arguments
@@ -246,6 +248,9 @@ parse_android_args() {
            --auto-run)
                AUTO_RUN=true
                ;;
+            --uninstall)
+                UNINSTALL=true
+                ;;
            --api-ip)
                if [ $((i + 1)) -lt ${#args[@]} ]; then
                    CUSTOM_API_IP="${args[$((i + 1))]}"
@@ -291,6 +296,7 @@ print_android_usage() {
    echo "  --assets                Generate assets only"
    echo "  --deploy                Deploy APK to connected device"
    echo "  --auto-run              Auto-run app after build"
+    echo "  --uninstall             Uninstall app from connected device"
    echo "  --api-ip <ip>          Custom IP address for claim API (defaults to 10.0.2.2)"
    echo ""
    echo "Common Options:"
@@ -305,6 +311,7 @@ print_android_usage() {
    echo "  $0 --clean             # Clean only"
    echo "  $0 --sync              # Sync only"
    echo "  $0 --deploy            # Build and deploy to device"
+    echo "  $0 --uninstall         # Uninstall app from device"
    echo "  $0 --dev                    # Dev build with default 10.0.2.2"
    echo "  $0 --dev --api-ip 192.168.1.100  # Dev build with custom API IP"
    echo ""
@@ -417,8 +424,13 @@ safe_execute "Validating asset configuration" "npm run assets:validate" || {
    log_info "If you encounter build failures, please run 'npm install' first to ensure all dependencies are available."
 }

-# Step 2: Clean Android app
-safe_execute "Cleaning Android app" "npm run clean:android" || exit 1
+# Step 2: Uninstall Android app
+if [ "$UNINSTALL" = true ]; then
+    log_info "Uninstall: uninstalling app from device"
+    safe_execute "Uninstalling Android app" "./scripts/uninstall-android.sh" || exit 1
+    log_success "Uninstall completed successfully!"
+    exit 0
+fi

 # Step 3: Clean dist directory
 log_info "Cleaning dist directory..."
--- a/scripts/uninstall-android.sh
+++ b/scripts/uninstall-android.sh
@@ -1,8 +1,8 @@
 #!/bin/bash
-# clean-android.sh
+# uninstall-android.sh
 # Author: Matthew Raymer
 # Date: 2025-08-19
-# Description: Clean Android app with timeout protection to prevent hanging
+# Description: Uninstall Android app with timeout protection to prevent hanging
 # This script safely uninstalls the TimeSafari app from connected Android devices
 # with a 30-second timeout to prevent indefinite hanging.

--- a/src/assets/styles/tailwind.css
+++ b/src/assets/styles/tailwind.css
@@ -22,4 +22,24 @@
 	.dialog {
 		@apply bg-white p-4 rounded-lg w-full max-w-lg;
 	}
+
+	/* 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;
+	}
 }
--- a/src/components/ActivityListItem.vue
+++ b/src/components/ActivityListItem.vue
@@ -80,7 +80,10 @@
      <!-- Description -->
      <p class="font-medium">
        <a class="cursor-pointer" @click="emitLoadClaim(record.jwtId)">
-          {{ description }}
+          <vue-markdown
+            :source="truncatedDescription"
+            class="markdown-content"
+          />
        </a>
      </p>

@@ -258,11 +261,13 @@ import {
  NOTIFY_UNKNOWN_PERSON,
 } from "@/constants/notifications";
 import { TIMEOUTS } from "@/utils/notify";
+import VueMarkdown from "vue-markdown-render";

@Component({
  components: {
    EntityIcon,
    ProjectIcon,
+    VueMarkdown,
  },
 })
 export default class ActivityListItem extends Vue {
@@ -303,6 +308,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)}`;
  }
--- a/src/components/DataExportSection.vue
+++ b/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;
    }
  }
 }
--- a/src/components/TopMessage.vue
+++ b/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,8 +20,8 @@ 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()
-  // - Settings shortcuts: this.$saveSettings(), this.$saveMySettings()
+  // - 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()
  // - All methods use smart caching with TTL for massive performance gains
--- a/src/components/UsageLimitsSection.vue
+++ b/src/components/UsageLimitsSection.vue
@@ -8,7 +8,7 @@
    <!-- show spinner if loading limits -->
    <div
      v-if="loadingLimits"
-      class="text-center"
+      class="text-slate-500 text-center italic mb-4"
      role="status"
      aria-live="polite"
    >
@@ -19,7 +19,10 @@
        aria-hidden="true"
      ></font-awesome>
    </div>
-    <div class="mb-4 text-center">
+    <div
+      v-if="limitsMessage"
+      class="bg-amber-200 text-amber-900 border-amber-500 border-dashed border text-center rounded-md overflow-hidden px-4 py-3 mb-4"
+    >
      {{ limitsMessage }}
    </div>
    <div v-if="endorserLimits">
--- a/src/constants/accountView.ts
+++ b/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
--- a/src/db-sql/migration.ts
+++ b/src/db-sql/migration.ts
@@ -68,13 +68,21 @@ const MIG_004_SQL = `
  WHERE id = 1 
  AND EXISTS (SELECT 1 FROM settings WHERE id = 1 AND activeDid IS NOT NULL AND activeDid != '');
  
+  -- Copy important settings that were set in the MASTER_SETTINGS_KEY to the main identity.
+  -- (We're not doing them all because some were already identity-specific and others aren't as critical.)
+  UPDATE settings
+  SET lastViewedClaimId = (SELECT lastViewedClaimId FROM settings WHERE id = 1),
+      profileImageUrl = (SELECT profileImageUrl FROM settings WHERE id = 1),
+      showShortcutBvc = (SELECT showShortcutBvc FROM settings WHERE id = 1),
+      warnIfProdServer = (SELECT warnIfProdServer FROM settings WHERE id = 1),
+      warnIfTestServer = (SELECT warnIfTestServer FROM settings WHERE id = 1)
+  WHERE id = 2;
+
  -- CLEANUP: Remove orphaned settings records and clear legacy activeDid values
+  -- which usually simply deletes the MASTER_SETTINGS_KEY record.
  -- This completes the migration from settings-based to table-based active identity
-  -- Use guarded operations to prevent accidental data loss
-  DELETE FROM settings WHERE accountDid IS NULL AND id != 1;
-  UPDATE settings SET activeDid = NULL WHERE id = 1 AND EXISTS (
-    SELECT 1 FROM active_identity WHERE id = 1 AND activeDid IS NOT NULL
-  );
+  DELETE FROM settings WHERE accountDid IS NULL;
+  UPDATE settings SET activeDid = NULL;
 `;

 // Each migration can include multiple SQL statements (with semicolons)
@@ -184,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;
+    `,
+  },
 ];

 /**
--- a/src/db/databaseUtil.ts
+++ b/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) {
--- a/src/db/tables/settings.ts
+++ b/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;
--- a/src/interfaces/claims.ts
+++ b/src/interfaces/claims.ts
@@ -72,11 +72,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
--- a/src/interfaces/records.ts
+++ b/src/interfaces/records.ts
@@ -1,4 +1,5 @@
-import { GiveActionClaim, OfferClaim } from "./claims";
+import { GiveActionClaim, OfferClaim, PlanActionClaim } from "./claims";
+import { GenericCredWrapper } from "./common";

 // a summary record; the VC is found the fullClaim field
 export interface GiveSummaryRecord {
@@ -61,6 +62,11 @@ export interface PlanSummaryRecord {
  jwtId?: string;
 }

+export interface PlanSummaryAndPreviousClaim {
+  plan: PlanSummaryRecord;
+  wrappedClaimBefore: GenericCredWrapper<PlanActionClaim>;
+}
+
 /**
 * Represents data about a project
 *
@@ -87,7 +93,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;
 }
--- a/src/libs/endorserServer.ts
+++ b/src/libs/endorserServer.ts
@@ -56,7 +56,12 @@ import {
  KeyMetaWithPrivate,
  KeyMetaMaybeWithPrivate,
 } from "../interfaces/common";
-import { PlanSummaryRecord } from "../interfaces/records";
+import {
+  OfferSummaryRecord,
+  OfferToPlanSummaryRecord,
+  PlanSummaryAndPreviousClaim,
+  PlanSummaryRecord,
+} from "../interfaces/records";
 import { logger } from "../utils/logger";
 import { PlatformServiceFactory } from "@/services/PlatformServiceFactory";
 import { APP_SERVER } from "@/constants/app";
@@ -362,6 +367,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
 */
@@ -730,7 +751,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 +773,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 +787,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
 *
@@ -1697,49 +1758,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 +1819,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;
  }
 }
--- a/src/libs/fontawesome.ts
+++ b/src/libs/fontawesome.ts
@@ -86,6 +86,7 @@ import {
  faSquareCaretDown,
  faSquareCaretUp,
  faSquarePlus,
+  faStar,
  faThumbtack,
  faTrashCan,
  faTriangleExclamation,
@@ -94,6 +95,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,
@@ -168,14 +172,16 @@ library.add(
  faPlus,
  faQrcode,
  faQuestion,
-  faRotate,
  faRightFromBracket,
+  faRotate,
  faShareNodes,
  faSpinner,
  faSquare,
  faSquareCaretDown,
  faSquareCaretUp,
  faSquarePlus,
+  faStar,
+  faStarRegular,
  faThumbtack,
  faTrashCan,
  faTriangleExclamation,
--- a/src/router/index.ts
+++ b/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:";
--- a/src/services/api.ts
+++ b/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;
 };
--- a/src/services/migrationService.ts
+++ b/src/services/migrationService.ts
@@ -799,7 +799,7 @@ export async function runMigrations<T>(
    }

    // Only show completion message in development
-    logger.debug(
+    logger.log(
      `🎉 [Migration] Migration process complete! Summary: ${appliedCount} applied, ${skippedCount} skipped`,
    );
  } catch (error) {
--- a/src/test/PlatformServiceMixinTest.vue
+++ b/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) {
--- a/src/utils/PlatformServiceMixin.ts
+++ b/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;
    },
@@ -514,7 +526,7 @@ export const PlatformServiceMixin = {
     * Utility method for retrieving master settings
     * Common pattern used across many components
     */
-    async $getMasterSettings(
+    async _getMasterSettings(
      fallback: Settings | null = null,
    ): Promise<Settings | null> {
      try {
@@ -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) {
@@ -571,7 +589,7 @@ export const PlatformServiceMixin = {
    ): Promise<Settings> {
      try {
        // Get default settings
-        const defaultSettings = await this.$getMasterSettings(defaultFallback);
+        const defaultSettings = await this._getMasterSettings(defaultFallback);

        // If no account DID, return defaults
        if (!accountDid) {
@@ -617,6 +635,12 @@ export const PlatformServiceMixin = {
            [],
          );
        }
+        if (mergedSettings.starredPlanHandleIds) {
+          mergedSettings.starredPlanHandleIds = this._parseJsonField(
+            mergedSettings.starredPlanHandleIds,
+            [],
+          );
+        }

        return mergedSettings;
      } catch (error) {
@@ -970,7 +994,7 @@ export const PlatformServiceMixin = {
     * @returns Fresh settings object from database
     */
    async $settings(defaults: Settings = {}): Promise<Settings> {
-      const settings = await this.$getMasterSettings(defaults);
+      const settings = await this._getMasterSettings(defaults);

      if (!settings) {
        return defaults;
@@ -1003,7 +1027,7 @@ export const PlatformServiceMixin = {
    ): Promise<Settings> {
      try {
        // Get default settings first
-        const defaultSettings = await this.$getMasterSettings(defaults);
+        const defaultSettings = await this._getMasterSettings(defaults);

        if (!defaultSettings) {
          return defaults;
@@ -1212,6 +1236,11 @@ export const PlatformServiceMixin = {
     * @param changes Settings changes to save
     * @returns Promise<boolean> Success status
     */
+    /**
+     * Since this is unused, and since it relies on this.activeDid which isn't guaranteed to exist,
+     * let's take this out for the sake of safety.
+     * Totally remove after start of 2026 (since it would be obvious by then that it's not used).
+     *
    async $saveMySettings(changes: Partial<Settings>): Promise<boolean> {
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      const currentDid = (this as any).activeDid;
@@ -1221,6 +1250,7 @@ export const PlatformServiceMixin = {
      }
      return await this.$saveUserSettings(currentDid, changes);
    },
+    **/

    // =================================================
    // CACHE MANAGEMENT METHODS
@@ -1842,7 +1872,7 @@ export const PlatformServiceMixin = {
    async $debugMergedSettings(did: string): Promise<void> {
      try {
        // Get default settings
-        const defaultSettings = await this.$getMasterSettings({});
+        const defaultSettings = await this._getMasterSettings({});
        logger.debug(
          `[PlatformServiceMixin] Default settings:`,
          defaultSettings,
@@ -1892,7 +1922,6 @@ export interface IPlatformServiceMixin {
    params?: unknown[],
  ): Promise<SqlValue[] | undefined>;
  $dbRawQuery(sql: string, params?: unknown[]): Promise<unknown | undefined>;
-  $getMasterSettings(fallback?: Settings | null): Promise<Settings | null>;
  $getMergedSettings(
    defaultKey: string,
    accountDid?: string,
@@ -2017,7 +2046,6 @@ declare module "@vue/runtime-core" {
      params?: unknown[],
    ): Promise<unknown[] | undefined>;
    $dbRawQuery(sql: string, params?: unknown[]): Promise<unknown | undefined>;
-    $getMasterSettings(defaults?: Settings | null): Promise<Settings | null>;
    $getMergedSettings(
      key: string,
      did?: string,
@@ -2040,7 +2068,8 @@ declare module "@vue/runtime-core" {
      did: string,
      changes: Partial<Settings>,
    ): Promise<boolean>;
-    $saveMySettings(changes: Partial<Settings>): Promise<boolean>;
+    // @deprecated; see implementation note above
+    // $saveMySettings(changes: Partial<Settings>): Promise<boolean>;

    // Cache management methods
    $refreshSettings(): Promise<Settings>;
--- a/src/utils/logger.ts
+++ b/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)
--- a/src/views/AccountViewView.vue
+++ b/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;
@@ -1454,7 +1466,6 @@ export default class AccountViewView extends Vue {
        this.imageLimits = imageResp.data;
      } else {
        this.limitsMessage = ACCOUNT_VIEW_CONSTANTS.LIMITS.NO_IMAGE_ACCESS;
-        this.notify.warning(ACCOUNT_VIEW_CONSTANTS.LIMITS.CANNOT_UPLOAD_IMAGES);
      }

      const endorserResp = await fetchEndorserRateLimits(
@@ -1465,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 =
--- a/src/views/ClaimAddRawView.vue
+++ b/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">
--- a/src/views/ClaimView.vue
+++ b/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 -->
@@ -83,7 +91,10 @@
          <div class="text-sm">
            <div data-testId="description">
              <font-awesome icon="message" class="fa-fw text-slate-400" />
-              {{ claimDescription }}
+              <vue-markdown
+                :source="claimDescription"
+                class="markdown-content"
+              />
            </div>
            <div>
              <font-awesome icon="user" class="fa-fw text-slate-400" />
@@ -533,8 +544,10 @@ 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 GiftedDialog from "../components/GiftedDialog.vue";
 import QuickNav from "../components/QuickNav.vue";
@@ -553,7 +566,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 {
--- a/src/views/ConfirmContactView.vue
+++ b/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">
--- a/src/views/ConfirmGiftView.vue
+++ b/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">
--- a/src/views/ContactAmountsView.vue
+++ b/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.$getMasterSettings();
+      const settings = await this.$accountSettings();

      // Get activeDid from active_identity table (single source of truth)
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
--- a/src/views/ContactEditView.vue
+++ b/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 -->
--- a/src/views/ContactGiftingView.vue
+++ b/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 -->
--- a/src/views/ContactImportView.vue
+++ b/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" />
--- a/src/views/ContactQRScanFullView.vue
+++ b/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";
  }

  /**
--- a/src/views/ContactQRScanShowView.vue
+++ b/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">
--- a/src/views/ContactsView.vue
+++ b/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
--- a/src/views/DIDView.vue
+++ b/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 -->
+      <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>

    <!-- Identity Details -->
--- a/src/views/DeepLinkErrorView.vue
+++ b/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;
--- a/src/views/DeepLinkRedirectView.vue
+++ b/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 -->
--- a/src/views/DiscoverView.vue
+++ b/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>

@@ -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,

--- a/src/views/GiftedDetailsView.vue
+++ b/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
          {{
--- a/src/views/HelpNotificationTypesView.vue
+++ b/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 -->
--- a/src/views/HelpNotificationsView.vue
+++ b/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 -->
--- a/src/views/HelpOnboardingView.vue
+++ b/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>
--- a/src/views/HelpView.vue
+++ b/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 -->
--- a/src/views/HomeView.vue
+++ b/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>
@@ -268,6 +298,7 @@ import {
  getHeaders,
  getNewOffersToUser,
  getNewOffersToUserProjects,
+  getStarredProjectsWithChanges,
  getPlanFromCache,
 } from "../libs/endorserServer";
 import {
@@ -284,6 +315,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 +428,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 +484,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 +534,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 +660,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
@@ -645,7 +688,9 @@ export default class HomeView extends Vue {

          if (resp.status === 200) {
            // Ultra-concise settings update with automatic cache invalidation!
-            await this.$saveMySettings({ isRegistered: true });
+            await this.$saveUserSettings(this.activeDid, {
+              isRegistered: true,
+            });
            this.isRegistered = true;
          }
        } catch (error) {
@@ -703,7 +748,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();
@@ -717,7 +762,6 @@ export default class HomeView extends Vue {
   * Triggers updateAllFeed() to populate activity feed
   *
   * @internal
-   * Called by mounted()
   */
  private async loadFeedData() {
    await this.updateAllFeed();
@@ -731,7 +775,6 @@ export default class HomeView extends Vue {
   * - Rate limit status for both
   *
   * @internal
-   * Called by mounted() and initializeIdentity()
   * @requires Active DID
   */
  private async loadNewOffers() {
@@ -835,6 +878,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
--- a/src/views/IdentitySwitcherView.vue
+++ b/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 -->
@@ -306,6 +315,9 @@ export default class IdentitySwitcherView extends Vue {
      }

      await this.$exec("DELETE FROM accounts WHERE id = ?", [id]);
+      await this.$exec("DELETE FROM settings WHERE accountDid = ?", [
+        accountDid,
+      ]);
    });

    // Update UI
--- a/src/views/ImportAccountView.vue
+++ b/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">
--- a/src/views/ImportDerivedAccountView.vue
+++ b/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.
--- a/src/views/InviteOneView.vue
+++ b/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>
--- a/src/views/LogView.vue
+++ b/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
--- a/src/views/NewActivityView.vue
+++ b/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>
--- a/src/views/NewEditAccountView.vue
+++ b/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
--- a/src/views/NewEditProjectView.vue
+++ b/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 -->
--- a/src/views/NewIdentifierView.vue
+++ b/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">
--- a/src/views/NotFoundView.vue
+++ b/src/views/NotFoundView.vue
@@ -0,0 +1,86 @@
+<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>
--- a/src/views/OfferDetailsView.vue
+++ b/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>
--- a/src/views/OnboardMeetingListView.vue
+++ b/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">
--- a/src/views/OnboardMeetingMembersView.vue
+++ b/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
--- a/src/views/OnboardMeetingSetupView.vue
+++ b/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
--- a/src/views/ProjectViewView.vue
+++ b/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">
+        {{ 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="{
@@ -140,25 +158,29 @@

        <div class="text-sm text-slate-500">
          <div v-if="!expanded">
-            {{ truncatedDesc }}
+            <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 }}
+            <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>
@@ -291,10 +313,7 @@
              {{ 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"
@@ -592,7 +611,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 +624,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 +684,7 @@ import { UNNAMED_PROJECT } from "@/constants/entities";
    ProjectIcon,
    QuickNav,
    TopMessage,
+    VueMarkdown,
  },
  mixins: [PlatformServiceMixin],
 })
@@ -718,6 +740,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 +752,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 +782,7 @@ export default class ProjectViewView extends Vue {
  totalsExpanded = false;
  truncatedDesc = "";
  /** Truncation length */
-  truncateLength = 40;
+  truncateLength = 200;

  // Utility References
  libsUtil = libsUtil;
@@ -810,6 +836,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 +918,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 +1510,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>
--- a/src/views/ProjectsView.vue
+++ b/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
@@ -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,
--- a/src/views/QuickActionBvcBeginView.vue
+++ b/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>
--- a/src/views/QuickActionBvcEndView.vue
+++ b/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>
--- a/src/views/QuickActionBvcView.vue
+++ b/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
--- a/src/views/RecentOffersToUserProjectsView.vue
+++ b/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">
--- a/src/views/RecentOffersToUserView.vue
+++ b/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">
--- a/src/views/SearchAreaView.vue
+++ b/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">
--- a/src/views/SeedBackupView.vue
+++ b/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">
--- a/src/views/ShareMyContactInfoView.vue
+++ b/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">
--- a/src/views/SharedPhotoView.vue
+++ b/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" />
--- a/src/views/StartView.vue
+++ b/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?
--- a/src/views/StatisticsView.vue
+++ b/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>
--- a/src/views/TestView.vue
+++ b/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">
--- a/src/views/UserProfileView.vue
+++ b/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 -->
--- a/test-playwright/20-create-project.spec.ts
+++ b/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');
--- a/test-playwright/60-new-activity.spec.ts
+++ b/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
--- a/test-playwright/testUtils.ts
+++ b/test-playwright/testUtils.ts
@@ -145,9 +145,10 @@ export async function generateNewEthrUser(page: Page): Promise<string> {
 }

 // Function to generate a random string of specified length
+// Note that this only generates up to 10 characters
 export async function generateRandomString(length: number): Promise<string> {
  return Math.random()
-    .toString(36)
+    .toString(36) // base 36 only generates up to 10 characters
    .substring(2, 2 + length);
 }

@@ -156,7 +157,7 @@ export async function createUniqueStringsArray(
  count: number
 ): Promise<string[]> {
  const stringsArray: string[] = [];
-  const stringLength = 16;
+  const stringLength = 5; // max of 10; see generateRandomString

  for (let i = 0; i < count; i++) {
    let randomString = await generateRandomString(stringLength);
Author	SHA1	Message	Date
Jose Olarte III	b1026a9854	Linting	2025-10-07 16:38:35 +08:00
Jose Olarte III	cba33c6ad9	Merge branch 'master' into view-headings-refresh	2025-10-07 16:37:36 +08:00
Jose Olarte III	756688bf75	feat: restored TopMessage - Added back TopMessage tag, placed inside #Content for better positioning - Styled TopMessage for better visibility	2025-10-06 18:42:05 +08:00
Trent Larson	7599b37c01	feat: add a 'not found' page	2025-10-05 15:31:08 -06:00
Trent Larson	a4024537c2	Merge branch 'star-projects2'	2025-10-05 13:33:58 -06:00
Trent Larson	6fe4f21ea8	fix: use "starred" instead of "favorite", fix tests	2025-10-05 10:43:05 -06:00
Jose Olarte III	be8230d046	refactor: standardize view headings across all components - Add consistent view heading IDs and structure - Add consistent help buttons and back navigation - Improve spacing and typography consistency	2025-10-03 21:49:35 +08:00
Jose Olarte 3	284fee9ded	Merge pull request 'feat: removed "cannot upload images" notification' (#205 ) from remove-cannot-upload-images-notification into master Reviewed-on: #205	2025-10-03 02:18:35 -04:00
Jose Olarte III	88778a167c	WIP: sub view heading adjustments	2025-10-01 18:38:43 +08:00
Jose Olarte III	eca6dfe9d7	feat: removed "cannot upload images" notification - Redundant notification removed - In-section message given "warning message" styling	2025-09-30 16:23:29 +08:00
Jose Olarte III	a6d282e59b	WIP: HomeView heading adjustments	2025-09-29 21:28:48 +08:00
Jose Olarte III	088b9eff7f	feat: remove text size class - Removed `text-sm` so Description row has the same text size as the rest of the Changes table	2025-09-29 16:52:07 +08:00
Trent Larson	ee587ac3fc	fix: remaining starred-project issues, plus better Error logging and user verbiage	2025-09-28 19:07:48 -06:00
Trent Larson	b3112a4086	Merge branch 'star-projects' into star-projects2, bringing star-projects onto master	2025-09-27 14:23:35 -06:00
Trent Larson	db4496c57b	fix: linting	2025-09-27 13:24:28 -06:00
Trent Larson	a51fd90659	feat: add starred project list in search, refactor variable names	2025-09-26 20:13:18 -06:00
Trent Larson	0c627f4822	chore: remove old 'master' settings concept outside PlatformServiceMixin	2025-09-25 21:17:38 -06:00
trentlarson	c7276f0b4d	Merge pull request 'Copy important settings from previous MASTER settings' (#202 ) from copy-settings into master Reviewed-on: #202	2025-09-24 21:29:33 -04:00
Trent Larson	d6524cbd43	fix: don't lose the name when running the migration	2025-09-24 19:29:28 -06:00
Trent Larson	f5bea24921	fix: linting	2025-09-24 18:51:48 -06:00
Trent Larson	46d7fee95e	fix: remove settings, too, when deleting an identity	2025-09-24 09:10:21 -06:00
Trent Larson	c0f407eb72	chore: remove saveMySettings that depended on an implicit variable	2025-09-22 20:18:38 -06:00
Trent Larson	e8e0f315f8	feat: copy important old settings from master record to others	2025-09-22 20:17:56 -06:00
Trent Larson	1ea4608f0d	feat: remove unused settings DB entries, only uninstall Android on request, bump version to 1.1.1-beta	2025-09-20 21:49:49 -06:00
Jose Olarte 3	2dc9b509ce	Merge pull request 'fix: load environment-specific .env files in iOS/Android/Electron build scripts' (#201 ) from load-build-mode-env-file into master Reviewed-on: #201	2025-09-19 04:35:32 -04:00
Trent Larson	855448d07a	feat: add a page to see all the starred projects	2025-09-10 14:40:36 -06:00
Trent Larson	9f1495e185	feat: alloww markdown in the descriptions and render them appropriately	2025-09-01 18:40:35 -06:00
Trent Larson	f61cb6eea7	fix: on project changes, truncate the description properly (to avoid screen zooming in) and widen the table	2025-09-01 14:53:39 -06:00
Trent Larson	d3f54d6bff	feat: move the user profile up on page, reword "star" to "favorite"	2025-08-31 08:21:25 -06:00
Trent Larson	2bb733a9ea	feat: make each of the "new" buttons on the home page the same size	2025-08-31 07:46:10 -06:00
Trent Larson	7da6f722f5	fix: fix remaining problems with recent plan changes	2025-08-30 21:30:03 -06:00
Trent Larson	475f4d5ce5	feat: add changed details for plans with recent changes (not all are accurate yet)	2025-08-30 17:18:56 -06:00
Trent Larson	24a7cf5eb6	feat: add a notification for changes to starred projects	2025-08-29 17:31:00 -06:00
Trent Larson	da0621c09a	feat: Start the ability to star/bookmark a project. - Currently toggles & stores correctly locally on project. Does not show on other screens.	2025-08-29 15:03:13 -06:00