main

2026-04-05 20:37:03 +03:00
parent d8f9865dcf
commit dd8878d403
10 changed files with 767 additions and 285 deletions
@@ -18,7 +18,16 @@ import {
 } from 'lucide-react';
 import Link from 'next/link';
 import { useState } from 'react';
-import { useProject, useGenerateScript, useApproveAndQueue, useUpdateProject, useDeleteProject } from '@/hooks/use-api';
+import { 
+  useProject, 
+  useGenerateScript, 
+  useApproveAndQueue, 
+  useUpdateProject, 
+  useDeleteProject,
+  useGenerateSceneImage,
+  useUpscaleSceneImage,
+  useRegenerateScene
+} from '@/hooks/use-api';
 import { useRenderProgress } from '@/hooks/use-render-progress';
 import { SceneCard } from '@/components/project/scene-card';
 import { RenderProgress } from '@/components/project/render-progress';
@@ -42,16 +51,61 @@ const STATUS_MAP: Record<string, { label: string; color: string; icon: React.Ele
  FAILED: { label: 'Başarısız', color: 'text-red-400', icon: AlertCircle, bgClass: 'bg-red-500/10 border-red-500/20' },
 };

-const STYLE_LABELS: Record<string, string> = {
-  CINEMATIC: '🎬 Sinematik',
-  DOCUMENTARY: '📹 Belgesel',
-  EDUCATIONAL: '📚 Eğitici',
-  STORYTELLING: '📖 Hikaye',
-  NEWS: '📰 Haber',
-  PROMOTIONAL: '📢 Tanıtım',
-  ARTISTIC: '🎨 Sanatsal',
-  MINIMALIST: '✨ Minimalist',
-};
+const videoStyles = [
+  // Film & Sinema
+  { id: "CINEMATIC", label: "Sinematik", emoji: "🎬", desc: "Film kalitesinde görseller", category: "Film & Sinema" },
+  { id: "DOCUMENTARY", label: "Belgesel", emoji: "📹", desc: "Bilimsel ve ciddi ton", category: "Film & Sinema" },
+  { id: "STORYTELLING", label: "Hikâye Anlatımı", emoji: "📖", desc: "Anlatı odaklı, sürükleyici", category: "Film & Sinema" },
+  { id: "NEWS", label: "Haber", emoji: "📰", desc: "Güncel ve bilgilendirici", category: "Film & Sinema" },
+  { id: "ARTISTIC", label: "Sanatsal", emoji: "🎨", desc: "Yaratıcı ve sıra dışı", category: "Film & Sinema" },
+  { id: "NOIR", label: "Film Noir", emoji: "🖤", desc: "Karanlık, dramatik", category: "Film & Sinema" },
+  { id: "VLOG", label: "Vlog", emoji: "📱", desc: "Günlük, samimi", category: "Film & Sinema" },
+  // Animasyon
+  { id: "ANIME", label: "Anime", emoji: "⛩️", desc: "Japon animasyon stili", category: "Animasyon" },
+  { id: "ANIMATION_3D", label: "3D Animasyon", emoji: "🧊", desc: "Pixar kalitesi", category: "Animasyon" },
+  { id: "ANIMATION_2D", label: "2D Animasyon", emoji: "✏️", desc: "Klasik el çizimi", category: "Animasyon" },
+  { id: "STOP_MOTION", label: "Stop Motion", emoji: "🧸", desc: "Kare kare animasyon", category: "Animasyon" },
+  { id: "MOTION_COMIC", label: "Hareketli Çizgi Roman", emoji: "💥", desc: "Panel bazlı anlatım", category: "Animasyon" },
+  { id: "CARTOON", label: "Karikatür", emoji: "🎭", desc: "Çizgi film stili", category: "Animasyon" },
+  { id: "CLAYMATION", label: "Claymation", emoji: "🏺", desc: "Kil animasyon", category: "Animasyon" },
+  { id: "PIXEL_ART", label: "Pixel Art", emoji: "👾", desc: "8-bit retro oyun", category: "Animasyon" },
+  { id: "ISOMETRIC", label: "İzometrik", emoji: "🔷", desc: "İzometrik animasyon", category: "Animasyon" },
+  // Eğitim & Bilgi
+  { id: "EDUCATIONAL", label: "Eğitim", emoji: "🎓", desc: "Öğretici ve açıklayıcı", category: "Eğitim & Bilgi" },
+  { id: "INFOGRAPHIC", label: "İnfografik", emoji: "📊", desc: "Veri görselleştirme", category: "Eğitim & Bilgi" },
+  { id: "WHITEBOARD", label: "Whiteboard", emoji: "📝", desc: "Tahta animasyonu", category: "Eğitim & Bilgi" },
+  { id: "EXPLAINER", label: "Explainer", emoji: "💡", desc: "Ürün/konsept anlatımı", category: "Eğitim & Bilgi" },
+  { id: "DATA_VIZ", label: "Veri Görselleştirme", emoji: "📈", desc: "Grafikler ve tablolar", category: "Eğitim & Bilgi" },
+  // Retro & Nostaljik
+  { id: "RETRO_80S", label: "Retro 80s", emoji: "🕹️", desc: "Synthwave estetik", category: "Retro & Nostaljik" },
+  { id: "VINTAGE_FILM", label: "Vintage Film", emoji: "📽️", desc: "Super 8 filmi", category: "Retro & Nostaljik" },
+  { id: "VHS", label: "VHS", emoji: "📼", desc: "Kaset estetik", category: "Retro & Nostaljik" },
+  { id: "POLAROID", label: "Polaroid", emoji: "📸", desc: "Analog fotoğraf", category: "Retro & Nostaljik" },
+  { id: "RETRO_90S", label: "Retro 90s Y2K", emoji: "💿", desc: "Y2K & internet", category: "Retro & Nostaljik" },
+  // Sanat Akımları
+  { id: "WATERCOLOR", label: "Suluboya", emoji: "🎨", desc: "Suluboya resim", category: "Sanat Akımları" },
+  { id: "OIL_PAINTING", label: "Yağlı Boya", emoji: "🖌️", desc: "Klasik tuval", category: "Sanat Akımları" },
+  { id: "IMPRESSIONIST", label: "Empresyonist", emoji: "🌅", desc: "Monet tarzı", category: "Sanat Akımları" },
+  { id: "POP_ART", label: "Pop Art", emoji: "🎯", desc: "Warhol stili", category: "Sanat Akımları" },
+  { id: "UKIYO_E", label: "Ukiyo-e", emoji: "🏯", desc: "Japon gravür", category: "Sanat Akımları" },
+  { id: "ART_DECO", label: "Art Deco", emoji: "✨", desc: "1920s zarafet", category: "Sanat Akımları" },
+  { id: "SURREAL", label: "Sürrealist", emoji: "🌀", desc: "Dalí tarzı", category: "Sanat Akımları" },
+  { id: "COMIC_BOOK", label: "Çizgi Roman", emoji: "💬", desc: "Marvel/DC stili", category: "Sanat Akımları" },
+  { id: "SKETCH", label: "Karakalem", emoji: "✍️", desc: "Kalem çizim", category: "Sanat Akımları" },
+  // Modern & Minimal
+  { id: "MINIMALIST", label: "Minimalist", emoji: "⚪", desc: "Apple estetiği", category: "Modern & Minimal" },
+  { id: "GLASSMORPHISM", label: "Glassmorphism", emoji: "🔮", desc: "Cam efekti", category: "Modern & Minimal" },
+  { id: "NEON", label: "Neon Glow", emoji: "💜", desc: "Neon ışıkları", category: "Modern & Minimal" },
+  { id: "CYBERPUNK", label: "Cyberpunk", emoji: "🤖", desc: "Gelecek distopya", category: "Modern & Minimal" },
+  { id: "STEAMPUNK", label: "Steampunk", emoji: "⚙️", desc: "Viktoryan mekanik", category: "Modern & Minimal" },
+  { id: "ABSTRACT", label: "Soyut", emoji: "🔵", desc: "Abstract sanat", category: "Modern & Minimal" },
+  // Fotoğrafik
+  { id: "PRODUCT", label: "Ürün Fotoğrafı", emoji: "📦", desc: "Studio çekim", category: "Fotoğrafik" },
+  { id: "FASHION", label: "Moda", emoji: "👗", desc: "Editöryal çekim", category: "Fotoğrafik" },
+  { id: "AERIAL", label: "Havadan", emoji: "🚁", desc: "Drone görüntüsü", category: "Fotoğrafik" },
+  { id: "MACRO", label: "Makro", emoji: "🔬", desc: "Yakın çekim", category: "Fotoğrafik" },
+  { id: "PORTRAIT", label: "Portre", emoji: "🧑", desc: "Portre fotoğraf", category: "Fotoğrafik" },
+];

 const stagger = {
  hidden: { opacity: 0 },
@@ -75,6 +129,13 @@ export default function ProjectDetailPage() {
  const approveMutation = useApproveAndQueue();
  const deleteMutation = useDeleteProject();

+  const generateImageMutation = useGenerateSceneImage();
+  const upscaleImageMutation = useUpscaleSceneImage();
+  const regenerateSceneMutation = useRegenerateScene();
+
+  const [generatingImageId, setGeneratingImageId] = useState<string | null>(null);
+  const [upscalingImageId, setUpscalingImageId] = useState<string | null>(null);
+
  // WebSocket progress
  const renderState = useRenderProgress(
    project?.status && ['PENDING', 'GENERATING_MEDIA', 'RENDERING'].includes(project.status) ? id : undefined,
@@ -93,17 +154,37 @@ export default function ProjectDetailPage() {
  // Sahne yeniden üretim
  const handleSceneRegenerate = async (sceneId: string) => {
    setRegeneratingSceneId(sceneId);
-    try {
-      await fetch(`${process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000/api'}/projects/${id}/scenes/${sceneId}/regenerate`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-      });
-      refetch();
-    } catch (err) {
-      console.error('Sahne yeniden üretim hatası:', err);
-    } finally {
-      setRegeneratingSceneId(null);
-    }
+    regenerateSceneMutation.mutate(
+      { projectId: id, sceneId },
+      {
+        onSettled: () => setRegeneratingSceneId(null),
+        onSuccess: () => refetch(),
+      }
+    );
+  };
+
+  // Sahne görseli oluşturma
+  const handleGenerateImage = (sceneId: string, customPrompt?: string) => {
+    setGeneratingImageId(sceneId);
+    generateImageMutation.mutate(
+      { projectId: id, sceneId, customPrompt },
+      {
+        onSettled: () => setGeneratingImageId(null),
+        onSuccess: () => refetch(),
+      }
+    );
+  };
+
+  // Sahne görseli upscale
+  const handleUpscaleImage = (sceneId: string) => {
+    setUpscalingImageId(sceneId);
+    upscaleImageMutation.mutate(
+      { projectId: id, sceneId },
+      {
+        onSettled: () => setUpscalingImageId(null),
+        onSuccess: () => refetch(),
+      }
+    );
  };

  // Senaryo üret
@@ -161,12 +242,24 @@ export default function ProjectDetailPage() {

  const statusInfo = STATUS_MAP[project.status] || STATUS_MAP.DRAFT;
  const StatusIcon = statusInfo.icon;
-  const isEditable = project.status === 'DRAFT' || project.status === 'FAILED';
+  const isRendering = ['PENDING', 'GENERATING_MEDIA', 'RENDERING', 'GENERATING_SCRIPT'].includes(project.status);
+  const isEditable = !isRendering;
  const hasScript = project.scenes && project.scenes.length > 0;
-  const isRendering = ['PENDING', 'GENERATING_MEDIA', 'RENDERING'].includes(project.status);
  const isCompleted = project.status === 'COMPLETED';
  const tweetData = project.sourceTweetData as Record<string, any> | undefined;

+  const currentStyle = videoStyles.find(s => s.id === project.videoStyle);
+
+  const handleStyleChange = async (newStyleId: string) => {
+    if (newStyleId === project.videoStyle) return;
+    try {
+      await projectsApi.update(id, { videoStyle: newStyleId } as any);
+      refetch();
+    } catch (err) {
+      console.error('Üslup (Stil) değiştirme hatası:', err);
+    }
+  };
+
  return (
    <motion.div
      variants={stagger}
@@ -246,7 +339,21 @@ export default function ProjectDetailPage() {
            <span className="flex items-center gap-1">
              <Clock size={12} /> {project.targetDuration}s
            </span>
-            <span>{STYLE_LABELS[project.videoStyle] || project.videoStyle}</span>
+            {isEditable ? (
+              <select
+                value={project.videoStyle}
+                onChange={(e) => handleStyleChange(e.target.value)}
+                className="bg-[var(--color-bg-base)] border border-[var(--color-border-faint)] rounded-md px-2 py-0.5 text-xs text-[var(--color-text-secondary)] focus:outline-none focus:border-violet-500/50 cursor-pointer"
+              >
+                {videoStyles.map((s) => (
+                  <option key={s.id} value={s.id}>
+                    {s.emoji} {s.label}
+                  </option>
+                ))}
+              </select>
+            ) : (
+              <span>{currentStyle ? `${currentStyle.emoji} ${currentStyle.label}` : project.videoStyle}</span>
+            )}
            <span className="uppercase text-[10px] tracking-wider">{project.language}</span>
            <span className="text-[10px]">
              {new Date(project.createdAt).toLocaleDateString('tr-TR', {
@@ -1,6 +1,6 @@
 "use client";

-import { useState } from "react";
+import { useState, useMemo } from "react";
 import { useRouter } from "next/navigation";
 import { motion, AnimatePresence } from "framer-motion";
 import {
@@ -16,6 +16,8 @@ import {
  Loader2,
  Check,
  Wand2,
+  Search,
+  ChevronDown,
 } from "lucide-react";
 import Link from "next/link";
 import { cn } from "@/lib/utils";
@@ -37,12 +39,59 @@ const languages = [
 ];

 const videoStyles = [
-  { id: "CINEMATIC", label: "Sinematik", emoji: "🎬", desc: "Film kalitesinde görseller" },
-  { id: "DOCUMENTARY", label: "Belgesel", emoji: "📹", desc: "Bilimsel ve ciddi ton" },
-  { id: "EDUCATIONAL", label: "Eğitim", emoji: "📚", desc: "Öğretici ve açıklayıcı" },
-  { id: "STORYTELLING", label: "Hikaye", emoji: "📖", desc: "Anlatı odaklı, sürükleyici" },
-  { id: "NEWS", label: "Haber", emoji: "📰", desc: "Güncel ve bilgilendirici" },
-  { id: "ARTISTIC", label: "Sanatsal", emoji: "🎨", desc: "Yaratıcı ve sıra dışı" },
+  // Film & Sinema
+  { id: "CINEMATIC", label: "Sinematik", emoji: "🎬", desc: "Film kalitesinde görseller", category: "Film & Sinema" },
+  { id: "DOCUMENTARY", label: "Belgesel", emoji: "📹", desc: "Bilimsel ve ciddi ton", category: "Film & Sinema" },
+  { id: "STORYTELLING", label: "Hikâye Anlatımı", emoji: "📖", desc: "Anlatı odaklı, sürükleyici", category: "Film & Sinema" },
+  { id: "NEWS", label: "Haber", emoji: "📰", desc: "Güncel ve bilgilendirici", category: "Film & Sinema" },
+  { id: "ARTISTIC", label: "Sanatsal", emoji: "🎨", desc: "Yaratıcı ve sıra dışı", category: "Film & Sinema" },
+  { id: "NOIR", label: "Film Noir", emoji: "🖤", desc: "Karanlık, dramatik", category: "Film & Sinema" },
+  { id: "VLOG", label: "Vlog", emoji: "📱", desc: "Günlük, samimi", category: "Film & Sinema" },
+  // Animasyon
+  { id: "ANIME", label: "Anime", emoji: "⛩️", desc: "Japon animasyon stili", category: "Animasyon" },
+  { id: "ANIMATION_3D", label: "3D Animasyon", emoji: "🧊", desc: "Pixar kalitesi", category: "Animasyon" },
+  { id: "ANIMATION_2D", label: "2D Animasyon", emoji: "✏️", desc: "Klasik el çizimi", category: "Animasyon" },
+  { id: "STOP_MOTION", label: "Stop Motion", emoji: "🧸", desc: "Kare kare animasyon", category: "Animasyon" },
+  { id: "MOTION_COMIC", label: "Hareketli Çizgi Roman", emoji: "💥", desc: "Panel bazlı anlatım", category: "Animasyon" },
+  { id: "CARTOON", label: "Karikatür", emoji: "🎭", desc: "Çizgi film stili", category: "Animasyon" },
+  { id: "CLAYMATION", label: "Claymation", emoji: "🏺", desc: "Kil animasyon", category: "Animasyon" },
+  { id: "PIXEL_ART", label: "Pixel Art", emoji: "👾", desc: "8-bit retro oyun", category: "Animasyon" },
+  { id: "ISOMETRIC", label: "İzometrik", emoji: "🔷", desc: "İzometrik animasyon", category: "Animasyon" },
+  // Eğitim & Bilgi
+  { id: "EDUCATIONAL", label: "Eğitim", emoji: "🎓", desc: "Öğretici ve açıklayıcı", category: "Eğitim & Bilgi" },
+  { id: "INFOGRAPHIC", label: "İnfografik", emoji: "📊", desc: "Veri görselleştirme", category: "Eğitim & Bilgi" },
+  { id: "WHITEBOARD", label: "Whiteboard", emoji: "📝", desc: "Tahta animasyonu", category: "Eğitim & Bilgi" },
+  { id: "EXPLAINER", label: "Explainer", emoji: "💡", desc: "Ürün/konsept anlatımı", category: "Eğitim & Bilgi" },
+  { id: "DATA_VIZ", label: "Veri Görselleştirme", emoji: "📈", desc: "Grafikler ve tablolar", category: "Eğitim & Bilgi" },
+  // Retro & Nostaljik
+  { id: "RETRO_80S", label: "Retro 80s", emoji: "🕹️", desc: "Synthwave estetik", category: "Retro & Nostaljik" },
+  { id: "VINTAGE_FILM", label: "Vintage Film", emoji: "📽️", desc: "Super 8 filmi", category: "Retro & Nostaljik" },
+  { id: "VHS", label: "VHS", emoji: "📼", desc: "Kaset estetik", category: "Retro & Nostaljik" },
+  { id: "POLAROID", label: "Polaroid", emoji: "📸", desc: "Analog fotoğraf", category: "Retro & Nostaljik" },
+  { id: "RETRO_90S", label: "Retro 90s Y2K", emoji: "💿", desc: "Y2K & internet", category: "Retro & Nostaljik" },
+  // Sanat Akımları
+  { id: "WATERCOLOR", label: "Suluboya", emoji: "🎨", desc: "Suluboya resim", category: "Sanat Akımları" },
+  { id: "OIL_PAINTING", label: "Yağlı Boya", emoji: "🖌️", desc: "Klasik tuval", category: "Sanat Akımları" },
+  { id: "IMPRESSIONIST", label: "Empresyonist", emoji: "🌅", desc: "Monet tarzı", category: "Sanat Akımları" },
+  { id: "POP_ART", label: "Pop Art", emoji: "🎯", desc: "Warhol stili", category: "Sanat Akımları" },
+  { id: "UKIYO_E", label: "Ukiyo-e", emoji: "🏯", desc: "Japon gravür", category: "Sanat Akımları" },
+  { id: "ART_DECO", label: "Art Deco", emoji: "✨", desc: "1920s zarafet", category: "Sanat Akımları" },
+  { id: "SURREAL", label: "Sürrealist", emoji: "🌀", desc: "Dalí tarzı", category: "Sanat Akımları" },
+  { id: "COMIC_BOOK", label: "Çizgi Roman", emoji: "💬", desc: "Marvel/DC stili", category: "Sanat Akımları" },
+  { id: "SKETCH", label: "Karakalem", emoji: "✍️", desc: "Kalem çizim", category: "Sanat Akımları" },
+  // Modern & Minimal
+  { id: "MINIMALIST", label: "Minimalist", emoji: "⚪", desc: "Apple estetiği", category: "Modern & Minimal" },
+  { id: "GLASSMORPHISM", label: "Glassmorphism", emoji: "🔮", desc: "Cam efekti", category: "Modern & Minimal" },
+  { id: "NEON", label: "Neon Glow", emoji: "💜", desc: "Neon ışıkları", category: "Modern & Minimal" },
+  { id: "CYBERPUNK", label: "Cyberpunk", emoji: "🤖", desc: "Gelecek distopya", category: "Modern & Minimal" },
+  { id: "STEAMPUNK", label: "Steampunk", emoji: "⚙️", desc: "Viktoryan mekanik", category: "Modern & Minimal" },
+  { id: "ABSTRACT", label: "Soyut", emoji: "🔵", desc: "Abstract sanat", category: "Modern & Minimal" },
+  // Fotoğrafik
+  { id: "PRODUCT", label: "Ürün Fotoğrafı", emoji: "📦", desc: "Studio çekim", category: "Fotoğrafik" },
+  { id: "FASHION", label: "Moda", emoji: "👗", desc: "Editöryal çekim", category: "Fotoğrafik" },
+  { id: "AERIAL", label: "Havadan", emoji: "🚁", desc: "Drone görüntüsü", category: "Fotoğrafik" },
+  { id: "MACRO", label: "Makro", emoji: "🔬", desc: "Yakın çekim", category: "Fotoğrafik" },
+  { id: "PORTRAIT", label: "Portre", emoji: "🧑", desc: "Portre fotoğraf", category: "Fotoğrafik" },
 ];

 const aspectRatios = [
@@ -65,6 +114,26 @@ export default function NewProjectPage() {
  const [duration, setDuration] = useState(60);
  const [aspectRatio, setAspectRatio] = useState("PORTRAIT_9_16");

+  // Search & Category state
+  const [styleSearch, setStyleSearch] = useState("");
+  const [expandedCategory, setExpandedCategory] = useState<string | null>("Film & Sinema");
+
+  const filteredStyles = useMemo(() => {
+    return videoStyles.filter(s => 
+      s.label.toLowerCase().includes(styleSearch.toLowerCase()) || 
+      s.desc.toLowerCase().includes(styleSearch.toLowerCase())
+    );
+  }, [styleSearch]);
+
+  const groupedStyles = useMemo(() => {
+    return filteredStyles.reduce((acc, curr) => {
+      const cat = curr.category || "Diğer";
+      if (!acc[cat]) acc[cat] = [];
+      acc[cat].push(curr);
+      return acc;
+    }, {} as Record<string, typeof videoStyles>);
+  }, [filteredStyles]);
+
  const canProceed = currentStep === 0 ? topic.trim().length >= 5 : true;
  const isGenerating = createProject.isPending;

@@ -211,27 +280,80 @@ export default function NewProjectPage() {
          >
            {/* Video Stili */}
            <div>
-              <label className="text-sm font-medium text-[var(--color-text-secondary)] mb-3 block">
-                <Palette size={14} className="inline mr-1.5 text-violet-400" />
-                Video Stili
-              </label>
-              <div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
-                {videoStyles.map((s) => (
-                  <button
-                    key={s.id}
-                    onClick={() => setStyle(s.id)}
-                    className={cn(
-                      "flex flex-col items-start gap-1 p-3 rounded-xl text-left transition-all",
-                      style === s.id
-                        ? "bg-violet-500/12 border border-violet-500/30 glow-violet"
-                        : "bg-[var(--color-bg-surface)] border border-[var(--color-border-faint)] hover:border-[var(--color-border-default)]"
-                    )}
-                  >
-                    <span className="text-xl mb-0.5">{s.emoji}</span>
-                    <span className="text-sm font-medium">{s.label}</span>
-                    <span className="text-[10px] text-[var(--color-text-ghost)]">{s.desc}</span>
-                  </button>
-                ))}
+              <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2 mb-3">
+                <label className="text-sm font-medium text-[var(--color-text-secondary)] block">
+                  <Palette size={14} className="inline mr-1.5 text-violet-400" />
+                  Video Stili
+                </label>
+                <div className="relative w-full sm:w-56">
+                  <div className="absolute inset-y-0 left-0 pl-2.5 flex items-center pointer-events-none">
+                    <Search size={14} className="text-[var(--color-text-ghost)]" />
+                  </div>
+                  <input
+                    type="text"
+                    placeholder="Stil ara..."
+                    value={styleSearch}
+                    onChange={(e) => setStyleSearch(e.target.value)}
+                    className="w-full pl-8 pr-3 py-1.5 bg-[var(--color-bg-surface)] border border-[var(--color-border-faint)] rounded-md text-xs text-[var(--color-text-primary)] placeholder:text-[var(--color-text-ghost)] focus:outline-none focus:border-violet-500/50"
+                  />
+                </div>
+              </div>
+              
+              <div className="space-y-3 max-h-[360px] overflow-y-auto pr-1 custom-scrollbar">
+                {Object.entries(groupedStyles).map(([category, items]) => {
+                  const isExpanded = styleSearch ? true : expandedCategory === category;
+                  return (
+                    <div key={category} className="bg-[var(--color-bg-surface)] border border-[var(--color-border-faint)] rounded-xl overflow-hidden">
+                      <button
+                        onClick={() => !styleSearch && setExpandedCategory(isExpanded ? null : category)}
+                        className="w-full flex items-center justify-between p-3 bg-[var(--color-bg-elevated)] hover:bg-[var(--color-bg-surface-hover)] transition-colors"
+                      >
+                        <span className="text-sm font-medium text-[var(--color-text-secondary)]">{category} <span className="text-[11px] text-[var(--color-text-ghost)] ml-1">({items.length})</span></span>
+                        {!styleSearch && (
+                          <ChevronDown 
+                            size={16} 
+                            className={cn("text-[var(--color-text-ghost)] transition-transform duration-200", isExpanded && "rotate-180")} 
+                          />
+                        )}
+                      </button>
+                      
+                      <AnimatePresence initial={false}>
+                        {isExpanded && (
+                          <motion.div
+                            initial={{ height: 0, opacity: 0 }}
+                            animate={{ height: "auto", opacity: 1 }}
+                            exit={{ height: 0, opacity: 0 }}
+                            transition={{ duration: 0.2 }}
+                          >
+                            <div className="p-3 pt-0 mt-3 grid grid-cols-2 sm:grid-cols-3 gap-2">
+                              {items.map((s) => (
+                                <button
+                                  key={s.id}
+                                  onClick={() => setStyle(s.id)}
+                                  className={cn(
+                                    "flex flex-col items-start gap-1 p-2.5 rounded-xl text-left transition-all",
+                                    style === s.id
+                                      ? "bg-violet-500/12 border border-violet-500/30 glow-violet"
+                                      : "bg-[var(--color-bg-base)] border border-[var(--color-border-faint)] hover:border-[var(--color-border-default)]"
+                                  )}
+                                >
+                                  <span className="text-xl mb-0.5">{s.emoji}</span>
+                                  <span className="text-xs font-semibold leading-tight">{s.label}</span>
+                                  <span className="text-[10px] text-[var(--color-text-ghost)] leading-tight">{s.desc}</span>
+                                </button>
+                              ))}
+                            </div>
+                          </motion.div>
+                        )}
+                      </AnimatePresence>
+                    </div>
+                  );
+                })}
+                {Object.keys(groupedStyles).length === 0 && (
+                  <div className="text-center py-8 text-[var(--color-text-ghost)] text-sm">
+                    "{styleSearch}" için sonuç bulunamadı.
+                  </div>
+                )}
              </div>
            </div>

@@ -90,11 +90,6 @@ export default function XToVideoPage() {
      toast.success("Tweet → Video projesi oluşturuldu!");
      const projectId = result?.id;
      if (projectId) {
-        // Otomatik senaryo üretimini tetikle
-        const { projectsApi } = await import("@/lib/api/api-service");
-        projectsApi.generateScript(projectId).catch((err) => {
-          console.error("Tweet→Video senaryo üretimi başlatılamadı:", err);
-        });
        router.push(`/dashboard/projects/${projectId}`);
      } else {
        router.push("/dashboard/projects");