3750e99e61
- 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>
73 lines
2.1 KiB
HTML
73 lines
2.1 KiB
HTML
<!-- 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="add-btn" title="New Identity" (click)="onClickNewIdentity()">
|
||
<span class="emoji">➕</span>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="reckless-mode-row">
|
||
<label class="reckless-label" (click)="onToggleRecklessMode()">
|
||
<input
|
||
type="checkbox"
|
||
[checked]="isRecklessMode"
|
||
(click)="$event.stopPropagation()"
|
||
(change)="onToggleRecklessMode()"
|
||
/>
|
||
<span
|
||
class="reckless-text"
|
||
data-bs-toggle="tooltip"
|
||
data-bs-placement="bottom"
|
||
title="Auto-approve all actions. If whitelist has entries, only those apps are auto-approved."
|
||
>Reckless mode</span>
|
||
</label>
|
||
<button
|
||
class="gear-btn"
|
||
title="Manage whitelisted apps"
|
||
(click)="onClickWhitelistedApps()"
|
||
>
|
||
<span class="emoji">⚙️</span>
|
||
</button>
|
||
</div>
|
||
|
||
@let sessionData = storage.getBrowserSessionHandler().browserSessionData;
|
||
@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.id) {
|
||
@let isSelected = identity.id === sessionData?.selectedIdentityId;
|
||
<div
|
||
class="identity"
|
||
[class.selected]="isSelected"
|
||
(click)="onClickSelectIdentity(identity.id)"
|
||
>
|
||
<img
|
||
class="avatar"
|
||
[src]="getAvatarUrl(identity)"
|
||
alt=""
|
||
(error)="$any($event.target).src = 'person-fill.svg'"
|
||
/>
|
||
<span class="name">{{ getDisplayName(identity) }}</span>
|
||
<lib-icon-button
|
||
icon="⚙️"
|
||
title="Identity settings"
|
||
(click)="onClickEditIdentity(identity.id, $event)"
|
||
></lib-icon-button>
|
||
</div>
|
||
}
|
||
|
||
<lib-toast #toast></lib-toast>
|