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

fix: remove inline watchlist js

Browse Source
This commit is contained in:
mkelvers
2026-05-26 22:33:27 +02:00
parent 2a266c6b1e
commit b63a5c48a2
3 changed files with 224 additions and 262 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
templates/watchlist_partial.gohtml
View File

@@ -3,14 +3,14 @@
<div id="watchlist-content" class="flex w-full flex-col gap-6">
<h1 class="text-xl font-normal tracking-[-0.02em] text-foreground">Watchlist</h1>
<div class="flex flex-wrap items-center justify-between gap-4">
<div class="flex flex-wrap items-center gap-4">
<button class="border-b border-accent pb-1 text-sm font-normal text-foreground transition-colors" onclick="filterWatchlist('all', this)">All</button>
<button class="border-b border-transparent pb-1 text-sm font-normal text-foreground-muted transition-colors hover:text-foreground" onclick="filterWatchlist('watching', this)">Watching</button>
<button class="border-b border-transparent pb-1 text-sm font-normal text-foreground-muted transition-colors hover:text-foreground" onclick="filterWatchlist('plan_to_watch', this)">Plan to Watch</button>
<button class="border-b border-transparent pb-1 text-sm font-normal text-foreground-muted transition-colors hover:text-foreground" onclick="filterWatchlist('completed', this)">Completed</button>
<button class="border-b border-transparent pb-1 text-sm font-normal text-foreground-muted transition-colors hover:text-foreground" onclick="filterWatchlist('dropped', this)">Dropped</button>
</div>
<div class="flex flex-wrap items-center justify-between gap-4">
<div class="flex flex-wrap items-center gap-4">
<button data-watchlist-filter="all" class="border-b border-accent pb-1 text-sm font-normal text-foreground transition-colors">All</button>
<button data-watchlist-filter="watching" class="border-b border-transparent pb-1 text-sm font-normal text-foreground-muted transition-colors hover:text-foreground">Watching</button>
<button data-watchlist-filter="plan_to_watch" class="border-b border-transparent pb-1 text-sm font-normal text-foreground-muted transition-colors hover:text-foreground">Plan to Watch</button>
<button data-watchlist-filter="completed" class="border-b border-transparent pb-1 text-sm font-normal text-foreground-muted transition-colors hover:text-foreground">Completed</button>
<button data-watchlist-filter="dropped" class="border-b border-transparent pb-1 text-sm font-normal text-foreground-muted transition-colors hover:text-foreground">Dropped</button>
</div>
<div class="flex items-center gap-4">
<ui-dropdown class="relative block" data-align="right" data-width="min-w-[150px]">
@@ -20,19 +20,19 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
</button>
</div>
<div data-content class="hidden absolute z-50 min-w-[150px] bg-background-button rounded-none shadow-[var(--shadow-card)] ring-1 ring-black/10 right-0 top-full mt-2">
<div class="flex flex-col py-1">
<button class="flex w-full items-center px-4 py-2 text-sm font-normal text-foreground transition-colors hover:bg-surface-hover focus-visible:ring-1 focus-visible:ring-accent" onclick="setSortBy('date', this)">Date Added</button>
<button class="flex w-full items-center px-4 py-2 text-sm font-normal text-foreground-muted transition-colors hover:bg-surface-hover hover:text-foreground focus-visible:ring-1 focus-visible:ring-accent" onclick="setSortBy('title', this)">Title</button>
</div>
</div>
</ui-dropdown>
<div data-content class="hidden absolute z-50 min-w-[150px] bg-background-button rounded-none shadow-[var(--shadow-card)] ring-1 ring-black/10 right-0 top-full mt-2">
<div class="flex flex-col py-1">
<button data-watchlist-sort="date" class="flex w-full items-center px-4 py-2 text-sm font-normal text-foreground transition-colors hover:bg-surface-hover focus-visible:ring-1 focus-visible:ring-accent">Date Added</button>
<button data-watchlist-sort="title" class="flex w-full items-center px-4 py-2 text-sm font-normal text-foreground-muted transition-colors hover:bg-surface-hover hover:text-foreground focus-visible:ring-1 focus-visible:ring-accent">Title</button>
</div>
</div>
</ui-dropdown>
<button type="button" id="sort-order-btn" class="text-foreground-muted transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent" onclick="toggleSortOrder(this)">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="transition-transform duration-200 rotate-0"><path d="m21 16-4 4-4-4"></path><path d="M17 20V4"></path><path d="m3 8 4-4 4 4"></path><path d="M7 4v16"></path></svg>
</button>
</div>
</div>
<button type="button" id="sort-order-btn" data-watchlist-sort-order class="text-foreground-muted transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="transition-transform duration-200 rotate-0"><path d="m21 16-4 4-4-4"></path><path d="M17 20V4"></path><path d="m3 8 4-4 4 4"></path><path d="M7 4v16"></path></svg>
</button>
</div>
</div>
<div id="watchlist-items">
{{range $status := $.StatusOrder}}
@@ -81,91 +81,4 @@
</div>
</div>
<script>
let currentSortBy = 'date'
let sortOrderDesc = true
function filterWatchlist(status, btn) {
// Update active tab styling
const parent = btn.parentElement
parent.querySelectorAll('button').forEach(function(b) {
b.classList.remove('text-foreground')
b.classList.add('text-foreground-muted')
})
btn.classList.remove('text-foreground-muted')
btn.classList.add('text-foreground')
// Show/hide sections
document.querySelectorAll('.watchlist-section').forEach(function(section) {
if (status === 'all') {
section.style.display = 'block'
} else if (section.dataset.status === status) {
section.style.display = 'block'
} else {
section.style.display = 'none'
}
})
sortItems()
}
function setSortBy(sort, btn) {
currentSortBy = sort
document.getElementById('sort-by-display').textContent = sort === 'date' ? 'Date Added' : 'Title'
// Update button colors in dropdown
const dropdown = btn.closest('[data-content]')
dropdown.querySelectorAll('button').forEach(function(b) {
b.classList.remove('text-foreground')
b.classList.add('text-foreground-muted')
})
btn.classList.remove('text-foreground-muted')
btn.classList.add('text-foreground')
sortItems()
// Close dropdown
const parentDropdown = btn.closest('ui-dropdown')
if (parentDropdown) parentDropdown.close()
}
function toggleSortOrder(btn) {
sortOrderDesc = !sortOrderDesc
btn.querySelector('svg').classList.toggle('rotate-180', !sortOrderDesc)
sortItems()
}
function sortItems() {
document.querySelectorAll('.watchlist-section').forEach(function(section) {
const grid = section.querySelector('.grid')
const items = Array.from(grid.children)
items.sort(function(a, b) {
let comparison = 0
if (currentSortBy === 'title') {
const titleA = a.querySelector('h3').textContent.toLowerCase()
const titleB = b.querySelector('h3').textContent.toLowerCase()
comparison = titleA.localeCompare(titleB)
} else {
const dateA = parseInt(a.dataset.updatedAt || 0)
const dateB = parseInt(b.dataset.updatedAt || 0)
comparison = dateA - dateB
}
return sortOrderDesc ? -comparison : comparison
})
items.forEach(function(item) {
grid.appendChild(item)
})
})
}
// Handle HTMX partial swaps
if (document.readyState === 'complete') {
sortItems()
} else {
window.addEventListener('DOMContentLoaded', () => {
sortItems()
})
}
</script>
{{end}}
{{end}}