From d0569d5fde27f2cd2cbb6c58d3d84488c89b8e37 Mon Sep 17 00:00:00 2001
From: mkelvers <mikkelelvers@outlook.com>
Date: Mon, 20 Apr 2026 16:02:51 +0200
Subject: [PATCH] feat(components): extract watchlist dropdown component

---
 web/components/watchlist/dropdown.templ | 63 +++++++++++++++++++++++++
 1 file changed, 63 insertions(+)
 create mode 100644 web/components/watchlist/dropdown.templ

diff --git a/web/components/watchlist/dropdown.templ b/web/components/watchlist/dropdown.templ
new file mode 100644
index 0000000..78b97d1
--- /dev/null
+++ b/web/components/watchlist/dropdown.templ
@@ -0,0 +1,63 @@
+package watchlist
+
+import "fmt"
+
+templ WatchlistDropdown(animeID int, animeTitle string, animeTitleEnglish string, animeTitleJapanese string, animeImage string, currentStatus string, airing bool) {
+	<div class="relative inline-block" id="watchlist-dropdown">
+		<button class="inline-flex h-8 cursor-pointer items-center gap-2 bg-(--panel-soft) px-2 text-xs text-(--text)" onclick="toggleDropdown()" data-dropdown-trigger>
+			if currentStatus != "" {
+				{ formatStatus(currentStatus) }
+			} else {
+				Add to watchlist
+			}
+			<span class="text-xs">▾</span>
+		</button>
+		<div class="invisible absolute left-0 top-full mt-0.5 z-50 min-w-52 bg-(--panel) opacity-0 transition-opacity duration-150" data-dropdown-menu data-dropdown-open-classes="visible opacity-100" data-dropdown-closed-classes="invisible opacity-0">
+			@StatusOption(animeID, animeTitle, animeTitleEnglish, animeTitleJapanese, animeImage, "watching", currentStatus, airing)
+			@StatusOption(animeID, animeTitle, animeTitleEnglish, animeTitleJapanese, animeImage, "completed", currentStatus, airing)
+			@StatusOption(animeID, animeTitle, animeTitleEnglish, animeTitleJapanese, animeImage, "on_hold", currentStatus, airing)
+			@StatusOption(animeID, animeTitle, animeTitleEnglish, animeTitleJapanese, animeImage, "dropped", currentStatus, airing)
+			@StatusOption(animeID, animeTitle, animeTitleEnglish, animeTitleJapanese, animeImage, "plan_to_watch", currentStatus, airing)
+			if currentStatus != "" {
+				<button
+					class="flex w-full cursor-pointer items-center justify-between bg-transparent px-2.5 py-2 text-left text-xs text-(--text-muted) hover:bg-(--panel-soft) hover:text-(--danger)"
+					hx-delete={ string(templ.URL(fmt.Sprintf("/api/watchlist/%d", animeID))) }
+					hx-target="#watchlist-dropdown"
+					hx-swap="outerHTML swap:150ms"
+				>Remove from list</button>
+			}
+		</div>
+	</div>
+}
+
+templ StatusOption(animeID int, animeTitle string, animeTitleEnglish string, animeTitleJapanese string, animeImage string, status string, currentStatus string, airing bool) {
+	<button
+		class={
+			"flex w-full cursor-pointer items-center justify-between bg-transparent px-2.5 py-2 text-left text-xs text-(--text-muted) hover:bg-(--panel-soft) hover:text-(--text)",
+			templ.KV("bg-(--panel-soft) text-(--text)", status == currentStatus),
+		}
+		hx-post="/api/watchlist"
+		hx-vals={ fmt.Sprintf(`{"anime_id": "%d", "anime_title": "%s", "anime_title_english": "%s", "anime_title_japanese": "%s", "anime_image": "%s", "status": "%s", "airing": "%v"}`, animeID, animeTitle, animeTitleEnglish, animeTitleJapanese, animeImage, status, airing) }
+		hx-target="#watchlist-dropdown"
+		hx-swap="outerHTML swap:150ms"
+	>
+		{ formatStatus(status) }
+	</button>
+}
+
+func formatStatus(status string) string {
+	switch status {
+	case "watching":
+		return "Watching"
+	case "completed":
+		return "Completed"
+	case "on_hold":
+		return "On hold"
+	case "dropped":
+		return "Dropped"
+	case "plan_to_watch":
+		return "Plan to watch"
+	default:
+		return status
+	}
+}