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

refactor(templates): simplify watchlist using extracted components

Browse Source
This commit is contained in:
mkelvers
2026-04-20 16:15:59 +02:00
parent 7923636b4a
commit b18aba5a22
1 changed files with 19 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
web/templates/watchlist.templ
View File

@@ -2,12 +2,13 @@ package templates
import ( import (
"fmt" "fmt"
"mal/internal/database" "mal/internal/db"
"mal/internal/shared/ui" "mal/web/components"
"mal/web/components/watchlist"
"math" "math"
) )
templ Watchlist(entries []database.GetUserWatchListRow, layout string, currentStatus string, sortBy string, sortOrder string) { templ Watchlist(entries []db.GetUserWatchListRow, layout string, currentStatus string, sortBy string, sortOrder string) {
@Layout("mal - watchlist", true) { @Layout("mal - watchlist", true) {
<div class="mb-4 flex items-end justify-between gap-4 max-lg:flex-col max-lg:items-start"> <div class="mb-4 flex items-end justify-between gap-4 max-lg:flex-col max-lg:items-start">
<div class="grid gap-1"> <div class="grid gap-1">
@@ -34,9 +35,9 @@ templ Watchlist(entries []database.GetUserWatchListRow, layout string, currentSt
<a href={ templ.URL(watchlistURL(layout, "dropped", sortBy, sortOrder)) } class={ tabClass(currentStatus == "dropped") }>Dropped</a> <a href={ templ.URL(watchlistURL(layout, "dropped", sortBy, sortOrder)) } class={ tabClass(currentStatus == "dropped") }>Dropped</a>
<a href={ templ.URL(watchlistURL(layout, "completed", sortBy, sortOrder)) } class={ tabClass(currentStatus == "completed") }>Completed</a> <a href={ templ.URL(watchlistURL(layout, "completed", sortBy, sortOrder)) } class={ tabClass(currentStatus == "completed") }>Completed</a>
</div> </div>
@ui.SortFilter(ui.SortFilterOptions{Sort: sortBy, Order: sortOrder, View: layout, Status: currentStatus}) @components.SortFilter(components.SortFilterOptions{Sort: sortBy, Order: sortOrder, View: layout, Status: currentStatus})
if len(entries) == 0 { if len(entries) == 0 {
@ui.EmptyState("Nothing here yet") { @components.EmptyState("Nothing here yet") {
if currentStatus == "all" { if currentStatus == "all" {
Your watchlist is empty. <a href="/">Search for anime</a> to get started. Your watchlist is empty. <a href="/">Search for anime</a> to get started.
} else { } else {
@@ -55,7 +56,7 @@ templ Watchlist(entries []database.GetUserWatchListRow, layout string, currentSt
<div class="mt-2 line-clamp-2 text-sm leading-snug text-(--text)"> <div class="mt-2 line-clamp-2 text-sm leading-snug text-(--text)">
{ entry.DisplayTitle() } { entry.DisplayTitle() }
</div> </div>
@ifHasProgress(entry) @watchlist.Progress(entry)
</a> </a>
<button <button
class="absolute right-2 top-2 h-6 w-6 cursor-pointer border-0 bg-(--overlay-subtle) text-(--text-muted) opacity-0 transition-opacity duration-150 group-hover:opacity-100 hover:text-(--danger)" class="absolute right-2 top-2 h-6 w-6 cursor-pointer border-0 bg-(--overlay-subtle) text-(--text-muted) opacity-0 transition-opacity duration-150 group-hover:opacity-100 hover:text-(--danger)"
@@ -66,6 +67,7 @@ templ Watchlist(entries []database.GetUserWatchListRow, layout string, currentSt
</div> </div>
} }
</div> </div>
</div>
} else { } else {
<table class="block w-full overflow-x-auto whitespace-nowrap bg-(--panel) md:table md:overflow-visible md:whitespace-normal"> <table class="block w-full overflow-x-auto whitespace-nowrap bg-(--panel) md:table md:overflow-visible md:whitespace-normal">
<thead> <thead>
@@ -87,7 +89,7 @@ templ Watchlist(entries []database.GetUserWatchListRow, layout string, currentSt
<a href={ templ.URL(watchURL(entry)) }> <a href={ templ.URL(watchURL(entry)) }>
{ entry.DisplayTitle() } { entry.DisplayTitle() }
</a> </a>
@ifHasProgress(entry) @watchlist.Progress(entry)
</td> </td>
<td class="w-24 p-2.5"> <td class="w-24 p-2.5">
<button <button
@@ -106,7 +108,7 @@ templ Watchlist(entries []database.GetUserWatchListRow, layout string, currentSt
} }
} }
templ ifHasProgress(entry database.GetUserWatchListRow) { templ ifHasProgress(entry db.GetUserWatchListRow) {
if entry.CurrentEpisode.Valid && entry.CurrentEpisode.Int64 > 0 && entry.Status != "completed" { if entry.CurrentEpisode.Valid && entry.CurrentEpisode.Int64 > 0 && entry.Status != "completed" {
<p class="m-0 mt-1 text-xs text-(--text-faint)"> <p class="m-0 mt-1 text-xs text-(--text-faint)">
Continue ep { fmt.Sprintf("%d", entry.CurrentEpisode.Int64) } Continue ep { fmt.Sprintf("%d", entry.CurrentEpisode.Int64) }
@@ -117,7 +119,7 @@ templ ifHasProgress(entry database.GetUserWatchListRow) {
} }
} }
func watchURL(entry database.GetUserWatchListRow) string { func watchURL(entry db.GetUserWatchListRow) string {
return fmt.Sprintf("/anime/%d", entry.AnimeID) return fmt.Sprintf("/anime/%d", entry.AnimeID)
} }