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

refactor(ext/shared): rename REQUIRED_PILL → REQUIRED_PILL_HTML

Browse Source 
Code-review feedback on Task 1: the _HTML suffix makes the 'this is raw
HTML, do not escape' contract obvious at every call site. Cheap to do
now (zero consumers); would be 8 diffs once Tasks 4-6 wire the constant
into the type forms.

Plan updated in lockstep so Task 4 references the new name.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
adlee-was-taken
2026-04-30 20:29:49 -04:00
parent 33b3f0b019
commit 506ad9711d
3 changed files with 20 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
docs/superpowers/plans/2026-04-30-fullscreen-ux-phase-1-visual-foundation.md
View File

@@ -4,7 +4,7 @@
**Goal:** Establish the shared visual language (glyph constants, color tokens, focus ring, required pill, header subtitle) and clean up vestigial popup-only UI in the fullscreen vault. No structural or behavioral changes; pure visual foundation that the next three phases will build on. **Goal:** Establish the shared visual language (glyph constants, color tokens, focus ring, required pill, header subtitle) and clean up vestigial popup-only UI in the fullscreen vault. No structural or behavioral changes; pure visual foundation that the next three phases will build on.
**Architecture:** A new `extension/src/shared/glyphs.ts` module exports unicode glyph constants and a `REQUIRED_PILL` HTML snippet, consumed by both popup and fullscreen surfaces. CSS custom properties added to `popup/styles.css` and `vault/vault.css` provide the shared color/focus tokens. All eight type forms migrate from `<span class="req">*</span>` to the pill; sidebar nav buttons replace emoji with glyph constants; the popout-to-tab button is gated behind `!isInTab()` so it disappears in fullscreen. Fullscreen forms gain a static "esc to cancel" subtitle (dynamic dirty-state lands in Phase 3). **Architecture:** A new `extension/src/shared/glyphs.ts` module exports unicode glyph constants and a `REQUIRED_PILL_HTML` HTML snippet, consumed by both popup and fullscreen surfaces. CSS custom properties added to `popup/styles.css` and `vault/vault.css` provide the shared color/focus tokens. All eight type forms migrate from `<span class="req">*</span>` to the pill; sidebar nav buttons replace emoji with glyph constants; the popout-to-tab button is gated behind `!isInTab()` so it disappears in fullscreen. Fullscreen forms gain a static "esc to cancel" subtitle (dynamic dirty-state lands in Phase 3).
**Tech stack:** TypeScript, vanilla DOM (no framework), Vitest + happy-dom for unit tests. No new runtime dependencies. **Tech stack:** TypeScript, vanilla DOM (no framework), Vitest + happy-dom for unit tests. No new runtime dependencies.
@@ -39,8 +39,8 @@ describe('glyphs', () => {
expect(glyphs.GLYPH_LOCK).toBe('⏻'); expect(glyphs.GLYPH_LOCK).toBe('⏻');
}); });
it('exports REQUIRED_PILL as an HTML snippet', () => { it('exports REQUIRED_PILL_HTML as an HTML snippet', () => {
expect(glyphs.REQUIRED_PILL).toBe('<span class="req-pill">required</span>'); expect(glyphs.REQUIRED_PILL_HTML).toBe('<span class="req-pill">required</span>');
}); });
}); });
``` ```
@@ -74,8 +74,8 @@ export const GLYPH_SETTINGS = '⚙'; // sidebar settings nav
export const GLYPH_LOCK = '⏻'; // sidebar lock nav export const GLYPH_LOCK = '⏻'; // sidebar lock nav
/// Inline HTML snippet for the required-field pill. Use after a label's text: /// Inline HTML snippet for the required-field pill. Use after a label's text:
/// `<label class="label" for="f-title">title ${REQUIRED_PILL}</label>` /// `<label class="label" for="f-title">title ${REQUIRED_PILL_HTML}</label>`
export const REQUIRED_PILL = '<span class="req-pill">required</span>'; export const REQUIRED_PILL_HTML = '<span class="req-pill">required</span>';
``` ```
- [ ] **Step 4: Run test to verify it passes** - [ ] **Step 4: Run test to verify it passes**
@@ -90,7 +90,7 @@ git -C /home/alee/Sources/relicario add extension/src/shared/glyphs.ts extension
git -C /home/alee/Sources/relicario commit -m "feat(ext/shared): glyph constants module for unified icon language git -C /home/alee/Sources/relicario commit -m "feat(ext/shared): glyph constants module for unified icon language
Centralizes the unicode glyphs used by sidebar nav and form action buttons Centralizes the unicode glyphs used by sidebar nav and form action buttons
so popup and fullscreen surfaces stay in sync. Includes the REQUIRED_PILL so popup and fullscreen surfaces stay in sync. Includes the REQUIRED_PILL_HTML
snippet used to replace the trailing-asterisk required-field marker. snippet used to replace the trailing-asterisk required-field marker.
Plan 2026-04-30 fullscreen UX phase 1 task 1. Plan 2026-04-30 fullscreen UX phase 1 task 1.
@@ -330,7 +330,7 @@ Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>"
--- ---
## Task 4: Migrate required-marker sites to REQUIRED_PILL ## Task 4: Migrate required-marker sites to REQUIRED_PILL_HTML
**Files (10 sites across 7 files):** **Files (10 sites across 7 files):**
- Modify: `extension/src/popup/components/types/card.ts:182` - Modify: `extension/src/popup/components/types/card.ts:182`
@@ -392,7 +392,7 @@ In `extension/src/popup/components/types/login.ts`:
Add an import near the top (after the existing imports): Add an import near the top (after the existing imports):
```typescript ```typescript
import { REQUIRED_PILL } from '../../../shared/glyphs'; import { REQUIRED_PILL_HTML } from '../../../shared/glyphs';
``` ```
Find line 252: Find line 252:
@@ -402,7 +402,7 @@ Find line 252:
Replace with: Replace with:
```typescript ```typescript
<div class="form-group"><label class="label" for="f-title">title ${REQUIRED_PILL}</label> <div class="form-group"><label class="label" for="f-title">title ${REQUIRED_PILL_HTML}</label>
``` ```
- [ ] **Step 4: Run the test to verify it passes for login** - [ ] **Step 4: Run the test to verify it passes for login**
@@ -413,8 +413,8 @@ Expected: PASS.
- [ ] **Step 5: Migrate the remaining six files** - [ ] **Step 5: Migrate the remaining six files**
Apply the same pattern to each of these six files. For each: Apply the same pattern to each of these six files. For each:
1. Add `import { REQUIRED_PILL } from '../../../shared/glyphs';` 1. Add `import { REQUIRED_PILL_HTML } from '../../../shared/glyphs';`
2. Replace each `<span class="req">*</span>` with `${REQUIRED_PILL}` 2. Replace each `<span class="req">*</span>` with `${REQUIRED_PILL_HTML}`
| File | Line(s) | | File | Line(s) |
|---|---| |---|---|
@@ -444,10 +444,10 @@ Expected: `compiled with 2 warnings`.
```bash ```bash
git -C /home/alee/Sources/relicario add extension/src/popup/components/types/ extension/src/shared/ git -C /home/alee/Sources/relicario add extension/src/popup/components/types/ extension/src/shared/
git -C /home/alee/Sources/relicario commit -m "refactor(ext/popup): migrate required-field markers to REQUIRED_PILL git -C /home/alee/Sources/relicario commit -m "refactor(ext/popup): migrate required-field markers to REQUIRED_PILL_HTML
Replaces ten <span class=\"req\">*</span> sites across all seven type Replaces ten <span class=\"req\">*</span> sites across all seven type
forms with the shared REQUIRED_PILL snippet ('required' badge). Adds a forms with the shared REQUIRED_PILL_HTML snippet ('required' badge). Adds a
regression test pinning the new HTML in the login form. regression test pinning the new HTML in the login form.
Plan 2026-04-30 fullscreen UX phase 1 task 4. Plan 2026-04-30 fullscreen UX phase 1 task 4.

4
extension/src/shared/__tests__/glyphs.test.ts
View File

@@ -15,7 +15,7 @@ describe('glyphs', () => {
expect(glyphs.GLYPH_LOCK).toBe('⏻'); expect(glyphs.GLYPH_LOCK).toBe('⏻');
}); });
it('exports REQUIRED_PILL as an HTML snippet', () => { it('exports REQUIRED_PILL_HTML as an HTML snippet', () => {
expect(glyphs.REQUIRED_PILL).toBe('<span class="req-pill">required</span>'); expect(glyphs.REQUIRED_PILL_HTML).toBe('<span class="req-pill">required</span>');
}); });
}); });

7
extension/src/shared/glyphs.ts
View File

@@ -18,5 +18,8 @@ export const GLYPH_SETTINGS = '⚙'; // sidebar settings nav
export const GLYPH_LOCK = '⏻'; // sidebar lock nav export const GLYPH_LOCK = '⏻'; // sidebar lock nav
/// Inline HTML snippet for the required-field pill. Use after a label's text: /// Inline HTML snippet for the required-field pill. Use after a label's text:
/// `<label class="label" for="f-title">title ${REQUIRED_PILL}</label>` /// `<label class="label" for="f-title">title ${REQUIRED_PILL_HTML}</label>`
export const REQUIRED_PILL = '<span class="req-pill">required</span>'; ///
/// Requires the `.req-pill` CSS rule (added in Tasks 2 and 3 to popup/styles.css
/// and vault/vault.css respectively).
export const REQUIRED_PILL_HTML = '<span class="req-pill">required</span>';