fix(ui): replace in compress/booklet front-end with Mantine's Checkbox component

- Updated `BookletImpositionSettings` to use Mantine's `Checkbox` for better UI consistency
- Replaced manual checkbox implementations with Mantine's `Checkbox` in `CompressSettings`
- Added labels and tooltips for enhanced accessibility and usability

Signed-off-by: Balázs Szücs <bszucs1209@gmail.com>

frontend/src/core/components/tools/bookletImposition/BookletImpositionSettings.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Stack, Text, Divider, Collapse, Button, NumberInput } from "@mantine/core";
+import { Stack, Text, Divider, Collapse, Button, NumberInput, Checkbox } from "@mantine/core";
 import { BookletImpositionParameters } from "@app/hooks/tools/bookletImposition/useBookletImpositionParameters";
 import ButtonSelector from "@app/components/shared/ButtonSelector";
 
@@ -21,28 +21,27 @@ const BookletImpositionSettings = ({ parameters, onParameterChange, disabled = f
 
       {/* Double Sided */}
       <Stack gap="sm">
-        <label
-          style={{ display: 'flex', alignItems: 'center', gap: 'var(--mantine-spacing-xs)' }}
-          title={t('bookletImposition.doubleSided.tooltip', 'Creates both front and back sides for proper booklet printing')}
-        >
-          <input
-            type="checkbox"
-            checked={parameters.doubleSided}
-            onChange={(e) => {
-              const isDoubleSided = e.target.checked;
-              onParameterChange('doubleSided', isDoubleSided);
-              // Reset to BOTH when turning double-sided back on
-              if (isDoubleSided) {
-                onParameterChange('duplexPass', 'BOTH');
-              } else {
-                // Default to FIRST pass when going to manual duplex
-                onParameterChange('duplexPass', 'FIRST');
-              }
-            }}
-            disabled={disabled}
-          />
-          <Text size="sm">{t('bookletImposition.doubleSided.label', 'Double-sided printing')}</Text>
-        </label>
+        <Checkbox
+          checked={parameters.doubleSided}
+          onChange={(event) => {
+            const isDoubleSided = event.currentTarget.checked;
+            onParameterChange('doubleSided', isDoubleSided);
+            // Reset to BOTH when turning double-sided back on
+            if (isDoubleSided) {
+              onParameterChange('duplexPass', 'BOTH');
+            } else {
+              // Default to FIRST pass when going to manual duplex
+              onParameterChange('duplexPass', 'FIRST');
+            }
+          }}
+          disabled={disabled}
+          label={
+            <div>
+              <Text size="sm">{t('bookletImposition.doubleSided.label', 'Double-sided printing')}</Text>
+              <Text size="xs" c="dimmed">{t('bookletImposition.doubleSided.tooltip', 'Creates both front and back sides for proper booklet printing')}</Text>
+            </div>
+          }
+        />
 
         {/* Manual Duplex Pass Selection - only show when double-sided is OFF */}
         {!parameters.doubleSided && (
@@ -90,47 +89,44 @@ const BookletImpositionSettings = ({ parameters, onParameterChange, disabled = f
         <Collapse in={advancedOpen}>
           <Stack gap="md" mt="md">
             {/* Right-to-Left Binding */}
-            <label
-              style={{ display: 'flex', alignItems: 'center', gap: 'var(--mantine-spacing-xs)' }}
-              title={t('bookletImposition.rtlBinding.tooltip', 'For Arabic, Hebrew, or other right-to-left languages')}
-            >
-              <input
-                type="checkbox"
-                checked={parameters.spineLocation === 'RIGHT'}
-                onChange={(e) => onParameterChange('spineLocation', e.target.checked ? 'RIGHT' : 'LEFT')}
-                disabled={disabled}
-              />
-              <Text size="sm">{t('bookletImposition.rtlBinding.label', 'Right-to-left binding')}</Text>
-            </label>
+            <Checkbox
+              checked={parameters.spineLocation === 'RIGHT'}
+              onChange={(event) => onParameterChange('spineLocation', event.currentTarget.checked ? 'RIGHT' : 'LEFT')}
+              disabled={disabled}
+              label={
+                <div>
+                  <Text size="sm">{t('bookletImposition.rtlBinding.label', 'Right-to-left binding')}</Text>
+                  <Text size="xs" c="dimmed">{t('bookletImposition.rtlBinding.tooltip', 'For Arabic, Hebrew, or other right-to-left languages')}</Text>
+                </div>
+              }
+            />
 
             {/* Add Border Option */}
-            <label
-              style={{ display: 'flex', alignItems: 'center', gap: 'var(--mantine-spacing-xs)' }}
-              title={t('bookletImposition.addBorder.tooltip', 'Adds borders around each page section to help with cutting and alignment')}
-            >
-              <input
-                type="checkbox"
-                checked={parameters.addBorder}
-                onChange={(e) => onParameterChange('addBorder', e.target.checked)}
-                disabled={disabled}
-              />
-              <Text size="sm">{t('bookletImposition.addBorder.label', 'Add borders around pages')}</Text>
-            </label>
+            <Checkbox
+              checked={parameters.addBorder}
+              onChange={(event) => onParameterChange('addBorder', event.currentTarget.checked)}
+              disabled={disabled}
+              label={
+                <div>
+                  <Text size="sm">{t('bookletImposition.addBorder.label', 'Add borders around pages')}</Text>
+                  <Text size="xs" c="dimmed">{t('bookletImposition.addBorder.tooltip', 'Adds borders around each page section to help with cutting and alignment')}</Text>
+                </div>
+              }
+            />
 
             {/* Gutter Margin */}
             <Stack gap="xs">
-              <label
-                style={{ display: 'flex', alignItems: 'center', gap: 'var(--mantine-spacing-xs)' }}
-                title={t('bookletImposition.addGutter.tooltip', 'Adds inner margin space for binding')}
-              >
-                <input
-                  type="checkbox"
-                  checked={parameters.addGutter}
-                  onChange={(e) => onParameterChange('addGutter', e.target.checked)}
-                  disabled={disabled}
-                />
-                <Text size="sm">{t('bookletImposition.addGutter.label', 'Add gutter margin')}</Text>
-              </label>
+              <Checkbox
+                checked={parameters.addGutter}
+                onChange={(event) => onParameterChange('addGutter', event.currentTarget.checked)}
+                disabled={disabled}
+                label={
+                  <div>
+                    <Text size="sm">{t('bookletImposition.addGutter.label', 'Add gutter margin')}</Text>
+                    <Text size="xs" c="dimmed">{t('bookletImposition.addGutter.tooltip', 'Adds inner margin space for binding')}</Text>
+                  </div>
+                }
+              />
 
               {parameters.addGutter && (
                 <NumberInput
@@ -147,23 +143,24 @@ const BookletImpositionSettings = ({ parameters, onParameterChange, disabled = f
             </Stack>
 
             {/* Flip on Short Edge */}
-            <label
-              style={{ display: 'flex', alignItems: 'center', gap: 'var(--mantine-spacing-xs)' }}
-              title={!parameters.doubleSided
-                ? t('bookletImposition.flipOnShortEdge.manualNote', 'Not needed in manual mode - you flip the stack yourself')
-                : t('bookletImposition.flipOnShortEdge.tooltip', 'Enable for short-edge duplex printing (automatic duplex only - ignored in manual mode)')
+            <Checkbox
+              checked={parameters.flipOnShortEdge}
+              onChange={(event) => onParameterChange('flipOnShortEdge', event.currentTarget.checked)}
+              disabled={disabled || !parameters.doubleSided}
+              label={
+                <div>
+                  <Text size="sm" c={!parameters.doubleSided ? "dimmed" : undefined}>
+                    {t('bookletImposition.flipOnShortEdge.label', 'Flip on short edge')}
+                  </Text>
+                  <Text size="xs" c="dimmed">
+                    {!parameters.doubleSided
+                      ? t('bookletImposition.flipOnShortEdge.manualNote', 'Not needed in manual mode - you flip the stack yourself')
+                      : t('bookletImposition.flipOnShortEdge.tooltip', 'Enable for short-edge duplex printing (automatic duplex only - ignored in manual mode)')
+                    }
+                  </Text>
+                </div>
               }
-            >
-              <input
-                type="checkbox"
-                checked={parameters.flipOnShortEdge}
-                onChange={(e) => onParameterChange('flipOnShortEdge', e.target.checked)}
-                disabled={disabled || !parameters.doubleSided}
-              />
-              <Text size="sm" c={!parameters.doubleSided ? "dimmed" : undefined}>
-                {t('bookletImposition.flipOnShortEdge.label', 'Flip on short edge')}
-              </Text>
-            </label>
+            />
 
             {/* Paper Size Note */}
             <Text size="xs" c="dimmed" fs="italic">

frontend/src/core/components/tools/compress/CompressSettings.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Stack, Text, NumberInput, Select, Divider } from "@mantine/core";
+import { Stack, Text, NumberInput, Select, Divider, Checkbox } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { CompressParameters } from "@app/hooks/tools/compress/useCompressParameters";
 import ButtonSelector from "@app/components/shared/ButtonSelector";
@@ -123,18 +123,19 @@ const CompressSettings = ({ parameters, onParameterChange, disabled = false }: C
 
       {/* Compression Options */}
       <Stack gap="sm">
-        <label
-          style={{ display: 'flex', alignItems: 'center', gap: '8px' }}
-          title="Converts all images in the PDF to grayscale, which can significantly reduce file size while maintaining readability"
-        >
-          <input
-            type="checkbox"
-            checked={parameters.grayscale}
-            onChange={(e) => onParameterChange('grayscale', e.target.checked)}
-            disabled={disabled}
-          />
-          <Text size="sm">{t("compress.grayscale.label", "Apply Grayscale for compression")}</Text>
-        </label>
+        <Checkbox
+          checked={parameters.grayscale}
+          onChange={(event) => onParameterChange('grayscale', event.currentTarget.checked)}
+          disabled={disabled}
+          label={
+            <div>
+              <Text size="sm">{t("compress.grayscale.label", "Apply Grayscale for compression")}</Text>
+              <Text size="xs" c="dimmed">
+                {t("compress.grayscale.description", "Converts all images in the PDF to grayscale, which can significantly reduce file size while maintaining readability")}
+              </Text>
+            </div>
+          }
+        />
       </Stack>
     </Stack>
   );