From a63708bb3f26d91a083ab6c752e0d59e3db84933 Mon Sep 17 00:00:00 2001
From: Connor Yoh <connor@stirlingpdf.com>
Date: Fri, 5 Sep 2025 15:09:53 +0100
Subject: [PATCH] Fixed title to also have a description

---
 .../public/locales/en-GB/translation.json     |  1 +
 .../tools/shared/ToolWorkflowTitle.tsx        | 44 +++++++++----------
 .../components/tooltips/useAutoRenameTips.ts  |  3 +-
 frontend/src/tools/AutoRename.tsx             |  2 +-
 4 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/frontend/public/locales/en-GB/translation.json b/frontend/public/locales/en-GB/translation.json
index e32fae6b7..b5a9b1592 100644
--- a/frontend/public/locales/en-GB/translation.json
+++ b/frontend/public/locales/en-GB/translation.json
@@ -1469,6 +1469,7 @@
     "tags": "auto-detect,header-based,organize,relabel",
     "title": "Auto Rename",
     "header": "Auto Rename PDF",
+    "description": "Automatically finds the best title from your PDF content and uses it as the filename.",
     "submit": "Auto Rename",
     "files": {
       "placeholder": "Select a PDF file in the main view to get started"
diff --git a/frontend/src/components/tools/shared/ToolWorkflowTitle.tsx b/frontend/src/components/tools/shared/ToolWorkflowTitle.tsx
index 6ed949442..c11726fdb 100644
--- a/frontend/src/components/tools/shared/ToolWorkflowTitle.tsx
+++ b/frontend/src/components/tools/shared/ToolWorkflowTitle.tsx
@@ -5,6 +5,7 @@ import { Tooltip } from '../../shared/Tooltip';
 
 export interface ToolWorkflowTitleProps {
   title: string;
+  description?: string;
   tooltip?: {
     content?: React.ReactNode;
     tips?: any[];
@@ -15,10 +16,19 @@ export interface ToolWorkflowTitleProps {
   };
 }
 
-export function ToolWorkflowTitle({ title, tooltip }: ToolWorkflowTitleProps) {
-  if (tooltip) {
-    return (
-      <>
+export function ToolWorkflowTitle({ title, tooltip, description }: ToolWorkflowTitleProps) {
+  const titleContent = (
+    <Flex align="center" gap="xs" onClick={(e) => e.stopPropagation()}>
+      <Text fw={500} size="lg" p="xs">
+        {title}
+      </Text>
+      {tooltip && <LocalIcon icon="gpp-maybe-outline-rounded" width="1.25rem" height="1.25rem" style={{ color: 'var(--icon-files-color)' }} />}
+    </Flex>
+  );
+
+  return (
+    <>
+      {tooltip ? (
         <Flex justify="center" w="100%">
           <Tooltip
             content={tooltip.content}
@@ -26,27 +36,17 @@ export function ToolWorkflowTitle({ title, tooltip }: ToolWorkflowTitleProps) {
             header={tooltip.header}
             sidebarTooltip={true}
           >
-            <Flex align="center" gap="xs" onClick={(e) => e.stopPropagation()}>
-              <Text fw={500} size="xl" p="md">
-                {title}
-              </Text>
-              <LocalIcon icon="gpp-maybe-outline-rounded" width="1.25rem" height="1.25rem" style={{ color: 'var(--icon-files-color)' }} />
-            </Flex>
+            {titleContent}
           </Tooltip>
         </Flex>
-        <Divider />
-      </>
-    );
-  }
+      ) : (
+        titleContent
+      )}
 
-  return (
-    <>
-      <Flex justify="center" w="100%">
-        <Text fw={500} size="xl" p="md">
-          {title}
-        </Text>
-      </Flex>
-      <Divider />
+      <Text size="sm" mb="md" p="sm" style={{borderRadius:'var(--mantine-radius-md)', background: 'var(--color-gray-200)', color: 'var(--mantine-color-text)' }}>
+        {description}
+      </Text>
+      <Divider mb="sm" />
     </>
   );
 }
diff --git a/frontend/src/components/tooltips/useAutoRenameTips.ts b/frontend/src/components/tooltips/useAutoRenameTips.ts
index 394cb68e3..50e8ea9ce 100644
--- a/frontend/src/components/tooltips/useAutoRenameTips.ts
+++ b/frontend/src/components/tooltips/useAutoRenameTips.ts
@@ -11,7 +11,6 @@ export const useAutoRenameTips = (): TooltipContent => {
     tips: [
       {
         title: t("auto-rename.tooltip.howItWorks.title", "Smart Renaming"),
-        description: t("auto-rename.tooltip.howItWorks.text", "Automatically finds the best title from your PDF content and uses it as the filename."),
         bullets: [
           t("auto-rename.tooltip.howItWorks.bullet1", "Looks for text that appears to be a title or heading"),
           t("auto-rename.tooltip.howItWorks.bullet2", "Creates a clean, valid filename from the detected title"),
@@ -20,4 +19,4 @@ export const useAutoRenameTips = (): TooltipContent => {
       }
     ]
   };
-};
\ No newline at end of file
+};
diff --git a/frontend/src/tools/AutoRename.tsx b/frontend/src/tools/AutoRename.tsx
index e1231f52e..8101ac0b0 100644
--- a/frontend/src/tools/AutoRename.tsx
+++ b/frontend/src/tools/AutoRename.tsx
@@ -18,7 +18,7 @@ const AutoRename =(props: BaseToolProps) => {
   );
 
 return createToolFlow({
-    title: { title:t("auto-rename.title", "Auto Rename PDF"), tooltip: useAutoRenameTips()},
+    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,