fix: replace all remaining emoji with monochrome glyph constants

- trash.ts TYPE_ICONS map uses GLYPH_TYPE_* constants - field-history.ts copy button uses GLYPH_COPY - attachments-disclosure.ts thumbnail/icon uses GLYPH_TYPE_DOCUMENT - settings.ts sync button uses GLYPH_SYNC - document.ts thumb/sigblock/preview use GLYPH_TYPE_DOCUMENT + GLYPH_PREVIEW - glyphs.ts adds GLYPH_COPY, GLYPH_SYNC, GLYPH_PREVIEW - vault.ts adds GLYPH_DEVICES import + devices sidebar nav button Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-03 21:36:11 -04:00
parent ade44b4ea1
commit 9a8cdf8e4f
7 changed files with 30 additions and 15 deletions
--- a/extension/src/popup/components/attachments-disclosure.ts
+++ b/extension/src/popup/components/attachments-disclosure.ts
@@ -7,6 +7,7 @@

 import { sendMessage, escapeHtml } from '../../shared/state';
 import type { AttachmentRef, VaultSettings } from '../../shared/types';
+import { GLYPH_TYPE_DOCUMENT } from '../../shared/glyphs';

 export type DisclosureMode = 'edit' | 'view';

@@ -53,8 +54,8 @@ export function renderAttachmentsDisclosure(opts: AttachmentsDisclosureOpts): st
    const action = opts.mode === 'edit' ? '×' : '↓';
    const actionClass = opts.mode === 'edit' ? 'attachment-row__remove' : 'attachment-row__download';
    const iconHtml = isImage(a.mime_type)
-      ? `<span class="attachment-row__thumb" data-att-id="${escapeHtml(a.id)}" data-mime="${escapeHtml(a.mime_type)}">📄</span>`
-      : `<span class="attachment-row__icon">📄</span>`;
+      ? `<span class="attachment-row__thumb" data-att-id="${escapeHtml(a.id)}" data-mime="${escapeHtml(a.mime_type)}">${GLYPH_TYPE_DOCUMENT}</span>`
+      : `<span class="attachment-row__icon">${GLYPH_TYPE_DOCUMENT}</span>`;
    return `
      <div class="attachment-row" data-att-id="${escapeHtml(a.id)}">
        ${iconHtml}
--- a/extension/src/popup/components/field-history.ts
+++ b/extension/src/popup/components/field-history.ts
@@ -3,6 +3,7 @@
 import { getState, setState, sendMessage, navigate, escapeHtml } from '../../shared/state';
 import { colorizePassword } from '../../shared/password-coloring';
 import type { FieldHistoryView } from '../../shared/types';
+import { GLYPH_COPY } from '../../shared/glyphs';

 function relativeTime(unixSec: number): string {
  const now = Math.floor(Date.now() / 1000);
@@ -75,7 +76,7 @@ export async function renderFieldHistory(app: HTMLElement): Promise<void> {
          ${isCurrent ? '<span class="history-entry__current">current</span>' : ''}
          <span>${isCurrent ? 'set' : 'changed'} ${relativeTime(timestamp)}</span>
        </div>
-        <button class="history-entry__copy" data-entry-copy="${escapeHtml(entryKey)}" title="Copy">📋</button>
+        <button class="history-entry__copy" data-entry-copy="${escapeHtml(entryKey)}" title="Copy">${GLYPH_COPY}</button>
      </div>
    `;
  }
@@ -140,7 +141,7 @@ export async function renderFieldHistory(app: HTMLElement): Promise<void> {
      const value = valueStore.get(key) ?? '';
      await navigator.clipboard.writeText(value);
      btn.textContent = '✓';
-      setTimeout(() => { btn.textContent = '📋'; }, 1500);
+      setTimeout(() => { btn.textContent = GLYPH_COPY; }, 1500);
    });
  });
 }
--- a/extension/src/popup/components/settings.ts
+++ b/extension/src/popup/components/settings.ts
@@ -2,7 +2,7 @@

 import { sendMessage, navigate, escapeHtml } from '../../shared/state';
 import type { DeviceSettings } from '../../shared/types';
-import { GLYPH_TRASH, GLYPH_DEVICES } from '../../shared/glyphs';
+import { GLYPH_TRASH, GLYPH_DEVICES, GLYPH_SYNC } from '../../shared/glyphs';
 import {
  loadColorScheme, saveColorScheme, resetColorScheme,
  DEFAULT_DIGIT_COLOR, DEFAULT_SYMBOL_COLOR,
@@ -63,7 +63,7 @@ export async function renderSettings(app: HTMLElement): Promise<void> {
      <div style="margin-bottom:16px;">
        <button class="btn" id="trash-btn" style="width:100%;margin-bottom:8px;">${GLYPH_TRASH} trash</button>
        <button class="btn" id="devices-btn" style="width:100%;margin-bottom:8px;">${GLYPH_DEVICES} devices</button>
-        <button class="btn" id="sync-now-btn" style="width:100%;margin-bottom:8px;">📤 Sync now</button>
+        <button class="btn" id="sync-now-btn" style="width:100%;margin-bottom:8px;">${GLYPH_SYNC} Sync now</button>
        <div id="sync-status" class="muted" style="font-size:12px;min-height:16px;"></div>
      </div>

--- a/extension/src/popup/components/trash.ts
+++ b/extension/src/popup/components/trash.ts
@@ -2,10 +2,19 @@

 import { getState, setState, sendMessage, navigate, escapeHtml } from '../../shared/state';
 import type { ItemId, ManifestEntry, VaultSettings } from '../../shared/types';
+import {
+  GLYPH_TYPE_LOGIN, GLYPH_TYPE_SECURE_NOTE, GLYPH_TYPE_IDENTITY, GLYPH_TYPE_CARD,
+  GLYPH_TYPE_KEY, GLYPH_TYPE_DOCUMENT, GLYPH_TYPE_TOTP,
+} from '../../shared/glyphs';

 const TYPE_ICONS: Record<string, string> = {
-  login: '🔑', secure_note: '📝', identity: '👤', card: '💳',
-  key: '🔐', document: '📄', totp: '⏱️',
+  login: GLYPH_TYPE_LOGIN,
+  secure_note: GLYPH_TYPE_SECURE_NOTE,
+  identity: GLYPH_TYPE_IDENTITY,
+  card: GLYPH_TYPE_CARD,
+  key: GLYPH_TYPE_KEY,
+  document: GLYPH_TYPE_DOCUMENT,
+  totp: GLYPH_TYPE_TOTP,
 };

 function relativeTime(unixSec: number): string {
@@ -64,7 +73,7 @@ export async function renderTrash(app: HTMLElement): Promise<void> {
        ? `<p class="muted" style="text-align:center;margin-top:32px;">Trash is empty</p>`
        : items.map(([id, entry]) => `
          <div class="trash-row" data-id="${escapeHtml(id)}">
-            <span class="trash-row__icon">${TYPE_ICONS[entry.type] ?? '📦'}</span>
+            <span class="trash-row__icon">${TYPE_ICONS[entry.type] ?? '◻'}</span>
            <div class="trash-row__info">
              <span class="trash-row__title">${escapeHtml(entry.title)}</span>
              <span class="trash-row__meta">trashed ${relativeTime(entry.trashed_at ?? 0)}</span>
--- a/extension/src/popup/components/types/document.ts
+++ b/extension/src/popup/components/types/document.ts
@@ -4,7 +4,7 @@

 import { getState, setState, sendMessage, navigate, escapeHtml, popOutToTab } from '../../../shared/state';
 import { renderFormHeader } from '../form-header';
-import { REQUIRED_PILL_HTML } from '../../../shared/glyphs';
+import { REQUIRED_PILL_HTML, GLYPH_TYPE_DOCUMENT, GLYPH_PREVIEW } from '../../../shared/glyphs';
 import type { Item, ItemId, ManifestEntry, Section, AttachmentRef } from '../../../shared/types';
 import {
  renderSectionsEditor, wireSectionsEditor,
@@ -76,7 +76,7 @@ export function renderForm(app: HTMLElement, mode: 'add' | 'edit', existing: Ite
    }
    return `
      <div class="document-primary-row" id="primary-picker">
-        <span class="document-primary-row__thumb">📄</span>
+        <span class="document-primary-row__thumb">${GLYPH_TYPE_DOCUMENT}</span>
        <span class="document-primary-row__name">${escapeHtml(primaryRef.filename)}</span>
        <span class="document-primary-row__meta">${formatBytes(primaryRef.size)}</span>
        <span class="document-primary-row__action">↑ change</span>
@@ -283,13 +283,13 @@ export async function renderDetail(app: HTMLElement, item: Item): Promise<void>
      <div class="detail-title" style="margin-bottom:12px;">${escapeHtml(item.title)}</div>

      <div class="document-signature-block" id="doc-sigblock">
-        <div class="document-signature-block__thumb" data-att-id="${escapeHtml(primaryRef.id)}" data-mime="${escapeHtml(primaryRef.mime_type)}">📄</div>
+        <div class="document-signature-block__thumb" data-att-id="${escapeHtml(primaryRef.id)}" data-mime="${escapeHtml(primaryRef.mime_type)}">${GLYPH_TYPE_DOCUMENT}</div>
        <div class="document-signature-block__info">
          <div class="document-signature-block__name">${escapeHtml(primaryRef.filename)}</div>
          <div class="document-signature-block__meta">${formatBytes(primaryRef.size)} · ${new Date(primaryRef.created * 1000).toISOString().slice(0, 10)}</div>
          <div class="document-signature-block__actions">
            <span id="doc-download" style="cursor:pointer;color:#d2ab43;">↓ download</span>
-            ${isImageMime ? '<span id="doc-preview" style="cursor:pointer;color:#d2ab43;margin-left:10px;">🔍 preview</span>' : ''}
+            ${isImageMime ? `<span id="doc-preview" style="cursor:pointer;color:#d2ab43;margin-left:10px;">${GLYPH_PREVIEW} preview</span>` : ''}
          </div>
        </div>
      </div>
--- a/extension/src/shared/glyphs.ts
+++ b/extension/src/shared/glyphs.ts
@@ -17,6 +17,9 @@ export const GLYPH_DEVICES       = '⌬';   // sidebar devices nav
 export const GLYPH_SETTINGS      = '⚙';   // sidebar settings nav
 export const GLYPH_LOCK          = '⏻';   // sidebar lock nav
 export const GLYPH_NEXT          = '▸';   // forward / next button (matches ▾/▸ disclosure family)
+export const GLYPH_COPY          = '⎘';   // copy to clipboard
+export const GLYPH_SYNC          = '⇅';   // sync / upload
+export const GLYPH_PREVIEW       = '⊕';   // preview / expand

 export const GLYPH_VAULT_TAB      = '⧉';   // U+29C9 pop-out to fullscreen vault tab

--- a/extension/src/vault/vault.ts
+++ b/extension/src/vault/vault.ts
@@ -11,7 +11,7 @@ import type {
 import { registerHost } from '../shared/state';
 import { lookupErrorCopy, type ErrorCta } from '../shared/error-copy';
 import {
-  GLYPH_TRASH, GLYPH_SETTINGS, GLYPH_LOCK,
+  GLYPH_TRASH, GLYPH_DEVICES, GLYPH_SETTINGS, GLYPH_LOCK,
  GLYPH_TYPE_LOGIN, GLYPH_TYPE_SECURE_NOTE, GLYPH_TYPE_TOTP,
  GLYPH_TYPE_CARD, GLYPH_TYPE_IDENTITY, GLYPH_TYPE_KEY, GLYPH_TYPE_DOCUMENT,
 } from '../shared/glyphs';
@@ -300,6 +300,7 @@ function renderShell(app: HTMLElement): void {
          <div class="vault-sidebar__nav">
            <button class="vault-sidebar__nav-item" data-nav="add" title="New item">+ new item</button>
            <button class="vault-sidebar__nav-item" data-nav="trash" title="Trash">${GLYPH_TRASH} <span class="vault-sidebar__nav-label">trash</span></button>
+            <button class="vault-sidebar__nav-item" data-nav="devices" title="Devices">${GLYPH_DEVICES} <span class="vault-sidebar__nav-label">devices</span></button>
            <button class="vault-sidebar__nav-item" data-nav="settings" title="Settings">${GLYPH_SETTINGS} <span class="vault-sidebar__nav-label">settings</span></button>
            <button class="vault-sidebar__nav-item" data-nav="lock" title="Lock">${GLYPH_LOCK} <span class="vault-sidebar__nav-label">lock</span></button>
          </div>
@@ -386,7 +387,7 @@ function closeDrawer(): void {
 }

 function getDrawerCoreFields(item: Item): Array<[string, string, boolean]> {
-  const core = item.core as Record<string, unknown>;
+  const core = item.core as unknown as Record<string, unknown>;
  if (!core) return [];
  const fields: Array<[string, string, boolean]> = [];