ce59223fc0
Introduce shared/state.ts as a service-locator so popup components (item-detail, item-form, trash, devices, settings, etc.) work in both the popup and vault tab bundles. Both entry points register themselves as the host; components import from shared/state instead of popup.ts. Vault.ts now delegates to the real popup components, removing ~300 lines of placeholder renderers. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
355 lines
14 KiB
TypeScript
355 lines
14 KiB
TypeScript
/// Field rendering primitives used by every typed-item detail view.
|
||
///
|
||
/// Pure functions that return HTML strings. Caller is responsible for
|
||
/// mounting the strings into the DOM (typically via `app.innerHTML = ...`).
|
||
/// After mounting, call `wireFieldHandlers(scope)` once to bind reveal +
|
||
/// copy click handlers on any rendered rows.
|
||
|
||
import { escapeHtml } from '../../shared/state';
|
||
import type { Item, Section, Field, FieldValue } from '../../shared/types';
|
||
|
||
export interface RowOpts {
|
||
label: string;
|
||
value: string;
|
||
copyable?: boolean;
|
||
href?: string;
|
||
monospace?: boolean;
|
||
multiline?: boolean;
|
||
}
|
||
|
||
/// Plain label/value row. Optional copy button, optional anchor wrap,
|
||
/// optional monospace styling, optional multiline (renders in a <pre>).
|
||
export function renderRow(opts: RowOpts): string {
|
||
const { label, value, copyable, href, monospace, multiline } = opts;
|
||
const valueClass = `field-row__value${monospace ? ' monospace' : ''}`;
|
||
let valueHtml: string;
|
||
if (multiline) {
|
||
valueHtml = `<pre>${escapeHtml(value)}</pre>`;
|
||
} else if (href) {
|
||
valueHtml = `<a href="${escapeHtml(href)}" target="_blank" rel="noopener noreferrer">${escapeHtml(value)}</a>`;
|
||
} else {
|
||
valueHtml = escapeHtml(value);
|
||
}
|
||
const actions = copyable
|
||
? `<button type="button" data-field-action="copy" data-field-value="${escapeHtml(value)}">copy</button>`
|
||
: '';
|
||
return `
|
||
<div class="field-row">
|
||
<span class="field-row__label">${escapeHtml(label)}</span>
|
||
<span class="${valueClass}" data-field-role="value">${valueHtml}</span>
|
||
<span class="field-row__actions">${actions}</span>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
export interface ConcealedRowOpts {
|
||
id: string;
|
||
label: string;
|
||
value: string;
|
||
monospace?: boolean;
|
||
multiline?: boolean;
|
||
}
|
||
|
||
/// Concealed row — value rendered hidden until the user clicks "show".
|
||
/// Plaintext is stored in `data-field-value` on the row element and copied
|
||
/// to the visible value span on reveal. Copy button always copies plaintext.
|
||
export function renderConcealedRow(opts: ConcealedRowOpts): string {
|
||
const { id, label, value, monospace, multiline } = opts;
|
||
const placeholder = multiline ? `•••• (${value.length} chars)` : '••••';
|
||
const valueClass = `field-row__value${monospace ? ' monospace' : ''}`;
|
||
return `
|
||
<div class="field-row" data-field-id="${escapeHtml(id)}" data-revealed="false" data-field-value="${escapeHtml(value)}" data-field-multiline="${multiline ? 'true' : 'false'}">
|
||
<span class="field-row__label">${escapeHtml(label)}</span>
|
||
<span class="${valueClass}" data-field-role="value">${escapeHtml(placeholder)}</span>
|
||
<span class="field-row__actions">
|
||
<button type="button" data-field-action="reveal">show</button>
|
||
<button type="button" data-field-action="copy" data-field-value="${escapeHtml(value)}">copy</button>
|
||
</span>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
export interface SignatureBlockOpts {
|
||
accent?: 'gold' | 'green' | 'amber' | 'red';
|
||
children: string;
|
||
}
|
||
|
||
/// Container for the type-specific signature panel. `children` is HTML
|
||
/// the caller has already produced (and escaped where needed).
|
||
export function renderSignatureBlock(opts: SignatureBlockOpts): string {
|
||
const accent = opts.accent ?? 'gold';
|
||
return `
|
||
<div class="sig-block sig-block--${accent}">${opts.children}</div>
|
||
`;
|
||
}
|
||
|
||
/// Wire reveal-toggle + copy click handlers within `scope`. Idempotent —
|
||
/// safe to call multiple times against the same scope.
|
||
export function wireFieldHandlers(scope: HTMLElement): void {
|
||
scope.querySelectorAll<HTMLButtonElement>('[data-field-action="reveal"]').forEach((btn) => {
|
||
btn.addEventListener('click', () => {
|
||
const row = btn.closest('[data-field-id]') as HTMLElement | null;
|
||
if (!row) return;
|
||
const valueEl = row.querySelector('[data-field-role="value"]') as HTMLElement | null;
|
||
if (!valueEl) return;
|
||
const revealed = row.getAttribute('data-revealed') === 'true';
|
||
const plaintext = row.getAttribute('data-field-value') ?? '';
|
||
const multiline = row.getAttribute('data-field-multiline') === 'true';
|
||
if (revealed) {
|
||
const placeholder = multiline ? `•••• (${plaintext.length} chars)` : '••••';
|
||
valueEl.textContent = placeholder;
|
||
row.setAttribute('data-revealed', 'false');
|
||
btn.textContent = 'show';
|
||
} else {
|
||
valueEl.textContent = plaintext;
|
||
row.setAttribute('data-revealed', 'true');
|
||
btn.textContent = 'hide';
|
||
}
|
||
});
|
||
});
|
||
|
||
scope.querySelectorAll<HTMLButtonElement>('[data-field-action="copy"]').forEach((btn) => {
|
||
btn.addEventListener('click', async () => {
|
||
const value = btn.getAttribute('data-field-value') ?? '';
|
||
try { await navigator.clipboard.writeText(value); } catch { /* swallow — UX is the visual flash below */ }
|
||
const original = btn.textContent;
|
||
btn.textContent = 'copied';
|
||
setTimeout(() => { if (btn.textContent === 'copied') btn.textContent = original; }, 1500);
|
||
});
|
||
});
|
||
}
|
||
|
||
/// Render an Item's sections as read-only field rows. Each section with
|
||
/// ≥1 field emits a header (if named) or thin separator (if anonymous)
|
||
/// plus field rows via renderRow / renderConcealedRow. Sections with
|
||
/// 0 fields are skipped. Fields with unsupported kinds are silently
|
||
/// skipped (β₂ supports text, password, concealed only).
|
||
///
|
||
/// `idPrefix` uniquifies concealed-row IDs (`${idPrefix}-s{i}-f{j}`)
|
||
/// so multiple typed-item detail views rendered in sequence don't
|
||
/// collide on wireFieldHandlers lookups.
|
||
export function renderSections(item: Item, idPrefix: string): string {
|
||
let out = '';
|
||
item.sections.forEach((section, sIdx) => {
|
||
const visibleFields = section.fields.filter(
|
||
(f) => f.value.kind === 'text' || f.value.kind === 'password' || f.value.kind === 'concealed',
|
||
);
|
||
if (visibleFields.length === 0) return;
|
||
|
||
if (section.name) {
|
||
out += `<div class="section-header">${escapeHtml(section.name)}</div>`;
|
||
} else {
|
||
out += `<hr class="section-separator">`;
|
||
}
|
||
|
||
visibleFields.forEach((field, fIdx) => {
|
||
if (field.value.kind === 'text') {
|
||
out += renderRow({ label: field.label, value: field.value.value, copyable: true });
|
||
} else if (field.value.kind === 'password' || field.value.kind === 'concealed') {
|
||
out += renderConcealedRow({
|
||
id: `${idPrefix}-s${sIdx}-f${fIdx}`,
|
||
label: field.label,
|
||
value: field.value.value,
|
||
});
|
||
}
|
||
});
|
||
});
|
||
return out;
|
||
}
|
||
|
||
/// 16-char hex FieldId. crypto.getRandomValues for 8 bytes.
|
||
export function generateFieldId(): string {
|
||
const bytes = new Uint8Array(8);
|
||
crypto.getRandomValues(bytes);
|
||
return Array.from(bytes).map((b) => b.toString(16).padStart(2, '0')).join('');
|
||
}
|
||
|
||
function makeField(kind: 'text' | 'password' | 'concealed'): Field {
|
||
const value: FieldValue = { kind, value: '' };
|
||
return {
|
||
id: generateFieldId(),
|
||
label: 'new field',
|
||
kind,
|
||
value,
|
||
hidden_by_default: kind !== 'text',
|
||
};
|
||
}
|
||
|
||
/// Render the collapsible custom-sections editor. Returns HTML for the
|
||
/// disclosure toggle + body. The expanded-state is owned externally
|
||
/// (via a module-scope flag in the caller); this helper reads it as
|
||
/// the `expanded` parameter.
|
||
export function renderSectionsEditor(sections: Section[], expanded: boolean): string {
|
||
const sectionCount = sections.length;
|
||
const fieldCount = sections.reduce((sum, s) => sum + s.fields.length, 0);
|
||
const sectionLabel = sectionCount === 1 ? '1 section' : `${sectionCount} sections`;
|
||
const fieldLabel = fieldCount === 1 ? '1 field' : `${fieldCount} fields`;
|
||
const summary = sectionCount === 0 && fieldCount === 0
|
||
? 'no custom fields'
|
||
: `${sectionLabel}, ${fieldLabel}`;
|
||
|
||
const body = sections.map((section, sIdx) => renderSectionBlock(section, sIdx)).join('');
|
||
|
||
return `
|
||
<div class="disclosure" data-expanded="${expanded ? 'true' : 'false'}">
|
||
<button type="button" class="disclosure__toggle">▾ custom sections & fields (${escapeHtml(summary)})</button>
|
||
<div class="disclosure__body">
|
||
${body}
|
||
<button type="button" class="add-section">+ add section</button>
|
||
</div>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
function renderSectionBlock(section: Section, sIdx: number): string {
|
||
const nameDisplay = section.name
|
||
? `<span class="name">${escapeHtml(section.name)}</span>`
|
||
: `<span class="name anon">(anonymous)</span>`;
|
||
|
||
// Only render supported kinds. Other-kind fields stay in sectionsDraft
|
||
// untouched so they survive save intact.
|
||
const editable = section.fields.filter(
|
||
(f) => f.value.kind === 'text' || f.value.kind === 'password' || f.value.kind === 'concealed',
|
||
);
|
||
const fieldsHtml = editable.map((f) => renderEditorField(f, sIdx, 0)).join('');
|
||
|
||
const preservedCount = section.fields.length - editable.length;
|
||
const preservedNote = preservedCount > 0
|
||
? `<div class="section-editor__preserved">${preservedCount} field${preservedCount === 1 ? '' : 's'} of unsupported kind (edit via CLI)</div>`
|
||
: '';
|
||
|
||
return `
|
||
<div class="section-editor" data-section-idx="${sIdx}">
|
||
<div class="section-editor__head">
|
||
${nameDisplay}
|
||
<span class="actions">
|
||
<button type="button" data-rename-section="${sIdx}">rename</button>
|
||
<button type="button" data-remove-section="${sIdx}">× remove section</button>
|
||
</span>
|
||
</div>
|
||
${fieldsHtml}
|
||
${preservedNote}
|
||
<div class="section-editor__add">
|
||
<button type="button" data-add-field="text" data-section-idx="${sIdx}">+ text</button>
|
||
<button type="button" data-add-field="password" data-section-idx="${sIdx}">+ password</button>
|
||
<button type="button" data-add-field="concealed" data-section-idx="${sIdx}">+ concealed</button>
|
||
</div>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
function renderEditorField(field: Field, sIdx: number, _fIdx: number): string {
|
||
const valueStr = (field.value.kind === 'text' || field.value.kind === 'password' || field.value.kind === 'concealed')
|
||
? field.value.value
|
||
: '';
|
||
const inputType = field.value.kind === 'text' ? 'text' : 'password';
|
||
return `
|
||
<div class="section-editor__field">
|
||
<input type="text" data-field-label="${escapeHtml(field.id)}" value="${escapeHtml(field.label)}" placeholder="label">
|
||
<input type="${inputType}" data-field-value-input="${escapeHtml(field.id)}" value="${escapeHtml(valueStr)}" placeholder="value">
|
||
<button type="button" class="delete-field" data-delete-field="${escapeHtml(field.id)}" data-section-idx="${sIdx}">×</button>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
function findField(
|
||
sectionsDraft: Section[],
|
||
fieldId: string,
|
||
): { section: Section; fieldIdx: number } | null {
|
||
for (const section of sectionsDraft) {
|
||
const idx = section.fields.findIndex((f) => f.id === fieldId);
|
||
if (idx >= 0) return { section, fieldIdx: idx };
|
||
}
|
||
return null;
|
||
}
|
||
|
||
/// Wire click + input handlers on a rendered sections-editor. Mutations
|
||
/// happen in place on `sectionsDraft`. `rerender` is called after any
|
||
/// structural change (add/remove) to regenerate the disclosure body;
|
||
/// label/value edits do NOT trigger rerender (would steal focus).
|
||
export function wireSectionsEditor(
|
||
scope: HTMLElement,
|
||
sectionsDraft: Section[],
|
||
rerender: () => void,
|
||
): void {
|
||
const toggle = scope.querySelector('.disclosure__toggle') as HTMLButtonElement | null;
|
||
toggle?.addEventListener('click', () => {
|
||
const disclosure = scope.querySelector('.disclosure') as HTMLElement | null;
|
||
if (!disclosure) return;
|
||
const expanded = disclosure.getAttribute('data-expanded') === 'true';
|
||
disclosure.setAttribute('data-expanded', expanded ? 'false' : 'true');
|
||
});
|
||
|
||
scope.querySelector('.add-section')?.addEventListener('click', () => {
|
||
sectionsDraft.push({ name: undefined, fields: [] });
|
||
rerender();
|
||
});
|
||
|
||
scope.querySelectorAll<HTMLButtonElement>('[data-rename-section]').forEach((btn) => {
|
||
btn.addEventListener('click', () => {
|
||
const sIdx = Number(btn.dataset.renameSection);
|
||
const current = sectionsDraft[sIdx]?.name ?? '';
|
||
const name = window.prompt('Section name (empty for none):', current);
|
||
if (name === null) return;
|
||
const trimmed = name.trim();
|
||
sectionsDraft[sIdx].name = trimmed || undefined;
|
||
rerender();
|
||
});
|
||
});
|
||
|
||
scope.querySelectorAll<HTMLButtonElement>('[data-remove-section]').forEach((btn) => {
|
||
btn.addEventListener('click', () => {
|
||
const sIdx = Number(btn.dataset.removeSection);
|
||
const name = sectionsDraft[sIdx]?.name ?? '(anonymous)';
|
||
if (!window.confirm(`Remove section "${name}" and all its fields?`)) return;
|
||
sectionsDraft.splice(sIdx, 1);
|
||
rerender();
|
||
});
|
||
});
|
||
|
||
scope.querySelectorAll<HTMLButtonElement>('[data-add-field]').forEach((btn) => {
|
||
btn.addEventListener('click', () => {
|
||
const sIdx = Number(btn.dataset.sectionIdx);
|
||
const kind = btn.dataset.addField as 'text' | 'password' | 'concealed';
|
||
sectionsDraft[sIdx].fields.push(makeField(kind));
|
||
rerender();
|
||
});
|
||
});
|
||
|
||
scope.querySelectorAll<HTMLButtonElement>('[data-delete-field]').forEach((btn) => {
|
||
btn.addEventListener('click', () => {
|
||
const fieldId = btn.dataset.deleteField ?? '';
|
||
const found = findField(sectionsDraft, fieldId);
|
||
if (!found) return;
|
||
found.section.fields = found.section.fields.filter((f) => f.id !== fieldId);
|
||
rerender();
|
||
});
|
||
});
|
||
|
||
scope.querySelectorAll<HTMLInputElement>('[data-field-label]').forEach((input) => {
|
||
input.addEventListener('input', () => {
|
||
const fieldId = input.dataset.fieldLabel ?? '';
|
||
const found = findField(sectionsDraft, fieldId);
|
||
if (found) {
|
||
found.section.fields[found.fieldIdx].label = input.value;
|
||
}
|
||
});
|
||
});
|
||
|
||
scope.querySelectorAll<HTMLInputElement>('[data-field-value-input]').forEach((input) => {
|
||
input.addEventListener('input', () => {
|
||
const fieldId = input.dataset.fieldValueInput ?? '';
|
||
const found = findField(sectionsDraft, fieldId);
|
||
if (!found) return;
|
||
const field = found.section.fields[found.fieldIdx];
|
||
// Only mutate supported kinds. Unsupported kinds are never rendered
|
||
// as editable (filtered by renderSectionBlock), so this path shouldn't
|
||
// fire for them — but guard defensively.
|
||
if (field.value.kind === 'text' || field.value.kind === 'password' || field.value.kind === 'concealed') {
|
||
const kind = field.value.kind;
|
||
field.value = { kind, value: input.value };
|
||
}
|
||
});
|
||
});
|
||
}
|