Improve command palette navigation

apps/web/src/components/command/add-task-form.tsx

@@ -55,7 +55,7 @@
   const queryClient = useQueryClient();
 
   // Get boards with lists
-  const { data: boardsData, isLoading: boardsLoading } = useQuery<{
+  const { data: boardsData, isLoading: boardsLoading, error: boardsError } = useQuery<{
     boards: BoardWithLists[];
   }>({
     queryKey: ['boards-with-lists', wsId],
@@ -66,17 +66,19 @@
       if (!response.ok) throw new Error('Failed to fetch boards');
       return response.json();
     },
+    retry: 2,
+    retryDelay: 1000,
   });
 
   const boards = boardsData?.boards;
 
   // Get tasks for selected board/list
-  const { data: tasksData, isLoading: tasksLoading } = useQuery<{
+  const { data: tasksData, isLoading: tasksLoading, error: tasksError } = useQuery<{
     tasks: Task[];
   }>({
     queryKey: ['tasks', wsId, selectedBoardId, selectedListId],
     queryFn: async () => {
-      if (!selectedBoardId && !selectedListId) return [];
+      if (!selectedBoardId && !selectedListId) return { tasks: [] };
 
       const params = new URLSearchParams();
       if (selectedListId) params.append('listId', selectedListId);
@@ -89,6 +91,8 @@
       return response.json();
     },
     enabled: !!(selectedBoardId || selectedListId),
+    retry: 2,
+    retryDelay: 1000,
   });
 
   const tasks = tasksData?.tasks;
@@ -189,6 +193,38 @@
     );
   }
 
+  if (boardsError) {
+    return (
+      <div className="flex flex-col items-center gap-4 p-8 text-center">
+        <div className="rounded-full bg-dynamic-red/10 p-3">
+          <AlertTriangle className="h-6 w-6 text-dynamic-red" />
+        </div>
+        <div>
+          <p className="font-semibold text-foreground">Failed to load boards</p>
+          <p className="text-sm text-muted-foreground">
+            {boardsError.message || 'Unable to fetch boards at the moment'}
+          </p>
+        </div>
+        <div className="flex gap-2">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => window.location.reload()}
+          >
+            Retry
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => setOpen(false)}
+          >
+            Close
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
   if (!boards || boards.length === 0) {
     return (
       <div className="flex flex-col items-center gap-4 p-8 text-center">
@@ -201,6 +237,17 @@
             Create a board first to add tasks
           </p>
         </div>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => {
+            const wsId = window.location.pathname.split('/')[1];
+            window.location.href = `/${wsId}/tasks/boards`;
+          }}
+        >
+          <Plus className="h-4 w-4 mr-2" />
+          Create Board
+        </Button>
       </div>
     );
   }
@@ -246,27 +293,39 @@
       {selectedBoardId && (
         <div className="space-y-2">
           <label className="text-sm font-medium text-foreground">List</label>
-          <Select
-            value={selectedListId}
-            onValueChange={(value) => {
-              setSelectedListId(value);
-              setShowTasks(true);
-            }}
-          >
-            <SelectTrigger className="w-full">
-              <SelectValue placeholder="Select a list..." />
-            </SelectTrigger>
-            <SelectContent>
-              {availableLists.map((list: any) => (
-                <SelectItem key={list.id} value={list.id}>
-                  <div className="flex items-center gap-2">
-                    <List className="h-4 w-4 text-muted-foreground" />
-                    <span className="truncate">{list.name}</span>
-                  </div>
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
+          {availableLists.length === 0 ? (
+            <div className="rounded-md border border-dynamic-orange/20 bg-dynamic-orange/5 p-3 text-center">
+              <div className="flex items-center justify-center gap-2 text-sm text-dynamic-orange">
+                <AlertTriangle className="h-4 w-4" />
+                <span>This board has no lists</span>
+              </div>
+              <p className="text-xs text-muted-foreground mt-1">
+                Create a list in the board first to add tasks
+              </p>
+            </div>
+          ) : (
+            <Select
+              value={selectedListId}
+              onValueChange={(value) => {
+                setSelectedListId(value);
+                setShowTasks(true);
+              }}
+            >
+              <SelectTrigger className="w-full">
+                <SelectValue placeholder="Select a list..." />
+              </SelectTrigger>
+              <SelectContent>
+                {availableLists.map((list: any) => (
+                  <SelectItem key={list.id} value={list.id}>
+                    <div className="flex items-center gap-2">
+                      <List className="h-4 w-4 text-muted-foreground" />
+                      <span className="truncate">{list.name}</span>
+                    </div>
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          )}
         </div>
       )}
 
@@ -280,12 +339,28 @@
               {tasksLoading && (
                 <Loader className="h-3 w-3 animate-spin text-dynamic-blue" />
               )}
+              {tasksError && (
+                <AlertTriangle className="h-3 w-3 text-dynamic-red" />
+              )}
             </CardTitle>
           </CardHeader>
           <CardContent className="pt-0">
             {tasksLoading ? (
               <div className="flex items-center justify-center py-4">
-                <Loader className="h-4 w-4 animate-spin text-dynamic-blue" />
+                <div className="flex items-center gap-2">
+                  <Loader className="h-4 w-4 animate-spin text-dynamic-blue" />
+                  <span className="text-xs text-muted-foreground">Loading tasks...</span>
+                </div>
+              </div>
+            ) : tasksError ? (
+              <div className="flex flex-col items-center gap-2 py-4 text-center">
+                <AlertTriangle className="h-4 w-4 text-dynamic-red" />
+                <div className="text-xs text-dynamic-red">
+                  Failed to load tasks
+                </div>
+                <div className="text-xs text-muted-foreground">
+                  {tasksError.message || 'Unable to fetch tasks'}
+                </div>
               </div>
             ) : tasks && tasks.length > 0 ? (
               <ScrollArea className="max-h-32">
@@ -330,6 +405,9 @@
                 <div className="text-xs text-muted-foreground">
                   No tasks in this list yet
                 </div>
+                <div className="text-xs text-muted-foreground/70 mt-1">
+                  Perfect time to add the first one!
+                </div>
               </div>
             )}
           </CardContent>
@@ -345,7 +423,8 @@
           disabled={
             !inputValue.trim() ||
             !selectedListId ||
-            createTaskMutation.isPending
+            createTaskMutation.isPending ||
+            (selectedBoardId && availableLists.length === 0)
           }
           className="w-full"
         >
@@ -363,13 +442,33 @@
         </Button>
       </div>
 
-      {/* Task name validation message */}
-      {!inputValue.trim() && (
-        <div className="flex items-center gap-2 text-xs text-muted-foreground">
-          <AlertTriangle className="h-3 w-3" />
-          <span>Enter a task name to continue</span>
-        </div>
-      )}
+      {/* Validation messages */}
+      <div className="space-y-1">
+        {!inputValue.trim() && (
+          <div className="flex items-center gap-2 text-xs text-muted-foreground">
+            <AlertTriangle className="h-3 w-3" />
+            <span>Enter a task name to continue</span>
+          </div>
+        )}
+        {inputValue.trim() && !selectedBoardId && (
+          <div className="flex items-center gap-2 text-xs text-muted-foreground">
+            <AlertTriangle className="h-3 w-3" />
+            <span>Please select a board</span>
+          </div>
+        )}
+        {inputValue.trim() && selectedBoardId && !selectedListId && availableLists.length > 0 && (
+          <div className="flex items-center gap-2 text-xs text-muted-foreground">
+            <AlertTriangle className="h-3 w-3" />
+            <span>Please select a list</span>
+          </div>
+        )}
+        {inputValue.trim() && selectedBoardId && availableLists.length === 0 && (
+          <div className="flex items-center gap-2 text-xs text-dynamic-orange">
+            <AlertTriangle className="h-3 w-3" />
+            <span>The selected board has no lists. Create a list first.</span>
+          </div>
+        )}
+      </div>
     </div>
   );
 }

apps/web/src/components/command/board-navigation.tsx

@@ -2,18 +2,32 @@
 
 import type { Board } from './types';
 import { CommandGroup, CommandItem } from '@tuturuuu/ui/command';
-import { ExternalLink, LayoutDashboard, MapPin, Tag } from '@tuturuuu/ui/icons';
+import { 
+  ExternalLink, 
+  LayoutDashboard, 
+  MapPin, 
+  Tag, 
+  Loader, 
+  AlertTriangle, 
+  RefreshCw,
+  Plus
+} from '@tuturuuu/ui/icons';
+import { Button } from '@tuturuuu/ui/button';
 import * as React from 'react';
 
 interface BoardNavigationProps {
   boards: Board[];
   inputValue: string;
+  isLoading?: boolean;
+  error?: Error | null;
   onBoardSelect: (boardId: string) => void;
 }
 
 export function BoardNavigation({
   boards,
   inputValue,
+  isLoading,
+  error,
   onBoardSelect,
 }: BoardNavigationProps) {
   const getBoardColor = (boardId: string) => {
@@ -41,7 +55,103 @@
       .slice(0, 8); // Show up to 8 filtered results
   }, [boards, inputValue]);
 
-  if (filteredBoards.length === 0) return null;
+  // Loading state
+  if (isLoading) {
+    return (
+      <CommandGroup heading="📋 Loading Boards...">
+        <div className="flex items-center justify-center p-6">
+          <div className="flex items-center gap-3">
+            <Loader className="h-5 w-5 animate-spin text-dynamic-blue" />
+            <span className="text-sm text-muted-foreground">
+              Fetching your boards...
+            </span>
+          </div>
+        </div>
+      </CommandGroup>
+    );
+  }
+
+  // Error state
+  if (error) {
+    return (
+      <CommandGroup heading="📋 Board Navigation">
+        <div className="flex flex-col items-center gap-3 p-6 text-center">
+          <div className="rounded-full bg-dynamic-red/10 p-3">
+            <AlertTriangle className="h-5 w-5 text-dynamic-red" />
+          </div>
+          <div className="space-y-1">
+            <p className="font-semibold text-foreground">Failed to load boards</p>
+            <p className="text-xs text-muted-foreground">
+              {error.message || 'Unable to fetch boards at the moment'}
+            </p>
+          </div>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => window.location.reload()}
+            className="gap-2"
+          >
+            <RefreshCw className="h-3 w-3" />
+            Retry
+          </Button>
+        </div>
+      </CommandGroup>
+    );
+  }
+
+  // No boards state
+  if (!boards || boards.length === 0) {
+    return (
+      <CommandGroup heading="📋 Board Navigation">
+        <div className="flex flex-col items-center gap-3 p-6 text-center">
+          <div className="rounded-full bg-dynamic-blue/10 p-3">
+            <LayoutDashboard className="h-5 w-5 text-dynamic-blue" />
+          </div>
+          <div className="space-y-1">
+            <p className="font-semibold text-foreground">No boards found</p>
+            <p className="text-xs text-muted-foreground">
+              Create your first board to get started with task management
+            </p>
+          </div>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => {
+              // Navigate to boards page to create new board
+              const wsId = window.location.pathname.split('/')[1];
+              window.location.href = `/${wsId}/tasks/boards`;
+            }}
+            className="gap-2"
+          >
+            <Plus className="h-3 w-3" />
+            Create Board
+          </Button>
+        </div>
+      </CommandGroup>
+    );
+  }
+
+  // No filtered results state
+  if (filteredBoards.length === 0) {
+    return (
+      <CommandGroup heading="📋 Board Navigation">
+        <div className="flex flex-col items-center gap-3 p-6 text-center">
+          <div className="rounded-full bg-dynamic-orange/10 p-3">
+            <LayoutDashboard className="h-5 w-5 text-dynamic-orange" />
+          </div>
+          <div className="space-y-1">
+            <p className="font-semibold text-foreground">No matching boards</p>
+            <p className="text-xs text-muted-foreground">
+              Try a different search term or browse all boards
+            </p>
+          </div>
+          <div className="text-xs text-muted-foreground">
+            Available boards: {boards.length}
+          </div>
+        </div>
+      </CommandGroup>
+    );
+  }
 
   return (
     <CommandGroup heading="📋 Quick Board Navigation">