Feat/combo widget settings and gallery cleanup

src/components/gallery/gallery-picker-modal.tsx

@@ -116,11 +116,11 @@ export function GalleryPickerModal({
 						</div>
 					)}
 
-					<div className="flex-1 pr-1">
+					<div className="flex-1 pr-1 overflow-y-auto">
 						{isLoading ? (
 							type === 'BOOKMARK_ICON' || type === 'AVATAR' ? (
-								<div className="grid grid-cols-3 gap-3 sm:grid-cols-4 md:grid-cols-5">
-									{[...Array(15)].map((_, idx) => (
+								<div className="grid grid-cols-4 gap-2.5 sm:grid-cols-5 md:grid-cols-6">
+									{[...Array(18)].map((_, idx) => (
 										<div
 											key={idx}
 											className="w-full aspect-square rounded-2xl skeleton"
@@ -150,7 +150,7 @@ export function GalleryPickerModal({
 								<p className="text-sm font-medium">هیچ تصویری پیدا نشد</p>
 							</div>
 						) : type === 'BOOKMARK_ICON' || type === 'AVATAR' ? (
-							<div className="grid grid-cols-3 gap-3 sm:grid-cols-4 md:grid-cols-5">
+							<div className="grid grid-cols-4 gap-2.5 sm:grid-cols-5 md:grid-cols-6">
 								{assets.map((asset) => (
 									<GalleryBookmarkIconItem
 										key={asset.id}

src/layouts/navbar/profile/welcome-wizard.tsx

@@ -37,11 +37,6 @@ const StepImage = ({ src }: { src: string; alt: string }) => {
 				className="absolute inset-0 transition-opacity duration-700 bg-center bg-cover"
 				style={{
 					backgroundImage: `url(${src})`,
-
-					maskImage:
-						'linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.6) 40%, rgba(0, 0, 0, 0.3) 90%, rgba(0, 0, 0, 0) 100%)',
-					WebkitMaskImage:
-						'linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.6) 40%, rgba(0, 0, 0, 0.3) 90%, rgba(0, 0, 0, 0) 100%)',
 				}}
 			/>
 		</div>

src/layouts/widgets-settings/tab-keys.ts

@@ -4,5 +4,6 @@ export enum WidgetTabKeys {
 	wigiArz = 'wigiArz',
 	news_settings = 'news_settings',
 	weather_settings = 'weather_settings',
+	combo_settings = 'combo_settings',
 	Pet = 'pet_settings',
 }

src/layouts/widgets-settings/widget-settings-modal.tsx

@@ -5,6 +5,7 @@ import { RssFeedSetting } from '../widgets/news/rss-feed-setting'
 import { WeatherSetting } from '../widgets/weather/weather-setting'
 import { WigiArzSetting } from '../widgets/wigi-arz/wigi-arz-setting'
 import { WigiPadSetting } from '../widgets/wigi-pad/wigi-pad-setting'
+import { ComboSetting } from '../widgets/combo-widget/combo-setting'
 import { WidgetTabKeys } from './tab-keys'
 
 interface WidgetSettingModalConfig {
@@ -39,6 +40,11 @@ const WIDGET_SETTING_MODALS: Record<string, WidgetSettingModalConfig> = {
 		size: 'lg',
 		Component: WigiPadSetting,
 	},
+	[WidgetTabKeys.combo_settings]: {
+		title: 'تنظیمات ویجت ترکیبی',
+		size: 'lg',
+		Component: ComboSetting,
+	},
 }
 
 interface WidgetSettingsModalProps {

src/layouts/widgets/combo-widget/combo-setting.tsx

@@ -0,0 +1,68 @@
+import { useEffect, useState } from 'react'
+import { getFromStorage, setToStorage } from '@/common/storage'
+import { TabNavigation } from '@/components/ui'
+import { Icon } from '@/icons'
+import { WidgetSettingWrapper } from '@/layouts/widgets-settings/widget-settings-wrapper'
+import { RssFeedSetting } from '../news/rss-feed-setting'
+import { WigiArzSetting } from '../wigi-arz/wigi-arz-setting'
+
+type ComboSettingTab = 'currency' | 'news'
+
+interface ComboSettingProps {
+	instanceId?: string
+	size?: { w: number; h: number }
+}
+
+export function ComboSetting({ instanceId, size }: ComboSettingProps) {
+	const [activeTab, setActiveTab] = useState<ComboSettingTab>('currency')
+
+	useEffect(() => {
+		async function load() {
+			const savedTab = await getFromStorage('comboTabs')
+			if (savedTab === 'news' || savedTab === 'currency') {
+				setActiveTab(savedTab)
+			}
+		}
+
+		load()
+	}, [])
+
+	const handleTabChange = (tab: ComboSettingTab) => {
+		setActiveTab(tab)
+		setToStorage('comboTabs', tab)
+	}
+
+	return (
+		<WidgetSettingWrapper>
+			<div className="flex flex-col gap-4">
+				<TabNavigation<ComboSettingTab>
+					tabMode="simple"
+					activeTab={activeTab}
+					onTabClick={handleTabChange}
+					tabs={[
+						{
+							id: 'currency',
+							label: 'تنظیمات ارزها',
+							icon: <Icon name="currency" size={14} />,
+						},
+						{
+							id: 'news',
+							label: 'تنظیمات اخبار',
+							icon: <Icon name="outlineNewspaper" size={14} />,
+						},
+					]}
+					size="medium"
+					className="w-full"
+				/>
+
+				<div>
+					{activeTab === 'currency' ? (
+						<WigiArzSetting instanceId={instanceId} size={size} />
+					) : (
+						<RssFeedSetting />
+					)}
+				</div>
+			</div>
+		</WidgetSettingWrapper>
+	)
+}

src/layouts/widgets/combo-widget/combo-widget.widget.tsx

@@ -1,27 +1,16 @@
 import { useEffect, useState } from 'react'
 import Analytics from '@/analytics'
 import { getFromStorage, setToStorage } from '@/common/storage'
-import { callEvent } from '@/common/utils/call-event'
-import { WidgetTabKeys } from '@/layouts/widgets-settings/tab-keys'
 import { NewsLayout } from '../news/news.widget'
 import { WidgetContainer } from '../widget-container'
 import { WigiArzLayout } from '../wigi-arz/wigi-arz.widget'
-import { Button, TabNavigation } from '@/components/ui'
+import { TabNavigation } from '@/components/ui'
 import { Icon } from '@/icons'
 
 export type ComboTabType = 'news' | 'currency'
 
 export function ComboWidget() {
 	const [activeTab, setActiveTab] = useState<ComboTabType | null>(null)
-	const handleSettingsClick = () => {
-		if (activeTab === 'currency') {
-			callEvent('openWidgetsSettings', { tab: WidgetTabKeys.wigiArz })
-		} else {
-			callEvent('openWidgetsSettings', { tab: WidgetTabKeys.news_settings })
-		}
-
-		Analytics.event(`combo_${activeTab}_settings_opened`)
-	}
 
 	const onTabClick = (tab: ComboTabType) => {
 		if (tab === activeTab) return
@@ -78,15 +67,6 @@ export function ComboWidget() {
 					)}
 				</div>
 			</div>
-
-			<Button
-				size="sm"
-				onClick={handleSettingsClick}
-				rounded={'xl'}
-				className={`px-2 py-0! border-none! text-base-content/40 shrink-0 active:scale-95 h-7!`}
-			>
-				<Icon name="menuOption" className="w-4 h-4" />
-			</Button>
 		</WidgetContainer>
 	)
 }

src/layouts/widgets/widget-registry.tsx

@@ -241,8 +241,9 @@ export const WIDGET_DEFINITIONS: Record<WidgetKeys, WidgetDefinition> = {
 		popular: true,
 		allowedSizes: [{ w: 2, h: 3 }],
 		defaultSize: { w: 2, h: 3 },
+		settingsTab: WidgetTabKeys.combo_settings,
 		canDuplicate: false,
-		node: (_instanceId, size) => (
+		node: (_instanceId, _size) => (
 			<CurrencyProvider>
 				<ComboWidget />
 			</CurrencyProvider>

src/layouts/widgets/wigi-arz/wigi-arz-setting.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react'
 import Analytics from '@/analytics'
 import { getFromStorage, setToStorage } from '@/common/storage'
 import { callEvent } from '@/common/utils/call-event'
-import { ItemSelector, SectionPanel, SelectBox } from '@/components/ui'
+import { SectionPanel, SelectBox } from '@/components/ui'
 import { TextInput } from '@/components/ui'
 import { useAuth } from '@/context/auth.context'
 import { CurrencyColorMode } from '@/context/currency.context'
@@ -93,20 +93,6 @@ export function WigiArzSetting({ instanceId, size }: WigiArzSettingProps) {
 		setToStorage('currencies', modifiedCurrencySelection)
 	}
 
-	const toggleCurrencyColorMode = (mode: CurrencyColorMode) => {
-		Analytics.event('currency_color_mode_changed', {
-			mode,
-		})
-
-		callEvent('currencies_updated', {
-			currencies: selectedCurrencies,
-			colorMode: mode,
-		})
-
-		setCurrencyColorMode(mode)
-		setToStorage('currencyColorMode', mode)
-	}
-
 	const currencyGroups = getCurrencyOptions(
 		supportCurrencies.filter((currency) =>
 			currencyType !== 'all' ? currency.type === currencyType : true
@@ -126,25 +112,6 @@ export function WigiArzSetting({ instanceId, size }: WigiArzSettingProps) {
 	return (
 		<WidgetSettingWrapper>
 			<div className="flex flex-col gap-3 transition-all duration-300 ease-out">
-				<SectionPanel title="رنگ تغییر قیمت" size="xs">
-					<div className="flex flex-row gap-2">
-						<ItemSelector
-							label="عادی"
-							isActive={currencyColorMode === CurrencyColorMode.NORMAL}
-							className="w-full"
-							onClick={() =>
-								toggleCurrencyColorMode(CurrencyColorMode.NORMAL)
-							}
-						/>
-						<ItemSelector
-							label="معکوس"
-							isActive={currencyColorMode === CurrencyColorMode.X}
-							className="w-full"
-							onClick={() => toggleCurrencyColorMode(CurrencyColorMode.X)}
-						/>
-					</div>
-				</SectionPanel>
-
 				<SectionPanel
 					title={isCompact ? 'انتخاب ارز برای ویجت' : 'انتخاب ارزها'}
 					size="xs"