feat: add reverse children and import children features to note containers

- Add marked v18.0.4 dependency for markdown parsing
- Implement reverseChildren function to reverse order of container children
- Add importChildrenFromFiles function to create child notes from text/markdown files
- Add "Reverse children" and "Import children" buttons to NotePropertiesCard
- Export serializeNote/serializeArrow from clipboard.ts and add cloneSelection helper
- Wire up reverse-children and import-children events

Author: gustavotoyota

new-deepnotes/apps/web/package.json

@@ -51,6 +51,7 @@
     "html2canvas": "^1.4.1",
     "katex": "0.16.22",
     "lowlight": "3.3.0",
+    "marked": "^18.0.4",
     "msgpackr": "^1.11.2",
     "nanoid": "^5.1.5",
     "openapi-fetch": "^0.17.0",

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

@@ -440,6 +440,19 @@ async function handleSetNoteAsDefault() {
   }
 }
 
+function handleReverseChildren() {
+  if (!selectedNoteId.value) return;
+  spatialViewRef.value?.reverseChildren?.(selectedNoteId.value);
+}
+
+async function handleImportChildren(files: FileList) {
+  if (!selectedNoteId.value) return;
+  await spatialViewRef.value?.importChildrenFromFiles?.(
+    selectedNoteId.value,
+    Array.from(files),
+  );
+}
+
 async function handleCreateNewPage() {
   pageOpsMessage.value = null;
   const id = pageId.value;
@@ -799,6 +812,8 @@ onMounted(() => {
           @swap-head-body="handleSwapHeadBody"
           @copy-link="handleCopyNoteLink"
           @set-as-default="handleSetNoteAsDefault"
+          @reverse-children="handleReverseChildren"
+          @import-children="handleImportChildren"
         />
 
         <ArrowPropertiesCard

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

@@ -97,17 +97,22 @@ describe("MainToolbar", () => {
     expect(wrapper.emitted("toggle-right")).toHaveLength(1);
   });
 
-  it("shows notification icon link when authenticated and bootstrapped", () => {
+  it("shows notification icon button (inline popup) when authenticated and bootstrapped", () => {
     mockSession({ isAuthenticated: true, bootstrapped: true });
     wrapper = mount(MainToolbar, {
       props: { leftExpanded: true, rightExpanded: true },
     });
 
     const links = wrapper.findAll('[data-testid="router-link"]');
     const toValues = links.map((l) => l.attributes("data-to"));
-    expect(toValues).toContain("/notifications");
+    // Notifications now open an inline popup, not a router link
+    expect(toValues).not.toContain("/notifications");
     expect(toValues).not.toContain("/pages");
     expect(toValues).not.toContain("/groups");
+
+    // Verify the notification popover component is rendered
+    const popover = wrapper.findComponent({ name: "NotificationsPopover" });
+    expect(popover.exists()).toBe(true);
   });
 
   it("shows sign in link when not authenticated", () => {

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
@@ -13,7 +13,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select'
-import { ExternalLink, Copy, ArrowUpDown, FilePlus, Save, Download } from '@lucide/vue'
+import { ExternalLink, Copy, ArrowUpDown, FilePlus, Save, Download, ArrowDownUp, Import } from '@lucide/vue'
 import ColorPalette from '@/components/ColorPalette.vue'
 import { getNoteEditor } from './note-editor-registry'
 import TurndownService from 'turndown'
@@ -55,6 +55,8 @@ const emit = defineEmits<{
   'swap-head-body': []
   'copy-link': []
   'set-as-default': []
+  'reverse-children': []
+  'import-children': [files: FileList]
 }>()
 
 const link = computed(() => props.noteModel?.link?.value ?? '')
@@ -98,6 +100,24 @@ function handleCopyLink() {
   navigator.clipboard.writeText(url)
 }
 
+const fileInput = ref<HTMLInputElement | null>(null)
+
+function handleReverseChildren() {
+  emit('reverse-children')
+}
+
+function handleImportClick() {
+  fileInput.value?.click()
+}
+
+function handleFileChange(event: Event) {
+  const target = event.target as HTMLInputElement
+  if (target.files && target.files.length > 0) {
+    emit('import-children', target.files)
+    target.value = ''
+  }
+}
+
 function handleColorSelect(colorName: string) {
   emit('update:color', colorName)
   emit('update:color-inherit', false)
@@ -588,6 +608,34 @@ function exportAsMarkdown(download: boolean) {
           />
           <Label>Force color inheritance</Label>
         </div>
+        <div class="flex items-center gap-2 pl-6 pt-1">
+          <Button
+            variant="outline"
+            size="sm"
+            :disabled="readOnly || !containerEnabled || (props.noteModel?.container?.children?.value?.length ?? 0) < 2"
+            @click="handleReverseChildren"
+          >
+            <ArrowDownUp class="mr-1 h-3 w-3" />
+            Reverse children
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            :disabled="readOnly || (containerEnabled && containerSpatial)"
+            @click="handleImportClick"
+          >
+            <Import class="mr-1 h-3 w-3" />
+            Import children
+          </Button>
+          <input
+            ref="fileInput"
+            type="file"
+            accept=".txt,.md"
+            multiple
+            class="hidden"
+            @change="handleFileChange"
+          />
+        </div>
       </div>
 
       <!-- Movable/Resizable -->

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

@@ -137,17 +137,15 @@ describe("SpatialPageView", () => {
     expect(titles).toContain("Redo");
   });
 
-  it("renders toolbar with zoom and fit-to-screen buttons", () => {
+  it("renders floating camera buttons with zoom and fit-to-screen", () => {
     const { ydoc } = setupDocWithNotes();
     wrapper = mount(SpatialPageView, {
       props: { ydoc },
       global: { stubs: { Teleport: true } },
     });
 
-    const buttons = wrapper.findAll("button");
-    const titles = buttons.map((b) => b.attributes("title"));
-    expect(titles).toContain("Zoom in");
-    expect(titles).toContain("Zoom out");
-    expect(titles).toContain("Fit to screen");
+    // Zoom/reset/fit buttons moved from toolbar to FloatingCameraButtons
+    const cameraButtons = wrapper.findComponent({ name: "FloatingCameraButtons" });
+    expect(cameraButtons.exists()).toBe(true);
   });
 });

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

@@ -66,6 +66,8 @@ const {
   createArrow,
   moveNoteIntoContainer,
   moveNoteOutOfContainer,
+  reverseChildren,
+  importChildrenFromFiles,
 } = useSpatialPage(props.ydoc, undoRedo);
 
 function getNoteZIndex(id: string): number {
@@ -214,6 +216,8 @@ defineExpose({
   zoomIn,
   zoomOut,
   fitToScreen,
+  reverseChildren,
+  importChildrenFromFiles,
 });
 
 const {

new-deepnotes/apps/web/src/features/spatial/clipboard.ts

@@ -130,7 +130,7 @@ async function readFromClipboard(): Promise<ClipboardPayload | null> {
   return null;
 }
 
-function serializeNote(model: NoteModel, id: string): ClipboardNote {
+export function serializeNote(model: NoteModel, id: string): ClipboardNote {
   return {
     id,
     pos: model.pos.value,
@@ -174,7 +174,7 @@ function serializeNote(model: NoteModel, id: string): ClipboardNote {
   };
 }
 
-function serializeArrow(model: ArrowModel, id: string): ClipboardArrow {
+export function serializeArrow(model: ArrowModel, id: string): ClipboardArrow {
   return {
     id,
     source: model.source.value,
@@ -299,3 +299,24 @@ export function pastePayload(
 
   return { noteIds, arrowIds };
 }
+
+export function cloneSelection(
+  noteEntries: { id: string; model: NoteModel }[],
+  arrowEntries: { id: string; model: ArrowModel }[],
+  options: {
+    createNote: (worldX: number, worldY: number, template?: Partial<ClipboardNote>) => string;
+    createArrow: (sourceId: string, targetId: string, template?: Partial<ClipboardArrow>) => string;
+    offsetX?: number;
+    offsetY?: number;
+  },
+): { noteIds: string[]; arrowIds: string[] } {
+  const noteIds = new Set(noteEntries.map((n) => n.id));
+  const arrows = arrowEntries
+    .filter(
+      (a) => noteIds.has(a.model.source.value) && noteIds.has(a.model.target.value),
+    )
+    .map((a) => serializeArrow(a.model, a.id));
+  const notes = noteEntries.map((n) => serializeNote(n.model, n.id));
+
+  return pastePayload({ notes, arrows }, options);
+}

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

@@ -125,11 +125,29 @@ export function useContainerOps(
     removeChildFromContainer(currentParentId, noteId);
   }
 
+  function reverseChildren(containerId: string): void {
+    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 length = childrenArr.length;
+    if (length < 2) return;
+
+    const children = childrenArr.toArray();
+    ydoc.transact(() => {
+      childrenArr.delete(0, length);
+      childrenArr.push(children.reverse());
+    });
+  }
+
   return {
     parentOf,
     addChildToContainer,
     removeChildFromContainer,
     moveNoteIntoContainer,
     moveNoteOutOfContainer,
+    reverseChildren,
   };
 }

new-deepnotes/apps/web/src/features/spatial/note-content-utils.ts

@@ -0,0 +1,21 @@
+import { Editor } from "@tiptap/core";
+import * as Y from "yjs";
+
+import { createNoteEditorTipTapExtensions } from "./note-editor-tiptap-extensions";
+
+/**
+ * Populate a note's Y.XmlFragment with HTML content using a temporary
+ * Tiptap Editor. The editor is created, content is set, and the editor is
+ * immediately destroyed so the fragment retains the structured document.
+ */
+export function setNoteFragmentContent(
+  fragment: Y.XmlFragment,
+  html: string,
+): void {
+  const editor = new Editor({
+    extensions: createNoteEditorTipTapExtensions({ fragment }),
+    editable: false,
+  });
+  editor.commands.setContent(html);
+  editor.destroy();
+}