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

refactor(templates): remove duplicate functions and use shared utilities

Browse Source
This commit is contained in:
mkelvers
2026-04-20 16:40:52 +02:00
parent 436686eed1
commit f20e9d626e
3 changed files with 34 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
web/templates/studio.templ
View File

@@ -1,26 +1,30 @@
package templates
import "mal/internal/jikan"
import "mal/internal/shared/ui"
import "fmt"
import (
"fmt"
"mal/integrations/jikan"
"mal/web/components"
"mal/web/shared"
)
templ StudioDetails(producer jikan.ProducerResponse, animes []jikan.Anime, hasNext bool, nextPage int) {
@Layout("mal - "+getProducerName(producer), true) {
@Layout("mal - "+shared.GetProducerName(producer), true) {
<div class="grid gap-5">
<div class="grid gap-4 bg-(--panel) p-4">
<div class="flex items-start gap-4">
if producer.Data.Images.Jpg.ImageURL != "" {
<img
src={ producer.Data.Images.Jpg.ImageURL }
alt={ getProducerName(producer) }
alt={ shared.GetProducerName(producer) }
class="h-24 w-24 object-contain"
/>
}
<div class="flex-1">
<h1 class="text-xl font-semibold">{ getProducerName(producer) }</h1>
<h1 class="text-xl font-semibold">{ shared.GetProducerName(producer) }</h1>
if producer.Data.Established != "" {
<p class="mt-1 text-sm text-(--text-muted)">
Established: { formatEstablishedDate(producer.Data.Established) }
Established: { shared.FormatEstablishedDate(producer.Data.Established) }
</p>
}
if producer.Data.Count > 0 {
@@ -39,7 +43,7 @@ templ StudioDetails(producer jikan.ProducerResponse, animes []jikan.Anime, hasNe
<div class="grid grid-cols-2 gap-3 sm:grid-cols-3 md:gap-4 lg:grid-cols-4 xl:grid-cols-5" id="studio-anime-content">
for _, anime := range animes {
<div class="min-w-0" data-id={ fmt.Sprintf("%d", anime.MalID) }>
@ui.AnimeCard(ui.AnimeCardProps{
@components.AnimeCard(components.AnimeCardProps{
ID: anime.MalID,
Title: anime.DisplayTitle(),
ImageURL: anime.ImageURL(),
@@ -67,7 +71,7 @@ templ StudioLoadMore(studioID int, nextPage int) {
templ StudioAnimeItems(animes []jikan.Anime, hasNext bool, studioID int, nextPage int) {
for _, anime := range animes {
<div class="min-w-0" data-id={ fmt.Sprintf("%d", anime.MalID) }>
@ui.AnimeCard(ui.AnimeCardProps{
@components.AnimeCard(components.AnimeCardProps{
ID: anime.MalID,
Title: anime.DisplayTitle(),
ImageURL: anime.ImageURL(),
@@ -98,19 +102,3 @@ templ StudioAnimeItems(animes []jikan.Anime, hasNext bool, studioID int, nextPag
})();
</script>
}
func getProducerName(producer jikan.ProducerResponse) string {
for _, title := range producer.Data.Titles {
if title.Type == "Default" {
return title.Title
}
}
return "Studio"
}
func formatEstablishedDate(date string) string {
if len(date) >= 10 {
return date[:10]
}
return date
}

77
web/templates/watch.templ
View File

@@ -2,7 +2,6 @@ package templates
import (
"fmt"
"net/url"
"mal/integrations/jikan"
"mal/web/components"
@@ -124,79 +123,3 @@ templ WatchPage(anime jikan.Anime, data shared.WatchPageData) {
</div>
}
}
templ LoadingIndicatorSmall() {
<div class="flex items-center justify-center py-8">
<div class="h-5 w-5 animate-spin border-2 border-(--panel-soft) border-t-(--accent)"></div>
</div>
}
templ EpisodeList(episodes []jikan.Episode, currentEpisode string, animeID int) {
if len(episodes) == 0 {
<p class="py-4 text-center text-sm text-(--text-muted)">No episodes available</p>
} else {
<div class="flex flex-col">
for _, ep := range episodes {
@EpisodeItem(ep, currentEpisode, animeID)
}
</div>
}
}
templ EpisodeItem(episode jikan.Episode, currentEpisode string, animeID int) {
{{ isCurrent := fmt.Sprintf("%d", episode.MalID) == currentEpisode }}
<a
href={ templ.URL(fmt.Sprintf("/watch/%d/%d", animeID, episode.MalID)) }
class={
"flex items-center gap-3 px-3 py-2.5 text-sm no-underline transition-colors border-b border-(--panel-soft) last:border-0",
templ.KV("bg-white/5 text-white", isCurrent),
templ.KV("text-(--text-muted) hover:bg-white/5 hover:text-(--text)", !isCurrent),
}
>
<span
class={
"flex shrink-0 items-center justify-center font-medium w-6",
templ.KV("text-(--text)", isCurrent),
templ.KV("text-(--text-faint)", !isCurrent),
}
>
{ fmt.Sprintf("%d", episode.MalID) }
</span>
<span class="min-w-0 truncate font-medium">
if episode.Title != "" {
{ episode.Title }
} else {
Episode { fmt.Sprintf("%d", episode.MalID) }
}
</span>
<div class="ml-auto flex items-center gap-2">
if episode.Filler {
<span class="shrink-0 px-1.5 py-0.5 text-[9px] uppercase tracking-wider bg-yellow-900/50 text-yellow-400">
Filler
</span>
}
if episode.Recap {
<span class="shrink-0 px-1.5 py-0.5 text-[9px] uppercase tracking-wider bg-blue-900/50 text-blue-400">
Recap
</span>
}
if isCurrent {
<svg
class="h-4 w-4 shrink-0 text-white"
viewBox="0 0 24 24"
fill="currentColor"
aria-hidden="true"
>
<polygon points="5 3 19 12 5 21 5 3"></polygon>
</svg>
}
</div>
</a>
}
func buildStreamURL(mode string, token string) string {
if token == "" {
return ""
}
return fmt.Sprintf("/watch/proxy/stream?mode=%s&token=%s", url.QueryEscape(mode), url.QueryEscape(token))
}

79
web/templates/watchlist.templ
View File

@@ -2,10 +2,11 @@ package templates
import (
"fmt"
"mal/internal/db"
"mal/web/components"
"mal/web/components/watchlist"
"math"
"mal/web/shared"
)
templ Watchlist(
@@ -59,14 +60,14 @@ templ Watchlist(
class="flex flex-wrap gap-2 max-md:flex-nowrap max-md:overflow-x-auto max-md:pb-1"
>
<a
href={ templ.URL(watchlistURL("grid", currentStatus, sortBy, sortOrder)) }
class={ tabClass(layout == "grid") }
href={ templ.URL(shared.WatchlistURL("grid", currentStatus, sortBy, sortOrder)) }
class={ shared.TabClass(layout == "grid") }
>
Grid
</a>
<a
href={ templ.URL(watchlistURL("table", currentStatus, sortBy, sortOrder)) }
class={ tabClass(layout == "table") }
href={ templ.URL(shared.WatchlistURL("table", currentStatus, sortBy, sortOrder)) }
class={ shared.TabClass(layout == "table") }
>
Table
</a>
@@ -77,38 +78,38 @@ templ Watchlist(
class="mb-3 flex flex-wrap gap-2 max-md:flex-nowrap max-md:overflow-x-auto max-md:pb-1"
>
<a
href={ templ.URL(watchlistURL(layout, "all", sortBy, sortOrder)) }
class={ tabClass(currentStatus == "all") }
href={ templ.URL(shared.WatchlistURL(layout, "all", sortBy, sortOrder)) }
class={ shared.TabClass(currentStatus == "all") }
>
All
</a>
<a
href={ templ.URL(watchlistURL(layout, "watching", sortBy, sortOrder)) }
class={ tabClass(currentStatus == "watching") }
href={ templ.URL(shared.WatchlistURL(layout, "watching", sortBy, sortOrder)) }
class={ shared.TabClass(currentStatus == "watching") }
>
Watching
</a>
<a
href={ templ.URL(watchlistURL(layout, "on_hold", sortBy, sortOrder)) }
class={ tabClass(currentStatus == "on_hold") }
href={ templ.URL(shared.WatchlistURL(layout, "on_hold", sortBy, sortOrder)) }
class={ shared.TabClass(currentStatus == "on_hold") }
>
On hold
</a>
<a
href={ templ.URL(watchlistURL(layout, "plan_to_watch", sortBy, sortOrder)) }
class={ tabClass(currentStatus == "plan_to_watch") }
href={ templ.URL(shared.WatchlistURL(layout, "plan_to_watch", sortBy, sortOrder)) }
class={ shared.TabClass(currentStatus == "plan_to_watch") }
>
Plan to watch
</a>
<a
href={ templ.URL(watchlistURL(layout, "dropped", sortBy, sortOrder)) }
class={ tabClass(currentStatus == "dropped") }
href={ templ.URL(shared.WatchlistURL(layout, "dropped", sortBy, sortOrder)) }
class={ shared.TabClass(currentStatus == "dropped") }
>
Dropped
</a>
<a
href={ templ.URL(watchlistURL(layout, "completed", sortBy, sortOrder)) }
class={ tabClass(currentStatus == "completed") }
href={ templ.URL(shared.WatchlistURL(layout, "completed", sortBy, sortOrder)) }
class={ shared.TabClass(currentStatus == "completed") }
>
Completed
</a>
@@ -138,7 +139,7 @@ templ Watchlist(
id={ fmt.Sprintf("watchlist-entry-%d", entry.AnimeID) }
>
<a
href={ templ.URL(watchURL(entry)) }
href={ templ.URL(shared.AnimeURL(entry.AnimeID)) }
class="flex flex-col bg-transparent text-inherit no-underline"
>
<div class="flex w-full aspect-2/3 justify-center overflow-hidden">
@@ -183,7 +184,7 @@ templ Watchlist(
id={ fmt.Sprintf("watchlist-entry-%d", entry.AnimeID) }
>
<td class="p-2.5">
<a href={ templ.URL(watchURL(entry)) }>
<a href={ templ.URL(shared.AnimeURL(entry.AnimeID)) }>
<img
src={ entry.ImageUrl }
alt={ entry.DisplayTitle() }
@@ -193,7 +194,7 @@ templ Watchlist(
</a>
</td>
<td class="p-2.5 font-medium">
<a href={ templ.URL(watchURL(entry)) }>
<a href={ templ.URL(shared.AnimeURL(entry.AnimeID)) }>
{ entry.DisplayTitle() }
</a>
@watchlist.Progress(entry)
@@ -216,41 +217,3 @@ templ Watchlist(
}
}
}
templ ifHasProgress(entry db.GetUserWatchListRow) {
if entry.CurrentEpisode.Valid && entry.CurrentEpisode.Int64 > 0 && entry.Status != "completed" {
<p class="m-0 mt-1 text-xs text-(--text-faint)">
Continue ep { fmt.Sprintf("%d", entry.CurrentEpisode.Int64) }
if entry.CurrentTimeSeconds > 0 {
{ fmt.Sprintf(" · %s", formatProgressTime(entry.CurrentTimeSeconds)) }
}
</p>
}
}
func watchURL(entry db.GetUserWatchListRow) string {
return fmt.Sprintf("/anime/%d", entry.AnimeID)
}
func formatProgressTime(seconds float64) string {
total := int(math.Round(seconds))
if total < 0 {
total = 0
}
minutes := total / 60
remainingSeconds := total % 60
return fmt.Sprintf("%02d:%02d", minutes, remainingSeconds)
}
func tabClass(active bool) string {
base := "shrink-0 whitespace-nowrap bg-(--panel-soft) px-2 py-1 text-xs text-(--text-muted) no-underline hover:bg-(--surface-tab-hover) hover:text-(--text) hover:no-underline"
if active {
return "shrink-0 whitespace-nowrap bg-(--surface-tab-active) px-2 py-1 text-xs text-(--accent) no-underline hover:no-underline"
}
return base
}
func watchlistURL(view string, status string, sortBy string, sortOrder string) string {
return fmt.Sprintf("/watchlist?view=%s&status=%s&sort=%s&order=%s", view, status, sortBy, sortOrder)
}