beads-kanban-ui 0.1.0

package/src/components/project-card.tsx

@@ -0,0 +1,191 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { StatusDonut } from "@/components/status-donut";
+import { RoiuiCard } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { TagPicker } from "@/components/tag-picker";
+import { useToast } from "@/hooks/use-toast";
+import * as api from "@/lib/api";
+import { ExternalLink, Code, FolderOpen, Loader2 } from "lucide-react";
+import type { Tag } from "@/lib/db";
+import type { BeadCounts } from "@/types";
+
+/**
+ * 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 ProjectCardProps {
+  id: string;
+  name: string;
+  path: string;
+  tags: Tag[];
+  beadCounts?: BeadCounts;
+  onTagsChange?: (tags: Tag[]) => void;
+}
+
+export function ProjectCard({
+  id,
+  name,
+  path,
+  tags,
+  beadCounts = { open: 0, in_progress: 0, inreview: 0, closed: 0 },
+  onTagsChange,
+}: ProjectCardProps) {
+  const router = useRouter();
+  const [isOpening, setIsOpening] = useState<string | null>(null);
+  const { toast } = useToast();
+
+  const handleOpenExternal = async (target: 'vscode' | 'cursor' | 'finder', e: React.MouseEvent) => {
+    e.stopPropagation();
+    setIsOpening(target);
+
+    try {
+      await api.fs.openExternal(path, target);
+      toast({
+        title: "Opening project",
+        description: target === 'finder'
+          ? "Opening in Finder..."
+          : `Opening in ${target === 'vscode' ? 'VS Code' : 'Cursor'}...`,
+      });
+    } catch (err) {
+      console.error("Error opening project:", err);
+      toast({
+        title: "Failed to open",
+        description: err instanceof Error ? err.message : "Could not open the project. Make sure the application is installed.",
+        variant: "destructive",
+      });
+    } finally {
+      setIsOpening(null);
+    }
+  };
+
+  const handleCardClick = () => {
+    router.push(`/project?id=${id}`);
+  };
+
+  return (
+    <RoiuiCard
+      className="cursor-pointer flex flex-col min-h-[155px]"
+      onClick={handleCardClick}
+      role="link"
+      tabIndex={0}
+      aria-label={`View ${formatProjectName(name)} project`}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          handleCardClick();
+        }
+      }}
+    >
+      {/* Top row: Donut left, Tags right */}
+      <div className="flex items-start justify-between">
+        <StatusDonut beadCounts={beadCounts} size={36} />
+        <div
+          className="flex flex-wrap items-center gap-1.5"
+          onClick={(e) => e.stopPropagation()}
+          onKeyDown={(e) => e.stopPropagation()}
+        >
+          {tags.map((tag) => (
+            <Badge
+              key={tag.id}
+              variant="secondary"
+              size="sm"
+              style={{
+                backgroundColor: `${tag.color}20`,
+                color: tag.color,
+                borderColor: tag.color,
+              }}
+            >
+              {tag.name}
+            </Badge>
+          ))}
+          {onTagsChange && (
+            <TagPicker
+              projectId={id}
+              projectTags={tags}
+              onTagsChange={onTagsChange}
+            />
+          )}
+        </div>
+      </div>
+
+      {/* Middle: Title (grows to fill space) */}
+      <div className="flex-1 flex items-center">
+        <h3 className="text-xl font-medium text-balance font-project-name">
+          {formatProjectName(name)}
+        </h3>
+      </div>
+
+      {/* Bottom row: Path left, Open In button right (aligned) */}
+      <div className="flex items-center justify-between gap-2">
+        <p className="text-sm text-zinc-500 truncate min-w-0 flex-1" title={path}>
+          {path}
+        </p>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              variant="ghost"
+              size="sm"
+              mode="icon"
+              className="shrink-0 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+              aria-label="Open in external application"
+              onClick={(e) => e.stopPropagation()}
+            >
+              <ExternalLink className="h-4 w-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem
+              onClick={(e) => handleOpenExternal('vscode', e)}
+              disabled={isOpening !== null}
+            >
+              {isOpening === 'vscode' ? (
+                <Loader2 className="h-4 w-4 animate-spin" aria-hidden="true" />
+              ) : (
+                <Code className="h-4 w-4" aria-hidden="true" />
+              )}
+              VS Code
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onClick={(e) => handleOpenExternal('cursor', e)}
+              disabled={isOpening !== null}
+            >
+              {isOpening === 'cursor' ? (
+                <Loader2 className="h-4 w-4 animate-spin" aria-hidden="true" />
+              ) : (
+                <Code className="h-4 w-4" aria-hidden="true" />
+              )}
+              Cursor
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onClick={(e) => handleOpenExternal('finder', e)}
+              disabled={isOpening !== null}
+            >
+              {isOpening === 'finder' ? (
+                <Loader2 className="h-4 w-4 animate-spin" aria-hidden="true" />
+              ) : (
+                <FolderOpen className="h-4 w-4" aria-hidden="true" />
+              )}
+              Finder
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </RoiuiCard>
+  );
+}

package/src/components/quick-filter-bar.tsx

@@ -0,0 +1,279 @@
+'use client';
+
+import * as React from 'react';
+import { Search, X, ArrowUpDown, SlidersHorizontal } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuCheckboxItem,
+  DropdownMenuItem,
+} from '@/components/ui/dropdown-menu';
+import { cn } from '@/lib/utils';
+import type { BeadStatus } from '@/types';
+
+type TypeFilter = 'all' | 'epics' | 'tasks';
+type SortField = 'ticket_number' | 'created_at';
+type SortDirection = 'asc' | 'desc';
+
+interface QuickFilterBarProps {
+  /** Issue type filter: all, epics, or tasks */
+  typeFilter: TypeFilter;
+  /** Callback when type filter changes */
+  onTypeFilterChange: (type: TypeFilter) => void;
+  /** Whether to show only today's active items */
+  todayOnly: boolean;
+  /** Callback when today's active toggle changes */
+  onTodayOnlyChange: (value: boolean) => void;
+  /** Field to sort by */
+  sortField: SortField;
+  /** Sort direction */
+  sortDirection: SortDirection;
+  /** Callback when sort changes */
+  onSortChange: (field: SortField, direction: SortDirection) => void;
+  /** Search query */
+  search: string;
+  /** Callback when search changes */
+  onSearchChange: (value: string) => void;
+  /** Ref for the search input (keyboard navigation) */
+  searchInputRef?: React.RefObject<HTMLInputElement>;
+  /** Active status filters */
+  statuses: BeadStatus[];
+  /** Callback when status filter toggles */
+  onStatusToggle: (status: BeadStatus) => void;
+  /** Active owner filters */
+  owners: string[];
+  /** Callback when owner filter toggles */
+  onOwnerToggle: (owner: string) => void;
+  /** List of available owners */
+  availableOwners: string[];
+  /** Callback to clear all filters */
+  onClearFilters: () => void;
+  /** Whether any filters are active */
+  hasActiveFilters: boolean;
+}
+
+const TYPE_OPTIONS: { value: TypeFilter; label: string }[] = [
+  { value: 'all', label: 'All' },
+  { value: 'epics', label: 'Epics' },
+  { value: 'tasks', label: 'Tasks' },
+];
+
+const SORT_OPTIONS: { value: string; label: string; field: SortField; direction: SortDirection }[] = [
+  { value: 'ticket_number_desc', label: 'Ticket # (Newest)', field: 'ticket_number', direction: 'desc' },
+  { value: 'ticket_number_asc', label: 'Ticket # (Oldest)', field: 'ticket_number', direction: 'asc' },
+  { value: 'created_at_desc', label: 'Updated (Newest)', field: 'created_at', direction: 'desc' },
+  { value: 'created_at_asc', label: 'Updated (Oldest)', field: 'created_at', direction: 'asc' },
+];
+
+const STATUS_OPTIONS: { value: BeadStatus; label: string }[] = [
+  { value: 'open', label: 'Open' },
+  { value: 'in_progress', label: 'In Progress' },
+  { value: 'inreview', label: 'In Review' },
+  { value: 'closed', label: 'Closed' },
+];
+
+/**
+ * QuickFilterBar provides quick access to common filter and sort operations
+ * for the kanban board. Displays below the header as a horizontal bar.
+ */
+export function QuickFilterBar({
+  typeFilter,
+  onTypeFilterChange,
+  todayOnly,
+  onTodayOnlyChange,
+  sortField,
+  sortDirection,
+  onSortChange,
+  search,
+  onSearchChange,
+  searchInputRef,
+  statuses,
+  onStatusToggle,
+  owners,
+  onOwnerToggle,
+  availableOwners,
+  onClearFilters,
+  hasActiveFilters,
+}: QuickFilterBarProps) {
+  const currentSortValue = `${sortField}_${sortDirection}`;
+
+  const handleSortOptionSelect = (value: string) => {
+    const option = SORT_OPTIONS.find((opt) => opt.value === value);
+    if (option) {
+      onSortChange(option.field, option.direction);
+    }
+  };
+
+  return (
+    <div
+      role="toolbar"
+      aria-label="Quick filters"
+      className="flex items-center gap-3 bg-zinc-900/50 border border-zinc-800 rounded-lg px-3 py-2"
+    >
+      {/* Search Input */}
+      <div className="relative">
+        <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-zinc-500" aria-hidden="true" />
+        <Input
+          ref={searchInputRef}
+          type="text"
+          aria-label="Search beads"
+          placeholder="Search… (/)"
+          value={search}
+          onChange={(e) => onSearchChange(e.target.value)}
+          className="pl-8 pr-8 w-[180px] h-8 bg-zinc-800/50 border-zinc-700 text-zinc-100 placeholder:text-zinc-500"
+        />
+        {search && (
+          <button
+            type="button"
+            onClick={() => onSearchChange('')}
+            className="absolute right-2 top-1/2 -translate-y-1/2 p-1.5 -m-1.5 text-zinc-500 hover:text-zinc-300"
+            aria-label="Clear search"
+          >
+            <X className="h-3.5 w-3.5" />
+          </button>
+        )}
+      </div>
+
+      {/* Type Filter - Segmented Control */}
+      <div
+        role="radiogroup"
+        aria-label="Filter by issue type"
+        className="flex items-center bg-zinc-800/50 rounded-md p-0.5"
+      >
+        {TYPE_OPTIONS.map((option) => (
+          <button
+            key={option.value}
+            type="button"
+            role="radio"
+            aria-checked={typeFilter === option.value}
+            onClick={() => onTypeFilterChange(option.value)}
+            className={cn(
+              'px-3 py-1.5 text-sm font-medium rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-900',
+              typeFilter === option.value
+                ? 'bg-zinc-700 text-zinc-100'
+                : 'bg-transparent text-zinc-300 hover:text-zinc-200'
+            )}
+          >
+            {option.label}
+          </button>
+        ))}
+      </div>
+
+      {/* Today's Active Toggle */}
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() => onTodayOnlyChange(!todayOnly)}
+        aria-pressed={todayOnly}
+        className={cn(
+          'h-8 transition-colors',
+          todayOnly
+            ? 'bg-purple-500/20 text-purple-400 border-purple-500/30 hover:bg-purple-500/30'
+            : 'border-zinc-700 text-zinc-400 hover:text-zinc-200 hover:border-zinc-600'
+        )}
+      >
+        Today
+      </Button>
+
+      {/* Spacer to push sort and filter to the right */}
+      <div className="flex-1" />
+
+      {/* Sort Icon Menu */}
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-8 px-2 text-zinc-400 hover:text-zinc-100"
+            aria-label="Sort options"
+          >
+            <ArrowUpDown className="h-4 w-4" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="bg-zinc-900 border-zinc-800">
+          <DropdownMenuLabel className="text-zinc-400">Sort by</DropdownMenuLabel>
+          <DropdownMenuSeparator className="bg-zinc-800" />
+          {SORT_OPTIONS.map((option) => (
+            <DropdownMenuCheckboxItem
+              key={option.value}
+              checked={currentSortValue === option.value}
+              onCheckedChange={() => handleSortOptionSelect(option.value)}
+              className="text-zinc-200 focus:bg-zinc-800 focus:text-zinc-100"
+            >
+              {option.label}
+            </DropdownMenuCheckboxItem>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      {/* Filter Icon Menu */}
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="ghost"
+            size="sm"
+            className={cn(
+              'h-8 px-2',
+              hasActiveFilters ? 'text-purple-400' : 'text-zinc-400 hover:text-zinc-100'
+            )}
+            aria-label="Filter options"
+          >
+            <SlidersHorizontal className="h-4 w-4" />
+            {hasActiveFilters && <span className="ml-1 text-xs" aria-hidden="true">•</span>}
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-56 bg-zinc-900 border-zinc-800">
+          <DropdownMenuLabel className="text-zinc-400">Status</DropdownMenuLabel>
+          <DropdownMenuSeparator className="bg-zinc-800" />
+          {STATUS_OPTIONS.map((option) => (
+            <DropdownMenuCheckboxItem
+              key={option.value}
+              checked={statuses.includes(option.value)}
+              onCheckedChange={() => onStatusToggle(option.value)}
+              className="text-zinc-200 focus:bg-zinc-800 focus:text-zinc-100"
+            >
+              {option.label}
+            </DropdownMenuCheckboxItem>
+          ))}
+
+          {availableOwners.length > 0 && (
+            <>
+              <DropdownMenuSeparator className="bg-zinc-800" />
+              <DropdownMenuLabel className="text-zinc-400">Owner</DropdownMenuLabel>
+              <DropdownMenuSeparator className="bg-zinc-800" />
+              {availableOwners.map((owner) => (
+                <DropdownMenuCheckboxItem
+                  key={owner}
+                  checked={owners.includes(owner)}
+                  onCheckedChange={() => onOwnerToggle(owner)}
+                  className="text-zinc-200 focus:bg-zinc-800 focus:text-zinc-100"
+                >
+                  {owner}
+                </DropdownMenuCheckboxItem>
+              ))}
+            </>
+          )}
+
+          {hasActiveFilters && (
+            <>
+              <DropdownMenuSeparator className="bg-zinc-800" />
+              <DropdownMenuItem
+                onClick={onClearFilters}
+                className="text-red-400 focus:bg-zinc-800 focus:text-red-400"
+              >
+                Clear filters
+              </DropdownMenuItem>
+            </>
+          )}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}
+
+export type { QuickFilterBarProps, TypeFilter, SortField, SortDirection };