3dtours/make-comics
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add scrollable page thumbnails with scrollbar styling in page sidebar

Browse Source
This commit is contained in:
Riccardo Giorato
2026-02-11 11:27:04 +01:00
parent a56a21bc87
commit a05fdea297
1 changed files with 54 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/editor/page-sidebar.tsx
+54 -52
View File
@@ -33,63 +33,65 @@ export function PageSidebar({
isOwner = true,
}: PageSidebarProps) {
return (
<aside className="hidden md:flex md:flex-col md:items-center w-24 border-r border-border/50 bg-background/50 py-4 gap-2 justify-between">
<aside className="hidden md:flex md:flex-col md:items-center w-24 border-r border-border/50 bg-background/50 py-4 gap-2 justify-between h-full">
{/* Top section: page thumbnails */}
<div className="flex flex-col items-center gap-3">
{pages.map((page, index) => (
<button
key={page.id}
onClick={() => onPageSelect(index)}
disabled={loadingPageId === index}
className={`
w-16 h-16 rounded-lg transition-all relative overflow-hidden
${
currentPage === index
? "ring-2 ring-indigo shadow-lg shadow-indigo/20"
: "glass-panel glass-panel-hover hover:ring-1 hover:ring-white/20"
}
${loadingPageId === index ? "opacity-50" : ""}
`}
>
{loadingPageId === index ? (
<div className="w-full h-full flex items-center justify-center">
<Loader2 className="w-6 h-6 animate-spin text-white" />
</div>
) : (
<>
<img
src={page.image || "/placeholder.svg"}
alt={`Page ${index + 1}`}
className="w-full h-full object-cover"
/>
<div
className={`
absolute bottom-1 left-1 px-1.5 py-0.5 rounded text-[10px] font-medium tracking-tight
${
currentPage === index
? "bg-indigo text-white"
: "bg-black/70 text-white"
}
`}
>
{index + 1}
<div className="flex-1 w-full overflow-y-auto min-h-0 [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-muted-foreground/60 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:hover:bg-muted-foreground">
<div className="flex flex-col items-center gap-3 px-2 py-1">
{pages.map((page, index) => (
<button
key={page.id}
onClick={() => onPageSelect(index)}
disabled={loadingPageId === index}
className={`
w-16 h-16 rounded-lg transition-all relative overflow-hidden flex-shrink-0
${
currentPage === index
? "ring-2 ring-indigo shadow-lg shadow-indigo/20"
: "glass-panel glass-panel-hover hover:ring-1 hover:ring-white/20"
}
${loadingPageId === index ? "opacity-50" : ""}
`}
>
{loadingPageId === index ? (
<div className="w-full h-full flex items-center justify-center">
<Loader2 className="w-6 h-6 animate-spin text-white" />
</div>
</>
)}
</button>
))}
) : (
<>
<img
src={page.image || "/placeholder.svg"}
alt={`Page ${index + 1}`}
className="w-full h-full object-cover"
/>
<div
className={`
absolute bottom-1 left-1 px-1.5 py-0.5 rounded text-[10px] font-medium tracking-tight
${
currentPage === index
? "bg-indigo text-white"
: "bg-black/70 text-white"
}
`}
>
{index + 1}
</div>
</>
)}
</button>
))}
{isOwner && (
<button
onClick={onAddPage}
className="w-16 h-16 rounded-lg border-2 border-dashed border-border/50 hover:border-indigo/50 bg-background/50 hover:bg-background/80 transition-all group flex items-center justify-center"
>
<Plus className="w-6 h-6 text-muted-foreground group-hover:text-indigo transition-transform" />
</button>
)}
{isOwner && (
<button
onClick={onAddPage}
className="w-16 h-16 rounded-lg border-2 border-dashed border-border/50 hover:border-indigo/50 bg-background/50 hover:bg-background/80 transition-all group flex items-center justify-center flex-shrink-0"
>
<Plus className="w-6 h-6 text-muted-foreground group-hover:text-indigo transition-transform" />
</button>
)}
</div>
</div>
<div className="flex flex-col items-center gap-3">
<div className="flex flex-col items-center gap-3 pt-2">
{/* API Key Button */}
<Button
onClick={onApiKeyClick}