V2 Restructure homepage (#4138)

Component Extraction & Context Refactor - Summary

  🔧 What We Did

- Extracted HomePage's 286-line monolithic component into focused parts
  - Created ToolPanel (105 lines) for tool selection UI
  - Created Workbench (203 lines) for view management
  - Created ToolWorkflowContext (220 lines) for centralized state
  - Reduced HomePage to 60 lines of provider setup
  - Eliminated all prop drilling - components use contexts directly

  🏆 Why This is Good

- Maintainability: Each component has single purpose, easy
debugging/development
- Architecture: Clean separation of concerns, future features easier to
add
- Code Quality: 105% more lines but organized/purposeful vs tangled
spaghetti code

---------

Co-authored-by: Connor Yoh <connor@stirlingpdf.com>
Co-authored-by: James Brunton <jbrunton96@gmail.com>

frontend/src/components/shared/QuickAccessBar.tsx

@@ -11,20 +11,18 @@ import { useRainbowThemeContext } from "./RainbowThemeProvider";
 import AppConfigModal from './AppConfigModal';
 import { useIsOverflowing } from '../../hooks/useIsOverflowing';
 import { useFilesModalContext } from '../../contexts/FilesModalContext';
-import { QuickAccessBarProps, ButtonConfig } from '../../types/sidebar';
+import { useToolWorkflow } from '../../contexts/ToolWorkflowContext';
+import { ButtonConfig } from '../../types/sidebar';
 import './QuickAccessBar.css';
 
 function NavHeader({ 
   activeButton, 
-  setActiveButton, 
-  onReaderToggle, 
-  onToolsClick 
+  setActiveButton
 }: {
   activeButton: string;
   setActiveButton: (id: string) => void;
-  onReaderToggle: () => void;
-  onToolsClick: () => void;
 }) {
+  const { handleReaderToggle, handleBackToTools } = useToolWorkflow();
   return (
     <>
       <div className="nav-header">
@@ -60,8 +58,8 @@ function NavHeader({
             variant="subtle"
             onClick={() => {
               setActiveButton('tools');
-              onReaderToggle();
-              onToolsClick();
+              handleReaderToggle();
+              handleBackToTools();
             }}
             style={{
               backgroundColor: activeButton === 'tools' ? 'var(--icon-tools-bg)' : 'var(--icon-inactive-bg)',
@@ -84,12 +82,11 @@ function NavHeader({
   );
 }
 
-const QuickAccessBar = forwardRef<HTMLDivElement, QuickAccessBarProps>(({
-  onToolsClick,
-  onReaderToggle,
+const QuickAccessBar = forwardRef<HTMLDivElement>(({
 }, ref) => {
   const { isRainbowMode } = useRainbowThemeContext();
   const { openFilesModal, isFilesModalOpen } = useFilesModalContext();
+  const { handleReaderToggle } = useToolWorkflow();
   const [configModalOpen, setConfigModalOpen] = useState(false);
   const [activeButton, setActiveButton] = useState<string>('tools');
   const scrollableRef = useRef<HTMLDivElement>(null);
@@ -110,7 +107,7 @@ const QuickAccessBar = forwardRef<HTMLDivElement, QuickAccessBarProps>(({
       type: 'navigation',
       onClick: () => {
         setActiveButton('read');
-        onReaderToggle();
+        handleReaderToggle();
       }
     },
     {
@@ -218,9 +215,7 @@ const QuickAccessBar = forwardRef<HTMLDivElement, QuickAccessBarProps>(({
       <div className="quick-access-header">
         <NavHeader 
           activeButton={activeButton} 
-          setActiveButton={setActiveButton} 
-          onReaderToggle={onReaderToggle} 
-          onToolsClick={onToolsClick} 
+          setActiveButton={setActiveButton}
         />
       </div>