@locusai/web 0.1.7 → 0.2.2

package/src/hooks/backlog/useBacklogUI.ts

@@ -0,0 +1,74 @@
+/**
+ * Backlog UI State Hook
+ *
+ * Manages UI state for the backlog page (modals, selections, expanded sections).
+ */
+
+"use client";
+
+import { useRouter, useSearchParams } from "next/navigation";
+import { useEffect, useState } from "react";
+
+export interface BacklogUIState {
+  isTaskModalOpen: boolean;
+  isSprintModalOpen: boolean;
+  selectedTaskId: string | null;
+  expandedSections: Set<string>;
+}
+
+export interface BacklogUIActions {
+  setIsTaskModalOpen: (open: boolean) => void;
+  setIsSprintModalOpen: (open: boolean) => void;
+  setSelectedTaskId: (id: string | null) => void;
+  toggleSection: (section: string) => void;
+}
+
+/**
+ * Manage backlog UI state including modals and section expansion
+ */
+export function useBacklogUI(): BacklogUIState & BacklogUIActions {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const [isTaskModalOpen, setIsTaskModalOpen] = useState(false);
+  const [isSprintModalOpen, setIsSprintModalOpen] = useState(false);
+  const [selectedTaskId, setSelectedTaskId] = useState<string | null>(null);
+  const [expandedSections, setExpandedSections] = useState<Set<string>>(
+    new Set(["active", "planned"])
+  );
+
+  // Handle query parameters for new task/sprint
+  useEffect(() => {
+    const createTask = searchParams.get("createTask");
+    const createSprint = searchParams.get("createSprint");
+
+    if (createTask === "true") {
+      setIsTaskModalOpen(true);
+      router.replace("/backlog");
+    } else if (createSprint === "true") {
+      setIsSprintModalOpen(true);
+      router.replace("/backlog");
+    }
+  }, [searchParams, router]);
+
+  const toggleSection = (section: string) => {
+    const newExpanded = new Set(expandedSections);
+    if (newExpanded.has(section)) {
+      newExpanded.delete(section);
+    } else {
+      newExpanded.add(section);
+    }
+    setExpandedSections(newExpanded);
+  };
+
+  return {
+    isTaskModalOpen,
+    isSprintModalOpen,
+    selectedTaskId,
+    expandedSections,
+    setIsTaskModalOpen,
+    setIsSprintModalOpen,
+    setSelectedTaskId,
+    toggleSection,
+  };
+}

package/src/hooks/index.ts

@@ -0,0 +1,22 @@
+export * from "./backlog";
+export * from "./task-panel";
+export * from "./useAuthenticatedUser";
+export * from "./useAuthenticatedUserWithOrg";
+export * from "./useAuthLayoutLogic";
+export * from "./useBoard";
+export * from "./useDashboardLayout";
+export * from "./useDocs";
+export * from "./useDocsSidebarState";
+export * from "./useFormState";
+export * from "./useGlobalKeydowns";
+export * from "./useInviteForm";
+export * from "./useLoginForm";
+export * from "./useMutationWithToast";
+export * from "./useOrganizationQuery";
+export * from "./useRegisterForm";
+export * from "./useSprintsQuery";
+export * from "./useTaskDescription";
+export * from "./useTasksQuery";
+export * from "./useTeamManagement";
+export * from "./useWorkspaceCreateForm";
+export * from "./useWorkspaceId";

package/src/hooks/task-panel/index.ts

@@ -0,0 +1,13 @@
+/**
+ * Task Panel Hooks - Composite Export
+ *
+ * For backward compatibility, export all task panel hooks.
+ * Prefer using individual hooks for better tree-shaking and clarity.
+ */
+
+export * from "./useTaskActions";
+export * from "./useTaskComputedValues";
+export * from "./useTaskData";
+// Composite hook for components not yet refactored
+export { useTaskPanelComposite as useTaskPanel } from "./useTaskPanelComposite";
+export * from "./useTaskUIState";

package/src/hooks/task-panel/useTaskActions.ts

@@ -0,0 +1,200 @@
+/**
+ * Task Panel Actions Hook
+ *
+ * Manages task operations (save, delete, approve, reject, etc.).
+ */
+
+"use client";
+
+import { type AcceptanceItem, TaskStatus } from "@locusai/shared";
+import { notifications } from "@/services/notifications";
+
+export interface TaskActionHandlers {
+  handleTitleSave: (editTitle: string, currentTitle?: string) => Promise<void>;
+  handleDescSave: (editDesc: string, currentDesc?: string) => Promise<void>;
+  handleAddChecklistItem: (
+    newItem: string,
+    checklist: AcceptanceItem[]
+  ) => Promise<void>;
+  handleToggleChecklistItem: (
+    itemId: string,
+    checklist: AcceptanceItem[]
+  ) => Promise<void>;
+  handleRemoveChecklistItem: (
+    itemId: string,
+    checklist: AcceptanceItem[]
+  ) => Promise<void>;
+  handleLinkDoc: (docId: string, currentDocIds: string[]) => Promise<void>;
+  handleUnlinkDoc: (docId: string, currentDocIds: string[]) => Promise<void>;
+  handleReject: (reason: string, onSuccess?: () => void) => Promise<void>;
+  handleApprove: (onSuccess?: () => void) => Promise<void>;
+}
+
+interface UseTaskActionsProps {
+  onUpdateTask: (
+    updates: Partial<{
+      title?: string;
+      description?: string;
+      acceptanceChecklist?: AcceptanceItem[];
+      status?: TaskStatus;
+      docIds?: string[];
+    }>
+  ) => Promise<void>;
+  onAddComment?: (text: string) => Promise<void>;
+}
+
+/**
+ * Manage task operations
+ */
+export function useTaskActions({
+  onUpdateTask,
+  onAddComment,
+}: UseTaskActionsProps): TaskActionHandlers {
+  const handleTitleSave = async (editTitle: string, currentTitle?: string) => {
+    if (editTitle.trim() && editTitle !== currentTitle) {
+      try {
+        await onUpdateTask({ title: editTitle.trim() });
+      } catch (error) {
+        notifications.error(
+          error instanceof Error ? error.message : "Failed to update title"
+        );
+      }
+    }
+  };
+
+  const handleDescSave = async (editDesc: string, currentDesc?: string) => {
+    if (editDesc !== currentDesc) {
+      try {
+        await onUpdateTask({ description: editDesc });
+      } catch (error) {
+        notifications.error(
+          error instanceof Error
+            ? error.message
+            : "Failed to update description"
+        );
+      }
+    }
+  };
+
+  const handleAddChecklistItem = async (
+    newItem: string,
+    checklist: AcceptanceItem[]
+  ) => {
+    if (!newItem.trim()) return;
+    try {
+      const item: AcceptanceItem = {
+        id: crypto.randomUUID(),
+        text: newItem.trim(),
+        done: false,
+      };
+      await onUpdateTask({
+        acceptanceChecklist: [...checklist, item],
+      });
+    } catch (error) {
+      notifications.error(
+        error instanceof Error ? error.message : "Failed to add checklist item"
+      );
+    }
+  };
+
+  const handleToggleChecklistItem = async (
+    itemId: string,
+    checklist: AcceptanceItem[]
+  ) => {
+    try {
+      const updated = checklist.map((item) =>
+        item.id === itemId ? { ...item, done: !item.done } : item
+      );
+      await onUpdateTask({ acceptanceChecklist: updated });
+    } catch (error) {
+      notifications.error(
+        error instanceof Error
+          ? error.message
+          : "Failed to toggle checklist item"
+      );
+    }
+  };
+
+  const handleRemoveChecklistItem = async (
+    itemId: string,
+    checklist: AcceptanceItem[]
+  ) => {
+    try {
+      const updated = checklist.filter((item) => item.id !== itemId);
+      await onUpdateTask({ acceptanceChecklist: updated });
+    } catch (error) {
+      notifications.error(
+        error instanceof Error
+          ? error.message
+          : "Failed to remove checklist item"
+      );
+    }
+  };
+
+  const handleLinkDoc = async (docId: string, currentDocIds: string[]) => {
+    if (currentDocIds.includes(docId)) return;
+    try {
+      await onUpdateTask({
+        docIds: [...currentDocIds, docId],
+      });
+      notifications.success("Document linked");
+    } catch (error) {
+      notifications.error(
+        error instanceof Error ? error.message : "Failed to link document"
+      );
+    }
+  };
+
+  const handleUnlinkDoc = async (docId: string, currentDocIds: string[]) => {
+    try {
+      await onUpdateTask({
+        docIds: currentDocIds.filter((id) => id !== docId),
+      });
+      notifications.success("Document unlinked");
+    } catch (error) {
+      notifications.error(
+        error instanceof Error ? error.message : "Failed to unlink document"
+      );
+    }
+  };
+
+  const handleReject = async (reason: string, onSuccess?: () => void) => {
+    if (!reason.trim()) return;
+    try {
+      await onUpdateTask({ status: TaskStatus.IN_PROGRESS });
+      if (onAddComment) {
+        await onAddComment(`❌ **Rejected**: ${reason}`);
+      }
+      notifications.success("Task rejected");
+      onSuccess?.();
+    } catch (error) {
+      notifications.error(
+        error instanceof Error ? error.message : "Failed to reject task"
+      );
+    }
+  };
+
+  const handleApprove = async (onSuccess?: () => void) => {
+    try {
+      await onUpdateTask({ status: TaskStatus.DONE });
+      notifications.success("Task approved");
+      onSuccess?.();
+    } catch (error) {
+      notifications.error(
+        error instanceof Error ? error.message : "Failed to approve task"
+      );
+    }
+  };
+
+  return {
+    handleTitleSave,
+    handleDescSave,
+    handleAddChecklistItem,
+    handleToggleChecklistItem,
+    handleRemoveChecklistItem,
+    handleLinkDoc,
+    handleUnlinkDoc,
+    handleReject,
+    handleApprove,
+  };
+}

package/src/hooks/task-panel/useTaskComputedValues.ts

@@ -0,0 +1,30 @@
+/**
+ * Task Panel Computed Values Hook
+ *
+ * Manages computed values (checklist progress).
+ */
+
+"use client";
+
+import { type Task } from "@locusai/shared";
+
+export interface TaskComputedValues {
+  checklistProgress: number;
+}
+
+/**
+ * Compute task-related values
+ */
+export function useTaskComputedValues(task?: Task): TaskComputedValues {
+  const checklistProgress = task?.acceptanceChecklist?.length
+    ? Math.round(
+        (task.acceptanceChecklist.filter((i) => i.done).length /
+          task.acceptanceChecklist.length) *
+          100
+      )
+    : 0;
+
+  return {
+    checklistProgress,
+  };
+}

package/src/hooks/task-panel/useTaskData.ts

@@ -0,0 +1,78 @@
+/**
+ * Task Panel Data Hook
+ *
+ * Manages task fetching and basic mutations.
+ */
+
+"use client";
+
+import { type Task } from "@locusai/shared";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useWorkspaceId } from "@/hooks/useWorkspaceId";
+import { locusClient } from "@/lib/api-client";
+import { queryKeys } from "@/lib/query-keys";
+
+interface UseTaskDataProps {
+  taskId: string;
+  onUpdated?: () => void;
+}
+
+export interface TaskDataState {
+  task: Task | undefined;
+  isLoading: boolean;
+  error: Error | null;
+}
+
+export interface TaskDataActions {
+  refetchTask: () => Promise<void>;
+  updateTask: (updates: Partial<Task> & { docIds?: string[] }) => Promise<void>;
+  deleteTask: () => Promise<void>;
+}
+
+/**
+ * Manage task data fetching and updates
+ */
+export function useTaskData({
+  taskId,
+  onUpdated,
+}: UseTaskDataProps): TaskDataState & TaskDataActions {
+  const workspaceId = useWorkspaceId();
+  const queryClient = useQueryClient();
+
+  const {
+    data: task,
+    isLoading,
+    error,
+    refetch,
+  } = useQuery({
+    queryKey: queryKeys.tasks.detail(taskId),
+    queryFn: () => locusClient.tasks.getById(taskId, workspaceId),
+    enabled: !!workspaceId,
+  });
+
+  const refetchTask = async () => {
+    await refetch();
+  };
+
+  const updateTask = async (updates: Partial<Task> & { docIds?: string[] }) => {
+    await locusClient.tasks.update(taskId, workspaceId, updates);
+    queryClient.invalidateQueries({
+      queryKey: queryKeys.tasks.detail(taskId),
+    });
+    onUpdated?.();
+  };
+
+  const deleteTask = async () => {
+    await locusClient.tasks.delete(taskId, workspaceId);
+    queryClient.invalidateQueries({ queryKey: queryKeys.tasks.all() });
+  };
+
+  return {
+    task,
+    isLoading,
+    error: error as Error | null,
+    refetchTask,
+    updateTask,
+    deleteTask,
+  };
+}

package/src/hooks/task-panel/useTaskPanelComposite.ts

@@ -0,0 +1,161 @@
+/**
+ * Task Panel Composite Hook
+ *
+ * Combines all task panel hooks for backward compatibility.
+ * Prefer using individual hooks for new code.
+ */
+
+"use client";
+
+import { useQueryClient } from "@tanstack/react-query";
+import { useAuth } from "@/context/AuthContext";
+import { useWorkspaceId } from "@/hooks/useWorkspaceId";
+import { locusClient } from "@/lib/api-client";
+import { queryKeys } from "@/lib/query-keys";
+import { useTaskActions } from "./useTaskActions";
+import { useTaskComputedValues } from "./useTaskComputedValues";
+import { useTaskData } from "./useTaskData";
+import { useTaskUIState } from "./useTaskUIState";
+
+interface UseTaskPanelProps {
+  taskId: string;
+  onUpdated: () => void;
+  onDeleted: () => void;
+  onClose: () => void;
+}
+
+/**
+ * All-in-one task panel hook (kept for backward compatibility)
+ *
+ * @deprecated Prefer using individual hooks:
+ * - useTaskData for task fetching
+ * - useTaskUIState for UI state
+ * - useTaskActions for operations
+ * - useTaskComputedValues for derived values
+ */
+export function useTaskPanelComposite({
+  taskId,
+  onUpdated,
+  onDeleted,
+  onClose,
+}: UseTaskPanelProps) {
+  const { user } = useAuth();
+  const workspaceId = useWorkspaceId();
+  const queryClient = useQueryClient();
+
+  const { task, isLoading, updateTask, deleteTask, refetchTask } = useTaskData({
+    taskId,
+    onUpdated,
+  });
+
+  const ui = useTaskUIState(task);
+  const actions = useTaskActions({
+    onUpdateTask: updateTask,
+    onAddComment: async (text) => {
+      await locusClient.tasks.addComment(taskId, workspaceId, {
+        author: user?.name || "Anonymous",
+        text,
+      });
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.tasks.detail(taskId),
+      });
+    },
+  });
+
+  const computed = useTaskComputedValues(task);
+
+  const handleDelete = async () => {
+    if (
+      !confirm(
+        "Are you sure you want to delete this task? This action cannot be undone."
+      )
+    ) {
+      return;
+    }
+    try {
+      await deleteTask();
+      onDeleted();
+      onClose();
+    } catch (error) {
+      console.error("Failed to delete task:", error);
+    }
+  };
+
+  const handleAddComment = async () => {
+    if (!ui.newComment.trim()) return;
+    try {
+      await locusClient.tasks.addComment(taskId, workspaceId, {
+        author: user?.name || "Anonymous",
+        text: ui.newComment,
+      });
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.tasks.detail(taskId),
+      });
+      ui.resetCommentInput();
+    } catch (error) {
+      console.error("Failed to add comment:", error);
+    }
+  };
+
+  return {
+    task,
+    isLoading,
+    // UI State
+    isEditingTitle: ui.isEditingTitle,
+    setIsEditingTitle: ui.setIsEditingTitle,
+    editTitle: ui.editTitle,
+    setEditTitle: ui.setEditTitle,
+    editDesc: ui.editDesc,
+    setEditDesc: ui.setEditDesc,
+    newComment: ui.newComment,
+    setNewComment: ui.setNewComment,
+    newChecklistItem: ui.newChecklistItem,
+    setNewChecklistItem: ui.setNewChecklistItem,
+    descMode: ui.descMode,
+    setDescMode: ui.setDescMode,
+    showRejectModal: ui.showRejectModal,
+    setShowRejectModal: ui.setShowRejectModal,
+    rejectReason: ui.rejectReason,
+    setRejectReason: ui.setRejectReason,
+    // Computed
+    checklistProgress: computed.checklistProgress,
+    // Actions
+    handleUpdateTask: updateTask,
+    handleLinkDoc: async (docId: string) => {
+      const currentDocIds = task?.docs?.map((d) => d.id) || [];
+      await actions.handleLinkDoc(docId, currentDocIds);
+    },
+    handleUnlinkDoc: async (docId: string) => {
+      const currentDocIds = task?.docs?.map((d) => d.id) || [];
+      await actions.handleUnlinkDoc(docId, currentDocIds);
+    },
+    handleDelete,
+    handleTitleSave: () => actions.handleTitleSave(ui.editTitle, task?.title),
+    handleDescSave: () =>
+      actions.handleDescSave(ui.editDesc, task?.description),
+    handleAddChecklistItem: () =>
+      actions.handleAddChecklistItem(
+        ui.newChecklistItem,
+        task?.acceptanceChecklist || []
+      ),
+    handleToggleChecklistItem: (itemId: string) =>
+      actions.handleToggleChecklistItem(
+        itemId,
+        task?.acceptanceChecklist || []
+      ),
+    handleRemoveChecklistItem: (itemId: string) =>
+      actions.handleRemoveChecklistItem(
+        itemId,
+        task?.acceptanceChecklist || []
+      ),
+    handleAddComment,
+    handleReject: (onSuccess?: () => void) =>
+      actions.handleReject(ui.rejectReason, () => {
+        ui.setShowRejectModal(false);
+        ui.setRejectReason("");
+        onSuccess?.();
+      }),
+    handleApprove: (onSuccess?: () => void) => actions.handleApprove(onSuccess),
+    refresh: refetchTask,
+  };
+}

package/src/hooks/task-panel/useTaskUIState.ts

@@ -0,0 +1,80 @@
+/**
+ * Task Panel UI State Hook
+ *
+ * Manages UI state (editing, modals, descriptions mode).
+ */
+
+"use client";
+
+import { type Task } from "@locusai/shared";
+import { useEffect, useState } from "react";
+
+export interface TaskUIState {
+  isEditingTitle: boolean;
+  editTitle: string;
+  editDesc: string;
+  newComment: string;
+  newChecklistItem: string;
+  descMode: "edit" | "preview";
+  showRejectModal: boolean;
+  rejectReason: string;
+}
+
+export interface TaskUIActions {
+  setIsEditingTitle: (value: boolean) => void;
+  setEditTitle: (value: string) => void;
+  setEditDesc: (value: string) => void;
+  setNewComment: (value: string) => void;
+  setNewChecklistItem: (value: string) => void;
+  setDescMode: (value: "edit" | "preview") => void;
+  setShowRejectModal: (value: boolean) => void;
+  setRejectReason: (value: string) => void;
+  resetCommentInput: () => void;
+  resetChecklistInput: () => void;
+}
+
+/**
+ * Manage task panel UI state
+ */
+export function useTaskUIState(task?: Task): TaskUIState & TaskUIActions {
+  const [isEditingTitle, setIsEditingTitle] = useState(false);
+  const [editTitle, setEditTitle] = useState("");
+  const [editDesc, setEditDesc] = useState("");
+  const [newComment, setNewComment] = useState("");
+  const [newChecklistItem, setNewChecklistItem] = useState("");
+  const [descMode, setDescMode] = useState<"edit" | "preview">("preview");
+  const [showRejectModal, setShowRejectModal] = useState(false);
+  const [rejectReason, setRejectReason] = useState("");
+
+  // Sync with task data
+  useEffect(() => {
+    if (task) {
+      setEditTitle(task.title);
+      setEditDesc(task.description || "");
+    }
+  }, [task]);
+
+  const resetCommentInput = () => setNewComment("");
+  const resetChecklistInput = () => setNewChecklistItem("");
+
+  return {
+    isEditingTitle,
+    editTitle,
+    editDesc,
+    newComment,
+    newChecklistItem,
+    descMode,
+    showRejectModal,
+    rejectReason,
+    setIsEditingTitle,
+    setEditTitle,
+    setEditDesc,
+    setNewComment,
+    setNewChecklistItem,
+    setDescMode,
+    setShowRejectModal,
+    setRejectReason,
+    resetCommentInput,
+    resetChecklistInput,
+  };
+}

package/src/hooks/useAuthLayoutLogic.ts

@@ -0,0 +1,43 @@
+/**
+ * Hook for auth layout routing and protection logic
+ *
+ * Handles redirecting authenticated users away from auth pages
+ * (except onboarding pages which may be needed during account setup)
+ */
+"use client";
+
+import { usePathname, useRouter } from "next/navigation";
+import { useEffect } from "react";
+import { useAuth } from "@/context/AuthContext";
+import { isCloudMode } from "@/utils/env.utils";
+
+const AUTH_SKIP_ROUTES = ["/onboarding"];
+
+/**
+ * Determines if a pathname should skip auth redirect
+ * @param pathname - Current pathname
+ * @returns true if auth redirect should be skipped
+ */
+function shouldSkipAuthRedirect(pathname: string): boolean {
+  return AUTH_SKIP_ROUTES.some((route) => pathname.startsWith(route));
+}
+
+export function useAuthLayoutLogic() {
+  const { isAuthenticated, isLoading } = useAuth();
+  const router = useRouter();
+  const pathname = usePathname();
+
+  useEffect(() => {
+    // Skip redirect if still loading or not in cloud mode
+    if (isLoading || !isCloudMode()) {
+      return;
+    }
+
+    // Redirect authenticated users away from auth pages
+    if (isAuthenticated && !shouldSkipAuthRedirect(pathname)) {
+      router.push("/");
+    }
+  }, [isLoading, isAuthenticated, router, pathname]);
+
+  return { isLoading };
+}