Add ownership checks and share functionality to story editor

2025-12-26 21:02:36 +01:00
parent 5917508175
commit 0ff8a4e685
5 changed files with 188 additions and 101 deletions
@@ -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,29 +90,10 @@ export function ComicCanvas({ page, pageIndex, isLoading = false, onInfoClick, o
            </Button>
          )}

-          <Button
-            variant="ghost"
-            className="hover:bg-secondary text-muted-foreground hover:text-white gap-2 text-xs h-9 px-3"
-            onClick={onRedrawClick}
-            disabled={isLoading}
-          >
-            {isLoading ? (
-              <Loader2 className="w-4 h-4 animate-spin" />
-            ) : (
-              <RefreshCw className="w-4 h-4" />
-            )}
-            <span>{isLoading ? "Redrawing..." : "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> */}
-
-          {/* 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"
+              className="hover:bg-secondary text-muted-foreground hover:text-white gap-2 text-xs h-9 px-3"
              onClick={onRedrawClick}
              disabled={isLoading}
            >
@@ -110,13 +104,55 @@ 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">
+          {/* <div className="text-xs text-muted-foreground">Page {page.id}</div> */}
+
+          {/* 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"
+                onClick={onRedrawClick}
+                disabled={isLoading}
+              >
+                {isLoading ? (
+                  <Loader2 className="w-4 h-4 animate-spin" />
+                ) : (
+                  <RefreshCw className="w-4 h-4" />
+                )}
+                <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" />
-              <span>Download</span>
+              <Share className="w-4 h-4" />
+              <span>Share</span>
            </Button>
          </div>
        </div>
@@ -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" />
@@ -32,24 +36,45 @@ export function EditorToolbar({
        </h1>
      </div>

-        <div className="flex items-center gap-1 sm:gap-2 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>
+      <div className="flex items-center gap-1 sm:gap-2 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"
+          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,
+              });
+            }
+          }}
+        >
+          <Share className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
+          <span>Share</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>
+        {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"
+          >
+            <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>
  );
 }
@@ -1,25 +1,26 @@
-"use client"
+"use client";

-import { Plus, Loader2, Key } from "lucide-react"
-import { Button } from "@/components/ui/button"
-import { UserButton } from "@clerk/nextjs"
+import { Plus, Loader2, Key } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { UserButton, SignedIn } from "@clerk/nextjs";

 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 PageSidebarProps {
-  pages: PageData[]
-  currentPage: number
-  onPageSelect: (index: number) => void
-  onAddPage: () => void
-  loadingPageId?: number | null
-  onApiKeyClick?: () => void
+  pages: PageData[];
+  currentPage: number;
+  onPageSelect: (index: number) => void;
+  onAddPage: () => void;
+  loadingPageId?: number | null;
+  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>
        ))}

-        <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>
+        {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,16 +101,18 @@ export function PageSidebar({
          <Key className="w-4 h-4" />
        </Button>

-        <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: {
-                avatarBox: "w-full h-full rounded-md",
-              },
-            }}
-          />
-        </div>
+        <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={{
+                elements: {
+                  avatarBox: "w-full h-full rounded-md",
+                },
+              }}
+            />
+          </div>
+        </SignedIn>
      </div>
    </aside>
-  )
+  );
 }