Update

resources/js/modules/editor/editor.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useLayoutEffect, useState } from 'react';
 
 import useLocalSettingsStore from '@/stores/localSettingsStore';
+import useMediaStore from '@/stores/MediaStore';
 import { Volume2Icon, VolumeOffIcon } from 'lucide-react';
 import EditNavSidebar from './partials/edit-nav-sidebar';
 import EditSidebar from './partials/edit-sidebar';
@@ -100,6 +101,8 @@ const useResponsiveDimensions = () => {
 };
 
 const Editor = () => {
+    const { init } = useMediaStore();
+
     const { getSetting } = useLocalSettingsStore();
 
     const [isEditNavSidebarOpen, setIsEditNavSidebarOpen] = useState(false);
@@ -108,6 +111,10 @@ const Editor = () => {
     const { maxWidth, responsiveWidth } = useResponsiveDimensions();
     const isBelowMinWidth = useViewportDetection(320);
 
+    useEffect(() => {
+        init();
+    }, []);
+
     const handleEditNavClick = () => {
         setIsEditNavSidebarOpen(!isEditNavSidebarOpen);
     };

resources/js/modules/editor/partials/edit-sidebar.tsx

@@ -1,8 +1,10 @@
+import { Button } from '@/components/ui/button';
 import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet';
 import { Spinner } from '@/components/ui/spinner';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import useMediaStore from '@/stores/MediaStore';
 import { Edit3 } from 'lucide-react';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
 interface EditSidebarProps {
     isOpen: boolean;
@@ -10,25 +12,55 @@ interface EditSidebarProps {
 }
 
 export default function EditSidebar({ isOpen, onClose }: EditSidebarProps) {
-    const { memes, backgrounds, isFetchingMemes, isFetchingBackgrounds, currentTab, setCurrentTab, fetchMemes, fetchBackgrounds } = useMediaStore();
+    const {
+        memes,
+        backgrounds,
+        isFetchingMemes,
+        isFetchingBackgrounds,
+        selectedMeme,
+        selectedBackground,
+        fetchMemes,
+        fetchBackgrounds,
+        selectMeme,
+        selectBackground,
+        clearSelectedMeme,
+        clearSelectedBackground,
+    } = useMediaStore();
 
-    // Fetch media based on currentTab when it changes and data isn't fetched yet
+    // Track the current active tab
+    const [activeTab, setActiveTab] = useState('backgrounds');
+
+    // Fetch data when sidebar opens for the current active tab
     useEffect(() => {
-        if (currentTab === 'memes' && memes.length === 0 && !isFetchingMemes) {
+        if (isOpen) {
+            if (activeTab === 'memes' && memes.length === 0 && !isFetchingMemes) {
+                fetchMemes();
+            } else if (activeTab === 'backgrounds' && backgrounds.length === 0 && !isFetchingBackgrounds) {
+                fetchBackgrounds();
+            }
+        }
+    }, [isOpen, activeTab, memes.length, backgrounds.length, isFetchingMemes, isFetchingBackgrounds]);
+
+    const handleTabChange = (value: string) => {
+        setActiveTab(value);
+        if (value === 'memes' && memes.length === 0 && !isFetchingMemes) {
             fetchMemes();
-        } else if (currentTab === 'backgrounds' && backgrounds.length === 0 && !isFetchingBackgrounds) {
+        } else if (value === 'backgrounds' && backgrounds.length === 0 && !isFetchingBackgrounds) {
             fetchBackgrounds();
         }
-    }, [currentTab]);
+    };
 
-    // Determine display states
-    const isFetching = currentTab === 'memes' ? isFetchingMemes : isFetchingBackgrounds;
-    const media = currentTab === 'memes' ? memes : backgrounds;
-    const mediaType = currentTab === 'memes' ? 'memes' : 'backgrounds';
+    const handleMemeSelect = (meme) => {
+        selectMeme(meme);
+    };
+
+    const handleBackgroundSelect = (background) => {
+        selectBackground(background);
+    };
 
     return (
         <Sheet open={isOpen} onOpenChange={(open) => !open && onClose()}>
-            <SheetContent side="right" className="w-80 overflow-y-auto">
+            <SheetContent side="right" className="w-80 overflow-y-auto px-2">
                 <SheetHeader>
                     <SheetTitle className="flex items-center gap-3">
                         <Edit3 className="h-6 w-6" />
@@ -36,64 +68,88 @@ export default function EditSidebar({ isOpen, onClose }: EditSidebarProps) {
                     </SheetTitle>
                 </SheetHeader>
 
-                <div className="space-y-6">
-                    {/* Background and Meme Selection */}
-                    <div className="grid grid-cols-2 gap-4">
-                        <div
-                            className={`cursor-pointer rounded-lg border-2 p-3 text-center ${
-                                currentTab === 'backgrounds' ? 'border-blue-500' : 'border-gray-300'
-                            }`}
-                            onClick={() => setCurrentTab('backgrounds')}
-                        >
-                            <div className="mb-2 h-16 w-full overflow-hidden rounded bg-blue-600">
-                                <img
-                                    src="/placeholder.svg?height=64&width=120"
-                                    alt="Gaming background"
-                                    width={120}
-                                    height={64}
-                                    className="h-full w-full object-cover"
-                                />
-                            </div>
-                            <span className="text-sm font-medium">Background</span>
+                {/* Currently Selected Items */}
+                <div className="pb-6">
+                    <div className="flex justify-center gap-3">
+                        {/* Selected Background */}
+                        <div className="text-center">
+                            {selectedBackground ? (
+                                <div className="aspect-[9/16] h-[200px] overflow-hidden rounded-lg bg-gray-100">
+                                    <img src={selectedBackground.media_url} alt="Selected Background" className="h-full w-full object-cover" />
+                                </div>
+                            ) : (
+                                <div className="flex aspect-[9/16] h-[200px] items-center justify-center rounded-lg border-2 border-dashed border-gray-300 p-2 text-center text-xs text-gray-500">
+                                    No background
+                                </div>
+                            )}
+                            <p className="mb-1 text-xs text-gray-600">Background</p>
                         </div>
-                        <div
-                            className={`cursor-pointer rounded-lg border-2 p-3 text-center ${
-                                currentTab === 'memes' ? 'border-blue-500' : 'border-gray-300'
-                            }`}
-                            onClick={() => setCurrentTab('memes')}
-                        >
-                            <div className="mb-2 h-16 w-full overflow-hidden rounded bg-gray-200">
-                                <img
-                                    src="/placeholder.svg?height=64&width=120"
-                                    alt="Meme character"
-                                    width={120}
-                                    height={64}
-                                    className="h-full w-full object-cover"
-                                />
-                            </div>
-                            <span className="text-sm font-medium">Meme</span>
+
+                        {/* Selected Meme */}
+                        <div className="text-center">
+                            {selectedMeme ? (
+                                <div className="aspect-[9/16] h-[200px] overflow-hidden rounded-lg bg-gray-100">
+                                    <img src={selectedMeme.gif_url} alt="Selected Meme" className="h-full w-full object-cover" />
+                                </div>
+                            ) : (
+                                <div className="flex aspect-[9/16] h-[200px] items-center justify-center rounded-lg border-2 border-dashed border-gray-300 p-2 text-center text-xs text-gray-500">
+                                    No meme
+                                </div>
+                            )}
+                            <p className="mb-1 text-xs text-gray-600">Meme Overlay</p>
                         </div>
                     </div>
-
-                    {/* Media Grid */}
-                    {isFetching && <Spinner className="h-4 w-4"></Spinner>}
-                    {!isFetching && media.length === 0 && <div className="w-full text-center">No {mediaType} available.</div>}
-                    {!isFetching && media.length > 0 && (
-                        <div className="grid grid-cols-2 gap-3">
-                            {media.map((item, index) => (
-                                <div key={index} className="aspect-square overflow-hidden rounded-lg bg-gray-100">
-                                    <img
-                                        src={item.imageUrl}
-                                        alt={currentTab === 'memes' ? 'Meme' : 'Background'}
-                                        width={150}
-                                        height={150}
-                                        className="h-full w-full object-cover"
-                                    />
-                                </div>
-                            ))}
-                        </div>
-                    )}
                 </div>
+
+                <Tabs value={activeTab} className="w-full" onValueChange={handleTabChange}>
+                    <TabsList className="grid w-full grid-cols-2">
+                        <TabsTrigger value="memes">Meme</TabsTrigger>
+
+                        <TabsTrigger value="backgrounds">Background</TabsTrigger>
+                    </TabsList>
+
+                    <TabsContent value="backgrounds" className="">
+                        {isFetchingBackgrounds && <Spinner className="h-4 w-4"></Spinner>}
+                        {!isFetchingBackgrounds && backgrounds.length === 0 && <div className="w-full text-center">No backgrounds available.</div>}
+                        {!isFetchingBackgrounds && backgrounds.length > 0 && (
+                            <div className="grid grid-cols-2 gap-2">
+                                {backgrounds.map((item, index) => (
+                                    <Button
+                                        key={item.ids}
+                                        variant="ghost"
+                                        className={`aspect-[9/16] h-auto w-full overflow-hidden rounded-lg bg-gray-100 p-0 transition-all hover:bg-gray-100 hover:ring-2 hover:ring-blue-500 ${
+                                            selectedBackground?.ids === item.ids ? 'ring-2 ring-blue-500' : ''
+                                        }`}
+                                        onClick={() => handleBackgroundSelect(item)}
+                                    >
+                                        <img src={item.media_url} alt="Background" width={150} height={150} className="h-full w-full object-cover" />
+                                    </Button>
+                                ))}
+                            </div>
+                        )}
+                    </TabsContent>
+
+                    <TabsContent value="memes" className="">
+                        {isFetchingMemes && <Spinner className="h-4 w-4"></Spinner>}
+                        {!isFetchingMemes && memes.length === 0 && <div className="w-full text-center">No memes available.</div>}
+                        {!isFetchingMemes && memes.length > 0 && (
+                            <div className="grid grid-cols-2 gap-2 p-2">
+                                {memes.map((item, index) => (
+                                    <Button
+                                        key={item.ids}
+                                        variant="ghost"
+                                        className={`aspect-[9/16] h-auto w-full overflow-hidden rounded-lg bg-gray-100 p-0 transition-all hover:bg-gray-100 hover:ring-2 hover:ring-blue-500 ${
+                                            selectedMeme?.ids === item.ids ? 'ring-2 ring-blue-500' : ''
+                                        }`}
+                                        onClick={() => handleMemeSelect(item)}
+                                    >
+                                        <img src={item.gif_url} alt="Meme" width={150} height={150} className="h-full w-full object-cover" />
+                                    </Button>
+                                ))}
+                            </div>
+                        )}
+                    </TabsContent>
+                </Tabs>
             </SheetContent>
         </Sheet>
     );