64 lines
3.4 KiB
Markdown
64 lines
3.4 KiB
Markdown
---
|
||
task: Fix four UI bugs in humor-units app
|
||
slug: 20260316-120000_fix-humor-units-ui-bugs
|
||
effort: standard
|
||
phase: complete
|
||
progress: 22/22
|
||
mode: interactive
|
||
started: 2026-03-16T12:00:00Z
|
||
updated: 2026-03-16T12:01:00Z
|
||
---
|
||
|
||
## Context
|
||
|
||
Four UI bugs in the humor-units SvelteKit converter app:
|
||
1. Text contrast: `.result-value` has no explicit color, inherits nothing useful against `#FDFCFB` card background
|
||
2. From-unit disappears from grid on shift+click, causing layout shift
|
||
3. Shift+click clears `highlightedUnitId` — the two states must be independent
|
||
4. No dismiss button on the highlighted result banner above the grid
|
||
|
||
Files affected:
|
||
- `src/app.css` — text color fixes
|
||
- `src/routes/+page.svelte` — grid inclusion, state independence, dismiss button
|
||
- `src/components/ConversionResult.svelte` — `is-input-unit` prop/class
|
||
|
||
### Risks
|
||
- `highlightedResult` derived currently searches `results` (excludes from-unit); if from-unit gets highlighted, it won't be found — must fix the derived too
|
||
- `ResultItem` interface uses `Big` type for `convertedValue`; inputValue is a plain `number` — must wrap with `Big()` for type consistency
|
||
- Adding `isInputUnit` prop to `ConversionResult` requires updating the prop interface
|
||
|
||
## Criteria
|
||
|
||
- [x] ISC-1: `.result-value` has explicit `color: #2C2C2C` in app.css
|
||
- [x] ISC-2: `.result-label` has explicit `color: #555550` in app.css
|
||
- [x] ISC-3: `.result-symbol` has explicit `color: #888880` in app.css
|
||
- [x] ISC-4: `.highlighted-value` has explicit `color: #2C2C2C` in app.css
|
||
- [x] ISC-5: `.highlighted-label` has explicit `color: #2C2C2C` in app.css
|
||
- [x] ISC-6: `results` derived includes the from-unit (no `.filter` exclusion)
|
||
- [x] ISC-7: From-unit entry in results uses `inputValue` (wrapped as Big) as its value
|
||
- [x] ISC-8: From-unit tile renders in definition order (not appended or moved)
|
||
- [x] ISC-9: From-unit tile has `isInputUnit` prop passed as `true` in grid
|
||
- [x] ISC-10: `ConversionResult` accepts `isInputUnit` boolean prop
|
||
- [x] ISC-11: From-unit tile renders with CSS class `is-input-unit` when `isInputUnit` is true
|
||
- [x] ISC-12: `is-input-unit` CSS class defined in app.css with subtle dashed border style
|
||
- [x] ISC-13: `handleSetInput` does NOT set `highlightedUnitId = null`
|
||
- [x] ISC-14: `highlightedUnitId` is only set/cleared by `handleHighlight` and dismiss button
|
||
- [x] ISC-15: `highlightedResult` derived searches ALL units (not filtered results) so from-unit can be highlighted
|
||
- [x] ISC-16: `.highlighted-result` block contains a "×" dismiss button element
|
||
- [x] ISC-17: Dismiss button has `aria-label="Remove highlight"`
|
||
- [x] ISC-18: Clicking dismiss button sets `highlightedUnitId` to null
|
||
- [x] ISC-19: Dismiss button styled with `position: absolute; top: 0.5rem; right: 0.75rem` or equivalent
|
||
- [x] ISC-20: `.highlighted-result` has `position: relative` to anchor dismiss button
|
||
- [x] ISC-21: `npm run build` exits with code 0 (zero TypeScript/Svelte errors)
|
||
- [x] ISC-A1: Grid order never changes when from-unit or highlight changes (definition order preserved)
|
||
|
||
### Risks
|
||
- `Big` must be imported in `+page.svelte` to wrap `inputValue` for the from-unit ResultItem
|
||
- `highlightedResult` derived will work correctly once `results` includes all units
|
||
- `handleUnitChange` guard clearing `highlightedUnitId` when dropdown changes to same unit: leave intact (not in scope)
|
||
- `is-input-unit` dashed border style chosen; subtle enough not to be jarring
|
||
|
||
## Decisions
|
||
|
||
## Verification
|