feat: add debounced search dropdown with quick results

2026-04-06 22:58:40 +02:00
parent da88c286f2
commit 6495bc733a
6 changed files with 226 additions and 5 deletions
--- a/internal/features/anime/handler.go
+++ b/internal/features/anime/handler.go
@@ -1,6 +1,7 @@
 package anime

 import (
+	"encoding/json"
 	"log"
 	"net/http"
 	"strconv"
@@ -124,3 +125,48 @@ func (h *Handler) HandleAPIAnimeRelations(w http.ResponseWriter, r *http.Request
 	relations := h.svc.GetRelations(id)
 	templates.AnimeRelationsList(relations).Render(r.Context(), w)
 }
+
+func (h *Handler) HandleQuickSearch(w http.ResponseWriter, r *http.Request) {
+	query := r.URL.Query().Get("q")
+	if query == "" {
+		w.Header().Set("Content-Type", "application/json")
+		w.WriteHeader(http.StatusOK)
+		json.NewEncoder(w).Encode([]interface{}{})
+		return
+	}
+
+	res, err := h.svc.Search(query, 1)
+	if err != nil {
+		log.Printf("quick search error: %v", err)
+		w.Header().Set("Content-Type", "application/json")
+		w.WriteHeader(http.StatusInternalServerError)
+		return
+	}
+
+	// Limit to 10 results
+	results := res.Animes
+	if len(results) > 10 {
+		results = results[:10]
+	}
+
+	type SearchResult struct {
+		ID    int    `json:"id"`
+		Title string `json:"title"`
+		Type  string `json:"type"`
+		Image string `json:"image"`
+	}
+
+	output := make([]SearchResult, len(results))
+	for i, anime := range results {
+		output[i] = SearchResult{
+			ID:    anime.MalID,
+			Title: anime.DisplayTitle(),
+			Type:  anime.Type,
+			Image: anime.ImageURL(),
+		}
+	}
+
+	w.Header().Set("Content-Type", "application/json")
+	w.WriteHeader(http.StatusOK)
+	json.NewEncoder(w).Encode(output)
+}
--- a/internal/server/routes.go
+++ b/internal/server/routes.go
@@ -36,6 +36,7 @@ func NewRouter(cfg Config) http.Handler {
 	mux.HandleFunc("/", animeHandler.HandleCatalog)
 	mux.HandleFunc("/search", animeHandler.HandleSearch)
 	mux.HandleFunc("/api/search", animeHandler.HandleAPISearch)
+	mux.HandleFunc("/api/search-quick", animeHandler.HandleQuickSearch)
 	mux.HandleFunc("/api/catalog", animeHandler.HandleAPICatalog)
 	mux.HandleFunc("/anime/", animeHandler.HandleAnimeDetails)
 	mux.HandleFunc("/api/anime/", animeHandler.HandleAPIAnimeRelations)
--- a/internal/templates/layout.templ
+++ b/internal/templates/layout.templ
@@ -20,15 +20,20 @@ templ Layout(title string) {
 							<a href="/watchlist">watchlist</a>
 						</div>
 					</div>
-					<form action="/search" method="GET" class="header-search">
-						<input type="text" name="q" class="search-input" placeholder="search anime..." />
-					</form>
+					<div class="header-search-wrapper">
+						<form action="/search" method="GET" class="header-search">
+							<input type="text" id="search-input" name="q" class="search-input" placeholder="search anime..." autocomplete="off" />
+							<div id="search-dropdown" class="search-dropdown"></div>
+						</form>
+					</div>
 				</div>
 			</header>

 			<main>
 				{ children... }
 			</main>
+
+			<script src="/static/js/search.js"></script>
 		</body>
 	</html>
 }
--- a/internal/templates/layout_templ.go
+++ b/internal/templates/layout_templ.go
@@ -42,7 +42,7 @@ func Layout(title string) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "</title><link rel=\"stylesheet\" href=\"/static/css/style.css\"><script src=\"https://unpkg.com/htmx.org@1.9.11\"></script></head><body><header><div class=\"header-top\"><div class=\"header-left\"><a href=\"/\" class=\"logo\">/malago</a><div class=\"nav\"><a href=\"/\">catalog</a> <a href=\"/watchlist\">watchlist</a></div></div><form action=\"/search\" method=\"GET\" class=\"header-search\"><input type=\"text\" name=\"q\" class=\"search-input\" placeholder=\"search anime...\"></form></div></header><main>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "</title><link rel=\"stylesheet\" href=\"/static/css/style.css\"><script src=\"https://unpkg.com/htmx.org@1.9.11\"></script></head><body><header><div class=\"header-top\"><div class=\"header-left\"><a href=\"/\" class=\"logo\">/malago</a><div class=\"nav\"><a href=\"/\">catalog</a> <a href=\"/watchlist\">watchlist</a></div></div><div class=\"header-search-wrapper\"><form action=\"/search\" method=\"GET\" class=\"header-search\"><input type=\"text\" id=\"search-input\" name=\"q\" class=\"search-input\" placeholder=\"search anime...\" autocomplete=\"off\"><div id=\"search-dropdown\" class=\"search-dropdown\"></div></form></div></div></header><main>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -50,7 +50,7 @@ func Layout(title string) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "</main></body></html>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "</main><script src=\"/static/js/search.js\"></script></body></html>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -76,6 +76,11 @@ header {
  text-decoration: underline;
 }

+.header-search-wrapper {
+  margin-left: auto;
+  position: relative;
+}
+
 .header-search {
  margin-left: auto;
 }
@@ -99,6 +104,108 @@ header {
  color: var(--text-muted);
 }

+/* Search Dropdown */
+.search-dropdown {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  width: 320px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-top: none;
+  margin-top: -1px;
+  max-height: 480px;
+  overflow-y: auto;
+  z-index: 1000;
+}
+
+.search-results {
+  display: flex;
+  flex-direction: column;
+}
+
+.search-results-title {
+  padding: 8px 12px;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  border-bottom: 1px solid var(--border);
+}
+
+.search-result-item {
+  display: flex;
+  gap: 10px;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--border);
+  text-decoration: none;
+  color: inherit;
+  transition: background 0.15s;
+}
+
+.search-result-item:hover {
+  background: var(--surface-hover);
+}
+
+.search-result-thumb {
+  width: 40px;
+  height: 60px;
+  object-fit: cover;
+  border: 1px solid var(--border);
+  flex-shrink: 0;
+}
+
+.search-result-no-image {
+  width: 40px;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--surface-hover);
+  border: 1px solid var(--border);
+  font-size: 10px;
+  color: var(--text-muted);
+  flex-shrink: 0;
+}
+
+.search-result-info {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  flex: 1;
+}
+
+.search-result-title {
+  font-size: 12px;
+  color: var(--text);
+  font-weight: 500;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.search-result-type {
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+.search-result-view-all {
+  display: block;
+  padding: 10px 12px;
+  text-align: center;
+  color: var(--link);
+  font-size: 12px;
+  border-top: 1px solid var(--border);
+  text-decoration: none;
+}
+
+.search-result-view-all:hover {
+  background: var(--surface-hover);
+  text-decoration: underline;
+}
+
 /* Main */
 main {
  padding: 16px;
--- a/static/js/search.js
+++ b/static/js/search.js
@@ -0,0 +1,62 @@
+let searchTimeout;
+const searchInput = document.getElementById('search-input');
+const searchDropdown = document.getElementById('search-dropdown');
+
+if (searchInput) {
+  searchInput.addEventListener('input', function(e) {
+    clearTimeout(searchTimeout);
+    const query = e.target.value.trim();
+
+    if (query.length < 2) {
+      searchDropdown.innerHTML = '';
+      return;
+    }
+
+    searchTimeout = setTimeout(() => {
+      fetch('/api/search-quick?q=' + encodeURIComponent(query))
+        .then(res => res.json())
+        .then(results => {
+          if (!results || results.length === 0) {
+            searchDropdown.innerHTML = '';
+            return;
+          }
+
+          let html = '<div class="search-results">';
+          html += '<div class="search-results-title">Anime</div>';
+          results.forEach(r => {
+            html += `
+              <a href="/anime/${r.id}" class="search-result-item">
+                ${r.image ? `<img src="${r.image}" alt="${r.title}" class="search-result-thumb" />` : '<div class="search-result-no-image">no image</div>'}
+                <div class="search-result-info">
+                  <div class="search-result-title">${escapeHtml(r.title)}</div>
+                  <div class="search-result-type">${r.type}</div>
+                </div>
+              </a>
+            `;
+          });
+          html += `<a href="/search?q=${encodeURIComponent(query)}" class="search-result-view-all">View all results for ${escapeHtml(query)}</a>`;
+          html += '</div>';
+          searchDropdown.innerHTML = html;
+        })
+        .catch(err => console.error('Search error:', err));
+    }, 300);
+  });
+
+  searchInput.addEventListener('blur', () => {
+    setTimeout(() => {
+      searchDropdown.innerHTML = '';
+    }, 200);
+  });
+
+  document.addEventListener('click', (e) => {
+    if (!e.target.closest('.header-search-wrapper')) {
+      searchDropdown.innerHTML = '';
+    }
+  });
+}
+
+function escapeHtml(text) {
+  const div = document.createElement('div');
+  div.textContent = text;
+  return div.innerHTML;
+}