Feature/v2/tooltips (#4112)

# Description of Changes

- added tooltips to ocr and compress
- added the tooltip component which can be used either directly, or
through the toolstep component

---

## Checklist

### General

- [ ] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ ] I have read the [Stirling-PDF Developer
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md)
(if applicable)
- [ ] I have read the [How to add new languages to
Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md)
(if applicable)
- [ ] I have performed a self-review of my own code
- [ ] My changes generate no new warnings

### Documentation

- [ ] I have updated relevant docs on [Stirling-PDF's doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
(if functionality has heavily changed)
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

### UI Changes (if applicable)

- [ ] Screenshots or videos demonstrating the UI changes are attached
(e.g., as comments or direct attachments in the PR)

### Testing (if applicable)

- [ ] I have tested my changes locally. Refer to the [Testing
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md#6-testing)
for more details.

frontend/src/pages/HomePage.tsx

@@ -2,11 +2,13 @@ import React, { useState, useCallback, useEffect, useRef } from "react";
 import { useTranslation } from 'react-i18next';
 import { useFileContext } from "../contexts/FileContext";
 import { FileSelectionProvider, useFileSelection } from "../contexts/FileSelectionContext";
+import { SidebarProvider, useSidebarContext } from "../contexts/SidebarContext";
 import { useToolManagement } from "../hooks/useToolManagement";
 import { useFileHandler } from "../hooks/useFileHandler";
 import { Group, Box, Button } from "@mantine/core";
 import { useRainbowThemeContext } from "../components/shared/RainbowThemeProvider";
 import { PageEditorFunctions } from "../types/pageEditor";
+import { SidebarRefs, SidebarState } from "../types/sidebar";
 import rainbowStyles from '../styles/rainbow.module.css';
 
 import ToolPicker from "../components/tools/ToolPicker";
@@ -20,9 +22,20 @@ import QuickAccessBar from "../components/shared/QuickAccessBar";
 import LandingPage from "../components/shared/LandingPage";
 import FileUploadModal from "../components/shared/FileUploadModal";
 
+
 function HomePageContent() {
   const { t } = useTranslation();
   const { isRainbowMode } = useRainbowThemeContext();
+  const { 
+    sidebarState, 
+    sidebarRefs, 
+    setSidebarsVisible, 
+    setLeftPanelView, 
+    setReaderMode 
+  } = useSidebarContext();
+  
+  const { sidebarsVisible, leftPanelView, readerMode } = sidebarState;
+  const { quickAccessRef, toolPanelRef } = sidebarRefs;
 
   const fileContext = useFileContext();
   const { activeFiles, currentView, setCurrentView } = fileContext;
@@ -37,9 +50,6 @@ function HomePageContent() {
     clearToolSelection,
   } = useToolManagement();
 
-  const [sidebarsVisible, setSidebarsVisible] = useState(true);
-  const [leftPanelView, setLeftPanelView] = useState<'toolPicker' | 'toolContent'>('toolPicker');
-  const [readerMode, setReaderMode] = useState(false);
   const [pageEditorFunctions, setPageEditorFunctions] = useState<PageEditorFunctions | null>(null);
   const [previewFile, setPreviewFile] = useState<File | null>(null);
 
@@ -92,16 +102,15 @@ function HomePageContent() {
     >
       {/* Quick Access Bar */}
       <QuickAccessBar
+        ref={quickAccessRef}
         onToolsClick={handleQuickAccessTools}
         onReaderToggle={handleReaderToggle}
-        selectedToolKey={selectedToolKey}
-        toolRegistry={toolRegistry}
-        leftPanelView={leftPanelView}
-        readerMode={readerMode}
       />
 
       {/* Left: Tool Picker or Selected Tool Panel */}
       <div
+        ref={toolPanelRef}
+        data-sidebar="tool-panel"
         className={`h-screen flex flex-col overflow-hidden bg-[var(--bg-toolbar)] border-r border-[var(--border-subtle)] transition-all duration-300 ease-out ${isRainbowMode ? rainbowStyles.rainbowPaper : ''}`}
         style={{
           width: sidebarsVisible && !readerMode ? '14vw' : '0',
@@ -279,7 +288,9 @@ function HomePageContent() {
 export default function HomePage() {
   return (
     <FileSelectionProvider>
-      <HomePageContent />
+      <SidebarProvider>
+        <HomePageContent />
+      </SidebarProvider>
     </FileSelectionProvider>
   );
 }