julienfroidefond/stripstream
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: remove caching-related API endpoints and configurations, update preferences structure, and clean up unused services
All checks were successful
Deploy with Docker Compose / deploy (push) Successful in 7m22s
Details

Browse Source
This commit is contained in:
Julien Froidefond
2026-01-03 18:55:12 +01:00
parent acd26ea427
commit 512e9a480f
49 changed files with 244 additions and 4073 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/home/ClientHomePage.tsx
View File

@@ -22,9 +22,7 @@ export function ClientHomePage() {
setError(null);
try {
const response = await fetch("/api/komga/home", {
cache: "default", // Utilise le cache HTTP du navigateur
});
const response = await fetch("/api/komga/home");
if (!response.ok) {
const errorData = await response.json();
@@ -56,18 +54,8 @@ export function ClientHomePage() {
const handleRefresh = async () => {
try {
// Invalider le cache via l'API
const deleteResponse = await fetch("/api/komga/home", {
method: "DELETE",
});
if (!deleteResponse.ok) {
throw new Error("Erreur lors de l'invalidation du cache");
}
// Récupérer les nouvelles données
const response = await fetch("/api/komga/home", {
cache: "reload", // Force un nouveau fetch après invalidation
cache: "reload",
});
if (!response.ok) {

65
src/components/layout/ClientLayout.tsx
View File

@@ -10,7 +10,6 @@ import { usePathname } from "next/navigation";
import { registerServiceWorker } from "@/lib/registerSW";
import { NetworkStatus } from "../ui/NetworkStatus";
import { usePreferences } from "@/contexts/PreferencesContext";
import { ImageCacheProvider } from "@/contexts/ImageCacheContext";
import type { KomgaLibrary, KomgaSeries } from "@/types/komga";
import logger from "@/lib/logger";
@@ -152,39 +151,37 @@ export default function ClientLayout({
return (
<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
<ImageCacheProvider>
{/* Background fixe pour les images et gradients */}
{hasCustomBackground && <div className="fixed inset-0 -z-10" style={backgroundStyle} />}
<div
className={`relative min-h-screen ${hasCustomBackground ? "" : "bg-background"}`}
style={
hasCustomBackground
? { backgroundColor: `rgba(var(--background-rgb, 255, 255, 255), ${contentOpacity})` }
: undefined
}
>
{!isPublicRoute && (
<Header
onToggleSidebar={handleToggleSidebar}
onRefreshBackground={fetchRandomBook}
showRefreshBackground={preferences.background.type === "komga-random"}
/>
)}
{!isPublicRoute && (
<Sidebar
isOpen={isSidebarOpen}
onClose={handleCloseSidebar}
initialLibraries={initialLibraries}
initialFavorites={initialFavorites}
userIsAdmin={userIsAdmin}
/>
)}
<main className={!isPublicRoute ? "pt-safe" : ""}>{children}</main>
<InstallPWA />
<Toaster />
<NetworkStatus />
</div>
</ImageCacheProvider>
{/* Background fixe pour les images et gradients */}
{hasCustomBackground && <div className="fixed inset-0 -z-10" style={backgroundStyle} />}
<div
className={`relative min-h-screen ${hasCustomBackground ? "" : "bg-background"}`}
style={
hasCustomBackground
? { backgroundColor: `rgba(var(--background-rgb, 255, 255, 255), ${contentOpacity})` }
: undefined
}
>
{!isPublicRoute && (
<Header
onToggleSidebar={handleToggleSidebar}
onRefreshBackground={fetchRandomBook}
showRefreshBackground={preferences.background.type === "komga-random"}
/>
)}
{!isPublicRoute && (
<Sidebar
isOpen={isSidebarOpen}
onClose={handleCloseSidebar}
initialLibraries={initialLibraries}
initialFavorites={initialFavorites}
userIsAdmin={userIsAdmin}
/>
)}
<main className={!isPublicRoute ? "pt-safe" : ""}>{children}</main>
<InstallPWA />
<Toaster />
<NetworkStatus />
</div>
</ThemeProvider>
);
}

2
src/components/reader/PhotoswipeReader.tsx
View File

@@ -75,8 +75,6 @@ export function PhotoswipeReader({ book, pages, onClose, nextBook }: BookReaderP
}, []);
// Prefetch current and next pages
// Deduplication in useImageLoader prevents redundant requests
// Server queue (RequestQueueService) handles concurrency limits
useEffect(() => {
// Prefetch pages starting from current page
prefetchPages(currentPage, prefetchCount);

2
src/components/reader/hooks/useImageLoader.ts
View File

@@ -99,8 +99,6 @@ export function useImageLoader({
);
// Prefetch multiple pages starting from a given page
// The server-side queue (RequestQueueService) handles concurrency limits
// We only deduplicate to avoid redundant HTTP requests
const prefetchPages = useCallback(
async (startPage: number, count: number = prefetchCount) => {
const pagesToPrefetch = [];

103
src/components/settings/AdvancedSettings.tsx
View File

@@ -2,7 +2,7 @@ import { useTranslate } from "@/hooks/useTranslate";
import { usePreferences } from "@/contexts/PreferencesContext";
import { useToast } from "@/components/ui/use-toast";
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { Activity, Shield } from "lucide-react";
import { Activity } from "lucide-react";
import { SliderControl } from "@/components/ui/slider-control";
import logger from "@/lib/logger";
@@ -11,25 +11,6 @@ export function AdvancedSettings() {
const { toast } = useToast();
const { preferences, updatePreferences } = usePreferences();
const handleMaxConcurrentChange = async (value: number) => {
try {
await updatePreferences({
komgaMaxConcurrentRequests: value,
});
toast({
title: t("settings.title"),
description: t("settings.komga.messages.configSaved"),
});
} catch (error) {
logger.error({ err: error }, "Erreur:");
toast({
variant: "destructive",
title: t("settings.error.title"),
description: t("settings.error.message"),
});
}
};
const handlePrefetchChange = async (value: number) => {
try {
await updatePreferences({
@@ -49,28 +30,6 @@ export function AdvancedSettings() {
}
};
const handleCircuitBreakerChange = async (field: string, value: number) => {
try {
await updatePreferences({
circuitBreakerConfig: {
...preferences.circuitBreakerConfig,
[field]: value,
},
});
toast({
title: t("settings.title"),
description: t("settings.komga.messages.configSaved"),
});
} catch (error) {
logger.error({ err: error }, "Erreur:");
toast({
variant: "destructive",
title: t("settings.error.title"),
description: t("settings.error.message"),
});
}
};
return (
<div className="space-y-6">
{/* Performance Settings */}
@@ -85,18 +44,6 @@ export function AdvancedSettings() {
</CardDescription>
</CardHeader>
<CardContent className="space-y-6">
<SliderControl
label={t("settings.advanced.maxConcurrentRequests.label")}
value={preferences.komgaMaxConcurrentRequests}
min={1}
max={10}
step={1}
description={t("settings.advanced.maxConcurrentRequests.description")}
onChange={handleMaxConcurrentChange}
/>
<div className="border-t" />
<SliderControl
label={t("settings.advanced.prefetchCount.label")}
value={preferences.readerPrefetchCount}
@@ -108,54 +55,6 @@ export function AdvancedSettings() {
/>
</CardContent>
</Card>
{/* Circuit Breaker Configuration */}
<Card>
<CardHeader>
<div className="flex items-center gap-2">
<Shield className="h-5 w-5 text-primary" />
<CardTitle className="text-lg">{t("settings.advanced.circuitBreaker.title")}</CardTitle>
</div>
<CardDescription>{t("settings.advanced.circuitBreaker.description")}</CardDescription>
</CardHeader>
<CardContent className="space-y-6">
<SliderControl
label={t("settings.advanced.circuitBreaker.threshold.label")}
value={preferences.circuitBreakerConfig.threshold ?? 5}
min={1}
max={20}
step={1}
description={t("settings.advanced.circuitBreaker.threshold.description")}
onChange={(value) => handleCircuitBreakerChange("threshold", value)}
/>
<div className="border-t" />
<SliderControl
label={t("settings.advanced.circuitBreaker.timeout.label")}
value={preferences.circuitBreakerConfig.timeout ?? 30000}
min={1000}
max={120000}
step={1000}
description={t("settings.advanced.circuitBreaker.timeout.description")}
onChange={(value) => handleCircuitBreakerChange("timeout", value)}
formatValue={(value) => `${value / 1000}s`}
/>
<div className="border-t" />
<SliderControl
label={t("settings.advanced.circuitBreaker.resetTimeout.label")}
value={preferences.circuitBreakerConfig.resetTimeout ?? 60000}
min={10000}
max={600000}
step={1000}
description={t("settings.advanced.circuitBreaker.resetTimeout.description")}
onChange={(value) => handleCircuitBreakerChange("resetTimeout", value)}
formatValue={(value) => `${value / 1000}s`}
/>
</CardContent>
</Card>
</div>
);
}

61
src/components/settings/CacheModeSwitch.tsx
View File

@@ -1,61 +0,0 @@
"use client";
import { useState } from "react";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
import { useToast } from "@/components/ui/use-toast";
import { usePreferences } from "@/contexts/PreferencesContext";
import logger from "@/lib/logger";
export function CacheModeSwitch() {
const [isLoading, setIsLoading] = useState(false);
const { toast } = useToast();
const { preferences, updatePreferences } = usePreferences();
const handleToggle = async (checked: boolean) => {
setIsLoading(true);
try {
// Mettre à jour les préférences
await updatePreferences({ cacheMode: checked ? "memory" : "file" });
// Mettre à jour le mode de cache côté serveur
const res = await fetch("/api/komga/cache/mode", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ mode: checked ? "memory" : "file" }),
});
if (!res.ok) throw new Error();
toast({
title: "Mode de cache modifié",
description: `Le cache est maintenant en mode ${checked ? "mémoire" : "fichier"}`,
});
} catch (error) {
logger.error({ err: error }, "Erreur lors de la modification du mode de cache:");
toast({
variant: "destructive",
title: "Erreur",
description: "Impossible de modifier le mode de cache",
});
} finally {
setIsLoading(false);
}
};
return (
<div className="flex items-center space-x-2">
<Switch
id="cache-mode"
checked={preferences.cacheMode === "memory"}
onCheckedChange={handleToggle}
disabled={isLoading}
/>
<Label htmlFor="cache-mode" className="text-sm text-muted-foreground">
Cache en mémoire {isLoading && "(chargement...)"}
</Label>
</div>
);
}

938
src/components/settings/CacheSettings.tsx
View File

@@ -1,938 +0,0 @@
"use client";
import { useState, useEffect } from "react";
import { useTranslate } from "@/hooks/useTranslate";
import { useToast } from "@/components/ui/use-toast";
import { Trash2, Loader2, HardDrive, List, ChevronDown, ChevronUp, ImageOff } from "lucide-react";
import { CacheModeSwitch } from "@/components/settings/CacheModeSwitch";
import { Label } from "@/components/ui/label";
import type { TTLConfigData } from "@/types/komga";
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { useImageCache } from "@/contexts/ImageCacheContext";
import logger from "@/lib/logger";
interface CacheSettingsProps {
initialTTLConfig: TTLConfigData | null;
}
interface CacheSizeInfo {
sizeInBytes: number;
itemCount: number;
}
interface CacheEntry {
key: string;
size: number;
expiry: number;
isExpired: boolean;
}
interface ServiceWorkerCacheEntry {
url: string;
size: number;
cacheName: string;
}
export function CacheSettings({ initialTTLConfig }: CacheSettingsProps) {
const { t } = useTranslate();
const { toast } = useToast();
const { flushImageCache } = useImageCache();
const [isCacheClearing, setIsCacheClearing] = useState(false);
const [isServiceWorkerClearing, setIsServiceWorkerClearing] = useState(false);
const [serverCacheSize, setServerCacheSize] = useState<CacheSizeInfo | null>(null);
const [swCacheSize, setSwCacheSize] = useState<number | null>(null);
const [apiCacheSize, setApiCacheSize] = useState<number | null>(null);
const [isLoadingCacheSize, setIsLoadingCacheSize] = useState(true);
const [cacheEntries, setCacheEntries] = useState<CacheEntry[]>([]);
const [isLoadingEntries, setIsLoadingEntries] = useState(false);
const [showEntries, setShowEntries] = useState(false);
const [swCacheEntries, setSwCacheEntries] = useState<ServiceWorkerCacheEntry[]>([]);
const [isLoadingSwEntries, setIsLoadingSwEntries] = useState(false);
const [showSwEntries, setShowSwEntries] = useState(false);
const [expandedGroups, setExpandedGroups] = useState<Record<string, boolean>>({});
const [expandedVersions, setExpandedVersions] = useState<Record<string, boolean>>({});
const [ttlConfig, setTTLConfig] = useState<TTLConfigData>(
initialTTLConfig || {
defaultTTL: 5,
homeTTL: 5,
librariesTTL: 1440,
seriesTTL: 5,
booksTTL: 5,
imagesTTL: 1440,
imageCacheMaxAge: 2592000,
}
);
const formatBytes = (bytes: number): string => {
if (bytes === 0) return "0 B";
const k = 1024;
const sizes = ["B", "KB", "MB", "GB"];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return `${(bytes / Math.pow(k, i)).toFixed(2)} ${sizes[i]}`;
};
const formatDate = (timestamp: number): string => {
return new Date(timestamp).toLocaleString();
};
const getTimeRemaining = (expiry: number): string => {
const now = Date.now();
const diff = expiry - now;
if (diff < 0) return t("settings.cache.entries.expired");
const minutes = Math.floor(diff / 60000);
const hours = Math.floor(minutes / 60);
const days = Math.floor(hours / 24);
if (days > 0) return t("settings.cache.entries.daysRemaining", { count: days });
if (hours > 0) return t("settings.cache.entries.hoursRemaining", { count: hours });
if (minutes > 0) return t("settings.cache.entries.minutesRemaining", { count: minutes });
return t("settings.cache.entries.lessThanMinute");
};
const getCacheType = (key: string): string => {
if (key.includes("/home")) return "HOME";
if (key.includes("/libraries")) return "LIBRARIES";
if (key.includes("/series/")) return "SERIES";
if (key.includes("/books/")) return "BOOKS";
if (key.includes("/images/")) return "IMAGES";
return "DEFAULT";
};
const fetchCacheSize = async () => {
setIsLoadingCacheSize(true);
try {
// Récupérer la taille du cache serveur
const serverResponse = await fetch("/api/komga/cache/size");
if (serverResponse.ok) {
const serverData = await serverResponse.json();
setServerCacheSize({
sizeInBytes: serverData.sizeInBytes,
itemCount: serverData.itemCount,
});
}
// Calculer la taille du cache Service Worker
if ("caches" in window) {
const cacheNames = await caches.keys();
let totalSize = 0;
let apiSize = 0;
for (const cacheName of cacheNames) {
const cache = await caches.open(cacheName);
const requests = await cache.keys();
for (const request of requests) {
const response = await cache.match(request);
if (response) {
const blob = await response.clone().blob();
totalSize += blob.size;
// Calculer la taille du cache API séparément
if (cacheName.includes("api")) {
apiSize += blob.size;
}
}
}
}
setSwCacheSize(totalSize);
setApiCacheSize(apiSize);
}
} catch (error) {
logger.error({ err: error }, "Erreur lors de la récupération de la taille du cache:");
} finally {
setIsLoadingCacheSize(false);
}
};
const fetchCacheEntries = async () => {
setIsLoadingEntries(true);
try {
const response = await fetch("/api/komga/cache/entries");
if (response.ok) {
const data = await response.json();
setCacheEntries(data.entries);
}
} catch (error) {
logger.error({ err: error }, "Erreur lors de la récupération des entrées du cache:");
} finally {
setIsLoadingEntries(false);
}
};
const toggleShowEntries = () => {
if (!showEntries && cacheEntries.length === 0) {
fetchCacheEntries();
}
setShowEntries(!showEntries);
};
const fetchSwCacheEntries = async () => {
setIsLoadingSwEntries(true);
try {
if ("caches" in window) {
const entries: ServiceWorkerCacheEntry[] = [];
const cacheNames = await caches.keys();
for (const cacheName of cacheNames) {
const cache = await caches.open(cacheName);
const requests = await cache.keys();
for (const request of requests) {
const response = await cache.match(request);
if (response) {
const blob = await response.clone().blob();
entries.push({
url: request.url,
size: blob.size,
cacheName,
});
}
}
}
setSwCacheEntries(entries);
}
} catch (error) {
logger.error({ err: error }, "Erreur lors de la récupération des entrées du cache SW:");
} finally {
setIsLoadingSwEntries(false);
}
};
const toggleShowSwEntries = () => {
if (!showSwEntries && swCacheEntries.length === 0) {
fetchSwCacheEntries();
}
setShowSwEntries(!showSwEntries);
};
const getPathGroup = (url: string): string => {
try {
const urlObj = new URL(url);
const path = urlObj.pathname;
const segments = path.split("/").filter(Boolean);
if (segments.length === 0) return "/";
// Pour /api/komga/images, grouper par type (series/books)
if (
segments[0] === "api" &&
segments[1] === "komga" &&
segments[2] === "images" &&
segments[3]
) {
return `/${segments[0]}/${segments[1]}/${segments[2]}/${segments[3]}`;
}
// Pour les autres, garder juste le premier segment
return `/${segments[0]}`;
} catch {
return "Autres";
}
};
const getBaseUrl = (url: string): string => {
try {
const urlObj = new URL(url);
return urlObj.pathname;
} catch {
return url;
}
};
const groupVersions = (entries: ServiceWorkerCacheEntry[]) => {
const grouped = entries.reduce(
(acc, entry) => {
const baseUrl = getBaseUrl(entry.url);
if (!acc[baseUrl]) {
acc[baseUrl] = [];
}
acc[baseUrl].push(entry);
return acc;
},
{} as Record<string, ServiceWorkerCacheEntry[]>
);
// Trier par date (le plus récent en premier) basé sur le paramètre v
Object.keys(grouped).forEach((key) => {
grouped[key].sort((a, b) => {
const aVersion = new URL(a.url).searchParams.get("v") || "0";
const bVersion = new URL(b.url).searchParams.get("v") || "0";
return Number(bVersion) - Number(aVersion);
});
});
return grouped;
};
const groupEntriesByPath = (entries: ServiceWorkerCacheEntry[]) => {
const grouped = entries.reduce(
(acc, entry) => {
const pathGroup = getPathGroup(entry.url);
if (!acc[pathGroup]) {
acc[pathGroup] = [];
}
acc[pathGroup].push(entry);
return acc;
},
{} as Record<string, ServiceWorkerCacheEntry[]>
);
// Trier chaque groupe par taille décroissante
Object.keys(grouped).forEach((key) => {
grouped[key].sort((a, b) => b.size - a.size);
});
// Trier les groupes par taille totale décroissante
const sortedGroups: Record<string, ServiceWorkerCacheEntry[]> = {};
Object.entries(grouped)
.sort((a, b) => {
const aSize = getTotalSizeByType(a[1]);
const bSize = getTotalSizeByType(b[1]);
return bSize - aSize;
})
.forEach(([key, value]) => {
sortedGroups[key] = value;
});
return sortedGroups;
};
const getTotalSizeByType = (entries: ServiceWorkerCacheEntry[]): number => {
return entries.reduce((sum, entry) => sum + entry.size, 0);
};
const toggleGroup = (groupName: string) => {
setExpandedGroups((prev) => ({
...prev,
[groupName]: !prev[groupName],
}));
};
const toggleVersions = (fileName: string) => {
setExpandedVersions((prev) => ({
...prev,
[fileName]: !prev[fileName],
}));
};
useEffect(() => {
fetchCacheSize();
}, []);
const handleClearCache = async () => {
setIsCacheClearing(true);
try {
const response = await fetch("/api/komga/cache/clear", {
method: "POST",
});
if (!response.ok) {
const data = await response.json();
throw new Error(data.error || t("settings.cache.error.message"));
}
toast({
title: t("settings.cache.title"),
description: t("settings.cache.messages.cleared"),
});
// Rafraîchir la taille du cache et les entrées
await fetchCacheSize();
if (showEntries) {
await fetchCacheEntries();
}
if (showSwEntries) {
await fetchSwCacheEntries();
}
} catch (error) {
logger.error({ err: error }, "Erreur:");
toast({
variant: "destructive",
title: t("settings.cache.error.title"),
description: t("settings.cache.error.message"),
});
} finally {
setIsCacheClearing(false);
}
};
const handleClearServiceWorkerCache = async () => {
setIsServiceWorkerClearing(true);
try {
if ("serviceWorker" in navigator && "caches" in window) {
const cacheNames = await caches.keys();
await Promise.all(cacheNames.map((cacheName) => caches.delete(cacheName)));
// Forcer la mise à jour du service worker
const registrations = await navigator.serviceWorker.getRegistrations();
for (const registration of registrations) {
await registration.unregister();
}
toast({
title: t("settings.cache.title"),
description: t("settings.cache.messages.serviceWorkerCleared"),
});
// Rafraîchir la taille du cache et les entrées
await fetchCacheSize();
if (showEntries) {
await fetchCacheEntries();
}
if (showSwEntries) {
await fetchSwCacheEntries();
}
// Recharger la page après 1 seconde pour réenregistrer le SW
setTimeout(() => {
window.location.reload();
}, 1000);
}
} catch (error) {
logger.error({ err: error }, "Erreur lors de la suppression des caches:");
toast({
variant: "destructive",
title: t("settings.cache.error.title"),
description: t("settings.cache.error.serviceWorkerMessage"),
});
} finally {
setIsServiceWorkerClearing(false);
}
};
const handleFlushImageCache = () => {
flushImageCache();
toast({
title: t("settings.cache.title"),
description: t("settings.cache.messages.imageCacheFlushed"),
});
};
const handleTTLChange = (event: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
const { name, value } = event.target;
setTTLConfig((prev) => ({
...prev,
[name]: parseInt(value || "0", 10),
}));
};
const handleSaveTTL = async (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
try {
const response = await fetch("/api/komga/ttl-config", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(ttlConfig),
});
if (!response.ok) {
const data = await response.json();
throw new Error(data.error || t("settings.cache.error.message"));
}
toast({
title: t("settings.cache.title"),
description: t("settings.cache.messages.ttlSaved"),
});
} catch (error) {
logger.error({ err: error }, "Erreur lors de la sauvegarde:");
toast({
variant: "destructive",
title: t("settings.cache.error.title"),
description: t("settings.cache.error.messagettl"),
});
}
};
return (
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Trash2 className="h-5 w-5" />
{t("settings.cache.title")}
</CardTitle>
<CardDescription>{t("settings.cache.description")}</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<div className="flex items-center justify-between mb-4">
<div className="space-y-0.5">
<Label htmlFor="cache-mode">{t("settings.cache.mode.label")}</Label>
<p className="text-sm text-muted-foreground">{t("settings.cache.mode.description")}</p>
</div>
<CacheModeSwitch />
</div>
{/* Informations sur la taille du cache */}
<div className="rounded-md border bg-muted/50 backdrop-blur-md p-4 space-y-3">
<div className="flex items-center gap-2 font-medium">
<HardDrive className="h-4 w-4" />
{t("settings.cache.size.title")}
</div>
{isLoadingCacheSize ? (
<div className="text-sm text-muted-foreground">{t("settings.cache.size.loading")}</div>
) : (
<div className="grid gap-2 sm:grid-cols-3">
<div className="space-y-1">
<div className="text-sm font-medium">{t("settings.cache.size.server")}</div>
{serverCacheSize ? (
<div className="text-sm text-muted-foreground">
<div>{formatBytes(serverCacheSize.sizeInBytes)}</div>
<div className="text-xs">
{t("settings.cache.size.items", { count: serverCacheSize.itemCount })}
</div>
</div>
) : (
<div className="text-sm text-muted-foreground">
{t("settings.cache.size.error")}
</div>
)}
</div>
<div className="space-y-1">
<div className="text-sm font-medium">{t("settings.cache.size.serviceWorker")}</div>
{swCacheSize !== null ? (
<div className="text-sm text-muted-foreground">{formatBytes(swCacheSize)}</div>
) : (
<div className="text-sm text-muted-foreground">
{t("settings.cache.size.error")}
</div>
)}
</div>
<div className="space-y-1">
<div className="text-sm font-medium">{t("settings.cache.size.api")}</div>
{apiCacheSize !== null ? (
<div className="text-sm text-muted-foreground">{formatBytes(apiCacheSize)}</div>
) : (
<div className="text-sm text-muted-foreground">
{t("settings.cache.size.error")}
</div>
)}
</div>
</div>
)}
</div>
{/* Aperçu des entrées du cache serveur */}
<div className="space-y-3">
<Button
type="button"
variant="outline"
onClick={toggleShowEntries}
className="w-full flex items-center justify-between"
>
<span className="flex items-center gap-2">
<List className="h-4 w-4" />
{t("settings.cache.entries.serverTitle")}
</span>
{showEntries ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
</Button>
{showEntries && (
<div className="rounded-md border bg-muted/30 backdrop-blur-md">
{isLoadingEntries ? (
<div className="p-4 text-center text-sm text-muted-foreground">
<Loader2 className="h-4 w-4 animate-spin mx-auto mb-2" />
{t("settings.cache.entries.loading")}
</div>
) : cacheEntries.length === 0 ? (
<div className="p-4 text-center text-sm text-muted-foreground">
{t("settings.cache.entries.empty")}
</div>
) : (
<div className="max-h-96 overflow-y-auto">
<div className="divide-y">
{cacheEntries.map((entry, index) => (
<div
key={index}
className={`p-3 space-y-1 ${entry.isExpired ? "opacity-50" : ""}`}
>
<div className="flex items-start justify-between gap-2">
<div className="flex-1 min-w-0">
<div className="font-mono text-xs truncate" title={entry.key}>
{entry.key}
</div>
<div className="flex items-center gap-2 mt-1 text-xs text-muted-foreground">
<span className="inline-flex items-center rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium">
{getCacheType(entry.key)}
</span>
<span>{formatBytes(entry.size)}</span>
</div>
</div>
<div className="text-right text-xs">
<div
className={`font-medium ${entry.isExpired ? "text-destructive" : "text-muted-foreground"}`}
>
{getTimeRemaining(entry.expiry)}
</div>
<div
className="text-muted-foreground/70"
title={formatDate(entry.expiry)}
>
{new Date(entry.expiry).toLocaleDateString()}
</div>
</div>
</div>
</div>
))}
</div>
</div>
)}
</div>
)}
</div>
{/* Aperçu des entrées du cache service worker */}
<div className="space-y-3">
<Button
type="button"
variant="outline"
onClick={toggleShowSwEntries}
className="w-full flex items-center justify-between"
>
<span className="flex items-center gap-2">
<List className="h-4 w-4" />
{t("settings.cache.entries.serviceWorkerTitle")}
</span>
{showSwEntries ? (
<ChevronUp className="h-4 w-4" />
) : (
<ChevronDown className="h-4 w-4" />
)}
</Button>
{showSwEntries && (
<div className="rounded-md border bg-muted/30 backdrop-blur-md">
{isLoadingSwEntries ? (
<div className="p-4 text-center text-sm text-muted-foreground">
<Loader2 className="h-4 w-4 animate-spin mx-auto mb-2" />
{t("settings.cache.entries.loading")}
</div>
) : swCacheEntries.length === 0 ? (
<div className="p-4 text-center text-sm text-muted-foreground">
{t("settings.cache.entries.empty")}
</div>
) : (
<div className="max-h-96 overflow-y-auto">
{(() => {
const grouped = groupEntriesByPath(swCacheEntries);
return (
<div className="divide-y">
{Object.entries(grouped).map(([pathGroup, entries]) => {
const isExpanded = expandedGroups[pathGroup];
return (
<div key={pathGroup} className="p-3 space-y-2">
<button
type="button"
onClick={() => toggleGroup(pathGroup)}
className="w-full flex items-center justify-between hover:bg-muted/50 rounded p-1 -m-1 transition-colors"
>
<div className="font-medium text-sm flex items-center gap-2">
{isExpanded ? (
<ChevronDown className="h-3 w-3" />
) : (
<ChevronUp className="h-3 w-3" />
)}
<span className="inline-flex items-center rounded-full bg-blue-500/10 px-2 py-0.5 text-xs font-medium font-mono">
{pathGroup}
</span>
<span className="text-xs text-muted-foreground">
({entries.length} {entries.length > 1 ? "éléments" : "élément"})
</span>
</div>
<div className="text-xs text-muted-foreground font-medium">
{formatBytes(getTotalSizeByType(entries))}
</div>
</button>
{isExpanded && (
<div className="space-y-1 pl-2">
{(() => {
const versionGroups = groupVersions(entries);
return Object.entries(versionGroups).map(
([baseUrl, versions]) => {
const hasMultipleVersions = versions.length > 1;
const isVersionExpanded = expandedVersions[baseUrl];
const totalSize = versions.reduce(
(sum, v) => sum + v.size,
0
);
if (!hasMultipleVersions) {
const entry = versions[0];
return (
<div key={baseUrl} className="py-1">
<div className="flex items-start justify-between gap-2">
<div className="flex-1 min-w-0">
<div
className="font-mono text-xs truncate text-muted-foreground"
title={entry.url}
>
{entry.url.replace(/^https?:\/\/[^/]+/, "")}
</div>
</div>
<div className="text-xs text-muted-foreground whitespace-nowrap">
{formatBytes(entry.size)}
</div>
</div>
</div>
);
}
return (
<div key={baseUrl} className="py-1">
<button
type="button"
onClick={() => toggleVersions(baseUrl)}
className="w-full flex items-start justify-between gap-2 hover:bg-muted/30 rounded p-1 -m-1 transition-colors"
>
<div className="flex-1 min-w-0 flex items-center gap-1">
{isVersionExpanded ? (
<ChevronDown className="h-3 w-3 flex-shrink-0" />
) : (
<ChevronUp className="h-3 w-3 flex-shrink-0" />
)}
<div
className="font-mono text-xs truncate text-muted-foreground"
title={baseUrl}
>
{baseUrl}
</div>
<span className="inline-flex items-center rounded-full bg-orange-500/10 px-1.5 py-0.5 text-xs font-medium text-orange-600 dark:text-orange-400 flex-shrink-0">
{versions.length} versions
</span>
</div>
<div className="text-xs text-muted-foreground whitespace-nowrap font-medium">
{formatBytes(totalSize)}
</div>
</button>
{isVersionExpanded && (
<div className="pl-4 mt-1 space-y-1">
{versions.map((version, vIdx) => (
<div
key={vIdx}
className="py-0.5 flex items-start justify-between gap-2"
>
<div className="flex-1 min-w-0">
<div
className="font-mono text-xs truncate text-muted-foreground/70"
title={version.url}
>
{new URL(version.url).search ||
"(no version)"}
</div>
</div>
<div className="text-xs text-muted-foreground/70 whitespace-nowrap">
{formatBytes(version.size)}
</div>
</div>
))}
</div>
)}
</div>
);
}
);
})()}
</div>
)}
</div>
);
})}
</div>
);
})()}
</div>
)}
</div>
)}
</div>
{/* Formulaire TTL */}
<form onSubmit={handleSaveTTL} className="space-y-4">
<div className="grid gap-3 sm:grid-cols-2">
<div className="space-y-2">
<label htmlFor="defaultTTL" className="text-sm font-medium">
{t("settings.cache.ttl.default")}
</label>
<input
type="number"
id="defaultTTL"
name="defaultTTL"
min="1"
value={ttlConfig.defaultTTL}
onChange={handleTTLChange}
className="flex h-9 w-full rounded-md border border-input bg-background/70 backdrop-blur-md px-3 py-1 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
/>
</div>
<div className="space-y-2">
<label htmlFor="homeTTL" className="text-sm font-medium">
{t("settings.cache.ttl.home")}
</label>
<input
type="number"
id="homeTTL"
name="homeTTL"
min="1"
value={ttlConfig.homeTTL}
onChange={handleTTLChange}
className="flex h-9 w-full rounded-md border border-input bg-background/70 backdrop-blur-md px-3 py-1 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
/>
</div>
<div className="space-y-2">
<label htmlFor="librariesTTL" className="text-sm font-medium">
{t("settings.cache.ttl.libraries")}
</label>
<input
type="number"
id="librariesTTL"
name="librariesTTL"
min="1"
value={ttlConfig.librariesTTL}
onChange={handleTTLChange}
className="flex h-9 w-full rounded-md border border-input bg-background/70 backdrop-blur-md px-3 py-1 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
/>
</div>
<div className="space-y-2">
<label htmlFor="seriesTTL" className="text-sm font-medium">
{t("settings.cache.ttl.series")}
</label>
<input
type="number"
id="seriesTTL"
name="seriesTTL"
min="1"
value={ttlConfig.seriesTTL}
onChange={handleTTLChange}
className="flex h-9 w-full rounded-md border border-input bg-background/70 backdrop-blur-md px-3 py-1 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
/>
</div>
<div className="space-y-2">
<label htmlFor="booksTTL" className="text-sm font-medium">
{t("settings.cache.ttl.books")}
</label>
<input
type="number"
id="booksTTL"
name="booksTTL"
min="1"
value={ttlConfig.booksTTL}
onChange={handleTTLChange}
className="flex h-9 w-full rounded-md border border-input bg-background/70 backdrop-blur-md px-3 py-1 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
/>
</div>
<div className="space-y-2">
<label htmlFor="imagesTTL" className="text-sm font-medium">
{t("settings.cache.ttl.images")}
</label>
<input
type="number"
id="imagesTTL"
name="imagesTTL"
min="1"
value={ttlConfig.imagesTTL}
onChange={handleTTLChange}
className="flex h-9 w-full rounded-md border border-input bg-background/70 backdrop-blur-md px-3 py-1 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
/>
</div>
<div className="space-y-2">
<div className="space-y-1">
<label htmlFor="imageCacheMaxAge" className="text-sm font-medium">
{t("settings.cache.ttl.imageCacheMaxAge.label")}
</label>
<p className="text-xs text-muted-foreground">
{t("settings.cache.ttl.imageCacheMaxAge.description")}
</p>
</div>
<select
id="imageCacheMaxAge"
name="imageCacheMaxAge"
value={ttlConfig.imageCacheMaxAge}
onChange={handleTTLChange}
className="flex h-9 w-full rounded-md border border-input bg-background/70 backdrop-blur-md px-3 py-1 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
>
<option value="0">
{t("settings.cache.ttl.imageCacheMaxAge.options.noCache")}
</option>
<option value="3600">
{t("settings.cache.ttl.imageCacheMaxAge.options.oneHour")}
</option>
<option value="86400">
{t("settings.cache.ttl.imageCacheMaxAge.options.oneDay")}
</option>
<option value="604800">
{t("settings.cache.ttl.imageCacheMaxAge.options.oneWeek")}
</option>
<option value="2592000">
{t("settings.cache.ttl.imageCacheMaxAge.options.oneMonth")}
</option>
<option value="31536000">
{t("settings.cache.ttl.imageCacheMaxAge.options.oneYear")}
</option>
</select>
</div>
</div>
<div className="flex gap-3">
<button
type="submit"
className="flex-1 inline-flex items-center justify-center rounded-md bg-primary/90 backdrop-blur-md px-3 py-2 text-sm font-medium text-primary-foreground ring-offset-background transition-colors hover:bg-primary/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
>
{t("settings.cache.buttons.saveTTL")}
</button>
<button
type="button"
onClick={handleClearCache}
disabled={isCacheClearing}
className="flex-1 inline-flex items-center justify-center rounded-md bg-destructive/90 backdrop-blur-md px-3 py-2 text-sm font-medium text-destructive-foreground ring-offset-background transition-colors hover:bg-destructive/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
>
{isCacheClearing ? (
<>
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
{t("settings.cache.buttons.clearing")}
</>
) : (
t("settings.cache.buttons.clear")
)}
</button>
</div>
<div className="flex gap-3">
<button
type="button"
onClick={handleClearServiceWorkerCache}
disabled={isServiceWorkerClearing}
className="flex-1 inline-flex items-center justify-center rounded-md bg-destructive/90 backdrop-blur-md px-3 py-2 text-sm font-medium text-destructive-foreground ring-offset-background transition-colors hover:bg-destructive/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
>
{isServiceWorkerClearing ? (
<>
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
{t("settings.cache.buttons.clearingServiceWorker")}
</>
) : (
t("settings.cache.buttons.clearServiceWorker")
)}
</button>
</div>
<div className="flex gap-3">
<button
type="button"
onClick={handleFlushImageCache}
className="flex-1 inline-flex items-center justify-center rounded-md bg-orange-500/90 backdrop-blur-md px-3 py-2 text-sm font-medium text-white ring-offset-background transition-colors hover:bg-orange-500/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
>
<ImageOff className="mr-2 h-4 w-4" />
{t("settings.cache.buttons.flushImageCache")}
</button>
</div>
</form>
</CardContent>
</Card>
);
}

18
src/components/settings/ClientSettings.tsx
View File

@@ -1,21 +1,19 @@
"use client";
import type { KomgaConfig, TTLConfigData } from "@/types/komga";
import type { KomgaConfig } from "@/types/komga";
import { useTranslate } from "@/hooks/useTranslate";
import { DisplaySettings } from "./DisplaySettings";
import { KomgaSettings } from "./KomgaSettings";
import { CacheSettings } from "./CacheSettings";
import { BackgroundSettings } from "./BackgroundSettings";
import { AdvancedSettings } from "./AdvancedSettings";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
import { Monitor, Network, HardDrive } from "lucide-react";
import { Monitor, Network } from "lucide-react";
interface ClientSettingsProps {
initialConfig: KomgaConfig | null;
initialTTLConfig: TTLConfigData | null;
}
export function ClientSettings({ initialConfig, initialTTLConfig }: ClientSettingsProps) {
export function ClientSettings({ initialConfig }: ClientSettingsProps) {
const { t } = useTranslate();
return (
@@ -23,7 +21,7 @@ export function ClientSettings({ initialConfig, initialTTLConfig }: ClientSettin
<h1 className="text-3xl font-bold">{t("settings.title")}</h1>
<Tabs defaultValue="display" className="w-full">
<TabsList className="grid w-full grid-cols-3">
<TabsList className="grid w-full grid-cols-2">
<TabsTrigger value="display" className="flex items-center gap-2">
<Monitor className="h-4 w-4" />
{t("settings.tabs.display")}
@@ -32,10 +30,6 @@ export function ClientSettings({ initialConfig, initialTTLConfig }: ClientSettin
<Network className="h-4 w-4" />
{t("settings.tabs.connection")}
</TabsTrigger>
<TabsTrigger value="cache" className="flex items-center gap-2">
<HardDrive className="h-4 w-4" />
{t("settings.tabs.cache")}
</TabsTrigger>
</TabsList>
<TabsContent value="display" className="mt-6 space-y-6">
@@ -47,10 +41,6 @@ export function ClientSettings({ initialConfig, initialTTLConfig }: ClientSettin
<KomgaSettings initialConfig={initialConfig} />
<AdvancedSettings />
</TabsContent>
<TabsContent value="cache" className="mt-6 space-y-6">
<CacheSettings initialTTLConfig={initialTTLConfig} />
</TabsContent>
</Tabs>
</div>
);

4
src/components/ui/book-cover.tsx
View File

@@ -4,7 +4,6 @@ import { CoverClient } from "./cover-client";
import { ProgressBar } from "./progress-bar";
import type { BookCoverProps } from "./cover-utils";
import { getImageUrl } from "@/lib/utils/image-url";
import { useImageUrl } from "@/hooks/useImageUrl";
import { ClientOfflineBookService } from "@/lib/services/client-offlinebook.service";
import { MarkAsReadButton } from "./mark-as-read-button";
import { MarkAsUnreadButton } from "./mark-as-unread-button";
@@ -63,8 +62,7 @@ export function BookCover({
const { t } = useTranslate();
const { isAccessible } = useBookOfflineStatus(book.id);
const baseUrl = getImageUrl("book", book.id);
const imageUrl = useImageUrl(baseUrl);
const imageUrl = getImageUrl("book", book.id);
const isCompleted = book.readProgress?.completed || false;
const currentPage = ClientOfflineBookService.getCurrentPage(book);

4
src/components/ui/series-cover.tsx
View File

@@ -4,7 +4,6 @@ import { CoverClient } from "./cover-client";
import { ProgressBar } from "./progress-bar";
import type { SeriesCoverProps } from "./cover-utils";
import { getImageUrl } from "@/lib/utils/image-url";
import { useImageUrl } from "@/hooks/useImageUrl";
export function SeriesCover({
series,
@@ -12,8 +11,7 @@ export function SeriesCover({
className,
showProgressUi = true,
}: SeriesCoverProps) {
const baseUrl = getImageUrl("series", series.id);
const imageUrl = useImageUrl(baseUrl);
const imageUrl = getImageUrl("series", series.id);
const isCompleted = series.booksCount === series.booksReadCount;
const readBooks = series.booksReadCount;