beads-kanban-ui 0.1.0 → 0.1.2

package/src/app/project/kanban-board.tsx

@@ -1,356 +0,0 @@
-"use client";
-
-import { useMemo, useRef, useState, useCallback } from "react";
-import Link from "next/link";
-import { useSearchParams, useRouter } from "next/navigation";
-import { useEffect } from "react";
-import { ArrowLeft } from "lucide-react";
-import { QuickFilterBar } from "@/components/quick-filter-bar";
-import { Button } from "@/components/ui/button";
-import { KanbanColumn } from "@/components/kanban-column";
-import { BeadDetail } from "@/components/bead-detail";
-import { CommentList } from "@/components/comment-list";
-import { ActivityTimeline } from "@/components/activity-timeline";
-import { EditableProjectName } from "@/components/editable-project-name";
-import { useBeads } from "@/hooks/use-beads";
-import { useProject } from "@/hooks/use-project";
-import { useBeadFilters } from "@/hooks/use-bead-filters";
-import { useBranchStatuses } from "@/hooks/use-branch-statuses";
-import { useKeyboardNavigation } from "@/hooks/use-keyboard-navigation";
-import type { Bead, BeadStatus } from "@/types";
-
-/**
- * Column configuration for the Kanban board
- * Note: Cancelled status is hidden per requirements
- */
-const COLUMNS: { status: BeadStatus; title: string }[] = [
-  { status: "open", title: "Open" },
-  { status: "in_progress", title: "In Progress" },
-  { status: "inreview", title: "In Review" },
-  { status: "closed", title: "Closed" },
-];
-
-/**
- * Issue type filter options
- */
-type IssueTypeFilter = "all" | "epics" | "tasks";
-
-/**
- * Main Kanban board component with 4 columns, search, filter, and keyboard navigation
- */
-export default function KanbanBoard() {
-  const searchParams = useSearchParams();
-  const router = useRouter();
-  const projectId = searchParams.get('id');
-
-  // Fetch project data from SQLite
-  const {
-    project,
-    isLoading: projectLoading,
-    error: projectError,
-    refetch: refetchProject,
-  } = useProject(projectId);
-
-  // Fetch beads from project path
-  const {
-    beads,
-    ticketNumbers,
-    isLoading: beadsLoading,
-    error: beadsError,
-    refresh: refreshBeads,
-  } = useBeads(project?.path ?? "");
-
-  // Use the bead filters hook with 300ms debounce
-  const {
-    filters,
-    setFilters,
-    filteredBeads,
-    clearFilters,
-    hasActiveFilters,
-    availableOwners,
-  } = useBeadFilters(beads, ticketNumbers, 300);
-
-  // Issue type filter state (epics vs tasks)
-  const [typeFilter, setTypeFilter] = useState<IssueTypeFilter>("all");
-
-  /**
-   * Toggle a status in the filter
-   */
-  const toggleStatus = useCallback((status: BeadStatus) => {
-    const newStatuses = filters.statuses.includes(status)
-      ? filters.statuses.filter(s => s !== status)
-      : [...filters.statuses, status];
-    setFilters({ statuses: newStatuses });
-  }, [filters.statuses, setFilters]);
-
-  /**
-   * Toggle an owner in the filter
-   */
-  const toggleOwner = useCallback((owner: string) => {
-    const newOwners = filters.owners.includes(owner)
-      ? filters.owners.filter(o => o !== owner)
-      : [...filters.owners, owner];
-    setFilters({ owners: newOwners });
-  }, [filters.owners, setFilters]);
-
-  // Fetch branch statuses for all beads
-  const beadIds = useMemo(() => beads.map((b) => b.id), [beads]);
-  const { statuses: branchStatuses } = useBranchStatuses(
-    project?.path ?? "",
-    beadIds
-  );
-
-  /**
-   * Filter to only top-level beads (no parent_id)
-   * Then apply issue type filter (epics vs tasks)
-   * Child tasks should not appear in columns - they appear inside epic cards
-   */
-  const topLevelBeads = useMemo(() => {
-    const topLevel = filteredBeads.filter(b => !b.parent_id);
-
-    // Apply issue type filter
-    if (typeFilter === "all") return topLevel;
-    if (typeFilter === "epics") return topLevel.filter(b => b.issue_type === "epic");
-    if (typeFilter === "tasks") return topLevel.filter(b => b.issue_type !== "epic");
-
-    return topLevel;
-  }, [filteredBeads, typeFilter]);
-
-  /**
-   * Group top-level beads by status for columns
-   */
-  const filteredBeadsByStatus = useMemo(() => {
-    const grouped: Record<BeadStatus, Bead[]> = {
-      open: [],
-      in_progress: [],
-      inreview: [],
-      closed: [],
-    };
-    topLevelBeads.forEach((bead) => {
-      grouped[bead.status].push(bead);
-    });
-    return grouped;
-  }, [topLevelBeads]);
-
-  // Detail sheet state
-  const [detailBeadId, setDetailBeadId] = useState<string | null>(null);
-  const [isDetailOpen, setIsDetailOpen] = useState(false);
-
-  // Get the actual bead from the current beads array to ensure fresh data
-  const detailBead = useMemo(() => {
-    if (!detailBeadId) return null;
-    return beads.find((b) => b.id === detailBeadId) || null;
-  }, [detailBeadId, beads]);
-
-  // Ref for search input (keyboard navigation)
-  const searchInputRef = useRef<HTMLInputElement>(null);
-
-  // Keyboard navigation (use top-level beads for navigation)
-  const { selectedId } = useKeyboardNavigation({
-    beads: topLevelBeads,
-    beadsByStatus: filteredBeadsByStatus,
-    selectedId: null,
-    onSelect: () => {
-      // Just highlight, don't open detail
-    },
-    onOpen: (bead) => {
-      setDetailBeadId(bead.id);
-      setIsDetailOpen(true);
-    },
-    onClose: () => {
-      setIsDetailOpen(false);
-    },
-    searchInputRef,
-    isDetailOpen,
-  });
-
-  // Redirect if no project ID
-  useEffect(() => {
-    if (!projectId) {
-      router.replace("/");
-    }
-  }, [projectId, router]);
-
-  /**
-   * Handle bead selection - opens detail panel
-   * Works for both epics and standalone tasks
-   */
-  const handleSelectBead = (bead: Bead) => {
-    setDetailBeadId(bead.id);
-    setIsDetailOpen(true);
-  };
-
-  /**
-   * Handle child task click from within an epic
-   */
-  const handleChildClick = (child: Bead) => {
-    setDetailBeadId(child.id);
-    setIsDetailOpen(true);
-  };
-
-  /**
-   * Handle navigation to a dependency from DependencyBadge
-   */
-  const handleNavigateToDependency = (beadId: string) => {
-    setDetailBeadId(beadId);
-    setIsDetailOpen(true);
-  };
-
-  // Redirect state while no project ID
-  if (!projectId) {
-    return (
-      <div className="dark flex min-h-dvh items-center justify-center bg-[#0a0a0a]">
-        <p className="text-zinc-500">Redirecting…</p>
-      </div>
-    );
-  }
-
-  // Show loading state
-  if (projectLoading) {
-    return (
-      <div className="dark flex items-center justify-center min-h-dvh bg-[#0a0a0a]">
-        <div role="status" className="text-zinc-500">Loading project…</div>
-      </div>
-    );
-  }
-
-  // Show project error state
-  if (projectError) {
-    return (
-      <div className="dark flex flex-col items-center justify-center min-h-dvh bg-[#0a0a0a] gap-4">
-        <div role="alert" className="text-red-400">Error: {projectError.message}</div>
-        <Button variant="outline" asChild>
-          <Link href="/">Back to projects</Link>
-        </Button>
-      </div>
-    );
-  }
-
-  // Project not found
-  if (!project) {
-    return (
-      <div className="dark flex flex-col items-center justify-center min-h-dvh bg-[#0a0a0a] gap-4">
-        <div className="text-zinc-500">Project not found</div>
-        <Button variant="outline" asChild>
-          <Link href="/">Back to projects</Link>
-        </Button>
-      </div>
-    );
-  }
-
-  return (
-    <div className="dark min-h-dvh bg-[#0a0a0a] flex flex-col">
-      {/* Header */}
-      <header className="sticky top-0 z-30 flex items-center justify-center border-b border-zinc-800 bg-[#0a0a0a]/80 backdrop-blur-sm px-4 py-3">
-        {/* Left: Back button - absolute positioned */}
-        <div className="absolute left-4">
-          <Button variant="ghost" size="icon" asChild>
-            <Link href="/">
-              <ArrowLeft className="h-4 w-4" />
-              <span className="sr-only">Back to projects</span>
-            </Link>
-          </Button>
-        </div>
-
-        {/* Center: Project name */}
-        <EditableProjectName
-          projectId={project.id}
-          initialName={project.name}
-          onNameUpdated={refetchProject}
-        />
-      </header>
-
-      {/* Quick Filter Bar */}
-      <div className="px-4 py-2 border-b border-zinc-800">
-        <QuickFilterBar
-          // Search
-          search={filters.search}
-          onSearchChange={(value) => setFilters({ search: value })}
-          searchInputRef={searchInputRef}
-          // Type filter
-          typeFilter={typeFilter}
-          onTypeFilterChange={setTypeFilter}
-          // Today
-          todayOnly={filters.todayOnly}
-          onTodayOnlyChange={(value) => setFilters({ todayOnly: value })}
-          // Sort
-          sortField={filters.sortField}
-          sortDirection={filters.sortDirection}
-          onSortChange={(field, direction) => setFilters({ sortField: field, sortDirection: direction })}
-          // Status/Owner filters
-          statuses={filters.statuses}
-          onStatusToggle={toggleStatus}
-          owners={filters.owners}
-          onOwnerToggle={toggleOwner}
-          availableOwners={availableOwners}
-          onClearFilters={clearFilters}
-          hasActiveFilters={hasActiveFilters}
-        />
-      </div>
-
-      {/* Kanban Columns */}
-      <main className="flex-1 overflow-hidden p-4">
-        {beadsLoading ? (
-          <div className="flex items-center justify-center h-full">
-            <div role="status" className="text-zinc-500">Loading beads…</div>
-          </div>
-        ) : beadsError ? (
-          <div className="flex items-center justify-center h-full">
-            <div role="alert" className="text-red-400">Error loading beads: {beadsError.message}</div>
-          </div>
-        ) : (
-          <div className="grid grid-cols-4 gap-4 h-full">
-            {COLUMNS.map(({ status, title }) => (
-              <KanbanColumn
-                key={status}
-                status={status}
-                title={title}
-                beads={filteredBeadsByStatus[status] || []}
-                allBeads={beads}
-                selectedBeadId={selectedId}
-                ticketNumbers={ticketNumbers}
-                branchStatuses={branchStatuses}
-                onSelectBead={handleSelectBead}
-                onChildClick={handleChildClick}
-                onNavigateToDependency={handleNavigateToDependency}
-                projectPath={project?.path}
-              />
-            ))}
-          </div>
-        )}
-      </main>
-
-      {/* Bead Detail Sheet */}
-      {detailBead && (
-        <BeadDetail
-          bead={detailBead}
-          ticketNumber={ticketNumbers.get(detailBead.id)}
-          open={isDetailOpen}
-          onOpenChange={(open) => {
-            setIsDetailOpen(open);
-            if (!open) {
-              setDetailBeadId(null);
-            }
-          }}
-          projectPath={project?.path ?? ""}
-          allBeads={beads}
-          onChildClick={handleChildClick}
-        >
-          <CommentList
-            comments={detailBead.comments}
-            beadId={detailBead.id}
-            projectPath={project?.path ?? ""}
-            onCommentAdded={refreshBeads}
-          />
-          <ActivityTimeline
-            bead={detailBead}
-            comments={detailBead.comments}
-            childBeads={(detailBead.children || [])
-              .map(id => beads.find(b => b.id === id))
-              .filter((b): b is Bead => !!b)}
-          />
-        </BeadDetail>
-      )}
-    </div>
-  );
-}

package/src/app/project/page.tsx

@@ -1,18 +0,0 @@
-import { Suspense } from 'react';
-import KanbanBoard from './kanban-board';
-
-function LoadingFallback() {
-  return (
-    <div className="flex items-center justify-center h-screen">
-      <div className="text-muted-foreground">Loading...</div>
-    </div>
-  );
-}
-
-export default function ProjectPage() {
-  return (
-    <Suspense fallback={<LoadingFallback />}>
-      <KanbanBoard />
-    </Suspense>
-  );
-}

package/src/app/settings/page.tsx

@@ -1,224 +0,0 @@
-"use client";
-
-import { useState, useEffect } from "react";
-import Link from "next/link";
-import { getTags, createTag, deleteTag, type Tag } from "@/lib/db";
-import { ColorPicker } from "@/components/color-picker";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-
-export default function SettingsPage() {
-  const [tags, setTags] = useState<Tag[]>([]);
-  const [isAddingTag, setIsAddingTag] = useState(false);
-  const [newTagName, setNewTagName] = useState("");
-  const [newTagColor, setNewTagColor] = useState("#3b82f6");
-  const [isLoading, setIsLoading] = useState(true);
-
-  useEffect(() => {
-    async function loadTags() {
-      try {
-        const loadedTags = await getTags();
-        setTags(loadedTags);
-      } catch (error) {
-        console.error("Failed to load tags:", error);
-      }
-      setIsLoading(false);
-    }
-    loadTags();
-  }, []);
-
-  const handleCreateTag = async () => {
-    if (!newTagName.trim()) return;
-
-    try {
-      const tag = await createTag({ name: newTagName.trim(), color: newTagColor });
-      setTags((prev) => [...prev, tag]);
-      setNewTagName("");
-      setNewTagColor("#3b82f6");
-      setIsAddingTag(false);
-    } catch (error) {
-      console.error("Failed to create tag:", error);
-    }
-  };
-
-  const handleDeleteTag = async (tagId: string) => {
-    try {
-      await deleteTag(tagId);
-      setTags((prev) => prev.filter((t) => t.id !== tagId));
-    } catch (error) {
-      console.error("Failed to delete tag:", error);
-    }
-  };
-
-  return (
-    <div className="dark min-h-dvh bg-[#0a0a0a]">
-      {/* Header */}
-      <header className="sticky top-0 z-30 border-b border-zinc-800 bg-[#0a0a0a]/80 backdrop-blur-sm px-6 py-4">
-        <div className="flex items-center gap-4">
-          <Link
-            href="/"
-            aria-label="Go back to home"
-            className="rounded-md p-2 text-zinc-400 hover:bg-zinc-800/50 hover:text-zinc-100"
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="20"
-              height="20"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              aria-hidden="true"
-            >
-              <path d="m12 19-7-7 7-7" />
-              <path d="M19 12H5" />
-            </svg>
-          </Link>
-          <h1 className="text-xl font-semibold text-white">Settings</h1>
-        </div>
-      </header>
-
-      {/* Settings Content */}
-      <main className="mx-auto max-w-2xl p-6">
-        {/* Tags Section */}
-        <section className="mb-8">
-          <h2 className="mb-4 text-lg font-medium text-zinc-100">Tags</h2>
-          <div className="rounded-lg border border-zinc-800 bg-zinc-900/50 p-4">
-            <p className="text-sm text-zinc-400">
-              Manage your project tags here. Tags help organize and categorize your projects.
-            </p>
-
-            {/* Tags List */}
-            <div className="mt-4 space-y-2">
-              {isLoading ? (
-                <p className="text-sm text-zinc-400">Loading tags…</p>
-              ) : tags.length === 0 && !isAddingTag ? (
-                <p className="text-sm text-zinc-400">No tags yet. Create one to get started.</p>
-              ) : (
-                tags.map((tag) => (
-                  <div
-                    key={tag.id}
-                    className="flex items-center justify-between rounded-md border border-zinc-800 bg-zinc-800/50 px-3 py-2"
-                  >
-                    <div className="flex items-center gap-2">
-                      <span
-                        className="size-4 rounded-full"
-                        style={{ backgroundColor: tag.color }}
-                        aria-hidden="true"
-                      />
-                      <span className="text-sm font-medium text-zinc-200">{tag.name}</span>
-                    </div>
-                    <button
-                      onClick={() => handleDeleteTag(tag.id)}
-                      className="rounded p-1 text-zinc-500 hover:bg-zinc-700 hover:text-zinc-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-400 focus-visible:ring-offset-2 focus-visible:ring-offset-[#0a0a0a]"
-                      title="Delete tag"
-                      aria-label={`Delete tag ${tag.name}`}
-                    >
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        width="16"
-                        height="16"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        strokeWidth="2"
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                      >
-                        <path d="M3 6h18" />
-                        <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" />
-                        <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
-                        <line x1="10" x2="10" y1="11" y2="17" />
-                        <line x1="14" x2="14" y1="11" y2="17" />
-                      </svg>
-                    </button>
-                  </div>
-                ))
-              )}
-
-              {/* Add Tag Form */}
-              {isAddingTag && (
-                <div className="mt-3 space-y-3 rounded-md border border-zinc-800 bg-zinc-900/70 p-3">
-                  <div className="flex items-center gap-2">
-                    <ColorPicker value={newTagColor} onChange={setNewTagColor} />
-                    <Input
-                      value={newTagName}
-                      onChange={(e) => setNewTagName(e.target.value)}
-                      placeholder="Tag name…"
-                      aria-label="Tag name"
-                      className="flex-1 border-zinc-700 bg-zinc-800 text-zinc-100 placeholder:text-zinc-500"
-                      autoFocus
-                      onKeyDown={(e) => {
-                        if (e.key === "Enter") {
-                          handleCreateTag();
-                        } else if (e.key === "Escape") {
-                          setIsAddingTag(false);
-                          setNewTagName("");
-                          setNewTagColor("#3b82f6");
-                        }
-                      }}
-                    />
-                  </div>
-                  <div className="flex justify-end gap-2">
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      className="border-zinc-700 bg-transparent text-zinc-400 hover:bg-zinc-800 hover:text-zinc-100"
-                      onClick={() => {
-                        setIsAddingTag(false);
-                        setNewTagName("");
-                        setNewTagColor("#3b82f6");
-                      }}
-                    >
-                      Cancel
-                    </Button>
-                    <Button
-                      size="sm"
-                      className="bg-zinc-100 text-zinc-900 hover:bg-white"
-                      onClick={handleCreateTag}
-                      disabled={!newTagName.trim()}
-                    >
-                      Create Tag
-                    </Button>
-                  </div>
-                </div>
-              )}
-            </div>
-
-            {/* Add Tag Button */}
-            {!isAddingTag && (
-              <div className="mt-4">
-                <button
-                  onClick={() => setIsAddingTag(true)}
-                  className="rounded-md bg-zinc-100 px-3 py-1.5 text-sm text-zinc-900 hover:bg-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-400 focus-visible:ring-offset-2 focus-visible:ring-offset-[#0a0a0a]"
-                >
-                  Add Tag
-                </button>
-              </div>
-            )}
-          </div>
-        </section>
-
-        {/* Data Section */}
-        <section className="mb-8">
-          <h2 className="mb-4 text-lg font-medium text-zinc-100">Data</h2>
-          <div className="rounded-lg border border-zinc-800 bg-zinc-900/50 p-4">
-            <div className="flex items-center justify-between">
-              <div>
-                <p className="font-medium text-red-400">Clear Local Database</p>
-                <p className="text-sm text-zinc-400">
-                  Remove all projects and tags from local storage
-                </p>
-              </div>
-              <button className="rounded-md border border-red-800/50 bg-red-900/30 px-3 py-1.5 text-sm text-red-400 hover:bg-red-900/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-400 focus-visible:ring-offset-2 focus-visible:ring-offset-[#0a0a0a]">
-                Clear Data
-              </button>
-            </div>
-          </div>
-        </section>
-      </main>
-    </div>
-  );
-}

package/src/components/Beams.css

@@ -1,5 +0,0 @@
-.beams-container {
-  position: relative;
-  width: 100%;
-  height: 100%;
-}