Release v1.0.11 - Add dev mode with test prompt button on all headers

- Add Dev Mode toggle to settings that persists in vault metadata
- Add test permission prompt button (✨) to all page headers when dev mode enabled
- Move devMode and onTestPrompt to NavComponent base class for inheritance
- Refactor all home components to extend NavComponent
- Simplify permission prompt layout: remove duplicate domain from header
- Convert permission descriptions to flowing single paragraphs
- Update header-buttons styling for consistent lock/magic button layout

Files modified:
- projects/common/src/lib/common/nav-component.ts (devMode, onTestPrompt)
- projects/common/src/lib/services/storage/types.ts (devMode property)
- projects/common/src/lib/services/storage/signer-meta-handler.ts (setDevMode)
- projects/common/src/lib/styles/_common.scss (header-buttons styling)
- projects/*/src/app/components/home/*/settings.component.* (dev mode UI)
- projects/*/src/app/components/home/*/*.component.* (extend NavComponent)
- projects/*/public/prompt.html (simplified layout)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

projects/chrome/src/app/components/home/backups/backups.component.html

@@ -1,7 +1,14 @@
 <div class="sam-text-header">
-  <button class="lock-btn" title="Lock" (click)="onClickLock()">
-    <span class="emoji">🔒</span>
-  </button>
+  <div class="header-buttons">
+    <button class="header-btn" title="Lock" (click)="onClickLock()">
+      <span class="emoji">🔒</span>
+    </button>
+    @if (devMode) {
+      <button class="header-btn" title="Test Permission Prompt" (click)="onTestPrompt()">
+        <span class="emoji">✨</span>
+      </button>
+    }
+  </div>
   <button class="back-btn" title="Go Back" (click)="goBack()">
     <span class="emoji">←</span>
   </button>

projects/chrome/src/app/components/home/backups/backups.component.ts

@@ -3,9 +3,9 @@ import { Router } from '@angular/router';
 import {
   ConfirmComponent,
   LoggerService,
+  NavComponent,
   SignerMetaData_VaultSnapshot,
   StartupService,
-  StorageService,
 } from '@common';
 import { getNewStorageServiceConfig } from '../../../common/data/get-new-storage-service-config';
 
@@ -15,9 +15,8 @@ import { getNewStorageServiceConfig } from '../../../common/data/get-new-storage
   styleUrl: './backups.component.scss',
   imports: [ConfirmComponent],
 })
-export class BackupsComponent implements OnInit {
+export class BackupsComponent extends NavComponent implements OnInit {
   readonly #router = inject(Router);
-  readonly #storage = inject(StorageService);
   readonly #startup = inject(StartupService);
   readonly #logger = inject(LoggerService);
 
@@ -27,11 +26,11 @@ export class BackupsComponent implements OnInit {
 
   ngOnInit(): void {
     this.loadBackups();
-    this.maxBackups = this.#storage.getSignerMetaHandler().getMaxBackups();
+    this.maxBackups = this.storage.getSignerMetaHandler().getMaxBackups();
   }
 
   loadBackups(): void {
-    this.backups = this.#storage.getSignerMetaHandler().getBackups();
+    this.backups = this.storage.getSignerMetaHandler().getBackups();
   }
 
   async onMaxBackupsChange(event: Event): Promise<void> {
@@ -39,14 +38,14 @@ export class BackupsComponent implements OnInit {
     const value = parseInt(input.value, 10);
     if (!isNaN(value) && value >= 1 && value <= 20) {
       this.maxBackups = value;
-      await this.#storage.getSignerMetaHandler().setMaxBackups(value);
+      await this.storage.getSignerMetaHandler().setMaxBackups(value);
     }
   }
 
   async createManualBackup(): Promise<void> {
-    const browserSyncData = this.#storage.getBrowserSyncHandler().browserSyncData;
+    const browserSyncData = this.storage.getBrowserSyncHandler().browserSyncData;
     if (browserSyncData) {
-      await this.#storage.getSignerMetaHandler().createBackup(browserSyncData, 'manual');
+      await this.storage.getSignerMetaHandler().createBackup(browserSyncData, 'manual');
       this.loadBackups();
     }
   }
@@ -55,22 +54,22 @@ export class BackupsComponent implements OnInit {
     this.restoringBackupId = backupId;
     try {
       // First, create a pre-restore backup of current state
-      const currentData = this.#storage.getBrowserSyncHandler().browserSyncData;
+      const currentData = this.storage.getBrowserSyncHandler().browserSyncData;
       if (currentData) {
-        await this.#storage.getSignerMetaHandler().createBackup(currentData, 'pre-restore');
+        await this.storage.getSignerMetaHandler().createBackup(currentData, 'pre-restore');
       }
 
       // Get the backup data
-      const backupData = this.#storage.getSignerMetaHandler().getBackupData(backupId);
+      const backupData = this.storage.getSignerMetaHandler().getBackupData(backupId);
       if (!backupData) {
         throw new Error('Backup not found');
       }
 
       // Import the backup
-      await this.#storage.deleteVault(true);
-      await this.#storage.importVault(backupData);
+      await this.storage.deleteVault(true);
+      await this.storage.importVault(backupData);
       this.#logger.logVaultImport('Backup Restore');
-      this.#storage.isInitialized = false;
+      this.storage.isInitialized = false;
       this.#startup.startOver(getNewStorageServiceConfig());
     } catch (error) {
       console.error('Failed to restore backup:', error);
@@ -79,7 +78,7 @@ export class BackupsComponent implements OnInit {
   }
 
   async deleteBackup(backupId: string): Promise<void> {
-    await this.#storage.getSignerMetaHandler().deleteBackup(backupId);
+    await this.storage.getSignerMetaHandler().deleteBackup(backupId);
     this.loadBackups();
   }
 
@@ -120,7 +119,7 @@ export class BackupsComponent implements OnInit {
 
   async onClickLock(): Promise<void> {
     this.#logger.logVaultLock();
-    await this.#storage.lockVault();
+    await this.storage.lockVault();
     this.#router.navigateByUrl('/vault-login');
   }
 }