From d0acfc930f3d0ca8f918cdc443d0278dcdc7e0d0 Mon Sep 17 00:00:00 2001
From: Jes Olson <j3s@c3f.net>
Date: Wed, 04 Mar 2026 04:06:55 +0000
Subject: [PATCH] appview: highlight active file in PR filetree on scroll

  When reviewing a pull request with multiple files, the currently visible
  file is now highlighted (bolded) in the filetree sidebar. This makes it
  easier to track your position when scrolling through large diffs and
  lose track of the header of the file you're looking at.

  The highlight updates on scroll and also responds to clicks on filetree
  links.

Signed-off-by: Jes Olson <j3s@c3f.net>
---
 appview/pages/templates/repo/fragments/diff.html | 46 ++++++++++++++++++++++++++++++++++++++++++++++
 appview/pages/templates/repo/fragments/fileTree.html | 2 +-
 2 file(s) changed, 47 insertion(s)(+), 1 deletion(s)(-)

diff --git a/appview/pages/templates/repo/fragments/diff.html b/appview/pages/templates/repo/fragments/diff.html
--- a/appview/pages/templates/repo/fragments/diff.html
+++ b/appview/pages/templates/repo/fragments/diff.html
@@ -11,6 +11,7 @@
   {{ template "diffTopbar" . }}
   {{ block "diffLayout" . }} {{ end }}
   {{ template "fragments/resizable" }}
+  {{ template "activeFileHighlight" }}
 {{ end }}
 
 {{ define "diffTopbar" }}
@@ -226,6 +227,51 @@
           }
         });
       });
+    });
+  </script>
+{{ end }}
+
+{{ define "activeFileHighlight" }}
+  <script>
+    document.addEventListener('DOMContentLoaded', function() {
+      const diffFiles = document.querySelectorAll('details[id^="file-"]');
+      const filetreeLinks = document.querySelectorAll('.filetree-link');
+      if (diffFiles.length === 0 || filetreeLinks.length === 0) return;
+
+      const linkMap = new Map();
+      filetreeLinks.forEach(link => {
+        const path = link.getAttribute('data-path');
+        if (path) linkMap.set('file-' + path, link);
+      });
+
+      let currentActive = null;
+      function setActive(link) {
+        if (link && link !== currentActive) {
+          if (currentActive) currentActive.classList.remove('font-bold');
+          link.classList.add('font-bold');
+          currentActive = link;
+        }
+      }
+
+      filetreeLinks.forEach(link => {
+        link.addEventListener('click', () => setActive(link));
+      });
+
+      const topbar = document.querySelector('.sticky.top-0.z-30');
+      const headerHeight = topbar ? topbar.offsetHeight : 0;
+
+      function updateActiveFile() {
+        for (const file of diffFiles) {
+          const rect = file.getBoundingClientRect();
+          if (rect.top <= headerHeight && rect.bottom > headerHeight) {
+            setActive(linkMap.get(file.id));
+            return;
+          }
+        }
+      }
+
+      document.addEventListener('scroll', updateActiveFile);
+      updateActiveFile();
     });
   </script>
 {{ end }}
diff --git a/appview/pages/templates/repo/fragments/fileTree.html b/appview/pages/templates/repo/fragments/fileTree.html
--- a/appview/pages/templates/repo/fragments/fileTree.html
+++ b/appview/pages/templates/repo/fragments/fileTree.html
@@ -16,7 +16,7 @@
   {{ else if .Name }}
     <div class="tree-file flex items-center gap-2 pt-1">
       {{ i "file" "flex-shrink-0 size-4" }}
-      <a href="#file-{{ .Path }}" class="filename truncate text-black dark:text-white no-underline hover:underline">{{ .Name }}</a>
+      <a href="#file-{{ .Path }}" data-path="{{ .Path }}" class="filetree-link filename truncate text-black dark:text-white no-underline hover:underline">{{ .Name }}</a>
     </div>
   {{ else }}
     {{ range $child := .Children }}

--
tangled.sh