diff --git a/bun.lock b/bun.lock index 87d2cdab..629c973f 100644 --- a/bun.lock +++ b/bun.lock @@ -11,13 +11,13 @@ "@tanstack/react-query": "5.101.0", "@wxt-dev/webextension-polyfill": "1.0.0", "axios": "1.18.0", - "canvas-confetti": "^1.9.4", + "canvas-confetti": "1.9.4", "chart.js": "4.5.1", "dompurify": "3.4.11", "jalali-moment": "3.3.11", "moment": "2.30.1", "moment-hijri": "3.0.0", - "moment-timezone": "^0.6.2", + "moment-timezone": "0.6.2", "motion": "12.40.0", "ms": "2.1.3", "react": "19.2.7", @@ -28,8 +28,7 @@ "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", + "tailwind-merge": "3.6.0", "uuid": "14.0.0", "workbox-background-sync": "7.4.1", "workbox-cacheable-response": "7.4.1", @@ -42,7 +41,7 @@ "devDependencies": { "@biomejs/biome": "2.5.0", "@tailwindcss/vite": "4.3.1", - "@types/canvas-confetti": "^1.9.0", + "@types/canvas-confetti": "1.9.0", "@types/moment-hijri": "2.1.4", "@types/ms": "2.1.0", "@types/node": "25.9.3", @@ -1146,8 +1145,6 @@ "supports-color": ["supports-color@7.2.0", "", { "dependencies": { "has-flag": "^4.0.0" } }, "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw=="], - "swiper": ["swiper@12.2.0", "", {}, "sha512-K8uXsBZU6ME97Ia3xbBge8IRCnR1lOmIILzvY/jGVic7dSTQ530s3uO8RvXbPUtkkXLWIwmZLRPbtDxRWVAFdg=="], - "tailwind-merge": ["tailwind-merge@3.6.0", "", {}, "sha512-uxL7qAVQriqRQPAyK3pj66VqskWqoZ37PW94jwOTwNfq/z9oyu1V+eqrZqtR2+fCiXdYOZe/Modt8GtvqNzu+w=="], "tailwindcss": ["tailwindcss@4.3.1", "", {}, "sha512-hk+TB1m+K8CYNrP6rjQaq/Y+4Zylwpa87mLYBKCunwnnQ9p+fHb7kmSfGqyEJoxF/O6CDyABWVFEafNSYKll+Q=="], diff --git a/package.json b/package.json index 987e226b..e43b6b40 100644 --- a/package.json +++ b/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", diff --git a/src/context/appearance.context.tsx b/src/context/appearance.context.tsx index 21573541..e2f800ea 100644 --- a/src/context/appearance.context.tsx +++ b/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) } } diff --git a/src/index.css b/src/index.css index 8609335d..79e71d59 100644 --- a/src/index.css +++ b/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 { diff --git a/src/layouts/navbar/components/settingsDropdown.tsx b/src/layouts/navbar/components/settingsDropdown.tsx index 6950ca10..e0592ec9 100644 --- a/src/layouts/navbar/components/settingsDropdown.tsx +++ b/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(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 = ( -
- + const onClickToChangeUI = () => { + callEvent('ui_change', ui === 'SIMPLE' ? UI.ADVANCED : UI.SIMPLE) + } - + const onClickToOpenGallery = () => { + callEvent('openSettings', 'wallpapers') + callEvent('closeAllDropdowns') + } -
onClick()} - > -
+ return ( + + +
+ } + > +
+ + + + +
onClickToOpenGallery()} + > +
+ + تصویر زمینه‌ها +
-
-
- ) - return ( - <> -
- + {isAuthenticated ? ( +
onClickToChangeUI()} + > +
+ + {ui === UI.SIMPLE ? ( + تغییر حالت ظاهری به پیشفرض + ) : ( + تغییر حالت ظاهری به ساده + )} +
+
+ ) : null} + +
onClick()} + > +
+ + {canReOrderWidget ? ( + غیرفعال‌سازی حالت جابجایی + ) : ( + حالت جابجایی ویجت ها + )} +
+
- - + ) } diff --git a/src/layouts/setting/tabs/appearance/components/content-alignment-settings.tsx b/src/layouts/setting/tabs/appearance/components/content-alignment-settings.tsx index 1ea16dd1..cc6e80a9 100644 --- a/src/layouts/setting/tabs/appearance/components/content-alignment-settings.tsx +++ b/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 (
diff --git a/src/layouts/setting/tabs/appearance/components/ui-selector.tsx b/src/layouts/setting/tabs/appearance/components/ui-selector.tsx index e701eeeb..ea52d0da 100644 --- a/src/layouts/setting/tabs/appearance/components/ui-selector.tsx +++ b/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() {
onClick('ADVANCED')} + onClick={() => onClick(UI.ADVANCED)} label={
onClick('SIMPLE')} + isActive={ui === UI.SIMPLE} + onClick={() => onClick(UI.SIMPLE)} label={
{wallpaper.name && (
@@ -162,7 +163,7 @@ function WallpaperItemFu({ : 'مناسب حالت ظاهری ساده' } > - {wallpaper.extensionUI === 'SIMPLE' ? ( + {wallpaper.extensionUI === UI.SIMPLE ? ( = ({ return (