feat(ext/shared): glyph constants module for unified icon language
Centralizes the unicode glyphs used by sidebar nav and form action buttons so popup and fullscreen surfaces stay in sync. Includes the REQUIRED_PILL snippet used to replace the trailing-asterisk required-field marker. Plan 2026-04-30 fullscreen UX phase 1 task 1. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
21
extension/src/shared/__tests__/glyphs.test.ts
Normal file
21
extension/src/shared/__tests__/glyphs.test.ts
Normal file
@@ -0,0 +1,21 @@
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import * as glyphs from '../glyphs';
|
||||
|
||||
describe('glyphs', () => {
|
||||
it('exports the documented glyph constants', () => {
|
||||
expect(glyphs.GLYPH_REVEAL).toBe('⊙');
|
||||
expect(glyphs.GLYPH_HIDE).toBe('⊘');
|
||||
expect(glyphs.GLYPH_GENERATE).toBe('↻');
|
||||
expect(glyphs.GLYPH_FILL_FROM_TAB).toBe('⤓');
|
||||
expect(glyphs.GLYPH_QR).toBe('◫');
|
||||
expect(glyphs.GLYPH_MONO).toBe('≡');
|
||||
expect(glyphs.GLYPH_TRASH).toBe('▦');
|
||||
expect(glyphs.GLYPH_DEVICES).toBe('⌬');
|
||||
expect(glyphs.GLYPH_SETTINGS).toBe('⚙');
|
||||
expect(glyphs.GLYPH_LOCK).toBe('⏻');
|
||||
});
|
||||
|
||||
it('exports REQUIRED_PILL as an HTML snippet', () => {
|
||||
expect(glyphs.REQUIRED_PILL).toBe('<span class="req-pill">required</span>');
|
||||
});
|
||||
});
|
||||
22
extension/src/shared/glyphs.ts
Normal file
22
extension/src/shared/glyphs.ts
Normal file
@@ -0,0 +1,22 @@
|
||||
//
|
||||
// Unicode glyph constants used across popup and fullscreen surfaces. All
|
||||
// glyphs are monochrome unicode (no emoji) so they render identically in the
|
||||
// codebase's monospace font. Pair each button glyph with a `title=` tooltip
|
||||
// at the call site for accessibility — the constants here are the visual,
|
||||
// not the affordance.
|
||||
|
||||
export const GLYPH_REVEAL = '⊙'; // password reveal toggle (hidden state)
|
||||
export const GLYPH_HIDE = '⊘'; // password reveal toggle (revealed state)
|
||||
export const GLYPH_GENERATE = '↻'; // password / passphrase generate
|
||||
export const GLYPH_FILL_FROM_TAB = '⤓'; // pull URL from active browser tab
|
||||
export const GLYPH_QR = '◫'; // paste / upload QR image (TOTP)
|
||||
export const GLYPH_MONO = '≡'; // toggle notes monospace font
|
||||
|
||||
export const GLYPH_TRASH = '▦'; // sidebar trash nav
|
||||
export const GLYPH_DEVICES = '⌬'; // sidebar devices nav
|
||||
export const GLYPH_SETTINGS = '⚙'; // sidebar settings nav
|
||||
export const GLYPH_LOCK = '⏻'; // sidebar lock nav
|
||||
|
||||
/// Inline HTML snippet for the required-field pill. Use after a label's text:
|
||||
/// `<label class="label" for="f-title">title ${REQUIRED_PILL}</label>`
|
||||
export const REQUIRED_PILL = '<span class="req-pill">required</span>';
|
||||
Reference in New Issue
Block a user