feat(notifications): add navbar dropdown and sse client
This commit is contained in:
@@ -1,228 +1,244 @@
|
||||
import { useState, useEffect, useRef } from "react"
|
||||
import { useNavigate } from "react-router-dom"
|
||||
import { useTranslation } from "../hooks/useTranslation"
|
||||
import { Button } from "./ui/button"
|
||||
import { SettingsMenu } from "./SettingsMenu"
|
||||
import { LogOut, User, Moon, Sun, Globe, Command } from "lucide-react"
|
||||
import { logoutUser, getUserProfile } from "../api/users"
|
||||
import { WorkspaceSelector } from "./WorkspaceSelector"
|
||||
import { toast } from "sonner"
|
||||
|
||||
export function Navbar() {
|
||||
const { t, lang, setLanguage } = useTranslation()
|
||||
const navigate = useNavigate()
|
||||
const [showLogoutModal, setShowLogoutModal] = useState(false)
|
||||
const [isDropdownOpen, setIsDropdownOpen] = useState(false)
|
||||
const [user, setUser] = useState<any>(null)
|
||||
const dropdownRef = useRef<HTMLDivElement>(null)
|
||||
const isFa = lang === 'fa';
|
||||
|
||||
const [isDarkMode, setIsDarkMode] = useState(() => {
|
||||
const savedTheme = localStorage.getItem('theme');
|
||||
if (savedTheme) return savedTheme === 'dark';
|
||||
return document.documentElement.classList.contains('dark');
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const handleProfileUpdated = ((e: CustomEvent) => {
|
||||
if (e.detail) {
|
||||
setUser((prev: any) => prev ? { ...prev, ...e.detail } : e.detail);
|
||||
}
|
||||
}) as EventListener;
|
||||
|
||||
window.addEventListener('profile_updated', handleProfileUpdated);
|
||||
return () => window.removeEventListener('profile_updated', handleProfileUpdated);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (isDarkMode) {
|
||||
document.documentElement.classList.add('dark');
|
||||
} else {
|
||||
document.documentElement.classList.remove('dark');
|
||||
}
|
||||
}, [isDarkMode]);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchUser = async () => {
|
||||
const token = localStorage.getItem("accessToken")
|
||||
if (!token) return
|
||||
|
||||
try {
|
||||
const userData = await getUserProfile()
|
||||
setUser(userData)
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch user profile:", error)
|
||||
}
|
||||
}
|
||||
|
||||
fetchUser()
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
|
||||
setIsDropdownOpen(false)
|
||||
}
|
||||
}
|
||||
document.addEventListener("mousedown", handleClickOutside)
|
||||
return () => document.removeEventListener("mousedown", handleClickOutside)
|
||||
}, [])
|
||||
|
||||
const handleLogout = async () => {
|
||||
try {
|
||||
const refreshToken = localStorage.getItem("refreshToken")
|
||||
if (refreshToken) {
|
||||
await logoutUser(refreshToken)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Logout API failed:", error)
|
||||
} finally {
|
||||
localStorage.removeItem("accessToken")
|
||||
localStorage.removeItem("refreshToken")
|
||||
setUser(null)
|
||||
setShowLogoutModal(false)
|
||||
toast.success(t.logoutToast || "Successfully logged out!")
|
||||
navigate("/auth")
|
||||
}
|
||||
}
|
||||
|
||||
const toggleTheme = () => {
|
||||
const newThemeState = !isDarkMode;
|
||||
setIsDarkMode(newThemeState);
|
||||
localStorage.setItem('theme', newThemeState ? 'dark' : 'light');
|
||||
};
|
||||
|
||||
const toggleLanguage = () => {
|
||||
const newLang = isFa ? 'en' : 'fa'
|
||||
if (setLanguage) {
|
||||
setLanguage(newLang)
|
||||
} else {
|
||||
localStorage.setItem('language', newLang)
|
||||
window.location.reload()
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<header className="sticky top-0 z-50 border-b border-slate-200/80 dark:border-slate-800/80 bg-white/70 dark:bg-slate-900/70 backdrop-blur-md px-8 py-6 flex items-center justify-between transition-colors">
|
||||
<div
|
||||
className="flex items-center gap-2 cursor-pointer"
|
||||
onClick={() => navigate("/")}
|
||||
>
|
||||
<span className="relative z-20 flex items-center gap-2 font-bold text-xl tracking-tight text-slate-900 dark:text-slate-50">
|
||||
<Command className="h-7 w-7" />
|
||||
{t.title || "Qlockify"}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
{user && <WorkspaceSelector />}
|
||||
{user ? (
|
||||
<div className="relative" ref={dropdownRef}>
|
||||
<button
|
||||
onClick={() => setIsDropdownOpen(!isDropdownOpen)}
|
||||
className="w-12 h-12 rounded-full overflow-hidden border-2 border-slate-200 dark:border-slate-700 hover:border-blue-500 dark:hover:border-blue-500 transition-all focus:outline-none"
|
||||
>
|
||||
{user.profile_picture ? (
|
||||
<img
|
||||
src={user.profile_picture}
|
||||
alt="Profile"
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-full bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-sm font-bold text-slate-600 dark:text-slate-300 uppercase">
|
||||
{user.first_name?.[0] || user.email?.[0] || "U"}
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{isDropdownOpen && (
|
||||
<div dir='rtl' className={`absolute ${isFa ? 'left-0' : 'right-0'} mt-2 w-56 rounded-lg bg-white dark:bg-slate-900 shadow-lg ring-1 ring-black ring-opacity-5 border border-slate-200 dark:border-slate-800 z-50 py-2 overflow-hidden`}>
|
||||
<div className="px-4 py-2 mb-2 border-b border-slate-100 dark:border-slate-800">
|
||||
<p className="text-sm font-semibold text-slate-800 dark:text-slate-400 truncate">
|
||||
{user.first_name || user.last_name
|
||||
? `${user.first_name || ''} ${user.last_name || ''}`.trim()
|
||||
: user.email}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => { navigate("/profile"); setIsDropdownOpen(false); }}
|
||||
className="flex w-full items-center gap-3 px-4 py-2.5 text-sm text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
|
||||
>
|
||||
<User className="h-4 w-4" />
|
||||
<span>{t.profile?.title || "Profile"}</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={toggleTheme}
|
||||
className="flex w-full items-center gap-3 px-4 py-2.5 text-sm text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
|
||||
>
|
||||
{isDarkMode ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
|
||||
<span>{isDarkMode ? (t.lightMode || "Light Mode") : (t.darkMode || "Dark Mode")}</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={toggleLanguage}
|
||||
className="flex w-full items-center gap-3 px-4 py-2.5 text-sm text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
|
||||
>
|
||||
<Globe className="h-4 w-4" />
|
||||
<span>{isFa ? "English" : "فارسی"}</span>
|
||||
</button>
|
||||
|
||||
<div className="h-px bg-slate-200 dark:bg-slate-800 my-1"></div>
|
||||
|
||||
<button
|
||||
onClick={() => { setShowLogoutModal(true); setIsDropdownOpen(false); }}
|
||||
className="flex w-full items-center gap-3 px-4 py-2.5 text-sm text-red-600 dark:text-red-500 hover:bg-red-50 dark:hover:bg-red-950/50 transition-colors font-medium"
|
||||
>
|
||||
<LogOut className="h-4 w-4" />
|
||||
<span>{t.logout || "Logout"}</span>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<SettingsMenu />
|
||||
<Button
|
||||
onClick={() => navigate("/auth")}
|
||||
className="bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-700"
|
||||
>
|
||||
{t.login?.signIn || "Login"}
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{showLogoutModal && (
|
||||
<div className="fixed inset-0 z-60 flex items-center justify-center bg-black/50 px-4" onClick={() => setShowLogoutModal(false)}>
|
||||
<div className="w-full max-w-sm rounded-lg bg-white p-6 shadow-lg dark:bg-slate-900 border dark:border-slate-800" onClick={(e) => e.stopPropagation()}>
|
||||
<h2 className="mb-2 text-lg font-bold text-slate-900 dark:text-white">
|
||||
{t.confirmLogoutTitle || "Confirm Logout"}
|
||||
</h2>
|
||||
<p className="mb-6 text-slate-600 dark:text-slate-400">
|
||||
{t.confirmLogoutMessage || "Are you sure you want to log out of your account?"}
|
||||
</p>
|
||||
<div className="flex justify-end gap-3">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setShowLogoutModal(false)}
|
||||
className="dark:text-white"
|
||||
>
|
||||
{t.actions?.cancel || "Cancel"}
|
||||
</Button>
|
||||
<Button
|
||||
variant="destructive"
|
||||
onClick={handleLogout}
|
||||
className="bg-red-500 text-white hover:bg-red-600 dark:bg-red-600 dark:hover:bg-red-700"
|
||||
>
|
||||
{t.logout || "Logout"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
import { useState, useEffect, useRef } from "react"
|
||||
import { useNavigate } from "react-router-dom"
|
||||
import { useTranslation } from "../hooks/useTranslation"
|
||||
import { Button } from "./ui/button"
|
||||
import { SettingsMenu } from "./SettingsMenu"
|
||||
import { LogOut, User, Moon, Sun, Globe, Command } from "lucide-react"
|
||||
import { logoutUser, getUserProfile } from "../api/users"
|
||||
import { WorkspaceSelector } from "./WorkspaceSelector"
|
||||
import { toast } from "sonner"
|
||||
import { NotificationBell } from "./notifications/NotificationBell"
|
||||
import { clearSessionTokens, getAccessToken, getRefreshToken } from "../lib/session"
|
||||
|
||||
export function Navbar() {
|
||||
const { t, lang, setLanguage } = useTranslation()
|
||||
const navigate = useNavigate()
|
||||
const [showLogoutModal, setShowLogoutModal] = useState(false)
|
||||
const [isDropdownOpen, setIsDropdownOpen] = useState(false)
|
||||
const [user, setUser] = useState<any>(null)
|
||||
const dropdownRef = useRef<HTMLDivElement>(null)
|
||||
const isFa = lang === "fa"
|
||||
|
||||
const [isDarkMode, setIsDarkMode] = useState(() => {
|
||||
const savedTheme = localStorage.getItem("theme")
|
||||
if (savedTheme) return savedTheme === "dark"
|
||||
return document.documentElement.classList.contains("dark")
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
const handleProfileUpdated = ((e: CustomEvent) => {
|
||||
if (e.detail) {
|
||||
setUser((prev: any) => (prev ? { ...prev, ...e.detail } : e.detail))
|
||||
}
|
||||
}) as EventListener
|
||||
|
||||
window.addEventListener("profile_updated", handleProfileUpdated)
|
||||
return () => window.removeEventListener("profile_updated", handleProfileUpdated)
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
if (isDarkMode) {
|
||||
document.documentElement.classList.add("dark")
|
||||
} else {
|
||||
document.documentElement.classList.remove("dark")
|
||||
}
|
||||
}, [isDarkMode])
|
||||
|
||||
useEffect(() => {
|
||||
const fetchUser = async () => {
|
||||
const token = getAccessToken()
|
||||
if (!token) return
|
||||
|
||||
try {
|
||||
const userData = await getUserProfile()
|
||||
setUser(userData)
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch user profile:", error)
|
||||
}
|
||||
}
|
||||
|
||||
void fetchUser()
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
|
||||
setIsDropdownOpen(false)
|
||||
}
|
||||
}
|
||||
document.addEventListener("mousedown", handleClickOutside)
|
||||
return () => document.removeEventListener("mousedown", handleClickOutside)
|
||||
}, [])
|
||||
|
||||
const handleLogout = async () => {
|
||||
try {
|
||||
const refreshToken = getRefreshToken()
|
||||
if (refreshToken) {
|
||||
await logoutUser(refreshToken)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Logout API failed:", error)
|
||||
} finally {
|
||||
clearSessionTokens()
|
||||
setUser(null)
|
||||
setShowLogoutModal(false)
|
||||
toast.success(t.logoutToast || "Successfully logged out!")
|
||||
navigate("/auth")
|
||||
}
|
||||
}
|
||||
|
||||
const toggleTheme = () => {
|
||||
const newThemeState = !isDarkMode
|
||||
setIsDarkMode(newThemeState)
|
||||
localStorage.setItem("theme", newThemeState ? "dark" : "light")
|
||||
}
|
||||
|
||||
const toggleLanguage = () => {
|
||||
const newLang = isFa ? "en" : "fa"
|
||||
if (setLanguage) {
|
||||
setLanguage(newLang)
|
||||
} else {
|
||||
localStorage.setItem("language", newLang)
|
||||
window.location.reload()
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<header className="sticky top-0 z-50 flex items-center justify-between border-b border-slate-200/80 bg-white/70 px-8 py-6 backdrop-blur-md transition-colors dark:border-slate-800/80 dark:bg-slate-900/70">
|
||||
<div className="flex cursor-pointer items-center gap-2" onClick={() => navigate("/")}>
|
||||
<span className="relative z-20 flex items-center gap-2 text-xl font-bold tracking-tight text-slate-900 dark:text-slate-50">
|
||||
<Command className="h-7 w-7" />
|
||||
{t.title || "Qlockify"}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
{user && <WorkspaceSelector />}
|
||||
{user ? (
|
||||
<>
|
||||
<NotificationBell />
|
||||
<div className="relative" ref={dropdownRef}>
|
||||
<button
|
||||
onClick={() => setIsDropdownOpen((current) => !current)}
|
||||
className="h-12 w-12 overflow-hidden rounded-full border-2 border-slate-200 transition-all hover:border-blue-500 focus:outline-none dark:border-slate-700 dark:hover:border-blue-500"
|
||||
>
|
||||
{user.profile_picture ? (
|
||||
<img
|
||||
src={user.profile_picture}
|
||||
alt="Profile"
|
||||
className="h-full w-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="flex h-full w-full items-center justify-center bg-slate-100 text-sm font-bold uppercase text-slate-600 dark:bg-slate-800 dark:text-slate-300">
|
||||
{user.first_name?.[0] || user.email?.[0] || "U"}
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{isDropdownOpen && (
|
||||
<div
|
||||
dir="rtl"
|
||||
className={`absolute ${isFa ? "left-0" : "right-0"} z-50 mt-2 w-56 overflow-hidden rounded-lg border border-slate-200 bg-white py-2 shadow-lg ring-1 ring-black ring-opacity-5 dark:border-slate-800 dark:bg-slate-900`}
|
||||
>
|
||||
<div className="mb-2 border-b border-slate-100 px-4 py-2 dark:border-slate-800">
|
||||
<p className="truncate text-sm font-semibold text-slate-800 dark:text-slate-400">
|
||||
{user.first_name || user.last_name
|
||||
? `${user.first_name || ""} ${user.last_name || ""}`.trim()
|
||||
: user.email}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => {
|
||||
navigate("/profile")
|
||||
setIsDropdownOpen(false)
|
||||
}}
|
||||
className="flex w-full items-center gap-3 px-4 py-2.5 text-sm text-slate-700 transition-colors hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-slate-800"
|
||||
>
|
||||
<User className="h-4 w-4" />
|
||||
<span>{t.profile?.title || "Profile"}</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={toggleTheme}
|
||||
className="flex w-full items-center gap-3 px-4 py-2.5 text-sm text-slate-700 transition-colors hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-slate-800"
|
||||
>
|
||||
{isDarkMode ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
|
||||
<span>{isDarkMode ? (t.lightMode || "Light Mode") : (t.darkMode || "Dark Mode")}</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={toggleLanguage}
|
||||
className="flex w-full items-center gap-3 px-4 py-2.5 text-sm text-slate-700 transition-colors hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-slate-800"
|
||||
>
|
||||
<Globe className="h-4 w-4" />
|
||||
<span>{isFa ? "English" : "فارسی"}</span>
|
||||
</button>
|
||||
|
||||
<div className="my-1 h-px bg-slate-200 dark:bg-slate-800"></div>
|
||||
|
||||
<button
|
||||
onClick={() => {
|
||||
setShowLogoutModal(true)
|
||||
setIsDropdownOpen(false)
|
||||
}}
|
||||
className="flex w-full items-center gap-3 px-4 py-2.5 text-sm font-medium text-red-600 transition-colors hover:bg-red-50 dark:text-red-500 dark:hover:bg-red-950/50"
|
||||
>
|
||||
<LogOut className="h-4 w-4" />
|
||||
<span>{t.logout || "Logout"}</span>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<SettingsMenu />
|
||||
<Button
|
||||
onClick={() => navigate("/auth")}
|
||||
className="bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-700"
|
||||
>
|
||||
{t.login?.signIn || "Login"}
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{showLogoutModal && (
|
||||
<div
|
||||
className="fixed inset-0 z-60 flex items-center justify-center bg-black/50 px-4"
|
||||
onClick={() => setShowLogoutModal(false)}
|
||||
>
|
||||
<div
|
||||
className="w-full max-w-sm rounded-lg border bg-white p-6 shadow-lg dark:border-slate-800 dark:bg-slate-900"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<h2 className="mb-2 text-lg font-bold text-slate-900 dark:text-white">
|
||||
{t.confirmLogoutTitle || "Confirm Logout"}
|
||||
</h2>
|
||||
<p className="mb-6 text-slate-600 dark:text-slate-400">
|
||||
{t.confirmLogoutMessage || "Are you sure you want to log out of your account?"}
|
||||
</p>
|
||||
<div className="flex justify-end gap-3">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setShowLogoutModal(false)}
|
||||
className="dark:text-white"
|
||||
>
|
||||
{t.actions?.cancel || "Cancel"}
|
||||
</Button>
|
||||
<Button
|
||||
variant="destructive"
|
||||
onClick={handleLogout}
|
||||
className="bg-red-500 text-white hover:bg-red-600 dark:bg-red-600 dark:hover:bg-red-700"
|
||||
>
|
||||
{t.logout || "Logout"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
203
src/components/notifications/NotificationBell.tsx
Normal file
203
src/components/notifications/NotificationBell.tsx
Normal file
@@ -0,0 +1,203 @@
|
||||
import { useEffect, useMemo, useRef, useState } from "react"
|
||||
import { Bell, CheckCheck, Loader2, Trash2 } from "lucide-react"
|
||||
import { useTranslation } from "../../hooks/useTranslation"
|
||||
import { cn } from "../../lib/utils"
|
||||
import { useNotifications } from "../../context/NotificationsContext"
|
||||
import type { NotificationItem } from "../../api/notifications"
|
||||
import { Button } from "../ui/button"
|
||||
|
||||
const formatNotificationTimestamp = (value: string, locale: string) => {
|
||||
const date = new Date(value)
|
||||
if (Number.isNaN(date.getTime())) {
|
||||
return value
|
||||
}
|
||||
return new Intl.DateTimeFormat(locale === "fa" ? "fa-IR" : "en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
}).format(date)
|
||||
}
|
||||
|
||||
function NotificationRow({
|
||||
notification,
|
||||
locale,
|
||||
onClick,
|
||||
onDelete,
|
||||
}: {
|
||||
notification: NotificationItem
|
||||
locale: string
|
||||
onClick: (notification: NotificationItem) => void
|
||||
onDelete: (notification: NotificationItem) => void
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"border-b border-slate-100 px-4 py-3 transition-colors dark:border-slate-800",
|
||||
notification.is_seen
|
||||
? "bg-white hover:bg-slate-50 dark:bg-slate-900 dark:hover:bg-slate-800/80"
|
||||
: "bg-sky-50/70 hover:bg-sky-100/70 dark:bg-sky-500/10 dark:hover:bg-sky-500/15",
|
||||
)}
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onClick(notification)}
|
||||
className="flex min-w-0 flex-1 items-start gap-3 text-start"
|
||||
>
|
||||
<span
|
||||
className={cn(
|
||||
"mt-1 h-2.5 w-2.5 shrink-0 rounded-full",
|
||||
notification.is_seen ? "bg-slate-300 dark:bg-slate-700" : "bg-sky-500",
|
||||
)}
|
||||
/>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<p className="truncate text-sm font-semibold text-slate-900 dark:text-slate-100">
|
||||
{notification.title || notification.type}
|
||||
</p>
|
||||
<span className="shrink-0 text-xs text-slate-500 dark:text-slate-400">
|
||||
{formatNotificationTimestamp(notification.created_at, locale)}
|
||||
</span>
|
||||
</div>
|
||||
{notification.message ? (
|
||||
<p className="mt-1 line-clamp-2 text-sm text-slate-600 dark:text-slate-300">
|
||||
{notification.message}
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={(event) => {
|
||||
event.stopPropagation()
|
||||
void onDelete(notification)
|
||||
}}
|
||||
className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-slate-400 transition-colors hover:bg-red-50 hover:text-red-600 dark:text-slate-500 dark:hover:bg-red-950/40 dark:hover:text-red-400"
|
||||
aria-label="Delete notification"
|
||||
title="Delete notification"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function NotificationBell() {
|
||||
const { t, lang } = useTranslation()
|
||||
const {
|
||||
notifications,
|
||||
unreadCount,
|
||||
totalCount,
|
||||
hasMore,
|
||||
isLoading,
|
||||
isLoadingMore,
|
||||
loadMore,
|
||||
markAllAsSeen,
|
||||
deleteOne,
|
||||
handleNotificationClick,
|
||||
} = useNotifications()
|
||||
const [isOpen, setIsOpen] = useState(false)
|
||||
const containerRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
if (
|
||||
containerRef.current &&
|
||||
!containerRef.current.contains(event.target as Node)
|
||||
) {
|
||||
setIsOpen(false)
|
||||
}
|
||||
}
|
||||
document.addEventListener("mousedown", handleClickOutside)
|
||||
return () => document.removeEventListener("mousedown", handleClickOutside)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className="relative" ref={containerRef}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsOpen((current) => !current)}
|
||||
className="relative inline-flex h-11 w-11 items-center justify-center rounded-full border border-slate-200 bg-white text-slate-600 transition-colors hover:border-sky-300 hover:text-sky-600 dark:border-slate-800 dark:bg-slate-900 dark:text-slate-300 dark:hover:border-sky-500/50 dark:hover:text-sky-300"
|
||||
aria-label={t.notifications?.open || "Open notifications"}
|
||||
>
|
||||
<Bell className="h-5 w-5" />
|
||||
{unreadCount > 0 ? (
|
||||
<span className="absolute right-2 top-2 h-2.5 w-2.5 rounded-full bg-red-500" />
|
||||
) : null}
|
||||
</button>
|
||||
|
||||
{isOpen ? (
|
||||
<div className="absolute end-0 top-full z-[80] mt-3 w-[22rem] max-w-[calc(100vw-2rem)] overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-2xl dark:border-slate-800 dark:bg-slate-900">
|
||||
<div className="flex items-center justify-between border-b border-slate-100 px-4 py-3 dark:border-slate-800">
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-slate-900 dark:text-slate-100">
|
||||
{t.notifications?.title || "Notifications"}
|
||||
</p>
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400">
|
||||
{t.notifications?.summary?.(totalCount, unreadCount) ||
|
||||
`${totalCount} total, ${unreadCount} unread`}
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => void markAllAsSeen()}
|
||||
className="h-8 px-2 text-slate-500 hover:text-sky-600 dark:text-slate-400 dark:hover:text-sky-300"
|
||||
disabled={unreadCount === 0}
|
||||
>
|
||||
<CheckCheck className="h-4 w-4" />
|
||||
<span className="sr-only">{t.notifications?.markAllRead || "Mark all as read"}</span>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="max-h-[26rem] overflow-y-auto">
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center px-4 py-12 text-sm text-slate-500 dark:text-slate-400">
|
||||
<Loader2 className="me-2 h-4 w-4 animate-spin" />
|
||||
{t.notifications?.loading || "Loading notifications..."}
|
||||
</div>
|
||||
) : notifications.length === 0 ? (
|
||||
<div className="px-4 py-12 text-center text-sm text-slate-500 dark:text-slate-400">
|
||||
{t.notifications?.empty || "No notifications yet."}
|
||||
</div>
|
||||
) : (
|
||||
notifications.map((notification) => (
|
||||
<NotificationRow
|
||||
key={notification.id}
|
||||
notification={notification}
|
||||
locale={lang}
|
||||
onClick={(item) => void handleNotificationClick(item)}
|
||||
onDelete={(item) => void deleteOne(item)}
|
||||
/>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
|
||||
{hasMore ? (
|
||||
<div className="border-t border-slate-100 p-3 dark:border-slate-800">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
className="w-full"
|
||||
onClick={() => void loadMore()}
|
||||
disabled={isLoadingMore}
|
||||
>
|
||||
{isLoadingMore ? (
|
||||
<>
|
||||
<Loader2 className="me-2 h-4 w-4 animate-spin" />
|
||||
{t.notifications?.loadingMore || "Loading more..."}
|
||||
</>
|
||||
) : (
|
||||
t.notifications?.loadMore || "Load more"
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user