298 lines
10 KiB
TypeScript
298 lines
10 KiB
TypeScript
"use client";
|
|
|
|
import { Home, Library, Settings, LogOut, RefreshCw, Star, Download } from "lucide-react";
|
|
import { usePathname, useRouter } from "next/navigation";
|
|
import { cn } from "@/lib/utils";
|
|
import { authService } from "@/lib/services/auth.service";
|
|
import { useEffect, useState, useCallback } from "react";
|
|
import { KomgaLibrary, KomgaSeries } from "@/types/komga";
|
|
import { usePreferences } from "@/contexts/PreferencesContext";
|
|
import { AppError } from "@/utils/errors";
|
|
import { ERROR_CODES } from "@/constants/errorCodes";
|
|
import { ERROR_MESSAGES } from "@/constants/errorMessages";
|
|
import { useToast } from "@/components/ui/use-toast";
|
|
|
|
interface SidebarProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
}
|
|
|
|
export function Sidebar({ isOpen, onClose }: SidebarProps) {
|
|
const pathname = usePathname();
|
|
const router = useRouter();
|
|
const { preferences } = usePreferences();
|
|
const [libraries, setLibraries] = useState<KomgaLibrary[]>([]);
|
|
const [favorites, setFavorites] = useState<KomgaSeries[]>([]);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const [isRefreshing, setIsRefreshing] = useState(false);
|
|
const [isLoadingFavorites, setIsLoadingFavorites] = useState(true);
|
|
|
|
const { toast } = useToast();
|
|
|
|
const fetchLibraries = useCallback(async () => {
|
|
setIsLoading(true);
|
|
try {
|
|
const response = await fetch("/api/komga/libraries");
|
|
if (!response.ok) {
|
|
throw new AppError(ERROR_CODES.LIBRARY.FETCH_ERROR);
|
|
}
|
|
const data = await response.json();
|
|
setLibraries(data);
|
|
} catch (error) {
|
|
console.error("Erreur de chargement des bibliothèques:", error);
|
|
toast({
|
|
title: "Erreur",
|
|
description:
|
|
error instanceof AppError
|
|
? error.message
|
|
: ERROR_MESSAGES[ERROR_CODES.LIBRARY.FETCH_ERROR],
|
|
variant: "destructive",
|
|
});
|
|
setLibraries([]);
|
|
} finally {
|
|
setIsLoading(false);
|
|
setIsRefreshing(false);
|
|
}
|
|
}, [toast]);
|
|
|
|
const fetchFavorites = useCallback(async () => {
|
|
setIsLoadingFavorites(true);
|
|
try {
|
|
const favoritesResponse = await fetch("/api/komga/favorites");
|
|
if (!favoritesResponse.ok) {
|
|
throw new AppError(ERROR_CODES.FAVORITE.FETCH_ERROR);
|
|
}
|
|
const favoriteIds = await favoritesResponse.json();
|
|
|
|
if (favoriteIds.length === 0) {
|
|
setFavorites([]);
|
|
return;
|
|
}
|
|
|
|
const promises = favoriteIds.map(async (id: string) => {
|
|
const response = await fetch(`/api/komga/series/${id}`);
|
|
if (!response.ok) {
|
|
throw new AppError(ERROR_CODES.SERIES.FETCH_ERROR);
|
|
}
|
|
return response.json();
|
|
});
|
|
|
|
const results = await Promise.all(promises);
|
|
setFavorites(results.filter((series): series is KomgaSeries => series !== null));
|
|
} catch (error) {
|
|
console.error("Erreur de chargement des favoris:", error);
|
|
toast({
|
|
title: "Erreur",
|
|
description:
|
|
error instanceof AppError
|
|
? error.message
|
|
: ERROR_MESSAGES[ERROR_CODES.FAVORITE.FETCH_ERROR],
|
|
variant: "destructive",
|
|
});
|
|
setFavorites([]);
|
|
} finally {
|
|
setIsLoadingFavorites(false);
|
|
}
|
|
}, [toast]);
|
|
|
|
// Chargement initial des données
|
|
useEffect(() => {
|
|
fetchLibraries();
|
|
fetchFavorites();
|
|
}, [fetchLibraries, fetchFavorites]);
|
|
|
|
// Rafraîchir les données quand les préférences changent
|
|
useEffect(() => {
|
|
fetchLibraries();
|
|
fetchFavorites();
|
|
}, [preferences, fetchLibraries, fetchFavorites]);
|
|
|
|
// Mettre à jour les favoris quand ils changent
|
|
useEffect(() => {
|
|
const handleFavoritesChange = () => {
|
|
fetchFavorites();
|
|
};
|
|
|
|
window.addEventListener("favoritesChanged", handleFavoritesChange);
|
|
|
|
return () => {
|
|
window.removeEventListener("favoritesChanged", handleFavoritesChange);
|
|
};
|
|
}, [fetchFavorites]);
|
|
|
|
const handleRefresh = async () => {
|
|
setIsRefreshing(true);
|
|
await Promise.all([fetchLibraries(), fetchFavorites()]);
|
|
};
|
|
|
|
const handleLogout = async () => {
|
|
try {
|
|
await authService.logout();
|
|
setLibraries([]);
|
|
setFavorites([]);
|
|
onClose();
|
|
router.push("/login");
|
|
} catch (error) {
|
|
console.error("Erreur lors de la déconnexion:", error);
|
|
toast({
|
|
title: "Erreur",
|
|
description:
|
|
error instanceof AppError ? error.message : ERROR_MESSAGES[ERROR_CODES.AUTH.LOGOUT_ERROR],
|
|
variant: "destructive",
|
|
});
|
|
}
|
|
};
|
|
|
|
const handleLinkClick = useCallback(
|
|
async (path: string) => {
|
|
if (pathname === path) {
|
|
onClose();
|
|
return;
|
|
}
|
|
window.dispatchEvent(new Event("navigationStart"));
|
|
router.push(path);
|
|
onClose();
|
|
// On attend que la page soit chargée
|
|
await new Promise((resolve) => setTimeout(resolve, 300));
|
|
window.dispatchEvent(new Event("navigationComplete"));
|
|
},
|
|
[pathname, router, onClose]
|
|
);
|
|
|
|
const mainNavItems = [
|
|
{
|
|
title: "Accueil",
|
|
href: "/",
|
|
icon: Home,
|
|
},
|
|
{
|
|
title: "Téléchargements",
|
|
href: "/downloads",
|
|
icon: Download,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<aside
|
|
suppressHydrationWarning
|
|
className={cn(
|
|
"fixed left-0 top-14 z-30 h-[calc(100vh-3.5rem)] w-64 border-r border-border/40",
|
|
"bg-background/80 backdrop-blur-sm supports-[backdrop-filter]:bg-background/60",
|
|
"transition-transform duration-300 ease-in-out flex flex-col",
|
|
isOpen ? "translate-x-0" : "-translate-x-full"
|
|
)}
|
|
id="sidebar"
|
|
>
|
|
<div className="flex-1 space-y-4 py-4 overflow-y-auto">
|
|
<div className="px-3 py-2">
|
|
<div className="space-y-1">
|
|
<h2 className="mb-2 px-4 text-lg font-semibold tracking-tight">Navigation</h2>
|
|
{mainNavItems.map((item) => (
|
|
<button
|
|
key={item.href}
|
|
onClick={() => handleLinkClick(item.href)}
|
|
className={cn(
|
|
"w-full flex items-center rounded-lg px-3 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground",
|
|
pathname === item.href ? "bg-accent" : "transparent"
|
|
)}
|
|
>
|
|
<item.icon className="mr-2 h-4 w-4" />
|
|
{item.title}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="px-3 py-2">
|
|
<div className="space-y-1">
|
|
<div className="mb-2 px-4 flex items-center justify-between">
|
|
<h2 className="text-lg font-semibold tracking-tight">Favoris</h2>
|
|
<span className="text-xs text-muted-foreground">{favorites.length}</span>
|
|
</div>
|
|
{isLoadingFavorites ? (
|
|
<div className="px-3 py-2 text-sm text-muted-foreground">Chargement...</div>
|
|
) : favorites.length === 0 ? (
|
|
<div className="px-3 py-2 text-sm text-muted-foreground">Aucun favori</div>
|
|
) : (
|
|
favorites.map((series) => (
|
|
<button
|
|
key={series.id}
|
|
onClick={() => handleLinkClick(`/series/${series.id}`)}
|
|
className={cn(
|
|
"w-full flex items-center rounded-lg px-3 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground",
|
|
pathname === `/series/${series.id}` ? "bg-accent" : "transparent"
|
|
)}
|
|
>
|
|
<Star className="mr-2 h-4 w-4 fill-yellow-400 text-yellow-400" />
|
|
<span className="truncate">{series.metadata.title}</span>
|
|
</button>
|
|
))
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="px-3 py-2">
|
|
<div className="space-y-1">
|
|
<div className="mb-2 px-4 flex items-center justify-between">
|
|
<h2 className="text-lg font-semibold tracking-tight">Bibliothèques</h2>
|
|
<button
|
|
onClick={handleRefresh}
|
|
disabled={isRefreshing}
|
|
className="p-1 hover:bg-accent hover:text-accent-foreground rounded-md transition-colors"
|
|
aria-label="Rafraîchir les bibliothèques"
|
|
>
|
|
<RefreshCw className={cn("h-4 w-4", isRefreshing && "animate-spin")} />
|
|
</button>
|
|
</div>
|
|
{isLoading ? (
|
|
<div className="px-3 py-2 text-sm text-muted-foreground">Chargement...</div>
|
|
) : libraries.length === 0 ? (
|
|
<div className="px-3 py-2 text-sm text-muted-foreground">Aucune bibliothèque</div>
|
|
) : (
|
|
libraries.map((library) => (
|
|
<button
|
|
key={library.id}
|
|
onClick={() => handleLinkClick(`/libraries/${library.id}`)}
|
|
className={cn(
|
|
"w-full flex items-center rounded-lg px-3 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground",
|
|
pathname === `/libraries/${library.id}` ? "bg-accent" : "transparent"
|
|
)}
|
|
>
|
|
<Library className="mr-2 h-4 w-4" />
|
|
{library.name}
|
|
</button>
|
|
))
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="px-3 py-2">
|
|
<div className="space-y-1">
|
|
<h2 className="mb-2 px-4 text-lg font-semibold tracking-tight">Configuration</h2>
|
|
<button
|
|
onClick={() => handleLinkClick("/settings")}
|
|
className={cn(
|
|
"w-full flex items-center rounded-lg px-3 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground",
|
|
pathname === "/settings" ? "bg-accent" : "transparent"
|
|
)}
|
|
>
|
|
<Settings className="mr-2 h-4 w-4" />
|
|
Préférences
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-3 border-t border-border/40">
|
|
<button
|
|
onClick={handleLogout}
|
|
className="flex w-full items-center rounded-lg px-3 py-2 text-sm font-medium text-destructive hover:bg-destructive/10 hover:text-destructive"
|
|
>
|
|
<LogOut className="mr-2 h-4 w-4" />
|
|
Se déconnecter
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
);
|
|
}
|