feat(navbar): label icon controls on hover

src/layouts/navbar/components/blur-mode.button.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react'
 import { useGeneralSetting } from '@/context/general-setting.context'
 import { Icon } from '@/icons'
-import { ConfirmationModal } from '@/components/ui'
+import { ConfirmationModal, Tooltip } from '@/components/ui'
 import Analytics from '@/analytics'
 
 export function BlurModeButton() {
@@ -28,16 +28,18 @@ export function BlurModeButton() {
 
 	return (
 		<>
-			<div
-				onClick={handleBlurModeToggle}
-				className="relative p-2 transition-all cursor-pointer nav-btn text-base-content/40 hover:text-base-content active:scale-90"
-			>
-				{blurMode ? (
-					<Icon name="outlineEye" size={15} />
-				) : (
-					<Icon name="outlineEyeSlash" size={15} />
-				)}
-			</div>
+			<Tooltip content="حالت مخفی">
+				<div
+					onClick={handleBlurModeToggle}
+					className="relative p-2 transition-all cursor-pointer nav-btn text-base-content/40 hover:text-base-content active:scale-90"
+				>
+					{blurMode ? (
+						<Icon name="outlineEye" size={15} />
+					) : (
+						<Icon name="outlineEyeSlash" size={15} />
+					)}
+				</div>
+			</Tooltip>
 
 			<ConfirmationModal
 				isOpen={showConfirm}

src/layouts/navbar/components/layout-dropdown.tsx

@@ -1,5 +1,5 @@
 import { callEvent } from '@/common/utils/call-event'
-import { Dropdown, DropdownItem } from '@/components/ui'
+import { Dropdown, DropdownItem, Tooltip } from '@/components/ui'
 import { useAppearance } from '@/context/appearance.context'
 import { Page, usePage } from '@/context/page.context'
 import { Icon } from '@/icons'
@@ -36,12 +36,14 @@ export function LayoutDropdown() {
 	return (
 		<Dropdown
 			trigger={
-				<div
-					className="relative p-2 transition-all cursor-pointer nav-btn text-base-content/40 hover:text-base-content active:scale-90"
-					id="layout-menu-button"
-				>
-					<Icon name="appsPlus" size={15} />
-				</div>
+				<Tooltip content="مدیریت چیدمان">
+					<div
+						className="relative p-2 transition-all cursor-pointer nav-btn text-base-content/40 hover:text-base-content active:scale-90"
+						id="layout-menu-button"
+					>
+						<Icon name="appsPlus" size={15} />
+					</div>
+				</Tooltip>
 			}
 		>
 			<div className="bg-content py-2 bg-glass min-w-48 px-1" dir="rtl">

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

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
 import { AuthRequiredModal } from '@/components/auth/auth-required-modal'
 import { useAuth } from '@/context/auth.context'
-import { BottomSheet } from '@/components/ui'
+import { BottomSheet, Tooltip } from '@/components/ui'
 import { FriendsDirectView } from '@/layouts/friends/components/friends-direct-view'
 import { callEvent, listenEvent } from '@/common/utils/call-event'
 import { FriendRequestsButton } from '@/layouts/friends/components/buttons/friend-requests.button'
@@ -45,14 +45,16 @@ export function FriendsListNavbar() {
 
 	return (
 		<>
-			<div
-				className="relative p-2 transition-all cursor-pointer nav-btn text-base-content/40 hover:text-base-content active:scale-90"
-				onClick={() => clickToOpenSheet()}
-			>
-				<Icon name="friends" size={15} />
-				{hasPendingRequests &&
-					renderPendingNotification(user?.friendshipStats?.pending || 0)}
-			</div>
+			<Tooltip content="دوستان">
+				<div
+					className="relative p-2 transition-all cursor-pointer nav-btn text-base-content/40 hover:text-base-content active:scale-90"
+					onClick={() => clickToOpenSheet()}
+				>
+					<Icon name="friends" size={15} />
+					{hasPendingRequests &&
+						renderPendingNotification(user?.friendshipStats?.pending || 0)}
+				</div>
+			</Tooltip>
 
 			<BottomSheet isOpen={isOpen} onClose={() => setIsOpen(false)} size="medium">
 				<div className="pt-2 h-[calc(50vh-2rem)]">

src/layouts/navbar/navbar.layout.tsx

@@ -13,7 +13,7 @@ import { useAuth } from '@/context/auth.context'
 import { useAppearance } from '@/context/appearance.context'
 import { BlurModeButton } from './components/blur-mode.button'
 import type { UserProfile } from '@/services/hooks/user/user-service.hook'
-import { NewBadge } from '@/components/ui'
+import { NewBadge, Tooltip } from '@/components/ui'
 import { SyncAccount } from './sync'
 import { getCurrentDate } from '../widgets/calendar/utils/date-events'
 import { useBirthdayConfetti } from '@/hooks/use-birthday-confetti'
@@ -30,7 +30,7 @@ const tabs = [
 		id: Page.Home,
 		icon: <Icon name="outlineHome" />,
 		activeIcon: <Icon name="home" />,
-		label: 'ویجتیفای',
+		label: 'خانه',
 	},
 
 	{
@@ -58,32 +58,34 @@ export function NavbarTabs() {
 	return (
 		<div className="flex items-center gap-2 sm:gap-4">
 			{tabs.map((tab) => (
-				<button
-					key={tab.id}
-					onClick={() => handleTabClick(tab.id)}
-					className="relative p-1.5 sm:p-2 cursor-pointer group nav-btn"
-				>
-					<span
-						className={`
+				<Tooltip key={tab.id} content={tab.label}>
+					<button
+						onClick={() => handleTabClick(tab.id)}
+						aria-label={tab.label}
+						className="relative p-1.5 sm:p-2 cursor-pointer group nav-btn"
+					>
+						<span
+							className={`
             relative z-10 transition-all duration-300 block
             ${page === tab.id ? 'text-primary scale-110' : 'nav-btn text-base-content/20 hover:text-base-content/40'}
         `}
-					>
-						{page === tab.id && tab.activeIcon ? (
-							<span className="block text-[18px] sm:text-[22px]">
-								{tab.activeIcon}
-							</span>
-						) : (
-							<span className="block text-[18px] sm:text-[22px]">
-								{tab.icon}
-							</span>
+						>
+							{page === tab.id && tab.activeIcon ? (
+								<span className="block text-[18px] sm:text-[22px]">
+									{tab.activeIcon}
+								</span>
+							) : (
+								<span className="block text-[18px] sm:text-[22px]">
+									{tab.icon}
+								</span>
+							)}
+						</span>
+
+						{page === tab.id && (
+							<div className="absolute bottom-0 left-0 w-4 mx-auto right-0 h-1 bg-primary rounded-t-full shadow-[0_-4px_12px_rgba(var(--primary-rgb),0.8)]"></div>
 						)}
-					</span>
-
-					{page === tab.id && (
-						<div className="absolute bottom-0 left-0 w-4 mx-auto right-0 h-1 bg-primary rounded-t-full shadow-[0_-4px_12px_rgba(var(--primary-rgb),0.8)]"></div>
-					)}
-				</button>
+					</button>
+				</Tooltip>
 			))}
 		</div>
 	)
@@ -175,6 +177,7 @@ export function NavbarLayout(): JSX.Element {
 							href={WIDGETIFY_URLS.website}
 							target="_blank"
 							rel="noopener noreferrer"
+							aria-label="وب‌سایت ویجتیفای"
 							className="flex items-center justify-center border rounded-full border-white/10 bg-black/20 outline-2 outline-base-300"
 						>
 							<img
@@ -193,12 +196,15 @@ export function NavbarLayout(): JSX.Element {
 					</div>
 
 					<div className="flex items-center justify-end flex-1 gap-1 sm:gap-2">
-						<button
-							onClick={() => onToggleNavbar()}
-							className="p-2 transition-all cursor-pointer nav-btn text-base-content/40 hover:text-base-content active:scale-90"
-						>
-							<Icon name="chevronDown" size={15} />
-						</button>
+						<Tooltip content="بستن نوار">
+							<button
+								onClick={() => onToggleNavbar()}
+								aria-label="بستن نوار"
+								className="p-2 transition-all cursor-pointer nav-btn text-base-content/40 hover:text-base-content active:scale-90"
+							>
+								<Icon name="chevronDown" size={15} />
+							</button>
+						</Tooltip>
 						<NotificationNavbar />
 						<BlurModeButton />
 						<FriendsListNavbar />

src/layouts/navbar/notifications/notification.navbar.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from 'react'
-import { Dropdown, NewBadge } from '@/components/ui'
+import { Dropdown, NewBadge, Tooltip } from '@/components/ui'
 import { Icon } from '@/icons'
 import { useGetNotifications } from '@/services/hooks/extension/get-notifications.hook'
 import { NotificationCenter } from '@/layouts/navbar/notifications/notification-center/notification-center'
@@ -27,14 +27,18 @@ export function NotificationNavbar() {
 			maxHeight="420px"
 			dropdownClassName="w-80 sm:w-96 rounded-2xl"
 			trigger={
-				<div
-					onClick={handleOpen}
-					className="relative p-2 transition-all cursor-pointer nav-btn text-base-content/40 hover:text-base-content active:scale-90"
-					id="notifications-button"
-				>
-					<Icon name="notification" size={15} />
-					{hasCloseableNotifications && <NewBadge className="top-1 right-1" />}
-				</div>
+				<Tooltip content="اعلان‌ها">
+					<div
+						onClick={handleOpen}
+						className="relative p-2 transition-all cursor-pointer nav-btn text-base-content/40 hover:text-base-content active:scale-90"
+						id="notifications-button"
+					>
+						<Icon name="notification" size={15} />
+						{hasCloseableNotifications && (
+							<NewBadge className="top-1 right-1" />
+						)}
+					</div>
+				</Tooltip>
 			}
 		>
 			<div className="flex flex-col p-3 w-80 bg-content bg-glass" dir="rtl">

src/layouts/navbar/profile/profile.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react'
 import { callEvent, listenEvent } from '@/common/utils/call-event'
-import { ConfirmationModal, Dropdown, Modal } from '@/components/ui'
+import { ConfirmationModal, Dropdown, Modal, Tooltip } from '@/components/ui'
 import { useAuth } from '@/context/auth.context'
 import AuthForm from '../../setting/tabs/account/auth-form/auth-form'
 import { ProfileDropdownMenu } from './components/profile-dropdown-menu'
@@ -56,11 +56,13 @@ export function ProfileNav() {
 		<>
 			<Dropdown
 				trigger={
-					<ProfileTrigger
-						user={user}
-						isAuthenticated={isAuthenticated}
-						profilePercentage={profilePercentage}
-					/>
+					<Tooltip content="پروفایل">
+						<ProfileTrigger
+							user={user}
+							isAuthenticated={isAuthenticated}
+							profilePercentage={profilePercentage}
+						/>
+					</Tooltip>
 				}
 			>
 				<ProfileDropdownMenu