appview/pages: split diff without needing page refresh

Signed-off-by: Lewis <[e-mail]>

appview/pages/templates/repo/fragments/diff.html

···
     #filesToggle:not(:checked) ~ div div#resize-files { display: none; }
   </style>
 
-  {{ template "diffTopbar" . }}
-  {{ block "diffLayout" . }} {{ end }}
-  {{ template "fragments/resizable" }}
-  {{ template "activeFileHighlight" }}
-  {{ template "fragments/line-quote-button" }}
+  <div id="diff-area">
+    {{ template "diffTopbar" . }}
+    {{ block "diffLayout" . }} {{ end }}
+    {{ template "fragments/resizable" }}
+    {{ template "activeFileHighlight" }}
+    {{ template "fragments/line-quote-button" }}
+  </div>
 {{ end }}
 
 {{ define "diffTopbar" }}
···
   {{ $id := index . 0 }}
   {{ $target := index . 1 }}
   {{ $direction := index . 2 }}
-  <div id="{{ $id }}" 
+  <div id="{{ $id }}"
     data-resizer="vertical"
     data-target="{{ $target }}"
     data-direction="{{ $direction }}"
···
     </span>
   </label>
   <script>
-    document.addEventListener('DOMContentLoaded', function() {
+    (() => {
       const checkbox = document.getElementById('collapseToggle');
-      const details = document.querySelectorAll('details[id^="file-"]');
+      const diffArea = document.getElementById('diff-area');
 
-      checkbox.addEventListener('change', function() {
-        details.forEach(detail => {
+      checkbox.addEventListener('change', () => {
+        document.querySelectorAll('details[id^="file-"]').forEach(detail => {
           detail.open = checkbox.checked;
         });
       });
 
-      details.forEach(detail => {
-        detail.addEventListener('toggle', function() {
-          const allOpen = Array.from(details).every(d => d.open);
-          const allClosed = Array.from(details).every(d => !d.open);
+      if (window.__collapseToggleHandler) {
+        diffArea.removeEventListener('toggle', window.__collapseToggleHandler, true);
+      }
 
-          if (allOpen) {
-            checkbox.checked = true;
-          } else if (allClosed) {
-            checkbox.checked = false;
-          }
-        });
-      });
-    });
+      const handler = (e) => {
+        if (!e.target.matches('details[id^="file-"]')) return;
+        const details = document.querySelectorAll('details[id^="file-"]');
+        const allOpen = Array.from(details).every(d => d.open);
+        const allClosed = Array.from(details).every(d => !d.open);
+
+        if (allOpen) checkbox.checked = true;
+        else if (allClosed) checkbox.checked = false;
+      };
+
+      window.__collapseToggleHandler = handler;
+      diffArea.addEventListener('toggle', handler, true);
+    })();
   </script>
 {{ end }}
 
 {{ define "activeFileHighlight" }}
   <script>
-    document.addEventListener('DOMContentLoaded', function() {
-      const diffFiles = document.querySelectorAll('details[id^="file-"]');
+    (() => {
+      if (window.__activeFileScrollHandler) {
+        document.removeEventListener('scroll', window.__activeFileScrollHandler);
+      }
+
       const filetreeLinks = document.querySelectorAll('.filetree-link');
-      if (diffFiles.length === 0 || filetreeLinks.length === 0) return;
+      if (filetreeLinks.length === 0) return;
 
       const linkMap = new Map();
       filetreeLinks.forEach(link => {
···
       });
 
       let currentActive = null;
-      function setActive(link) {
+      const 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 updateActiveFile = () => {
+        const diffFiles = document.querySelectorAll('details[id^="file-"]');
+        Array.from(diffFiles).some(file => {
           const rect = file.getBoundingClientRect();
           if (rect.top <= headerHeight && rect.bottom > headerHeight) {
             setActive(linkMap.get(file.id));
-            return;
+            return true;
           }
-        }
-      }
+          return false;
+        });
+      };
 
+      window.__activeFileScrollHandler = updateActiveFile;
       document.addEventListener('scroll', updateActiveFile);
       updateActiveFile();
-    });
+    })();
   </script>
 {{ end }}

appview/pages/templates/repo/fragments/diffOpts.html

···
     {{ $active = "split" }}
   {{ end }}
 
-  {{ $unified := 
-     (dict
-       "Key" "unified"
-       "Value" "unified"
-       "Icon" "square-split-vertical"
-       "Meta" "") }}
-  {{ $split := 
-     (dict
-       "Key" "split"
-       "Value" "split"
-       "Icon" "square-split-horizontal"
-       "Meta" "") }}
-  {{ $values := list $unified $split }}
+  {{ $activeTab := "bg-white dark:bg-gray-700 shadow-sm" }}
+  {{ $inactiveTab := "bg-gray-100 dark:bg-gray-800 shadow-inner" }}
 
-  {{ template "fragments/tabSelector" 
-     (dict
-       "Name" "diff"
-       "Values" $values
-       "Active" $active) }}
+  <div class="flex justify-between divide-x divide-gray-200 dark:divide-gray-700 rounded border border-gray-200 dark:border-gray-700 overflow-hidden"
+       hx-on::before-request="const t=event.target.closest('button'); if(!t||t.classList.contains('shadow-sm'))return event.preventDefault(); this.querySelectorAll('button').forEach(b => { const active=b===t; b.classList.toggle('bg-white',active); b.classList.toggle('dark:bg-gray-700',active); b.classList.toggle('shadow-sm',active); b.classList.toggle('bg-gray-100',!active); b.classList.toggle('dark:bg-gray-800',!active); b.classList.toggle('shadow-inner',!active); })">
+    <button
+       hx-get="?diff=unified"
+       hx-target="#diff-files"
+       hx-select="#diff-files"
+       hx-swap="outerHTML"
+       hx-push-url="true"
+       class="group p-2 whitespace-nowrap flex justify-center items-center gap-2 text-sm w-full hover:no-underline text-center {{ if eq $active "unified" }} {{ $activeTab }} {{ else }} {{ $inactiveTab }} {{ end }}">
+      {{ i "square-split-vertical" "size-4 inline group-[.htmx-request]:hidden" }}
+      {{ i "loader-circle" "size-4 animate-spin hidden group-[.htmx-request]:inline" }}
+      unified
+    </button>
+    <button
+       hx-get="?diff=split"
+       hx-target="#diff-files"
+       hx-select="#diff-files"
+       hx-swap="outerHTML"
+       hx-push-url="true"
+       class="group p-2 whitespace-nowrap flex justify-center items-center gap-2 text-sm w-full hover:no-underline text-center {{ if eq $active "split" }} {{ $activeTab }} {{ else }} {{ $inactiveTab }} {{ end }}">
+      {{ i "square-split-horizontal" "size-4 inline group-[.htmx-request]:hidden" }}
+      {{ i "loader-circle" "size-4 animate-spin hidden group-[.htmx-request]:inline" }}
+      split
+    </button>
+  </div>
 {{ end }}
-