remove OCR language picker from settings code to make it a little easier to read. Added the link to docs on using different languages with OCR and more

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

@@ -833,7 +833,37 @@
     },
     "help": "Please read this documentation on how to use this for other languages and/or use not in docker",
     "credit": "This service uses qpdf and Tesseract for OCR.",
-    "submit": "Process PDF with OCR"
+    "submit": "Process PDF with OCR",
+    "settings": {
+      "title": "OCR Configuration",
+      "ocrMode": {
+        "label": "OCR Mode",
+        "auto": "Auto (skip text layers)",
+        "force": "Force (re-OCR all, replace text)",
+        "strict": "Strict (abort if text found)"
+      },
+      "languages": {
+        "label": "Languages",
+        "placeholder": "Select primary language for OCR"
+      },
+      "output": {
+        "label": "Output",
+        "searchablePdf": "Searchable PDF (sandwich)",
+        "sandwich": "Sandwich"
+      },
+      "additionalOptions": {
+        "label": "Additional Options",
+        "placeholder": "Select Options",
+        "sidecar": "Create sidecar text file",
+        "deskew": "Deskew pages",
+        "clean": "Clean input file",
+        "cleanFinal": "Clean final output"
+      }
+    },
+    "languagePicker": {
+      "additionalLanguages": "Looking for additional languages?",
+      "viewSetupGuide": "View setup guide →"
+    }
   },
   "extractImages": {
     "tags": "picture,photo,save,archive,zip,capture,grab",

frontend/src/components/shared/LanguageSelector.module.css

@@ -44,7 +44,7 @@
 
 /* Dark theme support */
 [data-mantine-color-scheme="dark"] .languageItem {
-  border-right-color: var(--mantine-color-dark-4);
+  border-right-color: var(--mantine-color-dark-3);
 }
 
 [data-mantine-color-scheme="dark"] .languageItem:nth-child(4n) {
@@ -52,11 +52,11 @@
 }
 
 [data-mantine-color-scheme="dark"] .languageItem:nth-child(2n) {
-  border-right-color: var(--mantine-color-dark-4);
+  border-right-color: var(--mantine-color-dark-3);
 }
 
 [data-mantine-color-scheme="dark"] .languageItem:nth-child(3n) {
-  border-right-color: var(--mantine-color-dark-4);
+  border-right-color: var(--mantine-color-dark-3);
 }
 
 /* Responsive text visibility */

frontend/src/components/shared/LanguageSelector.tsx

@@ -102,7 +102,7 @@ const LanguageSelector = () => {
           styles={{
             root: {
               border: 'none',
-              color: colorScheme === 'dark' ? theme.colors.gray[3] : theme.colors.gray[7],
+              color: colorScheme === 'dark' ? theme.colors.gray[1] : theme.colors.gray[7],
               transition: 'background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
               '&:hover': {
                 backgroundColor: colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
@@ -125,6 +125,7 @@ const LanguageSelector = () => {
           padding: '12px',
           borderRadius: '8px',
           boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
+          backgroundColor: colorScheme === 'dark' ? theme.colors.dark[6] : theme.white,
           border: colorScheme === 'dark' ? `1px solid ${theme.colors.dark[4]}` : `1px solid ${theme.colors.gray[3]}`,
         }}
       >
@@ -157,9 +158,9 @@ const LanguageSelector = () => {
                         colorScheme === 'dark' ? theme.colors.blue[8] : theme.colors.blue[1]
                       ) : 'transparent',
                       color: option.value === i18n.language ? (
-                        colorScheme === 'dark' ? theme.colors.blue[2] : theme.colors.blue[7]
+                        colorScheme === 'dark' ? theme.white : theme.colors.blue[9]
                       ) : (
-                        colorScheme === 'dark' ? theme.colors.gray[3] : theme.colors.gray[7]
+                        colorScheme === 'dark' ? theme.white : theme.colors.gray[7]
                       ),
                       transition: 'all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
                       '&:hover': {

frontend/src/components/tools/ocr/LanguagePicker.tsx

@@ -200,7 +200,7 @@ const LanguagePicker: React.FC<LanguagePickerProps> = ({
               fontSize: '12px'
             }}>
               <Text size="xs" c="dimmed" mb={4}>
-                Looking for additional languages?
+                {t('ocr.languagePicker.additionalLanguages', 'Looking for additional languages?')}
               </Text>
               <Text 
                 size="xs" 
@@ -208,7 +208,7 @@ const LanguagePicker: React.FC<LanguagePickerProps> = ({
                 style={{ textDecoration: 'underline', cursor: 'pointer' }}
                 onClick={() => window.open('https://docs.stirlingpdf.com/Advanced%20Configuration/OCR', '_blank')}
               >
-                View setup guide →
+                {t('ocr.languagePicker.viewSetupGuide', 'View setup guide →')}
               </Text>
             </Box>
           </Stack>

frontend/src/components/tools/ocr/OCRSettings.tsx

@@ -25,24 +25,24 @@ const OCRSettings: React.FC<OCRSettingsProps> = ({
 
   // Define the additional options available
   const additionalOptionsData = [
-    { value: 'sidecar', label: 'Create sidecar text file' },
+    { value: 'sidecar', label: t('ocr.settings.additionalOptions.sidecar', 'Create sidecar text file') },
-    { value: 'deskew', label: 'Deskew pages' },
+    { value: 'deskew', label: t('ocr.settings.additionalOptions.deskew', 'Deskew pages') },
-    { value: 'clean', label: 'Clean input file' },
+    { value: 'clean', label: t('ocr.settings.additionalOptions.clean', 'Clean input file') },
-    { value: 'cleanFinal', label: 'Clean final output' },
+    { value: 'cleanFinal', label: t('ocr.settings.additionalOptions.cleanFinal', 'Clean final output') },
   ];
 
   return (
     <Stack gap="md">
-      <Text size="sm" fw={500}>OCR Configuration</Text>
+      <Text size="sm" fw={500}>{t('ocr.settings.title', 'OCR Configuration')}</Text>
 
       <Select
-        label="OCR Mode"
+        label={t('ocr.settings.ocrMode.label', 'OCR Mode')}
         value={parameters.ocrType}
         onChange={(value) => onParameterChange('ocrType', value || 'skip-text')}
         data={[
-          { value: 'skip-text', label: 'Auto (skip text layers)' },
+          { value: 'skip-text', label: t('ocr.settings.ocrMode.auto', 'Auto (skip text layers)') },
-          { value: 'force-ocr', label: 'Force (re-OCR all, replace text)' },
+          { value: 'force-ocr', label: t('ocr.settings.ocrMode.force', 'Force (re-OCR all, replace text)') },
-          { value: 'Normal', label: 'Strict (abort if text found)' },
+          { value: 'Normal', label: t('ocr.settings.ocrMode.strict', 'Strict (abort if text found)') },
         ]}
         disabled={disabled}
       />
@@ -52,20 +52,20 @@ const OCRSettings: React.FC<OCRSettingsProps> = ({
       <LanguagePicker
         value={parameters.languages[0] || ''}
         onChange={(value) => onParameterChange('languages', [value])}
-        placeholder="Select primary language for OCR"
+        placeholder={t('ocr.settings.languages.placeholder', 'Select primary language for OCR')}
         disabled={disabled}
-        label="Languages"
+        label={t('ocr.settings.languages.label', 'Languages')}
       />
 
       <Divider />
 
       <Select
-        label="Output"
+        label={t('ocr.settings.output.label', 'Output')}
         value={parameters.ocrRenderType}
         onChange={(value) => onParameterChange('ocrRenderType', value || 'hocr')}
         data={[
-          { value: 'hocr', label: 'Searchable PDF (sandwich)' },
+          { value: 'hocr', label: t('ocr.settings.output.searchablePdf', 'Searchable PDF (sandwich)') },
-          { value: 'sandwich', label: 'Sandwich' },
+          { value: 'sandwich', label: t('ocr.settings.output.sandwich', 'Sandwich') },
         ]}
         disabled={disabled}
       />
@@ -73,15 +73,14 @@ const OCRSettings: React.FC<OCRSettingsProps> = ({
       <Divider />
 
       <MultiSelect
-        label="Additional Options"
+        label={t('ocr.settings.additionalOptions.label', 'Additional Options')}
-        placeholder="Select Options"
+        placeholder={t('ocr.settings.additionalOptions.placeholder', 'Select Options')}
         value={parameters.additionalOptions}
         onChange={(value) => onParameterChange('additionalOptions', value)}
         data={additionalOptionsData}
         disabled={disabled}
         clearable
         comboboxProps={{ position: 'top', middlewares: { flip: false, shift: false } }}
-
       />
     </Stack>
   );