feat: add season dropdown to watch page

api/playback/handler.go

@@ -158,6 +158,48 @@ func (h *Handler) HandleWatchPage(w http.ResponseWriter, r *http.Request) {
 		return allEpisodes[i].MalID < allEpisodes[j].MalID
 	})
 
+	// Fetch seasons/relations
+	relations, err := h.jikanClient.GetFullRelations(r.Context(), id)
+	if err != nil {
+		log.Printf("failed to fetch relations: %v", err)
+	}
+
+	type SeasonEntry struct {
+		MalID     int
+		Title     string
+		Prefix    string
+		IsCurrent bool
+	}
+
+	var tvSeasons []SeasonEntry
+	var movies []SeasonEntry
+	counter := 1
+
+	for _, rel := range relations {
+		if strings.ToLower(rel.Anime.Type) == "tv" {
+			tvSeasons = append(tvSeasons, SeasonEntry{
+				MalID:     rel.Anime.MalID,
+				Title:     rel.Anime.DisplayTitle(),
+				Prefix:    fmt.Sprintf("%02d", counter),
+				IsCurrent: rel.IsCurrent,
+			})
+			counter++
+		}
+	}
+
+	for _, rel := range relations {
+		if strings.ToLower(rel.Anime.Type) == "movie" {
+			movies = append(movies, SeasonEntry{
+				MalID:     rel.Anime.MalID,
+				Title:     rel.Anime.DisplayTitle(),
+				Prefix:    "Mov",
+				IsCurrent: rel.IsCurrent,
+			})
+		}
+	}
+
+	allSeasons := append(tvSeasons, movies...)
+
 	if err := templates.GetRenderer().ExecuteTemplate(r.Context(), w, "watch.gohtml", map[string]any{
 		"Anime":           anime,
 		"Episodes":        allEpisodes,
@@ -167,6 +209,7 @@ func (h *Handler) HandleWatchPage(w http.ResponseWriter, r *http.Request) {
 		"CurrentEpID":     currentEpID,
 		"WatchlistIDs":    watchlistIDs,
 		"WatchlistStatus": watchlistStatus,
+		"Seasons":         allSeasons,
 	}); err != nil {
 		log.Printf("render error: %v", err)
 	}

templates/watch.gohtml

@@ -86,8 +86,36 @@
     </div>
   </div>
 
-  <div class="w-full lg:w-80 xl:w-96 shrink-0">
-    {{if eq $totalEpisodes 0}}
+    <div class="w-full lg:w-80 xl:w-96 shrink-0">
+      {{if .Seasons}}
+        {{$currentSeason := dict "Prefix" "" "Title" $anime.Title}}
+        {{range .Seasons}}
+          {{if .IsCurrent}}{{$currentSeason = .}}{{end}}
+        {{end}}
+        <ui-dropdown class="relative block mb-4" data-align="left" data-width="w-full">
+          <div data-trigger>
+            <button class="w-full flex items-center justify-between px-3 py-2 bg-white/5 border border-white/10 rounded text-sm text-neutral-300 hover:bg-white/10 transition-colors">
+              <span class="truncate">
+                {{if $currentSeason.Prefix}}<span class="font-bold text-white mr-1">{{$currentSeason.Prefix}}:</span>{{end}}
+                {{$currentSeason.Title}}
+              </span>
+              <svg class="w-4 h-4 text-neutral-500 shrink-0 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
+            </button>
+          </div>
+          <div data-content class="hidden absolute z-50 top-full mt-1 left-0 w-full bg-background-button rounded shadow-2xl border border-white/10 max-h-64 overflow-y-auto scrollbar-hide">
+            <div class="flex flex-col py-1">
+              {{range .Seasons}}
+                <a href="/anime/{{.MalID}}/watch" class="px-4 py-2 text-left text-sm {{if .IsCurrent}}text-accent bg-accent/10{{else}}text-neutral-300 hover:bg-white/10{{end}} transition-colors">
+                  <span class="font-bold text-white mr-1">{{.Prefix}}:</span>
+                  {{.Title}}
+                </a>
+              {{end}}
+            </div>
+          </div>
+        </ui-dropdown>
+      {{end}}
+
+      {{if eq $totalEpisodes 0}}
       <div class="flex flex-col items-center justify-center gap-2 py-12 text-neutral-400">
         <svg class="h-10 w-10 opacity-30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" /></svg>
         <p class="text-sm">No episodes found</p>
@@ -112,7 +140,7 @@
             <div data-content class="hidden absolute z-50 top-full mt-1 left-0 min-w-[200px] bg-background-button rounded shadow-2xl">
               <div class="flex flex-col py-1">
                 {{$ranges := ceilDiv $totalEpisodes 100}}
-                {{range $i := seq 0 $ranges}}
+                {{range $i := seq $ranges}}
                   {{$start := imul $i 100}}
                   {{$end := min (add $start 100) $totalEpisodes}}
                   <button class="episode-range-btn px-4 py-2 text-left text-sm text-neutral-300 hover:bg-white/10" data-range-index="{{$i}}" data-range-start="{{add $start 1}}" data-range-end="{{$end}}">