refactor(ext/popup): renderFormHeader takes options object

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>

extension/src/popup/components/form-header.ts

@@ -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>

extension/src/popup/components/types/card.ts

@@ -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>

extension/src/popup/components/types/document.ts

@@ -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>

extension/src/popup/components/types/identity.ts

@@ -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>

extension/src/popup/components/types/key.ts

@@ -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>

extension/src/popup/components/types/login.ts

@@ -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>

extension/src/popup/components/types/secure-note.ts

@@ -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>

extension/src/popup/components/types/totp.ts

@@ -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>