dickloads/MEMORY/WORK/20260316-120000_fix-humor-units-ui-bugs/PRD.md

task, slug, effort, phase, progress, mode, started, updated

task	slug	effort	phase	progress	mode	started	updated
Fix four UI bugs in humor-units app	20260316-120000_fix-humor-units-ui-bugs	standard	complete	22/22	interactive	2026-03-16T12:00:00Z	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

• ISC-1: .result-value has explicit color: #2C2C2C in app.css
• ISC-2: .result-label has explicit color: #555550 in app.css
• ISC-3: .result-symbol has explicit color: #888880 in app.css
• ISC-4: .highlighted-value has explicit color: #2C2C2C in app.css
• ISC-5: .highlighted-label has explicit color: #2C2C2C in app.css
• ISC-6: results derived includes the from-unit (no .filter exclusion)
• ISC-7: From-unit entry in results uses inputValue (wrapped as Big) as its value
• ISC-8: From-unit tile renders in definition order (not appended or moved)
• ISC-9: From-unit tile has isInputUnit prop passed as true in grid
• ISC-10: ConversionResult accepts isInputUnit boolean prop
• ISC-11: From-unit tile renders with CSS class is-input-unit when isInputUnit is true
• ISC-12: is-input-unit CSS class defined in app.css with subtle dashed border style
• ISC-13: handleSetInput does NOT set highlightedUnitId = null
• ISC-14: highlightedUnitId is only set/cleared by handleHighlight and dismiss button
• ISC-15: highlightedResult derived searches ALL units (not filtered results) so from-unit can be highlighted
• ISC-16: .highlighted-result block contains a "×" dismiss button element
• ISC-17: Dismiss button has aria-label="Remove highlight"
• ISC-18: Clicking dismiss button sets highlightedUnitId to null
• ISC-19: Dismiss button styled with position: absolute; top: 0.5rem; right: 0.75rem or equivalent
• ISC-20: .highlighted-result has position: relative to anchor dismiss button
• ISC-21: npm run build exits with code 0 (zero TypeScript/Svelte errors)
• 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