feat: US-011 — Global Tasks view UI

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-20 12:43:42 +01:00
parent 3f1208f5ad
commit e92d58a46e
13 changed files with 1156 additions and 4 deletions
--- a/src/renderer/components/tasks/NewTaskDialog.tsx
+++ b/src/renderer/components/tasks/NewTaskDialog.tsx
@@ -0,0 +1,185 @@
+import { useState } from 'react';
+import { format } from 'date-fns';
+import { Calendar as CalendarIcon } from 'lucide-react';
+import { trpc } from '@/lib/trpc';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { Calendar } from '@/components/ui/calendar';
+import { cn } from '@/lib/utils';
+
+interface NewTaskDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  defaultProjectId?: string;
+  defaultStatus?: string;
+}
+
+export function NewTaskDialog({ open, onOpenChange, defaultProjectId, defaultStatus }: NewTaskDialogProps) {
+  const [title, setTitle] = useState('');
+  const [description, setDescription] = useState('');
+  const [priority, setPriority] = useState('medium');
+  const [status, setStatus] = useState(defaultStatus ?? 'todo');
+  const [dueDate, setDueDate] = useState<Date | undefined>();
+  const [projectId, setProjectId] = useState(defaultProjectId ?? '');
+  const [assignee, setAssignee] = useState('');
+
+  const { data: projectsList } = trpc.projects.listAll.useQuery();
+  const utils = trpc.useUtils();
+
+  const createTask = trpc.tasks.create.useMutation({
+    onSuccess: () => {
+      void utils.tasks.list.invalidate();
+      resetAndClose();
+    },
+  });
+
+  function resetAndClose() {
+    setTitle('');
+    setDescription('');
+    setPriority('medium');
+    setStatus(defaultStatus ?? 'todo');
+    setDueDate(undefined);
+    setProjectId(defaultProjectId ?? '');
+    setAssignee('');
+    onOpenChange(false);
+  }
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!title.trim()) return;
+
+    createTask.mutate({
+      title: title.trim(),
+      description: description.trim() || undefined,
+      priority,
+      status,
+      dueDate: dueDate ? dueDate.getTime() : undefined,
+      projectId: projectId || undefined,
+      assignee: assignee.trim() || undefined,
+    });
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[480px]">
+        <DialogHeader>
+          <DialogTitle>New Task</DialogTitle>
+        </DialogHeader>
+        <form onSubmit={handleSubmit} className="flex flex-col gap-4">
+          {/* Title */}
+          <Input
+            placeholder="Task title"
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            required
+            autoFocus
+          />
+
+          {/* Description */}
+          <Textarea
+            placeholder="Description (optional)"
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            className="min-h-20"
+          />
+
+          {/* Priority + Status row */}
+          <div className="grid grid-cols-2 gap-3">
+            <Select value={priority} onValueChange={setPriority}>
+              <SelectTrigger>
+                <SelectValue placeholder="Priority" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="high">High</SelectItem>
+                <SelectItem value="medium">Medium</SelectItem>
+                <SelectItem value="low">Low</SelectItem>
+              </SelectContent>
+            </Select>
+
+            <Select value={status} onValueChange={setStatus}>
+              <SelectTrigger>
+                <SelectValue placeholder="Status" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="todo">To Do</SelectItem>
+                <SelectItem value="in_progress">In Progress</SelectItem>
+                <SelectItem value="done">Completed</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          {/* Due Date */}
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button
+                type="button"
+                variant="outline"
+                className={cn(
+                  'justify-start text-left font-normal',
+                  !dueDate && 'text-muted-foreground',
+                )}
+              >
+                <CalendarIcon className="mr-2 h-4 w-4" />
+                {dueDate ? format(dueDate, 'PPP') : 'Pick a due date'}
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-auto p-0" align="start">
+              <Calendar
+                mode="single"
+                selected={dueDate}
+                onSelect={setDueDate}
+              />
+            </PopoverContent>
+          </Popover>
+
+          {/* Project */}
+          <Select value={projectId} onValueChange={setProjectId}>
+            <SelectTrigger>
+              <SelectValue placeholder="Project (optional)" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="">No project</SelectItem>
+              {projectsList?.map((p) => (
+                <SelectItem key={p.id} value={p.id}>
+                  {p.name}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+
+          {/* Assignee */}
+          <Input
+            placeholder="Assignee (optional)"
+            value={assignee}
+            onChange={(e) => setAssignee(e.target.value)}
+          />
+
+          <DialogFooter>
+            <Button type="button" variant="outline" onClick={resetAndClose}>
+              Cancel
+            </Button>
+            <Button type="submit" disabled={!title.trim() || createTask.isPending}>
+              Create Task
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}