Move info and redraw actions to ComicCanvas, update sidebar UI

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.
2025-12-26 17:40:41 +01:00
parent 9895200db6
commit 47263231af
4 changed files with 101 additions and 63 deletions
@@ -128,14 +128,10 @@ export default function StoryEditorPage() {
    if (wasGenerating) {
      setShowGenerateModal(true);
    }
-
-    toast({
-      title: "API key saved",
-      description: "Your Together API key has been saved successfully",
-      duration: 3000,
-    });
  };

+
+
  const handleGeneratePage = async (data: {
    prompt: string;
    style: string;
@@ -216,7 +212,6 @@ export default function StoryEditorPage() {
    <div className="h-screen flex flex-col bg-background">
      <EditorToolbar
        title={story.title}
-        onInfoClick={() => setShowInfoSheet(true)}
        onContinueStory={handleAddPage}
      />

@@ -229,7 +224,12 @@ export default function StoryEditorPage() {
          loadingPageId={loadingPageId}
          onApiKeyClick={handleApiKeyClick}
        />
-        <ComicCanvas page={pages[currentPage]} />
+        <ComicCanvas
+          page={pages[currentPage]}
+          onInfoClick={() => setShowInfoSheet(true)}
+          onNextPage={() => setCurrentPage((prev) => (prev < pages.length - 1 ? prev + 1 : prev))}
+          onPrevPage={() => setCurrentPage((prev) => (prev > 0 ? prev - 1 : prev))}
+        />
      </div>

      <ApiKeyModal
@@ -1,6 +1,6 @@
 "use client";

-import { RefreshCw, Download } from "lucide-react";
+import { RefreshCw, Download, Info } from "lucide-react";
 import { Button } from "@/components/ui/button";

 interface PageData {
@@ -14,9 +14,12 @@ interface PageData {

 interface ComicCanvasProps {
  page: PageData;
+  onInfoClick?: () => void;
+  onNextPage?: () => void;
+  onPrevPage?: () => void;
 }

-export function ComicCanvas({ page }: ComicCanvasProps) {
+export function ComicCanvas({ page, onInfoClick, onNextPage, onPrevPage }: ComicCanvasProps) {
  return (
    <main className="flex-1 overflow-auto p-4 md:p-8 flex items-start justify-center relative">
      {/* Dot grid background */}
@@ -32,7 +35,20 @@ export function ComicCanvas({ page }: ComicCanvasProps) {
              <img
                src={page.image || "/placeholder.svg"}
                alt={`Page ${page.id}`}
-                className="w-full h-full object-cover opacity-90 grayscale-10 contrast-110"
+                className="w-full h-full object-cover opacity-90 grayscale-10 contrast-110 cursor-pointer"
+                onClick={(e) => {
+                  const rect = e.currentTarget.getBoundingClientRect();
+                  const clickX = e.clientX - rect.left;
+                  const imageWidth = rect.width;
+
+                  if (clickX > imageWidth / 2) {
+                    // Right half - next page
+                    onNextPage?.();
+                  } else {
+                    // Left half - previous page
+                    onPrevPage?.();
+                  }
+                }}
              />
            </div>
            <div className="scan-line opacity-30" />
@@ -44,6 +60,28 @@ export function ComicCanvas({ page }: ComicCanvasProps) {
          </div>
        </div>

+        {/* Action buttons below the page image */}
+        <div className="flex items-center justify-center gap-2 mt-4">
+          {onInfoClick && (
+            <Button
+              variant="ghost"
+              size="icon"
+              className="hover:bg-secondary text-muted-foreground hover:text-white h-9 w-9"
+              onClick={onInfoClick}
+            >
+              <Info className="w-4 h-4" />
+            </Button>
+          )}
+
+          <Button
+            variant="ghost"
+            className="hover:bg-secondary text-muted-foreground hover:text-white gap-2 text-xs h-9 px-3"
+          >
+            <RefreshCw className="w-4 h-4" />
+            <span>Redraw</span>
+          </Button>
+        </div>
+
        <div className="flex flex-col items-center gap-3 mt-4">
          {/* <div className="text-xs text-muted-foreground">Page {page.id}</div> */}

@@ -6,13 +6,11 @@ import { useRouter } from "next/navigation";

 interface EditorToolbarProps {
  title: string;
-  onInfoClick: () => void;
  onContinueStory?: () => void;
 }

 export function EditorToolbar({
  title,
-  onInfoClick,
  onContinueStory,
 }: EditorToolbarProps) {
  const router = useRouter();
@@ -34,41 +32,24 @@ export function EditorToolbar({
        </h1>
      </div>

-      <div className="flex items-center gap-1 sm:gap-2 flex-shrink-0">
-        <Button
-          variant="ghost"
-          size="icon"
-          className="hover:bg-secondary text-muted-foreground hover:text-white h-8 w-8 sm:h-9 sm:w-9"
-          onClick={onInfoClick}
-        >
-          <Info className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
-        </Button>
+       <div className="flex items-center gap-1 sm:gap-2 flex-shrink-0">
+         <Button
+           variant="ghost"
+           className="hover:bg-secondary text-muted-foreground hover:text-white gap-1.5 sm:gap-2 text-xs h-8 sm:h-9 px-2 sm:px-3 hidden md:flex"
+         >
+           <Download className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
+           <span>Download PDF</span>
+         </Button>

-        <Button
-          variant="ghost"
-          className="hover:bg-secondary text-muted-foreground hover:text-white gap-1.5 sm:gap-2 text-xs h-8 sm:h-9 px-2 sm:px-3 hidden md:flex"
-        >
-          <RefreshCw className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
-          <span>Redraw</span>
-        </Button>
-
-        <Button
-          variant="ghost"
-          className="hover:bg-secondary text-muted-foreground hover:text-white gap-1.5 sm:gap-2 text-xs h-8 sm:h-9 px-2 sm:px-3 hidden md:flex"
-        >
-          <Download className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
-          <span>Download PDF</span>
-        </Button>
-
-        <Button
-          onClick={onContinueStory}
-          className="gap-1.5 sm:gap-2 text-xs bg-white hover:bg-neutral-200 text-black h-8 sm:h-9 px-3 sm:px-4"
-        >
-          <Plus className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
-          <span className="hidden sm:inline">Continue story</span>
-          <span className="sm:hidden">Add</span>
-        </Button>
-      </div>
+         <Button
+           onClick={onContinueStory}
+           className="gap-1.5 sm:gap-2 text-xs bg-white hover:bg-neutral-200 text-black h-8 sm:h-9 px-3 sm:px-4"
+         >
+           <Plus className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
+           <span className="hidden sm:inline">Continue story</span>
+           <span className="sm:hidden">Add</span>
+         </Button>
+       </div>
    </header>
  );
 }
@@ -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: {