From ffa8232dfd889b7d5ab3d6bc60fdcf459419d7ef Mon Sep 17 00:00:00 2001
From: adlee-was-taken <aaron.daniel.lee@gmail.com>
Date: Sun, 3 May 2026 21:08:50 -0400
Subject: [PATCH] feat(ext/settings): display section (password coloring)

---
 extension/src/popup/components/settings.ts | 66 +++++++++++++++++++++-
 1 file changed, 64 insertions(+), 2 deletions(-)

diff --git a/extension/src/popup/components/settings.ts b/extension/src/popup/components/settings.ts
index 9c5a2d9..990a845 100644
--- a/extension/src/popup/components/settings.ts
+++ b/extension/src/popup/components/settings.ts
@@ -1,5 +1,6 @@
 import { sendMessage, escapeHtml } from '../../shared/state';
 import type { VaultSettings, DeviceSettings } from '../../shared/types';
+import type { ColorScheme } from '../../shared/color-scheme';
 import {
   loadColorScheme, saveColorScheme, resetColorScheme,
   DEFAULT_DIGIT_COLOR, DEFAULT_SYMBOL_COLOR,
@@ -175,8 +176,69 @@ async function renderAutofillSection(content: HTMLElement): Promise<void> {
   });
 }
 
-function renderDisplaySection(content: HTMLElement): void {
-  content.innerHTML = '<p class="muted" style="padding:20px;font-size:12px;">Display — coming soon</p>';
+async function renderDisplaySection(content: HTMLElement): Promise<void> {
+  const scheme = await loadColorScheme();
+
+  content.innerHTML = `
+    <h3 class="settings-section-title">Password coloring</h3>
+    <div class="setting-row">
+      <div class="setting-row__info">
+        <div class="setting-row__title">Digit color</div>
+      </div>
+      <div class="setting-row__control">
+        <input type="color" id="digit-color" value="${escapeHtml(scheme.digit_color)}">
+      </div>
+    </div>
+    <div class="setting-row">
+      <div class="setting-row__info">
+        <div class="setting-row__title">Symbol color</div>
+      </div>
+      <div class="setting-row__control">
+        <input type="color" id="symbol-color" value="${escapeHtml(scheme.symbol_color)}">
+      </div>
+    </div>
+    <div class="setting-row">
+      <div class="setting-row__info">
+        <div class="setting-row__title">Preview</div>
+      </div>
+      <div class="setting-row__control">
+        <span id="color-preview" style="font-family:monospace; font-size:13px;"></span>
+      </div>
+    </div>
+    <div style="margin-top:12px;">
+      <button class="btn" id="reset-colors" style="font-size:11px;">Reset defaults</button>
+    </div>
+  `;
+
+  function refreshPreview(s: ColorScheme): void {
+    const preview = document.getElementById('color-preview');
+    if (!preview) return;
+    preview.style.setProperty('--relicario-pwd-digit-color', s.digit_color);
+    preview.style.setProperty('--relicario-pwd-symbol-color', s.symbol_color);
+    preview.innerHTML = '';
+    preview.appendChild(colorizePassword('Abc123!@#'));
+  }
+
+  refreshPreview(scheme);
+
+  document.getElementById('digit-color')?.addEventListener('change', async (e) => {
+    const color = (e.target as HTMLInputElement).value;
+    const current = await loadColorScheme();
+    await saveColorScheme({ ...current, digit_color: color });
+    refreshPreview({ ...current, digit_color: color });
+  });
+
+  document.getElementById('symbol-color')?.addEventListener('change', async (e) => {
+    const color = (e.target as HTMLInputElement).value;
+    const current = await loadColorScheme();
+    await saveColorScheme({ ...current, symbol_color: color });
+    refreshPreview({ ...current, symbol_color: color });
+  });
+
+  document.getElementById('reset-colors')?.addEventListener('click', async () => {
+    await resetColorScheme();
+    renderDisplaySection(content);
+  });
 }
 
 async function renderGeneratorSection(content: HTMLElement): Promise<void> {