From 62df7ed6cd15aa9e5d00b8a532a126b33a364532 Mon Sep 17 00:00:00 2001
From: Kyle Isom <kyle@imap.cc>
Date: Tue, 31 Mar 2026 23:59:01 -0700
Subject: [PATCH] Add sticky ToC sidebar to document read view

Builds a table of contents client-side from rendered heading IDs.
Highlights the current section on scroll. Collapses to inline on
narrow screens.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 web/static/style.css    | 69 ++++++++++++++++++++++++++++-
 web/templates/read.html | 97 +++++++++++++++++++++++++++++------------
 2 files changed, 138 insertions(+), 28 deletions(-)

diff --git a/web/static/style.css b/web/static/style.css
index ea979fa..ad79505 100644
--- a/web/static/style.css
+++ b/web/static/style.css
@@ -353,8 +353,75 @@ button:hover, .btn:hover {
 }
 
 /* ===========================
-   Read view
+   Read view — two-column layout
    =========================== */
+.read-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 2rem 2rem 2rem 0;
+}
+.read-layout {
+  display: grid;
+  grid-template-columns: 220px 1fr;
+  gap: 2rem;
+  align-items: start;
+}
+.read-main {
+  max-width: 900px;
+  min-width: 0;
+}
+.read-toc {
+  position: sticky;
+  top: 1rem;
+  max-height: calc(100vh - 2rem);
+  overflow-y: auto;
+  padding: 0.5rem 0;
+  font-size: 0.75rem;
+  line-height: 1.5;
+  border-right: 1px solid var(--border-lt);
+  padding-right: 1rem;
+}
+.read-toc ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.read-toc li {
+  margin-bottom: 0.25rem;
+}
+.read-toc a {
+  color: var(--text-lt);
+  text-decoration: none;
+  display: block;
+  padding: 0.125rem 0;
+  transition: color 0.1s;
+}
+.read-toc a:hover {
+  color: var(--text);
+  text-decoration: none;
+}
+.read-toc a.toc-active {
+  color: var(--accent);
+}
+
+@media (max-width: 900px) {
+  .read-container {
+    padding: 1.5rem 1rem;
+  }
+  .read-layout {
+    grid-template-columns: 1fr;
+  }
+  .read-toc {
+    position: static;
+    max-height: none;
+    border-right: none;
+    border-bottom: 1px solid var(--border-lt);
+    padding-right: 0;
+    padding-bottom: 0.75rem;
+    margin-bottom: 0.5rem;
+  }
+}
+
 .read-header {
   margin-bottom: 1.5rem;
 }
diff --git a/web/templates/read.html b/web/templates/read.html
index 78aacbb..7a62af5 100644
--- a/web/templates/read.html
+++ b/web/templates/read.html
@@ -1,32 +1,75 @@
 {{define "title"}} — {{.Doc.Title}}{{end}}
+{{define "container-class"}}read-container{{end}}
 {{define "content"}}
-<div class="read-header">
-    <h2>{{.Doc.Title}}</h2>
-    <div class="read-meta">
-        <span>Pushed by {{.Doc.PushedBy}}</span>
-        <span>{{.Doc.PushedAt}}</span>
-    </div>
-    <div class="read-actions">
-        {{if .Doc.Read}}
-        <form method="POST" action="/d/{{.Doc.Slug}}/unread" style="display:inline">
-            {{csrfField}}
-            <button type="submit" class="btn-ghost btn btn-sm">Mark unread</button>
-        </form>
-        {{else}}
-        <form method="POST" action="/d/{{.Doc.Slug}}/read" style="display:inline">
-            {{csrfField}}
-            <button type="submit" class="btn-ghost btn btn-sm">Mark read</button>
-        </form>
-        {{end}}
-        <form method="POST" action="/d/{{.Doc.Slug}}/delete" style="display:inline"
-              onsubmit="return confirm('Delete this document?')">
-            {{csrfField}}
-            <button type="submit" class="btn-ghost btn btn-sm btn-danger">Unqueue</button>
-        </form>
-        <a href="/" class="btn-ghost btn btn-sm">Back to queue</a>
+<div class="read-layout">
+    <nav class="read-toc" id="toc" aria-label="Table of contents"></nav>
+    <div class="read-main">
+        <div class="read-header">
+            <h2>{{.Doc.Title}}</h2>
+            <div class="read-meta">
+                <span>Pushed by {{.Doc.PushedBy}}</span>
+                <span>{{.Doc.PushedAt}}</span>
+            </div>
+            <div class="read-actions">
+                {{if .Doc.Read}}
+                <form method="POST" action="/d/{{.Doc.Slug}}/unread" style="display:inline">
+                    {{csrfField}}
+                    <button type="submit" class="btn-ghost btn btn-sm">Mark unread</button>
+                </form>
+                {{else}}
+                <form method="POST" action="/d/{{.Doc.Slug}}/read" style="display:inline">
+                    {{csrfField}}
+                    <button type="submit" class="btn-ghost btn btn-sm">Mark read</button>
+                </form>
+                {{end}}
+                <form method="POST" action="/d/{{.Doc.Slug}}/delete" style="display:inline"
+                      onsubmit="return confirm('Delete this document?')">
+                    {{csrfField}}
+                    <button type="submit" class="btn-ghost btn btn-sm btn-danger">Unqueue</button>
+                </form>
+                <a href="/" class="btn-ghost btn btn-sm">Back to queue</a>
+            </div>
+        </div>
+        <div class="card markdown-body" id="article">
+            {{.HTML}}
+        </div>
     </div>
 </div>
-<div class="card markdown-body">
-    {{.HTML}}
-</div>
+<script>
+(function(){
+    var toc=document.getElementById("toc");
+    var headings=document.querySelectorAll("#article h1, #article h2, #article h3");
+    if(headings.length<2){toc.style.display="none";return;}
+    var ul=document.createElement("ul");
+    var minLevel=6;
+    headings.forEach(function(h){var l=parseInt(h.tagName[1]);if(l<minLevel)minLevel=l;});
+    headings.forEach(function(h){
+        if(!h.id)return;
+        var li=document.createElement("li");
+        var a=document.createElement("a");
+        a.href="#"+h.id;
+        a.textContent=h.textContent;
+        var depth=parseInt(h.tagName[1])-minLevel;
+        li.style.paddingLeft=(depth*0.75)+"rem";
+        li.appendChild(a);
+        ul.appendChild(li);
+    });
+    toc.appendChild(ul);
+    /* highlight current section on scroll */
+    var links=toc.querySelectorAll("a");
+    var ids=[];links.forEach(function(a){ids.push(a.getAttribute("href").slice(1));});
+    function onScroll(){
+        var current="";
+        for(var i=0;i<ids.length;i++){
+            var el=document.getElementById(ids[i]);
+            if(el&&el.getBoundingClientRect().top<=80)current=ids[i];
+        }
+        links.forEach(function(a){
+            a.classList.toggle("toc-active",a.getAttribute("href")==="#"+current);
+        });
+    }
+    window.addEventListener("scroll",onScroll,{passive:true});
+    onScroll();
+})();
+</script>
 {{end}}