Merge branch 'main' into fix/reader-infinite-scroll-up

assets/vue/app/domain/reader/presentation/components/InfiniteReader.vue

@@ -94,14 +94,14 @@ import ReaderPage from './ReaderPage.vue';
         });
     };
 
-    // Calcul de la hauteur du placeholder — miroir exact du maxWidth de ReaderPage
+    // Calcul de la hauteur du placeholder — miroir exact du maxWidth de ReaderPage, zoom inclus
     const getPlaceholderHeight = (page) => {
         const dims = page?.dimensions;
-        if (!dims?.width || !dims?.height) return 800;
+        if (!dims?.width || !dims?.height) return Math.round(800 * props.zoom);
         const displayWidth = windowWidth.value < 1200
             ? Math.min(dims.width, windowWidth.value * 0.95)
             : Math.min(dims.width, 1200);
-        return Math.round((dims.height / dims.width) * displayWidth);
+        return Math.round((dims.height / dims.width) * displayWidth * props.zoom);
     };
 
     const setupObservers = () => {

assets/vue/app/domain/reader/presentation/components/ReaderPage.vue

@@ -87,13 +87,9 @@ import { useReaderStore } from '../../application/store/readerStore';
 
     const store = useReaderStore();
 
-    // En mode single : zoom via la propriété CSS `zoom` (affecte le layout → scrollbars naturelles)
-    // En mode infinite : zoom via transform: scale (pas d'impact layout souhaité)
+    // zoom via la propriété CSS `zoom` dans les deux modes (affecte le layout → pas de chevauchement en mode scroll)
     const containerStyle = computed(() => {
-        if (store.readingMode === 'single') {
-            return { zoom: props.zoom };
-        }
-        return { transform: `scale(${props.zoom})` };
+        return { zoom: props.zoom };
     });
 
     const imageRef = ref(null);

assets/vue/app/domain/system/application/store/statusStore.js

@@ -0,0 +1,26 @@
+import { defineStore } from 'pinia';
+import { ApiStatusRepository } from '../../infrastructure/api/ApiStatusRepository';
+
+const statusRepository = new ApiStatusRepository();
+
+export const useStatusStore = defineStore('system-status', {
+    state: () => ({
+        status: null,
+        loading: false,
+        error: null,
+    }),
+
+    actions: {
+        async loadStatus() {
+            this.loading = true;
+            this.error = null;
+            try {
+                this.status = await statusRepository.getStatus();
+            } catch (e) {
+                this.error = e.message ?? 'Erreur lors du chargement du statut système';
+            } finally {
+                this.loading = false;
+            }
+        },
+    },
+});

assets/vue/app/domain/system/infrastructure/api/ApiStatusRepository.js

@@ -0,0 +1,13 @@
+export class ApiStatusRepository {
+    async getStatus() {
+        const response = await fetch('/api/system/status', {
+            headers: { Accept: 'application/json' },
+        });
+
+        if (!response.ok) {
+            throw new Error(`Erreur HTTP ${response.status}`);
+        }
+
+        return response.json();
+    }
+}

assets/vue/app/domain/system/presentation/components/ChaptersStatusCard.vue

@@ -0,0 +1,36 @@
+<template>
+    <StatusCard title="Chapitres" :icon="DocumentTextIcon">
+        <div class="flex items-baseline gap-2 mb-3">
+            <span class="text-3xl font-bold text-gray-900 dark:text-white">{{ status.totalChapters }}</span>
+            <span class="text-sm text-gray-500">total</span>
+        </div>
+        <div class="mb-1 flex justify-between text-xs text-gray-500">
+            <span>{{ status.downloadedChapters }} téléchargés</span>
+            <span>{{ downloadedPercent }}%</span>
+        </div>
+        <div class="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+            <div
+                class="h-full bg-green-500 rounded-full transition-all"
+                :style="{ width: downloadedPercent + '%' }" />
+        </div>
+        <p class="mt-1 text-xs text-gray-400">{{ status.pendingChapters }} en attente</p>
+    </StatusCard>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { DocumentTextIcon } from '@heroicons/vue/24/outline';
+import StatusCard from './StatusCard.vue';
+
+const props = defineProps({
+    status: {
+        type: Object,
+        required: true,
+    },
+});
+
+const downloadedPercent = computed(() => {
+    if (!props.status.totalChapters) return 0;
+    return Math.round((props.status.downloadedChapters / props.status.totalChapters) * 100);
+});
+</script>

assets/vue/app/domain/system/presentation/components/JobsStatusCard.vue

@@ -0,0 +1,104 @@
+<template>
+    <StatusCard title="Jobs" :icon="CpuChipIcon">
+        <!-- Onglets -->
+        <div class="flex gap-1 mb-3 border-b border-gray-200 dark:border-gray-700">
+            <button
+                v-for="tab in tabs"
+                :key="tab.key"
+                @click="activeTab = tab.key"
+                class="px-3 py-1.5 text-xs font-medium transition-colors"
+                :class="activeTab === tab.key
+                    ? 'border-b-2 border-blue-500 text-blue-600 dark:text-blue-400'
+                    : 'text-gray-500 hover:text-gray-700 dark:hover:text-gray-300'">
+                {{ tab.label }}
+            </button>
+        </div>
+
+        <!-- Contenu -->
+        <template v-if="activeTab === 'global'">
+            <div class="grid grid-cols-2 gap-2">
+                <Metric label="Total" :value="status.totalJobs" />
+                <Metric label="En cours" :value="status.inProgressJobs" color="blue" />
+                <Metric label="Terminés" :value="status.completedJobs" color="green" />
+                <Metric label="En attente" :value="status.pendingJobs" color="yellow" />
+                <Metric label="Échoués" :value="status.failedJobs" color="red" />
+            </div>
+        </template>
+
+        <template v-else-if="activeTab === '24h'">
+            <div class="grid grid-cols-2 gap-2">
+                <Metric label="Total" :value="status.totalJobsLast24h" />
+                <Metric label="Terminés" :value="status.completedJobsLast24h" color="green" />
+                <Metric label="Échoués" :value="status.failedJobsLast24h" color="red" />
+                <div class="col-span-2">
+                    <p class="text-xs text-gray-500 mb-1">Taux de succès</p>
+                    <span class="text-xl font-bold" :class="rateColor(status.successRateLast24h)">
+                        {{ status.successRateLast24h }}%
+                    </span>
+                </div>
+            </div>
+        </template>
+
+        <template v-else>
+            <div class="grid grid-cols-2 gap-2">
+                <Metric label="Total" :value="status.totalJobsLast7d" />
+                <Metric label="Terminés" :value="status.completedJobsLast7d" color="green" />
+                <Metric label="Échoués" :value="status.failedJobsLast7d" color="red" />
+                <div class="col-span-2">
+                    <p class="text-xs text-gray-500 mb-1">Taux de succès</p>
+                    <span class="text-xl font-bold" :class="rateColor(status.successRateLast7d)">
+                        {{ status.successRateLast7d }}%
+                    </span>
+                </div>
+            </div>
+        </template>
+    </StatusCard>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { CpuChipIcon } from '@heroicons/vue/24/outline';
+import StatusCard from './StatusCard.vue';
+
+defineProps({
+    status: {
+        type: Object,
+        required: true,
+    },
+});
+
+const activeTab = ref('global');
+
+const tabs = [
+    { key: 'global', label: 'Global' },
+    { key: '24h', label: '24h' },
+    { key: '7j', label: '7 jours' },
+];
+
+function rateColor(rate) {
+    if (rate >= 80) return 'text-green-600 dark:text-green-400';
+    if (rate >= 50) return 'text-yellow-600 dark:text-yellow-400';
+    return 'text-red-600 dark:text-red-400';
+}
+
+const Metric = {
+    props: {
+        label: String,
+        value: Number,
+        color: { type: String, default: 'gray' },
+    },
+    template: `
+        <div>
+            <p class="text-xs text-gray-500">{{ label }}</p>
+            <p class="text-lg font-semibold"
+               :class="{
+                 'text-gray-900 dark:text-white': color === 'gray',
+                 'text-green-600 dark:text-green-400': color === 'green',
+                 'text-red-600 dark:text-red-400': color === 'red',
+                 'text-yellow-600 dark:text-yellow-400': color === 'yellow',
+                 'text-blue-600 dark:text-blue-400': color === 'blue',
+               }">{{ value }}</p>
+        </div>
+    `,
+};
+</script>

assets/vue/app/domain/system/presentation/components/MangasStatusCard.vue

@@ -0,0 +1,33 @@
+<template>
+    <StatusCard title="Mangas" :icon="BookOpenIcon">
+        <div class="flex items-baseline gap-2 mb-3">
+            <span class="text-3xl font-bold text-gray-900 dark:text-white">{{ status.totalMangas }}</span>
+            <span class="text-sm text-gray-500">total</span>
+            <span class="ml-auto text-sm text-blue-600 dark:text-blue-400">{{ status.monitoredMangas }} suivis</span>
+        </div>
+        <div class="flex flex-wrap gap-2">
+            <span
+                v-for="(count, label) in status.mangasByStatus"
+                :key="label"
+                class="px-2 py-0.5 text-xs rounded-full border border-gray-300 dark:border-gray-600 text-gray-600 dark:text-gray-400">
+                {{ label }}: {{ count }}
+            </span>
+            <span v-if="!hasStatuses" class="text-xs text-gray-400">Aucun statut disponible</span>
+        </div>
+    </StatusCard>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { BookOpenIcon } from '@heroicons/vue/24/outline';
+import StatusCard from './StatusCard.vue';
+
+const props = defineProps({
+    status: {
+        type: Object,
+        required: true,
+    },
+});
+
+const hasStatuses = computed(() => Object.keys(props.status.mangasByStatus ?? {}).length > 0);
+</script>

assets/vue/app/domain/system/presentation/components/SourcesStatusCard.vue

@@ -0,0 +1,41 @@
+<template>
+    <StatusCard title="Sources" :icon="GlobeAltIcon">
+        <div class="flex items-baseline gap-2 mb-3">
+            <span class="text-3xl font-bold text-gray-900 dark:text-white">{{ status.totalSources }}</span>
+            <span class="text-sm text-gray-500">sources configurées</span>
+        </div>
+        <div class="flex flex-wrap gap-2">
+            <span
+                v-for="(count, health) in status.sourcesByHealth"
+                :key="health"
+                class="px-2 py-0.5 text-xs rounded-full"
+                :class="healthBadgeClass(health)">
+                {{ health }}: {{ count }}
+            </span>
+            <span v-if="!hasSources" class="text-xs text-gray-400">Aucune source</span>
+        </div>
+    </StatusCard>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { GlobeAltIcon } from '@heroicons/vue/24/outline';
+import StatusCard from './StatusCard.vue';
+
+const props = defineProps({
+    status: {
+        type: Object,
+        required: true,
+    },
+});
+
+const hasSources = computed(() => Object.keys(props.status.sourcesByHealth ?? {}).length > 0);
+
+function healthBadgeClass(health) {
+    switch (health) {
+        case 'healthy': return 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200';
+        case 'unhealthy': return 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200';
+        default: return 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300';
+    }
+}
+</script>

assets/vue/app/domain/system/presentation/components/StatusCard.vue

@@ -0,0 +1,22 @@
+<template>
+    <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
+        <div class="flex items-center gap-2 mb-3">
+            <component :is="icon" v-if="icon" class="w-5 h-5 text-blue-500 shrink-0" />
+            <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300">{{ title }}</h3>
+        </div>
+        <slot />
+    </div>
+</template>
+
+<script setup>
+defineProps({
+    title: {
+        type: String,
+        required: true,
+    },
+    icon: {
+        type: [Object, Function],
+        default: null,
+    },
+});
+</script>

assets/vue/app/domain/system/presentation/components/StorageStatusCard.vue

@@ -0,0 +1,40 @@
+<template>
+    <StatusCard title="Stockage" :icon="CircleStackIcon">
+        <div class="flex items-baseline gap-2 mb-3">
+            <span class="text-3xl font-bold text-gray-900 dark:text-white">{{ status.storageUsedHuman }}</span>
+            <span class="text-sm text-gray-500">utilisés</span>
+        </div>
+        <div class="mb-1 flex justify-between text-xs text-gray-500">
+            <span>{{ status.storageFreeHuman }} libres</span>
+            <span>{{ usedPercent }}%</span>
+        </div>
+        <div class="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+            <div
+                class="h-full rounded-full transition-all"
+                :class="usedPercent > 90 ? 'bg-red-500' : 'bg-blue-500'"
+                :style="{ width: usedPercent + '%' }" />
+        </div>
+        <p class="mt-1 text-xs text-gray-400">Total : {{ status.storageTotalHuman }}</p>
+        <p class="mt-1 text-xs text-gray-400 truncate" :title="status.storagePath">{{ status.storagePath }}</p>
+    </StatusCard>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { CircleStackIcon } from '@heroicons/vue/24/outline';
+import StatusCard from './StatusCard.vue';
+
+const props = defineProps({
+    status: {
+        type: Object,
+        required: true,
+    },
+});
+
+const diskUsedBytes = computed(() => props.status.storageTotalBytes - props.status.storageFreeBytes);
+
+const usedPercent = computed(() => {
+    if (!props.status.storageTotalBytes) return 0;
+    return Math.round((diskUsedBytes.value / props.status.storageTotalBytes) * 100);
+});
+</script>

assets/vue/app/domain/system/presentation/components/SystemInfoCard.vue

@@ -0,0 +1,32 @@
+<template>
+    <StatusCard title="Informations système" :icon="ServerIcon">
+        <dl class="space-y-2">
+            <div class="flex justify-between text-sm">
+                <dt class="text-gray-500">Version PHP</dt>
+                <dd class="font-medium text-gray-900 dark:text-white">{{ status.phpVersion }}</dd>
+            </div>
+            <div class="flex justify-between text-sm">
+                <dt class="text-gray-500">Généré le</dt>
+                <dd class="font-medium text-gray-900 dark:text-white">{{ formattedDate }}</dd>
+            </div>
+        </dl>
+    </StatusCard>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { ServerIcon } from '@heroicons/vue/24/outline';
+import StatusCard from './StatusCard.vue';
+
+const props = defineProps({
+    status: {
+        type: Object,
+        required: true,
+    },
+});
+
+const formattedDate = computed(() => {
+    if (!props.status.generatedAt) return '';
+    return new Date(props.status.generatedAt).toLocaleString('fr-FR');
+});
+</script>

assets/vue/app/domain/system/presentation/pages/StatusPage.vue

@@ -0,0 +1,71 @@
+<template>
+    <div class="flex flex-col h-full">
+        <Toolbar :config="toolbarConfig" />
+
+        <div class="overflow-y-auto flex-1">
+            <!-- Loading -->
+            <div v-if="loading" class="flex justify-center py-12">
+                <div class="animate-spin h-10 w-10 border-b-2 border-blue-500 rounded-full"></div>
+            </div>
+
+            <!-- Error -->
+            <div v-else-if="error" class="px-6 py-8">
+                <div class="bg-red-50 dark:bg-red-900 border border-red-200 dark:border-red-700 p-4 rounded">
+                    <div class="flex items-center">
+                        <ExclamationCircleIcon class="w-5 h-5 text-red-400 mr-2 shrink-0" />
+                        <p class="text-red-800 dark:text-red-200">{{ error }}</p>
+                    </div>
+                    <button
+                        @click="statusStore.loadStatus()"
+                        class="mt-3 px-4 py-2 bg-red-600 text-white hover:bg-red-700 rounded">
+                        Réessayer
+                    </button>
+                </div>
+            </div>
+
+            <!-- Données -->
+            <div v-else-if="status" class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 p-4">
+                <MangasStatusCard :status="status" />
+                <ChaptersStatusCard :status="status" />
+                <JobsStatusCard :status="status" />
+                <StorageStatusCard :status="status" />
+                <SourcesStatusCard :status="status" />
+                <SystemInfoCard :status="status" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ArrowPathIcon, ExclamationCircleIcon } from '@heroicons/vue/24/outline';
+import { storeToRefs } from 'pinia';
+import { computed, onMounted } from 'vue';
+import Toolbar from '../../../../shared/components/ui/Toolbar.vue';
+import { useStatusStore } from '../../application/store/statusStore';
+import ChaptersStatusCard from '../components/ChaptersStatusCard.vue';
+import JobsStatusCard from '../components/JobsStatusCard.vue';
+import MangasStatusCard from '../components/MangasStatusCard.vue';
+import SourcesStatusCard from '../components/SourcesStatusCard.vue';
+import StorageStatusCard from '../components/StorageStatusCard.vue';
+import SystemInfoCard from '../components/SystemInfoCard.vue';
+
+const statusStore = useStatusStore();
+const { status, loading, error } = storeToRefs(statusStore);
+
+onMounted(() => statusStore.loadStatus());
+
+const toolbarConfig = computed(() => ({
+    leftSection: [
+        { type: 'label', text: 'Statut système', class: 'text-sm font-medium' },
+    ],
+    rightSection: [
+        {
+            type: 'button',
+            icon: ArrowPathIcon,
+            label: 'Rafraîchir',
+            disabled: loading.value,
+            onClick: () => statusStore.loadStatus(),
+        },
+    ],
+}));
+</script>

assets/vue/app/router/index.js

@@ -11,24 +11,9 @@ import ScrapperConfigurations from '../domain/setting/presentation/pages/Scrappe
 import ScrapperEdit from '../domain/setting/presentation/pages/ScrapperEdit.vue';
 import UserPreferencesPage from '../domain/setting/presentation/pages/UserPreferencesPage.vue';
 import LogsPage from '../domain/system/presentation/pages/LogsPage.vue';
+import StatusPage from '../domain/system/presentation/pages/StatusPage.vue';
 import Layout from '../shared/components/layout/Layout.vue';
 
-// Placeholder component for new routes
-const PlaceholderComponent = {
-    props: {
-        title: {
-            type: String,
-            required: true
-        }
-    },
-    template: `
-    <div class="container mx-auto px-4 py-8">
-      <h1 class="text-2xl font-bold mb-4">{{ title }}</h1>
-      <p class="text-gray-600">Cette fonctionnalité sera bientôt disponible.</p>
-    </div>
-  `
-};
-
 const routes = [
     {
         path: '/',
@@ -66,13 +51,6 @@ const routes = [
                 name: 'import',
                 component: NewImportPage
             },
-            // Pages placeholder avec chargement différé
-            {
-                path: '/manga/import',
-                name: 'manga-import',
-                component: PlaceholderComponent,
-                props: { title: 'Import de bibliothèque' }
-            },
             {
                 path: '/manga/discover',
                 name: 'discover',
@@ -91,21 +69,7 @@ const routes = [
             // Paramètres
             {
                 path: '/settings',
-                name: 'settings',
-                component: PlaceholderComponent,
-                props: { title: 'Paramètres' }
-            },
-            {
-                path: '/settings/general',
-                name: 'settings-general',
-                component: PlaceholderComponent,
-                props: { title: 'Paramètres généraux' }
-            },
-            {
-                path: '/settings/folders',
-                name: 'settings-folders',
-                component: PlaceholderComponent,
-                props: { title: 'Gestion des dossiers' }
+                redirect: '/settings/scrappers',
             },
             {
                 path: '/settings/scrappers',
@@ -130,33 +94,18 @@ const routes = [
             // Système
             {
                 path: '/system',
-                name: 'system',
-                component: PlaceholderComponent,
-                props: { title: 'Système' }
+                redirect: '/system/status',
             },
             {
                 path: '/system/status',
                 name: 'system-status',
-                component: PlaceholderComponent,
-                props: { title: 'Status du système' }
-            },
-            {
-                path: '/system/backup',
-                name: 'system-backup',
-                component: PlaceholderComponent,
-                props: { title: 'Sauvegarde' }
+                component: StatusPage,
             },
             {
                 path: '/system/logs',
                 name: 'system-logs',
                 component: LogsPage,
             },
-            {
-                path: '/system/updates',
-                name: 'system-updates',
-                component: PlaceholderComponent,
-                props: { title: 'Mises à jour' }
-            }
         ]
     }
 ];

assets/vue/app/shared/components/layout/Sidebar.vue

@@ -78,11 +78,9 @@ import MenuGroup from './sidebar/MenuGroup.vue';
         {
             icon: Cog6ToothIcon,
             text: 'Paramètres',
-            to: '/settings',
+            to: '/settings/scrappers',
             id: 'settings',
             subItems: [
-                { icon: null, text: 'Général', to: '/settings/general' },
-                { icon: null, text: 'Dossiers', to: '/settings/folders' },
                 { icon: null, text: 'Scrappers', to: '/settings/scrappers' },
                 { icon: null, text: 'UI', to: '/settings/ui' }
             ]
@@ -90,13 +88,11 @@ import MenuGroup from './sidebar/MenuGroup.vue';
         {
             icon: ComputerDesktopIcon,
             text: 'Système',
-            to: '/system',
+            to: '/system/status',
             id: 'system',
             subItems: [
                 { icon: null, text: 'Status', to: '/system/status' },
-                { icon: null, text: 'Backup', to: '/system/backup' },
                 { icon: null, text: 'Logs', to: '/system/logs' },
-                { icon: null, text: 'Updates', to: '/system/updates' }
             ]
         }
     ];