eeff292
import { useT } from '@app/i18n'
import { IconBell as Bell } from '@tabler/icons-react'
import { Link, useLocation } from 'react-router-dom'
import { useUnreadNotificationCount } from '../model/use-unread-count'
export const NOTIFY_PATH = '/app/@me/notify'
/**
* Pinned "通知" row on top of the personal space's workspace list, with the
* live unread badge beside it. Styling and active marking follow the
* sidebar's own rows; the route match is read off the location directly.
*/
export function NotifyNavItem() {
const { t } = useT()
const { pathname } = useLocation()
const { count, capped } = useUnreadNotificationCount()
const active = pathname === NOTIFY_PATH
return (
<Link
to={NOTIFY_PATH}
title={t('notifications.title')}
aria-current={active ? 'page' : undefined}
className={`workspace-nav-row flex h-8 items-center gap-1.5 rounded-md pl-2 pr-2 text-[14px] font-medium ${
active ? 'bg-shell-active text-shell-ink' : 'text-shell-ink/60 hover:bg-shell-active/60 hover:text-shell-ink'
}`}
>
<span className="shrink-0 text-shell-ink-muted">
<Bell className="h-4 w-4" aria-hidden />
</span>
<span className="truncate">{t('notifications.title')}</span>
{count > 0 ? (
<span className="ml-auto shrink-0 rounded-full bg-shell-tile px-1.5 text-[11px] font-semibold leading-[20px] text-shell-ink">
{capped ? '50+' : count > 99 ? '99+' : count}
</span>
) : null}
</Link>
)
}