feat(ext/popup): render custom sections in all 6 type detail views

extension/src/popup/components/fields.ts

@@ -145,8 +145,7 @@ export function renderSections(item: Item, idPrefix: string): string {
     visibleFields.forEach((field, fIdx) => {
       if (field.value.kind === 'text') {
         out += renderRow({ label: field.label, value: field.value.value, copyable: true });
-      } else {
+      } else if (field.value.kind === 'password' || field.value.kind === 'concealed') {
-        // password or concealed
         out += renderConcealedRow({
           id: `${idPrefix}-s${sIdx}-f${fIdx}`,
           label: field.label,

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

@@ -4,7 +4,7 @@
 import { getState, setState, sendMessage, navigate, escapeHtml } from '../../popup';
 import type { Item, ItemId, ManifestEntry, CardKind } from '../../../shared/types';
 import {
-  renderConcealedRow, renderSignatureBlock, wireFieldHandlers,
+  renderConcealedRow, renderSignatureBlock, wireFieldHandlers, renderSections,
 } from '../fields';
 
 const CARD_KINDS: CardKind[] = ['credit', 'debit', 'gift', 'loyalty', 'other'];
@@ -79,6 +79,7 @@ export async function renderDetail(app: HTMLElement, item: Item): Promise<void>
       </div>
       ${c.cvv ? renderConcealedRow({ id: 'card-cvv', label: 'cvv', value: c.cvv, monospace: true }) : ''}
       ${c.pin ? renderConcealedRow({ id: 'card-pin', label: 'pin', value: c.pin, monospace: true }) : ''}
+      ${renderSections(item, 'card')}
       <div class="form-actions" style="margin-top:14px;">
         <button class="btn" id="back-btn">back</button>
         <button class="btn" id="edit-btn">edit</button>

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

@@ -4,7 +4,7 @@
 import { getState, setState, sendMessage, navigate, escapeHtml } from '../../popup';
 import type { Item, ItemId, ManifestEntry } from '../../../shared/types';
 import {
-  renderRow, renderSignatureBlock, wireFieldHandlers,
+  renderRow, renderSignatureBlock, wireFieldHandlers, renderSections,
 } from '../fields';
 
 let activeKeyHandler: ((e: KeyboardEvent) => void) | null = null;
@@ -57,6 +57,7 @@ export async function renderDetail(app: HTMLElement, item: Item): Promise<void>
       ${c.email   ? renderRow({ label: 'email',   value: c.email,   copyable: true }) : ''}
       ${c.address ? renderRow({ label: 'address', value: c.address, multiline: true })  : ''}
       ${c.date_of_birth ? renderRow({ label: 'born', value: formatDate(c.date_of_birth) }) : ''}
+      ${renderSections(item, 'identity')}
       <div class="form-actions" style="margin-top:14px;">
         <button class="btn" id="back-btn">back</button>
         <button class="btn" id="edit-btn">edit</button>

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

@@ -5,7 +5,7 @@
 import { getState, setState, sendMessage, navigate, escapeHtml } from '../../popup';
 import type { Item, ItemId, ManifestEntry } from '../../../shared/types';
 import {
-  renderRow, renderConcealedRow, renderSignatureBlock, wireFieldHandlers,
+  renderRow, renderConcealedRow, renderSignatureBlock, wireFieldHandlers, renderSections,
 } from '../fields';
 
 let activeKeyHandler: ((e: KeyboardEvent) => void) | null = null;
@@ -42,6 +42,7 @@ export async function renderDetail(app: HTMLElement, item: Item): Promise<void>
       ${c.label      ? renderRow({ label: 'label',      value: c.label }) : ''}
       ${c.algorithm  ? renderRow({ label: 'algorithm',  value: c.algorithm }) : ''}
       ${c.public_key ? renderRow({ label: 'public', value: c.public_key, multiline: true, monospace: true, copyable: true }) : ''}
+      ${renderSections(item, 'key')}
       <div class="form-actions" style="margin-top:14px;">
         <button class="btn" id="back-btn">back</button>
         <button class="btn" id="edit-btn">edit</button>

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

@@ -10,6 +10,7 @@ import {
   renderConcealedRow,
   renderSignatureBlock,
   wireFieldHandlers,
+  renderSections,
 } from '../fields';
 
 /// Called by the dispatcher before each render. Stops any in-flight
@@ -61,6 +62,7 @@ export async function renderDetail(app: HTMLElement, item: Item): Promise<void>
         </div>
       ` : ''}
       ${item.notes ? renderRow({ label: 'notes', value: item.notes, multiline: true }) : ''}
+      ${renderSections(item, 'login')}
       <div class="form-actions" style="margin-top:14px;">
         <button class="btn" id="back-btn">back</button>
         <button class="btn" id="edit-btn">edit</button>

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

@@ -4,7 +4,7 @@
 import { getState, setState, sendMessage, navigate, escapeHtml } from '../../popup';
 import type { Item, ItemId, ManifestEntry } from '../../../shared/types';
 import {
-  renderConcealedRow, renderSignatureBlock, wireFieldHandlers,
+  renderConcealedRow, renderSignatureBlock, wireFieldHandlers, renderSections,
 } from '../fields';
 
 let activeKeyHandler: ((e: KeyboardEvent) => void) | null = null;
@@ -35,6 +35,7 @@ export async function renderDetail(app: HTMLElement, item: Item): Promise<void>
         ${renderSignatureBlock({ accent: 'green', children: sigInner })}
       </div>
       ${renderConcealedRow({ id: 'note-body', label: 'body', value: body, multiline: true })}
+      ${renderSections(item, 'secure-note')}
       <div class="form-actions" style="margin-top:14px;">
         <button class="btn" id="back-btn">back</button>
         <button class="btn" id="edit-btn">edit</button>

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

@@ -6,7 +6,7 @@ import { getState, setState, sendMessage, navigate, escapeHtml } from '../../pop
 import type { Item, ItemId, ManifestEntry, TotpKind } from '../../../shared/types';
 import { base32Decode, base32Encode } from '../../../shared/base32';
 import {
-  renderRow, renderConcealedRow, renderSignatureBlock, wireFieldHandlers,
+  renderRow, renderConcealedRow, renderSignatureBlock, wireFieldHandlers, renderSections,
 } from '../fields';
 
 // ----------------------------------------------------------------------
@@ -83,6 +83,7 @@ export async function renderDetail(app: HTMLElement, item: Item): Promise<void>
       ${c.label  ? renderRow({ label: 'label',  value: c.label  }) : ''}
       ${renderRow({ label: 'kind', value: isSteam ? 'Steam Guard' : 'TOTP' })}
       ${renderConcealedRow({ id: 'totp-secret', label: 'secret', value: secretB32, monospace: true })}
+      ${renderSections(item, 'totp')}
       <div class="form-actions" style="margin-top:14px;">
         <button class="btn" id="back-btn">back</button>
         <button class="btn" id="edit-btn">edit</button>