From 553fd4f783c5365c7cebcde5dac3d6f41ffc6db6 Mon Sep 17 00:00:00 2001
From: sajjad isvand <sajjadzibaee102@gmail.com>
Date: Sat, 5 Sep 2026 09:41:56 +0330
Subject: [PATCH] refactor(gallery): rename item to photo-item and use skeleton
 class

---
 ...terest-item.tsx => gallery-photo-item.tsx} | 12 ++++-------
 .../gallery/gallery-picker-modal.tsx          | 20 +++++++++----------
 src/components/gallery/index.ts               |  2 +-
 3 files changed, 15 insertions(+), 19 deletions(-)
 rename src/components/gallery/{gallery-pinterest-item.tsx => gallery-photo-item.tsx} (94%)

diff --git a/src/components/gallery/gallery-pinterest-item.tsx b/src/components/gallery/gallery-photo-item.tsx
similarity index 94%
rename from src/components/gallery/gallery-pinterest-item.tsx
rename to src/components/gallery/gallery-photo-item.tsx
index 3e0c039d4..6959ef987 100644
--- a/src/components/gallery/gallery-pinterest-item.tsx
+++ b/src/components/gallery/gallery-photo-item.tsx
@@ -5,17 +5,13 @@ import { UserCoin } from '@/layouts/setting/tabs/account/components/user-coin'
 import { useLazyLoad } from '@/layouts/setting/tabs/wallpapers/hooks/use-lazy-load'
 import type { GalleryAsset } from '@/services/hooks/gallery/get-gallery-assets.hook'
 
-interface GalleryPinterestItemProps {
+interface GalleryPhotoItemProps {
 	asset: GalleryAsset
 	isSelected: boolean
 	onClick: () => void
 }
 
-export function GalleryPinterestItem({
-	asset,
-	isSelected,
-	onClick,
-}: GalleryPinterestItemProps) {
+export function GalleryPhotoItem({ asset, isSelected, onClick }: GalleryPhotoItemProps) {
 	const [loaded, setLoaded] = useState(false)
 	const [error, setError] = useState(false)
 	const imgRef = useRef<HTMLImageElement>(null)
@@ -39,13 +35,13 @@ export function GalleryPinterestItem({
 			className={`break-inside-avoid relative rounded-2xl cursor-pointer group overflow-hidden bg-base-200/50 ${itemOutlineStyle} transition-all duration-200 active:scale-98`}
 		>
 			{!loaded && (
-				<div className="flex items-center justify-center w-full min-h-40 bg-base-300">
+				<div className="flex items-center justify-center w-full min-h-28 bg-base-300/30">
 					<div className="w-5 h-5 border-2 rounded-full border-primary/30 border-t-primary animate-spin" />
 				</div>
 			)}
 
 			{error && (
-				<div className="flex flex-col items-center justify-center w-full min-h-35 bg-error/10">
+				<div className="flex flex-col items-center justify-center w-full min-h-28 bg-error/10">
 					<Icon name="alert" className="text-error" />
 					<p className="mt-1 text-[10px] text-muted">خطا در بارگذاری</p>
 				</div>
diff --git a/src/components/gallery/gallery-picker-modal.tsx b/src/components/gallery/gallery-picker-modal.tsx
index 7675ebeb9..62e59da9d 100644
--- a/src/components/gallery/gallery-picker-modal.tsx
+++ b/src/components/gallery/gallery-picker-modal.tsx
@@ -11,7 +11,7 @@ import {
 	type GalleryAssetType,
 } from '@/services/hooks/gallery/get-gallery-assets.hook'
 import { GalleryAssetPurchaseModal } from './gallery-asset-purchase-modal'
-import { GalleryPinterestItem } from './gallery-pinterest-item'
+import { GalleryPhotoItem } from './gallery-photo-item'
 import { GalleryBookmarkIconItem } from './gallery-bookmark-icon-item'
 
 interface GalleryPickerModalProps {
@@ -93,7 +93,7 @@ export function GalleryPickerModal({
 				direction="rtl"
 				closeOnBackdropClick={true}
 			>
-				<div className="flex flex-col w-full gap-4 p-1">
+				<div className="flex flex-col w-full gap-4 p-1 h-[70vh]">
 					{categories.length > 0 && (
 						<div className="flex items-center gap-1.5 overflow-y-hidden h-12 overflow-x-auto no-scrollbar">
 							<Chip
@@ -116,14 +116,14 @@ export function GalleryPickerModal({
 						</div>
 					)}
 
-					<div className="flex-1 pr-1 overflow-y-auto">
+					<div className="flex-1 pr-1">
 						{isLoading ? (
-							type === 'BOOKMARK_ICON' ? (
+							type === 'BOOKMARK_ICON' || type === 'AVATAR' ? (
 								<div className="grid grid-cols-3 gap-3 sm:grid-cols-4 md:grid-cols-5">
-									{[...Array(10)].map((_, idx) => (
+									{[...Array(15)].map((_, idx) => (
 										<div
 											key={idx}
-											className="w-full aspect-square rounded-2xl bg-base-300 animate-pulse"
+											className="w-full aspect-square rounded-2xl skeleton"
 										/>
 									))}
 								</div>
@@ -132,9 +132,9 @@ export function GalleryPickerModal({
 									{[...Array(8)].map((_, idx) => (
 										<div
 											key={idx}
-											className="w-full rounded-2xl bg-base-300 animate-pulse break-inside-avoid"
+											className="w-full rounded-2xl skeleton break-inside-avoid"
 											style={{
-												height: `${(idx % 3) * 60 + 160}px`,
+												height: `${(idx % 3) * 35 + 110}px`,
 											}}
 										/>
 									))}
@@ -149,7 +149,7 @@ export function GalleryPickerModal({
 								/>
 								<p className="text-sm font-medium">هیچ تصویری پیدا نشد</p>
 							</div>
-						) : type === 'BOOKMARK_ICON' ? (
+						) : type === 'BOOKMARK_ICON' || type === 'AVATAR' ? (
 							<div className="grid grid-cols-3 gap-3 sm:grid-cols-4 md:grid-cols-5">
 								{assets.map((asset) => (
 									<GalleryBookmarkIconItem
@@ -163,7 +163,7 @@ export function GalleryPickerModal({
 						) : (
 							<div className="gap-3 space-y-3 columns-2 sm:columns-3 md:columns-4">
 								{assets.map((asset) => (
-									<GalleryPinterestItem
+									<GalleryPhotoItem
 										key={asset.id}
 										asset={asset}
 										isSelected={selectedAssetId === asset.id}
diff --git a/src/components/gallery/index.ts b/src/components/gallery/index.ts
index 448b805e6..7f5760e43 100644
--- a/src/components/gallery/index.ts
+++ b/src/components/gallery/index.ts
@@ -1,4 +1,4 @@
 export * from './gallery-picker-modal'
 export * from './gallery-asset-purchase-modal'
-export * from './gallery-pinterest-item'
+export * from './gallery-photo-item'
 export * from './gallery-bookmark-icon-item'