From 1491ac13afacab0a9ca22975eb29625e708cc36e Mon Sep 17 00:00:00 2001
From: mleku <me@mleku.dev>
Date: Fri, 19 Dec 2025 09:07:36 +0100
Subject: [PATCH] Release v0.0.7 - Identity list UI redesign with avatars
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Redesign identities list to show avatar and display name from Nostr profile
- Replace star icon selection with clickable row for identity switching
- Add gear icon for direct access to identity settings
- Highlight selected identity with primary color border
- Remove credits box from information tab
- Add rebuild instruction to CLAUDE.md
- Clean up unused imports in info components
- Replace HTML autofocus with programmatic focus for accessibility

Files modified:
- CLAUDE.md
- package.json
- projects/chrome/src/app/components/home/identities/*
- projects/chrome/src/app/components/home/info/*
- projects/chrome/src/app/components/vault-login/*
- projects/firefox/src/app/components/home/identities/*
- projects/firefox/src/app/components/home/info/*
- projects/firefox/src/app/components/vault-login/*

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 CLAUDE.md                                     |  5 ++
 package.json                                  |  6 +-
 projects/chrome/public/manifest.json          |  2 +-
 .../home/identities/identities.component.html | 72 ++++++-------------
 .../home/identities/identities.component.scss | 47 ++++++++----
 .../home/identities/identities.component.ts   | 44 ++++++++++--
 .../components/home/info/info.component.html  | 16 -----
 .../components/home/info/info.component.ts    |  2 -
 .../vault-login/vault-login.component.html    |  1 -
 .../vault-login/vault-login.component.ts      | 10 ++-
 projects/firefox/public/manifest.json         |  2 +-
 .../home/identities/identities.component.html | 72 ++++++-------------
 .../home/identities/identities.component.scss | 47 ++++++++----
 .../home/identities/identities.component.ts   | 44 ++++++++++--
 .../components/home/info/info.component.html  | 16 -----
 .../components/home/info/info.component.ts    |  2 -
 .../vault-login/vault-login.component.html    |  1 -
 .../vault-login/vault-login.component.ts      | 10 ++-
 18 files changed, 208 insertions(+), 191 deletions(-)

diff --git a/CLAUDE.md b/CLAUDE.md
index 802dedf..9324114 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -18,6 +18,11 @@ npm test                  # Run unit tests with Karma
 npm run lint              # Run ESLint
 ```
 
+**Important:** After making any code changes, rebuild both extensions before testing:
+```bash
+npm run build:chrome && npm run build:firefox
+```
+
 ## Architecture
 
 ### Monorepo Structure
diff --git a/package.json b/package.json
index 86e072d..a17d021 100644
--- a/package.json
+++ b/package.json
@@ -1,12 +1,12 @@
 {
   "name": "plebeian-signer",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "custom": {
     "chrome": {
-      "version": "0.0.6"
+      "version": "0.0.7"
     },
     "firefox": {
-      "version": "0.0.6"
+      "version": "0.0.7"
     }
   },
   "scripts": {
diff --git a/projects/chrome/public/manifest.json b/projects/chrome/public/manifest.json
index a167979..56f87ff 100644
--- a/projects/chrome/public/manifest.json
+++ b/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": "0.0.6",
+  "version": "0.0.7",
   "homepage_url": "https://git.mleku.dev/mleku/plebeian-signer",
   "options_page": "options.html",
   "permissions": [
diff --git a/projects/chrome/src/app/components/home/identities/identities.component.html b/projects/chrome/src/app/components/home/identities/identities.component.html
index 528c186..aae8b09 100644
--- a/projects/chrome/src/app/components/home/identities/identities.component.html
+++ b/projects/chrome/src/app/components/home/identities/identities.component.html
@@ -1,7 +1,7 @@
 <!-- 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">
-  <span class="text">Identities </span>
+  <span class="text">Identities</span>
 
   <button class="button btn btn-primary btn-sm" (click)="onClickNewIdentity()">
     <div class="sam-flex-row gap-h">
@@ -12,67 +12,37 @@
 </div>
 
 @let sessionData = storage.getBrowserSessionHandler().browserSessionData;
-<!-- - -->
-@let identities = sessionData?.identities ?? []; @if(identities.length === 0) {
-<div
-  style="
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-  "
->
+@let identities = sessionData?.identities ?? [];
+
+@if(identities.length === 0) {
+<div class="empty-state">
   <span class="sam-text-muted">
     Create your first identity by clicking on the button in the upper right
     corner.
   </span>
 </div>
+}
 
-} @for(identity of identities; track identity) {
-<div
-  class="identity"
-  style="overflow: hidden"
-  (click)="onClickEditIdentity(identity)"
->
+@for(identity of identities; track identity.id) {
   @let isSelected = identity.id === sessionData?.selectedIdentityId;
-
-  <span
-    class="no-select"
-    style="overflow-x: hidden; text-overflow: ellipsis; white-space: nowrap"
-    [class.not-active]="!isSelected"
+  <div
+    class="identity"
+    [class.selected]="isSelected"
+    (click)="onClickSelectIdentity(identity.id)"
   >
-    {{ identity.nick }}
-  </span>
-
-  <div class="sam-flex-grow"></div>
-
-  @if(isSelected) {
-  <lib-icon-button
-    icon="star-fill"
-    title="Edit identity"
-    style="pointer-events: none; color: var(--bs-pink)"
-  ></lib-icon-button>
-  }
-
-  <div class="buttons sam-flex-row gap-h">
-    @if(!isSelected) {
+    <img
+      class="avatar"
+      [src]="getAvatarUrl(identity)"
+      alt=""
+      (error)="$any($event.target).src = 'assets/person-fill.svg'"
+    />
+    <span class="name">{{ getDisplayName(identity) }}</span>
     <lib-icon-button
-      icon="star-fill"
-      title="Select identity"
-      (click)="
-        onClickSwitchIdentity(identity.id, $event);
-        toast.show('Identity changed')
-      "
+      icon="gear"
+      title="Identity settings"
+      (click)="onClickEditIdentity(identity.id, $event)"
     ></lib-icon-button>
-    }
   </div>
-  <lib-icon-button
-    icon="arrow-right"
-    title="Edit identity"
-    style="pointer-events: none"
-  ></lib-icon-button>
-</div>
 }
 
 <lib-toast #toast></lib-toast>
diff --git a/projects/chrome/src/app/components/home/identities/identities.component.scss b/projects/chrome/src/app/components/home/identities/identities.component.scss
index b95c809..2712224 100644
--- a/projects/chrome/src/app/components/home/identities/identities.component.scss
+++ b/projects/chrome/src/app/components/home/identities/identities.component.scss
@@ -35,34 +35,53 @@
     }
   }
 
+  .empty-state {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+  }
+
   .identity {
-    height: 48px;
-    min-height: 48px;
+    height: 56px;
+    min-height: 56px;
     display: flex;
     flex-direction: row;
     align-items: center;
-    padding-left: 16px;
+    gap: 12px;
+    padding-left: 12px;
     padding-right: 8px;
     background: var(--background-light);
     border-radius: 8px;
     margin-bottom: 8px;
     cursor: pointer;
-
-    .not-active {
-      //color: #525b6a;
-      opacity: 0.4;
-    }
+    transition: background-color 0.15s ease;
 
     &:hover {
       background: var(--background-light-hover);
-
-      .buttons {
-        visibility: visible;
-      }
     }
 
-    .buttons {
-      visibility: hidden;
+    &.selected {
+      background: rgba(255, 62, 181, 0.15);
+      border: 1px solid var(--primary);
+    }
+
+    .avatar {
+      width: 36px;
+      height: 36px;
+      border-radius: 50%;
+      object-fit: cover;
+      flex-shrink: 0;
+      background: var(--muted);
+    }
+
+    .name {
+      flex-grow: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-weight: 500;
     }
   }
 }
diff --git a/projects/chrome/src/app/components/home/identities/identities.component.ts b/projects/chrome/src/app/components/home/identities/identities.component.ts
index 40bc5b8..3ebe650 100644
--- a/projects/chrome/src/app/components/home/identities/identities.component.ts
+++ b/projects/chrome/src/app/components/home/identities/identities.component.ts
@@ -1,8 +1,11 @@
-import { Component, inject } from '@angular/core';
+import { Component, inject, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import {
   IconButtonComponent,
   Identity_DECRYPTED,
+  NostrHelper,
+  ProfileMetadata,
+  ProfileMetadataService,
   StorageService,
   ToastComponent,
 } from '@common';
@@ -13,21 +16,48 @@ import {
   styleUrl: './identities.component.scss',
   imports: [IconButtonComponent, ToastComponent],
 })
-export class IdentitiesComponent {
+export class IdentitiesComponent implements OnInit {
   readonly storage = inject(StorageService);
-
   readonly #router = inject(Router);
+  readonly #profileMetadata = inject(ProfileMetadataService);
+
+  // Cache of pubkey -> profile for quick lookup
+  #profileCache = new Map<string, ProfileMetadata | null>();
+
+  async ngOnInit() {
+    await this.#profileMetadata.initialize();
+    this.#loadProfiles();
+  }
+
+  #loadProfiles() {
+    const identities = this.storage.getBrowserSessionHandler().browserSessionData?.identities ?? [];
+    for (const identity of identities) {
+      const pubkey = NostrHelper.pubkeyFromPrivkey(identity.privkey);
+      const profile = this.#profileMetadata.getCachedProfile(pubkey);
+      this.#profileCache.set(identity.id, profile);
+    }
+  }
+
+  getAvatarUrl(identity: Identity_DECRYPTED): string {
+    const profile = this.#profileCache.get(identity.id);
+    return profile?.picture || 'assets/person-fill.svg';
+  }
+
+  getDisplayName(identity: Identity_DECRYPTED): string {
+    const profile = this.#profileCache.get(identity.id) ?? null;
+    return this.#profileMetadata.getDisplayName(profile) || identity.nick;
+  }
 
   onClickNewIdentity() {
     this.#router.navigateByUrl('/new-identity');
   }
 
-  onClickEditIdentity(identity: Identity_DECRYPTED) {
-    this.#router.navigateByUrl(`/edit-identity/${identity.id}/home`);
+  onClickEditIdentity(identityId: string, event: MouseEvent) {
+    event.stopPropagation();
+    this.#router.navigateByUrl(`/edit-identity/${identityId}/home`);
   }
 
-  async onClickSwitchIdentity(identityId: string, event: MouseEvent) {
-    event.stopPropagation();
+  async onClickSelectIdentity(identityId: string) {
     await this.storage.switchIdentity(identityId);
   }
 }
diff --git a/projects/chrome/src/app/components/home/info/info.component.html b/projects/chrome/src/app/components/home/info/info.component.html
index fac19a9..8ed3a13 100644
--- a/projects/chrome/src/app/components/home/info/info.component.html
+++ b/projects/chrome/src/app/components/home/info/info.component.html
@@ -14,19 +14,3 @@
   git.mleku.dev/mleku/plebeian-signer
 </a>
 
-<div class="sam-flex-grow"></div>
-
-<div class="sam-card sam-mb" style="align-items: center">
-  <span>
-    Made with <i class="bi bi-heart-fill" style="color: red"></i> by
-    <a href="https://sam-hayes.org" target="_blank">Sam Hayes</a>
-  </span>
-
-  <lib-pubkey
-    class="sam-mt-h"
-    value="npub1tgyjshvelwj73t3jy0n3xllgt03elkapfl3k3n0x2wkunegkgrwssfp0u4"
-    (click)="toast.show('Copied to clipboard')"
-  ></lib-pubkey>
-</div>
-
-<lib-toast #toast [bottom]="188"></lib-toast>
diff --git a/projects/chrome/src/app/components/home/info/info.component.ts b/projects/chrome/src/app/components/home/info/info.component.ts
index 24ef984..c0080d2 100644
--- a/projects/chrome/src/app/components/home/info/info.component.ts
+++ b/projects/chrome/src/app/components/home/info/info.component.ts
@@ -1,10 +1,8 @@
 import { Component } from '@angular/core';
-import { PubkeyComponent, ToastComponent } from '@common';
 import packageJson from '../../../../../../../package.json';
 
 @Component({
   selector: 'app-info',
-  imports: [PubkeyComponent, ToastComponent],
   templateUrl: './info.component.html',
   styleUrl: './info.component.scss',
 })
diff --git a/projects/chrome/src/app/components/vault-login/vault-login.component.html b/projects/chrome/src/app/components/vault-login/vault-login.component.html
index 829bdfa..667cb4e 100644
--- a/projects/chrome/src/app/components/vault-login/vault-login.component.html
+++ b/projects/chrome/src/app/components/vault-login/vault-login.component.html
@@ -16,7 +16,6 @@
         placeholder="vault password"
         [(ngModel)]="loginPassword"
         (keyup.enter)="loginPassword && loginVault()"
-        autofocus
       />
       <button
         class="btn btn-outline-secondary"
diff --git a/projects/chrome/src/app/components/vault-login/vault-login.component.ts b/projects/chrome/src/app/components/vault-login/vault-login.component.ts
index 5e68526..cad1862 100644
--- a/projects/chrome/src/app/components/vault-login/vault-login.component.ts
+++ b/projects/chrome/src/app/components/vault-login/vault-login.component.ts
@@ -1,4 +1,4 @@
-import { Component, inject } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, inject, ViewChild } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { Router } from '@angular/router';
 import {
@@ -16,7 +16,9 @@ import { getNewStorageServiceConfig } from '../../common/data/get-new-storage-se
   styleUrl: './vault-login.component.scss',
   imports: [FormsModule, ConfirmComponent],
 })
-export class VaultLoginComponent {
+export class VaultLoginComponent implements AfterViewInit {
+  @ViewChild('passwordInputElement') passwordInput!: ElementRef<HTMLInputElement>;
+
   loginPassword = '';
   showInvalidPasswordAlert = false;
 
@@ -25,6 +27,10 @@ export class VaultLoginComponent {
   readonly #startup = inject(StartupService);
   readonly #profileMetadata = inject(ProfileMetadataService);
 
+  ngAfterViewInit() {
+    this.passwordInput.nativeElement.focus();
+  }
+
   toggleType(element: HTMLInputElement) {
     if (element.type === 'password') {
       element.type = 'text';
diff --git a/projects/firefox/public/manifest.json b/projects/firefox/public/manifest.json
index 845a572..7616b99 100644
--- a/projects/firefox/public/manifest.json
+++ b/projects/firefox/public/manifest.json
@@ -2,7 +2,7 @@
   "manifest_version": 3,
   "name": "Plebeian Signer",
   "description": "Nostr Identity Manager & Signer",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "homepage_url": "https://git.mleku.dev/mleku/plebeian-signer",
   "options_page": "options.html",
   "permissions": [
diff --git a/projects/firefox/src/app/components/home/identities/identities.component.html b/projects/firefox/src/app/components/home/identities/identities.component.html
index 528c186..aae8b09 100644
--- a/projects/firefox/src/app/components/home/identities/identities.component.html
+++ b/projects/firefox/src/app/components/home/identities/identities.component.html
@@ -1,7 +1,7 @@
 <!-- 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">
-  <span class="text">Identities </span>
+  <span class="text">Identities</span>
 
   <button class="button btn btn-primary btn-sm" (click)="onClickNewIdentity()">
     <div class="sam-flex-row gap-h">
@@ -12,67 +12,37 @@
 </div>
 
 @let sessionData = storage.getBrowserSessionHandler().browserSessionData;
-<!-- - -->
-@let identities = sessionData?.identities ?? []; @if(identities.length === 0) {
-<div
-  style="
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-  "
->
+@let identities = sessionData?.identities ?? [];
+
+@if(identities.length === 0) {
+<div class="empty-state">
   <span class="sam-text-muted">
     Create your first identity by clicking on the button in the upper right
     corner.
   </span>
 </div>
+}
 
-} @for(identity of identities; track identity) {
-<div
-  class="identity"
-  style="overflow: hidden"
-  (click)="onClickEditIdentity(identity)"
->
+@for(identity of identities; track identity.id) {
   @let isSelected = identity.id === sessionData?.selectedIdentityId;
-
-  <span
-    class="no-select"
-    style="overflow-x: hidden; text-overflow: ellipsis; white-space: nowrap"
-    [class.not-active]="!isSelected"
+  <div
+    class="identity"
+    [class.selected]="isSelected"
+    (click)="onClickSelectIdentity(identity.id)"
   >
-    {{ identity.nick }}
-  </span>
-
-  <div class="sam-flex-grow"></div>
-
-  @if(isSelected) {
-  <lib-icon-button
-    icon="star-fill"
-    title="Edit identity"
-    style="pointer-events: none; color: var(--bs-pink)"
-  ></lib-icon-button>
-  }
-
-  <div class="buttons sam-flex-row gap-h">
-    @if(!isSelected) {
+    <img
+      class="avatar"
+      [src]="getAvatarUrl(identity)"
+      alt=""
+      (error)="$any($event.target).src = 'assets/person-fill.svg'"
+    />
+    <span class="name">{{ getDisplayName(identity) }}</span>
     <lib-icon-button
-      icon="star-fill"
-      title="Select identity"
-      (click)="
-        onClickSwitchIdentity(identity.id, $event);
-        toast.show('Identity changed')
-      "
+      icon="gear"
+      title="Identity settings"
+      (click)="onClickEditIdentity(identity.id, $event)"
     ></lib-icon-button>
-    }
   </div>
-  <lib-icon-button
-    icon="arrow-right"
-    title="Edit identity"
-    style="pointer-events: none"
-  ></lib-icon-button>
-</div>
 }
 
 <lib-toast #toast></lib-toast>
diff --git a/projects/firefox/src/app/components/home/identities/identities.component.scss b/projects/firefox/src/app/components/home/identities/identities.component.scss
index b95c809..2712224 100644
--- a/projects/firefox/src/app/components/home/identities/identities.component.scss
+++ b/projects/firefox/src/app/components/home/identities/identities.component.scss
@@ -35,34 +35,53 @@
     }
   }
 
+  .empty-state {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+  }
+
   .identity {
-    height: 48px;
-    min-height: 48px;
+    height: 56px;
+    min-height: 56px;
     display: flex;
     flex-direction: row;
     align-items: center;
-    padding-left: 16px;
+    gap: 12px;
+    padding-left: 12px;
     padding-right: 8px;
     background: var(--background-light);
     border-radius: 8px;
     margin-bottom: 8px;
     cursor: pointer;
-
-    .not-active {
-      //color: #525b6a;
-      opacity: 0.4;
-    }
+    transition: background-color 0.15s ease;
 
     &:hover {
       background: var(--background-light-hover);
-
-      .buttons {
-        visibility: visible;
-      }
     }
 
-    .buttons {
-      visibility: hidden;
+    &.selected {
+      background: rgba(255, 62, 181, 0.15);
+      border: 1px solid var(--primary);
+    }
+
+    .avatar {
+      width: 36px;
+      height: 36px;
+      border-radius: 50%;
+      object-fit: cover;
+      flex-shrink: 0;
+      background: var(--muted);
+    }
+
+    .name {
+      flex-grow: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-weight: 500;
     }
   }
 }
diff --git a/projects/firefox/src/app/components/home/identities/identities.component.ts b/projects/firefox/src/app/components/home/identities/identities.component.ts
index a7c42f9..2c4b97a 100644
--- a/projects/firefox/src/app/components/home/identities/identities.component.ts
+++ b/projects/firefox/src/app/components/home/identities/identities.component.ts
@@ -1,8 +1,11 @@
-import { Component, inject } from '@angular/core';
+import { Component, inject, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import {
   IconButtonComponent,
   Identity_DECRYPTED,
+  NostrHelper,
+  ProfileMetadata,
+  ProfileMetadataService,
   StorageService,
   ToastComponent,
 } from '@common';
@@ -13,21 +16,48 @@ import {
   templateUrl: './identities.component.html',
   styleUrl: './identities.component.scss',
 })
-export class IdentitiesComponent {
+export class IdentitiesComponent implements OnInit {
   readonly storage = inject(StorageService);
-
   readonly #router = inject(Router);
+  readonly #profileMetadata = inject(ProfileMetadataService);
+
+  // Cache of pubkey -> profile for quick lookup
+  #profileCache = new Map<string, ProfileMetadata | null>();
+
+  async ngOnInit() {
+    await this.#profileMetadata.initialize();
+    this.#loadProfiles();
+  }
+
+  #loadProfiles() {
+    const identities = this.storage.getBrowserSessionHandler().browserSessionData?.identities ?? [];
+    for (const identity of identities) {
+      const pubkey = NostrHelper.pubkeyFromPrivkey(identity.privkey);
+      const profile = this.#profileMetadata.getCachedProfile(pubkey);
+      this.#profileCache.set(identity.id, profile);
+    }
+  }
+
+  getAvatarUrl(identity: Identity_DECRYPTED): string {
+    const profile = this.#profileCache.get(identity.id);
+    return profile?.picture || 'assets/person-fill.svg';
+  }
+
+  getDisplayName(identity: Identity_DECRYPTED): string {
+    const profile = this.#profileCache.get(identity.id) ?? null;
+    return this.#profileMetadata.getDisplayName(profile) || identity.nick;
+  }
 
   onClickNewIdentity() {
     this.#router.navigateByUrl('/new-identity');
   }
 
-  onClickEditIdentity(identity: Identity_DECRYPTED) {
-    this.#router.navigateByUrl(`/edit-identity/${identity.id}/home`);
+  onClickEditIdentity(identityId: string, event: MouseEvent) {
+    event.stopPropagation();
+    this.#router.navigateByUrl(`/edit-identity/${identityId}/home`);
   }
 
-  async onClickSwitchIdentity(identityId: string, event: MouseEvent) {
-    event.stopPropagation();
+  async onClickSelectIdentity(identityId: string) {
     await this.storage.switchIdentity(identityId);
   }
 }
diff --git a/projects/firefox/src/app/components/home/info/info.component.html b/projects/firefox/src/app/components/home/info/info.component.html
index 02a27dc..eb126e2 100644
--- a/projects/firefox/src/app/components/home/info/info.component.html
+++ b/projects/firefox/src/app/components/home/info/info.component.html
@@ -11,19 +11,3 @@
   git.mleku.dev/mleku/plebeian-signer
 </a>
 
-<div class="sam-flex-grow"></div>
-
-<div class="sam-card sam-mb" style="align-items: center">
-  <span>
-    Made with <i class="bi bi-heart-fill" style="color: red"></i> by
-    <a href="https://sam-hayes.org" target="_blank">Sam Hayes</a>
-  </span>
-
-  <lib-pubkey
-    class="sam-mt-h"
-    value="npub1tgyjshvelwj73t3jy0n3xllgt03elkapfl3k3n0x2wkunegkgrwssfp0u4"
-    (click)="toast.show('Copied to clipboard')"
-  ></lib-pubkey>
-</div>
-
-<lib-toast #toast [bottom]="188"></lib-toast>
diff --git a/projects/firefox/src/app/components/home/info/info.component.ts b/projects/firefox/src/app/components/home/info/info.component.ts
index bd38e84..02b3244 100644
--- a/projects/firefox/src/app/components/home/info/info.component.ts
+++ b/projects/firefox/src/app/components/home/info/info.component.ts
@@ -1,10 +1,8 @@
 import { Component } from '@angular/core';
-import { PubkeyComponent, ToastComponent } from '@common';
 import packageJson from '../../../../../../../package.json';
 
 @Component({
   selector: 'app-info',
-  imports: [PubkeyComponent, ToastComponent],
   templateUrl: './info.component.html',
   styleUrl: './info.component.scss',
 })
diff --git a/projects/firefox/src/app/components/vault-login/vault-login.component.html b/projects/firefox/src/app/components/vault-login/vault-login.component.html
index 829bdfa..667cb4e 100644
--- a/projects/firefox/src/app/components/vault-login/vault-login.component.html
+++ b/projects/firefox/src/app/components/vault-login/vault-login.component.html
@@ -16,7 +16,6 @@
         placeholder="vault password"
         [(ngModel)]="loginPassword"
         (keyup.enter)="loginPassword && loginVault()"
-        autofocus
       />
       <button
         class="btn btn-outline-secondary"
diff --git a/projects/firefox/src/app/components/vault-login/vault-login.component.ts b/projects/firefox/src/app/components/vault-login/vault-login.component.ts
index 5e68526..cad1862 100644
--- a/projects/firefox/src/app/components/vault-login/vault-login.component.ts
+++ b/projects/firefox/src/app/components/vault-login/vault-login.component.ts
@@ -1,4 +1,4 @@
-import { Component, inject } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, inject, ViewChild } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { Router } from '@angular/router';
 import {
@@ -16,7 +16,9 @@ import { getNewStorageServiceConfig } from '../../common/data/get-new-storage-se
   styleUrl: './vault-login.component.scss',
   imports: [FormsModule, ConfirmComponent],
 })
-export class VaultLoginComponent {
+export class VaultLoginComponent implements AfterViewInit {
+  @ViewChild('passwordInputElement') passwordInput!: ElementRef<HTMLInputElement>;
+
   loginPassword = '';
   showInvalidPasswordAlert = false;
 
@@ -25,6 +27,10 @@ export class VaultLoginComponent {
   readonly #startup = inject(StartupService);
   readonly #profileMetadata = inject(ProfileMetadataService);
 
+  ngAfterViewInit() {
+    this.passwordInput.nativeElement.focus();
+  }
+
   toggleType(element: HTMLInputElement) {
     if (element.type === 'password') {
       element.type = 'text';