beads-kanban-ui 0.1.0 → 0.1.1

package/src/components/project-card.tsx

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

@@ -1,279 +0,0 @@
-'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 };