Feat/wallpaper upload improvements

background/cache.ts

@@ -8,7 +8,6 @@ const allowedPaths = [
 	'/date/events',
 	'/news/rss',
 	'/currencies',
-	'/wallpapers',
 	'/contents',
 	'/extension/notifications',
 	'/extension/searchbox',

src/icons/packs/default.tsx

@@ -72,6 +72,7 @@ import {
 	TbApps,
 	TbNotebook,
 	TbArrowsRightLeft,
+	TbCloudUpload,
 } from 'react-icons/tb'
 import {
 	MdDragIndicator,
@@ -119,7 +120,7 @@ import { AiOutlineDrag } from 'react-icons/ai'
 import { HiOutlineViewGridAdd } from 'react-icons/hi'
 import { BsFilterLeft, BsGenderAmbiguous } from 'react-icons/bs'
 import { IoPricetagOutline } from 'react-icons/io5'
-import { VscColorMode, VscMegaphone, VscRecordKeys } from 'react-icons/vsc'
+import { VscColorMode, VscMegaphone, VscPlay, VscRecordKeys } from 'react-icons/vsc'
 
 export const defaultIcons = {
 	home: HiHome,
@@ -152,7 +153,7 @@ export const defaultIcons = {
 	folder: FaFolder,
 	folderOpen: FaFolderOpen,
 	menuOption: GoKebabHorizontal,
-	uploadImage: FaUpload,
+	uploadImage: TbCloudUpload,
 	image: FaImage,
 	help: IoMdHelp,
 	outlineBookmark: HiOutlineBookmark,
@@ -211,7 +212,7 @@ export const defaultIcons = {
 	edit: TbEdit,
 	target: FiTarget,
 	logOut: FiLogOut,
-	play: FiPlay,
+	play: VscPlay,
 	globeAsia: FaGlobeAsia,
 	moon: FaMoon,
 	outlineNewspaper: HiOutlineNewspaper,

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

@@ -32,7 +32,7 @@ export function UploadArea({ customWallpaper, onWallpaperChange }: UploadAreaPro
 		return (
 			<div
 				className={
-					'relative rounded-xl border border-dashed border-base-content/5 overflow-hidden bg-content opacity-70 hover:opacity-100 transition-all duration-300'
+					'relative rounded-2xl border border-dashed border-base-content/5 overflow-hidden bg-content opacity-70 hover:opacity-100 transition-all duration-300'
 				}
 			>
 				<button
@@ -58,13 +58,13 @@ export function UploadArea({ customWallpaper, onWallpaperChange }: UploadAreaPro
 	return (
 		<div
 			className={
-				'relative overflow-hidden  rounded-xl backdrop-blur-sm shadow-sm border border-content bg-content'
+				'relative overflow-hidden  rounded-2xl backdrop-blur-sm shadow-sm border border-content bg-content'
 			}
 		>
 			<div className="flex items-center p-2.5">
-				<div className="relative flex-shrink-0 w-16 h-12 overflow-hidden rounded-md shadow-sm">
+				<div className="relative w-16 h-12 overflow-hidden rounded-md shadow-sm shrink-0">
 					<MediaPreview customWallpaper={customWallpaper} />
-					<div className="absolute inset-0 bg-gradient-to-r from-transparent to-black/30"></div>
+					<div className="absolute inset-0 bg-linear-to-r from-transparent to-black/30"></div>
 
 					<div className="absolute top-1 right-1 px-1.5 py-0.5 text-[10px] font-medium text-white rounded-sm backdrop-blur-md bg-blue-500/80">
 						{customWallpaper.type === 'IMAGE' ? 'تصویر' : 'ویدیو'}
@@ -73,13 +73,17 @@ export function UploadArea({ customWallpaper, onWallpaperChange }: UploadAreaPro
 
 				<div className="flex-1 mx-3">
 					<p className={'text-sm font-medium text-content'}>تصویر زمینه فعال</p>
-					<p className={'text-xs text-muted truncate max-w-[200px]'}>
+					<p className={'text-xs text-muted truncate max-w-50'}>
 						{customWallpaper.name || 'بدون نام'}
 					</p>
 				</div>
 
 				<div className="flex gap-2">
-					<Button onClick={() => handleFileSelect()} size="sm">
+					<Button
+						onClick={() => handleFileSelect()}
+						size="sm"
+						className="rounded-2xl"
+					>
 						<Icon name="edit" size={14} />
 						<span>تغییر</span>
 					</Button>

src/layouts/setting/tabs/wallpapers/hooks/use-wallpaper-upload.ts

@@ -1,7 +1,9 @@
 import type { Wallpaper } from '@/common/wallpaper.interface'
 import Analytics from '../../../../../analytics'
+import { showToast } from '@/common/toast'
 
-const MAX_FILE_SIZE = 6 * 1024 * 1024 // 6MB
+const MAX_SIZE = 3
+const MAX_FILE_SIZE = MAX_SIZE * 1024 * 1024 // 3MB
 
 interface UseWallpaperUploadProps {
 	onWallpaperChange: (wallpaper: Wallpaper) => void
@@ -13,13 +15,14 @@ export function useWallpaperUpload({ onWallpaperChange }: UseWallpaperUploadProp
 		const isVideo = file.type.startsWith('video/')
 
 		if (!isImage && !isVideo) {
-			alert('لطفا یک فایل تصویری یا ویدیویی انتخاب کنید')
+			showToast('لطفا یک فایل تصویری یا ویدیویی انتخاب کنید', 'error')
 			return
 		}
 
 		if (file.size > MAX_FILE_SIZE) {
-			alert(
-				`حجم فایل نباید بیشتر از 6 مگابایت باشد. حجم فعلی: ${(file.size / (1024 * 1024)).toFixed(1)} مگابایت`
+			showToast(
+				`حجم فایل نباید بیشتر از ${MAX_SIZE} مگابایت باشد. حجم فعلی: ${(file.size / (1024 * 1024)).toFixed(1)} مگابایت`,
+				'error'
 			)
 			return
 		}

src/layouts/setting/tabs/wallpapers/tab/gallery/components/category/category-view.tsx

@@ -6,7 +6,7 @@ import { CategoryFolder } from './category-folder.component'
 interface CategoryGridProps {
 	onCategorySelect: (category: Category) => void
 }
-const CATEGORIES_PER_PAGE = 12
+const CATEGORIES_PER_PAGE = 9
 export function CategoryView({ onCategorySelect }: CategoryGridProps) {
 	const [currentPage, setCurrentPage] = useState(1)
 

src/layouts/setting/tabs/wallpapers/tab/gallery/gallery.tab.tsx

@@ -4,12 +4,10 @@ import { SectionPanel } from '@/components/section-panel'
 import { CategoryView } from './components/category/category-view'
 import { WallpaperView } from './components/wallpaper-item/wallpaper-view'
 import { UploadArea } from '../../components/upload-area.component'
-import { useAuth } from '@/context/auth.context'
 import { useWallpaperContext } from '@/context/wallpaper.context'
 
 export function GalleryTab() {
 	const [selectedCategory, setSelectedCategory] = useState<Category | null>(null)
-	const { user, isSuccessFetchingUser } = useAuth()
 	const { customWallpaper, handleCustomWallpaperChange } = useWallpaperContext()
 
 	return (
@@ -25,16 +23,14 @@ export function GalleryTab() {
 				)}
 			</div>
 
-			{user?.isVip && isSuccessFetchingUser ? (
-				<SectionPanel title="تصویر دلخواه" size="xs">
-					<div className="p-4">
-						<UploadArea
-							customWallpaper={customWallpaper}
-							onWallpaperChange={handleCustomWallpaperChange}
-						/>
-					</div>
-				</SectionPanel>
-			) : null}
+			<SectionPanel title="تصویر دلخواه" size="xs">
+				<div className="p-1">
+					<UploadArea
+						customWallpaper={customWallpaper}
+						onWallpaperChange={handleCustomWallpaperChange}
+					/>
+				</div>
+			</SectionPanel>
 		</SectionPanel>
 	)
 }

src/layouts/widgets/tools/pomodoro/pomodoro-timer.tsx

@@ -337,13 +337,13 @@ export const PomodoroTimer: React.FC<PomodoroTimerProps> = ({ onComplete }) => {
 							<Icon name="cup" size={12} />
 						</Button>
 					</Tooltip>
-					<Tooltip content="تنظیمات">
+					<Tooltip content="شخصی سازی">
 						<Button
 							size="sm"
 							onClick={() => setShowSettings(!showSettings)}
 							className={`px-2 py-0! border-none! rounded-xl text-base-content/40 shrink-0 active:scale-95 h-7!`}
 						>
-							<Icon name="settings" className="w-4 h-4" />
+							<Icon name="menuOption" className="w-4 h-4" />
 						</Button>
 					</Tooltip>
 				</div>
@@ -356,7 +356,7 @@ export const PomodoroTimer: React.FC<PomodoroTimerProps> = ({ onComplete }) => {
 					<div className="flex justify-center gap-x-4">
 						<ControlButton
 							mode={'reset'}
-							icon={<Icon name="refresh" size={16} strokeWidth={1} />}
+							icon={<Icon name="reload" size={16} strokeWidth={1} />}
 							onClick={handleReset}
 						/>
 
@@ -369,7 +369,7 @@ export const PomodoroTimer: React.FC<PomodoroTimerProps> = ({ onComplete }) => {
 						) : (
 							<ControlButton
 								mode={'play'}
-								icon={<Icon name="play" size={24} strokeWidth={1.4} />}
+								icon={<Icon name="play" size={24} />}
 								onClick={handleStart}
 							/>
 						)}

src/services/hooks/user/userService.hook.ts

@@ -52,7 +52,6 @@ interface FetchedProfile {
 	isProfileCompleted: boolean
 	hasTodayMood: boolean
 	searchAutocompleteEnabled: boolean
-	isVip: boolean
 	isBirthdayToday: boolean
 	birthDateUrl: string
 }