@leanspec/ui 0.2.3 → 0.2.4

package/dist/standalone/packages/web/src/components/spec-sidebar.tsx

@@ -0,0 +1,127 @@
+"use client"
+
+import * as React from "react"
+import Link from "next/link"
+import { FileText, Search, ChevronLeft, ChevronRight } from "lucide-react"
+import { Input } from "@/components/ui/input"
+import { Button } from "@/components/ui/button"
+import { StatusBadge } from "@/components/status-badge"
+import { cn } from "@/lib/utils"
+
+interface Spec {
+  id: string
+  specNumber: number | null
+  title: string | null
+  specName: string
+  status: string | null
+  priority: string | null
+}
+
+interface SpecSidebarProps {
+  specs: Spec[]
+  currentSpecId: string
+}
+
+export function SpecSidebar({ specs, currentSpecId }: SpecSidebarProps) {
+  const [collapsed, setCollapsed] = React.useState(false)
+  const [searchQuery, setSearchQuery] = React.useState("")
+
+  const filteredSpecs = React.useMemo(() => {
+    if (!searchQuery) return specs
+    const query = searchQuery.toLowerCase()
+    return specs.filter(
+      (spec) =>
+        spec.title?.toLowerCase().includes(query) ||
+        spec.specName.toLowerCase().includes(query) ||
+        spec.specNumber?.toString().includes(query)
+    )
+  }, [specs, searchQuery])
+
+  if (collapsed) {
+    return (
+      <div className="sticky top-14 h-[calc(100vh-3.5rem)] w-12 border-r bg-background flex flex-col items-center py-4">
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={() => setCollapsed(false)}
+          className="h-8 w-8 p-0"
+        >
+          <ChevronRight className="h-4 w-4" />
+          <span className="sr-only">Expand sidebar</span>
+        </Button>
+      </div>
+    )
+  }
+
+  return (
+    <aside className="sticky top-14 h-[calc(100vh-3.5rem)] w-64 border-r bg-background flex flex-col">
+      <div className="p-4 border-b flex items-center justify-between">
+        <h2 className="font-semibold text-sm">All Specs</h2>
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={() => setCollapsed(true)}
+          className="h-8 w-8 p-0"
+        >
+          <ChevronLeft className="h-4 w-4" />
+          <span className="sr-only">Collapse sidebar</span>
+        </Button>
+      </div>
+
+      <div className="p-4 border-b">
+        <div className="relative">
+          <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+          <Input
+            placeholder="Search specs..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="pl-8 h-9"
+          />
+        </div>
+      </div>
+
+      <div className="flex-1 overflow-y-auto">
+        <div className="p-2">
+          {filteredSpecs.length === 0 ? (
+            <div className="text-center py-8 text-sm text-muted-foreground">
+              No specs found
+            </div>
+          ) : (
+            filteredSpecs.map((spec) => {
+              const isActive = spec.id === currentSpecId
+              const displayTitle = spec.title || spec.specName
+              
+              return (
+                <Link
+                  key={spec.id}
+                  href={`/specs/${spec.id}`}
+                  className={cn(
+                    "block p-2 rounded-md text-sm transition-colors mb-1",
+                    isActive
+                      ? "bg-accent text-accent-foreground font-medium"
+                      : "hover:bg-accent/50"
+                  )}
+                >
+                  <div className="flex items-start gap-2">
+                    <FileText className="h-4 w-4 mt-0.5 shrink-0" />
+                    <div className="flex-1 min-w-0">
+                      <div className="font-medium truncate">
+                        {spec.specNumber && `#${spec.specNumber} `}
+                        {displayTitle}
+                      </div>
+                      {spec.status && (
+                        <div className="mt-1">
+                          <StatusBadge status={spec.status} />
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </Link>
+              )
+            })
+          )}
+        </div>
+      </div>
+    </aside>
+  )
+}

package/dist/standalone/packages/web/src/components/spec-timeline.tsx

@@ -0,0 +1,186 @@
+/**
+ * Timeline component to visualize spec evolution (vertical layout)
+ */
+
+import { Clock, PlayCircle, CheckCircle2, Archive, Circle } from 'lucide-react';
+import { formatRelativeTime, formatDuration } from '@/lib/date-utils';
+import { cn } from '@/lib/utils';
+
+interface TimelineEvent {
+  label: string;
+  date: Date | string | number | null | undefined;
+  isActive?: boolean;
+  isFuture?: boolean;
+  icon?: typeof Clock | typeof PlayCircle | typeof CheckCircle2 | typeof Archive | typeof Circle;
+  color?: string;
+}
+
+interface SpecTimelineProps {
+  createdAt: Date | string | number | null | undefined;
+  updatedAt: Date | string | number | null | undefined;
+  completedAt?: Date | string | number | null | undefined;
+  status: string;
+  className?: string;
+}
+
+export function SpecTimeline({ 
+  createdAt, 
+  updatedAt, 
+  completedAt,
+  status,
+  className 
+}: SpecTimelineProps) {
+  const events: TimelineEvent[] = [];
+
+  // Always include created
+  if (createdAt) {
+    events.push({
+      label: 'Created',
+      date: createdAt,
+      isActive: true,
+      isFuture: false,
+      icon: Clock,
+      color: 'text-blue-600',
+    });
+  }
+
+  // Add in-progress
+  if (status === 'in-progress' || status === 'complete' || status === 'archived') {
+    events.push({
+      label: 'In Progress',
+      date: updatedAt || createdAt,
+      isActive: true,
+      isFuture: false,
+      icon: PlayCircle,
+      color: 'text-orange-600',
+    });
+  } else {
+    events.push({
+      label: 'In Progress',
+      date: null,
+      isActive: false,
+      isFuture: true,
+      icon: Circle,
+      color: 'text-muted-foreground',
+    });
+  }
+
+  // Add completed
+  if (status === 'complete' || status === 'archived') {
+    events.push({
+      label: 'Complete',
+      date: completedAt || updatedAt,
+      isActive: true,
+      isFuture: false,
+      icon: CheckCircle2,
+      color: 'text-green-600',
+    });
+  } else {
+    events.push({
+      label: 'Complete',
+      date: null,
+      isActive: false,
+      isFuture: true,
+      icon: Circle,
+      color: 'text-muted-foreground',
+    });
+  }
+
+  // Add archived if status is archived
+  if (status === 'archived') {
+    events.push({
+      label: 'Archived',
+      date: updatedAt,
+      isActive: true,
+      isFuture: false,
+      icon: Archive,
+      color: 'text-gray-600',
+    });
+  }
+
+  if (events.length === 0) return null;
+
+  return (
+    <div className={cn('flex items-start gap-2', className)}>
+      {events.map((event, i) => {
+        const Icon = event.icon;
+        const isLast = i === events.length - 1;
+        const nextEvent = !isLast ? events[i + 1] : null;
+        const duration = event.date && nextEvent?.date && !nextEvent.isFuture
+          ? formatDuration(event.date, nextEvent.date)
+          : '';
+        
+        return (
+          <div key={i} className="flex items-center gap-2 flex-1">
+            {/* Event content */}
+            <div className="flex flex-col items-center gap-1 min-w-0">
+              {/* Icon */}
+              <div
+                className={cn(
+                  "w-8 h-8 rounded-full border-2 bg-background flex items-center justify-center shrink-0",
+                  event.isActive && !event.isFuture
+                    ? "border-primary"
+                    : "border-muted-foreground/40"
+                )}
+              >
+                {Icon && (
+                  <Icon 
+                    className={cn(
+                      "h-4 w-4",
+                      event.isActive && !event.isFuture ? "text-primary" : "text-muted-foreground/60"
+                    )} 
+                  />
+                )}
+              </div>
+              
+              {/* Label */}
+              <div
+                className={cn(
+                  "text-xs font-medium text-center whitespace-nowrap",
+                  event.isActive && !event.isFuture ? "text-foreground" : "text-muted-foreground"
+                )}
+              >
+                {event.label}
+              </div>
+              
+              {/* Date row - reserve space even when pending */}
+              <div className="text-[10px] text-center min-h-[14px]">
+                {event.date && !event.isFuture && (
+                  <span className="text-muted-foreground">{formatRelativeTime(event.date)}</span>
+                )}
+                {!event.date && event.isFuture && (
+                  <span className="text-muted-foreground/70">Awaiting start</span>
+                )}
+                {event.date && event.isFuture && (
+                  <span className="text-muted-foreground/70">Queued</span>
+                )}
+                {!event.date && !event.isFuture && (
+                  <span className="text-muted-foreground/60">Pending update</span>
+                )}
+              </div>
+            </div>
+            
+            {/* Connecting line with duration */}
+            {!isLast && (
+              <div className="flex flex-col items-center flex-1 min-w-4 gap-0.5">
+                <div 
+                  className={cn(
+                    "h-0.5 w-full",
+                    event.isActive && !event.isFuture 
+                      ? "bg-primary" 
+                      : "bg-muted-foreground/40"
+                  )}
+                />
+                {duration && (
+                  <div className="text-[10px] text-muted-foreground font-medium whitespace-nowrap">
+                    {duration}
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}