AI module - init

WIP
2026-05-07 14:43:06 +08:00 · 2025-08-15 23:18:51 -07:00 · 2025-08-14 23:13:23 -07:00
256 changed files with 1326 additions and 8884 deletions
@@ -2,18 +2,10 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
-    <link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png" />
-    <link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Docmost</title>
-    <meta name="theme-color" content="#1f1f1f" media="(prefers-color-scheme: dark)" />
-    <meta name="theme-color" content="#f6f7f9" media="(prefers-color-scheme: light)" />
-    <link rel="manifest" href="/manifest.json" />
-    <meta name="mobile-web-app-capable" content="yes" />
-    <meta name="apple-touch-fullscreen" content="yes" />
-    <meta name="apple-mobile-web-app-title" content="Docmost" />
-    <meta name="apple-mobile-web-app-capable" content="yes" />
-    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
    <!--meta-tags-->
  </head>
  <body>
@@ -1,7 +1,7 @@
 {
  "name": "client",
  "private": true,
-  "version": "0.23.2",
+  "version": "0.22.2",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
@@ -17,7 +17,6 @@
    "@emoji-mart/react": "^1.1.1",
    "@excalidraw/excalidraw": "0.18.0-864353b",
    "@mantine/core": "^8.1.3",
-    "@mantine/dates": "^8.3.2",
    "@mantine/form": "^8.1.3",
    "@mantine/hooks": "^8.1.3",
    "@mantine/modals": "^8.1.3",
@@ -41,7 +40,7 @@
    "katex": "0.16.22",
    "lowlight": "^3.3.0",
    "mantine-form-zod-resolver": "^1.3.0",
-    "mermaid": "^11.11.0",
+    "mermaid": "^11.6.0",
    "mitt": "^3.0.1",
    "posthog-js": "^1.255.1",
    "react": "^18.3.1",
@@ -53,7 +53,6 @@
  "e.g Space for product team": "z.B. Bereich für das Produktteam",
  "e.g Space for sales team to collaborate": "z.B. Bereich für das Vertriebsteam zur Zusammenarbeit",
  "Edit": "Bearbeiten",
-  "Read": "Lesen",
  "Edit group": "Gruppe bearbeiten",
  "Email": "E-Mail",
  "Enter a strong password": "Geben Sie ein starkes Passwort ein",
@@ -496,36 +495,5 @@
  "Page restored successfully": "Seite erfolgreich wiederhergestellt",
  "Deleted by": "Gelöscht von",
  "Deleted at": "Gelöscht am",
-  "Preview": "Vorschau",
-  "Subpages": "Unterseiten",
-  "Failed to load subpages": "Fehler beim Laden von Unterseiten",
-  "No subpages": "Keine Unterseiten",
-  "Subpages (Child pages)": "Unterseiten (Untergeordnete Seiten)",
-  "List all subpages of the current page": "Alle Unterseiten der aktuellen Seite auflisten",
-  "Attachments": "Anhänge",
-  "All spaces": "Alle Bereiche",
-  "Unknown": "Unbekannt",
-  "Find a space": "Einen Bereich finden",
-  "Search in all your spaces": "In all deinen Bereichen suchen",
-  "Type": "Art",
-  "Enterprise": "Unternehmen",
-  "Download attachment": "Anhang herunterladen",
-  "Allowed email domains": "Erlaubte E-Mail-Domains",
-  "Only users with email addresses from these domains can signup via SSO.": "Nur Benutzer mit E-Mail-Adressen aus diesen Domains können sich über SSO registrieren.",
-  "Enter valid domain names separated by comma or space": "Geben Sie gültige Domainnamen ein, durch Kommas oder Leerzeichen getrennt",
-  "Enforce two-factor authentication": "Erzwingen der Zwei-Faktor-Authentifizierung",
-  "Once enforced, all members must enable two-factor authentication to access the workspace.": "Sobald es erzwungen wird, müssen alle Mitglieder die Zwei-Faktor-Authentifizierung aktivieren, um auf den Arbeitsbereich zugreifen zu können.",
-  "Toggle MFA enforcement": "Umschalten der MFA-Erzwingung",
-  "Display name": "Anzeigename",
-  "Allow signup": "Registrierung erlauben",
-  "Enabled": "Aktiviert",
-  "Advanced Settings": "Erweiterte Einstellungen",
-  "Enable TLS/SSL": "TLS/SSL aktivieren",
-  "Use secure connection to LDAP server": "Sichere Verbindung zum LDAP-Server verwenden",
-  "Group sync": "Gruppensynchronisation",
-  "No SSO providers found.": "Keine SSO-Anbieter gefunden.",
-  "Delete SSO provider": "SSO-Anbieter löschen",
-  "Are you sure you want to delete this SSO provider?": "Sind Sie sicher, dass Sie diesen SSO-Anbieter löschen möchten?",
-  "Action": "Aktion",
-  "{{ssoProviderType}} configuration": "{{ssoProviderType}}-Konfiguration"
+  "Preview": "Vorschau"
 }
@@ -53,7 +53,6 @@
  "e.g Space for product team": "e.g Space for product team",
  "e.g Space for sales team to collaborate": "e.g Space for sales team to collaborate",
  "Edit": "Edit",
-  "Read": "Read",
  "Edit group": "Edit group",
  "Email": "Email",
  "Enter a strong password": "Enter a strong password",
@@ -496,63 +495,5 @@
  "Page restored successfully": "Page restored successfully",
  "Deleted by": "Deleted by",
  "Deleted at": "Deleted at",
-  "Preview": "Preview",
-  "Subpages": "Subpages",
-  "Failed to load subpages": "Failed to load subpages",
-  "No subpages": "No subpages",
-  "Subpages (Child pages)": "Subpages (Child pages)",
-  "List all subpages of the current page": "List all subpages of the current page",
-  "Attachments": "Attachments",
-  "All spaces": "All spaces",
-  "Unknown": "Unknown",
-  "Find a space": "Find a space",
-  "Search in all your spaces": "Search in all your spaces",
-  "Type": "Type",
-  "Enterprise": "Enterprise",
-  "Download attachment": "Download attachment",
-  "Allowed email domains": "Allowed email domains",
-  "Only users with email addresses from these domains can signup via SSO.": "Only users with email addresses from these domains can signup via SSO.",
-  "Enter valid domain names separated by comma or space": "Enter valid domain names separated by comma or space",
-  "Enforce two-factor authentication": "Enforce two-factor authentication",
-  "Once enforced, all members must enable two-factor authentication to access the workspace.": "Once enforced, all members must enable two-factor authentication to access the workspace.",
-  "Toggle MFA enforcement": "Toggle MFA enforcement",
-  "Display name": "Display name",
-  "Allow signup": "Allow signup",
-  "Enabled": "Enabled",
-  "Advanced Settings": "Advanced Settings",
-  "Enable TLS/SSL": "Enable TLS/SSL",
-  "Use secure connection to LDAP server": "Use secure connection to LDAP server",
-  "Group sync": "Group sync",
-  "No SSO providers found.": "No SSO providers found.",
-  "Delete SSO provider": "Delete SSO provider",
-  "Are you sure you want to delete this SSO provider?": "Are you sure you want to delete this SSO provider?",
-  "Action": "Action",
-  "{{ssoProviderType}} configuration": "{{ssoProviderType}} configuration",
-  "Icon": "Icon",
-  "Upload image": "Upload image",
-  "Remove image": "Remove image",
-  "Failed to remove image": "Failed to remove image",
-  "Image exceeds 10MB limit.": "Image exceeds 10MB limit.",
-  "Image removed successfully": "Image removed successfully",
-  "API key": "API key",
-  "API key created successfully": "API key created successfully",
-  "API keys": "API keys",
-  "API management": "API management",
-  "Are you sure you want to revoke this API key": "Are you sure you want to revoke this API key",
-  "Create API Key": "Create API Key",
-  "Custom expiration date": "Custom expiration date",
-  "Enter a descriptive token name": "Enter a descriptive token name",
-  "Expiration": "Expiration",
-  "Expired": "Expired",
-  "Expires": "Expires",
-  "I've saved my API key": "I've saved my API key",
-  "Last use": "Last Used",
-  "No API keys found": "No API keys found",
-  "No expiration": "No expiration",
-  "Revoke API key": "Revoke API key",
-  "Revoked successfully": "Revoked successfully",
-  "Select expiration date": "Select expiration date",
-  "This action cannot be undone. Any applications using this API key will stop working.": "This action cannot be undone. Any applications using this API key will stop working.",
-  "Update API key": "Update API key",
-  "Manage API keys for all users in the workspace": "Manage API keys for all users in the workspace"
+  "Preview": "Preview"
 }
@@ -53,7 +53,6 @@
  "e.g Space for product team": "ej: Espacio para el equipo de producto",
  "e.g Space for sales team to collaborate": "ej: Espacio para que el equipo de ventas colabore",
  "Edit": "Editar",
-  "Read": "Leer",
  "Edit group": "Editar grupo",
  "Email": "Correo electrónico",
  "Enter a strong password": "Introduce una contraseña fuerte",
@@ -496,36 +495,5 @@
  "Page restored successfully": "Página restaurada con éxito",
  "Deleted by": "Eliminado por",
  "Deleted at": "Eliminado en",
-  "Preview": "Vista previa",
-  "Subpages": "Subpáginas",
-  "Failed to load subpages": "Error al cargar subpáginas",
-  "No subpages": "Sin subpáginas",
-  "Subpages (Child pages)": "Subpáginas (Páginas hijas)",
-  "List all subpages of the current page": "Listar todas las subpáginas de la página actual",
-  "Attachments": "Adjuntos",
-  "All spaces": "Todos los espacios",
-  "Unknown": "Desconocido",
-  "Find a space": "Encontrar un espacio",
-  "Search in all your spaces": "Buscar en todos tus espacios",
-  "Type": "Tipo",
-  "Enterprise": "Empresa",
-  "Download attachment": "Descargar adjunto",
-  "Allowed email domains": "Dominios de correo electrónico permitidos",
-  "Only users with email addresses from these domains can signup via SSO.": "Solo los usuarios con direcciones de correo electrónico de estos dominios pueden registrarse a través de SSO.",
-  "Enter valid domain names separated by comma or space": "Introduce nombres de dominio válidos separados por coma o espacio",
-  "Enforce two-factor authentication": "Aplicar autenticación de dos factores",
-  "Once enforced, all members must enable two-factor authentication to access the workspace.": "Una vez aplicada, todos los miembros deben habilitar la autenticación de dos factores para acceder al espacio de trabajo.",
-  "Toggle MFA enforcement": "Alternar la aplicación de MFA",
-  "Display name": "Nombre para mostrar",
-  "Allow signup": "Permitir registro",
-  "Enabled": "Habilitado",
-  "Advanced Settings": "Configuración avanzada",
-  "Enable TLS/SSL": "Habilitar TLS/SSL",
-  "Use secure connection to LDAP server": "Usar conexión segura al servidor LDAP",
-  "Group sync": "Sincronización de grupos",
-  "No SSO providers found.": "No se encontraron proveedores de SSO.",
-  "Delete SSO provider": "Eliminar proveedor de SSO",
-  "Are you sure you want to delete this SSO provider?": "¿Está seguro de que desea eliminar este proveedor de SSO?",
-  "Action": "Acción",
-  "{{ssoProviderType}} configuration": "Configuración de {{ssoProviderType}}"
+  "Preview": "Vista previa"
 }
@@ -53,7 +53,6 @@
  "e.g Space for product team": "par ex. Espace pour l'équipe produit",
  "e.g Space for sales team to collaborate": "par ex. Espace pour l'équipe de vente pour collaborer",
  "Edit": "Modifier",
-  "Read": "Lire",
  "Edit group": "Modifier groupe",
  "Email": "Email",
  "Enter a strong password": "Entrez un mot de passe fort",
@@ -496,36 +495,5 @@
  "Page restored successfully": "Page restaurée avec succès",
  "Deleted by": "Supprimé par",
  "Deleted at": "Supprimé à",
-  "Preview": "Aperçu",
-  "Subpages": "Sous-pages",
-  "Failed to load subpages": "Échec du chargement des sous-pages",
-  "No subpages": "Pas de sous-pages",
-  "Subpages (Child pages)": "Sous-pages (Pages enfants)",
-  "List all subpages of the current page": "Lister toutes les sous-pages de la page actuelle",
-  "Attachments": "Pièces jointes",
-  "All spaces": "Tous les espaces",
-  "Unknown": "Inconnu",
-  "Find a space": "Trouver un espace",
-  "Search in all your spaces": "Rechercher dans tous vos espaces",
-  "Type": "Type",
-  "Enterprise": "Entreprise",
-  "Download attachment": "Télécharger la pièce jointe",
-  "Allowed email domains": "Domaines de messagerie autorisés",
-  "Only users with email addresses from these domains can signup via SSO.": "Seuls les utilisateurs possédant des adresses e-mail provenant de ces domaines peuvent s'inscrire via SSO.",
-  "Enter valid domain names separated by comma or space": "Entrez des noms de domaine valides séparés par une virgule ou un espace",
-  "Enforce two-factor authentication": "Imposer l'authentification à deux facteurs",
-  "Once enforced, all members must enable two-factor authentication to access the workspace.": "Une fois appliquée, tous les membres doivent activer l'authentification à deux facteurs pour accéder à l'espace de travail.",
-  "Toggle MFA enforcement": "Basculer l'application de l'AMF",
-  "Display name": "Nom d'affichage",
-  "Allow signup": "Autoriser l'inscription",
-  "Enabled": "Activé",
-  "Advanced Settings": "Paramètres avancés",
-  "Enable TLS/SSL": "Activer TLS/SSL",
-  "Use secure connection to LDAP server": "Utiliser une connexion sécurisée au serveur LDAP",
-  "Group sync": "Synchronisation de groupe",
-  "No SSO providers found.": "Aucun fournisseur SSO trouvé.",
-  "Delete SSO provider": "Supprimer le fournisseur SSO",
-  "Are you sure you want to delete this SSO provider?": "Êtes-vous sûr de vouloir supprimer ce fournisseur SSO ?",
-  "Action": "Action",
-  "{{ssoProviderType}} configuration": "Configuration {{ssoProviderType}}"
+  "Preview": "Aperçu"
 }
@@ -53,7 +53,6 @@
  "e.g Space for product team": "es. Spazio per il team di prodotto",
  "e.g Space for sales team to collaborate": "es. Spazio per la collaborazione del team di vendita",
  "Edit": "Modifica",
-  "Read": "Leggi",
  "Edit group": "Modifica gruppo",
  "Email": "Email",
  "Enter a strong password": "Inserisci una password sicura",
@@ -496,36 +495,5 @@
  "Page restored successfully": "Pagina ripristinata con successo",
  "Deleted by": "Eliminato da",
  "Deleted at": "Eliminato il",
-  "Preview": "Anteprima",
-  "Subpages": "Sottopagine",
-  "Failed to load subpages": "Caricamento delle sottopagine non riuscito",
-  "No subpages": "Nessuna sottopagina",
-  "Subpages (Child pages)": "Sottopagine (Pagine figlie)",
-  "List all subpages of the current page": "Elenca tutte le sottopagine della pagina corrente",
-  "Attachments": "Allegati",
-  "All spaces": "Tutti gli spazi",
-  "Unknown": "Sconosciuto",
-  "Find a space": "Trova uno spazio",
-  "Search in all your spaces": "Cerca in tutti i tuoi spazi",
-  "Type": "Tipo",
-  "Enterprise": "Impresa",
-  "Download attachment": "Scarica allegato",
-  "Allowed email domains": "Domini email consentiti",
-  "Only users with email addresses from these domains can signup via SSO.": "Solo gli utenti con indirizzi email provenienti da questi domini possono registrarsi tramite SSO.",
-  "Enter valid domain names separated by comma or space": "Inserisci nomi di dominio validi separati da virgole o spazi",
-  "Enforce two-factor authentication": "Imponi l'autenticazione a due fattori",
-  "Once enforced, all members must enable two-factor authentication to access the workspace.": "Una volta impostata, tutti i membri devono abilitare l'autenticazione a due fattori per accedere all'area di lavoro.",
-  "Toggle MFA enforcement": "Attiva disattiva l'applicazione MFA",
-  "Display name": "Nome visualizzato",
-  "Allow signup": "Consenti iscrizione",
-  "Enabled": "Abilitato",
-  "Advanced Settings": "Impostazioni avanzate",
-  "Enable TLS/SSL": "Abilita TLS/SSL",
-  "Use secure connection to LDAP server": "Usa connessione sicura al server LDAP",
-  "Group sync": "Sincronizzazione gruppi",
-  "No SSO providers found.": "Nessun provider SSO trovato.",
-  "Delete SSO provider": "Elimina provider SSO",
-  "Are you sure you want to delete this SSO provider?": "Sei sicuro di voler eliminare questo provider SSO?",
-  "Action": "Azione",
-  "{{ssoProviderType}} configuration": "Configurazione {{ssoProviderType}}"
+  "Preview": "Anteprima"
 }
@@ -53,7 +53,6 @@
  "e.g Space for product team": "例: 製品チームのスペース",
  "e.g Space for sales team to collaborate": "例: 営業チーム連携用スペース",
  "Edit": "編集",
-  "Read": "読む",
  "Edit group": "グループを編集",
  "Email": "メールアドレス",
  "Enter a strong password": "強力なパスワードを入力してください",
@@ -496,36 +495,5 @@
  "Page restored successfully": "ページが正常に復元されました",
  "Deleted by": "削除者",
  "Deleted at": "削除日時",
-  "Preview": "プレビュー",
-  "Subpages": "サブページ",
-  "Failed to load subpages": "サブページの読み込みに失敗しました",
-  "No subpages": "サブページがありません",
-  "Subpages (Child pages)": "サブページ（子ページ）",
-  "List all subpages of the current page": "現在のページのすべてのサブページをリスト",
-  "Attachments": "添付ファイル",
-  "All spaces": "すべてのスペース",
-  "Unknown": "不明",
-  "Find a space": "スペースを探す",
-  "Search in all your spaces": "あなたのすべてのスペースで検索",
-  "Type": "タイプ",
-  "Enterprise": "エンタープライズ",
-  "Download attachment": "添付ファイルをダウンロード",
-  "Allowed email domains": "許可されたメールドメイン",
-  "Only users with email addresses from these domains can signup via SSO.": "これらのドメインからのメールアドレスを持つユーザーのみがSSOで登録できます。",
-  "Enter valid domain names separated by comma or space": "コンマまたはスペースで区切って有効なドメイン名を入力してください",
-  "Enforce two-factor authentication": "二要素認証を強制する",
-  "Once enforced, all members must enable two-factor authentication to access the workspace.": "一度強制されると、すべてのメンバーはワークスペースにアクセスするために二要素認証を有効にする必要があります。",
-  "Toggle MFA enforcement": "MFAの強制を切り替える",
-  "Display name": "表示名",
-  "Allow signup": "登録を許可する",
-  "Enabled": "有効",
-  "Advanced Settings": "詳細設定",
-  "Enable TLS/SSL": "TLS/SSLを有効にする",
-  "Use secure connection to LDAP server": "LDAPサーバーへの安全な接続を使用する",
-  "Group sync": "グループ同期",
-  "No SSO providers found.": "SSOプロバイダーが見つかりませんでした。",
-  "Delete SSO provider": "SSOプロバイダーを削除する",
-  "Are you sure you want to delete this SSO provider?": "このSSOプロバイダーを削除してもよろしいですか？",
-  "Action": "アクション",
-  "{{ssoProviderType}} configuration": "{{ssoProviderType}}の構成"
+  "Preview": "プレビュー"
 }
@@ -53,7 +53,6 @@
  "e.g Space for product team": "예: 제품 팀을 위한 Space",
  "e.g Space for sales team to collaborate": "예: 영업 팀의 Space",
  "Edit": "편집",
-  "Read": "읽기",
  "Edit group": "팀 편집",
  "Email": "이메일",
  "Enter a strong password": "강력한 비밀번호를 입력하세요",
@@ -496,36 +495,5 @@
  "Page restored successfully": "페이지가 성공적으로 복구되었습니다",
  "Deleted by": "삭제자",
  "Deleted at": "삭제 시간",
-  "Preview": "미리보기",
-  "Subpages": "하위 페이지",
-  "Failed to load subpages": "하위 페이지 로드 실패",
-  "No subpages": "하위 페이지 없음",
-  "Subpages (Child pages)": "하위 페이지 (자식 페이지)",
-  "List all subpages of the current page": "현재 페이지의 모든 하위 페이지 목록",
-  "Attachments": "첨부 파일",
-  "All spaces": "전체 공간",
-  "Unknown": "알 수 없음",
-  "Find a space": "공간 찾기",
-  "Search in all your spaces": "모든 공간에서 검색",
-  "Type": "유형",
-  "Enterprise": "기업",
-  "Download attachment": "첨부 파일 다운로드",
-  "Allowed email domains": "허용된 이메일 도메인",
-  "Only users with email addresses from these domains can signup via SSO.": "이 도메인의 이메일 주소를 가진 사용자만 SSO를 통해 가입할 수 있습니다.",
-  "Enter valid domain names separated by comma or space": "콤마 또는 공백으로 구분하여 유효한 도메인 이름 입력",
-  "Enforce two-factor authentication": "이중 인증 시행",
-  "Once enforced, all members must enable two-factor authentication to access the workspace.": "시행되면 모든 멤버가 작업 공간에 액세스하기 위해 이중 인증을 활성화해야 합니다.",
-  "Toggle MFA enforcement": "MFA 시행 전환",
-  "Display name": "표시 이름",
-  "Allow signup": "가입 허용",
-  "Enabled": "활성화됨",
-  "Advanced Settings": "고급 설정",
-  "Enable TLS/SSL": "TLS\\/SSL 활성화",
-  "Use secure connection to LDAP server": "LDAP 서버에 안전한 연결 사용",
-  "Group sync": "그룹 동기화",
-  "No SSO providers found.": "SSO 제공자를 찾을 수 없습니다.",
-  "Delete SSO provider": "SSO 제공자 삭제",
-  "Are you sure you want to delete this SSO provider?": "이 SSO 제공자를 삭제하시겠습니까?",
-  "Action": "작업",
-  "{{ssoProviderType}} configuration": "{{ssoProviderType}} 구성"
+  "Preview": "미리보기"
 }
@@ -53,7 +53,6 @@
  "e.g Space for product team": "bijv. Ruimte voor productteam",
  "e.g Space for sales team to collaborate": "bijv. Ruimte voor verkoopteam om samen te werken",
  "Edit": "Bewerken",
-  "Read": "Lezen",
  "Edit group": "Groep bewerken",
  "Email": "E-mailadres",
  "Enter a strong password": "Voer een sterk wachtwoord in",
@@ -496,36 +495,5 @@
  "Page restored successfully": "Pagina succesvol hersteld",
  "Deleted by": "Verwijderd door",
  "Deleted at": "Verwijderd op",
-  "Preview": "Voorbeeld",
-  "Subpages": "Subpagina's",
-  "Failed to load subpages": "Laden van subpagina's mislukt",
-  "No subpages": "Geen subpagina's",
-  "Subpages (Child pages)": "Subpagina's (Kindpagina's)",
-  "List all subpages of the current page": "Lijst van alle subpagina's van de huidige pagina",
-  "Attachments": "Bijlagen",
-  "All spaces": "Alle ruimtes",
-  "Unknown": "Onbekend",
-  "Find a space": "Vind een ruimte",
-  "Search in all your spaces": "Zoek in al je ruimtes",
-  "Type": "Type",
-  "Enterprise": "Onderneming",
-  "Download attachment": "Bijlage downloaden",
-  "Allowed email domains": "Toegestane e-maildomeinen",
-  "Only users with email addresses from these domains can signup via SSO.": "Alleen gebruikers met e-mailadressen van deze domeinen kunnen zich aanmelden via SSO.",
-  "Enter valid domain names separated by comma or space": "Voer geldige domeinnamen in, gescheiden door komma of spatie",
-  "Enforce two-factor authentication": "Handhaaf tweefactorauthenticatie",
-  "Once enforced, all members must enable two-factor authentication to access the workspace.": "Na handhaving moeten alle leden tweefactorauthenticatie inschakelen om toegang te krijgen tot de werkomgeving.",
-  "Toggle MFA enforcement": "Schakel MFA-handhaving in of uit",
-  "Display name": "Weergavenaam",
-  "Allow signup": "Aanmelden toestaan",
-  "Enabled": "Ingeschakeld",
-  "Advanced Settings": "Geavanceerde instellingen",
-  "Enable TLS/SSL": "TLS/SSL inschakelen",
-  "Use secure connection to LDAP server": "Gebruik een beveiligde verbinding met de LDAP-server",
-  "Group sync": "Groepssynchronisatie",
-  "No SSO providers found.": "Geen SSO-providers gevonden.",
-  "Delete SSO provider": "Verwijder SSO-provider",
-  "Are you sure you want to delete this SSO provider?": "Weet u zeker dat u deze SSO-provider wilt verwijderen?",
-  "Action": "Actie",
-  "{{ssoProviderType}} configuration": "{{ssoProviderType}} configuratie"
+  "Preview": "Voorbeeld"
 }
@@ -53,7 +53,6 @@
  "e.g Space for product team": "ex.: Espaço para a equipe de produto",
  "e.g Space for sales team to collaborate": "ex.: Espaço para a equipe de vendas colaborar",
  "Edit": "Editar",
-  "Read": "Ler",
  "Edit group": "Editar grupo",
  "Email": "Email",
  "Enter a strong password": "Insira uma senha forte",
@@ -496,36 +495,5 @@
  "Page restored successfully": "Página restaurada com sucesso",
  "Deleted by": "Excluído por",
  "Deleted at": "Excluído em",
-  "Preview": "Visualização",
-  "Subpages": "Subpáginas",
-  "Failed to load subpages": "Falha ao carregar subpáginas",
-  "No subpages": "Sem subpáginas",
-  "Subpages (Child pages)": "Subpáginas (Páginas filhas)",
-  "List all subpages of the current page": "Listar todas as subpáginas da página atual",
-  "Attachments": "Anexos",
-  "All spaces": "Todos os espaços",
-  "Unknown": "Desconhecido",
-  "Find a space": "Encontrar um espaço",
-  "Search in all your spaces": "Pesquisar em todos os seus espaços",
-  "Type": "Tipo",
-  "Enterprise": "Empresa",
-  "Download attachment": "Baixar anexo",
-  "Allowed email domains": "Domínios de email permitidos",
-  "Only users with email addresses from these domains can signup via SSO.": "Apenas usuários com endereços de email desses domínios podem se inscrever via SSO.",
-  "Enter valid domain names separated by comma or space": "Insira nomes de domínio válidos separados por vírgula ou espaço",
-  "Enforce two-factor authentication": "Impor autenticação de dois fatores",
-  "Once enforced, all members must enable two-factor authentication to access the workspace.": "Uma vez imposto, todos os membros devem habilitar a autenticação de dois fatores para acessar o espaço de trabalho.",
-  "Toggle MFA enforcement": "Alternar imposição de MFA",
-  "Display name": "Nome de exibição",
-  "Allow signup": "Permitir inscrição",
-  "Enabled": "Habilitado",
-  "Advanced Settings": "Configurações Avançadas",
-  "Enable TLS/SSL": "Habilitar TLS/SSL",
-  "Use secure connection to LDAP server": "Usar conexão segura com o servidor LDAP",
-  "Group sync": "Sincronização de grupo",
-  "No SSO providers found.": "Nenhum provedor de SSO encontrado.",
-  "Delete SSO provider": "Excluir provedor de SSO",
-  "Are you sure you want to delete this SSO provider?": "Tem certeza de que deseja excluir este provedor de SSO?",
-  "Action": "Ação",
-  "{{ssoProviderType}} configuration": "Configuração de {{ssoProviderType}}"
+  "Preview": "Visualização"
 }
@@ -53,7 +53,6 @@
  "e.g Space for product team": "например, Пространство для продуктовой команды",
  "e.g Space for sales team to collaborate": "например, Пространство для совместной работы команды продаж",
  "Edit": "Редактировать",
-  "Read": "Читать",
  "Edit group": "Редактировать группу",
  "Email": "Электронная почта",
  "Enter a strong password": "Введите надёжный пароль",
@@ -496,36 +495,5 @@
  "Page restored successfully": "Страница успешно восстановлена",
  "Deleted by": "Удалено пользователем",
  "Deleted at": "Удалено в",
-  "Preview": "Предпросмотр",
-  "Subpages": "Подстраницы",
-  "Failed to load subpages": "Не удалось загрузить подстраницы",
-  "No subpages": "Нет подстраниц",
-  "Subpages (Child pages)": "Подстраницы (вложенные страницы)",
-  "List all subpages of the current page": "Показать все подстраницы текущей страницы",
-  "Attachments": "Вложения",
-  "All spaces": "Все пространства",
-  "Unknown": "Неизвестно",
-  "Find a space": "Найти пространство",
-  "Search in all your spaces": "Поиск во всех ваших пространствах",
-  "Type": "Тип",
-  "Enterprise": "Предприятие",
-  "Download attachment": "Скачать вложение",
-  "Allowed email domains": "Разрешенные домены электронной почты",
-  "Only users with email addresses from these domains can signup via SSO.": "Только пользователи с электронными адресами из этих доменов могут зарегистрироваться через SSO.",
-  "Enter valid domain names separated by comma or space": "Введите допустимые доменные имена, разделённые запятыми или пробелами",
-  "Enforce two-factor authentication": "Обязательная двухфакторная аутентификация",
-  "Once enforced, all members must enable two-factor authentication to access the workspace.": "После введения обязательности все участники должны будут включить двухфакторную аутентификацию для доступа к рабочему пространству.",
-  "Toggle MFA enforcement": "Переключить обязательность MFA",
-  "Display name": "Отображаемое имя",
-  "Allow signup": "Разрешить регистрацию",
-  "Enabled": "Включено",
-  "Advanced Settings": "Расширенные настройки",
-  "Enable TLS/SSL": "Включить TLS/SSL",
-  "Use secure connection to LDAP server": "Использовать защищённое соединение с сервером LDAP",
-  "Group sync": "Синхронизация группы",
-  "No SSO providers found.": "Поставщики SSO не найдены.",
-  "Delete SSO provider": "Удалить поставщика SSO",
-  "Are you sure you want to delete this SSO provider?": "Вы уверены, что хотите удалить этого поставщика SSO?",
-  "Action": "Действие",
-  "{{ssoProviderType}} configuration": "Настройка {{ssoProviderType}}"
+  "Preview": "Предпросмотр"
 }
@@ -53,7 +53,6 @@
  "e.g Space for product team": "наприклад, Простір для продуктової команди",
  "e.g Space for sales team to collaborate": "наприклад, Простір для спільної роботи команди продажів",
  "Edit": "Редагувати",
-  "Read": "Читати",
  "Edit group": "Редагувати групу",
  "Email": "Електронна пошта",
  "Enter a strong password": "Введіть надійний пароль",
@@ -496,36 +495,5 @@
  "Page restored successfully": "Сторінку успішно відновлено",
  "Deleted by": "Видалено",
  "Deleted at": "Видалено о",
-  "Preview": "Попередній перегляд",
-  "Subpages": "Підсторінки",
-  "Failed to load subpages": "Не вдалося завантажити підсторінки",
-  "No subpages": "Немає підсторінок",
-  "Subpages (Child pages)": "Підсторінки (дочірні сторінки)",
-  "List all subpages of the current page": "Перелік всіх підсторінок поточної сторінки",
-  "Attachments": "Вкладення",
-  "All spaces": "Усі простори",
-  "Unknown": "Невідомо",
-  "Find a space": "Знайти простір",
-  "Search in all your spaces": "Шукати у всіх ваших просторах",
-  "Type": "Тип",
-  "Enterprise": "Підприємство",
-  "Download attachment": "Завантажити вкладення",
-  "Allowed email domains": "Дозволені домени електронної пошти",
-  "Only users with email addresses from these domains can signup via SSO.": "Лише користувачі з адресами електронної пошти з цих доменів можуть реєструватися через SSO.",
-  "Enter valid domain names separated by comma or space": "Введіть дійсні доменні імена, розділені комою або пробілом",
-  "Enforce two-factor authentication": "Вимагати двофакторну автентифікацію",
-  "Once enforced, all members must enable two-factor authentication to access the workspace.": "Після увімкнення всі учасники повинні ввімкнути двофакторну автентифікацію для доступу до робочого простору.",
-  "Toggle MFA enforcement": "Перемикання вимоги MFA",
-  "Display name": "Відображуване ім'я",
-  "Allow signup": "Дозволити реєстрацію",
-  "Enabled": "Увімкнено",
-  "Advanced Settings": "Розширені налаштування",
-  "Enable TLS/SSL": "Увімкнути TLS/SSL",
-  "Use secure connection to LDAP server": "Використовувати захищене з'єднання з сервером LDAP",
-  "Group sync": "Синхронізація групи",
-  "No SSO providers found.": "Постачальників SSO не знайдено.",
-  "Delete SSO provider": "Видалити постачальника SSO",
-  "Are you sure you want to delete this SSO provider?": "Ви впевнені, що хочете видалити цього постачальника SSO?",
-  "Action": "Дія",
-  "{{ssoProviderType}} configuration": "Конфігурація {{ssoProviderType}}"
+  "Preview": "Попередній перегляд"
 }
@@ -53,7 +53,6 @@
  "e.g Space for product team": "例如：产品团队的空间",
  "e.g Space for sales team to collaborate": "例如：销售团队协作的空间",
  "Edit": "编辑",
-  "Read": "阅读",
  "Edit group": "编辑群组",
  "Email": "电子邮箱",
  "Enter a strong password": "输入一个强密码",
@@ -496,36 +495,5 @@
  "Page restored successfully": "页面恢复成功",
  "Deleted by": "删除人",
  "Deleted at": "删除时间",
-  "Preview": "预览",
-  "Subpages": "子页面",
-  "Failed to load subpages": "加载子页面失败",
-  "No subpages": "没有子页面",
-  "Subpages (Child pages)": "子页面（子页面）",
-  "List all subpages of the current page": "列出当前页面的所有子页面",
-  "Attachments": "附件",
-  "All spaces": "所有空间",
-  "Unknown": "未知",
-  "Find a space": "查找空间",
-  "Search in all your spaces": "在您的所有空间中搜索",
-  "Type": "类型",
-  "Enterprise": "企业",
-  "Download attachment": "下载附件",
-  "Allowed email domains": "允许的电子邮件域",
-  "Only users with email addresses from these domains can signup via SSO.": "只有来自这些域的电子邮件地址的用户才能通过SSO注册。",
-  "Enter valid domain names separated by comma or space": "输入用逗号或空格分隔的有效域名",
-  "Enforce two-factor authentication": "强制实施双因素认证",
-  "Once enforced, all members must enable two-factor authentication to access the workspace.": "一旦实施，所有成员必须启用双因素认证才能访问工作区。",
-  "Toggle MFA enforcement": "切换多因素认证实施",
-  "Display name": "显示名称",
-  "Allow signup": "允许注册",
-  "Enabled": "已启用",
-  "Advanced Settings": "高级设置",
-  "Enable TLS/SSL": "启用TLS/SSL",
-  "Use secure connection to LDAP server": "使用安全连接到LDAP服务器",
-  "Group sync": "组同步",
-  "No SSO providers found.": "未找到SSO提供商。",
-  "Delete SSO provider": "删除SSO提供商",
-  "Are you sure you want to delete this SSO provider?": "您确定要删除此SSO提供商吗？",
-  "Action": "操作",
-  "{{ssoProviderType}} configuration": "{{ssoProviderType}} 配置"
+  "Preview": "预览"
 }
@@ -1,30 +0,0 @@
-{
-  "name": "Docmost",
-  "short_name": "Docmost",
-  "start_url": "/",
-  "display": "standalone",
-  "background_color": "#222",
-  "theme_color": "#222",
-  "icons": [
-    {
-      "src": "icons/favicon-16x16.png",
-      "type": "image/png",
-      "sizes": "16x16"
-    },
-    {
-      "src": "icons/favicon-32x32.png",
-      "type": "image/png",
-      "sizes": "32x32"
-    },
-    {
-      "src": "icons/app-icon-192x192.png",
-      "type": "image/png",
-      "sizes": "180x180 192x192"
-    },
-    {
-      "src": "icons/app-icon-512x512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ]
-}
@@ -35,8 +35,6 @@ import SpacesPage from "@/pages/spaces/spaces.tsx";
 import { MfaChallengePage } from "@/ee/mfa/pages/mfa-challenge-page";
 import { MfaSetupRequiredPage } from "@/ee/mfa/pages/mfa-setup-required-page";
 import SpaceTrash from "@/pages/space/space-trash.tsx";
-import UserApiKeys from "@/ee/api-key/pages/user-api-keys";
-import WorkspaceApiKeys from "@/ee/api-key/pages/workspace-api-keys";

 export default function App() {
  const { t } = useTranslation();
@@ -98,10 +96,8 @@ export default function App() {
              path={"account/preferences"}
              element={<AccountPreferences />}
            />
-            <Route path={"account/api-keys"} element={<UserApiKeys />} />
            <Route path={"workspace"} element={<WorkspaceSettings />} />
            <Route path={"members"} element={<WorkspaceMembers />} />
-            <Route path={"api-keys"} element={<WorkspaceApiKeys />} />
            <Route path={"groups"} element={<Groups />} />
            <Route path={"groups/:groupId"} element={<GroupInfo />} />
            <Route path={"spaces"} element={<Spaces />} />
@@ -1,165 +0,0 @@
-import React, { useRef } from "react";
-import { Menu, Box, Loader } from "@mantine/core";
-import { useTranslation } from "react-i18next";
-import { IconTrash, IconUpload } from "@tabler/icons-react";
-import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
-import { AvatarIconType } from "@/features/attachments/types/attachment.types.ts";
-import { notifications } from "@mantine/notifications";
-
-interface AvatarUploaderProps {
-  currentImageUrl?: string | null;
-  fallbackName?: string;
-  radius?: string | number;
-  size?: string | number;
-  variant?: string;
-  type: AvatarIconType;
-  onUpload: (file: File) => Promise<void>;
-  onRemove: () => Promise<void>;
-  isLoading?: boolean;
-  disabled?: boolean;
-}
-
-export default function AvatarUploader({
-  currentImageUrl,
-  fallbackName,
-  radius,
-  variant,
-  size,
-  type,
-  onUpload,
-  onRemove,
-  isLoading = false,
-  disabled = false,
-}: AvatarUploaderProps) {
-  const { t } = useTranslation();
-  const fileInputRef = useRef<HTMLInputElement>(null);
-
-  const handleFileInputChange = async (
-    event: React.ChangeEvent<HTMLInputElement>,
-  ) => {
-    const file = event.target.files?.[0];
-    if (!file || disabled) {
-      return;
-    }
-
-    // Validate file size (max 10MB)
-    const maxSizeInBytes = 10 * 1024 * 1024;
-    if (file.size > maxSizeInBytes) {
-      notifications.show({
-        message: t("Image exceeds 10MB limit."),
-        color: "red",
-      });
-      // Reset the input
-      if (fileInputRef.current) {
-        fileInputRef.current.value = "";
-      }
-      return;
-    }
-
-    try {
-      await onUpload(file);
-    } catch (error) {
-      console.error(error);
-      notifications.show({
-        message: t("Failed to upload image"),
-        color: "red",
-      });
-    }
-
-    // Reset the input so the same file can be selected again
-    if (fileInputRef.current) {
-      fileInputRef.current.value = "";
-    }
-  };
-
-  const handleUploadClick = () => {
-    if (fileInputRef.current) {
-      fileInputRef.current.click();
-    } else {
-      console.error("File input ref is null!");
-    }
-  };
-
-  const handleRemove = async () => {
-    if (disabled) return;
-
-    try {
-      await onRemove();
-      notifications.show({
-        message: t("Image removed successfully"),
-      });
-    } catch (error) {
-      console.error(error);
-      notifications.show({
-        message: t("Failed to remove image"),
-        color: "red",
-      });
-    }
-  };
-
-  return (
-    <Box>
-      <input
-        type="file"
-        ref={fileInputRef}
-        onChange={handleFileInputChange}
-        accept="image/png,image/jpeg,image/jpg"
-        style={{ display: "none" }}
-      />
-
-      <Menu shadow="md" width={200} withArrow disabled={disabled || isLoading}>
-        <Menu.Target>
-          <Box style={{ position: "relative", display: "inline-block" }}>
-            <CustomAvatar
-              component="button"
-              size={size}
-              avatarUrl={currentImageUrl}
-              name={fallbackName}
-              style={{
-                cursor: disabled || isLoading ? "default" : "pointer",
-                opacity: isLoading ? 0.6 : 1,
-              }}
-              radius={radius}
-              variant={variant}
-              type={type}
-            />
-            {isLoading && (
-              <Box
-                style={{
-                  position: "absolute",
-                  top: "50%",
-                  left: "50%",
-                  transform: "translate(-50%, -50%)",
-                  zIndex: 1000,
-                }}
-              >
-                <Loader size="sm" />
-              </Box>
-            )}
-          </Box>
-        </Menu.Target>
-
-        <Menu.Dropdown>
-          <Menu.Item
-            leftSection={<IconUpload size={16} />}
-            disabled={isLoading || disabled}
-            onClick={handleUploadClick}
-          >
-            {t("Upload image")}
-          </Menu.Item>
-
-          {currentImageUrl && (
-            <Menu.Item
-              leftSection={<IconTrash size={16} />}
-              color="red"
-              onClick={handleRemove}
-              disabled={isLoading || disabled}
-            >
-              {t("Remove image")}
-            </Menu.Item>
-          )}
-        </Menu.Dropdown>
-      </Menu>
-    </Box>
-  );
-}
@@ -4,15 +4,14 @@ import { useTranslation } from "react-i18next";

 interface NoTableResultsProps {
  colSpan: number;
-  text?: string;
 }
-export default function NoTableResults({ colSpan, text }: NoTableResultsProps) {
+export default function NoTableResults({ colSpan }: NoTableResultsProps) {
  const { t } = useTranslation();
  return (
    <Table.Tr>
      <Table.Td colSpan={colSpan}>
        <Text fw={500} c="dimmed" ta="center">
-          {text || t("No results found...")}
+          {t("No results found...")}
        </Text>
      </Table.Td>
    </Table.Tr>
@@ -14,14 +14,6 @@ import SidebarToggle from "@/components/ui/sidebar-toggle-button.tsx";
 import { useTranslation } from "react-i18next";
 import useTrial from "@/ee/hooks/use-trial.tsx";
 import { isCloud } from "@/lib/config.ts";
-import {
-  SearchControl,
-  SearchMobileControl,
-} from "@/features/search/components/search-control.tsx";
-import {
-  searchSpotlight,
-  shareSearchSpotlight,
-} from "@/features/search/constants.ts";

 const links = [{ link: APP_ROUTE.HOME, label: "Home" }];

@@ -87,15 +79,6 @@ export function AppHeader() {
          </Group>
        </Group>

-        <div>
-          <Group visibleFrom="sm">
-            <SearchControl onClick={searchSpotlight.open} />
-          </Group>
-          <Group hiddenFrom="sm">
-            <SearchMobileControl onSearch={searchSpotlight.open} />
-          </Group>
-        </div>
-
        <Group px={"xl"} wrap="nowrap">
          {isCloud() && isTrial && trialDaysLeft !== 0 && (
            <Badge
@@ -1,23 +1,16 @@
 import { UserProvider } from "@/features/user/user-provider.tsx";
-import { Outlet, useParams } from "react-router-dom";
+import { Outlet } from "react-router-dom";
 import GlobalAppShell from "@/components/layouts/global/global-app-shell.tsx";
 import { PosthogUser } from "@/ee/components/posthog-user.tsx";
 import { isCloud } from "@/lib/config.ts";
-import { SearchSpotlight } from "@/features/search/components/search-spotlight.tsx";
-import React from "react";
-import { useGetSpaceBySlugQuery } from "@/features/space/queries/space-query.ts";

 export default function Layout() {
-  const { spaceSlug } = useParams();
-  const { data: space } = useGetSpaceBySlugQuery(spaceSlug);
-
  return (
    <UserProvider>
      <GlobalAppShell>
        <Outlet />
      </GlobalAppShell>
      {isCloud() && <PosthogUser />}
-      <SearchSpotlight spaceId={space?.id} />
    </UserProvider>
  );
 }
@@ -1,8 +1,8 @@
 import {
  Group,
  Menu,
-  Text,
  UnstyledButton,
+  Text,
  useMantineColorScheme,
 } from "@mantine/core";
 import {
@@ -10,6 +10,7 @@ import {
  IconBrush,
  IconCheck,
  IconChevronDown,
+  IconChevronRight,
  IconDeviceDesktop,
  IconLogout,
  IconMoon,
@@ -25,7 +26,6 @@ import APP_ROUTE from "@/lib/app-route.ts";
 import useAuth from "@/features/auth/hooks/use-auth.ts";
 import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
 import { useTranslation } from "react-i18next";
-import { AvatarIconType } from "@/features/attachments/types/attachment.types.ts";

 export default function TopMenu() {
  const { t } = useTranslation();
@@ -50,7 +50,6 @@ export default function TopMenu() {
              name={workspace?.name}
              variant="filled"
              size="sm"
-              type={AvatarIconType.WORKSPACE_ICON}
            />
            <Text fw={500} size="sm" lh={1} mr={3} lineClamp={1}>
              {workspace?.name}
@@ -50,7 +50,7 @@ export default function AppVersion() {
            href="https://github.com/docmost/docmost/releases"
            target="_blank"
          >
-            {appVersion?.currentVersion && <>v{appVersion?.currentVersion}</>}
+            v{APP_VERSION}
          </Text>
        </Indicator>
      </Tooltip>
@@ -10,7 +10,6 @@ import { getWorkspaceMembers } from "@/features/workspace/services/workspace-ser
 import { getLicenseInfo } from "@/ee/licence/services/license-service.ts";
 import { getSsoProviders } from "@/ee/security/services/security-service.ts";
 import { getShares } from "@/features/share/services/share-service.ts";
-import { getApiKeys } from "@/ee/api-key";

 export const prefetchWorkspaceMembers = () => {
  const params = { limit: 100, page: 1, query: "" } as QueryParams;
@@ -66,17 +65,3 @@ export const prefetchShares = () => {
    queryFn: () => getShares({ page: 1, limit: 100 }),
  });
 };
-
-export const prefetchApiKeys = () => {
-  queryClient.prefetchQuery({
-    queryKey: ["api-key-list", { page: 1 }],
-    queryFn: () => getApiKeys({ page: 1 }),
-  });
-};
-
-export const prefetchApiKeyManagement = () => {
-  queryClient.prefetchQuery({
-    queryKey: ["api-key-list", { page: 1 }],
-    queryFn: () => getApiKeys({ page: 1, adminView: true }),
-  });
-};
@@ -21,8 +21,6 @@ import useUserRole from "@/hooks/use-user-role.tsx";
 import { useAtom } from "jotai/index";
 import { workspaceAtom } from "@/features/user/atoms/current-user-atom.ts";
 import {
-  prefetchApiKeyManagement,
-  prefetchApiKeys,
  prefetchBilling,
  prefetchGroups,
  prefetchLicense,
@@ -62,14 +60,6 @@ const groupedData: DataGroup[] = [
        icon: IconBrush,
        path: "/settings/account/preferences",
      },
-      {
-        label: "API keys",
-        icon: IconKey,
-        path: "/settings/account/api-keys",
-        isCloud: true,
-        isEnterprise: true,
-        showDisabledInNonEE: true,
-      },
    ],
  },
  {
@@ -100,15 +90,6 @@ const groupedData: DataGroup[] = [
      { label: "Groups", icon: IconUsersGroup, path: "/settings/groups" },
      { label: "Spaces", icon: IconSpaces, path: "/settings/spaces" },
      { label: "Public sharing", icon: IconWorld, path: "/settings/sharing" },
-      {
-        label: "API management",
-        icon: IconKey,
-        path: "/settings/api-keys",
-        isCloud: true,
-        isEnterprise: true,
-        isAdmin: true,
-        showDisabledInNonEE: true,
-      },
    ],
  },
  {
@@ -214,12 +195,6 @@ export default function SettingsSidebar() {
            case "Public sharing":
              prefetchHandler = prefetchShares;
              break;
-            case "API keys":
-              prefetchHandler = prefetchApiKeys;
-              break;
-            case "API management":
-              prefetchHandler = prefetchApiKeyManagement;
-              break;
            default:
              break;
          }
@@ -1,7 +1,6 @@
 import React from "react";
 import { Avatar } from "@mantine/core";
 import { getAvatarUrl } from "@/lib/config.ts";
-import { AvatarIconType } from "@/features/attachments/types/attachment.types.ts";

 interface CustomAvatarProps {
  avatarUrl: string;
@@ -12,15 +11,13 @@ interface CustomAvatarProps {
  variant?: string;
  style?: any;
  component?: any;
-  type?: AvatarIconType;
-  mt?: string | number;
 }

 export const CustomAvatar = React.forwardRef<
  HTMLInputElement,
  CustomAvatarProps
->(({ avatarUrl, name, type, ...props }: CustomAvatarProps, ref) => {
-  const avatarLink = getAvatarUrl(avatarUrl, type);
+>(({ avatarUrl, name, ...props }: CustomAvatarProps, ref) => {
+  const avatarLink = getAvatarUrl(avatarUrl);

  return (
    <Avatar
@@ -15,11 +15,6 @@ export interface EmojiPickerInterface {
  icon: ReactNode;
  removeEmojiAction: () => void;
  readOnly: boolean;
-  actionIconProps?: {
-    size?: string;
-    variant?: string;
-    c?: string;
-  };
 }

 function EmojiPicker({
@@ -27,7 +22,6 @@ function EmojiPicker({
  icon,
  removeEmojiAction,
  readOnly,
-  actionIconProps,
 }: EmojiPickerInterface) {
  const { t } = useTranslation();
  const [opened, handlers] = useDisclosure(false);
@@ -70,12 +64,7 @@ function EmojiPicker({
      closeOnEscape={true}
    >
      <Popover.Target ref={setTarget}>
-        <ActionIcon 
-          c={actionIconProps?.c || "gray"} 
-          variant={actionIconProps?.variant || "transparent"} 
-          size={actionIconProps?.size}
-          onClick={handlers.toggle}
-        >
+        <ActionIcon c="gray" variant="transparent" onClick={handlers.toggle}>
          {icon}
        </ActionIcon>
      </Popover.Target>
@@ -1,47 +0,0 @@
-import { Box } from "@mantine/core";
-import React from "react";
-
-interface ResponsiveSettingsRowProps {
-  children: React.ReactNode;
-}
-
-export function ResponsiveSettingsRow({ children }: ResponsiveSettingsRowProps) {
-  return (
-    <Box
-      style={{
-        display: "flex",
-        flexDirection: "row",
-        justifyContent: "space-between",
-        alignItems: "center",
-        gap: "1rem",
-        flexWrap: "wrap",
-      }}
-    >
-      {children}
-    </Box>
-  );
-}
-
-interface ResponsiveSettingsContentProps {
-  children: React.ReactNode;
-}
-
-export function ResponsiveSettingsContent({ children }: ResponsiveSettingsContentProps) {
-  return (
-    <Box style={{ flex: "1 1 300px", minWidth: 0 }}>
-      {children}
-    </Box>
-  );
-}
-
-interface ResponsiveSettingsControlProps {
-  children: React.ReactNode;
-}
-
-export function ResponsiveSettingsControl({ children }: ResponsiveSettingsControlProps) {
-  return (
-    <Box style={{ flex: "0 0 auto" }}>
-      {children}
-    </Box>
-  );
-}
@@ -0,0 +1,61 @@
+import { useState, useCallback, useRef } from "react";
+import { useAiGenerateStreamMutation } from "@/ee/ai/queries/ai-query.ts";
+import { AiGenerateDto } from "@/ee/ai/types/ai.types.ts";
+
+export function useAiStream() {
+  const [content, setContent] = useState("");
+  const [isStreaming, setIsStreaming] = useState(false);
+  const abortControllerRef = useRef<AbortController | null>(null);
+  const mutation = useAiGenerateStreamMutation();
+
+  const startStream = useCallback(
+    async (data: AiGenerateDto) => {
+      setContent("");
+      setIsStreaming(true);
+
+      try {
+        const controller = await mutation.mutateAsync({
+          ...data,
+          onChunk: (chunk) => {
+            setContent((prev) => prev + chunk.content);
+          },
+          onError: (error) => {
+            console.error("AI stream error:", error);
+            setIsStreaming(false);
+          },
+          onComplete: () => {
+            setIsStreaming(false);
+          },
+        });
+
+        abortControllerRef.current = controller;
+      } catch (error) {
+        console.error("Failed to start stream:", error);
+        setIsStreaming(false);
+      }
+    },
+    [mutation]
+  );
+
+  const stopStream = useCallback(() => {
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+      abortControllerRef.current = null;
+      setIsStreaming(false);
+    }
+  }, []);
+
+  const resetContent = useCallback(() => {
+    setContent("");
+  }, []);
+
+  return {
+    content,
+    isStreaming,
+    startStream,
+    stopStream,
+    resetContent,
+    isLoading: mutation.isPending,
+    error: mutation.error,
+  };
+}
@@ -0,0 +1,45 @@
+import {
+  useMutation,
+  UseMutationResult,
+  useQuery,
+  UseQueryResult,
+} from "@tanstack/react-query";
+import {
+  generateAiContent,
+  generateAiContentStream,
+  getAiConfig,
+} from "@/ee/ai/services/ai-service.ts";
+import {
+  AiConfigResponse,
+  AiContentResponse,
+  AiGenerateDto,
+  AiStreamChunk,
+  AiStreamError,
+} from "@/ee/ai/types/ai.types.ts";
+
+export function useAiGenerateMutation(): UseMutationResult<
+  AiContentResponse,
+  Error,
+  AiGenerateDto
+> {
+  return useMutation({
+    mutationFn: (data: AiGenerateDto) => generateAiContent(data),
+  });
+}
+
+interface StreamCallbacks {
+  onChunk: (chunk: AiStreamChunk) => void;
+  onError?: (error: AiStreamError) => void;
+  onComplete?: () => void;
+}
+
+export function useAiGenerateStreamMutation(): UseMutationResult<
+  AbortController,
+  Error,
+  AiGenerateDto & StreamCallbacks
+> {
+  return useMutation({
+    mutationFn: ({ onChunk, onError, onComplete, ...data }) =>
+      generateAiContentStream(data, onChunk, onError, onComplete),
+  });
+}
@@ -0,0 +1,89 @@
+import api from "@/lib/api-client.ts";
+import {
+  AiGenerateDto,
+  AiContentResponse,
+  AiStreamChunk,
+  AiStreamError,
+} from "@/ee/ai/types/ai.types.ts";
+
+export async function generateAiContent(
+  data: AiGenerateDto,
+): Promise<AiContentResponse> {
+  const req = await api.post<AiContentResponse>("/ai/generate", data);
+  return req.data;
+}
+
+export async function generateAiContentStream(
+  data: AiGenerateDto,
+  onChunk: (chunk: AiStreamChunk) => void,
+  onError?: (error: AiStreamError) => void,
+  onComplete?: () => void,
+): Promise<AbortController> {
+  const abortController = new AbortController();
+  try {
+    const response = await fetch("/api/ai/generate/stream", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(data),
+      signal: abortController.signal,
+      credentials: "include", // This ensures cookies are sent, matching axios withCredentials
+    });
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    const reader = response.body?.getReader();
+    const decoder = new TextDecoder();
+
+    if (!reader) {
+      throw new Error("Response body is not readable");
+    }
+
+    const processStream = async () => {
+      try {
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+
+          const chunk = decoder.decode(value, { stream: true });
+          const lines = chunk.split("\n");
+
+          for (const line of lines) {
+            if (line.startsWith("data: ")) {
+              const data = line.slice(6);
+              if (data === "[DONE]") {
+                onComplete?.();
+                return;
+              }
+              try {
+                const parsed = JSON.parse(data);
+                if (parsed.error) {
+                  onError?.(parsed);
+                } else {
+                  onChunk(parsed);
+                }
+              } catch (e) {
+                // Ignore parse errors for incomplete chunks
+              }
+            }
+          }
+        }
+      } catch (error) {
+        if (error.name !== "AbortError") {
+          onError?.({ error: error.message });
+        }
+      } finally {
+        reader.releaseLock();
+      }
+    };
+
+    processStream();
+  } catch (error) {
+    onError?.({ error: error.message });
+  }
+
+  return abortController;
+}
@@ -0,0 +1,40 @@
+export enum AiAction {
+  IMPROVE_WRITING = "improve_writing",
+  FIX_SPELLING_GRAMMAR = "fix_spelling_grammar",
+  MAKE_SHORTER = "make_shorter",
+  MAKE_LONGER = "make_longer",
+  SIMPLIFY = "simplify",
+  CHANGE_TONE = "change_tone",
+  SUMMARIZE = "summarize",
+  CONTINUE_WRITING = "continue_writing",
+  TRANSLATE = "translate",
+  CUSTOM = "custom",
+}
+
+export interface AiGenerateDto {
+  action?: AiAction;
+  content: string;
+  prompt?: string;
+}
+
+export interface AiContentResponse {
+  content: string;
+  usage?: {
+    promptTokens: number;
+    completionTokens: number;
+    totalTokens: number;
+  };
+}
+
+export interface AiConfigResponse {
+  configured: boolean;
+  availableActions: AiAction[];
+}
+
+export interface AiStreamChunk {
+  content: string;
+}
+
+export interface AiStreamError {
+  error: string;
+}
@@ -1,72 +0,0 @@
-import {
-  Modal,
-  Text,
-  Stack,
-  Alert,
-  Group,
-  Button,
-  TextInput,
-} from "@mantine/core";
-import { IconAlertTriangle } from "@tabler/icons-react";
-import { useTranslation } from "react-i18next";
-import { IApiKey } from "@/ee/api-key";
-import CopyTextButton from "@/components/common/copy.tsx";
-
-interface ApiKeyCreatedModalProps {
-  opened: boolean;
-  onClose: () => void;
-  apiKey: IApiKey;
-}
-
-export function ApiKeyCreatedModal({
-  opened,
-  onClose,
-  apiKey,
-}: ApiKeyCreatedModalProps) {
-  const { t } = useTranslation();
-
-  if (!apiKey) return null;
-
-  return (
-    <Modal
-      opened={opened}
-      onClose={onClose}
-      title={t("API key created")}
-      size="lg"
-    >
-      <Stack gap="md">
-        <Alert
-          icon={<IconAlertTriangle size={16} />}
-          title={t("Important")}
-          color="red"
-        >
-          {t(
-            "Make sure to copy your API key now. You won't be able to see it again!",
-          )}
-        </Alert>
-
-        <div>
-          <Text size="sm" fw={500} mb="xs">
-            {t("API key")}
-          </Text>
-          <Group gap="xs" wrap="nowrap">
-            <TextInput
-              variant="filled"
-              style={{
-                flex: 1,
-              }}
-              value={apiKey.token}
-              readOnly
-            />
-
-            <CopyTextButton text={apiKey.token} />
-          </Group>
-        </div>
-
-        <Button fullWidth onClick={onClose} mt="md">
-          {t("I've saved my API key")}
-        </Button>
-      </Stack>
-    </Modal>
-  );
-}
@@ -1,143 +0,0 @@
-import { ActionIcon, Group, Menu, Table, Text } from "@mantine/core";
-import { IconDots, IconEdit, IconTrash } from "@tabler/icons-react";
-import { format } from "date-fns";
-import { useTranslation } from "react-i18next";
-import { IApiKey } from "@/ee/api-key";
-import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
-import React from "react";
-import NoTableResults from "@/components/common/no-table-results";
-
-interface ApiKeyTableProps {
-  apiKeys: IApiKey[];
-  isLoading?: boolean;
-  showUserColumn?: boolean;
-  onUpdate?: (apiKey: IApiKey) => void;
-  onRevoke?: (apiKey: IApiKey) => void;
-}
-
-export function ApiKeyTable({
-  apiKeys,
-  isLoading,
-  showUserColumn = false,
-  onUpdate,
-  onRevoke,
-}: ApiKeyTableProps) {
-  const { t } = useTranslation();
-
-  const formatDate = (date: Date | string | null) => {
-    if (!date) return t("Never");
-    return format(new Date(date), "MMM dd, yyyy");
-  };
-
-  const isExpired = (expiresAt: string | null) => {
-    if (!expiresAt) return false;
-    return new Date(expiresAt) < new Date();
-  };
-
-  return (
-    <Table.ScrollContainer minWidth={500}>
-      <Table highlightOnHover verticalSpacing="sm">
-        <Table.Thead>
-          <Table.Tr>
-            <Table.Th>{t("Name")}</Table.Th>
-            {showUserColumn && <Table.Th>{t("User")}</Table.Th>}
-            <Table.Th>{t("Last used")}</Table.Th>
-            <Table.Th>{t("Expires")}</Table.Th>
-            <Table.Th>{t("Created")}</Table.Th>
-            <Table.Th></Table.Th>
-          </Table.Tr>
-        </Table.Thead>
-
-        <Table.Tbody>
-          {apiKeys && apiKeys.length > 0 ? (
-            apiKeys.map((apiKey: IApiKey, index: number) => (
-              <Table.Tr key={index}>
-                <Table.Td>
-                  <Text fz="sm" fw={500}>
-                    {apiKey.name}
-                  </Text>
-                </Table.Td>
-
-                {showUserColumn && apiKey.creator && (
-                  <Table.Td>
-                    <Group gap="4" wrap="nowrap">
-                      <CustomAvatar
-                        avatarUrl={apiKey.creator?.avatarUrl}
-                        name={apiKey.creator.name}
-                        size="sm"
-                      />
-                      <Text fz="sm" lineClamp={1}>
-                        {apiKey.creator.name}
-                      </Text>
-                    </Group>
-                  </Table.Td>
-                )}
-
-                <Table.Td>
-                  <Text fz="sm" style={{ whiteSpace: "nowrap" }}>
-                    {formatDate(apiKey.lastUsedAt)}
-                  </Text>
-                </Table.Td>
-
-                <Table.Td>
-                  {apiKey.expiresAt ? (
-                    isExpired(apiKey.expiresAt) ? (
-                      <Text fz="sm" style={{ whiteSpace: "nowrap" }}>
-                        {t("Expired")}
-                      </Text>
-                    ) : (
-                      <Text fz="sm" style={{ whiteSpace: "nowrap" }}>
-                        {formatDate(apiKey.expiresAt)}
-                      </Text>
-                    )
-                  ) : (
-                    <Text fz="sm" style={{ whiteSpace: "nowrap" }}>
-                      {t("Never")}
-                    </Text>
-                  )}
-                </Table.Td>
-
-                <Table.Td>
-                  <Text fz="sm" style={{ whiteSpace: "nowrap" }}>
-                    {formatDate(apiKey.createdAt)}
-                  </Text>
-                </Table.Td>
-
-                <Table.Td>
-                  <Menu position="bottom-end" withinPortal>
-                    <Menu.Target>
-                      <ActionIcon variant="subtle" color="gray">
-                        <IconDots size={16} />
-                      </ActionIcon>
-                    </Menu.Target>
-                    <Menu.Dropdown>
-                      {onUpdate && (
-                        <Menu.Item
-                          leftSection={<IconEdit size={16} />}
-                          onClick={() => onUpdate(apiKey)}
-                        >
-                          {t("Rename")}
-                        </Menu.Item>
-                      )}
-                      {onRevoke && (
-                        <Menu.Item
-                          leftSection={<IconTrash size={16} />}
-                          color="red"
-                          onClick={() => onRevoke(apiKey)}
-                        >
-                          {t("Revoke")}
-                        </Menu.Item>
-                      )}
-                    </Menu.Dropdown>
-                  </Menu>
-                </Table.Td>
-              </Table.Tr>
-            ))
-          ) : (
-            <NoTableResults colSpan={showUserColumn ? 6 : 5} />
-          )}
-        </Table.Tbody>
-      </Table>
-    </Table.ScrollContainer>
-  );
-}
@@ -1,153 +0,0 @@
-import { lazy, Suspense, useState } from "react";
-import { Modal, TextInput, Button, Group, Stack, Select } from "@mantine/core";
-import { useForm } from "@mantine/form";
-import { zodResolver } from "mantine-form-zod-resolver";
-import { z } from "zod";
-import { useTranslation } from "react-i18next";
-import { useCreateApiKeyMutation } from "@/ee/api-key/queries/api-key-query";
-import { IconCalendar } from "@tabler/icons-react";
-import { IApiKey } from "@/ee/api-key";
-
-const DateInput = lazy(() =>
-  import("@mantine/dates").then((module) => ({
-    default: module.DateInput,
-  })),
-);
-
-interface CreateApiKeyModalProps {
-  opened: boolean;
-  onClose: () => void;
-  onSuccess: (response: IApiKey) => void;
-}
-
-const formSchema = z.object({
-  name: z.string().min(1, "Name is required"),
-  expiresAt: z.string().optional(),
-});
-type FormValues = z.infer<typeof formSchema>;
-
-export function CreateApiKeyModal({
-  opened,
-  onClose,
-  onSuccess,
-}: CreateApiKeyModalProps) {
-  const { t } = useTranslation();
-  const [expirationOption, setExpirationOption] = useState<string>("30");
-  const createApiKeyMutation = useCreateApiKeyMutation();
-
-  const form = useForm<FormValues>({
-    validate: zodResolver(formSchema),
-    initialValues: {
-      name: "",
-      expiresAt: "",
-    },
-  });
-
-  const getExpirationDate = (): string | undefined => {
-    if (expirationOption === "never") {
-      return undefined;
-    }
-    if (expirationOption === "custom") {
-      return form.values.expiresAt;
-    }
-    const days = parseInt(expirationOption);
-    const date = new Date();
-    date.setDate(date.getDate() + days);
-    return date.toISOString();
-  };
-
-  const getExpirationLabel = (days: number) => {
-    const date = new Date();
-    date.setDate(date.getDate() + days);
-    const formatted = date.toLocaleDateString("en-US", {
-      month: "short",
-      day: "2-digit",
-      year: "numeric",
-    });
-    return `${days} days (${formatted})`;
-  };
-
-  const expirationOptions = [
-    { value: "30", label: getExpirationLabel(30) },
-    { value: "60", label: getExpirationLabel(60) },
-    { value: "90", label: getExpirationLabel(90) },
-    { value: "365", label: getExpirationLabel(365) },
-    { value: "custom", label: t("Custom") },
-    { value: "never", label: t("No expiration") },
-  ];
-
-  const handleSubmit = async (data: {
-    name?: string;
-    expiresAt?: string | Date;
-  }) => {
-    const groupData = {
-      name: data.name,
-      expiresAt: getExpirationDate(),
-    };
-
-    try {
-      const createdKey = await createApiKeyMutation.mutateAsync(groupData);
-      onSuccess(createdKey);
-      form.reset();
-      onClose();
-    } catch (err) {
-      //
-    }
-  };
-
-  const handleClose = () => {
-    form.reset();
-    setExpirationOption("30");
-    onClose();
-  };
-
-  return (
-    <Modal
-      opened={opened}
-      onClose={handleClose}
-      title={t("Create API Key")}
-      size="md"
-    >
-      <form onSubmit={form.onSubmit((values) => handleSubmit(values))}>
-        <Stack gap="md">
-          <TextInput
-            label={t("Name")}
-            placeholder={t("Enter a descriptive name")}
-            data-autofocus
-            required
-            {...form.getInputProps("name")}
-          />
-
-          <Select
-            label={t("Expiration")}
-            data={expirationOptions}
-            value={expirationOption}
-            onChange={(value) => setExpirationOption(value || "30")}
-            leftSection={<IconCalendar size={16} />}
-            allowDeselect={false}
-          />
-
-          {expirationOption === "custom" && (
-            <Suspense fallback={null}>
-              <DateInput
-                label={t("Custom expiration date")}
-                placeholder={t("Select expiration date")}
-                minDate={new Date()}
-                {...form.getInputProps("expiresAt")}
-              />
-            </Suspense>
-          )}
-
-          <Group justify="flex-end" mt="md">
-            <Button variant="default" onClick={handleClose}>
-              {t("Cancel")}
-            </Button>
-            <Button type="submit" loading={createApiKeyMutation.isPending}>
-              {t("Create")}
-            </Button>
-          </Group>
-        </Stack>
-      </form>
-    </Modal>
-  );
-}
@@ -1,62 +0,0 @@
-import { Modal, Text, Button, Group, Stack } from "@mantine/core";
-import { useTranslation } from "react-i18next";
-
-import { useRevokeApiKeyMutation } from "@/ee/api-key/queries/api-key-query.ts";
-import { IApiKey } from "@/ee/api-key";
-
-interface RevokeApiKeyModalProps {
-  opened: boolean;
-  onClose: () => void;
-  apiKey: IApiKey | null;
-}
-
-export function RevokeApiKeyModal({
-  opened,
-  onClose,
-  apiKey,
-}: RevokeApiKeyModalProps) {
-  const { t } = useTranslation();
-  const revokeApiKeyMutation = useRevokeApiKeyMutation();
-
-  const handleRevoke = async () => {
-    if (!apiKey) return;
-    await revokeApiKeyMutation.mutateAsync({
-      apiKeyId: apiKey.id,
-    });
-    onClose();
-  };
-
-  return (
-    <Modal
-      opened={opened}
-      onClose={onClose}
-      title={t("Revoke API key")}
-      size="md"
-    >
-      <Stack gap="md">
-        <Text>
-          {t("Are you sure you want to revoke this API key")}{" "}
-          <strong>{apiKey?.name}</strong>?
-        </Text>
-        <Text size="sm" c="dimmed">
-          {t(
-            "This action cannot be undone. Any applications using this API key will stop working.",
-          )}
-        </Text>
-
-        <Group justify="flex-end" mt="md">
-          <Button variant="default" onClick={onClose}>
-            {t("Cancel")}
-          </Button>
-          <Button
-            color="red"
-            onClick={handleRevoke}
-            loading={revokeApiKeyMutation.isPending}
-          >
-            {t("Revoke")}
-          </Button>
-        </Group>
-      </Stack>
-    </Modal>
-  );
-}
@@ -1,80 +0,0 @@
-import { Modal, TextInput, Button, Group, Stack } from "@mantine/core";
-import { useForm } from "@mantine/form";
-import { zodResolver } from "mantine-form-zod-resolver";
-import { z } from "zod";
-import { useTranslation } from "react-i18next";
-import { useUpdateApiKeyMutation } from "@/ee/api-key/queries/api-key-query";
-import { IApiKey } from "@/ee/api-key";
-import { useEffect } from "react";
-
-const formSchema = z.object({
-  name: z.string().min(1, "Name is required"),
-});
-type FormValues = z.infer<typeof formSchema>;
-
-interface UpdateApiKeyModalProps {
-  opened: boolean;
-  onClose: () => void;
-  apiKey: IApiKey | null;
-}
-
-export function UpdateApiKeyModal({
-  opened,
-  onClose,
-  apiKey,
-}: UpdateApiKeyModalProps) {
-  const { t } = useTranslation();
-  const updateApiKeyMutation = useUpdateApiKeyMutation();
-
-  const form = useForm<FormValues>({
-    validate: zodResolver(formSchema),
-    initialValues: {
-      name: "",
-    },
-  });
-
-  useEffect(() => {
-    if (opened && apiKey) {
-      form.setValues({ name: apiKey.name });
-    }
-  }, [opened, apiKey]);
-
-  const handleSubmit = async (data: { name?: string }) => {
-    const apiKeyData = {
-      apiKeyId: apiKey.id,
-      name: data.name,
-    };
-
-    await updateApiKeyMutation.mutateAsync(apiKeyData);
-    onClose();
-  };
-
-  return (
-    <Modal
-      opened={opened}
-      onClose={onClose}
-      title={t("Update API key")}
-      size="md"
-    >
-      <form onSubmit={form.onSubmit((values) => handleSubmit(values))}>
-        <Stack gap="md">
-          <TextInput
-            label={t("Name")}
-            placeholder={t("Enter a descriptive token name")}
-            required
-            {...form.getInputProps("name")}
-          />
-
-          <Group justify="flex-end" mt="md">
-            <Button variant="default" onClick={onClose}>
-              {t("Cancel")}
-            </Button>
-            <Button type="submit" loading={updateApiKeyMutation.isPending}>
-              {t("Update")}
-            </Button>
-          </Group>
-        </Stack>
-      </form>
-    </Modal>
-  );
-}
@@ -1,11 +0,0 @@
-export { ApiKeyTable } from "./components/api-key-table";
-export { CreateApiKeyModal } from "./components/create-api-key-modal";
-export { ApiKeyCreatedModal } from "./components/api-key-created-modal";
-export { UpdateApiKeyModal } from "./components/update-api-key-modal";
-export { RevokeApiKeyModal } from "./components/revoke-api-key-modal";
-
-// Services
-export * from "./services/api-key-service";
-
-// Types
-export * from "./types/api-key.types";
@@ -1,106 +0,0 @@
-import React, { useState } from "react";
-import { Button, Group, Space } from "@mantine/core";
-import { Helmet } from "react-helmet-async";
-import { useTranslation } from "react-i18next";
-import SettingsTitle from "@/components/settings/settings-title";
-import { getAppName } from "@/lib/config";
-import { ApiKeyTable } from "@/ee/api-key/components/api-key-table";
-import { CreateApiKeyModal } from "@/ee/api-key/components/create-api-key-modal";
-import { ApiKeyCreatedModal } from "@/ee/api-key/components/api-key-created-modal";
-import { UpdateApiKeyModal } from "@/ee/api-key/components/update-api-key-modal";
-import { RevokeApiKeyModal } from "@/ee/api-key/components/revoke-api-key-modal";
-import Paginate from "@/components/common/paginate";
-import { usePaginateAndSearch } from "@/hooks/use-paginate-and-search";
-import { useGetApiKeysQuery } from "@/ee/api-key/queries/api-key-query.ts";
-import { IApiKey } from "@/ee/api-key";
-
-export default function UserApiKeys() {
-  const { t } = useTranslation();
-  const { page, setPage } = usePaginateAndSearch();
-  const [createModalOpened, setCreateModalOpened] = useState(false);
-  const [createdApiKey, setCreatedApiKey] = useState<IApiKey | null>(null);
-  const [updateModalOpened, setUpdateModalOpened] = useState(false);
-  const [revokeModalOpened, setRevokeModalOpened] = useState(false);
-  const [selectedApiKey, setSelectedApiKey] = useState<IApiKey | null>(null);
-  const { data, isLoading } = useGetApiKeysQuery({ page });
-
-  const handleCreateSuccess = (response: IApiKey) => {
-    setCreatedApiKey(response);
-  };
-
-  const handleUpdate = (apiKey: IApiKey) => {
-    setSelectedApiKey(apiKey);
-    setUpdateModalOpened(true);
-  };
-
-  const handleRevoke = (apiKey: IApiKey) => {
-    setSelectedApiKey(apiKey);
-    setRevokeModalOpened(true);
-  };
-
-  return (
-    <>
-      <Helmet>
-        <title>
-          {t("API keys")} - {getAppName()}
-        </title>
-      </Helmet>
-
-      <SettingsTitle title={t("API keys")} />
-
-      <Group justify="flex-end" mb="md">
-        <Button onClick={() => setCreateModalOpened(true)}>
-          {t("Create API Key")}
-        </Button>
-      </Group>
-
-      <ApiKeyTable
-        apiKeys={data?.items || []}
-        isLoading={isLoading}
-        onUpdate={handleUpdate}
-        onRevoke={handleRevoke}
-      />
-
-      <Space h="md" />
-
-      {data?.items.length > 0 && (
-        <Paginate
-          currentPage={page}
-          hasPrevPage={data?.meta.hasPrevPage}
-          hasNextPage={data?.meta.hasNextPage}
-          onPageChange={setPage}
-        />
-      )}
-
-      <CreateApiKeyModal
-        opened={createModalOpened}
-        onClose={() => setCreateModalOpened(false)}
-        onSuccess={handleCreateSuccess}
-      />
-
-      <ApiKeyCreatedModal
-        opened={!!createdApiKey}
-        onClose={() => setCreatedApiKey(null)}
-        apiKey={createdApiKey}
-      />
-
-      <UpdateApiKeyModal
-        opened={updateModalOpened}
-        onClose={() => {
-          setUpdateModalOpened(false);
-          setSelectedApiKey(null);
-        }}
-        apiKey={selectedApiKey}
-      />
-
-      <RevokeApiKeyModal
-        opened={revokeModalOpened}
-        onClose={() => {
-          setRevokeModalOpened(false);
-          setSelectedApiKey(null);
-        }}
-        apiKey={selectedApiKey}
-      />
-    </>
-  );
-}
@@ -1,117 +0,0 @@
-import React, { useState } from "react";
-import { Button, Group, Space, Text } from "@mantine/core";
-import { Helmet } from "react-helmet-async";
-import { useTranslation } from "react-i18next";
-import SettingsTitle from "@/components/settings/settings-title";
-import { getAppName } from "@/lib/config";
-import { ApiKeyTable } from "@/ee/api-key/components/api-key-table";
-import { CreateApiKeyModal } from "@/ee/api-key/components/create-api-key-modal";
-import { ApiKeyCreatedModal } from "@/ee/api-key/components/api-key-created-modal";
-import { UpdateApiKeyModal } from "@/ee/api-key/components/update-api-key-modal";
-import { RevokeApiKeyModal } from "@/ee/api-key/components/revoke-api-key-modal";
-import Paginate from "@/components/common/paginate";
-import { usePaginateAndSearch } from "@/hooks/use-paginate-and-search";
-import { useGetApiKeysQuery } from "@/ee/api-key/queries/api-key-query.ts";
-import { IApiKey } from "@/ee/api-key";
-import useUserRole from '@/hooks/use-user-role.tsx';
-
-export default function WorkspaceApiKeys() {
-  const { t } = useTranslation();
-  const { page, setPage } = usePaginateAndSearch();
-  const [createModalOpened, setCreateModalOpened] = useState(false);
-  const [createdApiKey, setCreatedApiKey] = useState<IApiKey | null>(null);
-  const [updateModalOpened, setUpdateModalOpened] = useState(false);
-  const [revokeModalOpened, setRevokeModalOpened] = useState(false);
-  const [selectedApiKey, setSelectedApiKey] = useState<IApiKey | null>(null);
-  const { data, isLoading } = useGetApiKeysQuery({ page, adminView: true });
-  const { isAdmin } = useUserRole();
-
-  if (!isAdmin) {
-    return null;
-  }
-
-  const handleCreateSuccess = (response: IApiKey) => {
-    setCreatedApiKey(response);
-  };
-
-  const handleUpdate = (apiKey: IApiKey) => {
-    setSelectedApiKey(apiKey);
-    setUpdateModalOpened(true);
-  };
-
-  const handleRevoke = (apiKey: IApiKey) => {
-    setSelectedApiKey(apiKey);
-    setRevokeModalOpened(true);
-  };
-
-  return (
-    <>
-      <Helmet>
-        <title>
-          {t("API management")} - {getAppName()}
-        </title>
-      </Helmet>
-
-      <SettingsTitle title={t("API management")} />
-
-      <Text size="md" c="dimmed" mb="md">
-        {t("Manage API keys for all users in the workspace")}
-      </Text>
-
-      <Group justify="flex-end" mb="md">
-        <Button onClick={() => setCreateModalOpened(true)}>
-          {t("Create API Key")}
-        </Button>
-      </Group>
-
-      <ApiKeyTable
-        apiKeys={data?.items}
-        isLoading={isLoading}
-        showUserColumn
-        onUpdate={handleUpdate}
-        onRevoke={handleRevoke}
-      />
-
-      <Space h="md" />
-
-      {data?.items.length > 0 && (
-        <Paginate
-          currentPage={page}
-          hasPrevPage={data?.meta.hasPrevPage}
-          hasNextPage={data?.meta.hasNextPage}
-          onPageChange={setPage}
-        />
-      )}
-
-      <CreateApiKeyModal
-        opened={createModalOpened}
-        onClose={() => setCreateModalOpened(false)}
-        onSuccess={handleCreateSuccess}
-      />
-
-      <ApiKeyCreatedModal
-        opened={!!createdApiKey}
-        onClose={() => setCreatedApiKey(null)}
-        apiKey={createdApiKey}
-      />
-
-      <UpdateApiKeyModal
-        opened={updateModalOpened}
-        onClose={() => {
-          setUpdateModalOpened(false);
-          setSelectedApiKey(null);
-        }}
-        apiKey={selectedApiKey}
-      />
-
-      <RevokeApiKeyModal
-        opened={revokeModalOpened}
-        onClose={() => {
-          setRevokeModalOpened(false);
-          setSelectedApiKey(null);
-        }}
-        apiKey={selectedApiKey}
-      />
-    </>
-  );
-}
@@ -1,97 +0,0 @@
-import { IPagination, QueryParams } from "@/lib/types.ts";
-import {
-  keepPreviousData,
-  useMutation,
-  useQuery,
-  useQueryClient,
-  UseQueryResult,
-} from "@tanstack/react-query";
-import {
-  createApiKey,
-  getApiKeys,
-  IApiKey,
-  ICreateApiKeyRequest,
-  IUpdateApiKeyRequest,
-  revokeApiKey,
-  updateApiKey,
-} from "@/ee/api-key";
-import { notifications } from "@mantine/notifications";
-import { useTranslation } from "react-i18next";
-
-export function useGetApiKeysQuery(
-  params?: QueryParams,
-): UseQueryResult<IPagination<IApiKey>, Error> {
-  return useQuery({
-    queryKey: ["api-key-list", params],
-    queryFn: () => getApiKeys(params),
-    staleTime: 0,
-    gcTime: 0,
-    placeholderData: keepPreviousData,
-  });
-}
-
-export function useRevokeApiKeyMutation() {
-  const queryClient = useQueryClient();
-  const { t } = useTranslation();
-
-  return useMutation<
-    void,
-    Error,
-    {
-      apiKeyId: string;
-    }
-  >({
-    mutationFn: (data) => revokeApiKey(data),
-    onSuccess: (data, variables) => {
-      notifications.show({ message: t("Revoked successfully") });
-      queryClient.invalidateQueries({
-        predicate: (item) =>
-          ["api-key-list"].includes(item.queryKey[0] as string),
-      });
-    },
-    onError: (error) => {
-      const errorMessage = error["response"]?.data?.message;
-      notifications.show({ message: errorMessage, color: "red" });
-    },
-  });
-}
-
-export function useCreateApiKeyMutation() {
-  const queryClient = useQueryClient();
-  const { t } = useTranslation();
-
-  return useMutation<IApiKey, Error, ICreateApiKeyRequest>({
-    mutationFn: (data) => createApiKey(data),
-    onSuccess: () => {
-      notifications.show({ message: t("API key created successfully") });
-      queryClient.invalidateQueries({
-        predicate: (item) =>
-          ["api-key-list"].includes(item.queryKey[0] as string),
-      });
-    },
-    onError: (error) => {
-      const errorMessage = error["response"]?.data?.message;
-      notifications.show({ message: errorMessage, color: "red" });
-    },
-  });
-}
-
-export function useUpdateApiKeyMutation() {
-  const queryClient = useQueryClient();
-  const { t } = useTranslation();
-
-  return useMutation<IApiKey, Error, IUpdateApiKeyRequest>({
-    mutationFn: (data) => updateApiKey(data),
-    onSuccess: (data, variables) => {
-      notifications.show({ message: t("Updated successfully") });
-      queryClient.invalidateQueries({
-        predicate: (item) =>
-          ["api-key-list"].includes(item.queryKey[0] as string),
-      });
-    },
-    onError: (error) => {
-      const errorMessage = error["response"]?.data?.message;
-      notifications.show({ message: errorMessage, color: "red" });
-    },
-  });
-}
@@ -1,32 +0,0 @@
-import api from "@/lib/api-client";
-import {
-  ICreateApiKeyRequest,
-  IApiKey,
-  IUpdateApiKeyRequest,
-} from "@/ee/api-key/types/api-key.types";
-import { IPagination, QueryParams } from "@/lib/types.ts";
-
-export async function getApiKeys(
-  params?: QueryParams,
-): Promise<IPagination<IApiKey>> {
-  const req = await api.post("/api-keys", { ...params });
-  return req.data;
-}
-
-export async function createApiKey(
-  data: ICreateApiKeyRequest,
-): Promise<IApiKey> {
-  const req = await api.post<IApiKey>("/api-keys/create", data);
-  return req.data;
-}
-
-export async function updateApiKey(
-  data: IUpdateApiKeyRequest,
-): Promise<IApiKey> {
-  const req = await api.post<IApiKey>("/api-keys/update", data);
-  return req.data;
-}
-
-export async function revokeApiKey(data: { apiKeyId: string }): Promise<void> {
-  await api.post("/api-keys/revoke", data);
-}
@@ -1,23 +0,0 @@
-import { IUser } from "@/features/user/types/user.types.ts";
-
-export interface IApiKey {
-  id: string;
-  name: string;
-  token?: string;
-  creatorId: string;
-  workspaceId: string;
-  expiresAt: string | null;
-  lastUsedAt: string | null;
-  createdAt: string;
-  creator: Partial<IUser>;
-}
-
-export interface ICreateApiKeyRequest {
-  name: string;
-  expiresAt?: string;
-}
-
-export interface IUpdateApiKeyRequest {
-  apiKeyId: string;
-  name: string;
-}
@@ -1,124 +0,0 @@
-import React, { useState } from "react";
-import { Modal, TextInput, PasswordInput, Button, Stack } from "@mantine/core";
-import { useForm } from "@mantine/form";
-import { zodResolver } from "mantine-form-zod-resolver";
-import { z } from "zod";
-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 { ldapLogin } from "@/ee/security/services/ldap-auth-service";
-
-const formSchema = z.object({
-  username: z.string().min(1, { message: "Username is required" }),
-  password: z.string().min(1, { message: "Password is required" }),
-});
-
-interface LdapLoginModalProps {
-  opened: boolean;
-  onClose: () => void;
-  provider: IAuthProvider;
-  workspaceId: string;
-}
-
-export function LdapLoginModal({
-  opened,
-  onClose,
-  provider,
-  workspaceId,
-}: LdapLoginModalProps) {
-  const { t } = useTranslation();
-  const navigate = useNavigate();
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  const form = useForm({
-    validate: zodResolver(formSchema),
-    initialValues: {
-      username: "",
-      password: "",
-    },
-  });
-
-  const handleSubmit = async (values: {
-    username: string;
-    password: string;
-  }) => {
-    setIsLoading(true);
-    setError(null);
-
-    try {
-      const response = await ldapLogin({
-        username: values.username,
-        password: values.password,
-        providerId: provider.id,
-        workspaceId,
-      });
-
-      // Handle MFA like the regular login
-      if (response?.userHasMfa) {
-        onClose();
-        navigate(APP_ROUTE.AUTH.MFA_CHALLENGE);
-      } else if (response?.requiresMfaSetup) {
-        onClose();
-        navigate(APP_ROUTE.AUTH.MFA_SETUP_REQUIRED);
-      } else {
-        onClose();
-        navigate(APP_ROUTE.HOME);
-      }
-    } catch (err: any) {
-      setIsLoading(false);
-      const errorMessage =
-        err.response?.data?.message || "Authentication failed";
-      setError(errorMessage);
-
-      notifications.show({
-        message: errorMessage,
-        color: "red",
-      });
-    }
-  };
-
-  const handleClose = () => {
-    form.reset();
-    setError(null);
-    onClose();
-  };
-
-  return (
-    <Modal
-      opened={opened}
-      onClose={handleClose}
-      title={`LDAP Login - ${provider.name}`}
-      size="md"
-    >
-      <form onSubmit={form.onSubmit(handleSubmit)}>
-        <Stack>
-          <TextInput
-            id="ldap-username"
-            type="text"
-            label={t("LDAP username")}
-            placeholder="Enter your LDAP username"
-            variant="filled"
-            disabled={isLoading}
-            data-autofocus
-            {...form.getInputProps("username")}
-          />
-
-          <PasswordInput
-            label={t("LDAP password")}
-            placeholder={t("Enter your LDAP password")}
-            variant="filled"
-            disabled={isLoading}
-            {...form.getInputProps("password")}
-          />
-
-          <Button type="submit" fullWidth mt="md" loading={isLoading}>
-            {t("Sign in with LDAP")}
-          </Button>
-        </Stack>
-      </form>
-    </Modal>
-  );
-}
@@ -1,62 +1,29 @@
-import { useState } from "react";
 import { useWorkspacePublicDataQuery } from "@/features/workspace/queries/workspace-query.ts";
 import { Button, Divider, Stack } from "@mantine/core";
-import { IconLock, IconServer } from "@tabler/icons-react";
+import { IconLock } from "@tabler/icons-react";
 import { IAuthProvider } from "@/ee/security/types/security.types.ts";
 import { buildSsoLoginUrl } from "@/ee/security/sso.utils.ts";
 import { SSO_PROVIDER } from "@/ee/security/contants.ts";
 import { GoogleIcon } from "@/components/icons/google-icon.tsx";
 import { isCloud } from "@/lib/config.ts";
-import { LdapLoginModal } from "@/ee/components/ldap-login-modal.tsx";

 export default function SsoLogin() {
  const { data, isLoading } = useWorkspacePublicDataQuery();
-  const [ldapModalOpened, setLdapModalOpened] = useState(false);
-  const [selectedLdapProvider, setSelectedLdapProvider] = useState<IAuthProvider | null>(null);

  if (!data?.authProviders || data?.authProviders?.length === 0) {
    return null;
  }

  const handleSsoLogin = (provider: IAuthProvider) => {
-    if (provider.type === SSO_PROVIDER.LDAP) {
-      // Open modal for LDAP instead of redirecting
-      setSelectedLdapProvider(provider);
-      setLdapModalOpened(true);
-    } else {
-      // Redirect for other SSO providers
-      window.location.href = buildSsoLoginUrl({
-        providerId: provider.id,
-        type: provider.type,
-        workspaceId: data.id,
-      });
-    }
-  };
-
-  const getProviderIcon = (provider: IAuthProvider) => {
-    if (provider.type === SSO_PROVIDER.GOOGLE) {
-      return <GoogleIcon size={16} />;
-    } else if (provider.type === SSO_PROVIDER.LDAP) {
-      return <IconServer size={16} />;
-    } else {
-      return <IconLock size={16} />;
-    }
+    window.location.href = buildSsoLoginUrl({
+      providerId: provider.id,
+      type: provider.type,
+      workspaceId: data.id,
+    });
  };

  return (
    <>
-      {selectedLdapProvider && (
-        <LdapLoginModal
-          opened={ldapModalOpened}
-          onClose={() => {
-            setLdapModalOpened(false);
-            setSelectedLdapProvider(null);
-          }}
-          provider={selectedLdapProvider}
-          workspaceId={data.id}
-        />
-      )}
-
      {(isCloud() || data.hasLicenseKey) && (
        <>
          <Stack align="stretch" justify="center" gap="sm">
@@ -64,7 +31,13 @@ export default function SsoLogin() {
              <div key={provider.id}>
                <Button
                  onClick={() => handleSsoLogin(provider)}
-                  leftSection={getProviderIcon(provider)}
+                  leftSection={
+                    provider.type === SSO_PROVIDER.GOOGLE ? (
+                      <GoogleIcon size={16} />
+                    ) : (
+                      <IconLock size={16} />
+                    )
+                  }
                  variant="default"
                  fullWidth
                >
@@ -45,7 +45,6 @@ export function MfaBackupCodeInput({
        onChange={(e) => onChange(e.currentTarget.value.toUpperCase())}
        error={error}
        autoFocus
-        data-autofocus
        maxLength={8}
        styles={{
          input: {
@@ -25,30 +25,23 @@ import { regenerateBackupCodes } from "@/ee/mfa";
 import { useForm } from "@mantine/form";
 import { zodResolver } from "mantine-form-zod-resolver";
 import { z } from "zod";
-import useCurrentUser from "@/features/user/hooks/use-current-user";

 interface MfaBackupCodesModalProps {
  opened: boolean;
  onClose: () => void;
 }

+const formSchema = z.object({
+  confirmPassword: z.string().min(1, { message: "Password is required" }),
+});
+
 export function MfaBackupCodesModal({
  opened,
  onClose,
 }: MfaBackupCodesModalProps) {
  const { t } = useTranslation();
-  const { data: currentUser } = useCurrentUser();
  const [backupCodes, setBackupCodes] = useState<string[]>([]);
  const [showNewCodes, setShowNewCodes] = useState(false);
-  const requiresPassword = !currentUser?.user?.hasGeneratedPassword;
-
-  const formSchema = requiresPassword
-    ? z.object({
-        confirmPassword: z.string().min(1, { message: "Password is required" }),
-      })
-    : z.object({
-        confirmPassword: z.string().optional(),
-      });

  const form = useForm({
    validate: zodResolver(formSchema),
@@ -58,7 +51,7 @@ export function MfaBackupCodesModal({
  });

  const regenerateMutation = useMutation({
-    mutationFn: (data: { confirmPassword?: string }) =>
+    mutationFn: (data: { confirmPassword: string }) =>
      regenerateBackupCodes(data),
    onSuccess: (data) => {
      setBackupCodes(data.backupCodes);
@@ -80,12 +73,8 @@ export function MfaBackupCodesModal({
    },
  });

-  const handleRegenerate = (values: { confirmPassword?: string }) => {
-    // Only send confirmPassword if it's required (non-SSO users)
-    const payload = requiresPassword
-      ? { confirmPassword: values.confirmPassword }
-      : {};
-    regenerateMutation.mutate(payload);
+  const handleRegenerate = (values: { confirmPassword: string }) => {
+    regenerateMutation.mutate(values);
  };

  const handleClose = () => {
@@ -125,16 +114,12 @@ export function MfaBackupCodesModal({
                )}
              </Text>

-              {requiresPassword && (
-                <PasswordInput
-                  label={t("Confirm password")}
-                  placeholder={t("Enter your password")}
-                  variant="filled"
-                  {...form.getInputProps("confirmPassword")}
-                  autoFocus
-                  data-autofocus
-                />
-              )}
+              <PasswordInput
+                label={t("Confirm password")}
+                placeholder={t("Enter your password")}
+                variant="filled"
+                {...form.getInputProps("confirmPassword")}
+              />

              <Button
                type="submit"
@@ -97,7 +97,6 @@ export function MfaChallenge() {
                    length={6}
                    type="number"
                    autoFocus
-                    data-autofocus
                    oneTimeCode
                    {...form.getInputProps("code")}
                    error={!!form.errors.code}
@@ -15,7 +15,6 @@ import { notifications } from "@mantine/notifications";
 import { useTranslation } from "react-i18next";
 import { z } from "zod";
 import { disableMfa } from "@/ee/mfa";
-import useCurrentUser from "@/features/user/hooks/use-current-user";

 interface MfaDisableModalProps {
  opened: boolean;
@@ -23,22 +22,16 @@ interface MfaDisableModalProps {
  onComplete: () => void;
 }

+const formSchema = z.object({
+  confirmPassword: z.string().min(1, { message: "Password is required" }),
+});
+
 export function MfaDisableModal({
  opened,
  onClose,
  onComplete,
 }: MfaDisableModalProps) {
  const { t } = useTranslation();
-  const { data: currentUser } = useCurrentUser();
-  const requiresPassword = !currentUser?.user?.hasGeneratedPassword;
-
-  const formSchema = requiresPassword
-    ? z.object({
-        confirmPassword: z.string().min(1, { message: "Password is required" }),
-      })
-    : z.object({
-        confirmPassword: z.string().optional(),
-      });

  const form = useForm({
    validate: zodResolver(formSchema),
@@ -61,12 +54,8 @@ export function MfaDisableModal({
    },
  });

-  const handleSubmit = async (values: { confirmPassword?: string }) => {
-    // Only send confirmPassword if it's required (non-SSO users)
-    const payload = requiresPassword 
-      ? { confirmPassword: values.confirmPassword }
-      : {};
-    await disableMutation.mutateAsync(payload);
+  const handleSubmit = async (values: { confirmPassword: string }) => {
+    await disableMutation.mutateAsync(values);
  };

  const handleClose = () => {
@@ -96,23 +85,18 @@ export function MfaDisableModal({
            </Text>
          </Alert>

-          {requiresPassword && (
-            <>
-              <Text size="sm">
-                {t(
-                  "Please enter your password to disable two-factor authentication:",
-                )}
-              </Text>
+          <Text size="sm">
+            {t(
+              "Please enter your password to disable two-factor authentication:",
+            )}
+          </Text>

-              <PasswordInput
-                label={t("Password")}
-                placeholder={t("Enter your password")}
-                {...form.getInputProps("confirmPassword")}
-                autoFocus
-                data-autofocus
-              />
-            </>
-          )}
+          <PasswordInput
+            label={t("Password")}
+            placeholder={t("Enter your password")}
+            {...form.getInputProps("confirmPassword")}
+            autoFocus
+          />

          <Stack gap="sm">
            <Button
@@ -9,7 +9,6 @@ import { MfaDisableModal } from "@/ee/mfa";
 import { MfaBackupCodesModal } from "@/ee/mfa";
 import { isCloud } from "@/lib/config.ts";
 import useLicense from "@/ee/hooks/use-license.tsx";
-import { ResponsiveSettingsRow, ResponsiveSettingsContent, ResponsiveSettingsControl } from "@/components/ui/responsive-settings-row";

 export function MfaSettings() {
  const { t } = useTranslation();
@@ -54,8 +53,8 @@ export function MfaSettings() {

  return (
    <>
-      <ResponsiveSettingsRow>
-        <ResponsiveSettingsContent>
+      <Group justify="space-between" wrap="nowrap" gap="xl">
+        <div style={{ minWidth: 0, flex: 1 }}>
          <Text size="md">{t("2-step verification")}</Text>
          <Text size="sm" c="dimmed">
            {!isMfaEnabled
@@ -64,46 +63,44 @@ export function MfaSettings() {
                )
              : t("Two-factor authentication is active on your account.")}
          </Text>
-        </ResponsiveSettingsContent>
+        </div>

-        <ResponsiveSettingsControl>
-          {!isMfaEnabled ? (
-            <Tooltip
-              label={t("Available in enterprise edition")}
-              disabled={canUseMfa}
+        {!isMfaEnabled ? (
+          <Tooltip
+            label={t("Available in enterprise edition")}
+            disabled={canUseMfa}
+          >
+            <Button
+              disabled={!canUseMfa}
+              variant="default"
+              onClick={() => setSetupModalOpen(true)}
+              style={{ whiteSpace: "nowrap" }}
            >
-              <Button
-                disabled={!canUseMfa}
-                variant="default"
-                onClick={() => setSetupModalOpen(true)}
-                style={{ whiteSpace: "nowrap" }}
-              >
-                {t("Add 2FA method")}
-              </Button>
-            </Tooltip>
-          ) : (
-            <Group gap="sm" wrap="nowrap">
-              <Button
-                variant="default"
-                size="sm"
-                onClick={() => setBackupCodesModalOpen(true)}
-                style={{ whiteSpace: "nowrap" }}
-              >
-                {t("Backup codes")} ({mfaStatus?.backupCodesCount || 0})
-              </Button>
-              <Button
-                variant="default"
-                size="sm"
-                color="red"
-                onClick={() => setDisableModalOpen(true)}
-                style={{ whiteSpace: "nowrap" }}
-              >
-                {t("Disable")}
-              </Button>
-            </Group>
-          )}
-        </ResponsiveSettingsControl>
-      </ResponsiveSettingsRow>
+              {t("Add 2FA method")}
+            </Button>
+          </Tooltip>
+        ) : (
+          <Group gap="sm" wrap="nowrap">
+            <Button
+              variant="default"
+              size="sm"
+              onClick={() => setBackupCodesModalOpen(true)}
+              style={{ whiteSpace: "nowrap" }}
+            >
+              {t("Backup codes")} ({mfaStatus?.backupCodesCount || 0})
+            </Button>
+            <Button
+              variant="default"
+              size="sm"
+              color="red"
+              onClick={() => setDisableModalOpen(true)}
+              style={{ whiteSpace: "nowrap" }}
+            >
+              {t("Disable")}
+            </Button>
+          </Group>
+        )}
+      </Group>

      <MfaSetupModal
        opened={setupModalOpen}
@@ -235,7 +235,6 @@ export function MfaSetupModal({
                      length={6}
                      type="number"
                      autoFocus
-                      data-autofocus
                      oneTimeCode
                      {...form.getInputProps("verificationCode")}
                      styles={{
@@ -37,7 +37,7 @@ export async function disableMfa(
 }

 export async function regenerateBackupCodes(data: {
-  confirmPassword?: string;
+  confirmPassword: string;
 }): Promise<MfaBackupCodesResponse> {
  const req = await api.post<MfaBackupCodesResponse>(
    "/mfa/generate-backup-codes",
@@ -46,7 +46,7 @@ export interface MfaEnableResponse {
 }

 export interface MfaDisableRequest {
-  confirmPassword?: string;
+  confirmPassword: string;
 }

 export interface MfaBackupCodesResponse {
@@ -1,7 +1,6 @@
 import { useAtom } from "jotai";
 import * as z from "zod";
-import { useForm } from "@mantine/form";
-import { zodResolver } from "mantine-form-zod-resolver";
+import { useForm, zodResolver } from "@mantine/form";
 import { workspaceAtom } from "@/features/user/atoms/current-user-atom.ts";
 import React, { useState } from "react";
 import { Button, Text, TagsInput } from "@mantine/core";
@@ -55,11 +54,9 @@ export default function AllowedDomains() {
  return (
    <>
      <div>
-        <Text size="md">{t("Allowed email domains")}</Text>
+        <Text size="md">Allowed email domains</Text>
        <Text size="sm" c="dimmed">
-          {t(
-            "Only users with email addresses from these domains can signup via SSO.",
-          )}
+          Only users with email addresses from these domains can signup via SSO.
        </Text>
      </div>
      <form onSubmit={form.onSubmit(handleSubmit)}>
@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { useDisclosure } from "@mantine/hooks";
 import { Button, Menu, Group } from "@mantine/core";
-import { IconChevronDown, IconLock, IconServer } from "@tabler/icons-react";
+import { IconChevronDown, IconLock } from "@tabler/icons-react";
 import { useCreateSsoProviderMutation } from "@/ee/security/queries/security-query.ts";
 import { SSO_PROVIDER } from "@/ee/security/contants.ts";
 import { IAuthProvider } from "@/ee/security/types/security.types.ts";
@@ -40,19 +40,6 @@ export default function CreateSsoProvider() {
    }
  };

-  const handleCreateLDAP = async () => {
-    try {
-      const newProvider = await createSsoProviderMutation.mutateAsync({
-        type: SSO_PROVIDER.LDAP,
-        name: "LDAP",
-      });
-      setProvider(newProvider);
-      open();
-    } catch (error) {
-      console.error("Failed to create LDAP provider", error);
-    }
-  };
-
  return (
    <>
      <SsoProviderModal opened={opened} onClose={close} provider={provider} />
@@ -84,13 +71,6 @@ export default function CreateSsoProvider() {
            >
              OpenID (OIDC)
            </Menu.Item>
-
-            <Menu.Item
-              onClick={handleCreateLDAP}
-              leftSection={<IconServer size={16} />}
-            >
-              LDAP / Active Directory
-            </Menu.Item>
          </Menu.Dropdown>
        </Menu>
      </Group>
@@ -1,7 +1,6 @@
 import React from "react";
 import { z } from "zod";
-import { useForm } from "@mantine/form";
-import { zodResolver } from "mantine-form-zod-resolver";
+import { useForm, zodResolver } from "@mantine/form";
 import { Box, Button, Group, Stack, Switch, TextInput } from "@mantine/core";
 import classes from "@/ee/security/components/sso.module.css";
 import { IAuthProvider } from "@/ee/security/types/security.types.ts";
@@ -1,228 +0,0 @@
-import React from "react";
-import { z } from "zod";
-import { useForm } from "@mantine/form";
-import { zodResolver } from "mantine-form-zod-resolver";
-import {
-  Box,
-  Button,
-  Group,
-  Stack,
-  Switch,
-  TextInput,
-  Textarea,
-  Text,
-  Accordion,
-} from "@mantine/core";
-import classes from "@/ee/security/components/sso.module.css";
-import { IAuthProvider } from "@/ee/security/types/security.types.ts";
-import { useTranslation } from "react-i18next";
-import { useUpdateSsoProviderMutation } from "@/ee/security/queries/security-query.ts";
-import { IconInfoCircle } from "@tabler/icons-react";
-
-const ssoSchema = z.object({
-  name: z.string().min(1, "Display name is required"),
-  ldapUrl: z.string().url().startsWith("ldap", "Must be an LDAP URL"),
-  ldapBindDn: z.string().min(1, "Bind DN is required"),
-  ldapBindPassword: z.string().min(1, "Bind password is required"),
-  ldapBaseDn: z.string().min(1, "Base DN is required"),
-  ldapUserSearchFilter: z.string().optional(),
-  ldapTlsEnabled: z.boolean(),
-  ldapTlsCaCert: z.string().optional(),
-  isEnabled: z.boolean(),
-  allowSignup: z.boolean(),
-  groupSync: z.boolean(),
-});
-
-type SSOFormValues = z.infer<typeof ssoSchema>;
-
-interface SsoFormProps {
-  provider: IAuthProvider;
-  onClose?: () => void;
-}
-
-export function SsoLDAPForm({ provider, onClose }: SsoFormProps) {
-  const { t } = useTranslation();
-  const updateSsoProviderMutation = useUpdateSsoProviderMutation();
-
-  const form = useForm<SSOFormValues>({
-    initialValues: {
-      name: provider.name || "",
-      ldapUrl: provider.ldapUrl || "",
-      ldapBindDn: provider.ldapBindDn || "",
-      ldapBindPassword: provider.ldapBindPassword || "",
-      ldapBaseDn: provider.ldapBaseDn || "",
-      ldapUserSearchFilter:
-        provider.ldapUserSearchFilter || "(mail={{username}})",
-      ldapTlsEnabled: provider.ldapTlsEnabled || false,
-      ldapTlsCaCert: provider.ldapTlsCaCert || "",
-      isEnabled: provider.isEnabled,
-      allowSignup: provider.allowSignup,
-      groupSync: provider.groupSync || false,
-    },
-    validate: zodResolver(ssoSchema),
-  });
-
-  const handleSubmit = async (values: SSOFormValues) => {
-    const ssoData: Partial<IAuthProvider> = {
-      providerId: provider.id,
-    };
-    if (form.isDirty("name")) {
-      ssoData.name = values.name;
-    }
-    if (form.isDirty("ldapUrl")) {
-      ssoData.ldapUrl = values.ldapUrl;
-    }
-    if (form.isDirty("ldapBindDn")) {
-      ssoData.ldapBindDn = values.ldapBindDn;
-    }
-    if (form.isDirty("ldapBindPassword")) {
-      ssoData.ldapBindPassword = values.ldapBindPassword;
-    }
-    if (form.isDirty("ldapBaseDn")) {
-      ssoData.ldapBaseDn = values.ldapBaseDn;
-    }
-    if (form.isDirty("ldapUserSearchFilter")) {
-      ssoData.ldapUserSearchFilter = values.ldapUserSearchFilter;
-    }
-    if (form.isDirty("ldapTlsEnabled")) {
-      ssoData.ldapTlsEnabled = values.ldapTlsEnabled;
-    }
-    if (form.isDirty("ldapTlsCaCert")) {
-      ssoData.ldapTlsCaCert = values.ldapTlsCaCert;
-    }
-    if (form.isDirty("isEnabled")) {
-      ssoData.isEnabled = values.isEnabled;
-    }
-    if (form.isDirty("allowSignup")) {
-      ssoData.allowSignup = values.allowSignup;
-    }
-    if (form.isDirty("groupSync")) {
-      ssoData.groupSync = values.groupSync;
-    }
-
-    await updateSsoProviderMutation.mutateAsync(ssoData);
-    form.resetDirty();
-    onClose();
-  };
-
-  return (
-    <Box maw={600} mx="auto">
-      <form onSubmit={form.onSubmit(handleSubmit)}>
-        <Stack>
-          <TextInput
-            label={t("Display name")}
-            placeholder="e.g Company LDAP"
-            data-autofocus
-            {...form.getInputProps("name")}
-          />
-
-          <TextInput
-            label="LDAP Server URL"
-            description="URL of your LDAP server"
-            placeholder="ldap://ldap.example.com:389 or ldaps://ldap.example.com:636"
-            {...form.getInputProps("ldapUrl")}
-          />
-
-          <TextInput
-            label="Bind DN"
-            description="Distinguished Name of the service account for searching"
-            placeholder="cn=admin,dc=example,dc=com"
-            {...form.getInputProps("ldapBindDn")}
-          />
-
-          <TextInput
-            label="Bind Password"
-            description="Password for the service account"
-            type="password"
-            placeholder="••••••••"
-            {...form.getInputProps("ldapBindPassword")}
-          />
-
-          <TextInput
-            label="Base DN"
-            description="Base DN where user searches will start"
-            placeholder="ou=users,dc=example,dc=com"
-            {...form.getInputProps("ldapBaseDn")}
-          />
-
-          <TextInput
-            label="User Search Filter"
-            description="LDAP filter to find users. Use {{username}} as placeholder"
-            placeholder="(mail={{username}})"
-            {...form.getInputProps("ldapUserSearchFilter")}
-          />
-
-          <Accordion variant="separated">
-            <Accordion.Item value="advanced">
-              <Accordion.Control icon={<IconInfoCircle size={20} />}>
-                {t("Advanced Settings")}
-              </Accordion.Control>
-              <Accordion.Panel>
-                <Stack>
-                  <Group justify="space-between">
-                    <div>
-                      <Text size="sm">{t("Enable TLS/SSL")}</Text>
-                      <Text size="xs" c="dimmed">
-                        Use secure connection to LDAP server
-                      </Text>
-                    </div>
-                    <Switch
-                      className={classes.switch}
-                      checked={form.values.ldapTlsEnabled}
-                      {...form.getInputProps("ldapTlsEnabled")}
-                    />
-                  </Group>
-
-                  {form.values.ldapTlsEnabled && (
-                    <Textarea
-                      label="CA Certificate"
-                      description="PEM-encoded CA certificate for TLS verification (optional)"
-                      placeholder="-----BEGIN CERTIFICATE-----
-...
-----END CERTIFICATE-----"
-                      minRows={4}
-                      {...form.getInputProps("ldapTlsCaCert")}
-                    />
-                  )}
-                </Stack>
-              </Accordion.Panel>
-            </Accordion.Item>
-          </Accordion>
-
-          <Group justify="space-between">
-            <div>{t("Group sync")}</div>
-            <Switch
-              className={classes.switch}
-              checked={form.values.groupSync}
-              {...form.getInputProps("groupSync")}
-            />
-          </Group>
-
-          <Group justify="space-between">
-            <div>{t("Allow signup")}</div>
-            <Switch
-              className={classes.switch}
-              checked={form.values.allowSignup}
-              {...form.getInputProps("allowSignup")}
-            />
-          </Group>
-
-          <Group justify="space-between">
-            <div>{t("Enabled")}</div>
-            <Switch
-              className={classes.switch}
-              checked={form.values.isEnabled}
-              {...form.getInputProps("isEnabled")}
-            />
-          </Group>
-
-          <Group mt="md" justify="flex-end">
-            <Button type="submit" disabled={!form.isDirty()}>
-              {t("Save")}
-            </Button>
-          </Group>
-        </Stack>
-      </form>
-    </Box>
-  );
-}
@@ -16,7 +16,6 @@ const ssoSchema = z.object({
  oidcClientSecret: z.string().min(1, "Client secret is required"),
  isEnabled: z.boolean(),
  allowSignup: z.boolean(),
-  groupSync: z.boolean(),
 });

 type SSOFormValues = z.infer<typeof ssoSchema>;
@@ -37,7 +36,6 @@ export function SsoOIDCForm({ provider, onClose }: SsoFormProps) {
      oidcClientSecret: provider.oidcClientSecret || "",
      isEnabled: provider.isEnabled,
      allowSignup: provider.allowSignup,
-      groupSync: provider.groupSync || false,
    },
    validate: zodResolver(ssoSchema),
  });
@@ -69,9 +67,6 @@ export function SsoOIDCForm({ provider, onClose }: SsoFormProps) {
    if (form.isDirty("allowSignup")) {
      ssoData.allowSignup = values.allowSignup;
    }
-    if (form.isDirty("groupSync")) {
-      ssoData.groupSync = values.groupSync;
-    }

    await updateSsoProviderMutation.mutateAsync(ssoData);
    form.resetDirty();
@@ -83,7 +78,7 @@ export function SsoOIDCForm({ provider, onClose }: SsoFormProps) {
      <form onSubmit={form.onSubmit(handleSubmit)}>
        <Stack>
          <TextInput
-            label={t("Display name")}
+            label="Display name"
            placeholder="e.g Google SSO"
            data-autofocus
            {...form.getInputProps("name")}
@@ -115,15 +110,6 @@ export function SsoOIDCForm({ provider, onClose }: SsoFormProps) {
            {...form.getInputProps("oidcClientSecret")}
          />

-          <Group justify="space-between">
-            <div>{t("Group sync")}</div>
-            <Switch
-              className={classes.switch}
-              checked={form.values.groupSync}
-              {...form.getInputProps("groupSync")}
-            />
-          </Group>
-
          <Group justify="space-between">
            <div>{t("Allow signup")}</div>
            <Switch
@@ -69,7 +69,7 @@ export default function SsoProviderList() {
  return (
    <>
      <Card shadow="sm" radius="sm">
-        <Table.ScrollContainer minWidth={600}>
+        <Table.ScrollContainer minWidth={500}>
          <Table verticalSpacing="sm">
            <Table.Thead>
              <Table.Tr>
@@ -104,7 +104,7 @@ export default function SsoProviderList() {
                      </Group>
                    </Table.Td>
                    <Table.Td>
-                      <Badge color={"gray"} variant="light" style={{ whiteSpace: "nowrap" }}>
+                      <Badge color={"gray"} variant="light">
                        {provider.type.toUpperCase()}
                      </Badge>
                    </Table.Td>
@@ -133,7 +133,6 @@ export default function SsoProviderList() {
                      )}
                    </Table.Td>
                    <Table.Td>
-                      <Group gap="xs" wrap="nowrap">
                      <ActionIcon
                        variant="subtle"
                        color="gray"
@@ -169,7 +168,6 @@ export default function SsoProviderList() {
                          </Menu.Item>
                        </Menu.Dropdown>
                      </Menu>
-                      </Group>
                    </Table.Td>
                  </Table.Tr>
                ))}
@@ -5,8 +5,6 @@ import { SsoSamlForm } from "@/ee/security/components/sso-saml-form.tsx";
 import { SSO_PROVIDER } from "@/ee/security/contants.ts";
 import { SsoOIDCForm } from "@/ee/security/components/sso-oidc-form.tsx";
 import { SsoGoogleForm } from "@/ee/security/components/sso-google-form.tsx";
-import { SsoLDAPForm } from "@/ee/security/components/sso-ldap-form.tsx";
-import { useTranslation } from "react-i18next";

 interface SsoModalProps {
  opened: boolean;
@@ -19,8 +17,6 @@ export default function SsoProviderModal({
  onClose,
  provider,
 }: SsoModalProps) {
-  const { t } = useTranslation();
-
  if (!provider) {
    return null;
  }
@@ -28,9 +24,7 @@ export default function SsoProviderModal({
  return (
    <Modal
      opened={opened}
-      title={t("{{ssoProviderType}} configuration", {
-        ssoProviderType: provider.type.toUpperCase(),
-      })}
+      title={`${provider.type.toUpperCase()} Configuration`}
      onClose={onClose}
    >
      {provider.type === SSO_PROVIDER.SAML && (
@@ -44,10 +38,6 @@ export default function SsoProviderModal({
      {provider.type === SSO_PROVIDER.GOOGLE && (
        <SsoGoogleForm provider={provider} onClose={onClose} />
      )}
-
-      {provider.type === SSO_PROVIDER.LDAP && (
-        <SsoLDAPForm provider={provider} onClose={onClose} />
-      )}
    </Modal>
  );
 }
@@ -1,7 +1,6 @@
 import React from "react";
 import { z } from "zod";
-import { useForm } from "@mantine/form";
-import { zodResolver } from "mantine-form-zod-resolver";
+import { useForm, zodResolver } from "@mantine/form";
 import {
  Box,
  Button,
@@ -27,7 +26,6 @@ const ssoSchema = z.object({
  samlCertificate: z.string().min(1, "SAML Idp Certificate is required"),
  isEnabled: z.boolean(),
  allowSignup: z.boolean(),
-  groupSync: z.boolean(),
 });

 type SSOFormValues = z.infer<typeof ssoSchema>;
@@ -47,7 +45,6 @@ export function SsoSamlForm({ provider, onClose }: SsoFormProps) {
      samlCertificate: provider.samlCertificate || "",
      isEnabled: provider.isEnabled,
      allowSignup: provider.allowSignup,
-      groupSync: provider.groupSync || false,
    },
    validate: zodResolver(ssoSchema),
  });
@@ -78,9 +75,6 @@ export function SsoSamlForm({ provider, onClose }: SsoFormProps) {
    if (form.isDirty("allowSignup")) {
      ssoData.allowSignup = values.allowSignup;
    }
-    if (form.isDirty("groupSync")) {
-      ssoData.groupSync = values.groupSync;
-    }

    await updateSsoProviderMutation.mutateAsync(ssoData);
    form.resetDirty();
@@ -92,7 +86,7 @@ export function SsoSamlForm({ provider, onClose }: SsoFormProps) {
      <form onSubmit={form.onSubmit(handleSubmit)}>
        <Stack>
          <TextInput
-            label={t("Display name")}
+            label="Display name"
            placeholder="e.g Azure Entra"
            data-autofocus
            {...form.getInputProps("name")}
@@ -129,15 +123,6 @@ export function SsoSamlForm({ provider, onClose }: SsoFormProps) {
            {...form.getInputProps("samlCertificate")}
          />

-          <Group justify="space-between">
-            <div>{t("Group sync")}</div>
-            <Switch
-              className={classes.switch}
-              checked={form.values.groupSync}
-              {...form.getInputProps("groupSync")}
-            />
-          </Group>
-
          <Group justify="space-between">
            <div>{t("Allow signup")}</div>
            <Switch
@@ -2,5 +2,4 @@ export enum SSO_PROVIDER {
  OIDC = 'oidc',
  SAML = 'saml',
  GOOGLE = 'google',
-  LDAP = 'ldap',
 }
@@ -1,23 +0,0 @@
-import api from "@/lib/api-client.ts";
-import { ILoginResponse } from "@/features/auth/types/auth.types.ts";
-
-interface ILdapLogin {
-  username: string;
-  password: string;
-  providerId: string;
-  workspaceId: string;
-}
-
-export async function ldapLogin(data: ILdapLogin): Promise<ILoginResponse> {
-  const requestData = {
-    username: data.username,
-    password: data.password,
-  };
-
-  const response = await api.post<ILoginResponse>(
-    `/sso/ldap/${data.providerId}/login`,
-    requestData
-  );
-
-  return response.data;
-}
@@ -9,17 +9,8 @@ export interface IAuthProvider {
  oidcIssuer: string;
  oidcClientId: string;
  oidcClientSecret: string;
-  ldapUrl: string;
-  ldapBindDn: string;
-  ldapBindPassword: string;
-  ldapBaseDn: string;
-  ldapUserSearchFilter: string;
-  ldapUserAttributes: any;
-  ldapTlsEnabled: boolean;
-  ldapTlsCaCert: string;
  allowSignup: boolean;
  isEnabled: boolean;
-  groupSync: boolean;
  creatorId: string;
  workspaceId: string;
  createdAt: Date;
@@ -1,64 +0,0 @@
-import api from "@/lib/api-client";
-import {
-  AvatarIconType,
-  IAttachment,
-} from "@/features/attachments/types/attachment.types.ts";
-
-export async function uploadIcon(
-  file: File,
-  type: AvatarIconType,
-  spaceId?: string,
-): Promise<IAttachment> {
-  const formData = new FormData();
-  formData.append("type", type);
-  if (spaceId) {
-    formData.append("spaceId", spaceId);
-  }
-  formData.append("image", file);
-
-  return await api.post("/attachments/upload-image", formData, {
-    headers: {
-      "Content-Type": "multipart/form-data",
-    },
-  });
-}
-
-export async function uploadUserAvatar(file: File): Promise<IAttachment> {
-  return uploadIcon(file, AvatarIconType.AVATAR);
-}
-
-export async function uploadSpaceIcon(
-  file: File,
-  spaceId: string,
-): Promise<IAttachment> {
-  return uploadIcon(file, AvatarIconType.SPACE_ICON, spaceId);
-}
-
-export async function uploadWorkspaceIcon(file: File): Promise<IAttachment> {
-  return uploadIcon(file, AvatarIconType.WORKSPACE_ICON);
-}
-
-async function removeIcon(
-  type: AvatarIconType,
-  spaceId?: string,
-): Promise<void> {
-  const payload: { spaceId?: string; type: string } = { type };
-
-  if (spaceId) {
-    payload.spaceId = spaceId;
-  }
-
-  await api.post("/attachments/remove-icon", payload);
-}
-
-export async function removeAvatar(): Promise<void> {
-  await removeIcon(AvatarIconType.AVATAR);
-}
-
-export async function removeSpaceIcon(spaceId: string): Promise<void> {
-  await removeIcon(AvatarIconType.SPACE_ICON, spaceId);
-}
-
-export async function removeWorkspaceIcon(): Promise<void> {
-  await removeIcon(AvatarIconType.WORKSPACE_ICON);
-}
@@ -1,9 +0,0 @@
-export {
-  uploadIcon,
-  uploadUserAvatar,
-  uploadSpaceIcon,
-  uploadWorkspaceIcon,
-  removeAvatar,
-  removeSpaceIcon,
-  removeWorkspaceIcon,
-} from "./attachment-service.ts";
@@ -1,29 +0,0 @@
-export interface IAttachment {
-  id: string;
-  fileName: string;
-  filePath: string;
-  fileSize: number;
-  fileExt: string;
-  mimeType: string;
-  type: string;
-  creatorId: string;
-  pageId: string | null;
-  spaceId: string | null;
-  workspaceId: string;
-  createdAt: string;
-  updatedAt: string;
-  deletedAt: string | null;
-}
-
-export enum AvatarIconType {
-  AVATAR = "avatar",
-  SPACE_ICON = "space-icon",
-  WORKSPACE_ICON = "workspace-icon",
-}
-
-export enum AttachmentType {
-  AVATAR = "avatar",
-  WORKSPACE_ICON = "workspace-icon",
-  SPACE_ICON = "space-icon",
-  FILE = "file",
-}
@@ -3,7 +3,6 @@ import {
  BubbleMenuProps,
  isNodeSelection,
  useEditor,
-  useEditorState,
 } from "@tiptap/react";
 import { FC, useEffect, useRef, useState } from "react";
 import {
@@ -51,52 +50,34 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
    showCommentPopupRef.current = showCommentPopup;
  }, [showCommentPopup]);

-  const editorState = useEditorState({
-    editor: props.editor,
-    selector: (ctx) => {
-      if (!props.editor) {
-        return null;
-      }
-
-      return {
-        isBold: ctx.editor.isActive("bold"),
-        isItalic: ctx.editor.isActive("italic"),
-        isUnderline: ctx.editor.isActive("underline"),
-        isStrike: ctx.editor.isActive("strike"),
-        isCode: ctx.editor.isActive("code"),
-        isComment: ctx.editor.isActive("comment"),
-      };
-    },
-  });
-
  const items: BubbleMenuItem[] = [
    {
      name: "Bold",
-      isActive: () => editorState?.isBold,
+      isActive: () => props.editor.isActive("bold"),
      command: () => props.editor.chain().focus().toggleBold().run(),
      icon: IconBold,
    },
    {
      name: "Italic",
-      isActive: () => editorState?.isItalic,
+      isActive: () => props.editor.isActive("italic"),
      command: () => props.editor.chain().focus().toggleItalic().run(),
      icon: IconItalic,
    },
    {
      name: "Underline",
-      isActive: () => editorState?.isUnderline,
+      isActive: () => props.editor.isActive("underline"),
      command: () => props.editor.chain().focus().toggleUnderline().run(),
      icon: IconUnderline,
    },
    {
      name: "Strike",
-      isActive: () => editorState?.isStrike,
+      isActive: () => props.editor.isActive("strike"),
      command: () => props.editor.chain().focus().toggleStrike().run(),
      icon: IconStrikethrough,
    },
    {
      name: "Code",
-      isActive: () => editorState?.isCode,
+      isActive: () => props.editor.isActive("code"),
      command: () => props.editor.chain().focus().toggleCode().run(),
      icon: IconCode,
    },
@@ -104,7 +85,7 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {

  const commentItem: BubbleMenuItem = {
    name: "Comment",
-    isActive: () => editorState?.isComment,
+    isActive: () => props.editor.isActive("comment"),
    command: () => {
      const commentId = uuid7();

@@ -9,8 +9,7 @@ import {
  Text,
  Tooltip,
 } from "@mantine/core";
-import type { Editor } from "@tiptap/react";
-import { useEditorState } from "@tiptap/react";
+import { useEditor } from "@tiptap/react";
 import { useTranslation } from "react-i18next";

 export interface BubbleColorMenuItem {
@@ -19,7 +18,7 @@ export interface BubbleColorMenuItem {
 }

 interface ColorSelectorProps {
-  editor: Editor | null;
+  editor: ReturnType<typeof useEditor>;
  isOpen: boolean;
  setIsOpen: Dispatch<SetStateAction<boolean>>;
 }
@@ -109,36 +108,12 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
  setIsOpen,
 }) => {
  const { t } = useTranslation();
-
-  const editorState = useEditorState({
-    editor,
-    selector: ctx => {
-      if (!ctx.editor) {
-        return null;
-      }
-
-      const activeColors: Record<string, boolean> = {};
-      TEXT_COLORS.forEach(({ color }) => {
-        activeColors[`text_${color}`] = ctx.editor.isActive("textStyle", { color });
-      });
-      HIGHLIGHT_COLORS.forEach(({ color }) => {
-        activeColors[`highlight_${color}`] = ctx.editor.isActive("highlight", { color });
-      });
-
-      return activeColors;
-    },
-  });
-
-  if (!editor || !editorState) {
-    return null;
-  }
-
  const activeColorItem = TEXT_COLORS.find(({ color }) =>
-    editorState[`text_${color}`]
+    editor.isActive("textStyle", { color }),
  );

  const activeHighlightItem = HIGHLIGHT_COLORS.find(({ color }) =>
-    editorState[`highlight_${color}`]
+    editor.isActive("highlight", { color }),
  );

  return (
@@ -176,7 +151,7 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
                justify="left"
                fullWidth
                rightSection={
-                  editorState[`text_${color}`] && (
+                  editor.isActive("textStyle", { color }) && (
                    <IconCheck style={{ width: rem(16) }} />
                  )
                }
@@ -13,12 +13,11 @@ import {
  IconTypography,
 } from "@tabler/icons-react";
 import { Popover, Button, ScrollArea } from "@mantine/core";
-import type { Editor } from "@tiptap/react";
-import { useEditorState } from "@tiptap/react";
+import { useEditor } from "@tiptap/react";
 import { useTranslation } from "react-i18next";

 interface NodeSelectorProps {
-  editor: Editor | null;
+  editor: ReturnType<typeof useEditor>;
  isOpen: boolean;
  setIsOpen: Dispatch<SetStateAction<boolean>>;
 }
@@ -37,27 +36,6 @@ export const NodeSelector: FC<NodeSelectorProps> = ({
 }) => {
  const { t } = useTranslation();

-  const editorState = useEditorState({
-    editor,
-    selector: (ctx) => {
-      if (!editor) {
-        return null;
-      }
-
-      return {
-        isParagraph: ctx.editor.isActive("paragraph"),
-        isBulletList: ctx.editor.isActive("bulletList"),
-        isOrderedList: ctx.editor.isActive("orderedList"),
-        isHeading1: ctx.editor.isActive("heading", { level: 1 }),
-        isHeading2: ctx.editor.isActive("heading", { level: 2 }),
-        isHeading3: ctx.editor.isActive("heading", { level: 3 }),
-        isTaskItem: ctx.editor.isActive("taskItem"),
-        isBlockquote: ctx.editor.isActive("blockquote"),
-        isCodeBlock: ctx.editor.isActive("codeBlock"),
-      };
-    },
-  });
-
  const items: BubbleMenuItem[] = [
    {
      name: "Text",
@@ -65,45 +43,45 @@ export const NodeSelector: FC<NodeSelectorProps> = ({
      command: () =>
        editor.chain().focus().toggleNode("paragraph", "paragraph").run(),
      isActive: () =>
-        editorState?.isParagraph &&
-        !editorState?.isBulletList &&
-        !editorState?.isOrderedList,
+        editor.isActive("paragraph") &&
+        !editor.isActive("bulletList") &&
+        !editor.isActive("orderedList"),
    },
    {
      name: "Heading 1",
      icon: IconH1,
      command: () => editor.chain().focus().toggleHeading({ level: 1 }).run(),
-      isActive: () => editorState?.isHeading1,
+      isActive: () => editor.isActive("heading", { level: 1 }),
    },
    {
      name: "Heading 2",
      icon: IconH2,
      command: () => editor.chain().focus().toggleHeading({ level: 2 }).run(),
-      isActive: () => editorState?.isHeading2,
+      isActive: () => editor.isActive("heading", { level: 2 }),
    },
    {
      name: "Heading 3",
      icon: IconH3,
      command: () => editor.chain().focus().toggleHeading({ level: 3 }).run(),
-      isActive: () => editorState?.isHeading3,
+      isActive: () => editor.isActive("heading", { level: 3 }),
    },
    {
      name: "To-do List",
      icon: IconCheckbox,
      command: () => editor.chain().focus().toggleTaskList().run(),
-      isActive: () => editorState?.isTaskItem,
+      isActive: () => editor.isActive("taskItem"),
    },
    {
      name: "Bullet List",
      icon: IconList,
      command: () => editor.chain().focus().toggleBulletList().run(),
-      isActive: () => editorState?.isBulletList,
+      isActive: () => editor.isActive("bulletList"),
    },
    {
      name: "Numbered List",
      icon: IconListNumbers,
      command: () => editor.chain().focus().toggleOrderedList().run(),
-      isActive: () => editorState?.isOrderedList,
+      isActive: () => editor.isActive("orderedList"),
    },
    {
      name: "Blockquote",
@@ -115,13 +93,13 @@ export const NodeSelector: FC<NodeSelectorProps> = ({
          .toggleNode("paragraph", "paragraph")
          .toggleBlockquote()
          .run(),
-      isActive: () => editorState?.isBlockquote,
+      isActive: () => editor.isActive("blockquote"),
    },
    {
      name: "Code",
      icon: IconCode,
      command: () => editor.chain().focus().toggleCodeBlock().run(),
-      isActive: () => editorState?.isCodeBlock,
+      isActive: () => editor.isActive("codeBlock"),
    },
  ];

@@ -8,12 +8,11 @@ import {
  IconChevronDown,
 } from "@tabler/icons-react";
 import { Popover, Button, ScrollArea, rem } from "@mantine/core";
-import type { Editor } from "@tiptap/react";
-import { useEditorState } from "@tiptap/react";
+import { useEditor } from "@tiptap/react";
 import { useTranslation } from "react-i18next";

 interface TextAlignmentProps {
-  editor: Editor | null;
+  editor: ReturnType<typeof useEditor>;
  isOpen: boolean;
  setIsOpen: Dispatch<SetStateAction<boolean>>;
 }
@@ -32,54 +31,36 @@ export const TextAlignmentSelector: FC<TextAlignmentProps> = ({
 }) => {
  const { t } = useTranslation();

-  const editorState = useEditorState({
-    editor,
-    selector: (ctx) => {
-      if (!ctx.editor) {
-        return null;
-      }
-
-      return {
-        isAlignLeft: ctx.editor.isActive({ textAlign: "left" }),
-        isAlignCenter: ctx.editor.isActive({ textAlign: "center" }),
-        isAlignRight: ctx.editor.isActive({ textAlign: "right" }),
-        isAlignJustify: ctx.editor.isActive({ textAlign: "justify" }),
-      };
-    },
-  });
-
-  if (!editor || !editorState) {
-    return null;
-  }
-
  const items: BubbleMenuItem[] = [
    {
      name: "Align left",
-      isActive: () => editorState?.isAlignLeft,
+      isActive: () => editor.isActive({ textAlign: "left" }),
      command: () => editor.chain().focus().setTextAlign("left").run(),
      icon: IconAlignLeft,
    },
    {
      name: "Align center",
-      isActive: () => editorState?.isAlignCenter,
+      isActive: () => editor.isActive({ textAlign: "center" }),
      command: () => editor.chain().focus().setTextAlign("center").run(),
      icon: IconAlignCenter,
    },
    {
      name: "Align right",
-      isActive: () => editorState?.isAlignRight,
+      isActive: () => editor.isActive({ textAlign: "right" }),
      command: () => editor.chain().focus().setTextAlign("right").run(),
      icon: IconAlignRight,
    },
    {
      name: "Justify",
-      isActive: () => editorState?.isAlignJustify,
+      isActive: () => editor.isActive({ textAlign: "justify" }),
      command: () => editor.chain().focus().setTextAlign("justify").run(),
      icon: IconAlignJustified,
    },
  ];

-  const activeItem = items.filter((item) => item.isActive()).pop() ?? items[0];
+  const activeItem = items.filter((item) => item.isActive()).pop() ?? {
+    name: "Multiple",
+  };

  return (
    <Popover opened={isOpen} withArrow>
@@ -92,7 +73,7 @@ export const TextAlignmentSelector: FC<TextAlignmentProps> = ({
          rightSection={<IconChevronDown size={16} />}
          onClick={() => setIsOpen(!isOpen)}
        >
-          <activeItem.icon style={{ width: rem(16) }} stroke={2} />
+          <IconAlignLeft style={{ width: rem(16) }} stroke={2} />
        </Button>
      </Popover.Target>

@@ -2,7 +2,6 @@ import {
  BubbleMenu as BaseBubbleMenu,
  findParentNode,
  posToDOMRect,
-  useEditorState,
 } from "@tiptap/react";
 import React, { useCallback } from "react";
 import { Node as PMNode } from "prosemirror-model";
@@ -16,15 +15,12 @@ import {
  IconCircleCheckFilled,
  IconCircleXFilled,
  IconInfoCircleFilled,
-  IconMoodSmile,
 } from "@tabler/icons-react";
 import { CalloutType } from "@docmost/editor-ext";
 import { useTranslation } from "react-i18next";
-import EmojiPicker from "@/components/ui/emoji-picker.tsx";

 export function CalloutMenu({ editor }: EditorMenuProps) {
  const { t } = useTranslation();
-
  const shouldShow = useCallback(
    ({ state }: ShouldShowProps) => {
      if (!state) {
@@ -36,23 +32,6 @@ export function CalloutMenu({ editor }: EditorMenuProps) {
    [editor],
  );

-  const editorState = useEditorState({
-    editor,
-    selector: (ctx) => {
-      if (!ctx.editor) {
-        return null;
-      }
-
-      return {
-        isCallout: ctx.editor.isActive("callout"),
-        isInfo: ctx.editor.isActive("callout", { type: "info" }),
-        isSuccess: ctx.editor.isActive("callout", { type: "success" }),
-        isWarning: ctx.editor.isActive("callout", { type: "warning" }),
-        isDanger: ctx.editor.isActive("callout", { type: "danger" }),
-      };
-    },
-  });
-
  const getReferenceClientRect = useCallback(() => {
    const { selection } = editor.state;
    const predicate = (node: PMNode) => node.type.name === "callout";
@@ -77,40 +56,10 @@ export function CalloutMenu({ editor }: EditorMenuProps) {
    [editor],
  );

-  const setCalloutIcon = useCallback(
-    (emoji: any) => {
-      const emojiChar = emoji?.native || emoji?.emoji || emoji;
-      editor
-        .chain()
-        .focus(undefined, { scrollIntoView: false })
-        .updateCalloutIcon(emojiChar)
-        .run();
-    },
-    [editor],
-  );
-
-  const removeCalloutIcon = useCallback(() => {
-    editor
-      .chain()
-      .focus(undefined, { scrollIntoView: false })
-      .updateCalloutIcon("")
-      .run();
-  }, [editor]);
-
-  const getCurrentIcon = () => {
-    const { selection } = editor.state;
-    const predicate = (node: PMNode) => node.type.name === "callout";
-    const parent = findParentNode(predicate)(selection);
-    const icon = parent?.node.attrs.icon;
-    return icon || null;
-  };
-
-  const currentIcon = getCurrentIcon();
-
  return (
    <BaseBubbleMenu
      editor={editor}
-      pluginKey={`callout-menu`}
+      pluginKey={`callout-menu}`}
      updateDelay={0}
      tippyOptions={{
        getReferenceClientRect,
@@ -129,7 +78,9 @@ export function CalloutMenu({ editor }: EditorMenuProps) {
            onClick={() => setCalloutType("info")}
            size="lg"
            aria-label={t("Info")}
-            variant={editorState?.isInfo ? "light" : "default"}
+            variant={
+              editor.isActive("callout", { type: "info" }) ? "light" : "default"
+            }
          >
            <IconInfoCircleFilled size={18} />
          </ActionIcon>
@@ -140,7 +91,11 @@ export function CalloutMenu({ editor }: EditorMenuProps) {
            onClick={() => setCalloutType("success")}
            size="lg"
            aria-label={t("Success")}
-            variant={editorState?.isSuccess ? "light" : "default"}
+            variant={
+              editor.isActive("callout", { type: "success" })
+                ? "light"
+                : "default"
+            }
          >
            <IconCircleCheckFilled size={18} />
          </ActionIcon>
@@ -151,7 +106,11 @@ export function CalloutMenu({ editor }: EditorMenuProps) {
            onClick={() => setCalloutType("warning")}
            size="lg"
            aria-label={t("Warning")}
-            variant={editorState?.isWarning ? "light" : "default"}
+            variant={
+              editor.isActive("callout", { type: "warning" })
+                ? "light"
+                : "default"
+            }
          >
            <IconAlertTriangleFilled size={18} />
          </ActionIcon>
@@ -162,23 +121,15 @@ export function CalloutMenu({ editor }: EditorMenuProps) {
            onClick={() => setCalloutType("danger")}
            size="lg"
            aria-label={t("Danger")}
-            variant={editorState?.isDanger ? "light" : "default"}
+            variant={
+              editor.isActive("callout", { type: "danger" })
+                ? "light"
+                : "default"
+            }
          >
            <IconCircleXFilled size={18} />
          </ActionIcon>
        </Tooltip>
-
-        <EmojiPicker
-          onEmojiSelect={setCalloutIcon}
-          removeEmojiAction={removeCalloutIcon}
-          readOnly={false}
-          icon={currentIcon || <IconMoodSmile size={18} />}
-          actionIconProps={{
-            size: "lg",
-            variant: "default",
-            c: undefined,
-          }}
-        />
      </ActionIcon.Group>
    </BaseBubbleMenu>
  );
@@ -11,7 +11,7 @@ import { CalloutType } from "@docmost/editor-ext";

 export default function CalloutView(props: NodeViewProps) {
  const { node } = props;
-  const { type, icon } = node.attrs;
+  const { type } = node.attrs;

  return (
    <NodeViewWrapper>
@@ -19,7 +19,7 @@ export default function CalloutView(props: NodeViewProps) {
        variant="light"
        title=""
        color={getCalloutColor(type)}
-        icon={getCalloutIcon(type, icon)}
+        icon={getCalloutIcon(type)}
        p="xs"
        classNames={{
          message: classes.message,
@@ -32,11 +32,7 @@ export default function CalloutView(props: NodeViewProps) {
  );
 }

-function getCalloutIcon(type: CalloutType, customIcon?: string) {
-  if (customIcon && customIcon.trim() !== "") {
-    return <span style={{ fontSize: '18px' }}>{customIcon}</span>;
-  }
-
+function getCalloutIcon(type: CalloutType) {
  switch (type) {
    case "info":
      return <IconInfoCircleFilled />;
@@ -4,7 +4,11 @@ import mermaid from "mermaid";
 import { v4 as uuidv4 } from "uuid";
 import classes from "./code-block.module.css";
 import { useTranslation } from "react-i18next";
-import { useComputedColorScheme } from "@mantine/core";
+
+mermaid.initialize({
+  startOnLoad: false,
+  suppressErrorRendering: true,
+});

 interface MermaidViewProps {
  props: NodeViewProps;
@@ -12,22 +16,12 @@ interface MermaidViewProps {

 export default function MermaidView({ props }: MermaidViewProps) {
  const { t } = useTranslation();
-  const computedColorScheme = useComputedColorScheme();
  const { node } = props;
  const [preview, setPreview] = useState<string>("");

-  // Update Mermaid config when theme changes.
-  useEffect(() => {
-    mermaid.initialize({
-      startOnLoad: false,
-      suppressErrorRendering: true,
-      theme: computedColorScheme === "light" ? "default" : "dark",
-    });
-  }, [computedColorScheme]);
-
-  // Re-render the diagram whenever the node content or theme changes.
  useEffect(() => {
    const id = `mermaid-${uuidv4()}`;
+
    if (node.textContent.length > 0) {
      mermaid
        .render(id, node.textContent)
@@ -46,7 +40,7 @@ export default function MermaidView({ props }: MermaidViewProps) {
          }
        });
    }
-  }, [node.textContent, computedColorScheme]);
+  }, [node.textContent]);

  return (
    <div
@@ -2,16 +2,15 @@ import {
  BubbleMenu as BaseBubbleMenu,
  findParentNode,
  posToDOMRect,
-  useEditorState,
-} from "@tiptap/react";
-import { useCallback } from "react";
-import { sticky } from "tippy.js";
-import { Node as PMNode } from "prosemirror-model";
+} from '@tiptap/react';
+import { useCallback } from 'react';
+import { sticky } from 'tippy.js';
+import { Node as PMNode } from 'prosemirror-model';
 import {
  EditorMenuProps,
  ShouldShowProps,
-} from "@/features/editor/components/table/types/types.ts";
-import { NodeWidthResize } from "@/features/editor/components/common/node-width-resize.tsx";
+} from '@/features/editor/components/table/types/types.ts';
+import { NodeWidthResize } from '@/features/editor/components/common/node-width-resize.tsx';

 export function DrawioMenu({ editor }: EditorMenuProps) {
  const shouldShow = useCallback(
@@ -20,29 +19,14 @@ export function DrawioMenu({ editor }: EditorMenuProps) {
        return false;
      }

-      return editor.isActive("drawio") && editor.getAttributes("drawio")?.src;
+      return editor.isActive('drawio') && editor.getAttributes('drawio')?.src;
    },
-    [editor],
+    [editor]
  );

-  const editorState = useEditorState({
-    editor,
-    selector: (ctx) => {
-      if (!ctx.editor) {
-        return null;
-      }
-
-      const drawioAttr = ctx.editor.getAttributes("drawio");
-      return {
-        isDrawio: ctx.editor.isActive("drawio"),
-        width: drawioAttr?.width ? parseInt(drawioAttr.width) : null,
-      };
-    },
-  });
-
  const getReferenceClientRect = useCallback(() => {
    const { selection } = editor.state;
-    const predicate = (node: PMNode) => node.type.name === "drawio";
+    const predicate = (node: PMNode) => node.type.name === 'drawio';
    const parent = findParentNode(predicate)(selection);

    if (parent) {
@@ -55,37 +39,40 @@ export function DrawioMenu({ editor }: EditorMenuProps) {

  const onWidthChange = useCallback(
    (value: number) => {
-      editor.commands.updateAttributes("drawio", { width: `${value}%` });
+      editor.commands.updateAttributes('drawio', { width: `${value}%` });
    },
-    [editor],
+    [editor]
  );

  return (
    <BaseBubbleMenu
      editor={editor}
-      pluginKey={`drawio-menu`}
+      pluginKey={`drawio-menu}`}
      updateDelay={0}
      tippyOptions={{
        getReferenceClientRect,
        offset: [0, 8],
        zIndex: 99,
        popperOptions: {
-          modifiers: [{ name: "flip", enabled: false }],
+          modifiers: [{ name: 'flip', enabled: false }],
        },
        plugins: [sticky],
-        sticky: "popper",
+        sticky: 'popper',
      }}
      shouldShow={shouldShow}
    >
      <div
        style={{
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
        }}
      >
-        {editorState?.width && (
-          <NodeWidthResize onChange={onWidthChange} value={editorState.width} />
+        {editor.getAttributes('drawio')?.width && (
+          <NodeWidthResize
+            onChange={onWidthChange}
+            value={parseInt(editor.getAttributes('drawio').width)}
+          />
        )}
      </div>
    </BaseBubbleMenu>
@@ -17,7 +17,7 @@ import {
  EventExit,
  EventSave,
 } from "react-drawio";
-import { IAttachment } from "@/features/attachments/types/attachment.types";
+import { IAttachment } from "@/lib/types";
 import { decodeBase64ToSvgString, svgStringToFile } from "@/lib/utils";
 import clsx from "clsx";
 import { IconEdit } from "@tabler/icons-react";
@@ -145,7 +145,6 @@ export default function DrawioView(props: NodeViewProps) {
              variant="default"
              color="gray"
              mx="xs"
-              className="print-hide"
              style={{
                position: "absolute",
                top: 8,
@@ -2,16 +2,15 @@ import {
  BubbleMenu as BaseBubbleMenu,
  findParentNode,
  posToDOMRect,
-  useEditorState,
-} from "@tiptap/react";
-import { useCallback } from "react";
-import { sticky } from "tippy.js";
-import { Node as PMNode } from "prosemirror-model";
+} from '@tiptap/react';
+import { useCallback } from 'react';
+import { sticky } from 'tippy.js';
+import { Node as PMNode } from 'prosemirror-model';
 import {
  EditorMenuProps,
  ShouldShowProps,
-} from "@/features/editor/components/table/types/types.ts";
-import { NodeWidthResize } from "@/features/editor/components/common/node-width-resize.tsx";
+} from '@/features/editor/components/table/types/types.ts';
+import { NodeWidthResize } from '@/features/editor/components/common/node-width-resize.tsx';

 export function ExcalidrawMenu({ editor }: EditorMenuProps) {
  const shouldShow = useCallback(
@@ -20,31 +19,14 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
        return false;
      }

-      return (
-        editor.isActive("excalidraw") && editor.getAttributes("excalidraw")?.src
-      );
+      return editor.isActive('excalidraw') && editor.getAttributes('excalidraw')?.src;
    },
-    [editor],
+    [editor]
  );

-  const editorState = useEditorState({
-    editor,
-    selector: (ctx) => {
-      if (!ctx.editor) {
-        return null;
-      }
-
-      const excalidrawAttr = ctx.editor.getAttributes("excalidraw");
-      return {
-        isExcalidraw: ctx.editor.isActive("excalidraw"),
-        width: excalidrawAttr?.width ? parseInt(excalidrawAttr.width) : null,
-      };
-    },
-  });
-
  const getReferenceClientRect = useCallback(() => {
    const { selection } = editor.state;
-    const predicate = (node: PMNode) => node.type.name === "excalidraw";
+    const predicate = (node: PMNode) => node.type.name === 'excalidraw';
    const parent = findParentNode(predicate)(selection);

    if (parent) {
@@ -57,9 +39,9 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {

  const onWidthChange = useCallback(
    (value: number) => {
-      editor.commands.updateAttributes("excalidraw", { width: `${value}%` });
+      editor.commands.updateAttributes('excalidraw', { width: `${value}%` });
    },
-    [editor],
+    [editor]
  );

  return (
@@ -72,22 +54,25 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
        offset: [0, 8],
        zIndex: 99,
        popperOptions: {
-          modifiers: [{ name: "flip", enabled: false }],
+          modifiers: [{ name: 'flip', enabled: false }],
        },
        plugins: [sticky],
-        sticky: "popper",
+        sticky: 'popper',
      }}
      shouldShow={shouldShow}
    >
      <div
        style={{
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
        }}
      >
-        {editorState?.width && (
-          <NodeWidthResize onChange={onWidthChange} value={editorState.width} />
+        {editor.getAttributes('excalidraw')?.width && (
+          <NodeWidthResize
+            onChange={onWidthChange}
+            value={parseInt(editor.getAttributes('excalidraw').width)}
+          />
        )}
      </div>
    </BaseBubbleMenu>
@@ -15,7 +15,7 @@ import { useDisclosure } from "@mantine/hooks";
 import { getFileUrl } from "@/lib/config.ts";
 import "@excalidraw/excalidraw/index.css";
 import type { ExcalidrawImperativeAPI } from "@excalidraw/excalidraw/types";
-import { IAttachment } from "@/features/attachments/types/attachment.types";
+import { IAttachment } from "@/lib/types";
 import ReactClearModal from "react-clear-modal";
 import clsx from "clsx";
 import { IconEdit } from "@tabler/icons-react";
@@ -183,7 +183,6 @@ export default function ExcalidrawView(props: NodeViewProps) {
              variant="default"
              color="gray"
              mx="xs"
-              className="print-hide"
              style={{
                position: "absolute",
                top: 8,
@@ -2,7 +2,6 @@ import {
  BubbleMenu as BaseBubbleMenu,
  findParentNode,
  posToDOMRect,
-  useEditorState,
 } from "@tiptap/react";
 import React, { useCallback } from "react";
 import { sticky } from "tippy.js";
@@ -33,25 +32,6 @@ export function ImageMenu({ editor }: EditorMenuProps) {
    [editor],
  );

-  const editorState = useEditorState({
-    editor,
-    selector: (ctx) => {
-      if (!ctx.editor) {
-        return null;
-      }
-
-      const imageAttrs = ctx.editor.getAttributes("image");
-
-      return {
-        isImage: ctx.editor.isActive("image"),
-        isAlignLeft: ctx.editor.isActive("image", { align: "left" }),
-        isAlignCenter: ctx.editor.isActive("image", { align: "center" }),
-        isAlignRight: ctx.editor.isActive("image", { align: "right" }),
-        width: imageAttrs?.width ? parseInt(imageAttrs.width) : null,
-      };
-    },
-  });
-
  const getReferenceClientRect = useCallback(() => {
    const { selection } = editor.state;
    const predicate = (node: PMNode) => node.type.name === "image";
@@ -103,7 +83,7 @@ export function ImageMenu({ editor }: EditorMenuProps) {
  return (
    <BaseBubbleMenu
      editor={editor}
-      pluginKey={`image-menu`}
+      pluginKey={`image-menu}`}
      updateDelay={0}
      tippyOptions={{
        getReferenceClientRect,
@@ -123,7 +103,9 @@ export function ImageMenu({ editor }: EditorMenuProps) {
            onClick={alignImageLeft}
            size="lg"
            aria-label={t("Align left")}
-            variant={editorState?.isAlignLeft ? "light" : "default"}
+            variant={
+              editor.isActive("image", { align: "left" }) ? "light" : "default"
+            }
          >
            <IconLayoutAlignLeft size={18} />
          </ActionIcon>
@@ -134,7 +116,11 @@ export function ImageMenu({ editor }: EditorMenuProps) {
            onClick={alignImageCenter}
            size="lg"
            aria-label={t("Align center")}
-            variant={editorState?.isAlignCenter ? "light" : "default"}
+            variant={
+              editor.isActive("image", { align: "center" })
+                ? "light"
+                : "default"
+            }
          >
            <IconLayoutAlignCenter size={18} />
          </ActionIcon>
@@ -145,15 +131,20 @@ export function ImageMenu({ editor }: EditorMenuProps) {
            onClick={alignImageRight}
            size="lg"
            aria-label={t("Align right")}
-            variant={editorState?.isAlignRight ? "light" : "default"}
+            variant={
+              editor.isActive("image", { align: "right" }) ? "light" : "default"
+            }
          >
            <IconLayoutAlignRight size={18} />
          </ActionIcon>
        </Tooltip>
      </ActionIcon.Group>

-      {editorState?.width && (
-        <NodeWidthResize onChange={onWidthChange} value={editorState.width} />
+      {editor.getAttributes("image")?.width && (
+        <NodeWidthResize
+          onChange={onWidthChange}
+          value={parseInt(editor.getAttributes("image").width)}
+        />
      )}
    </BaseBubbleMenu>
  );
@@ -1,4 +1,4 @@
-import { BubbleMenu as BaseBubbleMenu, useEditorState } from "@tiptap/react";
+import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react";
 import React, { useCallback, useState } from "react";
 import { EditorMenuProps } from "@/features/editor/components/table/types/types.ts";
 import { LinkEditorPanel } from "@/features/editor/components/link/link-editor-panel.tsx";
@@ -12,18 +12,7 @@ export function LinkMenu({ editor, appendTo }: EditorMenuProps) {
    return editor.isActive("link");
  }, [editor]);

-  const editorState = useEditorState({
-    editor,
-    selector: (ctx) => {
-      if (!ctx.editor) {
-        return null;
-      }
-      const link = ctx.editor.getAttributes("link");
-      return {
-        href: link.href,
-      };
-    },
-  });
+  const { href: link } = editor.getAttributes("link");

  const handleEdit = useCallback(() => {
    setShowEdit(true);
@@ -81,14 +70,11 @@ export function LinkMenu({ editor, appendTo }: EditorMenuProps) {
          padding="xs"
          bg="var(--mantine-color-body)"
        >
-          <LinkEditorPanel
-            initialUrl={editorState?.href}
-            onSetLink={onSetLink}
-          />
+          <LinkEditorPanel initialUrl={link} onSetLink={onSetLink} />
        </Card>
      ) : (
        <LinkPreviewPanel
-          url={editorState?.href}
+          url={link}
          onClear={onUnsetLink}
          onEdit={handleEdit}
        />
@@ -17,11 +17,8 @@ import {
  IconTable,
  IconTypography,
  IconMenu4,
-  IconCalendar,
-  IconAppWindow,
-  IconSitemap,
-  IconAlignLeft2,
-} from "@tabler/icons-react";
+  IconCalendar, IconAppWindow,
+} from '@tabler/icons-react';
 import {
  CommandProps,
  SlashMenuGroupedItemsType,
@@ -154,14 +151,6 @@ const CommandGroups: SlashMenuGroupedItemsType = {
      command: ({ editor, range }: CommandProps) =>
        editor.chain().focus().deleteRange(range).setHorizontalRule().run(),
    },
-    {
-      title: "Table of contents",
-      description: "Insert table of contents",
-      searchTerms: ["toc"],
-      icon: IconAlignLeft2,
-      command: ({ editor, range }: CommandProps) =>
-        editor.chain().focus().deleteRange(range).insertTableOfContents().run(),
-    },
    {
      title: "Image",
      description: "Upload any image from your device.",
@@ -368,15 +357,6 @@ const CommandGroups: SlashMenuGroupedItemsType = {
          .run();
      },
    },
-    {
-      title: "Subpages (Child pages)",
-      description: "List all subpages of the current page",
-      searchTerms: ["subpages", "child", "children", "nested", "hierarchy"],
-      icon: IconSitemap,
-      command: ({ editor, range }: CommandProps) => {
-        editor.chain().focus().deleteRange(range).insertSubpages().run();
-      },
-    },
    {
      title: "Iframe embed",
      description: "Embed any Iframe",
@@ -1,95 +0,0 @@
-import {
-  BubbleMenu as BaseBubbleMenu,
-  posToDOMRect,
-  findParentNode,
-} from "@tiptap/react";
-import { Node as PMNode } from "@tiptap/pm/model";
-import React, { useCallback } from "react";
-import { ActionIcon, Tooltip } from "@mantine/core";
-import { IconTrash } from "@tabler/icons-react";
-import { useTranslation } from "react-i18next";
-import { Editor } from "@tiptap/core";
-import { sticky } from "tippy.js";
-
-interface SubpagesMenuProps {
-  editor: Editor;
-}
-
-interface ShouldShowProps {
-  state: any;
-  from?: number;
-  to?: number;
-}
-
-export const SubpagesMenu = React.memo(
-  ({ editor }: SubpagesMenuProps): JSX.Element => {
-    const { t } = useTranslation();
-
-    const shouldShow = useCallback(
-      ({ state }: ShouldShowProps) => {
-        if (!state) {
-          return false;
-        }
-
-        return editor.isActive("subpages");
-      },
-      [editor],
-    );
-
-    const getReferenceClientRect = useCallback(() => {
-      const { selection } = editor.state;
-      const predicate = (node: PMNode) => node.type.name === "subpages";
-      const parent = findParentNode(predicate)(selection);
-
-      if (parent) {
-        const dom = editor.view.nodeDOM(parent?.pos) as HTMLElement;
-        return dom.getBoundingClientRect();
-      }
-
-      return posToDOMRect(editor.view, selection.from, selection.to);
-    }, [editor]);
-
-    const deleteNode = useCallback(() => {
-      const { selection } = editor.state;
-      editor
-        .chain()
-        .focus()
-        .setNodeSelection(selection.from)
-        .deleteSelection()
-        .run();
-    }, [editor]);
-
-    return (
-      <BaseBubbleMenu
-        editor={editor}
-        pluginKey={`subpages-menu}`}
-        updateDelay={0}
-        tippyOptions={{
-          getReferenceClientRect,
-          offset: [0, 8],
-          zIndex: 99,
-          popperOptions: {
-            modifiers: [{ name: "flip", enabled: false }],
-          },
-          plugins: [sticky],
-          sticky: "popper",
-        }}
-        shouldShow={shouldShow}
-      >
-        <Tooltip position="top" label={t("Delete")}>
-          <ActionIcon
-            onClick={deleteNode}
-            variant="default"
-            size="lg"
-            color="red"
-            aria-label={t("Delete")}
-          >
-            <IconTrash size={18} />
-          </ActionIcon>
-        </Tooltip>
-      </BaseBubbleMenu>
-    );
-  },
-);
-
-export default SubpagesMenu;
@@ -1,120 +0,0 @@
-import { NodeViewProps, NodeViewWrapper } from "@tiptap/react";
-import { Stack, Text, Anchor, ActionIcon } from "@mantine/core";
-import { IconFileDescription } from "@tabler/icons-react";
-import { useGetSidebarPagesQuery } from "@/features/page/queries/page-query";
-import { useMemo } from "react";
-import { Link, useParams } from "react-router-dom";
-import classes from "./subpages.module.css";
-import styles from "../mention/mention.module.css";
-import {
-  buildPageUrl,
-  buildSharedPageUrl,
-} from "@/features/page/page.utils.ts";
-import { useTranslation } from "react-i18next";
-import { sortPositionKeys } from "@/features/page/tree/utils/utils";
-import { useSharedPageSubpages } from "@/features/share/hooks/use-shared-page-subpages";
-
-export default function SubpagesView(props: NodeViewProps) {
-  const { editor } = props;
-  const { spaceSlug, shareId } = useParams();
-  const { t } = useTranslation();
-
-  const currentPageId = editor.storage.pageId;
-
-  // Get subpages from shared tree if we're in a shared context
-  const sharedSubpages = useSharedPageSubpages(currentPageId);
-
-  const { data, isLoading, error } = useGetSidebarPagesQuery({
-    pageId: currentPageId,
-  });
-
-  const subpages = useMemo(() => {
-    // If we're in a shared context, use the shared subpages
-    if (shareId && sharedSubpages) {
-      return sharedSubpages.map((node) => ({
-        id: node.value,
-        slugId: node.slugId,
-        title: node.name,
-        icon: node.icon,
-        position: node.position,
-      }));
-    }
-
-    // Otherwise use the API data
-    if (!data?.pages) return [];
-    const allPages = data.pages.flatMap((page) => page.items);
-    return sortPositionKeys(allPages);
-  }, [data, shareId, sharedSubpages]);
-
-  if (isLoading && !shareId) {
-    return null;
-  }
-
-  if (error && !shareId) {
-    return (
-      <NodeViewWrapper>
-        <Text c="dimmed" size="md" py="md">
-          {t("Failed to load subpages")}
-        </Text>
-      </NodeViewWrapper>
-    );
-  }
-
-  if (subpages.length === 0) {
-    return (
-      <NodeViewWrapper>
-        <div className={classes.container}>
-          <Text c="dimmed" size="md" py="md">
-            {t("No subpages")}
-          </Text>
-        </div>
-      </NodeViewWrapper>
-    );
-  }
-
-  return (
-    <NodeViewWrapper>
-      <div className={classes.container}>
-        <Stack gap={5}>
-          {subpages.map((page) => (
-            <Anchor
-              key={page.id}
-              component={Link}
-              fw={500}
-              to={
-                shareId
-                  ? buildSharedPageUrl({
-                      shareId,
-                      pageSlugId: page.slugId,
-                      pageTitle: page.title,
-                    })
-                  : buildPageUrl(spaceSlug, page.slugId, page.title)
-              }
-              underline="never"
-              className={styles.pageMentionLink}
-              draggable={false}
-            >
-              {page?.icon ? (
-                <span style={{ marginRight: "4px" }}>{page.icon}</span>
-              ) : (
-                <ActionIcon
-                  variant="transparent"
-                  color="gray"
-                  component="span"
-                  size={18}
-                  style={{ verticalAlign: "text-bottom" }}
-                >
-                  <IconFileDescription size={18} />
-                </ActionIcon>
-              )}
-
-              <span className={styles.pageMentionText}>
-                {page?.title || t("untitled")}
-              </span>
-            </Anchor>
-          ))}
-        </Stack>
-      </div>
-    </NodeViewWrapper>
-  );
-}
@@ -1,9 +0,0 @@
-.container {
-  margin: 0;
-  padding-left: 4px;
-  user-select: none;
-
-  a {
-    border: none !important;
-  }
-}
@@ -1,61 +0,0 @@
-.header {
-}
-
-.container {
-}
-
-.emptyState {
-}
-
-.link {
-  outline: none;
-  cursor: pointer;
-  display: block;
-  width: 100%;
-  text-align: start;
-  word-wrap: break-word;
-  background-color: transparent;
-  color: var(--mantine-color-text);
-  font-size: var(--mantine-font-size-sm);
-  line-height: var(--mantine-line-height-sm);
-  padding: 6px;
-  border-top-right-radius: var(--mantine-radius-sm);
-  border-bottom-right-radius: var(--mantine-radius-sm);
-  border: none;
-
-  @mixin hover {
-    background-color: light-dark(
-      var(--mantine-color-gray-2),
-      var(--mantine-color-dark-6)
-    );
-  }
-
-  @media (max-width: $mantine-breakpoint-sm) {
-    & {
-      border: none !important;
-      padding-left: 0px;
-    }
-  }
-}
-
-.linkActive {
-  font-weight: 500;
-  border-left-color: light-dark(
-    var(--mantine-color-grey-5),
-    var(--mantine-color-grey-3)
-  );
-  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
-
-  &,
-  &:hover {
-    background-color: light-dark(
-      var(--mantine-color-gray-3),
-      var(--mantine-color-dark-5)
-    ) !important;
-  }
-}
-
-.leftBorder {
-  border-left: 1px solid
-    light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
-}
@@ -1,55 +0,0 @@
-import { Editor as CoreEditor } from "@tiptap/core";
-import { TableOfContentsStorage } from "@tiptap/extension-table-of-contents";
-import { NodeViewWrapper, useEditorState } from "@tiptap/react";
-import { memo } from "react";
-import { clsx } from "clsx";
-import classes from "./table-of-contents-nodeview.module.css";
-
-export type TableOfContentsProps = {
-  editor: CoreEditor;
-  onItemClick?: () => void;
-};
-
-export const TableOfContentsNodeview = memo(
-  ({ editor, onItemClick }: TableOfContentsProps) => {
-    const content = useEditorState({
-      editor,
-      selector: (ctx) =>
-        (ctx.editor.storage.tableOfContents as TableOfContentsStorage)?.content,
-    });
-
-    return (
-      <NodeViewWrapper>
-        <div contentEditable={false}>
-          <div className={classes.header}>Table of contents</div>
-          {content.length > 0 ? (
-            <div className={classes.container}>
-              {content
-                .filter((item) => item.level <= 3)
-                .map((item) => (
-                  <a
-                    key={item.id}
-                    href={`#${item.id}`}
-                    style={{ marginLeft: `${1 * item.level - 1}rem` }}
-                    onClick={onItemClick}
-                    className={clsx(
-                      classes.link,
-                      item.isActive && classes.linkActive,
-                    )}
-                  >
-                    {item.itemIndex}. {item.textContent}
-                  </a>
-                ))}
-            </div>
-          ) : (
-            <div className={classes.emptyState}>
-              Start adding headlines to your document …
-            </div>
-          )}
-        </div>
-      </NodeViewWrapper>
-    );
-  },
-);
-
-TableOfContentsNodeview.displayName = "TableOfContentsNodeview";
@@ -9,8 +9,7 @@ import {
  Tooltip,
  UnstyledButton,
 } from "@mantine/core";
-import type { Editor } from "@tiptap/react";
-import { useEditorState } from "@tiptap/react";
+import { useEditor } from "@tiptap/react";
 import { useTranslation } from "react-i18next";

 export interface TableColorItem {
@@ -19,7 +18,7 @@ export interface TableColorItem {
 }

 interface TableBackgroundColorProps {
-  editor: Editor | null;
+  editor: ReturnType<typeof useEditor>;
 }

 const TABLE_COLORS: TableColorItem[] = [
@@ -39,50 +38,37 @@ export const TableBackgroundColor: FC<TableBackgroundColorProps> = ({
  const { t } = useTranslation();
  const [opened, setOpened] = React.useState(false);

-  const editorState = useEditorState({
-    editor,
-    selector: (ctx) => {
-      if (!ctx.editor) {
-        return null;
-      }
-
-      let currentColor = "";
-      if (ctx.editor.isActive("tableCell")) {
-        const attrs = ctx.editor.getAttributes("tableCell");
-        currentColor = attrs.backgroundColor || "";
-      } else if (ctx.editor.isActive("tableHeader")) {
-        const attrs = ctx.editor.getAttributes("tableHeader");
-        currentColor = attrs.backgroundColor || "";
-      }
-
-      return {
-        currentColor,
-        isTableCell: ctx.editor.isActive("tableCell"),
-        isTableHeader: ctx.editor.isActive("tableHeader"),
-      };
-    },
-  });
-
-  if (!editor || !editorState) {
-    return null;
-  }
-
  const setTableCellBackground = (color: string, colorName: string) => {
    editor
      .chain()
      .focus()
-      .updateAttributes("tableCell", {
+      .updateAttributes("tableCell", { 
        backgroundColor: color || null,
-        backgroundColorName: color ? colorName : null,
+        backgroundColorName: color ? colorName : null 
      })
-      .updateAttributes("tableHeader", {
+      .updateAttributes("tableHeader", { 
        backgroundColor: color || null,
-        backgroundColorName: color ? colorName : null,
+        backgroundColorName: color ? colorName : null 
      })
      .run();
    setOpened(false);
  };

+  // Get current cell's background color
+  const getCurrentColor = () => {
+    if (editor.isActive("tableCell")) {
+      const attrs = editor.getAttributes("tableCell");
+      return attrs.backgroundColor || "";
+    }
+    if (editor.isActive("tableHeader")) {
+      const attrs = editor.getAttributes("tableHeader");
+      return attrs.backgroundColor || "";
+    }
+    return "";
+  };
+
+  const currentColor = getCurrentColor();
+
  return (
    <Popover
      width={200}
@@ -137,7 +123,7 @@ export const TableBackgroundColor: FC<TableBackgroundColorProps> = ({
                    cursor: "pointer",
                  }}
                >
-                  {editorState.currentColor === item.color && (
+                  {currentColor === item.color && (
                    <IconCheck
                      size={18}
                      style={{
@@ -9,15 +9,15 @@ import {
  ActionIcon,
  Button,
  Popover,
+  rem,
  ScrollArea,
  Tooltip,
 } from "@mantine/core";
-import type { Editor } from "@tiptap/react";
-import { useEditorState } from "@tiptap/react";
+import { useEditor } from "@tiptap/react";
 import { useTranslation } from "react-i18next";

 interface TableTextAlignmentProps {
-  editor: Editor | null;
+  editor: ReturnType<typeof useEditor>;
 }

 interface AlignmentItem {
@@ -32,44 +32,25 @@ export const TableTextAlignment: FC<TableTextAlignmentProps> = ({ editor }) => {
  const { t } = useTranslation();
  const [opened, setOpened] = React.useState(false);

-  const editorState = useEditorState({
-    editor,
-    selector: (ctx) => {
-      if (!ctx.editor) {
-        return null;
-      }
-
-      return {
-        isAlignLeft: ctx.editor.isActive({ textAlign: "left" }),
-        isAlignCenter: ctx.editor.isActive({ textAlign: "center" }),
-        isAlignRight: ctx.editor.isActive({ textAlign: "right" }),
-      };
-    },
-  });
-
-  if (!editor || !editorState) {
-    return null;
-  }
-
  const items: AlignmentItem[] = [
    {
      name: "Align left",
      value: "left",
-      isActive: () => editorState?.isAlignLeft,
+      isActive: () => editor.isActive({ textAlign: "left" }),
      command: () => editor.chain().focus().setTextAlign("left").run(),
      icon: IconAlignLeft,
    },
    {
      name: "Align center",
      value: "center",
-      isActive: () => editorState?.isAlignCenter,
+      isActive: () => editor.isActive({ textAlign: "center" }),
      command: () => editor.chain().focus().setTextAlign("center").run(),
      icon: IconAlignCenter,
    },
    {
      name: "Align right",
      value: "right",
-      isActive: () => editorState?.isAlignRight,
+      isActive: () => editor.isActive({ textAlign: "right" }),
      command: () => editor.chain().focus().setTextAlign("right").run(),
      icon: IconAlignRight,
    },
@@ -83,7 +64,7 @@ export const TableTextAlignment: FC<TableTextAlignmentProps> = ({ editor }) => {
      onChange={setOpened}
      position="bottom"
      withArrow
-      transitionProps={{ transition: "pop" }}
+      transitionProps={{ transition: 'pop' }}
    >
      <Popover.Target>
        <Tooltip label={t("Text alignment")} withArrow>
@@ -106,7 +87,9 @@ export const TableTextAlignment: FC<TableTextAlignmentProps> = ({ editor }) => {
                key={index}
                variant="default"
                leftSection={<item.icon size={16} />}
-                rightSection={item.isActive() && <IconCheck size={16} />}
+                rightSection={
+                  item.isActive() && <IconCheck size={16} />
+                }
                justify="left"
                fullWidth
                onClick={() => {
@@ -123,4 +106,4 @@ export const TableTextAlignment: FC<TableTextAlignmentProps> = ({ editor }) => {
      </Popover.Dropdown>
    </Popover>
  );
-};
+};
@@ -2,7 +2,6 @@ import {
  BubbleMenu as BaseBubbleMenu,
  findParentNode,
  posToDOMRect,
-  useEditorState,
 } from "@tiptap/react";
 import React, { useCallback } from "react";
 import { sticky } from "tippy.js";
@@ -33,25 +32,6 @@ export function VideoMenu({ editor }: EditorMenuProps) {
    [editor],
  );

-  const editorState = useEditorState({
-    editor,
-    selector: (ctx) => {
-      if (!ctx.editor) {
-        return null;
-      }
-
-      const videoAttrs = ctx.editor.getAttributes("video");
-
-      return {
-        isVideo: ctx.editor.isActive("video"),
-        isAlignLeft: ctx.editor.isActive("video", { align: "left" }),
-        isAlignCenter: ctx.editor.isActive("video", { align: "center" }),
-        isAlignRight: ctx.editor.isActive("video", { align: "right" }),
-        width: videoAttrs?.width ? parseInt(videoAttrs.width) : null,
-      };
-    },
-  });
-
  const getReferenceClientRect = useCallback(() => {
    const { selection } = editor.state;
    const predicate = (node: PMNode) => node.type.name === "video";
@@ -103,7 +83,7 @@ export function VideoMenu({ editor }: EditorMenuProps) {
  return (
    <BaseBubbleMenu
      editor={editor}
-      pluginKey={`video-menu`}
+      pluginKey={`video-menu}`}
      updateDelay={0}
      tippyOptions={{
        getReferenceClientRect,
@@ -123,7 +103,9 @@ export function VideoMenu({ editor }: EditorMenuProps) {
            onClick={alignVideoLeft}
            size="lg"
            aria-label={t("Align left")}
-            variant={editorState?.isAlignLeft ? "light" : "default"}
+            variant={
+              editor.isActive("video", { align: "left" }) ? "light" : "default"
+            }
          >
            <IconLayoutAlignLeft size={18} />
          </ActionIcon>
@@ -134,7 +116,11 @@ export function VideoMenu({ editor }: EditorMenuProps) {
            onClick={alignVideoCenter}
            size="lg"
            aria-label={t("Align center")}
-            variant={editorState?.isAlignCenter ? "light" : "default"}
+            variant={
+              editor.isActive("video", { align: "center" })
+                ? "light"
+                : "default"
+            }
          >
            <IconLayoutAlignCenter size={18} />
          </ActionIcon>
@@ -145,15 +131,20 @@ export function VideoMenu({ editor }: EditorMenuProps) {
            onClick={alignVideoRight}
            size="lg"
            aria-label={t("Align right")}
-            variant={editorState?.isAlignRight ? "light" : "default"}
+            variant={
+              editor.isActive("video", { align: "right" }) ? "light" : "default"
+            }
          >
            <IconLayoutAlignRight size={18} />
          </ActionIcon>
        </Tooltip>
      </ActionIcon.Group>

-      {editorState?.width && (
-        <NodeWidthResize onChange={onWidthChange} value={editorState.width} />
+      {editor.getAttributes("video")?.width && (
+        <NodeWidthResize
+          onChange={onWidthChange}
+          value={parseInt(editor.getAttributes("video").width)}
+        />
      )}
    </BaseBubbleMenu>
  );
@@ -11,7 +11,6 @@ import { Typography } from "@tiptap/extension-typography";
 import { TextStyle } from "@tiptap/extension-text-style";
 import { Color } from "@tiptap/extension-color";
 import SlashCommand from "@/features/editor/extensions/slash-command";
-import { TableOfContents as TiptapTableOfContents } from "@tiptap/extension-table-of-contents";
 import { Collaboration } from "@tiptap/extension-collaboration";
 import { CollaborationCursor } from "@tiptap/extension-collaboration-cursor";
 import { HocuspocusProvider } from "@hocuspocus/provider";
@@ -39,9 +38,6 @@ import {
  Embed,
  SearchAndReplace,
  Mention,
-  Subpages,
-  TableDndExtension,
-  TableOfContentsNode,
 } from "@docmost/editor-ext";
 import {
  randomElement,
@@ -61,7 +57,6 @@ import CodeBlockView from "@/features/editor/components/code-block/code-block-vi
 import DrawioView from "../components/drawio/drawio-view";
 import ExcalidrawView from "@/features/editor/components/excalidraw/excalidraw-view.tsx";
 import EmbedView from "@/features/editor/components/embed/embed-view.tsx";
-import SubpagesView from "@/features/editor/components/subpages/subpages-view.tsx";
 import plaintext from "highlight.js/lib/languages/plaintext";
 import powershell from "highlight.js/lib/languages/powershell";
 import abap from "highlightjs-sap-abap";
@@ -80,7 +75,6 @@ import { MarkdownClipboard } from "@/features/editor/extensions/markdown-clipboa
 import EmojiCommand from "./emoji-command";
 import { CharacterCount } from "@tiptap/extension-character-count";
 import { countWords } from "alfaaz";
-import { TableOfContentsNodeview } from "@/features/editor/components/table-of-contents/table-of-contents-nodeview.tsx";

 const lowlight = createLowlight(common);
 lowlight.register("mermaid", plaintext);
@@ -168,13 +162,12 @@ export const mainExtensions = [
  }),
  CustomTable.configure({
    resizable: true,
-    lastColumnResizable: true,
+    lastColumnResizable: false,
    allowTableNodeSelection: true,
  }),
  TableRow,
  TableCell,
  TableHeader,
-  TableDndExtension,
  MathInline.configure({
    view: MathInlineView,
  }),
@@ -219,9 +212,6 @@ export const mainExtensions = [
  Embed.configure({
    view: EmbedView,
  }),
-  Subpages.configure({
-    view: SubpagesView,
-  }),
  MarkdownClipboard.configure({
    transformPastedText: true,
  }),
@@ -231,23 +221,19 @@ export const mainExtensions = [
  SearchAndReplace.extend({
    addKeyboardShortcuts() {
      return {
-        "Mod-f": () => {
+        'Mod-f': () => {
          const event = new CustomEvent("openFindDialogFromEditor", {});
          document.dispatchEvent(event);
          return true;
        },
-        Escape: () => {
+        'Escape': () => {
          const event = new CustomEvent("closeFindDialogFromEditor", {});
          document.dispatchEvent(event);
          return true;
        },
-      };
+      }
    },
  }).configure(),
-  TiptapTableOfContents,
-  TableOfContentsNode.configure({
-    view: TableOfContentsNodeview,
-  }),
 ] as any;

 type CollabExtensions = (provider: HocuspocusProvider, user: IUser) => any[];
@@ -7,12 +7,7 @@ import {
  onAuthenticationFailedParameters,
  WebSocketStatus,
 } from "@hocuspocus/provider";
-import {
-  EditorContent,
-  EditorProvider,
-  useEditor,
-  useEditorState,
-} from "@tiptap/react";
+import { EditorContent, EditorProvider, useEditor } from "@tiptap/react";
 import {
  collabExtensions,
  mainExtensions,
@@ -36,7 +31,6 @@ import TableMenu from "@/features/editor/components/table/table-menu.tsx";
 import ImageMenu from "@/features/editor/components/image/image-menu.tsx";
 import CalloutMenu from "@/features/editor/components/callout/callout-menu.tsx";
 import VideoMenu from "@/features/editor/components/video/video-menu.tsx";
-import SubpagesMenu from "@/features/editor/components/subpages/subpages-menu.tsx";
 import {
  handleFileDrop,
  handlePaste,
@@ -55,7 +49,6 @@ import { extractPageSlugId } from "@/lib";
 import { FIVE_MINUTES } from "@/lib/constants.ts";
 import { PageEditMode } from "@/features/user/types/user.types.ts";
 import { jwtDecode } from "jwt-decode";
-import { searchSpotlight } from "@/features/search/constants.ts";

 interface PageEditorProps {
  pageId: string;
@@ -82,7 +75,7 @@ export default function PageEditor({
  const [isLocalSynced, setLocalSynced] = useState(false);
  const [isRemoteSynced, setRemoteSynced] = useState(false);
  const [yjsConnectionStatus, setYjsConnectionStatus] = useAtom(
-    yjsConnectionStatusAtom,
+    yjsConnectionStatusAtom
  );
  const menuContainerRef = useRef(null);
  const documentName = `page.${pageId}`;
@@ -218,20 +211,16 @@ export default function PageEditor({
      extensions,
      editable,
      immediatelyRender: true,
-      shouldRerenderOnTransaction: false,
+      shouldRerenderOnTransaction: true,
      editorProps: {
        scrollThreshold: 80,
        scrollMargin: 80,
        handleDOMEvents: {
          keydown: (_view, event) => {
-            if ((event.ctrlKey || event.metaKey) && event.code === "KeyS") {
+            if ((event.ctrlKey || event.metaKey) && event.code === 'KeyS') {
              event.preventDefault();
              return true;
            }
-            if ((event.ctrlKey || event.metaKey) && event.code === "KeyK") {
-              searchSpotlight.open();
-              return true;
-            }
            if (["ArrowUp", "ArrowDown", "Enter"].includes(event.key)) {
              const slashCommand = document.querySelector("#slash-command");
              if (slashCommand) {
@@ -273,16 +262,9 @@ export default function PageEditor({
        debouncedUpdateContent(editorJson);
      },
    },
-    [pageId, editable, remoteProvider],
+    [pageId, editable, remoteProvider]
  );

-  const editorIsEditable = useEditorState({
-    editor,
-    selector: (ctx) => {
-      return ctx.editor?.isEditable ?? false;
-    },
-  });
-
  const debouncedUpdateContent = useDebouncedCallback((newContent: any) => {
    const pageData = queryClient.getQueryData<IPage>(["pages", slugId]);

@@ -318,7 +300,7 @@ export default function PageEditor({
    return () => {
      document.removeEventListener(
        "ACTIVE_COMMENT_EVENT",
-        handleActiveCommentEvent,
+        handleActiveCommentEvent
      );
    };
  }, []);
@@ -393,7 +375,7 @@ export default function PageEditor({
  }

  return (
-    <div className="editor-container" style={{ position: "relative" }}>
+    <div style={{ position: "relative" }}>
      <div ref={menuContainerRef}>
        <EditorContent editor={editor} />

@@ -401,7 +383,7 @@ export default function PageEditor({
          <SearchAndReplaceDialog editor={editor} editable={editable} />
        )}

-        {editor && editorIsEditable && (
+        {editor && editor.isEditable && (
          <div>
            <EditorBubbleMenu editor={editor} />
            <TableMenu editor={editor} />
@@ -409,7 +391,6 @@ export default function PageEditor({
            <ImageMenu editor={editor} />
            <VideoMenu editor={editor} />
            <CalloutMenu editor={editor} />
-            <SubpagesMenu editor={editor} />
            <ExcalidrawMenu editor={editor} />
            <DrawioMenu editor={editor} />
            <LinkMenu editor={editor} appendTo={menuContainerRef} />
@@ -6,19 +6,21 @@ import { Document } from "@tiptap/extension-document";
 import { Heading } from "@tiptap/extension-heading";
 import { Text } from "@tiptap/extension-text";
 import { Placeholder } from "@tiptap/extension-placeholder";
-import { useAtom } from "jotai";
-import { readOnlyEditorAtom } from "@/features/editor/atoms/editor-atoms.ts";
+import { useAtom } from "jotai/index";
+import {
+  pageEditorAtom,
+  readOnlyEditorAtom,
+} from "@/features/editor/atoms/editor-atoms.ts";
+import { Editor } from "@tiptap/core";

 interface PageEditorProps {
  title: string;
  content: any;
-  pageId?: string;
 }

 export default function ReadonlyPageEditor({
  title,
  content,
-  pageId,
 }: PageEditorProps) {
  const [, setReadOnlyEditor] = useAtom(readOnlyEditorAtom);

@@ -54,9 +56,6 @@ export default function ReadonlyPageEditor({
        content={content}
        onCreate={({ editor }) => {
          if (editor) {
-            if (pageId) {
-              editor.storage.pageId = pageId;
-            }
            // @ts-ignore
            setReadOnlyEditor(editor);
          }
@@ -33,8 +33,8 @@
  }

  p {
-    margin-top: 0.5em;
-    margin-bottom: 0.5em;
+    margin-top: 0.65em;
+    margin-bottom: 0.65em;
  }

  ul,
@@ -57,7 +57,6 @@
  h5,
  h6 {
    line-height: 1.1;
-    margin-bottom: 10px;
  }

  code {
@@ -94,12 +93,8 @@

  hr {
    border: none;
-    @mixin light {
-      border-top: 1px solid var(--mantine-color-gray-4);
-    }
-    @mixin dark {
-      border-top: 1px solid var(--mantine-color-dark-4);
-    }
+    border-top: 2px solid #ced4da;
+    margin: 2rem 0;

    &:hover {
      cursor: pointer;
@@ -141,7 +136,7 @@

  .selection,
  *::selection {
-    background-color: Highlight;
+    background-color: light-dark(var(--mantine-color-gray-2), var(--mantine-color-gray-7));
  }

  .comment-mark {
@@ -45,10 +45,6 @@
    display: none;
    pointer-events: none;
  }
-
-  &[data-direction='horizontal'] {
-    rotate: 90deg;
-  }
 }

 .dark .drag-handle {
@@ -1,23 +1,11 @@
@media print {
-  .mantine-AppShell-header,
-  .mantine-AppShell-navbar,
-  .mantine-AppShell-aside,
-  .print-hide,
-  .drag-handle {
-    display: none !important;
-  }
+    .mantine-AppShell-header,
+    .mantine-AppShell-navbar,
+    .mantine-AppShell-aside{
+        display: none !important;
+    }

-  .mantine-AppShell-main {
-    padding-top: 0 !important;
-    min-height: auto !important;
-  }
-
-  .ProseMirror-selectednode {
-    outline: none !important;
-    box-shadow: none !important;
-  }
-
-  .tableWrapper {
-    overflow: hidden !important;
-  }
+    .mantine-AppShell-main {
+        padding-top: 0 !important;
+    }
 }
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Philipinho	bb83d12c8b	AI module - init	2025-08-15 23:18:51 -07:00
Philipinho	0f29eb8842	WIP	2025-08-14 23:13:23 -07:00