Unified · Split
| @@ -99,19 +99,20 @@ export const Route = createRootRouteWithContext<{ · 98 unmodified lines | ||
| 99 | 99 | }), |
| 100 | 100 | }); |
| 101 | 101 | |
| 102 | +const APP_SHELL = ( | |
| 103 | + <CommandPalette> | |
| 104 | + <AppSidebarLayout> | |
| 105 | + <Outlet /> | |
| 106 | + </AppSidebarLayout> | |
| 107 | + </CommandPalette> | |
| 108 | +); | |
| 109 | + | |
| 102 | 110 | function RootRouteView() { |
| 103 | 111 | const pathname = useLocation({ select: (location) => location.pathname }); |
| 104 | 112 | const { authGateState } = Route.useRouteContext(); |
| 105 | 113 | const primaryEnvironmentAuthenticated = authGateState.status === "authenticated"; |
| 106 | 114 | |
| 107 | − useEffect(() => { | |
| 108 | − const frame = window.requestAnimationFrame(() => { | |
| 109 | − syncBrowserChromeTheme(); | |
| 110 | − }); | |
| 111 | − return () => { | |
| 112 | − window.cancelAnimationFrame(frame); | |
| 113 | − }; | |
| 114 | − }, [pathname]); | |
| 115 | + useBrowserChromeThemeSync(pathname); | |
| 115 | 116 | |
| 116 | 117 | if (pathname === "/pair") { |
| 117 | 118 | return <Outlet />; |
| @@ -121,14 +122,6 @@ function RootRouteView() { · 3 unmodified lines | ||
| 121 | 122 | return <Outlet />; |
| 122 | 123 | } |
| 123 | 124 | |
| 124 | − const appShell = ( | |
| 125 | − <CommandPalette> | |
| 126 | − <AppSidebarLayout> | |
| 127 | − <Outlet /> | |
| 128 | − </AppSidebarLayout> | |
| 129 | − </CommandPalette> | |
| 130 | − ); | |
| 131 | − | |
| 132 | 125 | return ( |
| 133 | 126 | <ToastProvider> |
| 134 | 127 | <AnchoredToastProvider> |
| @@ -142,15 +135,26 @@ function RootRouteView() { · 7 unmodified lines | ||
| 142 | 135 | {primaryEnvironmentAuthenticated ? <WebSocketConnectionCoordinator /> : null} |
| 143 | 136 | {primaryEnvironmentAuthenticated ? <SlowRpcAckToastCoordinator /> : null} |
| 144 | 137 | {primaryEnvironmentAuthenticated ? ( |
| 145 | − <WebSocketConnectionSurface>{appShell}</WebSocketConnectionSurface> | |
| 138 | + <WebSocketConnectionSurface>{APP_SHELL}</WebSocketConnectionSurface> | |
| 146 | 139 | ) : ( |
| 147 | − appShell | |
| 140 | + APP_SHELL | |
| 148 | 141 | )} |
| 149 | 142 | </AnchoredToastProvider> |
| 150 | 143 | </ToastProvider> |
| 151 | 144 | ); |
| 152 | 145 | } |
| 153 | 146 | |
| 147 | +function useBrowserChromeThemeSync(pathname: string) { | |
| 148 | + useEffect(() => { | |
| 149 | + const frame = window.requestAnimationFrame(() => { | |
| 150 | + syncBrowserChromeTheme(); | |
| 151 | + }); | |
| 152 | + return () => { | |
| 153 | + window.cancelAnimationFrame(frame); | |
| 154 | + }; | |
| 155 | + }, [pathname]); | |
| 156 | +} | |
| 157 | + | |
| 154 | 158 | function HostedStaticEnvironmentBootstrap() { |
| 155 | 159 | const savedEnvironmentCount = useSavedEnvironmentRegistryStore( |
| 156 | 160 | (state) => Object.keys(state.byId).length, |