chore: linting; more non-errors need fixing

- Add 30-second cache for storage permission status to prevent redundant checks
- Reduce excessive logging during file discovery operations
- Only log file discovery results when files are actually found
- Optimize backup files listing to reduce console noise
- Maintain essential debugging information while improving performance
- Eliminate redundant permission checks during app initialization
- Improve app startup performance with cached permission status

Performance improvements:
- Faster permission checks with caching mechanism
- Reduced console noise for better debugging experience
- Maintained all functionality while optimizing logging
- Better user experience with less redundant operations

Security: No changes to security model, only performance optimizations
Platforms: Android and iOS file handling improvements

.gitignore

@@ -21,6 +21,7 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
+android/app/src/main/res/
 
 # Editor directories and files
 .idea

BUILDING.md

@@ -374,7 +374,7 @@ Prerequisites: macOS with Xcode installed
    xcrun agvtool new-version 25
    # Unfortunately this edits Info.plist directly.
    #xcrun agvtool new-marketing-version 0.4.5
-   cat App.xcodeproj/project.pbxproj | sed "s/MARKETING_VERSION = .*;/MARKETING_VERSION = 0.5.0;/g" > temp
+   cat App.xcodeproj/project.pbxproj | sed "s/MARKETING_VERSION = .*;/MARKETING_VERSION = 0.5.1;/g" > temp
    mv temp App.xcodeproj/project.pbxproj
    cd -
    ```

CONTACT_BACKUP_SYSTEM.md

@@ -0,0 +1,533 @@
+# TimeSafari Contact Backup System
+
+## Overview
+
+The TimeSafari application implements a comprehensive contact backup and listing system that works across multiple platforms (Web, iOS, Android, Desktop). This document breaks down how contacts are saved, exported, and listed as backups.
+
+## Architecture Components
+
+### 1. Database Layer
+
+#### Contact Data Structure
+```typescript
+interface Contact {
+  did: string;                    // Decentralized Identifier (primary key)
+  contactMethods?: ContactMethod[]; // Array of contact methods (EMAIL, SMS, etc.)
+  name?: string;                  // Display name
+  nextPubKeyHashB64?: string;     // Base64 hash of next public key
+  notes?: string;                 // User notes
+  profileImageUrl?: string;       // Profile image URL
+  publicKeyBase64?: string;       // Base64 encoded public key
+  seesMe?: boolean;               // Visibility setting
+  registered?: boolean;           // Registration status
+}
+
+interface ContactMethod {
+  label: string;                  // Display label
+  type: string;                   // Type (EMAIL, SMS, WHATSAPP, etc.)
+  value: string;                  // Contact value
+}
+```
+
+#### Database Schema
+```sql
+CREATE TABLE contacts (
+  id INTEGER PRIMARY KEY AUTOINCREMENT,
+  did TEXT NOT NULL,              -- Decentralized Identifier
+  name TEXT,                      -- Display name
+  contactMethods TEXT,            -- JSON string of contact methods
+  nextPubKeyHashB64 TEXT,         -- Next public key hash
+  notes TEXT,                     -- User notes
+  profileImageUrl TEXT,           -- Profile image URL
+  publicKeyBase64 TEXT,           -- Public key
+  seesMe BOOLEAN,                 -- Visibility flag
+  registered BOOLEAN              -- Registration status
+);
+
+CREATE INDEX idx_contacts_did ON contacts(did);
+CREATE INDEX idx_contacts_name ON contacts(name);
+```
+
+### 2. Contact Saving Operations
+
+#### A. Adding New Contacts
+
+**1. QR Code Scanning (`ContactQRScanFullView.vue`)**
+```typescript
+async addNewContact(contact: Contact) {
+  // Check for existing contact
+  const existingContacts = await platformService.dbQuery(
+    "SELECT * FROM contacts WHERE did = ?", [contact.did]
+  );
+  
+  if (existingContact) {
+    // Handle duplicate
+    return;
+  }
+  
+  // Convert contactMethods to JSON string for storage
+  contact.contactMethods = JSON.stringify(
+    parseJsonField(contact.contactMethods, [])
+  );
+  
+  // Insert into database
+  const { sql, params } = databaseUtil.generateInsertStatement(
+    contact as unknown as Record<string, unknown>, "contacts"
+  );
+  await platformService.dbExec(sql, params);
+}
+```
+
+**2. Manual Contact Addition (`ContactsView.vue`)**
+```typescript
+private async addContact(newContact: Contact) {
+  // Validate DID format
+  if (!isDid(newContact.did)) {
+    throw new Error("Invalid DID format");
+  }
+  
+  // Generate and execute INSERT statement
+  const { sql, params } = databaseUtil.generateInsertStatement(
+    newContact as unknown as Record<string, unknown>, "contacts"
+  );
+  await platformService.dbExec(sql, params);
+}
+```
+
+**3. Contact Import (`ContactImportView.vue`)**
+```typescript
+async importContacts() {
+  for (const contact of selectedContacts) {
+    const contactToStore = contactToDbRecord(contact);
+    
+    if (existingContact) {
+      // Update existing contact
+      const { sql, params } = databaseUtil.generateUpdateStatement(
+        contactToStore, "contacts", "did = ?", [contact.did]
+      );
+      await platformService.dbExec(sql, params);
+    } else {
+      // Add new contact
+      const { sql, params } = databaseUtil.generateInsertStatement(
+        contactToStore, "contacts"
+      );
+      await platformService.dbExec(sql, params);
+    }
+  }
+}
+```
+
+#### B. Updating Existing Contacts
+
+**Contact Editing (`ContactEditView.vue`)**
+```typescript
+async saveEdit() {
+  // Normalize contact methods
+  const contactMethods = this.contactMethods.map(method => ({
+    ...method,
+    type: method.type.toUpperCase()
+  }));
+  
+  // Update database
+  const contactMethodsString = JSON.stringify(contactMethods);
+  await platformService.dbExec(
+    "UPDATE contacts SET name = ?, notes = ?, contactMethods = ? WHERE did = ?",
+    [this.contactName, this.contactNotes, contactMethodsString, this.contact?.did]
+  );
+}
+```
+
+### 3. Contact Export/Backup System
+
+#### A. Export Process (`DataExportSection.vue`)
+
+#### 1. Data Retrieval
+
+```typescript
+async exportDatabase() {
+  // Query all contacts from database
+  const result = await platformService.dbQuery("SELECT * FROM contacts");
+  const allContacts = databaseUtil.mapQueryResultToValues(result) as Contact[];
+  
+  // Convert to export format
+  const exportData = contactsToExportJson(allContacts);
+  const jsonStr = JSON.stringify(exportData, null, 2);
+}
+```
+
+#### 2. Export Format Conversion (`libs/util.ts`)
+
+```typescript
+export const contactsToExportJson = (contacts: Contact[]): DatabaseExport => {
+  const rows = contacts.map((contact) => ({
+    did: contact.did,
+    name: contact.name || null,
+    contactMethods: contact.contactMethods 
+      ? JSON.stringify(parseJsonField(contact.contactMethods, []))
+      : null,
+    nextPubKeyHashB64: contact.nextPubKeyHashB64 || null,
+    notes: contact.notes || null,
+    profileImageUrl: contact.profileImageUrl || null,
+    publicKeyBase64: contact.publicKeyBase64 || null,
+    seesMe: contact.seesMe || false,
+    registered: contact.registered || false,
+  }));
+
+  return {
+    data: {
+      data: [{ tableName: "contacts", rows }]
+    }
+  };
+};
+```
+
+#### 3. File Generation
+
+```typescript
+// Create timestamped filename
+const timestamp = getTimestampForFilename();
+const fileName = `${AppString.APP_NAME_NO_SPACES}-backup-contacts-${timestamp}.json`;
+
+// Create blob and save
+const blob = new Blob([jsonStr], { type: "application/json" });
+```
+
+#### B. Platform-Specific File Saving
+
+##### 1. Web Platform (`WebPlatformService.ts`)**
+
+```typescript
+// Uses browser download API
+const downloadUrl = URL.createObjectURL(blob);
+const downloadAnchor = this.$refs.downloadLink as HTMLAnchorElement;
+downloadAnchor.href = downloadUrl;
+downloadAnchor.download = fileName;
+downloadAnchor.click();
+```
+
+##### 2. Mobile Platforms (`CapacitorPlatformService.ts`)
+
+```typescript
+async writeAndShareFile(fileName: string, content: string, options = {}) {
+  let fileUri: string;
+  
+  if (options.allowLocationSelection) {
+    // User chooses location
+    fileUri = await this.saveWithUserChoice(fileName, content, options.mimeType);
+  } else if (options.saveToPrivateStorage) {
+    // Save to app-private storage
+    const result = await Filesystem.writeFile({
+      path: fileName,
+      data: content,
+      directory: Directory.Data,
+      encoding: Encoding.UTF8,
+      recursive: true,
+    });
+    fileUri = result.uri;
+  } else {
+    // Save to user-accessible location (Downloads/Documents)
+    fileUri = await this.saveToDownloads(fileName, content);
+  }
+  
+  // Share the file
+  return await this.shareFile(fileUri, fileName);
+}
+```
+
+##### 3. Desktop Platforms (`ElectronPlatformService.ts`, `PyWebViewPlatformService.ts`)
+
+```typescript
+// Not implemented - returns empty results
+async listBackupFiles(): Promise<Array<{name: string, uri: string, size?: number, type: 'contacts' | 'seed' | 'other', path?: string}>> {
+  return [];
+}
+```
+
+### 4. Backup File Listing System
+
+#### A. File Discovery (`CapacitorPlatformService.ts`)
+
+##### 1. Enhanced File Discovery
+
+```typescript
+async listUserAccessibleFilesEnhanced(): Promise<Array<{name: string, uri: string, size?: number, path?: string}>> {
+  const allFiles: Array<{name: string, uri: string, size?: number, path?: string}> = [];
+  
+  if (this.getCapabilities().isIOS) {
+    // iOS: Documents directory
+    const result = await Filesystem.readdir({
+      path: ".",
+      directory: Directory.Documents,
+    });
+    const files = result.files.map((file) => ({
+      name: typeof file === "string" ? file : file.name,
+      uri: `file://${file.uri || file}`,
+      size: typeof file === "string" ? undefined : file.size,
+      path: "Documents"
+    }));
+    allFiles.push(...files);
+  } else {
+    // Android: Multiple locations
+    const commonPaths = ["Download", "Documents", "Backups", "TimeSafari", "Data"];
+    
+    for (const path of commonPaths) {
+      try {
+        const result = await Filesystem.readdir({
+          path: path,
+          directory: Directory.ExternalStorage,
+        });
+        
+        // Filter for TimeSafari-related files
+        const relevantFiles = result.files
+          .filter(file => {
+            const fileName = typeof file === "string" ? file : file.name;
+            const name = fileName.toLowerCase();
+            return name.includes('timesafari') || 
+                   name.includes('backup') || 
+                   name.includes('contacts') ||
+                   name.endsWith('.json');
+          })
+          .map((file) => ({
+            name: typeof file === "string" ? file : file.name,
+            uri: `file://${file.uri || file}`,
+            size: typeof file === "string" ? undefined : file.size,
+            path: path
+          }));
+        
+        allFiles.push(...relevantFiles);
+      } catch (error) {
+        // Silently skip inaccessible directories
+      }
+    }
+  }
+  
+  return allFiles;
+}
+```
+
+**2. Backup File Filtering**
+```typescript
+async listBackupFiles(): Promise<Array<{name: string, uri: string, size?: number, type: 'contacts' | 'seed' | 'other', path?: string}>> {
+  const allFiles = await this.listUserAccessibleFilesEnhanced();
+  
+  const backupFiles = allFiles
+    .filter(file => {
+      const name = file.name.toLowerCase();
+      
+      // Exclude directory-access notification files
+      if (name.startsWith('timesafari-directory-access-') && name.endsWith('.txt')) {
+        return false;
+      }
+      
+      // Check backup criteria
+      const isJson = name.endsWith('.json');
+      const hasTimeSafari = name.includes('timesafari');
+      const hasBackup = name.includes('backup');
+      const hasContacts = name.includes('contacts');
+      const hasSeed = name.includes('seed');
+      const hasExport = name.includes('export');
+      const hasData = name.includes('data');
+      
+      return isJson || hasTimeSafari || hasBackup || hasContacts || hasSeed || hasExport || hasData;
+    })
+    .map(file => {
+      const name = file.name.toLowerCase();
+      let type: 'contacts' | 'seed' | 'other' = 'other';
+      
+      // Categorize files
+      if (name.includes('contacts') || (name.includes('timesafari') && name.includes('backup'))) {
+        type = 'contacts';
+      } else if (name.includes('seed') || name.includes('mnemonic') || name.includes('private')) {
+        type = 'seed';
+      } else if (name.endsWith('.json')) {
+        type = 'other';
+      }
+      
+      return { ...file, type };
+    });
+  
+  return backupFiles;
+}
+```
+
+#### B. UI Components (`BackupFilesList.vue`)
+
+**1. File Display**
+```typescript
+@Component
+export default class BackupFilesList extends Vue {
+  backupFiles: Array<{name: string, uri: string, size?: number, type: 'contacts' | 'seed' | 'other', path?: string}> = [];
+  selectedType: 'all' | 'contacts' | 'seed' | 'other' = 'all';
+  isLoading = false;
+
+  async refreshFiles() {
+    this.isLoading = true;
+    try {
+      this.backupFiles = await this.platformService.listBackupFiles();
+      
+      // Log file type distribution
+      const typeCounts = {
+        contacts: this.backupFiles.filter(f => f.type === 'contacts').length,
+        seed: this.backupFiles.filter(f => f.type === 'seed').length,
+        other: this.backupFiles.filter(f => f.type === 'other').length,
+        total: this.backupFiles.length
+      };
+    } catch (error) {
+      // Handle error
+    } finally {
+      this.isLoading = false;
+    }
+  }
+}
+```
+
+**2. File Operations**
+```typescript
+async openFile(fileUri: string, fileName: string) {
+  const result = await this.platformService.openFile(fileUri, fileName);
+  if (!result.success) {
+    throw new Error(result.error || "Failed to open file");
+  }
+}
+
+async openBackupDirectory() {
+  const result = await this.platformService.openBackupDirectory();
+  if (!result.success) {
+    throw new Error(result.error || "Failed to open backup directory");
+  }
+}
+```
+
+### 5. Platform-Specific Storage Locations
+
+#### A. iOS Platform
+- **Primary Location**: Documents folder (accessible via Files app)
+- **Persistence**: Survives app installations
+- **Access**: Through iOS Files app
+- **File Format**: JSON with timestamped filenames
+
+#### B. Android Platform
+- **Primary Locations**: 
+  - `Download/TimeSafari/` (external storage)
+  - `TimeSafari/` (external storage)
+  - User-chosen locations via file picker
+- **Persistence**: Survives app installations
+- **Access**: Through file managers
+- **File Format**: JSON with timestamped filenames
+
+#### C. Web Platform
+- **Primary Location**: Browser downloads folder
+- **Persistence**: Depends on browser settings
+- **Access**: Through browser download manager
+- **File Format**: JSON with timestamped filenames
+
+#### D. Desktop Platforms (Electron/PyWebView)
+- **Status**: Not implemented
+- **Fallback**: Returns empty arrays for file operations
+
+### 6. File Naming Convention
+
+#### A. Contact Backup Files
+```
+TimeSafari-backup-contacts-YYYY-MM-DD-HH-MM-SS.json
+```
+
+#### B. File Content Structure
+```json
+{
+  "data": {
+    "data": [
+      {
+        "tableName": "contacts",
+        "rows": [
+          {
+            "did": "did:ethr:0x...",
+            "name": "Contact Name",
+            "contactMethods": "[{\"type\":\"EMAIL\",\"value\":\"email@example.com\"}]",
+            "notes": "User notes",
+            "profileImageUrl": "https://...",
+            "publicKeyBase64": "base64...",
+            "seesMe": true,
+            "registered": false
+          }
+        ]
+      }
+    ]
+  }
+}
+```
+
+### 7. Error Handling and Logging
+
+#### A. Comprehensive Logging
+```typescript
+logger.log("[CapacitorPlatformService] File write successful:", {
+  uri: fileUri,
+  saved,
+  timestamp: new Date().toISOString(),
+});
+
+logger.log("[BackupFilesList] Refreshed backup files:", {
+  count: this.backupFiles.length,
+  files: this.backupFiles.map(f => ({ 
+    name: f.name, 
+    type: f.type, 
+    path: f.path,
+    size: f.size 
+  })),
+  platform: this.platformCapabilities.isIOS ? "iOS" : "Android",
+  timestamp: new Date().toISOString(),
+});
+```
+
+#### B. Error Recovery
+```typescript
+try {
+  // File operations
+} catch (error) {
+  logger.error("[CapacitorPlatformService] Failed to list backup files:", error);
+  return [];
+}
+```
+
+### 8. Security Considerations
+
+#### A. Data Privacy
+- Contact data is stored locally on device
+- No cloud synchronization of contact data
+- User controls visibility settings per contact
+- Backup files contain only user-authorized data
+
+#### B. File Access
+- Platform-specific permission handling
+- User choice for file locations
+- Secure storage options for sensitive data
+- Proper error handling for access failures
+
+### 9. Performance Optimizations
+
+#### A. Database Operations
+- Indexed queries on `did` and `name` fields
+- Batch operations for multiple contacts
+- Efficient JSON serialization/deserialization
+- Connection pooling and reuse
+
+#### B. File Operations
+- Asynchronous file I/O
+- Efficient file discovery algorithms
+- Caching of file lists
+- Background refresh operations
+
+## Summary
+
+The TimeSafari contact backup system provides:
+
+1. **Robust Data Storage**: SQLite-based contact storage with proper indexing
+2. **Cross-Platform Compatibility**: Works on web, iOS, Android, and desktop
+3. **Flexible Export Options**: Multiple file formats and storage locations
+4. **Intelligent File Discovery**: Finds backup files regardless of user-chosen locations
+5. **User-Friendly Interface**: Clear categorization and easy file management
+6. **Comprehensive Logging**: Detailed tracking for debugging and monitoring
+7. **Security-First Design**: Privacy-preserving with user-controlled data access
+
+The system ensures that users can reliably backup and restore their contact data across different platforms while maintaining data integrity and user privacy. 

android/app/build.gradle

@@ -31,8 +31,8 @@ android {
         applicationId "app.timesafari.app"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 25
-        versionName "0.5.0"
+        versionCode 26
+        versionName "0.5.1"
         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 = 25;
+				CURRENT_PROJECT_VERSION = 26;
 				DEVELOPMENT_TEAM = GM3FS5JQPH;
 				ENABLE_APP_SANDBOX = NO;
 				ENABLE_USER_SCRIPT_SANDBOXING = NO;
@@ -413,7 +413,7 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 0.5.0;
+				MARKETING_VERSION = 0.5.1;
 				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 = 25;
+				CURRENT_PROJECT_VERSION = 26;
 				DEVELOPMENT_TEAM = GM3FS5JQPH;
 				ENABLE_APP_SANDBOX = NO;
 				ENABLE_USER_SCRIPT_SANDBOXING = NO;
@@ -440,7 +440,7 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 0.5.0;
+				MARKETING_VERSION = 0.5.1;
 				PRODUCT_BUNDLE_IDENTIFIER = app.timesafari;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				SWIFT_ACTIVE_COMPILATION_CONDITIONS = "";

package.json

@@ -1,6 +1,6 @@
 {
   "name": "timesafari",
-  "version": "0.4.8",
+  "version": "0.5.1",
   "description": "Time Safari Application",
   "author": {
     "name": "Time Safari Team"

src/components/BackupFilesList.vue

@@ -0,0 +1,894 @@
+/** * Backup Files List Component * * Displays a list of backup files saved by
+the app and provides options to: * - View backup files by type (contacts, seed,
+other) * - Open individual files in the device's file viewer * - Access the
+backup directory in the device's file explorer * * @component * @displayName
+BackupFilesList * @example * ```vue *
+<BackupFilesList />
+* ``` */
+
+<template>
+  <div class="backup-files-list">
+    <div class="flex justify-between items-center mb-4">
+      <h3 class="text-lg font-semibold">Backup Files</h3>
+      <div class="flex gap-2">
+        <button
+          v-if="platformCapabilities.hasFileSystem"
+          class="text-sm bg-blue-500 hover:bg-blue-600 text-white px-3 py-1 rounded"
+          :disabled="isLoading"
+          @click="refreshFiles()"
+        >
+          <font-awesome
+            icon="refresh"
+            class="fa-fw"
+            :class="{ 'animate-spin': isLoading }"
+          />
+          Refresh
+        </button>
+        <button
+          v-if="platformCapabilities.hasFileSystem"
+          class="text-sm bg-green-500 hover:bg-green-600 text-white px-3 py-1 rounded"
+          :disabled="isLoading"
+          @click="openBackupDirectory()"
+        >
+          <font-awesome icon="folder-open" class="fa-fw" />
+          Open Directory
+        </button>
+        <button
+          v-if="platformCapabilities.hasFileSystem && isDevelopment"
+          class="text-sm bg-yellow-500 hover:bg-yellow-600 text-white px-3 py-1 rounded"
+          :disabled="isLoading"
+          title="Debug file discovery (development only)"
+          @click="debugFileDiscovery()"
+        >
+          <font-awesome icon="bug" class="fa-fw" />
+          Debug
+        </button>
+        <button
+          :disabled="isLoading"
+          class="px-3 py-1 bg-green-500 text-white rounded text-sm hover:bg-green-600 disabled:opacity-50"
+          @click="createTestBackup"
+        >
+          Create Test Backup
+        </button>
+        <button
+          :disabled="isLoading"
+          class="px-3 py-1 bg-purple-500 text-white rounded text-sm hover:bg-purple-600 disabled:opacity-50"
+          @click="testDirectoryContexts"
+        >
+          Test Contexts
+        </button>
+      </div>
+    </div>
+
+    <div v-if="isLoading" class="text-center py-4">
+      <font-awesome icon="spinner" class="animate-spin fa-2x" />
+      <p class="mt-2">Loading backup files...</p>
+    </div>
+
+    <div
+      v-else-if="backupFiles.length === 0"
+      class="text-center py-4 text-gray-500"
+    >
+      <font-awesome icon="folder-open" class="fa-2x mb-2" />
+      <p>No backup files found</p>
+      <p class="text-sm mt-1">
+        Create backups using the export functions above
+      </p>
+      <div
+        class="mt-3 p-3 bg-blue-50 border border-blue-200 rounded-lg text-left"
+      >
+        <p class="text-sm font-medium text-blue-800 mb-2">
+          💡 How to create backup files:
+        </p>
+        <ul class="text-xs text-blue-700 space-y-1">
+          <li>
+            • Use the "Export Contacts" button above to create contact backups
+          </li>
+          <li>• Use the "Export Seed" button to backup your recovery phrase</li>
+          <li>
+            • Backup files are saved to persistent storage that survives app
+            installations
+          </li>
+          <li
+            v-if="platformCapabilities.isMobile && !platformCapabilities.isIOS"
+            class="text-orange-700"
+          >
+            • On Android: Files are saved to Downloads/TimeSafari or app data
+            directory
+          </li>
+          <li v-if="platformCapabilities.isIOS" class="text-orange-700">
+            • On iOS: Files are saved to Documents folder (accessible via Files
+            app)
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <div v-else class="space-y-2">
+      <!-- File Type Filter -->
+      <div class="flex gap-2 mb-3">
+        <button
+          v-for="type in ['all', 'contacts', 'seed', 'other'] as const"
+          :key="type"
+          :class="[
+            'text-sm px-3 py-1 rounded border',
+            selectedType === type
+              ? 'bg-blue-500 text-white border-blue-500'
+              : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50',
+          ]"
+          @click="selectedType = type"
+        >
+          {{
+            type === "all"
+              ? "All"
+              : type.charAt(0).toUpperCase() + type.slice(1)
+          }}
+          <span class="ml-1 text-xs"> ({{ getFileCountByType(type) }}) </span>
+        </button>
+      </div>
+
+      <!-- Files List -->
+      <div class="flex items-center gap-2 mb-2">
+        <span v-for="(crumb, idx) in breadcrumbs" :key="idx">
+          <span
+            v-if="idx < breadcrumbs.length - 1"
+            class="text-blue-600 cursor-pointer underline"
+            @click="goToBreadcrumb(idx)"
+          >
+            {{ crumb }}
+          </span>
+          <span v-else class="font-bold">{{ crumb }}</span>
+          <span v-if="idx < breadcrumbs.length - 1"> / </span>
+        </span>
+      </div>
+      <div v-if="currentPath.length > 1" class="mb-2">
+        <button class="text-xs text-blue-500 underline" @click="goUp">
+          ⬅ Up
+        </button>
+      </div>
+      <div class="mb-2">
+        <label class="inline-flex items-center">
+          <input
+            v-model="debugShowAll"
+            type="checkbox"
+            class="mr-2"
+            @change="loadDirectory"
+          />
+          <span class="text-xs">Debug: Show all entries as files</span>
+        </label>
+        <span v-if="debugShowAll" class="text-xs text-red-600 ml-2"
+          >[Debug mode: forcibly treating all entries as files]</span
+        >
+      </div>
+      <div class="space-y-2 max-h-64 overflow-y-auto">
+        <div
+          v-for="entry in folders"
+          :key="'folder-' + entry.path"
+          class="flex items-center justify-between p-3 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer"
+          @click="openFolder(entry)"
+        >
+          <div class="flex items-center gap-2">
+            <font-awesome icon="folder" class="fa-fw text-yellow-500" />
+            <span class="font-medium">{{ entry.name }}</span>
+            <span
+              class="text-xs bg-gray-200 text-gray-700 px-2 py-0.5 rounded-full ml-2"
+              >Folder</span
+            >
+          </div>
+        </div>
+        <div
+          v-for="entry in files"
+          :key="'file-' + entry.path"
+          class="flex items-center justify-between p-3 bg-white border border-gray-200 rounded-lg hover:bg-gray-50"
+        >
+          <div class="flex-1 min-w-0">
+            <div class="flex items-center gap-2">
+              <font-awesome icon="file-alt" class="fa-fw text-gray-500" />
+              <span class="font-medium truncate">{{ entry.name }}</span>
+            </div>
+            <div class="text-sm text-gray-500 mt-1">
+              <span v-if="entry.size">{{ formatFileSize(entry.size) }}</span>
+              <span v-else>Size unknown</span>
+              <span
+                v-if="entry.path && !platformCapabilities.isIOS"
+                class="ml-2 text-xs text-blue-600"
+                >📁 {{ entry.path }}</span
+              >
+            </div>
+          </div>
+          <div class="flex gap-2 ml-3">
+            <button
+              class="text-blue-500 hover:text-blue-700 p-1"
+              title="Open file"
+              @click="openFile(entry.uri, entry.name)"
+            >
+              <font-awesome icon="external-link-alt" class="fa-fw" />
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Summary -->
+      <div class="text-sm text-gray-500 mt-3 pt-3 border-t">
+        Showing {{ filteredFiles.length }} of {{ backupFiles.length }} backup
+        files
+      </div>
+
+      <div class="text-sm text-gray-600 mb-2">
+        <p>
+          📁 Backup files are saved to persistent storage that survives app
+          installations:
+        </p>
+        <ul class="list-disc list-inside ml-2 mt-1 text-xs">
+          <li v-if="platformCapabilities.isIOS">
+            iOS: Documents folder (accessible via Files app)
+          </li>
+          <li
+            v-if="platformCapabilities.isMobile && !platformCapabilities.isIOS"
+          >
+            Android: Downloads/TimeSafari or external storage (accessible via
+            file managers)
+          </li>
+          <li v-if="!platformCapabilities.isMobile">
+            Desktop: User's download directory
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Watch } from "vue-facing-decorator";
+import { NotificationIface } from "../constants/app";
+import { logger } from "../utils/logger";
+import { PlatformServiceFactory } from "../services/PlatformServiceFactory";
+import {
+  PlatformService,
+  PlatformCapabilities,
+} from "../services/PlatformService";
+
+/**
+ * @vue-component
+ * Backup Files List Component
+ * Displays and manages backup files with platform-specific functionality
+ */
+@Component
+export default class BackupFilesList extends Vue {
+  /**
+   * Notification function injected by Vue
+   * Used to show success/error messages to the user
+   */
+  $notify!: (notification: NotificationIface, timeout?: number) => void;
+
+  /**
+   * Platform service instance for platform-specific operations
+   */
+  private platformService: PlatformService =
+    PlatformServiceFactory.getInstance();
+
+  /**
+   * Platform capabilities for the current platform
+   */
+  private get platformCapabilities(): PlatformCapabilities {
+    return this.platformService.getCapabilities();
+  }
+
+  /**
+   * List of backup files found on the device
+   */
+  backupFiles: Array<{
+    name: string;
+    uri: string;
+    size?: number;
+    type: "contacts" | "seed" | "other";
+    path?: string;
+  }> = [];
+
+  /**
+   * Currently selected file type filter
+   */
+  selectedType: "all" | "contacts" | "seed" | "other" = "all";
+
+  /**
+   * Loading state for file operations
+   */
+  isLoading = false;
+
+  /**
+   * Interval for periodic refresh (5 minutes)
+   */
+  private refreshInterval: number | null = null;
+
+  /**
+   * Current path for folder navigation (array for breadcrumbs)
+   */
+  currentPath: string[] = [];
+
+  /**
+   * List of files/folders in the current directory
+   */
+  directoryEntries: Array<{
+    name: string;
+    uri: string;
+    size?: number;
+    path: string;
+    type: "file" | "folder";
+  }> = [];
+
+  /**
+   * Temporary debug mode to show all entries as files
+   */
+  debugShowAll = false;
+
+  /**
+   * Checks and requests storage permissions if needed.
+   * Returns true if permission is granted, false otherwise.
+   */
+  private async ensureStoragePermission(): Promise<boolean> {
+    logger.log(
+      "[BackupFilesList] ensureStoragePermission called. platformCapabilities:",
+      this.platformCapabilities,
+    );
+    if (!this.platformCapabilities.hasFileSystem) return true;
+    // Only relevant for native platforms (Android/iOS)
+    const platformService = this.platformService as any;
+    if (typeof platformService.checkStoragePermissions === "function") {
+      try {
+        await platformService.checkStoragePermissions();
+        logger.log("[BackupFilesList] Storage permission granted.");
+        return true;
+      } catch (error) {
+        logger.error("[BackupFilesList] Storage permission denied:", error);
+
+        // Get specific guidance for the platform
+        let guidance =
+          "This app needs permission to access your files to list and restore backups.";
+        if (
+          typeof platformService.getStoragePermissionGuidance === "function"
+        ) {
+          try {
+            guidance = await platformService.getStoragePermissionGuidance();
+          } catch (guidanceError) {
+            logger.warn(
+              "[BackupFilesList] Could not get permission guidance:",
+              guidanceError,
+            );
+          }
+        }
+
+        this.$notify(
+          {
+            group: "alert",
+            type: "warning",
+            title: "Storage Permission Required",
+            text: guidance,
+          },
+          10000, // Show for 10 seconds to give user time to read
+        );
+        return false;
+      }
+    }
+    return true;
+  }
+
+  /**
+   * Lifecycle hook to load backup files when component is mounted
+   */
+  async mounted() {
+    logger.log(
+      "[BackupFilesList] mounted hook called. platformCapabilities:",
+      this.platformCapabilities,
+    );
+    if (this.platformCapabilities.hasFileSystem) {
+      // Check/request permission before loading
+      const hasPermission = await this.ensureStoragePermission();
+      if (hasPermission) {
+        // Set default root path
+        if (this.platformCapabilities.isIOS) {
+          this.currentPath = ["."];
+        } else {
+          this.currentPath = ["Download", "TimeSafari"];
+        }
+        await this.loadDirectory();
+        this.refreshInterval = window.setInterval(
+          () => {
+            this.loadDirectory();
+          },
+          5 * 60 * 1000,
+        );
+      }
+    }
+  }
+
+  /**
+   * Lifecycle hook to clean up resources when component is unmounted
+   */
+  beforeUnmount() {
+    if (this.refreshInterval) {
+      clearInterval(this.refreshInterval);
+      this.refreshInterval = null;
+    }
+  }
+
+  /**
+   * Computed property for filtered files based on selected type
+   * Note: The 'All' tab count is sometimes too small. Logging for debugging.
+   */
+  get filteredFiles() {
+    if (this.selectedType === "all") {
+      logger.log("[BackupFilesList] filteredFiles (All):", this.backupFiles);
+      return this.backupFiles;
+    }
+    const filtered = this.backupFiles.filter(
+      (file) => file.type === this.selectedType,
+    );
+    logger.log(
+      `[BackupFilesList] filteredFiles (${this.selectedType}):`,
+      filtered,
+    );
+    return filtered;
+  }
+
+  /**
+   * Computed property to check if we're in development mode
+   */
+  get isDevelopment(): boolean {
+    return import.meta.env.DEV;
+  }
+
+  /**
+   * Load the current directory entries
+   */
+  async loadDirectory() {
+    if (!this.platformCapabilities.hasFileSystem) return;
+    this.isLoading = true;
+    try {
+      const path =
+        this.currentPath.join("/") ||
+        (this.platformCapabilities.isIOS ? "." : "Download/TimeSafari");
+      this.directoryEntries = await (
+        this.platformService as PlatformService
+      ).listFilesInDirectory(path, this.debugShowAll);
+      logger.log("[BackupFilesList] Loaded directory:", {
+        path,
+        entries: this.directoryEntries,
+      });
+    } catch (error) {
+      logger.error("[BackupFilesList] Failed to load directory:", error);
+      this.directoryEntries = [];
+    } finally {
+      this.isLoading = false;
+    }
+  }
+
+  /**
+   * Navigate into a folder
+   */
+  async openFolder(entry: { name: string; path: string }) {
+    this.currentPath.push(entry.name);
+    await this.loadDirectory();
+  }
+
+  /**
+   * Navigate to a breadcrumb
+   */
+  async goToBreadcrumb(index: number) {
+    this.currentPath = this.currentPath.slice(0, index + 1);
+    await this.loadDirectory();
+  }
+
+  /**
+   * Go up one directory
+   */
+  async goUp() {
+    if (this.currentPath.length > 1) {
+      this.currentPath.pop();
+      await this.loadDirectory();
+    }
+  }
+
+  /**
+   * Computed property for breadcrumbs
+   */
+  get breadcrumbs() {
+    return this.currentPath;
+  }
+
+  /**
+   * Computed property for showing files and folders
+   */
+  get folders() {
+    return this.directoryEntries.filter((e) => e.type === "folder");
+  }
+  get files() {
+    return this.directoryEntries.filter((e) => e.type === "file");
+  }
+
+  /**
+   * Refreshes the list of backup files from the device
+   */
+  async refreshFiles() {
+    logger.log("[BackupFilesList] refreshFiles called.");
+    if (!this.platformCapabilities.hasFileSystem) {
+      return;
+    }
+    // Check/request permission before refreshing
+    const hasPermission = await this.ensureStoragePermission();
+    if (!hasPermission) {
+      this.backupFiles = [];
+      this.isLoading = false;
+      return;
+    }
+    this.isLoading = true;
+    try {
+      this.backupFiles = await this.platformService.listBackupFiles();
+      logger.log("[BackupFilesList] Refreshed backup files:", {
+        count: this.backupFiles.length,
+        files: this.backupFiles.map((f) => ({
+          name: f.name,
+          type: f.type,
+          path: f.path,
+          size: f.size,
+        })),
+        platform: this.platformCapabilities.isIOS ? "iOS" : "Android",
+        timestamp: new Date().toISOString(),
+      });
+      // Debug: Log file type distribution
+      const typeCounts = {
+        contacts: this.backupFiles.filter((f) => f.type === "contacts").length,
+        seed: this.backupFiles.filter((f) => f.type === "seed").length,
+        other: this.backupFiles.filter((f) => f.type === "other").length,
+        total: this.backupFiles.length,
+      };
+      logger.log("[BackupFilesList] File type distribution:", typeCounts);
+      // Log the full backupFiles array for debugging the 'All' tab count
+      logger.log(
+        "[BackupFilesList] backupFiles array for All tab:",
+        this.backupFiles,
+      );
+    } catch (error) {
+      logger.error("[BackupFilesList] Failed to refresh backup files:", error);
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error Loading Files",
+          text: "Failed to load backup files from your device.",
+        },
+        5000,
+      );
+    } finally {
+      this.isLoading = false;
+    }
+  }
+
+  /**
+   * Creates a test backup file for debugging purposes
+   */
+  async createTestBackup() {
+    try {
+      this.isLoading = true;
+      logger.log("[BackupFilesList] Creating test backup file");
+
+      const result = await this.platformService.createTestBackupFile();
+
+      if (result.success) {
+        logger.log("[BackupFilesList] Test backup file created successfully:", {
+          fileName: result.fileName,
+          uri: result.uri,
+          timestamp: new Date().toISOString(),
+        });
+
+        this.$notify(
+          {
+            group: "alert",
+            type: "success",
+            title: "Test Backup Created",
+            text: `Test backup file "${result.fileName}" created successfully. Refresh the list to see it.`,
+          },
+          5000,
+        );
+
+        // Refresh the file list to show the new test file
+        await this.refreshFiles();
+      } else {
+        throw new Error(result.error || "Failed to create test backup file");
+      }
+    } catch (error) {
+      logger.error(
+        "[BackupFilesList] Failed to create test backup file:",
+        error,
+      );
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Test Backup Failed",
+          text: "Failed to create test backup file. Check the console for details.",
+        },
+        5000,
+      );
+    } finally {
+      this.isLoading = false;
+    }
+  }
+
+  /**
+   * Tests different directory contexts to debug file visibility issues
+   */
+  async testDirectoryContexts() {
+    try {
+      this.isLoading = true;
+      logger.log("[BackupFilesList] Testing directory contexts");
+
+      const debugOutput = await this.platformService.testDirectoryContexts();
+
+      logger.log(
+        "[BackupFilesList] Directory context test results:",
+        debugOutput,
+      );
+
+      // Show the debug output in a notification or alert
+      this.$notify(
+        {
+          group: "alert",
+          type: "info",
+          title: "Directory Context Test",
+          text: "Directory context test completed. Check the console for detailed results.",
+        },
+        5000,
+      );
+
+      // Also log the full output to console for easy access
+      logger.log("=== Directory Context Test Results ===");
+      logger.log(debugOutput);
+      logger.log("=== End Test Results ===");
+    } catch (error) {
+      logger.error(
+        "[BackupFilesList] Failed to test directory contexts:",
+        error,
+      );
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Context Test Failed",
+          text: "Failed to test directory contexts. Check the console for details.",
+        },
+        5000,
+      );
+    } finally {
+      this.isLoading = false;
+    }
+  }
+
+  /**
+   * Refreshes the file list after a backup is created
+   * This method can be called from parent components
+   */
+  async refreshAfterSave() {
+    logger.log("[BackupFilesList] refreshAfterSave called");
+    await this.refreshFiles();
+  }
+
+  /**
+   * Opens a specific file in the device's file viewer
+   * @param fileUri - URI of the file to open
+   * @param fileName - Name of the file for display
+   */
+  async openFile(fileUri: string, fileName: string) {
+    try {
+      const result = await this.platformService.openFile(fileUri, fileName);
+
+      if (result.success) {
+        logger.log("[BackupFilesList] File opened successfully:", {
+          fileName,
+          timestamp: new Date().toISOString(),
+        });
+      } else {
+        throw new Error(result.error || "Failed to open file");
+      }
+    } catch (error) {
+      logger.error("[BackupFilesList] Failed to open file:", error);
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error Opening File",
+          text: `Failed to open ${fileName}. ${error instanceof Error ? error.message : String(error)}`,
+        },
+        5000,
+      );
+    }
+  }
+
+  /**
+   * Opens the backup directory in the device's file explorer
+   */
+  async openBackupDirectory() {
+    try {
+      const result = await this.platformService.openBackupDirectory();
+
+      if (result.success) {
+        logger.log("[BackupFilesList] Backup directory opened successfully:", {
+          timestamp: new Date().toISOString(),
+        });
+      } else {
+        throw new Error(result.error || "Failed to open backup directory");
+      }
+    } catch (error) {
+      logger.error("[BackupFilesList] Failed to open backup directory:", error);
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error Opening Directory",
+          text: `Failed to open backup directory. ${error instanceof Error ? error.message : String(error)}`,
+        },
+        5000,
+      );
+    }
+  }
+
+  /**
+   * Gets the count of files for a specific type
+   * Note: The 'All' tab count is sometimes too small. Logging for debugging.
+   */
+  getFileCountByType(type: "all" | "contacts" | "seed" | "other"): number {
+    let count;
+    if (type === "all") {
+      count = this.backupFiles.length;
+      logger.log(
+        "[BackupFilesList] getFileCountByType (All):",
+        count,
+        this.backupFiles,
+      );
+      return count;
+    }
+    count = this.backupFiles.filter((file) => file.type === type).length;
+    logger.log(`[BackupFilesList] getFileCountByType (${type}):`, count);
+    return count;
+  }
+
+  /**
+   * Gets the appropriate icon for a file type
+   * @param type - File type
+   * @returns FontAwesome icon name
+   */
+  getFileIcon(type: "contacts" | "seed" | "other"): string {
+    switch (type) {
+      case "contacts":
+        return "address-book";
+      case "seed":
+        return "key";
+      default:
+        return "file-alt";
+    }
+  }
+
+  /**
+   * Gets the appropriate icon color for a file type
+   * @param type - File type
+   * @returns CSS color class
+   */
+  getFileIconColor(type: "contacts" | "seed" | "other"): string {
+    switch (type) {
+      case "contacts":
+        return "text-blue-500";
+      case "seed":
+        return "text-orange-500";
+      default:
+        return "text-gray-500";
+    }
+  }
+
+  /**
+   * Gets the appropriate badge color for a file type
+   * @param type - File type
+   * @returns CSS color class
+   */
+  getTypeBadgeColor(type: "contacts" | "seed" | "other"): string {
+    switch (type) {
+      case "contacts":
+        return "bg-blue-100 text-blue-800";
+      case "seed":
+        return "bg-orange-100 text-orange-800";
+      default:
+        return "bg-gray-100 text-gray-800";
+    }
+  }
+
+  /**
+   * Formats file size in human-readable format
+   * @param bytes - File size in bytes
+   * @returns Formatted file size string
+   */
+  formatFileSize(bytes: number): string {
+    if (bytes === 0) return "0 Bytes";
+
+    const k = 1024;
+    const sizes = ["Bytes", "KB", "MB", "GB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
+  }
+
+  /**
+   * Debug method to test file discovery
+   * Can be called from browser console for troubleshooting
+   */
+  public async debugFileDiscovery() {
+    try {
+      logger.log("[BackupFilesList] Starting debug file discovery...");
+
+      // Test the platform service's test methods
+      const platformService = PlatformServiceFactory.getInstance();
+
+      // Test listing all user files
+      const allFilesResult = await platformService.testListUserFiles();
+      logger.log(
+        "[BackupFilesList] All user files test result:",
+        allFilesResult,
+      );
+
+      // Test listing backup files specifically
+      const backupFilesResult = await platformService.testBackupFiles();
+      logger.log(
+        "[BackupFilesList] Backup files test result:",
+        backupFilesResult,
+      );
+
+      // Note: testListAllBackupFiles method is not part of the PlatformService interface
+      // It exists only in CapacitorPlatformService implementation
+      // If needed, this could be added to the interface or called via type assertion
+
+      // Test debug listing all files without filtering (if available)
+      if ("debugListAllFiles" in platformService) {
+        const debugAllFiles = await (
+          platformService as any
+        ).debugListAllFiles();
+        logger.log("[BackupFilesList] Debug all files (no filtering):", {
+          count: debugAllFiles.length,
+          files: debugAllFiles.map((f: any) => ({
+            name: f.name,
+            path: f.path,
+            size: f.size,
+          })),
+        });
+      }
+
+      // Test comprehensive step-by-step debug (if available)
+      if ("debugFileDiscoveryStepByStep" in platformService) {
+        const stepByStepDebug = await (
+          platformService as any
+        ).debugFileDiscoveryStepByStep();
+        logger.log(
+          "[BackupFilesList] Step-by-step debug output:",
+          stepByStepDebug,
+        );
+      }
+
+      return {
+        allFiles: allFilesResult,
+        backupFiles: backupFilesResult,
+        currentBackupFiles: this.backupFiles,
+        debugAllFiles:
+          "debugListAllFiles" in platformService
+            ? await (platformService as any).debugListAllFiles()
+            : null,
+      };
+    } catch (error) {
+      logger.error("[BackupFilesList] Debug file discovery failed:", error);
+      throw error;
+    }
+  }
+
+  @Watch("platformCapabilities.hasFileSystem", { immediate: true })
+  async onFileSystemCapabilityChanged(newVal: boolean) {
+    if (newVal) {
+      await this.refreshFiles();
+    }
+  }
+}
+</script>

src/components/DataExportSection.vue

@@ -1,7 +1,8 @@
 /** * Data Export Section Component * * Provides UI and functionality for
 exporting user data and backing up identifier seeds. * Includes buttons for seed
-backup and database export, with platform-specific download instructions. * *
-@component * @displayName DataExportSection * @example * ```vue *
+backup and database export, with platform-specific download instructions. * Also
+displays a list of backup files with options to open them in the device's file
+explorer. * * @component * @displayName DataExportSection * @example * ```vue *
 <DataExportSection :active-did="currentDid" />
 * ``` */
 
@@ -43,18 +44,27 @@ backup and database export, with platform-specific download instructions. * *
           v-if="platformCapabilities.isIOS"
           class="list-disc list-outside ml-4"
         >
-          On iOS: You will be prompted to choose a location to save your backup
-          file.
+          On iOS: Files are saved to Documents folder (accessible via Files app)
+          and persist between app installations.
         </li>
         <li
           v-if="platformCapabilities.isMobile && !platformCapabilities.isIOS"
           class="list-disc list-outside ml-4"
         >
-          On Android: You will be prompted to choose a location to save your
-          backup file.
+          On Android: Files are saved to Downloads/TimeSafari or external
+          storage (accessible via file managers) and persist between app
+          installations.
         </li>
       </ul>
     </div>
+
+    <!-- Backup Files List -->
+    <div
+      v-if="platformCapabilities.hasFileSystem"
+      class="mt-6 pt-6 border-t border-gray-300"
+    >
+      <BackupFilesList ref="backupFilesList" />
+    </div>
   </div>
 </template>
 
@@ -65,20 +75,21 @@ import { AppString, NotificationIface } from "../constants/app";
 import { Contact } from "../db/tables/contacts";
 import * as databaseUtil from "../db/databaseUtil";
 
-import { logger } from "../utils/logger";
+import { logger, getTimestampForFilename } from "../utils/logger";
 import { PlatformServiceFactory } from "../services/PlatformServiceFactory";
 import {
   PlatformService,
   PlatformCapabilities,
 } from "../services/PlatformService";
 import { contactsToExportJson } from "../libs/util";
+import BackupFilesList from "./BackupFilesList.vue";
 
 /**
  * @vue-component
  * Data Export Section Component
  * Handles database export and seed backup functionality with platform-specific behavior
  */
-@Component
+@Component({ components: { BackupFilesList } })
 export default class DataExportSection extends Vue {
   /**
    * Notification function injected by Vue
@@ -151,7 +162,9 @@ export default class DataExportSection extends Vue {
       const jsonStr = JSON.stringify(exportData, null, 2);
       const blob = new Blob([jsonStr], { type: "application/json" });
 
-      const fileName = `${AppString.APP_NAME_NO_SPACES}-backup-contacts.json`;
+      // Create timestamped filename
+      const timestamp = getTimestampForFilename();
+      const fileName = `${AppString.APP_NAME_NO_SPACES}-backup-contacts-${timestamp}.json`;
 
       if (this.platformCapabilities.hasFileDownload) {
         // Web platform: Use download link
@@ -162,8 +175,21 @@ export default class DataExportSection extends Vue {
         downloadAnchor.click();
         setTimeout(() => URL.revokeObjectURL(this.downloadUrl), 1000);
       } else if (this.platformCapabilities.hasFileSystem) {
-        // Native platform: Write to app directory
-        await this.platformService.writeAndShareFile(fileName, jsonStr);
+        // Native platform: Write to user-accessible location and share
+        const result = await this.platformService.writeAndShareFile(
+          fileName,
+          jsonStr,
+          {
+            allowLocationSelection: true,
+            showLocationSelectionDialog: true,
+            mimeType: "application/json",
+          },
+        );
+
+        // Handle the result
+        if (!result.saved) {
+          throw new Error(result.error || "Failed to save file");
+        }
       } else {
         throw new Error("This platform does not support file downloads.");
       }
@@ -175,10 +201,19 @@ export default class DataExportSection extends Vue {
           title: "Export Successful",
           text: this.platformCapabilities.hasFileDownload
             ? "See your downloads directory for the backup."
-            : "The backup file has been saved.",
+            : "Backup saved to persistent storage that survives app installations. Use the share dialog to access your file and choose where to save it permanently.",
         },
-        3000,
+        5000,
       );
+
+      // Refresh the backup files list
+      const backupFilesList = this.$refs.backupFilesList as any;
+      if (
+        backupFilesList &&
+        typeof backupFilesList.refreshAfterSave === "function"
+      ) {
+        await backupFilesList.refreshAfterSave();
+      }
     } catch (error) {
       logger.error("Export Error:", error);
       this.$notify(
@@ -212,5 +247,18 @@ export default class DataExportSection extends Vue {
       hidden: !this.downloadUrl || !this.platformCapabilities.hasFileDownload,
     };
   }
+
+  async mounted() {
+    // Ensure permissions are requested and refresh backup files list on mount
+    if (this.platformCapabilities.hasFileSystem) {
+      const backupFilesList = this.$refs.backupFilesList as any;
+      if (
+        backupFilesList &&
+        typeof backupFilesList.refreshFiles === "function"
+      ) {
+        await backupFilesList.refreshFiles();
+      }
+    }
+  }
 }
 </script>

src/components/FeedFilters.vue

@@ -104,7 +104,6 @@ import { USE_DEXIE_DB } from "@/constants/app";
 import * as databaseUtil from "../db/databaseUtil";
 import { MASTER_SETTINGS_KEY } from "../db/tables/settings";
 import { db, retrieveSettingsForActiveAccount } from "../db/index";
-import { PlatformServiceFactory } from "@/services/PlatformServiceFactory";
 
 @Component({
   components: {
@@ -143,19 +142,23 @@ export default class FeedFilters extends Vue {
   async toggleHasVisibleDid() {
     this.settingChanged = true;
     this.hasVisibleDid = !this.hasVisibleDid;
-    await db.settings.update(MASTER_SETTINGS_KEY, {
+    await databaseUtil.updateDefaultSettings({
       filterFeedByVisible: this.hasVisibleDid,
     });
+
+    if (USE_DEXIE_DB) {
+      await db.settings.update(MASTER_SETTINGS_KEY, {
+        filterFeedByVisible: this.hasVisibleDid,
+      });
+    }
   }
 
   async toggleNearby() {
     this.settingChanged = true;
     this.isNearby = !this.isNearby;
-    const platformService = PlatformServiceFactory.getInstance();
-    await platformService.dbExec(
-      `UPDATE settings SET filterFeedByNearby = ? WHERE id = ?`,
-      [this.isNearby, MASTER_SETTINGS_KEY],
-    );
+    await databaseUtil.updateDefaultSettings({
+      filterFeedByNearby: this.isNearby,
+    });
 
     if (USE_DEXIE_DB) {
       await db.settings.update(MASTER_SETTINGS_KEY, {
@@ -169,11 +172,10 @@ export default class FeedFilters extends Vue {
       this.settingChanged = true;
     }
 
-    const platformService = PlatformServiceFactory.getInstance();
-    await platformService.dbExec(
-      `UPDATE settings SET filterFeedByNearby = ? AND filterFeedByVisible = ? WHERE id = ?`,
-      [false, false, MASTER_SETTINGS_KEY],
-    );
+    await databaseUtil.updateDefaultSettings({
+      filterFeedByNearby: false,
+      filterFeedByVisible: false,
+    });
 
     if (USE_DEXIE_DB) {
       await db.settings.update(MASTER_SETTINGS_KEY, {
@@ -191,11 +193,10 @@ export default class FeedFilters extends Vue {
       this.settingChanged = true;
     }
 
-    const platformService = PlatformServiceFactory.getInstance();
-    await platformService.dbExec(
-      `UPDATE settings SET filterFeedByNearby = ? AND filterFeedByVisible = ? WHERE id = ?`,
-      [true, true, MASTER_SETTINGS_KEY],
-    );
+    await databaseUtil.updateDefaultSettings({
+      filterFeedByNearby: true,
+      filterFeedByVisible: true,
+    });
 
     if (USE_DEXIE_DB) {
       await db.settings.update(MASTER_SETTINGS_KEY, {

src/components/GiftedPrompts.vue

@@ -227,6 +227,7 @@ export default class GivenPrompts extends Vue {
 
     let someContactDbIndex = Math.floor(Math.random() * this.numContacts);
     let count = 0;
+
     // as long as the index has an entry, loop
     while (
       this.shownContactDbIndices[someContactDbIndex] != null &&
@@ -245,9 +246,8 @@ export default class GivenPrompts extends Vue {
         [someContactDbIndex],
       );
       if (result) {
-        this.currentContact = databaseUtil.mapQueryResultToValues(result)[
-          someContactDbIndex
-        ] as unknown as Contact;
+        const mappedContacts = databaseUtil.mapQueryResultToValues(result);
+        this.currentContact = mappedContacts[0] as unknown as Contact;
       }
       if (USE_DEXIE_DB) {
         await db.open();

src/components/ImageMethodDialog.vue

@@ -268,7 +268,7 @@ import {
 } from "../constants/app";
 import { retrieveSettingsForActiveAccount } from "../db/index";
 import { accessToken } from "../libs/crypto";
-import { logger } from "../utils/logger";
+import { logger, getTimestampForFilename } from "../utils/logger";
 import { PlatformServiceFactory } from "../services/PlatformServiceFactory";
 import * as databaseUtil from "../db/databaseUtil";
 
@@ -576,7 +576,7 @@ export default class ImageMethodDialog extends Vue {
         (blob) => {
           if (blob) {
             this.blob = blob;
-            this.fileName = `photo_${Date.now()}.jpg`;
+            this.fileName = `photo-${getTimestampForFilename()}.jpg`;
             this.showRetry = true;
             this.stopCameraPreview();
           }

src/components/OnboardingDialog.vue

@@ -259,7 +259,7 @@ export default class OnboardingDialog extends Vue {
     this.visible = true;
     if (this.page === OnboardPage.Create) {
       // we'll assume that they've been through all the other pages
-      await databaseUtil.updateAccountSettings(this.activeDid, {
+      await databaseUtil.updateDidSpecificSettings(this.activeDid, {
         finishedOnboarding: true,
       });
       if (USE_DEXIE_DB) {
@@ -273,7 +273,7 @@ export default class OnboardingDialog extends Vue {
   async onClickClose(done?: boolean, goHome?: boolean) {
     this.visible = false;
     if (done) {
-      await databaseUtil.updateAccountSettings(this.activeDid, {
+      await databaseUtil.updateDidSpecificSettings(this.activeDid, {
         finishedOnboarding: true,
       });
       if (USE_DEXIE_DB) {

src/components/PhotoDialog.vue

@@ -127,7 +127,7 @@ import {
 import * as databaseUtil from "../db/databaseUtil";
 import { retrieveSettingsForActiveAccount } from "../db/index";
 import { accessToken } from "../libs/crypto";
-import { logger } from "../utils/logger";
+import { logger, getTimestampForFilename } from "../utils/logger";
 import { PlatformServiceFactory } from "../services/PlatformServiceFactory";
 
 @Component({ components: { VuePictureCropper } })
@@ -393,7 +393,7 @@ export default class PhotoDialog extends Vue {
         (blob) => {
           if (blob) {
             this.blob = blob;
-            this.fileName = `photo_${Date.now()}.jpg`;
+            this.fileName = `photo-${getTimestampForFilename()}.jpg`;
             this.stopCameraPreview();
           }
         },

src/db/databaseUtil.ts

@@ -37,7 +37,20 @@ export async function updateDefaultSettings(
   }
 }
 
-export async function updateAccountSettings(
+export async function insertDidSpecificSettings(
+  did: string,
+  settings: Partial<Settings> = {},
+): Promise<boolean> {
+  const platform = PlatformServiceFactory.getInstance();
+  const { sql, params } = generateInsertStatement(
+    { ...settings, accountDid: did }, // make sure accountDid is set to the given value
+    "settings",
+  );
+  const result = await platform.dbExec(sql, params);
+  return result.changes === 1;
+}
+
+export async function updateDidSpecificSettings(
   accountDid: string,
   settingsChanges: Settings,
 ): Promise<boolean> {
@@ -96,9 +109,6 @@ export async function retrieveSettingsForActiveAccount(): Promise<Settings> {
     const defaultSettings = await retrieveSettingsForDefaultAccount();
     // If no active DID, return defaults
     if (!defaultSettings.activeDid) {
-      logConsoleAndDb(
-        "[databaseUtil] No active DID found, returning default settings",
-      );
       return defaultSettings;
     }
 
@@ -111,9 +121,7 @@ export async function retrieveSettingsForActiveAccount(): Promise<Settings> {
       );
 
       if (!result?.values?.length) {
-        logConsoleAndDb(
-          `[databaseUtil] No account-specific settings found for ${defaultSettings.activeDid}`,
-        );
+        // we created DID-specific settings when generated or imported, so this shouldn't happen
         return defaultSettings;
       }
 
@@ -122,6 +130,7 @@ export async function retrieveSettingsForActiveAccount(): Promise<Settings> {
         result.columns,
         result.values,
       )[0] as Settings;
+
       const overrideSettingsFiltered = Object.fromEntries(
         Object.entries(overrideSettings).filter(([_, v]) => v !== null),
       );
@@ -131,17 +140,7 @@ export async function retrieveSettingsForActiveAccount(): Promise<Settings> {
 
       // Handle searchBoxes parsing
       if (settings.searchBoxes) {
-        try {
-          // @ts-expect-error - the searchBoxes field is a string in the DB
-          settings.searchBoxes = JSON.parse(settings.searchBoxes);
-        } catch (error) {
-          logConsoleAndDb(
-            `[databaseUtil] Failed to parse searchBoxes for ${defaultSettings.activeDid}: ${error}`,
-            true,
-          );
-          // Reset to empty array on parse failure
-          settings.searchBoxes = [];
-        }
+        settings.searchBoxes = parseJsonField(settings.searchBoxes, []);
       }
 
       return settings;
@@ -241,6 +240,7 @@ export function generateInsertStatement(
   const values = Object.values(model).filter((value) => value !== undefined);
   const placeholders = values.map(() => "?").join(", ");
   const insertSql = `INSERT INTO ${tableName} (${columns.join(", ")}) VALUES (${placeholders})`;
+
   return {
     sql: insertSql,
     params: values,
@@ -312,3 +312,115 @@ export function mapColumnsToValues(
     return obj;
   });
 }
+
+/**
+ * Debug function to inspect raw settings data in the database
+ * This helps diagnose issues with data corruption or malformed JSON
+ * @param did Optional DID to inspect specific account settings
+ * @author Matthew Raymer
+ */
+export async function debugSettingsData(did?: string): Promise<void> {
+  try {
+    const platform = PlatformServiceFactory.getInstance();
+
+    // Get all settings records
+    const allSettings = await platform.dbQuery("SELECT * FROM settings");
+
+    logConsoleAndDb(
+      `[DEBUG] Total settings records: ${allSettings?.values?.length || 0}`,
+      false,
+    );
+
+    if (allSettings?.values?.length) {
+      allSettings.values.forEach((row, index) => {
+        const settings = mapColumnsToValues(allSettings.columns, [row])[0];
+        logConsoleAndDb(`[DEBUG] Settings record ${index + 1}:`, false);
+        logConsoleAndDb(`[DEBUG] - ID: ${settings.id}`, false);
+        logConsoleAndDb(`[DEBUG] - accountDid: ${settings.accountDid}`, false);
+        logConsoleAndDb(`[DEBUG] - activeDid: ${settings.activeDid}`, false);
+
+        if (settings.searchBoxes) {
+          logConsoleAndDb(
+            `[DEBUG] - searchBoxes type: ${typeof settings.searchBoxes}`,
+            false,
+          );
+          logConsoleAndDb(
+            `[DEBUG] - searchBoxes value: ${String(settings.searchBoxes)}`,
+            false,
+          );
+
+          // Try to parse it
+          try {
+            const parsed = JSON.parse(String(settings.searchBoxes));
+            logConsoleAndDb(
+              `[DEBUG] - searchBoxes parsed successfully: ${JSON.stringify(parsed)}`,
+              false,
+            );
+          } catch (parseError) {
+            logConsoleAndDb(
+              `[DEBUG] - searchBoxes parse error: ${parseError}`,
+              true,
+            );
+          }
+        }
+
+        logConsoleAndDb(
+          `[DEBUG] - Full record: ${JSON.stringify(settings, null, 2)}`,
+          false,
+        );
+      });
+    }
+
+    // If specific DID provided, also check accounts table
+    if (did) {
+      const account = await platform.dbQuery(
+        "SELECT * FROM accounts WHERE did = ?",
+        [did],
+      );
+      logConsoleAndDb(
+        `[DEBUG] Account for ${did}: ${JSON.stringify(account, null, 2)}`,
+        false,
+      );
+    }
+  } catch (error) {
+    logConsoleAndDb(`[DEBUG] Error inspecting settings data: ${error}`, true);
+  }
+}
+
+/**
+ * Platform-agnostic JSON parsing utility
+ * Handles different SQLite implementations:
+ * - Web SQLite (wa-sqlite/absurd-sql): Auto-parses JSON strings to objects
+ * - Capacitor SQLite: Returns raw strings that need manual parsing
+ *
+ * @param value The value to parse (could be string or already parsed object)
+ * @param defaultValue Default value if parsing fails
+ * @returns Parsed object or default value
+ * @author Matthew Raymer
+ */
+export function parseJsonField<T>(value: unknown, defaultValue: T): T {
+  try {
+    // If already an object (web SQLite auto-parsed), return as-is
+    if (typeof value === "object" && value !== null) {
+      return value as T;
+    }
+
+    // If it's a string (Capacitor SQLite or fallback), parse it
+    if (typeof value === "string") {
+      return JSON.parse(value) as T;
+    }
+
+    // If it's null/undefined, return default
+    if (value === null || value === undefined) {
+      return defaultValue;
+    }
+
+    return defaultValue;
+  } catch (error) {
+    logConsoleAndDb(
+      `[databaseUtil] Failed to parse JSON field: ${error}`,
+      true,
+    );
+    return defaultValue;
+  }
+}

src/libs/capacitor/app.ts

@@ -12,6 +12,14 @@ import type { PluginListenerHandle } from "@capacitor/core";
  * Supports 'backButton' and 'appUrlOpen' events from Capacitor
  */
 interface AppInterface {
+  /**
+   * Force exit the app. This should only be used in conjunction with the `backButton` handler for Android to
+   * exit the app when navigation is complete.
+   *
+   * @returns Promise that resolves when the app has been exited
+   */
+  exitApp(): Promise<void>;
+
   /**
    * Add listener for back button events
    * @param eventName - Must be 'backButton'
@@ -38,8 +46,19 @@ interface AppInterface {
 /**
  * App wrapper for Capacitor functionality
  * Provides type-safe event listeners for back button and URL open events
+ * and app exit functionality
  */
 export const App: AppInterface = {
+  /**
+   * Force exit the app. This should only be used in conjunction with the `backButton` handler for Android to
+   * exit the app when navigation is complete.
+   *
+   * @returns Promise that resolves when the app has been exited
+   */
+  exitApp(): Promise<void> {
+    return CapacitorApp.exitApp();
+  },
+
   addListener(
     eventName: "backButton" | "appUrlOpen",
     listenerFunc: BackButtonListener | ((data: AppLaunchUrl) => void),

src/libs/util.ts

@@ -44,6 +44,7 @@ import { logger } from "../utils/logger";
 import { PlatformServiceFactory } from "@/services/PlatformServiceFactory";
 import { sha256 } from "ethereum-cryptography/sha256";
 import { IIdentifier } from "@veramo/core";
+import { insertDidSpecificSettings, parseJsonField } from "../db/databaseUtil";
 
 export interface GiverReceiverInputInfo {
   did?: string;
@@ -697,6 +698,7 @@ export async function saveNewIdentity(
     ];
     await platformService.dbExec(sql, params);
     await databaseUtil.updateDefaultSettings({ activeDid: identity.did });
+    await databaseUtil.insertDidSpecificSettings(identity.did);
 
     if (USE_DEXIE_DB) {
       // one of the few times we use accountsDBPromise directly; try to avoid more usage
@@ -710,6 +712,7 @@ export async function saveNewIdentity(
         publicKeyHex: identity.keys[0].publicKeyHex,
       });
       await updateDefaultSettings({ activeDid: identity.did });
+      await insertDidSpecificSettings(identity.did);
     }
   } catch (error) {
     logger.error("Failed to update default settings:", error);
@@ -732,7 +735,9 @@ export const generateSaveAndActivateIdentity = async (): Promise<string> => {
   const newId = newIdentifier(address, publicHex, privateHex, derivationPath);
 
   await saveNewIdentity(newId, mnemonic, derivationPath);
-  await databaseUtil.updateAccountSettings(newId.did, { isRegistered: false });
+  await databaseUtil.updateDidSpecificSettings(newId.did, {
+    isRegistered: false,
+  });
   if (USE_DEXIE_DB) {
     await updateAccountSettings(newId.did, { isRegistered: false });
   }
@@ -774,7 +779,7 @@ export const registerSaveAndActivatePasskey = async (
 ): Promise<Account> => {
   const account = await registerAndSavePasskey(keyName);
   await databaseUtil.updateDefaultSettings({ activeDid: account.did });
-  await databaseUtil.updateAccountSettings(account.did, {
+  await databaseUtil.updateDidSpecificSettings(account.did, {
     isRegistered: false,
   });
   if (USE_DEXIE_DB) {
@@ -862,7 +867,7 @@ export const contactToCsvLine = (contact: Contact): string => {
 
   // Handle contactMethods array by stringifying it
   const contactMethodsStr = contact.contactMethods
-    ? escapeField(JSON.stringify(contact.contactMethods))
+    ? escapeField(JSON.stringify(parseJsonField(contact.contactMethods, [])))
     : "";
 
   const fields = [
@@ -907,7 +912,7 @@ export const contactsToExportJson = (contacts: Contact[]): DatabaseExport => {
     did: contact.did,
     name: contact.name || null,
     contactMethods: contact.contactMethods
-      ? JSON.stringify(contact.contactMethods)
+      ? JSON.stringify(parseJsonField(contact.contactMethods, []))
       : null,
     nextPubKeyHashB64: contact.nextPubKeyHashB64 || null,
     notes: contact.notes || null,

src/services/PlatformService.ts

@@ -65,9 +65,21 @@ export interface PlatformService {
    * Writes content to a file at the specified path and shares it.
    * @param fileName - The filename of the file to write
    * @param content - The content to write to the file
-   * @returns Promise that resolves when the write is complete
+   * @param options - Optional parameters for file saving behavior
+   * @returns Promise that resolves to save/share result
    */
-  writeAndShareFile(fileName: string, content: string): Promise<void>;
+  writeAndShareFile(
+    fileName: string,
+    content: string,
+    options?: {
+      allowLocationSelection?: boolean;
+      saveToDownloads?: boolean;
+      saveToPrivateStorage?: boolean;
+      mimeType?: string;
+      showShareDialog?: boolean;
+      showLocationSelectionDialog?: boolean;
+    },
+  ): Promise<{ saved: boolean; uri?: string; shared: boolean; error?: string }>;
 
   /**
    * Deletes a file at the specified path.
@@ -83,6 +95,48 @@ export interface PlatformService {
    */
   listFiles(directory: string): Promise<string[]>;
 
+  /**
+   * Tests the file sharing functionality by creating and sharing a test file.
+   * @returns Promise resolving to a test result message
+   */
+  testFileSharing(): Promise<string>;
+
+  /**
+   * Tests saving a file without showing the share dialog.
+   * @returns Promise resolving to a test result message
+   */
+  testFileSaveOnly(): Promise<string>;
+
+  /**
+   * Tests the location selection functionality using the file picker.
+   * @returns Promise resolving to a test result message
+   */
+  testLocationSelection(): Promise<string>;
+
+  /**
+   * Tests location selection without showing the dialog (restores original behavior).
+   * @returns Promise resolving to a test result message
+   */
+  testLocationSelectionSilent(): Promise<string>;
+
+  /**
+   * Tests listing user-accessible files saved by the app.
+   * @returns Promise resolving to a test result message
+   */
+  testListUserFiles(): Promise<string>;
+
+  /**
+   * Tests listing backup files specifically saved by the app.
+   * @returns Promise resolving to a test result message
+   */
+  testBackupFiles(): Promise<string>;
+
+  /**
+   * Tests opening the backup directory in the device's file explorer.
+   * @returns Promise resolving to a test result message
+   */
+  testOpenBackupDirectory(): Promise<string>;
+
   // Camera operations
   /**
    * Activates the device camera to take a picture.
@@ -130,4 +184,92 @@ export interface PlatformService {
     sql: string,
     params?: unknown[],
   ): Promise<{ changes: number; lastId?: number }>;
+
+  /**
+   * Lists user-accessible files saved by the app.
+   * Returns files from Downloads (Android) or Documents (iOS) directories.
+   * @returns Promise resolving to array of file information
+   */
+  listUserAccessibleFiles(): Promise<
+    Array<{ name: string; uri: string; size?: number }>
+  >;
+
+  /**
+   * Lists backup files specifically saved by the app.
+   * Filters for files that appear to be TimeSafari backups.
+   * @returns Promise resolving to array of backup file information
+   */
+  listBackupFiles(): Promise<
+    Array<{
+      name: string;
+      uri: string;
+      size?: number;
+      type: "contacts" | "seed" | "other";
+      path?: string;
+    }>
+  >;
+
+  /**
+   * Opens a file in the device's default file viewer/app.
+   * Uses the native share dialog to provide options for opening the file.
+   * @param fileUri - URI of the file to open
+   * @param fileName - Name of the file (for display purposes)
+   * @returns Promise resolving to success status
+   */
+  openFile(
+    fileUri: string,
+    fileName: string,
+  ): Promise<{ success: boolean; error?: string }>;
+
+  /**
+   * Opens the directory containing backup files in the device's file explorer.
+   * Uses the native share dialog to provide options for accessing the directory.
+   * @returns Promise resolving to success status
+   */
+  openBackupDirectory(): Promise<{ success: boolean; error?: string }>;
+
+  /**
+   * Creates a test backup file to verify file writing and reading functionality.
+   * This is useful for debugging file visibility issues.
+   * @returns Promise resolving to success status and file information
+   */
+  createTestBackupFile(): Promise<{
+    success: boolean;
+    fileName?: string;
+    uri?: string;
+    error?: string;
+  }>;
+
+  /**
+   * Tests different directory contexts to see what files are available.
+   * This helps debug file visibility issues across different storage contexts.
+   * @returns Promise resolving to debug information about file discovery across contexts
+   */
+  testDirectoryContexts(): Promise<string>;
+
+  /**
+   * Lists files and folders in a specific directory for directory browsing
+   * @param path - The directory path to list
+   * @param debugShowAll - Debug flag to treat all entries as files
+   * @returns Promise resolving to array of directory entries
+   */
+  listFilesInDirectory(
+    path: string,
+    debugShowAll?: boolean,
+  ): Promise<
+    Array<{
+      name: string;
+      uri: string;
+      size?: number;
+      path: string;
+      type: "file" | "folder";
+    }>
+  >;
+
+  /**
+   * Debug method to check what's actually in the TimeSafari directory
+   * This helps identify if the directory exists but is empty or has permission issues
+   * @returns Promise resolving to debug information about the TimeSafari directory
+   */
+  debugTimeSafariDirectory(): Promise<string>;
 }

src/services/platforms/ElectronPlatformService.ts

@@ -205,6 +205,7 @@ export class ElectronPlatformService implements PlatformService {
       isIOS: false,
       hasFileDownload: false, // Not implemented yet
       needsFileHandlingInstructions: false,
+      isNativeApp: true,
     };
   }
 
@@ -234,11 +235,32 @@ export class ElectronPlatformService implements PlatformService {
    * Writes content to a file and opens the system share dialog.
    * @param _fileName - Name of the file to create
    * @param _content - Content to write to the file
+   * @param _options - Options for file saving behavior
    * @throws Error with "Not implemented" message
    * @todo Implement using Electron's dialog and file system APIs
    */
-  async writeAndShareFile(_fileName: string, _content: string): Promise<void> {
-    throw new Error("Not implemented");
+  async writeAndShareFile(
+    _fileName: string,
+    _content: string,
+    _options?: {
+      allowLocationSelection?: boolean;
+      saveToDownloads?: boolean;
+      saveToPrivateStorage?: boolean;
+      mimeType?: string;
+      showShareDialog?: boolean;
+      showLocationSelectionDialog?: boolean;
+    },
+  ): Promise<{
+    saved: boolean;
+    uri?: string;
+    shared: boolean;
+    error?: string;
+  }> {
+    return {
+      saved: false,
+      shared: false,
+      error: "Not implemented in Electron platform",
+    };
   }
 
   /**
@@ -284,6 +306,17 @@ export class ElectronPlatformService implements PlatformService {
     throw new Error("Not implemented");
   }
 
+  /**
+   * Should rotate the camera between front and back cameras.
+   * @returns Promise that resolves when the camera is rotated
+   * @throws Error with "Not implemented" message
+   * @todo Implement camera rotation using Electron's media APIs
+   */
+  async rotateCamera(): Promise<void> {
+    logger.error("rotateCamera not implemented in Electron platform");
+    throw new Error("Not implemented");
+  }
+
   /**
    * Should handle deep link URLs for the desktop application.
    * @param _url - The deep link URL to handle
@@ -345,4 +378,173 @@ export class ElectronPlatformService implements PlatformService {
       );
     }
   }
+
+  /**
+   * Tests the file sharing functionality.
+   * @returns Promise resolving to a test result message
+   */
+  async testFileSharing(): Promise<string> {
+    return "File sharing not available in Electron platform - not implemented";
+  }
+
+  /**
+   * Tests saving a file without showing the share dialog.
+   * @returns Promise resolving to a test result message
+   */
+  async testFileSaveOnly(): Promise<string> {
+    return "File save only not available in Electron platform - not implemented";
+  }
+
+  /**
+   * Tests the location selection functionality using the file picker.
+   * @returns Promise resolving to a test result message
+   */
+  async testLocationSelection(): Promise<string> {
+    return "Location selection not available in Electron platform - not implemented";
+  }
+
+  /**
+   * Tests location selection without showing the dialog (restores original behavior).
+   * @returns Promise resolving to a test result message
+   */
+  async testLocationSelectionSilent(): Promise<string> {
+    return "Location selection not available in Electron platform - not implemented";
+  }
+
+  /**
+   * Tests listing user-accessible files saved by the app.
+   * @returns Promise resolving to a test result message
+   */
+  async testListUserFiles(): Promise<string> {
+    return "File listing not available in Electron platform - not implemented";
+  }
+
+  /**
+   * Tests listing backup files specifically saved by the app.
+   * @returns Promise resolving to a test result message
+   */
+  async testBackupFiles(): Promise<string> {
+    return "Backup file listing not available in Electron platform - not implemented";
+  }
+
+  /**
+   * Tests opening the backup directory in the device's file explorer.
+   * @returns Promise resolving to a test result message
+   */
+  async testOpenBackupDirectory(): Promise<string> {
+    return "Directory access not available in Electron platform - not implemented";
+  }
+
+  /**
+   * Lists user-accessible files saved by the app.
+   * Not implemented in Electron platform.
+   * @returns Promise resolving to empty array
+   */
+  async listUserAccessibleFiles(): Promise<
+    Array<{ name: string; uri: string; size?: number }>
+  > {
+    return [];
+  }
+
+  /**
+   * Lists backup files specifically saved by the app.
+   * Not implemented for Electron platform.
+   * @returns Promise resolving to empty array
+   */
+  async listBackupFiles(): Promise<
+    Array<{
+      name: string;
+      uri: string;
+      size?: number;
+      type: "contacts" | "seed" | "other";
+      path?: string;
+    }>
+  > {
+    return [];
+  }
+
+  /**
+   * Opens a file in the device's default file viewer/app.
+   * Not implemented in Electron platform.
+   * @param _fileUri - URI of the file to open
+   * @param _fileName - Name of the file (for display purposes)
+   * @returns Promise resolving to error status
+   */
+  async openFile(
+    _fileUri: string,
+    _fileName: string,
+  ): Promise<{ success: boolean; error?: string }> {
+    return {
+      success: false,
+      error: "File opening not implemented in Electron platform",
+    };
+  }
+
+  /**
+   * Opens the directory containing backup files in the device's file explorer.
+   * Not implemented in Electron platform.
+   * @returns Promise resolving to error status
+   */
+  async openBackupDirectory(): Promise<{ success: boolean; error?: string }> {
+    return {
+      success: false,
+      error: "Directory access not implemented in Electron platform",
+    };
+  }
+
+  /**
+   * Lists files and folders in a specific directory for directory browsing.
+   * Not implemented for Electron platform.
+   * @returns Promise resolving to empty array
+   */
+  async listFilesInDirectory(
+    _path: string,
+    _debugShowAll?: boolean,
+  ): Promise<
+    Array<{
+      name: string;
+      uri: string;
+      size?: number;
+      path: string;
+      type: "file" | "folder";
+    }>
+  > {
+    return [];
+  }
+
+  /**
+   * Debug method to check what's actually in the TimeSafari directory.
+   * Not implemented for Electron platform.
+   * @returns Promise resolving to debug information
+   */
+  async debugTimeSafariDirectory(): Promise<string> {
+    return "Electron platform does not support file system access for debugging TimeSafari directory.";
+  }
+
+  /**
+   * Creates a test backup file to verify file writing and reading functionality.
+   * Not implemented for Electron platform.
+   * @returns Promise resolving to error status
+   */
+  async createTestBackupFile(): Promise<{
+    success: boolean;
+    fileName?: string;
+    uri?: string;
+    error?: string;
+  }> {
+    return {
+      success: false,
+      error:
+        "Electron platform does not support file system access for creating test backup files.",
+    };
+  }
+
+  /**
+   * Test method to try different directory contexts and see what files are available.
+   * Not implemented for Electron platform.
+   * @returns Promise resolving to debug information
+   */
+  async testDirectoryContexts(): Promise<string> {
+    return "Electron platform does not support file system access for testing directory contexts.";
+  }
 }

src/services/platforms/PyWebViewPlatformService.ts

@@ -32,6 +32,7 @@ export class PyWebViewPlatformService implements PlatformService {
       isIOS: false,
       hasFileDownload: false, // Not implemented yet
       needsFileHandlingInstructions: false,
+      isNativeApp: true,
     };
   }
 
@@ -122,14 +123,211 @@ export class PyWebViewPlatformService implements PlatformService {
   }
 
   /**
-   * Should write and share a file using the Python backend.
-   * @param _fileName - Name of the file to write and share
-   * @param _content - Content to write to the file
-   * @throws Error with "Not implemented" message
-   * @todo Implement file writing and sharing through pywebview's Python-JavaScript bridge
+   * Writes content to a file at the specified path and shares it.
+   * Not implemented in PyWebView platform.
+   * @param _fileName - The filename of the file to write
+   * @param _content - The content to write to the file
+   * @param _options - Optional parameters for file saving behavior
+   * @returns Promise that resolves to save/share result
    */
-  async writeAndShareFile(_fileName: string, _content: string): Promise<void> {
-    logger.error("writeAndShareFile not implemented in PyWebView platform");
-    throw new Error("Not implemented");
+  async writeAndShareFile(
+    _fileName: string,
+    _content: string,
+    _options?: {
+      allowLocationSelection?: boolean;
+      saveToDownloads?: boolean;
+      saveToPrivateStorage?: boolean;
+      mimeType?: string;
+      showShareDialog?: boolean;
+      showLocationSelectionDialog?: boolean;
+    },
+  ): Promise<{
+    saved: boolean;
+    uri?: string;
+    shared: boolean;
+    error?: string;
+  }> {
+    return {
+      saved: false,
+      shared: false,
+      error: "File sharing not implemented in PyWebView platform",
+    };
+  }
+
+  /**
+   * Lists user-accessible files saved by the app.
+   * Not implemented in PyWebView platform.
+   * @returns Promise resolving to empty array
+   */
+  async listUserAccessibleFiles(): Promise<
+    Array<{ name: string; uri: string; size?: number }>
+  > {
+    return [];
+  }
+
+  /**
+   * Lists backup files specifically saved by the app.
+   * Not implemented for PyWebView platform.
+   * @returns Promise resolving to empty array
+   */
+  async listBackupFiles(): Promise<
+    Array<{
+      name: string;
+      uri: string;
+      size?: number;
+      type: "contacts" | "seed" | "other";
+      path?: string;
+    }>
+  > {
+    return [];
+  }
+
+  /**
+   * Opens a file in the device's default file viewer/app.
+   * Not implemented in PyWebView platform.
+   * @param _fileUri - URI of the file to open
+   * @param _fileName - Name of the file (for display purposes)
+   * @returns Promise resolving to error status
+   */
+  async openFile(
+    _fileUri: string,
+    _fileName: string,
+  ): Promise<{ success: boolean; error?: string }> {
+    return {
+      success: false,
+      error: "File opening not implemented in PyWebView platform",
+    };
+  }
+
+  /**
+   * Opens the directory containing backup files in the device's file explorer.
+   * Not implemented in PyWebView platform.
+   * @returns Promise resolving to error status
+   */
+  async openBackupDirectory(): Promise<{ success: boolean; error?: string }> {
+    return {
+      success: false,
+      error: "Directory access not implemented in PyWebView platform",
+    };
+  }
+
+  /**
+   * Tests listing user-accessible files saved by the app.
+   * @returns Promise resolving to a test result message
+   */
+  async testListUserFiles(): Promise<string> {
+    return "File listing not available in PyWebView platform - not implemented";
+  }
+
+  /**
+   * Tests listing backup files specifically saved by the app.
+   * @returns Promise resolving to a test result message
+   */
+  async testBackupFiles(): Promise<string> {
+    return "Backup file listing not available in PyWebView platform - not implemented";
+  }
+
+  /**
+   * Tests opening the backup directory in the device's file explorer.
+   * @returns Promise resolving to a test result message
+   */
+  async testOpenBackupDirectory(): Promise<string> {
+    return "Directory access not available in PyWebView platform - not implemented";
+  }
+
+  /**
+   * Tests the file sharing functionality.
+   * @returns Promise resolving to a test result message
+   */
+  async testFileSharing(): Promise<string> {
+    return "File sharing not available in PyWebView platform - not implemented";
+  }
+
+  /**
+   * Tests saving a file without showing the share dialog.
+   * @returns Promise resolving to a test result message
+   */
+  async testFileSaveOnly(): Promise<string> {
+    return "File saving not available in PyWebView platform - not implemented";
+  }
+
+  /**
+   * Tests the location selection functionality.
+   * @returns Promise resolving to a test result message
+   */
+  async testLocationSelection(): Promise<string> {
+    return "Location selection not available in PyWebView platform - not implemented";
+  }
+
+  /**
+   * Tests location selection without showing the dialog.
+   * @returns Promise resolving to a test result message
+   */
+  async testLocationSelectionSilent(): Promise<string> {
+    return "Silent location selection not available in PyWebView platform - not implemented";
+  }
+
+  /**
+   * Rotates the camera between front and back.
+   * Not implemented in PyWebView platform.
+   */
+  async rotateCamera(): Promise<void> {
+    // Not implemented
+  }
+
+  /**
+   * Lists files and folders in a specific directory for directory browsing.
+   * Not implemented for PyWebView platform.
+   * @returns Promise resolving to empty array
+   */
+  async listFilesInDirectory(
+    _path: string,
+    _debugShowAll?: boolean,
+  ): Promise<
+    Array<{
+      name: string;
+      uri: string;
+      size?: number;
+      path: string;
+      type: "file" | "folder";
+    }>
+  > {
+    return [];
+  }
+
+  /**
+   * Debug method to check what's actually in the TimeSafari directory.
+   * Not implemented for PyWebView platform.
+   * @returns Promise resolving to debug information
+   */
+  async debugTimeSafariDirectory(): Promise<string> {
+    return "PyWebView platform does not support file system access for debugging TimeSafari directory.";
+  }
+
+  /**
+   * Creates a test backup file to verify file writing and reading functionality.
+   * Not implemented for PyWebView platform.
+   * @returns Promise resolving to error status
+   */
+  async createTestBackupFile(): Promise<{
+    success: boolean;
+    fileName?: string;
+    uri?: string;
+    error?: string;
+  }> {
+    return {
+      success: false,
+      error:
+        "PyWebView platform does not support file system access for creating test backup files.",
+    };
+  }
+
+  /**
+   * Test method to try different directory contexts and see what files are available.
+   * Not implemented for PyWebView platform.
+   * @returns Promise resolving to debug information
+   */
+  async testDirectoryContexts(): Promise<string> {
+    return "PyWebView platform does not support file system access for testing directory contexts.";
   }
 }

src/services/platforms/WebPlatformService.ts

@@ -3,7 +3,7 @@ import {
   PlatformService,
   PlatformCapabilities,
 } from "../PlatformService";
-import { logger } from "../../utils/logger";
+import { logger, getTimestampForFilename } from "../../utils/logger";
 import { QueryExecResult } from "@/interfaces/database";
 import databaseService from "../AbsurdSqlDatabaseService";
 
@@ -29,10 +29,14 @@ export class WebPlatformService implements PlatformService {
     return {
       hasFileSystem: false,
       hasCamera: true, // Through file input with capture
-      isMobile: /iPhone|iPad|iPod|Android/i.test(navigator.userAgent),
+      isMobile:
+        /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+          navigator.userAgent,
+        ),
       isIOS: /iPad|iPhone|iPod/.test(navigator.userAgent),
       hasFileDownload: true,
       needsFileHandlingInstructions: false,
+      isNativeApp: false,
     };
   }
 
@@ -190,7 +194,7 @@ export class WebPlatformService implements PlatformService {
                   if (blob) {
                     resolve({
                       blob,
-                      fileName: `photo_${Date.now()}.jpg`,
+                      fileName: `photo-${getTimestampForFilename()}.jpg`,
                     });
                   } else {
                     reject(new Error("Failed to capture image from webcam"));
@@ -356,10 +360,31 @@ export class WebPlatformService implements PlatformService {
    * Not supported in web platform.
    * @param _fileName - Unused fileName parameter
    * @param _content - Unused content parameter
-   * @throws Error indicating file system access is not available
+   * @param _options - Unused options parameter
+   * @returns Promise that resolves to a failure result
    */
-  async writeAndShareFile(_fileName: string, _content: string): Promise<void> {
-    throw new Error("File system access not available in web platform");
+  async writeAndShareFile(
+    _fileName: string,
+    _content: string,
+    _options?: {
+      allowLocationSelection?: boolean;
+      saveToDownloads?: boolean;
+      saveToPrivateStorage?: boolean;
+      mimeType?: string;
+      showShareDialog?: boolean;
+      showLocationSelectionDialog?: boolean;
+    },
+  ): Promise<{
+    saved: boolean;
+    uri?: string;
+    shared: boolean;
+    error?: string;
+  }> {
+    return {
+      saved: false,
+      shared: false,
+      error: "File system access not available in web platform",
+    };
   }
 
   /**
@@ -390,4 +415,183 @@ export class WebPlatformService implements PlatformService {
       .query(sql, params)
       .then((result: QueryExecResult[]) => result[0]?.values[0]);
   }
+
+  /**
+   * Tests the file sharing functionality.
+   * @returns Promise resolving to a test result message
+   */
+  async testFileSharing(): Promise<string> {
+    return "File sharing not available in web platform - use download instead";
+  }
+
+  /**
+   * Tests saving a file without showing the share dialog.
+   * @returns Promise resolving to a test result message
+   */
+  async testFileSaveOnly(): Promise<string> {
+    return "File saving not available in web platform - use download instead";
+  }
+
+  /**
+   * Tests the location selection functionality using the file picker.
+   * @returns Promise resolving to a test result message
+   */
+  async testLocationSelection(): Promise<string> {
+    return "Location selection not available in web platform - use download instead";
+  }
+
+  /**
+   * Tests location selection without showing the dialog (restores original behavior).
+   * @returns Promise resolving to a test result message
+   */
+  async testLocationSelectionSilent(): Promise<string> {
+    return "Location selection not available in web platform - use download instead";
+  }
+
+  /**
+   * Tests listing user-accessible files saved by the app.
+   * @returns Promise resolving to a test result message
+   */
+  async testListUserFiles(): Promise<string> {
+    return "File listing not available in web platform - files are downloaded directly";
+  }
+
+  /**
+   * Tests listing backup files specifically saved by the app.
+   * @returns Promise resolving to a test result message
+   */
+  async testBackupFiles(): Promise<string> {
+    return "Backup file listing not available in web platform - files are downloaded directly";
+  }
+
+  /**
+   * Tests opening the backup directory in the device's file explorer.
+   * @returns Promise resolving to a test result message
+   */
+  async testOpenBackupDirectory(): Promise<string> {
+    return "Directory access not available in web platform - files are downloaded directly";
+  }
+
+  /**
+   * Lists user-accessible files saved by the app.
+   * Not supported in web platform.
+   * @returns Promise resolving to empty array
+   */
+  async listUserAccessibleFiles(): Promise<
+    Array<{ name: string; uri: string; size?: number }>
+  > {
+    return [];
+  }
+
+  /**
+   * Lists backup files specifically saved by the app.
+   * Not supported in web platform.
+   * @returns Promise resolving to empty array
+   */
+  async listBackupFiles(): Promise<
+    Array<{
+      name: string;
+      uri: string;
+      size?: number;
+      type: "contacts" | "seed" | "other";
+      path?: string;
+    }>
+  > {
+    return [];
+  }
+
+  /**
+   * Opens a file in the device's default file viewer/app.
+   * Not supported in web platform.
+   * @param _fileUri - URI of the file to open
+   * @param _fileName - Name of the file (for display purposes)
+   * @returns Promise resolving to error status
+   */
+  async openFile(
+    _fileUri: string,
+    _fileName: string,
+  ): Promise<{ success: boolean; error?: string }> {
+    return {
+      success: false,
+      error: "File opening not available in web platform",
+    };
+  }
+
+  /**
+   * Opens the directory containing backup files in the device's file explorer.
+   * Not supported in web platform.
+   * @returns Promise resolving to error status
+   */
+  async openBackupDirectory(): Promise<{ success: boolean; error?: string }> {
+    return {
+      success: false,
+      error: "Directory access not available in web platform",
+    };
+  }
+
+  /**
+   * Rotates the camera between front and back cameras.
+   * Not supported in web platform.
+   * @returns Promise that resolves immediately
+   */
+  async rotateCamera(): Promise<void> {
+    // Not supported in web platform
+    return Promise.resolve();
+  }
+
+  /**
+   * Lists files and folders in a specific directory for directory browsing.
+   * Not supported in web platform.
+   * @returns Promise resolving to empty array
+   */
+  async listFilesInDirectory(
+    _path: string,
+    _debugShowAll?: boolean,
+  ): Promise<
+    Array<{
+      name: string;
+      uri: string;
+      size?: number;
+      path: string;
+      type: "file" | "folder";
+    }>
+  > {
+    return [];
+  }
+
+  /**
+   * Debug method to check what's actually in the TimeSafari directory.
+   * Not supported in web platform.
+   * @returns Promise resolving to debug information
+   */
+  async debugTimeSafariDirectory(): Promise<string> {
+    return "Web platform does not support file system access for debugging TimeSafari directory.";
+  }
+
+  /**
+   * Creates a test backup file to verify file writing and reading functionality.
+   * Not supported in web platform.
+   * @returns Promise resolving to error status
+   */
+  async createTestBackupFile(): Promise<{
+    success: boolean;
+    fileName?: string;
+    uri?: string;
+    error?: string;
+  }> {
+    return {
+      success: false,
+      error:
+        "Web platform does not support file system access for creating test backup files.",
+    };
+  }
+
+  /**
+   * Test method to try different directory contexts and see what files are available.
+   * Not supported in web platform.
+   * @returns Promise resolving to debug information
+   */
+  async testDirectoryContexts(): Promise<string> {
+    return "Web platform does not support file system access for testing directory contexts.";
+  }
 }

src/utils/logger.ts

@@ -79,3 +79,22 @@ if (typeof module !== "undefined" && module.exports) {
 
 // Add default export for ESM
 export default { logger };
+
+/**
+ * Formats current timestamp for use in filenames.
+ * Returns ISO string with colons and periods replaced with hyphens, truncated to seconds.
+ * Format: 2024-01-15T14-30-45
+ * @returns Formatted timestamp string safe for filenames
+ */
+export function getTimestampForFilename(): string {
+  return new Date().toISOString().replace(/[:.]/g, "-").slice(0, 19);
+}
+
+/**
+ * Formats current timestamp for use in filenames with date only.
+ * Format: 2024-01-15
+ * @returns Date-only timestamp string safe for filenames
+ */
+export function getDateForFilename(): string {
+  return new Date().toISOString().slice(0, 10);
+}

src/views/AccountViewView.vue

@@ -1814,7 +1814,7 @@ export default class AccountViewView extends Vue {
         if (!this.isRegistered) {
           // the user was not known to be registered, but now they are (because we got no error) so let's record it
           try {
-            await databaseUtil.updateAccountSettings(did, {
+            await databaseUtil.updateDidSpecificSettings(did, {
               isRegistered: true,
             });
             if (USE_DEXIE_DB) {
@@ -2018,7 +2018,7 @@ export default class AccountViewView extends Vue {
       if ((error as any).response.status === 404) {
         logger.error("The image was already deleted:", error);
 
-        await databaseUtil.updateAccountSettings(this.activeDid, {
+        await databaseUtil.updateDidSpecificSettings(this.activeDid, {
           profileImageUrl: undefined,
         });
         if (USE_DEXIE_DB) {

src/views/ContactEditView.vue

@@ -138,11 +138,13 @@ import { RouteLocationNormalizedLoaded, Router } from "vue-router";
 
 import QuickNav from "../components/QuickNav.vue";
 import TopMessage from "../components/TopMessage.vue";
-import { AppString, NotificationIface, USE_DEXIE_DB } from "../constants/app";
-import { db } from "../db/index";
-import { Contact, ContactMethod } from "../db/tables/contacts";
+import { NotificationIface, USE_DEXIE_DB } from "../constants/app";
 import * as databaseUtil from "../db/databaseUtil";
-import { PlatformServiceFactory } from "@/services/PlatformServiceFactory";
+import { parseJsonField } from "../db/databaseUtil";
+import { db } from "../db/index";
+import { PlatformServiceFactory } from "../services/PlatformServiceFactory";
+import { Contact, ContactMethod } from "../db/tables/contacts";
+import { AppString } from "../constants/app";
 
 /**
  * Contact Edit View Component
@@ -230,9 +232,7 @@ export default class ContactEditView extends Vue {
     let contact: Contact | undefined = databaseUtil.mapQueryResultToValues(
       dbContact,
     )[0] as unknown as Contact;
-    contact.contactMethods = JSON.parse(
-      (contact?.contactMethods as unknown as string) || "[]",
-    );
+    contact.contactMethods = parseJsonField(contact?.contactMethods, []);
     if (USE_DEXIE_DB) {
       await db.open();
       contact = await db.contacts.get(contactDid || "");

src/views/ContactImportView.vue

@@ -213,6 +213,7 @@ import {
 } from "../db/index";
 import { Contact, ContactMethod } from "../db/tables/contacts";
 import * as databaseUtil from "../db/databaseUtil";
+import { parseJsonField } from "../db/databaseUtil";
 import * as libsUtil from "../libs/util";
 import {
   capitalizeAndInsertSpacesBeforeCaps,
@@ -289,7 +290,7 @@ function dbRecordToContact(record: ContactDbRecord): Contact {
     profileImageUrl: safeString(record.profileImageUrl),
     publicKeyBase64: safeString(record.publicKeyBase64),
     nextPubKeyHashB64: safeString(record.nextPubKeyHashB64),
-    contactMethods: JSON.parse(record.contactMethods || "[]"),
+    contactMethods: parseJsonField(record.contactMethods, []),
   };
 }
 

src/views/ContactQRScanFullView.vue

@@ -124,6 +124,7 @@ import UserNameDialog from "../components/UserNameDialog.vue";
 import { generateEndorserJwtUrlForAccount } from "../libs/endorserServer";
 import { retrieveAccountMetadata } from "../libs/util";
 import { PlatformServiceFactory } from "@/services/PlatformServiceFactory";
+import { parseJsonField } from "../db/databaseUtil";
 
 interface QRScanResult {
   rawValue?: string;
@@ -474,7 +475,9 @@ export default class ContactQRScan extends Vue {
 
       // Add new contact
       // @ts-expect-error because we're just using the value to store to the DB
-      contact.contactMethods = JSON.stringify(contact.contactMethods);
+      contact.contactMethods = JSON.stringify(
+        parseJsonField(contact.contactMethods, []),
+      );
       const { sql, params } = databaseUtil.generateInsertStatement(
         contact as unknown as Record<string, unknown>,
         "contacts",

src/views/ContactQRScanShowView.vue

@@ -171,6 +171,7 @@ import { db, retrieveSettingsForActiveAccount } from "../db/index";
 import { Contact } from "../db/tables/contacts";
 import { MASTER_SETTINGS_KEY } from "../db/tables/settings";
 import * as databaseUtil from "../db/databaseUtil";
+import { parseJsonField } from "../db/databaseUtil";
 import { getContactJwtFromJwtUrl } from "../libs/crypto";
 import {
   generateEndorserJwtUrlForAccount,
@@ -778,7 +779,9 @@ export default class ContactQRScanShow extends Vue {
 
       // Add new contact
       // @ts-expect-error because we're just using the value to store to the DB
-      contact.contactMethods = JSON.stringify(contact.contactMethods);
+      contact.contactMethods = JSON.stringify(
+        parseJsonField(contact.contactMethods, []),
+      );
       const { sql, params } = databaseUtil.generateInsertStatement(
         contact as unknown as Record<string, unknown>,
         "contacts",

src/views/ContactsView.vue

@@ -78,7 +78,7 @@
         class="block w-full rounded-l border border-r-0 border-slate-400 px-3 py-2 h-10"
       />
       <button
-        class="px-4 rounded-r bg-green-200 border border-l-0 border-green-400"
+        class="px-4 rounded-r bg-green-200 border border-green-400"
         @click="onClickNewContact()"
       >
         <font-awesome icon="plus" class="fa-fw" />
@@ -86,8 +86,8 @@
     </div>
 
     <div v-if="contacts.length > 0" class="flex justify-between">
-      <div class="w-full text-left">
-        <div v-if="!showGiveNumbers">
+      <div class="">
+        <div v-if="!showGiveNumbers" class="flex items-center">
           <input
             type="checkbox"
             :checked="contactsSelected.length === contacts.length"
@@ -101,52 +101,33 @@
           />
           <button
             v-if="!showGiveNumbers"
-            href=""
-            class="text-md bg-gradient-to-b shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white ml-3 px-3 py-1.5 rounded-md"
-            :style="
+            :class="
               contactsSelected.length > 0
-                ? 'background-image: linear-gradient(to bottom, #3b82f6, #1e40af);'
-                : 'background-image: linear-gradient(to bottom, #94a3b8, #374151);'
+                ? 'text-md bg-gradient-to-b from-blue-400 to-blue-700 ' +
+                  'shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white ' +
+                  'ml-3 px-3 py-1.5 rounded-md cursor-pointer'
+                : 'text-md bg-gradient-to-b from-slate-400 to-slate-700 ' +
+                  'shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-slate-300 ' +
+                  'ml-3 px-3 py-1.5 rounded-md cursor-not-allowed'
             "
             data-testId="copySelectedContactsButtonTop"
             @click="copySelectedContacts()"
           >
-            Copy Selections
-          </button>
-          <button @click="showCopySelectionsInfo()">
-            <font-awesome
-              icon="circle-info"
-              class="text-xl text-blue-500 ml-4"
-            />
+            Copy
           </button>
+          <font-awesome
+            icon="circle-info"
+            class="text-2xl text-blue-500 ml-2"
+            @click="showCopySelectionsInfo()"
+          />
         </div>
       </div>
 
-      <div class="w-full text-right">
+      <div class="flex items-center gap-2">
         <button
+          v-if="showGiveNumbers"
           href=""
-          class="text-md 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"
-          @click="toggleShowContactAmounts()"
-        >
-          {{
-            showGiveNumbers ? "Hide Hours, Offer, etc" : "See Hours, Offer, etc"
-          }}
-        </button>
-      </div>
-    </div>
-    <div v-if="showGiveNumbers" class="flex justify-between mt-1">
-      <div class="w-full text-right">
-        In the following, only the most recent hours are included. To see more,
-        click
-        <span
-          class="text-sm 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-1 py-1 rounded-md"
-        >
-          <font-awesome icon="file-lines" class="fa-fw" />
-        </span>
-        <br />
-        <button
-          href=""
-          class="text-md bg-gradient-to-b shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-1 rounded-md mt-1"
+          class="text-md bg-gradient-to-b shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-3 py-1.5 rounded-md"
           :class="showGiveAmountsClassNames()"
           @click="toggleShowGiveTotals()"
         >
@@ -159,6 +140,25 @@
           }}
           <font-awesome icon="left-right" class="fa-fw" />
         </button>
+
+        <button
+          href=""
+          class="text-md 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"
+          @click="toggleShowContactAmounts()"
+        >
+          {{ showGiveNumbers ? "Hide Actions" : "See Actions" }}
+        </button>
+      </div>
+    </div>
+    <div v-if="showGiveNumbers" class="my-3">
+      <div class="w-full text-center text-sm italic text-slate-600">
+        Only the most recent hours are included. <br />To see more, click
+        <span
+          class="text-sm 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-1 py-0.5 rounded"
+        >
+          <font-awesome icon="file-lines" class="text-xs fa-fw" />
+        </span>
+        <br />
       </div>
     </div>
 
@@ -166,7 +166,7 @@
     <ul
       v-if="contacts.length > 0"
       id="listContacts"
-      class="border-t border-slate-300 mt-1"
+      class="border-t border-slate-300 my-2"
     >
       <li
         v-for="contact in filteredContacts()"
@@ -174,125 +174,125 @@
         class="border-b border-slate-300 pt-1 pb-1"
         data-testId="contactListItem"
       >
-        <div class="grow overflow-hidden">
-          <div class="flex items-center justify-between gap-3">
-            <div class="flex items-center gap-3">
-              <input
-                v-if="!showGiveNumbers"
-                type="checkbox"
-                :checked="contactsSelected.includes(contact.did)"
-                class="ml-2 h-6 w-6 flex-shrink-0"
-                data-testId="contactCheckOne"
-                @click="
-                  contactsSelected.includes(contact.did)
-                    ? contactsSelected.splice(
-                        contactsSelected.indexOf(contact.did),
-                        1,
-                      )
-                    : contactsSelected.push(contact.did)
-                "
-              />
+        <div class="flex items-center justify-between gap-3">
+          <div class="flex overflow-hidden min-w-0 items-center gap-3">
+            <input
+              v-if="!showGiveNumbers"
+              type="checkbox"
+              :checked="contactsSelected.includes(contact.did)"
+              class="ml-2 h-6 w-6 flex-shrink-0"
+              data-testId="contactCheckOne"
+              @click="
+                contactsSelected.includes(contact.did)
+                  ? contactsSelected.splice(
+                      contactsSelected.indexOf(contact.did),
+                      1,
+                    )
+                  : contactsSelected.push(contact.did)
+              "
+            />
 
-              <div
-                class="flex-shrink-0 w-12 h-12 flex items-center justify-center"
-              >
-                <EntityIcon
-                  :contact="contact"
-                  :icon-size="48"
-                  class="inline-block align-text-bottom border border-slate-300 rounded cursor-pointer overflow-hidden"
-                  @click="showLargeIdenticon = contact"
-                />
-              </div>
+            <EntityIcon
+              :contact="contact"
+              :icon-size="48"
+              class="shrink-0 align-text-bottom border border-slate-300 rounded cursor-pointer overflow-hidden"
+              @click="showLargeIdenticon = contact"
+            />
 
-              <h2 class="text-base font-semibold w-1/3 truncate flex-shrink-0">
-                {{ contactNameNonBreakingSpace(contact.name) }}
+            <div class="overflow-hidden">
+              <h2 class="text-base font-semibold truncate">
+                <router-link
+                  :to="{
+                    path: '/did/' + encodeURIComponent(contact.did),
+                  }"
+                  title="See more about this person"
+                >
+                  {{ contactNameNonBreakingSpace(contact.name) }}
+                </router-link>
               </h2>
 
-              <span>
-                <div class="flex gap-2 items-center">
-                  <router-link
-                    :to="{
-                      path: '/did/' + encodeURIComponent(contact.did),
-                    }"
-                    title="See more about this person"
-                  >
-                    <font-awesome
-                      icon="circle-info"
-                      class="text-xl text-blue-500"
-                    />
-                  </router-link>
+              <div class="flex gap-1.5 items-center overflow-hidden">
+                <router-link
+                  :to="{
+                    path: '/did/' + encodeURIComponent(contact.did),
+                  }"
+                  title="See more about this person"
+                >
+                  <font-awesome
+                    icon="circle-info"
+                    class="text-base text-blue-500"
+                  />
+                </router-link>
 
-                  <span class="text-sm overflow-hidden">{{
-                    libsUtil.shortDid(contact.did)
-                  }}</span>
-                </div>
-                <div class="text-sm">
-                  {{ contact.notes }}
-                </div>
-              </span>
+                <span class="text-xs truncate">{{ contact.did }}</span>
+              </div>
+              <div class="text-sm">
+                {{ contact.notes }}
+              </div>
+            </div>
+          </div>
+
+          <div
+            v-if="showGiveNumbers && contact.did != activeDid"
+            class="flex gap-1.5 items-end"
+          >
+            <div class="text-center">
+              <div class="text-xs leading-none mb-1">From/To</div>
+              <div class="flex items-center">
+                <button
+                  class="text-sm bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2.5 py-1.5 rounded-l-md"
+                  :title="givenToMeDescriptions[contact.did] || ''"
+                  @click="confirmShowGiftedDialog(contact.did, activeDid)"
+                >
+                  {{
+                    /* eslint-disable prettier/prettier */
+                    showGiveTotals
+                      ? ((givenToMeConfirmed[contact.did] || 0)
+                          + (givenToMeUnconfirmed[contact.did] || 0))
+                      : showGiveConfirmed
+                          ? (givenToMeConfirmed[contact.did] || 0)
+                          : (givenToMeUnconfirmed[contact.did] || 0)
+                    /* eslint-enable prettier/prettier */
+                  }}
+                </button>
+
+                <button
+                  class="text-sm bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2.5 py-1.5 rounded-r-md border-l"
+                  :title="givenByMeDescriptions[contact.did] || ''"
+                  @click="confirmShowGiftedDialog(activeDid, contact.did)"
+                >
+                  {{
+                    /* eslint-disable prettier/prettier */
+                    showGiveTotals
+                      ? ((givenByMeConfirmed[contact.did] || 0)
+                        + (givenByMeUnconfirmed[contact.did] || 0))
+                      : showGiveConfirmed
+                          ? (givenByMeConfirmed[contact.did] || 0)
+                          : (givenByMeUnconfirmed[contact.did] || 0)
+                    /* eslint-enable prettier/prettier */
+                  }}
+                </button>
+              </div>
             </div>
 
-            <div
-              v-if="showGiveNumbers && contact.did != activeDid"
-              class="flex gap-2 items-center"
+            <button
+              class="text-sm bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-1.5 rounded-md"
+              data-testId="offerButton"
+              @click="openOfferDialog(contact.did, contact.name)"
             >
-              <button
-                class="text-sm bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-1.5 rounded-l-md"
-                :title="givenToMeDescriptions[contact.did] || ''"
-                @click="confirmShowGiftedDialog(contact.did, activeDid)"
-              >
-                From:
-                <br />
-                {{
-                  /* eslint-disable prettier/prettier */
-                  showGiveTotals
-                    ? ((givenToMeConfirmed[contact.did] || 0)
-                        + (givenToMeUnconfirmed[contact.did] || 0))
-                    : showGiveConfirmed
-                        ? (givenToMeConfirmed[contact.did] || 0)
-                        : (givenToMeUnconfirmed[contact.did] || 0)
-                  /* eslint-enable prettier/prettier */
-                }}
-              </button>
+              Offer
+            </button>
 
-              <button
-                class="text-sm bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white -ml-1.5 px-2 py-1.5 rounded-r-md border-l"
-                :title="givenByMeDescriptions[contact.did] || ''"
-                @click="confirmShowGiftedDialog(activeDid, contact.did)"
-              >
-                To:
-                <br />
-                {{
-                  /* eslint-disable prettier/prettier */
-                  showGiveTotals
-                    ? ((givenByMeConfirmed[contact.did] || 0)
-                      + (givenByMeUnconfirmed[contact.did] || 0))
-                    : showGiveConfirmed
-                        ? (givenByMeConfirmed[contact.did] || 0)
-                        : (givenByMeUnconfirmed[contact.did] || 0)
-                  /* eslint-enable prettier/prettier */
-                }}
-              </button>
-
-              <button
-                class="text-sm bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-1.5 rounded-md border border-blue-400"
-                data-testId="offerButton"
-                @click="openOfferDialog(contact.did, contact.name)"
-              >
-                Offer
-              </button>
-
-              <router-link
-                :to="{
-                  name: 'contact-amounts',
-                  query: { contactDid: contact.did },
-                }"
-                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-2 py-1.5 rounded-md border border-slate-400"
-                title="See more given activity"
-              >
-                <font-awesome icon="file-lines" class="fa-fw" />
-              </router-link>
-            </div>
+            <router-link
+              :to="{
+                name: 'contact-amounts',
+                query: { contactDid: contact.did },
+              }"
+              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-2 py-1.5 rounded-md"
+              title="See more given activity"
+            >
+              <font-awesome icon="file-lines" class="fa-fw" />
+            </router-link>
           </div>
         </div>
       </li>
@@ -314,16 +314,18 @@
       />
       <button
         v-if="!showGiveNumbers"
-        href=""
-        class="text-md bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white ml-3 px-3 py-1.5 rounded-md"
-        :style="
+        :class="
           contactsSelected.length > 0
-            ? 'background-image: linear-gradient(to bottom, #3b82f6, #1e40af);'
-            : 'background-image: linear-gradient(to bottom, #94a3b8, #374151);'
+            ? 'text-md bg-gradient-to-b from-blue-400 to-blue-700 ' +
+              'shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white ' +
+              'ml-3 px-3 py-1.5 rounded-md cursor-pointer'
+            : 'text-md bg-gradient-to-b from-slate-400 to-slate-700 ' +
+              'shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-slate-300 ' +
+              'ml-3 px-3 py-1.5 rounded-md cursor-not-allowed'
         "
         @click="copySelectedContacts()"
       >
-        Copy Selections
+        Copy
       </button>
     </div>
 
@@ -542,7 +544,7 @@ export default class ContactsView extends Vue {
         if (response.status != 201) {
           throw { error: { response: response } };
         }
-        await databaseUtil.updateAccountSettings(this.activeDid, {
+        await databaseUtil.updateDidSpecificSettings(this.activeDid, {
           isRegistered: true,
         });
         if (USE_DEXIE_DB) {
@@ -998,8 +1000,6 @@ export default class ContactsView extends Vue {
       newContact as unknown as Record<string, unknown>,
       "contacts",
     );
-    logger.error("sql", sql);
-    logger.error("params", params);
     let contactPromise = platformService.dbExec(sql, params);
     if (USE_DEXIE_DB) {
       // @ts-expect-error since the result of this promise won't be used, and this will go away soon

src/views/HelpView.vue

@@ -622,7 +622,7 @@ export default class HelpView extends Vue {
     }
 
     if (settings.activeDid) {
-      await databaseUtil.updateAccountSettings(settings.activeDid, {
+      await databaseUtil.updateDidSpecificSettings(settings.activeDid, {
         finishedOnboarding: false,
       });
       if (USE_DEXIE_DB) {

src/views/HomeView.vue

@@ -630,7 +630,7 @@ export default class HomeView extends Vue {
             this.activeDid,
           );
           if (resp.status === 200) {
-            await databaseUtil.updateAccountSettings(this.activeDid, {
+            await databaseUtil.updateDidSpecificSettings(this.activeDid, {
               isRegistered: true,
               ...(await databaseUtil.retrieveSettingsForActiveAccount()),
             });
@@ -785,7 +785,7 @@ export default class HomeView extends Vue {
           if (USE_DEXIE_DB) {
             settings = await retrieveSettingsForActiveAccount();
           }
-          await databaseUtil.updateAccountSettings(this.activeDid, {
+          await databaseUtil.updateDidSpecificSettings(this.activeDid, {
             apiServer: this.apiServer,
             isRegistered: true,
             ...settings,

src/views/ImportDerivedAccountView.vue

@@ -79,7 +79,8 @@ import {
   newIdentifier,
   nextDerivationPath,
 } from "../libs/crypto";
-import { accountsDBPromise, db } from "../db/index";
+import * as databaseUtil from "../db/databaseUtil";
+import { db } from "../db/index";
 import { MASTER_SETTINGS_KEY } from "../db/tables/settings";
 import {
   retrieveAllAccountsMetadata,
@@ -164,23 +165,15 @@ export default class ImportAccountView extends Vue {
 
     try {
       await saveNewIdentity(newId, mne, newDerivPath);
-      if (USE_DEXIE_DB) {
-        const accountsDB = await accountsDBPromise;
-        await accountsDB.accounts.add({
-          dateCreated: new Date().toISOString(),
-          derivationPath: newDerivPath,
-          did: newId.did,
-          identity: JSON.stringify(newId),
-          mnemonic: mne,
-          publicKeyHex: newId.keys[0].publicKeyHex,
-        });
-      }
 
       // record that as the active DID
       const platformService = PlatformServiceFactory.getInstance();
       await platformService.dbExec("UPDATE settings SET activeDid = ?", [
         newId.did,
       ]);
+      await databaseUtil.updateDidSpecificSettings(newId.did, {
+        isRegistered: false,
+      });
       if (USE_DEXIE_DB) {
         await db.settings.update(MASTER_SETTINGS_KEY, {
           activeDid: newId.did,

src/views/NewActivityView.vue

@@ -257,7 +257,7 @@ export default class NewActivityView extends Vue {
   async expandOffersToUserAndMarkRead() {
     this.showOffersDetails = !this.showOffersDetails;
     if (this.showOffersDetails) {
-      await databaseUtil.updateAccountSettings(this.activeDid, {
+      await databaseUtil.updateDidSpecificSettings(this.activeDid, {
         lastAckedOfferToUserJwtId: this.newOffersToUser[0].jwtId,
       });
       if (USE_DEXIE_DB) {
@@ -285,7 +285,7 @@ export default class NewActivityView extends Vue {
     );
     if (index !== -1 && index < this.newOffersToUser.length - 1) {
       // Set to the next offer's jwtId
-      await databaseUtil.updateAccountSettings(this.activeDid, {
+      await databaseUtil.updateDidSpecificSettings(this.activeDid, {
         lastAckedOfferToUserJwtId: this.newOffersToUser[index + 1].jwtId,
       });
       if (USE_DEXIE_DB) {
@@ -295,7 +295,7 @@ export default class NewActivityView extends Vue {
       }
     } else {
       // it's the last entry (or not found), so just keep it the same
-      await databaseUtil.updateAccountSettings(this.activeDid, {
+      await databaseUtil.updateDidSpecificSettings(this.activeDid, {
         lastAckedOfferToUserJwtId: this.lastAckedOfferToUserJwtId,
       });
       if (USE_DEXIE_DB) {
@@ -319,7 +319,7 @@ export default class NewActivityView extends Vue {
     this.showOffersToUserProjectsDetails =
       !this.showOffersToUserProjectsDetails;
     if (this.showOffersToUserProjectsDetails) {
-      await databaseUtil.updateAccountSettings(this.activeDid, {
+      await databaseUtil.updateDidSpecificSettings(this.activeDid, {
         lastAckedOfferToUserProjectsJwtId:
           this.newOffersToUserProjects[0].jwtId,
       });
@@ -349,7 +349,7 @@ export default class NewActivityView extends Vue {
     );
     if (index !== -1 && index < this.newOffersToUserProjects.length - 1) {
       // Set to the next offer's jwtId
-      await databaseUtil.updateAccountSettings(this.activeDid, {
+      await databaseUtil.updateDidSpecificSettings(this.activeDid, {
         lastAckedOfferToUserProjectsJwtId:
           this.newOffersToUserProjects[index + 1].jwtId,
       });
@@ -361,7 +361,7 @@ export default class NewActivityView extends Vue {
       }
     } else {
       // it's the last entry (or not found), so just keep it the same
-      await databaseUtil.updateAccountSettings(this.activeDid, {
+      await databaseUtil.updateDidSpecificSettings(this.activeDid, {
         lastAckedOfferToUserProjectsJwtId:
           this.lastAckedOfferToUserProjectsJwtId,
       });

src/views/SearchAreaView.vue

@@ -215,7 +215,7 @@ export default class SearchAreaView extends Vue {
         if (USE_DEXIE_DB) {
           await db.open();
           await db.settings.update(MASTER_SETTINGS_KEY, {
-            searchBoxes: [newSearchBox],
+            searchBoxes: searchBoxes as unknown, // Type assertion for Dexie compatibility
           });
         }
         this.searchBox = newSearchBox;
@@ -269,7 +269,7 @@ export default class SearchAreaView extends Vue {
       if (USE_DEXIE_DB) {
         await db.open();
         await db.settings.update(MASTER_SETTINGS_KEY, {
-          searchBoxes: [],
+          searchBoxes: "[]" as unknown as string, // Type assertion for Dexie compatibility
           filterFeedByNearby: false,
         });
       }

src/views/TestView.vue

@@ -215,6 +215,65 @@
       </div>
     </div>
 
+    <div class="mt-8">
+      <h2 class="text-xl font-bold mb-4">File Sharing Test</h2>
+      Test the new file sharing functionality that saves to user-accessible
+      locations.
+      <div>
+        <button
+          class="font-bold capitalize bg-slate-500 text-white px-3 py-2 rounded-md mr-2"
+          @click="testFileSharing()"
+        >
+          Test File Sharing
+        </button>
+        <button
+          class="font-bold capitalize bg-slate-500 text-white px-3 py-2 rounded-md mr-2"
+          @click="testFileSaveOnly()"
+        >
+          Test Save Only (No Share Dialog)
+        </button>
+        <button
+          class="font-bold capitalize bg-slate-500 text-white px-3 py-2 rounded-md mr-2"
+          @click="testLocationSelection()"
+        >
+          Test Location Selection
+        </button>
+        <button
+          class="font-bold capitalize bg-slate-500 text-white px-3 py-2 rounded-md mr-2"
+          @click="testLocationSelectionSilent()"
+        >
+          Test Silent Location Selection
+        </button>
+        <button
+          class="font-bold capitalize bg-slate-500 text-white px-3 py-2 rounded-md mr-2"
+          @click="testListUserFiles()"
+        >
+          List User Files
+        </button>
+        <button
+          class="font-bold capitalize bg-slate-500 text-white px-3 py-2 rounded-md mr-2"
+          @click="testBackupFiles()"
+        >
+          Test Backup Files
+        </button>
+        <button
+          class="font-bold capitalize bg-slate-500 text-white px-3 py-2 rounded-md mr-2"
+          @click="testOpenBackupDirectory()"
+        >
+          Test Open Directory
+        </button>
+        <button
+          class="font-bold capitalize bg-slate-500 text-white px-3 py-2 rounded-md mr-2"
+          @click="testFileDiscoveryDebug()"
+        >
+          Debug File Discovery
+        </button>
+        <div v-if="fileSharingResult" class="mt-2 p-2 bg-gray-100 rounded">
+          <strong>Result:</strong> {{ fileSharingResult }}
+        </div>
+      </div>
+    </div>
+
     <div class="mt-8">
       <h2 class="text-xl font-bold mb-4">Image Sharing</h2>
       Populates the "shared-photo" view as if they used "share_target".
@@ -387,6 +446,9 @@ export default class Help extends Vue {
   sqlQuery = "";
   sqlResult: unknown = null;
 
+  // for file sharing test
+  fileSharingResult = "";
+
   cryptoLib = cryptoLib;
 
   async mounted() {
@@ -620,5 +682,174 @@ export default class Help extends Vue {
       );
     }
   }
+
+  public async testFileSharing() {
+    const platformService = PlatformServiceFactory.getInstance();
+    try {
+      const result = await platformService.testFileSharing();
+      this.fileSharingResult = result;
+      logger.log("File Sharing Test Result:", this.fileSharingResult);
+    } catch (error) {
+      logger.error("File Sharing Test Error:", error);
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "File Sharing Error",
+          text: error instanceof Error ? error.message : String(error),
+        },
+        5000,
+      );
+    }
+  }
+
+  public async testFileSaveOnly() {
+    const platformService = PlatformServiceFactory.getInstance();
+    try {
+      const result = await platformService.testFileSaveOnly();
+      this.fileSharingResult = result;
+      logger.log("File Save Only Test Result:", this.fileSharingResult);
+    } catch (error) {
+      logger.error("File Save Only Test Error:", error);
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "File Save Only Error",
+          text: error instanceof Error ? error.message : String(error),
+        },
+        5000,
+      );
+    }
+  }
+
+  public async testLocationSelection() {
+    const platformService = PlatformServiceFactory.getInstance();
+    try {
+      const result = await platformService.testLocationSelection();
+      this.fileSharingResult = result;
+      logger.log("Location Selection Test Result:", this.fileSharingResult);
+    } catch (error) {
+      logger.error("Location Selection Test Error:", error);
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Location Selection Error",
+          text: error instanceof Error ? error.message : String(error),
+        },
+        5000,
+      );
+    }
+  }
+
+  public async testLocationSelectionSilent() {
+    const platformService = PlatformServiceFactory.getInstance();
+    try {
+      const result = await platformService.testLocationSelectionSilent();
+      this.fileSharingResult = result;
+      logger.log(
+        "Silent Location Selection Test Result:",
+        this.fileSharingResult,
+      );
+    } catch (error) {
+      logger.error("Silent Location Selection Test Error:", error);
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Silent Location Selection Error",
+          text: error instanceof Error ? error.message : String(error),
+        },
+        5000,
+      );
+    }
+  }
+
+  public async testListUserFiles() {
+    const platformService = PlatformServiceFactory.getInstance();
+    try {
+      const result = await platformService.testListUserFiles();
+      this.fileSharingResult = result;
+      logger.log("List User Files Test Result:", this.fileSharingResult);
+    } catch (error) {
+      logger.error("List User Files Test Error:", error);
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "List User Files Error",
+          text: error instanceof Error ? error.message : String(error),
+        },
+        5000,
+      );
+    }
+  }
+
+  public async testBackupFiles() {
+    const platformService = PlatformServiceFactory.getInstance();
+    try {
+      const result = await platformService.testBackupFiles();
+      this.fileSharingResult = result;
+      logger.log("Backup Files Test Result:", this.fileSharingResult);
+    } catch (error) {
+      logger.error("Backup Files Test Error:", error);
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Backup Files Error",
+          text: error instanceof Error ? error.message : String(error),
+        },
+        5000,
+      );
+    }
+  }
+
+  public async testOpenBackupDirectory() {
+    const platformService = PlatformServiceFactory.getInstance();
+    try {
+      const result = await platformService.testOpenBackupDirectory();
+      this.fileSharingResult = result;
+      logger.log("Open Backup Directory Test Result:", this.fileSharingResult);
+    } catch (error) {
+      logger.error("Open Backup Directory Test Error:", error);
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Open Backup Directory Error",
+          text: error instanceof Error ? error.message : String(error),
+        },
+        5000,
+      );
+    }
+  }
+
+  public async testFileDiscoveryDebug() {
+    const platformService = PlatformServiceFactory.getInstance();
+    try {
+      if ("debugFileDiscoveryStepByStep" in platformService) {
+        const result = await (
+          platformService as any
+        ).debugFileDiscoveryStepByStep();
+        this.fileSharingResult = result;
+        logger.log("File Discovery Debug Test Result:", this.fileSharingResult);
+      } else {
+        this.fileSharingResult = "Debug method not available on this platform";
+      }
+    } catch (error) {
+      logger.error("File Discovery Debug Test Error:", error);
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "File Discovery Debug Error",
+          text: error instanceof Error ? error.message : String(error),
+        },
+        5000,
+      );
+    }
+  }
 }
 </script>