zyflow 0.6.4

package/src/components/tasks/KanbanBoard.tsx

@@ -0,0 +1,264 @@
+import { useState, useCallback, useMemo } from 'react';
+import {
+  DndContext,
+  DragEndEvent,
+  DragOverEvent,
+  DragStartEvent,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  rectIntersection,
+  DragOverlay,
+} from '@dnd-kit/core';
+import { arrayMove } from '@dnd-kit/sortable';
+import { Search, Plus, RefreshCw } from 'lucide-react';
+import { Input } from '../ui/input';
+import { Button } from '../ui/button';
+import { TaskColumn } from './TaskColumn';
+import { TaskCard } from './TaskCard';
+import { TaskDialog } from './TaskDialog';
+import {
+  Task,
+  TaskStatus,
+  TaskPriority,
+  STATUS_ORDER,
+} from './types';
+
+interface KanbanBoardProps {
+  tasks: Task[];
+  onCreateTask: (data: {
+    title: string;
+    description?: string;
+    status: TaskStatus;
+    priority: TaskPriority;
+    tags?: string[];
+    assignee?: string;
+  }) => void;
+  onUpdateTask: (id: number, data: {
+    title?: string;
+    description?: string;
+    status?: TaskStatus;
+    priority?: TaskPriority;
+    tags?: string[];
+    assignee?: string;
+    order?: number;
+  }) => void;
+  onDeleteTask: (id: number) => void;
+  onArchiveTask?: (id: number) => void;
+  onRefresh?: () => void;
+  isLoading?: boolean;
+}
+
+export function KanbanBoard({
+  tasks,
+  onCreateTask,
+  onUpdateTask,
+  onDeleteTask,
+  onArchiveTask,
+  onRefresh,
+  isLoading,
+}: KanbanBoardProps) {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [editingTask, setEditingTask] = useState<Task | null>(null);
+  const [defaultStatus, setDefaultStatus] = useState<TaskStatus>('todo');
+  const [activeId, setActiveId] = useState<number | null>(null);
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 5,
+      },
+    })
+  );
+
+  // Memoize filtered tasks to avoid recalculating on every render
+  const filteredTasks = useMemo(() => {
+    return tasks.filter((task) => {
+      if (!searchQuery) return true;
+      const query = searchQuery.toLowerCase();
+      return (
+        task.title.toLowerCase().includes(query) ||
+        task.description?.toLowerCase().includes(query) ||
+        String(task.id).includes(query)
+      );
+    });
+  }, [tasks, searchQuery]);
+
+  // Memoize grouped tasks by status
+  const tasksByStatus = useMemo(() => {
+    return STATUS_ORDER.reduce(
+      (acc, status) => {
+        acc[status] = filteredTasks
+          .filter((t) => t.status === status)
+          .sort((a, b) => a.order - b.order);
+        return acc;
+      },
+      {} as Record<TaskStatus, Task[]>
+    );
+  }, [filteredTasks]);
+
+  const handleDragStart = (event: DragStartEvent) => {
+    setActiveId(event.active.id as number);
+  };
+
+  const handleDragOver = (_event: DragOverEvent) => {
+    // Track over state for visual feedback if needed
+  };
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+    setActiveId(null);
+
+    if (!over) return;
+
+    const activeTask = tasks.find((t) => t.id === active.id);
+    if (!activeTask) return;
+
+    const overTask = tasks.find((t) => t.id === over.id);
+    // Determine target status: either the column itself or the column of the target card
+    const overStatus = STATUS_ORDER.includes(over.id as TaskStatus)
+      ? (over.id as TaskStatus)
+      : overTask?.status;
+
+    if (!overStatus) return;
+
+    // If moving to a different column
+    if (overStatus !== activeTask.status) {
+      // Get new order (end of column or before target card)
+      const targetColumnTasks = tasks
+        .filter((t) => t.status === overStatus && t.id !== activeTask.id)
+        .sort((a, b) => a.order - b.order);
+
+      let newOrder = targetColumnTasks.length;
+      if (overTask) {
+        const overIndex = targetColumnTasks.findIndex((t) => t.id === overTask.id);
+        if (overIndex !== -1) {
+          newOrder = overIndex;
+        }
+      }
+
+      onUpdateTask(activeTask.id, { status: overStatus, order: newOrder });
+      return;
+    }
+
+    // Same column reordering
+    if (overTask && overTask.id !== activeTask.id) {
+      const columnTasks = tasks
+        .filter((t) => t.status === overStatus)
+        .sort((a, b) => a.order - b.order);
+
+      const oldIndex = columnTasks.findIndex((t) => t.id === active.id);
+      const newIndex = columnTasks.findIndex((t) => t.id === over.id);
+
+      if (oldIndex !== -1 && newIndex !== -1 && oldIndex !== newIndex) {
+        const reordered = arrayMove(columnTasks, oldIndex, newIndex);
+        reordered.forEach((task, index) => {
+          if (task.order !== index) {
+            onUpdateTask(task.id, { order: index });
+          }
+        });
+      }
+    }
+  };
+
+  const handleAddTask = useCallback((status: TaskStatus) => {
+    setEditingTask(null);
+    setDefaultStatus(status);
+    setDialogOpen(true);
+  }, []);
+
+  const handleEditTask = useCallback((task: Task) => {
+    setEditingTask(task);
+    setDefaultStatus(task.status);
+    setDialogOpen(true);
+  }, []);
+
+  const handleSaveTask = useCallback(
+    (data: {
+      id?: number;
+      title: string;
+      description?: string;
+      status: TaskStatus;
+      priority: TaskPriority;
+      tags?: string[];
+      assignee?: string;
+    }) => {
+      if (data.id) {
+        onUpdateTask(data.id, data);
+      } else {
+        onCreateTask(data);
+      }
+    },
+    [onCreateTask, onUpdateTask]
+  );
+
+  const activeTask = activeId ? tasks.find((t) => t.id === activeId) : null;
+
+
+  return (
+    <div className="h-full flex flex-col">
+      {/* Toolbar */}
+      <div className="flex items-center gap-4 p-4 border-b">
+        <div className="relative flex-1 max-w-sm">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+          <Input
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            placeholder="Search tasks..."
+            className="pl-9"
+          />
+        </div>
+
+        <Button onClick={() => handleAddTask('todo')}>
+          <Plus className="mr-2 h-4 w-4" />
+          New Task
+        </Button>
+
+        {onRefresh && (
+          <Button variant="outline" size="icon" onClick={onRefresh} disabled={isLoading}>
+            <RefreshCw className={`h-4 w-4 ${isLoading ? 'animate-spin' : ''}`} />
+          </Button>
+        )}
+      </div>
+
+      {/* Kanban columns */}
+      <div className="flex-1 overflow-x-auto p-4">
+        <DndContext
+          sensors={sensors}
+          collisionDetection={rectIntersection}
+          onDragStart={handleDragStart}
+          onDragOver={handleDragOver}
+          onDragEnd={handleDragEnd}
+        >
+          <div className="grid grid-cols-4 gap-4 h-full min-w-[800px]">
+            {STATUS_ORDER.map((status) => (
+              <TaskColumn
+                key={status}
+                status={status}
+                tasks={tasksByStatus[status]}
+                onAddTask={handleAddTask}
+                onEditTask={handleEditTask}
+                onDeleteTask={onDeleteTask}
+                onArchiveTask={onArchiveTask}
+              />
+            ))}
+          </div>
+
+          <DragOverlay dropAnimation={null}>
+            {activeTask && <TaskCard task={activeTask} />}
+          </DragOverlay>
+        </DndContext>
+      </div>
+
+      {/* Task Dialog */}
+      <TaskDialog
+        open={dialogOpen}
+        onOpenChange={setDialogOpen}
+        task={editingTask}
+        defaultStatus={defaultStatus}
+        onSave={handleSaveTask}
+      />
+    </div>
+  );
+}

package/src/components/tasks/TaskCard.tsx

@@ -0,0 +1,138 @@
+import { useMemo } from 'react';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { GripVertical, MoreVertical, Pencil, Trash2, Archive } from 'lucide-react';
+import { Card, CardContent } from '../ui/card';
+import { Badge } from '../ui/badge';
+import { Button } from '../ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '../ui/dropdown-menu';
+import { Task, PRIORITY_COLORS } from './types';
+
+interface TaskCardProps {
+  task: Task;
+  onEdit?: (task: Task) => void;
+  onDelete?: (taskId: number) => void;
+  onArchive?: (taskId: number) => void;
+}
+
+export function TaskCard({ task, onEdit, onDelete, onArchive }: TaskCardProps) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({
+    id: task.id,
+    transition: {
+      duration: 200,
+      easing: 'ease',
+    },
+  });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition: isDragging ? undefined : transition,
+    touchAction: 'none' as const,
+    opacity: isDragging ? 0 : 1,
+  };
+
+  // Memoize JSON.parse to avoid parsing on every render
+  const tags = useMemo(() => {
+    return task.tags ? JSON.parse(task.tags) as string[] : [];
+  }, [task.tags]);
+
+  return (
+    <Card
+      ref={setNodeRef}
+      style={style}
+      className={`mb-1.5 py-0 gap-0 ${isDragging ? 'shadow-lg ring-2 ring-primary' : ''}`}
+    >
+      <CardContent className="!px-2.5 !py-3.5">
+        <div className="flex items-start gap-2">
+          <button
+            className="mt-1 cursor-grab text-muted-foreground hover:text-foreground active:cursor-grabbing"
+            style={{ touchAction: 'none' }}
+            {...attributes}
+            {...listeners}
+          >
+            <GripVertical className="h-4 w-4" />
+          </button>
+
+          <div className="flex-1 min-w-0">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <span
+                  className={`w-2 h-2 rounded-full ${PRIORITY_COLORS[task.priority]}`}
+                  title={task.priority}
+                />
+                <span className="text-xs text-muted-foreground font-mono">
+                  #{task.id}
+                </span>
+              </div>
+
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button variant="ghost" size="sm" className="h-6 w-6 p-0">
+                    <MoreVertical className="h-3 w-3" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                  <DropdownMenuItem onClick={() => onEdit?.(task)}>
+                    <Pencil className="mr-2 h-3 w-3" />
+                    Edit
+                  </DropdownMenuItem>
+                  {task.status === 'done' && onArchive && (
+                    <DropdownMenuItem onClick={() => onArchive(task.id)}>
+                      <Archive className="mr-2 h-3 w-3" />
+                      Archive
+                    </DropdownMenuItem>
+                  )}
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem
+                    className="text-destructive"
+                    onClick={() => onDelete?.(task.id)}
+                  >
+                    <Trash2 className="mr-2 h-3 w-3" />
+                    Delete
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
+
+            <p className="text-sm font-medium mt-1 truncate">{task.title}</p>
+
+            {task.description && (
+              <p className="text-xs text-muted-foreground mt-1 line-clamp-2">
+                {task.description}
+              </p>
+            )}
+
+            {tags.length > 0 && (
+              <div className="flex flex-wrap gap-1 mt-2">
+                {tags.map((tag) => (
+                  <Badge key={tag} variant="secondary" className="text-xs px-1.5 py-0">
+                    {tag}
+                  </Badge>
+                ))}
+              </div>
+            )}
+
+            {task.assignee && (
+              <p className="text-xs text-muted-foreground mt-2">
+                @{task.assignee}
+              </p>
+            )}
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/tasks/TaskColumn.tsx

@@ -0,0 +1,81 @@
+import { useDroppable } from '@dnd-kit/core';
+import {
+  SortableContext,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { Plus } from 'lucide-react';
+import { ScrollArea } from '../ui/scroll-area';
+import { Button } from '../ui/button';
+import { TaskCard } from './TaskCard';
+import { Task, TaskStatus, STATUS_LABELS } from './types';
+
+interface TaskColumnProps {
+  status: TaskStatus;
+  tasks: Task[];
+  onAddTask?: (status: TaskStatus) => void;
+  onEditTask?: (task: Task) => void;
+  onDeleteTask?: (taskId: number) => void;
+  onArchiveTask?: (taskId: number) => void;
+}
+
+export function TaskColumn({
+  status,
+  tasks,
+  onAddTask,
+  onEditTask,
+  onDeleteTask,
+  onArchiveTask,
+}: TaskColumnProps) {
+  const { setNodeRef, isOver } = useDroppable({ id: status });
+
+  return (
+    <div
+      ref={setNodeRef}
+      className={`flex flex-col h-full rounded-lg bg-muted/50 transition-all ${
+        isOver ? 'ring-2 ring-primary bg-primary/5' : ''
+      }`}
+    >
+      <div className="flex items-center justify-between p-3 border-b">
+        <div className="flex items-center gap-2">
+          <h3 className="font-semibold text-sm">{STATUS_LABELS[status]}</h3>
+          <span className="text-xs text-muted-foreground bg-muted px-1.5 py-0.5 rounded">
+            {tasks.length}
+          </span>
+        </div>
+        <Button
+          variant="ghost"
+          size="sm"
+          className="h-6 w-6 p-0"
+          onClick={() => onAddTask?.(status)}
+        >
+          <Plus className="h-4 w-4" />
+        </Button>
+      </div>
+
+      <div className="flex-1 overflow-hidden min-h-[100px]">
+        <ScrollArea className="h-full p-2">
+          <SortableContext
+            items={tasks.map((t) => t.id)}
+            strategy={verticalListSortingStrategy}
+          >
+            {tasks.map((task) => (
+              <TaskCard
+                key={task.id}
+                task={task}
+                onEdit={onEditTask}
+                onDelete={onDeleteTask}
+                onArchive={onArchiveTask}
+              />
+            ))}
+          </SortableContext>
+
+          {tasks.length === 0 && (
+            <div className="text-center py-8 text-muted-foreground text-sm">
+              No tasks
+            </div>
+          )}
+        </ScrollArea>
+      </div>
+    </div>
+  );
+}