From 68e306c9ab4f277c7e7fda091df5b7c677d00a3c Mon Sep 17 00:00:00 2001
From: Naomi Roberts <mia@naomieow.xyz>
Date: Wed, 10 Sep 2025 22:59:13 +0100
Subject: [PATCH] appview: Support selecting multiple lines in blob
Change-Id: rmumunwruwpnrvqmwzvyxmyrvzsuxuqp

Signed-off-by: Naomi Roberts <mia@naomieow.xyz>
---
 .../templates/fragments/multiline-select.html | 90 +++++++++++++++++++
 appview/pages/templates/repo/blob.html        |  1 +
 appview/pages/templates/strings/string.html   |  5 +-
 input.css                                     |  7 +-
 4 files changed, 96 insertions(+), 7 deletions(-)
 create mode 100644 appview/pages/templates/fragments/multiline-select.html

diff --git a/appview/pages/templates/fragments/multiline-select.html b/appview/pages/templates/fragments/multiline-select.html
new file mode 100644
index 0000000..7c34d48
--- /dev/null
+++ b/appview/pages/templates/fragments/multiline-select.html
@@ -0,0 +1,90 @@
+{{ define "fragments/multiline-select" }}
+  <script>
+    function highlight(scroll = false) {
+      document.querySelectorAll(".hl").forEach(el => {
+        el.classList.remove("hl");
+      });
+
+      const hash = window.location.hash;
+      if (!hash || !hash.startsWith("#L")) {
+        return;
+      }
+
+      const rangeStr = hash.substring(2);
+      const parts = rangeStr.split("-");
+      let startLine, endLine;
+
+      if (parts.length === 2) {
+        startLine = parseInt(parts[0], 10);
+        endLine = parseInt(parts[1], 10);
+      } else {
+        startLine = parseInt(parts[0], 10);
+        endLine = startLine;
+      }
+
+      if (isNaN(startLine) || isNaN(endLine)) {
+        console.log("nan");
+        console.log(startLine);
+        console.log(endLine);
+        return;
+      }
+
+      let target = null;
+
+      for (let i = startLine; i<= endLine; i++) {
+        const idEl = document.getElementById(`L${i}`);
+        if (idEl) {
+          const el = idEl.closest(".line");
+          if (el) {
+            el.classList.add("hl");
+            target = el;
+          }
+        }
+      }
+
+      if (scroll && target) {
+        target.scrollIntoView({
+          behavior: "smooth",
+          block: "center",
+        });
+      }
+    }
+
+    document.addEventListener("DOMContentLoaded", () => {
+      console.log("DOMContentLoaded");
+      highlight(true);
+    });
+    window.addEventListener("hashchange", () => {
+      console.log("hashchange");
+      highlight();
+    });
+    window.addEventListener("popstate", () => {
+      console.log("popstate");
+      highlight();
+    });
+
+    const lineNumbers = document.querySelectorAll('a[href^="#L"');
+    let startLine = null;
+
+    lineNumbers.forEach(el => {
+      el.addEventListener("click", (event) => {
+        event.preventDefault();
+        const currentLine = parseInt(el.href.split("#L")[1]);
+
+        if (event.shiftKey && startLine !== null) {
+          const endLine = currentLine;
+          const min = Math.min(startLine, endLine);
+          const max = Math.max(startLine, endLine);
+          const newHash = `#L${min}-${max}`;
+          history.pushState(null, '', newHash);
+        } else {
+          const newHash = `#L${currentLine}`;
+          history.pushState(null, '', newHash);
+          startLine = currentLine;
+        }
+
+        highlight();
+      });
+    });
+  </script>
+{{ end }}
diff --git a/appview/pages/templates/repo/blob.html b/appview/pages/templates/repo/blob.html
index 89280c3..33a2c52 100644
--- a/appview/pages/templates/repo/blob.html
+++ b/appview/pages/templates/repo/blob.html
@@ -78,4 +78,5 @@
         {{ end }}
     </div>
     {{ end }}
+    {{ template "fragments/multiline-select" }}
 {{ end }}
diff --git a/appview/pages/templates/strings/string.html b/appview/pages/templates/strings/string.html
index 0e8a48e..09b9320 100644
--- a/appview/pages/templates/strings/string.html
+++ b/appview/pages/templates/strings/string.html
@@ -23,7 +23,7 @@
              hx-boost="true"
              href="/strings/{{ .String.Did }}/{{ .String.Rkey }}/edit">
             {{ i "pencil" "size-4" }}
-            <span class="hidden md:inline">edit</span> 
+            <span class="hidden md:inline">edit</span>
             {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
           </a>
           <button
@@ -34,7 +34,7 @@
             hx-confirm="Are you sure you want to delete the string `{{ .String.Filename }}`?"
           >
             {{ i "trash-2" "size-4" }}
-            <span class="hidden md:inline">delete</span> 
+            <span class="hidden md:inline">delete</span>
             {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
           </button>
         </div>
@@ -80,5 +80,6 @@
       <div id="blob-contents" class="whitespace-pre peer-target:bg-yellow-200 dark:peer-target:bg-yellow-900">{{ .String.Contents | escapeHtml }}</div>
       {{ end }}
     </div>
+    {{ template "fragments/multiline-select" }}
   </section>
 {{ end }}
diff --git a/input.css b/input.css
index 50baa0d..25bcef1 100644
--- a/input.css
+++ b/input.css
@@ -228,8 +228,9 @@
 }
 /* LineHighlight */
 .chroma .hl {
-    background-color: #bcc0cc;
+  @apply bg-amber-400/30 dark:bg-amber-500/20;
 }
+
 /* LineNumbersTable */
 .chroma .lnt {
     white-space: pre;
@@ -864,7 +865,3 @@
         text-decoration: underline;
     }
 }
-
-.chroma .line:has(.ln:target) {
-    @apply bg-amber-400/30 dark:bg-amber-500/20;
-}
-- 
2.43.0