Add ownership checks and share functionality to story editor

app/api/stories/[storySlug]/route.ts

@@ -10,19 +10,23 @@ export async function GET(
   { params }: { params: Promise<{ storySlug: string }> }
 ) {
   try {
-    const { userId } = await auth();
+    const authResult = await auth();
+    const { userId } = authResult;
 
-    if (!userId) {
+    console.log('API: auth result:', authResult);
-      return NextResponse.json(
+    console.log('API: userId type:', typeof userId, 'value:', userId);
-        { error: "Authentication required" },
+    console.log('API: timestamp:', new Date().toISOString());
-        { status: 401 }
-      );
-    }
 
     const { storySlug: slug } = await params;
 
     // Special case: if slug is "all", return user's stories for debugging
     if (slug === "all") {
+      if (!userId) {
+        return NextResponse.json(
+          { error: "Authentication required for this endpoint" },
+          { status: 401 }
+        );
+      }
       const userStories = await db.select().from(stories).where(eq(stories.userId, userId));
       return NextResponse.json({
         message: "User stories",
@@ -47,14 +51,14 @@ export async function GET(
     }
 
     // Check if the story belongs to the authenticated user
-    if (result.story.userId !== userId) {
+    const isOwner = userId ? result.story.userId === userId : false;
-      return NextResponse.json(
-        { error: "Access denied" },
-        { status: 403 }
-      );
-    }
 
-    return NextResponse.json(result);
+    // Return the story data with ownership information
+    const responseData = {
+      ...result,
+      isOwner,
+    };
+    return NextResponse.json(responseData);
   } catch (error) {
     console.error("Error fetching story:", error);
     return NextResponse.json(

app/editor/[storySlug]/page.tsx

@@ -28,6 +28,7 @@ interface StoryData {
   description?: string | null;
   style: string;
   userId?: string | null;
+  isOwner?: boolean;
 }
 
 export default function StoryEditorPage() {
@@ -35,6 +36,7 @@ export default function StoryEditorPage() {
   const slug = params.storySlug as string;
 
   const [story, setStory] = useState<StoryData | null>(null);
+  const [isOwner, setIsOwner] = useState<boolean>(false);
   const [pages, setPages] = useState<PageData[]>([]);
   const [currentPage, setCurrentPage] = useState(0);
   const [showApiModal, setShowApiModal] = useState(false);
@@ -57,9 +59,18 @@ export default function StoryEditorPage() {
         }
 
         const result = await response.json();
-        const { story: storyData, pages: pagesData } = result;
+        console.log("Editor: full API response:", result);
+
+        const {
+          story: storyData,
+          pages: pagesData,
+          isOwner: ownerStatus,
+        } = result;
+
+        console.log("Editor: received story data:", storyData);
 
         setStory(storyData);
+        setIsOwner(ownerStatus ?? false); // Default to false if undefined
         setPages(
           pagesData.map((page: any) => ({
             id: page.pageNumber,
@@ -157,9 +168,7 @@ export default function StoryEditorPage() {
       // Update the current page with the new image
       setPages((prevPages) =>
         prevPages.map((page, index) =>
-          index === currentPage
+          index === currentPage ? { ...page, image: result.imageUrl } : page
-            ? { ...page, image: result.imageUrl }
-            : page
         )
       );
 
@@ -172,7 +181,8 @@ export default function StoryEditorPage() {
       console.error("Error redrawing page:", error);
       toast({
         title: "Failed to redraw page",
-        description: error instanceof Error ? error.message : "Failed to redraw page",
+        description:
+          error instanceof Error ? error.message : "Failed to redraw page",
         variant: "destructive",
         duration: 4000,
       });
@@ -247,9 +257,7 @@ export default function StoryEditorPage() {
       toast({
         title: "Failed to generate page",
         description:
-          error instanceof Error
+          error instanceof Error ? error.message : "Failed to generate page",
-            ? error.message
-            : "Failed to generate page",
         variant: "destructive",
         duration: 4000,
       });
@@ -274,7 +282,11 @@ export default function StoryEditorPage() {
 
   return (
     <div className="h-screen flex flex-col bg-background">
-      <EditorToolbar title={story.title} onContinueStory={handleAddPage} />
+      <EditorToolbar
+        title={story.title}
+        onContinueStory={handleAddPage}
+        isOwner={isOwner}
+      />
 
       <div className="flex-1 flex overflow-hidden">
         <PageSidebar
@@ -284,11 +296,13 @@ export default function StoryEditorPage() {
           onAddPage={handleAddPage}
           loadingPageId={loadingPageId}
           onApiKeyClick={handleApiKeyClick}
+          isOwner={isOwner}
         />
         <ComicCanvas
           page={pages[currentPage]}
           pageIndex={currentPage}
           isLoading={loadingPageId === currentPage}
+          isOwner={isOwner}
           onInfoClick={() => setShowInfoSheet(true)}
           onRedrawClick={handleRedrawPage}
           onNextPage={() =>

components/editor/comic-canvas.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { RefreshCw, Download, Info, Loader2 } from "lucide-react";
+import { RefreshCw, Share, Info, Loader2 } from "lucide-react";
+import { useToast } from "@/hooks/use-toast";
 import { Button } from "@/components/ui/button";
 
 interface PageData {
@@ -17,13 +18,25 @@ interface ComicCanvasProps {
   page: PageData;
   pageIndex: number;
   isLoading?: boolean;
+  isOwner?: boolean;
   onInfoClick?: () => void;
   onRedrawClick?: () => void;
   onNextPage?: () => void;
   onPrevPage?: () => void;
 }
 
-export function ComicCanvas({ page, pageIndex, isLoading = false, onInfoClick, onRedrawClick, onNextPage, onPrevPage }: ComicCanvasProps) {
+export function ComicCanvas({
+  page,
+  pageIndex,
+  isLoading = false,
+  isOwner = true,
+  onInfoClick,
+  onRedrawClick,
+  onNextPage,
+  onPrevPage,
+}: ComicCanvasProps) {
+  const { toast } = useToast();
+
   return (
     <main className="flex-1 overflow-auto p-4 md:p-8 flex items-start justify-center relative">
       {/* Dot grid background */}
@@ -77,6 +90,7 @@ export function ComicCanvas({ page, pageIndex, isLoading = false, onInfoClick, o
             </Button>
           )}
 
+          {isOwner && (
             <Button
               variant="ghost"
               className="hover:bg-secondary text-muted-foreground hover:text-white gap-2 text-xs h-9 px-3"
@@ -90,6 +104,7 @@ export function ComicCanvas({ page, pageIndex, isLoading = false, onInfoClick, o
               )}
               <span>{isLoading ? "Redrawing..." : "Redraw"}</span>
             </Button>
+          )}
         </div>
 
         <div className="flex flex-col items-center gap-3 mt-4">
@@ -97,6 +112,7 @@ export function ComicCanvas({ page, pageIndex, isLoading = false, onInfoClick, o
 
           {/* Mobile action buttons */}
           <div className="flex items-center gap-2 md:hidden">
+            {isOwner && (
               <Button
                 variant="ghost"
                 className="hover:bg-secondary text-muted-foreground hover:text-white gap-2 text-xs h-9 px-3 flex-1"
@@ -110,13 +126,33 @@ export function ComicCanvas({ page, pageIndex, isLoading = false, onInfoClick, o
                 )}
                 <span>{isLoading ? "Redrawing..." : "Redraw"}</span>
               </Button>
+            )}
 
             <Button
               variant="ghost"
               className="hover:bg-secondary text-muted-foreground hover:text-white gap-2 text-xs h-9 px-3 flex-1"
+              onClick={async () => {
+                const url = window.location.href;
+                try {
+                  await navigator.clipboard.writeText(url);
+                  toast({
+                    title: "Link copied!",
+                    description: "Story URL has been copied to your clipboard.",
+                    duration: 2000,
+                  });
+                } catch (err) {
+                  console.error("Failed to copy URL:", err);
+                  toast({
+                    title: "Failed to copy",
+                    description: "Could not copy the URL to clipboard.",
+                    variant: "destructive",
+                    duration: 3000,
+                  });
+                }
+              }}
             >
-              <Download className="w-4 h-4" />
+              <Share className="w-4 h-4" />
-              <span>Download</span>
+              <span>Share</span>
             </Button>
           </div>
         </div>

components/editor/editor-toolbar.tsx

@@ -1,19 +1,23 @@
 "use client";
 
-import { ArrowLeft, RefreshCw, Download, Plus, Info } from "lucide-react";
+import { ArrowLeft, RefreshCw, Share, Plus, Info } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { useRouter } from "next/navigation";
+import { useToast } from "@/hooks/use-toast";
 
 interface EditorToolbarProps {
   title: string;
   onContinueStory?: () => void;
+  isOwner?: boolean;
 }
 
 export function EditorToolbar({
   title,
   onContinueStory,
+  isOwner = true,
 }: EditorToolbarProps) {
   const router = useRouter();
+  const { toast } = useToast();
 
   return (
     <header className="h-14 border-b border-border/50 bg-background/80 backdrop-blur-md flex items-center justify-between px-3 sm:px-4">
@@ -21,7 +25,7 @@ export function EditorToolbar({
         <Button
           variant="ghost"
           size="icon"
-          onClick={() => router.push("/stories")}
+          onClick={() => (isOwner ? router.push("/stories") : router.push("/"))}
           className="hover:bg-secondary text-muted-foreground hover:text-white shrink-0"
         >
           <ArrowLeft className="w-4 h-4 sm:w-5 sm:h-5" />
@@ -36,11 +40,31 @@ export function EditorToolbar({
         <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"
+          onClick={async () => {
+            const url = window.location.href;
+            try {
+              await navigator.clipboard.writeText(url);
+              toast({
+                title: "Link copied!",
+                description: "Story URL has been copied to your clipboard.",
+                duration: 2000,
+              });
+            } catch (err) {
+              console.error("Failed to copy URL:", err);
+              toast({
+                title: "Failed to copy",
+                description: "Could not copy the URL to clipboard.",
+                variant: "destructive",
+                duration: 3000,
+              });
+            }
+          }}
         >
-           <Download className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
+          <Share className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
-           <span>Download PDF</span>
+          <span>Share</span>
         </Button>
 
+        {isOwner && onContinueStory && (
           <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"
@@ -49,6 +73,7 @@ export function EditorToolbar({
             <span className="hidden sm:inline">Continue story</span>
             <span className="sm:hidden">Add</span>
           </Button>
+        )}
       </div>
     </header>
   );

components/editor/page-sidebar.tsx

@@ -1,25 +1,26 @@
-"use client"
+"use client";
 
-import { Plus, Loader2, Key } from "lucide-react"
+import { Plus, Loader2, Key } from "lucide-react";
-import { Button } from "@/components/ui/button"
+import { Button } from "@/components/ui/button";
-import { UserButton } from "@clerk/nextjs"
+import { UserButton, SignedIn } from "@clerk/nextjs";
 
 interface PageData {
-  id: number
+  id: number;
-  title: string
+  title: string;
-  image: string
+  image: string;
-  prompt: string
+  prompt: string;
-  characterUpload?: string
+  characterUpload?: string;
-  style: string
+  style: string;
 }
 
 interface PageSidebarProps {
-  pages: PageData[]
+  pages: PageData[];
-  currentPage: number
+  currentPage: number;
-  onPageSelect: (index: number) => void
+  onPageSelect: (index: number) => void;
-  onAddPage: () => void
+  onAddPage: () => void;
-  loadingPageId?: number | null
+  loadingPageId?: number | null;
-  onApiKeyClick?: () => void
+  onApiKeyClick?: () => void;
+  isOwner?: boolean;
 }
 
 export function PageSidebar({
@@ -29,6 +30,7 @@ export function PageSidebar({
   onAddPage,
   loadingPageId,
   onApiKeyClick,
+  isOwner = true,
 }: PageSidebarProps) {
   return (
     <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">
@@ -60,14 +62,16 @@ export function PageSidebar({
                   alt={`Page ${index + 1}`}
                   className="w-full h-full object-cover"
                 />
-                <div className={`
+                <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>
               </>
@@ -75,12 +79,14 @@ export function PageSidebar({
           </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 group-hover:scale-110" />
           </button>
+        )}
       </div>
 
       <div className="flex flex-col items-center gap-3">
@@ -95,6 +101,7 @@ export function PageSidebar({
           <Key className="w-4 h-4" />
         </Button>
 
+        <SignedIn>
           <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={{
@@ -104,7 +111,8 @@ export function PageSidebar({
               }}
             />
           </div>
+        </SignedIn>
       </div>
     </aside>
-  )
+  );
 }