feat: add notifications localization and enhance NotificationBell component with translation support for improved user experience

Author: ykaydogdu

apps/jobboard-frontend/public/locales/ar/common.json

@@ -1806,6 +1806,15 @@
     "authRequired": "يجب تسجيل الدخول لاستخدام الدردشة",
     "noConversationsDesc": "تحتاج إلى وجود إرشاد نشط لبدء الدردشة."
   },
+  "notifications": {
+    "title": "الإشعارات",
+    "ariaLabel": "الإشعارات",
+    "loading": "جاري تحميل الإشعارات...",
+    "empty": "أنت مواكب لكل شيء. لا توجد إشعارات بعد.",
+    "unread": "{{count}} غير مقروء",
+    "upToDate": "محدَّث",
+    "footer": "أحدث الإشعارات تظهر أولاً."
+  },
   "errors": {
     "DEFAULT": "حدث خطأ ما. يرجى المحاولة مرة أخرى.",
     "VALIDATION_FAILED": "بعض الحقول تحتاج إلى انتباهك.",

apps/jobboard-frontend/public/locales/en/common.json

@@ -1824,6 +1824,15 @@
     "authRequired": "You must be logged in to use chat",
     "noConversationsDesc": "You need to have an active mentorship to start chatting."
   },
+  "notifications": {
+    "title": "Notifications",
+    "ariaLabel": "Notifications",
+    "loading": "Loading notifications...",
+    "empty": "You're all caught up. No notifications yet.",
+    "unread": "{{count}} unread",
+    "upToDate": "Up to date",
+    "footer": "Newest notifications appear first."
+  },
   "errors": {
     "DEFAULT": "Something went wrong. Please try again.",
     "VALIDATION_FAILED": "Some fields need your attention.",

apps/jobboard-frontend/public/locales/tr/common.json

@@ -1834,6 +1834,15 @@
     "authRequired": "Sohbeti kullanmak için giriş yapmalısınız",
     "noConversationsDesc": "Sohbete başlamak için aktif bir mentorluk lazım."
   },
+  "notifications": {
+    "title": "Bildirimler",
+    "ariaLabel": "Bildirimler",
+    "loading": "Bildirimler yükleniyor...",
+    "empty": "Harika! Hiç bildirimin yok.",
+    "unread": "{{count}} okunmamış",
+    "upToDate": "Güncel",
+    "footer": "En yeni bildirimler önce görünür."
+  },
   "errors": {
     "DEFAULT": "Bir şeyler ters gitti. Lütfen tekrar deneyin.",
     "VALIDATION_FAILED": "Bazı alanların düzeltilmesi gerekiyor.",

apps/jobboard-frontend/src/modules/mentorship/pages/MentorProfilePage.tsx

@@ -619,7 +619,7 @@ const MentorProfilePage = () => {
                       className="w-full"
                       asChild
                     >
-                      <Link to="/mentor/requests">
+                      <Link to="/mentorship/mentor/requests">
                         {t('mentorship.profile.viewAllRequests') || 'View All Requests'}
                       </Link>
                     </Button>
@@ -634,7 +634,7 @@ const MentorProfilePage = () => {
                       className="w-full"
                       asChild
                     >
-                      <Link to="/mentor/requests">
+                      <Link to="/mentorship/mentor/requests">
                         {t('mentorship.profile.viewAllRequests') || 'View All Requests'}
                       </Link>
                     </Button>

apps/jobboard-frontend/src/modules/notifications/components/NotificationBell.tsx

@@ -2,12 +2,14 @@ import { Bell } from 'lucide-react';
 import {
   DropdownMenu,
   DropdownMenuContent,
+  DropdownMenuItem,
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@shared/components/ui/dropdown-menu';
 import { Button } from '@shared/components/ui/button';
 import { Separator } from '@shared/components/ui/separator';
+import { useTranslation } from 'react-i18next';
 import { useNotifications } from '../hooks/useNotifications';
 import type { NotificationItem } from '@shared/types/notification.types';
 
@@ -19,7 +21,7 @@ const formatTimestamp = (timestamp: number) => {
       hour: '2-digit',
       minute: '2-digit',
     }).format(new Date(timestamp));
-  } catch (err) {
+  } catch (_err: unknown) {
     return '';
   }
 };
@@ -34,10 +36,9 @@ const NotificationListItem = ({
   const isUnread = !notification.read;
 
   return (
-    <button
-      type="button"
-      onClick={() => onClick(notification)}
-      className={`flex w-full gap-3 px-4 py-3 text-left transition-colors hover:bg-muted ${
+    <DropdownMenuItem
+      onSelect={() => onClick(notification)}
+      className={`items-start px-0 py-3 text-left transition-colors hover:bg-muted ${
         isUnread ? 'bg-muted/60' : ''
       }`}
     >
@@ -48,17 +49,18 @@ const NotificationListItem = ({
       <div className="flex-1 min-w-0">
         <div className="flex items-center justify-between gap-2">
           <span className="font-medium line-clamp-1">{notification.title}</span>
-          <span className="text-xs text-muted-foreground whitespace-nowrap">
+          <span className="text-xs text-muted-foreground whitespace-nowrap px-3">
             {formatTimestamp(Number(notification.timestamp))}
           </span>
         </div>
         <p className="text-sm text-muted-foreground line-clamp-2">{notification.message}</p>
       </div>
-    </button>
+    </DropdownMenuItem>
   );
 };
 
 export const NotificationBell = () => {
+  const { t } = useTranslation('common');
   const {
     notifications,
     hasUnread,
@@ -71,13 +73,17 @@ export const NotificationBell = () => {
 
   const renderList = () => {
     if (isLoading) {
-      return <div className="p-4 text-sm text-muted-foreground">Loading notifications...</div>;
+      return (
+        <div className="p-4 text-sm text-muted-foreground">
+          {t('notifications.loading', 'Loading notifications...')}
+        </div>
+      );
     }
 
     if (notifications.length === 0) {
       return (
-        <div className="p-4 text-sm text-muted-foreground">
-          You&apos;re all caught up. No notifications yet.
+        <div className="p-6 text-sm text-muted-foreground">
+          {t('notifications.empty', "You're all caught up. No notifications yet.")}
         </div>
       );
     }
@@ -102,7 +108,7 @@ export const NotificationBell = () => {
           variant="ghost"
           size="icon"
           className="relative"
-          aria-label="Notifications"
+          aria-label={t('notifications.ariaLabel', 'Notifications')}
           aria-haspopup="menu"
         >
           <Bell className="h-5 w-5" />
@@ -111,20 +117,27 @@ export const NotificationBell = () => {
           )}
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" className="w-80 p-0">
+      <DropdownMenuContent className="w-100 p-0">
         <DropdownMenuLabel className="flex items-center justify-between px-3 py-2">
-          <span className="font-semibold">Notifications</span>
+          <span className="font-semibold">{t('notifications.title', 'Notifications')}</span>
           {hasUnread ? (
-            <span className="text-xs text-destructive">{unreadCount} unread</span>
+            <span className="text-xs text-destructive">
+              {t('notifications.unread', {
+                count: unreadCount,
+                defaultValue: `${unreadCount} unread`,
+              })}
+            </span>
           ) : (
-            <span className="text-xs text-muted-foreground">Up to date</span>
+            <span className="text-xs text-muted-foreground">
+              {t('notifications.upToDate', 'Up to date')}
+            </span>
           )}
         </DropdownMenuLabel>
         <DropdownMenuSeparator />
         {renderList()}
         <Separator />
         <div className="px-3 py-2 text-xs text-muted-foreground">
-          Newest notifications appear first.
+          {t('notifications.footer', 'Newest notifications appear first.')}
         </div>
       </DropdownMenuContent>
     </DropdownMenu>

apps/jobboard-frontend/src/modules/notifications/hooks/useNotifications.ts

@@ -11,23 +11,22 @@ const resolveNotificationLink = (notification: NotificationItem): string => {
   const type = notification.notificationType?.toUpperCase() || '';
   const linkId = notification.linkId;
 
-  if (type.includes('CHAT') || type === 'NEW_MESSAGE') {
-    return linkId ? `/mentorship/chat/${linkId}` : '/mentorship/chat';
-  }
-
-  if (type.includes('JOB_APPLICATION')) {
-    return '/jobs/applications';
-  }
-
-  if (type.includes('MENTORSHIP')) {
-    return '/mentorship/my';
-  }
-
-  if (type.includes('FORUM')) {
-    return '/forum';
-  }
+  // links must be finalized TODO
+  const NOTIFICATION_TYPE_TO_LINK = {
+    'NEW_MESSAGE': '/mentorship/chat',
+    'MENTORSHIP_REQUEST': '/mentorship/mentor/requests',
+    'MENTORSHIP_APPROVED': '/mentorship/my',
+    'MENTORSHIP_REJECTED': '/mentorship/my',
+    'JOB_APPLICATION_CREATED': '/employer/jobs/{linkId}/applications',
+    'JOB_APPLICATION_APPROVED': '/jobs/applications',
+    'JOB_APPLICATION_REJECTED': '/jobs/applications',
+    'FORUM_COMMENT': '/forum',
+    'SYSTEM_BROADCAST': '/',
+    'BROADCAST': '/',
+    'GLOBAL': '/',
+  };
 
-  return '/';
+  return NOTIFICATION_TYPE_TO_LINK[type as keyof typeof NOTIFICATION_TYPE_TO_LINK]?.replace('{linkId}', linkId?.toString() ?? '');
 };
 
 export const useNotifications = () => {
@@ -79,14 +78,18 @@ export const useNotifications = () => {
     [sortNotifications]
   );
 
-  const { isLoading: isLoadingInitial } = useQuery({
+  const { data: initialNotifications, isLoading: isLoadingInitial } = useQuery({
     queryKey: notificationKeys.me,
     queryFn: fetchMyNotifications,
     enabled: isAuthenticated,
     staleTime: 30_000,
-    onSuccess: (data) => mergeInitialNotifications(data),
   });
 
+  useEffect(() => {
+    if (!initialNotifications || !isAuthenticated) return;
+    mergeInitialNotifications(initialNotifications);
+  }, [initialNotifications, isAuthenticated, mergeInitialNotifications]);
+
   const markReadMutation = useMutation({
     mutationFn: (id: number) => markNotificationAsRead(id),
     onSuccess: (_data, id) => {