beads-kanban-ui 0.1.0 → 0.1.1

package/src/components/editable-project-name.tsx

@@ -1,178 +0,0 @@
-"use client";
-
-import { useState, useRef, useEffect } from "react";
-import { Pencil, Check, X, Loader2 } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { useToast } from "@/hooks/use-toast";
-import { updateProject } from "@/lib/db";
-
-/**
- * Converts kebab-case, snake_case, camelCase to Title Case with spaces
- */
-function formatProjectName(name: string): string {
-  return name
-    .replace(/[-_]/g, ' ')  // Replace hyphens and underscores with spaces
-    .replace(/([a-z])([A-Z])/g, '$1 $2')  // Add space before capitals in camelCase
-    .replace(/\b\w/g, c => c.toUpperCase());  // Capitalize first letter of each word
-}
-
-interface EditableProjectNameProps {
-  projectId: string;
-  initialName: string;
-  onNameUpdated: () => void;
-}
-
-/**
- * Editable project name component with popover for inline editing
- */
-export function EditableProjectName({
-  projectId,
-  initialName,
-  onNameUpdated,
-}: EditableProjectNameProps) {
-  const [isOpen, setIsOpen] = useState(false);
-  const [name, setName] = useState(initialName);
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const inputRef = useRef<HTMLInputElement>(null);
-  const { toast } = useToast();
-
-  // Reset name when popover opens
-  useEffect(() => {
-    if (isOpen) {
-      setName(initialName);
-      // Focus input after popover opens
-      setTimeout(() => inputRef.current?.select(), 0);
-    }
-  }, [isOpen, initialName]);
-
-  const handleSubmit = async (e?: React.FormEvent) => {
-    e?.preventDefault();
-
-    const trimmedName = name.trim();
-
-    if (!trimmedName) {
-      toast({
-        title: "Invalid name",
-        description: "Project name cannot be empty.",
-        variant: "destructive",
-      });
-      return;
-    }
-
-    if (trimmedName === initialName) {
-      setIsOpen(false);
-      return;
-    }
-
-    setIsSubmitting(true);
-
-    try {
-      await updateProject({ id: projectId, name: trimmedName });
-
-      toast({
-        title: "Project renamed",
-        description: `Project has been renamed to "${trimmedName}".`,
-      });
-
-      setIsOpen(false);
-      onNameUpdated();
-    } catch (err) {
-      console.error("Error updating project name:", err);
-      toast({
-        title: "Error",
-        description: "Failed to update project name. Please try again.",
-        variant: "destructive",
-      });
-    } finally {
-      setIsSubmitting(false);
-    }
-  };
-
-  const handleCancel = () => {
-    setName(initialName);
-    setIsOpen(false);
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === "Escape") {
-      handleCancel();
-    }
-  };
-
-  return (
-    <div className="flex items-center gap-2">
-      <h1 className="text-lg font-semibold text-zinc-100">{formatProjectName(initialName)}</h1>
-      <Popover open={isOpen} onOpenChange={setIsOpen}>
-        <PopoverTrigger asChild>
-          <Button
-            variant="ghost"
-            size="icon"
-            className="h-7 w-7 text-muted-foreground hover:text-foreground"
-            aria-label="Edit project name"
-          >
-            <Pencil className="h-3.5 w-3.5" />
-          </Button>
-        </PopoverTrigger>
-        <PopoverContent className="w-80" align="start">
-          <form onSubmit={handleSubmit}>
-            <div className="space-y-4">
-              <div className="space-y-2">
-                <label
-                  htmlFor="project-name"
-                  className="text-sm font-medium text-foreground"
-                >
-                  Project Name
-                </label>
-                <Input
-                  ref={inputRef}
-                  id="project-name"
-                  value={name}
-                  onChange={(e) => setName(e.target.value)}
-                  onKeyDown={handleKeyDown}
-                  placeholder="Enter project name"
-                  disabled={isSubmitting}
-                  autoComplete="off"
-                />
-              </div>
-              <div className="flex justify-end gap-2">
-                <Button
-                  type="button"
-                  variant="outline"
-                  size="sm"
-                  onClick={handleCancel}
-                  disabled={isSubmitting}
-                >
-                  <X className="mr-1 h-3.5 w-3.5" />
-                  Cancel
-                </Button>
-                <Button
-                  type="submit"
-                  size="sm"
-                  disabled={isSubmitting || !name.trim()}
-                >
-                  {isSubmitting ? (
-                    <>
-                      <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" />
-                      Saving...
-                    </>
-                  ) : (
-                    <>
-                      <Check className="mr-1 h-3.5 w-3.5" />
-                      Save
-                    </>
-                  )}
-                </Button>
-              </div>
-            </div>
-          </form>
-        </PopoverContent>
-      </Popover>
-    </div>
-  );
-}

package/src/components/epic-card.tsx

@@ -1,263 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { Badge } from "@/components/ui/badge";
-import { Progress } from "@/components/ui/progress";
-import { cn } from "@/lib/utils";
-import type { Bead, Epic, EpicProgress } from "@/types";
-import { ChevronDown, ChevronRight, Layers, MessageSquare } from "lucide-react";
-import { SubtaskList } from "@/components/subtask-list";
-import { DependencyBadge } from "@/components/dependency-badge";
-import { DesignDocPreview } from "@/components/design-doc-preview";
-import { computeEpicProgress } from "@/lib/epic-parser";
-
-export interface EpicCardProps {
-  /** Epic bead with children */
-  epic: Epic;
-  /** All beads to resolve children */
-  allBeads: Bead[];
-  /** Ticket number for display */
-  ticketNumber?: number;
-  /** Whether this epic is selected */
-  isSelected?: boolean;
-  /** Callback when selecting this epic */
-  onSelect: (epic: Epic) => void;
-  /** Callback when clicking a child task */
-  onChildClick: (child: Bead) => void;
-  /** Callback when navigating to a dependency */
-  onNavigateToDependency?: (beadId: string) => void;
-  /** Project root path for fetching design docs */
-  projectPath?: string;
-}
-
-/**
- * Format bead ID for display
- */
-function formatBeadId(id: string): string {
-  if (id.startsWith("BD-") || id.startsWith("bd-")) {
-    return id.length > 10 ? 'BD-' + id.slice(-6) : id.toUpperCase();
-  }
-  const parts = id.split("-");
-  const shortId = parts[parts.length - 1];
-  return 'BD-' + shortId.slice(0, 6);
-}
-
-/**
- * Truncate text to max length
- */
-function truncate(text: string, maxLength: number): string {
-  if (text.length <= maxLength) return text;
-  return text.slice(0, maxLength).trim() + "…";
-}
-
-/**
- * Compute epic progress from children
- * Uses epic-parser utility for proper dependency resolution
- */
-function computeProgress(epic: Epic, allBeads: Bead[]): EpicProgress {
-  return computeEpicProgress(epic, allBeads);
-}
-
-/**
- * Get progress bar indicator color based on completion percentage
- */
-function getProgressIndicatorClass(percentage: number): string {
-  if (percentage === 100) return "[&>*]:bg-green-500";
-  if (percentage >= 75) return "[&>*]:bg-green-500";
-  if (percentage >= 50) return "[&>*]:bg-blue-500";
-  if (percentage >= 25) return "[&>*]:bg-amber-500";
-  return "[&>*]:bg-purple-500";
-}
-
-/**
- * Larger epic card with distinctive styling
- */
-export function EpicCard({
-  epic,
-  allBeads,
-  ticketNumber,
-  isSelected = false,
-  onSelect,
-  onChildClick,
-  onNavigateToDependency,
-  projectPath
-}: EpicCardProps) {
-  const [isExpanded, setIsExpanded] = useState(false);
-  const [isDesignPreviewExpanded, setIsDesignPreviewExpanded] = useState(false);
-
-  // Resolve children from IDs
-  const children = (epic.children || [])
-    .map(childId => allBeads.find(b => b.id === childId))
-    .filter((b): b is Bead => b !== undefined);
-
-  const progress = computeProgress(epic, allBeads);
-  const progressPercentage = progress.total > 0 
-    ? Math.round((progress.completed / progress.total) * 100) 
-    : 0;
-
-  const commentCount = (epic.comments ?? []).length;
-  const hasDesignDoc = !!epic.design_doc;
-
-  return (
-    <div
-      data-bead-id={epic.id}
-      role="button"
-      tabIndex={0}
-      aria-label={`Select epic: ${epic.title}`}
-      className={cn(
-        "rounded-lg cursor-pointer p-4",
-        "bg-zinc-900/70 backdrop-blur-md",
-        "border border-zinc-800/60 border-l-4 border-l-purple-500",
-        "shadow-sm shadow-black/20",
-        "transition-[transform,box-shadow,border-color] duration-200",
-        "hover:-translate-y-0.5 hover:shadow-lg hover:shadow-black/30",
-        "hover:border-zinc-700",
-        "focus:outline-none focus-visible:ring-2 focus-visible:ring-purple-400 focus-visible:ring-offset-2 focus-visible:ring-offset-[#0a0a0a]",
-        isSelected && "ring-2 ring-purple-400 ring-offset-2 ring-offset-[#0a0a0a]"
-      )}
-      onClick={() => onSelect(epic)}
-      onKeyDown={(e) => {
-        if (e.key === 'Enter' || e.key === ' ') {
-          e.preventDefault();
-          onSelect(epic);
-        }
-      }}
-    >
-      <div className="space-y-3">
-        {/* Header: Ticket # + Epic Icon + ID + Dependencies */}
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <Layers className="h-4 w-4 text-purple-400" aria-hidden="true" />
-            <span className="text-xs font-mono text-zinc-400">
-              {ticketNumber !== undefined && (
-                <span className="font-semibold text-white">#{ticketNumber}</span>
-              )}
-              {ticketNumber !== undefined && " "}
-              {formatBeadId(epic.id)}
-            </span>
-          </div>
-          <div className="flex items-center gap-1.5">
-            <DependencyBadge
-              deps={epic.deps}
-              blockers={epic.blockers}
-              onNavigate={onNavigateToDependency}
-            />
-            <Badge
-              variant="outline"
-              className="text-[10px] px-2 py-0.5 border-purple-500/30 text-purple-400 bg-purple-500/20 font-semibold"
-            >
-              EPIC
-            </Badge>
-          </div>
-        </div>
-
-        {/* Title */}
-        <h3 className="font-bold text-base leading-tight text-purple-100">
-          {truncate(epic.title, 60)}
-        </h3>
-
-        {/* Description */}
-        {epic.description && (
-          <p className="text-xs text-zinc-400 leading-relaxed">
-            {truncate(epic.description, 100)}
-          </p>
-        )}
-
-        {/* Progress Bar */}
-        <div className="space-y-1.5">
-          <div className="flex items-center justify-between text-xs">
-            <span className="text-zinc-400">
-              Progress: {progress.completed}/{progress.total} completed
-            </span>
-            <span className="font-semibold text-zinc-300">{progressPercentage}%</span>
-          </div>
-          <Progress
-            value={progressPercentage}
-            aria-label={`Epic progress: ${progress.completed} of ${progress.total} completed`}
-            className={cn(
-              "h-2 bg-zinc-800",
-              getProgressIndicatorClass(progressPercentage)
-            )}
-          />
-          <div className="flex items-center gap-3 text-[10px] text-zinc-500">
-            <span className="flex items-center gap-1">
-              <div className="w-2 h-2 rounded-full bg-blue-500" aria-hidden="true" />
-              {progress.inProgress} in progress
-            </span>
-            {progress.blocked > 0 && (
-              <span className="flex items-center gap-1">
-                <div className="w-2 h-2 rounded-full bg-red-500" aria-hidden="true" />
-                {progress.blocked} blocked
-              </span>
-            )}
-          </div>
-        </div>
-
-        {/* Design Doc Preview */}
-        {hasDesignDoc && projectPath && (
-          <div className="pt-2 border-t border-zinc-700">
-            <button
-              onClick={(e) => {
-                e.stopPropagation();
-                setIsDesignPreviewExpanded(!isDesignPreviewExpanded);
-              }}
-              aria-expanded={isDesignPreviewExpanded}
-              aria-label={`${isDesignPreviewExpanded ? 'Collapse' : 'Expand'} design preview`}
-              className="flex items-center gap-1 text-xs font-semibold text-purple-400 hover:text-purple-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-purple-400 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-900 rounded mb-2"
-            >
-              {isDesignPreviewExpanded ? (
-                <ChevronDown className="h-3.5 w-3.5" aria-hidden="true" />
-              ) : (
-                <ChevronRight className="h-3.5 w-3.5" aria-hidden="true" />
-              )}
-              Design Preview
-            </button>
-            {isDesignPreviewExpanded && (
-              <DesignDocPreview
-                designDocPath={epic.design_doc!}
-                epicId={epic.id}
-                projectPath={projectPath}
-              />
-            )}
-          </div>
-        )}
-
-        {/* Children Preview/List */}
-        <div className="pt-2 border-t border-zinc-700">
-          <button
-            onClick={(e) => {
-              e.stopPropagation();
-              setIsExpanded(!isExpanded);
-            }}
-            aria-expanded={isExpanded}
-            aria-label={`${isExpanded ? 'Collapse' : 'Expand'} child tasks`}
-            className="flex items-center gap-1 text-xs font-semibold text-purple-400 hover:text-purple-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-purple-400 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-900 rounded mb-2"
-          >
-            {isExpanded ? (
-              <ChevronDown className="h-3.5 w-3.5" aria-hidden="true" />
-            ) : (
-              <ChevronRight className="h-3.5 w-3.5" aria-hidden="true" />
-            )}
-            Child Tasks ({children.length})
-          </button>
-          <SubtaskList
-            childTasks={children}
-            onChildClick={onChildClick}
-            maxCollapsed={3}
-            isExpanded={isExpanded}
-          />
-        </div>
-
-        {/* Footer: comment count */}
-        {commentCount > 0 && (
-          <div className="flex items-center pt-2">
-            <span className="flex items-center gap-1 text-[10px] text-muted-foreground">
-              <MessageSquare className="h-3 w-3" aria-hidden="true" />
-              {commentCount} {commentCount === 1 ? "comment" : "comments"}
-            </span>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}