Graph-view round 1 (owner): full-bleed canvas — no padding, under the floating chrome
The home graph view had breathing room on every side (main px-4 py-2, the composer docked below in flow, the header above). Per the owner: - The canvas now owns the whole column — absolute inset-0, from the sidebar to the right edge of the screen, bottom to top, zero padding. - The header floats over the graph (pointer-events-none except the sidebar toggle, so the canvas stays draggable around it). - The new-session blob + stats bar dock OVER the graph at the bottom, no gradient scrims anywhere — the graph runs clean under everything to the very edges. - The renderer itself is untouched: same canvas, same data, same fit logic — only its container grew. The composer keeps chat's DOCK geometry (max-w-[46rem] px-4) so nothing shifts when a session starts. Verified live in headless chromium (1280×800, sidebar open): canvas spans x 288→1280 (sidebar edge → right edge), y 0→800 (bottom to top); the header overlays the top; the dock overlays the bottom with its content ending 16px above the viewport edge.
This commit is contained in:
+23
-15
@@ -9,9 +9,10 @@ import { StatsBar } from "@/components/stats-bar";
|
|||||||
import type { ChatSettings, TurnUsage } from "@/src/core";
|
import type { ChatSettings, TurnUsage } from "@/src/core";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Home — the knowledge graph is the main view (placeholder until the graph
|
* Home — the knowledge graph is the main view, full-bleed edge to edge
|
||||||
* pipeline lands), with the new-session blob docked below it. Sessions live
|
* (owner, graph-view round 1): the canvas owns the whole column, running
|
||||||
* in the toggleable sidebar.
|
* under the header and the new-session dock, both of which float over it
|
||||||
|
* with no gradient scrims. Sessions live in the toggleable sidebar.
|
||||||
*/
|
*/
|
||||||
export function Home() {
|
export function Home() {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
@@ -48,21 +49,28 @@ export function Home() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex h-dvh flex-col">
|
<div className="relative h-dvh">
|
||||||
<header className="flex items-center gap-2 px-3 py-2">
|
{/* Graph — the main view, full-bleed (owner, graph-view round 1): no
|
||||||
<SidebarToggle />
|
padding on any side; the canvas runs from the sidebar to the right
|
||||||
</header>
|
edge and from the bottom to the top, under everything else. */}
|
||||||
|
<main className="absolute inset-0">
|
||||||
{/* Graph — the main view (W4: sigma.js render of the derived graph). */}
|
|
||||||
<main className="min-h-0 flex-1 px-4 py-2">
|
|
||||||
<GraphView />
|
<GraphView />
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
{/* New session — same floating blob as the chat composer. */}
|
{/* Header floats over the graph — pointer-events-none except the
|
||||||
<div className="pb-4">
|
toggle, so the canvas stays draggable/hoverable around it. */}
|
||||||
{/* Matches chat.tsx's DOCK geometry (max-w-[46rem] px-4) so nothing
|
<header className="pointer-events-none absolute inset-x-0 top-0 flex items-center gap-2 px-3 py-2">
|
||||||
shifts when a session starts (owner). */}
|
<div className="pointer-events-auto">
|
||||||
<div className="mx-auto w-full max-w-[46rem] px-4">
|
<SidebarToggle />
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
{/* New session — same floating blob as the chat composer, docked
|
||||||
|
OVER the graph (no gradient: the graph runs clean under it to the
|
||||||
|
bottom edge). Matches chat.tsx's DOCK geometry (max-w-[46rem]
|
||||||
|
px-4) so nothing shifts when a session starts (owner). */}
|
||||||
|
<div className="pointer-events-none absolute inset-x-0 bottom-0 pb-4">
|
||||||
|
<div className="pointer-events-auto mx-auto w-full max-w-[46rem] px-4">
|
||||||
<form
|
<form
|
||||||
className="flex items-end gap-1.5 rounded-2xl border bg-card p-1.5 shadow-lg"
|
className="flex items-end gap-1.5 rounded-2xl border bg-card p-1.5 shadow-lg"
|
||||||
onSubmit={(e) => {
|
onSubmit={(e) => {
|
||||||
|
|||||||
Generated
+2
@@ -27,7 +27,9 @@
|
|||||||
"cmdk": "^1.1.1",
|
"cmdk": "^1.1.1",
|
||||||
"d3-force": "^3.0.0",
|
"d3-force": "^3.0.0",
|
||||||
"d3-selection": "^3.0.0",
|
"d3-selection": "^3.0.0",
|
||||||
|
"d3-shape": "^3.2.0",
|
||||||
"d3-zoom": "^3.0.0",
|
"d3-zoom": "^3.0.0",
|
||||||
|
"dagre-d3-es": "7.0.14",
|
||||||
"embla-carousel-react": "^8.6.0",
|
"embla-carousel-react": "^8.6.0",
|
||||||
"katex": "^0.16.47",
|
"katex": "^0.16.47",
|
||||||
"linkedom": "^0.18.13",
|
"linkedom": "^0.18.13",
|
||||||
|
|||||||
Reference in New Issue
Block a user