From b3810f5ca45d7352829c19d9927811ee37c99382 Mon Sep 17 00:00:00 2001
From: ct <charlesteh90@gmail.com>
Date: Sat, 14 Jun 2025 12:14:43 +0800
Subject: [PATCH] update

---
 .../modules/editor/partials/edit-sidebar.tsx  | 93 ++++++++++++-------
 1 file changed, 62 insertions(+), 31 deletions(-)

diff --git a/resources/js/modules/editor/partials/edit-sidebar.tsx b/resources/js/modules/editor/partials/edit-sidebar.tsx
index 70d0ff3..4d63576 100644
--- a/resources/js/modules/editor/partials/edit-sidebar.tsx
+++ b/resources/js/modules/editor/partials/edit-sidebar.tsx
@@ -2,6 +2,7 @@ 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 { cn } from '@/lib/utils';
 import useMediaStore from '@/stores/MediaStore';
 import { Edit3 } from 'lucide-react';
 import { useEffect, useState } from 'react';
@@ -69,12 +70,17 @@ export default function EditSidebar({ isOpen, onClose }: EditSidebarProps) {
                 </SheetHeader>
 
                 {/* Currently Selected Items */}
-                <div className="pb-6">
+                <div className="pb-0">
                     <div className="flex justify-center gap-3">
                         {/* Selected Meme */}
-                        <div className="text-center">
+                        <div className="text-center" onClick={() => setActiveTab('memes')}>
                             {selectedMeme ? (
-                                <div className="aspect-[9/16] h-[200px] overflow-hidden rounded-lg bg-gray-100">
+                                <div
+                                    className={cn(
+                                        'aspect-[9/16] h-[200px] overflow-hidden rounded-lg bg-gray-100',
+                                        activeTab === 'memes' ? 'ring-2 ring-blue-500' : '',
+                                    )}
+                                >
                                     <img src={selectedMeme.gif_url} alt="Selected Meme" className="h-full w-full object-cover" />
                                 </div>
                             ) : (
@@ -86,9 +92,14 @@ export default function EditSidebar({ isOpen, onClose }: EditSidebarProps) {
                         </div>
 
                         {/* Selected Background */}
-                        <div className="text-center">
+                        <div className="text-center" onClick={() => setActiveTab('backgrounds')}>
                             {selectedBackground ? (
-                                <div className="aspect-[9/16] h-[200px] overflow-hidden rounded-lg bg-gray-100">
+                                <div
+                                    className={cn(
+                                        'aspect-[9/16] h-[200px] overflow-hidden rounded-lg bg-gray-100',
+                                        activeTab === 'backgrounds' ? 'ring-2 ring-blue-500' : '',
+                                    )}
+                                >
                                     <img src={selectedBackground.media_url} alt="Selected Background" className="h-full w-full object-cover" />
                                 </div>
                             ) : (
@@ -112,20 +123,33 @@ export default function EditSidebar({ isOpen, onClose }: EditSidebarProps) {
                         {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" />
+                            <>
+                                <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>
+                                <div className="fixed bottom-5 mx-auto flex w-75 justify-center gap-2">
+                                    <Button className="rounded-full px-5" onClick={fetchBackgrounds}>
+                                        Refresh List{' '}
                                     </Button>
-                                ))}
-                            </div>
+                                </div>
+                            </>
                         )}
                     </TabsContent>
 
@@ -133,20 +157,27 @@ export default function EditSidebar({ isOpen, onClose }: EditSidebarProps) {
                         {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" />
+                            <>
+                                <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>
+                                <div className="fixed bottom-5 mx-auto flex w-75 justify-center gap-2">
+                                    <Button className="rounded-full px-5 shadow-lg" onClick={fetchMemes}>
+                                        Refresh List{' '}
                                     </Button>
-                                ))}
-                            </div>
+                                </div>
+                            </>
                         )}
                     </TabsContent>
                 </Tabs>