[V2] feat(flatten): add optional rendering DPI parameter to settings in flatten (#5276)

# Description of Changes

This pull request adds support for specifying a custom rendering DPI for
PDF flattening, allowing users to control the output sharpness and file
size. The changes update the UI to include a new DPI input (when
appropriate), extend parameter handling, and ensure the DPI value is
passed to the backend if provided.

**User interface enhancements:**

* Added a `NumberInput` field in `FlattenSettings.tsx` for users to
specify the rendering DPI, shown only when "Flatten only forms" is not
selected. The input includes label, help text, placeholder, and value
constraints.
* Updated the English locale file to add translation strings for the
rendering DPI input label, help text, and placeholder.

**Parameter and data handling:**

* Extended the `FlattenParameters` interface and default parameters to
include an optional `renderDpi` property.
* Modified the form data builder in `useFlattenOperation.ts` to append
the `renderDpi` value to the request if specified.
* Imported `NumberInput` from the Mantine UI library to support the new
DPI input field in the settings component.
<img width="363" height="998" alt="image"
src="https://github.com/user-attachments/assets/9a59f379-f1d3-4827-8a9c-f34c0bfcfada"
/>


<!--
Please provide a summary of the changes, including:

- What was changed
- Why the change was made
- Any challenges encountered

Closes #(issue_number)
-->

---

## Checklist

### General

- [X] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [X] I have read the [Stirling-PDF Developer
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md)
(if applicable)
- [ ] I have read the [How to add new languages to
Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md)
(if applicable)
- [X] I have performed a self-review of my own code
- [X] My changes generate no new warnings

### Documentation

- [ ] I have updated relevant docs on [Stirling-PDF's doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
(if functionality has heavily changed)
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

### Translations (if applicable)

- [ ] I ran
[`scripts/counter_translation.py`](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/docs/counter_translation.md)

### UI Changes (if applicable)

- [X] Screenshots or videos demonstrating the UI changes are attached
(e.g., as comments or direct attachments in the PR)

### Testing (if applicable)

- [X] I have tested my changes locally. Refer to the [Testing
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md#6-testing)
for more details.

---------

Signed-off-by: Balázs Szücs <[email protected]>
Co-authored-by: Anthony Stirling <[email protected]>

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

@@ -2389,6 +2389,11 @@ note = "Flattening removes interactive elements from the PDF, making them non-ed
 label = "Flatten only forms"
 desc = "Only flatten form fields, leaving other interactive elements intact"
 
+[flatten.renderDpi]
+label = "Rendering DPI (optional, recommended 150 DPI)"
+help = "Leave blank to use the system default. Higher DPI sharpens output but increases processing time and file size."
+placeholder = "e.g. 150"
+
 [flatten.results]
 title = "Flatten Results"
 

frontend/src/core/components/tools/flatten/FlattenSettings.tsx

@@ -1,4 +1,4 @@
-import { Stack, Text, Checkbox } from "@mantine/core";
+import { Stack, Text, Checkbox, NumberInput } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { FlattenParameters } from "@app/hooks/tools/flatten/useFlattenParameters";
 
@@ -28,6 +28,20 @@ const FlattenSettings = ({ parameters, onParameterChange, disabled = false }: Fl
           }
         />
       </Stack>
+
+      {!parameters.flattenOnlyForms && (
+        <NumberInput
+          label={t('flatten.renderDpi.label', 'Rendering DPI')}
+          description={t('flatten.renderDpi.help', 'Leave blank to use the system default. Higher DPI sharpens output but increases processing time and file size.')}
+          placeholder={t('flatten.renderDpi.placeholder', 'e.g. 150')}
+          value={parameters.renderDpi ?? undefined}
+          onChange={(value) => onParameterChange('renderDpi', value != null && value !== '' ? Number(value) : undefined)}
+          disabled={disabled}
+          min={72}
+          max={2400}
+          step={50}
+        />
+      )}
     </Stack>
   );
 };

frontend/src/core/hooks/tools/flatten/useFlattenOperation.ts

@@ -8,6 +8,9 @@ export const buildFlattenFormData = (parameters: FlattenParameters, file: File):
   const formData = new FormData();
   formData.append('fileInput', file);
   formData.append('flattenOnlyForms', parameters.flattenOnlyForms.toString());
+  if (parameters.renderDpi != null) {
+    formData.append('renderDpi', parameters.renderDpi.toString());
+  }
   return formData;
 };
 

frontend/src/core/hooks/tools/flatten/useFlattenParameters.ts

@@ -3,10 +3,12 @@ import { useBaseParameters, BaseParametersHook } from '@app/hooks/tools/shared/u
 
 export interface FlattenParameters extends BaseParameters {
   flattenOnlyForms: boolean;
+  renderDpi?: number;
 }
 
 export const defaultParameters: FlattenParameters = {
   flattenOnlyForms: false,
+  renderDpi: undefined,
 };
 
 export type FlattenParametersHook = BaseParametersHook<FlattenParameters>;