chore(options): start adding options for OCR

apps/client/src/translations/en/translation.json

@@ -1265,13 +1265,15 @@
     "jpeg_quality": "JPEG quality",
     "jpeg_quality_description": "Recommended range is 50–85. Lower values reduce file size, higher values preserve detail.",
     "ocr_section_title": "Optical Character Recognition (OCR)",
-    "enable_ocr": "Enable OCR for images",
-    "ocr_description": "Automatically extract text from images using OCR technology. This makes image content searchable within your notes.",
-    "ocr_auto_process": "Automatically process new images with OCR",
-    "ocr_language": "OCR Language",
-    "ocr_min_confidence": "Minimum confidence threshold",
+    "enable_ocr": "Enable OCR",
+    "ocr_description": "Extract text from images to make their content searchable within your notes.",
+    "ocr_auto_process": "Auto-process new images",
+    "ocr_auto_process_description": "Automatically run OCR on newly uploaded or pasted images.",
+    "ocr_language": "Language",
+    "ocr_language_description": "Tesseract language code. Use + for multiple languages (e.g. eng+deu).",
+    "ocr_min_confidence": "Minimum confidence",
     "ocr_confidence_unit": "(0.0-1.0)",
-    "ocr_confidence_description": "Only extract text with confidence above this threshold. Lower values include more text but may be less accurate.",
+    "ocr_confidence_description": "Only extract text above this confidence threshold. Lower values include more text but may be less accurate.",
     "batch_ocr_title": "Process Existing Images",
     "batch_ocr_description": "Process all existing images in your notes with OCR. This may take some time depending on the number of images.",
     "batch_ocr_start": "Start Batch OCR Processing",

apps/client/src/widgets/type_widgets/options/components/OptionsRow.css

@@ -11,7 +11,7 @@
 }
 
 .option-row-main > label {
-    width: 40%;
+    width: 45%;
     margin-bottom: 0 !important;
     flex-shrink: 0;
 }

apps/client/src/widgets/type_widgets/options/media.tsx

@@ -1,11 +1,20 @@
 import { t } from "../../../services/i18n";
-import { FormTextBoxWithUnit } from "../../react/FormTextBox";
+import FormTextBox, { FormTextBoxWithUnit } from "../../react/FormTextBox";
 import FormToggle from "../../react/FormToggle";
 import { useTriliumOption, useTriliumOptionBool } from "../../react/hooks";
 import OptionsRow from "./components/OptionsRow";
 import OptionsSection from "./components/OptionsSection";
 
 export default function MediaSettings() {
+    return (
+        <>
+            <ImageSettings />
+            <OcrSettings />
+        </>
+    );
+}
+
+function ImageSettings() {
     const [ downloadImagesAutomatically, setDownloadImagesAutomatically ] = useTriliumOptionBool("downloadImagesAutomatically");
     const [ compressImages, setCompressImages ] = useTriliumOptionBool("compressImages");
     const [ imageMaxWidthHeight, setImageMaxWidthHeight ] = useTriliumOption("imageMaxWidthHeight");
@@ -49,3 +58,49 @@ export default function MediaSettings() {
         </OptionsSection>
     );
 }
+
+function OcrSettings() {
+    const [ ocrEnabled, setOcrEnabled ] = useTriliumOptionBool("ocrEnabled");
+    const [ ocrAutoProcess, setOcrAutoProcess ] = useTriliumOptionBool("ocrAutoProcessImages");
+    const [ ocrLanguage, setOcrLanguage ] = useTriliumOption("ocrLanguage");
+    const [ ocrMinConfidence, setOcrMinConfidence ] = useTriliumOption("ocrMinConfidence");
+
+    return (
+        <OptionsSection title={t("images.ocr_section_title")}>
+            <OptionsRow name="ocr-enabled" label={t("images.enable_ocr")} description={t("images.ocr_description")}>
+                <FormToggle
+                    switchOnName="" switchOffName=""
+                    currentValue={ocrEnabled}
+                    onChange={setOcrEnabled}
+                />
+            </OptionsRow>
+
+            <OptionsRow name="ocr-auto-process" label={t("images.ocr_auto_process")} description={t("images.ocr_auto_process_description")}>
+                <FormToggle
+                    switchOnName="" switchOffName=""
+                    currentValue={ocrAutoProcess}
+                    onChange={setOcrAutoProcess}
+                    disabled={!ocrEnabled}
+                />
+            </OptionsRow>
+
+            <OptionsRow name="ocr-language" label={t("images.ocr_language")} description={t("images.ocr_language_description")}>
+                <FormTextBox
+                    disabled={!ocrEnabled}
+                    currentValue={ocrLanguage}
+                    onChange={setOcrLanguage}
+                />
+            </OptionsRow>
+
+            <OptionsRow name="ocr-min-confidence" label={t("images.ocr_min_confidence")} description={t("images.ocr_confidence_description")}>
+                <FormTextBoxWithUnit
+                    type="number" min="0" max="1" step="0.05"
+                    disabled={!ocrEnabled}
+                    unit={t("images.ocr_confidence_unit")}
+                    currentValue={ocrMinConfidence}
+                    onChange={setOcrMinConfidence}
+                />
+            </OptionsRow>
+        </OptionsSection>
+    );
+}