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/types/sidebar.ts

@@ -0,0 +1,46 @@
+export interface SidebarState {
+  sidebarsVisible: boolean;
+  leftPanelView: 'toolPicker' | 'toolContent';
+  readerMode: boolean;
+}
+
+export interface SidebarRefs {
+  quickAccessRef: React.RefObject<HTMLDivElement | null>;
+  toolPanelRef: React.RefObject<HTMLDivElement | null>;
+}
+
+export interface SidebarInfo {
+  rect: DOMRect | null;
+  isToolPanelActive: boolean;
+  sidebarState: SidebarState;
+}
+
+// Context-related interfaces
+export interface SidebarContextValue {
+  sidebarState: SidebarState;
+  sidebarRefs: SidebarRefs;
+  setSidebarsVisible: React.Dispatch<React.SetStateAction<boolean>>;
+  setLeftPanelView: React.Dispatch<React.SetStateAction<'toolPicker' | 'toolContent'>>;
+  setReaderMode: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+export interface SidebarProviderProps {
+  children: React.ReactNode;
+}
+
+// QuickAccessBar related interfaces
+export interface QuickAccessBarProps {
+  onToolsClick: () => void;
+  onReaderToggle: () => void;
+}
+
+export interface ButtonConfig {
+  id: string;
+  name: string;
+  icon: React.ReactNode;
+  tooltip: string;
+  isRound?: boolean;
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  onClick: () => void;
+  type?: 'navigation' | 'modal' | 'action';
+}

frontend/src/types/tips.ts

@@ -0,0 +1,13 @@
+export interface TooltipContent {
+  header?: {
+    title: string;
+    logo?: string | React.ReactNode;
+  };
+  tips?: Array<{
+    title?: string;
+    description?: string;
+    bullets?: string[];
+    body?: React.ReactNode;
+  }>;
+  content?: React.ReactNode;
+}