Refactor translation keys and enhance i18n configuration

.claude/settings.local.json

@@ -10,7 +10,8 @@
       "Bash(npm test)",
       "Bash(npm test:*)",
       "Bash(ls:*)",
-      "Bash(npx tsc:*)"
+      "Bash(npx tsc:*)",
+      "Bash(sed:*)"
     ],
     "deny": []
   }

frontend/public/locales/en-GB/translation.json

@@ -380,14 +380,6 @@
       "title": "Remove",
       "desc": "Delete unwanted pages from your PDF document."
     },
-    "addPassword": {
-      "title": "Add Password",
-      "desc": "Encrypt your PDF document with a password."
-    },
-    "changePermissions": {
-      "title": "Change Permissions",
-      "desc": "Change document restrictions and permissions."
-    },
     "removePassword": {
       "title": "Remove Password",
       "desc": "Remove password protection from your PDF document."
@@ -396,10 +388,6 @@
       "title": "Compress",
       "desc": "Compress PDFs to reduce their file size."
     },
-    "sanitize": {
-      "title": "Sanitise",
-      "desc": "Remove potentially harmful elements from PDF files."
-    },
     "unlockPDFForms": {
       "title": "Unlock PDF Forms",
       "desc": "Remove read-only property of form fields in a PDF document."
@@ -1748,6 +1736,8 @@
     "approximateSize": "Approximate size"
   },
   "sanitize": {
+    "title": "Sanitise",
+    "desc": "Remove potentially harmful elements from PDF files.",
     "submit": "Sanitise PDF",
     "completed": "Sanitisation completed successfully",
     "error.generic": "Sanitisation failed",
@@ -1780,6 +1770,8 @@
     }
   },
   "addPassword": {
+    "title": "Add Password",
+    "desc": "Encrypt your PDF document with a password.",
     "completed": "Password protection applied",
     "submit": "Encrypt",
     "filenamePrefix": "encrypted",
@@ -1838,6 +1830,8 @@
     }
   },
   "changePermissions": {
+    "title": "Change Permissions",
+    "desc": "Change document restrictions and permissions.",
     "completed": "Permissions changed",
     "submit": "Change Permissions",
     "error": {

frontend/public/locales/en/translation.json

@@ -1,29 +0,0 @@
-{
-  "convert": {
-    "selectSourceFormat": "Select source file format",
-    "selectTargetFormat": "Select target file format",
-    "selectFirst": "Select a source format first",
-    "imageOptions": "Image Options:",
-    "emailOptions": "Email Options:",
-    "colorType": "Color Type",
-    "dpi": "DPI",
-    "singleOrMultiple": "Output",
-    "emailNote": "Email attachments and embedded images will be included"
-  },
-  "common": {
-    "color": "Color",
-    "grayscale": "Grayscale",
-    "blackWhite": "Black & White",
-    "single": "Single Image",
-    "multiple": "Multiple Images"
-  },
-  "groups": {
-    "document": "Document",
-    "spreadsheet": "Spreadsheet",
-    "presentation": "Presentation",
-    "image": "Image",
-    "web": "Web",
-    "text": "Text",
-    "email": "Email"
-  }
-}

frontend/src/components/shared/LandingPage.tsx

@@ -116,7 +116,7 @@ const LandingPage = () => {
             >
               <AddIcon className="text-[var(--accent-interactive)]" />
               <span>
-                {t('fileUpload.addFiles', 'Add Files')}
+                {t('fileUpload.uploadFiles', 'Upload Files')}
               </span>
             </Button>
 
@@ -137,7 +137,7 @@ const LandingPage = () => {
             className="text-[var(--accent-interactive)]"
             style={{ fontSize: '.8rem' }}
           >
-            {t('fileUpload.dragFilesInOrClick', 'Drag files in or click "Add Files" to browse')}
+            {t('fileUpload.dropFilesHere', 'Drop files here or click to upload')}
           </span>
         </div>
       </Dropzone>

frontend/src/hooks/useToolManagement.tsx

@@ -118,7 +118,7 @@ interface ToolManagementResult {
 }
 
 export const useToolManagement = (): ToolManagementResult => {
-  const { t } = useTranslation();
+  const { t, ready } = useTranslation();
 
   const [selectedToolKey, setSelectedToolKey] = useState<string | null>(null);
   const [toolSelectedFileIds, setToolSelectedFileIds] = useState<string[]>([]);
@@ -136,18 +136,22 @@ export const useToolManagement = (): ToolManagementResult => {
   }, [endpointsLoading, endpointStatus]);
 
   const toolRegistry: ToolRegistry = useMemo(() => {
+    if (!ready) {
+      return {};
+    }
+    
     const availableTools: ToolRegistry = {};
     Object.keys(toolDefinitions).forEach(toolKey => {
       if (isToolAvailable(toolKey)) {
         const toolDef = toolDefinitions[toolKey];
         availableTools[toolKey] = {
           ...toolDef,
-          name: t(`home.${toolKey}.title`, toolKey.charAt(0).toUpperCase() + toolKey.slice(1))
+          name: t(`${toolKey}.title`, toolKey.charAt(0).toUpperCase() + toolKey.slice(1))
         };
       }
     });
     return availableTools;
-  }, [t, isToolAvailable]);
+  }, [t, isToolAvailable, ready]);
 
   useEffect(() => {
     if (!endpointsLoading && selectedToolKey && !toolRegistry[selectedToolKey]) {

frontend/src/i18n.ts

@@ -57,6 +57,8 @@ i18n
   .use(initReactI18next)
   .init({
     fallbackLng: 'en-GB',
+    supportedLngs: Object.keys(supportedLanguages),
+    nonExplicitSupportedLngs: false,
     debug: process.env.NODE_ENV === 'development',
     
     interpolation: {
@@ -77,6 +79,12 @@ i18n
     },
   });
 
+// Map base language codes to specific locales
+i18n.services.languageUtils.formatLanguageCode = (lng) => {
+  if (lng === 'en') return 'en-GB';
+  return lng;
+};
+
 // Set document direction based on language
 i18n.on('languageChanged', (lng) => {
   const isRTL = rtlLanguages.includes(lng);