Refactor/wallpaper gallery

src/icons/packs/default.tsx

@@ -3,6 +3,7 @@ import {
 	FiBell,
 	FiClock,
 	FiCoffee,
+	FiFilter,
 	FiGift,
 	FiInbox,
 	FiKey,
@@ -13,7 +14,6 @@ import {
 	FiMaximize,
 	FiMinimize,
 	FiPhone,
-	FiPlay,
 	FiRefreshCw,
 	FiRotateCcw,
 	FiSave,
@@ -58,7 +58,6 @@ import {
 	FaSortAmountDown,
 	FaSpinner,
 	FaTelegramPlane,
-	FaUpload,
 	FaUserSecret,
 } from 'react-icons/fa'
 import {
@@ -74,7 +73,6 @@ import {
 	TbNotebook,
 	TbArrowsRightLeft,
 	TbCloudUpload,
-	TbBookmark,
 } from 'react-icons/tb'
 import {
 	MdDragIndicator,
@@ -255,4 +253,5 @@ export const defaultIcons = {
 	arrowRightLeft: TbArrowsRightLeft,
 	bookmark: HiBookmark,
 	userSecret: FaUserSecret,
+	filter: FiFilter,
 } satisfies IconMap

src/icons/types.ts

@@ -131,4 +131,5 @@ export type IconName =
 	| 'arrowRightLeft'
 	| 'bookmark'
 	| 'userSecret'
+	| 'filter'
 export type IconMap = Record<IconName, IconType>

src/layouts/setting/tabs/wallpapers/components/upload-area.component.tsx

@@ -5,14 +5,21 @@ import { useWallpaperUpload } from '../hooks/use-wallpaper-upload'
 import { MediaPreview } from './media-preview.component'
 import { Icon } from '@/src/icons'
 
+const MAX_SIZE = 2
+const MAX_FILE_SIZE = MAX_SIZE * 1024 * 1024
+
 interface UploadAreaProps {
 	customWallpaper: Wallpaper | null
 	onWallpaperChange: (newWallpaper: Wallpaper) => void
 }
 
 export function UploadArea({ customWallpaper, onWallpaperChange }: UploadAreaProps) {
 	const fileInputRef = useRef<HTMLInputElement>(null)
-	const { processFile } = useWallpaperUpload({ onWallpaperChange })
+	const { processFile } = useWallpaperUpload({
+		onWallpaperChange,
+		max_size: MAX_SIZE,
+		max_file_size: MAX_FILE_SIZE,
+	})
 
 	const handleFileSelect = () => {
 		if (fileInputRef.current) {
@@ -32,23 +39,26 @@ export function UploadArea({ customWallpaper, onWallpaperChange }: UploadAreaPro
 		return (
 			<div
 				className={
-					'relative rounded-2xl border border-dashed border-base-content/5 overflow-hidden bg-content opacity-70 hover:opacity-100 transition-all duration-300'
+					'relative w-full rounded-2xl border border-dashed border-base-content/20 overflow-hidden bg-content hover:opacity-100 transition-all duration-300 text-base-content/80 hover:text-base-content hover:border-base-content/40'
 				}
 			>
 				<button
-					className="flex items-center justify-center w-full gap-2 p-4 cursor-pointer"
+					className="flex flex-col items-center justify-center w-full gap-2 p-2 cursor-pointer"
 					onClick={handleFileSelect}
 				>
-					<Icon name="uploadImage" size={18} className={'text-content'} />
-					<p className={'text-sm font-medium text-content'}>
-						برای آپلود از سیستم کلیک کنید
-					</p>
+					<div className="flex items-center gap-2">
+						<Icon name="uploadImage" size={18} />
+						<p className={'text-sm font-medium'}>آپلود از سیستم</p>
+					</div>
+					<span className="text-xs text-muted">
+						(حداکثر حجم فایل : {MAX_SIZE} مگابایت)
+					</span>
 				</button>
 				<input
 					type="file"
 					ref={fileInputRef}
 					className="hidden"
-					accept="image/*,video/*"
+					accept="image/*"
 					onChange={handleFileChange}
 				/>
 			</div>
@@ -93,7 +103,7 @@ export function UploadArea({ customWallpaper, onWallpaperChange }: UploadAreaPro
 				type="file"
 				ref={fileInputRef}
 				className="hidden"
-				accept="image/*,video/*"
+				accept="image/*"
 				onChange={handleFileChange}
 			/>
 		</div>

src/layouts/setting/tabs/wallpapers/components/wallpaper-header.tsx

@@ -0,0 +1,27 @@
+import { UploadArea } from './upload-area.component'
+import { useWallpaperContext } from '@/context/wallpaper.context'
+
+export function WallpaperHeader() {
+	const { handleCustomWallpaperChange, customWallpaper } = useWallpaperContext()
+	return (
+		<header className="flex flex-col gap-3 pb-3 border-b border-base-content/10 select-none">
+			<div className="flex flex-col gap-0.5">
+				<h2 className="text-lg font-bold text-content tracking-tight">
+					انتخاب از سیستم
+				</h2>
+			</div>
+			<UploadArea
+				customWallpaper={customWallpaper}
+				onWallpaperChange={handleCustomWallpaperChange}
+			/>
+			<div className="flex flex-col gap-0.5">
+				<h2 className="text-lg font-bold text-content tracking-tight">
+					تصویر زمینه‌ها
+				</h2>
+				<p className="text-xs text-muted">
+					تصویر زمینه مورد علاقه خود را انتخاب کنید
+				</p>
+			</div>
+		</header>
+	)
+}