Update

resources/js/modules/editor/partials/canvas/video-preview.jsx

@@ -127,6 +127,16 @@ const VideoPreview = ({
         }
     };
 
+    // Pre-select first text node on load
+    useEffect(() => {
+        if (activeElements.length > 0 && !selectedElementId) {
+            const firstTextElement = activeElements.find(element => element.type === 'text');
+            if (firstTextElement) {
+                setSelectedElementId(firstTextElement.id);
+            }
+        }
+    }, [activeElements, selectedElementId, setSelectedElementId]);
+
     // Update transformer when selection changes
     useEffect(() => {
         if (transformerRef.current) {

resources/js/modules/editor/partials/editor-ai-sheet.jsx

@@ -1,24 +1,30 @@
 'use client';
 
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
 import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '@/components/ui/sheet';
-import { Spinner } from '@/components/ui/spinner';
 import { cn } from '@/lib/utils';
 import { useMitt } from '@/plugins/MittContext';
-import CoinIcon from '@/reusables/coin-icon';
 import useMediaStore from '@/stores/MediaStore';
 import useUserStore from '@/stores/UserStore';
 import { usePage } from '@inertiajs/react';
-import { useEffect, useState, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { toast } from 'sonner';
 
 const EditorAISheet = () => {
     const [isOpen, setIsOpen] = useState(false);
     const [prompt, setPrompt] = useState('');
     const emitter = useMitt();
-    const { generateMeme, isGeneratingMeme, keywords, isLoadingAIHints, fetchAIHints, checkMemeJobStatus, updateMemeResult, setGeneratingMeme, checkActiveJob } = useMediaStore();
-    
+    const {
+        generateMeme,
+        isGeneratingMeme,
+        keywords,
+        isLoadingAIHints,
+        fetchAIHints,
+        checkMemeJobStatus,
+        updateMemeResult,
+        setGeneratingMeme,
+        checkActiveJob,
+    } = useMediaStore();
+
     const pollingIntervalRef = useRef(null);
     const currentJobIdRef = useRef(null);
 
@@ -50,7 +56,7 @@ const EditorAISheet = () => {
             const response = await checkActiveJob();
             if (response?.success?.data) {
                 const { job_id, status, result } = response.success.data;
-                
+
                 if (status === 'pending' || status === 'processing') {
                     // Resume polling for active job
                     setGeneratingMeme(true);
@@ -70,7 +76,7 @@ const EditorAISheet = () => {
 
     const handleOpenChange = (open) => {
         setIsOpen(open);
-        
+
         // If sheet is being closed while generating, stop polling
         if (!open && isGeneratingMeme) {
             stopPolling();
@@ -79,7 +85,7 @@ const EditorAISheet = () => {
 
     const startPolling = (jobId) => {
         currentJobIdRef.current = jobId;
-        
+
         // Clear existing interval if any
         if (pollingIntervalRef.current) {
             clearInterval(pollingIntervalRef.current);
@@ -88,10 +94,10 @@ const EditorAISheet = () => {
         const checkJobStatus = async () => {
             try {
                 const response = await checkMemeJobStatus(jobId);
-                
+
                 if (response?.success?.data) {
                     const { status, result, error } = response.success.data;
-                    
+
                     if (status === 'completed') {
                         // Job completed successfully
                         if (result?.generate) {
@@ -117,7 +123,7 @@ const EditorAISheet = () => {
 
         // Start polling every 5 seconds
         pollingIntervalRef.current = setInterval(checkJobStatus, 5000);
-        
+
         // Also check immediately
         checkJobStatus();
     };
@@ -151,7 +157,7 @@ const EditorAISheet = () => {
                 setIsOpen(false);
                 setPrompt('');
             }, 1000);
-            
+
             return () => clearTimeout(timer);
         }
     }, [isGeneratingMeme, isOpen]);
@@ -172,6 +178,11 @@ const EditorAISheet = () => {
                 onEscapeKeyDown={(e) => isGeneratingMeme && e.preventDefault()}
             >
                 <SheetHeader className="mb-2 px-5">
+                    <SheetTitle className="text-center text-xl font-semibold text-balance">AI features coming soon!</SheetTitle>
+                    <SheetDescription className="hidden"></SheetDescription>
+                </SheetHeader>
+
+                {/* <SheetHeader className="mb-2 px-5">
                     <SheetTitle className="text-center text-xl font-semibold text-balance">
                         {isGeneratingMeme ? 'Creating...' : 'What meme would you like to create?'}
                     </SheetTitle>
@@ -188,7 +199,6 @@ const EditorAISheet = () => {
                             className="bg-muted/30 max-h-20 min-h-12 resize-none rounded-3xl border-0 p-4 text-center text-base"
                         />
 
-                        {/* AI Keywords */}
                         {isLoadingAIHints && <div className="text-muted-foreground text-center text-sm">Loading AI hints...</div>}
 
                         {keywords.length > 0 && !isLoadingAIHints && (
@@ -259,7 +269,7 @@ const EditorAISheet = () => {
                             )}
                         </div>
                     </div>
-                </div>
+                </div> */}
             </SheetContent>
         </Sheet>
     );

resources/js/modules/editor/partials/editor-header.jsx

@@ -16,7 +16,7 @@ const EditorHeader = ({ className = '', onNavClick = () => {}, isNavActive = fal
 
     return (
         <div className={cn('flex w-full items-center justify-between rounded-xl bg-white p-2 shadow-sm dark:bg-neutral-800', className)}>
-            <Button onClick={onNavClick} variant="outline" size="icon" className="rounded">
+            <Button onClick={onNavClick} variant="outline" size="icon" className="invisible rounded">
                 <Menu className="h-8 w-8" />
             </Button>
 
@@ -28,7 +28,7 @@ const EditorHeader = ({ className = '', onNavClick = () => {}, isNavActive = fal
 
             <Button
                 variant="outline"
-                className="inline-flex gap-1 rounded"
+                className="invisible inline-flex gap-1 rounded"
                 onClick={() => {
                     openUpgradeSheet();
                 }}