@locusai/web 0.1.7 → 0.2.2

package/src/components/PropertyItem.tsx

@@ -1,17 +1,50 @@
+/**
+ * Property Item Component
+ *
+ * Displays an editable task property with label and value.
+ * Supports text, date, and dropdown editing modes.
+ * Used in task panels for property editing.
+ *
+ * Features:
+ * - Inline editing
+ * - Multiple input types (text, date, dropdown)
+ * - Edit/save/cancel actions
+ * - Optional dropdown options
+ *
+ * @example
+ * <PropertyItem
+ *   label="Priority"
+ *   value="High"
+ *   type="dropdown"
+ *   options={["Low", "Medium", "High"]}
+ *   onEdit={handleEdit}
+ * />
+ */
+
 "use client";
-import { Check, Edit2, X } from "lucide-react";
 
+import { Check, Edit2, X } from "lucide-react";
 import { useState } from "react";
+import { SecondaryText } from "./typography";
 import { Button } from "./ui/Button";
 import { Dropdown } from "./ui/Dropdown";
 import { Input } from "./ui/Input";
 
 export interface PropertyItemProps {
+  /** Property label */
   label: string;
+  /** Current property value */
   value: string | number;
+  /** Called when value is updated */
   onEdit: (newValue: string) => void;
+  /** Options for dropdown type */
   options?: string[];
+  /** Input type for editing */
   type?: "text" | "date" | "dropdown";
+  /** Whether the property is disabled */
+  disabled?: boolean;
+  /** Placeholder text for text input */
+  placeholder?: string;
 }
 
 export function PropertyItem({
@@ -20,6 +53,8 @@ export function PropertyItem({
   onEdit,
   options,
   type = "text",
+  disabled = false,
+  placeholder,
 }: PropertyItemProps) {
   const [isEditing, setIsEditing] = useState(false);
   const [editValue, setEditValue] = useState(String(value));
@@ -36,9 +71,9 @@ export function PropertyItem({
 
   return (
     <div className="flex flex-col gap-1.5 py-3 first:pt-0 last:pb-0">
-      <span className="text-[10px] items-center font-bold uppercase tracking-widest text-muted-foreground">
+      <SecondaryText as="span" size="xs" className="items-center">
         {label}
-      </span>
+      </SecondaryText>
       <div className="relative group min-h-[32px] flex items-center">
         {isEditing ? (
           <div className="flex items-center gap-2 w-full">
@@ -48,12 +83,15 @@ export function PropertyItem({
                   value={editValue}
                   options={options.map((o) => ({ value: o, label: o }))}
                   onChange={(v) => setEditValue(v)}
+                  disabled={disabled}
                 />
               ) : (
                 <Input
                   type={type}
                   value={editValue}
                   onChange={(e) => setEditValue(e.target.value)}
+                  disabled={disabled}
+                  placeholder={placeholder}
                   autoFocus
                   className="h-8 py-1"
                 />
@@ -65,6 +103,7 @@ export function PropertyItem({
                 variant="ghost"
                 className="h-8 w-8"
                 onClick={handleSave}
+                disabled={disabled}
               >
                 <Check size={14} />
               </Button>
@@ -73,6 +112,7 @@ export function PropertyItem({
                 variant="ghost"
                 className="h-8 w-8"
                 onClick={handleCancel}
+                disabled={disabled}
               >
                 <X size={14} />
               </Button>
@@ -80,16 +120,22 @@ export function PropertyItem({
           </div>
         ) : (
           <div
-            className="flex items-center justify-between gap-2 w-full cursor-pointer hover:bg-secondary/50 px-2 -mx-2 py-1 rounded-md transition-colors"
-            onClick={() => setIsEditing(true)}
+            className={`flex items-center justify-between gap-2 w-full px-2 -mx-2 py-1 rounded-md transition-colors ${
+              disabled
+                ? "opacity-50 cursor-not-allowed"
+                : "cursor-pointer hover:bg-secondary/50"
+            }`}
+            onClick={() => !disabled && setIsEditing(true)}
           >
             <span className="text-sm font-medium text-foreground truncate">
               {value || "None"}
             </span>
-            <Edit2
-              size={12}
-              className="text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity shrink-0"
-            />
+            {!disabled && (
+              <Edit2
+                size={12}
+                className="text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity shrink-0"
+              />
+            )}
           </div>
         )}
       </div>

package/src/components/Sidebar.tsx

@@ -1,61 +1,216 @@
+/**
+ * Sidebar Component
+ *
+ * Main navigation sidebar with workspace switcher and user menu.
+ * Displays navigation links, workspace selection, and user profile.
+ * Features quick access to workspaces, settings, and user actions.
+ *
+ * Features:
+ * - Workspace switcher with quick access
+ * - Navigation links (Dashboard, Backlog, Docs)
+ * - User profile menu
+ * - Create workspace button
+ * - Keyboard shortcuts (Cmd+K for workspace switcher)
+ * - Logout functionality
+ * - Workspace-aware routing
+ *
+ * @example
+ * <Sidebar />
+ */
+
 "use client";
 
+import { type Workspace } from "@locusai/shared";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import {
+  Activity,
+  ChevronDown,
   ChevronRight,
   FileText,
+  FolderKanban,
   LayoutDashboard,
   List,
+  LogOut,
+  Plus,
   Settings,
+  User as UserIcon,
 } from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
-import { usePathname } from "next/navigation";
+import { usePathname, useRouter } from "next/navigation";
+import { useState } from "react";
+import { Avatar } from "@/components/ui";
+import { useAuth } from "@/context/AuthContext";
+import { useGlobalKeydowns } from "@/hooks";
+import { locusClient } from "@/lib/api-client";
+import { queryKeys } from "@/lib/query-keys";
+import { getTypographyClass } from "@/lib/typography";
 import { cn } from "@/lib/utils";
+import { WorkspaceCreateModal } from "./WorkspaceCreateModal";
 
 export function Sidebar() {
   const pathname = usePathname();
+  const router = useRouter();
+  const queryClient = useQueryClient();
+  const { user, logout, switchWorkspace } = useAuth();
+  const [isWorkspaceOpen, setIsWorkspaceOpen] = useState(false);
+  const [isUserMenuOpen, setIsUserMenuOpen] = useState(false);
+  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
+
+  const { data: workspaces = [] } = useQuery<Workspace[]>({
+    queryKey: queryKeys.workspaces.all(),
+    queryFn: () => locusClient.workspaces.listAll(),
+    enabled: !!user,
+  });
+
+  const currentWorkspace =
+    workspaces.find((w) => w.id === user?.workspaceId) || workspaces[0];
+
+  const invalidateWorkspaces = () => {
+    queryClient.invalidateQueries({ queryKey: queryKeys.workspaces.all() });
+  };
+
+  useGlobalKeydowns({
+    onOpenCreateTask: () => {
+      router.push("/backlog?createTask=true");
+    },
+    onOpenCreateSprint: () => {
+      router.push("/backlog?createSprint=true");
+    },
+    onCloseCreateTask: () => {
+      // Global escape could handle closing menus or global UI
+      setIsWorkspaceOpen(false);
+      setIsUserMenuOpen(false);
+      setIsCreateModalOpen(false);
+    },
+  });
 
-  const menuItems = [
+  const mainMenuItems = [
     {
       href: "/",
-      label: "Board",
+      label: "Dashboard",
       icon: LayoutDashboard,
-      description: "Manage tasks",
+      description: "Overview",
     },
     {
-      href: "/backlog", // Added Backlog item
+      href: "/board",
+      label: "Board",
+      icon: FolderKanban,
+      description: "Sprint board",
+    },
+    {
+      href: "/backlog",
       label: "Backlog",
       icon: List,
-      description: "Manage backlog items",
+      description: "All tasks",
+    },
+    {
+      href: "/activity",
+      label: "Activity",
+      icon: Activity,
+      description: "Workspace history",
     },
     {
       href: "/docs",
       label: "Library",
       icon: FileText,
-      description: "Documents",
+      description: "Documentation",
     },
   ];
 
   return (
-    <aside className="w-[260px] flex flex-col border-r border-border/50 bg-card/50 backdrop-blur-sm h-full">
+    <aside className="w-[260px] flex flex-col border-r border-border/50 bg-card/30 backdrop-blur-xl h-full">
       {/* Logo */}
-      <div className="flex items-center gap-3 p-5 border-b border-border/50">
+      <div className="flex items-center gap-3 p-4 border-b border-border/30">
         <Image
           src="/logo.png"
           alt="Locus"
           width={97.81}
           height={32}
-          className="rounded-xl shadow-lg"
+          className="rounded-xl"
         />
       </div>
 
-      {/* Navigation */}
-      <div className="flex-1 p-4">
-        <div className="text-[10px] uppercase font-bold tracking-widest text-muted-foreground/70 mb-3 px-3">
+      {/* Workspace Selector */}
+      <div className="p-3 border-b border-border/30">
+        <button
+          onClick={() => setIsWorkspaceOpen(!isWorkspaceOpen)}
+          className="w-full flex items-center gap-3 p-2.5 rounded-xl hover:bg-secondary/50 transition-all group"
+        >
+          <div className="flex items-center justify-center h-9 w-9 rounded-lg bg-linear-to-br from-primary/20 to-primary/5 border border-border/50 text-lg">
+            {"🚀"}
+          </div>
+          <div className="flex-1 text-left min-w-0">
+            <div className="text-sm font-semibold text-foreground truncate">
+              {currentWorkspace?.name || "Select Workspace"}
+            </div>
+            <div
+              className={cn(
+                getTypographyClass("label"),
+                "text-muted-foreground/70"
+              )}
+            >
+              Workspace
+            </div>
+          </div>
+          <ChevronDown
+            size={16}
+            className={cn(
+              "text-muted-foreground transition-transform duration-200",
+              isWorkspaceOpen && "rotate-180"
+            )}
+          />
+        </button>
+
+        {/* Workspace Dropdown */}
+        {isWorkspaceOpen && (
+          <div className="mt-2 p-2 bg-secondary/30 rounded-xl border border-border/30 animate-in fade-in slide-in-from-top-2 duration-200">
+            {workspaces.map((workspace) => (
+              <button
+                key={workspace.id}
+                className={cn(
+                  "w-full flex items-center gap-3 p-2 rounded-lg transition-colors text-sm",
+                  workspace.id === currentWorkspace?.id
+                    ? "bg-primary/10 text-primary"
+                    : "text-muted-foreground hover:bg-secondary/50 hover:text-foreground"
+                )}
+                onClick={() => {
+                  switchWorkspace(workspace.id as string);
+                  setIsWorkspaceOpen(false);
+                }}
+              >
+                <span className="text-base">{"🚀"}</span>
+                <span className="font-medium">{workspace.name}</span>
+              </button>
+            ))}
+            <div className="border-t border-border/30 mt-2 pt-2">
+              <button
+                onClick={() => {
+                  setIsCreateModalOpen(true);
+                  setIsWorkspaceOpen(false);
+                }}
+                className="w-full flex items-center gap-2 p-2 rounded-lg text-muted-foreground hover:bg-secondary/50 hover:text-foreground transition-colors text-sm"
+              >
+                <Plus size={16} />
+                <span>New Workspace</span>
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Main Navigation */}
+      <div className="flex-1 p-3 overflow-y-auto">
+        <div
+          className={cn(
+            getTypographyClass("label"),
+            "text-muted-foreground/60 mb-2 px-2"
+          )}
+        >
           Navigation
         </div>
         <nav className="space-y-1">
-          {menuItems.map((item) => {
+          {mainMenuItems.map((item) => {
             const Icon = item.icon;
             const isActive = pathname === item.href;
             return (
@@ -63,43 +218,132 @@ export function Sidebar() {
                 key={item.href}
                 href={item.href}
                 className={cn(
-                  "group flex items-center gap-3 px-3 py-2.5 text-sm font-medium rounded-xl transition-all",
+                  "group flex items-center gap-3 px-3 py-2.5 text-sm font-medium rounded-xl transition-all duration-200",
                   isActive
-                    ? "bg-primary text-primary-foreground shadow-md shadow-primary/20"
-                    : "text-muted-foreground hover:bg-secondary hover:text-foreground"
+                    ? "bg-primary text-primary-foreground shadow-lg shadow-primary/20"
+                    : "text-muted-foreground hover:bg-secondary/50 hover:text-foreground"
                 )}
               >
                 <Icon
                   size={18}
-                  className={
-                    isActive ? "" : "group-hover:scale-110 transition-transform"
-                  }
+                  className={cn(
+                    "shrink-0",
+                    !isActive && "group-hover:scale-110 transition-transform"
+                  )}
                 />
-                <div className="flex-1">
-                  <span className="block">{item.label}</span>
-                </div>
+                <span className="flex-1">{item.label}</span>
                 {isActive && <ChevronRight size={14} className="opacity-70" />}
               </Link>
             );
           })}
         </nav>
+
+        {/* Quick Actions */}
+        <div className="mt-6">
+          <div
+            className={cn(
+              getTypographyClass("label"),
+              "text-muted-foreground/60 mb-2 px-2"
+            )}
+          >
+            Quick Actions
+          </div>
+          <div className="space-y-1">
+            <button
+              className="w-full flex items-center gap-3 px-3 py-2.5 text-sm font-medium rounded-xl text-muted-foreground hover:bg-secondary/50 hover:text-foreground transition-all"
+              onClick={() => router.push("/backlog?createTask=true")}
+            >
+              <Plus size={18} />
+              <span>New Task</span>
+              <kbd className="ml-auto text-[10px] px-1.5 py-0.5 rounded bg-secondary/80 border border-border/50 text-muted-foreground/70">
+                Alt N
+              </kbd>
+            </button>
+            <button
+              className="w-full flex items-center gap-3 px-3 py-2.5 text-sm font-medium rounded-xl text-muted-foreground hover:bg-secondary/50 hover:text-foreground transition-all"
+              onClick={() => router.push("/backlog?createSprint=true")}
+            >
+              <FolderKanban size={18} />
+              <span>New Sprint</span>
+              <kbd className="ml-auto text-[10px] px-1.5 py-0.5 rounded bg-secondary/80 border border-border/50 text-muted-foreground/70">
+                Alt S
+              </kbd>
+            </button>
+          </div>
+        </div>
       </div>
 
-      {/* Footer */}
-      <div className="p-4 border-t border-border/50">
-        <Link
-          href="/settings"
-          className={cn(
-            "flex items-center gap-3 w-full px-3 py-2.5 text-sm font-medium rounded-xl transition-all",
-            pathname === "/settings"
-              ? "bg-secondary text-foreground"
-              : "text-muted-foreground hover:bg-secondary/60 hover:text-foreground"
+      {/* Bottom Section */}
+      <div className="p-3 border-t border-border/30 space-y-1">
+        {/* User Profile */}
+        <div className="relative">
+          <button
+            onClick={() => setIsUserMenuOpen(!isUserMenuOpen)}
+            className="w-full flex items-center gap-3 p-2.5 rounded-xl hover:bg-secondary/50 transition-all group"
+          >
+            <Avatar
+              name={user?.name || "User"}
+              src={user?.avatarUrl}
+              size="md"
+            />
+            <div className="flex-1 text-left min-w-0">
+              <div className="text-sm font-semibold text-foreground truncate">
+                {user?.name}
+              </div>
+              <div className="text-[11px] text-muted-foreground truncate">
+                {user?.email}
+              </div>
+            </div>
+            <ChevronDown
+              size={14}
+              className={cn(
+                "text-muted-foreground transition-transform duration-200",
+                isUserMenuOpen && "rotate-180"
+              )}
+            />
+          </button>
+
+          {/* User Menu Dropdown */}
+          {isUserMenuOpen && (
+            <div className="absolute bottom-full left-0 right-0 mb-2 p-2 bg-popover rounded-xl border border-border shadow-xl animate-in fade-in slide-in-from-bottom-2 duration-200">
+              <Link
+                href="/settings/profile"
+                className="flex items-center gap-2 p-2 rounded-lg text-sm text-muted-foreground hover:bg-secondary/50 hover:text-foreground transition-colors"
+                onClick={() => setIsUserMenuOpen(false)}
+              >
+                <UserIcon size={16} />
+                <span>Profile</span>
+              </Link>
+              <Link
+                href="/settings"
+                className="flex items-center gap-2 p-2 rounded-lg text-sm text-muted-foreground hover:bg-secondary/50 hover:text-foreground transition-colors"
+                onClick={() => setIsUserMenuOpen(false)}
+              >
+                <Settings size={16} />
+                <span>Settings</span>
+              </Link>
+              <div className="border-t border-border/50 mt-1 pt-1">
+                <button
+                  onClick={() => {
+                    logout();
+                    router.push("/login");
+                  }}
+                  className="w-full flex items-center gap-2 p-2 rounded-lg text-sm text-rose-400 hover:bg-rose-500/10 transition-colors"
+                >
+                  <LogOut size={16} />
+                  <span>Sign Out</span>
+                </button>
+              </div>
+            </div>
           )}
-        >
-          <Settings size={18} />
-          <span>Settings</span>
-        </Link>
+        </div>
       </div>
+
+      <WorkspaceCreateModal
+        isOpen={isCreateModalOpen}
+        onClose={() => setIsCreateModalOpen(false)}
+        onSuccess={invalidateWorkspaces}
+      />
     </aside>
   );
 }

package/src/components/SprintCreateModal.tsx

@@ -0,0 +1,84 @@
+/**
+ * Sprint Create Modal Component
+ *
+ * Modal dialog for creating new sprints.
+ * Simple form for entering sprint name.
+ *
+ * @example
+ * <SprintCreateModal
+ *   isOpen={isOpen}
+ *   onClose={handleClose}
+ *   onCreated={handleCreated}
+ *   isSubmitting={false}
+ * />
+ */
+
+"use client";
+
+import { Target } from "lucide-react";
+import { useState } from "react";
+import { CreateModal } from "@/components/CreateModal";
+import { Input } from "@/components/ui";
+
+interface SprintCreateModalProps {
+  /** Whether modal is open */
+  isOpen: boolean;
+  /** Called to close modal */
+  onClose: () => void;
+  /** Called with sprint name after creation */
+  onCreated: (name: string) => void;
+  /** Whether submission is in progress */
+  isSubmitting?: boolean;
+}
+
+export function SprintCreateModal({
+  isOpen,
+  onClose,
+  onCreated,
+  isSubmitting = false,
+}: SprintCreateModalProps) {
+  const [name, setName] = useState("");
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!name.trim()) return;
+    onCreated(name.trim());
+    setName("");
+  };
+
+  const handleClose = () => {
+    setName("");
+    onClose();
+  };
+
+  return (
+    <CreateModal
+      isOpen={isOpen}
+      title="Create New Sprint"
+      size="sm"
+      fields={[
+        {
+          name: "name",
+          label: "Sprint Name",
+          component: (
+            <Input
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="e.g. Sprint 24"
+              autoFocus
+              className="h-11"
+            />
+          ),
+          required: true,
+          help: "Give your sprint a descriptive name to identify it later.",
+        },
+      ]}
+      onSubmit={handleSubmit}
+      onClose={handleClose}
+      submitText="Create Sprint"
+      icon={<Target size={16} />}
+      isPending={isSubmitting}
+      submitDisabled={!name.trim()}
+    />
+  );
+}