frontend phase 14

client/src/components/notifications/NotificationBell.tsx

@@ -0,0 +1,36 @@
+'use client';
+import { FunctionComponent } from 'react';
+import { useLocale, useTranslations } from 'next-intl';
+import { useRouter } from 'next/navigation';
+import { notificationsPath } from '@/constants';
+import { useUnreadCount } from '@/services/notifications';
+import NotificationBellView from './NotificationBellView';
+
+export interface NotificationBellProps {
+  /** The shell the bell lives in — decides which notification center it opens. */
+  role: 'customer' | 'nurse';
+}
+
+/**
+ * The notification bell **container** mounted in the app chrome. It subscribes to the polling
+ * `useUnreadCount` (stale-while-revalidate) and navigates to the role's notification center on click. Because
+ * only this small container reads the fast-changing count, a count change re-renders just the bell — not the
+ * whole shell.
+ * @component NotificationBell
+ */
+const NotificationBell: FunctionComponent<NotificationBellProps> = ({ role }) => {
+  const count = useUnreadCount();
+  const router = useRouter();
+  const locale = useLocale();
+  const t = useTranslations('notifications');
+
+  return (
+    <NotificationBellView
+      count={count}
+      label={t('bell_aria', { count })}
+      onClick={() => router.push(`/${locale}${notificationsPath(role)}`)}
+    />
+  );
+};
+
+export default NotificationBell;