fix

cleanup
fix: close table handle menu when drag starts
2026-05-14 20:54:07 +08:00 · 2026-05-14 00:36:30 +01:00 · 2026-05-14 00:31:26 +01:00 · 2026-05-14 00:25:00 +01:00 · 2026-05-13 23:11:36 +01:00 · 2026-05-13 23:01:04 +01:00
349 changed files with 20287 additions and 5327 deletions
@@ -1,85 +1,95 @@
 {
  "name": "client",
  "private": true,
-  "version": "0.80.0",
+  "version": "0.80.1",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint .",
    "preview": "vite preview",
-    "format": "prettier --write \"src/**/*.tsx\" \"src/**/*.ts\""
+    "format": "prettier --write \"src/**/*.tsx\" \"src/**/*.ts\"",
+    "test": "vitest run",
+    "test:watch": "vitest"
  },
  "dependencies": {
-    "@casl/react": "^5.0.1",
+    "@atlaskit/pragmatic-drag-and-drop": "1.8.1",
+    "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "2.1.5",
+    "@atlaskit/pragmatic-drag-and-drop-flourish": "2.0.15",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.1.0",
+    "@atlaskit/pragmatic-drag-and-drop-live-region": "1.3.4",
+    "@casl/react": "5.0.1",
    "@docmost/editor-ext": "workspace:*",
-    "@emoji-mart/data": "^1.2.1",
-    "@emoji-mart/react": "^1.1.1",
    "@excalidraw/excalidraw": "0.18.0-3a5ef40",
-    "@mantine/core": "^8.3.18",
-    "@mantine/dates": "^8.3.18",
-    "@mantine/form": "^8.3.18",
-    "@mantine/hooks": "^8.3.18",
-    "@mantine/modals": "^8.3.18",
-    "@mantine/notifications": "^8.3.18",
-    "@mantine/spotlight": "^8.3.18",
-    "@tabler/icons-react": "^3.40.0",
+    "@mantine/core": "8.3.18",
+    "@mantine/dates": "8.3.18",
+    "@mantine/form": "8.3.18",
+    "@mantine/hooks": "8.3.18",
+    "@mantine/modals": "8.3.18",
+    "@mantine/notifications": "8.3.18",
+    "@mantine/spotlight": "8.3.18",
+    "@slidoapp/emoji-mart": "5.8.7",
+    "@slidoapp/emoji-mart-data": "1.2.4",
+    "@slidoapp/emoji-mart-react": "1.1.5",
+    "@tabler/icons-react": "3.40.0",
    "@tanstack/react-query": "5.90.17",
-    "alfaaz": "^1.1.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-http-backend": "^3.0.2",
-    "jotai": "^2.18.1",
-    "jotai-optics": "^0.4.0",
-    "js-cookie": "^3.0.5",
-    "jwt-decode": "^4.0.0",
+    "@tanstack/react-virtual": "3.13.24",
+    "alfaaz": "1.1.0",
+    "axios": "1.16.0",
+    "blueimp-load-image": "5.16.0",
+    "clsx": "2.1.1",
+    "file-saver": "2.0.5",
+    "highlightjs-sap-abap": "0.3.0",
+    "i18next": "25.10.1",
+    "i18next-http-backend": "3.0.6",
+    "jotai": "2.18.1",
+    "jotai-optics": "0.4.0",
+    "js-cookie": "3.0.5",
+    "jwt-decode": "4.0.0",
    "katex": "0.16.40",
-    "lowlight": "^3.3.0",
-    "mantine-form-zod-resolver": "^1.3.0",
-    "mermaid": "^11.13.0",
-    "mitt": "^3.0.1",
-    "posthog-js": "1.363.1",
-    "react": "^18.3.1",
-    "react-arborist": "3.4.0",
+    "lowlight": "3.3.0",
+    "mantine-form-zod-resolver": "1.3.0",
+    "mermaid": "11.15.0",
+    "mitt": "3.0.1",
+    "posthog-js": "1.372.2",
+    "react": "18.3.1",
    "react-clear-modal": "^2.0.18",
    "react-dom": "^18.3.1",
-    "react-drawio": "^1.0.7",
-    "react-error-boundary": "^6.1.1",
-    "react-helmet-async": "^3.0.0",
-    "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"
+    "react-drawio": "1.0.7",
+    "react-error-boundary": "6.1.1",
+    "react-helmet-async": "3.0.0",
+    "react-i18next": "16.5.8",
+    "react-router-dom": "7.13.1",
+    "semver": "7.7.4",
+    "socket.io-client": "4.8.3",
+    "zod": "4.3.6"
  },
  "devDependencies": {
-    "@eslint/js": "^9.28.0",
-    "@tanstack/eslint-plugin-query": "^5.94.4",
-    "@types/blueimp-load-image": "^5.16.6",
-    "@types/file-saver": "^2.0.7",
-    "@types/js-cookie": "^3.0.6",
-    "@types/katex": "^0.16.8",
+    "@eslint/js": "9.28.0",
+    "@tanstack/eslint-plugin-query": "5.94.4",
+    "@testing-library/jest-dom": "6.6.0",
+    "@testing-library/react": "16.1.0",
+    "@types/blueimp-load-image": "5.16.6",
+    "@types/file-saver": "2.0.7",
+    "@types/js-cookie": "3.0.6",
+    "@types/katex": "0.16.8",
    "@types/node": "22.19.1",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "@vitejs/plugin-react": "^6.0.1",
-    "eslint": "^9.28.0",
-    "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "^0.5.2",
-    "globals": "^15.13.0",
-    "optics-ts": "^2.4.1",
-    "postcss": "^8.5.8",
-    "postcss-preset-mantine": "^1.18.0",
-    "postcss-simple-vars": "^7.0.1",
-    "prettier": "^3.8.1",
-    "typescript": "^5.9.3",
-    "typescript-eslint": "^8.57.1",
-    "vite": "8.0.5"
+    "@types/react": "18.3.12",
+    "@types/react-dom": "18.3.1",
+    "@vitejs/plugin-react": "6.0.1",
+    "eslint": "9.28.0",
+    "eslint-plugin-react": "7.37.5",
+    "eslint-plugin-react-hooks": "7.0.1",
+    "eslint-plugin-react-refresh": "0.5.2",
+    "globals": "15.13.0",
+    "jsdom": "25.0.0",
+    "optics-ts": "2.4.1",
+    "postcss": "8.5.14",
+    "postcss-preset-mantine": "1.18.0",
+    "postcss-simple-vars": "7.0.1",
+    "prettier": "3.8.1",
+    "typescript": "5.9.3",
+    "typescript-eslint": "8.57.1",
+    "vite": "8.0.5",
+    "vitest": "4.1.6"
  }
 }
@@ -608,21 +608,25 @@
  "Image exceeds 10MB limit.": "Bild überschreitet das Limit von 10 MB.",
  "Image removed successfully": "Bild erfolgreich entfernt",
  "API key": "API-Schlüssel",
+  "API key created successfully": "API-Schlüssel erfolgreich erstellt",
  "API keys": "API-Schlüssel",
  "API management": "API-Verwaltung",
+  "Are you sure you want to revoke this API key": "Sind Sie sicher, dass Sie diesen API-Schlüssel widerrufen möchten?",
+  "Create API Key": "API-Schlüssel erstellen",
  "Custom expiration date": "Benutzerdefiniertes Ablaufdatum",
  "Enter a descriptive token name": "Geben Sie einen beschreibenden Token-Namen ein",
  "Expiration": "Ablauf",
  "Expired": "Abgelaufen",
  "Expires": "Läuft ab",
+  "I've saved my API key": "Ich habe meinen API-Schlüssel gespeichert",
  "Last use": "Zuletzt verwendet",
  "No API keys found": "Keine API-Schlüssel gefunden",
  "No expiration": "Kein Ablauf",
+  "Revoke API key": "API-Schlüssel widerrufen",
  "Revoked successfully": "Erfolgreich widerrufen",
  "Select expiration date": "Ablaufdatum wählen",
  "This action cannot be undone. Any applications using this API key will stop working.": "Diese Aktion kann nicht rückgängig gemacht werden. Alle Anwendungen, die diesen API-Schlüssel verwenden, werden nicht mehr funktionieren.",
-  "Update": "Update",
-  "Update {{credential}}": "Update {{credential}}",
+  "Update API key": "API-Schlüssel aktualisieren",
  "Manage API keys for all users in the workspace": "Verwalten Sie API-Schlüssel für alle Benutzer im Arbeitsbereich",
  "Restrict API key creation to admins": "API-Schlüsselerstellung auf Administratoren beschränken",
  "Only admins and owners can create new API keys. Existing member keys will continue to work.": "Nur Administratoren und Eigentümer können neue API-Schlüssel erstellen. Bestehende Mitgliederschlüssel funktionieren weiterhin.",
@@ -876,29 +880,5 @@
  "Try a different search term.": "Versuchen Sie einen anderen Suchbegriff.",
  "Try again": "Erneut versuchen",
  "Untitled chat": "Chat ohne Titel",
-  "What can I help you with?": "Womit kann ich Ihnen helfen?",
-  "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"
+  "What can I help you with?": "Womit kann ich Ihnen helfen?"
 }
@@ -286,6 +286,19 @@
  "Add row above": "Add row above",
  "Add row below": "Add row below",
  "Delete table": "Delete table",
+  "Add column left": "Add column left",
+  "Add column right": "Add column right",
+  "Clear cell": "Clear cell",
+  "Clear cells": "Clear cells",
+  "Toggle header cell": "Toggle header cell",
+  "Toggle header column": "Toggle header column",
+  "Toggle header row": "Toggle header row",
+  "Move column left": "Move column left",
+  "Move column right": "Move column right",
+  "Move row down": "Move row down",
+  "Move row up": "Move row up",
+  "Sort A → Z": "Sort A → Z",
+  "Sort Z → A": "Sort Z → A",
  "Info": "Info",
  "Note": "Note",
  "Success": "Success",
@@ -416,6 +429,7 @@
  "{{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",
@@ -869,6 +883,12 @@
  "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",
@@ -900,5 +920,98 @@
  "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"
+  "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}}",
+  "Labels": "Labels",
+  "Add label": "Add label",
+  "No labels yet": "No labels yet",
+  "Already added": "Already added",
+  "Invalid label name": "Invalid label name",
+  "No matches": "No matches",
+  "Search or create…": "Search or create…",
+  "Remove label {{name}}": "Remove label {{name}}",
+  "Failed to add label": "Failed to add label",
+  "Failed to remove label": "Failed to remove label",
+  "No pages with this label": "No pages with this label",
+  "Pages tagged with this label will appear here.": "Pages tagged with this label will appear here.",
+  "No pages match your search.": "No pages match your search.",
+  "Updated {{date}}": "Updated {{date}}",
+  "Cell actions": "Cell actions",
+  "Column actions": "Column actions",
+  "Row actions": "Row actions"
 }
@@ -608,21 +608,25 @@
  "Image exceeds 10MB limit.": "La imagen excede del límite de 10 MB",
  "Image removed successfully": "Imagen eliminada correctamente",
  "API key": "Clave API",
+  "API key created successfully": "Clave API creada correctamente",
  "API keys": "Claves API",
  "API management": "Gestión de API",
+  "Are you sure you want to revoke this API key": "¿Está seguro de que desea revocar esta clave API? ",
+  "Create API Key": "Crear clave API",
  "Custom expiration date": "Fecha de vencimiento personalizada",
  "Enter a descriptive token name": "Introduce un nombre descriptivo del token",
  "Expiration": "Vencimiento",
  "Expired": "Vencido",
  "Expires": "Vence",
+  "I've saved my API key": "He guardado mi clave API",
  "Last use": "Último uso",
  "No API keys found": "No se han encontrado claves API",
  "No expiration": "Sin vencimiento",
+  "Revoke API key": "Revocar clave API",
  "Revoked successfully": "Revocada correctamente",
  "Select expiration date": "Seleccionar fecha de vencimiento",
  "This action cannot be undone. Any applications using this API key will stop working.": "Esta acción no se puede deshacer. Las aplicaciones que utilicen esta clave API dejarán de funcionar.",
-  "Update": "Update",
-  "Update {{credential}}": "Update {{credential}}",
+  "Update API key": "Actualizar clave API",
  "Manage API keys for all users in the workspace": "Gestionar claves API para todos los usuarios en el espacio de trabajo",
  "Restrict API key creation to admins": "Restringir la creación de claves API a administradores",
  "Only admins and owners can create new API keys. Existing member keys will continue to work.": "Solo los administradores y propietarios pueden crear nuevas claves API. Las claves de miembros existentes seguirán funcionando.",
@@ -876,29 +880,5 @@
  "Try a different search term.": "Prueba con otro término de búsqueda.",
  "Try again": "Intentar de nuevo",
  "Untitled chat": "Chat sin título",
-  "What can I help you with?": "¿En qué puedo ayudarte?",
-  "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"
+  "What can I help you with?": "¿En qué puedo ayudarte?"
 }
@@ -608,21 +608,25 @@
  "Image exceeds 10MB limit.": "L'image dépasse la limite de 10 Mo.",
  "Image removed successfully": "Image supprimée avec succès",
  "API key": "Clé API",
+  "API key created successfully": "Clé API créée avec succès",
  "API keys": "Clés API",
  "API management": "Gestion des API",
+  "Are you sure you want to revoke this API key": "Êtes-vous sûr de vouloir révoquer cette clé API",
+  "Create API Key": "Créer une clé API",
  "Custom expiration date": "Date d'expiration personnalisée",
  "Enter a descriptive token name": "Entrez un nom descriptif pour le jeton",
  "Expiration": "Expiration",
  "Expired": "Expiré(e)",
  "Expires": "Expire",
+  "I've saved my API key": "J'ai enregistré ma clé API",
  "Last use": "Dernière utilisation",
  "No API keys found": "Aucune clé API trouvée",
  "No expiration": "Pas d'expiration",
+  "Revoke API key": "Révoquer la clé API",
  "Revoked successfully": "Révoqué(e) avec succès",
  "Select expiration date": "Sélectionnez la date d'expiration",
  "This action cannot be undone. Any applications using this API key will stop working.": "Cette action ne peut pas être annulée. Toutes les applications utilisant cette clé API cesseront de fonctionner.",
-  "Update": "Update",
-  "Update {{credential}}": "Update {{credential}}",
+  "Update API key": "Mettre à jour la clé API",
  "Manage API keys for all users in the workspace": "Gérer les clés API pour tous les utilisateurs dans l'espace de travail",
  "Restrict API key creation to admins": "Restreindre la création de clés API aux administrateurs",
  "Only admins and owners can create new API keys. Existing member keys will continue to work.": "Seuls les administrateurs et les propriétaires peuvent créer de nouvelles clés API. Les clés des membres existants continueront de fonctionner.",
@@ -876,29 +880,5 @@
  "Try a different search term.": "Essayez un autre terme de recherche.",
  "Try again": "Réessayer",
  "Untitled chat": "Discussion sans titre",
-  "What can I help you with?": "Que puis-je faire pour vous aider ?",
-  "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"
+  "What can I help you with?": "Que puis-je faire pour vous aider ?"
 }
@@ -608,21 +608,25 @@
  "Image exceeds 10MB limit.": "L'immagine supera il limite di 10MB.",
  "Image removed successfully": "Immagine rimossa con successo",
  "API key": "Chiave API",
+  "API key created successfully": "Chiave API creata con successo",
  "API keys": "Chiavi API",
  "API management": "Gestione API",
+  "Are you sure you want to revoke this API key": "Sei sicuro di voler revocare questa chiave API",
+  "Create API Key": "Crea Chiave API",
  "Custom expiration date": "Data di scadenza personalizzata",
  "Enter a descriptive token name": "Inserisci un nome descrittivo del token",
  "Expiration": "Scadenza",
  "Expired": "Scaduto",
  "Expires": "Scade",
+  "I've saved my API key": "Ho salvato la mia chiave API",
  "Last use": "Ultimo utilizzo",
  "No API keys found": "Nessuna chiave API trovata",
  "No expiration": "Nessuna scadenza",
+  "Revoke API key": "Revoca chiave API",
  "Revoked successfully": "Revocata con successo",
  "Select expiration date": "Seleziona la data di scadenza",
  "This action cannot be undone. Any applications using this API key will stop working.": "Questa azione non può essere annullata. Qualsiasi applicazione che utilizza questa chiave API smetterà di funzionare.",
-  "Update": "Update",
-  "Update {{credential}}": "Update {{credential}}",
+  "Update API key": "Aggiorna chiave API",
  "Manage API keys for all users in the workspace": "Gestisci le chiavi API per tutti gli utenti nell'area di lavoro",
  "Restrict API key creation to admins": "Limita la creazione delle chiavi API agli amministratori",
  "Only admins and owners can create new API keys. Existing member keys will continue to work.": "Solo gli amministratori e i proprietari possono creare nuove chiavi API. Le chiavi dei membri esistenti continueranno a funzionare.",
@@ -876,29 +880,5 @@
  "Try a different search term.": "Prova un termine di ricerca diverso.",
  "Try again": "Riprova",
  "Untitled chat": "Chat senza titolo",
-  "What can I help you with?": "Con cosa posso aiutarti?",
-  "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"
+  "What can I help you with?": "Con cosa posso aiutarti?"
 }
@@ -608,21 +608,25 @@
  "Image exceeds 10MB limit.": "画像が10MBの制限を超えています",
  "Image removed successfully": "画像を削除しました",
  "API key": "APIキー",
+  "API key created successfully": "APIキーを作成しました",
  "API keys": "APIキー",
  "API management": "API管理",
+  "Are you sure you want to revoke this API key": "このAPIキーを無効にしてもよろしいですか",
+  "Create API Key": "APIキーを作成",
  "Custom expiration date": "カスタム有効期限",
  "Enter a descriptive token name": "説明的なトークン名を入力してください",
  "Expiration": "有効期限",
  "Expired": "期限切れ",
  "Expires": "期限が切れます",
+  "I've saved my API key": "APIキーを保存しました",
  "Last use": "最終使用",
  "No API keys found": "APIキーが見つかりません",
  "No expiration": "期限なし",
+  "Revoke API key": "APIキーを無効にする",
  "Revoked successfully": "無効にしました",
  "Select expiration date": "有効期限を選択してください",
  "This action cannot be undone. Any applications using this API key will stop working.": "この操作は取り消せません。このAPIキーを使用しているアプリケーションは動作しなくなります",
-  "Update": "Update",
-  "Update {{credential}}": "Update {{credential}}",
+  "Update API key": "APIキーを更新",
  "Manage API keys for all users in the workspace": "ワークスペース内のすべてのユーザーのAPIキーを管理",
  "Restrict API key creation to admins": "APIキーの作成を管理者のみに制限する",
  "Only admins and owners can create new API keys. Existing member keys will continue to work.": "新しいAPIキーを作成できるのは管理者とオーナーのみです。既存のメンバーキーは引き続き有効です。",
@@ -876,29 +880,5 @@
  "Try a different search term.": "別の検索語を試してください。",
  "Try again": "再試行",
  "Untitled chat": "無題のチャット",
-  "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"
+  "What can I help you with?": "何をお手伝いしましょうか？"
 }
@@ -608,21 +608,25 @@
  "Image exceeds 10MB limit.": "이미지가 10MB 용량 제한을 초과합니다.",
  "Image removed successfully": "이미지가 성공적으로 제거되었습니다",
  "API key": "API 키",
+  "API key created successfully": "API 키 생성 완료",
  "API keys": "API 키",
  "API management": "API 관리",
+  "Are you sure you want to revoke this API key": "이 API 키를 취소하시겠습니까?",
+  "Create API Key": "API 키 생성",
  "Custom expiration date": "사용자 정의 만료일",
  "Enter a descriptive token name": "토큰 이름을 입력하세요",
  "Expiration": "만료",
  "Expired": "만료됨",
  "Expires": "만료일",
+  "I've saved my API key": "API 키를 저장했습니다",
  "Last use": "최근 사용",
  "No API keys found": "API 키를 찾을 수 없습니다",
  "No expiration": "유효기간 없음",
+  "Revoke API key": "API 키 취소",
  "Revoked successfully": "성공적으로 취소되었습니다",
  "Select expiration date": "만료일 선택",
  "This action cannot be undone. Any applications using this API key will stop working.": "이 작업은 되돌릴 수 없습니다. 이 API 키를 사용하는 모든 응용 프로그램이 작동을 멈출 것입니다.",
-  "Update": "Update",
-  "Update {{credential}}": "Update {{credential}}",
+  "Update API key": "API 키 갱신",
  "Manage API keys for all users in the workspace": "워크스페이스 내 모든 사용자의 API 키 관리",
  "Restrict API key creation to admins": "API 키 생성 권한을 관리자에게만 제한합니다",
  "Only admins and owners can create new API keys. Existing member keys will continue to work.": "새로운 API 키는 관리자와 소유자만 생성할 수 있습니다. 기존 멤버 키는 계속 사용할 수 있습니다.",
@@ -876,29 +880,5 @@
  "Try a different search term.": "다른 검색어를 사용해 보세요.",
  "Try again": "다시 시도",
  "Untitled chat": "제목 없는 채팅",
-  "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"
+  "What can I help you with?": "무엇을 도와드릴까요?"
 }
@@ -608,21 +608,25 @@
  "Image exceeds 10MB limit.": "Afbeelding overschrijdt de limiet van 10MB.",
  "Image removed successfully": "Afbeelding succesvol verwijderd",
  "API key": "API-sleutel",
+  "API key created successfully": "API-sleutel succesvol aangemaakt",
  "API keys": "API-sleutels",
  "API management": "API-beheer",
+  "Are you sure you want to revoke this API key": "Weet u zeker dat u deze API-sleutel wilt intrekken",
+  "Create API Key": "API-sleutel aanmaken",
  "Custom expiration date": "Aangepaste vervaldatum",
  "Enter a descriptive token name": "Voer een beschrijvende tokennaam in",
  "Expiration": "Vervaldatum",
  "Expired": "Verlopen",
  "Expires": "Verloopt",
+  "I've saved my API key": "Ik heb mijn API-sleutel opgeslagen",
  "Last use": "Laatst gebruikt",
  "No API keys found": "Geen API-sleutels gevonden",
  "No expiration": "Geen vervaldatum",
+  "Revoke API key": "API-sleutel intrekken",
  "Revoked successfully": "Succesvol ingetrokken",
  "Select expiration date": "Selecteer vervaldatum",
  "This action cannot be undone. Any applications using this API key will stop working.": "Deze actie kan niet ongedaan worden gemaakt. Alle toepassingen die deze API-sleutel gebruiken, zullen niet meer werken.",
-  "Update": "Update",
-  "Update {{credential}}": "Update {{credential}}",
+  "Update API key": "API-sleutel bijwerken",
  "Manage API keys for all users in the workspace": "Beheer API-sleutels voor alle gebruikers in de werkruimte",
  "Restrict API key creation to admins": "Beperk het aanmaken van API-sleutels tot beheerders.",
  "Only admins and owners can create new API keys. Existing member keys will continue to work.": "Alleen beheerders en eigenaren kunnen nieuwe API-sleutels aanmaken. Bestaande leden-sleutels blijven werken.",
@@ -876,29 +880,5 @@
  "Try a different search term.": "Probeer een andere zoekterm.",
  "Try again": "Probeer opnieuw",
  "Untitled chat": "Chat zonder titel",
-  "What can I help you with?": "Waar kan ik je mee helpen?",
-  "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"
+  "What can I help you with?": "Waar kan ik je mee helpen?"
 }
@@ -608,21 +608,25 @@
  "Image exceeds 10MB limit.": "A imagem excede o limite de 10MB.",
  "Image removed successfully": "Imagem removida com sucesso",
  "API key": "Chave API",
+  "API key created successfully": "Chave API criada com sucesso",
  "API keys": "Chaves API",
  "API management": "Gestão de API",
+  "Are you sure you want to revoke this API key": "Tem certeza de que deseja revogar esta chave API",
+  "Create API Key": "Criar Chave API",
  "Custom expiration date": "Data de expiração personalizada",
  "Enter a descriptive token name": "Insira um nome descritivo para o token",
  "Expiration": "Expiração",
  "Expired": "Expirado",
  "Expires": "Expira",
+  "I've saved my API key": "Salvei minha chave API",
  "Last use": "Último uso",
  "No API keys found": "Nenhuma chave API encontrada",
  "No expiration": "Sem expiração",
+  "Revoke API key": "Revogar chave API",
  "Revoked successfully": "Revogada com sucesso",
  "Select expiration date": "Selecionar data de expiração",
  "This action cannot be undone. Any applications using this API key will stop working.": "Esta ação não pode ser desfeita. Qualquer aplicação usando esta chave API deixará de funcionar.",
-  "Update": "Update",
-  "Update {{credential}}": "Update {{credential}}",
+  "Update API key": "Atualizar chave API",
  "Manage API keys for all users in the workspace": "Gerenciar chaves API para todos os usuários no espaço de trabalho",
  "Restrict API key creation to admins": "Restringir a criação de chave de API aos administradores",
  "Only admins and owners can create new API keys. Existing member keys will continue to work.": "Somente administradores e proprietários podem criar novas chaves de API. As chaves de membros já existentes continuarão funcionando.",
@@ -876,29 +880,5 @@
  "Try a different search term.": "Tente um termo de pesquisa diferente.",
  "Try again": "Tentar novamente",
  "Untitled chat": "Chat sem título",
-  "What can I help you with?": "Com o que posso ajudar você?",
-  "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"
+  "What can I help you with?": "Com o que posso ajudar você?"
 }
@@ -608,21 +608,25 @@
  "Image exceeds 10MB limit.": "Изображение превышает предел 10MB.",
  "Image removed successfully": "Изображение успешно удалено",
  "API key": "API ключ",
+  "API key created successfully": "API ключ успешно создан",
  "API keys": "API ключи",
  "API management": "Управление API",
+  "Are you sure you want to revoke this API key": "Вы уверены, что хотите отозвать этот API ключ",
+  "Create API Key": "Создать API ключ",
  "Custom expiration date": "Пользовательская дата срока действия",
  "Enter a descriptive token name": "Введите понятное имя токена",
  "Expiration": "Срок действия",
  "Expired": "Истек",
  "Expires": "Истекает",
+  "I've saved my API key": "Я сохранил мой API ключ",
  "Last use": "Последнее использование",
  "No API keys found": "API ключи не найдены",
  "No expiration": "Не истекает",
+  "Revoke API key": "Отозвать API ключ",
  "Revoked successfully": "Отозван успешно",
  "Select expiration date": "Выберете срок действия",
  "This action cannot be undone. Any applications using this API key will stop working.": "Это действие необратимо. Любые приложения, использующие этот API ключ, перестанут работать.",
-  "Update": "Update",
-  "Update {{credential}}": "Update {{credential}}",
+  "Update API key": "Обновить API ключ",
  "Manage API keys for all users in the workspace": "Управлять API ключами для всех пользователей в рабочей области",
  "Restrict API key creation to admins": "Ограничить создание API-ключей только администраторами.",
  "Only admins and owners can create new API keys. Existing member keys will continue to work.": "Только администраторы и владельцы могут создавать новые API-ключи. Существующие ключи участников продолжат работать.",
@@ -876,29 +880,5 @@
  "Try a different search term.": "Попробуйте другой поисковый запрос.",
  "Try again": "Попробовать снова",
  "Untitled chat": "Чат без названия",
-  "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"
+  "What can I help you with?": "Чем я могу вам помочь?"
 }
@@ -608,21 +608,25 @@
  "Image exceeds 10MB limit.": "Зображення має займати менше, ніж 10 МБ.",
  "Image removed successfully": "Зображення видалено",
  "API key": "Ключ API",
+  "API key created successfully": "Ключ API успішно створено",
  "API keys": "Ключі API",
  "API management": "Управління API",
+  "Are you sure you want to revoke this API key": "Ви впевнені, що хочете відкликати цей ключ API",
+  "Create API Key": "Створити ключ API",
  "Custom expiration date": "Користувацька дата закінчення",
  "Enter a descriptive token name": "Введіть описову назву токена",
  "Expiration": "Термін дії",
  "Expired": "Закінчився",
  "Expires": "Закінчується",
+  "I've saved my API key": "Я зберіг свій ключ API",
  "Last use": "Останнє використання",
  "No API keys found": "Ключі API не знайдено",
  "No expiration": "Без терміну дії",
+  "Revoke API key": "Відкликати ключ API",
  "Revoked successfully": "Успішно відкликано",
  "Select expiration date": "Виберіть дату закінчення",
  "This action cannot be undone. Any applications using this API key will stop working.": "Цю дію не можна скасувати. Будь-які додатки, що використовують цей ключ API, перестануть працювати.",
-  "Update": "Update",
-  "Update {{credential}}": "Update {{credential}}",
+  "Update API key": "Оновити ключ API",
  "Manage API keys for all users in the workspace": "Керувати ключами API для всіх користувачів у робочій області",
  "Restrict API key creation to admins": "Обмежити створення API-ключів лише для адміністраторів",
  "Only admins and owners can create new API keys. Existing member keys will continue to work.": "Тільки адміністратори та власники можуть створювати нові API-ключі. Існуючі ключі учасників і надалі працюватимуть.",
@@ -876,29 +880,5 @@
  "Try a different search term.": "Спробуйте інший пошуковий запит.",
  "Try again": "Спробувати ще раз",
  "Untitled chat": "Чат без назви",
-  "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"
+  "What can I help you with?": "Чим я можу вам допомогти?"
 }
@@ -608,21 +608,25 @@
  "Image exceeds 10MB limit.": "图片超过10MB限制。",
  "Image removed successfully": "图片删除成功",
  "API key": "API密钥",
+  "API key created successfully": "API密钥创建成功",
  "API keys": "API密钥",
  "API management": "API管理",
+  "Are you sure you want to revoke this API key": "确定要撤销此API密钥吗",
+  "Create API Key": "创建API密钥",
  "Custom expiration date": "自定义到期日期",
  "Enter a descriptive token name": "输入描述性令牌名称",
  "Expiration": "到期",
  "Expired": "已过期",
  "Expires": "到期",
+  "I've saved my API key": "我已保存我的API密钥",
  "Last use": "上次使用",
  "No API keys found": "找不到API密钥",
  "No expiration": "无到期",
+  "Revoke API key": "撤销API密钥",
  "Revoked successfully": "撤销成功",
  "Select expiration date": "选择到期日期",
  "This action cannot be undone. Any applications using this API key will stop working.": "此操作无法撤销。使用此API密钥的任何应用程序将停止工作。",
-  "Update": "Update",
-  "Update {{credential}}": "Update {{credential}}",
+  "Update API key": "更新API密钥",
  "Manage API keys for all users in the workspace": "管理工作空间中所有用户的API密钥",
  "Restrict API key creation to admins": "仅限管理员创建 API 密钥。",
  "Only admins and owners can create new API keys. Existing member keys will continue to work.": "只有管理员和所有者可以创建新的 API 密钥。现有成员密钥将继续有效。",
@@ -876,29 +880,5 @@
  "Try a different search term.": "请尝试其他搜索词。",
  "Try again": "重试",
  "Untitled chat": "未命名聊天",
-  "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"
+  "What can I help you with?": "我能帮您做什么？"
 }
@@ -45,6 +45,7 @@ import TemplateEditor from "@/ee/template/pages/template-editor";
 import FavoritesPage from "@/pages/favorites/favorites-page";
 import AiChat from "@/ee/ai-chat/pages/ai-chat.tsx";
 import VerifyEmail from "@/ee/pages/verify-email.tsx";
+import LabelPage from "@/pages/label/label-page";

 export default function App() {
  const { t } = useTranslation();
@@ -92,6 +93,7 @@ export default function App() {
          <Route path={"/ai/chat/:chatId"} element={<AiChat />} />
          <Route path={"/spaces"} element={<SpacesPage />} />
          <Route path={"/favorites"} element={<FavoritesPage />} />
+          <Route path={"/labels/:labelName"} element={<LabelPage />} />
          <Route path={"/templates"} element={<TemplateList />} />
          <Route
            path={"/templates/:templateId"}
@@ -80,6 +80,12 @@ 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;

@@ -104,6 +110,8 @@ export default function AvatarUploader({
        ref={fileInputRef}
        onChange={handleFileInputChange}
        accept="image/png,image/jpeg,image/jpg"
+        aria-label={ariaLabel}
+        tabIndex={-1}
        style={{ display: "none" }}
      />

@@ -115,6 +123,8 @@ 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,
@@ -25,6 +25,7 @@ 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>
@@ -4,7 +4,7 @@ import {
  UnstyledButton,
  Badge,
  Table,
-  ActionIcon,
+  ThemeIcon,
  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 || (
-                        <ActionIcon variant="transparent" color="gray" size={18}>
+                        <ThemeIcon variant="transparent" color="gray" size={18}>
                          <IconFileDescription size={18} />
-                        </ActionIcon>
+                        </ThemeIcon>
                      )}

                      <Text fw={500} size="md" lineClamp={1}>
@@ -6,12 +6,14 @@ 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) {
@@ -28,6 +30,7 @@ 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)}
@@ -1,11 +1,11 @@
-import { ActionIcon, rem } from "@mantine/core";
+import { ThemeIcon } from "@mantine/core";
 import React from "react";
 import { IconUsersGroup } from "@tabler/icons-react";

 export function IconGroupCircle() {
  return (
-    <ActionIcon variant="light" size="lg" color="gray" radius="xl">
+    <ThemeIcon variant="light" size="lg" color="gray" radius="xl">
      <IconUsersGroup stroke={1.5} />
-    </ActionIcon>
+    </ThemeIcon>
  );
 }
@@ -27,5 +27,3 @@
    background: light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-5))
  }
 }
-
-
@@ -8,6 +8,7 @@ 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);
@@ -30,6 +31,10 @@ export default function Aside() {
      component = <AsideChatPanel />;
      title = "AI Chat";
      break;
+    case "details":
+      component = <PageDetailsAside />;
+      title = "Details";
+      break;
    default:
      component = null;
      title = null;
@@ -1,6 +1,7 @@
 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 {
@@ -23,11 +24,12 @@ 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 }] = useAtom(asideStateAtom);
+  const [{ isAsideOpen, tab: asideTab }] = useAtom(asideStateAtom);
  const [sidebarWidth, setSidebarWidth] = useAtom(sidebarWidthAtom);
  const [isResizing, setIsResizing] = useState(false);
  const sidebarRef = useRef(null);
@@ -105,6 +107,15 @@ 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} />
@@ -114,16 +125,33 @@ export default function GlobalAppShell({
        {isAiRoute && <AiChatSidebar />}
        {showGlobalSidebar && <GlobalSidebar />}
      </AppShell.Navbar>
-      <AppShell.Main>
+      <AppShell.Main id="main-content">
        {isSettingsRoute ? (
-          <Container size={900}>{children}</Container>
+          <Container size={900} pb={80}>
+            {children}
+          </Container>
        ) : (
          children
        )}
      </AppShell.Main>

      {isPageRoute && (
-        <AppShell.Aside className={classes.aside} p="md" withBorder={false}>
+        <AppShell.Aside
+          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>
      )}
@@ -50,7 +50,7 @@
 .sectionHeader {
    padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
    font-size: var(--mantine-font-size-xs);
-    color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-3));
+    color: var(--mantine-color-dimmed);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { ScrollArea, Text, Divider, Modal } from "@mantine/core";
+import { ScrollArea, Text, Divider, Modal, UnstyledButton } from "@mantine/core";
 import {
  IconHome,
  IconClock,
@@ -119,17 +119,13 @@ export default function GlobalSidebar() {
      </ScrollArea>

      <div className={classes.bottomSection}>
-        <a
+        <UnstyledButton
          className={classes.link}
-          onClick={(e) => {
-            e.preventDefault();
-            openInvite();
-          }}
-          href="#"
+          onClick={openInvite}
        >
          <IconUserPlus className={classes.linkIcon} stroke={2} />
          <span>{t("Invite People")}</span>
-        </a>
+        </UnstyledButton>
        <Link
          className={classes.link}
          data-active={active.startsWith("/settings") || undefined}
@@ -10,6 +10,7 @@ export const desktopSidebarAtom = atomWithWebStorage<boolean>(

 export const desktopAsideAtom = atom<boolean>(false);

+// Valid `tab` values: "" | "comments" | "toc" | "chat" | "details"
 type AsideStateType = {
  tab: string;
  isAsideOpen: boolean;
@@ -13,6 +13,7 @@ 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: "" };
@@ -98,3 +99,10 @@ export const prefetchVerifiedPages = () => {
    queryFn: () => getVerificationList(params),
  });
 };
+
+export const prefetchScimTokens = () => {
+  queryClient.prefetchQuery({
+    queryKey: ["scim-token-list", { cursor: undefined }],
+    queryFn: () => getScimTokens({}),
+  });
+};
@@ -31,6 +31,7 @@ import {
  prefetchBilling,
  prefetchGroups,
  prefetchLicense,
+  prefetchScimTokens,
  prefetchShares,
  prefetchSpaces,
  prefetchSsoProviders,
@@ -204,7 +205,10 @@ export default function SettingsSidebar() {
              }
              break;
            case "Security & SSO":
-              prefetchHandler = prefetchSsoProviders;
+              prefetchHandler = () => {
+                prefetchSsoProviders();
+                prefetchScimTokens();
+              };
              break;
            case "Public sharing":
              prefetchHandler = prefetchShares;
@@ -226,32 +230,6 @@ 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 (
@@ -261,12 +239,41 @@ export default function SettingsSidebar() {
                position="right"
                withArrow
              >
-                {linkElement}
+                <span
+                  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 linkElement;
+          return (
+            <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>
    );
@@ -284,7 +291,7 @@ export default function SettingsSidebar() {
          }}
          variant="transparent"
          c="gray"
-          aria-label="Back"
+          aria-label={t("Back")}
        >
          <IconArrowLeft stroke={2} />
        </ActionIcon>
@@ -1,5 +1,5 @@
 import React from "react";
-import { Avatar } from "@mantine/core";
+import { Avatar, MantineColor } from "@mantine/core";
 import { getAvatarUrl } from "@/lib/config.ts";
 import { AvatarIconType } from "@/features/attachments/types/attachment.types.ts";

@@ -16,19 +16,53 @@ 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, ...props }: CustomAvatarProps, ref) => {
+>(({ avatarUrl, name, type, color, ...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={name}
+      name={initialsSource}
      alt={name}
-      color="initials"
+      color={resolvedColor}
      {...props}
    />
  );
@@ -74,7 +74,18 @@ export function PageChildren({
        />
      ))}
      {hasNextPage && (
-        <div className={classes.loadMore} onClick={() => fetchNextPage()}>
+        <div
+          className={classes.loadMore}
+          onClick={() => fetchNextPage()}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              fetchNextPage();
+            }
+          }}
+          role="button"
+          tabIndex={0}
+        >
          {t("Load more")}
        </div>
      )}
@@ -1,4 +1,4 @@
-import React, { ReactNode, useState } from "react";
+import React, { ReactNode, useEffect, useState } from "react";
 import {
  ActionIcon,
  Popover,
@@ -7,9 +7,24 @@ import {
 } from "@mantine/core";
 import { useClickOutside, useDisclosure, useWindowEvent } from "@mantine/hooks";
 import { Suspense } from "react";
-const Picker = React.lazy(() => import("@emoji-mart/react"));
 import { useTranslation } from "react-i18next";

+// Load the picker module AND the emoji data in parallel inside the lazy
+// resolution, then bind the data into the component. React.lazy only finishes
+// suspending once both are in memory, so the Suspense boundary hides the
+// Remove button until the Picker can render with real content.
+const Picker = React.lazy(async () => {
+  const [pickerModule, dataModule] = await Promise.all([
+    import("@slidoapp/emoji-mart-react"),
+    import("@slidoapp/emoji-mart-data"),
+  ]);
+  const PickerComp = pickerModule.default;
+  const data = dataModule.default;
+  return {
+    default: (props: any) => <PickerComp {...props} data={data} />,
+  };
+});
+
 export interface EmojiPickerInterface {
  onEmojiSelect: (emoji: any) => void;
  icon: ReactNode;
@@ -19,6 +34,7 @@ export interface EmojiPickerInterface {
    size?: string;
    variant?: string;
    c?: string;
+    tabIndex?: number;
  };
 }

@@ -50,6 +66,38 @@ function EmojiPicker({
    }
  });

+  // emoji-mart's built-in autoFocus calls .focus() without preventScroll, which
+  // makes the browser scroll every scrollable ancestor of the search input to
+  // bring it on screen — including the page editor's scroll container, so the
+  // page jumps to the top whenever the picker is opened from a scrolled-down
+  // position. The search input lives inside the <em-emoji-picker> custom
+  // element's shadow root, so we poll for it after the dropdown mounts and
+  // focus it ourselves with preventScroll.
+  useEffect(() => {
+    if (!opened || !dropdown) return;
+    let cancelled = false;
+    let rafId = 0;
+    const tryFocus = (attempts: number) => {
+      if (cancelled) return;
+      const pickerEl = dropdown.querySelector("em-emoji-picker");
+      const input = pickerEl?.shadowRoot?.querySelector<HTMLInputElement>(
+        'input[type="search"]',
+      );
+      if (input) {
+        input.focus({ preventScroll: true });
+        return;
+      }
+      if (attempts < 60) {
+        rafId = requestAnimationFrame(() => tryFocus(attempts + 1));
+      }
+    };
+    rafId = requestAnimationFrame(() => tryFocus(0));
+    return () => {
+      cancelled = true;
+      cancelAnimationFrame(rafId);
+    };
+  }, [opened, dropdown]);
+
  const handleEmojiSelect = (emoji) => {
    onEmojiSelect(emoji);
    handlers.close();
@@ -70,11 +118,15 @@ function EmojiPicker({
      closeOnEscape={true}
    >
      <Popover.Target ref={setTarget}>
-        <ActionIcon 
-          c={actionIconProps?.c || "gray"} 
-          variant={actionIconProps?.variant || "transparent"} 
+        <ActionIcon
+          c={actionIconProps?.c || "gray"}
+          variant={actionIconProps?.variant || "transparent"}
          size={actionIconProps?.size}
+          tabIndex={actionIconProps?.tabIndex}
          onClick={handlers.toggle}
+          aria-label={t("Pick emoji")}
+          aria-haspopup="dialog"
+          aria-expanded={opened}
        >
          {icon}
        </ActionIcon>
@@ -82,7 +134,6 @@ function EmojiPicker({
      <Suspense fallback={null}>
        <Popover.Dropdown bg="000" style={{ border: "none" }} ref={setDropdown}>
          <Picker
-            data={async () => (await import("@emoji-mart/data")).default}
            onEmojiSelect={handleEmojiSelect}
            perLine={8}
            skinTonePosition="search"
@@ -132,6 +132,7 @@ export default function AiChatSidebarItem({
              size="xs"
              color="gray"
              onClick={(e) => e.preventDefault()}
+              aria-label={t("Chat menu")}
            >
              <IconDots size={14} />
            </ActionIcon>
@@ -137,7 +137,8 @@ export default function AiChatSidebar() {

      <TextInput
        className={classes.searchInput}
-        placeholder="Search chats..."
+        placeholder={t("Search chats...")}
+        aria-label={t("Search chats")}
        leftSection={<IconSearch size={14} />}
        size="xs"
        value={search}
@@ -178,6 +178,7 @@ export default function AsideChatPanel() {
            href="/ai"
            variant="subtle"
            color="dark"
+            aria-label={t("New chat")}
            onClick={handleNewChat}
          >
            <IconPlus size={20} stroke={1.75} />
@@ -185,13 +186,23 @@ export default function AsideChatPanel() {
        </Tooltip>

        <Tooltip label={t("Open full page")} openDelay={250}>
-          <ActionIcon variant="subtle" color="dark" onClick={handleExpand}>
+          <ActionIcon
+            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 variant="subtle" color="dark" onClick={handleClose}>
+          <ActionIcon
+            variant="subtle"
+            color="dark"
+            aria-label={t("Close")}
+            onClick={handleClose}
+          >
            <IconX size={20} stroke={1.75} />
          </ActionIcon>
        </Tooltip>
@@ -65,7 +65,7 @@ export default function ChatEmptyState({ isStreaming, onSend, onStop }: Props) {
          isStreaming={isStreaming}
          onSend={onSend}
          onStop={onStop}
-          placeholder="Ask anything... Use @ to mention pages"
+          placeholder={t("Ask anything... Use @ to mention pages")}
          autofocus
        />
      </div>
@@ -200,7 +200,7 @@ export default function ChatInput({
        link: false,
      }),
      Placeholder.configure({
-        placeholder: placeholder || "Ask anything... Use @ to mention pages",
+        placeholder: placeholder || t("Ask anything... Use @ to mention pages"),
      }),
      CharacterCount.configure({
        limit: 50000,
@@ -225,6 +225,10 @@ export default function ChatInput({
      }),
    ],
    editorProps: {
+      attributes: {
+        "aria-label": placeholder || t("Ask anything... Use @ to mention pages"),
+        "aria-multiline": "true",
+      },
      handleDOMEvents: {
        keydown: (_view, event) => {
          if (
@@ -275,6 +279,8 @@ 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)}
      />
@@ -31,7 +31,16 @@ 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} />
@@ -98,7 +98,7 @@
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
-  color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
+  color: var(--mantine-color-dimmed);
  margin-bottom: var(--mantine-spacing-xs);
 }

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

 .attachmentChips {
@@ -36,7 +36,7 @@
  padding: 4px var(--mantine-spacing-xs);
  font-size: var(--mantine-font-size-xs);
  font-weight: 600;
-  color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
+  color: var(--mantine-color-dimmed);
  user-select: none;
 }

@@ -104,7 +104,7 @@

 .chatItemDate {
  font-size: var(--mantine-font-size-xs);
-  color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
+  color: var(--mantine-color-dimmed);
  white-space: nowrap;
  transition: opacity 150ms;
 }
@@ -31,7 +31,7 @@ export function ApiKeyCreatedModal({
    <Modal
      opened={opened}
      onClose={onClose}
-      title={t("API key created")}
+      title={t("{{credential}} created", { credential: t("API key") })}
      size="lg"
    >
      <Stack gap="md">
@@ -41,7 +41,8 @@ export function ApiKeyCreatedModal({
          color="red"
        >
          {t(
-            "Make sure to copy your API key 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!",
+            { credential: t("API key") },
          )}
        </Alert>

@@ -64,7 +65,7 @@ export function ApiKeyCreatedModal({
        </div>

        <Button fullWidth onClick={onClose} mt="md">
-          {t("I've saved my API key")}
+          {t("I've saved my {{credential}}", { credential: t("API key") })}
        </Button>
      </Stack>
    </Modal>
@@ -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></Table.Th>
+            <Table.Th aria-label={t("Action")} />
          </Table.Tr>
        </Table.Thead>

@@ -106,7 +106,11 @@ export function ApiKeyTable({
                <Table.Td>
                  <Menu position="bottom-end" withinPortal>
                    <Menu.Target>
-                      <ActionIcon variant="subtle" color="gray">
+                      <ActionIcon
+                        variant="subtle"
+                        color="gray"
+                        aria-label={t("API key menu")}
+                      >
                        <IconDots size={16} />
                      </ActionIcon>
                    </Menu.Target>
@@ -105,7 +105,7 @@ export function CreateApiKeyModal({
    <Modal
      opened={opened}
      onClose={handleClose}
-      title={t("Create API Key")}
+      title={t("Create {{credential}}", { credential: t("API key") })}
      size="md"
    >
      <form onSubmit={form.onSubmit((values) => handleSubmit(values))}>
@@ -30,12 +30,14 @@ export function RevokeApiKeyModal({
    <Modal
      opened={opened}
      onClose={onClose}
-      title={t("Revoke API key")}
+      title={t("Revoke {{credential}}", { credential: t("API key") })}
      size="md"
    >
      <Stack gap="md">
        <Text>
-          {t("Are you sure you want to revoke this API key")}{" "}
+          {t("Are you sure you want to revoke this {{credential}}", {
+            credential: t("API key"),
+          })}{" "}
          <strong>{apiKey?.name}</strong>?
        </Text>
        <Text size="sm" c="dimmed">
@@ -53,7 +53,7 @@ export function UpdateApiKeyModal({
    <Modal
      opened={opened}
      onClose={onClose}
-      title={t("Update API key")}
+      title={t("Update {{credential}}", { credential: t("API key") })}
      size="md"
    >
      <form onSubmit={form.onSubmit((values) => handleSubmit(values))}>
@@ -63,7 +63,11 @@ export function useCreateApiKeyMutation() {
  return useMutation<IApiKey, Error, ICreateApiKeyRequest>({
    mutationFn: (data) => createApiKey(data),
    onSuccess: () => {
-      notifications.show({ message: t("API key created successfully") });
+      notifications.show({
+        message: t("{{credential}} created successfully", {
+          credential: t("API key"),
+        }),
+      });
      queryClient.invalidateQueries({
        predicate: (item) =>
          ["api-key-list"].includes(item.queryKey[0] as string),
@@ -33,6 +33,10 @@ 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",
@@ -174,6 +178,14 @@ 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: [
@@ -8,6 +8,7 @@ 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',
@@ -140,7 +140,7 @@ export function PagePermissionList({
        )}
      </Group>

-      <ScrollArea mah={250} viewportRef={viewportRef}>
+      <ScrollArea.Autosize mah={400} viewportRef={viewportRef}>
        {sortedMembers.map((member) => (
          <PagePermissionItem
            key={`${member.type}-${member.id}`}
@@ -158,7 +158,7 @@ export function PagePermissionList({
            <Loader size="xs" />
          </Center>
        )}
-      </ScrollArea>
+      </ScrollArea.Autosize>
    </>
  );
 }
@@ -1,4 +1,12 @@
-import { ActionIcon, Group, Menu, Modal, Text, Tooltip } from "@mantine/core";
+import {
+  ActionIcon,
+  Group,
+  Menu,
+  Modal,
+  Text,
+  ThemeIcon,
+  Tooltip,
+} from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
 import {
  IconRosetteDiscountCheckFilled,
@@ -38,6 +46,7 @@ export function PageVerificationModal({
    <Modal
      opened={opened}
      onClose={onClose}
+      aria-label={status === "none" ? t("Set up verification") : t("Verify page")}
      title={
        <Group gap="xs">
          <IconShieldCheck
@@ -97,9 +106,9 @@ export function PageVerificationBadge({
        withArrow
        openDelay={250}
      >
-        <ActionIcon variant="subtle" color="gray">
+        <ThemeIcon variant="subtle" color="gray">
          <IconShieldCheck size={20} stroke={1.5} />
-        </ActionIcon>
+        </ThemeIcon>
      </Tooltip>
    );
  }
@@ -109,10 +118,20 @@ 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={getStatusLabel(status, t)} withArrow openDelay={250}>
+        <Tooltip label={tooltipLabel} withArrow openDelay={250}>
          <Group
            gap={4}
            onClick={open}
@@ -130,7 +149,12 @@ export function PageVerificationBadge({
        </Tooltip>
      ) : !readOnly ? (
        <Tooltip label={t("Set up verification")} withArrow openDelay={250}>
-          <ActionIcon variant="subtle" color="gray" onClick={open}>
+          <ActionIcon
+            variant="subtle"
+            color="gray"
+            aria-label={t("Set up verification")}
+            onClick={open}
+          >
            <IconShieldCheck size={20} stroke={1.5} />
          </ActionIcon>
        </Tooltip>
@@ -0,0 +1,78 @@
+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>
+  );
+}
@@ -0,0 +1,55 @@
+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>
+  );
+}
@@ -0,0 +1,61 @@
+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>
+  );
+}
@@ -0,0 +1,69 @@
+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>
+  );
+}
@@ -0,0 +1,130 @@
+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>
+  );
+}
@@ -0,0 +1,30 @@
+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>
+  );
+}
@@ -0,0 +1,77 @@
+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>
+  );
+}
@@ -0,0 +1,2 @@
+export * from "./types/scim-token.types";
+export * from "./services/scim-token-service";
@@ -0,0 +1,96 @@
+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" });
+    },
+  });
+}
@@ -0,0 +1,34 @@
+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);
+}
@@ -0,0 +1,27 @@
+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;
+}
@@ -69,8 +69,8 @@ export default function SsoProviderList() {
  return (
    <>
      <Card shadow="sm" radius="sm">
-        <Table.ScrollContainer minWidth={600}>
-          <Table verticalSpacing="sm">
+        <Table.ScrollContainer minWidth={600} maxHeight={400}>
+          <Table verticalSpacing="sm" stickyHeader>
            <Table.Thead>
              <Table.Tr>
                <Table.Th>{t("Name")}</Table.Th>
@@ -141,6 +141,7 @@ export default function SsoProviderList() {
                        <ActionIcon
                          variant="subtle"
                          color="gray"
+                          aria-label={t("Edit {{name}}", { name: provider.name })}
                          onClick={() => handleEdit(provider)}
                        >
                          <IconPencil size={16} />
@@ -152,7 +153,13 @@ export default function SsoProviderList() {
                          withinPortal
                        >
                          <Menu.Target>
-                            <ActionIcon variant="subtle" color="gray">
+                            <ActionIcon
+                              variant="subtle"
+                              color="gray"
+                              aria-label={t("More actions for {{name}}", {
+                                name: provider.name,
+                              })}
+                            >
                              <IconDots size={16} />
                            </ActionIcon>
                          </Menu.Target>
@@ -1,8 +1,18 @@
 import { Helmet } from "react-helmet-async";
 import { getAppName, isCloud } from "@/lib/config.ts";
 import SettingsTitle from "@/components/settings/settings-title.tsx";
-import { Divider, Title } from "@mantine/core";
-import React from "react";
+import {
+  Alert,
+  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";
@@ -12,16 +22,41 @@ 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 hasRetention = useHasFeature(Feature.RETENTION);
-  const hasSharingControls = useHasFeature(Feature.SHARING_CONTROLS);
+  const hasScim = useHasFeature(Feature.SCIM);
+  const [workspace] = useAtom(workspaceAtom);
+  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;
@@ -45,7 +80,7 @@ export default function Security() {
      <Divider my="lg" />

      <Title order={4} my="lg">
-        Single sign-on (SSO)
+        {t("Single sign-on (SSO)")}
      </Title>

      <EnforceSso />
@@ -66,6 +101,102 @@ 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}
+              />
+            </>
+          )}
+        </>
+      )}
    </>
  );
 }
@@ -56,6 +56,7 @@ export default function TemplateCard({
                    color="gray"
                    className={classes.menuTarget}
                    onClick={(e) => e.stopPropagation()}
+                    aria-label={t("Template menu")}
                  >
                    <IconDots size={16} />
                  </ActionIcon>
@@ -24,7 +24,7 @@ export default function TemplatePreviewModal({
  const title = template?.title || t("Untitled");

  return (
-    <Modal.Root size={1200} opened={opened} onClose={onClose}>
+    <Modal.Root size={1200} opened={opened} onClose={onClose} aria-label={title}>
      <Modal.Overlay />
      <Modal.Content style={{ overflow: "hidden" }}>
        <Modal.Header>
@@ -144,6 +144,7 @@ function CommentDialog({ editor, pageId, readOnly }: CommentDialogProps) {
      withCloseButton
      withBorder
      data-comment-dialog
+      aria-label={t("Add comment")}
    >
      <Stack gap={2}>
        <Group>
@@ -10,6 +10,7 @@ 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;
@@ -83,7 +84,7 @@ const CommentEditor = forwardRef(
              }
            }

-            if ((event.ctrlKey || event.metaKey) && event.key === "Enter") {
+            if (platformModifierKey(event) && event.code === "Enter") {
              event.preventDefault();
              if (onSave) onSave();

@@ -173,6 +173,15 @@ 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>
@@ -46,7 +46,11 @@ function CommentMenu({
  return (
    <Menu shadow="md" width={200}>
      <Menu.Target>
-        <ActionIcon variant="default" style={{ border: "none" }}>
+        <ActionIcon
+          variant="default"
+          style={{ border: "none" }}
+          aria-label={t("Comment menu")}
+        >
          <IconDots size={20} stroke={2} />
        </ActionIcon>
      </Menu.Target>
@@ -19,7 +19,9 @@ export const uploadAttachmentAction = handleAttachmentUpload({
  },
  validateFn: (file, allowMedia: boolean) => {
    if (
-      (file.type.includes("image/") || file.type.includes("video/")) &&
+      (file.type.includes("image/") ||
+        file.type.includes("video/") ||
+        file.type === "application/pdf") &&
      !allowMedia
    ) {
      return false;
@@ -36,6 +36,7 @@ export default function AudioView(props: NodeViewProps) {
            preload="metadata"
            controls
            src={safeSrc}
+            aria-label={placeholder?.name || t("Audio")}
          />
        )}
        {!safeSrc && previewSrc && (
@@ -45,6 +46,7 @@ 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>
@@ -60,7 +62,7 @@ export default function AudioView(props: NodeViewProps) {
          </Group>
        )}
        {!safeSrc && !previewSrc && !placeholder && (
-          <audio className={classes.audio} controls />
+          <audio className={classes.audio} controls aria-label={t("Audio")} />
        )}
      </div>
    </NodeViewWrapper>
@@ -28,6 +28,18 @@
  }
 }

+.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);
@@ -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 { workspaceAtom } from "@/features/user/atoms/current-user-atom";
+import { userAtom, workspaceAtom } from "@/features/user/atoms/current-user-atom";

 export interface BubbleMenuItem {
  name: string;
@@ -46,6 +46,9 @@ 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);
@@ -149,7 +152,7 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
      return isTextSelected(editor);
    },
    options: {
-      placement: "top",
+      placement: editorToolbarEnabled ? "bottom" : "top",
      offset: 8,
      onHide: () => {
        setIsNodeSelectorOpen(false);
@@ -188,56 +191,60 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
            <div className={classes.divider} />
          </>
        )}
-        <NodeSelector
-          editor={props.editor}
-          isOpen={isNodeSelectorOpen}
-          setIsOpen={() => {
-            setIsNodeSelectorOpen(!isNodeSelectorOpen);
-            setIsTextAlignmentOpen(false);
-            setIsColorSelectorOpen(false);
-          }}
-        />
+        {!editorToolbarEnabled && (
+          <>
+            <NodeSelector
+              editor={props.editor}
+              isOpen={isNodeSelectorOpen}
+              setIsOpen={() => {
+                setIsNodeSelectorOpen(!isNodeSelectorOpen);
+                setIsTextAlignmentOpen(false);
+                setIsColorSelectorOpen(false);
+              }}
+            />

-        <TextAlignmentSelector
-          editor={props.editor}
-          isOpen={isTextAlignmentSelectorOpen}
-          setIsOpen={() => {
-            setIsTextAlignmentOpen(!isTextAlignmentSelectorOpen);
-            setIsNodeSelectorOpen(false);
-            setIsColorSelectorOpen(false);
-          }}
-        />
+            <TextAlignmentSelector
+              editor={props.editor}
+              isOpen={isTextAlignmentSelectorOpen}
+              setIsOpen={() => {
+                setIsTextAlignmentOpen(!isTextAlignmentSelectorOpen);
+                setIsNodeSelectorOpen(false);
+                setIsColorSelectorOpen(false);
+              }}
+            />

-        <ActionIcon.Group>
-          {items.map((item, index) => (
-            <Tooltip key={index} label={t(item.name)} withArrow>
-              <ActionIcon
-                key={index}
-                variant="default"
-                size="lg"
-                radius="0"
-                aria-label={t(item.name)}
-                className={clsx({ [classes.active]: item.isActive() })}
-                style={{ border: "none" }}
-                onClick={item.command}
-              >
-                <item.icon style={{ width: rem(16) }} stroke={2} />
-              </ActionIcon>
-            </Tooltip>
-          ))}
-        </ActionIcon.Group>
+            <ActionIcon.Group>
+              {items.map((item, index) => (
+                <Tooltip key={index} label={t(item.name)} withArrow>
+                  <ActionIcon
+                    key={index}
+                    variant="default"
+                    size="lg"
+                    radius="0"
+                    aria-label={t(item.name)}
+                    className={clsx({ [classes.active]: item.isActive() })}
+                    style={{ border: "none" }}
+                    onClick={item.command}
+                  >
+                    <item.icon style={{ width: rem(16) }} stroke={2} />
+                  </ActionIcon>
+                </Tooltip>
+              ))}
+            </ActionIcon.Group>

-        <LinkSelector />
+            <LinkSelector />

-        <ColorSelector
-          editor={props.editor}
-          isOpen={isColorSelectorOpen}
-          setIsOpen={() => {
-            setIsColorSelectorOpen(!isColorSelectorOpen);
-            setIsNodeSelectorOpen(false);
-            setIsTextAlignmentOpen(false);
-          }}
-        />
+            <ColorSelector
+              editor={props.editor}
+              isOpen={isColorSelectorOpen}
+              setIsOpen={() => {
+                setIsColorSelectorOpen(!isColorSelectorOpen);
+                setIsNodeSelectorOpen(false);
+                setIsTextAlignmentOpen(false);
+              }}
+            />
+          </>
+        )}

        <Tooltip label={t(commentItem.name)} withArrow withinPortal={false}>
          <ActionIcon
@@ -4,7 +4,6 @@ import {
  Button,
  Popover,
  rem,
-  ScrollArea,
  Text,
  Tooltip,
  SimpleGrid,
@@ -114,6 +113,63 @@ 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,
@@ -157,13 +213,20 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
  );

  return (
-    <Popover width={220} opened={isOpen} withArrow>
+    <Popover
+      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 || ""}
@@ -172,34 +235,54 @@ 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>
-        <ScrollArea.Autosize type="scroll" mah="400">
-          <Stack gap="md">
+      <Popover.Dropdown onMouseDown={(e) => e.preventDefault()}>
+        <Stack gap="md" p="2px">
            <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
-                      onClick={() => {
-                        if (name === "Default") {
-                          editor.commands.unsetColor();
-                        } else {
-                          editor
-                            .chain()
-                            .focus()
-                            .setColor(color || "")
-                            .run();
+                      role="button"
+                      tabIndex={0}
+                      data-autofocus={index === 0 ? true : undefined}
+                      data-color-grid="text"
+                      data-color-index={index}
+                      className={classes.colorSwatch}
+                      aria-label={t(name)}
+                      aria-pressed={!!editorState[`text_${color}`]}
+                      onClick={applyTextColor}
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter" || e.key === " ") {
+                          e.preventDefault();
+                          applyTextColor();
+                          return;
                        }
-                        setIsOpen(false);
+                        handleColorKeyNav(e, index, "text");
                      }}
                      style={{
                        width: rem(28),
@@ -221,7 +304,8 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
                      A
                    </Box>
                  </Tooltip>
-                ))}
+                  );
+                })}
              </SimpleGrid>
            </Box>

@@ -230,23 +314,40 @@ 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
-                      onClick={() => {
-                        if (name === "Default") {
-                          editor.commands.unsetHighlight();
-                        } else {
-                          editor
-                            .chain()
-                            .focus()
-                            .toggleMark("highlight", {
-                              color: color || "",
-                              colorName: name.toLowerCase() || "",
-                            })
-                            .run();
+                      role="button"
+                      tabIndex={0}
+                      data-color-grid="highlight"
+                      data-color-index={index}
+                      className={classes.colorSwatch}
+                      aria-label={t(name)}
+                      aria-pressed={!!editorState[`highlight_${color}`]}
+                      onClick={applyHighlight}
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter" || e.key === " ") {
+                          e.preventDefault();
+                          applyHighlight();
+                          return;
                        }
-                        setIsOpen(false);
+                        handleColorKeyNav(e, index, "highlight");
                      }}
                      style={{
                        width: rem(28),
@@ -274,23 +375,35 @@ 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>
  );
@@ -12,6 +12,7 @@ import {
  IconInfoCircle,
  IconList,
  IconListNumbers,
+  IconQuote,
  IconTypography,
 } from "@tabler/icons-react";
 import { Popover, Button, ScrollArea, Tooltip } from "@mantine/core";
@@ -59,6 +60,7 @@ 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"),
      };
    },
  });
@@ -122,6 +124,12 @@ 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,
@@ -147,9 +155,14 @@ export const NodeSelector: FC<NodeSelectorProps> = ({
  };

  return (
-    <Popover opened={isOpen} withArrow>
+    <Popover opened={isOpen} onChange={setIsOpen} withArrow>
      <Popover.Target>
-        <Tooltip label={t("Turn into")} withArrow withinPortal={false} disabled={isOpen}>
+        <Tooltip
+          label={t("Turn into")}
+          withArrow
+          withinPortal={false}
+          disabled={isOpen}
+        >
          <Button
            className={classes.buttonRoot}
            variant="default"
@@ -157,6 +170,9 @@ 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>
@@ -7,7 +7,7 @@ import {
  IconCheck,
  IconChevronDown,
 } from "@tabler/icons-react";
-import { Popover, Button, ScrollArea, Tooltip, rem } from "@mantine/core";
+import { Menu, Button, Tooltip, rem } from "@mantine/core";
 import type { Editor } from "@tiptap/react";
 import { useEditorState } from "@tiptap/react";
 import { useTranslation } from "react-i18next";
@@ -82,47 +82,49 @@ export const TextAlignmentSelector: FC<TextAlignmentProps> = ({
  const activeItem = items.filter((item) => item.isActive()).pop() ?? items[0];

  return (
-    <Popover opened={isOpen} withArrow>
-      <Popover.Target>
-        <Tooltip label={t("Text align")} withArrow withinPortal={false} disabled={isOpen}>
+    <Menu
+      shadow="md"
+      position="bottom-start"
+      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>
-      </Popover.Target>
+      </Menu.Target>

-      <Popover.Dropdown>
-        <ScrollArea.Autosize type="scroll" mah={400}>
-          <Button.Group orientation="vertical">
-            {items.map((item, index) => (
-              <Button
-                key={index}
-                variant="default"
-                leftSection={<item.icon size={16} />}
-                rightSection={
-                  activeItem.name === item.name && <IconCheck size={16} />
-                }
-                justify="left"
-                fullWidth
-                onClick={() => {
-                  item.command();
-                  setIsOpen(false);
-                }}
-                style={{ border: "none" }}
-              >
-                {t(item.name)}
-              </Button>
-            ))}
-          </Button.Group>
-        </ScrollArea.Autosize>
-      </Popover.Dropdown>
-    </Popover>
+      <Menu.Dropdown>
+        {items.map((item, index) => (
+          <Menu.Item
+            key={index}
+            leftSection={<item.icon size={16} />}
+            rightSection={
+              activeItem.name === item.name ? <IconCheck size={16} /> : null
+            }
+            onClick={() => {
+              item.command();
+              setIsOpen(false);
+            }}
+          >
+            {t(item.name)}
+          </Menu.Item>
+        ))}
+      </Menu.Dropdown>
+    </Menu>
  );
 };
@@ -137,7 +137,13 @@ export default function DrawioView(props: NodeViewProps) {

  return (
    <NodeViewWrapper data-drag-handle>
-      <Modal.Root opened={opened} onClose={handleClose} fullScreen closeOnEscape={false}>
+      <Modal.Root
+        opened={opened}
+        onClose={handleClose}
+        fullScreen
+        closeOnEscape={false}
+        aria-label={t("Diagram editor")}
+      >
        <Modal.Overlay />
        <Modal.Content style={{ overflow: "hidden" }}>
          <Modal.Body pos="relative">
@@ -1,30 +1,26 @@
 import { CommandProps, EmojiMenuItemType } from "./types";
-import { SearchIndex } from "emoji-mart";
-import { getFrequentlyUsedEmoji, sortFrequentlyUsedEmoji } from "./utils";
+import { buildEmojiIndex, getFrequentlyUsedEmoji, sortFrequentlyUsedEmoji } from "./utils";

-const searchEmoji = async (value: string): Promise<EmojiMenuItemType[]> => {
-  if (value === "") {
-    const frequentlyUsedEmoji = getFrequentlyUsedEmoji();
-    return sortFrequentlyUsedEmoji(frequentlyUsedEmoji);
+const MAX_RESULTS = 5;
+
+const searchEmoji = async (query: string): Promise<EmojiMenuItemType[]> => {
+  if (query === "") {
+    return sortFrequentlyUsedEmoji(getFrequentlyUsedEmoji());
  }

-  const emojis = await SearchIndex.search(value);
-  const results = emojis.map((emoji: any) => {
-    return {
-      id: emoji.id,
-      emoji: emoji.skins[0].native,
-      command: ({ editor, range }: CommandProps) => {
-        editor
-          .chain()
-          .focus()
-          .deleteRange(range)
-          .insertContent(emoji.skins[0].native + " ")
-          .run();
-      },
-    };
-  });
+  const q = query.toLowerCase();
+  const index = await buildEmojiIndex();

-  return results;
+  return index
+    .filter((e) => e.name.includes(q) || e.id.includes(q))
+    .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();
+      },
+    }));
 };

 export const getEmojiItems = async ({
@@ -1,140 +1,208 @@
-import {
-  ActionIcon,
-  Loader,
-  Paper,
-  ScrollArea,
-  SimpleGrid,
-  Text,
-} from "@mantine/core";
-import { EmojiMenuItemType } from "./types";
+import { Loader, Paper, ScrollArea, Text, UnstyledButton } from "@mantine/core";
 import clsx from "clsx";
-import classes from "./emoji-menu.module.css";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { GRID_COLUMNS, incrementEmojiUsage } from "./utils";
+import { useTranslation } from "react-i18next";
+import { EmojiMenuItemType } from "./types";
+import {
+  EmojiCategory,
+  EmojiIndexEntry,
+  getEmojiCategories,
+  incrementEmojiUsage,
+} from "./utils";
+import classes from "./emoji-menu.module.css";

-const EmojiList = ({
+const COLS = 8;
+
+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: any;
+  command: (item: EmojiMenuItemType) => void;
  editor: any;
  range: any;
-}) => {
-  const [selectedIndex, setSelectedIndex] = useState(0);
-  const viewportRef = useRef<HTMLDivElement>(null);
+  query?: string;
+}) {
+  const { t } = useTranslation();
+  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 selectItem = useCallback(
-    (index: number) => {
-      const item = items[index];
-      if (item) {
-        command(item);
-        incrementEmojiUsage(item.id);
-      }
+  const searching = query.length > 0;
+  const browseLoading = !searching && cats.length === 0;
+  const gridItems = cats.find((c) => c.id === activeCat)?.emojis ?? [];
+
+  useEffect(() => {
+    getEmojiCategories().then((data) => {
+      setCats(data);
+      setActiveCat((prev) => prev || data[0]?.id || "");
+    });
+  }, []);
+
+  useEffect(() => { setIdx(0); }, [query, activeCat]);
+
+  useEffect(() => { if (searching) setFocusZone("grid"); }, [searching]);
+
+  useEffect(() => {
+    if (focusZone !== "tabs") return;
+    catBar.current?.querySelector<HTMLElement>(`[data-cat="${activeCat}"]`)?.scrollIntoView({ block: "nearest", inline: "nearest" });
+  }, [activeCat, focusZone]);
+
+  useEffect(() => {
+    if (focusZone === "tabs") return;
+    const vp = searching ? listViewport.current : gridViewport.current;
+    vp?.querySelector<HTMLElement>(`[data-i="${idx}"]`)?.scrollIntoView({ block: "nearest" });
+  }, [idx, searching, focusZone]);
+
+  const pickSearchItem = useCallback(
+    (i: number) => {
+      const item = items[i];
+      if (!item) return;
+      command(item);
+      incrementEmojiUsage(item.id);
    },
-    [command, items]
+    [command, items],
+  );
+
+  const pickGridItem = useCallback(
+    (entry: EmojiIndexEntry) => {
+      editor.chain().focus().deleteRange(range).insertContent(entry.native + " ").run();
+      incrementEmojiUsage(entry.id);
+    },
+    [editor, range],
  );

  useEffect(() => {
-    const navigationKeys = [
-      "ArrowRight",
-      "ArrowLeft",
-      "ArrowUp",
-      "ArrowDown",
-      "Enter",
-    ];
-    const onKeyDown = (e: KeyboardEvent) => {
-      if (navigationKeys.includes(e.key)) {
-        e.preventDefault();
-
-        if (e.key === "ArrowRight") {
-          setSelectedIndex(
-            selectedIndex + 1 < items.length ? selectedIndex + 1 : selectedIndex
-          );
-          return true;
+    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));
        }
-
-        if (e.key === "ArrowLeft") {
-          setSelectedIndex(
-            selectedIndex - 1 >= 0 ? selectedIndex - 1 : selectedIndex
-          );
-          return true;
-        }
-
-        if (e.key === "ArrowUp") {
-          setSelectedIndex(
-            selectedIndex - GRID_COLUMNS >= 0
-              ? selectedIndex - GRID_COLUMNS
-              : selectedIndex
-          );
-          return true;
-        }
-
-        if (e.key === "ArrowDown") {
-          setSelectedIndex(
-            selectedIndex + GRID_COLUMNS < items.length
-              ? selectedIndex + GRID_COLUMNS
-              : selectedIndex
-          );
-          return true;
-        }
-
-        if (e.key === "Enter") {
-          selectItem(selectedIndex);
-          return true;
-        }
-        return false;
+        else if (e.key === "Enter")      { e.preventDefault(); if (gridItems[idx]) pickGridItem(gridItems[idx]); }
      }
-    };
-    document.addEventListener("keydown", onKeyDown);
-    return () => {
-      document.removeEventListener("keydown", onKeyDown);
-    };
-  }, [items, selectedIndex, setSelectedIndex]);
+    }
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [searching, items, idx, gridItems, pickSearchItem, pickGridItem, focusZone, cats, activeCat]);

-  useEffect(() => {
-    setSelectedIndex(0);
-  }, [items]);
-
-  useEffect(() => {
-    viewportRef.current
-      ?.querySelector(`[data-item-index="${selectedIndex}"]`)
-      ?.scrollIntoView({ block: "nearest" });
-  }, [selectedIndex]);
-
-  return items.length > 0 || isLoading ? (
-    <Paper id="emoji-command" p="0" shadow="md" withBorder>
-      {isLoading && <Loader m="xs" color="blue" type="dots" />}
-      {items.length > 0 && (
-        <ScrollArea.Autosize
-          viewportRef={viewportRef}
-          mah={250}
-          scrollbarSize={8}
-          pr="5"
-        >
-          <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>
+  return (
+    <Paper
+      id="emoji-command"
+      p={0}
+      shadow="md"
+      withBorder
+      style={{ width: 280 }}
+      role="listbox"
+      aria-label={t("Emoji picker")}
+    >
+      {searching ? (
+        <>
+          {isLoading && <Loader m="xs" size="xs" color="blue" type="dots" />}
+          <ScrollArea.Autosize mah={260} scrollbarSize={6} viewportRef={listViewport}>
+            <div style={{ padding: 4 }}>
+              {items.length === 0 && !isLoading ? (
+                <Text size="sm" c="dimmed" p="xs">{t("No results")}</Text>
+              ) : items.map((item, i) => (
+                <UnstyledButton
+                  key={item.id}
+                  data-i={i}
+                  w="100%"
+                  className={clsx(classes.row, { [classes.active]: i === idx })}
+                  onClick={() => pickSearchItem(i)}
+                  onMouseEnter={() => setIdx(i)}
+                  role="option"
+                  aria-selected={i === idx}
+                >
+                  <span style={{ fontSize: 20, lineHeight: 1, minWidth: 26 }}>{item.emoji}</span>
+                  <Text size="sm" c="dimmed" ff="monospace" span>:{item.id}:</Text>
+                </UnstyledButton>
+              ))}
+            </div>
+          </ScrollArea.Autosize>
+        </>
+      ) : browseLoading ? (
+        <Loader m="xs" size="xs" color="blue" type="dots" />
+      ) : (
+        <>
+          <div className={classes.catBar} role="tablist" ref={catBar}>
+            {cats.map((c) => {
+              const isActive = c.id === activeCat;
+              const isFocused = isActive && focusZone === "tabs";
+              return (
+                <button
+                  key={c.id}
+                  data-cat={c.id}
+                  title={c.id}
+                  role="tab"
+                  aria-selected={isActive}
+                  className={clsx(classes.catTab, {
+                    [classes.catTabActive]: isActive,
+                    [classes.catTabFocused]: isFocused,
+                  })}
+                  onClick={() => { setActiveCat(c.id); setFocusZone("grid"); }}
+                  onMouseEnter={() => setFocusZone("grid")}
+                >
+                  {CAT_ICONS[c.id] ?? "🔣"}
+                </button>
+              );
+            })}
+          </div>
+          <ScrollArea.Autosize mah={220} scrollbarSize={6} viewportRef={gridViewport}>
+            <div className={classes.grid} style={{ gridTemplateColumns: `repeat(${COLS}, 1fr)` }}>
+              {gridItems.map((entry, i) => (
+                <button
+                  key={entry.id}
+                  data-i={i}
+                  title={`:${entry.id}:`}
+                  className={clsx(classes.emojiBtn, { [classes.active]: i === idx })}
+                  onClick={() => pickGridItem(entry)}
+                  onMouseEnter={() => setIdx(i)}
+                >
+                  {entry.native}
+                </button>
+              ))}
+            </div>
+          </ScrollArea.Autosize>
+        </>
      )}
    </Paper>
-  ) : null;
-};
+  );
+}

 export default EmojiList;
@@ -1,9 +1,13 @@
-.menuBtn {
+.row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
  border-radius: var(--mantine-radius-sm);

  &:hover {
    @mixin light {
-      background: var(--mantine-color-gray-2);
+      background: var(--mantine-color-gray-1);
    }

    @mixin dark {
@@ -12,7 +16,7 @@
  }
 }

-.selectedItem {
+.active {
  @mixin light {
    background: var(--mantine-color-gray-2);
  }
@@ -21,3 +25,83 @@
    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);
+    }
+  }
+}
+
@@ -1,6 +1,5 @@
 import { ReactRenderer, useEditor } from "@tiptap/react";
 import EmojiList from "./emoji-list";
-import { init } from "emoji-mart";
 import {
  autoUpdate,
  computePosition,
@@ -37,10 +36,6 @@ 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,
@@ -1,8 +1,4 @@
-import { CommandProps } from "./types";
-import { getEmojiDataFromNative } from "emoji-mart";
-import { EmojiMartFrequentlyType, EmojiMenuItemType } from "./types";
-
-export const GRID_COLUMNS = 10;
+import { CommandProps, EmojiMartFrequentlyType, EmojiMenuItemType } from "./types";

 export const LOCAL_STORAGE_FREQUENT_KEY = "emoji-mart.frequently";

@@ -19,41 +15,76 @@ export const DEFAULT_FREQUENTLY_USED_EMOJI_MART = `{
    "rocket": 1
 }`;

+export type EmojiIndexEntry = { id: string; name: string; native: string };
+
+let _emojiIndex: EmojiIndexEntry[] | null = null;
+
+export const buildEmojiIndex = async (): Promise<EmojiIndexEntry[]> => {
+  if (_emojiIndex) return _emojiIndex;
+  const { default: data } = await import('@slidoapp/emoji-mart-data');
+  _emojiIndex = (Object.values((data as any).emojis) as any[])
+    .filter((e) => e.id && e.name && e.skins?.[0]?.native)
+    .map((e) => ({
+      id: e.id as string,
+      name: (e.name as string).toLowerCase(),
+      native: e.skins[0].native as string,
+    }));
+  return _emojiIndex;
+};
+
 export const incrementEmojiUsage = (emojiId: string) => {
-  const frequentlyUsedEmoji =
-    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)
+  const stored = JSON.parse(
+    localStorage.getItem(LOCAL_STORAGE_FREQUENT_KEY) || DEFAULT_FREQUENTLY_USED_EMOJI_MART,
  );
+  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 data = await Promise.all(
-    Object.entries(frequentlyUsedEmoji).map(
-      async ([id, count]): Promise<EmojiMenuItemType> => ({
+  const index = await buildEmojiIndex();
+  const results: EmojiMenuItemType[] = Object.entries(frequentlyUsedEmoji)
+    .map(([id, count]): EmojiMenuItemType | null => {
+      const entry = index.find((e) => e.id === id);
+      if (!entry) return null;
+      return {
        id,
        count,
-        emoji: (await getEmojiDataFromNative(id))?.native,
-        command: async ({ editor, range }: CommandProps) => {
-          editor
-            .chain()
-            .focus()
-            .deleteRange(range)
-            .insertContent((await getEmojiDataFromNative(id))?.native + " ")
-            .run();
+        emoji: entry.native,
+        command: ({ editor, range }: CommandProps) => {
+          editor.chain().focus().deleteRange(range).insertContent(entry.native + " ").run();
        },
-      })
-    )
-  );
-  return data.sort((a, b) => b.count - a.count);
+      };
+    })
+    .filter((e): e is EmojiMenuItemType => e !== null);
+  return results.sort((a, b) => (b.count ?? 0) - (a.count ?? 0)).slice(0, 5);
 };

-export const getFrequentlyUsedEmoji = () => {
-  return JSON.parse(localStorage.getItem(LOCAL_STORAGE_FREQUENT_KEY) || DEFAULT_FREQUENTLY_USED_EMOJI_MART);
-}
+export const getFrequentlyUsedEmoji = (): EmojiMartFrequentlyType => {
+  return JSON.parse(
+    localStorage.getItem(LOCAL_STORAGE_FREQUENT_KEY) || DEFAULT_FREQUENTLY_USED_EMOJI_MART,
+  );
+};
+
+export type EmojiCategory = { id: string; emojis: EmojiIndexEntry[] };
+
+let _cats: EmojiCategory[] | null = null;
+
+export const getEmojiCategories = async (): Promise<EmojiCategory[]> => {
+  if (_cats) return _cats;
+  const [{ default: data }, index] = await Promise.all([
+    import("@slidoapp/emoji-mart-data"),
+    buildEmojiIndex(),
+  ]);
+  const byId = new Map(index.map((e) => [e.id, e]));
+  _cats = ((data as any).categories as { id: string; emojis: string[] }[])
+    .map((cat) => ({
+      id: cat.id,
+      emojis: cat.emojis
+        .map((id) => byId.get(id))
+        .filter((e): e is EmojiIndexEntry => !!e),
+    }))
+    .filter((c) => c.emojis.length > 0);
+  return _cats;
+};
@@ -0,0 +1,72 @@
+.fixedToolbar {
+  position: fixed;
+  top: calc(var(--app-shell-header-offset, 0rem) + 45px);
+  inset-inline-start: var(--app-shell-navbar-offset, 0rem);
+  inset-inline-end: var(--app-shell-aside-offset, 0rem);
+  z-index: 99;
+  display: flex;
+  align-items: center;
+  background: var(--mantine-color-body);
+  border-bottom: 1px solid
+    light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4));
+  overflow-x: auto;
+}
+
+.fixedToolbar::-webkit-scrollbar {
+  height: 2px;
+}
+
+.fixedToolbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.fixedToolbar::-webkit-scrollbar-thumb {
+  background: light-dark(
+    var(--mantine-color-gray-4),
+    var(--mantine-color-dark-3)
+  );
+  border-radius: 1px;
+}
+
+.inner {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  gap: 4px;
+  padding: 4px 8px;
+  margin-inline: auto;
+}
+
+.inner > * {
+  flex-shrink: 0;
+}
+
+.spacer {
+  height: 45px;
+}
+
+.divider {
+  flex-shrink: 0;
+  width: 1px;
+  height: 20px;
+  margin: 0 4px;
+  background: light-dark(
+    var(--mantine-color-gray-3),
+    var(--mantine-color-dark-4)
+  );
+}
+
+.active,
+.active:hover {
+  color: var(--mantine-color-blue-6);
+  background-color: light-dark(
+    var(--mantine-color-gray-1),
+    var(--mantine-color-dark-5)
+  );
+}
+
+@media print {
+  .fixedToolbar {
+    display: none;
+  }
+}
@@ -0,0 +1,66 @@
+import { FC } from "react";
+import { useAtomValue } from "jotai";
+import { pageEditorAtom } from "@/features/editor/atoms/editor-atoms";
+import { useToolbarState } from "./use-toolbar-state";
+import { BlockTypeGroup } from "./groups/block-type-group";
+import { InlineMarksGroup } from "./groups/inline-marks-group";
+import { ColorGroup } from "./groups/color-group";
+import { ListsGroup } from "./groups/lists-group";
+import { LinkGroup } from "./groups/link-group";
+import { AlignmentGroup } from "./groups/alignment-group";
+import { MediaGroup } from "./groups/media-group";
+import { QuickInsertsGroup } from "./groups/quick-inserts-group";
+import { MoreInsertsGroup } from "./groups/more-inserts-group";
+import { HistoryGroup } from "./groups/history-group";
+import { AskAiGroup } from "./groups/ask-ai-group";
+import { workspaceAtom } from "@/features/user/atoms/current-user-atom";
+import classes from "./fixed-toolbar.module.css";
+
+export const FixedToolbar: FC = () => {
+  const editor = useAtomValue(pageEditorAtom);
+  const state = useToolbarState(editor);
+  const workspace = useAtomValue(workspaceAtom);
+  const isGenerativeAiEnabled = workspace?.settings?.ai?.generative === true;
+
+  if (!editor || !state) return null;
+
+  return (
+    <>
+      <div
+        className={classes.fixedToolbar}
+        data-fixed-toolbar="true"
+        role="toolbar"
+        aria-label="Editor toolbar"
+        onMouseDown={(e) => e.preventDefault()}
+      >
+        <div className={classes.inner}>
+          {/* {isGenerativeAiEnabled && (
+            <>
+              <AskAiGroup />
+              <div className={classes.divider} />
+            </>
+          )} */}
+          <BlockTypeGroup editor={editor} />
+          <div className={classes.divider} />
+          <InlineMarksGroup editor={editor} state={state} />
+          <div className={classes.divider} />
+          <ColorGroup editor={editor} />
+          <div className={classes.divider} />
+          <ListsGroup editor={editor} state={state} />
+          <div className={classes.divider} />
+          <LinkGroup />
+          <div className={classes.divider} />
+          <AlignmentGroup editor={editor} />
+          <div className={classes.divider} />
+          <MediaGroup editor={editor} />
+          <div className={classes.divider} />
+          <QuickInsertsGroup editor={editor} />
+          <MoreInsertsGroup editor={editor} />
+          <div className={classes.divider} />
+          <HistoryGroup editor={editor} state={state} />
+        </div>
+      </div>
+      <div className={classes.spacer} aria-hidden />
+    </>
+  );
+};
@@ -0,0 +1,28 @@
+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}
+    />
+  );
+};
@@ -0,0 +1,23 @@
+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>
+  );
+};
@@ -0,0 +1,108 @@
+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>
+  );
+};
@@ -0,0 +1,24 @@
+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} />
+  );
+};
@@ -0,0 +1,44 @@
+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>
+  );
+};
@@ -0,0 +1,131 @@
+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>
+  );
+};
@@ -0,0 +1,6 @@
+import { FC } from "react";
+import { LinkSelector } from "@/features/editor/components/bubble-menu/link-selector";
+
+export const LinkGroup: FC = () => {
+  return <LinkSelector />;
+};
@@ -0,0 +1,61 @@
+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>
+  );
+};
@@ -0,0 +1,118 @@
+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>
+  );
+};
@@ -0,0 +1,217 @@
+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>
+  );
+};
@@ -0,0 +1,117 @@
+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>
+  );
+};
@@ -0,0 +1,50 @@
+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"),
+      };
+    },
+  });
+}
@@ -102,6 +102,14 @@ 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}
@@ -125,10 +133,16 @@ 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,
@@ -156,6 +170,9 @@ 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, {
@@ -3,7 +3,6 @@ import React, {
  useCallback,
  useEffect,
  useImperativeHandle,
-  useMemo,
  useRef,
  useState,
 } from "react";
@@ -36,7 +35,7 @@ import {
  usePageQuery,
 } from "@/features/page/queries/page-query";
 import { treeDataAtom } from "@/features/page/tree/atoms/tree-data-atom";
-import { SimpleTree } from "react-arborist";
+import { treeModel } from "@/features/page/tree/model/tree-model";
 import { SpaceTreeNode } from "@/features/page/tree/types";
 import { useTranslation } from "react-i18next";
 import { useQueryEmit } from "@/features/websocket/use-query-emit";
@@ -53,7 +52,6 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
  const [renderItems, setRenderItems] = useState<MentionSuggestionItem[]>([]);
  const { t } = useTranslation();
  const [data, setData] = useAtom(treeDataAtom);
-  const tree = useMemo(() => new SimpleTree<SpaceTreeNode>(data), [data]);
  const createPageMutation = useCreatePageMutation();
  const emit = useQueryEmit();
  const isInCommentContext = props.isInCommentContext ?? false;
@@ -220,20 +218,20 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
    try {
      createdPage = await createPageMutation.mutateAsync(payload);
      const parentId = page.id || null;
-      const data = {
+      const newNode: SpaceTreeNode = {
        id: createdPage.id,
        slugId: createdPage.slugId,
        name: createdPage.title,
        position: createdPage.position,
        spaceId: createdPage.spaceId,
        parentPageId: createdPage.parentPageId,
+        hasChildren: false,
        children: [],
-      } as any;
+      };

-      const lastIndex = tree.data.length;
+      const lastIndex = data.length;

-      tree.create({ parentId, index: lastIndex, data });
-      setData(tree.data);
+      setData(treeModel.insert(data, parentId, newNode, lastIndex));

      props.command({
        id: uuid7(),
@@ -251,7 +249,7 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
          payload: {
            parentId,
            index: lastIndex,
-            data,
+            data: newNode,
          },
        });
      }, 50);
@@ -287,7 +285,16 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
  );

  return (
-    <Paper id="mention" shadow="md" withBorder radius="md" py={6}>
+    <Paper
+      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}
@@ -301,7 +308,7 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
          if (item.entityType === "header") {
            const isFirst = index === 0;
            return (
-              <div key={`${item.label}-${index}`}>
+              <div key={`${item.label}-${index}`} role="presentation">
                {!isFirst && <Divider my={6} />}
                <Text
                  c="dimmed"
@@ -322,6 +329,9 @@ 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,
@@ -348,6 +358,9 @@ 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,
@@ -358,7 +371,7 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
                  <ActionIcon
                    variant="subtle"
                    component="div"
-                    aria-label={item.label}
+                    aria-hidden="true"
                    color="gray"
                    size="sm"
                  >
@@ -390,6 +403,11 @@ 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))
              }
@@ -405,6 +423,7 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
                  component="div"
                  color="gray"
                  size="sm"
+                  aria-hidden="true"
                >
                  <IconPlus size={16} stroke={1.5} />
                </ActionIcon>
@@ -92,7 +92,20 @@ export default function PdfView(props: NodeViewProps) {
  if (hasError) {
    return (
      <NodeViewWrapper data-drag-handle>
-        <div data-pdf-error className={clsx(classes.pdfError, { "ProseMirror-selectednode": selected })} onClick={handleSelect}>
+        <div
+          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")}
@@ -187,12 +187,14 @@ 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">
@@ -217,7 +219,12 @@ function SearchAndReplaceDialog({ editor, editable = true }: PageFindDialogDialo

          <ActionIcon.Group>
            <Tooltip label={t("Previous match (Shift+Enter)")}>
-              <ActionIcon variant="subtle" color="gray" onClick={previous}>
+              <ActionIcon
+                variant="subtle"
+                color="gray"
+                onClick={previous}
+                aria-label={t("Previous match (Shift+Enter)")}
+              >
                <IconArrowNarrowUp
                  style={{ width: "70%", height: "70%" }}
                  stroke={1.5}
@@ -225,7 +232,12 @@ function SearchAndReplaceDialog({ editor, editable = true }: PageFindDialogDialo
              </ActionIcon>
            </Tooltip>
            <Tooltip label={t("Next match (Enter)")}>
-              <ActionIcon variant="subtle" color="gray" onClick={next}>
+              <ActionIcon
+                variant="subtle"
+                color="gray"
+                onClick={next}
+                aria-label={t("Next match (Enter)")}
+              >
                <IconArrowNarrowDown
                  style={{ width: "70%", height: "70%" }}
                  stroke={1.5}
@@ -237,6 +249,8 @@ 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%" }}
@@ -250,6 +264,8 @@ 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%" }}
@@ -259,7 +275,12 @@ function SearchAndReplaceDialog({ editor, editable = true }: PageFindDialogDialo
              </Tooltip>
            )}
            <Tooltip label={t("Close (Escape)")}>
-              <ActionIcon variant="subtle" color="gray" onClick={closeDialog}>
+              <ActionIcon
+                variant="subtle"
+                color="gray"
+                onClick={closeDialog}
+                aria-label={t("Close (Escape)")}
+              >
                <IconX style={{ width: "70%", height: "70%" }} stroke={1.5} />
              </ActionIcon>
            </Tooltip>
@@ -269,6 +290,7 @@ 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"
@@ -86,7 +86,15 @@ const CommandList = ({
  }, [selectedIndex]);

  return flatItems.length > 0 ? (
-    <Paper id="slash-command" shadow="md" p="xs" withBorder>
+    <Paper
+      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}
@@ -94,22 +102,30 @@ const CommandList = ({
        scrollbarSize={8}
        overscrollBehavior="contain"
      >
-        {Object.entries(items).map(([category, categoryItems]) => (
-          <div key={category}>
+        {(() => {
+          let flatIndex = -1;
+          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, index: number) => (
+            {categoryItems.map((item: SlashMenuItemType) => {
+              flatIndex += 1;
+              const itemIndex = flatIndex;
+              return (
              <UnstyledButton
-                data-item-index={index}
-                key={index}
-                onClick={() => selectItem(index)}
+                data-item-index={itemIndex}
+                key={itemIndex}
+                id={`slash-command-option-${itemIndex}`}
+                role="option"
+                aria-selected={itemIndex === selectedIndex}
+                onClick={() => selectItem(itemIndex)}
                className={clsx(classes.menuBtn, {
-                  [classes.selectedItem]: index === selectedIndex,
+                  [classes.selectedItem]: itemIndex === selectedIndex,
                })}
              >
                <Group>
-                  <ActionIcon variant="default" component="div">
+                  <ActionIcon variant="default" component="div" aria-hidden="true">
                    <item.icon size={18} />
                  </ActionIcon>

@@ -124,9 +140,11 @@ const CommandList = ({
                  </div>
                </Group>
              </UnstyledButton>
-            ))}
+              );
+            })}
          </div>
-        ))}
+          ));
+        })()}
      </ScrollArea>
    </Paper>
  ) : null;
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Philipinho	cb0aeedabf	fix	2026-05-14 00:36:30 +01:00
Philipinho	784a30b5a2	cleanup	2026-05-14 00:31:26 +01:00
Philipinho	f18b29b45a	fix: close table handle menu when drag starts	2026-05-14 00:25:00 +01:00
Philipinho	d6af26d81b	Merge branch 'main' into table	2026-05-13 23:11:36 +01:00
Philip Okugbe	31ed0df3f7	feat(tree): replace sidebar tree (react-aborist) with custom tree implementation (#2199 ) * feat(tree): replace react-arborist with custom tree implementation * feat(tree): keyboard arrow navigation between rows * feat(emoji-picker): focus search input on open * refactor(emoji): switch to @slidoapp/emoji-mart fork for accessibility * feat(tree): Home/End and typeahead keyboard navigation * feat(tree): roving tabindex and * to expand sibling subtrees * feat(tree): Space activation and ARIA refinements * fix(tree): move treeitem role to focusable row + aria-current	2026-05-13 23:01:04 +01:00
Philipinho	1260d60d38	feat: table enhancement	2026-05-12 20:25:22 +01:00
Philipinho	bf1ddd8320	tableview	2026-05-10 19:19:23 +01:00
Philip Okugbe	a689cca7a0	feat: page labels/tags (#2188 ) * feat: labels (WIP) * full implementation	2026-05-10 18:14:15 +01:00
Philip Okugbe	537e45bc11	feat: page details section and backlinks (#2186 ) * feat: page details section and backlinks	2026-05-09 17:03:08 +01:00
Philip Okugbe	bdc369fce0	feat(editor): fixed toolbar preference (#2185 ) * feat(editor): fixed toolbar preference * remove key * cleanup translation strings * update axios	2026-05-09 13:27:03 +01:00
Philip Okugbe	2d8b470495	feat(editor): indentation (#2174 ) * switch to default codeblock tab handling * feat(editor): indentation	2026-05-08 21:40:37 +01:00
David Gallardo	c66c08fa78	fix: ignore emoji when deriving avatar initials (#2167 )	2026-05-08 21:36:10 +01:00
David Gallardo	6046d04375	feat(editor): replace emoji picker with browse + search (#2171 ) * feat(editor): show emoji name in suggestion list Replace the fixed-column emoji grid with a vertical list that displays each emoji alongside its :shortcode: name. This makes the picker more discoverable—users can see and learn shortcodes without prior knowledge. Changes: - EmojiList: switch from SimpleGrid/ActionIcon to UnstyledButton list rows showing emoji glyph + monospace 🆔 label - Navigation simplified to ArrowUp/ArrowDown (list has no columns) - Results capped at 8 items for a focused, scannable dropdown - CSS module: rename menuBtn -> menuItem, tighten padding * feat(editor): replace SearchIndex with name/id includes search Port the exact search algorithm from the original extension: - Build a flat index from @emoji-mart/data: { id, name (lowercase), native } - Filter with name.includes(q) \|\| id.includes(q) — predictable, no keyword indirection - Results capped at 5 (same as extension) - Frequently-used emojis (sorted by usage) shown when query is empty - Remove emoji-mart init() / SearchIndex / getEmojiDataFromNative dependencies; index is built lazily and cached in memory - Remove unused GRID_COLUMNS constant * feat(editor): emoji picker with browse and search modes When the query is empty the picker shows a category bar with 8 tabs (people, nature, food…) and a scrollable emoji grid. Typing after ':' switches to a compact list that shows the glyph and :shortcode: side by side, making it easy to discover emoji names while you type. - Category data is loaded lazily from @emoji-mart/data and cached, so opening the picker more than once has no overhead - Grid keyboard nav: arrow keys move by cell/row, Enter picks - List keyboard nav: up/down through results, Enter picks - Mouse hover syncs the keyboard selection index in both modes - incrementEmojiUsage tracks picks so frequently used ones bubble up in future sessions * fix(editor): polish emoji picker copy and loading * feat: add emoji to slash command * Add keyboard support to emoji group navigation --------- Co-authored-by: Philipinho <16838612+Philipinho@users.noreply.github.com>	2026-05-08 21:33:43 +01:00
David Gallardo	5d8c11e741	fix: sync html lang with current user locale (#2165 )	2026-05-08 21:15:04 +01:00
Philip Okugbe	de60aa7e61	feat: synced blocks (transclusion) (#2163 ) * feat: synced blocks (transclusion) * fix:remove name * make placeholders smaller * feat: enforce strict transclusion schema * fix: scope synced blocks to workspace, gate unsync on edit permission * fix collab module error	2026-05-08 13:23:16 +01:00
Peter Tripp	c9fa6e20b3	Add alias: /toc and /ol (#2161 )	2026-05-08 01:20:27 +01:00
Philipinho	ec51ca7815	fix request ip	2026-05-07 22:09:32 +01:00
Philipinho	2b63137217	mail	2026-05-07 18:13:24 +01:00
Philipinho	3227bc6059	fix: a11y	2026-05-04 23:04:26 +01:00
Philip Okugbe	73dc62bca3	update react-email (#2149 )	2026-05-04 22:26:53 +01:00
Philipinho	3c74bb3dee	update package	2026-05-04 22:09:19 +01:00
Philip Okugbe	dbe6c2d6ba	feat: A11y fixes (#2148 )	2026-05-04 21:21:37 +01:00
Sarthak Chaturvedi	fe18f22dc6	fix: prevent code block deletion when adding inline comments in read mode (#2146 )	2026-05-04 21:14:21 +01:00
Philipinho	fcef0c6b96	fix: S3	2026-05-04 20:57:35 +01:00
Philipinho	17f3158a3b	update aws packages	2026-05-01 20:00:20 +01:00
Philipinho	b74ca00bfd	sync	2026-05-01 14:57:32 +01:00
Philip Okugbe	c247d4c1e3	feat(ee): PDF import (#2142 ) * feat: replace pdfjs-dist with firecrawl-pdf-inspector * use modified firecrawl-pdf-inspector * feat: pdf import * increase single file upload size limit * use npm package * sync * update package	2026-05-01 14:56:39 +01:00
Philip Okugbe	641ce142df	feat(ee): SCIM (#1347 ) * SCIM - init (EE) * accept db transaction * sync * Content parser support for scim+json * patch scimmy * sync * return early if userIds is empty * sync * SCIM db table * fixes * scim tokens * backfill * feat(audit): add scim token events * rename scim migration * fix * fix translation * cleanup	2026-05-01 14:53:30 +01:00
Sarthak Chaturvedi	1d2486455f	fix: prevent browser tab fallback in editor (#2123 )	2026-05-01 13:58:51 +01:00
Philipinho	a0aea43e25	feat(saml): allow disabling RequestedAuthnContext via env var Adds SAML_DISABLE_REQUESTED_AUTHN_CONTEXT env var, passed through to the SAML strategy's disableRequestedAuthnContext option. Defaults to existing behavior (element sent). Set to true to omit the element when the IdP authenticates the user with a method that does not match (e.g. MFA, FIDO, passwordless), which would otherwise cause AADSTS75011 with Microsoft Entra ID.	2026-05-01 11:47:03 +01:00
Philip Okugbe	09c69d7a0f	feat: properly preserve table width (#2143 )	2026-05-01 00:49:31 +01:00
Sarthak Chaturvedi	9943e104a5	fix(i18n): Correct German column count label rendering (#2131 )	2026-05-01 00:37:59 +01:00
Peter Tripp	b16f1e5a55	fix: ctrl-k behavior on macOS (#2052 ) * Improve cmd-k / ctrl-k behavior Use cmd-k on macOS/iOS for search and keep ctrl-k everywhere else. Fixes a bug where ctrl-k on macOS, which cuts to the end of the line, was also triggering the search prompt. * comment submit: cmd-enter (mac) / ctrl-enter (win/linux)	2026-05-01 00:36:40 +01:00
Philip Okugbe	24be90b95f	fix: duplicate PDF uploads (#2139 )	2026-04-29 10:01:47 +01:00
Olivier Lambert	3ecf27c6b0	fix(page-permission): make people-with-access list scroll past 4 entries (#2137 ) The "People with access" list in the page share modal used <ScrollArea mah={250}>, which caps the container height but does not make the inner viewport scroll (no fixed height is given to the viewport). Items beyond ~4 entries were rendered correctly but clipped out of view. Switches to <ScrollArea.Autosize mah={400}>, which is Mantine's dedicated primitive for "grow with content up to a max, then scroll". Closes #2135	2026-04-29 09:36:38 +01:00
Philipinho	980521f957	v0.80.1	2026-04-27 16:06:32 +01:00
Philipinho	fe44dc92a9	sync	2026-04-27 15:51:23 +01:00
Philip Okugbe	fad410ef23	chore: add undici for oidc proxy support (#2132 )	2026-04-27 15:50:42 +01:00
Philipinho	15b8908b1a	update postcss	2026-04-27 15:23:47 +01:00
Philipinho	8e15b22d8c	package updates	2026-04-27 15:22:02 +01:00
Philipinho	ec83fc82d5	fix: refactor sanitize	2026-04-27 15:16:26 +01:00
Philipinho	a573acedd0	fix: local storage, and package overrides	2026-04-22 14:13:25 +01:00