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.
**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.
@@ -39,8 +39,8 @@ describe('glyphs', () => {
expect(glyphs.GLYPH_LOCK).toBe('⏻');
});
it('exports REQUIRED_PILL as an HTML snippet', () => {
expect(glyphs.REQUIRED_PILL).toBe('<span class="req-pill">required</span>');
it('exports REQUIRED_PILL_HTML as an HTML snippet', () => {
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
/// 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>';
/// `<label class="label" for="f-title">title ${REQUIRED_PILL_HTML}</label>`
export const REQUIRED_PILL_HTML = '<span class="req-pill">required</span>';
```
- [ ] **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
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.
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):**
- 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):
```typescript
import { REQUIRED_PILL } from '../../../shared/glyphs';
import { REQUIRED_PILL_HTML } from '../../../shared/glyphs';
```
Find line 252:
@@ -402,7 +402,7 @@ Find line 252:
Replace with:
```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**
@@ -413,8 +413,8 @@ Expected: PASS.
- [ ] **Step 5: Migrate the remaining six files**
Apply the same pattern to each of these six files. For each:
1. Add `import { REQUIRED_PILL } from '../../../shared/glyphs';`
2. Replace each `<span class="req">*</span>` with `${REQUIRED_PILL}`
1. Add `import { REQUIRED_PILL_HTML } from '../../../shared/glyphs';`
2. Replace each `<span class="req">*</span>` with `${REQUIRED_PILL_HTML}`
| File | Line(s) |
|---|---|
@@ -444,10 +444,10 @@ Expected: `compiled with 2 warnings`.
```bash
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
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.
Plan 2026-04-30 fullscreen UX phase 1 task 4.