charlestehio/memefast
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update

Browse Source
This commit is contained in:
ct
2025-07-15 02:38:23 +08:00
parent 3a2818473c
commit d57c75d5d7
4 changed files with 135 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
resources/js/components/ui/grid-skeleton.jsx
View File

@@ -5,7 +5,7 @@ const GridSkeleton = ({ itemCount = 6 }) => {
<div className="grid grid-cols-2 gap-2 p-2"> <div className="grid grid-cols-2 gap-2 p-2">
{Array.from({ length: itemCount }, (_, index) => ( {Array.from({ length: itemCount }, (_, index) => (
<div key={index} className="relative"> <div key={index} className="relative">
<div className="aspect-[9/16] w-full rounded-lg bg-gradient-to-r from-gray-200 via-white to-gray-200 bg-[length:200%_100%] animate-shimmer" /> <div className="aspect-[9/16] w-full rounded-lg bg-gradient-to-r from-muted via-background to-muted bg-[length:200%_100%] animate-shimmer" />
</div> </div>
))} ))}
</div> </div>

7
resources/js/components/ui/media-item-skeleton.jsx Normal file
View File

@@ -0,0 +1,7 @@
const MediaItemSkeleton = () => {
return (
<div className="aspect-[9/16] w-full rounded-lg bg-gradient-to-r from-muted via-background to-muted bg-[length:200%_100%] animate-shimmer" />
);
};
export { MediaItemSkeleton };

48
resources/js/components/ui/media-item.jsx Normal file
View File

@@ -0,0 +1,48 @@
import { useState } from 'react';
import { MediaItemSkeleton } from './media-item-skeleton';
const MediaItem = ({ src, alt, onClick, isSelected, className = "" }) => {
const [isLoading, setIsLoading] = useState(true);
const [hasError, setHasError] = useState(false);
const handleImageLoad = () => {
setIsLoading(false);
};
const handleImageError = () => {
setIsLoading(false);
setHasError(true);
};
return (
<div className={`relative aspect-[9/16] w-full overflow-hidden rounded-lg bg-muted ${className}`}>
{isLoading && (
<div className="absolute inset-0 z-10">
<MediaItemSkeleton />
</div>
)}
{hasError ? (
<div className="flex h-full w-full items-center justify-center bg-muted text-muted-foreground text-xs p-2 text-center">
Failed to load
</div>
) : (
<img
src={src}
alt={alt}
className={`h-full w-full object-cover cursor-pointer transition-opacity duration-300 ${isLoading ? 'opacity-0' : 'opacity-100'}`}
onLoad={handleImageLoad}
onError={handleImageError}
onClick={onClick}
/>
)}
{/* Selection border overlay */}
{isSelected && !isLoading && (
<div className="absolute inset-0 rounded-lg ring-2 ring-blue-500 pointer-events-none" />
)}
</div>
);
};
export { MediaItem };

136
resources/js/modules/editor/partials/edit-sidebar.jsx
View File

@@ -1,6 +1,7 @@
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { GridSkeleton } from '@/components/ui/grid-skeleton'; import { GridSkeleton } from '@/components/ui/grid-skeleton';
import { Input } from '@/components/ui/input'; import { Input } from '@/components/ui/input';
import { MediaItem } from '@/components/ui/media-item';
import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet'; import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { cn } from '@/lib/utils'; import { cn } from '@/lib/utils';
@@ -28,17 +29,17 @@ export default function EditSidebar({ isOpen, onClose }) {
// Track the current active tab // Track the current active tab
const [activeTab, setActiveTab] = useState('memes'); const [activeTab, setActiveTab] = useState('memes');
// Track search queries // Track search queries
const [searchQueries, setSearchQueries] = useState({ const [searchQueries, setSearchQueries] = useState({
memes: '', memes: '',
backgrounds: '' backgrounds: '',
}); });
// Track if data has been loaded for each tab (to prevent infinite loading on empty results) // Track if data has been loaded for each tab (to prevent infinite loading on empty results)
const [dataLoaded, setDataLoaded] = useState({ const [dataLoaded, setDataLoaded] = useState({
memes: false, memes: false,
backgrounds: false backgrounds: false,
}); });
// Fetch data when sidebar opens for the current active tab // Fetch data when sidebar opens for the current active tab
@@ -48,22 +49,22 @@ export default function EditSidebar({ isOpen, onClose }) {
const query = searchQueries.memes; const query = searchQueries.memes;
if (query) { if (query) {
searchMemes(query).finally(() => { searchMemes(query).finally(() => {
setDataLoaded(prev => ({ ...prev, memes: true })); setDataLoaded((prev) => ({ ...prev, memes: true }));
}); });
} else { } else {
fetchMemes().finally(() => { fetchMemes().finally(() => {
setDataLoaded(prev => ({ ...prev, memes: true })); setDataLoaded((prev) => ({ ...prev, memes: true }));
}); });
} }
} else if (activeTab === 'backgrounds' && !dataLoaded.backgrounds && !isFetchingBackgrounds) { } else if (activeTab === 'backgrounds' && !dataLoaded.backgrounds && !isFetchingBackgrounds) {
const query = searchQueries.backgrounds; const query = searchQueries.backgrounds;
if (query) { if (query) {
searchBackgrounds(query).finally(() => { searchBackgrounds(query).finally(() => {
setDataLoaded(prev => ({ ...prev, backgrounds: true })); setDataLoaded((prev) => ({ ...prev, backgrounds: true }));
}); });
} else { } else {
fetchBackgrounds().finally(() => { fetchBackgrounds().finally(() => {
setDataLoaded(prev => ({ ...prev, backgrounds: true })); setDataLoaded((prev) => ({ ...prev, backgrounds: true }));
}); });
} }
} }
@@ -76,22 +77,22 @@ export default function EditSidebar({ isOpen, onClose }) {
const query = searchQueries.memes; const query = searchQueries.memes;
if (query) { if (query) {
searchMemes(query).finally(() => { searchMemes(query).finally(() => {
setDataLoaded(prev => ({ ...prev, memes: true })); setDataLoaded((prev) => ({ ...prev, memes: true }));
}); });
} else { } else {
fetchMemes().finally(() => { fetchMemes().finally(() => {
setDataLoaded(prev => ({ ...prev, memes: true })); setDataLoaded((prev) => ({ ...prev, memes: true }));
}); });
} }
} else if (value === 'backgrounds' && !dataLoaded.backgrounds && !isFetchingBackgrounds) { } else if (value === 'backgrounds' && !dataLoaded.backgrounds && !isFetchingBackgrounds) {
const query = searchQueries.backgrounds; const query = searchQueries.backgrounds;
if (query) { if (query) {
searchBackgrounds(query).finally(() => { searchBackgrounds(query).finally(() => {
setDataLoaded(prev => ({ ...prev, backgrounds: true })); setDataLoaded((prev) => ({ ...prev, backgrounds: true }));
}); });
} else { } else {
fetchBackgrounds().finally(() => { fetchBackgrounds().finally(() => {
setDataLoaded(prev => ({ ...prev, backgrounds: true })); setDataLoaded((prev) => ({ ...prev, backgrounds: true }));
}); });
} }
} }
@@ -99,9 +100,9 @@ export default function EditSidebar({ isOpen, onClose }) {
// Handle search input changes // Handle search input changes
const handleSearchChange = (value) => { const handleSearchChange = (value) => {
setSearchQueries(prev => ({ setSearchQueries((prev) => ({
...prev, ...prev,
[activeTab]: value [activeTab]: value,
})); }));
}; };
@@ -110,30 +111,30 @@ export default function EditSidebar({ isOpen, onClose }) {
const query = searchQueries[activeTab]; const query = searchQueries[activeTab];
if (activeTab === 'memes') { if (activeTab === 'memes') {
searchMemes(query).finally(() => { searchMemes(query).finally(() => {
setDataLoaded(prev => ({ ...prev, memes: true })); setDataLoaded((prev) => ({ ...prev, memes: true }));
}); });
} else if (activeTab === 'backgrounds') { } else if (activeTab === 'backgrounds') {
searchBackgrounds(query).finally(() => { searchBackgrounds(query).finally(() => {
setDataLoaded(prev => ({ ...prev, backgrounds: true })); setDataLoaded((prev) => ({ ...prev, backgrounds: true }));
}); });
} }
}; };
// Handle clearing search // Handle clearing search
const handleClearSearch = () => { const handleClearSearch = () => {
setSearchQueries(prev => ({ setSearchQueries((prev) => ({
...prev, ...prev,
[activeTab]: '' [activeTab]: '',
})); }));
// Reset data loaded state and fetch fresh data without search // Reset data loaded state and fetch fresh data without search
if (activeTab === 'memes') { if (activeTab === 'memes') {
fetchMemes().finally(() => { fetchMemes().finally(() => {
setDataLoaded(prev => ({ ...prev, memes: true })); setDataLoaded((prev) => ({ ...prev, memes: true }));
}); });
} else if (activeTab === 'backgrounds') { } else if (activeTab === 'backgrounds') {
fetchBackgrounds().finally(() => { fetchBackgrounds().finally(() => {
setDataLoaded(prev => ({ ...prev, backgrounds: true })); setDataLoaded((prev) => ({ ...prev, backgrounds: true }));
}); });
} }
}; };
@@ -178,7 +179,7 @@ export default function EditSidebar({ isOpen, onClose }) {
<img src={selectedMeme.gif_url} alt="Selected Meme" className="h-full w-full object-cover" /> <img src={selectedMeme.gif_url} alt="Selected Meme" className="h-full w-full object-cover" />
</div> </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"> <div className="text-muted-foreground 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">
No meme No meme
</div> </div>
)} )}
@@ -197,7 +198,7 @@ export default function EditSidebar({ isOpen, onClose }) {
<img src={selectedBackground.media_url} alt="Selected Background" className="h-full w-full object-cover" /> <img src={selectedBackground.media_url} alt="Selected Background" className="h-full w-full object-cover" />
</div> </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"> <div className="text-muted-foreground 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">
No background No background
</div> </div>
)} )}
@@ -216,56 +217,61 @@ export default function EditSidebar({ isOpen, onClose }) {
{/* Search Bar */} {/* Search Bar */}
<div className="relative flex items-center gap-2 px-2 pt-3"> <div className="relative flex items-center gap-2 px-2 pt-3">
<div className="relative flex-1"> <div className="relative flex-1">
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" /> <Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
<Input <Input
placeholder={`Search ${activeTab === 'memes' ? 'memes' : 'backgrounds'}...`} placeholder={`Search ${activeTab === 'memes' ? 'memes' : 'backgrounds'}...`}
value={searchQueries[activeTab]} value={searchQueries[activeTab]}
onChange={(e) => handleSearchChange(e.target.value)} onChange={(e) => handleSearchChange(e.target.value)}
onKeyDown={handleSearchKeyDown} onKeyDown={handleSearchKeyDown}
className="pl-10 pr-10" className="pr-10 pl-10"
/> />
{searchQueries[activeTab] && ( {searchQueries[activeTab] && (
<button <button
onClick={handleClearSearch} onClick={handleClearSearch}
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600" className="text-muted-foreground hover:text-foreground absolute top-1/2 right-3 -translate-y-1/2"
> >
<X className="h-4 w-4" /> <X className="h-4 w-4" />
</button> </button>
)} )}
</div> </div>
<Button <Button onClick={handleSearch} variant="outline" size="sm" className="px-3">
onClick={handleSearch}
variant="outline"
size="sm"
className="px-3"
>
<Search className="h-4 w-4" /> <Search className="h-4 w-4" />
</Button> </Button>
</div> </div>
<TabsContent value="backgrounds" className=""> <TabsContent value="backgrounds" className="">
{isFetchingBackgrounds && <GridSkeleton itemCount={6} />} {isFetchingBackgrounds && <GridSkeleton itemCount={6} />}
{!isFetchingBackgrounds && backgrounds.length === 0 && <div className="w-full text-center p-8 text-gray-500">No backgrounds found.</div>} {!isFetchingBackgrounds && backgrounds.length === 0 && (
<div className="text-muted-foreground w-full p-8 text-center">
<p className="mb-4 text-sm">No backgrounds found.</p>
<div className="flex flex-col gap-3">
{searchQueries.backgrounds && (
<Button variant="secondary" onClick={handleClearSearch} className="rounded-full text-sm">
Clear Search
</Button>
)}
{import.meta.env.VITE_DISCORD_LINK && (
<Button variant="" asChild className="rounded-full text-sm">
<a href={import.meta.env.VITE_DISCORD_LINK} target="_blank" rel="noopener noreferrer">
Request in Discord
</a>
</Button>
)}
</div>
</div>
)}
{!isFetchingBackgrounds && backgrounds.length > 0 && ( {!isFetchingBackgrounds && backgrounds.length > 0 && (
<> <>
<div className="grid grid-cols-2 gap-2"> <div className="grid grid-cols-2 gap-2 p-2">
{backgrounds.map((item, index) => ( {backgrounds.map((item, index) => (
<Button <MediaItem
key={item.ids} key={item.ids}
variant="ghost" src={item.media_url}
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 ${ alt="Background"
selectedBackground?.ids === item.ids ? 'ring-2 ring-blue-500' : ''
}`}
onClick={() => handleBackgroundSelect(item)} onClick={() => handleBackgroundSelect(item)}
> isSelected={selectedBackground?.ids === item.ids}
<img className="transition-all hover:ring-2 hover:ring-blue-500"
src={item.media_url} />
alt="Background"
width={150}
height={150}
className="h-full w-full object-cover"
/>
</Button>
))} ))}
</div> </div>
</> </>
@@ -274,21 +280,37 @@ export default function EditSidebar({ isOpen, onClose }) {
<TabsContent value="memes" className=""> <TabsContent value="memes" className="">
{isFetchingMemes && <GridSkeleton itemCount={6} />} {isFetchingMemes && <GridSkeleton itemCount={6} />}
{!isFetchingMemes && memes.length === 0 && <div className="w-full text-center p-8 text-gray-500">No memes found.</div>} {!isFetchingMemes && memes.length === 0 && (
<div className="text-muted-foreground w-full p-8 text-center">
<p className="mb-4 text-sm">No memes found.</p>
<div className="flex flex-col gap-2">
{searchQueries.memes && (
<Button variant="outline" onClick={handleClearSearch} className="text-sm">
Clear Search
</Button>
)}
{import.meta.env.VITE_DISCORD_LINK && (
<Button variant="secondary" asChild className="text-sm">
<a href={import.meta.env.VITE_DISCORD_LINK} target="_blank" rel="noopener noreferrer">
Request in Discord
</a>
</Button>
)}
</div>
</div>
)}
{!isFetchingMemes && memes.length > 0 && ( {!isFetchingMemes && memes.length > 0 && (
<> <>
<div className="grid grid-cols-2 gap-2 p-2"> <div className="grid grid-cols-2 gap-2 p-2">
{memes.map((item, index) => ( {memes.map((item, index) => (
<Button <MediaItem
key={item.ids} key={item.ids}
variant="ghost" src={item.gif_url}
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 ${ alt="Meme"
selectedMeme?.ids === item.ids ? 'ring-2 ring-blue-500' : ''
}`}
onClick={() => handleMemeSelect(item)} onClick={() => handleMemeSelect(item)}
> isSelected={selectedMeme?.ids === item.ids}
<img src={item.gif_url} alt="Meme" width={150} height={150} className="h-full w-full object-cover" /> className="transition-all hover:ring-2 hover:ring-blue-500"
</Button> />
))} ))}
</div> </div>
</> </>