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

refactor(ext/popup): renderFormHeader takes options object

Browse Source 
Whole-branch review recommendation: switch renderFormHeader's signature
from positional (titleText) to options ({ titleText }) so Phase 3 can
add 'dirty' (and any future hooks like a save-keybinding hint) without
touching all 7 call sites in lockstep with the unsaved-guard work.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
adlee-was-taken
2026-05-01 14:33:29 -04:00
parent 1454cd8165
commit ef7bd5b848
8 changed files with 14 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
extension/src/popup/components/form-header.ts
View File

@@ -1,17 +1,21 @@
/// Shared header chrome for typed form views (login, secure-note, identity, card,
/// key, totp, document). Renders the title row plus a fullscreen-only "esc to
/// cancel" subtitle. Use the existing `${...}` template-literal interpolation
/// at call sites: `${renderFormHeader('new login')}`.
/// at call sites: `${renderFormHeader({ titleText: 'new login' })}`.
///
/// item-form.ts (the type-selection screen) uses a different header structure
/// and does NOT consume this helper.
import { isInTab } from '../../shared/state';
export function renderFormHeader(titleText: string): string {
export interface FormHeaderOpts {
titleText: string;
}
export function renderFormHeader(opts: FormHeaderOpts): string {
return `
<div class="form-header">
<div class="detail-title">${titleText}</div>
<div class="detail-title">${opts.titleText}</div>
<span style="flex:1;"></span>
${isInTab() ? '' : '<button class="btn" id="popout-btn" title="Open in tab">⤴</button>'}
</div>

2
extension/src/popup/components/types/card.ts
View File

@@ -175,7 +175,7 @@ export function renderForm(app: HTMLElement, mode: 'add' | 'edit', existing: Ite
app.innerHTML = `
<div class="pad">
${renderFormHeader(mode === 'add' ? 'new card' : 'edit card')}
${renderFormHeader({ titleText: mode === 'add' ? 'new card' : 'edit card' })}
${state.error ? `<div class="error">${escapeHtml(state.error)}</div>` : ''}
<div class="form-group"><label class="label" for="f-title">title ${REQUIRED_PILL_HTML}</label>
<input id="f-title" type="text" value="${escapeHtml(title)}" placeholder="Amex Gold"></div>

2
extension/src/popup/components/types/document.ts
View File

@@ -86,7 +86,7 @@ export function renderForm(app: HTMLElement, mode: 'add' | 'edit', existing: Ite
app.innerHTML = `
<div class="pad">
${renderFormHeader(isEdit ? 'edit document' : 'new document')}
${renderFormHeader({ titleText: isEdit ? 'edit document' : 'new document' })}
${state.error ? `<div class="error">${escapeHtml(state.error)}</div>` : ''}
<div class="form-group">
<label class="label" for="f-title">title ${REQUIRED_PILL_HTML}</label>

2
extension/src/popup/components/types/identity.ts
View File

@@ -135,7 +135,7 @@ export function renderForm(app: HTMLElement, mode: 'add' | 'edit', existing: Ite
app.innerHTML = `
<div class="pad">
${renderFormHeader(mode === 'add' ? 'new identity' : 'edit identity')}
${renderFormHeader({ titleText: mode === 'add' ? 'new identity' : 'edit identity' })}
${state.error ? `<div class="error">${escapeHtml(state.error)}</div>` : ''}
<div class="form-group"><label class="label" for="f-title">title ${REQUIRED_PILL_HTML}</label>
<input id="f-title" type="text" value="${escapeHtml(title)}" placeholder="Aaron Lee · personal"></div>

2
extension/src/popup/components/types/key.ts
View File

@@ -124,7 +124,7 @@ export function renderForm(app: HTMLElement, mode: 'add' | 'edit', existing: Ite
app.innerHTML = `
<div class="pad">
${renderFormHeader(mode === 'add' ? 'new key' : 'edit key')}
${renderFormHeader({ titleText: mode === 'add' ? 'new key' : 'edit key' })}
${state.error ? `<div class="error">${escapeHtml(state.error)}</div>` : ''}
<div class="form-group"><label class="label" for="f-title">title ${REQUIRED_PILL_HTML}</label>
<input id="f-title" type="text" value="${escapeHtml(title)}" placeholder="github ssh"></div>

2
extension/src/popup/components/types/login.ts
View File

@@ -245,7 +245,7 @@ export function renderForm(app: HTMLElement, mode: 'add' | 'edit', existing: Ite
app.innerHTML = `
<div class="pad">
${renderFormHeader(mode === 'add' ? 'new login' : 'edit login')}
${renderFormHeader({ titleText: mode === 'add' ? 'new login' : 'edit login' })}
${state.error ? `<div class="error">${escapeHtml(state.error)}</div>` : ''}
<div class="form-group"><label class="label" for="f-title">title ${REQUIRED_PILL_HTML}</label>
<input id="f-title" type="text" value="${escapeHtml(title)}" placeholder="GitHub"></div>

2
extension/src/popup/components/types/secure-note.ts
View File

@@ -113,7 +113,7 @@ export function renderForm(app: HTMLElement, mode: 'add' | 'edit', existing: Ite
app.innerHTML = `
<div class="pad">
${renderFormHeader(mode === 'add' ? 'new secure note' : 'edit secure note')}
${renderFormHeader({ titleText: mode === 'add' ? 'new secure note' : 'edit secure note' })}
${state.error ? `<div class="error">${escapeHtml(state.error)}</div>` : ''}
<div class="form-group"><label class="label" for="f-title">title ${REQUIRED_PILL_HTML}</label>
<input id="f-title" type="text" value="${escapeHtml(title)}" placeholder="My recovery codes"></div>

2
extension/src/popup/components/types/totp.ts
View File

@@ -214,7 +214,7 @@ export function renderForm(app: HTMLElement, mode: 'add' | 'edit', existing: Ite
const renderInner = (): string => `
<div class="pad">
${renderFormHeader(mode === 'add' ? 'new totp' : 'edit totp')}
${renderFormHeader({ titleText: mode === 'add' ? 'new totp' : 'edit totp' })}
${state.error ? `<div class="error">${escapeHtml(state.error)}</div>` : ''}
<div class="form-group"><label class="label" for="f-title">title ${REQUIRED_PILL_HTML}</label>
<input id="f-title" type="text" value="${escapeHtml(title)}" placeholder="GitHub"></div>