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

refactor: déplacement de la liste des bibliothèques dans la sidebar

Browse Source
This commit is contained in:
Julien Froidefond
2025-02-12 08:20:13 +01:00
parent 22593d742c
commit 41fdbd14ad
2 changed files with 49 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
src/app/libraries/page.tsx
View File

@@ -1,95 +0,0 @@
"use client";
import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { KomgaLibrary } from "@/types/komga";
import { LibraryGrid } from "@/components/library/LibraryGrid";
import { storageService } from "@/lib/services/storage.service";
export default function LibrariesPage() {
const router = useRouter();
const [libraries, setLibraries] = useState<KomgaLibrary[]>([]);
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
const fetchLibraries = async () => {
try {
const response = await fetch("/api/komga/libraries");
if (!response.ok) {
const data = await response.json();
throw new Error(data.error || "Erreur lors de la récupération des bibliothèques");
}
const data = await response.json();
setLibraries(data);
} catch (error) {
console.error("Erreur:", error);
setError(error instanceof Error ? error.message : "Une erreur est survenue");
} finally {
setIsLoading(false);
}
};
fetchLibraries();
}, []);
const handleLibraryClick = (library: KomgaLibrary) => {
router.push(`/libraries/${library.id}`);
};
const getLibraryThumbnailUrl = (libraryId: string): string => {
return `/api/komga/thumbnail/libraries/${libraryId}/thumbnail`;
};
if (isLoading) {
return (
<div className="container">
<div className="space-y-8">
<div>
<h1 className="text-3xl font-bold">Bibliothèques</h1>
<p className="text-muted-foreground mt-2">Chargement des bibliothèques...</p>
</div>
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 animate-pulse">
{[...Array(3)].map((_, i) => (
<div key={i} className="h-32 rounded-lg border bg-muted" />
))}
</div>
</div>
</div>
);
}
if (error) {
return (
<div className="container">
<div className="space-y-8">
<div>
<h1 className="text-3xl font-bold">Bibliothèques</h1>
<p className="text-muted-foreground mt-2">Une erreur est survenue</p>
</div>
<div className="rounded-md bg-destructive/15 p-4">
<p className="text-sm text-destructive">{error}</p>
</div>
</div>
</div>
);
}
return (
<div className="container">
<div className="space-y-8">
<div>
<h1 className="text-3xl font-bold">Bibliothèques</h1>
<p className="text-muted-foreground mt-2">Explorez vos bibliothèques Komga</p>
</div>
<LibraryGrid
libraries={libraries}
onLibraryClick={handleLibraryClick}
getLibraryThumbnailUrl={getLibraryThumbnailUrl}
/>
</div>
</div>
);
}

55
src/components/layout/Sidebar.tsx
View File

@@ -3,6 +3,8 @@ import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import { cn } from "@/lib/utils";
import { authService } from "@/lib/services/auth.service";
import { useEffect, useState } from "react";
import { KomgaLibrary } from "@/types/komga";
interface SidebarProps {
isOpen: boolean;
@@ -11,6 +13,27 @@ interface SidebarProps {
export function Sidebar({ isOpen }: SidebarProps) {
const pathname = usePathname();
const router = useRouter();
const [libraries, setLibraries] = useState<KomgaLibrary[]>([]);
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
const fetchLibraries = async () => {
try {
const response = await fetch("/api/komga/libraries");
if (!response.ok) {
throw new Error("Erreur lors de la récupération des bibliothèques");
}
const data = await response.json();
setLibraries(data);
} catch (error) {
console.error("Erreur:", error);
} finally {
setIsLoading(false);
}
};
fetchLibraries();
}, []);
const handleLogout = () => {
authService.logout();
@@ -23,11 +46,6 @@ export function Sidebar({ isOpen }: SidebarProps) {
href: "/",
icon: Home,
},
{
name: "Bibliothèques",
href: "/libraries",
icon: Library,
},
];
return (
@@ -37,7 +55,7 @@ export function Sidebar({ isOpen }: SidebarProps) {
isOpen ? "translate-x-0" : "-translate-x-full"
)}
>
<div className="flex-1 space-y-4 py-4">
<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>
@@ -57,6 +75,31 @@ export function Sidebar({ isOpen }: SidebarProps) {
</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">Bibliothèques</h2>
{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) => (
<Link
key={library.id}
href={`/libraries/${library.id}`}
className={cn(
"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}
</Link>
))
)}
</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>