beads-kanban-ui 0.1.0 → 0.1.1

package/src/components/folder-browser.tsx

@@ -1,273 +0,0 @@
-"use client";
-
-import { useState, useEffect, useCallback, useRef } from "react";
-import * as api from "@/lib/api";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import { cn } from "@/lib/utils";
-import { Folder, FolderOpen, ChevronRight, Home } from "lucide-react";
-import type { FsEntry } from "@/lib/api";
-
-interface FolderBrowserProps {
-  currentPath: string;
-  onPathChange: (path: string) => void;
-  onSelectPath: (path: string, hasBeads: boolean) => void;
-  className?: string;
-}
-
-interface DirectoryEntry extends FsEntry {
-  hasBeads: boolean;
-}
-
-export function FolderBrowser({
-  currentPath,
-  onPathChange,
-  onSelectPath,
-  className,
-}: FolderBrowserProps) {
-  const [directories, setDirectories] = useState<DirectoryEntry[]>([]);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [selectedIndex, setSelectedIndex] = useState<number>(-1);
-  const [currentPathHasBeads, setCurrentPathHasBeads] = useState(false);
-  const listRef = useRef<HTMLDivElement>(null);
-
-  // Load directories when path changes
-  useEffect(() => {
-    const loadDirectories = async () => {
-      if (!currentPath) return;
-
-      setLoading(true);
-      setError(null);
-      setSelectedIndex(-1);
-
-      try {
-        // Fetch directory contents and check if current path has beads in parallel
-        const [listResult, currentBeadsResult] = await Promise.all([
-          api.fs.list(currentPath),
-          api.fs.exists(`${currentPath.replace(/\/+$/, "")}/.beads`),
-        ]);
-
-        // Filter to only directories
-        const dirs = listResult.entries.filter((entry) => entry.isDirectory);
-
-        // Check which directories have .beads folders in parallel
-        const dirsWithBeadsStatus = await Promise.all(
-          dirs.map(async (dir) => {
-            const beadsPath = `${dir.path}/.beads`;
-            const result = await api.fs.exists(beadsPath);
-            return {
-              ...dir,
-              hasBeads: result.exists,
-            };
-          })
-        );
-
-        // Sort: directories with .beads first, then alphabetically
-        dirsWithBeadsStatus.sort((a, b) => {
-          if (a.hasBeads && !b.hasBeads) return -1;
-          if (!a.hasBeads && b.hasBeads) return 1;
-          return a.name.localeCompare(b.name);
-        });
-
-        setDirectories(dirsWithBeadsStatus);
-        setCurrentPathHasBeads(currentBeadsResult.exists);
-      } catch (err) {
-        console.error("Error loading directories:", err);
-        setError(err instanceof Error ? err.message : "Failed to load directories");
-        setDirectories([]);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    loadDirectories();
-  }, [currentPath]);
-
-  const navigateToDirectory = useCallback(
-    (path: string) => {
-      onPathChange(path);
-    },
-    [onPathChange]
-  );
-
-  const navigateUp = useCallback(() => {
-    const parentPath = currentPath.replace(/\/[^/]+\/?$/, "") || "/";
-    onPathChange(parentPath);
-  }, [currentPath, onPathChange]);
-
-  const navigateToHome = useCallback(() => {
-    // Get home directory - on macOS/Linux it's typically /Users/username or /home/username
-    const homePath =
-      typeof window !== "undefined"
-        ? "/Users" // Start at /Users on macOS for navigation
-        : "/";
-    onPathChange(homePath);
-  }, [onPathChange]);
-
-  // Build breadcrumb segments from current path
-  const pathSegments = currentPath.split("/").filter(Boolean);
-
-  const handleKeyDown = useCallback(
-    (e: React.KeyboardEvent) => {
-      if (directories.length === 0) return;
-
-      switch (e.key) {
-        case "ArrowDown":
-          e.preventDefault();
-          setSelectedIndex((prev) =>
-            prev < directories.length - 1 ? prev + 1 : prev
-          );
-          break;
-        case "ArrowUp":
-          e.preventDefault();
-          setSelectedIndex((prev) => (prev > 0 ? prev - 1 : prev));
-          break;
-        case "Enter":
-          e.preventDefault();
-          if (selectedIndex >= 0 && selectedIndex < directories.length) {
-            navigateToDirectory(directories[selectedIndex].path);
-          }
-          break;
-        case "Backspace":
-          if (currentPath !== "/") {
-            e.preventDefault();
-            navigateUp();
-          }
-          break;
-      }
-    },
-    [directories, selectedIndex, navigateToDirectory, navigateUp, currentPath]
-  );
-
-  const handleSelect = useCallback(() => {
-    onSelectPath(currentPath, currentPathHasBeads);
-  }, [currentPath, currentPathHasBeads, onSelectPath]);
-
-  return (
-    <div
-      className={cn("flex flex-col gap-3", className)}
-      onKeyDown={handleKeyDown}
-      tabIndex={0}
-      role="application"
-      aria-label="Folder browser"
-    >
-      {/* Breadcrumb navigation */}
-      <div className="flex items-center gap-1 rounded-md border border-zinc-700 bg-zinc-800/50 px-2 py-1.5 text-sm">
-        <Button
-          variant="ghost"
-          size="xs"
-          mode="icon"
-          onClick={navigateToHome}
-          aria-label="Go to home directory"
-          className="shrink-0"
-        >
-          <Home />
-        </Button>
-        <ChevronRight className="size-3 shrink-0 text-zinc-500" />
-        {pathSegments.map((segment, index) => {
-          const segmentPath = "/" + pathSegments.slice(0, index + 1).join("/");
-          const isLast = index === pathSegments.length - 1;
-
-          return (
-            <div key={segmentPath} className="flex items-center gap-1">
-              <button
-                type="button"
-                onClick={() => navigateToDirectory(segmentPath)}
-                className={cn(
-                  "rounded px-1 py-0.5 text-sm transition-colors hover:bg-zinc-700",
-                  isLast ? "text-zinc-100" : "text-zinc-400"
-                )}
-              >
-                {segment}
-              </button>
-              {!isLast && (
-                <ChevronRight className="size-3 shrink-0 text-zinc-500" />
-              )}
-            </div>
-          );
-        })}
-      </div>
-
-      {/* Current path beads indicator */}
-      {currentPathHasBeads && (
-        <div className="flex items-center gap-2 rounded-md border border-purple-500/30 bg-purple-500/10 px-3 py-2">
-          <Badge variant="info" size="sm">
-            .beads found
-          </Badge>
-          <span className="text-xs text-zinc-400">
-            This folder contains a beads project
-          </span>
-        </div>
-      )}
-
-      {/* Directory list */}
-      <ScrollArea className="h-[300px] rounded-md border border-zinc-700 bg-zinc-800/50">
-        <div ref={listRef} className="p-2" role="listbox" aria-label="Directories">
-          {loading ? (
-            <div className="flex items-center justify-center py-8 text-zinc-500">
-              <div className="size-4 animate-spin rounded-full border-2 border-zinc-500 border-t-transparent" />
-              <span className="ml-2 text-sm">Loading...</span>
-            </div>
-          ) : error ? (
-            <div className="py-8 text-center text-sm text-red-400">{error}</div>
-          ) : directories.length === 0 ? (
-            <div className="py-8 text-center text-sm text-zinc-500">
-              No subdirectories found
-            </div>
-          ) : (
-            directories.map((dir, index) => (
-              <button
-                key={dir.path}
-                type="button"
-                role="option"
-                aria-selected={selectedIndex === index}
-                onClick={() => setSelectedIndex(index)}
-                onDoubleClick={() => navigateToDirectory(dir.path)}
-                className={cn(
-                  "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm transition-colors",
-                  selectedIndex === index
-                    ? "bg-zinc-700 text-zinc-100"
-                    : "text-zinc-300 hover:bg-zinc-700/50",
-                  dir.hasBeads && "border-l-2 border-purple-500"
-                )}
-              >
-                {selectedIndex === index ? (
-                  <FolderOpen className="size-4 shrink-0 text-zinc-400" />
-                ) : (
-                  <Folder
-                    className={cn(
-                      "size-4 shrink-0",
-                      dir.hasBeads ? "text-purple-400" : "text-zinc-400"
-                    )}
-                  />
-                )}
-                <span className="truncate">{dir.name}</span>
-                {dir.hasBeads && (
-                  <Badge variant="info" size="xs" className="ml-auto shrink-0">
-                    .beads
-                  </Badge>
-                )}
-              </button>
-            ))
-          )}
-        </div>
-      </ScrollArea>
-
-      {/* Keyboard hints */}
-      <div className="text-xs text-zinc-500">
-        Double-click or press Enter to open. Backspace to go up.
-      </div>
-
-      {/* Select button */}
-      <Button
-        onClick={handleSelect}
-        disabled={!currentPath || loading}
-        className="w-full"
-      >
-        Select This Folder
-      </Button>
-    </div>
-  );
-}

package/src/components/footer.tsx

@@ -1,27 +0,0 @@
-export function Footer() {
-  return (
-    <footer className="border-t border-zinc-200 px-6 py-4">
-      <div className="flex flex-col items-center justify-center gap-2 text-sm text-zinc-500 sm:flex-row sm:gap-4">
-        <span>Beads Kanban UI</span>
-        <span className="hidden sm:inline">·</span>
-        <a
-          href="https://github.com/AvivK5498/beads-kanban-ui"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="flex items-center gap-1.5 hover:text-zinc-900 transition-colors"
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="16"
-            height="16"
-            viewBox="0 0 24 24"
-            fill="currentColor"
-          >
-            <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
-          </svg>
-          View on GitHub
-        </a>
-      </div>
-    </footer>
-  );
-}

package/src/components/kanban/default.tsx

@@ -1,184 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import {
-  Kanban,
-  KanbanBoard,
-  KanbanColumn,
-  KanbanColumnContent,
-  KanbanColumnHandle,
-  KanbanItem,
-  KanbanItemHandle,
-  KanbanOverlay,
-} from '@/components/ui/kanban';
-import { GripVertical } from 'lucide-react';
-
-interface Task {
-  id: string;
-  title: string;
-  priority: 'low' | 'medium' | 'high';
-  description?: string;
-  assignee?: string;
-  assigneeAvatar?: string;
-  dueDate?: string;
-}
-
-const COLUMN_TITLES: Record<string, string> = {
-  backlog: 'Backlog',
-  inProgress: 'In Progress',
-  review: 'Review',
-  done: 'Done',
-};
-
-interface TaskCardProps extends Omit<React.ComponentProps<typeof KanbanItem>, 'value' | 'children'> {
-  task: Task;
-  asHandle?: boolean;
-}
-
-function TaskCard({ task, asHandle, ...props }: TaskCardProps) {
-  const cardContent = (
-    <div className="rounded-md border bg-card p-3 shadow-xs">
-      <div className="flex flex-col gap-2.5">
-        <div className="flex items-center justify-between gap-2">
-          <span className="line-clamp-1 font-medium text-sm">{task.title}</span>
-          <Badge
-            variant={task.priority === 'high' ? 'destructive' : task.priority === 'medium' ? 'primary' : 'warning'}
-            appearance="outline"
-            className="pointer-events-none h-5 rounded-sm px-1.5 text-[11px] capitalize shrink-0"
-          >
-            {task.priority}
-          </Badge>
-        </div>
-        <div className="flex items-center justify-between text-muted-foreground text-xs">
-          {task.assignee && (
-            <div className="flex items-center gap-1">
-              <Avatar className="size-4">
-                <AvatarImage src={task.assigneeAvatar} />
-                <AvatarFallback>{task.assignee.charAt(0)}</AvatarFallback>
-              </Avatar>
-              <span className="line-clamp-1">{task.assignee}</span>
-            </div>
-          )}
-          {task.dueDate && <time className="text-[10px] tabular-nums whitespace-nowrap">{task.dueDate}</time>}
-        </div>
-      </div>
-    </div>
-  );
-
-  return (
-    <KanbanItem value={task.id} {...props}>
-      {asHandle ? <KanbanItemHandle>{cardContent}</KanbanItemHandle> : cardContent}
-    </KanbanItem>
-  );
-}
-
-interface TaskColumnProps extends Omit<React.ComponentProps<typeof KanbanColumn>, 'children'> {
-  tasks: Task[];
-  isOverlay?: boolean;
-}
-
-function TaskColumn({ value, tasks, isOverlay, ...props }: TaskColumnProps) {
-  return (
-    <KanbanColumn value={value} {...props} className="rounded-md border bg-card p-2.5 shadow-xs">
-      <div className="flex items-center justify-between mb-2.5">
-        <div className="flex items-center gap-2.5">
-          <span className="font-semibold text-sm">{COLUMN_TITLES[value]}</span>
-          <Badge variant="secondary">{tasks.length}</Badge>
-        </div>
-        <KanbanColumnHandle asChild>
-          <Button variant="dim" size="sm" mode="icon">
-            <GripVertical />
-          </Button>
-        </KanbanColumnHandle>
-      </div>
-      <KanbanColumnContent value={value} className="flex flex-col gap-2.5 p-0.5">
-        {tasks.map((task) => (
-          <TaskCard key={task.id} task={task} asHandle={!isOverlay} />
-        ))}
-      </KanbanColumnContent>
-    </KanbanColumn>
-  );
-}
-
-export default function Component() {
-  const [columns, setColumns] = React.useState<Record<string, Task[]>>({
-    backlog: [
-      {
-        id: '1',
-        title: 'Add authentication',
-        priority: 'high',
-        assignee: 'John Doe',
-        assigneeAvatar: 'https://randomuser.me/api/portraits/men/1.jpg',
-        dueDate: 'Jan 10, 2025',
-      },
-      {
-        id: '2',
-        title: 'Create API endpoints',
-        priority: 'medium',
-        assignee: 'Jane Smith',
-        assigneeAvatar: 'https://randomuser.me/api/portraits/women/2.jpg',
-        dueDate: 'Jan 15, 2025',
-      },
-      {
-        id: '3',
-        title: 'Write documentation',
-        priority: 'low',
-        assignee: 'Bob Johnson',
-        assigneeAvatar: 'https://randomuser.me/api/portraits/men/3.jpg',
-        dueDate: 'Jan 20, 2025',
-      },
-    ],
-    inProgress: [
-      {
-        id: '4',
-        title: 'Design system updates',
-        priority: 'high',
-        assignee: 'Alice Brown',
-        assigneeAvatar: 'https://randomuser.me/api/portraits/women/4.jpg',
-        dueDate: 'Aug 25, 2025',
-      },
-      {
-        id: '5',
-        title: 'Implement dark mode',
-        priority: 'medium',
-        assignee: 'Charlie Wilson',
-        assigneeAvatar: 'https://randomuser.me/api/portraits/men/5.jpg',
-        dueDate: 'Aug 25, 2025',
-      },
-    ],
-    done: [
-      {
-        id: '7',
-        title: 'Setup project',
-        priority: 'high',
-        assignee: 'Eve Davis',
-        assigneeAvatar: 'https://randomuser.me/api/portraits/women/6.jpg',
-        dueDate: 'Sep 25, 2025',
-      },
-      {
-        id: '8',
-        title: 'Initial commit',
-        priority: 'low',
-        assignee: 'Frank White',
-        assigneeAvatar: 'https://randomuser.me/api/portraits/men/7.jpg',
-        dueDate: 'Sep 20, 2025',
-      },
-    ],
-  });
-
-  return (
-    <Kanban value={columns} onValueChange={setColumns} getItemValue={(item) => item.id}>
-      <KanbanBoard className="grid auto-rows-fr grid-cols-3">
-        {Object.entries(columns).map(([columnValue, tasks]) => (
-          <TaskColumn key={columnValue} value={columnValue} tasks={tasks} />
-        ))}
-      </KanbanBoard>
-      <KanbanOverlay>
-        <div className="rounded-md bg-muted/60 size-full" />
-      </KanbanOverlay>
-    </Kanban>
-  );
-}

package/src/components/kanban-column.tsx

@@ -1,167 +0,0 @@
-"use client";
-
-import { ScrollArea } from "@/components/ui/scroll-area";
-import { Badge } from "@/components/ui/badge";
-import { BeadCard } from "@/components/bead-card";
-import { EpicCard } from "@/components/epic-card";
-import { cn } from "@/lib/utils";
-import type { Bead, BeadStatus, Epic } from "@/types";
-import type { BranchStatus } from "@/lib/git";
-
-export interface KanbanColumnProps {
-  status: BeadStatus;
-  title: string;
-  beads: Bead[];
-  /** All beads for resolving epic children */
-  allBeads: Bead[];
-  selectedBeadId?: string | null;
-  ticketNumbers?: Map<string, number>;
-  branchStatuses?: Record<string, BranchStatus>;
-  onSelectBead: (bead: Bead) => void;
-  onChildClick?: (child: Bead) => void;
-  onNavigateToDependency?: (beadId: string) => void;
-  /** Project root path for fetching design docs */
-  projectPath?: string;
-}
-
-/**
- * Get accent border class for column header based on status
- */
-function getColumnAccentBorder(status: BeadStatus): string {
-  switch (status) {
-    case "open":
-      return "border-t-2 border-t-blue-500/60";
-    case "in_progress":
-      return "border-t-2 border-t-amber-500/60";
-    case "inreview":
-      return "border-t-2 border-t-purple-500/60";
-    case "closed":
-      return "border-t-2 border-t-green-500/60";
-    default:
-      return "border-t-2 border-t-zinc-500/60";
-  }
-}
-
-/**
- * Get header text color based on status
- */
-function getHeaderTextColor(status: BeadStatus): string {
-  switch (status) {
-    case "open":
-      return "text-blue-400";
-    case "in_progress":
-      return "text-amber-400";
-    case "inreview":
-      return "text-purple-400";
-    case "closed":
-      return "text-green-400";
-    default:
-      return "text-zinc-400";
-  }
-}
-
-/**
- * Get badge color class for count badge based on status (dark theme)
- */
-function getBadgeVariant(status: BeadStatus): string {
-  switch (status) {
-    case "open":
-      return "bg-blue-500/20 text-blue-400 border-blue-500/30 hover:bg-blue-500/20";
-    case "in_progress":
-      return "bg-amber-500/20 text-amber-400 border-amber-500/30 hover:bg-amber-500/20";
-    case "inreview":
-      return "bg-purple-500/20 text-purple-400 border-purple-500/30 hover:bg-purple-500/20";
-    case "closed":
-      return "bg-green-500/20 text-green-400 border-green-500/30 hover:bg-green-500/20";
-    default:
-      return "bg-zinc-500/20 text-zinc-400 border-zinc-500/30 hover:bg-zinc-500/20";
-  }
-}
-
-/**
- * Type guard to check if a bead is an epic
- */
-function isEpic(bead: Bead): bead is Epic {
-  return bead.issue_type === 'epic';
-}
-
-/**
- * Reusable Kanban column component with header, count badge, and scrollable bead list
- * Renders EpicCard for epics and BeadCard for standalone tasks
- */
-export function KanbanColumn({
-  status,
-  title,
-  beads,
-  allBeads,
-  selectedBeadId,
-  ticketNumbers,
-  branchStatuses = {},
-  onSelectBead,
-  onChildClick,
-  onNavigateToDependency,
-  projectPath,
-}: KanbanColumnProps) {
-  return (
-    <div
-      className={cn(
-        "flex flex-col h-full min-h-0 rounded-lg",
-        "bg-zinc-900/30 border border-zinc-800/50"
-      )}
-    >
-      {/* Column Header - fixed height with colored accent border */}
-      <div className={cn(
-        "flex-shrink-0 flex items-center justify-between px-4 py-3 border-b border-zinc-800/50",
-        getColumnAccentBorder(status)
-      )}>
-        <h2 className={cn("font-semibold text-sm", getHeaderTextColor(status))}>{title}</h2>
-        <Badge
-          variant="secondary"
-          className={cn("text-xs px-2 py-0.5", getBadgeVariant(status))}
-        >
-          {beads.length}
-        </Badge>
-      </div>
-
-      {/* Scrollable Bead List */}
-      <ScrollArea className="flex-1 min-h-0 p-3">
-        <div className="space-y-3">
-          {beads.map((bead) => {
-            // Render EpicCard for epics, BeadCard for standalone tasks
-            if (isEpic(bead)) {
-              return (
-                <EpicCard
-                  key={bead.id}
-                  epic={bead}
-                  allBeads={allBeads}
-                  ticketNumber={ticketNumbers?.get(bead.id)}
-                  isSelected={selectedBeadId === bead.id}
-                  onSelect={onSelectBead}
-                  onChildClick={onChildClick ?? onSelectBead}
-                  onNavigateToDependency={onNavigateToDependency}
-                  projectPath={projectPath}
-                />
-              );
-            }
-
-            return (
-              <BeadCard
-                key={bead.id}
-                bead={bead}
-                ticketNumber={ticketNumbers?.get(bead.id)}
-                isSelected={selectedBeadId === bead.id}
-                branchStatus={branchStatuses[bead.id]}
-                onSelect={onSelectBead}
-              />
-            );
-          })}
-          {beads.length === 0 && (
-            <div className="text-center py-8 text-zinc-500 text-sm">
-              No beads
-            </div>
-          )}
-        </div>
-      </ScrollArea>
-    </div>
-  );
-}