feat: auto-show visibility dialog for meeting members

- Show dialog on initial load if members need visibility settings - Show dialog during auto-refresh only when new members are added (not removed) - Show dialog on manual refresh if any members need visibility settings - Remove manual "Set Visibility" buttons from UI as dialog now appears automatically - Add logic to track previous visibility members and detect changes - Improve UX by proactively prompting users to set visibility for new meeting members The dialog now appears automatically in these scenarios: - Component initialization with members needing visibility - Auto-refresh when new members join the meeting - Manual refresh when members need visibility settings
refactor: rename SetVisibilityDialog to SetBulkVisibilityDialog and remove unused code
2025-10-17 19:17:47 +08:00 · 2025-10-17 17:59:41 +08:00 · 2025-10-16 17:49:59 +08:00 · 2025-10-16 17:18:56 +08:00 · 2025-10-15 20:25:01 +08:00 · 2025-10-14 21:21:35 +08:00
86 changed files with 3168 additions and 959 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/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, user-scalable=no, interactive-widget=overlays-content" />
    <!-- CORS headers removed to allow images from any domain -->
@@ -13,4 +13,4 @@
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
-</html>
+</html>
--- 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 ""
@@ -351,8 +358,18 @@ fi
 # Setup application directories
 setup_app_directories
-# Load environment from .env file if it exists
+# Load environment-specific .env file if it exists
-load_env_file ".env"
+env_file=".env.$BUILD_MODE"
 if [ -f "$env_file" ]; then
    load_env_file "$env_file"
 else
    log_debug "No $env_file file found, using default environment"
 fi
 # Load .env file if it exists (fallback)
 if [ -f ".env" ]; then
    load_env_file ".env"
 fi
 # Handle clean-only mode
 if [ "$CLEAN_ONLY" = true ]; then
@@ -407,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
+# Step 2: Uninstall Android app
-safe_execute "Cleaning Android app" "npm run clean:android" || exit 1
+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/build-electron.sh
+++ b/scripts/build-electron.sh
@@ -341,7 +341,19 @@ main_electron_build() {
    # Setup environment
    setup_build_env "electron" "$BUILD_MODE"
    setup_app_directories
-    load_env_file ".env"
+    
    # Load environment-specific .env file if it exists
    env_file=".env.$BUILD_MODE"
    if [ -f "$env_file" ]; then
        load_env_file "$env_file"
    else
        log_debug "No $env_file file found, using default environment"
    fi
    # Load .env file if it exists (fallback)
    if [ -f ".env" ]; then
        load_env_file ".env"
    fi
    # Step 1: Clean Electron build artifacts
    clean_electron_artifacts
--- a/scripts/build-ios.sh
+++ b/scripts/build-ios.sh
@@ -324,8 +324,18 @@ fi
 # Setup application directories
 setup_app_directories
-# Load environment from .env file if it exists
+# Load environment-specific .env file if it exists
-load_env_file ".env"
+env_file=".env.$BUILD_MODE"
 if [ -f "$env_file" ]; then
    load_env_file "$env_file"
 else
    log_debug "No $env_file file found, using default environment"
 fi
 # Load .env file if it exists (fallback)
 if [ -f ".env" ]; then
    load_env_file ".env"
 fi
 # Validate iOS environment
 validate_ios_environment
--- 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
@@ -7,6 +7,24 @@
    html {
        font-family: 'Work Sans', ui-sans-serif, system-ui, sans-serif !important;
    }
    /* Fix iOS viewport height changes when keyboard appears/disappears */
    html, body {
        height: 100%;
        height: 100vh;
        height: 100dvh; /* Dynamic viewport height for better mobile support */
        overflow: hidden; /* Disable all scrolling on html and body */
        position: fixed; /* Force fixed positioning to prevent viewport changes */
        width: 100%;
        top: 0;
        left: 0;
    }
    #app {
        height: 100vh;
        height: 100dvh;
        overflow-y: auto;
    }
 }
@layer components {
@@ -22,4 +40,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
@@ -78,9 +78,15 @@
      </div>
      <!-- Description -->
-      <p class="font-medium">
+      <p class="font-medium overflow-hidden">
-        <a class="cursor-pointer" @click="emitLoadClaim(record.jwtId)">
+        <a
-          {{ description }}
+          class="block cursor-pointer overflow-hidden text-ellipsis"
          @click="emitLoadClaim(record.jwtId)"
        >
          <vue-markdown
            :source="truncatedDescription"
            class="markdown-content"
          />
        </a>
      </p>
@@ -258,11 +264,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 +311,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/ContactListItem.vue
+++ b/src/components/ContactListItem.vue
@@ -46,7 +46,7 @@
            <span class="text-xs truncate">{{ contact.did }}</span>
          </div>
-          <div class="text-sm">
+          <div class="text-sm truncate">
            {{ contact.notes }}
          </div>
        </div>
--- 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/ImageMethodDialog.vue
+++ b/src/components/ImageMethodDialog.vue
@@ -293,7 +293,7 @@ const inputImageFileNameRef = ref<Blob>();
 export default class ImageMethodDialog extends Vue {
  $notify!: NotifyFunction;
  $router!: Router;
-  notify = createNotifyHelpers(this.$notify);
+  notify!: ReturnType<typeof createNotifyHelpers>;
  /** Active DID for user authentication */
  activeDid = "";
@@ -498,6 +498,9 @@ export default class ImageMethodDialog extends Vue {
   * @throws {Error} When settings retrieval fails
   */
  async mounted() {
    // Initialize notification helpers
    this.notify = createNotifyHelpers(this.$notify);
    try {
      // Get activeDid from active_identity table (single source of truth)
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
--- a/src/components/MembersList.vue
+++ b/src/components/MembersList.vue
@@ -11,7 +11,7 @@
    <!-- Members List -->
    <div v-else>
-      <div class="text-center text-red-600 py-4">
+      <div class="text-center text-red-600 my-4">
        {{ decryptionErrorMessage() }}
      </div>
@@ -23,97 +23,94 @@
        to set it.
      </div>
-      <div>
+      <ul class="list-disc text-sm ps-4 space-y-2 mb-4">
-        <span
+        <li
          v-if="membersToShow().length > 0 && showOrganizerTools && isOrganizer"
          class="inline-flex items-center flex-wrap"
        >
-          <span class="inline-flex items-center">
+          Click
            &bull; Click
            <span
              class="mx-2 min-w-[24px] min-h-[24px] w-6 h-6 flex items-center justify-center rounded-full bg-blue-100 text-blue-600"
            >
              <font-awesome icon="plus" class="text-sm" />
            </span>
            /
            <span
              class="mx-2 min-w-[24px] min-h-[24px] w-6 h-6 flex items-center justify-center rounded-full bg-blue-100 text-blue-600"
            >
              <font-awesome icon="minus" class="text-sm" />
            </span>
            to add/remove them to/from the meeting.
          </span>
        </span>
      </div>
      <div>
        <span
          v-if="membersToShow().length > 0"
          class="inline-flex items-center"
        >
          &bull; Click
          <span
-            class="mx-2 w-8 h-8 flex items-center justify-center rounded-full bg-green-100 text-green-600"
+            class="inline-block w-5 h-5 rounded-full bg-blue-100 text-blue-600 text-center"
          >
-            <font-awesome icon="circle-user" class="text-xl" />
+            <font-awesome icon="plus" class="text-sm" />
          </span>
          /
          <span
            class="inline-block w-5 h-5 rounded-full bg-blue-100 text-blue-600 text-center"
          >
            <font-awesome icon="minus" class="text-sm" />
          </span>
          to add/remove them to/from the meeting.
        </li>
        <li v-if="membersToShow().length > 0">
          Click
          <span
            class="inline-block w-5 h-5 rounded-full bg-green-100 text-green-600 text-center"
          >
            <font-awesome icon="circle-user" class="text-sm" />
          </span>
          to add them to your contacts.
-        </span>
+        </li>
-      </div>
+      </ul>
-      <div class="flex justify-center">
+      <div class="flex justify-between">
        <!-- 
        always have at least one refresh button even without members in case the organizer 
         changes the password 
         -->
        <button
-          class="btn-action-refresh"
+          class="text-sm bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-3 py-1.5 rounded-md"
-          title="Refresh members list"
+          title="Refresh members list now"
-          @click="fetchMembers"
+          @click="manualRefresh"
        >
          <font-awesome icon="rotate" :class="{ 'fa-spin': isLoading }" />
          Refresh
          <span class="text-xs">({{ countdownTimer }}s)</span>
        </button>
      </div>
-      <div
+      <ul
-        v-for="member in membersToShow()"
+        v-if="membersToShow().length > 0"
-        :key="member.member.memberId"
+        class="border-t border-slate-300 my-2"
        class="mt-2 p-4 bg-gray-50 rounded-lg"
      >
-        <div class="flex items-center justify-between">
+        <li
-          <div class="flex items-center">
+          v-for="member in membersToShow()"
-            <h3 class="text-lg font-medium">
+          :key="member.member.memberId"
-              {{ member.name || unnamedMember }}
+          class="border-b border-slate-300 py-1.5"
-            </h3>
+        >
-            <div
+          <div class="flex items-center gap-2 justify-between">
-              v-if="!getContactFor(member.did) && member.did !== activeDid"
+            <div class="flex items-center gap-1 overflow-hidden">
-              class="flex justify-end"
+              <h3 class="font-semibold truncate">
-            >
+                {{ member.name || unnamedMember }}
-              <button
+              </h3>
-                class="btn-add-contact"
+              <div
-                title="Add as contact"
+                v-if="!getContactFor(member.did) && member.did !== activeDid"
-                @click="addAsContact(member)"
+                class="flex items-center gap-1"
              >
-                <font-awesome icon="circle-user" class="text-xl" />
+                <button
-              </button>
+                  class="btn-add-contact"
                  title="Add as contact"
                  @click="addAsContact(member)"
                >
                  <font-awesome icon="circle-user" />
                </button>
                <button
                  class="btn-info-contact"
                  title="Contact Info"
                  @click="
                    informAboutAddingContact(
                      getContactFor(member.did) !== undefined,
                    )
                  "
                >
                  <font-awesome icon="circle-info" class="text-sm" />
                </button>
              </div>
            </div>
            <button
              v-if="member.did !== activeDid"
              class="btn-info-contact"
              title="Contact info"
              @click="
                informAboutAddingContact(
                  getContactFor(member.did) !== undefined,
                )
              "
            >
              <font-awesome icon="circle-info" class="text-base" />
            </button>
          </div>
          <div class="flex">
            <span
              v-if="
                showOrganizerTools && isOrganizer && member.did !== activeDid
              "
-              class="flex items-center"
+              class="flex items-center gap-1"
            >
              <button
                class="btn-admission"
@@ -124,30 +121,37 @@
              >
                <font-awesome
                  :icon="member.member.admitted ? 'minus' : 'plus'"
                  class="text-sm"
                />
              </button>
              <button
                class="btn-info-admission"
-                title="Admission info"
+                title="Admission Info"
                @click="informAboutAdmission()"
              >
-                <font-awesome icon="circle-info" class="text-base" />
+                <font-awesome icon="circle-info" class="text-sm" />
              </button>
            </span>
          </div>
-        </div>
+          <p class="text-xs text-gray-600 truncate">
-        <p class="text-sm text-gray-600 truncate">
+            {{ member.did }}
-          {{ member.did }}
+          </p>
-        </p>
+        </li>
-      </div>
+      </ul>
-      <div v-if="membersToShow().length > 0" class="flex justify-center mt-4">
+
      <div v-if="membersToShow().length > 0" class="flex justify-between">
        <!-- 
        always have at least one refresh button even without members in case the organizer 
         changes the password 
         -->
        <button
-          class="btn-action-refresh"
+          class="text-sm bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-3 py-1.5 rounded-md"
-          title="Refresh members list"
+          title="Refresh members list now"
-          @click="fetchMembers"
+          @click="manualRefresh"
        >
          <font-awesome icon="rotate" :class="{ 'fa-spin': isLoading }" />
          Refresh
          <span class="text-xs">({{ countdownTimer }}s)</span>
        </button>
      </div>
@@ -156,6 +160,15 @@
      </p>
    </div>
  </div>
  <!-- Set Visibility Dialog Component -->
  <SetBulkVisibilityDialog
    :visible="showSetVisibilityDialog"
    :members-data="visibilityDialogMembers"
    :active-did="activeDid"
    :api-server="apiServer"
    @close="closeSetVisibilityDialog"
  />
 </template>
 <script lang="ts">
@@ -178,6 +191,7 @@ import {
  NOTIFY_CONTINUE_WITHOUT_ADDING,
 } from "@/constants/notifications";
 import { SOMEONE_UNNAMED } from "@/constants/entities";
 import SetBulkVisibilityDialog from "./SetBulkVisibilityDialog.vue";
 interface Member {
  admitted: boolean;
@@ -193,6 +207,9 @@ interface DecryptedMember {
 }
@Component({
  components: {
    SetBulkVisibilityDialog,
  },
  mixins: [PlatformServiceMixin],
 })
 export default class MembersList extends Vue {
@@ -219,8 +236,25 @@ export default class MembersList extends Vue {
  missingMyself = false;
  activeDid = "";
  apiServer = "";
  // Set Visibility Dialog state
  showSetVisibilityDialog = false;
  visibilityDialogMembers: Array<{
    did: string;
    name: string;
    isContact: boolean;
    member: { memberId: string };
  }> = [];
  contacts: Array<Contact> = [];
  // Auto-refresh functionality
  countdownTimer = 10;
  autoRefreshInterval: NodeJS.Timeout | null = null;
  lastRefreshTime = 0;
  // Track previous visibility members to detect changes
  previousVisibilityMembers: string[] = [];
  /**
   * Get the unnamed member constant
   */
@@ -242,6 +276,21 @@ export default class MembersList extends Vue {
    this.firstName = settings.firstName || "";
    await this.fetchMembers();
    await this.loadContacts();
    // Start auto-refresh
    this.startAutoRefresh();
    // Check if we should show the visibility dialog on initial load
    this.checkAndShowVisibilityDialog();
  }
  async refreshData() {
    // Force refresh both contacts and members
    await this.loadContacts();
    await this.fetchMembers();
    // Check if we should show the visibility dialog after refresh
    this.checkAndShowVisibilityDialog();
  }
  async fetchMembers() {
@@ -344,7 +393,7 @@ export default class MembersList extends Vue {
  informAboutAdmission() {
    this.notify.info(
-      "This is to register people in Time Safari and to admit them to the meeting. A '+' symbol means they are not yet admitted and you can register and admit them. A '-' means you can remove them, but they will stay registered.",
+      "This is to register people in Time Safari and to admit them to the meeting. A (+) symbol means they are not yet admitted and you can register and admit them. A (-) symbol means you can remove them, but they will stay registered.",
      TIMEOUTS.VERY_LONG,
    );
  }
@@ -371,6 +420,80 @@ export default class MembersList extends Vue {
    return this.contacts.find((contact) => contact.did === did);
  }
  getMembersForVisibility() {
    return this.decryptedMembers
      .filter((member) => {
        // Exclude the current user
        if (member.did === this.activeDid) {
          return false;
        }
        const contact = this.getContactFor(member.did);
        // Include members who:
        // 1. Haven't been added as contacts yet, OR
        // 2. Are contacts but don't have visibility set (seesMe property)
        return !contact || !contact.seesMe;
      })
      .map((member) => ({
        did: member.did,
        name: member.name,
        isContact: !!this.getContactFor(member.did),
        member: {
          memberId: member.member.memberId.toString(),
        },
      }));
  }
  /**
   * Check if we should show the visibility dialog
   * Returns true if there are members for visibility and either:
   * - This is the first time (no previous members tracked), OR
   * - New members have been added since last check (not removed)
   */
  shouldShowVisibilityDialog(): boolean {
    const currentMembers = this.getMembersForVisibility();
    if (currentMembers.length === 0) {
      return false;
    }
    // If no previous members tracked, show dialog
    if (this.previousVisibilityMembers.length === 0) {
      return true;
    }
    // Check if new members have been added (not just any change)
    const currentMemberIds = currentMembers.map((m) => m.did);
    const previousMemberIds = this.previousVisibilityMembers;
    // Find new members (members in current but not in previous)
    const newMembers = currentMemberIds.filter(
      (id) => !previousMemberIds.includes(id),
    );
    // Only show dialog if there are new members added
    return newMembers.length > 0;
  }
  /**
   * Update the tracking of previous visibility members
   */
  updatePreviousVisibilityMembers() {
    const currentMembers = this.getMembersForVisibility();
    this.previousVisibilityMembers = currentMembers.map((m) => m.did);
  }
  /**
   * Show the visibility dialog if conditions are met
   */
  checkAndShowVisibilityDialog() {
    if (this.shouldShowVisibilityDialog()) {
      this.showSetBulkVisibilityDialog();
    }
    this.updatePreviousVisibilityMembers();
  }
  checkWhetherContactBeforeAdmitting(decrMember: DecryptedMember) {
    const contact = this.getContactFor(decrMember.did);
    if (!decrMember.member.admitted && !contact) {
@@ -508,6 +631,79 @@ export default class MembersList extends Vue {
      this.notify.error(message, TIMEOUTS.LONG);
    }
  }
  showSetBulkVisibilityDialog() {
    // Filter members to show only those who need visibility set
    const membersForVisibility = this.getMembersForVisibility();
    // Pause auto-refresh when dialog opens
    this.stopAutoRefresh();
    // Open the dialog directly
    this.visibilityDialogMembers = membersForVisibility;
    this.showSetVisibilityDialog = true;
  }
  startAutoRefresh() {
    this.lastRefreshTime = Date.now();
    this.countdownTimer = 10;
    this.autoRefreshInterval = setInterval(() => {
      const now = Date.now();
      const timeSinceLastRefresh = (now - this.lastRefreshTime) / 1000;
      if (timeSinceLastRefresh >= 10) {
        // Time to refresh
        this.refreshData();
        this.lastRefreshTime = now;
        this.countdownTimer = 10;
      } else {
        // Update countdown
        this.countdownTimer = Math.max(
          0,
          Math.round(10 - timeSinceLastRefresh),
        );
      }
    }, 1000); // Update every second
  }
  stopAutoRefresh() {
    if (this.autoRefreshInterval) {
      clearInterval(this.autoRefreshInterval);
      this.autoRefreshInterval = null;
    }
  }
  manualRefresh() {
    // Clear existing auto-refresh interval
    if (this.autoRefreshInterval) {
      clearInterval(this.autoRefreshInterval);
      this.autoRefreshInterval = null;
    }
    // Trigger immediate refresh and restart timer
    this.refreshData();
    this.startAutoRefresh();
    // Always show dialog on manual refresh if there are members for visibility
    if (this.getMembersForVisibility().length > 0) {
      this.showSetBulkVisibilityDialog();
    }
  }
  // Set Visibility Dialog methods
  closeSetVisibilityDialog() {
    this.showSetVisibilityDialog = false;
    this.visibilityDialogMembers = [];
    // Refresh data when dialog is closed
    this.refreshData();
    // Resume auto-refresh when dialog is closed
    this.startAutoRefresh();
  }
  beforeDestroy() {
    this.stopAutoRefresh();
  }
 }
 </script>
@@ -522,29 +718,23 @@ export default class MembersList extends Vue {
 .btn-add-contact {
  /* stylelint-disable-next-line at-rule-no-unknown */
-  @apply ml-2 w-8 h-8 flex items-center justify-center rounded-full 
+  @apply w-6 h-6 flex items-center justify-center rounded-full 
    bg-green-100 text-green-600 hover:bg-green-200 hover:text-green-800 
    transition-colors;
 }
-.btn-info-contact {
+.btn-info-contact,
 .btn-info-admission {
  /* stylelint-disable-next-line at-rule-no-unknown */
-  @apply ml-2 mb-2 w-6 h-6 flex items-center justify-center rounded-full 
+  @apply w-6 h-6 flex items-center justify-center rounded-full 
-    bg-slate-100 text-slate-500 hover:bg-slate-200 hover:text-slate-800 
+    bg-slate-100 text-slate-400 hover:text-slate-600 
    transition-colors;
 }
 .btn-admission {
  /* stylelint-disable-next-line at-rule-no-unknown */
-  @apply mr-2 w-6 h-6 flex items-center justify-center rounded-full 
+  @apply w-6 h-6 flex items-center justify-center rounded-full 
    bg-blue-100 text-blue-600 hover:bg-blue-200 hover:text-blue-800 
    transition-colors;
 }
 .btn-info-admission {
  /* stylelint-disable-next-line at-rule-no-unknown */
  @apply mr-2 mb-2 w-6 h-6 flex items-center justify-center rounded-full 
    bg-slate-100 text-slate-500 hover:bg-slate-200 hover:text-slate-800 
    transition-colors;
 }
 </style>
--- a/src/components/SetBulkVisibilityDialog.vue
+++ b/src/components/SetBulkVisibilityDialog.vue
@@ -0,0 +1,333 @@
 <template>
  <div v-if="visible" class="dialog-overlay">
    <div class="dialog">
      <div class="text-slate-900 text-center">
        <h3 class="text-lg font-semibold leading-[1.25] mb-2">
          Set Visibility to Meeting Members
        </h3>
        <p class="text-sm mb-4">
          Would you like to <b>make your activities visible</b> to the following
          members? (This will also add them as contacts if they aren't already.)
        </p>
        <!-- Custom table area - you can customize this -->
        <div v-if="shouldInitializeSelection" class="mb-4">
          <table
            class="w-full border-collapse border border-slate-300 text-sm text-start"
          >
            <thead v-if="membersData && membersData.length > 0">
              <tr class="bg-slate-100 font-medium">
                <th class="border border-slate-300 px-3 py-2">
                  <label class="flex items-center gap-2">
                    <input
                      type="checkbox"
                      :checked="isAllSelected"
                      :indeterminate="isIndeterminate"
                      @change="toggleSelectAll"
                    />
                    Select All
                  </label>
                </th>
              </tr>
            </thead>
            <tbody>
              <!-- Dynamic data from MembersList -->
              <tr v-if="!membersData || membersData.length === 0">
                <td
                  class="border border-slate-300 px-3 py-2 text-center italic text-gray-500"
                >
                  No members need visibility settings
                </td>
              </tr>
              <tr
                v-for="member in membersData || []"
                :key="member.member.memberId"
              >
                <td class="border border-slate-300 px-3 py-2">
                  <div class="flex items-center justify-between gap-2">
                    <label class="flex items-center gap-2">
                      <input
                        type="checkbox"
                        :checked="isMemberSelected(member.did)"
                        @change="toggleMemberSelection(member.did)"
                      />
                      {{ member.name || SOMEONE_UNNAMED }}
                    </label>
                    <!-- Friend indicator - only show if they are already a contact -->
                    <font-awesome
                      v-if="member.isContact"
                      icon="user-circle"
                      class="fa-fw ms-auto text-slate-400 cursor-pointer hover:text-slate-600"
                      @click="showContactInfo"
                    />
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="space-y-2">
          <button
            v-if="membersData && membersData.length > 0"
            :disabled="!hasSelectedMembers"
            :class="[
              'block w-full text-center text-md font-bold uppercase px-2 py-2 rounded-md',
              hasSelectedMembers
                ? 'bg-blue-600 text-white cursor-pointer'
                : 'bg-slate-400 text-slate-200 cursor-not-allowed',
            ]"
            @click="setVisibilityForSelectedMembers"
          >
            Set Visibility
          </button>
          <button
            class="block w-full text-center text-md font-bold uppercase bg-slate-600 text-white px-2 py-2 rounded-md"
            @click="cancel"
          >
            {{
              membersData && membersData.length > 0 ? "Maybe Later" : "Cancel"
            }}
          </button>
        </div>
      </div>
    </div>
  </div>
 </template>
 <script lang="ts">
 import { Vue, Component, Prop } from "vue-facing-decorator";
 import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
 import { SOMEONE_UNNAMED } from "@/constants/entities";
 import { setVisibilityUtil } from "@/libs/endorserServer";
 import { createNotifyHelpers } from "@/utils/notify";
 interface MemberData {
  did: string;
  name: string;
  isContact: boolean;
  member: {
    memberId: string;
  };
 }
@Component({
  mixins: [PlatformServiceMixin],
 })
 export default class SetBulkVisibilityDialog extends Vue {
  @Prop({ default: false }) visible!: boolean;
  @Prop({ default: () => [] }) membersData!: MemberData[];
  @Prop({ default: "" }) activeDid!: string;
  @Prop({ default: "" }) apiServer!: string;
  // Vue notification system
  $notify!: (
    notification: { group: string; type: string; title: string; text: string },
    timeout?: number,
  ) => void;
  // Notification system
  notify!: ReturnType<typeof createNotifyHelpers>;
  // Component state
  selectedMembers: string[] = [];
  selectionInitialized = false;
  // Constants
  // In Vue templates, imported constants need to be explicitly made available to the template
  readonly SOMEONE_UNNAMED = SOMEONE_UNNAMED;
  get hasSelectedMembers() {
    return this.selectedMembers.length > 0;
  }
  get isAllSelected() {
    if (!this.membersData || this.membersData.length === 0) return false;
    return this.membersData.every((member) =>
      this.selectedMembers.includes(member.did),
    );
  }
  get isIndeterminate() {
    if (!this.membersData || this.membersData.length === 0) return false;
    const selectedCount = this.membersData.filter((member) =>
      this.selectedMembers.includes(member.did),
    ).length;
    return selectedCount > 0 && selectedCount < this.membersData.length;
  }
  get shouldInitializeSelection() {
    // This method will initialize selection when the dialog opens
    if (!this.selectionInitialized) {
      this.initializeSelection();
      this.selectionInitialized = true;
    }
    return true;
  }
  created() {
    this.notify = createNotifyHelpers(this.$notify);
  }
  initializeSelection() {
    // Reset selection when dialog opens
    this.selectedMembers = [];
    // Select all by default
    this.selectedMembers = this.membersData.map((member) => member.did);
  }
  resetSelection() {
    this.selectedMembers = [];
    this.selectionInitialized = false;
  }
  toggleSelectAll() {
    if (!this.membersData || this.membersData.length === 0) return;
    if (this.isAllSelected) {
      // Deselect all
      this.selectedMembers = [];
    } else {
      // Select all
      this.selectedMembers = this.membersData.map((member) => member.did);
    }
  }
  toggleMemberSelection(memberDid: string) {
    const index = this.selectedMembers.indexOf(memberDid);
    if (index > -1) {
      this.selectedMembers.splice(index, 1);
    } else {
      this.selectedMembers.push(memberDid);
    }
  }
  isMemberSelected(memberDid: string) {
    return this.selectedMembers.includes(memberDid);
  }
  async setVisibilityForSelectedMembers() {
    try {
      const selectedMembers = this.membersData.filter((member) =>
        this.selectedMembers.includes(member.did),
      );
      let successCount = 0;
      for (const member of selectedMembers) {
        try {
          // If they're not a contact yet, add them as a contact first
          if (!member.isContact) {
            await this.addAsContact(member);
          }
          // Set their seesMe to true
          await this.updateContactVisibility(member.did, true);
          successCount++;
        } catch (error) {
          // eslint-disable-next-line no-console
          console.error(`Error processing member ${member.did}:`, error);
          // Continue with other members even if one fails
        }
      }
      // Show success notification
      this.$notify(
        {
          group: "alert",
          type: "success",
          title: "Visibility Set Successfully",
          text: `Visibility set for ${successCount} member${successCount === 1 ? "" : "s"}.`,
        },
        5000,
      );
      // Emit success event
      this.$emit("success", successCount);
      this.close();
    } catch (error) {
      // eslint-disable-next-line no-console
      console.error("Error setting visibility:", error);
      this.$notify(
        {
          group: "alert",
          type: "danger",
          title: "Error",
          text: "Failed to set visibility for some members. Please try again.",
        },
        5000,
      );
    }
  }
  async addAsContact(member: { did: string; name: string }) {
    try {
      const newContact = {
        did: member.did,
        name: member.name,
      };
      await this.$insertContact(newContact);
    } catch (err) {
      // eslint-disable-next-line no-console
      console.error("Error adding contact:", err);
      if (err instanceof Error && err.message?.indexOf("already exists") > -1) {
        // Contact already exists, continue
      } else {
        throw err; // Re-throw if it's not a duplicate error
      }
    }
  }
  async updateContactVisibility(did: string, seesMe: boolean) {
    try {
      // Get the contact object
      const contact = await this.$getContact(did);
      if (!contact) {
        throw new Error(`Contact not found for DID: ${did}`);
      }
      // Use the proper API to set visibility on the server
      const result = await setVisibilityUtil(
        this.activeDid,
        this.apiServer,
        this.axios,
        contact,
        seesMe,
      );
      if (!result.success) {
        throw new Error(result.error || "Failed to set visibility");
      }
    } catch (err) {
      // eslint-disable-next-line no-console
      console.error("Error updating contact visibility:", err);
      throw err;
    }
  }
  showContactInfo() {
    this.$notify(
      {
        group: "alert",
        type: "info",
        title: "Contact Info",
        text: "This user is already your contact, but your activities are not visible to them yet.",
      },
      5000,
    );
  }
  close() {
    this.resetSelection();
    this.$emit("close");
  }
  cancel() {
    this.close();
  }
 }
 </script>
--- 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>
+    {{ message }}
    <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>
  </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()
+  // - Cached database operations: this.$contacts(), this.$accountSettings()
-  // - Settings shortcuts: this.$saveSettings(), this.$saveMySettings()
+  // - 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/constants/app.ts
+++ b/src/constants/app.ts
@@ -59,7 +59,7 @@ export const PASSKEYS_ENABLED =
 export interface NotificationIface {
  group: string; // "alert" | "modal"
  type: string; // "toast" | "info" | "success" | "warning" | "danger"
-  title: string;
+  title?: string;
  text?: string;
  callback?: (success: boolean) => Promise<void>; // if this triggered an action
  noText?: string;
@@ -68,4 +68,11 @@ export interface NotificationIface {
  onYes?: () => Promise<void>;
  promptToStopAsking?: boolean;
  yesText?: string;
  membersData?: Array<{
    member: { admitted: boolean; content: string; memberId: number };
    name: string;
    did: string;
    isContact: boolean;
    contact?: { did: string; name?: string; seesMe?: boolean };
  }>; // For passing member data to visibility dialog
 }
--- 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;
-  DELETE FROM settings WHERE accountDid IS NULL AND id != 1;
+  UPDATE settings SET activeDid = NULL;
  UPDATE settings SET activeDid = NULL WHERE id = 1 AND EXISTS (
    SELECT 1 FROM active_identity WHERE id = 1 AND activeDid IS NOT 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) {
+    settings.searchBoxes = parseJsonField(settings.searchBoxes, []);
-      // @ts-expect-error - the searchBoxes field is a string in the DB
+    settings.starredPlanHandleIds = parseJsonField(
-      settings.searchBoxes = JSON.parse(settings.searchBoxes);
+      settings.starredPlanHandleIds,
-    }
+      [],
    );
    return settings;
  }
 }
@@ -226,10 +200,11 @@ export async function retrieveSettingsForActiveAccount(): Promise<Settings> {
        );
      }
-      // Handle searchBoxes parsing
+      settings.searchBoxes = parseJsonField(settings.searchBoxes, []);
-      if (settings.searchBoxes) {
+      settings.starredPlanHandleIds = parseJsonField(
-        settings.searchBoxes = parseJsonField(settings.searchBoxes, []);
+        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 {
+  // not wrapped in a 'try' because the error returned is self-explanatory
-    const response = await axios.get(url, { headers } as AxiosRequestConfig);
+  const response = await axios.get(url, { headers } as AxiosRequestConfig);
-    // Log successful registration check
+  // Log successful registration check
-    logger.debug("[User Registration] User registration check successful:", {
+  logger.debug("[User Registration] User registration check successful:", {
-      did: issuerDid,
+    did: issuerDid,
-      server: apiServer,
+    server: apiServer,
-      status: response.status,
+    status: response.status,
-      isRegistered: true,
+    isRegistered: true,
-      timestamp: new Date().toISOString(),
+    timestamp: new Date().toISOString(),
-    });
+  });
-    return response;
+  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;
  }
 }
 /**
@@ -1788,14 +1819,17 @@ export async function fetchImageRateLimits(
      };
    };
-    logger.error("[Image Server] Image rate limits check failed:", {
+    logger.warn(
-      did: issuerDid,
+      "[Image Server] Image rate limits check failed, which is expected for users not registered on test server (eg. when only registered on local server).",
-      server: server,
+      {
-      errorCode: axiosError.response?.data?.error?.code,
+        did: issuerDid,
-      errorMessage: axiosError.response?.data?.error?.message,
+        server: server,
-      httpStatus: axiosError.response?.status,
+        errorCode: axiosError.response?.data?.error?.code,
-      timestamp: new Date().toISOString(),
+        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 = ?",
+          "SELECT searchBoxes FROM settings limit 1",
          [MASTER_SETTINGS_KEY],
        );
        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 =
-    const argsString = args.length > 0 ? safeStringify(args) : "";
+      args.length > 0 ? " - " + args.map(safeStringify).join(", ") : "";
-    logToDatabase(messageString + argsString, "error");
+    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 -->
+    <TopMessage />
-    <h1 id="ViewHeading" class="text-4xl text-center font-light">
+
-      Your Identity
+    <!-- Main View Heading -->
-    </h1>
+    <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.isSearchAreasSet =
-    this.searchBox = settings.searchBoxes?.[0] || null;
+      !!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 -->
+    <!-- Sub View Heading -->
-    <div id="ViewBreadcrumb" class="mb-8">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      <h1 class="text-lg text-center font-light relative px-7">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
        <!-- 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>
        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 -->
+    <!-- Sub View Heading -->
-    <div id="ViewBreadcrumb" class="mb-8">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      <h1 class="text-lg text-center font-light relative px-7">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
        <!-- 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>
        Verifiable Claim Details
      </h1>
      <!-- Back -->
      <a
        class="order-first text-lg text-center leading-none p-1"
        @click="$router.go(-1)"
      >
        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
      </a>
      <!-- Help button -->
      <router-link
        :to="{ name: 'help' }"
        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
      >
        <font-awesome icon="question" class="block text-center w-[1em]" />
      </router-link>
    </div>
    <!-- Details -->
@@ -80,16 +88,22 @@
              </button>
            </div>
          </div>
-          <div class="text-sm">
+          <div class="text-sm overflow-hidden">
-            <div data-testId="description">
+            <div
              data-testId="description"
              class="overflow-hidden text-ellipsis"
            >
              <font-awesome icon="message" class="fa-fw text-slate-400" />
-              {{ claimDescription }}
+              <vue-markdown
                :source="claimDescription"
                class="markdown-content"
              />
            </div>
-            <div>
+            <div class="overflow-hidden text-ellipsis">
              <font-awesome icon="user" class="fa-fw text-slate-400" />
              {{ didInfo(veriClaim.issuer) }}
            </div>
-            <div>
+            <div class="overflow-hidden text-ellipsis">
              <font-awesome icon="calendar" class="fa-fw text-slate-400" />
              Recorded
              {{ formattedIssueDate }}
@@ -533,8 +547,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 +569,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 -->
+    <!-- Sub View Heading -->
-    <div id="ViewBreadcrumb" class="mb-8">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      <h1 class="text-lg text-center font-light relative px-7">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
        <!-- 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>
        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 -->
+    <TopMessage />
-    <div id="ViewBreadcrumb" class="mb-8">
+
-      <h1 class="text-lg text-center font-light relative px-7">
+    <!-- Sub View Heading -->
-        <!-- Back -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-        <button
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
          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>
        <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 -->
+    <!-- Sub View Heading -->
-    <div class="mb-8">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      <router-link
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
        :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">
        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">
+    <TopMessage />
-      <h1 class="text-4xl text-center font-light relative px-7">
+
-        <!-- Back -->
+    <!-- Sub View Heading -->
-        <button
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
          @click="$router.go(-1)"
        >
          <font-awesome icon="chevron-left" class="fa-fw" />
        </button>
        {{ 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 -->
+    <!-- Sub View Heading -->
-    <div id="ViewBreadcrumb" class="mb-8">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      <h1 class="text-2xl text-center font-semibold relative px-7">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
        <!-- 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>
        {{ 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 -->
+    <!-- Sub View Heading -->
-    <div class="text-lg text-center font-light relative px-7">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      <h1
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
-        class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
+        Contact Import
        @click="$router.back()"
      >
        <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
      </h1>
    </div>
-    <!-- Heading -->
+      <!-- Back -->
-    <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
+      <a
-      Contact Import
+        class="order-first text-lg text-center leading-none p-1"
-    </h1>
+        @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">
+      <!-- Sub View Heading -->
-        <h1 class="text-xl text-center font-semibold relative">
+      <div id="SubViewHeading" class="flex gap-4 items-start mb-4">
-          <!-- Back -->
+        <h1 class="grow text-xl text-center font-semibold leading-tight">
          <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>
          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">
+    <!-- Sub View Heading -->
-      <h1 class="text-2xl text-center font-semibold relative px-7">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-        <!-- Back -->
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
        <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>
        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 -->
+    <TopMessage />
    <h1 id="ViewHeading" class="text-4xl text-center font-light">
      Your Contacts
    </h1>
-    <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 -->
+    <TopMessage />
-    <div id="ViewBreadcrumb" class="mb-8">
+
-      <h1 id="ViewHeading" class="text-lg text-center font-light relative px-7">
+    <!-- Sub View Heading -->
-        <!-- Go to 'contacts' instead of just 'back' because they could get here from an edit page 
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-             (and going back there is annoying). -->
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
        <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>
        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 -->
@@ -25,7 +34,7 @@
      class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4"
    >
      <div>
-        <h2 class="text-xl font-semibold">
+        <h2 class="text-xl font-semibold overflow-hidden text-ellipsis">
          {{ contactFromDid?.name || "(no name)" }}
          <router-link
            :to="{ name: 'contact-edit', params: { did: contactFromDid?.did } }"
--- 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">
+      <!-- Sub View Heading -->
-        Redirecting to Time Safari
+      <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      </h1>
+        <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 -->
+    <TopMessage />
-    <h1 id="ViewHeading" class="text-4xl text-center font-light">
+
-      Discover Projects & People
+    <!-- Main View Heading -->
-    </h1>
+    <div class="flex gap-4 items-center mb-4">
      <h1 id="ViewHeading" class="text-2xl font-bold leading-none">Discover</h1>
      <!-- Help button -->
      <router-link
        :to="{ name: 'help' }"
        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
      >
        <font-awesome icon="question" class="block text-center w-[1em]" />
      </router-link>
    </div>
    <OnboardingDialog ref="onboardingDialog" />
@@ -51,6 +60,33 @@
    <!-- Secondary Tabs -->
    <div class="text-center text-slate-500 border-b border-slate-300">
      <ul class="flex flex-wrap justify-center gap-4 -mb-px">
        <li v-if="isProjectsActive">
          <a
            href="#"
            :class="computedStarredTabStyleClassNames()"
            @click="
              projects = [];
              userProfiles = [];
              isStarredActive = true;
              isLocalActive = false;
              isMappedActive = false;
              isAnywhereActive = false;
              isSearchVisible = false;
              tempSearchBox = null;
              searchStarred();
            "
          >
            Starred
            <!-- restore when the links don't jump around for different numbers
            <span
              class="font-semibold text-sm bg-slate-200 px-1.5 py-0.5 rounded-md"
              v-if="isLocalActive"
            >
              {{ localCount > -1 ? localCount : "?" }}
            </span>
            -->
          </a>
        </li>
        <li>
          <a
            href="#"
@@ -58,9 +94,11 @@
            @click="
              projects = [];
              userProfiles = [];
              isStarredActive = false;
              isLocalActive = true;
              isMappedActive = false;
              isAnywhereActive = false;
              isStarredActive = false;
              isSearchVisible = true;
              tempSearchBox = null;
              searchLocal();
@@ -84,9 +122,11 @@
            @click="
              projects = [];
              userProfiles = [];
              isStarredActive = false;
              isLocalActive = false;
              isMappedActive = true;
              isAnywhereActive = false;
              isStarredActive = false;
              isSearchVisible = false;
              searchTerms = '';
              tempSearchBox = null;
@@ -103,9 +143,11 @@
            @click="
              projects = [];
              userProfiles = [];
              isStarredActive = false;
              isLocalActive = false;
              isMappedActive = false;
              isAnywhereActive = true;
              isStarredActive = false;
              isSearchVisible = true;
              tempSearchBox = null;
              searchAll();
@@ -201,6 +243,15 @@
          >No {{ isProjectsActive ? "projects" : "people" }} were found with
          that search.</span
        >
        <span v-else-if="isStarredActive">
          <p>
            You have no starred projects. Star some projects to see them here.
          </p>
          <p class="mt-4">
            When you star projects, you will get a notice on the front page when
            they change.
          </p>
        </span>
      </p>
    </div>
@@ -231,8 +282,8 @@
                />
              </div>
-              <div class="grow">
+              <div class="grow overflow-hidden">
-                <h2 class="text-base font-semibold">
+                <h2 class="text-base font-semibold truncate">
                  {{ project.name || unnamedProject }}
                </h2>
                <div class="text-sm">
@@ -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 -->
+    <TopMessage />
-    <div id="ViewBreadcrumb" class="mb-8">
+
-      <h1 class="text-2xl text-center font-semibold relative px-7 mb-2">
+    <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
+        <a
-          v-if="!hideBackButton"
+          class="order-first text-lg text-center leading-none p-1"
          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
          @click="cancelBack()"
        >
-          <font-awesome icon="chevron-left" class="fa-fw" />
+          <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
-        </div>
+        </a>
        What Was Given
      </h1>
-      <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 -->
+    <!-- Sub View Heading -->
-    <div class="mb-8">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      <!-- Back -->
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
      <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">
        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 -->
+    <!-- Sub View Heading -->
-    <div class="mb-8">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      <!-- Back -->
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
      <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">
        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 -->
@@ -394,7 +399,7 @@ export default class HelpNotificationsView extends Vue {
  notifyingReminderTime = "";
  // Notification helper system
-  notify = createNotifyHelpers(this.$notify);
+  notify!: ReturnType<typeof createNotifyHelpers>;
  /**
   * Computed property for consistent button styling
@@ -430,6 +435,9 @@ export default class HelpNotificationsView extends Vue {
   * Handles errors gracefully with proper logging without exposing sensitive data.
   */
  async mounted() {
    // Initialize notification helpers
    this.notify = createNotifyHelpers(this.$notify);
    try {
      const registration = await navigator.serviceWorker?.ready;
      const fullSub = await registration?.pushManager.getSubscription();
--- 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 -->
+    <!-- Sub View Heading -->
-    <div class="mb-8">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      <!-- Don't include 'back' button since this is shown in a different window. -->
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
      <!-- Heading -->
      <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
        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 -->
+    <!-- Sub View Heading -->
-    <div class="mb-8">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      <!-- Back -->
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
      <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">
        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">
+    <TopMessage />
-      {{ AppString.APP_NAME }}
+
-      <span class="text-xs text-gray-500">{{ package.version }}</span>
+    <!-- Main View Heading -->
-    </h1>
+    <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 -->
+    <!-- Sub View Heading -->
-    <div id="ViewBreadcrumb" class="mb-8">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      <h1 class="text-lg text-center font-light relative px-7">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
        <!-- 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>
        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 -->
+    <!-- Sub View Heading -->
-    <div id="ViewBreadcrumb" class="mb-8">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      <h1 class="text-lg text-center font-light relative px-7">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
        <!-- 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>
        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 -->
+    <!-- Sub View Heading -->
-    <div id="ViewBreadcrumb" class="mb-8">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      <h1 class="text-lg text-center font-light relative px-7">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
        <!-- 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>
        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" />
+  <QuickNav selected="Contacts" />
  <TopMessage />
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Back -->
+    <TopMessage />
    <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 -->
+    <!-- Sub View Heading -->
-    <h1 class="text-4xl text-center font-light">Invitations</h1>
+    <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 -->
+    <TopMessage />
    <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>
-    <!-- Heading -->
+    <!-- Sub View Heading -->
-    <h1 id="ViewHeading" class="text-4xl text-center font-light mb-6">Logs</h1>
+    <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 -->
+    <!-- Sub View Heading -->
-    <div id="ViewBreadcrumb" class="mb-8">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      <h1 class="text-lg text-center font-light relative px-7">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
        <!-- 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()"
        />
        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,12 +39,12 @@
          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>
-      <router-link to="/recent-offers-to-user" class="text-blue-500">
+      <a class="text-blue-500 cursor-pointer" @click="handleSeeAllOffersToUser">
        See&nbsp;all
-      </router-link>
+      </a>
    </div>
    <div v-if="showOffersDetails" class="ml-4 mt-4">
@@ -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,12 +106,15 @@
            showOffersToUserProjectsDetails ? 'chevron-down' : 'chevron-right'
          "
          class="cursor-pointer ml-4 mr-4 text-lg"
-          @click="expandOffersToUserProjectsAndMarkRead()"
+          @click.prevent="expandOffersToUserProjectsAndMarkRead()"
        />
      </div>
-      <router-link to="/recent-offers-to-user-projects" class="text-blue-500">
+      <a
        class="text-blue-500 cursor-pointer"
        @click="handleSeeAllOffersToUserProjects"
      >
        See&nbsp;all
-      </router-link>
+      </a>
    </div>
    <div v-if="showOffersToUserProjectsDetails" class="ml-4 mt-4">
@@ -115,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 " : "" }}
@@ -136,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>
@@ -149,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";
@@ -159,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 {
@@ -186,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;
@@ -211,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();
@@ -234,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);
@@ -246,14 +449,14 @@ export default class NewActivityView extends Vue {
  async expandOffersToUserAndMarkRead() {
    this.showOffersDetails = !this.showOffersDetails;
-    if (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,
      );
    }
@@ -265,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,
      });
    }
@@ -283,15 +486,18 @@ export default class NewActivityView extends Vue {
  async expandOffersToUserProjectsAndMarkRead() {
    this.showOffersToUserProjectsDetails =
      !this.showOffersToUserProjectsDetails;
-    if (this.showOffersToUserProjectsDetails) {
+    if (
-      await this.$updateSettings({
+      this.showOffersToUserProjectsDetails &&
      this.newOffersToUserProjects.length > 0
    ) {
      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 now 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,
      );
    }
@@ -303,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,
      });
@@ -319,5 +525,390 @@ export default class NewActivityView extends Vue {
      TIMEOUTS.STANDARD,
    );
  }
  async handleSeeAllOffersToUser() {
    this.$router.push("/recent-offers-to-user");
  }
  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 -->
+    <!-- Sub View Heading -->
-    <div id="ViewBreadcrumb" class="mb-8">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      <h1 class="text-lg text-center font-light relative px-7">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
        <!-- 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>
        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 -->
+    <!-- Sub View Heading -->
-    <div id="ViewBreadcrumb" class="mb-8">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      <h1 class="text-lg text-center font-light relative px-7">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
        <!-- 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>
        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 -->
+    <!-- Sub View Heading -->
-    <div class="mb-8">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      <!-- Back -->
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
      <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">
        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,88 @@
 <template>
  <div
    class="min-h-screen bg-gray-50 flex flex-col justify-start pt-2 sm:px-6 lg:px-8"
  >
    <div class="sm:mx-auto sm:w-full sm:max-w-md">
      <div class="text-center">
        <div class="mx-auto h-24 w-24 text-gray-400">
          <svg
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <circle cx="12" cy="12" r="10" stroke-width="1.5" />
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M12 8v4m0 4h.01"
            />
          </svg>
        </div>
        <h1 class="mt-4 text-3xl font-extrabold text-gray-900">Not Found</h1>
        <p class="text-sm text-gray-600">
          The page you're looking for doesn't exist.
        </p>
        <div class="mt-1">
          <button
            class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
            @click="goBack"
          >
            <svg
              class="-ml-1 mr-2 h-5 w-5"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M10 19l-7-7m0 0l7-7m-7 7h18"
              />
            </svg>
            Go Back
          </button>
        </div>
        <div class="mt-16">
          <button
            class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
            @click="goHome"
          >
            <svg
              class="-ml-1 mr-2 h-5 w-5"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2
                2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1
                1 0 011 1v4a1 1 0 001 1m-6 0h6"
              ></path>
            </svg>
            Go Home
          </button>
        </div>
      </div>
    </div>
  </div>
 </template>
 <script setup lang="ts">
 import { useRouter } from "vue-router";
 const router = useRouter();
 const goHome = () => {
  router.push("/");
 };
 const goBack = () => {
  router.go(-1);
 };
 </script>
--- 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 -->
+    <TopMessage />
-    <div
+
-      v-if="!hideBackButton"
+    <!-- Sub View Heading -->
-      class="text-lg text-center font-light relative px-7"
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-    >
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
-      <h1
+        What Is Offered
-        class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
+      </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>
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
-      </h1>
+      </a>
    </div>
-    <!-- Heading -->
+      <!-- Help button -->
-    <h1 class="text-4xl text-center font-light px-4 mb-4">What Is Offered</h1>
+      <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 -->
+    <TopMessage />
-    <h1 id="ViewHeading" class="text-4xl text-center font-light mb-8">
+
-      Onboarding Meetings
+    <!-- Sub View Heading -->
-    </h1>
+    <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 -->
+    <TopMessage />
-    <h1 id="ViewHeading" class="text-4xl text-center font-light mb-8">
+
-      Meeting Members
+    <!-- Sub View Heading -->
-    </h1>
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
      <h1 class="grow text-xl text-center font-semibold leading-tight">
        Meeting Members
      </h1>
      <!-- Spacer (no Back button) -->
      <div class="order-first p-3 pe-3.5 pb-3.5"></div>
      <!-- Help button -->
      <router-link
        :to="{ name: 'help' }"
        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
      >
        <font-awesome icon="question" class="block text-center w-[1em]" />
      </router-link>
    </div>
    <!-- Loading Animation -->
    <div
@@ -63,6 +77,7 @@ import {
 } from "../libs/endorserServer";
 import { generateSaveAndActivateIdentity } from "../libs/util";
 import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
 import { NotificationIface } from "../constants/app";
@Component({
  components: {
@@ -83,6 +98,7 @@ export default class OnboardMeetingMembersView extends Vue {
  projectLink = "";
  $route!: RouteLocationNormalizedLoaded;
  $router!: Router;
  $notify!: (notification: NotificationIface, timeout?: number) => void;
  userNameDialog!: InstanceType<typeof UserNameDialog>;
--- 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 -->
+    <TopMessage />
-    <h1 id="ViewHeading" class="text-4xl text-center font-light">
+
-      Onboarding Meeting
+    <!-- Sub View Heading -->
-    </h1>
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
      <h1 class="grow text-xl text-center font-semibold leading-tight">
        Onboarding Meeting
      </h1>
      <!-- Spacer (no Back button) -->
      <div class="order-first p-3 pe-3.5 pb-3.5"></div>
      <!-- Help button -->
      <router-link
        :to="{ name: 'help' }"
        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
      >
        <font-awesome icon="question" class="block text-center w-[1em]" />
      </router-link>
    </div>
    <!-- Existing Meeting Section -->
    <div
@@ -216,26 +230,28 @@
      class="mt-8 p-4 border rounded-lg bg-white shadow"
    >
      <div class="flex items-center justify-between">
-        <h2 class="text-2xl">Meeting Members</h2>
+        <h2 class="font-bold">Meeting Members</h2>
      </div>
      <div class="mt-4">
        &bull; Page for Members
        <span
          class="ml-4 cursor-pointer text-blue-600"
          title="Click to copy link for members"
          @click="copyMembersLinkToClipboard"
        >
          <font-awesome icon="link" />
        </span>
        <a
          v-if="!!currentMeeting.password"
          :href="onboardMeetingMembersLink()"
          class="ml-4 text-blue-600"
          target="_blank"
        >
          <font-awesome icon="external-link" />
        </a>
      </div>
      <ul class="list-disc text-sm mt-4 mb-2 ps-4 space-y-2">
        <li>
          Page for Members:
          <span
            class="ml-4 cursor-pointer text-blue-600"
            title="Click to copy link for members"
            @click="copyMembersLinkToClipboard"
          >
            <font-awesome icon="link" />
          </span>
          <a
            v-if="!!currentMeeting.password"
            :href="onboardMeetingMembersLink()"
            class="ml-4 text-blue-600"
            target="_blank"
          >
            <font-awesome icon="external-link" />
          </a>
        </li>
      </ul>
      <MembersList
        :password="currentMeeting.password || ''"
--- 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 -->
+    <TopMessage />
-    <div id="ViewBreadcrumb">
+
-      <div>
+    <div class="mb-4">
-        <h1 class="text-center text-lg font-light relative px-7">
+      <!-- Sub View Heading -->
-          <!-- Back -->
+      <div id="SubViewHeading" class="flex gap-4 items-start mb-4">
-          <button
+        <h1 class="grow text-xl text-center font-semibold leading-tight">
            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>
          Project Idea
        </h1>
-        <h2 class="text-center text-xl font-semibold">
+
-          {{ name }}
+        <!-- Back -->
-          <button
+        <a
-            v-if="activeDid === issuer || activeDid === agentDid"
+          class="order-first text-lg text-center leading-none p-1"
-            title="Edit"
+          @click="$router.go(-1)"
-            data-testId="editClaimButton"
+        >
-            @click="onEditClick()"
+          <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
-          >
+        </a>
-            <font-awesome icon="pen" class="text-sm text-blue-500 ml-2 mb-1" />
+
-          </button>
+        <!-- Help button -->
-          <button title="Copy Link to Project" @click="onCopyLinkClick()">
+        <router-link
-            <font-awesome
+          :to="{ name: 'help' }"
-              icon="link"
+          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"
-              class="text-sm text-slate-500 ml-2 mb-1"
+        >
-            />
+          <font-awesome icon="question" class="block text-center w-[1em]" />
-          </button>
+        </router-link>
        </h2>
      </div>
      <h2 class="text-center text-lg font-normal overflow-hidden text-ellipsis">
        {{ name }}
        <button
          v-if="activeDid === issuer || activeDid === agentDid"
          title="Edit"
          data-testId="editClaimButton"
          @click="onEditClick()"
        >
          <font-awesome icon="pen" class="text-sm text-blue-500 ml-2" />
        </button>
        <button
          :title="
            isStarred
              ? 'Remove from starred projects'
              : 'Add to starred projects'
          "
          @click="toggleStar()"
        >
          <font-awesome
            :icon="isStarred ? 'star' : ['far', 'star']"
            :class="isStarred ? 'text-yellow-500' : 'text-slate-500'"
            class="text-sm ml-2"
          />
        </button>
      </h2>
    </div>
    <!-- Project Details -->
@@ -58,13 +76,13 @@
                  icon="user"
                  class="fa-fw text-slate-400"
                ></font-awesome>
-                <span class="truncate inline-block max-w-[calc(100%-2rem)]">
+                <span class="truncate max-w-[calc(100%-2rem)] ml-1">
                  {{ issuerInfoObject?.displayName }}
                </span>
                <span
                  v-if="!serverUtil.isHiddenDid(issuer)"
-                  class="inline-flex items-center"
+                  class="inline-flex items-center ml-1"
                >
                  <router-link
                    :to="{
@@ -139,26 +157,30 @@
        </div>
        <div class="text-sm text-slate-500">
-          <div v-if="!expanded">
+          <div v-if="!expanded" class="overflow-hidden text-ellipsis">
-            {{ 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>
+          <div v-else class="overflow-hidden text-ellipsis">
-            {{ 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>
@@ -286,15 +308,15 @@
                />{{ offer.amount }}
              </span>
            </div>
-            <div v-if="offer.objectDescription" class="text-slate-500">
+            <div
              v-if="offer.objectDescription"
              class="text-slate-500 overflow-hidden text-ellipsis"
            >
              <font-awesome icon="comment" class="fa-fw text-slate-400" />
              {{ offer.objectDescription }}
            </div>
            <div class="flex justify-between">
-              <a
+              <a class="cursor-pointer" @click="onClickLoadClaim(offer.jwtId)">
                class="cursor-pointer"
                @click="onClickLoadClaim(offer.jwtId as string)"
              >
                <font-awesome
                  icon="file-lines"
                  class="pl-2 pt-1 text-blue-500"
@@ -431,7 +453,10 @@
                <font-awesome icon="calendar" class="fa-fw text-slate-400" />
                {{ give.issuedAt?.substring(0, 10) }}
              </div>
-              <div v-if="give.description" class="text-slate-500">
+              <div
                v-if="give.description"
                class="text-slate-500 overflow-hidden text-ellipsis"
              >
                <font-awesome icon="comment" class="fa-fw text-slate-400" />
                {{ give.description }}
              </div>
@@ -538,7 +563,10 @@
              <font-awesome icon="calendar" class="fa-fw text-slate-400" />
              {{ give.issuedAt?.substring(0, 10) }}
            </div>
-            <div v-if="give.description" class="text-slate-500">
+            <div
              v-if="give.description"
              class="text-slate-500 overflow-hidden text-ellipsis"
            >
              <font-awesome icon="comment" class="fa-fw text-slate-400" />
              {{ give.description }}
            </div>
@@ -592,7 +620,9 @@
 <script lang="ts">
 import { AxiosError } from "axios";
 import { Component, Vue } from "vue-facing-decorator";
 import VueMarkdown from "vue-markdown-render";
 import { Router } from "vue-router";
 import {
  GenericVerifiableCredential,
  GenericCredWrapper,
@@ -603,25 +633,25 @@ import {
  PlanSummaryRecord,
 } from "../interfaces";
 import GiftedDialog from "../components/GiftedDialog.vue";
 import HiddenDidDialog from "../components/HiddenDidDialog.vue";
 import OfferDialog from "../components/OfferDialog.vue";
 import TopMessage from "../components/TopMessage.vue";
 import QuickNav from "../components/QuickNav.vue";
 import EntityIcon from "../components/EntityIcon.vue";
 import ProjectIcon from "../components/ProjectIcon.vue";
-import { NotificationIface } from "../constants/app";
+import { APP_SERVER, NotificationIface } from "../constants/app";
-// Removed legacy logging import - migrated to PlatformServiceMixin
+import { UNNAMED_PROJECT } from "../constants/entities";
 import { NOTIFY_CONFIRM_CLAIM } from "../constants/notifications";
 import * as databaseUtil from "../db/databaseUtil";
 import { Contact } from "../db/tables/contacts";
 import * as libsUtil from "../libs/util";
 import * as serverUtil from "../libs/endorserServer";
 import { retrieveAccountDids } from "../libs/util";
 import HiddenDidDialog from "../components/HiddenDidDialog.vue";
 import { logger } from "../utils/logger";
 import { copyToClipboard } from "../services/ClipboardService";
 import { logger } from "../utils/logger";
 import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
 import { createNotifyHelpers, TIMEOUTS } from "@/utils/notify";
-import { NOTIFY_CONFIRM_CLAIM } from "@/constants/notifications";
+
 import { APP_SERVER } from "@/constants/app";
 import { UNNAMED_PROJECT } from "@/constants/entities";
 /**
 * Project View Component
 * @author Matthew Raymer
@@ -663,6 +693,7 @@ import { UNNAMED_PROJECT } from "@/constants/entities";
    ProjectIcon,
    QuickNav,
    TopMessage,
    VueMarkdown,
  },
  mixins: [PlatformServiceMixin],
 })
@@ -718,6 +749,8 @@ export default class ProjectViewView extends Vue {
  givesProvidedByHitLimit = false;
  givesTotalsByUnit: Array<{ unit: string; amount: number }> = [];
  imageUrl = "";
  /** Whether this project is starred by the user */
  isStarred = false;
  /** Project issuer DID */
  issuer = "";
  /** Cached issuer information */
@@ -728,6 +761,8 @@ export default class ProjectViewView extends Vue {
  } | null = null;
  /** DIDs that can see issuer information */
  issuerVisibleToDids: Array<string> = [];
  /** Project JWT ID */
  jwtId = "";
  /** Project location data */
  latitude = 0;
  loadingTotals = false;
@@ -756,7 +791,7 @@ export default class ProjectViewView extends Vue {
  totalsExpanded = false;
  truncatedDesc = "";
  /** Truncation length */
-  truncateLength = 40;
+  truncateLength = 200;
  // Utility References
  libsUtil = libsUtil;
@@ -810,6 +845,12 @@ export default class ProjectViewView extends Vue {
    }
    this.loadProject(this.projectId, this.activeDid);
    this.loadTotals();
    // Check if this project is starred when settings are loaded
    if (this.projectId && settings.starredPlanHandleIds) {
      const starredIds = settings.starredPlanHandleIds || [];
      this.isStarred = starredIds.includes(this.projectId);
    }
  }
  /**
@@ -886,8 +927,9 @@ export default class ProjectViewView extends Vue {
          this.allContacts,
        );
        this.issuerVisibleToDids = resp.data.issuerVisibleToDids || [];
        this.jwtId = resp.data.id;
        this.name = resp.data.claim?.name || "(no name)";
-        this.description = resp.data.claim?.description || "(no description)";
+        this.description = resp.data.claim?.description || "";
        this.truncatedDesc = this.description.slice(0, this.truncateLength);
        this.latitude = resp.data.claim?.location?.geo?.latitude || 0;
        this.longitude = resp.data.claim?.location?.geo?.longitude || 0;
@@ -1477,5 +1519,67 @@ export default class ProjectViewView extends Vue {
      this.givesTotalsByUnit.find((total) => total.unit === "HUR")?.amount || 0
    );
  }
  /**
   * Toggle the starred status of the current project
   */
  async toggleStar() {
    if (!this.projectId) return;
    try {
      const settings = await this.$accountSettings();
      const starredIds = settings.starredPlanHandleIds || [];
      if (!this.isStarred) {
        // Add to starred projects
        if (!starredIds.includes(this.projectId)) {
          const newStarredIds = [...starredIds, this.projectId];
          const newIdsParam = JSON.stringify(newStarredIds);
          const result = await databaseUtil.updateDidSpecificSettings(
            this.activeDid,
            // @ts-expect-error until we use SettingsWithJsonString properly
            { starredPlanHandleIds: newIdsParam },
          );
          if (result) {
            this.isStarred = true;
          } else {
            // eslint-disable-next-line no-console
            logger.error("Got a bad result from SQL update to star a project.");
          }
        }
        if (!settings.lastAckedStarredPlanChangesJwtId) {
          await databaseUtil.updateDidSpecificSettings(this.activeDid, {
            lastAckedStarredPlanChangesJwtId: this.jwtId,
          });
        }
      } else {
        // Remove from starred projects
        const updatedIds = starredIds.filter((id) => id !== this.projectId);
        const newIdsParam = JSON.stringify(updatedIds);
        const result = await databaseUtil.updateDidSpecificSettings(
          this.activeDid,
          // @ts-expect-error until we use SettingsWithJsonString properly
          { starredPlanHandleIds: newIdsParam },
        );
        if (result) {
          this.isStarred = false;
        } else {
          // eslint-disable-next-line no-console
          logger.error("Got a bad result from SQL update to unstar a project.");
        }
      }
    } catch (error) {
      logger.error("Error toggling star status:", error);
      this.$notify(
        {
          group: "alert",
          type: "danger",
          title: "Error",
          text: "Failed to update starred status. Please try again.",
        },
        3000,
      );
    }
  }
 }
 </script>
--- 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 -->
+    <TopMessage />
-    <h1 id="ViewHeading" class="text-4xl text-center font-light">
+
-      Your Project Ideas
+    <!-- Main View Heading -->
-    </h1>
+    <div class="flex gap-4 items-center mb-4">
      <h1 id="ViewHeading" class="text-2xl font-bold leading-none">
        Your Ideas
      </h1>
      <!-- Help button -->
      <router-link
        :to="{ name: 'help' }"
        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
      >
        <font-awesome icon="question" class="block text-center w-[1em]" />
      </router-link>
    </div>
    <OnboardingDialog ref="onboardingDialog" />
    <!-- Result Tabs -->
-    <div class="text-center text-slate-500 border-b border-slate-300 mt-8">
+    <div class="text-center text-slate-500 border-b border-slate-300 mt-4">
      <ul class="flex flex-wrap justify-center gap-4 -mb-px">
        <li>
          <a
@@ -107,8 +118,8 @@
              />
            </div>
-            <div>
+            <div class="overflow-hidden">
-              <div>
+              <div class="text-sm truncate">
                To
                {{
                  offer.fulfillsPlanHandleId
@@ -121,7 +132,7 @@
                      )
                }}
              </div>
-              <div>
+              <div class="truncate">
                {{ offer.objectDescription }}
              </div>
@@ -243,7 +254,7 @@
            </div>
            <div class="grow overflow-hidden">
-              <h2 class="text-base font-semibold">
+              <h2 class="text-base font-semibold truncate">
                {{ project.name || unnamedProject }}
              </h2>
              <div class="text-sm truncate">
@@ -646,7 +657,7 @@ export default class ProjectsView extends Vue {
  get offerTabClasses() {
    return {
      "inline-block": true,
-      "py-3": true,
+      "py-2": true,
      "rounded-t-lg": true,
      "border-b-2": true,
      active: this.showOffers,
@@ -664,7 +675,7 @@ export default class ProjectsView extends Vue {
   * @returns String with CSS classes for the floating new project button
   */
  get newProjectButtonClasses() {
-    return "fixed right-6 top-24 text-center text-4xl leading-none bg-green-600 text-white w-14 py-2.5 rounded-full";
+    return "fixed right-6 top-14 text-center text-4xl leading-none bg-green-600 text-white w-14 py-2.5 rounded-full";
  }
  /**
@@ -706,7 +717,7 @@ export default class ProjectsView extends Vue {
  get projectTabClasses() {
    return {
      "inline-block": true,
-      "py-3": true,
+      "py-2": true,
      "rounded-t-lg": true,
      "border-b-2": true,
      active: this.showProjects,
--- 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 -->
+    <TopMessage />
-    <div class="text-lg text-center font-light relative px-7">
+
-      <h1
+    <!-- Sub View Heading -->
-        class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
+    <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>
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
-      </h1>
+      </a>
    </div>
-    <!-- Heading -->
+      <!-- Help button -->
-    <h1 id="ViewHeading" class="text-4xl text-center font-light px-4 mb-4">
+      <router-link
-      Beginning of BVC Saturday Meeting
+        :to="{ name: 'help' }"
-    </h1>
+        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>
@@ -99,7 +108,7 @@ export default class QuickActionBvcBeginView extends Vue {
  $router!: Router;
  // Notification helper system
-  private notify = createNotifyHelpers(this.$notify);
+  private notify!: ReturnType<typeof createNotifyHelpers>;
  attended = true;
  gaveTime = true;
@@ -111,6 +120,9 @@ export default class QuickActionBvcBeginView extends Vue {
   * Uses America/Denver timezone for Bountiful location
   */
  async mounted() {
    // Initialize notification helpers
    this.notify = createNotifyHelpers(this.$notify);
    logger.debug(
      "[QuickActionBvcBeginView] Mounted - calculating meeting date",
    );
--- 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 -->
+    <TopMessage />
    <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>
-    <!-- Heading -->
+    <!-- Sub View Heading -->
-    <h1 id="ViewHeading" class="text-4xl text-center font-light px-4 mb-4">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      End of BVC Saturday Meeting
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
-    </h1>
+        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 -->
+    <TopMessage />
    <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 -->
+    <!-- Sub View Heading -->
-    <h1 id="ViewHeading" class="text-4xl text-center font-light px-4 mb-4">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      Bountiful Voluntaryist Community Actions
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
-    </h1>
+        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 -->
+    <!-- Sub View Heading -->
-    <div id="ViewBreadcrumb" class="mb-8">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      <h1 class="text-lg text-center font-light relative px-7">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
        <!-- 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()"
        />
        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">
@@ -32,20 +42,20 @@
    </div>
    <InfiniteScroll @reached-bottom="loadMoreOffersToUserProjects">
-      <ul
+      <ul data-testId="listRecentOffersToUserProjects">
        data-testId="listRecentOffersToUserProjects"
        class="border-t border-slate-300"
      >
        <li
          v-for="offer in newOffersToUserProjects"
          :key="offer.jwtId"
          class="mt-4 relative group"
        >
          <!-- Last viewed separator -->
          <div
            v-if="offer.jwtId == lastAckedOfferToUserProjectsJwtId"
-            class="border-b border-slate-300 text-orange-400 pb-2 mb-2 font-bold text-sm"
+            class="border-b border-dashed border-slate-300 text-orange-400 mt-4 mb-6 font-bold text-sm"
          >
-            You've already seen all the following
+            <span class="block w-fit mx-auto -mb-2.5 bg-white px-2">
              You've already seen all the following
            </span>
          </div>
          <span>{{
@@ -147,6 +157,14 @@ export default class RecentOffersToUserView extends Vue {
      this.newOffersToUserProjects = offersToUserProjectsData.data;
      this.newOffersToUserProjectsAtEnd = !offersToUserProjectsData.hitLimit;
      // Mark offers as read after data is loaded
      if (this.newOffersToUserProjects.length > 0) {
        await this.$updateSettings({
          lastAckedOfferToUserProjectsJwtId:
            this.newOffersToUserProjects[0].jwtId,
        });
      }
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
    } catch (err: any) {
      logger.error("Error retrieving settings & contacts:", err);
--- 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 -->
+    <!-- Sub View Heading -->
-    <div id="ViewBreadcrumb" class="mb-8">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      <h1 class="text-lg text-center font-light relative px-7">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
        <!-- 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()"
        />
        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">
@@ -27,20 +37,20 @@
      </p>
    </div>
    <InfiniteScroll @reached-bottom="loadMoreOffersToUser">
-      <ul
+      <ul data-testId="listRecentOffersToUser">
        data-testId="listRecentOffersToUser"
        class="border-t border-slate-300"
      >
        <li
          v-for="offer in newOffersToUser"
          :key="offer.jwtId"
          class="mt-4 relative group"
        >
          <!-- Last viewed separator -->
          <div
            v-if="offer.jwtId == lastAckedOfferToUserJwtId"
-            class="border-b border-slate-300 text-orange-400 pb-2 mb-2 font-bold text-sm"
+            class="border-b border-dashed border-slate-300 text-orange-400 mt-4 mb-6 font-bold text-sm"
          >
-            You've already seen all the following
+            <span class="block w-fit mx-auto -mb-2.5 bg-white px-2">
              You've already seen all the following
            </span>
          </div>
          <span>{{
@@ -138,6 +148,13 @@ export default class RecentOffersToUserView extends Vue {
      this.newOffersToUser = offersToUserData.data;
      this.newOffersToUserAtEnd = !offersToUserData.hitLimit;
      // Mark offers as read after data is loaded
      if (this.newOffersToUser.length > 0) {
        await this.$updateSettings({
          lastAckedOfferToUserJwtId: this.newOffersToUser[0].jwtId,
        });
      }
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
    } catch (err: any) {
      logger.error("Error retrieving settings & contacts:", err);
--- 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 -->
+    <!-- Sub View Heading -->
-    <div class="mb-8">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      <!-- Back -->
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
      <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">
        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 -->
+    <!-- Sub View Heading -->
-    <div class="text-lg text-center font-light relative px-7">
+    <div class="flex gap-4 items-start mb-8">
-      <h1
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
-        class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
+        Seed Backup
        @click="goBack"
      >
        <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
      </h1>
    </div>
-    <!-- Heading -->
+      <!-- Back -->
-    <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
+      <a
-      Seed Backup
+        class="order-first text-lg text-center leading-none p-1"
-    </h1>
+        @click="goBack()"
      >
        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
      </a>
-    <div class="flex justify-between py-2">
+      <!-- Help button -->
-      <span />
+      <router-link
-      <span>
+        :to="{ name: 'help' }"
-        <router-link :to="{ name: 'help' }" :class="helpButtonClass">
+        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"
-          Help
+      >
-        </router-link>
+        <font-awesome icon="question" class="block text-center w-[1em]" />
-      </span>
+      </router-link>
    </div>
    <div v-if="activeAccount">
@@ -162,7 +160,7 @@ export default class SeedBackupView extends Vue {
  showSeed = false;
  // Notification helper system
-  notify = createNotifyHelpers(this.$notify);
+  notify!: ReturnType<typeof createNotifyHelpers>;
  /**
   * Computed property for consistent copy feedback styling
@@ -204,6 +202,9 @@ export default class SeedBackupView extends Vue {
   * Handles errors gracefully with user notifications.
   */
  async created() {
    // Initialize notification helpers
    this.notify = createNotifyHelpers(this.$notify);
    try {
      let activeDid = "";
--- 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 -->
+    <TopMessage />
    <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>
-      <!-- Heading -->
+    <!-- Sub View Heading -->
-      <h1 id="ViewHeading" class="text-4xl text-center font-light">
+    <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 -->
+    <!-- Sub View Heading -->
-    <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      Image
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
-    </h1>
+        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 -->
+    <!-- Sub View Heading -->
-    <div>
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      <!-- Back -->
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
      <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">
        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 -->
+    <!-- Sub View Heading -->
-    <div class="mb-8">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      <!-- Back -->
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
      <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">
        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 -->
+    <!-- Sub View Heading -->
-    <div class="mb-8">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      <!-- Back -->
+      <h1 class="grow text-xl text-center font-semibold leading-tight">Test</h1>
      <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 -->
+      <!-- Back -->
-      <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
+      <a
-        Test
+        class="order-first text-lg text-center leading-none p-1"
-      </h1>
+        @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 -->
+    <TopMessage />
-    <div id="ViewBreadcrumb" class="mb-8">
+
-      <h1 id="ViewHeading" class="text-lg text-center font-light relative px-7">
+    <!-- Sub View Heading -->
-        <!-- Back -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-        <button
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
          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>
        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	4f3a1b390d	feat: auto-show visibility dialog for meeting members - Show dialog on initial load if members need visibility settings - Show dialog during auto-refresh only when new members are added (not removed) - Show dialog on manual refresh if any members need visibility settings - Remove manual "Set Visibility" buttons from UI as dialog now appears automatically - Add logic to track previous visibility members and detect changes - Improve UX by proactively prompting users to set visibility for new meeting members The dialog now appears automatically in these scenarios: - Component initialization with members needing visibility - Auto-refresh when new members join the meeting - Manual refresh when members need visibility settings	2025-10-17 19:17:47 +08:00
Jose Olarte III	4de4fbecaf	refactor: rename SetVisibilityDialog to SetBulkVisibilityDialog and remove unused code - Rename SetVisibilityDialog.vue to SetBulkVisibilityDialog.vue for better clarity - Update all component references in MembersList.vue (import, registration, template usage) - Update component class name from SetVisibilityDialog to SetBulkVisibilityDialog - Rename calling function name to showSetBulkVisibilityDialog to match class name change - Remove unused properties and created() method from App.vue This cleanup removes dead code and improves component naming consistency.	2025-10-17 17:59:41 +08:00
Jose Olarte III	e3598992e7	feat: pause auto-refresh when SetVisibilityDialog is open - Pause auto-refresh when SetVisibilityDialog becomes visible - Resume auto-refresh when dialog is closed - Prevents background refresh interference during visibility settings - Fix type compatibility for visibilityDialogMembers data structure This ensures users can interact with the visibility dialog without the members list refreshing in the background, providing a better user experience for setting member visibility preferences.	2025-10-16 17:49:59 +08:00
Jose Olarte III	ea19195850	refactor: extract SetVisibilityDialog into standalone component - Extract "Set Visibility to Meeting Members" dialog from App.vue into dedicated SetVisibilityDialog.vue component - Move dialog logic directly to MembersList.vue for better component coupling - Remove unnecessary intermediate state management from App.vue - Clean up redundant style definitions (rely on existing Tailwind CSS classes) - Remove unused logger imports and debug functions - Add explanatory comment for Vue template constant pattern This improves maintainability by isolating dialog functionality and follows established component patterns in the codebase.	2025-10-16 17:18:56 +08:00
Jose Olarte III	ca545fd4b8	feat: add auto-refresh with countdown to MembersList - Auto-refresh members list every 10 seconds - Display countdown timer in refresh buttons - Manual refresh resets countdown to 10 seconds	2025-10-15 20:25:01 +08:00
Jose Olarte III	07b538cadc	feat: implement member visibility dialog with checkbox selection and refresh - Add "Set Visibility" dialog for meeting members who need visibility settings - Filter members to show only those not in contacts or without seesMe set - Implement checkbox selection with "Select All" functionality - Add reactive checkbox behavior with proper state management - Default all checkboxes to checked when dialog opens - Implement "Set Visibility" action to add contacts and set seesMe property - Add success notifications with count of affected members - Disable "Set Visibility" button when no members are selected - Use notification callbacks for data refresh - Hide "Set Visibility" buttons when no members need visibility settings - Add proper dialog state management and cleanup - Ensure dialog closes before triggering data refresh to prevent stale states The implementation provides a smooth user experience for managing member visibility settings with proper state synchronization between components.	2025-10-14 21:21:35 +08:00
Jose Olarte III	b84546686a	WIP: button and icon additions - Mirrored "Refresh" and "Visibility" buttons on top and bottom of member list - Added back info icons for list actions - When clicked, Person icon shows informative notification	2025-10-13 21:38:12 +08:00
Jose Olarte III	461ee84d2a	WIP: meeting members adjustments	2025-10-12 23:30:03 +08:00
Jose Olarte III	acf7d611e8	WIP: mockup for set visibility dialog	2025-10-09 21:56:50 +08:00
Jose Olarte 3	b0d13b3cd4	Merge pull request 'feat: disable zoom and fix iOS viewport issues' (#206 ) from ios-disable-zoom into master Reviewed-on: #206	2025-10-08 06:04:32 -04:00
Jose Olarte III	5256681089	Merge branch 'master' into ios-disable-zoom	2025-10-08 18:03:27 +08:00
Jose Olarte III	225b34d480	feat: improve text overflow handling across UI components - Add overflow-hidden, text-ellipsis and truncate classes to long text elements in list items and views to prevent text overflow - Ensure proper text wrapping and ellipsis display for long content	2025-10-07 19:00:12 +08:00
Jose Olarte 3	d9f9460be7	Merge pull request 'refactor: standardize view headings across all components' (#207 ) from view-headings-refresh into master Reviewed-on: #207	2025-10-07 05:17:05 -04:00
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	f4144c7469	feat: disable zoom and fix iOS viewport issues - Add user-scalable=no and interactive-widget=overlays-content to viewport meta tag - Implement iOS viewport height fixes to prevent keyboard-related layout shifts - Use dynamic viewport height (100dvh) for better mobile support - Add fixed positioning and overflow controls to prevent viewport changes - Enable scrolling only within #app container for better UX	2025-09-30 21:06:13 +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
Jose Olarte 3	f4569d8b98	Merge branch 'master' into load-build-mode-env-file	2025-09-19 04:35:05 -04:00
Jose Olarte 3	7575895f75	Merge pull request 'fix: initialize notification helpers in lifecycle methods' (#200 ) from notify-initialization-fix into master Reviewed-on: #200	2025-09-19 03:56:49 -04:00
Jose Olarte 3	67a9ecf6c6	Merge branch 'master' into notify-initialization-fix	2025-09-19 03:56:24 -04:00
Jose Olarte 3	823fa51275	Merge pull request 'feat(NewActivityView): enhance "See all" links to mark offers as read before navigation' (#198 ) from new-activity-mark-read into master Reviewed-on: #198	2025-09-19 03:14:23 -04:00
Jose Olarte III	e2c2d54c20	Merge branch 'master' into new-activity-mark-read	2025-09-19 15:14:42 +08:00
Jose Olarte III	6fd53b020e	refactor: simplify notification messages for offer viewing - Remove conditional notification logic in NewActivityView - Remove redundant notification in RecentOffersToUserView and RecentOffersToUserProjectsView - Standardize to single notification message format	2025-09-19 15:00:17 +08:00
Jose Olarte III	a3d6b458b1	fix: load environment-specific .env files in iOS/Android/Electron build scripts - iOS, Android, and Electron build scripts now load .env.development, .env.test, .env.production files - Previously only loaded generic .env file which doesn't exist - Ensures consistent image server URL across all build targets - Fixes issue where build:ios:dev used production image URL instead of test URL - Aligns with web build script behavior for environment variable precedence Resolves inconsistent VITE_DEFAULT_IMAGE_API_SERVER values between build targets.	2025-09-18 22:38:53 +08:00
Jose Olarte III	b1fcb49e7c	fix: initialize notification helpers in lifecycle methods - Fix 't is not a function' error during image upload by properly initializing notification helpers - Move notification helper initialization from class-level to lifecycle methods (created/mounted) - Affected components: ImageMethodDialog, SeedBackupView, QuickActionBvcBeginView, HelpNotificationsView - Ensures $notify is available when createNotifyHelpers() is called - Resolves notification errors in image upload functionality	2025-09-18 21:42:15 +08:00
Jose Olarte III	5d9f455fc8	feat: move mark-as-read logic from navigation to view loading - Remove mark-as-read logic from NewActivityView navigation handlers - Add mark-as-read logic to RecentOffersToUserView and RecentOffersToUserProjectsView after data loading - Improve "You've already seen all the following" marker positioning - Update marker styling with dashed border and centered text This ensures the marker appears at the correct position in the list instead of always at the top, providing better UX when viewing offers.	2025-09-16 18:10:17 +08:00
Jose Olarte 3	c3ff471ea1	Merge branch 'master' into new-activity-mark-read	2025-09-16 04:19:17 -04:00
Trent Larson	855448d07a	feat: add a page to see all the starred projects	2025-09-10 14:40:36 -06:00
Jose Olarte III	ac603f66e2	Lint fix	2025-09-10 18:19:40 +08:00
Jose Olarte III	9bdd66b9c9	feat(NewActivityView): enhance "See all" links to mark offers as read before navigation - Replace router-links with click handlers for both "See all" offers links - Add handleSeeAllOffersToUser and handleSeeAllOffersToUserProjects methods - Modify expandOffersToUserAndMarkRead to accept fromSeeAll parameter for contextual notifications - Modify expandOffersToUserProjectsAndMarkRead to accept fromSeeAll parameter for contextual notifications - Show shorter notification messages when called from "See all" vs chevron expand buttons - Add safety checks to prevent errors when offers arrays are empty - Standardize notification message text consistency - TypeScript and formatting lint fixes Both "See all" links now properly mark offers as viewed before navigation, preventing users from seeing unread offers in the detailed views.	2025-09-10 18:19:17 +08: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