Feat/settings dropdown enhancements

package.json

@@ -41,7 +41,6 @@
     "react-hot-toast": "2.6.0",
     "react-icons": "5.6.0",
     "react-joyride": "3.1.0",
-    "swiper": "12.2.0",
     "tailwind-merge": "3.6.0",
     "uuid": "14.0.0",
     "workbox-background-sync": "7.4.1",

src/context/appearance.context.tsx

@@ -9,7 +9,10 @@ import { showToast } from '@/common/toast'
 import { translateError } from '@/utils/translate-error'
 import { listenEvent } from '@/common/utils/call-event'
 
-type UI = 'SIMPLE' | 'ADVANCED'
+export enum UI {
+	SIMPLE = 'SIMPLE',
+	ADVANCED = 'ADVANCED',
+}
 export interface AppearanceData {
 	fontFamily: string
 	contentAlignment: 'center' | 'top'
@@ -31,7 +34,7 @@ interface AppearanceContextContextType extends AppearanceData {
 
 const DEFAULT_SETTINGS: AppearanceData = {
 	fontFamily: 'Vazir',
-	ui: 'ADVANCED',
+	ui: UI.ADVANCED,
 	contentAlignment: 'top',
 }
 
@@ -96,7 +99,7 @@ export function AppearanceProvider({ children }: { children: React.ReactNode })
 				(event.ctrlKey || event.metaKey)
 			) {
 				event.preventDefault()
-				setUI(settings.ui === 'ADVANCED' ? 'SIMPLE' : 'ADVANCED')
+				setUI(settings.ui === UI.ADVANCED ? UI.SIMPLE : UI.ADVANCED)
 			}
 		}
 

src/index.css

@@ -144,20 +144,7 @@ input[type="color"]::-moz-color-swatch {
   scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
 }
 
-/* Add this to your CSS file */
-.weather-forecast-slider {
-  padding-bottom: 25px !important;
-  /* Space for pagination bullets */
-}
-
-.weather-forecast-slider .swiper-slide {
-  width: auto;
-  max-width: 150px;
-}
 
-.weather-forecast-slider .swiper-pagination {
-  bottom: 0;
-}
 
 /* Custom scrollbar styles for info panel */
 .scrollbar-thin {

src/layouts/navbar/components/settingsDropdown.tsx

@@ -1,108 +1,142 @@
-import { useCallback, useState, useRef } from 'react'
+import { useCallback } from 'react'
 import { callEvent } from '@/common/utils/call-event'
-import { ClickableTooltip } from '@/components/clickableTooltip'
-import { useAppearanceSetting } from '@/context/appearance.context'
+import { UI, useAppearanceSetting } from '@/context/appearance.context'
 import { showToast } from '@/common/toast'
 import { Icon } from '@/src/icons'
+import { useAuth } from '@/context/auth.context'
+import { Dropdown } from '@/components/dropdown'
 
 interface SettingsProps {
 	setShowSettings: (value: boolean) => void
 }
 export const SettingsDropdown = ({ setShowSettings }: SettingsProps) => {
+	const { isAuthenticated } = useAuth()
 	const { canReOrderWidget, toggleCanReOrderWidget, ui } = useAppearanceSetting()
-	const [isOpen, setIsOpen] = useState(false)
 	const triggerRef = useRef<HTMLDivElement>(null)
 
 	const handleWidgetSettingsClick = useCallback(() => {
 		callEvent('openWidgetsSettings', { tab: null })
 		callEvent('closeAllDropdowns')
-		setIsOpen(false)
 	}, [])
 
 	const handleSettingsClick = useCallback(() => {
 		setShowSettings(true)
 		callEvent('closeAllDropdowns')
-		setIsOpen(false)
 	}, [])
 
 	const onClick = () => {
-		if (ui === 'SIMPLE') {
+		if (ui === UI.SIMPLE) {
 			showToast('در حالت ظاهری ساده، امکان تغییر و جابجایی ویجت ها نیست!', 'error')
 			return
 		}
 		toggleCanReOrderWidget()
-		setIsOpen(false)
+		callEvent('closeAllDropdowns')
 	}
 
-	const content = (
-		<div className="py-2 bg-content bg-glass min-w-[200px] rounded-2xl">
-			<button
-				onClick={(_e) => {
-					handleSettingsClick()
-				}}
-				className="flex items-center w-full gap-3 px-3 py-2 text-sm text-right transition-colors rounded-none cursor-pointer group hover:bg-primary/10 hover:text-primary"
-			>
-				<Icon
-					name="settings"
-					size={14}
-					className="text-muted group-hover:text-primary!"
-				/>
-				<span>تنظیمات</span>
-			</button>
+	const onClickToChangeUI = () => {
+		callEvent('ui_change', ui === 'SIMPLE' ? UI.ADVANCED : UI.SIMPLE)
+	}
 
-			<button
-				onClick={(_e) => {
-					handleWidgetSettingsClick()
-				}}
-				className="flex items-center justify-between w-full px-3 py-2 text-sm text-right transition-colors rounded-none cursor-pointer group hover:bg-primary/10 hover:text-primary"
-			>
-				<div className="flex items-center gap-3">
-					<Icon
-						name="appsPlus"
-						size={16}
-						className="text-muted group-hover:!text-primary"
-					/>
-					<span>مدیریت ویجت‌ها</span>
-				</div>
-			</button>
+	const onClickToOpenGallery = () => {
+		callEvent('openSettings', 'wallpapers')
+		callEvent('closeAllDropdowns')
+	}
 
-			<div
-				className="relative px-3 py-2 border-t cursor-pointer border-base-300 group hover:bg-primary/10 hover:text-primary"
-				onClick={() => onClick()}
-			>
-				<div className="flex items-center gap-3">
+	return (
+		<Dropdown
+			trigger={
+				<div
+					ref={triggerRef}
+					className="relative p-2 transition-all cursor-pointer nav-btn text-base-content/40 hover:text-base-content active:scale-90"
+					id="settings-button"
+				>
+					<Icon name="settings" size={14} />
+				</div>
+			}
+		>
+			<div className="py-2 bg-content bg-glass min-w-50 rounded-2xl">
+				<button
+					onClick={(_e) => {
+						handleSettingsClick()
+					}}
+					className="flex items-center w-full gap-3 px-3 py-2 text-sm text-right transition-colors rounded-none cursor-pointer group hover:bg-primary/10 hover:text-primary"
+				>
 					<Icon
-						name="outlineDrag"
-						size={16}
-						className="text-muted group-hover:!text-primary"
+						name="settings"
+						size={14}
+						className="text-muted group-hover:text-primary!"
 					/>
-					{canReOrderWidget ? (
-						<span>غیرفعال‌سازی حالت جابجایی</span>
-					) : (
-						<span>حالت جابجایی ویجت ها</span>
-					)}
+					<span>تنظیمات</span>
+				</button>
+
+				<button
+					onClick={(_e) => {
+						handleWidgetSettingsClick()
+					}}
+					className="flex items-center justify-between w-full px-3 py-2 text-sm text-right transition-colors rounded-none cursor-pointer group hover:bg-primary/10 hover:text-primary"
+				>
+					<div className="flex items-center gap-3">
+						<Icon
+							name="appsPlus"
+							size={14}
+							className="text-muted group-hover:text-primary!"
+						/>
+						<span>مدیریت ویجت‌ها</span>
+					</div>
+				</button>
+
+				<div
+					className="relative px-3 py-2 cursor-pointer border-base-300 group hover:bg-primary/10 hover:text-primary"
+					onClick={() => onClickToOpenGallery()}
+				>
+					<div className="flex items-center gap-3">
+						<Icon
+							name={'wallpapers'}
+							size={14}
+							className="text-muted group-hover:!text-primary"
+						/>
+						تصویر زمینه‌ها
+					</div>
 				</div>
-			</div>
-		</div>
-	)
 
-	return (
-		<>
-			<div
-				ref={triggerRef}
-				className="relative p-2 transition-all cursor-pointer nav-btn text-base-content/40 hover:text-base-content active:scale-90"
-				id="settings-button"
-			>
-				<Icon name="settings" size={14} />
+				{isAuthenticated ? (
+					<div
+						className="relative px-3 py-2 cursor-pointer border-base-300 group hover:bg-primary/10 hover:text-primary"
+						onClick={() => onClickToChangeUI()}
+					>
+						<div className="flex items-center gap-3">
+							<Icon
+								name={ui === UI.ADVANCED ? 'simple_ui' : 'advanced_ui'}
+								size={14}
+								className="text-muted group-hover:text-primary!"
+							/>
+							{ui === UI.SIMPLE ? (
+								<span> تغییر حالت ظاهری به پیشفرض</span>
+							) : (
+								<span>تغییر حالت ظاهری به ساده</span>
+							)}
+						</div>
+					</div>
+				) : null}
+
+				<div
+					className="relative px-3 py-2 border-t cursor-pointer border-base-300 group hover:bg-primary/10 hover:text-primary"
+					onClick={() => onClick()}
+				>
+					<div className="flex items-center gap-3">
+						<Icon
+							name="outlineDrag"
+							size={14}
+							className="text-muted group-hover:!text-primary"
+						/>
+						{canReOrderWidget ? (
+							<span>غیرفعال‌سازی حالت جابجایی</span>
+						) : (
+							<span>حالت جابجایی ویجت ها</span>
+						)}
+					</div>
+				</div>
 			</div>
-			<ClickableTooltip
-				triggerRef={triggerRef}
-				isOpen={isOpen}
-				setIsOpen={setIsOpen}
-				content={content}
-				contentClassName="!p-0"
-				closeOnClickOutside={true}
-			/>
-		</>
+		</Dropdown>
 	)
 }

src/layouts/setting/tabs/appearance/components/content-alignment-settings.tsx

@@ -1,10 +1,10 @@
 import { ItemSelector } from '@/components/item-selector'
 import { SectionPanel } from '@/components/section-panel'
-import { useAppearanceSetting } from '@/context/appearance.context'
+import { UI, useAppearanceSetting } from '@/context/appearance.context'
 
 export function ContentAlignmentSettings() {
 	const { contentAlignment, setContentAlignment, ui } = useAppearanceSetting()
-	if (ui === 'SIMPLE') return null
+	if (ui === UI.SIMPLE) return null
 	return (
 		<SectionPanel title="تنظیمات چیدمان" delay={0.3} size="sm">
 			<div className={`space-y-3`}>

src/layouts/setting/tabs/appearance/components/ui-selector.tsx

@@ -1,11 +1,11 @@
 import { ItemSelector } from '@/components/item-selector'
 import { SectionPanel } from '@/components/section-panel'
-import { useAppearanceSetting } from '@/context/appearance.context'
+import { UI, useAppearanceSetting } from '@/context/appearance.context'
 import { Icon } from '@/src/icons'
 
 export function UISelector() {
 	const { setUI, ui } = useAppearanceSetting()
-	function onClick(item: string) {
+	function onClick(item: UI) {
 		setUI(item as any)
 	}
 
@@ -31,7 +31,7 @@ export function UISelector() {
 				<div className="grid grid-cols-1 gap-3 md:grid-cols-2">
 					<ItemSelector
 						isActive={ui === 'ADVANCED'}
-						onClick={() => onClick('ADVANCED')}
+						onClick={() => onClick(UI.ADVANCED)}
 						label={
 							<div className="flex items-center gap-2">
 								<Icon
@@ -45,8 +45,8 @@ export function UISelector() {
 						description="همه‌چیز جلوی چشمته؛ ابزارها، ویجت‌ها و آزادی کامل برای چیدمان."
 					/>
 					<ItemSelector
-						isActive={ui === 'SIMPLE'}
-						onClick={() => onClick('SIMPLE')}
+						isActive={ui === UI.SIMPLE}
+						onClick={() => onClick(UI.SIMPLE)}
 						label={
 							<div className="flex items-center gap-2">
 								<Icon

src/layouts/setting/tabs/wallpapers/tab/gallery/components/wallpaper-item/wallpaper-item.tsx

@@ -6,6 +6,7 @@ import { useLazyLoad } from '../../../../hooks/use-lazy-load'
 import Tooltip from '@/components/toolTip'
 import { HoverPlayVideo } from '../hover-play-video'
 import { Icon } from '@/src/icons'
+import { UI } from '@/context/appearance.context'
 
 interface WallpaperItemProps {
 	wallpaper: Wallpaper
@@ -131,7 +132,7 @@ function WallpaperItemFu({
 				{loaded && !error && (
 					<>
 						<div
-							className={`absolute flex  justify-between inset-x-0 bottom-0 p-2 rounded-xl transition-opacity duration-300 bg-gradient-to-t from-black/80 to-black/0 items-center`}
+							className={`absolute flex  justify-between inset-x-0 bottom-0 p-2 rounded-xl transition-opacity duration-300 bg-linear-to-t from-black/80 to-black/0 items-center`}
 						>
 							{wallpaper.name && (
 								<div className="flex-1 text-xs font-medium text-white">
@@ -162,7 +163,7 @@ function WallpaperItemFu({
 											: 'مناسب حالت ظاهری ساده'
 									}
 								>
-									{wallpaper.extensionUI === 'SIMPLE' ? (
+									{wallpaper.extensionUI === UI.SIMPLE ? (
 										<Icon
 											name="simple_ui"
 											size={14}