feat: phase 6

Author: gustavotoyota

docs/RESTART_PLAN.md

@@ -1,7 +1,7 @@
 # DeepNotes — Restart (greenfield) plan — v4
 
 > **Last updated:** 2026-05-30  
-> **Status:** Phase 0 foundation complete. Phase 1 spatial checklist complete. **Phase 2 backend parity verified.** **Phase 3 collab wire parity complete.** **Phase 4 SPA routing + lint complete.** **Phase 5 spatial canvas MVP core interactions complete (create, move, resize, delete notes; Shift+click arrows; mouse + touch pan/zoom).** Remaining: Phase 1 checklist sign-off.  
+> **Status:** Phase 0 foundation complete. Phase 1 spatial checklist complete. **Phase 2 backend parity verified.** **Phase 3 collab wire parity complete.** **Phase 4 SPA routing + lint complete.** **Phase 5 spatial canvas MVP core interactions complete (create, move, resize, delete notes; Shift+click arrows; mouse + touch pan/zoom).** **Phase 6 in progress: selection system complete (click, multi-select, box select, select all, active element); arrow click-to-select + deletion; note color + z-index rendering; grid background verified.**  
 > **This document replaces all prior restart plan versions.** If a prior statement conflicts with this one, this version wins.  
 > **Analyzed:** 2026-05-30 — additional gaps identified in §0.2–0.4, §3, §4, §6–8. Collab protocol gap and routing/product-model divergence newly documented.
 

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

@@ -7,6 +7,12 @@ const props = defineProps<{
   model: ArrowModel;
   sourceModel?: NoteModel;
   targetModel?: NoteModel;
+  selected?: boolean;
+}>();
+
+const emit = defineEmits<{
+  select: [];
+  toggle: [];
 }>();
 
 const line = computed(() => {
@@ -19,13 +25,23 @@ const line = computed(() => {
   const y2 = t.pos.value.y;
   return { x1, y1, x2, y2 };
 });
+
+function onPointerDown(e: PointerEvent) {
+  if (e.button !== 0) return;
+  e.stopPropagation();
+  if (e.ctrlKey || e.metaKey) {
+    emit("toggle");
+  } else {
+    emit("select");
+  }
+}
 </script>
 
 <template>
   <svg
     v-if="line"
     data-testid="display-arrow"
-    class="pointer-events-none absolute top-0 left-0 overflow-visible"
+    class="absolute top-0 left-0 overflow-visible"
     :style="{
       width: '1px',
       height: '1px',
@@ -37,8 +53,11 @@ const line = computed(() => {
       :y1="line.y1 - Math.min(line.y1, line.y2)"
       :x2="line.x2 - Math.min(line.x1, line.x2)"
       :y2="line.y2 - Math.min(line.y1, line.y2)"
-      stroke="currentColor"
-      stroke-width="2"
+      :stroke="selected ? 'var(--primary)' : 'currentColor'"
+      :stroke-width="selected ? 3 : 2"
+      stroke-linecap="round"
+      class="cursor-pointer"
+      @pointerdown="onPointerDown"
     />
   </svg>
 </template>

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

@@ -10,15 +10,43 @@ const props = defineProps<{
 
 const emit = defineEmits<{
   select: [];
+  toggle: [];
   shiftClick: [];
 }>();
 
+const noteColor = computed(() => {
+  const c = props.model.color.value;
+  if (c.inherit) return null;
+  // Simple legacy color mapping to CSS color values
+  const colorMap: Record<string, string> = {
+    grey: "#9ca3af",
+    red: "#ef4444",
+    green: "#22c55e",
+    blue: "#3b82f6",
+    yellow: "#eab308",
+    purple: "#a855f7",
+    orange: "#f97316",
+    pink: "#ec4899",
+    cyan: "#06b6d4",
+    black: "#171717",
+    white: "#f5f5f5",
+  };
+  return colorMap[c.value] ?? c.value;
+});
+
 const transform = computed(() => {
   const { x, y } = props.model.pos.value;
-  return {
+  const style: Record<string, string | number> = {
     transform: `translate(${x}px, ${y}px)`,
     width: props.model.width.value.expanded === "Auto" ? "auto" : `${props.model.width.value.expanded}px`,
+    zIndex: props.model.zIndex.value,
   };
+  const color = noteColor.value;
+  if (color) {
+    style.borderColor = color;
+    style.backgroundColor = `${color}18`; // 10% opacity tint
+  }
+  return style;
 });
 
 const frameClasses = computed(() => {
@@ -39,13 +67,22 @@ let noteStartX = 0;
 let noteStartY = 0;
 
 function onPointerDown(e: PointerEvent) {
-  if (!props.model.movable.value || e.button !== 0) return;
+  if (e.button !== 0) return;
   e.stopPropagation();
-  emit("select");
+
   if (e.shiftKey) {
     emit("shiftClick");
     return;
   }
+
+  if (e.ctrlKey || e.metaKey) {
+    emit("toggle");
+  } else {
+    emit("select");
+  }
+
+  if (!props.model.movable.value) return;
+
   dragPointerId = e.pointerId;
   startX = e.clientX;
   startY = e.clientY;