Refactor/navbar UI

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

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)
 			}
 		})
 

src/layouts/navbar/components/settingsDropdown.tsx

@@ -1,88 +1,98 @@
-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'
 
 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<HTMLDivElement>(null)
+
 	const handleWidgetSettingsClick = useCallback(() => {
 		callEvent('openWidgetsSettings', { tab: null })
 		callEvent('closeAllDropdowns')
+		setIsOpen(false)
 	}, [])
 
 	const handleSettingsClick = useCallback(() => {
 		setShowSettings(true)
 		callEvent('closeAllDropdowns')
+		setIsOpen(false)
 	}, [])
 
-	const trigger = (
-		<Tooltip content="تنظیمات و مدیریت" position="bottom">
+	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"
+			>
+				<HiCog size={16} className="text-muted group-hover:!text-primary" />
+				<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">
+					<HiViewGridAdd
+						size={16}
+						className="text-muted group-hover:!text-primary"
+					/>
+					<span>مدیریت ویجت‌ها</span>
+				</div>
+			</button>
+
 			<div
-				className="relative flex items-center justify-center w-8 h-8 px-1 transition-all duration-300 rounded-full cursor-pointer hover:opacity-80 group hover:bg-primary/10"
-				id="settings-button"
+				className="relative px-3 py-2 border-t cursor-pointer border-base-300 group hover:bg-primary/10 hover:text-primary"
+				onClick={() => {
+					toggleCanReOrderWidget()
+					setIsOpen(false)
+				}}
 			>
-				<HiCog size={20} className="text-muted group-hover:!text-primary" />
-				{showNewBadge && (
-					<span className="absolute w-2 h-2 rounded-full right-4 bottom-1 bg-error animate-pulse"></span>
-				)}
+				<div className="flex items-center gap-3">
+					<AiOutlineDrag
+						size={16}
+						className="text-muted group-hover:!text-primary"
+					/>
+					{canReOrderWidget ? (
+						<span>غیرفعال‌سازی حالت جابجایی</span>
+					) : (
+						<span>حالت جابجایی ویجت ها</span>
+					)}
+				</div>
+
+				<span className="absolute w-2 h-2 rounded-full left-4 top-2 bg-error animate-pulse"></span>
 			</div>
-		</Tooltip>
+		</div>
 	)
 
 	return (
-		<Dropdown trigger={trigger} position="bottom-right" width="200px">
-			<div className="py-2 bg-content bg-glass">
-				<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"
-				>
-					<HiCog size={16} className="text-muted group-hover:!text-primary" />
-					<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">
-						<HiViewGridAdd
-							size={16}
-							className="text-muted group-hover:!text-primary"
-						/>
-						<span>مدیریت ویجت‌ها</span>
-					</div>
-				</button>
-
-				<div
-					className="relative px-3 py-2 border-t cursor-pointer border-base-300 group hover:bg-primary/10 hover:text-primary"
-					onClick={() => toggleCanReOrderWidget()}
-				>
-					<div className="flex items-center gap-3">
-						<AiOutlineDrag
-							size={16}
-							className="text-muted group-hover:!text-primary"
-						/>
-						{canReOrderWidget ? (
-							<span>غیرفعال‌سازی حالت جابجایی</span>
-						) : (
-							<span>حالت جابجایی ویجت ها</span>
-						)}
-					</div>
-
-					<span className="absolute w-2 h-2 rounded-full left-4 top-2 bg-error animate-pulse"></span>
-				</div>
+		<>
+			<div
+				ref={triggerRef}
+				className="relative p-2 transition-all cursor-pointer text-white/40 hover:text-white active:scale-90"
+				id="settings-button"
+			>
+				<HiCog size={20} />
 			</div>
-		</Dropdown>
+			<ClickableTooltip
+				triggerRef={triggerRef}
+				isOpen={isOpen}
+				setIsOpen={setIsOpen}
+				content={content}
+				contentClassName="!p-0"
+				closeOnClickOutside={true}
+			/>
+		</>
 	)
 }

src/layouts/navbar/friends-list/friends.tsx

@@ -1,40 +1,32 @@
-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 = () => (
-	<Tooltip content="دوستان" position="bottom">
-		<div className="relative flex items-center justify-center w-8 h-8 px-1 transition-all duration-300 rounded-full cursor-pointer hover:opacity-80 group hover:bg-primary/10">
-			<HiUserGroup size={18} className="text-muted group-hover:!text-primary" />
-		</div>
-	</Tooltip>
-)
+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
 ) => (
-	<div className="py-2 bg-content bg-glass">
+	<div className="py-2 bg-content bg-glass min-w-[280px] rounded-2xl">
 		<div className="px-3 pb-2 mb-2 border-b border-content">
 			<div className="flex items-center justify-between">
 				<h3 className="text-sm font-medium">دوستان</h3>
 				<button
 					onClick={(e) => {
 						e.stopPropagation()
 						onOpenSettings()
+						setIsOpen(false)
 					}}
 					className="p-1 transition-colors rounded-md cursor-pointer hover:bg-primary/10 group"
-					title="تنظیمات دوستان"
 				>
 					<FiSettings
 						size={14}
@@ -52,6 +44,7 @@ const renderFriendsDropdownContent = (
 					onClick={(e) => {
 						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<string | null>(null)
+	const [isOpen, setIsOpen] = useState(false)
+	const triggerRef = useRef<HTMLDivElement>(null)
 
 	const { data: friendsData, refetch: refetchFriends } = useGetFriends({
 		status: 'ACCEPTED',
@@ -111,18 +106,27 @@ export function FriendsList() {
 
 	return (
 		<>
-			<Dropdown
-				trigger={renderFriendsTrigger()}
-				position="bottom-right"
-				width="280px"
+			<div
+				ref={triggerRef}
+				className="relative p-2 transition-all cursor-pointer text-white/40 hover:text-white active:scale-90"
 			>
-				{renderFriendsDropdownContent(
+				<HiUserGroup size={18} />
+			</div>
+
+			<ClickableTooltip
+				triggerRef={triggerRef}
+				isOpen={isOpen}
+				setIsOpen={setIsOpen}
+				content={renderFriendsDropdownContent(
 					friends,
 					activeProfileId,
 					setActiveProfileId,
-					handleOpenSettings
+					handleOpenSettings,
+					setIsOpen
 				)}
-			</Dropdown>
+				contentClassName="!p-0"
+				closeOnClickOutside={true}
+			/>
 
 			<UserAccountModal
 				isOpen={showSettingsModal}

src/layouts/navbar/market/market-button.tsx

@@ -2,8 +2,8 @@ import { useEffect, useState } from 'react'
 import Analytics from '@/analytics'
 import { listenEvent } from '@/common/utils/call-event'
 import Modal from '@/components/modal'
-import Tooltip from '@/components/toolTip'
 import { MarketContainer } from '@/layouts/market/market-container'
+import { HiShoppingBag } from 'react-icons/hi2'
 
 export function MarketButton() {
 	const [showMarket, setShowMarket] = useState(false)
@@ -22,19 +22,12 @@ export function MarketButton() {
 
 	return (
 		<>
-			<Tooltip content="فروشگاه">
-				<button
-					onClick={handleClick}
-					className="flex flex-row-reverse items-center justify-center w-8 h-full px-1 overflow-hidden transition-all duration-200 cursor-pointer bg-content bg-glass rounded-xl hover:bg-primary/10 hover:scale-105 group"
-					style={{
-						backgroundImage:
-							'url(https://cdn.widgetify.ir/extension/market-button.gif)',
-						backgroundPosition: 'center',
-						backgroundSize: 'cover',
-					}}
-				></button>
-			</Tooltip>
-
+			<button
+				onClick={() => handleClick()}
+				className="p-2 transition-all cursor-pointer text-white/40 hover:text-white active:scale-90"
+			>
+				<HiShoppingBag size={19} />
+			</button>
 			<Modal
 				isOpen={showMarket}
 				onClose={() => setShowMarket(false)}