Revert "fix: prevent browser tab fallback in editor (#2123)" (#2216)

This reverts commit 1d2486455f.

.env.example

@@ -43,8 +43,18 @@ POSTMARK_TOKEN=
 # for custom drawio server
 DRAWIO_URL=
 
+# Gotenberg URL for server-side PDF export
+GOTENBERG_URL=
+
 DISABLE_TELEMETRY=false
 
+# Allow other sites to embed Docmost in an iframe.
+IFRAME_EMBED_ALLOWED=false
+
+# Only used when IFRAME_EMBED_ALLOWED=true. When empty, any origin is allowed.
+# Example: https://intranet.example.com,https://portal.example.com
+IFRAME_ALLOWED_ORIGINS=
+
 # Enable debug logging in production (default: false)
 DEBUG_MODE=false
 

apps/client/package.json

@@ -1,85 +1,95 @@
 {
   "name": "client",
   "private": true,
-  "version": "0.71.1",
+  "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/core": "8.3.18",
-    "@mantine/dates": "^8.3.18",
+    "@mantine/dates": "8.3.18",
-    "@mantine/form": "^8.3.18",
+    "@mantine/form": "8.3.18",
-    "@mantine/hooks": "^8.3.18",
+    "@mantine/hooks": "8.3.18",
-    "@mantine/modals": "^8.3.18",
+    "@mantine/modals": "8.3.18",
-    "@mantine/notifications": "^8.3.18",
+    "@mantine/notifications": "8.3.18",
-    "@mantine/spotlight": "^8.3.18",
+    "@mantine/spotlight": "8.3.18",
-    "@tabler/icons-react": "^3.40.0",
+    "@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",
+    "@tanstack/react-virtual": "3.13.24",
-    "axios": "1.15.0",
+    "alfaaz": "1.1.0",
-    "blueimp-load-image": "^5.16.0",
+    "axios": "1.16.0",
-    "clsx": "^2.1.1",
+    "blueimp-load-image": "5.16.0",
-    "emoji-mart": "^5.6.0",
+    "clsx": "2.1.1",
-    "file-saver": "^2.0.5",
+    "file-saver": "2.0.5",
-    "highlightjs-sap-abap": "^0.3.0",
+    "highlightjs-sap-abap": "0.3.0",
-    "i18next": "^25.10.1",
+    "i18next": "25.10.1",
-    "i18next-http-backend": "^3.0.2",
+    "i18next-http-backend": "3.0.6",
-    "jotai": "^2.18.1",
+    "jotai": "2.18.1",
-    "jotai-optics": "^0.4.0",
+    "jotai-optics": "0.4.0",
-    "js-cookie": "^3.0.5",
+    "js-cookie": "3.0.5",
-    "jwt-decode": "^4.0.0",
+    "jwt-decode": "4.0.0",
     "katex": "0.16.40",
-    "lowlight": "^3.3.0",
+    "lowlight": "3.3.0",
-    "mantine-form-zod-resolver": "^1.3.0",
+    "mantine-form-zod-resolver": "1.3.0",
-    "mermaid": "^11.13.0",
+    "mermaid": "11.15.0",
-    "mitt": "^3.0.1",
+    "mitt": "3.0.1",
-    "posthog-js": "1.363.1",
+    "posthog-js": "1.372.2",
-    "react": "^18.3.1",
+    "react": "18.3.1",
-    "react-arborist": "3.4.0",
     "react-clear-modal": "^2.0.18",
     "react-dom": "^18.3.1",
-    "react-drawio": "^1.0.7",
+    "react-drawio": "1.0.7",
-    "react-error-boundary": "^6.1.1",
+    "react-error-boundary": "6.1.1",
-    "react-helmet-async": "^3.0.0",
+    "react-helmet-async": "3.0.0",
-    "react-i18next": "^16.5.8",
+    "react-i18next": "16.5.8",
-    "react-router-dom": "^7.13.1",
+    "react-router-dom": "7.13.1",
-    "semver": "^7.7.4",
+    "semver": "7.7.4",
-    "socket.io-client": "^4.8.3",
+    "socket.io-client": "4.8.3",
-    "tiptap-extension-global-drag-handle": "^0.1.18",
+    "zod": "4.3.6"
-    "zod": "^4.3.6"
   },
   "devDependencies": {
-    "@eslint/js": "^9.28.0",
+    "@eslint/js": "9.28.0",
-    "@tanstack/eslint-plugin-query": "^5.94.4",
+    "@tanstack/eslint-plugin-query": "5.94.4",
-    "@types/blueimp-load-image": "^5.16.6",
+    "@testing-library/jest-dom": "6.6.0",
-    "@types/file-saver": "^2.0.7",
+    "@testing-library/react": "16.1.0",
-    "@types/js-cookie": "^3.0.6",
+    "@types/blueimp-load-image": "5.16.6",
-    "@types/katex": "^0.16.8",
+    "@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": "18.3.12",
-    "@types/react-dom": "^18.3.1",
+    "@types/react-dom": "18.3.1",
-    "@vitejs/plugin-react": "^6.0.1",
+    "@vitejs/plugin-react": "6.0.1",
-    "eslint": "^9.28.0",
+    "eslint": "9.28.0",
-    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react": "7.37.5",
-    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-hooks": "7.0.1",
-    "eslint-plugin-react-refresh": "^0.5.2",
+    "eslint-plugin-react-refresh": "0.5.2",
-    "globals": "^15.13.0",
+    "globals": "15.13.0",
-    "optics-ts": "^2.4.1",
+    "jsdom": "25.0.0",
-    "postcss": "^8.5.8",
+    "optics-ts": "2.4.1",
-    "postcss-preset-mantine": "^1.18.0",
+    "postcss": "8.5.14",
-    "postcss-simple-vars": "^7.0.1",
+    "postcss-preset-mantine": "1.18.0",
-    "prettier": "^3.8.1",
+    "postcss-simple-vars": "7.0.1",
-    "typescript": "^5.9.3",
+    "prettier": "3.8.1",
-    "typescript-eslint": "^8.57.1",
+    "typescript": "5.9.3",
-    "vite": "8.0.5"
+    "typescript-eslint": "8.57.1",
+    "vite": "8.0.5",
+    "vitest": "4.1.6"
   }
 }

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

@@ -222,6 +222,8 @@
   "Edit comment": "Kommentar bearbeiten",
   "Delete comment": "Kommentar löschen",
   "Are you sure you want to delete this comment?": "Sind Sie sicher, dass Sie diesen Kommentar löschen möchten?",
+  "Delete chat": "Chat löschen",
+  "Are you sure you want to delete '{{title}}'? This action cannot be undone.": "Sind Sie sicher, dass Sie '{{title}}' löschen möchten? Diese Aktion kann nicht rückgängig gemacht werden.",
   "Comment created successfully": "Kommentar erfolgreich erstellt",
   "Error creating comment": "Fehler beim Erstellen des Kommentars",
   "Comment updated successfully": "Kommentar erfolgreich aktualisiert",
@@ -389,7 +391,7 @@
   "Write anything. Enter \"/\" for commands": "Schreiben Sie etwas. Geben Sie \"/\" für Befehle ein",
   "Write...": "\"Schreiben...\"",
   "Column count": "Spaltenanzahl",
-  "{{count}} Columns": "{count, plural, one {# Spalte} other {# Spalten}}",
+  "{{count}} Columns": "{{count}} Spalten",
   "Equal columns": "Gleich breite Spalten",
   "Left sidebar": "Linke Seitenleiste",
   "Right sidebar": "Rechte Seitenleiste",

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

@@ -71,6 +71,7 @@
   "Export": "Export",
   "Failed to create page": "Failed to create page",
   "Failed to delete page": "Failed to delete page",
+  "Failed to restore page": "Failed to restore page",
   "Failed to fetch recent pages": "Failed to fetch recent pages",
   "Failed to import pages": "Failed to import pages",
   "Failed to load page. An error occurred.": "Failed to load page. An error occurred.",
@@ -222,6 +223,8 @@
   "Edit comment": "Edit comment",
   "Delete comment": "Delete comment",
   "Are you sure you want to delete this comment?": "Are you sure you want to delete this comment?",
+  "Delete chat": "Delete chat",
+  "Are you sure you want to delete '{{title}}'? This action cannot be undone.": "Are you sure you want to delete '{{title}}'? This action cannot be undone.",
   "Comment created successfully": "Comment created successfully",
   "Error creating comment": "Error creating comment",
   "Comment updated successfully": "Comment updated successfully",
@@ -284,6 +287,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",
@@ -346,6 +362,8 @@
   "Create block quote.": "Create block quote.",
   "Insert code snippet.": "Insert code snippet.",
   "Insert horizontal rule divider": "Insert horizontal rule divider",
+  "Page break": "Page break",
+  "Insert a page break for printing.": "Insert a page break for printing.",
   "Upload any image from your device.": "Upload any image from your device.",
   "Upload any video from your device.": "Upload any video from your device.",
   "Upload any audio from your device.": "Upload any audio from your device.",
@@ -414,6 +432,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",
@@ -563,6 +582,8 @@
   "Move to trash": "Move to trash",
   "Move this page to trash?": "Move this page to trash?",
   "Restore page": "Restore page",
+  "Permanently delete": "Permanently delete",
+  "<b>{{name}}</b> moved this page to Trash {{time}}.": "<b>{{name}}</b> moved this page to Trash {{time}}.",
   "Page moved to trash": "Page moved to trash",
   "Page restored successfully": "Page restored successfully",
   "Deleted by": "Deleted by",
@@ -606,25 +627,21 @@
   "Image exceeds 10MB limit.": "Image exceeds 10MB limit.",
   "Image removed successfully": "Image removed successfully",
   "API key": "API key",
-  "API key created successfully": "API key created successfully",
   "API keys": "API keys",
   "API management": "API management",
-  "Are you sure you want to revoke this API key": "Are you sure you want to revoke this API key",
-  "Create API Key": "Create API Key",
   "Custom expiration date": "Custom expiration date",
   "Enter a descriptive token name": "Enter a descriptive token name",
   "Expiration": "Expiration",
   "Expired": "Expired",
   "Expires": "Expires",
-  "I've saved my API key": "I've saved my API key",
   "Last use": "Last Used",
   "No API keys found": "No API keys found",
   "No expiration": "No expiration",
-  "Revoke API key": "Revoke API key",
   "Revoked successfully": "Revoked successfully",
   "Select expiration date": "Select expiration date",
   "This action cannot be undone. Any applications using this API key will stop working.": "This action cannot be undone. Any applications using this API key will stop working.",
-  "Update API key": "Update API key",
+  "Update": "Update",
+  "Update {{credential}}": "Update {{credential}}",
   "Manage API keys for all users in the workspace": "Manage API keys for all users in the workspace",
   "Restrict API key creation to admins": "Restrict API key creation to admins",
   "Only admins and owners can create new API keys. Existing member keys will continue to work.": "Only admins and owners can create new API keys. Existing member keys will continue to work.",
@@ -871,6 +888,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",
@@ -878,5 +901,151 @@
   "Try a different search term.": "Try a different search term.",
   "Try again": "Try again",
   "Untitled chat": "Untitled chat",
-  "What can I help you with?": "What can I help you with?"
+  "What can I help you with?": "What can I help you with?",
+  "Are you sure you want to revoke this {{credential}}": "Are you sure you want to revoke this {{credential}}",
+  "Automatically provision users and groups from your identity provider via SCIM.": "Automatically provision users and groups from your identity provider via SCIM.",
+  "Configure your identity provider with this URL to provision users and groups.": "Configure your identity provider with this URL to provision users and groups.",
+  "Create {{credential}}": "Create {{credential}}",
+  "{{credential}} created": "{{credential}} created",
+  "{{credential}} created successfully": "{{credential}} created successfully",
+  "Created by": "Created by",
+  "Custom": "Custom",
+  "Enable SCIM": "Enable SCIM",
+  "Enter a descriptive name": "Enter a descriptive name",
+  "I've saved my {{credential}}": "I've saved my {{credential}}",
+  "Important": "Important",
+  "Make sure to copy your {{credential}} now. You won't be able to see it again!": "Make sure to copy your {{credential}} now. You won't be able to see it again!",
+  "Never": "Never",
+  "Revoke {{credential}}": "Revoke {{credential}}",
+  "SCIM endpoint URL": "SCIM endpoint URL",
+  "SCIM provisioning": "SCIM provisioning",
+  "SCIM takes precedence over SSO group sync while enabled.": "SCIM takes precedence over SSO group sync while enabled.",
+  "You have reached the maximum of {{max}} SCIM tokens. Delete an existing token to create a new one.": "You have reached the maximum of {{max}} SCIM tokens. Delete an existing token to create a new one.",
+  "SCIM token": "SCIM token",
+  "SCIM tokens": "SCIM tokens",
+  "This action cannot be undone. Your identity provider will stop syncing immediately.": "This action cannot be undone. Your identity provider will stop syncing immediately.",
+  "Toggle SCIM provisioning": "Toggle SCIM provisioning",
+  "Token": "Token",
+  "Page menu": "Page menu",
+  "Expand": "Expand",
+  "Collapse": "Collapse",
+  "Comment menu": "Comment menu",
+  "Group menu": "Group menu",
+  "Show hidden breadcrumbs": "Show hidden breadcrumbs",
+  "Breadcrumbs": "Breadcrumbs",
+  "Page actions": "Page actions",
+  "Pick emoji": "Pick emoji",
+  "Template menu": "Template menu",
+  "Use": "Use",
+  "Use template": "Use template",
+  "Preview template: {{title}}": "Preview template: {{title}}",
+  "Use a template": "Use a template",
+  "Search templates...": "Search templates...",
+  "Search spaces...": "Search spaces...",
+  "No templates found": "No templates found",
+  "No spaces found": "No spaces found",
+  "Browse all templates": "Browse all templates",
+  "This space": "This space",
+  "All templates": "All templates",
+  "Global": "Global",
+  "New template": "New template",
+  "Edit template": "Edit template",
+  "Are you sure you want to delete this template?": "Are you sure you want to delete this template?",
+  "Template scope updated": "Template scope updated",
+  "Choose which space this template belongs to": "Choose which space this template belongs to",
+  "Scope": "Scope",
+  "Select scope": "Select scope",
+  "Title": "Title",
+  "Saving...": "Saving...",
+  "Saved": "Saved",
+  "Save failed. Retry": "Save failed. Retry",
+  "By {{name}}": "By {{name}}",
+  "Updated {{time}}": "Updated {{time}}",
+  "Choose destination": "Choose destination",
+  "Search pages and spaces...": "Search pages and spaces...",
+  "No results found": "No results found",
+  "You don't have permission to create pages here": "You don't have permission to create pages here",
+  "Chat menu": "Chat menu",
+  "API key menu": "API key menu",
+  "Jump to comment selection": "Jump to comment selection",
+  "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"
 }

apps/client/public/locales/es-ES/translation.json

@@ -222,6 +222,8 @@
   "Edit comment": "Editar comentario",
   "Delete comment": "Eliminar comentario",
   "Are you sure you want to delete this comment?": "¿Está seguro de que desea eliminar este comentario?",
+  "Delete chat": "Eliminar chat",
+  "Are you sure you want to delete '{{title}}'? This action cannot be undone.": "¿Está seguro de que desea eliminar '{{title}}'? Esta acción no se puede deshacer.",
   "Comment created successfully": "Comentario creado con éxito",
   "Error creating comment": "Error al crear comentario",
   "Comment updated successfully": "Comentario actualizado con éxito",

apps/client/public/locales/fr-FR/translation.json

@@ -222,6 +222,8 @@
   "Edit comment": "Modifier le commentaire",
   "Delete comment": "Supprimer le commentaire",
   "Are you sure you want to delete this comment?": "Êtes-vous sûr de vouloir supprimer ce commentaire ?",
+  "Delete chat": "Supprimer la conversation",
+  "Are you sure you want to delete '{{title}}'? This action cannot be undone.": "Êtes-vous sûr de vouloir supprimer '{{title}}' ? Cette action est irréversible.",
   "Comment created successfully": "Commentaire créé avec succès",
   "Error creating comment": "Erreur lors de la création du commentaire",
   "Comment updated successfully": "Commentaire mis à jour avec succès",

apps/client/public/locales/it-IT/translation.json

@@ -222,6 +222,8 @@
   "Edit comment": "Modifica commento",
   "Delete comment": "Elimina commento",
   "Are you sure you want to delete this comment?": "Sei sicuro di voler eliminare questo commento?",
+  "Delete chat": "Elimina chat",
+  "Are you sure you want to delete '{{title}}'? This action cannot be undone.": "Sei sicuro di voler eliminare '{{title}}'? Questa azione non può essere annullata.",
   "Comment created successfully": "Commento creato con successo",
   "Error creating comment": "Si è verificato un errore durante la creazione del commento",
   "Comment updated successfully": "Commento aggiornato con successo",

apps/client/public/locales/ja-JP/translation.json

@@ -222,6 +222,8 @@
   "Edit comment": "コメントを編集する",
   "Delete comment": "コメントを削除する",
   "Are you sure you want to delete this comment?": "このコメントを削除してもよろしいですか?",
+  "Delete chat": "チャットを削除",
+  "Are you sure you want to delete '{{title}}'? This action cannot be undone.": "「{{title}}」を削除してもよろしいですか？この操作は元に戻せません。",
   "Comment created successfully": "コメントを作成しました",
   "Error creating comment": "コメントの作成に失敗しました",
   "Comment updated successfully": "コメントを更新しました",

apps/client/public/locales/ko-KR/translation.json

@@ -222,6 +222,8 @@
   "Edit comment": "댓글 수정",
   "Delete comment": "댓글 삭제",
   "Are you sure you want to delete this comment?": "이 댓글을 삭제하시겠습니까?",
+  "Delete chat": "채팅 삭제",
+  "Are you sure you want to delete '{{title}}'? This action cannot be undone.": "'{{title}}'을(를) 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.",
   "Comment created successfully": "댓글 생성 완료",
   "Error creating comment": "댓글 생성 오류",
   "Comment updated successfully": "댓글 업데이트 완료",

apps/client/public/locales/nl-NL/translation.json

@@ -222,6 +222,8 @@
   "Edit comment": "Bewerk reactie",
   "Delete comment": "Verwijder reactie",
   "Are you sure you want to delete this comment?": "Weet je zeker dat je deze reactie wilt verwijderen?",
+  "Delete chat": "Chat verwijderen",
+  "Are you sure you want to delete '{{title}}'? This action cannot be undone.": "Weet je zeker dat je '{{title}}' wilt verwijderen? Deze actie kan niet ongedaan worden gemaakt.",
   "Comment created successfully": "Reactie succesvol aangemaakt",
   "Error creating comment": "Fout bij het aanmaken van reactie",
   "Comment updated successfully": "Opmerking succesvol bijgewerkt",

apps/client/public/locales/pt-BR/translation.json

@@ -222,6 +222,8 @@
   "Edit comment": "Editar comentário",
   "Delete comment": "Excluir comentário",
   "Are you sure you want to delete this comment?": "Você tem certeza de que deseja excluir este comentário?",
+  "Delete chat": "Excluir chat",
+  "Are you sure you want to delete '{{title}}'? This action cannot be undone.": "Tem certeza de que deseja excluir '{{title}}'? Esta ação não pode ser desfeita.",
   "Comment created successfully": "Comentário criado com sucesso",
   "Error creating comment": "Erro ao criar comentário",
   "Comment updated successfully": "Comentário atualizado com sucesso",

apps/client/public/locales/ru-RU/translation.json

@@ -222,6 +222,8 @@
   "Edit comment": "Редактировать комментарий",
   "Delete comment": "Удалить комментарий",
   "Are you sure you want to delete this comment?": "Вы уверены, что хотите удалить этот комментарий?",
+  "Delete chat": "Удалить чат",
+  "Are you sure you want to delete '{{title}}'? This action cannot be undone.": "Вы уверены, что хотите удалить '{{title}}'? Это действие нельзя отменить.",
   "Comment created successfully": "Комментарий успешно создан",
   "Error creating comment": "Ошибка при создании комментария",
   "Comment updated successfully": "Комментарий успешно обновлён",

apps/client/public/locales/uk-UA/translation.json

@@ -222,6 +222,8 @@
   "Edit comment": "Редагувати коментар",
   "Delete comment": "Видалити коментар",
   "Are you sure you want to delete this comment?": "Ви впевнені, що хочете видалити цей коментар?",
+  "Delete chat": "Видалити чат",
+  "Are you sure you want to delete '{{title}}'? This action cannot be undone.": "Ви впевнені, що хочете видалити '{{title}}'? Цю дію неможливо скасувати.",
   "Comment created successfully": "Коментар успішно створено",
   "Error creating comment": "Помилка при створенні коментаря",
   "Comment updated successfully": "Коментар успішно оновлено",

apps/client/public/locales/zh-CN/translation.json

@@ -222,6 +222,8 @@
   "Edit comment": "编辑评论",
   "Delete comment": "删除评论",
   "Are you sure you want to delete this comment?": "你确定要删除这条评论吗？",
+  "Delete chat": "删除聊天",
+  "Are you sure you want to delete '{{title}}'? This action cannot be undone.": "您确定要删除「{{title}}」吗？此操作无法撤销。",
   "Comment created successfully": "成功创建评论",
   "Error creating comment": "创建评论时出错",
   "Comment updated successfully": "评论更新成功",

apps/client/src/App.tsx

@@ -26,6 +26,7 @@ import Security from "@/ee/security/pages/security.tsx";
 import License from "@/ee/licence/pages/license.tsx";
 import { useRedirectToCloudSelect } from "@/ee/hooks/use-redirect-to-cloud-select.tsx";
 import SharedPage from "@/pages/share/shared-page.tsx";
+import PdfRenderPage from "@/ee/pdf-export/pdf-render-page.tsx";
 import Shares from "@/pages/settings/shares/shares.tsx";
 import ShareLayout from "@/features/share/components/share-layout.tsx";
 import ShareRedirect from "@/pages/share/share-redirect.tsx";
@@ -44,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();
@@ -81,6 +83,7 @@ export default function App() {
           <Route path={"/share/p/:pageSlug"} element={<SharedPage />} />
         </Route>
 
+        <Route path={"/pdf-render/:pageId"} element={<PdfRenderPage />} />
         <Route path={"/share/:shareId"} element={<ShareRedirect />} />
         <Route path={"/p/:pageSlug"} element={<PageRedirect />} />
 
@@ -90,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"}

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

@@ -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,

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

@@ -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>

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

@@ -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}>

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

@@ -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)}

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

@@ -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>
   );
 }

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

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

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

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

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

@@ -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>
       )}

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

@@ -38,6 +38,16 @@
             color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
         }
     }
+
+    &[data-disabled] {
+        cursor: not-allowed;
+        opacity: 0.5;
+
+        @mixin hover {
+            background-color: transparent;
+            color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
+        }
+    }
 }
 
 .linkIcon {
@@ -50,7 +60,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;

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

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

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

@@ -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;

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

@@ -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({}),
+  });
+};

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

@@ -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>

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

@@ -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}
     />
   );

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

@@ -16,6 +16,8 @@ export function DestinationPickerModal({
   loading,
   excludePageId,
   pageLimit,
+  initialSpaceId,
+  searchSpacesOnly,
 }: DestinationPickerModalProps) {
   const { t } = useTranslation();
   const [selection, setSelection] = useState<DestinationSelection | null>(null);
@@ -46,6 +48,8 @@ export function DestinationPickerModal({
             onSelectionChange={setSelection}
             excludePageId={excludePageId}
             pageLimit={pageLimit}
+            initialSpaceId={initialSpaceId}
+            searchSpacesOnly={searchSpacesOnly}
           />
 
           <Group justify="flex-end" mt="md">

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

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

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

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

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

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

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

@@ -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>
       )}

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

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

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

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

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

@@ -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();
@@ -74,7 +122,11 @@ function EmojiPicker({
           c={actionIconProps?.c || "gray"}
           variant={actionIconProps?.variant || "transparent"}
           size={actionIconProps?.size}
+          tabIndex={actionIconProps?.tabIndex}
           onClick={handlers.toggle}
+          aria-label={t("Pick emoji")}
+          aria-haspopup="dialog"
+          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"

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

@@ -9,7 +9,7 @@ import classes from "../styles/chat-sidebar.module.css";
 type Props = {
   chat: AiChat;
   isActive: boolean;
-  onDelete: (chatId: string) => void;
+  onDelete: (chatId: string, title: string | null) => void;
   onRename: (chatId: string, title: string) => void;
 };
 
@@ -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>
@@ -153,7 +154,7 @@ export default function AiChatSidebarItem({
               onClick={(e) => {
                 e.preventDefault();
                 e.stopPropagation();
-                onDelete(chat.id);
+                onDelete(chat.id, chat.title);
               }}
             >
               {t("Delete")}

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

@@ -1,6 +1,14 @@
 import { useState, useCallback, useEffect, useMemo, useRef } from "react";
 import { Link, useNavigate, useParams } from "react-router-dom";
-import { ActionIcon, Center, TextInput, Loader, Tooltip } from "@mantine/core";
+import {
+  ActionIcon,
+  Center,
+  Text,
+  TextInput,
+  Loader,
+  Tooltip,
+} from "@mantine/core";
+import { modals } from "@mantine/modals";
 import { useDebouncedValue } from "@mantine/hooks";
 import { IconPlus, IconSearch, IconMessageCircle2 } from "@tabler/icons-react";
 import { useTranslation } from "react-i18next";
@@ -73,7 +81,20 @@ export default function AiChatSidebar() {
   );
 
   const handleDelete = useCallback(
-    (id: string) => {
+    (id: string, title: string | null) => {
+      modals.openConfirmModal({
+        title: t("Delete chat"),
+        centered: true,
+        children: (
+          <Text size="sm">
+            {t("Are you sure you want to delete '{{title}}'? This action cannot be undone.", {
+              title: title || t("Untitled"),
+            })}
+          </Text>
+        ),
+        labels: { confirm: t("Delete"), cancel: t("Cancel") },
+        confirmProps: { color: "red" },
+        onConfirm: () => {
           deleteMutation.mutate(id, {
             onSuccess: () => {
               if (chatId === id) {
@@ -82,7 +103,9 @@ export default function AiChatSidebar() {
             },
           });
         },
-    [deleteMutation, chatId, navigate],
+      });
+    },
+    [deleteMutation, chatId, navigate, t],
   );
 
   const handleRename = useCallback(
@@ -114,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}

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

@@ -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>

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

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

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

@@ -200,7 +200,7 @@ export default function ChatInput({
         link: false,
       }),
       Placeholder.configure({
-        placeholder: placeholder || "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)}
       />

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

@@ -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} />

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

@@ -98,7 +98,7 @@
   font-weight: 600;
   letter-spacing: 0.08em;
   text-transform: uppercase;
-  color: 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);

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

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

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

@@ -36,7 +36,7 @@
   padding: 4px var(--mantine-spacing-xs);
   font-size: var(--mantine-font-size-xs);
   font-weight: 600;
-  color: 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;
 }

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

@@ -31,7 +31,7 @@ export function ApiKeyCreatedModal({
     <Modal
       opened={opened}
       onClose={onClose}
-      title={t("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>

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

@@ -44,7 +44,7 @@ export function ApiKeyTable({
             <Table.Th>{t("Last used")}</Table.Th>
             <Table.Th>{t("Expires")}</Table.Th>
             <Table.Th>{t("Created")}</Table.Th>
-            <Table.Th></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>

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

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

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

@@ -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">

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

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

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

@@ -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),

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

@@ -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: [

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

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

apps/client/src/ee/features.ts

@@ -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',

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

@@ -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>
     </>
   );
 }

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

@@ -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>

apps/client/src/ee/pdf-export/pdf-render-page.tsx

@@ -0,0 +1,64 @@
+import "@/features/editor/styles/index.css";
+import { useEffect, useState } from "react";
+import { useParams, useSearchParams } from "react-router-dom";
+import ReadonlyPageEditor from "@/features/editor/readonly-page-editor";
+import { Container } from "@mantine/core";
+
+type PdfRenderData = {
+  pageId: string;
+  title: string;
+  content: any;
+};
+
+export default function PdfRenderPage() {
+  const { pageId } = useParams<{ pageId: string }>();
+  const [searchParams] = useSearchParams();
+  const token = searchParams.get("token");
+
+  const [data, setData] = useState<PdfRenderData | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!pageId || !token) {
+      setError("Missing page ID or token");
+      return;
+    }
+
+    fetch('/api/pdf-export/render', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ pageId, token }),
+    })
+      .then((res) => {
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        return res.json();
+      })
+      .then((result) => setData(result.data))
+      .catch((err) => setError(err.message));
+  }, [pageId, token]);
+
+  useEffect(() => {
+    if (data?.title) {
+      document.title = data.title;
+    }
+  }, [data?.title]);
+
+  if (error) {
+    return <div>{error}</div>;
+  }
+
+  if (!data) {
+    return null;
+  }
+
+  return (
+    <Container size={900} p={0}>
+      <ReadonlyPageEditor
+        key={data.pageId}
+        title={data.title}
+        content={data.content}
+        pageId={data.pageId}
+      />
+    </Container>
+  );
+}

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

@@ -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>
+  );
+}

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

@@ -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>
+  );
+}

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

@@ -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>
+  );
+}

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

@@ -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>
+  );
+}

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

@@ -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>
+  );
+}

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

@@ -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>
+  );
+}

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

@@ -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>
+  );
+}

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

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

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

@@ -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" });
+    },
+  });
+}

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

@@ -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);
+}

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

@@ -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;
+}

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

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

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

@@ -69,8 +69,8 @@ export default function SsoProviderList() {
   return (
     <>
       <Card shadow="sm" radius="sm">
-        <Table.ScrollContainer minWidth={600}>
+        <Table.ScrollContainer minWidth={600} maxHeight={400}>
-          <Table verticalSpacing="sm">
+          <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>

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

@@ -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 {
-import React from "react";
+  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 hasScim = useHasFeature(Feature.SCIM);
-  const hasSharingControls = useHasFeature(Feature.SHARING_CONTROLS);
+  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,101 @@ 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}
+                >
+                  <Button
+                    onClick={() => setCreateOpen(true)}
+                    disabled={(scimData?.items.length ?? 0) >= SCIM_TOKEN_LIMIT}
+                  >
+                    {t("Create {{credential}}", {
+                      credential: t("SCIM token"),
+                    })}
+                  </Button>
+                </Tooltip>
+              </Group>
+
+              <Card shadow="sm" radius="sm">
+                <ScimTokenTable
+                  tokens={scimData?.items}
+                  isLoading={scimLoading}
+                  onUpdate={setUpdateTarget}
+                  onRevoke={setRevokeTarget}
+                />
+              </Card>
+
+              <Space h="md" />
+
+              {scimData?.items.length > 0 && (
+                <Paginate
+                  hasPrevPage={scimData?.meta?.hasPrevPage}
+                  hasNextPage={scimData?.meta?.hasNextPage}
+                  onNext={() => goNext(scimData?.meta?.nextCursor)}
+                  onPrev={goPrev}
+                />
+              )}
+
+              <CreateScimTokenModal
+                opened={createOpen}
+                onClose={() => setCreateOpen(false)}
+                onSuccess={setCreatedToken}
+              />
+
+              <ScimTokenCreatedModal
+                opened={!!createdToken}
+                onClose={() => setCreatedToken(null)}
+                scimToken={createdToken}
+              />
+
+              <UpdateScimTokenModal
+                opened={!!updateTarget}
+                onClose={() => setUpdateTarget(null)}
+                scimToken={updateTarget}
+              />
+
+              <RevokeScimTokenModal
+                opened={!!revokeTarget}
+                onClose={() => setRevokeTarget(null)}
+                scimToken={revokeTarget}
+              />
+            </>
+          )}
+        </>
+      )}
     </>
   );
 }

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

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

apps/client/src/ee/template/components/template-card.module.css

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

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

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

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

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

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

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

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

@@ -9,6 +9,7 @@ type TemplatePreviewModalProps = {
   onClose: () => void;
   onUse: () => void;
   onEdit?: () => void;
+  useLoading?: boolean;
 };
 
 export default function TemplatePreviewModal({
@@ -17,6 +18,7 @@ export default function TemplatePreviewModal({
   onClose,
   onUse,
   onEdit,
+  useLoading,
 }: TemplatePreviewModalProps) {
   const { t } = useTranslation();
   const { data: template, isLoading } = useGetTemplateByIdQuery(templateId);
@@ -24,7 +26,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>
@@ -37,14 +39,19 @@ export default function TemplatePreviewModal({
             </Group>
           </Modal.Title>
           <Group gap="sm">
+            <Button
+              size="xs"
+              onClick={onUse}
+              loading={useLoading}
+              disabled={useLoading}
+            >
+              {t("Use template")}
+            </Button>
             {onEdit && (
               <Button size="xs" variant="default" onClick={onEdit}>
                 {t("Edit")}
               </Button>
             )}
-            <Button size="xs" onClick={onUse}>
-              {t("Use template")}
-            </Button>
             <Modal.CloseButton />
           </Group>
         </Modal.Header>

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

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

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

@@ -75,6 +75,18 @@ export default function TemplateEditor() {
   const editor = useEditor({
     extensions: templateExtensions,
     content: "",
+    editorProps: {
+      handleDOMEvents: {
+        keydown: (_view, event) => {
+          if (["ArrowUp", "ArrowDown", "Enter"].includes(event.key)) {
+            const slashCommand = document.querySelector("#slash-command");
+            if (slashCommand) {
+              return true;
+            }
+          }
+        },
+      },
+    },
     onUpdate() {
       if (loadedRef.current) {
         markDirty();

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

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

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

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

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

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

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

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

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

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

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

@@ -10,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();
 

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

@@ -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>

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

@@ -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>

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

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

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

@@ -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;

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

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

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

@@ -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>

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

@@ -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);

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

@@ -27,7 +27,7 @@ import { isCellSelection, isTextSelected } from "@docmost/editor-ext";
 import { LinkSelector } from "@/features/editor/components/bubble-menu/link-selector.tsx";
 import { useTranslation } from "react-i18next";
 import { showAiMenuAtom, showLinkMenuAtom } from "@/features/editor/atoms/editor-atoms";
-import { 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,6 +191,8 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
             <div className={classes.divider} />
           </>
         )}
+        {!editorToolbarEnabled && (
+          <>
             <NodeSelector
               editor={props.editor}
               isOpen={isNodeSelectorOpen}
@@ -238,6 +243,8 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
                 setIsTextAlignmentOpen(false);
               }}
             />
+          </>
+        )}
 
         <Tooltip label={t(commentItem.name)} withArrow withinPortal={false}>
           <ActionIcon

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

@@ -4,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,24 +235,24 @@ 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>
+      <Popover.Dropdown onMouseDown={(e) => e.preventDefault()}>
-        <ScrollArea.Autosize type="scroll" mah="400">
+        <Stack gap="md" p="2px">
-          <Stack gap="md">
             <Box>
               <Text size="sm" fw={600} mb="xs">
                 {t("Text color")}
               </Text>
               <SimpleGrid cols={5} spacing="xs">
-                {TEXT_COLORS.map(({ name, color }, index) => (
+                {TEXT_COLORS.map(({ name, color }, index) => {
-                  <Tooltip key={index} label={t(name)} withArrow>
+                  const applyTextColor = () => {
-                    <Box
-                      onClick={() => {
                     if (name === "Default") {
                       editor.commands.unsetColor();
                     } else {
@@ -200,6 +263,26 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
                         .run();
                     }
                     setIsOpen(false);
+                  };
+                  return (
+                  <Tooltip key={index} label={t(name)} withArrow>
+                    <Box
+                      role="button"
+                      tabIndex={0}
+                      data-autofocus={index === 0 ? true : undefined}
+                      data-color-grid="text"
+                      data-color-index={index}
+                      className={classes.colorSwatch}
+                      aria-label={t(name)}
+                      aria-pressed={!!editorState[`text_${color}`]}
+                      onClick={applyTextColor}
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter" || e.key === " ") {
+                          e.preventDefault();
+                          applyTextColor();
+                          return;
+                        }
+                        handleColorKeyNav(e, index, "text");
                       }}
                       style={{
                         width: rem(28),
@@ -221,7 +304,8 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
                       A
                     </Box>
                   </Tooltip>
-                ))}
+                  );
+                })}
               </SimpleGrid>
             </Box>
 
@@ -230,10 +314,8 @@ 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) => {
-                  <Tooltip key={index} label={t(name)} withArrow>
+                  const applyHighlight = () => {
-                    <Box
-                      onClick={() => {
                     if (name === "Default") {
                       editor.commands.unsetHighlight();
                     } else {
@@ -247,6 +329,25 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
                         .run();
                     }
                     setIsOpen(false);
+                  };
+                  return (
+                  <Tooltip key={index} label={t(name)} withArrow>
+                    <Box
+                      role="button"
+                      tabIndex={0}
+                      data-color-grid="highlight"
+                      data-color-index={index}
+                      className={classes.colorSwatch}
+                      aria-label={t(name)}
+                      aria-pressed={!!editorState[`highlight_${color}`]}
+                      onClick={applyHighlight}
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter" || e.key === " ") {
+                          e.preventDefault();
+                          applyHighlight();
+                          return;
+                        }
+                        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>
   );

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

@@ -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>

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

@@ -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>
+    <Menu
-      <Popover.Target>
+      shadow="md"
-        <Tooltip label={t("Text align")} withArrow withinPortal={false} disabled={isOpen}>
+      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>
+      <Menu.Dropdown>
-        <ScrollArea.Autosize type="scroll" mah={400}>
-          <Button.Group orientation="vertical">
         {items.map((item, index) => (
-              <Button
+          <Menu.Item
             key={index}
-                variant="default"
             leftSection={<item.icon size={16} />}
             rightSection={
-                  activeItem.name === item.name && <IconCheck size={16} />
+              activeItem.name === item.name ? <IconCheck size={16} /> : null
             }
-                justify="left"
-                fullWidth
             onClick={() => {
               item.command();
               setIsOpen(false);
             }}
-                style={{ border: "none" }}
           >
             {t(item.name)}
-              </Button>
+          </Menu.Item>
         ))}
-          </Button.Group>
+      </Menu.Dropdown>
-        </ScrollArea.Autosize>
+    </Menu>
-      </Popover.Dropdown>
-    </Popover>
   );
 };

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

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

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

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

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

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