beads-kanban-ui 0.1.0

package/src/hooks/use-projects.ts

@@ -0,0 +1,93 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import {
+  getProjectsWithTags,
+  createProject,
+  type CreateProjectInput,
+} from "@/lib/db";
+import { loadProjectBeads, groupBeadsByStatus } from "@/lib/beads-parser";
+import type { Project, Tag, BeadCounts } from "@/types";
+
+interface UseProjectsResult {
+  projects: Project[];
+  isLoading: boolean;
+  error: Error | null;
+  refetch: () => Promise<void>;
+  addProject: (input: CreateProjectInput) => Promise<Project>;
+  updateProjectTags: (projectId: string, tags: Tag[]) => void;
+}
+
+export function useProjects(): UseProjectsResult {
+  const [projects, setProjects] = useState<Project[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  const fetchProjects = useCallback(async () => {
+    try {
+      setIsLoading(true);
+      setError(null);
+      const data = await getProjectsWithTags();
+
+      // Fetch bead counts for all projects in parallel
+      const projectsWithCounts = await Promise.all(
+        data.map(async (project) => {
+          try {
+            const beads = await loadProjectBeads(project.path);
+            const grouped = groupBeadsByStatus(beads);
+            const beadCounts: BeadCounts = {
+              open: grouped.open.length,
+              in_progress: grouped.in_progress.length,
+              inreview: grouped.inreview.length,
+              closed: grouped.closed.length,
+            };
+            return { ...project, beadCounts };
+          } catch {
+            // If loading beads fails, return project with zero counts
+            return {
+              ...project,
+              beadCounts: { open: 0, in_progress: 0, inreview: 0, closed: 0 },
+            };
+          }
+        })
+      );
+
+      setProjects(projectsWithCounts);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error("Failed to fetch projects"));
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  const addProject = useCallback(
+    async (input: CreateProjectInput): Promise<Project> => {
+      const newProject = await createProject(input);
+      await fetchProjects();
+      return newProject;
+    },
+    [fetchProjects]
+  );
+
+  const updateProjectTags = useCallback((projectId: string, tags: Tag[]) => {
+    setProjects((prev) =>
+      prev.map((project) =>
+        project.id === projectId ? { ...project, tags } : project
+      )
+    );
+  }, []);
+
+  // Fetch projects on mount
+  useEffect(() => {
+    fetchProjects();
+  }, [fetchProjects]);
+
+  return {
+    projects,
+    isLoading,
+    error,
+    refetch: fetchProjects,
+    addProject,
+    updateProjectTags,
+  };
+}

package/src/hooks/use-toast.ts

@@ -0,0 +1,194 @@
+"use client"
+
+// Inspired by react-hot-toast library
+import * as React from "react"
+
+import type {
+  ToastActionElement,
+  ToastProps,
+} from "@/components/ui/toast"
+
+const TOAST_LIMIT = 1
+const TOAST_REMOVE_DELAY = 1000000
+
+type ToasterToast = ToastProps & {
+  id: string
+  title?: React.ReactNode
+  description?: React.ReactNode
+  action?: ToastActionElement
+}
+
+const actionTypes = {
+  ADD_TOAST: "ADD_TOAST",
+  UPDATE_TOAST: "UPDATE_TOAST",
+  DISMISS_TOAST: "DISMISS_TOAST",
+  REMOVE_TOAST: "REMOVE_TOAST",
+} as const
+
+let count = 0
+
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER
+  return count.toString()
+}
+
+type ActionType = typeof actionTypes
+
+type Action =
+  | {
+      type: ActionType["ADD_TOAST"]
+      toast: ToasterToast
+    }
+  | {
+      type: ActionType["UPDATE_TOAST"]
+      toast: Partial<ToasterToast>
+    }
+  | {
+      type: ActionType["DISMISS_TOAST"]
+      toastId?: ToasterToast["id"]
+    }
+  | {
+      type: ActionType["REMOVE_TOAST"]
+      toastId?: ToasterToast["id"]
+    }
+
+interface State {
+  toasts: ToasterToast[]
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
+
+const addToRemoveQueue = (toastId: string) => {
+  if (toastTimeouts.has(toastId)) {
+    return
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId)
+    dispatch({
+      type: "REMOVE_TOAST",
+      toastId: toastId,
+    })
+  }, TOAST_REMOVE_DELAY)
+
+  toastTimeouts.set(toastId, timeout)
+}
+
+export const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case "ADD_TOAST":
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      }
+
+    case "UPDATE_TOAST":
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === action.toast.id ? { ...t, ...action.toast } : t
+        ),
+      }
+
+    case "DISMISS_TOAST": {
+      const { toastId } = action
+
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if (toastId) {
+        addToRemoveQueue(toastId)
+      } else {
+        state.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id)
+        })
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false,
+              }
+            : t
+        ),
+      }
+    }
+    case "REMOVE_TOAST":
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        }
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      }
+  }
+}
+
+const listeners: Array<(state: State) => void> = []
+
+let memoryState: State = { toasts: [] }
+
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action)
+  listeners.forEach((listener) => {
+    listener(memoryState)
+  })
+}
+
+type Toast = Omit<ToasterToast, "id">
+
+function toast({ ...props }: Toast) {
+  const id = genId()
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: "UPDATE_TOAST",
+      toast: { ...props, id },
+    })
+  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
+
+  dispatch({
+    type: "ADD_TOAST",
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss()
+      },
+    },
+  })
+
+  return {
+    id: id,
+    dismiss,
+    update,
+  }
+}
+
+function useToast() {
+  const [state, setState] = React.useState<State>(memoryState)
+
+  React.useEffect(() => {
+    listeners.push(setState)
+    return () => {
+      const index = listeners.indexOf(setState)
+      if (index > -1) {
+        listeners.splice(index, 1)
+      }
+    }
+  }, [state])
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
+  }
+}
+
+export { useToast, toast }

package/src/hooks/useClickOutside.tsx

@@ -0,0 +1,26 @@
+import { RefObject, useEffect } from 'react';
+
+function useClickOutside<T extends HTMLElement>(
+  ref: RefObject<T | null>,
+  handler: (event: MouseEvent | TouchEvent) => void
+): void {
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent | TouchEvent) => {
+      if (!ref || !ref.current || ref.current.contains(event.target as Node)) {
+        return;
+      }
+
+      handler(event);
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    document.addEventListener('touchstart', handleClickOutside);
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener('touchstart', handleClickOutside);
+    };
+  }, [ref, handler]);
+}
+
+export default useClickOutside;

package/src/lib/api.ts

@@ -0,0 +1,186 @@
+/**
+ * Frontend API layer for beads-kanban-ui webapp
+ * Replaces Tauri invoke() calls with HTTP fetch to backend
+ */
+
+import type { Project, Tag, Bead } from '@/types';
+
+const API_BASE = process.env.NEXT_PUBLIC_BACKEND_URL || 'http://localhost:3008';
+
+/**
+ * Input for creating a new project
+ */
+export interface CreateProjectInput {
+  name: string;
+  path: string;
+}
+
+/**
+ * Input for creating a new tag
+ */
+export interface CreateTagInput {
+  name: string;
+  color: string;
+}
+
+/**
+ * File system entry from directory listing
+ */
+export interface FsEntry {
+  name: string;
+  path: string;
+  isDirectory: boolean;
+}
+
+/**
+ * Git branch status information
+ */
+export interface BranchStatus {
+  exists: boolean;
+  ahead: number;
+  behind: number;
+}
+
+/**
+ * BD CLI command result
+ */
+export interface BdCommandResult {
+  stdout: string;
+  stderr: string;
+  code: number;
+}
+
+/**
+ * File watcher event
+ */
+export interface WatchEvent {
+  path: string;
+  type: string;
+}
+
+/**
+ * Helper for fetch with error handling
+ */
+async function fetchApi<T>(path: string, options?: RequestInit): Promise<T> {
+  const res = await fetch(`${API_BASE}${path}`, {
+    ...options,
+    headers: {
+      'Content-Type': 'application/json',
+      ...options?.headers,
+    },
+  });
+  if (!res.ok) {
+    throw new Error(`API error: ${res.status} ${res.statusText}`);
+  }
+  return res.json();
+}
+
+/**
+ * Projects API
+ */
+export const projects = {
+  list: () => fetchApi<Project[]>('/api/projects'),
+
+  create: (data: CreateProjectInput) => fetchApi<Project>('/api/projects', {
+    method: 'POST',
+    body: JSON.stringify(data),
+  }),
+
+  update: (id: string, data: Partial<Project>) => fetchApi<Project>(`/api/projects/${id}`, {
+    method: 'PATCH',
+    body: JSON.stringify(data),
+  }),
+
+  delete: (id: string) => fetchApi<void>(`/api/projects/${id}`, { method: 'DELETE' }),
+};
+
+/**
+ * Tags API
+ */
+export const tags = {
+  list: () => fetchApi<Tag[]>('/api/tags'),
+
+  create: (data: CreateTagInput) => fetchApi<Tag>('/api/tags', {
+    method: 'POST',
+    body: JSON.stringify(data),
+  }),
+
+  delete: (id: string) => fetchApi<void>(`/api/tags/${id}`, { method: 'DELETE' }),
+
+  addToProject: (projectId: string, tagId: string) => fetchApi<void>('/api/project-tags', {
+    method: 'POST',
+    body: JSON.stringify({ projectId, tagId }),
+  }),
+
+  removeFromProject: (projectId: string, tagId: string) => fetchApi<void>(
+    `/api/project-tags/${projectId}/${tagId}`,
+    { method: 'DELETE' }
+  ),
+};
+
+/**
+ * Beads API
+ */
+export const beads = {
+  read: (path: string) => fetchApi<{ beads: Bead[] }>(
+    `/api/beads?path=${encodeURIComponent(path)}`
+  ),
+
+  addComment: (path: string, beadId: string, text: string, author: string) =>
+    fetchApi<Bead>('/api/beads/comment', {
+      method: 'POST',
+      body: JSON.stringify({ path, bead_id: beadId, text, author }),
+    }),
+};
+
+/**
+ * BD CLI API
+ */
+export const bd = {
+  command: (args: string[], cwd?: string) => fetchApi<BdCommandResult>('/api/bd/command', {
+    method: 'POST',
+    body: JSON.stringify({ args, cwd }),
+  }),
+};
+
+/**
+ * Git API
+ */
+export const git = {
+  branchStatus: (path: string, branch: string) => fetchApi<BranchStatus>(
+    `/api/git/branch-status?path=${encodeURIComponent(path)}&branch=${encodeURIComponent(branch)}`
+  ),
+};
+
+/**
+ * File System API
+ */
+export const fs = {
+  list: (path: string) => fetchApi<{ entries: FsEntry[] }>(
+    `/api/fs/list?path=${encodeURIComponent(path)}`
+  ),
+
+  exists: (path: string) => fetchApi<{ exists: boolean }>(
+    `/api/fs/exists?path=${encodeURIComponent(path)}`
+  ),
+
+  openExternal: (path: string, target: 'vscode' | 'cursor' | 'finder') =>
+    fetchApi<{ success: boolean }>('/api/fs/open-external', {
+      method: 'POST',
+      body: JSON.stringify({ path, target }),
+    }),
+};
+
+/**
+ * File Watcher (Server-Sent Events)
+ */
+export const watch = {
+  beads: (path: string, onEvent: (event: WatchEvent) => void) => {
+    const eventSource = new EventSource(
+      `${API_BASE}/api/watch/beads?path=${encodeURIComponent(path)}`
+    );
+    eventSource.onmessage = (e) => onEvent(JSON.parse(e.data));
+    eventSource.onerror = () => eventSource.close();
+    return () => eventSource.close();
+  },
+};