Release v1.0.8 - Add wallet tab and UI improvements

- Add new wallet tab with placeholder for future functionality
- Reorder bottom tabs: You, Identities, Wallet, Bookmarks, Settings
- Move Reset Extension button to bottom-right corner on login page
- Improve header layout consistency across all pages
- Add custom scrollbar styling for Chrome (thin, dark track, light thumb)
- Update edit button to use emoji icon on identity page
- Fix horizontal overflow issues in global styles

Files modified:
- package.json (version bump)
- projects/{chrome,firefox}/src/app/app.routes.ts (wallet route)
- projects/{chrome,firefox}/src/app/components/home/wallet/* (new)
- projects/{chrome,firefox}/src/app/components/home/home.component.* (tabs)
- projects/{chrome,firefox}/src/app/components/vault-login/* (reset btn)
- projects/{chrome,firefox}/src/styles.scss (scrollbar, overflow)
- Various component HTML/SCSS files (header consistency)

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

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

projects/chrome/src/app/app.routes.ts

@@ -11,6 +11,7 @@ import { InfoComponent } from './components/home/info/info.component';
 import { SettingsComponent } from './components/home/settings/settings.component';
 import { LogsComponent } from './components/home/logs/logs.component';
 import { BookmarksComponent } from './components/home/bookmarks/bookmarks.component';
+import { WalletComponent } from './components/home/wallet/wallet.component';
 import { NewIdentityComponent } from './components/new-identity/new-identity.component';
 import { EditIdentityComponent } from './components/edit-identity/edit-identity.component';
 import { HomeComponent as EditIdentityHomeComponent } from './components/edit-identity/home/home.component';
@@ -76,6 +77,10 @@ export const routes: Routes = [
         path: 'bookmarks',
         component: BookmarksComponent,
       },
+      {
+        path: 'wallet',
+        component: WalletComponent,
+      },
     ],
   },
   {

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

@@ -5,8 +5,8 @@
     <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 class="add-btn" title="Bookmark This Page" (click)="onBookmarkThisPage()">
+    <span class="emoji">➕</span>
   </button>
 </div>
 

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

@@ -15,9 +15,26 @@
     margin-bottom: var(--size);
     flex-shrink: 0;
 
-    .action-btn {
+    .add-btn {
       position: absolute;
       right: 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;
+      }
     }
   }
 }

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

@@ -3,34 +3,23 @@
 </div>
 
 <div class="tabs">
-  <a
-    class="tab"
-    routerLink="/home/identity"
-    routerLinkActive="active"
-    title="Your selected identity"
-  >
+  <a class="tab" routerLink="/home/identity" routerLinkActive="active" title="You">
     <span class="emoji">👤</span>
   </a>
 
-  <a
-    class="tab"
-    routerLink="/home/identities"
-    routerLinkActive="active"
-    title="Identities"
-  >
+  <a class="tab" routerLink="/home/identities" routerLinkActive="active" title="Identities">
     <span class="emoji">👥</span>
   </a>
 
-  <a
-    class="tab"
-    routerLink="/home/settings"
-    routerLinkActive="active"
-    title="Settings"
-  >
-    <span class="emoji">⚙️</span>
+  <a class="tab" routerLink="/home/wallet" routerLinkActive="active" title="Wallet">
+    <span class="emoji">💰</span>
   </a>
 
   <a class="tab" routerLink="/home/bookmarks" routerLinkActive="active" title="Bookmarks">
     <span class="emoji">🔖</span>
   </a>
+
+  <a class="tab" routerLink="/home/settings" routerLinkActive="active" title="Settings">
+    <span class="emoji">⚙️</span>
+  </a>
 </div>

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

@@ -4,12 +4,12 @@
   flex-direction: column;
 
   .tab-content {
-    height: calc(100% - 40px);
+    height: calc(100% - 48px);
   }
 
   .tabs {
-    height: 40px;
-    min-height: 40px;
+    height: 48px;
+    min-height: 48px;
     background: var(--background-light);
     display: flex;
     flex-direction: row;
@@ -23,7 +23,6 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      font-size: 16px;
 
       color: var(--muted-foreground);
       border-top: 2px solid transparent;
@@ -31,6 +30,10 @@
 
       cursor: pointer;
 
+      .emoji {
+        font-size: 20px;
+      }
+
       &:hover {
         background: var(--background-light-hover);
         color: var(--foreground);

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

@@ -6,11 +6,8 @@
   </button>
   <span class="text">Identities</span>
 
-  <button class="button btn btn-primary btn-sm" (click)="onClickNewIdentity()">
-    <div class="sam-flex-row gap-h">
-      <i class="bi bi-plus-lg"></i>
-      <span>New</span>
-    </div>
+  <button class="add-btn" title="New Identity" (click)="onClickNewIdentity()">
+    <span class="emoji">➕</span>
   </button>
 </div>
 

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

@@ -19,9 +19,9 @@
     background: var(--background);
     position: relative;
 
-    .lock-btn {
+    .lock-btn,
+    .add-btn {
       position: absolute;
-      left: 0;
       background: transparent;
       border: none;
       padding: 8px;
@@ -41,8 +41,11 @@
       }
     }
 
-    .button {
-      position: absolute;
+    .lock-btn {
+      left: 0;
+    }
+
+    .add-btn {
       right: 0;
     }
 

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

@@ -6,7 +6,7 @@
   </button>
   <span>You</span>
   <button class="edit-btn" title="Edit profile" (click)="onClickEditProfile()">
-    <img src="edit.svg" alt="Edit" class="edit-icon" />
+    <span class="emoji">📝</span>
   </button>
 </div>
 

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

@@ -21,10 +21,8 @@
         background-color: var(--background-light);
       }
 
-      .edit-icon {
-        width: 20px;
-        height: 20px;
-        filter: brightness(0) invert(1);
+      .emoji {
+        font-size: 20px;
       }
     }
   }

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

@@ -4,8 +4,8 @@
   </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>
+    <button class="btn btn-sm btn-secondary" title="Refresh logs" (click)="onRefresh()">Refresh</button>
+    <button class="btn btn-sm btn-secondary" title="Clear logs" (click)="onClear()">Clear</button>
   </div>
 </div>
 

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

@@ -0,0 +1,14 @@
+<div class="sam-text-header">
+  <button class="lock-btn" title="Lock" (click)="onClickLock()">
+    <span class="emoji">🔒</span>
+  </button>
+  <span>Wallet</span>
+</div>
+
+<div class="wallet-container">
+  <div class="empty-state">
+    <span class="sam-text-muted">
+      Wallet functionality coming soon.
+    </span>
+  </div>
+</div>

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

@@ -0,0 +1,32 @@
+:host {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  padding-top: var(--size);
+  padding-bottom: var(--size);
+  overflow: hidden;
+
+  > *:not(.sam-text-header) {
+    margin-left: var(--size);
+    margin-right: var(--size);
+  }
+
+  .sam-text-header {
+    margin-bottom: var(--size);
+    flex-shrink: 0;
+  }
+}
+
+.wallet-container {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.empty-state {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  color: var(--muted-foreground);
+}

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

@@ -0,0 +1,21 @@
+import { Component, inject } from '@angular/core';
+import { Router } from '@angular/router';
+import { LoggerService, StorageService } from '@common';
+
+@Component({
+  selector: 'app-wallet',
+  templateUrl: './wallet.component.html',
+  styleUrl: './wallet.component.scss',
+  imports: [],
+})
+export class WalletComponent {
+  readonly #logger = inject(LoggerService);
+  readonly #storage = inject(StorageService);
+  readonly #router = inject(Router);
+
+  async onClickLock() {
+    this.#logger.logVaultLock();
+    await this.#storage.lockVault();
+    this.#router.navigateByUrl('/vault-login');
+  }
+}

projects/chrome/src/app/components/vault-login/vault-login.component.html

@@ -43,23 +43,22 @@
         <span>Sign in</span>
       </div>
     </button>
-
-    <button
-      class="sam-mt"
-      (click)="
-        confirm.show(
-          'Do you really want to reset the extension? All data will be lost.',
-          onClickResetExtension.bind(this)
-        )
-      "
-      type="button"
-      class="btn btn-link"
-    >
-      Reset Extension
-    </button>
   </div>
 </div>
 
+<button
+  class="reset-btn"
+  (click)="
+    confirm.show(
+      'Do you really want to reset the extension? All data will be lost.',
+      onClickResetExtension.bind(this)
+    )
+  "
+  type="button"
+>
+  Reset Extension
+</button>
+
 <!----------->
 <!-- ALERT -->
 <!----------->

projects/chrome/src/app/components/vault-login/vault-login.component.scss

@@ -3,6 +3,7 @@
   display: flex;
   flex-direction: column;
   justify-items: center;
+  position: relative;
 
   .logo-frame {
     border: 2px solid var(--secondary);
@@ -16,4 +17,21 @@
     justify-content: center;
     padding: 0 var(--size) var(--size) var(--size);
   }
+
+  .reset-btn {
+    position: absolute;
+    bottom: var(--size);
+    right: var(--size);
+    background: transparent;
+    border: none;
+    color: var(--muted-foreground);
+    font-size: 0.75rem;
+    cursor: pointer;
+    padding: 4px 8px;
+
+    &:hover {
+      color: var(--foreground);
+      text-decoration: underline;
+    }
+  }
 }

projects/chrome/src/styles.scss

@@ -18,6 +18,7 @@ body {
   background: var(--background);
 
   margin: 0;
+  overflow: hidden;
 }
 
 // Button styling to match market
@@ -128,3 +129,35 @@ button {
 .modal-body {
   color: #fafafa;
 }
+
+// Custom scrollbar styling for Chrome
+* {
+  // Thin scrollbar
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  // Track - black background, transparent by default
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  // Thumb - white, transparent by default
+  &::-webkit-scrollbar-thumb {
+    background: transparent;
+    border-radius: 3px;
+  }
+
+  // Show scrollbar on hover over scrollable area
+  &:hover::-webkit-scrollbar-track {
+    background: #1a1a1a;
+  }
+
+  &:hover::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.5);
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 255, 255, 0.7);
+  }
+}