From 3d339179a9f18b468e1fa69f4abe6727622901a4 Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Mon, 29 Jun 2026 21:03:56 +0200
Subject: [PATCH] appview/repo/search: improve ui/ux

- use an `<input>` instead of a `<button>`
- add support for `?q=%s` in `repo/search`
- show empty state message with query examples
- consistent `search-code` icon accross `repo/search` and `repo`
  overview to distinguish from global search

resolves
[TAN-534](https://linear.app/tangled/issue/TAN-534/reposearch-nitpicks-and-reworks)

Signed-off-by: eti <eti@eti.tf>
---
 appview/pages/pages.go                        |  1 +
 .../repo/fragments/searchResults.html         | 17 ++++++++++++
 appview/pages/templates/repo/index.html       | 27 ++++++++++++++-----
 appview/pages/templates/repo/search.html      |  5 ++--
 appview/repo/filesearch.go                    |  3 ++-
 5 files changed, 44 insertions(+), 9 deletions(-)

diff --git a/appview/pages/pages.go b/appview/pages/pages.go
index b0ce4608..c6df6954 100644
--- a/appview/pages/pages.go
+++ b/appview/pages/pages.go
@@ -943,6 +943,7 @@ func (p *Pages) RepoSearchPage(w io.Writer, params RepoSearchParams) error {
 }
 
 type RepoSearchResultsFragmentParams struct {
+	Query    string
 	Results  []SearchResult
 	ErrorMsg string
 }
diff --git a/appview/pages/templates/repo/fragments/searchResults.html b/appview/pages/templates/repo/fragments/searchResults.html
index 755fcabd..b4415b36 100644
--- a/appview/pages/templates/repo/fragments/searchResults.html
+++ b/appview/pages/templates/repo/fragments/searchResults.html
@@ -5,6 +5,8 @@
       {{ i "circle-alert" "size-4" }}
       <span>{{ .ErrorMsg }}</span>
     </div>
+  {{ else if not .Query }}
+    {{ template "searchEmptyState" }}
   {{ else }}
     {{ range .Results }}
       {{ template "resultCard" . }}
@@ -17,6 +19,21 @@
 </div>
 {{ end }}
 
+{{ define "searchEmptyState" }}
+  {{ $code := "px-1 py-0.5 bg-gray-100 dark:bg-gray-700 rounded text-xs font-mono" }}
+  <div class="flex flex-col items-center text-center gap-3 p-12 border border-gray-200 dark:border-gray-700 rounded">
+    <span class="text-gray-400 dark:text-gray-500">{{ i "search-code" "size-8" }}</span>
+    <p class="text-base text-gray-500 dark:text-gray-400">Enter a search term above to find files or code in this repository.</p>
+    <p class="text-sm text-gray-500 dark:text-gray-400 max-w-md">
+      Type any text to match file contents, or narrow your search with
+      <code class="{{ $code }}">lang:go</code>,
+      <code class="{{ $code }}">file:readme</code>,
+      <code class="{{ $code }}">sym:functionName</code>, or
+      <code class="{{ $code }}">case:yes</code>.
+    </p>
+  </div>
+{{ end }}
+
 {{ define "resultCard" }}
   {{ $owner := resolve .Repo.Did }}
   {{ $slug  := .Repo.Slug }}
diff --git a/appview/pages/templates/repo/index.html b/appview/pages/templates/repo/index.html
index 3972dd17..a7ffce47 100644
--- a/appview/pages/templates/repo/index.html
+++ b/appview/pages/templates/repo/index.html
@@ -12,8 +12,27 @@
         {{ if .Languages }}
             {{ block "repoLanguages" . }}{{ end }}
         {{ end }}
-        <div class="flex items-center justify-between pb-5">
+        <div class="flex flex-wrap items-center justify-between gap-3 pb-5">
           {{ block "branchSelector" . }}{{ end }}
+          <form id="search-form" class="relative flex items-center h-[32px] order-last w-full md:order-none md:w-64" method="GET" action="/{{ .RepoInfo.FullName }}/search">
+            <span class="absolute left-2 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none">
+              {{ i "search-code" "w-4 h-4" }}
+            </span>
+            <input
+              id="search-q"
+              class="w-full h-full py-1 pl-8 pr-8 peer"
+              type="search"
+              name="q"
+              placeholder="Find files or code..."
+            >
+            <button
+              type="button"
+              onclick="const i=document.getElementById('search-q');i.value='';i.focus();"
+              class="absolute right-2 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" }}
+            </button>
+          </form>
           <div class="flex items-center gap-3">
             <a href="/{{ .RepoInfo.FullName }}/commits/{{ .Ref | urlquery }}" class="inline-flex md:hidden items-center text-sm gap-1 font-bold">
               {{ i "git-commit-horizontal" "w-4" "h-4" }} {{ scaleFmt .TotalCommits }}
@@ -24,9 +43,6 @@
             <a href="/{{ .RepoInfo.FullName }}/tags" class="inline-flex md:hidden items-center text-sm gap-1 font-bold">
               {{ i "tags" "w-4" "h-4" }} {{ scaleFmt (len .Tags) }}
             </a>
-            <a href="/{{ .RepoInfo.FullName }}/search" class="btn">
-              {{ i "search" "size-4" }}
-            </a>
             {{ template "repo/fragments/cloneDropdown" . }}
           </div>
         </div>
@@ -68,7 +84,7 @@
 {{ end }}
 
 {{ define "branchSelector" }}
-  <div class="flex gap-2 items-center justify-between w-full">
+  <div class="flex gap-2 items-center justify-between flex-1 min-w-0">
     <div class="flex gap-2 items-stretch">
       <select
           onchange="window.location.href = '/{{ .RepoInfo.FullName }}/tree/' + encodeURIComponent(this.value)"
@@ -365,4 +381,3 @@
        {{ template "repo/fragments/readme" . }}
     {{- end -}}
 {{ end }}
-
diff --git a/appview/pages/templates/repo/search.html b/appview/pages/templates/repo/search.html
index e2811064..b4efbe91 100644
--- a/appview/pages/templates/repo/search.html
+++ b/appview/pages/templates/repo/search.html
@@ -16,12 +16,13 @@
       <input
         type="text"
         name="q"
-        value=""
+        value="{{ .FilterQuery }}"
         placeholder="Find files or code"
         hx-get=""
-        hx-trigger="input changed delay:100ms from:input"
+        hx-trigger="{{ if .FilterQuery }}load, {{ end }}input changed delay:100ms from:input"
         hx-target="#repo-files"
         hx-swap="outerHTML"
+        autofocus
         class="font-mono flex-1 py-1 pl-8 pr-2 peer"
       >
     </div>
diff --git a/appview/repo/filesearch.go b/appview/repo/filesearch.go
index 33714a04..b0e9184e 100644
--- a/appview/repo/filesearch.go
+++ b/appview/repo/filesearch.go
@@ -23,7 +23,7 @@ func (rp *Repo) Search(w http.ResponseWriter, r *http.Request) {
 	if err := rp.pages.RepoSearchPage(w, pages.RepoSearchParams{
 		BaseParams:  pages.BaseParamsFromContext(r.Context()),
 		RepoInfo:    rp.repoResolver.GetRepoInfo(r, rp.oauth.GetMultiAccountUser(r)),
-		FilterQuery: "",
+		FilterQuery: r.URL.Query().Get("q"),
 	}); err != nil {
 		rp.logger.Error("failed to render", "err", err)
 	}
@@ -39,6 +39,7 @@ func (rp *Repo) searchResultsFragment(w http.ResponseWriter, r *http.Request) {
 	q := r.URL.Query().Get("q")
 
 	var params pages.RepoSearchResultsFragmentParams
+	params.Query = q
 	defer func() {
 		if err := rp.pages.RepoSearchResultsFragment(w, params); err != nil {
 			l.Error("failed to render", "err", err)
-- 
2.51.2