feat: add table of contents for comments and headings

app/[owner]/[repo]/[postNumber]/comment-content.tsx

@@ -2,29 +2,75 @@
 
 import { Collapsible } from "@base-ui/react/collapsible"
 import type { ToolUIPart } from "ai"
-import { type ComponentProps, useEffect, useState } from "react"
+import {
+  type ComponentProps,
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+} from "react"
+import slugify from "slugify"
 import { Streamdown } from "streamdown"
 import type { AgentUIMessage } from "@/agent/types"
 import { ERROR_CODES } from "@/lib/errors"
 import { usePostMetadata } from "./post-metadata-context"
+import { useToc } from "./toc-context"
 
 const LEADING_SLASH_REGEX = /^\//
 
+const CommentNumberContext = createContext<string | null>(null)
+
+function useCommentNumber() {
+  return useContext(CommentNumberContext)
+}
+
 function Heading({
   level,
   children,
   ...props
 }: ComponentProps<"h1"> & { level: 1 | 2 | 3 | 4 | 5 | 6 }) {
   const Tag = `h${level}` as const
   const prefix = "#".repeat(level)
+  const commentNumber = useCommentNumber()
+  const { registerHeading, unregisterHeading } = useToc()
+
+  const text =
+    typeof children === "string"
+      ? children
+      : Array.isArray(children)
+        ? children.filter((c) => typeof c === "string").join("")
+        : ""
+
+  const headingId = commentNumber
+    ? `${commentNumber}-${slugify(text, { lower: true, strict: true })}`
+    : undefined
+
+  useEffect(() => {
+    if (headingId && text) {
+      registerHeading({ id: headingId, text, level })
+      return () => unregisterHeading(headingId)
+    }
+  }, [headingId, text, level, registerHeading, unregisterHeading])
+
   return (
     <Tag
-      className="relative mt-6 mb-2 font-semibold text-dim first:mt-0"
+      className="relative mt-6 mb-2 scroll-mt-12 font-semibold text-dim first:mt-0"
+      data-heading-comment={commentNumber}
+      id={headingId}
       {...props}
     >
-      <span className="right-full mr-1.5 select-none font-mono text-faint sm:absolute">
-        {prefix}
-      </span>
+      {headingId ? (
+        <a
+          className="right-full mr-1.5 select-none font-mono text-faint hover:text-muted sm:absolute"
+          href={`#${headingId}`}
+        >
+          {prefix}
+        </a>
+      ) : (
+        <span className="right-full mr-1.5 select-none font-mono text-faint sm:absolute">
+          {prefix}
+        </span>
+      )}
       {children}
     </Tag>
   )
@@ -456,6 +502,7 @@ function ToolGroup({
 
 type CommentContentProps = {
   content: AgentUIMessage[]
+  commentNumber?: string
   isStreaming?: boolean
   isRetrying?: boolean
   onRetry?: () => void
@@ -547,14 +594,16 @@ function groupParts(content: AgentUIMessage[]): GroupedPart[] {
 
 export function CommentContent({
   content,
+  commentNumber,
   isStreaming = false,
   isRetrying = false,
   onRetry,
 }: CommentContentProps) {
   const grouped = groupParts(content)
 
   return (
-    <div>
+    <CommentNumberContext.Provider value={commentNumber ?? null}>
+      <div>
       {grouped.map((item, groupIdx) => {
         switch (item.type) {
           case "text":
@@ -609,6 +658,7 @@ export function CommentContent({
             return null
         }
       })}
-    </div>
+      </div>
+    </CommentNumberContext.Provider>
   )
 }

app/[owner]/[repo]/[postNumber]/comment-thread.tsx

@@ -132,7 +132,10 @@ function CommentItem({
     comment.streamStatus === "streaming" ? (
       <StreamingContent />
     ) : (
-      <CommentContent content={comment.content as AgentUIMessage[]} />
+      <CommentContent
+        commentNumber={commentNumber}
+        content={comment.content as AgentUIMessage[]}
+      />
     )
 
   const body = (

app/[owner]/[repo]/[postNumber]/comments-toc.tsx

@@ -0,0 +1,95 @@
+"use client"
+
+import { Suspense, useState } from "react"
+import { RelativeTime } from "@/components/relative-time"
+import { UserAvatar } from "@/components/user-avatar"
+import type { AuthorInfo } from "./comment-thread"
+import { useToc } from "./toc-context"
+
+type CommentTocItem = {
+  id: string
+  commentNumber: string
+  author: AuthorInfo
+  createdAt: number
+  isRoot: boolean
+}
+
+type CommentsTocProps = {
+  items: CommentTocItem[]
+}
+
+export function CommentsToc({ items }: CommentsTocProps) {
+  const [isHovered, setIsHovered] = useState(false)
+  const { activeCommentId } = useToc()
+
+  if (items.length === 0) return null
+
+  function scrollToComment(commentNumber: string) {
+    const el = document.getElementById(commentNumber)
+    if (el) {
+      el.scrollIntoView({ behavior: "smooth", block: "start" })
+    }
+  }
+
+  return (
+    <nav
+      className="flex flex-col gap-0.5"
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      {items.map((item) => {
+        const isActive = activeCommentId === item.commentNumber
+
+        if (isHovered) {
+          return (
+            <button
+              className={`group flex items-center gap-2 rounded px-1.5 py-1 text-left transition-colors ${
+                isActive ? "bg-muted/30" : "hover:bg-muted/20"
+              }`}
+              key={item.id}
+              onClick={() => scrollToComment(item.commentNumber)}
+              type="button"
+            >
+              <div className="shrink-0">
+                <UserAvatar
+                  size={18}
+                  src={item.author.image}
+                  username={item.author.username}
+                />
+              </div>
+              <div className="min-w-0 flex-1">
+                <div
+                  className={`truncate text-xs ${isActive ? "font-medium text-bright" : "text-dim group-hover:text-bright"}`}
+                >
+                  {item.author.name}
+                </div>
+                <div className="text-faint text-xs">
+                  <Suspense>
+                    <RelativeTime timestamp={item.createdAt} />
+                  </Suspense>
+                </div>
+              </div>
+            </button>
+          )
+        }
+
+        return (
+          <button
+            className="group flex items-center py-1.5"
+            key={item.id}
+            onClick={() => scrollToComment(item.commentNumber)}
+            type="button"
+          >
+            <div
+              className={`h-px transition-all ${
+                isActive
+                  ? "w-6 bg-bright"
+                  : "w-3 bg-faint group-hover:w-4 group-hover:bg-muted"
+              }`}
+            />
+          </button>
+        )
+      })}
+    </nav>
+  )
+}

app/[owner]/[repo]/[postNumber]/headings-toc.tsx

@@ -0,0 +1,48 @@
+"use client"
+
+import { useToc } from "./toc-context"
+
+export function HeadingsToc() {
+  const { headings, activeHeadingId, activeCommentId } = useToc()
+
+  const commentHeadings = headings.filter((h) =>
+    h.id.startsWith(`${activeCommentId}-`)
+  )
+
+  if (commentHeadings.length === 0) return null
+
+  function scrollToHeading(id: string) {
+    const el = document.getElementById(id)
+    if (el) {
+      el.scrollIntoView({ behavior: "smooth", block: "start" })
+    }
+  }
+
+  return (
+    <nav className="flex flex-col gap-0.5">
+      <span className="mb-2 text-faint text-xs uppercase tracking-wide">
+        On this comment
+      </span>
+      {commentHeadings.map((heading) => {
+        const isActive = activeHeadingId === heading.id
+        const indent = (heading.level - 1) * 12
+
+        return (
+          <button
+            className={`group flex items-center py-0.5 text-left text-sm transition-colors ${
+              isActive
+                ? "font-medium text-bright"
+                : "text-muted hover:text-dim"
+            }`}
+            key={heading.id}
+            onClick={() => scrollToHeading(heading.id)}
+            style={{ paddingLeft: indent }}
+            type="button"
+          >
+            <span className="truncate">{heading.text}</span>
+          </button>
+        )
+      })}
+    </nav>
+  )
+}