[ADE-215] Refactor translation hooks and update i18n resources for improved localization support

frontend/src/common/components/Router/TabNavigation.tsx

@@ -47,7 +47,7 @@ const TabNavigation = (): JSX.Element => {
   const [isUploadModalOpen, setIsUploadModalOpen] = useState(false);
   const history = useHistory();
   const location = useLocation();
-  const { t } = useTranslation();
+  const { t } = useTranslation(['common']);
 
   // Check if the current path starts with the tab path
   const isTabActive = (tabPath: string) => {
@@ -120,7 +120,7 @@ const TabNavigation = (): JSX.Element => {
               className="ls-tab-navigation__bar-button-icon"
               src={homeIcon}
               active={isTabActive('/tabs/home')}
-              alt={t('navigation.home', { ns: 'common', defaultValue: 'Home' })}
+              alt={t('navigation.home')}
               width={24}
               height={24}
             />
@@ -134,7 +134,7 @@ const TabNavigation = (): JSX.Element => {
               className="ls-tab-navigation__bar-button-icon"
               src={reportsIcon}
               active={isTabActive('/tabs/reports')}
-              alt={t('navigation.reports', { ns: 'common', defaultValue: 'Reports' })}
+              alt={t('navigation.reports')}
               width={24}
               height={24}
             />
@@ -148,7 +148,7 @@ const TabNavigation = (): JSX.Element => {
               <SvgIcon
                 className="ls-tab-navigation__bar-button-icon"
                 src={uploadIcon}
-                alt={t('navigation.upload', { ns: 'common', defaultValue: 'Upload' })}
+                alt={t('navigation.upload')}
                 width={24}
                 height={24}
               />
@@ -159,7 +159,7 @@ const TabNavigation = (): JSX.Element => {
               className="ls-tab-navigation__bar-button-icon"
               src={chatIcon}
               active={isTabActive('/tabs/chat')}
-              alt={t('navigation.chat', { ns: 'common', defaultValue: 'Chat' })}
+              alt={t('navigation.chat')}
               width={24}
               height={24}
             />
@@ -173,7 +173,7 @@ const TabNavigation = (): JSX.Element => {
               className="ls-tab-navigation__bar-button-icon"
               src={profileIcon}
               active={isTabActive('/tabs/account')}
-              alt={t('navigation.account', { ns: 'common', defaultValue: 'Account' })}
+              alt={t('navigation.account')}
               width={24}
               height={24}
             />

frontend/src/common/hooks/useReports.ts

@@ -8,12 +8,13 @@ import {
 import { MedicalReport } from '../models/medicalReport';
 import { QueryKey } from 'common/utils/constants';
 
+export const LATEST_REPORTS_LIMIT = 3;
 /**
  * Hook to fetch the latest reports.
  * @param limit - Maximum number of reports to fetch
  * @returns Query result with the latest reports
  */
-export const useGetLatestReports = (limit = 3) => {
+export const useGetLatestReports = (limit = LATEST_REPORTS_LIMIT) => {
   return useQuery({
     queryKey: [QueryKey.LatestReports, limit],
     queryFn: () => fetchLatestReports(limit),
@@ -53,12 +54,15 @@ export const useMarkReportAsRead = () => {
       });
 
       // Update the latest reports cache
-      queryClient.setQueryData<MedicalReport[]>([QueryKey.LatestReports], (oldReports) => {
-        if (!oldReports) return undefined;
-        return oldReports.map((report) =>
-          report.id === updatedReport.id ? updatedReport : report,
-        );
-      });
+      queryClient.setQueryData<MedicalReport[]>(
+        [QueryKey.LatestReports, LATEST_REPORTS_LIMIT],
+        (oldReports) => {
+          if (!oldReports) return undefined;
+          return oldReports.map((report) =>
+            report.id === updatedReport.id ? updatedReport : report,
+          );
+        },
+      );
     },
   });
 };
@@ -83,12 +87,15 @@ export const useToggleReportBookmark = () => {
       });
 
       // Update the latest reports cache
-      queryClient.setQueryData<MedicalReport[]>([QueryKey.LatestReports], (oldReports) => {
-        if (!oldReports) return undefined;
-        return oldReports.map((report) =>
-          report.id === updatedReport.id ? updatedReport : report,
-        );
-      });
+      queryClient.setQueryData<MedicalReport[]>(
+        [QueryKey.LatestReports, LATEST_REPORTS_LIMIT],
+        (oldReports) => {
+          if (!oldReports) return undefined;
+          return oldReports.map((report) =>
+            report.id === updatedReport.id ? updatedReport : report,
+          );
+        },
+      );
 
       // Update the bookmark status in the report detail page
       queryClient.setQueryData<MedicalReport | undefined>(

frontend/src/common/utils/i18n/resources/en/common.json

@@ -33,7 +33,9 @@
     "menu": "Menu",
     "signout": "Sign Out",
     "users": "Users",
-    "chat": "AI Assistant"
+    "chat": "AI Assistant",
+    "reports": "Reports",
+    "upload": "Upload"
   },
   "reports": {
     "uploadDate": "Upload Date"
@@ -91,5 +93,8 @@
     "upload": {
       "title": "Upload Report"
     }
+  },
+  "actions": {
+    "bookmark": "Bookmark"
   }
 }

frontend/src/common/utils/i18n/resources/en/reportDetail.json

@@ -85,6 +85,14 @@
       "discard": "Discard",
       "new-upload": "New Upload"
     },
+    "discard": {
+      "title": "Discard report?",
+      "message": "{itemName} will be discarded and not be saved to your reports archive. Are you sure?"
+    },
+    "new-upload": {
+      "title": "Upload new report?",
+      "message": "You've chosen to upload a new report. This will replace your current one. Do you still want to proceed?"
+    },
     "tabs": {
       "ai-insights": "AI Insights",
       "original-report": "Original Report"

frontend/src/common/utils/i18n/resources/fr/common.json

@@ -23,7 +23,9 @@
     "menu": "Menu",
     "signout": "Déconnecter",
     "users": "Utilisateurs",
-    "chat": "Assistant IA"
+    "chat": "Assistant IA",
+    "reports": "Rapports",
+    "upload": "Télécharger"
   },
   "reports": {
     "uploadDate": "Date de téléchargement"

frontend/src/common/utils/i18n/resources/fr/reportDetail.json

@@ -27,6 +27,14 @@
       "discard": "Annuler",
       "new-upload": "Nouveau téléchargement"
     },
+    "discard": {
+      "title": "Supprimer le rapport?",
+      "message": "{itemName} sera supprimé et ne sera pas enregistré dans votre archive de rapports. Êtes-vous sûr?"
+    },
+    "new-upload": {
+      "title": "Télécharger un nouveau rapport?",
+      "message": "Vous avez choisi de télécharger un nouveau rapport. Cela remplacera votre rapport actuel. Voulez-vous toujours continuer?"
+    },
     "tabs": {
       "ai-insights": "Analyses IA",
       "original-report": "Rapport original"

frontend/src/pages/Home/HomePage.tsx

@@ -98,7 +98,7 @@ const HomePage: React.FC = () => {
         report={report}
         onClick={() => handleReportClick(report.id)}
         onToggleBookmark={() =>
-          toggleBookmark.mutate({ reportId: report.id, isBookmarked: report.bookmarked })
+          toggleBookmark.mutate({ reportId: report.id, isBookmarked: !report.bookmarked })
         }
         showBookmarkButton={true}
       />

frontend/src/pages/Home/components/ReportItem/ReportItem.tsx

@@ -26,7 +26,7 @@ const ReportItem: React.FC<ReportItemProps> = ({
   onToggleBookmark,
   showBookmarkButton = false,
 }) => {
-  const { t } = useTranslation(['common', 'report']);
+  const { t } = useTranslation(['common']);
   const { title, category, createdAt, status, bookmarked } = report;
 
   // Treat category as string

frontend/src/pages/Reports/ReportsListPage.tsx

@@ -227,7 +227,7 @@ const ReportsListPage: React.FC = () => {
         report={report}
         onClick={() => handleReportClick(report.id)}
         onToggleBookmark={() =>
-          toggleBookmark.mutate({ reportId: report.id, isBookmarked: report.bookmarked })
+          toggleBookmark.mutate({ reportId: report.id, isBookmarked: !report.bookmarked })
         }
         showBookmarkButton
       />

frontend/src/pages/Reports/components/ActionButtons.tsx

@@ -10,7 +10,7 @@ interface ActionButtonsProps {
 }
 
 const ActionButtons: React.FC<ActionButtonsProps> = ({ onDiscard, onNewUpload, reportTitle }) => {
-  const { t } = useTranslation();
+  const { t } = useTranslation(['reportDetail', 'common']);
   const [showConfirmDiscard, setShowConfirmDiscard] = useState(false);
   const [showConfirmNewUpload, setShowConfirmNewUpload] = useState(false);
   const [isProcessing, setIsProcessing] = useState(false);