Melvin Strobl
e600fbfcd2
The footer was a user card with the theme picker and log out buried in its dropdown. It is now two plain entries, Settings and Log Out, and the theme moved into the settings page as its own tab. The dark sidebar never matched the canvas because _canvas.tsx painted bg-card across the whole viewport underneath it, so the floating panel's bg-card/80 resolved to card over card and its gutter was card too. Nothing there should paint a surface; the panel now reads the same as the other frosted chrome. The superuser guard sliced the first three tabs, which silently changed meaning when a fourth arrived.
40 lines
1.2 KiB
TypeScript
40 lines
1.2 KiB
TypeScript
import { createFileRoute, Outlet, redirect } from "@tanstack/react-router"
|
|
|
|
import AppSidebar from "@/components/Sidebar/AppSidebar"
|
|
import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar"
|
|
import { isLoggedIn } from "@/hooks/useAuth"
|
|
|
|
/**
|
|
* The full-bleed shell. Same frosted sidebar as `_layout`, but the content
|
|
* region is the whole viewport: the flow editor floats its own chrome over the
|
|
* canvas instead of sitting inside a padded column.
|
|
*
|
|
* Nothing here paints a surface. The canvas is `--background`, so an opaque
|
|
* `bg-card` on the shell would sit *under* the floating sidebar and turn its
|
|
* `bg-card/80 backdrop-blur-md` into a plain `bg-card` slab with a card-coloured
|
|
* moat around it — the frost has to composite against the canvas to read right.
|
|
*/
|
|
export const Route = createFileRoute("/_canvas")({
|
|
component: CanvasLayout,
|
|
beforeLoad: async () => {
|
|
if (!isLoggedIn()) {
|
|
throw redirect({ to: "/login" })
|
|
}
|
|
},
|
|
})
|
|
|
|
function CanvasLayout() {
|
|
return (
|
|
<SidebarProvider>
|
|
<AppSidebar />
|
|
<SidebarInset>
|
|
<main className="relative h-svh overflow-hidden">
|
|
<Outlet />
|
|
</main>
|
|
</SidebarInset>
|
|
</SidebarProvider>
|
|
)
|
|
}
|
|
|
|
export default CanvasLayout
|