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
|
|
@ -27,9 +27,11 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@
|
|||
import { PanelNavBar } from '@/components/shared/panel-nav-bar'
|
||||
import { useSelectionStore } from '@/stores/selection-store'
|
||||
import { usePlannerStore } from '@/stores/planner-store'
|
||||
import { useBacklogStore } from '@/stores/backlog-store'
|
||||
import { reorderStoriesAction } from '@/actions/stories'
|
||||
import { StoryDialog, type StoryDialogState } from './story-dialog'
|
||||
import { BacklogCard } from './backlog-card'
|
||||
import { EmptyPanel } from './empty-panel'
|
||||
import { DemoTooltip } from '@/components/shared/demo-tooltip'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
|
|
@ -59,17 +61,20 @@ export interface Story {
|
|||
|
||||
interface StoryPanelProps {
|
||||
productId: string
|
||||
storiesByPbi: Record<string, Story[]>
|
||||
isDemo: boolean
|
||||
}
|
||||
|
||||
// --- Sortable story block ---
|
||||
function SortableStoryBlock({
|
||||
story,
|
||||
onClick,
|
||||
isSelected,
|
||||
onSelect,
|
||||
onEdit,
|
||||
}: {
|
||||
story: Story
|
||||
onClick: () => void
|
||||
isSelected: boolean
|
||||
onSelect: () => void
|
||||
onEdit: () => void
|
||||
}) {
|
||||
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
|
||||
id: story.id,
|
||||
|
|
@ -91,19 +96,33 @@ function SortableStoryBlock({
|
|||
code={story.code}
|
||||
priority={story.priority}
|
||||
isDragging={isDragging}
|
||||
onClick={onClick}
|
||||
isSelected={isSelected}
|
||||
onClick={onSelect}
|
||||
badge={
|
||||
<Badge className={cn('text-[10px] px-1.5 py-0 border', STATUS_COLORS[story.status])}>
|
||||
{STATUS_LABELS[story.status] ?? story.status}
|
||||
</Badge>
|
||||
}
|
||||
actions={
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); onEdit() }}
|
||||
className="text-muted-foreground hover:text-foreground p-0.5 rounded transition-colors"
|
||||
aria-label="Story bewerken"
|
||||
>
|
||||
<svg className="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
|
||||
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
|
||||
</svg>
|
||||
</button>
|
||||
}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
// --- Main component ---
|
||||
export function StoryPanel({ productId, storiesByPbi, isDemo }: StoryPanelProps) {
|
||||
const { selectedPbiId } = useSelectionStore()
|
||||
export function StoryPanel({ productId, isDemo }: StoryPanelProps) {
|
||||
const { selectedPbiId, selectedStoryId, selectStory } = useSelectionStore()
|
||||
const storiesByPbi = useBacklogStore((s) => s.storiesByPbi)
|
||||
const { storyOrder, initStories, reorderStories, rollbackStories } = usePlannerStore()
|
||||
const [filterStatus, setFilterStatus] = useState<string | null>(null)
|
||||
const [filterPriority, setFilterPriority] = useState<number | null>(null)
|
||||
|
|
@ -242,20 +261,12 @@ export function StoryPanel({ productId, storiesByPbi, isDemo }: StoryPanelProps)
|
|||
|
||||
<div className="flex-1 overflow-y-auto p-4">
|
||||
{selectedPbiId === null ? (
|
||||
<p className="text-sm text-muted-foreground text-center mt-8">
|
||||
Selecteer een PBI om de stories te bekijken.
|
||||
</p>
|
||||
<EmptyPanel message="Selecteer een PBI om de stories te bekijken." />
|
||||
) : rawStories.length === 0 ? (
|
||||
<div className="text-center mt-8 space-y-3">
|
||||
<p className="text-sm text-muted-foreground">Nog geen stories voor dit PBI.</p>
|
||||
{selectedPbiId && (
|
||||
<DemoTooltip show={isDemo}>
|
||||
<Button size="sm" variant="outline" disabled={isDemo} onClick={() => !isDemo && setStoryDialogState({ mode: 'create', pbiId: selectedPbiId, productId, defaultPriority: 2 })}>
|
||||
Maak je eerste story aan
|
||||
</Button>
|
||||
</DemoTooltip>
|
||||
)}
|
||||
</div>
|
||||
<EmptyPanel
|
||||
message="Nog geen stories voor dit PBI."
|
||||
action={{ label: 'Maak je eerste story aan', onClick: () => setStoryDialogState({ mode: 'create', pbiId: selectedPbiId, productId, defaultPriority: 2 }), disabled: isDemo }}
|
||||
/>
|
||||
) : (
|
||||
<DndContext
|
||||
id="story-panel"
|
||||
|
|
@ -270,7 +281,9 @@ export function StoryPanel({ productId, storiesByPbi, isDemo }: StoryPanelProps)
|
|||
<SortableStoryBlock
|
||||
key={story.id}
|
||||
story={story}
|
||||
onClick={() => setStoryDialogState({ mode: 'edit', story, productId })}
|
||||
isSelected={selectedStoryId === story.id}
|
||||
onSelect={() => selectStory(story.id)}
|
||||
onEdit={() => setStoryDialogState({ mode: 'edit', story, productId })}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue