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
|
|
@ -1,70 +1,117 @@
|
|||
'use client'
|
||||
|
||||
import { useRef, useState, useEffect, useCallback } from 'react'
|
||||
import { Fragment, useRef, useState, useEffect, useCallback } from 'react'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const COOKIE_PREFIX = 'split-pane:'
|
||||
const COOKIE_PREFIX = 'sp:'
|
||||
const COOKIE_MAX_AGE = 60 * 60 * 24 * 365
|
||||
|
||||
function readSplitCookie(key: string): number | null {
|
||||
function readSplits(cookieKey: string, n: number): number[] | null {
|
||||
if (typeof document === 'undefined') return null
|
||||
const match = document.cookie.match(new RegExp(`(?:^|; )${COOKIE_PREFIX}${key}=([^;]+)`))
|
||||
const match = document.cookie.match(
|
||||
new RegExp(`(?:^|; )${COOKIE_PREFIX}${cookieKey}=([^;]+)`)
|
||||
)
|
||||
if (!match) return null
|
||||
const val = parseFloat(decodeURIComponent(match[1]))
|
||||
return !isNaN(val) && val > 0 && val < 100 ? val : null
|
||||
try {
|
||||
const parsed: unknown = JSON.parse(decodeURIComponent(match[1]))
|
||||
if (
|
||||
!Array.isArray(parsed) ||
|
||||
parsed.length !== n ||
|
||||
parsed.some((v) => typeof v !== 'number') ||
|
||||
Math.abs((parsed as number[]).reduce((a, b) => a + b, 0) - 100) > 1
|
||||
) return null
|
||||
return parsed as number[]
|
||||
} catch {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
function writeSplitCookie(key: string, value: number) {
|
||||
document.cookie = `${COOKIE_PREFIX}${key}=${value}; max-age=${COOKIE_MAX_AGE}; path=/; samesite=lax`
|
||||
function writeSplits(cookieKey: string, splits: number[]) {
|
||||
document.cookie = `${COOKIE_PREFIX}${cookieKey}=${encodeURIComponent(
|
||||
JSON.stringify(splits)
|
||||
)}; max-age=${COOKIE_MAX_AGE}; path=/; samesite=lax`
|
||||
}
|
||||
|
||||
interface SplitPaneProps {
|
||||
left: React.ReactNode
|
||||
right: React.ReactNode
|
||||
storageKey: string
|
||||
defaultSplit?: number // percentage for left pane
|
||||
minSize?: number // minimum px per pane, default 200
|
||||
export interface SplitPaneProps {
|
||||
panes: React.ReactNode[]
|
||||
defaultSplit: number[] // length n, values sum to 100
|
||||
cookieKey: string
|
||||
tabLabels?: string[] // mobile tab labels, defaults to "Pane N"
|
||||
minSize?: number // minimum px per pane, default 200
|
||||
mobileBreakpoint?: number // default 1024
|
||||
activeTab?: number // controlled: parent manages which tab is active
|
||||
onActiveTabChange?: (index: number) => void
|
||||
}
|
||||
|
||||
export function SplitPane({
|
||||
left,
|
||||
right,
|
||||
storageKey,
|
||||
defaultSplit = 20,
|
||||
panes,
|
||||
defaultSplit,
|
||||
cookieKey,
|
||||
tabLabels,
|
||||
minSize = 200,
|
||||
mobileBreakpoint = 1024,
|
||||
activeTab: activeTabProp,
|
||||
onActiveTabChange,
|
||||
}: SplitPaneProps) {
|
||||
const isControlled = activeTabProp !== undefined
|
||||
const n = panes.length
|
||||
const containerRef = useRef<HTMLDivElement>(null)
|
||||
const [split, setSplit] = useState<number>(() => {
|
||||
return readSplitCookie(storageKey) ?? defaultSplit
|
||||
})
|
||||
const [isDragging, setIsDragging] = useState(false)
|
||||
const [isMobile, setIsMobile] = useState(false)
|
||||
const [activeTab, setActiveTab] = useState<'left' | 'right'>('left')
|
||||
const splitsRef = useRef<number[]>(defaultSplit)
|
||||
|
||||
const [splits, setSplits] = useState<number[]>(() => {
|
||||
return readSplits(cookieKey, n) ?? defaultSplit
|
||||
})
|
||||
const [dragging, setDragging] = useState<number | null>(null) // divider index (0..n-2)
|
||||
const [isMobile, setIsMobile] = useState(false)
|
||||
const [internalTab, setInternalTab] = useState(0)
|
||||
const activeTab = isControlled ? activeTabProp : internalTab
|
||||
|
||||
const handleTabChange = (i: number) => {
|
||||
if (!isControlled) setInternalTab(i)
|
||||
onActiveTabChange?.(i)
|
||||
}
|
||||
|
||||
useEffect(() => { splitsRef.current = splits }, [splits])
|
||||
|
||||
// Detect mobile
|
||||
useEffect(() => {
|
||||
const check = () => setIsMobile(window.innerWidth < 1024)
|
||||
const check = () => setIsMobile(window.innerWidth < mobileBreakpoint)
|
||||
check()
|
||||
window.addEventListener('resize', check)
|
||||
return () => window.removeEventListener('resize', check)
|
||||
}, [])
|
||||
}, [mobileBreakpoint])
|
||||
|
||||
const onMouseMove = useCallback((e: MouseEvent) => {
|
||||
if (!isDragging || !containerRef.current) return
|
||||
if (dragging === null || !containerRef.current) return
|
||||
const rect = containerRef.current.getBoundingClientRect()
|
||||
const containerWidth = rect.width
|
||||
const offsetX = e.clientX - rect.left
|
||||
const minPct = (minSize / containerWidth) * 100
|
||||
const maxPct = 100 - minPct
|
||||
const newSplit = Math.min(maxPct, Math.max(minPct, (offsetX / containerWidth) * 100))
|
||||
setSplit(newSplit)
|
||||
writeSplitCookie(storageKey, newSplit)
|
||||
}, [isDragging, minSize, storageKey])
|
||||
|
||||
const onMouseUp = useCallback(() => setIsDragging(false), [])
|
||||
const cursorPct = ((e.clientX - rect.left) / containerWidth) * 100
|
||||
const current = splitsRef.current
|
||||
// Left edge of pane[dragging] in percentage
|
||||
const leftEdge = current.slice(0, dragging).reduce((a, b) => a + b, 0)
|
||||
const combinedWidth = current[dragging] + current[dragging + 1]
|
||||
|
||||
const newLeft = Math.min(Math.max(cursorPct - leftEdge, minPct), combinedWidth - minPct)
|
||||
const newRight = combinedWidth - newLeft
|
||||
|
||||
setSplits((prev) => {
|
||||
const next = [...prev]
|
||||
next[dragging] = newLeft
|
||||
next[dragging + 1] = newRight
|
||||
return next
|
||||
})
|
||||
}, [dragging, minSize])
|
||||
|
||||
const onMouseUp = useCallback(() => {
|
||||
if (dragging !== null) {
|
||||
writeSplits(cookieKey, splitsRef.current)
|
||||
setDragging(null)
|
||||
}
|
||||
}, [dragging, cookieKey])
|
||||
|
||||
useEffect(() => {
|
||||
if (isDragging) {
|
||||
if (dragging !== null) {
|
||||
window.addEventListener('mousemove', onMouseMove)
|
||||
window.addEventListener('mouseup', onMouseUp)
|
||||
}
|
||||
|
|
@ -72,37 +119,38 @@ export function SplitPane({
|
|||
window.removeEventListener('mousemove', onMouseMove)
|
||||
window.removeEventListener('mouseup', onMouseUp)
|
||||
}
|
||||
}, [isDragging, onMouseMove, onMouseUp])
|
||||
}, [dragging, onMouseMove, onMouseUp])
|
||||
|
||||
if (isMobile) {
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
<div className="flex border-b border-border shrink-0">
|
||||
<button
|
||||
onClick={() => setActiveTab('left')}
|
||||
className={cn(
|
||||
'flex-1 py-2 text-sm font-medium transition-colors',
|
||||
activeTab === 'left'
|
||||
? 'border-b-2 border-primary text-primary'
|
||||
: 'text-muted-foreground hover:text-foreground'
|
||||
)}
|
||||
>
|
||||
Backlog
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('right')}
|
||||
className={cn(
|
||||
'flex-1 py-2 text-sm font-medium transition-colors',
|
||||
activeTab === 'right'
|
||||
? 'border-b-2 border-primary text-primary'
|
||||
: 'text-muted-foreground hover:text-foreground'
|
||||
)}
|
||||
>
|
||||
Stories
|
||||
</button>
|
||||
<div className="flex items-center border-b border-border shrink-0">
|
||||
{activeTab > 0 && (
|
||||
<button
|
||||
onClick={() => handleTabChange(activeTab - 1)}
|
||||
className="px-3 py-2 text-sm text-muted-foreground hover:text-foreground transition-colors shrink-0"
|
||||
aria-label="Terug"
|
||||
>
|
||||
←
|
||||
</button>
|
||||
)}
|
||||
{panes.map((_, i) => (
|
||||
<button
|
||||
key={i}
|
||||
onClick={() => handleTabChange(i)}
|
||||
className={cn(
|
||||
'flex-1 py-2 text-sm font-medium transition-colors',
|
||||
activeTab === i
|
||||
? 'border-b-2 border-primary text-primary'
|
||||
: 'text-muted-foreground hover:text-foreground'
|
||||
)}
|
||||
>
|
||||
{tabLabels?.[i] ?? `Pane ${i + 1}`}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex-1 overflow-auto">
|
||||
{activeTab === 'left' ? left : right}
|
||||
{panes[activeTab]}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
|
@ -110,24 +158,25 @@ export function SplitPane({
|
|||
|
||||
return (
|
||||
<div ref={containerRef} className="flex h-full overflow-hidden select-none">
|
||||
{/* Left pane */}
|
||||
<div className="flex flex-col overflow-hidden" style={{ width: `${split}%` }}>
|
||||
{left}
|
||||
</div>
|
||||
|
||||
{/* Divider */}
|
||||
<div
|
||||
onMouseDown={() => setIsDragging(true)}
|
||||
className={cn(
|
||||
'w-1 shrink-0 bg-border hover:bg-primary transition-colors cursor-col-resize',
|
||||
isDragging && 'bg-primary'
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* Right pane */}
|
||||
<div className="flex flex-col overflow-hidden flex-1">
|
||||
{right}
|
||||
</div>
|
||||
{panes.map((pane, i) => (
|
||||
<Fragment key={i}>
|
||||
{i > 0 && (
|
||||
<div
|
||||
onMouseDown={() => setDragging(i - 1)}
|
||||
className={cn(
|
||||
'w-1 shrink-0 bg-border hover:bg-primary transition-colors cursor-col-resize',
|
||||
dragging === i - 1 && 'bg-primary'
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
<div
|
||||
className="flex flex-col overflow-hidden"
|
||||
style={i === n - 1 ? { flex: 1 } : { width: `${splits[i]}%` }}
|
||||
>
|
||||
{pane}
|
||||
</div>
|
||||
</Fragment>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue