Release v1.0.7 - Move lock button to page headers

- Move lock button from bottom navigation bar to each page header
- Add lock button styling to common SCSS with hover effect
- Remove logs and info tabs from bottom navigation
- Standardize header height to 48px across all pages
- Simplify home component by removing lock logic

Files modified:
- package.json, manifest.json (both browsers)
- home.component.html/ts (both browsers)
- identities, identity, bookmarks, logs, info, settings components
- projects/common/src/lib/styles/_common.scss

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

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

package.json

@@ -1,12 +1,12 @@
 {
   "name": "plebeian-signer",
-  "version": "v1.0.6",
+  "version": "v1.0.7",
   "custom": {
     "chrome": {
-      "version": "v1.0.6"
+      "version": "v1.0.7"
     },
     "firefox": {
-      "version": "v1.0.6"
+      "version": "v1.0.7"
     }
   },
   "scripts": {

projects/chrome/public/manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 3,
   "name": "Plebeian Signer - Nostr Identity Manager & Signer",
   "description": "Manage and switch between multiple identities while interacting with Nostr apps",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "homepage_url": "https://git.mleku.dev/mleku/plebeian-signer",
   "options_page": "options.html",
   "permissions": [

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

@@ -1,8 +1,11 @@
 <!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->
 <!-- eslint-disable @angular-eslint/template/click-events-have-key-events -->
-<div class="bookmarks-header">
+<div class="sam-text-header">
-  <span class="bookmarks-title">Bookmarks</span>
+  <button class="lock-btn" title="Lock" (click)="onClickLock()">
-  <button class="btn btn-primary btn-sm" (click)="onBookmarkThisPage()">
+    <span class="emoji">🔒</span>
+  </button>
+  <span>Bookmarks</span>
+  <button class="action-btn btn btn-primary btn-sm" (click)="onBookmarkThisPage()">
     <span class="emoji">🔖</span> Bookmark This Page
   </button>
 </div>

projects/chrome/src/app/components/home/bookmarks/bookmarks.component.scss

@@ -2,21 +2,24 @@
   height: 100%;
   display: flex;
   flex-direction: column;
-  padding: var(--size);
+  padding-top: var(--size);
+  padding-bottom: var(--size);
   overflow: hidden;
-}
 
-.bookmarks-header {
+  > *:not(.sam-text-header) {
-  display: flex;
+    margin-left: var(--size);
-  justify-content: space-between;
+    margin-right: var(--size);
-  align-items: center;
+  }
+
+  .sam-text-header {
     margin-bottom: var(--size);
     flex-shrink: 0;
-}
 
-.bookmarks-title {
+    .action-btn {
-  font-weight: 600;
+      position: absolute;
-  font-size: 1.1rem;
+      right: 0;
+    }
+  }
 }
 
 .bookmarks-container {

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

@@ -1,5 +1,6 @@
 import { Component, inject, OnInit } from '@angular/core';
-import { Bookmark, LoggerService, SignerMetaData } from '@common';
+import { Router } from '@angular/router';
+import { Bookmark, LoggerService, SignerMetaData, StorageService } from '@common';
 import { ChromeMetaHandler } from '../../../common/data/chrome-meta-handler';
 
 @Component({
@@ -11,6 +12,8 @@ import { ChromeMetaHandler } from '../../../common/data/chrome-meta-handler';
 export class BookmarksComponent implements OnInit {
   readonly #logger = inject(LoggerService);
   readonly #metaHandler = new ChromeMetaHandler();
+  readonly #storage = inject(StorageService);
+  readonly #router = inject(Router);
 
   bookmarks: Bookmark[] = [];
   isLoading = true;
@@ -87,4 +90,10 @@ export class BookmarksComponent implements OnInit {
       return url;
     }
   }
+
+  async onClickLock() {
+    this.#logger.logVaultLock();
+    await this.#storage.lockVault();
+    this.#router.navigateByUrl('/vault-login');
+  }
 }

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

@@ -33,16 +33,4 @@
   <a class="tab" routerLink="/home/bookmarks" routerLinkActive="active" title="Bookmarks">
     <span class="emoji">🔖</span>
   </a>
-
-  <a class="tab" routerLink="/home/logs" routerLinkActive="active" title="Logs">
-    <span class="emoji">🪵</span>
-  </a>
-
-  <a class="tab" routerLink="/home/info" routerLinkActive="active" title="Info">
-    <span class="emoji">💡</span>
-  </a>
-
-  <button class="tab" (click)="onClickLock()" title="Lock">
-    <span class="emoji">🔒</span>
-  </button>
 </div>

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

@@ -1,6 +1,5 @@
-import { Component, inject } from '@angular/core';
+import { Component } from '@angular/core';
-import { Router, RouterModule, RouterOutlet } from '@angular/router';
+import { RouterModule, RouterOutlet } from '@angular/router';
-import { LoggerService, StorageService } from '@common';
 
 @Component({
   selector: 'app-home',
@@ -8,14 +7,4 @@ import { LoggerService, StorageService } from '@common';
   styleUrl: './home.component.scss',
   imports: [RouterOutlet, RouterModule],
 })
-export class HomeComponent {
+export class HomeComponent {}
-  readonly #storage = inject(StorageService);
-  readonly #router = inject(Router);
-  readonly #logger = inject(LoggerService);
-
-  async onClickLock() {
-    this.#logger.logVaultLock();
-    await this.#storage.lockVault();
-    this.#router.navigateByUrl('/vault-login');
-  }
-}

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

@@ -1,6 +1,9 @@
 <!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->
 <!-- eslint-disable @angular-eslint/template/click-events-have-key-events -->
 <div class="custom-header" style="position: sticky; top: 0">
+  <button class="lock-btn" title="Lock" (click)="onClickLock()">
+    <span class="emoji">🔒</span>
+  </button>
   <span class="text">Identities</span>
 
   <button class="button btn btn-primary btn-sm" (click)="onClickNewIdentity()">

projects/chrome/src/app/components/home/identities/identities.component.scss

@@ -3,37 +3,55 @@
   display: flex;
   flex-direction: column;
   overflow-y: auto;
-  padding-left: var(--size);
+
-  padding-right: var(--size);
+  > *:not(.custom-header) {
+    margin-left: var(--size);
+    margin-right: var(--size);
+  }
 
   .custom-header {
-    padding-top: var(--size);
+    height: 48px;
-    padding-bottom: var(--size);
+    min-height: 48px;
     display: grid;
     grid-template-columns: 1fr;
     grid-template-rows: auto;
     align-items: center;
     background: var(--background);
+    position: relative;
+
+    .lock-btn {
+      position: absolute;
+      left: 0;
+      background: transparent;
+      border: none;
+      padding: 8px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 4px;
+      transition: background-color 0.2s;
+
+      &:hover {
+        background-color: var(--background-light);
+      }
+
+      .emoji {
+        font-size: 20px;
+      }
+    }
 
     .button {
-      grid-column-start: 1;
+      position: absolute;
-      grid-column-end: 2;
+      right: 0;
-      grid-row-start: 1;
-      grid-row-end: 2;
-      justify-self: end;
     }
 
     .text {
-      grid-column-start: 1;
-      grid-column-end: 2;
-      grid-row-start: 1;
-      grid-row-end: 2;
       font-family: var(--font-heading);
       font-size: 24px;
       font-weight: 700;
       letter-spacing: 0.1rem;
       justify-self: center;
-      height: 32px;
     }
   }
 

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

@@ -3,6 +3,7 @@ import { Router } from '@angular/router';
 import {
   IconButtonComponent,
   Identity_DECRYPTED,
+  LoggerService,
   NostrHelper,
   ProfileMetadata,
   ProfileMetadataService,
@@ -20,6 +21,7 @@ export class IdentitiesComponent implements OnInit {
   readonly storage = inject(StorageService);
   readonly #router = inject(Router);
   readonly #profileMetadata = inject(ProfileMetadataService);
+  readonly #logger = inject(LoggerService);
 
   // Cache of pubkey -> profile for quick lookup
   #profileCache = new Map<string, ProfileMetadata | null>();
@@ -73,4 +75,10 @@ export class IdentitiesComponent implements OnInit {
   onClickWhitelistedApps() {
     this.#router.navigateByUrl('/whitelisted-apps');
   }
+
+  async onClickLock() {
+    this.#logger.logVaultLock();
+    await this.storage.lockVault();
+    this.#router.navigateByUrl('/vault-login');
+  }
 }

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

@@ -1,6 +1,9 @@
 <!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->
 <!-- eslint-disable @angular-eslint/template/click-events-have-key-events -->
 <div class="sam-text-header">
+  <button class="lock-btn" title="Lock" (click)="onClickLock()">
+    <span class="emoji">🔒</span>
+  </button>
   <span>You</span>
   <button class="edit-btn" title="Edit profile" (click)="onClickEditProfile()">
     <img src="edit.svg" alt="Edit" class="edit-icon" />

projects/chrome/src/app/components/home/identity/identity.component.scss

@@ -4,14 +4,12 @@
   flex-direction: column;
 
   .sam-text-header {
-    position: relative;
-
     .edit-btn {
       position: absolute;
-      right: var(--size);
+      right: 0;
       background: transparent;
       border: none;
-      padding: 4px;
+      padding: 8px;
       cursor: pointer;
       display: flex;
       align-items: center;

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

@@ -76,6 +76,12 @@ export class IdentityComponent implements OnInit {
     this.#router.navigateByUrl('/profile-edit');
   }
 
+  async onClickLock() {
+    this.#logger.logVaultLock();
+    await this.#storage.lockVault();
+    this.#router.navigateByUrl('/vault-login');
+  }
+
   async #loadData() {
     try {
       const selectedIdentityId =

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

@@ -1,4 +1,7 @@
 <div class="sam-text-header">
+  <button class="lock-btn" title="Lock" (click)="onClickLock()">
+    <span class="emoji">🔒</span>
+  </button>
   <span> Plebeian Signer </span>
 </div>
 

projects/chrome/src/app/components/home/info/info.component.scss

@@ -4,6 +4,13 @@
   flex-direction: column;
   align-items: center;
   overflow-y: auto;
-  padding-left: var(--size);
+
-  padding-right: var(--size);
+  > *:not(.sam-text-header) {
+    margin-left: var(--size);
+    margin-right: var(--size);
+  }
+
+  .sam-text-header {
+    width: 100%;
+  }
 }

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

@@ -1,4 +1,6 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
+import { Router } from '@angular/router';
+import { LoggerService, StorageService } from '@common';
 import packageJson from '../../../../../../../package.json';
 
 @Component({
@@ -7,5 +9,15 @@ import packageJson from '../../../../../../../package.json';
   styleUrl: './info.component.scss',
 })
 export class InfoComponent {
+  readonly #logger = inject(LoggerService);
+  readonly #storage = inject(StorageService);
+  readonly #router = inject(Router);
+
   version = packageJson.custom.chrome.version;
+
+  async onClickLock() {
+    this.#logger.logVaultLock();
+    await this.#storage.lockVault();
+    this.#router.navigateByUrl('/vault-login');
+  }
 }

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

@@ -1,5 +1,8 @@
-<div class="logs-header">
+<div class="sam-text-header">
-  <span class="logs-title">Logs</span>
+  <button class="lock-btn" title="Lock" (click)="onClickLock()">
+    <span class="emoji">🔒</span>
+  </button>
+  <span>Logs</span>
   <div class="logs-actions">
     <button class="btn btn-sm btn-secondary" (click)="onRefresh()">Refresh</button>
     <button class="btn btn-sm btn-secondary" (click)="onClear()">Clear</button>

projects/chrome/src/app/components/home/logs/logs.component.scss

@@ -2,26 +2,26 @@
   height: 100%;
   display: flex;
   flex-direction: column;
-  padding: var(--size);
+  padding-top: var(--size);
+  padding-bottom: var(--size);
   overflow: hidden;
-}
 
-.logs-header {
+  > *:not(.sam-text-header) {
-  display: flex;
+    margin-left: var(--size);
-  justify-content: space-between;
+    margin-right: var(--size);
-  align-items: center;
+  }
+
+  .sam-text-header {
     margin-bottom: var(--size);
     flex-shrink: 0;
-}
 
-.logs-actions {
+    .logs-actions {
+      position: absolute;
+      right: 0;
       display: flex;
       gap: 8px;
-}
+    }
-
+  }
-.logs-title {
-  font-weight: 600;
-  font-size: 1.1rem;
 }
 
 .logs-container {

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

@@ -1,5 +1,6 @@
 import { Component, inject, OnInit } from '@angular/core';
-import { LoggerService, LogEntry } from '@common';
+import { Router } from '@angular/router';
+import { LoggerService, LogEntry, StorageService } from '@common';
 import { DatePipe } from '@angular/common';
 
 @Component({
@@ -10,6 +11,8 @@ import { DatePipe } from '@angular/common';
 })
 export class LogsComponent implements OnInit {
   readonly #logger = inject(LoggerService);
+  readonly #storage = inject(StorageService);
+  readonly #router = inject(Router);
 
   get logs(): LogEntry[] {
     return this.#logger.logs;
@@ -40,4 +43,10 @@ export class LogsComponent implements OnInit {
         return 'log-info';
     }
   }
+
+  async onClickLock() {
+    this.#logger.logVaultLock();
+    await this.#storage.lockVault();
+    this.#router.navigateByUrl('/vault-login');
+  }
 }

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

@@ -1,4 +1,7 @@
 <div class="sam-text-header">
+  <button class="lock-btn" title="Lock" (click)="onClickLock()">
+    <span class="emoji">🔒</span>
+  </button>
   <span> Settings </span>
 </div>
 
@@ -12,6 +15,9 @@
   Import Vault
 </button>
 
+<lib-nav-item text="🪵 Logs" (click)="navigate('/home/logs')"></lib-nav-item>
+<lib-nav-item text="💡 Info" (click)="navigate('/home/info')"></lib-nav-item>
+
 <div class="sam-flex-grow"></div>
 
 <button

projects/chrome/src/app/components/home/settings/settings.component.scss

@@ -4,8 +4,11 @@
   flex-direction: column;
   row-gap: var(--size);
   overflow-y: auto;
-  padding-left: var(--size);
+
-  padding-right: var(--size);
+  > *:not(.sam-text-header) {
+    margin-left: var(--size);
+    margin-right: var(--size);
+  }
 
   .file-input {
     position: absolute;

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

@@ -1,4 +1,5 @@
 import { Component, inject, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
 import {
   BrowserSyncData,
   BrowserSyncFlow,
@@ -6,6 +7,7 @@ import {
   DateHelper,
   LoggerService,
   NavComponent,
+  NavItemComponent,
   StartupService,
   StorageService,
 } from '@common';
@@ -13,11 +15,12 @@ import { getNewStorageServiceConfig } from '../../../common/data/get-new-storage
 
 @Component({
   selector: 'app-settings',
-  imports: [ConfirmComponent],
+  imports: [ConfirmComponent, NavItemComponent],
   templateUrl: './settings.component.html',
   styleUrl: './settings.component.scss',
 })
 export class SettingsComponent extends NavComponent implements OnInit {
+  readonly #router = inject(Router);
   syncFlow: string | undefined;
 
   readonly #storage = inject(StorageService);
@@ -101,4 +104,10 @@ export class SettingsComponent extends NavComponent implements OnInit {
     downloadAnchorNode.click();
     downloadAnchorNode.remove();
   }
+
+  async onClickLock() {
+    this.#logger.logVaultLock();
+    await this.#storage.lockVault();
+    this.#router.navigateByUrl('/vault-login');
+  }
 }

projects/common/src/lib/styles/_common.scss

@@ -1,12 +1,13 @@
 .sam-text-header {
   background: var(--background);
   z-index: 20;
-  padding-top: var(--size);
+  height: 48px;
-  padding-bottom: var(--size);
+  min-height: 48px;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
+  position: relative;
 
   span {
     font-family: var(--font-heading);
@@ -14,6 +15,28 @@
     font-weight: 700;
     letter-spacing: 0.1rem;
   }
+
+  .lock-btn {
+    position: absolute;
+    left: 0;
+    background: transparent;
+    border: none;
+    padding: 8px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    transition: background-color 0.2s;
+
+    &:hover {
+      background-color: var(--background-light);
+    }
+
+    .emoji {
+      font-size: 20px;
+    }
+  }
 }
 
 .sam-footer-grid-2 {

projects/firefox/public/manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 3,
   "name": "Plebeian Signer",
   "description": "Nostr Identity Manager & Signer",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "homepage_url": "https://git.mleku.dev/mleku/plebeian-signer",
   "options_page": "options.html",
   "permissions": [

projects/firefox/src/app/components/home/bookmarks/bookmarks.component.html

@@ -1,8 +1,11 @@
 <!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->
 <!-- eslint-disable @angular-eslint/template/click-events-have-key-events -->
-<div class="bookmarks-header">
+<div class="sam-text-header">
-  <span class="bookmarks-title">Bookmarks</span>
+  <button class="lock-btn" title="Lock" (click)="onClickLock()">
-  <button class="btn btn-primary btn-sm" (click)="onBookmarkThisPage()">
+    <span class="emoji">🔒</span>
+  </button>
+  <span>Bookmarks</span>
+  <button class="action-btn btn btn-primary btn-sm" (click)="onBookmarkThisPage()">
     <span class="emoji">🔖</span> Bookmark This Page
   </button>
 </div>

projects/firefox/src/app/components/home/bookmarks/bookmarks.component.scss

@@ -2,21 +2,24 @@
   height: 100%;
   display: flex;
   flex-direction: column;
-  padding: var(--size);
+  padding-top: var(--size);
+  padding-bottom: var(--size);
   overflow: hidden;
-}
 
-.bookmarks-header {
+  > *:not(.sam-text-header) {
-  display: flex;
+    margin-left: var(--size);
-  justify-content: space-between;
+    margin-right: var(--size);
-  align-items: center;
+  }
+
+  .sam-text-header {
     margin-bottom: var(--size);
     flex-shrink: 0;
-}
 
-.bookmarks-title {
+    .action-btn {
-  font-weight: 600;
+      position: absolute;
-  font-size: 1.1rem;
+      right: 0;
+    }
+  }
 }
 
 .bookmarks-container {

projects/firefox/src/app/components/home/bookmarks/bookmarks.component.ts

@@ -1,5 +1,6 @@
 import { Component, inject, OnInit } from '@angular/core';
-import { Bookmark, LoggerService, SignerMetaData } from '@common';
+import { Router } from '@angular/router';
+import { Bookmark, LoggerService, SignerMetaData, StorageService } from '@common';
 import { FirefoxMetaHandler } from '../../../common/data/firefox-meta-handler';
 import browser from 'webextension-polyfill';
 
@@ -12,6 +13,8 @@ import browser from 'webextension-polyfill';
 export class BookmarksComponent implements OnInit {
   readonly #logger = inject(LoggerService);
   readonly #metaHandler = new FirefoxMetaHandler();
+  readonly #storage = inject(StorageService);
+  readonly #router = inject(Router);
 
   bookmarks: Bookmark[] = [];
   isLoading = true;
@@ -88,4 +91,10 @@ export class BookmarksComponent implements OnInit {
       return url;
     }
   }
+
+  async onClickLock() {
+    this.#logger.logVaultLock();
+    await this.#storage.lockVault();
+    this.#router.navigateByUrl('/vault-login');
+  }
 }

projects/firefox/src/app/components/home/home.component.html

@@ -33,16 +33,4 @@
   <a class="tab" routerLink="/home/bookmarks" routerLinkActive="active" title="Bookmarks">
     <span class="emoji">🔖</span>
   </a>
-
-  <a class="tab" routerLink="/home/logs" routerLinkActive="active" title="Logs">
-    <span class="emoji">🪵</span>
-  </a>
-
-  <a class="tab" routerLink="/home/info" routerLinkActive="active" title="Info">
-    <span class="emoji">💡</span>
-  </a>
-
-  <button class="tab" (click)="onClickLock()" title="Lock">
-    <span class="emoji">🔒</span>
-  </button>
 </div>

projects/firefox/src/app/components/home/home.component.ts

@@ -1,6 +1,5 @@
-import { Component, inject } from '@angular/core';
+import { Component } from '@angular/core';
-import { Router, RouterModule, RouterOutlet } from '@angular/router';
+import { RouterModule, RouterOutlet } from '@angular/router';
-import { LoggerService, StorageService } from '@common';
 
 @Component({
   selector: 'app-home',
@@ -8,14 +7,4 @@ import { LoggerService, StorageService } from '@common';
   templateUrl: './home.component.html',
   styleUrl: './home.component.scss',
 })
-export class HomeComponent {
+export class HomeComponent {}
-  readonly #storage = inject(StorageService);
-  readonly #router = inject(Router);
-  readonly #logger = inject(LoggerService);
-
-  async onClickLock() {
-    this.#logger.logVaultLock();
-    await this.#storage.lockVault();
-    this.#router.navigateByUrl('/vault-login');
-  }
-}

projects/firefox/src/app/components/home/identities/identities.component.html

@@ -1,6 +1,9 @@
 <!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->
 <!-- eslint-disable @angular-eslint/template/click-events-have-key-events -->
 <div class="custom-header" style="position: sticky; top: 0">
+  <button class="lock-btn" title="Lock" (click)="onClickLock()">
+    <span class="emoji">🔒</span>
+  </button>
   <span class="text">Identities</span>
 
   <button class="button btn btn-primary btn-sm" (click)="onClickNewIdentity()">

projects/firefox/src/app/components/home/identities/identities.component.scss

@@ -3,37 +3,55 @@
   display: flex;
   flex-direction: column;
   overflow-y: auto;
-  padding-left: var(--size);
+
-  padding-right: var(--size);
+  > *:not(.custom-header) {
+    margin-left: var(--size);
+    margin-right: var(--size);
+  }
 
   .custom-header {
-    padding-top: var(--size);
+    height: 48px;
-    padding-bottom: var(--size);
+    min-height: 48px;
     display: grid;
     grid-template-columns: 1fr;
     grid-template-rows: auto;
     align-items: center;
     background: var(--background);
+    position: relative;
+
+    .lock-btn {
+      position: absolute;
+      left: 0;
+      background: transparent;
+      border: none;
+      padding: 8px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 4px;
+      transition: background-color 0.2s;
+
+      &:hover {
+        background-color: var(--background-light);
+      }
+
+      .emoji {
+        font-size: 20px;
+      }
+    }
 
     .button {
-      grid-column-start: 1;
+      position: absolute;
-      grid-column-end: 2;
+      right: 0;
-      grid-row-start: 1;
-      grid-row-end: 2;
-      justify-self: end;
     }
 
     .text {
-      grid-column-start: 1;
-      grid-column-end: 2;
-      grid-row-start: 1;
-      grid-row-end: 2;
       font-family: var(--font-heading);
       font-size: 24px;
       font-weight: 700;
       letter-spacing: 0.1rem;
       justify-self: center;
-      height: 32px;
     }
   }
 

projects/firefox/src/app/components/home/identities/identities.component.ts

@@ -3,6 +3,7 @@ import { Router } from '@angular/router';
 import {
   IconButtonComponent,
   Identity_DECRYPTED,
+  LoggerService,
   NostrHelper,
   ProfileMetadata,
   ProfileMetadataService,
@@ -20,6 +21,7 @@ export class IdentitiesComponent implements OnInit {
   readonly storage = inject(StorageService);
   readonly #router = inject(Router);
   readonly #profileMetadata = inject(ProfileMetadataService);
+  readonly #logger = inject(LoggerService);
 
   // Cache of pubkey -> profile for quick lookup
   #profileCache = new Map<string, ProfileMetadata | null>();
@@ -73,4 +75,10 @@ export class IdentitiesComponent implements OnInit {
   onClickWhitelistedApps() {
     this.#router.navigateByUrl('/whitelisted-apps');
   }
+
+  async onClickLock() {
+    this.#logger.logVaultLock();
+    await this.storage.lockVault();
+    this.#router.navigateByUrl('/vault-login');
+  }
 }

projects/firefox/src/app/components/home/identity/identity.component.html

@@ -1,6 +1,9 @@
 <!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->
 <!-- eslint-disable @angular-eslint/template/click-events-have-key-events -->
 <div class="sam-text-header">
+  <button class="lock-btn" title="Lock" (click)="onClickLock()">
+    <span class="emoji">🔒</span>
+  </button>
   <span>You</span>
   <button class="edit-btn" title="Edit profile" (click)="onClickEditProfile()">
     <img src="edit.svg" alt="Edit" class="edit-icon" />

projects/firefox/src/app/components/home/identity/identity.component.scss

@@ -4,14 +4,12 @@
   flex-direction: column;
 
   .sam-text-header {
-    position: relative;
-
     .edit-btn {
       position: absolute;
-      right: var(--size);
+      right: 0;
       background: transparent;
       border: none;
-      padding: 4px;
+      padding: 8px;
       cursor: pointer;
       display: flex;
       align-items: center;

projects/firefox/src/app/components/home/identity/identity.component.ts

@@ -76,6 +76,12 @@ export class IdentityComponent implements OnInit {
     this.#router.navigateByUrl('/profile-edit');
   }
 
+  async onClickLock() {
+    this.#logger.logVaultLock();
+    await this.#storage.lockVault();
+    this.#router.navigateByUrl('/vault-login');
+  }
+
   async #loadData() {
     try {
       const selectedIdentityId =

projects/firefox/src/app/components/home/info/info.component.html

@@ -1,4 +1,7 @@
 <div class="sam-text-header">
+  <button class="lock-btn" title="Lock" (click)="onClickLock()">
+    <span class="emoji">🔒</span>
+  </button>
   <span> Plebeian Signer </span>
 </div>
 

projects/firefox/src/app/components/home/info/info.component.scss

@@ -4,6 +4,13 @@
   flex-direction: column;
   align-items: center;
   overflow-y: auto;
-  padding-left: var(--size);
+
-  padding-right: var(--size);
+  > *:not(.sam-text-header) {
+    margin-left: var(--size);
+    margin-right: var(--size);
+  }
+
+  .sam-text-header {
+    width: 100%;
+  }
 }

projects/firefox/src/app/components/home/info/info.component.ts

@@ -1,4 +1,6 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
+import { Router } from '@angular/router';
+import { LoggerService, StorageService } from '@common';
 import packageJson from '../../../../../../../package.json';
 
 @Component({
@@ -7,5 +9,15 @@ import packageJson from '../../../../../../../package.json';
   styleUrl: './info.component.scss',
 })
 export class InfoComponent {
+  readonly #logger = inject(LoggerService);
+  readonly #storage = inject(StorageService);
+  readonly #router = inject(Router);
+
   version = packageJson.custom.firefox.version;
+
+  async onClickLock() {
+    this.#logger.logVaultLock();
+    await this.#storage.lockVault();
+    this.#router.navigateByUrl('/vault-login');
+  }
 }

projects/firefox/src/app/components/home/logs/logs.component.html

@@ -1,5 +1,8 @@
-<div class="logs-header">
+<div class="sam-text-header">
-  <span class="logs-title">Logs</span>
+  <button class="lock-btn" title="Lock" (click)="onClickLock()">
+    <span class="emoji">🔒</span>
+  </button>
+  <span>Logs</span>
   <div class="logs-actions">
     <button class="btn btn-sm btn-secondary" (click)="onRefresh()">Refresh</button>
     <button class="btn btn-sm btn-secondary" (click)="onClear()">Clear</button>

projects/firefox/src/app/components/home/logs/logs.component.scss

@@ -2,26 +2,26 @@
   height: 100%;
   display: flex;
   flex-direction: column;
-  padding: var(--size);
+  padding-top: var(--size);
+  padding-bottom: var(--size);
   overflow: hidden;
-}
 
-.logs-header {
+  > *:not(.sam-text-header) {
-  display: flex;
+    margin-left: var(--size);
-  justify-content: space-between;
+    margin-right: var(--size);
-  align-items: center;
+  }
+
+  .sam-text-header {
     margin-bottom: var(--size);
     flex-shrink: 0;
-}
 
-.logs-actions {
+    .logs-actions {
+      position: absolute;
+      right: 0;
       display: flex;
       gap: 8px;
-}
+    }
-
+  }
-.logs-title {
-  font-weight: 600;
-  font-size: 1.1rem;
 }
 
 .logs-container {

projects/firefox/src/app/components/home/logs/logs.component.ts

@@ -1,5 +1,6 @@
 import { Component, inject, OnInit } from '@angular/core';
-import { LoggerService, LogEntry } from '@common';
+import { Router } from '@angular/router';
+import { LoggerService, LogEntry, StorageService } from '@common';
 import { DatePipe } from '@angular/common';
 
 @Component({
@@ -10,6 +11,8 @@ import { DatePipe } from '@angular/common';
 })
 export class LogsComponent implements OnInit {
   readonly #logger = inject(LoggerService);
+  readonly #storage = inject(StorageService);
+  readonly #router = inject(Router);
 
   get logs(): LogEntry[] {
     return this.#logger.logs;
@@ -40,4 +43,10 @@ export class LogsComponent implements OnInit {
         return 'log-info';
     }
   }
+
+  async onClickLock() {
+    this.#logger.logVaultLock();
+    await this.#storage.lockVault();
+    this.#router.navigateByUrl('/vault-login');
+  }
 }

projects/firefox/src/app/components/home/settings/settings.component.html

@@ -1,4 +1,7 @@
 <div class="sam-text-header">
+  <button class="lock-btn" title="Lock" (click)="onClickLock()">
+    <span class="emoji">🔒</span>
+  </button>
   <span> Settings </span>
 </div>
 
@@ -12,6 +15,9 @@
   Import Vault
 </button>
 
+<lib-nav-item text="🪵 Logs" (click)="navigate('/home/logs')"></lib-nav-item>
+<lib-nav-item text="💡 Info" (click)="navigate('/home/info')"></lib-nav-item>
+
 <div class="sam-flex-grow"></div>
 
 <button

projects/firefox/src/app/components/home/settings/settings.component.scss

@@ -4,8 +4,11 @@
   flex-direction: column;
   row-gap: var(--size);
   overflow-y: auto;
-  padding-left: var(--size);
+
-  padding-right: var(--size);
+  > *:not(.sam-text-header) {
+    margin-left: var(--size);
+    margin-right: var(--size);
+  }
 
   .file-input {
     position: absolute;

projects/firefox/src/app/components/home/settings/settings.component.ts

@@ -1,10 +1,12 @@
 import { Component, inject, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
 import {
   BrowserSyncFlow,
   ConfirmComponent,
   DateHelper,
   LoggerService,
   NavComponent,
+  NavItemComponent,
   StartupService,
   StorageService,
 } from '@common';
@@ -12,11 +14,12 @@ import { getNewStorageServiceConfig } from '../../../common/data/get-new-storage
 
 @Component({
   selector: 'app-settings',
-  imports: [ConfirmComponent],
+  imports: [ConfirmComponent, NavItemComponent],
   templateUrl: './settings.component.html',
   styleUrl: './settings.component.scss',
 })
 export class SettingsComponent extends NavComponent implements OnInit {
+  readonly #router = inject(Router);
   syncFlow: string | undefined;
 
   readonly #storage = inject(StorageService);
@@ -74,4 +77,10 @@ export class SettingsComponent extends NavComponent implements OnInit {
     downloadAnchorNode.click();
     downloadAnchorNode.remove();
   }
+
+  async onClickLock() {
+    this.#logger.logVaultLock();
+    await this.#storage.lockVault();
+    this.#router.navigateByUrl('/vault-login');
+  }
 }