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
139
stores/backlog-store.ts
Normal file
139
stores/backlog-store.ts
Normal file
|
|
@ -0,0 +1,139 @@
|
|||
import { create } from 'zustand'
|
||||
import type { PbiStatusApi } from '@/lib/task-status'
|
||||
|
||||
export interface BacklogPbi {
|
||||
id: string
|
||||
code: string | null
|
||||
title: string
|
||||
priority: number
|
||||
description?: string | null
|
||||
created_at: Date
|
||||
status: PbiStatusApi
|
||||
}
|
||||
|
||||
export interface BacklogStory {
|
||||
id: string
|
||||
code: string | null
|
||||
title: string
|
||||
description: string | null
|
||||
acceptance_criteria: string | null
|
||||
priority: number
|
||||
status: string
|
||||
pbi_id: string
|
||||
created_at: Date
|
||||
}
|
||||
|
||||
export interface BacklogTask {
|
||||
id: string
|
||||
title: string
|
||||
description: string | null
|
||||
priority: number
|
||||
status: string
|
||||
sort_order: number
|
||||
story_id: string
|
||||
created_at: Date
|
||||
}
|
||||
|
||||
type Entity = 'pbi' | 'story' | 'task'
|
||||
type Op = 'I' | 'U' | 'D'
|
||||
|
||||
interface InitialData {
|
||||
pbis: BacklogPbi[]
|
||||
storiesByPbi: Record<string, BacklogStory[]>
|
||||
tasksByStory: Record<string, BacklogTask[]>
|
||||
}
|
||||
|
||||
interface BacklogStore extends InitialData {
|
||||
setInitialData: (data: InitialData) => void
|
||||
applyChange: (entity: Entity, op: Op, data: Record<string, unknown>) => void
|
||||
}
|
||||
|
||||
export const useBacklogStore = create<BacklogStore>((set) => ({
|
||||
pbis: [],
|
||||
storiesByPbi: {},
|
||||
tasksByStory: {},
|
||||
|
||||
setInitialData: (data) => set(data),
|
||||
|
||||
applyChange: (entity, op, data) =>
|
||||
set((state) => {
|
||||
if (entity === 'pbi') {
|
||||
const id = data.id as string
|
||||
if (op === 'D') {
|
||||
return { pbis: state.pbis.filter((p) => p.id !== id) }
|
||||
}
|
||||
if (op === 'U') {
|
||||
return {
|
||||
pbis: state.pbis.map((p) =>
|
||||
p.id === id ? { ...p, ...(data as Partial<BacklogPbi>) } : p
|
||||
),
|
||||
}
|
||||
}
|
||||
// I
|
||||
return { pbis: [...state.pbis, data as unknown as BacklogPbi] }
|
||||
}
|
||||
|
||||
if (entity === 'story') {
|
||||
const id = data.id as string
|
||||
if (op === 'D') {
|
||||
const storiesByPbi = { ...state.storiesByPbi }
|
||||
for (const pbiId of Object.keys(storiesByPbi)) {
|
||||
storiesByPbi[pbiId] = storiesByPbi[pbiId].filter((s) => s.id !== id)
|
||||
}
|
||||
return { storiesByPbi }
|
||||
}
|
||||
if (op === 'U') {
|
||||
const storiesByPbi = { ...state.storiesByPbi }
|
||||
for (const pbiId of Object.keys(storiesByPbi)) {
|
||||
const idx = storiesByPbi[pbiId].findIndex((s) => s.id === id)
|
||||
if (idx !== -1) {
|
||||
storiesByPbi[pbiId] = storiesByPbi[pbiId].map((s) =>
|
||||
s.id === id ? { ...s, ...(data as Partial<BacklogStory>) } : s
|
||||
)
|
||||
break
|
||||
}
|
||||
}
|
||||
return { storiesByPbi }
|
||||
}
|
||||
// I
|
||||
const pbiId = data.pbi_id as string
|
||||
return {
|
||||
storiesByPbi: {
|
||||
...state.storiesByPbi,
|
||||
[pbiId]: [...(state.storiesByPbi[pbiId] ?? []), data as unknown as BacklogStory],
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
// task
|
||||
const id = data.id as string
|
||||
if (op === 'D') {
|
||||
const tasksByStory = { ...state.tasksByStory }
|
||||
for (const storyId of Object.keys(tasksByStory)) {
|
||||
tasksByStory[storyId] = tasksByStory[storyId].filter((t) => t.id !== id)
|
||||
}
|
||||
return { tasksByStory }
|
||||
}
|
||||
if (op === 'U') {
|
||||
const tasksByStory = { ...state.tasksByStory }
|
||||
for (const storyId of Object.keys(tasksByStory)) {
|
||||
const idx = tasksByStory[storyId].findIndex((t) => t.id === id)
|
||||
if (idx !== -1) {
|
||||
tasksByStory[storyId] = tasksByStory[storyId].map((t) =>
|
||||
t.id === id ? { ...t, ...(data as Partial<BacklogTask>) } : t
|
||||
)
|
||||
break
|
||||
}
|
||||
}
|
||||
return { tasksByStory }
|
||||
}
|
||||
// I
|
||||
const storyId = data.story_id as string
|
||||
return {
|
||||
tasksByStory: {
|
||||
...state.tasksByStory,
|
||||
[storyId]: [...(state.tasksByStory[storyId] ?? []), data as unknown as BacklogTask],
|
||||
},
|
||||
}
|
||||
}),
|
||||
}))
|
||||
Loading…
Add table
Add a link
Reference in a new issue