fix: tighten export

apps/client/package.json

@@ -1,7 +1,7 @@
 {
   "name": "client",
   "private": true,
-  "version": "0.80.1",
+  "version": "0.80.0",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
@@ -25,14 +25,14 @@
     "@tabler/icons-react": "^3.40.0",
     "@tanstack/react-query": "5.90.17",
     "alfaaz": "^1.1.0",
-    "axios": "1.16.0",
+    "axios": "1.15.0",
     "blueimp-load-image": "^5.16.0",
     "clsx": "^2.1.1",
     "emoji-mart": "^5.6.0",
     "file-saver": "^2.0.5",
     "highlightjs-sap-abap": "^0.3.0",
-    "i18next": "25.10.1",
+    "i18next": "^25.10.1",
-    "i18next-http-backend": "3.0.6",
+    "i18next-http-backend": "^3.0.2",
     "jotai": "^2.18.1",
     "jotai-optics": "^0.4.0",
     "js-cookie": "^3.0.5",
@@ -42,7 +42,7 @@
     "mantine-form-zod-resolver": "^1.3.0",
     "mermaid": "^11.13.0",
     "mitt": "^3.0.1",
-    "posthog-js": "1.372.2",
+    "posthog-js": "1.363.1",
     "react": "^18.3.1",
     "react-arborist": "3.4.0",
     "react-clear-modal": "^2.0.18",
@@ -50,10 +50,11 @@
     "react-drawio": "^1.0.7",
     "react-error-boundary": "^6.1.1",
     "react-helmet-async": "^3.0.0",
-    "react-i18next": "16.5.8",
+    "react-i18next": "^16.5.8",
     "react-router-dom": "^7.13.1",
     "semver": "^7.7.4",
     "socket.io-client": "^4.8.3",
+    "tiptap-extension-global-drag-handle": "^0.1.18",
     "zod": "^4.3.6"
   },
   "devDependencies": {
@@ -73,7 +74,7 @@
     "eslint-plugin-react-refresh": "^0.5.2",
     "globals": "^15.13.0",
     "optics-ts": "^2.4.1",
-    "postcss": "^8.5.12",
+    "postcss": "^8.5.8",
     "postcss-preset-mantine": "^1.18.0",
     "postcss-simple-vars": "^7.0.1",
     "prettier": "^3.8.1",

apps/client/public/locales/de-DE/translation.json

@@ -391,7 +391,7 @@
   "Write anything. Enter \"/\" for commands": "Schreiben Sie etwas. Geben Sie \"/\" für Befehle ein",
   "Write...": "\"Schreiben...\"",
   "Column count": "Spaltenanzahl",
-  "{{count}} Columns": "{{count}} Spalten",
+  "{{count}} Columns": "{count, plural, one {# Spalte} other {# Spalten}}",
   "Equal columns": "Gleich breite Spalten",
   "Left sidebar": "Linke Seitenleiste",
   "Right sidebar": "Rechte Seitenleiste",

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

@@ -416,7 +416,6 @@
   "{{latestVersion}} is available": "{{latestVersion}} is available",
   "Default page edit mode": "Default page edit mode",
   "Choose your preferred page edit mode. Avoid accidental edits.": "Choose your preferred page edit mode. Avoid accidental edits.",
-  "Choose {{format}} file": "Choose {{format}} file",
   "Reading": "Reading",
   "Delete member": "Delete member",
   "Member deleted successfully": "Member deleted successfully",
@@ -609,21 +608,25 @@
   "Image exceeds 10MB limit.": "Image exceeds 10MB limit.",
   "Image removed successfully": "Image removed successfully",
   "API key": "API key",
+  "API key created successfully": "API key created successfully",
   "API keys": "API keys",
   "API management": "API management",
+  "Are you sure you want to revoke this API key": "Are you sure you want to revoke this API key",
+  "Create API Key": "Create API Key",
   "Custom expiration date": "Custom expiration date",
   "Enter a descriptive token name": "Enter a descriptive token name",
   "Expiration": "Expiration",
   "Expired": "Expired",
   "Expires": "Expires",
+  "I've saved my API key": "I've saved my API key",
   "Last use": "Last Used",
   "No API keys found": "No API keys found",
   "No expiration": "No expiration",
+  "Revoke API key": "Revoke API key",
   "Revoked successfully": "Revoked successfully",
   "Select expiration date": "Select expiration date",
   "This action cannot be undone. Any applications using this API key will stop working.": "This action cannot be undone. Any applications using this API key will stop working.",
-  "Update": "Update",
+  "Update API key": "Update API key",
-  "Update {{credential}}": "Update {{credential}}",
   "Manage API keys for all users in the workspace": "Manage API keys for all users in the workspace",
   "Restrict API key creation to admins": "Restrict API key creation to admins",
   "Only admins and owners can create new API keys. Existing member keys will continue to work.": "Only admins and owners can create new API keys. Existing member keys will continue to work.",
@@ -870,12 +873,6 @@
   "Previous 7 days": "Previous 7 days",
   "Previous 30 days": "Previous 30 days",
   "Search chats...": "Search chats...",
-  "Search chats": "Search chats",
-  "Ask anything... Use @ to mention pages": "Ask anything... Use @ to mention pages",
-  "Ask anything or search your workspace": "Ask anything or search your workspace",
-  "Welcome to {{name}}": "Welcome to {{name}}",
-  "Add files": "Add files",
-  "Mention a page": "Mention a page",
   "Start a new chat to see it here.": "Start a new chat to see it here.",
   "Summarize this page": "Summarize this page",
   "Toggle AI Chat": "Toggle AI Chat",
@@ -883,105 +880,5 @@
   "Try a different search term.": "Try a different search term.",
   "Try again": "Try again",
   "Untitled chat": "Untitled chat",
-  "What can I help you with?": "What can I help you with?",
+  "What can I help you with?": "What can I help you with?"
-  "Are you sure you want to revoke this {{credential}}": "Are you sure you want to revoke this {{credential}}",
-  "Automatically provision users and groups from your identity provider via SCIM.": "Automatically provision users and groups from your identity provider via SCIM.",
-  "Configure your identity provider with this URL to provision users and groups.": "Configure your identity provider with this URL to provision users and groups.",
-  "Create {{credential}}": "Create {{credential}}",
-  "{{credential}} created": "{{credential}} created",
-  "{{credential}} created successfully": "{{credential}} created successfully",
-  "Created by": "Created by",
-  "Custom": "Custom",
-  "Enable SCIM": "Enable SCIM",
-  "Enter a descriptive name": "Enter a descriptive name",
-  "I've saved my {{credential}}": "I've saved my {{credential}}",
-  "Important": "Important",
-  "Make sure to copy your {{credential}} now. You won't be able to see it again!": "Make sure to copy your {{credential}} now. You won't be able to see it again!",
-  "Never": "Never",
-  "Revoke {{credential}}": "Revoke {{credential}}",
-  "SCIM endpoint URL": "SCIM endpoint URL",
-  "SCIM provisioning": "SCIM provisioning",
-  "SCIM takes precedence over SSO group sync while enabled.": "SCIM takes precedence over SSO group sync while enabled.",
-  "You have reached the maximum of {{max}} SCIM tokens. Delete an existing token to create a new one.": "You have reached the maximum of {{max}} SCIM tokens. Delete an existing token to create a new one.",
-  "SCIM token": "SCIM token",
-  "SCIM tokens": "SCIM tokens",
-  "This action cannot be undone. Your identity provider will stop syncing immediately.": "This action cannot be undone. Your identity provider will stop syncing immediately.",
-  "Toggle SCIM provisioning": "Toggle SCIM provisioning",
-  "Token": "Token",
-  "Page menu": "Page menu",
-  "Expand": "Expand",
-  "Collapse": "Collapse",
-  "Comment menu": "Comment menu",
-  "Group menu": "Group menu",
-  "Show hidden breadcrumbs": "Show hidden breadcrumbs",
-  "Breadcrumbs": "Breadcrumbs",
-  "Page actions": "Page actions",
-  "Pick emoji": "Pick emoji",
-  "Template menu": "Template menu",
-  "Chat menu": "Chat menu",
-  "API key menu": "API key menu",
-  "Jump to comment selection": "Jump to comment selection",
-  "Slash commands": "Slash commands",
-  "Mention suggestions": "Mention suggestions",
-  "Link suggestions": "Link suggestions",
-  "Diagram editor": "Diagram editor",
-  "Add comment": "Add comment",
-  "Find and replace": "Find and replace",
-  "Main navigation": "Main navigation",
-  "Space navigation": "Space navigation",
-  "Settings navigation": "Settings navigation",
-  "AI navigation": "AI navigation",
-  "Breadcrumb": "Breadcrumb",
-  "Synced block": "Synced block",
-  "Create a block that stays in sync across pages.": "Create a block that stays in sync across pages.",
-  "Editing original": "Editing original",
-  "Copy synced block": "Copy synced block",
-  "Unsync": "Unsync",
-  "Delete synced block": "Delete synced block",
-  "Synced to {{count}} other page_one": "Synced to {{count}} other page",
-  "Synced to {{count}} other page_other": "Synced to {{count}} other pages",
-  "ORIGINAL": "ORIGINAL",
-  "THIS PAGE": "THIS PAGE",
-  "No pages": "No pages",
-  "The original synced block no longer exists": "The original synced block no longer exists",
-  "You don't have access to this synced block": "You don't have access to this synced block",
-  "Failed to load this synced block": "Failed to load this synced block",
-  "Fixed editor toolbar": "Fixed editor toolbar",
-  "Show a formatting toolbar above the editor with quick access to common actions.": "Show a formatting toolbar above the editor with quick access to common actions.",
-  "Toggle fixed editor toolbar": "Toggle fixed editor toolbar",
-  "Normal text": "Normal text",
-  "More inline formatting": "More inline formatting",
-  "Subscript": "Subscript",
-  "Superscript": "Superscript",
-  "Inline code": "Inline code",
-  "Insert media": "Insert media",
-  "Mention": "Mention",
-  "Emoji": "Emoji",
-  "Columns": "Columns",
-  "More inserts": "More inserts",
-  "Embeds": "Embeds",
-  "Diagrams": "Diagrams",
-  "Advanced": "Advanced",
-  "Utility": "Utility",
-  "Decrease indent": "Decrease indent",
-  "Increase indent": "Increase indent",
-  "Clear formatting": "Clear formatting",
-  "Code block": "Code block",
-  "Experimental": "Experimental",
-  "Strikethrough": "Strikethrough",
-  "Undo": "Undo",
-  "Redo": "Redo",
-  "Backlinks": "Backlinks",
-  "Last updated by": "Last updated by",
-  "Last updated": "Last updated",
-  "Stats": "Stats",
-  "Word count": "Word count",
-  "Characters": "Characters",
-  "Incoming links": "Incoming links",
-  "Outgoing links": "Outgoing links",
-  "Incoming links ({{count}})": "Incoming links ({{count}})",
-  "Outgoing links ({{count}})": "Outgoing links ({{count}})",
-  "No pages link here yet.": "No pages link here yet.",
-  "This page doesn't link to other pages yet.": "This page doesn't link to other pages yet.",
-  "Verified until {{date}}": "Verified until {{date}}"
 }

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

@@ -80,12 +80,6 @@ export default function AvatarUploader({
     }
   };
 
-  const ariaLabel = {
-    [AvatarIconType.AVATAR]: t("Change avatar"),
-    [AvatarIconType.SPACE_ICON]: t("Change space icon"),
-    [AvatarIconType.WORKSPACE_ICON]: t("Change workspace icon"),
-  }[type];
-
   const handleRemove = async () => {
     if (disabled) return;
 
@@ -110,8 +104,6 @@ export default function AvatarUploader({
         ref={fileInputRef}
         onChange={handleFileInputChange}
         accept="image/png,image/jpeg,image/jpg"
-        aria-label={ariaLabel}
-        tabIndex={-1}
         style={{ display: "none" }}
       />
 
@@ -123,8 +115,6 @@ export default function AvatarUploader({
               size={size}
               avatarUrl={currentImageUrl}
               name={fallbackName}
-              aria-label={ariaLabel}
-              aria-haspopup="menu"
               style={{
                 cursor: disabled || isLoading ? "default" : "pointer",
                 opacity: isLoading ? 0.6 : 1,

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

@@ -25,7 +25,6 @@ export default function CopyTextButton({ text, size }: CopyProps) {
             variant="subtle"
             onClick={copy}
             size={size}
-            aria-label={copied ? t("Copied") : t("Copy")}
           >
             {copied ? <IconCheck size={16} /> : <IconCopy size={16} />}
           </ActionIcon>

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

@@ -4,7 +4,7 @@ import {
   UnstyledButton,
   Badge,
   Table,
-  ThemeIcon,
+  ActionIcon,
   Button,
 } from "@mantine/core";
 import { Link } from "react-router-dom";
@@ -49,9 +49,9 @@ export default function RecentChanges({ spaceId }: Props) {
                   >
                     <Group wrap="nowrap">
                       {page.icon || (
-                        <ThemeIcon variant="transparent" color="gray" size={18}>
+                        <ActionIcon variant="transparent" color="gray" size={18}>
                           <IconFileDescription size={18} />
-                        </ThemeIcon>
+                        </ActionIcon>
                       )}
 
                       <Text fw={500} size="md" lineClamp={1}>

apps/client/src/components/common/search-input.tsx

@@ -6,14 +6,12 @@ import { useTranslation } from "react-i18next";
 
 export interface SearchInputProps {
   placeholder?: string;
-  ariaLabel?: string;
   debounceDelay?: number;
   onSearch: (value: string) => void;
 }
 
 export function SearchInput({
   placeholder,
-  ariaLabel,
   debounceDelay = 500,
   onSearch,
 }: SearchInputProps) {
@@ -30,7 +28,6 @@ export function SearchInput({
       <TextInput
         size="sm"
         placeholder={placeholder || t("Search...")}
-        aria-label={ariaLabel || placeholder || t("Search")}
         leftSection={<IconSearch size={16} />}
         value={value}
         onChange={(e) => setValue(e.currentTarget.value)}

apps/client/src/components/icons/icon-people-circle.tsx

@@ -1,11 +1,11 @@
-import { ThemeIcon } from "@mantine/core";
+import { ActionIcon, rem } from "@mantine/core";
 import React from "react";
 import { IconUsersGroup } from "@tabler/icons-react";
 
 export function IconGroupCircle() {
   return (
-    <ThemeIcon variant="light" size="lg" color="gray" radius="xl">
+    <ActionIcon variant="light" size="lg" color="gray" radius="xl">
       <IconUsersGroup stroke={1.5} />
-    </ThemeIcon>
+    </ActionIcon>
   );
 }

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

@@ -27,3 +27,5 @@
     background: light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-5))
   }
 }
+
+

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

@@ -8,7 +8,6 @@ import { TableOfContents } from "@/features/editor/components/table-of-contents/
 import { useAtomValue } from "jotai";
 import { pageEditorAtom } from "@/features/editor/atoms/editor-atoms.ts";
 import AsideChatPanel from "@/ee/ai-chat/components/aside-chat-panel";
-import { PageDetailsAside } from "@/features/page-details/components/page-details-aside.tsx";
 
 export default function Aside() {
   const [{ tab }] = useAtom(asideStateAtom);
@@ -31,10 +30,6 @@ export default function Aside() {
       component = <AsideChatPanel />;
       title = "AI Chat";
       break;
-    case "details":
-      component = <PageDetailsAside />;
-      title = "Details";
-      break;
     default:
       component = null;
       title = null;

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

@@ -1,7 +1,6 @@
 import { AppShell, Container } from "@mantine/core";
 import React, { useEffect, useRef, useState } from "react";
 import { useLocation } from "react-router-dom";
-import { useTranslation } from "react-i18next";
 import SettingsSidebar from "@/components/settings/settings-sidebar.tsx";
 import { useAtom } from "jotai";
 import {
@@ -24,12 +23,11 @@ export default function GlobalAppShell({
 }: {
   children: React.ReactNode;
 }) {
-  const { t } = useTranslation();
   useTrialEndAction();
   const [mobileOpened] = useAtom(mobileSidebarAtom);
   const toggleMobile = useToggleSidebar(mobileSidebarAtom);
   const [desktopOpened] = useAtom(desktopSidebarAtom);
-  const [{ isAsideOpen, tab: asideTab }] = useAtom(asideStateAtom);
+  const [{ isAsideOpen }] = useAtom(asideStateAtom);
   const [sidebarWidth, setSidebarWidth] = useAtom(sidebarWidthAtom);
   const [isResizing, setIsResizing] = useState(false);
   const sidebarRef = useRef(null);
@@ -107,15 +105,6 @@ export default function GlobalAppShell({
         className={classes.navbar}
         withBorder={false}
         ref={sidebarRef}
-        aria-label={
-          isSpaceRoute
-            ? t("Space navigation")
-            : isSettingsRoute
-              ? t("Settings navigation")
-              : isAiRoute
-                ? t("AI navigation")
-                : t("Main navigation")
-        }
       >
         {isSpaceRoute && (
           <div className={classes.resizeHandle} onMouseDown={startResizing} />
@@ -125,33 +114,16 @@ export default function GlobalAppShell({
         {isAiRoute && <AiChatSidebar />}
         {showGlobalSidebar && <GlobalSidebar />}
       </AppShell.Navbar>
-      <AppShell.Main id="main-content">
+      <AppShell.Main>
         {isSettingsRoute ? (
-          <Container size={900} pb={80}>
+          <Container size={900}>{children}</Container>
-            {children}
-          </Container>
         ) : (
           children
         )}
       </AppShell.Main>
 
       {isPageRoute && (
-        <AppShell.Aside
+        <AppShell.Aside className={classes.aside} p="md" withBorder={false}>
-          className={classes.aside}
-          p="md"
-          withBorder={false}
-          aria-label={
-            asideTab === "comments"
-              ? t("Comments")
-              : asideTab === "toc"
-                ? t("Table of contents")
-                : asideTab === "chat"
-                  ? t("AI Chat")
-                  : asideTab === "details"
-                    ? t("Details")
-                    : undefined
-          }
-        >
           <Aside />
         </AppShell.Aside>
       )}

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

@@ -50,7 +50,7 @@
 .sectionHeader {
     padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
     font-size: var(--mantine-font-size-xs);
-    color: var(--mantine-color-dimmed);
+    color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-3));
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.5px;

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

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { ScrollArea, Text, Divider, Modal, UnstyledButton } from "@mantine/core";
+import { ScrollArea, Text, Divider, Modal } from "@mantine/core";
 import {
   IconHome,
   IconClock,
@@ -119,13 +119,17 @@ export default function GlobalSidebar() {
       </ScrollArea>
 
       <div className={classes.bottomSection}>
-        <UnstyledButton
+        <a
           className={classes.link}
-          onClick={openInvite}
+          onClick={(e) => {
+            e.preventDefault();
+            openInvite();
+          }}
+          href="#"
         >
           <IconUserPlus className={classes.linkIcon} stroke={2} />
           <span>{t("Invite People")}</span>
-        </UnstyledButton>
+        </a>
         <Link
           className={classes.link}
           data-active={active.startsWith("/settings") || undefined}

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

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

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

@@ -13,7 +13,6 @@ import { getShares } from "@/features/share/services/share-service.ts";
 import { getApiKeys } from "@/ee/api-key";
 import { getAuditLogs } from "@/ee/audit/services/audit-service";
 import { getVerificationList } from "@/ee/page-verification/services/page-verification-service";
-import { getScimTokens } from "@/ee/scim/services/scim-token-service";
 
 export const prefetchWorkspaceMembers = () => {
   const params: QueryParams = { limit: 100, query: "" };
@@ -99,10 +98,3 @@ export const prefetchVerifiedPages = () => {
     queryFn: () => getVerificationList(params),
   });
 };
-
-export const prefetchScimTokens = () => {
-  queryClient.prefetchQuery({
-    queryKey: ["scim-token-list", { cursor: undefined }],
-    queryFn: () => getScimTokens({}),
-  });
-};

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

@@ -31,7 +31,6 @@ import {
   prefetchBilling,
   prefetchGroups,
   prefetchLicense,
-  prefetchScimTokens,
   prefetchShares,
   prefetchSpaces,
   prefetchSsoProviders,
@@ -205,10 +204,7 @@ export default function SettingsSidebar() {
               }
               break;
             case "Security & SSO":
-              prefetchHandler = () => {
+              prefetchHandler = prefetchSsoProviders;
-                prefetchSsoProviders();
-                prefetchScimTokens();
-              };
               break;
             case "Public sharing":
               prefetchHandler = prefetchShares;
@@ -230,6 +226,32 @@ export default function SettingsSidebar() {
           }
 
           const isDisabled = isItemDisabled(item);
+          const linkElement = (
+            <Link
+              onMouseEnter={!isDisabled ? prefetchHandler : undefined}
+              className={classes.link}
+              data-active={active.startsWith(item.path) || undefined}
+              data-disabled={isDisabled || undefined}
+              key={item.label}
+              to={isDisabled ? "#" : item.path}
+              onClick={(e) => {
+                if (isDisabled) {
+                  e.preventDefault();
+                  return;
+                }
+                if (mobileSidebarOpened) {
+                  toggleMobileSidebar();
+                }
+              }}
+              style={{
+                opacity: isDisabled ? 0.5 : 1,
+                cursor: isDisabled ? "not-allowed" : "pointer",
+              }}
+            >
+              <item.icon className={classes.linkIcon} stroke={2} />
+              <span>{t(item.label)}</span>
+            </Link>
+          );
 
           if (isDisabled) {
             return (
@@ -239,41 +261,12 @@ export default function SettingsSidebar() {
                 position="right"
                 withArrow
               >
-                <span
+                {linkElement}
-                  className={classes.link}
-                  data-disabled
-                  role="link"
-                  aria-disabled="true"
-                  tabIndex={0}
-                  style={{
-                    opacity: 0.5,
-                    cursor: "not-allowed",
-                  }}
-                >
-                  <item.icon className={classes.linkIcon} stroke={2} />
-                  <span>{t(item.label)}</span>
-                </span>
               </Tooltip>
             );
           }
 
-          return (
+          return linkElement;
-            <Link
-              onMouseEnter={prefetchHandler}
-              className={classes.link}
-              data-active={active.startsWith(item.path) || undefined}
-              key={item.label}
-              to={item.path}
-              onClick={() => {
-                if (mobileSidebarOpened) {
-                  toggleMobileSidebar();
-                }
-              }}
-            >
-              <item.icon className={classes.linkIcon} stroke={2} />
-              <span>{t(item.label)}</span>
-            </Link>
-          );
         })}
       </div>
     );
@@ -291,7 +284,7 @@ export default function SettingsSidebar() {
           }}
           variant="transparent"
           c="gray"
-          aria-label={t("Back")}
+          aria-label="Back"
         >
           <IconArrowLeft stroke={2} />
         </ActionIcon>

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { Avatar, MantineColor } from "@mantine/core";
+import { Avatar } from "@mantine/core";
 import { getAvatarUrl } from "@/lib/config.ts";
 import { AvatarIconType } from "@/features/attachments/types/attachment.types.ts";
 
@@ -16,53 +16,19 @@ interface CustomAvatarProps {
   mt?: string | number;
 }
 
-// `color.shade` pairs whose filled background meets WCAG AA (4.5:1) against
-// white text. Avoids lime/yellow/green/orange — even their dark shades have
-// weak white-text contrast.
-const SAFE_INITIALS_COLORS: MantineColor[] = [
-  "blue.8",
-  "cyan.9",
-  "grape.7",
-  "indigo.7",
-  "pink.8",
-  "red.8",
-  "violet.7",
-];
-
-function hashName(input: string) {
-  let hash = 0;
-  for (let i = 0; i < input.length; i += 1) {
-    hash = (hash << 5) - hash + input.charCodeAt(i);
-    hash |= 0;
-  }
-  return Math.abs(hash);
-}
-
-function pickInitialsColor(name: string) {
-  return SAFE_INITIALS_COLORS[hashName(name) % SAFE_INITIALS_COLORS.length];
-}
-
-function sanitizeInitialsSource(name: string) {
-  const sanitized = name.replace(/[^\p{L}\p{N}\s]/gu, " ").trim();
-  return sanitized || name;
-}
-
 export const CustomAvatar = React.forwardRef<
   HTMLInputElement,
   CustomAvatarProps
->(({ avatarUrl, name, type, color, ...props }: CustomAvatarProps, ref) => {
+>(({ avatarUrl, name, type, ...props }: CustomAvatarProps, ref) => {
   const avatarLink = getAvatarUrl(avatarUrl, type);
-  const resolvedColor =
-    !color || color === "initials" ? pickInitialsColor(name ?? "") : color;
-  const initialsSource = sanitizeInitialsSource(name ?? "");
 
   return (
     <Avatar
       ref={ref}
       src={avatarLink}
-      name={initialsSource}
+      name={name}
       alt={name}
-      color={resolvedColor}
+      color="initials"
       {...props}
     />
   );

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

@@ -74,18 +74,7 @@ export function PageChildren({
         />
       ))}
       {hasNextPage && (
-        <div
+        <div className={classes.loadMore} onClick={() => fetchNextPage()}>
-          className={classes.loadMore}
-          onClick={() => fetchNextPage()}
-          onKeyDown={(e) => {
-            if (e.key === "Enter" || e.key === " ") {
-              e.preventDefault();
-              fetchNextPage();
-            }
-          }}
-          role="button"
-          tabIndex={0}
-        >
           {t("Load more")}
         </div>
       )}

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

@@ -75,9 +75,6 @@ function EmojiPicker({
           variant={actionIconProps?.variant || "transparent"} 
           size={actionIconProps?.size}
           onClick={handlers.toggle}
-          aria-label={t("Pick emoji")}
-          aria-haspopup="dialog"
-          aria-expanded={opened}
         >
           {icon}
         </ActionIcon>

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

@@ -132,7 +132,6 @@ export default function AiChatSidebarItem({
               size="xs"
               color="gray"
               onClick={(e) => e.preventDefault()}
-              aria-label={t("Chat menu")}
             >
               <IconDots size={14} />
             </ActionIcon>

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

@@ -137,8 +137,7 @@ export default function AiChatSidebar() {
 
       <TextInput
         className={classes.searchInput}
-        placeholder={t("Search chats...")}
+        placeholder="Search chats..."
-        aria-label={t("Search chats")}
         leftSection={<IconSearch size={14} />}
         size="xs"
         value={search}

apps/client/src/ee/ai-chat/components/aside-chat-panel.tsx

@@ -178,7 +178,6 @@ export default function AsideChatPanel() {
             href="/ai"
             variant="subtle"
             color="dark"
-            aria-label={t("New chat")}
             onClick={handleNewChat}
           >
             <IconPlus size={20} stroke={1.75} />
@@ -186,23 +185,13 @@ export default function AsideChatPanel() {
         </Tooltip>
 
         <Tooltip label={t("Open full page")} openDelay={250}>
-          <ActionIcon
+          <ActionIcon variant="subtle" color="dark" onClick={handleExpand}>
-            variant="subtle"
-            color="dark"
-            aria-label={t("Open full page")}
-            onClick={handleExpand}
-          >
             <IconArrowsDiagonal size={18} stroke={1.5} />
           </ActionIcon>
         </Tooltip>
 
         <Tooltip label={t("Close")} openDelay={250}>
-          <ActionIcon
+          <ActionIcon variant="subtle" color="dark" onClick={handleClose}>
-            variant="subtle"
-            color="dark"
-            aria-label={t("Close")}
-            onClick={handleClose}
-          >
             <IconX size={20} stroke={1.75} />
           </ActionIcon>
         </Tooltip>

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

@@ -65,7 +65,7 @@ export default function ChatEmptyState({ isStreaming, onSend, onStop }: Props) {
           isStreaming={isStreaming}
           onSend={onSend}
           onStop={onStop}
-          placeholder={t("Ask anything... Use @ to mention pages")}
+          placeholder="Ask anything... Use @ to mention pages"
           autofocus
         />
       </div>

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

@@ -200,7 +200,7 @@ export default function ChatInput({
         link: false,
       }),
       Placeholder.configure({
-        placeholder: placeholder || t("Ask anything... Use @ to mention pages"),
+        placeholder: placeholder || "Ask anything... Use @ to mention pages",
       }),
       CharacterCount.configure({
         limit: 50000,
@@ -225,10 +225,6 @@ export default function ChatInput({
       }),
     ],
     editorProps: {
-      attributes: {
-        "aria-label": placeholder || t("Ask anything... Use @ to mention pages"),
-        "aria-multiline": "true",
-      },
       handleDOMEvents: {
         keydown: (_view, event) => {
           if (
@@ -279,8 +275,6 @@ export default function ChatInput({
         type="file"
         accept={ACCEPTED_FILE_TYPES}
         multiple
-        aria-label={t("Add files")}
-        tabIndex={-1}
         style={{ display: "none" }}
         onChange={(e) => handleFileSelect(e.target.files)}
       />

apps/client/src/ee/ai-chat/components/chat-tool-group.tsx

@@ -31,16 +31,7 @@ export default function ChatToolGroup({ toolCalls, isStreaming }: Props) {
     <div className={classes.toolGroup}>
       <div
         className={classes.toolGroupHeader}
-        role="button"
-        tabIndex={0}
-        aria-expanded={expanded}
         onClick={() => setExpanded((prev) => !prev)}
-        onKeyDown={(event) => {
-          if (event.key === "Enter" || event.key === " ") {
-            event.preventDefault();
-            setExpanded((prev) => !prev);
-          }
-        }}
       >
         {activeLabel ? (
           <IconLoader2 size={12} className={classes.processingSpinner} />

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

@@ -98,7 +98,7 @@
   font-weight: 600;
   letter-spacing: 0.08em;
   text-transform: uppercase;
-  color: var(--mantine-color-dimmed);
+  color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
   margin-bottom: var(--mantine-spacing-xs);
 }
 
@@ -125,7 +125,7 @@
 .suggestionsLabel {
   font-size: var(--mantine-font-size-xs);
   font-weight: 500;
-  color: var(--mantine-color-dimmed);
+  color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
   text-transform: uppercase;
   letter-spacing: 0.5px;
   margin-bottom: var(--mantine-spacing-sm);

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

@@ -43,7 +43,7 @@
   margin-top: 6px;
   text-align: center;
   font-size: var(--mantine-font-size-xs);
-  color: var(--mantine-color-dimmed);
+  color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
 }
 
 .attachmentChips {

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

@@ -36,7 +36,7 @@
   padding: 4px var(--mantine-spacing-xs);
   font-size: var(--mantine-font-size-xs);
   font-weight: 600;
-  color: var(--mantine-color-dimmed);
+  color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
   user-select: none;
 }
 
@@ -104,7 +104,7 @@
 
 .chatItemDate {
   font-size: var(--mantine-font-size-xs);
-  color: var(--mantine-color-dimmed);
+  color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
   white-space: nowrap;
   transition: opacity 150ms;
 }

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

@@ -31,7 +31,7 @@ export function ApiKeyCreatedModal({
     <Modal
       opened={opened}
       onClose={onClose}
-      title={t("{{credential}} created", { credential: t("API key") })}
+      title={t("API key created")}
       size="lg"
     >
       <Stack gap="md">
@@ -41,8 +41,7 @@ export function ApiKeyCreatedModal({
           color="red"
         >
           {t(
-            "Make sure to copy your {{credential}} now. You won't be able to see it again!",
+            "Make sure to copy your API key now. You won't be able to see it again!",
-            { credential: t("API key") },
           )}
         </Alert>
 
@@ -65,7 +64,7 @@ export function ApiKeyCreatedModal({
         </div>
 
         <Button fullWidth onClick={onClose} mt="md">
-          {t("I've saved my {{credential}}", { credential: t("API key") })}
+          {t("I've saved my API key")}
         </Button>
       </Stack>
     </Modal>

apps/client/src/ee/api-key/components/api-key-table.tsx

@@ -44,7 +44,7 @@ export function ApiKeyTable({
             <Table.Th>{t("Last used")}</Table.Th>
             <Table.Th>{t("Expires")}</Table.Th>
             <Table.Th>{t("Created")}</Table.Th>
-            <Table.Th aria-label={t("Action")} />
+            <Table.Th></Table.Th>
           </Table.Tr>
         </Table.Thead>
 
@@ -106,11 +106,7 @@ export function ApiKeyTable({
                 <Table.Td>
                   <Menu position="bottom-end" withinPortal>
                     <Menu.Target>
-                      <ActionIcon
+                      <ActionIcon variant="subtle" color="gray">
-                        variant="subtle"
-                        color="gray"
-                        aria-label={t("API key menu")}
-                      >
                         <IconDots size={16} />
                       </ActionIcon>
                     </Menu.Target>

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

@@ -105,7 +105,7 @@ export function CreateApiKeyModal({
     <Modal
       opened={opened}
       onClose={handleClose}
-      title={t("Create {{credential}}", { credential: t("API key") })}
+      title={t("Create API Key")}
       size="md"
     >
       <form onSubmit={form.onSubmit((values) => handleSubmit(values))}>

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

@@ -30,14 +30,12 @@ export function RevokeApiKeyModal({
     <Modal
       opened={opened}
       onClose={onClose}
-      title={t("Revoke {{credential}}", { credential: t("API key") })}
+      title={t("Revoke API key")}
       size="md"
     >
       <Stack gap="md">
         <Text>
-          {t("Are you sure you want to revoke this {{credential}}", {
+          {t("Are you sure you want to revoke this API key")}{" "}
-            credential: t("API key"),
-          })}{" "}
           <strong>{apiKey?.name}</strong>?
         </Text>
         <Text size="sm" c="dimmed">

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

@@ -53,7 +53,7 @@ export function UpdateApiKeyModal({
     <Modal
       opened={opened}
       onClose={onClose}
-      title={t("Update {{credential}}", { credential: t("API key") })}
+      title={t("Update API key")}
       size="md"
     >
       <form onSubmit={form.onSubmit((values) => handleSubmit(values))}>

apps/client/src/ee/api-key/queries/api-key-query.ts

@@ -63,11 +63,7 @@ export function useCreateApiKeyMutation() {
   return useMutation<IApiKey, Error, ICreateApiKeyRequest>({
     mutationFn: (data) => createApiKey(data),
     onSuccess: () => {
-      notifications.show({
+      notifications.show({ message: t("API key created successfully") });
-        message: t("{{credential}} created successfully", {
-          credential: t("API key"),
-        }),
-      });
       queryClient.invalidateQueries({
         predicate: (item) =>
           ["api-key-list"].includes(item.queryKey[0] as string),

apps/client/src/ee/audit/lib/audit-event-labels.ts

@@ -33,10 +33,6 @@ export const auditEventLabels: Record<string, string> = {
   "api_key.updated": "Updated API key",
   "api_key.deleted": "Deleted API key",
 
-  "scim_token.created": "Created SCIM token",
-  "scim_token.updated": "Updated SCIM token",
-  "scim_token.deleted": "Deleted SCIM token",
-
   "space.created": "Created space",
   "space.updated": "Updated space",
   "space.deleted": "Deleted space",
@@ -178,14 +174,6 @@ export const eventFilterOptions: EventGroup[] = [
       { value: "api_key.deleted", label: "Deleted API key" },
     ],
   },
-  {
-    group: "SCIM token",
-    items: [
-      { value: "scim_token.created", label: "Created SCIM token" },
-      { value: "scim_token.updated", label: "Updated SCIM token" },
-      { value: "scim_token.deleted", label: "Deleted SCIM token" },
-    ],
-  },
   {
     group: "License",
     items: [

apps/client/src/ee/features.ts

@@ -8,7 +8,6 @@ export const Feature = {
   AI: 'ai',
   CONFLUENCE_IMPORT: 'import:confluence',
   DOCX_IMPORT: 'import:docx',
-  PDF_IMPORT: 'import:pdf',
   ATTACHMENT_INDEXING: 'attachment:indexing',
   SECURITY_SETTINGS: 'security:settings',
   MCP: 'mcp',

apps/client/src/ee/page-permission/components/page-permission-list.tsx

@@ -140,7 +140,7 @@ export function PagePermissionList({
         )}
       </Group>
 
-      <ScrollArea.Autosize mah={400} viewportRef={viewportRef}>
+      <ScrollArea mah={250} viewportRef={viewportRef}>
         {sortedMembers.map((member) => (
           <PagePermissionItem
             key={`${member.type}-${member.id}`}
@@ -158,7 +158,7 @@ export function PagePermissionList({
             <Loader size="xs" />
           </Center>
         )}
-      </ScrollArea.Autosize>
+      </ScrollArea>
     </>
   );
 }

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

@@ -1,12 +1,4 @@
-import {
+import { ActionIcon, Group, Menu, Modal, Text, Tooltip } from "@mantine/core";
-  ActionIcon,
-  Group,
-  Menu,
-  Modal,
-  Text,
-  ThemeIcon,
-  Tooltip,
-} from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
 import {
   IconRosetteDiscountCheckFilled,
@@ -46,7 +38,6 @@ export function PageVerificationModal({
     <Modal
       opened={opened}
       onClose={onClose}
-      aria-label={status === "none" ? t("Set up verification") : t("Verify page")}
       title={
         <Group gap="xs">
           <IconShieldCheck
@@ -106,9 +97,9 @@ export function PageVerificationBadge({
         withArrow
         openDelay={250}
       >
-        <ThemeIcon variant="subtle" color="gray">
+        <ActionIcon variant="subtle" color="gray">
           <IconShieldCheck size={20} stroke={1.5} />
-        </ThemeIcon>
+        </ActionIcon>
       </Tooltip>
     );
   }
@@ -118,20 +109,10 @@ export function PageVerificationBadge({
 
   if (status === "none" && readOnly) return null;
 
-  const tooltipLabel =
-    status === "verified" && verificationInfo?.expiresAt
-      ? t("Verified until {{date}}", {
-          date: new Date(verificationInfo.expiresAt).toLocaleDateString(
-            undefined,
-            { month: "long", day: "numeric", year: "numeric" },
-          ),
-        })
-      : getStatusLabel(status, t);
-
   return (
     <>
       {status !== "none" ? (
-        <Tooltip label={tooltipLabel} withArrow openDelay={250}>
+        <Tooltip label={getStatusLabel(status, t)} withArrow openDelay={250}>
           <Group
             gap={4}
             onClick={open}
@@ -149,12 +130,7 @@ export function PageVerificationBadge({
         </Tooltip>
       ) : !readOnly ? (
         <Tooltip label={t("Set up verification")} withArrow openDelay={250}>
-          <ActionIcon
+          <ActionIcon variant="subtle" color="gray" onClick={open}>
-            variant="subtle"
-            color="gray"
-            aria-label={t("Set up verification")}
-            onClick={open}
-          >
             <IconShieldCheck size={20} stroke={1.5} />
           </ActionIcon>
         </Tooltip>

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

@@ -1,78 +0,0 @@
-import { Modal, TextInput, Button, Group, Stack } from "@mantine/core";
-import { useForm } from "@mantine/form";
-import { zod4Resolver } from "mantine-form-zod-resolver";
-import { z } from "zod/v4";
-import { useTranslation } from "react-i18next";
-import { useCreateScimTokenMutation } from "@/ee/scim/queries/scim-token-query";
-import { IScimToken } from "@/ee/scim/types/scim-token.types";
-
-interface CreateScimTokenModalProps {
-  opened: boolean;
-  onClose: () => void;
-  onSuccess: (response: IScimToken) => void;
-}
-
-const formSchema = z.object({
-  name: z.string().min(1, "Name is required"),
-});
-type FormValues = z.infer<typeof formSchema>;
-
-export function CreateScimTokenModal({
-  opened,
-  onClose,
-  onSuccess,
-}: CreateScimTokenModalProps) {
-  const { t } = useTranslation();
-  const createMutation = useCreateScimTokenMutation();
-
-  const form = useForm<FormValues>({
-    validate: zod4Resolver(formSchema),
-    initialValues: { name: "" },
-  });
-
-  const handleSubmit = async (data: FormValues) => {
-    try {
-      const created = await createMutation.mutateAsync({ name: data.name });
-      onSuccess(created);
-      form.reset();
-      onClose();
-    } catch (err) {
-      //
-    }
-  };
-
-  const handleClose = () => {
-    form.reset();
-    onClose();
-  };
-
-  return (
-    <Modal
-      opened={opened}
-      onClose={handleClose}
-      title={t("Create {{credential}}", { credential: t("SCIM token") })}
-      size="md"
-    >
-      <form onSubmit={form.onSubmit((values) => handleSubmit(values))}>
-        <Stack gap="md">
-          <TextInput
-            label={t("Name")}
-            placeholder={t("Enter a descriptive name")}
-            data-autofocus
-            required
-            {...form.getInputProps("name")}
-          />
-
-          <Group justify="flex-end" mt="md">
-            <Button variant="default" onClick={handleClose}>
-              {t("Cancel")}
-            </Button>
-            <Button type="submit" loading={createMutation.isPending}>
-              {t("Create")}
-            </Button>
-          </Group>
-        </Stack>
-      </form>
-    </Modal>
-  );
-}

apps/client/src/ee/scim/components/enable-scim.tsx

@@ -1,55 +0,0 @@
-import { Group, Text, Switch, Tooltip } from "@mantine/core";
-import { useAtom } from "jotai";
-import { workspaceAtom } from "@/features/user/atoms/current-user-atom.ts";
-import React, { useState } from "react";
-import { useTranslation } from "react-i18next";
-import { updateWorkspace } from "@/features/workspace/services/workspace-service.ts";
-import { notifications } from "@mantine/notifications";
-import { useHasFeature } from "@/ee/hooks/use-feature.ts";
-import { Feature } from "@/ee/features.ts";
-import { useUpgradeLabel } from "@/ee/hooks/use-upgrade-label.ts";
-
-export default function EnableScim() {
-  const { t } = useTranslation();
-  const [workspace, setWorkspace] = useAtom(workspaceAtom);
-  const [checked, setChecked] = useState(workspace?.isScimEnabled ?? false);
-  const hasAccess = useHasFeature(Feature.SCIM);
-  const upgradeLabel = useUpgradeLabel();
-
-  const handleChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
-    const value = event.currentTarget.checked;
-    try {
-      const updatedWorkspace = await updateWorkspace({ isScimEnabled: value });
-      setChecked(value);
-      setWorkspace(updatedWorkspace);
-    } catch (err) {
-      notifications.show({
-        message: err?.response?.data?.message,
-        color: "red",
-      });
-    }
-  };
-
-  return (
-    <Group justify="space-between" wrap="nowrap" gap="xl">
-      <div>
-        <Text size="md">{t("Enable SCIM")}</Text>
-        <Text size="sm" c="dimmed">
-          {t(
-            "Automatically provision users and groups from your identity provider via SCIM.",
-          )}
-        </Text>
-      </div>
-
-      <Tooltip label={upgradeLabel} disabled={hasAccess} refProp="rootRef">
-        <Switch
-          labelPosition="left"
-          defaultChecked={checked}
-          onChange={handleChange}
-          disabled={!hasAccess}
-          aria-label={t("Toggle SCIM provisioning")}
-        />
-      </Tooltip>
-    </Group>
-  );
-}

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

@@ -1,61 +0,0 @@
-import { Modal, Text, Button, Group, Stack } from "@mantine/core";
-import { useTranslation } from "react-i18next";
-import { useRevokeScimTokenMutation } from "@/ee/scim/queries/scim-token-query";
-import { IScimToken } from "@/ee/scim/types/scim-token.types";
-
-interface RevokeScimTokenModalProps {
-  opened: boolean;
-  onClose: () => void;
-  scimToken: IScimToken | null;
-}
-
-export function RevokeScimTokenModal({
-  opened,
-  onClose,
-  scimToken,
-}: RevokeScimTokenModalProps) {
-  const { t } = useTranslation();
-  const revokeMutation = useRevokeScimTokenMutation();
-
-  const handleRevoke = async () => {
-    if (!scimToken) return;
-    await revokeMutation.mutateAsync({ tokenId: scimToken.id });
-    onClose();
-  };
-
-  return (
-    <Modal
-      opened={opened}
-      onClose={onClose}
-      title={t("Revoke {{credential}}", { credential: t("SCIM token") })}
-      size="md"
-    >
-      <Stack gap="md">
-        <Text>
-          {t("Are you sure you want to revoke this {{credential}}", {
-            credential: t("SCIM token"),
-          })}{" "}
-          <strong>{scimToken?.name}</strong>?
-        </Text>
-        <Text size="sm" c="dimmed">
-          {t(
-            "This action cannot be undone. Your identity provider will stop syncing immediately.",
-          )}
-        </Text>
-
-        <Group justify="flex-end" mt="md">
-          <Button variant="default" onClick={onClose}>
-            {t("Cancel")}
-          </Button>
-          <Button
-            color="red"
-            onClick={handleRevoke}
-            loading={revokeMutation.isPending}
-          >
-            {t("Revoke")}
-          </Button>
-        </Group>
-      </Stack>
-    </Modal>
-  );
-}

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

@@ -1,69 +0,0 @@
-import {
-  Modal,
-  Text,
-  Stack,
-  Alert,
-  Group,
-  Button,
-  TextInput,
-} from "@mantine/core";
-import { IconAlertTriangle } from "@tabler/icons-react";
-import { useTranslation } from "react-i18next";
-import CopyTextButton from "@/components/common/copy.tsx";
-import { IScimToken } from "@/ee/scim/types/scim-token.types";
-
-interface ScimTokenCreatedModalProps {
-  opened: boolean;
-  onClose: () => void;
-  scimToken: IScimToken | null;
-}
-
-export function ScimTokenCreatedModal({
-  opened,
-  onClose,
-  scimToken,
-}: ScimTokenCreatedModalProps) {
-  const { t } = useTranslation();
-  if (!scimToken) return null;
-
-  return (
-    <Modal
-      opened={opened}
-      onClose={onClose}
-      title={t("{{credential}} created", { credential: t("SCIM token") })}
-      size="lg"
-    >
-      <Stack gap="md">
-        <Alert
-          icon={<IconAlertTriangle size={16} />}
-          title={t("Important")}
-          color="red"
-        >
-          {t(
-            "Make sure to copy your {{credential}} now. You won't be able to see it again!",
-            { credential: t("SCIM token") },
-          )}
-        </Alert>
-
-        <div>
-          <Text size="sm" fw={500} mb="xs">
-            {t("SCIM token")}
-          </Text>
-          <Group gap="xs" wrap="nowrap">
-            <TextInput
-              variant="filled"
-              style={{ flex: 1 }}
-              value={scimToken.token}
-              readOnly
-            />
-            <CopyTextButton text={scimToken.token} />
-          </Group>
-        </div>
-
-        <Button fullWidth onClick={onClose} mt="md">
-          {t("I've saved my {{credential}}", { credential: t("SCIM token") })}
-        </Button>
-      </Stack>
-    </Modal>
-  );
-}

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

@@ -1,130 +0,0 @@
-import { ActionIcon, Group, Menu, Table, Text } from "@mantine/core";
-import { IconDots, IconEdit, IconTrash } from "@tabler/icons-react";
-import { format } from "date-fns";
-import { useTranslation } from "react-i18next";
-import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
-import React from "react";
-import NoTableResults from "@/components/common/no-table-results";
-import { IScimToken } from "@/ee/scim/types/scim-token.types";
-
-interface ScimTokenTableProps {
-  tokens: IScimToken[];
-  isLoading?: boolean;
-  onUpdate?: (token: IScimToken) => void;
-  onRevoke?: (token: IScimToken) => void;
-}
-
-export function ScimTokenTable({
-  tokens,
-  isLoading,
-  onUpdate,
-  onRevoke,
-}: ScimTokenTableProps) {
-  const { t } = useTranslation();
-
-  const formatDate = (date: Date | string | null) => {
-    if (!date) return t("Never");
-    return format(new Date(date), "MMM dd, yyyy");
-  };
-
-  return (
-    <Table.ScrollContainer minWidth={500}>
-      <Table highlightOnHover verticalSpacing="sm">
-        <Table.Thead>
-          <Table.Tr>
-            <Table.Th>{t("Name")}</Table.Th>
-            <Table.Th>{t("Token")}</Table.Th>
-            <Table.Th>{t("Created by")}</Table.Th>
-            <Table.Th>{t("Last used")}</Table.Th>
-            <Table.Th>{t("Created")}</Table.Th>
-            <Table.Th aria-label={t("Action")} />
-          </Table.Tr>
-        </Table.Thead>
-
-        <Table.Tbody>
-          {tokens && tokens.length > 0 ? (
-            tokens.map((token) => (
-              <Table.Tr key={token.id}>
-                <Table.Td>
-                  <Text fz="sm" fw={500}>
-                    {token.name}
-                  </Text>
-                </Table.Td>
-
-                <Table.Td>
-                  <Text fz="sm" ff="monospace" c="dimmed">
-                    ••••{token.tokenLastFour}
-                  </Text>
-                </Table.Td>
-
-                {token.creator ? (
-                  <Table.Td>
-                    <Group gap="4" wrap="nowrap">
-                      <CustomAvatar
-                        avatarUrl={token.creator?.avatarUrl}
-                        name={token.creator.name}
-                        size="sm"
-                      />
-                      <Text fz="sm" lineClamp={1}>
-                        {token.creator.name}
-                      </Text>
-                    </Group>
-                  </Table.Td>
-                ) : (
-                  <Table.Td>
-                    <Text fz="sm" c="dimmed">
-                      —
-                    </Text>
-                  </Table.Td>
-                )}
-
-                <Table.Td>
-                  <Text fz="sm" style={{ whiteSpace: "nowrap" }}>
-                    {formatDate(token.lastUsedAt)}
-                  </Text>
-                </Table.Td>
-
-                <Table.Td>
-                  <Text fz="sm" style={{ whiteSpace: "nowrap" }}>
-                    {formatDate(token.createdAt)}
-                  </Text>
-                </Table.Td>
-
-                <Table.Td>
-                  <Menu position="bottom-end" withinPortal>
-                    <Menu.Target>
-                      <ActionIcon variant="subtle" color="gray">
-                        <IconDots size={16} />
-                      </ActionIcon>
-                    </Menu.Target>
-                    <Menu.Dropdown>
-                      {onUpdate && (
-                        <Menu.Item
-                          leftSection={<IconEdit size={16} />}
-                          onClick={() => onUpdate(token)}
-                        >
-                          {t("Rename")}
-                        </Menu.Item>
-                      )}
-                      {onRevoke && (
-                        <Menu.Item
-                          leftSection={<IconTrash size={16} />}
-                          color="red"
-                          onClick={() => onRevoke(token)}
-                        >
-                          {t("Revoke")}
-                        </Menu.Item>
-                      )}
-                    </Menu.Dropdown>
-                  </Menu>
-                </Table.Td>
-              </Table.Tr>
-            ))
-          ) : (
-            <NoTableResults colSpan={6} />
-          )}
-        </Table.Tbody>
-      </Table>
-    </Table.ScrollContainer>
-  );
-}

apps/client/src/ee/scim/components/scim-url-panel.tsx

@@ -1,30 +0,0 @@
-import { Group, Stack, Text, TextInput } from "@mantine/core";
-import { useTranslation } from "react-i18next";
-import CopyTextButton from "@/components/common/copy.tsx";
-
-export function ScimUrlPanel() {
-  const { t } = useTranslation();
-  const scimUrl = `${window.location.origin}/api/scim/v2`;
-
-  return (
-    <Stack gap="xs">
-      <Text size="sm" fw={500}>
-        {t("SCIM endpoint URL")}
-      </Text>
-      <Text size="xs" c="dimmed">
-        {t(
-          "Configure your identity provider with this URL to provision users and groups.",
-        )}
-      </Text>
-      <Group gap="xs" wrap="nowrap">
-        <TextInput
-          variant="filled"
-          style={{ flex: 1 }}
-          value={scimUrl}
-          readOnly
-        />
-        <CopyTextButton text={scimUrl} />
-      </Group>
-    </Stack>
-  );
-}

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

@@ -1,77 +0,0 @@
-import { Modal, TextInput, Button, Group, Stack } from "@mantine/core";
-import { useForm } from "@mantine/form";
-import { zod4Resolver } from "mantine-form-zod-resolver";
-import { z } from "zod/v4";
-import { useTranslation } from "react-i18next";
-import { useEffect } from "react";
-import { useUpdateScimTokenMutation } from "@/ee/scim/queries/scim-token-query";
-import { IScimToken } from "@/ee/scim/types/scim-token.types";
-
-const formSchema = z.object({
-  name: z.string().min(1, "Name is required"),
-});
-type FormValues = z.infer<typeof formSchema>;
-
-interface UpdateScimTokenModalProps {
-  opened: boolean;
-  onClose: () => void;
-  scimToken: IScimToken | null;
-}
-
-export function UpdateScimTokenModal({
-  opened,
-  onClose,
-  scimToken,
-}: UpdateScimTokenModalProps) {
-  const { t } = useTranslation();
-  const updateMutation = useUpdateScimTokenMutation();
-
-  const form = useForm<FormValues>({
-    validate: zod4Resolver(formSchema),
-    initialValues: { name: "" },
-  });
-
-  useEffect(() => {
-    if (opened && scimToken) {
-      form.setValues({ name: scimToken.name });
-    }
-  }, [opened, scimToken]);
-
-  const handleSubmit = async (data: FormValues) => {
-    if (!scimToken) return;
-    await updateMutation.mutateAsync({
-      tokenId: scimToken.id,
-      name: data.name,
-    });
-    onClose();
-  };
-
-  return (
-    <Modal
-      opened={opened}
-      onClose={onClose}
-      title={t("Update {{credential}}", { credential: t("SCIM token") })}
-      size="md"
-    >
-      <form onSubmit={form.onSubmit((values) => handleSubmit(values))}>
-        <Stack gap="md">
-          <TextInput
-            label={t("Name")}
-            placeholder={t("Enter a descriptive name")}
-            required
-            {...form.getInputProps("name")}
-          />
-
-          <Group justify="flex-end" mt="md">
-            <Button variant="default" onClick={onClose}>
-              {t("Cancel")}
-            </Button>
-            <Button type="submit" loading={updateMutation.isPending}>
-              {t("Update")}
-            </Button>
-          </Group>
-        </Stack>
-      </form>
-    </Modal>
-  );
-}

apps/client/src/ee/scim/index.ts

@@ -1,2 +0,0 @@
-export * from "./types/scim-token.types";
-export * from "./services/scim-token-service";

apps/client/src/ee/scim/queries/scim-token-query.ts

@@ -1,96 +0,0 @@
-import { IPagination, QueryParams } from "@/lib/types.ts";
-import {
-  keepPreviousData,
-  useMutation,
-  useQuery,
-  useQueryClient,
-  UseQueryResult,
-} from "@tanstack/react-query";
-import {
-  createScimToken,
-  getScimTokens,
-  revokeScimToken,
-  updateScimToken,
-} from "@/ee/scim/services/scim-token-service";
-import {
-  IScimToken,
-  ICreateScimTokenRequest,
-  IRevokeScimTokenRequest,
-  IUpdateScimTokenRequest,
-} from "@/ee/scim/types/scim-token.types";
-import { notifications } from "@mantine/notifications";
-import { useTranslation } from "react-i18next";
-
-export function useGetScimTokensQuery(
-  params?: QueryParams,
-): UseQueryResult<IPagination<IScimToken>, Error> {
-  return useQuery({
-    queryKey: ["scim-token-list", params],
-    queryFn: () => getScimTokens(params),
-    placeholderData: keepPreviousData,
-  });
-}
-
-export function useCreateScimTokenMutation() {
-  const queryClient = useQueryClient();
-  const { t } = useTranslation();
-
-  return useMutation<IScimToken, Error, ICreateScimTokenRequest>({
-    mutationFn: (data) => createScimToken(data),
-    onSuccess: () => {
-      notifications.show({
-        message: t("{{credential}} created successfully", {
-          credential: t("SCIM token"),
-        }),
-      });
-      queryClient.invalidateQueries({
-        predicate: (item) =>
-          ["scim-token-list"].includes(item.queryKey[0] as string),
-      });
-    },
-    onError: (error) => {
-      const errorMessage = error["response"]?.data?.message;
-      notifications.show({ message: errorMessage, color: "red" });
-    },
-  });
-}
-
-export function useUpdateScimTokenMutation() {
-  const queryClient = useQueryClient();
-  const { t } = useTranslation();
-
-  return useMutation<void, Error, IUpdateScimTokenRequest>({
-    mutationFn: (data) => updateScimToken(data),
-    onSuccess: () => {
-      notifications.show({ message: t("Updated successfully") });
-      queryClient.invalidateQueries({
-        predicate: (item) =>
-          ["scim-token-list"].includes(item.queryKey[0] as string),
-      });
-    },
-    onError: (error) => {
-      const errorMessage = error["response"]?.data?.message;
-      notifications.show({ message: errorMessage, color: "red" });
-    },
-  });
-}
-
-export function useRevokeScimTokenMutation() {
-  const queryClient = useQueryClient();
-  const { t } = useTranslation();
-
-  return useMutation<void, Error, IRevokeScimTokenRequest>({
-    mutationFn: (data) => revokeScimToken(data),
-    onSuccess: () => {
-      notifications.show({ message: t("Revoked successfully") });
-      queryClient.invalidateQueries({
-        predicate: (item) =>
-          ["scim-token-list"].includes(item.queryKey[0] as string),
-      });
-    },
-    onError: (error) => {
-      const errorMessage = error["response"]?.data?.message;
-      notifications.show({ message: errorMessage, color: "red" });
-    },
-  });
-}

apps/client/src/ee/scim/services/scim-token-service.ts

@@ -1,34 +0,0 @@
-import api from "@/lib/api-client";
-import {
-  IScimToken,
-  ICreateScimTokenRequest,
-  IRevokeScimTokenRequest,
-  IUpdateScimTokenRequest,
-} from "@/ee/scim/types/scim-token.types";
-import { IPagination, QueryParams } from "@/lib/types.ts";
-
-export async function getScimTokens(
-  params?: QueryParams,
-): Promise<IPagination<IScimToken>> {
-  const req = await api.post("/scim-tokens", { ...params });
-  return req.data;
-}
-
-export async function createScimToken(
-  data: ICreateScimTokenRequest,
-): Promise<IScimToken> {
-  const req = await api.post<IScimToken>("/scim-tokens/create", data);
-  return req.data;
-}
-
-export async function updateScimToken(
-  data: IUpdateScimTokenRequest,
-): Promise<void> {
-  await api.post("/scim-tokens/update", data);
-}
-
-export async function revokeScimToken(
-  data: IRevokeScimTokenRequest,
-): Promise<void> {
-  await api.post("/scim-tokens/revoke", data);
-}

apps/client/src/ee/scim/types/scim-token.types.ts

@@ -1,27 +0,0 @@
-import { IUser } from "@/features/user/types/user.types.ts";
-
-export interface IScimToken {
-  id: string;
-  name: string;
-  token?: string;
-  tokenLastFour: string;
-  isEnabled: boolean;
-  creatorId: string;
-  workspaceId: string;
-  lastUsedAt: string | null;
-  createdAt: string;
-  creator?: Partial<IUser>;
-}
-
-export interface ICreateScimTokenRequest {
-  name: string;
-}
-
-export interface IUpdateScimTokenRequest {
-  tokenId: string;
-  name: string;
-}
-
-export interface IRevokeScimTokenRequest {
-  tokenId: string;
-}

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

@@ -69,8 +69,8 @@ export default function SsoProviderList() {
   return (
     <>
       <Card shadow="sm" radius="sm">
-        <Table.ScrollContainer minWidth={600} maxHeight={400}>
+        <Table.ScrollContainer minWidth={600}>
-          <Table verticalSpacing="sm" stickyHeader>
+          <Table verticalSpacing="sm">
             <Table.Thead>
               <Table.Tr>
                 <Table.Th>{t("Name")}</Table.Th>
@@ -141,7 +141,6 @@ export default function SsoProviderList() {
                         <ActionIcon
                           variant="subtle"
                           color="gray"
-                          aria-label={t("Edit {{name}}", { name: provider.name })}
                           onClick={() => handleEdit(provider)}
                         >
                           <IconPencil size={16} />
@@ -153,13 +152,7 @@ export default function SsoProviderList() {
                           withinPortal
                         >
                           <Menu.Target>
-                            <ActionIcon
+                            <ActionIcon variant="subtle" color="gray">
-                              variant="subtle"
-                              color="gray"
-                              aria-label={t("More actions for {{name}}", {
-                                name: provider.name,
-                              })}
-                            >
                               <IconDots size={16} />
                             </ActionIcon>
                           </Menu.Target>

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

@@ -1,18 +1,8 @@
 import { Helmet } from "react-helmet-async";
 import { getAppName, isCloud } from "@/lib/config.ts";
 import SettingsTitle from "@/components/settings/settings-title.tsx";
-import {
+import { Divider, Title } from "@mantine/core";
-  Alert,
+import React from "react";
-  Button,
-  Card,
-  Divider,
-  Group,
-  Space,
-  Title,
-  Tooltip,
-} from "@mantine/core";
-import { IconInfoCircle } from "@tabler/icons-react";
-import React, { useState } from "react";
 import useUserRole from "@/hooks/use-user-role.tsx";
 import SsoProviderList from "@/ee/security/components/sso-provider-list.tsx";
 import CreateSsoProvider from "@/ee/security/components/create-sso-provider.tsx";
@@ -22,41 +12,16 @@ import { useTranslation } from "react-i18next";
 import EnforceMfa from "@/ee/security/components/enforce-mfa.tsx";
 import DisablePublicSharing from "@/ee/security/components/disable-public-sharing.tsx";
 import TrashRetention from "@/ee/security/components/trash-retention.tsx";
-import { useAtom } from "jotai";
+
-import { workspaceAtom } from "@/features/user/atoms/current-user-atom.ts";
 import { useHasFeature } from "@/ee/hooks/use-feature";
 import { Feature } from "@/ee/features";
-import { useGetScimTokensQuery } from "@/ee/scim/queries/scim-token-query";
-import { ScimUrlPanel } from "@/ee/scim/components/scim-url-panel";
-import { ScimTokenTable } from "@/ee/scim/components/scim-token-table";
-import { CreateScimTokenModal } from "@/ee/scim/components/create-scim-token-modal";
-import { ScimTokenCreatedModal } from "@/ee/scim/components/scim-token-created-modal";
-import { RevokeScimTokenModal } from "@/ee/scim/components/revoke-scim-token-modal";
-import { UpdateScimTokenModal } from "@/ee/scim/components/update-scim-token-modal";
-import EnableScim from "@/ee/scim/components/enable-scim";
-import { useCursorPaginate } from "@/hooks/use-cursor-paginate";
-import Paginate from "@/components/common/paginate";
-import { IScimToken } from "@/ee/scim/types/scim-token.types";
-
-const SCIM_TOKEN_LIMIT = 5;
 
 export default function Security() {
   const { t } = useTranslation();
   const { isAdmin } = useUserRole();
   const hasCustomSso = useHasFeature(Feature.SSO_CUSTOM);
-  const hasScim = useHasFeature(Feature.SCIM);
+  const hasRetention = useHasFeature(Feature.RETENTION);
-  const [workspace] = useAtom(workspaceAtom);
+  const hasSharingControls = useHasFeature(Feature.SHARING_CONTROLS);
-  const isScimEnabled = workspace?.isScimEnabled ?? false;
-
-  const { cursor, goNext, goPrev } = useCursorPaginate();
-  const { data: scimData, isLoading: scimLoading } = useGetScimTokensQuery(
-    hasScim && isScimEnabled ? { cursor } : undefined,
-  );
-
-  const [createOpen, setCreateOpen] = useState(false);
-  const [createdToken, setCreatedToken] = useState<IScimToken | null>(null);
-  const [updateTarget, setUpdateTarget] = useState<IScimToken | null>(null);
-  const [revokeTarget, setRevokeTarget] = useState<IScimToken | null>(null);
 
   if (!isAdmin) {
     return null;
@@ -80,7 +45,7 @@ export default function Security() {
       <Divider my="lg" />
 
       <Title order={4} my="lg">
-        {t("Single sign-on (SSO)")}
+        Single sign-on (SSO)
       </Title>
 
       <EnforceSso />
@@ -101,102 +66,6 @@ export default function Security() {
       )}
 
       <SsoProviderList />
-
-      {hasScim && (
-        <>
-          <Divider my="xl" />
-
-          <Title order={4} my="lg">
-            {t("SCIM provisioning")}
-          </Title>
-
-          <Alert
-            icon={<IconInfoCircle size={16} />}
-            color="blue"
-            variant="light"
-            mb="md"
-          >
-            {t("SCIM takes precedence over SSO group sync while enabled.")}
-          </Alert>
-
-          <EnableScim />
-
-          <Divider my="lg" />
-
-          <ScimUrlPanel />
-
-          {isScimEnabled && (
-            <>
-              <Divider my="lg" />
-
-              <Group justify="space-between" mb="md">
-                <Title order={5}>{t("SCIM tokens")}</Title>
-                <Tooltip
-                  label={t(
-                    "You have reached the maximum of {{max}} SCIM tokens. Delete an existing token to create a new one.",
-                    { max: SCIM_TOKEN_LIMIT },
-                  )}
-                  disabled={(scimData?.items.length ?? 0) < SCIM_TOKEN_LIMIT}
-                  refProp="rootRef"
-                >
-                  <Button
-                    onClick={() => setCreateOpen(true)}
-                    disabled={(scimData?.items.length ?? 0) >= SCIM_TOKEN_LIMIT}
-                  >
-                    {t("Create {{credential}}", {
-                      credential: t("SCIM token"),
-                    })}
-                  </Button>
-                </Tooltip>
-              </Group>
-
-              <Card shadow="sm" radius="sm">
-                <ScimTokenTable
-                  tokens={scimData?.items}
-                  isLoading={scimLoading}
-                  onUpdate={setUpdateTarget}
-                  onRevoke={setRevokeTarget}
-                />
-              </Card>
-
-              <Space h="md" />
-
-              {scimData?.items.length > 0 && (
-                <Paginate
-                  hasPrevPage={scimData?.meta?.hasPrevPage}
-                  hasNextPage={scimData?.meta?.hasNextPage}
-                  onNext={() => goNext(scimData?.meta?.nextCursor)}
-                  onPrev={goPrev}
-                />
-              )}
-
-              <CreateScimTokenModal
-                opened={createOpen}
-                onClose={() => setCreateOpen(false)}
-                onSuccess={setCreatedToken}
-              />
-
-              <ScimTokenCreatedModal
-                opened={!!createdToken}
-                onClose={() => setCreatedToken(null)}
-                scimToken={createdToken}
-              />
-
-              <UpdateScimTokenModal
-                opened={!!updateTarget}
-                onClose={() => setUpdateTarget(null)}
-                scimToken={updateTarget}
-              />
-
-              <RevokeScimTokenModal
-                opened={!!revokeTarget}
-                onClose={() => setRevokeTarget(null)}
-                scimToken={revokeTarget}
-              />
-            </>
-          )}
-        </>
-      )}
     </>
   );
 }

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

@@ -56,7 +56,6 @@ export default function TemplateCard({
                     color="gray"
                     className={classes.menuTarget}
                     onClick={(e) => e.stopPropagation()}
-                    aria-label={t("Template menu")}
                   >
                     <IconDots size={16} />
                   </ActionIcon>

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

@@ -24,7 +24,7 @@ export default function TemplatePreviewModal({
   const title = template?.title || t("Untitled");
 
   return (
-    <Modal.Root size={1200} opened={opened} onClose={onClose} aria-label={title}>
+    <Modal.Root size={1200} opened={opened} onClose={onClose}>
       <Modal.Overlay />
       <Modal.Content style={{ overflow: "hidden" }}>
         <Modal.Header>

apps/client/src/features/comment/components/comment-dialog.tsx

@@ -144,7 +144,6 @@ function CommentDialog({ editor, pageId, readOnly }: CommentDialogProps) {
       withCloseButton
       withBorder
       data-comment-dialog
-      aria-label={t("Add comment")}
     >
       <Stack gap={2}>
         <Group>

apps/client/src/features/comment/components/comment-editor.tsx

@@ -10,7 +10,6 @@ import { useTranslation } from "react-i18next";
 import EmojiCommand from "@/features/editor/extensions/emoji-command";
 import mentionRenderItems from "@/features/editor/components/mention/mention-suggestion";
 import MentionView from "@/features/editor/components/mention/mention-view";
-import { platformModifierKey } from "@/lib";
 
 interface CommentEditorProps {
   defaultContent?: any;
@@ -84,7 +83,7 @@ const CommentEditor = forwardRef(
               }
             }
 
-            if (platformModifierKey(event) && event.code === "Enter") {
+            if ((event.ctrlKey || event.metaKey) && event.key === "Enter") {
               event.preventDefault();
               if (onSave) onSave();
 

apps/client/src/features/comment/components/comment-list-item.tsx

@@ -173,15 +173,6 @@ function CommentListItem({
           <Box
             className={classes.textSelection}
             onClick={() => handleCommentClick(comment)}
-            onKeyDown={(e) => {
-              if (e.key === "Enter" || e.key === " ") {
-                e.preventDefault();
-                handleCommentClick(comment);
-              }
-            }}
-            role="button"
-            tabIndex={0}
-            aria-label={t("Jump to comment selection")}
           >
             <Text size="sm">{comment?.selection}</Text>
           </Box>

apps/client/src/features/comment/components/comment-menu.tsx

@@ -46,11 +46,7 @@ function CommentMenu({
   return (
     <Menu shadow="md" width={200}>
       <Menu.Target>
-        <ActionIcon
+        <ActionIcon variant="default" style={{ border: "none" }}>
-          variant="default"
-          style={{ border: "none" }}
-          aria-label={t("Comment menu")}
-        >
           <IconDots size={20} stroke={2} />
         </ActionIcon>
       </Menu.Target>

apps/client/src/features/editor/components/attachment/upload-attachment-action.tsx

@@ -19,9 +19,7 @@ export const uploadAttachmentAction = handleAttachmentUpload({
   },
   validateFn: (file, allowMedia: boolean) => {
     if (
-      (file.type.includes("image/") ||
+      (file.type.includes("image/") || file.type.includes("video/")) &&
-        file.type.includes("video/") ||
-        file.type === "application/pdf") &&
       !allowMedia
     ) {
       return false;

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

@@ -36,7 +36,6 @@ export default function AudioView(props: NodeViewProps) {
             preload="metadata"
             controls
             src={safeSrc}
-            aria-label={placeholder?.name || t("Audio")}
           />
         )}
         {!safeSrc && previewSrc && (
@@ -46,7 +45,6 @@ export default function AudioView(props: NodeViewProps) {
               preload="metadata"
               controls
               src={previewSrc}
-              aria-label={placeholder?.name || t("Audio")}
             />
             <Loader size={20} pos="absolute" top={6} right={6} />
           </Group>
@@ -62,7 +60,7 @@ export default function AudioView(props: NodeViewProps) {
           </Group>
         )}
         {!safeSrc && !previewSrc && !placeholder && (
-          <audio className={classes.audio} controls aria-label={t("Audio")} />
+          <audio className={classes.audio} controls />
         )}
       </div>
     </NodeViewWrapper>

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

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

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

@@ -27,7 +27,7 @@ import { isCellSelection, isTextSelected } from "@docmost/editor-ext";
 import { LinkSelector } from "@/features/editor/components/bubble-menu/link-selector.tsx";
 import { useTranslation } from "react-i18next";
 import { showAiMenuAtom, showLinkMenuAtom } from "@/features/editor/atoms/editor-atoms";
-import { userAtom, workspaceAtom } from "@/features/user/atoms/current-user-atom";
+import { workspaceAtom } from "@/features/user/atoms/current-user-atom";
 
 export interface BubbleMenuItem {
   name: string;
@@ -46,9 +46,6 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
   const [showCommentPopup, setShowCommentPopup] = useAtom(showCommentPopupAtom);
   const workspace = useAtomValue(workspaceAtom);
   const isGenerativeAiEnabled = workspace?.settings?.ai?.generative === true;
-  const user = useAtomValue(userAtom);
-  const editorToolbarEnabled =
-    user?.settings?.preferences?.editorToolbar ?? false;
   const [, setDraftCommentId] = useAtom(draftCommentIdAtom);
   const showCommentPopupRef = useRef(showCommentPopup);
   const showAiMenuRef = useRef(showAiMenu);
@@ -152,7 +149,7 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
       return isTextSelected(editor);
     },
     options: {
-      placement: editorToolbarEnabled ? "bottom" : "top",
+      placement: "top",
       offset: 8,
       onHide: () => {
         setIsNodeSelectorOpen(false);
@@ -191,60 +188,56 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
             <div className={classes.divider} />
           </>
         )}
-        {!editorToolbarEnabled && (
+        <NodeSelector
-          <>
+          editor={props.editor}
-            <NodeSelector
+          isOpen={isNodeSelectorOpen}
-              editor={props.editor}
+          setIsOpen={() => {
-              isOpen={isNodeSelectorOpen}
+            setIsNodeSelectorOpen(!isNodeSelectorOpen);
-              setIsOpen={() => {
+            setIsTextAlignmentOpen(false);
-                setIsNodeSelectorOpen(!isNodeSelectorOpen);
+            setIsColorSelectorOpen(false);
-                setIsTextAlignmentOpen(false);
+          }}
-                setIsColorSelectorOpen(false);
+        />
-              }}
-            />
 
-            <TextAlignmentSelector
+        <TextAlignmentSelector
-              editor={props.editor}
+          editor={props.editor}
-              isOpen={isTextAlignmentSelectorOpen}
+          isOpen={isTextAlignmentSelectorOpen}
-              setIsOpen={() => {
+          setIsOpen={() => {
-                setIsTextAlignmentOpen(!isTextAlignmentSelectorOpen);
+            setIsTextAlignmentOpen(!isTextAlignmentSelectorOpen);
-                setIsNodeSelectorOpen(false);
+            setIsNodeSelectorOpen(false);
-                setIsColorSelectorOpen(false);
+            setIsColorSelectorOpen(false);
-              }}
+          }}
-            />
+        />
 
-            <ActionIcon.Group>
+        <ActionIcon.Group>
-              {items.map((item, index) => (
+          {items.map((item, index) => (
-                <Tooltip key={index} label={t(item.name)} withArrow>
+            <Tooltip key={index} label={t(item.name)} withArrow>
-                  <ActionIcon
+              <ActionIcon
-                    key={index}
+                key={index}
-                    variant="default"
+                variant="default"
-                    size="lg"
+                size="lg"
-                    radius="0"
+                radius="0"
-                    aria-label={t(item.name)}
+                aria-label={t(item.name)}
-                    className={clsx({ [classes.active]: item.isActive() })}
+                className={clsx({ [classes.active]: item.isActive() })}
-                    style={{ border: "none" }}
+                style={{ border: "none" }}
-                    onClick={item.command}
+                onClick={item.command}
-                  >
+              >
-                    <item.icon style={{ width: rem(16) }} stroke={2} />
+                <item.icon style={{ width: rem(16) }} stroke={2} />
-                  </ActionIcon>
+              </ActionIcon>
-                </Tooltip>
+            </Tooltip>
-              ))}
+          ))}
-            </ActionIcon.Group>
+        </ActionIcon.Group>
 
-            <LinkSelector />
+        <LinkSelector />
 
-            <ColorSelector
+        <ColorSelector
-              editor={props.editor}
+          editor={props.editor}
-              isOpen={isColorSelectorOpen}
+          isOpen={isColorSelectorOpen}
-              setIsOpen={() => {
+          setIsOpen={() => {
-                setIsColorSelectorOpen(!isColorSelectorOpen);
+            setIsColorSelectorOpen(!isColorSelectorOpen);
-                setIsNodeSelectorOpen(false);
+            setIsNodeSelectorOpen(false);
-                setIsTextAlignmentOpen(false);
+            setIsTextAlignmentOpen(false);
-              }}
+          }}
-            />
+        />
-          </>
-        )}
 
         <Tooltip label={t(commentItem.name)} withArrow withinPortal={false}>
           <ActionIcon

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

@@ -4,6 +4,7 @@ import {
   Button,
   Popover,
   rem,
+  ScrollArea,
   Text,
   Tooltip,
   SimpleGrid,
@@ -113,63 +114,6 @@ const HIGHLIGHT_COLORS: BubbleColorMenuItem[] = [
   },
 ];
 
-const COLOR_GRID_COLS = 5;
-
-function focusSwatch(grid: "text" | "highlight", index: number) {
-  const el = document.querySelector<HTMLElement>(
-    `[data-color-grid="${grid}"][data-color-index="${index}"]`,
-  );
-  el?.focus();
-}
-
-function handleColorKeyNav(
-  e: React.KeyboardEvent<HTMLDivElement>,
-  index: number,
-  grid: "text" | "highlight",
-) {
-  const cols = COLOR_GRID_COLS;
-  const total =
-    grid === "text" ? TEXT_COLORS.length : HIGHLIGHT_COLORS.length;
-  const col = index % cols;
-
-  if (e.key === "ArrowRight") {
-    e.preventDefault();
-    if (index < total - 1) focusSwatch(grid, index + 1);
-    return;
-  }
-  if (e.key === "ArrowLeft") {
-    e.preventDefault();
-    if (index > 0) focusSwatch(grid, index - 1);
-    return;
-  }
-  if (e.key === "ArrowDown") {
-    e.preventDefault();
-    const next = index + cols;
-    if (next < total) {
-      focusSwatch(grid, next);
-    } else if (grid === "text") {
-      focusSwatch("highlight", Math.min(col, HIGHLIGHT_COLORS.length - 1));
-    } else if (grid === "highlight") {
-      document
-        .querySelector<HTMLElement>('[data-color-grid="remove"]')
-        ?.focus();
-    }
-    return;
-  }
-  if (e.key === "ArrowUp") {
-    e.preventDefault();
-    const prev = index - cols;
-    if (prev >= 0) {
-      focusSwatch(grid, prev);
-    } else if (grid === "highlight") {
-      const lastRowStart =
-        Math.floor((TEXT_COLORS.length - 1) / cols) * cols;
-      focusSwatch("text", Math.min(lastRowStart + col, TEXT_COLORS.length - 1));
-    }
-    return;
-  }
-}
-
 export const ColorSelector: FC<ColorSelectorProps> = ({
   editor,
   isOpen,
@@ -213,20 +157,13 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
   );
 
   return (
-    <Popover
+    <Popover width={220} opened={isOpen} withArrow>
-      width={220}
-      opened={isOpen}
-      onChange={setIsOpen}
-      trapFocus
-      withArrow
-    >
       <Popover.Target>
         <Tooltip label={t("Text color")} withArrow>
           <Button
             variant="default"
             radius="0"
             rightSection={<IconChevronDown size={16} />}
-            onMouseDown={(e) => e.preventDefault()}
             onClick={() => setIsOpen(!isOpen)}
             data-text-color={activeColorItem?.color || ""}
             data-highlight-color={activeHighlightItem?.color || ""}
@@ -235,54 +172,34 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
               fontWeight: 500,
               fontSize: rem(16),
             }}
-            aria-label={t("Text color")}
-            aria-haspopup="dialog"
-            aria-expanded={isOpen}
           >
             A
           </Button>
         </Tooltip>
       </Popover.Target>
 
-      <Popover.Dropdown onMouseDown={(e) => e.preventDefault()}>
+      <Popover.Dropdown>
-        <Stack gap="md" p="2px">
+        <ScrollArea.Autosize type="scroll" mah="400">
+          <Stack gap="md">
             <Box>
               <Text size="sm" fw={600} mb="xs">
                 {t("Text color")}
               </Text>
               <SimpleGrid cols={5} spacing="xs">
-                {TEXT_COLORS.map(({ name, color }, index) => {
+                {TEXT_COLORS.map(({ name, color }, index) => (
-                  const applyTextColor = () => {
-                    if (name === "Default") {
-                      editor.commands.unsetColor();
-                    } else {
-                      editor
-                        .chain()
-                        .focus()
-                        .setColor(color || "")
-                        .run();
-                    }
-                    setIsOpen(false);
-                  };
-                  return (
                   <Tooltip key={index} label={t(name)} withArrow>
                     <Box
-                      role="button"
+                      onClick={() => {
-                      tabIndex={0}
+                        if (name === "Default") {
-                      data-autofocus={index === 0 ? true : undefined}
+                          editor.commands.unsetColor();
-                      data-color-grid="text"
+                        } else {
-                      data-color-index={index}
+                          editor
-                      className={classes.colorSwatch}
+                            .chain()
-                      aria-label={t(name)}
+                            .focus()
-                      aria-pressed={!!editorState[`text_${color}`]}
+                            .setColor(color || "")
-                      onClick={applyTextColor}
+                            .run();
-                      onKeyDown={(e) => {
-                        if (e.key === "Enter" || e.key === " ") {
-                          e.preventDefault();
-                          applyTextColor();
-                          return;
                         }
-                        handleColorKeyNav(e, index, "text");
+                        setIsOpen(false);
                       }}
                       style={{
                         width: rem(28),
@@ -304,8 +221,7 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
                       A
                     </Box>
                   </Tooltip>
-                  );
+                ))}
-                })}
               </SimpleGrid>
             </Box>
 
@@ -314,40 +230,23 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
                 {t("Highlight color")}
               </Text>
               <SimpleGrid cols={5} spacing="xs">
-                {HIGHLIGHT_COLORS.map(({ name, color }, index) => {
+                {HIGHLIGHT_COLORS.map(({ name, color }, index) => (
-                  const applyHighlight = () => {
-                    if (name === "Default") {
-                      editor.commands.unsetHighlight();
-                    } else {
-                      editor
-                        .chain()
-                        .focus()
-                        .toggleMark("highlight", {
-                          color: color || "",
-                          colorName: name.toLowerCase() || "",
-                        })
-                        .run();
-                    }
-                    setIsOpen(false);
-                  };
-                  return (
                   <Tooltip key={index} label={t(name)} withArrow>
                     <Box
-                      role="button"
+                      onClick={() => {
-                      tabIndex={0}
+                        if (name === "Default") {
-                      data-color-grid="highlight"
+                          editor.commands.unsetHighlight();
-                      data-color-index={index}
+                        } else {
-                      className={classes.colorSwatch}
+                          editor
-                      aria-label={t(name)}
+                            .chain()
-                      aria-pressed={!!editorState[`highlight_${color}`]}
+                            .focus()
-                      onClick={applyHighlight}
+                            .toggleMark("highlight", {
-                      onKeyDown={(e) => {
+                              color: color || "",
-                        if (e.key === "Enter" || e.key === " ") {
+                              colorName: name.toLowerCase() || "",
-                          e.preventDefault();
+                            })
-                          applyHighlight();
+                            .run();
-                          return;
                         }
-                        handleColorKeyNav(e, index, "highlight");
+                        setIsOpen(false);
                       }}
                       style={{
                         width: rem(28),
@@ -375,35 +274,23 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
                       )}
                     </Box>
                   </Tooltip>
-                  );
+                ))}
-                })}
               </SimpleGrid>
             </Box>
 
             <Button
               variant="default"
               fullWidth
-              data-color-grid="remove"
-              className={classes.removeColor}
               onClick={() => {
                 editor.commands.unsetColor();
                 editor.commands.unsetHighlight();
                 setIsOpen(false);
               }}
-              onKeyDown={(e) => {
-                if (e.key === "ArrowUp") {
-                  e.preventDefault();
-                  const lastRowStart =
-                    Math.floor(
-                      (HIGHLIGHT_COLORS.length - 1) / COLOR_GRID_COLS,
-                    ) * COLOR_GRID_COLS;
-                  focusSwatch("highlight", lastRowStart);
-                }
-              }}
             >
               {t("Remove color")}
             </Button>
           </Stack>
+        </ScrollArea.Autosize>
       </Popover.Dropdown>
     </Popover>
   );

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

@@ -12,7 +12,6 @@ import {
   IconInfoCircle,
   IconList,
   IconListNumbers,
-  IconQuote,
   IconTypography,
 } from "@tabler/icons-react";
 import { Popover, Button, ScrollArea, Tooltip } from "@mantine/core";
@@ -60,7 +59,6 @@ export const NodeSelector: FC<NodeSelectorProps> = ({
         isCodeBlock: ctx.editor.isActive("codeBlock"),
         isCallout: ctx.editor.isActive("callout"),
         isDetails: ctx.editor.isActive("details"),
-        isTransclusionSource: ctx.editor.isActive("transclusionSource"),
       };
     },
   });
@@ -124,12 +122,6 @@ export const NodeSelector: FC<NodeSelectorProps> = ({
           .run(),
       isActive: () => editorState?.isBlockquote,
     },
-    {
-      name: "Synced block",
-      icon: IconQuote,
-      command: () => editor.chain().focus().toggleTransclusionSource().run(),
-      isActive: () => editorState?.isTransclusionSource,
-    },
     {
       name: "Code",
       icon: IconCode,
@@ -155,14 +147,9 @@ export const NodeSelector: FC<NodeSelectorProps> = ({
   };
 
   return (
-    <Popover opened={isOpen} onChange={setIsOpen} withArrow>
+    <Popover opened={isOpen} withArrow>
       <Popover.Target>
-        <Tooltip
+        <Tooltip label={t("Turn into")} withArrow withinPortal={false} disabled={isOpen}>
-          label={t("Turn into")}
-          withArrow
-          withinPortal={false}
-          disabled={isOpen}
-        >
           <Button
             className={classes.buttonRoot}
             variant="default"
@@ -170,9 +157,6 @@ export const NodeSelector: FC<NodeSelectorProps> = ({
             radius="0"
             rightSection={<IconChevronDown size={16} />}
             onClick={() => setIsOpen(!isOpen)}
-            aria-label={t("Turn into")}
-            aria-haspopup="menu"
-            aria-expanded={isOpen}
           >
             {t(activeItem?.name)}
           </Button>

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

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

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

@@ -137,13 +137,7 @@ export default function DrawioView(props: NodeViewProps) {
 
   return (
     <NodeViewWrapper data-drag-handle>
-      <Modal.Root
+      <Modal.Root opened={opened} onClose={handleClose} fullScreen closeOnEscape={false}>
-        opened={opened}
-        onClose={handleClose}
-        fullScreen
-        closeOnEscape={false}
-        aria-label={t("Diagram editor")}
-      >
         <Modal.Overlay />
         <Modal.Content style={{ overflow: "hidden" }}>
           <Modal.Body pos="relative">

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

apps/client/src/features/editor/components/link/link-editor-panel.tsx

@@ -102,14 +102,6 @@ export const LinkEditorPanel = ({
           leftSection={<IconLink size={16} stroke={1.5} color="var(--mantine-color-dimmed)" />}
           classNames={{ input: classes.linkInput }}
           placeholder={t("Paste link or search pages")}
-          aria-label={t("Paste link or search pages")}
-          role="combobox"
-          aria-expanded={showDropdown}
-          aria-controls="link-editor-results"
-          aria-autocomplete="list"
-          aria-activedescendant={
-            showDropdown ? `link-editor-option-${selectedIndex}` : undefined
-          }
           value={state.url}
           onChange={state.onChange}
           onKeyDown={handleKeyDown}
@@ -133,16 +125,10 @@ export const LinkEditorPanel = ({
             scrollbarSize={6}
             mt={state.url.length > 0 ? 8 : 0}
             styles={{ content: { minWidth: 0 } }}
-            id="link-editor-results"
-            role="listbox"
-            aria-label={t("Link suggestions")}
           >
             {showUrlItem && (
               <UnstyledButton
                 data-item-index={0}
-                id="link-editor-option-0"
-                role="option"
-                aria-selected={selectedIndex === 0}
                 onClick={() => onSetLink(state.url, false)}
                 className={clsx(classes.searchItem, {
                   [classes.selectedSearchItem]: selectedIndex === 0,
@@ -170,9 +156,6 @@ export const LinkEditorPanel = ({
               return (
                 <UnstyledButton
                   data-item-index={itemIndex}
-                  id={`link-editor-option-${itemIndex}`}
-                  role="option"
-                  aria-selected={itemIndex === selectedIndex}
                   key={page.id || index}
                   onClick={() => selectPage(page)}
                   className={clsx(classes.searchItem, {

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

@@ -287,16 +287,7 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
   );
 
   return (
-    <Paper
+    <Paper id="mention" shadow="md" withBorder radius="md" py={6}>
-      id="mention"
-      shadow="md"
-      withBorder
-      radius="md"
-      py={6}
-      role="listbox"
-      aria-label={t("Mention suggestions")}
-      aria-activedescendant={`mention-option-${selectedIndex}`}
-    >
       <ScrollArea.Autosize
         viewportRef={viewportRef}
         mah={350}
@@ -310,7 +301,7 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
           if (item.entityType === "header") {
             const isFirst = index === 0;
             return (
-              <div key={`${item.label}-${index}`} role="presentation">
+              <div key={`${item.label}-${index}`}>
                 {!isFirst && <Divider my={6} />}
                 <Text
                   c="dimmed"
@@ -331,9 +322,6 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
               <UnstyledButton
                 data-item-index={index}
                 key={index}
-                id={`mention-option-${index}`}
-                role="option"
-                aria-selected={index === selectedIndex}
                 onClick={() => selectItem(index)}
                 className={clsx(classes.menuBtn, {
                   [classes.selectedItem]: index === selectedIndex,
@@ -360,9 +348,6 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
               <UnstyledButton
                 data-item-index={index}
                 key={index}
-                id={`mention-option-${index}`}
-                role="option"
-                aria-selected={index === selectedIndex}
                 onClick={() => selectItem(index)}
                 className={clsx(classes.menuBtn, {
                   [classes.selectedItem]: index === selectedIndex,
@@ -373,7 +358,7 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
                   <ActionIcon
                     variant="subtle"
                     component="div"
-                    aria-hidden="true"
+                    aria-label={item.label}
                     color="gray"
                     size="sm"
                   >
@@ -405,11 +390,6 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
             {(hasUsers || hasPages) && <Divider my={6} />}
             <UnstyledButton
               data-item-index={renderItems.indexOf(createPageItemData)}
-              id={`mention-option-${renderItems.indexOf(createPageItemData)}`}
-              role="option"
-              aria-selected={
-                renderItems.indexOf(createPageItemData) === selectedIndex
-              }
               onClick={() =>
                 selectItem(renderItems.indexOf(createPageItemData))
               }
@@ -425,7 +405,6 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
                   component="div"
                   color="gray"
                   size="sm"
-                  aria-hidden="true"
                 >
                   <IconPlus size={16} stroke={1.5} />
                 </ActionIcon>

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

@@ -92,20 +92,7 @@ export default function PdfView(props: NodeViewProps) {
   if (hasError) {
     return (
       <NodeViewWrapper data-drag-handle>
-        <div
+        <div data-pdf-error className={clsx(classes.pdfError, { "ProseMirror-selectednode": selected })} onClick={handleSelect}>
-          data-pdf-error
-          className={clsx(classes.pdfError, { "ProseMirror-selectednode": selected })}
-          onClick={handleSelect}
-          onKeyDown={(e) => {
-            if (e.key === "Enter" || e.key === " ") {
-              e.preventDefault();
-              handleSelect();
-            }
-          }}
-          role="button"
-          tabIndex={0}
-          aria-label={t("Failed to load PDF")}
-        >
           <IconFileTypePdf size={32} stroke={1.5} />
           <Text size="sm" c="dimmed">
             {t("Failed to load PDF")}

apps/client/src/features/editor/components/search-and-replace/search-and-replace-dialog.tsx

@@ -187,14 +187,12 @@ function SearchAndReplaceDialog({ editor, editable = true }: PageFindDialogDialo
       position={{ top: 90, right: 50 }}
       withBorder
       transitionProps={{ transition: "slide-down" }}
-      aria-label={t("Find and replace")}
     >
       <Stack gap="xs">
         <Flex align="center" gap="xs">
           <Input
             ref={inputRef}
             placeholder={t("Find")}
-            aria-label={t("Find")}
             leftSection={<IconSearch size={16} />}
             rightSection={
               <Text size="xs" ta="right">
@@ -219,12 +217,7 @@ function SearchAndReplaceDialog({ editor, editable = true }: PageFindDialogDialo
 
           <ActionIcon.Group>
             <Tooltip label={t("Previous match (Shift+Enter)")}>
-              <ActionIcon
+              <ActionIcon variant="subtle" color="gray" onClick={previous}>
-                variant="subtle"
-                color="gray"
-                onClick={previous}
-                aria-label={t("Previous match (Shift+Enter)")}
-              >
                 <IconArrowNarrowUp
                   style={{ width: "70%", height: "70%" }}
                   stroke={1.5}
@@ -232,12 +225,7 @@ function SearchAndReplaceDialog({ editor, editable = true }: PageFindDialogDialo
               </ActionIcon>
             </Tooltip>
             <Tooltip label={t("Next match (Enter)")}>
-              <ActionIcon
+              <ActionIcon variant="subtle" color="gray" onClick={next}>
-                variant="subtle"
-                color="gray"
-                onClick={next}
-                aria-label={t("Next match (Enter)")}
-              >
                 <IconArrowNarrowDown
                   style={{ width: "70%", height: "70%" }}
                   stroke={1.5}
@@ -249,8 +237,6 @@ function SearchAndReplaceDialog({ editor, editable = true }: PageFindDialogDialo
                 variant="subtle"
                 color={caseSensitive.color}
                 onClick={() => caseSensitiveToggle()}
-                aria-label={t("Match case (Alt+C)")}
-                aria-pressed={caseSensitive.isCaseSensitive}
               >
                 <IconLetterCase
                   style={{ width: "70%", height: "70%" }}
@@ -264,8 +250,6 @@ function SearchAndReplaceDialog({ editor, editable = true }: PageFindDialogDialo
                   variant="subtle"
                   color={replaceButton.color}
                   onClick={() => replaceButtonToggle()}
-                  aria-label={t("Replace")}
-                  aria-pressed={replaceButton.isReplaceShow}
                 >
                   <IconReplace
                     style={{ width: "70%", height: "70%" }}
@@ -275,12 +259,7 @@ function SearchAndReplaceDialog({ editor, editable = true }: PageFindDialogDialo
               </Tooltip>
             )}
             <Tooltip label={t("Close (Escape)")}>
-              <ActionIcon
+              <ActionIcon variant="subtle" color="gray" onClick={closeDialog}>
-                variant="subtle"
-                color="gray"
-                onClick={closeDialog}
-                aria-label={t("Close (Escape)")}
-              >
                 <IconX style={{ width: "70%", height: "70%" }} stroke={1.5} />
               </ActionIcon>
             </Tooltip>
@@ -290,7 +269,6 @@ function SearchAndReplaceDialog({ editor, editable = true }: PageFindDialogDialo
           <Flex align="center" gap="xs">
             <Input
               placeholder={t("Replace")}
-              aria-label={t("Replace")}
               leftSection={<IconReplace size={16} />}
               rightSection={<div></div>}
               rightSectionPointerEvents="all"

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

@@ -86,15 +86,7 @@ const CommandList = ({
   }, [selectedIndex]);
 
   return flatItems.length > 0 ? (
-    <Paper
+    <Paper id="slash-command" shadow="md" p="xs" withBorder>
-      id="slash-command"
-      shadow="md"
-      p="xs"
-      withBorder
-      role="listbox"
-      aria-label={t("Slash commands")}
-      aria-activedescendant={`slash-command-option-${selectedIndex}`}
-    >
       <ScrollArea
         viewportRef={viewportRef}
         h={350}
@@ -102,30 +94,22 @@ const CommandList = ({
         scrollbarSize={8}
         overscrollBehavior="contain"
       >
-        {(() => {
+        {Object.entries(items).map(([category, categoryItems]) => (
-          let flatIndex = -1;
+          <div key={category}>
-          return Object.entries(items).map(([category, categoryItems]) => (
-          <div key={category} role="group" aria-label={category}>
             <Text c="dimmed" mb={4} fw={500} tt="capitalize">
               {category}
             </Text>
-            {categoryItems.map((item: SlashMenuItemType) => {
+            {categoryItems.map((item: SlashMenuItemType, index: number) => (
-              flatIndex += 1;
-              const itemIndex = flatIndex;
-              return (
               <UnstyledButton
-                data-item-index={itemIndex}
+                data-item-index={index}
-                key={itemIndex}
+                key={index}
-                id={`slash-command-option-${itemIndex}`}
+                onClick={() => selectItem(index)}
-                role="option"
-                aria-selected={itemIndex === selectedIndex}
-                onClick={() => selectItem(itemIndex)}
                 className={clsx(classes.menuBtn, {
-                  [classes.selectedItem]: itemIndex === selectedIndex,
+                  [classes.selectedItem]: index === selectedIndex,
                 })}
               >
                 <Group>
-                  <ActionIcon variant="default" component="div" aria-hidden="true">
+                  <ActionIcon variant="default" component="div">
                     <item.icon size={18} />
                   </ActionIcon>
 
@@ -140,11 +124,9 @@ const CommandList = ({
                   </div>
                 </Group>
               </UnstyledButton>
-              );
+            ))}
-            })}
           </div>
-          ));
+        ))}
-        })()}
       </ScrollArea>
     </Paper>
   ) : null;

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

@@ -25,8 +25,6 @@ import {
   IconColumns3,
   IconColumns2,
   IconTag,
-  IconMoodSmile,
-  IconRotate2,
 } from "@tabler/icons-react";
 import {
   CommandProps,
@@ -134,7 +132,7 @@ const CommandGroups: SlashMenuGroupedItemsType = {
     {
       title: "Numbered list",
       description: "Create a list with numbering.",
-      searchTerms: ["numbered", "ordered", "list", "ol"],
+      searchTerms: ["numbered", "ordered", "list"],
       icon: IconListNumbers,
       command: ({ editor, range }: CommandProps) => {
         editor.chain().focus().deleteRange(range).toggleOrderedList().run();
@@ -233,15 +231,7 @@ const CommandGroups: SlashMenuGroupedItemsType = {
     {
       title: "Audio",
       description: "Upload any audio from your device.",
-      searchTerms: [
+      searchTerms: ["audio", "music", "sound", "mp3", "media", "file", "attachment"],
-        "audio",
-        "music",
-        "sound",
-        "mp3",
-        "media",
-        "file",
-        "attachment",
-      ],
       icon: IconMusic,
       command: ({ editor, range }) => {
         editor.chain().focus().deleteRange(range).run();
@@ -478,53 +468,15 @@ const CommandGroups: SlashMenuGroupedItemsType = {
           .run();
       },
     },
-    {
-      title: "Emoji",
-      description: "Insert emoji.",
-      searchTerms: ["emoji", "icon", "smiley", "emoticon", "symbol", "reaction"],
-      icon: IconMoodSmile,
-      command: ({ editor, range }: CommandProps) => {
-        editor.chain().focus().deleteRange(range).insertContent(":").run();
-      },
-    },
     {
       title: "Subpages (Child pages)",
       description: "List all subpages of the current page",
-      searchTerms: [
+      searchTerms: ["subpages", "child", "children", "nested", "hierarchy"],
-        "subpages",
-        "child",
-        "children",
-        "nested",
-        "hierarchy",
-        "toc",
-      ],
       icon: IconSitemap,
       command: ({ editor, range }: CommandProps) => {
         editor.chain().focus().deleteRange(range).insertSubpages().run();
       },
     },
-    {
-      title: "Synced block",
-      description: "Create a block that stays in sync across pages.",
-      searchTerms: [
-        "sync",
-        "synced",
-        "synced block",
-        "excerpt",
-        "transclusion",
-        "reusable",
-        "snippet",
-      ],
-      icon: IconRotate2,
-      command: ({ editor, range }: CommandProps) => {
-        editor
-          .chain()
-          .focus()
-          .deleteRange(range)
-          .insertTransclusionSource()
-          .run();
-      },
-    },
     {
       title: "2 Columns",
       description: "Split content into two columns.",

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

@@ -92,17 +92,8 @@ export default function StatusView(props: NodeViewProps) {
               colorClassMap[color],
             )}
             onClick={() => isEditable && setOpened(true)}
-            onKeyDown={(e) => {
-              if (isEditable && (e.key === "Enter" || e.key === " ")) {
-                e.preventDefault();
-                setOpened(true);
-              }
-            }}
             role="button"
             tabIndex={0}
-            aria-label={text || "SET STATUS"}
-            aria-haspopup="dialog"
-            aria-expanded={opened}
           >
             {text || "SET STATUS"}
           </span>
@@ -136,16 +127,6 @@ export default function StatusView(props: NodeViewProps) {
                 )}
                 style={{ backgroundColor: bg }}
                 onClick={() => handleColorChange(name)}
-                onKeyDown={(e) => {
-                  if (e.key === "Enter" || e.key === " ") {
-                    e.preventDefault();
-                    handleColorChange(name);
-                  }
-                }}
-                role="button"
-                tabIndex={0}
-                aria-label={name}
-                aria-pressed={color === name}
               >
                 {color === name && <IconCheck size={14} />}
               </Box>

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

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

apps/client/src/features/editor/components/transclusion/error-placeholder.tsx

@@ -1,17 +0,0 @@
-import { IconAlertTriangle } from "@tabler/icons-react";
-import { useTranslation } from "react-i18next";
-import classes from "./transclusion.module.css";
-
-export default function ErrorPlaceholder() {
-  const { t } = useTranslation();
-  return (
-    <div className={classes.placeholder}>
-      <IconAlertTriangle
-        size={18}
-        stroke={1.6}
-        className={classes.placeholderIcon}
-      />
-      <span>{t("Failed to load this synced block")}</span>
-    </div>
-  );
-}

apps/client/src/features/editor/components/transclusion/no-access-placeholder.tsx

@@ -1,13 +0,0 @@
-import { IconEyeOff } from "@tabler/icons-react";
-import { useTranslation } from "react-i18next";
-import classes from "./transclusion.module.css";
-
-export default function NoAccessPlaceholder() {
-  const { t } = useTranslation();
-  return (
-    <div className={classes.placeholder}>
-      <IconEyeOff size={18} stroke={1.6} className={classes.placeholderIcon} />
-      <span>{t("You don't have access to this synced block")}</span>
-    </div>
-  );
-}

apps/client/src/features/editor/components/transclusion/not-found-placeholder.tsx

@@ -1,17 +0,0 @@
-import { IconInfoCircle } from "@tabler/icons-react";
-import { useTranslation } from "react-i18next";
-import classes from "./transclusion.module.css";
-
-export default function NotFoundPlaceholder() {
-  const { t } = useTranslation();
-  return (
-    <div className={classes.placeholder}>
-      <IconInfoCircle
-        size={18}
-        stroke={1.6}
-        className={classes.placeholderIcon}
-      />
-      <span>{t("The original synced block no longer exists")}</span>
-    </div>
-  );
-}

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

@@ -1,48 +0,0 @@
-import { EditorProvider } from "@tiptap/react";
-import { useMemo } from "react";
-import { mainExtensions } from "@/features/editor/extensions/extensions";
-import { UniqueID } from "@docmost/editor-ext";
-
-type Props = {
-  content: unknown;
-};
-
-export default function TransclusionContent({ content }: Props) {
-  const extensions = useMemo(() => {
-    const filtered = mainExtensions.filter(
-      (e: any) => e.name !== "uniqueID" && e.name !== "globalDragHandle",
-    );
-    return [
-      ...filtered,
-      UniqueID.configure({
-        types: ["heading", "paragraph", "transclusionSource"],
-        updateDocument: false,
-      }),
-    ];
-  }, []);
-
-  // Isolate the nested read-only editor's events from the host editor:
-  // - mousedown/click would otherwise make the host node-select the atom
-  //   wrapper, blocking native text selection inside.
-  // - dragstart/dragover/drop would otherwise let the host treat events
-  //   inside the nested view as drops on the host, duplicating dropped
-  //   files at the transclusion's position.
-  const stop = (e: React.SyntheticEvent) => e.stopPropagation();
-
-  return (
-    <div
-      onMouseDown={stop}
-      onClick={stop}
-      onDragStart={stop}
-      onDragOver={stop}
-      onDrop={stop}
-    >
-      <EditorProvider
-        editable={false}
-        immediatelyRender={true}
-        extensions={extensions}
-        content={content as any}
-      />
-    </div>
-  );
-}

apps/client/src/features/editor/components/transclusion/transclusion-lookup-context.tsx

@@ -1,213 +0,0 @@
-import React, {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import {
-  lookupTransclusion,
-  lookupTransclusionForShare,
-} from "@/features/transclusion/services/transclusion-api";
-import type { TransclusionLookup } from "@/features/transclusion/types/transclusion.types";
-
-type LookupKey = string; // `${sourcePageId}::${transclusionId}`
-
-type Subscriber = {
-  key: LookupKey;
-  sourcePageId: string;
-  transclusionId: string;
-  setResult: (r: TransclusionLookup) => void;
-};
-
-type ContextValue = {
-  /** Register a subscriber. Returns an unsubscribe function. */
-  subscribe: (s: Subscriber) => () => void;
-  /**
-   * Force a re-fetch of `key` and resolve when the response arrives (or the
-   * request fails). Bypasses the cache and any in-flight de-dup so the user
-   * always sees a fresh server read.
-   */
-  refresh: (key: LookupKey) => Promise<void>;
-};
-
-const TransclusionLookupContext = createContext<ContextValue | null>(null);
-
-export function TransclusionLookupProvider({
-  children,
-  shareId,
-}: {
-  children: React.ReactNode;
-  /**
-   * When set, lookups go through the share-scoped public endpoint and are
-   * gated by the share graph (source page must have its own share or inherit
-   * one). Used by the public share viewer; left undefined in the authenticated
-   * app, where personal permissions gate access.
-   */
-  shareId?: string;
-}) {
-  const subscribersRef = useRef(new Map<LookupKey, Subscriber[]>());
-  const queueRef = useRef(new Set<LookupKey>());
-  const tickRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  // Read inside flush() via ref so changing share context doesn't churn the
-  // memoized callbacks (and thus doesn't re-render every consumer).
-  const shareIdRef = useRef<string | undefined>(shareId);
-  shareIdRef.current = shareId;
-  // Last looked-up value for each key. Re-subscribers (e.g. when the editor
-  // remounts after switching from static to live) get this immediately
-  // instead of triggering a duplicate fetch.
-  const resultCacheRef = useRef(new Map<LookupKey, TransclusionLookup>());
-  // Keys that are currently in flight in a batch request. A second subscribe
-  // for the same key while the first request is pending is a no-op; the
-  // subscriber is added to subscribersRef and will be notified when the
-  // pending request completes.
-  const inFlightRef = useRef(new Set<LookupKey>());
-  // Resolvers waiting on the next response for a key. Populated by refresh()
-  // so callers can await the fetch round-trip; resolved on success and on
-  // network error so the UI never hangs in a loading state.
-  const pendingRef = useRef(new Map<LookupKey, Array<() => void>>());
-
-  const flush = useCallback(async () => {
-    tickRef.current = null;
-    const keys = Array.from(queueRef.current);
-    queueRef.current.clear();
-    if (keys.length === 0) return;
-
-    for (const k of keys) inFlightRef.current.add(k);
-
-    const references = keys.map((k) => {
-      const [sourcePageId, transclusionId] = k.split("::");
-      return { sourcePageId, transclusionId };
-    });
-
-    const resolveWaiters = (key: LookupKey) => {
-      const waiters = pendingRef.current.get(key);
-      if (!waiters) return;
-      pendingRef.current.delete(key);
-      for (const w of waiters) w();
-    };
-
-    try {
-      const activeShareId = shareIdRef.current;
-      const { items } = activeShareId
-        ? await lookupTransclusionForShare({
-            shareId: activeShareId,
-            references,
-          })
-        : await lookupTransclusion({ references });
-      for (const r of items) {
-        const key = `${r.sourcePageId}::${r.transclusionId}`;
-        resultCacheRef.current.set(key, r);
-        inFlightRef.current.delete(key);
-        const subs = subscribersRef.current.get(key);
-        if (subs) {
-          for (const s of subs) s.setResult(r);
-        }
-        resolveWaiters(key);
-      }
-    } catch {
-      // Network error — leave subscribers in pending state and clear the
-      // in-flight flag so a future subscribe can retry.
-      for (const k of keys) {
-        inFlightRef.current.delete(k);
-        resolveWaiters(k);
-      }
-    }
-  }, []);
-
-  const enqueue = useCallback(
-    (key: LookupKey) => {
-      queueRef.current.add(key);
-      if (tickRef.current === null) {
-        tickRef.current = setTimeout(flush, 10);
-      }
-    },
-    [flush],
-  );
-
-  const subscribe = useCallback<ContextValue["subscribe"]>(
-    (s) => {
-      const list = subscribersRef.current.get(s.key) ?? [];
-      list.push(s);
-      subscribersRef.current.set(s.key, list);
-
-      const cached = resultCacheRef.current.get(s.key);
-      if (cached) {
-        s.setResult(cached);
-      } else if (!inFlightRef.current.has(s.key)) {
-        enqueue(s.key);
-      }
-
-      return () => {
-        const cur = subscribersRef.current.get(s.key) ?? [];
-        const next = cur.filter((x) => x !== s);
-        if (next.length === 0) subscribersRef.current.delete(s.key);
-        else subscribersRef.current.set(s.key, next);
-      };
-    },
-    [enqueue],
-  );
-
-  const refresh = useCallback<ContextValue["refresh"]>(
-    (key) =>
-      new Promise<void>((resolve) => {
-        resultCacheRef.current.delete(key);
-        inFlightRef.current.delete(key);
-        const waiters = pendingRef.current.get(key) ?? [];
-        waiters.push(resolve);
-        pendingRef.current.set(key, waiters);
-        enqueue(key);
-      }),
-    [enqueue],
-  );
-
-  useEffect(
-    () => () => {
-      if (tickRef.current) clearTimeout(tickRef.current);
-    },
-    [],
-  );
-
-  const value = useMemo<ContextValue>(
-    () => ({ subscribe, refresh }),
-    [subscribe, refresh],
-  );
-
-  return (
-    <TransclusionLookupContext.Provider value={value}>
-      {children}
-    </TransclusionLookupContext.Provider>
-  );
-}
-
-export function useTransclusionLookup(
-  sourcePageId: string | null | undefined,
-  transclusionId: string | null | undefined,
-): {
-  result: TransclusionLookup | null;
-  refresh: () => Promise<void>;
-} {
-  const ctx = useContext(TransclusionLookupContext);
-  const [result, setResult] = useState<TransclusionLookup | null>(null);
-
-  useEffect(() => {
-    if (!ctx || !sourcePageId || !transclusionId) return;
-    const key = `${sourcePageId}::${transclusionId}`;
-    const unsubscribe = ctx.subscribe({
-      key,
-      sourcePageId,
-      transclusionId,
-      setResult,
-    });
-    return unsubscribe;
-  }, [ctx, sourcePageId, transclusionId]);
-
-  const refresh = useCallback(async () => {
-    if (!ctx || !sourcePageId || !transclusionId) return;
-    await ctx.refresh(`${sourcePageId}::${transclusionId}`);
-  }, [ctx, sourcePageId, transclusionId]);
-
-  return { result, refresh };
-}

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

@@ -1,212 +0,0 @@
-import { NodeViewProps, NodeViewWrapper } from "@tiptap/react";
-import { ActionIcon, Menu, Tooltip } from "@mantine/core";
-import {
-  IconDots,
-  IconLinkOff,
-  IconPencil,
-  IconRefresh,
-  IconTrash,
-} from "@tabler/icons-react";
-import { useState } from "react";
-import { Link } from "react-router-dom";
-import { useTranslation } from "react-i18next";
-import { ErrorBoundary } from "react-error-boundary";
-import { useTransclusionLookup } from "./transclusion-lookup-context";
-import TransclusionContent from "./transclusion-content";
-import NoAccessPlaceholder from "./no-access-placeholder";
-import NotFoundPlaceholder from "./not-found-placeholder";
-import ErrorPlaceholder from "./error-placeholder";
-import classes from "./transclusion.module.css";
-import SyncBlockReferencesDropdown from "@/features/transclusion/components/sync-block-references-dropdown";
-import {
-  useReferencesQuery,
-  useUnsyncReferenceMutation,
-} from "@/features/transclusion/queries/transclusion-query";
-import { buildPageUrl } from "@/features/page/page.utils";
-
-export default function TransclusionReferenceView(props: NodeViewProps) {
-  const isEditable = props.editor.isEditable;
-  const sourcePageId: string | null = props.node.attrs.sourcePageId ?? null;
-  const transclusionId: string | null = props.node.attrs.transclusionId ?? null;
-  const [openMenus, setOpenMenus] = useState(0);
-  const trackOpen = (open: boolean) =>
-    setOpenMenus((n) => Math.max(0, n + (open ? 1 : -1)));
-
-  return (
-    <NodeViewWrapper
-      className={classes.includeWrap}
-      data-focused={isEditable && props.selected ? "true" : "false"}
-      data-menu-open={openMenus > 0 ? "true" : "false"}
-      contentEditable={false}
-    >
-      <ErrorBoundary
-        resetKeys={[sourcePageId, transclusionId]}
-        fallback={<ErrorPlaceholder />}
-      >
-        <TransclusionReferenceBody {...props} trackOpen={trackOpen} />
-      </ErrorBoundary>
-    </NodeViewWrapper>
-  );
-}
-
-function TransclusionReferenceBody({
-  editor,
-  node,
-  deleteNode,
-  getPos,
-  trackOpen,
-}: NodeViewProps & { trackOpen: (open: boolean) => void }) {
-  const { t } = useTranslation();
-  const sourcePageId: string | null = node.attrs.sourcePageId ?? null;
-  const transclusionId: string | null = node.attrs.transclusionId ?? null;
-  const isEditable = editor.isEditable;
-
-  const { result, refresh } = useTransclusionLookup(
-    sourcePageId,
-    transclusionId,
-  );
-  const [refreshing, setRefreshing] = useState(false);
-  const handleRefresh = async () => {
-    setRefreshing(true);
-    try {
-      await refresh();
-    } finally {
-      setRefreshing(false);
-    }
-  };
-  // @ts-ignore - editor.storage.pageId is set by the host editor
-  const hostPageId: string | undefined = editor.storage?.pageId;
-  const unsyncMutation = useUnsyncReferenceMutation();
-  // Cached against the dropdown's identical query so the source link target
-  // is ready as soon as the controls fade in on hover, without a second
-  // fetch.
-  const referencesQuery = useReferencesQuery(
-    sourcePageId,
-    transclusionId,
-    isEditable,
-  );
-  const sourcePageHref = (() => {
-    const source = referencesQuery.data?.source;
-    const base = source?.spaceSlug
-      ? buildPageUrl(source.spaceSlug, source.slugId, source.title)
-      : sourcePageId
-        ? `/p/${sourcePageId}`
-        : null;
-    if (!base) return null;
-    return transclusionId ? `${base}#${transclusionId}` : base;
-  })();
-
-  const handleUnsync = async () => {
-    if (!hostPageId || !sourcePageId || !transclusionId) return;
-    try {
-      const { content } = await unsyncMutation.mutateAsync({
-        referencePageId: hostPageId,
-        sourcePageId,
-        transclusionId,
-      });
-      const pos = getPos();
-      if (typeof pos !== "number") return;
-      const from = pos;
-      const to = pos + node.nodeSize;
-      editor
-        .chain()
-        .focus()
-        .insertContentAt({ from, to }, content as any)
-        .run();
-    } catch {
-      // mutation surfaces errors via React Query; node stays as-is
-    }
-  };
-
-  return (
-    <>
-      {isEditable && (
-        <div
-          className={classes.includeControls}
-          contentEditable={false}
-          onMouseDown={(e) => e.preventDefault()}
-        >
-          {sourcePageId && transclusionId && hostPageId && (
-            <SyncBlockReferencesDropdown
-              sourcePageId={sourcePageId}
-              transclusionId={transclusionId}
-              currentPageId={hostPageId}
-              mode="reference"
-              onOpenChange={trackOpen}
-            />
-          )}
-          <span className={classes.controlsDivider} />
-          <Tooltip label={t("Refresh")}>
-            <ActionIcon
-              variant="subtle"
-              color="gray"
-              size="sm"
-              onClick={handleRefresh}
-              loading={refreshing}
-              disabled={!sourcePageId || !transclusionId}
-            >
-              <IconRefresh size={14} />
-            </ActionIcon>
-          </Tooltip>
-          {sourcePageHref && (
-            <Tooltip label={t("Edit source")}>
-              <ActionIcon
-                component={Link}
-                to={sourcePageHref}
-                variant="subtle"
-                color="gray"
-                size="sm"
-                style={{
-                  textDecoration: "none",
-                  borderBottom: "none",
-                }}
-              >
-                <IconPencil size={14} />
-              </ActionIcon>
-            </Tooltip>
-          )}
-          <Menu position="bottom-end" withinPortal onChange={trackOpen}>
-            <Menu.Target>
-              <ActionIcon variant="subtle" color="gray" size="sm">
-                <IconDots size={14} />
-              </ActionIcon>
-            </Menu.Target>
-            <Menu.Dropdown>
-              <Menu.Item
-                leftSection={<IconLinkOff size={14} />}
-                onClick={handleUnsync}
-                disabled={
-                  unsyncMutation.isPending ||
-                  !hostPageId ||
-                  !sourcePageId ||
-                  !transclusionId
-                }
-              >
-                {t("Unsync")}
-              </Menu.Item>
-              <Menu.Item
-                color="red"
-                leftSection={<IconTrash size={14} />}
-                onClick={() => deleteNode()}
-              >
-                {t("Remove from page")}
-              </Menu.Item>
-            </Menu.Dropdown>
-          </Menu>
-        </div>
-      )}
-
-      {!sourcePageId || !transclusionId ? (
-        <NotFoundPlaceholder />
-      ) : !result ? (
-        <div style={{ minHeight: 24 }} />
-      ) : !("status" in result) ? (
-        <TransclusionContent content={result.content} />
-      ) : result.status === "no_access" ? (
-        <NoAccessPlaceholder />
-      ) : (
-        <NotFoundPlaceholder />
-      )}
-    </>
-  );
-}

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

@@ -1,126 +0,0 @@
-import {
-  NodeViewContent,
-  NodeViewProps,
-  NodeViewWrapper,
-} from "@tiptap/react";
-import { ActionIcon, Menu, Tooltip } from "@mantine/core";
-import { notifications } from "@mantine/notifications";
-import {
-  IconCheck,
-  IconCopy,
-  IconDots,
-  IconLinkOff,
-  IconTrash,
-} from "@tabler/icons-react";
-import { useState } from "react";
-import { useTranslation } from "react-i18next";
-import classes from "./transclusion.module.css";
-import SyncBlockReferencesDropdown from "@/features/transclusion/components/sync-block-references-dropdown";
-
-export default function TransclusionView(props: NodeViewProps) {
-  const { editor, node, deleteNode } = props;
-  const { t } = useTranslation();
-  const [openMenus, setOpenMenus] = useState(0);
-  const trackOpen = (open: boolean) =>
-    setOpenMenus((n) => Math.max(0, n + (open ? 1 : -1)));
-
-  const isEditable = editor.isEditable;
-  // @ts-ignore - editor.storage.pageId is set by the host editor (page-editor.tsx onCreate)
-  const sourcePageId: string | undefined = editor.storage?.pageId;
-  const transclusionId: string | null = node.attrs.id ?? null;
-
-  const [copied, setCopied] = useState(false);
-  const handleCopy = async () => {
-    if (!sourcePageId || !transclusionId) return;
-    const html = `<div data-type="transclusionReference" data-source-page-id="${sourcePageId}" data-transclusion-id="${transclusionId}"></div>`;
-    try {
-      await navigator.clipboard.write([
-        new ClipboardItem({
-          "text/html": new Blob([html], { type: "text/html" }),
-          "text/plain": new Blob([html], { type: "text/plain" }),
-        }),
-      ]);
-    } catch {
-      // Fallback for browsers without ClipboardItem write support
-      try {
-        await navigator.clipboard.writeText(html);
-      } catch {
-        return;
-      }
-    }
-    setCopied(true);
-    window.setTimeout(() => setCopied(false), 2000);
-    notifications.show({
-      message: t("Copied. Paste on any page to embed this synced block."),
-    });
-  };
-
-  const handleUnsync = () => {
-    editor.chain().focus().unsyncTransclusionSource().run();
-  };
-
-  return (
-    <NodeViewWrapper
-      className={classes.transclusionWrap}
-      data-menu-open={openMenus > 0 ? "true" : "false"}
-      data-id={transclusionId ?? undefined}
-    >
-      {isEditable && (
-        <div
-          className={classes.transclusionControls}
-          contentEditable={false}
-          onMouseDown={(e) => e.preventDefault()}
-        >
-          {sourcePageId && transclusionId && (
-            <SyncBlockReferencesDropdown
-              sourcePageId={sourcePageId}
-              transclusionId={transclusionId}
-              currentPageId={sourcePageId}
-              mode="source"
-              onOpenChange={trackOpen}
-            />
-          )}
-
-          <span className={classes.controlsDivider} />
-
-          <Tooltip label={copied ? t("Copied") : t("Copy synced block")}>
-            <ActionIcon
-              variant="subtle"
-              color={copied ? "teal" : "gray"}
-              size="sm"
-              onClick={handleCopy}
-              disabled={!sourcePageId || !transclusionId}
-            >
-              {copied ? <IconCheck size={14} /> : <IconCopy size={14} />}
-            </ActionIcon>
-          </Tooltip>
-
-          <Menu position="bottom-end" withinPortal onChange={trackOpen}>
-            <Menu.Target>
-              <ActionIcon variant="subtle" color="gray" size="sm">
-                <IconDots size={14} />
-              </ActionIcon>
-            </Menu.Target>
-            <Menu.Dropdown>
-              <Menu.Item
-                leftSection={<IconLinkOff size={14} />}
-                onClick={handleUnsync}
-              >
-                {t("Unsync")}
-              </Menu.Item>
-              <Menu.Item
-                color="red"
-                leftSection={<IconTrash size={14} />}
-                onClick={() => deleteNode()}
-              >
-                {t("Delete synced block")}
-              </Menu.Item>
-            </Menu.Dropdown>
-          </Menu>
-        </div>
-      )}
-
-      <NodeViewContent />
-    </NodeViewWrapper>
-  );
-}

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

@@ -1,209 +0,0 @@
-.placeholder {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
-  border-radius: var(--mantine-radius-md);
-  background: light-dark(
-    var(--mantine-color-gray-0),
-    var(--mantine-color-dark-6)
-  );
-  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
-  font-size: var(--mantine-font-size-sm);
-  user-select: none;
-}
-
-.placeholderIcon {
-  flex: none;
-  color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
-}
-
-.transclusionBadge {
-  display: inline-block;
-  padding: 2px 8px;
-  font-size: var(--mantine-font-size-xs);
-  font-weight: 600;
-  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-radius: var(--mantine-radius-sm);
-  margin-bottom: 4px;
-}
-
-.transclusionWrap {
-  position: relative;
-  margin-left: -3rem;
-  margin-right: -3rem;
-  width: calc(100% + 6rem);
-  padding: 0.5em 3rem;
-  border-radius: 8px;
-  border: 2px solid transparent;
-  transition: border 0.3s;
-}
-
-.transclusionWrap:hover,
-.transclusionWrap:focus-within {
-  border: 2px solid
-    light-dark(
-      var(--mantine-color-orange-2),
-      color-mix(in srgb, var(--mantine-color-orange-9), transparent 55%)
-    );
-}
-
-.transclusionControls {
-  position: absolute;
-  bottom: calc(100% + 8px);
-  right: 4px;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  background: var(--mantine-color-body);
-  border: 1px solid var(--mantine-color-default-border);
-  border-radius: 6px;
-  padding: 4px 6px;
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 0.15s ease;
-  z-index: 2;
-}
-
-/* Hover bridge: keeps :hover on the wrap while the cursor crosses the
-   8px gap between wrap and floating chrome, so the menu doesn't fade out
-   on the way to it. */
-.transclusionControls::after {
-  content: "";
-  position: absolute;
-  top: 100%;
-  left: 0;
-  right: 0;
-  height: 8px;
-}
-
-.transclusionWrap:hover .transclusionControls,
-.transclusionWrap:focus-within .transclusionControls,
-.transclusionWrap[data-menu-open="true"] .transclusionControls {
-  opacity: 1;
-  pointer-events: auto;
-}
-
-.controlsDivider {
-  display: inline-block;
-  width: 1px;
-  height: 16px;
-  background: var(--mantine-color-default-border);
-}
-
-.transclusionControls a[href],
-.includeControls a[href] {
-  color: var(--ai-color);
-  border-bottom: none;
-  font-weight: inherit;
-}
-
-.includeWrap {
-  position: relative;
-  margin-left: -3rem;
-  margin-right: -3rem;
-  width: calc(100% + 6rem);
-  padding: 0.5em 0;
-  border-radius: 8px;
-  border: 2px solid transparent;
-  transition: border 0.3s;
-}
-
-.includeWrap:hover,
-.includeWrap[data-focused="true"],
-.includeWrap[data-menu-open="true"] {
-  border: 2px solid
-    light-dark(
-      var(--mantine-color-orange-2),
-      color-mix(in srgb, var(--mantine-color-orange-9), transparent 55%)
-    );
-}
-
-.includeControls {
-  position: absolute;
-  bottom: calc(100% + 8px);
-  right: 4px;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  background: var(--mantine-color-body);
-  border: 1px solid var(--mantine-color-default-border);
-  border-radius: 6px;
-  padding: 4px 6px;
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 0.15s ease;
-  z-index: 2;
-}
-
-/* Hover bridge: keeps :hover on the wrap while the cursor crosses the
-   8px gap between wrap and floating chrome, so the menu doesn't fade out
-   on the way to it. */
-.includeControls::after {
-  content: "";
-  position: absolute;
-  top: 100%;
-  left: 0;
-  right: 0;
-  height: 8px;
-}
-
-.includeWrap:hover .includeControls,
-.includeWrap:focus-within .includeControls,
-.includeWrap[data-focused="true"] .includeControls,
-.includeWrap[data-menu-open="true"] .includeControls {
-  opacity: 1;
-  pointer-events: auto;
-}
-
-:global(.react-renderer.node-transclusionSource.ProseMirror-selectednode),
-:global(.react-renderer.node-transclusionReference.ProseMirror-selectednode) {
-  outline: none;
-}
-
-@media (max-width: 48em) {
-  .transclusionWrap,
-  .includeWrap {
-    margin-left: -1rem;
-    margin-right: -1rem;
-    width: calc(100% + 2rem);
-  }
-
-  .transclusionWrap {
-    padding-left: 1rem;
-    padding-right: 1rem;
-  }
-}
-
-@media print {
-  .transclusionControls,
-  .includeControls {
-    display: none !important;
-  }
-  .transclusionWrap,
-  .includeWrap {
-    border: none !important;
-    margin-left: 0 !important;
-    margin-right: 0 !important;
-    width: 100% !important;
-    padding: 0 !important;
-  }
-}
-
-.editingOriginalTag {
-  display: inline-block;
-  padding: 0 6px;
-  font-size: var(--mantine-font-size-xs);
-  font-weight: 500;
-  color: var(--mantine-color-blue-7);
-  background: light-dark(
-    var(--mantine-color-blue-0),
-    var(--mantine-color-blue-9)
-  );
-  border-radius: var(--mantine-radius-sm);
-}