From e21474ca55078c58416a20dccdf817292b75c446 Mon Sep 17 00:00:00 2001
From: mkelvers <mikkelelvers@outlook.com>
Date: Sat, 18 Apr 2026 05:55:22 +0200
Subject: [PATCH] feat(ui): add anime episodes section

---
 internal/server/routes.go      |  1 +
 internal/templates/anime.templ | 38 ++++++++++++++++++++++------------
 2 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/internal/server/routes.go b/internal/server/routes.go
index 1b8714c..ceff675 100644
--- a/internal/server/routes.go
+++ b/internal/server/routes.go
@@ -51,6 +51,7 @@ func NewRouter(cfg Config) http.Handler {
 	mux.HandleFunc("/studios/", animeHandler.HandleStudioDetails)
 	mux.HandleFunc("/api/studios/", animeHandler.HandleAPIStudioAnime)
 
+	mux.HandleFunc("/api/episodes/", animeHandler.HandleAPIEpisodes)
 	// Auth Endpoints
 	mux.HandleFunc("/login", func(w http.ResponseWriter, r *http.Request) {
 		if r.Method == http.MethodGet {
diff --git a/internal/templates/anime.templ b/internal/templates/anime.templ
index 5f54254..b6804bf 100644
--- a/internal/templates/anime.templ
+++ b/internal/templates/anime.templ
@@ -36,9 +36,15 @@ templ AnimeDetails(anime jikan.Anime, currentStatus string) {
 								<span class="text-xs text-(--text-faint)">{ anime.ShortDuration() }</span>
 							}
 						</div>
-						<div class="mt-3">
+					<div class="mt-3">
+						<div class="flex flex-wrap items-center gap-2">
 							@WatchlistDropdown(anime.MalID, anime.Title, anime.TitleEnglish, anime.TitleJapanese, anime.ImageURL(), currentStatus, anime.Airing)
+						<a
+							href={ templ.URL(fmt.Sprintf("/watch/%d/1", anime.MalID)) }
+							class="inline-flex h-8 items-center bg-(--panel-soft) px-2 text-xs text-(--text) no-underline hover:text-(--text) hover:no-underline"
+						>Watch</a>
 						</div>
+					</div>
 						<section class="mt-4 max-w-4xl">
 							if anime.Synopsis != "" {
 								<p>{ anime.Synopsis }</p>
@@ -48,18 +54,24 @@ templ AnimeDetails(anime jikan.Anime, currentStatus string) {
 						</section>
 					</div>
 				</div>
-				<section>
-					<h3 class="mb-3 text-lg font-semibold tracking-wide text-(--text)">Related</h3>
-					<div hx-get={ string(templ.URL(fmt.Sprintf("/api/anime/%d/relations", anime.MalID))) } hx-trigger="load">
-						@ui.LoadingIndicator("Loading relations")
-					</div>
-				</section>
-				<section>
-					<h3 class="mb-3 text-lg font-semibold tracking-wide text-(--text)">Recommendations</h3>
-					<div hx-get={ string(templ.URL(fmt.Sprintf("/api/anime/%d/recommendations", anime.MalID))) } hx-trigger="load">
-						@ui.LoadingIndicator("Loading recommendations")
-					</div>
-				</section>
+			<section>
+				<h3 class="mb-3 text-lg font-semibold tracking-wide text-(--text)">Episodes</h3>
+				<div hx-get={ string(templ.URL(fmt.Sprintf("/api/anime/%d/episodes", anime.MalID))) } hx-trigger="load">
+					@ui.LoadingIndicator("Loading episodes")
+				</div>
+			</section>
+			<section>
+				<h3 class="mb-3 text-lg font-semibold tracking-wide text-(--text)">Related</h3>
+				<div hx-get={ string(templ.URL(fmt.Sprintf("/api/anime/%d/relations", anime.MalID))) } hx-trigger="load">
+					@ui.LoadingIndicator("Loading relations")
+				</div>
+			</section>
+			<section>
+				<h3 class="mb-3 text-lg font-semibold tracking-wide text-(--text)">Recommendations</h3>
+				<div hx-get={ string(templ.URL(fmt.Sprintf("/api/anime/%d/recommendations", anime.MalID))) } hx-trigger="load">
+					@ui.LoadingIndicator("Loading recommendations")
+				</div>
+			</section>
 			</div>
 			<aside class="sticky top-20 grid gap-4 bg-(--panel) p-3 max-xl:static">
 				<div class="grid gap-3">