feat: redesign task board UI (#24)

* v0.7.1: server extraction, workspaces, kanban redesign, and landing page

- feat: extract standalone server for multi-client architecture (#18)
- feat: add workspaces to group projects (#17)
- feat: redesign kanban board cards and columns (#16)
- feat: add landing page with OS-detected download buttons (#14, #19)
- fix: mini-card close cleanup and confirm popover placement (#15)

* feat: redesign task board UI with polished kanban, list, and inline task creation

- Kanban cards: task short IDs, status icons, date footer, top-right menu on hover
- List view: collapsible colored section bars with chevron toggle and animations
- Pill-style segmented view toggle for List/Board and Grid/Tabs
- Inline floating form for task creation replacing centered modal
- Add task buttons in kanban columns and list sections

* fix: address PR review comments

- Fix nested button in list view section headers (use div + proper button)
- Plumb status through to AddTaskDialog so column/section + buttons create
  tasks with the correct initial status
- Fix useEffect deps for dialog init (include editingTask)
- Use stable task ID suffix for short IDs instead of order field

Author: jcanizalez

.yarn/install-state.gz

@@ -31,6 +31,7 @@ import { OnboardingModal } from './components/OnboardingModal'
 import { TerminalPanel } from './components/TerminalPanel'
 import { UpdateBanner } from './components/UpdateBanner'
 import { ToastContainer } from './components/Toast'
+import { AddTaskDialog } from './components/AddTaskDialog'
 
 const isMac = navigator.platform.toUpperCase().includes('MAC')
 
@@ -365,7 +366,7 @@ export function App() {
                   </svg>
                 </button>
                 <button
-                  onClick={() => useAppStore.getState().setSelectedTaskId('new')}
+                  onClick={() => useAppStore.getState().setTaskDialogOpen(true)}
                   className="px-3 py-1.5 text-sm font-medium text-gray-200
                              hover:text-white bg-white/[0.06] hover:bg-white/[0.1]
                              rounded-md transition-colors flex items-center gap-2"
@@ -403,6 +404,7 @@ export function App() {
       <AddProjectDialog />
       <WorkflowEditor />
       <CommandPalette />
+      <AddTaskDialog />
       <WorktreeCleanupDialog />
       <MissedScheduleDialog />
       <DiffSidebar />

src/renderer/App.tsx

@@ -184,12 +184,11 @@ export function GridToolbar() {
   const setConfig = useAppStore((s) => s.setConfig)
   const layoutMode = config?.defaults?.layoutMode ?? 'grid'
 
-  const toggleLayout = (): void => {
-    if (!config) return
-    const next = layoutMode === 'grid' ? 'tabs' : 'grid'
+  const setLayoutMode = (mode: 'grid' | 'tabs'): void => {
+    if (!config || layoutMode === mode) return
     const updated = {
       ...config,
-      defaults: { ...config.defaults, layoutMode: next as 'grid' | 'tabs' }
+      defaults: { ...config.defaults, layoutMode: mode }
     }
     window.api.saveConfig(updated)
     setConfig(updated)
@@ -229,15 +228,31 @@ export function GridToolbar() {
         />
       )}
 
-      {/* Layout toggle */}
-      <button
-        onClick={toggleLayout}
-        className="flex items-center gap-1.5 px-2 py-1 rounded-md text-xs transition-colors
-                   text-gray-400 hover:text-white hover:bg-white/[0.06]"
-        title={layoutMode === 'grid' ? 'Switch to tabs' : 'Switch to grid'}
-      >
-        {layoutMode === 'grid' ? TabIcon : GridIcon}
-      </button>
+      {/* Layout toggle — pill segmented control */}
+      <div className="flex items-center bg-white/[0.06] rounded-lg p-0.5">
+        <button
+          onClick={() => setLayoutMode('grid')}
+          className={`flex items-center gap-1.5 px-2.5 py-1 rounded-md text-xs transition-colors ${
+            layoutMode === 'grid'
+              ? 'bg-white/[0.1] text-white'
+              : 'text-gray-500 hover:text-gray-300'
+          }`}
+        >
+          {GridIcon}
+          <span>Grid</span>
+        </button>
+        <button
+          onClick={() => setLayoutMode('tabs')}
+          className={`flex items-center gap-1.5 px-2.5 py-1 rounded-md text-xs transition-colors ${
+            layoutMode === 'tabs'
+              ? 'bg-white/[0.1] text-white'
+              : 'text-gray-500 hover:text-gray-300'
+          }`}
+        >
+          {TabIcon}
+          <span>Tabs</span>
+        </button>
+      </div>
     </div>
   )
 }

src/renderer/components/AddTaskDialog.tsx

@@ -322,6 +322,7 @@ export function ProjectSidebar() {
   const setFocusedTerminal = useAppStore((s) => s.setFocusedTerminal)
   const setMainViewMode = useAppStore((s) => s.setMainViewMode)
   const setSelectedTaskId = useAppStore((s) => s.setSelectedTaskId)
+  const setTaskDialogOpen = useAppStore((s) => s.setTaskDialogOpen)
   const archivedSessions = useAppStore((s) => s.archivedSessions)
   const showArchivedSessions = useAppStore((s) => s.showArchivedSessions)
   const setShowArchivedSessions = useAppStore((s) => s.setShowArchivedSessions)
@@ -678,7 +679,7 @@ export function ProjectSidebar() {
                             e.stopPropagation()
                             setActiveProject(project.name)
                             setMainViewMode('tasks')
-                            setSelectedTaskId('new')
+                            setTaskDialogOpen(true)
                           }}
                           className="opacity-0 group-hover:opacity-100 text-gray-600 hover:text-blue-400
                                    p-1 rounded-md hover:bg-white/[0.06] transition-all"
@@ -1017,7 +1018,7 @@ export function ProjectSidebar() {
                                   onClick={() => {
                                     setActiveProject(project.name)
                                     setMainViewMode('tasks')
-                                    setSelectedTaskId('new')
+                                    setTaskDialogOpen(true)
                                   }}
                                   className="text-gray-600 hover:text-gray-300 p-0.5 transition-colors"
                                 >

src/renderer/components/GridToolbar.tsx

@@ -19,6 +19,7 @@ export function TaskBoardView() {
   const terminals = useAppStore((s) => s.terminals)
   const setFocusedTerminal = useAppStore((s) => s.setFocusedTerminal)
   const setSelectedTaskId = useAppStore((s) => s.setSelectedTaskId)
+  const setTaskDialogOpen = useAppStore((s) => s.setTaskDialogOpen)
   const taskStatusFilter = useAppStore((s) => s.taskStatusFilter)
 
   const viewMode = config?.defaults?.taskViewMode ?? 'list'
@@ -117,13 +118,33 @@ export function TaskBoardView() {
     setSelectedTaskId(task.id)
   }
 
-  const sections = [
-    { title: 'Todo', tasks: todoTasks, emptyText: 'No tasks in queue' },
-    { title: 'In Progress', tasks: inProgressTasks, emptyText: 'No active tasks' },
-    { title: 'In Review', tasks: inReviewTasks, emptyText: 'No tasks awaiting review' },
-    { title: 'Done', tasks: doneTasks, emptyText: 'No completed tasks' },
-    { title: 'Cancelled', tasks: cancelledTasks, emptyText: 'No cancelled tasks' }
-  ]
+  const handleAddTask = (status: TaskStatus) => {
+    setTaskDialogOpen(true, status)
+  }
+
+  const sections: { status: TaskStatus; title: string; tasks: TaskConfig[]; emptyText: string }[] =
+    [
+      { status: 'todo', title: 'Todo', tasks: todoTasks, emptyText: 'No tasks in queue' },
+      {
+        status: 'in_progress',
+        title: 'In Progress',
+        tasks: inProgressTasks,
+        emptyText: 'No active tasks'
+      },
+      {
+        status: 'in_review',
+        title: 'In Review',
+        tasks: inReviewTasks,
+        emptyText: 'No tasks awaiting review'
+      },
+      { status: 'done', title: 'Done', tasks: doneTasks, emptyText: 'No completed tasks' },
+      {
+        status: 'cancelled',
+        title: 'Cancelled',
+        tasks: cancelledTasks,
+        emptyText: 'No cancelled tasks'
+      }
+    ]
 
   const totalTasks = allTasks.length
 
@@ -170,6 +191,7 @@ export function TaskBoardView() {
             }}
             onReviewDiff={(id) => setSelectedTaskId(id)}
             onSelect={handleSelect}
+            onAddTask={handleAddTask}
             isSessionLive={isSessionLive}
           />
         ) : (
@@ -196,6 +218,7 @@ export function TaskBoardView() {
             }}
             onReviewDiff={(id) => setSelectedTaskId(id)}
             onSelect={handleSelect}
+            onAddTask={handleAddTask}
             isSessionLive={isSessionLive}
           />
         )}

src/renderer/components/ProjectSidebar.tsx

@@ -164,12 +164,11 @@ export function TaskToolbar() {
   const setConfig = useAppStore((s) => s.setConfig)
   const taskViewMode = (config?.defaults?.taskViewMode ?? 'list') as TaskViewMode
 
-  const toggleViewMode = (): void => {
-    if (!config) return
-    const next = taskViewMode === 'list' ? 'kanban' : 'list'
+  const setViewMode = (mode: TaskViewMode): void => {
+    if (!config || taskViewMode === mode) return
     const updated = {
       ...config,
-      defaults: { ...config.defaults, taskViewMode: next as TaskViewMode }
+      defaults: { ...config.defaults, taskViewMode: mode }
     }
     window.api.saveConfig(updated)
     setConfig(updated)
@@ -187,15 +186,31 @@ export function TaskToolbar() {
         label="Status"
       />
 
-      {/* View toggle */}
-      <button
-        onClick={toggleViewMode}
-        className="flex items-center gap-1.5 px-2 py-1 rounded-md text-xs transition-colors
-                   text-gray-400 hover:text-white hover:bg-white/[0.06]"
-        title={taskViewMode === 'list' ? 'Switch to kanban' : 'Switch to list'}
-      >
-        {taskViewMode === 'list' ? KanbanIcon : ListIcon}
-      </button>
+      {/* View toggle — pill segmented control */}
+      <div className="flex items-center bg-white/[0.06] rounded-lg p-0.5">
+        <button
+          onClick={() => setViewMode('list')}
+          className={`flex items-center gap-1.5 px-2.5 py-1 rounded-md text-xs transition-colors ${
+            taskViewMode === 'list'
+              ? 'bg-white/[0.1] text-white'
+              : 'text-gray-500 hover:text-gray-300'
+          }`}
+        >
+          {ListIcon}
+          <span>List</span>
+        </button>
+        <button
+          onClick={() => setViewMode('kanban')}
+          className={`flex items-center gap-1.5 px-2.5 py-1 rounded-md text-xs transition-colors ${
+            taskViewMode === 'kanban'
+              ? 'bg-white/[0.1] text-white'
+              : 'text-gray-500 hover:text-gray-300'
+          }`}
+        >
+          {KanbanIcon}
+          <span>Board</span>
+        </button>
+      </div>
     </div>
   )
 }