feat(organize): worker thread + badges statut + notifications

- api: /api/organize/recent pour les notifications frontend
- api: /api/system pour détecter l'environnement Docker
- ui: badge organisation (NON ORGANISÉ / EN COURS / ORGANISÉ) dans DownloadsView
- ui: icône download avec compteur actifs dans le header CatalogView
- ui: toast automatique quand l'auto-organisation se termine
- ui: paths en lecture seule avec badge DOCKER dans SettingsView

server/index.ts

@@ -230,13 +230,69 @@ app.get('/api/downloads', requireAuth, async (_req, res) => {
     try {
         const { category } = readSettings()
         const torrents = await dispatchList(category ?? 'fankai')
-        res.json(torrents)
+
+        // Enrichir avec l'état d'organisation
+        let organized: Record<string, Record<string, string>> = {}
+        try {
+            const orgPath = path.join(process.cwd(), 'data', 'organized.json')
+            if (fs.existsSync(orgPath))
+                organized = JSON.parse(fs.readFileSync(orgPath, 'utf-8'))
+        } catch {}
+
+        let torrentFinal: any[] = []
+        try {
+            const tfPath = path.join(process.cwd(), 'data', 'torrent_final.json')
+            if (fs.existsSync(tfPath))
+                torrentFinal = JSON.parse(fs.readFileSync(tfPath, 'utf-8'))
+        } catch {}
+
+        const enriched = torrents.map((t: any) => {
+            const orgFiles  = organized[t.hash] ?? {}
+            const meta      = torrentFinal.find((m: any) =>
+                m.infohash?.toLowerCase() === t.hash?.toLowerCase()
+            )
+            const totalFiles = (meta?.torrent_files?.length ?? 0) || 1
+            const doneFiles  = Object.keys(orgFiles).length
+            let organizeState: 'none' | 'partial' | 'done' = 'none'
+            if (doneFiles >= totalFiles) organizeState = 'done'
+            else if (doneFiles > 0)      organizeState = 'partial'
+            return { ...t, organizeState, organizeProgress: { done: doneFiles, total: totalFiles } }
+        })
+
+        res.json(enriched)
     } catch (err) {
         res.status(500).json({ error: err instanceof Error ? err.message : 'Erreur inconnue' })
     }
 })
 
-// ── Organize ───────────────────────────────────────────────────
+// ── Résultats d'organisation récents (pour notifications frontend) ──
+interface OrganizeNotif {
+    hash    : string
+    name    : string
+    done    : number
+    skipped : number
+    errors  : number
+    at      : string
+}
+const recentOrganized: OrganizeNotif[] = []
+const MAX_NOTIFS = 20
+
+function pushNotif(n: OrganizeNotif) {
+    recentOrganized.unshift(n)
+    if (recentOrganized.length > MAX_NOTIFS) recentOrganized.pop()
+}
+
+app.get('/api/organize/recent', requireAuth, (_req, res) => {
+    res.json(recentOrganized)
+})
+
+// Vider les notifs lues
+app.post('/api/organize/recent/clear', requireAuth, (_req, res) => {
+    recentOrganized.length = 0
+    res.json({ ok: true })
+})
+
+
 app.post('/api/organize', requireAuth, async (req, res) => {
     const { hash, name, save_path } = req.body
     if (!hash || !name || !save_path) {
@@ -252,6 +308,12 @@ app.post('/api/organize', requireAuth, async (req, res) => {
 })
 
 // ── Torrents status ────────────────────────────────────────────
+// ── System info ────────────────────────────────────────────────
+app.get('/api/system', requireAuth, (_req, res) => {
+    const isDocker = fs.existsSync('/.dockerenv')
+    res.json({ isDocker })
+})
+
 app.get('/api/torrents/status', requireAuth, (_req, res) => {
     try {
         if (!fs.existsSync(TORRENTS_PATH)) { res.json({ exists: false, count: 0, empty: true }); return }
@@ -299,7 +361,14 @@ app.listen(PORT, () => {
     const autoOrganize = async () => {
         try {
             const { category } = readSettings()
-            await autoOrganizeAll(() => dispatchList(category ?? 'fankai'))
+            await autoOrganizeAll(
+                () => dispatchList(category ?? 'fankai'),
+                (result) => {
+                    if (result.done > 0 || result.errors > 0) {
+                        pushNotif({ ...result, at: new Date().toISOString() })
+                    }
+                }
+            )
         } catch (err) {
             console.error('[organize] Erreur auto-organise:', err)
         }

server/organize.ts

@@ -24,7 +24,8 @@ export interface OrganizeResult {
  * puis les données sont passées au worker.
  */
 export async function autoOrganizeAll(
-    listFn: () => Promise<any[]>
+    listFn  : () => Promise<any[]>,
+    onResult?: (r: { hash: string; name: string; done: number; skipped: number; errors: number }) => void
 ): Promise<void> {
     if (workerRunning) {
         console.log('[organize] Worker déjà en cours, skip')
@@ -58,6 +59,13 @@ export async function autoOrganizeAll(
             else console.log(msg.msg)
         } else if (msg.type === 'result') {
             console.log(`[organize] ${msg.name} → ${msg.done} OK, ${msg.skipped} skippés, ${msg.errors.length} erreurs`)
+            onResult?.({
+                hash   : msg.hash,
+                name   : msg.name,
+                done   : msg.done,
+                skipped: msg.skipped,
+                errors : msg.errors.length,
+            })
         } else if (msg.type === 'done') {
             console.log('[organize] Worker terminé')
             workerRunning = false

src/views/CatalogView.vue

@@ -8,14 +8,20 @@
           <span class="text-zinc-100">Fan</span><span class="text-orange-500">karr</span>
         </span>
         <div class="flex items-center gap-2">
+          <!-- Icône downloads avec badge -->
           <router-link to="/downloads"
-                       class="p-2 rounded-lg text-zinc-500 hover:text-zinc-100 hover:bg-white/5 transition relative">
+                       class="relative p-2 rounded-lg text-zinc-500 hover:text-zinc-100 hover:bg-white/5 transition"
+          >
             <svg width="18" height="18" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/>
+              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+              <polyline points="7 10 12 15 17 10"/>
+              <line x1="12" y1="15" x2="12" y2="3"/>
             </svg>
-            <!-- Badge si téléchargements actifs -->
+            <!-- Badge compteur -->
             <span v-if="activeDownloads > 0"
-                  class="absolute top-1 right-1 w-2 h-2 bg-[#e8513a] rounded-full"/>
+                  class="absolute -top-0.5 -right-0.5 min-w-[16px] h-4 bg-orange-500 text-white text-[9px] font-bold rounded-full flex items-center justify-center px-1 leading-none">
+              {{ activeDownloads }}
+            </span>
           </router-link>
           <router-link
               to="/settings"
@@ -148,19 +154,20 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, onMounted, onUnmounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useSeriesStore } from '@/stores/series'
 import { useAuthStore } from '@/stores/auth'
-
-defineOptions({ name: 'CatalogView' })
+import { useToast } from '@/composables/useToast'
 
 const store = useSeriesStore()
 const auth = useAuthStore()
 const router = useRouter()
+const { add: toast } = useToast()
 
 const search = ref('')
 const activeFilter = ref('all')
+const activeDownloads = ref(0)
 
 const filters = [
   { label: 'Toutes', value: 'all' },
@@ -181,10 +188,52 @@ const filtered = computed(() => {
 
 async function handleLogout() {
   await auth.logout()
-  router.push('/auth')
+  await router.push('/auth')
+}
+
+// ── Polling downloads actifs + notifications organisation ──────
+let dlInterval: ReturnType<typeof setInterval> | null = null
+const seenNotifs = new Set<string>()
+
+async function fetchActiveDownloads() {
+  try {
+    const res = await fetch('/api/downloads', { credentials: 'include' })
+    if (!res.ok) return
+    const torrents = await res.json()
+    activeDownloads.value = torrents.filter((t: any) => t.state === 'downloading').length
+  } catch {}
+}
+
+async function fetchOrganizeNotifs() {
+  try {
+    const res = await fetch('/api/organize/recent', { credentials: 'include' })
+    if (!res.ok) return
+    const notifs: any[] = await res.json()
+    for (const n of notifs) {
+      const key = `${n.hash}-${n.at}`
+      if (seenNotifs.has(key)) continue
+      seenNotifs.add(key)
+      if (n.done > 0) {
+        const msg = n.errors > 0
+            ? `${n.name} — ${n.done} fichier(s) organisé(s), ${n.errors} erreur(s)`
+            : `${n.name} — ${n.done} fichier(s) organisé(s) ✓`
+        toast(msg, n.errors > 0 ? 'error' : 'success')
+      }
+    }
+  } catch {}
 }
 
 onMounted(() => {
   if (store.series.length === 0) store.fetchSeries()
+  fetchActiveDownloads()
+  fetchOrganizeNotifs()
+  dlInterval = setInterval(() => {
+    fetchActiveDownloads()
+    fetchOrganizeNotifs()
+  }, 10000)
+})
+
+onUnmounted(() => {
+  if (dlInterval) clearInterval(dlInterval)
 })
 </script>

src/views/DownloadsView.vue

@@ -103,16 +103,25 @@
             </span>
           </div>
 
-          <!-- Bouton organiser si complété -->
-          <button v-if="t.state === 'seeding'"
-                  @click="organize(t)"
-                  :disabled="organizing[t.hash]"
-                  class="text-[10px] tracking-widest px-3 py-1 border transition-colors cursor-pointer"
-                  :class="organized[t.hash]
-                ? 'border-green-500/40 text-green-500'
-                : 'border-[#1e2d3d] text-[#5a7a94] hover:border-[#e8513a] hover:text-[#e8513a]'">
-            {{ organized[t.hash] ? 'ORGANISÉ ✓' : organizing[t.hash] ? '...' : 'ORGANISER' }}
-          </button>
+          <!-- Badge organisation -->
+          <div v-if="t.state === 'seeding'" class="flex items-center gap-2">
+            <!-- Badge statut -->
+            <span class="text-[9px] tracking-widest px-2 py-0.5 border"
+                  :class="t.organizeState === 'done'    ? 'border-green-500/40 text-green-500' :
+                        t.organizeState === 'partial'  ? 'border-yellow-500/40 text-yellow-500' :
+                                                         'border-[#1e2d3d] text-[#5a7a94]'">
+              {{ t.organizeState === 'done'    ? `ORGANISÉ (${t.organizeProgress?.done}/${t.organizeProgress?.total})` :
+                t.organizeState === 'partial' ? `EN COURS (${t.organizeProgress?.done}/${t.organizeProgress?.total})` :
+                    'NON ORGANISÉ' }}
+            </span>
+            <!-- Bouton organiser si pas encore fait -->
+            <button v-if="t.organizeState !== 'done'"
+                    @click="organize(t)"
+                    :disabled="organizing[t.hash]"
+                    class="text-[9px] tracking-widest px-3 py-1 border transition-colors cursor-pointer border-[#1e2d3d] text-[#5a7a94] hover:border-[#e8513a] hover:text-[#e8513a] disabled:opacity-50">
+              {{ organizing[t.hash] ? '...' : 'ORGANISER' }}
+            </button>
+          </div>
         </div>
       </div>
     </div>
@@ -130,7 +139,6 @@ const loading    = ref(true)
 const polling    = ref(true)
 const noClients  = ref(false)
 const organizing = ref<Record<string, boolean>>({})
-const organized  = ref<Record<string, boolean>>({})
 
 let pollInterval: ReturnType<typeof setInterval> | null = null
 

src/views/SettingsView.vue

@@ -87,20 +87,34 @@
 
         <!-- Dossier complétion -->
         <div>
-          <label class="text-[10px] text-[#5a7a94] tracking-widest block mb-1.5">DOSSIER COMPLÉTION</label>
-          <input v-model="form.completePath"
-                 class="w-full bg-[#121920] border border-[#1e2d3d] text-white px-3 py-2.5 text-sm outline-none focus:border-[#e8513a] transition-colors"
+          <div class="flex items-center gap-2 mb-1.5">
+            <label class="text-[10px] text-[#5a7a94] tracking-widest">DOSSIER COMPLÉTION</label>
+            <span v-if="isDocker" class="text-[9px] tracking-widest text-[#3a8fe8] border border-[#3a8fe8]/40 px-1.5 py-0.5">DOCKER</span>
+          </div>
+          <input v-model="form.completePath" :disabled="isDocker"
+                 class="w-full bg-[#121920] border border-[#1e2d3d] text-sm px-3 py-2.5 outline-none transition-colors"
+                 :class="isDocker ? 'text-[#5a7a94] cursor-not-allowed opacity-60' : 'text-white focus:border-[#e8513a]'"
                  placeholder="/downloads/complete"/>
-          <p class="text-[10px] text-[#5a7a94] mt-1.5">Dossier de complétion de qBittorrent (monté dans Docker)</p>
+          <p class="text-[10px] text-[#5a7a94] mt-1.5">
+            <span v-if="isDocker">Défini par le volume Docker — non modifiable ici</span>
+            <span v-else>Dossier de complétion de qBittorrent</span>
+          </p>
         </div>
 
         <!-- Dossier Jellyfin -->
         <div>
-          <label class="text-[10px] text-[#5a7a94] tracking-widest block mb-1.5">DOSSIER JELLYFIN</label>
-          <input v-model="form.mediaPath"
-                 class="w-full bg-[#121920] border border-[#1e2d3d] text-white px-3 py-2.5 text-sm outline-none focus:border-[#e8513a] transition-colors"
+          <div class="flex items-center gap-2 mb-1.5">
+            <label class="text-[10px] text-[#5a7a94] tracking-widest">DOSSIER JELLYFIN</label>
+            <span v-if="isDocker" class="text-[9px] tracking-widest text-[#3a8fe8] border border-[#3a8fe8]/40 px-1.5 py-0.5">DOCKER</span>
+          </div>
+          <input v-model="form.mediaPath" :disabled="isDocker"
+                 class="w-full bg-[#121920] border border-[#1e2d3d] text-sm px-3 py-2.5 outline-none transition-colors"
+                 :class="isDocker ? 'text-[#5a7a94] cursor-not-allowed opacity-60' : 'text-white focus:border-[#e8513a]'"
                  placeholder="/media/Kai"/>
-          <p class="text-[10px] text-[#5a7a94] mt-1.5">Dossier racine de la bibliothèque Fankai dans Jellyfin</p>
+          <p class="text-[10px] text-[#5a7a94] mt-1.5">
+            <span v-if="isDocker">Défini par le volume Docker — non modifiable ici</span>
+            <span v-else>Dossier racine de la bibliothèque Fankai dans Jellyfin</span>
+          </p>
         </div>
 
         <!-- Mode organisation -->
@@ -215,8 +229,9 @@ const form = ref({
   organizeMode: 'hardlink' as 'hardlink' | 'move',
 })
 
-const saving   = ref(false)
-const updating = ref(false)
+const saving    = ref(false)
+const updating  = ref(false)
+const isDocker  = ref(false)
 const torrentsStatus = ref({ exists: false, count: 0, empty: true })
 
 const clients          = ref<any[]>([])
@@ -244,18 +259,20 @@ function clientLabel(type: string): string {
 
 // ── Init ───────────────────────────────────────────────────────
 onMounted(async () => {
-  const [settingsRes, statusRes, clientsRes, availRes] = await Promise.all([
+  const [settingsRes, statusRes, clientsRes, availRes, systemRes] = await Promise.all([
     fetch('/api/settings',                  { credentials: 'include' }),
     fetch('/api/torrents/status',           { credentials: 'include' }),
     fetch('/api/torrent-clients',           { credentials: 'include' }),
     fetch('/api/torrent-clients/available', { credentials: 'include' }),
+    fetch('/api/system',                    { credentials: 'include' }),
   ])
   if (settingsRes.ok) Object.assign(form.value, await settingsRes.json())
   if (statusRes.ok)   torrentsStatus.value = await statusRes.json()
   if (clientsRes.ok)  clients.value        = await clientsRes.json()
   if (availRes.ok)    availableClients.value = await availRes.json()
+  if (systemRes.ok)   isDocker.value = (await systemRes.json()).isDocker
 
-  for (const c of clients.value) refreshHealth(c.uuid)
+  for (const c of clients.value) await refreshHealth(c.uuid)
 })
 
 // ── Healthcheck ────────────────────────────────────────────────
@@ -345,7 +362,7 @@ async function saveClient() {
     if (res.ok) {
       const client = await res.json()
       clients.value.push(client)
-      refreshHealth(client.uuid)
+      await refreshHealth(client.uuid)
       closeModal()
       toast('Client enregistré ✓', 'success')
     } else {