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>

app/(app)/products/[id]/page.tsx

@@ -91,21 +91,23 @@ export default async function ProductBacklogPage({ params }: Props) {
       {/* Split pane */}
       <div className="flex-1 overflow-hidden">
         <SplitPane
-          storageKey={`backlog-${id}`}
-          left={
+          cookieKey={`backlog-${id}`}
+          defaultSplit={[20, 80]}
+          tabLabels={['Backlog', 'Stories']}
+          panes={[
             <PbiList
+              key="pbi"
               productId={id}
               pbis={pbis.map((p: (typeof pbis)[number]) => ({ id: p.id, code: p.code, title: p.title, priority: p.priority, description: p.description, created_at: p.created_at, status: pbiStatusToApi(p.status) }))}
               isDemo={isDemo}
-            />
-          }
-          right={
+            />,
             <StoryPanel
+              key="story"
               productId={id}
               storiesByPbi={storiesByPbi}
               isDemo={isDemo}
-            />
-          }
+            />,
+          ]}
         />
       </div>
     </div>

components/sprint/sprint-board-client.tsx

@@ -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 && (