@locusai/web 0.1.7 → 0.2.2

package/src/hooks/useDocs.ts

@@ -0,0 +1,279 @@
+import { type Doc } from "@locusai/shared";
+import { useEffect, useMemo, useState } from "react";
+import { toast } from "sonner";
+import {
+  useCreateDocGroupMutation,
+  useCreateDocMutation,
+  useDeleteDocMutation,
+  useDocGroupsQuery,
+  useDocsQuery,
+  useUpdateDocMutation,
+} from "./useDocsQuery";
+
+export const DOC_TEMPLATES = [
+  { id: "blank", label: "Blank Document", content: "# Untitled\n\n" },
+  {
+    id: "prd",
+    label: "Product Spec (PRD)",
+    category: "product",
+    content: `# Product Requirements Document
+
+## Overview
+Brief description of the feature/product.
+
+## Goals
+- Goal 1
+- Goal 2
+
+## User Stories
+As a [user type], I want [action] so that [benefit].
+
+## Requirements
+### Functional Requirements
+1. 
+
+### Non-Functional Requirements
+1. 
+
+## Success Metrics
+- 
+
+## Timeline
+| Phase | Description | Date |
+|-------|-------------|------|
+| | | |
+`,
+  },
+  {
+    id: "technical",
+    label: "Technical Design",
+    category: "engineering",
+    content: `# Technical Design Document
+
+## Summary
+Brief technical overview.
+
+## Architecture
+Describe the system architecture.
+
+## API Design
+\`\`\`typescript
+// API endpoints
+\`\`\`
+
+## Database Schema
+\`\`\`sql
+-- Schema changes
+\`\`\`
+
+## Implementation Plan
+1. 
+
+## Testing Strategy
+- Unit tests
+- Integration tests
+
+## Rollout Plan
+- 
+`,
+  },
+  {
+    id: "api",
+    label: "API Documentation",
+    category: "engineering",
+    content: `# API Documentation
+
+## Endpoints
+
+### GET /api/resource
+Description of the endpoint.
+
+**Parameters:**
+| Name | Type | Required | Description |
+|------|------|----------|-------------|
+| | | | |
+
+**Response:**
+\`\`\`json
+{
+  "data": []
+}
+\`\`\`
+
+### POST /api/resource
+`,
+  },
+];
+
+export function useDocs() {
+  // Queries
+  const { data: docs = [], isLoading: docsLoading } = useDocsQuery();
+  const { data: groups = [], isLoading: groupsLoading } = useDocGroupsQuery();
+
+  // Mutations
+  const createDocMutation = useCreateDocMutation();
+  const updateDocMutation = useUpdateDocMutation();
+  const deleteDocMutation = useDeleteDocMutation();
+  const createGroupMutation = useCreateDocGroupMutation();
+
+  // Local UI State
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [content, setContent] = useState("");
+  const [originalContent, setOriginalContent] = useState("");
+  const [isCreating, setIsCreating] = useState(false);
+  const [newTitle, setNewFileName] = useState("");
+  const [selectedTemplate, setSelectedTemplate] = useState("blank");
+  const [contentMode, setContentMode] = useState<"edit" | "preview">("edit");
+  const [searchQuery, setSearchQuery] = useState("");
+  const [activeCategory, setActiveCategory] = useState("all");
+  const [selectedGroupId, setSelectedGroupId] = useState<string | null>(null);
+
+  const selectedDoc = useMemo(
+    () => docs.find((d) => d.id === selectedId) || null,
+    [docs, selectedId]
+  );
+
+  const hasUnsavedChanges = content !== originalContent;
+
+  useEffect(() => {
+    if (selectedDoc) {
+      setContent(selectedDoc.content || "");
+      setOriginalContent(selectedDoc.content || "");
+    } else {
+      setContent("");
+      setOriginalContent("");
+    }
+  }, [selectedDoc]);
+
+  const handleSave = async () => {
+    if (!selectedId) return;
+    try {
+      await updateDocMutation.mutateAsync({
+        id: selectedId,
+        updates: { content },
+      });
+      toast.success("Document saved");
+    } catch {
+      toast.error("Failed to save document");
+    }
+  };
+
+  const handleCreateFile = async () => {
+    if (!newTitle.trim()) return;
+
+    const template = DOC_TEMPLATES.find((t) => t.id === selectedTemplate);
+    const initialContent = template?.content || `# ${newTitle}\n\n`;
+
+    try {
+      const newDoc = await createDocMutation.mutateAsync({
+        title: newTitle,
+        content: initialContent,
+        groupId: selectedGroupId || undefined,
+      });
+      setIsCreating(false);
+      setNewFileName("");
+      setSelectedTemplate("blank");
+      setSelectedId(newDoc.id);
+      toast.success("Document created");
+    } catch {
+      toast.error("Failed to create document");
+    }
+  };
+
+  const handleDelete = async (id: string) => {
+    if (!confirm("Are you sure you want to delete this document?")) return;
+    try {
+      await deleteDocMutation.mutateAsync(id);
+      if (selectedId === id) {
+        setSelectedId(null);
+      }
+      toast.success("Document deleted");
+    } catch {
+      toast.error("Failed to delete document");
+    }
+  };
+
+  const handleCreateGroup = async (name: string) => {
+    try {
+      await createGroupMutation.mutateAsync({ name });
+      toast.success("Group created");
+    } catch {
+      toast.error("Failed to create group");
+    }
+  };
+
+  const filteredDocs = useMemo(() => {
+    return docs.filter((doc) => {
+      const matchesSearch = doc.title
+        .toLowerCase()
+        .includes(searchQuery.toLowerCase());
+      return matchesSearch;
+    });
+  }, [docs, searchQuery]);
+
+  // Group docs by their groupId
+  const docsByGroup = useMemo(() => {
+    const grouped: Record<string, Doc[]> = {
+      ungrouped: [],
+    };
+
+    groups.forEach((g) => {
+      grouped[g.id] = [];
+    });
+
+    filteredDocs.forEach((doc) => {
+      if (doc.groupId && grouped[doc.groupId]) {
+        grouped[doc.groupId].push(doc);
+      } else {
+        grouped.ungrouped.push(doc);
+      }
+    });
+
+    return grouped;
+  }, [filteredDocs, groups]);
+
+  const handleGroupChange = async (docId: string, groupId: string | null) => {
+    try {
+      await updateDocMutation.mutateAsync({
+        id: docId,
+        updates: { groupId },
+      });
+      toast.success("Document moved");
+    } catch {
+      toast.error("Failed to move document");
+    }
+  };
+
+  return {
+    docs: filteredDocs,
+    groups,
+    docsByGroup,
+    selectedId,
+    setSelectedId,
+    selectedDoc,
+    content,
+    setContent,
+    originalContent,
+    hasUnsavedChanges,
+    isLoading: docsLoading || groupsLoading,
+    isCreating,
+    setIsCreating,
+    newFileName: newTitle,
+    setNewFileName,
+    selectedTemplate,
+    setSelectedTemplate,
+    contentMode,
+    setContentMode,
+    searchQuery,
+    setSearchQuery,
+    activeCategory,
+    setActiveCategory,
+    selectedGroupId,
+    setSelectedGroupId,
+    handleSave,
+    handleCreateFile,
+    handleDelete,
+    handleCreateGroup,
+    handleGroupChange,
+  };
+}

package/src/hooks/useDocsQuery.ts

@@ -0,0 +1,99 @@
+"use client";
+
+import {
+  type CreateDoc,
+  type CreateDocGroup,
+  type Doc,
+  type DocGroup,
+  type UpdateDoc,
+} from "@locusai/shared";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { locusClient } from "@/lib/api-client";
+import { queryKeys } from "@/lib/query-keys";
+import { useWorkspaceId } from "./useWorkspaceId";
+
+export function useDocsQuery() {
+  const workspaceId = useWorkspaceId();
+
+  return useQuery<Doc[]>({
+    queryKey: queryKeys.docs.list(workspaceId),
+    queryFn: () => locusClient.docs.list(workspaceId),
+    enabled: !!workspaceId,
+  });
+}
+
+export function useDocGroupsQuery() {
+  const workspaceId = useWorkspaceId();
+
+  return useQuery<DocGroup[]>({
+    queryKey: queryKeys.docGroups.list(workspaceId),
+    queryFn: () => locusClient.docs.listGroups(workspaceId),
+    enabled: !!workspaceId,
+  });
+}
+
+export function useCreateDocMutation() {
+  const workspaceId = useWorkspaceId();
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (data: CreateDoc) => locusClient.docs.create(workspaceId, data),
+    onSuccess: (newDoc) => {
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.docs.list(workspaceId),
+      });
+      queryClient.setQueryData(
+        queryKeys.docs.detail(newDoc.id, workspaceId),
+        newDoc
+      );
+    },
+  });
+}
+
+export function useUpdateDocMutation() {
+  const workspaceId = useWorkspaceId();
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ id, updates }: { id: string; updates: UpdateDoc }) =>
+      locusClient.docs.update(id, workspaceId, updates),
+    onSuccess: (updatedDoc) => {
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.docs.list(workspaceId),
+      });
+      queryClient.setQueryData(
+        queryKeys.docs.detail(updatedDoc.id, workspaceId),
+        updatedDoc
+      );
+    },
+  });
+}
+
+export function useDeleteDocMutation() {
+  const workspaceId = useWorkspaceId();
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (id: string) => locusClient.docs.delete(id, workspaceId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.docs.list(workspaceId),
+      });
+    },
+  });
+}
+
+export function useCreateDocGroupMutation() {
+  const workspaceId = useWorkspaceId();
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (data: CreateDocGroup) =>
+      locusClient.docs.createGroup(workspaceId, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.docGroups.list(workspaceId),
+      });
+    },
+  });
+}

package/src/hooks/useDocsSidebarState.ts

@@ -0,0 +1,104 @@
+"use client";
+
+import { useState } from "react";
+
+/**
+ * DocsSidebar state management hook.
+ *
+ * Encapsulates all local UI state for the docs sidebar:
+ * - Search and filtering
+ * - Creation mode for docs and groups
+ * - Group expansion
+ * - Selection and form inputs
+ *
+ * This significantly reduces prop drilling and makes the component
+ * easier to maintain and extend.
+ */
+export function useDocsSidebarState() {
+  // Search/Filter
+  const [searchQuery, setSearchQuery] = useState("");
+
+  // Creation/Editing
+  const [isCreating, setIsCreating] = useState(false);
+  const [isCreatingGroup, setIsCreatingGroup] = useState(false);
+  const [newFileName, setNewFileName] = useState("");
+  const [newGroupName, setNewGroupName] = useState("");
+
+  // Selection
+  const [selectedTemplate, setSelectedTemplate] = useState("readme");
+  const [selectedGroupId, setSelectedGroupId] = useState<string | null>(null);
+
+  // Expansion
+  const [expandedGroups, setExpandedGroups] = useState<Set<string>>(
+    new Set(["ungrouped"])
+  );
+
+  // Document selection
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+
+  // Group toggling
+  const toggleGroup = (groupId: string) => {
+    const next = new Set(expandedGroups);
+    if (next.has(groupId)) {
+      next.delete(groupId);
+    } else {
+      next.add(groupId);
+    }
+    setExpandedGroups(next);
+  };
+
+  // Reset group form
+  const resetGroupForm = () => {
+    setNewGroupName("");
+    setIsCreatingGroup(false);
+  };
+
+  // Reset file form
+  const resetFileForm = () => {
+    setNewFileName("");
+    setSelectedTemplate("readme");
+    setSelectedGroupId(null);
+    setIsCreating(false);
+  };
+
+  // Close all forms
+  const closeAllForms = () => {
+    resetGroupForm();
+    resetFileForm();
+  };
+
+  return {
+    // Search
+    searchQuery,
+    setSearchQuery,
+
+    // Creation/Editing
+    isCreating,
+    setIsCreating,
+    isCreatingGroup,
+    setIsCreatingGroup,
+    newFileName,
+    setNewFileName,
+    newGroupName,
+    setNewGroupName,
+
+    // Selection
+    selectedTemplate,
+    setSelectedTemplate,
+    selectedGroupId,
+    setSelectedGroupId,
+
+    // Expansion
+    expandedGroups,
+    toggleGroup,
+
+    // Selection
+    selectedId,
+    setSelectedId,
+
+    // Helpers
+    resetGroupForm,
+    resetFileForm,
+    closeAllForms,
+  };
+}

package/src/hooks/useFormState.ts

@@ -0,0 +1,40 @@
+"use client";
+
+import { $FixMe } from "@locusai/shared";
+import { useState } from "react";
+
+/**
+ * Generic form state management hook.
+ *
+ * Simplifies managing multiple form fields with a single state object
+ * and provides utilities for updating and resetting form state.
+ *
+ * @example
+ * const form = useFormState({ email: "", name: "" });
+ * <Input value={form.email} onChange={e => form.setField("email", e.target.value)} />
+ * <Button onClick={() => form.reset()}>Clear</Button>
+ */
+export function useFormState<T extends Record<string, $FixMe>>(
+  initialState: T
+) {
+  const [state, setState] = useState(initialState);
+
+  const setField = (name: keyof T, value: T[keyof T]) => {
+    setState((prev) => ({ ...prev, [name]: value }));
+  };
+
+  const reset = () => setState(initialState);
+
+  const getFieldProps = (name: keyof T) => ({
+    value: state[name],
+    onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>
+      setField(name, e.target.value as T[keyof T]),
+  });
+
+  return {
+    ...state,
+    setField,
+    reset,
+    getFieldProps,
+  };
+}

package/src/hooks/useGlobalKeydowns.ts

@@ -0,0 +1,52 @@
+"use client";
+
+import { useEffect } from "react";
+
+type UseGlobalKeydownsProps = {
+  onOpenCreateTask?: () => void;
+  onOpenCreateSprint?: () => void;
+  onCloseCreateTask?: () => void;
+};
+
+export const useGlobalKeydowns = ({
+  onOpenCreateTask = () => {
+    /* no-op */
+  },
+  onOpenCreateSprint = () => {
+    /* no-op */
+  },
+  onCloseCreateTask = () => {
+    /* no-op */
+  },
+}: UseGlobalKeydownsProps) => {
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      const isInput =
+        e.target instanceof HTMLInputElement ||
+        e.target instanceof HTMLTextAreaElement ||
+        e.target instanceof HTMLSelectElement ||
+        (e.target instanceof HTMLElement && e.target.isContentEditable);
+
+      if (isInput) {
+        return;
+      }
+
+      if (e.altKey && e.code === "KeyN") {
+        e.preventDefault();
+        onOpenCreateTask();
+      }
+
+      if (e.altKey && e.code === "KeyS") {
+        e.preventDefault();
+        onOpenCreateSprint();
+      }
+
+      if (e.key === "Escape") {
+        onCloseCreateTask();
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [onOpenCreateTask, onOpenCreateSprint, onCloseCreateTask]);
+};

package/src/hooks/useInviteForm.ts

@@ -0,0 +1,122 @@
+/**
+ * Hook for invitation acceptance form management
+ * Handles token verification and invitation acceptance
+ */
+"use client";
+
+import { type Invitation } from "@locusai/shared";
+import { useQueryClient } from "@tanstack/react-query";
+import { useCallback, useEffect, useState } from "react";
+import { toast } from "sonner";
+import { useAuth } from "@/context/AuthContext";
+import { locusClient } from "@/lib/api-client";
+import { queryKeys } from "@/lib/query-keys";
+
+interface UseInviteFormReturn {
+  invitation: Invitation | null;
+  userExists: boolean;
+  loading: boolean;
+  error: string | null;
+  name: string;
+  isSubmitting: boolean;
+  isLoggingInAsInvitedUser: boolean;
+  setName: (name: string) => void;
+  handleJoin: (e: React.FormEvent) => Promise<void>;
+}
+
+/**
+ * Custom hook for managing invitation acceptance
+ * Handles token verification and acceptance flow
+ */
+export function useInviteForm(token: string | null): UseInviteFormReturn {
+  const queryClient = useQueryClient();
+  const { user: currentUser, isAuthenticated } = useAuth();
+
+  const [invitation, setInvitation] = useState<Invitation | null>(null);
+  const [userExists, setUserExists] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [name, setName] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const verifyToken = useCallback(async () => {
+    if (!token) {
+      setError("No invitation token provided");
+      setLoading(false);
+      return;
+    }
+
+    try {
+      const response = await locusClient.invitations.verify(token);
+      setInvitation(response.invitation);
+      setUserExists(!!response.userExists);
+    } catch (err: unknown) {
+      const message =
+        err instanceof Error ? err.message : "Invalid or expired invitation";
+      setError(message);
+    } finally {
+      setLoading(false);
+    }
+  }, [token]);
+
+  useEffect(() => {
+    verifyToken();
+  }, [verifyToken]);
+
+  const isLoggingInAsInvitedUser =
+    isAuthenticated && currentUser?.email === invitation?.email;
+
+  const handleJoin = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!token || !invitation) return;
+
+    setIsSubmitting(true);
+    try {
+      await locusClient.invitations.accept({
+        token,
+        name: userExists ? undefined : name,
+      });
+
+      toast.success(
+        userExists
+          ? "Successfully joined organization!"
+          : "Account created and organization joined!"
+      );
+
+      // Invalidate caches after successful join
+      if (isAuthenticated && currentUser?.orgId) {
+        await queryClient.invalidateQueries({
+          queryKey: queryKeys.invitations.list(currentUser.orgId),
+        });
+        // Also invalidate members list to show the new member
+        await queryClient.invalidateQueries({
+          queryKey: queryKeys.organizations.members(currentUser.orgId),
+        });
+      }
+
+      return {
+        success: true,
+        isAuthenticated,
+        invitationEmail: invitation.email,
+      };
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : "Failed to join";
+      toast.error(message);
+      return { success: false };
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return {
+    invitation,
+    userExists,
+    loading,
+    error,
+    name,
+    isSubmitting,
+    isLoggingInAsInvitedUser,
+    setName,
+    handleJoin: handleJoin as (e: React.FormEvent) => Promise<void>,
+  };
+}