From 553d9d7ca95c8c4e21abe11ef5dcb2f118a52650 Mon Sep 17 00:00:00 2001
From: adlee-was-taken <aaron.daniel.lee@gmail.com>
Date: Fri, 24 Apr 2026 10:35:46 -0400
Subject: [PATCH] feat(ext/popup): render custom sections in all 6 type detail
 views

---
 extension/src/popup/components/fields.ts            | 3 +--
 extension/src/popup/components/types/card.ts        | 3 ++-
 extension/src/popup/components/types/identity.ts    | 3 ++-
 extension/src/popup/components/types/key.ts         | 3 ++-
 extension/src/popup/components/types/login.ts       | 2 ++
 extension/src/popup/components/types/secure-note.ts | 3 ++-
 extension/src/popup/components/types/totp.ts        | 3 ++-
 7 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/extension/src/popup/components/fields.ts b/extension/src/popup/components/fields.ts
index aee366a..485243f 100644
--- a/extension/src/popup/components/fields.ts
+++ b/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 {
-        // password or concealed
+      } else if (field.value.kind === 'password' || field.value.kind === 'concealed') {
         out += renderConcealedRow({
           id: `${idPrefix}-s${sIdx}-f${fIdx}`,
           label: field.label,
diff --git a/extension/src/popup/components/types/card.ts b/extension/src/popup/components/types/card.ts
index 400fc92..d855857 100644
--- a/extension/src/popup/components/types/card.ts
+++ b/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>
diff --git a/extension/src/popup/components/types/identity.ts b/extension/src/popup/components/types/identity.ts
index 1cafa75..c52ae3f 100644
--- a/extension/src/popup/components/types/identity.ts
+++ b/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>
diff --git a/extension/src/popup/components/types/key.ts b/extension/src/popup/components/types/key.ts
index 8bdf334..9de8030 100644
--- a/extension/src/popup/components/types/key.ts
+++ b/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>
diff --git a/extension/src/popup/components/types/login.ts b/extension/src/popup/components/types/login.ts
index c529a39..d37f7e1 100644
--- a/extension/src/popup/components/types/login.ts
+++ b/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>
diff --git a/extension/src/popup/components/types/secure-note.ts b/extension/src/popup/components/types/secure-note.ts
index 8939375..9d0ea96 100644
--- a/extension/src/popup/components/types/secure-note.ts
+++ b/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>
diff --git a/extension/src/popup/components/types/totp.ts b/extension/src/popup/components/types/totp.ts
index f897e56..dad022a 100644
--- a/extension/src/popup/components/types/totp.ts
+++ b/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>