@leanspec/ui 0.2.5 → 0.2.6-dev.20251125015611

package/.next/standalone/packages/ui/src/components/create-project-dialog.tsx

@@ -0,0 +1,139 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { useProject } from '@/contexts/project-context';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { DirectoryPicker } from './directory-picker';
+import { FolderOpen } from 'lucide-react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { toast } from 'sonner';
+
+interface CreateProjectDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export function CreateProjectDialog({ open, onOpenChange }: CreateProjectDialogProps) {
+  const { addProject, switchProject } = useProject();
+  const [path, setPath] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [mode, setMode] = useState<'picker' | 'manual'>('picker');
+  const router = useRouter();
+
+  useEffect(() => {
+    if (open) {
+      setMode('picker');
+      setPath('');
+    }
+  }, [open]);
+
+  const handleAddProject = async (projectPath: string) => {
+    try {
+      setIsLoading(true);
+      const project = await addProject(projectPath);
+      await switchProject(project.id);
+      toast.success('Project added successfully');
+      onOpenChange(false);
+      router.push('/'); // Navigate to dashboard
+    } catch (error) {
+      const message = error instanceof Error ? error.message : 'Failed to add project';
+      toast.error(message);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!path) return;
+    handleAddProject(path);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[600px]">
+        <DialogHeader>
+          <DialogTitle>Add Project</DialogTitle>
+          <DialogDescription>
+            {mode === 'picker' 
+              ? 'Browse and select the project directory.' 
+              : 'Enter the absolute path to your local project directory.'}
+          </DialogDescription>
+        </DialogHeader>
+        
+        {mode === 'picker' ? (
+          <div className="space-y-2">
+            <DirectoryPicker 
+              onSelect={handleAddProject} 
+              onCancel={() => onOpenChange(false)} 
+              initialPath={path}
+              actionLabel={isLoading ? "Adding..." : "Add Project"}
+              isLoading={isLoading}
+            />
+            <div className="flex justify-center">
+              <Button 
+                variant="link" 
+                size="sm" 
+                onClick={() => setMode('manual')}
+                className="text-muted-foreground"
+              >
+                Enter path manually
+              </Button>
+            </div>
+          </div>
+        ) : (
+          <form onSubmit={handleSubmit}>
+            <div className="grid gap-4 py-4">
+              <div className="grid gap-2">
+                <label htmlFor="path" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+                  Project Path
+                </label>
+                <div className="flex gap-2">
+                  <Input
+                    id="path"
+                    value={path}
+                    onChange={(e) => setPath(e.target.value)}
+                    placeholder="/path/to/your/project"
+                    className="flex-1"
+                    disabled={isLoading}
+                  />
+                </div>
+                <p className="text-xs text-muted-foreground">
+                  Select the root directory of your project.
+                </p>
+              </div>
+            </div>
+            <DialogFooter className="flex-col sm:flex-row gap-2">
+              <div className="flex-1 flex justify-start">
+                <Button 
+                  type="button" 
+                  variant="ghost" 
+                  size="sm"
+                  onClick={() => setMode('picker')}
+                >
+                  <FolderOpen className="h-4 w-4 mr-2" />
+                  Browse folders
+                </Button>
+              </div>
+              <Button type="button" variant="outline" onClick={() => onOpenChange(false)} disabled={isLoading}>
+                Cancel
+              </Button>
+              <Button type="submit" disabled={isLoading || !path}>
+                {isLoading ? 'Adding...' : 'Add Project'}
+              </Button>
+            </DialogFooter>
+          </form>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}

package/.next/standalone/packages/ui/src/components/directory-picker.tsx

@@ -0,0 +1,191 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+import { Button } from '@/components/ui/button';
+import { Folder, ChevronUp, Loader2, ArrowLeft, Home, ChevronRight } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface DirectoryItem {
+  name: string;
+  path: string;
+  isDirectory: boolean;
+}
+
+interface DirectoryPickerProps {
+  onSelect: (path: string) => void;
+  onCancel: () => void;
+  initialPath?: string;
+  actionLabel?: string;
+  isLoading?: boolean;
+}
+
+export function DirectoryPicker({ onSelect, onCancel, initialPath, actionLabel = "Select This Folder", isLoading: externalLoading }: DirectoryPickerProps) {
+  const [currentPath, setCurrentPath] = useState(initialPath || '');
+  const [items, setItems] = useState<DirectoryItem[]>([]);
+  const [internalLoading, setInternalLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+
+  const isLoading = externalLoading || internalLoading;
+
+  useEffect(() => {
+    fetchDirectory(currentPath);
+  }, [currentPath]);
+
+  // Auto-scroll breadcrumbs to end when path changes
+  useEffect(() => {
+    if (scrollContainerRef.current) {
+      scrollContainerRef.current.scrollLeft = scrollContainerRef.current.scrollWidth;
+    }
+  }, [currentPath]);
+
+  const fetchDirectory = async (path: string) => {
+    try {
+      setInternalLoading(true);
+      setError(null);
+      const response = await fetch('/api/local-projects/list-directory', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ path }),
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to list directory');
+      }
+
+      const data = await response.json();
+      setItems(data.items);
+      // Update current path to the resolved path from server
+      if (!path) {
+        setCurrentPath(data.path);
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setInternalLoading(false);
+    }
+  };
+
+  const handleNavigate = (path: string) => {
+    setCurrentPath(path);
+  };
+
+  const parentItem = items.find(item => item.name === '..');
+  const displayItems = items.filter(item => item.name !== '..');
+
+  // Parse path segments for breadcrumbs
+  const getPathSegments = (path: string) => {
+    if (!path) return [];
+    // Handle both Unix and Windows separators
+    const separator = path.includes('\\') ? '\\' : '/';
+    const parts = path.split(separator).filter(Boolean);
+    
+    // If path starts with separator (Unix root), add it back
+    const isUnixRoot = path.startsWith('/');
+    
+    return parts.map((part, index) => {
+      let segmentPath = parts.slice(0, index + 1).join(separator);
+      if (isUnixRoot) segmentPath = '/' + segmentPath;
+      // On Windows, the first part (C:) doesn't need a leading separator
+      
+      return { name: part, path: segmentPath };
+    });
+  };
+
+  const segments = getPathSegments(currentPath);
+
+  return (
+    <div className="flex flex-col h-[400px] gap-4 min-w-0">
+      {/* Navigation Bar */}
+      <div className="flex items-center border rounded-md p-1 gap-1 bg-muted/30">
+        <Button 
+          variant="ghost" 
+          size="icon" 
+          className="h-8 w-8 shrink-0"
+          disabled={!parentItem || isLoading}
+          onClick={() => parentItem && handleNavigate(parentItem.path)}
+          title="Go to parent directory"
+        >
+          <ArrowLeft className="h-4 w-4" />
+        </Button>
+
+        <div className="w-px h-5 bg-border mx-1" />
+
+        <div 
+          ref={scrollContainerRef}
+          className="flex-1 overflow-x-auto whitespace-nowrap flex items-center scrollbar-hide px-1 min-w-0"
+        >
+          <button 
+            onClick={() => handleNavigate('/')}
+            className="hover:bg-accent p-1 rounded-sm transition-colors shrink-0"
+            title="Go to root"
+          >
+            <Home className="h-4 w-4 text-muted-foreground" />
+          </button>
+          
+          {segments.map((segment, i) => (
+            <div key={segment.path} className="flex items-center shrink-0">
+              <ChevronRight className="h-3 w-3 text-muted-foreground mx-0.5 shrink-0" />
+              <button 
+                onClick={() => handleNavigate(segment.path)}
+                className={cn(
+                  "px-1.5 py-0.5 rounded-sm transition-colors text-sm hover:bg-accent hover:text-accent-foreground",
+                  i === segments.length - 1 ? "font-medium text-foreground" : "text-muted-foreground"
+                )}
+              >
+                {segment.name}
+              </button>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div className="flex-1 border rounded-md overflow-hidden relative bg-background min-h-0">
+        {isLoading && (
+          <div className="absolute inset-0 bg-background/50 flex items-center justify-center z-10">
+            <Loader2 className="h-6 w-6 animate-spin" />
+          </div>
+        )}
+        
+        {error ? (
+          <div className="p-4 text-destructive text-sm text-center">
+            {error}
+            <Button variant="link" onClick={() => fetchDirectory(currentPath)} className="block mx-auto mt-2">
+              Retry
+            </Button>
+          </div>
+        ) : (
+          <div className="h-full overflow-auto">
+            <div className="p-1">
+              {displayItems.length === 0 && !isLoading ? (
+                <div className="p-4 text-center text-sm text-muted-foreground">
+                  Empty directory
+                </div>
+              ) : (
+                displayItems.map((item) => (
+                  <button
+                    key={item.path}
+                    onClick={() => handleNavigate(item.path)}
+                    className="flex items-center gap-3 w-full px-3 py-2 text-sm rounded-sm hover:bg-accent hover:text-accent-foreground text-left group transition-colors"
+                  >
+                    <Folder className="h-4 w-4 text-blue-500 fill-blue-500/20 group-hover:fill-blue-500/30 transition-colors shrink-0" />
+                    <span className="truncate">{item.name}</span>
+                  </button>
+                ))
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+
+      <div className="flex justify-end gap-2">
+        <Button variant="outline" onClick={onCancel} disabled={isLoading}>
+          Cancel
+        </Button>
+        <Button onClick={() => onSelect(currentPath)} disabled={isLoading || !currentPath}>
+          {actionLabel}
+        </Button>
+      </div>
+    </div>
+  );
+}

package/.next/standalone/packages/ui/src/components/main-sidebar.tsx

@@ -3,6 +3,7 @@
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { Home, FileText, BarChart3, ChevronLeft, ChevronRight, X } from 'lucide-react';
+import { ProjectSwitcher } from '@/components/project-switcher';
 import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
 import * as React from 'react';
@@ -121,6 +122,9 @@ export function MainSidebar() {
 
           {/* Navigation */}
           {mounted && <nav className="flex-1 px-2 py-4 space-y-1">
+            <div className="mb-4">
+              <ProjectSwitcher collapsed={isCollapsed && !mobileOpen} />
+            </div>
             <SidebarLink 
               href="/" 
               icon={Home} 

package/.next/standalone/packages/ui/src/components/project-switcher.tsx

@@ -0,0 +1,139 @@
+/**
+ * Project Switcher Component
+ * Dropdown/expandable project selector for the sidebar
+ */
+
+'use client';
+
+import React, { useState } from 'react';
+import { Check, ChevronsUpDown, Plus, FolderOpen, Star } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from '@/components/ui/command';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
+import { useProject } from '@/contexts/project-context';
+import { CreateProjectDialog } from '@/components/create-project-dialog';
+
+interface ProjectSwitcherProps {
+  collapsed?: boolean;
+  onAddProject?: () => void; // Kept for compatibility, but we'll use internal dialog
+}
+
+export function ProjectSwitcher({ collapsed }: ProjectSwitcherProps) {
+  const {
+    mode,
+    currentProject,
+    projects,
+    switchProject,
+  } = useProject();
+  
+  const [open, setOpen] = useState(false);
+  const [showNewProjectDialog, setShowNewProjectDialog] = useState(false);
+
+  if (mode !== 'multi-project') {
+    return null;
+  }
+
+  const handleProjectSelect = async (projectId: string) => {
+    await switchProject(projectId);
+    setOpen(false);
+  };
+
+  const sortedProjects = [...projects].sort((a, b) => {
+    if (a.favorite === b.favorite) return 0;
+    return a.favorite ? -1 : 1;
+  });
+
+  return (
+    <>
+      <CreateProjectDialog 
+        open={showNewProjectDialog} 
+        onOpenChange={setShowNewProjectDialog} 
+      />
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            role="combobox"
+            aria-expanded={open}
+            className={cn(
+              "w-full justify-between",
+              collapsed ? "h-9 w-9 p-0 justify-center" : "px-3"
+            )}
+          >
+            {collapsed ? (
+              <FolderOpen className="h-4 w-4" />
+            ) : (
+              <>
+                <div className="flex items-center gap-2 truncate">
+                  <FolderOpen className="h-4 w-4 shrink-0 opacity-50" />
+                  <span className="truncate">
+                    {currentProject?.name || "Select project..."}
+                  </span>
+                </div>
+                <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+              </>
+            )}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-[200px] p-0" align="start">
+          <Command>
+            <CommandInput placeholder="Search projects..." />
+            <CommandList>
+              <CommandEmpty>No project found.</CommandEmpty>
+              <CommandGroup heading="Projects">
+                {sortedProjects.map((project) => (
+                  <CommandItem
+                    key={project.id}
+                    onSelect={() => handleProjectSelect(project.id)}
+                    className="text-sm"
+                  >
+                    <div className="flex items-center gap-2 w-full">
+                      <Check
+                        className={cn(
+                          "mr-2 h-4 w-4",
+                          currentProject?.id === project.id
+                            ? "opacity-100"
+                            : "opacity-0"
+                        )}
+                      />
+                      <span className="truncate flex-1">{project.name}</span>
+                      {project.favorite && (
+                        <Star className="h-3 w-3 fill-yellow-500 text-yellow-500" />
+                      )}
+                    </div>
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+              <CommandSeparator />
+              <CommandGroup>
+                <CommandItem
+                  className="cursor-pointer"
+                  onSelect={() => {
+                    setOpen(false);
+                    setShowNewProjectDialog(true);
+                  }}
+                >
+                  <Plus className="mr-2 h-4 w-4" />
+                  Create Project
+                </CommandItem>
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+    </>
+  );
+}

package/.next/standalone/packages/ui/src/components/spec-detail-client.tsx

@@ -18,7 +18,7 @@ import { SpecTimeline } from '@/components/spec-timeline';
 import { StatusBadge } from '@/components/status-badge';
 import { PriorityBadge } from '@/components/priority-badge';
 import { MarkdownLink } from '@/components/markdown-link';
-import { TableOfContents } from '@/components/table-of-contents';
+import { TableOfContents, TableOfContentsSidebar } from '@/components/table-of-contents';
 import { BackToTop } from '@/components/back-to-top';
 import { SpecDependencyGraph } from '@/components/spec-dependency-graph';
 import {
@@ -104,10 +104,10 @@ export function SpecDetailClient({ initialSpec, initialSubSpec }: SpecDetailClie
 
   // Fetch complete dependency graph when dialog opens
   const { data: dependencyGraphData } = useSWR<{
-    current: any;
-    dependsOn: any[];
-    requiredBy: any[];
-    related: any[];
+    current: { specName: string; specNumber?: number };
+    dependsOn: { specName: string; specNumber?: number }[];
+    requiredBy: { specName: string; specNumber?: number }[];
+    related: { specName: string; specNumber?: number }[];
   }>(
     dependenciesDialogOpen ? `/api/specs/${initialSpec.specNumber || initialSpec.id}/dependency-graph` : null,
     fetcher,
@@ -118,7 +118,7 @@ export function SpecDetailClient({ initialSpec, initialSubSpec }: SpecDetailClie
   );
 
   const spec = specData?.spec || initialSpec;
-  const tags = spec.tags || [];
+  const tags = React.useMemo(() => spec.tags || [], [spec.tags]);
   const updatedRelative = spec.updatedAt ? formatRelativeTime(spec.updatedAt) : 'N/A';
   const relationships = spec.relationships;
   
@@ -175,10 +175,45 @@ export function SpecDetailClient({ initialSpec, initialSubSpec }: SpecDetailClie
     router.push(newUrl, { scroll: false });
   };
 
+  const headerRef = React.useRef<HTMLElement>(null);
+
+  // Handle scroll padding for sticky header
+  React.useEffect(() => {
+    const updateScrollPadding = () => {
+      const navbarHeight = 56; // 3.5rem / top-14
+      let offset = navbarHeight;
+
+      // On large screens, the spec header is also sticky
+      if (window.innerWidth >= 1024 && headerRef.current) {
+        offset += headerRef.current.offsetHeight - navbarHeight;
+      }
+
+      document.documentElement.style.scrollPaddingTop = `${offset}px`;
+    };
+
+    // Initial update
+    updateScrollPadding();
+
+    // Update on resize
+    window.addEventListener('resize', updateScrollPadding);
+    
+    // Update when content changes (might affect header height if tags wrap)
+    const observer = new ResizeObserver(updateScrollPadding);
+    if (headerRef.current) {
+      observer.observe(headerRef.current);
+    }
+
+    return () => {
+      window.removeEventListener('resize', updateScrollPadding);
+      observer.disconnect();
+      document.documentElement.style.scrollPaddingTop = '';
+    };
+  }, [spec, tags]); // Re-run if spec metadata changes
+
   return (
     <>
       {/* Compact Header - sticky on desktop, static on mobile */}
-      <header className="lg:sticky lg:top-14 lg:z-20 border-b bg-card">
+      <header ref={headerRef} className="lg:sticky lg:top-14 lg:z-20 border-b bg-card">
         <div className="px-3 sm:px-6 py-3 sm:py-4">
           {/* Line 1: Spec number + H1 Title */}
           <h1 className="text-xl sm:text-2xl font-bold tracking-tight mb-2 sm:mb-3">
@@ -345,28 +380,37 @@ export function SpecDetailClient({ initialSpec, initialSubSpec }: SpecDetailClie
         )}
       </header>
 
-      {/* Main content (full width) */}
-      <main className="px-3 sm:px-6 py-4 sm:py-8">
-        <div className="space-y-6">
-          {isLoading && <div className="text-sm text-muted-foreground">Loading...</div>}
-          {error && <div className="text-sm text-destructive">Error loading spec</div>}
+      {/* Main content with Sidebar */}
+      <div className="flex flex-col xl:flex-row xl:items-start">
+        <main className="flex-1 px-3 sm:px-6 py-4 sm:py-8 min-w-0">
+          <div className="space-y-6">
+            {isLoading && <div className="text-sm text-muted-foreground">Loading...</div>}
+            {error && <div className="text-sm text-destructive">Error loading spec</div>}
 
-          <article className="prose prose-slate dark:prose-invert max-w-none prose-sm sm:prose-base">
-            <ReactMarkdown
-              remarkPlugins={[remarkGfm, remarkStripHtmlComments]}
-              rehypePlugins={[rehypeHighlight, rehypeSlug]}
-              components={{
-                a: (props) => <MarkdownLink {...props} currentSpecNumber={spec.specNumber || undefined} />,
-              }}
-            >
-              {displayContent}
-            </ReactMarkdown>
-          </article>
-        </div>
-      </main>
+            <article className="prose prose-slate dark:prose-invert max-w-none prose-sm sm:prose-base">
+              <ReactMarkdown
+                remarkPlugins={[remarkGfm, remarkStripHtmlComments]}
+                rehypePlugins={[rehypeHighlight, rehypeSlug]}
+                components={{
+                  a: (props) => <MarkdownLink {...props} currentSpecNumber={spec.specNumber || undefined} />,
+                }}
+              >
+                {displayContent}
+              </ReactMarkdown>
+            </article>
+          </div>
+        </main>
+
+        {/* Right Sidebar for TOC (Desktop only) */}
+        <aside className="hidden xl:block w-72 shrink-0 px-6 py-8 sticky top-40 h-[calc(100vh-10rem)] overflow-y-auto scrollbar-auto-hide">
+           <TableOfContentsSidebar content={displayContent} />
+        </aside>
+      </div>
 
-      {/* Floating action buttons */}
-      <TableOfContents content={displayContent} />
+      {/* Floating action buttons (Mobile/Tablet only) */}
+      <div className="xl:hidden">
+        <TableOfContents content={displayContent} />
+      </div>
       <BackToTop />
     </>
   );