initial commit with Youssef work

2025-12-22 20:20:39 +01:00
parent c0228d67d0
commit 3731e3f476
106 changed files with 12531 additions and 1 deletions
@@ -0,0 +1,69 @@
+"use client"
+
+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
+}
+
+interface ComicCanvasProps {
+  page: PageData
+}
+
+export function ComicCanvas({ page }: ComicCanvasProps) {
+  return (
+    <main className="flex-1 overflow-auto p-4 md:p-8 flex items-start justify-center relative">
+      {/* Dot grid background */}
+      <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="w-full h-full bg-neutral-900">
+              <img
+                src={page.image || "/placeholder.svg"}
+                alt={`Page ${page.id}`}
+                className="w-full h-full object-cover opacity-90 grayscale-[10%] contrast-110"
+              />
+            </div>
+            <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">
+              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>
+
+          {/* Mobile action buttons */}
+          <div className="flex items-center gap-2 md:hidden">
+            <Button
+              variant="ghost"
+              className="hover:bg-secondary text-muted-foreground hover:text-white gap-2 text-xs h-9 px-3 flex-1"
+            >
+              <RefreshCw className="w-4 h-4" />
+              <span>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"
+            >
+              <Download className="w-4 h-4" />
+              <span>Download</span>
+            </Button>
+          </div>
+        </div>
+      </div>
+    </main>
+  )
+}
@@ -0,0 +1,68 @@
+"use client"
+
+import { ArrowLeft, RefreshCw, Download, Plus, Info } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { useRouter } from "next/navigation"
+
+interface EditorToolbarProps {
+  title: string
+  onContinueStory: () => void
+  onInfoClick: () => void
+}
+
+export function EditorToolbar({ title, onContinueStory, onInfoClick }: EditorToolbarProps) {
+  const router = useRouter()
+
+  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">
+      <div className="flex items-center gap-2 sm:gap-3 min-w-0 flex-1">
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => router.push("/")}
+          className="hover:bg-secondary text-muted-foreground hover:text-white flex-shrink-0"
+        >
+          <ArrowLeft className="w-4 h-4 sm:w-5 sm:h-5" />
+        </Button>
+
+        <h1 className="text-sm sm:text-base text-white font-normal tracking-[-0.02em] truncate">{title}</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>
+
+        <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>
+    </header>
+  )
+}
@@ -0,0 +1,272 @@
+"use client"
+
+import { useState, useRef, useEffect } from "react"
+import { Upload, X, Loader2 } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+
+const COMIC_STYLES = [
+  { id: "american-modern", name: "American Modern" },
+  { id: "manga", name: "Manga" },
+  { id: "noir", name: "Noir" },
+  { id: "vintage", name: "Vintage" },
+]
+
+interface GeneratePageModalProps {
+  isOpen: boolean
+  onClose: () => void
+  onGenerate: (data: {
+    prompt: string
+    style: string
+    characterFiles?: File[]
+    isContinuation?: boolean
+  }) => void
+  pageNumber: number
+  previousCharacters?: File[]
+  previousPagePrompt?: string
+  previousPageStyle?: string
+}
+
+export function GeneratePageModal({
+  isOpen,
+  onClose,
+  onGenerate,
+  pageNumber,
+  previousCharacters,
+  previousPagePrompt,
+  previousPageStyle,
+}: GeneratePageModalProps) {
+  const [prompt, setPrompt] = useState("")
+  const [uploadedFiles, setUploadedFiles] = useState<File[]>(previousCharacters || [])
+  const [previews, setPreviews] = useState<string[]>([])
+  const [showPreview, setShowPreview] = useState<number | null>(null)
+  const [isGenerating, setIsGenerating] = useState(false)
+  const [isContinuing, setIsContinuing] = useState(false)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+
+  const selectedStyle = previousPageStyle || "noir"
+
+  useEffect(() => {
+    if (previousCharacters && previousCharacters.length > 0) {
+      const newPreviews: string[] = []
+      previousCharacters.forEach((file, index) => {
+        const reader = new FileReader()
+        reader.onload = (e) => {
+          newPreviews[index] = e.target?.result as string
+          if (newPreviews.filter(Boolean).length === previousCharacters.length) {
+            setPreviews([...newPreviews])
+          }
+        }
+        reader.readAsDataURL(file)
+      })
+    }
+  }, [previousCharacters])
+
+  const handleFiles = (newFiles: FileList | null) => {
+    if (!newFiles) return
+
+    const validFiles = Array.from(newFiles).filter((file) => file.type.startsWith("image/"))
+    const totalFiles = [...uploadedFiles, ...validFiles].slice(0, 2) // Max 2 files
+
+    setUploadedFiles(totalFiles)
+
+    const newPreviews: string[] = []
+    totalFiles.forEach((file, index) => {
+      const reader = new FileReader()
+      reader.onload = (e) => {
+        newPreviews[index] = e.target?.result as string
+        if (newPreviews.filter(Boolean).length === totalFiles.length) {
+          setPreviews([...newPreviews])
+        }
+      }
+      reader.readAsDataURL(file)
+    })
+  }
+
+  const removeFile = (index: number) => {
+    const newFiles = uploadedFiles.filter((_, i) => i !== index)
+    const newPreviews = previews.filter((_, i) => i !== index)
+    setUploadedFiles(newFiles)
+    setPreviews(newPreviews)
+    setShowPreview(null)
+    if (fileInputRef.current) {
+      fileInputRef.current.value = ""
+    }
+  }
+
+  const handleGenerate = () => {
+    if (!prompt.trim()) return
+    setIsGenerating(true)
+    onGenerate({
+      prompt,
+      style: selectedStyle,
+      characterFiles: uploadedFiles.length > 0 ? uploadedFiles : undefined,
+      isContinuation: false,
+    })
+  }
+
+  const handleContinue = () => {
+    setIsContinuing(true)
+    onGenerate({
+      prompt: prompt.trim() || `Continue the story from where it left off. Previous context: ${previousPagePrompt}`,
+      style: selectedStyle,
+      characterFiles: uploadedFiles.length > 0 ? uploadedFiles : undefined,
+      isContinuation: true,
+    })
+  }
+
+  useEffect(() => {
+    if (!isOpen) {
+      setIsGenerating(false)
+      setIsContinuing(false)
+      setPrompt("")
+    }
+  }, [isOpen])
+
+  return (
+    <>
+      <Dialog open={isOpen} onOpenChange={onClose}>
+        <DialogContent className="border border-border/50 rounded-lg bg-background max-w-lg">
+          <DialogHeader>
+            <DialogTitle className="text-xl text-white font-heading">Generate Page {pageNumber}</DialogTitle>
+          </DialogHeader>
+
+          <div className="space-y-4 mt-4">
+            <div className="relative glass-panel p-1 rounded-xl group focus-within:border-indigo/30 transition-colors">
+              <div className="bg-background/80 rounded-lg p-4 border border-border/50">
+                <div className="flex justify-between items-center mb-3">
+                  <label className="text-[10px] uppercase text-muted-foreground tracking-[0.02em] font-medium">
+                    Prompt
+                  </label>
+                  <div className="flex items-center gap-2 text-[10px] text-muted-foreground">
+                    <span className="capitalize">{selectedStyle}</span>
+                  </div>
+                </div>
+
+                <textarea
+                  value={prompt}
+                  onChange={(e) => setPrompt(e.target.value)}
+                  placeholder="Continue the story... Describe what happens next in the comic."
+                  className="w-full bg-transparent border-none text-sm text-white placeholder-muted-foreground/50 focus:ring-0 focus:outline-none resize-none h-20 leading-relaxed tracking-tight"
+                />
+
+                <div className="mt-3 pt-3 border-t border-border/30 flex items-center justify-between gap-2">
+                  <div className="flex items-center gap-2 flex-1 min-w-0">
+                    {uploadedFiles.length > 0 ? (
+                      <div className="flex items-center gap-2">
+                        {previews.map((preview, index) => (
+                          <div key={index} className="relative group/thumb">
+                            <button
+                              onClick={() => setShowPreview(index)}
+                              className="w-8 h-8 rounded-md overflow-hidden border border-border/50 hover:border-indigo/50 transition-colors"
+                            >
+                              <img
+                                src={preview || "/placeholder.svg"}
+                                alt={`Character ${index + 1}`}
+                                className="w-full h-full object-cover"
+                              />
+                            </button>
+                            <button
+                              onClick={(e) => {
+                                e.stopPropagation()
+                                removeFile(index)
+                              }}
+                              className="absolute -top-1.5 -right-1.5 w-4 h-4 bg-red-500 hover:bg-red-600 rounded-full flex items-center justify-center opacity-0 group-hover/thumb:opacity-100 transition-opacity"
+                            >
+                              <X className="w-2.5 h-2.5 text-white" />
+                            </button>
+                          </div>
+                        ))}
+                        {uploadedFiles.length < 2 && (
+                          <button
+                            onClick={() => fileInputRef.current?.click()}
+                            className="w-8 h-8 rounded-md border border-dashed border-border/50 hover:border-indigo/50 flex items-center justify-center text-muted-foreground hover:text-white transition-colors"
+                          >
+                            <Upload className="w-3.5 h-3.5" />
+                          </button>
+                        )}
+                      </div>
+                    ) : (
+                      <button
+                        onClick={() => fileInputRef.current?.click()}
+                        className="flex items-center gap-2 text-xs text-muted-foreground hover:text-white transition-colors"
+                      >
+                        <Upload className="w-3.5 h-3.5" />
+                        <span>Upload Characters</span>
+                        <span className="text-muted-foreground/50">(Max 2)</span>
+                      </button>
+                    )}
+                  </div>
+                </div>
+
+                <input
+                  ref={fileInputRef}
+                  type="file"
+                  accept="image/*"
+                  multiple
+                  className="hidden"
+                  onChange={(e) => handleFiles(e.target.files)}
+                />
+              </div>
+            </div>
+
+            <div className="flex gap-3">
+              <Button
+                onClick={handleContinue}
+                disabled={isGenerating || isContinuing}
+                variant="outline"
+                className="flex-1 gap-2 border-indigo/30 text-indigo hover:bg-indigo/10 hover:text-indigo tracking-tight bg-transparent"
+              >
+                {isContinuing ? (
+                  <>
+                    <Loader2 className="w-4 h-4 animate-spin" />
+                    <span>Continuing...</span>
+                  </>
+                ) : (
+                  `Continue from Page ${pageNumber - 1}`
+                )}
+              </Button>
+              <Button
+                onClick={handleGenerate}
+                disabled={!prompt.trim() || isGenerating || isContinuing}
+                className="flex-1 gap-2 bg-white hover:bg-neutral-200 text-black tracking-tight"
+              >
+                {isGenerating ? (
+                  <>
+                    <Loader2 className="w-4 h-4 animate-spin" />
+                    <span>Generating...</span>
+                  </>
+                ) : (
+                  `Generate Page ${pageNumber}`
+                )}
+              </Button>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {showPreview !== null && previews[showPreview] && (
+        <div
+          className="fixed inset-0 bg-black/80 backdrop-blur-sm z-[100] flex items-center justify-center p-4"
+          onClick={() => setShowPreview(null)}
+        >
+          <div className="relative max-w-2xl max-h-[80vh] glass-panel p-4 rounded-xl z-[101]">
+            <Button
+              variant="ghost"
+              size="icon"
+              className="absolute top-2 right-2 h-8 w-8 hover:bg-white/10 z-[102]"
+              onClick={() => setShowPreview(null)}
+            >
+              <X className="w-4 h-4" />
+            </Button>
+            <img
+              src={previews[showPreview] || "/placeholder.svg"}
+              alt="Character preview"
+              className="w-full h-full object-contain rounded-lg"
+            />
+          </div>
+        </div>
+      )}
+    </>
+  )
+}
@@ -0,0 +1,94 @@
+"use client"
+
+import { FileText, ImageIcon, Palette } from "lucide-react"
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet"
+
+interface PageData {
+  id: number
+  title: string
+  image: string
+  prompt: string
+  characterUploads?: string[]
+  style: string
+}
+
+interface PageInfoSheetProps {
+  isOpen: boolean
+  onClose: () => void
+  page: PageData
+}
+
+export function PageInfoSheet({ isOpen, onClose, page }: PageInfoSheetProps) {
+  return (
+    <Sheet open={isOpen} onOpenChange={onClose}>
+      <SheetContent className="w-full sm:max-w-md border-l border-border/50 bg-background px-6">
+        <SheetHeader className="pb-4 border-b border-border/50 px-0">
+          <SheetTitle className="text-base font-medium text-white">Page {page.id} Details</SheetTitle>
+        </SheetHeader>
+
+        <div className=" space-y-6">
+          {/* Prompt Section */}
+          <div className="space-y-2">
+            <div className="flex items-center gap-2 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
+              <FileText className="w-3.5 h-3.5" />
+              <span>Prompt</span>
+            </div>
+            <div className="p-3 glass-panel rounded-lg">
+              <p className="text-sm text-foreground leading-relaxed">{page.prompt}</p>
+            </div>
+          </div>
+
+          {/* Style Section */}
+          <div className="space-y-2">
+            <div className="flex items-center gap-2 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
+              <Palette className="w-3.5 h-3.5" />
+              <span>Style</span>
+            </div>
+            <div className="inline-flex items-center px-3 py-1.5 glass-panel rounded-md">
+              <span className="text-sm text-foreground">{page.style}</span>
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <div className="flex items-center gap-2 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
+              <ImageIcon className="w-3.5 h-3.5" />
+              <span>Character Uploads</span>
+            </div>
+            {page.characterUploads && page.characterUploads.length > 0 ? (
+              <div className="flex gap-2">
+                {page.characterUploads.map((upload, index) => (
+                  <div key={index} className="relative h-24 w-24 rounded-lg overflow-hidden glass-panel">
+                    <img
+                      src={upload || "/placeholder.svg"}
+                      alt={`Uploaded character ${index + 1}`}
+                      className="w-full h-full object-cover"
+                    />
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <div className="p-4 glass-panel rounded-lg text-center">
+                <p className="text-sm text-muted-foreground">No characters uploaded</p>
+              </div>
+            )}
+          </div>
+
+          {/* Generated Image Preview */}
+          <div className="space-y-2">
+            <div className="flex items-center gap-2 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
+              <ImageIcon className="w-3.5 h-3.5" />
+              <span>Generated Image</span>
+            </div>
+            <div className="relative aspect-[3/4] rounded-lg overflow-hidden glass-panel">
+              <img
+                src={page.image || "/placeholder.svg"}
+                alt={`Page ${page.id}`}
+                className="w-full h-full object-cover"
+              />
+            </div>
+          </div>
+        </div>
+      </SheetContent>
+    </Sheet>
+  )
+}
@@ -0,0 +1,88 @@
+"use client"
+
+import { Plus, Loader2, Key, User } from "lucide-react"
+import { Button } from "@/components/ui/button"
+
+interface PageData {
+  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
+}
+
+export function PageSidebar({
+  pages,
+  currentPage,
+  onPageSelect,
+  onAddPage,
+  loadingPageId,
+  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">
+        {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
+              ${
+                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"
+              }
+              ${loadingPageId === page.id ? "opacity-50" : ""}
+            `}
+          >
+            {loadingPageId === page.id ? <Loader2 className="w-4 h-4 animate-spin" /> : index + 1}
+          </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"
+        >
+          <Plus className="w-4 h-4 text-black transition-transform group-hover:scale-110" />
+        </Button>
+      </div>
+
+      <div className="flex flex-col items-center gap-3">
+        {/* API Key Button */}
+        <Button
+          onClick={onApiKeyClick}
+          variant="ghost"
+          size="icon"
+          className="w-9 h-9 glass-panel glass-panel-hover text-muted-foreground hover:text-white"
+          title="Manage API Key"
+        >
+          <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>
+    </aside>
+  )
+}