From f19832d47e1c5cf99087b8b0e48feec68fec1b22 Mon Sep 17 00:00:00 2001
From: Anthony Stirling <77850077+Frooodle@users.noreply.github.com>
Date: Sun, 5 Oct 2025 23:00:55 +0100
Subject: [PATCH] same

---
 frontend/src/components/FileManager.tsx       |  1 +
 .../src/components/shared/QuickAccessBar.tsx  |  3 ++-
 .../components/tools/LegacyToolSurface.tsx    | 24 ++++++++++++-------
 .../src/components/tools/ToolRenderer.tsx     |  5 ++++
 frontend/src/pages/HomePage.tsx               | 20 ++++++++++++++++
 5 files changed, 43 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/FileManager.tsx b/frontend/src/components/FileManager.tsx
index fb26a3a3a..8cc81ca56 100644
--- a/frontend/src/components/FileManager.tsx
+++ b/frontend/src/components/FileManager.tsx
@@ -100,6 +100,7 @@ const FileManager: React.FC<FileManagerProps> = ({ selectedTool }) => {
       radius="md"
       className="overflow-hidden p-0"
       withCloseButton={false}
+      zIndex={1300}
       styles={{
         content: {
           position: 'relative',
diff --git a/frontend/src/components/shared/QuickAccessBar.tsx b/frontend/src/components/shared/QuickAccessBar.tsx
index af9c8acff..db8d6d26f 100644
--- a/frontend/src/components/shared/QuickAccessBar.tsx
+++ b/frontend/src/components/shared/QuickAccessBar.tsx
@@ -24,7 +24,7 @@ const QuickAccessBar = forwardRef<HTMLDivElement>((_, ref) => {
   const { t } = useTranslation();
   const { isRainbowMode } = useRainbowThemeContext();
   const { openFilesModal, isFilesModalOpen } = useFilesModalContext();
-  const { handleReaderToggle, handleBackToTools, handleToolSelect, selectedToolKey, leftPanelView, toolRegistry, readerMode, resetTool } = useToolWorkflow();
+  const { handleReaderToggle, handleBackToTools, handleToolSelect, selectedToolKey, leftPanelView, toolRegistry, readerMode, resetTool, setToolPanelMode } = useToolWorkflow();
   const { getToolNavigation } = useSidebarNavigation();
   const { config } = useAppConfig();
   const [configModalOpen, setConfigModalOpen] = useState(false);
@@ -100,6 +100,7 @@ const QuickAccessBar = forwardRef<HTMLDivElement>((_, ref) => {
         setActiveButton('read');
         handleBackToTools();
         handleReaderToggle();
+        setToolPanelMode('sidebar');
       }
     },
     // TODO: Add sign
diff --git a/frontend/src/components/tools/LegacyToolSurface.tsx b/frontend/src/components/tools/LegacyToolSurface.tsx
index 5677313ee..631a850d4 100644
--- a/frontend/src/components/tools/LegacyToolSurface.tsx
+++ b/frontend/src/components/tools/LegacyToolSurface.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState, useRef } from 'react';
-import { ActionIcon, ScrollArea, Switch, Text, Tooltip } from '@mantine/core';
+import { ActionIcon, ScrollArea, Switch, Text, Tooltip, useMantineColorScheme } from '@mantine/core';
 import ViewSidebarRoundedIcon from '@mui/icons-material/ViewSidebarRounded';
 import { useTranslation } from 'react-i18next';
 import ToolSearch from './toolPicker/ToolSearch';
@@ -7,6 +7,7 @@ import LegacyToolList from './LegacyToolList';
 import { ToolRegistryEntry } from '../../data/toolsTaxonomy';
 import { ToolId } from '../../types/toolId';
 import { useFocusTrap } from '../../hooks/tools/useFocusTrap';
+import { BASE_PATH } from '../../constants/app';
 import './ToolPanel.css';
 
 interface LegacyToolSurfaceProps {
@@ -44,12 +45,21 @@ const LegacyToolSurface = ({
   geometry,
 }: LegacyToolSurfaceProps) => {
   const { t } = useTranslation();
+  const { colorScheme } = useMantineColorScheme();
   const [isExiting, setIsExiting] = useState(false);
   const surfaceRef = useRef<HTMLDivElement>(null);
 
   // Enable focus trap when surface is active
   useFocusTrap(surfaceRef, !isExiting);
 
+  const brandAltText = t("home.mobile.brandAlt", "Stirling PDF logo");
+  const brandIconSrc = `${BASE_PATH}/branding/StirlingPDFLogoNoText${
+    colorScheme === "dark" ? "Dark" : "Light"
+  }.svg`;
+  const brandTextSrc = `${BASE_PATH}/branding/StirlingPDFLogo${
+    colorScheme === "dark" ? "White" : "Black"
+  }Text.svg`;
+
   const handleExit = () => {
     const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
 
@@ -96,19 +106,15 @@ const LegacyToolSurface = ({
         className={`tool-panel__legacy-surface-inner ${isExiting ? 'tool-panel__legacy-surface-inner--exiting' : ''}`}
       >
         <header className="tool-panel__legacy-header">
-          <div className="tool-panel__legacy-heading">
-            <Text fw={700} size="lg">
-              {t('toolPanel.legacy.heading', 'All tools (legacy view)')}
-            </Text>
-            <Text size="sm" c="dimmed">
-              {t('toolPanel.legacy.tagline', 'Browse and launch tools while keeping the classic full-width gallery.')}
-            </Text>
+          <div className="tool-panel__legacy-brand">
+            <img src={brandIconSrc} alt="" className="tool-panel__legacy-brand-icon" />
+            <img src={brandTextSrc} alt={brandAltText} className="tool-panel__legacy-brand-text" />
           </div>
           <Tooltip label={toggleLabel} position="bottom" withArrow>
             <ActionIcon
               variant="subtle"
               radius="xl"
-              size="lg"
+              size="md"
               onClick={handleExit}
               aria-label={toggleLabel}
             >
diff --git a/frontend/src/components/tools/ToolRenderer.tsx b/frontend/src/components/tools/ToolRenderer.tsx
index fbd8100d1..1503bec20 100644
--- a/frontend/src/components/tools/ToolRenderer.tsx
+++ b/frontend/src/components/tools/ToolRenderer.tsx
@@ -18,6 +18,11 @@ const ToolRenderer = ({
   const { toolRegistry } = useToolWorkflow();
   const selectedTool = toolRegistry[selectedToolKey];
 
+  // Handle tools that only work in workbenches (read, multiTool)
+  if (selectedTool && !selectedTool.component && selectedTool.workbench) {
+    return null; // These tools render in their workbench, not in the sidebar
+  }
+
   if (!selectedTool || !selectedTool.component) {
     return <div>Tool not found: {selectedToolKey}</div>;
   }
diff --git a/frontend/src/pages/HomePage.tsx b/frontend/src/pages/HomePage.tsx
index bb1a4e482..f077543c0 100644
--- a/frontend/src/pages/HomePage.tsx
+++ b/frontend/src/pages/HomePage.tsx
@@ -36,6 +36,9 @@ export default function HomePage() {
     selectedToolKey,
     handleToolSelect,
     handleBackToTools,
+    readerMode,
+    leftPanelView,
+    setLeftPanelView,
   } = useToolWorkflow();
 
   const { openFilesModal } = useFilesModalContext();
@@ -116,6 +119,23 @@ export default function HomePage() {
     };
   }, [isMobile]);
 
+  // Automatically switch to workbench when read mode or multiTool is activated in mobile
+  useEffect(() => {
+    if (isMobile && (readerMode || selectedToolKey === 'multiTool')) {
+      setActiveMobileView('workbench');
+    }
+  }, [isMobile, readerMode, selectedToolKey]);
+
+  // When navigating back to tools view in mobile with a workbench-only tool, show tool picker
+  useEffect(() => {
+    if (isMobile && activeMobileView === 'tools' && selectedTool) {
+      // Check if this is a workbench-only tool (has workbench but no component)
+      if (selectedTool.workbench && !selectedTool.component) {
+        setLeftPanelView('toolPicker');
+      }
+    }
+  }, [isMobile, activeMobileView, selectedTool, setLeftPanelView]);
+
   const baseUrl = getBaseUrl();
 
   // Update document meta when tool changes