From dfb61bfe8cfecf5a12c7f78e65e772d465006f48 Mon Sep 17 00:00:00 2001
From: mkelvers <mikkelelvers@outlook.com>
Date: Wed, 8 Apr 2026 18:07:17 +0200
Subject: [PATCH] ui: extract empty state component

---
 internal/shared/ui/empty_state.templ | 10 ++++++++++
 internal/templates/index.templ       | 14 ++++++--------
 internal/templates/watchlist.templ   | 22 ++++++++++------------
 3 files changed, 26 insertions(+), 20 deletions(-)
 create mode 100644 internal/shared/ui/empty_state.templ

diff --git a/internal/shared/ui/empty_state.templ b/internal/shared/ui/empty_state.templ
new file mode 100644
index 0000000..ab0dd4b
--- /dev/null
+++ b/internal/shared/ui/empty_state.templ
@@ -0,0 +1,10 @@
+package ui
+
+templ EmptyState(title string) {
+	<div class="empty-state">
+		<div class="empty-state-title">{ title }</div>
+		<div class="empty-state-text">
+			{ children... }
+		</div>
+	</div>
+}
diff --git a/internal/templates/index.templ b/internal/templates/index.templ
index 5d7e4ad..d24a5dd 100644
--- a/internal/templates/index.templ
+++ b/internal/templates/index.templ
@@ -15,20 +15,18 @@ templ Search(q string) {
 			</div>
 			<div id="results" hx-get={ string(templ.URL("/search?q=" + url.QueryEscape(q))) } hx-trigger="load" hx-indicator="#loading"></div>
 		} else {
-			<div class="empty-state">
-				<div class="empty-state-title">Search for anime</div>
-				<div class="empty-state-text">Use the search bar above to find anime to add to your watchlist.</div>
-			</div>
+			@ui.EmptyState("Search for anime") {
+				Use the search bar above to find anime to add to your watchlist.
+			}
 		}
 	}
 }
 
 templ SearchResultsWrapper(query string, animes []jikan.Anime, nextPage int, hasNext bool) {
 	if len(animes) == 0 {
-		<div class="empty-state">
-			<div class="empty-state-title">No results found.</div>
-			<div class="empty-state-text">Try a different search term.</div>
-		</div>
+		@ui.EmptyState("No results found.") {
+			Try a different search term.
+		}
 	} else {
 		<div class="catalog-grid">
 			@SearchItems(query, animes, nextPage, hasNext)
diff --git a/internal/templates/watchlist.templ b/internal/templates/watchlist.templ
index 76158a1..eb36fc3 100644
--- a/internal/templates/watchlist.templ
+++ b/internal/templates/watchlist.templ
@@ -3,6 +3,7 @@ package templates
 import (
 	"fmt"
 	"mal/internal/database"
+	"mal/internal/shared/ui"
 )
 
 templ Watchlist(entries []database.GetUserWatchListRow, layout string, currentStatus string, sortBy string, sortOrder string) {
@@ -32,18 +33,15 @@ templ Watchlist(entries []database.GetUserWatchListRow, layout string, currentSt
 		</div>
 		@SortFilter(SortFilterOptions{Sort: sortBy, Order: sortOrder, View: layout, Status: currentStatus})
 		if len(entries) == 0 {
-			<div class="empty-state">
-				<div class="empty-state-title">Nothing here yet</div>
-				<div class="empty-state-text">
-					if currentStatus == "all" {
-						Your watchlist is empty. <a href="/">Search for anime</a> to get started.
-					} else if currentStatus == "continuing" {
-						No airing anime with watching or plan to watch status.
-					} else {
-						No anime in this category.
-					}
-				</div>
-			</div>
+			@ui.EmptyState("Nothing here yet") {
+				if currentStatus == "all" {
+					Your watchlist is empty. <a href="/">Search for anime</a> to get started.
+				} else if currentStatus == "continuing" {
+					No airing anime with watching or plan to watch status.
+				} else {
+					No anime in this category.
+				}
+			}
 		} else {
 			if layout == "grid" {
 				<div class="catalog-grid">