fix theme race condition, remove it from RainbowThemeProvider and offload it to the index file

frontend/public/branding/StirlingPDFLogoNoTextDark.svg

@@ -1,4 +1,4 @@
 <svg width="146" height="157" viewBox="0 0 146 157" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M3.77397 72.5462L93.6741 23.0462L94.7739 70.0462L3.77395 119.046L3.77397 72.5462Z" fill="#E6E6E6" fill-opacity="0.9"/>
-<path d="M50.774 73.5735L96.387 50.2673L142 26.961L142 71.687L50.7739 122.046L50.774 73.5735Z" fill="#E6E6E6" fill-opacity="0.8"/>
+<path d="M3.77397 72.5462L93.6741 23.0462L94.7739 70.0462L3.77395 119.046L3.77397 72.5462Z" fill="#E6E6E6" fill-opacity="0.4"/>
+<path d="M50.774 73.5735L96.387 50.2673L142 26.961L142 71.687L50.7739 122.046L50.774 73.5735Z" fill="#E6E6E6" fill-opacity="0.7"/>
 </svg>

frontend/src/components/shared/QuickAccessBar.tsx

@@ -27,31 +27,6 @@ function NavHeader({
 }) {
   return (
     <>
-      <div className="nav-header">
-        <Tooltip label="User Profile" position="right">
-          <ActionIcon
-            size="md"
-            variant="subtle"
-            className="action-icon-style"
-          >
-            <PersonIcon sx={{ fontSize: "1rem" }} />
-          </ActionIcon>
-        </Tooltip>
-        <Tooltip label="Notifications" position="right">
-          <ActionIcon
-            size="md"
-            variant="subtle"
-            className="action-icon-style"
-          >
-            <NotificationsIcon sx={{ fontSize: "1rem" }} />
-          </ActionIcon>
-        </Tooltip>
-      </div>
-      {/* Divider after top icons */}
-      <Divider 
-        size="xs" 
-        className="nav-header-divider"
-      />
       {/* All Tools button below divider */}
       <Tooltip label="View all available tools" position="right">
         <div className="flex flex-col items-center gap-1 mt-4 mb-2">

frontend/src/components/shared/RainbowThemeProvider.tsx

@@ -1,5 +1,5 @@
 import React, { createContext, useContext, ReactNode } from 'react';
-import { MantineProvider, ColorSchemeScript } from '@mantine/core';
+import { MantineProvider } from '@mantine/core';
 import { useRainbowTheme } from '../../hooks/useRainbowTheme';
 import { mantineTheme } from '../../theme/mantineTheme';
 import rainbowStyles from '../../styles/rainbow.module.css';
@@ -34,22 +34,19 @@ export function RainbowThemeProvider({ children }: RainbowThemeProviderProps) {
   const mantineColorScheme = rainbowTheme.themeMode === 'rainbow' ? 'dark' : rainbowTheme.themeMode;
 
   return (
-    <>
-      <ColorSchemeScript defaultColorScheme={mantineColorScheme} />
-      <RainbowThemeContext.Provider value={rainbowTheme}>
-        <MantineProvider
-          theme={mantineTheme}
-          defaultColorScheme={mantineColorScheme}
-          forceColorScheme={mantineColorScheme}
+    <RainbowThemeContext.Provider value={rainbowTheme}>
+      <MantineProvider
+        theme={mantineTheme}
+        defaultColorScheme={mantineColorScheme}
+        forceColorScheme={mantineColorScheme}
+      >
+        <div
+          className={rainbowTheme.isRainbowMode ? rainbowStyles.rainbowMode : ''}
+          style={{ minHeight: '100vh' }}
         >
-          <div
-            className={rainbowTheme.isRainbowMode ? rainbowStyles.rainbowMode : ''}
-            style={{ minHeight: '100vh' }}
-          >
-            {children}
-          </div>
-        </MantineProvider>
-      </RainbowThemeContext.Provider>
-    </>
+          {children}
+        </div>
+      </MantineProvider>
+    </RainbowThemeContext.Provider>
   );
 }

frontend/src/data/toolRegistry.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 import SplitPdfPanel from "../tools/Split";
 import CompressPdfPanel from "../tools/Compress";
 import MergePdfPanel from "../tools/Merge";
+import OCRPanel from '../tools/OCR';
+import ConvertPanel from '../tools/Convert';
 
 export type ToolRegistryEntry = {
     icon: React.ReactNode;
@@ -174,7 +176,7 @@ export const baseToolRegistry: ToolRegistry = {
     "convert": {
         icon: <span className="material-symbols-rounded">sync_alt</span>,
         name: "home.fileToPDF.title",
-        component: null,
+        component: ConvertPanel,
         view: "convert",
         description: "home.fileToPDF.desc",
         category: "Recommended Tools",
@@ -282,7 +284,7 @@ export const baseToolRegistry: ToolRegistry = {
     "ocr": {
         icon: <span className="material-symbols-rounded">quick_reference_all</span>,
         name: "home.ocr.title",
-        component: null,
+        component: OCRPanel,
         view: "convert",
         description: "home.ocr.desc",
         category: "Recommended Tools",

frontend/src/hooks/useRainbowTheme.ts

@@ -18,7 +18,13 @@ export function useRainbowTheme(initialTheme: 'light' | 'dark' = 'light'): Rainb
     if (stored && ['light', 'dark', 'rainbow'].includes(stored)) {
       return stored as ThemeMode;
     }
-    return initialTheme;
+    try {
+      // Fallback to OS preference if available
+      const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+      return prefersDark ? 'dark' : initialTheme;
+    } catch {
+      return initialTheme;
+    }
   });
 
   // Track rapid toggles for easter egg

frontend/src/index.tsx

@@ -2,11 +2,22 @@ import '@mantine/core/styles.css';
 import './index.css'; // Import Tailwind CSS
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import { ColorSchemeScript, MantineProvider, mantineHtmlProps } from '@mantine/core';
+import { ColorSchemeScript } from '@mantine/core';
 import { BrowserRouter } from 'react-router-dom';
 import App from './App';
 import './i18n'; // Initialize i18next
 
+// Compute initial color scheme
+function getInitialScheme(): 'light' | 'dark' {
+  const stored = localStorage.getItem('stirling-theme');
+  if (stored === 'light' || stored === 'dark') return stored;
+  try {
+    const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+    return prefersDark ? 'dark' : 'light';
+  } catch {
+    return 'light';
+  }
+}
 
 const container = document.getElementById('root');
 if (!container) {
@@ -15,12 +26,10 @@ if (!container) {
 const root = ReactDOM.createRoot(container); // Finds the root DOM element
 root.render(
   <React.StrictMode>
-    <ColorSchemeScript />
-    <MantineProvider defaultColorScheme="auto">
-      <BrowserRouter>
-        <App />
-      </BrowserRouter>
-    </MantineProvider>
+    <ColorSchemeScript defaultColorScheme={getInitialScheme()} />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </React.StrictMode>
 );
 

frontend/src/pages/HomePage.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useEffect, useRef } from "react";
+import React, { useState, useCallback, useEffect } from "react";
 import { useTranslation } from 'react-i18next';
 import { useFileContext } from "../contexts/FileContext";
 import { FileSelectionProvider, useFileSelection } from "../contexts/FileSelectionContext";
@@ -8,7 +8,6 @@ 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";