feat: SoloBoard layout naar SplitPane met cookie-persistentie en tab-collapse

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

components/solo/solo-board.tsx

@@ -11,6 +11,7 @@ import type { RealtimeStatus } from '@/stores/solo-store'
 import { taskStatusToApi } from '@/lib/task-status'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 import { cn } from '@/lib/utils'
+import { SplitPane } from '@/components/split-pane/split-pane'
 import { SoloColumn, type ColumnStatus } from './solo-column'
 import { SoloTaskCardOverlay } from './solo-task-card'
 import { TaskDetailDialog } from './task-detail-dialog'
@@ -169,20 +170,6 @@ export function SoloBoard({
 
   const activeTask = activeDragId ? tasks[activeDragId] : null
 
-  const columns = (
-    <div className="grid grid-cols-3 gap-4 flex-1 min-h-0">
-      {COLUMN_STATUSES.map(status => (
-        <SoloColumn
-          key={status}
-          status={status}
-          tasks={columnTasks[status]}
-          isDemo={isDemo}
-          onTaskClick={(t) => setSelectedTask(t)}
-        />
-      ))}
-    </div>
-  )
-
   return (
     <div className="flex flex-col h-full p-4 gap-4 min-h-0">
       <div className="flex items-start justify-between gap-4 shrink-0">
@@ -220,7 +207,36 @@ export function SoloBoard({
         onDragStart={handleDragStart}
         onDragEnd={handleDragEnd}
       >
-        {columns}
+        <div className="flex-1 min-h-0">
+          <SplitPane
+            cookieKey={`solo-${productId}`}
+            defaultSplit={[33, 33, 34]}
+            tabLabels={['Te doen', 'Bezig', 'Klaar']}
+            panes={[
+              <SoloColumn
+                key="TO_DO"
+                status="TO_DO"
+                tasks={columnTasks.TO_DO}
+                isDemo={isDemo}
+                onTaskClick={(t) => setSelectedTask(t)}
+              />,
+              <SoloColumn
+                key="IN_PROGRESS"
+                status="IN_PROGRESS"
+                tasks={columnTasks.IN_PROGRESS}
+                isDemo={isDemo}
+                onTaskClick={(t) => setSelectedTask(t)}
+              />,
+              <SoloColumn
+                key="DONE"
+                status="DONE"
+                tasks={columnTasks.DONE}
+                isDemo={isDemo}
+                onTaskClick={(t) => setSelectedTask(t)}
+              />,
+            ]}
+          />
+        </div>
         <DragOverlay>
           {activeTask && <SoloTaskCardOverlay task={activeTask} />}
         </DragOverlay>