wip

components/editor/comic-canvas.tsx

@@ -1,19 +1,19 @@
-"use client"
+"use client";
 
-import { RefreshCw, Download } from "lucide-react"
-import { Button } from "@/components/ui/button"
+import { RefreshCw, Download } from "lucide-react";
+import { Button } from "@/components/ui/button";
 
 interface PageData {
-  id: number
-  title: string
-  image: string
-  prompt: string
-  characterUpload?: string
-  style: string
+  id: number;
+  title: string;
+  image: string;
+  prompt: string;
+  characterUpload?: string;
+  style: string;
 }
 
 interface ComicCanvasProps {
-  page: PageData
+  page: PageData;
 }
 
 export function ComicCanvas({ page }: ComicCanvasProps) {
@@ -23,8 +23,11 @@ export function ComicCanvas({ page }: ComicCanvasProps) {
       <div className="absolute inset-0 dot-grid opacity-20" />
 
       <div className="relative z-10 w-full max-w-xl">
-        <div className="bg-white w-full p-3 shadow-2xl rounded-sm mx-auto" style={{ maxWidth: "512px" }}>
-           <div className="w-full border-4 border-black overflow-hidden relative aspect-3/4">
+        <div
+          className="bg-white w-full p-3 shadow-2xl rounded-sm mx-auto group"
+          style={{ maxWidth: "512px" }}
+        >
+          <div className="w-full border-4 border-black overflow-hidden relative aspect-3/4">
             <div className="w-full h-full bg-neutral-900">
               <img
                 src={page.image || "/placeholder.svg"}
@@ -35,14 +38,14 @@ export function ComicCanvas({ page }: ComicCanvasProps) {
             <div className="scan-line opacity-30" />
 
             {/* Page label */}
-            <div className="absolute top-2 left-2 px-1.5 py-0.5 bg-black/70 text-[9px] text-white font-mono uppercase tracking-widest border border-white/10">
+            <div className="absolute top-2 left-2 px-1.5 py-0.5 bg-black/70 text-[9px] text-white font-mono uppercase tracking-widest border border-white/10 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
               Page {page.id}
             </div>
           </div>
         </div>
 
         <div className="flex flex-col items-center gap-3 mt-4">
-          <div className="text-xs text-muted-foreground">Page {page.id}</div>
+          {/* <div className="text-xs text-muted-foreground">Page {page.id}</div> */}
 
           {/* Mobile action buttons */}
           <div className="flex items-center gap-2 md:hidden">
@@ -65,5 +68,5 @@ export function ComicCanvas({ page }: ComicCanvasProps) {
         </div>
       </div>
     </main>
-  )
+  );
 }

components/editor/page-sidebar.tsx

@@ -1,7 +1,8 @@
 "use client"
 
-import { Plus, Loader2, Key, User } from "lucide-react"
+import { Plus, Loader2, Key } from "lucide-react"
 import { Button } from "@/components/ui/button"
+import { UserButton } from "@clerk/nextjs"
 
 interface PageData {
   id: number
@@ -75,13 +76,15 @@ export function PageSidebar({
           <Key className="w-4 h-4" />
         </Button>
 
-        {/* Avatar Circle - placeholder for future Clerk integration */}
-        <button
-          className="w-9 h-9 glass-panel rounded-full flex items-center justify-center text-muted-foreground hover:text-white transition-colors"
-          title="User Profile (Coming Soon)"
-        >
-          <User 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">
+          <UserButton
+            appearance={{
+              elements: {
+                avatarBox: "w-full h-full rounded-md",
+              },
+            }}
+          />
+        </div>
       </div>
     </aside>
   )