From 381e8ed496fd60332d1dd4a594ea941ac19c8f55 Mon Sep 17 00:00:00 2001
From: adlee-was-taken <aaron.daniel.lee@gmail.com>
Date: Fri, 1 May 2026 14:17:59 -0400
Subject: [PATCH] feat(ext): static 'esc to cancel' subtitle in fullscreen form
 headers
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

All seven type forms plus the type-selection screen now show a small
'esc to cancel' subtitle under the heading when rendered in the
fullscreen vault tab (isInTab() === true). The subtitle is suppressed
in the popup, where esc has the more general meaning of closing the
popup. .form-subtitle class is shared between popup and vault
stylesheets so future hooks can reuse it.

Dynamic dirty-state ('unsaved · esc to cancel') wiring is deferred to
Phase 3 (unsaved-changes guard).

Plan 2026-04-30 fullscreen UX phase 1 task 8.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 extension/src/popup/components/item-form.ts   |  3 +-
 .../form-subtitle-fullscreen.test.ts          | 32 +++++++++++++++++++
 .../types/__tests__/form-subtitle.test.ts     | 30 +++++++++++++++++
 extension/src/popup/components/types/card.ts  |  3 +-
 .../src/popup/components/types/document.ts    |  3 +-
 .../src/popup/components/types/identity.ts    |  3 +-
 extension/src/popup/components/types/key.ts   |  3 +-
 extension/src/popup/components/types/login.ts |  3 +-
 .../src/popup/components/types/secure-note.ts |  3 +-
 extension/src/popup/components/types/totp.ts  |  3 +-
 extension/src/popup/styles.css                |  8 +++++
 extension/src/vault/vault.css                 |  8 +++++
 12 files changed, 94 insertions(+), 8 deletions(-)
 create mode 100644 extension/src/popup/components/types/__tests__/form-subtitle-fullscreen.test.ts
 create mode 100644 extension/src/popup/components/types/__tests__/form-subtitle.test.ts

diff --git a/extension/src/popup/components/item-form.ts b/extension/src/popup/components/item-form.ts
index 5773e6e..c9956ae 100644
--- a/extension/src/popup/components/item-form.ts
+++ b/extension/src/popup/components/item-form.ts
@@ -54,12 +54,13 @@ export function renderItemForm(app: HTMLElement, mode: 'add' | 'edit'): void {
 function renderTypeSelection(app: HTMLElement): void {
   app.innerHTML = `
     <div class="pad">
-      <div style="display:flex; align-items:center; gap:12px; margin-bottom:16px;">
+      <div style="display:flex; align-items:center; gap:12px;">
         <button class="btn" id="back-btn">← back</button>
         <h3 style="margin:0;">new item</h3>
         <span style="flex:1;"></span>
         ${isInTab() ? '' : '<button class="btn" id="popout-btn" title="Open in tab">⤴</button>'}
       </div>
+      ${isInTab() ? '<div class="form-subtitle">esc to cancel</div>' : '<div style="margin-bottom:16px;"></div>'}
       <div class="type-select-list">
         ${TYPE_OPTIONS.map((opt) => `
           <button class="type-select-row" data-type="${opt.type}">
diff --git a/extension/src/popup/components/types/__tests__/form-subtitle-fullscreen.test.ts b/extension/src/popup/components/types/__tests__/form-subtitle-fullscreen.test.ts
new file mode 100644
index 0000000..e31ad8e
--- /dev/null
+++ b/extension/src/popup/components/types/__tests__/form-subtitle-fullscreen.test.ts
@@ -0,0 +1,32 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+
+vi.mock('../../../../shared/state', () => ({
+  sendMessage: vi.fn(),
+  getState: () => ({ newType: 'login', generatorDefaults: null, error: null, loading: false, vaultSettings: null, entries: [] }),
+  setState: vi.fn(),
+  navigate: vi.fn(),
+  escapeHtml: (s: string) => s,
+  popOutToTab: vi.fn(),
+  isInTab: () => true,         // FULLSCREEN context
+  openVaultTab: vi.fn(),
+  registerHost: vi.fn(),
+}));
+
+vi.mock('../../generator-panel', () => ({
+  openGeneratorPanel: vi.fn(),
+  closeGeneratorPanel: vi.fn(),
+  isGeneratorPanelOpen: () => false,
+}));
+
+import { TYPED_FORMS } from './_typed-forms';
+
+describe('form subtitle (fullscreen context)', () => {
+  beforeEach(() => { document.body.innerHTML = '<div id="app"></div>'; });
+
+  it.each(TYPED_FORMS)('%s form renders "esc to cancel" subtitle in fullscreen', (_name, render) => {
+    render(document.getElementById('app')!, 'add', null);
+    const subtitle = document.querySelector('.form-subtitle');
+    expect(subtitle).not.toBeNull();
+    expect(subtitle?.textContent).toContain('esc to cancel');
+  });
+});
diff --git a/extension/src/popup/components/types/__tests__/form-subtitle.test.ts b/extension/src/popup/components/types/__tests__/form-subtitle.test.ts
new file mode 100644
index 0000000..33d679e
--- /dev/null
+++ b/extension/src/popup/components/types/__tests__/form-subtitle.test.ts
@@ -0,0 +1,30 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+
+vi.mock('../../../../shared/state', () => ({
+  sendMessage: vi.fn(),
+  getState: () => ({ newType: 'login', generatorDefaults: null, error: null, loading: false, vaultSettings: null, entries: [] }),
+  setState: vi.fn(),
+  navigate: vi.fn(),
+  escapeHtml: (s: string) => s,
+  popOutToTab: vi.fn(),
+  isInTab: () => false,        // POPUP context
+  openVaultTab: vi.fn(),
+  registerHost: vi.fn(),
+}));
+
+vi.mock('../../generator-panel', () => ({
+  openGeneratorPanel: vi.fn(),
+  closeGeneratorPanel: vi.fn(),
+  isGeneratorPanelOpen: () => false,
+}));
+
+import { TYPED_FORMS } from './_typed-forms';
+
+describe('form subtitle (popup context)', () => {
+  beforeEach(() => { document.body.innerHTML = '<div id="app"></div>'; });
+
+  it.each(TYPED_FORMS)('%s form omits the form-subtitle in popup context', (_name, render) => {
+    render(document.getElementById('app')!, 'add', null);
+    expect(document.querySelector('.form-subtitle')).toBeNull();
+  });
+});
diff --git a/extension/src/popup/components/types/card.ts b/extension/src/popup/components/types/card.ts
index 6c7725b..59c66ab 100644
--- a/extension/src/popup/components/types/card.ts
+++ b/extension/src/popup/components/types/card.ts
@@ -174,11 +174,12 @@ export function renderForm(app: HTMLElement, mode: 'add' | 'edit', existing: Ite
 
   app.innerHTML = `
     <div class="pad">
-      <div style="display:flex; align-items:center; margin-bottom:16px;">
+      <div style="display:flex; align-items:center;">
         <div class="detail-title">${mode === 'add' ? 'new card' : 'edit card'}</div>
         <span style="flex:1;"></span>
         ${isInTab() ? '' : '<button class="btn" id="popout-btn" title="Open in tab">⤴</button>'}
       </div>
+      ${isInTab() ? '<div class="form-subtitle">esc to cancel</div>' : '<div style="margin-bottom:16px;"></div>'}
       ${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>
diff --git a/extension/src/popup/components/types/document.ts b/extension/src/popup/components/types/document.ts
index cccdcf8..16531e8 100644
--- a/extension/src/popup/components/types/document.ts
+++ b/extension/src/popup/components/types/document.ts
@@ -85,11 +85,12 @@ export function renderForm(app: HTMLElement, mode: 'add' | 'edit', existing: Ite
 
   app.innerHTML = `
     <div class="pad">
-      <div style="display:flex; align-items:center; margin-bottom:16px;">
+      <div style="display:flex; align-items:center;">
         <div class="detail-title">${isEdit ? 'edit document' : 'new document'}</div>
         <span style="flex:1;"></span>
         ${isInTab() ? '' : '<button class="btn" id="popout-btn" title="Open in tab">⤴</button>'}
       </div>
+      ${isInTab() ? '<div class="form-subtitle">esc to cancel</div>' : '<div style="margin-bottom:16px;"></div>'}
       ${state.error ? `<div class="error">${escapeHtml(state.error)}</div>` : ''}
       <div class="form-group">
         <label class="label" for="f-title">title ${REQUIRED_PILL_HTML}</label>
diff --git a/extension/src/popup/components/types/identity.ts b/extension/src/popup/components/types/identity.ts
index 90fffc3..858714f 100644
--- a/extension/src/popup/components/types/identity.ts
+++ b/extension/src/popup/components/types/identity.ts
@@ -134,11 +134,12 @@ export function renderForm(app: HTMLElement, mode: 'add' | 'edit', existing: Ite
 
   app.innerHTML = `
     <div class="pad">
-      <div style="display:flex; align-items:center; margin-bottom:16px;">
+      <div style="display:flex; align-items:center;">
         <div class="detail-title">${mode === 'add' ? 'new identity' : 'edit identity'}</div>
         <span style="flex:1;"></span>
         ${isInTab() ? '' : '<button class="btn" id="popout-btn" title="Open in tab">⤴</button>'}
       </div>
+      ${isInTab() ? '<div class="form-subtitle">esc to cancel</div>' : '<div style="margin-bottom:16px;"></div>'}
       ${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>
diff --git a/extension/src/popup/components/types/key.ts b/extension/src/popup/components/types/key.ts
index e227870..9e73ad5 100644
--- a/extension/src/popup/components/types/key.ts
+++ b/extension/src/popup/components/types/key.ts
@@ -123,11 +123,12 @@ export function renderForm(app: HTMLElement, mode: 'add' | 'edit', existing: Ite
 
   app.innerHTML = `
     <div class="pad">
-      <div style="display:flex; align-items:center; margin-bottom:16px;">
+      <div style="display:flex; align-items:center;">
         <div class="detail-title">${mode === 'add' ? 'new key' : 'edit key'}</div>
         <span style="flex:1;"></span>
         ${isInTab() ? '' : '<button class="btn" id="popout-btn" title="Open in tab">⤴</button>'}
       </div>
+      ${isInTab() ? '<div class="form-subtitle">esc to cancel</div>' : '<div style="margin-bottom:16px;"></div>'}
       ${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>
diff --git a/extension/src/popup/components/types/login.ts b/extension/src/popup/components/types/login.ts
index 448c163..9c9b0b6 100644
--- a/extension/src/popup/components/types/login.ts
+++ b/extension/src/popup/components/types/login.ts
@@ -244,11 +244,12 @@ export function renderForm(app: HTMLElement, mode: 'add' | 'edit', existing: Ite
 
   app.innerHTML = `
     <div class="pad">
-      <div style="display:flex; align-items:center; margin-bottom:16px;">
+      <div style="display:flex; align-items:center;">
         <div class="detail-title">${mode === 'add' ? 'new login' : 'edit login'}</div>
         <span style="flex:1;"></span>
         ${isInTab() ? '' : '<button class="btn" id="popout-btn" title="Open in tab">⤴</button>'}
       </div>
+      ${isInTab() ? '<div class="form-subtitle">esc to cancel</div>' : '<div style="margin-bottom:16px;"></div>'}
       ${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>
diff --git a/extension/src/popup/components/types/secure-note.ts b/extension/src/popup/components/types/secure-note.ts
index 5ccf228..d3f7a35 100644
--- a/extension/src/popup/components/types/secure-note.ts
+++ b/extension/src/popup/components/types/secure-note.ts
@@ -112,11 +112,12 @@ export function renderForm(app: HTMLElement, mode: 'add' | 'edit', existing: Ite
 
   app.innerHTML = `
     <div class="pad">
-      <div style="display:flex; align-items:center; margin-bottom:16px;">
+      <div style="display:flex; align-items:center;">
         <div class="detail-title">${mode === 'add' ? 'new secure note' : 'edit secure note'}</div>
         <span style="flex:1;"></span>
         ${isInTab() ? '' : '<button class="btn" id="popout-btn" title="Open in tab">⤴</button>'}
       </div>
+      ${isInTab() ? '<div class="form-subtitle">esc to cancel</div>' : '<div style="margin-bottom:16px;"></div>'}
       ${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>
diff --git a/extension/src/popup/components/types/totp.ts b/extension/src/popup/components/types/totp.ts
index 3649f06..3e5cd85 100644
--- a/extension/src/popup/components/types/totp.ts
+++ b/extension/src/popup/components/types/totp.ts
@@ -213,11 +213,12 @@ export function renderForm(app: HTMLElement, mode: 'add' | 'edit', existing: Ite
 
   const renderInner = (): string => `
     <div class="pad">
-      <div style="display:flex; align-items:center; margin-bottom:16px;">
+      <div style="display:flex; align-items:center;">
         <div class="detail-title">${mode === 'add' ? 'new totp' : 'edit totp'}</div>
         <span style="flex:1;"></span>
         ${isInTab() ? '' : '<button class="btn" id="popout-btn" title="Open in tab">⤴</button>'}
       </div>
+      ${isInTab() ? '<div class="form-subtitle">esc to cancel</div>' : '<div style="margin-bottom:16px;"></div>'}
       ${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>
diff --git a/extension/src/popup/styles.css b/extension/src/popup/styles.css
index a4d07e6..8f384ac 100644
--- a/extension/src/popup/styles.css
+++ b/extension/src/popup/styles.css
@@ -104,6 +104,14 @@ body {
   font-size: 11px;
 }
 
+.form-subtitle {
+  font-size: 11px;
+  color: var(--text-dim);
+  margin-top: 2px;
+  margin-bottom: 14px;
+  letter-spacing: 0.02em;
+}
+
 .error {
   color: #ab2b20;
   font-size: 12px;
diff --git a/extension/src/vault/vault.css b/extension/src/vault/vault.css
index e00dc0a..9ba1ea5 100644
--- a/extension/src/vault/vault.css
+++ b/extension/src/vault/vault.css
@@ -104,6 +104,14 @@ body {
   font-size: 11px;
 }
 
+.form-subtitle {
+  font-size: 11px;
+  color: var(--text-dim);
+  margin-top: 2px;
+  margin-bottom: 14px;
+  letter-spacing: 0.02em;
+}
+
 .error {
   color: #ab2b20;
   font-size: 12px;