beads-kanban-ui 0.1.0 → 0.1.2

package/src/components/scan-directory-dialog.tsx

@@ -1,368 +0,0 @@
-"use client";
-
-import { useState, useCallback } from "react";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from "@/components/ui/alert-dialog";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import { Input } from "@/components/ui/input";
-import { useToast } from "@/hooks/use-toast";
-import * as api from "@/lib/api";
-import { cn } from "@/lib/utils";
-import { Folder, Check, Loader2 } from "lucide-react";
-
-interface ScannedProject {
-  name: string;
-  path: string;
-  selected: boolean;
-}
-
-interface ScanDirectoryDialogProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  onAddProjects: (projects: { name: string; path: string }[]) => Promise<void>;
-}
-
-type Step = "select" | "results" | "confirm";
-
-export function ScanDirectoryDialog({
-  open: isOpen,
-  onOpenChange,
-  onAddProjects,
-}: ScanDirectoryDialogProps) {
-  const [step, setStep] = useState<Step>("select");
-  const [selectedDirectory, setSelectedDirectory] = useState<string>("");
-  const [isScanning, setIsScanning] = useState(false);
-  const [scannedProjects, setScannedProjects] = useState<ScannedProject[]>([]);
-  const [isAdding, setIsAdding] = useState(false);
-  const [showConfirmDialog, setShowConfirmDialog] = useState(false);
-  const { toast } = useToast();
-
-  const resetState = useCallback(() => {
-    setStep("select");
-    setSelectedDirectory("");
-    setScannedProjects([]);
-    setIsScanning(false);
-    setIsAdding(false);
-    setShowConfirmDialog(false);
-  }, []);
-
-  const handleOpenChange = useCallback(
-    (open: boolean) => {
-      if (!open) {
-        resetState();
-      }
-      onOpenChange(open);
-    },
-    [onOpenChange, resetState]
-  );
-
-  const scanDirectory = useCallback(async () => {
-    if (!selectedDirectory) return;
-
-    setIsScanning(true);
-    try {
-      const { entries } = await api.fs.list(selectedDirectory);
-      const dirs = entries.filter((e) => e.isDirectory);
-
-      // Check each subdirectory for .beads folder in parallel
-      const projectResults = await Promise.all(
-        dirs.map(async (dir) => {
-          const result = await api.fs.exists(`${dir.path}/.beads`);
-          return {
-            name: dir.name,
-            path: dir.path,
-            hasBeads: result.exists,
-          };
-        })
-      );
-
-      // Filter to only directories with .beads
-      const projectsFound = projectResults
-        .filter((p) => p.hasBeads)
-        .map((p) => ({
-          name: p.name,
-          path: p.path,
-          selected: true, // All selected by default
-        }));
-
-      setScannedProjects(projectsFound);
-      setStep("results");
-
-      if (projectsFound.length === 0) {
-        toast({
-          title: "No projects found",
-          description: "No beads projects found in subdirectories.",
-          variant: "destructive",
-        });
-      }
-    } catch (err) {
-      console.error("Error scanning directory:", err);
-      toast({
-        title: "Scan failed",
-        description:
-          err instanceof Error ? err.message : "Failed to scan directory.",
-        variant: "destructive",
-      });
-    } finally {
-      setIsScanning(false);
-    }
-  }, [selectedDirectory, toast]);
-
-  const toggleProject = useCallback((path: string) => {
-    setScannedProjects((prev) =>
-      prev.map((p) => (p.path === path ? { ...p, selected: !p.selected } : p))
-    );
-  }, []);
-
-  const toggleAll = useCallback(() => {
-    const allSelected = scannedProjects.every((p) => p.selected);
-    setScannedProjects((prev) =>
-      prev.map((p) => ({ ...p, selected: !allSelected }))
-    );
-  }, [scannedProjects]);
-
-  const selectedCount = scannedProjects.filter((p) => p.selected).length;
-
-  const handleAddProjects = useCallback(async () => {
-    const projectsToAdd = scannedProjects
-      .filter((p) => p.selected)
-      .map(({ name, path }) => ({ name, path }));
-
-    if (projectsToAdd.length === 0) return;
-
-    setIsAdding(true);
-    setShowConfirmDialog(false);
-
-    try {
-      await onAddProjects(projectsToAdd);
-      toast({
-        title: "Projects added",
-        description: `Successfully added ${projectsToAdd.length} project${projectsToAdd.length > 1 ? "s" : ""}.`,
-      });
-      handleOpenChange(false);
-    } catch (err) {
-      console.error("Error adding projects:", err);
-      toast({
-        title: "Error",
-        description: "Failed to add some projects. Please try again.",
-        variant: "destructive",
-      });
-    } finally {
-      setIsAdding(false);
-    }
-  }, [scannedProjects, onAddProjects, toast, handleOpenChange]);
-
-  return (
-    <>
-      <Dialog open={isOpen} onOpenChange={handleOpenChange}>
-        <DialogContent className="sm:max-w-lg">
-          <DialogHeader>
-            <DialogTitle>Scan for Projects</DialogTitle>
-            <DialogDescription>
-              {step === "select"
-                ? "Select a parent directory to scan for beads projects."
-                : `Found ${scannedProjects.length} project${scannedProjects.length !== 1 ? "s" : ""} in subdirectories.`}
-            </DialogDescription>
-          </DialogHeader>
-
-          {step === "select" && (
-            <div className="flex flex-col gap-4 py-4">
-              <div className="space-y-2">
-                <label htmlFor="scan-path" className="text-sm font-medium text-zinc-300">
-                  Parent Directory
-                </label>
-                <div className="relative">
-                  <Folder className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-zinc-500" aria-hidden="true" />
-                  <Input
-                    id="scan-path"
-                    value={selectedDirectory}
-                    onChange={(e) => setSelectedDirectory(e.target.value)}
-                    placeholder="/path/to/parent/directory"
-                    className="pl-10"
-                    autoFocus
-                  />
-                </div>
-                <p className="text-xs text-zinc-500">
-                  Enter a directory path to scan its subdirectories for beads projects.
-                </p>
-              </div>
-
-              <DialogFooter>
-                <Button
-                  onClick={scanDirectory}
-                  disabled={!selectedDirectory.trim() || isScanning}
-                >
-                  {isScanning ? (
-                    <>
-                      <Loader2 className="size-4 animate-spin" aria-hidden="true" />
-                      Scanning...
-                    </>
-                  ) : (
-                    "Scan for Projects"
-                  )}
-                </Button>
-              </DialogFooter>
-            </div>
-          )}
-
-          {step === "results" && (
-            <div className="flex flex-col gap-4 py-4">
-              {scannedProjects.length === 0 ? (
-                <div className="rounded-md border border-zinc-700 bg-zinc-800/50 px-4 py-8 text-center">
-                  <p className="text-zinc-400">
-                    No beads projects found in subdirectories.
-                  </p>
-                  <p className="mt-1 text-sm text-zinc-500">
-                    Make sure subdirectories have a .beads folder.
-                  </p>
-                </div>
-              ) : (
-                <>
-                  <div className="flex items-center justify-between">
-                    <Badge variant="info" size="sm">
-                      {selectedCount} of {scannedProjects.length} selected
-                    </Badge>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      onClick={toggleAll}
-                      className="text-xs"
-                    >
-                      {scannedProjects.every((p) => p.selected)
-                        ? "Deselect All"
-                        : "Select All"}
-                    </Button>
-                  </div>
-
-                  <ScrollArea className="h-[250px] rounded-md border border-zinc-700 bg-zinc-800/50">
-                    <div className="p-2" role="listbox" aria-label="Found projects">
-                      {scannedProjects.map((project) => (
-                        <button
-                          key={project.path}
-                          type="button"
-                          role="option"
-                          aria-selected={project.selected}
-                          onClick={() => toggleProject(project.path)}
-                          className={cn(
-                            "flex w-full items-center gap-3 rounded-md px-3 py-2 text-left text-sm transition-colors",
-                            project.selected
-                              ? "bg-zinc-700 text-zinc-100"
-                              : "text-zinc-400 hover:bg-zinc-700/50"
-                          )}
-                        >
-                          <div
-                            className={cn(
-                              "flex size-5 shrink-0 items-center justify-center rounded border",
-                              project.selected
-                                ? "border-purple-500 bg-purple-500"
-                                : "border-zinc-600 bg-transparent"
-                            )}
-                          >
-                            {project.selected && (
-                              <Check className="size-3 text-white" />
-                            )}
-                          </div>
-                          <Folder
-                            className={cn(
-                              "size-4 shrink-0",
-                              project.selected
-                                ? "text-purple-400"
-                                : "text-zinc-500"
-                            )}
-                          />
-                          <div className="min-w-0 flex-1">
-                            <p className="truncate font-medium">
-                              {project.name}
-                            </p>
-                            <p className="truncate text-xs text-zinc-500">
-                              {project.path}
-                            </p>
-                          </div>
-                        </button>
-                      ))}
-                    </div>
-                  </ScrollArea>
-                </>
-              )}
-
-              <DialogFooter className="gap-2 sm:gap-2">
-                <Button variant="outline" onClick={() => setStep("select")}>
-                  Back
-                </Button>
-                <Button
-                  onClick={() => setShowConfirmDialog(true)}
-                  disabled={selectedCount === 0}
-                >
-                  Add {selectedCount} Project{selectedCount !== 1 ? "s" : ""}
-                </Button>
-              </DialogFooter>
-            </div>
-          )}
-        </DialogContent>
-      </Dialog>
-
-      <AlertDialog open={showConfirmDialog} onOpenChange={setShowConfirmDialog}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>
-              Add {selectedCount} Project{selectedCount !== 1 ? "s" : ""}?
-            </AlertDialogTitle>
-            <AlertDialogDescription asChild>
-              <div>
-                <p className="mb-3">
-                  The following projects will be added to your dashboard:
-                </p>
-                <ScrollArea className="max-h-[150px] rounded-md border border-zinc-700 bg-zinc-800/50">
-                  <ul className="p-2 text-sm text-zinc-300">
-                    {scannedProjects
-                      .filter((p) => p.selected)
-                      .map((project) => (
-                        <li
-                          key={project.path}
-                          className="flex items-center gap-2 py-1"
-                        >
-                          <Folder className="size-3 shrink-0 text-purple-400" />
-                          <span className="truncate">{project.name}</span>
-                        </li>
-                      ))}
-                  </ul>
-                </ScrollArea>
-              </div>
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel disabled={isAdding}>Cancel</AlertDialogCancel>
-            <AlertDialogAction onClick={handleAddProjects} disabled={isAdding}>
-              {isAdding ? (
-                <>
-                  <Loader2 className="size-4 animate-spin" />
-                  Adding...
-                </>
-              ) : (
-                "Add All"
-              )}
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-    </>
-  );
-}

package/src/components/status-donut.tsx

@@ -1,197 +0,0 @@
-"use client";
-
-import { useMemo, useState } from "react";
-
-interface BeadCounts {
-  open: number;
-  in_progress: number;
-  inreview: number;
-  closed: number;
-}
-
-interface StatusDonutProps {
-  beadCounts: BeadCounts;
-  size?: number;
-  className?: string;
-}
-
-// Status colors matching the kanban board
-const STATUS_COLORS = {
-  open: "#3b82f6",        // blue-500
-  in_progress: "#f59e0b", // amber-500
-  inreview: "#a855f7",    // purple-500
-  closed: "#22c55e",      // green-500
-};
-
-// Custom tooltip showing all statuses
-function StatusTooltip({ beadCounts, total }: { beadCounts: BeadCounts; total: number }) {
-  return (
-    <div className="rounded-lg border border-zinc-700 bg-zinc-900 px-3 py-2 shadow-lg">
-      <div className="mb-1.5 text-xs font-medium text-zinc-300">
-        {total} task{total !== 1 ? "s" : ""}
-      </div>
-      <div className="space-y-1">
-        {beadCounts.open > 0 && (
-          <div className="flex items-center gap-2 text-xs">
-            <div className="h-2 w-2 rounded-sm" style={{ backgroundColor: STATUS_COLORS.open }} />
-            <span className="text-zinc-400">Open</span>
-            <span className="ml-auto font-mono text-zinc-100">{beadCounts.open}</span>
-          </div>
-        )}
-        {beadCounts.in_progress > 0 && (
-          <div className="flex items-center gap-2 text-xs">
-            <div className="h-2 w-2 rounded-sm" style={{ backgroundColor: STATUS_COLORS.in_progress }} />
-            <span className="text-zinc-400">In Progress</span>
-            <span className="ml-auto font-mono text-zinc-100">{beadCounts.in_progress}</span>
-          </div>
-        )}
-        {beadCounts.inreview > 0 && (
-          <div className="flex items-center gap-2 text-xs">
-            <div className="h-2 w-2 rounded-sm" style={{ backgroundColor: STATUS_COLORS.inreview }} />
-            <span className="text-zinc-400">In Review</span>
-            <span className="ml-auto font-mono text-zinc-100">{beadCounts.inreview}</span>
-          </div>
-        )}
-        {beadCounts.closed > 0 && (
-          <div className="flex items-center gap-2 text-xs">
-            <div className="h-2 w-2 rounded-sm" style={{ backgroundColor: STATUS_COLORS.closed }} />
-            <span className="text-zinc-400">Closed</span>
-            <span className="ml-auto font-mono text-zinc-100">{beadCounts.closed}</span>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-
-export function StatusDonut({ beadCounts, size = 40, className }: StatusDonutProps) {
-  const [isHovered, setIsHovered] = useState(false);
-
-  const chartData = useMemo(() => {
-    return [
-      { status: "open", count: beadCounts.open, fill: STATUS_COLORS.open },
-      { status: "in_progress", count: beadCounts.in_progress, fill: STATUS_COLORS.in_progress },
-      { status: "inreview", count: beadCounts.inreview, fill: STATUS_COLORS.inreview },
-      { status: "closed", count: beadCounts.closed, fill: STATUS_COLORS.closed },
-    ].filter((item) => item.count > 0);
-  }, [beadCounts]);
-
-  const total = useMemo(() => {
-    return beadCounts.open + beadCounts.in_progress + beadCounts.inreview + beadCounts.closed;
-  }, [beadCounts]);
-
-  // If no tasks, show empty state
-  if (total === 0) {
-    return (
-      <div
-        className={className}
-        style={{ width: size, height: size }}
-        aria-label="No tasks"
-      >
-        <div
-          className="rounded-full border-2 border-dashed border-zinc-700 w-full h-full"
-          title="No tasks"
-        />
-      </div>
-    );
-  }
-
-  const innerRadius = size * 0.32;
-  const outerRadius = size * 0.48;
-  // Only add padding when there are multiple segments
-  const paddingAngle = chartData.length > 1 ? 3 : 0;
-
-  return (
-    <div
-      className={`relative ${className || ""}`}
-      style={{ width: size, height: size }}
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
-    >
-      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
-        <g transform={`translate(${size / 2}, ${size / 2})`}>
-          {/* Render pie segments */}
-          {chartData.map((entry, index) => {
-            // Calculate angles for each segment
-            const startAngle = chartData
-              .slice(0, index)
-              .reduce((acc, d) => acc + (d.count / total) * 360, 0);
-            const segmentAngle = (entry.count / total) * 360;
-            const endAngle = startAngle + segmentAngle;
-
-            // Check if this is a full circle (single segment covering 100%)
-            const isFullCircle = chartData.length === 1;
-
-            if (isFullCircle) {
-              // For full circle, use two semicircular arcs
-              // This avoids the issue where start and end points are the same
-              return (
-                <g key={entry.status}>
-                  {/* First semicircle (top half) */}
-                  <path
-                    d={`M 0 ${-outerRadius} A ${outerRadius} ${outerRadius} 0 0 1 0 ${outerRadius} L 0 ${innerRadius} A ${innerRadius} ${innerRadius} 0 0 0 0 ${-innerRadius} Z`}
-                    fill={entry.fill}
-                  />
-                  {/* Second semicircle (bottom half) */}
-                  <path
-                    d={`M 0 ${outerRadius} A ${outerRadius} ${outerRadius} 0 0 1 0 ${-outerRadius} L 0 ${-innerRadius} A ${innerRadius} ${innerRadius} 0 0 0 0 ${innerRadius} Z`}
-                    fill={entry.fill}
-                  />
-                </g>
-              );
-            }
-
-            // Add small padding between segments (only if multiple segments)
-            const adjustedStart = startAngle + paddingAngle / 2;
-            const adjustedEnd = endAngle - paddingAngle / 2;
-
-            // Convert to radians (SVG uses radians, start from top)
-            const startRad = ((adjustedStart - 90) * Math.PI) / 180;
-            const endRad = ((adjustedEnd - 90) * Math.PI) / 180;
-
-            // Calculate arc path
-            const x1 = Math.cos(startRad) * outerRadius;
-            const y1 = Math.sin(startRad) * outerRadius;
-            const x2 = Math.cos(endRad) * outerRadius;
-            const y2 = Math.sin(endRad) * outerRadius;
-            const x3 = Math.cos(endRad) * innerRadius;
-            const y3 = Math.sin(endRad) * innerRadius;
-            const x4 = Math.cos(startRad) * innerRadius;
-            const y4 = Math.sin(startRad) * innerRadius;
-
-            const largeArcFlag = adjustedEnd - adjustedStart > 180 ? 1 : 0;
-
-            const d = [
-              `M ${x1} ${y1}`,
-              `A ${outerRadius} ${outerRadius} 0 ${largeArcFlag} 1 ${x2} ${y2}`,
-              `L ${x3} ${y3}`,
-              `A ${innerRadius} ${innerRadius} 0 ${largeArcFlag} 0 ${x4} ${y4}`,
-              "Z",
-            ].join(" ");
-
-            return (
-              <path
-                key={entry.status}
-                d={d}
-                fill={entry.fill}
-              />
-            );
-          })}
-          {/* Invisible circle covering entire donut area for hover detection */}
-          <circle
-            r={outerRadius}
-            fill="transparent"
-            style={{ cursor: "default" }}
-          />
-        </g>
-      </svg>
-
-      {/* Tooltip - shown on hover anywhere in the donut area */}
-      {isHovered && (
-        <div className="absolute left-1/2 top-full z-50 mt-2 -translate-x-1/2 whitespace-nowrap">
-          <StatusTooltip beadCounts={beadCounts} total={total} />
-        </div>
-      )}
-    </div>
-  );
-}

package/src/components/subtask-list.tsx

@@ -1,128 +0,0 @@
-"use client";
-
-import { cn } from "@/lib/utils";
-import type { Bead, BeadStatus } from "@/types";
-import { Check, Circle, Clock, FileCheck } from "lucide-react";
-
-export interface SubtaskListProps {
-  /** Child tasks to display */
-  childTasks: Bead[];
-  /** Callback when clicking a child task */
-  onChildClick: (child: Bead) => void;
-  /** Maximum number of children to show when collapsed */
-  maxCollapsed?: number;
-  /** Whether the list is expanded */
-  isExpanded?: boolean;
-}
-
-/**
- * Get status icon based on bead status
- */
-function getStatusIcon(status: BeadStatus) {
-  switch (status) {
-    case 'closed':
-      return <Check className="h-3.5 w-3.5 text-green-400" aria-hidden="true" />;
-    case 'in_progress':
-      return <Clock className="h-3.5 w-3.5 text-blue-400" aria-hidden="true" />;
-    case 'inreview':
-      return <FileCheck className="h-3.5 w-3.5 text-purple-400" aria-hidden="true" />;
-    case 'open':
-    default:
-      return <Circle className="h-3.5 w-3.5 text-zinc-500" aria-hidden="true" />;
-  }
-}
-
-/**
- * Get status text color
- */
-function getStatusColor(status: BeadStatus): string {
-  switch (status) {
-    case 'closed':
-      return "text-green-400";
-    case 'in_progress':
-      return "text-blue-400";
-    case 'inreview':
-      return "text-purple-400";
-    case 'open':
-    default:
-      return "text-zinc-500";
-  }
-}
-
-/**
- * Truncate text to max length
- */
-function truncate(text: string, maxLength: number): string {
-  if (text.length <= maxLength) return text;
-  return text.slice(0, maxLength).trim() + "…";
-}
-
-/**
- * Compact list of child tasks within epic card
- */
-export function SubtaskList({
-  childTasks,
-  onChildClick,
-  maxCollapsed = 3,
-  isExpanded = false
-}: SubtaskListProps) {
-  if (childTasks.length === 0) {
-    return (
-      <div className="text-xs text-muted-foreground italic">
-        No child tasks
-      </div>
-    );
-  }
-
-  const displayChildren = isExpanded ? childTasks : childTasks.slice(0, maxCollapsed);
-  const hasMore = childTasks.length > maxCollapsed && !isExpanded;
-
-  return (
-    <div className="space-y-1">
-      {displayChildren.map((child) => (
-        <button
-          key={child.id}
-          onClick={(e) => {
-            e.stopPropagation();
-            onChildClick(child);
-          }}
-          aria-label={`Open task: ${child.title}`}
-          className={cn(
-            "w-full flex items-start gap-2 px-2 py-1.5 rounded-md",
-            "hover:bg-zinc-800 transition-colors text-left",
-            "group"
-          )}
-        >
-          <div className="flex-shrink-0 mt-0.5">
-            {getStatusIcon(child.status)}
-          </div>
-          <div className="flex-1 min-w-0">
-            <p className={cn(
-              "text-xs font-medium group-hover:underline",
-              child.status === 'closed' && "line-through text-zinc-500",
-              child.status !== 'closed' && "text-zinc-200"
-            )}>
-              {truncate(child.title, 50)}
-            </p>
-            {child.description && (
-              <p className="text-[10px] text-zinc-500 mt-0.5">
-                {truncate(child.description, 60)}
-              </p>
-            )}
-          </div>
-          <div className={cn(
-            "flex-shrink-0 text-[9px] font-medium uppercase tracking-wide",
-            getStatusColor(child.status)
-          )}>
-            {child.status.replace('_', ' ')}
-          </div>
-        </button>
-      ))}
-      {hasMore && (
-        <p className="text-[10px] text-muted-foreground text-center py-1">
-          +{childTasks.length - maxCollapsed} more
-        </p>
-      )}
-    </div>
-  );
-}