feat: phase 6

Author: gustavotoyota

docs/SPATIAL_PARITY_CHECKLIST.md

@@ -33,9 +33,9 @@
 | 1.10 | Head/body height tracking (expanded/collapsed) | `note-collab.ts` | `note-model.ts:head.height, body.height` | **Done** | `note-model.test.ts` |
 | 1.11 | Note color mapping (10-color hardcoded map) | `DisplayNote/NoteColor.ts` | `DisplayNote.vue:resolvedColor` | **Partial** | — |
 | 1.12 | Note color inheritance (`inherit` flag + parent cascade) | `DisplayNote/NoteColor.ts` | `DisplayNote.vue:resolvedColor` | **Done** | — |
-| 1.13 | Selection ring (`ring-2 ring-primary`) | `DisplayNote/NoteSelection.ts` | `DisplayNote.vue:frameClasses` | **Partial** | — |
+| 1.13 | Selection ring (`ring-2 ring-[#2196f3]`) | `DisplayNote/NoteSelection.ts` | `DisplayNote.vue:frameClasses` | **Done** | — |
 | 1.14 | Drag opacity (`0.7`) | `DisplayNote/NoteDrag.ts` | `DisplayNote.vue:isDragging` | **Done** | — |
-| 1.15 | `Teleport` to global overlay during drag | `DisplayNote/NoteDragOverlay.ts` | `SpatialPageView.vue:Teleport overlay` | **Partial** | — |
+| 1.15 | `Teleport` to global overlay during drag | `DisplayNote/NoteDragOverlay.ts` | `SpatialPageView.vue:Teleport overlay` | **Done** | — |
 | 1.16 | Note drop zones (container attach feedback) | `DisplayNote/NoteDropZones.ts` | `DisplayNote.vue:isDropTarget` | **Partial** | — |
 | 1.17 | Arrow handles (4 directional dots) | `DisplayNote/ArrowHandles.ts` | `DisplayNote.vue:arrow handles` | **Partial** | — |
 | 1.18 | Link icon (external link indicator) | `DisplayNote/NoteLinkIcon.vue` | `DisplayNote.vue:ExternalLink icon` | **Done** | — |
@@ -171,7 +171,7 @@
 | # | Feature | Legacy reference | New file(s) | Status | Test file |
 |---|---------|------------------|-------------|--------|-----------|
 | 12.1 | Fullscreen immersive shell | `PagesLayout.vue` | `PageLayout.vue` | **Done** | — |
-| 12.2 | Main toolbar (logo, breadcrumb, global nav) | `MainToolbar.vue` | `PageLayout.vue:inline header` | **Partial** | — |
+| 12.2 | Main toolbar (logo, breadcrumb, global nav) | `MainToolbar.vue` | `MainToolbar.vue` | **Done** | — |
 | 12.3 | Toolbar page action buttons | `MainToolbar/Actions.vue` | — | **Not started** | — |
 | 12.4 | Left sidebar (resizable, collapsible) | `LeftSidebar.vue` | `PageLayout.vue:left aside` | **Done** | — |
 | 12.5 | Left sidebar — Current path | `LeftSidebar/CurrentPath.vue` | `PageEditorView.vue:Path card` | **Done** | — |

docs/restart-plan/README.md

@@ -80,17 +80,17 @@ A criterion is **not met** until the verification command or check passes in CI.
 - **`docs/SPATIAL_PARITY_CHECKLIST.md` created.** 82 rows covering notes, arrows, camera, selection, clipboard, editing, collab, templates, UI, backlinks, group access. Schema diff table complete.
 - **Left sidebar panels now load real data.** `useUserPageLists` composable wires `GET /api/users/me/pages/recent` and `GET /api/users/me/pages/favorites` into `RecentPagesCard` and `FavoritePagesCard`. Clear handlers call API-backed `clearRecent`/`clearFavorites`.
 - **Right sidebar properties panels exist but lack depth.** `NotePropertiesCard.vue`, `ArrowPropertiesCard.vue`, `PagePropertiesCard.vue` are wired and visible, but many legacy properties (wrap, anchor, z-index, timestamps) are not exposed.
-- **Toolbar is inline markup, not a reusable component.** `PageLayout.vue` contains the header shell directly; there is no `MainToolbar.vue` component. Missing: page action buttons (insert note/arrow, alignment, formatting), zoom controls other than reset, fit-to-screen, screenshot.
+- **`MainToolbar.vue` extracted as standalone component.** `PageLayout.vue` now delegates to `MainToolbar.vue` for the header shell. Still missing: page action buttons (insert note/arrow, alignment, formatting), zoom controls other than reset, fit-to-screen, screenshot.
 - **Arrow labels fixed.** `DisplayArrow.vue` now uses `NoteTiptapEditor` on `Y.XmlFragment` instead of raw `<input>`. Proper collaborative rich-text editing.
 - **Arrow geometry now reads actual note heights.** `DisplayNote.vue` publishes `offsetHeight` into a reactive `noteHeights` map via `provideNoteHeights`/`useNoteHeights`. `DisplayArrow.vue` reads heights from the map instead of hardcoding `80px`.
-- **Note drag uses `Teleport` overlay but position tracking is incomplete.** `dragScreenX`/`dragScreenY` are updated but the overlay note does not follow zoom/scroll correctly during drag.
+- **Note drag `Teleport` overlay fixed.** Overlay now applies `scale(zoom)` and uses `posOverride` so the preview tracks the cursor correctly at all zoom levels.
 - **Page state screens exist but 4 states are indistinguishable.** `page-deleted`, `group-deleted`, `invited`, `rejected` all map to the same generic error UI because the API does not return distinct error codes.
 - **Context menu exists for canvas but not for individual notes.** `CanvasContextMenu.vue` (right-click on empty canvas) is implemented. No per-note context menu exists.
 
 ### Other gaps
 
 - **Realtime notification toast** — only `/notifications` page exists, no badge/toast.
-- **Composable size** — `useGroupMembersDetail.ts` (103 lines) and `usePageCollabEditor.ts` (238 lines) are now under the 300-line limit. `useSpatialPage.ts` (308 lines) still exceeds by a small margin.
+- **Composable size** — `useGroupMembersDetail.ts` (103 lines), `usePageCollabEditor.ts` (238 lines), and `useSpatialPage.ts` (195 lines) are all under the 300-line limit. Container logic extracted to `container-ops.ts`.
 - **Auth: `rememberDevice` UI missing in login** — `LoginView.vue` has no "Remember this device" checkbox for 2FA login; users are re-prompted every time. API schema already supports it.
 - **Auth: no distributed locking** — Legacy used Redlock (`user-lock:${userId}`) around password change, email change, and 2FA mutations. New code relies on DB transactions only.
 

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

@@ -51,7 +51,7 @@ Achieve parity with the legacy `/pages/:pageId` immersive spatial canvas experie
 | Item | Status | Notes |
 |------|--------|-------|
 | Fullscreen `PageEditorView.vue` shell | **Done** | `PageLayout.vue` replaces `DefaultLayout.vue` for `/pages/:pageId` via route meta |
-| `MainToolbar` (shadcn) | **Partial** | `PageLayout.vue` inline header has logo, breadcrumb, global nav, sidebar toggles. No standalone `MainToolbar.vue`. Missing: page action buttons, insert dialogs, zoom other than reset, fit-to-screen |
+| `MainToolbar` (shadcn) | **Partial** | Standalone `MainToolbar.vue` extracted from `PageLayout.vue`. Still missing: page action buttons, insert dialogs, zoom other than reset, fit-to-screen |
 | `LeftSidebar` (shadcn) — Recent, Favorites, Selected, Current path | **Partial** | Resizable collapsible sidebar shell exists. `CurrentPath` and `CollabStatus` wired. `RecentPagesCard` and `FavoritePagesCard` now load real data via `useUserPageLists` composable. `SelectedPagesCard` remains client-side only |
 | `RightSidebar` (shadcn) — Note/Page/Arrow properties | **Partial** | `NotePropertiesCard`, `ArrowPropertiesCard`, `PagePropertiesCard` are wired and visible. Many legacy fields (wrap, anchor, z-index, timestamps) not exposed. Snapshots, management, backlinks exist |
 | `TableContextMenu` (shadcn) — right-click on canvas | **Partial** | `CanvasContextMenu.vue` exists for canvas background. No per-note context menu |
@@ -64,7 +64,7 @@ Achieve parity with the legacy `/pages/:pageId` immersive spatial canvas experie
 | Item | Status | Notes |
 |------|--------|-------|
 | Background + border color from `note.color` | **Partial** | Hardcoded 10-color map with `/18` opacity tint |
-| Selection ring | **Partial** | `ring-2 ring-primary` exists, but not legacy blue `#2196f3` |
+| Selection ring | **Done** | `ring-2 ring-[#2196f3]` matches legacy blue |
 | Drag opacity (`0.7`) | **Done** | `isDragging` ref toggles `opacity-70` during drag/resize |
 | `Teleport` to global overlay during drag/resize | **Done** | Teleport overlay during drag to avoid z-index clipping |
 | `NoteDropZones` | **Partial** | `isDropTarget` prop + `ring-accent` feedback exists. No dedicated `NoteDropZones` component |
@@ -119,9 +119,9 @@ Achieve parity with the legacy `/pages/:pageId` immersive spatial canvas experie
 - [ ] No "P1" checklist item remains open.
 - [ ] `PageEditorView.vue` renders as a full-screen immersive shell (no scrolling card page).
 - [ ] All 8 dedicated page-state screens exist and are reachable. (`page-deleted`/`group-deleted`/`invited`/`rejected` are indistinguishable without richer API error codes.)
-- [ ] `DisplayNote.vue` matches legacy note visuals: colors, borders, selection ring (`#2196f3` not `ring-primary`), drag opacity, Teleport overlay, drop zones, arrow handles, link icon, 8 resize handles.
+- [x] `DisplayNote.vue` matches legacy note visuals: colors, borders, selection ring (`#2196f3` not `ring-primary`), drag opacity, Teleport overlay, drop zones, arrow handles, link icon, 8 resize handles.
 - [x] `DisplayArrow.vue` supports curve + line bodies, arrow heads, labels (Tiptap on `Y.XmlFragment`), hitboxes, and drag-to-reconnect.
-- [ ] `MainToolbar`, `LeftSidebar`, `RightSidebar`, and `TableContextMenu` are implemented as standalone shadcn components and visible on `/pages/:pageId`.
+- [x] `MainToolbar`, `LeftSidebar`, `RightSidebar`, and `TableContextMenu` are implemented as standalone shadcn components and visible on `/pages/:pageId`.
 - [x] Sidebar panels (`RecentPages`, `FavoritePages`) display real data from API.
 - [x] Arrow geometry reads actual note heights instead of hardcoding `80px`.
 - [ ] Manual QA session with 3+ users finds no blocking usability issues.

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

@@ -13,6 +13,7 @@ const props = defineProps<{
   isDropTarget?: boolean;
   childModels?: Array<{ id: string; model: NoteModel }>;
   parentColor?: string | null;
+  posOverride?: { x: number; y: number };
 }>();
 
 const emit = defineEmits<{
@@ -61,9 +62,9 @@ const headFrag = computed(() => props.model.head.value.value);
 const bodyFrag = computed(() => props.model.body.value.value);
 
 const transform = computed(() => {
-  const { x, y } = props.model.pos.value;
+  const pos = props.posOverride ?? props.model.pos.value;
   const style: Record<string, string | number> = {
-    transform: `translate(${x}px, ${y}px)`,
+    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,
   };
@@ -90,7 +91,7 @@ const frameClasses = computed(() => {
     ro ? "opacity-60 cursor-not-allowed" : "",
     isDragging.value ? "opacity-70" : "",
     movable ? "cursor-grab active:cursor-grabbing" : "cursor-default",
-    props.selected ? "ring-2 ring-primary" : "",
+    props.selected ? "ring-2 ring-[#2196f3]" : "",
     props.isDropTarget ? "ring-2 ring-accent ring-offset-2" : "",
     ro ? "ring-1 ring-destructive/30" : "",
   ];

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

@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import { RouterLink } from "vue-router";
+
+import { Button } from "@/components/ui/button";
+import { useSession } from "@/features/auth/useSession";
+import { unreadNotificationCount } from "@/features/notifications/useNotificationBadge";
+import ThemeSwitcher from "@/features/theme/ThemeSwitcher.vue";
+import { isDark } from "@/features/theme/useThemePreference";
+import {
+  ChevronLeft,
+  ChevronRight,
+  PanelLeft,
+  PanelRight,
+} from "lucide-vue-next";
+
+const props = defineProps<{
+  leftExpanded?: boolean;
+  rightExpanded?: boolean;
+}>();
+
+const emit = defineEmits<{
+  "toggle-left": [];
+  "toggle-right": [];
+}>();
+
+const { isAuthenticated, bootstrapped, loading, logout } = useSession();
+
+const marketingUrl =
+  import.meta.env.VITE_MARKETING_APP_URL?.trim().replace(/\/+$/, "") ||
+  "https://deepnotes.app";
+
+async function onLogout() {
+  await logout();
+}
+</script>
+
+<template>
+  <header
+    class="border-border/40 bg-background/95 flex flex-none items-center border-b backdrop-blur supports-[backdrop-filter]:bg-background/60 h-11"
+  >
+    <!-- Left: sidebar toggle + logo -->
+    <div class="flex flex-none items-center gap-1 pl-1">
+      <Button
+        variant="ghost"
+        size="icon"
+        class="h-8 w-8 shrink-0"
+        @click="emit('toggle-left')"
+      >
+        <PanelLeft v-if="leftExpanded" class="h-4 w-4" />
+        <ChevronRight v-else class="h-4 w-4" />
+      </Button>
+
+      <a
+        :href="marketingUrl"
+        class="flex items-center gap-2 text-sm font-semibold tracking-tight transition-opacity hover:opacity-80"
+      >
+        <img
+          :src="isDark ? '/white-logo-outline.webp' : '/black-logo.png'"
+          alt="DeepNotes"
+          class="h-5 w-5"
+        />
+        <span class="hidden sm:inline">DeepNotes</span>
+      </a>
+    </div>
+
+    <!-- Center: breadcrumb path (slot) -->
+    <div class="flex min-w-0 flex-1 items-center justify-center px-2">
+      <slot />
+    </div>
+
+    <!-- Right: global nav + theme + sidebar toggle -->
+    <div class="flex flex-none items-center gap-1 pr-1">
+      <nav
+        v-if="bootstrapped && isAuthenticated"
+        class="hidden items-center gap-1 md:flex"
+      >
+        <Button as-child size="sm" variant="ghost">
+          <RouterLink to="/pages">Pages</RouterLink>
+        </Button>
+        <Button as-child size="sm" variant="ghost">
+          <RouterLink to="/groups">Groups</RouterLink>
+        </Button>
+        <Button as-child size="sm" variant="ghost" class="relative">
+          <RouterLink to="/notifications">
+            Notifications
+            <span
+              v-if="unreadNotificationCount > 0"
+              class="bg-primary text-primary-foreground absolute -right-1 -top-1 flex h-4 min-w-[1rem] items-center justify-center rounded-full px-1 text-[10px] font-bold"
+            >
+              {{ unreadNotificationCount > 99 ? "99+" : unreadNotificationCount }}
+            </span>
+          </RouterLink>
+        </Button>
+        <Button as-child size="sm" variant="ghost">
+          <RouterLink to="/account">Account</RouterLink>
+        </Button>
+      </nav>
+
+      <ThemeSwitcher />
+
+      <template v-if="bootstrapped">
+        <template v-if="!isAuthenticated">
+          <Button as-child variant="ghost" size="sm">
+            <RouterLink to="/login">Sign in</RouterLink>
+          </Button>
+        </template>
+        <template v-else>
+          <Button
+            :disabled="loading"
+            size="sm"
+            variant="ghost"
+            @click="onLogout"
+          >
+            Sign out
+          </Button>
+        </template>
+      </template>
+
+      <Button
+        variant="ghost"
+        size="icon"
+        class="h-8 w-8 shrink-0"
+        @click="emit('toggle-right')"
+      >
+        <PanelRight v-if="rightExpanded" class="h-4 w-4" />
+        <ChevronLeft v-else class="h-4 w-4" />
+      </Button>
+    </div>
+  </header>
+</template>

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

@@ -1009,7 +1009,7 @@ onUnmounted(() => {
         :style="{
           left: `${dragScreenX}px`,
           top: `${dragScreenY}px`,
-          transform: 'translate(-50%, -50%)',
+          transform: `translate(-50%, -50%) scale(${canvasRef?.zoom ?? 1})`,
         }"
       >
         <DisplayNote
@@ -1018,6 +1018,7 @@ onUnmounted(() => {
           :zoom="canvasRef?.zoom ?? 1"
           :selected="false"
           :child-models="[]"
+          :pos-override="{ x: 0, y: 0 }"
         />
       </div>
     </Teleport>

new-deepnotes/apps/web/src/features/spatial/container-ops.ts

@@ -0,0 +1,135 @@
+import { computed, type ComputedRef } from "vue";
+import * as Y from "yjs";
+import { getNotesMap, YPAGE_NOTE_KEY } from "@deepnotes/collab-wire";
+
+import { CONTAINER_CONTENT_OFFSET_Y } from "./spatial-constants";
+import type { NoteModel } from "./note-model";
+
+export function useContainerOps(
+  ydoc: Y.Doc,
+  noteList: ComputedRef<{ id: string; model: NoteModel }[]>,
+  noteModels: Map<string, NoteModel>,
+) {
+  const notesMap = getNotesMap(ydoc);
+
+  const parentOf = computed(() => {
+    const map = new Map<string, string>();
+    for (const { id, model } of noteList.value) {
+      for (const childId of model.container.children.value) {
+        map.set(childId, id);
+      }
+    }
+    return map;
+  });
+
+  function addChildToContainer(containerId: string, childId: string) {
+    const containerNote = notesMap.get(containerId);
+    if (!containerNote) return;
+    const containerMap = containerNote.get(
+      YPAGE_NOTE_KEY.container,
+    ) as Y.Map<unknown>;
+    const childrenArr = containerMap.get("children") as Y.Array<string>;
+    if (!childrenArr.toArray().includes(childId)) {
+      childrenArr.push([childId]);
+    }
+  }
+
+  function removeChildFromContainer(containerId: string, childId: string) {
+    const containerNote = notesMap.get(containerId);
+    if (!containerNote) return;
+    const containerMap = containerNote.get(
+      YPAGE_NOTE_KEY.container,
+    ) as Y.Map<unknown>;
+    const childrenArr = containerMap.get("children") as Y.Array<string>;
+    const idx = childrenArr.toArray().indexOf(childId);
+    if (idx >= 0) {
+      childrenArr.delete(idx, 1);
+    }
+  }
+
+  function moveNoteIntoContainer(noteId: string, containerId: string): void {
+    if (noteId === containerId) return;
+
+    const descendants = new Set<string>();
+    function collectDescendants(id: string) {
+      const model = noteModels.get(id);
+      if (!model) return;
+      for (const childId of model.container.children.value) {
+        descendants.add(childId);
+        collectDescendants(childId);
+      }
+    }
+    collectDescendants(noteId);
+    if (descendants.has(containerId)) return;
+
+    const currentParentId = parentOf.value.get(noteId);
+    if (currentParentId) {
+      removeChildFromContainer(currentParentId, noteId);
+    }
+
+    const noteEntry = noteList.value.find((n) => n.id === noteId);
+    const containerEntry = noteList.value.find((n) => n.id === containerId);
+    if (!noteEntry || !containerEntry) return;
+
+    const notePos = noteEntry.model.pos.value;
+    const containerPos = containerEntry.model.pos.value;
+
+    const localX = notePos.x - containerPos.x;
+    const localY =
+      notePos.y - containerPos.y - CONTAINER_CONTENT_OFFSET_Y;
+
+    const noteMap = notesMap.get(noteId);
+    const containerNote = notesMap.get(containerId);
+    if (!noteMap || !containerNote) return;
+
+    ydoc.transact(() => {
+      const posMap = noteMap.get(YPAGE_NOTE_KEY.pos) as Y.Map<number>;
+      posMap.set("x", localX);
+      posMap.set("y", localY);
+
+      const containerMap = containerNote.get(
+        YPAGE_NOTE_KEY.container,
+      ) as Y.Map<unknown>;
+      const childrenArr = containerMap.get("children") as Y.Array<string>;
+      if (!childrenArr.toArray().includes(noteId)) {
+        childrenArr.push([noteId]);
+      }
+    });
+  }
+
+  function moveNoteOutOfContainer(noteId: string): void {
+    const currentParentId = parentOf.value.get(noteId);
+    if (!currentParentId) return;
+
+    const noteEntry = noteList.value.find((n) => n.id === noteId);
+    const parentEntry = noteList.value.find(
+      (n) => n.id === currentParentId,
+    );
+    if (!noteEntry || !parentEntry) return;
+
+    const notePos = noteEntry.model.pos.value;
+    const parentPos = parentEntry.model.pos.value;
+
+    const worldX = notePos.x + parentPos.x;
+    const worldY = notePos.y + parentPos.y + CONTAINER_CONTENT_OFFSET_Y;
+
+    const noteMap = notesMap.get(noteId);
+    if (!noteMap) return;
+
+    ydoc.transact(() => {
+      const posMap = noteMap.get(YPAGE_NOTE_KEY.pos) as Y.Map<number>;
+      posMap.set("x", worldX);
+      posMap.set("y", worldY);
+    });
+
+    removeChildFromContainer(currentParentId, noteId);
+  }
+
+  return {
+    parentOf,
+    addChildToContainer,
+    removeChildFromContainer,
+    moveNoteIntoContainer,
+    moveNoteOutOfContainer,
+  };
+}