chore(options): improve media layout slightly

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

@@ -1255,12 +1255,15 @@
   },
   "images": {
     "images_section_title": "Images",
-    "download_images_automatically": "Download images automatically for offline use.",
-    "download_images_description": "Pasted HTML can contain references to online images, Trilium will find those references and download the images so that they are available offline.",
-    "enable_image_compression": "Enable image compression",
-    "max_image_dimensions": "Max width / height of an image (image will be resized if it exceeds this setting).",
+    "download_images_automatically": "Download images automatically",
+    "download_images_description": "Download referenced online images from pasted HTML so they are available offline.",
+    "enable_image_compression": "Image compression",
+    "enable_image_compression_description": "Compress and resize images when they are uploaded or pasted.",
+    "max_image_dimensions": "Max image dimensions",
+    "max_image_dimensions_description": "Images exceeding this size will be resized automatically.",
     "max_image_dimensions_unit": "pixels",
-    "jpeg_quality_description": "JPEG quality (10 - worst quality, 100 - best quality, 50 - 85 is recommended)",
+    "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.",

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

@@ -1,30 +1,41 @@
 .option-row {
     border-bottom: 1px solid var(--main-border-color);
     display: flex;
-    align-items: center;
+    flex-direction: column;
     padding: 0.5em 0;
 }
 
-.option-row > label {
+.option-row-main {
+    display: flex;
+    align-items: center;
+}
+
+.option-row-main > label {
     width: 40%;
     margin-bottom: 0 !important;
     flex-shrink: 0;
 }
 
-.option-row > select,
-.option-row > .dropdown {
+.option-row-main > select,
+.option-row-main > .dropdown {
     width: 60%;
 }
 
-.option-row > .dropdown button {
+.option-row-main > .dropdown button {
     width: 100%;
     text-align: start;
 }
 
+.option-row-description {
+    line-height: 1.3;
+    margin-top: 0.25em;
+    color: var(--muted-text-color);
+}
+
 .option-row:last-of-type {
     border-bottom: unset;
 }
 
-.option-row.centered {
+.option-row.centered .option-row-main {
     justify-content: center;
 }

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

@@ -5,18 +5,22 @@ import { useUniqueName } from "../../../react/hooks";
 interface OptionsRowProps {
     name: string;
     label?: string;
+    description?: string;
     children: VNode;
     centered?: boolean;
 }
 
-export default function OptionsRow({ name, label, children, centered }: OptionsRowProps) {
+export default function OptionsRow({ name, label, description, children, centered }: OptionsRowProps) {
     const id = useUniqueName(name);
     const childWithId = cloneElement(children, { id });
 
     return (
         <div className={`option-row ${centered ? "centered" : ""}`}>
-            {label && <label for={id}>{label}</label>}
-            {childWithId}
+            <div className="option-row-main">
+                {label && <label for={id}>{label}</label>}
+                {childWithId}
+            </div>
+            {description && <small className="option-row-description">{description}</small>}
         </div>
     );
 }

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

@@ -1,48 +1,51 @@
 import { t } from "../../../services/i18n";
-import FormCheckbox from "../../react/FormCheckbox";
-import FormGroup from "../../react/FormGroup";
 import { 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() {
     const [ downloadImagesAutomatically, setDownloadImagesAutomatically ] = useTriliumOptionBool("downloadImagesAutomatically");
     const [ compressImages, setCompressImages ] = useTriliumOptionBool("compressImages");
-    const [ imageMaxWidthHeight, setImageMaxWidthHeight ] = useTriliumOption("imageMaxWidthHeight"); 
+    const [ imageMaxWidthHeight, setImageMaxWidthHeight ] = useTriliumOption("imageMaxWidthHeight");
     const [ imageJpegQuality, setImageJpegQuality ] = useTriliumOption("imageJpegQuality");
 
     return (
         <OptionsSection title={t("images.images_section_title")}>
-            <FormGroup name="download-images-automatically" description={t("images.download_images_description")}>
-                <FormCheckbox                    
-                    label={t("images.download_images_automatically")}
-                    currentValue={downloadImagesAutomatically} onChange={setDownloadImagesAutomatically}
+            <OptionsRow name="download-images-automatically" label={t("images.download_images_automatically")} description={t("images.download_images_description")}>
+                <FormToggle
+                    switchOnName="" switchOffName=""
+                    currentValue={downloadImagesAutomatically}
+                    onChange={setDownloadImagesAutomatically}
                 />
-            </FormGroup>
+            </OptionsRow>
 
-            <hr/>
+            <OptionsRow name="image-compression-enabled" label={t("images.enable_image_compression")} description={t("images.enable_image_compression_description")}>
+                <FormToggle
+                    switchOnName="" switchOffName=""
+                    currentValue={compressImages}
+                    onChange={setCompressImages}
+                />
+            </OptionsRow>
 
-            <FormCheckbox
-                name="image-compression-enabled"
-                label={t("images.enable_image_compression")}
-                currentValue={compressImages} onChange={setCompressImages}
-            />
-
-            <FormGroup name="image-max-width-height" label={t("images.max_image_dimensions")} disabled={!compressImages}>
+            <OptionsRow name="image-max-width-height" label={t("images.max_image_dimensions")} description={t("images.max_image_dimensions_description")}>
                 <FormTextBoxWithUnit
                     type="number" min="1"
+                    disabled={!compressImages}
                     unit={t("images.max_image_dimensions_unit")}
                     currentValue={imageMaxWidthHeight} onChange={setImageMaxWidthHeight}
                 />
-            </FormGroup>
+            </OptionsRow>
 
-            <FormGroup name="image-jpeg-quality" label={t("images.jpeg_quality_description")} disabled={!compressImages}>
-                <FormTextBoxWithUnit                    
+            <OptionsRow name="image-jpeg-quality" label={t("images.jpeg_quality")} description={t("images.jpeg_quality_description")}>
+                <FormTextBoxWithUnit
                     min="10" max="100" type="number"
+                    disabled={!compressImages}
                     unit={t("units.percentage")}
                     currentValue={imageJpegQuality} onChange={setImageJpegQuality}
                 />
-            </FormGroup>
+            </OptionsRow>
         </OptionsSection>
     );
 }