From ed4eba608ff0065c470cfa5af348fa513d1884d8 Mon Sep 17 00:00:00 2001
From: oppiliappan <me@oppi.li>
Date: Mon, 10 Nov 2025 07:32:14 +0000
Subject: [PATCH] appview/pages: improve search bar styling in issues and pulls
Change-Id: yoztkkvsvwzmqwwkuwlsoyzozsonumms

Signed-off-by: oppiliappan <me@oppi.li>
---
 appview/pages/templates/layouts/repobase.html |  2 +-
 .../pages/templates/repo/issues/issues.html   | 70 ++++++++++--------
 appview/pages/templates/repo/pulls/pulls.html | 74 ++++++++++---------
 3 files changed, 79 insertions(+), 67 deletions(-)

diff --git a/appview/pages/templates/layouts/repobase.html b/appview/pages/templates/layouts/repobase.html
index 1aa7b822..76b35379 100644
--- a/appview/pages/templates/layouts/repobase.html
+++ b/appview/pages/templates/layouts/repobase.html
@@ -104,7 +104,7 @@
             </div>
         </nav>
         {{ block "repoContentLayout" . }}
-          <section class="bg-white dark:bg-gray-800 p-6 rounded relative w-full mx-auto dark:text-white">
+          <section class="bg-white dark:bg-gray-800 px-6 py-4 rounded relative w-full mx-auto dark:text-white">
             {{ block "repoContent" . }}{{ end }}
           </section>
           {{ block "repoAfter" . }}{{ end }}
diff --git a/appview/pages/templates/repo/issues/issues.html b/appview/pages/templates/repo/issues/issues.html
index 34f11abd..13cf6713 100644
--- a/appview/pages/templates/repo/issues/issues.html
+++ b/appview/pages/templates/repo/issues/issues.html
@@ -8,39 +8,45 @@
 {{ end }}
 
 {{ define "repoContent" }}
-<div class="flex justify-between items-center gap-4">
-  <div class="flex gap-4">
-    <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>
-    <form class="flex gap-4" method="GET">
+    <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 }}">
-        <input class="" type="text" name="q" value="{{ .FilterQuery }}">
-        <button class="btn" type="submit">
-            search
-        </button>
-    </form>
-  </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>
-  </a>
-</div>
-<div class="error" id="issues"></div>
+        <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>
+      <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>
+      </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>
+    <div class="error" id="issues"></div>
 {{ end }}
 
 {{ define "repoAfter" }}
diff --git a/appview/pages/templates/repo/pulls/pulls.html b/appview/pages/templates/repo/pulls/pulls.html
index d506b6a2..854bf571 100644
--- a/appview/pages/templates/repo/pulls/pulls.html
+++ b/appview/pages/templates/repo/pulls/pulls.html
@@ -8,43 +8,49 @@
 {{ end }}
 
 {{ define "repoContent" }}
-    <div class="flex justify-between items-center">
-        <div class="flex gap-4">
-            <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>
-            <form class="flex gap-4" method="GET">
-                <input type="hidden" name="state" value="{{ .FilteringBy.String }}">
-                <input class="" type="text" name="q" value="{{ .FilterQuery }}">
-                <button class="btn" type="submit">
-                    search
-                </button>
-            </form>
+    <div class="flex justify-between items-stretch gap-4">
+      <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>
+      <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>
+      </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="/{{ .RepoInfo.FullName }}/pulls/new"
-            class="btn-create text-sm flex items-center gap-2 no-underline hover:no-underline hover:text-white"
+            href="?state=closed"
+            class="flex items-center gap-2 {{ if .FilteringBy.IsClosed }}font-bold {{ else }}text-gray-500 dark:text-gray-400{{ end }}"
         >
-            {{ i "git-pull-request-create" "w-4 h-4" }}
-            <span>new</span>
+            {{ i "ban" "w-4 h-4" }}
+            <span>{{ .RepoInfo.Stats.PullCount.Closed }} closed</span>
         </a>
     </div>
     <div class="error" id="pulls"></div>
-- 
2.43.0