alee/relicario
1
0
Fork 0
Code Issues Pull Requests 4 Actions Packages Projects Releases Wiki Activity

style(ext/vault): replace sidebar emoji nav with monochrome glyphs

Browse Source 
▦ 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>
This commit is contained in:
adlee-was-taken
2026-04-30 20:53:50 -04:00
parent a634b6c745
commit e2260e9df4
2 changed files with 34 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
extension/src/vault/__tests__/sidebar-glyphs.test.ts Normal file
View File

@@ -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');
});
});

9
extension/src/vault/vault.ts
View File

@@ -9,6 +9,7 @@ import type {
ItemId, ItemType, ManifestEntry, Item, VaultSettings, GeneratorRequest, ItemId, ItemType, ManifestEntry, Item, VaultSettings, GeneratorRequest,
} from '../shared/types'; } from '../shared/types';
import { registerHost } from '../shared/state'; 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 { renderItemDetail } from '../popup/components/item-detail';
import { renderItemForm } from '../popup/components/item-form'; import { renderItemForm } from '../popup/components/item-form';
import { renderTrash, teardown as teardownTrash } from '../popup/components/trash'; 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__list" id="vault-sidebar-list"></div>
<div class="vault-sidebar__nav"> <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="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="trash">${GLYPH_TRASH} trash</button>
<button class="vault-sidebar__nav-item" data-nav="devices">\u{1F4F1} devices</button> <button class="vault-sidebar__nav-item" data-nav="devices">${GLYPH_DEVICES} devices</button>
<button class="vault-sidebar__nav-item" data-nav="settings">⚙ settings</button> <button class="vault-sidebar__nav-item" data-nav="settings">${GLYPH_SETTINGS} settings</button>
<button class="vault-sidebar__nav-item" data-nav="lock">\u{1F512} lock</button> <button class="vault-sidebar__nav-item" data-nav="lock">${GLYPH_LOCK} lock</button>
</div> </div>
</div> </div>
<div class="vault-pane vault-pane--empty" id="vault-pane"> <div class="vault-pane vault-pane--empty" id="vault-pane">