alee/relicario
1
0
Fork 0
Code Issues Pull Requests 4 Actions Packages Projects Releases Wiki Activity

feat(ext/popup): rewrite generator as inline panel with ✨ trigger

Browse Source 
The popover (which clipped off the popup edge) becomes an inline panel
that mounts inside the form (login.ts) or settings section
(settings-vault.ts). Trigger button is ✨ with aria-expanded toggling.
Action row varies by context: fill-field has cancel+use; configure-
defaults has only the save-default link. Escape key closes the panel.
Tests adapted to new API; 3 new tests for aria-expanded, auto-generate,
and Escape behavior.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
adlee-was-taken
2026-04-24 23:30:55 -04:00
parent b03058abd9
commit ac15f060e9
5 changed files with 348 additions and 206 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
extension/src/popup/components/settings-vault.ts
View File

@@ -6,7 +6,7 @@ import { getState, setState, sendMessage, navigate, escapeHtml } from '../popup'
import type {
VaultSettings, TrashRetention, HistoryRetention, GeneratorRequest,
} from '../../shared/types';
import { openGeneratorPopover } from './generator-panel';
import { openGeneratorPanel, closeGeneratorPanel, isGeneratorPanelOpen } from './generator-panel';
let pendingSettings: VaultSettings | null = null;
let activeKeyHandler: ((e: KeyboardEvent) => void) | null = null;
@@ -128,7 +128,7 @@ export function renderVaultSettings(app: HTMLElement): void {
<div class="settings-section">
<div class="settings-section__title">generator</div>
<p class="gen-preview-line">${escapeHtml(generatorSummary(pendingSettings.generator_defaults))}</p>
<button class="btn" id="configure-gen">configure ▾</button>
<button class="gen-trigger" id="configure-gen" type="button" title="configure generator defaults" aria-expanded="false">✨</button>
</div>
<div class="settings-section">
@@ -194,12 +194,18 @@ export function renderVaultSettings(app: HTMLElement): void {
});
document.getElementById('configure-gen')?.addEventListener('click', (e) => {
if (!pendingSettings) return;
const anchor = e.currentTarget as HTMLElement;
openGeneratorPopover({
anchor,
const trigger = e.currentTarget as HTMLElement;
if (isGeneratorPanelOpen()) {
closeGeneratorPanel();
return;
}
const generatorSection = trigger.closest('.settings-section') as HTMLElement | null;
if (!generatorSection || pendingSettings === null) return;
openGeneratorPanel({
parent: generatorSection,
trigger,
initial: pendingSettings.generator_defaults,
onPicked: () => {/* no-op — user is here to save as default, not pick */},
context: 'configure-defaults',
});
});