feat: add container layout rendering, toolbar action slot, and insertNoteAtCenter method

Author: gustavotoyota

docs/restart-plan/phase-6-spatial-polish.md

@@ -1,7 +1,7 @@
 # Phase 6: Spatial canvas polish
 
 > **Prerequisites:** Phase 5 done.  
-> **Status:** In progress (2026-05-31 — **New this session:** `MainToolbar.test.ts` (7), `PageLayout.test.ts` (10), `RecentPagesCard.test.ts` (5), `FavoritePagesCard.test.ts` (5), `SelectedPagesCard.test.ts` (5), `useNoteContextMenu.test.ts` (5) added. `DisplayNote.test.ts` expanded to 21 tests. `fitToScreen` now reads actual note heights from reactive map. **Per-note context menu implemented:** `NoteContextMenu.vue` + `useNoteContextMenu.ts` composable wired into `DisplayNote.vue` and `SpatialPageView.vue`. `SpatialPageView.vue` previously refactored. Canvas actions, box selection, arrow drag, arrow reconnect, note drag previously extracted into composables.)
+> **Status:** In progress (2026-05-31 — **New this session:** Container rendering in `DisplayNote.vue` now enforces `spatial` vs non-spatial layout, `stretchChildren`, and `wrapChildren`. `DisplayNote.test.ts` expanded to 26 tests with 5 new container layout tests. **Toolbar page action buttons started:** `MainToolbar.vue` gained `actions` slot; `PageEditorView.vue` wires "Insert Note" button that calls `SpatialPageView.insertNoteAtCenter()`. **Bug fix:** `SpatialPageView.vue` `setNoteZIndex` corrected to set primitive `zIndex` instead of treating it as nested `Y.Map`. **New tests:** `SpatialPageView.test.ts` added with 5 tests covering rendering, double-click creation, Ctrl+A+Delete, and exposed method.)
 
 ---
 

new-deepnotes/apps/web/src/features/pages/PageEditorView.vue

@@ -9,6 +9,7 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
+import { Plus } from "lucide-vue-next";
 
 import { useSession } from "../auth/useSession";
 import SpatialPageView from "../spatial/SpatialPageView.vue";
@@ -54,6 +55,8 @@ const pageId = computed(() => String(route.params.pageId ?? ""));
 const snapshots = ref<SnapshotRow[]>([]);
 const snapshotLoading = ref(false);
 
+const spatialViewRef = ref<any>(null);
+
 // Track selected note for properties panel
 const selectedNoteId = ref<string | null>(null);
 const selectedNoteModel = ref<any>(null);
@@ -222,6 +225,7 @@ onMounted(() => {
       :on-unlock-password="onUnlockWithPassword"
     />
     <SpatialPageView
+      ref="spatialViewRef"
       v-else
       :ydoc="ydoc"
       :default-note-template="noteTemplate"
@@ -230,6 +234,19 @@ onMounted(() => {
       @select-arrow="selectedArrowId = $event?.[0] ?? null; selectedArrowModel = $event?.[1] ?? null"
     />
 
+    <!-- === Toolbar actions === -->
+    <template #toolbar-actions>
+      <Button
+        variant="ghost"
+        size="sm"
+        class="gap-1"
+        @click="spatialViewRef?.insertNoteAtCenter()"
+      >
+        <Plus class="h-4 w-4" />
+        <span class="hidden sm:inline">Note</span>
+      </Button>
+    </template>
+
     <!-- === Toolbar center: breadcrumb path === -->
     <template #toolbar-center>
       <nav

new-deepnotes/apps/web/src/features/spatial/DisplayNote.test.ts

@@ -11,6 +11,10 @@ function createNoteModel(
   id: string,
   opts?: {
     containerEnabled?: boolean;
+    containerSpatial?: boolean;
+    containerHorizontal?: boolean;
+    containerWrapChildren?: boolean;
+    containerStretchChildren?: boolean;
     collapsingEnabled?: boolean;
     colorInherit?: boolean;
     colorValue?: string;
@@ -23,6 +27,10 @@ function createNoteModel(
   if (opts?.containerEnabled) {
     const containerMap = noteMap.get("container") as Y.Map<unknown>;
     containerMap.set("enabled", true);
+    if (opts.containerSpatial !== undefined) containerMap.set("spatial", opts.containerSpatial);
+    if (opts.containerHorizontal !== undefined) containerMap.set("horizontal", opts.containerHorizontal);
+    if (opts.containerWrapChildren !== undefined) containerMap.set("wrapChildren", opts.containerWrapChildren);
+    if (opts.containerStretchChildren !== undefined) containerMap.set("stretchChildren", opts.containerStretchChildren);
   }
   if (opts?.collapsingEnabled) {
     const collapsingMap = noteMap.get("collapsing") as Y.Map<boolean>;
@@ -335,4 +343,123 @@ describe("DisplayNote", () => {
     await el.trigger('contextmenu');
     expect(wrapper.emitted('context-menu')).toBeUndefined();
   });
+
+  it("renders spatial container children with absolute positioning", () => {
+    const ydoc = createPageYDoc();
+    const parentModel = createNoteModel(ydoc, "parent", { containerEnabled: true, containerSpatial: true });
+    const childModel = createNoteModel(ydoc, "child-1");
+
+    wrapper = mount(DisplayNote, {
+      props: {
+        id: "parent",
+        model: parentModel,
+        zoom: 1,
+        childModels: [{ id: "child-1", model: childModel }],
+      },
+    });
+
+    const container = wrapper.find('[data-testid="container-children"]');
+    expect(container.exists()).toBe(true);
+    expect(container.classes()).not.toContain("flex");
+
+    const child = container.find('[data-testid="display-note"]');
+    expect(child.classes()).toContain("absolute");
+    expect(child.classes()).not.toContain("relative");
+  });
+
+  it("renders non-spatial horizontal container with flex row", () => {
+    const ydoc = createPageYDoc();
+    const parentModel = createNoteModel(ydoc, "parent", {
+      containerEnabled: true,
+      containerSpatial: false,
+      containerHorizontal: true,
+    });
+    const childModel = createNoteModel(ydoc, "child-1");
+
+    wrapper = mount(DisplayNote, {
+      props: {
+        id: "parent",
+        model: parentModel,
+        zoom: 1,
+        childModels: [{ id: "child-1", model: childModel }],
+      },
+    });
+
+    const container = wrapper.find('[data-testid="container-children"]');
+    expect(container.classes()).toContain("flex");
+    expect(container.classes()).toContain("flex-row");
+
+    const child = container.find('[data-testid="display-note"]');
+    expect(child.classes()).toContain("relative");
+    expect(child.classes()).not.toContain("absolute");
+  });
+
+  it("renders non-spatial vertical container with flex col", () => {
+    const ydoc = createPageYDoc();
+    const parentModel = createNoteModel(ydoc, "parent", {
+      containerEnabled: true,
+      containerSpatial: false,
+      containerHorizontal: false,
+    });
+    const childModel = createNoteModel(ydoc, "child-1");
+
+    wrapper = mount(DisplayNote, {
+      props: {
+        id: "parent",
+        model: parentModel,
+        zoom: 1,
+        childModels: [{ id: "child-1", model: childModel }],
+      },
+    });
+
+    const container = wrapper.find('[data-testid="container-children"]');
+    expect(container.classes()).toContain("flex");
+    expect(container.classes()).toContain("flex-col");
+  });
+
+  it("applies flex-wrap when wrapChildren is true", () => {
+    const ydoc = createPageYDoc();
+    const parentModel = createNoteModel(ydoc, "parent", {
+      containerEnabled: true,
+      containerSpatial: false,
+      containerHorizontal: true,
+      containerWrapChildren: true,
+    });
+    const childModel = createNoteModel(ydoc, "child-1");
+
+    wrapper = mount(DisplayNote, {
+      props: {
+        id: "parent",
+        model: parentModel,
+        zoom: 1,
+        childModels: [{ id: "child-1", model: childModel }],
+      },
+    });
+
+    const container = wrapper.find('[data-testid="container-children"]');
+    expect(container.classes()).toContain("flex-wrap");
+  });
+
+  it("applies items-stretch when stretchChildren is true", () => {
+    const ydoc = createPageYDoc();
+    const parentModel = createNoteModel(ydoc, "parent", {
+      containerEnabled: true,
+      containerSpatial: false,
+      containerHorizontal: true,
+      containerStretchChildren: true,
+    });
+    const childModel = createNoteModel(ydoc, "child-1");
+
+    wrapper = mount(DisplayNote, {
+      props: {
+        id: "parent",
+        model: parentModel,
+        zoom: 1,
+        childModels: [{ id: "child-1", model: childModel }],
+      },
+    });
+
+    const container = wrapper.find('[data-testid="container-children"]');
+    expect(container.classes()).toContain("items-stretch");
+  });
 });

new-deepnotes/apps/web/src/features/spatial/DisplayNote.vue

@@ -4,6 +4,7 @@ import { ChevronDown, ChevronRight, ExternalLink } from "lucide-vue-next";
 import type { NoteModel } from "./note-model";
 import NoteTiptapEditor from "./NoteTiptapEditor.vue";
 import { useNoteHeights } from "./useNoteHeights";
+import { CONTAINER_CONTENT_OFFSET_Y } from "./spatial-constants";
 
 const props = defineProps<{
   id: string;
@@ -14,6 +15,7 @@ const props = defineProps<{
   childModels?: Array<{ id: string; model: NoteModel }>;
   parentColor?: string | null;
   posOverride?: { x: number; y: number };
+  isFlexChild?: boolean;
 }>();
 
 const emit = defineEmits<{
@@ -64,12 +66,13 @@ const headFrag = computed(() => props.model.head.value.value);
 const bodyFrag = computed(() => props.model.body.value.value);
 
 const transform = computed(() => {
-  const pos = props.posOverride ?? props.model.pos.value;
-  const style: Record<string, string | number> = {
-    transform: `translate(${pos.x}px, ${pos.y}px)`,
-    width: props.model.width.value.expanded === "Auto" ? "auto" : `${props.model.width.value.expanded}px`,
-    zIndex: props.model.zIndex.value,
-  };
+  const style: Record<string, string | number> = {};
+  if (!props.isFlexChild) {
+    const pos = props.posOverride ?? props.model.pos.value;
+    style.transform = `translate(${pos.x}px, ${pos.y}px)`;
+    style.zIndex = props.model.zIndex.value;
+  }
+  style.width = props.model.width.value.expanded === "Auto" ? "auto" : `${props.model.width.value.expanded}px`;
   const color = resolvedColor.value;
   if (color) {
     style.borderColor = color;
@@ -78,18 +81,19 @@ const transform = computed(() => {
   return style;
 });
 
-const containerLayoutClass = computed(() => {
-  if (!props.model.container.enabled.value) return '';
-  return props.model.container.horizontal.value ? 'flex-row' : 'flex-col';
-});
+const containerSpatial = computed(() => props.model.container.spatial.value);
+const containerHorizontal = computed(() => props.model.container.horizontal.value);
+const containerWrapChildren = computed(() => props.model.container.wrapChildren.value);
+const containerStretchChildren = computed(() => props.model.container.stretchChildren.value);
 
 const isDragging = ref(false);
 
 const frameClasses = computed(() => {
   const ro = props.model.readOnly.value;
   const movable = props.model.movable.value && !ro;
   return [
-    "border-border bg-card text-card-foreground pointer-events-auto absolute top-0 left-0 rounded-md border shadow-sm select-none transition-opacity",
+    "border-border bg-card text-card-foreground pointer-events-auto rounded-md border shadow-sm select-none transition-opacity",
+    props.isFlexChild ? "relative flex-none" : "absolute top-0 left-0",
     ro ? "opacity-60 cursor-not-allowed" : "",
     isDragging.value ? "opacity-70" : "",
     movable ? "cursor-grab active:cursor-grabbing" : "cursor-default",
@@ -355,9 +359,18 @@ function onContextMenu(e: MouseEvent) {
     <!-- container children -->
     <template v-if="model.container.enabled.value && childModels?.length && !model.collapsing.collapsed.value">
       <div
-        class="border-border pointer-events-none absolute inset-x-0 bottom-0 border-t"
-        :class="model.container.horizontal.value ? 'left-0 right-0 top-0 bottom-0 border-t-0 border-l' : ''"
-        :style="model.container.horizontal.value ? 'left: 100%; top: 0; width: auto; height: 100%;' : 'top: 3rem'"
+        data-testid="container-children"
+        class="absolute inset-x-0 bottom-0 overflow-visible"
+        :class="[
+          containerSpatial
+            ? ''
+            : [
+                containerHorizontal ? 'flex flex-row' : 'flex flex-col',
+                containerWrapChildren ? 'flex-wrap' : 'flex-nowrap',
+                containerStretchChildren ? 'items-stretch' : 'items-start',
+              ],
+        ]"
+        :style="{ top: `${CONTAINER_CONTENT_OFFSET_Y}px` }"
       >
         <DisplayNote
           v-for="child in childModels"
@@ -366,6 +379,7 @@ function onContextMenu(e: MouseEvent) {
           :model="child.model"
           :zoom="zoom"
           :parent-color="resolvedColor"
+          :is-flex-child="!containerSpatial"
           @dragend="$emit('dragend', $event)"
         />
       </div>

new-deepnotes/apps/web/src/features/spatial/MainToolbar.test.ts

@@ -138,4 +138,16 @@ describe("MainToolbar", () => {
 
     expect(wrapper.find('[data-testid="center-slot"]').exists()).toBe(true);
   });
+
+  it("renders actions slot content", () => {
+    mockSession();
+    wrapper = mount(MainToolbar, {
+      props: { leftExpanded: true, rightExpanded: true },
+      slots: {
+        actions: h("button", { "data-testid": "action-btn" }, "Action"),
+      },
+    });
+
+    expect(wrapper.find('[data-testid="action-btn"]').exists()).toBe(true);
+  });
 });

new-deepnotes/apps/web/src/features/spatial/MainToolbar.vue

@@ -68,6 +68,11 @@ async function onLogout() {
       <slot />
     </div>
 
+    <!-- Page actions -->
+    <div class="hidden flex-none items-center gap-1 pr-1 md:flex">
+      <slot name="actions" />
+    </div>
+
     <!-- Right: global nav + theme + sidebar toggle -->
     <div class="flex flex-none items-center gap-1 pr-1">
       <nav