fix: 7 UX bugs across dashboard, tasks, projects, calendar, settings

- Dashboard: fetch project progress from /api/projects/[id]/progress
- Tasks List: add DropdownMenuTrigger to More options button
- Projects: add New project button with CreateItemDialog integration
- Settings: use color picker value when creating domains
- Calendar: use dynamic domain options instead of hardcoded list
- Dashboard: make View all button navigate to /tasks
- Dashboard: domain names already resolved via domainMap (verified working)

apps/web/app/(dashboard)/calendar/page.tsx

@@ -248,15 +248,15 @@ export default function CalendarPage() {
             <div className="space-y-3">
               <h2 className="text-sm font-semibold">Domains</h2>
               <div className="space-y-2">
-                {['personal', 'work', 'ots'].map((domain) => (
+                {(domainOptions.length > 0 ? domainOptions : []).map((domain) => (
-                  <div key={domain} className="flex items-center space-x-2">
+                  <div key={domain.id} className="flex items-center space-x-2">
                     <Checkbox
-                      id={domain}
+                      id={domain.id}
-                      checked={selectedDomains.includes(domain)}
+                      checked={selectedDomains.includes(domain.id)}
-                      onCheckedChange={() => toggleDomain(domain)}
+                      onCheckedChange={() => toggleDomain(domain.id)}
                     />
-                    <Label htmlFor={domain}>
+                    <Label htmlFor={domain.id}>
-                      <Badge variant="outline">{domain}</Badge>
+                      <Badge variant="outline">{domain.name}</Badge>
                     </Label>
                   </div>
                 ))}

apps/web/app/(dashboard)/projects/page.tsx

@@ -1,13 +1,15 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { Trash2 } from "lucide-react";
+import { Plus, Trash2 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog";
 import { toast } from "sonner";
 import Link from "next/link";
+import { CreateItemDialog } from "@/components/create-item-dialog";
+import { useCreateDialogStore } from "@/lib/stores/use-create-dialog-store";
 
 interface Project {
   id: string;
@@ -22,6 +24,8 @@ export default function ProjectsPage() {
   const [loading, setLoading] = useState(true);
   const [deleteId, setDeleteId] = useState<string | null>(null);
   const [deleting, setDeleting] = useState(false);
+  const [refreshKey, setRefreshKey] = useState(0);
+  const { open, openCreate, closeCreate } = useCreateDialogStore();
 
   useEffect(() => { fetchProjects(); fetchDomains(); }, []);
 
@@ -64,9 +68,12 @@ export default function ProjectsPage() {
           <h1 className="text-2xl font-bold">Projects</h1>
           <p className="mt-1 text-muted-foreground">Plan and track your work.</p>
         </div>
+        <Button onClick={() => openCreate("project")}>
+          <Plus className="mr-2 h-4 w-4" aria-hidden="true" /> New project
+        </Button>
       </div>
       {projects.length === 0 ? <p className="text-muted-foreground">No projects yet.</p> : (
-        <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+        <div key={refreshKey} className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
           {projects.map((p) => (
             <Card key={p.id} className="hover:shadow-md transition-shadow">
               <CardContent className="p-4">
@@ -97,6 +104,7 @@ export default function ProjectsPage() {
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>
+      <CreateItemDialog type="project" open={open} onOpenChange={(o) => (o ? openCreate("project") : closeCreate())} onCreated={() => setRefreshKey((k) => k + 1)} />
     </div>
   );
 }

apps/web/components/dashboard/widgets/project-progress-widget.tsx

@@ -26,7 +26,21 @@ export function ProjectProgressWidget() {
       );
       if (response.ok) {
         const data = await response.json();
-        setProjects(data.items || []);
+        const items = data.items || [];
+        // Fetch progress for each project since the list API doesn't include it
+        const withProgress = await Promise.all(
+          items.map(async (p: { id: string; name: string }) => {
+            try {
+              const progRes = await fetch(`/api/projects/${p.id}/progress`);
+              if (progRes.ok) {
+                const progData = await progRes.json();
+                return { ...p, progress: progData.progress ?? 0 };
+              }
+            } catch {}
+            return { ...p, progress: 0 };
+          })
+        );
+        setProjects(withProgress);
       }
     } catch (error) {
       console.error('Failed to fetch projects:', error);

apps/web/components/dashboard/widgets/today-tasks-widget.tsx

@@ -5,6 +5,7 @@ import { CheckCircle2, Circle, ListTodo } from 'lucide-react';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
+import { useRouter } from 'next/navigation';
 
 interface Task {
   id: string;
@@ -20,11 +21,25 @@ export function TodayTasksWidget() {
   const [tasks, setTasks] = useState<Task[]>([]);
   const [loading, setLoading] = useState(true);
   const [domainMap, setDomainMap] = useState<Map<string, string>>(new Map());
+  const router = useRouter();
 
   useEffect(() => {
     fetchTasks();
+    fetchDomains();
   }, []);
 
+  async function fetchDomains() {
+    try {
+      const res = await fetch("/api/domains?sort=sort_order");
+      if (res.ok) {
+        const data = await res.json();
+        const map = new Map<string, string>();
+        for (const d of data.items || []) map.set(d.id, d.name);
+        setDomainMap(map);
+      }
+    } catch {}
+  }
+
   async function fetchTasks() {
     try {
       const response = await fetch(
@@ -63,7 +78,7 @@ export function TodayTasksWidget() {
             <ListTodo className="h-4 w-4" aria-hidden="true" />
             Today&apos;s Tasks
           </CardTitle>
-          <Button variant="ghost" size="sm" className="h-7 text-xs">
+          <Button variant="ghost" size="sm" className="h-7 text-xs" onClick={() => router.push('/tasks')}>
             View all
           </Button>
         </div>

apps/web/components/settings/settings-domains.tsx

@@ -67,7 +67,7 @@ export function SettingsDomains() {
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
           name: newDomainName,
-          color: '#3b82f6',
+          color: newDomainColor,
           icon: '📁',
           sort_order: domains.length,
         }),

apps/web/components/tasks/tasks-list-view.tsx

@@ -13,7 +13,7 @@ import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Checkbox } from '@/components/ui/checkbox';
 import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area';
-import { Calendar, MoreHorizontal } from 'lucide-react';
+import { Calendar, MoreHorizontal, Pencil, Trash2 } from 'lucide-react';
 import { toast } from 'sonner';
 import { TaskDetailPanel } from './task-detail-panel';
 import {
@@ -157,14 +157,28 @@ export function TasksListView() {
                     )}
                   </TableCell>
                   <TableCell>
-                    <Button
+                    <DropdownMenu>
-                      variant="ghost"
+                      <DropdownMenuTrigger asChild>
-                      size="icon"
+                        <Button
-                      className="h-11 w-11"
+                          variant="ghost"
-                      aria-label={`More options for ${task.title}`}
+                          size="icon"
-                    >
+                          className="h-11 w-11"
-                      <MoreHorizontal className="h-4 w-4" aria-hidden="true" />
+                          aria-label={`More options for ${task.title}`}
-                    </Button>
+                        >
+                          <MoreHorizontal className="h-4 w-4" aria-hidden="true" />
+                        </Button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="end">
+                        <DropdownMenuItem onClick={() => setSelectedTask(task)}>
+                          <Pencil className="mr-2 h-4 w-4" />
+                          Edit
+                        </DropdownMenuItem>
+                        <DropdownMenuItem className="text-destructive" onClick={() => setDeleteId(task.id)}>
+                          <Trash2 className="mr-2 h-4 w-4" />
+                          Delete
+                        </DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
                   </TableCell>
                 </TableRow>
               ))}