From a5afd603fcdd554344d05cd12764ea10a5faa1e0 Mon Sep 17 00:00:00 2001
From: Anirudh Oppiliappan <anirudh@tangled.org>
Date: Sun, 18 Jan 2026 13:43:16 +0200
Subject: [PATCH] appview/pages: improve diff template and show current
 {inter,}diff round

Signed-off-by: Anirudh Oppiliappan <anirudh@tangled.org>
---
 .../pages/templates/repo/fragments/diff.html  | 40 +++++++++++++++++--
 appview/pages/templates/repo/pulls/pull.html  | 18 ++++-----
 2 files changed, 46 insertions(+), 12 deletions(-)

diff --git a/appview/pages/templates/repo/fragments/diff.html b/appview/pages/templates/repo/fragments/diff.html
index 901c01d0..282b81f0 100644
--- a/appview/pages/templates/repo/fragments/diff.html
+++ b/appview/pages/templates/repo/fragments/diff.html
@@ -4,7 +4,7 @@
     #filesToggle:checked ~ div label[for="filesToggle"] .hide-text { display: inline; }
     #filesToggle:not(:checked) ~ div label[for="filesToggle"] .hide-text { display: none; }
     #filesToggle:checked ~ div div#files { width: fit-content; max-width: 15vw; margin-right: 1rem; }
-    #filesToggle:not(:checked) ~ div div#files { width: 0; display: hidden; margin-right: 0; }
+    #filesToggle:not(:checked) ~ div div#files { width: 0; display: none; margin-right: 0; }
   </style>
 
   {{ template "diffTopbar" . }}
@@ -14,12 +14,16 @@
 {{ define "diffTopbar" }}
   {{ $diff := index . 0 }}
   {{ $opts := index . 1 }}
+  {{ $root := "" }}
+  {{ if gt (len .) 2 }}
+    {{ $root = index . 2 }}
+  {{ end }}
 
   {{ block "filesCheckbox" $ }} {{ end }}
   {{ block "subsCheckbox" $ }} {{ end }}
 
   <!-- top bar -->
-  <div class="sticky top-0 z-30 bg-slate-100 dark:bg-gray-900 flex items-center gap-2 col-span-full h-12 p-2">
+  <div class="sticky top-0 z-30 flex items-center gap-2 col-span-full h-12 p-2 {{ if $root }}mt-4{{ end }}">
     <!-- left panel toggle -->
     {{ template "filesToggle" . }}
 
@@ -29,6 +33,36 @@
     {{ template "repo/fragments/diffStatPill" $stat }}
     {{ $count }} changed file{{ if ne $count 1 }}s{{ end }}
 
+    {{ if $root }}
+      {{ if $root.IsInterdiff }}
+        <!-- interdiff indicator -->
+        <div class="flex items-center gap-2 before:content-['|'] before:text-gray-300 dark:before:text-gray-600 before:mr-2">
+          <span class="text-xs text-gray-600 dark:text-gray-400 uppercase tracking-wide">Interdiff</span>
+          <a
+            href="/{{ $root.RepoInfo.FullName }}/pulls/{{ $root.Pull.PullId }}/round/{{ sub $root.ActiveRound 1 }}"
+            class="px-2 py-0.5 bg-white dark:bg-gray-700 rounded font-mono text-xs hover:bg-gray-50 dark:hover:bg-gray-600 border border-gray-300 dark:border-gray-600"
+          >
+            #{{ sub $root.ActiveRound 1 }}
+          </a>
+          <span class="text-gray-400 text-xs">→</span>
+          <a
+            href="/{{ $root.RepoInfo.FullName }}/pulls/{{ $root.Pull.PullId }}/round/{{ $root.ActiveRound }}"
+            class="px-2 py-0.5 bg-white dark:bg-gray-700 rounded font-mono text-xs hover:bg-gray-50 dark:hover:bg-gray-600 border border-gray-300 dark:border-gray-600"
+          >
+            #{{ $root.ActiveRound }}
+          </a>
+        </div>
+      {{ else if ne $root.ActiveRound nil }}
+        <!-- diff round indicator -->
+        <div class="flex items-center gap-2 before:content-['|'] before:text-gray-300 dark:before:text-gray-600 before:mr-2">
+          <span class="text-xs text-gray-600 dark:text-gray-400 uppercase tracking-wide">Diff</span>
+          <span class="px-2 py-0.5 bg-white dark:bg-gray-700 rounded font-mono text-xs border border-gray-300 dark:border-gray-600">
+            <span class="hidden md:inline">round </span>#{{ $root.ActiveRound }}
+          </span>
+        </div>
+      {{ end }}
+    {{ end }}
+
     <!-- spacer -->
     <div class="flex-grow"></div>
 
@@ -137,7 +171,7 @@
 {{ end }}
 
 {{ define "collapseToggle" }}
-  <label 
+  <label
     title="Expand/Collapse diffs"
     for="collapseToggle"
     class="btn font-normal normal-case p-2"
diff --git a/appview/pages/templates/repo/pulls/pull.html b/appview/pages/templates/repo/pulls/pull.html
index 0bc50ef8..f8798fe6 100644
--- a/appview/pages/templates/repo/pulls/pull.html
+++ b/appview/pages/templates/repo/pulls/pull.html
@@ -91,7 +91,7 @@
   <div class="flex col-span-full">
     <!-- left panel -->
     <div id="files" class="w-0 hidden md:block overflow-hidden sticky top-12 max-h-screen overflow-y-auto pb-12">
-      <section class="overflow-x-auto text-sm px-6 py-2 border border-gray-200 dark:border-gray-700 w-full mx-auto min-h-full rounded bg-white dark:bg-gray-800 drop-shadow-sm">
+      <section class="overflow-x-auto text-sm px-6 py-2 border-b border-x border-gray-200 dark:border-gray-700 w-full mx-auto min-h-full rounded-b rounded-t-none bg-white dark:bg-gray-800 drop-shadow-sm">
         {{ template "repo/fragments/fileTree" $diff.FileTree }}
       </section>
     </div>
@@ -118,16 +118,16 @@
   </div>
   <!-- right panel - bottom sheet on mobile, side panel on desktop -->
   <div id="subs" class="fixed bottom-0 left-0 right-0 z-50 w-full md:static md:z-auto md:max-h-screen md:sticky md:top-12 overflow-hidden">
-    <details open id="bottomSheet" class="group rounded-t-2xl md:rounded-t-sm drop-shadow-lg md:drop-shadow-none">
+    <details open id="bottomSheet" class="group rounded-t-2xl md:rounded-t drop-shadow-lg md:drop-shadow-none">
       <summary class="
         flex gap-4 items-center justify-between
-        rounded-t-2xl md:rounded-t-sm cursor-pointer list-none p-4 md:h-12
+        rounded-t-2xl md:rounded-t cursor-pointer list-none p-4 md:h-12
         text-white md:text-black md:dark:text-white
         bg-green-600 dark:bg-green-600
         md:bg-white md:dark:bg-gray-800
         drop-shadow-sm
-        md:border-b md:border-x border-gray-200 dark:border-gray-700">
-        <h2 class="">Review Panel </h2>
+         border-t md:border-x md:border-t-0 border-gray-200 dark:border-gray-700">
+        <h2 class="">Submissions</h2>
         {{ template "subsPanelSummary" $ }}
       </summary>
       <div class="max-h-[85vh] md:max-h-[calc(100vh-3rem-3rem)] w-full flex flex-col-reverse gap-4 overflow-y-auto bg-slate-100 dark:bg-gray-900 md:bg-transparent">
@@ -151,7 +151,7 @@
       </span>
     {{ else }}
       <span>
-        viewing round 
+        viewing round
         <span class="font-mono">#{{ $root.ActiveRound }}</span>
       </span>
       {{ if ne $root.ActiveRound $latest }}
@@ -176,7 +176,7 @@
 {{ define "subsToggle" }}
   <style>
     /* Mobile: full width */
-    #subsToggle:checked ~ div div#subs { 
+    #subsToggle:checked ~ div div#subs {
       width: 100%;
       margin-left: 0;
     }
@@ -186,7 +186,7 @@
 
     /* Desktop: 25vw with left margin */
     @media (min-width: 768px) {
-      #subsToggle:checked ~ div div#subs { 
+      #subsToggle:checked ~ div div#subs {
         width: 25vw;
         margin-left: 1rem;
       }
@@ -229,7 +229,7 @@
 
     {{ if $root.LoggedInUser }}
       {{ template "repo/pulls/fragments/pullActions"
-        (dict 
+        (dict
           "LoggedInUser" $root.LoggedInUser
           "Pull" $root.Pull
           "RepoInfo" $root.RepoInfo
-- 
2.51.2