fix(web): restore _app.tsx layout route deleted in 2175c24 (blank-screen fix)
Commit2175c24deleted apps/web/src/routes/_app.tsx alongside __root.tsx. Only __root was restored (28b2cbd). With _app.tsx missing, routeTree.ts's import './routes/_app' resolved to the _app/ directory index (dashboard route), making the route its own child — TanStack buildRouteTree throws 'Invariant failed' at module init and React never mounts (blank page, no console error). Restores the exact file: _app pathless layout with Sidebar/Topbar/Outlet.
This commit is contained in:
@@ -0,0 +1,52 @@
|
|||||||
|
import { useEffect } from "react";
|
||||||
|
import { createRoute, Outlet } from "@tanstack/react-router";
|
||||||
|
import { Route as rootRoute } from "./__root";
|
||||||
|
import { Sidebar } from "@/components/shell/sidebar";
|
||||||
|
import { Topbar } from "@/components/shell/topbar";
|
||||||
|
import { CommandPalette } from "@/components/shell/command-palette";
|
||||||
|
import { ShortcutsHelp } from "@/components/shell/shortcuts-help";
|
||||||
|
import { useKeyboardShortcuts } from "@/hooks/use-keyboard-shortcuts";
|
||||||
|
|
||||||
|
function AppLayout() {
|
||||||
|
useKeyboardShortcuts();
|
||||||
|
|
||||||
|
// Apply persisted appearance preferences (density, reduced motion, font size)
|
||||||
|
// right after the first paint. The settings page updates these live while
|
||||||
|
// open; this covers reloads where the settings page was never visited.
|
||||||
|
useEffect(() => {
|
||||||
|
const root = document.documentElement;
|
||||||
|
root.classList.remove("density-compact", "density-spacious", "reduce-motion");
|
||||||
|
const density = localStorage.getItem("density");
|
||||||
|
if (density === "compact") root.classList.add("density-compact");
|
||||||
|
if (density === "spacious") root.classList.add("density-spacious");
|
||||||
|
if (localStorage.getItem("reduced-motion") === "true") root.classList.add("reduce-motion");
|
||||||
|
const fontSize = localStorage.getItem("font-size");
|
||||||
|
if (fontSize === "large") root.style.fontSize = "18px";
|
||||||
|
else if (fontSize === "small") root.style.fontSize = "13px";
|
||||||
|
else root.style.fontSize = "16px";
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex min-h-screen">
|
||||||
|
<Sidebar />
|
||||||
|
<div className="flex flex-1 flex-col">
|
||||||
|
<Topbar />
|
||||||
|
<main
|
||||||
|
id="main-content"
|
||||||
|
className="flex-1 overflow-auto p-[calc(1rem*var(--density-scale))] md:p-[calc(1.5rem*var(--density-scale))]"
|
||||||
|
tabIndex={-1}
|
||||||
|
>
|
||||||
|
<Outlet />
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
<CommandPalette />
|
||||||
|
<ShortcutsHelp />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Route = createRoute({
|
||||||
|
getParentRoute: () => rootRoute,
|
||||||
|
id: "_app",
|
||||||
|
component: AppLayout,
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user