MasutaYunikon
9780aee40d
BREAKING CHANGE: nouvelle architecture frontend avec layout sidebar, système de thèmes et routes restructurées ### Frontend - nouveau layout global `AppLayout.vue` avec sidebar de navigation inspirée Radarr/Sonarr - sidebar configurable via un objet `NavItem[]` avec support parents/enfants cliquables - 3 thèmes CSS (Indigo Électrique, Crimson Night, Teal Froid) persistés via localStorage - switcher de thème en bas de sidebar avec pastilles colorées - logo FanKarr cliquable, bouton déconnexion discret dans le header sidebar - badge animé sur "Activité" affichant le nombre de téléchargements en cours - migration complète vers Tailwind v4 avec variables CSS `@theme` - classes utilitaires globales : `btn-primary`, `btn-secondary`, `settings-card`, `settings-input` ### Vues - `SeriesView` : barre colorée en bas des affiches (vert/bleu/orange), dropdown filtres, boutons taille S/M/L/XL persistés - `SerieView` : bouton état unique par épisode (↓/⟳/✓/✗), badges simplifiés, toast via `useToast` global - `ActivityView` : onglets pill, stats, toggle "masquer importés", polling silencieux - `DashboardView` : stats catalogue/importées/en cours/erreurs, torrents actifs, derniers imports - `SettingsView` découpée en 3 vues indépendantes : `DownloadClientView`, `MediaManagementView`, `CatalogueView` - `LogsView` déplacée dans `src/views/settings/` - `AuthView` : migré au système de thème ### Composants - `SidebarNavItem` : support badge, chevron masqué si badge présent - `SettingsToggle` : composant réutilisable `v-model` - `FolderPicker` : migré au thème, `Teleport` intégré - `ToastContainer` : déplacé en bas droite, groupement des toasts similaires avec badge count ### Router - `AppLayout` comme layout racine pour toutes les routes protégées - `/auth` reste hors layout - redirections `/` → `/series`, `/downloads` → `/activity` - `SettingsLayout` avec titre dynamique par route - scroll géré sur `<main id="main-scroll">` dans `AppLayout` ### Stores & composables - nouveau store `downloads` partagé pour le badge sidebar - `usePosterSize` : taille des affiches persistée en localStorage - `useToast` : groupement des toasts du même type, timer reset au lieu d'empilement ### Serveur - logs structurés via `logger` dans `auth.ts`, `organize.ts`, `organize-worker.ts`, `torrent-clients/index.ts`, `qbittorrent.ts`, `index.ts` - suppression des `console.log/error/warn` en faveur de `logger.info/warn/error/debug` - messages worker routés vers `logger` via `organize.ts` - logs `debug` pour les événements verbeux (healthcheck, skip, worker terminé)
45 lines
1.3 KiB
Vue
45 lines
1.3 KiB
Vue
<template>
|
|
<div class="px-3 py-3 border-t border-border">
|
|
<p class="text-xs text-muted mb-2 uppercase tracking-widest">Thème</p>
|
|
<div class="flex gap-2">
|
|
<button
|
|
v-for="theme in themes"
|
|
:key="theme.id"
|
|
:title="theme.label"
|
|
@click="setTheme(theme.id)"
|
|
class="w-6 h-6 rounded-full border-2 transition-all duration-150 flex items-center justify-center"
|
|
:style="{ backgroundColor: theme.color }"
|
|
:class="current === theme.id
|
|
? 'border-primary scale-110'
|
|
: 'border-transparent opacity-50 hover:opacity-80'"
|
|
>
|
|
<span v-if="current === theme.id" class="block w-1.5 h-1.5 rounded-full bg-white/80" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue'
|
|
|
|
const STORAGE_KEY = 'fankarr-theme'
|
|
|
|
const themes = [
|
|
{ id: 'indigo', label: 'Indigo Électrique', color: '#7B7EF8' },
|
|
{ id: 'crimson', label: 'Crimson Night', color: '#E74C3C' },
|
|
{ id: 'teal', label: 'Teal Froid', color: '#00CDBF' },
|
|
]
|
|
|
|
const current = ref('indigo')
|
|
|
|
function setTheme(id) {
|
|
current.value = id
|
|
document.documentElement.setAttribute('data-theme', id)
|
|
localStorage.setItem(STORAGE_KEY, id)
|
|
}
|
|
|
|
onMounted(() => {
|
|
const saved = localStorage.getItem(STORAGE_KEY) ?? 'indigo'
|
|
setTheme(saved)
|
|
})
|
|
</script> |