bento home: redesigned home, track detail, playground gallery, uikit nav
Created by: jedmund
Summary
Rebuilds the home screen around the handoff's bento design and the supporting navigation machinery underneath it.
-
Bento home replaces the tree-expanding
HomeScreen. New chips (streak, module, style), a continue-learning hero card with five animated hero medias (spectrum, waveform, harmonics, piano roll, arrangement), an up-next reco card, per-track tiles with progress strips, and a playground rail of pill cards. -
Push destinations for deeper navigation:
TrackDetailScreen(full curriculum listing with inline lesson rows + per-status circles) andPlaygroundGalleryScreen(the "See all" target showing every tool grouped into Instruments / Explorers / Exercises with blurbs and a "coming soon" badge for unfinished ones). -
Design system: centralizes
Typography,ColorTokens, andTrackPalettetokens plus a debugDesignSystemGalleryview. Foreground tokens areShapeStylevalues that pick up the user's filter palette as a subtle hue tint. -
Routing:
CurriculumStoreswitches from a singleNavigationStateenum to a[Route]path. AddsPlaygroundCatalogas the single source of tool classification + ready/coming-soon status. -
UIKit
NavigationHost:UIViewControllerRepresentablewrapping aUINavigationControllerwith a custom slide-with-fade transition animator and aUIPercentDrivenInteractiveTransition-driven edge-pan. Gives us real interactive-pop physics while keeping theGenerativeBackgroundpersistent behind every pushed screen (previousNavigationStackapproach caused ghosting with transparent hosting controllers). - Dark mode: filter palette auto-inverts from the user's light pick; foreground tokens still resolve to near-white with a subtle hue shift.
- Legacy
HomeScreen,TrackScreen,ModuleScreen, andPlaygroundGridretired.
Test plan
-
Home renders over the filter wallpaper (light + dark) -
Tap a track tile: track detail pushes, filter stays constant, no ghosting -
Tap a lesson row: pushes into LessonScreen -
Back chip + edge-swipe both pop with proper physics -
Tap "See all" in Playground header: gallery pushes -
Gallery coming-soon cards are faded and non-tappable -
Style chip on home opens the background diagnostics panel -
Debug toolbar (DEBUG only): hero media switcher, lesson picker, design system gallery all work -
Filter darkColor changes visibly tint text (warmer / cooler)