Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| db9f29c16b | |||
| af481d401a | |||
| c90caeb21a | |||
| 5664da57ad |
+70
-2
@@ -14,8 +14,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
||||
|
||||
- **Place several images side by side in a row.** A new "Inline (side by
|
||||
side)" alignment mode in the image bubble menu renders consecutive inline
|
||||
images as a row that wraps onto the next line on narrow screens. Unlike the
|
||||
float modes, text does not wrap around inline images. The mode round-trips
|
||||
images as a row that wraps onto the next line on narrow screens. The row is
|
||||
centered horizontally by default in modern browsers (CSS `:has()`), falling
|
||||
back to start-aligned rows in browsers without support. Unlike the float
|
||||
modes, text does not wrap around inline images. The mode round-trips
|
||||
losslessly through markdown as `data-align`, like the other alignment
|
||||
values.
|
||||
|
||||
@@ -84,6 +86,53 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
||||
with the `||text||` input rule; the rendered span blurs until clicked to reveal.
|
||||
The mark is preserved losslessly through Markdown export/import (as a raw
|
||||
`<span data-spoiler="true">…</span>`) and on public shares. (#259)
|
||||
- **Dock the AI chat window into the side menu.** The floating chat window can
|
||||
be pinned to the sidebar — drag it onto the navbar (a drop-zone highlight
|
||||
shows where it lands) or use the new "Dock to sidebar" header button; while
|
||||
docked it fills the sidebar area and follows its live size. "Undock" (or
|
||||
dragging it back out) restores the floating window, a collapsed/absent
|
||||
sidebar falls back to floating, and the docked state survives a reload.
|
||||
(#276, #282)
|
||||
- **Hovering commented text shows the comment thread in a tooltip.** Pointing
|
||||
at a highlighted comment mark pops a small card with the author and plain
|
||||
text of the root comment and its replies, so a thread can be skimmed without
|
||||
opening the side panel. The card appears after a short delay (no flicker on a
|
||||
passing glance), skips resolved and text-less threads, and dismisses on
|
||||
scroll or click — clicking a mark still opens the comments panel. (#268,
|
||||
#271)
|
||||
- **"Move to trash" button in the temporary-note banner.** Besides "Make
|
||||
permanent", the banner on an open temporary note now also offers to trash the
|
||||
note immediately instead of waiting out its lifetime. It reuses the regular
|
||||
soft-delete path, so the "Page moved to trash" undo toast is the safety net —
|
||||
no confirmation dialog. (#273, #277)
|
||||
- **Code-block controls float as an overlay instead of taking a row above the
|
||||
code.** The language selector and copy button now sit in the block's top-right
|
||||
corner, and the selector stays invisible until the block is hovered or the
|
||||
selector is focused, so reading code is chrome-free. In read-only views only
|
||||
the copy button renders. (#275, #278)
|
||||
- **The AI agent is told about your page edits between turns.** The server
|
||||
snapshots the open page's Markdown at the end of every agent turn and, on the
|
||||
next turn, injects a unified diff of what changed in between, so the agent
|
||||
knows its earlier copy of the page is stale and builds on the user's edits
|
||||
instead of reverting or overwriting them. The diff is whitespace-normalized
|
||||
(pure formatting churn injects nothing) and size-capped, with a hint to
|
||||
re-read the full page via `getPage` when truncated. (#274, #281)
|
||||
- **Stress-accent button (U+0301) in the bubble menu.** Select a vowel and
|
||||
toggle a combining acute accent over it — a Russian-style stress mark. The
|
||||
accent is stored as plain text (no custom mark), so it survives Markdown/HTML
|
||||
export, full-text search and public shares unchanged; the toggle is a single
|
||||
undo step and re-clicking removes the accent. (#270, #280)
|
||||
- **Reading position survives a reload.** The editor remembers how far you
|
||||
scrolled in each page (per tab, in `sessionStorage`) and restores that
|
||||
position after an F5 or reopening the document, waiting for the collaborative
|
||||
content to finish laying out first. A URL `#hash` anchor still wins — restore
|
||||
is a no-op then. (#266, #267)
|
||||
- **The slash menu finds commands typed in the wrong keyboard layout.** A query
|
||||
typed with the wrong layout active (e.g. `/сщву` for `/code`, or `/cyjcrf`
|
||||
for the Cyrillic «сноска» → Footnote) is additionally remapped ЙЦУКЕН↔QWERTY
|
||||
by physical key position and matched against the commands; genuine Cyrillic
|
||||
search terms keep priority over remapped candidates, and short wrong-layout
|
||||
prefixes match by command title. (#283, #285, #287)
|
||||
|
||||
### Changed
|
||||
|
||||
@@ -149,6 +198,25 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
||||
emits a single-use "intentional clear" signal that lets exactly that one empty
|
||||
write through the guard, so genuinely emptying a page is persisted while
|
||||
accidental empties are blocked. (#248, #251)
|
||||
- **Ctrl+Z works again right after using a table menu.** Closing a table
|
||||
row/column menu (grip or chevron) left focus on the menu's portaled target
|
||||
outside the editor, so undo keystrokes went nowhere until you clicked back
|
||||
into a cell. The editor is now refocused after the menu closes — unless you
|
||||
deliberately moved focus to another input or editable (e.g. the page title).
|
||||
(#269, #279)
|
||||
- **The AI reindex progress counter no longer freezes at 0.** Right after
|
||||
"Reindex now" the client could read the stale pre-reindex snapshot of an
|
||||
already-indexed workspace (`reindexing=false`, all pages counted) as
|
||||
"finished" and stop polling on the very first tick, leaving the counter
|
||||
frozen until a manual reload. Polling now keeps going until it has actually
|
||||
observed the active run. (#262, #264)
|
||||
- **An MCP edit can no longer be silently lost to a duplicate collab document.**
|
||||
When the agent addressed a page by its short slugId, the MCP opened a
|
||||
collaboration document named after that slugId while the web editor always
|
||||
uses the page's canonical UUID — two independent live documents for one page,
|
||||
whose debounced stores clobbered each other. The MCP now resolves every page
|
||||
id to the canonical UUID before opening the collab doc (a UUID input
|
||||
short-circuits locally; a slugId is resolved once and cached). (#260, #265)
|
||||
|
||||
### Security
|
||||
|
||||
|
||||
@@ -104,7 +104,7 @@ community feature, with no enterprise license. Open it from the page header; the
|
||||
- ✅ **Page templates** — flag a page as a template and embed its whole content live into other pages; edits to the template propagate to every place it is inserted (whole-page transclusion on top of the existing synced blocks).
|
||||
- ✅ **Public-share AI assistant** — anonymous visitors of a shared page can ask the AI agent, scoped strictly to that share's page tree (read-only, share-scoped search), behind a workspace toggle.
|
||||
- ✅ **Footnotes** — academic-style footnotes: a numbered superscript reference inline (read it in place via a hover popover), with the note text living as a real, editable block at the bottom of the page; auto-numbered, collaboration-safe, and round-trips through Markdown export/import and the AI agent / MCP.
|
||||
- ✅ **Temporary notes** — mark a note as temporary and it auto-moves to Trash after a configurable per-workspace lifetime (default 24h) unless made permanent first; create one in a click from the Home screen, any space overview, or the space sidebar, with a "Make permanent" rescue banner on the open note.
|
||||
- ✅ **Temporary notes** — create a note as temporary and it auto-moves to Trash after a configurable per-workspace lifetime (default 24h) unless made permanent first; create one in a click from the Home screen, any space overview.
|
||||
|
||||
### In progress
|
||||
|
||||
@@ -187,14 +187,17 @@ start the new migrations apply on top of your existing schema (`CREATE EXTENSION
|
||||
- Spaces
|
||||
- Permissions management
|
||||
- Groups
|
||||
- Comments (with resolve / re-open)
|
||||
- Comments (with resolve / re-open and hover tooltips showing the comment text)
|
||||
- Page history
|
||||
- Search
|
||||
- File attachments
|
||||
- Embeds (Airtable, Loom, Miro and more)
|
||||
- Translations (10+ languages)
|
||||
- Embedded MCP server (`/mcp`)
|
||||
- AI agent chat over your wiki (read + write, RAG search, external MCP / web access)
|
||||
- AI agent chat over your wiki (read + write, RAG search, external MCP / web access); the chat window docks into the side menu, and the agent is told about your in-page edits between turns
|
||||
- Code-block buttons as an overlay, with the language selector revealed on hover
|
||||
- Stress-accent button (U+0301) in the bubble menu
|
||||
- Reading scroll position restored on reload
|
||||
|
||||
### Screenshots
|
||||
|
||||
|
||||
+7
-3
@@ -105,7 +105,7 @@ real-time-коллаборации Docmost, поэтому запись нико
|
||||
- ✅ **Шаблоны страниц** — пометить страницу шаблоном и вставлять её содержимое живой ссылкой в другие страницы; правки шаблона распространяются на все места вставки (whole-page-транслюзия поверх существующих synced-блоков).
|
||||
- ✅ **AI-ассистент на публичных шарах** — анонимный зритель расшаренной страницы может спросить AI-агента, который ищет строго по дереву этой шары (read-only, share-scoped поиск), за тумблером воркспейса.
|
||||
- ✅ **Сноски** — сноски академического вида: нумерованная ссылка-надстрочник прямо в тексте (читается на месте во всплывающем окне по наведению), а текст сноски живёт реальным редактируемым блоком внизу страницы; авто-нумерация, безопасна для совместного редактирования, переживает экспорт/импорт Markdown и доступна AI-агенту / MCP.
|
||||
- ✅ **Временные заметки** — пометьте заметку временной, и она автоматически уедет в корзину по истечении настраиваемого срока жизни воркспейса (по умолчанию 24 ч), если её предварительно не сделать постоянной; создать такую можно в один клик с домашнего экрана, с обзора любого пространства или из сайдбара пространства, а на открытой заметке есть баннер «Сделать постоянной».
|
||||
- ✅ **Временные заметки** — создайте временную заметку, и она автоматически уедет в корзину по истечении настраиваемого срока жизни (по умолчанию 24 ч); создать такую можно в один клик с домашнего экрана, с обзора любого пространства или из сайдбара пространства.
|
||||
|
||||
### В процессе
|
||||
|
||||
@@ -174,14 +174,18 @@ dump/restore, существующий каталог данных переис
|
||||
- Пространства (Spaces)
|
||||
- Управление правами доступа
|
||||
- Группы
|
||||
- Комментарии (с резолвом / переоткрытием)
|
||||
- Комментарии (с резолвом / переоткрытием и всплывающими подсказками с текстом комментария при наведении)
|
||||
- История страниц
|
||||
- Поиск
|
||||
- Вложения файлов
|
||||
- Встраивания (Airtable, Loom, Miro и другие)
|
||||
- Переводы (10+ языков)
|
||||
- Встроенный MCP-сервер (`/mcp`)
|
||||
- Чат с AI-агентом по вики (чтение + запись, RAG-поиск, внешние MCP / доступ в интернет)
|
||||
- Чат с AI-агентом по вики (чтение + запись, RAG-поиск, внешние MCP / доступ в интернет); окно чата закрепляется в боковом меню, а агент узнаёт о ваших правках страницы между ходами
|
||||
- Кнопки код-блока оверлеем, селектор языка появляется при наведении
|
||||
- Кнопка «Ударение» (U+0301) в bubble-меню
|
||||
- Позиция чтения (прокрутка) восстанавливается после перезагрузки
|
||||
- Slash-меню терпимо к неправильной раскладке (ЙЦУКЕН↔QWERTY)
|
||||
|
||||
### Скриншоты
|
||||
|
||||
|
||||
@@ -23,7 +23,6 @@ import { acceptInvitation } from "@/features/workspace/services/workspace-servic
|
||||
import APP_ROUTE, { getPostLoginRedirect } from "@/lib/app-route.ts";
|
||||
import { RESET } from "jotai/utils";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { clearPersistedTreeCaches } from "@/features/page/tree/atoms/tree-data-atom";
|
||||
|
||||
export default function useAuth() {
|
||||
const { t } = useTranslation();
|
||||
@@ -123,9 +122,6 @@ export default function useAuth() {
|
||||
|
||||
const handleLogout = async () => {
|
||||
setCurrentUser(RESET);
|
||||
// Purge the persisted sidebar tree caches (they contain page titles) so
|
||||
// nothing readable is left in localStorage on a shared machine.
|
||||
clearPersistedTreeCaches();
|
||||
await logout();
|
||||
window.location.replace(`${APP_ROUTE.AUTH.LOGIN}?logout=1`);
|
||||
};
|
||||
|
||||
@@ -1,5 +1,8 @@
|
||||
import { describe, it, expect } from "vitest";
|
||||
import { normalizeTableColumnWidths } from "./markdown-clipboard";
|
||||
import {
|
||||
normalizeTableColumnWidths,
|
||||
classifyClipboardSelection,
|
||||
} from "./markdown-clipboard";
|
||||
|
||||
// normalizeTableColumnWidths mutates a DOM subtree (jsdom provides document).
|
||||
function root(html: string): HTMLElement {
|
||||
@@ -124,3 +127,47 @@ describe("normalizeTableColumnWidths", () => {
|
||||
).toEqual([null, null]);
|
||||
});
|
||||
});
|
||||
|
||||
describe("classifyClipboardSelection", () => {
|
||||
it("serializes a list of 2+ items as markdown", () => {
|
||||
expect(
|
||||
classifyClipboardSelection([{ name: "bulletList", childCount: 2 }]),
|
||||
).toEqual({ asMarkdown: true, wrapBareRows: false });
|
||||
});
|
||||
|
||||
it("leaves a single-item list as plain text", () => {
|
||||
expect(
|
||||
classifyClipboardSelection([{ name: "bulletList", childCount: 1 }]),
|
||||
).toEqual({ asMarkdown: false, wrapBareRows: false });
|
||||
});
|
||||
|
||||
it("serializes a whole table without wrapping bare rows", () => {
|
||||
expect(
|
||||
classifyClipboardSelection([{ name: "table", childCount: 3 }]),
|
||||
).toEqual({ asMarkdown: true, wrapBareRows: false });
|
||||
});
|
||||
|
||||
it("serializes a partial cell selection (bare rows) and flags wrapping", () => {
|
||||
expect(
|
||||
classifyClipboardSelection([
|
||||
{ name: "tableRow", childCount: 2 },
|
||||
{ name: "tableRow", childCount: 2 },
|
||||
]),
|
||||
).toEqual({ asMarkdown: true, wrapBareRows: true });
|
||||
});
|
||||
|
||||
it("leaves plain paragraphs as plain text", () => {
|
||||
expect(
|
||||
classifyClipboardSelection([{ name: "paragraph", childCount: 1 }]),
|
||||
).toEqual({ asMarkdown: false, wrapBareRows: false });
|
||||
});
|
||||
|
||||
it("does not wrap when rows are mixed with other block types", () => {
|
||||
expect(
|
||||
classifyClipboardSelection([
|
||||
{ name: "tableRow", childCount: 2 },
|
||||
{ name: "paragraph", childCount: 1 },
|
||||
]),
|
||||
).toEqual({ asMarkdown: false, wrapBareRows: false });
|
||||
});
|
||||
});
|
||||
|
||||
@@ -27,24 +27,36 @@ export const MarkdownClipboard = Extension.create({
|
||||
key: new PluginKey("markdownClipboard"),
|
||||
props: {
|
||||
clipboardTextSerializer: (slice) => {
|
||||
const listTypes = ["bulletList", "orderedList", "taskList"];
|
||||
let topLevelCount = 0;
|
||||
let hasList = false;
|
||||
const topLevelNodes: { name: string; childCount: number }[] = [];
|
||||
slice.content.forEach((node) => {
|
||||
if (listTypes.includes(node.type.name)) {
|
||||
hasList = true;
|
||||
topLevelCount += node.childCount;
|
||||
} else {
|
||||
topLevelCount++;
|
||||
}
|
||||
topLevelNodes.push({
|
||||
name: node.type.name,
|
||||
childCount: node.childCount,
|
||||
});
|
||||
});
|
||||
|
||||
if (!hasList || topLevelCount < 2) return null;
|
||||
const { asMarkdown, wrapBareRows } =
|
||||
classifyClipboardSelection(topLevelNodes);
|
||||
if (!asMarkdown) return null;
|
||||
|
||||
const div = document.createElement("div");
|
||||
const serializer = DOMSerializer.fromSchema(this.editor.schema);
|
||||
const fragment = serializer.serializeFragment(slice.content);
|
||||
div.appendChild(fragment);
|
||||
|
||||
if (wrapBareRows) {
|
||||
// A partial table cell-selection serializes to bare <tr> nodes
|
||||
// (prosemirror-tables returns the whole `table` node only when the
|
||||
// entire table is selected). Bare <tr> would be foster-parented
|
||||
// away by the HTML parser inside htmlToMarkdown, so wrap them in
|
||||
// <table><tbody> first for the GFM turndown rule to detect them.
|
||||
const table = document.createElement("table");
|
||||
const tbody = document.createElement("tbody");
|
||||
tbody.appendChild(fragment);
|
||||
table.appendChild(tbody);
|
||||
div.appendChild(table);
|
||||
} else {
|
||||
div.appendChild(fragment);
|
||||
}
|
||||
return htmlToMarkdown(div.innerHTML);
|
||||
},
|
||||
handlePaste: (view, event, slice) => {
|
||||
@@ -153,6 +165,55 @@ export const MarkdownClipboard = Extension.create({
|
||||
},
|
||||
});
|
||||
|
||||
/**
|
||||
* Decide whether a copied slice's plain-text clipboard payload should be
|
||||
* serialized as Markdown (instead of ProseMirror's default text serializer,
|
||||
* which joins block leaves with newlines — the "one value per line" bug for
|
||||
* tables).
|
||||
*
|
||||
* Serialize as Markdown for structured content:
|
||||
* - lists with 2+ total items (a single copied bullet stays literal text);
|
||||
* - a whole table (top-level `table` node);
|
||||
* - a partial table cell-selection, which prosemirror-tables copies as bare
|
||||
* `tableRow` nodes (only a full-table selection yields a `table` node).
|
||||
*
|
||||
* `wrapBareRows` flags the bare-rows case so the caller wraps the serialized
|
||||
* <tr> nodes in <table><tbody> before the HTML->Markdown step. Plain paragraphs
|
||||
* return asMarkdown=false so a simple text copy stays literal, and internal
|
||||
* copy/paste keeps using the richer text/html clipboard payload.
|
||||
*/
|
||||
export function classifyClipboardSelection(
|
||||
nodes: { name: string; childCount: number }[],
|
||||
): { asMarkdown: boolean; wrapBareRows: boolean } {
|
||||
const listTypes = ["bulletList", "orderedList", "taskList"];
|
||||
let topLevelCount = 0;
|
||||
let hasList = false;
|
||||
let hasTable = false;
|
||||
let tableRowCount = 0;
|
||||
let nonRowCount = 0;
|
||||
|
||||
for (const node of nodes) {
|
||||
if (listTypes.includes(node.name)) {
|
||||
hasList = true;
|
||||
topLevelCount += node.childCount;
|
||||
nonRowCount++;
|
||||
} else {
|
||||
if (node.name === "table") hasTable = true;
|
||||
if (node.name === "tableRow") tableRowCount++;
|
||||
else nonRowCount++;
|
||||
topLevelCount++;
|
||||
}
|
||||
}
|
||||
|
||||
// Bare tableRow nodes at the top level only occur for a partial cell
|
||||
// selection; a slice never mixes bare rows with other block types, so
|
||||
// "every top-level node is a row" is a safe signal to wrap-and-serialize.
|
||||
const wrapBareRows = tableRowCount > 0 && nonRowCount === 0;
|
||||
const asMarkdown =
|
||||
(hasList && topLevelCount >= 2) || hasTable || wrapBareRows;
|
||||
return { asMarkdown, wrapBareRows };
|
||||
}
|
||||
|
||||
/**
|
||||
* Reorder/dedup the footnotes of a SELF-CONTAINED pasted markdown block to the
|
||||
* canonical invariant (the live footnoteSyncPlugin never reorders an existing
|
||||
|
||||
@@ -71,3 +71,22 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* Inline image rows (#284): center the anonymous line boxes formed by
|
||||
consecutive [data-image-align="inline"] node-view containers. A row has no
|
||||
DOM wrapper of its own, so its horizontal placement is controlled by the
|
||||
text-align of the nearest block ancestor (the editor root or a nested
|
||||
block container: blockquote, callout, list item, table cell, details).
|
||||
Centering is enabled only in containers that actually hold an inline
|
||||
image (:has), and every other child of such a container gets its default
|
||||
alignment back so ordinary text is unaffected. Explicit per-block
|
||||
alignment from the toolbar is an inline style and still wins. Browsers
|
||||
without :has() degrade to left-pinned rows. */
|
||||
.ProseMirror:has(> [data-image-align="inline"]),
|
||||
.ProseMirror :has(> [data-image-align="inline"]) {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ProseMirror:has(> [data-image-align="inline"]) > :not([data-image-align="inline"]),
|
||||
.ProseMirror :has(> [data-image-align="inline"]) > :not([data-image-align="inline"]) {
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
@@ -13,30 +13,20 @@ export type OpenMap = Record<string, boolean>;
|
||||
// `OpenMap | Promise<OpenMap>` and break the functional-updater setter below).
|
||||
const openTreeNodesStorage = createJSONStorage<OpenMap>(() => localStorage);
|
||||
|
||||
// Single source of truth for the open-map localStorage key prefix. Exported so
|
||||
// the logout cache sweep (tree-data-atom.ts) removes keys by the SAME prefix
|
||||
// used to write them — a rename here can never silently desync the cleanup.
|
||||
export const OPEN_TREE_NODES_KEY_PREFIX = "openTreeNodes:";
|
||||
|
||||
// One persisted open/closed map per (workspace, user). Scoping the localStorage
|
||||
// key prevents accounts that share a browser origin from leaking tree state.
|
||||
// `getOnInit: true` reads localStorage synchronously at atom init (not on mount),
|
||||
// so the first render already has the saved state — no collapse-then-expand
|
||||
// flicker on reload, and writes never run against an un-hydrated empty map.
|
||||
const openTreeNodesFamily = atomFamily((scopeKey: string) =>
|
||||
atomWithStorage<OpenMap>(
|
||||
`${OPEN_TREE_NODES_KEY_PREFIX}${scopeKey}`,
|
||||
{},
|
||||
openTreeNodesStorage,
|
||||
{ getOnInit: true },
|
||||
),
|
||||
atomWithStorage<OpenMap>(`openTreeNodes:${scopeKey}`, {}, openTreeNodesStorage, {
|
||||
getOnInit: true,
|
||||
}),
|
||||
);
|
||||
|
||||
// Resolve the storage scope from the current user. Fall back to "anon" for the
|
||||
// workspace/user parts when nothing is loaded yet (logged out / first paint).
|
||||
// Shared by the open-map atom below and the persisted tree-data atom
|
||||
// (tree-data-atom.ts) so both caches are scoped identically.
|
||||
export const scopeKeyAtom = atom((get) => {
|
||||
const scopeKeyAtom = atom((get) => {
|
||||
const currentUser = get(currentUserAtom);
|
||||
const workspaceId = currentUser?.workspace?.id ?? "anon";
|
||||
const userId = currentUser?.user?.id ?? "anon";
|
||||
|
||||
@@ -1,232 +0,0 @@
|
||||
import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
|
||||
import type { SpaceTreeNode } from "@/features/page/tree/types";
|
||||
import type { ICurrentUser } from "@/features/user/types/user.types";
|
||||
|
||||
// The persisted tree-data atom hydrates from localStorage ONCE, at family-atom
|
||||
// creation (`getOnInit: true`). To exercise hydration deterministically each
|
||||
// test imports a FRESH module instance (fresh atomFamily) after seeding the
|
||||
// storage stub from vitest.setup.ts. jotai itself is externalized by vitest, so
|
||||
// `createStore` can stay a static import — atoms are plain objects and any
|
||||
// store works with any module instance.
|
||||
import { createStore } from "jotai";
|
||||
|
||||
// Storage key for the default scope: no currentUser -> "anon:anon" (see
|
||||
// scopeKeyAtom in open-tree-nodes-atom.ts) with the `v1` cache-shape version.
|
||||
const ANON_KEY = "treeData:v1:anon:anon";
|
||||
const DEBOUNCE_MS = 500;
|
||||
|
||||
async function freshImport() {
|
||||
vi.resetModules();
|
||||
const treeDataModule = await import("./tree-data-atom");
|
||||
const userModule = await import(
|
||||
"@/features/user/atoms/current-user-atom"
|
||||
);
|
||||
return {
|
||||
treeDataAtom: treeDataModule.treeDataAtom,
|
||||
flushPendingTreeDataWrites: treeDataModule.flushPendingTreeDataWrites,
|
||||
clearPersistedTreeCaches: treeDataModule.clearPersistedTreeCaches,
|
||||
currentUserAtom: userModule.currentUserAtom,
|
||||
};
|
||||
}
|
||||
|
||||
function node(id: string): SpaceTreeNode {
|
||||
return {
|
||||
id,
|
||||
slugId: `slug-${id}`,
|
||||
name: id,
|
||||
position: "a0",
|
||||
spaceId: "space-1",
|
||||
parentPageId: null as unknown as string,
|
||||
hasChildren: false,
|
||||
children: [],
|
||||
};
|
||||
}
|
||||
|
||||
// Every persisted tree key currently in storage — asserting on the whole
|
||||
// prefix (not one known key) catches writes that resurrect under ANY scope.
|
||||
function persistedTreeDataKeys(): string[] {
|
||||
const keys: string[] = [];
|
||||
for (let i = 0; i < localStorage.length; i++) {
|
||||
const key = localStorage.key(i);
|
||||
if (key !== null && key.startsWith("treeData:v1:")) keys.push(key);
|
||||
}
|
||||
return keys;
|
||||
}
|
||||
|
||||
function currentUser(workspaceId: string, userId: string): ICurrentUser {
|
||||
return {
|
||||
user: { id: userId },
|
||||
workspace: { id: workspaceId },
|
||||
} as unknown as ICurrentUser;
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
localStorage.clear();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
vi.useRealTimers();
|
||||
vi.restoreAllMocks();
|
||||
});
|
||||
|
||||
describe("treeDataAtom (localStorage-persisted)", () => {
|
||||
it("reads [] from a fresh store with empty storage", async () => {
|
||||
const { treeDataAtom } = await freshImport();
|
||||
const store = createStore();
|
||||
|
||||
expect(store.get(treeDataAtom)).toEqual([]);
|
||||
});
|
||||
|
||||
it("persists through the debounced setItem and hydrates a fresh module back", async () => {
|
||||
vi.useFakeTimers();
|
||||
const setItemSpy = vi.spyOn(localStorage, "setItem");
|
||||
|
||||
const { treeDataAtom } = await freshImport();
|
||||
const store = createStore();
|
||||
|
||||
store.set(treeDataAtom, [node("a")]);
|
||||
// Second write inside the debounce window — must coalesce into ONE flush
|
||||
// carrying only the latest value.
|
||||
vi.advanceTimersByTime(DEBOUNCE_MS / 2);
|
||||
store.set(treeDataAtom, [node("a"), node("b")]);
|
||||
|
||||
// Nothing flushed yet: the write is trailing-debounced.
|
||||
expect(localStorage.getItem(ANON_KEY)).toBeNull();
|
||||
|
||||
vi.advanceTimersByTime(DEBOUNCE_MS + 100);
|
||||
|
||||
expect(setItemSpy).toHaveBeenCalledTimes(1);
|
||||
expect(JSON.parse(localStorage.getItem(ANON_KEY)!)).toEqual([
|
||||
node("a"),
|
||||
node("b"),
|
||||
]);
|
||||
|
||||
// A fresh module (fresh atom family -> getOnInit re-reads storage) and a
|
||||
// fresh store hydrate the persisted tree back — the reload scenario.
|
||||
const second = await freshImport();
|
||||
const store2 = createStore();
|
||||
expect(store2.get(second.treeDataAtom)).toEqual([node("a"), node("b")]);
|
||||
});
|
||||
|
||||
it("reads [] (without throwing) when storage holds corrupted JSON", async () => {
|
||||
localStorage.setItem(ANON_KEY, "{definitely not JSON!!!");
|
||||
|
||||
const { treeDataAtom } = await freshImport();
|
||||
const store = createStore();
|
||||
|
||||
expect(store.get(treeDataAtom)).toEqual([]);
|
||||
});
|
||||
|
||||
it("reads [] when storage holds valid JSON of a non-array shape", async () => {
|
||||
localStorage.setItem(ANON_KEY, JSON.stringify({ id: "not-a-tree" }));
|
||||
|
||||
const { treeDataAtom } = await freshImport();
|
||||
const store = createStore();
|
||||
|
||||
expect(store.get(treeDataAtom)).toEqual([]);
|
||||
});
|
||||
|
||||
it("supports functional-updater writes", async () => {
|
||||
const { treeDataAtom } = await freshImport();
|
||||
const store = createStore();
|
||||
|
||||
store.set(treeDataAtom, [node("a")]);
|
||||
store.set(treeDataAtom, (prev) => [...prev, node("b")]);
|
||||
|
||||
expect(store.get(treeDataAtom).map((n) => n.id)).toEqual(["a", "b"]);
|
||||
});
|
||||
|
||||
it("isolates trees between (workspace, user) scopes", async () => {
|
||||
const { treeDataAtom, currentUserAtom } = await freshImport();
|
||||
const store = createStore();
|
||||
|
||||
store.set(currentUserAtom, currentUser("w1", "u1"));
|
||||
store.set(treeDataAtom, [node("a")]);
|
||||
expect(store.get(treeDataAtom).map((n) => n.id)).toEqual(["a"]);
|
||||
|
||||
// Another account on the same browser origin must NOT see u1's tree.
|
||||
store.set(currentUserAtom, currentUser("w2", "u2"));
|
||||
expect(store.get(treeDataAtom)).toEqual([]);
|
||||
|
||||
store.set(treeDataAtom, [node("b")]);
|
||||
expect(store.get(treeDataAtom).map((n) => n.id)).toEqual(["b"]);
|
||||
|
||||
// Switching back resolves the original scope's tree untouched.
|
||||
store.set(currentUserAtom, currentUser("w1", "u1"));
|
||||
expect(store.get(treeDataAtom).map((n) => n.id)).toEqual(["a"]);
|
||||
});
|
||||
|
||||
it("clearPersistedTreeCaches removes all tree keys and discards pending writes", async () => {
|
||||
vi.useFakeTimers();
|
||||
|
||||
// Stale caches across scopes plus an UNRELATED key that must survive.
|
||||
localStorage.setItem("treeData:v1:a:b", JSON.stringify([node("stale")]));
|
||||
localStorage.setItem("openTreeNodes:a:b", JSON.stringify({ p1: true }));
|
||||
localStorage.setItem("currentUser", JSON.stringify({ user: { id: "b" } }));
|
||||
|
||||
const { treeDataAtom, clearPersistedTreeCaches } = await freshImport();
|
||||
const store = createStore();
|
||||
|
||||
// Queue a debounced write (not flushed yet) for the anon scope.
|
||||
store.set(treeDataAtom, [node("pending")]);
|
||||
expect(localStorage.getItem(ANON_KEY)).toBeNull();
|
||||
|
||||
clearPersistedTreeCaches();
|
||||
|
||||
// Both prefixed caches are swept; the unrelated key is untouched.
|
||||
expect(localStorage.getItem("treeData:v1:a:b")).toBeNull();
|
||||
expect(localStorage.getItem("openTreeNodes:a:b")).toBeNull();
|
||||
expect(localStorage.getItem("currentUser")).toBe(
|
||||
JSON.stringify({ user: { id: "b" } }),
|
||||
);
|
||||
|
||||
// The queued write was DISCARDED, not merely delayed: the debounce timer
|
||||
// firing later must not resurrect a tree key after logout.
|
||||
vi.advanceTimersByTime(DEBOUNCE_MS + 100);
|
||||
expect(localStorage.getItem(ANON_KEY)).toBeNull();
|
||||
});
|
||||
|
||||
it("clearPersistedTreeCaches discards queued writes even when flushed DIRECTLY", async () => {
|
||||
vi.useFakeTimers();
|
||||
|
||||
const { treeDataAtom, clearPersistedTreeCaches, flushPendingTreeDataWrites } =
|
||||
await freshImport();
|
||||
const store = createStore();
|
||||
|
||||
// Queue a debounced write, then clear. Calling the flush directly (not via
|
||||
// the debounce timer) isolates the pending-queue discard from the timer
|
||||
// cancel: if the queue survived, this flush would resurrect the key even
|
||||
// though the timer never fired.
|
||||
store.set(treeDataAtom, [node("pending")]);
|
||||
clearPersistedTreeCaches();
|
||||
flushPendingTreeDataWrites();
|
||||
|
||||
expect(localStorage.getItem(ANON_KEY)).toBeNull();
|
||||
expect(persistedTreeDataKeys()).toEqual([]);
|
||||
});
|
||||
|
||||
it("disables persistence after clearPersistedTreeCaches: NEW writes never reach storage", async () => {
|
||||
vi.useFakeTimers();
|
||||
|
||||
const { treeDataAtom, clearPersistedTreeCaches, flushPendingTreeDataWrites } =
|
||||
await freshImport();
|
||||
const store = createStore();
|
||||
|
||||
clearPersistedTreeCaches();
|
||||
|
||||
// The resurrection scenario: a websocket tree event lands while `await
|
||||
// logout()` is still in flight, AFTER the sweep. The write must not be
|
||||
// queued, must not arm a new debounce timer, and must not survive the
|
||||
// beforeunload flush fired by the logout redirect.
|
||||
store.set(treeDataAtom, [node("late")]);
|
||||
|
||||
vi.advanceTimersByTime(DEBOUNCE_MS + 100);
|
||||
flushPendingTreeDataWrites(); // what the beforeunload handler runs
|
||||
|
||||
expect(persistedTreeDataKeys()).toEqual([]);
|
||||
|
||||
// Only PERSISTENCE is disabled: the in-memory atom keeps working, so the
|
||||
// UI stays intact during the brief pre-redirect window.
|
||||
expect(store.get(treeDataAtom).map((n) => n.id)).toEqual(["late"]);
|
||||
});
|
||||
});
|
||||
@@ -1,200 +1,8 @@
|
||||
import { atom } from "jotai";
|
||||
import { atomFamily, atomWithStorage } from "jotai/utils";
|
||||
import { SpaceTreeNode } from "@/features/page/tree/types";
|
||||
import { appendNodeChildren } from "../utils";
|
||||
import {
|
||||
OPEN_TREE_NODES_KEY_PREFIX,
|
||||
scopeKeyAtom,
|
||||
} from "./open-tree-nodes-atom";
|
||||
|
||||
// The sidebar tree is persisted to localStorage so a page reload can paint the
|
||||
// last-known tree IMMEDIATELY (no blank sidebar while the root query runs) and
|
||||
// then reconcile with the server in the background. localStorage is a BOOT
|
||||
// CACHE only — the in-memory atom stays the source of truth while the app runs.
|
||||
|
||||
// Trailing-debounce machinery for the localStorage writes. The tree is
|
||||
// rewritten on every lazy load / drag / socket event; serializing a large tree
|
||||
// on each update would burn CPU and thrash the storage quota, so writes are
|
||||
// coalesced (~500 ms per burst) and only the latest value per key is flushed.
|
||||
const WRITE_DEBOUNCE_MS = 500;
|
||||
|
||||
// Single source of truth for the tree-cache localStorage key prefix. The `v1`
|
||||
// segment versions the cached node shape (bump it when SpaceTreeNode changes
|
||||
// incompatibly). Shared by the storage key construction below AND the logout
|
||||
// sweep in clearPersistedTreeCaches() so the two can never drift apart.
|
||||
export const TREE_DATA_KEY_PREFIX = "treeData:v1:";
|
||||
|
||||
// Size guard: skip persisting trees whose JSON exceeds ~4M chars. localStorage
|
||||
// quota is typically ~5 MB per origin; a huge tree must not evict everything
|
||||
// else or spam QuotaExceededError on every debounce tick.
|
||||
const MAX_SERIALIZED_LENGTH = 4_000_000;
|
||||
|
||||
const pendingWrites = new Map<string, SpaceTreeNode[]>();
|
||||
let flushTimer: ReturnType<typeof setTimeout> | null = null;
|
||||
let writeFailureWarned = false;
|
||||
|
||||
// Persistence kill-switch, armed by clearPersistedTreeCaches(). Once set, the
|
||||
// debounced setItem and the flush become no-ops so nothing can be written back
|
||||
// to localStorage AFTER the logout sweep: a websocket tree event landing while
|
||||
// `await logout()` is still in flight would otherwise re-queue a write that
|
||||
// the `beforeunload` flush (fired by the redirect) silently resurrects.
|
||||
// Intentionally never reset: every caller of clearPersistedTreeCaches()
|
||||
// immediately navigates away with a full page load
|
||||
// (window.location.replace/href), so this module instance is torn down anyway.
|
||||
// Only PERSISTENCE stops — the in-memory atoms keep working, so the UI stays
|
||||
// intact during the brief pre-redirect window.
|
||||
let persistenceDisabled = false;
|
||||
|
||||
function writeNow(key: string, value: SpaceTreeNode[]): void {
|
||||
try {
|
||||
const serialized = JSON.stringify(value);
|
||||
if (serialized.length > MAX_SERIALIZED_LENGTH) {
|
||||
console.warn("[tree] cached tree too large to persist; skipping", key);
|
||||
return;
|
||||
}
|
||||
localStorage.setItem(key, serialized);
|
||||
} catch (err) {
|
||||
// QuotaExceededError, private mode, jsdom shims without working storage…
|
||||
// The cache is best-effort: warn once, keep the in-memory tree working.
|
||||
if (!writeFailureWarned) {
|
||||
writeFailureWarned = true;
|
||||
console.warn("[tree] failed to persist tree cache", err);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Exported so tests can force the debounced write synchronously; production
|
||||
// code must never need it (the beforeunload hook below covers reloads).
|
||||
export function flushPendingTreeDataWrites(): void {
|
||||
if (flushTimer !== null) {
|
||||
clearTimeout(flushTimer);
|
||||
flushTimer = null;
|
||||
}
|
||||
if (persistenceDisabled) {
|
||||
// Belt-and-braces: after logout nothing may reach localStorage, even via
|
||||
// the beforeunload flush racing the redirect. Drop anything queued.
|
||||
pendingWrites.clear();
|
||||
return;
|
||||
}
|
||||
for (const [key, value] of pendingWrites) {
|
||||
writeNow(key, value);
|
||||
}
|
||||
pendingWrites.clear();
|
||||
}
|
||||
|
||||
// Logout hygiene: the tree cache stores PAGE TITLES, so leaving it behind
|
||||
// would keep them readable in localStorage on a shared machine after logout.
|
||||
// Sweep by key prefix (not just the current scope) so stale scopes — old
|
||||
// users, the `anon:anon` fallback — are purged too. Pending debounced writes
|
||||
// are DISCARDED first (not flushed): a queued write firing after the sweep
|
||||
// would silently resurrect a removed key.
|
||||
export function clearPersistedTreeCaches(): void {
|
||||
// Disable persistence FIRST so no write can be queued (or flushed) between
|
||||
// the sweep below and the full-page navigation every caller performs next.
|
||||
persistenceDisabled = true;
|
||||
if (flushTimer !== null) {
|
||||
clearTimeout(flushTimer);
|
||||
flushTimer = null;
|
||||
}
|
||||
pendingWrites.clear();
|
||||
try {
|
||||
// Collect matching keys BEFORE removing: deleting while iterating
|
||||
// `localStorage.key(i)` shifts the indices and skips entries.
|
||||
const keysToRemove: string[] = [];
|
||||
for (let i = 0; i < localStorage.length; i++) {
|
||||
const key = localStorage.key(i);
|
||||
if (
|
||||
key !== null &&
|
||||
(key.startsWith(TREE_DATA_KEY_PREFIX) ||
|
||||
key.startsWith(OPEN_TREE_NODES_KEY_PREFIX))
|
||||
) {
|
||||
keysToRemove.push(key);
|
||||
}
|
||||
}
|
||||
for (const key of keysToRemove) {
|
||||
localStorage.removeItem(key);
|
||||
}
|
||||
} catch {
|
||||
// Best-effort: disabled storage / jsdom shims must never break logout.
|
||||
}
|
||||
}
|
||||
|
||||
// Flush the pending debounced write on unload so a reload right after a tree
|
||||
// change doesn't lose the newest state (the debounce would otherwise eat it).
|
||||
if (
|
||||
typeof window !== "undefined" &&
|
||||
typeof window.addEventListener === "function"
|
||||
) {
|
||||
window.addEventListener("beforeunload", flushPendingTreeDataWrites);
|
||||
}
|
||||
|
||||
// Custom sync storage for the tree cache. Deliberately NO `subscribe` key:
|
||||
// cross-tab sync would REPLACE this tab's tree wholesale and clobber in-flight
|
||||
// lazy loads; websockets already keep every open tab live. Each tab keeps its
|
||||
// own in-memory tree — localStorage only seeds the next boot.
|
||||
const treeDataStorage = {
|
||||
getItem: (key: string, initialValue: SpaceTreeNode[]): SpaceTreeNode[] => {
|
||||
// Defensive: jsdom test shims may lack methods, stored JSON may be
|
||||
// corrupted or of a wrong shape. Any failure falls back to the empty tree.
|
||||
try {
|
||||
const raw = localStorage.getItem(key);
|
||||
if (raw === null) return initialValue;
|
||||
const parsed = JSON.parse(raw);
|
||||
return Array.isArray(parsed) ? (parsed as SpaceTreeNode[]) : initialValue;
|
||||
} catch {
|
||||
return initialValue;
|
||||
}
|
||||
},
|
||||
setItem: (key: string, newValue: SpaceTreeNode[]): void => {
|
||||
// After logout the cache must stay purged: neither queue the write nor arm
|
||||
// a new flush timer (see persistenceDisabled above). The in-memory atom
|
||||
// value is unaffected — only the localStorage mirror is frozen.
|
||||
if (persistenceDisabled) return;
|
||||
pendingWrites.set(key, newValue);
|
||||
if (flushTimer !== null) clearTimeout(flushTimer);
|
||||
flushTimer = setTimeout(flushPendingTreeDataWrites, WRITE_DEBOUNCE_MS);
|
||||
},
|
||||
removeItem: (key: string): void => {
|
||||
pendingWrites.delete(key);
|
||||
try {
|
||||
localStorage.removeItem(key);
|
||||
} catch {
|
||||
/* best-effort cache — ignore */
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
// One persisted tree per (workspace, user) — same scoping rationale as the
|
||||
// open-map atom (accounts sharing a browser origin must not leak trees).
|
||||
// `getOnInit: true` reads localStorage synchronously at atom init, so the very
|
||||
// first render already has the cached tree — no blank-then-jump sidebar.
|
||||
const treeDataFamily = atomFamily((scopeKey: string) =>
|
||||
atomWithStorage<SpaceTreeNode[]>(
|
||||
`${TREE_DATA_KEY_PREFIX}${scopeKey}`,
|
||||
[],
|
||||
treeDataStorage,
|
||||
{ getOnInit: true },
|
||||
),
|
||||
);
|
||||
|
||||
// Public facade — same read value (SpaceTreeNode[]) and same setter shape
|
||||
// (value OR functional updater) as the previous in-memory atom, transparently
|
||||
// routed to the persisted tree of the current workspace/user.
|
||||
export const treeDataAtom = atom(
|
||||
(get) => get(treeDataFamily(get(scopeKeyAtom))),
|
||||
(
|
||||
get,
|
||||
set,
|
||||
update: SpaceTreeNode[] | ((prev: SpaceTreeNode[]) => SpaceTreeNode[]),
|
||||
) => {
|
||||
const target = treeDataFamily(get(scopeKeyAtom));
|
||||
const next =
|
||||
typeof update === "function"
|
||||
? (update as (prev: SpaceTreeNode[]) => SpaceTreeNode[])(get(target))
|
||||
: update;
|
||||
set(target, next);
|
||||
},
|
||||
);
|
||||
export const treeDataAtom = atom<SpaceTreeNode[]>([]);
|
||||
|
||||
// Atom
|
||||
export const appendNodeChildrenAtom = atom(
|
||||
|
||||
@@ -71,8 +71,7 @@ vi.mock("@mantine/core", () => ({
|
||||
// getOnInit), which crashes under jsdom's localStorage shim here. Swap in a
|
||||
// plain in-memory atom with the same read value (OpenMap) and the same setter
|
||||
// shape (value OR functional updater) so the component's open-state logic runs
|
||||
// unchanged while staying inside the test store. `scopeKeyAtom` is also
|
||||
// re-exported (the real module exports it for the persisted tree-data atom).
|
||||
// unchanged while staying inside the test store.
|
||||
vi.mock("@/features/page/tree/atoms/open-tree-nodes-atom.ts", async () => {
|
||||
const { atom } = await import("jotai");
|
||||
type OpenMap = Record<string, boolean>;
|
||||
@@ -87,17 +86,11 @@ vi.mock("@/features/page/tree/atoms/open-tree-nodes-atom.ts", async () => {
|
||||
set(base, next);
|
||||
},
|
||||
);
|
||||
// Fixed scope key: the tree-data atom family resolves through this, so all
|
||||
// tests read/write the same (empty at start of each test) storage key.
|
||||
const scopeKeyAtom = atom(() => "test-workspace:test-user");
|
||||
return { openTreeNodesAtom, scopeKeyAtom };
|
||||
return { openTreeNodesAtom };
|
||||
});
|
||||
|
||||
import SpaceTree, { SpaceTreeApi } from "./space-tree";
|
||||
import {
|
||||
treeDataAtom,
|
||||
flushPendingTreeDataWrites,
|
||||
} from "@/features/page/tree/atoms/tree-data-atom.ts";
|
||||
import { treeDataAtom } from "@/features/page/tree/atoms/tree-data-atom.ts";
|
||||
import { openTreeNodesAtom } from "@/features/page/tree/atoms/open-tree-nodes-atom.ts";
|
||||
import { createStore, Provider } from "jotai";
|
||||
import type { SpaceTreeNode } from "@/features/page/tree/types.ts";
|
||||
@@ -141,10 +134,6 @@ function renderTree(store: ReturnType<typeof createStore>) {
|
||||
beforeEach(() => {
|
||||
getSpaceTreeMock.mockReset();
|
||||
notificationsShowMock.mockReset();
|
||||
// The tree-data atom persists via a ~500 ms trailing debounce; flush it NOW
|
||||
// (cancelling the timer) so a previous test's pending write can't land in
|
||||
// storage mid-test after the clear below.
|
||||
flushPendingTreeDataWrites();
|
||||
// jsdom's localStorage shim here lacks `clear`; guard it. Each test uses a
|
||||
// fresh jotai store anyway, so cross-test open-state never leaks.
|
||||
try {
|
||||
|
||||
@@ -199,66 +199,45 @@ const SpaceTree = forwardRef<SpaceTreeApi, SpaceTreeProps>(function SpaceTree(
|
||||
const openIdsRef = useRef(openIds);
|
||||
openIdsRef.current = openIds;
|
||||
|
||||
// Re-fetch and reconcile the children of every currently-open, already-loaded
|
||||
// branch of THIS space. Shared by the socket reconnect handler and the
|
||||
// post-load cache refresh below. The ROOT level is reconciled separately by
|
||||
// the root-query refetch + mergeRootTrees; an UNLOADED branch is skipped
|
||||
// (lazy-load fetches it fresh on expand). Reads refs so it always sees the
|
||||
// latest tree/open-state/space without re-creating the callback.
|
||||
const refreshOpenBranches = useCallback(async () => {
|
||||
const effectSpaceId = spaceIdRef.current;
|
||||
const branchIds = loadedOpenBranchIds(
|
||||
dataRef.current.filter((n) => n?.spaceId === effectSpaceId),
|
||||
openIdsRef.current,
|
||||
);
|
||||
if (branchIds.length === 0) return;
|
||||
for (const id of branchIds) {
|
||||
try {
|
||||
// `fresh: true` bypasses the 30-min sidebar-pages cache so the
|
||||
// reconcile sees the server's CURRENT children (handler-order
|
||||
// independent — no reliance on the global reconnect invalidation).
|
||||
const fresh = await fetchAllAncestorChildren(
|
||||
{ pageId: id, spaceId: effectSpaceId },
|
||||
{ fresh: true },
|
||||
);
|
||||
if (spaceIdRef.current !== effectSpaceId) return; // space switched
|
||||
setData((prev) => treeModel.reconcileChildren(prev, id, fresh));
|
||||
} catch (err) {
|
||||
console.error("[tree] open branch refresh failed", err);
|
||||
}
|
||||
}
|
||||
}, [setData]);
|
||||
|
||||
// Reconnect refresh (#159 #8): on a socket reconnect, refresh open branches
|
||||
// Reconnect refresh (#159 #8): on a socket reconnect, re-fetch and reconcile
|
||||
// the children of every currently-open, already-loaded branch of THIS space,
|
||||
// so a move/rename/delete that happened INSIDE a loaded branch while events
|
||||
// were missed (laptop sleep / wifi gap) is reflected instead of left stale.
|
||||
// No first-connect guard is needed: space-tree usually mounts AFTER the
|
||||
// initial connect, so every `connect` it sees is a reconnect; the rare
|
||||
// The ROOT level is reconciled separately by the root-query refetch +
|
||||
// mergeRootTrees; an UNLOADED branch is skipped (lazy-load fetches it fresh on
|
||||
// expand). No first-connect guard is needed: space-tree usually mounts AFTER
|
||||
// the initial connect, so every `connect` it sees is a reconnect; the rare
|
||||
// initial-connect case has an empty tree, so the refresh is a harmless no-op.
|
||||
useEffect(() => {
|
||||
if (!socket) return;
|
||||
const onConnect = () => {
|
||||
refreshOpenBranches();
|
||||
const onConnect = async () => {
|
||||
const effectSpaceId = spaceIdRef.current;
|
||||
const branchIds = loadedOpenBranchIds(
|
||||
dataRef.current.filter((n) => n?.spaceId === effectSpaceId),
|
||||
openIdsRef.current,
|
||||
);
|
||||
if (branchIds.length === 0) return;
|
||||
for (const id of branchIds) {
|
||||
try {
|
||||
// `fresh: true` bypasses the 30-min sidebar-pages cache so the
|
||||
// reconcile sees the server's CURRENT children (handler-order
|
||||
// independent — no reliance on the global reconnect invalidation).
|
||||
const fresh = await fetchAllAncestorChildren(
|
||||
{ pageId: id, spaceId: effectSpaceId },
|
||||
{ fresh: true },
|
||||
);
|
||||
if (spaceIdRef.current !== effectSpaceId) return; // space switched
|
||||
setData((prev) => treeModel.reconcileChildren(prev, id, fresh));
|
||||
} catch (err) {
|
||||
console.error("[tree] reconnect branch refresh failed", err);
|
||||
}
|
||||
}
|
||||
};
|
||||
socket.on("connect", onConnect);
|
||||
return () => {
|
||||
socket.off("connect", onConnect);
|
||||
};
|
||||
}, [socket, refreshOpenBranches]);
|
||||
|
||||
// Post-load cache refresh: the sidebar paints instantly from the
|
||||
// localStorage-cached tree, so children of open branches may be stale. Once
|
||||
// the server root set has been merged for this space (isDataLoaded flips
|
||||
// true), refresh every open, already-loaded branch ONCE per space per mount.
|
||||
// dataRef.current is already up to date here: refs are assigned during
|
||||
// render, and this effect runs after the merge-triggered re-render commit.
|
||||
const refreshedSpacesRef = useRef<Set<string>>(new Set());
|
||||
useEffect(() => {
|
||||
if (!isDataLoaded) return;
|
||||
if (refreshedSpacesRef.current.has(spaceId)) return;
|
||||
refreshedSpacesRef.current.add(spaceId);
|
||||
refreshOpenBranches();
|
||||
}, [isDataLoaded, spaceId, refreshOpenBranches]);
|
||||
}, [socket, setData]);
|
||||
|
||||
const handleToggle = useCallback(
|
||||
async (id: string, isOpen: boolean) => {
|
||||
@@ -354,17 +333,12 @@ const SpaceTree = forwardRef<SpaceTreeApi, SpaceTreeProps>(function SpaceTree(
|
||||
|
||||
return (
|
||||
<div className={classes.treeContainer}>
|
||||
{/* "No pages yet" only after the SERVER confirmed the space is empty —
|
||||
never while just the localStorage cache is empty. */}
|
||||
{isDataLoaded && filteredData.length === 0 && (
|
||||
<Text size="xs" c="dimmed" py="xs" px="sm">
|
||||
{t("No pages yet")}
|
||||
</Text>
|
||||
)}
|
||||
{/* Cache-first paint: render as soon as ANY data exists (synchronous
|
||||
localStorage hydration) instead of waiting for the server round-trip;
|
||||
the background merge/refresh reconciles it afterwards. */}
|
||||
{filteredData.length > 0 && (
|
||||
{isDataLoaded && filteredData.length > 0 && (
|
||||
<DocTree<SpaceTreeNode>
|
||||
data={filteredData}
|
||||
openIds={openIds}
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import axios, { AxiosInstance } from "axios";
|
||||
import APP_ROUTE from "@/lib/app-route.ts";
|
||||
import { isCloud } from "@/lib/config.ts";
|
||||
import { clearPersistedTreeCaches } from "@/features/page/tree/atoms/tree-data-atom";
|
||||
|
||||
const api: AxiosInstance = axios.create({
|
||||
baseURL: "/api",
|
||||
@@ -72,12 +71,6 @@ function redirectToLogin() {
|
||||
"/invites",
|
||||
];
|
||||
if (!exemptPaths.some((path) => window.location.pathname.startsWith(path))) {
|
||||
// Forced logout (401 / expired session) must purge the persisted sidebar
|
||||
// tree caches too: they contain page titles, and on a shared machine most
|
||||
// sessions end via cookie expiry — not the logout button — so this is the
|
||||
// only cleanup that runs on that path. It also disables further cache
|
||||
// persistence until the full page load below.
|
||||
clearPersistedTreeCaches();
|
||||
const redirectTo = window.location.pathname;
|
||||
if (redirectTo === APP_ROUTE.HOME) {
|
||||
window.location.href = APP_ROUTE.AUTH.LOGIN;
|
||||
|
||||
@@ -449,7 +449,9 @@ export function applyAlignment(container: HTMLElement, align: string) {
|
||||
// the next line when the viewport is narrow. The right/bottom padding
|
||||
// provides the gap between images in a row and between wrapped rows;
|
||||
// vertical-align: top keeps rows of different-height images aligned by
|
||||
// their top edge.
|
||||
// their top edge. Horizontal centering of the whole row is handled by the
|
||||
// client stylesheet (media.css) via a :has() rule on the parent block
|
||||
// container, since the row has no wrapper element of its own.
|
||||
container.style.display = "inline-block";
|
||||
container.style.verticalAlign = "top";
|
||||
container.style.padding = "0 10px 10px 0";
|
||||
|
||||
Reference in New Issue
Block a user