feat: Add bulk admit pending members functionality

- Add "Admit Pending" button to admit all pending members at once
- Implement confirmation dialog with options to add members to contacts
- Hide button when no pending members exist
- Pause auto-refresh during dialog interaction for better UX
- Add notification constants for dialog text and actions
- Support both "Admit and Add to Contacts" and "Admit Only" workflows
- Include comprehensive error handling and success feedback

The dialog shows pending member count and allows users to choose whether
to add admitted members to their contacts list, streamlining the
admission process for organizers.

.cursor/rules/development/development_guide.mdc

@@ -4,7 +4,6 @@ alwaysApply: false
 ---
 ✅ use system date command to timestamp all interactions with accurate date and
   time
-✅ python script files must always have a blank line at their end
 ✅ remove whitespace at the end of lines
 ✅ use npm run lint-fix to check for warnings
 ✅ do not use npm run dev let me handle running and supplying feedback
@@ -22,12 +21,10 @@ alwaysApply: false
 
 - [ ] **Timestamp Usage**: Include accurate timestamps in all interactions
 - [ ] **Code Quality**: Use npm run lint-fix to check for warnings
-- [ ] **File Standards**: Ensure Python files have blank line at end
 - [ ] **Whitespace**: Remove trailing whitespace from all lines
 
 ### After Development
 
 - [ ] **Linting Check**: Run npm run lint-fix to verify code quality
-- [ ] **File Validation**: Confirm Python files end with blank line
 - [ ] **Whitespace Review**: Verify no trailing whitespace remains
 - [ ] **Documentation**: Update relevant documentation with changes

doc/active-identity-upgrade-plan.md

@@ -1,390 +0,0 @@
-# Active Identity Upgrade Plan
-
-**Author**: Matthew Raymer  
-**Date**: 2025-09-11  
-**Status**: 🎯 **PLANNING** - Database migration and active identity system upgrade
-
-## Overview
-
-Comprehensive upgrade to the active identity system, addressing architectural issues and implementing enhanced database constraints. Includes database migration enhancements and settings table cleanup based on team feedback.
-
-## Implementation Status
-
-**✅ COMPLETED**: Migration structure updated according to team member feedback
-
-### Implemented Changes
-
-1. **✅ Migration 003**: `003_add_hasBackedUpSeed_to_settings` - Adds `hasBackedUpSeed` column to settings (assumes master deployment)
-2. **✅ Migration 004**: `004_active_identity_and_seed_backup` - Creates `active_identity` table with data migration
-3. **✅ Migration Service**: Updated validation and schema detection logic for new migration structure
-4. **✅ TypeScript**: Fixed type compatibility issues
-
-### Migration Structure Now Follows Team Guidance
-
-- **Migration 003**: `003_add_hasBackedUpSeed_to_settings` (assumes master code deployed)
-- **Migration 004**: `004_active_identity_and_seed_backup` (creates active_identity table)
-- **All migrations are additional** - no editing of previous migrations
-- **Data migration logic** preserves existing `activeDid` from settings
-- **iOS/Android compatibility** confirmed with SQLCipher 4.9.0 (SQLite 3.44.2)
-
-## Educational Context
-
-### Why This Upgrade Matters
-
-The active identity system is **critical infrastructure** affecting every user interaction:
-
-1. **Data Integrity**: Current `ON DELETE SET NULL` allows accidental deletion of active accounts
-2. **Manual Maintenance**: Timestamps require manual updates, creating inconsistency opportunities
-3. **Architectural Clarity**: Separating active identity from user settings improves maintainability
-
-### What This Upgrade Achieves
-
-- **Prevents Data Loss**: `ON DELETE RESTRICT` prevents accidental account deletion
-- **Automatic Consistency**: Database triggers ensure timestamps are always current
-- **Cleaner Architecture**: Complete separation of identity management from user preferences
-- **Better Performance**: Optimized indexes for faster account selection
-
-## Current State Analysis
-
-### Existing Migration Structure
-
-- **Migration 003**: `003_add_hasBackedUpSeed_to_settings` - Adds `hasBackedUpSeed` column to settings (already deployed in master)
-- **Migration 004**: `004_active_identity_and_seed_backup` - Creates `active_identity` table with data migration
-- **Foreign Key**: `ON DELETE SET NULL` constraint
-- **Data Migration**: Copies existing `activeDid` from settings to `active_identity` table
-- **Bootstrapping**: Auto-selects first account if `activeDid` is null/empty
-
-**Important**: All migrations are **additional** - no editing of previous migrations since master code has been deployed.
-
-### Current Schema (Migration 004) - IMPLEMENTED
-
-```sql
--- Migration 004: active_identity_and_seed_backup
--- Assumes master code deployed with migration 003
-
-PRAGMA foreign_keys = ON;
-CREATE UNIQUE INDEX IF NOT EXISTS idx_accounts_did_unique ON accounts(did);
-
-CREATE TABLE IF NOT EXISTS active_identity (
-  id INTEGER PRIMARY KEY CHECK (id = 1),
-  activeDid TEXT DEFAULT NULL,
-  lastUpdated TEXT NOT NULL DEFAULT (datetime('now')),
-  FOREIGN KEY (activeDid) REFERENCES accounts(did) ON DELETE SET NULL
-);
-
-CREATE UNIQUE INDEX IF NOT EXISTS idx_active_identity_single_record ON active_identity(id);
-
--- Seed singleton row
-INSERT INTO active_identity (id, activeDid, lastUpdated)
-SELECT 1, NULL, datetime('now')
-WHERE NOT EXISTS (SELECT 1 FROM active_identity WHERE id = 1);
-
--- MIGRATE EXISTING DATA: Copy activeDid from settings
-UPDATE active_identity
-SET activeDid = (SELECT activeDid FROM settings WHERE id = 1),
-    lastUpdated = datetime('now')
-WHERE id = 1
-AND EXISTS (SELECT 1 FROM settings WHERE id = 1 AND activeDid IS NOT NULL AND activeDid != '');
-```
-
-## Current Implementation Details
-
-### PlatformServiceMixin.ts Implementation
-
-The current `$getActiveIdentity()` method in `src/utils/PlatformServiceMixin.ts`:
-
-```typescript
-async $getActiveIdentity(): Promise<{ activeDid: string }> {
-  try {
-    const result = await this.$dbQuery("SELECT activeDid FROM active_identity WHERE id = 1");
-    
-    if (!result?.values?.length) {
-      logger.warn("[PlatformServiceMixin] Active identity table is empty - migration issue");
-      return { activeDid: "" };
-    }
-
-    const activeDid = result.values[0][0] as string | null;
-
-    // Handle null activeDid - auto-select first account
-    if (activeDid === null) {
-      const firstAccount = await this.$dbQuery("SELECT did FROM accounts ORDER BY dateCreated, did LIMIT 1");
-      if (firstAccount?.values?.length) {
-        const firstAccountDid = firstAccount.values[0][0] as string;
-        await this.$dbExec("UPDATE active_identity SET activeDid = ?, lastUpdated = datetime('now') WHERE id = 1", [firstAccountDid]);
-        return { activeDid: firstAccountDid };
-      }
-      logger.warn("[PlatformServiceMixin] No accounts available for auto-selection");
-      return { activeDid: "" };
-    }
-
-    // Validate activeDid exists in accounts
-    const accountExists = await this.$dbQuery("SELECT did FROM accounts WHERE did = ?", [activeDid]);
-    if (accountExists?.values?.length) {
-      return { activeDid };
-    }
-
-    // Clear corrupted activeDid and return empty
-    logger.warn("[PlatformServiceMixin] Active identity not found in accounts, clearing");
-    await this.$dbExec("UPDATE active_identity SET activeDid = NULL, lastUpdated = datetime('now') WHERE id = 1");
-    return { activeDid: "" };
-  } catch (error) {
-    logger.error("[PlatformServiceMixin] Error getting active identity:", error);
-    return { activeDid: "" };
-  }
-}
-```
-
-### Key Implementation Notes
-
-1. **Null Handling**: Auto-selects first account when `activeDid` is null
-2. **Corruption Detection**: Clears invalid `activeDid` values
-3. **Manual Timestamps**: Updates `lastUpdated` manually in code
-4. **Error Handling**: Returns empty string on any error with appropriate logging
-
-## Proposed Changes Impact
-
-### 1. Foreign Key Constraint Change
-**Current**: `ON DELETE SET NULL` → **Proposed**: `ON DELETE RESTRICT`
-- **Data Safety**: Prevents accidental deletion of active account
-- **New Migration**: Add migration 005 to update constraint
-
-### 2. Automatic Timestamp Updates
-**Current**: Manual `lastUpdated` updates → **Proposed**: Database trigger
-- **Code Simplification**: Remove manual timestamp updates from `PlatformServiceMixin`
-- **Consistency**: Ensures `lastUpdated` is always current
-
-### 3. Enhanced Indexing
-**Current**: Single unique index on `id` → **Proposed**: Additional index on `accounts(dateCreated, did)`
-- **Performance Improvement**: Faster account selection queries
-- **Minimal Risk**: Additive change only
-
-## Implementation Strategy
-
-### Add Migration 005
-
-Since the `active_identity` table already exists and is working, we can add a new migration to enhance it:
-
-```sql
-{
-  name: "005_active_identity_enhancements",
-  sql: `
-    PRAGMA foreign_keys = ON;
-    
-    -- Recreate table with ON DELETE RESTRICT constraint
-    CREATE TABLE active_identity_new (
-      id INTEGER PRIMARY KEY CHECK (id = 1),
-      activeDid TEXT REFERENCES accounts(did) ON DELETE RESTRICT,
-      lastUpdated TEXT NOT NULL DEFAULT (datetime('now'))
-    );
-    
-    -- Copy existing data
-    INSERT INTO active_identity_new (id, activeDid, lastUpdated)
-    SELECT id, activeDid, lastUpdated FROM active_identity;
-    
-    -- Replace old table
-    DROP TABLE active_identity;
-    ALTER TABLE active_identity_new RENAME TO active_identity;
-    
-    -- Add performance indexes
-    CREATE INDEX IF NOT EXISTS idx_accounts_pick ON accounts(dateCreated, did);
-    
-    -- Create automatic timestamp trigger
-    CREATE TRIGGER IF NOT EXISTS trg_active_identity_touch
-    AFTER UPDATE ON active_identity
-    FOR EACH ROW
-    BEGIN
-      UPDATE active_identity
-        SET lastUpdated = datetime('now')
-        WHERE id = 1;
-    END;
-  `
-}
-```
-
-## Migration Service Updates Required
-
-### Enhanced Validation Logic
-
-**File**: `src/services/migrationService.ts`
-
-**Migration 004 validation**:
-- **Table existence**: `SELECT name FROM sqlite_master WHERE type='table' AND name='active_identity'`
-- **Column structure**: `SELECT id, activeDid, lastUpdated FROM active_identity LIMIT 1`
-- **Schema detection**: Uses `isSchemaAlreadyPresent()` to check if migration was already applied
-
-**Migration 005 validation**:
-- **Trigger existence**: `trg_active_identity_touch`
-- **Performance index**: `idx_accounts_pick`
-- **Foreign key constraint**: `ON DELETE RESTRICT`
-- **Table recreation**: Verify table was successfully recreated
-
-### Enhanced Schema Detection
-
-**Migration 004 verification**:
-- **Table structure**: Checks `active_identity` table exists and has correct columns
-- **Data integrity**: Validates that the table can be queried successfully
-- **Migration tracking**: Uses `isSchemaAlreadyPresent()` to avoid re-applying migrations
-
-**Migration 005 verification**:
-- **Table structure**: Enhanced constraints with `ON DELETE RESTRICT`
-- **Trigger presence**: Automatic timestamp updates
-- **Index presence**: Performance optimization
-- **Data integrity**: Existing data was preserved during table recreation
-
-## Risk Assessment
-
-### Low Risk Changes
-- **Performance Index**: Additive only, no data changes
-- **Trigger Creation**: Additive only, improves consistency
-- **New Migration**: Clean implementation, no modification of existing migrations
-
-### Medium Risk Changes
-- **Foreign Key Change**: `ON DELETE RESTRICT` is more restrictive
-- **Table Recreation**: Requires careful data preservation
-- **Validation Updates**: Need to test enhanced validation logic
-
-### Mitigation Strategies
-1. **Comprehensive Testing**: Test migration on various database states
-2. **Data Preservation**: Verify existing data is copied correctly
-3. **Clean Implementation**: New migration with all enhancements
-4. **Validation Coverage**: Enhanced validation ensures correctness
-5. **Rollback Plan**: Can drop new table and restore original if needed
-
-## Implementation Timeline
-
-### Phase 1: Migration Enhancement
-- [ ] Add migration 005 with enhanced constraints
-- [ ] Add enhanced validation logic
-- [ ] Add enhanced schema detection logic
-- [ ] Test migration on clean database
-
-### Phase 2: Testing
-- [ ] Test migration on existing databases
-- [ ] Validate foreign key constraints work correctly
-- [ ] Test trigger functionality
-- [ ] Test performance improvements
-- [ ] Verify data preservation during table recreation
-
-### Phase 3: Deployment
-- [ ] Deploy enhanced migration to development
-- [ ] Monitor migration success rates
-- [ ] Deploy to production
-- [ ] Monitor for any issues
-
-### Phase 4: Settings Table Cleanup
-- [ ] Create migration 006 to clean up settings table
-- [ ] Remove orphaned settings records (accountDid is null)
-- [ ] Clear any remaining activeDid values in settings
-- [ ] Consider removing activeDid column entirely (future task)
-
-## Settings Table Cleanup Strategy
-
-### Current State Analysis
-The settings table currently contains:
-- **Legacy activeDid column**: Still present from original design
-- **Orphaned records**: Settings with `accountDid = null` that may be obsolete
-- **Redundant data**: Some settings may have been copied unnecessarily
-
-Based on team feedback, the cleanup should include:
-
-1. **Remove orphaned settings records**:
-   ```sql
-   DELETE FROM settings WHERE accountDid IS NULL;
-   ```
-
-2. **Clear any remaining activeDid values**:
-   ```sql
-   UPDATE settings SET activeDid = NULL;
-   ```
-
-3. **Future consideration**: Remove the activeDid column entirely from settings table
-
-### Migration 006: Settings Cleanup
-
-```sql
-{
-  name: "006_settings_cleanup",
-  sql: `
-    -- Remove orphaned settings records (accountDid is null)
-    DELETE FROM settings WHERE accountDid IS NULL;
-    
-    -- Clear any remaining activeDid values in settings
-    UPDATE settings SET activeDid = NULL;
-    
-    -- Optional: Consider removing the activeDid column entirely
-    -- ALTER TABLE settings DROP COLUMN activeDid;
-  `
-}
-```
-
-### Benefits of Settings Cleanup
-- **Reduced confusion**: Eliminates dual-purpose columns
-- **Cleaner architecture**: Settings table focuses only on user preferences
-- **Reduced storage**: Removes unnecessary data
-- **Clearer separation**: Active identity vs. user settings are distinct concerns
-
-### Risk Assessment: LOW
-- **Data safety**: Only removes orphaned/obsolete records
-- **Backward compatibility**: Maintains existing column structure
-- **Rollback**: Easy to restore if needed
-- **Testing**: Can be validated with existing data
-
-## Code Changes Required
-
-### Files to Modify
-1. **`src/db-sql/migration.ts`** - Add migration 005 with enhanced constraints
-2. **`src/db-sql/migration.ts`** - Add migration 006 for settings cleanup
-3. **`src/services/migrationService.ts`** - Add enhanced validation and detection logic
-4. **`src/utils/PlatformServiceMixin.ts`** - Remove manual timestamp updates
-
-### Estimated Impact
-- **Migration File**: ~25 lines added (migration 005) + ~15 lines added (migration 006)
-- **Migration Service**: ~50 lines added (enhanced validation)
-- **PlatformServiceMixin**: ~20 lines removed (manual timestamps)
-- **Total**: ~90 lines changed
-
-## Conclusion
-
-**✅ IMPLEMENTATION COMPLETE**: The active identity upgrade plan has been successfully applied to the current project.
-
-### Successfully Implemented
-
-**✅ Migration Structure Updated**:
-- **Migration 003**: `003_add_hasBackedUpSeed_to_settings` (assumes master deployment)
-- **Migration 004**: `004_active_identity_and_seed_backup` (creates active_identity table)
-- **All migrations are additional** - follows team member feedback exactly
-
-**✅ Technical Implementation**:
-- **Data Migration**: Preserves existing `activeDid` from settings table
-- **Foreign Key Constraints**: `ON DELETE SET NULL` for data safety
-- **iOS/Android Compatibility**: Confirmed with SQLCipher 4.9.0 (SQLite 3.44.2)
-- **Migration Service**: Updated validation and schema detection logic
-
-**✅ Code Quality**:
-- **TypeScript**: All type errors resolved
-- **Linting**: No linting errors
-- **Team Guidance**: Follows "additional migrations only" requirement
-
-### Next Steps (Future Enhancements)
-
-The foundation is now in place for future enhancements:
-
-1. **Migration 005**: `005_active_identity_enhancements` (ON DELETE RESTRICT, triggers, indexes)
-2. **Migration 006**: `006_settings_cleanup` (remove orphaned settings, clear legacy activeDid)
-3. **Code Simplification**: Remove manual timestamp updates from PlatformServiceMixin
-
-### Current Status
-
-**Migration 004 is ready for deployment** and will:
-- ✅ Create `active_identity` table with proper constraints
-- ✅ Migrate existing `activeDid` data from settings
-- ✅ Work identically on iOS and Android
-- ✅ Follow team member feedback for additional migrations only
-
-**Key Point**: All migrations are **additional** - no editing of previous migrations since master code has been deployed. This ensures compatibility and proper testing.
-
----
-
-**Status**: Ready for team review and implementation approval  
-**Last Updated**: 2025-09-11  
-**Next Review**: After team feedback and approval

doc/active-pointer-smart-deletion-pattern.md

@@ -1,392 +0,0 @@
-# Engineering Directive v2 — Active Pointer + Smart Deletion Pattern (hardened)
-
-**Author**: Matthew Raymer  
-**Date**: 2025-01-27  
-**Status**: 🎯 **ACTIVE** - Production-grade engineering directive for implementing smart deletion patterns
-
-## Overview
-
-This supersedes the previous draft and is **copy-pasteable** for any `<model>`. It keeps UX smooth, guarantees data integrity, and adds production-grade safeguards (bootstrapping, races, soft deletes, bulk ops, and testability). Built on your prior pattern.
-
-## 0) Objectives (non-negotiable)
-
-1. Exactly **one active `<model>`** pointer (or `NULL` during first-run).
-2. **Block deletion** when it would leave **zero** `<models>`.
-3. If deleting the **active** item, **atomically re-point** to a deterministic **next** item **before** delete.
-4. Enforce with **app logic** + **FK `RESTRICT`** (and `ON UPDATE CASCADE` if `ref` can change).
-
----
-
-## 1) Schema / Migration (SQLite)
-
-```sql
--- <timestamp>__active_<model>.sql
-PRAGMA foreign_keys = ON;
-
--- Stable external key on <models> (e.g., did/slug/uuid)
--- ALTER TABLE <models> ADD COLUMN ref TEXT UNIQUE NOT NULL; -- if missing
-
-CREATE TABLE IF NOT EXISTS active_<model> (
-  id INTEGER PRIMARY KEY CHECK (id = 1),
-  activeRef TEXT UNIQUE, -- allow NULL on first run
-  lastUpdated TEXT NOT NULL DEFAULT (datetime('now')),
-  FOREIGN KEY (activeRef) REFERENCES <models>(ref)
-    ON UPDATE CASCADE
-    ON DELETE RESTRICT
-);
-
--- Seed singleton row (idempotent)
-INSERT INTO active_<model> (id, activeRef)
-SELECT 1, NULL
-WHERE NOT EXISTS (SELECT 1 FROM active_<model> WHERE id = 1);
-```
-
-**Rules**
-
-* **Never** default `activeRef` to `''`—use `NULL` for "no selection yet".
-* Ensure `PRAGMA foreign_keys = ON` for **every connection**.
-
----
-
-## 2) Data Access API (TypeScript)
-
-```ts
-// Required DAL
-async function getAllRefs(): Promise<string[]> { /* SELECT ref FROM <models> ORDER BY created_at, ref */ }
-async function getRefById(id: number): Promise<string> { /* SELECT ref FROM <models> WHERE id=? */ }
-async function getActiveRef(): Promise<string|null> { /* SELECT activeRef FROM active_<model> WHERE id=1 */ }
-async function setActiveRef(ref: string|null): Promise<void> { /* UPDATE active_<model> SET activeRef=?, lastUpdated=datetime('now') WHERE id=1 */ }
-async function deleteById(id: number): Promise<void> { /* DELETE FROM <models> WHERE id=? */ }
-async function countModels(): Promise<number> { /* SELECT COUNT(*) FROM <models> */ }
-
-// Deterministic "next"
-function pickNextRef(all: string[], current?: string): string {
-  const sorted = [...all].sort();
-  if (!current) return sorted[0];
-  const i = sorted.indexOf(current);
-  return sorted[(i + 1) % sorted.length];
-}
-```
-
----
-
-## 3) Smart Delete (Atomic, Race-safe)
-
-```ts
-async function smartDeleteModelById(id: number, notify: (m: string) => void) {
-  await db.transaction(async trx => {
-    const total = await countModels();
-    if (total <= 1) {
-      notify("Cannot delete the last item. Keep at least one.");
-      throw new Error("blocked:last-item");
-    }
-
-    const refToDelete = await getRefById(id);
-    const activeRef   = await getActiveRef();
-
-    if (activeRef === refToDelete) {
-      const all = (await getAllRefs()).filter(r => r !== refToDelete);
-      const next = pickNextRef(all, refToDelete);
-      await setActiveRef(next);
-      notify(`Switched active to ${next} before deletion.`);
-    }
-
-    await deleteById(id); // RESTRICT prevents orphaning if we forgot to switch
-  });
-
-  // Post-tx: emit events / refresh UI
-}
-```
-
----
-
-## 4) Bootstrapping & Repair
-
-```ts
-async function ensureActiveSelected() {
-  const active = await getActiveRef();
-  const all = await getAllRefs();
-  if (active === null && all.length > 0) {
-    await setActiveRef(pickNextRef(all)); // first stable choice
-  }
-}
-```
-
-Invoke after migrations and after bulk imports.
-
----
-
-## 5) Concurrency & Crash Safety
-
-* **Always** wrap "switch → delete" inside a **single transaction**.
-* Treat any FK violation as a **logic regression**; surface telemetry (`fk:restrict`).
-
----
-
-## 6) Soft Deletes (if applicable)
-
-If `<models>` uses `deleted_at`:
-
-* Replace `DELETE` with `UPDATE <models> SET deleted_at = datetime('now') WHERE id=?`.
-* Add a **partial uniqueness** strategy for `ref`:
-
-  * SQLite workaround: make `ref` unique globally and never reuse; or maintain a shadow `refs` ledger to prevent reuse.
-* Adjust `getAllRefs()` to filter `WHERE deleted_at IS NULL`.
-
----
-
-## 7) Bulk Ops & Imports
-
-* For batch deletes:
-
-  1. Compute survivors.
-  2. If a batch would remove **all** survivors → **refuse**.
-  3. If the **active** is included, precompute a deterministic **new active** and set it **once** before deleting.
-* After imports, run `ensureActiveSelected()`.
-
----
-
-## 8) Multi-Scope Actives (optional)
-
-To support **one active per workspace/tenant**:
-
-* Replace singleton with scoped pointer:
-
-  ```sql
-  CREATE TABLE active_<model> (
-    scope TEXT NOT NULL,        -- e.g., workspace_id
-    activeRef TEXT,
-    lastUpdated TEXT NOT NULL DEFAULT (datetime('now')),
-    PRIMARY KEY (scope),
-    FOREIGN KEY (activeRef) REFERENCES <models>(ref) ON UPDATE CASCADE ON DELETE RESTRICT
-  );
-  ```
-* All APIs gain `scope` parameter; transactions remain unchanged in spirit.
-
----
-
-## 9) UX Contract
-
-* Delete confirmation must state:
-
-  * Deleting the **active** item will **auto-switch**.
-  * Deleting the **last** item is **not allowed**.
-* Keep list ordering aligned with `pickNextRef` strategy for predictability.
-
----
-
-## 10) Observability
-
-* Log categories:
-
-  * `blocked:last-item`
-  * `fk:restrict`
-  * `repair:auto-selected-active`
-  * `active:switch:pre-delete`
-* Emit metrics counters; attach `<model>` and (if used) `scope`.
-
----
-
-## 11) Test Matrix (must pass)
-
-1. **Non-active delete** (≥2): deleted; active unchanged.
-2. **Active delete** (≥2): active switches deterministically, then delete succeeds.
-3. **Last item delete** (==1): blocked with message.
-4. **First-run**: 0 items → `activeRef` stays `NULL`; add first → `ensureActiveSelected()` selects it.
-5. **Ref update** (if allowed): `activeRef` follows via `ON UPDATE CASCADE`.
-6. **Soft delete** mode: filters respected; invariants preserved.
-7. **Bulk delete** that includes active but not all: pre-switch then delete set.
-8. **Foreign keys disabled** (fault injection): tests must fail to surface missing PRAGMA.
-
----
-
-## 12) Rollout & Rollback
-
-* **Feature-flag** the new deletion path.
-* Migrations are **idempotent**; ship `ensureActiveSelected()` with them.
-* Keep a pre-migration backup for `<models>` on first rollout.
-* Rollback leaves `active_<model>` table harmlessly present.
-
----
-
-## 13) Replace-Me Cheatsheet
-
-* `<model>` → singular (e.g., `project`)
-* `<models>` → plural table (e.g., `projects`)
-* `ref` → stable external key (`did` | `slug` | `uuid`)
-
----
-
-**Outcome:** You get **predictable UX**, **atomic state changes**, and **hard integrity guarantees** across single- or multi-scope actives, with clear tests and telemetry to keep it honest.
-
----
-
-## TimeSafari Implementation Guide
-
-### Current State Analysis (2025-01-27)
-
-**Status**: ✅ **FULLY COMPLIANT** - Active Pointer + Smart Deletion Pattern implementation complete.
-
-**Compliance Score**: 100% (6/6 components compliant)
-
-#### ✅ **What's Working**
-- **Smart Deletion Logic**: `IdentitySwitcherView.vue` implements atomic transaction-safe deletion
-- **Data Access API**: All required DAL methods exist in `PlatformServiceMixin.ts`
-- **Schema Structure**: `active_identity` table follows singleton pattern correctly
-- **Bootstrapping**: `$ensureActiveSelected()` method implemented
-- **Foreign Key Constraint**: ✅ **FIXED** - Now uses `ON DELETE RESTRICT` (Migration 005)
-- **Settings Cleanup**: ✅ **COMPLETED** - Orphaned records removed (Migration 006)
-
-#### ✅ **All Issues Resolved**
-- ✅ Foreign key constraint fixed to `ON DELETE RESTRICT`
-- ✅ Settings table cleaned up (orphaned records removed)
-
-### Updated Implementation Plan
-
-**Note**: Smart deletion logic is already implemented correctly. Focus on fixing security issues and cleanup.
-
-#### 1) Critical Security Fix (Migration 005)
-
-**Fix Foreign Key Constraint:**
-```sql
--- Migration 005: Fix foreign key constraint to ON DELETE RESTRICT
-{
-  name: "005_active_identity_constraint_fix",
-  sql: `
-    PRAGMA foreign_keys = ON;
-    
-    -- Recreate table with ON DELETE RESTRICT constraint (SECURITY FIX)
-    CREATE TABLE active_identity_new (
-      id INTEGER PRIMARY KEY CHECK (id = 1),
-      activeDid TEXT REFERENCES accounts(did) ON DELETE RESTRICT,
-      lastUpdated TEXT NOT NULL DEFAULT (datetime('now'))
-    );
-    
-    -- Copy existing data
-    INSERT INTO active_identity_new (id, activeDid, lastUpdated)
-    SELECT id, activeDid, lastUpdated FROM active_identity;
-    
-    -- Replace old table
-    DROP TABLE active_identity;
-    ALTER TABLE active_identity_new RENAME TO active_identity;
-    
-    -- Recreate indexes
-    CREATE UNIQUE INDEX IF NOT EXISTS idx_active_identity_single_record ON active_identity(id);
-  `
-}
-```
-
-### Updated Implementation Plan
-
-**Note**: Smart deletion logic is already implemented correctly. Migration 005 (security fix) completed successfully.
-
-#### ✅ **Phase 1: Critical Security Fix (COMPLETED)**
-- **Migration 005**: ✅ **COMPLETED** - Fixed foreign key constraint to `ON DELETE RESTRICT`
-- **Impact**: Prevents accidental account deletion
-- **Status**: ✅ **Successfully applied and tested**
-
-#### **Phase 2: Settings Cleanup (CURRENT)**
-- **Migration 006**: Remove orphaned settings records
-- **Impact**: Cleaner architecture, reduced confusion
-- **Risk**: LOW - Only removes obsolete data
-
-#### 3) Optional Future Enhancement (Migration 007)
-
-**Remove Legacy activeDid Column:**
-```sql
--- Migration 007: Remove activeDid column entirely (future task)
-{
-  name: "007_remove_activeDid_column",
-  sql: `
-    -- Remove the legacy activeDid column from settings table
-    ALTER TABLE settings DROP COLUMN activeDid;
-  `
-}
-```
-
-### Current Implementation Status
-
-#### ✅ **Already Implemented Correctly**
-- **Smart Deletion Logic**: `IdentitySwitcherView.vue` lines 285-315
-- **Data Access API**: All methods exist in `PlatformServiceMixin.ts`
-- **Transaction Safety**: Uses `$withTransaction()` for atomicity
-- **Last Account Protection**: Blocks deletion when `total <= 1`
-- **Deterministic Selection**: `$pickNextAccountDid()` method
-- **Bootstrapping**: `$ensureActiveSelected()` method
-
-#### ❌ **Requires Immediate Fix**
-1. **Foreign Key Constraint**: Change from `ON DELETE SET NULL` to `ON DELETE RESTRICT`
-2. **Settings Cleanup**: Remove orphaned records with `accountDid=null`
-
-### Implementation Priority
-
-#### **Phase 1: Critical Security Fix (IMMEDIATE)**
-- **Migration 005**: Fix foreign key constraint to `ON DELETE RESTRICT`
-- **Impact**: Prevents accidental account deletion
-- **Risk**: HIGH - Current implementation allows data loss
-
-#### **Phase 2: Settings Cleanup (HIGH PRIORITY)**
-- **Migration 006**: Remove orphaned settings records
-- **Impact**: Cleaner architecture, reduced confusion
-- **Risk**: LOW - Only removes obsolete data
-
-#### **Phase 3: Future Enhancement (OPTIONAL)**
-- **Migration 007**: Remove `activeDid` column from settings
-- **Impact**: Complete separation of concerns
-- **Risk**: LOW - Architectural cleanup
-
-#### **Phase 2: Settings Cleanup Implementation (Migration 006)**
-
-**Remove Orphaned Records:**
-```sql
--- Migration 006: Settings cleanup
-{
-  name: "006_settings_cleanup",
-  sql: `
-    -- Remove orphaned settings records (accountDid is null)
-    DELETE FROM settings WHERE accountDid IS NULL;
-    
-    -- Clear any remaining activeDid values in settings
-    UPDATE settings SET activeDid = NULL;
-  `
-}
-```
-
-### Updated Compliance Assessment
-
-#### **Current Status**: ✅ **FULLY COMPLIANT** (100%)
-
-| Component | Status | Compliance |
-|-----------|--------|------------|
-| Smart Deletion Logic | ✅ Complete | 100% |
-| Data Access API | ✅ Complete | 100% |
-| Schema Structure | ✅ Complete | 100% |
-| Foreign Key Constraint | ✅ Fixed (`RESTRICT`) | 100% |
-| Settings Cleanup | ✅ Completed | 100% |
-| **Overall** | ✅ **Complete** | **100%** |
-
-### Implementation Benefits
-
-**Current implementation already provides:**
-- ✅ **Atomic Operations**: Transaction-safe account deletion
-- ✅ **Last Account Protection**: Prevents deletion of final account
-- ✅ **Smart Switching**: Auto-switches active account before deletion
-- ✅ **Deterministic Behavior**: Predictable "next account" selection
-- ✅ **NULL Handling**: Proper empty state management
-
-**After fixes will add:**
-- ✅ **Data Integrity**: Foreign key constraints prevent orphaned references
-- ✅ **Clean Architecture**: Complete separation of identity vs. settings
-- ✅ **Production Safety**: No accidental account deletion possible
-
-### Implementation Complete
-
-✅ **All Required Steps Completed:**
-1. ✅ **Migration 005**: Foreign key constraint fixed to `ON DELETE RESTRICT`
-2. ✅ **Migration 006**: Settings cleanup completed (orphaned records removed)
-3. ✅ **Testing**: All migrations executed successfully with no performance delays
-
-**Optional Future Enhancement:**
-- **Migration 007**: Remove `activeDid` column from settings table (architectural cleanup)
-
-The Active Pointer + Smart Deletion Pattern is now **fully implemented** with **100% compliance**.

doc/activeDid-migration-plan.md

@@ -1,559 +0,0 @@
-# ActiveDid Migration Plan - Implementation Guide
-
-**Author**: Matthew Raymer
-**Date**: 2025-09-03T06:40:54Z
-**Status**: 🚀 **ACTIVE MIGRATION** - API Layer Complete, Component Updates Complete ✅
-
-## Objective
-
-Move the `activeDid` field from the `settings` table to a dedicated `active_identity` table to improve database architecture, prevent data corruption, and separate identity selection from user preferences.
-
-## Result
-
-This document provides the specific implementation steps required to complete the ActiveDid migration with all necessary code changes.
-
-## Use/Run
-
-Follow this implementation checklist step-by-step to complete the migration.
-
-## Context & Scope
-
-- **In scope**: Database migration, API updates, component updates, testing
-- **Out of scope**: UI changes, authentication flow changes, MASTER_SETTINGS_KEY elimination (future improvement)
-
-## Critical Vue Reactivity Bug Discovery
-
-### Issue
-During testing of the ActiveDid migration, a critical Vue reactivity bug was discovered:
-
-**Problem**: The `newDirectOffersActivityNumber` element in HomeView.vue fails to render correctly without a watcher on `numNewOffersToUser`.
-
-**Symptoms**: 
-- Element not found in DOM even when `numNewOffersToUser` has correct value
-- Test failures with "element not found" errors
-- Inconsistent rendering behavior
-
-**Root Cause**: Unknown Vue reactivity issue where property changes don't trigger proper template updates
-
-**Workaround**: A watcher on `numNewOffersToUser` with debug logging is required:
-```typescript
-@Watch("numNewOffersToUser")
-onNumNewOffersToUserChange(newValue: number, oldValue: number) {
-  logger.debug("[HomeView] numNewOffersToUser changed", {
-    oldValue,
-    newValue,
-    willRender: !!newValue,
-    timestamp: new Date().toISOString()
-  });
-}
-```
-
-**Impact**: This watcher must remain in the codebase until the underlying Vue reactivity issue is resolved.
-
-**Files Affected**: `src/views/HomeView.vue`
-
-### Investigation Needed
-- [ ] Investigate why Vue reactivity is not working correctly
-- [ ] Check for race conditions in component lifecycle
-- [ ] Verify if this affects other components
-- [ ] Consider Vue version upgrade or configuration changes
-
-## Implementation Checklist
-
-### Phase 1: Database Migration ✅ COMPLETE
-- [x] Add migration to MIGRATIONS array in `src/db-sql/migration.ts`
-- [x] Create active_identity table with constraints
-- [x] Include data migration from settings to active_identity table
-
-**Status**: All migrations executed successfully. active_identity table created and populated with data.
-
-### Phase 2: API Layer Updates ✅ COMPLETE
-- [x] Implement `$getActiveIdentity()` method (exists with correct return type)
-- [x] Fix `$getActiveIdentity()` return type to match documented interface
-- [x] Update `$accountSettings()` to use new method (minimal safe change)
-- [x] Update `$updateActiveDid()` with dual-write pattern
-- [x] Add strategic logging for migration verification
-
-**Status**: All API layer updates complete and verified working. Methods return correct data format and maintain backward compatibility.
-
-### Phase 3: Component Updates ✅ COMPLETE
-- [x] Update HomeView.vue to use `$getActiveIdentity()` (completed)
-- [x] Update OfferDialog.vue to use `$getActiveIdentity()` (completed)
-- [x] Update PhotoDialog.vue to use `$getActiveIdentity()` (completed)
-- [x] Update GiftedDialog.vue to use `$getActiveIdentity()` (completed)
-- [x] Update MembersList.vue to use `$getActiveIdentity()` (completed)
-- [x] Update OnboardingDialog.vue to use `$getActiveIdentity()` (completed)
-- [x] Update ImageMethodDialog.vue to use `$getActiveIdentity()` (completed)
-- [x] Update DIDView.vue to use `$getActiveIdentity()` (completed)
-- [x] Update TestView.vue to use `$getActiveIdentity()` (completed)
-- [x] Update ContactAmountsView.vue to use `$getActiveIdentity()` (completed)
-- [x] Update UserProfileView.vue to use `$getActiveIdentity()` (completed)
-- [x] Update ClaimView.vue to use `$getActiveIdentity()` (completed)
-- [x] Update OfferDetailsView.vue to use `$getActiveIdentity()` (completed)
-- [x] Update QuickActionBvcEndView.vue to use `$getActiveIdentity()` (completed)
-- [x] Update SharedPhotoView.vue to use `$getActiveIdentity()` (completed)
-- [x] Update ClaimReportCertificateView.vue to use `$getActiveIdentity()` (completed)
-- [x] Update ProjectsView.vue to use `$getActiveIdentity()` (completed)
-- [x] Update ClaimAddRawView.vue to use `$getActiveIdentity()` (completed)
-- [x] Update ContactQRScanShowView.vue to use `$getActiveIdentity()` (completed)
-- [x] Update InviteOneAcceptView.vue to use `$getActiveIdentity()` (completed)
-- [x] Update RecentOffersToUserView.vue to use `$getActiveIdentity()` (completed)
-- [x] Update NewEditProjectView.vue to use `$getActiveIdentity()` (completed)
-- [x] Update GiftedDetailsView.vue to use `$getActiveIdentity()` (completed)
-- [x] Update IdentitySwitcherView.vue to use `$getActiveIdentity()` (completed)
-- [x] Update ContactQRScanFullView.vue to use `$getActiveIdentity()` (completed)
-- [x] Update NewActivityView.vue to use `$getActiveIdentity()` (completed)
-- [x] Update ContactImportView.vue to use `$getActiveIdentity()` (completed)
-- [x] Update ProjectViewView.vue to use `$getActiveIdentity()` (completed)
-- [x] Update ClaimCertificateView.vue to use `$getActiveIdentity()` (completed)
-- [x] Update ContactGiftingView.vue to use `$getActiveIdentity()` (completed)
-- [x] Update ConfirmGiftView.vue to use `$getActiveIdentity()` (completed)
-- [x] Update RecentOffersToUserProjectsView.vue to use `$getActiveIdentity()` (completed)
-- [x] Update InviteOneView.vue to use `$getActiveIdentity()` (completed)
-- [x] Update AccountViewView.vue to use `$getActiveIdentity()` (completed)
-- [x] All component migrations complete! ✅
-- [ ] Replace `this.activeDid = settings.activeDid` pattern
-- [ ] Test each component individually
-
-**Status**: 23 components successfully migrated. 11 components remaining. API layer ready for systematic updates.
-
-### Phase 4: Testing 🟡 PARTIALLY STARTED
-
-- [x] Test Web platform (verified working)
-- [ ] Test Electron platform
-- [ ] Test iOS platform  
-- [ ] Test Android platform
-- [ ] Test migration rollback scenarios
-- [ ] Test data corruption recovery
-
-## Required Code Changes
-
-### 1. Database Migration ✅ COMPLETE
-
-```typescript
-// Already added to MIGRATIONS array in src/db-sql/migration.ts
-{
-  name: "003_active_did_separate_table",
-  sql: `
-    -- Create new active_identity table with proper constraints
-    CREATE TABLE IF NOT EXISTS active_identity (
-      id INTEGER PRIMARY KEY CHECK (id = 1),
-      activeDid TEXT NOT NULL,
-      lastUpdated TEXT NOT NULL DEFAULT (datetime('now')),
-      FOREIGN KEY (activeDid) REFERENCES accounts(did) ON DELETE CASCADE
-    );
-
-    -- Add performance indexes
-    CREATE INDEX IF NOT EXISTS idx_active_identity_activeDid ON active_identity(activeDid);
-    CREATE UNIQUE INDEX IF NOT EXISTS idx_active_identity_single_record ON active_identity(id);
-
-    -- Insert default record (will be updated during migration)
-    INSERT OR IGNORE INTO active_identity (id, activeDid, lastUpdated) VALUES (1, '', datetime('now'));
-
-    -- MIGRATE EXISTING DATA: Copy activeDid from settings to active_identity
-    -- This prevents data loss when migration runs on existing databases
-    UPDATE active_identity 
-    SET activeDid = (SELECT activeDid FROM settings WHERE id = 1), 
-        lastUpdated = datetime('now')
-    WHERE id = 1 
-    AND EXISTS (SELECT 1 FROM settings WHERE id = 1 AND activeDid IS NOT NULL AND activeDid != '');
-  `,
-},
-```
-
-### 2. $getActiveIdentity() Method ✅ EXISTS
-
-```typescript
-// Already exists in PlatformServiceMixin.ts with correct return type
-async $getActiveIdentity(): Promise<{ activeDid: string }> {
-  try {
-    const result = await this.$dbQuery(
-      "SELECT activeDid FROM active_identity WHERE id = 1"
-    );
-    
-    if (result?.values?.length) {
-      const activeDid = result.values[0][0] as string;
-      
-      // Validate activeDid exists in accounts
-      if (activeDid) {
-        const accountExists = await this.$dbQuery(
-          "SELECT did FROM accounts WHERE did = ?",
-          [activeDid]
-        );
-        
-        if (accountExists?.values?.length) {
-          return { activeDid };
-        } else {
-          // Clear corrupted activeDid
-          await this.$dbExec(
-            "UPDATE active_identity SET activeDid = '', lastUpdated = datetime('now') WHERE id = 1"
-          );
-          return { activeDid: "" };
-        }
-      }
-    }
-    
-    return { activeDid: "" };
-  } catch (error) {
-    logger.error("[PlatformServiceMixin] Error getting active identity:", error);
-    return { activeDid: "" };
-  }
-}
-```
-
-### 3. Update $accountSettings Method
-
-```typescript
-// Update in PlatformServiceMixin.ts
-async $accountSettings(did?: string, defaults: Settings = {}): Promise<Settings> {
-  try {
-    // Get settings without activeDid (unchanged logic)
-    const settings = await this.$getMasterSettings(defaults);
-
-    if (!settings) {
-      return defaults;
-    }
-
-    // Get activeDid from new table (new logic)
-    const activeIdentity = await this.$getActiveIdentity();
-
-    // Return combined result (maintains backward compatibility)
-    return { ...settings, activeDid: activeIdentity.activeDid };
-  } catch (error) {
-    logger.error("[Settings Trace] ❌ Error in $accountSettings:", error);
-    return defaults;
-  }
-}
-```
-
-### 4. Update $updateActiveDid Method
-
-```typescript
-// Update in PlatformServiceMixin.ts
-async $updateActiveDid(newDid: string | null): Promise<boolean> {
-  try {
-    if (newDid === null) {
-      // Clear active identity in both tables
-      await this.$dbExec(
-        "UPDATE active_identity SET activeDid = '', lastUpdated = datetime('now') WHERE id = 1"
-      );
-      
-      // Keep legacy field in sync (backward compatibility)
-      await this.$dbExec(
-        "UPDATE settings SET activeDid = '' WHERE id = ?",
-        [MASTER_SETTINGS_KEY]
-      );
-    } else {
-      // Validate DID exists before setting
-      const accountExists = await this.$dbQuery(
-        "SELECT did FROM accounts WHERE did = ?",
-        [newDid]
-      );
-
-      if (!accountExists?.values?.length) {
-        logger.error(`[PlatformServiceMixin] Cannot set activeDid to non-existent DID: ${newDid}`);
-        return false;
-      }
-
-      // Update active identity in new table
-      await this.$dbExec(
-        "UPDATE active_identity SET activeDid = ?, lastUpdated = datetime('now') WHERE id = 1",
-        [newDid]
-      );
-      
-      // Keep legacy field in sync (backward compatibility)
-      await this.$dbExec(
-        "UPDATE settings SET activeDid = ? WHERE id = ?",
-        [newDid, MASTER_SETTINGS_KEY]
-      );
-    }
-
-    // Update internal tracking
-    await this._updateInternalActiveDid(newDid);
-    return true;
-  } catch (error) {
-    logger.error("[PlatformServiceMixin] Error updating activeDid:", error);
-    return false;
-  }
-}
-```
-
-### 5. Component Updates Required
-
-**35 components need this pattern change:**
-
-```typescript
-// CURRENT PATTERN (replace in all components):
-this.activeDid = settings.activeDid || "";
-
-// NEW PATTERN (use in all components):
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const activeIdentity = await (this as any).$getActiveIdentity();
-this.activeDid = activeIdentity.activeDid || "";
-```
-
-**Components requiring updates:**
-
-#### Views (28 components)
-- `src/views/DIDView.vue` (line 378)
-- `src/views/TestView.vue` (line 654)
-- `src/views/ContactAmountsView.vue` (line 226)
-- `src/views/HomeView.vue` (line 517)
-- `src/views/UserProfileView.vue` (line 185)
-- `src/views/ClaimView.vue` (line 730)
-- `src/views/OfferDetailsView.vue` (line 435)
-- `src/views/QuickActionBvcEndView.vue` (line 229)
-- `src/views/SharedPhotoView.vue` (line 178)
-- `src/views/ClaimReportCertificateView.vue` (line 56)
-- `src/views/ProjectsView.vue` (line 393)
-- `src/views/ClaimAddRawView.vue` (line 114)
-- `src/views/ContactQRScanShowView.vue` (line 288)
-- `src/views/InviteOneAcceptView.vue` (line 122)
-- `src/views/RecentOffersToUserView.vue` (line 118)
-- `src/views/NewEditProjectView.vue` (line 380)
-- `src/views/GiftedDetailsView.vue` (line 443)
-- `src/views/ProjectViewView.vue` (line 782)
-- `src/views/ContactsView.vue` (line 296)
-- `src/views/ContactQRScanFullView.vue` (line 267)
-- `src/views/NewActivityView.vue` (line 204)
-- `src/views/ClaimCertificateView.vue` (line 42)
-- `src/views/ContactGiftingView.vue` (line 166)
-- `src/views/RecentOffersToUserProjectsView.vue` (line 126)
-- `src/views/InviteOneView.vue` (line 285)
-- `src/views/IdentitySwitcherView.vue` (line 202)
-- `src/views/AccountViewView.vue` (line 1052)
-- `src/views/ConfirmGiftView.vue` (line 549)
-- `src/views/ContactImportView.vue` (line 342)
-
-#### Components (7 components)
-- `src/components/OfferDialog.vue` (line 177)
-- `src/components/PhotoDialog.vue` (line 270)
-- `src/components/GiftedDialog.vue` (line 223)
-- `src/components/MembersList.vue` (line 234)
-- `src/components/OnboardingDialog.vue` (line 272)
-- `src/components/ImageMethodDialog.vue` (line 502)
-- `src/components/FeedFilters.vue` (line 89)
-
-**Implementation Strategy:**
-
-1. **Systematic Replacement**: Use grep search to find all instances
-2. **Pattern Matching**: Replace `this.activeDid = settings.activeDid` with new pattern
-3. **Error Handling**: Ensure proper error handling in each component
-4. **Testing**: Test each component individually after update
-
-**Example Component Update:**
-
-```typescript
-// BEFORE (in any component):
-private async initializeSettings() {
-  const settings = await this.$accountSettings();
-  this.activeDid = settings.activeDid || "";
-  this.apiServer = settings.apiServer || "";
-}
-
-// AFTER (in any component):
-private async initializeSettings() {
-  const settings = await this.$accountSettings();
-  const activeIdentity = await this.$getActiveIdentity();
-  this.activeDid = activeIdentity.activeDid || "";
-  this.apiServer = settings.apiServer || "";
-}
-```
-
-**Alternative Pattern (if settings still needed):**
-
-```typescript
-// If component needs both settings and activeDid:
-private async initializeSettings() {
-  const settings = await this.$accountSettings();
-  const activeIdentity = await this.$getActiveIdentity();
-  
-  // Use activeDid from new table
-  this.activeDid = activeIdentity.activeDid || "";
-  
-  // Use other settings from settings table
-  this.apiServer = settings.apiServer || "";
-  this.partnerApiServer = settings.partnerApiServer || "";
-  // ... other settings
-}
-```
-
-## What Works (Evidence)
-
-- ✅ **Migration code exists** in MIGRATIONS array
-  - **Time**: 2025-09-03T06:40:54Z
-  - **Evidence**: Console log shows successful execution of migrations 003 and 004
-  - **Verify at**: `🎉 [Migration] Successfully applied: 003_active_did_separate_table`
-
-- ✅ **$getActiveIdentity() method exists** in PlatformServiceMixin
-  - **Time**: 2025-09-03T06:40:54Z
-  - **Evidence**: Console log shows method calls returning correct data format
-  - **Verify at**: `[PlatformServiceMixin] $getActiveIdentity(): activeDid resolved {activeDid: 'did:ethr:0xAe6ea6A4c20aDeE7B1c7Ee1fEFAa6fBe0986a671'}`
-
-- ✅ **Database migration infrastructure** exists and mature
-  - **Time**: 2025-09-03T06:40:54Z
-  - **Evidence**: Console log shows 6 migrations applied successfully
-  - **Verify at**: `🎉 [Migration] Migration process complete! Summary: 6 applied, 0 skipped`
-
-- ✅ **$accountSettings() updated** with minimal safe change
-  - **Time**: 2025-09-03T06:40:54Z
-  - **Evidence**: Console log shows method returning activeDid from new table
-  - **Status**: Maintains all existing complex logic while using new table as primary source
-
-- ✅ **$updateActiveDid() dual-write implemented**
-  - **Time**: 2025-09-03T06:40:54Z
-  - **Evidence**: Method exists and ready for testing
-  - **Status**: Uses MASTER_SETTINGS_KEY constant for proper settings table targeting
-
-- ✅ **HomeView.vue successfully migrated** to use new API
-  - **Time**: 2025-09-03T06:40:54Z
-  - **Evidence**: Console log shows `[HomeView] ActiveDid migration - using new API`
-  - **Status**: Component successfully uses `$getActiveIdentity()` instead of `settings.activeDid`
-
-- ✅ **Clean architecture implemented** - active_identity is now single source of truth
-  - **Time**: 2025-09-03T06:40:54Z
-  - **Evidence**: Console log shows consistent activeDid values from active_identity table
-  - **Status**: active_identity table is the only source for activeDid, settings table handles app config only
-
-- ✅ **Schema cleanup** - activeDid column removed from settings table
-  - **Time**: 2025-09-03T06:40:54Z
-  - **Evidence**: Console log shows successful execution of migration 004
-  - **Status**: Complete separation of concerns - no more confusing dual-purpose columns
-
-## What Doesn't (Evidence & Hypotheses)
-
-- ❌ **11 components still use old pattern** `this.activeDid = settings.activeDid`
-  - **Time**: 2025-09-03T06:40:54Z
-  - **Evidence**: Grep search found 11 remaining instances across views and components
-  - **Hypothesis**: Components need updates but API layer is now ready
-  - **Next probe**: Systematic component updates can now proceed
-
-## Risks, Limits, Assumptions
-
-- **Data Loss Risk**: Migration failure could lose activeDid values
-- **Breaking Changes**: API updates required in PlatformServiceMixin
-- **Testing Overhead**: All platforms must be tested with new structure
-- **Component Updates**: 35+ components need individual updates and testing
-
-## Rollback Strategy
-
-### Schema Rollback
-```sql
--- If migration fails, restore original schema
-DROP TABLE IF EXISTS active_identity;
-```
-
-### Data Rollback
-```typescript
-// Rollback function to restore activeDid to settings table
-async function rollbackActiveDidMigration(): Promise<boolean> {
-  try {
-    const activeIdentityResult = await dbQuery(
-      "SELECT activeDid FROM active_identity WHERE id = 1"
-    );
-    
-    if (activeIdentityResult?.values?.length) {
-      const activeDid = activeIdentityResult.values[0][0] as string;
-      
-      await dbExec(
-        "UPDATE settings SET activeDid = ? WHERE id = ?",
-        [activeDid, MASTER_SETTINGS_KEY]
-      );
-      
-      return true;
-    }
-    
-    return false;
-  } catch (error) {
-    logger.error("[Rollback] Failed to restore activeDid:", error);
-    return false;
-  }
-}
-```
-
-## Next Steps
-
-| Task | Exit Criteria | Priority |
-|------|---------------|----------|
-| **Update $accountSettings() method** | Method calls $getActiveIdentity and combines with settings | ✅ COMPLETE |
-| **Implement $updateActiveDid() dual-write** | Method updates both active_identity and settings tables | ✅ COMPLETE |
-| **Start application in browser** | Application loads and initializes IndexedDB database | ✅ COMPLETE |
-| **Inspect IndexedDB via DevTools** | Verify active_identity table exists and contains data | ✅ COMPLETE |
-| **Update first component** | One component successfully uses new API pattern | ✅ COMPLETE (HomeView.vue) |
-| **Systematic component updates** | All 26 remaining components use new API pattern (with test:web after each) | 🟢 HIGH |
-| **Test all platforms** | Web, Electron, iOS, Android platforms verified working | 🟡 MEDIUM |
-| **Performance optimization** | Reduce excessive $getActiveIdentity() calls | 🟡 MEDIUM |
-
-**Critical Blocker**: API layer complete. Ready to proceed with component updates.
-
-## Migration Execution Rule
-
-### **One Component + Test Pattern**
-**Rule**: After migrating each component, run `npm run test:web` and `npm run lint-fix` to verify the change doesn't break existing functionality and meets code standards.
-
-**Workflow**:
-1. **Migrate one component** - Update to use `$getActiveIdentity()` pattern
-2. **Run lint-fix** - Ensure code meets project standards
-3. **Run test:web** - Verify no regressions introduced
-4. **Commit if passing** - Only commit after tests and linting pass
-5. **Repeat** - Move to next component
-
-**Benefits**:
-- Catch issues immediately after each change
-- Maintain code quality throughout migration
-- Easy rollback if problems arise
-- Systematic progress tracking
-
-**Exit Criteria**: All 26 components migrated with passing tests
-
-## Performance Observations
-
-### Excessive API Calls Detected
-The console log shows `$getActiveIdentity()` being called very frequently (multiple times per component mount). This suggests:
-- Components may be calling the API more than necessary
-- Could be optimized for better performance
-- Not a blocker, but worth monitoring during component updates
-
-### Recommended Optimization Strategy
-1. **Audit component lifecycle** - Ensure API calls happen only when needed
-2. **Implement caching** - Consider short-term caching of activeDid values
-3. **Batch updates** - Group related API calls where possible
-4. **Monitor performance** - Track API call frequency during component updates
-
-## Future Improvement: MASTER_SETTINGS_KEY Elimination
-
-**Not critical for this task** but logged for future improvement:
-
-```typescript
-// Current: WHERE id = "1" 
-// Future: WHERE accountDid IS NULL
-
-// This eliminates the confusing concept of "master" settings
-// and uses a cleaner pattern for default settings
-```
-
-## References
-
-- [Database Migration Guide](./database-migration-guide.md)
-- [Dexie to SQLite Mapping](./dexie-to-sqlite-mapping.md)
-- [PlatformServiceMixin Documentation](./component-communication-guide.md)
-
-## Competence Hooks
-
-- *Why this works*: Separates concerns between identity selection and user preferences, prevents data corruption with foreign key constraints
-- *Common pitfalls*: Method signature mismatches, forgetting dual-write pattern, not testing database state
-- *Next skill unlock*: Systematic API updates with backward compatibility
-- *Teach-back*: Explain why dual-write pattern is needed during migration transition
-
-## Collaboration Hooks
-
-- **Reviewers**: Database team, PlatformServiceMixin maintainers, QA team
-- **Sign-off checklist**:
-  - [ ] Migration script integrated with existing MIGRATIONS array
-  - [x] $getActiveIdentity() method returns correct type
-  - [x] $accountSettings() method updated to use new API (minimal safe change)
-  - [x] $updateActiveDid() method implements dual-write pattern
-  - [ ] All 35+ components updated to use new API
-  - [ ] Rollback procedures validated
-  - [ ] All platforms tested
-  - [ ] All stakeholders approve deployment timeline

doc/migration-004-complexity-resolution-plan.md

@@ -1,198 +0,0 @@
-# Migration 004 Complexity Resolution Plan
-
-**Document Version**: 1.3  
-**Author**: Matthew Raymer  
-**Date**: 2025-01-27  
-**Status**: Implementation Phase - Phase 1 Complete  
-
-## Problem Summary
-
-The current migration 004 implementation has become overly complex with multiple critical issues that create serious risks for data integrity and application performance.
-
-### Four Most Critical Issues
-
-1. **Duplicate SQL Definitions**: Migration 004 SQL exists in three separate locations (main sql field, statements array, recovery logic), making it impossible to ensure all users run identical statements.
-
-2. **Non-Atomic Execution**: Individual statements continue executing even if earlier statements fail, causing partial data migration and potential data loss.
-
-3. **Incorrect Database Result Handling**: Code assumes PlatformService abstraction format when called directly from raw database services, causing runtime errors.
-
-4. **Duplicate Execution Risk**: Recovery logic could re-run statements that already executed successfully, leading to data corruption.
-
-## Resolution Principles
-
-**Guiding Principle**: All migrations must execute from a single SQL source in the MIGRATIONS array, as one atomic statement.
-
-- **Single Source of Truth**: Only one place defines migration SQL
-- **Atomic Operations**: Migration succeeds completely or fails completely  
-- **Database Agnostic**: Result handling works with any database service
-- **Minimal Overhead**: No unnecessary logging or validation
-- **Simple Recovery**: If migration fails, it should be obvious and fixable
-
-## Implementation Phases
-
-### Phase 1: Simplify Migration Definition ✅ COMPLETED
-**Objective**: Establish single source of truth for migration SQL
-
-**Actions**:
-- ✅ Remove `statements` array from migration 004 definition
-- ✅ Keep only the single `sql` field as the authoritative source
-- ✅ Remove all recovery logic that duplicates SQL statements
-- ✅ Ensure migration SQL is self-contained and atomic
-
-**Deliverables**:
-- ✅ Clean migration definition with single SQL source
-- ✅ Removed duplicate SQL definitions
-- ✅ Eliminated recovery logic complexity
-
-### Phase 2: Fix Database Result Handling ✅ COMPLETED
-**Objective**: Make result handling database-agnostic
-
-**Actions**:
-- ✅ Remove DatabaseResult type assumptions from migration code
-- ✅ Implement proper result extraction based on actual database service
-- ✅ Use the `extractMigrationNames` function pattern consistently
-- ✅ Make result handling work with any database service implementation
-- ✅ Normalize results from AbsurdSqlDatabaseService and CapacitorPlatformService into shared internal format
-
-**Deliverables**:
-- ✅ Database-agnostic result handling
-- ✅ Consistent result extraction across all database services
-- ✅ Removed type casting assumptions
-- ✅ Shared internal result format for all database services
-
-### Phase 3: Ensure Atomic Execution ✅ COMPLETED
-**Objective**: Guarantee migration succeeds completely or fails completely
-
-**Actions**:
-- ✅ Modify migration service to execute single SQL block only
-- ✅ Remove individual statement execution logic
-- ✅ Implement proper error handling that prevents partial execution
-- ✅ Ensure migration tracking is accurate
-- ✅ Provide explicit rollback/restore instructions for migration failures
-- ✅ Ensure migration logs indicate failure cause and required operator action
-
-**Deliverables**:
-- ✅ Atomic migration execution
-- ✅ Proper error handling
-- ✅ Accurate migration tracking
-- ✅ Clear recovery procedures
-
-### Phase 4: Remove Excessive Debugging ✅ COMPLETED
-**Objective**: Eliminate performance overhead from debugging code
-
-**Actions**:
-- ✅ Remove detailed logging that slows startup
-- ✅ Keep only essential error logging
-- ✅ Remove complex validation logic that runs on every startup
-- ✅ Move debugging code to test page or development-only mode
-
-**Deliverables**:
-- ✅ Faster application startup
-- ✅ Cleaner production code
-- ✅ Debugging available only when needed
-
-### Phase 5: Testing & Validation
-**Objective**: Ensure simplified migration works correctly
-
-**Actions**:
-- Test migration execution with different database services
-- Verify no duplicate execution occurs
-- Confirm proper error handling
-- Validate data integrity after migration
-- Test rollback/restore scenarios to confirm system recovery paths
-- Test edge cases: empty database, partially migrated database, already-migrated database
-- Test concurrency scenarios (multiple app instances/migrations starting simultaneously)
-- Test cross-platform/device differences (SQLite, AbsurdSQL, Capacitor DB adapters)
-
-**Deliverables**:
-- Working migration system
-- No duplicate execution
-- Proper error handling
-- Data integrity maintained
-- Validated recovery procedures
-- Edge case coverage confirmed
-- Documented test results as artifacts for future regression testing
-
-## Performance & Debugging
-
-**Current Issue**: Excessive logging and validation code runs on every app startup, slowing application performance.
-
-**Solution**: 
-- Debugging/logging is acceptable in development/test environments
-- Production startup must not be slowed by migration debugging
-- Move complex validation to test page or development-only mode
-- Keep only essential error logging for production
-
-## Rollback & Recovery Procedures
-
-### Manual Rollback Steps
-1. **Stop Application**: Ensure no active database connections
-2. **Restore Database**: Use snapshot/backup to restore pre-migration state
-3. **Clear Migration Tracking**: Remove migration 004 entry from migrations table
-4. **Verify State**: Confirm active_identity table is removed and settings.activeDid is restored
-5. **Restart Application**: Test normal operation
-
-### Automated Rollback
-- **Automated Detection**: Migration service detects failure and triggers rollback
-- **Database Restore**: Automated restoration from pre-migration snapshot
-- **Logging**: Detailed rollback logs with failure cause and recovery actions
-- **Validation**: Automated verification of rollback success
-
-### Recovery Validation
-- **Data Integrity Check**: Verify all data is consistent with pre-migration state
-- **Migration Status**: Confirm migration tracking reflects correct state
-- **Application Functionality**: Test core features work correctly
-- **Performance Baseline**: Confirm startup performance matches pre-migration levels
-
-## Files Requiring Changes
-
-### Core Migration Files (Primary Changes)
-- `src/db-sql/migration.ts` - Remove duplicate SQL definitions, fix DatabaseResult usage, remove recovery logic
-- `src/services/migrationService.ts` - Remove individual statement execution, ensure atomic execution
-
-### Database Service Files (Result Handling Fixes)
-- `src/services/AbsurdSqlDatabaseService.ts` - Fix result extraction for migration queries
-- `src/services/platforms/CapacitorPlatformService.ts` - Fix result extraction for migration queries
-
-**Note**: Verify all file paths match repository reality as part of CI validation.
-
-## Success Criteria
-
-- [ ] Migration 004 SQL defined in single location only
-- [ ] Migration executes atomically (all-or-nothing)
-- [ ] Database result handling works with all database services
-- [ ] No duplicate statement execution possible
-- [ ] Startup time reduced by at least 20% compared to pre-fix baseline (measured via cold app start profiling logs)
-- [ ] Migration tracking is accurate and reliable
-- [ ] Error handling is clear and actionable
-
-## Next Steps
-
-1. **Review and Approve Plan**: Get stakeholder approval for this approach
-2. **Phase 1 Implementation**: Begin with simplifying migration definition
-3. **Testing**: Validate each phase before proceeding
-4. **Assign Migration Owner**: Designate clear owner for future migration reviews
-5. **Create Review Checklist**: Define lightweight checklist (SQL duplication, atomicity, error handling) to prevent recurrence
-
-## Dependencies
-
-- Migration service architecture
-- Database service implementations
-- Testing infrastructure
-- Documentation system
-- Seed datasets or controlled test states for reproducible validation
-- Snapshot/restore utilities for rollback testing
-
-## Lessons Learned
-
-**Process Improvement Note**: This migration complexity highlights the importance of closer review and consolidation of AI-generated code. Uncontrolled proliferation of generated logic leads to fragmentation, review fatigue, and system instability. Future development should prioritize:
-
-- Single source of truth for all critical logic
-- Atomic operations over complex multi-step processes  
-- Regular consolidation and simplification of generated code
-- Clear ownership and review processes for migration logic
-
----
-
-*This document will be updated as the implementation progresses and new insights are gained.*

doc/verification-party-system-plan.md

@@ -1,375 +0,0 @@
-# TimeSafari Identity Verification Party System Plan
-
-## Objectives
-
-* Maintain strict conformity with TimeSafari's existing **DID, contact, and identity management**.
-* Ensure **offline-first reliability** with background sync and retry logic.
-* Provide **minimal, mobile-first UX** with single-tap core actions and QR-driven flows.
-
-## Architecture
-
-* Use a **single atomic migration** (`005_verification_party_system.sql`) following `registerMigration()` + `MIGRATIONS` array pattern.
-* Standardize timestamps (`dateCreated`, `dateVerified`) in **ISO-8601 UTC**.
-* Add `verification_session_logs` for audit trail and debugging.
-
-## Workflow
-
-* **Pre-Party**: Enforce RSVP via DID signing challenge; cache DID QR locally.
-* **In-Party**: Dual-mode verification (Fast Scan + Deep Verify) with **trust presets**.
-* **Post-Party**: Queue verifications for delayed sync; issue signed receipts; auto-create verified contacts.
-
-## Services
-
-* `VerificationPartyService`: Monolithic class aligned with existing service pattern.
-* `DidVerificationService`: Pluggable methods (QR, NFC, manual, photo ID).
-* `TrustNetworkService`: Add caching + **trust decay** unless renewed.
-
-## Security
-
-* Store **hashes of evidence** only (not raw PII).
-* Encrypt data with **per-user derived keys**.
-* Provide **per-verification sharing controls** (private, party-only, global).
-
-## UI/UX
-
-* Single-tap flows for RSVP, scan, verify.
-* Embed **trust level criteria** in UI to reduce inconsistency.
-* Optimize QR scanning and trust graph for **battery savings**.
-* Follow existing **i18n service** for multi-language support.
-
-## Priorities
-
-1. Migration + offline queue
-2. Dual-mode verification UI
-3. Trust graph caching + decay
-4. Privacy-hardened evidence handling
-5. Notification constants + helper integration
-
----
-
-## Database Schema
-
-### Migration 005: Verification Party System
-Add to `src/db-sql/migration.ts` in the `MIGRATIONS` array:
-
-```typescript
-{
-  name: "005_verification_party_system",
-  sql: `
-    -- Migration 005: verification_party_system
-    -- Adds identity verification party functionality
-    
-    -- Enable foreign key constraints for data integrity
-    PRAGMA foreign_keys = ON;
-    
-    -- Create verification_parties table
-    CREATE TABLE IF NOT EXISTS verification_parties (
-      id INTEGER PRIMARY KEY AUTOINCREMENT,
-      partyId TEXT UNIQUE NOT NULL,
-      organizerDid TEXT NOT NULL,
-      name TEXT NOT NULL,
-      description TEXT,
-      location TEXT,
-      scheduledDate TEXT,
-      maxParticipants INTEGER DEFAULT 50,
-      status TEXT DEFAULT 'planned',
-      dateCreated TEXT DEFAULT (datetime('now')),
-      FOREIGN KEY (organizerDid) REFERENCES accounts(did)
-    );
-    
-    -- Create party_participants table
-    CREATE TABLE IF NOT EXISTS party_participants (
-      id INTEGER PRIMARY KEY AUTOINCREMENT,
-      partyId TEXT NOT NULL,
-      participantDid TEXT NOT NULL,
-      status TEXT DEFAULT 'invited',
-      verificationCount INTEGER DEFAULT 0,
-      rsvpDate TEXT,
-      checkInDate TEXT,
-      dateCreated TEXT DEFAULT (datetime('now')),
-      FOREIGN KEY (partyId) REFERENCES verification_parties(partyId),
-      FOREIGN KEY (participantDid) REFERENCES accounts(did)
-    );
-    
-    -- Create did_verifications table
-    CREATE TABLE IF NOT EXISTS did_verifications (
-      id INTEGER PRIMARY KEY AUTOINCREMENT,
-      verifierDid TEXT NOT NULL,
-      verifiedDid TEXT NOT NULL,
-      partyId TEXT,
-      verificationMethod TEXT,
-      verificationNotes TEXT,
-      verificationLevel INTEGER DEFAULT 1,
-      verificationEvidenceHash TEXT,
-      dateVerified TEXT DEFAULT (datetime('now')),
-      FOREIGN KEY (verifierDid) REFERENCES accounts(did),
-      FOREIGN KEY (verifiedDid) REFERENCES accounts(did),
-      FOREIGN KEY (partyId) REFERENCES verification_parties(partyId)
-    );
-    
-    -- Create verification_session_logs table
-    CREATE TABLE IF NOT EXISTS verification_session_logs (
-      id INTEGER PRIMARY KEY AUTOINCREMENT,
-      partyId TEXT NOT NULL,
-      sessionAction TEXT NOT NULL,
-      participantDid TEXT,
-      actionData TEXT,
-      dateCreated TEXT DEFAULT (datetime('now')),
-      FOREIGN KEY (partyId) REFERENCES verification_parties(partyId),
-      FOREIGN KEY (participantDid) REFERENCES accounts(did)
-    );
-    
-    -- Create indexes for performance
-    CREATE INDEX IF NOT EXISTS idx_verification_parties_organizer ON verification_parties(organizerDid);
-    CREATE INDEX IF NOT EXISTS idx_verification_parties_status ON verification_parties(status);
-    CREATE INDEX IF NOT EXISTS idx_party_participants_party ON party_participants(partyId);
-    CREATE INDEX IF NOT EXISTS idx_party_participants_did ON party_participants(participantDid);
-    CREATE INDEX IF NOT EXISTS idx_did_verifications_verifier ON did_verifications(verifierDid);
-    CREATE INDEX IF NOT EXISTS idx_did_verifications_verified ON did_verifications(verifiedDid);
-    CREATE INDEX IF NOT EXISTS idx_did_verifications_party ON did_verifications(partyId);
-    CREATE INDEX IF NOT EXISTS idx_session_logs_party ON verification_session_logs(partyId);
-  `
-}
-```
-
----
-
-## TypeScript Interfaces
-
-### Required Interface Definitions
-Add to `src/interfaces/verification-party.ts`:
-
-```typescript
-/**
- * Verification Party entity interface
- */
-export interface VerificationParty {
-  id: number;
-  partyId: string;
-  organizerDid: string;
-  name: string;
-  description?: string;
-  location?: string;
-  scheduledDate?: string;
-  maxParticipants: number;
-  status: 'planned' | 'active' | 'completed' | 'cancelled';
-  dateCreated: string;
-}
-
-/**
- * Party Participant entity interface
- */
-export interface PartyParticipant {
-  id: number;
-  partyId: string;
-  participantDid: string;
-  status: 'invited' | 'confirmed' | 'attended' | 'verified';
-  verificationCount: number;
-  rsvpDate?: string;
-  checkInDate?: string;
-  dateCreated: string;
-}
-
-/**
- * DID Verification entity interface
- */
-export interface DidVerification {
-  id: number;
-  verifierDid: string;
-  verifiedDid: string;
-  partyId?: string;
-  verificationMethod: 'qr_scan' | 'manual_entry' | 'photo_id' | 'nfc';
-  verificationNotes?: string;
-  verificationLevel: number; // 1-5 trust level
-  verificationEvidenceHash?: string; // Hash of verification evidence
-  dateVerified: string;
-}
-
-/**
- * Verification Session Log entity interface
- */
-export interface VerificationSessionLog {
-  id: number;
-  partyId: string;
-  sessionAction: 'party_started' | 'participant_joined' | 'verification_completed' | 'sync_attempted';
-  participantDid?: string;
-  actionData?: string; // JSON blob of action-specific data
-  dateCreated: string;
-}
-```
-
----
-
-## PlatformServiceMixin Integration
-
-### Required Methods
-Add to `PlatformServiceMixin`:
-
-```typescript
-// Add to PlatformServiceMixin methods
-async $insertVerificationParty(party: Partial<VerificationParty>): Promise<boolean> {
-  return this.$insertEntity('verification_parties', party, [
-    'partyId', 'organizerDid', 'name', 'description', 'location', 
-    'scheduledDate', 'maxParticipants', 'status', 'dateCreated'
-  ]);
-}
-
-async $insertPartyParticipant(participant: Partial<PartyParticipant>): Promise<boolean> {
-  return this.$insertEntity('party_participants', participant, [
-    'partyId', 'participantDid', 'status', 'verificationCount',
-    'rsvpDate', 'checkInDate', 'dateCreated'
-  ]);
-}
-
-async $insertDidVerification(verification: Partial<DidVerification>): Promise<boolean> {
-  return this.$insertEntity('did_verifications', verification, [
-    'verifierDid', 'verifiedDid', 'partyId', 'verificationMethod',
-    'verificationNotes', 'verificationLevel', 'verificationEvidenceHash', 'dateVerified'
-  ]);
-}
-
-async $getVerificationParties(): Promise<VerificationParty[]> {
-  const results = await this.$dbQuery('SELECT * FROM verification_parties ORDER BY dateCreated DESC');
-  return this.$mapResults(results, (row) => ({
-    id: row[0] as number,
-    partyId: row[1] as string,
-    organizerDid: row[2] as string,
-    name: row[3] as string,
-    description: row[4] as string,
-    location: row[5] as string,
-    scheduledDate: row[6] as string,
-    maxParticipants: row[7] as number,
-    status: row[8] as VerificationParty['status'],
-    dateCreated: row[9] as string,
-  }));
-}
-
-async $getPartyParticipants(partyId: string): Promise<PartyParticipant[]> {
-  const results = await this.$dbQuery(
-    'SELECT * FROM party_participants WHERE partyId = ? ORDER BY dateCreated DESC',
-    [partyId]
-  );
-  return this.$mapResults(results, (row) => ({
-    id: row[0] as number,
-    partyId: row[1] as string,
-    participantDid: row[2] as string,
-    status: row[3] as PartyParticipant['status'],
-    verificationCount: row[4] as number,
-    rsvpDate: row[5] as string,
-    checkInDate: row[6] as string,
-    dateCreated: row[7] as string,
-  }));
-}
-```
-
----
-
-## Notification Constants
-
-### Required Notification Constants
-Add to `src/constants/notifications.ts`:
-
-```typescript
-// Used in: VerificationPartyCreateView.vue (createParty method)
-export const NOTIFY_PARTY_CREATED = {
-  title: "Verification Party Created",
-  message: "Your verification party has been created successfully."
-};
-
-// Used in: VerificationPartyJoinView.vue (joinParty method)
-export const NOTIFY_PARTY_JOINED = {
-  title: "Party Joined",
-  message: "You have successfully joined the verification party."
-};
-
-// Used in: VerificationPartyActiveView.vue (submitManualVerification method)
-export const NOTIFY_VERIFICATION_COMPLETED = {
-  title: "Identity Verified",
-  message: "You have successfully verified this person's identity."
-};
-
-// Used in: VerificationPartyService.ts (syncVerifications method)
-export const NOTIFY_VERIFICATION_SYNCED = {
-  title: "Verifications Synced",
-  message: "Your verification data has been synchronized successfully."
-};
-
-// Used in: VerificationPartyActiveView.vue (error handling)
-export const NOTIFY_VERIFICATION_FAILED = {
-  title: "Verification Failed",
-  message: "There was an error completing the verification. Please try again."
-};
-```
-
-### Notification Helper Integration
-Use existing `createNotifyHelpers()` pattern in components:
-
-```typescript
-// In VerificationPartyCreateView.vue
-const { success, error } = createNotifyHelpers(this.$notify);
-
-// Usage
-success("Party created successfully!");
-error("Failed to create party. Please try again.");
-```
-
----
-
-## Component Implementation Pattern
-
-### VerificationPartyCreateView.vue Structure
-```typescript
-@Component({
-  name: "VerificationPartyCreateView",
-  components: {
-    QuickNav,
-    TopMessage,
-    EntityIcon,
-  },
-  mixins: [PlatformServiceMixin],
-})
-export default class VerificationPartyCreateView extends Vue {
-  // Use PlatformServiceMixin methods
-  async createParty(): Promise<void> {
-    const partyData: Partial<VerificationParty> = {
-      partyId: `party_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
-      organizerDid: (await this.$getActiveIdentity()).activeDid,
-      name: this.partyForm.name,
-      description: this.partyForm.description,
-      location: this.partyForm.location,
-      scheduledDate: this.partyForm.scheduledDate,
-      maxParticipants: this.partyForm.maxParticipants,
-      status: 'planned',
-      dateCreated: new Date().toISOString(),
-    };
-    
-    const success = await this.$insertVerificationParty(partyData);
-    if (success) {
-      this.$notify(NOTIFY_PARTY_CREATED);
-      this.$router.push(`/verification-party/${partyData.partyId}`);
-    } else {
-      this.$notify(NOTIFY_VERIFICATION_FAILED);
-    }
-  }
-}
-```
-
----
-
-## Architecture Conformity Checklist
-
-### ✅ **100% CONFORMANT PATTERNS**
-- **Migration Structure**: ✅ Follows existing `registerMigration()` and `MIGRATIONS` array pattern
-- **Database Schema**: ✅ Uses `INTEGER PRIMARY KEY AUTOINCREMENT` and `camelCase` field naming
-- **Component Architecture**: ✅ Integrates `@Component` decorator and `PlatformServiceMixin`
-- **Service Pattern**: ✅ Single monolithic service class following TimeSafari conventions
-- **Notification System**: ✅ Uses existing `NOTIFY_*` constants and `createNotifyHelpers()`
-- **UI Components**: ✅ Leverages existing `QuickNav`, `TopMessage`, `EntityIcon` components
-- **TypeScript Interfaces**: ✅ Proper interface definitions following existing patterns
-- **PlatformServiceMixin Integration**: ✅ Uses existing `$insertEntity()` and `$mapResults()` methods
-- **Database Operations**: ✅ Follows existing `$dbQuery()`, `$dbExec()` patterns
-- **Error Handling**: ✅ Uses existing logger and error handling patterns
-
-### 📊 **FINAL CONFORMITY SCORE: 100%**
-
-The verification party system plan now achieves complete conformity with TimeSafari's existing architecture patterns, naming conventions, and integration approaches.

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>

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "timesafari",
-  "version": "1.1.0-beta",
+  "version": "1.1.1-beta",
   "description": "Time Safari Application",
   "author": {
     "name": "Time Safari Team"
@@ -106,7 +106,7 @@
     "guard": "bash ./scripts/build-arch-guard.sh",
     "guard:test": "bash ./scripts/build-arch-guard.sh --staged",
     "guard:setup": "npm run prepare && echo '✅ Build Architecture Guard is now active!'",
-    "clean:android": "./scripts/clean-android.sh",
+    "clean:android": "./scripts/uninstall-android.sh",
     "clean:ios": "rm -rf ios/App/build ios/App/Pods ios/App/output ios/App/App/public ios/DerivedData ios/capacitor-cordova-ios-plugins ios/App/App/capacitor.config.json ios/App/App/config.xml || true",
     "clean:electron": "./scripts/build-electron.sh --clean",
     "clean:all": "npm run clean:ios && npm run clean:android && npm run clean:electron",
@@ -136,7 +136,6 @@
     "*.{js,ts,vue,css,json,yml,yaml}": "eslint --fix || true",
     "*.{md,markdown,mdc}": "markdownlint-cli2 --fix"
   },
-
   "dependencies": {
     "@capacitor-community/electron": "^5.0.1",
     "@capacitor-community/sqlite": "6.0.2",
@@ -157,6 +156,7 @@
     "@ethersproject/hdnode": "^5.7.0",
     "@ethersproject/wallet": "^5.8.0",
     "@fortawesome/fontawesome-svg-core": "^6.5.1",
+    "@fortawesome/free-regular-svg-icons": "^6.7.2",
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/vue-fontawesome": "^3.0.6",
     "@jlongster/sql.js": "^1.6.7",
@@ -220,6 +220,7 @@
     "vue": "3.5.13",
     "vue-axios": "^3.5.2",
     "vue-facing-decorator": "3.0.4",
+    "vue-markdown-render": "^2.2.1",
     "vue-picture-cropper": "^0.7.0",
     "vue-qrcode-reader": "^5.5.3",
     "vue-router": "^4.5.0",
@@ -236,6 +237,7 @@
     "@types/js-yaml": "^4.0.9",
     "@types/leaflet": "^1.9.8",
     "@types/luxon": "^3.4.2",
+    "@types/markdown-it": "^14.1.2",
     "@types/node": "^20.14.11",
     "@types/node-fetch": "^2.6.12",
     "@types/ramda": "^0.29.11",

scripts/build-android.sh

@@ -22,6 +22,7 @@
 #   --sync                  Sync Capacitor only
 #   --assets                Generate assets only
 #   --deploy                Deploy APK to connected device
+#   --uninstall             Uninstall app from connected device
 #   -h, --help             Show this help message
 #   -v, --verbose          Enable verbose logging
 #
@@ -196,6 +197,7 @@ SYNC_ONLY=false
 ASSETS_ONLY=false
 DEPLOY_APP=false
 AUTO_RUN=false
+UNINSTALL=false
 CUSTOM_API_IP=""
 
 # Function to parse Android-specific arguments
@@ -246,6 +248,9 @@ parse_android_args() {
             --auto-run)
                 AUTO_RUN=true
                 ;;
+            --uninstall)
+                UNINSTALL=true
+                ;;
             --api-ip)
                 if [ $((i + 1)) -lt ${#args[@]} ]; then
                     CUSTOM_API_IP="${args[$((i + 1))]}"
@@ -291,6 +296,7 @@ print_android_usage() {
     echo "  --assets                Generate assets only"
     echo "  --deploy                Deploy APK to connected device"
     echo "  --auto-run              Auto-run app after build"
+    echo "  --uninstall             Uninstall app from connected device"
     echo "  --api-ip <ip>          Custom IP address for claim API (defaults to 10.0.2.2)"
     echo ""
     echo "Common Options:"
@@ -305,6 +311,7 @@ print_android_usage() {
     echo "  $0 --clean             # Clean only"
     echo "  $0 --sync              # Sync only"
     echo "  $0 --deploy            # Build and deploy to device"
+    echo "  $0 --uninstall         # Uninstall app from device"
     echo "  $0 --dev                    # Dev build with default 10.0.2.2"
     echo "  $0 --dev --api-ip 192.168.1.100  # Dev build with custom API IP"
     echo ""
@@ -351,8 +358,18 @@ fi
 # Setup application directories
 setup_app_directories
 
-# Load environment from .env file if it exists
-load_env_file ".env"
+# Load environment-specific .env file if it exists
+env_file=".env.$BUILD_MODE"
+if [ -f "$env_file" ]; then
+    load_env_file "$env_file"
+else
+    log_debug "No $env_file file found, using default environment"
+fi
+
+# Load .env file if it exists (fallback)
+if [ -f ".env" ]; then
+    load_env_file ".env"
+fi
 
 # Handle clean-only mode
 if [ "$CLEAN_ONLY" = true ]; then
@@ -407,8 +424,13 @@ safe_execute "Validating asset configuration" "npm run assets:validate" || {
     log_info "If you encounter build failures, please run 'npm install' first to ensure all dependencies are available."
 }
 
-# Step 2: Clean Android app
-safe_execute "Cleaning Android app" "npm run clean:android" || exit 1
+# Step 2: Uninstall Android app
+if [ "$UNINSTALL" = true ]; then
+    log_info "Uninstall: uninstalling app from device"
+    safe_execute "Uninstalling Android app" "./scripts/uninstall-android.sh" || exit 1
+    log_success "Uninstall completed successfully!"
+    exit 0
+fi
 
 # Step 3: Clean dist directory
 log_info "Cleaning dist directory..."

scripts/build-electron.sh

@@ -341,7 +341,19 @@ main_electron_build() {
     # Setup environment
     setup_build_env "electron" "$BUILD_MODE"
     setup_app_directories
-    load_env_file ".env"
+    
+    # Load environment-specific .env file if it exists
+    env_file=".env.$BUILD_MODE"
+    if [ -f "$env_file" ]; then
+        load_env_file "$env_file"
+    else
+        log_debug "No $env_file file found, using default environment"
+    fi
+    
+    # Load .env file if it exists (fallback)
+    if [ -f ".env" ]; then
+        load_env_file ".env"
+    fi
     
     # Step 1: Clean Electron build artifacts
     clean_electron_artifacts

scripts/build-ios.sh

@@ -324,8 +324,18 @@ fi
 # Setup application directories
 setup_app_directories
 
-# Load environment from .env file if it exists
-load_env_file ".env"
+# Load environment-specific .env file if it exists
+env_file=".env.$BUILD_MODE"
+if [ -f "$env_file" ]; then
+    load_env_file "$env_file"
+else
+    log_debug "No $env_file file found, using default environment"
+fi
+
+# Load .env file if it exists (fallback)
+if [ -f ".env" ]; then
+    load_env_file ".env"
+fi
 
 # Validate iOS environment
 validate_ios_environment

scripts/uninstall-android.sh

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

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;
+	}
 }

src/components/ActivityListItem.vue

@@ -78,9 +78,15 @@
       </div>
 
       <!-- Description -->
-      <p class="font-medium">
-        <a class="cursor-pointer" @click="emitLoadClaim(record.jwtId)">
-          {{ description }}
+      <p class="font-medium overflow-hidden">
+        <a
+          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)}`;
   }

src/components/ContactListItem.vue

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

src/components/DataExportSection.vue

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

src/components/ImageMethodDialog.vue

@@ -293,7 +293,7 @@ const inputImageFileNameRef = ref<Blob>();
 export default class ImageMethodDialog extends Vue {
   $notify!: NotifyFunction;
   $router!: Router;
-  notify = createNotifyHelpers(this.$notify);
+  notify!: ReturnType<typeof createNotifyHelpers>;
 
   /** Active DID for user authentication */
   activeDid = "";
@@ -498,6 +498,9 @@ export default class ImageMethodDialog extends Vue {
    * @throws {Error} When settings retrieval fails
    */
   async mounted() {
+    // Initialize notification helpers
+    this.notify = createNotifyHelpers(this.$notify);
+
     try {
       // Get activeDid from active_identity table (single source of truth)
       // eslint-disable-next-line @typescript-eslint/no-explicit-any

src/components/MembersList.vue

@@ -11,7 +11,7 @@
     <!-- Members List -->
 
     <div v-else>
-      <div class="text-center text-red-600 py-4">
+      <div class="text-center text-red-600 my-4">
         {{ decryptionErrorMessage() }}
       </div>
 
@@ -23,131 +23,160 @@
         to set it.
       </div>
 
-      <div>
-        <span
+      <ul class="list-disc text-sm ps-4 space-y-2 mb-4">
+        <li
           v-if="membersToShow().length > 0 && showOrganizerTools && isOrganizer"
-          class="inline-flex items-center flex-wrap"
         >
-          <span class="inline-flex items-center">
-            &bull; Click
-            <span
-              class="mx-2 min-w-[24px] min-h-[24px] w-6 h-6 flex items-center justify-center rounded-full bg-blue-100 text-blue-600"
-            >
-              <font-awesome icon="plus" class="text-sm" />
-            </span>
-            /
-            <span
-              class="mx-2 min-w-[24px] min-h-[24px] w-6 h-6 flex items-center justify-center rounded-full bg-blue-100 text-blue-600"
-            >
-              <font-awesome icon="minus" class="text-sm" />
-            </span>
-            to add/remove them to/from the meeting.
-          </span>
-        </span>
-      </div>
-      <div>
-        <span
-          v-if="membersToShow().length > 0"
-          class="inline-flex items-center"
-        >
-          &bull; Click
-          <span
-            class="mx-2 w-8 h-8 flex items-center justify-center rounded-full bg-green-100 text-green-600"
-          >
-            <font-awesome icon="circle-user" class="text-xl" />
-          </span>
+          Click
+          <font-awesome icon="circle-plus" class="text-blue-500 text-sm" />
+          /
+          <font-awesome icon="circle-minus" class="text-rose-500 text-sm" />
+          to add/remove them to/from the meeting.
+        </li>
+        <li v-if="membersToShow().length > 0">
+          Click
+          <font-awesome icon="circle-user" class="text-green-600 text-sm" />
           to add them to your contacts.
-        </span>
-      </div>
+        </li>
+      </ul>
 
-      <div class="flex justify-center">
+      <div class="flex justify-between">
         <!-- 
         always have at least one refresh button even without members in case the organizer 
          changes the password 
          -->
         <button
-          class="btn-action-refresh"
-          title="Refresh members list"
-          @click="fetchMembers"
+          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="manualRefresh"
         >
           <font-awesome icon="rotate" :class="{ 'fa-spin': isLoading }" />
+          Refresh
+          <span class="text-xs">({{ countdownTimer }}s)</span>
+        </button>
+
+        <button
+          v-if="getPendingMembersCount() > 0"
+          class="text-sm bg-gradient-to-b from-blue-100 to-blue-200 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.2)] text-blue-800 px-3 py-1.5 rounded-md"
+          @click="showAdmitAllPendingDialog"
+        >
+          <font-awesome icon="circle-plus" class="text-blue-500" />
+          Admit Pending
         </button>
       </div>
-      <div
-        v-for="member in membersToShow()"
-        :key="member.member.memberId"
-        class="mt-2 p-4 bg-gray-50 rounded-lg"
+      <ul
+        v-if="membersToShow().length > 0"
+        class="border-t border-slate-300 my-2"
       >
-        <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)"
+        <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,
+            },
+            { '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 },
+                ]"
               >
-                <font-awesome icon="circle-user" class="text-xl" />
-              </button>
+                <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"
+                  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>
-            <button
-              v-if="member.did !== activeDid"
-              class="btn-info-contact"
-              title="Contact info"
-              @click="
-                informAboutAddingContact(
-                  getContactFor(member.did) !== undefined,
-                )
-              "
-            >
-              <font-awesome icon="circle-info" class="text-base" />
-            </button>
-          </div>
-          <div class="flex">
             <span
               v-if="
                 showOrganizerTools && isOrganizer && member.did !== activeDid
               "
-              class="flex items-center"
+              class="flex items-center gap-1.5"
             >
               <button
-                class="btn-admission"
+                :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 ? 'minus' : 'plus'"
-                  class="text-sm"
+                  :icon="
+                    member.member.admitted ? 'circle-minus' : 'circle-plus'
+                  "
                 />
               </button>
+
               <button
                 class="btn-info-admission"
-                title="Admission info"
+                title="Admission Info"
                 @click="informAboutAdmission()"
               >
-                <font-awesome icon="circle-info" class="text-base" />
+                <font-awesome icon="circle-info" />
               </button>
             </span>
           </div>
-        </div>
-        <p class="text-sm text-gray-600 truncate">
-          {{ member.did }}
-        </p>
-      </div>
-      <div v-if="membersToShow().length > 0" class="flex justify-center mt-4">
+          <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="btn-action-refresh"
-          title="Refresh members list"
-          @click="fetchMembers"
+          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="manualRefresh"
         >
           <font-awesome icon="rotate" :class="{ 'fa-spin': isLoading }" />
+          Refresh
+          <span class="text-xs">({{ countdownTimer }}s)</span>
         </button>
       </div>
 
@@ -156,6 +185,15 @@
       </p>
     </div>
   </div>
+
+  <!-- Set Visibility Dialog Component -->
+  <SetBulkVisibilityDialog
+    :visible="showSetVisibilityDialog"
+    :members-data="visibilityDialogMembers"
+    :active-did="activeDid"
+    :api-server="apiServer"
+    @close="closeSetVisibilityDialog"
+  />
 </template>
 
 <script lang="ts">
@@ -176,8 +214,10 @@ import { createNotifyHelpers, TIMEOUTS } from "@/utils/notify";
 import {
   NOTIFY_ADD_CONTACT_FIRST,
   NOTIFY_CONTINUE_WITHOUT_ADDING,
+  NOTIFY_ADMIT_ALL_PENDING,
 } from "@/constants/notifications";
 import { SOMEONE_UNNAMED } from "@/constants/entities";
+import SetBulkVisibilityDialog from "./SetBulkVisibilityDialog.vue";
 
 interface Member {
   admitted: boolean;
@@ -193,6 +233,9 @@ interface DecryptedMember {
 }
 
 @Component({
+  components: {
+    SetBulkVisibilityDialog,
+  },
   mixins: [PlatformServiceMixin],
 })
 export default class MembersList extends Vue {
@@ -219,8 +262,25 @@ export default class MembersList extends Vue {
   missingMyself = false;
   activeDid = "";
   apiServer = "";
+
+  // Set Visibility Dialog state
+  showSetVisibilityDialog = false;
+  visibilityDialogMembers: Array<{
+    did: string;
+    name: string;
+    isContact: boolean;
+    member: { memberId: string };
+  }> = [];
   contacts: Array<Contact> = [];
 
+  // Auto-refresh functionality
+  countdownTimer = 10;
+  autoRefreshInterval: NodeJS.Timeout | null = null;
+  lastRefreshTime = 0;
+
+  // Track previous visibility members to detect changes
+  previousVisibilityMembers: string[] = [];
+
   /**
    * Get the unnamed member constant
    */
@@ -242,6 +302,21 @@ export default class MembersList extends Vue {
     this.firstName = settings.firstName || "";
     await this.fetchMembers();
     await this.loadContacts();
+
+    // Start auto-refresh
+    this.startAutoRefresh();
+
+    // Check if we should show the visibility dialog on initial load
+    this.checkAndShowVisibilityDialog();
+  }
+
+  async refreshData() {
+    // Force refresh both contacts and members
+    await this.loadContacts();
+    await this.fetchMembers();
+
+    // Check if we should show the visibility dialog after refresh
+    this.checkAndShowVisibilityDialog();
   }
 
   async fetchMembers() {
@@ -329,22 +404,49 @@ 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
+      members = this.decryptedMembers;
     }
-    // non-organizers only get visible members from server
-    return this.decryptedMembers;
+
+    // Sort members according to priority:
+    // 1. Organizer at the top
+    // 2. 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,
     );
   }
@@ -371,6 +473,80 @@ export default class MembersList extends Vue {
     return this.contacts.find((contact) => contact.did === did);
   }
 
+  getMembersForVisibility() {
+    return this.decryptedMembers
+      .filter((member) => {
+        // Exclude the current user
+        if (member.did === this.activeDid) {
+          return false;
+        }
+
+        const contact = this.getContactFor(member.did);
+
+        // Include members who:
+        // 1. Haven't been added as contacts yet, OR
+        // 2. Are contacts but don't have visibility set (seesMe property)
+        return !contact || !contact.seesMe;
+      })
+      .map((member) => ({
+        did: member.did,
+        name: member.name,
+        isContact: !!this.getContactFor(member.did),
+        member: {
+          memberId: member.member.memberId.toString(),
+        },
+      }));
+  }
+
+  /**
+   * Check if we should show the visibility dialog
+   * Returns true if there are members for visibility and either:
+   * - This is the first time (no previous members tracked), OR
+   * - New members have been added since last check (not removed)
+   */
+  shouldShowVisibilityDialog(): boolean {
+    const currentMembers = this.getMembersForVisibility();
+
+    if (currentMembers.length === 0) {
+      return false;
+    }
+
+    // If no previous members tracked, show dialog
+    if (this.previousVisibilityMembers.length === 0) {
+      return true;
+    }
+
+    // Check if new members have been added (not just any change)
+    const currentMemberIds = currentMembers.map((m) => m.did);
+    const previousMemberIds = this.previousVisibilityMembers;
+
+    // Find new members (members in current but not in previous)
+    const newMembers = currentMemberIds.filter(
+      (id) => !previousMemberIds.includes(id),
+    );
+
+    // Only show dialog if there are new members added
+    return newMembers.length > 0;
+  }
+
+  /**
+   * Update the tracking of previous visibility members
+   */
+  updatePreviousVisibilityMembers() {
+    const currentMembers = this.getMembersForVisibility();
+    this.previousVisibilityMembers = currentMembers.map((m) => m.did);
+  }
+
+  /**
+   * Show the visibility dialog if conditions are met
+   */
+  checkAndShowVisibilityDialog() {
+    if (this.shouldShowVisibilityDialog()) {
+      this.showSetBulkVisibilityDialog();
+    }
+    this.updatePreviousVisibilityMembers();
+  }
+
   checkWhetherContactBeforeAdmitting(decrMember: DecryptedMember) {
     const contact = this.getContactFor(decrMember.did);
     if (!decrMember.member.admitted && !contact) {
@@ -508,6 +684,187 @@ export default class MembersList extends Vue {
       this.notify.error(message, TIMEOUTS.LONG);
     }
   }
+
+  showSetBulkVisibilityDialog() {
+    // Filter members to show only those who need visibility set
+    const membersForVisibility = this.getMembersForVisibility();
+
+    // Pause auto-refresh when dialog opens
+    this.stopAutoRefresh();
+
+    // Open the dialog directly
+    this.visibilityDialogMembers = membersForVisibility;
+    this.showSetVisibilityDialog = true;
+  }
+
+  startAutoRefresh() {
+    this.lastRefreshTime = Date.now();
+    this.countdownTimer = 10;
+
+    this.autoRefreshInterval = setInterval(() => {
+      const now = Date.now();
+      const timeSinceLastRefresh = (now - this.lastRefreshTime) / 1000;
+
+      if (timeSinceLastRefresh >= 10) {
+        // Time to refresh
+        this.refreshData();
+        this.lastRefreshTime = now;
+        this.countdownTimer = 10;
+      } else {
+        // Update countdown
+        this.countdownTimer = Math.max(
+          0,
+          Math.round(10 - timeSinceLastRefresh),
+        );
+      }
+    }, 1000); // Update every second
+  }
+
+  stopAutoRefresh() {
+    if (this.autoRefreshInterval) {
+      clearInterval(this.autoRefreshInterval);
+      this.autoRefreshInterval = null;
+    }
+  }
+
+  manualRefresh() {
+    // Clear existing auto-refresh interval
+    if (this.autoRefreshInterval) {
+      clearInterval(this.autoRefreshInterval);
+      this.autoRefreshInterval = null;
+    }
+
+    // Trigger immediate refresh and restart timer
+    this.refreshData();
+    this.startAutoRefresh();
+
+    // Always show dialog on manual refresh if there are members for visibility
+    if (this.getMembersForVisibility().length > 0) {
+      this.showSetBulkVisibilityDialog();
+    }
+  }
+
+  // Set Visibility Dialog methods
+  closeSetVisibilityDialog() {
+    this.showSetVisibilityDialog = false;
+    this.visibilityDialogMembers = [];
+    // Refresh data when dialog is closed
+    this.refreshData();
+    // Resume auto-refresh when dialog is closed
+    this.startAutoRefresh();
+  }
+
+  /**
+   * Get count of pending (non-admitted) members
+   */
+  getPendingMembersCount(): number {
+    return this.decryptedMembers.filter(
+      (member) => !member.member.admitted && member.did !== this.activeDid,
+    ).length;
+  }
+
+  /**
+   * Get list of pending members
+   */
+  getPendingMembers(): DecryptedMember[] {
+    return this.decryptedMembers.filter(
+      (member) => !member.member.admitted && member.did !== this.activeDid,
+    );
+  }
+
+  /**
+   * Show the admit all pending members dialog
+   */
+  showAdmitAllPendingDialog() {
+    const pendingCount = this.getPendingMembersCount();
+
+    if (pendingCount === 0) {
+      this.notify.info(
+        "There are no pending members to admit.",
+        TIMEOUTS.STANDARD,
+      );
+      return;
+    }
+
+    // Pause auto-refresh when dialog opens
+    this.stopAutoRefresh();
+
+    const dialogText = NOTIFY_ADMIT_ALL_PENDING.text.replace(
+      "{count}",
+      pendingCount.toString(),
+    );
+
+    this.$notify(
+      {
+        group: "modal",
+        type: "confirm",
+        title: NOTIFY_ADMIT_ALL_PENDING.title,
+        text: dialogText,
+        yesText: NOTIFY_ADMIT_ALL_PENDING.yesText,
+        noText: NOTIFY_ADMIT_ALL_PENDING.noText,
+        onYes: async () => {
+          await this.admitAllPendingMembers(true); // true = add to contacts
+          // Resume auto-refresh after action
+          this.startAutoRefresh();
+        },
+        onNo: async () => {
+          await this.admitAllPendingMembers(false); // false = don't add to contacts
+          // Resume auto-refresh after action
+          this.startAutoRefresh();
+        },
+        onCancel: async () => {
+          // Do nothing - user cancelled
+          // Resume auto-refresh after cancellation
+          this.startAutoRefresh();
+        },
+      },
+      TIMEOUTS.MODAL,
+    );
+  }
+
+  /**
+   * Admit all pending members with optional contact addition
+   */
+  async admitAllPendingMembers(addToContacts: boolean) {
+    const pendingMembers = this.getPendingMembers();
+
+    if (pendingMembers.length === 0) {
+      return;
+    }
+
+    try {
+      // Process each pending member
+      for (const member of pendingMembers) {
+        // Add to contacts if requested and not already a contact
+        if (addToContacts && !this.getContactFor(member.did)) {
+          await this.addAsContact(member);
+        }
+
+        // Admit the member
+        await this.toggleAdmission(member);
+      }
+
+      // Show success message
+      const contactMessage = addToContacts ? " and added to your contacts" : "";
+      this.notify.success(
+        `All ${pendingMembers.length} pending members have been admitted${contactMessage}.`,
+        TIMEOUTS.STANDARD,
+      );
+    } catch (error) {
+      this.$logAndConsole(
+        "Error admitting all pending members: " + errorStringForLog(error),
+        true,
+      );
+      this.notify.error(
+        "Failed to admit some members. Please try again.",
+        TIMEOUTS.LONG,
+      );
+    }
+  }
+
+  beforeDestroy() {
+    this.stopAutoRefresh();
+  }
 }
 </script>
 
@@ -522,29 +879,26 @@ export default class MembersList extends Vue {
 
 .btn-add-contact {
   /* stylelint-disable-next-line at-rule-no-unknown */
-  @apply ml-2 w-8 h-8 flex items-center justify-center rounded-full 
-    bg-green-100 text-green-600 hover:bg-green-200 hover:text-green-800 
-    transition-colors;
-}
-
-.btn-info-contact {
-  /* stylelint-disable-next-line at-rule-no-unknown */
-  @apply ml-2 mb-2 w-6 h-6 flex items-center justify-center rounded-full 
-    bg-slate-100 text-slate-500 hover:bg-slate-200 hover:text-slate-800 
-    transition-colors;
-}
-
-.btn-admission {
-  /* stylelint-disable-next-line at-rule-no-unknown */
-  @apply mr-2 w-6 h-6 flex items-center justify-center rounded-full 
-    bg-blue-100 text-blue-600 hover:bg-blue-200 hover:text-blue-800 
+  @apply text-lg text-green-600 hover:text-green-800 
     transition-colors;
 }
 
+.btn-info-contact,
 .btn-info-admission {
   /* stylelint-disable-next-line at-rule-no-unknown */
-  @apply mr-2 mb-2 w-6 h-6 flex items-center justify-center rounded-full 
-    bg-slate-100 text-slate-500 hover:bg-slate-200 hover:text-slate-800 
+  @apply text-slate-400 hover:text-slate-600 
+    transition-colors;
+}
+
+.btn-admission-add {
+  /* stylelint-disable-next-line at-rule-no-unknown */
+  @apply text-lg text-blue-500 hover:text-blue-700 
+    transition-colors;
+}
+
+.btn-admission-remove {
+  /* stylelint-disable-next-line at-rule-no-unknown */
+  @apply text-lg text-rose-500 hover:text-rose-700 
     transition-colors;
 }
 </style>

src/components/SetBulkVisibilityDialog.vue

@@ -0,0 +1,333 @@
+<template>
+  <div v-if="visible" class="dialog-overlay">
+    <div class="dialog">
+      <div class="text-slate-900 text-center">
+        <h3 class="text-lg font-semibold leading-[1.25] mb-2">
+          Set Visibility to Meeting Members
+        </h3>
+        <p class="text-sm mb-4">
+          Would you like to <b>make your activities visible</b> to the following
+          members? (This will also add them as contacts if they aren't already.)
+        </p>
+
+        <!-- Custom table area - you can customize this -->
+        <div v-if="shouldInitializeSelection" class="mb-4">
+          <table
+            class="w-full border-collapse border border-slate-300 text-sm text-start"
+          >
+            <thead v-if="membersData && membersData.length > 0">
+              <tr class="bg-slate-100 font-medium">
+                <th class="border border-slate-300 px-3 py-2">
+                  <label class="flex items-center gap-2">
+                    <input
+                      type="checkbox"
+                      :checked="isAllSelected"
+                      :indeterminate="isIndeterminate"
+                      @change="toggleSelectAll"
+                    />
+                    Select All
+                  </label>
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <!-- Dynamic data from MembersList -->
+              <tr v-if="!membersData || membersData.length === 0">
+                <td
+                  class="border border-slate-300 px-3 py-2 text-center italic text-gray-500"
+                >
+                  No members need visibility settings
+                </td>
+              </tr>
+              <tr
+                v-for="member in membersData || []"
+                :key="member.member.memberId"
+              >
+                <td class="border border-slate-300 px-3 py-2">
+                  <div class="flex items-center justify-between gap-2">
+                    <label class="flex items-center gap-2">
+                      <input
+                        type="checkbox"
+                        :checked="isMemberSelected(member.did)"
+                        @change="toggleMemberSelection(member.did)"
+                      />
+                      {{ member.name || SOMEONE_UNNAMED }}
+                    </label>
+
+                    <!-- Friend indicator - only show if they are already a contact -->
+                    <font-awesome
+                      v-if="member.isContact"
+                      icon="user-circle"
+                      class="fa-fw ms-auto text-slate-400 cursor-pointer hover:text-slate-600"
+                      @click="showContactInfo"
+                    />
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <div class="space-y-2">
+          <button
+            v-if="membersData && membersData.length > 0"
+            :disabled="!hasSelectedMembers"
+            :class="[
+              'block w-full text-center text-md font-bold uppercase px-2 py-2 rounded-md',
+              hasSelectedMembers
+                ? 'bg-blue-600 text-white cursor-pointer'
+                : 'bg-slate-400 text-slate-200 cursor-not-allowed',
+            ]"
+            @click="setVisibilityForSelectedMembers"
+          >
+            Set Visibility
+          </button>
+          <button
+            class="block w-full text-center text-md font-bold uppercase bg-slate-600 text-white px-2 py-2 rounded-md"
+            @click="cancel"
+          >
+            {{
+              membersData && membersData.length > 0 ? "Maybe Later" : "Cancel"
+            }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop } from "vue-facing-decorator";
+
+import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
+import { SOMEONE_UNNAMED } from "@/constants/entities";
+import { setVisibilityUtil } from "@/libs/endorserServer";
+import { createNotifyHelpers } from "@/utils/notify";
+
+interface MemberData {
+  did: string;
+  name: string;
+  isContact: boolean;
+  member: {
+    memberId: string;
+  };
+}
+
+@Component({
+  mixins: [PlatformServiceMixin],
+})
+export default class SetBulkVisibilityDialog extends Vue {
+  @Prop({ default: false }) visible!: boolean;
+  @Prop({ default: () => [] }) membersData!: MemberData[];
+  @Prop({ default: "" }) activeDid!: string;
+  @Prop({ default: "" }) apiServer!: string;
+
+  // Vue notification system
+  $notify!: (
+    notification: { group: string; type: string; title: string; text: string },
+    timeout?: number,
+  ) => void;
+
+  // Notification system
+  notify!: ReturnType<typeof createNotifyHelpers>;
+
+  // Component state
+  selectedMembers: string[] = [];
+  selectionInitialized = false;
+
+  // Constants
+  // In Vue templates, imported constants need to be explicitly made available to the template
+  readonly SOMEONE_UNNAMED = SOMEONE_UNNAMED;
+
+  get hasSelectedMembers() {
+    return this.selectedMembers.length > 0;
+  }
+
+  get isAllSelected() {
+    if (!this.membersData || this.membersData.length === 0) return false;
+    return this.membersData.every((member) =>
+      this.selectedMembers.includes(member.did),
+    );
+  }
+
+  get isIndeterminate() {
+    if (!this.membersData || this.membersData.length === 0) return false;
+    const selectedCount = this.membersData.filter((member) =>
+      this.selectedMembers.includes(member.did),
+    ).length;
+    return selectedCount > 0 && selectedCount < this.membersData.length;
+  }
+
+  get shouldInitializeSelection() {
+    // This method will initialize selection when the dialog opens
+    if (!this.selectionInitialized) {
+      this.initializeSelection();
+      this.selectionInitialized = true;
+    }
+    return true;
+  }
+
+  created() {
+    this.notify = createNotifyHelpers(this.$notify);
+  }
+
+  initializeSelection() {
+    // Reset selection when dialog opens
+    this.selectedMembers = [];
+    // Select all by default
+    this.selectedMembers = this.membersData.map((member) => member.did);
+  }
+
+  resetSelection() {
+    this.selectedMembers = [];
+    this.selectionInitialized = false;
+  }
+
+  toggleSelectAll() {
+    if (!this.membersData || this.membersData.length === 0) return;
+
+    if (this.isAllSelected) {
+      // Deselect all
+      this.selectedMembers = [];
+    } else {
+      // Select all
+      this.selectedMembers = this.membersData.map((member) => member.did);
+    }
+  }
+
+  toggleMemberSelection(memberDid: string) {
+    const index = this.selectedMembers.indexOf(memberDid);
+    if (index > -1) {
+      this.selectedMembers.splice(index, 1);
+    } else {
+      this.selectedMembers.push(memberDid);
+    }
+  }
+
+  isMemberSelected(memberDid: string) {
+    return this.selectedMembers.includes(memberDid);
+  }
+
+  async setVisibilityForSelectedMembers() {
+    try {
+      const selectedMembers = this.membersData.filter((member) =>
+        this.selectedMembers.includes(member.did),
+      );
+
+      let successCount = 0;
+
+      for (const member of selectedMembers) {
+        try {
+          // If they're not a contact yet, add them as a contact first
+          if (!member.isContact) {
+            await this.addAsContact(member);
+          }
+
+          // Set their seesMe to true
+          await this.updateContactVisibility(member.did, true);
+
+          successCount++;
+        } catch (error) {
+          // eslint-disable-next-line no-console
+          console.error(`Error processing member ${member.did}:`, error);
+          // Continue with other members even if one fails
+        }
+      }
+
+      // Show success notification
+      this.$notify(
+        {
+          group: "alert",
+          type: "success",
+          title: "Visibility Set Successfully",
+          text: `Visibility set for ${successCount} member${successCount === 1 ? "" : "s"}.`,
+        },
+        5000,
+      );
+
+      // Emit success event
+      this.$emit("success", successCount);
+      this.close();
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error("Error setting visibility:", error);
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text: "Failed to set visibility for some members. Please try again.",
+        },
+        5000,
+      );
+    }
+  }
+
+  async addAsContact(member: { did: string; name: string }) {
+    try {
+      const newContact = {
+        did: member.did,
+        name: member.name,
+      };
+
+      await this.$insertContact(newContact);
+    } catch (err) {
+      // eslint-disable-next-line no-console
+      console.error("Error adding contact:", err);
+      if (err instanceof Error && err.message?.indexOf("already exists") > -1) {
+        // Contact already exists, continue
+      } else {
+        throw err; // Re-throw if it's not a duplicate error
+      }
+    }
+  }
+
+  async updateContactVisibility(did: string, seesMe: boolean) {
+    try {
+      // Get the contact object
+      const contact = await this.$getContact(did);
+      if (!contact) {
+        throw new Error(`Contact not found for DID: ${did}`);
+      }
+
+      // Use the proper API to set visibility on the server
+      const result = await setVisibilityUtil(
+        this.activeDid,
+        this.apiServer,
+        this.axios,
+        contact,
+        seesMe,
+      );
+
+      if (!result.success) {
+        throw new Error(result.error || "Failed to set visibility");
+      }
+    } catch (err) {
+      // eslint-disable-next-line no-console
+      console.error("Error updating contact visibility:", err);
+      throw err;
+    }
+  }
+
+  showContactInfo() {
+    this.$notify(
+      {
+        group: "alert",
+        type: "info",
+        title: "Contact Info",
+        text: "This user is already your contact, but your activities are not visible to them yet.",
+      },
+      5000,
+    );
+  }
+
+  close() {
+    this.resetSelection();
+    this.$emit("close");
+  }
+
+  cancel() {
+    this.close();
+  }
+}
+</script>

src/components/TopMessage.vue

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

src/components/UsageLimitsSection.vue

@@ -8,7 +8,7 @@
     <!-- show spinner if loading limits -->
     <div
       v-if="loadingLimits"
-      class="text-center"
+      class="text-slate-500 text-center italic mb-4"
       role="status"
       aria-live="polite"
     >
@@ -19,7 +19,10 @@
         aria-hidden="true"
       ></font-awesome>
     </div>
-    <div class="mb-4 text-center">
+    <div
+      v-if="limitsMessage"
+      class="bg-amber-200 text-amber-900 border-amber-500 border-dashed border text-center rounded-md overflow-hidden px-4 py-3 mb-4"
+    >
       {{ limitsMessage }}
     </div>
     <div v-if="endorserLimits">

src/constants/accountView.ts

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

src/constants/app.ts

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

src/constants/notifications.ts

@@ -471,6 +471,14 @@ export const NOTIFY_CONTINUE_WITHOUT_ADDING = {
   noText: "No, Cancel",
 };
 
+// Used in: MembersList.vue (complex modal for admitting all pending members)
+export const NOTIFY_ADMIT_ALL_PENDING = {
+  title: "Admit All Pending Members",
+  text: "You are about to admit {count} pending member/s. Would you also like to add them to your Contacts list?",
+  yesText: "Admit and Add to Contacts",
+  noText: "Admit Only",
+};
+
 // HelpNotificationsView.vue specific constants
 // Used in: HelpNotificationsView.vue (sendTestWebPushMessage method - not subscribed error)
 export const NOTIFY_PUSH_NOT_SUBSCRIBED = {

src/db-sql/migration.ts

@@ -68,13 +68,21 @@ const MIG_004_SQL = `
   WHERE id = 1 
   AND EXISTS (SELECT 1 FROM settings WHERE id = 1 AND activeDid IS NOT NULL AND activeDid != '');
   
+  -- Copy important settings that were set in the MASTER_SETTINGS_KEY to the main identity.
+  -- (We're not doing them all because some were already identity-specific and others aren't as critical.)
+  UPDATE settings
+  SET lastViewedClaimId = (SELECT lastViewedClaimId FROM settings WHERE id = 1),
+      profileImageUrl = (SELECT profileImageUrl FROM settings WHERE id = 1),
+      showShortcutBvc = (SELECT showShortcutBvc FROM settings WHERE id = 1),
+      warnIfProdServer = (SELECT warnIfProdServer FROM settings WHERE id = 1),
+      warnIfTestServer = (SELECT warnIfTestServer FROM settings WHERE id = 1)
+  WHERE id = 2;
+
   -- CLEANUP: Remove orphaned settings records and clear legacy activeDid values
+  -- which usually simply deletes the MASTER_SETTINGS_KEY record.
   -- This completes the migration from settings-based to table-based active identity
-  -- Use guarded operations to prevent accidental data loss
-  DELETE FROM settings WHERE accountDid IS NULL AND id != 1;
-  UPDATE settings SET activeDid = NULL WHERE id = 1 AND EXISTS (
-    SELECT 1 FROM active_identity WHERE id = 1 AND activeDid IS NOT NULL
-  );
+  DELETE FROM settings WHERE accountDid IS NULL;
+  UPDATE settings SET activeDid = NULL;
 `;
 
 // Each migration can include multiple SQL statements (with semicolons)
@@ -184,6 +192,13 @@ const MIGRATIONS = [
     name: "004_active_identity_management",
     sql: MIG_004_SQL,
   },
+  {
+    name: "005_add_starredPlanHandleIds_to_settings",
+    sql: `
+      ALTER TABLE settings ADD COLUMN starredPlanHandleIds TEXT DEFAULT '[]'; -- JSON string
+      ALTER TABLE settings ADD COLUMN lastAckedStarredPlanChangesJwtId TEXT;
+    `,
+  },
 ];
 
 /**

src/db/databaseUtil.ts

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

src/db/tables/settings.ts

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

src/interfaces/claims.ts

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

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;
 }

src/libs/endorserServer.ts

@@ -56,7 +56,12 @@ import {
   KeyMetaWithPrivate,
   KeyMetaMaybeWithPrivate,
 } from "../interfaces/common";
-import { PlanSummaryRecord } from "../interfaces/records";
+import {
+  OfferSummaryRecord,
+  OfferToPlanSummaryRecord,
+  PlanSummaryAndPreviousClaim,
+  PlanSummaryRecord,
+} from "../interfaces/records";
 import { logger } from "../utils/logger";
 import { PlatformServiceFactory } from "@/services/PlatformServiceFactory";
 import { APP_SERVER } from "@/constants/app";
@@ -362,6 +367,22 @@ export function didInfo(
   return didInfoForContact(did, activeDid, contact, allMyDids).displayName;
 }
 
+/**
+ * In some contexts (eg. agent), a blank really is nobody.
+ */
+export function didInfoOrNobody(
+  did: string | undefined,
+  activeDid: string | undefined,
+  allMyDids: string[],
+  contacts: Contact[],
+): string {
+  if (did == null) {
+    return "Nobody";
+  } else {
+    return didInfo(did, activeDid, allMyDids, contacts);
+  }
+}
+
 /**
  * return text description without any references to "you" as user
  */
@@ -730,7 +751,7 @@ export async function getNewOffersToUser(
   activeDid: string,
   afterOfferJwtId?: string,
   beforeOfferJwtId?: string,
-) {
+): Promise<{ data: Array<OfferSummaryRecord>; hitLimit: boolean }> {
   let url = `${apiServer}/api/v2/report/offers?recipientDid=${activeDid}`;
   if (afterOfferJwtId) {
     url += "&afterId=" + afterOfferJwtId;
@@ -752,7 +773,7 @@ export async function getNewOffersToUserProjects(
   activeDid: string,
   afterOfferJwtId?: string,
   beforeOfferJwtId?: string,
-) {
+): Promise<{ data: Array<OfferToPlanSummaryRecord>; hitLimit: boolean }> {
   let url = `${apiServer}/api/v2/report/offersToPlansOwnedByMe`;
   if (afterOfferJwtId) {
     url += "?afterId=" + afterOfferJwtId;
@@ -766,6 +787,46 @@ export async function getNewOffersToUserProjects(
   return response.data;
 }
 
+/**
+ * Get starred projects that have been updated since the last check
+ *
+ * @param axios - axios instance
+ * @param apiServer - endorser API server URL
+ * @param activeDid - user's DID for authentication
+ * @param starredPlanHandleIds - array of starred project handle IDs
+ * @param afterId - JWT ID to check for changes after (from lastAckedStarredPlanChangesJwtId)
+ * @returns { data: Array<PlanSummaryAndPreviousClaim>, hitLimit: boolean }
+ */
+export async function getStarredProjectsWithChanges(
+  axios: Axios,
+  apiServer: string,
+  activeDid: string,
+  starredPlanHandleIds: string[],
+  afterId?: string,
+): Promise<{ data: Array<PlanSummaryAndPreviousClaim>; hitLimit: boolean }> {
+  if (!starredPlanHandleIds || starredPlanHandleIds.length === 0) {
+    return { data: [], hitLimit: false };
+  }
+
+  if (!afterId) {
+    // This doesn't make sense: there should always be some previous one they've seen.
+    // We'll just return blank.
+    return { data: [], hitLimit: false };
+  }
+
+  // Use POST method for larger lists of project IDs
+  const url = `${apiServer}/api/v2/report/plansLastUpdatedBetween`;
+  const headers = await getHeaders(activeDid);
+
+  const requestBody = {
+    planIds: starredPlanHandleIds,
+    afterId: afterId,
+  };
+
+  const response = await axios.post(url, requestBody, { headers });
+  return response.data;
+}
+
 /**
  * Construct GiveAction VC for submission to server
  *
@@ -1697,49 +1758,19 @@ export async function fetchEndorserRateLimits(
     timestamp: new Date().toISOString(),
   });
 
-  try {
-    const response = await axios.get(url, { headers } as AxiosRequestConfig);
+  // not wrapped in a 'try' because the error returned is self-explanatory
+  const response = await axios.get(url, { headers } as AxiosRequestConfig);
 
-    // Log successful registration check
-    logger.debug("[User Registration] User registration check successful:", {
-      did: issuerDid,
-      server: apiServer,
-      status: response.status,
-      isRegistered: true,
-      timestamp: new Date().toISOString(),
-    });
+  // Log successful registration check
+  logger.debug("[User Registration] User registration check successful:", {
+    did: issuerDid,
+    server: apiServer,
+    status: response.status,
+    isRegistered: true,
+    timestamp: new Date().toISOString(),
+  });
 
-    return response;
-  } catch (error) {
-    // Enhanced error logging with user registration context
-    const axiosError = error as {
-      response?: {
-        data?: { error?: { code?: string; message?: string } };
-        status?: number;
-      };
-    };
-    const errorCode = axiosError.response?.data?.error?.code;
-    const errorMessage = axiosError.response?.data?.error?.message;
-    const httpStatus = axiosError.response?.status;
-
-    logger.warn("[User Registration] User not registered on server:", {
-      did: issuerDid,
-      server: apiServer,
-      errorCode: errorCode,
-      errorMessage: errorMessage,
-      httpStatus: httpStatus,
-      needsRegistration: true,
-      timestamp: new Date().toISOString(),
-    });
-
-    // Log the original error for debugging
-    logger.error(
-      `[fetchEndorserRateLimits] Error for DID ${issuerDid}:`,
-      errorStringForLog(error),
-    );
-
-    throw error;
-  }
+  return response;
 }
 
 /**
@@ -1788,14 +1819,17 @@ export async function fetchImageRateLimits(
       };
     };
 
-    logger.error("[Image Server] Image rate limits check failed:", {
-      did: issuerDid,
-      server: server,
-      errorCode: axiosError.response?.data?.error?.code,
-      errorMessage: axiosError.response?.data?.error?.message,
-      httpStatus: axiosError.response?.status,
-      timestamp: new Date().toISOString(),
-    });
+    logger.warn(
+      "[Image Server] Image rate limits check failed, which is expected for users not registered on test server (eg. when only registered on local server).",
+      {
+        did: issuerDid,
+        server: server,
+        errorCode: axiosError.response?.data?.error?.code,
+        errorMessage: axiosError.response?.data?.error?.message,
+        httpStatus: axiosError.response?.status,
+        timestamp: new Date().toISOString(),
+      },
+    );
     return null;
   }
 }

src/libs/fontawesome.ts

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

src/router/index.ts

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

src/services/api.ts

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

src/services/migrationService.ts

@@ -799,7 +799,7 @@ export async function runMigrations<T>(
     }
 
     // Only show completion message in development
-    logger.debug(
+    logger.log(
       `🎉 [Migration] Migration process complete! Summary: ${appliedCount} applied, ${skippedCount} skipped`,
     );
   } catch (error) {

src/test/PlatformServiceMixinTest.vue

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

src/utils/PlatformServiceMixin.ts

@@ -301,7 +301,11 @@ export const PlatformServiceMixin = {
           }
 
           // Convert SQLite JSON strings to objects/arrays
-          if (column === "contactMethods" || column === "searchBoxes") {
+          if (
+            column === "contactMethods" ||
+            column === "searchBoxes" ||
+            column === "starredPlanHandleIds"
+          ) {
             value = this._parseJsonField(value, []);
           }
 
@@ -349,6 +353,14 @@ export const PlatformServiceMixin = {
           ? JSON.stringify(settings.searchBoxes)
           : String(settings.searchBoxes);
       }
+      if (settings.starredPlanHandleIds !== undefined) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (converted as any).starredPlanHandleIds = Array.isArray(
+          settings.starredPlanHandleIds,
+        )
+          ? JSON.stringify(settings.starredPlanHandleIds)
+          : String(settings.starredPlanHandleIds);
+      }
 
       return converted;
     },
@@ -514,7 +526,7 @@ export const PlatformServiceMixin = {
      * Utility method for retrieving master settings
      * Common pattern used across many components
      */
-    async $getMasterSettings(
+    async _getMasterSettings(
       fallback: Settings | null = null,
     ): Promise<Settings | null> {
       try {
@@ -551,6 +563,12 @@ export const PlatformServiceMixin = {
         if (settings.searchBoxes) {
           settings.searchBoxes = this._parseJsonField(settings.searchBoxes, []);
         }
+        if (settings.starredPlanHandleIds) {
+          settings.starredPlanHandleIds = this._parseJsonField(
+            settings.starredPlanHandleIds,
+            [],
+          );
+        }
 
         return settings;
       } catch (error) {
@@ -571,7 +589,7 @@ export const PlatformServiceMixin = {
     ): Promise<Settings> {
       try {
         // Get default settings
-        const defaultSettings = await this.$getMasterSettings(defaultFallback);
+        const defaultSettings = await this._getMasterSettings(defaultFallback);
 
         // If no account DID, return defaults
         if (!accountDid) {
@@ -617,6 +635,12 @@ export const PlatformServiceMixin = {
             [],
           );
         }
+        if (mergedSettings.starredPlanHandleIds) {
+          mergedSettings.starredPlanHandleIds = this._parseJsonField(
+            mergedSettings.starredPlanHandleIds,
+            [],
+          );
+        }
 
         return mergedSettings;
       } catch (error) {
@@ -970,7 +994,7 @@ export const PlatformServiceMixin = {
      * @returns Fresh settings object from database
      */
     async $settings(defaults: Settings = {}): Promise<Settings> {
-      const settings = await this.$getMasterSettings(defaults);
+      const settings = await this._getMasterSettings(defaults);
 
       if (!settings) {
         return defaults;
@@ -1003,7 +1027,7 @@ export const PlatformServiceMixin = {
     ): Promise<Settings> {
       try {
         // Get default settings first
-        const defaultSettings = await this.$getMasterSettings(defaults);
+        const defaultSettings = await this._getMasterSettings(defaults);
 
         if (!defaultSettings) {
           return defaults;
@@ -1212,6 +1236,11 @@ export const PlatformServiceMixin = {
      * @param changes Settings changes to save
      * @returns Promise<boolean> Success status
      */
+    /**
+     * Since this is unused, and since it relies on this.activeDid which isn't guaranteed to exist,
+     * let's take this out for the sake of safety.
+     * Totally remove after start of 2026 (since it would be obvious by then that it's not used).
+     *
     async $saveMySettings(changes: Partial<Settings>): Promise<boolean> {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       const currentDid = (this as any).activeDid;
@@ -1221,6 +1250,7 @@ export const PlatformServiceMixin = {
       }
       return await this.$saveUserSettings(currentDid, changes);
     },
+    **/
 
     // =================================================
     // CACHE MANAGEMENT METHODS
@@ -1842,7 +1872,7 @@ export const PlatformServiceMixin = {
     async $debugMergedSettings(did: string): Promise<void> {
       try {
         // Get default settings
-        const defaultSettings = await this.$getMasterSettings({});
+        const defaultSettings = await this._getMasterSettings({});
         logger.debug(
           `[PlatformServiceMixin] Default settings:`,
           defaultSettings,
@@ -1892,7 +1922,6 @@ export interface IPlatformServiceMixin {
     params?: unknown[],
   ): Promise<SqlValue[] | undefined>;
   $dbRawQuery(sql: string, params?: unknown[]): Promise<unknown | undefined>;
-  $getMasterSettings(fallback?: Settings | null): Promise<Settings | null>;
   $getMergedSettings(
     defaultKey: string,
     accountDid?: string,
@@ -2017,7 +2046,6 @@ declare module "@vue/runtime-core" {
       params?: unknown[],
     ): Promise<unknown[] | undefined>;
     $dbRawQuery(sql: string, params?: unknown[]): Promise<unknown | undefined>;
-    $getMasterSettings(defaults?: Settings | null): Promise<Settings | null>;
     $getMergedSettings(
       key: string,
       did?: string,
@@ -2040,7 +2068,8 @@ declare module "@vue/runtime-core" {
       did: string,
       changes: Partial<Settings>,
     ): Promise<boolean>;
-    $saveMySettings(changes: Partial<Settings>): Promise<boolean>;
+    // @deprecated; see implementation note above
+    // $saveMySettings(changes: Partial<Settings>): Promise<boolean>;
 
     // Cache management methods
     $refreshSettings(): Promise<Settings>;

src/utils/logger.ts

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

src/views/AccountViewView.vue

@@ -1,6 +1,5 @@
 <template>
   <QuickNav selected="Profile" />
-  <TopMessage />
 
   <!-- CONTENT -->
   <main
@@ -9,10 +8,22 @@
     role="main"
     aria-label="Account Profile"
   >
-    <!-- Heading -->
-    <h1 id="ViewHeading" class="text-4xl text-center font-light">
-      Your Identity
-    </h1>
+    <TopMessage />
+
+    <!-- Main View Heading -->
+    <div class="flex gap-4 items-center mb-8">
+      <h1 id="ViewHeading" class="text-2xl font-bold leading-none">
+        Your Identity
+      </h1>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
+    </div>
 
     <!-- ID notice -->
     <div
@@ -150,8 +161,6 @@
     </section>
     <PushNotificationPermission ref="pushNotificationPermission" />
 
-    <LocationSearchSection :search-box="searchBox" />
-
     <!-- User Profile -->
     <section
       v-if="isRegistered"
@@ -244,6 +253,8 @@
       <div v-else>Saving...</div>
     </section>
 
+    <LocationSearchSection :search-box="searchBox" />
+
     <UsageLimitsSection
       v-if="activeDid"
       :loading-limits="loadingLimits"
@@ -1064,8 +1075,8 @@ export default class AccountViewView extends Vue {
     this.hideRegisterPromptOnNewContact =
       !!settings.hideRegisterPromptOnNewContact;
     this.isRegistered = !!settings?.isRegistered;
-    this.isSearchAreasSet = !!settings.searchBoxes;
-    this.searchBox = settings.searchBoxes?.[0] || null;
+    this.isSearchAreasSet =
+      !!settings.searchBoxes && settings.searchBoxes.length > 0;
     this.notifyingNewActivity = !!settings.notifyingNewActivityTime;
     this.notifyingNewActivityTime = settings.notifyingNewActivityTime || "";
     this.notifyingReminder = !!settings.notifyingReminderTime;
@@ -1079,6 +1090,7 @@ export default class AccountViewView extends Vue {
     this.passkeyExpirationMinutes =
       settings.passkeyExpirationMinutes ?? DEFAULT_PASSKEY_EXPIRATION_MINUTES;
     this.previousPasskeyExpirationMinutes = this.passkeyExpirationMinutes;
+    this.searchBox = settings.searchBoxes?.[0] || null;
     this.showGeneralAdvanced = !!settings.showGeneralAdvanced;
     this.showShortcutBvc = !!settings.showShortcutBvc;
     this.warnIfProdServer = !!settings.warnIfProdServer;
@@ -1454,7 +1466,6 @@ export default class AccountViewView extends Vue {
         this.imageLimits = imageResp.data;
       } else {
         this.limitsMessage = ACCOUNT_VIEW_CONSTANTS.LIMITS.NO_IMAGE_ACCESS;
-        this.notify.warning(ACCOUNT_VIEW_CONSTANTS.LIMITS.CANNOT_UPLOAD_IMAGES);
       }
 
       const endorserResp = await fetchEndorserRateLimits(
@@ -1465,9 +1476,6 @@ export default class AccountViewView extends Vue {
 
       if (endorserResp.status === 200) {
         this.endorserLimits = endorserResp.data;
-      } else {
-        this.limitsMessage = ACCOUNT_VIEW_CONSTANTS.LIMITS.NO_LIMITS_FOUND;
-        this.notify.warning(ACCOUNT_VIEW_CONSTANTS.LIMITS.BAD_SERVER_RESPONSE);
       }
     } catch (error) {
       this.limitsMessage =

src/views/ClaimAddRawView.vue

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

src/views/ClaimView.vue

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

src/views/ConfirmContactView.vue

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

src/views/ConfirmGiftView.vue

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

src/views/ContactAmountsView.vue

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

src/views/ContactEditView.vue

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

src/views/ContactGiftingView.vue

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

src/views/ContactImportView.vue

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

src/views/ContactQRScanFullView.vue

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

src/views/ContactQRScanShowView.vue

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

src/views/ContactsView.vue

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

src/views/DIDView.vue

@@ -1,22 +1,31 @@
 <template>
   <QuickNav selected="Contacts" />
-  <TopMessage />
 
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
-    <div id="ViewBreadcrumb" class="mb-8">
-      <h1 id="ViewHeading" class="text-lg text-center font-light relative px-7">
-        <!-- Go to 'contacts' instead of just 'back' because they could get here from an edit page 
-             (and going back there is annoying). -->
-        <router-link
-          :to="{ name: 'contacts' }"
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-        >
-          <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
-        </router-link>
+    <TopMessage />
+
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
         Identifier Details
       </h1>
+
+      <!-- Back -->
+      <router-link
+        class="order-first text-lg text-center leading-none p-1"
+        :to="{ name: 'contacts' }"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </router-link>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <!-- Identity Details -->
@@ -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 } }"

src/views/DeepLinkErrorView.vue

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

src/views/DeepLinkRedirectView.vue

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

src/views/DiscoverView.vue

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

src/views/GiftedDetailsView.vue

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

src/views/HelpNotificationTypesView.vue

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

src/views/HelpNotificationsView.vue

@@ -34,22 +34,27 @@
 
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
-    <div class="mb-8">
-      <!-- Back -->
-      <div class="text-lg text-center font-light relative px-7">
-        <h1
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          @click="goBack()"
-        >
-          <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
-        </h1>
-      </div>
-
-      <!-- Heading -->
-      <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
         Notification Help
       </h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="goBack()"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <!-- eslint-disable prettier/prettier -->
@@ -394,7 +399,7 @@ export default class HelpNotificationsView extends Vue {
   notifyingReminderTime = "";
 
   // Notification helper system
-  notify = createNotifyHelpers(this.$notify);
+  notify!: ReturnType<typeof createNotifyHelpers>;
 
   /**
    * Computed property for consistent button styling
@@ -430,6 +435,9 @@ export default class HelpNotificationsView extends Vue {
    * Handles errors gracefully with proper logging without exposing sensitive data.
    */
   async mounted() {
+    // Initialize notification helpers
+    this.notify = createNotifyHelpers(this.$notify);
+
     try {
       const registration = await navigator.serviceWorker?.ready;
       const fullSub = await registration?.pushManager.getSubscription();

src/views/HelpOnboardingView.vue

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

src/views/HelpView.vue

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

src/views/HomeView.vue

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

src/views/IdentitySwitcherView.vue

@@ -1,18 +1,27 @@
 <template>
   <QuickNav selected="Profile"></QuickNav>
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
-    <div id="ViewBreadcrumb" class="mb-8">
-      <h1 class="text-lg text-center font-light relative px-7">
-        <!-- Cancel -->
-        <router-link
-          :to="{ name: 'account' }"
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          ><font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
-        </router-link>
-
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
         Switch Identity
       </h1>
+
+      <!-- Back -->
+      <router-link
+        class="order-first text-lg text-center leading-none p-1"
+        :to="{ name: 'account' }"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </router-link>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <!-- Identity List -->
@@ -306,6 +315,9 @@ export default class IdentitySwitcherView extends Vue {
       }
 
       await this.$exec("DELETE FROM accounts WHERE id = ?", [id]);
+      await this.$exec("DELETE FROM settings WHERE accountDid = ?", [
+        accountDid,
+      ]);
     });
 
     // Update UI

src/views/ImportAccountView.vue

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

src/views/ImportDerivedAccountView.vue

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

src/views/InviteOneView.vue

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

src/views/LogView.vue

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

src/views/NewActivityView.vue

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

src/views/NewEditAccountView.vue

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

src/views/NewEditProjectView.vue

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

src/views/NewIdentifierView.vue

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

src/views/NotFoundView.vue

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

src/views/OfferDetailsView.vue

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

src/views/OnboardMeetingListView.vue

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

src/views/OnboardMeetingMembersView.vue

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

src/views/OnboardMeetingSetupView.vue

@@ -1,12 +1,26 @@
 <template>
   <QuickNav selected="Contacts" />
-  <TopMessage />
 
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Heading -->
-    <h1 id="ViewHeading" class="text-4xl text-center font-light">
-      Onboarding Meeting
-    </h1>
+    <TopMessage />
+
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
+        Onboarding Meeting
+      </h1>
+
+      <!-- Spacer (no Back button) -->
+      <div class="order-first p-3 pe-3.5 pb-3.5"></div>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
+    </div>
 
     <!-- Existing Meeting Section -->
     <div
@@ -216,26 +230,28 @@
       class="mt-8 p-4 border rounded-lg bg-white shadow"
     >
       <div class="flex items-center justify-between">
-        <h2 class="text-2xl">Meeting Members</h2>
-      </div>
-      <div class="mt-4">
-        &bull; Page for Members
-        <span
-          class="ml-4 cursor-pointer text-blue-600"
-          title="Click to copy link for members"
-          @click="copyMembersLinkToClipboard"
-        >
-          <font-awesome icon="link" />
-        </span>
-        <a
-          v-if="!!currentMeeting.password"
-          :href="onboardMeetingMembersLink()"
-          class="ml-4 text-blue-600"
-          target="_blank"
-        >
-          <font-awesome icon="external-link" />
-        </a>
+        <h2 class="font-bold">Meeting Members</h2>
       </div>
+      <ul class="list-disc text-sm mt-4 mb-2 ps-4 space-y-2">
+        <li>
+          Page for Members:
+          <span
+            class="ml-4 cursor-pointer text-blue-600"
+            title="Click to copy link for members"
+            @click="copyMembersLinkToClipboard"
+          >
+            <font-awesome icon="link" />
+          </span>
+          <a
+            v-if="!!currentMeeting.password"
+            :href="onboardMeetingMembersLink()"
+            class="ml-4 text-blue-600"
+            target="_blank"
+          >
+            <font-awesome icon="external-link" />
+          </a>
+        </li>
+      </ul>
 
       <MembersList
         :password="currentMeeting.password || ''"

src/views/ProjectViewView.vue

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

src/views/ProjectsView.vue

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

src/views/QuickActionBvcBeginView.vue

@@ -1,23 +1,32 @@
 <template>
   <QuickNav />
-  <TopMessage />
 
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Back -->
-    <div class="text-lg text-center font-light relative px-7">
-      <h1
-        class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
+    <TopMessage />
+
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
+        Beginning of BVC Saturday Meeting
+      </h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
         @click="goBack()"
       >
-        <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
-      </h1>
-    </div>
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
 
-    <!-- Heading -->
-    <h1 id="ViewHeading" class="text-4xl text-center font-light px-4 mb-4">
-      Beginning of BVC Saturday Meeting
-    </h1>
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
+    </div>
 
     <div>
       <h2 class="text-2xl m-2">You're Here</h2>
@@ -99,7 +108,7 @@ export default class QuickActionBvcBeginView extends Vue {
   $router!: Router;
 
   // Notification helper system
-  private notify = createNotifyHelpers(this.$notify);
+  private notify!: ReturnType<typeof createNotifyHelpers>;
 
   attended = true;
   gaveTime = true;
@@ -111,6 +120,9 @@ export default class QuickActionBvcBeginView extends Vue {
    * Uses America/Denver timezone for Bountiful location
    */
   async mounted() {
+    // Initialize notification helpers
+    this.notify = createNotifyHelpers(this.$notify);
+
     logger.debug(
       "[QuickActionBvcBeginView] Mounted - calculating meeting date",
     );

src/views/QuickActionBvcEndView.vue

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

src/views/QuickActionBvcView.vue

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

src/views/RecentOffersToUserProjectsView.vue

@@ -2,17 +2,27 @@
   <QuickNav selected="Home"></QuickNav>
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
-    <div id="ViewBreadcrumb" class="mb-8">
-      <h1 class="text-lg text-center font-light relative px-7">
-        <!-- Back -->
-        <font-awesome
-          icon="chevron-left"
-          class="fa-fw text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          @click="$router.back()"
-        />
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
         Offers to Your Projects
       </h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="$router.go(-1)"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <div v-if="newOffersToUserProjects.length === 0">
@@ -32,20 +42,20 @@
     </div>
 
     <InfiniteScroll @reached-bottom="loadMoreOffersToUserProjects">
-      <ul
-        data-testId="listRecentOffersToUserProjects"
-        class="border-t border-slate-300"
-      >
+      <ul data-testId="listRecentOffersToUserProjects">
         <li
           v-for="offer in newOffersToUserProjects"
           :key="offer.jwtId"
           class="mt-4 relative group"
         >
+          <!-- Last viewed separator -->
           <div
             v-if="offer.jwtId == lastAckedOfferToUserProjectsJwtId"
-            class="border-b border-slate-300 text-orange-400 pb-2 mb-2 font-bold text-sm"
+            class="border-b border-dashed border-slate-300 text-orange-400 mt-4 mb-6 font-bold text-sm"
           >
-            You've already seen all the following
+            <span class="block w-fit mx-auto -mb-2.5 bg-white px-2">
+              You've already seen all the following
+            </span>
           </div>
 
           <span>{{
@@ -147,6 +157,14 @@ export default class RecentOffersToUserView extends Vue {
       this.newOffersToUserProjects = offersToUserProjectsData.data;
       this.newOffersToUserProjectsAtEnd = !offersToUserProjectsData.hitLimit;
 
+      // Mark offers as read after data is loaded
+      if (this.newOffersToUserProjects.length > 0) {
+        await this.$updateSettings({
+          lastAckedOfferToUserProjectsJwtId:
+            this.newOffersToUserProjects[0].jwtId,
+        });
+      }
+
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (err: any) {
       logger.error("Error retrieving settings & contacts:", err);

src/views/RecentOffersToUserView.vue

@@ -2,17 +2,27 @@
   <QuickNav selected="Home"></QuickNav>
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
-    <div id="ViewBreadcrumb" class="mb-8">
-      <h1 class="text-lg text-center font-light relative px-7">
-        <!-- Back -->
-        <font-awesome
-          icon="chevron-left"
-          class="fa-fw text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          @click="$router.back()"
-        />
+    <!-- Sub View Heading -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
         Offers to You
       </h1>
+
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="$router.go(-1)"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
+
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <div v-if="newOffersToUser.length === 0">
@@ -27,20 +37,20 @@
       </p>
     </div>
     <InfiniteScroll @reached-bottom="loadMoreOffersToUser">
-      <ul
-        data-testId="listRecentOffersToUser"
-        class="border-t border-slate-300"
-      >
+      <ul data-testId="listRecentOffersToUser">
         <li
           v-for="offer in newOffersToUser"
           :key="offer.jwtId"
           class="mt-4 relative group"
         >
+          <!-- Last viewed separator -->
           <div
             v-if="offer.jwtId == lastAckedOfferToUserJwtId"
-            class="border-b border-slate-300 text-orange-400 pb-2 mb-2 font-bold text-sm"
+            class="border-b border-dashed border-slate-300 text-orange-400 mt-4 mb-6 font-bold text-sm"
           >
-            You've already seen all the following
+            <span class="block w-fit mx-auto -mb-2.5 bg-white px-2">
+              You've already seen all the following
+            </span>
           </div>
 
           <span>{{
@@ -138,6 +148,13 @@ export default class RecentOffersToUserView extends Vue {
       this.newOffersToUser = offersToUserData.data;
       this.newOffersToUserAtEnd = !offersToUserData.hitLimit;
 
+      // Mark offers as read after data is loaded
+      if (this.newOffersToUser.length > 0) {
+        await this.$updateSettings({
+          lastAckedOfferToUserJwtId: this.newOffersToUser[0].jwtId,
+        });
+      }
+
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (err: any) {
       logger.error("Error retrieving settings & contacts:", err);

src/views/SearchAreaView.vue

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

src/views/SeedBackupView.vue

@@ -28,31 +28,29 @@
 -->
 
 <template>
-  <QuickNav selected="Profile" />
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Back -->
-    <div class="text-lg text-center font-light relative px-7">
-      <h1
-        class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-        @click="goBack"
-      >
-        <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
+    <!-- Sub View Heading -->
+    <div class="flex gap-4 items-start mb-8">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
+        Seed Backup
       </h1>
-    </div>
 
-    <!-- Heading -->
-    <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
-      Seed Backup
-    </h1>
+      <!-- Back -->
+      <a
+        class="order-first text-lg text-center leading-none p-1"
+        @click="goBack()"
+      >
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+      </a>
 
-    <div class="flex justify-between py-2">
-      <span />
-      <span>
-        <router-link :to="{ name: 'help' }" :class="helpButtonClass">
-          Help
-        </router-link>
-      </span>
+      <!-- Help button -->
+      <router-link
+        :to="{ name: 'help' }"
+        class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+      >
+        <font-awesome icon="question" class="block text-center w-[1em]" />
+      </router-link>
     </div>
 
     <div v-if="activeAccount">
@@ -162,7 +160,7 @@ export default class SeedBackupView extends Vue {
   showSeed = false;
 
   // Notification helper system
-  notify = createNotifyHelpers(this.$notify);
+  notify!: ReturnType<typeof createNotifyHelpers>;
 
   /**
    * Computed property for consistent copy feedback styling
@@ -204,6 +202,9 @@ export default class SeedBackupView extends Vue {
    * Handles errors gracefully with user notifications.
    */
   async created() {
+    // Initialize notification helpers
+    this.notify = createNotifyHelpers(this.$notify);
+
     try {
       let activeDid = "";
 

src/views/ShareMyContactInfoView.vue

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

src/views/SharedPhotoView.vue

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

src/views/StartView.vue

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

src/views/StatisticsView.vue

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

src/views/TestView.vue

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

src/views/UserProfileView.vue

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

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

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

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

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

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);