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

Move info and redraw actions to ComicCanvas, update sidebar UI

Browse Source 
Shifted the info and redraw buttons from the editor toolbar to the ComicCanvas component, allowing for contextual actions per page. Enhanced ComicCanvas to support page navigation via image clicks and added optional callbacks for info and navigation. Updated the page sidebar to display page thumbnails instead of numbers, improved the add page button, and adjusted button sizes for better usability.
This commit is contained in:
Riccardo Giorato
2025-12-26 17:40:41 +01:00
parent 9895200db6
commit 47263231af
4 changed files with 101 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/editor/page-sidebar.tsx
+35 -16
View File
@@ -31,37 +31,56 @@ export function PageSidebar({
onApiKeyClick,
}: PageSidebarProps) {
return (
<aside className="w-16 md:w-20 border-r border-border/50 bg-background/50 flex flex-col items-center py-4 gap-2 justify-between">
{/* Top section: page numbers */}
<div className="flex flex-col items-center gap-2">
<aside className="w-20 md:w-24 border-r border-border/50 bg-background/50 flex flex-col items-center py-4 gap-2 justify-between">
{/* 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 === page.id}
className={`
w-9 h-9 rounded-md transition-all
flex items-center justify-center font-medium text-sm tracking-tight
w-16 h-16 rounded-lg transition-all relative overflow-hidden
${
currentPage === index
? "bg-black border-2 border-indigo text-white shadow-lg shadow-indigo/20"
: "glass-panel glass-panel-hover text-muted-foreground hover:text-white"
? "ring-2 ring-indigo shadow-lg shadow-indigo/20"
: "glass-panel glass-panel-hover hover:ring-1 hover:ring-white/20"
}
${loadingPageId === page.id ? "opacity-50" : ""}
`}
>
{loadingPageId === page.id ? <Loader2 className="w-4 h-4 animate-spin" /> : index + 1}
{loadingPageId === page.id ? (
<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>
</>
)}
</button>
))}
<Button
<button
onClick={onAddPage}
variant="ghost"
size="icon"
className="w-9 h-9 bg-white hover:bg-neutral-200 text-black border-0 transition-all group"
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-4 h-4 text-black transition-transform group-hover:scale-110" />
</Button>
<Plus className="w-6 h-6 text-muted-foreground group-hover:text-indigo transition-transform group-hover:scale-110" />
</button>
</div>
<div className="flex flex-col items-center gap-3">
@@ -70,13 +89,13 @@ export function PageSidebar({
onClick={onApiKeyClick}
variant="ghost"
size="icon"
className="w-9 h-9 glass-panel glass-panel-hover text-muted-foreground hover:text-white"
className="w-10 h-10 glass-panel glass-panel-hover text-muted-foreground hover:text-white"
title="Manage API Key"
>
<Key className="w-4 h-4" />
</Button>
<div className="w-9 h-9 glass-panel glass-panel-hover rounded-md flex items-center justify-center text-muted-foreground hover:text-white transition-colors">
<div className="w-10 h-10 glass-panel glass-panel-hover rounded-md flex items-center justify-center text-muted-foreground hover:text-white transition-colors">
<UserButton
appearance={{
elements: {