From 0ea36025f45c14dc32d1644d483d1db8ed18a223 Mon Sep 17 00:00:00 2001
From: "oppili.bsky.social" <nerdy@peppe.rs>
Date: Wed, 9 Apr 2025 19:00:17 +0000
Subject: [PATCH] appview: add line numbers to diffs

drive-by fixes:
- make the edit icon for repo-descriptions more compact
- do not double-pad rendered blob contents
---
 appview/pages/funcmap.go                      |  4 ++
 appview/pages/templates/fragments/diff.html   | 58 ++++++++++++-------
 .../fragments/editRepoDescription.html        |  4 +-
 .../templates/fragments/repoDescription.html  |  6 +-
 appview/pages/templates/repo/blob.html        |  2 +-
 5 files changed, 47 insertions(+), 27 deletions(-)

diff --git a/appview/pages/funcmap.go b/appview/pages/funcmap.go
index 8d88604..ed2399a 100644
--- a/appview/pages/funcmap.go
+++ b/appview/pages/funcmap.go
@@ -33,6 +33,10 @@ func funcMap() template.FuncMap {
 		"add": func(a, b int) int {
 			return a + b
 		},
+		// the absolute state of go templates
+		"add64": func(a, b int64) int64 {
+			return a + b
+		},
 		"sub": func(a, b int) int {
 			return a - b
 		},
diff --git a/appview/pages/templates/fragments/diff.html b/appview/pages/templates/fragments/diff.html
index 76bd445..0e4fd83 100644
--- a/appview/pages/templates/fragments/diff.html
+++ b/appview/pages/templates/fragments/diff.html
@@ -81,27 +81,43 @@
             This is a binary file and will not be displayed.
             </p>
             {{ else }}
-            <pre class="overflow-x-auto"><div class="overflow-x-auto"><div class="min-w-full inline-block">{{- range .TextFragments -}}<div class="bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 select-none">{{- .Header -}}</div>{{- range .Lines -}}
-                       {{- if eq .Op.String "+" -}}
-                       <div class="bg-green-100 dark:bg-green-800/30 text-green-700 dark:text-green-400 flex min-w-full">
-                         <div class="w-10 flex-shrink-0 select-none p-1 text-center">{{ .Op.String }}</div>
-                         <div class="p-1 whitespace-pre">{{ .Line }}</div>
-                       </div>
-                       {{- end -}}
-                       {{- if eq .Op.String "-" -}}
-                       <div class="bg-red-100 dark:bg-red-800/30 text-red-700 dark:text-red-400 flex min-w-full">
-                         <div class="w-10 flex-shrink-0 select-none p-1 text-center">{{ .Op.String }}</div>
-                         <div class="p-1 whitespace-pre">{{ .Line }}</div>
-                       </div>
-                       {{- end -}}
-                       {{- if eq .Op.String " " -}}
-                       <div class="bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 flex min-w-full">
-                         <div class="w-10 flex-shrink-0 select-none p-1 text-center">{{ .Op.String }}</div>
-                         <div class="p-1 whitespace-pre">{{ .Line }}</div>
-                       </div>
-                       {{- end -}}
-                     {{- end -}}
-                   {{- end -}}</div></div></pre>
+            <pre class="overflow-x-auto"><div class="overflow-x-auto"><div class="min-w-full inline-block">{{- range .TextFragments -}}<div class="bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 select-none text-center">&middot;&middot;&middot;</div>
+             {{- $oldStart := .OldPosition -}}
+             {{- $newStart := .NewPosition -}}
+             {{- $lineNrStyle := "min-w-[3rem] flex-shrink-0 select-none text-right" -}}
+             {{- $lineNrSepStyle1 := "text-gray-400 dark:text-gray-500 bg-white dark:bg-gray-800" -}}
+             {{- $lineNrSepStyle2 := "text-gray-400 dark:text-gray-500 bg-white dark:bg-gray-800 pr-2" -}}
+             {{- range .Lines -}}
+               {{- if eq .Op.String "+" -}}
+                 <div class="bg-green-100 dark:bg-green-800/30 text-green-700 dark:text-green-400 flex min-w-full items-center">
+                   <div class="{{$lineNrStyle}} {{$lineNrSepStyle1}}"><span aria-hidden="true" class="invisible">{{$newStart}}</span></div>
+                   <div class="{{$lineNrStyle}} {{$lineNrSepStyle2}}">{{ $newStart }}</div>
+                   <div class="w-5 flex-shrink-0 select-none text-center">{{ .Op.String }}</div>
+                   <div class="px-2">{{ .Line }}</div>
+                 </div>
+                 {{- $newStart = add64 $newStart 1 -}}
+               {{- end -}}
+               {{- if eq .Op.String "-" -}}
+                 <div class="bg-red-100 dark:bg-red-800/30 text-red-700 dark:text-red-400 flex min-w-full items-center">
+                   <div class="{{$lineNrStyle}} {{$lineNrSepStyle1}}">{{ $oldStart }}</div>
+                   <div class="{{$lineNrStyle}} {{$lineNrSepStyle2}}"><span aria-hidden="true" class="invisible">{{$oldStart}}</span></div>
+                   <div class="w-5 flex-shrink-0 select-none text-center">{{ .Op.String }}</div>
+                   <div class="px-2">{{ .Line }}</div>
+                 </div>
+                 {{- $oldStart = add64 $oldStart 1 -}}
+               {{- end -}}
+               {{- if eq .Op.String " " -}}
+                 <div class="bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 flex min-w-full items-center">
+                   <div class="{{$lineNrStyle}} {{$lineNrSepStyle1}}">{{ $oldStart }}</div>
+                   <div class="{{$lineNrStyle}} {{$lineNrSepStyle2}}">{{ $newStart }}</div>
+                   <div class="w-5 flex-shrink-0 select-none text-center">{{ .Op.String }}</div>
+                   <div class="px-2">{{ .Line }}</div>
+                 </div>
+                 {{- $newStart = add64 $newStart 1 -}}
+                 {{- $oldStart = add64 $oldStart 1 -}}
+               {{- end -}}
+             {{- end -}}
+             {{- end -}}</div></div></pre>
             {{- end -}}
             {{ end }}
           </div>
diff --git a/appview/pages/templates/fragments/editRepoDescription.html b/appview/pages/templates/fragments/editRepoDescription.html
index d0c094b..c931b9c 100644
--- a/appview/pages/templates/fragments/editRepoDescription.html
+++ b/appview/pages/templates/fragments/editRepoDescription.html
@@ -1,10 +1,10 @@
 {{ define "fragments/editRepoDescription" }}
 <form hx-put="/{{ .RepoInfo.FullName }}/description" hx-target="this" hx-swap="outerHTML" class="flex flex-wrap gap-2">
     <input type="text" class="p-1" name="description" value="{{ .RepoInfo.Description }}">
-    <button type="submit" class="btn p-2 flex items-center gap-2 no-underline text-sm">
+    <button type="submit" class="btn p-1 flex items-center gap-2 no-underline text-sm">
       {{ i "check" "w-3 h-3" }} save 
     </button>
-    <button type="button" class="btn p-2 flex items-center gap-2 no-underline text-sm" hx-get="/{{ .RepoInfo.FullName }}/description" >
+    <button type="button" class="btn p-1 flex items-center gap-2 no-underline text-sm" hx-get="/{{ .RepoInfo.FullName }}/description" >
       {{ i "x" "w-3 h-3" }} cancel 
     </button>
 </form>
diff --git a/appview/pages/templates/fragments/repoDescription.html b/appview/pages/templates/fragments/repoDescription.html
index 9f292d0..4a6735f 100644
--- a/appview/pages/templates/fragments/repoDescription.html
+++ b/appview/pages/templates/fragments/repoDescription.html
@@ -1,5 +1,5 @@
 {{ define "fragments/repoDescription" }}
-<span id="repo-description" class="flex flex-wrap items-center gap-2" hx-target="this" hx-swap="outerHTML">
+<span id="repo-description" class="flex flex-wrap items-center gap-2 text-sm" hx-target="this" hx-swap="outerHTML">
     {{ if .RepoInfo.Description }}
         {{ .RepoInfo.Description }}
     {{ else }}
@@ -7,8 +7,8 @@
     {{ end }}
 
     {{ if .RepoInfo.Roles.IsOwner }}
-    <button class="btn p-2 flex items-center gap-2 no-underline text-sm" hx-get="/{{ .RepoInfo.FullName }}/description/edit">
-      {{ i "pencil" "w-3 h-3" }} edit
+    <button class="flex items-center gap-2 no-underline text-sm" hx-get="/{{ .RepoInfo.FullName }}/description/edit">
+      {{ i "pencil" "w-3 h-3" }}
     </button>
     {{ end }}
 </span>
diff --git a/appview/pages/templates/repo/blob.html b/appview/pages/templates/repo/blob.html
index 18a2cdc..d4c7643 100644
--- a/appview/pages/templates/repo/blob.html
+++ b/appview/pages/templates/repo/blob.html
@@ -60,7 +60,7 @@
     {{ else }}
     <div class="overflow-auto relative">
         {{ if .ShowRendered }}
-        <div id="blob-contents" class="prose dark:prose-invert p-6">{{ .RenderedContents }}</div>
+        <div id="blob-contents" class="prose dark:prose-invert">{{ .RenderedContents }}</div>
         {{ else }}
         <div id="blob-contents" class="whitespace-pre peer-target:bg-yellow-200 dark:peer-target:bg-yellow-900">{{ $.Contents | escapeHtml }}</div>
         {{ end }}
-- 
2.51.2