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

feat: enhance ClientLibraryPage with LibraryHeader component and improve loading skeleton structure for better user experience

Browse Source
This commit is contained in:
Julien Froidefond
2025-10-18 21:59:13 +02:00
parent e1c53769cd
commit 9024a78938
6 changed files with 200 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/app/libraries/[libraryId]/ClientLibraryPage.tsx
View File

@@ -3,6 +3,7 @@
import { useEffect, useState } from "react";
import { PaginatedSeriesGrid } from "@/components/library/PaginatedSeriesGrid";
import { RefreshButton } from "@/components/library/RefreshButton";
import { LibraryHeader } from "@/components/library/LibraryHeader";
import { ErrorMessage } from "@/components/ui/ErrorMessage";
import { useTranslate } from "@/hooks/useTranslate";
import { OptimizedSkeleton } from "@/components/skeletons/OptimizedSkeletons";
@@ -156,18 +157,26 @@ export function ClientLibraryPage({
if (loading) {
return (
<Container>
{/* Section header avec titre + actions */}
<div className="space-y-4 mb-8">
<div className="flex items-center justify-between">
<OptimizedSkeleton className="h-8 w-64" />
<div className="flex items-center gap-2">
<OptimizedSkeleton className="h-5 w-48" />
<>
{/* Header skeleton */}
<div className="relative min-h-[200px] md:h-[200px] w-screen -ml-[calc((100vw-100%)/2)] overflow-hidden mb-8">
<div className="absolute inset-0 bg-gradient-to-br from-primary/20 via-primary/10 to-background" />
<div className="relative container mx-auto px-4 py-8 h-full">
<div className="flex flex-col md:flex-row gap-6 items-center md:items-start h-full">
<OptimizedSkeleton className="w-[120px] h-[120px] rounded-lg" />
<div className="flex-1 space-y-3">
<OptimizedSkeleton className="h-10 w-64" />
<div className="flex gap-4">
<OptimizedSkeleton className="h-8 w-32" />
<OptimizedSkeleton className="h-8 w-32" />
<OptimizedSkeleton className="h-10 w-10 rounded-full" />
</div>
</div>
</div>
</div>
</div>
<Container>
{/* Filters */}
<div className="flex flex-col gap-4 mb-8">
<div className="flex flex-col sm:flex-row sm:items-center gap-4">
@@ -195,6 +204,7 @@ export function ClientLibraryPage({
<OptimizedSkeleton className="h-10 w-64 order-1 sm:order-2" />
</div>
</Container>
</>
);
}
@@ -219,24 +229,14 @@ export function ClientLibraryPage({
}
return (
<Container>
<Section
title={library.name}
actions={
<div className="flex items-center gap-2">
{series.totalElements > 0 && (
<p className="text-sm text-muted-foreground">
{t("series.display.showing", {
start: ((currentPage - 1) * effectivePageSize) + 1,
end: Math.min(currentPage * effectivePageSize, series.totalElements),
total: series.totalElements,
})}
</p>
)}
<RefreshButton libraryId={libraryId} refreshLibrary={handleRefresh} />
</div>
}
<>
<LibraryHeader
library={library}
seriesCount={series.totalElements}
series={series.content || []}
refreshLibrary={handleRefresh}
/>
<Container>
<PaginatedSeriesGrid
series={series.content || []}
currentPage={currentPage}
@@ -244,7 +244,9 @@ export function ClientLibraryPage({
totalElements={series.totalElements}
defaultShowOnlyUnread={preferences.showOnlyUnread}
showOnlyUnread={unreadOnly}
pageSize={effectivePageSize}
/>
</Container>
</>
);
}

102
src/components/library/LibraryHeader.tsx Normal file
View File

@@ -0,0 +1,102 @@
"use client";
import { Library, BookOpen } from "lucide-react";
import type { KomgaLibrary, KomgaSeries } from "@/types/komga";
import { RefreshButton } from "./RefreshButton";
import { useTranslate } from "@/hooks/useTranslate";
import { StatusBadge } from "@/components/ui/status-badge";
import { SeriesCover } from "@/components/ui/series-cover";
interface LibraryHeaderProps {
library: KomgaLibrary;
seriesCount: number;
series: KomgaSeries[];
refreshLibrary: (libraryId: string) => Promise<{ success: boolean; error?: string }>;
}
export const LibraryHeader = ({ library, seriesCount, series, refreshLibrary }: LibraryHeaderProps) => {
const { t } = useTranslate();
// Sélectionner une série aléatoire pour l'image centrale
const randomSeries = series.length > 0 ? series[Math.floor(Math.random() * series.length)] : null;
// Sélectionner une autre série aléatoire pour le fond (différente de celle du centre)
const backgroundSeries = series.length > 1
? series.filter(s => s.id !== randomSeries?.id)[Math.floor(Math.random() * (series.length - 1))]
: randomSeries;
return (
<div className="relative min-h-[200px] md:h-[200px] w-screen -ml-[calc((100vw-100%)/2)] overflow-hidden">
{/* Image de fond avec une série aléatoire */}
<div className="absolute inset-0">
<div className="absolute inset-0 bg-black/40" />
{backgroundSeries ? (
<SeriesCover
series={backgroundSeries}
alt=""
className="w-full h-full object-cover scale-105 blur-sm opacity-30"
showProgressUi={false}
/>
) : (
<div className="w-full h-full bg-gradient-to-br from-primary/20 via-primary/10 to-background" />
)}
</div>
{/* Contenu */}
<div className="relative container mx-auto px-4 py-8 h-full">
<div className="flex flex-col md:flex-row gap-6 items-center md:items-start h-full">
{/* Cover centrale avec icône overlay */}
<div className="relative w-[120px] h-[120px] rounded-lg overflow-hidden shadow-lg flex-shrink-0">
{randomSeries ? (
<div className="relative w-full h-full">
<SeriesCover
series={randomSeries}
alt={t("library.header.coverAlt", { name: library.name })}
className="w-full h-full object-cover"
showProgressUi={false}
/>
<div className="absolute inset-0 bg-black/30 flex items-center justify-center">
<Library className="w-10 h-10 text-white" />
</div>
</div>
) : (
<div className="w-full h-full bg-primary/10 backdrop-blur-md flex items-center justify-center">
<Library className="w-16 h-16 text-primary" />
</div>
)}
</div>
{/* Informations */}
<div className="flex-1 space-y-3 text-center md:text-left">
<h1 className="text-3xl md:text-4xl font-bold text-foreground">{library.name}</h1>
<div className="flex items-center gap-4 justify-center md:justify-start flex-wrap">
<StatusBadge status="unread" icon={Library}>
{seriesCount === 1
? t("library.header.series", { count: seriesCount })
: t("library.header.series_plural", { count: seriesCount })
}
</StatusBadge>
<StatusBadge status="reading" icon={BookOpen}>
{library.booksCount === 1
? t("library.header.books", { count: library.booksCount })
: t("library.header.books_plural", { count: library.booksCount })
}
</StatusBadge>
<RefreshButton libraryId={library.id} refreshLibrary={refreshLibrary} />
</div>
{library.unavailable && (
<p className="text-sm text-destructive mt-2">
{t("library.header.unavailable")}
</p>
)}
</div>
</div>
</div>
</div>
);
};

27
src/components/library/PaginatedSeriesGrid.tsx
View File

@@ -11,7 +11,6 @@ import { useDisplayPreferences } from "@/hooks/useDisplayPreferences";
import { PageSizeSelect } from "@/components/common/PageSizeSelect";
import { CompactModeButton } from "@/components/common/CompactModeButton";
import { UnreadFilterButton } from "@/components/common/UnreadFilterButton";
import { Container } from "@/components/ui/container";
interface PaginatedSeriesGridProps {
series: KomgaSeries[];
@@ -20,6 +19,7 @@ interface PaginatedSeriesGridProps {
totalElements: number;
defaultShowOnlyUnread: boolean;
showOnlyUnread: boolean;
pageSize?: number;
}
export function PaginatedSeriesGrid({
@@ -29,12 +29,16 @@ export function PaginatedSeriesGrid({
totalElements: _totalElements,
defaultShowOnlyUnread,
showOnlyUnread: initialShowOnlyUnread,
pageSize,
}: PaginatedSeriesGridProps) {
const router = useRouter();
const pathname = usePathname();
const searchParams = useSearchParams();
const [showOnlyUnread, setShowOnlyUnread] = useState(initialShowOnlyUnread);
const { isCompact, itemsPerPage: _itemsPerPage } = useDisplayPreferences();
const { isCompact, itemsPerPage: displayItemsPerPage } = useDisplayPreferences();
// Utiliser la taille de page effective (depuis l'URL ou les préférences)
const effectivePageSize = pageSize || displayItemsPerPage;
const { t } = useTranslate();
const updateUrlParams = useCallback(async (
@@ -97,9 +101,24 @@ export function PaginatedSeriesGrid({
});
};
// Calculate start and end indices for display
const startIndex = (currentPage - 1) * effectivePageSize + 1;
const endIndex = Math.min(currentPage * effectivePageSize, _totalElements);
const getShowingText = () => {
if (!_totalElements) return t("series.empty");
return t("books.display.showing", {
start: startIndex,
end: endIndex,
total: _totalElements,
});
};
return (
<Container spacing="none" className="space-y-8">
<div className="space-y-8">
<div className="flex flex-col gap-4">
<p className="text-sm text-muted-foreground text-right">{getShowingText()}</p>
<div className="flex flex-col sm:flex-row sm:items-center gap-4">
<div className="w-full">
<SearchInput placeholder={t("series.filters.search")} />
@@ -125,6 +144,6 @@ export function PaginatedSeriesGrid({
className="order-1 sm:order-2"
/>
</div>
</Container>
</div>
);
}

2
src/components/library/SearchInput.tsx
View File

@@ -39,7 +39,7 @@ export const SearchInput = ({ placeholder }: SearchInputProps) => {
<Input
type={isPending ? "text" : "search"}
placeholder={placeholder}
className="pl-9"
className="pl-3"
defaultValue={searchParams.get("search") ?? ""}
onChange={(e) => handleSearch(e.target.value)}
aria-label={placeholder}

8
src/i18n/messages/en/common.json
View File

@@ -197,6 +197,14 @@
"title": "Error",
"description": "An error occurred"
}
},
"header": {
"series": "{{count}} series",
"series_plural": "{{count}} series",
"books": "{{count}} book",
"books_plural": "{{count}} books",
"unavailable": "This library is currently unavailable",
"coverAlt": "Cover of {{name}}"
}
},
"series": {

8
src/i18n/messages/fr/common.json
View File

@@ -197,6 +197,14 @@
"title": "Erreur",
"description": "Une erreur est survenue"
}
},
"header": {
"series": "{{count}} série",
"series_plural": "{{count}} séries",
"books": "{{count}} livre",
"books_plural": "{{count}} livres",
"unavailable": "Cette bibliothèque est actuellement indisponible",
"coverAlt": "Couverture de {{name}}"
}
},
"series": {