beads-kanban-ui 0.1.0

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

@@ -0,0 +1,356 @@
+"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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,224 @@
+"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

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