@abraca/nuxt 1.9.1 → 2.0.0

package/dist/runtime/components/renderers/AOverviewRenderer.vue

@@ -0,0 +1,1041 @@
+<script setup>
+import { ref, computed, onBeforeUnmount } from "vue";
+import { useRouter, useRuntimeConfig, useAppConfig } from "#imports";
+import { useVirtualizer } from "@tanstack/vue-virtual";
+import { DEFAULT_LOCALE } from "../../locale";
+import { useAbracadabra } from "../../composables/useAbracadabra";
+import { useRendererBase } from "../../composables/useRendererBase";
+import { useNodePanel } from "../../composables/useNodePanel";
+import { useNodePanelFollow } from "../../composables/useNodePanelFollow";
+import { useDocDropZone } from "../../composables/useDocDropZone";
+import { useDocDragBus } from "../../composables/useDocDragBus";
+import { useTouchDrag } from "../../composables/useTouchDrag";
+import { useItemPresence, useViewingBroadcast } from "../../composables/useItemPresence";
+import { useTreeExpansion } from "../../composables/useTreeExpansion";
+import { useChatUsers } from "../../composables/useChatUsers";
+import { useFavorites } from "../../composables/useFavorites";
+import { useVoice } from "../../composables/useVoice";
+import { useCommandPalette } from "../../composables/useCommandPalette";
+import { useDocumentPermissions } from "../../composables/useDocumentPermissions";
+import { resolveDocType, getAvailableDocTypes } from "../../utils/docTypes";
+import { avatarBorderStyle } from "../../utils/avatarStyle";
+import { DOC_DRAG_MIME, isDescendantInMap } from "../../utils/docDragDrop";
+const props = defineProps({
+  docId: { type: String, required: true },
+  childProvider: { type: null, required: true },
+  docLabel: { type: String, required: true },
+  pageTypes: { type: Array, required: false },
+  followingUser: { type: [String, null], required: false, default: null },
+  isSpaceRoot: { type: Boolean, required: false, default: true },
+  labels: { type: Object, required: false, default: () => ({}) }
+});
+const config = useRuntimeConfig();
+const locale = computed(() => ({
+  ...DEFAULT_LOCALE.renderers.overview,
+  ...config.public?.abracadabra?.locale?.renderers?.overview ?? {},
+  ...props.labels ?? {}
+}));
+const {
+  childProviderRef,
+  rootDoc,
+  tree,
+  connectedUsers,
+  states,
+  setLocalState
+} = useRendererBase(props);
+const abra = useAbracadabra();
+const { canWrite } = useDocumentPermissions(abra.effectiveRole);
+const {
+  openNodeId,
+  openNodeLabel,
+  openNodeProvider,
+  openNode,
+  closePanel
+} = useNodePanel(childProviderRef);
+useNodePanelFollow(
+  openNodeId,
+  openNodeLabel,
+  openNode,
+  closePanel,
+  () => props.followingUser,
+  states,
+  setLocalState
+);
+useViewingBroadcast(() => props.docId, openNodeId);
+const { getViewers: getDocViewers } = useItemPresence();
+const { favorites, isFavorite, toggleFavorite, moveFavorite } = useFavorites(rootDoc);
+const { voiceRoomId, voiceStatus, peerCount: voicePeerCount, joinRoom: _joinRoom } = useVoice();
+const router = useRouter();
+const { isOpen: searchOpen, searchTerm } = useCommandPalette();
+const appConfig = useAppConfig();
+const neutral = computed(() => appConfig.ui?.colors?.neutral ?? "zinc");
+const { onlineUsers } = useChatUsers();
+const allEntries = computed(() => tree.entries.value);
+const spaceStats = computed(() => {
+  const entries = allEntries.value;
+  const now = Date.now();
+  const tagMap = /* @__PURE__ */ new Map();
+  const callDocs = /* @__PURE__ */ new Map();
+  let taskTotal = 0;
+  let taskDone = 0;
+  let taskOverdue = 0;
+  const pendingTasks = [];
+  const upcomingList = [];
+  const recentList = [];
+  for (const e of entries) {
+    const type = e.type || "doc";
+    if (type === "call") callDocs.set(e.id, e);
+    if (e.meta?.tags) {
+      for (const tag of e.meta.tags) {
+        tagMap.set(tag, (tagMap.get(tag) || 0) + 1);
+      }
+    }
+    if (e.meta?.checked !== void 0) {
+      taskTotal++;
+      if (e.meta.checked) {
+        taskDone++;
+      } else {
+        if (pendingTasks.length < 5) pendingTasks.push(e);
+        const due = e.meta.dateEnd;
+        if (due && new Date(due).getTime() < now) taskOverdue++;
+      }
+    }
+    const d = e.meta?.datetimeStart ?? e.meta?.dateStart;
+    if (d) {
+      const ts = new Date(d).getTime();
+      if (ts >= now) upcomingList.push({ entry: e, ts });
+    }
+    if (e.updatedAt) recentList.push(e);
+  }
+  upcomingList.sort((a, b) => a.ts - b.ts);
+  const upcoming = upcomingList.slice(0, 8).map((u) => u.entry);
+  recentList.sort((a, b) => (b.updatedAt || 0) - (a.updatedAt || 0));
+  const recentActivity = recentList.slice(0, 20);
+  const tagCounts = [...tagMap.entries()].sort((a, b) => b[1] - a[1]).slice(0, 20);
+  const taskPct = taskTotal ? Math.round(taskDone / taskTotal * 100) : 0;
+  return { tagCounts, callDocs, taskTotal, taskDone, taskOverdue, taskPct, pendingTasks, upcoming, recentActivity };
+});
+const usersWithContext = computed(
+  () => onlineUsers.value.filter((u) => u.publicKey !== abra.publicKeyB64.value).map((u) => ({
+    ...u,
+    docLabel: u.docId ? tree.treeMap.data[u.docId]?.label : void 0
+  }))
+);
+const activeCallRooms = computed(() => {
+  const { callDocs } = spaceStats.value;
+  const roomUsers = /* @__PURE__ */ new Map();
+  for (const u of usersWithContext.value) {
+    if (u.docId && callDocs.has(u.docId)) {
+      const list = roomUsers.get(u.docId) || [];
+      list.push(u);
+      roomUsers.set(u.docId, list);
+    }
+  }
+  if (voiceRoomId.value && voiceStatus.value === "connected" && callDocs.has(voiceRoomId.value)) {
+    if (!roomUsers.has(voiceRoomId.value)) roomUsers.set(voiceRoomId.value, []);
+  }
+  return [...roomUsers.entries()].map(([docId, users]) => ({
+    entry: callDocs.get(docId),
+    users,
+    isMyRoom: voiceRoomId.value === docId,
+    peerCount: voiceRoomId.value === docId ? voicePeerCount.value + 1 : users.length
+  }));
+});
+const favoriteEntries = computed(() => {
+  const treeData = tree.treeMap.data;
+  return favorites.value.map((id) => {
+    const raw = treeData[id];
+    return raw ? { ...raw, id } : void 0;
+  }).filter((e) => !!e);
+});
+const quickCreateTypes = computed(
+  () => ["doc", "prose", "kanban", "calendar", "checklist", "call"].map((k) => resolveDocType(k, abra.registry))
+);
+const directChildren = computed(() => tree.childrenOf(null));
+const { expandedIds, toggle: toggleExpand, flatItems } = useTreeExpansion({
+  storageKey: `overview:expand:${props.docId}`,
+  childrenOf: (parentId) => tree.childrenOf(parentId)
+});
+const viewersByItem = computed(() => {
+  const m = /* @__PURE__ */ new Map();
+  for (const item of flatItems.value) {
+    const v = getDocViewers(item.id);
+    if (v.length) m.set(item.id, v);
+  }
+  for (const e of spaceStats.value.recentActivity) {
+    if (!m.has(e.id)) {
+      const v = getDocViewers(e.id);
+      if (v.length) m.set(e.id, v);
+    }
+  }
+  return m;
+});
+function itemViewers(itemId) {
+  return viewersByItem.value.get(itemId) ?? [];
+}
+const pagesScrollRef = ref(null);
+const ROW_HEIGHT = 40;
+const virtualizer = useVirtualizer(
+  computed(() => ({
+    count: flatItems.value.length,
+    getScrollElement: () => pagesScrollRef.value,
+    estimateSize: () => ROW_HEIGHT,
+    overscan: 8
+  }))
+);
+const virtualPageRows = computed(() => {
+  const rows = virtualizer.value.getVirtualItems();
+  const flat = flatItems.value;
+  return rows.map((vRow) => ({ vRow, item: flat[vRow.index] }));
+});
+function handleNavigate(entry) {
+  router.push(`/doc/${entry.id}`);
+}
+function handleJoinCall(docId) {
+  router.push(`/doc/${docId}`);
+}
+function createTypedPage(type) {
+  const label = locale.value.untitled;
+  const id = tree.createChild(null, label);
+  if (id) {
+    const entry = tree.treeMap.get(id);
+    if (entry) tree.treeMap.set(id, { ...entry, type });
+    router.push(`/doc/${id}`);
+  }
+}
+async function duplicateDoc(id) {
+  const provider = abra.provider.value;
+  if (!provider) return;
+  const { duplicateDocTree } = await import("../../utils/duplicateDocContent");
+  await duplicateDocTree(
+    provider,
+    id,
+    tree.treeMap.data,
+    (newId, entry) => tree.treeMap.set(newId, entry)
+  );
+}
+function changeDocType(id, type) {
+  const entry = tree.treeMap.get(id);
+  if (entry) tree.treeMap.set(id, { ...entry, type });
+}
+const renameId = ref(null);
+const renameValue = ref("");
+let renameCooldown = false;
+function startRename(id) {
+  const entry = tree.treeMap.get(id);
+  if (!entry) return;
+  renameId.value = id;
+  renameValue.value = entry.label;
+  renameCooldown = true;
+  setTimeout(() => {
+    renameCooldown = false;
+  }, 200);
+}
+function commitRename() {
+  if (renameCooldown) return;
+  if (renameId.value && renameValue.value.trim()) {
+    tree.renameEntry(renameId.value, renameValue.value.trim());
+  }
+  renameId.value = null;
+}
+async function openAsWindow(id, label) {
+  const { useWindowManager } = await import("../../composables/useWindowManager");
+  const wm = useWindowManager();
+  if (wm.windows.has(id)) {
+    wm.focusWindow(id);
+    return;
+  }
+  const childProv = await childProviderRef.value?.loadChild(id);
+  if (!childProv) return;
+  if (!childProv.isSynced) {
+    await new Promise((resolve) => {
+      const done = () => {
+        childProv.off("synced", done);
+        resolve();
+      };
+      childProv.on("synced", done);
+      setTimeout(resolve, 6e3);
+    });
+  }
+  const entry = tree.entries.value.find((e) => e.id === id);
+  wm.openWindow({
+    id,
+    title: label,
+    docId: id,
+    docType: entry?.type,
+    provider: childProv,
+    initialTab: "editor"
+  });
+}
+function pageMenuItems(page) {
+  const l = locale.value;
+  return [
+    [
+      { label: l.open, icon: "i-lucide-external-link", onSelect: () => router.push(`/doc/${page.id}`) },
+      { label: l.openAsSlideover, icon: "i-lucide-panel-right", onSelect: () => openNode(page.id, page.label) },
+      { label: l.openAsWindow, icon: "i-lucide-picture-in-picture-2", onSelect: () => openAsWindow(page.id, page.label) },
+      { label: l.rename, icon: "i-lucide-pencil", onSelect: () => startRename(page.id) },
+      { label: l.duplicate, icon: "i-lucide-copy", onSelect: () => duplicateDoc(page.id) },
+      {
+        label: isFavorite(page.id) ? l.removeFromFavorites : l.addToFavorites,
+        icon: isFavorite(page.id) ? "i-lucide-star-off" : "i-lucide-star",
+        onSelect: () => toggleFavorite(page.id)
+      }
+    ],
+    [
+      {
+        label: l.changeType,
+        icon: "i-lucide-layers",
+        children: getAvailableDocTypes(abra.registry).map((typeDef) => ({
+          label: typeDef.label,
+          icon: typeDef.icon,
+          type: "checkbox",
+          checked: page.type === typeDef.key,
+          onSelect: (e) => {
+            e.preventDefault();
+            changeDocType(page.id, typeDef.key);
+          }
+        }))
+      }
+    ],
+    [
+      {
+        label: l.moveToTrash,
+        icon: "i-lucide-trash-2",
+        color: "error",
+        onSelect: () => tree.deleteEntry(page.id)
+      }
+    ]
+  ];
+}
+function readOnlyMenuItems(page) {
+  const l = locale.value;
+  return [
+    [
+      { label: l.open, icon: "i-lucide-external-link", onSelect: () => router.push(`/doc/${page.id}`) },
+      { label: l.openAsSlideover, icon: "i-lucide-panel-right", onSelect: () => openNode(page.id, page.label) },
+      { label: l.openAsWindow, icon: "i-lucide-picture-in-picture-2", onSelect: () => openAsWindow(page.id, page.label) },
+      {
+        label: isFavorite(page.id) ? l.removeFromFavorites : l.addToFavorites,
+        icon: isFavorite(page.id) ? "i-lucide-star-off" : "i-lucide-star",
+        onSelect: () => toggleFavorite(page.id)
+      }
+    ]
+  ];
+}
+const dragId = ref(null);
+const dropIndicator = ref(null);
+const docDragBus = useDocDragBus();
+function siblingsOf(parentId) {
+  return tree.childrenOf(parentId);
+}
+function computeOrder(targetId, position, parentId, excludeId) {
+  const exclude = excludeId ?? dragId.value;
+  const siblings = siblingsOf(parentId).filter((p) => p.id !== exclude);
+  const idx = siblings.findIndex((p) => p.id === targetId);
+  if (idx < 0) return Date.now();
+  const target = siblings[idx];
+  if (position === "before") {
+    const prev = siblings[idx - 1];
+    return prev ? (prev.order + target.order) / 2 : target.order - 1e3;
+  } else {
+    const next = siblings[idx + 1];
+    return next ? (target.order + next.order) / 2 : target.order + 1e3;
+  }
+}
+function onDragStart(e, page) {
+  if (!canWrite.value) return;
+  dragId.value = page.id;
+  if (e.dataTransfer) {
+    e.dataTransfer.effectAllowed = "move";
+    e.dataTransfer.setData("text/plain", page.id);
+    e.dataTransfer.setData(DOC_DRAG_MIME, JSON.stringify({ id: page.id, label: page.label }));
+  }
+  docDragBus.startDrag({
+    docIds: [page.id],
+    labels: [page.label],
+    source: "renderer",
+    sourceDocId: props.docId,
+    pointer: { x: e.clientX, y: e.clientY }
+  });
+}
+function onDragOver(e, page) {
+  if (!canWrite.value) return;
+  e.preventDefault();
+  if (e.dataTransfer) e.dataTransfer.dropEffect = "move";
+  if (page.id === dragId.value) return;
+  if (dragId.value && isDescendantInMap(tree.treeMap.data, dragId.value, page.id)) return;
+  const rect = e.currentTarget.getBoundingClientRect();
+  const y = e.clientY - rect.top;
+  const h = rect.height;
+  let position;
+  if (y < h * 0.25) position = "before";
+  else if (y > h * 0.75) position = "after";
+  else position = "inside";
+  dropIndicator.value = { targetId: page.id, position };
+}
+function onDrop(e) {
+  e.preventDefault();
+  if (!dropIndicator.value || !canWrite.value || !dragId.value) {
+    cleanupDrag();
+    return;
+  }
+  const { targetId, position } = dropIndicator.value;
+  const targetEntry = tree.treeMap.get(targetId);
+  if (!targetEntry) {
+    cleanupDrag();
+    return;
+  }
+  const targetParent = targetEntry.parentId ?? null;
+  const rootParent = props.docId;
+  if (position === "inside") {
+    tree.moveEntry(dragId.value, targetId, Date.now());
+    if (!expandedIds.value.has(targetId)) toggleExpand(targetId);
+  } else {
+    const parentForReorder = targetParent === rootParent ? null : targetParent;
+    const newOrder = computeOrder(targetId, position, parentForReorder);
+    tree.moveEntry(dragId.value, parentForReorder, newOrder);
+  }
+  cleanupDrag();
+}
+function onDragEnd() {
+  cleanupDrag();
+  docDragBus.endDrag();
+}
+function cleanupDrag() {
+  dragId.value = null;
+  dropIndicator.value = null;
+}
+const { containerRef: overviewDropRef, isDropTarget } = useDocDropZone({
+  parentDocId: props.docId,
+  tree,
+  resolveDropPosition: (pointer, el) => {
+    const items = el.querySelectorAll("[data-overview-child]");
+    for (let i = 0; i < items.length; i++) {
+      const node = items[i];
+      const rect = node.getBoundingClientRect();
+      if (pointer.y < rect.top + rect.height / 2) {
+        const targetId = node.getAttribute("data-overview-child-id") || void 0;
+        const entry = targetId ? tree.treeMap.get(targetId) : void 0;
+        const parentId = entry?.parentId ?? null;
+        const parentForReorder = parentId === props.docId ? null : parentId;
+        const siblings = siblingsOf(parentForReorder);
+        const idx = siblings.findIndex((s) => s.id === targetId);
+        const target = idx >= 0 ? siblings[idx] : void 0;
+        const prev = idx > 0 ? siblings[idx - 1] : void 0;
+        return {
+          parentDocId: parentForReorder ?? props.docId,
+          targetItemId: targetId,
+          position: "before",
+          order: target ? prev ? (prev.order + target.order) / 2 : target.order - 1e3 : Date.now()
+        };
+      }
+    }
+    const roots = directChildren.value;
+    const last = roots[roots.length - 1];
+    return {
+      parentDocId: props.docId,
+      order: last ? last.order + 1e3 : Date.now()
+    };
+  }
+});
+const myClientId = computed(
+  () => props.childProvider?.awareness?.clientID ?? 0
+);
+function onItemPointerEnter(itemId) {
+  if (dragId.value) return;
+  setLocalState({ "overview:hovering": itemId });
+}
+function onItemPointerLeave() {
+  if (dragId.value) return;
+  setLocalState({ "overview:hovering": null });
+}
+const remoteHoversByItem = computed(() => {
+  const m = /* @__PURE__ */ new Map();
+  const me = myClientId.value;
+  for (const s of states.value) {
+    if (s.clientId === me) continue;
+    const hovering = s["overview:hovering"];
+    if (!hovering || !s.user) continue;
+    const list = m.get(hovering);
+    const u = { name: s.user.name ?? "", color: s.user.color ?? "#888" };
+    if (list) list.push(u);
+    else m.set(hovering, [u]);
+  }
+  return m;
+});
+function remoteHovers(itemId) {
+  return remoteHoversByItem.value.get(itemId) ?? [];
+}
+onBeforeUnmount(() => {
+  setLocalState({ "overview:hovering": null });
+});
+const pinnedDrag = useTouchDrag({
+  idAttr: "data-pinned-id",
+  onDrop(dragId2, targetId) {
+    if (!canWrite.value) return;
+    const fromIdx = favorites.value.indexOf(dragId2);
+    const toIdx = favorites.value.indexOf(targetId);
+    if (fromIdx >= 0 && toIdx >= 0 && fromIdx !== toIdx) {
+      moveFavorite(fromIdx, toIdx);
+    }
+  }
+});
+function searchTag(tag) {
+  searchTerm.value = tag;
+  searchOpen.value = true;
+}
+function timeAgo(ts) {
+  if (!ts) return "";
+  const diff = Math.max(0, Date.now() - ts);
+  const sec = Math.floor(diff / 1e3);
+  if (sec < 5) return "just now";
+  if (sec < 60) return `${sec}s ago`;
+  const min = Math.floor(sec / 60);
+  if (min < 60) return `${min}m ago`;
+  const hr = Math.floor(min / 60);
+  if (hr < 24) return `${hr}h ago`;
+  const day = Math.floor(hr / 24);
+  if (day < 30) return `${day}d ago`;
+  const mon = Math.floor(day / 30);
+  if (mon < 12) return `${mon}mo ago`;
+  const yr = Math.floor(day / 365);
+  return `${yr}y ago`;
+}
+function getTypeIcon(entry) {
+  return resolveDocType(entry.type, abra.registry).icon;
+}
+function formatEventDate(entry) {
+  const d = entry.meta?.datetimeStart ?? entry.meta?.dateStart;
+  if (!d) return "";
+  const date = new Date(d);
+  const now = /* @__PURE__ */ new Date();
+  const diff = date.getTime() - now.getTime();
+  const days = Math.ceil(diff / 864e5);
+  if (days === 0) return locale.value.eventToday;
+  if (days === 1) return locale.value.eventTomorrow;
+  if (days < 7) return locale.value.eventInDays(days);
+  return date.toLocaleDateString(void 0, { month: "short", day: "numeric" });
+}
+defineExpose({ connectedUsers });
+</script>
+
+<template>
+  <div class="flex-1 overflow-y-auto">
+    <div
+      ref="overviewDropRef"
+      class="max-w-6xl mx-auto p-4 sm:p-6 lg:p-8 pb-32 space-y-6"
+      :class="isDropTarget ? 'ring-2 ring-inset ring-(--ui-primary)/30 rounded-(--ui-radius) bg-(--ui-primary)/3' : ''"
+    >
+      <!-- ═══ Compact stat line ═══ -->
+      <div class="flex items-center gap-4 text-xs text-(--ui-text-dimmed) flex-wrap">
+        <span class="flex items-center gap-1.5">
+          <UIcon name="i-lucide-file-text" class="size-3.5" />
+          {{ locale.documentsCount(allEntries.length) }}
+        </span>
+        <span class="flex items-center gap-1.5">
+          <span class="size-1.5 rounded-full bg-success animate-pulse" />
+          {{ locale.onlineCount(usersWithContext.length + 1) }}
+        </span>
+        <span v-if="spaceStats.taskTotal" class="flex items-center gap-1.5">
+          <UIcon name="i-lucide-check-square" class="size-3.5" />
+          {{ spaceStats.taskPct }}% {{ locale.tasksComplete }}
+        </span>
+        <span v-if="spaceStats.upcoming.length" class="flex items-center gap-1.5">
+          <UIcon name="i-lucide-calendar-clock" class="size-3.5" />
+          {{ locale.upcomingCount(spaceStats.upcoming.length) }}
+        </span>
+        <span v-if="spaceStats.taskOverdue" class="flex items-center gap-1.5 text-warning">
+          <UIcon name="i-lucide-clock" class="size-3.5" />
+          {{ locale.overdueCount(spaceStats.taskOverdue) }}
+        </span>
+        <span v-if="activeCallRooms.length" class="flex items-center gap-1.5 text-success">
+          <UIcon name="i-lucide-phone" class="size-3.5" />
+          {{ locale.activeCalls(activeCallRooms.length) }}
+        </span>
+      </div>
+
+      <!-- ═══ Pinned — favorite documents (space root only) ═══ -->
+      <section v-if="isSpaceRoot && favoriteEntries.length" class="space-y-3">
+        <h2 class="text-sm font-semibold text-(--ui-text-highlighted) uppercase tracking-wide flex items-center gap-2">
+          <UIcon name="i-lucide-pin" class="size-4" />
+          {{ locale.pinned }}
+        </h2>
+        <TransitionGroup
+          name="pinned-item"
+          tag="div"
+          class="flex items-center gap-2 flex-wrap"
+          :class="{ 'is-pinned-dragging': pinnedDrag.isDragging.value }"
+        >
+          <div v-for="entry in favoriteEntries" :key="entry.id" class="pinned-item">
+            <ANodeContextMenu :items="canWrite ? pageMenuItems(entry) : readOnlyMenuItems(entry)">
+              <button
+                :data-pinned-id="entry.id"
+                class="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-(--ui-bg-elevated)/40 border border-(--ui-border-muted) hover:border-(--ui-border) hover:bg-(--ui-bg-elevated) transition-colors cursor-pointer text-left select-none"
+                :class="[
+  pinnedDrag.dragId.value === entry.id ? 'opacity-30' : '',
+  pinnedDrag.dragOverId.value === entry.id && pinnedDrag.dragId.value !== entry.id ? 'border-(--ui-primary)' : ''
+]"
+                @click="handleNavigate(entry)"
+                @pointerdown="pinnedDrag.handlePointerDown($event, entry.id)"
+              >
+                <UIcon
+                  :name="resolveDocType(entry.type, abra.registry).icon"
+                  class="size-3.5 text-(--ui-text-muted) shrink-0"
+                />
+                <span class="text-sm text-(--ui-text) truncate max-w-40">{{ entry.label || locale.untitled }}</span>
+                <UBadge
+                  v-if="entry.type && entry.type !== 'doc'"
+                  variant="subtle"
+                  color="neutral"
+                  size="xs"
+                  :label="resolveDocType(entry.type, abra.registry).label"
+                  class="shrink-0"
+                />
+              </button>
+            </ANodeContextMenu>
+          </div>
+        </TransitionGroup>
+      </section>
+
+      <!-- ═══ Active Calls ═══ -->
+      <section v-if="activeCallRooms.length" class="space-y-3">
+        <h2 class="text-sm font-semibold text-(--ui-text-highlighted) uppercase tracking-wide flex items-center gap-2">
+          <UIcon name="i-lucide-phone" class="size-4 text-success" />
+          {{ locale.activeCalls(activeCallRooms.length) }}
+        </h2>
+        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2">
+          <button
+            v-for="room in activeCallRooms"
+            :key="room.entry.id"
+            class="flex items-center gap-3 p-3 rounded-lg bg-(--ui-bg-elevated)/40 border border-(--ui-border-muted) hover:border-(--ui-border) hover:bg-(--ui-bg-elevated) transition-all cursor-pointer text-left group"
+            @click="handleJoinCall(room.entry.id)"
+          >
+            <div class="relative shrink-0">
+              <UIcon name="i-lucide-phone" class="size-5 text-success" />
+              <span class="absolute -top-1 -right-1 size-2 rounded-full bg-success animate-pulse" />
+            </div>
+            <div class="flex flex-col min-w-0 flex-1">
+              <span class="text-sm font-medium text-(--ui-text) truncate">{{ room.entry.label || locale.untitled }}</span>
+              <span class="text-xs text-(--ui-text-dimmed)">
+                {{ locale.callParticipants(room.peerCount) }}
+              </span>
+            </div>
+            <div class="flex -space-x-1.5 shrink-0">
+              <UAvatar
+                v-for="user in room.users.slice(0, 3)"
+                :key="user.publicKey"
+                :alt="user.name"
+                size="2xs"
+                :style="avatarBorderStyle(user.color, neutral)"
+              />
+              <span
+                v-if="room.users.length > 3"
+                class="flex items-center justify-center size-5 rounded-full bg-(--ui-bg-elevated) border border-(--ui-border-muted) text-[10px] text-(--ui-text-dimmed)"
+              >
+                +{{ room.users.length - 3 }}
+              </span>
+            </div>
+            <UBadge
+              v-if="room.isMyRoom"
+              variant="subtle"
+              color="success"
+              size="xs"
+              :label="locale.inCall"
+              class="shrink-0"
+            />
+            <UIcon
+              v-else
+              name="i-lucide-arrow-right"
+              class="size-3.5 text-(--ui-text-dimmed) opacity-0 group-hover:opacity-100 transition-opacity shrink-0"
+            />
+          </button>
+        </div>
+      </section>
+
+      <!-- ═══ Pages — direct children with full interactivity ═══ -->
+      <section class="space-y-3">
+        <div class="flex items-center justify-between gap-2 min-w-0">
+          <h2 class="text-sm font-semibold text-(--ui-text-highlighted) uppercase tracking-wide flex items-center gap-2 shrink-0">
+            <UIcon name="i-lucide-files" class="size-4" />
+            {{ locale.pages }}
+          </h2>
+          <div v-if="canWrite" class="flex items-center gap-1 overflow-x-auto shrink min-w-0" style="scrollbar-width: none;">
+            <UButton
+              v-for="typeDef in quickCreateTypes"
+              :key="typeDef.key"
+              :icon="typeDef.icon"
+              size="xs"
+              variant="ghost"
+              color="neutral"
+              class="shrink-0"
+              @click="createTypedPage(typeDef.key)"
+            >
+              <span class="hidden sm:inline">{{ typeDef.label }}</span>
+            </UButton>
+          </div>
+        </div>
+
+        <!-- Virtualized tree -->
+        <div
+          v-if="flatItems.length > 0"
+          ref="pagesScrollRef"
+          class="overflow-y-auto rounded-(--ui-radius)"
+          :class="{ 'is-dragging': dragId }"
+          style="max-height: 60vh"
+        >
+          <div
+            :style="{
+  height: `${virtualizer.getTotalSize()}px`,
+  position: 'relative',
+  width: '100%'
+}"
+          >
+            <div
+              v-for="{ vRow, item } in virtualPageRows"
+              :key="item.id"
+              data-overview-child
+              :data-overview-child-id="item.id"
+              class="overview-item absolute left-0 right-0"
+              :class="{ 'opacity-30': dragId === item.id }"
+              :style="{
+  transform: `translateY(${vRow.start}px)`,
+  height: `${vRow.size}px`,
+  paddingLeft: `${item.depth * 16}px`
+}"
+              @dragover="onDragOver($event, item.entry)"
+              @drop.stop="onDrop"
+              @pointerenter="onItemPointerEnter(item.id)"
+              @pointerleave="onItemPointerLeave()"
+            >
+              <div
+                v-if="dropIndicator?.targetId === item.id && dropIndicator.position === 'before'"
+                class="drop-line drop-line-before"
+              >
+                <div class="drop-line-dot" />
+              </div>
+
+              <div
+                v-if="dropIndicator?.targetId === item.id && dropIndicator.position === 'inside'"
+                class="drop-inside"
+              />
+
+              <div
+                v-if="dropIndicator?.targetId === item.id && dropIndicator.position === 'after'"
+                class="drop-line drop-line-after"
+              >
+                <div class="drop-line-dot" />
+              </div>
+
+              <ANodeContextMenu :items="canWrite ? pageMenuItems(item.entry) : readOnlyMenuItems(item.entry)">
+                <button
+                  type="button"
+                  class="flex items-center gap-1.5 pr-3 py-2 rounded-lg hover:bg-(--ui-bg-elevated) transition-colors text-sm text-(--ui-text) w-full select-none cursor-pointer relative"
+                  :class="[
+  itemViewers(item.id).length ? 'ring-2 ring-inset' : remoteHovers(item.id).length ? 'ring-1 ring-inset' : ''
+]"
+                  :style="itemViewers(item.id).length ? {
+  '--tw-ring-color': itemViewers(item.id)[0].color,
+  backgroundColor: itemViewers(item.id)[0].color + '14'
+} : remoteHovers(item.id).length ? { '--tw-ring-color': remoteHovers(item.id)[0].color } : {}"
+                  :draggable="canWrite"
+                  @dragstart="onDragStart($event, item.entry)"
+                  @dragend="onDragEnd"
+                  @click="handleNavigate(item.entry)"
+                  @dblclick.prevent="canWrite && startRename(item.id)"
+                >
+                  <span
+                    v-if="item.hasChildren"
+                    class="flex items-center justify-center size-5 shrink-0 rounded hover:bg-(--ui-bg-accented)"
+                    @click.stop="toggleExpand(item.id)"
+                  >
+                    <UIcon
+                      :name="item.expanded ? 'i-lucide-chevron-down' : 'i-lucide-chevron-right'"
+                      class="size-3.5 text-(--ui-text-dimmed)"
+                    />
+                  </span>
+                  <span v-else class="size-5 shrink-0" />
+
+                  <UIcon
+                    :name="resolveDocType(item.entry.type, abra.registry).icon"
+                    class="size-4 shrink-0 text-(--ui-text-muted)"
+                  />
+
+                  <UInput
+                    v-if="canWrite && renameId === item.id"
+                    v-model="renameValue"
+                    size="xs"
+                    variant="none"
+                    class="flex-1"
+                    autofocus
+                    @blur="commitRename"
+                    @keydown.enter.prevent="commitRename"
+                    @keydown.escape.prevent="renameId = null"
+                    @click.stop
+                    @dblclick.stop
+                  />
+                  <span v-else class="truncate flex-1 text-left">{{ item.entry.label || locale.untitled }}</span>
+
+                  <UBadge
+                    v-if="item.entry.type && item.entry.type !== 'doc'"
+                    variant="subtle"
+                    color="neutral"
+                    size="xs"
+                    :label="resolveDocType(item.entry.type, abra.registry).label"
+                    class="shrink-0"
+                  />
+
+                  <div
+                    v-if="itemViewers(item.id).length"
+                    class="flex -space-x-1 shrink-0"
+                  >
+                    <UAvatar
+                      v-for="(u, i) in itemViewers(item.id).slice(0, 3)"
+                      :key="`v-${i}`"
+                      size="2xs"
+                      :alt="u.name"
+                      :title="u.name"
+                      :style="avatarBorderStyle(u.color, neutral)"
+                    />
+                  </div>
+
+                  <template v-else>
+                    <template v-for="hover in remoteHovers(item.id).slice(0, 2)" :key="hover.name">
+                      <UBadge
+                        variant="subtle"
+                        size="xs"
+                        :label="hover.name"
+                        :style="{ color: hover.color, borderColor: hover.color }"
+                        class="shrink-0"
+                      />
+                    </template>
+                  </template>
+
+                  <div class="overview-row-actions flex items-center gap-0.5 shrink-0">
+                    <UButton
+                      v-if="canWrite"
+                      icon="i-lucide-plus"
+                      size="xs"
+                      variant="ghost"
+                      color="neutral"
+                      @click.stop="() => {
+  const id = tree.createChild(item.id, locale.untitled);
+  if (id) {
+    if (!expandedIds.has(item.id)) toggleExpand(item.id);
+    openNode(id, locale.untitled);
+  }
+}"
+                    />
+                  </div>
+                </button>
+              </ANodeContextMenu>
+            </div>
+          </div>
+        </div>
+
+        <div v-if="flatItems.length === 0 && canWrite" class="flex flex-col items-center justify-center py-8 text-(--ui-text-dimmed)">
+          <UIcon name="i-lucide-files" class="size-8 mb-2 opacity-30" />
+          <p class="text-sm mb-3">
+            {{ locale.emptyWelcome }}
+          </p>
+          <div class="flex items-center gap-2 flex-wrap justify-center">
+            <UButton
+              v-for="typeDef in quickCreateTypes"
+              :key="typeDef.key"
+              :icon="typeDef.icon"
+              size="sm"
+              variant="soft"
+              color="neutral"
+              :label="typeDef.label"
+              @click="createTypedPage(typeDef.key)"
+            />
+          </div>
+        </div>
+
+        <div v-else-if="flatItems.length === 0" class="flex flex-col items-center justify-center py-8 text-(--ui-text-dimmed)">
+          <UIcon name="i-lucide-files" class="size-8 mb-2 opacity-30" />
+          <p class="text-sm">
+            {{ locale.noPages }}
+          </p>
+        </div>
+      </section>
+
+      <!-- ═══ Main grid: Activity + Sidebar ═══ -->
+      <div class="grid grid-cols-1 lg:grid-cols-5 gap-6">
+        <!-- Activity feed (3 cols) -->
+        <section class="lg:col-span-3 space-y-3">
+          <h2 class="text-sm font-semibold text-(--ui-text-highlighted) uppercase tracking-wide flex items-center gap-2">
+            <UIcon name="i-lucide-activity" class="size-4" />
+            {{ locale.activity }}
+          </h2>
+
+          <div v-if="spaceStats.recentActivity.length" class="space-y-1">
+            <ANodeContextMenu
+              v-for="entry in spaceStats.recentActivity"
+              :key="entry.id"
+              :items="canWrite ? pageMenuItems(entry) : readOnlyMenuItems(entry)"
+            >
+              <button
+                class="w-full flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-(--ui-bg-elevated) transition-colors cursor-pointer text-left group"
+                :class="remoteHovers(entry.id).length ? 'ring-1 ring-inset' : ''"
+                :style="remoteHovers(entry.id).length ? { '--tw-ring-color': remoteHovers(entry.id)[0].color } : {}"
+                @click="handleNavigate(entry)"
+                @pointerenter="onItemPointerEnter(entry.id)"
+                @pointerleave="onItemPointerLeave()"
+              >
+                <UIcon :name="getTypeIcon(entry)" class="size-4 text-(--ui-text-dimmed) shrink-0" />
+                <span class="text-sm text-(--ui-text) truncate flex-1">{{ entry.label }}</span>
+                <template v-for="hover in remoteHovers(entry.id).slice(0, 1)" :key="hover.name">
+                  <UBadge
+                    variant="subtle"
+                    size="xs"
+                    :label="hover.name"
+                    :style="{ color: hover.color, borderColor: hover.color }"
+                    class="shrink-0"
+                  />
+                </template>
+                <span class="text-xs text-(--ui-text-dimmed) shrink-0 opacity-60 group-hover:opacity-100 transition-opacity">
+                  {{ timeAgo(entry.updatedAt) }}
+                </span>
+              </button>
+            </ANodeContextMenu>
+          </div>
+
+          <div v-else class="flex flex-col items-center justify-center py-12 text-(--ui-text-dimmed)">
+            <UIcon name="i-lucide-inbox" class="size-8 mb-2 opacity-30" />
+            <p class="text-sm">
+              {{ locale.noActivity }}
+            </p>
+            <p class="text-xs mt-1 opacity-60">
+              {{ locale.emptyActivityHint }}
+            </p>
+          </div>
+        </section>
+
+        <!-- Sidebar (2 cols) -->
+        <aside class="lg:col-span-2 space-y-6">
+          <!-- Tasks progress -->
+          <section v-if="spaceStats.taskTotal" class="space-y-3">
+            <h2 class="text-sm font-semibold text-(--ui-text-highlighted) uppercase tracking-wide flex items-center gap-2">
+              <UIcon name="i-lucide-check-square" class="size-4" />
+              {{ locale.tasks }}
+            </h2>
+
+            <div class="p-4 rounded-lg bg-(--ui-bg-elevated)/40 border border-(--ui-border-muted) space-y-3">
+              <div class="flex items-end justify-between">
+                <div>
+                  <span class="text-3xl font-bold text-(--ui-text-highlighted)">{{ spaceStats.taskDone }}</span>
+                  <span class="text-sm text-(--ui-text-dimmed)"> / {{ spaceStats.taskTotal }}</span>
+                </div>
+                <span class="text-sm font-medium" :class="spaceStats.taskPct === 100 ? 'text-success' : 'text-(--ui-text-muted)'">
+                  {{ spaceStats.taskPct }}%
+                </span>
+              </div>
+
+              <div class="h-1.5 w-full rounded-full bg-(--ui-bg-accented) overflow-hidden">
+                <div
+                  class="h-full rounded-full"
+                  :class="spaceStats.taskPct === 100 ? 'bg-success' : 'bg-(--ui-primary)'"
+                  :style="{ width: `${spaceStats.taskPct}%` }"
+                />
+              </div>
+
+              <div v-if="spaceStats.taskOverdue" class="flex items-center gap-2 text-xs text-warning">
+                <UIcon name="i-lucide-clock" class="size-3.5" />
+                {{ locale.overdueCount(spaceStats.taskOverdue) }}
+              </div>
+
+              <div v-if="spaceStats.pendingTasks.length" class="pt-2 border-t border-(--ui-border-muted) space-y-1">
+                <ANodeContextMenu
+                  v-for="task in spaceStats.pendingTasks"
+                  :key="task.id"
+                  :items="canWrite ? pageMenuItems(task) : readOnlyMenuItems(task)"
+                >
+                  <button
+                    class="w-full flex items-center gap-2 text-sm text-(--ui-text-muted) hover:text-(--ui-text) cursor-pointer truncate text-left py-0.5"
+                    @click="handleNavigate(task)"
+                    @pointerenter="onItemPointerEnter(task.id)"
+                    @pointerleave="onItemPointerLeave()"
+                  >
+                    <UIcon name="i-lucide-circle" class="size-3 shrink-0" />
+                    <span class="truncate">{{ task.label }}</span>
+                  </button>
+                </ANodeContextMenu>
+              </div>
+            </div>
+          </section>
+
+          <!-- Upcoming events -->
+          <section v-if="spaceStats.upcoming.length" class="space-y-3">
+            <h2 class="text-sm font-semibold text-(--ui-text-highlighted) uppercase tracking-wide flex items-center gap-2">
+              <UIcon name="i-lucide-calendar-clock" class="size-4" />
+              {{ locale.upcoming }}
+            </h2>
+
+            <div class="space-y-1">
+              <ANodeContextMenu
+                v-for="entry in spaceStats.upcoming"
+                :key="entry.id"
+                :items="canWrite ? pageMenuItems(entry) : readOnlyMenuItems(entry)"
+              >
+                <button
+                  class="w-full flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-(--ui-bg-elevated) transition-colors cursor-pointer text-left"
+                  @click="handleNavigate(entry)"
+                  @pointerenter="onItemPointerEnter(entry.id)"
+                  @pointerleave="onItemPointerLeave()"
+                >
+                  <div
+                    class="size-2 rounded-full shrink-0"
+                    :style="{ background: entry.meta?.color || 'var(--ui-primary)' }"
+                  />
+                  <span class="text-sm text-(--ui-text) truncate flex-1">{{ entry.label }}</span>
+                  <UBadge
+                    variant="subtle"
+                    color="neutral"
+                    size="xs"
+                    :label="formatEventDate(entry)"
+                  />
+                </button>
+              </ANodeContextMenu>
+            </div>
+          </section>
+
+          <!-- Tags -->
+          <section v-if="spaceStats.tagCounts.length" class="space-y-3">
+            <h2 class="text-sm font-semibold text-(--ui-text-highlighted) uppercase tracking-wide flex items-center gap-2">
+              <UIcon name="i-lucide-tags" class="size-4" />
+              {{ locale.tags }}
+            </h2>
+
+            <div class="flex flex-wrap gap-1.5">
+              <UBadge
+                v-for="[tag, count] in spaceStats.tagCounts"
+                :key="tag"
+                variant="subtle"
+                color="neutral"
+                size="sm"
+                class="cursor-pointer"
+                @click="searchTag(tag)"
+              >
+                {{ tag }}
+                <span class="text-(--ui-text-dimmed) ml-1 opacity-60">{{ count }}</span>
+              </UBadge>
+            </div>
+          </section>
+        </aside>
+      </div>
+
+      <!-- ═══ Node panel ═══ -->
+      <ANodePanel
+        :node-id="openNodeId"
+        :node-label="openNodeLabel"
+        :child-provider="openNodeProvider"
+        @close="closePanel"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.pinned-item-move{transition:transform .2s ease-out}.is-pinned-dragging .pinned-item-move{transition:none}.pinned-item-enter-active{transition:all .15s ease-out}.pinned-item-leave-active{position:absolute;transition:all .1s ease-in}.pinned-item-enter-from,.pinned-item-leave-to{opacity:0;transform:scale(.9)}.overview-row-actions{opacity:0;pointer-events:none;transition:opacity .1s ease}@media (hover:hover) and (pointer:fine){.overview-item:hover .overview-row-actions,.overview-row-actions:has([data-state=open]){opacity:1;pointer-events:auto}}.overview-row-actions:has([data-state=open]){opacity:1;pointer-events:auto}.drop-line{background:var(--ui-primary);border-radius:1px;height:2px;left:12px;pointer-events:none;position:absolute;right:4px;z-index:20}.drop-line-before{top:0}.drop-line-after{bottom:0}.drop-line-dot{background:var(--ui-bg);border:2px solid var(--ui-primary);border-radius:50%;height:8px;left:-3px;position:absolute;top:-3px;width:8px}.drop-inside{background:color-mix(in srgb,var(--ui-primary) 8%,transparent);border:2px solid color-mix(in srgb,var(--ui-primary) 50%,transparent);border-radius:var(--ui-radius);inset:1px 4px;pointer-events:none;position:absolute;z-index:10}
+</style>