From 57286ab7ff3795279b5b6416e8bfedeb39384c33 Mon Sep 17 00:00:00 2001
From: Connor Yoh <connor@stirlingpdf.com>
Date: Fri, 22 Aug 2025 16:06:36 +0100
Subject: [PATCH] Added optional title step

---
 .../src/components/tools/shared/ToolStep.tsx  |  9 ++--
 .../tools/shared/ToolWorkflowTitle.tsx        | 53 +++++++++++++++++++
 .../tools/shared/createToolFlow.tsx           |  6 +++
 3 files changed, 65 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/components/tools/shared/ToolWorkflowTitle.tsx

diff --git a/frontend/src/components/tools/shared/ToolStep.tsx b/frontend/src/components/tools/shared/ToolStep.tsx
index 927180038..c2ff1d5f6 100644
--- a/frontend/src/components/tools/shared/ToolStep.tsx
+++ b/frontend/src/components/tools/shared/ToolStep.tsx
@@ -25,6 +25,7 @@ export interface ToolStepProps {
   _stepNumber?: number; // Internal prop set by ToolStepContainer
   _excludeFromCount?: boolean; // Internal prop to exclude from visible count calculation
   _noPadding?: boolean; // Internal prop to exclude from default left padding
+  alwaysShowTooltip?: boolean; // Force tooltip to show even when collapsed
   tooltip?: {
     content?: React.ReactNode;
     tips?: TooltipTip[];
@@ -38,9 +39,10 @@ export interface ToolStepProps {
 const renderTooltipTitle = (
   title: string,
   tooltip: ToolStepProps['tooltip'],
-  isCollapsed: boolean
+  isCollapsed: boolean,
+  alwaysShowTooltip: boolean = false
 ) => {
-  if (tooltip && !isCollapsed) {
+  if (tooltip && (!isCollapsed || alwaysShowTooltip)) {
     return (
       <Tooltip
         content={tooltip.content}
@@ -77,6 +79,7 @@ const ToolStep = ({
   showNumber,
   _stepNumber,
   _noPadding,
+  alwaysShowTooltip = false,
   tooltip
 }: ToolStepProps) => {
   if (!isVisible) return null;
@@ -118,7 +121,7 @@ const ToolStep = ({
               {stepNumber}
             </Text>
           )}
-          {renderTooltipTitle(title, tooltip, isCollapsed)}
+          {renderTooltipTitle(title, tooltip, isCollapsed, alwaysShowTooltip)}
         </Flex>
 
         {isCollapsed ? (
diff --git a/frontend/src/components/tools/shared/ToolWorkflowTitle.tsx b/frontend/src/components/tools/shared/ToolWorkflowTitle.tsx
new file mode 100644
index 000000000..31c305d4a
--- /dev/null
+++ b/frontend/src/components/tools/shared/ToolWorkflowTitle.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import { Flex, Text, Divider } from '@mantine/core';
+import { Tooltip } from '../../shared/Tooltip';
+
+export interface ToolWorkflowTitleProps {
+  title: string;
+  tooltip?: {
+    content?: React.ReactNode;
+    tips?: any[];
+    header?: {
+      title: string;
+      logo?: React.ReactNode;
+    };
+  };
+}
+
+export function ToolWorkflowTitle({ title, tooltip }: ToolWorkflowTitleProps) {
+  if (tooltip) {
+    return (
+      <>
+        <Flex justify="center" w="100%">
+          <Tooltip
+            content={tooltip.content}
+            tips={tooltip.tips}
+            header={tooltip.header}
+            sidebarTooltip={true}
+          >
+            <Flex align="center" gap="xs" onClick={(e) => e.stopPropagation()}>
+              <Text fw={500} size="xl" p="md">
+                {title}
+              </Text>
+              <span className="material-symbols-rounded" style={{ fontSize: '1.2rem', color: 'var(--icon-files-color)' }}>
+                gpp_maybe
+              </span>
+            </Flex>
+          </Tooltip>
+        </Flex>
+        <Divider />
+      </>
+    );
+  }
+
+  return (
+    <>
+      <Flex justify="center" w="100%">
+        <Text fw={500} size="xl" p="md">
+          {title}
+        </Text>
+      </Flex>
+      <Divider />
+    </>
+  );
+}
diff --git a/frontend/src/components/tools/shared/createToolFlow.tsx b/frontend/src/components/tools/shared/createToolFlow.tsx
index ff6d2a6be..d523ff6f6 100644
--- a/frontend/src/components/tools/shared/createToolFlow.tsx
+++ b/frontend/src/components/tools/shared/createToolFlow.tsx
@@ -3,6 +3,7 @@ import { Stack } from '@mantine/core';
 import { createToolSteps, ToolStepProvider } from './ToolStep';
 import OperationButton from './OperationButton';
 import { ToolOperationHook } from '../../../hooks/tools/shared/useToolOperation';
+import { ToolWorkflowTitle, ToolWorkflowTitleProps } from './ToolWorkflowTitle';
 
 export interface FilesStepConfig {
   selectedFiles: File[];
@@ -45,7 +46,10 @@ export interface ReviewStepConfig {
   testId?: string;
 }
 
+export interface TitleConfig extends ToolWorkflowTitleProps {}
+
 export interface ToolFlowConfig {
+  title?: TitleConfig;
   files: FilesStepConfig;
   steps: MiddleStepConfig[];
   executeButton?: ExecuteButtonConfig;
@@ -63,6 +67,8 @@ export function createToolFlow(config: ToolFlowConfig) {
   return (
     <Stack gap="sm" p="sm" h="95vh" w="100%" style={{ overflow: 'auto' }}>
       <ToolStepProvider forceStepNumbers={config.forceStepNumbers}>
+        {config.title && <ToolWorkflowTitle {...config.title} />}
+
         {/* Files Step */}
         {config.files.isVisible !== false && steps.createFilesStep({
           selectedFiles: config.files.selectedFiles,