chore(search): add navigatable search results

components/pages/index.templ

@@ -1,14 +1,14 @@
 package pages
 
 import "dankmuzikk/components/layouts"
-import "dankmuzikk/components/ui"
+import "dankmuzikk/components/ui/search"
 
 templ Index() {
 	@layouts.Default(main())
 }
 
 templ main() {
 	<main class="w-full h-screen">
-		@ui.SearchResultSugesttions()
+		@search.Search()
 	</main>
 }

components/ui/search/search.templ

@@ -0,0 +1,66 @@
+package search
+
+templ Search() {
+	<div class="">
+		<form
+			class="form-control"
+			hx-get="/api/search-suggession"
+			hx-swap="innerHTML"
+			hx-target="#search-results"
+			hx-trigger="keyup"
+		>
+			<input
+				id="search-input"
+				class="input input-bordered"
+				type="search"
+				name="query"
+				autofocus
+				autocomplete="off"
+			/>
+		</form>
+		<div id="search-results"></div>
+	</div>
+	//
+	<script lang="javascript">
+        const searchInputEl = document.getElementById("search-input");
+        let focusedSuggestionIndex = 0;
+
+        searchInputEl.addEventListener("keydown", (e) => {
+            if (e.key !== "ArrowDown") {
+                return;
+            }
+            moveToSuggestions()
+        });
+
+        function moveToSuggestions() {
+            let searchSuggestionsEl = document.getElementById("search-suggestion-"+focusedSuggestionIndex.toString());
+            // sometimes it needs a second to initialize.
+            if (!searchSuggestionsEl) {
+                searchSuggestionsEl = document.getElementById("search-suggestion-"+focusedSuggestionIndex.toString());
+            }
+            if (!searchSuggestionsEl) {
+                return;
+            }
+            const moveToNextSuggestion = (e) => {
+                const numSuggestions = (document.getElementById("search-suggestions").children ?? []).length
+                if (e.key === "ArrowDown") {
+                    focusedSuggestionIndex = (focusedSuggestionIndex+1) % numSuggestions;
+                    moveToSuggestions()
+                    searchSuggestionsEl.removeEventListener("keydown", moveToNextSuggestion);
+                }
+                if (e.key === "ArrowUp") {
+                    focusedSuggestionIndex--;
+                    if (focusedSuggestionIndex < 0) {
+                        focusedSuggestionIndex = 0;
+                        searchInputEl.focus();
+                        return;
+                    }
+                    moveToSuggestions()
+                    searchSuggestionsEl.removeEventListener("keydown", moveToNextSuggestion);
+                }
+            }
+            searchSuggestionsEl.focus();
+            searchSuggestionsEl.addEventListener("keydown", moveToNextSuggestion);
+        }
+    </script>
+}

components/ui/search/search_suggestion.templ

@@ -0,0 +1,11 @@
+package search
+
+templ SearchSuggestion(suggestion, originalQuery string) {
+	<div>
+		if len(suggestion) <= len(originalQuery) {
+			<span><b>{ suggestion }</b></span>
+		} else {
+			<span><b>{ originalQuery }</b>{ suggestion[len(originalQuery):] }</span>
+		}
+	</div>
+}

components/ui/search/search_suggestions.templ

@@ -0,0 +1,19 @@
+package search
+
+import "fmt"
+
+templ SearchSuggestions(suggestions []string, originalQuery string) {
+	<ul id="search-suggestions" class="grid grid-cols-1 w-full">
+		for i, suggestion := range suggestions {
+			<li class="focus-within:bg-base-300">
+				<a href="https://google.com" class="w-full" id={ fmt.Sprintf("search-suggestion-%d", i) }>
+					if len(suggestion) <= len(originalQuery) {
+						<span><b>{ suggestion }</b></span>
+					} else {
+						<span><b>{ originalQuery }</b>{ suggestion[len(originalQuery):] }</span>
+					}
+				</a>
+			</li>
+		}
+	</ul>
+}

handlers/search_suggestions.go

@@ -1,8 +1,9 @@
 package handlers
 
 import (
+	"context"
+	"dankmuzikk/components/ui/search"
 	"dankmuzikk/services/youtube"
-	"encoding/json"
 	"net/http"
 )
 
@@ -14,6 +15,11 @@ func HandleSearchSugessions(hand *http.ServeMux) {
 			w.WriteHeader(http.StatusBadRequest)
 			return
 		}
-		_ = json.NewEncoder(w).Encode(suggessions)
+
+		err = search.SearchSuggestions(suggessions, q).Render(context.Background(), w)
+		if err != nil {
+			w.WriteHeader(http.StatusInternalServerError)
+			return
+		}
 	})
 }