From 6fdd37625f33d894d21c21c6ee81164450df7fd4 Mon Sep 17 00:00:00 2001
From: oppiliappan <me@oppi.li>
Date: Wed, 28 Jan 2026 15:17:15 +0000
Subject: [PATCH] appview/pages: add the resizable script to pages that utilize diffs

the pulls page includes an additional resizer to mutate the size of the
submissions panel.

Signed-off-by: oppiliappan <me@oppi.li>
---
 appview/pages/templates/repo/fragments/diff.html | 21 +++++++++++++++++++--
 appview/pages/templates/repo/pulls/pull.html | 27 ++++++++++++++++++++++-----
 2 file(s) changed, 41 insertion(s)(+), 7 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
@@ -3,12 +3,14 @@ <style>
     #filesToggle:checked ~ div label[for="filesToggle"] .show-text { display: none; }
     #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:checked ~ div div#files { width: fit-content; max-width: 15vw; }
     #filesToggle:not(:checked) ~ div div#files { width: 0; display: none; margin-right: 0; }
+    #filesToggle:not(:checked) ~ div div#resize-files { display: none; }
   </style>
 
   {{ template "diffTopbar" . }}
   {{ block "diffLayout" . }} {{ end }}
+  {{ template "fragments/resizable" }}
 {{ end }}
 
 {{ define "diffTopbar" }}
@@ -78,6 +80,19 @@ </div>
 
 {{ end }}
 
+{{ define "resize-grip" }}
+  {{ $id := index . 0 }}
+  {{ $target := index . 1 }}
+  {{ $direction := index . 2 }}
+  <div id="{{ $id }}" 
+    data-resizer="vertical"
+    data-target="{{ $target }}"
+    data-direction="{{ $direction }}"
+    class="resizer-vertical hidden md:flex w-4 sticky top-12 max-h-screen flex-col items-center justify-center group">
+    <div class="w-1 h-16 group-hover:h-24 group-[.resizing]:h-24 transition-all rounded-full bg-gray-400 dark:bg-gray-500 group-hover:bg-gray-500 group-hover:dark:bg-gray-400"></div>
+  </div>
+{{ end }}
+
 {{ define "diffLayout" }}
   {{ $diff := index . 0 }}
   {{ $opts := index . 1 }}
@@ -90,8 +105,10 @@ {{ template "repo/fragments/fileTree" $diff.FileTree }}
       </section>
     </div>
 
+    {{ template "resize-grip" (list "resize-files" "files" "before") }}
+
     <!-- main content -->
-    <div class="flex-1 min-w-0 sticky top-12 pb-12">
+    <div id="diff-files" class="flex-1 min-w-0 sticky top-12 pb-12">
       {{ template "diffFiles" (list $diff $opts) }}
     </div>
 
diff --git a/appview/pages/templates/repo/pulls/pull.html b/appview/pages/templates/repo/pulls/pull.html
--- a/appview/pages/templates/repo/pulls/pull.html
+++ b/appview/pages/templates/repo/pulls/pull.html
@@ -111,6 +111,19 @@ </div>
   {{ end }}
 {{ end }}
 
+{{ define "resize-grip" }}
+  {{ $id := index . 0 }}
+  {{ $target := index . 1 }}
+  {{ $direction := index . 2 }}
+  <div id="{{ $id }}" 
+    data-resizer="vertical"
+    data-target="{{ $target }}"
+    data-direction="{{ $direction }}"
+    class="resizer-vertical hidden md:flex w-4 sticky top-12 max-h-screen flex-col items-center justify-center group">
+    <div class="w-1 h-16 group-hover:h-24 group-[.resizing]:h-24 transition-all rounded-full bg-gray-400 dark:bg-gray-500 group-hover:bg-gray-500 group-hover:dark:bg-gray-400"></div>
+  </div>
+{{ end }}
+
 {{ define "diffLayout" }}
   {{ $diff := index . 0 }}
   {{ $opts := index . 1 }}
@@ -124,10 +137,14 @@ {{ template "repo/fragments/fileTree" $diff.FileTree }}
       </section>
     </div>
 
+    {{ template "resize-grip" (list "resize-files" "files" "before") }}
+
     <!-- main content -->
-    <div class="flex-1 min-w-0 sticky top-12 pb-12">
+    <div id="diff-files" class="flex-1 min-w-0 sticky top-12 pb-12">
       {{ template "diffFiles" (list $diff $opts) }}
     </div>
+
+    {{ template "resize-grip" (list "resize-subs" "subs" "after") }}
 
     <!-- right panel -->
     {{ template "subsPanel" $ }}
@@ -187,7 +204,6 @@ {{ end }}
 
 {{ define "subsToggle" }}
   <style>
-    /* Mobile: full width */
     #subsToggle:checked ~ div div#subs {
       width: 100%;
       margin-left: 0;
@@ -196,17 +212,18 @@ #subsToggle:checked ~ div label[for="subsToggle"] .show-toggle { display: none; }
     #subsToggle:checked ~ div label[for="subsToggle"] .hide-toggle { display: flex; }
     #subsToggle:not(:checked) ~ div label[for="subsToggle"] .hide-toggle { display: none; }
 
-    /* Desktop: 25vw with left margin */
     @media (min-width: 768px) {
       #subsToggle:checked ~ div div#subs {
         width: 25vw;
-        margin-left: 1rem;
+        max-width: 50vw;
       }
-      /* Unchecked state */
       #subsToggle:not(:checked) ~ div div#subs {
         width: 0;
         display: none;
         margin-left: 0;
+      }
+      #subsToggle:not(:checked) ~ div div#resize-subs {
+        display: none;
       }
     }
   </style>

--
tangled.sh