586e2ab23f
- 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>
80 lines
2.3 KiB
HTML
80 lines
2.3 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">
|
||
<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>
|
||
<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>
|