beads-kanban-ui 0.1.0 → 0.1.2

package/src/components/bead-detail.tsx

@@ -1,306 +0,0 @@
-"use client";
-
-import {
-  Sheet,
-  SheetContent,
-  SheetHeader,
-  SheetTitle,
-  SheetDescription,
-} from "@/components/ui/sheet";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { cn } from "@/lib/utils";
-import type { Bead, BeadStatus } from "@/types";
-import { ArrowLeft, GitBranch, Calendar } from "lucide-react";
-import { DesignDocViewer } from "@/components/design-doc-viewer";
-import { SubtaskList } from "@/components/subtask-list";
-import { useState, useEffect, useCallback, useMemo } from "react";
-
-export interface BeadDetailProps {
-  bead: Bead;
-  ticketNumber?: number;
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  children?: React.ReactNode;
-  /** Project root path (absolute) */
-  projectPath?: string;
-  /** All beads for resolving child task IDs */
-  allBeads?: Bead[];
-  /** Callback when clicking a child task */
-  onChildClick?: (child: Bead) => void;
-}
-
-/**
- * Get status badge color classes based on status
- */
-function getStatusColor(status: BeadStatus): string {
-  switch (status) {
-    case "open":
-      return "bg-blue-500/20 text-blue-400 border-blue-500/30";
-    case "in_progress":
-      return "bg-amber-500/20 text-amber-400 border-amber-500/30";
-    case "inreview":
-      return "bg-purple-500/20 text-purple-400 border-purple-500/30";
-    case "closed":
-      return "bg-green-500/20 text-green-400 border-green-500/30";
-    default:
-      return "bg-zinc-500/20 text-zinc-400 border-zinc-500/30";
-  }
-}
-
-/**
- * Get priority badge color classes based on priority level
- */
-function getPriorityColor(priority: number): string {
-  switch (priority) {
-    case 0:
-      return "bg-red-500/20 text-red-400 border-red-500/30";
-    case 1:
-      return "bg-orange-500/20 text-orange-400 border-orange-500/30";
-    case 2:
-      return "bg-zinc-500/20 text-zinc-400 border-zinc-500/30";
-    default:
-      return "bg-zinc-600/20 text-zinc-500 border-zinc-600/30";
-  }
-}
-
-/**
- * Format status for display (e.g., "in_progress" -> "In Progress")
- */
-function formatStatus(status: BeadStatus): string {
-  switch (status) {
-    case "open":
-      return "Open";
-    case "in_progress":
-      return "In Progress";
-    case "inreview":
-      return "In Review";
-    case "closed":
-      return "Closed";
-    default:
-      return status;
-  }
-}
-
-/**
- * Format bead ID for display (uppercase BD prefix)
- */
-function formatBeadId(id: string): string {
-  if (id.startsWith("BD-") || id.startsWith("bd-")) {
-    return id.toUpperCase();
-  }
-  const parts = id.split("-");
-  const shortId = parts[parts.length - 1];
-  return `BD-${shortId.slice(0, 8).toUpperCase()}`;
-}
-
-/**
- * Format date for display
- */
-function formatDate(dateString: string): string {
-  try {
-    const date = new Date(dateString);
-    return date.toLocaleDateString("en-US", {
-      month: "short",
-      day: "numeric",
-      year: date.getFullYear() !== new Date().getFullYear() ? "numeric" : undefined,
-    });
-  } catch {
-    return dateString;
-  }
-}
-
-/**
- * Bead detail sheet component - slides in from the right
- * Displays full bead information with metadata grid and description
- *
- * Note: When DesignDocViewer goes fullscreen, we hide the Sheet via CSS and
- * override Radix's scroll lock to allow the MorphingDialog to function properly.
- * This avoids the conflict between Radix Dialog and MorphingDialog scroll locks.
- */
-export function BeadDetail({
-  bead,
-  ticketNumber,
-  open,
-  onOpenChange,
-  children,
-  projectPath,
-  allBeads,
-  onChildClick,
-}: BeadDetailProps) {
-  const branchName = `bd-${formatBeadId(bead.id)}`;
-  const [isDesignDocFullScreen, setIsDesignDocFullScreen] = useState(false);
-  const hasDesignDoc = !!bead.design_doc;
-
-  // Check if this is an epic with children
-  const isEpic = bead.children && bead.children.length > 0;
-
-  // Resolve children from IDs
-  const childTasks = useMemo(() => {
-    if (!isEpic || !allBeads) return [];
-    return (bead.children || [])
-      .map(childId => allBeads.find(b => b.id === childId))
-      .filter((b): b is Bead => b !== undefined);
-  }, [isEpic, bead.children, allBeads]);
-
-  // Handle fullscreen state changes from DesignDocViewer
-  const handleFullScreenChange = useCallback((isFullScreen: boolean) => {
-    setIsDesignDocFullScreen(isFullScreen);
-  }, []);
-
-  // Override Radix's scroll lock when MorphingDialog is fullscreen
-  // This fixes the pointer-events: none issue on body
-  useEffect(() => {
-    if (isDesignDocFullScreen) {
-      // Remove Radix's scroll lock styles that conflict with MorphingDialog
-      document.body.style.pointerEvents = '';
-      document.body.style.overflow = 'hidden'; // MorphingDialog will manage this
-    }
-  }, [isDesignDocFullScreen]);
-
-  return (
-    <>
-      <Sheet open={open} onOpenChange={onOpenChange}>
-        <SheetContent
-          side="right"
-          className={cn(
-            "w-full sm:max-w-lg md:max-w-xl overflow-y-auto bg-[#0a0a0a] border-zinc-800",
-            isDesignDocFullScreen && "invisible"
-          )}
-        >
-          {/* Header with Back button */}
-          <div className="flex items-center justify-between mb-6">
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={() => onOpenChange(false)}
-              className="gap-1.5 -ml-2"
-            >
-              <ArrowLeft className="h-4 w-4" aria-hidden="true" />
-              Back
-            </Button>
-          </div>
-
-          <SheetHeader className="space-y-4">
-            {/* Ticket Number + Bead ID */}
-            <SheetDescription className="text-xs font-mono text-zinc-500">
-              {ticketNumber !== undefined && (
-                <span className="font-semibold text-zinc-200">#{ticketNumber}</span>
-              )}
-              {ticketNumber !== undefined && " "}
-              {formatBeadId(bead.id)}
-            </SheetDescription>
-
-            {/* Title */}
-            <SheetTitle className="text-xl font-semibold leading-tight text-zinc-100">
-              {bead.title}
-            </SheetTitle>
-          </SheetHeader>
-
-          {/* Metadata Grid */}
-          <div className="mt-6 rounded-lg border border-zinc-800 bg-zinc-900/50 p-4">
-            <div className="grid grid-cols-2 gap-4 text-sm">
-              {/* Status */}
-              <div className="space-y-1">
-                <span className="text-zinc-500 text-xs">Status</span>
-                <div>
-                  <Badge
-                    variant="outline"
-                    className={cn("font-medium", getStatusColor(bead.status))}
-                  >
-                    {formatStatus(bead.status)}
-                  </Badge>
-                </div>
-              </div>
-
-              {/* Priority */}
-              <div className="space-y-1">
-                <span className="text-zinc-500 text-xs">Priority</span>
-                <div>
-                  <Badge
-                    variant="outline"
-                    className={cn("font-medium", getPriorityColor(bead.priority))}
-                  >
-                    P{bead.priority}
-                  </Badge>
-                </div>
-              </div>
-
-              {/* Type */}
-              <div className="space-y-1">
-                <span className="text-zinc-500 text-xs">Type</span>
-                <div>
-                  <Badge variant="outline" className="font-normal capitalize text-zinc-200 border-zinc-700">
-                    {bead.issue_type}
-                  </Badge>
-                </div>
-              </div>
-
-              {/* Branch */}
-              <div className="space-y-1">
-                <span className="text-zinc-500 text-xs">Branch</span>
-                <div className="flex items-center gap-1.5">
-                  <GitBranch className="h-3.5 w-3.5 text-zinc-500" aria-hidden="true" />
-                  <span className="font-mono text-xs text-zinc-200">{branchName}</span>
-                </div>
-              </div>
-
-              {/* Created */}
-              <div className="space-y-1">
-                <span className="text-zinc-500 text-xs">Created</span>
-                <div className="flex items-center gap-1.5">
-                  <Calendar className="h-3.5 w-3.5 text-zinc-500" aria-hidden="true" />
-                  <span className="text-xs text-zinc-200">{formatDate(bead.created_at)}</span>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          {/* Description */}
-          {bead.description && (
-            <div className="mt-6">
-              <h3 className="text-sm font-semibold mb-2 text-zinc-200">Description</h3>
-              <div className="h-px bg-zinc-800 mb-3" />
-              <div className="text-sm text-zinc-400 leading-relaxed whitespace-pre-wrap">
-                {bead.description}
-              </div>
-            </div>
-          )}
-
-          {/* Subtasks (for epics) */}
-          {isEpic && onChildClick && (
-            <div className="mt-6">
-              <h3 className="text-sm font-semibold mb-2 text-zinc-200">
-                Subtasks ({childTasks.length})
-              </h3>
-              <div className="h-px bg-zinc-800 mb-3" />
-              <div className="rounded-lg border border-zinc-800 bg-zinc-900/50 p-3">
-                <SubtaskList
-                  childTasks={childTasks}
-                  onChildClick={onChildClick}
-                  isExpanded={true}
-                />
-              </div>
-            </div>
-          )}
-
-          {/* Design Document */}
-          {hasDesignDoc && projectPath && (
-            <div className="mt-6">
-              <h3 className="text-sm font-semibold mb-3 text-zinc-200">Design Document</h3>
-              <DesignDocViewer
-                designDocPath={bead.design_doc!}
-                epicId={formatBeadId(bead.id)}
-                projectPath={projectPath}
-                onFullScreenChange={handleFullScreenChange}
-              />
-            </div>
-          )}
-
-          {/* Children slot for comments + timeline */}
-          {children && <div className="mt-6">{children}</div>}
-        </SheetContent>
-      </Sheet>
-    </>
-  );
-}

package/src/components/color-picker.tsx

@@ -1,101 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { Check } from "lucide-react";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { cn } from "@/lib/utils";
-
-const PRESET_COLORS = [
-  "#ef4444", // red
-  "#f97316", // orange
-  "#eab308", // yellow
-  "#22c55e", // green
-  "#14b8a6", // teal
-  "#3b82f6", // blue
-  "#8b5cf6", // violet
-  "#ec4899", // pink
-  "#6b7280", // gray
-  "#78716c", // stone
-];
-
-interface ColorPickerProps {
-  value: string;
-  onChange: (color: string) => void;
-  className?: string;
-}
-
-export function ColorPicker({ value, onChange, className }: ColorPickerProps) {
-  const [customColor, setCustomColor] = React.useState(value);
-  const [isOpen, setIsOpen] = React.useState(false);
-
-  const handleCustomColorChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const newColor = e.target.value;
-    setCustomColor(newColor);
-    // Only update if it's a valid hex color
-    if (/^#[0-9A-Fa-f]{6}$/.test(newColor)) {
-      onChange(newColor);
-    }
-  };
-
-  const handlePresetClick = (color: string) => {
-    onChange(color);
-    setCustomColor(color);
-    setIsOpen(false);
-  };
-
-  return (
-    <Popover open={isOpen} onOpenChange={setIsOpen}>
-      <PopoverTrigger asChild>
-        <Button
-          variant="outline"
-          size="sm"
-          className={cn("h-8 w-8 p-0 border-2", className)}
-          style={{ backgroundColor: value }}
-        >
-          <span className="sr-only">Pick a color</span>
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className="w-auto p-3" align="start">
-        <div className="space-y-3">
-          {/* Preset colors */}
-          <div className="grid grid-cols-5 gap-2">
-            {PRESET_COLORS.map((color) => (
-              <button
-                key={color}
-                className={cn(
-                  "h-7 w-7 rounded-md border-2 transition-transform hover:scale-110",
-                  value === color ? "border-zinc-900 ring-2 ring-zinc-900 ring-offset-1" : "border-transparent"
-                )}
-                style={{ backgroundColor: color }}
-                onClick={() => handlePresetClick(color)}
-                type="button"
-              >
-                {value === color && (
-                  <Check className="h-4 w-4 mx-auto text-white drop-shadow-sm" />
-                )}
-                <span className="sr-only">{color}</span>
-              </button>
-            ))}
-          </div>
-
-          {/* Custom hex input */}
-          <div className="flex items-center gap-2">
-            <div
-              className="h-7 w-7 rounded-md border"
-              style={{ backgroundColor: customColor }}
-            />
-            <Input
-              value={customColor}
-              onChange={handleCustomColorChange}
-              placeholder="#000000"
-              className="h-8 font-mono text-sm"
-              maxLength={7}
-            />
-          </div>
-        </div>
-      </PopoverContent>
-    </Popover>
-  );
-}

package/src/components/comment-input.tsx

@@ -1,155 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { Button } from "@/components/ui/button";
-import { cn } from "@/lib/utils";
-import { addComment } from "@/lib/cli";
-import { toast } from "@/hooks/use-toast";
-import { Loader2, CornerDownLeft } from "lucide-react";
-
-export interface CommentInputProps {
-  /** The ID of the bead to add comments to */
-  beadId: string;
-  /** Optional project path for CLI command execution */
-  projectPath?: string;
-  /** Callback fired after a comment is successfully added */
-  onCommentAdded?: () => void;
-  /** Additional CSS classes */
-  className?: string;
-}
-
-/**
- * CommentInput component for adding comments to beads via CLI
- *
- * Features:
- * - Textarea with placeholder
- * - Submit on Enter (Cmd/Ctrl+Enter for newline)
- * - Loading state while submitting
- * - Success/error toasts
- * - Clears input on success
- */
-export function CommentInput({
-  beadId,
-  projectPath,
-  onCommentAdded,
-  className,
-}: CommentInputProps) {
-  const [comment, setComment] = React.useState("");
-  const [isSubmitting, setIsSubmitting] = React.useState(false);
-  const textareaRef = React.useRef<HTMLTextAreaElement>(null);
-
-  const handleSubmit = React.useCallback(async () => {
-    const trimmedComment = comment.trim();
-
-    if (!trimmedComment) {
-      return;
-    }
-
-    setIsSubmitting(true);
-
-    try {
-      await addComment(beadId, trimmedComment, projectPath);
-
-      // Clear input on success
-      setComment("");
-
-      // Show success toast
-      toast({
-        title: "Comment added",
-        description: `Comment added to ${beadId}`,
-      });
-
-      // Notify parent
-      onCommentAdded?.();
-    } catch (error) {
-      // Show error toast with message
-      const errorMessage =
-        error instanceof Error ? error.message : "Unknown error occurred";
-
-      toast({
-        variant: "destructive",
-        title: "Failed to add comment",
-        description: errorMessage,
-      });
-    } finally {
-      setIsSubmitting(false);
-      // Refocus textarea after submission
-      textareaRef.current?.focus();
-    }
-  }, [beadId, comment, projectPath, onCommentAdded]);
-
-  const handleKeyDown = React.useCallback(
-    (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-      // Submit on Enter (without modifier)
-      // Allow Cmd/Ctrl+Enter for newline
-      if (e.key === "Enter" && !e.metaKey && !e.ctrlKey && !e.shiftKey) {
-        e.preventDefault();
-        handleSubmit();
-      }
-    },
-    [handleSubmit]
-  );
-
-  const handleChange = React.useCallback(
-    (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-      setComment(e.target.value);
-    },
-    []
-  );
-
-  const canSubmit = comment.trim().length > 0 && !isSubmitting;
-
-  return (
-    <div className={cn("relative", className)}>
-      <textarea
-        ref={textareaRef}
-        value={comment}
-        onChange={handleChange}
-        onKeyDown={handleKeyDown}
-        placeholder="Add a comment..."
-        disabled={isSubmitting}
-        rows={1}
-        className={cn(
-          "flex w-full resize-none rounded-md border border-input bg-transparent",
-          "px-3 py-2 pr-12 text-sm shadow-sm transition-colors",
-          "placeholder:text-muted-foreground",
-          "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-          "disabled:cursor-not-allowed disabled:opacity-50",
-          "min-h-[40px] max-h-[120px]"
-        )}
-        style={{
-          // Auto-resize based on content
-          height: "auto",
-          minHeight: "40px",
-        }}
-        onInput={(e) => {
-          // Auto-resize textarea
-          const target = e.target as HTMLTextAreaElement;
-          target.style.height = "auto";
-          target.style.height = `${Math.min(target.scrollHeight, 120)}px`;
-        }}
-      />
-
-      {/* Submit button */}
-      <Button
-        type="button"
-        size="icon"
-        variant="ghost"
-        onClick={handleSubmit}
-        disabled={!canSubmit}
-        className={cn(
-          "absolute right-1 top-1/2 -translate-y-1/2",
-          "h-8 w-8 transition-opacity",
-          canSubmit ? "opacity-100" : "opacity-50"
-        )}
-        title="Submit comment (Enter)"
-      >
-        {isSubmitting ? (
-          <Loader2 className="h-4 w-4 animate-spin" />
-        ) : (
-          <CornerDownLeft className="h-4 w-4" />
-        )}
-      </Button>
-    </div>
-  );
-}