feat(editor): indentation

apps/client/package.json

@@ -7,89 +7,78 @@
     "build": "tsc && vite build",
     "lint": "eslint .",
     "preview": "vite preview",
-    "format": "prettier --write \"src/**/*.tsx\" \"src/**/*.ts\"",
+    "format": "prettier --write \"src/**/*.tsx\" \"src/**/*.ts\""
-    "test": "vitest run",
-    "test:watch": "vitest"
   },
   "dependencies": {
-    "@atlaskit/pragmatic-drag-and-drop": "1.8.1",
+    "@casl/react": "^5.0.1",
-    "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "2.1.5",
-    "@atlaskit/pragmatic-drag-and-drop-flourish": "2.0.15",
-    "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.1.0",
-    "@atlaskit/pragmatic-drag-and-drop-live-region": "1.3.4",
-    "@casl/react": "5.0.1",
     "@docmost/editor-ext": "workspace:*",
+    "@emoji-mart/data": "^1.2.1",
+    "@emoji-mart/react": "^1.1.1",
     "@excalidraw/excalidraw": "0.18.0-3a5ef40",
-    "@mantine/core": "8.3.18",
+    "@mantine/core": "^8.3.18",
-    "@mantine/dates": "8.3.18",
+    "@mantine/dates": "^8.3.18",
-    "@mantine/form": "8.3.18",
+    "@mantine/form": "^8.3.18",
-    "@mantine/hooks": "8.3.18",
+    "@mantine/hooks": "^8.3.18",
-    "@mantine/modals": "8.3.18",
+    "@mantine/modals": "^8.3.18",
-    "@mantine/notifications": "8.3.18",
+    "@mantine/notifications": "^8.3.18",
-    "@mantine/spotlight": "8.3.18",
+    "@mantine/spotlight": "^8.3.18",
-    "@slidoapp/emoji-mart": "5.8.7",
+    "@tabler/icons-react": "^3.40.0",
-    "@slidoapp/emoji-mart-data": "1.2.4",
-    "@slidoapp/emoji-mart-react": "1.1.5",
-    "@tabler/icons-react": "3.40.0",
     "@tanstack/react-query": "5.90.17",
-    "@tanstack/react-virtual": "3.13.24",
+    "alfaaz": "^1.1.0",
-    "alfaaz": "1.1.0",
+    "axios": "1.15.0",
-    "axios": "1.16.0",
+    "blueimp-load-image": "^5.16.0",
-    "blueimp-load-image": "5.16.0",
+    "clsx": "^2.1.1",
-    "clsx": "2.1.1",
+    "emoji-mart": "^5.6.0",
-    "file-saver": "2.0.5",
+    "file-saver": "^2.0.5",
-    "highlightjs-sap-abap": "0.3.0",
+    "highlightjs-sap-abap": "^0.3.0",
     "i18next": "25.10.1",
     "i18next-http-backend": "3.0.6",
-    "jotai": "2.18.1",
+    "jotai": "^2.18.1",
-    "jotai-optics": "0.4.0",
+    "jotai-optics": "^0.4.0",
-    "js-cookie": "3.0.5",
+    "js-cookie": "^3.0.5",
-    "jwt-decode": "4.0.0",
+    "jwt-decode": "^4.0.0",
     "katex": "0.16.40",
-    "lowlight": "3.3.0",
+    "lowlight": "^3.3.0",
-    "mantine-form-zod-resolver": "1.3.0",
+    "mantine-form-zod-resolver": "^1.3.0",
-    "mermaid": "11.15.0",
+    "mermaid": "^11.13.0",
-    "mitt": "3.0.1",
+    "mitt": "^3.0.1",
     "posthog-js": "1.372.2",
-    "react": "18.3.1",
+    "react": "^18.3.1",
+    "react-arborist": "3.4.0",
     "react-clear-modal": "^2.0.18",
     "react-dom": "^18.3.1",
-    "react-drawio": "1.0.7",
+    "react-drawio": "^1.0.7",
-    "react-error-boundary": "6.1.1",
+    "react-error-boundary": "^6.1.1",
-    "react-helmet-async": "3.0.0",
+    "react-helmet-async": "^3.0.0",
     "react-i18next": "16.5.8",
-    "react-router-dom": "7.13.1",
+    "react-router-dom": "^7.13.1",
-    "semver": "7.7.4",
+    "semver": "^7.7.4",
-    "socket.io-client": "4.8.3",
+    "socket.io-client": "^4.8.3",
-    "zod": "4.3.6"
+    "zod": "^4.3.6"
   },
   "devDependencies": {
-    "@eslint/js": "9.28.0",
+    "@eslint/js": "^9.28.0",
-    "@tanstack/eslint-plugin-query": "5.94.4",
+    "@tanstack/eslint-plugin-query": "^5.94.4",
-    "@testing-library/jest-dom": "6.6.0",
+    "@types/blueimp-load-image": "^5.16.6",
-    "@testing-library/react": "16.1.0",
+    "@types/file-saver": "^2.0.7",
-    "@types/blueimp-load-image": "5.16.6",
+    "@types/js-cookie": "^3.0.6",
-    "@types/file-saver": "2.0.7",
+    "@types/katex": "^0.16.8",
-    "@types/js-cookie": "3.0.6",
-    "@types/katex": "0.16.8",
     "@types/node": "22.19.1",
-    "@types/react": "18.3.12",
+    "@types/react": "^18.3.12",
-    "@types/react-dom": "18.3.1",
+    "@types/react-dom": "^18.3.1",
-    "@vitejs/plugin-react": "6.0.1",
+    "@vitejs/plugin-react": "^6.0.1",
-    "eslint": "9.28.0",
+    "eslint": "^9.28.0",
-    "eslint-plugin-react": "7.37.5",
+    "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "7.0.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "0.5.2",
+    "eslint-plugin-react-refresh": "^0.5.2",
-    "globals": "15.13.0",
+    "globals": "^15.13.0",
-    "jsdom": "25.0.0",
+    "optics-ts": "^2.4.1",
-    "optics-ts": "2.4.1",
+    "postcss": "^8.5.12",
-    "postcss": "8.5.14",
+    "postcss-preset-mantine": "^1.18.0",
-    "postcss-preset-mantine": "1.18.0",
+    "postcss-simple-vars": "^7.0.1",
-    "postcss-simple-vars": "7.0.1",
+    "prettier": "^3.8.1",
-    "prettier": "3.8.1",
+    "typescript": "^5.9.3",
-    "typescript": "5.9.3",
+    "typescript-eslint": "^8.57.1",
-    "typescript-eslint": "8.57.1",
+    "vite": "8.0.5"
-    "vite": "8.0.5",
-    "vitest": "4.1.6"
   }
 }

apps/client/public/locales/en-US/translation.json

@@ -71,7 +71,6 @@
   "Export": "Export",
   "Failed to create page": "Failed to create page",
   "Failed to delete page": "Failed to delete page",
-  "Failed to restore page": "Failed to restore page",
   "Failed to fetch recent pages": "Failed to fetch recent pages",
   "Failed to import pages": "Failed to import pages",
   "Failed to load page. An error occurred.": "Failed to load page. An error occurred.",
@@ -287,19 +286,6 @@
   "Add row above": "Add row above",
   "Add row below": "Add row below",
   "Delete table": "Delete table",
-  "Add column left": "Add column left",
-  "Add column right": "Add column right",
-  "Clear cell": "Clear cell",
-  "Clear cells": "Clear cells",
-  "Toggle header cell": "Toggle header cell",
-  "Toggle header column": "Toggle header column",
-  "Toggle header row": "Toggle header row",
-  "Move column left": "Move column left",
-  "Move column right": "Move column right",
-  "Move row down": "Move row down",
-  "Move row up": "Move row up",
-  "Sort A → Z": "Sort A → Z",
-  "Sort Z → A": "Sort Z → A",
   "Info": "Info",
   "Note": "Note",
   "Success": "Success",
@@ -362,8 +348,6 @@
   "Create block quote.": "Create block quote.",
   "Insert code snippet.": "Insert code snippet.",
   "Insert horizontal rule divider": "Insert horizontal rule divider",
-  "Page break": "Page break",
-  "Insert a page break for printing.": "Insert a page break for printing.",
   "Upload any image from your device.": "Upload any image from your device.",
   "Upload any video from your device.": "Upload any video from your device.",
   "Upload any audio from your device.": "Upload any audio from your device.",
@@ -582,8 +566,6 @@
   "Move to trash": "Move to trash",
   "Move this page to trash?": "Move this page to trash?",
   "Restore page": "Restore page",
-  "Permanently delete": "Permanently delete",
-  "<b>{{name}}</b> moved this page to Trash {{time}}.": "<b>{{name}}</b> moved this page to Trash {{time}}.",
   "Page moved to trash": "Page moved to trash",
   "Page restored successfully": "Page restored successfully",
   "Deleted by": "Deleted by",
@@ -950,6 +932,7 @@
   "Settings navigation": "Settings navigation",
   "AI navigation": "AI navigation",
   "Breadcrumb": "Breadcrumb",
+  "Skip to main content": "Skip to main content"
   "Synced block": "Synced block",
   "Create a block that stays in sync across pages.": "Create a block that stays in sync across pages.",
   "Editing original": "Editing original",
@@ -963,60 +946,5 @@
   "No pages": "No pages",
   "The original synced block no longer exists": "The original synced block no longer exists",
   "You don't have access to this synced block": "You don't have access to this synced block",
-  "Failed to load this synced block": "Failed to load this synced block",
+  "Failed to load this synced block": "Failed to load this synced block"
-  "Fixed editor toolbar": "Fixed editor toolbar",
-  "Show a formatting toolbar above the editor with quick access to common actions.": "Show a formatting toolbar above the editor with quick access to common actions.",
-  "Toggle fixed editor toolbar": "Toggle fixed editor toolbar",
-  "Normal text": "Normal text",
-  "More inline formatting": "More inline formatting",
-  "Subscript": "Subscript",
-  "Superscript": "Superscript",
-  "Inline code": "Inline code",
-  "Insert media": "Insert media",
-  "Mention": "Mention",
-  "Emoji": "Emoji",
-  "Columns": "Columns",
-  "More inserts": "More inserts",
-  "Embeds": "Embeds",
-  "Diagrams": "Diagrams",
-  "Advanced": "Advanced",
-  "Utility": "Utility",
-  "Decrease indent": "Decrease indent",
-  "Increase indent": "Increase indent",
-  "Clear formatting": "Clear formatting",
-  "Code block": "Code block",
-  "Experimental": "Experimental",
-  "Strikethrough": "Strikethrough",
-  "Undo": "Undo",
-  "Redo": "Redo",
-  "Backlinks": "Backlinks",
-  "Last updated by": "Last updated by",
-  "Last updated": "Last updated",
-  "Stats": "Stats",
-  "Word count": "Word count",
-  "Characters": "Characters",
-  "Incoming links": "Incoming links",
-  "Outgoing links": "Outgoing links",
-  "Incoming links ({{count}})": "Incoming links ({{count}})",
-  "Outgoing links ({{count}})": "Outgoing links ({{count}})",
-  "No pages link here yet.": "No pages link here yet.",
-  "This page doesn't link to other pages yet.": "This page doesn't link to other pages yet.",
-  "Verified until {{date}}": "Verified until {{date}}",
-  "Labels": "Labels",
-  "Add label": "Add label",
-  "No labels yet": "No labels yet",
-  "Already added": "Already added",
-  "Invalid label name": "Invalid label name",
-  "No matches": "No matches",
-  "Search or create…": "Search or create…",
-  "Remove label {{name}}": "Remove label {{name}}",
-  "Failed to add label": "Failed to add label",
-  "Failed to remove label": "Failed to remove label",
-  "No pages with this label": "No pages with this label",
-  "Pages tagged with this label will appear here.": "Pages tagged with this label will appear here.",
-  "No pages match your search.": "No pages match your search.",
-  "Updated {{date}}": "Updated {{date}}",
-  "Cell actions": "Cell actions",
-  "Column actions": "Column actions",
-  "Row actions": "Row actions"
 }

apps/client/src/App.tsx

@@ -45,7 +45,6 @@ import TemplateEditor from "@/ee/template/pages/template-editor";
 import FavoritesPage from "@/pages/favorites/favorites-page";
 import AiChat from "@/ee/ai-chat/pages/ai-chat.tsx";
 import VerifyEmail from "@/ee/pages/verify-email.tsx";
-import LabelPage from "@/pages/label/label-page";
 
 export default function App() {
   const { t } = useTranslation();
@@ -93,7 +92,6 @@ export default function App() {
           <Route path={"/ai/chat/:chatId"} element={<AiChat />} />
           <Route path={"/spaces"} element={<SpacesPage />} />
           <Route path={"/favorites"} element={<FavoritesPage />} />
-          <Route path={"/labels/:labelName"} element={<LabelPage />} />
           <Route path={"/templates"} element={<TemplateList />} />
           <Route
             path={"/templates/:templateId"}

apps/client/src/components/layouts/global/app-shell.module.css

@@ -27,3 +27,23 @@
     background: light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-5))
   }
 }
+
+.skipLink {
+  position: fixed;
+  left: 8px;
+  top: 8px;
+  padding: 8px 12px;
+  background: var(--mantine-color-blue-6);
+  color: #fff;
+  border-radius: 4px;
+  text-decoration: none;
+  z-index: 1000;
+  transform: translateY(-150%);
+
+  &:focus {
+    transform: translateY(0);
+    outline: 2px solid var(--mantine-color-blue-3);
+  }
+}
+
+

apps/client/src/components/layouts/global/aside.tsx

@@ -1,5 +1,4 @@
-import { ActionIcon, Box, Group, ScrollArea, Text, Tooltip } from "@mantine/core";
+import { Box, ScrollArea, Text } from "@mantine/core";
-import { IconX } from "@tabler/icons-react";
 import CommentListWithTabs from "@/features/comment/components/comment-list-with-tabs.tsx";
 import { useAtom } from "jotai";
 import { asideStateAtom } from "@/components/layouts/global/hooks/atoms/sidebar-atom.ts";
@@ -9,13 +8,11 @@ import { TableOfContents } from "@/features/editor/components/table-of-contents/
 import { useAtomValue } from "jotai";
 import { pageEditorAtom } from "@/features/editor/atoms/editor-atoms.ts";
 import AsideChatPanel from "@/ee/ai-chat/components/aside-chat-panel";
-import { PageDetailsAside } from "@/features/page-details/components/page-details-aside.tsx";
 
 export default function Aside() {
-  const [{ tab }, setAsideState] = useAtom(asideStateAtom);
+  const [{ tab }] = useAtom(asideStateAtom);
   const { t } = useTranslation();
   const pageEditor = useAtomValue(pageEditorAtom);
-  const closeAside = () => setAsideState((s) => ({ ...s, isAsideOpen: false }));
 
   let title: string;
   let component: ReactNode;
@@ -33,10 +30,6 @@ export default function Aside() {
       component = <AsideChatPanel />;
       title = "AI Chat";
       break;
-    case "details":
-      component = <PageDetailsAside />;
-      title = "Details";
-      break;
     default:
       component = null;
       title = null;
@@ -47,19 +40,9 @@ export default function Aside() {
       {component && (
         <>
           {tab !== "chat" && (
-            <Group justify="space-between" wrap="nowrap" mb="md">
+            <Text mb="md" fw={500}>
-              <Text fw={500}>{t(title)}</Text>
+              {t(title)}
-              <Tooltip label={t("Close")} withArrow>
+            </Text>
-                <ActionIcon
-                  variant="subtle"
-                  color="gray"
-                  onClick={closeAside}
-                  aria-label={t("Close")}
-                >
-                  <IconX size={18} />
-                </ActionIcon>
-              </Tooltip>
-            </Group>
           )}
 
           {tab === "comments" || tab === "chat" ? (

apps/client/src/components/layouts/global/global-app-shell.tsx

@@ -81,6 +81,10 @@ export default function GlobalAppShell({
   const showGlobalSidebar = !isSpaceRoute && !isSettingsRoute && !isAiRoute;
 
   return (
+    <>
+      <a href="#main-content" className={classes.skipLink}>
+        {t("Skip to main content")}
+      </a>
       <AppShell
       header={{ height: 45 }}
       navbar={{
@@ -147,8 +151,6 @@ export default function GlobalAppShell({
                 ? t("Table of contents")
                 : asideTab === "chat"
                   ? t("AI Chat")
-                  : asideTab === "details"
-                    ? t("Details")
                   : undefined
           }
         >
@@ -156,5 +158,6 @@ export default function GlobalAppShell({
         </AppShell.Aside>
       )}
     </AppShell>
+    </>
   );
 }

apps/client/src/components/layouts/global/hooks/atoms/sidebar-atom.ts

@@ -10,7 +10,6 @@ export const desktopSidebarAtom = atomWithWebStorage<boolean>(
 
 export const desktopAsideAtom = atom<boolean>(false);
 
-// Valid `tab` values: "" | "comments" | "toc" | "chat" | "details"
 type AsideStateType = {
   tab: string;
   isAsideOpen: boolean;

apps/client/src/components/settings/app-version.tsx

@@ -29,7 +29,7 @@ export default function AppVersion() {
       >
         <Indicator
           label={t("New update")}
-          color="gray"
+          color="dark"
           inline
           size={16}
           position="middle-end"

apps/client/src/components/ui/custom-avatar.tsx

@@ -42,11 +42,6 @@ function pickInitialsColor(name: string) {
   return SAFE_INITIALS_COLORS[hashName(name) % SAFE_INITIALS_COLORS.length];
 }
 
-function sanitizeInitialsSource(name: string) {
-  const sanitized = name.replace(/[^\p{L}\p{N}\s]/gu, " ").trim();
-  return sanitized || name;
-}
-
 export const CustomAvatar = React.forwardRef<
   HTMLInputElement,
   CustomAvatarProps
@@ -54,13 +49,12 @@ export const CustomAvatar = React.forwardRef<
   const avatarLink = getAvatarUrl(avatarUrl, type);
   const resolvedColor =
     !color || color === "initials" ? pickInitialsColor(name ?? "") : color;
-  const initialsSource = sanitizeInitialsSource(name ?? "");
 
   return (
     <Avatar
       ref={ref}
       src={avatarLink}
-      name={initialsSource}
+      name={name}
       alt={name}
       color={resolvedColor}
       {...props}

apps/client/src/components/ui/emoji-picker.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, useEffect, useState } from "react";
+import React, { ReactNode, useState } from "react";
 import {
   ActionIcon,
   Popover,
@@ -7,24 +7,9 @@ import {
 } from "@mantine/core";
 import { useClickOutside, useDisclosure, useWindowEvent } from "@mantine/hooks";
 import { Suspense } from "react";
+const Picker = React.lazy(() => import("@emoji-mart/react"));
 import { useTranslation } from "react-i18next";
 
-// Load the picker module AND the emoji data in parallel inside the lazy
-// resolution, then bind the data into the component. React.lazy only finishes
-// suspending once both are in memory, so the Suspense boundary hides the
-// Remove button until the Picker can render with real content.
-const Picker = React.lazy(async () => {
-  const [pickerModule, dataModule] = await Promise.all([
-    import("@slidoapp/emoji-mart-react"),
-    import("@slidoapp/emoji-mart-data"),
-  ]);
-  const PickerComp = pickerModule.default;
-  const data = dataModule.default;
-  return {
-    default: (props: any) => <PickerComp {...props} data={data} />,
-  };
-});
-
 export interface EmojiPickerInterface {
   onEmojiSelect: (emoji: any) => void;
   icon: ReactNode;
@@ -34,7 +19,6 @@ export interface EmojiPickerInterface {
     size?: string;
     variant?: string;
     c?: string;
-    tabIndex?: number;
   };
 }
 
@@ -66,38 +50,6 @@ function EmojiPicker({
     }
   });
 
-  // emoji-mart's built-in autoFocus calls .focus() without preventScroll, which
-  // makes the browser scroll every scrollable ancestor of the search input to
-  // bring it on screen — including the page editor's scroll container, so the
-  // page jumps to the top whenever the picker is opened from a scrolled-down
-  // position. The search input lives inside the <em-emoji-picker> custom
-  // element's shadow root, so we poll for it after the dropdown mounts and
-  // focus it ourselves with preventScroll.
-  useEffect(() => {
-    if (!opened || !dropdown) return;
-    let cancelled = false;
-    let rafId = 0;
-    const tryFocus = (attempts: number) => {
-      if (cancelled) return;
-      const pickerEl = dropdown.querySelector("em-emoji-picker");
-      const input = pickerEl?.shadowRoot?.querySelector<HTMLInputElement>(
-        'input[type="search"]',
-      );
-      if (input) {
-        input.focus({ preventScroll: true });
-        return;
-      }
-      if (attempts < 60) {
-        rafId = requestAnimationFrame(() => tryFocus(attempts + 1));
-      }
-    };
-    rafId = requestAnimationFrame(() => tryFocus(0));
-    return () => {
-      cancelled = true;
-      cancelAnimationFrame(rafId);
-    };
-  }, [opened, dropdown]);
-
   const handleEmojiSelect = (emoji) => {
     onEmojiSelect(emoji);
     handlers.close();
@@ -122,7 +74,6 @@ function EmojiPicker({
           c={actionIconProps?.c || "gray"}
           variant={actionIconProps?.variant || "transparent"}
           size={actionIconProps?.size}
-          tabIndex={actionIconProps?.tabIndex}
           onClick={handlers.toggle}
           aria-label={t("Pick emoji")}
           aria-haspopup="dialog"
@@ -134,6 +85,7 @@ function EmojiPicker({
       <Suspense fallback={null}>
         <Popover.Dropdown bg="000" style={{ border: "none" }} ref={setDropdown}>
           <Picker
+            data={async () => (await import("@emoji-mart/data")).default}
             onEmojiSelect={handleEmojiSelect}
             perLine={8}
             skinTonePosition="search"

apps/client/src/ee/components/sso-login.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useState } from "react";
 import { useWorkspacePublicDataQuery } from "@/features/workspace/queries/workspace-query.ts";
 import { Button, Divider, Stack } from "@mantine/core";
 import { IconLock, IconServer } from "@tabler/icons-react";
@@ -7,37 +7,15 @@ import { buildSsoLoginUrl } from "@/ee/security/sso.utils.ts";
 import { SSO_PROVIDER } from "@/ee/security/contants.ts";
 import { GoogleIcon } from "@/components/icons/google-icon.tsx";
 import { LdapLoginModal } from "@/ee/components/ldap-login-modal.tsx";
-import { getRedirectParam } from "@/lib/app-route.ts";
-import useCurrentUser from "@/features/user/hooks/use-current-user.ts";
-
-const SSO_AUTO_ATTEMPT_KEY = "docmost:ssoAutoAttempt";
-const SSO_AUTO_ATTEMPT_TTL_MS = 5 * 60_000;
-
-function recentAutoAttempt(): boolean {
-  try {
-    const raw = window.sessionStorage.getItem(SSO_AUTO_ATTEMPT_KEY);
-    if (!raw) return false;
-    const ts = Number(raw);
-    return Number.isFinite(ts) && Date.now() - ts < SSO_AUTO_ATTEMPT_TTL_MS;
-  } catch {
-    return false;
-  }
-}
-
-function markAutoAttempt(): void {
-  try {
-    window.sessionStorage.setItem(SSO_AUTO_ATTEMPT_KEY, String(Date.now()));
-  } catch {
-    /* sessionStorage unavailable (private mode, etc.) — best effort */
-  }
-}
 
 export default function SsoLogin() {
   const { data, isLoading } = useWorkspacePublicDataQuery();
-  const { data: currentUser } = useCurrentUser();
   const [ldapModalOpened, setLdapModalOpened] = useState(false);
   const [selectedLdapProvider, setSelectedLdapProvider] = useState<IAuthProvider | null>(null);
-  const autoRedirectedRef = useRef(false);
+
+  if (!data?.authProviders || data?.authProviders?.length === 0) {
+    return null;
+  }
 
   const handleSsoLogin = (provider: IAuthProvider) => {
     if (provider.type === SSO_PROVIDER.LDAP) {
@@ -50,47 +28,10 @@ export default function SsoLogin() {
         providerId: provider.id,
         type: provider.type,
         workspaceId: data.id,
-        redirect: getRedirectParam() ?? undefined,
       });
     }
   };
 
-  // Auto-redirect when SSO is enforced and there is exactly one non-LDAP
-  // provider. The user has no other option, so skip the extra click.
-  useEffect(() => {
-    if (autoRedirectedRef.current) return;
-    if (!data?.enforceSso) return;
-    if (!data.authProviders || data.authProviders.length !== 1) return;
-    const onlyProvider = data.authProviders[0];
-    if (onlyProvider.type === SSO_PROVIDER.LDAP) return;
-
-    // Already signed in: let useRedirectIfAuthenticated handle navigation
-    // instead of racing it through the IdP.
-    if (currentUser?.user) return;
-
-    // Explicit logout: don't immediately bounce them back to the IdP.
-    const params = new URLSearchParams(window.location.search);
-    if (params.has("logout")) return;
-
-    // Circuit-breaker: if we already auto-redirected within the TTL, the
-    // user came back (likely from an IdP failure). Show the page so they
-    // can read errors or pick a different account.
-    if (recentAutoAttempt()) return;
-
-    autoRedirectedRef.current = true;
-    markAutoAttempt();
-    window.location.href = buildSsoLoginUrl({
-      providerId: onlyProvider.id,
-      type: onlyProvider.type,
-      workspaceId: data.id,
-      redirect: getRedirectParam() ?? undefined,
-    });
-  }, [data, currentUser]);
-
-  if (!data?.authProviders || data?.authProviders?.length === 0) {
-    return null;
-  }
-
   const getProviderIcon = (provider: IAuthProvider) => {
     if (provider.type === SSO_PROVIDER.GOOGLE) {
       return <GoogleIcon size={16} />;

apps/client/src/ee/page-verification/components/page-verification-modal.tsx

@@ -118,20 +118,10 @@ export function PageVerificationBadge({
 
   if (status === "none" && readOnly) return null;
 
-  const tooltipLabel =
-    status === "verified" && verificationInfo?.expiresAt
-      ? t("Verified until {{date}}", {
-          date: new Date(verificationInfo.expiresAt).toLocaleDateString(
-            undefined,
-            { month: "long", day: "numeric", year: "numeric" },
-          ),
-        })
-      : getStatusLabel(status, t);
-
   return (
     <>
       {status !== "none" ? (
-        <Tooltip label={tooltipLabel} withArrow openDelay={250}>
+        <Tooltip label={getStatusLabel(status, t)} withArrow openDelay={250}>
           <Group
             gap={4}
             onClick={open}

apps/client/src/ee/security/sso.utils.ts

@@ -18,21 +18,14 @@ export function buildSsoLoginUrl(opts: {
   providerId: string;
   type: SSO_PROVIDER;
   workspaceId?: string;
-  redirect?: string;
 }): string {
-  const { providerId, type, workspaceId, redirect } = opts;
+  const { providerId, type, workspaceId } = opts;
   const domain = getAppUrl();
 
-  const params = new URLSearchParams();
-  if (redirect) params.set("redirect", redirect);
-
   if (type === SSO_PROVIDER.GOOGLE) {
-    if (workspaceId) params.set("workspaceId", workspaceId);
+    return `${getServerAppUrl()}/api/sso/${type}/login?workspaceId=${workspaceId}`;
-    return `${getServerAppUrl()}/api/sso/${type}/login?${params.toString()}`;
   }
-  const query = params.toString();
+  return `${domain}/api/sso/${type}/${providerId}/login`;
-  const base = `${domain}/api/sso/${type}/${providerId}/login`;
-  return query ? `${base}?${query}` : base;
 }
 
 export function getGoogleSignupUrl(): string {

apps/client/src/features/auth/hooks/use-auth.ts

@@ -166,7 +166,7 @@ export default function useAuth() {
   const handleLogout = async () => {
     setCurrentUser(RESET);
     await logout();
-    window.location.replace(`${APP_ROUTE.AUTH.LOGIN}?logout=1`);
+    window.location.replace(APP_ROUTE.AUTH.LOGIN);
   };
 
   const handleForgotPassword = async (data: IForgotPassword) => {

apps/client/src/features/editor/atoms/editor-atoms.ts

@@ -1,6 +1,5 @@
 import { atom } from "jotai";
 import { Editor } from "@tiptap/core";
-import { PageEditMode } from "@/features/user/types/user.types.ts";
 
 export const pageEditorAtom = atom<Editor | null>(null);
 
@@ -13,7 +12,3 @@ export const yjsConnectionStatusAtom = atom<string>("");
 export const showAiMenuAtom = atom(false);
 
 export const showLinkMenuAtom = atom(false);
-
-// Current page's edit mode — initialized from the user's saved preference on
-// first load, can be toggled locally without persisting to the server.
-export const currentPageEditModeAtom = atom<PageEditMode>(PageEditMode.Edit);

apps/client/src/features/editor/components/bubble-menu/bubble-menu.module.css

@@ -28,18 +28,6 @@
   }
 }
 
-.colorSwatch:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 2px var(--mantine-color-blue-6);
-  position: relative;
-  z-index: 1;
-}
-
-.removeColor:focus-visible {
-  outline: none;
-  box-shadow: inset 0 0 0 2px var(--mantine-color-blue-6);
-}
-
 .buttonRoot {
   height: 34px;
   padding-left: rem(8);

apps/client/src/features/editor/components/bubble-menu/bubble-menu.tsx

@@ -27,7 +27,7 @@ import { isCellSelection, isTextSelected } from "@docmost/editor-ext";
 import { LinkSelector } from "@/features/editor/components/bubble-menu/link-selector.tsx";
 import { useTranslation } from "react-i18next";
 import { showAiMenuAtom, showLinkMenuAtom } from "@/features/editor/atoms/editor-atoms";
-import { userAtom, workspaceAtom } from "@/features/user/atoms/current-user-atom";
+import { workspaceAtom } from "@/features/user/atoms/current-user-atom";
 
 export interface BubbleMenuItem {
   name: string;
@@ -46,9 +46,6 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
   const [showCommentPopup, setShowCommentPopup] = useAtom(showCommentPopupAtom);
   const workspace = useAtomValue(workspaceAtom);
   const isGenerativeAiEnabled = workspace?.settings?.ai?.generative === true;
-  const user = useAtomValue(userAtom);
-  const editorToolbarEnabled =
-    user?.settings?.preferences?.editorToolbar ?? false;
   const [, setDraftCommentId] = useAtom(draftCommentIdAtom);
   const showCommentPopupRef = useRef(showCommentPopup);
   const showAiMenuRef = useRef(showAiMenu);
@@ -152,7 +149,7 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
       return isTextSelected(editor);
     },
     options: {
-      placement: editorToolbarEnabled ? "bottom" : "top",
+      placement: "top",
       offset: 8,
       onHide: () => {
         setIsNodeSelectorOpen(false);
@@ -191,8 +188,6 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
             <div className={classes.divider} />
           </>
         )}
-        {!editorToolbarEnabled && (
-          <>
         <NodeSelector
           editor={props.editor}
           isOpen={isNodeSelectorOpen}
@@ -243,8 +238,6 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
             setIsTextAlignmentOpen(false);
           }}
         />
-          </>
-        )}
 
         <Tooltip label={t(commentItem.name)} withArrow withinPortal={false}>
           <ActionIcon

apps/client/src/features/editor/components/bubble-menu/color-selector.tsx

@@ -4,6 +4,7 @@ import {
   Button,
   Popover,
   rem,
+  ScrollArea,
   Text,
   Tooltip,
   SimpleGrid,
@@ -113,63 +114,6 @@ const HIGHLIGHT_COLORS: BubbleColorMenuItem[] = [
   },
 ];
 
-const COLOR_GRID_COLS = 5;
-
-function focusSwatch(grid: "text" | "highlight", index: number) {
-  const el = document.querySelector<HTMLElement>(
-    `[data-color-grid="${grid}"][data-color-index="${index}"]`,
-  );
-  el?.focus();
-}
-
-function handleColorKeyNav(
-  e: React.KeyboardEvent<HTMLDivElement>,
-  index: number,
-  grid: "text" | "highlight",
-) {
-  const cols = COLOR_GRID_COLS;
-  const total =
-    grid === "text" ? TEXT_COLORS.length : HIGHLIGHT_COLORS.length;
-  const col = index % cols;
-
-  if (e.key === "ArrowRight") {
-    e.preventDefault();
-    if (index < total - 1) focusSwatch(grid, index + 1);
-    return;
-  }
-  if (e.key === "ArrowLeft") {
-    e.preventDefault();
-    if (index > 0) focusSwatch(grid, index - 1);
-    return;
-  }
-  if (e.key === "ArrowDown") {
-    e.preventDefault();
-    const next = index + cols;
-    if (next < total) {
-      focusSwatch(grid, next);
-    } else if (grid === "text") {
-      focusSwatch("highlight", Math.min(col, HIGHLIGHT_COLORS.length - 1));
-    } else if (grid === "highlight") {
-      document
-        .querySelector<HTMLElement>('[data-color-grid="remove"]')
-        ?.focus();
-    }
-    return;
-  }
-  if (e.key === "ArrowUp") {
-    e.preventDefault();
-    const prev = index - cols;
-    if (prev >= 0) {
-      focusSwatch(grid, prev);
-    } else if (grid === "highlight") {
-      const lastRowStart =
-        Math.floor((TEXT_COLORS.length - 1) / cols) * cols;
-      focusSwatch("text", Math.min(lastRowStart + col, TEXT_COLORS.length - 1));
-    }
-    return;
-  }
-}
-
 export const ColorSelector: FC<ColorSelectorProps> = ({
   editor,
   isOpen,
@@ -213,20 +157,13 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
   );
 
   return (
-    <Popover
+    <Popover width={220} opened={isOpen} withArrow>
-      width={220}
-      opened={isOpen}
-      onChange={setIsOpen}
-      trapFocus
-      withArrow
-    >
       <Popover.Target>
         <Tooltip label={t("Text color")} withArrow>
           <Button
             variant="default"
             radius="0"
             rightSection={<IconChevronDown size={16} />}
-            onMouseDown={(e) => e.preventDefault()}
             onClick={() => setIsOpen(!isOpen)}
             data-text-color={activeColorItem?.color || ""}
             data-highlight-color={activeHighlightItem?.color || ""}
@@ -244,8 +181,9 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
         </Tooltip>
       </Popover.Target>
 
-      <Popover.Dropdown onMouseDown={(e) => e.preventDefault()}>
+      <Popover.Dropdown>
-        <Stack gap="md" p="2px">
+        <ScrollArea.Autosize type="scroll" mah="400">
+          <Stack gap="md">
             <Box>
               <Text size="sm" fw={600} mb="xs">
                 {t("Text color")}
@@ -269,10 +207,6 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
                     <Box
                       role="button"
                       tabIndex={0}
-                      data-autofocus={index === 0 ? true : undefined}
-                      data-color-grid="text"
-                      data-color-index={index}
-                      className={classes.colorSwatch}
                       aria-label={t(name)}
                       aria-pressed={!!editorState[`text_${color}`]}
                       onClick={applyTextColor}
@@ -280,9 +214,7 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
                         if (e.key === "Enter" || e.key === " ") {
                           e.preventDefault();
                           applyTextColor();
-                          return;
                         }
-                        handleColorKeyNav(e, index, "text");
                       }}
                       style={{
                         width: rem(28),
@@ -335,9 +267,6 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
                     <Box
                       role="button"
                       tabIndex={0}
-                      data-color-grid="highlight"
-                      data-color-index={index}
-                      className={classes.colorSwatch}
                       aria-label={t(name)}
                       aria-pressed={!!editorState[`highlight_${color}`]}
                       onClick={applyHighlight}
@@ -345,9 +274,7 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
                         if (e.key === "Enter" || e.key === " ") {
                           e.preventDefault();
                           applyHighlight();
-                          return;
                         }
-                        handleColorKeyNav(e, index, "highlight");
                       }}
                       style={{
                         width: rem(28),
@@ -383,27 +310,16 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
             <Button
               variant="default"
               fullWidth
-              data-color-grid="remove"
-              className={classes.removeColor}
               onClick={() => {
                 editor.commands.unsetColor();
                 editor.commands.unsetHighlight();
                 setIsOpen(false);
               }}
-              onKeyDown={(e) => {
-                if (e.key === "ArrowUp") {
-                  e.preventDefault();
-                  const lastRowStart =
-                    Math.floor(
-                      (HIGHLIGHT_COLORS.length - 1) / COLOR_GRID_COLS,
-                    ) * COLOR_GRID_COLS;
-                  focusSwatch("highlight", lastRowStart);
-                }
-              }}
             >
               {t("Remove color")}
             </Button>
           </Stack>
+        </ScrollArea.Autosize>
       </Popover.Dropdown>
     </Popover>
   );

apps/client/src/features/editor/components/bubble-menu/node-selector.tsx

@@ -155,7 +155,7 @@ export const NodeSelector: FC<NodeSelectorProps> = ({
   };
 
   return (
-    <Popover opened={isOpen} onChange={setIsOpen} withArrow>
+    <Popover opened={isOpen} withArrow>
       <Popover.Target>
         <Tooltip
           label={t("Turn into")}

apps/client/src/features/editor/components/bubble-menu/text-alignment-selector.tsx

@@ -7,7 +7,7 @@ import {
   IconCheck,
   IconChevronDown,
 } from "@tabler/icons-react";
-import { Menu, Button, Tooltip, rem } from "@mantine/core";
+import { Popover, Button, ScrollArea, Tooltip, rem } from "@mantine/core";
 import type { Editor } from "@tiptap/react";
 import { useEditorState } from "@tiptap/react";
 import { useTranslation } from "react-i18next";
@@ -82,22 +82,15 @@ export const TextAlignmentSelector: FC<TextAlignmentProps> = ({
   const activeItem = items.filter((item) => item.isActive()).pop() ?? items[0];
 
   return (
-    <Menu
+    <Popover opened={isOpen} withArrow>
-      shadow="md"
+      <Popover.Target>
-      position="bottom-start"
+        <Tooltip label={t("Text align")} withArrow withinPortal={false} disabled={isOpen}>
-      withArrow={false}
-      opened={isOpen}
-      onChange={setIsOpen}
-    >
-      <Menu.Target>
-        <Tooltip label={t("Text align")} withArrow disabled={isOpen}>
           <Button
             variant="default"
             style={{ border: "none", height: "34px" }}
             px="5"
             radius="0"
             rightSection={<IconChevronDown size={16} />}
-            onMouseDown={(e) => e.preventDefault()}
             onClick={() => setIsOpen(!isOpen)}
             aria-label={t("Text align")}
             aria-haspopup="menu"
@@ -106,25 +99,33 @@ export const TextAlignmentSelector: FC<TextAlignmentProps> = ({
             <activeItem.icon style={{ width: rem(16) }} stroke={2} />
           </Button>
         </Tooltip>
-      </Menu.Target>
+      </Popover.Target>
 
-      <Menu.Dropdown>
+      <Popover.Dropdown>
+        <ScrollArea.Autosize type="scroll" mah={400}>
+          <Button.Group orientation="vertical">
             {items.map((item, index) => (
-          <Menu.Item
+              <Button
                 key={index}
+                variant="default"
                 leftSection={<item.icon size={16} />}
                 rightSection={
-              activeItem.name === item.name ? <IconCheck size={16} /> : null
+                  activeItem.name === item.name && <IconCheck size={16} />
                 }
+                justify="left"
+                fullWidth
                 onClick={() => {
                   item.command();
                   setIsOpen(false);
                 }}
+                style={{ border: "none" }}
               >
                 {t(item.name)}
-          </Menu.Item>
+              </Button>
             ))}
-      </Menu.Dropdown>
+          </Button.Group>
-    </Menu>
+        </ScrollArea.Autosize>
+      </Popover.Dropdown>
+    </Popover>
   );
 };

apps/client/src/features/editor/components/emoji-menu/emoji-items.ts

@@ -1,26 +1,30 @@
 import { CommandProps, EmojiMenuItemType } from "./types";
-import { buildEmojiIndex, getFrequentlyUsedEmoji, sortFrequentlyUsedEmoji } from "./utils";
+import { SearchIndex } from "emoji-mart";
+import { getFrequentlyUsedEmoji, sortFrequentlyUsedEmoji } from "./utils";
 
-const MAX_RESULTS = 5;
+const searchEmoji = async (value: string): Promise<EmojiMenuItemType[]> => {
-
+  if (value === "") {
-const searchEmoji = async (query: string): Promise<EmojiMenuItemType[]> => {
+    const frequentlyUsedEmoji = getFrequentlyUsedEmoji();
-  if (query === "") {
+    return sortFrequentlyUsedEmoji(frequentlyUsedEmoji);
-    return sortFrequentlyUsedEmoji(getFrequentlyUsedEmoji());
   }
 
-  const q = query.toLowerCase();
+  const emojis = await SearchIndex.search(value);
-  const index = await buildEmojiIndex();
+  const results = emojis.map((emoji: any) => {
-
+    return {
-  return index
+      id: emoji.id,
-    .filter((e) => e.name.includes(q) || e.id.includes(q))
+      emoji: emoji.skins[0].native,
-    .slice(0, MAX_RESULTS)
-    .map((entry) => ({
-      id: entry.id,
-      emoji: entry.native,
       command: ({ editor, range }: CommandProps) => {
-        editor.chain().focus().deleteRange(range).insertContent(entry.native + " ").run();
+        editor
+          .chain()
+          .focus()
+          .deleteRange(range)
+          .insertContent(emoji.skins[0].native + " ")
+          .run();
       },
-    }));
+    };
+  });
+
+  return results;
 };
 
 export const getEmojiItems = async ({

apps/client/src/features/editor/components/emoji-menu/emoji-list.tsx

@@ -1,208 +1,154 @@
-import { Loader, Paper, ScrollArea, Text, UnstyledButton } from "@mantine/core";
-import clsx from "clsx";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { EmojiMenuItemType } from "./types";
 import {
-  EmojiCategory,
+  ActionIcon,
-  EmojiIndexEntry,
+  Loader,
-  getEmojiCategories,
+  Paper,
-  incrementEmojiUsage,
+  ScrollArea,
-} from "./utils";
+  SimpleGrid,
+  Text,
+} from "@mantine/core";
+import { EmojiMenuItemType } from "./types";
+import clsx from "clsx";
 import classes from "./emoji-menu.module.css";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { GRID_COLUMNS, incrementEmojiUsage } from "./utils";
 
-const COLS = 8;
+const EmojiList = ({
-
-const CAT_ICONS: Record<string, string> = {
-  people:   "😀",
-  nature:   "🌿",
-  foods:    "🍕",
-  activity: "🎮",
-  places:   "🗺️",
-  objects:  "🔧",
-  symbols:  "💯",
-  flags:    "🚩",
-};
-
-function EmojiList({
   items,
   isLoading,
   command,
   editor,
   range,
-  query = "",
 }: {
   items: EmojiMenuItemType[];
   isLoading: boolean;
-  command: (item: EmojiMenuItemType) => void;
+  command: any;
   editor: any;
   range: any;
-  query?: string;
+}) => {
-}) {
+  const [selectedIndex, setSelectedIndex] = useState(0);
-  const { t } = useTranslation();
+  const viewportRef = useRef<HTMLDivElement>(null);
-  const [idx, setIdx] = useState(0);
-  const [cats, setCats] = useState<EmojiCategory[]>([]);
-  const [activeCat, setActiveCat] = useState("");
-  const [focusZone, setFocusZone] = useState<"grid" | "tabs">("grid");
-  const listViewport = useRef<HTMLDivElement>(null);
-  const gridViewport = useRef<HTMLDivElement>(null);
-  const catBar = useRef<HTMLDivElement>(null);
 
-  const searching = query.length > 0;
+  const selectItem = useCallback(
-  const browseLoading = !searching && cats.length === 0;
+    (index: number) => {
-  const gridItems = cats.find((c) => c.id === activeCat)?.emojis ?? [];
+      const item = items[index];
-
+      if (item) {
-  useEffect(() => {
-    getEmojiCategories().then((data) => {
-      setCats(data);
-      setActiveCat((prev) => prev || data[0]?.id || "");
-    });
-  }, []);
-
-  useEffect(() => { setIdx(0); }, [query, activeCat]);
-
-  useEffect(() => { if (searching) setFocusZone("grid"); }, [searching]);
-
-  useEffect(() => {
-    if (focusZone !== "tabs") return;
-    catBar.current?.querySelector<HTMLElement>(`[data-cat="${activeCat}"]`)?.scrollIntoView({ block: "nearest", inline: "nearest" });
-  }, [activeCat, focusZone]);
-
-  useEffect(() => {
-    if (focusZone === "tabs") return;
-    const vp = searching ? listViewport.current : gridViewport.current;
-    vp?.querySelector<HTMLElement>(`[data-i="${idx}"]`)?.scrollIntoView({ block: "nearest" });
-  }, [idx, searching, focusZone]);
-
-  const pickSearchItem = useCallback(
-    (i: number) => {
-      const item = items[i];
-      if (!item) return;
         command(item);
         incrementEmojiUsage(item.id);
+      }
     },
-    [command, items],
+    [command, items]
-  );
-
-  const pickGridItem = useCallback(
-    (entry: EmojiIndexEntry) => {
-      editor.chain().focus().deleteRange(range).insertContent(entry.native + " ").run();
-      incrementEmojiUsage(entry.id);
-    },
-    [editor, range],
   );
 
   useEffect(() => {
-    function onKey(e: KeyboardEvent) {
+    const navigationKeys = [
-      if (searching) {
+      "ArrowRight",
-        if      (e.key === "ArrowDown") { e.preventDefault(); setIdx((i) => Math.min(i + 1, items.length - 1)); }
+      "ArrowLeft",
-        else if (e.key === "ArrowUp")   { e.preventDefault(); setIdx((i) => Math.max(i - 1, 0)); }
+      "ArrowUp",
-        else if (e.key === "Enter")     { e.preventDefault(); pickSearchItem(idx); }
+      "ArrowDown",
-      } else if (focusZone === "tabs") {
+      "Enter",
-        const catIdx = cats.findIndex((c) => c.id === activeCat);
+    ];
-        if      (e.key === "ArrowRight") { e.preventDefault(); const next = cats[Math.min(catIdx + 1, cats.length - 1)]; if (next) setActiveCat(next.id); }
+    const onKeyDown = (e: KeyboardEvent) => {
-        else if (e.key === "ArrowLeft")  { e.preventDefault(); const prev = cats[Math.max(catIdx - 1, 0)]; if (prev) setActiveCat(prev.id); }
+      if (navigationKeys.includes(e.key)) {
-        else if (e.key === "ArrowDown" || e.key === "Enter") { e.preventDefault(); setFocusZone("grid"); }
-        else if (e.key === "ArrowUp")    { e.preventDefault(); }
-      } else {
-        const total = gridItems.length;
-        if      (e.key === "ArrowRight") { e.preventDefault(); setIdx((i) => Math.min(i + 1, total - 1)); }
-        else if (e.key === "ArrowLeft")  { e.preventDefault(); setIdx((i) => Math.max(i - 1, 0)); }
-        else if (e.key === "ArrowDown")  { e.preventDefault(); setIdx((i) => Math.min(i + COLS, total - 1)); }
-        else if (e.key === "ArrowUp")    {
         e.preventDefault();
-          if (idx < COLS) setFocusZone("tabs");
-          else            setIdx((i) => Math.max(i - COLS, 0));
-        }
-        else if (e.key === "Enter")      { e.preventDefault(); if (gridItems[idx]) pickGridItem(gridItems[idx]); }
-      }
-    }
-    document.addEventListener("keydown", onKey);
-    return () => document.removeEventListener("keydown", onKey);
-  }, [searching, items, idx, gridItems, pickSearchItem, pickGridItem, focusZone, cats, activeCat]);
 
-  return (
+        if (e.key === "ArrowRight") {
+          setSelectedIndex(
+            selectedIndex + 1 < items.length ? selectedIndex + 1 : selectedIndex
+          );
+          return true;
+        }
+
+        if (e.key === "ArrowLeft") {
+          setSelectedIndex(
+            selectedIndex - 1 >= 0 ? selectedIndex - 1 : selectedIndex
+          );
+          return true;
+        }
+
+        if (e.key === "ArrowUp") {
+          setSelectedIndex(
+            selectedIndex - GRID_COLUMNS >= 0
+              ? selectedIndex - GRID_COLUMNS
+              : selectedIndex
+          );
+          return true;
+        }
+
+        if (e.key === "ArrowDown") {
+          setSelectedIndex(
+            selectedIndex + GRID_COLUMNS < items.length
+              ? selectedIndex + GRID_COLUMNS
+              : selectedIndex
+          );
+          return true;
+        }
+
+        if (e.key === "Enter") {
+          selectItem(selectedIndex);
+          return true;
+        }
+        return false;
+      }
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [items, selectedIndex, setSelectedIndex]);
+
+  useEffect(() => {
+    setSelectedIndex(0);
+  }, [items]);
+
+  useEffect(() => {
+    viewportRef.current
+      ?.querySelector(`[data-item-index="${selectedIndex}"]`)
+      ?.scrollIntoView({ block: "nearest" });
+  }, [selectedIndex]);
+
+  return items.length > 0 || isLoading ? (
     <Paper
       id="emoji-command"
-      p={0}
+      p="0"
       shadow="md"
       withBorder
-      style={{ width: 280 }}
       role="listbox"
-      aria-label={t("Emoji picker")}
+      aria-label="Emoji results"
+      aria-activedescendant={
+        items.length > 0 ? `emoji-command-option-${selectedIndex}` : undefined
+      }
     >
-      {searching ? (
+      {isLoading && <Loader m="xs" color="blue" type="dots" />}
-        <>
+      {items.length > 0 && (
-          {isLoading && <Loader m="xs" size="xs" color="blue" type="dots" />}
+        <ScrollArea.Autosize
-          <ScrollArea.Autosize mah={260} scrollbarSize={6} viewportRef={listViewport}>
+          viewportRef={viewportRef}
-            <div style={{ padding: 4 }}>
+          mah={250}
-              {items.length === 0 && !isLoading ? (
+          scrollbarSize={8}
-                <Text size="sm" c="dimmed" p="xs">{t("No results")}</Text>
+          pr="5"
-              ) : items.map((item, i) => (
+        >
-                <UnstyledButton
+          <SimpleGrid cols={GRID_COLUMNS} p="xs" spacing="xs">
-                  key={item.id}
+            {items.map((item, index: number) => (
-                  data-i={i}
+              <ActionIcon
-                  w="100%"
+                data-item-index={index}
-                  className={clsx(classes.row, { [classes.active]: i === idx })}
+                id={`emoji-command-option-${index}`}
-                  onClick={() => pickSearchItem(i)}
-                  onMouseEnter={() => setIdx(i)}
                 role="option"
-                  aria-selected={i === idx}
+                aria-selected={index === selectedIndex}
-                >
+                aria-label={item.id}
-                  <span style={{ fontSize: 20, lineHeight: 1, minWidth: 26 }}>{item.emoji}</span>
+                variant="transparent"
-                  <Text size="sm" c="dimmed" ff="monospace" span>:{item.id}:</Text>
+                key={item.id}
-                </UnstyledButton>
+                className={clsx(classes.menuBtn, {
-              ))}
+                  [classes.selectedItem]: index === selectedIndex,
-            </div>
-          </ScrollArea.Autosize>
-        </>
-      ) : browseLoading ? (
-        <Loader m="xs" size="xs" color="blue" type="dots" />
-      ) : (
-        <>
-          <div className={classes.catBar} role="tablist" ref={catBar}>
-            {cats.map((c) => {
-              const isActive = c.id === activeCat;
-              const isFocused = isActive && focusZone === "tabs";
-              return (
-                <button
-                  key={c.id}
-                  data-cat={c.id}
-                  title={c.id}
-                  role="tab"
-                  aria-selected={isActive}
-                  className={clsx(classes.catTab, {
-                    [classes.catTabActive]: isActive,
-                    [classes.catTabFocused]: isFocused,
                 })}
-                  onClick={() => { setActiveCat(c.id); setFocusZone("grid"); }}
+                onClick={() => selectItem(index)}
-                  onMouseEnter={() => setFocusZone("grid")}
               >
-                  {CAT_ICONS[c.id] ?? "🔣"}
+                <Text size="xl">{item.emoji}</Text>
-                </button>
+              </ActionIcon>
-              );
-            })}
-          </div>
-          <ScrollArea.Autosize mah={220} scrollbarSize={6} viewportRef={gridViewport}>
-            <div className={classes.grid} style={{ gridTemplateColumns: `repeat(${COLS}, 1fr)` }}>
-              {gridItems.map((entry, i) => (
-                <button
-                  key={entry.id}
-                  data-i={i}
-                  title={`:${entry.id}:`}
-                  className={clsx(classes.emojiBtn, { [classes.active]: i === idx })}
-                  onClick={() => pickGridItem(entry)}
-                  onMouseEnter={() => setIdx(i)}
-                >
-                  {entry.native}
-                </button>
             ))}
-            </div>
+          </SimpleGrid>
         </ScrollArea.Autosize>
-        </>
       )}
     </Paper>
-  );
+  ) : null;
-}
+};
 
 export default EmojiList;

apps/client/src/features/editor/components/emoji-menu/emoji-menu.module.css

@@ -1,13 +1,9 @@
-.row {
+.menuBtn {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 6px 10px;
   border-radius: var(--mantine-radius-sm);
 
   &:hover {
     @mixin light {
-      background: var(--mantine-color-gray-1);
+      background: var(--mantine-color-gray-2);
     }
 
     @mixin dark {
@@ -16,7 +12,7 @@
   }
 }
 
-.active {
+.selectedItem {
   @mixin light {
     background: var(--mantine-color-gray-2);
   }
@@ -25,83 +21,3 @@
     background: var(--mantine-color-gray-light);
   }
 }
-
-.catBar {
-  display: flex;
-  gap: 2px;
-  padding: 4px 6px;
-  overflow-x: auto;
-  scrollbar-width: none;
-
-  @mixin light {
-    border-bottom: 1px solid var(--mantine-color-gray-2);
-  }
-
-  @mixin dark {
-    border-bottom: 1px solid var(--mantine-color-dark-4);
-  }
-}
-
-.catTab {
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  font-size: 16px;
-  line-height: 1;
-  padding: 4px 5px;
-  border-radius: var(--mantine-radius-sm);
-  flex-shrink: 0;
-
-  &:hover {
-    @mixin light {
-      background: var(--mantine-color-gray-1);
-    }
-
-    @mixin dark {
-      background: var(--mantine-color-gray-light);
-    }
-  }
-}
-
-.catTabActive {
-  @mixin light {
-    background: var(--mantine-color-gray-2);
-  }
-
-  @mixin dark {
-    background: var(--mantine-color-gray-light);
-  }
-}
-
-.catTabFocused {
-  outline: 1px solid var(--mantine-color-blue-filled);
-  outline-offset: -1px;
-}
-
-.grid {
-  display: grid;
-  gap: 1px;
-  padding: 6px;
-}
-
-.emojiBtn {
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  font-size: 20px;
-  line-height: 1;
-  padding: 3px;
-  border-radius: var(--mantine-radius-sm);
-  aspect-ratio: 1 / 1;
-
-  &:hover {
-    @mixin light {
-      background: var(--mantine-color-gray-1);
-    }
-
-    @mixin dark {
-      background: var(--mantine-color-gray-light);
-    }
-  }
-}
-

apps/client/src/features/editor/components/emoji-menu/render-emoji-items.ts

@@ -1,5 +1,6 @@
 import { ReactRenderer, useEditor } from "@tiptap/react";
 import EmojiList from "./emoji-list";
+import { init } from "emoji-mart";
 import {
   autoUpdate,
   computePosition,
@@ -36,6 +37,10 @@ const renderEmojiItems = () => {
       editor: ReturnType<typeof useEditor>;
       clientRect: () => DOMRect;
     }) => {
+      init({
+        data: async () => (await import("@emoji-mart/data")).default,
+      });
+
       component = new ReactRenderer(EmojiList, {
         props: { isLoading: true, items: [] },
         editor: props.editor,

apps/client/src/features/editor/components/emoji-menu/utils.ts

@@ -1,4 +1,8 @@
-import { CommandProps, EmojiMartFrequentlyType, EmojiMenuItemType } from "./types";
+import { CommandProps } from "./types";
+import { getEmojiDataFromNative } from "emoji-mart";
+import { EmojiMartFrequentlyType, EmojiMenuItemType } from "./types";
+
+export const GRID_COLUMNS = 10;
 
 export const LOCAL_STORAGE_FREQUENT_KEY = "emoji-mart.frequently";
 
@@ -15,76 +19,41 @@ export const DEFAULT_FREQUENTLY_USED_EMOJI_MART = `{
     "rocket": 1
 }`;
 
-export type EmojiIndexEntry = { id: string; name: string; native: string };
-
-let _emojiIndex: EmojiIndexEntry[] | null = null;
-
-export const buildEmojiIndex = async (): Promise<EmojiIndexEntry[]> => {
-  if (_emojiIndex) return _emojiIndex;
-  const { default: data } = await import('@slidoapp/emoji-mart-data');
-  _emojiIndex = (Object.values((data as any).emojis) as any[])
-    .filter((e) => e.id && e.name && e.skins?.[0]?.native)
-    .map((e) => ({
-      id: e.id as string,
-      name: (e.name as string).toLowerCase(),
-      native: e.skins[0].native as string,
-    }));
-  return _emojiIndex;
-};
-
 export const incrementEmojiUsage = (emojiId: string) => {
-  const stored = JSON.parse(
+  const frequentlyUsedEmoji =
-    localStorage.getItem(LOCAL_STORAGE_FREQUENT_KEY) || DEFAULT_FREQUENTLY_USED_EMOJI_MART,
+    JSON.parse(localStorage.getItem(LOCAL_STORAGE_FREQUENT_KEY) || DEFAULT_FREQUENTLY_USED_EMOJI_MART);
+  frequentlyUsedEmoji[emojiId]
+    ? (frequentlyUsedEmoji[emojiId] += 1)
+    : (frequentlyUsedEmoji[emojiId] = 1);
+  localStorage.setItem(
+    LOCAL_STORAGE_FREQUENT_KEY,
+    JSON.stringify(frequentlyUsedEmoji)
   );
-  stored[emojiId] = (stored[emojiId] ?? 0) + 1;
-  localStorage.setItem(LOCAL_STORAGE_FREQUENT_KEY, JSON.stringify(stored));
 };
 
 export const sortFrequentlyUsedEmoji = async (
-  frequentlyUsedEmoji: EmojiMartFrequentlyType,
+  frequentlyUsedEmoji: EmojiMartFrequentlyType
 ): Promise<EmojiMenuItemType[]> => {
-  const index = await buildEmojiIndex();
+  const data = await Promise.all(
-  const results: EmojiMenuItemType[] = Object.entries(frequentlyUsedEmoji)
+    Object.entries(frequentlyUsedEmoji).map(
-    .map(([id, count]): EmojiMenuItemType | null => {
+      async ([id, count]): Promise<EmojiMenuItemType> => ({
-      const entry = index.find((e) => e.id === id);
-      if (!entry) return null;
-      return {
         id,
         count,
-        emoji: entry.native,
+        emoji: (await getEmojiDataFromNative(id))?.native,
-        command: ({ editor, range }: CommandProps) => {
+        command: async ({ editor, range }: CommandProps) => {
-          editor.chain().focus().deleteRange(range).insertContent(entry.native + " ").run();
+          editor
+            .chain()
+            .focus()
+            .deleteRange(range)
+            .insertContent((await getEmojiDataFromNative(id))?.native + " ")
+            .run();
         },
-      };
       })
-    .filter((e): e is EmojiMenuItemType => e !== null);
+    )
-  return results.sort((a, b) => (b.count ?? 0) - (a.count ?? 0)).slice(0, 5);
-};
-
-export const getFrequentlyUsedEmoji = (): EmojiMartFrequentlyType => {
-  return JSON.parse(
-    localStorage.getItem(LOCAL_STORAGE_FREQUENT_KEY) || DEFAULT_FREQUENTLY_USED_EMOJI_MART,
   );
+  return data.sort((a, b) => b.count - a.count);
 };
 
-export type EmojiCategory = { id: string; emojis: EmojiIndexEntry[] };
+export const getFrequentlyUsedEmoji = () => {
-
+  return JSON.parse(localStorage.getItem(LOCAL_STORAGE_FREQUENT_KEY) || DEFAULT_FREQUENTLY_USED_EMOJI_MART);
-let _cats: EmojiCategory[] | null = null;
+}
-
-export const getEmojiCategories = async (): Promise<EmojiCategory[]> => {
-  if (_cats) return _cats;
-  const [{ default: data }, index] = await Promise.all([
-    import("@slidoapp/emoji-mart-data"),
-    buildEmojiIndex(),
-  ]);
-  const byId = new Map(index.map((e) => [e.id, e]));
-  _cats = ((data as any).categories as { id: string; emojis: string[] }[])
-    .map((cat) => ({
-      id: cat.id,
-      emojis: cat.emojis
-        .map((id) => byId.get(id))
-        .filter((e): e is EmojiIndexEntry => !!e),
-    }))
-    .filter((c) => c.emojis.length > 0);
-  return _cats;
-};

apps/client/src/features/editor/components/fixed-toolbar/fixed-toolbar.module.css

@@ -1,72 +0,0 @@
-.fixedToolbar {
-  position: fixed;
-  top: calc(var(--app-shell-header-offset, 0rem) + 45px);
-  inset-inline-start: var(--app-shell-navbar-offset, 0rem);
-  inset-inline-end: var(--app-shell-aside-offset, 0rem);
-  z-index: 99;
-  display: flex;
-  align-items: center;
-  background: var(--mantine-color-body);
-  border-bottom: 1px solid
-    light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4));
-  overflow-x: auto;
-}
-
-.fixedToolbar::-webkit-scrollbar {
-  height: 2px;
-}
-
-.fixedToolbar::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.fixedToolbar::-webkit-scrollbar-thumb {
-  background: light-dark(
-    var(--mantine-color-gray-4),
-    var(--mantine-color-dark-3)
-  );
-  border-radius: 1px;
-}
-
-.inner {
-  display: flex;
-  align-items: center;
-  flex-wrap: nowrap;
-  gap: 4px;
-  padding: 4px 8px;
-  margin-inline: auto;
-}
-
-.inner > * {
-  flex-shrink: 0;
-}
-
-.spacer {
-  height: 45px;
-}
-
-.divider {
-  flex-shrink: 0;
-  width: 1px;
-  height: 20px;
-  margin: 0 4px;
-  background: light-dark(
-    var(--mantine-color-gray-3),
-    var(--mantine-color-dark-4)
-  );
-}
-
-.active,
-.active:hover {
-  color: var(--mantine-color-blue-6);
-  background-color: light-dark(
-    var(--mantine-color-gray-1),
-    var(--mantine-color-dark-5)
-  );
-}
-
-@media print {
-  .fixedToolbar {
-    display: none;
-  }
-}

apps/client/src/features/editor/components/fixed-toolbar/fixed-toolbar.tsx

@@ -1,66 +0,0 @@
-import { FC } from "react";
-import { useAtomValue } from "jotai";
-import { pageEditorAtom } from "@/features/editor/atoms/editor-atoms";
-import { useToolbarState } from "./use-toolbar-state";
-import { BlockTypeGroup } from "./groups/block-type-group";
-import { InlineMarksGroup } from "./groups/inline-marks-group";
-import { ColorGroup } from "./groups/color-group";
-import { ListsGroup } from "./groups/lists-group";
-import { LinkGroup } from "./groups/link-group";
-import { AlignmentGroup } from "./groups/alignment-group";
-import { MediaGroup } from "./groups/media-group";
-import { QuickInsertsGroup } from "./groups/quick-inserts-group";
-import { MoreInsertsGroup } from "./groups/more-inserts-group";
-import { HistoryGroup } from "./groups/history-group";
-import { AskAiGroup } from "./groups/ask-ai-group";
-import { workspaceAtom } from "@/features/user/atoms/current-user-atom";
-import classes from "./fixed-toolbar.module.css";
-
-export const FixedToolbar: FC = () => {
-  const editor = useAtomValue(pageEditorAtom);
-  const state = useToolbarState(editor);
-  const workspace = useAtomValue(workspaceAtom);
-  const isGenerativeAiEnabled = workspace?.settings?.ai?.generative === true;
-
-  if (!editor || !state) return null;
-
-  return (
-    <>
-      <div
-        className={classes.fixedToolbar}
-        data-fixed-toolbar="true"
-        role="toolbar"
-        aria-label="Editor toolbar"
-        onMouseDown={(e) => e.preventDefault()}
-      >
-        <div className={classes.inner}>
-          {/* {isGenerativeAiEnabled && (
-            <>
-              <AskAiGroup />
-              <div className={classes.divider} />
-            </>
-          )} */}
-          <BlockTypeGroup editor={editor} />
-          <div className={classes.divider} />
-          <InlineMarksGroup editor={editor} state={state} />
-          <div className={classes.divider} />
-          <ColorGroup editor={editor} />
-          <div className={classes.divider} />
-          <ListsGroup editor={editor} state={state} />
-          <div className={classes.divider} />
-          <LinkGroup />
-          <div className={classes.divider} />
-          <AlignmentGroup editor={editor} />
-          <div className={classes.divider} />
-          <MediaGroup editor={editor} />
-          <div className={classes.divider} />
-          <QuickInsertsGroup editor={editor} />
-          <MoreInsertsGroup editor={editor} />
-          <div className={classes.divider} />
-          <HistoryGroup editor={editor} state={state} />
-        </div>
-      </div>
-      <div className={classes.spacer} aria-hidden />
-    </>
-  );
-};

apps/client/src/features/editor/components/fixed-toolbar/groups/alignment-group.tsx

@@ -1,28 +0,0 @@
-import { FC, useEffect, useState } from "react";
-import type { Editor } from "@tiptap/react";
-import { TextAlignmentSelector } from "@/features/editor/components/bubble-menu/text-alignment-selector";
-
-interface Props {
-  editor: Editor;
-}
-
-export const AlignmentGroup: FC<Props> = ({ editor }) => {
-  const [isOpen, setIsOpen] = useState(false);
-
-  useEffect(() => {
-    if (!isOpen) return;
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === "Escape") setIsOpen(false);
-    };
-    document.addEventListener("keydown", handleKeyDown);
-    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [isOpen]);
-
-  return (
-    <TextAlignmentSelector
-      editor={editor}
-      isOpen={isOpen}
-      setIsOpen={setIsOpen}
-    />
-  );
-};

apps/client/src/features/editor/components/fixed-toolbar/groups/ask-ai-group.tsx

@@ -1,23 +0,0 @@
-import { FC } from "react";
-import { Button } from "@mantine/core";
-import { IconSparkles } from "@tabler/icons-react";
-import { useSetAtom } from "jotai";
-import { useTranslation } from "react-i18next";
-import { showAiMenuAtom } from "@/features/editor/atoms/editor-atoms";
-
-export const AskAiGroup: FC = () => {
-  const { t } = useTranslation();
-  const setShowAiMenu = useSetAtom(showAiMenuAtom);
-
-  return (
-    <Button
-      variant="subtle"
-      color="dark"
-      size="xs"
-      leftSection={<IconSparkles size={14} />}
-      onClick={() => setShowAiMenu(true)}
-    >
-      {t("Ask AI")}
-    </Button>
-  );
-};

apps/client/src/features/editor/components/fixed-toolbar/groups/block-type-group.tsx

@@ -1,115 +0,0 @@
-import { FC } from "react";
-import type { Editor } from "@tiptap/react";
-import { useEditorState } from "@tiptap/react";
-import { Button, Menu } from "@mantine/core";
-import {
-  IconBlockquote,
-  IconBraces,
-  IconChevronDown,
-  IconH1,
-  IconH2,
-  IconH3,
-  IconMenu4,
-  IconPageBreak,
-  IconTypography,
-} from "@tabler/icons-react";
-import { useTranslation } from "react-i18next";
-
-interface Props {
-  editor: Editor;
-}
-
-export const BlockTypeGroup: FC<Props> = ({ editor }) => {
-  const { t } = useTranslation();
-
-  const state = useEditorState({
-    editor,
-    selector: (ctx) => ({
-      isHeading1: ctx.editor.isActive("heading", { level: 1 }),
-      isHeading2: ctx.editor.isActive("heading", { level: 2 }),
-      isHeading3: ctx.editor.isActive("heading", { level: 3 }),
-      isBlockquote: ctx.editor.isActive("blockquote"),
-      isCodeBlock: ctx.editor.isActive("codeBlock"),
-    }),
-  });
-
-  let label = t("Normal text");
-  if (state.isHeading1) label = t("Heading 1");
-  else if (state.isHeading2) label = t("Heading 2");
-  else if (state.isHeading3) label = t("Heading 3");
-  else if (state.isBlockquote) label = t("Quote");
-  else if (state.isCodeBlock) label = t("Code block");
-
-  return (
-    <Menu shadow="md" position="bottom-start" withArrow={false}>
-      <Menu.Target>
-        <Button
-          variant="subtle"
-          color="dark"
-          size="xs"
-          rightSection={<IconChevronDown size={14} />}
-        >
-          {label}
-        </Button>
-      </Menu.Target>
-      <Menu.Dropdown>
-        <Menu.Item
-          leftSection={<IconTypography size={16} />}
-          onClick={() =>
-            editor.chain().focus().toggleNode("paragraph", "paragraph").run()
-          }
-        >
-          {t("Text")}
-        </Menu.Item>
-        <Menu.Item
-          leftSection={<IconH1 size={16} />}
-          onClick={() =>
-            editor.chain().focus().toggleHeading({ level: 1 }).run()
-          }
-        >
-          {t("Heading 1")}
-        </Menu.Item>
-        <Menu.Item
-          leftSection={<IconH2 size={16} />}
-          onClick={() =>
-            editor.chain().focus().toggleHeading({ level: 2 }).run()
-          }
-        >
-          {t("Heading 2")}
-        </Menu.Item>
-        <Menu.Item
-          leftSection={<IconH3 size={16} />}
-          onClick={() =>
-            editor.chain().focus().toggleHeading({ level: 3 }).run()
-          }
-        >
-          {t("Heading 3")}
-        </Menu.Item>
-        <Menu.Item
-          leftSection={<IconBlockquote size={16} />}
-          onClick={() => editor.chain().focus().toggleBlockquote().run()}
-        >
-          {t("Quote")}
-        </Menu.Item>
-        <Menu.Item
-          leftSection={<IconBraces size={16} />}
-          onClick={() => editor.chain().focus().toggleCodeBlock().run()}
-        >
-          {t("Code block")}
-        </Menu.Item>
-        <Menu.Item
-          leftSection={<IconMenu4 size={16} />}
-          onClick={() => editor.chain().focus().setHorizontalRule().run()}
-        >
-          {t("Divider")}
-        </Menu.Item>
-        <Menu.Item
-          leftSection={<IconPageBreak size={16} />}
-          onClick={() => editor.chain().focus().setPageBreak().run()}
-        >
-          {t("Page break")}
-        </Menu.Item>
-      </Menu.Dropdown>
-    </Menu>
-  );
-};

apps/client/src/features/editor/components/fixed-toolbar/groups/color-group.tsx

@@ -1,24 +0,0 @@
-import { FC, useEffect, useState } from "react";
-import type { Editor } from "@tiptap/react";
-import { ColorSelector } from "@/features/editor/components/bubble-menu/color-selector";
-
-interface Props {
-  editor: Editor;
-}
-
-export const ColorGroup: FC<Props> = ({ editor }) => {
-  const [isOpen, setIsOpen] = useState(false);
-
-  useEffect(() => {
-    if (!isOpen) return;
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === "Escape") setIsOpen(false);
-    };
-    document.addEventListener("keydown", handleKeyDown);
-    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [isOpen]);
-
-  return (
-    <ColorSelector editor={editor} isOpen={isOpen} setIsOpen={setIsOpen} />
-  );
-};

apps/client/src/features/editor/components/fixed-toolbar/groups/history-group.tsx

@@ -1,44 +0,0 @@
-import { FC } from "react";
-import type { Editor } from "@tiptap/react";
-import { ActionIcon, Tooltip } from "@mantine/core";
-import { IconArrowBackUp, IconArrowForwardUp } from "@tabler/icons-react";
-import { useTranslation } from "react-i18next";
-import type { ToolbarState } from "../use-toolbar-state";
-
-interface Props {
-  editor: Editor;
-  state: ToolbarState;
-}
-
-export const HistoryGroup: FC<Props> = ({ editor, state }) => {
-  const { t } = useTranslation();
-
-  return (
-    <ActionIcon.Group>
-      <Tooltip label={t("Undo")} withArrow>
-        <ActionIcon
-          variant="subtle"
-          color="dark"
-          size="md"
-          aria-label={t("Undo")}
-          disabled={!state.canUndo}
-          onClick={() => editor.chain().focus().undo().run()}
-        >
-          <IconArrowBackUp size={16} />
-        </ActionIcon>
-      </Tooltip>
-      <Tooltip label={t("Redo")} withArrow>
-        <ActionIcon
-          variant="subtle"
-          color="dark"
-          size="md"
-          aria-label={t("Redo")}
-          disabled={!state.canRedo}
-          onClick={() => editor.chain().focus().redo().run()}
-        >
-          <IconArrowForwardUp size={16} />
-        </ActionIcon>
-      </Tooltip>
-    </ActionIcon.Group>
-  );
-};

apps/client/src/features/editor/components/fixed-toolbar/groups/inline-marks-group.tsx

@@ -1,131 +0,0 @@
-import { FC } from "react";
-import type { Editor } from "@tiptap/react";
-import { ActionIcon, Menu, Tooltip } from "@mantine/core";
-import {
-  IconBold,
-  IconChevronDown,
-  IconClearFormatting,
-  IconCode,
-  IconIndentDecrease,
-  IconIndentIncrease,
-  IconItalic,
-  IconStrikethrough,
-  IconSubscript,
-  IconSuperscript,
-  IconUnderline,
-} from "@tabler/icons-react";
-import { useTranslation } from "react-i18next";
-import clsx from "clsx";
-import type { ToolbarState } from "../use-toolbar-state";
-import classes from "../fixed-toolbar.module.css";
-
-interface Props {
-  editor: Editor;
-  state: ToolbarState;
-}
-
-export const InlineMarksGroup: FC<Props> = ({ editor, state }) => {
-  const { t } = useTranslation();
-
-  return (
-    <ActionIcon.Group>
-      <Tooltip label={t("Bold")} withArrow>
-        <ActionIcon
-          variant="subtle"
-          color="dark"
-          size="md"
-          aria-label={t("Bold")}
-          aria-pressed={state.isBold}
-          className={clsx({ [classes.active]: state.isBold })}
-          onClick={() => editor.chain().focus().toggleBold().run()}
-        >
-          <IconBold size={16} />
-        </ActionIcon>
-      </Tooltip>
-      <Tooltip label={t("Underline")} withArrow>
-        <ActionIcon
-          variant="subtle"
-          color="dark"
-          size="md"
-          aria-label={t("Underline")}
-          aria-pressed={state.isUnderline}
-          className={clsx({ [classes.active]: state.isUnderline })}
-          onClick={() => editor.chain().focus().toggleUnderline().run()}
-        >
-          <IconUnderline size={16} />
-        </ActionIcon>
-      </Tooltip>
-      <Tooltip label={t("Italic")} withArrow>
-        <ActionIcon
-          variant="subtle"
-          color="dark"
-          size="md"
-          aria-label={t("Italic")}
-          aria-pressed={state.isItalic}
-          className={clsx({ [classes.active]: state.isItalic })}
-          onClick={() => editor.chain().focus().toggleItalic().run()}
-        >
-          <IconItalic size={16} />
-        </ActionIcon>
-      </Tooltip>
-      <Menu shadow="md" position="bottom-start" withArrow={false}>
-        <Menu.Target>
-          <ActionIcon
-            variant="subtle"
-            color="dark"
-            size="md"
-            aria-label={t("More inline formatting")}
-          >
-            <IconChevronDown size={14} />
-          </ActionIcon>
-        </Menu.Target>
-        <Menu.Dropdown>
-          <Menu.Item
-            leftSection={<IconStrikethrough size={16} />}
-            onClick={() => editor.chain().focus().toggleStrike().run()}
-          >
-            {t("Strikethrough")}
-          </Menu.Item>
-          <Menu.Item
-            leftSection={<IconCode size={16} />}
-            onClick={() => editor.chain().focus().toggleCode().run()}
-          >
-            {t("Inline code")}
-          </Menu.Item>
-          <Menu.Item
-            leftSection={<IconSubscript size={16} />}
-            onClick={() => editor.chain().focus().toggleSubscript().run()}
-          >
-            {t("Subscript")}
-          </Menu.Item>
-          <Menu.Item
-            leftSection={<IconSuperscript size={16} />}
-            onClick={() => editor.chain().focus().toggleSuperscript().run()}
-          >
-            {t("Superscript")}
-          </Menu.Item>
-          <Menu.Divider />
-          <Menu.Item
-            leftSection={<IconIndentIncrease size={16} />}
-            onClick={() => editor.chain().focus().indent().run()}
-          >
-            {t("Increase indent")}
-          </Menu.Item>
-          <Menu.Item
-            leftSection={<IconIndentDecrease size={16} />}
-            onClick={() => editor.chain().focus().outdent().run()}
-          >
-            {t("Decrease indent")}
-          </Menu.Item>
-          <Menu.Divider />
-          <Menu.Item
-            leftSection={<IconClearFormatting size={16} />}
-            onClick={() => editor.chain().focus().unsetAllMarks().run()}
-          >
-            {t("Clear formatting")}
-          </Menu.Item>
-        </Menu.Dropdown>
-      </Menu>
-    </ActionIcon.Group>
-  );
-};

apps/client/src/features/editor/components/fixed-toolbar/groups/link-group.tsx

@@ -1,6 +0,0 @@
-import { FC } from "react";
-import { LinkSelector } from "@/features/editor/components/bubble-menu/link-selector";
-
-export const LinkGroup: FC = () => {
-  return <LinkSelector />;
-};

apps/client/src/features/editor/components/fixed-toolbar/groups/lists-group.tsx

@@ -1,61 +0,0 @@
-import { FC } from "react";
-import type { Editor } from "@tiptap/react";
-import { ActionIcon, Tooltip } from "@mantine/core";
-import { IconCheckbox, IconList, IconListNumbers } from "@tabler/icons-react";
-import { useTranslation } from "react-i18next";
-import clsx from "clsx";
-import type { ToolbarState } from "../use-toolbar-state";
-import classes from "../fixed-toolbar.module.css";
-
-interface Props {
-  editor: Editor;
-  state: ToolbarState;
-}
-
-export const ListsGroup: FC<Props> = ({ editor, state }) => {
-  const { t } = useTranslation();
-
-  return (
-    <ActionIcon.Group>
-      <Tooltip label={t("Bullet List")} withArrow>
-        <ActionIcon
-          variant="subtle"
-          color="dark"
-          size="md"
-          aria-label={t("Bullet List")}
-          aria-pressed={state.isBulletList}
-          className={clsx({ [classes.active]: state.isBulletList })}
-          onClick={() => editor.chain().focus().toggleBulletList().run()}
-        >
-          <IconList size={16} />
-        </ActionIcon>
-      </Tooltip>
-      <Tooltip label={t("Numbered List")} withArrow>
-        <ActionIcon
-          variant="subtle"
-          color="dark"
-          size="md"
-          aria-label={t("Numbered List")}
-          aria-pressed={state.isOrderedList}
-          className={clsx({ [classes.active]: state.isOrderedList })}
-          onClick={() => editor.chain().focus().toggleOrderedList().run()}
-        >
-          <IconListNumbers size={16} />
-        </ActionIcon>
-      </Tooltip>
-      <Tooltip label={t("To-do List")} withArrow>
-        <ActionIcon
-          variant="subtle"
-          color="dark"
-          size="md"
-          aria-label={t("To-do List")}
-          aria-pressed={state.isTaskList}
-          className={clsx({ [classes.active]: state.isTaskList })}
-          onClick={() => editor.chain().focus().toggleTaskList().run()}
-        >
-          <IconCheckbox size={16} />
-        </ActionIcon>
-      </Tooltip>
-    </ActionIcon.Group>
-  );
-};

apps/client/src/features/editor/components/fixed-toolbar/groups/media-group.tsx

@@ -1,118 +0,0 @@
-import { FC } from "react";
-import type { Editor } from "@tiptap/react";
-import { ActionIcon, Menu, Tooltip } from "@mantine/core";
-import {
-  IconFileTypePdf,
-  IconMovie,
-  IconMusic,
-  IconPaperclip,
-  IconPhoto,
-} from "@tabler/icons-react";
-import { useTranslation } from "react-i18next";
-import { uploadImageAction } from "@/features/editor/components/image/upload-image-action";
-import { uploadVideoAction } from "@/features/editor/components/video/upload-video-action";
-import { uploadAudioAction } from "@/features/editor/components/audio/upload-audio-action";
-import { uploadAttachmentAction } from "@/features/editor/components/attachment/upload-attachment-action";
-import { uploadPdfAction } from "@/features/editor/components/pdf/upload-pdf-action";
-
-interface Props {
-  editor: Editor;
-}
-
-type UploadFn = (
-  file: File,
-  editor: Editor,
-  pos: number,
-  pageId: string,
-  ...rest: any[]
-) => void;
-
-function pickFile(
-  editor: Editor,
-  accept: string,
-  multiple: boolean,
-  upload: UploadFn,
-  extra?: boolean,
-) {
-  // @ts-ignore — editor.storage.pageId is set by PageEditor.onCreate
-  const pageId = editor.storage?.pageId as string | undefined;
-  if (!pageId) return;
-
-  const input = document.createElement("input");
-  input.type = "file";
-  input.accept = accept;
-  input.multiple = multiple;
-  input.style.display = "none";
-  document.body.appendChild(input);
-  input.onchange = () => {
-    if (input.files?.length) {
-      for (const file of input.files) {
-        const pos = editor.view.state.selection.from;
-        if (extra !== undefined) {
-          upload(file, editor, pos, pageId, extra);
-        } else {
-          upload(file, editor, pos, pageId);
-        }
-      }
-    }
-    input.remove();
-  };
-  input.click();
-}
-
-export const MediaGroup: FC<Props> = ({ editor }) => {
-  const { t } = useTranslation();
-
-  return (
-    <Menu shadow="md" position="bottom-start" withArrow={false}>
-      <Menu.Target>
-        <Tooltip label={t("Insert media")} withArrow>
-          <ActionIcon
-            variant="subtle"
-            color="dark"
-            size="md"
-            aria-label={t("Insert media")}
-          >
-            <IconPhoto size={16} />
-          </ActionIcon>
-        </Tooltip>
-      </Menu.Target>
-      <Menu.Dropdown>
-        <Menu.Item
-          leftSection={<IconPhoto size={16} />}
-          onClick={() => pickFile(editor, "image/*", true, uploadImageAction)}
-        >
-          {t("Image")}
-        </Menu.Item>
-        <Menu.Item
-          leftSection={<IconMovie size={16} />}
-          onClick={() => pickFile(editor, "video/*", true, uploadVideoAction)}
-        >
-          {t("Video")}
-        </Menu.Item>
-        <Menu.Item
-          leftSection={<IconMusic size={16} />}
-          onClick={() => pickFile(editor, "audio/*", true, uploadAudioAction)}
-        >
-          {t("Audio")}
-        </Menu.Item>
-        <Menu.Item
-          leftSection={<IconFileTypePdf size={16} />}
-          onClick={() =>
-            pickFile(editor, "application/pdf", false, uploadPdfAction)
-          }
-        >
-          PDF
-        </Menu.Item>
-        <Menu.Item
-          leftSection={<IconPaperclip size={16} />}
-          onClick={() =>
-            pickFile(editor, "", true, uploadAttachmentAction, true)
-          }
-        >
-          {t("File attachment")}
-        </Menu.Item>
-      </Menu.Dropdown>
-    </Menu>
-  );
-};

apps/client/src/features/editor/components/fixed-toolbar/groups/more-inserts-group.tsx

@@ -1,217 +0,0 @@
-import { FC } from "react";
-import type { Editor } from "@tiptap/react";
-import { ActionIcon, Menu, Tooltip } from "@mantine/core";
-import {
-  IconAppWindow,
-  IconCalendar,
-  IconCaretRightFilled,
-  IconChevronDown,
-  IconInfoCircle,
-  IconMath,
-  IconMathFunction,
-  IconRotate2,
-  IconSitemap,
-  IconTag,
-} from "@tabler/icons-react";
-import IconExcalidraw from "@/components/icons/icon-excalidraw";
-import IconMermaid from "@/components/icons/icon-mermaid";
-import IconDrawio from "@/components/icons/icon-drawio";
-import {
-  AirtableIcon,
-  FigmaIcon,
-  FramerIcon,
-  GoogleDriveIcon,
-  GoogleSheetsIcon,
-  LoomIcon,
-  MiroIcon,
-  TypeformIcon,
-  VimeoIcon,
-  YoutubeIcon,
-} from "@/components/icons";
-import { useTranslation } from "react-i18next";
-
-interface Props {
-  editor: Editor;
-}
-
-export const MoreInsertsGroup: FC<Props> = ({ editor }) => {
-  const { t } = useTranslation();
-
-  const setEmbed = (provider: string) =>
-    editor.chain().focus().setEmbed({ provider }).run();
-
-  const insertDate = () => {
-    const currentDate = new Date().toLocaleDateString("en-US", {
-      year: "numeric",
-      month: "long",
-      day: "numeric",
-    });
-    editor.chain().focus().insertContent(currentDate).run();
-  };
-
-  return (
-    <Menu shadow="md" position="bottom-start" withArrow={false} width={240}>
-      <Menu.Target>
-        <Tooltip label={t("More inserts")} withArrow>
-          <ActionIcon
-            variant="subtle"
-            color="dark"
-            size="md"
-            aria-label={t("More inserts")}
-          >
-            <IconChevronDown size={16} />
-          </ActionIcon>
-        </Tooltip>
-      </Menu.Target>
-      <Menu.Dropdown mah={400} style={{ overflowY: "auto" }}>
-        <Menu.Label>{t("Advanced")}</Menu.Label>
-        <Menu.Item
-          leftSection={<IconInfoCircle size={16} />}
-          onClick={() => editor.chain().focus().toggleCallout().run()}
-        >
-          {t("Callout")}
-        </Menu.Item>
-        <Menu.Item
-          leftSection={<IconCaretRightFilled size={16} />}
-          onClick={() => editor.chain().focus().setDetails().run()}
-        >
-          {t("Toggle block")}
-        </Menu.Item>
-        <Menu.Item
-          leftSection={<IconTag size={16} />}
-          onClick={() =>
-            editor.chain().focus().setStatus({ text: "", color: "gray" }).run()
-          }
-        >
-          {t("Status")}
-        </Menu.Item>
-        <Menu.Item
-          leftSection={<IconSitemap size={16} />}
-          onClick={() => editor.chain().focus().insertSubpages().run()}
-        >
-          {t("Subpages")}
-        </Menu.Item>
-        <Menu.Item
-          leftSection={<IconRotate2 size={16} />}
-          onClick={() =>
-            editor.chain().focus().insertTransclusionSource().run()
-          }
-        >
-          {t("Synced block")}
-        </Menu.Item>
-
-        <Menu.Divider />
-        <Menu.Label>{t("Diagrams")}</Menu.Label>
-        <Menu.Item
-          leftSection={<IconMermaid size={16} />}
-          onClick={() =>
-            editor
-              .chain()
-              .focus()
-              .setCodeBlock({ language: "mermaid" })
-              .insertContent("flowchart LR\n    A --> B")
-              .run()
-          }
-        >
-          {t("Mermaid diagram")}
-        </Menu.Item>
-        <Menu.Item
-          leftSection={<IconDrawio size={16} />}
-          onClick={() => editor.chain().focus().setDrawio().run()}
-        >
-          Draw.io
-        </Menu.Item>
-        <Menu.Item
-          leftSection={<IconExcalidraw size={16} />}
-          onClick={() => editor.chain().focus().setExcalidraw().run()}
-        >
-          Excalidraw
-        </Menu.Item>
-
-        <Menu.Divider />
-        <Menu.Label>{t("Embeds")}</Menu.Label>
-        <Menu.Item
-          leftSection={<IconAppWindow size={16} />}
-          onClick={() => setEmbed("iframe")}
-        >
-          Iframe
-        </Menu.Item>
-        <Menu.Item
-          leftSection={<YoutubeIcon size={16} />}
-          onClick={() => setEmbed("youtube")}
-        >
-          YouTube
-        </Menu.Item>
-        <Menu.Item
-          leftSection={<VimeoIcon size={16} />}
-          onClick={() => setEmbed("vimeo")}
-        >
-          Vimeo
-        </Menu.Item>
-        <Menu.Item leftSection={<LoomIcon size={16} />} onClick={() => setEmbed("loom")}>
-          Loom
-        </Menu.Item>
-        <Menu.Item
-          leftSection={<FigmaIcon size={16} />}
-          onClick={() => setEmbed("figma")}
-        >
-          Figma
-        </Menu.Item>
-        <Menu.Item
-          leftSection={<AirtableIcon size={16} />}
-          onClick={() => setEmbed("airtable")}
-        >
-          Airtable
-        </Menu.Item>
-        <Menu.Item
-          leftSection={<TypeformIcon size={16} />}
-          onClick={() => setEmbed("typeform")}
-        >
-          Typeform
-        </Menu.Item>
-        <Menu.Item leftSection={<MiroIcon size={16} />} onClick={() => setEmbed("miro")}>
-          Miro
-        </Menu.Item>
-        <Menu.Item
-          leftSection={<FramerIcon size={16} />}
-          onClick={() => setEmbed("framer")}
-        >
-          Framer
-        </Menu.Item>
-        <Menu.Item
-          leftSection={<GoogleDriveIcon size={16} />}
-          onClick={() => setEmbed("gdrive")}
-        >
-          Google Drive
-        </Menu.Item>
-        <Menu.Item
-          leftSection={<GoogleSheetsIcon size={16} />}
-          onClick={() => setEmbed("gsheets")}
-        >
-          Google Sheets
-        </Menu.Item>
-
-        <Menu.Divider />
-        <Menu.Label>{t("Utility")}</Menu.Label>
-        <Menu.Item
-          leftSection={<IconCalendar size={16} />}
-          onClick={insertDate}
-        >
-          {t("Date")}
-        </Menu.Item>
-        <Menu.Item
-          leftSection={<IconMathFunction size={16} />}
-          onClick={() => editor.chain().focus().setMathInline().run()}
-        >
-          {t("Math inline")}
-        </Menu.Item>
-        <Menu.Item
-          leftSection={<IconMath size={16} />}
-          onClick={() => editor.chain().focus().setMathBlock().run()}
-        >
-          {t("Math block")}
-        </Menu.Item>
-      </Menu.Dropdown>
-    </Menu>
-  );
-};

apps/client/src/features/editor/components/fixed-toolbar/groups/quick-inserts-group.tsx

@@ -1,117 +0,0 @@
-import { FC } from "react";
-import type { Editor } from "@tiptap/react";
-import { ActionIcon, Menu, Tooltip } from "@mantine/core";
-import {
-  IconAt,
-  IconColumns2,
-  IconColumns3,
-  IconMoodSmile,
-  IconTable,
-} from "@tabler/icons-react";
-import { IconColumns4 } from "@/components/icons/icon-columns-4";
-import { IconColumns5 } from "@/components/icons/icon-columns-5";
-import { useTranslation } from "react-i18next";
-
-interface Props {
-  editor: Editor;
-}
-
-export const QuickInsertsGroup: FC<Props> = ({ editor }) => {
-  const { t } = useTranslation();
-
-  return (
-    <ActionIcon.Group>
-      <Tooltip label={t("Mention")} withArrow>
-        <ActionIcon
-          variant="subtle"
-          color="dark"
-          size="md"
-          aria-label={t("Mention")}
-          onClick={() => editor.chain().focus().insertContent("@").run()}
-        >
-          <IconAt size={16} />
-        </ActionIcon>
-      </Tooltip>
-      <Tooltip label={t("Emoji")} withArrow>
-        <ActionIcon
-          variant="subtle"
-          color="dark"
-          size="md"
-          aria-label={t("Emoji")}
-          onClick={() => editor.chain().focus().insertContent(":").run()}
-        >
-          <IconMoodSmile size={16} />
-        </ActionIcon>
-      </Tooltip>
-      <Menu shadow="md" position="bottom-start" withArrow={false}>
-        <Menu.Target>
-          <Tooltip label={t("Columns")} withArrow>
-            <ActionIcon
-              variant="subtle"
-              color="dark"
-              size="md"
-              aria-label={t("Columns")}
-            >
-              <IconColumns2 size={16} />
-            </ActionIcon>
-          </Tooltip>
-        </Menu.Target>
-        <Menu.Dropdown>
-          <Menu.Item
-            leftSection={<IconColumns2 size={16} />}
-            onClick={() =>
-              editor.chain().focus().insertColumns({ layout: "two_equal" }).run()
-            }
-          >
-            {t("{{count}} Columns", { count: 2 })}
-          </Menu.Item>
-          <Menu.Item
-            leftSection={<IconColumns3 size={16} />}
-            onClick={() =>
-              editor
-                .chain()
-                .focus()
-                .insertColumns({ layout: "three_equal" })
-                .run()
-            }
-          >
-            {t("{{count}} Columns", { count: 3 })}
-          </Menu.Item>
-          <Menu.Item
-            leftSection={<IconColumns4 size={16} />}
-            onClick={() =>
-              editor.chain().focus().insertColumns({ layout: "four_equal" }).run()
-            }
-          >
-            {t("{{count}} Columns", { count: 4 })}
-          </Menu.Item>
-          <Menu.Item
-            leftSection={<IconColumns5 size={16} />}
-            onClick={() =>
-              editor.chain().focus().insertColumns({ layout: "five_equal" }).run()
-            }
-          >
-            {t("{{count}} Columns", { count: 5 })}
-          </Menu.Item>
-        </Menu.Dropdown>
-      </Menu>
-      <Tooltip label={t("Table")} withArrow>
-        <ActionIcon
-          variant="subtle"
-          color="dark"
-          size="md"
-          aria-label={t("Table")}
-          onClick={() =>
-            editor
-              .chain()
-              .focus()
-              .insertTable({ rows: 3, cols: 3, withHeaderRow: true })
-              .run()
-          }
-        >
-          <IconTable size={16} />
-        </ActionIcon>
-      </Tooltip>
-    </ActionIcon.Group>
-  );
-};

apps/client/src/features/editor/components/fixed-toolbar/use-toolbar-state.ts

@@ -1,50 +0,0 @@
-import type { Editor } from "@tiptap/react";
-import { useEditorState } from "@tiptap/react";
-
-export interface ToolbarState {
-  isBold: boolean;
-  isItalic: boolean;
-  isUnderline: boolean;
-  isStrike: boolean;
-  isCode: boolean;
-  isSubscript: boolean;
-  isSuperscript: boolean;
-  isBulletList: boolean;
-  isOrderedList: boolean;
-  isTaskList: boolean;
-  canUndo: boolean;
-  canRedo: boolean;
-}
-
-// Undo/redo come from either StarterKit's history or the Yjs collaboration
-// history extension. During the brief moment a page is rendered with the
-// static editor (mainExtensions only, undoRedo disabled), neither is loaded
-// and editor.can().undo/redo is undefined.
-function safeCan(editor: Editor, command: "undo" | "redo"): boolean {
-  const can = editor.can() as Record<string, unknown>;
-  const fn = can[command];
-  return typeof fn === "function" ? (fn as () => boolean)() : false;
-}
-
-export function useToolbarState(editor: Editor | null): ToolbarState | null {
-  return useEditorState({
-    editor,
-    selector: (ctx) => {
-      if (!ctx.editor) return null;
-      return {
-        isBold: ctx.editor.isActive("bold"),
-        isItalic: ctx.editor.isActive("italic"),
-        isUnderline: ctx.editor.isActive("underline"),
-        isStrike: ctx.editor.isActive("strike"),
-        isCode: ctx.editor.isActive("code"),
-        isSubscript: ctx.editor.isActive("subscript"),
-        isSuperscript: ctx.editor.isActive("superscript"),
-        isBulletList: ctx.editor.isActive("bulletList"),
-        isOrderedList: ctx.editor.isActive("orderedList"),
-        isTaskList: ctx.editor.isActive("taskList"),
-        canUndo: safeCan(ctx.editor, "undo"),
-        canRedo: safeCan(ctx.editor, "redo"),
-      };
-    },
-  });
-}

apps/client/src/features/editor/components/mention/mention-list.tsx

@@ -3,6 +3,7 @@ import React, {
   useCallback,
   useEffect,
   useImperativeHandle,
+  useMemo,
   useRef,
   useState,
 } from "react";
@@ -35,7 +36,7 @@ import {
   usePageQuery,
 } from "@/features/page/queries/page-query";
 import { treeDataAtom } from "@/features/page/tree/atoms/tree-data-atom";
-import { treeModel } from "@/features/page/tree/model/tree-model";
+import { SimpleTree } from "react-arborist";
 import { SpaceTreeNode } from "@/features/page/tree/types";
 import { useTranslation } from "react-i18next";
 import { useQueryEmit } from "@/features/websocket/use-query-emit";
@@ -52,6 +53,7 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
   const [renderItems, setRenderItems] = useState<MentionSuggestionItem[]>([]);
   const { t } = useTranslation();
   const [data, setData] = useAtom(treeDataAtom);
+  const tree = useMemo(() => new SimpleTree<SpaceTreeNode>(data), [data]);
   const createPageMutation = useCreatePageMutation();
   const emit = useQueryEmit();
   const isInCommentContext = props.isInCommentContext ?? false;
@@ -218,20 +220,20 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
     try {
       createdPage = await createPageMutation.mutateAsync(payload);
       const parentId = page.id || null;
-      const newNode: SpaceTreeNode = {
+      const data = {
         id: createdPage.id,
         slugId: createdPage.slugId,
         name: createdPage.title,
         position: createdPage.position,
         spaceId: createdPage.spaceId,
         parentPageId: createdPage.parentPageId,
-        hasChildren: false,
         children: [],
-      };
+      } as any;
 
-      const lastIndex = data.length;
+      const lastIndex = tree.data.length;
 
-      setData(treeModel.insert(data, parentId, newNode, lastIndex));
+      tree.create({ parentId, index: lastIndex, data });
+      setData(tree.data);
 
       props.command({
         id: uuid7(),
@@ -249,7 +251,7 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
           payload: {
             parentId,
             index: lastIndex,
-            data: newNode,
+            data,
           },
         });
       }, 50);

apps/client/src/features/editor/components/slash-menu/menu-items.ts

@@ -19,14 +19,12 @@ import {
   IconTable,
   IconTypography,
   IconMenu4,
-  IconPageBreak,
   IconCalendar,
   IconAppWindow,
   IconSitemap,
   IconColumns3,
   IconColumns2,
   IconTag,
-  IconMoodSmile,
   IconRotate2,
 } from "@tabler/icons-react";
 import {
@@ -165,14 +163,6 @@ const CommandGroups: SlashMenuGroupedItemsType = {
       command: ({ editor, range }: CommandProps) =>
         editor.chain().focus().deleteRange(range).setHorizontalRule().run(),
     },
-    {
-      title: "Page break",
-      description: "Insert a page break for printing.",
-      searchTerms: ["page", "break", "pagebreak", "print"],
-      icon: IconPageBreak,
-      command: ({ editor, range }: CommandProps) =>
-        editor.chain().focus().deleteRange(range).setPageBreak().run(),
-    },
     {
       title: "Image",
       description: "Upload any image from your device.",
@@ -487,15 +477,6 @@ const CommandGroups: SlashMenuGroupedItemsType = {
           .run();
       },
     },
-    {
-      title: "Emoji",
-      description: "Insert emoji.",
-      searchTerms: ["emoji", "icon", "smiley", "emoticon", "symbol", "reaction"],
-      icon: IconMoodSmile,
-      command: ({ editor, range }: CommandProps) => {
-        editor.chain().focus().deleteRange(range).insertContent(":").run();
-      },
-    },
     {
       title: "Subpages (Child pages)",
       description: "List all subpages of the current page",

apps/client/src/features/editor/components/table-of-contents/table-of-contents.tsx

@@ -25,7 +25,7 @@ const recalculateLinks = (nodePos: NodePos[]) => {
     (acc, item) => {
       const label = item.node.textContent;
       const level = Number(item.node.attrs.level);
-      if (label.length && level <= 4) {
+      if (label.length && level <= 3) {
         acc.push({
           label,
           level,

apps/client/src/features/editor/components/table/handle/cell-chevron.tsx

@@ -1,126 +0,0 @@
-import React, { useCallback, useEffect } from "react";
-import type { Editor } from "@tiptap/react";
-import { useEditorState } from "@tiptap/react";
-import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
-import { TextSelection } from "@tiptap/pm/state";
-import { columnResizingPluginKey } from "@tiptap/pm/tables";
-import { useFloating, offset, autoUpdate, hide } from "@floating-ui/react";
-import { Menu, UnstyledButton } from "@mantine/core";
-import { IconChevronDown } from "@tabler/icons-react";
-import clsx from "clsx";
-import { useTranslation } from "react-i18next";
-import { isCellSelection } from "@docmost/editor-ext";
-import { CellChevronMenu } from "./menus/cell-chevron-menu";
-import classes from "./handle.module.css";
-
-interface CellChevronProps {
-  editor: Editor;
-  cellPos: number;
-  tableNode: ProseMirrorNode;
-  tablePos: number;
-}
-
-export const CellChevron = React.memo(function CellChevron({
-  editor,
-  cellPos,
-  tableNode,
-  tablePos,
-}: CellChevronProps) {
-  const { t } = useTranslation();
-  const cellDom = editor.view.nodeDOM(cellPos) as HTMLElement | null;
-
-  const { refs, floatingStyles, middlewareData } = useFloating({
-    placement: "top-end",
-    // crossAxis pulls the chevron INWARD from the cell's right edge. We need
-    // enough inset that we don't overlap PM-tables' column-resize hot zone
-    // (~5px wide around the column boundary). Without this, hovering near the
-    // column edge picks up the chevron's `cursor: pointer` instead of
-    // `col-resize`, and a drag near the edge clicks the chevron.
-    middleware: [offset({ mainAxis: -22, crossAxis: -10 }), hide()],
-    whileElementsMounted: autoUpdate,
-    strategy: "absolute",
-  });
-  const isReferenceHidden = !!middlewareData.hide?.referenceHidden;
-
-  useEffect(() => {
-    refs.setReference(cellDom);
-  }, [cellDom, refs]);
-
-  // Hide the chevron while the user is resizing a column. PM-tables sets
-  // `activeHandle > -1` whenever the mouse is near a column boundary OR
-  // actively dragging it. Either way we don't want the chevron in the way.
-  const isResizingColumn = useEditorState({
-    editor,
-    selector: (ctx) => {
-      if (!ctx.editor) return false;
-      const state = columnResizingPluginKey.getState(ctx.editor.state) as
-        | { activeHandle: number }
-        | undefined;
-      return !!state && state.activeHandle > -1;
-    },
-  });
-
-  const onOpen = useCallback(() => {
-    const current = editor.state.selection;
-
-    // Preserve an existing multi-cell CellSelection that already covers
-    // this cell so merge etc. operate on the user's whole range.
-    let preserveExisting = false;
-    if (isCellSelection(current)) {
-      current.forEachCell((_node, pos) => {
-        if (pos === cellPos) preserveExisting = true;
-      });
-    }
-
-    if (!preserveExisting) {
-      // Drop a collapsed cursor inside the cell rather than a single-cell
-      // CellSelection — PM-tables paints the latter as a text-range
-      // highlight on the cell content.
-      try {
-        const $inside = editor.state.doc.resolve(cellPos + 1);
-        const sel = TextSelection.near($inside, 1);
-        editor.view.dispatch(editor.state.tr.setSelection(sel));
-      } catch {}
-    }
-    editor.commands.freezeHandles();
-  }, [editor, cellPos]);
-
-  const onClose = useCallback(() => {
-    editor.commands.unfreezeHandles();
-  }, [editor]);
-
-  if (!cellDom) return null;
-  if (isResizingColumn) return null;
-
-  return (
-    <Menu
-      position="bottom-end"
-      onOpen={onOpen}
-      onClose={onClose}
-      withinPortal
-      shadow="md"
-    >
-      <Menu.Target>
-        <UnstyledButton
-          ref={refs.setFloating}
-          style={{
-            ...floatingStyles,
-            ...(isReferenceHidden ? { visibility: "hidden" as const } : {}),
-          }}
-          className={clsx(classes.cellChevron)}
-          aria-label={t("Cell actions")}
-        >
-          <IconChevronDown size={14} />
-        </UnstyledButton>
-      </Menu.Target>
-      <Menu.Dropdown>
-        <CellChevronMenu
-          editor={editor}
-          cellPos={cellPos}
-          tableNode={tableNode}
-          tablePos={tablePos}
-        />
-      </Menu.Dropdown>
-    </Menu>
-  );
-});

apps/client/src/features/editor/components/table/handle/column-handle.tsx

@@ -1,127 +0,0 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
-import type { Editor } from "@tiptap/react";
-import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
-import { useFloating, offset, autoUpdate, hide } from "@floating-ui/react";
-import { Menu } from "@mantine/core";
-import clsx from "clsx";
-import { useTranslation } from "react-i18next";
-import { useTableHandleDrag } from "./hooks/use-table-handle-drag";
-import { useColumnRowMenuLifecycle } from "./hooks/use-column-row-menu-lifecycle";
-import { ColumnHandleMenu } from "./menus/column-handle-menu";
-import classes from "./handle.module.css";
-
-interface ColumnHandleProps {
-  editor: Editor;
-  index: number;
-  anchorPos: number;
-  tableNode: ProseMirrorNode;
-  tablePos: number;
-}
-
-export const ColumnHandle = React.memo(function ColumnHandle({
-  editor,
-  index,
-  anchorPos,
-  tableNode,
-  tablePos,
-}: ColumnHandleProps) {
-  const { t } = useTranslation();
-  // Hold the cell DOM in a ref-backed state so we never unmount the handle
-  // mid-drag. A remote edit can transiently flip `nodeDOM(anchorPos)` to null
-  // (the plugin re-emits `hoveringCell` with the mapped pos a tick later);
-  // unmounting the source element here would make pragmatic-dnd silently
-  // abort the active drag.
-  const lookupCellDom = editor.view.nodeDOM(anchorPos) as HTMLElement | null;
-  const [cellDom, setCellDom] = useState<HTMLElement | null>(lookupCellDom);
-  const lastCellDomRef = useRef<HTMLElement | null>(lookupCellDom);
-  useEffect(() => {
-    if (lookupCellDom && lookupCellDom !== lastCellDomRef.current) {
-      lastCellDomRef.current = lookupCellDom;
-      setCellDom(lookupCellDom);
-    }
-  }, [lookupCellDom]);
-
-  const [handleEl, setHandleEl] = useState<HTMLDivElement | null>(null);
-
-  const { refs, floatingStyles, middlewareData } = useFloating({
-    placement: "top",
-    middleware: [offset(-4), hide()],
-    whileElementsMounted: autoUpdate,
-  });
-  const isReferenceHidden = !!middlewareData.hide?.referenceHidden;
-
-  useEffect(() => {
-    refs.setReference(cellDom);
-  }, [cellDom, refs]);
-
-  // `cellDom` is inside the table, so `closest('.tableWrapper')` finds the
-  // wrapper for this drag's auto-scroll. The handle itself lives in a
-  // floating layer outside the editor DOM, so we can't walk up from it.
-  const wrapper = cellDom?.closest<HTMLElement>(".tableWrapper") ?? null;
-
-  const [menuOpened, setMenuOpened] = useState(false);
-  const closeMenu = useCallback(() => setMenuOpened(false), []);
-  useTableHandleDrag(editor, "col", handleEl, wrapper, closeMenu);
-
-  const { onOpen, onClose } = useColumnRowMenuLifecycle({
-    editor,
-    orientation: "col",
-    index,
-    tableNode,
-    tablePos,
-  });
-
-  if (!cellDom) return null;
-
-  return (
-    <Menu
-      opened={menuOpened}
-      onChange={setMenuOpened}
-      position="bottom-start"
-      onOpen={onOpen}
-      onClose={onClose}
-      withinPortal
-      shadow="md"
-    >
-      <Menu.Target>
-        <div
-          ref={(node) => {
-            refs.setFloating(node);
-            setHandleEl(node);
-          }}
-          style={{
-            ...floatingStyles,
-            ...(isReferenceHidden ? { visibility: "hidden" as const } : {}),
-          }}
-          className={clsx(classes.handle, classes.columnHandle)}
-          role="button"
-          tabIndex={0}
-          aria-label={t("Column actions")}
-        >
-          <span style={{ pointerEvents: "none", display: "inline-flex" }}>
-            <GripIcon />
-          </span>
-        </div>
-      </Menu.Target>
-      <Menu.Dropdown>
-        <ColumnHandleMenu
-          editor={editor}
-          index={index}
-          tableNode={tableNode}
-          tablePos={tablePos}
-        />
-      </Menu.Dropdown>
-    </Menu>
-  );
-});
-
-function GripIcon() {
-  return (
-    <svg viewBox="0 0 10 10" width="14" height="14" aria-hidden>
-      <path
-        fill="currentColor"
-        d="M3,2 A1,1 0 1 1 3,0 A1,1 0 0 1 3,2 Z M3,6 A1,1 0 1 1 3,4 A1,1 0 0 1 3,6 Z M3,10 A1,1 0 1 1 3,8 A1,1 0 0 1 3,10 Z M7,2 A1,1 0 1 1 7,0 A1,1 0 0 1 7,2 Z M7,6 A1,1 0 1 1 7,4 A1,1 0 0 1 7,6 Z M7,10 A1,1 0 1 1 7,8 A1,1 0 0 1 7,10 Z"
-      />
-    </svg>
-  );
-}

apps/client/src/features/editor/components/table/handle/handle.module.css

@@ -1,108 +0,0 @@
-.handle {
-  position: absolute;
-  z-index: 50;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 4px;
-  color: rgba(55, 53, 47, 0.45);
-  background: var(--mantine-color-body);
-  border: 1px solid rgba(55, 53, 47, 0.12);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
-  cursor: grab;
-  padding: 0;
-  transition: background-color 120ms ease, color 120ms ease;
-
-  @mixin dark {
-    color: rgba(255, 255, 255, 0.55);
-    background: var(--mantine-color-dark-7);
-    border-color: rgba(255, 255, 255, 0.12);
-  }
-}
-
-.handle:hover {
-  background: light-dark(
-    var(--mantine-color-gray-1),
-    var(--mantine-color-dark-5)
-  );
-  color: light-dark(
-    var(--mantine-color-gray-7),
-    var(--mantine-color-dark-0)
-  );
-}
-
-.handle:active {
-  cursor: grabbing;
-}
-
-.columnHandle {
-  width: 28px;
-  height: 16px;
-}
-
-.columnHandle svg {
-  transform: rotate(90deg);
-}
-
-.rowHandle {
-  width: 16px;
-  height: 28px;
-}
-
-@media (max-width: 600px) {
-  .handle {
-    display: none;
-  }
-}
-
-.cellChevron {
-  position: absolute;
-  z-index: 50;
-  width: 18px;
-  height: 18px;
-  border-radius: 4px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: light-dark(
-    var(--mantine-color-gray-7),
-    var(--mantine-color-dark-1)
-  );
-  background: light-dark(
-    var(--mantine-color-gray-1),
-    var(--mantine-color-dark-5)
-  );
-  border: 1px solid rgba(55, 53, 47, 0.12);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
-  cursor: pointer;
-  padding: 0;
-  transition: background-color 120ms ease, color 120ms ease;
-
-  @mixin dark {
-    border-color: rgba(255, 255, 255, 0.12);
-  }
-}
-
-.cellChevron:hover {
-  background: light-dark(
-    var(--mantine-color-gray-2),
-    var(--mantine-color-dark-4)
-  );
-  color: light-dark(
-    var(--mantine-color-gray-8),
-    var(--mantine-color-dark-0)
-  );
-}
-
-@media (max-width: 600px) {
-  .cellChevron {
-    display: none;
-  }
-}
-
-@media print {
-  .handle,
-  .cellChevron {
-    display: none !important;
-  }
-}

apps/client/src/features/editor/components/table/handle/hooks/use-column-row-menu-lifecycle.ts

@@ -1,40 +0,0 @@
-import { useCallback } from "react";
-import type { Editor } from "@tiptap/react";
-import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
-import { buildRowOrColumnSelection, Orientation } from "../lib/select-row-column";
-
-interface Args {
-  editor: Editor;
-  orientation: Orientation;
-  index: number;
-  tableNode: ProseMirrorNode;
-  tablePos: number;
-}
-
-export function useColumnRowMenuLifecycle({
-  editor,
-  orientation,
-  index,
-  tableNode,
-  tablePos,
-}: Args) {
-  const onOpen = useCallback(() => {
-    const selection = buildRowOrColumnSelection(
-      editor.state,
-      tableNode,
-      tablePos,
-      orientation,
-      index,
-    );
-    const tr = editor.state.tr;
-    if (selection) tr.setSelection(selection);
-    editor.view.dispatch(tr);
-    editor.commands.freezeHandles();
-  }, [editor, orientation, index, tableNode, tablePos]);
-
-  const onClose = useCallback(() => {
-    editor.commands.unfreezeHandles();
-  }, [editor]);
-
-  return { onOpen, onClose };
-}

apps/client/src/features/editor/components/table/handle/hooks/use-table-clear.ts

@@ -1,54 +0,0 @@
-import { useCallback } from "react";
-import type { Editor } from "@tiptap/react";
-import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
-import { TableMap } from "@tiptap/pm/tables";
-
-type Scope =
-  | { kind: "col"; index: number }
-  | { kind: "row"; index: number }
-  | { kind: "cell"; cellPos: number };
-
-export function useTableClear(
-  editor: Editor,
-  tableNode: ProseMirrorNode,
-  tablePos: number,
-  scope: Scope,
-) {
-  return useCallback(() => {
-    const tr = editor.state.tr;
-    const tableStart = tablePos + 1;
-    const map = TableMap.get(tableNode);
-    const paragraph = editor.schema.nodes.paragraph;
-    if (!paragraph) return;
-
-    const cellOffsets: number[] = [];
-
-    if (scope.kind === "col") {
-      for (let row = 0; row < map.height; row++) {
-        cellOffsets.push(map.map[row * map.width + scope.index]);
-      }
-    } else if (scope.kind === "row") {
-      for (let col = 0; col < map.width; col++) {
-        cellOffsets.push(map.map[scope.index * map.width + col]);
-      }
-    }
-
-    const targets =
-      scope.kind === "cell"
-        ? [scope.cellPos]
-        : Array.from(new Set(cellOffsets)).map((o) => tableStart + o);
-
-    // Process in reverse position order so earlier replacements don't shift later ones.
-    targets.sort((a, b) => b - a);
-
-    for (const cellPos of targets) {
-      const node = tr.doc.nodeAt(cellPos);
-      if (!node) continue;
-      const start = cellPos + 1;
-      const end = cellPos + node.nodeSize - 1;
-      tr.replaceWith(start, end, paragraph.create());
-    }
-
-    if (tr.docChanged) editor.view.dispatch(tr);
-  }, [editor, tableNode, tablePos, scope]);
-}

apps/client/src/features/editor/components/table/handle/hooks/use-table-handle-drag.ts

@@ -1,79 +0,0 @@
-import { useEffect } from "react";
-import type { Editor } from "@tiptap/react";
-import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
-import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
-import { disableNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview";
-import {
-  autoScrollForElements,
-  autoScrollWindowForElements,
-} from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
-import { getTableHandlePluginSpec } from "@docmost/editor-ext";
-
-// Uses pragmatic-drag-and-drop instead of native HTML5 DnD because the native
-// dragstart→dragover→drop lifecycle was being silently cancelled
-export function useTableHandleDrag(
-  editor: Editor,
-  orientation: "col" | "row",
-  element: HTMLElement | null,
-  wrapper: HTMLElement | null,
-  onDragStart?: () => void,
-) {
-  useEffect(() => {
-    if (!element) return;
-
-    return combine(
-      draggable({
-        element,
-        getInitialData: () => ({ type: `table-${orientation}` }),
-        onGenerateDragPreview: ({ nativeSetDragImage }) => {
-          // We render our own floating preview via PreviewController, so hide
-          // the native drag image entirely.
-          disableNativeDragPreview({ nativeSetDragImage });
-        },
-        onDragStart: ({ location }) => {
-          // The menu (if open from a prior click on the handle) won't dismiss
-          // on its own — pragmatic-dnd swallows the events Mantine listens for.
-          onDragStart?.();
-          const spec = getTableHandlePluginSpec(editor);
-          if (!spec) return;
-          const { clientX, clientY } = location.initial.input;
-          spec.startDragFromHandle(orientation, clientX, clientY);
-        },
-        onDrag: ({ location }) => {
-          const spec = getTableHandlePluginSpec(editor);
-          if (!spec) return;
-          const { clientX, clientY } = location.current.input;
-          spec.updateDragPosition(clientX, clientY);
-        },
-        onDrop: ({ location }) => {
-          const spec = getTableHandlePluginSpec(editor);
-          if (!spec) return;
-          const { clientX, clientY } = location.current.input;
-          // Make sure the final position is recorded before committing the drop.
-          spec.updateDragPosition(clientX, clientY);
-          spec.commitDrop();
-          spec.endDrag();
-        },
-      }),
-      // Wrapper owns horizontal auto-scroll (it has `overflow-x: auto`);
-      // window owns vertical. Locking each axis prevents the window's
-      // horizontal auto-scroll from running when the cursor approaches
-      // the viewport edge — without the cap, the preview's `left` follows
-      // the cursor past the viewport, the page widens to contain it, the
-      // plugin scrolls the now-wider page further, and the loop never
-      // ends.
-      // Only the column handle registers wrapper auto-scroll (rows can't
-      // scroll horizontally) — registering twice on the same wrapper
-      // triggers a dev-mode warning from pragmatic-dnd-auto-scroll.
-      orientation === "col" &&
-      wrapper &&
-      !wrapper.classList.contains("tableWrapperNoOverflow")
-        ? autoScrollForElements({
-            element: wrapper,
-            getAllowedAxis: () => "horizontal",
-          })
-        : () => {},
-      autoScrollWindowForElements({ getAllowedAxis: () => "vertical" }),
-    );
-  }, [editor, orientation, element, wrapper, onDragStart]);
-}

apps/client/src/features/editor/components/table/handle/hooks/use-table-handle-state.ts

@@ -1,23 +0,0 @@
-import type { Editor } from "@tiptap/react";
-import { useEditorState } from "@tiptap/react";
-import { TableDndKey, TableHandleState } from "@docmost/editor-ext";
-
-const FALLBACK: TableHandleState = {
-  hoveringCell: null,
-  tableNode: null,
-  tablePos: null,
-  dragging: null,
-  frozen: false,
-};
-
-export function useTableHandleState(editor: Editor | null): TableHandleState {
-  const state = useEditorState({
-    editor,
-    selector: (ctx) => {
-      if (!ctx.editor) return null;
-      return TableDndKey.getState(ctx.editor.state) ?? null;
-    },
-  });
-
-  return state ?? FALLBACK;
-}

apps/client/src/features/editor/components/table/handle/hooks/use-table-move-row-column.ts

@@ -1,50 +0,0 @@
-import { useCallback, useMemo } from "react";
-import type { Editor } from "@tiptap/react";
-import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
-import { TableMap } from "@tiptap/pm/tables";
-import { moveColumn, moveRow } from "@docmost/editor-ext";
-
-export type MoveDirection = "left" | "right" | "up" | "down";
-
-export function useTableMoveRowColumn(
-  editor: Editor,
-  orientation: "col" | "row",
-  index: number,
-  direction: MoveDirection,
-  tableNode: ProseMirrorNode,
-  tablePos: number,
-) {
-  const target =
-    direction === "left" || direction === "up" ? index - 1 : index + 1;
-
-  const maxIndex = useMemo(() => {
-    const map = TableMap.get(tableNode);
-    return orientation === "col" ? map.width - 1 : map.height - 1;
-  }, [tableNode, orientation]);
-
-  const canMove = target >= 0 && target <= maxIndex;
-
-  const handleMove = useCallback(() => {
-    if (!canMove) return;
-    const tr = editor.state.tr;
-    const moved =
-      orientation === "col"
-        ? moveColumn({
-            tr,
-            originIndex: index,
-            targetIndex: target,
-            select: true,
-            pos: tablePos + 1,
-          })
-        : moveRow({
-            tr,
-            originIndex: index,
-            targetIndex: target,
-            select: true,
-            pos: tablePos + 1,
-          });
-    if (moved) editor.view.dispatch(tr);
-  }, [editor, orientation, index, target, tablePos, canMove]);
-
-  return { canMove, handleMove };
-}

apps/client/src/features/editor/components/table/handle/hooks/use-table-sort.ts

@@ -1,100 +0,0 @@
-import { useCallback, useMemo } from "react";
-import type { Editor } from "@tiptap/react";
-import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
-import {
-  convertArrayOfRowsToTableNode,
-  convertTableNodeToArrayOfRows,
-  transpose,
-} from "@docmost/editor-ext";
-import {
-  getCellSortText,
-  isCellEmpty,
-  isHeaderCell,
-  type SortDirection,
-  type SortableItem,
-  sortItems,
-  weaveItems,
-} from "../lib/sort-cells";
-
-interface Args {
-  editor: Editor;
-  orientation: "col" | "row";
-  index: number;
-  tableNode: ProseMirrorNode;
-  tablePos: number;
-  direction: SortDirection;
-}
-
-function tableHasMergedCells(tableNode: ProseMirrorNode): boolean {
-  for (let r = 0; r < tableNode.childCount; r++) {
-    const row = tableNode.child(r);
-    for (let c = 0; c < row.childCount; c++) {
-      const { colspan = 1, rowspan = 1 } = row.child(c).attrs;
-      if (colspan > 1 || rowspan > 1) return true;
-    }
-  }
-  return false;
-}
-
-function isAllHeader(cells: (ProseMirrorNode | null)[]): boolean {
-  return cells.every((c) => c !== null && isHeaderCell(c));
-}
-
-export function useTableSort({
-  editor,
-  orientation,
-  index,
-  tableNode,
-  tablePos,
-  direction,
-}: Args) {
-  const canSort = useMemo(() => {
-    if (tableHasMergedCells(tableNode)) return false;
-
-    const rows = convertTableNodeToArrayOfRows(tableNode);
-    const axes = orientation === "col" ? rows : transpose(rows);
-    if (axes.length < 2) return false;
-
-    return axes.some((cells) => {
-      if (isAllHeader(cells)) return false;
-      const sortCell = cells[index];
-      return !!sortCell && !isCellEmpty(sortCell);
-    });
-  }, [tableNode, orientation, index]);
-
-  const handleSort = useCallback(() => {
-    if (!canSort) return;
-
-    const rows = convertTableNodeToArrayOfRows(tableNode);
-    const axes = orientation === "col" ? rows : transpose(rows);
-
-    const items: SortableItem<(ProseMirrorNode | null)[]>[] = axes.map(
-      (cells, originalOrder) => {
-        const sortCell = cells[index];
-        return {
-          payload: cells,
-          text: sortCell ? getCellSortText(sortCell) : "",
-          isHeader: isAllHeader(cells),
-          isEmpty: !sortCell || isCellEmpty(sortCell),
-          originalOrder,
-        };
-      },
-    );
-
-    const dataItems = items.filter((it) => !it.isHeader);
-    const sortedData = sortItems(dataItems, direction);
-    const woven = weaveItems(items, sortedData);
-
-    const newAxes = woven.map((it) => it.payload);
-    const newRows = orientation === "col" ? newAxes : transpose(newAxes);
-
-    const newTable = convertArrayOfRowsToTableNode(tableNode, newRows);
-
-    const tr = editor.state.tr;
-    tr.replaceWith(tablePos, tablePos + tableNode.nodeSize, newTable);
-
-    if (tr.docChanged) editor.view.dispatch(tr);
-  }, [editor, tableNode, tablePos, orientation, index, direction, canSort]);
-
-  return { canSort, handleSort };
-}

apps/client/src/features/editor/components/table/handle/lib/select-row-column.ts

@@ -1,34 +0,0 @@
-import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
-import type { EditorState } from "@tiptap/pm/state";
-import { CellSelection, TableMap } from "@tiptap/pm/tables";
-
-export type Orientation = "col" | "row";
-
-export function buildRowOrColumnSelection(
-  state: EditorState,
-  tableNode: ProseMirrorNode,
-  tablePos: number,
-  orientation: Orientation,
-  index: number,
-): CellSelection | null {
-  const map = TableMap.get(tableNode);
-  const tableStart = tablePos + 1;
-
-  if (orientation === "col") {
-    if (index < 0 || index >= map.width) return null;
-    const firstCellPos = tableStart + map.map[index];
-    const lastCellPos =
-      tableStart + map.map[(map.height - 1) * map.width + index];
-    const $first = state.doc.resolve(firstCellPos);
-    const $last = state.doc.resolve(lastCellPos);
-    return CellSelection.colSelection($first, $last);
-  }
-
-  if (index < 0 || index >= map.height) return null;
-  const firstCellPos = tableStart + map.map[index * map.width];
-  const lastCellPos =
-    tableStart + map.map[index * map.width + (map.width - 1)];
-  const $first = state.doc.resolve(firstCellPos);
-  const $last = state.doc.resolve(lastCellPos);
-  return CellSelection.rowSelection($first, $last);
-}

apps/client/src/features/editor/components/table/handle/lib/sort-cells.ts

@@ -1,57 +0,0 @@
-import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
-
-export type SortDirection = "asc" | "desc";
-
-export interface SortableItem<T> {
-  payload: T;
-  text: string;
-  isHeader: boolean;
-  isEmpty: boolean;
-  originalOrder: number;
-}
-
-const HEADER_TYPE_NAMES = new Set(["tableHeader", "table_header"]);
-
-export function isHeaderCell(node: ProseMirrorNode): boolean {
-  if (HEADER_TYPE_NAMES.has(node.type.name)) return true;
-  return node.attrs?.header === true;
-}
-
-export function getCellSortText(node: ProseMirrorNode): string {
-  let text = "";
-  node.descendants((child) => {
-    if (child.isText) text += child.text ?? "";
-    return true;
-  });
-  return text.trim().toLowerCase();
-}
-
-export function isCellEmpty(node: ProseMirrorNode): boolean {
-  return getCellSortText(node) === "";
-}
-
-export const collator = new Intl.Collator(undefined, {
-  sensitivity: "base",
-  numeric: true,
-});
-
-export function sortItems<T>(
-  data: SortableItem<T>[],
-  direction: SortDirection,
-): SortableItem<T>[] {
-  return [...data].sort((a, b) => {
-    if (a.isEmpty && !b.isEmpty) return 1;
-    if (!a.isEmpty && b.isEmpty) return -1;
-    if (a.isEmpty && b.isEmpty) return a.originalOrder - b.originalOrder;
-    const cmp = collator.compare(a.text, b.text);
-    return direction === "asc" ? cmp : -cmp;
-  });
-}
-
-export function weaveItems<T>(
-  all: SortableItem<T>[],
-  sortedData: SortableItem<T>[],
-): SortableItem<T>[] {
-  const dataQueue = [...sortedData];
-  return all.map((item) => (item.isHeader ? item : dataQueue.shift()!));
-}

apps/client/src/features/editor/components/table/handle/menus/alignment-submenu.tsx

@@ -1,49 +0,0 @@
-import React from "react";
-import type { Editor } from "@tiptap/react";
-import { Menu } from "@mantine/core";
-import {
-  IconAlignCenter,
-  IconAlignLeft,
-  IconAlignRight,
-} from "@tabler/icons-react";
-import { useTranslation } from "react-i18next";
-
-interface AlignmentSubmenuProps {
-  editor: Editor;
-}
-
-export const AlignmentSubmenu = React.memo(function AlignmentSubmenu({
-  editor,
-}: AlignmentSubmenuProps) {
-  const { t } = useTranslation();
-
-  return (
-    <Menu.Sub position="right-start">
-      <Menu.Sub.Target>
-        <Menu.Sub.Item leftSection={<IconAlignLeft size={16} />}>
-          {t("Text alignment")}
-        </Menu.Sub.Item>
-      </Menu.Sub.Target>
-      <Menu.Sub.Dropdown>
-        <Menu.Item
-          leftSection={<IconAlignLeft size={16} />}
-          onClick={() => editor.chain().focus().setTextAlign("left").run()}
-        >
-          {t("Align left")}
-        </Menu.Item>
-        <Menu.Item
-          leftSection={<IconAlignCenter size={16} />}
-          onClick={() => editor.chain().focus().setTextAlign("center").run()}
-        >
-          {t("Align center")}
-        </Menu.Item>
-        <Menu.Item
-          leftSection={<IconAlignRight size={16} />}
-          onClick={() => editor.chain().focus().setTextAlign("right").run()}
-        >
-          {t("Align right")}
-        </Menu.Item>
-      </Menu.Sub.Dropdown>
-    </Menu.Sub>
-  );
-});

apps/client/src/features/editor/components/table/handle/menus/cell-chevron-menu.tsx

@@ -1,154 +0,0 @@
-import React from "react";
-import type { Editor } from "@tiptap/react";
-import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
-import { ColorSwatch, Menu } from "@mantine/core";
-import {
-  IconBoxMargin,
-  IconColumnInsertRight,
-  IconColumnRemove,
-  IconEraser,
-  IconPalette,
-  IconRowInsertBottom,
-  IconRowRemove,
-  IconSquareToggle,
-  IconTableRow,
-} from "@tabler/icons-react";
-import { useTranslation } from "react-i18next";
-import { useTableClear } from "../hooks/use-table-clear";
-import { TABLE_COLORS } from "../../table-background-color";
-import { AlignmentSubmenu } from "./alignment-submenu";
-
-interface CellChevronMenuProps {
-  editor: Editor;
-  cellPos: number;
-  tableNode: ProseMirrorNode;
-  tablePos: number;
-}
-
-export const CellChevronMenu = React.memo(function CellChevronMenu({
-  editor,
-  cellPos,
-  tableNode,
-  tablePos,
-}: CellChevronMenuProps) {
-  const { t } = useTranslation();
-
-  const clearCell = useTableClear(editor, tableNode, tablePos, {
-    kind: "cell",
-    cellPos,
-  });
-
-  const setBackground = (color: string, name: string) => {
-    editor
-      .chain()
-      .focus()
-      .updateAttributes("tableCell", {
-        backgroundColor: color || null,
-        backgroundColorName: color ? name : null,
-      })
-      .updateAttributes("tableHeader", {
-        backgroundColor: color || null,
-        backgroundColorName: color ? name : null,
-      })
-      .run();
-  };
-
-  return (
-    <>
-      <Menu.Sub position="right-start">
-        <Menu.Sub.Target>
-          <Menu.Sub.Item leftSection={<IconPalette size={16} />}>
-            {t("Background color")}
-          </Menu.Sub.Item>
-        </Menu.Sub.Target>
-        <Menu.Sub.Dropdown>
-          <div
-            style={{
-              display: "grid",
-              gridTemplateColumns: "repeat(4, 1fr)",
-              gap: 8,
-              padding: 8,
-            }}
-          >
-            {TABLE_COLORS.map((c) => (
-              <button
-                key={c.name}
-                type="button"
-                onClick={() => setBackground(c.color, c.name)}
-                aria-label={t(c.name)}
-                style={{
-                  border: "none",
-                  background: "transparent",
-                  padding: 0,
-                  cursor: "pointer",
-                }}
-              >
-                <ColorSwatch
-                  color={c.color || "#ffffff"}
-                  size={22}
-                  style={{
-                    border: c.color === "" ? "1px solid #e5e7eb" : undefined,
-                  }}
-                />
-              </button>
-            ))}
-          </div>
-        </Menu.Sub.Dropdown>
-      </Menu.Sub>
-
-      <AlignmentSubmenu editor={editor} />
-
-      <Menu.Item
-        leftSection={<IconBoxMargin size={16} />}
-        onClick={() => editor.chain().focus().mergeCells().run()}
-        disabled={!editor.can().mergeCells()}
-      >
-        {t("Merge cells")}
-      </Menu.Item>
-      <Menu.Item
-        leftSection={<IconSquareToggle size={16} />}
-        onClick={() => editor.chain().focus().splitCell().run()}
-        disabled={!editor.can().splitCell()}
-      >
-        {t("Split cell")}
-      </Menu.Item>
-      <Menu.Item
-        leftSection={<IconTableRow size={16} />}
-        onClick={() => editor.chain().focus().toggleHeaderCell().run()}
-      >
-        {t("Toggle header cell")}
-      </Menu.Item>
-
-      <Menu.Divider />
-
-      <Menu.Item
-        leftSection={<IconColumnInsertRight size={16} />}
-        onClick={() => editor.chain().focus().addColumnAfter().run()}
-      >
-        {t("Add column right")}
-      </Menu.Item>
-      <Menu.Item
-        leftSection={<IconRowInsertBottom size={16} />}
-        onClick={() => editor.chain().focus().addRowAfter().run()}
-      >
-        {t("Add row below")}
-      </Menu.Item>
-
-      <Menu.Item leftSection={<IconEraser size={16} />} onClick={clearCell}>
-        {t("Clear cell")}
-      </Menu.Item>
-      <Menu.Item
-        leftSection={<IconColumnRemove size={16} />}
-        onClick={() => editor.chain().focus().deleteColumn().run()}
-      >
-        {t("Delete column")}
-      </Menu.Item>
-      <Menu.Item
-        leftSection={<IconRowRemove size={16} />}
-        onClick={() => editor.chain().focus().deleteRow().run()}
-      >
-        {t("Delete row")}
-      </Menu.Item>
-    </>
-  );
-});

apps/client/src/features/editor/components/table/handle/menus/column-handle-menu.tsx

@@ -1,177 +0,0 @@
-import React from "react";
-import type { Editor } from "@tiptap/react";
-import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
-import { ColorSwatch, Menu } from "@mantine/core";
-import { TABLE_COLORS } from "../../table-background-color";
-import {
-  IconArrowLeft,
-  IconArrowRight,
-  IconColumnInsertLeft,
-  IconColumnInsertRight,
-  IconColumnRemove,
-  IconEraser,
-  IconPalette,
-  IconSortAscendingLetters,
-  IconSortDescendingLetters,
-} from "@tabler/icons-react";
-import { useTranslation } from "react-i18next";
-import { useTableMoveRowColumn } from "../hooks/use-table-move-row-column";
-import { useTableClear } from "../hooks/use-table-clear";
-import { useTableSort } from "../hooks/use-table-sort";
-import { AlignmentSubmenu } from "./alignment-submenu";
-
-interface ColumnHandleMenuProps {
-  editor: Editor;
-  index: number;
-  tableNode: ProseMirrorNode;
-  tablePos: number;
-}
-
-export const ColumnHandleMenu = React.memo(function ColumnHandleMenu({
-  editor,
-  index,
-  tableNode,
-  tablePos,
-}: ColumnHandleMenuProps) {
-  const { t } = useTranslation();
-
-  const moveLeft = useTableMoveRowColumn(editor, "col", index, "left", tableNode, tablePos);
-  const moveRight = useTableMoveRowColumn(editor, "col", index, "right", tableNode, tablePos);
-  const clearCol = useTableClear(editor, tableNode, tablePos, {
-    kind: "col",
-    index,
-  });
-
-  const setBackground = (color: string, name: string) => {
-    editor
-      .chain()
-      .focus()
-      .updateAttributes("tableCell", {
-        backgroundColor: color || null,
-        backgroundColorName: color ? name : null,
-      })
-      .updateAttributes("tableHeader", {
-        backgroundColor: color || null,
-        backgroundColorName: color ? name : null,
-      })
-      .run();
-  };
-
-  const sortAsc = useTableSort({
-    editor,
-    orientation: "col",
-    index,
-    tableNode,
-    tablePos,
-    direction: "asc",
-  });
-  const sortDesc = useTableSort({
-    editor,
-    orientation: "col",
-    index,
-    tableNode,
-    tablePos,
-    direction: "desc",
-  });
-
-  return (
-    <>
-      <Menu.Item
-        leftSection={<IconSortAscendingLetters size={16} />}
-        onClick={sortAsc.handleSort}
-        disabled={!sortAsc.canSort}
-      >
-        {t("Sort A → Z")}
-      </Menu.Item>
-      <Menu.Item
-        leftSection={<IconSortDescendingLetters size={16} />}
-        onClick={sortDesc.handleSort}
-        disabled={!sortDesc.canSort}
-      >
-        {t("Sort Z → A")}
-      </Menu.Item>
-      <Menu.Divider />
-
-      <Menu.Sub position="right-start">
-        <Menu.Sub.Target>
-          <Menu.Sub.Item leftSection={<IconPalette size={16} />}>
-            {t("Background color")}
-          </Menu.Sub.Item>
-        </Menu.Sub.Target>
-        <Menu.Sub.Dropdown>
-          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 8, padding: 8 }}>
-            {TABLE_COLORS.map((c) => (
-              <button
-                key={c.name}
-                type="button"
-                onClick={() => setBackground(c.color, c.name)}
-                aria-label={t(c.name)}
-                style={{
-                  border: "none",
-                  background: "transparent",
-                  padding: 0,
-                  cursor: "pointer",
-                }}
-              >
-                <ColorSwatch
-                  color={c.color || "#ffffff"}
-                  size={22}
-                  style={{ border: c.color === "" ? "1px solid #e5e7eb" : undefined }}
-                />
-              </button>
-            ))}
-          </div>
-        </Menu.Sub.Dropdown>
-      </Menu.Sub>
-
-      <AlignmentSubmenu editor={editor} />
-
-      <Menu.Divider />
-
-      <Menu.Item
-        leftSection={<IconColumnInsertLeft size={16} />}
-        onClick={() => editor.chain().focus().addColumnBefore().run()}
-      >
-        {t("Add column left")}
-      </Menu.Item>
-      <Menu.Item
-        leftSection={<IconColumnInsertRight size={16} />}
-        onClick={() => editor.chain().focus().addColumnAfter().run()}
-      >
-        {t("Add column right")}
-      </Menu.Item>
-
-      <Menu.Divider />
-
-      <Menu.Item
-        leftSection={<IconEraser size={16} />}
-        onClick={clearCol}
-      >
-        {t("Clear cells")}
-      </Menu.Item>
-      <Menu.Item
-        leftSection={<IconColumnRemove size={16} />}
-        onClick={() => editor.chain().focus().deleteColumn().run()}
-      >
-        {t("Delete column")}
-      </Menu.Item>
-
-      <Menu.Divider />
-
-      <Menu.Item
-        leftSection={<IconArrowLeft size={16} />}
-        onClick={moveLeft.handleMove}
-        disabled={!moveLeft.canMove}
-      >
-        {t("Move column left")}
-      </Menu.Item>
-      <Menu.Item
-        leftSection={<IconArrowRight size={16} />}
-        onClick={moveRight.handleMove}
-        disabled={!moveRight.canMove}
-      >
-        {t("Move column right")}
-      </Menu.Item>
-    </>
-  );
-});

apps/client/src/features/editor/components/table/handle/menus/row-handle-menu.tsx

@@ -1,138 +0,0 @@
-import React from "react";
-import type { Editor } from "@tiptap/react";
-import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
-import { ColorSwatch, Menu } from "@mantine/core";
-import { TABLE_COLORS } from "../../table-background-color";
-import {
-  IconArrowDown,
-  IconArrowUp,
-  IconEraser,
-  IconPalette,
-  IconRowInsertBottom,
-  IconRowInsertTop,
-  IconRowRemove,
-} from "@tabler/icons-react";
-import { useTranslation } from "react-i18next";
-import { useTableMoveRowColumn } from "../hooks/use-table-move-row-column";
-import { useTableClear } from "../hooks/use-table-clear";
-import { AlignmentSubmenu } from "./alignment-submenu";
-
-interface RowHandleMenuProps {
-  editor: Editor;
-  index: number;
-  tableNode: ProseMirrorNode;
-  tablePos: number;
-}
-
-export const RowHandleMenu = React.memo(function RowHandleMenu({
-  editor,
-  index,
-  tableNode,
-  tablePos,
-}: RowHandleMenuProps) {
-  const { t } = useTranslation();
-
-  const setBackground = (color: string, name: string) => {
-    editor
-      .chain()
-      .focus()
-      .updateAttributes("tableCell", {
-        backgroundColor: color || null,
-        backgroundColorName: color ? name : null,
-      })
-      .updateAttributes("tableHeader", {
-        backgroundColor: color || null,
-        backgroundColorName: color ? name : null,
-      })
-      .run();
-  };
-
-  const moveUp = useTableMoveRowColumn(editor, "row", index, "up", tableNode, tablePos);
-  const moveDown = useTableMoveRowColumn(editor, "row", index, "down", tableNode, tablePos);
-  const clearRow = useTableClear(editor, tableNode, tablePos, {
-    kind: "row",
-    index,
-  });
-
-  return (
-    <>
-      <Menu.Sub position="right-start">
-        <Menu.Sub.Target>
-          <Menu.Sub.Item leftSection={<IconPalette size={16} />}>
-            {t("Background color")}
-          </Menu.Sub.Item>
-        </Menu.Sub.Target>
-        <Menu.Sub.Dropdown>
-          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 8, padding: 8 }}>
-            {TABLE_COLORS.map((c) => (
-              <button
-                key={c.name}
-                type="button"
-                onClick={() => setBackground(c.color, c.name)}
-                aria-label={t(c.name)}
-                style={{
-                  border: "none",
-                  background: "transparent",
-                  padding: 0,
-                  cursor: "pointer",
-                }}
-              >
-                <ColorSwatch
-                  color={c.color || "#ffffff"}
-                  size={22}
-                  style={{ border: c.color === "" ? "1px solid #e5e7eb" : undefined }}
-                />
-              </button>
-            ))}
-          </div>
-        </Menu.Sub.Dropdown>
-      </Menu.Sub>
-
-      <AlignmentSubmenu editor={editor} />
-
-      <Menu.Divider />
-
-      <Menu.Item
-        leftSection={<IconRowInsertTop size={16} />}
-        onClick={() => editor.chain().focus().addRowBefore().run()}
-      >
-        {t("Add row above")}
-      </Menu.Item>
-      <Menu.Item
-        leftSection={<IconRowInsertBottom size={16} />}
-        onClick={() => editor.chain().focus().addRowAfter().run()}
-      >
-        {t("Add row below")}
-      </Menu.Item>
-
-      <Menu.Divider />
-
-      <Menu.Item leftSection={<IconEraser size={16} />} onClick={clearRow}>
-        {t("Clear cells")}
-      </Menu.Item>
-      <Menu.Item
-        leftSection={<IconRowRemove size={16} />}
-        onClick={() => editor.chain().focus().deleteRow().run()}
-      >
-        {t("Delete row")}
-      </Menu.Item>
-
-      <Menu.Divider />
-
-      <Menu.Item
-        leftSection={<IconArrowUp size={16} />}
-        onClick={moveUp.handleMove}
-        disabled={!moveUp.canMove}
-      >
-        {t("Move row up")}
-      </Menu.Item>
-      <Menu.Item
-        leftSection={<IconArrowDown size={16} />}
-        onClick={moveDown.handleMove}
-        disabled={!moveDown.canMove}
-      >
-        {t("Move row down")}
-      </Menu.Item>
-    </>
-  );
-});

apps/client/src/features/editor/components/table/handle/row-handle.tsx

@@ -1,122 +0,0 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
-import type { Editor } from "@tiptap/react";
-import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
-import { useFloating, offset, autoUpdate, hide } from "@floating-ui/react";
-import { Menu } from "@mantine/core";
-import clsx from "clsx";
-import { useTranslation } from "react-i18next";
-import { useTableHandleDrag } from "./hooks/use-table-handle-drag";
-import { useColumnRowMenuLifecycle } from "./hooks/use-column-row-menu-lifecycle";
-import { RowHandleMenu } from "./menus/row-handle-menu";
-import classes from "./handle.module.css";
-
-interface RowHandleProps {
-  editor: Editor;
-  index: number;
-  anchorPos: number;
-  tableNode: ProseMirrorNode;
-  tablePos: number;
-}
-
-export const RowHandle = React.memo(function RowHandle({
-  editor,
-  index,
-  anchorPos,
-  tableNode,
-  tablePos,
-}: RowHandleProps) {
-  const { t } = useTranslation();
-  // See ColumnHandle for the rationale: keep the last valid cell DOM cached
-  // so the handle div stays mounted across stale-anchor renders, otherwise
-  // pragmatic-dnd silently aborts an in-flight drag.
-  const lookupCellDom = editor.view.nodeDOM(anchorPos) as HTMLElement | null;
-  const [cellDom, setCellDom] = useState<HTMLElement | null>(lookupCellDom);
-  const lastCellDomRef = useRef<HTMLElement | null>(lookupCellDom);
-  useEffect(() => {
-    if (lookupCellDom && lookupCellDom !== lastCellDomRef.current) {
-      lastCellDomRef.current = lookupCellDom;
-      setCellDom(lookupCellDom);
-    }
-  }, [lookupCellDom]);
-
-  const [handleEl, setHandleEl] = useState<HTMLDivElement | null>(null);
-
-  const { refs, floatingStyles, middlewareData } = useFloating({
-    placement: "left",
-    middleware: [offset(-4), hide()],
-    whileElementsMounted: autoUpdate,
-  });
-  const isReferenceHidden = !!middlewareData.hide?.referenceHidden;
-
-  useEffect(() => {
-    refs.setReference(cellDom);
-  }, [cellDom, refs]);
-
-  const wrapper = cellDom?.closest<HTMLElement>(".tableWrapper") ?? null;
-
-  const [menuOpened, setMenuOpened] = useState(false);
-  const closeMenu = useCallback(() => setMenuOpened(false), []);
-  useTableHandleDrag(editor, "row", handleEl, wrapper, closeMenu);
-
-  const { onOpen, onClose } = useColumnRowMenuLifecycle({
-    editor,
-    orientation: "row",
-    index,
-    tableNode,
-    tablePos,
-  });
-
-  if (!cellDom) return null;
-
-  return (
-    <Menu
-      opened={menuOpened}
-      onChange={setMenuOpened}
-      position="right-start"
-      onOpen={onOpen}
-      onClose={onClose}
-      withinPortal
-      shadow="md"
-    >
-      <Menu.Target>
-        <div
-          ref={(node) => {
-            refs.setFloating(node);
-            setHandleEl(node);
-          }}
-          style={{
-            ...floatingStyles,
-            ...(isReferenceHidden ? { visibility: "hidden" as const } : {}),
-          }}
-          className={clsx(classes.handle, classes.rowHandle)}
-          role="button"
-          tabIndex={0}
-          aria-label={t("Row actions")}
-        >
-          <span style={{ pointerEvents: "none", display: "inline-flex" }}>
-            <GripIcon />
-          </span>
-        </div>
-      </Menu.Target>
-      <Menu.Dropdown>
-        <RowHandleMenu
-          editor={editor}
-          index={index}
-          tableNode={tableNode}
-          tablePos={tablePos}
-        />
-      </Menu.Dropdown>
-    </Menu>
-  );
-});
-
-function GripIcon() {
-  return (
-    <svg viewBox="0 0 10 10" width="14" height="14" aria-hidden>
-      <path
-        fill="currentColor"
-        d="M3,2 A1,1 0 1 1 3,0 A1,1 0 0 1 3,2 Z M3,6 A1,1 0 1 1 3,4 A1,1 0 0 1 3,6 Z M3,10 A1,1 0 1 1 3,8 A1,1 0 0 1 3,10 Z M7,2 A1,1 0 1 1 7,0 A1,1 0 0 1 7,2 Z M7,6 A1,1 0 1 1 7,4 A1,1 0 0 1 7,6 Z M7,10 A1,1 0 1 1 7,8 A1,1 0 0 1 7,10 Z"
-      />
-    </svg>
-  );
-}

apps/client/src/features/editor/components/table/handle/table-handles-layer.tsx

@@ -1,44 +0,0 @@
-import React from "react";
-import type { Editor } from "@tiptap/react";
-import { useTableHandleState } from "./hooks/use-table-handle-state";
-import { ColumnHandle } from "./column-handle";
-import { RowHandle } from "./row-handle";
-import { CellChevron } from "./cell-chevron";
-
-interface TableHandlesLayerProps {
-  editor: Editor | null;
-}
-
-export const TableHandlesLayer = React.memo(function TableHandlesLayer({
-  editor,
-}: TableHandlesLayerProps) {
-  const state = useTableHandleState(editor);
-
-  if (!editor || !editor.isEditable) return null;
-  if (!state.hoveringCell || !state.tableNode || state.tablePos == null) return null;
-
-  return (
-    <>
-      <ColumnHandle
-        editor={editor}
-        index={state.hoveringCell.colIndex}
-        anchorPos={state.hoveringCell.colFirstCellPos}
-        tableNode={state.tableNode!}
-        tablePos={state.tablePos!}
-      />
-      <RowHandle
-        editor={editor}
-        index={state.hoveringCell.rowIndex}
-        anchorPos={state.hoveringCell.rowFirstCellPos}
-        tableNode={state.tableNode!}
-        tablePos={state.tablePos!}
-      />
-      <CellChevron
-        editor={editor}
-        cellPos={state.hoveringCell.cellPos}
-        tableNode={state.tableNode!}
-        tablePos={state.tablePos!}
-      />
-    </>
-  );
-});

apps/client/src/features/editor/components/table/table-background-color.tsx

@@ -22,7 +22,7 @@ interface TableBackgroundColorProps {
   editor: Editor | null;
 }
 
-export const TABLE_COLORS: TableColorItem[] = [
+const TABLE_COLORS: TableColorItem[] = [
   { name: "Default", color: "" },
   { name: "Blue", color: "#b4d5ff" },
   { name: "Green", color: "#acf5d2" },

apps/client/src/features/editor/components/table/table-menu.tsx

@@ -104,12 +104,12 @@ export const TableMenu = React.memo(
           element.style.zIndex = "99";
         }}
         options={{
-          placement: "bottom",
+          placement: "top",
           offset: {
             mainAxis: 15,
           },
           flip: {
-            fallbackPlacements: ["bottom", "top"],
+            fallbackPlacements: ["top", "bottom"],
             padding: { top: 35 + 15, left: 8, right: 8, bottom: -Infinity },
             boundary: editor.options.element as HTMLElement,
           },

apps/client/src/features/editor/components/table/table-text-alignment.tsx

@@ -86,11 +86,11 @@ export const TableTextAlignment: FC<TableTextAlignmentProps> = ({ editor }) => {
       transitionProps={{ transition: "pop" }}
     >
       <Popover.Target>
-        <Tooltip label={t("Text align")} withArrow>
+        <Tooltip label={t("Text alignment")} withArrow>
           <ActionIcon
             variant="subtle"
             size="lg"
-            aria-label={t("Text align")}
+            aria-label={t("Text alignment")}
             onClick={() => setOpened(!opened)}
           >
             <activeItem.icon size={18} />

apps/client/src/features/editor/components/transclusion/transclusion-reference-view.tsx

@@ -35,7 +35,6 @@ export default function TransclusionReferenceView(props: NodeViewProps) {
   return (
     <NodeViewWrapper
       className={classes.includeWrap}
-      data-editable={isEditable ? "true" : "false"}
       data-focused={isEditable && props.selected ? "true" : "false"}
       data-menu-open={openMenus > 0 ? "true" : "false"}
       contentEditable={false}

apps/client/src/features/editor/components/transclusion/transclusion-view.tsx

@@ -62,7 +62,6 @@ export default function TransclusionView(props: NodeViewProps) {
   return (
     <NodeViewWrapper
       className={classes.transclusionWrap}
-      data-editable={isEditable ? "true" : "false"}
       data-menu-open={openMenus > 0 ? "true" : "false"}
       data-id={transclusionId ?? undefined}
     >

apps/client/src/features/editor/components/transclusion/transclusion.module.css

@@ -44,29 +44,8 @@
   transition: border 0.3s;
 }
 
-.transclusionWrap[data-editable="false"],
+.transclusionWrap:hover,
-.includeWrap[data-editable="false"] {
+.transclusionWrap:focus-within {
-  margin-left: 0;
-  margin-right: 0;
-  width: 100%;
-  padding: 0;
-}
-
-/* Cancel the wrapping .react-renderer's vertical spacing in read-only mode
-   so the synced block sits flush with surrounding paragraphs (whose own
-   margins already provide the right rhythm). */
-:global(.react-renderer.node-transclusionSource):has(
-    .transclusionWrap[data-editable="false"]
-  ),
-:global(.react-renderer.node-transclusionReference):has(
-    .includeWrap[data-editable="false"]
-  ) {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.transclusionWrap[data-editable="true"]:hover,
-.transclusionWrap[data-editable="true"]:focus-within {
   border: 2px solid
     light-dark(
       var(--mantine-color-orange-2),
@@ -135,9 +114,9 @@
   transition: border 0.3s;
 }
 
-.includeWrap[data-editable="true"]:hover,
+.includeWrap:hover,
-.includeWrap[data-editable="true"][data-focused="true"],
+.includeWrap[data-focused="true"],
-.includeWrap[data-editable="true"][data-menu-open="true"] {
+.includeWrap[data-menu-open="true"] {
   border: 2px solid
     light-dark(
       var(--mantine-color-orange-2),

apps/client/src/features/editor/extensions/drag-handle.ts

@@ -60,23 +60,6 @@ function nodeDOMAtCoords(
   options: GlobalDragHandleOptions,
   view: EditorView,
 ) {
-  // Custom nodes (transclusion, …) render via tiptap's React node-view
-  // renderer, which emits `class="react-renderer node-${name}"` on the
-  // live wrapper — the `data-type` attribute is for static HTML
-  // serialization only. Match both so we cover live and parsed DOM.
-  // Inside a custom node, also match plain `p` so the first paragraph
-  // (which doesn't match `:not(:first-child)`) still gets its own
-  // handle; only hovers on the custom node's padding/border fall
-  // through to the wrapper.
-  const customSelectors = options.customNodes.flatMap((node) => [
-    `[data-type=${node}]`,
-    `.node-${node}`,
-  ]);
-  const customParagraphSelectors = options.customNodes.flatMap((node) => [
-    `[data-type=${node}] p`,
-    `.node-${node} p`,
-  ]);
-
   const selectors = [
     "li",
     "p:not(:first-child)",
@@ -88,13 +71,7 @@ function nodeDOMAtCoords(
     "h4",
     "h5",
     "h6",
-    // Tables nested in another block (toggle, transclusion, …) have a
+    ...options.customNodes.map((node) => `[data-type=${node}]`),
-    // wrapper that isn't a direct child of .ProseMirror, so the
-    // parent-check below skips it. Match the wrapper explicitly so the
-    // handle shows up even with empty cells.
-    ".tableWrapper",
-    ...customParagraphSelectors,
-    ...customSelectors,
   ].join(", ");
   return document
     .elementsFromPoint(coords.x, coords.y)
@@ -122,22 +99,6 @@ function nodePosAtDOM(
   })?.inside;
 }
 
-function isCustomNodeDOM(
-  elem: Element | null | undefined,
-  options: GlobalDragHandleOptions,
-): boolean {
-  if (!elem) return false;
-  for (const name of options.customNodes) {
-    if (
-      elem.getAttribute("data-type") === name ||
-      elem.classList.contains(`node-${name}`)
-    ) {
-      return true;
-    }
-  }
-  return false;
-}
-
 function calcNodePos(pos: number, view: EditorView) {
   const $pos = view.state.doc.resolve(pos);
   if ($pos.depth > 1) return $pos.before($pos.depth);
@@ -176,6 +137,7 @@ export function DragHandlePlugin(
 
     const nodePos = view.state.doc.resolve(fromSelectionPos);
 
+    // Check if nodePos points to the top level node
     if (nodePos.node().type.name === "doc") differentNodeSelected = true;
     else {
       const nodeSelection = NodeSelection.create(
@@ -204,46 +166,14 @@ export function DragHandlePlugin(
     } else {
       selection = NodeSelection.create(view.state.doc, draggedNodePos);
 
-      const $sel = view.state.doc.resolve(selection.from);
+      // if inline node is selected, e.g mention -> go to the parent node to select the whole node
-
+      // if table row is selected, go to the parent node to select the whole node
-      if (isCustomNodeDOM(node, options)) {
+      if (
-        // The drag landed on a custom-node container (transclusion etc.).
+        (selection as NodeSelection).node.type.isInline ||
-        // Walk up to the matching node so the drag moves the whole
+        (selection as NodeSelection).node.type.name === "tableRow"
-        // container, not whatever inner element the click landed on.
+      ) {
-        const customTypes = new Set(options.customNodes);
+        let $pos = view.state.doc.resolve(selection.from);
-        for (let d = $sel.depth; d > 0; d--) {
+        selection = NodeSelection.create(view.state.doc, $pos.before());
-          if (customTypes.has($sel.node(d).type.name)) {
-            selection = NodeSelection.create(
-              view.state.doc,
-              $sel.before(d),
-            );
-            break;
-          }
-        }
-      } else {
-        // If the selected node lives inside a table (at any nesting
-        // depth), promote to the whole table — the global drag handle is
-        // meant to move the table as a single block, not a row/cell. The
-        // earlier tableRow-only check only worked when the table sat at
-        // the doc root; once wrapped in another node (toggle, layout,
-        // etc.) the selection lands on a cell/paragraph and that check
-        // never fired.
-        let tableDepth = -1;
-        for (let d = $sel.depth; d > 0; d--) {
-          if ($sel.node(d).type.name === "table") {
-            tableDepth = d;
-            break;
-          }
-        }
-        if (tableDepth > 0) {
-          selection = NodeSelection.create(
-            view.state.doc,
-            $sel.before(tableDepth),
-          );
-        } else if ((selection as NodeSelection).node.type.isInline) {
-          // Inline node (e.g. mention): walk up to the parent block.
-          selection = NodeSelection.create(view.state.doc, $sel.before());
-        }
       }
     }
     view.dispatch(view.state.tr.setSelection(selection));
@@ -383,27 +313,6 @@ export function DragHandlePlugin(
             return;
           }
 
-          const isCustomNode = isCustomNodeDOM(node, options);
-
-          // Custom nodes pin the handle to the inner NodeViewWrapper's top-left:
-          // the natural anchor sits in transient/empty space outside the visible block.
-          if (isCustomNode) {
-            // tiptap React node-views emit an outer `.react-renderer` whose first
-            // child is the visible NodeViewWrapper; walk to that outer first since
-            // `node` may be either the outer or an inner element with data-type.
-            const rendererOuter =
-              (node.closest(".react-renderer") as HTMLElement | null) ?? node;
-            const inner =
-              (rendererOuter.firstElementChild as HTMLElement | null) ??
-              rendererOuter;
-            const innerRect = absoluteRect(inner);
-            if (!dragHandleElement) return;
-            dragHandleElement.style.left = `${innerRect.left + 4}px`;
-            dragHandleElement.style.top = `${innerRect.top + 4}px`;
-            showDragHandle();
-            return;
-          }
-
           const compStyle = window.getComputedStyle(node);
           const parsedLineHeight = parseInt(compStyle.lineHeight, 10);
           const lineHeight = isNaN(parsedLineHeight)
@@ -419,13 +328,6 @@ export function DragHandlePlugin(
           if (node.matches("ul:not([data-type=taskList]) li, ol li")) {
             rect.left -= options.dragHandleWidth;
           }
-          // Tables: clear the table's own row-drag handle so the two
-          // grips don't stack on each other. `nodeDOMAtCoords` returns
-          // the wrapper for top-level hovers (wrapper is direct child of
-          // .ProseMirror) and a descendant for deeper hovers — cover both.
-          if (node.closest(".tableWrapper")) {
-            rect.left -= options.dragHandleWidth;
-          }
           rect.width = options.dragHandleWidth;
 
           if (!dragHandleElement) return;

apps/client/src/features/editor/extensions/extensions.ts

@@ -42,13 +42,9 @@ import {
   Excalidraw,
   Embed,
   TiptapPdf,
-  PageBreak,
   SearchAndReplace,
   Mention,
   TableDndExtension,
-  TableHandleCommandsExtension,
-  TableHeaderPin,
-  TableReadonlySort,
   Subpages,
   Heading,
   Highlight,
@@ -60,7 +56,6 @@ import {
   Status,
   TransclusionSource,
   TransclusionReference,
-  TableView,
 } from "@docmost/editor-ext";
 import {
   randomElement,
@@ -264,16 +259,11 @@ export const mainExtensions = [
     resizable: true,
     lastColumnResizable: true,
     allowTableNodeSelection: true,
-    cellMinWidth: 49,
-    View: TableView,
   }),
   TableRow,
   TableCell,
   TableHeader,
   TableDndExtension,
-  TableHandleCommandsExtension,
-  TableHeaderPin,
-  TableReadonlySort,
   MathInline.configure({
     view: MathInlineView,
   }),
@@ -367,7 +357,6 @@ export const mainExtensions = [
   TiptapPdf.configure({
     view: PdfView,
   }),
-  PageBreak,
   Subpages.configure({
     view: SubpagesView,
   }),

apps/client/src/features/editor/full-editor.tsx

@@ -1,47 +1,32 @@
 import classes from "@/features/editor/styles/editor.module.css";
-import React, { useEffect } from "react";
+import React from "react";
 import { TitleEditor } from "@/features/editor/title-editor";
 import PageEditor from "@/features/editor/page-editor";
 import {
-  ActionIcon,
   Container,
   Divider,
   Group,
   Popover,
   Stack,
   Text,
-  Tooltip,
   UnstyledButton,
 } from "@mantine/core";
-import { IconInfoCircle } from "@tabler/icons-react";
 import { useAtom } from "jotai";
 import { userAtom } from "@/features/user/atoms/current-user-atom.ts";
 import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
 import { PageVerificationBadge } from "@/ee/page-verification";
 import { useTranslation } from "react-i18next";
 import { IContributor } from "@/features/page/types/page.types.ts";
-import { FixedToolbar } from "@/features/editor/components/fixed-toolbar/fixed-toolbar";
-import { PageEditMode } from "@/features/user/types/user.types.ts";
-import useToggleAside from "@/hooks/use-toggle-aside.tsx";
-import { DeletedPageBanner } from "@/features/page/trash/components/deleted-page-banner.tsx";
-import clsx from "clsx";
-import { currentPageEditModeAtom } from "@/features/editor/atoms/editor-atoms.ts";
 
 const MemoizedTitleEditor = React.memo(TitleEditor);
 const MemoizedPageEditor = React.memo(PageEditor);
-const MemoizedFixedToolbar = React.memo(FixedToolbar);
-const MemoizedDeletedPageBanner = React.memo(DeletedPageBanner);
 
-type PageUser = {
+type PageCreator = {
   id: string;
   name: string;
   avatarUrl: string;
 };
 
-// Module-level flag: survives component unmount/remount on page navigation,
-// reset only on full page reload (i.e. a new app session).
-let defaultEditModeApplied = false;
-
 export interface FullEditorProps {
   pageId: string;
   slugId: string;
@@ -49,7 +34,7 @@ export interface FullEditorProps {
   content: string;
   spaceSlug: string;
   editable: boolean;
-  creator?: PageUser;
+  creator?: PageCreator;
   contributors?: IContributor[];
   canComment?: boolean;
 }
@@ -67,23 +52,6 @@ export function FullEditor({
 }: FullEditorProps) {
   const [user] = useAtom(userAtom);
   const fullPageWidth = user.settings?.preferences?.fullPageWidth;
-  const editorToolbarEnabled =
-    user.settings?.preferences?.editorToolbar ?? false;
-  const [currentPageEditMode, setCurrentPageEditMode] = useAtom(
-    currentPageEditModeAtom,
-  );
-  const userPageEditMode =
-    user.settings?.preferences?.pageEditMode ?? PageEditMode.Edit;
-  const isEditMode = currentPageEditMode === PageEditMode.Edit;
-
-  // Apply the user's saved preference only once on initial load, not on every
-  // page navigation — so the mode sticks across navigations within a session.
-  useEffect(() => {
-    if (!defaultEditModeApplied) {
-      setCurrentPageEditMode(userPageEditMode as PageEditMode);
-      defaultEditModeApplied = true;
-    }
-  }, [userPageEditMode, setCurrentPageEditMode]);
 
   return (
     <Container
@@ -91,10 +59,6 @@ export function FullEditor({
       size={!fullPageWidth && 900}
       className={classes.editor}
     >
-      {editorToolbarEnabled && editable && isEditMode && (
-        <MemoizedFixedToolbar />
-      )}
-      <MemoizedDeletedPageBanner slugId={slugId} />
       <MemoizedTitleEditor
         pageId={pageId}
         slugId={slugId}
@@ -118,14 +82,17 @@ export function FullEditor({
 }
 
 type PageBylineProps = {
-  creator?: PageUser;
+  creator?: PageCreator;
   contributors?: IContributor[];
   readOnly?: boolean;
 };
 
-function PageByline({ creator, contributors, readOnly }: PageBylineProps) {
+function PageByline({
+  creator,
+  contributors,
+  readOnly,
+}: PageBylineProps) {
   const { t } = useTranslation();
-  const toggleAside = useToggleAside();
 
   const otherContributors = (contributors ?? []).filter(
     (c) => c.id !== creator?.id,
@@ -135,8 +102,8 @@ function PageByline({ creator, contributors, readOnly }: PageBylineProps) {
     <Group
       gap="sm"
       mb="md"
-      className={clsx("print-hide", classes.byline)}
+      className="print-hide"
-      style={{ marginTop: "-0.5em" }}
+      style={{ marginTop: "-0.5em", paddingLeft: "3rem" }}
     >
       {creator && (
         <Popover position="bottom-start" shadow="md" width={280} withArrow>
@@ -198,17 +165,6 @@ function PageByline({ creator, contributors, readOnly }: PageBylineProps) {
           </Popover.Dropdown>
         </Popover>
       )}
-      <Tooltip label={t("Details")} withArrow openDelay={250}>
-        <ActionIcon
-          variant="subtle"
-          color="gray"
-          aria-label={t("Details")}
-          onClick={() => toggleAside("details")}
-        >
-          <IconInfoCircle size={20} stroke={1.5} />
-        </ActionIcon>
-      </Tooltip>
-
       <PageVerificationBadge readOnly={readOnly} />
     </Group>
   );

apps/client/src/features/editor/page-editor.tsx

@@ -26,11 +26,10 @@ import {
   collabExtensions,
   mainExtensions,
 } from "@/features/editor/extensions/extensions";
-import { useAtom, useAtomValue } from "jotai";
+import { useAtom } from "jotai";
 import useCollaborationUrl from "@/features/editor/hooks/use-collaboration-url";
 import { currentUserAtom } from "@/features/user/atoms/current-user-atom";
 import {
-  currentPageEditModeAtom,
   pageEditorAtom,
   yjsConnectionStatusAtom,
 } from "@/features/editor/atoms/editor-atoms";
@@ -45,7 +44,6 @@ import { EditorBubbleMenu } from "@/features/editor/components/bubble-menu/bubbl
 import { ReadonlyBubbleMenu } from "@/features/editor/components/bubble-menu/readonly-bubble-menu";
 import TableCellMenu from "@/features/editor/components/table/table-cell-menu.tsx";
 import TableMenu from "@/features/editor/components/table/table-menu.tsx";
-import { TableHandlesLayer } from "@/features/editor/components/table/handle/table-handles-layer";
 import ImageMenu from "@/features/editor/components/image/image-menu.tsx";
 import CalloutMenu from "@/features/editor/components/callout/callout-menu.tsx";
 import VideoMenu from "@/features/editor/components/video/video-menu.tsx";
@@ -113,7 +111,8 @@ export default function PageEditor({
   const documentState = useDocumentVisibility();
   const { pageSlug } = useParams();
   const slugId = extractPageSlugId(pageSlug);
-  const currentPageEditMode = useAtomValue(currentPageEditModeAtom);
+  const userPageEditMode =
+    currentUser?.user?.settings?.preferences?.pageEditMode ?? PageEditMode.Edit;
   const canScroll = useCallback(
     () => Boolean(isComponentMounted.current && editorRef.current),
     [isComponentMounted],
@@ -373,9 +372,19 @@ export default function PageEditor({
     return () => clearTimeout(timeout);
   }, [yjsConnectionStatus, isSynced]);
   useEffect(() => {
-    if (!editor) return;
+    // Only honor user default page edit mode preference and permissions
-    editor.setEditable(editable && currentPageEditMode === PageEditMode.Edit);
+    if (editor) {
-  }, [currentPageEditMode, editor, editable]);
+      if (userPageEditMode && editable) {
+        if (userPageEditMode === PageEditMode.Edit) {
+          editor.setEditable(true);
+        } else if (userPageEditMode === PageEditMode.Read) {
+          editor.setEditable(false);
+        }
+      } else {
+        editor.setEditable(false);
+      }
+    }
+  }, [userPageEditMode, editor, editable]);
 
   const hasConnectedOnceRef = useRef(false);
   const [showStatic, setShowStatic] = useState(true);
@@ -415,7 +424,7 @@ export default function PageEditor({
                 <EditorLinkMenu editor={editor} />
                 <EditorBubbleMenu editor={editor} />
                 <TableMenu editor={editor} />
-                <TableHandlesLayer editor={editor} />
+                <TableCellMenu editor={editor} appendTo={menuContainerRef} />
                 <ImageMenu editor={editor} />
                 <VideoMenu editor={editor} />
                 <PdfMenu editor={editor} />

apps/client/src/features/editor/styles/core.css

@@ -203,8 +203,7 @@
     }
   }
 
-  &.resize-cursor,
+  .resize-cursor {
-  &.resize-cursor * {
     cursor: ew-resize;
     cursor: col-resize;
   }

apps/client/src/features/editor/styles/editor.module.css

@@ -9,15 +9,3 @@
     }
 }
 
-.byline {
-    padding-left: 3rem;
-
-    @media (max-width: $mantine-breakpoint-sm) {
-        padding-left: 1rem;
-    }
-
-    @media print {
-        padding-left: 0;
-    }
-}
-

apps/client/src/features/editor/styles/index.css

@@ -9,7 +9,6 @@
 @import "./media.css";
 @import "./code.css";
 @import "./print.css";
-@import "./page-break.css";
 @import "./find.css";
 @import "./mention.css";
 @import "./ordered-list.css";

apps/client/src/features/editor/styles/page-break.css

@@ -1,50 +0,0 @@
-.ProseMirror .page-break {
-  position: relative;
-  margin: 1.5rem 0;
-  border-top: 1px dashed var(--mantine-color-default-border);
-  height: 0;
-  user-select: none;
-}
-
-.ProseMirror[contenteditable="false"] .page-break {
-  margin: 0;
-  border: none;
-  height: 0;
-}
-
-.ProseMirror[contenteditable="false"] .page-break::after {
-  content: none;
-}
-
-.ProseMirror .page-break::after {
-  content: "Page break";
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  padding: 0 0.5rem;
-  background: var(--mantine-color-body);
-  color: var(--mantine-color-dimmed);
-  font-size: 0.75rem;
-  line-height: 1;
-  letter-spacing: 0.02em;
-  text-transform: uppercase;
-}
-
-.ProseMirror .page-break.ProseMirror-selectednode {
-  border-top-color: var(--mantine-primary-color-filled);
-}
-
-@media print {
-  .ProseMirror .page-break {
-    break-before: always;
-    page-break-before: always;
-    visibility: hidden;
-    border: none;
-    margin: 0;
-  }
-
-  .ProseMirror .page-break::after {
-    content: none;
-  }
-}

apps/client/src/features/editor/styles/table.css

@@ -15,8 +15,7 @@
 }
 
 .table-dnd-drop-indicator {
-  background-color: var(--mantine-color-blue-5);
+  background-color: #adf;
-  z-index: 3;
 }
 
 .ProseMirror {
@@ -58,14 +57,13 @@
     }
 
     .column-resize-handle {
-      background-color: var(--mantine-color-blue-5);
+      background-color: #adf;
       bottom: -1px;
       position: absolute;
-      right: -1px;
+      right: -2px;
       pointer-events: none;
       top: 0;
-      width: 2px;
+      width: 4px;
-      z-index: 3;
     }
 
     .selectedCell:after {
@@ -131,139 +129,6 @@
   }
 }
 
-
-/* Header-row pinning. Two CSS paths, picked by `header-pin/controller.ts`:
-   - native sticky (preferred): wrapper drops its overflow constraint so
-     `position: sticky` on the row can resolve against the document scroll.
-   - transform fallback: wrapper keeps `overflow-x: auto` for horizontal
-     scrolling; the row is positioned imperatively per scroll frame.
-
-   `--editor-pin-offset` is published to :root by `pinOffsetWatcher` in
-   `header-pin/offset.ts`, measured against the lowest fixed surface above
-   the editor (app shell header, page header, fixed toolbar). */
-
-.tableWrapper.tableWrapperNoOverflow,
-.tableWrapper.tableWrapperNoOverflow table {
-  overflow: visible;
-}
-
-.tableWrapper.tableHeaderPinned table tr:first-child {
-  z-index: 2;
-}
-
-.tableWrapper.tableWrapperNoOverflow.tableHeaderPinned table tr:first-child {
-  position: sticky;
-  top: var(--editor-pin-offset, 90px);
-}
-
-.tableWrapper.tableHeaderPinned:not(.tableWrapperNoOverflow) table tr:first-child {
-  position: relative;
-  transform: translateY(var(--table-pin-offset, 0px));
-}
-
-@media print {
-  .tableWrapper.tableHeaderPinned table tr:first-child {
-    position: static;
-    transform: none;
-  }
-}
-
-.tableReadonlySortChevron {
-  /* Anchor to the cell's right edge, vertically centered with the cell
-     content. The cell content (a <p>) is block-level so an inline chevron
-     would wrap to a new line; absolute positioning takes it out of flow. */
-  position: absolute;
-  top: 50%;
-  right: 6px;
-  transform: translateY(-50%);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 18px;
-  height: 18px;
-  border-radius: 4px;
-  background: light-dark(
-    rgba(55, 53, 47, 0.08),
-    rgba(255, 255, 255, 0.08)
-  );
-  color: light-dark(
-    rgba(55, 53, 47, 0.55),
-    rgba(255, 255, 255, 0.55)
-  );
-  user-select: none;
-  cursor: pointer;
-  z-index: 1;
-  /* Hidden by default; revealed on header-cell hover or when this column is
-     the active sort (see selectors below). */
-  opacity: 0;
-  transition: opacity 120ms ease, background-color 120ms ease, color 120ms ease;
-}
-
-.ProseMirror table th:hover .tableReadonlySortChevron,
-.tableReadonlySortChevron[data-sort] {
-  opacity: 1;
-}
-
-.ProseMirror table th:has(.tableReadonlySortChevron) {
-  padding-right: 30px;
-}
-
-.tableReadonlySortChevron:hover {
-  background: light-dark(
-    rgba(55, 53, 47, 0.16),
-    rgba(255, 255, 255, 0.16)
-  );
-}
-
-/* Immediate tooltip on the chevron — same style language as the rest of the
-   app (small, dark, rounded), unlike the native `title` tooltip which only
-   appears after a long delay. */
-.tableReadonlySortChevron::after {
-  content: attr(data-tooltip);
-  position: absolute;
-  /* Below the chevron — placing it above the cell hits the table's
-     overflow clipping (the wrapper has `overflow-x: auto` which forces
-     `overflow-y: auto` per spec). */
-  top: calc(100% + 6px);
-  right: 0;
-  padding: 4px 8px;
-  border-radius: 4px;
-  background: var(--mantine-color-dark-7);
-  color: var(--mantine-color-white);
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 1.4;
-  white-space: nowrap;
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 120ms ease;
-  z-index: 10;
-}
-
-.tableReadonlySortChevron:hover::after {
-  opacity: 1;
-}
-
-.tableReadonlySortChevron svg {
-  display: block;
-}
-
-.tableReadonlySortChevron[data-sort="asc"],
-.tableReadonlySortChevron[data-sort="desc"] {
-  background: light-dark(
-    var(--mantine-color-blue-1),
-    var(--mantine-color-blue-9)
-  );
-  color: light-dark(
-    var(--mantine-color-blue-7),
-    var(--mantine-color-blue-2)
-  );
-}
-
-.tableReadonlySortChevron[data-sort="asc"] svg {
-  transform: rotate(180deg);
-}
-
 .editor-container:has(.table-dnd-drop-indicator[data-dragging="true"]) {
   .prosemirror-dropcursor-block {
     display: none;

apps/client/src/features/editor/title-editor.tsx

@@ -7,7 +7,6 @@ import { Text } from "@tiptap/extension-text";
 import { Placeholder } from "@tiptap/extension-placeholder";
 import { useAtomValue } from "jotai";
 import {
-  currentPageEditModeAtom,
   pageEditorAtom,
   titleEditorAtom,
 } from "@/features/editor/atoms/editor-atoms";
@@ -25,6 +24,7 @@ import { useTranslation } from "react-i18next";
 import EmojiCommand from "@/features/editor/extensions/emoji-command.ts";
 import { UpdateEvent } from "@/features/websocket/types";
 import localEmitter from "@/lib/local-emitter.ts";
+import { currentUserAtom } from "@/features/user/atoms/current-user-atom.ts";
 import { PageEditMode } from "@/features/user/types/user.types.ts";
 import { searchSpotlight } from "@/features/search/constants.ts";
 import { platformModifierKey } from "@/lib";
@@ -52,7 +52,9 @@ export function TitleEditor({
   const emit = useQueryEmit();
   const navigate = useNavigate();
   const [activePageId, setActivePageId] = useState(pageId);
-  const currentPageEditMode = useAtomValue(currentPageEditModeAtom);
+  const [currentUser] = useAtom(currentUserAtom);
+  const userPageEditMode =
+    currentUser?.user?.settings?.preferences?.pageEditMode ?? PageEditMode.Edit;
 
   const titleEditor = useEditor({
     extensions: [
@@ -170,9 +172,18 @@ export function TitleEditor({
   }, [pageId]);
 
   useEffect(() => {
-    if (!titleEditor) return;
+    if (titleEditor) {
-    titleEditor.setEditable(editable && currentPageEditMode === PageEditMode.Edit);
+      if (userPageEditMode && editable) {
-  }, [currentPageEditMode, titleEditor, editable]);
+        if (userPageEditMode === PageEditMode.Edit) {
+          titleEditor.setEditable(true);
+        } else if (userPageEditMode === PageEditMode.Read) {
+          titleEditor.setEditable(false);
+        }
+      } else {
+        titleEditor.setEditable(false);
+      }
+    }
+  }, [userPageEditMode, titleEditor, editable]);
 
   const openSearchDialog = () => {
     const event = new CustomEvent("openFindDialogFromEditor", {});

apps/client/src/features/label/components/label-chip.tsx

@@ -1,51 +0,0 @@
-import { Link } from "react-router-dom";
-import { useComputedColorScheme } from "@mantine/core";
-import { IconX } from "@tabler/icons-react";
-import { useTranslation } from "react-i18next";
-import { ILabel } from "@/features/label/types/label.types.ts";
-import { getLabelColor } from "@/features/label/utils/label-colors.ts";
-import classes from "@/features/label/label.module.css";
-
-type LabelChipProps = {
-  label: Pick<ILabel, "id" | "name">;
-  onRemove?: () => void;
-  asLink?: boolean;
-};
-
-export function LabelChip({ label, onRemove, asLink }: LabelChipProps) {
-  const { t } = useTranslation();
-  const scheme = useComputedColorScheme("light");
-  const c = getLabelColor(label.name, scheme);
-
-  const nameNode = asLink ? (
-    <Link
-      to={`/labels/${encodeURIComponent(label.name)}`}
-      className={classes.chipLink}
-      onClick={(e) => e.stopPropagation()}
-    >
-      <span className={classes.chipName}>{label.name}</span>
-    </Link>
-  ) : (
-    <span className={classes.chipName}>{label.name}</span>
-  );
-
-  return (
-    <span className={classes.chip} style={{ background: c.bg, color: c.fg }}>
-      {nameNode}
-      {onRemove && (
-        <button
-          type="button"
-          className={classes.chipX}
-          onClick={(e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            onRemove();
-          }}
-          aria-label={t("Remove label {{name}}", { name: label.name })}
-        >
-          <IconX size={12} stroke={2} />
-        </button>
-      )}
-    </span>
-  );
-}

apps/client/src/features/label/components/label-page-row-skeleton.tsx

@@ -1,29 +0,0 @@
-import { Skeleton } from "@mantine/core";
-import classes from "@/features/label/label.module.css";
-
-type LabelPageRowSkeletonProps = {
-  titleWidth?: number;
-  metaWidth?: number;
-};
-
-export function LabelPageRowSkeleton({
-  titleWidth = 220,
-  metaWidth = 180,
-}: LabelPageRowSkeletonProps) {
-  return (
-    <div className={classes.row} aria-hidden="true">
-      <div className={classes.rowMain}>
-        <div className={classes.rowIcon}>
-          <Skeleton height={18} width={18} radius="sm" />
-        </div>
-        <div className={classes.rowBody}>
-          <Skeleton height={15} width={titleWidth} radius="xs" />
-          <div className={classes.rowMeta}>
-            <Skeleton height={18} width={18} radius="sm" />
-            <Skeleton height={12} width={metaWidth} radius="xs" />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

apps/client/src/features/label/components/label-page-row.tsx

@@ -1,91 +0,0 @@
-import { Link } from "react-router-dom";
-import { ThemeIcon, Tooltip } from "@mantine/core";
-import { IconFileDescription } from "@tabler/icons-react";
-import { useTranslation } from "react-i18next";
-import { ILabelPageItem } from "@/features/label/types/label.types.ts";
-import { LabelChip } from "@/features/label/components/label-chip.tsx";
-import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
-import { AvatarIconType } from "@/features/attachments/types/attachment.types.ts";
-import { buildPageUrl } from "@/features/page/page.utils";
-import { formatLabelListDate } from "@/features/label/utils/format-label-date.ts";
-import classes from "@/features/label/label.module.css";
-
-type LabelPageRowProps = {
-  page: ILabelPageItem;
-  currentLabelName: string;
-};
-
-const MAX_VISIBLE_CHIPS = 3;
-
-export function LabelPageRow({ page, currentLabelName }: LabelPageRowProps) {
-  const { t } = useTranslation();
-
-  const otherLabels = page.labels.filter((l) => l.name !== currentLabelName);
-  const visibleLabels = otherLabels.slice(0, MAX_VISIBLE_CHIPS);
-  const hiddenLabels = otherLabels.slice(MAX_VISIBLE_CHIPS);
-
-  return (
-    <Link
-      to={buildPageUrl(page.space?.slug, page.slugId, page.title ?? undefined)}
-      className={classes.row}
-    >
-      <div className={classes.rowMain}>
-        <div className={classes.rowIcon}>
-          {page.icon ? (
-            <span style={{ fontSize: 16, lineHeight: 1 }}>{page.icon}</span>
-          ) : (
-            <ThemeIcon variant="transparent" color="gray" size={18}>
-              <IconFileDescription size={18} />
-            </ThemeIcon>
-          )}
-        </div>
-        <div className={classes.rowBody}>
-          <div className={classes.rowTitle}>
-            {page.title || t("Untitled")}
-          </div>
-          <div className={classes.rowMeta}>
-            {page.space && (
-              <>
-                <CustomAvatar
-                  name={page.space.name}
-                  avatarUrl={page.space.logo ?? undefined}
-                  type={AvatarIconType.SPACE_ICON}
-                  color="initials"
-                  variant="filled"
-                  size={18}
-                />
-                <span>{page.space.name}</span>
-                <span className={classes.metaDot} aria-hidden="true">
-                  •
-                </span>
-              </>
-            )}
-            <span className={classes.rowDate}>
-              {t("Updated {{date}}", {
-                date: formatLabelListDate(new Date(page.updatedAt)),
-              })}
-            </span>
-          </div>
-          {/* {otherLabels.length > 0 && (
-            <div className={classes.rowChips}>
-              {visibleLabels.map((label) => (
-                <LabelChip key={label.id} label={label} asLink />
-              ))}
-              {hiddenLabels.length > 0 && (
-                <Tooltip
-                  label={hiddenLabels.map((l) => l.name).join(", ")}
-                  withArrow
-                  openDelay={200}
-                >
-                  <span className={classes.chipMore}>
-                    +{hiddenLabels.length}
-                  </span>
-                </Tooltip>
-              )}
-            </div>
-          )} */}
-        </div>
-      </div>
-    </Link>
-  );
-}

apps/client/src/features/label/components/label-picker.tsx

@@ -1,160 +0,0 @@
-import { useMemo, useRef, useState, KeyboardEvent } from "react";
-import clsx from "clsx";
-import { IconPlus } from "@tabler/icons-react";
-import { useTranslation } from "react-i18next";
-import { useComputedColorScheme } from "@mantine/core";
-import { ILabel } from "@/features/label/types/label.types.ts";
-import { useWorkspaceLabelsQuery } from "@/features/label/queries/label-query.ts";
-import { getLabelColor } from "@/features/label/utils/label-colors.ts";
-import { normalizeLabelName } from "@/features/label/utils/normalize-label.ts";
-import classes from "@/features/label/label.module.css";
-
-type LabelPickerProps = {
-  applied: ILabel[];
-  enabled: boolean;
-  onAdd: (name: string) => void;
-  onClose: () => void;
-};
-
-const NAME_PATTERN = /^[a-z0-9_-][a-z0-9_~-]*$/;
-const MAX_LABEL_NAME_LENGTH = 100;
-
-function isValidLabelName(name: string): boolean {
-  return (
-    name.length > 0 &&
-    name.length <= MAX_LABEL_NAME_LENGTH &&
-    NAME_PATTERN.test(name)
-  );
-}
-
-export function LabelPicker({
-  applied,
-  enabled,
-  onAdd,
-  onClose,
-}: LabelPickerProps) {
-  const { t } = useTranslation();
-  const scheme = useComputedColorScheme("light");
-  const [query, setQuery] = useState("");
-  const [hover, setHover] = useState(0);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  const normalized = normalizeLabelName(query);
-  const { data } = useWorkspaceLabelsQuery(normalized, enabled);
-
-  const appliedNames = useMemo(
-    () => new Set(applied.map((l) => l.name.toLowerCase())),
-    [applied],
-  );
-
-  const suggestions = useMemo(() => {
-    const items = data?.items ?? [];
-    return items.filter((l) => !appliedNames.has(l.name.toLowerCase()));
-  }, [data, appliedNames]);
-
-  const exact = suggestions.find((l) => l.name === normalized);
-  const canCreate =
-    !exact && !appliedNames.has(normalized) && isValidLabelName(normalized);
-
-  const total = suggestions.length + (canCreate ? 1 : 0);
-
-  const select = (idx: number) => {
-    if (idx < suggestions.length) {
-      onAdd(suggestions[idx].name);
-    } else if (canCreate) {
-      onAdd(normalized);
-    }
-    setQuery("");
-    setHover(0);
-    inputRef.current?.focus();
-  };
-
-  const onKey = (e: KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === "ArrowDown") {
-      e.preventDefault();
-      setHover((h) => Math.min(Math.max(total - 1, 0), h + 1));
-    } else if (e.key === "ArrowUp") {
-      e.preventDefault();
-      setHover((h) => Math.max(0, h - 1));
-    } else if (e.key === "Enter") {
-      e.preventDefault();
-      if (total === 0) return;
-      select(hover);
-    } else if (e.key === "Escape") {
-      e.preventDefault();
-      onClose();
-    }
-  };
-
-  return (
-    <div className={classes.popover}>
-      <div className={classes.popoverSearch}>
-        <input
-          ref={inputRef}
-          type="text"
-          autoFocus
-          maxLength={MAX_LABEL_NAME_LENGTH}
-          placeholder={t("Search or create…")}
-          value={query}
-          onChange={(e) => {
-            setQuery(e.target.value);
-            setHover(0);
-          }}
-          onKeyDown={onKey}
-        />
-      </div>
-      <div className={classes.popoverList}>
-        {total === 0 && (
-          <div className={classes.popoverEmpty}>
-            {normalized.length === 0
-              ? t("No labels yet")
-              : appliedNames.has(normalized)
-                ? t("Already added")
-                : !isValidLabelName(normalized)
-                  ? t("Invalid label name")
-                  : t("No matches")}
-          </div>
-        )}
-        {suggestions.map((s, i) => {
-          const c = getLabelColor(s.name, scheme);
-          return (
-            <button
-              key={s.id}
-              type="button"
-              className={clsx(
-                classes.popoverItem,
-                hover === i && classes.popoverItemHover,
-              )}
-              onMouseEnter={() => setHover(i)}
-              onClick={() => select(i)}
-            >
-              <span
-                className={classes.popoverItemDot}
-                style={{ background: c.dot }}
-              />
-              <span className={classes.popoverItemName}>{s.name}</span>
-            </button>
-          );
-        })}
-        {canCreate && (
-          <button
-            type="button"
-            className={clsx(
-              classes.popoverItem,
-              hover === suggestions.length && classes.popoverItemHover,
-            )}
-            onMouseEnter={() => setHover(suggestions.length)}
-            onClick={() => select(suggestions.length)}
-          >
-            <span className={classes.popoverCreatePlus}>
-              <IconPlus size={12} stroke={2} />
-            </span>
-            <span className={classes.popoverItemName}>
-              {t("Create")} <b>"{normalized}"</b>
-            </span>
-          </button>
-        )}
-      </div>
-    </div>
-  );
-}

apps/client/src/features/label/components/labels-section.tsx

@@ -1,93 +0,0 @@
-import { useState } from "react";
-import clsx from "clsx";
-import { Divider, Popover, Stack, Text } from "@mantine/core";
-import { IconPlus } from "@tabler/icons-react";
-import { useTranslation } from "react-i18next";
-import { LabelChip } from "@/features/label/components/label-chip.tsx";
-import { LabelPicker } from "@/features/label/components/label-picker.tsx";
-import {
-  useAddLabelsMutation,
-  usePageLabelsQuery,
-  useRemoveLabelMutation,
-} from "@/features/label/queries/label-query.ts";
-import classes from "@/features/label/label.module.css";
-
-type LabelsSectionProps = {
-  pageId: string;
-  canEdit: boolean;
-};
-
-export function LabelsSection({ pageId, canEdit }: LabelsSectionProps) {
-  const { t } = useTranslation();
-  const [open, setOpen] = useState(false);
-
-  const { data } = usePageLabelsQuery(pageId);
-  const addMutation = useAddLabelsMutation(pageId);
-  const removeMutation = useRemoveLabelMutation(pageId);
-
-  const labels = data?.items ?? [];
-
-  if (!canEdit && labels.length === 0) {
-    return null;
-  }
-
-  const handleAdd = (name: string) => {
-    addMutation.mutate({ pageId, names: [name] });
-  };
-
-  const handleRemove = (labelId: string) => {
-    removeMutation.mutate({ pageId, labelId });
-  };
-
-  return (
-    <>
-      <Divider />
-      <Stack gap="xs">
-        <Text size="xs" fw={500} c="dimmed">
-          {t("Labels")}
-        </Text>
-        <div className={classes.labelsWrap}>
-          {labels.map((label) => (
-            <LabelChip
-              key={label.id}
-              label={label}
-              asLink
-              onRemove={canEdit ? () => handleRemove(label.id) : undefined}
-            />
-          ))}
-          {canEdit && (
-            <Popover
-              opened={open}
-              onChange={setOpen}
-              position="bottom-end"
-              shadow="lg"
-              withinPortal
-              offset={6}
-            >
-              <Popover.Target>
-                <button
-                  type="button"
-                  className={clsx(classes.addBtn, open && classes.addBtnOpen)}
-                  onClick={() => setOpen((v) => !v)}
-                >
-                  <IconPlus size={12} stroke={2} />
-                  <span>
-                    {labels.length === 0 ? t("Add label") : t("Add")}
-                  </span>
-                </button>
-              </Popover.Target>
-              <Popover.Dropdown p={0} className={classes.popover}>
-                <LabelPicker
-                  applied={labels}
-                  enabled={open}
-                  onAdd={(name) => handleAdd(name)}
-                  onClose={() => setOpen(false)}
-                />
-              </Popover.Dropdown>
-            </Popover>
-          )}
-        </div>
-      </Stack>
-    </>
-  );
-}

apps/client/src/features/label/label.module.css

@@ -1,325 +0,0 @@
-.labelsWrap {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  align-items: center;
-  margin-top: 4px;
-}
-
-.chip {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  height: 24px;
-  padding: 0 8px;
-  border-radius: 4px;
-  font-size: 12.5px;
-  font-weight: 500;
-  line-height: 1;
-  user-select: none;
-  white-space: nowrap;
-}
-
-.chipName {
-  letter-spacing: 0.005em;
-}
-
-.chipX {
-  appearance: none;
-  border: 0;
-  background: transparent;
-  color: currentColor;
-  width: 18px;
-  height: 18px;
-  border-radius: 4px;
-  margin-right: -4px;
-  margin-left: 0;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  padding: 0;
-  opacity: 0.6;
-}
-
-.chipX:hover {
-  opacity: 1;
-  background: light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.12));
-}
-
-.addBtn {
-  appearance: none;
-  border: 1px dashed
-    light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-3));
-  background: transparent;
-  color: var(--mantine-color-dimmed);
-  height: 24px;
-  padding: 0 8px;
-  border-radius: 4px;
-  font: inherit;
-  font-size: 12.5px;
-  font-weight: 500;
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  cursor: pointer;
-  transition:
-    background 100ms ease,
-    border-color 100ms ease,
-    color 100ms ease;
-}
-
-.addBtn:hover {
-  background: light-dark(rgba(0, 0, 0, 0.03), rgba(255, 255, 255, 0.04));
-  color: var(--mantine-color-text);
-  border-color: light-dark(
-    var(--mantine-color-gray-5),
-    var(--mantine-color-dark-2)
-  );
-}
-
-.addBtnOpen {
-  background: var(--mantine-color-body);
-  border-style: solid;
-  border-color: light-dark(
-    var(--mantine-color-gray-5),
-    var(--mantine-color-dark-2)
-  );
-  color: var(--mantine-color-text);
-}
-
-.popover {
-  width: 240px;
-  padding: 0;
-  overflow: hidden;
-}
-
-.popoverSearch {
-  padding: 8px 8px 4px;
-  border-bottom: 1px solid
-    light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
-}
-
-.popoverSearch input {
-  width: 100%;
-  border: 0;
-  background: transparent;
-  font: inherit;
-  font-size: 13px;
-  padding: 4px 4px;
-  color: var(--mantine-color-text);
-  outline: none;
-}
-
-.popoverSearch input::placeholder {
-  color: var(--mantine-color-placeholder);
-}
-
-.popoverList {
-  max-height: 240px;
-  overflow-y: auto;
-  padding: 4px;
-}
-
-.popoverEmpty {
-  padding: 12px 8px;
-  color: var(--mantine-color-dimmed);
-  font-size: 12.5px;
-  text-align: center;
-}
-
-.popoverItem {
-  appearance: none;
-  width: 100%;
-  border: 0;
-  background: transparent;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 6px 8px;
-  border-radius: 4px;
-  font: inherit;
-  font-size: 13px;
-  color: var(--mantine-color-text);
-  cursor: pointer;
-  text-align: left;
-}
-
-.popoverItemHover {
-  background: light-dark(
-    var(--mantine-color-gray-1),
-    var(--mantine-color-dark-5)
-  );
-}
-
-.popoverItemDot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  flex-shrink: 0;
-}
-
-.popoverItemName {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.popoverCreatePlus {
-  width: 14px;
-  height: 14px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--mantine-color-dimmed);
-}
-
-.headerChip {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  height: 36px;
-  padding: 0 14px;
-  border-radius: 8px;
-  font-size: 22px;
-  font-weight: 600;
-  line-height: 1;
-  letter-spacing: -0.005em;
-  text-decoration: none;
-  user-select: none;
-  transition: filter 100ms ease;
-}
-
-.headerChip:hover {
-  filter: brightness(0.97);
-}
-
-.headerDot {
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  flex-shrink: 0;
-}
-
-.row {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 16px;
-  padding: 14px 12px;
-  margin: 0 -12px;
-  border-radius: 8px;
-  text-decoration: none;
-  color: inherit;
-  cursor: pointer;
-  transition: background-color 80ms ease;
-}
-
-.row + .row {
-  border-top: 1px solid
-    light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
-}
-
-.row:hover {
-  background-color: light-dark(
-    var(--mantine-color-gray-0),
-    var(--mantine-color-dark-6)
-  );
-}
-
-.row:hover + .row,
-.row:has(+ .row:hover) {
-  border-top-color: transparent;
-}
-
-.rowMain {
-  display: flex;
-  gap: 12px;
-  min-width: 0;
-  flex: 1;
-}
-
-.rowIcon {
-  width: 20px;
-  height: 20px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  color: var(--mantine-color-dimmed);
-  margin-top: 2px;
-}
-
-.rowBody {
-  min-width: 0;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.rowTitle {
-  font-size: 15px;
-  font-weight: 500;
-  color: var(--mantine-color-text);
-  line-height: 1.3;
-  word-break: break-word;
-}
-
-.rowChips {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-}
-
-.chipMore {
-  display: inline-flex;
-  align-items: center;
-  height: 24px;
-  padding: 0 8px;
-  border-radius: 4px;
-  font-size: 12.5px;
-  font-weight: 500;
-  line-height: 1;
-  color: var(--mantine-color-dimmed);
-  background: light-dark(
-    var(--mantine-color-gray-1),
-    var(--mantine-color-dark-5)
-  );
-  user-select: none;
-  white-space: nowrap;
-}
-
-.rowMeta {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  flex-wrap: wrap;
-  color: var(--mantine-color-dimmed);
-  font-size: 13px;
-}
-
-.rowDate {
-  color: var(--mantine-color-dimmed);
-  font-size: 13px;
-  white-space: nowrap;
-  flex-shrink: 0;
-}
-
-.metaDot {
-  font-size: 14px;
-  line-height: 1;
-  color: var(--mantine-color-dimmed);
-}
-
-.chipLink {
-  text-decoration: none;
-  color: inherit;
-  display: inline-flex;
-}
-
-.chipLink:hover {
-  filter: brightness(0.97);
-}

apps/client/src/features/label/queries/label-query.ts

@@ -1,157 +0,0 @@
-import {
-  keepPreviousData,
-  useInfiniteQuery,
-  useMutation,
-  useQuery,
-  useQueryClient,
-} from "@tanstack/react-query";
-import {
-  addLabelsToPage,
-  findPagesByLabel,
-  getLabelInfo,
-  getPageLabels,
-  getWorkspaceLabels,
-  removeLabelFromPage,
-} from "@/features/label/services/label-service.ts";
-import {
-  IAddLabels,
-  ILabel,
-  IRemoveLabel,
-} from "@/features/label/types/label.types.ts";
-import { IPagination } from "@/lib/types.ts";
-import { notifications } from "@mantine/notifications";
-import { useTranslation } from "react-i18next";
-
-const PAGE_LABELS_KEY = (pageId: string) => ["page-labels", pageId];
-const WORKSPACE_LABELS_KEY = (query?: string) => ["workspace-labels", query ?? ""];
-
-export function usePageLabelsQuery(pageId: string | undefined) {
-  return useQuery({
-    queryKey: PAGE_LABELS_KEY(pageId ?? ""),
-    queryFn: () => getPageLabels({ pageId: pageId as string, limit: 100 }),
-    enabled: !!pageId,
-  });
-}
-
-export function useWorkspaceLabelsQuery(query: string, enabled: boolean) {
-  return useQuery({
-    queryKey: WORKSPACE_LABELS_KEY(query),
-    queryFn: () => getWorkspaceLabels({ type: "page", query, limit: 50 }),
-    enabled,
-    staleTime: 30 * 1000,
-  });
-}
-
-export function useAddLabelsMutation(pageId: string | undefined) {
-  const queryClient = useQueryClient();
-  const { t } = useTranslation();
-
-  return useMutation<ILabel[], Error, IAddLabels>({
-    mutationFn: (data) => addLabelsToPage(data),
-    onSuccess: (added) => {
-      queryClient.setQueryData<IPagination<ILabel>>(
-        PAGE_LABELS_KEY(pageId ?? ""),
-        (cache) => {
-          if (!cache) return cache;
-          const existing = new Set(cache.items.map((l) => l.id));
-          const additions = added.filter((l) => !existing.has(l.id));
-          if (additions.length === 0) return cache;
-          return { ...cache, items: [...cache.items, ...additions] };
-        },
-      );
-
-      queryClient.setQueriesData<IPagination<ILabel>>(
-        { queryKey: ["workspace-labels"] },
-        (cache) => {
-          if (!cache) return cache;
-          const existing = new Set(cache.items.map((l) => l.id));
-          const additions = added.filter((l) => !existing.has(l.id));
-          if (additions.length === 0) return cache;
-          return {
-            ...cache,
-            items: [...cache.items, ...additions].sort((a, b) =>
-              a.name.localeCompare(b.name),
-            ),
-          };
-        },
-      );
-
-      queryClient.invalidateQueries({ queryKey: ["label-pages"] });
-      queryClient.invalidateQueries({ queryKey: ["label-info"] });
-    },
-    onError: (error: any) => {
-      notifications.show({
-        message: error?.response?.data?.message ?? t("Failed to add label"),
-        color: "red",
-      });
-    },
-  });
-}
-
-export function useRemoveLabelMutation(pageId: string | undefined) {
-  const queryClient = useQueryClient();
-  const { t } = useTranslation();
-
-  return useMutation<void, Error, IRemoveLabel>({
-    mutationFn: (data) => removeLabelFromPage(data),
-    onSuccess: (_data, variables) => {
-      const cache = queryClient.getQueryData<IPagination<ILabel>>(
-        PAGE_LABELS_KEY(pageId ?? ""),
-      );
-      if (cache) {
-        queryClient.setQueryData<IPagination<ILabel>>(
-          PAGE_LABELS_KEY(pageId ?? ""),
-          {
-            ...cache,
-            items: cache.items.filter((l) => l.id !== variables.labelId),
-          },
-        );
-      }
-      queryClient.invalidateQueries({ queryKey: ["workspace-labels"] });
-      queryClient.invalidateQueries({ queryKey: ["label-pages"] });
-      queryClient.invalidateQueries({ queryKey: ["label-info"] });
-    },
-    onError: () => {
-      notifications.show({
-        message: t("Failed to remove label"),
-        color: "red",
-      });
-    },
-  });
-}
-
-export function useLabelInfoQuery(name: string, spaceId?: string) {
-  return useQuery({
-    queryKey: ["label-info", name, spaceId ?? ""],
-    queryFn: () => getLabelInfo({ name, type: "page", spaceId }),
-    enabled: !!name,
-    placeholderData: keepPreviousData,
-  });
-}
-
-const LABEL_PAGES_LIMIT = 25;
-
-export function useLabelPagesQuery(
-  name: string,
-  query: string,
-  spaceId?: string,
-) {
-  return useInfiniteQuery({
-    queryKey: ["label-pages", name, query, spaceId ?? ""],
-    queryFn: ({ pageParam }) =>
-      findPagesByLabel({
-        name,
-        query,
-        spaceId,
-        cursor: pageParam,
-        limit: LABEL_PAGES_LIMIT,
-      }),
-    enabled: !!name,
-    initialPageParam: undefined as string | undefined,
-    getNextPageParam: (lastPage) =>
-      lastPage.meta.hasNextPage
-        ? (lastPage.meta.nextCursor ?? undefined)
-        : undefined,
-    placeholderData: keepPreviousData,
-  });
-}

apps/client/src/features/label/services/label-service.ts

@@ -1,55 +0,0 @@
-import api from "@/lib/api-client";
-import { IPagination } from "@/lib/types.ts";
-import {
-  IAddLabels,
-  IFindPagesByLabelParams,
-  ILabel,
-  ILabelInfo,
-  ILabelInfoParams,
-  ILabelPageItem,
-  IListLabelsParams,
-  IPageLabelsParams,
-  IRemoveLabel,
-} from "@/features/label/types/label.types.ts";
-
-export async function getPageLabels(
-  params: IPageLabelsParams,
-): Promise<IPagination<ILabel>> {
-  const req = await api.post<IPagination<ILabel>>("/pages/labels", params);
-  return req.data;
-}
-
-export async function getWorkspaceLabels(
-  params: IListLabelsParams,
-): Promise<IPagination<ILabel>> {
-  const req = await api.post<IPagination<ILabel>>("/labels", params);
-  return req.data;
-}
-
-export async function addLabelsToPage(
-  data: IAddLabels,
-): Promise<ILabel[]> {
-  const req = await api.post<ILabel[]>("/pages/labels/add", data);
-  return req.data;
-}
-
-export async function removeLabelFromPage(data: IRemoveLabel): Promise<void> {
-  await api.post("/pages/labels/remove", data);
-}
-
-export async function getLabelInfo(
-  params: ILabelInfoParams,
-): Promise<ILabelInfo> {
-  const req = await api.post<ILabelInfo>("/labels/info", params);
-  return req.data;
-}
-
-export async function findPagesByLabel(
-  params: IFindPagesByLabelParams,
-): Promise<IPagination<ILabelPageItem>> {
-  const req = await api.post<IPagination<ILabelPageItem>>(
-    "/labels/pages",
-    params,
-  );
-  return req.data;
-}

apps/client/src/features/label/types/label.types.ts

@@ -1,70 +0,0 @@
-import { QueryParams } from "@/lib/types.ts";
-
-export type LabelType = "page" | "space";
-
-export interface ILabel {
-  id: string;
-  name: string;
-  type: LabelType;
-  workspaceId: string;
-  createdAt: string;
-  updatedAt: string;
-}
-
-export interface IAddLabels {
-  pageId: string;
-  names: string[];
-}
-
-export interface IRemoveLabel {
-  pageId: string;
-  labelId: string;
-}
-
-export interface IPageLabelsParams {
-  pageId: string;
-  cursor?: string;
-  limit?: number;
-}
-
-export interface IListLabelsParams {
-  type: LabelType;
-  query?: string;
-  cursor?: string;
-  limit?: number;
-}
-
-export interface ILabelInfo {
-  name: string;
-  usageCount: number;
-}
-
-export interface ILabelPageItem {
-  id: string;
-  slugId: string;
-  title: string | null;
-  icon: string | null;
-  spaceId: string;
-  createdAt: string;
-  updatedAt: string;
-  space: {
-    id: string;
-    name: string;
-    slug: string;
-    logo: string | null;
-  } | null;
-  creator: { id: string; name: string; avatarUrl: string | null } | null;
-  labels: { id: string; name: string }[];
-}
-
-export interface IFindPagesByLabelParams extends QueryParams {
-  labelId?: string;
-  name?: string;
-  spaceId?: string;
-}
-
-export interface ILabelInfoParams {
-  name: string;
-  type: LabelType;
-  spaceId?: string;
-}

apps/client/src/features/label/utils/format-label-date.ts

@@ -1,15 +0,0 @@
-import { format, isThisYear, isToday, isYesterday } from "date-fns";
-import i18n from "@/i18n.ts";
-
-export function formatLabelListDate(date: Date): string {
-  if (isToday(date)) {
-    return i18n.t("Today, {{time}}", { time: format(date, "h:mma") });
-  }
-  if (isYesterday(date)) {
-    return i18n.t("Yesterday, {{time}}", { time: format(date, "h:mma") });
-  }
-  if (isThisYear(date)) {
-    return format(date, "MMM dd");
-  }
-  return format(date, "MMM dd, yyyy");
-}

apps/client/src/features/label/utils/label-colors.ts

@@ -1,55 +0,0 @@
-type LabelColor = {
-  bg: string;
-  fg: string;
-  dot: string;
-};
-
-const LABEL_PALETTE: Record<string, LabelColor> = {
-  slate: { bg: "#eef1f5", fg: "#3b475a", dot: "#6b7a90" },
-  blue: { bg: "#e6f0ff", fg: "#1e4fbf", dot: "#3b82f6" },
-  green: { bg: "#e3f5ea", fg: "#1f7a47", dot: "#22a05a" },
-  amber: { bg: "#fbf0d9", fg: "#8a5a00", dot: "#d99c1f" },
-  red: { bg: "#fde6e6", fg: "#a02b2b", dot: "#dc4a4a" },
-  purple: { bg: "#efe9fb", fg: "#5a3aa8", dot: "#8b6bd9" },
-  pink: { bg: "#fce6ee", fg: "#a8336d", dot: "#dc6699" },
-  teal: { bg: "#daf1ee", fg: "#1f6f6a", dot: "#2fa39a" },
-};
-
-const PALETTE_KEYS = Object.keys(LABEL_PALETTE);
-
-const DARK_PALETTE: Record<string, LabelColor> = {
-  slate: { bg: "#2a3140", fg: "#c8d3e3", dot: "#7e8da8" },
-  blue: { bg: "#152a52", fg: "#a9c4ff", dot: "#5b9aff" },
-  green: { bg: "#143b27", fg: "#9ce3b8", dot: "#3ec97c" },
-  amber: { bg: "#3d2c0e", fg: "#f5cf85", dot: "#e6b34a" },
-  red: { bg: "#401a1a", fg: "#f1a8a8", dot: "#e26565" },
-  purple: { bg: "#2a1f4d", fg: "#c8b4f4", dot: "#a48ce6" },
-  pink: { bg: "#3c1a2a", fg: "#f3a9c9", dot: "#e07ab0" },
-  teal: { bg: "#103633", fg: "#92d5cf", dot: "#48b8af" },
-};
-
-function hashName(name: string): number {
-  // Per-char accumulation with 31. Note: 31 ≡ -1 (mod 8), so the low bits of
-  // this hash are highly correlated across short strings — `% 8` would cluster.
-  let h = 0;
-  for (let i = 0; i < name.length; i++) {
-    h = (Math.imul(h, 31) + name.charCodeAt(i)) | 0;
-  }
-  // Murmur3 fmix32 finalizer — avalanches high bits into low bits so the
-  // subsequent `% palette.length` (small power of two) is well-distributed.
-  h ^= h >>> 16;
-  h = Math.imul(h, 0x85ebca6b);
-  h ^= h >>> 13;
-  h = Math.imul(h, 0xc2b2ae35);
-  h ^= h >>> 16;
-  return h >>> 0;
-}
-
-export function getLabelColor(
-  name: string,
-  scheme: "light" | "dark" = "light",
-): LabelColor {
-  const key = PALETTE_KEYS[hashName(name) % PALETTE_KEYS.length];
-  const palette = scheme === "dark" ? DARK_PALETTE : LABEL_PALETTE;
-  return palette[key];
-}

apps/client/src/features/label/utils/normalize-label.ts

@@ -1,3 +0,0 @@
-export function normalizeLabelName(name: string): string {
-  return name.trim().replace(/\s+/g, "-").toLowerCase();
-}

apps/client/src/features/page-details/components/backlinks-list.tsx

@@ -1,113 +0,0 @@
-import {
-  Button,
-  Center,
-  Group,
-  Loader,
-  Stack,
-  Text,
-  UnstyledButton,
-} from "@mantine/core";
-import { Link } from "react-router-dom";
-import { useTranslation } from "react-i18next";
-import { useBacklinksQuery } from "@/features/page-details/queries/backlinks-query.ts";
-import {
-  BacklinkDirection,
-  IBacklinkPageItem,
-} from "@/features/page-details/types/backlink.types.ts";
-import { buildPageUrl } from "@/features/page/page.utils.ts";
-import { getPageIcon } from "@/lib";
-
-interface BacklinksListProps {
-  pageId: string;
-  direction: BacklinkDirection;
-  enabled: boolean;
-  onItemClick: () => void;
-}
-
-export function BacklinksList({
-  pageId,
-  direction,
-  enabled,
-  onItemClick,
-}: BacklinksListProps) {
-  const { t } = useTranslation();
-  const { data, isLoading, fetchNextPage, hasNextPage, isFetchingNextPage } =
-    useBacklinksQuery(pageId, direction, enabled);
-
-  if (!enabled) return null;
-
-  if (isLoading) {
-    return (
-      <Center py="sm">
-        <Loader size="sm" />
-      </Center>
-    );
-  }
-
-  const items: IBacklinkPageItem[] =
-    data?.pages.flatMap((page) => page.items) ?? [];
-
-  if (items.length === 0) {
-    return (
-      <Text c="dimmed" size="sm" py="md">
-        {direction === "incoming"
-          ? t("No pages link here yet.")
-          : t("This page doesn't link to other pages yet.")}
-      </Text>
-    );
-  }
-
-  const handleClick = (e: React.MouseEvent) => {
-    if (e.metaKey || e.ctrlKey || e.shiftKey || e.button === 1) {
-      return;
-    }
-    onItemClick();
-  };
-
-  return (
-    <Stack gap={4}>
-      {items.map((item) => (
-        <UnstyledButton
-          key={item.id}
-          component={Link}
-          to={
-            item.space?.slug
-              ? buildPageUrl(
-                  item.space.slug,
-                  item.slugId,
-                  item.title ?? undefined,
-                )
-              : "#"
-          }
-          onClick={handleClick}
-          style={{ padding: "8px 4px", borderRadius: 4, userSelect: "none" }}
-        >
-          <Group gap="xs" wrap="nowrap">
-            {getPageIcon(item.icon ?? "")}
-            <Stack gap={0} style={{ flex: 1, minWidth: 0 }}>
-              <Text size="sm" fw={500} lineClamp={1}>
-                {item.title || t("Untitled")}
-              </Text>
-              {item.space?.name && (
-                <Text size="xs" c="dimmed" lineClamp={1}>
-                  {item.space.name}
-                </Text>
-              )}
-            </Stack>
-          </Group>
-        </UnstyledButton>
-      ))}
-      {hasNextPage && (
-        <Button
-          variant="subtle"
-          size="xs"
-          loading={isFetchingNextPage}
-          onClick={() => fetchNextPage()}
-          mt="xs"
-        >
-          {t("Load more")}
-        </Button>
-      )}
-    </Stack>
-  );
-}

apps/client/src/features/page-details/components/backlinks-modal.tsx

@@ -1,62 +0,0 @@
-import { Modal, Stack, Text } from "@mantine/core";
-import { useTranslation } from "react-i18next";
-import { useBacklinksCountQuery } from "@/features/page-details/queries/backlinks-query.ts";
-import { BacklinksList } from "./backlinks-list";
-
-interface BacklinksModalProps {
-  pageId: string;
-  opened: boolean;
-  onClose: () => void;
-}
-
-export function BacklinksModal({
-  pageId,
-  opened,
-  onClose,
-}: BacklinksModalProps) {
-  const { t } = useTranslation();
-  const { data: counts } = useBacklinksCountQuery(pageId);
-
-  return (
-    <Modal.Root opened={opened} onClose={onClose} size={640} yOffset="10vh">
-      <Modal.Overlay />
-      <Modal.Content>
-        <Modal.Header>
-          <Modal.Title fw={500}>{t("Backlinks")}</Modal.Title>
-          <Modal.CloseButton />
-        </Modal.Header>
-        <Modal.Body>
-          <Stack gap="lg">
-            <Stack gap="xs">
-              <Text size="sm" fw={500} c="dimmed">
-                {t("Incoming links ({{count}})", {
-                  count: counts?.incoming ?? 0,
-                })}
-              </Text>
-              <BacklinksList
-                pageId={pageId}
-                direction="incoming"
-                enabled={opened}
-                onItemClick={onClose}
-              />
-            </Stack>
-
-            <Stack gap="xs">
-              <Text size="sm" fw={500} c="dimmed">
-                {t("Outgoing links ({{count}})", {
-                  count: counts?.outgoing ?? 0,
-                })}
-              </Text>
-              <BacklinksList
-                pageId={pageId}
-                direction="outgoing"
-                enabled={opened}
-                onItemClick={onClose}
-              />
-            </Stack>
-          </Stack>
-        </Modal.Body>
-      </Modal.Content>
-    </Modal.Root>
-  );
-}

apps/client/src/features/page-details/components/page-details-aside.tsx

@@ -1,239 +0,0 @@
-import {
-  Divider,
-  Group,
-  Skeleton,
-  Stack,
-  Text,
-  UnstyledButton,
-} from "@mantine/core";
-import { IconChevronRight } from "@tabler/icons-react";
-import { useDisclosure } from "@mantine/hooks";
-import { useAtomValue } from "jotai";
-import { useParams } from "react-router-dom";
-import { useTranslation } from "react-i18next";
-import { extractPageSlugId } from "@/lib";
-import { usePageQuery } from "@/features/page/queries/page-query.ts";
-import { pageEditorAtom } from "@/features/editor/atoms/editor-atoms.ts";
-import { useBacklinksCountQuery } from "@/features/page-details/queries/backlinks-query.ts";
-import { BacklinksModal } from "./backlinks-modal";
-import { formattedDate, timeAgo } from "@/lib/time.ts";
-import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
-import { LabelsSection } from "@/features/label/components/labels-section.tsx";
-
-export function PageDetailsAside() {
-  const { pageSlug } = useParams();
-  const { data: page } = usePageQuery({
-    pageId: extractPageSlugId(pageSlug),
-  });
-  const pageEditor = useAtomValue(pageEditorAtom);
-  const { data: counts, isLoading: countsLoading } = useBacklinksCountQuery(page?.id);
-  const [modalOpened, { open: openModal, close: closeModal }] =
-    useDisclosure(false);
-
-  if (!page) return null;
-
-  const wordCount: number =
-    pageEditor?.storage?.characterCount?.words?.() ?? 0;
-  const characterCount: number =
-    pageEditor?.storage?.characterCount?.characters?.() ?? 0;
-
-  return (
-    <>
-      <Stack gap="md">
-        <PeopleSection
-          creator={page.creator}
-          lastUpdatedBy={page.lastUpdatedBy}
-        />
-
-        <Divider />
-
-        <StatsSection
-          wordCount={wordCount}
-          characterCount={characterCount}
-          createdAt={page.createdAt}
-          updatedAt={page.updatedAt}
-        />
-
-        <Divider />
-
-        <BacklinksSection
-          incomingCount={counts?.incoming ?? 0}
-          outgoingCount={counts?.outgoing ?? 0}
-          isLoading={countsLoading}
-          onClick={openModal}
-        />
-
-        <LabelsSection
-          pageId={page.id}
-          canEdit={page.permissions?.canEdit ?? false}
-        />
-      </Stack>
-
-      <BacklinksModal
-        pageId={page.id}
-        opened={modalOpened}
-        onClose={closeModal}
-      />
-    </>
-  );
-}
-
-function PeopleSection({
-  creator,
-  lastUpdatedBy,
-}: {
-  creator: { id: string; name: string; avatarUrl: string } | null;
-  lastUpdatedBy: { id: string; name: string; avatarUrl: string } | null;
-}) {
-  const { t } = useTranslation();
-  return (
-    <Stack gap="xs">
-      <PersonRow label={t("Created by")} person={creator} />
-      <PersonRow label={t("Last updated by")} person={lastUpdatedBy} />
-    </Stack>
-  );
-}
-
-function PersonRow({
-  label,
-  person,
-}: {
-  label: string;
-  person: { id: string; name: string; avatarUrl: string } | null;
-}) {
-  return (
-    <Group justify="space-between" wrap="nowrap">
-      <Text size="sm" c="dimmed">
-        {label}
-      </Text>
-      {person ? (
-        <Group gap={6} wrap="nowrap">
-          <CustomAvatar
-            avatarUrl={person.avatarUrl}
-            name={person.name}
-            size={20}
-            radius="xl"
-          />
-          <Text size="sm" lineClamp={1}>
-            {person.name}
-          </Text>
-        </Group>
-      ) : (
-        <Text size="sm" c="dimmed">
-          —
-        </Text>
-      )}
-    </Group>
-  );
-}
-
-function StatsSection({
-  wordCount,
-  characterCount,
-  createdAt,
-  updatedAt,
-}: {
-  wordCount: number;
-  characterCount: number;
-  createdAt: Date | string;
-  updatedAt: Date | string;
-}) {
-  const { t } = useTranslation();
-  return (
-    <Stack gap="xs">
-      <Text size="xs" fw={500} c="dimmed">
-        {t("Stats")}
-      </Text>
-      <StatRow label={t("Word count")} value={String(wordCount)} />
-      <StatRow label={t("Characters")} value={String(characterCount)} />
-      <StatRow
-        label={t("Created")}
-        value={formattedDate(new Date(createdAt))}
-      />
-      <StatRow
-        label={t("Last updated")}
-        value={timeAgo(new Date(updatedAt))}
-      />
-    </Stack>
-  );
-}
-
-function StatRow({ label, value }: { label: string; value: string }) {
-  return (
-    <Group justify="space-between" wrap="nowrap">
-      <Text size="sm" c="dimmed">
-        {label}
-      </Text>
-      <Text size="sm">{value}</Text>
-    </Group>
-  );
-}
-
-function BacklinksSection({
-  incomingCount,
-  outgoingCount,
-  isLoading,
-  onClick,
-}: {
-  incomingCount: number;
-  outgoingCount: number;
-  isLoading: boolean;
-  onClick: () => void;
-}) {
-  const { t } = useTranslation();
-  return (
-    <Stack gap="xs">
-      <Text size="xs" fw={500} c="dimmed">
-        {t("Backlinks")}
-      </Text>
-      <BacklinksRow
-        label={t("Incoming links")}
-        count={incomingCount}
-        isLoading={isLoading}
-        onClick={onClick}
-      />
-      <BacklinksRow
-        label={t("Outgoing links")}
-        count={outgoingCount}
-        isLoading={isLoading}
-        onClick={onClick}
-      />
-    </Stack>
-  );
-}
-
-function BacklinksRow({
-  label,
-  count,
-  isLoading,
-  onClick,
-}: {
-  label: string;
-  count: number;
-  isLoading: boolean;
-  onClick: () => void;
-}) {
-  return (
-    <UnstyledButton
-      onClick={onClick}
-      style={{
-        padding: "4px 4px",
-        borderRadius: 4,
-      }}
-    >
-      <Group justify="space-between" wrap="nowrap">
-        <Text size="sm" c="dimmed">
-          {label}
-        </Text>
-        <Group gap={6} wrap="nowrap">
-          {isLoading ? (
-            <Skeleton height={18} width={20} />
-          ) : (
-            <Text size="sm">{count}</Text>
-          )}
-          <IconChevronRight size={16} stroke={2} color="var(--mantine-color-dimmed)" />
-        </Group>
-      </Group>
-    </UnstyledButton>
-  );
-}

apps/client/src/features/page-details/queries/backlinks-query.ts

@@ -1,45 +0,0 @@
-import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
-import {
-  getBacklinks,
-  getBacklinksCount,
-} from "@/features/page-details/services/backlinks-service.ts";
-import {
-  BacklinkDirection,
-  IBacklinkCount,
-} from "@/features/page-details/types/backlink.types.ts";
-
-const BACKLINKS_STALE_TIME = 30 * 1000;
-const BACKLINKS_PAGE_LIMIT = 100;
-
-export function useBacklinksCountQuery(pageId: string | undefined) {
-  return useQuery<IBacklinkCount>({
-    queryKey: ["backlinks-count", pageId],
-    queryFn: () => getBacklinksCount(pageId as string),
-    enabled: !!pageId,
-    staleTime: BACKLINKS_STALE_TIME,
-  });
-}
-
-export function useBacklinksQuery(
-  pageId: string | undefined,
-  direction: BacklinkDirection,
-  enabled: boolean,
-) {
-  return useInfiniteQuery({
-    queryKey: ["backlinks", pageId, direction],
-    queryFn: ({ pageParam }) =>
-      getBacklinks({
-        pageId: pageId as string,
-        direction,
-        cursor: pageParam,
-        limit: BACKLINKS_PAGE_LIMIT,
-      }),
-    enabled: enabled && !!pageId,
-    initialPageParam: undefined as string | undefined,
-    getNextPageParam: (lastPage) =>
-      lastPage.meta.hasNextPage
-        ? (lastPage.meta.nextCursor ?? undefined)
-        : undefined,
-    staleTime: BACKLINKS_STALE_TIME,
-  });
-}

apps/client/src/features/page-details/services/backlinks-service.ts

@@ -1,26 +0,0 @@
-import api from "@/lib/api-client";
-import { IPagination } from "@/lib/types.ts";
-import {
-  IBacklinkCount,
-  IBacklinkPageItem,
-  IBacklinksListParams,
-} from "@/features/page-details/types/backlink.types.ts";
-
-export async function getBacklinksCount(
-  pageId: string,
-): Promise<IBacklinkCount> {
-  const req = await api.post<IBacklinkCount>("/pages/backlinks-count", {
-    pageId,
-  });
-  return req.data;
-}
-
-export async function getBacklinks(
-  params: IBacklinksListParams,
-): Promise<IPagination<IBacklinkPageItem>> {
-  const req = await api.post<IPagination<IBacklinkPageItem>>(
-    "/pages/backlinks",
-    params,
-  );
-  return req.data;
-}

apps/client/src/features/page-details/types/backlink.types.ts

@@ -1,23 +0,0 @@
-export type BacklinkDirection = "incoming" | "outgoing";
-
-export interface IBacklinkCount {
-  incoming: number;
-  outgoing: number;
-}
-
-export interface IBacklinkPageItem {
-  id: string;
-  slugId: string;
-  title: string | null;
-  icon: string | null;
-  spaceId: string;
-  space: { id: string; slug: string; name: string } | null;
-  updatedAt: string;
-}
-
-export interface IBacklinksListParams {
-  pageId: string;
-  direction: BacklinkDirection;
-  cursor?: string;
-  limit?: number;
-}

apps/client/src/features/page/components/header/page-header-menu.tsx

@@ -29,7 +29,7 @@ import { buildPageUrl } from "@/features/page/page.utils.ts";
 import { notifications } from "@mantine/notifications";
 import { getAppUrl } from "@/lib/config.ts";
 import { extractPageSlugId } from "@/lib";
-import { useTreeMutation } from "@/features/page/tree/hooks/use-tree-mutation.ts";
+import { treeApiAtom } from "@/features/page/tree/atoms/tree-api-atom.ts";
 import { useDeletePageModal } from "@/features/page/hooks/use-delete-page-modal.tsx";
 import { PageWidthToggle } from "@/features/user/components/page-width-pref.tsx";
 import { Trans, useTranslation } from "react-i18next";
@@ -40,7 +40,7 @@ import {
   yjsConnectionStatusAtom,
 } from "@/features/editor/atoms/editor-atoms.ts";
 import { formattedDate } from "@/lib/time.ts";
-import { PageEditModeToggle } from "@/features/user/components/page-state-pref.tsx";
+import { PageStateSegmentedControl } from "@/features/user/components/page-state-pref.tsx";
 import MovePageModal from "@/features/page/components/move-page-modal.tsx";
 import { useTimeAgo } from "@/hooks/use-time-ago.tsx";
 import { PageShareModal } from "@/ee/page-permission";
@@ -65,11 +65,6 @@ interface PageHeaderMenuProps {
 export default function PageHeaderMenu({ readOnly }: PageHeaderMenuProps) {
   const { t } = useTranslation();
   const toggleAside = useToggleAside();
-  const { pageSlug } = useParams();
-  const { data: page } = usePageQuery({
-    pageId: extractPageSlugId(pageSlug),
-  });
-  const isDeleted = !!page?.deletedAt;
 
   useHotkeys(
     [
@@ -92,15 +87,11 @@ export default function PageHeaderMenu({ readOnly }: PageHeaderMenuProps) {
     [],
   );
 
-  if (isDeleted) {
-    return null;
-  }
-
   return (
     <>
       <ConnectionWarning />
 
-      {!readOnly && <PageEditModeToggle size="xs" />}
+      {!readOnly && <PageStateSegmentedControl size="xs" />}
 
       <PageShareModal readOnly={readOnly} />
 
@@ -143,7 +134,7 @@ function PageActionMenu({ readOnly }: PageActionMenuProps) {
     pageId: extractPageSlugId(pageSlug),
   });
   const { openDeleteModal } = useDeletePageModal();
-  const { handleDelete } = useTreeMutation(page?.spaceId ?? "");
+  const [tree] = useAtom(treeApiAtom);
   const [exportOpened, { open: openExportModal, close: closeExportModal }] =
     useDisclosure(false);
   const [
@@ -192,7 +183,7 @@ function PageActionMenu({ readOnly }: PageActionMenuProps) {
   };
 
   const handleDeletePage = () => {
-    openDeleteModal({ onConfirm: () => handleDelete(page.id) });
+    openDeleteModal({ onConfirm: () => tree?.delete(page.id) });
   };
 
   const handleToggleFavorite = () => {

apps/client/src/features/page/components/header/page-header.tsx

@@ -8,7 +8,7 @@ interface Props {
 }
 export default function PageHeader({ readOnly }: Props) {
   return (
-    <div className={classes.header} data-page-header="true">
+    <div className={classes.header}>
       <Group justify="space-between" h="100%" px="md" wrap="nowrap" className={classes.group}>
         <Breadcrumb />
 

apps/client/src/features/page/hooks/use-restore-page-modal.tsx

@@ -1,30 +0,0 @@
-import { modals } from "@mantine/modals";
-import { Text } from "@mantine/core";
-import { useTranslation } from "react-i18next";
-
-type UseRestoreModalProps = {
-  title?: string | null;
-  onConfirm: () => void;
-};
-
-export function useRestorePageModal() {
-  const { t } = useTranslation();
-  const openRestoreModal = ({ title, onConfirm }: UseRestoreModalProps) => {
-    modals.openConfirmModal({
-      title: t("Restore page"),
-      children: (
-        <Text size="sm">
-          {t("Restore '{{title}}' and its sub-pages?", {
-            title: title || t("Untitled"),
-          })}
-        </Text>
-      ),
-      centered: true,
-      labels: { confirm: t("Restore"), cancel: t("Cancel") },
-      confirmProps: { color: "blue" },
-      onConfirm,
-    });
-  };
-
-  return { openRestoreModal } as const;
-}

apps/client/src/features/page/queries/page-query.ts

@@ -37,7 +37,7 @@ import { validate as isValidUuid } from "uuid";
 import { useTranslation } from "react-i18next";
 import { useAtom } from "jotai";
 import { treeDataAtom } from "@/features/page/tree/atoms/tree-data-atom";
-import { treeModel } from "@/features/page/tree/model/tree-model";
+import { SimpleTree } from "react-arborist";
 import { SpaceTreeNode } from "@/features/page/tree/types";
 import { useQueryEmit } from "@/features/websocket/use-query-emit";
 
@@ -117,20 +117,10 @@ export function useUpdatePageMutation() {
 }
 
 export function useRemovePageMutation() {
-  const { t } = useTranslation();
   return useMutation({
     mutationFn: (pageId: string) => deletePage(pageId, false),
     onSuccess: (_, pageId) => {
-      notifications.show({ message: t("Page moved to trash") });
+      notifications.show({ message: "Page moved to trash" });
-
-      // Stamp deletedAt so a re-visit shows the trash banner, not stale state.
-      const cached = queryClient.getQueryData<IPage>(["pages", pageId]);
-      if (cached) {
-        const stamped = { ...cached, deletedAt: new Date() };
-        queryClient.setQueryData(["pages", cached.id], stamped);
-        queryClient.setQueryData(["pages", cached.slugId], stamped);
-      }
-
       invalidateOnDeletePage(pageId);
       queryClient.invalidateQueries({
         predicate: (item) =>
@@ -138,7 +128,7 @@ export function useRemovePageMutation() {
       });
     },
     onError: (error) => {
-      notifications.show({ message: t("Failed to delete page"), color: "red" });
+      notifications.show({ message: "Failed to delete page", color: "red" });
     },
   });
 }
@@ -172,17 +162,19 @@ export function useMovePageMutation() {
 }
 
 export function useRestorePageMutation() {
-  const { t } = useTranslation();
   const [treeData, setTreeData] = useAtom(treeDataAtom);
   const emit = useQueryEmit();
 
   return useMutation({
     mutationFn: (pageId: string) => restorePage(pageId),
     onSuccess: async (restoredPage) => {
-      notifications.show({ message: t("Page restored successfully") });
+      notifications.show({ message: "Page restored successfully" });
+
+      // Add the restored page back to the tree
+      const treeApi = new SimpleTree<SpaceTreeNode>(treeData);
 
       // Check if the page already exists in the tree (it shouldn't)
-      if (!treeModel.find(treeData, restoredPage.id)) {
+      if (!treeApi.find(restoredPage.id)) {
         // Create the tree node data with hasChildren from backend
         const nodeData: SpaceTreeNode = {
           id: restoredPage.id,
@@ -201,17 +193,24 @@ export function useRestorePageMutation() {
         let index = 0;
 
         if (parentId) {
-          const parentNode = treeModel.find(treeData, parentId);
+          const parentNode = treeApi.find(parentId);
           if (parentNode) {
             index = parentNode.children?.length || 0;
           }
         } else {
           // Root level page
-          index = treeData.length;
+          index = treeApi.data.length;
         }
 
         // Add the node to the tree
-        setTreeData(treeModel.insert(treeData, parentId, nodeData, index));
+        treeApi.create({
+          parentId,
+          index,
+          data: nodeData,
+        });
+
+        // Update the tree data
+        setTreeData(treeApi.data);
 
         // Emit websocket event to sync with other users
         setTimeout(() => {
@@ -233,16 +232,9 @@ export function useRestorePageMutation() {
       await queryClient.invalidateQueries({
         queryKey: ["trash-list", restoredPage.spaceId],
       });
-
-      // Merge — restore endpoint returns a skinny page;
-      // Replace would strip space/permissions/content and break the editor.
-      const merge = (cached: IPage | undefined) =>
-        cached ? { ...cached, ...restoredPage } : cached;
-      queryClient.setQueryData<IPage>(["pages", restoredPage.id], merge);
-      queryClient.setQueryData<IPage>(["pages", restoredPage.slugId], merge);
     },
     onError: (error) => {
-      notifications.show({ message: t("Failed to restore page"), color: "red" });
+      notifications.show({ message: "Failed to restore page", color: "red" });
     },
   });
 }

apps/client/src/features/page/trash/components/deleted-page-banner.tsx

@@ -1,140 +0,0 @@
-import { ActionIcon, Button, Group, Paper, Text, Tooltip } from "@mantine/core";
-import { IconRestore, IconTrash } from "@tabler/icons-react";
-import { useNavigate } from "react-router-dom";
-import { Trans, useTranslation } from "react-i18next";
-import { useTimeAgo } from "@/hooks/use-time-ago.tsx";
-import { useRestorePageModal } from "@/features/page/hooks/use-restore-page-modal.tsx";
-import { useDeletePageModal } from "@/features/page/hooks/use-delete-page-modal.tsx";
-import {
-  useDeletePageMutation,
-  usePageQuery,
-  useRestorePageMutation,
-} from "@/features/page/queries/page-query.ts";
-import { getSpaceUrl } from "@/lib/config.ts";
-import { useGetSpaceBySlugQuery } from "@/features/space/queries/space-query.ts";
-import { useSpaceAbility } from "@/features/space/permissions/use-space-ability.ts";
-import {
-  SpaceCaslAction,
-  SpaceCaslSubject,
-} from "@/features/space/permissions/permissions.type.ts";
-
-type DeletedPageBannerProps = {
-  slugId: string;
-};
-
-export function DeletedPageBanner({ slugId }: DeletedPageBannerProps) {
-  const { t } = useTranslation();
-  const navigate = useNavigate();
-  const { data: page } = usePageQuery({ pageId: slugId });
-  const { data: space } = useGetSpaceBySlugQuery(page?.space?.slug);
-  const spaceAbility = useSpaceAbility(space?.membership?.permissions);
-  const deletedTimeAgo = useTimeAgo(page?.deletedAt);
-  const restorePageMutation = useRestorePageMutation();
-  const deletePageMutation = useDeletePageMutation();
-  const { openRestoreModal } = useRestorePageModal();
-  const { openDeleteModal } = useDeletePageModal();
-
-  if (!page?.deletedAt) return null;
-
-  const canRestore = spaceAbility.can(
-    SpaceCaslAction.Edit,
-    SpaceCaslSubject.Page,
-  );
-  const canPermanentlyDelete = spaceAbility.can(
-    SpaceCaslAction.Manage,
-    SpaceCaslSubject.Settings,
-  );
-  const actorName = page.deletedBy?.name ?? t("Someone");
-
-  const handleRestore = () => {
-    openRestoreModal({
-      title: page.title,
-      onConfirm: () => restorePageMutation.mutate(page.id),
-    });
-  };
-
-  const handlePermanentDelete = () => {
-    openDeleteModal({
-      isPermanent: true,
-      onConfirm: async () => {
-        await deletePageMutation.mutateAsync(page.id);
-        navigate(getSpaceUrl(page.space?.slug));
-      },
-    });
-  };
-
-  const hasAnyAction = canRestore || canPermanentlyDelete;
-
-  return (
-    <Paper radius="sm" mb="md" px="md" py="xs" bg="red.0">
-      <Group justify="space-between" wrap="wrap" gap="sm">
-        <Text size="sm" style={{ flex: 1, minWidth: 0 }}>
-          <Trans
-            i18nKey="<b>{{name}}</b> moved this page to Trash {{time}}."
-            values={{ name: actorName, time: deletedTimeAgo }}
-            components={{ b: <Text span fw={600} inherit /> }}
-          />
-        </Text>
-        {hasAnyAction && (
-          <>
-            <Group gap="xs" wrap="nowrap" visibleFrom="sm">
-              {canRestore && (
-                <Button
-                  size="xs"
-                  variant="light"
-                  color="red"
-                  leftSection={<IconRestore size={16} />}
-                  onClick={handleRestore}
-                  loading={restorePageMutation.isPending}
-                >
-                  {t("Restore page")}
-                </Button>
-              )}
-              {canPermanentlyDelete && (
-                <Button
-                  size="xs"
-                  variant="light"
-                  color="red"
-                  leftSection={<IconTrash size={16} />}
-                  onClick={handlePermanentDelete}
-                  loading={deletePageMutation.isPending}
-                >
-                  {t("Permanently delete")}
-                </Button>
-              )}
-            </Group>
-            <Group gap="xs" wrap="nowrap" hiddenFrom="sm">
-              {canRestore && (
-                <Tooltip label={t("Restore page")} withArrow>
-                  <ActionIcon
-                    size="lg"
-                    variant="default"
-                    onClick={handleRestore}
-                    loading={restorePageMutation.isPending}
-                    aria-label={t("Restore page")}
-                  >
-                    <IconRestore size={18} />
-                  </ActionIcon>
-                </Tooltip>
-              )}
-              {canPermanentlyDelete && (
-                <Tooltip label={t("Permanently delete")} withArrow>
-                  <ActionIcon
-                    size="lg"
-                    variant="light"
-                    color="red"
-                    onClick={handlePermanentDelete}
-                    loading={deletePageMutation.isPending}
-                    aria-label={t("Permanently delete")}
-                  >
-                    <IconTrash size={18} />
-                  </ActionIcon>
-                </Tooltip>
-              )}
-            </Group>
-          </>
-        )}
-      </Group>
-    </Paper>
-  );
-}

apps/client/src/features/page/trash/components/trash-banner.tsx

@@ -1,21 +0,0 @@
-import { Alert, Text } from "@mantine/core";
-import { IconInfoCircle } from "@tabler/icons-react";
-import { useAtomValue } from "jotai";
-import { useTranslation } from "react-i18next";
-import { workspaceAtom } from "@/features/user/atoms/current-user-atom.ts";
-
-export function TrashBanner() {
-  const { t } = useTranslation();
-  const workspace = useAtomValue(workspaceAtom);
-  const retentionDays = workspace?.trashRetentionDays ?? 30;
-
-  return (
-    <Alert icon={<IconInfoCircle size={16} />} variant="light" color="red">
-      <Text size="sm" lh={1.35}>
-        {t("Pages in trash will be permanently deleted after {{count}} days.", {
-          count: retentionDays,
-        })}
-      </Text>
-    </Alert>
-  );
-}

apps/client/src/features/page/trash/components/trash.tsx

@@ -7,16 +7,17 @@ import {
   Group,
   ActionIcon,
   Text,
+  Alert,
   Stack,
   Menu,
 } from "@mantine/core";
 import {
+  IconInfoCircle,
   IconDots,
   IconRestore,
   IconTrash,
   IconFileDescription,
 } from "@tabler/icons-react";
-import { TrashBanner } from "@/features/page/trash/components/trash-banner.tsx";
 import {
   useDeletedPagesQuery,
   useRestorePageMutation,
@@ -30,10 +31,12 @@ import TrashPageContentModal from "@/features/page/trash/components/trash-page-c
 import { UserInfo } from "@/components/common/user-info.tsx";
 import Paginate from "@/components/common/paginate.tsx";
 import { useCursorPaginate } from "@/hooks/use-cursor-paginate";
-import { useRestorePageModal } from "@/features/page/hooks/use-restore-page-modal.tsx";
+import { useAtom } from "jotai";
+import { workspaceAtom } from "@/features/user/atoms/current-user-atom.ts";
 
 export default function Trash() {
   const { t } = useTranslation();
+  const [workspace] = useAtom(workspaceAtom);
   const { spaceSlug } = useParams();
   const { cursor, goNext, goPrev } = useCursorPaginate();
   const { data: space } = useGetSpaceBySlugQuery(spaceSlug);
@@ -42,7 +45,6 @@ export default function Trash() {
   });
   const restorePageMutation = useRestorePageMutation();
   const deletePageMutation = useDeletePageMutation();
-  const { openRestoreModal } = useRestorePageModal();
 
   const [selectedPage, setSelectedPage] = useState<{
     title: string;
@@ -76,6 +78,23 @@ export default function Trash() {
     });
   };
 
+  const openRestoreModal = (pageId: string, pageTitle: string) => {
+    modals.openConfirmModal({
+      title: t("Restore page"),
+      children: (
+        <Text size="sm">
+          {t("Restore '{{title}}' and its sub-pages?", {
+            title: pageTitle || "Untitled",
+          })}
+        </Text>
+      ),
+      centered: true,
+      labels: { confirm: t("Restore"), cancel: t("Cancel") },
+      confirmProps: { color: "blue" },
+      onConfirm: () => handleRestorePage(pageId),
+    });
+  };
+
   const hasPages = deletedPages && deletedPages.items.length > 0;
 
   const handlePageClick = (page: any) => {
@@ -90,7 +109,11 @@ export default function Trash() {
           <Title order={2}>{t("Trash")}</Title>
         </Group>
 
-        <TrashBanner />
+        <Alert icon={<IconInfoCircle size={16} />} variant="light" color="red">
+          <Text size="sm">
+            {t("Pages in trash will be permanently deleted after {{count}} days.", { count: workspace?.trashRetentionDays ?? 30 })}
+          </Text>
+        </Alert>
 
         {isLoading || !deletedPages ? (
           <></>
@@ -158,10 +181,7 @@ export default function Trash() {
                           <Menu.Item
                             leftSection={<IconRestore size={16} />}
                             onClick={() =>
-                              openRestoreModal({
+                              openRestoreModal(page.id, page.title)
-                                title: page.title,
-                                onConfirm: () => handleRestorePage(page.id),
-                              })
                             }
                           >
                             {t("Restore")}