root
3dc5dd8fe9
- 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
3.0 KiB
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/exportsyntax 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