root
4101d98a41
Design system overhaul using DaisyUI v5 on Tailwind CSS v4: - Custom 'ohmstream' dark theme with orange primary (#FF9F1C), magenta secondary, gold accent matching existing palette - Tailwind CSS-first config (input.css source, style.css built output) - DaisyUI components: navbar, drawer, cards, badges, alerts, tables, progress bars, tabs, toggles, stats, form controls, tooltips - Mobile-first responsive layout with drawer navigation - Eliminated ~500+ lines of embedded CSS across 15+ template files - Removed all inline style spam from admin_panel and settings_section - Preserved all HTMX triggers, Alpine.js state, and Jinja2 logic - Updated auth-ui.js for DaisyUI tab-active class compatibility Build: npm run build:css (minified) / npm run watch:css (dev)
163 lines
9.6 KiB
HTML
163 lines
9.6 KiB
HTML
{% set status_filter = request.query_params.get('status', 'all') %}
|
|
<div class="flex flex-col gap-5" x-data="{ currentFilter: '{{ status_filter }}' }">
|
|
<!-- Filter Tabs -->
|
|
<div class="tabs tabs-boxed bg-base-200 p-1">
|
|
<button class="tab {% if status_filter == 'all' or not status_filter %}tab-active{% endif %}"
|
|
hx-get="/api/watchlist?status=all"
|
|
hx-target="#watchlist-items-container"
|
|
hx-swap="outerHTML">
|
|
<i class="fas fa-list"></i> Tous
|
|
</button>
|
|
<button class="tab {% if status_filter == 'active' %}tab-active{% endif %}"
|
|
hx-get="/api/watchlist?status=active"
|
|
hx-target="#watchlist-items-container"
|
|
hx-swap="outerHTML">
|
|
<i class="fas fa-play"></i> Actifs
|
|
</button>
|
|
<button class="tab {% if status_filter == 'paused' %}tab-active{% endif %}"
|
|
hx-get="/api/watchlist?status=paused"
|
|
hx-target="#watchlist-items-container"
|
|
hx-swap="outerHTML">
|
|
<i class="fas fa-pause"></i> En pause
|
|
</button>
|
|
<button class="tab {% if status_filter == 'completed' %}tab-active{% endif %}"
|
|
hx-get="/api/watchlist?status=completed"
|
|
hx-target="#watchlist-items-container"
|
|
hx-swap="outerHTML">
|
|
<i class="fas fa-check"></i> Terminés
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Watchlist Items Grid -->
|
|
{% if items and items | length > 0 %}
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{% for item in items %}
|
|
<div class="card bg-base-200 border border-base-300 hover:border-primary transition-colors" id="watchlist-{{ item.id }}" data-item-id="{{ item.id }}">
|
|
<div class="card-body p-4 flex-row gap-4">
|
|
<!-- Poster -->
|
|
<figure class="w-24 shrink-0 relative">
|
|
<img src="{{ item.poster_image or item.cover_image or '/static/img/no-poster.png' }}"
|
|
alt="{{ item.anime_title }}"
|
|
class="rounded-lg aspect-[2/3] object-cover w-full"
|
|
onerror="this.src='/static/img/no-poster.png'">
|
|
<!-- Status badge -->
|
|
<span class="badge badge-sm absolute top-2 left-2
|
|
{% if item.status == 'active' %}badge-success
|
|
{% elif item.status == 'paused' %}badge-warning
|
|
{% elif item.status == 'completed' %}badge-primary
|
|
{% else %}badge-ghost{% endif %}">
|
|
{% if item.status == 'active' %}
|
|
<i class="fas fa-play"></i> Actif
|
|
{% elif item.status == 'paused' %}
|
|
<i class="fas fa-pause"></i> Pause
|
|
{% elif item.status == 'completed' %}
|
|
<i class="fas fa-check"></i> Terminé
|
|
{% else %}
|
|
<i class="fas fa-archive"></i> Archivé
|
|
{% endif %}
|
|
</span>
|
|
<!-- Auto-download badge -->
|
|
{% if item.auto_download %}
|
|
<span class="badge badge-primary badge-sm absolute bottom-2 left-2">
|
|
<i class="fas fa-magic"></i> Auto
|
|
</span>
|
|
{% endif %}
|
|
</figure>
|
|
|
|
<!-- Content -->
|
|
<div class="flex-1 min-w-0 flex flex-col gap-1.5">
|
|
<h3 class="font-bold text-sm truncate m-0">{{ item.anime_title }}</h3>
|
|
|
|
<!-- Meta badges -->
|
|
<div class="flex flex-wrap gap-1.5 text-[0.7rem]">
|
|
<span class="badge badge-outline badge-sm">
|
|
<i class="fas fa-tv"></i> {{ item.provider_id | upper }}
|
|
</span>
|
|
<span class="badge badge-outline badge-sm badge-ghost">{{ item.lang | upper }}</span>
|
|
{% if item.quality_preference and item.quality_preference != 'auto' %}
|
|
<span class="badge badge-outline badge-sm badge-success">{{ item.quality_preference }}</span>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Synopsis -->
|
|
{% if item.synopsis %}
|
|
<p class="text-xs text-base-content/50 m-0 line-clamp-3">{{ item.synopsis | truncate(150) }}</p>
|
|
{% endif %}
|
|
|
|
<!-- Stats -->
|
|
<div class="flex flex-wrap gap-3 text-[0.7rem] text-base-content/50">
|
|
<span class="flex items-center gap-1">
|
|
<i class="fas fa-download"></i>
|
|
Ép. {{ item.last_episode_downloaded }}
|
|
{% if item.total_episodes %}/ {{ item.total_episodes }}{% endif %}
|
|
</span>
|
|
{% if item.added_at %}
|
|
<span class="flex items-center gap-1" title="Ajouté le {{ item.added_at.strftime('%d/%m/%Y') }}">
|
|
<i class="fas fa-calendar"></i>
|
|
{{ item.added_at.strftime('%d/%m/%Y') }}
|
|
</span>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Actions -->
|
|
<div class="flex gap-1 mt-auto pt-2 border-t border-base-300">
|
|
<!-- Pause/Resume Toggle -->
|
|
{% if item.status == 'active' %}
|
|
<button class="btn btn-circle btn-sm btn-warning"
|
|
hx-put="/api/watchlist/{{ item.id }}"
|
|
hx-vals='{"status": "paused"}'
|
|
hx-swap="none"
|
|
hx-on::after-request="htmx.trigger('#watchlist-items-container', 'refresh');"
|
|
title="Mettre en pause">
|
|
<i class="fas fa-pause"></i>
|
|
</button>
|
|
{% elif item.status == 'paused' %}
|
|
<button class="btn btn-circle btn-sm btn-success"
|
|
hx-put="/api/watchlist/{{ item.id }}"
|
|
hx-vals='{"status": "active"}'
|
|
hx-swap="none"
|
|
hx-on::after-request="htmx.trigger('#watchlist-items-container', 'refresh');"
|
|
title="Reprendre">
|
|
<i class="fas fa-play"></i>
|
|
</button>
|
|
{% endif %}
|
|
|
|
<!-- Mark as completed -->
|
|
{% if item.status not in ['completed', 'archived'] %}
|
|
<button class="btn btn-circle btn-sm btn-ghost"
|
|
hx-put="/api/watchlist/{{ item.id }}"
|
|
hx-vals='{"status": "completed"}'
|
|
hx-swap="none"
|
|
hx-on::after-request="htmx.trigger('#watchlist-items-container', 'refresh');"
|
|
title="Marquer comme terminé">
|
|
<i class="fas fa-check"></i>
|
|
</button>
|
|
{% endif %}
|
|
|
|
<!-- Delete -->
|
|
<button class="btn btn-circle btn-sm btn-error"
|
|
hx-delete="/api/watchlist/{{ item.id }}"
|
|
hx-target="#watchlist-{{ item.id }}"
|
|
hx-swap="outerHTML"
|
|
hx-confirm="Supprimer '{{ item.anime_title }}' de votre watchlist ?"
|
|
title="Supprimer">
|
|
<i class="fas fa-trash"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<div class="text-center py-16 bg-base-200 rounded-box border border-dashed border-base-300">
|
|
<i class="fas fa-inbox text-6xl text-base-content/20 mb-5 block"></i>
|
|
<h3 class="text-lg font-bold mb-2 text-base-content">Votre watchlist est vide</h3>
|
|
<p class="text-base-content/50 mb-6">Ajoutez des animes ou séries depuis l'onglet Recherche pour commencer à suivre leurs sorties.</p>
|
|
<button class="btn btn-primary" @click="$dispatch('set-tab', {tab: 'anime'})">
|
|
<i class="fas fa-search"></i> Rechercher des animes
|
|
</button>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|