From e2260e9df4445e6f372dfafc4fdf3d4c1a33cd74 Mon Sep 17 00:00:00 2001
From: adlee-was-taken <aaron.daniel.lee@gmail.com>
Date: Thu, 30 Apr 2026 20:53:50 -0400
Subject: [PATCH] style(ext/vault): replace sidebar emoji nav with monochrome
 glyphs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

▦ trash · ⌬ devices · ⚙ settings · ⏻ lock — all imported from the new
shared/glyphs module so popup and fullscreen stay in sync. Regression
test scans the source for the old escape-coded emoji to prevent
backsliding.

Plan 2026-04-30 fullscreen UX phase 1 task 5.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 .../vault/__tests__/sidebar-glyphs.test.ts    | 29 +++++++++++++++++++
 extension/src/vault/vault.ts                  |  9 +++---
 2 files changed, 34 insertions(+), 4 deletions(-)
 create mode 100644 extension/src/vault/__tests__/sidebar-glyphs.test.ts

diff --git a/extension/src/vault/__tests__/sidebar-glyphs.test.ts b/extension/src/vault/__tests__/sidebar-glyphs.test.ts
new file mode 100644
index 0000000..1800bcd
--- /dev/null
+++ b/extension/src/vault/__tests__/sidebar-glyphs.test.ts
@@ -0,0 +1,29 @@
+import { describe, it, expect } from 'vitest';
+import * as fs from 'fs';
+import * as path from 'path';
+
+describe('vault sidebar glyphs', () => {
+  const vaultSrc = fs.readFileSync(
+    path.resolve(__dirname, '../vault.ts'),
+    'utf-8',
+  );
+
+  it('uses GLYPH_TRASH instead of the trash emoji', () => {
+    expect(vaultSrc).not.toMatch(/\u{1F5D1}/u);
+    expect(vaultSrc).toContain('GLYPH_TRASH');
+  });
+
+  it('uses GLYPH_DEVICES instead of the devices emoji', () => {
+    expect(vaultSrc).not.toMatch(/\u{1F4F1}/u);
+    expect(vaultSrc).toContain('GLYPH_DEVICES');
+  });
+
+  it('uses GLYPH_LOCK instead of the lock emoji', () => {
+    expect(vaultSrc).not.toMatch(/\u{1F512}/u);
+    expect(vaultSrc).toContain('GLYPH_LOCK');
+  });
+
+  it('uses GLYPH_SETTINGS for the settings nav', () => {
+    expect(vaultSrc).toContain('GLYPH_SETTINGS');
+  });
+});
diff --git a/extension/src/vault/vault.ts b/extension/src/vault/vault.ts
index 32f4d0d..77e8af8 100644
--- a/extension/src/vault/vault.ts
+++ b/extension/src/vault/vault.ts
@@ -9,6 +9,7 @@ import type {
   ItemId, ItemType, ManifestEntry, Item, VaultSettings, GeneratorRequest,
 } from '../shared/types';
 import { registerHost } from '../shared/state';
+import { GLYPH_TRASH, GLYPH_DEVICES, GLYPH_SETTINGS, GLYPH_LOCK } from '../shared/glyphs';
 import { renderItemDetail } from '../popup/components/item-detail';
 import { renderItemForm } from '../popup/components/item-form';
 import { renderTrash, teardown as teardownTrash } from '../popup/components/trash';
@@ -248,10 +249,10 @@ function renderShell(app: HTMLElement): void {
         <div class="vault-sidebar__list" id="vault-sidebar-list"></div>
         <div class="vault-sidebar__nav">
           <button class="vault-sidebar__nav-item" data-nav="add">+ new item</button>
-          <button class="vault-sidebar__nav-item" data-nav="trash">\u{1F5D1} trash</button>
-          <button class="vault-sidebar__nav-item" data-nav="devices">\u{1F4F1} devices</button>
-          <button class="vault-sidebar__nav-item" data-nav="settings">⚙ settings</button>
-          <button class="vault-sidebar__nav-item" data-nav="lock">\u{1F512} lock</button>
+          <button class="vault-sidebar__nav-item" data-nav="trash">${GLYPH_TRASH} trash</button>
+          <button class="vault-sidebar__nav-item" data-nav="devices">${GLYPH_DEVICES} devices</button>
+          <button class="vault-sidebar__nav-item" data-nav="settings">${GLYPH_SETTINGS} settings</button>
+          <button class="vault-sidebar__nav-item" data-nav="lock">${GLYPH_LOCK} lock</button>
         </div>
       </div>
       <div class="vault-pane vault-pane--empty" id="vault-pane">