feat(epics): Kanban board view with side-panel drill-down#8
Merged
Conversation
Adds a board layout to the Epics page alongside the existing timeline. - `EpicsKanban` renders three columns — Planning (not-started), In Progress, Done — with one card per epic. Each card shows the epic id, title, status badge, story counter, and a segmented progress bar. - `EpicStoriesSheet` is the side-panel drill-down: a shadcn Sheet that first lists the epic's stories, then swaps to `StoryDetailView` when a story is selected, with a "back to stories" affordance. Internal navigation resets whenever the targeted epic changes (derived during render rather than via an effect). - `EpicsBrowser` gains a Timeline / Board toggle on the epics list. Timeline keeps the existing in-page navigation; Board opens the side-panel sheet on click. Timeline stays the default so existing flows are unchanged. Reuses `Sheet`, `StoryDetailView`, `StatusBadge`, `SegmentedProgressBar`, and the `StaggeredList` animation primitives, so the new view inherits the project's visual language without new shared primitives.
Radix Dialog requires a Title to be mounted at all times for the
panel's accessible name. The previous code unmounted SheetTitle when
swapping the sheet body to the story-detail view, leaving the panel
without an accessible name and triggering a Radix warning.
Now a `<SheetTitle className="sr-only">Story {id}: {title}</SheetTitle>`
stays mounted in detail view alongside the visible "Back to stories"
button. The visible heading inside StoryDetailView remains the primary
on-screen title for sighted users; the sr-only one only services screen
readers and Radix's accessibility contract.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds the V1 Kanban view for the Epics page that Brian and Evie validated, alongside the existing timeline. Three pieces, all on the same screen.
EpicsKanbanThree-column board: Planning (not-started), In Progress, Done. Each card carries the epic id, title,
StatusBadge,{completed}/{total} storiescounter, and aSegmentedProgressBar. Layout collapses gracefully on narrow viewports.EpicStoriesSheet(drill-down)Click a card → a shadcn
Sheetslides in from the right. Two-state internal navigation:StatusBadgeand task counters.StoryDetailView(description, acceptance criteria, tasks). A "back to stories" button restores the list.State resets to the list whenever the targeted epic changes — implemented by tracking the epic id during render (not in an effect), per the React 19 / Compiler guidance.
Toggle in
EpicsBrowserA Timeline / Board toggle appears above the epics list (pattern borrowed from the Stories page). Timeline stays the default, so existing user flows are unchanged. Board mode routes clicks to the Sheet rather than the in-page
view: "story"navigation.Reuse
No new shared primitives. The new components compose:
Sheet,SheetContent,SheetHeader,SheetTitle,SheetDescriptionStoryDetailView,StatusBadge,SegmentedProgressBarStaggeredList/StaggeredItemfor the animation rhythmButton+Columns3/GanttChartSquareicons for the toggleTest plan
pnpm test— 151/151 passing (no functional regression — UI-only change)pnpm tsc --noEmit— cleanpnpm lint— clean (only the 2 pre-existing TanStack warnings)StoryDetailView, back button restores the list