fix(editor): prevent stuck list after pasting plain text

marked.parse() emits a trailing newline that became a whitespace text
node at the body level, which parseSlice converted into a spurious
paragraph at the end of the target — inside a list item this blocked
the "Enter exits list" behavior since splitListItem's empty-last-block
check never fired.
Strip whitespace-only text nodes between block elements before parsing
the slice, and place the cursor at the end of the inserted content.
Also extend transformPasted to drop trailing hardBreaks and whitespace
text nodes for the HTML-clipboard path.

.env.example

@@ -48,13 +48,6 @@ GOTENBERG_URL=
 
 DISABLE_TELEMETRY=false
 
-# Allow other sites to embed Docmost in an iframe.
-IFRAME_EMBED_ALLOWED=false
-
-# Only used when IFRAME_EMBED_ALLOWED=true. When empty, any origin is allowed.
-# Example: https://intranet.example.com,https://portal.example.com
-IFRAME_ALLOWED_ORIGINS=
-
 # Enable debug logging in production (default: false)
 DEBUG_MODE=false
 

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.16.0",
-    "blueimp-load-image": "5.16.0",
+    "blueimp-load-image": "^5.16.0",
-    "clsx": "2.1.1",
+    "clsx": "^2.1.1",
-    "file-saver": "2.0.5",
+    "emoji-mart": "^5.6.0",
-    "highlightjs-sap-abap": "0.3.0",
+    "file-saver": "^2.0.5",
+    "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.",
@@ -408,10 +392,6 @@
   "Write...": "Write...",
   "Column count": "Column count",
   "{{count}} Columns": "{{count}} Columns",
-  "{{count}} command available_one": "1 command available",
-  "{{count}} command available_other": "{{count}} commands available",
-  "{{count}} result available_one": "1 result available",
-  "{{count}} result available_other": "{{count}} results available",
   "Equal columns": "Equal columns",
   "Left sidebar": "Left sidebar",
   "Right sidebar": "Right sidebar",
@@ -586,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",
@@ -877,12 +855,9 @@
   "AI Chat": "AI Chat",
   "Analyze for insights": "Analyze for insights",
   "Ask anything...": "Ask anything...",
-  "Assistant said:": "Assistant said:",
   "Chat history": "Chat history",
   "Chat name": "Chat name",
-  "Chat transcript": "Chat transcript",
   "Close": "Close",
-  "Copy assistant response": "Copy assistant response",
   "Docmost AI": "Docmost AI",
   "Failed to load chat. An error occurred.": "Failed to load chat. An error occurred.",
   "Failed to render this message.": "Failed to render this message.",
@@ -892,8 +867,6 @@
   "No chats found": "No chats found",
   "No conversations yet": "No conversations yet",
   "Open full page": "Open full page",
-  "Scroll to bottom": "Scroll to bottom",
-  "You said:": "You said:",
   "Previous 7 days": "Previous 7 days",
   "Previous 30 days": "Previous 30 days",
   "Search chats...": "Search chats...",
@@ -945,35 +918,6 @@
   "Page actions": "Page actions",
   "Pick emoji": "Pick emoji",
   "Template menu": "Template menu",
-  "Use": "Use",
-  "Use template": "Use template",
-  "Preview template: {{title}}": "Preview template: {{title}}",
-  "Use a template": "Use a template",
-  "Search templates...": "Search templates...",
-  "Search spaces...": "Search spaces...",
-  "No templates found": "No templates found",
-  "No spaces found": "No spaces found",
-  "Browse all templates": "Browse all templates",
-  "This space": "This space",
-  "All templates": "All templates",
-  "Global": "Global",
-  "New template": "New template",
-  "Edit template": "Edit template",
-  "Are you sure you want to delete this template?": "Are you sure you want to delete this template?",
-  "Template scope updated": "Template scope updated",
-  "Choose which space this template belongs to": "Choose which space this template belongs to",
-  "Scope": "Scope",
-  "Select scope": "Select scope",
-  "Title": "Title",
-  "Saving...": "Saving...",
-  "Saved": "Saved",
-  "Save failed. Retry": "Save failed. Retry",
-  "By {{name}}": "By {{name}}",
-  "Updated {{time}}": "Updated {{time}}",
-  "Choose destination": "Choose destination",
-  "Search pages and spaces...": "Search pages and spaces...",
-  "No results found": "No results found",
-  "You don't have permission to create pages here": "You don't have permission to create pages here",
   "Chat menu": "Chat menu",
   "API key menu": "API key menu",
   "Jump to comment selection": "Jump to comment selection",
@@ -1053,33 +997,5 @@
   "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}}",
+  "Updated {{date}}": "Updated {{date}}"
-  "Cell actions": "Cell actions",
-  "Column actions": "Column actions",
-  "Row actions": "Row actions",
-  "Filter": "Filter",
-  "Page title": "Page title",
-  "Page content": "Page content",
-  "Member actions": "Member actions",
-  "Toggle password visibility": "Toggle password visibility",
-  "Send comment": "Send comment",
-  "Token actions": "Token actions",
-  "Template settings": "Template settings",
-  "Edit diagram": "Edit diagram",
-  "Edit embed": "Edit embed",
-  "Edit drawing": "Edit drawing",
-  "Delete equation": "Delete equation",
-  "Invite actions": "Invite actions",
-  "Get started": "Get started",
-  "* indicates required fields": "* indicates required fields",
-  "List of spaces in this workspace": "List of spaces in this workspace",
-  "Active sessions": "Active sessions",
-  "Add {{name}} to favorites": "Add {{name}} to favorites",
-  "Remove {{name}} from favorites": "Remove {{name}} from favorites",
-  "Added to favorites": "Added to favorites",
-  "Removed from favorites": "Removed from favorites",
-  "Added {{name}} to favorites": "Added {{name}} to favorites",
-  "Removed {{name}} from favorites": "Removed {{name}} from favorites",
-  "Page menu for {{name}}": "Page menu for {{name}}",
-  "Create subpage of {{name}}": "Create subpage of {{name}}"
 }

apps/client/src/components/common/avatar-uploader.tsx

@@ -80,20 +80,12 @@ export default function AvatarUploader({
     }
   };
 
-  const actionLabel = {
+  const ariaLabel = {
     [AvatarIconType.AVATAR]: t("Change avatar"),
     [AvatarIconType.SPACE_ICON]: t("Change space icon"),
     [AvatarIconType.WORKSPACE_ICON]: t("Change workspace icon"),
   }[type];
 
-  // Per WCAG 2.5.3 (Label in Name), the accessible name must include the
-  // visible text. When no image is set, the avatar renders the name's
-  // initials, so prepend the name to the action label.
-  const ariaLabel =
-    !currentImageUrl && fallbackName
-      ? `${fallbackName} – ${actionLabel}`
-      : actionLabel;
-
   const handleRemove = async () => {
     if (disabled) return;
 

apps/client/src/components/common/copy.tsx

@@ -8,19 +8,15 @@ interface CopyProps {
   text: string;
   size?: MantineSize;
   color?: MantineColor;
-  /** Override the accessible name (and tooltip) when not yet copied. Lets callers disambiguate adjacent copy buttons for screen readers. */
-  label?: string;
 }
-export default function CopyTextButton({ text, size, label }: CopyProps) {
+export default function CopyTextButton({ text, size }: CopyProps) {
   const { t } = useTranslation();
 
-  const copyLabel = label ?? t("Copy");
-
   return (
     <CopyButton value={text} timeout={2000}>
       {({ copied, copy }) => (
         <Tooltip
-          label={copied ? t("Copied") : copyLabel}
+          label={copied ? t("Copied") : t("Copy")}
           withArrow
           position="right"
         >
@@ -29,7 +25,7 @@ export default function CopyTextButton({ text, size, label }: CopyProps) {
             variant="subtle"
             onClick={copy}
             size={size}
-            aria-label={copied ? t("Copied") : copyLabel}
+            aria-label={copied ? t("Copied") : t("Copy")}
           >
             {copied ? <IconCheck size={16} /> : <IconCopy size={16} />}
           </ActionIcon>

apps/client/src/components/common/export-modal.tsx

@@ -81,7 +81,7 @@ export default function ExportModal({
       <Modal.Content style={{ overflow: "hidden" }}>
         <Modal.Header py={0}>
           <Modal.Title fw={500}>{t(`Export ${type}`)}</Modal.Title>
-          <Modal.CloseButton aria-label={t("Close")} />
+          <Modal.CloseButton />
         </Modal.Header>
         <Modal.Body>
           <Group justify="space-between" wrap="nowrap">

apps/client/src/components/common/recent-changes.tsx

@@ -17,7 +17,6 @@ import { EmptyState } from "@/components/ui/empty-state.tsx";
 import { getSpaceUrl } from "@/lib/config.ts";
 import { useTranslation } from "react-i18next";
 import { getInitialsColor } from "@/lib/get-initials-color.ts";
-import rowClasses from "@/components/ui/clickable-table-row.module.css";
 
 interface Props {
   spaceId?: string;
@@ -42,10 +41,9 @@ export default function RecentChanges({ spaceId }: Props) {
         <Table highlightOnHover verticalSpacing="sm">
           <Table.Tbody>
             {pages.map((page) => (
-              <Table.Tr key={page.id} className={rowClasses.row}>
+              <Table.Tr key={page.id}>
                 <Table.Td>
                   <UnstyledButton
-                    className={rowClasses.link}
                     component={Link}
                     to={buildPageUrl(page?.space.slug, page.slugId, page.title)}
                   >

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

@@ -1,27 +1,19 @@
-import { ActionIcon, Box, Group, ScrollArea, Title, 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";
-import React, { ReactNode, useEffect } from "react";
+import React, { ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import { TableOfContents } from "@/features/editor/components/table-of-contents/table-of-contents.tsx";
 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";
-import { ASIDE_PANEL_ID } from "@/hooks/use-toggle-aside.tsx";
 
 export default function Aside() {
-  const [{ tab, isAsideOpen }, setAsideState] = useAtom(asideStateAtom);
+  const [{ tab }] = useAtom(asideStateAtom);
   const { t } = useTranslation();
   const pageEditor = useAtomValue(pageEditorAtom);
-  const closeAside = () => setAsideState((s) => ({ ...s, isAsideOpen: false }));
-
-  useEffect(() => {
-    if (!isAsideOpen) return;
-    document.getElementById(ASIDE_PANEL_ID)?.focus();
-  }, [isAsideOpen, tab]);
 
   let title: string;
   let component: ReactNode;
@@ -53,19 +45,9 @@ export default function Aside() {
       {component && (
         <>
           {tab !== "chat" && (
-            <Group justify="space-between" wrap="nowrap" mb="md">
+            <Text mb="md" fw={500}>
-              <Title order={2} size="h6" fw={500}>{t(title)}</Title>
+              {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

@@ -18,8 +18,6 @@ import classes from "./app-shell.module.css";
 import { useTrialEndAction } from "@/ee/hooks/use-trial-end-action.tsx";
 import { useToggleSidebar } from "@/components/layouts/global/hooks/hooks/use-toggle-sidebar.ts";
 import GlobalSidebar from "@/components/layouts/global/global-sidebar.tsx";
-import { ASIDE_PANEL_ID } from "@/hooks/use-toggle-aside.tsx";
-import { MAIN_CONTENT_ID, SkipToMain } from "@/components/ui/skip-to-main.tsx";
 
 export default function GlobalAppShell({
   children,
@@ -83,8 +81,6 @@ export default function GlobalAppShell({
   const showGlobalSidebar = !isSpaceRoute && !isSettingsRoute && !isAiRoute;
 
   return (
-    <>
-      <SkipToMain />
     <AppShell
       header={{ height: 45 }}
       navbar={{
@@ -129,7 +125,7 @@ export default function GlobalAppShell({
         {isAiRoute && <AiChatSidebar />}
         {showGlobalSidebar && <GlobalSidebar />}
       </AppShell.Navbar>
-      <AppShell.Main id={MAIN_CONTENT_ID} tabIndex={-1}>
+      <AppShell.Main id="main-content">
         {isSettingsRoute ? (
           <Container size={900} pb={80}>
             {children}
@@ -141,8 +137,6 @@ export default function GlobalAppShell({
 
       {isPageRoute && (
         <AppShell.Aside
-          id={ASIDE_PANEL_ID}
-          tabIndex={-1}
           className={classes.aside}
           p="md"
           withBorder={false}
@@ -162,6 +156,5 @@ export default function GlobalAppShell({
         </AppShell.Aside>
       )}
     </AppShell>
-    </>
   );
 }

apps/client/src/components/layouts/global/global-sidebar.module.css

@@ -31,11 +31,6 @@
         color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
     }
 
-    &:focus-visible {
-        outline: 2px solid var(--mantine-primary-color-filled);
-        outline-offset: 2px;
-    }
-
     &[data-active] {
         &,
         & :hover {
@@ -43,16 +38,6 @@
             color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
         }
     }
-
-    &[data-disabled] {
-        cursor: not-allowed;
-        opacity: 0.5;
-
-        @mixin hover {
-            background-color: transparent;
-            color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
-        }
-    }
 }
 
 .linkIcon {
@@ -101,9 +86,4 @@
         );
         color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
     }
-
-    &:focus-visible {
-        outline: 2px solid var(--mantine-primary-color-filled);
-        outline-offset: 2px;
-    }
 }

apps/client/src/components/layouts/global/global-sidebar.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { ScrollArea, Text, Divider, Modal, UnstyledButton, Tooltip } from "@mantine/core";
+import { ScrollArea, Text, Divider, Modal, UnstyledButton } from "@mantine/core";
 import {
   IconHome,
   IconClock,
@@ -7,7 +7,6 @@ import {
   IconLayoutGrid,
   IconSettings,
   IconUserPlus,
-  IconTemplate,
 } from "@tabler/icons-react";
 import { Link, useLocation } from "react-router-dom";
 import classes from "./global-sidebar.module.css";
@@ -21,9 +20,12 @@ import { useDisclosure } from "@mantine/hooks";
 import { WorkspaceInviteForm } from "@/features/workspace/components/members/components/workspace-invite-form";
 import { CustomAvatar } from "@/components/ui/custom-avatar";
 import { AvatarIconType } from "@/features/attachments/types/attachment.types";
-import { useHasFeature } from "@/ee/hooks/use-feature";
+
-import { Feature } from "@/ee/features";
+const mainNavItems = [
-import { useUpgradeLabel } from "@/ee/hooks/use-upgrade-label";
+  { label: "Home", icon: IconHome, path: "/home" },
+  { label: "Favorites", icon: IconStar, path: "/favorites" },
+  { label: "Spaces", icon: IconLayoutGrid, path: "/spaces" },
+];
 
 export default function GlobalSidebar() {
   const { t } = useTranslation();
@@ -31,19 +33,6 @@ export default function GlobalSidebar() {
   const [active, setActive] = useState(location.pathname);
   const [mobileSidebarOpened] = useAtom(mobileSidebarAtom);
   const toggleMobileSidebar = useToggleSidebar(mobileSidebarAtom);
-  const hasTemplates = useHasFeature(Feature.TEMPLATES);
-  const upgradeLabel = useUpgradeLabel();
-  const mainNavItems = [
-    { label: "Home", icon: IconHome, path: "/home" },
-    { label: "Favorites", icon: IconStar, path: "/favorites" },
-    { label: "Spaces", icon: IconLayoutGrid, path: "/spaces" },
-    {
-      label: "Templates",
-      icon: IconTemplate,
-      path: "/templates",
-      disabled: !hasTemplates,
-    },
-  ];
   const { data: favoriteSpacesData, isPending: isFavoritesPending } = useFavoritesQuery("space");
   const favoriteSpaces = favoriteSpacesData?.pages.flatMap((p) => p.items) ?? [];
   const sortedFavoriteSpaces = [...favoriteSpaces]
@@ -69,38 +58,18 @@ export default function GlobalSidebar() {
     <div className={classes.navbar}>
       <ScrollArea w="100%" style={{ flex: 1 }}>
         <div className={classes.section}>
-          {mainNavItems.map((item) =>
+          {mainNavItems.map((item) => (
-            item.disabled ? (
-              <Tooltip
-                key={item.label}
-                label={upgradeLabel}
-                position="right"
-                withArrow
-              >
-                <UnstyledButton
-                  className={classes.link}
-                  data-disabled
-                  aria-disabled="true"
-                  tabIndex={-1}
-                >
-                  <item.icon className={classes.linkIcon} stroke={2} />
-                  <span>{t(item.label)}</span>
-                </UnstyledButton>
-              </Tooltip>
-            ) : (
             <Link
               key={item.label}
               className={classes.link}
               data-active={active === item.path || undefined}
-                aria-current={active === item.path ? "page" : undefined}
               to={item.path}
               onClick={handleNavClick}
             >
               <item.icon className={classes.linkIcon} stroke={2} />
               <span>{t(item.label)}</span>
             </Link>
-            ),
+          ))}
-          )}
         </div>
 
         <Divider my="xs" />
@@ -160,7 +129,6 @@ export default function GlobalSidebar() {
         <Link
           className={classes.link}
           data-active={active.startsWith("/settings") || undefined}
-          aria-current={active.startsWith("/settings") ? "page" : undefined}
           to="/settings/account/profile"
           onClick={handleNavClick}
         >

apps/client/src/components/settings/settings-title.tsx

@@ -4,7 +4,7 @@ import { Divider, Title } from '@mantine/core';
 export default function SettingsTitle({ title }: { title: string }) {
   return (
     <>
-      <Title order={1} size="h3">
+      <Title order={3}>
         {title}
       </Title>
       <Divider my="md" />

apps/client/src/components/ui/clickable-table-row.module.css

@@ -1,29 +0,0 @@
-/*
- * Focus styling for list-style tables (recent changes, favorites, all
- * spaces, groups, verified pages, shares).
- *
- * Per WAI-ARIA Authoring Practices and Adrian Roselli's guidance on table
- * accessibility (https://adrianroselli.com/2020/02/block-links-cards-clickable-regions-etc.html),
- * data tables should not be made fully clickable. Only the title cell is the
- * link, and that link is what receives Tab focus.
- *
- * - `.row` adds a subtle background tint when the row contains the focused
- *   element, so keyboard users can see which row they're inspecting.
- * - `.link` adds a visible :focus-visible outline on the title link itself.
- *
- * No stretched-link pseudo here on purpose: absolutely-positioned pseudos
- * inside table cells cause column reflow on focus in Chromium.
- */
-
-.row:focus-within {
-  background-color: light-dark(
-    var(--mantine-color-gray-1),
-    var(--mantine-color-dark-6)
-  );
-}
-
-.link:focus-visible {
-  outline: 2px solid var(--mantine-primary-color-filled);
-  outline-offset: 2px;
-  border-radius: var(--mantine-radius-sm);
-}

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

@@ -16,18 +16,14 @@ interface CustomAvatarProps {
   mt?: string | number;
 }
 
-// `color.shade` pairs whose contrast meets WCAG AA (4.5:1) in BOTH variants:
+// `color.shade` pairs whose filled background meets WCAG AA (4.5:1) against
-//   - filled: white text on the shade as bg
+// white text. Avoids lime/yellow/green/orange — even their dark shades have
-//   - light:  shade as text on the color's light-bg (10% color.6 over white)
+// weak white-text contrast.
-// Avoids lime/yellow/green/orange — even their dark shades have weak
-// contrast. grape and indigo were bumped from .7 to darker shades because
-// the original picks failed: grape.7 was 4.02/3.61 (both fail) and
-// indigo.7 was 4.98/4.39 (light fails by a hair).
 const SAFE_INITIALS_COLORS: MantineColor[] = [
   "blue.8",
   "cyan.9",
-  "grape.9",
+  "grape.7",
-  "indigo.8",
+  "indigo.7",
   "pink.8",
   "red.8",
   "violet.7",

apps/client/src/components/ui/destination-picker/destination-picker-modal.tsx

@@ -16,8 +16,6 @@ export function DestinationPickerModal({
   loading,
   excludePageId,
   pageLimit,
-  initialSpaceId,
-  searchSpacesOnly,
 }: DestinationPickerModalProps) {
   const { t } = useTranslation();
   const [selection, setSelection] = useState<DestinationSelection | null>(null);
@@ -41,15 +39,13 @@ export function DestinationPickerModal({
       <Modal.Content>
         <Modal.Header py={0}>
           <Modal.Title fw={500}>{title}</Modal.Title>
-          <Modal.CloseButton aria-label={t("Close")} />
+          <Modal.CloseButton />
         </Modal.Header>
         <Modal.Body>
           <DestinationPicker
             onSelectionChange={setSelection}
             excludePageId={excludePageId}
             pageLimit={pageLimit}
-            initialSpaceId={initialSpaceId}
-            searchSpacesOnly={searchSpacesOnly}
           />
 
           <Group justify="flex-end" mt="md">

apps/client/src/components/ui/destination-picker/destination-picker.module.css

@@ -13,7 +13,6 @@
     display: flex;
     align-items: center;
     gap: 8px;
-    color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
     transition: background-color 150ms ease;
     user-select: none;
 
@@ -23,11 +22,6 @@
                 var(--mantine-color-dark-6)
         );
     }
-
-    &:focus-visible {
-        outline: 2px solid var(--mantine-primary-color-filled);
-        outline-offset: -2px;
-    }
 }
 
 .selected {
@@ -63,7 +57,7 @@
     border-radius: var(--mantine-radius-sm);
     flex-shrink: 0;
     transition: transform 150ms ease;
-    color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
+    color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
 
     @mixin hover {
         background-color: light-dark(
@@ -117,7 +111,7 @@
 }
 
 .spaceName {
-    color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
+    color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
     font-size: var(--mantine-font-size-xs);
     flex-shrink: 0;
 }

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

@@ -1,7 +1,7 @@
-import { useState, useCallback, useEffect, useMemo, useRef } from "react";
+import { useState, useCallback } from "react";
-import { ActionIcon, TextInput, ScrollArea, Loader } from "@mantine/core";
+import { TextInput, ScrollArea, Loader } from "@mantine/core";
 import { useDebouncedValue } from "@mantine/hooks";
-import { IconSearch, IconFileDescription } from "@tabler/icons-react";
+import { IconSearch, IconFile } from "@tabler/icons-react";
 import { useTranslation } from "react-i18next";
 import { useGetSpacesQuery } from "@/features/space/queries/space-query";
 import { useSearchSuggestionsQuery } from "@/features/search/queries/search-query";
@@ -15,29 +15,23 @@ type DestinationPickerProps = {
   onSelectionChange: (selection: DestinationSelection | null) => void;
   excludePageId?: string;
   pageLimit?: number;
-  initialSpaceId?: string;
-  searchSpacesOnly?: boolean;
 };
 
 export function DestinationPicker({
   onSelectionChange,
   excludePageId,
   pageLimit = 15,
-  initialSpaceId,
-  searchSpacesOnly,
 }: DestinationPickerProps) {
   const { t } = useTranslation();
   const [searchQuery, setSearchQuery] = useState("");
   const [selection, setSelection] = useState<DestinationSelection | null>(null);
   const [debouncedQuery] = useDebouncedValue(searchQuery, 300);
-  const viewportRef = useRef<HTMLDivElement>(null);
 
   const { data: spacesData, isLoading: spacesLoading } = useGetSpacesQuery({
     limit: 100,
   });
 
-  const searchEnabled =
+  const searchEnabled = debouncedQuery && debouncedQuery.length >= 2;
-    !searchSpacesOnly && debouncedQuery && debouncedQuery.length >= 2;
 
   const { data: searchData, isLoading: searchLoading } =
     useSearchSuggestionsQuery({
@@ -48,18 +42,6 @@ export function DestinationPicker({
 
   const isSearching = !!searchEnabled;
 
-  const filteredSpaces = useMemo(() => {
-    const items = spacesData?.items ?? [];
-    if (!searchSpacesOnly || !debouncedQuery) return items;
-    const fold = (s: string) =>
-      s
-        .normalize("NFD")
-        .replace(/[̀-ͯ]/g, "")
-        .toLocaleLowerCase();
-    const term = fold(debouncedQuery);
-    return items.filter((s) => fold(s.name).includes(term));
-  }, [spacesData, searchSpacesOnly, debouncedQuery]);
-
   const selectedId =
     selection?.type === "space" ? selection.spaceId : selection?.pageId ?? null;
 
@@ -105,48 +87,18 @@ export function DestinationPicker({
     [updateSelection],
   );
 
-  // Pre-select space when initialSpaceId is set and spaces have loaded.
-  // Only runs once: skip if user has already made a selection.
-  useEffect(() => {
-    if (!initialSpaceId || selection) return;
-    const match = spacesData?.items?.find((s) => s.id === initialSpaceId);
-    if (match) {
-      updateSelection({ type: "space", spaceId: match.id, space: match });
-      requestAnimationFrame(() => {
-        const el = viewportRef.current?.querySelector<HTMLElement>(
-          `[data-space-id="${match.id}"]`,
-        );
-        el?.scrollIntoView({ block: "nearest" });
-      });
-    }
-  }, [initialSpaceId, selection, spacesData, updateSelection]);
-
   return (
     <>
       <TextInput
         leftSection={<IconSearch size={16} />}
-        placeholder={
+        placeholder={t("Search pages and spaces...")}
-          searchSpacesOnly
-            ? t("Search spaces...")
-            : t("Search pages and spaces...")
-        }
-        aria-label={
-          searchSpacesOnly
-            ? t("Search spaces...")
-            : t("Search pages and spaces...")
-        }
         variant="filled"
         value={searchQuery}
         onChange={(e) => setSearchQuery(e.currentTarget.value)}
         className={classes.searchInput}
       />
 
-      <ScrollArea
+      <ScrollArea h="50vh" offsetScrollbars className={classes.scrollArea}>
-        h="50vh"
-        offsetScrollbars
-        className={classes.scrollArea}
-        viewportRef={viewportRef}
-      >
         {isSearching ? (
           searchLoading ? (
             <div className={classes.emptyState}>
@@ -159,28 +111,16 @@ export function DestinationPicker({
                   <div
                     key={page.id}
                     className={classes.searchResult}
-                    role="button"
-                    tabIndex={0}
                     onClick={() => handleSearchResultClick(page)}
-                    onKeyDown={(e) => {
-                      if (e.key === "Enter" || e.key === " ") {
-                        e.preventDefault();
-                        handleSearchResultClick(page);
-                      }
-                    }}
                   >
                     <div className={classes.iconWrapper}>
                       {page.icon ? (
                         page.icon
                       ) : (
-                        <ActionIcon
+                        <IconFile
-                          component="div"
+                          size={16}
-                          variant="transparent"
+                          color="var(--mantine-color-gray-5)"
-                          c="gray"
+                        />
-                          size={22}
-                        >
-                          <IconFileDescription size={18} />
-                        </ActionIcon>
                       )}
                     </div>
                     <div className={classes.pageTitle}>
@@ -201,14 +141,8 @@ export function DestinationPicker({
           <div className={classes.emptyState}>
             <Loader size="xs" />
           </div>
-        ) : filteredSpaces.length === 0 ? (
-          <div className={classes.emptyState}>
-            {searchSpacesOnly && debouncedQuery
-              ? t("No spaces found")
-              : t("No results found")}
-          </div>
         ) : (
-          filteredSpaces.map((space) => (
+          spacesData?.items?.map((space) => (
             <SpaceRow
               key={space.id}
               space={space}

apps/client/src/components/ui/destination-picker/destination-picker.types.ts

@@ -20,6 +20,4 @@ export type DestinationPickerModalProps = {
   loading?: boolean;
   excludePageId?: string;
   pageLimit?: number;
-  initialSpaceId?: string;
-  searchSpacesOnly?: boolean;
 };

apps/client/src/components/ui/destination-picker/page-row.tsx

@@ -1,6 +1,5 @@
-import { KeyboardEvent, useState } from "react";
+import { useState } from "react";
-import { ActionIcon } from "@mantine/core";
+import { IconChevronRight, IconFile } from "@tabler/icons-react";
-import { IconChevronRight, IconFileDescription } from "@tabler/icons-react";
 import { useTranslation } from "react-i18next";
 import { IPage } from "@/features/page/types/page.types";
 import { PageChildren } from "./page-children";
@@ -37,44 +36,23 @@ export function PageRow({
     .filter(Boolean)
     .join(" ");
 
-  const handleSelect = () => {
-    if (!isExcluded) onSelect(page);
-  };
-
-  const handleRowKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
-    if (e.target !== e.currentTarget) return;
-    if (e.key === "Enter" || e.key === " ") {
-      e.preventDefault();
-      handleSelect();
-    }
-  };
-
   return (
     <>
       <div
         className={rowClasses}
         style={{ paddingLeft: depth * 20 + 12 }}
-        role="button"
+        onClick={() => !isExcluded && onSelect(page)}
-        tabIndex={isExcluded ? -1 : 0}
-        aria-disabled={isExcluded || undefined}
-        onClick={handleSelect}
-        onKeyDown={handleRowKeyDown}
       >
         {page.hasChildren ? (
-          <ActionIcon
+          <div
             className={`${classes.chevron} ${expanded ? classes.chevronExpanded : ""}`}
-            variant="subtle"
-            color="gray"
-            size="sm"
-            aria-label={expanded ? t("Collapse") : t("Expand")}
-            aria-expanded={expanded}
             onClick={(e) => {
               e.stopPropagation();
               setExpanded(!expanded);
             }}
           >
             <IconChevronRight size={14} />
-          </ActionIcon>
+          </div>
         ) : (
           <div style={{ width: 20, flexShrink: 0 }} />
         )}
@@ -83,14 +61,10 @@ export function PageRow({
           {page.icon ? (
             page.icon
           ) : (
-            <ActionIcon
+            <IconFile
-              component="div"
+              size={16}
-              variant="transparent"
+              color="var(--mantine-color-gray-5)"
-              c="gray"
+            />
-              size={22}
-            >
-              <IconFileDescription size={18} />
-            </ActionIcon>
           )}
         </div>
 

apps/client/src/components/ui/destination-picker/space-row.tsx

@@ -1,5 +1,5 @@
-import { KeyboardEvent, useState } from "react";
+import { useState } from "react";
-import { ActionIcon, Tooltip } from "@mantine/core";
+import { Tooltip } from "@mantine/core";
 import { IconChevronRight, IconLock } from "@tabler/icons-react";
 import { useTranslation } from "react-i18next";
 import { ISpace } from "@/features/space/types/space.types";
@@ -42,43 +42,21 @@ export function SpaceRow({
     .filter(Boolean)
     .join(" ");
 
-  const handleSelect = () => {
-    if (writable) onSelectSpace(space);
-  };
-
-  const handleRowKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
-    if (e.target !== e.currentTarget) return;
-    if (e.key === "Enter" || e.key === " ") {
-      e.preventDefault();
-      handleSelect();
-    }
-  };
-
   const rowContent = (
     <div
       className={rowClasses}
-      data-space-id={space.id}
+      onClick={() => writable && onSelectSpace(space)}
-      role="button"
-      tabIndex={writable ? 0 : -1}
-      aria-disabled={!writable || undefined}
-      onClick={handleSelect}
-      onKeyDown={handleRowKeyDown}
     >
       {writable ? (
-        <ActionIcon
+        <div
           className={`${classes.chevron} ${expanded ? classes.chevronExpanded : ""}`}
-          variant="subtle"
-          color="gray"
-          size="sm"
-          aria-label={expanded ? t("Collapse") : t("Expand")}
-          aria-expanded={expanded}
           onClick={(e) => {
             e.stopPropagation();
             setExpanded(!expanded);
           }}
         >
           <IconChevronRight size={14} />
-        </ActionIcon>
+        </div>
       ) : (
         <div style={{ width: 20, flexShrink: 0 }} />
       )}

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/components/ui/sidebar-toggle-button.tsx

@@ -14,14 +14,7 @@ export interface SidebarToggleProps extends BoxProps, ElementProps<"button"> {
 const SidebarToggle = React.forwardRef<HTMLButtonElement, SidebarToggleProps>(
   ({ opened, size = "sm", ...others }, ref) => {
     return (
-      <ActionIcon
+      <ActionIcon size={size} {...others} variant="subtle" color="gray" ref={ref}>
-        size={size}
-        aria-expanded={opened}
-        {...others}
-        variant="subtle"
-        color="gray"
-        ref={ref}
-      >
         {opened ? (
           <IconLayoutSidebarRightExpand />
         ) : (

apps/client/src/components/ui/skip-to-main.module.css

@@ -1,27 +0,0 @@
-.skipLink {
-  position: absolute;
-  top: 8px;
-  left: 8px;
-  z-index: 9999;
-  padding: 8px 16px;
-  background: var(--mantine-color-body);
-  color: var(--mantine-color-text);
-  border: 2px solid var(--mantine-color-blue-6);
-  border-radius: 4px;
-  text-decoration: none;
-  font-weight: 500;
-  font-size: var(--mantine-font-size-sm);
-  transform: translateY(-200%);
-  transition: transform 0.15s ease-out;
-}
-
-.skipLink:focus {
-  transform: translateY(0);
-  outline: none;
-}
-
-@media print {
-  .skipLink {
-    display: none !important;
-  }
-}

apps/client/src/components/ui/skip-to-main.tsx

@@ -1,13 +0,0 @@
-import { useTranslation } from "react-i18next";
-import classes from "./skip-to-main.module.css";
-
-export const MAIN_CONTENT_ID = "main-content";
-
-export function SkipToMain() {
-  const { t } = useTranslation();
-  return (
-    <a href={`#${MAIN_CONTENT_ID}`} className={classes.skipLink}>
-      {t("Skip to main content")}
-    </a>
-  );
-}

apps/client/src/ee/ai-chat/components/ai-chat-sidebar.tsx

@@ -120,7 +120,7 @@ export default function AiChatSidebar() {
   return (
     <div className={classes.sidebar}>
       <div className={classes.header}>
-        <h2 className={classes.title}>{t("AI Chat")}</h2>
+        <span className={classes.title}>{t("AI Chat")}</span>
         <Tooltip label={t("New chat")} openDelay={250} withArrow>
           <ActionIcon
             component={Link}
@@ -176,7 +176,7 @@ export default function AiChatSidebar() {
             ))
           : groupedChats.map((group) => (
               <div key={group.key} className={classes.chatGroup}>
-                <h3 className={classes.chatGroupLabel}>{group.label}</h3>
+                <div className={classes.chatGroupLabel}>{group.label}</div>
                 {group.chats.map((chat) => (
                   <AiChatSidebarItem
                     key={chat.id}

apps/client/src/ee/ai-chat/components/chat-empty-state.tsx

@@ -56,9 +56,9 @@ export default function ChatEmptyState({ isStreaming, onSend, onStop }: Props) {
     <div className={classes.emptyState}>
       <IconSparkles size={48} stroke={1.5} className={classes.emptyStateIcon} />
       <div className={classes.emptyStateBrand}>{t("Docmost AI")}</div>
-      <h1 className={classes.emptyStateTitle}>
+      <div className={classes.emptyStateTitle}>
         {t("What can I help you with?")}
-      </h1>
+      </div>
 
       <div className={classes.emptyStateInput}>
         <ChatInput
@@ -71,7 +71,7 @@ export default function ChatEmptyState({ isStreaming, onSend, onStop }: Props) {
       </div>
 
       <div className={classes.suggestionsSection}>
-        <h2 className={classes.suggestionsLabel}>{t("Get started")}</h2>
+        <div className={classes.suggestionsLabel}>Get started</div>
         <div className={classes.suggestionsGrid}>
           {SUGGESTIONS.map((s) => (
             <button

apps/client/src/ee/ai-chat/components/chat-input.tsx

@@ -226,7 +226,6 @@ export default function ChatInput({
     ],
     editorProps: {
       attributes: {
-        role: "textbox",
         "aria-label": placeholder || t("Ask anything... Use @ to mention pages"),
         "aria-multiline": "true",
       },
@@ -336,15 +335,7 @@ export default function ChatInput({
 
       <EditorContent editor={editor} className={classes.editorContent} />
       <div className={classes.actions}>
-        <Popover
+        <Popover opened={plusMenuOpen} onChange={setPlusMenuOpen} position="top-start" width={220} shadow="md">
-          opened={plusMenuOpen}
-          onChange={setPlusMenuOpen}
-          position="top-start"
-          width={220}
-          shadow="md"
-          trapFocus
-          returnFocus
-        >
           <Popover.Target>
             <button
               type="button"

apps/client/src/ee/ai-chat/components/chat-message-list.tsx

@@ -2,7 +2,6 @@ import { useEffect, useRef, useCallback, useState } from "react";
 import { ErrorBoundary } from "react-error-boundary";
 import { IconArrowDown, IconAlertTriangle } from "@tabler/icons-react";
 import { useTranslation } from "react-i18next";
-import { VisuallyHidden } from "@mantine/core";
 import type { AiChatMessage, AiChatToolCall } from "../types/ai-chat.types";
 import ChatMessage from "./chat-message";
 import classes from "../styles/ai-chat.module.css";
@@ -34,7 +33,6 @@ export default function ChatMessageList({
   streamingContent,
   streamingToolCalls,
 }: Props) {
-  const { t } = useTranslation();
   const containerRef = useRef<HTMLDivElement>(null);
   const bottomRef = useRef<HTMLDivElement>(null);
   const isAtBottomRef = useRef(true);
@@ -42,38 +40,6 @@ export default function ChatMessageList({
   const prevScrollTopRef = useRef(0);
   const [showScrollButton, setShowScrollButton] = useState(false);
 
-  // Dedicated status-region announcement for screen readers. Rather than
-  // putting aria-live on the whole transcript (which re-fires for every
-  // streamed token), announce "AI is thinking…" when streaming starts and
-  // the full assistant reply once streaming completes — a single, clean read.
-  const [statusAnnouncement, setStatusAnnouncement] = useState("");
-  const wasStreamingRef = useRef(false);
-
-  useEffect(() => {
-    const justStartedStreaming = isStreaming && !wasStreamingRef.current;
-    const justFinishedStreaming = !isStreaming && wasStreamingRef.current;
-
-    if (justStartedStreaming) {
-      setStatusAnnouncement(t("AI is thinking..."));
-    } else if (justFinishedStreaming) {
-      const lastMessage = messages[messages.length - 1];
-      if (lastMessage?.role === "assistant" && lastMessage.content) {
-        // Strip markdown punctuation so screen readers don't read symbols
-        // like # * _ ` ~ aloud. A plain-text version is fine — the styled
-        // version stays in the DOM for visual users.
-        const plainText = lastMessage.content
-          .replace(/[#*_`~]/g, "")
-          .replace(/\s+/g, " ")
-          .trim();
-        setStatusAnnouncement(plainText);
-      } else {
-        setStatusAnnouncement("");
-      }
-    }
-
-    wasStreamingRef.current = isStreaming;
-  }, [isStreaming, messages, t]);
-
   const scrollToBottom = useCallback((behavior: ScrollBehavior = "smooth") => {
     const container = containerRef.current;
     if (!container) return;
@@ -161,18 +127,7 @@ export default function ChatMessageList({
 
   return (
     <div className={classes.messageListWrapper}>
-      {/* Single status region for chat announcements. Kept outside the
+      <div ref={containerRef} className={classes.messageList}>
-          scrolling transcript so changes here trigger one polite read per
-          state change instead of re-announcing every streamed token. */}
-      <VisuallyHidden role="status" aria-live="polite">
-        {statusAnnouncement}
-      </VisuallyHidden>
-
-      <div
-        ref={containerRef}
-        className={classes.messageList}
-        aria-label={t("Chat transcript")}
-      >
         {messages.map((msg) => (
           <ErrorBoundary
             key={msg.id}
@@ -207,7 +162,7 @@ export default function ChatMessageList({
       {showScrollButton && (
         <button
           type="button"
-          aria-label={t("Scroll to bottom")}
+          aria-label="Scroll to bottom"
           className={classes.scrollToBottomButton}
           onClick={() => scrollToBottom("smooth")}
         >

apps/client/src/ee/ai-chat/components/chat-message.tsx

@@ -1,6 +1,5 @@
 import { useCallback } from "react";
 import { useNavigate } from "react-router";
-import { useTranslation } from "react-i18next";
 import DOMPurify from "dompurify";
 import { ActionIcon, Tooltip } from "@mantine/core";
 import {
@@ -44,7 +43,6 @@ export default function ChatMessage({
   streamingToolCalls,
 }: Props) {
   const navigate = useNavigate();
-  const { t } = useTranslation();
 
   const handleContentClick = useCallback(
     (e: React.MouseEvent<HTMLDivElement>) => {
@@ -80,11 +78,7 @@ export default function ChatMessage({
       }[]) || [];
 
     return (
-      <div
+      <div className={classes.userMessage}>
-        className={classes.userMessage}
-        role="article"
-        aria-label={t("You said:")}
-      >
         <div className={classes.userBubble}>
           {attachments.length > 0 && (
             <div className={classes.messageAttachments}>
@@ -106,16 +100,8 @@ export default function ChatMessage({
     );
   }
 
-  // Only label the article when there's something meaningful to announce.
-  // Tool-only assistant turns (no text) shouldn't announce "Assistant said:" with empty content.
-  const hasAnnouncableContent = Boolean(content);
-
   return (
-    <div
+    <div className={classes.assistantMessage}>
-      className={classes.assistantMessage}
-      role="article"
-      aria-label={hasAnnouncableContent ? t("Assistant said:") : undefined}
-    >
       <div className={classes.messageContent}>
         {toolCalls && toolCalls.length > 0 && (
           <ChatToolGroup toolCalls={toolCalls} isStreaming={isStreaming} />
@@ -145,10 +131,7 @@ export default function ChatMessage({
       </div>
       {!isStreaming && message.content && (
         <div className={classes.messageActions}>
-          <CopyTextButton
+          <CopyTextButton text={message?.content} />
-            text={message?.content}
-            label={t("Copy assistant response")}
-          />
         </div>
       )}
     </div>

apps/client/src/ee/ai-chat/styles/ai-chat.module.css

@@ -106,7 +106,6 @@
   font-size: 1.5rem;
   font-weight: 600;
   color: light-dark(var(--mantine-color-gray-8), var(--mantine-color-dark-0));
-  margin-top: 0;
   margin-bottom: var(--mantine-spacing-xl);
   text-align: center;
 }
@@ -129,7 +128,6 @@
   color: var(--mantine-color-dimmed);
   text-transform: uppercase;
   letter-spacing: 0.5px;
-  margin-top: 0;
   margin-bottom: var(--mantine-spacing-sm);
 }
 

apps/client/src/ee/ai-chat/styles/chat-input.module.css

@@ -114,7 +114,7 @@
   }
 
   :global(.ProseMirror p.is-editor-empty:first-child::before) {
-    color: var(--mantine-color-placeholder);
+    color: light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-3));
     content: attr(data-placeholder);
     float: left;
     height: 0;
@@ -183,7 +183,7 @@
   border: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
   background: none;
   cursor: pointer;
-  color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-3));
+  color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
   transition: color 150ms, background-color 150ms;
 
   @mixin hover {

apps/client/src/ee/ai-chat/styles/chat-sidebar.module.css

@@ -15,7 +15,6 @@
 }
 
 .title {
-  margin: 0;
   font-weight: 600;
   font-size: var(--mantine-font-size-sm);
 }
@@ -34,7 +33,6 @@
 }
 
 .chatGroupLabel {
-  margin: 0;
   padding: 4px var(--mantine-spacing-xs);
   font-size: var(--mantine-font-size-xs);
   font-weight: 600;
@@ -120,8 +118,7 @@
   color: inherit;
 }
 
-.chatItem:hover .chatItemDate,
+.chatItem:hover .chatItemDate {
-.chatItem:focus-within .chatItemDate {
   opacity: 0;
 }
 
@@ -136,12 +133,6 @@
   position: relative;
 }
 
-.chatItem:hover .chatItemActions,
+.chatItem:hover .chatItemActions {
-.chatItem:focus-within .chatItemActions {
   opacity: 1;
 }
-
-.chatItemActions :global(.mantine-ActionIcon-root):focus-visible {
-  outline: 2px solid var(--mantine-primary-color-filled);
-  outline-offset: 2px;
-}

apps/client/src/ee/api-key/components/api-key-created-modal.tsx

@@ -33,7 +33,6 @@ export function ApiKeyCreatedModal({
       onClose={onClose}
       title={t("{{credential}} created", { credential: t("API key") })}
       size="lg"
-      closeButtonProps={{ "aria-label": t("Close") }}
     >
       <Stack gap="md">
         <Alert

apps/client/src/ee/api-key/components/create-api-key-modal.tsx

@@ -107,7 +107,6 @@ export function CreateApiKeyModal({
       onClose={handleClose}
       title={t("Create {{credential}}", { credential: t("API key") })}
       size="md"
-      closeButtonProps={{ "aria-label": t("Close") }}
     >
       <form onSubmit={form.onSubmit((values) => handleSubmit(values))}>
         <Stack gap="md">

apps/client/src/ee/api-key/components/revoke-api-key-modal.tsx

@@ -32,7 +32,6 @@ export function RevokeApiKeyModal({
       onClose={onClose}
       title={t("Revoke {{credential}}", { credential: t("API key") })}
       size="md"
-      closeButtonProps={{ "aria-label": t("Close") }}
     >
       <Stack gap="md">
         <Text>

apps/client/src/ee/api-key/components/update-api-key-modal.tsx

@@ -55,7 +55,6 @@ export function UpdateApiKeyModal({
       onClose={onClose}
       title={t("Update {{credential}}", { credential: t("API key") })}
       size="md"
-      closeButtonProps={{ "aria-label": t("Close") }}
     >
       <form onSubmit={form.onSubmit((values) => handleSubmit(values))}>
         <Stack gap="md">

apps/client/src/ee/components/ldap-login-modal.tsx

@@ -111,11 +111,6 @@ export function LdapLoginModal({
             placeholder={t("Enter your LDAP password")}
             variant="filled"
             disabled={isLoading}
-            visibilityToggleButtonProps={{
-              "aria-label": t("Toggle password visibility"),
-              "aria-hidden": false,
-              tabIndex: 0,
-            }}
             {...form.getInputProps("password")}
           />
 

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/mfa/components/mfa-backup-codes-modal.tsx

@@ -130,11 +130,6 @@ export function MfaBackupCodesModal({
                   label={t("Confirm password")}
                   placeholder={t("Enter your password")}
                   variant="filled"
-                  visibilityToggleButtonProps={{
-                    "aria-label": t("Toggle password visibility"),
-                    "aria-hidden": false,
-                    tabIndex: 0,
-                  }}
                   {...form.getInputProps("confirmPassword")}
                   autoFocus
                   data-autofocus

apps/client/src/ee/mfa/components/mfa-disable-modal.tsx

@@ -107,11 +107,6 @@ export function MfaDisableModal({
               <PasswordInput
                 label={t("Password")}
                 placeholder={t("Enter your password")}
-                visibilityToggleButtonProps={{
-                  "aria-label": t("Toggle password visibility"),
-                  "aria-hidden": false,
-                  tabIndex: 0,
-                }}
                 {...form.getInputProps("confirmPassword")}
                 autoFocus
                 data-autofocus

apps/client/src/ee/page-permission/components/page-share-modal.tsx

@@ -79,13 +79,7 @@ export function PageShareModal({ readOnly }: PageShareModalProps) {
         {t("Share")}
       </Button>
 
-      <Modal
+      <Modal opened={opened} onClose={close} title={t("Share")} size={600}>
-        opened={opened}
-        onClose={close}
-        title={t("Share")}
-        size={600}
-        closeButtonProps={{ "aria-label": t("Close") }}
-      >
         <Tabs value={activeTab} color="dark" onChange={setActiveTab}>
           <Tabs.List mb="md">
             <Tabs.Tab value="access">{t("Access")}</Tabs.Tab>

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

@@ -4,8 +4,8 @@ import {
   Menu,
   Modal,
   Text,
+  ThemeIcon,
   Tooltip,
-  UnstyledButton,
 } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
 import {
@@ -100,20 +100,15 @@ export function PageVerificationBadge({
   if (!pageId) return null;
   if (!hasVerificationFeature) {
     if (readOnly) return null;
-    const lockedLabel = `${t("Add verification")} — ${upgradeLabel}`;
-    // Use ActionIcon (a real <button>) instead of a ThemeIcon so the tooltip
-    // is reachable on keyboard focus, and screen readers announce the upgrade
-    // hint via the accessible name. Click is a no-op since the feature is
-    // gated; the tooltip explains why.
     return (
-      <Tooltip label={lockedLabel} withArrow openDelay={250}>
+      <Tooltip
-        <ActionIcon
+        label={`${t("Add verification")} — ${upgradeLabel}`}
-          variant="subtle"
+        withArrow
-          color="gray"
+        openDelay={250}
-          aria-label={lockedLabel}
       >
+        <ThemeIcon variant="subtle" color="gray">
           <IconShieldCheck size={20} stroke={1.5} />
-        </ActionIcon>
+        </ThemeIcon>
       </Tooltip>
     );
   }
@@ -137,25 +132,20 @@ export function PageVerificationBadge({
     <>
       {status !== "none" ? (
         <Tooltip label={tooltipLabel} withArrow openDelay={250}>
-          <UnstyledButton
+          <Group
+            gap={4}
             onClick={open}
-            aria-label={tooltipLabel}
+            style={{ cursor: "pointer" }}
-            style={{
+            wrap="nowrap"
-              display: "inline-flex",
-              alignItems: "center",
-              gap: 4,
-              cursor: "pointer",
-            }}
           >
             <IconRosetteDiscountCheckFilled
               size={18}
               color={`var(--mantine-color-${getStatusColor(status).replace(".", "-")})`}
-              aria-hidden="true"
             />
             <Text size="sm" c={getStatusColor(status)}>
               {getStatusLabel(status, t)}
             </Text>
-          </UnstyledButton>
+          </Group>
         </Tooltip>
       ) : !readOnly ? (
         <Tooltip label={t("Set up verification")} withArrow openDelay={250}>

apps/client/src/ee/page-verification/components/verification-list-table.tsx

@@ -18,7 +18,6 @@ import { CustomAvatar } from "@/components/ui/custom-avatar";
 import { buildPageUrl } from "@/features/page/page.utils";
 import { format } from "date-fns";
 import NoTableResults from "@/components/common/no-table-results";
-import rowClasses from "@/components/ui/clickable-table-row.module.css";
 
 const MAX_VISIBLE_VERIFIERS = 5;
 
@@ -125,13 +124,12 @@ export default function VerificationListTable({
               );
 
               return (
-                <Table.Tr key={item.id} className={rowClasses.row}>
+                <Table.Tr key={item.id}>
                   <Table.Td>
                     <Anchor
                       size="sm"
                       underline="never"
                       style={{ color: "var(--mantine-color-text)" }}
-                      className={rowClasses.link}
                       component={Link}
                       to={pageUrl}
                     >

apps/client/src/ee/scim/components/create-scim-token-modal.tsx

@@ -52,7 +52,6 @@ export function CreateScimTokenModal({
       onClose={handleClose}
       title={t("Create {{credential}}", { credential: t("SCIM token") })}
       size="md"
-      closeButtonProps={{ "aria-label": t("Close") }}
     >
       <form onSubmit={form.onSubmit((values) => handleSubmit(values))}>
         <Stack gap="md">

apps/client/src/ee/scim/components/revoke-scim-token-modal.tsx

@@ -29,7 +29,6 @@ export function RevokeScimTokenModal({
       onClose={onClose}
       title={t("Revoke {{credential}}", { credential: t("SCIM token") })}
       size="md"
-      closeButtonProps={{ "aria-label": t("Close") }}
     >
       <Stack gap="md">
         <Text>

apps/client/src/ee/scim/components/scim-token-created-modal.tsx

@@ -32,7 +32,6 @@ export function ScimTokenCreatedModal({
       onClose={onClose}
       title={t("{{credential}} created", { credential: t("SCIM token") })}
       size="lg"
-      closeButtonProps={{ "aria-label": t("Close") }}
     >
       <Stack gap="md">
         <Alert

apps/client/src/ee/scim/components/scim-token-table.tsx

@@ -93,11 +93,7 @@ export function ScimTokenTable({
                 <Table.Td>
                   <Menu position="bottom-end" withinPortal>
                     <Menu.Target>
-                      <ActionIcon
+                      <ActionIcon variant="subtle" color="gray">
-                        variant="subtle"
-                        color="gray"
-                        aria-label={t("Token actions")}
-                      >
                         <IconDots size={16} />
                       </ActionIcon>
                     </Menu.Target>

apps/client/src/ee/scim/components/update-scim-token-modal.tsx

@@ -52,7 +52,6 @@ export function UpdateScimTokenModal({
       onClose={onClose}
       title={t("Update {{credential}}", { credential: t("SCIM token") })}
       size="md"
-      closeButtonProps={{ "aria-label": t("Close") }}
     >
       <form onSubmit={form.onSubmit((values) => handleSubmit(values))}>
         <Stack gap="md">

apps/client/src/ee/security/components/allow-member-templates.tsx

@@ -34,7 +34,7 @@ function AllowMemberTemplatesToggle() {
   const [checked, setChecked] = useState(
     workspace?.settings?.templates?.allowMemberTemplates === true,
   );
-  const hasTemplates = useHasFeature(Feature.TEMPLATES);
+  const hasSecuritySettings = useHasFeature(Feature.SECURITY_SETTINGS);
   const upgradeLabel = useUpgradeLabel();
 
   const handleChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -54,11 +54,15 @@ function AllowMemberTemplatesToggle() {
   };
 
   return (
-    <Tooltip label={upgradeLabel} disabled={hasTemplates} refProp="rootRef">
+    <Tooltip
+      label={upgradeLabel}
+      disabled={hasSecuritySettings}
+      refProp="rootRef"
+    >
       <Switch
         checked={checked}
         onChange={handleChange}
-        disabled={!hasTemplates}
+        disabled={!hasSecuritySettings}
         aria-label={t("Toggle allow members to create templates")}
       />
     </Tooltip>

apps/client/src/ee/security/components/sso-provider-modal.tsx

@@ -32,7 +32,6 @@ export default function SsoProviderModal({
         ssoProviderType: provider.type.toUpperCase(),
       })}
       onClose={onClose}
-      closeButtonProps={{ "aria-label": t("Close") }}
     >
       {provider.type === SSO_PROVIDER.SAML && (
         <SsoSamlForm provider={provider} onClose={onClose} />

apps/client/src/ee/security/pages/security.tsx

@@ -137,6 +137,7 @@ export default function Security() {
                     { max: SCIM_TOKEN_LIMIT },
                   )}
                   disabled={(scimData?.items.length ?? 0) < SCIM_TOKEN_LIMIT}
+                  refProp="rootRef"
                 >
                   <Button
                     onClick={() => setCreateOpen(true)}

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/ee/template/components/template-card.module.css

@@ -8,11 +8,6 @@
     @mixin hover {
         transform: scale(1.02);
     }
-
-    &:focus-visible {
-        outline: 2px solid var(--mantine-primary-color-filled);
-        outline-offset: 2px;
-    }
 }
 
 .cardBody {
@@ -55,27 +50,18 @@
 .footer {
     display: flex;
     align-items: center;
-    gap: 6px;
+    justify-content: space-between;
+    gap: var(--mantine-spacing-xs);
     padding-top: var(--mantine-spacing-sm);
     margin-top: var(--mantine-spacing-lg);
     border-top: 1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
 }
 
-.scopeDot {
-    display: inline-block;
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    flex-shrink: 0;
-    background-color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
-}
-
 .menuTarget {
     opacity: 0;
     transition: opacity 100ms ease;
 
-    .card:hover &,
+    .card:hover & {
-    .card:focus-within & {
         opacity: 1;
     }
 }

apps/client/src/ee/template/components/template-card.tsx

@@ -1,4 +1,4 @@
-import { Button, Card, Text, ActionIcon, Menu, Group } from "@mantine/core";
+import { Card, Text, ActionIcon, Menu, Group } from "@mantine/core";
 import {
   IconDots,
   IconEdit,
@@ -12,7 +12,6 @@ import classes from "./template-card.module.css";
 type TemplateCardProps = {
   template: ITemplate;
   spaceName?: string;
-  onPreview: (template: ITemplate) => void;
   onUse: (template: ITemplate) => void;
   onEdit?: (template: ITemplate) => void;
   onDelete?: (template: ITemplate) => void;
@@ -22,7 +21,6 @@ type TemplateCardProps = {
 export default function TemplateCard({
   template,
   spaceName,
-  onPreview,
   onUse,
   onEdit,
   onDelete,
@@ -36,17 +34,7 @@ export default function TemplateCard({
       padding="lg"
       className={classes.card}
       style={{ cursor: "pointer" }}
-      role="button"
+      onClick={() => onUse(template)}
-      tabIndex={0}
-      aria-label={t("Preview template: {{title}}", { title: template.title })}
-      onClick={() => onPreview(template)}
-      onKeyDown={(e) => {
-        if (e.target !== e.currentTarget) return;
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          onPreview(template);
-        }
-      }}
     >
       <div className={classes.cardBody}>
         <Group justify="space-between" align="flex-start" wrap="nowrap" mb="md">
@@ -59,17 +47,6 @@ export default function TemplateCard({
           )}
 
           <Group gap={6} wrap="nowrap">
-            <Button
-              size="compact-xs"
-              variant="filled"
-              className={classes.menuTarget}
-              onClick={(e) => {
-                e.stopPropagation();
-                onUse(template);
-              }}
-            >
-              {t("Use")}
-            </Button>
             {canManage && (
               <Menu width={150} shadow="md" withArrow>
                 <Menu.Target>
@@ -114,7 +91,6 @@ export default function TemplateCard({
         <div className={classes.title}>{template.title}</div>
 
         <div className={classes.footer}>
-          <span className={classes.scopeDot} aria-hidden="true" />
           <Text size="sm" fw={500} c="dimmed">
             {template.spaceId ? (spaceName || t("Space")) : t("Global")}
           </Text>

apps/client/src/ee/template/components/template-picker-modal.module.css

@@ -1,70 +0,0 @@
-.row {
-    position: relative;
-    display: flex;
-    align-items: center;
-    gap: var(--mantine-spacing-sm);
-    padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
-    border-radius: var(--mantine-radius-sm);
-    width: 100%;
-
-    @mixin hover {
-        background-color: light-dark(
-                var(--mantine-color-gray-1),
-                var(--mantine-color-dark-6)
-        );
-    }
-}
-
-.icon {
-    width: 22px;
-    height: 22px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    font-size: 16px;
-    line-height: 1;
-}
-
-.title {
-    flex: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    font-size: var(--mantine-font-size-sm);
-    text-align: left;
-}
-
-.scope {
-    color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
-    font-size: var(--mantine-font-size-xs);
-    flex-shrink: 0;
-    transition: opacity 100ms ease;
-
-    .row:hover &,
-    .row:focus-within & {
-        opacity: 0;
-    }
-}
-
-.useButton {
-    position: absolute;
-    top: 50%;
-    right: var(--mantine-spacing-sm);
-    transform: translateY(-50%);
-    opacity: 0;
-    transition: opacity 100ms ease;
-
-    .row:hover &,
-    .row:focus-within &,
-    &:focus-visible {
-        opacity: 1;
-    }
-}
-
-.empty {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: var(--mantine-spacing-xl);
-}

apps/client/src/ee/template/components/template-picker-modal.tsx

@@ -1,259 +0,0 @@
-import { useMemo, useState } from "react";
-import {
-  Button,
-  Modal,
-  TextInput,
-  ScrollArea,
-  Loader,
-  Text,
-  UnstyledButton,
-  Group,
-  SegmentedControl,
-} from "@mantine/core";
-import { useDebouncedValue } from "@mantine/hooks";
-import {
-  IconArrowRight,
-  IconSearch,
-  IconFileText,
-} from "@tabler/icons-react";
-import { Link, useNavigate } from "react-router-dom";
-import { useTranslation } from "react-i18next";
-import {
-  useGetTemplatesQuery,
-  useUseTemplateMutation,
-} from "@/ee/template/queries/template-query";
-import { useGetSpacesQuery } from "@/features/space/queries/space-query";
-import { ITemplate } from "@/ee/template/types/template.types";
-import UseTemplateModal from "@/ee/template/components/use-template-modal";
-import TemplatePreviewModal from "@/ee/template/components/template-preview-modal";
-import { buildPageUrl } from "@/features/page/page.utils";
-import classes from "./template-picker-modal.module.css";
-
-type TemplatePickerModalProps = {
-  opened: boolean;
-  onClose: () => void;
-  /** Pre-select this space in the destination picker after a template is chosen. */
-  initialSpaceId?: string;
-};
-
-type ScopeFilter = "current" | "all";
-
-export default function TemplatePickerModal({
-  opened,
-  onClose,
-  initialSpaceId,
-}: TemplatePickerModalProps) {
-  const { t } = useTranslation();
-  const navigate = useNavigate();
-  const useTemplateMutation = useUseTemplateMutation();
-  const [query, setQuery] = useState("");
-  const [debouncedQuery] = useDebouncedValue(query, 200);
-  const [scope, setScope] = useState<ScopeFilter>(
-    initialSpaceId ? "current" : "all",
-  );
-  // Two-stage selection: previewing first, then destination-picker.
-  // `previewTemplate` is set when the user clicks a row in the picker.
-  // `destinationTemplate` is set when they click "Use template" in the preview.
-  const [previewTemplate, setPreviewTemplate] = useState<ITemplate | null>(
-    null,
-  );
-  const [destinationTemplate, setDestinationTemplate] =
-    useState<ITemplate | null>(null);
-
-  const { data, isPending } = useGetTemplatesQuery({
-    spaceId: scope === "current" ? initialSpaceId : undefined,
-  });
-  const { data: spacesData } = useGetSpacesQuery({ limit: 100 });
-
-  const spaceNamesById = useMemo(() => {
-    const map = new Map<string, string>();
-    spacesData?.items?.forEach((s) => map.set(s.id, s.name));
-    return map;
-  }, [spacesData]);
-
-  const filtered = useMemo(() => {
-    const all = data?.pages.flatMap((p) => p.items) ?? [];
-    const term = debouncedQuery.trim().toLowerCase();
-    if (!term) return all;
-    return all.filter((tpl) => tpl.title.toLowerCase().includes(term));
-  }, [data, debouncedQuery]);
-
-  const createInInitialSpace = async (tpl: ITemplate) => {
-    if (!initialSpaceId) return;
-    try {
-      const page = await useTemplateMutation.mutateAsync({
-        templateId: tpl.id,
-        spaceId: initialSpaceId,
-      });
-      setPreviewTemplate(null);
-      onClose();
-      const space = spacesData?.items?.find((s) => s.id === initialSpaceId);
-      if (page?.slugId && space?.slug) {
-        navigate(buildPageUrl(space.slug, page.slugId, page.title));
-      }
-    } catch {
-      // error notification handled by mutation's onError
-    }
-  };
-
-  const handlePick = (tpl: ITemplate) => {
-    setPreviewTemplate(tpl);
-  };
-
-  const handleQuickUse = (tpl: ITemplate) => {
-    if (initialSpaceId) {
-      createInInitialSpace(tpl);
-      return;
-    }
-    setDestinationTemplate(tpl);
-  };
-
-  const handlePreviewClose = () => {
-    // Closing preview returns to the picker list (no full unmount).
-    setPreviewTemplate(null);
-  };
-
-  const handlePreviewUse = () => {
-    if (initialSpaceId && previewTemplate) {
-      createInInitialSpace(previewTemplate);
-      return;
-    }
-    // Move from preview into destination-picker stage.
-    setDestinationTemplate(previewTemplate);
-    setPreviewTemplate(null);
-  };
-
-  const handleDestinationClose = () => {
-    setDestinationTemplate(null);
-    onClose();
-  };
-
-  const handleClose = () => {
-    setQuery("");
-    setScope(initialSpaceId ? "current" : "all");
-    setPreviewTemplate(null);
-    setDestinationTemplate(null);
-    onClose();
-  };
-
-  return (
-    <>
-      <Modal
-        opened={opened && !previewTemplate && !destinationTemplate}
-        onClose={handleClose}
-        size={550}
-        padding="lg"
-        yOffset="10vh"
-        title={<Text fw={500}>{t("Use a template")}</Text>}
-      >
-        <TextInput
-          leftSection={<IconSearch size={16} />}
-          placeholder={t("Search templates...")}
-          variant="filled"
-          value={query}
-          onChange={(e) => setQuery(e.currentTarget.value)}
-          mb="xs"
-          autoFocus
-        />
-
-        {initialSpaceId && (
-          <SegmentedControl
-            fullWidth
-            size="xs"
-            mb="sm"
-            value={scope}
-            onChange={(v) => setScope(v as ScopeFilter)}
-            data={[
-              { label: t("This space"), value: "current" },
-              { label: t("All templates"), value: "all" },
-            ]}
-          />
-        )}
-
-        <ScrollArea h="50vh" offsetScrollbars>
-          {isPending ? (
-            <div className={classes.empty}>
-              <Loader size="xs" />
-            </div>
-          ) : filtered.length === 0 ? (
-            <div className={classes.empty}>
-              <Text size="sm" c="dimmed">
-                {t("No templates found")}
-              </Text>
-            </div>
-          ) : (
-            filtered.map((tpl) => (
-              <UnstyledButton
-                key={tpl.id}
-                className={classes.row}
-                onClick={() => handlePick(tpl)}
-              >
-                <div className={classes.icon}>
-                  {tpl.icon ? (
-                    <span>{tpl.icon}</span>
-                  ) : (
-                    <IconFileText
-                      size={16}
-                      color="var(--mantine-color-gray-6)"
-                    />
-                  )}
-                </div>
-                <div className={classes.title}>{tpl.title}</div>
-                <div className={classes.scope}>
-                  {tpl.spaceId
-                    ? spaceNamesById.get(tpl.spaceId) ?? t("Space")
-                    : t("Global")}
-                </div>
-                <Button
-                  size="compact-xs"
-                  variant="filled"
-                  className={classes.useButton}
-                  loading={useTemplateMutation.isPending}
-                  disabled={useTemplateMutation.isPending}
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    handleQuickUse(tpl);
-                  }}
-                >
-                  {t("Use")}
-                </Button>
-              </UnstyledButton>
-            ))
-          )}
-        </ScrollArea>
-
-        <Group justify="flex-end" mt="md">
-          <Button
-            component={Link}
-            to="/templates"
-            variant="subtle"
-            size="sm"
-            rightSection={<IconArrowRight size={16} />}
-            onClick={handleClose}
-          >
-            {t("Browse all templates")}
-          </Button>
-        </Group>
-      </Modal>
-
-      {previewTemplate && (
-        <TemplatePreviewModal
-          templateId={previewTemplate.id}
-          opened={true}
-          onClose={handlePreviewClose}
-          onUse={handlePreviewUse}
-          useLoading={useTemplateMutation.isPending}
-        />
-      )}
-
-      {destinationTemplate && (
-        <UseTemplateModal
-          template={destinationTemplate}
-          opened={true}
-          onClose={handleDestinationClose}
-          initialSpaceId={initialSpaceId}
-        />
-      )}
-    </>
-  );
-}

apps/client/src/ee/template/components/template-preview-modal.tsx

@@ -9,7 +9,6 @@ type TemplatePreviewModalProps = {
   onClose: () => void;
   onUse: () => void;
   onEdit?: () => void;
-  useLoading?: boolean;
 };
 
 export default function TemplatePreviewModal({
@@ -18,7 +17,6 @@ export default function TemplatePreviewModal({
   onClose,
   onUse,
   onEdit,
-  useLoading,
 }: TemplatePreviewModalProps) {
   const { t } = useTranslation();
   const { data: template, isLoading } = useGetTemplateByIdQuery(templateId);
@@ -39,20 +37,15 @@ export default function TemplatePreviewModal({
             </Group>
           </Modal.Title>
           <Group gap="sm">
-            <Button
-              size="xs"
-              onClick={onUse}
-              loading={useLoading}
-              disabled={useLoading}
-            >
-              {t("Use template")}
-            </Button>
             {onEdit && (
               <Button size="xs" variant="default" onClick={onEdit}>
                 {t("Edit")}
               </Button>
             )}
-            <Modal.CloseButton aria-label={t("Close")} />
+            <Button size="xs" onClick={onUse}>
+              {t("Use template")}
+            </Button>
+            <Modal.CloseButton />
           </Group>
         </Modal.Header>
         <Modal.Body p={0}>

apps/client/src/ee/template/components/use-template-modal.tsx

@@ -10,14 +10,12 @@ type UseTemplateModalProps = {
   template: ITemplate;
   opened: boolean;
   onClose: () => void;
-  initialSpaceId?: string;
 };
 
 export default function UseTemplateModal({
   template,
   opened,
   onClose,
-  initialSpaceId,
 }: UseTemplateModalProps) {
   const { t } = useTranslation();
   const navigate = useNavigate();
@@ -56,8 +54,6 @@ export default function UseTemplateModal({
       actionLabel={t("Create page")}
       onSelect={handleSelect}
       loading={useTemplateMutation.isPending}
-      initialSpaceId={initialSpaceId ?? template.spaceId}
-      searchSpacesOnly
     />
   );
 }

apps/client/src/ee/template/pages/template-editor.tsx

@@ -75,18 +75,6 @@ export default function TemplateEditor() {
   const editor = useEditor({
     extensions: templateExtensions,
     content: "",
-    editorProps: {
-      handleDOMEvents: {
-        keydown: (_view, event) => {
-          if (["ArrowUp", "ArrowDown", "Enter"].includes(event.key)) {
-            const slashCommand = document.querySelector("#slash-command");
-            if (slashCommand) {
-              return true;
-            }
-          }
-        },
-      },
-    },
     onUpdate() {
       if (loadedRef.current) {
         markDirty();
@@ -283,7 +271,6 @@ export default function TemplateEditor() {
                   variant="subtle"
                   color="gray"
                   size="md"
-                  aria-label={t("Template settings")}
                   onClick={() => {
                     setDraftSpaceId(spaceId);
                     openSettings();

apps/client/src/ee/template/pages/template-list.tsx

@@ -160,8 +160,7 @@ export default function TemplateList() {
                       ? spaceNameMap.get(template.spaceId)
                       : undefined
                   }
-                  onPreview={handlePreview}
+                  onUse={handlePreview}
-                  onUse={handleUse}
                   onEdit={handleEdit}
                   onDelete={handleDelete}
                   canManage={isWorkspaceAdmin}

apps/client/src/ee/template/queries/template-query.ts

@@ -6,7 +6,6 @@ import {
   UseQueryResult,
   InfiniteData,
 } from "@tanstack/react-query";
-import { useAtom, useStore } from "jotai";
 import {
   getTemplates,
   getTemplateById,
@@ -19,12 +18,6 @@ import { ITemplate } from "@/ee/template/types/template.types";
 import { IPagination } from "@/lib/types.ts";
 import { notifications } from "@mantine/notifications";
 import { useTranslation } from "react-i18next";
-import { invalidateOnCreatePage } from "@/features/page/queries/page-query.ts";
-import { treeDataAtom } from "@/features/page/tree/atoms/tree-data-atom.ts";
-import { treeModel } from "@/features/page/tree/model/tree-model";
-import { SpaceTreeNode } from "@/features/page/tree/types.ts";
-import { IPage } from "@/features/page/types/page.types.ts";
-import { useQueryEmit } from "@/features/websocket/use-query-emit.ts";
 
 export function useGetTemplatesQuery(params?: { spaceId?: string }) {
   const { spaceId } = params ?? {};
@@ -156,64 +149,13 @@ export function useDeleteTemplateMutation() {
 
 export function useUseTemplateMutation() {
   const { t } = useTranslation();
-  const [, setTreeData] = useAtom(treeDataAtom);
-  const store = useStore();
-  const emit = useQueryEmit();
 
-  return useMutation<
+  return useMutation({
-    IPage,
+    mutationFn: (data: {
-    Error,
+      templateId: string;
-    { templateId: string; spaceId: string; parentPageId?: string }
+      spaceId: string;
-  >({
+      parentPageId?: string;
-    mutationFn: (data) => useTemplate(data),
+    }) => useTemplate(data),
-    onSuccess: (page) => {
-      // React Query sidebar-pages cache update (same path useCreatePageMutation takes).
-      invalidateOnCreatePage(page);
-
-      const parentId = page.parentPageId ?? null;
-      const newNode: SpaceTreeNode = {
-        id: page.id,
-        slugId: page.slugId,
-        name: page.title,
-        icon: page.icon,
-        position: page.position,
-        spaceId: page.spaceId,
-        parentPageId: page.parentPageId,
-        hasChildren: false,
-        children: [],
-      };
-
-      // Only mutate the tree atom and broadcast if it currently represents
-      // this space. Cross-space template-use (e.g., from the gallery picking
-      // a different space) lets the target space's clients pick up the new
-      // page on their next React Query refetch (focus, navigation, etc.).
-      // Without this guard we'd both pollute the local tree and send a wrong
-      // `index` to remote clients in the target space.
-      const current = store.get(treeDataAtom);
-      const treeIsForThisSpace = current[0]?.spaceId === page.spaceId;
-      if (!treeIsForThisSpace) return;
-
-      const lastIndex =
-        parentId === null
-          ? current.length
-          : (treeModel.find(current, parentId)?.children?.length ?? 0);
-
-      setTreeData((prev) =>
-        treeModel.insert(prev, parentId, newNode, lastIndex),
-      );
-
-      setTimeout(() => {
-        emit({
-          operation: "addTreeNode",
-          spaceId: page.spaceId,
-          payload: {
-            parentId,
-            index: lastIndex,
-            data: newNode,
-          },
-        });
-      }, 50);
-    },
     onError: (error) => {
       const errorMessage = error["response"]?.data?.message;
       notifications.show({

apps/client/src/ee/template/services/template-service.ts

@@ -1,6 +1,5 @@
 import api from "@/lib/api-client";
 import { ITemplate } from "@/ee/template/types/template.types";
-import { IPage } from "@/features/page/types/page.types";
 import { IPagination } from "@/lib/types.ts";
 
 export async function getTemplates(params?: {
@@ -41,7 +40,7 @@ export async function useTemplate(data: {
   templateId: string;
   spaceId: string;
   parentPageId?: string;
-}): Promise<IPage> {
+}): Promise<any> {
-  const req = await api.post<IPage>("/templates/use", data);
+  const req = await api.post("/templates/use", data);
   return req.data;
 }

apps/client/src/features/auth/components/auth-layout.tsx

@@ -20,7 +20,7 @@ export function AuthLayout({ children }: AuthLayoutProps) {
           Docmost
         </Text>
       </Group>
-      <main>{children}</main>
+      {children}
     </>
   );
 }

apps/client/src/features/auth/components/invite-sign-up-form.tsx

@@ -103,11 +103,6 @@ export function InviteSignUpForm() {
                 placeholder={t("Your password")}
                 variant="filled"
                 mt="md"
-                visibilityToggleButtonProps={{
-                  "aria-label": t("Toggle password visibility"),
-                  "aria-hidden": false,
-                  tabIndex: 0,
-                }}
                 {...form.getInputProps("password")}
               />
               <Button type="submit" fullWidth mt="xl" loading={isLoading}>

apps/client/src/features/auth/components/login-form.tsx

@@ -54,13 +54,6 @@ export function LoginForm() {
     await signIn(data);
   }
 
-  function handleValidationFailure(errors: Record<string, unknown>) {
-    const firstInvalidId = Object.keys(errors)[0];
-    if (firstInvalidId) {
-      document.getElementById(firstInvalidId)?.focus();
-    }
-  }
-
   if (isDataLoading) {
    return null;
   }
@@ -73,7 +66,7 @@ export function LoginForm() {
     <AuthLayout>
       <Container size={420} className={classes.container}>
         <Box p="xl" className={classes.containerBox}>
-          <Title order={1} size="h2" ta="center" fw={500} mb="md">
+          <Title order={2} ta="center" fw={500} mb="md">
             {t("Login")}
           </Title>
 
@@ -81,31 +74,21 @@ export function LoginForm() {
 
           {!data?.enforceSso && (
             <>
-              <form onSubmit={form.onSubmit(onSubmit, handleValidationFailure)}>
+              <form onSubmit={form.onSubmit(onSubmit)}>
                 <TextInput
                   id="email"
                   type="email"
                   label={t("Email")}
                   placeholder="email@example.com"
                   variant="filled"
-                  autoComplete="email"
-                  errorProps={{ role: "alert" }}
                   {...form.getInputProps("email")}
                 />
 
                 <PasswordInput
-                  id="password"
                   label={t("Password")}
                   placeholder={t("Your password")}
                   variant="filled"
                   mt="md"
-                  autoComplete="current-password"
-                  errorProps={{ role: "alert" }}
-                  visibilityToggleButtonProps={{
-                    "aria-label": t("Toggle password visibility"),
-                    "aria-hidden": false,
-                    tabIndex: 0,
-                  }}
                   {...form.getInputProps("password")}
                 />
 

apps/client/src/features/auth/components/password-reset-form.tsx

@@ -52,11 +52,6 @@ export function PasswordResetForm({ resetToken }: PasswordResetFormProps) {
             placeholder={t("Your new password")}
             variant="filled"
             mt="md"
-            visibilityToggleButtonProps={{
-              "aria-label": t("Toggle password visibility"),
-              "aria-hidden": false,
-              tabIndex: 0,
-            }}
             {...form.getInputProps("newPassword")}
           />
 

apps/client/src/features/auth/components/setup-workspace-form.tsx

@@ -98,11 +98,6 @@ export function SetupWorkspaceForm() {
               placeholder={t("Enter a strong password")}
               variant="filled"
               mt="md"
-              visibilityToggleButtonProps={{
-                "aria-label": t("Toggle password visibility"),
-                "aria-hidden": false,
-                tabIndex: 0,
-              }}
               {...form.getInputProps("password")}
             />
             <Button type="submit" fullWidth mt="xl" loading={isLoading}>

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/comment/components/comment-editor.tsx

@@ -19,7 +19,6 @@ interface CommentEditorProps {
   editable: boolean;
   placeholder?: string;
   autofocus?: boolean;
-  surface?: "default" | "muted";
 }
 
 const CommentEditor = forwardRef(
@@ -31,7 +30,6 @@ const CommentEditor = forwardRef(
       editable,
       placeholder,
       autofocus,
-      surface,
     }: CommentEditorProps,
     ref,
   ) => {
@@ -68,9 +66,6 @@ const CommentEditor = forwardRef(
         }),
       ],
       editorProps: {
-        attributes: {
-          "aria-label": placeholder || t("Comment"),
-        },
         handleDOMEvents: {
           keydown: (_view, event) => {
             if (
@@ -136,7 +131,6 @@ const CommentEditor = forwardRef(
         ref={focusRef}
         className={classes.commentEditor}
         data-editable={editable || undefined}
-        data-surface={surface}
       >
         <EditorContent
           editor={commentEditor}

apps/client/src/features/comment/components/comment-list-with-tabs.tsx

@@ -383,7 +383,6 @@ const PageCommentInput = ({ onSave, isLoading }) => {
             onSave={handleSave}
             editable={true}
             placeholder={t("Add a comment...")}
-            surface="muted"
           />
         </div>
       </Group>
@@ -392,7 +391,6 @@ const PageCommentInput = ({ onSave, isLoading }) => {
           variant="filled"
           radius="xl"
           size="sm"
-          aria-label={t("Send comment")}
           onClick={handleSave}
           onMouseDown={(e) => e.preventDefault()}
           loading={isLoading}

apps/client/src/features/comment/components/comment.module.css

@@ -22,11 +22,6 @@
 
 .commentEditor {
 
-    &[data-editable][data-surface="muted"] .ProseMirror:not(.focused) {
-        border-radius: var(--mantine-radius-sm);
-        box-shadow: 0 0 0 1px light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-4));
-    }
-
     .focused {
         border-radius: var(--mantine-radius-sm);
         box-shadow: 0 0 0 2px var(--mantine-color-blue-3);

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/audio/audio-menu.tsx

@@ -2,7 +2,6 @@ import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
 import { findParentNode, posToDOMRect, useEditorState } from "@tiptap/react";
 import { useCallback } from "react";
 import { Node as PMNode } from "@tiptap/pm/model";
-import { isEditorReady } from "@docmost/editor-ext";
 import {
   EditorMenuProps,
   ShouldShowProps,
@@ -47,7 +46,7 @@ export function AudioMenu({ editor }: EditorMenuProps) {
   );
 
   const getReferencedVirtualElement = useCallback(() => {
-    if (!isEditorReady(editor)) return;
+    if (!editor) return;
     const { selection } = editor.state;
     const predicate = (node: PMNode) => node.type.name === "audio";
     const parent = findParentNode(predicate)(selection);

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

@@ -16,7 +16,7 @@ import {
   IconMoodSmile,
   IconNotes,
 } from "@tabler/icons-react";
-import { CalloutType, isEditorReady, isTextSelected } from "@docmost/editor-ext";
+import { CalloutType, isTextSelected } from "@docmost/editor-ext";
 import { useTranslation } from "react-i18next";
 import EmojiPicker from "@/components/ui/emoji-picker.tsx";
 import classes from "../common/toolbar-menu.module.css";
@@ -55,7 +55,7 @@ export function CalloutMenu({ editor }: EditorMenuProps) {
   });
 
   const getReferencedVirtualElement = useCallback(() => {
-    if (!isEditorReady(editor)) return;
+    if (!editor) return;
     const { selection } = editor.state;
     const predicate = (node: PMNode) => node.type.name === "callout";
     const parent = findParentNode(predicate)(selection);

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

@@ -19,7 +19,7 @@ import {
   IconCopy,
   IconTrash,
 } from "@tabler/icons-react";
-import { isEditorReady, isTextSelected } from "@docmost/editor-ext";
+import { isTextSelected } from "@docmost/editor-ext";
 import type { WidthMode, ColumnsLayout } from "@docmost/editor-ext";
 import { useTranslation } from "react-i18next";
 import classes from "../common/toolbar-menu.module.css";
@@ -82,7 +82,7 @@ export function ColumnsMenu({ editor }: EditorMenuProps) {
 
   const shouldShow = useCallback(
     ({ state }: ShouldShowProps) => {
-      if (!state || !isEditorReady(editor)) return false;
+      if (!state) return false;
       if (!editor.isActive("columns")) return false;
       if (isTextSelected(editor)) return false;
       if (nodesWithMenus.some((name) => editor.isActive(name))) return false;
@@ -121,7 +121,7 @@ export function ColumnsMenu({ editor }: EditorMenuProps) {
   });
 
   const getReferencedVirtualElement = useCallback(() => {
-    if (!isEditorReady(editor)) return;
+    if (!editor) return;
     const { selection } = editor.state;
     const predicate = (node: PMNode) => node.type.name === "columns";
     const parent = findParentNode(predicate)(selection);

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

@@ -2,7 +2,6 @@ import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
 import { findParentNode, posToDOMRect, useEditorState } from "@tiptap/react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Node as PMNode } from "@tiptap/pm/model";
-import { isEditorReady } from "@docmost/editor-ext";
 import {
   EditorMenuProps,
   ShouldShowProps,
@@ -82,7 +81,7 @@ export function DrawioMenu({ editor }: EditorMenuProps) {
   );
 
   const getReferencedVirtualElement = useCallback(() => {
-    if (!isEditorReady(editor)) return;
+    if (!editor) return;
     const { selection } = editor.state;
     const predicate = (node: PMNode) => node.type.name === "drawio";
     const parent = findParentNode(predicate)(selection);

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

@@ -198,11 +198,7 @@ export default function DrawioView(props: NodeViewProps) {
         className={clsx(selected ? "ProseMirror-selectednode" : "")}
       >
         <div style={{ display: "flex", alignItems: "center" }}>
-          <ActionIcon
+          <ActionIcon variant="transparent" color="gray">
-            variant="transparent"
-            color="gray"
-            aria-label={t("Edit diagram")}
-          >
             <IconEdit size={18} />
           </ActionIcon>
 

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

@@ -131,11 +131,7 @@ export default function EmbedView(props: NodeViewProps) {
               className={clsx(selected ? "ProseMirror-selectednode" : "")}
             >
               <div style={{ display: "flex", alignItems: "center" }}>
-                <ActionIcon
+                <ActionIcon variant="transparent" color="gray">
-                  variant="transparent"
-                  color="gray"
-                  aria-label={t("Edit embed")}
-                >
                   <IconEdit size={18} />
                 </ActionIcon>
 

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

@@ -44,11 +44,9 @@ function EmojiList({
   const [cats, setCats] = useState<EmojiCategory[]>([]);
   const [activeCat, setActiveCat] = useState("");
   const [focusZone, setFocusZone] = useState<"grid" | "tabs">("grid");
-  const [announce, setAnnounce] = useState("");
   const listViewport = useRef<HTMLDivElement>(null);
   const gridViewport = useRef<HTMLDivElement>(null);
   const catBar = useRef<HTMLDivElement>(null);
-  const userInteractedRef = useRef(false);
 
   const searching = query.length > 0;
   const browseLoading = !searching && cats.length === 0;
@@ -76,53 +74,6 @@ function EmojiList({
     vp?.querySelector<HTMLElement>(`[data-i="${idx}"]`)?.scrollIntoView({ block: "nearest" });
   }, [idx, searching, focusZone]);
 
-  // Announce picker open and selection changes via a live region. Focus
-  // stays in the editor, so without this the screen reader has no way to
-  // know the picker exists or that arrow keys are changing the selection.
-  // The setTimeout defers the open message past the initial render so the
-  // live region is in the DOM before its content changes (screen readers
-  // ignore content that's present at mount time).
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      setAnnounce(
-        t("Emoji picker open. Use arrow keys to navigate, Enter to select."),
-      );
-    }, 100);
-    return () => clearTimeout(timer);
-  }, [t]);
-
-  useEffect(() => {
-    // Skip data-driven updates (idx reset, async cat load); only announce
-    // selection changes that come from real user navigation.
-    if (!userInteractedRef.current) return;
-
-    if (focusZone === "tabs") {
-      if (activeCat) setAnnounce(t("{{name}} category", { name: activeCat }));
-      return;
-    }
-    if (searching) {
-      const item = items[idx];
-      if (item)
-        setAnnounce(
-          t("{{name}}, {{n}} of {{total}}", {
-            name: item.id,
-            n: idx + 1,
-            total: items.length,
-          }),
-        );
-      return;
-    }
-    const entry = gridItems[idx];
-    if (entry)
-      setAnnounce(
-        t("{{name}}, {{n}} of {{total}}", {
-          name: entry.id,
-          n: idx + 1,
-          total: gridItems.length,
-        }),
-      );
-  }, [idx, activeCat, focusZone, searching, items, gridItems, t]);
-
   const pickSearchItem = useCallback(
     (i: number) => {
       const item = items[i];
@@ -143,13 +94,6 @@ function EmojiList({
 
   useEffect(() => {
     function onKey(e: KeyboardEvent) {
-      if (
-        ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Enter"].includes(
-          e.key,
-        )
-      ) {
-        userInteractedRef.current = true;
-      }
       if (searching) {
         if      (e.key === "ArrowDown") { e.preventDefault(); setIdx((i) => Math.min(i + 1, items.length - 1)); }
         else if (e.key === "ArrowUp")   { e.preventDefault(); setIdx((i) => Math.max(i - 1, 0)); }
@@ -187,24 +131,6 @@ function EmojiList({
       role="listbox"
       aria-label={t("Emoji picker")}
     >
-      <div
-        role="status"
-        aria-live="polite"
-        aria-atomic="true"
-        style={{
-          position: "absolute",
-          width: 1,
-          height: 1,
-          padding: 0,
-          margin: -1,
-          overflow: "hidden",
-          clip: "rect(0,0,0,0)",
-          whiteSpace: "nowrap",
-          border: 0,
-        }}
-      >
-        {announce}
-      </div>
       {searching ? (
         <>
           {isLoading && <Loader m="xs" size="xs" color="blue" type="dots" />}
@@ -245,7 +171,6 @@ function EmojiList({
                   title={c.id}
                   role="tab"
                   aria-selected={isActive}
-                  aria-label={t("{{name}} category", { name: c.id })}
                   className={clsx(classes.catTab, {
                     [classes.catTabActive]: isActive,
                     [classes.catTabFocused]: isFocused,
@@ -265,9 +190,6 @@ function EmojiList({
                   key={entry.id}
                   data-i={i}
                   title={`:${entry.id}:`}
-                  role="option"
-                  aria-selected={i === idx}
-                  aria-label={entry.id}
                   className={clsx(classes.emojiBtn, { [classes.active]: i === idx })}
                   onClick={() => pickGridItem(entry)}
                   onMouseEnter={() => setIdx(i)}

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

@@ -21,7 +21,7 @@ let _emojiIndex: EmojiIndexEntry[] | null = null;
 
 export const buildEmojiIndex = async (): Promise<EmojiIndexEntry[]> => {
   if (_emojiIndex) return _emojiIndex;
-  const { default: data } = await import('@slidoapp/emoji-mart-data');
+  const { default: data } = await import("@emoji-mart/data");
   _emojiIndex = (Object.values((data as any).emojis) as any[])
     .filter((e) => e.id && e.name && e.skins?.[0]?.native)
     .map((e) => ({
@@ -74,7 +74,7 @@ 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"),
+    import("@emoji-mart/data"),
     buildEmojiIndex(),
   ]);
   const byId = new Map(index.map((e) => [e.id, e]));

apps/client/src/features/editor/components/excalidraw/excalidraw-menu-lazy.tsx

@@ -1,14 +0,0 @@
-import { lazy, Suspense } from "react";
-import { EditorMenuProps } from "@/features/editor/components/table/types/types.ts";
-
-const ExcalidrawMenu = lazy(
-  () => import("@/features/editor/components/excalidraw/excalidraw-menu.tsx"),
-);
-
-export default function ExcalidrawMenuLazy(props: EditorMenuProps) {
-  return (
-    <Suspense fallback={null}>
-      <ExcalidrawMenu {...props} />
-    </Suspense>
-  );
-}

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

@@ -2,7 +2,6 @@ import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
 import { findParentNode, posToDOMRect, useEditorState } from "@tiptap/react";
 import { lazy, Suspense, useCallback, useEffect, useRef, useState } from "react";
 import { Node as PMNode } from "@tiptap/pm/model";
-import { isEditorReady } from "@docmost/editor-ext";
 import {
   EditorMenuProps,
   ShouldShowProps,
@@ -95,7 +94,7 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
   );
 
   const getReferencedVirtualElement = useCallback(() => {
-    if (!isEditorReady(editor)) return;
+    if (!editor) return;
     const { selection } = editor.state;
     const predicate = (node: PMNode) => node.type.name === "excalidraw";
     const parent = findParentNode(predicate)(selection);

apps/client/src/features/editor/components/excalidraw/excalidraw-view-lazy.tsx

@@ -1,14 +0,0 @@
-import { lazy, Suspense } from "react";
-import { NodeViewProps } from "@tiptap/react";
-
-const ExcalidrawView = lazy(
-  () => import("@/features/editor/components/excalidraw/excalidraw-view.tsx"),
-);
-
-export default function ExcalidrawViewLazy(props: NodeViewProps) {
-  return (
-    <Suspense fallback={null}>
-      <ExcalidrawView {...props} />
-    </Suspense>
-  );
-}

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

@@ -240,11 +240,7 @@ export default function ExcalidrawView(props: NodeViewProps) {
         className={clsx(selected ? "ProseMirror-selectednode" : "")}
       >
         <div style={{ display: "flex", alignItems: "center" }}>
-          <ActionIcon
+          <ActionIcon variant="transparent" color="gray">
-            variant="transparent"
-            color="gray"
-            aria-label={t("Edit drawing")}
-          >
             <IconEdit size={18} />
           </ActionIcon>
 

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

@@ -3,7 +3,7 @@
   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;
+  z-index: 50;
   display: flex;
   align-items: center;
   background: var(--mantine-color-body);

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

@@ -28,7 +28,6 @@ export const FixedToolbar: FC = () => {
     <>
       <div
         className={classes.fixedToolbar}
-        data-fixed-toolbar="true"
         role="toolbar"
         aria-label="Editor toolbar"
         onMouseDown={(e) => e.preventDefault()}

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

@@ -10,7 +10,6 @@ import {
   IconH2,
   IconH3,
   IconMenu4,
-  IconPageBreak,
   IconTypography,
 } from "@tabler/icons-react";
 import { useTranslation } from "react-i18next";
@@ -103,12 +102,6 @@ export const BlockTypeGroup: FC<Props> = ({ editor }) => {
         >
           {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/image/image-menu.tsx

@@ -2,7 +2,6 @@ import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
 import { findParentNode, posToDOMRect, useEditorState } from "@tiptap/react";
 import React, { useCallback, useRef } from "react";
 import { Node as PMNode } from "@tiptap/pm/model";
-import { isEditorReady } from "@docmost/editor-ext";
 import {
   EditorMenuProps,
   ShouldShowProps,
@@ -57,7 +56,7 @@ export function ImageMenu({ editor }: EditorMenuProps) {
   );
 
   const getReferencedVirtualElement = useCallback(() => {
-    if (!isEditorReady(editor)) return;
+    if (!editor) return;
     const { selection } = editor.state;
     const predicate = (node: PMNode) => node.type.name === "image";
     const parent = findParentNode(predicate)(selection);

apps/client/src/features/editor/components/math/math-block.tsx

@@ -149,13 +149,8 @@ export default function MathBlockView(props: NodeViewProps) {
           ></Textarea>
 
           <Flex justify="flex-end" align="flex-end">
-            <ActionIcon
+            <ActionIcon variant="light" color="red">
-              variant="light"
+              <IconTrashX size={18} onClick={() => props.deleteNode()} />
-              color="red"
-              aria-label={t("Delete equation")}
-              onClick={() => props.deleteNode()}
-            >
-              <IconTrashX size={18} />
             </ActionIcon>
           </Flex>
         </Stack>

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

@@ -16,7 +16,6 @@ import {
   ScrollArea,
   Text,
   UnstyledButton,
-  VisuallyHidden,
 } from "@mantine/core";
 import clsx from "clsx";
 import classes from "./mention.module.css";
@@ -37,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";
@@ -47,8 +46,6 @@ import { AutoTooltipText } from "@/components/ui/auto-tooltip-text.tsx";
 const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
   const [selectedIndex, setSelectedIndex] = useState(1);
   const viewportRef = useRef<HTMLDivElement>(null);
-  const [countAnnouncement, setCountAnnouncement] = useState("");
-  const [selectionAnnouncement, setSelectionAnnouncement] = useState("");
   const { pageSlug, spaceSlug } = useParams();
   const { data: page } = usePageQuery({ pageId: extractPageSlugId(pageSlug) });
   const { data: space } = useSpaceQuery(spaceSlug);
@@ -56,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;
@@ -186,45 +184,6 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
     setSelectedIndex(1);
   }, [suggestion]);
 
-  const selectableCount = useMemo(
-    () => renderItems.filter((item) => item.entityType !== "header").length,
-    [renderItems],
-  );
-
-  useEffect(() => {
-    if (renderItems.length === 0) {
-      setCountAnnouncement(t("No results"));
-      return;
-    }
-    setCountAnnouncement(
-      t("{{count}} result available", { count: selectableCount }),
-    );
-  }, [renderItems.length, selectableCount, t]);
-
-  useEffect(() => {
-    const item = renderItems[selectedIndex];
-    if (!item || item.entityType === "header") {
-      setSelectionAnnouncement("");
-      return;
-    }
-    if (item.entityType === "user") {
-      setSelectionAnnouncement(`${t("People")}: ${item.label}`);
-      return;
-    }
-    if (item.entityType === "page") {
-      if (item.id === null) {
-        setSelectionAnnouncement(`${t("Create page")}: ${item.label}`);
-        return;
-      }
-      const pageLabel = item.label || t("Untitled");
-      setSelectionAnnouncement(
-        item.spaceName
-          ? `${t("Pages")}: ${pageLabel}, ${item.spaceName}`
-          : `${t("Pages")}: ${pageLabel}`,
-      );
-    }
-  }, [selectedIndex, renderItems, t]);
-
   useImperativeHandle(ref, () => ({
     onKeyDown: ({ event }) => {
       if (event.key === "ArrowUp") {
@@ -261,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(),
@@ -292,7 +251,7 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
           payload: {
             parentId,
             index: lastIndex,
-            data: newNode,
+            data,
           },
         });
       }, 50);
@@ -312,9 +271,6 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
   if (renderItems.length === 0) {
     return (
       <Paper id="mention" shadow="md" py="xs" withBorder radius="md">
-        <VisuallyHidden role="status" aria-live="polite" aria-atomic="true">
-          {countAnnouncement}
-        </VisuallyHidden>
         <Text c="dimmed" size="sm" px="sm">
           {t("No results")}
         </Text>
@@ -341,12 +297,6 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
       aria-label={t("Mention suggestions")}
       aria-activedescendant={`mention-option-${selectedIndex}`}
     >
-      <VisuallyHidden role="status" aria-live="polite" aria-atomic="true">
-        {countAnnouncement}
-      </VisuallyHidden>
-      <VisuallyHidden role="status" aria-live="polite" aria-atomic="true">
-        {selectionAnnouncement}
-      </VisuallyHidden>
       <ScrollArea.Autosize
         viewportRef={viewportRef}
         mah={350}

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

@@ -2,7 +2,6 @@ import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
 import { findParentNode, posToDOMRect, useEditorState } from "@tiptap/react";
 import { useCallback } from "react";
 import { Node as PMNode } from "@tiptap/pm/model";
-import { isEditorReady } from "@docmost/editor-ext";
 import {
   EditorMenuProps,
   ShouldShowProps,
@@ -38,8 +37,9 @@ export function PdfMenu({ editor }: EditorMenuProps) {
 
   const shouldShow = useCallback(
     ({ state }: ShouldShowProps) => {
-      if (!state || !isEditorReady(editor)) return false;
+      if (!state || !editor.isActive("pdf")) {
-      if (!editor.isActive("pdf")) return false;
+        return false;
+      }
 
       const { selection } = state;
       const dom = editor.view.nodeDOM(selection.from) as HTMLElement | null;
@@ -51,7 +51,7 @@ export function PdfMenu({ editor }: EditorMenuProps) {
   );
 
   const getReferencedVirtualElement = useCallback(() => {
-    if (!isEditorReady(editor)) return;
+    if (!editor) return;
     const { selection } = editor.state;
     const predicate = (node: PMNode) => node.type.name === "pdf";
     const parent = findParentNode(predicate)(selection);

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

@@ -10,7 +10,6 @@ import {
   ScrollArea,
   Text,
   UnstyledButton,
-  VisuallyHidden,
 } from "@mantine/core";
 import classes from "./slash-menu.module.css";
 import clsx from "clsx";
@@ -30,8 +29,6 @@ const CommandList = ({
   const { t } = useTranslation();
   const [selectedIndex, setSelectedIndex] = useState(0);
   const viewportRef = useRef<HTMLDivElement>(null);
-  const [countAnnouncement, setCountAnnouncement] = useState("");
-  const [selectionAnnouncement, setSelectionAnnouncement] = useState("");
 
   const flatItems = useMemo(() => {
     return Object.values(items).flat();
@@ -82,25 +79,6 @@ const CommandList = ({
     setSelectedIndex(0);
   }, [flatItems]);
 
-  useEffect(() => {
-    if (flatItems.length === 0) {
-      setCountAnnouncement("");
-      return;
-    }
-    setCountAnnouncement(
-      t("{{count}} command available", { count: flatItems.length }),
-    );
-  }, [flatItems.length, t]);
-
-  useEffect(() => {
-    const item = flatItems[selectedIndex];
-    if (!item) {
-      setSelectionAnnouncement("");
-      return;
-    }
-    setSelectionAnnouncement(`${t(item.title)}, ${t(item.description)}`);
-  }, [selectedIndex, flatItems, t]);
-
   useEffect(() => {
     viewportRef.current
       ?.querySelector(`[data-item-index="${selectedIndex}"]`)
@@ -117,12 +95,6 @@ const CommandList = ({
       aria-label={t("Slash commands")}
       aria-activedescendant={`slash-command-option-${selectedIndex}`}
     >
-      <VisuallyHidden role="status" aria-live="polite" aria-atomic="true">
-        {countAnnouncement}
-      </VisuallyHidden>
-      <VisuallyHidden role="status" aria-live="polite" aria-atomic="true">
-        {selectionAnnouncement}
-      </VisuallyHidden>
       <ScrollArea
         viewportRef={viewportRef}
         h={350}

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

@@ -19,7 +19,6 @@ import {
   IconTable,
   IconTypography,
   IconMenu4,
-  IconPageBreak,
   IconCalendar,
   IconAppWindow,
   IconSitemap,
@@ -165,14 +164,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.",

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

@@ -6,7 +6,6 @@ import { ActionIcon, Tooltip } from "@mantine/core";
 import { IconTrash } from "@tabler/icons-react";
 import { useTranslation } from "react-i18next";
 import { Editor } from "@tiptap/core";
-import { isEditorReady } from "@docmost/editor-ext";
 
 interface SubpagesMenuProps {
   editor: Editor;
@@ -34,7 +33,6 @@ export const SubpagesMenu = React.memo(
     );
 
     const getReferenceClientRect = useCallback(() => {
-      if (!isEditorReady(editor)) return new DOMRect();
       const { selection } = editor.state;
       const predicate = (node: PMNode) => node.type.name === "subpages";
       const parent = findParentNode(predicate)(selection);

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

@@ -3,7 +3,7 @@ import { TextSelection } from "@tiptap/pm/state";
 import React, { FC, useEffect, useRef, useState } from "react";
 import classes from "./table-of-contents.module.css";
 import clsx from "clsx";
-import { Box, Text, Title } from "@mantine/core";
+import { Box, Text } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 
 type TableOfContentsProps = {
@@ -156,9 +156,9 @@ export const TableOfContents: FC<TableOfContentsProps> = (props) => {
   return (
     <>
       {props.isShare && (
-        <Title order={2} size="h6" mb="md" fw={500}>
+        <Text mb="md" fw={500}>
           {t("Table of contents")}
-        </Title>
+        </Text>
       )}
       <div className={props.isShare ? classes.leftBorder : ""}>
         {links.map((item, idx) => (

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,132 +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.
-  // `nodeDOM` is typed as `Node | null` — when `anchorPos` goes stale (e.g.
-  // an external drop reflows the doc before the plugin re-emits
-  // hoveringCell), it can resolve to a Text node, on which `.closest` is
-  // undefined. Filter to HTMLElement so downstream consumers stay safe.
-  const lookupDom = editor.view.nodeDOM(anchorPos);
-  const lookupCellDom = lookupDom instanceof HTMLElement ? lookupDom : 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]);
-}