appview/pages/templates/repo/pulls: add collapse comments button

Add a "collapse comments" button because the previous and only way to
collapse them, the vertical line, was not always obvious.

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

appview/pages/templates/repo/pulls/pull.html

···
   {{ $id := index . 0 }}
   {{ $target := index . 1 }}
   {{ $direction := index . 2 }}
-  <div id="{{ $id }}" 
+  <div id="{{ $id }}"
     data-resizer="vertical"
     data-target="{{ $target }}"
     data-direction="{{ $direction }}"
···
   {{ $round := $item.RoundNumber }}
   <div class="flex gap-2 items-center justify-between mb-1">
     <span class="inline-flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400 pt-2">
-      {{ $handle := resolve $root.Pull.OwnerDid }} 
+      {{ $handle := resolve $root.Pull.OwnerDid }}
       <a class="text-gray-500 dark:text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" href="/{{ $handle }}">{{ $handle }}</a>
       submitted
       <span class="px-2 py-0.5 text-black dark:text-white bg-gray-100 dark:bg-gray-700 border-gray-300 dark:border-gray-600 rounded font-mono text-xs border">
···
   {{ $root := index . 3 }}
   {{ $round := $item.RoundNumber }}
   {{ $c := len $item.Comments }}
-  <details class="relative ml-10 group/comments" {{ if or (eq $c 0) (eq $root.ActiveRound $round) }}open{{ end }}>
+  <details class="relative ml-10 group/comments group/collapse" {{ if or (eq $c 0) (eq $root.ActiveRound $round) }}open{{ end }}>
     <summary class="cursor-pointer list-none">
       <div class="hidden group-open/comments:block absolute -left-8 top-0 bottom-0 w-16 transition-colors flex items-center justify-center group/border z-4">
-        <div class="absolute left-1/2 -translate-x-1/2 top-0 bottom-0 w-0.5 group-open/comments:bg-gray-200 dark:group-open/comments:bg-gray-700 group-hover/border:bg-gray-400 dark:group-hover/border:bg-gray-500 transition-colors"> </div>
+        <div class="absolute left-1/2 -translate-x-1/2 top-0 bottom-0 w-0.5 group-open/comments:bg-gray-200 dark:group-open/comments:bg-gray-700 group-hover/border:bg-gray-400 dark:group-hover/border:bg-gray-500 group-hover/collapse:bg-gray-400 dark:group-hover/collapse:bg-gray-500 transition-colors"> </div>
       </div>
       <div class="group-open/comments:hidden block relative group/summary py-4">
         <div class="absolute -left-8 top-0 bottom-0 w-16 transition-colors flex items-center justify-center z-4">
···
         {{ template "submissionComment" . }}
       {{ end }}
     </div>
+    {{ if gt $c 0}}
+      <button class="flex items-center gap-2 -ml-2 relative cursor-pointer text-sm text-gray-500 dark:text-gray-400 group-hover/collapse:text-gray-600 dark:group-hover/collapse:text-gray-300 bg-gray-50 mt-4 pb-4 transition-colors" hx-on:click="this.closest('details').open = false">
+        {{ i "circle-chevron-up" "size-4 z-5" }} collapse comment{{ if ne $c 1 }}s{{ end }}
+      </button>
+    {{ end }}
 
     <div class="relative -ml-10">
       {{ if eq $lastIdx $item.RoundNumber }}