refactor: remove mistakenly-committed file

fix: linting
refactor: make the meeting member "set visibility" screen much like the organizer's "admit" screen
2025-10-26 14:34:36 -06:00 · 2025-10-26 14:09:56 -06:00 · 2025-10-26 14:08:30 -06:00 · 2025-10-26 07:43:05 -06:00 · 2025-10-26 07:42:34 -06:00 · 2025-10-26 07:40:24 -06:00
82 changed files with 3516 additions and 997 deletions
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -9,6 +9,10 @@ echo "🔍 Running pre-commit hooks..."
 # Run lint-fix first
 echo "📝 Running lint-fix..."
 # Capture git status before lint-fix to detect changes
 git_status_before=$(git status --porcelain)
 npm run lint-fix || {
    echo
    echo "❌ Linting failed. Please fix the issues and try again."
@@ -18,6 +22,36 @@ npm run lint-fix || {
    exit 1
 }
 # Check if lint-fix made any changes
 git_status_after=$(git status --porcelain)
 if [ "$git_status_before" != "$git_status_after" ]; then
    echo
    echo "⚠️  lint-fix made changes to your files!"
    echo "📋 Changes detected:"
    git diff --name-only
    echo
    echo "❓ What would you like to do?"
    echo "   [c] Continue commit without the new changes"
    echo "   [a] Abort commit (recommended - review and stage the changes)"
    echo
    printf "Choose [c/a]: "
    # The `< /dev/tty` is necessary to make read work in git's non-interactive shell
    read choice < /dev/tty
    case $choice in
        [Cc]* )
            echo "✅ Continuing commit without lint-fix changes..."
            sleep 3
            ;;
        [Aa]* | * )
            echo "🛑 Commit aborted. Please review the changes made by lint-fix."
            echo "💡 You can stage the changes with 'git add .' and commit again."
            exit 1
            ;;
    esac
 fi
 # Then run Build Architecture Guard
 #echo "🏗️  Running Build Architecture Guard..."
--- 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
@@ -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/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/AdmitPendingMembersDialog.vue
+++ b/src/components/AdmitPendingMembersDialog.vue
@@ -0,0 +1,376 @@
 <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">
          Admit Pending Members
        </h3>
        <p class="text-sm mb-4">
          The following members are waiting to be admitted to the meeting. You
          can choose to admit them and optionally add them as contacts with
          visibility settings.
        </p>
        <!-- Custom table area - you can customize this -->
        <div 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 pending members to admit
                </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)"
                      />
                      <div class="">
                        <div class="text-sm font-semibold">
                          {{ member.name || SOMEONE_UNNAMED }}
                        </div>
                        <div
                          class="flex items-center gap-0.5 text-xs text-slate-500"
                        >
                          <span class="font-semibold sm:hidden">DID:</span>
                          <span
                            class="w-[35vw] sm:w-auto truncate text-left"
                            style="direction: rtl"
                            >{{ member.did }}</span
                          >
                        </div>
                      </div>
                    </label>
                    <!-- Contact indicator - only show if they are already a contact -->
                    <font-awesome
                      v-if="member.isContact"
                      icon="user-circle"
                      class="fa-fw ms-auto text-slate-400 cursor-pointer hover:text-slate-600"
                      @click="showContactInfo"
                    />
                  </div>
                </td>
              </tr>
            </tbody>
          </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-green-600 text-white cursor-pointer'
                : 'bg-slate-400 text-slate-200 cursor-not-allowed',
            ]"
            @click="admitWithVisibility"
          >
            Admit + Add to Contacts
          </button>
          <button
            class="block w-full text-center text-md font-bold uppercase bg-slate-600 text-white px-2 py-2 rounded-md"
            @click="cancel"
          >
            Maybe Later
          </button>
        </div>
      </div>
    </div>
  </div>
 </template>
 <script lang="ts">
 import { Vue, Component, Prop } from "vue-facing-decorator";
 import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
 import { SOMEONE_UNNAMED } from "@/constants/entities";
 import { MemberData } from "@/interfaces";
 import { setVisibilityUtil, getHeaders } from "@/libs/endorserServer";
 import { createNotifyHelpers } from "@/utils/notify";
@Component({
  mixins: [PlatformServiceMixin],
  emits: ["close"],
 })
 export default class AdmitPendingMembersDialog extends Vue {
  @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
  membersData: MemberData[] = [];
  selectedMembers: string[] = [];
  visible = false;
  // Constants
  // In Vue templates, imported constants need to be explicitly made available to the template
  readonly SOMEONE_UNNAMED = SOMEONE_UNNAMED;
  get hasSelectedMembers() {
    return this.selectedMembers.length > 0;
  }
  get isAllSelected() {
    if (!this.membersData || this.membersData.length === 0) return false;
    return this.membersData.every((member) =>
      this.selectedMembers.includes(member.did),
    );
  }
  get isIndeterminate() {
    if (!this.membersData || this.membersData.length === 0) return false;
    const selectedCount = this.membersData.filter((member) =>
      this.selectedMembers.includes(member.did),
    ).length;
    return selectedCount > 0 && selectedCount < this.membersData.length;
  }
  created() {
    this.notify = createNotifyHelpers(this.$notify);
  }
  open(members: MemberData[]) {
    this.visible = true;
    this.membersData = members;
    // Select all by default
    this.selectedMembers = this.membersData.map((member) => member.did);
  }
  close(notSelectedMemberDids: string[]) {
    this.visible = false;
    this.$emit("close", { notSelectedMemberDids: notSelectedMemberDids });
  }
  cancel() {
    this.close(this.membersData.map((member) => member.did));
  }
  toggleSelectAll() {
    if (!this.membersData || this.membersData.length === 0) return;
    if (this.isAllSelected) {
      // Deselect all
      this.selectedMembers = [];
    } else {
      // Select all
      this.selectedMembers = this.membersData.map((member) => member.did);
    }
  }
  toggleMemberSelection(memberDid: string) {
    const index = this.selectedMembers.indexOf(memberDid);
    if (index > -1) {
      this.selectedMembers.splice(index, 1);
    } else {
      this.selectedMembers.push(memberDid);
    }
  }
  isMemberSelected(memberDid: string) {
    return this.selectedMembers.includes(memberDid);
  }
  async admitWithVisibility() {
    try {
      const selectedMembers = this.membersData.filter((member) =>
        this.selectedMembers.includes(member.did),
      );
      const notSelectedMembers = this.membersData.filter(
        (member) => !this.selectedMembers.includes(member.did),
      );
      let admittedCount = 0;
      let contactAddedCount = 0;
      let visibilitySetCount = 0;
      for (const member of selectedMembers) {
        try {
          // First, admit the member
          await this.admitMember(member);
          admittedCount++;
          // If they're not a contact yet, add them as a contact
          if (!member.isContact) {
            await this.addAsContact(member);
            contactAddedCount++;
          }
          // Set their seesMe to true
          await this.updateContactVisibility(member.did, true);
          visibilitySetCount++;
        } 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: "Members Admitted Successfully",
          text: `Admitted ${admittedCount} member${admittedCount === 1 ? "" : "s"}, added ${contactAddedCount} as contact${contactAddedCount === 1 ? "" : "s"}, and set visibility for ${visibilitySetCount} member${visibilitySetCount === 1 ? "" : "s"}.`,
        },
        10000,
      );
      this.close(notSelectedMembers.map((member) => member.did));
    } catch (error) {
      // eslint-disable-next-line no-console
      console.error("Error admitting members:", error);
      this.$notify(
        {
          group: "alert",
          type: "danger",
          title: "Error",
          text: "Failed to admit some members. Please try again.",
        },
        5000,
      );
    }
  }
  async admitMember(member: {
    did: string;
    name: string;
    member: { memberId: string };
  }) {
    try {
      const headers = await getHeaders(this.activeDid);
      await this.axios.put(
        `${this.apiServer}/api/partner/groupOnboardMember/${member.member.memberId}`,
        { admitted: true },
        { headers },
      );
    } catch (err) {
      // eslint-disable-next-line no-console
      console.error("Error admitting member:", err);
      throw err;
    }
  }
  async 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 they are not yet admitted to the meeting.",
      },
      5000,
    );
  }
 }
 </script>
 <style scoped>
 .dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
 }
 .dialog {
  background: white;
  border-radius: 8px;
  padding: 24px;
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
 }
 </style>
--- 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/MembersList.vue
+++ b/src/components/MembersList.vue
@@ -1,183 +1,227 @@
 <template>
-  <div class="space-y-4">
+  <div>
-    <!-- Loading State -->
+    <div class="space-y-4">
-    <div
+      <!-- Loading State -->
-      v-if="isLoading"
+      <div
-      class="mt-16 text-center text-4xl bg-slate-400 text-white w-14 py-2.5 rounded-full mx-auto"
+        v-if="isLoading"
-    >
+        class="mt-16 text-center text-4xl bg-slate-400 text-white w-14 py-2.5 rounded-full mx-auto"
-      <font-awesome icon="spinner" class="fa-spin-pulse" />
+      >
-    </div>
+        <font-awesome icon="spinner" class="fa-spin-pulse" />
    <!-- Members List -->
    <div v-else>
      <div class="text-center text-red-600 py-4">
        {{ decryptionErrorMessage() }}
      </div>
-      <div v-if="missingMyself" class="py-4 text-red-600">
+      <!-- Members List -->
        You are not currently admitted by the organizer.
      </div>
      <div v-if="!firstName" class="py-4 text-red-600">
        Your name is not set, so others may not recognize you. Reload this page
        to set it.
      </div>
-      <div>
+      <div v-else>
-        <span
+        <div class="text-center text-red-600 my-4">
-          v-if="membersToShow().length > 0 && showOrganizerTools && isOrganizer"
+          {{ decryptionErrorMessage() }}
-          class="inline-flex items-center flex-wrap"
+        </div>
-        >
+
-          <span class="inline-flex items-center">
+        <div v-if="missingMyself" class="py-4 text-red-600">
-            &bull; Click
+          You are not currently admitted by the organizer.
-            <span
+        </div>
-              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"
+        <div v-if="!firstName" class="py-4 text-red-600">
-            >
+          Your name is not set, so others may not recognize you. Reload this
-              <font-awesome icon="plus" class="text-sm" />
+          page to set it.
-            </span>
+        </div>
-            /
+
-            <span
+        <ul class="list-disc text-sm ps-4 space-y-2 mb-4">
-              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"
+          <li
-            >
+            v-if="
-              <font-awesome icon="minus" class="text-sm" />
+              membersToShow().length > 0 && showOrganizerTools && isOrganizer
-            </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"
          >
-            <font-awesome icon="circle-user" class="text-xl" />
+            Click
-          </span>
+            <font-awesome icon="circle-plus" class="text-blue-500 text-sm" />
-          to add them to your contacts.
+            /
-        </span>
+            <font-awesome icon="circle-minus" class="text-rose-500 text-sm" />
-      </div>
+            to add/remove them to/from the meeting.
          </li>
          <li v-if="membersToShow().length > 0">
            Click
            <font-awesome icon="circle-user" class="text-green-600 text-sm" />
            to add them to your contacts.
          </li>
        </ul>
-      <div class="flex justify-center">
+        <div class="flex justify-between">
-        <!-- 
+          <!-- 
        always have at least one refresh button even without members in case the organizer 
         changes the password 
         -->
-        <button
+          <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="refreshData(false)"
-        >
+          >
-          <font-awesome icon="rotate" :class="{ 'fa-spin': isLoading }" />
+            <font-awesome icon="rotate" :class="{ 'fa-spin': isLoading }" />
-        </button>
+            Refresh
-      </div>
+            <span class="text-xs">({{ countdownTimer }}s)</span>
-      <div
+          </button>
        v-for="member in membersToShow()"
        :key="member.member.memberId"
        class="mt-2 p-4 bg-gray-50 rounded-lg"
      >
        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <h3 class="text-lg font-medium">
              {{ member.name || unnamedMember }}
            </h3>
            <div
              v-if="!getContactFor(member.did) && member.did !== activeDid"
              class="flex justify-end"
            >
              <button
                class="btn-add-contact"
                title="Add as contact"
                @click="addAsContact(member)"
              >
                <font-awesome icon="circle-user" class="text-xl" />
              </button>
            </div>
            <button
              v-if="member.did !== activeDid"
              class="btn-info-contact"
              title="Contact info"
              @click="
                informAboutAddingContact(
                  getContactFor(member.did) !== undefined,
                )
              "
            >
              <font-awesome icon="circle-info" class="text-base" />
            </button>
          </div>
          <div class="flex">
            <span
              v-if="
                showOrganizerTools && isOrganizer && member.did !== activeDid
              "
              class="flex items-center"
            >
              <button
                class="btn-admission"
                :title="
                  member.member.admitted ? 'Remove member' : 'Admit member'
                "
                @click="checkWhetherContactBeforeAdmitting(member)"
              >
                <font-awesome
                  :icon="member.member.admitted ? 'minus' : 'plus'"
                  class="text-sm"
                />
              </button>
              <button
                class="btn-info-admission"
                title="Admission info"
                @click="informAboutAdmission()"
              >
                <font-awesome icon="circle-info" class="text-base" />
              </button>
            </span>
          </div>
        </div>
-        <p class="text-sm text-gray-600 truncate">
+        <ul
-          {{ member.did }}
+          v-if="membersToShow().length > 0"
          class="border-t border-slate-300 my-2"
        >
          <li
            v-for="member in membersToShow()"
            :key="member.member.memberId"
            :class="[
              'border-b px-2 sm:px-3 py-1.5',
              {
                'bg-blue-50 border-t border-blue-300 -mt-[1px]':
                  !member.member.admitted && isOrganizer,
              },
              { 'border-slate-300': member.member.admitted },
            ]"
          >
            <div class="flex items-center gap-2 justify-between">
              <div class="flex items-center gap-1 overflow-hidden">
                <h3
                  :class="[
                    'font-semibold truncate',
                    {
                      'text-slate-500': !member.member.admitted && isOrganizer,
                    },
                  ]"
                >
                  <font-awesome
                    v-if="member.member.memberId === members[0]?.memberId"
                    icon="crown"
                    class="fa-fw text-amber-400"
                  />
                  <font-awesome
                    v-if="!member.member.admitted && isOrganizer"
                    icon="hourglass-half"
                    class="fa-fw text-slate-400"
                  />
                  {{ member.name || unnamedMember }}
                </h3>
                <div
                  v-if="!getContactFor(member.did) && member.did !== activeDid"
                  class="flex items-center gap-1.5 ms-1"
                >
                  <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" />
                  </button>
                </div>
              </div>
              <span
                v-if="
                  showOrganizerTools && isOrganizer && member.did !== activeDid
                "
                class="flex items-center gap-1.5"
              >
                <button
                  :class="
                    member.member.admitted
                      ? 'btn-admission-remove'
                      : 'btn-admission-add'
                  "
                  :title="
                    member.member.admitted ? 'Remove member' : 'Admit member'
                  "
                  @click="checkWhetherContactBeforeAdmitting(member)"
                >
                  <font-awesome
                    :icon="
                      member.member.admitted ? 'circle-minus' : 'circle-plus'
                    "
                  />
                </button>
                <button
                  class="btn-info-admission"
                  title="Admission Info"
                  @click="informAboutAdmission()"
                >
                  <font-awesome icon="circle-info" />
                </button>
              </span>
            </div>
            <p class="text-xs text-gray-600 truncate">
              {{ member.did }}
            </p>
          </li>
        </ul>
        <div v-if="membersToShow().length > 0" class="flex justify-between">
          <!-- 
        always have at least one refresh button even without members in case the organizer 
         changes the password 
         -->
          <button
            class="text-sm bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-3 py-1.5 rounded-md"
            title="Refresh members list now"
            @click="refreshData(false)"
          >
            <font-awesome icon="rotate" :class="{ 'fa-spin': isLoading }" />
            Refresh
            <span class="text-xs">({{ countdownTimer }}s)</span>
          </button>
        </div>
        <p v-if="members.length === 0" class="text-gray-500 py-4">
          No members have joined this meeting yet
        </p>
      </div>
      <div v-if="membersToShow().length > 0" class="flex justify-center mt-4">
        <button
          class="btn-action-refresh"
          title="Refresh members list"
          @click="fetchMembers"
        >
          <font-awesome icon="rotate" :class="{ 'fa-spin': isLoading }" />
        </button>
      </div>
      <p v-if="members.length === 0" class="text-gray-500 py-4">
        No members have joined this meeting yet
      </p>
    </div>
    <!-- This Admit component is for the organizer to admit pending members to the meeting -->
    <AdmitPendingMembersDialog
      ref="admitPendingMembersDialog"
      :active-did="activeDid"
      :api-server="apiServer"
      @close="closeMemberSelectionDialogCallback"
    />
    <!-- This Bulk Visibility component is for non-organizer members to add other members to their contacts and set their visibility -->
    <SetBulkVisibilityDialog
      ref="setBulkVisibilityDialog"
      :active-did="activeDid"
      :api-server="apiServer"
      @close="closeMemberSelectionDialogCallback"
    />
  </div>
 </template>
 <script lang="ts">
 import { Component, Vue, Prop, Emit } from "vue-facing-decorator";
-import {
+import { NotificationIface } from "@/constants/app";
  errorStringForLog,
  getHeaders,
  register,
  serverMessageForUser,
 } from "../libs/endorserServer";
 import { decryptMessage } from "../libs/crypto";
 import { Contact } from "../db/tables/contacts";
 import * as libsUtil from "../libs/util";
 import { NotificationIface } from "../constants/app";
 import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
 import { createNotifyHelpers, TIMEOUTS } from "@/utils/notify";
 import {
  NOTIFY_ADD_CONTACT_FIRST,
  NOTIFY_CONTINUE_WITHOUT_ADDING,
 } from "@/constants/notifications";
 import { SOMEONE_UNNAMED } from "@/constants/entities";
 import {
  errorStringForLog,
  getHeaders,
  register,
  serverMessageForUser,
 } from "@/libs/endorserServer";
 import { decryptMessage } from "@/libs/crypto";
 import { Contact } from "@/db/tables/contacts";
 import { MemberData } from "@/interfaces";
 import * as libsUtil from "@/libs/util";
 import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
 import { createNotifyHelpers, TIMEOUTS } from "@/utils/notify";
 import AdmitPendingMembersDialog from "./AdmitPendingMembersDialog.vue";
 import SetBulkVisibilityDialog from "./SetBulkVisibilityDialog.vue";
 interface Member {
  admitted: boolean;
@@ -193,6 +237,10 @@ interface DecryptedMember {
 }
@Component({
  components: {
    AdmitPendingMembersDialog,
    SetBulkVisibilityDialog,
  },
  mixins: [PlatformServiceMixin],
 })
 export default class MembersList extends Vue {
@@ -210,6 +258,7 @@ export default class MembersList extends Vue {
    return message;
  }
  contacts: Array<Contact> = [];
  decryptedMembers: DecryptedMember[] = [];
  firstName = "";
  isLoading = true;
@@ -219,7 +268,12 @@ export default class MembersList extends Vue {
  missingMyself = false;
  activeDid = "";
  apiServer = "";
-  contacts: Array<Contact> = [];
+
  // Auto-refresh functionality
  countdownTimer = 10;
  autoRefreshInterval: NodeJS.Timeout | null = null;
  lastRefreshTime = 0;
  previousMemberDidsIgnored: string[] = [];
  /**
   * Get the unnamed member constant
@@ -240,8 +294,8 @@ export default class MembersList extends Vue {
    this.apiServer = settings.apiServer || "";
    this.firstName = settings.firstName || "";
-    await this.fetchMembers();
+
-    await this.loadContacts();
+    this.refreshData();
  }
  async fetchMembers() {
@@ -329,22 +383,63 @@ export default class MembersList extends Vue {
  }
  membersToShow(): DecryptedMember[] {
    let members: DecryptedMember[] = [];
    if (this.isOrganizer) {
      if (this.showOrganizerTools) {
-        return this.decryptedMembers;
+        members = this.decryptedMembers;
      } else {
-        return this.decryptedMembers.filter(
+        members = this.decryptedMembers.filter(
          (member: DecryptedMember) => member.member.admitted,
        );
      }
    } else {
      // non-organizers only get visible members from server, plus themselves
      // this is a stub for this user just in case they are waiting to get in
      // which is especially useful so they can see their own DID
      const currentUser: DecryptedMember = {
        member: {
          admitted: false,
          content: "{}",
          memberId: -1,
        },
        name: this.firstName,
        did: this.activeDid,
        isRegistered: false,
      };
      const otherMembersPlusUser = [currentUser, ...this.decryptedMembers];
      members = otherMembersPlusUser;
    }
-    // non-organizers only get visible members from server
+
-    return this.decryptedMembers;
+    // Sort members according to priority:
    // 1. Organizer at the top
    // 2. Non-admitted members next
    // 3. Everyone else after
    return members.sort((a, b) => {
      // Check if either member is the organizer (first member in original list)
      const aIsOrganizer = a.member.memberId === this.members[0]?.memberId;
      const bIsOrganizer = b.member.memberId === this.members[0]?.memberId;
      // Organizer always comes first
      if (aIsOrganizer && !bIsOrganizer) return -1;
      if (!aIsOrganizer && bIsOrganizer) return 1;
      // If both are organizers or neither are organizers, sort by admission status
      if (aIsOrganizer && bIsOrganizer) return 0; // Both organizers, maintain original order
      // Non-admitted members come before admitted members
      if (!a.member.admitted && b.member.admitted) return -1;
      if (a.member.admitted && !b.member.admitted) return 1;
      // If admission status is the same, maintain original order
      return 0;
    });
  }
  informAboutAdmission() {
    this.notify.info(
-      "This is to register people in Time Safari and to admit them to the meeting. A '+' symbol means they are not yet admitted and you can register and admit them. A '-' means you can remove them, but they will stay registered.",
+      "This is to register people in Time Safari and to admit them to the meeting. A (+) symbol means they are not yet admitted and you can register and admit them. A (-) symbol means you can remove them, but they will stay registered.",
      TIMEOUTS.VERY_LONG,
    );
  }
@@ -363,14 +458,87 @@ export default class MembersList extends Vue {
    }
  }
  async loadContacts() {
    this.contacts = await this.$getAllContacts();
  }
  getContactFor(did: string): Contact | undefined {
    return this.contacts.find((contact) => contact.did === did);
  }
  getPendingMembersToAdmit(): MemberData[] {
    return this.decryptedMembers
      .filter(
        (member) => member.did !== this.activeDid && !member.member.admitted,
      )
      .map(this.convertDecryptedMemberToMemberData);
  }
  getNonContactMembers(): MemberData[] {
    return this.decryptedMembers
      .filter(
        (member) =>
          member.did !== this.activeDid && !this.getContactFor(member.did),
      )
      .map(this.convertDecryptedMemberToMemberData);
  }
  convertDecryptedMemberToMemberData(
    decryptedMember: DecryptedMember,
  ): MemberData {
    return {
      did: decryptedMember.did,
      name: decryptedMember.name,
      isContact: !!this.getContactFor(decryptedMember.did),
      member: {
        memberId: decryptedMember.member.memberId.toString(),
      },
    };
  }
  /**
   * Show the admit pending members dialog if conditions are met
   */
  async refreshData(bypassPromptIfAllWereIgnored = true) {
    // Force refresh both contacts and members
    this.contacts = await this.$getAllContacts();
    await this.fetchMembers();
    const pendingMembers = this.isOrganizer
      ? this.getPendingMembersToAdmit()
      : this.getNonContactMembers();
    if (pendingMembers.length === 0) {
      this.startAutoRefresh();
      return;
    }
    if (bypassPromptIfAllWereIgnored) {
      // only show if there are pending members that have not been ignored
      const pendingMembersNotIgnored = pendingMembers.filter(
        (member) => !this.previousMemberDidsIgnored.includes(member.did),
      );
      if (pendingMembersNotIgnored.length === 0) {
        this.startAutoRefresh();
        // everyone waiting has been ignored
        return;
      }
    }
    this.stopAutoRefresh();
    if (this.isOrganizer) {
      (this.$refs.admitPendingMembersDialog as AdmitPendingMembersDialog).open(
        pendingMembers,
      );
    } else {
      (this.$refs.setBulkVisibilityDialog as SetBulkVisibilityDialog).open(
        pendingMembers,
      );
    }
  }
  // Admit Pending Members Dialog methods
  async closeMemberSelectionDialogCallback(
    result: { notSelectedMemberDids: string[] } | undefined,
  ) {
    this.previousMemberDidsIgnored = result?.notSelectedMemberDids || [];
    await this.refreshData();
  }
  checkWhetherContactBeforeAdmitting(decrMember: DecryptedMember) {
    const contact = this.getContactFor(decrMember.did);
    if (!decrMember.member.admitted && !contact) {
@@ -508,6 +676,41 @@ export default class MembersList extends Vue {
      this.notify.error(message, TIMEOUTS.LONG);
    }
  }
  startAutoRefresh() {
    this.stopAutoRefresh();
    this.lastRefreshTime = Date.now();
    this.countdownTimer = 10;
    this.autoRefreshInterval = setInterval(() => {
      const now = Date.now();
      const timeSinceLastRefresh = (now - this.lastRefreshTime) / 1000;
      if (timeSinceLastRefresh >= 10) {
        // Time to refresh
        this.refreshData();
        this.lastRefreshTime = now;
        this.countdownTimer = 10;
      } else {
        // Update countdown
        this.countdownTimer = Math.max(
          0,
          Math.round(10 - timeSinceLastRefresh),
        );
      }
    }, 1000); // Update every second
  }
  stopAutoRefresh() {
    if (this.autoRefreshInterval) {
      clearInterval(this.autoRefreshInterval);
      this.autoRefreshInterval = null;
    }
  }
  beforeDestroy() {
    this.stopAutoRefresh();
  }
 }
 </script>
@@ -522,29 +725,26 @@ export default class MembersList extends Vue {
 .btn-add-contact {
  /* stylelint-disable-next-line at-rule-no-unknown */
-  @apply ml-2 w-8 h-8 flex items-center justify-center rounded-full 
+  @apply text-lg text-green-600 hover:text-green-800 
    bg-green-100 text-green-600 hover:bg-green-200 hover:text-green-800 
    transition-colors;
 }
 .btn-info-contact {
  /* stylelint-disable-next-line at-rule-no-unknown */
  @apply ml-2 mb-2 w-6 h-6 flex items-center justify-center rounded-full 
    bg-slate-100 text-slate-500 hover:bg-slate-200 hover:text-slate-800 
    transition-colors;
 }
 .btn-admission {
  /* stylelint-disable-next-line at-rule-no-unknown */
  @apply mr-2 w-6 h-6 flex items-center justify-center rounded-full 
    bg-blue-100 text-blue-600 hover:bg-blue-200 hover:text-blue-800 
    transition-colors;
 }
 .btn-info-contact,
 .btn-info-admission {
  /* stylelint-disable-next-line at-rule-no-unknown */
-  @apply mr-2 mb-2 w-6 h-6 flex items-center justify-center rounded-full 
+  @apply text-slate-400 hover:text-slate-600 
-    bg-slate-100 text-slate-500 hover:bg-slate-200 hover:text-slate-800 
+    transition-colors;
 }
 .btn-admission-add {
  /* stylelint-disable-next-line at-rule-no-unknown */
  @apply text-lg text-blue-500 hover:text-blue-700 
    transition-colors;
 }
 .btn-admission-remove {
  /* stylelint-disable-next-line at-rule-no-unknown */
  @apply text-lg text-rose-500 hover:text-rose-700 
    transition-colors;
 }
 </style>
--- a/src/components/SetBulkVisibilityDialog.vue
+++ b/src/components/SetBulkVisibilityDialog.vue
@@ -0,0 +1,309 @@
 <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">
          Add Members to Contacts
        </h3>
        <p class="text-sm mb-4">
          Would you like to add these members to your contacts?
        </p>
        <!-- Custom table area - you can customize this -->
        <div 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 are not in your contacts
                </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"
          >
            Add to Contacts
          </button>
          <button
            class="block w-full text-center text-md font-bold uppercase bg-slate-600 text-white px-2 py-2 rounded-md"
            @click="cancel"
          >
            Maybe Later
          </button>
        </div>
      </div>
    </div>
  </div>
 </template>
 <script lang="ts">
 import { Vue, Component, Prop } from "vue-facing-decorator";
 import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
 import { SOMEONE_UNNAMED } from "@/constants/entities";
 import { MemberData } from "@/interfaces";
 import { setVisibilityUtil } from "@/libs/endorserServer";
 import { createNotifyHelpers } from "@/utils/notify";
@Component({
  mixins: [PlatformServiceMixin],
  emits: ["close"],
 })
 export default class SetBulkVisibilityDialog extends Vue {
  @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
  membersData: MemberData[] = [];
  selectedMembers: string[] = [];
  visible = false;
  // Constants
  // In Vue templates, imported constants need to be explicitly made available to the template
  readonly SOMEONE_UNNAMED = SOMEONE_UNNAMED;
  get hasSelectedMembers() {
    return this.selectedMembers.length > 0;
  }
  get isAllSelected() {
    if (!this.membersData || this.membersData.length === 0) return false;
    return this.membersData.every((member) =>
      this.selectedMembers.includes(member.did),
    );
  }
  get isIndeterminate() {
    if (!this.membersData || this.membersData.length === 0) return false;
    const selectedCount = this.membersData.filter((member) =>
      this.selectedMembers.includes(member.did),
    ).length;
    return selectedCount > 0 && selectedCount < this.membersData.length;
  }
  created() {
    this.notify = createNotifyHelpers(this.$notify);
  }
  open(members: MemberData[]) {
    this.visible = true;
    this.membersData = members;
    // Select all by default
    this.selectedMembers = this.membersData.map((member) => member.did);
  }
  close(notSelectedMemberDids: string[]) {
    this.visible = false;
    this.$emit("close", { notSelectedMemberDids: notSelectedMemberDids });
  }
  cancel() {
    this.close(this.membersData.map((member) => member.did));
  }
  toggleSelectAll() {
    if (!this.membersData || this.membersData.length === 0) return;
    if (this.isAllSelected) {
      // Deselect all
      this.selectedMembers = [];
    } else {
      // Select all
      this.selectedMembers = this.membersData.map((member) => member.did);
    }
  }
  toggleMemberSelection(memberDid: string) {
    const index = this.selectedMembers.indexOf(memberDid);
    if (index > -1) {
      this.selectedMembers.splice(index, 1);
    } else {
      this.selectedMembers.push(memberDid);
    }
  }
  isMemberSelected(memberDid: string) {
    return this.selectedMembers.includes(memberDid);
  }
  async setVisibilityForSelectedMembers() {
    try {
      const selectedMembers = this.membersData.filter((member) =>
        this.selectedMembers.includes(member.did),
      );
      const notSelectedMembers = 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,
      );
      this.close(notSelectedMembers.map((member) => member.did));
    } 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,
    );
  }
 }
 </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,7 +20,7 @@ import { logger } from "../utils/logger";
 })
 export default class TopMessage extends Vue {
  // Enhanced PlatformServiceMixin v4.0 provides:
-  // - Cached database operations: this.$contacts(), this.$settings(), this.$accountSettings()
+  // - Cached database operations: this.$contacts(), this.$accountSettings()
  // - Settings shortcuts: this.$saveSettings()
  // - Cache management: this.$refreshSettings(), this.$clearAllCaches()
  // - Ultra-concise database methods: this.$db(), this.$exec(), this.$query()
--- 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
@@ -192,6 +192,13 @@ const MIGRATIONS = [
    name: "004_active_identity_management",
    sql: MIG_004_SQL,
  },
  {
    name: "005_add_starredPlanHandleIds_to_settings",
    sql: `
      ALTER TABLE settings ADD COLUMN starredPlanHandleIds TEXT DEFAULT '[]'; -- JSON string
      ALTER TABLE settings ADD COLUMN lastAckedStarredPlanChangesJwtId TEXT;
    `,
  },
 ];
 /**
--- 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/index.ts
+++ b/src/interfaces/index.ts
@@ -27,6 +27,7 @@ export type {
 export type {
  // From user.ts
  UserInfo,
  MemberData,
 } from "./user";
 export * from "./limits";
--- 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/interfaces/user.ts
+++ b/src/interfaces/user.ts
@@ -6,3 +6,12 @@ export interface UserInfo {
  profileImageUrl?: string;
  nextPublicEncKeyHash?: string;
 }
 export interface MemberData {
  did: string;
  name: string;
  isContact: boolean;
  member: {
    memberId: string;
  };
 }
--- 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
@@ -29,6 +29,7 @@ import {
  faCircle,
  faCircleCheck,
  faCircleInfo,
  faCircleMinus,
  faCirclePlus,
  faCircleQuestion,
  faCircleRight,
@@ -37,6 +38,7 @@ import {
  faCoins,
  faComment,
  faCopy,
  faCrown,
  faDollar,
  faDownload,
  faEllipsis,
@@ -58,6 +60,7 @@ import {
  faHand,
  faHandHoldingDollar,
  faHandHoldingHeart,
  faHourglassHalf,
  faHouseChimney,
  faImage,
  faImagePortrait,
@@ -86,6 +89,7 @@ import {
  faSquareCaretDown,
  faSquareCaretUp,
  faSquarePlus,
  faStar,
  faThumbtack,
  faTrashCan,
  faTriangleExclamation,
@@ -94,6 +98,9 @@ import {
  faXmark,
 } from "@fortawesome/free-solid-svg-icons";
 // these are referenced differently, eg. ":icon='['far', 'star']'" as in ProjectViewView.vue
 import { faStar as faStarRegular } from "@fortawesome/free-regular-svg-icons";
 // Initialize Font Awesome library with all required icons
 library.add(
  faArrowDown,
@@ -119,6 +126,7 @@ library.add(
  faCircle,
  faCircleCheck,
  faCircleInfo,
  faCircleMinus,
  faCirclePlus,
  faCircleQuestion,
  faCircleRight,
@@ -127,6 +135,7 @@ library.add(
  faCoins,
  faComment,
  faCopy,
  faCrown,
  faDollar,
  faDownload,
  faEllipsis,
@@ -148,6 +157,7 @@ library.add(
  faHand,
  faHandHoldingDollar,
  faHandHoldingHeart,
  faHourglassHalf,
  faHouseChimney,
  faImage,
  faImagePortrait,
@@ -168,14 +178,16 @@ library.add(
  faPlus,
  faQrcode,
  faQuestion,
  faRotate,
  faRightFromBracket,
  faRotate,
  faShareNodes,
  faSpinner,
  faSquare,
  faSquareCaretDown,
  faSquareCaretUp,
  faSquarePlus,
  faStar,
  faStarRegular,
  faThumbtack,
  faTrashCan,
  faTriangleExclamation,
--- 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/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;
    },
@@ -551,6 +563,12 @@ export const PlatformServiceMixin = {
        if (settings.searchBoxes) {
          settings.searchBoxes = this._parseJsonField(settings.searchBoxes, []);
        }
        if (settings.starredPlanHandleIds) {
          settings.starredPlanHandleIds = this._parseJsonField(
            settings.starredPlanHandleIds,
            [],
          );
        }
        return settings;
      } catch (error) {
@@ -617,6 +635,12 @@ export const PlatformServiceMixin = {
            [],
          );
        }
        if (mergedSettings.starredPlanHandleIds) {
          mergedSettings.starredPlanHandleIds = this._parseJsonField(
            mergedSettings.starredPlanHandleIds,
            [],
          );
        }
        return mergedSettings;
      } catch (error) {
--- 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;
@@ -1464,9 +1476,6 @@ export default class AccountViewView extends Vue {
      if (endorserResp.status === 200) {
        this.endorserLimits = endorserResp.data;
      } else {
        this.limitsMessage = ACCOUNT_VIEW_CONSTANTS.LIMITS.NO_LIMITS_FOUND;
        this.notify.warning(ACCOUNT_VIEW_CONSTANTS.LIMITS.BAD_SERVER_RESPONSE);
      }
    } catch (error) {
      this.limitsMessage =
--- 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.$settings();
+      const settings = await this.$accountSettings();
      // Get activeDid from active_identity table (single source of truth)
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
--- 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 -->
--- 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
@@ -705,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();
@@ -719,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();
@@ -733,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() {
@@ -837,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 -->
--- 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,7 +39,7 @@
          v-if="newOffersToUser.length > 0"
          :icon="showOffersDetails ? 'chevron-down' : 'chevron-right'"
          class="cursor-pointer ml-4 mr-4 text-lg"
-          @click="expandOffersToUserAndMarkRead()"
+          @click.prevent="expandOffersToUserAndMarkRead()"
        />
      </div>
      <a class="text-blue-500 cursor-pointer" @click="handleSeeAllOffersToUser">
@@ -48,7 +58,7 @@
            didInfo(offer.offeredByDid, activeDid, allMyDids, allContacts)
          }}</span>
          offered
-          <span v-if="offer.objectDescription">{{
+          <span v-if="offer.objectDescription" class="truncate">{{
            offer.objectDescription
          }}</span
          >{{ offer.objectDescription && offer.amount ? ", and " : "" }}
@@ -67,10 +77,10 @@
          <!-- New line that appears on hover or when the offer is clicked -->
          <div
            class="absolute left-0 w-full text-left text-gray-500 text-sm hidden group-hover:flex cursor-pointer items-center"
-            @click="markOffersAsReadStartingWith(offer.jwtId)"
+            @click.prevent="markOffersAsReadStartingWith(offer.jwtId)"
          >
            <span class="inline-block w-8 h-px bg-gray-500 mr-2" />
-            Click to keep all above as new offers
+            Click to keep all above as unread offers
          </div>
        </li>
      </ul>
@@ -96,7 +106,7 @@
            showOffersToUserProjectsDetails ? 'chevron-down' : 'chevron-right'
          "
          class="cursor-pointer ml-4 mr-4 text-lg"
-          @click="expandOffersToUserProjectsAndMarkRead()"
+          @click.prevent="expandOffersToUserProjectsAndMarkRead()"
        />
      </div>
      <a
@@ -118,7 +128,7 @@
            didInfo(offer.offeredByDid, activeDid, allMyDids, allContacts)
          }}</span>
          offered
-          <span v-if="offer.objectDescription">{{
+          <span v-if="offer.objectDescription" class="truncate">{{
            offer.objectDescription
          }}</span
          >{{ offer.objectDescription && offer.amount ? ", and " : "" }}
@@ -139,10 +149,153 @@
          <!-- New line that appears on hover -->
          <div
            class="absolute left-0 w-full text-left text-gray-500 text-sm hidden group-hover:flex cursor-pointer items-center"
-            @click="markOffersToUserProjectsAsReadStartingWith(offer.jwtId)"
+            @click.prevent="
              markOffersToUserProjectsAsReadStartingWith(offer.jwtId)
            "
          >
            <span class="inline-block w-8 h-px bg-gray-500 mr-2" />
-            Click to keep all above as new offers
+            Click to keep all above as unread offers
          </div>
        </li>
      </ul>
    </div>
    <!-- Starred Projects with Changes Section -->
    <div
      class="flex justify-between mt-6"
      data-testId="showStarredProjectChanges"
    >
      <div>
        <span class="text-lg font-medium"
          >{{ newStarredProjectChanges.length
          }}{{ newStarredProjectChangesHitLimit ? "+" : "" }}</span
        >
        <span class="text-lg font-medium ml-4"
          >Starred Project{{
            newStarredProjectChanges.length === 1 ? "" : "s"
          }}
          With Changes</span
        >
        <font-awesome
          v-if="newStarredProjectChanges.length > 0"
          :icon="
            showStarredProjectChangesDetails ? 'chevron-down' : 'chevron-right'
          "
          class="cursor-pointer ml-4 mr-4 text-lg"
          @click.prevent="expandStarredProjectChangesAndMarkRead()"
        />
      </div>
    </div>
    <div v-if="showStarredProjectChangesDetails" class="ml-4 mt-4">
      <ul class="list-disc ml-4">
        <li
          v-for="projectChange in newStarredProjectChanges"
          :key="projectChange.plan.handleId"
          class="mt-4 relative group"
        >
          <div class="flex items-center gap-2">
            <div class="flex-1 min-w-0">
              <span class="font-medium">{{
                projectChange.plan.name || "Unnamed Project"
              }}</span>
              <span
                v-if="projectChange.plan.description"
                class="text-gray-600 block truncate"
              >
                {{ projectChange.plan.description }}
              </span>
            </div>
            <router-link
              :to="{
                path:
                  '/project/' + encodeURIComponent(projectChange.plan.handleId),
              }"
              class="text-blue-500 flex-shrink-0"
            >
              <font-awesome
                icon="file-lines"
                class="text-blue-500 cursor-pointer"
              />
            </router-link>
          </div>
          <!-- Show what changed -->
          <div
            v-if="getPlanDifferences(projectChange.plan.handleId)"
            class="text-sm mt-2"
          >
            <div class="font-medium mb-2">Changes</div>
            <div class="overflow-x-auto">
              <table
                class="w-full text-xs border-collapse border border-gray-300 rounded-lg shadow-sm bg-white"
              >
                <thead>
                  <tr class="bg-gray-50">
                    <th
                      class="border border-gray-300 px-3 py-2 text-left font-semibold text-gray-700"
                    ></th>
                    <th
                      class="border border-gray-300 px-3 py-2 text-left font-semibold text-gray-700"
                    >
                      Previous
                    </th>
                    <th
                      class="border border-gray-300 px-3 py-2 text-left font-semibold text-gray-700"
                    >
                      Current
                    </th>
                  </tr>
                </thead>
                <tbody>
                  <tr
                    v-for="(difference, field) in getPlanDifferences(
                      projectChange.plan.handleId,
                    )"
                    :key="field"
                    class="hover:bg-gray-50"
                  >
                    <td
                      class="border border-gray-300 px-3 py-2 font-medium text-gray-800 break-words"
                    >
                      {{ getDisplayFieldName(field) }}
                    </td>
                    <td
                      class="border border-gray-300 px-3 py-2 text-gray-600 break-words align-top"
                    >
                      <vue-markdown
                        v-if="field === 'description' && difference.old"
                        :source="formatFieldValue(difference.old)"
                        class="markdown-content"
                      />
                      <span v-else>{{ formatFieldValue(difference.old) }}</span>
                    </td>
                    <td
                      class="border border-gray-300 px-3 py-2 text-green-700 font-medium break-words align-top"
                    >
                      <vue-markdown
                        v-if="field === 'description' && difference.new"
                        :source="formatFieldValue(difference.new)"
                        class="markdown-content"
                      />
                      <span v-else>{{ formatFieldValue(difference.new) }}</span>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div v-else>The changes did not affect essential project data.</div>
          <!-- New line that appears on hover -->
          <div
            class="absolute left-0 w-full text-left text-gray-500 text-sm hidden group-hover:flex cursor-pointer items-center"
            @click.prevent="
              markStarredProjectChangesAsReadStartingWith(
                projectChange.plan.jwtId!,
              )
            "
          >
            <span class="inline-block w-8 h-px bg-gray-500 mr-2" />
            Click to keep all above as unread changes
          </div>
        </li>
      </ul>
@@ -152,6 +305,7 @@
 <script lang="ts">
 import { Component, Vue } from "vue-facing-decorator";
 import VueMarkdown from "vue-markdown-render";
 import GiftedDialog from "../components/GiftedDialog.vue";
 import QuickNav from "../components/QuickNav.vue";
@@ -162,20 +316,28 @@ import { Router } from "vue-router";
 import {
  OfferSummaryRecord,
  OfferToPlanSummaryRecord,
  PlanSummaryAndPreviousClaim,
  PlanSummaryRecord,
 } from "../interfaces/records";
 import {
  didInfo,
  didInfoOrNobody,
  displayAmount,
  getNewOffersToUser,
  getNewOffersToUserProjects,
  getStarredProjectsWithChanges,
 } from "../libs/endorserServer";
 import { retrieveAccountDids } from "../libs/util";
 import { logger } from "../utils/logger";
 import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
 import { createNotifyHelpers, TIMEOUTS } from "@/utils/notify";
 import * as databaseUtil from "../db/databaseUtil";
 import * as R from "ramda";
 import { PlanActionClaim } from "../interfaces/claims";
 import { GenericCredWrapper } from "@/interfaces";
@Component({
-  components: { GiftedDialog, QuickNav, EntityIcon },
+  components: { GiftedDialog, QuickNav, EntityIcon, VueMarkdown },
  mixins: [PlatformServiceMixin],
 })
 export default class NewActivityView extends Vue {
@@ -189,13 +351,22 @@ export default class NewActivityView extends Vue {
  apiServer = "";
  lastAckedOfferToUserJwtId = "";
  lastAckedOfferToUserProjectsJwtId = "";
  lastAckedStarredPlanChangesJwtId = "";
  newOffersToUser: Array<OfferSummaryRecord> = [];
  newOffersToUserHitLimit = false;
  newOffersToUserProjects: Array<OfferToPlanSummaryRecord> = [];
  newOffersToUserProjectsHitLimit = false;
  newStarredProjectChanges: Array<PlanSummaryAndPreviousClaim> = [];
  newStarredProjectChangesHitLimit = false;
  starredPlanHandleIds: Array<string> = [];
  planDifferences: Record<
    string,
    Record<string, { old: unknown; new: unknown }>
  > = {};
  showOffersDetails = false;
  showOffersToUserProjectsDetails = false;
  showStarredProjectChangesDetails = false;
  didInfo = didInfo;
  displayAmount = displayAmount;
@@ -214,6 +385,12 @@ export default class NewActivityView extends Vue {
      this.lastAckedOfferToUserJwtId = settings.lastAckedOfferToUserJwtId || "";
      this.lastAckedOfferToUserProjectsJwtId =
        settings.lastAckedOfferToUserProjectsJwtId || "";
      this.lastAckedStarredPlanChangesJwtId =
        settings.lastAckedStarredPlanChangesJwtId || "";
      this.starredPlanHandleIds = databaseUtil.parseJsonField(
        settings.starredPlanHandleIds,
        [],
      );
      this.allContacts = await this.$getAllContacts();
@@ -237,6 +414,29 @@ export default class NewActivityView extends Vue {
      this.newOffersToUserProjects = offersToUserProjectsData.data;
      this.newOffersToUserProjectsHitLimit = offersToUserProjectsData.hitLimit;
      // Load starred project changes if user has starred projects
      if (this.starredPlanHandleIds.length > 0) {
        try {
          const starredProjectChangesData = await getStarredProjectsWithChanges(
            this.axios,
            this.apiServer,
            this.activeDid,
            this.starredPlanHandleIds,
            this.lastAckedStarredPlanChangesJwtId,
          );
          this.newStarredProjectChanges = starredProjectChangesData.data;
          this.newStarredProjectChangesHitLimit =
            starredProjectChangesData.hitLimit;
          // Analyze differences between current plans and previous claims
          this.analyzePlanDifferences(this.newStarredProjectChanges);
        } catch (error) {
          logger.warn("Failed to load starred project changes:", error);
          this.newStarredProjectChanges = [];
          this.newStarredProjectChangesHitLimit = false;
        }
      }
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
    } catch (err: any) {
      logger.error("Error retrieving settings & contacts:", err);
@@ -250,13 +450,13 @@ export default class NewActivityView extends Vue {
  async expandOffersToUserAndMarkRead() {
    this.showOffersDetails = !this.showOffersDetails;
    if (this.showOffersDetails && this.newOffersToUser.length > 0) {
-      await this.$updateSettings({
+      await this.$saveUserSettings(this.activeDid, {
        lastAckedOfferToUserJwtId: this.newOffersToUser[0].jwtId,
      });
      // note that we don't update this.lastAckedOfferToUserJwtId in case they
      // later choose the last one to keep the offers as new
      this.notify.info(
-        "The offers are marked as viewed. Click in the list to keep them as new.",
+        "The offers are marked as read. Click in the list to keep them unread.",
        TIMEOUTS.LONG,
      );
    }
@@ -268,12 +468,12 @@ export default class NewActivityView extends Vue {
    );
    if (index !== -1 && index < this.newOffersToUser.length - 1) {
      // Set to the next offer's jwtId
-      await this.$updateSettings({
+      await this.$saveUserSettings(this.activeDid, {
        lastAckedOfferToUserJwtId: this.newOffersToUser[index + 1].jwtId,
      });
    } else {
      // it's the last entry (or not found), so just keep it the same
-      await this.$updateSettings({
+      await this.$saveUserSettings(this.activeDid, {
        lastAckedOfferToUserJwtId: this.lastAckedOfferToUserJwtId,
      });
    }
@@ -290,14 +490,14 @@ export default class NewActivityView extends Vue {
      this.showOffersToUserProjectsDetails &&
      this.newOffersToUserProjects.length > 0
    ) {
-      await this.$updateSettings({
+      await this.$saveUserSettings(this.activeDid, {
        lastAckedOfferToUserProjectsJwtId:
          this.newOffersToUserProjects[0].jwtId,
      });
      // note that we don't update this.lastAckedOfferToUserProjectsJwtId in case
      // they later choose the last one to keep the offers as new
      this.notify.info(
-        "The offers are marked as viewed. Click in the list to keep them as new.",
+        "The offers are now marked read. Click in the list to keep them unread.",
        TIMEOUTS.LONG,
      );
    }
@@ -309,13 +509,13 @@ export default class NewActivityView extends Vue {
    );
    if (index !== -1 && index < this.newOffersToUserProjects.length - 1) {
      // Set to the next offer's jwtId
-      await this.$updateSettings({
+      await this.$saveUserSettings(this.activeDid, {
        lastAckedOfferToUserProjectsJwtId:
          this.newOffersToUserProjects[index + 1].jwtId,
      });
    } else {
      // it's the last entry (or not found), so just keep it the same
-      await this.$updateSettings({
+      await this.$saveUserSettings(this.activeDid, {
        lastAckedOfferToUserProjectsJwtId:
          this.lastAckedOfferToUserProjectsJwtId,
      });
@@ -333,5 +533,382 @@ export default class NewActivityView extends Vue {
  async handleSeeAllOffersToUserProjects() {
    this.$router.push("/recent-offers-to-user-projects");
  }
  async expandStarredProjectChangesAndMarkRead() {
    this.showStarredProjectChangesDetails =
      !this.showStarredProjectChangesDetails;
    if (
      this.showStarredProjectChangesDetails &&
      this.newStarredProjectChanges.length > 0
    ) {
      await this.$saveUserSettings(this.activeDid, {
        lastAckedStarredPlanChangesJwtId:
          this.newStarredProjectChanges[0].plan.jwtId,
      });
      this.notify.info(
        "The starred project changes are now marked read. Click in the list to keep them unread.",
        TIMEOUTS.LONG,
      );
    }
  }
  async markStarredProjectChangesAsReadStartingWith(jwtId: string) {
    const index = this.newStarredProjectChanges.findIndex(
      (change) => change.plan.jwtId === jwtId,
    );
    if (index !== -1 && index < this.newStarredProjectChanges.length - 1) {
      // Set to the next change's jwtId
      await this.$saveUserSettings(this.activeDid, {
        lastAckedStarredPlanChangesJwtId:
          this.newStarredProjectChanges[index + 1].plan.jwtId,
      });
    } else {
      // it's the last entry (or not found), so just keep it the same
      await this.$saveUserSettings(this.activeDid, {
        lastAckedStarredPlanChangesJwtId: this.lastAckedStarredPlanChangesJwtId,
      });
    }
    this.notify.info(
      "All starred project changes above that line are marked as unread.",
      TIMEOUTS.STANDARD,
    );
  }
  /**
   * Analyzes differences between current plans and their previous claims
   *
   * Walks through a list of PlanSummaryAndPreviousClaim items and stores the
   * differences between the previous claim and the current plan. This method
   * extracts the claim from the wrappedClaimBefore object and compares relevant
   * fields with the current plan.
   *
   * @param planChanges Array of PlanSummaryAndPreviousClaim objects to analyze
   */
  analyzePlanDifferences(planChanges: Array<PlanSummaryAndPreviousClaim>) {
    this.planDifferences = {};
    for (const planChange of planChanges) {
      const currentPlan: PlanSummaryRecord = planChange.plan;
      const wrappedClaim: GenericCredWrapper<PlanActionClaim> =
        planChange.wrappedClaimBefore;
      // Extract the actual claim from the wrapped claim
      let previousClaim: PlanActionClaim;
      const embeddedClaim: PlanActionClaim = wrappedClaim.claim;
      if (
        embeddedClaim &&
        typeof embeddedClaim === "object" &&
        "credentialSubject" in embeddedClaim
      ) {
        // It's a Verifiable Credential
        previousClaim =
          (embeddedClaim.credentialSubject as PlanActionClaim) || embeddedClaim;
      } else {
        // It's a direct claim
        previousClaim = embeddedClaim;
      }
      if (!previousClaim || !currentPlan.handleId) {
        continue;
      }
      const differences: Record<string, { old: unknown; new: unknown }> = {};
      // Compare name
      const normalizedOldName = this.normalizeValueForComparison(
        previousClaim.name,
      );
      const normalizedNewName = this.normalizeValueForComparison(
        currentPlan.name,
      );
      if (!R.equals(normalizedOldName, normalizedNewName)) {
        differences.name = {
          old: previousClaim.name,
          new: currentPlan.name,
        };
      }
      // Compare description
      const normalizedOldDescription = this.normalizeValueForComparison(
        previousClaim.description,
      );
      const normalizedNewDescription = this.normalizeValueForComparison(
        currentPlan.description,
      );
      if (!R.equals(normalizedOldDescription, normalizedNewDescription)) {
        differences.description = {
          old: previousClaim.description,
          new: currentPlan.description,
        };
      }
      // Compare location (combine latitude and longitude into one row)
      const oldLat = this.normalizeValueForComparison(
        previousClaim.location?.geo?.latitude,
      );
      const oldLon = this.normalizeValueForComparison(
        previousClaim.location?.geo?.longitude,
      );
      const newLat = this.normalizeValueForComparison(currentPlan.locLat);
      const newLon = this.normalizeValueForComparison(currentPlan.locLon);
      if (!R.equals(oldLat, newLat) || !R.equals(oldLon, newLon)) {
        differences.location = {
          old: this.formatLocationValue(oldLat, oldLon, true),
          new: this.formatLocationValue(newLat, newLon, false),
        };
      }
      // Compare agent (issuer)
      const oldAgent = didInfoOrNobody(
        previousClaim.agent?.identifier,
        this.activeDid,
        this.allMyDids,
        this.allContacts,
      );
      const newAgent = didInfoOrNobody(
        currentPlan.agentDid,
        this.activeDid,
        this.allMyDids,
        this.allContacts,
      );
      const normalizedOldAgent = this.normalizeValueForComparison(oldAgent);
      const normalizedNewAgent = this.normalizeValueForComparison(newAgent);
      if (!R.equals(normalizedOldAgent, normalizedNewAgent)) {
        differences.agent = {
          old: oldAgent,
          new: newAgent,
        };
      }
      // Compare start time
      const oldStartTime = previousClaim.startTime;
      const newStartTime = currentPlan.startTime;
      const normalizedOldStartTime =
        this.normalizeDateForComparison(oldStartTime);
      const normalizedNewStartTime =
        this.normalizeDateForComparison(newStartTime);
      if (!R.equals(normalizedOldStartTime, normalizedNewStartTime)) {
        differences.startTime = {
          old: oldStartTime,
          new: newStartTime,
        };
      }
      // Compare end time
      const oldEndTime = previousClaim.endTime;
      const newEndTime = currentPlan.endTime;
      const normalizedOldEndTime = this.normalizeDateForComparison(oldEndTime);
      const normalizedNewEndTime = this.normalizeDateForComparison(newEndTime);
      if (!R.equals(normalizedOldEndTime, normalizedNewEndTime)) {
        differences.endTime = {
          old: oldEndTime,
          new: newEndTime,
        };
      }
      // Compare image
      const oldImage = previousClaim.image;
      const newImage = currentPlan.image;
      const normalizedOldImage = this.normalizeValueForComparison(oldImage);
      const normalizedNewImage = this.normalizeValueForComparison(newImage);
      if (!R.equals(normalizedOldImage, normalizedNewImage)) {
        differences.image = {
          old: oldImage,
          new: newImage,
        };
      }
      // Compare url
      const oldUrl = previousClaim.url;
      const newUrl = currentPlan.url;
      const normalizedOldUrl = this.normalizeValueForComparison(oldUrl);
      const normalizedNewUrl = this.normalizeValueForComparison(newUrl);
      if (!R.equals(normalizedOldUrl, normalizedNewUrl)) {
        differences.url = {
          old: oldUrl,
          new: newUrl,
        };
      }
      // Store differences if any were found
      if (!R.isEmpty(differences)) {
        this.planDifferences[currentPlan.handleId] = differences;
        logger.debug(
          "[NewActivityView] Plan differences found for",
          currentPlan.handleId,
          differences,
        );
      }
    }
    logger.debug(
      "[NewActivityView] Analyzed",
      planChanges.length,
      "plan changes, found differences in",
      Object.keys(this.planDifferences).length,
      "plans",
    );
  }
  /**
   * Normalizes values for comparison - treats null, undefined, and empty string as equivalent
   *
   * @param value The value to normalize
   * @returns The normalized value (null for null/undefined/empty, otherwise the original value)
   */
  normalizeValueForComparison<T>(value: T | null | undefined): T | null {
    if (value === null || value === undefined || value === "") {
      return null;
    }
    return value;
  }
  /**
   * Normalizes date values for comparison by converting strings to Date objects
   * Returns null for null/undefined/empty values, Date objects for valid date strings
   */
  normalizeDateForComparison(value: unknown): Date | null {
    if (value === null || value === undefined || value === "") {
      return null;
    }
    if (typeof value === "string") {
      const date = new Date(value);
      // Check if the date is valid
      return isNaN(date.getTime()) ? null : date;
    }
    if (value instanceof Date) {
      return isNaN(value.getTime()) ? null : value;
    }
    return null;
  }
  /**
   * Gets the differences for a specific plan by handle ID
   *
   * @param handleId The handle ID of the plan to get differences for
   * @returns The differences object or null if no differences found
   */
  getPlanDifferences(
    handleId: string,
  ): Record<string, { old: unknown; new: unknown }> | null {
    return this.planDifferences[handleId] || null;
  }
  /**
   * Formats a field value for display in the UI
   *
   * @param value The value to format
   * @returns A human-readable string representation
   */
  formatFieldValue(value: unknown): string {
    if (value === null || value === undefined) {
      return "Not set";
    }
    if (typeof value === "string") {
      const stringValue = value || "Empty";
      // Check if it's a date/time string
      if (this.isDateTimeString(stringValue)) {
        return this.formatDateTime(stringValue);
      }
      // Check if it's a URL
      if (this.isUrl(stringValue)) {
        return stringValue; // Keep URLs as-is for now
      }
      return stringValue;
    }
    if (typeof value === "number") {
      return value.toString();
    }
    if (typeof value === "boolean") {
      return value ? "Yes" : "No";
    }
    // For complex objects, stringify
    const stringified = JSON.stringify(value);
    return stringified;
  }
  /**
   * Checks if a string appears to be a date/time string
   */
  isDateTimeString(value: string): boolean {
    if (!value) return false;
    // Check for ISO 8601 format or other common date formats
    const dateRegex = /^\d{4}-\d{2}-\d{2}(T\d{2}:\d{2}:\d{2})?(\.\d{3})?Z?$/;
    return dateRegex.test(value) || !isNaN(Date.parse(value));
  }
  /**
   * Checks if a string is a URL
   */
  isUrl(value: string): boolean {
    if (!value) return false;
    try {
      new URL(value);
      return true;
    } catch {
      return false;
    }
  }
  /**
   * Formats a date/time string for display
   */
  formatDateTime(value: string): string {
    try {
      const date = new Date(value);
      return date.toLocaleString();
    } catch {
      return value; // Return original if parsing fails
    }
  }
  /**
   * Gets a human-readable field name for display
   *
   * @param fieldName The internal field name
   * @returns A formatted field name for display
   */
  getDisplayFieldName(fieldName: string): string {
    const fieldNameMap: Record<string, string> = {
      name: "Name",
      description: "Description",
      location: "Location",
      agent: "Agent",
      startTime: "Start Time",
      endTime: "End Time",
      image: "Image",
      url: "URL",
    };
    return fieldNameMap[fieldName] || fieldName;
  }
  /**
   * Formats location values for display
   *
   * @param latitude The latitude value
   * @param longitude The longitude value
   * @param isOldValue Whether this is the old value (true) or new value (false)
   * @returns A formatted location string
   */
  formatLocationValue(
    latitude: number | undefined | null,
    longitude: number | undefined | null,
    isOldValue: boolean = false,
  ): string {
    if (latitude == null && longitude == null) {
      return "Not set";
    }
    // If there's any location data, show generic labels instead of coordinates
    if (isOldValue) {
      return "A Location";
    } else {
      return "New Location";
    }
  }
 }
 </script>
--- a/src/views/NewEditAccountView.vue
+++ b/src/views/NewEditAccountView.vue
@@ -22,18 +22,27 @@
 -->
 <template>
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
+    <!-- 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">
@@ -63,7 +77,7 @@
        v-if="meetings.length === 0 && !isRegistered"
        class="text-center text-gray-500 py-8"
      >
-        No onboarding meetings available
+        No onboarding meetings are available
      </p>
    </div>
--- 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>
--- 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">
--- 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">
--- 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">
--- 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
Trent Larson	e8e00d3eae	refactor: remove mistakenly-committed file	2025-10-26 14:34:36 -06:00
Trent Larson	5c0ce2d1fb	fix: linting	2025-10-26 14:09:56 -06:00
Trent Larson	9e1c267bc0	refactor: make the meeting member "set visibility" screen much like the organizer's "admit" screen	2025-10-26 14:08:30 -06:00
Trent Larson	723a0095a0	feat: prompt user if the pre-commit lint-fix changed anything	2025-10-26 07:43:05 -06:00
Trent Larson	9a94843b68	fix: linting	2025-10-26 07:42:34 -06:00
Trent Larson	9f3c62a29c	test: trying the new pre-commit logic (with a bad linting change)	2025-10-26 07:40:24 -06:00
Trent Larson	39173a8db2	fix: linting	2025-10-26 07:35:12 -06:00
Trent Larson	7ea6a2ef69	refactor: simplify logic for opening onboarding dialogs	2025-10-25 21:15:32 -06:00
Trent Larson	f0f0f1681e	chore: move a variable into most local scope	2025-10-24 22:06:53 -06:00
Jose Olarte III	2f1eeb6700	fix: resolve duplicate names in Visibility dialog after Admit dialog - Add deduplication logic to getMembersForVisibility() method to prevent duplicate entries - Fix timing issue with isManualRefresh flag reset in showSetBulkVisibilityDialog() - Ensure Visibility dialog shows each member only once when following Admit dialog - Remove debugging console logs after issue resolution The issue was caused by multiple calls to getMembersForVisibility() returning duplicate member entries, which were then displayed in the Visibility dialog. The fix deduplicates members by DID to ensure each member appears only once.	2025-10-24 17:31:46 +08:00
Jose Olarte III	e048e4c86b	fix: restrict pending member styling to organizers only - Apply special styling (blue background, grayed text, hourglass icon) only when current user is organizer - Non-organizers now see consistent styling for all visible members - Maintains organizer's ability to distinguish between admitted and pending members - Fixes issue where non-organizers saw inconsistent styling for all members	2025-10-24 15:40:34 +08:00
Jose Olarte III	16ed5131c4	feat: restrict dialog access based on user roles - AdmitPendingMembersDialog now only triggers for meeting organizers - SetBulkVisibilityDialog now only triggers for members who can see other members - Removes overly restrictive admission status check for visibility dialog - Ensures proper role-based access control for meeting management features	2025-10-24 15:23:39 +08:00
Jose Olarte III	ad51c187aa	Update AdmitPendingMembersDialog.vue feat: add DID display to Pending Members dialog - Restructure member display with better visual hierarchy - Add DID display with responsive truncation for mobile - Simplify button labels ("Admit + Add Contacts" and "Admit Only")	2025-10-23 19:59:55 +08:00
Jose Olarte III	6fbc9c2a5b	feat: Add AdmitPendingMembersDialog for bulk member admission - Add new AdmitPendingMembersDialog component with checkbox selection - Support two action modes: "Admit + Add Contacts" and "Admit Only" - Integrate dialog into MembersList with proper sequencing - Show admit dialog before visibility dialog when pending members exist - Fix auto-refresh pause/resume logic for both dialogs - Ensure consistent dialog behavior between initial load and manual refresh - Add proper async/await handling for data refresh operations - Optimize dialog state management and remove redundant code - Maintain proper flag timing to prevent race conditions The admit dialog now shows automatically when there are pending members, allowing organizers to efficiently admit multiple members at once while optionally adding them as contacts and setting visibility preferences.	2025-10-22 21:56:00 +08:00
Jose Olarte III	035509224b	feat: change icon for pending members - Changed from an animating spinner to a static hourglass	2025-10-21 22:00:21 +08:00
Jose Olarte III	e9ea89edae	feat: enhance members list UI with visual indicators and improved styling - Sort members list with organizer first, then non-admitted, then admitted - Add crown icon for meeting organizer identification - Add spinner icon for non-admitted members - Implement conditional styling for non-admitted members - Update button styling to use circle icons instead of rounded backgrounds - Improve visual hierarchy with better spacing and color coding	2025-10-21 18:13:10 +08:00
Jose Olarte 3	1ce7c0486a	Merge pull request 'feat: implement member visibility dialog with checkbox selection and refresh' (#208 ) from meeting-members-set-visibility into master Reviewed-on: #208	2025-10-21 04:52:14 -04:00
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	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	855448d07a	feat: add a page to see all the starred projects	2025-09-10 14:40:36 -06:00
Trent Larson	9f1495e185	feat: alloww markdown in the descriptions and render them appropriately	2025-09-01 18:40:35 -06:00
Trent Larson	f61cb6eea7	fix: on project changes, truncate the description properly (to avoid screen zooming in) and widen the table	2025-09-01 14:53:39 -06:00
Trent Larson	d3f54d6bff	feat: move the user profile up on page, reword "star" to "favorite"	2025-08-31 08:21:25 -06:00
Trent Larson	2bb733a9ea	feat: make each of the "new" buttons on the home page the same size	2025-08-31 07:46:10 -06:00
Trent Larson	7da6f722f5	fix: fix remaining problems with recent plan changes	2025-08-30 21:30:03 -06:00
Trent Larson	475f4d5ce5	feat: add changed details for plans with recent changes (not all are accurate yet)	2025-08-30 17:18:56 -06:00
Trent Larson	24a7cf5eb6	feat: add a notification for changes to starred projects	2025-08-29 17:31:00 -06:00
Trent Larson	da0621c09a	feat: Start the ability to star/bookmark a project. - Currently toggles & stores correctly locally on project. Does not show on other screens.	2025-08-29 15:03:13 -06:00