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
+7 -5
View File
@@ -33,16 +33,17 @@ export function PageSidebar({
isOwner = true, isOwner = true,
}: PageSidebarProps) { }: PageSidebarProps) {
return ( 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 */} {/* Top section: page thumbnails */}
<div className="flex flex-col items-center gap-3"> <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) => ( {pages.map((page, index) => (
<button <button
key={page.id} key={page.id}
onClick={() => onPageSelect(index)} onClick={() => onPageSelect(index)}
disabled={loadingPageId === index} disabled={loadingPageId === index}
className={` className={`
w-16 h-16 rounded-lg transition-all relative overflow-hidden w-16 h-16 rounded-lg transition-all relative overflow-hidden flex-shrink-0
${ ${
currentPage === index currentPage === index
? "ring-2 ring-indigo shadow-lg shadow-indigo/20" ? "ring-2 ring-indigo shadow-lg shadow-indigo/20"
@@ -82,14 +83,15 @@ export function PageSidebar({
{isOwner && ( {isOwner && (
<button <button
onClick={onAddPage} 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" 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" /> <Plus className="w-6 h-6 text-muted-foreground group-hover:text-indigo transition-transform" />
</button> </button>
)} )}
</div> </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 */} {/* API Key Button */}
<Button <Button
onClick={onApiKeyClick} onClick={onApiKeyClick}