@leanspec/ui 0.2.5-dev.20251119062438 → 0.2.5-dev.20251120022746

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 />
     </>
   );

package/.next/standalone/packages/ui/src/components/table-of-contents.tsx

@@ -57,6 +57,60 @@ function extractHeadings(markdown: string): TOCItem[] {
   return headings;
 }
 
+interface TOCListProps {
+  headings: TOCItem[];
+  onHeadingClick: (id: string) => void;
+}
+
+function TOCList({ headings, onHeadingClick }: TOCListProps) {
+  return (
+    <nav className="space-y-1">
+      {headings.map((heading, index) => (
+        <button
+          key={`${heading.id}-${index}`}
+          onClick={() => onHeadingClick(heading.id)}
+          className={cn(
+            'w-full text-left px-2 py-1.5 text-sm rounded-md hover:bg-muted transition-colors flex items-start gap-2 group text-muted-foreground hover:text-foreground',
+            heading.level === 2 && 'font-medium text-foreground',
+            heading.level === 3 && 'pl-6',
+            heading.level === 4 && 'pl-10',
+            heading.level === 5 && 'pl-14',
+            heading.level === 6 && 'pl-18'
+          )}
+        >
+          <span className="flex-1 truncate">{heading.text}</span>
+        </button>
+      ))}
+    </nav>
+  );
+}
+
+function scrollToHeading(id: string) {
+  const element = document.getElementById(id);
+  if (element) {
+    element.scrollIntoView({ behavior: 'smooth', block: 'start' });
+
+    if (window.history.replaceState) {
+      window.history.replaceState(null, '', `#${id}`);
+    } else {
+      window.location.hash = id;
+    }
+  }
+}
+
+export function TableOfContentsSidebar({ content }: TableOfContentsProps) {
+  const headings = React.useMemo(() => extractHeadings(content), [content]);
+
+  if (headings.length === 0) return null;
+
+  return (
+    <div className="py-2">
+      <h4 className="mb-4 text-sm font-semibold leading-none tracking-tight px-2">On this page</h4>
+      <TOCList headings={headings} onHeadingClick={scrollToHeading} />
+    </div>
+  );
+}
+
 export function TableOfContents({ content }: TableOfContentsProps) {
   const [open, setOpen] = React.useState(false);
   const headings = React.useMemo(() => extractHeadings(content), [content]);
@@ -68,24 +122,7 @@ export function TableOfContents({ content }: TableOfContentsProps) {
     setOpen(false);
     // Small delay to allow dialog to close before scrolling
     setTimeout(() => {
-      const element = document.getElementById(id);
-      if (element) {
-        // Scroll with offset for sticky header (top navbar + spec header)
-        const headerOffset = 180; // Adjust based on your header height
-        const elementPosition = element.getBoundingClientRect().top;
-        const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
-
-        window.scrollTo({
-          top: offsetPosition,
-          behavior: 'smooth'
-        });
-
-        if (window.history.replaceState) {
-          window.history.replaceState(null, '', `#${id}`);
-        } else {
-          window.location.hash = id;
-        }
-      }
+      scrollToHeading(id);
     }, 100);
   };
 
@@ -105,25 +142,7 @@ export function TableOfContents({ content }: TableOfContentsProps) {
         <DialogHeader>
           <DialogTitle>Table of Contents</DialogTitle>
         </DialogHeader>
-        <nav className="space-y-1">
-          {headings.map((heading, index) => (
-            <button
-              key={`${heading.id}-${index}`}
-              onClick={() => handleHeadingClick(heading.id)}
-              className={cn(
-                'w-full text-left px-2 py-1.5 text-sm rounded-md hover:bg-muted transition-colors flex items-start gap-2 group',
-                heading.level === 2 && 'font-medium',
-                heading.level === 3 && 'pl-6',
-                heading.level === 4 && 'pl-10',
-                heading.level === 5 && 'pl-14',
-                heading.level === 6 && 'pl-18'
-              )}
-            >
-              <ChevronRight className="h-4 w-4 mt-0.5 flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity" />
-              <span className="flex-1">{heading.text}</span>
-            </button>
-          ))}
-        </nav>
+        <TOCList headings={headings} onHeadingClick={handleHeadingClick} />
       </DialogContent>
     </Dialog>
   );