From 3bfc0aa39a85472cf779a5e77b08366b2fb886c6 Mon Sep 17 00:00:00 2001
From: Seongmin Lee <git@boltless.me>
Date: Wed, 12 Nov 2025 15:01:46 +0900
Subject: [PATCH] appview/pages: improve search bar UI
Change-Id: nkplmqrwpukqlqqluotquuwovzluyzkv

- use grid to reduce the HTML elements
- move open/closed buttons to left
- move new button to bottom on small screen

Signed-off-by: Seongmin Lee <git@boltless.me>
---
 .../pages/templates/repo/issues/issues.html   | 43 ++++++++-----------
 appview/pages/templates/repo/pulls/pulls.html | 42 ++++++++----------
 2 files changed, 38 insertions(+), 47 deletions(-)

diff --git a/appview/pages/templates/repo/issues/issues.html b/appview/pages/templates/repo/issues/issues.html
index e22d74f9..2cde2981 100644
--- a/appview/pages/templates/repo/issues/issues.html
+++ b/appview/pages/templates/repo/issues/issues.html
@@ -27,35 +27,30 @@
        "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 }}">
-        <div class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none">
-          {{ i "search" "w-4 h-4" }}
-        </div>
-        <input class="flex-1 p-1 pl-10 pr-10 peer" type="text" name="q" value="{{ .FilterQuery }}" placeholder=" ">
-        <a 
-          href="?state={{ if .FilteringByOpen }}open{{ else }}closed{{ end }}"
-          class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hidden peer-[:not(:placeholder-shown)]:block"
-          >
-          {{ i "x" "w-4 h-4" }}
-        </a>
-      </form>
-      <div class="hidden sm:block">
-        {{ template "fragments/tabSelector" (dict "Name" "state" "Values" $values "Active" $active) }}
+  <div class="grid gap-2 grid-cols-[auto_1fr_auto] grid-row-2">
+    <form class="flex relative col-span-3 sm:col-span-1 sm:col-start-2" method="GET">
+      <input type="hidden" name="state" value="{{ if .FilteringByOpen }}open{{ else }}closed{{ end }}">
+      <div class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none">
+        {{ i "search" "w-4 h-4" }}
       </div>
+      <input class="flex-1 p-1 pl-10 pr-10 peer" type="text" name="q" value="{{ .FilterQuery }}" placeholder=" ">
       <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="?state={{ if .FilteringByOpen }}open{{ else }}closed{{ end }}"
+        class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hidden peer-[:not(:placeholder-shown)]:block"
+      >
+        {{ i "x" "w-4 h-4" }}
       </a>
-    </div>
-    <div class="sm:hidden">
+    </form>
+    <div class="sm:row-start-1">
       {{ template "fragments/tabSelector" (dict "Name" "state" "Values" $values "Active" $active) }}
     </div>
+    <a
+      href="/{{ .RepoInfo.FullName }}/issues/new"
+      class="col-start-3 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="error" id="issues"></div>
 {{ end }}
diff --git a/appview/pages/templates/repo/pulls/pulls.html b/appview/pages/templates/repo/pulls/pulls.html
index b12f92ee..e3855595 100644
--- a/appview/pages/templates/repo/pulls/pulls.html
+++ b/appview/pages/templates/repo/pulls/pulls.html
@@ -33,34 +33,30 @@
        "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 "search" "w-4 h-4" }}
-        </div>
-        <input class="flex-1 p-1 pl-10 pr-10 peer" type="text" name="q" value="{{ .FilterQuery }}" placeholder=" ">
-        <a 
-          href="?state={{ .FilteringBy.String }}"
-          class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hidden peer-[:not(:placeholder-shown)]:block"
-          >
-          {{ i "x" "w-4 h-4" }}
-        </a>
-      </form>
-      <div class="hidden sm:block">
-        {{ template "fragments/tabSelector" (dict "Name" "state" "Values" $values "Active" $active) }}
+  <div class="grid gap-2 grid-cols-[auto_1fr_auto] grid-row-2">
+    <form class="flex relative col-span-3 sm:col-span-1 sm:col-start-2" 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 "search" "w-4 h-4" }}
       </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"
+      <input class="flex-1 p-1 pl-10 pr-10 peer" type="text" name="q" value="{{ .FilterQuery }}" placeholder=" ">
+      <a
+        href="?state={{ .FilteringBy.String }}"
+        class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hidden peer-[:not(:placeholder-shown)]:block"
       >
-        {{ i "git-pull-request-create" "w-4 h-4" }}
-        <span>new</span>
+        {{ i "x" "w-4 h-4" }}
       </a>
-    </div>
-    <div class="sm:hidden">
+    </form>
+    <div class="sm:row-start-1">
       {{ template "fragments/tabSelector" (dict "Name" "state" "Values" $values "Active" $active) }}
     </div>
+    <a
+      href="/{{ .RepoInfo.FullName }}/pulls/new"
+      class="col-start-3 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>
+    </a>
   </div>
   <div class="error" id="pulls"></div>
 {{ end }}
-- 
2.43.0