ui: implement global search bar and toasts

internal/templates/index.templ

@@ -0,0 +1,55 @@
+package templates
+
+import (
+	"malago/internal/jikan"
+	"fmt"
+	"net/url"
+)
+
+templ Index(q string) {
+	@Layout("malago - search") {
+		<div class="search-box">
+			<form action="/" method="GET" class="search-form">
+				<input type="text" name="q" class="search-input" placeholder="search..." value={ q } autofocus />
+				<button type="submit" class="search-button">search</button>
+			</form>
+		</div>
+
+		if q != "" {
+			<div id="loading" class="htmx-indicator status-text">
+				> fetching from jikan...
+			</div>
+			<div id="results" hx-get={ string(templ.URL("/search?q=" + url.QueryEscape(q))) } hx-trigger="load" hx-indicator="#loading"></div>
+		} else {
+			<div id="results">
+				<div style="text-align: center; color: var(--text-muted); font-size: 12px; margin-top: 32px;">
+					no results yet.
+				</div>
+			</div>
+		}
+	}
+}
+
+templ SearchResultsWrapper(query string, animes []jikan.Anime, nextPage int, hasNext bool) {
+	if len(animes) == 0 {
+		<div style="text-align: center; color: var(--text-muted); font-size: 12px;">no results found.</div>
+	} else {
+		<div class="catalog-grid">
+			@SearchItems(query, animes, nextPage, hasNext)
+		</div>
+	}
+}
+
+templ SearchItems(query string, animes []jikan.Anime, nextPage int, hasNext bool) {
+	for i, anime := range animes {
+		if i == len(animes)-1 && hasNext {
+			<div class="catalog-item" hx-get={ string(templ.URL(fmt.Sprintf("/api/search?q=%s&page=%d", url.QueryEscape(query), nextPage))) } hx-trigger="revealed" hx-swap="afterend">
+				@CatalogItem(anime)
+			</div>
+		} else {
+			<div class="catalog-item">
+				@CatalogItem(anime)
+			</div>
+		}
+	}
+}