feat(M14): 3-pane backlog — generic SplitPane, BacklogStore, SSE realtime, card-grid TaskPanel (#22)
* feat(split-pane): refactor to generic n-pane SplitPane with cookie persistence New API: panes[], defaultSplit[], cookieKey, tabLabels. Supports arbitrary number of panes with n-1 draggable dividers and JSON cookie persistence. Replaces TriplePane; mobile renders tabs. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(split-pane): migrate callers to new panes[] API Backlog page and sprint board now use generic SplitPane. TriplePane removed; sprint board uses 3-pane with defaultSplit=[28,35,37]. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * test(split-pane): add unit tests for 2/3-pane, cookie-restore, mobile tabs Added jsdom + @testing-library/react devDeps for component testing. 7 cases: render, divider count, cookie restore, invalid cookie fallback, mobile tab render/switch, and no-dividers-on-mobile. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(backlog): add BacklogStore Zustand store with applyChange reducer State: pbis, storiesByPbi, tasksByStory. setInitialData for server hydration; applyChange(entity, op, data) handles I/U/D for SSE events. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(backlog): server-fetch tasks + hydrate BacklogStore on page load Page now fetches tasks parallel to stories and groups by story_id. BacklogHydrationWrapper calls setInitialData on mount so the store is ready for downstream SSE consumers. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(backlog): add EmptyPanel shared component, replace inline empty states EmptyPanel takes title?, message, and optional action with DemoTooltip. Replaces duplicate inline empty-state markup in pbi-list and story-panel. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(backlog): add TaskPanel with sortable rows and TaskDialog wiring Reads selectedStoryId + tasksByStory from stores. DnD reorder via reorderTasksAction. Row click → ?editTask, + button → ?newTask&storyId. DemoTooltip on drag handles and + button. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(backlog): wire TaskPanel + TaskDialog into backlog page 3-pane SplitPane [20,45,35]. searchParams for newTask/editTask. TaskDialog and EditTaskLoader render on ?newTask and ?editTask. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * test(backlog): add TaskPanel tests for render states and click handlers 7 cases: no-story empty, no-tasks empty+action, tasks render, + button router.push, row click router.push, demo disabled button, demo disabled handles. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(backlog): migrate PbiList to store-driven via useBacklogStore Removes pbis prop; reads from useBacklogStore(s => s.pbis) so SSE updates reflect in real-time without prop drilling. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(backlog): migrate StoryPanel to store-driven + selectStory on click Removes storiesByPbi prop; reads from useBacklogStore. Card click now dispatches selectStory(id) + shows isSelected highlight. Edit moved to inline pencil button. page.tsx drops pbis/storiesByPbi props. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * test(backlog): add 3-pane integration tests for click-cascade flow Covers: empty states, PBI→stories, story→tasks, cascade-reset, isSelected highlight. localStorage mocked for sort-mode persistence. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(ST-1115): SSE backlog realtime — endpoint, hook, hydration mount, tests Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(ST-1116): mobile auto-switch tabs + back button in BacklogSplitPane Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * docs(ST-1116): update functional-spec (3-pane backlog + mobile) and architecture (backlog SSE + backlog-store) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(ST-1117): TaskPanel card-grid — BacklogCard + rectSortingStrategy, tests updated Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix(tests): correct PbiStatusApi type and remove duplicate mock keys Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
GitHub
parent
6cd98129f2
commit
8877ea469d
22 changed files with 2474 additions and 305 deletions
|
|
@ -7,7 +7,7 @@ import {
|
|||
} from '@dnd-kit/core'
|
||||
import { sortableKeyboardCoordinates, arrayMove } from '@dnd-kit/sortable'
|
||||
import { toast } from 'sonner'
|
||||
import { TriplePane } from '@/components/split-pane/triple-pane'
|
||||
import { SplitPane } from '@/components/split-pane/split-pane'
|
||||
import { SprintBacklogLeft, SprintBacklogRight } from './sprint-backlog'
|
||||
import type { SprintStory, PbiWithStories, ProductMember } from './sprint-backlog'
|
||||
import { TaskList } from './task-list'
|
||||
|
|
@ -200,18 +200,20 @@ export function SprintBoardClient({
|
|||
onDragStart={handleDragStart}
|
||||
onDragEnd={handleDragEnd}
|
||||
>
|
||||
<TriplePane
|
||||
storageKey={`sprint-${productId}`}
|
||||
left={
|
||||
<SplitPane
|
||||
cookieKey={`sprint-${productId}`}
|
||||
defaultSplit={[28, 35, 37]}
|
||||
tabLabels={['Backlog', 'Sprint', 'Taken']}
|
||||
panes={[
|
||||
<SprintBacklogRight
|
||||
key="backlog"
|
||||
pbisWithStories={pbisWithStories}
|
||||
sprintStoryIds={sprintStoryIds}
|
||||
isDemo={isDemo}
|
||||
onAdd={handleAdd}
|
||||
/>
|
||||
}
|
||||
middle={
|
||||
/>,
|
||||
<SprintBacklogLeft
|
||||
key="sprint"
|
||||
sprintId={sprintId}
|
||||
stories={sprintStories}
|
||||
isDemo={isDemo}
|
||||
|
|
@ -222,11 +224,10 @@ export function SprintBoardClient({
|
|||
productId={productId}
|
||||
members={members}
|
||||
onAssigneeChange={handleAssigneeChange}
|
||||
/>
|
||||
}
|
||||
right={
|
||||
/>,
|
||||
selectedStoryId ? (
|
||||
<TaskList
|
||||
key="tasks"
|
||||
storyId={selectedStoryId}
|
||||
storyCode={stories.find(s => s.id === selectedStoryId)?.code ?? null}
|
||||
sprintId={sprintId}
|
||||
|
|
@ -235,11 +236,11 @@ export function SprintBoardClient({
|
|||
isDemo={isDemo}
|
||||
/>
|
||||
) : (
|
||||
<div className="flex items-center justify-center h-full">
|
||||
<div key="tasks-empty" className="flex items-center justify-center h-full">
|
||||
<p className="text-sm text-muted-foreground">Selecteer een story om de taken te bekijken.</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
),
|
||||
]}
|
||||
/>
|
||||
<DragOverlay>
|
||||
{activeDragStory && (
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue