[V2] refactor(tooltips): add merge tooltips header for consistency, and update other tooltips (#4895)

# Description of Changes

Note on tooltips: I'll do more PRs on tooltips, however this has
priority, hence I submitted this for now.


#### Before:

<img width="758" height="721" alt="image"
src="https://github.com/user-attachments/assets/ce3166d2-c681-447e-82df-68fe6d18669d"
/>

<img width="782" height="485" alt="image"
src="https://github.com/user-attachments/assets/48970a4c-9911-4ade-9346-c33c5a6a319f"
/>

<img width="782" height="602" alt="image"
src="https://github.com/user-attachments/assets/9f77648d-4d1a-4e4b-93af-eaab6db849ff"
/>

<img width="782" height="602" alt="image"
src="https://github.com/user-attachments/assets/ae653534-bf04-47a0-8aab-0bb5b9c3ecef"
/>

#### After:
<img width="758" height="721" alt="image"
src="https://github.com/user-attachments/assets/8d45e876-a0df-4fe3-89a8-5184492db204"
/>

<img width="782" height="602" alt="image"
src="https://github.com/user-attachments/assets/550ee105-1286-4072-9f55-46255b3fbe80"
/>

<img width="782" height="602" alt="image"
src="https://github.com/user-attachments/assets/fba7ea93-73fe-4529-84fe-c37816375a9e"
/>
<img width="782" height="602" alt="image"
src="https://github.com/user-attachments/assets/ca452e77-b58b-4a5b-8e97-e6ccef4cf500"
/>


<!--
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)

- [ ] 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]>

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

@@ -918,6 +918,11 @@
     },
     "error": {
       "failed": "An error occurred while merging the PDFs."
+    },
+    "tooltip": {
+      "header": {
+        "title": "Merge Settings Overview"
+      }
     }
   },
   "split": {
@@ -2372,6 +2377,14 @@
       "title": "About Remove Annotations",
       "description": "This tool will remove all annotations (comments, highlights, notes, etc.) from your PDF documents."
     },
+    "tooltip": {
+      "header": {
+        "title": "About Remove Annotations"
+      },
+      "description": {
+        "title": "What it does"
+      }
+    },
     "error": {
       "failed": "An error occurred while removing annotations from the PDF."
     }
@@ -2834,6 +2847,9 @@
       "header": {
         "title": "How Auto-Rename Works"
       },
+      "description": {
+        "title": "What it does"
+      },
       "howItWorks": {
         "title": "Smart Renaming",
         "text": "Automatically finds the title from your PDF content and uses it as the filename.",
@@ -2841,6 +2857,9 @@
         "bullet2": "Creates a clean, valid filename from the detected title",
         "bullet3": "Keeps the original name if no suitable title is found"
       }
+    },
+    "settings": {
+      "title": "About"
     }
   },
   "adjust-contrast": {
@@ -4934,6 +4953,14 @@
     "addMoreFiles": "Add more files...",
     "selectedFiles": "Selected Files",
     "submit": "Add Attachments",
+    "tooltip": {
+      "header": {
+        "title": "About Add Attachments"
+      },
+      "description": {
+        "title": "What it does"
+      }
+    },
     "results": {
       "title": "Attachment Results"
     },

frontend/src/core/components/tools/addAttachments/AddAttachmentsSettings.tsx

@@ -4,7 +4,7 @@
  * Allows selecting files to attach to PDFs.
  */
 
-import { Stack, Text, Group, ActionIcon, Alert, ScrollArea, Button } from "@mantine/core";
+import { Stack, Text, Group, ActionIcon, ScrollArea, Button } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { AddAttachmentsParameters } from "@app/hooks/tools/addAttachments/useAddAttachmentsParameters";
 import LocalIcon from "@app/components/shared/LocalIcon";
@@ -20,16 +20,7 @@ const AddAttachmentsSettings = ({ parameters, onParameterChange, disabled = fals
 
   return (
     <Stack gap="md">
-      <Alert color="blue" variant="light">
-        <Text size="sm">
-          {t("AddAttachmentsRequest.info", "Select files to attach to your PDF. These files will be embedded and accessible through the PDF's attachment panel.")}
-        </Text>
-      </Alert>
-
       <Stack gap="xs">
-        <Text size="sm" fw={500}>
-          {t("AddAttachmentsRequest.selectFiles", "Select Files to Attach")}
-        </Text>
         <input
           type="file"
           multiple

frontend/src/core/components/tools/removeAnnotations/RemoveAnnotationsSettings.tsx

@@ -1,24 +1,9 @@
-import { useTranslation } from 'react-i18next';
+import { Stack } from '@mantine/core';
-import { Stack, Text, Alert } from '@mantine/core';
-import LocalIcon from '@app/components/shared/LocalIcon';
 
 const RemoveAnnotationsSettings = () => {
-  const { t } = useTranslation();
-
   return (
     <Stack gap="md">
-      <Alert
+      {/* No settings needed for this tool - description is in tooltip */}
-        icon={<LocalIcon icon="info-rounded" width="1.2rem" height="1.2rem" />}
-        title={t('removeAnnotations.info.title', 'About Remove Annotations')}
-        color="blue"
-        variant="light"
-      >
-        <Text size="sm">
-          {t('removeAnnotations.info.description',
-            'This tool will remove all annotations (comments, highlights, notes, etc.) from your PDF documents.'
-          )}
-        </Text>
-      </Alert>
     </Stack>
   );
 };

frontend/src/core/components/tooltips/useAddAttachmentsTips.ts

@@ -0,0 +1,18 @@
+import { useTranslation } from 'react-i18next';
+import { TooltipContent } from '@app/types/tips';
+
+export const useAddAttachmentsTips = (): TooltipContent => {
+  const { t } = useTranslation();
+
+  return {
+    header: {
+      title: t("AddAttachmentsRequest.tooltip.header.title", "About Add Attachments")
+    },
+    tips: [
+      {
+        title: t("AddAttachmentsRequest.tooltip.description.title", "What it does"),
+        description: t("AddAttachmentsRequest.info", "Select files to attach to your PDF. These files will be embedded and accessible through the PDF's attachment panel."),
+      }
+    ]
+  };
+};

frontend/src/core/components/tooltips/useAutoRenameTips.ts

@@ -9,6 +9,10 @@ export const useAutoRenameTips = (): TooltipContent => {
       title: t("auto-rename.tooltip.header.title", "How Auto-Rename Works")
     },
     tips: [
+      {
+        title: t("auto-rename.tooltip.description.title", "What it does"),
+        description: t("auto-rename.description", "Automatically finds the title from your PDF content and uses it as the filename."),
+      },
       {
         title: t("auto-rename.tooltip.howItWorks.title", "Smart Renaming"),
         bullets: [

frontend/src/core/components/tooltips/useMergeTips.tsx

@@ -5,6 +5,9 @@ export const useMergeTips = (): TooltipContent => {
   const { t } = useTranslation();
 
   return {
+    header: {
+      title: t('merge.tooltip.header.title', 'Merge Settings Overview')
+    },
     tips: [
       {
         title: t('merge.removeDigitalSignature.tooltip.title', 'Remove Digital Signature'),

frontend/src/core/components/tooltips/useRemoveAnnotationsTips.ts

@@ -0,0 +1,20 @@
+import { useTranslation } from 'react-i18next';
+import { TooltipContent } from '@app/types/tips';
+
+export const useRemoveAnnotationsTips = (): TooltipContent => {
+  const { t } = useTranslation();
+
+  return {
+    header: {
+      title: t("removeAnnotations.tooltip.header.title", "About Remove Annotations")
+    },
+    tips: [
+      {
+        title: t("removeAnnotations.tooltip.description.title", "What it does"),
+        description: t('removeAnnotations.info.description',
+          'This tool will remove all annotations (comments, highlights, notes, etc.) from your PDF documents.'
+        ),
+      }
+    ]
+  };
+};

frontend/src/core/tools/AddAttachments.tsx

@@ -8,10 +8,12 @@ import { useAddAttachmentsParameters } from "@app/hooks/tools/addAttachments/use
 import { useAddAttachmentsOperation } from "@app/hooks/tools/addAttachments/useAddAttachmentsOperation";
 import { useAccordionSteps } from "@app/hooks/tools/shared/useAccordionSteps";
 import AddAttachmentsSettings from "@app/components/tools/addAttachments/AddAttachmentsSettings";
+import { useAddAttachmentsTips } from "@app/components/tooltips/useAddAttachmentsTips";
 
 const AddAttachments = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   const { t } = useTranslation();
   const { selectedFiles } = useFileSelection();
+  const addAttachmentsTips = useAddAttachmentsTips();
 
   const params = useAddAttachmentsParameters();
   const operation = useAddAttachmentsOperation();
@@ -64,6 +66,7 @@ const AddAttachments = ({ onPreviewFile, onComplete, onError }: BaseToolProps) =
       isCollapsed: accordion.getCollapsedState(AddAttachmentsStep.ATTACHMENTS),
       onCollapsedClick: () => accordion.handleStepToggle(AddAttachmentsStep.ATTACHMENTS),
       isVisible: true,
+      tooltip: addAttachmentsTips,
       content: (
         <AddAttachmentsSettings
           parameters={params.parameters}

frontend/src/core/tools/AutoRename.tsx

@@ -9,21 +9,28 @@ import { useAutoRenameTips } from "@app/components/tooltips/useAutoRenameTips";
 
 const AutoRename =(props: BaseToolProps) => {
   const { t } = useTranslation();
+  const autoRenameTips = useAutoRenameTips();
 
   const base = useBaseTool(
-    '"auto-rename-pdf-file',
+    'auto-rename-pdf-file',
     useAutoRenameParameters,
     useAutoRenameOperation,
     props
   );
 
 return createToolFlow({
-    title: { title:t("auto-rename.title", "Auto Rename PDF"), description: t("auto-rename.description", "Auto Rename PDF"), tooltip: useAutoRenameTips()},
     files: {
       selectedFiles: base.selectedFiles,
       isCollapsed: base.hasResults,
     },
-    steps: [],
+    steps: [
+      {
+        title: t("auto-rename.settings.title", "About"),
+        isCollapsed: false,
+        tooltip: autoRenameTips,
+        content: null,
+      },
+    ],
     executeButton: {
       text: t("auto-rename.submit", "Auto Rename"),
       isVisible: !base.hasResults,

frontend/src/core/tools/RemoveAnnotations.tsx

@@ -5,9 +5,11 @@ import { useRemoveAnnotationsParameters } from "@app/hooks/tools/removeAnnotatio
 import { useRemoveAnnotationsOperation } from "@app/hooks/tools/removeAnnotations/useRemoveAnnotationsOperation";
 import { useBaseTool } from "@app/hooks/tools/shared/useBaseTool";
 import { BaseToolProps, ToolComponent } from "@app/types/tool";
+import { useRemoveAnnotationsTips } from "@app/components/tooltips/useRemoveAnnotationsTips";
 
 const RemoveAnnotations = (props: BaseToolProps) => {
   const { t } = useTranslation();
+  const removeAnnotationsTips = useRemoveAnnotationsTips();
 
   const base = useBaseTool(
     'removeAnnotations',
@@ -26,6 +28,7 @@ const RemoveAnnotations = (props: BaseToolProps) => {
         title: t("removeAnnotations.settings.title", "Settings"),
         isCollapsed: base.settingsCollapsed,
         onCollapsedClick: base.settingsCollapsed ? base.handleSettingsReset : undefined,
+        tooltip: removeAnnotationsTips,
         content: <RemoveAnnotationsSettings />,
       },
     ],