@locusai/web 0.1.7 → 0.2.2

package/src/components/ui/constants.ts

@@ -0,0 +1,108 @@
+/**
+ * UI Component Constants
+ *
+ * Centralized constants for UI components including sizes, variants, and styling
+ * This ensures consistency across all UI components and makes maintenance easier.
+ */
+
+/**
+ * Button component sizes and their corresponding Tailwind classes
+ */
+export const BUTTON_SIZES = {
+  sm: "h-8 px-3 text-[10px] uppercase tracking-wider",
+  md: "h-10 px-5 text-sm",
+  lg: "h-12 px-8 text-base",
+  icon: "h-10 w-10 p-0",
+} as const;
+
+/**
+ * Button component variants and their styling
+ */
+export const BUTTON_VARIANTS = {
+  primary:
+    "bg-primary text-primary-foreground shadow-sm hover:translate-y-[-1px] hover:shadow-md",
+  secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+  subtle: "bg-primary/10 text-primary hover:bg-primary/20",
+  outline: "border border-border bg-transparent hover:bg-secondary/50",
+  ghost: "hover:bg-secondary text-muted-foreground hover:text-foreground",
+  danger: "bg-red-500/10 text-red-500 hover:bg-red-500/20",
+  success: "bg-emerald-500/10 text-emerald-600 hover:bg-emerald-500/20",
+  emerald: "bg-emerald-500 text-white hover:bg-emerald-600",
+  amber: "bg-amber-500 text-black hover:bg-amber-600 font-bold",
+  "emerald-subtle":
+    "bg-emerald-500/10 text-emerald-600 hover:bg-emerald-500/20 border border-emerald-500/20",
+  "amber-subtle":
+    "bg-amber-500/10 text-amber-600 hover:bg-amber-500/20 border border-amber-500/20",
+} as const;
+
+/**
+ * Badge component sizes
+ */
+export const BADGE_SIZES = {
+  sm: "px-2 py-1 text-xs",
+  md: "px-3 py-1.5 text-sm",
+  lg: "px-4 py-2 text-base",
+} as const;
+
+/**
+ * Badge component variants
+ */
+export const BADGE_VARIANTS = {
+  default: "bg-primary/10 text-primary border border-primary/20",
+  success: "bg-emerald-500/10 text-emerald-600 border border-emerald-500/20",
+  warning: "bg-amber-500/10 text-amber-600 border border-amber-500/20",
+  danger: "bg-red-500/10 text-red-500 border border-red-500/20",
+  info: "bg-blue-500/10 text-blue-600 border border-blue-500/20",
+} as const;
+
+/**
+ * Modal sizes
+ */
+export const MODAL_SIZES = {
+  sm: "w-[400px]",
+  md: "w-[520px]",
+  lg: "w-[680px]",
+} as const;
+
+/**
+ * Spinner sizes
+ */
+export const SPINNER_SIZES = {
+  sm: "w-4 h-4",
+  md: "w-6 h-6",
+  lg: "w-8 h-8",
+  xl: "w-12 h-12",
+} as const;
+
+/**
+ * Z-index scale for proper layering
+ */
+export const Z_INDEXES = {
+  base: "z-0",
+  dropdown: "z-100",
+  sticky: "z-500",
+  fixed: "z-900",
+  modalOverlay: "z-940",
+  modal: "z-950",
+  tooltip: "z-1000",
+  notification: "z-1100",
+} as const;
+
+/**
+ * Transition durations for consistent animations
+ */
+export const TRANSITIONS = {
+  fast: "duration-100",
+  normal: "duration-200",
+  slow: "duration-300",
+} as const;
+
+/**
+ * Border radius constants
+ */
+export const BORDER_RADIUS = {
+  sm: "rounded-md",
+  md: "rounded-lg",
+  lg: "rounded-xl",
+  full: "rounded-full",
+} as const;

package/src/components/ui/index.ts

@@ -1,7 +1,14 @@
+export * from "./Avatar";
 export * from "./Badge";
 export * from "./Button";
 export * from "./Checkbox";
 export * from "./Dropdown";
+export * from "./EmptyState";
 export * from "./Input";
 export * from "./Modal";
+export * from "./OtpInput";
+export * from "./Skeleton";
+export * from "./Spinner";
 export * from "./Textarea";
+export * from "./Toast";
+export * from "./Toggle";

package/src/context/AuthContext.tsx

@@ -0,0 +1,140 @@
+"use client";
+
+import { type User, type Workspace } from "@locusai/shared";
+import { useRouter } from "next/navigation";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
+import { locusClient, setClientToken } from "@/lib/api-client";
+
+interface AuthContextType {
+  user: User | null;
+  workspaces: Workspace[];
+  isLoading: boolean;
+  isAuthenticated: boolean;
+  login: (token: string, user: User) => void;
+  logout: () => void;
+  refreshUser: () => Promise<void>;
+  switchWorkspace: (workspaceId: string) => void;
+}
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+export function AuthProvider({ children }: { children: React.ReactNode }) {
+  const [user, setUser] = useState<User | null>(null);
+  const [workspaces, setWorkspaces] = useState<Workspace[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const router = useRouter();
+
+  const switchWorkspace = useCallback((workspaceId: string) => {
+    setUser((prev) => (prev ? { ...prev, workspaceId } : null));
+  }, []);
+
+  const refreshUser = useCallback(async () => {
+    try {
+      // Check if token exists first - skip API call if not
+      const token =
+        typeof window !== "undefined"
+          ? localStorage.getItem("locus_token")
+          : null;
+
+      if (!token) {
+        // No token stored, immediately set loading to false
+        // Layout will redirect to login
+        setIsLoading(false);
+        return;
+      }
+
+      const userData = await locusClient.auth.getMe();
+      const workspacesData = await locusClient.workspaces.listAll();
+
+      let effectiveWorkspaceId = userData.workspaceId;
+
+      // Validation: Ensure current workspaceId is valid
+      if (workspacesData.length > 0) {
+        const isValid = workspacesData.some(
+          (w) => w.id === effectiveWorkspaceId
+        );
+        if (!isValid) {
+          effectiveWorkspaceId = workspacesData[0].id;
+        }
+      }
+
+      setUser({
+        ...userData,
+        workspaceId: effectiveWorkspaceId
+          ? String(effectiveWorkspaceId)
+          : undefined,
+      });
+      setWorkspaces(workspacesData);
+    } catch (error) {
+      console.error("Failed to fetch user:", error);
+      setClientToken(null);
+      setUser(null);
+      setWorkspaces([]);
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    refreshUser();
+  }, [refreshUser]);
+
+  const login = (token: string, userData: User) => {
+    setClientToken(token);
+    setUser(userData);
+
+    // If user doesn't have a workspace, redirect to create one
+    if (!userData.workspaceId) {
+      router.push("/onboarding/workspace");
+    } else {
+      router.push("/");
+    }
+  };
+
+  const logout = () => {
+    setClientToken(null);
+    setUser(null);
+    router.push("/login");
+  };
+
+  return (
+    <AuthContext.Provider
+      value={{
+        user,
+        workspaces,
+        isLoading,
+        isAuthenticated: !!user,
+        login,
+        logout,
+        refreshUser,
+        switchWorkspace,
+      }}
+    >
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+export function useAuth() {
+  const context = useContext(AuthContext);
+  if (context === undefined) {
+    throw new Error("useAuth must be used within an AuthProvider");
+  }
+  return context;
+}
+
+export function useSafeAuth() {
+  const context = useContext(AuthContext);
+  if (context === undefined) {
+    throw new Error("useAuth must be used within an AuthProvider");
+  }
+  return context as AuthContextType & {
+    user: User;
+  };
+}

package/src/context/index.ts

@@ -0,0 +1 @@
+export * from "./AuthContext";

package/src/hooks/backlog/index.ts

@@ -0,0 +1,13 @@
+/**
+ * Backlog Hooks - Composite Export
+ *
+ * For backward compatibility, export all backlog hooks.
+ * Prefer using individual hooks for better tree-shaking and clarity.
+ */
+
+export * from "./useBacklogActions";
+// Composite hook for components not yet refactored
+export { useBacklogComposite as useBacklog } from "./useBacklogComposite";
+export * from "./useBacklogData";
+export * from "./useBacklogDragDrop";
+export * from "./useBacklogUI";

package/src/hooks/backlog/useBacklogActions.ts

@@ -0,0 +1,144 @@
+/**
+ * Backlog Actions Hook
+ *
+ * Handles API operations for sprints and tasks (create, start, complete, delete).
+ */
+
+"use client";
+
+import { type Sprint, SprintStatus } from "@locusai/shared";
+import { useQueryClient } from "@tanstack/react-query";
+import { useState } from "react";
+import { useWorkspaceId } from "@/hooks/useWorkspaceId";
+import { locusClient } from "@/lib/api-client";
+import { queryKeys } from "@/lib/query-keys";
+import { notifications } from "@/services/notifications";
+
+export interface BacklogActionsState {
+  isSubmitting: boolean;
+}
+
+export interface BacklogActionsHandlers {
+  handleCreateSprint: (name: string) => Promise<void>;
+  handleStartSprint: (sprintId: string) => Promise<void>;
+  handleCompleteSprint: (sprintId: string) => Promise<void>;
+  handleDeleteTask: (taskId: string) => Promise<void>;
+}
+
+interface BacklogActionsOptions {
+  onSprintCreated?: () => void;
+  onSprintStarted?: () => void;
+  onSprintCompleted?: () => void;
+  onTaskDeleted?: () => void;
+}
+
+/**
+ * Manage backlog operations (sprint and task actions)
+ */
+export function useBacklogActions(
+  options: BacklogActionsOptions = {}
+): BacklogActionsState & BacklogActionsHandlers {
+  const workspaceId = useWorkspaceId();
+  const queryClient = useQueryClient();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleCreateSprint = async (name: string) => {
+    try {
+      setIsSubmitting(true);
+      await locusClient.sprints.create(workspaceId, { name });
+      notifications.created("Sprint");
+      options.onSprintCreated?.();
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.sprints.list(workspaceId),
+      });
+    } catch (error) {
+      notifications.error(
+        error instanceof Error ? error.message : "Failed to create sprint"
+      );
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleStartSprint = async (sprintId: string) => {
+    try {
+      setIsSubmitting(true);
+      await locusClient.sprints.start(sprintId, workspaceId);
+      notifications.success("Sprint started");
+      options.onSprintStarted?.();
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.sprints.list(workspaceId),
+      });
+    } catch (error) {
+      notifications.error(
+        error instanceof Error ? error.message : "Failed to start sprint"
+      );
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleCompleteSprint = async (sprintId: string) => {
+    try {
+      setIsSubmitting(true);
+
+      // Optimistic update
+      const sprintKey = queryKeys.sprints.list(workspaceId);
+      const previousSprints = queryClient.getQueryData<Sprint[]>(sprintKey);
+
+      if (previousSprints) {
+        queryClient.setQueryData<Sprint[]>(
+          sprintKey,
+          previousSprints.map((s) =>
+            s.id === sprintId
+              ? {
+                  ...s,
+                  status: SprintStatus.COMPLETED,
+                  endDate: Date.now(),
+                }
+              : s
+          )
+        );
+      }
+
+      await locusClient.sprints.complete(sprintId, workspaceId);
+      notifications.success("Sprint completed");
+      options.onSprintCompleted?.();
+
+      // Full sync
+      queryClient.invalidateQueries({ queryKey: sprintKey });
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.tasks.list(workspaceId),
+      });
+    } catch (error) {
+      notifications.error(
+        error instanceof Error ? error.message : "Failed to complete sprint"
+      );
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleDeleteTask = async (taskId: string) => {
+    try {
+      await locusClient.tasks.delete(taskId, workspaceId);
+      notifications.deleted();
+      options.onTaskDeleted?.();
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.tasks.list(workspaceId),
+      });
+    } catch (error) {
+      notifications.error(
+        error instanceof Error ? error.message : "Failed to delete task"
+      );
+    }
+  };
+
+  return {
+    isSubmitting,
+    handleCreateSprint,
+    handleStartSprint,
+    handleCompleteSprint,
+    handleDeleteTask,
+  };
+}

package/src/hooks/backlog/useBacklogComposite.ts

@@ -0,0 +1,73 @@
+/**
+ * Backlog Composite Hook
+ *
+ * Combines all backlog hooks for backward compatibility.
+ * Prefer using individual hooks for new code.
+ */
+
+"use client";
+
+import { useBacklogActions } from "./useBacklogActions";
+import { useBacklogData } from "./useBacklogData";
+import { useBacklogDragDrop } from "./useBacklogDragDrop";
+import { useBacklogUI } from "./useBacklogUI";
+
+/**
+ * All-in-one backlog hook (kept for backward compatibility)
+ *
+ * @deprecated Prefer using individual hooks:
+ * - useBacklogUI for UI state
+ * - useBacklogData for data
+ * - useBacklogDragDrop for drag operations
+ * - useBacklogActions for API calls
+ */
+export function useBacklogComposite() {
+  const ui = useBacklogUI();
+  const data = useBacklogData();
+  const dragDrop = useBacklogDragDrop(data.tasks);
+  const actions = useBacklogActions({
+    onSprintCreated: () => {
+      ui.setIsSprintModalOpen(false);
+      data.refetchSprints();
+    },
+  });
+
+  return {
+    // Data
+    tasks: data.tasks,
+    sprints: data.sprints,
+    backlogTasks: data.backlogTasks,
+    activeSprint: data.activeSprint,
+    plannedSprints: data.plannedSprints,
+    completedSprints: data.completedSprints,
+    getSprintTasks: data.getSprintTasks,
+    isLoading: data.isLoading,
+
+    // UI State
+    isTaskModalOpen: ui.isTaskModalOpen,
+    setIsTaskModalOpen: ui.setIsTaskModalOpen,
+    isSprintModalOpen: ui.isSprintModalOpen,
+    setIsSprintModalOpen: ui.setIsSprintModalOpen,
+    selectedTaskId: ui.selectedTaskId,
+    setSelectedTaskId: ui.setSelectedTaskId,
+    expandedSections: ui.expandedSections,
+    toggleSection: ui.toggleSection,
+
+    // Drag & Drop
+    activeTask: dragDrop.activeTask,
+    sensors: dragDrop.sensors,
+    handleDragStart: dragDrop.handleDragStart,
+    handleDragEnd: dragDrop.handleDragEnd,
+
+    // Actions
+    isSubmitting: actions.isSubmitting,
+    handleCreateSprint: actions.handleCreateSprint,
+    handleStartSprint: actions.handleStartSprint,
+    handleCompleteSprint: actions.handleCompleteSprint,
+    handleDeleteTask: actions.handleDeleteTask,
+
+    // Data actions
+    refetchTasks: data.refetchTasks,
+    refetchSprints: data.refetchSprints,
+  };
+}

package/src/hooks/backlog/useBacklogData.ts

@@ -0,0 +1,74 @@
+/**
+ * Backlog Data & Grouping Hook
+ * 
+ * Manages task and sprint data grouping and organization.
+ */
+
+"use client";
+
+import { type Sprint, SprintStatus, type Task } from "@locusai/shared";
+import { useMemo } from "react";
+import { useSprintsQuery, useTasksQuery } from "@/hooks";
+
+export interface BacklogGroupedData {
+  tasks: Task[];
+  sprints: Sprint[];
+  backlogTasks: Task[];
+  activeSprint: Sprint | undefined;
+  plannedSprints: Sprint[];
+  completedSprints: Sprint[];
+  isLoading: boolean;
+}
+
+export interface BacklogDataActions {
+  getSprintTasks: (sprintId: string) => Task[];
+  refetchTasks: () => void;
+  refetchSprints: () => void;
+}
+
+/**
+ * Manage backlog data grouping and organization
+ */
+export function useBacklogData(): BacklogGroupedData & BacklogDataActions {
+  const {
+    data: tasks = [],
+    isLoading: tasksLoading,
+    refetch: refetchTasks,
+  } = useTasksQuery();
+
+  const {
+    data: sprints = [],
+    isLoading: sprintsLoading,
+    refetch: refetchSprints,
+  } = useSprintsQuery();
+
+  const { backlogTasks, activeSprint, plannedSprints, completedSprints } =
+    useMemo(() => {
+      return {
+        backlogTasks: tasks.filter((t) => !t.sprintId),
+        activeSprint: sprints.find((s) => s.status === SprintStatus.ACTIVE),
+        plannedSprints: sprints.filter(
+          (s) => s.status === SprintStatus.PLANNED
+        ),
+        completedSprints: sprints.filter(
+          (s) => s.status === SprintStatus.COMPLETED
+        ),
+      };
+    }, [tasks, sprints]);
+
+  const getSprintTasks = (sprintId: string) =>
+    tasks.filter((t) => t.sprintId === sprintId);
+
+  return {
+    tasks,
+    sprints,
+    backlogTasks,
+    activeSprint,
+    plannedSprints,
+    completedSprints,
+    isLoading: tasksLoading || sprintsLoading,
+    getSprintTasks,
+    refetchTasks,
+    refetchSprints,
+  };
+}

package/src/hooks/backlog/useBacklogDragDrop.ts

@@ -0,0 +1,118 @@
+/**
+ * Backlog Drag & Drop Hook
+ *
+ * Handles drag and drop logic for task moving between sprints/backlog.
+ */
+
+"use client";
+
+import {
+  type DragEndEvent,
+  type DragStartEvent,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import { type Task } from "@locusai/shared";
+import { useQueryClient } from "@tanstack/react-query";
+import { useState } from "react";
+import { useWorkspaceId } from "@/hooks/useWorkspaceId";
+import { locusClient } from "@/lib/api-client";
+import { queryKeys } from "@/lib/query-keys";
+import { notifications } from "@/services/notifications";
+
+export interface BacklogDragDropActions {
+  activeTask: Task | null;
+  sensors: ReturnType<typeof useSensors>;
+  handleDragStart: (event: DragStartEvent) => void;
+  handleDragEnd: (event: DragEndEvent) => Promise<void>;
+}
+
+/**
+ * Manage drag and drop operations for backlog tasks
+ */
+export function useBacklogDragDrop(tasks: Task[]): BacklogDragDropActions {
+  const workspaceId = useWorkspaceId();
+  const queryClient = useQueryClient();
+  const [activeTask, setActiveTask] = useState<Task | null>(null);
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: { distance: 8 },
+    })
+  );
+
+  const handleDragStart = (event: DragStartEvent) => {
+    const task = tasks.find((t) => t.id === event.active.id);
+    setActiveTask(task || null);
+  };
+
+  const handleDragEnd = async (event: DragEndEvent) => {
+    const { active, over } = event;
+    setActiveTask(null);
+
+    if (!over) return;
+
+    const taskId = active.id as string;
+    const overId = over.id as string;
+
+    // Find the actual target container (sprint ID or "backlog")
+    let targetContainerId = overId;
+    const overTask = tasks.find((t) => t.id === overId);
+    if (overTask) {
+      targetContainerId = overTask.sprintId
+        ? `sprint-${overTask.sprintId}`
+        : "backlog";
+    }
+
+    let newSprintId: string | null = null;
+    if (targetContainerId === "backlog") {
+      newSprintId = null;
+    } else if (targetContainerId.startsWith("sprint-")) {
+      newSprintId = targetContainerId.replace("sprint-", "");
+    } else {
+      return;
+    }
+
+    const task = tasks.find((t) => t.id === taskId);
+    if (!task || task.sprintId === newSprintId) return;
+
+    // Optimistic update
+    const queryKey = queryKeys.tasks.list(workspaceId);
+    await queryClient.cancelQueries({ queryKey });
+
+    const previousTasks = queryClient.getQueryData<Task[]>(queryKey);
+
+    if (previousTasks) {
+      queryClient.setQueryData<Task[]>(
+        queryKey,
+        previousTasks.map((t) =>
+          t.id === taskId ? { ...t, sprintId: newSprintId } : t
+        )
+      );
+    }
+
+    try {
+      await locusClient.tasks.update(taskId, workspaceId, {
+        sprintId: newSprintId,
+      });
+      // Invalidate to ensure sync
+      queryClient.invalidateQueries({ queryKey });
+    } catch (error) {
+      // Rollback
+      if (previousTasks) {
+        queryClient.setQueryData(queryKey, previousTasks);
+      }
+      notifications.error(
+        error instanceof Error ? error.message : "Failed to move task"
+      );
+    }
+  };
+
+  return {
+    activeTask,
+    sensors,
+    handleDragStart,
+    handleDragEnd,
+  };
+}