refactor(theme): hoist ThemeProvider to App.tsx root
This commit is contained in:
CC Worker
parent
fedbd903ff
commit
07ceef1294
44
src/App.tsx
44
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;
|
||||
|
||||
|
||||
@ -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>
|
||||
);
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
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 {
|
||||
Button,
|
||||
@ -8,9 +9,6 @@ import {
|
||||
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,34 +128,24 @@ 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);
|
||||
|
||||
@ -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);
|
||||
@ -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,40 +339,29 @@ export const BasePanel: React.FC<BasePanelProps> = ({
|
||||
}}
|
||||
selected={currentPanelType === type.id}
|
||||
>
|
||||
<ListItemIcon>
|
||||
{getIconForPanel(type.id as PanelType)}
|
||||
</ListItemIcon>
|
||||
<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>
|
||||
)}
|
||||
</>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user