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

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

.husky/pre-commit

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

BUILDING.md

@@ -1151,28 +1151,28 @@ If you need to build manually or want to understand the individual steps:
 
 - ... and you may have to fix these, especially with pkgx:
 
-```bash
+   ```bash
-gem_path=$(which gem)
+   gem_path=$(which gem)
-shortened_path="${gem_path:h:h}"
+   shortened_path="${gem_path:h:h}"
-export GEM_HOME=$shortened_path
+   export GEM_HOME=$shortened_path
-export GEM_PATH=$shortened_path
+   export GEM_PATH=$shortened_path
-```
+   ```
 
-##### 1. Bump the version in package.json for `MARKETING_VERSION`, then `grep CURRENT_PROJECT_VERSION ios/App/App.xcodeproj/project.pbxproj` and add 1 for the numbered version;
+##### 1. Bump the version in package.json, then here
 
-```bash
+   ```bash
-cd ios/App && xcrun agvtool new-version 47 && perl -p -i -e "s/MARKETING_VERSION = .*;/MARKETING_VERSION = 1.1.2;/g" App.xcodeproj/project.pbxproj && cd -
+   cd ios/App && xcrun agvtool new-version 40 && perl -p -i -e "s/MARKETING_VERSION = .*;/MARKETING_VERSION = 1.0.7;/g" App.xcodeproj/project.pbxproj && cd -
-# Unfortunately this edits Info.plist directly.
+   # Unfortunately this edits Info.plist directly.
-#xcrun agvtool new-marketing-version 0.4.5
+   #xcrun agvtool new-marketing-version 0.4.5
-```
+   ```
 
 ##### 2. Build
 
-Here's prod. Also available: test, dev
+  Here's prod. Also available: test, dev
 
-```bash
+  ```bash
-npm run build:ios:prod
+  npm run build:ios:prod
-```
+  ```
 
 3.1. Use Xcode to build and run on simulator or device.
 
@@ -1197,8 +1197,7 @@ npm run build:ios:prod
   - It can take 15 minutes for the build to show up in the list of builds.
   - You'll probably have to "Manage" something about encryption, disallowed in France.
   - Then "Save" and "Add to Review" and "Resubmit to App Review".
-- Eventually it'll be "Ready for Distribution" which means it's live
+- Eventually it'll be "Ready for Distribution" which means
-- When finished, bump package.json version
 
 ### Android Build
 
@@ -1316,26 +1315,26 @@ The recommended way to build for Android is using the automated build script:
 
 #### Android Manual Build Process
 
-##### 1. Bump the version in package.json, then update these versions & run:
+##### 1. Bump the version in package.json, then here: android/app/build.gradle
 
-```bash
+  ```bash
-perl -p -i -e 's/versionCode .*/versionCode 47/g' android/app/build.gradle
+  perl -p -i -e 's/versionCode .*/versionCode 40/g' android/app/build.gradle
-perl -p -i -e 's/versionName .*/versionName "1.1.2"/g' android/app/build.gradle
+  perl -p -i -e 's/versionName .*/versionName "1.0.7"/g' android/app/build.gradle
-```
+  ```
 
 ##### 2. Build
 
   Here's prod. Also available: test, dev
 
-```bash
+  ```bash
-npm run build:android:prod
+  npm run build:android:prod
-```
+  ```
 
 ##### 3. Open the project in Android Studio
 
-```bash
+   ```bash
-npx cap open android
+   npx cap open android
-```
+   ```
 
 ##### 4. Use Android Studio to build and run on emulator or device
 
@@ -1380,8 +1379,6 @@ At play.google.com/console:
 - Note that if you add testers, you have to go to "Publishing Overview" and send
   those changes or your (closed) testers won't see it.
 
-- When finished, bump package.json version
-
 ### Capacitor Operations
 
 ```bash

CHANGELOG.md

@@ -5,21 +5,6 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-
-## [1.1.2] - 2025.11.06
-
-### Fixed
-- Bad page when user follows prompt to backup seed
-
-
-## [1.1.1] - 2025.11.03
-
-### Added
-- Meeting onboarding via prompts
-- Emojis on gift feed
-- Starred projects with notification
-
-
 ## [1.0.7] - 2025.08.18
 
 ### Fixed

android/app/build.gradle

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

ios/App/App.xcodeproj/project.pbxproj

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

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "timesafari",
-  "version": "1.1.3-beta",
+  "version": "1.1.0-beta",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "timesafari",
-      "version": "1.1.3-beta",
+      "version": "1.1.0-beta",
       "dependencies": {
         "@capacitor-community/electron": "^5.0.1",
         "@capacitor-community/sqlite": "6.0.2",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "timesafari",
-  "version": "1.1.3-beta",
+  "version": "1.1.1-beta",
   "description": "Time Safari Application",
   "author": {
     "name": "Time Safari Team"

scripts/build-android.sh

@@ -436,21 +436,7 @@ fi
 log_info "Cleaning dist directory..."
 clean_build_artifacts "dist"
 
-# Step 4: Run TypeScript type checking for test and production builds
+# Step 4: Build Capacitor version with mode
-if [ "$BUILD_MODE" = "production" ] || [ "$BUILD_MODE" = "test" ]; then
-    log_info "Running TypeScript type checking for $BUILD_MODE mode..."
-    
-    if ! measure_time npm run type-check; then
-        log_error "TypeScript type checking failed for $BUILD_MODE mode!"
-        exit 2
-    fi
-    
-    log_success "TypeScript type checking completed for $BUILD_MODE mode"
-else
-    log_debug "Skipping TypeScript type checking for development mode"
-fi
-
-# Step 5: Build Capacitor version with mode
 if [ "$BUILD_MODE" = "development" ]; then
     safe_execute "Building Capacitor version (development)" "npm run build:capacitor" || exit 3
 elif [ "$BUILD_MODE" = "test" ]; then
@@ -459,23 +445,23 @@ elif [ "$BUILD_MODE" = "production" ]; then
     safe_execute "Building Capacitor version (production)" "npm run build:capacitor -- --mode production" || exit 3
 fi
 
-# Step 6: Clean Gradle build
+# Step 5: Clean Gradle build
 safe_execute "Cleaning Gradle build" "cd android && ./gradlew clean && cd .." || exit 4
 
-# Step 7: Build based on type
+# Step 6: Build based on type
 if [ "$BUILD_TYPE" = "debug" ]; then
     safe_execute "Assembling debug build" "cd android && ./gradlew assembleDebug && cd .." || exit 5
 elif [ "$BUILD_TYPE" = "release" ]; then
     safe_execute "Assembling release build" "cd android && ./gradlew assembleRelease && cd .." || exit 5
 fi
 
-# Step 8: Sync with Capacitor
+# Step 7: Sync with Capacitor
 safe_execute "Syncing with Capacitor" "npx cap sync android" || exit 6
 
-# Step 9: Generate assets
+# Step 8: Generate assets
 safe_execute "Generating assets" "npx capacitor-assets generate --android" || exit 7
 
-# Step 10: Build APK/AAB if requested
+# Step 9: Build APK/AAB if requested
 if [ "$BUILD_APK" = true ]; then
     if [ "$BUILD_TYPE" = "debug" ]; then
         safe_execute "Building debug APK" "cd android && ./gradlew assembleDebug && cd .." || exit 5
@@ -488,7 +474,7 @@ if [ "$BUILD_AAB" = true ]; then
     safe_execute "Building AAB" "cd android && ./gradlew bundleRelease && cd .." || exit 5
 fi
 
-# Step 11: Auto-run app if requested
+# Step 10: Auto-run app if requested
 if [ "$AUTO_RUN" = true ]; then
     log_step "Auto-running Android app..."
     safe_execute "Launching app" "npx cap run android" || {
@@ -499,7 +485,7 @@ if [ "$AUTO_RUN" = true ]; then
     log_success "Android app launched successfully!"
 fi
 
-# Step 12: Open Android Studio if requested
+# Step 11: Open Android Studio if requested
 if [ "$OPEN_STUDIO" = true ]; then
     safe_execute "Opening Android Studio" "npx cap open android" || exit 8
 fi

scripts/build-ios.sh

@@ -381,21 +381,7 @@ safe_execute "Cleaning iOS build" "clean_ios_build" || exit 1
 log_info "Cleaning dist directory..."
 clean_build_artifacts "dist"
 
-# Step 4: Run TypeScript type checking for test and production builds
+# Step 4: Build Capacitor version with mode
-if [ "$BUILD_MODE" = "production" ] || [ "$BUILD_MODE" = "test" ]; then
-    log_info "Running TypeScript type checking for $BUILD_MODE mode..."
-    
-    if ! measure_time npm run type-check; then
-        log_error "TypeScript type checking failed for $BUILD_MODE mode!"
-        exit 2
-    fi
-    
-    log_success "TypeScript type checking completed for $BUILD_MODE mode"
-else
-    log_debug "Skipping TypeScript type checking for development mode"
-fi
-
-# Step 5: Build Capacitor version with mode
 if [ "$BUILD_MODE" = "development" ]; then
     safe_execute "Building Capacitor version (development)" "npm run build:capacitor" || exit 3
 elif [ "$BUILD_MODE" = "test" ]; then
@@ -404,16 +390,16 @@ elif [ "$BUILD_MODE" = "production" ]; then
     safe_execute "Building Capacitor version (production)" "npm run build:capacitor -- --mode production" || exit 3
 fi
 
-# Step 6: Sync with Capacitor
+# Step 5: Sync with Capacitor
 safe_execute "Syncing with Capacitor" "npx cap sync ios" || exit 6
 
-# Step 7: Generate assets
+# Step 6: Generate assets
 safe_execute "Generating assets" "npx capacitor-assets generate --ios" || exit 7
 
-# Step 8: Build iOS app
+# Step 7: Build iOS app
 safe_execute "Building iOS app" "build_ios_app" || exit 5
 
-# Step 9: Build IPA/App if requested
+# Step 8: Build IPA/App if requested
 if [ "$BUILD_IPA" = true ]; then
     log_info "Building IPA package..."
     cd ios/App
@@ -440,12 +426,12 @@ if [ "$BUILD_APP" = true ]; then
     log_success "App bundle built successfully"
 fi
 
-# Step 10: Auto-run app if requested
+# Step 9: Auto-run app if requested
 if [ "$AUTO_RUN" = true ]; then
     safe_execute "Auto-running iOS app" "auto_run_ios_app" || exit 9
 fi
 
-# Step 11: Open Xcode if requested
+# Step 10: Open Xcode if requested
 if [ "$OPEN_STUDIO" = true ]; then
     safe_execute "Opening Xcode" "npx cap open ios" || exit 8
 fi

src/assets/styles/tailwind.css

@@ -38,7 +38,7 @@
 	}
 
 	.dialog {
-		@apply bg-white px-4 py-6 rounded-lg w-full max-w-lg max-h-[calc(100vh-3rem)] overflow-y-auto;
+		@apply bg-white p-4 rounded-lg w-full max-w-lg;
 	}
 
 	/* Markdown content styling to restore list elements */

src/components/ActivityListItem.vue

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

src/components/EntityGrid.vue

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

src/components/EntitySelectionStep.vue

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

src/components/FeedFilters.vue

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

src/components/GiftedDialog.vue

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

src/components/MembersList.vue

@@ -1,255 +1,223 @@
 <template>
-  <div>
+  <div class="space-y-4">
-    <div class="space-y-4">
+    <!-- Loading State -->
-      <!-- Loading State -->
+    <div
-      <div
+      v-if="isLoading"
-        v-if="isLoading"
+      class="mt-16 text-center text-4xl bg-slate-400 text-white w-14 py-2.5 rounded-full mx-auto"
-        class="mt-16 text-center text-4xl bg-slate-400 text-white w-14 py-2.5 rounded-full mx-auto"
+    >
-      >
+      <font-awesome icon="spinner" class="fa-spin-pulse" />
-        <font-awesome icon="spinner" class="fa-spin-pulse" />
+    </div>
+
+    <!-- Members List -->
+
+    <div v-else>
+      <div class="text-center text-red-600 my-4">
+        {{ decryptionErrorMessage() }}
       </div>
 
-      <!-- Members List -->
+      <div v-if="missingMyself" class="py-4 text-red-600">
+        You are not currently admitted by the organizer.
+      </div>
+      <div v-if="!firstName" class="py-4 text-red-600">
+        Your name is not set, so others may not recognize you. Reload this page
+        to set it.
+      </div>
 
-      <div v-else>
+      <ul class="list-disc text-sm ps-4 space-y-2 mb-4">
-        <div class="text-center text-red-600 my-4">
+        <li
-          {{ decryptionErrorMessage() }}
+          v-if="membersToShow().length > 0 && showOrganizerTools && isOrganizer"
-        </div>
+        >
+          Click
+          <font-awesome icon="circle-plus" class="text-blue-500 text-sm" />
+          /
+          <font-awesome icon="circle-minus" class="text-rose-500 text-sm" />
+          to add/remove them to/from the meeting.
+        </li>
+        <li v-if="membersToShow().length > 0">
+          Click
+          <font-awesome icon="circle-user" class="text-green-600 text-sm" />
+          to add them to your contacts.
+        </li>
+      </ul>
 
-        <div v-if="missingMyself" class="py-4 text-red-600">
+      <div class="flex justify-between">
-          You are not currently admitted by the organizer.
+        <!-- 
-        </div>
-        <div v-if="!firstName" class="py-4 text-red-600">
-          Your name is not set, so others may not recognize you. Reload this
-          page to set it.
-        </div>
-
-        <ul class="list-disc text-sm ps-4 space-y-2 mb-4">
-          <li
-            v-if="
-              membersToShow().length > 0 && showOrganizerTools && isOrganizer
-            "
-          >
-            Click
-            <font-awesome icon="circle-plus" class="text-blue-500 text-sm" />
-            /
-            <font-awesome icon="circle-minus" class="text-rose-500 text-sm" />
-            to add/remove them to/from the meeting.
-          </li>
-          <li
-            v-if="
-              membersToShow().length > 0 && getNonContactMembers().length > 0
-            "
-          >
-            Click
-            <font-awesome icon="circle-user" class="text-green-600 text-sm" />
-            to add them to your contacts.
-          </li>
-        </ul>
-
-        <div class="flex justify-between">
-          <!-- 
         always have at least one refresh button even without members in case the organizer 
          changes the password 
          -->
-          <button
+        <button
-            class="text-sm bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-3 py-1.5 rounded-md"
+          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"
+          title="Refresh members list now"
-            @click="refreshData(false)"
+          @click="manualRefresh"
-          >
-            <font-awesome icon="rotate" :class="{ 'fa-spin': isLoading }" />
-            Refresh
-            <span class="text-xs">({{ countdownTimer }}s)</span>
-          </button>
-        </div>
-        <ul
-          v-if="membersToShow().length > 0"
-          class="border-t border-slate-300 my-2"
         >
-          <li
+          <font-awesome icon="rotate" :class="{ 'fa-spin': isLoading }" />
-            v-for="member in membersToShow()"
+          Refresh
-            :key="member.member.memberId"
+          <span class="text-xs">({{ countdownTimer }}s)</span>
-            :class="[
+        </button>
-              'border-b px-2 sm:px-3 py-1.5',
-              {
-                'bg-blue-50 border-t border-blue-300 -mt-[1px]':
-                  !member.member.admitted &&
-                  (isOrganizer || member.did === activeDid),
-              },
-              { 'border-slate-300': member.member.admitted },
-            ]"
-          >
-            <div class="flex items-center gap-2 justify-between">
-              <div class="flex items-center gap-1 overflow-hidden">
-                <h3
-                  :class="[
-                    'font-semibold truncate',
-                    {
-                      'text-slate-500':
-                        !member.member.admitted &&
-                        (isOrganizer || member.did === activeDid),
-                    },
-                  ]"
-                >
-                  <font-awesome
-                    v-if="member.member.memberId === members[0]?.memberId"
-                    icon="crown"
-                    class="fa-fw text-amber-400"
-                  />
-                  <font-awesome
-                    v-if="member.did === activeDid"
-                    icon="hand"
-                    class="fa-fw text-slate-500"
-                  />
-                  <font-awesome
-                    v-if="
-                      !member.member.admitted &&
-                      (isOrganizer || member.did === activeDid)
-                    "
-                    icon="hourglass-half"
-                    class="fa-fw text-slate-400"
-                  />
-                  {{ member.name || unnamedMember }}
-                </h3>
-                <div
-                  v-if="!getContactFor(member.did) && member.did !== activeDid"
-                  class="flex items-center gap-1.5 ml-2 ms-1"
-                >
-                  <button
-                    class="btn-add-contact ml-2"
-                    title="Add as contact"
-                    @click="addAsContact(member)"
-                  >
-                    <font-awesome icon="circle-user" />
-                  </button>
 
-                  <button
+        <button
-                    class="btn-info-contact ml-2"
+          v-if="getPendingMembersCount() > 0"
-                    title="Contact Info"
+          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="
+          @click="showAdmitAllPendingDialog"
-                      informAboutAddingContact(
+        >
-                        getContactFor(member.did) !== undefined,
+          <font-awesome icon="circle-plus" class="text-blue-500" />
-                      )
+          Admit Pending
-                    "
+        </button>
-                  >
+      </div>
-                    <font-awesome icon="circle-info" />
+      <ul
-                  </button>
+        v-if="membersToShow().length > 0"
-                </div>
+        class="border-t border-slate-300 my-2"
-                <div
+      >
-                  v-if="getContactFor(member.did) && member.did !== activeDid"
+        <li
-                  class="flex items-center gap-1.5 ms-1"
+          v-for="member in membersToShow()"
-                >
+          :key="member.member.memberId"
-                  <router-link
+          :class="[
-                    :to="{ name: 'contact-edit', params: { did: member.did } }"
+            'border-b px-2 sm:px-3 py-1.5',
-                  >
+            {
-                    <font-awesome
+              'bg-blue-50 border-t border-blue-300 -mt-[1px]':
-                      icon="pen"
+                !member.member.admitted,
-                      class="text-sm text-blue-500 ml-2 mb-1"
+            },
-                    />
+            { 'border-slate-300': member.member.admitted },
-                  </router-link>
+          ]"
-                  <router-link
+        >
-                    :to="{ name: 'did', params: { did: member.did } }"
+          <div class="flex items-center gap-2 justify-between">
-                  >
+            <div class="flex items-center gap-1 overflow-hidden">
-                    <font-awesome
+              <h3
-                      icon="arrow-up-right-from-square"
+                :class="[
-                      class="text-sm text-blue-500 ml-2 mb-1"
+                  'font-semibold truncate',
-                    />
+                  { 'text-slate-500': !member.member.admitted },
-                  </router-link>
+                ]"
-                </div>
+              >
-              </div>
+                <font-awesome
-              <span
+                  v-if="member.member.memberId === members[0]?.memberId"
-                v-if="
+                  icon="crown"
-                  showOrganizerTools && isOrganizer && member.did !== activeDid
+                  class="fa-fw text-amber-400"
-                "
+                />
-                class="flex items-center gap-1.5"
+                <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="
+                  class="btn-add-contact"
-                    member.member.admitted
+                  title="Add as contact"
-                      ? 'btn-admission-remove'
+                  @click="addAsContact(member)"
-                      : 'btn-admission-add'
-                  "
-                  :title="
-                    member.member.admitted ? 'Remove member' : 'Admit member'
-                  "
-                  @click="checkWhetherContactBeforeAdmitting(member)"
                 >
-                  <font-awesome
+                  <font-awesome icon="circle-user" />
-                    :icon="
-                      member.member.admitted ? 'circle-minus' : 'circle-plus'
-                    "
-                  />
                 </button>
 
                 <button
-                  class="btn-info-admission"
+                  class="btn-info-contact"
-                  title="Admission Info"
+                  title="Contact Info"
-                  @click="informAboutAdmission()"
+                  @click="
+                    informAboutAddingContact(
+                      getContactFor(member.did) !== undefined,
+                    )
+                  "
                 >
                   <font-awesome icon="circle-info" />
                 </button>
-              </span>
+              </div>
             </div>
-            <p class="text-xs text-gray-600 truncate">
+            <span
-              {{ member.did }}
+              v-if="
-            </p>
+                showOrganizerTools && isOrganizer && member.did !== activeDid
-          </li>
+              "
-        </ul>
+              class="flex items-center gap-1.5"
+            >
+              <button
+                :class="
+                  member.member.admitted
+                    ? 'btn-admission-remove'
+                    : 'btn-admission-add'
+                "
+                :title="
+                  member.member.admitted ? 'Remove member' : 'Admit member'
+                "
+                @click="checkWhetherContactBeforeAdmitting(member)"
+              >
+                <font-awesome
+                  :icon="
+                    member.member.admitted ? 'circle-minus' : 'circle-plus'
+                  "
+                />
+              </button>
 
-        <div v-if="membersToShow().length > 0" class="flex justify-between">
+              <button
-          <!-- 
+                class="btn-info-admission"
+                title="Admission Info"
+                @click="informAboutAdmission()"
+              >
+                <font-awesome icon="circle-info" />
+              </button>
+            </span>
+          </div>
+          <p class="text-xs text-gray-600 truncate">
+            {{ member.did }}
+          </p>
+        </li>
+      </ul>
+
+      <div v-if="membersToShow().length > 0" class="flex justify-between">
+        <!-- 
         always have at least one refresh button even without members in case the organizer 
          changes the password 
          -->
-          <button
+        <button
-            class="text-sm bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-3 py-1.5 rounded-md"
+          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"
+          title="Refresh members list now"
-            @click="refreshData(false)"
+          @click="manualRefresh"
-          >
+        >
-            <font-awesome icon="rotate" :class="{ 'fa-spin': isLoading }" />
+          <font-awesome icon="rotate" :class="{ 'fa-spin': isLoading }" />
-            Refresh
+          Refresh
-            <span class="text-xs">({{ countdownTimer }}s)</span>
+          <span class="text-xs">({{ countdownTimer }}s)</span>
-          </button>
+        </button>
-        </div>
-
-        <p v-if="members.length === 0" class="text-gray-500 py-4">
-          No members have joined this meeting yet
-        </p>
       </div>
-    </div>
 
-    <!-- Bulk Members Dialog for both admitting and setting visibility -->
+      <p v-if="members.length === 0" class="text-gray-500 py-4">
-    <BulkMembersDialog
+        No members have joined this meeting yet
-      ref="bulkMembersDialog"
+      </p>
-      :active-did="activeDid"
+    </div>
-      :api-server="apiServer"
-      :is-organizer="isOrganizer"
-      @close="closeBulkMembersDialogCallback"
-    />
   </div>
+
+  <!-- Set Visibility Dialog Component -->
+  <SetBulkVisibilityDialog
+    :visible="showSetVisibilityDialog"
+    :members-data="visibilityDialogMembers"
+    :active-did="activeDid"
+    :api-server="apiServer"
+    @close="closeSetVisibilityDialog"
+  />
 </template>
 
 <script lang="ts">
 import { Component, Vue, Prop, Emit } from "vue-facing-decorator";
 
-import { NotificationIface } from "@/constants/app";
-import {
-  NOTIFY_ADD_CONTACT_FIRST,
-  NOTIFY_CONTINUE_WITHOUT_ADDING,
-} from "@/constants/notifications";
-import { SOMEONE_UNNAMED } from "@/constants/entities";
 import {
   errorStringForLog,
   getHeaders,
   register,
   serverMessageForUser,
-} from "@/libs/endorserServer";
+} from "../libs/endorserServer";
-import { decryptMessage } from "@/libs/crypto";
+import { decryptMessage } from "../libs/crypto";
-import { Contact } from "@/db/tables/contacts";
+import { Contact } from "../db/tables/contacts";
-import { MemberData } from "@/interfaces";
+import * as libsUtil from "../libs/util";
+import { NotificationIface } from "../constants/app";
 import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
 import { createNotifyHelpers, TIMEOUTS } from "@/utils/notify";
-import BulkMembersDialog from "./BulkMembersDialog.vue";
+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;
@@ -266,7 +234,7 @@ interface DecryptedMember {
 
 @Component({
   components: {
-    BulkMembersDialog,
+    SetBulkVisibilityDialog,
   },
   mixins: [PlatformServiceMixin],
 })
@@ -274,6 +242,7 @@ export default class MembersList extends Vue {
   $notify!: (notification: NotificationIface, timeout?: number) => void;
 
   notify!: ReturnType<typeof createNotifyHelpers>;
+  libsUtil = libsUtil;
 
   @Prop({ required: true }) password!: string;
   @Prop({ default: false }) showOrganizerTools!: boolean;
@@ -284,7 +253,6 @@ export default class MembersList extends Vue {
     return message;
   }
 
-  contacts: Array<Contact> = [];
   decryptedMembers: DecryptedMember[] = [];
   firstName = "";
   isLoading = true;
@@ -295,11 +263,23 @@ export default class MembersList extends Vue {
   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;
-  previousMemberDidsIgnored: string[] = [];
+
+  // Track previous visibility members to detect changes
+  previousVisibilityMembers: string[] = [];
 
   /**
    * Get the unnamed member constant
@@ -320,8 +300,23 @@ export default class MembersList extends Vue {
 
     this.apiServer = settings.apiServer || "";
     this.firstName = settings.firstName || "";
+    await this.fetchMembers();
+    await this.loadContacts();
 
-    this.refreshData();
+    // 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() {
@@ -367,10 +362,7 @@ export default class MembersList extends Vue {
         const content = JSON.parse(decryptedContent);
 
         this.decryptedMembers.push({
-          member: {
+          member: member,
-            ...member,
-            admitted: member.admitted !== undefined ? member.admitted : true, // Default to true for non-organizers
-          },
           name: content.name,
           did: content.did,
           isRegistered: !!content.isRegistered,
@@ -423,57 +415,25 @@ export default class MembersList extends Vue {
         );
       }
     } else {
-      // non-organizers only get visible members from server, plus themselves
+      // non-organizers only get visible members from server
-
+      members = this.decryptedMembers;
-      // Check if current user is already in the decrypted members list
-      if (
-        !this.decryptedMembers.find((member) => member.did === this.activeDid)
-      ) {
-        // this is a stub for this user just in case they are waiting to get in
-        // which is especially useful so they can see their own DID
-        const currentUser: DecryptedMember = {
-          member: {
-            admitted: false,
-            content: "{}",
-            memberId: -1,
-          },
-          name: this.firstName,
-          did: this.activeDid,
-          isRegistered: false,
-        };
-        members = [currentUser, ...this.decryptedMembers];
-      } else {
-        members = this.decryptedMembers;
-      }
     }
 
     // Sort members according to priority:
     // 1. Organizer at the top
-    // 2. Current user next
+    // 2. Non-admitted members next
-    // 3. Non-admitted members next
+    // 3. Everyone else after
-    // 4. Everyone else after
     return members.sort((a, b) => {
       // Check if either member is the organizer (first member in original list)
       const aIsOrganizer = a.member.memberId === this.members[0]?.memberId;
       const bIsOrganizer = b.member.memberId === this.members[0]?.memberId;
 
-      // Check if either member is the current user
-      const aIsCurrentUser = a.did === this.activeDid;
-      const bIsCurrentUser = b.did === this.activeDid;
-
       // Organizer always comes first
       if (aIsOrganizer && !bIsOrganizer) return -1;
       if (!aIsOrganizer && bIsOrganizer) return 1;
 
-      // If both are organizers, maintain original order
+      // If both are organizers or neither are organizers, sort by admission status
-      if (aIsOrganizer && bIsOrganizer) return 0;
+      if (aIsOrganizer && bIsOrganizer) return 0; // Both organizers, maintain original order
-
-      // Current user comes second (after organizer)
-      if (aIsCurrentUser && !bIsCurrentUser && !bIsOrganizer) return -1;
-      if (!aIsCurrentUser && bIsCurrentUser && !aIsOrganizer) return 1;
-
-      // If both are current users, maintain original order
-      if (aIsCurrentUser && bIsCurrentUser) return 0;
 
       // Non-admitted members come before admitted members
       if (!a.member.admitted && b.member.admitted) return -1;
@@ -505,85 +465,92 @@ export default class MembersList extends Vue {
     }
   }
 
+  async loadContacts() {
+    this.contacts = await this.$getAllContacts();
+  }
+
   getContactFor(did: string): Contact | undefined {
     return this.contacts.find((contact) => contact.did === did);
   }
 
-  getPendingMembersToAdmit(): MemberData[] {
+  getMembersForVisibility() {
     return this.decryptedMembers
-      .filter(
+      .filter((member) => {
-        (member) => member.did !== this.activeDid && !member.member.admitted,
+        // Exclude the current user
-      )
+        if (member.did === this.activeDid) {
-      .map(this.convertDecryptedMemberToMemberData);
+          return false;
-  }
+        }
 
-  getNonContactMembers(): MemberData[] {
+        const contact = this.getContactFor(member.did);
-    return this.decryptedMembers
-      .filter(
-        (member) =>
-          member.did !== this.activeDid && !this.getContactFor(member.did),
-      )
-      .map(this.convertDecryptedMemberToMemberData);
-  }
 
-  convertDecryptedMemberToMemberData(
+        // Include members who:
-    decryptedMember: DecryptedMember,
+        // 1. Haven't been added as contacts yet, OR
-  ): MemberData {
+        // 2. Are contacts but don't have visibility set (seesMe property)
-    return {
+        return !contact || !contact.seesMe;
-      did: decryptedMember.did,
+      })
-      name: decryptedMember.name,
+      .map((member) => ({
-      isContact: !!this.getContactFor(decryptedMember.did),
+        did: member.did,
-      member: {
+        name: member.name,
-        memberId: decryptedMember.member.memberId.toString(),
+        isContact: !!this.getContactFor(member.did),
-      },
+        member: {
-    };
+          memberId: member.member.memberId.toString(),
+        },
+      }));
   }
 
   /**
-   * Show the bulk members dialog if conditions are met
+   * Check if we should show the visibility dialog
-   * (admit pending members for organizers, add to contacts for non-organizers)
+   * 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)
    */
-  async refreshData(bypassPromptIfAllWereIgnored = true) {
+  shouldShowVisibilityDialog(): boolean {
-    // Force refresh both contacts and members
+    const currentMembers = this.getMembersForVisibility();
-    this.contacts = await this.$getAllContacts();
-    await this.fetchMembers();
 
-    const pendingMembers = this.isOrganizer
+    if (currentMembers.length === 0) {
-      ? this.getPendingMembersToAdmit()
+      return false;
-      : this.getNonContactMembers();
-    if (pendingMembers.length === 0) {
-      this.startAutoRefresh();
-      return;
     }
-    if (bypassPromptIfAllWereIgnored) {
+
-      // only show if there are members that have not been ignored
+    // If no previous members tracked, show dialog
-      const pendingMembersNotIgnored = pendingMembers.filter(
+    if (this.previousVisibilityMembers.length === 0) {
-        (member) => !this.previousMemberDidsIgnored.includes(member.did),
+      return true;
-      );
-      if (pendingMembersNotIgnored.length === 0) {
-        this.startAutoRefresh();
-        // everyone waiting has been ignored
-        return;
-      }
     }
-    this.stopAutoRefresh();
+
-    (this.$refs.bulkMembersDialog as BulkMembersDialog).open(pendingMembers);
+    // 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;
   }
 
-  // Bulk Members Dialog methods
+  /**
-  async closeBulkMembersDialogCallback(
+   * Update the tracking of previous visibility members
-    result: { notSelectedMemberDids: string[] } | undefined,
+   */
-  ) {
+  updatePreviousVisibilityMembers() {
-    this.previousMemberDidsIgnored = result?.notSelectedMemberDids || [];
+    const currentMembers = this.getMembersForVisibility();
+    this.previousVisibilityMembers = currentMembers.map((m) => m.did);
+  }
 
-    await this.refreshData();
+  /**
+   * 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) {
-      // If not a contact, stop auto-refresh and show confirmation dialog
+      // If not a contact, show confirmation dialog
-      this.stopAutoRefresh();
       this.$notify(
         {
           group: "modal",
@@ -596,7 +563,6 @@ export default class MembersList extends Vue {
             await this.addAsContact(decrMember);
             // After adding as contact, proceed with admission
             await this.toggleAdmission(decrMember);
-            this.startAutoRefresh();
           },
           onNo: async () => {
             // If they choose not to add as contact, show second confirmation
@@ -609,19 +575,14 @@ export default class MembersList extends Vue {
                 yesText: NOTIFY_CONTINUE_WITHOUT_ADDING.yesText,
                 onYes: async () => {
                   await this.toggleAdmission(decrMember);
-                  this.startAutoRefresh();
                 },
                 onCancel: async () => {
                   // Do nothing, effectively canceling the operation
-                  this.startAutoRefresh();
                 },
               },
               TIMEOUTS.MODAL,
             );
           },
-          onCancel: async () => {
-            this.startAutoRefresh();
-          },
         },
         TIMEOUTS.MODAL,
       );
@@ -724,8 +685,19 @@ export default class MembersList extends Vue {
     }
   }
 
-  startAutoRefresh() {
+  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;
 
@@ -755,6 +727,141 @@ export default class MembersList extends Vue {
     }
   }
 
+  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();
   }

src/components/PersonCard.vue

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

src/components/ProjectCard.vue

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

src/components/ProjectRepresentativeDialog.vue

@@ -1,117 +0,0 @@
-<template>
-  <div v-if="visible" class="dialog-overlay">
-    <div class="dialog">
-      <!-- Header -->
-      <h2 class="text-lg font-semibold leading-[1.25] mb-4">
-        Select Representative
-      </h2>
-
-      <!-- EntityGrid for contacts -->
-      <EntityGrid
-        :entity-type="'people'"
-        :entities="allContacts"
-        :active-did="activeDid"
-        :all-my-dids="allMyDids"
-        :all-contacts="allContacts"
-        :conflict-checker="() => false"
-        :show-you-entity="false"
-        :show-unnamed-entity="false"
-        :notify="notify"
-        :conflict-context="'representative'"
-        @entity-selected="handleEntitySelected"
-      />
-
-      <!-- Cancel Button -->
-      <div class="flex gap-2 mt-4">
-        <button
-          class="block w-full text-center text-md uppercase 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-2 py-2 rounded-md"
-          @click="handleCancel"
-        >
-          Cancel
-        </button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Prop, Vue, Emit } from "vue-facing-decorator";
-import EntityGrid from "./EntityGrid.vue";
-import { Contact } from "../db/tables/contacts";
-import { NotificationIface } from "../constants/app";
-
-/**
- * ProjectRepresentativeDialog - Dialog for selecting an authorized representative
- *
- * Features:
- * - EntityGrid integration for contact selection
- * - No special entities (You, Unnamed)
- * - Immediate assignment on contact selection
- * - Cancel button to close without selection
- */
-@Component({
-  components: {
-    EntityGrid,
-  },
-})
-export default class ProjectRepresentativeDialog extends Vue {
-  /** Whether the dialog is visible */
-  visible = false;
-
-  /** Array of available contacts */
-  @Prop({ required: true })
-  allContacts!: Contact[];
-
-  /** Active user's DID */
-  @Prop({ required: true })
-  activeDid!: string;
-
-  /** All user's DIDs */
-  @Prop({ required: true })
-  allMyDids!: string[];
-
-  /** Notification function from parent component */
-  @Prop()
-  notify?: (notification: NotificationIface, timeout?: number) => void;
-
-  /**
-   * Handle entity selection from EntityGrid
-   * Immediately assigns the selected contact and closes the dialog
-   */
-  handleEntitySelected(event: { type: "person" | "project"; data: Contact }) {
-    const contact = event.data as Contact;
-    this.emitAssign(contact);
-    this.close();
-  }
-
-  /**
-   * Handle cancel button click
-   */
-  handleCancel(): void {
-    this.close();
-  }
-
-  /**
-   * Open the dialog
-   */
-  open(): void {
-    this.visible = true;
-  }
-
-  /**
-   * Close the dialog
-   */
-  close(): void {
-    this.visible = false;
-  }
-
-  // Emit methods using @Emit decorator
-
-  @Emit("assign")
-  emitAssign(contact: Contact): Contact {
-    return contact;
-  }
-}
-</script>
-
-<style scoped></style>

src/components/SetBulkVisibilityDialog.vue

@@ -3,18 +3,18 @@
     <div class="dialog">
       <div class="text-slate-900 text-center">
         <h3 class="text-lg font-semibold leading-[1.25] mb-2">
-          {{ title }}
+          Set Visibility to Meeting Members
         </h3>
         <p class="text-sm mb-4">
-          {{ description }}
+          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>
 
-        <!-- Member Selection Table -->
+        <!-- Custom table area - you can customize this -->
-        <div class="mb-4">
+        <div v-if="shouldInitializeSelection" class="mb-4">
           <table
             class="w-full border-collapse border border-slate-300 text-sm text-start"
           >
-            <!-- Select All Header -->
             <thead v-if="membersData && membersData.length > 0">
               <tr class="bg-slate-100 font-medium">
                 <th class="border border-slate-300 px-3 py-2">
@@ -31,15 +31,14 @@
               </tr>
             </thead>
             <tbody>
-              <!-- Empty State -->
+              <!-- 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"
                 >
-                  {{ emptyStateText }}
+                  No members need visibility settings
                 </td>
               </tr>
-              <!-- Member Rows -->
               <tr
                 v-for="member in membersData || []"
                 :key="member.member.memberId"
@@ -52,24 +51,10 @@
                         :checked="isMemberSelected(member.did)"
                         @change="toggleMemberSelection(member.did)"
                       />
-                      <div class="">
+                      {{ member.name || SOMEONE_UNNAMED }}
-                        <div class="text-sm font-semibold">
-                          {{ member.name || SOMEONE_UNNAMED }}
-                        </div>
-                        <div
-                          class="flex items-center gap-0.5 text-xs text-slate-500"
-                        >
-                          <span class="font-semibold sm:hidden">DID:</span>
-                          <span
-                            class="w-[35vw] sm:w-auto truncate text-left"
-                            style="direction: rtl"
-                            >{{ member.did }}</span
-                          >
-                        </div>
-                      </div>
                     </label>
 
-                    <!-- Contact indicator - only show if they are already a contact -->
+                    <!-- Friend indicator - only show if they are already a contact -->
                     <font-awesome
                       v-if="member.isContact"
                       icon="user-circle"
@@ -80,28 +65,10 @@
                 </td>
               </tr>
             </tbody>
-            <!-- Select All Footer -->
-            <tfoot v-if="membersData && membersData.length > 0">
-              <tr class="bg-slate-100 font-medium">
-                <th class="border border-slate-300 px-3 py-2">
-                  <label class="flex items-center gap-2">
-                    <input
-                      type="checkbox"
-                      :checked="isAllSelected"
-                      :indeterminate="isIndeterminate"
-                      @change="toggleSelectAll"
-                    />
-                    Select All
-                  </label>
-                </th>
-              </tr>
-            </tfoot>
           </table>
         </div>
 
-        <!-- Action Buttons -->
         <div class="space-y-2">
-          <!-- Main Action Button -->
           <button
             v-if="membersData && membersData.length > 0"
             :disabled="!hasSelectedMembers"
@@ -111,16 +78,17 @@
                 ? 'bg-blue-600 text-white cursor-pointer'
                 : 'bg-slate-400 text-slate-200 cursor-not-allowed',
             ]"
-            @click="processSelectedMembers"
+            @click="setVisibilityForSelectedMembers"
           >
-            {{ buttonText }}
+            Set Visibility
           </button>
-          <!-- Cancel Button -->
           <button
             class="block w-full text-center text-md font-bold uppercase bg-slate-600 text-white px-2 py-2 rounded-md"
             @click="cancel"
           >
-            Maybe Later
+            {{
+              membersData && membersData.length > 0 ? "Maybe Later" : "Cancel"
+            }}
           </button>
         </div>
       </div>
@@ -133,20 +101,26 @@ import { Vue, Component, Prop } from "vue-facing-decorator";
 
 import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
 import { SOMEONE_UNNAMED } from "@/constants/entities";
-import { MemberData } from "@/interfaces";
+import { setVisibilityUtil } from "@/libs/endorserServer";
-import { setVisibilityUtil, getHeaders, register } from "@/libs/endorserServer";
 import { createNotifyHelpers } from "@/utils/notify";
-import { Contact } from "@/db/tables/contacts";
+
+interface MemberData {
+  did: string;
+  name: string;
+  isContact: boolean;
+  member: {
+    memberId: string;
+  };
+}
 
 @Component({
   mixins: [PlatformServiceMixin],
-  emits: ["close"],
 })
-export default class BulkMembersDialog extends Vue {
+export default class SetBulkVisibilityDialog extends Vue {
+  @Prop({ default: false }) visible!: boolean;
+  @Prop({ default: () => [] }) membersData!: MemberData[];
   @Prop({ default: "" }) activeDid!: string;
   @Prop({ default: "" }) apiServer!: string;
-  // isOrganizer: true = organizer mode (admit members), false = member mode (set visibility)
-  @Prop({ required: true }) isOrganizer!: boolean;
 
   // Vue notification system
   $notify!: (
@@ -158,9 +132,8 @@ export default class BulkMembersDialog extends Vue {
   notify!: ReturnType<typeof createNotifyHelpers>;
 
   // Component state
-  membersData: MemberData[] = [];
   selectedMembers: string[] = [];
-  visible = false;
+  selectionInitialized = false;
 
   // Constants
   // In Vue templates, imported constants need to be explicitly made available to the template
@@ -185,46 +158,29 @@ export default class BulkMembersDialog extends Vue {
     return selectedCount > 0 && selectedCount < this.membersData.length;
   }
 
-  get title() {
+  get shouldInitializeSelection() {
-    return this.isOrganizer
+    // This method will initialize selection when the dialog opens
-      ? "Admit Pending Members"
+    if (!this.selectionInitialized) {
-      : "Add Members to Contacts";
+      this.initializeSelection();
-  }
+      this.selectionInitialized = true;
-
+    }
-  get description() {
+    return true;
-    return this.isOrganizer
-      ? "Would you like to admit these members to the meeting and add them to your contacts?"
-      : "Would you like to add these members to your contacts?";
-  }
-
-  get buttonText() {
-    return this.isOrganizer ? "Admit + Add to Contacts" : "Add to Contacts";
-  }
-
-  get emptyStateText() {
-    return this.isOrganizer
-      ? "No pending members to admit"
-      : "No members are not in your contacts";
   }
 
   created() {
     this.notify = createNotifyHelpers(this.$notify);
   }
 
-  open(members: MemberData[]) {
+  initializeSelection() {
-    this.visible = true;
+    // Reset selection when dialog opens
-    this.membersData = members;
+    this.selectedMembers = [];
     // Select all by default
     this.selectedMembers = this.membersData.map((member) => member.did);
   }
 
-  close(notSelectedMemberDids: string[]) {
+  resetSelection() {
-    this.visible = false;
+    this.selectedMembers = [];
-    this.$emit("close", { notSelectedMemberDids: notSelectedMemberDids });
+    this.selectionInitialized = false;
-  }
-
-  cancel() {
-    this.close(this.membersData.map((member) => member.did));
   }
 
   toggleSelectAll() {
@@ -252,158 +208,66 @@ export default class BulkMembersDialog extends Vue {
     return this.selectedMembers.includes(memberDid);
   }
 
-  async processSelectedMembers() {
+  async setVisibilityForSelectedMembers() {
     try {
-      const selectedMembers: MemberData[] = this.membersData.filter((member) =>
+      const selectedMembers = this.membersData.filter((member) =>
         this.selectedMembers.includes(member.did),
       );
-      const notSelectedMembers: MemberData[] = this.membersData.filter(
-        (member) => !this.selectedMembers.includes(member.did),
-      );
 
-      let admittedCount = 0;
+      let successCount = 0;
-      let contactAddedCount = 0;
-      let errors = 0;
 
       for (const member of selectedMembers) {
         try {
-          // Organizer mode: admit and register the member first
+          // If they're not a contact yet, add them as a contact first
-          if (this.isOrganizer) {
-            await this.admitMember(member);
-            await this.registerMember(member);
-            admittedCount++;
-          }
-
-          // If they're not a contact yet, add them as a contact
           if (!member.isContact) {
-            // Organizer mode: set isRegistered to true, member mode: undefined
+            await this.addAsContact(member);
-            await this.addAsContact(
-              member,
-              this.isOrganizer ? true : undefined,
-            );
-            contactAddedCount++;
           }
 
           // 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
-          errors++;
         }
       }
 
       // Show success notification
-      if (this.isOrganizer) {
+      this.$notify(
-        if (admittedCount > 0) {
+        {
-          this.$notify(
+          group: "alert",
-            {
+          type: "success",
-              group: "alert",
+          title: "Visibility Set Successfully",
-              type: "success",
+          text: `Visibility set for ${successCount} member${successCount === 1 ? "" : "s"}.`,
-              title: "Members Admitted Successfully",
+        },
-              text: `${admittedCount} member${admittedCount === 1 ? "" : "s"} admitted and registered${contactAddedCount === 0 ? "" : admittedCount === contactAddedCount ? " and" : `, ${contactAddedCount}`}${contactAddedCount === 0 ? "" : ` added as contact${contactAddedCount === 1 ? "" : "s"}`}.`,
+        5000,
-            },
+      );
-            5000,
-          );
-        }
-        if (errors > 0) {
-          this.$notify(
-            {
-              group: "alert",
-              type: "danger",
-              title: "Error",
-              text: "Failed to fully admit some members. Work with them individually below.",
-            },
-            5000,
-          );
-        }
-      } else {
-        // Member mode: show contacts added notification
-        if (contactAddedCount > 0) {
-          this.$notify(
-            {
-              group: "alert",
-              type: "success",
-              title: "Contacts Added Successfully",
-              text: `${contactAddedCount} member${contactAddedCount === 1 ? "" : "s"} added as contact${contactAddedCount === 1 ? "" : "s"}.`,
-            },
-            5000,
-          );
-        }
-      }
 
-      this.close(notSelectedMembers.map((member) => member.did));
+      // Emit success event
+      this.$emit("success", successCount);
+      this.close();
     } catch (error) {
       // eslint-disable-next-line no-console
-      console.error(
+      console.error("Error setting visibility:", error);
-        `Error ${this.isOrganizer ? "admitting members" : "adding contacts"}:`,
-        error,
-      );
       this.$notify(
         {
           group: "alert",
           type: "danger",
           title: "Error",
-          text: "Some errors occurred. Work with members individually below.",
+          text: "Failed to set visibility for some members. Please try again.",
         },
         5000,
       );
     }
   }
 
-  async admitMember(member: {
+  async addAsContact(member: { did: string; name: string }) {
-    did: string;
-    name: string;
-    member: { memberId: string };
-  }) {
     try {
-      const headers = await getHeaders(this.activeDid);
+      const newContact = {
-      await this.axios.put(
-        `${this.apiServer}/api/partner/groupOnboardMember/${member.member.memberId}`,
-        { admitted: true },
-        { headers },
-      );
-    } catch (err) {
-      // eslint-disable-next-line no-console
-      console.error("Error admitting member:", err);
-      throw err;
-    }
-  }
-
-  async registerMember(member: MemberData) {
-    try {
-      const contact: Contact = { did: member.did };
-      const result = await register(
-        this.activeDid,
-        this.apiServer,
-        this.axios,
-        contact,
-      );
-      if (result.success) {
-        if (result.embeddedRecordError) {
-          throw new Error(result.embeddedRecordError);
-        }
-        await this.$updateContact(member.did, { registered: true });
-      } else {
-        throw result;
-      }
-    } catch (err) {
-      // eslint-disable-next-line no-console
-      console.error("Error registering member:", err);
-      throw err;
-    }
-  }
-
-  async addAsContact(
-    member: { did: string; name: string },
-    isRegistered?: boolean,
-  ) {
-    try {
-      const newContact: Contact = {
         did: member.did,
         name: member.name,
-        registered: isRegistered,
       };
 
       await this.$insertContact(newContact);
@@ -446,20 +310,24 @@ export default class BulkMembersDialog extends Vue {
   }
 
   showContactInfo() {
-    // isOrganizer: true = admit mode, false = visibility mode
-    const message = this.isOrganizer
-      ? "This user is already your contact, but they are not yet admitted to the meeting."
-      : "This user is already your contact, but your activities are not visible to them yet.";
-
     this.$notify(
       {
         group: "alert",
         type: "info",
         title: "Contact Info",
-        text: message,
+        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/ShowAllCard.vue

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

src/components/SpecialEntityCard.vue

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

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

src/db-sql/migration.ts

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

src/interfaces/claims.ts

@@ -14,13 +14,6 @@ export interface AgreeActionClaim extends ClaimObject {
   object: Record<string, unknown>;
 }
 
-export interface EmojiClaim extends ClaimObject {
-  // default context is "https://endorser.ch"
-  "@type": "Emoji";
-  text: string;
-  parentItem: { lastClaimId: string };
-}
-
 // Note that previous VCs may have additional fields.
 // https://endorser.ch/doc/html/transactions.html#id4
 export interface GiveActionClaim extends ClaimObject {

src/interfaces/common.ts

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

src/interfaces/index.ts

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

src/interfaces/records.ts

@@ -1,26 +1,14 @@
 import { GiveActionClaim, OfferClaim, PlanActionClaim } from "./claims";
 import { GenericCredWrapper } from "./common";
 
-export interface EmojiSummaryRecord {
-  issuerDid: string;
-  jwtId: string;
-  text: string;
-  parentHandleId: string;
-}
-
 // a summary record; the VC is found the fullClaim field
 export interface GiveSummaryRecord {
-  [x: string]:
+  [x: string]: PropertyKey | undefined | GiveActionClaim;
-    | PropertyKey
-    | undefined
-    | GiveActionClaim
-    | Record<string, number>;
   type?: string;
   agentDid: string;
   amount: number;
   amountConfirmed: number;
   description: string;
-  emojiCount: Record<string, number>; // Map of emoji character to count
   fullClaim: GiveActionClaim;
   fulfillsHandleId: string;
   fulfillsPlanHandleId?: string;

src/interfaces/user.ts

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

src/libs/endorserServer.ts

@@ -42,6 +42,9 @@ import {
   PlanActionClaim,
   RegisterActionClaim,
   TenureClaim,
+} from "../interfaces/claims";
+
+import {
   GenericCredWrapper,
   GenericVerifiableCredential,
   AxiosErrorResponse,
@@ -52,12 +55,14 @@ import {
   QuantitativeValue,
   KeyMetaWithPrivate,
   KeyMetaMaybeWithPrivate,
+} from "../interfaces/common";
+import {
   OfferSummaryRecord,
   OfferToPlanSummaryRecord,
   PlanSummaryAndPreviousClaim,
   PlanSummaryRecord,
-} from "../interfaces";
+} from "../interfaces/records";
-import { logger, safeStringify } from "../utils/logger";
+import { logger } from "../utils/logger";
 import { PlatformServiceFactory } from "@/services/PlatformServiceFactory";
 import { APP_SERVER } from "@/constants/app";
 import { SOMEONE_UNNAMED } from "@/constants/entities";
@@ -625,7 +630,11 @@ async function performPlanRequest(
 
       return cred;
     } else {
-      logger.debug(
+      // Use debug level for development to reduce console noise
+      const isDevelopment = process.env.VITE_PLATFORM === "development";
+      const log = isDevelopment ? logger.debug : logger.log;
+
+      log(
         "[Plan Loading] ⚠️ Plan cache is empty for handle",
         handleId,
         " Got data:",
@@ -697,7 +706,7 @@ export function serverMessageForUser(error: unknown): string | undefined {
 export function errorStringForLog(error: unknown) {
   let stringifiedError = "" + error;
   try {
-    stringifiedError = safeStringify(error);
+    stringifiedError = JSON.stringify(error);
   } catch (e) {
     // can happen with Dexie, eg:
     // TypeError: Converting circular structure to JSON
@@ -709,7 +718,7 @@ export function errorStringForLog(error: unknown) {
 
   if (error && typeof error === "object" && "response" in error) {
     const err = error as AxiosErrorResponse;
-    const errorResponseText = safeStringify(err.response);
+    const errorResponseText = JSON.stringify(err.response);
     // for some reason, error.response is not included in stringify result (eg. for 400 errors on invite redemptions)
     if (!R.empty(errorResponseText) && !fullError.includes(errorResponseText)) {
       // add error.response stuff
@@ -719,7 +728,7 @@ export function errorStringForLog(error: unknown) {
         R.equals(err.config, err.response.config)
       ) {
         // but exclude "config" because it's already in there
-        const newErrorResponseText = safeStringify(
+        const newErrorResponseText = JSON.stringify(
           R.omit(["config"] as never[], err.response),
         );
         fullError +=
@@ -1217,12 +1226,7 @@ export async function createAndSubmitClaim(
       timestamp: new Date().toISOString(),
     });
 
-    return {
+    return { success: true, handleId: response.data?.handleId };
-      success: true,
-      claimId: response.data?.claimId,
-      handleId: response.data?.handleId,
-      embeddedRecordError: response.data?.embeddedRecordError,
-    };
   } catch (error: unknown) {
     // Enhanced error logging with comprehensive context
     const requestId = `claim_error_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
@@ -1657,39 +1661,31 @@ export async function register(
       message?: string;
     }>(url, { jwtEncoded: vcJwt });
 
-    if (resp.data?.success?.embeddedRecordError) {
+    if (resp.data?.success?.handleId) {
+      return { success: true };
+    } else if (resp.data?.success?.embeddedRecordError) {
       let message =
         "There was some problem with the registration and so it may not be complete.";
       if (typeof resp.data.success.embeddedRecordError === "string") {
         message += " " + resp.data.success.embeddedRecordError;
       }
       return { error: message };
-    } else if (resp.data?.success?.handleId) {
-      return { success: true };
     } else {
-      logger.error("Registration non-thrown error:", JSON.stringify(resp.data));
+      logger.error("Registration error:", JSON.stringify(resp.data));
-      return {
+      return { error: "Got a server error when registering." };
-        error:
-          (resp.data?.error as { message?: string })?.message ||
-          (resp.data?.error as string) ||
-          "Got a server error when registering.",
-      };
     }
   } catch (error: unknown) {
     if (error && typeof error === "object") {
       const err = error as AxiosErrorResponse;
       const errorMessage =
-        err.response?.data?.error?.message ||
+        err.message ||
-        err.response?.data?.error ||
+        (err.response?.data &&
-        err.message;
+        typeof err.response.data === "object" &&
-      logger.error(
+        "message" in err.response.data
-        "Registration thrown error:",
+          ? (err.response.data as { message: string }).message
-        errorMessage || JSON.stringify(err),
+          : undefined);
-      );
+      logger.error("Registration error:", errorMessage || JSON.stringify(err));
-      return {
+      return { error: errorMessage || "Got a server error when registering." };
-        error:
-          (errorMessage as string) || "Got a server error when registering.",
-      };
     }
     return { error: "Got a server error when registering." };
   }

src/libs/util.ts

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

src/services/platforms/BaseDatabaseService.ts

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

src/services/platforms/CapacitorPlatformService.ts

@@ -22,7 +22,6 @@ import {
   PlatformCapabilities,
 } from "../PlatformService";
 import { logger } from "../../utils/logger";
-import { BaseDatabaseService } from "./BaseDatabaseService";
 
 interface QueuedOperation {
   type: "run" | "query" | "rawQuery";
@@ -40,10 +39,7 @@ interface QueuedOperation {
  * - Platform-specific features
  * - SQLite database operations
  */
-export class CapacitorPlatformService
+export class CapacitorPlatformService implements PlatformService {
-  extends BaseDatabaseService
-  implements PlatformService
-{
   /** Current camera direction */
   private currentDirection: CameraDirection = CameraDirection.Rear;
 
@@ -56,7 +52,6 @@ export class CapacitorPlatformService
   private isProcessingQueue: boolean = false;
 
   constructor() {
-    super();
     this.sqlite = new SQLiteConnection(CapacitorSQLite);
   }
 
@@ -91,92 +86,16 @@ export class CapacitorPlatformService
     }
 
     try {
-      // Try to create/Open database connection
+      // Create/Open database
-      try {
+      this.db = await this.sqlite.createConnection(
-        this.db = await this.sqlite.createConnection(
+        this.dbName,
-          this.dbName,
+        false,
-          false,
+        "no-encryption",
-          "no-encryption",
+        1,
-          1,
+        false,
-          false,
+      );
-        );
-      } catch (createError: unknown) {
-        // If connection already exists, try to retrieve it or handle gracefully
-        const errorMessage =
-          createError instanceof Error
-            ? createError.message
-            : String(createError);
-        const errorObj =
-          typeof createError === "object" && createError !== null
-            ? (createError as { errorMessage?: string; message?: string })
-            : {};
 
-        const fullErrorMessage =
+      await this.db.open();
-          errorObj.errorMessage || errorObj.message || errorMessage;
-
-        if (fullErrorMessage.includes("already exists")) {
-          logger.debug(
-            "[CapacitorPlatformService] Connection already exists on native side, attempting to retrieve",
-          );
-          // Check if connection exists in JavaScript Map
-          const isConnResult = await this.sqlite.isConnection(
-            this.dbName,
-            false,
-          );
-          if (isConnResult.result) {
-            // Connection exists in Map, retrieve it
-            this.db = await this.sqlite.retrieveConnection(this.dbName, false);
-            logger.debug(
-              "[CapacitorPlatformService] Successfully retrieved existing connection from Map",
-            );
-          } else {
-            // Connection exists on native side but not in JavaScript Map
-            // This can happen when the app is restarted but native connections persist
-            // Try to close the native connection first, then create a new one
-            logger.debug(
-              "[CapacitorPlatformService] Connection exists natively but not in Map, closing and recreating",
-            );
-            try {
-              await this.sqlite.closeConnection(this.dbName, false);
-            } catch (closeError) {
-              // Ignore close errors - connection might not be properly tracked
-              logger.debug(
-                "[CapacitorPlatformService] Error closing connection (may be expected):",
-                closeError,
-              );
-            }
-            // Now try to create the connection again
-            this.db = await this.sqlite.createConnection(
-              this.dbName,
-              false,
-              "no-encryption",
-              1,
-              false,
-            );
-            logger.debug(
-              "[CapacitorPlatformService] Successfully created connection after cleanup",
-            );
-          }
-        } else {
-          // Re-throw if it's a different error
-          throw createError;
-        }
-      }
-
-      // Open the connection if it's not already open
-      try {
-        await this.db.open();
-      } catch (openError: unknown) {
-        const openErrorMessage =
-          openError instanceof Error ? openError.message : String(openError);
-        // If already open, that's fine - continue
-        if (!openErrorMessage.includes("already open")) {
-          throw openError;
-        }
-        logger.debug(
-          "[CapacitorPlatformService] Database connection already open",
-        );
-      }
 
       // Set journal mode to WAL for better performance
       // await this.db.execute("PRAGMA journal_mode=WAL;");
@@ -1409,8 +1328,79 @@ export class CapacitorPlatformService
   // --- PWA/Web-only methods (no-op for Capacitor) ---
   public registerServiceWorker(): void {}
 
-  // Database utility methods - inherited from BaseDatabaseService
+  // Database utility methods
-  // generateInsertStatement, updateDefaultSettings, updateActiveDid,
+  generateInsertStatement(
-  // getActiveIdentity, insertNewDidIntoSettings, updateDidSpecificSettings,
+    model: Record<string, unknown>,
-  // retrieveSettingsForActiveAccount are all inherited from BaseDatabaseService
+    tableName: string,
+  ): { sql: string; params: unknown[] } {
+    const keys = Object.keys(model);
+    const placeholders = keys.map(() => "?").join(", ");
+    const sql = `INSERT INTO ${tableName} (${keys.join(", ")}) VALUES (${placeholders})`;
+    const params = keys.map((key) => model[key]);
+    return { sql, params };
+  }
+
+  async updateDefaultSettings(
+    settings: Record<string, unknown>,
+  ): Promise<void> {
+    const keys = Object.keys(settings);
+    const setClause = keys.map((key) => `${key} = ?`).join(", ");
+    const sql = `UPDATE settings SET ${setClause} WHERE id = 1`;
+    const params = keys.map((key) => settings[key]);
+    await this.dbExec(sql, params);
+  }
+
+  async updateActiveDid(did: string): Promise<void> {
+    await this.dbExec(
+      "UPDATE active_identity SET activeDid = ?, lastUpdated = datetime('now') WHERE id = 1",
+      [did],
+    );
+  }
+
+  async insertNewDidIntoSettings(did: string): Promise<void> {
+    // Import constants dynamically to avoid circular dependencies
+    const { DEFAULT_ENDORSER_API_SERVER, DEFAULT_PARTNER_API_SERVER } =
+      await import("@/constants/app");
+
+    // Use INSERT OR REPLACE to handle case where settings already exist for this DID
+    // This prevents duplicate accountDid entries and ensures data integrity
+    await this.dbExec(
+      "INSERT OR REPLACE INTO settings (accountDid, finishedOnboarding, apiServer, partnerApiServer) VALUES (?, ?, ?, ?)",
+      [did, false, DEFAULT_ENDORSER_API_SERVER, DEFAULT_PARTNER_API_SERVER],
+    );
+  }
+
+  async updateDidSpecificSettings(
+    did: string,
+    settings: Record<string, unknown>,
+  ): Promise<void> {
+    const keys = Object.keys(settings);
+    const setClause = keys.map((key) => `${key} = ?`).join(", ");
+    const sql = `UPDATE settings SET ${setClause} WHERE accountDid = ?`;
+    const params = [...keys.map((key) => settings[key]), did];
+    await this.dbExec(sql, params);
+  }
+
+  async retrieveSettingsForActiveAccount(): Promise<Record<
+    string,
+    unknown
+  > | null> {
+    const result = await this.dbQuery("SELECT * FROM settings WHERE id = 1");
+    if (result?.values?.[0]) {
+      // Convert the row to an object
+      const row = result.values[0];
+      const columns = result.columns || [];
+      const settings: Record<string, unknown> = {};
+
+      columns.forEach((column, index) => {
+        if (column !== "id") {
+          // Exclude the id column
+          settings[column] = row[index];
+        }
+      });
+
+      return settings;
+    }
+    return null;
+  }
 }

src/services/platforms/WebPlatformService.ts

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

src/test/EntityGridFunctionPropTest.vue

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

src/utils/PlatformServiceMixin.ts

@@ -970,20 +970,6 @@ export const PlatformServiceMixin = {
       return this.$normalizeContacts(rawContacts);
     },
 
-    /**
-     * Load all contacts sorted by when they were added (by ID)
-     * Always fetches fresh data from database for consistency
-     * Handles JSON string/object duality for contactMethods field
-     * @returns Promise<Contact[]> Array of normalized contact objects sorted by addition date (newest first)
-     */
-    async $contactsByDateAdded(): Promise<Contact[]> {
-      const rawContacts = (await this.$query(
-        "SELECT * FROM contacts ORDER BY id DESC",
-      )) as ContactMaybeWithJsonStrings[];
-
-      return this.$normalizeContacts(rawContacts);
-    },
-
     /**
      * Ultra-concise shortcut for getting number of contacts
      * @returns Promise<number> Total number of contacts
@@ -2071,7 +2057,6 @@ declare module "@vue/runtime-core" {
 
     // Specialized shortcuts - contacts cached, settings fresh
     $contacts(): Promise<Contact[]>;
-    $contactsByDateAdded(): Promise<Contact[]>;
     $contactCount(): Promise<number>;
     $settings(defaults?: Settings): Promise<Settings>;
     $accountSettings(did?: string, defaults?: Settings): Promise<Settings>;

src/views/AccountViewView.vue

@@ -1488,21 +1488,18 @@ export default class AccountViewView extends Vue {
           status?: number;
         };
       };
-      logger.warn(
+      logger.error("[Server Limits] Error retrieving limits:", {
-        "[Server Limits] Error retrieving limits, expected for unregistered users:",
+        error: error instanceof Error ? error.message : String(error),
-        {
+        did: did,
-          error: error instanceof Error ? error.message : String(error),
+        apiServer: this.apiServer,
-          did: did,
+        imageServer: this.DEFAULT_IMAGE_API_SERVER,
-          apiServer: this.apiServer,
+        partnerApiServer: this.partnerApiServer,
-          imageServer: this.DEFAULT_IMAGE_API_SERVER,
+        errorCode: axiosError?.response?.data?.error?.code,
-          partnerApiServer: this.partnerApiServer,
+        errorMessage: axiosError?.response?.data?.error?.message,
-          errorCode: axiosError?.response?.data?.error?.code,
+        httpStatus: axiosError?.response?.status,
-          errorMessage: axiosError?.response?.data?.error?.message,
+        needsUserMigration: true,
-          httpStatus: axiosError?.response?.status,
+        timestamp: new Date().toISOString(),
-          needsUserMigration: true,
+      });
-          timestamp: new Date().toISOString(),
-        },
-      );
 
       // this.notify.error(this.limitsMessage, TIMEOUTS.STANDARD);
     } finally {

src/views/ClaimView.vue

@@ -91,15 +91,12 @@
           <div class="text-sm overflow-hidden">
             <div
               data-testId="description"
-              class="flex items-start gap-2 overflow-hidden"
+              class="overflow-hidden text-ellipsis"
             >
-              <font-awesome
+              <font-awesome icon="message" class="fa-fw text-slate-400" />
-                icon="message"
-                class="fa-fw text-slate-400 flex-shrink-0 mt-1"
-              />
               <vue-markdown
                 :source="claimDescription"
-                class="markdown-content flex-1 min-w-0"
+                class="markdown-content"
               />
             </div>
             <div class="overflow-hidden text-ellipsis">
@@ -554,7 +551,7 @@ import VueMarkdown from "vue-markdown-render";
 import { Router, RouteLocationNormalizedLoaded } from "vue-router";
 import { copyToClipboard } from "../services/ClipboardService";
 
-import { EmojiClaim, GenericVerifiableCredential } from "../interfaces";
+import { GenericVerifiableCredential } from "../interfaces";
 import GiftedDialog from "../components/GiftedDialog.vue";
 import QuickNav from "../components/QuickNav.vue";
 import { NotificationIface } from "../constants/app";
@@ -670,10 +667,6 @@ export default class ClaimView extends Vue {
       return giveClaim.description || "";
     }
 
-    if (this.veriClaim.claimType === "Emoji") {
-      return (claim as EmojiClaim).text || "";
-    }
-
     // Fallback for other claim types
     return (claim as { description?: string })?.description || "";
   }

src/views/ContactEditView.vue

@@ -346,7 +346,9 @@ export default class ContactEditView extends Vue {
 
     // Notify success and redirect
     this.notify.success(NOTIFY_CONTACT_SAVED.message, TIMEOUTS.STANDARD);
-    this.$router.back();
+    (this.$router as Router).push({
+      path: "/did/" + encodeURIComponent(this.contact?.did || ""),
+    });
   }
 }
 </script>

src/views/ContactsView.vue

@@ -171,11 +171,9 @@ import {
   CONTACT_IMPORT_ONE_URL_PATH_TIME_SAFARI,
   CONTACT_URL_PATH_ENDORSER_CH_OLD,
 } from "../libs/endorserServer";
-import {
+import { GiveSummaryRecord } from "@/interfaces/records";
-  GiveSummaryRecord,
+import { UserInfo } from "@/interfaces/common";
-  UserInfo,
+import { VerifiableCredential } from "@/interfaces/claims-result";
-  VerifiableCredential,
-} from "@/interfaces";
 import * as libsUtil from "../libs/util";
 import {
   generateSaveAndActivateIdentity,

src/views/DIDView.vue

@@ -12,12 +12,12 @@
       </h1>
 
       <!-- Back -->
-      <button
+      <router-link
         class="order-first text-lg text-center leading-none p-1"
-        @click="goBack()"
+        :to="{ name: 'contacts' }"
       >
         <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
-      </button>
+      </router-link>
 
       <!-- Help button -->
       <router-link
@@ -476,7 +476,7 @@ export default class DIDView extends Vue {
    * Navigation helper methods
    */
   goBack() {
-    this.$router.back();
+    this.$router.go(-1);
   }
 
   /**

src/views/HomeView.vue

@@ -245,7 +245,6 @@ Raymer * @version 1.0.0 */
             :last-viewed-claim-id="feedLastViewedClaimId"
             :is-registered="isRegistered"
             :active-did="activeDid"
-            :api-server="apiServer"
             @load-claim="onClickLoadClaim"
             @view-image="openImageViewer"
           />
@@ -706,7 +705,7 @@ export default class HomeView extends Vue {
           };
 
           logger.warn(
-            "[HomeView Settings Trace] ⚠️ Registration check failed, expected for unregistered users.",
+            "[HomeView Settings Trace] ⚠️ Registration check failed",
             {
               error: errorMessage,
               did: this.activeDid,
@@ -1265,7 +1264,6 @@ export default class HomeView extends Vue {
       provider,
       fulfillsPlan,
       providedByPlan,
-      record.emojiCount,
     );
   }
 
@@ -1489,14 +1487,12 @@ export default class HomeView extends Vue {
     provider: Provider | undefined,
     fulfillsPlan?: FulfillsPlan,
     providedByPlan?: ProvidedByPlan,
-    emojiCount?: Record<string, number>,
   ): GiveRecordWithContactInfo {
     return {
       ...record,
       jwtId: record.jwtId,
       fullClaim: record.fullClaim,
       description: record.description || "",
-      emojiCount: emojiCount || {},
       handleId: record.handleId,
       issuerDid: record.issuerDid,
       fulfillsPlanHandleId: record.fulfillsPlanHandleId,

src/views/NewEditProjectView.vue

@@ -60,60 +60,12 @@
     </div>
     <ImageMethodDialog ref="imageDialog" default-camera-mode="environment" />
 
-    <!-- Authorized Representative Selection -->
+    <input
-    <div class="w-full flex items-stretch my-4">
+      v-model="agentDid"
-      <div
+      type="text"
-        class="flex items-center gap-2 grow border border-slate-400 border-r-0 last:border-r px-3 py-2 rounded-l last:rounded overflow-hidden cursor-pointer hover:bg-slate-100"
+      placeholder="Other Authorized Representative"
-        @click="openRepresentativeDialog"
+      class="mt-4 block w-full rounded border border-slate-400 px-3 py-2"
-      >
-        <div>
-          <EntityIcon
-            v-if="selectedRepresentative"
-            :contact="selectedRepresentative"
-            class="!size-[2rem] shrink-0 border border-slate-300 bg-white overflow-hidden rounded-full"
-          />
-          <font-awesome v-else icon="user" class="text-slate-400" />
-        </div>
-        <div class="overflow-hidden">
-          <div
-            :class="{
-              'text-sm font-semibold': selectedRepresentative,
-              'text-slate-400': !selectedRepresentative,
-            }"
-            class="truncate"
-          >
-            {{
-              selectedRepresentative
-                ? selectedRepresentative.name || AppString.NO_CONTACT_NAME
-                : "Assign Authorized Representative…"
-            }}
-          </div>
-          <div
-            v-if="selectedRepresentative"
-            class="text-xs text-slate-500 truncate"
-          >
-            {{ agentDid }}
-          </div>
-        </div>
-      </div>
-      <button
-        v-if="selectedRepresentative"
-        class="text-rose-600 px-3 py-2 border border-slate-400 border-l-0 rounded-r hover:bg-rose-600 hover:text-white hover:border-rose-600"
-        @click="unsetRepresentative"
-      >
-        <font-awesome icon="trash-can" />
-      </button>
-    </div>
-
-    <ProjectRepresentativeDialog
-      ref="representativeDialog"
-      :all-contacts="allContacts"
-      :active-did="activeDid"
-      :all-my-dids="allMyDids"
-      :notify="$notify"
-      @assign="handleRepresentativeAssigned"
     />
-
     <div class="mb-4">
       <p v-if="shouldShowOwnershipWarning">
         <span class="text-red-500">Beware!</span>
@@ -280,12 +232,9 @@ import { LMap, LMarker, LTileLayer } from "@vue-leaflet/vue-leaflet";
 import { RouteLocationNormalizedLoaded, Router } from "vue-router";
 import { LeafletMouseEvent } from "leaflet";
 
-import EntityIcon from "../components/EntityIcon.vue";
 import ImageMethodDialog from "../components/ImageMethodDialog.vue";
-import ProjectRepresentativeDialog from "../components/ProjectRepresentativeDialog.vue";
 import QuickNav from "../components/QuickNav.vue";
 import {
-  AppString,
   DEFAULT_IMAGE_API_SERVER,
   DEFAULT_PARTNER_API_SERVER,
   NotificationIface,
@@ -319,7 +268,6 @@ import {
   retrieveAccountCount,
   retrieveFullyDecryptedAccount,
 } from "../libs/util";
-import { Contact } from "../db/tables/contacts";
 
 import {
   EventTemplate,
@@ -375,15 +323,7 @@ import { logger } from "../utils/logger";
  */
 
 @Component({
-  components: {
+  components: { ImageMethodDialog, LMap, LMarker, LTileLayer, QuickNav },
-    EntityIcon,
-    ImageMethodDialog,
-    ProjectRepresentativeDialog,
-    LMap,
-    LMarker,
-    LTileLayer,
-    QuickNav,
-  },
   mixins: [PlatformServiceMixin],
 })
 export default class NewEditProjectView extends Vue {
@@ -394,9 +334,6 @@ export default class NewEditProjectView extends Vue {
   // Notification helpers
   private notify!: ReturnType<typeof createNotifyHelpers>;
 
-  // Constants
-  AppString = AppString;
-
   /**
    * Display error notification to user
    * Provides consistent error messaging with 5-second timeout
@@ -409,8 +346,6 @@ export default class NewEditProjectView extends Vue {
   // Component state properties
   activeDid = "";
   agentDid = "";
-  allContacts: Array<Contact> = [];
-  allMyDids: string[] = [];
   apiServer = "";
   endDateInput?: string;
   endTimeInput?: string;
@@ -457,24 +392,16 @@ export default class NewEditProjectView extends Vue {
     const activeIdentity = await (this as any).$getActiveIdentity();
     this.activeDid = activeIdentity.activeDid || "";
 
-    // Get all user's DIDs
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    this.allMyDids = await (this as any).$getAllAccountDids();
-
-    // Load contacts sorted by date added (newest first) for consistent "Recently Added" display
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    this.allContacts = await (this as any).$contactsByDateAdded();
-
     this.apiServer = settings.apiServer || "";
     this.showGeneralAdvanced = !!settings.showGeneralAdvanced;
 
     this.projectId = (this.$route.query["projectId"] as string) || "";
 
-    if (this.isSavedProject()) {
+    if (this.projectId) {
       if (this.numAccounts === 0) {
         this.notify.error(NOTIFY_PROJECT_ACCOUNT_LOADING_ERROR.message);
       } else {
-        this.loadProject(this.activeDid, this.projectId);
+        this.loadProject(this.activeDid);
       }
     }
   }
@@ -484,9 +411,11 @@ export default class NewEditProjectView extends Vue {
    * Retrieves project information from the API and populates form fields
    * @param userDid - User's decentralized identifier
    */
-  async loadProject(userDid: string, projectId: string) {
+  async loadProject(userDid: string) {
     const url =
-      this.apiServer + "/api/claim/byHandle/" + encodeURIComponent(projectId);
+      this.apiServer +
+      "/api/claim/byHandle/" +
+      encodeURIComponent(this.projectId);
     const headers = await getHeaders(userDid);
 
     try {
@@ -503,12 +432,6 @@ export default class NewEditProjectView extends Vue {
         }
         if (this.fullClaim?.agent?.identifier) {
           this.agentDid = this.fullClaim.agent.identifier;
-          if (this.activeDid !== this.projectIssuerDid) {
-            this.agentDid = this.projectIssuerDid;
-            this.notify.warning(
-              "You were previously the agent, so the agent has been set to the previous owner. You can change it.",
-            );
-          }
         }
         if (this.fullClaim.startTime) {
           const localDateTime = DateTime.fromISO(
@@ -613,7 +536,7 @@ export default class NewEditProjectView extends Vue {
   private async saveProject() {
     // Make a claim
     const vcClaim: PlanActionClaim = this.fullClaim;
-    if (this.isSavedProject()) {
+    if (this.projectId) {
       vcClaim.lastClaimId = this.lastClaimJwtId;
     }
     if (this.agentDid) {
@@ -947,10 +870,6 @@ export default class NewEditProjectView extends Vue {
     this.longitude = event.latlng.lng;
   }
 
-  private isSavedProject(): boolean {
-    return !!this.projectId;
-  }
-
   /**
    * Computed property for character count display
    * Shows current description length and maximum character limit
@@ -966,7 +885,6 @@ export default class NewEditProjectView extends Vue {
    */
   get shouldShowOwnershipWarning(): boolean {
     return (
-      this.isSavedProject() &&
       this.activeDid !== this.projectIssuerDid &&
       this.agentDid !== this.projectIssuerDid
     );
@@ -1043,37 +961,5 @@ export default class NewEditProjectView extends Vue {
   get shouldShowSpinner(): boolean {
     return !this.isHiddenSpinner;
   }
-
-  /**
-   * Computed property for selected representative contact
-   * Derives the contact from agentDid by finding it in allContacts
-   */
-  get selectedRepresentative(): Contact | null {
-    if (!this.agentDid) {
-      return null;
-    }
-    return this.allContacts.find((c) => c.did === this.agentDid) || null;
-  }
-
-  /**
-   * Open the representative selection dialog
-   */
-  openRepresentativeDialog(): void {
-    (this.$refs.representativeDialog as ProjectRepresentativeDialog).open();
-  }
-
-  /**
-   * Handle representative assignment from dialog
-   */
-  handleRepresentativeAssigned(contact: Contact): void {
-    this.agentDid = contact.did;
-  }
-
-  /**
-   * Unset the representative and revert to initial state
-   */
-  unsetRepresentative(): void {
-    this.agentDid = "";
-  }
 }
 </script>

src/views/OnboardMeetingListView.vue

@@ -77,7 +77,7 @@
         v-if="meetings.length === 0 && !isRegistered"
         class="text-center text-gray-500 py-8"
       >
-        No onboarding meetings are available
+        No onboarding meetings available
       </p>
     </div>
 

src/views/OnboardMeetingSetupView.vue

@@ -473,7 +473,6 @@ export default class OnboardMeetingView extends Vue {
         );
         return;
       }
-      const password: string = this.newOrUpdatedMeetingInputs.password;
 
       // create content with user's name & DID encrypted with password
       const content = {
@@ -483,7 +482,7 @@ export default class OnboardMeetingView extends Vue {
       };
       const encryptedContent = await encryptMessage(
         JSON.stringify(content),
-        password,
+        this.newOrUpdatedMeetingInputs.password,
       );
 
       const headers = await getHeaders(this.activeDid);
@@ -506,11 +505,6 @@ export default class OnboardMeetingView extends Vue {
 
         this.newOrUpdatedMeetingInputs = null;
         this.notify.success(NOTIFY_MEETING_CREATED.message, TIMEOUTS.STANDARD);
-        // redirect to the same page with the password parameter set
-        this.$router.push({
-          name: "onboard-meeting-setup",
-          query: { password: password },
-        });
       } else {
         throw { response: response };
       }

test-playwright/testUtils.ts

@@ -49,10 +49,6 @@ export async function importUserFromAccount(page: Page, id?: string): Promise<st
 
   await page.getByRole("button", { name: "Import" }).click();
 
-  // PHASE 1 FIX: Wait for registration status to settle
-  // This ensures that components have the correct isRegistered status
-  await waitForRegistrationStatusToSettle(page);
-
   return userZeroData.did;
 }
 
@@ -73,11 +69,6 @@ export async function importUser(page: Page, id?: string): Promise<string> {
   await expect(
     page.locator("#sectionUsageLimits").getByText("Checking")
   ).toBeHidden();
-  
-  // PHASE 1 FIX: Wait for registration check to complete and update UI elements
-  // This ensures that components like InviteOneView have the correct isRegistered status
-  await waitForRegistrationStatusToSettle(page);
-  
   return did;
 }
 
@@ -346,78 +337,3 @@ export function getElementWaitTimeout(): number {
 export function getPageLoadTimeout(): number {
   return getAdaptiveTimeout(30000, 1.4);
 }
-
-/**
- * PHASE 1 FIX: Wait for registration status to settle
- * 
- * This function addresses the timing issue where:
- * 1. User imports identity → Database shows isRegistered: false
- * 2. HomeView loads → Starts async registration check
- * 3. Other views load → Use cached isRegistered: false
- * 4. Async check completes → Updates database to isRegistered: true
- * 5. But other views don't re-check → Plus buttons don't appear
- * 
- * This function waits for the async registration check to complete
- * without interfering with test navigation.
- */
-export async function waitForRegistrationStatusToSettle(page: Page): Promise<void> {
-  try {
-    // Wait for the initial registration check to complete
-    // This is indicated by the "Checking" text disappearing from usage limits
-    await expect(
-      page.locator("#sectionUsageLimits").getByText("Checking")
-    ).toBeHidden({ timeout: 15000 });
-    
-    // Before navigating back to the page, we'll trigger a registration check
-    // by navigating to home and waiting for the registration process to complete
-
-    const currentUrl = page.url();
-    
-    // Navigate to home to trigger the registration check
-    await page.goto('./');
-    await page.waitForLoadState('networkidle');
-    
-    // Wait for the registration check to complete by monitoring the usage limits section
-    // This ensures the async registration check has finished
-    await page.waitForFunction(() => {
-      const usageLimits = document.querySelector('#sectionUsageLimits');
-      if (!usageLimits) return true; // No usage limits section, assume ready
-      
-      // Check if the "Checking..." spinner is gone
-      const checkingSpinner = usageLimits.querySelector('.fa-spin');
-      if (checkingSpinner) return false; // Still loading
-      
-      // Check if we have actual content (not just the spinner)
-      const hasContent = usageLimits.querySelector('p') || usageLimits.querySelector('button');
-      return hasContent !== null; // Has actual content, not just spinner
-    }, { timeout: 10000 });
-    
-    // Also navigate to account page to ensure activeDid is set and usage limits are loaded
-    await page.goto('./account');
-    await page.waitForLoadState('networkidle');
-    
-    // Wait for the usage limits section to be visible and loaded
-    await page.waitForFunction(() => {
-      const usageLimits = document.querySelector('#sectionUsageLimits');
-      if (!usageLimits) return false; // Section should exist on account page
-      
-      // Check if the "Checking..." spinner is gone
-      const checkingSpinner = usageLimits.querySelector('.fa-spin');
-      if (checkingSpinner) return false; // Still loading
-      
-      // Check if we have actual content (not just the spinner)
-      const hasContent = usageLimits.querySelector('p') || usageLimits.querySelector('button');
-      return hasContent !== null; // Has actual content, not just spinner
-    }, { timeout: 15000 });
-    
-    // Navigate back to the original page if it wasn't home
-    if (!currentUrl.includes('/')) {
-      await page.goto(currentUrl);
-      await page.waitForLoadState('networkidle');
-    }
-    
-  } catch (error) {
-    // Registration status check timed out, continuing anyway
-    // This may indicate the user is not registered or there's a server issue
-  }
-}