feat: fix auth, provider health checks, search, and redesign UI

- Fix register/login: dict-style access on UserTable ORM objects - Fix HTMX auth: inject JWT token in all HTMX request headers - Fix FS7 search: use DLE AJAX endpoint /engine/ajax/search.php - Fix ZT search: use ?p=series&search=QUERY (not DLE format) - Fix provider health: load hardcoded providers + domain manager - Add self.id to all anime/series providers - Redesign homepage: Netflix-style horizontal scroll cards (.hc) - Redesign search results: grouped by title, poster + synopsis + 3 buttons - Add Télécharger dropdown: season download + episode picker - Fix navbar CSS: restore .tabs flex layout, remove orphan rules - Fix HTMX spinner: remove inline display:none, use CSS indicator - Add AGENTS.md files across project for developer documentation
2026-03-28 00:14:31 +00:00
parent 5d23a3d663
commit 3dc5dd8fe9
36 changed files with 2735 additions and 1989 deletions
@@ -170,140 +170,106 @@ h1 {
 .btn-watch { background: var(--primary); color: #000; }
 .btn-download { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: #fff; }

-/* Horizontal Rows (Netflix Style) */
-.streaming-row {
+/* Horizontal Scroll Row (Homepage) */
+.home-row, .streaming-row, .recommendations-carousel, .releases-carousel {
    display: flex;
-    gap: 20px;
+    gap: 16px;
    overflow-x: auto;
-    padding: 20px 5px;
+    padding: 10px 0 20px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
 }
-
-.streaming-row::-webkit-scrollbar {
-    height: 6px;
+.home-row::-webkit-scrollbar, .streaming-row::-webkit-scrollbar, .recommendations-carousel::-webkit-scrollbar, .releases-carousel::-webkit-scrollbar {
+    height: 4px;
 }
-
-.streaming-row::-webkit-scrollbar-thumb {
+.home-row::-webkit-scrollbar-thumb, .streaming-row::-webkit-scrollbar-thumb, .recommendations-carousel::-webkit-scrollbar-thumb, .releases-carousel::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
 }
-
-.streaming-row::-webkit-scrollbar-thumb:hover {
+.home-row::-webkit-scrollbar-thumb:hover, .streaming-row::-webkit-scrollbar-thumb:hover, .recommendations-carousel::-webkit-scrollbar-thumb:hover, .releases-carousel::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
 }

-/* Modern Card Design */
-.anime-card {
-    flex: 0 0 220px;
+/* Home Card */
+.hc {
+    flex: 0 0 180px;
+    display: block;
    background: var(--bg-card);
    border-radius: var(--card-radius);
    overflow: hidden;
    transition: var(--transition);
-    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.05);
-    display: flex;
-    flex-direction: column;
+    text-decoration: none;
+    color: inherit;
 }
-
-.anime-card:hover {
-    transform: scale(1.05);
+.hc:hover {
+    transform: scale(1.08);
    z-index: 10;
    border-color: var(--primary);
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
+    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
 }
-
-.anime-poster {
+.hc-poster {
    position: relative;
    padding-top: 150%;
    background: #000;
 }
-
-.anime-poster img {
+.hc-poster img {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover;
-    transition: var(--transition);
 }
-
-.anime-rating-badge {
+.hc-rating {
    position: absolute;
-    top: 10px; right: 10px;
-    background: rgba(0, 0, 0, 0.8);
+    top: 8px; right: 8px;
+    background: rgba(0, 0, 0, 0.85);
    color: #ffcc00;
-    padding: 4px 8px;
-    border-radius: 6px;
-    font-size: 0.75rem;
+    padding: 2px 7px;
+    border-radius: 4px;
+    font-size: 0.7rem;
    font-weight: 800;
-    backdrop-filter: blur(5px);
-    border: 1px solid rgba(255, 204, 0, 0.2);
 }
-
-.anime-overlay {
+.hc-play {
    position: absolute;
-    top: 0; left: 0; width: 100%; height: 100%;
-    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0) 100%);
+    bottom: 8px; right: 8px;
+    width: 32px; height: 32px;
+    border-radius: 50%;
+    background: var(--primary);
+    color: var(--bg-dark);
    display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
-    padding: 15px;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.75rem;
    opacity: 0;
    transition: var(--transition);
 }
-
-.anime-card:hover .anime-overlay { opacity: 1; }
-
-.overlay-buttons {
-    display: flex;
-    gap: 10px;
-    justify-content: center;
+.hc:hover .hc-play { opacity: 1; }
+.hc-info {
+    padding: 10px;
 }
-
-/* Info Area */
-.anime-info {
-    padding: 12px;
-    flex-grow: 1;
-    display: flex;
-    flex-direction: column;
+.hc-src {
+    font-size: 0.6rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    color: var(--primary);
+    letter-spacing: 0.5px;
+    display: block;
+    margin-bottom: 2px;
 }
-
-.anime-title {
-    font-size: 0.95rem;
+.hc-title {
+    font-size: 0.82rem;
    font-weight: 600;
-    margin-bottom: 8px;
+    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
+    color: var(--text-main);
 }

-.anime-meta-tags {
-    display: flex;
-    gap: 5px;
-    margin-bottom: 12px;
-}
-
-.badge {
-    font-size: 0.65rem;
-    font-weight: 700;
-    text-transform: uppercase;
-    padding: 2px 6px;
-    border-radius: 4px;
-    background: rgba(255, 255, 255, 0.1);
-    color: var(--text-dim);
-}
-
-/* Action Buttons Grid */
-.anime-card-buttons {
+/* Responsive Grid for Search */
+.anime-grid {
    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 8px;
-    margin-bottom: 10px;
-}
-
-.btn-add-watchlist.followed {
-    border-color: var(--accent);
-    color: var(--accent);
-    background: rgba(0, 255, 136, 0.1);
+    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+    gap: 20px;
 }

 /* Tabs UI */
@@ -640,23 +606,17 @@ h1 {
    opacity: 0.15;
 }

+.htmx-indicator { display: none; }
+.htmx-indicator.htmx-request { display: flex; align-items: center; gap: 8px; }
+
 /* Section Containers */
 .section-container {
    margin-bottom: 50px;
 }

-/* Responsive Grid for Search */
-.anime-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-    gap: 30px;
-}
-
@media (max-width: 768px) {
-    .anime-card { flex: 0 0 160px; }
-    .anime-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 15px; }
-    .btn-card span { display: none; }
-    .btn-card { padding: 10px; }
+    .anime-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
+    .hc { flex: 0 0 140px; }
    .tabs { gap: 10px; }
    .auth-panel { flex-direction: column; gap: 15px; text-align: center; }
 }
@@ -0,0 +1,56 @@
+# Frontend JS (static/js/)
+
+## OVERVIEW
+Vanilla JavaScript modules loaded via `<script>` tags in HTML templates. No ES module imports in app code — uses global variables (`API_BASE`, `getToken()`) for cross-module communication. Tests use Vitest with ES module syntax.
+
+## STRUCTURE
+```
+static/js/
+├── main.js              # Entry point — DOMContentLoaded, orchestrates tab navigation
+├── api.js               # API_BASE config, providers info, search caching
+├── auth.js              # Cookie-based token management (getToken, setToken)
+├── auth-utils.js        # safeJsonParse, displayError, displaySuccess
+├── auth-api.js          # login, register, logout, getMe API calls
+├── auth-ui.js           # handleLogin, handleRegister, handleLogout UI handlers
+├── anime.js             # loadAnimeReleases (partially HTMX, legacy)
+├── anime-details.js     # searchAnimeDetails, episode management (555 lines)
+├── series-search.js     # handleSeriesSearch for FS7 provider
+├── watchlist.js         # Watchlist CRUD API calls (461 lines)
+├── watchlist-ui.js      # displayWatchlist (legacy, redirects to HTMX)
+├── tabs.js              # renderSeriesRecommendationCard, tab switching
+├── downloads.js         # loadDownloads (legacy, redirects to HTMX)
+├── recommendations.js   # loadRecommendations
+├── utils.js             # formatBytes utility
+└── __tests__/           # Vitest test files
+    ├── smoke.test.js
+    ├── auth-api.test.js
+    └── auth-utils.test.js
+```
+
+## WHERE TO LOOK
+
+| Need | File | Notes |
+|------|------|-------|
+| API base URL / config | `api.js` | Defines `API_BASE` global |
+| Auth token access | `auth.js` | `getToken()` used by most API-calling modules |
+| Add API endpoint call | Module calling the API | Use `fetch(API_BASE + '/api/...')` + `getToken()` header |
+| Add UI component | `auth-ui.js`, `tabs.js` | Alpine.js used for state, HTMX for server interactions |
+| Run JS tests | `__tests__/` | `npm test` (Vitest) |
+
+## CONVENTIONS
+
+**Module communication**: Global variables, not ES imports. `api.js` defines `API_BASE`. `auth.js` defines `getToken()`. Other modules consume these globals.
+
+**Loading order matters**: Scripts loaded via `<script>` tags in `base.html` — order defines availability of globals.
+
+**Auth subsystem chain**: `auth.js` (token storage) → `auth-utils.js` (utilities) → `auth-api.js` (API calls) → `auth-ui.js` (UI handlers).
+
+**HTMX + Alpine.js**: Most interactions now use HTMX (server-driven). Alpine.js handles client-side state (modals, toggles, tabs). Legacy JS modules (downloads.js, watchlist-ui.js) redirect to HTMX equivalents.
+
+**Tests**: Vitest with jsdom environment. Test files define skeleton functions matching source — not importing actual source files.
+
+## ANTI-PATTERNS
+
+- Do NOT add ES module `import`/`export` syntax to app JS files — they use global scope
+- Do NOT depend on script load order without checking — add null guards
+- Do NOT duplicate API call patterns — centralize in `api.js`
@@ -41,11 +41,10 @@ function removeToken() {

 // Check if user is authenticated
 async function checkAuth() {
-    console.log('Checking authentication...');
    const token = getToken();

    if (!token) {
-        console.log('No token found');
+        window.dispatchEvent(new CustomEvent('auth-logout'));
        return false;
    }

@@ -56,20 +55,18 @@ async function checkAuth() {

        if (response.ok) {
            const data = await response.json();
-            console.log('Auth success:', data.user.username);
            
-            // Dispatch for Alpine
            window.dispatchEvent(new CustomEvent('auth-success', { 
                detail: { username: data.user.full_name || data.user.username } 
            }));
            
            return true;
        } else {
-            console.log('Token invalid');
+            removeToken();
+            window.dispatchEvent(new CustomEvent('auth-logout'));
            return false;
        }
    } catch (error) {
-        console.error('Auth check error:', error);
        return false;
    }
 }
@@ -4,7 +4,6 @@
 */

 async function loadDownloads() {
-    console.log('Legacy loadDownloads called - redirected to HTMX refresh');
    if (typeof htmx !== 'undefined') {
        htmx.trigger('#downloads-container-inner', 'refresh');
    }