stroblmeandClaude Opus 5
39ee0e0aa5
The canvas lays itself out: a layered graph, left to right on a desktop and top to bottom on a phone, with room reserved for the value each edge carries. Nodes cannot be dragged and `NodeDef.position` is gone from the document — a graph nobody can arrange is one worth keeping small, which is what keeps flows atomic. Endpoints join the same layout, so their lanes and the localStorage that remembered where they were dragged go too. Mobile, per the new Responsive section of DESIGN-GUIDELINES.md: the dock caps its width and wraps instead of running off the screen, the dashboard stacks into one column rather than shrinking a wall panel to a fifth of its size, and Home stops widening its grid track past the viewport. A Playwright project at a phone's width fails the build when a screen no longer fits. Along the way: publish is the checkmark that was already there rather than a button that appears and disappears, with discard beside it on both the flow and the dashboard; the brain reveals a neuron's name on the first tap; and the port sparklines get room to breathe. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01VDSXaRhvqHYNevgDGmNAto
59 lines
1.9 KiB
TypeScript
59 lines
1.9 KiB
TypeScript
import { useQuery } from "@tanstack/react-query"
|
|
import { createFileRoute, redirect } from "@tanstack/react-router"
|
|
|
|
import type { Dashboard } from "@/components/Dashboard/DashboardView"
|
|
import {
|
|
CanvasSurface,
|
|
DashboardView,
|
|
} from "@/components/Dashboard/DashboardView"
|
|
import { dashboardQueryOptions } from "@/components/Dashboard/queries"
|
|
import { useFlowSocket } from "@/components/Flow/useFlowSocket"
|
|
import { isLoggedIn } from "@/hooks/useAuth"
|
|
import { useIsMobile } from "@/hooks/useMobile"
|
|
|
|
/**
|
|
* What a wall panel is pointed at.
|
|
*
|
|
* Deliberately outside both shells: no sidebar, no footer, no editing, and no
|
|
* column cap — the widgets are the whole page. Route splitting means a panel
|
|
* never downloads the editor or the grid library either.
|
|
*/
|
|
export const Route = createFileRoute("/view/$name")({
|
|
component: PanelView,
|
|
beforeLoad: async () => {
|
|
if (!isLoggedIn()) {
|
|
throw redirect({ to: "/login" })
|
|
}
|
|
},
|
|
head: ({ params }) => ({ meta: [{ title: `${params.name} - Fluksio` }] }),
|
|
})
|
|
|
|
function PanelView() {
|
|
const { name } = Route.useParams()
|
|
useFlowSocket()
|
|
const { data: dashboard } = useQuery(dashboardQueryOptions(name))
|
|
// A landscape arrangement scaled onto a phone comes out at about a fifth of
|
|
// its size, which reads as nothing at all. Stack it instead.
|
|
const stacked = useIsMobile()
|
|
|
|
if (!dashboard) return <main className="h-svh w-full" />
|
|
|
|
if (stacked) {
|
|
return (
|
|
<main className="h-svh w-full overflow-y-auto p-4">
|
|
<DashboardView dashboard={dashboard as Dashboard} stacked />
|
|
</main>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<main className="h-svh w-full overflow-hidden p-4">
|
|
{/* The panel's own surface, scaled to whatever screen it landed on. No
|
|
dots: nothing is being arranged here. */}
|
|
<CanvasSurface dashboard={dashboard as Dashboard}>
|
|
{() => <DashboardView dashboard={dashboard as Dashboard} />}
|
|
</CanvasSurface>
|
|
</main>
|
|
)
|
|
}
|