feat: improve phase 6

Author: gustavotoyota

docs/restart-plan/README.md

@@ -1,6 +1,6 @@
 # DeepNotes Restart Plan — Index
 
-> **Last updated:** 2026-05-31 (Phase 8 complete; marketing site builds 20 static HTML routes with vue-router + vite-ssg, theme toggle, restored legacy assets. **Phase 6 status corrected: spatial canvas polish is NOT complete.**)  
+> **Last updated:** 2026-05-31 (Phase 8 complete. Phase 6 state screens + layout cleanup done; sidebars, toolbar, and floating UI exist. Remaining: TableContextMenu, Note/Arrow properties panels, Teleport overlay, horizontal containers, arrow labels, drag-to-reconnect.)  
 > **This document replaces `docs/RESTART_PLAN.md`.** If a prior statement conflicts with this one, this version wins.
 
 ---
@@ -75,16 +75,15 @@ A criterion is **not met** until the verification command or check passes in CI.
 
 ## Current gaps (high-level)
 
-### Phase 6 — Spatial canvas polish (NOT complete)
+### Phase 6 — Spatial canvas polish (in progress)
 
-- **Page editor layout is a card stack, not an immersive shell.** `PageEditorView.vue` is rendered inside `DefaultLayout.vue` (`max-w-3xl` centered column). It must become a fullscreen `q-layout`-style shell with sidebars, toolbar, and floating overlays. No sidebars, no toolbar, no floating buttons exist today.
-- **Left sidebar missing.** No `CurrentPath`, `RecentPages`, `FavoritePages`, or `SelectedPages` panels on `/pages/:pageId`.
-- **Right sidebar missing.** No `NoteProperties` (24 files in legacy), `PageProperties`, or `ArrowProperties` panels. Context-aware editing is impossible.
-- **Toolbar missing.** No `MainToolbar` with Basic/Formatting/Object/Alignment buttons, insert dialogs, or page-specific actions.
-- **Floating UI overlays missing.** No zoom indicator, undo/redo buttons, back/forward nav, screenshot, find/replace toggle, selection count, or user avatars on the canvas.
-- **Arrow rendering is a stub.** `DisplayArrow.vue` draws a single SVG line between note centers. Missing: curve/line body styles, arrow heads (`OpenHead`), labels (TipTap), hitboxes, drag-to-reconnect, interregional logic, anchor positioning.
-- **Note rendering is partial.** `DisplayNote.vue` has basic drag, resize, and head/body editors. Missing: Teleport overlay during drag, drop zones, arrow link zones, link icon, read-only opacity states, scroll handling, and advanced visual parity.
-- **Page state screens missing.** No dedicated `DisplayErrorScreen`, `DisplayNonExistentScreen`, `DisplayPageDeletedScreen`, etc. Inline error cards only.
+- **Left sidebar sections missing.** `CurrentPath` exists; `RecentPages`, `FavoritePages`, `SelectedPages` panels pending.
+- **Right sidebar properties missing.** Snapshots, management, backlinks exist. `NoteProperties` (24 files in legacy), `PageProperties`, `ArrowProperties` panels pending.
+- **Toolbar page actions missing.** `MainToolbar` shell exists with logo, breadcrumb, global nav. Missing: Basic/Formatting/Object/Alignment buttons, insert dialogs, page-specific actions.
+- **Floating UI overlays partial.** Zoom indicator, undo/redo, selection count exist. Missing: back/forward nav, screenshot, find/replace toggle, user avatars on canvas.
+- **Arrow rendering partial.** Curve + line bodies, arrow heads, hitboxes exist. Missing: labels (TipTap), drag-to-reconnect, interregional logic, anchor positioning.
+- **Note rendering partial.** Drag, resize, head/body editors, link icon exist. Missing: Teleport overlay during drag, drop zones, arrow link zones, read-only opacity states, scroll handling.
+- **Page state screens done.** `PageStateScreens.vue` switcher + 8 components created and wired. Some states (`page-deleted`, `group-deleted`, `invited`, `rejected`) require richer API error codes to be fully distinguishable.
 - **Context menu missing.** No `TableContextMenu` (right-click on canvas).
 
 ### Other gaps

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

@@ -55,10 +55,10 @@ Achieve parity with the legacy `/pages/:pageId` immersive spatial canvas experie
 | `LeftSidebar` (shadcn) — Recent, Favorites, Selected, Current path | **Partial** | Resizable collapsible sidebar with path + collab status; Recent/Favorites/Selected sections pending |
 | `RightSidebar` (shadcn) — Note/Page/Arrow properties | **Partial** | Collapsible sidebar with snapshots, management, backlinks; Note/Arrow properties pending |
 | `TableContextMenu` (shadcn) — right-click on canvas | **Not started** | No context menu on canvas |
-| `LoadingOverlay` during page bootstrap | **Partial** | Inline loading text in cards only |
-| Global CSS for spatial routes (`user-select: none`, `overflow: hidden`, `touch-action: none`) | **Not started** | `DefaultLayout.vue` does the opposite |
-| Remove `PageEditorTiptapCard.vue` from page route | **Not started** | Still rendered at bottom of card stack |
-| Dedicated fullscreen state screens (8 total) | **Not started** | No `DisplayErrorScreen`, `DisplayNonExistentScreen`, etc. |
+| `LoadingOverlay` during page bootstrap | **Partial** | Inline loading text in cards only; state screens handle loading/error |
+| Global CSS for spatial routes (`user-select: none`, `overflow: hidden`, `touch-action: none`) | **Done** | `PageLayout.vue` applies `select-none overflow-hidden` on the shell |
+| Remove `PageEditorTiptapCard.vue` from page route | **Done** | File deleted; no longer imported or rendered |
+| Dedicated fullscreen state screens (8 total) | **Done** | `PageStateScreens.vue` switcher + 8 components in `features/pages/screens/`. Detectable states: `loading`, `error`, `page-nonexistent`, `unauthorized`, `password`. `page-deleted`, `group-deleted`, `invited`, `rejected` require richer API error codes to distinguish. |
 
 ### 7. Note visual parity (legacy style, no Quasar)
 | Item | Status | Notes |

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

@@ -23,6 +23,8 @@ import { usePageManagement } from "./usePageManagement";
 import { usePagePathAndPrefs } from "./usePagePathAndPrefs";
 import { usePagePathRealtimeTitles } from "./usePagePathRealtimeTitles";
 import { usePageSnapshots } from "./usePageSnapshots";
+import PageStateScreens from "./screens/PageStateScreens.vue";
+import { usePageStatus } from "./usePageStatus";
 
 import type { SnapshotRow } from "./page-snapshot-list";
 
@@ -88,6 +90,13 @@ const {
   unlockKeyringWithPassword,
 } = collab;
 
+const { status: pageStatus } = usePageStatus({
+  collabLoading,
+  loadError,
+  cryptoError,
+  pageId,
+});
+
 const {
   pathPageIds,
   pathError,
@@ -152,11 +161,12 @@ const {
   saveSnapshotManual,
 } = snapshotsApi;
 
-async function onUnlockWithPassword(password: string) {
+async function onUnlockWithPassword(password: string): Promise<boolean> {
   const ok = await unlockKeyringWithPassword(password);
   if (ok) {
     collabReloadNonce.value++;
   }
+  return ok;
 }
 
 onMounted(() => {
@@ -174,7 +184,18 @@ onMounted(() => {
 
   <template v-else>
     <!-- === Main canvas slot === -->
+    <PageStateScreens
+      v-if="pageStatus !== 'success'"
+      :status="pageStatus"
+      :page-id="pageId"
+      :group-id="collabGroupId"
+      :client="client"
+      :load-error="loadError"
+      :crypto-error="cryptoError"
+      :on-unlock-password="onUnlockWithPassword"
+    />
     <SpatialPageView
+      v-else
       :ydoc="ydoc"
       :default-note-template="noteTemplate"
       :default-arrow-template="arrowTemplate"

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

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+defineProps<{
+  message?: string;
+}>();
+</script>
+
+<template>
+  <div class="flex flex-col items-center justify-center gap-3 text-center">
+    <div class="text-destructive text-lg font-semibold">Error</div>
+    <p class="text-muted-foreground max-w-md text-sm">
+      {{ message || "An unexpected error occurred while loading this page." }}
+    </p>
+  </div>
+</template>

new-deepnotes/apps/web/src/features/pages/screens/DisplayErrorScreen.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+import { Button } from "@/components/ui/button";
+import type { DeepnotesApiClient } from "@/api/client";
+
+const props = defineProps<{
+  groupId: string;
+  client: DeepnotesApiClient;
+}>();
+
+const restoring = ref(false);
+const purging = ref(false);
+const message = ref<string | null>(null);
+
+async function restoreGroup() {
+  restoring.value = true;
+  message.value = null;
+  try {
+    const { error } = await props.client.POST("/api/groups/{groupId}/restore", {
+      params: { path: { groupId: props.groupId } },
+    });
+    if (error) {
+      message.value =
+        typeof error === "object" && "message" in error
+          ? String(error.message)
+          : "Failed to restore group.";
+    } else {
+      message.value = "Group restored. Reloading…";
+      location.reload();
+    }
+  } catch (e) {
+    message.value = e instanceof Error ? e.message : "Failed to restore group.";
+  } finally {
+    restoring.value = false;
+  }
+}
+
+async function purgeGroup() {
+  if (!confirm("Are you sure you want to delete this group permanently?")) return;
+  purging.value = true;
+  message.value = null;
+  try {
+    const { error } = await props.client.POST("/api/groups/{groupId}/purge", {
+      params: { path: { groupId: props.groupId } },
+    });
+    if (error) {
+      message.value =
+        typeof error === "object" && "message" in error
+          ? String(error.message)
+          : "Failed to purge group.";
+    } else {
+      message.value = "Group deleted permanently.";
+    }
+  } catch (e) {
+    message.value = e instanceof Error ? e.message : "Failed to purge group.";
+  } finally {
+    purging.value = false;
+  }
+}
+</script>
+
+<template>
+  <div class="flex flex-col items-center justify-center gap-3 text-center">
+    <div class="text-foreground text-lg font-semibold">Group deleted</div>
+    <p class="text-muted-foreground max-w-md text-sm">
+      This group has been deleted.
+    </p>
+
+    <div class="flex flex-wrap justify-center gap-2">
+      <Button
+        variant="secondary"
+        :disabled="restoring || purging"
+        @click="restoreGroup"
+      >
+        {{ restoring ? "Restoring…" : "Restore group" }}
+      </Button>
+      <Button
+        variant="destructive"
+        :disabled="restoring || purging"
+        @click="purgeGroup"
+      >
+        {{ purging ? "Purging…" : "Delete permanently" }}
+      </Button>
+    </div>
+
+    <p v-if="message" class="text-muted-foreground text-xs">
+      {{ message }}
+    </p>
+  </div>
+</template>