fix

* fix: redirect to original page after re-authentication

When a session expires, the current URL is now preserved as a query
parameter on the login page. After successful login (including MFA
flows), the user is redirected back to their original page instead of
always landing on /home.

* secure

---------

Co-authored-by: Julien Fontanet <julien.fontanet@isonoe.net>

apps/client/package.json

@@ -1,7 +1,7 @@
 {
   "name": "client",
   "private": true,
-  "version": "0.25.0-beta.1",
+  "version": "0.25.3",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
@@ -14,18 +14,19 @@
     "@docmost/editor-ext": "workspace:*",
     "@emoji-mart/data": "^1.2.1",
     "@emoji-mart/react": "^1.1.1",
-    "@excalidraw/excalidraw": "0.18.0-c158187",
-    "@mantine/core": "^8.3.12",
-    "@mantine/dates": "^8.3.12",
-    "@mantine/form": "^8.3.12",
-    "@mantine/hooks": "^8.3.12",
-    "@mantine/modals": "^8.3.12",
-    "@mantine/notifications": "^8.3.12",
-    "@mantine/spotlight": "^8.3.12",
+    "@excalidraw/excalidraw": "0.18.0-3a5ef40",
+    "@mantine/core": "^8.3.14",
+    "@mantine/dates": "^8.3.14",
+    "@mantine/form": "^8.3.14",
+    "@mantine/hooks": "^8.3.14",
+    "@mantine/modals": "^8.3.14",
+    "@mantine/notifications": "^8.3.14",
+    "@mantine/spotlight": "^8.3.14",
     "@tabler/icons-react": "^3.36.1",
     "@tanstack/react-query": "^5.90.17",
     "alfaaz": "^1.1.0",
-    "axios": "^1.13.2",
+    "axios": "^1.13.5",
+    "blueimp-load-image": "^5.16.0",
     "clsx": "^2.1.1",
     "emoji-mart": "^5.6.0",
     "file-saver": "^2.0.5",
@@ -41,7 +42,7 @@
     "mantine-form-zod-resolver": "^1.3.0",
     "mermaid": "^11.12.2",
     "mitt": "^3.0.1",
-    "posthog-js": "^1.255.1",
+    "posthog-js": "1.345.5",
     "react": "^18.3.1",
     "react-arborist": "3.4.0",
     "react-clear-modal": "^2.0.17",
@@ -59,6 +60,7 @@
   "devDependencies": {
     "@eslint/js": "^9.16.0",
     "@tanstack/eslint-plugin-query": "^5.62.1",
+    "@types/blueimp-load-image": "^5.16.0",
     "@types/file-saver": "^2.0.7",
     "@types/js-cookie": "^3.0.6",
     "@types/katex": "^0.16.7",
@@ -66,7 +68,7 @@
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^5.1.1",
-    "eslint": "^9.15.0",
+    "eslint": "^9.39.2",
     "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-react-refresh": "^0.4.16",

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

@@ -41,7 +41,7 @@
   "Date": "Datum",
   "Delete": "Löschen",
   "Delete group": "Gruppe löschen",
-  "Are you sure you want to delete this page? This will delete its children and page history. This action is irreversible.": "Sind Sie sicher, dass Sie diese Seite löschen möchten? Dadurch werden ihre Unterseiten und die Seitengeschichte gelöscht. Diese Aktion ist unwiderruflich.",
+  "Are you sure you want to delete this page? This will delete its children and page history. This action is irreversible.": "Sind Sie sicher, dass Sie diese Seite löschen möchten? Dabei werden auch alle Unterseiten und der Seitenverlauf gelöscht. Diese Aktion kann nicht rückgängig gemacht werden.",
   "Description": "Beschreibung",
   "Details": "Details",
   "e.g ACME": "z.B. ACME",
@@ -66,7 +66,7 @@
   "Enter your new preferred email": "Geben Sie Ihre neue bevorzugte E-Mail ein",
   "Enter your password": "Geben Sie Ihr Passwort ein",
   "Error fetching page data.": "Fehler beim Abrufen der Seitendaten.",
-  "Error loading page history.": "Fehler beim Laden der Seitengeschichte.",
+  "Error loading page history.": "Fehler beim Laden des Seitenverlaufs.",
   "Export": "Exportieren",
   "Failed to create page": "Erstellung der Seite fehlgeschlagen",
   "Failed to delete page": "Löschen der Seite fehlgeschlagen",
@@ -114,7 +114,7 @@
   "New page": "Neue Seite",
   "New password": "Neues Passwort",
   "No group found": "Keine Gruppe gefunden",
-  "No page history saved yet.": "Es wurde noch keine Seitengeschichte gespeichert.",
+  "No page history saved yet.": "Es wurde noch kein Seitenverlauf gespeichert.",
   "No pages yet": "Noch keine Seiten",
   "No results found...": "Keine Ergebnisse gefunden...",
   "No user found": "Kein Benutzer gefunden",
@@ -122,7 +122,9 @@
   "Owner": "Besitzer",
   "page": "Seite",
   "Page deleted successfully": "Seite erfolgreich gelöscht",
-  "Page history": "Seitengeschichte",
+  "Page history": "Seitenverlauf",
+  "Select version": "Version auswählen",
+  "Highlight changes": "Änderungen hervorheben",
   "Page import is in progress. Please do not close this tab.": "Der Seitenimport läuft. Bitte schließen Sie diesen Tab nicht.",
   "Pages": "Seiten",
   "pages": "Seiten",
@@ -353,6 +355,11 @@
   "Insert current date": "Aktuelles Datum einfügen",
   "Draw and sketch excalidraw diagrams": "Excalidraw-Diagramme zeichnen und skizzieren",
   "Multiple": "Mehrere",
+  "Turn into": "In verwandeln",
+  "Text align": "Text ausrichten",
+  "This page may have been deleted, moved, or you may not have access.": "This page may have been deleted, moved, or you may not have access.",
+  "Go to homepage": "Go to homepage",
+  "Pages you create will show up here.": "Pages you create will show up here.",
   "Heading {{level}}": "Überschrift {{level}}",
   "Toggle title": "Titel umschalten",
   "Write anything. Enter \"/\" for commands": "Schreiben Sie irgendetwas. Geben Sie \"/\" für Befehle ein",
@@ -405,6 +412,21 @@
   "Share deleted successfully": "Freigabe erfolgreich gelöscht",
   "Share not found": "Freigabe nicht gefunden",
   "Failed to share page": "Fehler beim Teilen der Seite",
+  "Disable public sharing": "Öffentliches Teilen deaktivieren",
+  "Prevent members from sharing pages publicly.": "Verhindern Sie, dass Mitglieder Seiten öffentlich teilen.",
+  "Toggle public sharing": "Öffentliches Teilen umschalten",
+  "Toggle space public sharing": "Öffentliches Teilen im Bereich umschalten",
+  "Public sharing is disabled at the workspace level": "Öffentliches Teilen ist auf der Arbeitsbereichsebene deaktiviert",
+  "Prevent pages in this space from being shared publicly.": "Verhindern Sie, dass Seiten in diesem Bereich öffentlich geteilt werden.",
+  "Requires an enterprise license": "Erfordert eine Unternehmenslizenz",
+  "Enable public sharing": "Öffentliches Teilen aktivieren",
+  "Are you sure you want to enable public sharing? Members will be able to share pages publicly.": "Sind Sie sicher, dass Sie das öffentliche Teilen aktivieren möchten? Mitglieder können Seiten öffentlich teilen.",
+  "Are you sure you want to disable public sharing? All existing shared links in this workspace will be deleted.": "Sind Sie sicher, dass Sie das öffentliche Teilen deaktivieren möchten? Alle bestehenden Freigabelinks in diesem Arbeitsbereich werden gelöscht.",
+  "Are you sure you want to enable public sharing for this space?": "Sind Sie sicher, dass Sie das öffentliche Teilen für diesen Bereich aktivieren möchten?",
+  "Are you sure you want to disable public sharing? All existing shared links in this space will be deleted.": "Sind Sie sicher, dass Sie das öffentliche Teilen deaktivieren möchten? Alle bestehenden Freigabelinks in diesem Bereich werden gelöscht.",
+  "Public sharing is disabled": "Öffentliches Teilen ist deaktiviert",
+  "Public sharing has been disabled at the workspace level.": "Das öffentliche Teilen wurde auf der Arbeitsbereichsebene deaktiviert.",
+  "Public sharing has been disabled for this space.": "Das öffentliche Teilen wurde für diesen Bereich deaktiviert.",
   "Copy page": "Seite kopieren",
   "Copy page to a different space.": "Seite in einen anderen Bereich kopieren.",
   "Page copied successfully": "Seite erfolgreich kopiert",
@@ -565,13 +587,33 @@
   "Ask AI": "KI fragen",
   "AI is thinking...": "Die KI überlegt...",
   "Ask a question...": "Fragen stellen...",
-  "AI-powered search (Ask AI)": "KI-gestützte Suche (KI fragen)",
+  "AI Answers": "KI-Antworten",
+  "AI-powered search (AI Answers)": "KI-unterstützte Suche (KI-Antworten)",
   "AI search uses vector embeddings to provide semantic search capabilities across your workspace content.": "Die KI-Suche verwendet Vektor-Einbettungen, um semantische Suchfunktionen in Ihrem Arbeitsbereich bereitzustellen.",
   "Toggle AI search": "KI-Suche umschalten",
+  "Generative AI (Ask AI)": "Generative KI (KI fragen)",
+  "Enable AI-powered content generation in the editor. Allows users to generate, improve, translate and transform text.": "Aktivieren Sie die KI-unterstützte Inhaltserstellung im Editor. Ermöglicht Benutzern das Erzeugen, Verbessern, Übersetzen und Transformieren von Text.",
+  "Toggle generative AI": "Generative KI umschalten",
   "Sources": "Quellen",
-  "Ask AI not available for attachments": "KI fragen nicht für Anhänge verfügbar",
+  "AI Answers not available for attachments": "KI-Antworten sind für Anhänge nicht verfügbar",
   "No answer available": "Keine Antwort verfügbar",
   "Background color": "Hintergrundfarbe",
   "Highlight color": "Hervorhebungsfarbe",
-  "Remove color": "Farbe entfernen"
+  "Remove color": "Farbe entfernen",
+  "Notifications": "Benachrichtigungen",
+  "No notifications": "Keine Benachrichtigungen",
+  "No unread notifications": "Keine ungelesenen Benachrichtigungen",
+  "All notifications": "Alle Benachrichtigungen",
+  "Unread only": "Nur ungelesen",
+  "Mark all as read": "Alle als gelesen markieren",
+  "Mark as read": "Als gelesen markieren",
+  "More options": "Weitere Optionen",
+  "mentioned you in a comment": "hat Sie in einem Kommentar erwähnt",
+  "commented on a page": "hat auf einer Seite kommentiert",
+  "resolved a comment": "hat einen Kommentar gelöst",
+  "mentioned you on a page": "hat Sie auf einer Seite erwähnt",
+  "Today": "Heute",
+  "Yesterday": "Gestern",
+  "This week": "Diese Woche",
+  "Older": "Älter"
 }

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

@@ -123,10 +123,7 @@
   "page": "page",
   "Page deleted successfully": "Page deleted successfully",
   "Page history": "Page history",
-  "Version history for": "Version history for",
-  "document": "document",
   "Select version": "Select version",
-  "Close": "Close",
   "Highlight changes": "Highlight changes",
   "Page import is in progress. Please do not close this tab.": "Page import is in progress. Please do not close this tab.",
   "Pages": "Pages",
@@ -358,6 +355,11 @@
   "Insert current date": "Insert current date",
   "Draw and sketch excalidraw diagrams": "Draw and sketch excalidraw diagrams",
   "Multiple": "Multiple",
+  "Turn into": "Turn into",
+  "Text align": "Text align",
+  "This page may have been deleted, moved, or you may not have access.": "This page may have been deleted, moved, or you may not have access.",
+  "Go to homepage": "Go to homepage",
+  "Pages you create will show up here.": "Pages you create will show up here.",
   "Heading {{level}}": "Heading {{level}}",
   "Toggle title": "Toggle title",
   "Write anything. Enter \"/\" for commands": "Write anything. Enter \"/\" for commands",
@@ -410,6 +412,21 @@
   "Share deleted successfully": "Share deleted successfully",
   "Share not found": "Share not found",
   "Failed to share page": "Failed to share page",
+  "Disable public sharing": "Disable public sharing",
+  "Prevent members from sharing pages publicly.": "Prevent members from sharing pages publicly.",
+  "Toggle public sharing": "Toggle public sharing",
+  "Toggle space public sharing": "Toggle space public sharing",
+  "Public sharing is disabled at the workspace level": "Public sharing is disabled at the workspace level",
+  "Prevent pages in this space from being shared publicly.": "Prevent pages in this space from being shared publicly.",
+  "Requires an enterprise license": "Requires an enterprise license",
+  "Enable public sharing": "Enable public sharing",
+  "Are you sure you want to enable public sharing? Members will be able to share pages publicly.": "Are you sure you want to enable public sharing? Members will be able to share pages publicly.",
+  "Are you sure you want to disable public sharing? All existing shared links in this workspace will be deleted.": "Are you sure you want to disable public sharing? All existing shared links in this workspace will be deleted.",
+  "Are you sure you want to enable public sharing for this space?": "Are you sure you want to enable public sharing for this space?",
+  "Are you sure you want to disable public sharing? All existing shared links in this space will be deleted.": "Are you sure you want to disable public sharing? All existing shared links in this space will be deleted.",
+  "Public sharing is disabled": "Public sharing is disabled",
+  "Public sharing has been disabled at the workspace level.": "Public sharing has been disabled at the workspace level.",
+  "Public sharing has been disabled for this space.": "Public sharing has been disabled for this space.",
   "Copy page": "Copy page",
   "Copy page to a different space.": "Copy page to a different space.",
   "Page copied successfully": "Page copied successfully",
@@ -570,13 +587,33 @@
   "Ask AI": "Ask AI",
   "AI is thinking...": "AI is thinking...",
   "Ask a question...": "Ask a question...",
-  "AI-powered search (Ask AI)": "AI-powered search (Ask AI)",
+  "AI Answers": "AI Answers",
+  "AI-powered search (AI Answers)": "AI-powered search (AI Answers)",
   "AI search uses vector embeddings to provide semantic search capabilities across your workspace content.": "AI search uses vector embeddings to provide semantic search capabilities across your workspace content.",
   "Toggle AI search": "Toggle AI search",
+  "Generative AI (Ask AI)": "Generative AI (Ask AI)",
+  "Enable AI-powered content generation in the editor. Allows users to generate, improve, translate and transform text.": "Enable AI-powered content generation in the editor. Allows users to generate, improve, translate and transform text.",
+  "Toggle generative AI": "Toggle generative AI",
   "Sources": "Sources",
-  "Ask AI not available for attachments": "Ask AI not available for attachments",
+  "AI Answers not available for attachments": "AI Answers not available for attachments",
   "No answer available": "No answer available",
   "Background color": "Background color",
   "Highlight color": "Highlight color",
-  "Remove color": "Remove color"
+  "Remove color": "Remove color",
+  "Notifications": "Notifications",
+  "No notifications": "No notifications",
+  "No unread notifications": "No unread notifications",
+  "All notifications": "All notifications",
+  "Unread only": "Unread only",
+  "Mark all as read": "Mark all as read",
+  "Mark as read": "Mark as read",
+  "More options": "More options",
+  "mentioned you in a comment": "mentioned you in a comment",
+  "commented on a page": "commented on a page",
+  "resolved a comment": "resolved a comment",
+  "mentioned you on a page": "mentioned you on a page",
+  "Today": "Today",
+  "Yesterday": "Yesterday",
+  "This week": "This week",
+  "Older": "Older"
 }

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

@@ -123,6 +123,8 @@
   "page": "página",
   "Page deleted successfully": "Página eliminada con éxito",
   "Page history": "Historial de la página",
+  "Select version": "Seleccionar versión",
+  "Highlight changes": "Resaltar cambios",
   "Page import is in progress. Please do not close this tab.": "La importación de la página está en curso. Por favor, no cierre esta pestaña.",
   "Pages": "Páginas",
   "pages": "páginas",
@@ -353,6 +355,11 @@
   "Insert current date": "Insertar fecha actual",
   "Draw and sketch excalidraw diagrams": "Dibujar y esbozar diagramas de Excalidraw",
   "Multiple": "Múltiple",
+  "Turn into": "Convertir en",
+  "Text align": "Alineación del texto",
+  "This page may have been deleted, moved, or you may not have access.": "This page may have been deleted, moved, or you may not have access.",
+  "Go to homepage": "Go to homepage",
+  "Pages you create will show up here.": "Pages you create will show up here.",
   "Heading {{level}}": "Encabezado {{level}}",
   "Toggle title": "Alternar título",
   "Write anything. Enter \"/\" for commands": "Escribe cualquier cosa. Ingresa \"/\" para comandos",
@@ -405,6 +412,21 @@
   "Share deleted successfully": "Compartición eliminada con éxito",
   "Share not found": "Compartición no encontrada",
   "Failed to share page": "Error al compartir la página",
+  "Disable public sharing": "Desactivar el uso compartido público",
+  "Prevent members from sharing pages publicly.": "Evitar que los miembros compartan páginas públicamente.",
+  "Toggle public sharing": "Alternar el uso compartido público",
+  "Toggle space public sharing": "Alternar el uso compartido público del espacio",
+  "Public sharing is disabled at the workspace level": "El uso compartido público está desactivado a nivel de espacio de trabajo",
+  "Prevent pages in this space from being shared publicly.": "Evitar que las páginas en este espacio se compartan públicamente.",
+  "Requires an enterprise license": "Requiere una licencia empresarial",
+  "Enable public sharing": "Activar el uso compartido público",
+  "Are you sure you want to enable public sharing? Members will be able to share pages publicly.": "¿Está seguro de que desea activar el uso compartido público? Los miembros podrán compartir páginas públicamente.",
+  "Are you sure you want to disable public sharing? All existing shared links in this workspace will be deleted.": "¿Está seguro de que desea desactivar el uso compartido público? Todos los enlaces compartidos existentes en este espacio de trabajo se eliminarán.",
+  "Are you sure you want to enable public sharing for this space?": "¿Está seguro de que desea activar el uso compartido público para este espacio?",
+  "Are you sure you want to disable public sharing? All existing shared links in this space will be deleted.": "¿Está seguro de que desea desactivar el uso compartido público? Todos los enlaces compartidos existentes en este espacio se eliminarán.",
+  "Public sharing is disabled": "El uso compartido público está desactivado",
+  "Public sharing has been disabled at the workspace level.": "El uso compartido público se ha desactivado a nivel de espacio de trabajo.",
+  "Public sharing has been disabled for this space.": "El uso compartido público se ha desactivado para este espacio.",
   "Copy page": "Copiar página",
   "Copy page to a different space.": "Copiar página en otro espacio",
   "Page copied successfully": "Página copiada exitosamente",
@@ -565,13 +587,33 @@
   "Ask AI": "Preguntar a IA",
   "AI is thinking...": "IA está pensando...",
   "Ask a question...": "Haz una pregunta...",
-  "AI-powered search (Ask AI)": "Búsqueda impulsada por IA (Preguntar a IA)",
+  "AI Answers": "Respuestas de IA",
+  "AI-powered search (AI Answers)": "Búsqueda impulsada por IA (Respuestas de IA)",
   "AI search uses vector embeddings to provide semantic search capabilities across your workspace content.": "La búsqueda de IA utiliza incrustaciones vectoriales para proporcionar capacidades de búsqueda semántica en todo el contenido de su espacio de trabajo.",
   "Toggle AI search": "Alternar búsqueda de IA",
+  "Generative AI (Ask AI)": "IA generativa (Preguntar a la IA)",
+  "Enable AI-powered content generation in the editor. Allows users to generate, improve, translate and transform text.": "Habilitar la generación de contenido impulsada por IA en el editor. Permite a los usuarios generar, mejorar, traducir y transformar texto.",
+  "Toggle generative AI": "Activar IA generativa",
   "Sources": "Fuentes",
-  "Ask AI not available for attachments": "Preguntar a IA no está disponible para adjuntos",
+  "AI Answers not available for attachments": "Respuestas de IA no disponibles para archivos adjuntos",
   "No answer available": "No hay respuesta disponible",
   "Background color": "Color de fondo",
   "Highlight color": "Color de resaltado",
-  "Remove color": "Eliminar color"
+  "Remove color": "Eliminar color",
+  "Notifications": "Notificaciones",
+  "No notifications": "Sin notificaciones",
+  "No unread notifications": "No hay notificaciones no leídas",
+  "All notifications": "Todas las notificaciones",
+  "Unread only": "Solo no leídas",
+  "Mark all as read": "Marcar todo como leído",
+  "Mark as read": "Marcar como leído",
+  "More options": "Más opciones",
+  "mentioned you in a comment": "te mencionó en un comentario",
+  "commented on a page": "comentó en una página",
+  "resolved a comment": "resolvió un comentario",
+  "mentioned you on a page": "te mencionó en una página",
+  "Today": "Hoy",
+  "Yesterday": "Ayer",
+  "This week": "Esta semana",
+  "Older": "Más antiguo"
 }

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

@@ -123,6 +123,8 @@
   "page": "page",
   "Page deleted successfully": "Page supprimée avec succès",
   "Page history": "Historique de la page",
+  "Select version": "Sélectionner la version",
+  "Highlight changes": "Mettre en évidence les changements",
   "Page import is in progress. Please do not close this tab.": "L'importation de la page est en cours. Veuillez ne pas fermer cet onglet.",
   "Pages": "Pages",
   "pages": "pages",
@@ -353,6 +355,11 @@
   "Insert current date": "Insérer la date actuelle",
   "Draw and sketch excalidraw diagrams": "Dessiner et esquisser des diagrammes Excalidraw",
   "Multiple": "Multiple",
+  "Turn into": "Transformer en",
+  "Text align": "Alignement du texte",
+  "This page may have been deleted, moved, or you may not have access.": "This page may have been deleted, moved, or you may not have access.",
+  "Go to homepage": "Go to homepage",
+  "Pages you create will show up here.": "Pages you create will show up here.",
   "Heading {{level}}": "Titre {{level}}",
   "Toggle title": "Basculer le titre",
   "Write anything. Enter \"/\" for commands": "Écrivez n'importe quoi. Entrez \"/\" pour les commandes",
@@ -405,6 +412,21 @@
   "Share deleted successfully": "Partage supprimé avec succès",
   "Share not found": "Partage non trouvé",
   "Failed to share page": "Échec du partage de la page",
+  "Disable public sharing": "Désactiver le partage public",
+  "Prevent members from sharing pages publicly.": "Empêcher les membres de partager des pages publiquement.",
+  "Toggle public sharing": "Basculer le partage public",
+  "Toggle space public sharing": "Basculer le partage public de l'espace",
+  "Public sharing is disabled at the workspace level": "Le partage public est désactivé au niveau de l'espace de travail",
+  "Prevent pages in this space from being shared publicly.": "Empêcher les pages de cet espace d'être partagées publiquement.",
+  "Requires an enterprise license": "Nécessite une licence d'entreprise",
+  "Enable public sharing": "Activer le partage public",
+  "Are you sure you want to enable public sharing? Members will be able to share pages publicly.": "Êtes-vous sûr de vouloir activer le partage public ? Les membres pourront partager des pages publiquement.",
+  "Are you sure you want to disable public sharing? All existing shared links in this workspace will be deleted.": "Êtes-vous sûr de vouloir désactiver le partage public ? Tous les liens partagés existants dans cet espace de travail seront supprimés.",
+  "Are you sure you want to enable public sharing for this space?": "Êtes-vous sûr de vouloir activer le partage public pour cet espace ?",
+  "Are you sure you want to disable public sharing? All existing shared links in this space will be deleted.": "Êtes-vous sûr de vouloir désactiver le partage public ? Tous les liens partagés existants dans cet espace seront supprimés.",
+  "Public sharing is disabled": "Le partage public est désactivé",
+  "Public sharing has been disabled at the workspace level.": "Le partage public a été désactivé au niveau de l'espace de travail.",
+  "Public sharing has been disabled for this space.": "Le partage public a été désactivé pour cet espace.",
   "Copy page": "Copier la page",
   "Copy page to a different space.": "Copier la page dans un autre espace.",
   "Page copied successfully": "Page copiée avec succès",
@@ -565,13 +587,33 @@
   "Ask AI": "Demander à l'IA",
   "AI is thinking...": "L'IA réfléchit...",
   "Ask a question...": "Posez une question...",
-  "AI-powered search (Ask AI)": "Recherche assistée par l'IA (Demander à l'IA)",
+  "AI Answers": "Réponses IA",
+  "AI-powered search (AI Answers)": "Recherche propulsée par IA (Réponses IA)",
   "AI search uses vector embeddings to provide semantic search capabilities across your workspace content.": "La recherche IA utilise des incorporations vectorielles pour fournir des capacités de recherche sémantique à travers le contenu de votre espace de travail.",
   "Toggle AI search": "Basculer la recherche IA",
+  "Generative AI (Ask AI)": "IA générative (Demandez à l'IA)",
+  "Enable AI-powered content generation in the editor. Allows users to generate, improve, translate and transform text.": "Activer la génération de contenu assistée par IA dans l'éditeur. Permet aux utilisateurs de générer, améliorer, traduire et transformer du texte.",
+  "Toggle generative AI": "Activer/désactiver l'IA générative",
   "Sources": "Sources",
-  "Ask AI not available for attachments": "Demande à l'IA non disponible pour les pièces jointes",
+  "AI Answers not available for attachments": "Réponses IA non disponibles pour les pièces jointes",
   "No answer available": "Pas de réponse disponible",
   "Background color": "Couleur de fond",
   "Highlight color": "Couleur de surbrillance",
-  "Remove color": "Supprimer la couleur"
+  "Remove color": "Supprimer la couleur",
+  "Notifications": "Notifications",
+  "No notifications": "Aucune notification",
+  "No unread notifications": "Aucune notification non lue",
+  "All notifications": "Toutes les notifications",
+  "Unread only": "Non lues uniquement",
+  "Mark all as read": "Tout marquer comme lu",
+  "Mark as read": "Marquer comme lu",
+  "More options": "Plus d'options",
+  "mentioned you in a comment": "vous a mentionné dans un commentaire",
+  "commented on a page": "a commenté une page",
+  "resolved a comment": "a résolu un commentaire",
+  "mentioned you on a page": "vous a mentionné sur une page",
+  "Today": "Aujourd'hui",
+  "Yesterday": "Hier",
+  "This week": "Cette semaine",
+  "Older": "Plus ancien"
 }

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

@@ -123,6 +123,8 @@
   "page": "pagina",
   "Page deleted successfully": "Pagina eliminata con successo",
   "Page history": "Cronologia della pagina",
+  "Select version": "Seleziona versione",
+  "Highlight changes": "Evidenzia modifiche",
   "Page import is in progress. Please do not close this tab.": "L'importazione della pagina è in corso. Si prega di non chiudere questa scheda.",
   "Pages": "Pagine",
   "pages": "pagine",
@@ -353,6 +355,11 @@
   "Insert current date": "Inserisci la data corrente",
   "Draw and sketch excalidraw diagrams": "Disegna e schizza diagrammi excalidraw",
   "Multiple": "Multiplo",
+  "Turn into": "Trasforma in",
+  "Text align": "Allinea testo",
+  "This page may have been deleted, moved, or you may not have access.": "This page may have been deleted, moved, or you may not have access.",
+  "Go to homepage": "Go to homepage",
+  "Pages you create will show up here.": "Pages you create will show up here.",
   "Heading {{level}}": "Intestazione {{level}}",
   "Toggle title": "Attiva/disattiva titolo",
   "Write anything. Enter \"/\" for commands": "Scrivi qualcosa. Digita \"/\" per i comandi",
@@ -405,6 +412,21 @@
   "Share deleted successfully": "Condivisione eliminata con successo",
   "Share not found": "Condivisione non trovata",
   "Failed to share page": "Condivisione della pagina fallita",
+  "Disable public sharing": "Disabilita la condivisione pubblica",
+  "Prevent members from sharing pages publicly.": "Impedisci ai membri di condividere pubblicamente le pagine.",
+  "Toggle public sharing": "Attiva/disattiva la condivisione pubblica",
+  "Toggle space public sharing": "Attiva/disattiva la condivisione pubblica nello spazio",
+  "Public sharing is disabled at the workspace level": "La condivisione pubblica è disabilitata a livello di area di lavoro",
+  "Prevent pages in this space from being shared publicly.": "Impedisci che le pagine in questo spazio vengano condivise pubblicamente.",
+  "Requires an enterprise license": "Richiede una licenza enterprise",
+  "Enable public sharing": "Abilita la condivisione pubblica",
+  "Are you sure you want to enable public sharing? Members will be able to share pages publicly.": "Sei sicuro di voler abilitare la condivisione pubblica? I membri potranno condividere le pagine pubblicamente.",
+  "Are you sure you want to disable public sharing? All existing shared links in this workspace will be deleted.": "Sei sicuro di voler disabilitare la condivisione pubblica? Tutti i link condivisi esistenti in questa area di lavoro verranno eliminati.",
+  "Are you sure you want to enable public sharing for this space?": "Sei sicuro di voler abilitare la condivisione pubblica per questo spazio?",
+  "Are you sure you want to disable public sharing? All existing shared links in this space will be deleted.": "Sei sicuro di voler disabilitare la condivisione pubblica? Tutti i link condivisi esistenti in questo spazio verranno eliminati.",
+  "Public sharing is disabled": "La condivisione pubblica è disabilitata",
+  "Public sharing has been disabled at the workspace level.": "La condivisione pubblica è stata disabilitata a livello di area di lavoro.",
+  "Public sharing has been disabled for this space.": "La condivisione pubblica è stata disabilitata per questo spazio.",
   "Copy page": "Copia pagina",
   "Copy page to a different space.": "Copia pagina in un altro spazio.",
   "Page copied successfully": "Pagina copiata con successo",
@@ -565,13 +587,33 @@
   "Ask AI": "Chiedi all'AI",
   "AI is thinking...": "L'AI sta pensando...",
   "Ask a question...": "Fai una domanda...",
-  "AI-powered search (Ask AI)": "Ricerca potenziata dall'AI (Chiedi all'AI)",
+  "AI Answers": "Risposte AI",
+  "AI-powered search (AI Answers)": "Ricerca con AI (Risposte AI)",
   "AI search uses vector embeddings to provide semantic search capabilities across your workspace content.": "La ricerca AI utilizza embeddings vettoriali per fornire capacità di ricerca semantica nel contenuto della tua area di lavoro.",
   "Toggle AI search": "Attiva/disattiva ricerca AI",
+  "Generative AI (Ask AI)": "AI generativa (Chiedi AI)",
+  "Enable AI-powered content generation in the editor. Allows users to generate, improve, translate and transform text.": "Abilita la generazione di contenuti con AI nell'editor. Consente agli utenti di generare, migliorare, tradurre e trasformare il testo.",
+  "Toggle generative AI": "Attiva/Disattiva AI generativa",
   "Sources": "Fonti",
-  "Ask AI not available for attachments": "Chiedere all'AI non è disponibile per gli allegati",
+  "AI Answers not available for attachments": "Risposte AI non disponibili per gli allegati",
   "No answer available": "Nessuna risposta disponibile",
   "Background color": "Colore di sfondo",
   "Highlight color": "Colore evidenziato",
-  "Remove color": "Rimuovi colore"
+  "Remove color": "Rimuovi colore",
+  "Notifications": "Notifiche",
+  "No notifications": "Nessuna notifica",
+  "No unread notifications": "Nessuna notifica non letta",
+  "All notifications": "Tutte le notifiche",
+  "Unread only": "Solo non lette",
+  "Mark all as read": "Segna tutto come letto",
+  "Mark as read": "Segna come letto",
+  "More options": "Altre opzioni",
+  "mentioned you in a comment": "ti ha menzionato in un commento",
+  "commented on a page": "ha commentato una pagina",
+  "resolved a comment": "ha risolto un commento",
+  "mentioned you on a page": "ti ha menzionato in una pagina",
+  "Today": "Oggi",
+  "Yesterday": "Ieri",
+  "This week": "Questa settimana",
+  "Older": "Più vecchie"
 }

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

@@ -123,6 +123,8 @@
   "page": "ページ",
   "Page deleted successfully": "ページを削除しました",
   "Page history": "ページ履歴",
+  "Select version": "バージョンを選択",
+  "Highlight changes": "変更を強調表示",
   "Page import is in progress. Please do not close this tab.": "ページをインポート中です。このタブを閉じないでください",
   "Pages": "ページ",
   "pages": "ページ",
@@ -353,6 +355,11 @@
   "Insert current date": "現在の日付を挿入します",
   "Draw and sketch excalidraw diagrams": "Excalidraw 図を挿入します",
   "Multiple": "複数",
+  "Turn into": "変換する",
+  "Text align": "テキストの配置",
+  "This page may have been deleted, moved, or you may not have access.": "This page may have been deleted, moved, or you may not have access.",
+  "Go to homepage": "Go to homepage",
+  "Pages you create will show up here.": "Pages you create will show up here.",
   "Heading {{level}}": "見出し {{level}}",
   "Toggle title": "タイトルの表示/非表示を切り替える",
   "Write anything. Enter \"/\" for commands": "文字を入力するか、「/」でコマンドを呼び出します",
@@ -405,6 +412,21 @@
   "Share deleted successfully": "共有を削除しました",
   "Share not found": "共有が見つかりません",
   "Failed to share page": "ページの共有に失敗しました",
+  "Disable public sharing": "公開共有を無効にする",
+  "Prevent members from sharing pages publicly.": "メンバーがページを公開で共有するのを防ぐ。",
+  "Toggle public sharing": "公開共有を切り替える",
+  "Toggle space public sharing": "スペースの公開共有を切り替える",
+  "Public sharing is disabled at the workspace level": "ワークスペースレベルで公開共有が無効になっています",
+  "Prevent pages in this space from being shared publicly.": "このスペース内のページが公開で共有されるのを防ぐ。",
+  "Requires an enterprise license": "エンタープライズライセンスが必要です",
+  "Enable public sharing": "公開共有を有効にする",
+  "Are you sure you want to enable public sharing? Members will be able to share pages publicly.": "本当に公開共有を有効にしますか？メンバーはページを公開で共有できるようになります。",
+  "Are you sure you want to disable public sharing? All existing shared links in this workspace will be deleted.": "本当に公開共有を無効にしますか？このワークスペース内のすべての既存の共有リンクが削除されます。",
+  "Are you sure you want to enable public sharing for this space?": "本当にこのスペースの公開共有を有効にしますか？",
+  "Are you sure you want to disable public sharing? All existing shared links in this space will be deleted.": "本当に公開共有を無効にしますか？このスペースのすべての既存の共有リンクが削除されます。",
+  "Public sharing is disabled": "公開共有が無効になっています",
+  "Public sharing has been disabled at the workspace level.": "ワークスペースレベルで公開共有が無効になりました。",
+  "Public sharing has been disabled for this space.": "このスペースで公開共有が無効になりました。",
   "Copy page": "ページをコピー",
   "Copy page to a different space.": "ページを別のスペースにコピーします",
   "Page copied successfully": "ページをコピーしました",
@@ -565,13 +587,33 @@
   "Ask AI": "AIに質問する",
   "AI is thinking...": "AIが考え中...",
   "Ask a question...": "質問を入力...",
-  "AI-powered search (Ask AI)": "AIによる検索（AIに質問）",
+  "AI Answers": "AI回答",
+  "AI-powered search (AI Answers)": "AI搭載検索 (AI回答)",
   "AI search uses vector embeddings to provide semantic search capabilities across your workspace content.": "AI検索はベクター埋め込みを使用してワークスペース全体の意味検索を実現します",
   "Toggle AI search": "AI検索を切り替え",
+  "Generative AI (Ask AI)": "生成AI (Ask AI)",
+  "Enable AI-powered content generation in the editor. Allows users to generate, improve, translate and transform text.": "エディターでAIを活用したコンテンツ生成を有効にします。ユーザーがテキストの生成、改善、翻訳、および変換を行うことができます。",
+  "Toggle generative AI": "生成AIを切り替える",
   "Sources": "ソース",
-  "Ask AI not available for attachments": "添付ファイルにはAI質問は利用できません",
+  "AI Answers not available for attachments": "添付ファイルにはAI回答を利用できません",
   "No answer available": "回答がありません",
   "Background color": "背景色",
   "Highlight color": "ハイライト色",
-  "Remove color": "色を削除"
+  "Remove color": "色を削除",
+  "Notifications": "通知",
+  "No notifications": "通知なし",
+  "No unread notifications": "未読の通知はありません",
+  "All notifications": "すべての通知",
+  "Unread only": "未読のみ",
+  "Mark all as read": "すべてを既読にする",
+  "Mark as read": "既読にする",
+  "More options": "その他のオプション",
+  "mentioned you in a comment": "コメントであなたに言及しました",
+  "commented on a page": "ページにコメントしました",
+  "resolved a comment": "コメントを解決しました",
+  "mentioned you on a page": "ページ上であなたに言及しました",
+  "Today": "今日",
+  "Yesterday": "昨日",
+  "This week": "今週",
+  "Older": "以前のもの"
 }

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

@@ -123,6 +123,8 @@
   "page": "페이지",
   "Page deleted successfully": "페이지 삭제 완료",
   "Page history": "페이지 기록",
+  "Select version": "버전 선택",
+  "Highlight changes": "변경 사항 강조",
   "Page import is in progress. Please do not close this tab.": "페이지 가져오기가 진행 중입니다. 이 탭을 닫지 마세요.",
   "Pages": "페이지",
   "pages": "페이지",
@@ -353,6 +355,11 @@
   "Insert current date": "현재 날짜 삽입",
   "Draw and sketch excalidraw diagrams": "Excalidraw diagram 그리기 및 스케치",
   "Multiple": "복제",
+  "Turn into": "변경하기",
+  "Text align": "텍스트 정렬",
+  "This page may have been deleted, moved, or you may not have access.": "This page may have been deleted, moved, or you may not have access.",
+  "Go to homepage": "Go to homepage",
+  "Pages you create will show up here.": "Pages you create will show up here.",
   "Heading {{level}}": "제목 {{level}}",
   "Toggle title": "제목 토글",
   "Write anything. Enter \"/\" for commands": "아무거나 입력하세요. 명령어를 사용하려면 \"/\"를 입력하세요",
@@ -405,6 +412,21 @@
   "Share deleted successfully": "공유가 성공적으로 삭제되었습니다",
   "Share not found": "공유를 찾을 수 없습니다",
   "Failed to share page": "페이지 공유에 실패했습니다",
+  "Disable public sharing": "공유 비활성화",
+  "Prevent members from sharing pages publicly.": "멤버들이 페이지를 공개적으로 공유하지 못하도록 방지하십시오.",
+  "Toggle public sharing": "공유 전환",
+  "Toggle space public sharing": "공간 공유 전환",
+  "Public sharing is disabled at the workspace level": "워크스페이스 수준에서 공유가 비활성화되었습니다.",
+  "Prevent pages in this space from being shared publicly.": "이 공간의 페이지가 공개적으로 공유되지 않도록 방지하십시오.",
+  "Requires an enterprise license": "기업 라이센스가 필요합니다.",
+  "Enable public sharing": "공유 활성화",
+  "Are you sure you want to enable public sharing? Members will be able to share pages publicly.": "공유를 활성화하시겠습니까? 멤버들이 페이지를 공개적으로 공유할 수 있게 됩니다.",
+  "Are you sure you want to disable public sharing? All existing shared links in this workspace will be deleted.": "정말로 공유를 비활성화하시겠습니까? 이 워크스페이스의 모든 기존 공유 링크가 삭제됩니다.",
+  "Are you sure you want to enable public sharing for this space?": "이 공간의 공유를 활성화하시겠습니까?",
+  "Are you sure you want to disable public sharing? All existing shared links in this space will be deleted.": "정말로 공유를 비활성화하시겠습니까? 이 공간의 모든 기존 공유 링크가 삭제됩니다.",
+  "Public sharing is disabled": "공유가 비활성화되었습니다.",
+  "Public sharing has been disabled at the workspace level.": "워크스페이스 수준에서 공유가 비활성화되었습니다.",
+  "Public sharing has been disabled for this space.": "이 공간의 공유가 비활성화되었습니다.",
   "Copy page": "페이지 복사하기",
   "Copy page to a different space.": "다른 공간으로 페이지 복사하기.",
   "Page copied successfully": "페이지가 성공적으로 복사되었습니다",
@@ -565,13 +587,33 @@
   "Ask AI": "AI에게 묻기",
   "AI is thinking...": "AI가 생각 중입니다...",
   "Ask a question...": "질문하세요...",
-  "AI-powered search (Ask AI)": "AI 지원 검색 (AI에게 묻기)",
+  "AI Answers": "AI 답변",
+  "AI-powered search (AI Answers)": "AI 구동 검색 (AI 답변)",
   "AI search uses vector embeddings to provide semantic search capabilities across your workspace content.": "AI 검색은 벡터 임베딩을 사용하여 작업공간 콘텐츠에 대한 의미 검색 기능을 제공합니다.",
   "Toggle AI search": "AI 검색 전환",
+  "Generative AI (Ask AI)": "생성 AI (Ask AI)",
+  "Enable AI-powered content generation in the editor. Allows users to generate, improve, translate and transform text.": "편집기에서 AI 구동 콘텐츠 생성을 활성화합니다. 사용자가 텍스트를 생성, 개선, 번역 및 변환할 수 있습니다.",
+  "Toggle generative AI": "생성 AI 토글",
   "Sources": "출처",
-  "Ask AI not available for attachments": "AI에게 묻기 기능은 첨부 파일에 대해 사용할 수 없습니다",
+  "AI Answers not available for attachments": "첨부 파일에 대해 AI 답변을 사용할 수 없습니다",
   "No answer available": "답변을 제공할 수 없습니다",
   "Background color": "배경 색",
   "Highlight color": "강조 색",
-  "Remove color": "색 제거"
+  "Remove color": "색 제거",
+  "Notifications": "알림",
+  "No notifications": "알림 없음",
+  "No unread notifications": "읽지 않은 알림 없음",
+  "All notifications": "모든 알림",
+  "Unread only": "읽지 않음만",
+  "Mark all as read": "모두 읽음으로 표시",
+  "Mark as read": "읽음으로 표시",
+  "More options": "추가 옵션",
+  "mentioned you in a comment": "댓글에서 당신을 언급했습니다",
+  "commented on a page": "페이지에 댓글을 달았습니다",
+  "resolved a comment": "댓글을 해결했습니다",
+  "mentioned you on a page": "페이지에서 당신을 언급했습니다",
+  "Today": "오늘",
+  "Yesterday": "어제",
+  "This week": "이번 주",
+  "Older": "이전"
 }

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

@@ -123,6 +123,8 @@
   "page": "pagina",
   "Page deleted successfully": "Pagina succesvol verwijderd",
   "Page history": "Pagina geschiedenis",
+  "Select version": "Selecteer versie",
+  "Highlight changes": "Wijzigingen markeren",
   "Page import is in progress. Please do not close this tab.": "Importeren van pagina's is bezig. Sluit dit tabblad niet.",
   "Pages": "Pagina's",
   "pages": "pagina's",
@@ -353,6 +355,11 @@
   "Insert current date": "Huidige datum invoeren",
   "Draw and sketch excalidraw diagrams": "Teken en schets excalidraw diagrammen",
   "Multiple": "Meerdere",
+  "Turn into": "Omzetten naar",
+  "Text align": "Tekstuitlijning",
+  "This page may have been deleted, moved, or you may not have access.": "This page may have been deleted, moved, or you may not have access.",
+  "Go to homepage": "Go to homepage",
+  "Pages you create will show up here.": "Pages you create will show up here.",
   "Heading {{level}}": "Kop {{level}}",
   "Toggle title": "Schakel titel in/uit",
   "Write anything. Enter \"/\" for commands": "Schrijf iets. Voer \"/\" in voor commando's",
@@ -405,6 +412,21 @@
   "Share deleted successfully": "Delen succesvol verwijderd",
   "Share not found": "Delen niet gevonden",
   "Failed to share page": "Pagina delen mislukt",
+  "Disable public sharing": "Openbaar delen uitschakelen",
+  "Prevent members from sharing pages publicly.": "Voorkom dat leden pagina's openbaar delen.",
+  "Toggle public sharing": "Wissel openbaar delen",
+  "Toggle space public sharing": "Wissel openbaar delen van ruimte",
+  "Public sharing is disabled at the workspace level": "Openbaar delen is uitgeschakeld op werkruimteniveau",
+  "Prevent pages in this space from being shared publicly.": "Voorkom dat pagina's in deze ruimte openbaar worden gedeeld.",
+  "Requires an enterprise license": "Vereist een bedrijfslicentie",
+  "Enable public sharing": "Openbaar delen inschakelen",
+  "Are you sure you want to enable public sharing? Members will be able to share pages publicly.": "Weet je zeker dat je openbaar delen wilt inschakelen? Leden kunnen pagina's openbaar delen.",
+  "Are you sure you want to disable public sharing? All existing shared links in this workspace will be deleted.": "Weet je zeker dat je openbaar delen wilt uitschakelen? Alle bestaande gedeelde links in deze werkruimte zullen worden verwijderd.",
+  "Are you sure you want to enable public sharing for this space?": "Weet je zeker dat je openbaar delen voor deze ruimte wilt inschakelen?",
+  "Are you sure you want to disable public sharing? All existing shared links in this space will be deleted.": "Weet je zeker dat je openbaar delen wilt uitschakelen? Alle bestaande gedeelde links in deze ruimte zullen worden verwijderd.",
+  "Public sharing is disabled": "Openbaar delen is uitgeschakeld",
+  "Public sharing has been disabled at the workspace level.": "Openbaar delen is uitgeschakeld op werkruimteniveau.",
+  "Public sharing has been disabled for this space.": "Openbaar delen is uitgeschakeld voor deze ruimte.",
   "Copy page": "Pagina kopiëren",
   "Copy page to a different space.": "Kopieer pagina naar een andere ruimte.",
   "Page copied successfully": "Pagina succesvol gekopieerd",
@@ -565,13 +587,33 @@
   "Ask AI": "Vraag AI",
   "AI is thinking...": "AI is aan het nadenken...",
   "Ask a question...": "Stel een vraag...",
-  "AI-powered search (Ask AI)": "AI-ondersteunde zoekopdracht (Vraag AI)",
+  "AI Answers": "AI Antwoorden",
+  "AI-powered search (AI Answers)": "AI-gestuurde zoekopdracht (AI Antwoorden)",
   "AI search uses vector embeddings to provide semantic search capabilities across your workspace content.": "AI-zoekopdracht maakt gebruik van vectorembeddings om semantische zoekmogelijkheden te bieden in uw werkruimte-inhoud.",
   "Toggle AI search": "Schakel AI-zoekopdracht in/uit",
+  "Generative AI (Ask AI)": "Generatieve AI (Vraag het AI)",
+  "Enable AI-powered content generation in the editor. Allows users to generate, improve, translate and transform text.": "Schakel AI-gestuurde inhoudsgeneratie in de editor in. Hiermee kunnen gebruikers tekst genereren, verbeteren, vertalen en transformeren.",
+  "Toggle generative AI": "Generatieve AI schakelen",
   "Sources": "Bronnen",
-  "Ask AI not available for attachments": "Vraag AI is niet beschikbaar voor bijlages",
+  "AI Answers not available for attachments": "AI Antwoorden niet beschikbaar voor bijlagen",
   "No answer available": "Geen antwoord beschikbaar",
   "Background color": "Achtergrondkleur",
   "Highlight color": "Markeerkleur",
-  "Remove color": "Kleur verwijderen"
+  "Remove color": "Kleur verwijderen",
+  "Notifications": "Meldingen",
+  "No notifications": "Geen meldingen",
+  "No unread notifications": "Geen ongelezen meldingen",
+  "All notifications": "Alle meldingen",
+  "Unread only": "Alleen ongelezen",
+  "Mark all as read": "Markeer alles als gelezen",
+  "Mark as read": "Markeer als gelezen",
+  "More options": "Meer opties",
+  "mentioned you in a comment": "noemde je in een reactie",
+  "commented on a page": "reageerde op een pagina",
+  "resolved a comment": "heeft een opmerking opgelost",
+  "mentioned you on a page": "noemde je op een pagina",
+  "Today": "Vandaag",
+  "Yesterday": "Gisteren",
+  "This week": "Deze week",
+  "Older": "Ouder"
 }

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

@@ -123,6 +123,8 @@
   "page": "página",
   "Page deleted successfully": "Página excluída com sucesso",
   "Page history": "Histórico da página",
+  "Select version": "Selecionar versão",
+  "Highlight changes": "Destacar alterações",
   "Page import is in progress. Please do not close this tab.": "A importação da página está em andamento. Por favor, não feche esta aba.",
   "Pages": "Páginas",
   "pages": "páginas",
@@ -353,6 +355,11 @@
   "Insert current date": "Insira a data atual",
   "Draw and sketch excalidraw diagrams": "Desenhe e esboce diagramas Excalidraw",
   "Multiple": "Múltiplo",
+  "Turn into": "Transformar em",
+  "Text align": "Alinhar texto",
+  "This page may have been deleted, moved, or you may not have access.": "This page may have been deleted, moved, or you may not have access.",
+  "Go to homepage": "Go to homepage",
+  "Pages you create will show up here.": "Pages you create will show up here.",
   "Heading {{level}}": "Título {{level}}",
   "Toggle title": "Alternar título",
   "Write anything. Enter \"/\" for commands": "Escreva qualquer coisa. Digite \"/\" para comandos",
@@ -405,6 +412,21 @@
   "Share deleted successfully": "Compartilhamento excluído com sucesso",
   "Share not found": "Compartilhamento não encontrado",
   "Failed to share page": "Falha ao compartilhar página",
+  "Disable public sharing": "Desativar compartilhamento público",
+  "Prevent members from sharing pages publicly.": "Impedir que os membros compartilhem páginas publicamente.",
+  "Toggle public sharing": "Alternar compartilhamento público",
+  "Toggle space public sharing": "Alternar compartilhamento público do espaço",
+  "Public sharing is disabled at the workspace level": "O compartilhamento público está desativado no nível do espaço de trabalho",
+  "Prevent pages in this space from being shared publicly.": "Impedir que as páginas neste espaço sejam compartilhadas publicamente.",
+  "Requires an enterprise license": "Requer uma licença empresarial",
+  "Enable public sharing": "Ativar compartilhamento público",
+  "Are you sure you want to enable public sharing? Members will be able to share pages publicly.": "Tem certeza de que deseja ativar o compartilhamento público? Os membros poderão compartilhar páginas publicamente.",
+  "Are you sure you want to disable public sharing? All existing shared links in this workspace will be deleted.": "Tem certeza de que deseja desativar o compartilhamento público? Todos os links compartilhados existentes neste espaço de trabalho serão excluídos.",
+  "Are you sure you want to enable public sharing for this space?": "Tem certeza de que deseja ativar o compartilhamento público para este espaço?",
+  "Are you sure you want to disable public sharing? All existing shared links in this space will be deleted.": "Tem certeza de que deseja desativar o compartilhamento público? Todos os links compartilhados existentes neste espaço serão excluídos.",
+  "Public sharing is disabled": "Compartilhamento público está desativado",
+  "Public sharing has been disabled at the workspace level.": "O compartilhamento público foi desativado no nível do espaço de trabalho.",
+  "Public sharing has been disabled for this space.": "O compartilhamento público foi desativado para este espaço.",
   "Copy page": "Copiar página",
   "Copy page to a different space.": "Copiar página para um espaço diferente.",
   "Page copied successfully": "Página copiada com sucesso",
@@ -565,13 +587,33 @@
   "Ask AI": "Pergunte à IA",
   "AI is thinking...": "IA está pensando...",
   "Ask a question...": "Faça uma pergunta...",
-  "AI-powered search (Ask AI)": "Pesquisa com IA (Pergunte à IA)",
+  "AI Answers": "Respostas de IA",
+  "AI-powered search (AI Answers)": "Pesquisa com IA (Respostas de IA)",
   "AI search uses vector embeddings to provide semantic search capabilities across your workspace content.": "A pesquisa IA usa vetores de incorporação para fornecer capacidades de pesquisa semântica em todo o conteúdo do seu espaço de trabalho.",
   "Toggle AI search": "Alternar pesquisa de IA",
+  "Generative AI (Ask AI)": "IA generativa (Perguntar à IA)",
+  "Enable AI-powered content generation in the editor. Allows users to generate, improve, translate and transform text.": "Habilitar geração de conteúdo com IA no editor. Permite aos usuários gerar, melhorar, traduzir e transformar texto.",
+  "Toggle generative AI": "Alternar IA generativa",
   "Sources": "Fontes",
-  "Ask AI not available for attachments": "Perguntar à IA não está disponível para anexos",
+  "AI Answers not available for attachments": "Respostas de IA não disponíveis para anexos",
   "No answer available": "Nenhuma resposta disponível",
   "Background color": "Cor de fundo",
   "Highlight color": "Cor de destaque",
-  "Remove color": "Remover cor"
+  "Remove color": "Remover cor",
+  "Notifications": "Notificações",
+  "No notifications": "Sem notificações",
+  "No unread notifications": "Sem notificações não lidas",
+  "All notifications": "Todas as notificações",
+  "Unread only": "Somente não lidas",
+  "Mark all as read": "Marcar todas como lidas",
+  "Mark as read": "Marcar como lida",
+  "More options": "Mais opções",
+  "mentioned you in a comment": "mencionou você em um comentário",
+  "commented on a page": "comentou em uma página",
+  "resolved a comment": "resolveu um comentário",
+  "mentioned you on a page": "mencionou você em uma página",
+  "Today": "Hoje",
+  "Yesterday": "Ontem",
+  "This week": "Esta semana",
+  "Older": "Mais antigo"
 }

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

@@ -123,6 +123,8 @@
   "page": "страница",
   "Page deleted successfully": "Страница успешно удалена",
   "Page history": "История страницы",
+  "Select version": "Выбрать версию",
+  "Highlight changes": "Выделить изменения",
   "Page import is in progress. Please do not close this tab.": "Импорт страницы в процессе. Пожалуйста, не закрывайте эту вкладку.",
   "Pages": "Страницы",
   "pages": "страницы",
@@ -353,6 +355,11 @@
   "Insert current date": "Вставить текущую дату",
   "Draw and sketch excalidraw diagrams": "Вставить и рисовать диаграммы Excalidraw",
   "Multiple": "Несколько",
+  "Turn into": "Преобразовать в",
+  "Text align": "Выравнивание текста",
+  "This page may have been deleted, moved, or you may not have access.": "This page may have been deleted, moved, or you may not have access.",
+  "Go to homepage": "Go to homepage",
+  "Pages you create will show up here.": "Pages you create will show up here.",
   "Heading {{level}}": "Заголовок {{level}}",
   "Toggle title": "Переключить заголовок",
   "Write anything. Enter \"/\" for commands": "Начните писать. Введите \"/\" для списка команд",
@@ -405,6 +412,21 @@
   "Share deleted successfully": "Общий доступ успешно удален",
   "Share not found": "Общий доступ не найден",
   "Failed to share page": "Не удалось поделиться страницей",
+  "Disable public sharing": "Отключить общий доступ",
+  "Prevent members from sharing pages publicly.": "Запретить участникам делиться страницами публично.",
+  "Toggle public sharing": "Переключить общий доступ",
+  "Toggle space public sharing": "Переключить общий доступ для пространства",
+  "Public sharing is disabled at the workspace level": "Общий доступ отключен на уровне рабочего пространства",
+  "Prevent pages in this space from being shared publicly.": "Запретить делиться страницами в этом пространстве публично.",
+  "Requires an enterprise license": "Требуется корпоративная лицензия",
+  "Enable public sharing": "Включить общий доступ",
+  "Are you sure you want to enable public sharing? Members will be able to share pages publicly.": "Вы уверены, что хотите включить общий доступ? Участники смогут делиться страницами публично.",
+  "Are you sure you want to disable public sharing? All existing shared links in this workspace will be deleted.": "Вы уверены, что хотите отключить общий доступ? Все существующие ссылки в этом рабочем пространстве будут удалены.",
+  "Are you sure you want to enable public sharing for this space?": "Вы уверены, что хотите включить общий доступ для этого пространства?",
+  "Are you sure you want to disable public sharing? All existing shared links in this space will be deleted.": "Вы уверены, что хотите отключить общий доступ? Все существующие ссылки в этом пространстве будут удалены.",
+  "Public sharing is disabled": "Общий доступ отключен",
+  "Public sharing has been disabled at the workspace level.": "Общий доступ был отключен на уровне рабочего пространства.",
+  "Public sharing has been disabled for this space.": "Общий доступ был отключен для этого пространства.",
   "Copy page": "Копировать страницу",
   "Copy page to a different space.": "Копировать страницу в другое пространство.",
   "Page copied successfully": "Страница успешно скопирована",
@@ -565,13 +587,33 @@
   "Ask AI": "Спросить ИИ",
   "AI is thinking...": "ИИ обрабатывает запрос...",
   "Ask a question...": "Задайте вопрос...",
-  "AI-powered search (Ask AI)": "Поиск на базе ИИ (Спросить ИИ)",
+  "AI Answers": "Ответы ИИ",
+  "AI-powered search (AI Answers)": "Поиск на базе ИИ (Ответы ИИ)",
   "AI search uses vector embeddings to provide semantic search capabilities across your workspace content.": "Поиск ИИ использует векторные встраивания для обеспечения семантического поиска по содержимому вашего рабочего пространства.",
   "Toggle AI search": "Переключить поиск ИИ",
+  "Generative AI (Ask AI)": "Генеративный ИИ (Спросить ИИ)",
+  "Enable AI-powered content generation in the editor. Allows users to generate, improve, translate and transform text.": "Включите создание контента на базе ИИ в редакторе. Позволяет пользователям генерировать, улучшать, переводить и преобразовывать текст.",
+  "Toggle generative AI": "Переключить генеративный ИИ",
   "Sources": "Источники",
-  "Ask AI not available for attachments": "Функция \"Спросить ИИ\" недоступна для вложений",
+  "AI Answers not available for attachments": "Ответы ИИ недоступны для вложений",
   "No answer available": "Ответ недоступен",
   "Background color": "Цвет фона",
   "Highlight color": "Цвет выделения",
-  "Remove color": "Удалить цвет"
+  "Remove color": "Удалить цвет",
+  "Notifications": "Уведомления",
+  "No notifications": "Нет уведомлений",
+  "No unread notifications": "Нет непрочитанных уведомлений",
+  "All notifications": "Все уведомления",
+  "Unread only": "Только непрочитанные",
+  "Mark all as read": "Отметить все как прочитанные",
+  "Mark as read": "Отметить как прочитанное",
+  "More options": "Больше возможностей",
+  "mentioned you in a comment": "упомянул вас в комментарии",
+  "commented on a page": "прокомментировал на странице",
+  "resolved a comment": "разрешил комментарий",
+  "mentioned you on a page": "упомянул вас на странице",
+  "Today": "Сегодня",
+  "Yesterday": "Вчера",
+  "This week": "На этой неделе",
+  "Older": "Старше"
 }

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

@@ -123,6 +123,8 @@
   "page": "сторінка",
   "Page deleted successfully": "Сторінку успішно видалено",
   "Page history": "Історія сторінки",
+  "Select version": "Вибрати версію",
+  "Highlight changes": "Підсвітити зміни",
   "Page import is in progress. Please do not close this tab.": "Імпорт сторінки в процесі. Будь ласка, не закривайте цю вкладку.",
   "Pages": "Сторінки",
   "pages": "сторінки",
@@ -353,6 +355,11 @@
   "Insert current date": "Вставити поточну дату",
   "Draw and sketch excalidraw diagrams": "Вставити та малювати діаграми Excalidraw",
   "Multiple": "Декілька",
+  "Turn into": "Перетворити",
+  "Text align": "Вирівнювання тексту",
+  "This page may have been deleted, moved, or you may not have access.": "This page may have been deleted, moved, or you may not have access.",
+  "Go to homepage": "Go to homepage",
+  "Pages you create will show up here.": "Pages you create will show up here.",
   "Heading {{level}}": "Заголовок {{level}}",
   "Toggle title": "Перемкнути заголовок",
   "Write anything. Enter \"/\" for commands": "Почніть писати. Введіть \"/\" для списку команд",
@@ -405,6 +412,21 @@
   "Share deleted successfully": "Спільний доступ успішно видалено",
   "Share not found": "Спільний доступ не знайдено",
   "Failed to share page": "Не вдалося поділитися сторінкою",
+  "Disable public sharing": "Вимкнути публічний доступ",
+  "Prevent members from sharing pages publicly.": "Перешкодити учасникам публічно ділитися сторінками.",
+  "Toggle public sharing": "Перемикання публічного доступу",
+  "Toggle space public sharing": "Перемикання публічного доступу до просторів",
+  "Public sharing is disabled at the workspace level": "Публічний доступ вимкнуто на рівні робочого простору",
+  "Prevent pages in this space from being shared publicly.": "Перешкодити публічному поширенню сторінок у цьому просторі.",
+  "Requires an enterprise license": "Потребує корпоративної ліцензії",
+  "Enable public sharing": "Увімкнути публічний доступ",
+  "Are you sure you want to enable public sharing? Members will be able to share pages publicly.": "Ви впевнені, що хочете увімкнути публічний доступ? Учасники зможуть публічно ділитися сторінками.",
+  "Are you sure you want to disable public sharing? All existing shared links in this workspace will be deleted.": "Ви впевнені, що хочете вимкнути публічний доступ? Усі існуючі посилання для спільного доступу в цьому робочому просторі будуть видалені.",
+  "Are you sure you want to enable public sharing for this space?": "Ви впевнені, що хочете увімкнути публічний доступ для цього простору?",
+  "Are you sure you want to disable public sharing? All existing shared links in this space will be deleted.": "Ви впевнені, що хочете вимкнути публічний доступ? Усі існуючі посилання для спільного доступу в цьому просторі будуть видалені.",
+  "Public sharing is disabled": "Публічний доступ вимкнуто",
+  "Public sharing has been disabled at the workspace level.": "Публічний доступ було вимкнено на рівні робочого простору.",
+  "Public sharing has been disabled for this space.": "Публічний доступ було вимкнено для цього простору.",
   "Copy page": "Копіювати сторінки",
   "Copy page to a different space.": "Скопіювати сторінку в інший простір.",
   "Page copied successfully": "Сторінку успішно скопійовано",
@@ -565,13 +587,33 @@
   "Ask AI": "Запитати ШІ",
   "AI is thinking...": "ШІ думає...",
   "Ask a question...": "Задайте питання...",
-  "AI-powered search (Ask AI)": "Пошук на базі ШІ (Запитати ШІ)",
+  "AI Answers": "Відповіді ШІ",
+  "AI-powered search (AI Answers)": "Пошук на базі ШІ (Відповіді ШІ)",
   "AI search uses vector embeddings to provide semantic search capabilities across your workspace content.": "Пошук з ШІ використовує векторні вбудовування для надання можливостей семантичного пошуку у вашому робочому вмісті.",
   "Toggle AI search": "Переключити пошук з ШІ",
+  "Generative AI (Ask AI)": "Генеративний ШІ (Запитати ШІ)",
+  "Enable AI-powered content generation in the editor. Allows users to generate, improve, translate and transform text.": "Увімкнути генерацію контенту за допомогою ШІ в редакторі. Дозволяє користувачам генерувати, покращувати, перекладати та трансформувати текст.",
+  "Toggle generative AI": "Переключити генеративний ШІ",
   "Sources": "Джерела",
-  "Ask AI not available for attachments": "Запитати ШІ недоступно для вкладень",
+  "AI Answers not available for attachments": "Відповіді ШІ недоступні для вкладень",
   "No answer available": "Відповідь недоступна",
   "Background color": "Колір фону",
   "Highlight color": "Колір підсвічування",
-  "Remove color": "Видалити колір"
+  "Remove color": "Видалити колір",
+  "Notifications": "Сповіщення",
+  "No notifications": "Немає сповіщень",
+  "No unread notifications": "Немає непрочитаних сповіщень",
+  "All notifications": "Усі сповіщення",
+  "Unread only": "Тільки непрочитані",
+  "Mark all as read": "Позначити все як прочитане",
+  "Mark as read": "Позначити як прочитане",
+  "More options": "Більше опцій",
+  "mentioned you in a comment": "згадали вас у коментарі",
+  "commented on a page": "прокоментували на сторінці",
+  "resolved a comment": "вирішили коментар",
+  "mentioned you on a page": "згадали вас на сторінці",
+  "Today": "Сьогодні",
+  "Yesterday": "Вчора",
+  "This week": "Цього тижня",
+  "Older": "Старіші"
 }

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

@@ -123,6 +123,8 @@
   "page": "个页面",
   "Page deleted successfully": "页面已成功删除",
   "Page history": "页面历史",
+  "Select version": "选择版本",
+  "Highlight changes": "突出显示更改",
   "Page import is in progress. Please do not close this tab.": "页面导入正在进行中。请不要关闭此标签页。",
   "Pages": "页面",
   "pages": "个页面",
@@ -353,6 +355,11 @@
   "Insert current date": "插入当前日期",
   "Draw and sketch excalidraw diagrams": "绘制 Excalidraw 图表",
   "Multiple": "多个",
+  "Turn into": "变成",
+  "Text align": "文本对齐",
+  "This page may have been deleted, moved, or you may not have access.": "This page may have been deleted, moved, or you may not have access.",
+  "Go to homepage": "Go to homepage",
+  "Pages you create will show up here.": "Pages you create will show up here.",
   "Heading {{level}}": "{{level}} 级标题",
   "Toggle title": "切换标题",
   "Write anything. Enter \"/\" for commands": "开始编写内容，输入 \"/\" 以使用指令",
@@ -405,6 +412,21 @@
   "Share deleted successfully": "分享已成功删除",
   "Share not found": "未找到分享",
   "Failed to share page": "页面分享失败",
+  "Disable public sharing": "禁用公开分享",
+  "Prevent members from sharing pages publicly.": "阻止成员公开分享页面。",
+  "Toggle public sharing": "切换公开分享",
+  "Toggle space public sharing": "切换空间公开分享",
+  "Public sharing is disabled at the workspace level": "公开分享在工作区级别被禁用",
+  "Prevent pages in this space from being shared publicly.": "阻止此空间中的页面被公开分享。",
+  "Requires an enterprise license": "需要企业许可证",
+  "Enable public sharing": "启用公开分享",
+  "Are you sure you want to enable public sharing? Members will be able to share pages publicly.": "您确定要启用公开分享吗？成员将能够公开分享页面。",
+  "Are you sure you want to disable public sharing? All existing shared links in this workspace will be deleted.": "您确定要禁用公开分享吗？此工作区中的所有现有共享链接都将被删除。",
+  "Are you sure you want to enable public sharing for this space?": "您确定要为此空间启用公开分享吗？",
+  "Are you sure you want to disable public sharing? All existing shared links in this space will be deleted.": "您确定要禁用公开分享吗？此空间中的所有现有共享链接都将被删除。",
+  "Public sharing is disabled": "公开分享已被禁用",
+  "Public sharing has been disabled at the workspace level.": "公开分享已在工作区级别被禁用。",
+  "Public sharing has been disabled for this space.": "此空间的公开分享已被禁用。",
   "Copy page": "复制页面",
   "Copy page to a different space.": "将页面复制到不同的空间。",
   "Page copied successfully": "页面复制成功",
@@ -565,13 +587,33 @@
   "Ask AI": "询问AI",
   "AI is thinking...": "AI正在思考...",
   "Ask a question...": "提问...",
-  "AI-powered search (Ask AI)": "AI驱动的搜索（询问AI）",
+  "AI Answers": "AI答案",
+  "AI-powered search (AI Answers)": "AI驱动的搜索 (AI答案)",
   "AI search uses vector embeddings to provide semantic search capabilities across your workspace content.": "AI搜索使用向量嵌入提供跨工作空间内容的语义搜索功能。",
   "Toggle AI search": "切换AI搜索",
+  "Generative AI (Ask AI)": "生成型AI (询问AI)",
+  "Enable AI-powered content generation in the editor. Allows users to generate, improve, translate and transform text.": "在编辑器中启用AI驱动的内容生成。允许用户生成、改进、翻译和转换文本。",
+  "Toggle generative AI": "切换生成型AI",
   "Sources": "来源",
-  "Ask AI not available for attachments": "附件不支持询问AI",
+  "AI Answers not available for attachments": "AI答案不适用于附件",
   "No answer available": "无可用答案",
   "Background color": "背景颜色",
   "Highlight color": "突出显示颜色",
-  "Remove color": "移除颜色"
+  "Remove color": "移除颜色",
+  "Notifications": "通知",
+  "No notifications": "没有通知",
+  "No unread notifications": "没有未读通知",
+  "All notifications": "所有通知",
+  "Unread only": "仅未读",
+  "Mark all as read": "标记所有为已读",
+  "Mark as read": "标记为已读",
+  "More options": "更多选项",
+  "mentioned you in a comment": "在评论中提到你",
+  "commented on a page": "在页面上评论",
+  "resolved a comment": "解决了一个评论",
+  "mentioned you on a page": "在页面上提到你",
+  "Today": "今天",
+  "Yesterday": "昨天",
+  "This week": "本周",
+  "Older": "较早"
 }

apps/client/src/App.tsx

@@ -14,7 +14,6 @@ import AccountPreferences from "@/pages/settings/account/account-preferences.tsx
 import SpaceHome from "@/pages/space/space-home.tsx";
 import PageRedirect from "@/pages/page/page-redirect.tsx";
 import Layout from "@/components/layouts/global/layout.tsx";
-import { ErrorBoundary } from "react-error-boundary";
 import InviteSignup from "@/pages/auth/invite-signup.tsx";
 import ForgotPassword from "@/pages/auth/forgot-password.tsx";
 import PasswordReset from "./pages/auth/password-reset";
@@ -84,13 +83,7 @@ export default function App() {
           <Route path={"/s/:spaceSlug/trash"} element={<SpaceTrash />} />
           <Route
             path={"/s/:spaceSlug/p/:pageSlug"}
-            element={
-              <ErrorBoundary
-                fallback={<>{t("Failed to load page. An error occurred.")}</>}
-              >
-                <Page />
-              </ErrorBoundary>
-            }
+            element={<Page />}
           />
 
           <Route path={"/settings"}>

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

@@ -0,0 +1,33 @@
+// Source: https://github.com/mantinedev/mantine/blob/master/packages/@mantine/core/src/components/CopyButton/CopyButton.tsx - MIT
+// modified to use the polyfilled clipboard api
+import React from "react";
+import { useClipboard } from "@/hooks/use-clipboard";
+import { useProps } from "@mantine/core";
+
+interface CopyButtonProps {
+  /** Children callback, provides current status and copy function as an argument */
+  children: (payload: { copied: boolean; copy: () => void }) => React.ReactNode;
+
+  /** Value that is copied to the clipboard when the button is clicked */
+  value: string;
+
+  /** Copied status timeout in ms @default `1000` */
+  timeout?: number;
+}
+
+const defaultProps = {
+  timeout: 1000,
+} satisfies Partial<CopyButtonProps>;
+
+export function CopyButton(props: CopyButtonProps) {
+  const { children, timeout, value, ...others } = useProps(
+    "CopyButton",
+    defaultProps,
+    props,
+  );
+  const clipboard = useClipboard({ timeout });
+  const copy = () => clipboard.copy(value);
+  return <>{children({ copy, copied: clipboard.copied, ...others })}</>;
+}
+
+CopyButton.displayName = "@mantine/core/CopyButton";

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

@@ -1,4 +1,5 @@
-import { ActionIcon, CopyButton, Tooltip } from "@mantine/core";
+import { ActionIcon, Tooltip } from "@mantine/core";
+import { CopyButton } from "@/components/common/copy-button";
 import { IconCheck, IconCopy } from "@tabler/icons-react";
 import React from "react";
 import { useTranslation } from "react-i18next";

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

@@ -11,7 +11,8 @@ import PageListSkeleton from "@/components/ui/page-list-skeleton.tsx";
 import { buildPageUrl } from "@/features/page/page.utils.ts";
 import { formattedDate } from "@/lib/time.ts";
 import { useRecentChangesQuery } from "@/features/page/queries/page-query.ts";
-import { IconFileDescription } from "@tabler/icons-react";
+import { IconFileDescription, IconFiles } from "@tabler/icons-react";
+import { EmptyState } from "@/components/ui/empty-state.tsx";
 import { getSpaceUrl } from "@/lib/config.ts";
 import { useTranslation } from "react-i18next";
 import { getInitialsColor } from "@/lib/get-initials-color.ts";
@@ -85,8 +86,10 @@ export default function RecentChanges({ spaceId }: Props) {
       </Table>
     </Table.ScrollContainer>
   ) : (
-    <Text size="md" ta="center">
-      {t("No pages yet")}
-    </Text>
+    <EmptyState
+      icon={IconFiles}
+      title={t("No pages yet")}
+      description={t("Pages you create will show up here.")}
+    />
   );
 }

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

@@ -22,6 +22,7 @@ import {
   searchSpotlight,
   shareSearchSpotlight,
 } from "@/features/search/constants.ts";
+import { NotificationPopover } from "@/features/notification/components/notification-popover.tsx";
 
 const links = [{ link: APP_ROUTE.HOME, label: "Home" }];
 
@@ -97,6 +98,7 @@ export function AppHeader() {
         </div>
 
         <Group px={"xl"} wrap="nowrap">
+          <NotificationPopover />
           {isCloud() && isTrial && trialDaysLeft !== 0 && (
             <Badge
               variant="light"

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

@@ -115,7 +115,6 @@ const groupedData: DataGroup[] = [
         icon: IconSparkles,
         path: "/settings/ai",
         isAdmin: true,
-        isSelfhosted: true,
       },
     ],
   },

apps/client/src/components/ui/empty-state.module.css

@@ -0,0 +1,8 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 20px;
+  text-align: center;
+}

apps/client/src/components/ui/empty-state.tsx

@@ -0,0 +1,30 @@
+import { Stack, Text } from "@mantine/core";
+import { type TablerIcon } from "@tabler/icons-react";
+import { ReactNode } from "react";
+import classes from "./empty-state.module.css";
+
+type EmptyStateProps = {
+  icon: TablerIcon;
+  title: string;
+  description?: string;
+  action?: ReactNode;
+};
+
+export function EmptyState({ icon: Icon, title, description, action }: EmptyStateProps) {
+  return (
+    <div className={classes.root}>
+      <Stack align="center" gap="xs">
+        <Icon size={40} stroke={1.5} color="var(--mantine-color-dimmed)" />
+        <Text size="lg" fw={500}>
+          {title}
+        </Text>
+        {description && (
+          <Text size="sm" c="dimmed" maw={350}>
+            {description}
+          </Text>
+        )}
+        {action}
+      </Stack>
+    </div>
+  );
+}

apps/client/src/ee/ai/components/editor/ai-menu/ai-menu.module.css

@@ -0,0 +1,61 @@
+.aiMenu {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 600px;
+  min-height: 2.25rem;
+}
+
+.aiInput {
+  width: 100%;
+
+  & input {
+    height: 44px;
+    border-radius: 22px;
+    padding-left: 20px;
+    padding-right: 40px;
+    border: 1px solid
+      light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    font-size: var(--mantine-font-size-sm);
+
+    &:focus {
+      border-color: light-dark(
+        var(--mantine-color-gray-4),
+        var(--mantine-color-dark-3)
+      );
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+    }
+  }
+}
+.menuItemSelected {
+  background-color: var(--mantine-color-gray-1);
+
+  @mixin dark {
+    background-color: var(--mantine-color-dark-5);
+  }
+}
+
+.resultPreview {
+  background-color: light-dark(
+    var(--mantine-color-white),
+    var(--mantine-color-dark-6)
+  );
+  border: 1px solid
+    light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+}
+
+.resultPreviewWrapper {
+  font-size: var(--mantine-font-size-md);
+  line-height: 1.6;
+  padding: var(--mantine-spacing-md);
+
+  *:first-child {
+    margin-top: 0;
+  }
+  *:last-child {
+    margin-bottom: 0;
+  }
+}

apps/client/src/ee/ai/components/editor/ai-menu/ai-menu.tsx

@@ -0,0 +1,325 @@
+import { Editor } from "@tiptap/react";
+import { ActionIcon, TextInput, Tooltip } from "@mantine/core";
+import { useDebouncedCallback, useMediaQuery } from "@mantine/hooks";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { useAtom } from "jotai";
+import { IconArrowUp } from "@tabler/icons-react";
+import { showAiMenuAtom } from "@/features/editor/atoms/editor-atoms.ts";
+import { useAiGenerateStreamMutation } from "@/ee/ai/queries/ai-query.ts";
+import { AiAction } from "@/ee/ai/types/ai.types.ts";
+import { CommandItem, commandItems, CommandSet } from "./command-items.ts";
+import { CommandSelector } from "./command-selector.tsx";
+import { ResultPreview } from "./result-preview.tsx";
+import classes from "./ai-menu.module.css";
+import { marked } from "marked";
+import { DOMSerializer } from "@tiptap/pm/model";
+import { htmlToMarkdown } from "@docmost/editor-ext";
+import { useLocation } from "react-router-dom";
+
+interface EditorAiMenuProps {
+  editor: Editor | null;
+}
+
+const EditorAiMenu = ({ editor }: EditorAiMenuProps): JSX.Element | null => {
+  const aiGenerateStreamMutation = useAiGenerateStreamMutation();
+  const location = useLocation();
+  const isSmBreakpoint = useMediaQuery("(max-width: 48em)");
+  const [showAiMenu, setShowAiMenu] = useAtom(showAiMenuAtom);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const [prompt, setPrompt] = useState("");
+  const [output, setOutput] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [selectedIndex, setSelectedIndex] = useState(-1);
+  const [activeCommandSet, setActiveCommandSet] = useState<CommandSet>("main");
+  const [lastAction, setLastAction] = useState<CommandItem | null>(null);
+  const [menuPlacement, setMenuPlacement] = useState<{
+    top: number;
+    left: number;
+    width: number;
+  }>({
+    top: 0,
+    left: 0,
+    width: 0,
+  });
+  const currentItems = useMemo(() => {
+    return commandItems[activeCommandSet].filter((item) => {
+      return item.name.toLowerCase().includes(prompt.toLowerCase());
+    });
+  }, [prompt, output, activeCommandSet]);
+  const updateMenuPlacement = useCallback(() => {
+    if (!editor || !showAiMenu) return;
+
+    const { view } = editor;
+    const { to } = editor.state.selection;
+    const editorRect = view.dom.getBoundingClientRect();
+    const cursorCoords = view.coordsAtPos(to);
+    const topOffset = 8;
+    const editorPadding = isSmBreakpoint ? 16 : 48;
+
+    setMenuPlacement({
+      top: cursorCoords.bottom + topOffset + window.scrollY,
+      left: editorRect.left + editorPadding + window.scrollX,
+      width: editorRect.width - editorPadding * 2,
+    });
+  }, [editor, showAiMenu, isSmBreakpoint]);
+  const resetMenu = useCallback(() => {
+    setPrompt("");
+    setOutput("");
+    setActiveCommandSet("main");
+    setLastAction(null);
+    aiGenerateStreamMutation.reset();
+  }, [aiGenerateStreamMutation.reset]);
+  const debouncedUpdateMenuPlacement = useDebouncedCallback(
+    updateMenuPlacement,
+    60,
+  );
+  const handleGenerate = useCallback(
+    (item?: CommandItem) => {
+      if (!editor || isLoading) return;
+
+      let command: CommandItem | null = item || null;
+
+      if (!command) {
+        if (!prompt) return;
+
+        command = {
+          id: "custom",
+          name: "Custom",
+          action: AiAction.CUSTOM,
+          prompt,
+        };
+      }
+
+      const { from, to } = editor.state.selection;
+      const slice = editor.state.doc.slice(from, to);
+      const serializer = DOMSerializer.fromSchema(editor.schema);
+      const fragment = serializer.serializeFragment(slice.content);
+      const wrapper = document.createElement("div");
+      wrapper.appendChild(fragment);
+      const content = htmlToMarkdown(wrapper.innerHTML);
+
+      setOutput("");
+      setIsLoading(true);
+      aiGenerateStreamMutation.mutate({
+        action: command.action,
+        prompt: command.prompt,
+        content,
+        onChunk: (chunk) => {
+          setOutput((output) => output + chunk.content);
+        },
+        onComplete: () => {
+          setIsLoading(false);
+          setActiveCommandSet("result");
+        },
+        onError: () => {
+          setIsLoading(false);
+          resetMenu();
+        },
+      });
+      setLastAction(command);
+    },
+    [
+      editor,
+      prompt,
+      isLoading,
+      aiGenerateStreamMutation.mutateAsync,
+      resetMenu,
+    ],
+  );
+  const handleCommand = useCallback(
+    (item?: CommandItem) => {
+      setPrompt("");
+
+      if (!item) {
+        return handleGenerate();
+      }
+      if (item.id === "back") {
+        return setActiveCommandSet("main");
+      }
+      if (item.id === "result-replace") {
+        const chain = editor.chain().focus();
+
+        if (lastAction.action === AiAction.CONTINUE_WRITING) {
+          chain.setTextSelection(editor.state.selection.to);
+        }
+
+        const html = (marked.parse(output) as string).trim();
+        // Strip <p> wrapper for single-paragraph output to preserve inline context
+        const content =
+          html.startsWith("<p>") &&
+          html.endsWith("</p>") &&
+          html.lastIndexOf("<p>") === 0
+            ? html.slice(3, -4)
+            : html;
+
+        chain.insertContent(content).run();
+
+        return setShowAiMenu(false);
+      }
+      if (item.id === "result-insert-below") {
+        editor
+          .chain()
+          .focus()
+          .setTextSelection(editor.state.selection.to)
+          .insertContent(marked.parse(output))
+          .run();
+
+        return setShowAiMenu(false);
+      }
+      if (item.id === "result-copy") {
+        navigator.clipboard.writeText(output);
+
+        return setShowAiMenu(false);
+      }
+      if (item.id === "result-discard") {
+        setOutput("");
+
+        return resetMenu();
+      }
+      if (item.id === "result-try-again" && lastAction) {
+        return handleGenerate(lastAction);
+      }
+      if (item.subCommandSet) {
+        return setActiveCommandSet(item.subCommandSet);
+      }
+
+      return handleGenerate(item);
+    },
+    [editor, output, lastAction, handleGenerate, resetMenu],
+  );
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLInputElement>) => {
+      const totalItems = currentItems.length;
+      const cycleSize = totalItems + 1;
+
+      if (event.key === "Escape") {
+        return setShowAiMenu(false);
+      }
+
+      if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+        event.preventDefault();
+
+        return setSelectedIndex((selectedIndex) => {
+          const direction = event.key === "ArrowDown" ? 1 : -1;
+          const newIndex = selectedIndex + direction;
+
+          if (newIndex < -1) return cycleSize - 1;
+          if (newIndex >= cycleSize) return 0;
+
+          return newIndex;
+        });
+      }
+
+      if (event.key === "Enter") {
+        event.preventDefault();
+
+        return handleCommand(currentItems[selectedIndex]);
+      }
+    },
+    [currentItems, selectedIndex],
+  );
+
+  useEffect(() => {
+    if (!editor) return;
+
+    const handleClose = () => setShowAiMenu(false);
+    const observer = new ResizeObserver(() => {
+      debouncedUpdateMenuPlacement();
+    });
+
+    updateMenuPlacement();
+    editor.on("focus", handleClose);
+    editor.on("blur", handleClose);
+    window.addEventListener("resize", debouncedUpdateMenuPlacement);
+    window.addEventListener("scroll", debouncedUpdateMenuPlacement, true);
+    observer.observe(editor.view.dom);
+
+    return () => {
+      editor.off("focus", handleClose);
+      editor.off("blur", handleClose);
+      window.removeEventListener("resize", debouncedUpdateMenuPlacement);
+      window.removeEventListener("scroll", debouncedUpdateMenuPlacement, true);
+      observer.disconnect();
+    };
+  }, [editor, updateMenuPlacement, debouncedUpdateMenuPlacement]);
+
+  useEffect(() => {
+    setShowAiMenu(false);
+  }, [location]);
+  useEffect(() => {
+    if (showAiMenu) {
+      resetMenu();
+    }
+  }, [showAiMenu, resetMenu]);
+  useEffect(() => {
+    // Focus input when menu opens or command set changes
+    requestAnimationFrame(() => {
+      inputRef.current?.focus({ preventScroll: true });
+    });
+  }, [showAiMenu, isLoading, currentItems]);
+  useEffect(() => {
+    if (!currentItems.length) {
+      setSelectedIndex(-1);
+    }
+    setSelectedIndex(prompt || activeCommandSet !== "main" ? 0 : -1);
+  }, [prompt, activeCommandSet, currentItems]);
+
+  if (!showAiMenu) return null;
+
+  return createPortal(
+    <div
+      style={{
+        zIndex: 200,
+        position: "absolute",
+        top: menuPlacement.top,
+        left: menuPlacement.left,
+        width: menuPlacement.width,
+        pointerEvents: "none",
+      }}
+    >
+      <div
+        className={classes.aiMenu}
+        style={{ pointerEvents: "auto" }}
+        tabIndex={0}
+        ref={containerRef}
+      >
+        <ResultPreview output={output} isLoading={isLoading} />
+        <CommandSelector
+          selectedIndex={selectedIndex}
+          isLoading={isLoading}
+          output={output}
+          currentItems={currentItems}
+          handleCommand={handleCommand}
+        >
+          <TextInput
+            ref={inputRef}
+            className={classes.aiInput}
+            placeholder="Ask AI..."
+            data-autofocus
+            value={prompt}
+            disabled={isLoading}
+            onChange={(e) => setPrompt(e.currentTarget.value)}
+            rightSection={
+              <ActionIcon
+                disabled={!prompt || isLoading}
+                variant="filled"
+                color="blue"
+                radius="xl"
+                size="sm"
+                onClick={() => handleGenerate()}
+              >
+                <IconArrowUp size={14} stroke={2.5} />
+              </ActionIcon>
+            }
+            onKeyDown={handleKeyDown}
+          />
+        </CommandSelector>
+      </div>
+    </div>,
+    document.body,
+  );
+};
+
+export { EditorAiMenu };

apps/client/src/ee/ai/components/editor/ai-menu/command-items.ts

@@ -0,0 +1,219 @@
+import { AiAction } from "@/ee/ai/types/ai.types.ts";
+import {
+  IconSparkles,
+  IconArrowsMaximize,
+  IconArrowsMinimize,
+  IconWriting,
+  IconHelp,
+  IconList,
+  IconMoodSmile,
+  IconLanguage,
+  IconTrash,
+  IconRefresh,
+  IconChevronLeft,
+  IconCheck,
+  IconArrowDownLeft,
+  IconCopy,
+  IconTextPlus,
+  IconAlignJustified,
+} from "@tabler/icons-react";
+
+interface CommandItem {
+  name: string;
+  id: string;
+  icon?: typeof IconSparkles;
+  action?: AiAction;
+  prompt?: string;
+  subCommandSet?: CommandSet;
+}
+
+type CommandSet = "main" | "tone" | "translate" | "result";
+
+const mainItems: CommandItem[] = [
+  {
+    id: "improve-writing",
+    name: "Improve writing",
+    icon: IconSparkles,
+    action: AiAction.IMPROVE_WRITING,
+  },
+  {
+    id: "fix-spelling-grammar",
+    name: "Fix spelling & grammar",
+    icon: IconCheck,
+    action: AiAction.FIX_SPELLING_GRAMMAR,
+  },
+  {
+    id: "make-longer",
+    name: "Make longer",
+    icon: IconTextPlus,
+    action: AiAction.MAKE_LONGER,
+  },
+  {
+    id: "make-shorter",
+    name: "Make shorter",
+    icon: IconAlignJustified,
+    action: AiAction.MAKE_SHORTER,
+  },
+  {
+    id: "continue-writing",
+    name: "Continue writing",
+    icon: IconWriting,
+    action: AiAction.CONTINUE_WRITING,
+  },
+  {
+    id: "explain",
+    name: "Explain",
+    icon: IconHelp,
+    action: AiAction.EXPLAIN,
+  },
+  {
+    id: "summarize",
+    name: "Summarize",
+    icon: IconList,
+    action: AiAction.SUMMARIZE,
+  },
+  {
+    id: "change-tone",
+    name: "Change tone",
+    icon: IconMoodSmile,
+    subCommandSet: "tone",
+  },
+  {
+    id: "translate",
+    name: "Translate",
+    icon: IconLanguage,
+    subCommandSet: "translate",
+  },
+];
+const toneItems: CommandItem[] = [
+  {
+    id: "back",
+    name: "Back",
+    icon: IconChevronLeft,
+  },
+  {
+    id: "tone-professional",
+    name: "Professional",
+    icon: IconMoodSmile,
+    action: AiAction.CHANGE_TONE,
+    prompt: "Professional",
+  },
+  {
+    id: "tone-casual",
+    name: "Casual",
+    icon: IconMoodSmile,
+    action: AiAction.CHANGE_TONE,
+    prompt: "Casual",
+  },
+  {
+    id: "tone-friendly",
+    name: "Friendly",
+    icon: IconMoodSmile,
+    action: AiAction.CHANGE_TONE,
+    prompt: "Friendly",
+  },
+];
+const translateItems: CommandItem[] = [
+  {
+    id: "back",
+    name: "Back",
+    icon: IconChevronLeft,
+  },
+  {
+    id: "translate-english",
+    name: "English",
+    icon: IconLanguage,
+    action: AiAction.TRANSLATE,
+    prompt: "English",
+  },
+  {
+    id: "translate-spanish",
+    name: "Spanish",
+    icon: IconLanguage,
+    action: AiAction.TRANSLATE,
+    prompt: "Spanish",
+  },
+  {
+    id: "translate-german",
+    name: "German",
+    icon: IconLanguage,
+    action: AiAction.TRANSLATE,
+    prompt: "German",
+  },
+  {
+    id: "translate-french",
+    name: "French",
+    icon: IconLanguage,
+    action: AiAction.TRANSLATE,
+    prompt: "French",
+  },
+  {
+    id: "translate-dutch",
+    name: "Dutch",
+    icon: IconLanguage,
+    action: AiAction.TRANSLATE,
+    prompt: "Dutch",
+  },
+  {
+    id: "translate-portuguese",
+    name: "Portuguese",
+    icon: IconLanguage,
+    action: AiAction.TRANSLATE,
+    prompt: "Portuguese",
+  },
+  {
+    id: "translate-italian",
+    name: "Italian",
+    icon: IconLanguage,
+    action: AiAction.TRANSLATE,
+    prompt: "Italian",
+  },
+  {
+    id: "translate-japanese",
+    name: "Japanese",
+    icon: IconLanguage,
+    action: AiAction.TRANSLATE,
+    prompt: "Japanese",
+  },
+  {
+    id: "translate-korean",
+    name: "Korean",
+    icon: IconLanguage,
+    action: AiAction.TRANSLATE,
+    prompt: "Korean",
+  },
+  {
+    id: "translate-swedish",
+    name: "Swedish",
+    icon: IconLanguage,
+    action: AiAction.TRANSLATE,
+    prompt: "Swedish",
+  },
+  {
+    id: "translate-chinese",
+    name: "Chinese (Simplified)",
+    icon: IconLanguage,
+    action: AiAction.TRANSLATE,
+    prompt: "Simplified Chinese",
+  },
+];
+const resultItems: CommandItem[] = [
+  { id: "result-replace", name: "Replace", icon: IconCheck },
+  { id: "result-insert-below", name: "Insert below", icon: IconArrowDownLeft },
+  { id: "result-copy", name: "Copy", icon: IconCopy },
+  { id: "result-discard", name: "Discard", icon: IconTrash },
+  {
+    id: "result-try-again",
+    name: "Try again",
+    icon: IconRefresh,
+  },
+];
+const commandItems: Record<CommandSet, CommandItem[]> = {
+  main: mainItems,
+  tone: toneItems,
+  translate: translateItems,
+  result: resultItems,
+};
+
+export type { CommandItem, CommandSet };
+export { commandItems };

apps/client/src/ee/ai/components/editor/ai-menu/command-selector.tsx

@@ -0,0 +1,72 @@
+import { Loader, Menu, ScrollArea } from "@mantine/core";
+import { IconChevronRight } from "@tabler/icons-react";
+import { ReactNode } from "react";
+import { CommandItem } from "./command-items.ts";
+import classes from "./ai-menu.module.css";
+
+interface CommandSelectorProps {
+  selectedIndex: number;
+
+  isLoading: boolean;
+  output: string;
+  currentItems: CommandItem[];
+  children: ReactNode;
+  handleCommand(item: CommandItem): void;
+}
+
+const CommandSelector = ({
+  selectedIndex,
+  children,
+  isLoading,
+  output,
+  currentItems,
+  handleCommand,
+}: CommandSelectorProps) => {
+  return (
+    <Menu
+      opened={!isLoading && currentItems.length > 0}
+      middlewares={{ flip: false }}
+      position="bottom-start"
+      offset={4}
+      width={250}
+      trapFocus={false}
+      shadow="lg"
+    >
+      <Menu.Target>{children}</Menu.Target>
+      <Menu.Dropdown>
+        <ScrollArea.Autosize type="scroll" scrollbarSize={5} mah={300}>
+          {currentItems.map((item, index) => {
+            const isSelected = selectedIndex === index;
+            const showLoader =
+              isLoading && output === "" && !item.subCommandSet;
+
+            return (
+              <Menu.Item
+                key={item.id}
+                className={isSelected ? classes.menuItemSelected : undefined}
+                leftSection={
+                  showLoader ? (
+                    <Loader size={14} />
+                  ) : item.icon ? (
+                    <item.icon size={16} />
+                  ) : undefined
+                }
+                rightSection={
+                  item.subCommandSet ? (
+                    <IconChevronRight size={14} />
+                  ) : undefined
+                }
+                onClick={() => handleCommand(item)}
+                disabled={isLoading}
+              >
+                {item.name}
+              </Menu.Item>
+            );
+          })}
+        </ScrollArea.Autosize>
+      </Menu.Dropdown>
+    </Menu>
+  );
+};
+
+export { CommandSelector };

apps/client/src/ee/ai/components/editor/ai-menu/result-preview.tsx

@@ -0,0 +1,32 @@
+import { Loader, Paper, ScrollArea } from "@mantine/core";
+import DOMPurify from "dompurify";
+import { marked } from "marked";
+import { memo } from "react";
+import classes from "./ai-menu.module.css";
+
+interface ResultPreviewProps {
+  output: string;
+  isLoading: boolean;
+}
+const ResultPreview = memo(({ output, isLoading }: ResultPreviewProps) => {
+  if (!output && !isLoading) return;
+
+  const parsedOutput = `${marked.parse(output)}`;
+
+  return (
+    <Paper mb={4} shadow="lg" radius="md" className={classes.resultPreview}>
+      <ScrollArea.Autosize mah={300} type="scroll" scrollbarSize={5}>
+        <div className={classes.resultPreviewWrapper}>
+          {parsedOutput && (
+            <div
+              dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(parsedOutput) }}
+            />
+          )}
+          {isLoading && <Loader size={12} ml="xs" display="inline-block" />}
+        </div>
+      </ScrollArea.Autosize>
+    </Paper>
+  );
+});
+
+export { ResultPreview };

apps/client/src/ee/ai/components/enable-ai-search.tsx

@@ -15,7 +15,7 @@ export default function EnableAiSearch() {
     <>
       <Group justify="space-between" wrap="nowrap" gap="xl">
         <div>
-          <Text size="md">{t("AI-powered search (Ask AI)")}</Text>
+          <Text size="md">{t("AI-powered search (AI Answers)")}</Text>
           <Text size="sm" c="dimmed">
             {t(
               "AI search uses vector embeddings to provide semantic search capabilities across your workspace content.",

apps/client/src/ee/ai/components/enable-generative-ai.tsx

@@ -0,0 +1,48 @@
+import { Group, Text, Switch } 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 { useIsCloudEE } from "@/hooks/use-is-cloud-ee.tsx";
+
+export default function EnableGenerativeAi() {
+  const { t } = useTranslation();
+  const [workspace, setWorkspace] = useAtom(workspaceAtom);
+  const [checked, setChecked] = useState(workspace?.settings?.ai?.generative);
+  const hasAccess = useIsCloudEE();
+
+  const handleChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = event.currentTarget.checked;
+    try {
+      const updatedWorkspace = await updateWorkspace({ generativeAi: 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("Generative AI (Ask AI)")}</Text>
+        <Text size="sm" c="dimmed">
+          {t(
+            "Enable AI-powered content generation in the editor. Allows users to generate, improve, translate and transform text.",
+          )}
+        </Text>
+      </div>
+
+      <Switch
+        defaultChecked={checked}
+        onChange={handleChange}
+        disabled={!hasAccess}
+      />
+    </Group>
+  );
+}

apps/client/src/ee/ai/hooks/use-ai-search.ts

@@ -1,6 +1,6 @@
 import { useMutation, UseMutationResult } from "@tanstack/react-query";
 import { useState, useCallback } from "react";
-import { askAi, IAiSearchResponse } from "@/ee/ai/services/ai-search-service.ts";
+import { aiAnswers, IAiSearchResponse } from "@/ee/ai/services/ai-search-service.ts";
 import { IPageSearchParams } from "@/features/search/types/search.types.ts";
 
 // @ts-ignore
@@ -26,7 +26,7 @@ export function useAiSearch(): UseAiSearchResult {
 
       const { contentType, ...apiParams } = params;
 
-      return await askAi(apiParams, (chunk) => {
+      return await aiAnswers(apiParams, (chunk) => {
         if (chunk.content) {
           setStreamingAnswer((prev) => prev + chunk.content);
         }

apps/client/src/ee/ai/pages/ai-settings.tsx

@@ -1,25 +1,25 @@
 import { Helmet } from "react-helmet-async";
-import { getAppName, isCloud } from "@/lib/config.ts";
+import { getAppName } from "@/lib/config.ts";
 import SettingsTitle from "@/components/settings/settings-title.tsx";
 import React from "react";
 import useUserRole from "@/hooks/use-user-role.tsx";
 import { useTranslation } from "react-i18next";
-import useLicense from "@/ee/hooks/use-license.tsx";
 import EnableAiSearch from "@/ee/ai/components/enable-ai-search.tsx";
-import { Alert } from "@mantine/core";
+import EnableGenerativeAi from "@/ee/ai/components/enable-generative-ai.tsx";
+import { Alert, Stack } from "@mantine/core";
 import { IconInfoCircle } from "@tabler/icons-react";
+import { useIsCloudEE } from "@/hooks/use-is-cloud-ee.tsx";
+import { isCloud } from "@/lib/config.ts";
 
 export default function AiSettings() {
   const { t } = useTranslation();
   const { isAdmin } = useUserRole();
-  const { hasLicenseKey } = useLicense();
+  const hasAccess = useIsCloudEE();
 
   if (!isAdmin) {
     return null;
   }
 
-  const hasAccess = isCloud() || (!isCloud() && hasLicenseKey);
-
   return (
     <>
       <Helmet>
@@ -40,7 +40,10 @@ export default function AiSettings() {
         </Alert>
       )}
 
-      <EnableAiSearch />
+      <Stack gap="md">
+        {!isCloud() && <EnableAiSearch />}
+        <EnableGenerativeAi />
+      </Stack>
     </>
   );
 }

apps/client/src/ee/ai/services/ai-search-service.ts

@@ -15,11 +15,11 @@ export interface IAiSearchResponse {
   }>;
 }
 
-export async function askAi(
+export async function aiAnswers(
   params: IPageSearchParams,
   onChunk?: (chunk: { content?: string; sources?: any[] }) => void,
 ): Promise<IAiSearchResponse> {
-  const response = await fetch("/api/ai/ask", {
+  const response = await fetch("/api/ai/answers", {
     method: "POST",
     headers: {
       "Content-Type": "application/json",

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

@@ -43,13 +43,16 @@ export async function generateAiContentStream(
     }
 
     const processStream = async () => {
+      let buffer = "";
       try {
         while (true) {
           const { done, value } = await reader.read();
           if (done) break;
 
-          const chunk = decoder.decode(value, { stream: true });
-          const lines = chunk.split("\n");
+          buffer += decoder.decode(value, { stream: true });
+          const lines = buffer.split("\n");
+
+          buffer = lines.pop() || "";
 
           for (const line of lines) {
             if (line.startsWith("data: ")) {
@@ -66,7 +69,7 @@ export async function generateAiContentStream(
                   onChunk(parsed);
                 }
               } catch (e) {
-                // Ignore parse errors for incomplete chunks
+                // Skip invalid JSON
               }
             }
           }

apps/client/src/ee/ai/types/ai.types.ts

@@ -6,6 +6,7 @@ export enum AiAction {
   SIMPLIFY = "simplify",
   CHANGE_TONE = "change_tone",
   SUMMARIZE = "summarize",
+  EXPLAIN = "explain",
   CONTINUE_WRITING = "continue_writing",
   TRANSLATE = "translate",
   CUSTOM = "custom",

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

@@ -7,7 +7,7 @@ import { notifications } from "@mantine/notifications";
 import { useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { IAuthProvider } from "@/ee/security/types/security.types";
-import APP_ROUTE from "@/lib/app-route";
+import APP_ROUTE, { getPostLoginRedirect } from "@/lib/app-route";
 import { ldapLogin } from "@/ee/security/services/ldap-auth-service";
 
 const formSchema = z.object({
@@ -59,13 +59,13 @@ export function LdapLoginModal({
       // Handle MFA like the regular login
       if (response?.userHasMfa) {
         onClose();
-        navigate(APP_ROUTE.AUTH.MFA_CHALLENGE);
+        navigate(APP_ROUTE.AUTH.MFA_CHALLENGE + window.location.search);
       } else if (response?.requiresMfaSetup) {
         onClose();
-        navigate(APP_ROUTE.AUTH.MFA_SETUP_REQUIRED);
+        navigate(APP_ROUTE.AUTH.MFA_SETUP_REQUIRED + window.location.search);
       } else {
         onClose();
-        navigate(APP_ROUTE.HOME);
+        navigate(getPostLoginRedirect());
       }
     } catch (err: any) {
       setIsLoading(false);

apps/client/src/ee/hooks/use-enterprise-access.tsx

@@ -0,0 +1,12 @@
+import { isCloud } from "@/lib/config";
+import useLicense from "@/ee/hooks/use-license";
+import usePlan from "@/ee/hooks/use-plan";
+
+const useEnterpriseAccess = () => {
+  const { hasLicenseKey } = useLicense();
+  const { isBusiness } = usePlan();
+
+  return (isCloud() && isBusiness) || (!isCloud() && hasLicenseKey);
+};
+
+export default useEnterpriseAccess;

apps/client/src/ee/mfa/components/mfa-backup-codes-modal.tsx

@@ -8,10 +8,10 @@ import {
   Group,
   List,
   Code,
-  CopyButton,
   Alert,
   PasswordInput,
 } from "@mantine/core";
+import { CopyButton } from "@/components/common/copy-button";
 import {
   IconRefresh,
   IconCopy,

apps/client/src/ee/mfa/components/mfa-challenge.tsx

@@ -18,7 +18,7 @@ import { useNavigate } from "react-router-dom";
 import { notifications } from "@mantine/notifications";
 import classes from "./mfa-challenge.module.css";
 import { verifyMfa } from "@/ee/mfa";
-import APP_ROUTE from "@/lib/app-route";
+import APP_ROUTE, { getPostLoginRedirect } from "@/lib/app-route";
 import { useTranslation } from "react-i18next";
 import * as z from "zod";
 import { MfaBackupCodeInput } from "./mfa-backup-code-input";
@@ -53,7 +53,7 @@ export function MfaChallenge() {
     setIsLoading(true);
     try {
       await verifyMfa(values.code);
-      navigate(APP_ROUTE.HOME);
+      navigate(getPostLoginRedirect());
     } catch (error: any) {
       setIsLoading(false);
       notifications.show({

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

@@ -11,7 +11,6 @@ import {
   PinInput,
   Alert,
   List,
-  CopyButton,
   ActionIcon,
   Tooltip,
   Paper,
@@ -20,6 +19,7 @@ import {
   Collapse,
   UnstyledButton,
 } from "@mantine/core";
+import { CopyButton } from "@/components/common/copy-button";
 import {
   IconQrcode,
   IconShieldCheck,

apps/client/src/ee/mfa/components/mfa-setup-required.tsx

@@ -3,7 +3,7 @@ import { Container, Paper, Title, Text, Alert, Stack } from "@mantine/core";
 import { IconAlertCircle } from "@tabler/icons-react";
 import { useTranslation } from "react-i18next";
 import { MfaSetupModal } from "@/ee/mfa";
-import APP_ROUTE from "@/lib/app-route.ts";
+import APP_ROUTE, { getPostLoginRedirect } from "@/lib/app-route.ts";
 import { useNavigate } from "react-router-dom";
 
 export default function MfaSetupRequired() {
@@ -11,7 +11,7 @@ export default function MfaSetupRequired() {
   const navigate = useNavigate();
 
   const handleSetupComplete = () => {
-    navigate(APP_ROUTE.HOME);
+    navigate(getPostLoginRedirect());
   };
 
   return (

apps/client/src/ee/mfa/hooks/use-mfa-page-protection.ts

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import { useNavigate, useLocation } from "react-router-dom";
-import APP_ROUTE from "@/lib/app-route";
+import APP_ROUTE, { getPostLoginRedirect } from "@/lib/app-route";
 import { validateMfaAccess } from "@/ee/mfa";
 
 export function useMfaPageProtection() {
@@ -13,8 +13,10 @@ export function useMfaPageProtection() {
     const checkAccess = async () => {
       const result = await validateMfaAccess();
 
+      const search = location.search;
+
       if (!result.valid) {
-        navigate(APP_ROUTE.AUTH.LOGIN);
+        navigate(APP_ROUTE.AUTH.LOGIN + search);
         return;
       }
 
@@ -26,17 +28,17 @@ export function useMfaPageProtection() {
 
       if (result.requiresMfaSetup && !isOnSetupPage) {
         // User needs to set up MFA but is on challenge page
-        navigate(APP_ROUTE.AUTH.MFA_SETUP_REQUIRED);
+        navigate(APP_ROUTE.AUTH.MFA_SETUP_REQUIRED + search);
       } else if (
         !result.requiresMfaSetup &&
         result.userHasMfa &&
         !isOnChallengePage
       ) {
         // User has MFA and should be on challenge page
-        navigate(APP_ROUTE.AUTH.MFA_CHALLENGE);
+        navigate(APP_ROUTE.AUTH.MFA_CHALLENGE + search);
       } else if (!result.isTransferToken) {
         // User has a regular auth token, shouldn't be on MFA pages
-        navigate(APP_ROUTE.HOME);
+        navigate(getPostLoginRedirect());
       } else {
         setIsValid(true);
       }

apps/client/src/ee/page-permission/components/general-access-select.tsx

@@ -0,0 +1,112 @@
+import { Group, Menu, Text, UnstyledButton } from "@mantine/core";
+import {
+  IconChevronDown,
+  IconLock,
+  IconShieldLock,
+  IconCheck,
+} from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+import classes from "./page-permission.module.css";
+
+type AccessLevel = "open" | "restricted";
+
+type GeneralAccessSelectProps = {
+  value: AccessLevel;
+  onChange: (value: AccessLevel) => void;
+  disabled?: boolean;
+  hasInheritedRestriction?: boolean;
+};
+
+export function GeneralAccessSelect({
+  value,
+  onChange,
+  disabled,
+  hasInheritedRestriction,
+}: GeneralAccessSelectProps) {
+  const { t } = useTranslation();
+
+  const isDirectlyRestricted = value === "restricted";
+  const showInheritedState = hasInheritedRestriction && !isDirectlyRestricted;
+
+  const currentLabel = showInheritedState
+    ? t("Restricted by parent")
+    : isDirectlyRestricted
+      ? t("Restricted")
+      : t("Open");
+
+  const currentDescription = showInheritedState
+    ? t("Inherits restrictions from ancestor page")
+    : isDirectlyRestricted
+      ? t("Only specific people can access")
+      : t("Everyone in this space can access");
+
+  const CurrentIcon = showInheritedState
+    ? IconShieldLock
+    : isDirectlyRestricted
+      ? IconLock
+      : IconShieldLock;
+
+  const accessOptions = [
+    {
+      value: "open" as const,
+      label: hasInheritedRestriction ? t("Restricted by parent") : t("Open"),
+      description: hasInheritedRestriction
+        ? t("Use only inherited restrictions")
+        : t("Everyone in this space can access"),
+      icon: IconShieldLock,
+    },
+    {
+      value: "restricted" as const,
+      label: t("Restricted"),
+      description: hasInheritedRestriction
+        ? t("Add restrictions on top of inherited")
+        : t("Only specific people can access"),
+      icon: IconLock,
+    },
+  ];
+
+  return (
+    <Menu withArrow disabled={disabled}>
+      <Menu.Target>
+        <UnstyledButton className={classes.generalAccessBox} disabled={disabled}>
+          <div
+            className={`${classes.generalAccessIcon} ${isDirectlyRestricted || showInheritedState ? classes.generalAccessIconRestricted : ""}`}
+          >
+            <CurrentIcon size={18} stroke={1.5} />
+          </div>
+          <div style={{ flex: 1 }}>
+            <Group gap={4}>
+              <Text size="sm" fw={500}>
+                {currentLabel}
+              </Text>
+              {!disabled && <IconChevronDown size={14} />}
+            </Group>
+            <Text size="xs" c="dimmed">
+              {currentDescription}
+            </Text>
+          </div>
+        </UnstyledButton>
+      </Menu.Target>
+
+      <Menu.Dropdown>
+        {accessOptions.map((option) => (
+          <Menu.Item
+            key={option.value}
+            onClick={() => onChange(option.value)}
+            leftSection={<option.icon size={16} stroke={1.5} />}
+            rightSection={
+              option.value === value ? <IconCheck size={16} /> : null
+            }
+          >
+            <div>
+              <Text size="sm">{option.label}</Text>
+              <Text size="xs" c="dimmed">
+                {option.description}
+              </Text>
+            </div>
+          </Menu.Item>
+        ))}
+      </Menu.Dropdown>
+    </Menu>
+  );
+}

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

@@ -0,0 +1,107 @@
+import { Menu, Text, UnstyledButton, Group } from "@mantine/core";
+import { IconChevronDown, IconCheck } from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+import { useAtomValue } from "jotai";
+import { CustomAvatar } from "@/components/ui/custom-avatar";
+import { AutoTooltipText } from "@/components/ui/auto-tooltip-text";
+import { IconGroupCircle } from "@/components/icons/icon-people-circle";
+import { userAtom } from "@/features/user/atoms/current-user-atom";
+import { formatMemberCount } from "@/lib";
+import {
+  IPagePermissionMember,
+  PagePermissionRole,
+} from "@/ee/page-permission/types/page-permission.types";
+import {
+  pagePermissionRoleData,
+  getPagePermissionRoleLabel,
+} from "@/ee/page-permission/types/page-permission-role-data";
+import classes from "./page-permission.module.css";
+
+type PagePermissionItemProps = {
+  member: IPagePermissionMember;
+  onRoleChange: (memberId: string, type: "user" | "group", role: string) => void;
+  onRemove: (memberId: string, type: "user" | "group") => void;
+  disabled?: boolean;
+};
+
+export function PagePermissionItem({
+  member,
+  onRoleChange,
+  onRemove,
+  disabled,
+}: PagePermissionItemProps) {
+  const { t } = useTranslation();
+  const currentUser = useAtomValue(userAtom);
+  const isCurrentUser = member.type === "user" && member.id === currentUser?.id;
+  const roleLabel = getPagePermissionRoleLabel(member.role);
+
+  return (
+    <div className={classes.permissionItem}>
+      <div className={classes.permissionItemInfo}>
+        {member.type === "user" && (
+          <CustomAvatar avatarUrl={member.avatarUrl} name={member.name} />
+        )}
+        {member.type === "group" && <IconGroupCircle />}
+
+        <div className={classes.permissionItemDetails}>
+          <AutoTooltipText
+            fz="sm"
+            fw={500}
+            tooltipLabel={isCurrentUser ? `${member.name} (${t("You")})` : member.name}
+          >
+            {member.name}
+            {isCurrentUser && <Text span c="dimmed"> ({t("You")})</Text>}
+          </AutoTooltipText>
+          <AutoTooltipText fz="xs" c="dimmed">
+            {member.type === "user" ? member.email : formatMemberCount(member.memberCount, t)}
+          </AutoTooltipText>
+        </div>
+      </div>
+
+      <div className={classes.permissionItemRole}>
+        {isCurrentUser || disabled ? (
+          <Text size="sm" c="dimmed">
+            {t(roleLabel)}
+          </Text>
+        ) : (
+          <Menu withArrow position="bottom-end">
+            <Menu.Target>
+              <UnstyledButton>
+                <Group gap={4}>
+                  <Text size="sm">{t(roleLabel)}</Text>
+                  <IconChevronDown size={14} />
+                </Group>
+              </UnstyledButton>
+            </Menu.Target>
+
+            <Menu.Dropdown>
+              {pagePermissionRoleData.map((role) => (
+                <Menu.Item
+                  key={role.value}
+                  onClick={() => onRoleChange(member.id, member.type, role.value)}
+                  rightSection={
+                    role.value === member.role ? <IconCheck size={16} /> : null
+                  }
+                >
+                  <div>
+                    <Text size="sm">{t(role.label)}</Text>
+                    <Text size="xs" c="dimmed">
+                      {t(role.description)}
+                    </Text>
+                  </div>
+                </Menu.Item>
+              ))}
+              <Menu.Divider />
+              <Menu.Item
+                color="red"
+                onClick={() => onRemove(member.id, member.type)}
+              >
+                {t("Remove access")}
+              </Menu.Item>
+            </Menu.Dropdown>
+          </Menu>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,179 @@
+import { Avatar, Group, ScrollArea, Text } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { useAtomValue } from "jotai";
+import { modals } from "@mantine/modals";
+import { userAtom } from "@/features/user/atoms/current-user-atom";
+import { CustomAvatar } from "@/components/ui/custom-avatar";
+import { IconGroupCircle } from "@/components/icons/icon-people-circle";
+import {
+  IPagePermissionMember,
+  PagePermissionRole,
+} from "@/ee/page-permission/types/page-permission.types";
+import {
+  useRemovePagePermissionMutation,
+  useUpdatePagePermissionRoleMutation,
+} from "@/ee/page-permission/queries/page-permission-query";
+import { PagePermissionItem } from "./page-permission-item";
+import classes from "./page-permission.module.css";
+
+type PagePermissionListProps = {
+  pageId: string;
+  members: IPagePermissionMember[];
+  canManage: boolean;
+  onRemoveAll?: () => void;
+};
+
+export function PagePermissionList({
+  pageId,
+  members,
+  canManage,
+  onRemoveAll,
+}: PagePermissionListProps) {
+  const { t } = useTranslation();
+  const currentUser = useAtomValue(userAtom);
+  const updateRoleMutation = useUpdatePagePermissionRoleMutation();
+  const removeMutation = useRemovePagePermissionMutation();
+
+  const handleRoleChange = async (
+    memberId: string,
+    type: "user" | "group",
+    newRole: string,
+  ) => {
+    await updateRoleMutation.mutateAsync({
+      pageId,
+      role: newRole as PagePermissionRole,
+      ...(type === "user" ? { userId: memberId } : { groupId: memberId }),
+    });
+  };
+
+  const handleRemove = (memberId: string, type: "user" | "group") => {
+    modals.openConfirmModal({
+      title: t("Remove access"),
+      children: (
+        <Text size="sm">
+          {t("Are you sure you want to remove this member's access to the page?")}
+        </Text>
+      ),
+      centered: true,
+      labels: { confirm: t("Remove"), cancel: t("Cancel") },
+      confirmProps: { color: "red" },
+      onConfirm: async () => {
+        await removeMutation.mutateAsync({
+          pageId,
+          ...(type === "user" ? { userIds: [memberId] } : { groupIds: [memberId] }),
+        });
+      },
+    });
+  };
+
+  const handleRemoveAll = () => {
+    modals.openConfirmModal({
+      title: t("Remove all access"),
+      children: (
+        <Text size="sm">
+          {t("Are you sure you want to remove all specific access? This will make the page open to everyone in the space.")}
+        </Text>
+      ),
+      centered: true,
+      labels: { confirm: t("Remove all"), cancel: t("Cancel") },
+      confirmProps: { color: "red" },
+      onConfirm: () => onRemoveAll?.(),
+    });
+  };
+
+  const sortedMembers = [...members].sort((a, b) => {
+    if (a.type === "user" && a.id === currentUser?.id) return -1;
+    if (b.type === "user" && b.id === currentUser?.id) return 1;
+    if (a.type === "group" && b.type === "user") return -1;
+    if (a.type === "user" && b.type === "group") return 1;
+    return 0;
+  });
+
+  const getSummaryText = () => {
+    const names: string[] = [];
+    let remaining = 0;
+
+    for (const member of sortedMembers) {
+      if (names.length < 2) {
+        if (member.type === "user" && member.id === currentUser?.id) {
+          names.push(t("You"));
+        } else {
+          names.push(member.name);
+        }
+      } else {
+        remaining++;
+      }
+    }
+
+    if (remaining > 0) {
+      return `${names.join(", ")}, ${t("and {{count}} other", { count: remaining })}`;
+    }
+    return names.join(", ");
+  };
+
+  if (members.length === 0) {
+    return null;
+  }
+
+  return (
+    <>
+      <div className={classes.specificAccessHeader}>
+        <Text size="sm" fw={500}>
+          {t("Specific access")}
+        </Text>
+        {canManage && members.length > 0 && (
+          <>
+            <Text size="sm" c="dimmed">
+              •
+            </Text>
+            <Text
+              className={classes.removeAllLink}
+              onClick={handleRemoveAll}
+            >
+              {t("Remove all")}
+            </Text>
+          </>
+        )}
+      </div>
+
+      <Group gap={0} mb="xs">
+        <div className={classes.avatarStack}>
+          {sortedMembers.slice(0, 3).map((member, index) => (
+            <div
+              key={member.id}
+              className={classes.avatarStackItem}
+              style={{ zIndex: sortedMembers.length - index }}
+            >
+              {member.type === "user" ? (
+                <CustomAvatar
+                  avatarUrl={member.avatarUrl}
+                  name={member.name}
+                  size={28}
+                />
+              ) : (
+                <Avatar size={28} radius="xl">
+                  <IconGroupCircle />
+                </Avatar>
+              )}
+            </div>
+          ))}
+        </div>
+        <Text size="sm" ml="xs">
+          {getSummaryText()}
+        </Text>
+      </Group>
+
+      <ScrollArea mah={250}>
+        {sortedMembers.map((member) => (
+          <PagePermissionItem
+            key={`${member.type}-${member.id}`}
+            member={member}
+            onRoleChange={handleRoleChange}
+            onRemove={handleRemove}
+            disabled={!canManage}
+          />
+        ))}
+      </ScrollArea>
+    </>
+  );
+}

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

@@ -0,0 +1,200 @@
+import { useState } from "react";
+import {
+  Box,
+  Button,
+  Divider,
+  Group,
+  Loader,
+  Paper,
+  Select,
+  Stack,
+  Text,
+  ThemeIcon,
+} from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { Link, useParams } from "react-router-dom";
+import { IconArrowRight, IconLock, IconShieldLock } from "@tabler/icons-react";
+import { MultiMemberSelect } from "@/features/space/components/multi-member-select";
+import {
+  IPageRestrictionInfo,
+  PagePermissionRole,
+} from "@/ee/page-permission/types/page-permission.types";
+import {
+  useAddPagePermissionMutation,
+  usePagePermissionsQuery,
+  useRestrictPageMutation,
+  useUnrestrictPageMutation,
+} from "@/ee/page-permission/queries/page-permission-query";
+import { pagePermissionRoleData } from "@/ee/page-permission/types/page-permission-role-data";
+import { GeneralAccessSelect } from "@/ee/page-permission";
+import { PagePermissionList } from "@/ee/page-permission";
+import classes from "./page-permission.module.css";
+import { buildPageUrl } from "@/features/page/page.utils";
+
+type PagePermissionTabProps = {
+  pageId: string;
+  restrictionInfo: IPageRestrictionInfo;
+};
+
+export function PagePermissionTab({
+  pageId,
+  restrictionInfo,
+}: PagePermissionTabProps) {
+  const { t } = useTranslation();
+  const { spaceSlug } = useParams();
+  const [memberIds, setMemberIds] = useState<string[]>([]);
+  const [role, setRole] = useState<string>(PagePermissionRole.WRITER);
+
+  const { data: permissionsData, isLoading } = usePagePermissionsQuery(pageId);
+  const restrictMutation = useRestrictPageMutation();
+  const unrestrictMutation = useUnrestrictPageMutation();
+  const addPermissionMutation = useAddPagePermissionMutation();
+
+  const hasInheritedRestriction = restrictionInfo.hasInheritedRestriction;
+  const hasDirectRestriction = restrictionInfo.hasDirectRestriction;
+  const canManage = restrictionInfo.userAccess.canManage;
+
+  const handleDirectAccessChange = async (value: "open" | "restricted") => {
+    if (value === "restricted" && !hasDirectRestriction) {
+      await restrictMutation.mutateAsync(pageId);
+    } else if (value === "open" && hasDirectRestriction) {
+      await unrestrictMutation.mutateAsync(pageId);
+    }
+  };
+
+  const handleAddMembers = async () => {
+    if (memberIds.length === 0) return;
+
+    const userIds = memberIds
+      .filter((id) => id.startsWith("user-"))
+      .map((id) => id.replace("user-", ""));
+
+    const groupIds = memberIds
+      .filter((id) => id.startsWith("group-"))
+      .map((id) => id.replace("group-", ""));
+
+    await addPermissionMutation.mutateAsync({
+      pageId,
+      role: role as PagePermissionRole,
+      ...(userIds.length > 0 && { userIds }),
+      ...(groupIds.length > 0 && { groupIds }),
+    });
+
+    setMemberIds([]);
+  };
+
+  const handleRemoveAll = async () => {
+    await unrestrictMutation.mutateAsync(pageId);
+  };
+
+  return (
+    <Stack gap="md">
+      {hasInheritedRestriction && (
+        <Paper className={classes.inheritedSection} p="sm" radius="sm">
+          <Group gap="sm" wrap="nowrap">
+            <ThemeIcon
+              size="lg"
+              radius="sm"
+              variant="light"
+              color="orange"
+            >
+              <IconShieldLock size={18} stroke={1.5} />
+            </ThemeIcon>
+            <Box style={{ flex: 1 }}>
+              <Text size="sm" fw={500}>
+                {t("Inherited restriction")}
+              </Text>
+              <Group gap={4}>
+                <Text size="xs" c="dimmed">
+                  {t("Access limited by")}
+                </Text>
+                <Link
+                  to={buildPageUrl(
+                    spaceSlug,
+                    restrictionInfo.id,
+                    restrictionInfo.title,
+                  )}
+                  style={{ textDecoration: "none" }}
+                >
+                  <Group gap={2}>
+                    <Text size="xs" fw={500} c="blue">
+                      {restrictionInfo.title || t("Untitled")}
+                    </Text>
+                    <IconArrowRight size={12} color="var(--mantine-color-blue-6)" />
+                  </Group>
+                </Link>
+              </Group>
+            </Box>
+          </Group>
+        </Paper>
+      )}
+
+      <Box>
+        <Text size="sm" fw={500} mb="xs">
+          {t("This page")}
+        </Text>
+        <GeneralAccessSelect
+          value={hasDirectRestriction ? "restricted" : "open"}
+          onChange={handleDirectAccessChange}
+          disabled={!canManage}
+          hasInheritedRestriction={hasInheritedRestriction}
+        />
+        {!hasDirectRestriction && !hasInheritedRestriction && (
+          <Text size="xs" c="dimmed" mt={4}>
+            {t("Everyone in this space can access this page")}
+          </Text>
+        )}
+        {!hasDirectRestriction && hasInheritedRestriction && (
+          <Text size="xs" c="dimmed" mt={4}>
+            {t("Add additional restrictions specific to this page")}
+          </Text>
+        )}
+      </Box>
+
+      {hasDirectRestriction && (
+        <>
+          <Divider />
+
+          {canManage && (
+            <Group gap="xs" align="flex-end">
+              <Box style={{ flex: 1 }}>
+                <MultiMemberSelect value={memberIds} onChange={setMemberIds} />
+              </Box>
+              <Select
+                data={pagePermissionRoleData.map((r) => ({
+                  label: t(r.label),
+                  value: r.value,
+                }))}
+                value={role}
+                onChange={(value) => value && setRole(value)}
+                allowDeselect={false}
+                variant="filled"
+                w={120}
+              />
+              <Button
+                onClick={handleAddMembers}
+                disabled={memberIds.length === 0}
+                loading={addPermissionMutation.isPending}
+              >
+                {t("Add")}
+              </Button>
+            </Group>
+          )}
+
+          {isLoading ? (
+            <Group justify="center" py="md">
+              <Loader size="sm" />
+            </Group>
+          ) : (
+            <PagePermissionList
+              pageId={pageId}
+              members={permissionsData?.items || []}
+              canManage={canManage}
+              onRemoveAll={handleRemoveAll}
+            />
+          )}
+        </>
+      )}
+    </Stack>
+  );
+}

apps/client/src/ee/page-permission/components/page-permission.module.css

@@ -0,0 +1,128 @@
+.generalAccessBox {
+  display: flex;
+  align-items: center;
+  gap: var(--mantine-spacing-sm);
+  padding: var(--mantine-spacing-xs) 0;
+}
+
+.generalAccessIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: var(--mantine-radius-sm);
+
+  @mixin light {
+    background-color: var(--mantine-color-gray-1);
+  }
+  @mixin dark {
+    background-color: var(--mantine-color-dark-5);
+  }
+}
+
+.generalAccessIconRestricted {
+  @mixin light {
+    background-color: var(--mantine-color-red-0);
+    color: var(--mantine-color-red-6);
+  }
+  @mixin dark {
+    background-color: rgba(250, 82, 82, 0.1);
+    color: var(--mantine-color-red-5);
+  }
+}
+
+.permissionItem {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--mantine-spacing-xs) 0;
+  gap: var(--mantine-spacing-sm);
+}
+
+.permissionItemInfo {
+  display: flex;
+  align-items: center;
+  gap: var(--mantine-spacing-sm);
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.permissionItemDetails {
+  min-width: 0;
+  flex: 1;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.permissionItemRole {
+  flex-shrink: 0;
+}
+
+.avatarStack {
+  display: flex;
+  align-items: center;
+}
+
+.avatarStackItem {
+  margin-left: -8px;
+  border: 2px solid var(--mantine-color-body);
+  border-radius: 50%;
+}
+
+.avatarStackItem:first-child {
+  margin-left: 0;
+}
+
+.specificAccessHeader {
+  display: flex;
+  align-items: center;
+  gap: var(--mantine-spacing-xs);
+  margin-top: var(--mantine-spacing-md);
+  margin-bottom: var(--mantine-spacing-xs);
+}
+
+.removeAllLink {
+  cursor: pointer;
+  font-size: var(--mantine-font-size-sm);
+
+  @mixin light {
+    color: var(--mantine-color-gray-6);
+  }
+  @mixin dark {
+    color: var(--mantine-color-dark-2);
+  }
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.inheritedInfo {
+  display: flex;
+  align-items: center;
+  gap: var(--mantine-spacing-xs);
+  padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
+  border-radius: var(--mantine-radius-sm);
+  margin-bottom: var(--mantine-spacing-sm);
+
+  @mixin light {
+    background-color: var(--mantine-color-gray-0);
+  }
+  @mixin dark {
+    background-color: var(--mantine-color-dark-6);
+  }
+}
+
+.inheritedSection {
+  @mixin light {
+    background-color: var(--mantine-color-orange-0);
+    border: 1px solid var(--mantine-color-orange-2);
+  }
+  @mixin dark {
+    background-color: rgba(255, 146, 43, 0.08);
+    border: 1px solid rgba(255, 146, 43, 0.2);
+  }
+}

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

@@ -0,0 +1,99 @@
+import { useState } from "react";
+import {
+  Button,
+  Indicator,
+  Loader,
+  Modal,
+  Tabs,
+  Center,
+} from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+import { IconWorld, IconLock } from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+import { useParams } from "react-router-dom";
+import { extractPageSlugId } from "@/lib";
+import { usePageQuery } from "@/features/page/queries/page-query";
+import { usePageRestrictionInfoQuery } from "@/ee/page-permission/queries/page-permission-query";
+import { PagePermissionTab } from "@/ee/page-permission";
+import { PublishTab } from "./publish-tab";
+import { useShareForPageQuery } from "@/features/share/queries/share-query";
+
+type PageShareModalProps = {
+  readOnly?: boolean;
+};
+
+export function PageShareModal({ readOnly }: PageShareModalProps) {
+  const { t } = useTranslation();
+  const { pageSlug } = useParams();
+  const pageSlugId = extractPageSlugId(pageSlug);
+  const [opened, { open, close }] = useDisclosure(false);
+  const [activeTab, setActiveTab] = useState<string | null>("share");
+
+  const { data: page } = usePageQuery({ pageId: pageSlugId });
+  const pageId = page?.id;
+  const isRestricted = page?.permissions?.hasRestriction ?? false;
+
+  const { data: share } = useShareForPageQuery(pageId);
+  const isPubliclyShared = !!share;
+
+  const { data: restrictionInfo, isLoading: restrictionLoading } =
+    usePageRestrictionInfoQuery(opened ? pageId : undefined);
+
+  return (
+    <>
+      <Button
+        style={{ border: "none" }}
+        size="compact-sm"
+        leftSection={
+          <Indicator
+            color={isRestricted ? "red" : "green"}
+            offset={5}
+            disabled={!isRestricted && !isPubliclyShared}
+            withBorder
+          >
+            {isRestricted ? (
+              <IconLock size={20} stroke={1.5} />
+            ) : (
+              <IconWorld size={20} stroke={1.5} />
+            )}
+          </Indicator>
+        }
+        variant="default"
+        onClick={open}
+      >
+        {t("Share")}
+      </Button>
+
+      <Modal
+        opened={opened}
+        onClose={close}
+        title={t("Share")}
+        size={600}
+      >
+        <Tabs value={activeTab} onChange={setActiveTab}>
+          <Tabs.List mb="md">
+            <Tabs.Tab value="share">{t("Share")}</Tabs.Tab>
+            <Tabs.Tab value="publish">{t("Publish")}</Tabs.Tab>
+          </Tabs.List>
+
+          <Tabs.Panel value="share">
+            {restrictionLoading || !pageId ? (
+              <Center py="xl">
+                <Loader size="sm" />
+              </Center>
+            ) : (
+              <PagePermissionTab
+                pageId={pageId}
+                restrictionInfo={restrictionInfo}
+              />
+            )}
+          </Tabs.Panel>
+
+          <Tabs.Panel value="publish">
+            <PublishTab pageId={pageId} readOnly={readOnly} />
+          </Tabs.Panel>
+        </Tabs>
+      </Modal>
+    </>
+  );
+}

apps/client/src/ee/page-permission/components/publish-tab.tsx

@@ -0,0 +1,221 @@
+import { useEffect, useMemo, useState } from "react";
+import {
+  ActionIcon,
+  Anchor,
+  Button,
+  Group,
+  Stack,
+  Switch,
+  Text,
+  TextInput,
+} from "@mantine/core";
+import { IconExternalLink, IconLock } from "@tabler/icons-react";
+import { Link, useNavigate, useParams } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { getPageIcon } from "@/lib";
+import CopyTextButton from "@/components/common/copy";
+import { getAppUrl, isCloud } from "@/lib/config";
+import { buildPageUrl } from "@/features/page/page.utils";
+import {
+  useCreateShareMutation,
+  useDeleteShareMutation,
+  useShareForPageQuery,
+  useUpdateShareMutation,
+} from "@/features/share/queries/share-query";
+import useTrial from "@/ee/hooks/use-trial";
+
+type PublishTabProps = {
+  pageId: string;
+  readOnly?: boolean;
+};
+
+export function PublishTab({ pageId, readOnly }: PublishTabProps) {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { pageSlug, spaceSlug } = useParams();
+  const { isTrial } = useTrial();
+
+  const { data: share } = useShareForPageQuery(pageId);
+  const createShareMutation = useCreateShareMutation();
+  const updateShareMutation = useUpdateShareMutation();
+  const deleteShareMutation = useDeleteShareMutation();
+
+  const pageIsShared = share && share.level === 0;
+  const isDescendantShared = share && share.level > 0;
+
+  const publicLink = `${getAppUrl()}/share/${share?.key}/p/${pageSlug}`;
+
+  const [isPagePublic, setIsPagePublic] = useState<boolean>(false);
+
+  useEffect(() => {
+    setIsPagePublic(!!share);
+  }, [share, pageId]);
+
+  const handleChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = event.currentTarget.checked;
+
+    if (value) {
+      createShareMutation.mutateAsync({
+        pageId: pageId,
+        includeSubPages: true,
+        searchIndexing: false,
+      });
+      setIsPagePublic(value);
+    } else {
+      if (share && share.id) {
+        deleteShareMutation.mutateAsync(share.id);
+        setIsPagePublic(value);
+      }
+    }
+  };
+
+  const handleSubPagesChange = async (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    const value = event.currentTarget.checked;
+    updateShareMutation.mutateAsync({
+      shareId: share.id,
+      includeSubPages: value,
+    });
+  };
+
+  const handleIndexSearchChange = async (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    const value = event.currentTarget.checked;
+    updateShareMutation.mutateAsync({
+      shareId: share.id,
+      searchIndexing: value,
+    });
+  };
+
+  const shareLink = useMemo(
+    () => (
+      <Group my="sm" gap={4} wrap="nowrap">
+        <TextInput
+          variant="filled"
+          value={publicLink}
+          readOnly
+          rightSection={<CopyTextButton text={publicLink} />}
+          style={{ width: "100%" }}
+        />
+        <ActionIcon
+          component="a"
+          variant="default"
+          target="_blank"
+          href={publicLink}
+          size="sm"
+        >
+          <IconExternalLink size={16} />
+        </ActionIcon>
+      </Group>
+    ),
+    [publicLink],
+  );
+
+  if (isCloud() && isTrial) {
+    return (
+      <Stack align="center" py="md">
+        <IconLock size={20} stroke={1.5} />
+        <Text size="sm" ta="center" fw={500}>
+          {t("Upgrade to share pages")}
+        </Text>
+        <Text size="sm" c="dimmed" ta="center">
+          {t(
+            "Page sharing is available on paid plans. Upgrade to share your pages publicly.",
+          )}
+        </Text>
+        <Button size="xs" onClick={() => navigate("/settings/billing")}>
+          {t("Upgrade Plan")}
+        </Button>
+      </Stack>
+    );
+  }
+
+  if (isDescendantShared) {
+    return (
+      <Stack gap="sm">
+        <Text size="sm">{t("Inherits public sharing from")}</Text>
+        <Anchor
+          size="sm"
+          underline="never"
+          style={{
+            cursor: "pointer",
+            color: "var(--mantine-color-text)",
+          }}
+          component={Link}
+          to={buildPageUrl(
+            spaceSlug,
+            share.sharedPage.slugId,
+            share.sharedPage.title,
+          )}
+        >
+          <Group gap="4" wrap="nowrap">
+            {getPageIcon(share.sharedPage.icon)}
+            <Text fz="sm" fw={500} lineClamp={1}>
+              {share.sharedPage.title || t("untitled")}
+            </Text>
+          </Group>
+        </Anchor>
+        {shareLink}
+      </Stack>
+    );
+  }
+
+  return (
+    <Stack gap="sm">
+      <Group justify="space-between" wrap="nowrap" gap="xl">
+        <div>
+          <Text size="sm">
+            {isPagePublic ? t("Shared to web") : t("Share to web")}
+          </Text>
+          <Text size="xs" c="dimmed">
+            {isPagePublic
+              ? t("Anyone with the link can view this page")
+              : t("Make this page publicly accessible")}
+          </Text>
+        </div>
+        <Switch
+          onChange={handleChange}
+          checked={isPagePublic}
+          disabled={readOnly}
+          size="xs"
+        />
+      </Group>
+
+      {pageIsShared && (
+        <>
+          {shareLink}
+          <Group justify="space-between" wrap="nowrap" gap="xl">
+            <div>
+              <Text size="sm">{t("Include sub-pages")}</Text>
+              <Text size="xs" c="dimmed">
+                {t("Make sub-pages public too")}
+              </Text>
+            </div>
+            <Switch
+              onChange={handleSubPagesChange}
+              checked={share.includeSubPages}
+              size="xs"
+              disabled={readOnly}
+            />
+          </Group>
+          <Group justify="space-between" wrap="nowrap" gap="xl">
+            <div>
+              <Text size="sm">{t("Search engine indexing")}</Text>
+              <Text size="xs" c="dimmed">
+                {t("Allow search engines to index page")}
+              </Text>
+            </div>
+            <Switch
+              onChange={handleIndexSearchChange}
+              checked={share.searchIndexing}
+              size="xs"
+              disabled={readOnly}
+            />
+          </Group>
+        </>
+      )}
+    </Stack>
+  );
+}

apps/client/src/ee/page-permission/hooks/use-page-permission.ts

@@ -0,0 +1,26 @@
+import { useSpaceAbility } from "@/features/space/permissions/use-space-ability";
+import {
+  SpaceCaslAction,
+  SpaceCaslSubject,
+} from "@/features/space/permissions/permissions.type";
+import { usePageRestrictionInfoQuery } from "@/ee/page-permission/queries/page-permission-query";
+
+export function usePagePermission(pageId: string, spaceRules: any) {
+  const spaceAbility = useSpaceAbility(spaceRules);
+  const { data: restrictionInfo, isLoading } =
+    usePageRestrictionInfoQuery(pageId);
+
+  if (isLoading || !restrictionInfo) {
+    return { canEdit: false, restrictionInfo: undefined };
+  }
+
+  const hasRestriction =
+    restrictionInfo.hasDirectRestriction ||
+    restrictionInfo.hasInheritedRestriction;
+
+  const canEdit = hasRestriction
+    ? (restrictionInfo.userAccess?.canEdit ?? false)
+    : spaceAbility.can(SpaceCaslAction.Manage, SpaceCaslSubject.Page);
+
+  return { canEdit, restrictionInfo };
+}

apps/client/src/ee/page-permission/index.ts

@@ -0,0 +1,11 @@
+export * from "./components/page-share-modal";
+export * from "./components/page-permission-tab";
+export * from "./components/publish-tab";
+export * from "./components/page-permission-list";
+export * from "./components/page-permission-item";
+export * from "./components/general-access-select";
+export * from "./hooks/use-page-permission";
+export * from "./queries/page-permission-query";
+export * from "./services/page-permission-service";
+export * from "./types/page-permission.types";
+export * from "./types/page-permission-role-data";

apps/client/src/ee/page-permission/queries/page-permission-query.ts

@@ -0,0 +1,159 @@
+import {
+  keepPreviousData,
+  useMutation,
+  useQuery,
+  useQueryClient,
+  UseQueryResult,
+} from "@tanstack/react-query";
+import {
+  IAddPagePermission,
+  IPagePermissionMember,
+  IPageRestrictionInfo,
+  IRemovePagePermission,
+  IUpdatePagePermissionRole,
+} from "@/ee/page-permission/types/page-permission.types";
+import {
+  addPagePermission,
+  getPagePermissions,
+  getPageRestrictionInfo,
+  removePagePermission,
+  restrictPage,
+  unrestrictPage,
+  updatePagePermissionRole,
+} from "@/ee/page-permission/services/page-permission-service";
+import { notifications } from "@mantine/notifications";
+import { IPagination, QueryParams } from "@/lib/types";
+import { useTranslation } from "react-i18next";
+
+export function usePageRestrictionInfoQuery(
+  pageId: string | undefined,
+): UseQueryResult<IPageRestrictionInfo, Error> {
+  return useQuery({
+    queryKey: ["page-restriction-info", pageId],
+    queryFn: () => getPageRestrictionInfo(pageId),
+    enabled: !!pageId,
+  });
+}
+
+export function usePagePermissionsQuery(
+  pageId: string,
+  params?: QueryParams,
+): UseQueryResult<IPagination<IPagePermissionMember>, Error> {
+  return useQuery({
+    queryKey: ["page-permissions", pageId, params],
+    queryFn: () => getPagePermissions(pageId, params),
+    enabled: !!pageId,
+    placeholderData: keepPreviousData,
+  });
+}
+
+export function useRestrictPageMutation() {
+  const queryClient = useQueryClient();
+  const { t } = useTranslation();
+
+  return useMutation<void, Error, string>({
+    mutationFn: (pageId) => restrictPage(pageId),
+    onSuccess: (_, pageId) => {
+      queryClient.invalidateQueries({
+        queryKey: ["page-restriction-info", pageId],
+      });
+      queryClient.invalidateQueries({
+        queryKey: ["page-permissions", pageId],
+      });
+    },
+    onError: (error) => {
+      const errorMessage = error["response"]?.data?.message;
+      notifications.show({
+        message: errorMessage || t("Failed to restrict page"),
+        color: "red",
+      });
+    },
+  });
+}
+
+export function useUnrestrictPageMutation() {
+  const queryClient = useQueryClient();
+  const { t } = useTranslation();
+
+  return useMutation<void, Error, string>({
+    mutationFn: (pageId) => unrestrictPage(pageId),
+    onSuccess: (_, pageId) => {
+      queryClient.invalidateQueries({
+        queryKey: ["page-restriction-info", pageId],
+      });
+      queryClient.invalidateQueries({
+        queryKey: ["page-permissions", pageId],
+      });
+    },
+    onError: (error) => {
+      const errorMessage = error["response"]?.data?.message;
+      notifications.show({
+        message: errorMessage || t("Failed to remove page restriction"),
+        color: "red",
+      });
+    },
+  });
+}
+
+export function useAddPagePermissionMutation() {
+  const queryClient = useQueryClient();
+  const { t } = useTranslation();
+
+  return useMutation<void, Error, IAddPagePermission>({
+    mutationFn: (data) => addPagePermission(data),
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({
+        queryKey: ["page-permissions", variables.pageId],
+      });
+    },
+    onError: (error) => {
+      const errorMessage = error["response"]?.data?.message;
+      notifications.show({
+        message: errorMessage || t("Failed to add permission"),
+        color: "red",
+      });
+    },
+  });
+}
+
+export function useRemovePagePermissionMutation() {
+  const queryClient = useQueryClient();
+  const { t } = useTranslation();
+
+  return useMutation<void, Error, IRemovePagePermission>({
+    mutationFn: (data) => removePagePermission(data),
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({
+        queryKey: ["page-permissions", variables.pageId],
+      });
+    },
+    onError: (error) => {
+      const errorMessage = error["response"]?.data?.message;
+      notifications.show({
+        message: errorMessage || t("Failed to remove permission"),
+        color: "red",
+      });
+    },
+  });
+}
+
+export function useUpdatePagePermissionRoleMutation() {
+  const queryClient = useQueryClient();
+  const { t } = useTranslation();
+
+  return useMutation<void, Error, IUpdatePagePermissionRole>({
+    mutationFn: (data) => updatePagePermissionRole(data),
+    onSuccess: (_, variables) => {
+      queryClient.refetchQueries({
+        queryKey: ["page-permissions", variables.pageId],
+      });
+    },
+    onError: (error) => {
+      const errorMessage = error["response"]?.data?.message;
+      notifications.show({
+        message: errorMessage || t("Failed to update permission"),
+        color: "red",
+      });
+    },
+  });
+}

apps/client/src/ee/page-permission/services/page-permission-service.ts

@@ -0,0 +1,55 @@
+import api from "@/lib/api-client";
+import { IPagination, QueryParams } from "@/lib/types";
+import {
+  IAddPagePermission,
+  IPagePermissionMember,
+  IPageRestrictionInfo,
+  IRemovePagePermission,
+  IUpdatePagePermissionRole,
+} from "@/ee/page-permission/types/page-permission.types";
+
+export async function restrictPage(pageId: string): Promise<void> {
+  await api.post("/pages/restrict", { pageId });
+}
+
+export async function addPagePermission(
+  data: IAddPagePermission,
+): Promise<void> {
+  await api.post("/pages/add-permission", data);
+}
+
+export async function removePagePermission(
+  data: IRemovePagePermission,
+): Promise<void> {
+  await api.post("/pages/remove-permission", data);
+}
+
+export async function updatePagePermissionRole(
+  data: IUpdatePagePermissionRole,
+): Promise<void> {
+  await api.post("/pages/update-permission", data);
+}
+
+export async function unrestrictPage(pageId: string): Promise<void> {
+  await api.post("/pages/remove-restriction", { pageId });
+}
+
+export async function getPagePermissions(
+  pageId: string,
+  params?: QueryParams,
+): Promise<IPagination<IPagePermissionMember>> {
+  const req = await api.post<IPagination<IPagePermissionMember>>(
+    "/pages/permissions",
+    { pageId, ...params },
+  );
+  return req.data;
+}
+
+export async function getPageRestrictionInfo(
+  pageId: string,
+): Promise<IPageRestrictionInfo> {
+  const req = await api.post<IPageRestrictionInfo>("/pages/permission-info", {
+    pageId,
+  });
+  return req.data;
+}

apps/client/src/ee/page-permission/types/page-permission-role-data.ts

@@ -0,0 +1,20 @@
+import { IRoleData } from "@/lib/types";
+import { PagePermissionRole } from "./page-permission.types";
+
+export const pagePermissionRoleData: IRoleData[] = [
+  {
+    label: "Can edit",
+    value: PagePermissionRole.WRITER,
+    description: "Can edit page and manage access",
+  },
+  {
+    label: "Can view",
+    value: PagePermissionRole.READER,
+    description: "Can only view page",
+  },
+];
+
+export function getPagePermissionRoleLabel(value: string): string | undefined {
+  const role = pagePermissionRoleData.find((item) => item.value === value);
+  return role ? role.label : undefined;
+}

apps/client/src/ee/page-permission/types/page-permission.types.ts

@@ -0,0 +1,57 @@
+export enum PagePermissionRole {
+  READER = "reader",
+  WRITER = "writer",
+}
+
+export type IAddPagePermission = {
+  pageId: string;
+  role: PagePermissionRole;
+  userIds?: string[];
+  groupIds?: string[];
+};
+
+export type IRemovePagePermission = {
+  pageId: string;
+  userIds?: string[];
+  groupIds?: string[];
+};
+
+export type IUpdatePagePermissionRole = {
+  pageId: string;
+  role: PagePermissionRole;
+  userId?: string;
+  groupId?: string;
+};
+
+export type IPageRestrictionInfo = {
+  id: string;
+  title: string;
+  hasDirectRestriction: boolean;
+  hasInheritedRestriction: boolean;
+  userAccess: {
+    canView: boolean;
+    canEdit: boolean;
+    canManage: boolean;
+  };
+};
+
+type IPagePermissionBase = {
+  id: string;
+  name: string;
+  role: string;
+  createdAt: string;
+};
+
+export type IPagePermissionUser = IPagePermissionBase & {
+  type: "user";
+  email: string;
+  avatarUrl: string | null;
+};
+
+export type IPagePermissionGroup = IPagePermissionBase & {
+  type: "group";
+  memberCount: number;
+  isDefault: boolean;
+};
+
+export type IPagePermissionMember = IPagePermissionUser | IPagePermissionGroup;

apps/client/src/ee/security/components/disable-public-sharing.tsx

@@ -0,0 +1,88 @@
+import { Group, Text, Switch, Tooltip } from "@mantine/core";
+import { modals } from "@mantine/modals";
+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 useEnterpriseAccess from "@/ee/hooks/use-enterprise-access.tsx";
+
+export default function DisablePublicSharing() {
+  const { t } = useTranslation();
+
+  return (
+    <Group justify="space-between" wrap="nowrap" gap="xl">
+        <div>
+          <Text size="md">{t("Disable public sharing")}</Text>
+          <Text size="sm" c="dimmed">
+            {t("Prevent members from sharing pages publicly.")}
+          </Text>
+        </div>
+
+        <DisablePublicSharingToggle />
+    </Group>
+  );
+}
+
+function DisablePublicSharingToggle() {
+  const { t } = useTranslation();
+  const [workspace, setWorkspace] = useAtom(workspaceAtom);
+  const [checked, setChecked] = useState(
+    workspace?.settings?.sharing?.disabled === true,
+  );
+  const hasAccess = useEnterpriseAccess();
+
+  const applyChange = async (value: boolean) => {
+    try {
+      const updatedWorkspace = await updateWorkspace({
+        disablePublicSharing: value,
+      });
+      setChecked(value);
+      setWorkspace(updatedWorkspace);
+    } catch (err) {
+      notifications.show({
+        message: err?.response?.data?.message,
+        color: "red",
+      });
+    }
+  };
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = event.currentTarget.checked;
+
+    modals.openConfirmModal({
+      title: value ? t("Disable public sharing") : t("Enable public sharing"),
+      children: (
+        <Text size="sm">
+          {value
+            ? t(
+                "Are you sure you want to disable public sharing? All existing shared links in this workspace will be deleted.",
+              )
+            : t(
+                "Are you sure you want to enable public sharing? Members will be able to share pages publicly.",
+              )}
+        </Text>
+      ),
+      centered: true,
+      labels: { confirm: t("Confirm"), cancel: t("Cancel") },
+      confirmProps: value ? { color: "red" } : {},
+      onConfirm: () => applyChange(value),
+    });
+  };
+
+  return (
+    <Tooltip
+      label={t("Requires an enterprise license")}
+      disabled={hasAccess}
+      refProp="rootRef"
+    >
+      <Switch
+        checked={checked}
+        onChange={handleChange}
+        disabled={!hasAccess}
+        aria-label={t("Toggle public sharing")}
+      />
+    </Tooltip>
+  );
+}

apps/client/src/ee/security/components/enforce-mfa.tsx

@@ -10,23 +10,18 @@ export default function EnforceMfa() {
   const { t } = useTranslation();
 
   return (
-    <>
-      <Title order={4} my="sm">
-        MFA
-      </Title>
-      <Group justify="space-between" wrap="nowrap" gap="xl">
-        <div>
-          <Text size="md">{t("Enforce two-factor authentication")}</Text>
-          <Text size="sm" c="dimmed">
-            {t(
-              "Once enforced, all members must enable two-factor authentication to access the workspace.",
-            )}
-          </Text>
-        </div>
+    <Group justify="space-between" wrap="nowrap" gap="xl">
+      <div>
+        <Text size="md">{t("Enforce two-factor authentication")}</Text>
+        <Text size="sm" c="dimmed">
+          {t(
+            "Once enforced, all members must enable two-factor authentication to access the workspace.",
+          )}
+        </Text>
+      </div>
 
-        <EnforceMfaToggle />
-      </Group>
-    </>
+      <EnforceMfaToggle />
+    </Group>
   );
 }
 

apps/client/src/ee/security/components/space-public-sharing-toggle.tsx

@@ -0,0 +1,84 @@
+import { Group, Text, Switch, Tooltip } from "@mantine/core";
+import { modals } from "@mantine/modals";
+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 { ISpace } from "@/features/space/types/space.types.ts";
+import { useUpdateSpaceMutation } from "@/features/space/queries/space-query.ts";
+
+type SpacePublicSharingToggleProps = {
+  space: ISpace;
+};
+
+export default function SpacePublicSharingToggle({
+  space,
+}: SpacePublicSharingToggleProps) {
+  const { t } = useTranslation();
+  const [workspace] = useAtom(workspaceAtom);
+  const workspaceDisabled = workspace?.settings?.sharing?.disabled === true;
+  const [checked, setChecked] = useState(
+    space.settings?.sharing?.disabled === true,
+  );
+  const updateSpaceMutation = useUpdateSpaceMutation();
+
+  const applyChange = async (value: boolean) => {
+    try {
+      await updateSpaceMutation.mutateAsync({
+        spaceId: space.id,
+        disablePublicSharing: value,
+      });
+      setChecked(value);
+    } catch {
+      // error handled by mutation
+    }
+  };
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = event.currentTarget.checked;
+
+    modals.openConfirmModal({
+      title: value ? t("Disable public sharing") : t("Enable public sharing"),
+      children: (
+        <Text size="sm">
+          {value
+            ? t(
+                "Are you sure you want to disable public sharing? All existing shared links in this space will be deleted.",
+              )
+            : t(
+                "Are you sure you want to enable public sharing for this space?",
+              )}
+        </Text>
+      ),
+      centered: true,
+      labels: { confirm: t("Confirm"), cancel: t("Cancel") },
+      confirmProps: value ? { color: "red" } : {},
+      onConfirm: () => applyChange(value),
+    });
+  };
+
+  return (
+    <Group justify="space-between" wrap="nowrap" gap="xl">
+      <div>
+        <Text size="md">{t("Disable public sharing")}</Text>
+        <Text size="sm" c="dimmed">
+          {workspaceDisabled
+            ? t("Public sharing is disabled at the workspace level")
+            : t("Prevent pages in this space from being shared publicly.")}
+        </Text>
+      </div>
+      <Tooltip
+        label={t("Public sharing is disabled at the workspace level")}
+        disabled={!workspaceDisabled}
+        refProp="rootRef"
+      >
+        <Switch
+          checked={checked}
+          onChange={handleChange}
+          disabled={workspaceDisabled}
+          aria-label={t("Toggle space public sharing")}
+        />
+      </Tooltip>
+    </Group>
+  );
+}

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

@@ -9,15 +9,16 @@ import CreateSsoProvider from "@/ee/security/components/create-sso-provider.tsx"
 import EnforceSso from "@/ee/security/components/enforce-sso.tsx";
 import AllowedDomains from "@/ee/security/components/allowed-domains.tsx";
 import { useTranslation } from "react-i18next";
-import useLicense from "@/ee/hooks/use-license.tsx";
-import usePlan from "@/ee/hooks/use-plan.tsx";
 import EnforceMfa from "@/ee/security/components/enforce-mfa.tsx";
+import DisablePublicSharing from "@/ee/security/components/disable-public-sharing.tsx";
+import useEnterpriseAccess from "@/ee/hooks/use-enterprise-access.tsx";
+import { useIsCloudEE } from "@/hooks/use-is-cloud-ee.tsx";
 
 export default function Security() {
   const { t } = useTranslation();
   const { isAdmin } = useUserRole();
-  const { hasLicenseKey } = useLicense();
-  const { isBusiness } = usePlan();
+  const hasEnterpriseAccess = useEnterpriseAccess();
+  const isCloudEE = useIsCloudEE();
 
   if (!isAdmin) {
     return null;
@@ -30,26 +31,41 @@ export default function Security() {
       </Helmet>
       <SettingsTitle title={t("Security")} />
 
-      <AllowedDomains />
-
-      <Divider my="lg" />
-
       <EnforceMfa />
 
       <Divider my="lg" />
 
+      {(!isCloud() || hasEnterpriseAccess) && (
+        <>
+          <DisablePublicSharing />
+          <Divider my="lg" />
+        </>
+      )}
+
       <Title order={4} my="lg">
         Single sign-on (SSO)
       </Title>
 
-      {(isCloud() && isBusiness) || (!isCloud() && hasLicenseKey) ? (
+      {hasEnterpriseAccess && (
         <>
           <EnforceSso />
           <Divider my="lg" />
+        </>
+      )}
+
+      {isCloudEE && (
+        <>
+          <AllowedDomains />
+          <Divider my="lg" />
+        </>
+      )}
+
+      {hasEnterpriseAccess && (
+        <>
           <CreateSsoProvider />
           <Divider size={0} my="lg" />
         </>
-      ) : null}
+      )}
 
       <SsoProviderList />
     </>

apps/client/src/features/attachments/services/attachment-service.ts

@@ -1,20 +1,62 @@
 import api from "@/lib/api-client";
+import loadImage from "blueimp-load-image";
 import {
   AvatarIconType,
   IAttachment,
 } from "@/features/attachments/types/attachment.types.ts";
 
+async function compressAndResizeIcon(
+  file: File,
+  type: AvatarIconType,
+): Promise<File> {
+  const isPng = file.type === "image/png";
+
+  const { image: canvas } = await loadImage(file, {
+    maxWidth: 300,
+    maxHeight: 300,
+    canvas: true,
+    orientation: true,
+    imageSmoothingQuality: "high",
+  });
+
+  if (type === AvatarIconType.AVATAR || !isPng) {
+    const ctx = (canvas as HTMLCanvasElement).getContext("2d")!;
+    ctx.globalCompositeOperation = "destination-over";
+    ctx.fillStyle = "#ffffff";
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    ctx.globalCompositeOperation = "source-over";
+  }
+
+  const outputType = isPng ? "image/png" : "image/jpeg";
+
+  return new Promise<File>((resolve, reject) => {
+    (canvas as HTMLCanvasElement).toBlob(
+      (blob) => {
+        if (!blob) {
+          reject(new Error("Failed to compress image"));
+          return;
+        }
+        resolve(new File([blob], file.name, { type: outputType }));
+      },
+      outputType,
+      isPng ? undefined : 0.85,
+    );
+  });
+}
+
 export async function uploadIcon(
   file: File,
   type: AvatarIconType,
   spaceId?: string,
 ): Promise<IAttachment> {
+  const processed = await compressAndResizeIcon(file, type);
+
   const formData = new FormData();
   formData.append("type", type);
   if (spaceId) {
     formData.append("spaceId", spaceId);
   }
-  formData.append("image", file);
+  formData.append("image", processed);
 
   return await api.post("/attachments/upload-image", formData, {
     headers: {

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

@@ -23,7 +23,7 @@ import {
   acceptInvitation,
   createWorkspace,
 } from "@/features/workspace/services/workspace-service.ts";
-import APP_ROUTE from "@/lib/app-route.ts";
+import APP_ROUTE, { getPostLoginRedirect } from "@/lib/app-route.ts";
 import { RESET } from "jotai/utils";
 import { useTranslation } from "react-i18next";
 import { isCloud } from "@/lib/config.ts";
@@ -44,11 +44,11 @@ export default function useAuth() {
 
       // Check if MFA is required
       if (response?.userHasMfa) {
-        navigate(APP_ROUTE.AUTH.MFA_CHALLENGE);
+        navigate(APP_ROUTE.AUTH.MFA_CHALLENGE + window.location.search);
       } else if (response?.requiresMfaSetup) {
-        navigate(APP_ROUTE.AUTH.MFA_SETUP_REQUIRED);
+        navigate(APP_ROUTE.AUTH.MFA_SETUP_REQUIRED + window.location.search);
       } else {
-        navigate(APP_ROUTE.HOME);
+        navigate(getPostLoginRedirect());
       }
     } catch (err) {
       setIsLoading(false);

apps/client/src/features/auth/hooks/use-redirect-if-authenticated.ts

@@ -1,6 +1,6 @@
 import { useEffect } from "react";
 import useCurrentUser from "@/features/user/hooks/use-current-user.ts";
-import APP_ROUTE from "@/lib/app-route.ts";
+import { getPostLoginRedirect } from "@/lib/app-route.ts";
 import { useNavigate } from "react-router-dom";
 
 export function useRedirectIfAuthenticated() {
@@ -9,7 +9,7 @@ export function useRedirectIfAuthenticated() {
 
   useEffect(() => {
     if (data && data?.user) {
-      navigate(APP_ROUTE.HOME);
+      navigate(getPostLoginRedirect());
     }
   }, [isLoading, data]);
 }

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

@@ -31,6 +31,7 @@ function CommentDialog({ editor, pageId }: CommentDialogProps) {
   const [currentUser] = useAtom(currentUserAtom);
   const [, setAsideState] = useAtom(asideStateAtom);
   const useClickOutsideRef = useClickOutside(() => {
+    if (document.querySelector("#mention")) return;
     handleDialogClose();
   });
   const createCommentMutation = useCreateCommentMutation();
@@ -105,6 +106,7 @@ function CommentDialog({ editor, pageId }: CommentDialogProps) {
       position={{ bottom: 500, right: 50 }}
       withCloseButton
       withBorder
+      data-comment-dialog
     >
       <Stack gap={2}>
         <Group>

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

@@ -1,14 +1,15 @@
-import { EditorContent, useEditor } from "@tiptap/react";
+import { EditorContent, ReactNodeViewRenderer, useEditor } from "@tiptap/react";
 import { Placeholder } from "@tiptap/extension-placeholder";
-import { Underline } from "@tiptap/extension-underline";
-import { Link } from "@tiptap/extension-link";
 import { StarterKit } from "@tiptap/starter-kit";
+import { Mention, LinkExtension } from "@docmost/editor-ext";
 import classes from "./comment.module.css";
 import { useFocusWithin } from "@mantine/hooks";
 import clsx from "clsx";
 import { forwardRef, useEffect, useImperativeHandle } from "react";
 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";
 
 interface CommentEditorProps {
   defaultContent?: any;
@@ -39,13 +40,29 @@ const CommentEditor = forwardRef(
         StarterKit.configure({
           gapcursor: false,
           dropcursor: false,
+          link: false,
         }),
         Placeholder.configure({
           placeholder: placeholder || t("Reply..."),
         }),
-        Underline,
-        Link,
+        LinkExtension,
         EmojiCommand,
+        Mention.configure({
+          suggestion: {
+            allowSpaces: true,
+            items: () => [],
+            // @ts-ignore
+            render: mentionRenderItems,
+          },
+          HTMLAttributes: {
+            class: "mention",
+          },
+        }).extend({
+          addNodeView() {
+            this.editor.isInitialized = true;
+            return ReactNodeViewRenderer(MentionView);
+          },
+        }),
       ],
       editorProps: {
         handleDOMEvents: {
@@ -60,7 +77,8 @@ const CommentEditor = forwardRef(
               ].includes(event.key)
             ) {
               const emojiCommand = document.querySelector("#emoji-command");
-              if (emojiCommand) {
+              const mentionPopup = document.querySelector("#mention");
+              if (emojiCommand || mentionPopup) {
                 return true;
               }
             }
@@ -84,9 +102,14 @@ const CommentEditor = forwardRef(
       autofocus: (autofocus && "end") || false,
     });
 
+    // Sync content from props for read-only editors (e.g. when updated via
+    // websocket on another browser). Skip for editable editors to avoid
+    // resetting the cursor position on every keystroke.
     useEffect(() => {
-      commentEditor.commands.setContent(defaultContent);
-    }, [defaultContent]);
+      if (!editable && commentEditor && defaultContent) {
+        commentEditor.commands.setContent(defaultContent);
+      }
+    }, [defaultContent, editable, commentEditor]);
 
     useEffect(() => {
       setTimeout(() => {
@@ -103,7 +126,11 @@ const CommentEditor = forwardRef(
     }));
 
     return (
-      <div ref={focusRef} className={classes.commentEditor}>
+      <div
+        ref={focusRef}
+        className={classes.commentEditor}
+        data-editable={editable || undefined}
+      >
         <EditorContent
           editor={commentEditor}
           className={clsx(classes.ProseMirror, { [classes.focused]: focused })}

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

@@ -1,5 +1,5 @@
 import { Group, Text, Box, Badge } from "@mantine/core";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import classes from "./comment.module.css";
 import { useAtom, useAtomValue } from "jotai";
 import { timeAgo } from "@/lib/time";
@@ -40,6 +40,7 @@ function CommentListItem({
   const [isLoading, setIsLoading] = useState(false);
   const editor = useAtomValue(pageEditorAtom);
   const [content, setContent] = useState<string>(comment.content);
+  const editContentRef = useRef<any>(null);
   const updateCommentMutation = useUpdateCommentMutation();
   const deleteCommentMutation = useDeleteCommentMutation(comment.pageId);
   const resolveCommentMutation = useResolveCommentMutation();
@@ -56,9 +57,13 @@ function CommentListItem({
       setIsLoading(true);
       const commentToUpdate = {
         commentId: comment.id,
-        content: JSON.stringify(content),
+        content: JSON.stringify(editContentRef.current ?? content),
       };
       await updateCommentMutation.mutateAsync(commentToUpdate);
+      if (editContentRef.current) {
+        setContent(editContentRef.current);
+        editContentRef.current = null;
+      }
       setIsEditing(false);
 
       emit({
@@ -128,6 +133,7 @@ function CommentListItem({
     setIsEditing(true);
   }
   function cancelEdit() {
+    editContentRef.current = null;
     setIsEditing(false);
   }
 
@@ -194,7 +200,7 @@ function CommentListItem({
             <CommentEditor
               defaultContent={content}
               editable={true}
-              onUpdate={(newContent: any) => setContent(newContent)}
+              onUpdate={(newContent: any) => { editContentRef.current = newContent; }}
               onSave={handleUpdateComment}
               autofocus={true}
             />

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

@@ -17,11 +17,6 @@ import { useTranslation } from "react-i18next";
 import { useQueryEmit } from "@/features/websocket/use-query-emit";
 import { useIsCloudEE } from "@/hooks/use-is-cloud-ee";
 import { useGetSpaceBySlugQuery } from "@/features/space/queries/space-query.ts";
-import { useSpaceAbility } from "@/features/space/permissions/use-space-ability.ts";
-import {
-  SpaceCaslAction,
-  SpaceCaslSubject,
-} from "@/features/space/permissions/permissions.type.ts";
 
 function CommentListWithTabs() {
   const { t } = useTranslation();
@@ -38,14 +33,7 @@ function CommentListWithTabs() {
   const isCloudEE = useIsCloudEE();
   const { data: space } = useGetSpaceBySlugQuery(page?.space?.slug);
 
-  const spaceRules = space?.membership?.permissions;
-  const spaceAbility = useSpaceAbility(spaceRules);
-
-
-  const canComment: boolean = spaceAbility.can(
-    SpaceCaslAction.Manage,
-    SpaceCaslSubject.Page
-  );
+  const canComment = page?.permissions?.canEdit ?? false;
 
   // Separate active and resolved comments
   const { activeComments, resolvedComments } = useMemo(() => {
@@ -54,14 +42,14 @@ function CommentListWithTabs() {
     }
 
     const parentComments = comments.items.filter(
-      (comment: IComment) => comment.parentCommentId === null
+      (comment: IComment) => comment.parentCommentId === null,
     );
 
     const active = parentComments.filter(
-      (comment: IComment) => !comment.resolvedAt
+      (comment: IComment) => !comment.resolvedAt,
     );
     const resolved = parentComments.filter(
-      (comment: IComment) => comment.resolvedAt
+      (comment: IComment) => comment.resolvedAt,
     );
 
     return { activeComments: active, resolvedComments: resolved };
@@ -89,7 +77,7 @@ function CommentListWithTabs() {
         setIsLoading(false);
       }
     },
-    [createCommentMutation, page?.id]
+    [createCommentMutation, page?.id],
   );
 
   const renderComments = useCallback(
@@ -131,7 +119,7 @@ function CommentListWithTabs() {
         )}
       </Paper>
     ),
-    [comments, handleAddReply, isLoading, space?.membership?.role]
+    [comments, handleAddReply, isLoading, space?.membership?.role],
   );
 
   if (isCommentsLoading) {
@@ -199,7 +187,14 @@ function CommentListWithTabs() {
   }
 
   return (
-    <div style={{ height: "85vh", display: "flex", flexDirection: "column", marginTop: '-15px' }}>
+    <div
+      style={{
+        height: "85vh",
+        display: "flex",
+        flexDirection: "column",
+        marginTop: "-15px",
+      }}
+    >
       <Tabs defaultValue="open" variant="default" style={{ flex: "0 0 auto" }}>
         <Tabs.List justify="center">
           <Tabs.Tab
@@ -273,9 +268,9 @@ const ChildComments = ({
   const getChildComments = useCallback(
     (parentId: string) =>
       comments.items.filter(
-        (comment: IComment) => comment.parentCommentId === parentId
+        (comment: IComment) => comment.parentCommentId === parentId,
       ),
-    [comments.items]
+    [comments.items],
   );
 
   return (

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

@@ -32,11 +32,14 @@
         max-width: 100%;
         white-space: pre-wrap;
         word-break: break-word;
-        max-height: 20vh;
         padding-left: 6px;
         padding-right: 6px;
         margin-top: 10px;
         margin-bottom: 2px;
+    }
+
+    &[data-editable] .ProseMirror :global(.ProseMirror){
+        max-height: 50vh;
         overflow: hidden auto;
     }
 

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

@@ -8,3 +8,5 @@ export const titleEditorAtom = atom<Editor | null>(null);
 export const readOnlyEditorAtom = atom<Editor | null>(null);
 
 export const yjsConnectionStatusAtom = atom<string>("");
+
+export const showAiMenuAtom = atom(false);

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

@@ -1,11 +1,53 @@
 .bubbleMenu {
   display: flex;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  max-width: 100vw;
   width: fit-content;
-  border-radius: 2px;
+  box-shadow: 0 4px 12px light-dark(#cfcfcf, #0f0f0f);
+  border-radius: 6px;
   border: 1px solid
     light-dark(var(--mantine-color-gray-3), var(--mantine-color-gray-8));
+  background-color: light-dark(
+    var(--mantine-color-white),
+    var(--mantine-color-dark-6)
+  );
+
+  > * {
+    flex-shrink: 0;
+  }
+
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
 
   .active {
     color: light-dark(var(--mantine-color-blue-8), var(--mantine-color-gray-5));
   }
 }
+
+.buttonRoot {
+  height: 34px;
+  padding-left: rem(8);
+  padding-right: rem(4);
+  border: none;
+  border-radius: 6px;
+}
+
+.buttonSeparator {
+  border-right: 1px solid
+    light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4)) !important;
+}
+
+.divider {
+  width: 1px;
+  height: 16px;
+  align-self: center;
+  margin: 0 4px;
+  background-color: light-dark(
+    var(--mantine-color-gray-3),
+    var(--mantine-color-dark-3)
+  );
+}

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

@@ -9,10 +9,11 @@ import {
   IconStrikethrough,
   IconUnderline,
   IconMessage,
+  IconSparkles,
 } from "@tabler/icons-react";
 import clsx from "clsx";
 import classes from "./bubble-menu.module.css";
-import { ActionIcon, rem, Tooltip } from "@mantine/core";
+import { ActionIcon, Button, rem, Tooltip } from "@mantine/core";
 import { ColorSelector } from "./color-selector";
 import { NodeSelector } from "./node-selector";
 import { TextAlignmentSelector } from "./text-alignment-selector";
@@ -20,11 +21,13 @@ import {
   draftCommentIdAtom,
   showCommentPopupAtom,
 } from "@/features/comment/atoms/comment-atom";
-import { useAtom } from "jotai";
+import { useAtom, useAtomValue } from "jotai";
 import { v7 as uuid7 } from "uuid";
 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 } from "@/features/editor/atoms/editor-atoms";
+import { workspaceAtom } from "@/features/user/atoms/current-user-atom";
 
 export interface BubbleMenuItem {
   name: string;
@@ -39,14 +42,22 @@ type EditorBubbleMenuProps = Omit<BubbleMenuProps, "children" | "editor"> & {
 
 export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
   const { t } = useTranslation();
+  const [showAiMenu, setShowAiMenu] = useAtom(showAiMenuAtom);
   const [showCommentPopup, setShowCommentPopup] = useAtom(showCommentPopupAtom);
+  const workspace = useAtomValue(workspaceAtom);
+  const isGenerativeAiEnabled = workspace?.settings?.ai?.generative === true;
   const [, setDraftCommentId] = useAtom(draftCommentIdAtom);
   const showCommentPopupRef = useRef(showCommentPopup);
+  const showAiMenuRef = useRef(showAiMenu);
 
   useEffect(() => {
     showCommentPopupRef.current = showCommentPopup;
   }, [showCommentPopup]);
 
+  useEffect(() => {
+    showAiMenuRef.current = showAiMenu;
+  }, [showAiMenu]);
+
   const editorState = useEditorState({
     editor: props.editor,
     selector: (ctx) => {
@@ -123,6 +134,7 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
         empty ||
         isNodeSelection(selection) ||
         isCellSelection(selection) ||
+        showAiMenuRef.current ||
         showCommentPopupRef?.current
       ) {
         return false;
@@ -146,9 +158,31 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
   const [isLinkSelectorOpen, setIsLinkSelectorOpen] = useState(false);
   const [isColorSelectorOpen, setIsColorSelectorOpen] = useState(false);
 
+  // Hide the bubble menu immediately when AI menu is shown
+  if (showAiMenu) return;
+
   return (
-    <BubbleMenu {...bubbleMenuProps} style={{ zIndex: 200, position: "relative"}}>
+    <BubbleMenu
+      {...bubbleMenuProps}
+      style={{ zIndex: 200, position: "relative" }}
+    >
       <div className={classes.bubbleMenu}>
+        {isGenerativeAiEnabled && (
+          <>
+            <Button
+              variant="default"
+              className={clsx(classes.buttonRoot)}
+              radius="0"
+              leftSection={<IconSparkles size={16} />}
+              onClick={() => {
+                setShowAiMenu(true);
+              }}
+            >
+              {t("Ask AI")}
+            </Button>
+            <div className={classes.divider} />
+          </>
+        )}
         <NodeSelector
           editor={props.editor}
           isOpen={isNodeSelectorOpen}
@@ -212,16 +246,18 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
           }}
         />
 
-        <ActionIcon
-          variant="default"
-          size="lg"
-          radius="0"
-          aria-label={t(commentItem.name)}
-          style={{ border: "none" }}
-          onClick={commentItem.command}
-        >
-          <IconMessage size={16} stroke={2} />
-        </ActionIcon>
+        <Tooltip label={t(commentItem.name)} withArrow withinPortal={false}>
+          <ActionIcon
+            variant="default"
+            size="lg"
+            radius="6px"
+            aria-label={t(commentItem.name)}
+            style={{ border: "none" }}
+            onClick={commentItem.command}
+          >
+            <IconMessage size={16} stroke={2} />
+          </ActionIcon>
+        </Tooltip>
       </div>
     </BubbleMenu>
   );

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

@@ -1,7 +1,6 @@
 import React, { Dispatch, FC, SetStateAction } from "react";
-import { IconCheck, IconChevronDown, IconPalette } from "@tabler/icons-react";
+import { IconCheck, IconChevronDown } from "@tabler/icons-react";
 import {
-  ActionIcon,
   Button,
   Popover,
   rem,
@@ -15,6 +14,8 @@ import {
 import type { Editor } from "@tiptap/react";
 import { useEditorState } from "@tiptap/react";
 import { useTranslation } from "react-i18next";
+import clsx from "clsx";
+import classes from "./bubble-menu.module.css";
 
 export interface BubbleColorMenuItem {
   name: string;
@@ -166,14 +167,10 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
             onClick={() => setIsOpen(!isOpen)}
             data-text-color={activeColorItem?.color || ""}
             data-highlight-color={activeHighlightItem?.color || ""}
-            className="color-selector-trigger"
+            className={clsx(["color-selector-trigger", classes.buttonRoot])}
             style={{
-              height: "34px",
-              border: "none",
               fontWeight: 500,
               fontSize: rem(16),
-              paddingLeft: rem(8),
-              paddingRight: rem(4),
             }}
           >
             A

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

@@ -1,6 +1,7 @@
 import React, { Dispatch, FC, SetStateAction } from "react";
 import {
   IconBlockquote,
+  IconCaretRightFilled,
   IconCheck,
   IconCheckbox,
   IconChevronDown,
@@ -8,14 +9,16 @@ import {
   IconH1,
   IconH2,
   IconH3,
+  IconInfoCircle,
   IconList,
   IconListNumbers,
   IconTypography,
 } from "@tabler/icons-react";
-import { Popover, Button, ScrollArea } from "@mantine/core";
+import { Popover, Button, ScrollArea, Tooltip } from "@mantine/core";
 import type { Editor } from "@tiptap/react";
 import { useEditorState } from "@tiptap/react";
 import { useTranslation } from "react-i18next";
+import classes from "./bubble-menu.module.css";
 
 interface NodeSelectorProps {
   editor: Editor | null;
@@ -54,6 +57,8 @@ export const NodeSelector: FC<NodeSelectorProps> = ({
         isTaskItem: ctx.editor.isActive("taskItem"),
         isBlockquote: ctx.editor.isActive("blockquote"),
         isCodeBlock: ctx.editor.isActive("codeBlock"),
+        isCallout: ctx.editor.isActive("callout"),
+        isDetails: ctx.editor.isActive("details"),
       };
     },
   });
@@ -123,6 +128,18 @@ export const NodeSelector: FC<NodeSelectorProps> = ({
       command: () => editor.chain().focus().toggleCodeBlock().run(),
       isActive: () => editorState?.isCodeBlock,
     },
+    {
+      name: "Callout",
+      icon: IconInfoCircle,
+      command: () => editor.chain().focus().toggleCallout().run(),
+      isActive: () => editorState?.isCallout,
+    },
+    {
+      name: "Toggle block",
+      icon: IconCaretRightFilled,
+      command: () => editor.chain().focus().setDetails().run(),
+      isActive: () => editorState?.isDetails,
+    },
   ];
 
   const activeItem = items.filter((item) => item.isActive()).pop() ?? {
@@ -132,15 +149,18 @@ export const NodeSelector: FC<NodeSelectorProps> = ({
   return (
     <Popover opened={isOpen} withArrow>
       <Popover.Target>
-        <Button
-          variant="default"
-          style={{ border: "none", height: "34px" }}
-          radius="0"
-          rightSection={<IconChevronDown size={16} />}
-          onClick={() => setIsOpen(!isOpen)}
-        >
-          {t(activeItem?.name)}
-        </Button>
+        <Tooltip label={t("Turn into")} withArrow withinPortal={false} disabled={isOpen}>
+          <Button
+            className={classes.buttonRoot}
+            variant="default"
+            style={{ border: "none", height: "34px" }}
+            radius="0"
+            rightSection={<IconChevronDown size={16} />}
+            onClick={() => setIsOpen(!isOpen)}
+          >
+            {t(activeItem?.name)}
+          </Button>
+        </Tooltip>
       </Popover.Target>
 
       <Popover.Dropdown>

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, rem } from "@mantine/core";
+import { Popover, Button, ScrollArea, Tooltip, rem } from "@mantine/core";
 import type { Editor } from "@tiptap/react";
 import { useEditorState } from "@tiptap/react";
 import { useTranslation } from "react-i18next";
@@ -84,16 +84,18 @@ export const TextAlignmentSelector: FC<TextAlignmentProps> = ({
   return (
     <Popover opened={isOpen} withArrow>
       <Popover.Target>
-        <Button
-          variant="default"
-          style={{ border: "none", height: "34px" }}
-          px="5"
-          radius="0"
-          rightSection={<IconChevronDown size={16} />}
-          onClick={() => setIsOpen(!isOpen)}
-        >
-          <activeItem.icon style={{ width: rem(16) }} stroke={2} />
-        </Button>
+        <Tooltip label={t("Text align")} withArrow withinPortal={false} disabled={isOpen}>
+          <Button
+            variant="default"
+            style={{ border: "none", height: "34px" }}
+            px="5"
+            radius="0"
+            rightSection={<IconChevronDown size={16} />}
+            onClick={() => setIsOpen(!isOpen)}
+          >
+            <activeItem.icon style={{ width: rem(16) }} stroke={2} />
+          </Button>
+        </Tooltip>
       </Popover.Target>
 
       <Popover.Dropdown>

apps/client/src/features/editor/components/code-block/code-block-view.tsx

@@ -1,5 +1,6 @@
 import { NodeViewContent, NodeViewProps, NodeViewWrapper } from "@tiptap/react";
-import { ActionIcon, CopyButton, Group, Select, Tooltip } from "@mantine/core";
+import { ActionIcon, Group, Select, Tooltip } from "@mantine/core";
+import { CopyButton } from "@/components/common/copy-button";
 import { useEffect, useState } from "react";
 import { IconCheck, IconCopy } from "@tabler/icons-react";
 import classes from "./code-block.module.css";

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

@@ -10,6 +10,7 @@ import React, {
 import { useSearchSuggestionsQuery } from "@/features/search/queries/search-query.ts";
 import {
   ActionIcon,
+  Divider,
   Group,
   Paper,
   ScrollArea,
@@ -51,6 +52,7 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
   const tree = useMemo(() => new SimpleTree<SpaceTreeNode>(data), [data]);
   const createPageMutation = useCreatePageMutation();
   const emit = useQueryEmit();
+  const isInCommentContext = props.isInCommentContext ?? false;
 
   const { data: suggestion, isLoading } = useSearchSuggestionsQuery({
     query: props.query,
@@ -58,6 +60,7 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
     includePages: true,
     spaceId: space.id,
     limit: 10,
+    preload: true,
   });
 
   const createPageItem = (label: string) : MentionSuggestionItem => {
@@ -102,7 +105,9 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
           })),
         );
       }
-      items.push(createPageItem(props.query));
+      if (!isInCommentContext && props.query) {
+        items.push(createPageItem(props.query));
+      }
 
       setRenderItems(items);
       // update editor storage
@@ -250,35 +255,51 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
     }
   }
 
-  // if no results and enter what to do?
-
   useEffect(() => {
     viewportRef.current
       ?.querySelector(`[data-item-index="${selectedIndex}"]`)
       ?.scrollIntoView({ block: "nearest" });
   }, [selectedIndex]);
 
+  const popupWidth = isInCommentContext ? 280 : 320;
+
   if (renderItems.length === 0) {
     return (
-      <Paper shadow="md" p="xs" withBorder>
-        { t("No results") }
+      <Paper id="mention" shadow="md" py="xs" withBorder radius="md">
+        <Text c="dimmed" size="sm" px="sm">
+          { t("No results") }
+        </Text>
       </Paper>
     );
   }
 
+  const hasUsers = renderItems.some((item) => item.entityType === "user");
+  const hasPages = renderItems.some((item) => item.entityType === "page" && item.id !== null);
+  const createPageItemData = renderItems.find((item) => item.entityType === "page" && item.id === null);
+
   return (
-    <Paper id="mention" shadow="md" p="xs" withBorder>
+    <Paper id="mention" shadow="md" withBorder radius="md" py={6}>
       <ScrollArea.Autosize
         viewportRef={viewportRef}
         mah={350}
-        w={320}
-        scrollbarSize={8}
+        w={popupWidth}
+        scrollbarSize={6}
       >
         {renderItems?.map((item, index) => {
           if (item.entityType === "header") {
+            const isFirst = index === 0;
             return (
               <div key={`${item.label}-${index}`}>
-                <Text c="dimmed" mb={4} tt="uppercase">
+                {!isFirst && <Divider my={6} />}
+                <Text
+                  c="dimmed"
+                  size="xs"
+                  fw={500}
+                  px="sm"
+                  pt={isFirst ? 2 : 4}
+                  pb={4}
+                  tt="uppercase"
+                >
                   {item.label}
                 </Text>
               </div>
@@ -292,8 +313,9 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
                 className={clsx(classes.menuBtn, {
                   [classes.selectedItem]: index === selectedIndex,
                 })}
+                px="sm"
               >
-                <Group>
+                <Group gap="sm">
                   <CustomAvatar
                     size={"sm"}
                     avatarUrl={item.avatarUrl}
@@ -308,7 +330,7 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
                 </Group>
               </UnstyledButton>
             );
-          } else if (item.entityType === "page") {
+          } else if (item.entityType === "page" && item.id !== null) {
             return (
               <UnstyledButton
                 data-item-index={index}
@@ -317,28 +339,24 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
                 className={clsx(classes.menuBtn, {
                   [classes.selectedItem]: index === selectedIndex,
                 })}
+                px="sm"
               >
-                <Group>
+                <Group gap="sm" wrap="nowrap">
                   <ActionIcon
-                    variant="default"
+                    variant="subtle"
                     component="div"
                     aria-label={item.label}
+                    color="gray"
+                    size="sm"
                   >
                     {item.icon || (
-                      <ActionIcon
-                        component="span"
-                        variant="transparent"
-                        color="gray"
-                        size={18}
-                      >
-                        { (item.id) ? <IconFileDescription size={18} /> : <IconPlus size={18} /> }
-                      </ActionIcon>
+                      <IconFileDescription size={18} stroke={1.5} />
                     )}
                   </ActionIcon>
 
-                  <div style={{ flex: 1 }}>
-                    <Text size="sm" fw={500}>
-                      { (item.id) ? item.label : t("Create page") + ': ' + item.label }
+                  <div style={{ flex: 1, minWidth: 0 }}>
+                    <Text size="sm" fw={500} truncate>
+                      {item.label}
                     </Text>
                   </div>
                 </Group>
@@ -348,6 +366,37 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
             return null;
           }
         })}
+
+        {createPageItemData && !isInCommentContext && (
+          <>
+            {(hasUsers || hasPages) && <Divider my={6} />}
+            <UnstyledButton
+              data-item-index={renderItems.indexOf(createPageItemData)}
+              onClick={() => selectItem(renderItems.indexOf(createPageItemData))}
+              className={clsx(classes.menuBtn, {
+                [classes.selectedItem]: renderItems.indexOf(createPageItemData) === selectedIndex,
+              })}
+              px="sm"
+            >
+              <Group gap="sm" wrap="nowrap">
+                <ActionIcon
+                  variant="subtle"
+                  component="div"
+                  color="gray"
+                  size="sm"
+                >
+                  <IconPlus size={16} stroke={1.5} />
+                </ActionIcon>
+
+                <div style={{ flex: 1, minWidth: 0 }}>
+                  <Text size="sm" fw={500} truncate>
+                    {t("Create page")}: {createPageItemData.label}
+                  </Text>
+                </div>
+              </Group>
+            </UnstyledButton>
+          </>
+        )}
       </ScrollArea.Autosize>
     </Paper>
   );

apps/client/src/features/editor/components/mention/mention-suggestion.ts

@@ -17,8 +17,13 @@ const mentionRenderItems = () => {
   let component: ReactRenderer | null = null;
   let activeClientRect: (() => DOMRect) | null = null;
   let updatePositionCleanup: (() => void) | null = null;
+  let outsideClickHandler: ((e: MouseEvent) => void) | null = null;
 
   const destroy = () => {
+    if (outsideClickHandler) {
+      document.removeEventListener("pointerdown", outsideClickHandler);
+      outsideClickHandler = null;
+    }
     updatePositionCleanup?.();
     updatePositionCleanup = null;
     component?.destroy();
@@ -45,8 +50,14 @@ const mentionRenderItems = () => {
         return;
       }
 
+      const editorDom = props.editor?.view?.dom;
+      const asideEl = editorDom?.closest(".mantine-AppShell-aside");
+      const dialogEl = editorDom?.closest("[data-comment-dialog]");
+      const isInCommentContext = !!(asideEl || dialogEl);
+     // const isInCommentContext = !!asideEl;
+
       component = new ReactRenderer(MentionList, {
-        props,
+        props: { ...props, isInCommentContext },
         editor: props.editor,
       });
 
@@ -59,6 +70,18 @@ const mentionRenderItems = () => {
       const { element } = component;
       document.body.appendChild(element);
 
+      outsideClickHandler = (e: MouseEvent) => {
+        const target = e.target as Node;
+        if (element && !element.contains(target)) {
+          destroy();
+        }
+      };
+      document.addEventListener("pointerdown", outsideClickHandler);
+
+      const shiftMiddleware = asideEl
+        ? shift({ boundary: asideEl, crossAxis: true, padding: 8 })
+        : shift();
+
       updatePositionCleanup = autoUpdate(
         {
           getBoundingClientRect: () =>
@@ -76,7 +99,7 @@ const mentionRenderItems = () => {
             element,
             {
               placement: "bottom-start",
-              middleware: [offset(0), flip(), shift()],
+              middleware: [offset(4), flip(), shiftMiddleware],
             },
           ).then(({ x, y }) => {
             Object.assign(element.style, {

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

@@ -31,14 +31,14 @@
 
 .menuBtn {
   width: 100%;
-  padding: 4px;
-  margin-bottom: 2px;
+  padding: 6px 4px;
+  margin-bottom: 1px;
   color: var(--mantine-color-text);
   border-radius: var(--mantine-radius-sm);
 
   &:hover {
     @mixin light {
-      background: var(--mantine-color-gray-2);
+      background: var(--mantine-color-gray-1);
     }
 
     @mixin dark {
@@ -49,7 +49,7 @@
 
 .selectedItem {
   @mixin light {
-    background: var(--mantine-color-gray-2);
+    background: var(--mantine-color-gray-1);
   }
 
   @mixin dark {

apps/client/src/features/editor/components/mention/mention.type.ts

@@ -7,6 +7,7 @@ export interface MentionListProps {
   range: Range;
   text: string;
   editor: Editor;
+  isInCommentContext?: boolean;
 }
 
 export type MentionSuggestionItem =

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

@@ -170,6 +170,8 @@ const CommandGroups: SlashMenuGroupedItemsType = {
         input.type = "file";
         input.accept = "image/*";
         input.multiple = true;
+        input.style.display = "none";
+        document.body.appendChild(input);
         input.onchange = async () => {
           if (input.files?.length) {
             for (const file of input.files) {
@@ -179,8 +181,7 @@ const CommandGroups: SlashMenuGroupedItemsType = {
             }
           }
 
-          // Reset the input value to allow uploading the same file again if needed
-          input.value = "";
+          input.remove();
         };
         input.click();
       },
@@ -202,6 +203,8 @@ const CommandGroups: SlashMenuGroupedItemsType = {
         input.type = "file";
         input.accept = "video/*";
         input.multiple = true;
+        input.style.display = "none";
+        document.body.appendChild(input);
         input.onchange = async () => {
           if (input.files?.length) {
             for (const file of input.files) {
@@ -211,8 +214,7 @@ const CommandGroups: SlashMenuGroupedItemsType = {
             }
           }
 
-          // Reset the input value to allow uploading the same file again if needed
-          input.value = "";
+          input.remove();
         };
         input.click();
       },
@@ -234,6 +236,8 @@ const CommandGroups: SlashMenuGroupedItemsType = {
         input.type = "file";
         input.accept = "";
         input.multiple = true;
+        input.style.display = "none";
+        document.body.appendChild(input);
         input.onchange = async () => {
           if (input.files?.length) {
             for (const file of input.files) {
@@ -243,8 +247,7 @@ const CommandGroups: SlashMenuGroupedItemsType = {
             }
           }
 
-          // Reset the input value to allow uploading the same file again if needed
-          input.value = "";
+          input.remove();
         };
         input.click();
       },

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

@@ -66,6 +66,7 @@ import { PageEditMode } from "@/features/user/types/user.types.ts";
 import { jwtDecode } from "jwt-decode";
 import { searchSpotlight } from "@/features/search/constants.ts";
 import { useEditorScroll } from "./hooks/use-editor-scroll";
+import { EditorAiMenu } from "@/ee/ai/components/editor/ai-menu/ai-menu";
 
 interface PageEditorProps {
   pageId: string;
@@ -405,6 +406,7 @@ export default function PageEditor({
 
         {editor && editorIsEditable && (
           <div>
+            <EditorAiMenu editor={editor} />
             <EditorBubbleMenu editor={editor} />
             <TableMenu editor={editor} />
             <TableCellMenu editor={editor} appendTo={menuContainerRef} />

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

@@ -3,7 +3,7 @@ import React, { useCallback, useEffect, useMemo, useRef } from "react";
 import { EditorProvider } from "@tiptap/react";
 import { mainExtensions } from "@/features/editor/extensions/extensions";
 import { Document } from "@tiptap/extension-document";
-import { Heading, generateNodeId, UniqueID } from "@docmost/editor-ext";
+import { Heading, UniqueID } from "@docmost/editor-ext";
 import { Text } from "@tiptap/extension-text";
 import { Placeholder } from "@tiptap/extension-placeholder";
 import { useAtom } from "jotai";

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

@@ -8,7 +8,7 @@
   }
 
   .mantine-AppShell-main {
-    padding-top: 0 !important;
+    padding: 0 !important;
     min-height: auto !important;
   }
 

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

@@ -157,8 +157,10 @@ export function TitleEditor({
 
   useEffect(() => {
     setTimeout(() => {
-      titleEditor?.commands.focus("end");
-    }, 500);
+      // guard against Cannot access view['hasFocus'] error
+      if (!titleEditor?.isInitialized) return;
+      titleEditor?.commands?.focus("end");
+    }, 300);
   }, [titleEditor]);
 
   useEffect(() => {
@@ -169,11 +171,14 @@ export function TitleEditor({
   }, [pageId]);
 
   useEffect(() => {
-    // honor user default page edit mode preference
-    if (userPageEditMode && titleEditor && editable) {
-      if (userPageEditMode === PageEditMode.Edit) {
-        titleEditor.setEditable(true);
-      } else if (userPageEditMode === PageEditMode.Read) {
+    if (titleEditor) {
+      if (userPageEditMode && editable) {
+        if (userPageEditMode === PageEditMode.Edit) {
+          titleEditor.setEditable(true);
+        } else if (userPageEditMode === PageEditMode.Read) {
+          titleEditor.setEditable(false);
+        }
+      } else {
         titleEditor.setEditable(false);
       }
     }

apps/client/src/features/notification/components/notification-item.tsx

@@ -0,0 +1,148 @@
+import {
+  ActionIcon,
+  Group,
+  Text,
+  Tooltip,
+  UnstyledButton,
+} from "@mantine/core";
+import {
+  IconCheck,
+  IconFileDescription,
+  IconPointFilled,
+} from "@tabler/icons-react";
+import { CustomAvatar } from "@/components/ui/custom-avatar";
+import { INotification } from "../types/notification.types";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import { useState } from "react";
+import { useMarkReadMutation } from "../queries/notification-query";
+import { buildPageUrl } from "@/features/page/page.utils";
+import { formatRelativeTime } from "../notification.utils";
+import classes from "../notification.module.css";
+
+type NotificationItemProps = {
+  notification: INotification;
+  onNavigate: () => void;
+};
+
+export function NotificationItem({
+  notification,
+  onNavigate,
+}: NotificationItemProps) {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const markRead = useMarkReadMutation();
+  const [hovered, setHovered] = useState(false);
+
+  const isUnread = !notification.readAt;
+
+  const getNotificationMessage = (): string => {
+    switch (notification.type) {
+      case "comment.user_mention":
+        return t("mentioned you in a comment");
+      case "comment.created":
+        return t("commented on a page");
+      case "comment.resolved":
+        return t("resolved a comment");
+      case "page.user_mention":
+        return t("mentioned you on a page");
+      default:
+        return "";
+    }
+  };
+
+  const handleClick = () => {
+    if (notification.page && notification.space) {
+      if (isUnread) {
+        markRead.mutate([notification.id]);
+      }
+      navigate(
+        buildPageUrl(
+          notification.space.slug,
+          notification.page.slugId,
+          notification.page.title,
+        ),
+      );
+      onNavigate();
+    }
+  };
+
+  const handleMarkRead = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (isUnread) {
+      markRead.mutate([notification.id]);
+    }
+  };
+
+  return (
+    <UnstyledButton
+      onClick={handleClick}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      w="100%"
+      className={classes.notificationItem}
+    >
+      <Group wrap="nowrap" align="flex-start" gap="sm">
+        <CustomAvatar
+          avatarUrl={notification.actor?.avatarUrl}
+          name={notification.actor?.name || "?"}
+          size="sm"
+        />
+
+        <div style={{ flex: 1, minWidth: 0 }}>
+          <Text size="sm" lineClamp={2}>
+            <Text span fw={600}>
+              {notification.actor?.name}
+            </Text>{" "}
+            {getNotificationMessage()}
+          </Text>
+
+          {notification.page && (
+            <Group gap={4} mt={2} wrap="nowrap">
+              {notification.page.icon ? (
+                <Text size="xs" style={{ flexShrink: 0 }}>
+                  {notification.page.icon}
+                </Text>
+              ) : (
+                <IconFileDescription
+                  size={14}
+                  stroke={1.5}
+                  style={{ flexShrink: 0, color: "var(--mantine-color-dimmed)" }}
+                />
+              )}
+              <Text size="xs" c="dimmed" lineClamp={1}>
+                {notification.page.title || t("Untitled")}
+              </Text>
+            </Group>
+          )}
+        </div>
+
+        <Group gap={4} wrap="nowrap" align="center" style={{ flexShrink: 0 }}>
+          {hovered && isUnread ? (
+            <Tooltip label={t("Mark as read")} withArrow>
+              <ActionIcon
+                variant="subtle"
+                size="sm"
+                onClick={handleMarkRead}
+              >
+                <IconCheck size={14} />
+              </ActionIcon>
+            </Tooltip>
+          ) : (
+            <Text size="xs" c="dimmed" style={{ whiteSpace: "nowrap" }}>
+              {formatRelativeTime(notification.createdAt)}
+            </Text>
+          )}
+
+          {isUnread && (
+            <IconPointFilled
+              size={12}
+              color="var(--mantine-color-blue-filled)"
+              style={{ flexShrink: 0 }}
+            />
+          )}
+        </Group>
+      </Group>
+    </UnstyledButton>
+  );
+}

apps/client/src/features/notification/components/notification-list.tsx

@@ -0,0 +1,115 @@
+import { Center, Divider, Loader, Stack, Text } from "@mantine/core";
+import { IconBellOff } from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+import { useEffect, useRef } from "react";
+import { NotificationItem } from "./notification-item";
+import { INotification, NotificationFilter } from "../types/notification.types";
+import { groupNotificationsByTime } from "../notification.utils";
+import { useNotificationsQuery } from "../queries/notification-query";
+import classes from "../notification.module.css";
+
+type NotificationListProps = {
+  filter: NotificationFilter;
+  onNavigate: () => void;
+};
+
+export function NotificationList({
+  filter,
+  onNavigate,
+}: NotificationListProps) {
+  const { t } = useTranslation();
+  const {
+    data,
+    isLoading,
+    hasNextPage,
+    fetchNextPage,
+    isFetchingNextPage,
+  } = useNotificationsQuery();
+
+  const sentinelRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const sentinel = sentinelRef.current;
+    if (!sentinel) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting && hasNextPage && !isFetchingNextPage) {
+          fetchNextPage();
+        }
+      },
+      { threshold: 0.1 },
+    );
+
+    observer.observe(sentinel);
+    return () => observer.disconnect();
+  }, [hasNextPage, isFetchingNextPage, fetchNextPage]);
+
+  if (isLoading) {
+    return (
+      <Center py="xl">
+        <Loader size="sm" />
+      </Center>
+    );
+  }
+
+  const allNotifications =
+    data?.pages.flatMap((page) => page.items) ?? [];
+
+  const filtered =
+    filter === "unread"
+      ? allNotifications.filter((n) => !n.readAt)
+      : allNotifications;
+
+  if (filtered.length === 0) {
+    return (
+      <Center py="xl">
+        <Stack align="center" gap="xs">
+          <IconBellOff size={32} stroke={1.5} color="var(--mantine-color-dimmed)" />
+          <Text size="sm" c="dimmed">
+            {filter === "unread"
+              ? t("No unread notifications")
+              : t("No notifications")}
+          </Text>
+        </Stack>
+      </Center>
+    );
+  }
+
+  const timeGroupLabels = {
+    today: t("Today"),
+    yesterday: t("Yesterday"),
+    this_week: t("This week"),
+    older: t("Older"),
+  };
+
+  const groups = groupNotificationsByTime(filtered, timeGroupLabels);
+
+  return (
+    <Stack gap={0}>
+      {groups.map((group, groupIndex) => (
+        <div key={group.key}>
+          {groupIndex > 0 && <Divider className={classes.divider} />}
+          <Text size="xs" fw={600} c="dimmed" px="md" pt="sm" pb={4}>
+            {group.label}
+          </Text>
+          {group.notifications.map((notification: INotification) => (
+            <NotificationItem
+              key={notification.id}
+              notification={notification}
+              onNavigate={onNavigate}
+            />
+          ))}
+        </div>
+      ))}
+
+      <div ref={sentinelRef} style={{ height: 1 }} />
+
+      {isFetchingNextPage && (
+        <Center py="xs">
+          <Loader size="xs" />
+        </Center>
+      )}
+    </Stack>
+  );
+}

apps/client/src/features/notification/components/notification-popover.tsx

@@ -0,0 +1,142 @@
+import { useState } from "react";
+import {
+  ActionIcon,
+  Group,
+  Indicator,
+  Menu,
+  Popover,
+  ScrollArea,
+  Text,
+  Tooltip,
+} from "@mantine/core";
+import {
+  IconBell,
+  IconCheck,
+  IconChecks,
+  IconDots,
+  IconFilter,
+} from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+import { NotificationList } from "./notification-list";
+import { NotificationFilter } from "../types/notification.types";
+import {
+  useMarkAllReadMutation,
+  useUnreadCountQuery,
+} from "../queries/notification-query";
+
+export function NotificationPopover() {
+  const { t } = useTranslation();
+  const [opened, setOpened] = useState(false);
+  const [filter, setFilter] = useState<NotificationFilter>("all");
+
+  const { data: unreadData } = useUnreadCountQuery();
+  const markAllRead = useMarkAllReadMutation();
+
+  const unreadCount = unreadData?.count ?? 0;
+
+  const handleMarkAllRead = () => {
+    markAllRead.mutate();
+  };
+
+  return (
+    <Popover
+      position="bottom-end"
+      shadow="lg"
+      opened={opened}
+      onChange={setOpened}
+      withArrow
+    >
+      <Popover.Target>
+        <Tooltip label={t("Notifications")} withArrow>
+          <ActionIcon
+            variant="subtle"
+            color="dark"
+            size="sm"
+            onClick={() => setOpened((o) => !o)}
+          >
+            <Indicator
+              offset={5}
+              color="red"
+              withBorder
+              disabled={unreadCount === 0}
+            >
+              <IconBell size={20} />
+            </Indicator>
+          </ActionIcon>
+        </Tooltip>
+      </Popover.Target>
+
+      <Popover.Dropdown
+        p={0}
+        style={{ width: "min(420px, calc(100vw - 24px))" }}
+      >
+        <Group justify="space-between" px="md" py="sm">
+          <Text fw={600} size="sm">
+            {t("Notifications")}
+          </Text>
+          <Group gap={4}>
+            <Menu position="bottom-end" withArrow withinPortal={false}>
+              <Menu.Target>
+                <Tooltip label={t("Filter")} withArrow>
+                  <ActionIcon variant="subtle" color="dark" size="sm">
+                    <IconFilter size={16} />
+                  </ActionIcon>
+                </Tooltip>
+              </Menu.Target>
+              <Menu.Dropdown>
+                <Menu.Label>{t("Filter")}</Menu.Label>
+                <Menu.Item
+                  onClick={() => setFilter("all")}
+                  rightSection={
+                    filter === "all" ? <IconCheck size={14} /> : null
+                  }
+                >
+                  {t("All notifications")}
+                </Menu.Item>
+                <Menu.Item
+                  onClick={() => setFilter("unread")}
+                  rightSection={
+                    filter === "unread" ? <IconCheck size={14} /> : null
+                  }
+                >
+                  {t("Unread only")}
+                </Menu.Item>
+              </Menu.Dropdown>
+            </Menu>
+
+            <Menu position="bottom-end" withArrow withinPortal={false}>
+              <Menu.Target>
+                <Tooltip label={t("More options")} withArrow>
+                  <ActionIcon variant="subtle" color="dark" size="sm">
+                    <IconDots size={16} />
+                  </ActionIcon>
+                </Tooltip>
+              </Menu.Target>
+              <Menu.Dropdown>
+                <Menu.Item
+                  leftSection={<IconChecks size={16} />}
+                  onClick={handleMarkAllRead}
+                  disabled={unreadCount === 0}
+                >
+                  {t("Mark all as read")}
+                </Menu.Item>
+              </Menu.Dropdown>
+            </Menu>
+          </Group>
+        </Group>
+
+        <ScrollArea.Autosize
+          mah={500}
+          type="auto"
+          offsetScrollbars
+          scrollbarSize={6}
+        >
+          <NotificationList
+            filter={filter}
+            onNavigate={() => setOpened(false)}
+          />
+        </ScrollArea.Autosize>
+      </Popover.Dropdown>
+    </Popover>
+  );
+}

apps/client/src/features/notification/hooks/use-notification-socket.ts

@@ -0,0 +1,23 @@
+import { useEffect } from "react";
+import { useAtom } from "jotai";
+import { useQueryClient } from "@tanstack/react-query";
+import { socketAtom } from "@/features/websocket/atoms/socket-atom";
+import { NOTIFICATION_KEY } from "../queries/notification-query";
+
+export function useNotificationSocket() {
+  const queryClient = useQueryClient();
+  const [socket] = useAtom(socketAtom);
+
+  useEffect(() => {
+    if (!socket) return;
+
+    const handler = () => {
+      queryClient.invalidateQueries({ queryKey: NOTIFICATION_KEY });
+    };
+
+    socket.on("notification", handler);
+    return () => {
+      socket.off("notification", handler);
+    };
+  }, [socket, queryClient]);
+}

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

@@ -0,0 +1,13 @@
+.notificationItem {
+  padding: 8px 12px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.notificationItem:hover {
+  background-color: var(--mantine-color-default-hover);
+}
+
+.divider {
+  border-color: light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
+}

apps/client/src/features/notification/notification.utils.ts

@@ -0,0 +1,75 @@
+import { INotification } from "./types/notification.types";
+
+export function formatRelativeTime(dateStr: string): string {
+  const date = new Date(dateStr);
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffMin = Math.floor(diffMs / 60_000);
+  const diffHours = Math.floor(diffMs / 3_600_000);
+  const diffDays = Math.floor(diffMs / 86_400_000);
+
+  if (diffMin < 1) return "now";
+  if (diffMin < 60) return `${diffMin}m`;
+  if (diffHours < 24) return `${diffHours}h`;
+  if (diffDays < 7) return `${diffDays}d`;
+
+  return date.toLocaleDateString(undefined, {
+    month: "short",
+    day: "numeric",
+  });
+}
+
+type TimeGroup = "today" | "yesterday" | "this_week" | "older";
+
+export function getTimeGroup(dateStr: string): TimeGroup {
+  const date = new Date(dateStr);
+  const now = new Date();
+
+  const startOfToday = new Date(
+    now.getFullYear(),
+    now.getMonth(),
+    now.getDate(),
+  );
+  const startOfYesterday = new Date(startOfToday);
+  startOfYesterday.setDate(startOfYesterday.getDate() - 1);
+  const startOfWeek = new Date(startOfToday);
+  startOfWeek.setDate(startOfWeek.getDate() - 7);
+
+  if (date >= startOfToday) return "today";
+  if (date >= startOfYesterday) return "yesterday";
+  if (date >= startOfWeek) return "this_week";
+  return "older";
+}
+
+export type GroupedNotifications = {
+  key: TimeGroup;
+  label: string;
+  notifications: INotification[];
+};
+
+export function groupNotificationsByTime(
+  notifications: INotification[],
+  labels: Record<TimeGroup, string>,
+): GroupedNotifications[] {
+  const groups: Record<TimeGroup, INotification[]> = {
+    today: [],
+    yesterday: [],
+    this_week: [],
+    older: [],
+  };
+
+  for (const notification of notifications) {
+    const group = getTimeGroup(notification.createdAt);
+    groups[group].push(notification);
+  }
+
+  const order: TimeGroup[] = ["today", "yesterday", "this_week", "older"];
+
+  return order
+    .filter((key) => groups[key].length > 0)
+    .map((key) => ({
+      key,
+      label: labels[key],
+      notifications: groups[key],
+    }));
+}

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

@@ -0,0 +1,59 @@
+import {
+  keepPreviousData,
+  useInfiniteQuery,
+  useMutation,
+  useQuery,
+  useQueryClient,
+} from "@tanstack/react-query";
+import {
+  getNotifications,
+  getUnreadCount,
+  markNotificationsRead,
+  markAllNotificationsRead,
+} from "../services/notification-service";
+
+export const NOTIFICATION_KEY = ["notifications"];
+export const UNREAD_COUNT_KEY = ["notifications", "unread-count"];
+
+export function useNotificationsQuery() {
+  return useInfiniteQuery({
+    queryKey: NOTIFICATION_KEY,
+    queryFn: ({ pageParam }) => getNotifications({ cursor: pageParam }),
+    initialPageParam: undefined as string | undefined,
+    getNextPageParam: (lastPage) =>
+      lastPage.meta.hasNextPage ? lastPage.meta.nextCursor : undefined,
+    staleTime: 0,
+    gcTime: 0,
+    placeholderData: keepPreviousData,
+  });
+}
+
+export function useUnreadCountQuery() {
+  return useQuery({
+    queryKey: UNREAD_COUNT_KEY,
+    queryFn: getUnreadCount,
+  });
+}
+
+export function useMarkReadMutation() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (notificationIds: string[]) =>
+      markNotificationsRead(notificationIds),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: NOTIFICATION_KEY });
+    },
+  });
+}
+
+export function useMarkAllReadMutation() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: markAllNotificationsRead,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: NOTIFICATION_KEY });
+    },
+  });
+}

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

@@ -0,0 +1,31 @@
+import api from "@/lib/api-client";
+import { INotification } from "../types/notification.types";
+import { IPagination } from "@/lib/types";
+
+export async function getNotifications(params: {
+  limit?: number;
+  cursor?: string;
+}): Promise<IPagination<INotification>> {
+  const req = await api.post<IPagination<INotification>>(
+    "/notifications",
+    params,
+  );
+  return req.data;
+}
+
+export async function getUnreadCount(): Promise<{ count: number }> {
+  const req = await api.post<{ count: number }>(
+    "/notifications/unread-count",
+  );
+  return req.data;
+}
+
+export async function markNotificationsRead(
+  notificationIds: string[],
+): Promise<void> {
+  await api.post("/notifications/mark-read", { notificationIds });
+}
+
+export async function markAllNotificationsRead(): Promise<void> {
+  await api.post("/notifications/mark-all-read");
+}

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

@@ -0,0 +1,39 @@
+export type NotificationType =
+  | "comment.user_mention"
+  | "comment.created"
+  | "comment.resolved"
+  | "page.user_mention";
+
+export type INotification = {
+  id: string;
+  userId: string;
+  workspaceId: string;
+  type: NotificationType;
+  actorId: string | null;
+  pageId: string | null;
+  spaceId: string | null;
+  commentId: string | null;
+  data: Record<string, unknown> | null;
+  readAt: string | null;
+  emailedAt: string | null;
+  archivedAt: string | null;
+  createdAt: string;
+  actor: {
+    id: string;
+    name: string;
+    avatarUrl: string | null;
+  } | null;
+  page: {
+    id: string;
+    title: string;
+    slugId: string;
+    icon: string | null;
+  } | null;
+  space: {
+    id: string;
+    name: string;
+    slug: string;
+  } | null;
+};
+
+export type NotificationFilter = "all" | "unread";

apps/client/src/features/page-history/components/css/history-diff.module.css

@@ -1,38 +0,0 @@
-.diffSummary {
-  border: rem(1px) solid
-    light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
-  border-radius: rem(10px);
-  padding: rem(12px);
-  background: light-dark(
-    var(--mantine-color-gray-0),
-    var(--mantine-color-dark-7)
-  );
-}
-
-:global(.history-diff-added) {
-  background: light-dark(#e1f3f2, #01654a) !important;
-  color: light-dark(#007b69, #cafff7) !important;
-  -webkit-box-decoration-break: clone;
-  box-decoration-break: clone;
-}
-
-:global(.history-diff-deleted) {
-  text-decoration: line-through;
-  color: light-dark(var(--mantine-color-red-7), var(--mantine-color-red-4));
-  background: light-dark(var(--mantine-color-red-0), rgba(255, 0, 0, 0.1));
-  border-radius: rem(2px);
-  padding: 0 rem(2px);
-}
-
-:global(.history-diff-node-added) {
-  outline: rem(2px) solid light-dark(var(--mantine-color-teal-5), var(--mantine-color-teal-7));
-  outline-offset: rem(2px);
-  border-radius: rem(4px);
-}
-
-:global(.history-diff-node-deleted) {
-  opacity: 0.5;
-  outline: rem(2px) dashed light-dark(var(--mantine-color-red-4), var(--mantine-color-red-6));
-  outline-offset: rem(4px);
-  border-radius: rem(4px);
-}

apps/client/src/features/page-history/components/css/history.module.css

@@ -16,6 +16,36 @@
   :global(.ProseMirror) {
     padding: 0 !important;
   }
+
+  & :global(.history-diff-added) {
+    background: light-dark(#e1f3f2, #01654a) !important;
+    color: light-dark(#007b69, #cafff7) !important;
+    -webkit-box-decoration-break: clone;
+    box-decoration-break: clone;
+  }
+
+  & :global(.history-diff-deleted) {
+    text-decoration: line-through;
+    color: light-dark(var(--mantine-color-red-7), var(--mantine-color-red-4));
+    background: light-dark(var(--mantine-color-red-0), rgba(255, 0, 0, 0.1));
+    border-radius: rem(2px);
+    padding: 0 rem(2px);
+  }
+
+  & :global(.history-diff-node-added) {
+    outline: rem(2px) solid
+      light-dark(var(--mantine-color-teal-5), var(--mantine-color-teal-7));
+    outline-offset: rem(2px);
+    border-radius: rem(4px);
+  }
+
+  & :global(.history-diff-node-deleted) {
+    opacity: 0.5;
+    outline: rem(2px) dashed
+      light-dark(var(--mantine-color-red-4), var(--mantine-color-red-6));
+    outline-offset: rem(4px);
+    border-radius: rem(4px);
+  }
 }
 
 .active {

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

@@ -1,5 +1,4 @@
 import "@/features/editor/styles/index.css";
-import "./css/history-diff.module.css";
 import { useEffect } from "react";
 import { EditorContent, useEditor } from "@tiptap/react";
 import { mainExtensions } from "@/features/editor/extensions/extensions";

apps/client/src/features/page-history/components/history-item.tsx

@@ -1,4 +1,4 @@
-import { Text, Group, UnstyledButton } from "@mantine/core";
+import { Text, Group, UnstyledButton, Avatar, Tooltip } from "@mantine/core";
 import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
 import { formattedDate } from "@/lib/time";
 import classes from "./css/history.module.css";
@@ -6,6 +6,8 @@ import clsx from "clsx";
 import { IPageHistory } from "@/features/page-history/types/page.types";
 import { memo, useCallback } from "react";
 
+const MAX_VISIBLE_AVATARS = 5;
+
 interface HistoryItemProps {
   historyItem: IPageHistory;
   index: number;
@@ -31,6 +33,9 @@ const HistoryItem = memo(function HistoryItem({
     onHover?.(historyItem.id, index);
   }, [onHover, historyItem.id, index]);
 
+  const contributors = historyItem.contributors;
+  const hasContributors = contributors && contributors.length > 0;
+
   return (
     <UnstyledButton
       p="xs"
@@ -39,25 +44,54 @@ const HistoryItem = memo(function HistoryItem({
       onMouseLeave={onHoverEnd}
       className={clsx(classes.history, { [classes.active]: isActive })}
     >
-      <Group wrap="nowrap">
-        <div>
-          <Text size="sm">
-            {formattedDate(new Date(historyItem.createdAt))}
-          </Text>
+      <Text size="sm">{formattedDate(new Date(historyItem.createdAt))}</Text>
 
-          <div style={{ flex: 1 }}>
-            <Group gap={4} wrap="nowrap">
-              <CustomAvatar
-                size="sm"
-                avatarUrl={historyItem.lastUpdatedBy?.avatarUrl}
-                name={historyItem.lastUpdatedBy?.name}
-              />
+      <Group gap={6} wrap="nowrap" mt={4}>
+        {hasContributors ? (
+          <>
+            <Tooltip.Group openDelay={300} closeDelay={100}>
+              <Avatar.Group spacing={8}>
+                {contributors.slice(0, MAX_VISIBLE_AVATARS).map((contributor) => (
+                  <Tooltip key={contributor.id} label={contributor.name} withArrow>
+                    <CustomAvatar
+                      size="sm"
+                      avatarUrl={contributor.avatarUrl}
+                      name={contributor.name}
+                    />
+                  </Tooltip>
+                ))}
+                {contributors.length > MAX_VISIBLE_AVATARS && (
+                  <Tooltip
+                    withArrow
+                    label={contributors.slice(MAX_VISIBLE_AVATARS).map((c) => (
+                      <div key={c.id}>{c.name}</div>
+                    ))}
+                  >
+                    <Avatar size="sm" color="gray">
+                      +{contributors.length - MAX_VISIBLE_AVATARS}
+                    </Avatar>
+                  </Tooltip>
+                )}
+              </Avatar.Group>
+            </Tooltip.Group>
+            {contributors.length === 1 && (
               <Text size="sm" c="dimmed" lineClamp={1}>
-                {historyItem.lastUpdatedBy?.name}
+                {contributors[0].name}
               </Text>
-            </Group>
-          </div>
-        </div>
+            )}
+          </>
+        ) : (
+          <>
+            <CustomAvatar
+              size="sm"
+              avatarUrl={historyItem.lastUpdatedBy?.avatarUrl}
+              name={historyItem.lastUpdatedBy?.name}
+            />
+            <Text size="sm" c="dimmed" lineClamp={1}>
+              {historyItem.lastUpdatedBy?.name}
+            </Text>
+          </>
+        )}
       </Group>
     </UnstyledButton>
   );

apps/client/src/features/page-history/components/history-list.tsx

@@ -157,7 +157,7 @@ function HistoryList({ pageId }: Props) {
               size="compact-md"
               onClick={() => setHistoryModalOpen(false)}
             >
-              {t("Close")}
+              {t("Cancel")}
             </Button>
             <Button size="compact-md" onClick={confirmRestore}>
               {t("Restore")}

apps/client/src/features/page-history/components/history-modal-mobile.tsx

@@ -62,11 +62,18 @@ export default function HistoryModalMobile({ pageId, pageTitle }: Props) {
 
   const selectData = useMemo(
     () =>
-      historyItems.map((item) => ({
-        value: item.id,
-        label: formattedDate(new Date(item.createdAt)),
-        userName: item.lastUpdatedBy?.name,
-      })),
+      historyItems.map((item) => {
+        const contributors = item.contributors;
+        const hasContributors = contributors && contributors.length > 0;
+        const names = hasContributors
+          ? contributors.map((c) => c.name).join(", ")
+          : item.lastUpdatedBy?.name;
+        return {
+          value: item.id,
+          label: formattedDate(new Date(item.createdAt)),
+          userName: names,
+        };
+      }),
     [historyItems],
   );
 
@@ -157,7 +164,7 @@ export default function HistoryModalMobile({ pageId, pageTitle }: Props) {
       {canRestore && (
         <Group className={classes.actionButtons} justify="flex-end" gap="sm">
           <Button variant="default" onClick={() => setHistoryModalOpen(false)}>
-            {t("Close")}
+            {t("Cancel")}
           </Button>
           <Button onClick={confirmRestore}>{t("Restore")}</Button>
         </Group>

apps/client/src/features/page-history/types/page.types.ts

@@ -18,4 +18,5 @@ export interface IPageHistory {
   createdAt: string;
   updatedAt: string;
   lastUpdatedBy: IPageHistoryUser;
+  contributors?: IPageHistoryUser[];
 }

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

@@ -17,7 +17,8 @@ import React, { useEffect, useRef, useState } from "react";
 import useToggleAside from "@/hooks/use-toggle-aside.tsx";
 import { useAtom, useAtomValue } from "jotai";
 import { historyAtoms } from "@/features/page-history/atoms/history-atoms.ts";
-import { useClipboard, useDisclosure, useHotkeys } from "@mantine/hooks";
+import { useDisclosure, useHotkeys } from "@mantine/hooks";
+import { useClipboard } from "@/hooks/use-clipboard";
 import { useParams } from "react-router-dom";
 import { usePageQuery } from "@/features/page/queries/page-query.ts";
 import { buildPageUrl } from "@/features/page/page.utils.ts";
@@ -39,6 +40,7 @@ import { PageStateSegmentedControl } from "@/features/user/components/page-state
 import MovePageModal from "@/features/page/components/move-page-modal.tsx";
 import { useTimeAgo } from "@/hooks/use-time-ago.tsx";
 import ShareModal from "@/features/share/components/share-modal.tsx";
+import { PageShareModal } from "@/ee/page-permission";
 
 interface PageHeaderMenuProps {
   readOnly?: boolean;
@@ -74,12 +76,14 @@ export default function PageHeaderMenu({ readOnly }: PageHeaderMenuProps) {
 
       {!readOnly && <PageStateSegmentedControl size="xs" />}
 
-      <ShareModal readOnly={readOnly} />
+      {/*<ShareModal readOnly={readOnly} />*/}
+      <PageShareModal readOnly={readOnly}/>
+
 
       <Tooltip label={t("Comments")} openDelay={250} withArrow>
         <ActionIcon
-          variant="default"
-          style={{ border: "none" }}
+          variant="subtle"
+          color="dark"
           onClick={() => toggleAside("comments")}
         >
           <IconMessage size={20} stroke={2} />
@@ -88,8 +92,8 @@ export default function PageHeaderMenu({ readOnly }: PageHeaderMenuProps) {
 
       <Tooltip label={t("Table of contents")} openDelay={250} withArrow>
         <ActionIcon
-          variant="default"
-          style={{ border: "none" }}
+          variant="subtle"
+          color="dark"
           onClick={() => toggleAside("toc")}
         >
           <IconList size={20} stroke={2} />
@@ -165,7 +169,7 @@ function PageActionMenu({ readOnly }: PageActionMenuProps) {
         arrowPosition="center"
       >
         <Menu.Target>
-          <ActionIcon variant="default" style={{ border: "none" }}>
+          <ActionIcon variant="subtle" color="dark">
             <IconDots size={20} />
           </ActionIcon>
         </Menu.Target>

apps/client/src/features/page/components/page-import-modal.tsx

@@ -11,6 +11,7 @@ import {
   IconBrandNotion,
   IconCheck,
   IconFileCode,
+  IconFileTypeDocx,
   IconFileTypeZip,
   IconMarkdown,
   IconX,
@@ -86,11 +87,13 @@ function ImportFormatSelection({ spaceId, onClose }: ImportFormatSelection) {
 
   const markdownFileRef = useRef<() => void>(null);
   const htmlFileRef = useRef<() => void>(null);
+  const docxFileRef = useRef<() => void>(null);
   const notionFileRef = useRef<() => void>(null);
   const confluenceFileRef = useRef<() => void>(null);
   const zipFileRef = useRef<() => void>(null);
 
   const canUseConfluence = isCloud() || workspace?.hasLicenseKey;
+  const canUseDocx = isCloud() || workspace?.hasLicenseKey;
 
   const handleZipUpload = async (selectedFile: File, source: string) => {
     if (!selectedFile) {
@@ -265,6 +268,7 @@ function ImportFormatSelection({ spaceId, onClose }: ImportFormatSelection) {
       // Reset file inputs after successful upload
       if (markdownFileRef.current) markdownFileRef.current();
       if (htmlFileRef.current) htmlFileRef.current();
+      if (docxFileRef.current) docxFileRef.current();
 
       const pageCountText =
         pageCount === 1 ? `1 ${t("page")}` : `${pageCount} ${t("pages")}`;
@@ -321,6 +325,30 @@ function ImportFormatSelection({ spaceId, onClose }: ImportFormatSelection) {
           )}
         </FileButton>
 
+        <FileButton
+          onChange={handleFileUpload}
+          accept=".docx"
+          multiple
+          resetRef={docxFileRef}
+        >
+          {(props) => (
+            <Tooltip
+              label={t("Available in enterprise edition")}
+              disabled={canUseDocx}
+            >
+              <Button
+                disabled={!canUseDocx}
+                justify="start"
+                variant="default"
+                leftSection={<IconFileTypeDocx size={18} />}
+                {...props}
+              >
+                Word (DOCX)
+              </Button>
+            </Tooltip>
+          )}
+        </FileButton>
+
         <FileButton
           onChange={(file) => handleZipUpload(file, "notion")}
           accept="application/zip"

apps/client/src/features/page/tree/components/space-tree.tsx

@@ -16,7 +16,7 @@ import {
 import { useEffect, useRef, useState } from "react";
 import { Link, useParams } from "react-router-dom";
 import classes from "@/features/page/tree/styles/tree.module.css";
-import { ActionIcon, Box, Menu, rem } from "@mantine/core";
+import { ActionIcon, Box, Menu, rem, Text } from "@mantine/core";
 import {
   IconArrowRight,
   IconChevronDown,
@@ -54,11 +54,11 @@ import { IPage, SidebarPagesParams } from "@/features/page/types/page.types.ts";
 import { queryClient } from "@/main.tsx";
 import { OpenMap } from "react-arborist/dist/main/state/open-slice";
 import {
-  useClipboard,
   useDisclosure,
   useElementSize,
   useMergedRef,
 } from "@mantine/hooks";
+import { useClipboard } from "@/hooks/use-clipboard";
 import { dfs } from "react-arborist/dist/module/utils";
 import { useQueryEmit } from "@/features/websocket/use-query-emit.ts";
 import { buildPageUrl } from "@/features/page/page.utils.ts";
@@ -82,6 +82,7 @@ interface SpaceTreeProps {
 const openTreeNodesAtom = atom<OpenMap>({});
 
 export default function SpaceTree({ spaceId, readOnly }: SpaceTreeProps) {
+  const { t } = useTranslation();
   const { pageSlug } = useParams();
   const { data, setData, controllers } =
     useTreeMutation<TreeApi<SpaceTreeNode>>(spaceId);
@@ -106,10 +107,16 @@ export default function SpaceTree({ spaceId, readOnly }: SpaceTreeProps) {
     }
   }, sizeRef);
   const [isDataLoaded, setIsDataLoaded] = useState(false);
+  const spaceIdRef = useRef(spaceId);
+  spaceIdRef.current = spaceId;
   const { data: currentPage } = usePageQuery({
     pageId: extractPageSlugId(pageSlug),
   });
 
+  useEffect(() => {
+    setIsDataLoaded(false);
+  }, [spaceId]);
+
   useEffect(() => {
     if (hasNextPage && !isFetching) {
       fetchNextPage();
@@ -130,12 +137,15 @@ export default function SpaceTree({ spaceId, readOnly }: SpaceTreeProps) {
         }
 
         // same space; append only missing roots
+        setIsDataLoaded(true);
         return mergeRootTrees(prev, treeData);
       });
     }
-  }, [pagesData, hasNextPage]);
+  }, [pagesData, hasNextPage, spaceId]);
 
   useEffect(() => {
+    const effectSpaceId = spaceId;
+
     const fetchData = async () => {
       if (isDataLoaded && currentPage) {
         // check if pageId node is present in the tree
@@ -149,6 +159,8 @@ export default function SpaceTree({ spaceId, readOnly }: SpaceTreeProps) {
         if (!currentPage.id) return;
         const ancestors = await getPageBreadcrumbs(currentPage.id);
 
+        if (spaceIdRef.current !== effectSpaceId) return;
+
         if (ancestors && ancestors?.length > 1) {
           let flatTreeItems = [...buildTree(ancestors)];
 
@@ -176,22 +188,22 @@ export default function SpaceTree({ spaceId, readOnly }: SpaceTreeProps) {
 
           // Wait for all fetch operations to complete
           Promise.all(fetchPromises).then(() => {
+            if (spaceIdRef.current !== effectSpaceId) return;
+
             // build tree with children
             const ancestorsTree = buildTreeWithChildren(flatTreeItems);
             // child of root page we're attaching the built ancestors to
             const rootChild = ancestorsTree[0];
 
-            // attach built ancestors to tree
-            const updatedTree = appendNodeChildren(
-              data,
-              rootChild.id,
-              rootChild.children,
+            // attach built ancestors to tree using functional updater
+            // to avoid stale closure overwriting the current tree data
+            setData((currentData) =>
+              appendNodeChildren(currentData, rootChild.id, rootChild.children),
             );
-            setData(updatedTree);
 
             setTimeout(() => {
               // focus on node and open all parents
-              treeApiRef.current.select(currentPage.id);
+              treeApiRef.current?.select(currentPage.id);
             }, 100);
           });
         }
@@ -220,11 +232,18 @@ export default function SpaceTree({ spaceId, readOnly }: SpaceTreeProps) {
     };
   }, [setTreeApi]);
 
+  const filteredData = data.filter((node) => node?.spaceId === spaceId);
+
   return (
     <div ref={mergedRef} className={classes.treeContainer}>
+      {isDataLoaded && filteredData.length === 0 && (
+        <Text size="xs" c="dimmed" py="xs" px="sm">
+          {t("No pages yet")}
+        </Text>
+      )}
       {isRootReady && rootElement.current && (
         <Tree
-          data={data.filter((node) => node?.spaceId === spaceId)}
+          data={filteredData}
           disableDrag={readOnly}
           disableDrop={readOnly}
           disableEdit={readOnly}