From 70b4ac69cd3cb1bf4bc1d24701bd35f3a7cb51d7 Mon Sep 17 00:00:00 2001 From: EthanHealy01 Date: Fri, 8 Aug 2025 16:13:05 +0100 Subject: [PATCH] fix theme race condition, remove it from RainbowThemeProvider and offload it to the index file --- .../branding/StirlingPDFLogoNoTextDark.svg | 4 +-- .../src/components/shared/QuickAccessBar.tsx | 25 --------------- .../shared/RainbowThemeProvider.tsx | 31 +++++++++---------- frontend/src/data/toolRegistry.tsx | 6 ++-- frontend/src/hooks/useRainbowTheme.ts | 8 ++++- frontend/src/index.tsx | 23 +++++++++----- frontend/src/pages/HomePage.tsx | 3 +- 7 files changed, 44 insertions(+), 56 deletions(-) diff --git a/frontend/public/branding/StirlingPDFLogoNoTextDark.svg b/frontend/public/branding/StirlingPDFLogoNoTextDark.svg index 6c99f5001..001c6a01c 100644 --- a/frontend/public/branding/StirlingPDFLogoNoTextDark.svg +++ b/frontend/public/branding/StirlingPDFLogoNoTextDark.svg @@ -1,4 +1,4 @@ - - + + diff --git a/frontend/src/components/shared/QuickAccessBar.tsx b/frontend/src/components/shared/QuickAccessBar.tsx index bca1ee9e2..1ee6b60ee 100644 --- a/frontend/src/components/shared/QuickAccessBar.tsx +++ b/frontend/src/components/shared/QuickAccessBar.tsx @@ -27,31 +27,6 @@ function NavHeader({ }) { return ( <> -
- - - - - - - - - - -
- {/* Divider after top icons */} - {/* All Tools button below divider */}
diff --git a/frontend/src/components/shared/RainbowThemeProvider.tsx b/frontend/src/components/shared/RainbowThemeProvider.tsx index 27cf5101f..21c46cf72 100644 --- a/frontend/src/components/shared/RainbowThemeProvider.tsx +++ b/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 ( - <> - - - + +
-
- {children} -
- - - + {children} +
+ + ); } diff --git a/frontend/src/data/toolRegistry.tsx b/frontend/src/data/toolRegistry.tsx index 738936b1a..7e09f7f1d 100644 --- a/frontend/src/data/toolRegistry.tsx +++ b/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: sync_alt, 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: quick_reference_all, name: "home.ocr.title", - component: null, + component: OCRPanel, view: "convert", description: "home.ocr.desc", category: "Recommended Tools", diff --git a/frontend/src/hooks/useRainbowTheme.ts b/frontend/src/hooks/useRainbowTheme.ts index a3c8f6e67..b16ed1228 100644 --- a/frontend/src/hooks/useRainbowTheme.ts +++ b/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 diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx index e8d719e24..740eec3dc 100644 --- a/frontend/src/index.tsx +++ b/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( - - - - - - + + + + ); diff --git a/frontend/src/pages/HomePage.tsx b/frontend/src/pages/HomePage.tsx index 13fdcaa40..932ebaa14 100644 --- a/frontend/src/pages/HomePage.tsx +++ b/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";