refactor(theme): hoist ThemeProvider to App.tsx root

2026-05-31 11:00:55 +00:00 · 2026-05-31 11:00:55 +00:00 · 07ceef1294
commit 07ceef1294
parent fedbd903ff
4 changed files with 98 additions and 95 deletions
--- a/src/App.tsx
+++ b/src/App.tsx
@ -1,5 +1,7 @@
 import { BrowserRouter } from 'react-router-dom';
-import { ThemeProvider } from '@mui/material/styles';
+import { useMemo } from 'react';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+import { useTLDraw } from './contexts/TLDrawContext';
 import { theme } from './services/themeService';
 import { AuthProvider } from './contexts/AuthContext';
 import { TLDrawProvider } from './contexts/TLDrawContext';
@ -8,21 +10,43 @@ import AppRoutes from './AppRoutes';
 import { ErrorBoundary } from './components/ErrorBoundary';
 import React from 'react';

-const App = React.memo(() => (
-  <ErrorBoundary>
-    <BrowserRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
-      <ThemeProvider theme={theme}>
+const App = React.memo(() => {
+  const { tldrawPreferences } = useTLDraw();
+
+  const prefersDarkMode =
+    typeof window !== 'undefined' &&
+    window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+  const appTheme = useMemo(() => {
+    let mode: 'light' | 'dark';
+
+    if (tldrawPreferences?.colorScheme === 'system') {
+      mode = prefersDarkMode ? 'dark' : 'light';
+    } else {
+      mode = tldrawPreferences?.colorScheme === 'dark' ? 'dark' : 'light';
+    }
+
+    return createTheme({
+      palette: { mode },
+    });
+  }, [tldrawPreferences?.colorScheme, prefersDarkMode]);
+
+  return (
+    <ErrorBoundary>
+      <BrowserRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
        <AuthProvider>
          <UserProvider>
            <TLDrawProvider>
-              <AppRoutes />
+              <ThemeProvider theme={appTheme}>
+                <AppRoutes />
+              </ThemeProvider>
            </TLDrawProvider>
          </UserProvider>
        </AuthProvider>
-      </ThemeProvider>
-    </BrowserRouter>
-  </ErrorBoundary>
-));
+      </BrowserRouter>
+    </ErrorBoundary>
+  );
+});

 App.displayName = import.meta.env.VITE_APP_NAME;

--- a/src/AppRoutes.tsx
+++ b/src/AppRoutes.tsx
@ -169,8 +169,8 @@ const AppRoutes: React.FC = () => {
          </Route>
        )}

-        {/* Fallback route - use different NotFound pages based on auth state */}
-        <Route path="*" element={user ? <NotFound /> : <NotFoundPublic />} />
+        {/* Fallback route - authenticated users go to dashboard, unauthenticated see public 404 */}
+        <Route path="*" element={user ? <Navigate to="/dashboard" replace /> : <NotFoundPublic />} />
      </Routes>
    </Layout>
  );
--- a/src/pages/Header.tsx
+++ b/src/pages/Header.tsx
@ -7,6 +7,7 @@ import {
  Typography,
  IconButton,
  Box,
+  Chip,
  useTheme,
  Menu,
  MenuItem,
@ -126,6 +127,15 @@ const Header: React.FC = () => {
        </Typography>

        <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+          {isAuthenticated && bootstrapData?.onboarding?.next_step && bootstrapData.onboarding.next_step !== 'ready' && (
+            <Chip
+              label={bootstrapData.onboarding.next_step.replace(/_/g, ' ')}
+              color="warning"
+              size="small"
+              onClick={() => navigate('/dashboard')}
+              sx={{ cursor: 'pointer', display: { xs: 'none', sm: 'flex' } }}
+            />
+          )}
          {isAuthenticated && (
            <Typography
              variant="body2"
--- a/src/utils/tldraw/ui-overrides/components/shared/BasePanel.tsx
+++ b/src/utils/tldraw/ui-overrides/components/shared/BasePanel.tsx
@ -1,16 +1,14 @@
 import React, { useEffect, useRef, useMemo } from 'react';
 import { useLocation } from 'react-router-dom';
+import { useTheme } from '@mui/material/styles';
 import { TldrawUiButton } from '@tldraw/tldraw';
-import { 
+import {
  Button,
  Menu,
  MenuItem,
  ListItemIcon,
  ListItemText,
  styled,
-  ThemeProvider,
-  createTheme,
-  useMediaQuery
 } from '@mui/material';
 import {
  PushPin as PushPinIcon,
@ -24,7 +22,7 @@ import {
  Navigation as NavigationIcon,
  Save as NodeIcon,
  Assignment as ExamIcon,
-  Mic as MicIcon
+  Mic as MicIcon,
 } from '@mui/icons-material';
 import { CCShapesPanel } from './CCShapesPanel';
 import { CCSlidesPanel } from './CCSlidesPanel';
@ -95,7 +93,7 @@ const PanelTypeButton = styled(Button)(() => ({
  '& .MuiSvgIcon-root': {
    fontSize: '1.25rem',
    color: 'inherit',
-  }
+  },
 }));

 const StyledMenuItem = styled(MenuItem)(() => ({
@ -106,7 +104,7 @@ const StyledMenuItem = styled(MenuItem)(() => ({
    backgroundColor: 'var(--color-hover)',
    '& .MuiListItemIcon-root': {
      color: 'var(--color-selected)',
-    }
+    },
  },
  '& .MuiListItemIcon-root': {
    color: 'var(--color-text)',
@ -114,8 +112,8 @@ const StyledMenuItem = styled(MenuItem)(() => ({
    transition: 'color 200ms ease',
    '& .MuiSvgIcon-root': {
      fontSize: '1.25rem',
-    }
-  }
+    },
+  },
 }));

 export const BasePanel: React.FC<BasePanelProps> = ({
@ -130,45 +128,35 @@ export const BasePanel: React.FC<BasePanelProps> = ({
 }) => {
  const location = useLocation();
  const { tldrawPreferences } = useTLDraw();
-  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+  const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
  const [menuAnchorEl, setMenuAnchorEl] = React.useState<null | HTMLElement>(null);
-  
-  // Create a dynamic theme based on TLDraw preferences
-  const theme = useMemo(() => {
-    let mode: 'light' | 'dark';
-    
-    if (tldrawPreferences?.colorScheme === 'system') {
-      mode = prefersDarkMode ? 'dark' : 'light';
-    } else {
-      mode = tldrawPreferences?.colorScheme === 'dark' ? 'dark' : 'light';
-    }

-    return createTheme({
-      palette: {
-        mode,
-      },
-    });
+  // Mui theme object from root provider
+  const computedTheme = useTheme();
+  const accentColor = useMemo(() => {
+    if (tldrawPreferences?.colorScheme === 'dark') return '#e2e8f0';
+    if (tldrawPreferences?.colorScheme === 'system') return prefersDarkMode ? '#e2e8f0' : '#1e293b';
+    return '#1e293b';
  }, [tldrawPreferences?.colorScheme, prefersDarkMode]);

  const isExamMarkerRoute = location.pathname === '/exam-marker';
  const availablePanels = isExamMarkerRoute ? PANEL_TYPES.examMarker : PANEL_TYPES.default;
-  
+
  const [currentPanelType, setCurrentPanelType] = React.useState<PanelType>(
-    isExamMarkerRoute ? 'exam-marker' : initialPanelType
+    isExamMarkerRoute ? 'exam-marker' : initialPanelType,
  );
-  
-  // Use controlled state if provided, otherwise use internal state
+
  const [internalIsExpanded, setInternalIsExpanded] = React.useState(true);
  const [internalIsPinned, setInternalIsPinned] = React.useState(true);
-  
+
  const isExpanded = controlledIsExpanded ?? internalIsExpanded;
  const isPinned = controlledIsPinned ?? internalIsPinned;
-  
+
  const handleExpandedChange = (expanded: boolean) => {
    setInternalIsExpanded(expanded);
    onExpandedChange?.(expanded);
  };
-  
+
  const handlePinToggle = () => {
    const newPinned = !isPinned;
    setInternalIsPinned(newPinned);
@ -178,16 +166,11 @@ export const BasePanel: React.FC<BasePanelProps> = ({
  const panelRef = useRef<HTMLDivElement>(null);
  const dimensions = PANEL_DIMENSIONS[currentPanelType as keyof typeof PANEL_DIMENSIONS];

-  // Handle click outside
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
-      // Don't close if pinned
      if (isPinned) return;

-      // Check if click is outside panel
      const isClickOutside = panelRef.current && !panelRef.current.contains(event.target as Node);
-      
-      // Check if click is not on a panel-related element
      const target = event.target as HTMLElement;
      const isPanelElement = target.closest('.panel-root, .panel-handle, .tlui-button');

@ -288,13 +271,11 @@ export const BasePanel: React.FC<BasePanelProps> = ({
    }
  };

-  // Handle menu button click
  const handleMenuClick = (event: React.MouseEvent<HTMLElement>) => {
    setMenuAnchorEl(event.currentTarget);
    onMenuOpenChange(true);
  };

-  // Handle menu close
  const handleMenuClose = () => {
    setMenuAnchorEl(null);
    onMenuOpenChange(false);
@ -303,7 +284,7 @@ export const BasePanel: React.FC<BasePanelProps> = ({
  return (
    <>
      {!isExpanded && (
-        <div 
+        <div
          className="panel-handle"
          onClick={() => handleExpandedChange(true)}
          onTouchEnd={(e) => {
@ -316,7 +297,7 @@ export const BasePanel: React.FC<BasePanelProps> = ({
      )}

      {isExpanded && (
-        <div 
+        <div
          ref={panelRef}
          className="panel-root"
          style={{
@ -327,30 +308,29 @@ export const BasePanel: React.FC<BasePanelProps> = ({
          }}
        >
          <div className="panel-header">
-            <ThemeProvider theme={theme}>
-              <PanelTypeButton
-                onClick={handleMenuClick}
-                endIcon={<ExpandMoreIcon />}
-                startIcon={getIconForPanel(currentPanelType)}
-              >
-                {availablePanels.find(p => p.id === currentPanelType)?.label}
-              </PanelTypeButton>
+            <PanelTypeButton
+              onClick={handleMenuClick}
+              endIcon={<ExpandMoreIcon />}
+              startIcon={getIconForPanel(currentPanelType)}
+            >
+              {availablePanels.find((p) => p.id === currentPanelType)?.label}
+            </PanelTypeButton>

-              <Menu
-                anchorEl={menuAnchorEl}
-                open={isMenuOpen}
-                onClose={handleMenuClose}
-                PaperProps={{
-                  elevation: 8,
-                  sx: {
-                    border: '1px solid var(--color-divider)',
-                    boxShadow: 'var(--shadow-popup)',
-                  }
-                }}
-              >
-                {[...availablePanels]
-                  .sort((a, b) => a.order - b.order)
-                  .map(type => (
+            <Menu
+              anchorEl={menuAnchorEl}
+              open={isMenuOpen}
+              onClose={handleMenuClose}
+              PaperProps={{
+                elevation: 8,
+                sx: {
+                  border: '1px solid var(--color-divider)',
+                  boxShadow: 'var(--shadow-popup)',
+                },
+              }}
+            >
+              {[...availablePanels]
+                .sort((a, b) => a.order - b.order)
+                .map((type) => (
                  <StyledMenuItem
                    key={type.id}
                    onClick={() => {
@ -359,42 +339,31 @@ export const BasePanel: React.FC<BasePanelProps> = ({
                    }}
                    selected={currentPanelType === type.id}
                  >
-                    <ListItemIcon>
-                      {getIconForPanel(type.id as PanelType)}
-                    </ListItemIcon>
-                    <ListItemText 
+                    <ListItemIcon>{getIconForPanel(type.id as PanelType)}</ListItemIcon>
+                    <ListItemText
                      primary={type.label}
                      secondary={getDescriptionForPanel(type.id as PanelType)}
                      primaryTypographyProps={{
-                        sx: { color: 'var(--color-text)' }
+                        sx: { color: 'var(--color-text)' },
                      }}
                      secondaryTypographyProps={{
-                        sx: { color: 'var(--color-text-secondary)' }
+                        sx: { color: 'var(--color-text-secondary)' },
                      }}
                    />
                  </StyledMenuItem>
                ))}
-              </Menu>
-            </ThemeProvider>
+            </Menu>

            <div className="panel-header-actions">
-              <TldrawUiButton
-                type="icon"
-                onClick={handlePinToggle}
-                className="pin-button"
-              >
+              <TldrawUiButton type="icon" onClick={handlePinToggle} className="pin-button">
                {isPinned ? <PushPinIcon /> : <PushPinOutlinedIcon />}
              </TldrawUiButton>
            </div>
          </div>

-          <ThemeProvider theme={theme}>
-          <div className="panel-content">
-            {renderCurrentPanel()}
-          </div>
-          </ThemeProvider>
+          <div className="panel-content">{renderCurrentPanel()}</div>
        </div>
      )}
    </>
  );
-};
+};