Add missing translations, improve strings, and fix tooltips

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

@@ -1912,7 +1912,36 @@
     "tags": "trim,shrink,edit,shape",
     "title": "Crop",
     "header": "Crop PDF",
-    "submit": "Submit"
+    "submit": "Apply Crop",
+    "noFileSelected": "Select a PDF file to begin cropping",
+    "preview": {
+      "title": "Crop Area Selection"
+    },
+    "reset": "Reset to full PDF",
+    "coordinates": {
+      "title": "Position and Size",
+      "x": "X Position",
+      "y": "Y Position",
+      "width": "Width",
+      "height": "Height"
+    },
+    "error": {
+      "invalidArea": "Crop area extends beyond PDF boundaries",
+      "failed": "Failed to crop PDF"
+    },
+    "steps": {
+      "selectArea": "Select Crop Area"
+    },
+    "tooltip": {
+      "title": "How to Crop PDFs",
+      "description": "Select the area to crop from your PDF by dragging and resizing the blue overlay on the thumbnail.",
+      "drag": "Drag the overlay to move the crop area",
+      "resize": "Drag the corner and edge handles to resize",
+      "precision": "Use coordinate inputs for precise positioning"
+    },
+    "results": {
+      "title": "Crop Results"
+    }
   },
   "autoSplitPDF": {
     "tags": "QR-based,separate,scan-segment,organize",

frontend/src/components/tools/crop/CropSettings.tsx

@@ -195,12 +195,12 @@ const CropSettings = ({ parameters, disabled = false }: CropSettingsProps) => {
       {/* Manual Coordinate Input */}
       <Stack gap="xs">
         <Text size="sm" fw={500}>
-          {t("crop.coordinates.title", "Precise Coordinates (PDF Points)")}
+          {t("crop.coordinates.title", "Position and Size")}
         </Text>
 
         <Group grow>
           <NumberInput
-            label={t("crop.coordinates.x", "X (Left)")}
+            label={t("crop.coordinates.x", "X Position")}
             value={Math.round(cropArea.x * 10) / 10}
             onChange={(value) => handleCoordinateChange('x', value)}
             disabled={disabled}
@@ -211,7 +211,7 @@ const CropSettings = ({ parameters, disabled = false }: CropSettingsProps) => {
             size="xs"
           />
           <NumberInput
-            label={t("crop.coordinates.y", "Y (Bottom)")}
+            label={t("crop.coordinates.y", "Y Position")}
             value={Math.round(cropArea.y * 10) / 10}
             onChange={(value) => handleCoordinateChange('y', value)}
             disabled={disabled}

frontend/src/components/tooltips/useCropTooltips.ts

@@ -0,0 +1,21 @@
+import { useTranslation } from 'react-i18next';
+
+export function useCropTooltips() {
+  const { t } = useTranslation();
+
+  return {
+    header: {
+      title: t("crop.tooltip.title", "How to Crop PDFs")
+    },
+    tips: [
+      {
+        description: t("crop.tooltip.description", "Select the area to crop from your PDF by dragging and resizing the blue overlay on the thumbnail."),
+        bullets: [
+          t("crop.tooltip.drag", "Drag the overlay to move the crop area"),
+          t("crop.tooltip.resize", "Drag the corner and edge handles to resize"),
+          t("crop.tooltip.precision", "Use coordinate inputs for precise positioning"),
+        ]
+      }
+    ]
+  };
+}

frontend/src/tools/Crop.tsx

@@ -4,6 +4,7 @@ import CropSettings from "../components/tools/crop/CropSettings";
 import { useCropParameters } from "../hooks/tools/crop/useCropParameters";
 import { useCropOperation } from "../hooks/tools/crop/useCropOperation";
 import { useBaseTool } from "../hooks/tools/shared/useBaseTool";
+import { useCropTooltips } from "../components/tooltips/useCropTooltips";
 import { BaseToolProps, ToolComponent } from "../types/tool";
 
 const Crop = (props: BaseToolProps) => {
@@ -16,6 +17,8 @@ const Crop = (props: BaseToolProps) => {
     props
   );
 
+  const tooltips = useCropTooltips();
+
   return createToolFlow({
     files: {
       selectedFiles: base.selectedFiles,
@@ -27,22 +30,7 @@ const Crop = (props: BaseToolProps) => {
         title: t("crop.steps.selectArea", "Select Crop Area"),
         isCollapsed: !base.hasFiles, // Collapsed until files selected
         onCollapsedClick: base.hasResults ? base.handleSettingsReset : undefined,
-        tooltip: {
+        tooltip: tooltips,
-          content: (
-            <div>
-              <p>{t("crop.tooltip.description", "Select the area to crop from your PDF by dragging and resizing the red overlay on the thumbnail.")}</p>
-            </div>
-          ),
-          tips: [
-            t("crop.tooltip.drag", "Drag the overlay to move the crop area"),
-            t("crop.tooltip.resize", "Drag the corner and edge handles to resize"),
-            t("crop.tooltip.precision", "Use coordinate inputs for precise positioning"),
-            t("crop.tooltip.constraints", "Crop area is automatically constrained to PDF bounds")
-          ],
-          header: {
-            title: t("crop.tooltip.title", "How to Crop PDFs"),
-          }
-        },
         content: (
           <CropSettings
             parameters={base.params}
@@ -52,7 +40,7 @@ const Crop = (props: BaseToolProps) => {
       },
     ],
     executeButton: {
-      text: t("crop.submit", "Crop PDF"),
+      text: t("crop.submit", "Apply Crop"),
       loadingText: t("loading"),
       onClick: base.handleExecute,
       isVisible: !base.hasResults,