appview/pages: use tabselectors to toggle issue/pull states

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

appview/pages/templates/fragments/tabSelector.html

···
     {{ $activeTab := "bg-white dark:bg-gray-700 shadow-sm" }}
     {{ $inactiveTab := "bg-gray-100 dark:bg-gray-800 shadow-inner" }}
     {{ range $index, $value := $all }}
-      {{ $isActive := eq $value $active }}
-      <a href="?{{ $name }}={{ $value }}"
-         class="py-2 text-sm w-full block hover:no-underline text-center {{ if $isActive }} {{$activeTab }} {{ else }} {{ $inactiveTab }} {{ end }}">
-       {{ $value }}
+      {{ $isActive := eq $value.Key $active }}
+      <a href="?{{ $name }}={{ $value.Key }}"
+         class="p-2 whitespace-nowrap flex justify-center items-center gap-2 text-sm w-full block hover:no-underline text-center {{ if $isActive }} {{$activeTab }} {{ else }} {{ $inactiveTab }} {{ end }}">
+       {{ if $value.Icon }}
+         {{ i $value.Icon "size-4" }}
+       {{ end }}
+
+       {{ with $value.Meta }}
+         {{ . }}
+       {{ end }}
+
+       {{ $value.Value }}
       </a>
     {{ end }}
   </div>

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

···
     {{ if .Split }}
       {{ $active = "split" }}
     {{ end }}
-    {{ $values := list "unified" "split" }}
-    {{ template "fragments/tabSelector" (dict "Name" "diff" "Values" $values "Active" $active) }}
+
+    {{ $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 }}
+
+    {{ template "fragments/tabSelector" 
+       (dict
+         "Name" "diff"
+         "Values" $values
+         "Active" $active) }}
   </section>
 {{ end }}
 

appview/pages/templates/repo/issues/issues.html

···
 {{ end }}
 
 {{ define "repoContent" }}
+  {{ $active := "closed" }}
+  {{ if .FilteringByOpen }}
+    {{ $active = "open" }}
+  {{ end }}
+
+  {{ $open := 
+     (dict
+       "Key" "open"
+       "Value" "open"
+       "Icon" "circle-dot"
+       "Meta" (string .RepoInfo.Stats.IssueCount.Open)) }}
+  {{ $closed := 
+     (dict
+       "Key" "closed"
+       "Value" "closed"
+       "Icon" "ban"
+       "Meta" (string .RepoInfo.Stats.IssueCount.Closed)) }}
+  {{ $values := list $open $closed }}
+
+  <div class="flex flex-col gap-2">
     <div class="flex justify-between items-stretch gap-4">
       <form class="flex flex-1 relative" method="GET">
         <input type="hidden" name="state" value="{{ if .FilteringByOpen }}open{{ else }}closed{{ end }}">
···
           {{ i "x" "w-4 h-4" }}
         </a>
       </form>
+      <div class="hidden sm:block">
+        {{ template "fragments/tabSelector" (dict "Name" "state" "Values" $values "Active" $active) }}
+      </div>
       <a
-          href="/{{ .RepoInfo.FullName }}/issues/new"
-          class="btn-create text-sm flex items-center justify-center gap-2 no-underline hover:no-underline hover:text-white"
-          >
-          {{ i "circle-plus" "w-4 h-4" }}
-          <span>new</span>
+        href="/{{ .RepoInfo.FullName }}/issues/new"
+        class="btn-create text-sm flex items-center justify-center gap-2 no-underline hover:no-underline hover:text-white"
+        >
+        {{ i "circle-plus" "w-4 h-4" }}
+        <span>new</span>
       </a>
     </div>
-    <div class="mt-2 ml-2 flex gap-4 text-xs">
-      <a
-          href="?state=open"
-          class="flex items-center gap-2 {{ if .FilteringByOpen }}font-bold {{ else }}text-gray-500 dark:text-gray-400{{ end }}"
-          >
-          {{ i "circle-dot" "w-4 h-4" }}
-          <span>{{ .RepoInfo.Stats.IssueCount.Open }} open</span>
-      </a>
-      <a
-          href="?state=closed"
-          class="flex items-center gap-2 {{ if not .FilteringByOpen }}font-bold {{ else }}text-gray-500 dark:text-gray-400{{ end }}"
-          >
-          {{ i "ban" "w-4 h-4" }}
-          <span>{{ .RepoInfo.Stats.IssueCount.Closed }} closed</span>
-      </a>
+    <div class="sm:hidden">
+      {{ template "fragments/tabSelector" (dict "Name" "state" "Values" $values "Active" $active) }}
     </div>
-    <div class="error" id="issues"></div>
+  </div>
+  <div class="error" id="issues"></div>
 {{ end }}
 
 {{ define "repoAfter" }}

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

···
 {{ end }}
 
 {{ define "repoContent" }}
-    <div class="flex justify-between items-stretch gap-4">
+  {{ $active := "closed" }}
+  {{ if .FilteringBy.IsOpen  }}
+    {{ $active = "open" }}
+  {{ else if .FilteringBy.IsMerged  }}
+    {{ $active = "merged" }}
+  {{ end }}
+  {{ $open := 
+     (dict
+       "Key" "open"
+       "Value" "open"
+       "Icon" "git-pull-request"
+       "Meta" (string .RepoInfo.Stats.PullCount.Open)) }}
+  {{ $merged := 
+     (dict
+       "Key" "merged"
+       "Value" "merged"
+       "Icon" "git-merge"
+       "Meta" (string .RepoInfo.Stats.PullCount.Merged)) }}
+  {{ $closed := 
+     (dict
+       "Key" "closed"
+       "Value" "closed"
+       "Icon" "ban"
+       "Meta" (string .RepoInfo.Stats.IssueCount.Closed)) }}
+  {{ $values := list $open $merged $closed }}
+  <div class="flex flex-col gap-2">
+    <div class="flex justify-between items-stretch gap-2">
       <form class="flex flex-1 relative" method="GET">
         <input type="hidden" name="state" value="{{ .FilteringBy.String }}">
         <div class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none">
···
           {{ i "x" "w-4 h-4" }}
         </a>
       </form>
-      <a
-          href="/{{ .RepoInfo.FullName }}/pulls/new"
+      <div class="hidden sm:block">
+        {{ template "fragments/tabSelector" (dict "Name" "state" "Values" $values "Active" $active) }}
+      </div>
+      <a href="/{{ .RepoInfo.FullName }}/pulls/new"
           class="btn-create text-sm flex items-center gap-2 no-underline hover:no-underline hover:text-white"
       >
-          {{ i "git-pull-request-create" "w-4 h-4" }}
-          <span>new</span>
+        {{ i "git-pull-request-create" "w-4 h-4" }}
+        <span>new</span>
       </a>
     </div>
-    <div class="mt-2 ml-2 flex gap-4 text-xs">
-        <a
-            href="?state=open"
-            class="flex items-center gap-2 {{ if .FilteringBy.IsOpen }}font-bold {{ else }}text-gray-500 dark:text-gray-400{{ end }}"
-        >
-            {{ i "git-pull-request" "w-4 h-4" }}
-            <span>{{ .RepoInfo.Stats.PullCount.Open }} open</span>
-        </a>
-        <a
-            href="?state=merged"
-            class="flex items-center gap-2 {{ if .FilteringBy.IsMerged }}font-bold {{ else }}text-gray-500 dark:text-gray-400{{ end }}"
-        >
-            {{ i "git-merge" "w-4 h-4" }}
-            <span>{{ .RepoInfo.Stats.PullCount.Merged }} merged</span>
-        </a>
-        <a
-            href="?state=closed"
-            class="flex items-center gap-2 {{ if .FilteringBy.IsClosed }}font-bold {{ else }}text-gray-500 dark:text-gray-400{{ end }}"
-        >
-            {{ i "ban" "w-4 h-4" }}
-            <span>{{ .RepoInfo.Stats.PullCount.Closed }} closed</span>
-        </a>
+    <div class="sm:hidden">
+      {{ template "fragments/tabSelector" (dict "Name" "state" "Values" $values "Active" $active) }}
     </div>
-    <div class="error" id="pulls"></div>
+  </div>
+  <div class="error" id="pulls"></div>
 {{ end }}
 
 {{ define "repoAfter" }}