Add multiselect.

frontend/app/hooks/useTasks.ts

@@ -13,6 +13,7 @@ interface UseTasksState {
 interface UseTasksActions {
   fetchTasks: () => Promise<void>
   createTask: (data: CreateTaskRequest) => Promise<Task | null>
+  deleteTask: (id: string) => Promise<boolean>
   refreshTasks: () => Promise<void>
   clearError: () => void
   getTaskById: (id: string) => Task | undefined
@@ -22,18 +23,19 @@ interface UseTasksActions {
 interface UseTasksOptions {
   autoFetch?: boolean
   refreshInterval?: number
+  initialData?: Task[]
 }
 
 export function useTasks(
   options: UseTasksOptions = {}
 ): UseTasksState & UseTasksActions {
-  const { autoFetch = true, refreshInterval } = options
+  const { autoFetch = true, refreshInterval, initialData } = options
 
   const [state, setState] = useState<UseTasksState>({
-    tasks: [],
+    tasks: initialData || [],
     loading: false,
     error: null,
-    lastFetch: null,
+    lastFetch: initialData ? new Date() : null,
   })
 
   const clearError = useCallback(() => {
@@ -89,6 +91,27 @@ export function useTasks(
     []
   )
 
+  const deleteTask = useCallback(async (id: string): Promise<boolean> => {
+    try {
+      await apiClient.deleteTask(id)
+
+      // Remove the task from the local state immediately
+      setState(prev => ({
+        ...prev,
+        tasks: prev.tasks.filter(task => task.id !== id),
+      }))
+
+      return true
+    } catch (error) {
+      const apiError = error as ApiError
+      setState(prev => ({
+        ...prev,
+        error: apiError.message,
+      }))
+      return false
+    }
+  }, [])
+
   const refreshTasks = useCallback(async () => {
     // Force refresh without showing loading state if tasks already exist
     const showLoading = state.tasks.length === 0
@@ -153,6 +176,7 @@ export function useTasks(
     ...state,
     fetchTasks,
     createTask,
+    deleteTask,
     refreshTasks,
     clearError,
     getTaskById,