Add loading state and style constants, enhance API key modal with delete

2025-12-26 12:15:01 +01:00
parent 14b247ffaa
commit 66b252fb2e
17 changed files with 379 additions and 198 deletions
@@ -2,7 +2,7 @@

 import type React from "react";
 import { useState, useEffect } from "react";
-import { Key, ExternalLink, ArrowRight } from "lucide-react";
+import { Key, ExternalLink, ArrowRight, X } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import {
@@ -49,6 +49,13 @@ export function ApiKeyModal({ isOpen, onClose, onSubmit }: ApiKeyModalProps) {
    setApiKey("");
  };

+  const handleDelete = () => {
+    localStorage.removeItem("together_api_key");
+    setExistingKey(null);
+    setApiKey("");
+    onClose();
+  };
+
  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="border border-border/50 rounded-lg bg-background max-w-md">
@@ -67,19 +74,30 @@ export function ApiKeyModal({ isOpen, onClose, onSubmit }: ApiKeyModalProps) {

          <DialogDescription className="text-center text-muted-foreground">
            {existingKey
-              ? "Update your Together API key or add a new one."
+              ? "Update your Together API key or add a new one. You can also delete your existing key."
              : "Your first page was free! Add your Together API key to generate more pages."}
          </DialogDescription>
        </DialogHeader>

        <form onSubmit={handleSubmit} className="space-y-4 mt-4">
-          <Input
-            type="password"
-            value={apiKey}
-            onChange={(e) => setApiKey(e.target.value)}
-            placeholder="Enter your API key..."
-            className="bg-secondary border-border/50 text-white placeholder-muted-foreground py-5"
-          />
+          <div className="relative">
+            <Input
+              type="password"
+              value={apiKey}
+              onChange={(e) => setApiKey(e.target.value)}
+              placeholder={existingKey ? "Your current API key" : "Enter your API key..."}
+              className="bg-secondary border-border/50 text-white placeholder-muted-foreground py-5 pr-10"
+            />
+            {apiKey && (
+              <button
+                type="button"
+                onClick={() => setApiKey("")}
+                className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-white transition-colors"
+              >
+                <X className="w-4 h-4" />
+              </button>
+            )}
+          </div>

          <a
            href={TOGETHER_LINK}
@@ -95,10 +113,10 @@ export function ApiKeyModal({ isOpen, onClose, onSubmit }: ApiKeyModalProps) {
            <Button
              type="button"
              variant="ghost"
-              onClick={onClose}
+              onClick={existingKey ? handleDelete : onClose}
              className="flex-1 text-muted-foreground hover:text-white hover:bg-secondary"
            >
-              Maybe Later
+              {existingKey ? "Delete API Key" : "Maybe Later"}
            </Button>
            <Button
              type="submit"
@@ -1,18 +1,12 @@
 "use client"

-import { useState, useRef, useEffect } from "react"
+import { useState, useRef, useEffect, useMemo } from "react"
 import { Upload, X, Loader2 } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
 import { useToast } from "@/hooks/use-toast"
 import { validateFileForUpload, generateFilePreview } from "@/lib/file-utils"
-
-const COMIC_STYLES = [
-  { id: "american-modern", name: "American Modern" },
-  { id: "manga", name: "Manga" },
-  { id: "noir", name: "Noir" },
-  { id: "vintage", name: "Vintage" },
-]
+import { COMIC_STYLES } from "@/lib/constants"

 interface GeneratePageModalProps {
  isOpen: boolean
@@ -51,7 +45,11 @@ export function GeneratePageModal({
  const fileInputRef = useRef<HTMLInputElement>(null)
  const { toast } = useToast()

-  const selectedStyle = previousPageStyle || "noir"
+  const selectedStyleId = previousPageStyle || "noir"
+  const selectedStyle = useMemo(
+    () => COMIC_STYLES.find((s) => s.id === selectedStyleId)?.name || "Noir",
+    [selectedStyleId]
+  )

  useEffect(() => {
    if (previousCharacters && previousCharacters.length > 0) {
@@ -1,29 +1,39 @@
-"use client"
+"use client";

-import { FileText, ImageIcon, Palette } from "lucide-react"
-import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet"
+import { FileText, ImageIcon, Palette } from "lucide-react";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet";
+import { COMIC_STYLES } from "@/lib/constants";

 interface PageData {
-  id: number
-  title: string
-  image: string
-  prompt: string
-  characterUploads?: string[]
-  style: string
+  id: number;
+  title: string;
+  image: string;
+  prompt: string;
+  characterUploads?: string[];
+  style: string;
 }

 interface PageInfoSheetProps {
-  isOpen: boolean
-  onClose: () => void
-  page: PageData
+  isOpen: boolean;
+  onClose: () => void;
+  page: PageData;
 }

 export function PageInfoSheet({ isOpen, onClose, page }: PageInfoSheetProps) {
+  const styleName = COMIC_STYLES.find((s) => s.id === page.style)?.name || page.style;
+
  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>
+          <SheetTitle className="text-base font-medium text-white">
+            Page {page.id} Details
+          </SheetTitle>
        </SheetHeader>

        <div className=" space-y-6">
@@ -34,7 +44,9 @@ export function PageInfoSheet({ isOpen, onClose, page }: PageInfoSheetProps) {
              <span>Prompt</span>
            </div>
            <div className="p-3 glass-panel rounded-lg">
-              <p className="text-sm text-foreground leading-relaxed">{page.prompt}</p>
+              <p className="text-sm text-foreground leading-relaxed">
+                {page.prompt}
+              </p>
            </div>
          </div>

@@ -45,7 +57,7 @@ export function PageInfoSheet({ isOpen, onClose, page }: PageInfoSheetProps) {
              <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>
+              <span className="text-sm text-foreground">{styleName}</span>
            </div>
          </div>

@@ -57,7 +69,10 @@ export function PageInfoSheet({ isOpen, onClose, page }: PageInfoSheetProps) {
            {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">
+                  <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}`}
@@ -68,12 +83,14 @@ export function PageInfoSheet({ isOpen, onClose, page }: PageInfoSheetProps) {
              </div>
            ) : (
              <div className="p-4 glass-panel rounded-lg text-center">
-                <p className="text-sm text-muted-foreground">No characters uploaded</p>
+                <p className="text-sm text-muted-foreground">
+                  No characters uploaded
+                </p>
              </div>
            )}
          </div>

-          {/* Generated Image Preview */}
+          {/* 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" />
@@ -86,9 +103,9 @@ export function PageInfoSheet({ isOpen, onClose, page }: PageInfoSheetProps) {
                className="w-full h-full object-cover"
              />
            </div>
-          </div>
+          </div> */}
        </div>
      </SheetContent>
    </Sheet>
-  )
+  );
 }
@@ -12,15 +12,18 @@ interface CreateButtonProps {
  prompt: string;
  style: string;
  characterFiles: File[];
+  isLoading: boolean;
+  setIsLoading: (loading: boolean) => void;
 }

 export function CreateButton({
  prompt,
  style,
  characterFiles,
+  isLoading,
+  setIsLoading,
 }: CreateButtonProps) {
  const router = useRouter();
-  const [isLoading, setIsLoading] = useState(false);
  const [loadingStep, setLoadingStep] = useState(0);
  const { toast } = useToast();
  const { uploadToS3 } = useS3Upload();
@@ -5,16 +5,12 @@ import { usePathname } from "next/navigation";
 import { Github, Key, BookOpen, User, Plus } from "lucide-react";
 import Link from "next/link";
 import { ApiKeyModal } from "@/components/api-key-modal";
-import {
-  SignInButton,
-  SignUpButton,
-  SignedIn,
-  SignedOut,
-  UserButton,
-} from "@clerk/nextjs";
+import { SignInButton, SignedIn, SignedOut, useAuth } from "@clerk/nextjs";

 export function Navbar() {
  const [showApiModal, setShowApiModal] = useState(false);
+
+  const { isLoaded } = useAuth();
  const pathname = usePathname();

  const handleApiKeySubmit = (key: string) => {
@@ -24,10 +20,15 @@ export function Navbar() {

  const isOnStoriesPage = pathname === "/stories";

+  if (!isLoaded) return null;
+
  return (
    <>
      <nav className="w-full h-14 sm:h-16 border-b border-border/50 flex items-center justify-between px-4 sm:px-6 lg:px-8 z-50 bg-background/80 backdrop-blur-md">
-        <Link href="/" className="flex items-center gap-1 hover:opacity-80 transition-opacity">
+        <Link
+          href="/"
+          className="flex items-center gap-1 hover:opacity-80 transition-opacity"
+        >
          <div className="w-8 h-8 sm:w-10 sm:h-10 flex items-center justify-center">
            <img
              src="/images/makecomics-logo.png"
@@ -5,13 +5,7 @@ import { useState } from "react";
 import { useRef, useEffect } from "react";
 import { Upload, X, Check } from "lucide-react";
 import { Button } from "@/components/ui/button";
-
-const COMIC_STYLES = [
-  { id: "american-modern", name: "American Modern" },
-  { id: "manga", name: "Manga" },
-  { id: "noir", name: "Noir" },
-  { id: "vintage", name: "Vintage" },
-];
+import { COMIC_STYLES } from "@/lib/constants";

 interface StoryInputProps {
  prompt: string;
@@ -20,6 +14,7 @@ interface StoryInputProps {
  setStyle: (style: string) => void;
  characterFiles: File[];
  setCharacterFiles: (files: File[]) => void;
+  isLoading: boolean;
 }

 export function StoryInput({
@@ -29,12 +24,19 @@ export function StoryInput({
  setStyle,
  characterFiles,
  setCharacterFiles,
+  isLoading,
 }: StoryInputProps) {
  const [previews, setPreviews] = useState<string[]>([]);
  const [showPreview, setShowPreview] = useState<number | null>(null);
  const [showStyleDropdown, setShowStyleDropdown] = useState(false);
  const fileInputRef = useRef<HTMLInputElement>(null);

+  useEffect(() => {
+    if (isLoading) {
+      setShowStyleDropdown(false);
+    }
+  }, [isLoading]);
+
  const handleFiles = (newFiles: FileList | null) => {
    if (!newFiles) return;

@@ -96,7 +98,8 @@ export function StoryInput({
            value={prompt}
            onChange={(e) => setPrompt(e.target.value)}
            placeholder="A cyberpunk detective standing in neon rain, holding a glowing datapad, moody lighting, noir style..."
-            className="w-full bg-transparent border-none text-sm text-white placeholder-muted-foreground/50 focus:ring-0 focus:outline-none resize-none h-16 leading-relaxed"
+            disabled={isLoading}
+            className="w-full bg-transparent border-none text-sm text-white placeholder-muted-foreground/50 focus:ring-0 focus:outline-none resize-none h-16 leading-relaxed disabled:opacity-50 disabled:cursor-not-allowed"
          />

          <div className="mt-3 pt-3 border-t border-border/30 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 sm:gap-2">
@@ -118,9 +121,10 @@ export function StoryInput({
                      <button
                        onClick={(e) => {
                          e.stopPropagation();
-                          removeFile(index);
+                          if (!isLoading) 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"
+                        disabled={isLoading}
+                        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 disabled:opacity-50 disabled:cursor-not-allowed"
                      >
                        <X className="w-2.5 h-2.5 text-white" />
                      </button>
@@ -128,8 +132,9 @@ export function StoryInput({
                  ))}
                  {characterFiles.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"
+                      onClick={() => !isLoading && fileInputRef.current?.click()}
+                      disabled={isLoading}
+                      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 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:border-border/50 disabled:hover:text-muted-foreground"
                    >
                      <Upload className="w-3.5 h-3.5" />
                    </button>
@@ -137,8 +142,9 @@ export function StoryInput({
                </div>
              ) : (
                <button
-                  onClick={() => fileInputRef.current?.click()}
-                  className="flex items-center gap-2 text-xs text-muted-foreground hover:text-white transition-colors"
+                  onClick={() => !isLoading && fileInputRef.current?.click()}
+                  disabled={isLoading}
+                  className="flex items-center gap-2 text-xs text-muted-foreground hover:text-white transition-colors disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:text-muted-foreground"
                >
                  <Upload className="w-3.5 h-3.5" />
                  <span>Upload Characters</span>
@@ -153,9 +159,10 @@ export function StoryInput({
              <div className="relative dropdown-container z-60">
                <button
                  onClick={() => {
-                    setShowStyleDropdown(!showStyleDropdown);
+                    if (!isLoading) setShowStyleDropdown(!showStyleDropdown);
                  }}
-                  className="flex items-center gap-2 px-2.5 py-1.5 rounded-md glass-panel glass-panel-hover transition-all text-xs text-muted-foreground hover:text-white"
+                  disabled={isLoading}
+                  className="flex items-center gap-2 px-2.5 py-1.5 rounded-md glass-panel glass-panel-hover transition-all text-xs text-muted-foreground hover:text-white disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:text-muted-foreground"
                >
                  <svg
                    className="w-3 h-3"
@@ -1,18 +1,15 @@
 "use client"

-import { useState } from "react"
 import { Check } from "lucide-react"
 import { Label } from "@/components/ui/label"
+import { COMIC_STYLES } from "@/lib/constants"

-const COMIC_STYLES = [
-  { id: "american-modern", name: "American Modern" },
-  { id: "manga", name: "Manga" },
-  { id: "noir", name: "Noir" },
-  { id: "vintage", name: "Vintage" },
-]
+interface StyleSelectorProps {
+  style: string
+  setStyle: (style: string) => void
+}

-export function StyleSelector() {
-  const [selectedStyle, setSelectedStyle] = useState("noir")
+export function StyleSelector({ style, setStyle }: StyleSelectorProps) {

  return (
    <div className="space-y-3">
@@ -20,28 +17,30 @@ export function StyleSelector() {

      {/* Grid for style selection */}
      <div className="grid grid-cols-2 gap-3">
-        {COMIC_STYLES.map((style) => (
+        {COMIC_STYLES.map((styleOption) => (
          <button
-            key={style.id}
-            onClick={() => setSelectedStyle(style.id)}
+            key={styleOption.id}
+            onClick={() => setStyle(styleOption.id)}
            className={`
              relative text-left transition-all duration-200 rounded-lg p-3.5 border-2 group
              hover:scale-[1.02] active:scale-[0.98]
              ${
-                selectedStyle === style.id
-                  ? "border-primary bg-primary/5 shadow-sm"
-                  : "border-border hover:border-primary/30 bg-card hover:bg-muted/50"
+                style === styleOption.id
+                  ? "border-indigo bg-indigo shadow-md"
+                  : "border-border hover:border-indigo/50 bg-card hover:bg-muted/20"
              }
            `}
          >
            <div className="flex items-start justify-between gap-2">
              <div>
                <div className="flex items-center gap-2">
-                  <h3 className="font-semibold text-sm text-foreground font-display">{style.name}</h3>
+                  <h3 className={`font-semibold text-sm font-display ${
+                    style === styleOption.id ? "text-white" : "text-foreground"
+                  }`}>{styleOption.name}</h3>
                </div>
              </div>
-              {selectedStyle === style.id && (
-                <div className="bg-primary text-primary-foreground p-1 rounded-full shrink-0">
+              {style === styleOption.id && (
+                <div className="bg-white text-indigo p-1 rounded-full shrink-0">
                  <Check className="w-3 h-3" />
                </div>
              )}