Update

resources/js/modules/editor/editor.jsx

@@ -107,8 +107,8 @@ const useResponsiveDimensions = () => {
     return dimensions;
 };
 
-const Editor = () => {
+const Editor = ({ setInitialMeme, setInitialBackground, setInitialText }) => {
-    const { init } = useMediaStore();
+    const { init, setInitialMeme: setStoreMeme, setInitialBackground: setStoreBackground, setInitialText: setStoreText } = useMediaStore();
     const { getSetting } = useLocalSettingsStore();
     const { setSelectedTextElement } = useVideoEditorStore();
     const emitter = useMitt();
@@ -121,8 +121,20 @@ const Editor = () => {
     const isBelowMinWidth = useViewportDetection(320);
 
     useEffect(() => {
+        // Set initial values if props are provided
+        if (setInitialMeme) {
+            setInitialMeme(setStoreMeme);
+        }
+        if (setInitialBackground) {
+            setInitialBackground(setStoreBackground);
+        }
+        if (setInitialText) {
+            setInitialText(setStoreText);
+        }
+        
+        // Initialize (will skip API call if initial values were set)
         init();
-    }, []);
+    }, [setInitialMeme, setInitialBackground, setInitialText, setStoreMeme, setStoreBackground, setStoreText, init]);
 
     // Listen for text element selection (but don't auto-open sidebar)
     useEffect(() => {

resources/js/pages/home/home.tsx

@@ -33,6 +33,7 @@ const Home = ({ faqData }) => {
             </div>
             <div className="space-y-16">
                 <Hero />
+                {/* <MemeLibrarySearch /> */}
                 <Features />
                 <FAQDiscord faqData={faqData} />
             </div>

resources/js/pages/home/partials/Hero.jsx

@@ -1,4 +1,3 @@
-import CountUp from '@/components/reactbits/CountUp/CountUp';
 import { usePage } from '@inertiajs/react';
 
 const Hero = () => {
@@ -29,7 +28,7 @@ const Hero = () => {
                     </div>
 
                     {/* Stats */}
-                    <div className="flex flex-wrap justify-center gap-8 sm:gap-12">
+                    {/* <div className="flex flex-wrap justify-center gap-8 sm:gap-12">
                         <div className="text-center">
                             <CountUp
                                 from={0}
@@ -58,7 +57,7 @@ const Hero = () => {
                             <div className="text-foreground text-3xl font-bold sm:text-4xl">720p</div>
                             <div className="text-muted-foreground text-sm">Export</div>
                         </div>
-                    </div>
+                    </div> */}
                 </div>
             </div>
         </section>

resources/js/pages/memes/show.tsx

@@ -88,7 +88,11 @@ export default function MemeShow({ meme, relatedMemes }: Props) {
                         </h2>
                     </div>
                     {isClient && Editor ? (
-                        <Editor />
+                        <Editor
+                            setInitialMeme={(setMeme) => setMeme(meme)}
+                            //setInitialBackground={(setBackground) => setBackground(null)}
+                            setInitialText={(setText) => setText('add your meme caption here')}
+                        />
                     ) : (
                         <div className="flex h-96 items-center justify-center text-center">
                             <div className="space-y-2">

resources/js/stores/MediaStore.js

@@ -20,6 +20,11 @@ const useMediaStore = create(
         currentCaption: 'I am chicken rice',
         watermarked: true,
 
+        // Initial values state
+        hasInitialMeme: false,
+        hasInitialBackground: false,
+        hasInitialText: false,
+
         keywords: [],
         isLoadingAIHints: false,
 
@@ -57,6 +62,19 @@ const useMediaStore = create(
             set({ currentCaption: caption });
         },
 
+        // Set initial values from props
+        setInitialMeme: (meme) => {
+            set({ selectedMeme: meme, hasInitialMeme: true });
+        },
+
+        setInitialBackground: (background) => {
+            set({ selectedBackground: background, hasInitialBackground: true });
+        },
+
+        setInitialText: (text) => {
+            set({ currentCaption: text, hasInitialText: true });
+        },
+
         // Clear selections
         clearSelectedMeme: () => {
             set({ selectedMeme: null });
@@ -107,15 +125,31 @@ const useMediaStore = create(
         },
 
         init: async () => {
+            const state = get();
+            
+            // Skip API call completely if ALL initial values were set via props
+            if (state.hasInitialMeme && state.hasInitialBackground && state.hasInitialText) {
+                return;
+            }
+
             try {
                 const response = await axiosInstance.post(route('api.app.init'));
 
                 if (response?.data?.success?.data?.init) {
-                    set({
+                    const updates = {};
-                        currentCaption: response.data.success.data.init.caption,
+                    
-                        selectedMeme: response.data.success.data.init.meme,
+                    // Only update values that weren't set via props
-                        selectedBackground: response.data.success.data.init.background,
+                    if (!state.hasInitialText) {
-                    });
+                        updates.currentCaption = response.data.success.data.init.caption;
+                    }
+                    if (!state.hasInitialMeme) {
+                        updates.selectedMeme = response.data.success.data.init.meme;
+                    }
+                    if (!state.hasInitialBackground) {
+                        updates.selectedBackground = response.data.success.data.init.background;
+                    }
+                    
+                    set(updates);
                 } else {
                     throw 'Invalid API response';
                 }