From 10e5ad240014ccc9a682bc75255dccc1c3b32c85 Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Thu, 7 May 2026 20:50:42 +0200
Subject: [PATCH] appview: improve topbar quick-search ux
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- add x/clear button to desktop and mobile search inputs
- reduce htmx trigger delay 250ms → 10ms
- show "showing N of M" in quick-search footer
- add 150ms fade-out linger on loading indicator

Signed-off-by: eti <eti@eti.tf>
---
 .../templates/layouts/fragments/topbar.html   | 32 ++++++++++++++++---
 .../templates/search/fragments/quick.html     |  4 +--
 2 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/appview/pages/templates/layouts/fragments/topbar.html b/appview/pages/templates/layouts/fragments/topbar.html
index 6d34200b..56581e56 100644
--- a/appview/pages/templates/layouts/fragments/topbar.html
+++ b/appview/pages/templates/layouts/fragments/topbar.html
@@ -56,15 +56,20 @@
       autocomplete="off"
       class="flex-1 border-none bg-transparent p-0 focus:outline-none focus:[box-shadow:none] text-sm text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-600 peer"
       hx-get="/search/quick"
-      hx-trigger="input changed delay:250ms"
+      hx-trigger="input changed delay:10ms"
       hx-target="#topbar-search-results"
       hx-swap="innerHTML"
       hx-indicator="#topbar-search-indicator"
     />
     <kbd class="pointer-events-none flex items-center shrink-0 text-xs border border-gray-200 dark:border-gray-600 rounded border-b-2 px-1 font-sans leading-5 text-gray-400 dark:text-gray-500 peer-focus:hidden peer-[:not(:placeholder-shown)]:hidden">⌘K</kbd>
-    <span id="topbar-search-indicator" class="hidden [&.htmx-request]:block shrink-0">
+    <span id="topbar-search-indicator" class="shrink-0">
       {{ i "loader-circle" "size-4 text-gray-400 animate-spin" }}
     </span>
+    <button
+      type="button"
+      class="shrink-0 hidden peer-[:not(:placeholder-shown)]:block text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+      onclick="const i=document.getElementById('topbar-search-input');i.value='';htmx.trigger(i,'input');i.focus()"
+    >{{ i "x" "size-4" }}</button>
   </div>
   <div id="topbar-search-results" class="absolute right-0 top-full z-50 w-80"></div>
 </div>
@@ -90,14 +95,14 @@
       placeholder="search..."
       autocomplete="off"
       inputmode="search"
-      class="flex-1 min-w-0 border-none bg-transparent p-0 focus:outline-none focus:[box-shadow:none] text-[16px] text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-600"
+      class="flex-1 min-w-0 border-none bg-transparent p-0 focus:outline-none focus:[box-shadow:none] text-[16px] text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-600 peer"
       hx-get="/search/quick/mobile"
-      hx-trigger="input changed delay:250ms"
+      hx-trigger="input changed delay:10ms"
       hx-target="#mobile-search-results"
       hx-swap="innerHTML"
       hx-indicator="#mobile-search-indicator"
     />
-    <span id="mobile-search-indicator" class="hidden [&.htmx-request]:block shrink-0">
+    <span id="mobile-search-indicator" class="shrink-0">
       {{ i "loader-circle" "size-4 text-gray-400 animate-spin" }}
     </span>
     <button type="button" class="shrink-0 p-1 -mr-1 hit-area hit-area-4" data-action="close-mobile-search">
@@ -107,6 +112,23 @@
   <div id="mobile-search-results" class="flex-1 flex flex-col overflow-hidden pb-[env(safe-area-inset-bottom)]"></div>
   <div id="mobile-search-spacer" class="shrink-0 bg-gray-50 dark:bg-gray-800 hidden"></div>
 </div>
+<style>
+  #topbar-search-indicator,
+  #mobile-search-indicator {
+    display: none;
+    opacity: 0;
+    transition-property: opacity, display;
+    transition-duration: 150ms, 150ms;
+    transition-timing-function: ease-out;
+    transition-behavior: allow-discrete;
+  }
+  #topbar-search-indicator.htmx-request,
+  #mobile-search-indicator.htmx-request {
+    display: block;
+    opacity: 1;
+    transition-duration: 0s, 0s;
+  }
+</style>
 {{ end }}
 
 {{ define "profileDropdown" }}
diff --git a/appview/pages/templates/search/fragments/quick.html b/appview/pages/templates/search/fragments/quick.html
index 5a66cb3a..ffe89b14 100644
--- a/appview/pages/templates/search/fragments/quick.html
+++ b/appview/pages/templates/search/fragments/quick.html
@@ -68,8 +68,8 @@
 {{end}}
 
 {{define "search/fragments/quickFooter"}}
-<div data-results-footer class="bg-gray-50 dark:bg-gray-800 px-4 py-2 flex justify-between items-center text-gray-600 dark:text-gray-400 border-t border-gray-100 dark:border-gray-700">
-  <span>{{ .Total }} results</span>
+<div data-results-footer class="bg-gray-50 dark:bg-gray-800 px-4 py-2 flex justify-between items-center text-sm text-gray-600 dark:text-gray-400 border-t border-gray-100 dark:border-gray-700">
+  <span>showing {{ len .Repos }} of {{ .Total }}</span>
   <a href="/search?q={{ urlquery .Query }}"
      class="flex items-center gap-1 hover:text-gray-600 dark:hover:text-gray-300 no-underline hover:no-underline">
     all results {{ i "arrow-right" "size-4" }}
-- 
2.54.0