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

feat: add toggle watchlist on anime cards and improve dropdown

Browse Source
This commit is contained in:
mkelvers
2026-05-02 15:28:37 +02:00
committed by Mikkel Elvers
parent 94e60e0d8b
commit cc9ca1ba9e
14 changed files with 396 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
templates/base.gohtml
View File

@@ -26,6 +26,47 @@
document.getElementById('mobile-overlay').classList.add('hidden');
}
}
const watchlistIds = new Set()
function initWatchlist(ids) {
ids.forEach(id => watchlistIds.add(id))
}
function toggleWatchlist(id, btn) {
const isInWatchlist = watchlistIds.has(id)
const url = isInWatchlist ? `/api/watchlist/${id}` : '/api/watchlist'
const method = isInWatchlist ? 'DELETE' : 'POST'
const body = isInWatchlist ? null : JSON.stringify({ animeId: id, status: 'plan_to_watch' })
fetch(url, {
method,
headers: body ? { 'Content-Type': 'application/json' } : {},
body
}).then(res => {
if (res.ok) {
if (isInWatchlist) {
watchlistIds.delete(id)
btn.classList.remove('in-watchlist')
btn.setAttribute('aria-label', 'Add to Watchlist')
} else {
watchlistIds.add(id)
btn.classList.add('in-watchlist')
btn.setAttribute('aria-label', 'Remove from Watchlist')
}
}
})
}
function removeFromWatchlist(id, btn) {
fetch(`/api/watchlist/${id}`, { method: 'DELETE' }).then(res => {
if (res.ok) {
watchlistIds.delete(id)
const card = btn.closest('.group').parentElement
if (card) card.remove()
setTimeout(() => location.reload(), 100)
}
})
}
</script>
</head>
<body class="bg-background text-neutral-200">

3
templates/browse.gohtml
View File

@@ -1,5 +1,6 @@
{{define "title"}}Browse{{end}}
{{define "content"}}
{{if .WatchlistIDs}}<script>initWatchlist({{.WatchlistIDs}})</script>{{end}}
<div class="flex flex-col gap-6">
<div class="flex items-end justify-between">
<h1 class="text-lg font-normal text-neutral-300">Browse</h1>
@@ -16,7 +17,7 @@
{{else}}
<div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6">
{{range .Animes}}
{{template "anime_card" dict "Anime" . "WithActions" true}}
{{template "anime_card" dict "Anime" . "WithActions" true "IsWatchlist" (index $.WatchlistMap .MalID)}}
{{end}}
</div>
{{end}}

52
templates/components/anime_card.gohtml
View File

@@ -24,14 +24,6 @@
{{if $withActions}}
<div class="absolute inset-0 z-10 flex flex-col p-3 {{if $hasTopBadge}}pt-10{{end}} opacity-0 transition-opacity duration-300 group-hover:opacity-100">
{{if $isWatchlist}}
<div class="flex justify-end">
<button class="text-white/70 transition-colors hover:text-white focus:outline-none disabled:opacity-50" aria-label="Remove from Watchlist">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-5 shadow-black drop-shadow-md"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
</button>
</div>
{{end}}
{{if not $isWatchlist}}
<h3 class="mb-1.5 line-clamp-2 text-sm font-medium text-white shadow-black drop-shadow-md">
{{$displayTitle}}
@@ -44,13 +36,11 @@
</p>
{{end}}
{{if not $isWatchlist}}
<div class="mt-auto flex items-center justify-start pb-2 pl-2">
<button class="text-accent hover:text-accent/80 transition-colors focus:outline-none disabled:opacity-50" aria-label="Add to Watchlist">
<svg class="size-6 shadow-black drop-shadow-md" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" /></svg>
</button>
</div>
{{end}}
<div class="mt-auto flex items-center justify-start pb-2 pl-2">
<button type="button" onclick="event.preventDefault(); event.stopPropagation(); toggleWatchlist({{$anime.MalID}}, this)" class="text-accent hover:text-accent/80 transition-colors focus:outline-none {{if $isWatchlist}}in-watchlist{{end}}" aria-label="{{if $isWatchlist}}Remove from Watchlist{{else}}Add to Watchlist{{end}}">
<svg class="size-6 shadow-black drop-shadow-md watchlist-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" /></svg>
</button>
</div>
</div>
{{else}}
<div class="absolute bottom-0 left-0 z-10 w-full p-4">
@@ -62,22 +52,22 @@
{{if $anime.Score}}
<span class="flex items-center gap-1">
<svg class="text-accent h-3 w-3" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
{{$anime.Score}}
</span>
{{end}}
{{if $anime.Year}}
<span>•</span>
<span>{{$anime.Year}}</span>
{{end}}
{{if $anime.Episodes}}
<span>•</span>
<span>{{$anime.Episodes}} ep</span>
{{end}}
</div>
{{end}}
</div>
{{end}}
</a>
{{$anime.Score}}
</span>
{{end}}
{{if $anime.Year}}
<span>•</span>
<span>{{$anime.Year}}</span>
{{end}}
{{if $anime.Episodes}}
<span>•</span>
<span>{{$anime.Episodes}} ep</span>
{{end}}
</div>
{{end}}
</div>
{{end}}
</a>
{{if and $withActions (not $hideTitle)}}
<h3 class="line-clamp-2 text-sm font-medium text-white">
{{$displayTitle}}

27
templates/components/watchlist_actions.gohtml
View File

@@ -6,7 +6,7 @@
<div class="mb-4 flex gap-2">
<ui-dropdown class="relative block" data-align="left" data-width="min-w-[160px]">
<div data-trigger class="cursor-pointer">
<button class="bg-background-button hover:bg-background-button-hover flex items-center justify-between gap-3 px-4 py-2.5 text-sm font-medium text-white transition-colors disabled:opacity-50">
<button type="button" class="bg-background-button hover:bg-background-button-hover flex items-center justify-between gap-3 px-4 py-2.5 text-sm font-medium text-white transition-colors disabled:opacity-50">
<span id="watchlist-status-display-{{$anime.MalID}}">
{{if $status}}
{{if eq $status "watching"}}Watching{{end}}
@@ -23,16 +23,16 @@
<div data-content class="hidden absolute z-50 min-w-[160px] bg-background-button rounded-none shadow-2xl left-0 top-full mt-2">
<div class="flex flex-col py-1">
<button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-white/10 focus:bg-white/10" onclick="updateWatchlist({{$anime.MalID}}, 'watching', 'Watching')">
<button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-white/10 focus:bg-white/10" onclick="updateWatchlist({{$anime.MalID}}, 'watching', 'Watching', this)">
<span class="font-medium text-sm text-white">Watching</span>
</button>
<button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-white/10 focus:bg-white/10" onclick="updateWatchlist({{$anime.MalID}}, 'completed', 'Completed')">
<button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-white/10 focus:bg-white/10" onclick="updateWatchlist({{$anime.MalID}}, 'completed', 'Completed', this)">
<span class="font-medium text-sm text-white">Completed</span>
</button>
<button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-white/10 focus:bg-white/10" onclick="updateWatchlist({{$anime.MalID}}, 'plan to watch', 'Plan to Watch')">
<button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-white/10 focus:bg-white/10" onclick="updateWatchlist({{$anime.MalID}}, 'plan_to_watch', 'Plan to Watch', this)">
<span class="font-medium text-sm text-white">Plan to Watch</span>
</button>
<button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-white/10 focus:bg-white/10" onclick="updateWatchlist({{$anime.MalID}}, 'dropped', 'Dropped')">
<button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-white/10 focus:bg-white/10" onclick="updateWatchlist({{$anime.MalID}}, 'dropped', 'Dropped', this)">
<span class="font-medium text-sm text-white">Dropped</span>
</button>
@@ -52,15 +52,22 @@
</div>
<script>
function updateWatchlist(id, status, display) {
function updateWatchlist(id, status, display, btn) {
fetch('/api/watchlist', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ animeId: id, status: status })
}).then(res => {
if (res.ok) {
watchlistIds.add(id);
document.getElementById('watchlist-status-display-' + id).textContent = display;
document.getElementById('remove-watchlist-container-' + id).classList.remove('hidden');
// Close dropdown after a small delay to let click event finish
requestAnimationFrame(() => {
const dropdown = btn.closest('ui-dropdown');
if (dropdown) dropdown.close();
});
}
});
}
@@ -68,8 +75,16 @@
function removeWatchlist(id) {
fetch('/api/watchlist/' + id, { method: 'DELETE' }).then(res => {
if (res.ok) {
watchlistIds.delete(id);
document.getElementById('watchlist-status-display-' + id).textContent = 'Add to Watchlist';
document.getElementById('remove-watchlist-container-' + id).classList.add('hidden');
// Close dropdown
const btn = document.getElementById('watchlist-status-display-' + id);
if (btn) {
const dropdown = btn.closest('ui-dropdown');
if (dropdown) dropdown.close();
}
}
});
}

5
templates/index.gohtml
View File

@@ -1,5 +1,6 @@
{{define "title"}}Home{{end}}
{{define "content"}}
{{if .WatchlistIDs}}<script>initWatchlist({{.WatchlistIDs}})</script>{{end}}
<div class="flex flex-col gap-10">
{{if .ContinueWatching}}
{{template "continue_watching" .ContinueWatching}}
@@ -16,7 +17,7 @@
<div class="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-6">
{{range .CurrentlyAiring}}
{{template "anime_card" dict "Anime" . "WithActions" true}}
{{template "anime_card" dict "Anime" . "WithActions" true "IsWatchlist" (index $.WatchlistMap .MalID)}}
{{end}}
</div>
</section>
@@ -32,7 +33,7 @@
<div class="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-6">
{{range .MostPopular}}
{{template "anime_card" dict "Anime" . "WithActions" true}}
{{template "anime_card" dict "Anime" . "WithActions" true "IsWatchlist" (index $.WatchlistMap .MalID)}}
{{end}}
</div>
</section>

45
templates/watchlist.gohtml Normal file
View File

@@ -0,0 +1,45 @@
{{define "title"}}Watchlist{{end}}
{{define "content"}}
<div id="watchlist-content" class="flex flex-col gap-10">
{{range $status := $.StatusOrder}}
{{$entries := index $.WatchlistByStatus $status}}
{{if $entries}}
<section class="w-full">
<div class="mb-4 flex items-end justify-between">
<h2 class="text-lg font-normal text-neutral-300">{{index $.StatusLabels $status}}</h2>
</div>
<div class="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-6">
{{range $entries}}
<div class="watchlist-item flex w-full flex-col gap-2">
<div class="group relative flex aspect-[2/3] w-full flex-col overflow-hidden bg-white/5 after:absolute after:inset-0 after:bg-black/80 after:opacity-0 hover:after:opacity-100 after:transition-opacity">
<a href="/anime/{{.AnimeID}}" class="absolute inset-0"></a>
<img src="{{.ImageUrl}}" alt="{{.DisplayTitle}}" class="h-full w-full object-cover" loading="lazy" />
<div class="absolute inset-0 z-10 flex flex-col p-3 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
<div class="flex justify-end">
<button type="button" hx-delete="/api/watchlist/{{.AnimeID}}" hx-target="#watchlist-content" hx-swap="outerHTML" hx-on::after-request="if(event.detail.successful) { watchlistIds.delete({{.AnimeID}}) }" class="text-white/70 transition-colors hover:text-white focus:outline-none" aria-label="Remove from Watchlist">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-5 shadow-black drop-shadow-md"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
</button>
</div>
</div>
</div>
<h3 class="line-clamp-2 text-sm font-medium text-white">
{{.DisplayTitle}}
</h3>
</div>
{{end}}
</div>
</section>
{{end}}
{{end}}
{{if eq (len $.AllEntries) 0}}
<div class="flex flex-col items-center justify-center gap-2 py-24 text-neutral-400">
<svg class="h-12 w-12 opacity-30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" /></svg>
<p class="text-lg">Your watchlist is empty.</p>
<a href="/" class="text-accent hover:text-accent/80 transition-colors">Browse anime</a>
</div>
{{end}}
</div>
{{end}}

45
templates/watchlist_partial.gohtml Normal file
View File

@@ -0,0 +1,45 @@
{{define "title"}}Watchlist{{end}}
{{define "content"}}
<div id="watchlist-content" class="flex flex-col gap-10">
{{range $status := $.StatusOrder}}
{{$entries := index $.WatchlistByStatus $status}}
{{if $entries}}
<section class="w-full">
<div class="mb-4 flex items-end justify-between">
<h2 class="text-lg font-normal text-neutral-300">{{index $.StatusLabels $status}}</h2>
</div>
<div class="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-6">
{{range $entries}}
<div class="watchlist-item flex w-full flex-col gap-2">
<div class="group relative flex aspect-[2/3] w-full flex-col overflow-hidden bg-white/5 after:absolute after:inset-0 after:bg-black/80 after:opacity-0 hover:after:opacity-100 after:transition-opacity">
<a href="/anime/{{.AnimeID}}" class="absolute inset-0"></a>
<img src="{{.ImageUrl}}" alt="{{.DisplayTitle}}" class="h-full w-full object-cover" loading="lazy" />
<div class="absolute inset-0 z-10 flex flex-col p-3 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
<div class="flex justify-end">
<button type="button" hx-delete="/api/watchlist/{{.AnimeID}}" hx-target="#watchlist-content" hx-swap="outerHTML" hx-on::after-request="if(event.detail.successful) { watchlistIds.delete({{.AnimeID}}) }" class="text-white/70 transition-colors hover:text-white focus:outline-none" aria-label="Remove from Watchlist">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-5 shadow-black drop-shadow-md"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
</button>
</div>
</div>
</div>
<h3 class="line-clamp-2 text-sm font-medium text-white">
{{.DisplayTitle}}
</h3>
</div>
{{end}}
</div>
</section>
{{end}}
{{end}}
{{if eq (len $.AllEntries) 0}}
<div class="flex flex-col items-center justify-center gap-2 py-24 text-neutral-400">
<svg class="h-12 w-12 opacity-30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" /></svg>
<p class="text-lg">Your watchlist is empty.</p>
<a href="/" class="text-accent hover:text-accent/80 transition-colors">Browse anime</a>
</div>
{{end}}
</div>
{{end}}