melosh/mal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): add anime episodes section

Browse Source
This commit is contained in:
mkelvers
2026-04-18 05:55:22 +02:00
parent 9eb3e21ffa
commit e21474ca55
2 changed files with 26 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
internal/server/routes.go
View File

@@ -51,6 +51,7 @@ func NewRouter(cfg Config) http.Handler {
mux.HandleFunc("/studios/", animeHandler.HandleStudioDetails) mux.HandleFunc("/studios/", animeHandler.HandleStudioDetails)
mux.HandleFunc("/api/studios/", animeHandler.HandleAPIStudioAnime) mux.HandleFunc("/api/studios/", animeHandler.HandleAPIStudioAnime)
mux.HandleFunc("/api/episodes/", animeHandler.HandleAPIEpisodes)
// Auth Endpoints // Auth Endpoints
mux.HandleFunc("/login", func(w http.ResponseWriter, r *http.Request) { mux.HandleFunc("/login", func(w http.ResponseWriter, r *http.Request) {
if r.Method == http.MethodGet { if r.Method == http.MethodGet {

38
internal/templates/anime.templ
View File

@@ -36,9 +36,15 @@ templ AnimeDetails(anime jikan.Anime, currentStatus string) {
<span class="text-xs text-(--text-faint)">{ anime.ShortDuration() }</span> <span class="text-xs text-(--text-faint)">{ anime.ShortDuration() }</span>
} }
</div> </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) @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>
</div>
<section class="mt-4 max-w-4xl"> <section class="mt-4 max-w-4xl">
if anime.Synopsis != "" { if anime.Synopsis != "" {
<p>{ anime.Synopsis }</p> <p>{ anime.Synopsis }</p>
@@ -48,18 +54,24 @@ templ AnimeDetails(anime jikan.Anime, currentStatus string) {
</section> </section>
</div> </div>
</div> </div>
<section> <section>
<h3 class="mb-3 text-lg font-semibold tracking-wide text-(--text)">Related</h3> <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/relations", anime.MalID))) } hx-trigger="load"> <div hx-get={ string(templ.URL(fmt.Sprintf("/api/anime/%d/episodes", anime.MalID))) } hx-trigger="load">
@ui.LoadingIndicator("Loading relations") @ui.LoadingIndicator("Loading episodes")
</div> </div>
</section> </section>
<section> <section>
<h3 class="mb-3 text-lg font-semibold tracking-wide text-(--text)">Recommendations</h3> <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/recommendations", anime.MalID))) } hx-trigger="load"> <div hx-get={ string(templ.URL(fmt.Sprintf("/api/anime/%d/relations", anime.MalID))) } hx-trigger="load">
@ui.LoadingIndicator("Loading recommendations") @ui.LoadingIndicator("Loading relations")
</div> </div>
</section> </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> </div>
<aside class="sticky top-20 grid gap-4 bg-(--panel) p-3 max-xl:static"> <aside class="sticky top-20 grid gap-4 bg-(--panel) p-3 max-xl:static">
<div class="grid gap-3"> <div class="grid gap-3">