beads-kanban-ui 0.1.0 → 0.1.1

package/src/app/page.tsx

@@ -1,348 +0,0 @@
-"use client";
-
-import { useMemo, useState } from "react";
-import Link from "next/link";
-import { Plus, ChevronDown, FolderPlus, FolderSearch, Github, Settings, Search, X } from "lucide-react";
-import { ProjectCard } from "@/components/project-card";
-import { AddProjectDialog } from "@/components/add-project-dialog";
-import { ScanDirectoryDialog } from "@/components/scan-directory-dialog";
-import { useProjects } from "@/hooks/use-projects";
-import { useToast } from "@/hooks/use-toast";
-import { Skeleton } from "@/components/ui/skeleton";
-import { Button, ButtonArrow } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Badge } from "@/components/ui/badge";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-
-export default function ProjectsPage() {
-  const [isAddDialogOpen, setIsAddDialogOpen] = useState(false);
-  const [isScanDialogOpen, setIsScanDialogOpen] = useState(false);
-  const [searchQuery, setSearchQuery] = useState("");
-  const [selectedTagIds, setSelectedTagIds] = useState<string[]>([]);
-  const { projects, isLoading, error, addProject, updateProjectTags } = useProjects();
-  const { toast } = useToast();
-
-  // Get all unique tags across projects
-  const allTags = useMemo(() => {
-    const tagMap = new Map<string, { id: string; name: string; color: string }>();
-    projects.forEach((project) => {
-      project.tags.forEach((tag) => {
-        if (!tagMap.has(tag.id)) {
-          tagMap.set(tag.id, tag);
-        }
-      });
-    });
-    return Array.from(tagMap.values()).sort((a, b) => a.name.localeCompare(b.name));
-  }, [projects]);
-
-  // Filter projects by search query and selected tags (AND logic)
-  const filteredProjects = useMemo(() => {
-    return projects.filter((project) => {
-      // Search filter - match name or path
-      const searchLower = searchQuery.toLowerCase().trim();
-      const matchesSearch = searchLower === "" ||
-        project.name.toLowerCase().includes(searchLower) ||
-        project.path.toLowerCase().includes(searchLower);
-
-      // Tag filter - AND logic: project must have ALL selected tags
-      const matchesTags = selectedTagIds.length === 0 ||
-        selectedTagIds.every((tagId) =>
-          project.tags.some((tag) => tag.id === tagId)
-        );
-
-      return matchesSearch && matchesTags;
-    });
-  }, [projects, searchQuery, selectedTagIds]);
-
-  const toggleTag = (tagId: string) => {
-    setSelectedTagIds((prev) =>
-      prev.includes(tagId)
-        ? prev.filter((id) => id !== tagId)
-        : [...prev, tagId]
-    );
-  };
-
-  const clearFilters = () => {
-    setSearchQuery("");
-    setSelectedTagIds([]);
-  };
-
-  const hasActiveFilters = searchQuery.trim() !== "" || selectedTagIds.length > 0;
-
-  const handleAddProject = async (input: { name: string; path: string }) => {
-    // Check for duplicate
-    const isDuplicate = projects.some(p => p.path === input.path);
-    if (isDuplicate) {
-      toast({
-        title: "Project already exists",
-        description: "This project is already in your dashboard.",
-        variant: "destructive",
-      });
-      throw new Error("Project already exists"); // Let the dialog know it failed
-    }
-    await addProject(input);
-  };
-
-  const handleAddMultipleProjects = async (projectsToAdd: { name: string; path: string }[]) => {
-    // Filter out projects that already exist
-    const existingPaths = new Set(projects.map(p => p.path));
-    const newProjects = projectsToAdd.filter(p => !existingPaths.has(p.path));
-    const duplicateCount = projectsToAdd.length - newProjects.length;
-
-    // If all are duplicates, show error
-    if (newProjects.length === 0) {
-      toast({
-        title: "All projects already exist",
-        description: `${duplicateCount === 1 ? "This project is" : "All " + duplicateCount + " projects are"} already in your dashboard.`,
-        variant: "destructive",
-      });
-      throw new Error("All projects already exist");
-    }
-
-    // Add new projects
-    for (const project of newProjects) {
-      await addProject(project);
-    }
-
-    // If some were duplicates, notify the user
-    if (duplicateCount > 0) {
-      toast({
-        title: "Some projects skipped",
-        description: `${duplicateCount} duplicate project${duplicateCount > 1 ? "s were" : " was"} skipped.`,
-      });
-    }
-  };
-
-  return (
-    <div className="dark flex min-h-dvh flex-col bg-[#0a0a0a]">
-      {/* Navigation Bar */}
-      <nav className="sticky top-0 z-30 border-b border-zinc-800 bg-[#0a0a0a]/80 backdrop-blur-sm">
-        <div className="mx-auto flex max-w-[1200px] items-center justify-center gap-4 px-6 py-2">
-          <a
-            href="https://github.com/AvivK5498/Beads-Kanban-UI"
-            target="_blank"
-            rel="noopener noreferrer"
-            aria-label="GitHub repository"
-            className="rounded-md p-2 text-zinc-400 transition-colors duration-150 hover:text-zinc-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-400 focus-visible:ring-offset-2 focus-visible:ring-offset-[#0a0a0a]"
-          >
-            <Github className="h-5 w-5" aria-hidden="true" />
-          </a>
-          <Link
-            href="/settings"
-            aria-label="Settings"
-            className="rounded-md p-2 text-zinc-400 transition-colors duration-150 hover:text-zinc-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-400 focus-visible:ring-offset-2 focus-visible:ring-offset-[#0a0a0a]"
-          >
-            <Settings className="h-5 w-5" aria-hidden="true" />
-          </Link>
-        </div>
-      </nav>
-
-      {/* Hero Section - pushed down with padding */}
-      <main className="flex flex-col items-center px-6 pt-32">
-        {/* Centered Heading with Space Grotesk */}
-        <h1 className="mb-12 text-center text-balance font-heading text-4xl font-bold tracking-tight text-white sm:text-5xl">
-          Manage Your Beads Projects
-        </h1>
-
-        <div className="w-full max-w-[1200px]">
-          {/* Add Project Dropdown */}
-          <div className="mb-6 flex justify-end">
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button variant="mono" size="md">
-                  <Plus aria-hidden="true" />
-                  Add Project
-                  <ButtonArrow icon={ChevronDown} />
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="end">
-                <DropdownMenuItem onSelect={() => setIsAddDialogOpen(true)}>
-                  <FolderPlus aria-hidden="true" />
-                  Add Project
-                </DropdownMenuItem>
-                <DropdownMenuItem onSelect={() => setIsScanDialogOpen(true)}>
-                  <FolderSearch aria-hidden="true" />
-                  Scan Directory
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </div>
-
-          {/* Search and Filter Bar */}
-          {projects.length > 0 && (
-            <div className="mb-6 space-y-3">
-              {/* Search Input */}
-              <div className="relative">
-                <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-zinc-500" aria-hidden="true" />
-                <Input
-                  type="search"
-                  placeholder="Search projects..."
-                  value={searchQuery}
-                  onChange={(e) => setSearchQuery(e.target.value)}
-                  className="pl-10 bg-zinc-900/50 border-zinc-700"
-                  aria-label="Search projects"
-                />
-              </div>
-
-              {/* Tag Filter Chips */}
-              {allTags.length > 0 && (
-                <div className="flex flex-wrap items-center gap-2">
-                  <span className="text-xs text-zinc-500">Filter by tag:</span>
-                  {allTags.map((tag) => {
-                    const isSelected = selectedTagIds.includes(tag.id);
-                    return (
-                      <button
-                        key={tag.id}
-                        type="button"
-                        onClick={() => toggleTag(tag.id)}
-                        className="transition-opacity"
-                        aria-pressed={isSelected}
-                        aria-label={`Filter by ${tag.name}`}
-                      >
-                        <Badge
-                          variant={isSelected ? "primary" : "outline"}
-                          size="sm"
-                          style={
-                            isSelected
-                              ? {
-                                  backgroundColor: tag.color,
-                                  color: "#fff",
-                                  borderColor: tag.color,
-                                }
-                              : {
-                                  backgroundColor: `${tag.color}10`,
-                                  color: tag.color,
-                                  borderColor: `${tag.color}50`,
-                                }
-                          }
-                        >
-                          {tag.name}
-                        </Badge>
-                      </button>
-                    );
-                  })}
-                  {hasActiveFilters && (
-                    <button
-                      type="button"
-                      onClick={clearFilters}
-                      className="ml-2 flex items-center gap-1 text-xs text-zinc-500 hover:text-zinc-300 transition-colors"
-                      aria-label="Clear all filters"
-                    >
-                      <X className="h-3 w-3" aria-hidden="true" />
-                      Clear
-                    </button>
-                  )}
-                </div>
-              )}
-
-              {/* Results count when filtering */}
-              {hasActiveFilters && (
-                <p className="text-xs text-zinc-500">
-                  Showing {filteredProjects.length} of {projects.length} project{projects.length !== 1 ? "s" : ""}
-                </p>
-              )}
-            </div>
-          )}
-
-          {isLoading ? (
-            <div role="status" aria-label="Loading projects" className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-              {[1, 2, 3].map((i) => (
-                <div key={i} className="rounded-xl border border-zinc-800 bg-zinc-900/70 p-4">
-                  <div className="mb-3 flex gap-1.5">
-                    <Skeleton className="h-5 w-16" />
-                    <Skeleton className="h-5 w-12" />
-                  </div>
-                  <Skeleton className="h-5 w-40" />
-                  <Skeleton className="mt-2 h-4 w-48" />
-                  <Skeleton className="mt-4 h-4 w-32" />
-                  <Skeleton className="mt-2 h-3 w-28" />
-                </div>
-              ))}
-            </div>
-          ) : error ? (
-            <div role="alert" className="rounded-lg border border-red-800/50 bg-red-950/70 p-6 text-center">
-              <p className="text-red-400">Error loading projects: {error.message}</p>
-              <p className="mt-2 text-sm text-red-500">
-                Make sure the Tauri backend is running.
-              </p>
-            </div>
-          ) : filteredProjects.length === 0 ? (
-            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-              <div className="rounded-lg border border-dashed border-zinc-700 bg-zinc-900/70 p-6 text-center text-zinc-400">
-                {hasActiveFilters ? (
-                  <>
-                    <p>No matching projects</p>
-                    <p className="mt-1 text-sm text-zinc-500">Try adjusting your search or filters</p>
-                  </>
-                ) : (
-                  <>
-                    <p>No projects yet</p>
-                    <p className="mt-1 text-sm text-zinc-500">Click the Add Project button above to get started</p>
-                  </>
-                )}
-              </div>
-            </div>
-          ) : (
-            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-              {filteredProjects.map((project) => (
-                <ProjectCard
-                  key={project.id}
-                  id={project.id}
-                  name={project.name}
-                  path={project.path}
-                  tags={project.tags}
-                  beadCounts={project.beadCounts}
-                  onTagsChange={(tags) => updateProjectTags(project.id, tags)}
-                />
-              ))}
-            </div>
-          )}
-        </div>
-      </main>
-
-      {/* Footer */}
-      <footer className="mt-auto border-t border-zinc-800 py-6">
-        <div className="mx-auto flex max-w-[1200px] items-center justify-center gap-4 px-6">
-          <a
-            href="https://github.com/AvivK5498/beads-kanban-ui"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="flex items-center gap-2 text-sm text-zinc-500 transition-colors hover:text-zinc-300"
-          >
-            <Github className="h-4 w-4" aria-hidden="true" />
-            <span>Beads Kanban UI</span>
-          </a>
-          <span className="text-zinc-600" aria-hidden="true">·</span>
-          <a
-            href="https://github.com/steveyegge/beads"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="flex items-center gap-2 text-sm text-zinc-500 transition-colors hover:text-zinc-300"
-          >
-            <Github className="h-4 w-4" aria-hidden="true" />
-            <span>Beads CLI</span>
-          </a>
-        </div>
-      </footer>
-
-      {/* Add Project Dialog */}
-      <AddProjectDialog
-        open={isAddDialogOpen}
-        onOpenChange={setIsAddDialogOpen}
-        onAddProject={handleAddProject}
-      />
-
-      {/* Scan Directory Dialog */}
-      <ScanDirectoryDialog
-        open={isScanDialogOpen}
-        onOpenChange={setIsScanDialogOpen}
-        onAddProjects={handleAddMultipleProjects}
-      />
-    </div>
-  );
-}