diff --git a/src/common/utils/call-event.ts b/src/common/utils/call-event.ts index 8b35bae4..d5da9496 100644 --- a/src/common/utils/call-event.ts +++ b/src/common/utils/call-event.ts @@ -31,6 +31,8 @@ export interface EventName { name: string template: string } + openJumpPage: null + closeJumpPage: null // setting keys wigiPadDateSettingsChanged: WigiPadDateSetting diff --git a/src/context/theme.context.tsx b/src/context/theme.context.tsx index 54f1e5b5..374171d9 100644 --- a/src/context/theme.context.tsx +++ b/src/context/theme.context.tsx @@ -37,8 +37,8 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) { setTheme(theme) document.documentElement.setAttribute('data-theme', theme) } else { - setTheme(Theme.Light) - document.documentElement.setAttribute('data-theme', Theme.Light) + setTheme(Theme.Dark) + document.documentElement.setAttribute('data-theme', Theme.Dark) } }) diff --git a/src/layouts/navbar/components/settingsDropdown.tsx b/src/layouts/navbar/components/settingsDropdown.tsx index ad849159..7aa2fdcf 100644 --- a/src/layouts/navbar/components/settingsDropdown.tsx +++ b/src/layouts/navbar/components/settingsDropdown.tsx @@ -1,8 +1,7 @@ -import { useCallback } from 'react' +import { useCallback, useState, useRef } from 'react' import { HiCog, HiViewGridAdd } from 'react-icons/hi' import { callEvent } from '@/common/utils/call-event' -import { Dropdown } from '@/components/dropdown' -import Tooltip from '@/components/toolTip' +import { ClickableTooltip } from '@/components/clickableTooltip' import { useAppearanceSetting } from '@/context/appearance.context' import { AiOutlineDrag } from 'react-icons/ai' @@ -10,79 +9,90 @@ interface SettingsProps { setShowSettings: (value: boolean) => void } export const SettingsDropdown = ({ setShowSettings }: SettingsProps) => { - const { canReOrderWidget, toggleCanReOrderWidget, showNewBadge } = - useAppearanceSetting() + const { canReOrderWidget, toggleCanReOrderWidget } = 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 trigger = ( - + const content = ( +
+ + + +
{ + toggleCanReOrderWidget() + setIsOpen(false) + }} > - - {showNewBadge && ( - - )} +
+ + {canReOrderWidget ? ( + غیرفعال‌سازی حالت جابجایی + ) : ( + حالت جابجایی ویجت ها + )} +
+ +
- +
) return ( - -
- - - - -
toggleCanReOrderWidget()} - > -
- - {canReOrderWidget ? ( - غیرفعال‌سازی حالت جابجایی - ) : ( - حالت جابجایی ویجت ها - )} -
- - -
+ <> +
+
- + + ) } diff --git a/src/layouts/navbar/friends-list/friends.tsx b/src/layouts/navbar/friends-list/friends.tsx index 126590f6..d0f6816a 100644 --- a/src/layouts/navbar/friends-list/friends.tsx +++ b/src/layouts/navbar/friends-list/friends.tsx @@ -1,30 +1,22 @@ -import { useState } from 'react' +import { useState, useRef } from 'react' import { FiSettings, FiUserPlus } from 'react-icons/fi' -import { HiUserGroup } from 'react-icons/hi' import { callEvent } from '@/common/utils/call-event' import { AuthRequiredModal } from '@/components/auth/AuthRequiredModal' -import { Dropdown } from '@/components/dropdown' -import Tooltip from '@/components/toolTip' +import { ClickableTooltip } from '@/components/clickableTooltip' import { useAuth } from '@/context/auth.context' import { useGetFriends } from '@/services/hooks/friends/friendService.hook' import { UserAccountModal } from '../../setting/tabs/account/user-account.modal' import { FriendItem } from './friend.item' - -const renderFriendsTrigger = () => ( - -
- -
- -) +import { HiUserGroup } from 'react-icons/hi2' const renderFriendsDropdownContent = ( friends: any[], activeProfileId: string | null, setActiveProfileId: (id: string | null) => void, - onOpenSettings: () => void + onOpenSettings: () => void, + setIsOpen: (isOpen: boolean) => void ) => ( -
+

دوستان

@@ -32,9 +24,9 @@ const renderFriendsDropdownContent = ( onClick={(e) => { e.stopPropagation() onOpenSettings() + setIsOpen(false) }} className="p-1 transition-colors rounded-md cursor-pointer hover:bg-primary/10 group" - title="تنظیمات دوستان" > { e.stopPropagation() onOpenSettings() + setIsOpen(false) }} className="mt-2 text-xs text-primary hover:underline" > @@ -82,6 +75,8 @@ export function FriendsList() { const [firstAuth, setFirstAuth] = useState(false) const [showSettingsModal, setShowSettingsModal] = useState(false) const [activeProfileId, setActiveProfileId] = useState(null) + const [isOpen, setIsOpen] = useState(false) + const triggerRef = useRef(null) const { data: friendsData, refetch: refetchFriends } = useGetFriends({ status: 'ACCEPTED', @@ -111,18 +106,27 @@ export function FriendsList() { return ( <> - - {renderFriendsDropdownContent( + +
+ + + contentClassName="!p-0" + closeOnClickOutside={true} + /> - - - - + setShowMarket(false)} diff --git a/src/layouts/navbar/navbar.layout.tsx b/src/layouts/navbar/navbar.layout.tsx index f9c57d89..99a18234 100644 --- a/src/layouts/navbar/navbar.layout.tsx +++ b/src/layouts/navbar/navbar.layout.tsx @@ -1,23 +1,19 @@ import { type JSX, useCallback, useEffect, useState } from 'react' -import { HiHome, HiX } from 'react-icons/hi' +import { HiX } from 'react-icons/hi' +import { FiChevronDown } from 'react-icons/fi' +import { HiHome } from 'react-icons/hi' import { AiOutlineDrag } from 'react-icons/ai' import { getFromStorage, setToStorage } from '@/common/storage' -import { listenEvent } from '@/common/utils/call-event' -import { useAuth } from '@/context/auth.context' +import { listenEvent, callEvent } from '@/common/utils/call-event' import { getConfigData } from '@/services/config-data/config_data-api' import { SettingModal } from '../setting/setting-modal' -import { NavButton } from './components/navButton' import { SettingsDropdown } from './components/settingsDropdown' import { FriendsList } from './friends-list/friends' -import { MarketButton } from './market/market-button' import { ProfileNav } from './profile/profile' import { SyncButton } from './sync/sync' import { useAppearanceSetting } from '@/context/appearance.context' - -export interface PageLink { - name: string - to: string -} +import { MarketButton } from './market/market-button' +import Analytics from '@/analytics' interface LogoData { logoUrl: string | null @@ -36,9 +32,9 @@ const WIDGETIFY_URLS = { export function NavbarLayout(): JSX.Element { const { canReOrderWidget, toggleCanReOrderWidget } = useAppearanceSetting() const [showSettings, setShowSettings] = useState(false) + const [isVisible, setIsVisible] = useState(true) const [tab, setTab] = useState(null) const [logoData, setLogoData] = useState(DEFAULT_LOGO_DATA) - const { isAuthenticated } = useAuth() const handleOpenSettings = useCallback( (tabName: 'account' | 'wallpapers' | 'general' | null) => { @@ -48,14 +44,17 @@ export function NavbarLayout(): JSX.Element { [] ) + const onToggleNavbar = () => { + setIsVisible((prev) => !prev) + Analytics.event(`navbar_${isVisible ? 'closed' : 'opened'}`) + } + const settingsModalCloseHandler = () => setShowSettings(false) const sanitizeAndUpdateLogo = useCallback( (logoUrl: string | null, logoId: string, storeData: any) => { const newLogoData = { content: '', logoUrl } - setLogoData(newLogoData) - return setToStorage('configData', { ...storeData, logo: { id: logoId, content: '', logoUrl: logoUrl }, @@ -67,106 +66,113 @@ export function NavbarLayout(): JSX.Element { const loadConfig = useCallback(async () => { try { const storeData = await getFromStorage('configData') - if (storeData?.logo) { setLogoData({ content: storeData.logo.content, logoUrl: storeData.logo.logoUrl, }) } - const data = await getConfigData() - if (data.logo) { - if (data.logo?.logoUrl) { - await sanitizeAndUpdateLogo( - data.logo?.logoUrl, - data.logo?.id, - storeData - ) - } + if (data.logo?.logoUrl) { + await sanitizeAndUpdateLogo(data.logo.logoUrl, data.logo.id, storeData) } } catch {} - }, []) + }, [sanitizeAndUpdateLogo]) useEffect(() => { const openSettingEvent = listenEvent('openSettings', handleOpenSettings) loadConfig() - return () => { - openSettingEvent() - } + return () => openSettingEvent() }, [handleOpenSettings, loadConfig]) - const w = isAuthenticated ? 'w-48 md:w-[11.2rem]' : 'w-42 md:w-[9.2rem]' return ( <> - +
- +
) : ( diff --git a/src/layouts/navbar/sync/sync.tsx b/src/layouts/navbar/sync/sync.tsx index fae01d39..4a4cf3f4 100644 --- a/src/layouts/navbar/sync/sync.tsx +++ b/src/layouts/navbar/sync/sync.tsx @@ -199,11 +199,11 @@ export function SyncButton() { <>
setShowModal(true)} > - +