As a user I want the library screen to feel like my personal toolkit so I enjoy browsing and adding exercises

[ChristopherRotnes]

Summary

Redesign `Bibliotek.jsx` with a Condensed hero, custom pill tab strip replacing Carbon Tabs, a live search field, a horizontally scrollable "Snarvei" shortcut carousel, and styled exercise list rows with left accent strips and muscle chip caps.

Part of #96. Depends on phase 2 (PageShell exports: AccentChip, PageHeading Cond update).

Priority

Medium

UI spec (Carbon g100)

• Hero: "Dine byggklosser." (inherits Plex Cond from Phase 2 PageHeading update)
• Pill tab strip: custom two-button pill container replacing Carbon `Tabs`; active → `background: var(--accent)`; `onKeyDown` ArrowLeft/ArrowRight for keyboard nav; preserves `initialTab` prop
• Search: ``, `borderRadius: 8px`, `Search` icon, live filter
• "Snarvei" carousel: horizontally scrollable, bleeds to screen edges (`margin: 0 -16px`, `padding: 0 16px`), `scrollbarWidth: none`
• Exercise rows: 3px left strip, 10px AccentChip muscle caps, mono reps right-aligned
• Template cards: `borderRadius: var(--r-card)`, `border: 1px solid var(--border-subtle-wl)`

Acceptance criteria

• Pill tabs replace Carbon Tabs; active tab is magenta
• Arrow key navigation works between tabs
• `initialTab` prop respected
• Search filters exercise list live
• "Snarvei" carousel scrolls horizontally and bleeds to edges
• Exercise rows have 3px left strip and 10px muscle chip caps
• Template cards have 16px radius
• Add/edit/delete exercise and template still work
• WCAG AA; focus rings intact on custom tab buttons

Out of scope

• Usage analytics for shortcut carousel ordering

[ChristopherRotnes]

Implemented and verified in PR #112. Closed.