ms

The plpgsql + EXCEPTION versions of base_cell_numeric,
base_cell_timestamptz, and base_cell_bool were labeled PARALLEL SAFE
but EXCEPTION blocks require subtransactions, which Postgres cannot
start in a parallel worker. Any parallel scan that invoked them
crashed with 'cannot start subtransactions during a parallel
operation' — notably DuckDB's postgres extension on large base COPY
reads.

Rewrite each as a pure SQL function using jsonb_typeof + regex
validation for the 'coerce-or-null' semantics. No plpgsql, no
subtransactions, genuinely parallel-safe. Signatures unchanged so
existing call sites (loader, expression indexes, engine predicates)
are untouched.

.env.example

@@ -48,13 +48,6 @@ GOTENBERG_URL=
 
 DISABLE_TELEMETRY=false
 
-# Allow other sites to embed Docmost in an iframe.
-IFRAME_EMBED_ALLOWED=false
-
-# Only used when IFRAME_EMBED_ALLOWED=true. When empty, any origin is allowed.
-# Example: https://intranet.example.com,https://portal.example.com
-IFRAME_ALLOWED_ORIGINS=
-
 # Enable debug logging in production (default: false)
 DEBUG_MODE=false
 

apps/client/package.json

@@ -1,95 +1,91 @@
 {
   "name": "client",
   "private": true,
-  "version": "0.80.1",
+  "version": "0.80.0",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
     "lint": "eslint .",
     "preview": "vite preview",
-    "format": "prettier --write \"src/**/*.tsx\" \"src/**/*.ts\"",
-    "test": "vitest run",
-    "test:watch": "vitest"
+    "format": "prettier --write \"src/**/*.tsx\" \"src/**/*.ts\""
   },
   "dependencies": {
-    "@atlaskit/pragmatic-drag-and-drop": "1.8.1",
-    "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "2.1.5",
-    "@atlaskit/pragmatic-drag-and-drop-flourish": "2.0.15",
-    "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.1.0",
-    "@atlaskit/pragmatic-drag-and-drop-live-region": "1.3.4",
-    "@casl/react": "5.0.1",
+    "@casl/react": "^5.0.1",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@docmost/editor-ext": "workspace:*",
+    "@emoji-mart/data": "^1.2.1",
+    "@emoji-mart/react": "^1.1.1",
     "@excalidraw/excalidraw": "0.18.0-3a5ef40",
-    "@mantine/core": "8.3.18",
-    "@mantine/dates": "8.3.18",
-    "@mantine/form": "8.3.18",
-    "@mantine/hooks": "8.3.18",
-    "@mantine/modals": "8.3.18",
-    "@mantine/notifications": "8.3.18",
-    "@mantine/spotlight": "8.3.18",
-    "@slidoapp/emoji-mart": "5.8.7",
-    "@slidoapp/emoji-mart-data": "1.2.4",
-    "@slidoapp/emoji-mart-react": "1.1.5",
-    "@tabler/icons-react": "3.40.0",
-    "@tanstack/react-query": "5.90.17",
-    "@tanstack/react-virtual": "3.13.24",
-    "alfaaz": "1.1.0",
-    "axios": "1.16.0",
-    "blueimp-load-image": "5.16.0",
-    "clsx": "2.1.1",
-    "file-saver": "2.0.5",
-    "highlightjs-sap-abap": "0.3.0",
-    "i18next": "25.10.1",
-    "i18next-http-backend": "3.0.6",
-    "jotai": "2.18.1",
-    "jotai-optics": "0.4.0",
-    "js-cookie": "3.0.5",
-    "jwt-decode": "4.0.0",
+    "@mantine/core": "^8.3.18",
+    "@mantine/dates": "^8.3.18",
+    "@mantine/form": "^8.3.18",
+    "@mantine/hooks": "^8.3.18",
+    "@mantine/modals": "^8.3.18",
+    "@mantine/notifications": "^8.3.18",
+    "@mantine/spotlight": "^8.3.18",
+    "@tabler/icons-react": "^3.40.0",
+    "@tanstack/react-query": "5.99.1",
+    "@tanstack/react-table": "^8.21.3",
+    "@tanstack/react-virtual": "^3.13.24",
+    "alfaaz": "^1.1.0",
+    "axios": "1.15.0",
+    "blueimp-load-image": "^5.16.0",
+    "clsx": "^2.1.1",
+    "emoji-mart": "^5.6.0",
+    "file-saver": "^2.0.5",
+    "highlightjs-sap-abap": "^0.3.0",
+    "i18next": "^25.10.1",
+    "i18next-http-backend": "^3.0.2",
+    "jotai": "^2.18.1",
+    "jotai-optics": "^0.4.0",
+    "js-cookie": "^3.0.5",
+    "jwt-decode": "^4.0.0",
     "katex": "0.16.40",
-    "lowlight": "3.3.0",
-    "mantine-form-zod-resolver": "1.3.0",
-    "mermaid": "11.15.0",
-    "mitt": "3.0.1",
-    "posthog-js": "1.372.2",
-    "react": "18.3.1",
+    "lowlight": "^3.3.0",
+    "mantine-form-zod-resolver": "^1.3.0",
+    "mermaid": "^11.13.0",
+    "mitt": "^3.0.1",
+    "posthog-js": "1.363.1",
+    "react": "^18.3.1",
+    "react-arborist": "3.4.0",
     "react-clear-modal": "^2.0.18",
     "react-dom": "^18.3.1",
-    "react-drawio": "1.0.7",
-    "react-error-boundary": "6.1.1",
-    "react-helmet-async": "3.0.0",
-    "react-i18next": "16.5.8",
-    "react-router-dom": "7.13.1",
-    "semver": "7.7.4",
-    "socket.io-client": "4.8.3",
-    "zod": "4.3.6"
+    "react-drawio": "^1.0.7",
+    "react-error-boundary": "^6.1.1",
+    "react-helmet-async": "^3.0.0",
+    "react-i18next": "^16.5.8",
+    "react-router-dom": "^7.13.1",
+    "semver": "^7.7.4",
+    "socket.io-client": "^4.8.3",
+    "tiptap-extension-global-drag-handle": "^0.1.18",
+    "zod": "^4.3.6"
   },
   "devDependencies": {
-    "@eslint/js": "9.28.0",
-    "@tanstack/eslint-plugin-query": "5.94.4",
-    "@testing-library/jest-dom": "6.6.0",
-    "@testing-library/react": "16.1.0",
-    "@types/blueimp-load-image": "5.16.6",
-    "@types/file-saver": "2.0.7",
-    "@types/js-cookie": "3.0.6",
-    "@types/katex": "0.16.8",
+    "@eslint/js": "^9.28.0",
+    "@tanstack/eslint-plugin-query": "^5.94.4",
+    "@types/blueimp-load-image": "^5.16.6",
+    "@types/file-saver": "^2.0.7",
+    "@types/js-cookie": "^3.0.6",
+    "@types/katex": "^0.16.8",
     "@types/node": "22.19.1",
-    "@types/react": "18.3.12",
-    "@types/react-dom": "18.3.1",
-    "@vitejs/plugin-react": "6.0.1",
-    "eslint": "9.28.0",
-    "eslint-plugin-react": "7.37.5",
-    "eslint-plugin-react-hooks": "7.0.1",
-    "eslint-plugin-react-refresh": "0.5.2",
-    "globals": "15.13.0",
-    "jsdom": "25.0.0",
-    "optics-ts": "2.4.1",
-    "postcss": "8.5.14",
-    "postcss-preset-mantine": "1.18.0",
-    "postcss-simple-vars": "7.0.1",
-    "prettier": "3.8.1",
-    "typescript": "5.9.3",
-    "typescript-eslint": "8.57.1",
-    "vite": "8.0.5",
-    "vitest": "4.1.6"
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^6.0.1",
+    "eslint": "^9.28.0",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^15.13.0",
+    "optics-ts": "^2.4.1",
+    "postcss": "^8.5.8",
+    "postcss-preset-mantine": "^1.18.0",
+    "postcss-simple-vars": "^7.0.1",
+    "prettier": "^3.8.1",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.57.1",
+    "vite": "8.0.5"
   }
 }

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

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

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

@@ -71,7 +71,6 @@
   "Export": "Export",
   "Failed to create page": "Failed to create page",
   "Failed to delete page": "Failed to delete page",
-  "Failed to restore page": "Failed to restore page",
   "Failed to fetch recent pages": "Failed to fetch recent pages",
   "Failed to import pages": "Failed to import pages",
   "Failed to load page. An error occurred.": "Failed to load page. An error occurred.",
@@ -287,19 +286,6 @@
   "Add row above": "Add row above",
   "Add row below": "Add row below",
   "Delete table": "Delete table",
-  "Add column left": "Add column left",
-  "Add column right": "Add column right",
-  "Clear cell": "Clear cell",
-  "Clear cells": "Clear cells",
-  "Toggle header cell": "Toggle header cell",
-  "Toggle header column": "Toggle header column",
-  "Toggle header row": "Toggle header row",
-  "Move column left": "Move column left",
-  "Move column right": "Move column right",
-  "Move row down": "Move row down",
-  "Move row up": "Move row up",
-  "Sort A → Z": "Sort A → Z",
-  "Sort Z → A": "Sort Z → A",
   "Info": "Info",
   "Note": "Note",
   "Success": "Success",
@@ -362,8 +348,6 @@
   "Create block quote.": "Create block quote.",
   "Insert code snippet.": "Insert code snippet.",
   "Insert horizontal rule divider": "Insert horizontal rule divider",
-  "Page break": "Page break",
-  "Insert a page break for printing.": "Insert a page break for printing.",
   "Upload any image from your device.": "Upload any image from your device.",
   "Upload any video from your device.": "Upload any video from your device.",
   "Upload any audio from your device.": "Upload any audio from your device.",
@@ -432,7 +416,6 @@
   "{{latestVersion}} is available": "{{latestVersion}} is available",
   "Default page edit mode": "Default page edit mode",
   "Choose your preferred page edit mode. Avoid accidental edits.": "Choose your preferred page edit mode. Avoid accidental edits.",
-  "Choose {{format}} file": "Choose {{format}} file",
   "Reading": "Reading",
   "Delete member": "Delete member",
   "Member deleted successfully": "Member deleted successfully",
@@ -582,8 +565,6 @@
   "Move to trash": "Move to trash",
   "Move this page to trash?": "Move this page to trash?",
   "Restore page": "Restore page",
-  "Permanently delete": "Permanently delete",
-  "<b>{{name}}</b> moved this page to Trash {{time}}.": "<b>{{name}}</b> moved this page to Trash {{time}}.",
   "Page moved to trash": "Page moved to trash",
   "Page restored successfully": "Page restored successfully",
   "Deleted by": "Deleted by",
@@ -627,21 +608,25 @@
   "Image exceeds 10MB limit.": "Image exceeds 10MB limit.",
   "Image removed successfully": "Image removed successfully",
   "API key": "API key",
+  "API key created successfully": "API key created successfully",
   "API keys": "API keys",
   "API management": "API management",
+  "Are you sure you want to revoke this API key": "Are you sure you want to revoke this API key",
+  "Create API Key": "Create API Key",
   "Custom expiration date": "Custom expiration date",
   "Enter a descriptive token name": "Enter a descriptive token name",
   "Expiration": "Expiration",
   "Expired": "Expired",
   "Expires": "Expires",
+  "I've saved my API key": "I've saved my API key",
   "Last use": "Last Used",
   "No API keys found": "No API keys found",
   "No expiration": "No expiration",
+  "Revoke API key": "Revoke API key",
   "Revoked successfully": "Revoked successfully",
   "Select expiration date": "Select expiration date",
   "This action cannot be undone. Any applications using this API key will stop working.": "This action cannot be undone. Any applications using this API key will stop working.",
-  "Update": "Update",
-  "Update {{credential}}": "Update {{credential}}",
+  "Update API key": "Update API key",
   "Manage API keys for all users in the workspace": "Manage API keys for all users in the workspace",
   "Restrict API key creation to admins": "Restrict API key creation to admins",
   "Only admins and owners can create new API keys. Existing member keys will continue to work.": "Only admins and owners can create new API keys. Existing member keys will continue to work.",
@@ -888,12 +873,6 @@
   "Previous 7 days": "Previous 7 days",
   "Previous 30 days": "Previous 30 days",
   "Search chats...": "Search chats...",
-  "Search chats": "Search chats",
-  "Ask anything... Use @ to mention pages": "Ask anything... Use @ to mention pages",
-  "Ask anything or search your workspace": "Ask anything or search your workspace",
-  "Welcome to {{name}}": "Welcome to {{name}}",
-  "Add files": "Add files",
-  "Mention a page": "Mention a page",
   "Start a new chat to see it here.": "Start a new chat to see it here.",
   "Summarize this page": "Summarize this page",
   "Toggle AI Chat": "Toggle AI Chat",
@@ -901,151 +880,5 @@
   "Try a different search term.": "Try a different search term.",
   "Try again": "Try again",
   "Untitled chat": "Untitled chat",
-  "What can I help you with?": "What can I help you with?",
-  "Are you sure you want to revoke this {{credential}}": "Are you sure you want to revoke this {{credential}}",
-  "Automatically provision users and groups from your identity provider via SCIM.": "Automatically provision users and groups from your identity provider via SCIM.",
-  "Configure your identity provider with this URL to provision users and groups.": "Configure your identity provider with this URL to provision users and groups.",
-  "Create {{credential}}": "Create {{credential}}",
-  "{{credential}} created": "{{credential}} created",
-  "{{credential}} created successfully": "{{credential}} created successfully",
-  "Created by": "Created by",
-  "Custom": "Custom",
-  "Enable SCIM": "Enable SCIM",
-  "Enter a descriptive name": "Enter a descriptive name",
-  "I've saved my {{credential}}": "I've saved my {{credential}}",
-  "Important": "Important",
-  "Make sure to copy your {{credential}} now. You won't be able to see it again!": "Make sure to copy your {{credential}} now. You won't be able to see it again!",
-  "Never": "Never",
-  "Revoke {{credential}}": "Revoke {{credential}}",
-  "SCIM endpoint URL": "SCIM endpoint URL",
-  "SCIM provisioning": "SCIM provisioning",
-  "SCIM takes precedence over SSO group sync while enabled.": "SCIM takes precedence over SSO group sync while enabled.",
-  "You have reached the maximum of {{max}} SCIM tokens. Delete an existing token to create a new one.": "You have reached the maximum of {{max}} SCIM tokens. Delete an existing token to create a new one.",
-  "SCIM token": "SCIM token",
-  "SCIM tokens": "SCIM tokens",
-  "This action cannot be undone. Your identity provider will stop syncing immediately.": "This action cannot be undone. Your identity provider will stop syncing immediately.",
-  "Toggle SCIM provisioning": "Toggle SCIM provisioning",
-  "Token": "Token",
-  "Page menu": "Page menu",
-  "Expand": "Expand",
-  "Collapse": "Collapse",
-  "Comment menu": "Comment menu",
-  "Group menu": "Group menu",
-  "Show hidden breadcrumbs": "Show hidden breadcrumbs",
-  "Breadcrumbs": "Breadcrumbs",
-  "Page actions": "Page actions",
-  "Pick emoji": "Pick emoji",
-  "Template menu": "Template menu",
-  "Use": "Use",
-  "Use template": "Use template",
-  "Preview template: {{title}}": "Preview template: {{title}}",
-  "Use a template": "Use a template",
-  "Search templates...": "Search templates...",
-  "Search spaces...": "Search spaces...",
-  "No templates found": "No templates found",
-  "No spaces found": "No spaces found",
-  "Browse all templates": "Browse all templates",
-  "This space": "This space",
-  "All templates": "All templates",
-  "Global": "Global",
-  "New template": "New template",
-  "Edit template": "Edit template",
-  "Are you sure you want to delete this template?": "Are you sure you want to delete this template?",
-  "Template scope updated": "Template scope updated",
-  "Choose which space this template belongs to": "Choose which space this template belongs to",
-  "Scope": "Scope",
-  "Select scope": "Select scope",
-  "Title": "Title",
-  "Saving...": "Saving...",
-  "Saved": "Saved",
-  "Save failed. Retry": "Save failed. Retry",
-  "By {{name}}": "By {{name}}",
-  "Updated {{time}}": "Updated {{time}}",
-  "Choose destination": "Choose destination",
-  "Search pages and spaces...": "Search pages and spaces...",
-  "No results found": "No results found",
-  "You don't have permission to create pages here": "You don't have permission to create pages here",
-  "Chat menu": "Chat menu",
-  "API key menu": "API key menu",
-  "Jump to comment selection": "Jump to comment selection",
-  "Slash commands": "Slash commands",
-  "Mention suggestions": "Mention suggestions",
-  "Link suggestions": "Link suggestions",
-  "Diagram editor": "Diagram editor",
-  "Add comment": "Add comment",
-  "Find and replace": "Find and replace",
-  "Main navigation": "Main navigation",
-  "Space navigation": "Space navigation",
-  "Settings navigation": "Settings navigation",
-  "AI navigation": "AI navigation",
-  "Breadcrumb": "Breadcrumb",
-  "Synced block": "Synced block",
-  "Create a block that stays in sync across pages.": "Create a block that stays in sync across pages.",
-  "Editing original": "Editing original",
-  "Copy synced block": "Copy synced block",
-  "Unsync": "Unsync",
-  "Delete synced block": "Delete synced block",
-  "Synced to {{count}} other page_one": "Synced to {{count}} other page",
-  "Synced to {{count}} other page_other": "Synced to {{count}} other pages",
-  "ORIGINAL": "ORIGINAL",
-  "THIS PAGE": "THIS PAGE",
-  "No pages": "No pages",
-  "The original synced block no longer exists": "The original synced block no longer exists",
-  "You don't have access to this synced block": "You don't have access to this synced block",
-  "Failed to load this synced block": "Failed to load this synced block",
-  "Fixed editor toolbar": "Fixed editor toolbar",
-  "Show a formatting toolbar above the editor with quick access to common actions.": "Show a formatting toolbar above the editor with quick access to common actions.",
-  "Toggle fixed editor toolbar": "Toggle fixed editor toolbar",
-  "Normal text": "Normal text",
-  "More inline formatting": "More inline formatting",
-  "Subscript": "Subscript",
-  "Superscript": "Superscript",
-  "Inline code": "Inline code",
-  "Insert media": "Insert media",
-  "Mention": "Mention",
-  "Emoji": "Emoji",
-  "Columns": "Columns",
-  "More inserts": "More inserts",
-  "Embeds": "Embeds",
-  "Diagrams": "Diagrams",
-  "Advanced": "Advanced",
-  "Utility": "Utility",
-  "Decrease indent": "Decrease indent",
-  "Increase indent": "Increase indent",
-  "Clear formatting": "Clear formatting",
-  "Code block": "Code block",
-  "Experimental": "Experimental",
-  "Strikethrough": "Strikethrough",
-  "Undo": "Undo",
-  "Redo": "Redo",
-  "Backlinks": "Backlinks",
-  "Last updated by": "Last updated by",
-  "Last updated": "Last updated",
-  "Stats": "Stats",
-  "Word count": "Word count",
-  "Characters": "Characters",
-  "Incoming links": "Incoming links",
-  "Outgoing links": "Outgoing links",
-  "Incoming links ({{count}})": "Incoming links ({{count}})",
-  "Outgoing links ({{count}})": "Outgoing links ({{count}})",
-  "No pages link here yet.": "No pages link here yet.",
-  "This page doesn't link to other pages yet.": "This page doesn't link to other pages yet.",
-  "Verified until {{date}}": "Verified until {{date}}",
-  "Labels": "Labels",
-  "Add label": "Add label",
-  "No labels yet": "No labels yet",
-  "Already added": "Already added",
-  "Invalid label name": "Invalid label name",
-  "No matches": "No matches",
-  "Search or create…": "Search or create…",
-  "Remove label {{name}}": "Remove label {{name}}",
-  "Failed to add label": "Failed to add label",
-  "Failed to remove label": "Failed to remove label",
-  "No pages with this label": "No pages with this label",
-  "Pages tagged with this label will appear here.": "Pages tagged with this label will appear here.",
-  "No pages match your search.": "No pages match your search.",
-  "Updated {{date}}": "Updated {{date}}",
-  "Cell actions": "Cell actions",
-  "Column actions": "Column actions",
-  "Row actions": "Row actions"
+  "What can I help you with?": "What can I help you with?"
 }

apps/client/src/App.tsx

@@ -38,6 +38,7 @@ 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";
 import AiSettings from "@/ee/ai/pages/ai-settings.tsx";
+import BasePage from "@/pages/base/base-page.tsx";
 import AuditLogs from "@/ee/audit/pages/audit-logs.tsx";
 import VerifiedPages from "@/ee/page-verification/pages/verified-pages.tsx";
 import TemplateList from "@/ee/template/pages/template-list";
@@ -45,7 +46,6 @@ import TemplateEditor from "@/ee/template/pages/template-editor";
 import FavoritesPage from "@/pages/favorites/favorites-page";
 import AiChat from "@/ee/ai-chat/pages/ai-chat.tsx";
 import VerifyEmail from "@/ee/pages/verify-email.tsx";
-import LabelPage from "@/pages/label/label-page";
 
 export default function App() {
   const { t } = useTranslation();
@@ -93,7 +93,6 @@ export default function App() {
           <Route path={"/ai/chat/:chatId"} element={<AiChat />} />
           <Route path={"/spaces"} element={<SpacesPage />} />
           <Route path={"/favorites"} element={<FavoritesPage />} />
-          <Route path={"/labels/:labelName"} element={<LabelPage />} />
           <Route path={"/templates"} element={<TemplateList />} />
           <Route
             path={"/templates/:templateId"}
@@ -106,6 +105,8 @@ export default function App() {
             element={<Page />}
           />
 
+          <Route path={"/base/:baseId"} element={<BasePage />} />
+
           <Route path={"/settings"}>
             <Route path={"account/profile"} element={<AccountSettings />} />
             <Route

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -38,16 +38,6 @@
             color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
         }
     }
-
-    &[data-disabled] {
-        cursor: not-allowed;
-        opacity: 0.5;
-
-        @mixin hover {
-            background-color: transparent;
-            color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
-        }
-    }
 }
 
 .linkIcon {
@@ -60,7 +50,7 @@
 .sectionHeader {
     padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
     font-size: var(--mantine-font-size-xs);
-    color: var(--mantine-color-dimmed);
+    color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-3));
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.5px;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,4 +1,4 @@
-import React, { ReactNode, useEffect, useState } from "react";
+import React, { ReactNode, useState } from "react";
 import {
   ActionIcon,
   Popover,
@@ -7,24 +7,9 @@ import {
 } from "@mantine/core";
 import { useClickOutside, useDisclosure, useWindowEvent } from "@mantine/hooks";
 import { Suspense } from "react";
+const Picker = React.lazy(() => import("@emoji-mart/react"));
 import { useTranslation } from "react-i18next";
 
-// Load the picker module AND the emoji data in parallel inside the lazy
-// resolution, then bind the data into the component. React.lazy only finishes
-// suspending once both are in memory, so the Suspense boundary hides the
-// Remove button until the Picker can render with real content.
-const Picker = React.lazy(async () => {
-  const [pickerModule, dataModule] = await Promise.all([
-    import("@slidoapp/emoji-mart-react"),
-    import("@slidoapp/emoji-mart-data"),
-  ]);
-  const PickerComp = pickerModule.default;
-  const data = dataModule.default;
-  return {
-    default: (props: any) => <PickerComp {...props} data={data} />,
-  };
-});
-
 export interface EmojiPickerInterface {
   onEmojiSelect: (emoji: any) => void;
   icon: ReactNode;
@@ -34,7 +19,6 @@ export interface EmojiPickerInterface {
     size?: string;
     variant?: string;
     c?: string;
-    tabIndex?: number;
   };
 }
 
@@ -66,38 +50,6 @@ function EmojiPicker({
     }
   });
 
-  // emoji-mart's built-in autoFocus calls .focus() without preventScroll, which
-  // makes the browser scroll every scrollable ancestor of the search input to
-  // bring it on screen — including the page editor's scroll container, so the
-  // page jumps to the top whenever the picker is opened from a scrolled-down
-  // position. The search input lives inside the <em-emoji-picker> custom
-  // element's shadow root, so we poll for it after the dropdown mounts and
-  // focus it ourselves with preventScroll.
-  useEffect(() => {
-    if (!opened || !dropdown) return;
-    let cancelled = false;
-    let rafId = 0;
-    const tryFocus = (attempts: number) => {
-      if (cancelled) return;
-      const pickerEl = dropdown.querySelector("em-emoji-picker");
-      const input = pickerEl?.shadowRoot?.querySelector<HTMLInputElement>(
-        'input[type="search"]',
-      );
-      if (input) {
-        input.focus({ preventScroll: true });
-        return;
-      }
-      if (attempts < 60) {
-        rafId = requestAnimationFrame(() => tryFocus(attempts + 1));
-      }
-    };
-    rafId = requestAnimationFrame(() => tryFocus(0));
-    return () => {
-      cancelled = true;
-      cancelAnimationFrame(rafId);
-    };
-  }, [opened, dropdown]);
-
   const handleEmojiSelect = (emoji) => {
     onEmojiSelect(emoji);
     handlers.close();
@@ -122,11 +74,7 @@ function EmojiPicker({
           c={actionIconProps?.c || "gray"} 
           variant={actionIconProps?.variant || "transparent"} 
           size={actionIconProps?.size}
-          tabIndex={actionIconProps?.tabIndex}
           onClick={handlers.toggle}
-          aria-label={t("Pick emoji")}
-          aria-haspopup="dialog"
-          aria-expanded={opened}
         >
           {icon}
         </ActionIcon>
@@ -134,6 +82,7 @@ function EmojiPicker({
       <Suspense fallback={null}>
         <Popover.Dropdown bg="000" style={{ border: "none" }} ref={setDropdown}>
           <Picker
+            data={async () => (await import("@emoji-mart/data")).default}
             onEmojiSelect={handleEmojiSelect}
             perLine={8}
             skinTonePosition="search"

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

apps/client/src/ee/features.ts

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,15 @@
+import { atom } from "jotai";
+import { EditingCell } from "@/features/base/types/base.types";
+
+export const activeViewIdAtom = atom<string | null>(null);
+
+export const editingCellAtom = atom<EditingCell>(null);
+
+export const activePropertyMenuAtom = atom<string | null>(null);
+
+export const propertyMenuDirtyAtom = atom<boolean>(false);
+
+export const propertyMenuCloseRequestAtom = atom<number>(0);
+
+export const selectedRowIdsAtom = atom<Set<string>>(new Set<string>());
+export const lastToggledRowIndexAtom = atom<number | null>(null);

apps/client/src/features/base/components/base-table-skeleton.tsx

@@ -0,0 +1,84 @@
+import { Skeleton } from "@mantine/core";
+import gridClasses from "@/features/base/styles/grid.module.css";
+import classes from "@/features/base/styles/base-table-skeleton.module.css";
+
+const ROW_NUMBER_WIDTH = 64;
+const COLUMN_WIDTH = 180;
+const COLUMN_COUNT = 6;
+const ROW_COUNT = 10;
+
+// Deterministic per-cell widths so the skeleton doesn't flicker between
+// renders. Values are rough normal distribution around 55-85 % of cell.
+const CELL_WIDTH_RATIOS = [0.78, 0.62, 0.84, 0.55, 0.71, 0.66];
+const HEADER_WIDTH_RATIOS = [0.42, 0.58, 0.5, 0.64, 0.46, 0.54];
+
+export function BaseTableSkeleton() {
+  const gridTemplateColumns = [
+    `${ROW_NUMBER_WIDTH}px`,
+    ...Array.from({ length: COLUMN_COUNT }, () => `${COLUMN_WIDTH}px`),
+  ].join(" ");
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
+      <div className={classes.toolbar}>
+        <div className={classes.toolbarTabs}>
+          <Skeleton height={22} width={44} radius="sm" />
+          <Skeleton height={22} width={64} radius="sm" />
+          <Skeleton height={22} width={48} radius="sm" />
+        </div>
+        <div className={classes.toolbarActions}>
+          <Skeleton height={22} width={22} circle />
+          <Skeleton height={22} width={22} circle />
+          <Skeleton height={22} width={22} circle />
+          <Skeleton height={22} width={22} circle />
+        </div>
+      </div>
+
+      <div className={classes.gridWrapper}>
+        <div className={classes.grid} style={{ gridTemplateColumns }}>
+          <div className={gridClasses.headerCell}>
+            <div className={classes.headerCellInner}>
+              <Skeleton height={14} width={14} circle />
+            </div>
+          </div>
+          {Array.from({ length: COLUMN_COUNT }).map((_, colIndex) => (
+            <div key={`h-${colIndex}`} className={gridClasses.headerCell}>
+              <div className={classes.headerCellInner}>
+                <Skeleton height={14} width={14} circle />
+                <Skeleton
+                  height={10}
+                  width={`${HEADER_WIDTH_RATIOS[colIndex] * 100}%`}
+                  radius="sm"
+                />
+              </div>
+            </div>
+          ))}
+
+          {Array.from({ length: ROW_COUNT }).map((_, rowIndex) => (
+            <div key={`row-${rowIndex}`} style={{ display: "contents" }}>
+              <div className={gridClasses.cell}>
+                <div className={classes.cellInner}>
+                  <Skeleton height={10} width={18} radius="sm" />
+                </div>
+              </div>
+              {Array.from({ length: COLUMN_COUNT }).map((_, colIndex) => (
+                <div
+                  key={`cell-${rowIndex}-${colIndex}`}
+                  className={gridClasses.cell}
+                >
+                  <div className={classes.cellInner}>
+                    <Skeleton
+                      height={10}
+                      width={`${CELL_WIDTH_RATIOS[(rowIndex + colIndex) % CELL_WIDTH_RATIOS.length] * 100}%`}
+                      radius="sm"
+                    />
+                  </div>
+                </div>
+              ))}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

apps/client/src/features/base/components/base-table.tsx

@@ -0,0 +1,216 @@
+import { useCallback, useEffect, useMemo } from "react";
+import { Text, Stack } from "@mantine/core";
+import { useAtom } from "jotai";
+import { IconDatabase } from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+import { arrayMove } from "@dnd-kit/sortable";
+import { generateJitteredKeyBetween } from "fractional-indexing-jittered";
+import { useBaseQuery } from "@/features/base/queries/base-query";
+import { useBaseSocket } from "@/features/base/hooks/use-base-socket";
+import {
+  useBaseRowsQuery,
+  flattenRows,
+} from "@/features/base/queries/base-row-query";
+import { useUpdateRowMutation } from "@/features/base/queries/base-row-query";
+import { useCreateRowMutation } from "@/features/base/queries/base-row-query";
+import { useReorderRowMutation } from "@/features/base/queries/base-row-query";
+import { useCreateViewMutation } from "@/features/base/queries/base-view-query";
+import { activeViewIdAtom } from "@/features/base/atoms/base-atoms";
+import { useBaseTable } from "@/features/base/hooks/use-base-table";
+import { useRowSelection } from "@/features/base/hooks/use-row-selection";
+import { GridContainer } from "@/features/base/components/grid/grid-container";
+import { BaseToolbar } from "@/features/base/components/base-toolbar";
+import { BaseTableSkeleton } from "@/features/base/components/base-table-skeleton";
+import classes from "@/features/base/styles/grid.module.css";
+
+type BaseTableProps = {
+  baseId: string;
+};
+
+export function BaseTable({ baseId }: BaseTableProps) {
+  const { t } = useTranslation();
+  // Subscribe to the base's realtime room so other clients' edits,
+  // schema changes, and async-job completions reconcile into our cache.
+  useBaseSocket(baseId);
+  const { data: base, isLoading: baseLoading, error: baseError } = useBaseQuery(baseId);
+
+  const [activeViewId, setActiveViewId] = useAtom(activeViewIdAtom) as unknown as [string | null, (val: string | null) => void];
+
+  const views = base?.views ?? [];
+  const activeView = useMemo(() => {
+    if (!views.length) return undefined;
+    return views.find((v) => v.id === activeViewId) ?? views[0];
+  }, [views, activeViewId]);
+
+  const activeFilter = activeView?.config?.filter;
+  const activeSorts = activeView?.config?.sorts;
+  // Hold the rows query until `base` has loaded. Otherwise the query
+  // fires once with `activeFilter` / `activeSorts` still undefined
+  // (a "bland" list request), then fires a second time as soon as the
+  // active view's config resolves — doubling network traffic on every
+  // base open for any view that has sort or filter.
+  const { data: rowsData, isLoading: rowsLoading, fetchNextPage, hasNextPage, isFetchingNextPage } =
+    useBaseRowsQuery(base ? baseId : undefined, activeFilter, activeSorts);
+
+  const updateRowMutation = useUpdateRowMutation();
+  const createRowMutation = useCreateRowMutation();
+  const reorderRowMutation = useReorderRowMutation();
+  const createViewMutation = useCreateViewMutation();
+
+  useEffect(() => {
+    if (activeView && activeViewId !== activeView.id) {
+      setActiveViewId(activeView.id);
+    }
+  }, [activeView, activeViewId, setActiveViewId]);
+
+  const { clear: clearSelection } = useRowSelection();
+  useEffect(() => {
+    clearSelection();
+  }, [baseId, activeView?.id, clearSelection]);
+
+  const rows = useMemo(() => {
+    const flat = flattenRows(rowsData);
+    // When a sort is active, the server returns rows in the requested
+    // sort order via keyset pagination. Re-sorting by `position` on the
+    // client would override that with fractional-index order — visibly
+    // breaking the sort as more pages load. Only apply the position
+    // sort when no view sort is active (where it keeps
+    // optimistically-created and ws-pushed rows in place without a
+    // refetch).
+    if (activeSorts && activeSorts.length > 0) {
+      return flat;
+    }
+    return flat.sort((a, b) =>
+      a.position < b.position ? -1 : a.position > b.position ? 1 : 0,
+    );
+  }, [rowsData, activeSorts]);
+
+  const { table, persistViewConfig } = useBaseTable(base, rows, activeView);
+
+  const handleCellUpdate = useCallback(
+    (rowId: string, propertyId: string, value: unknown) => {
+      updateRowMutation.mutate({
+        rowId,
+        baseId,
+        cells: { [propertyId]: value },
+      });
+    },
+    [baseId, updateRowMutation],
+  );
+
+  const handleAddRow = useCallback(() => {
+    createRowMutation.mutate({ baseId });
+  }, [baseId, createRowMutation]);
+
+  const handleViewChange = useCallback(
+    (viewId: string) => {
+      setActiveViewId(viewId);
+    },
+    [setActiveViewId],
+  );
+
+  const handleAddView = useCallback(() => {
+    createViewMutation.mutate({
+      baseId,
+      name: t("New view"),
+      type: "table",
+    });
+  }, [baseId, createViewMutation, t]);
+
+  const handleColumnReorder = useCallback(
+    (activeId: string, overId: string) => {
+      const currentOrder = table.getState().columnOrder;
+      const oldIndex = currentOrder.indexOf(activeId);
+      const newIndex = currentOrder.indexOf(overId);
+      if (oldIndex === -1 || newIndex === -1) return;
+
+      const newOrder = arrayMove(currentOrder, oldIndex, newIndex);
+      table.setColumnOrder(newOrder);
+      persistViewConfig();
+    },
+    [table, persistViewConfig],
+  );
+
+  const handleResizeEnd = useCallback(() => {
+    persistViewConfig();
+  }, [persistViewConfig]);
+
+  const handleRowReorder = useCallback(
+    (rowId: string, targetRowId: string, dropPosition: "above" | "below") => {
+      const remainingRows = rows.filter((r) => r.id !== rowId);
+      const targetIndex = remainingRows.findIndex((r) => r.id === targetRowId);
+      if (targetIndex === -1) return;
+
+      let lowerPos: string | null = null;
+      let upperPos: string | null = null;
+
+      if (dropPosition === "above") {
+        lowerPos = targetIndex > 0 ? remainingRows[targetIndex - 1]?.position : null;
+        upperPos = remainingRows[targetIndex]?.position ?? null;
+      } else {
+        lowerPos = remainingRows[targetIndex]?.position ?? null;
+        upperPos = targetIndex < remainingRows.length - 1 ? remainingRows[targetIndex + 1]?.position : null;
+      }
+
+      try {
+        let newPosition: string;
+        if (lowerPos && upperPos && lowerPos === upperPos) {
+          newPosition = generateJitteredKeyBetween(lowerPos, null);
+        } else {
+          newPosition = generateJitteredKeyBetween(lowerPos, upperPos);
+        }
+
+        reorderRowMutation.mutate({
+          rowId,
+          baseId,
+          position: newPosition,
+        });
+      } catch {
+        // Position computation failed — skip silently
+      }
+    },
+    [rows, baseId, reorderRowMutation],
+  );
+
+  if (baseLoading || rowsLoading) {
+    return <BaseTableSkeleton />;
+  }
+
+  if (baseError) {
+    return (
+      <Stack align="center" gap="sm" p="xl">
+        <IconDatabase size={40} color="var(--mantine-color-gray-5)" />
+        <Text c="dimmed">{t("Failed to load base")}</Text>
+      </Stack>
+    );
+  }
+
+  if (!base) return null;
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
+      <BaseToolbar
+        base={base}
+        activeView={activeView}
+        views={views}
+        table={table}
+        onViewChange={handleViewChange}
+        onAddView={handleAddView}
+        onPersistViewConfig={persistViewConfig}
+      />
+      <GridContainer
+        table={table}
+        properties={base.properties}
+        onCellUpdate={handleCellUpdate}
+        onAddRow={handleAddRow}
+        baseId={baseId}
+        onColumnReorder={handleColumnReorder}
+        onResizeEnd={handleResizeEnd}
+        onRowReorder={handleRowReorder}
+        hasNextPage={hasNextPage}
+        isFetchingNextPage={isFetchingNextPage}
+        onFetchNextPage={fetchNextPage}
+      />
+    </div>
+  );
+}

apps/client/src/features/base/components/base-toolbar.tsx

@@ -0,0 +1,310 @@
+import { useEffect, useRef, useState, useCallback, useMemo } from "react";
+import { ActionIcon, Tooltip, Badge } from "@mantine/core";
+import { Table } from "@tanstack/react-table";
+import {
+  IconSortAscending,
+  IconFilter,
+  IconEye,
+  IconDownload,
+} from "@tabler/icons-react";
+import { notifications } from "@mantine/notifications";
+import {
+  IBase,
+  IBaseRow,
+  IBaseView,
+  ViewSortConfig,
+  FilterCondition,
+  FilterGroup,
+} from "@/features/base/types/base.types";
+import { useUpdateViewMutation } from "@/features/base/queries/base-view-query";
+import { buildViewConfigFromTable } from "@/features/base/hooks/use-base-table";
+import { exportBaseToCsv } from "@/features/base/services/base-service";
+import { ViewTabs } from "@/features/base/components/views/view-tabs";
+import { ViewSortConfigPopover } from "@/features/base/components/views/view-sort-config";
+import { ViewFilterConfigPopover } from "@/features/base/components/views/view-filter-config";
+import { ViewFieldVisibility } from "@/features/base/components/views/view-field-visibility";
+import { useTranslation } from "react-i18next";
+import classes from "@/features/base/styles/grid.module.css";
+
+type BaseToolbarProps = {
+  base: IBase;
+  activeView: IBaseView | undefined;
+  views: IBaseView[];
+  table: Table<IBaseRow>;
+  onViewChange: (viewId: string) => void;
+  onAddView?: () => void;
+  onPersistViewConfig: () => void;
+};
+
+export function BaseToolbar({
+  base,
+  activeView,
+  views,
+  table,
+  onViewChange,
+  onAddView,
+  onPersistViewConfig,
+}: BaseToolbarProps) {
+  const { t } = useTranslation();
+  const [sortOpened, setSortOpened] = useState(false);
+  const [filterOpened, setFilterOpened] = useState(false);
+  const [fieldsOpened, setFieldsOpened] = useState(false);
+  const [exporting, setExporting] = useState(false);
+  const toolbarRightRef = useRef<HTMLDivElement>(null);
+
+  // Mantine `<Popover>`'s built-in dismiss handlers don't fire reliably
+  // for the toolbar popovers (same issue that drove the property menu to
+  // use custom listeners in `grid-container.tsx`). Close any open toolbar
+  // popover on outside mousedown AND on ESC.
+  useEffect(() => {
+    if (!sortOpened && !filterOpened && !fieldsOpened) return;
+    const closeAll = () => {
+      setSortOpened(false);
+      setFilterOpened(false);
+      setFieldsOpened(false);
+    };
+    const mouseHandler = (e: MouseEvent) => {
+      const target = e.target as HTMLElement | null;
+      if (!target) return;
+      if (toolbarRightRef.current?.contains(target)) return;
+      // Ignore clicks that land inside any Mantine popover dropdown
+      // (role=dialog), any Select/Combobox dropdown (role=listbox, the
+      // container; option elements have role=option), or anything
+      // rendered into Mantine's shared portal node. Without these, a
+      // nested Select inside the popover would close the parent.
+      if (target.closest('[role="dialog"]')) return;
+      if (target.closest('[role="listbox"]')) return;
+      if (target.closest('[role="option"]')) return;
+      if (target.closest("[data-mantine-shared-portal-node]")) return;
+      closeAll();
+    };
+    const keyHandler = (e: KeyboardEvent) => {
+      if (e.key === "Escape") closeAll();
+    };
+    const id = setTimeout(() => {
+      document.addEventListener("mousedown", mouseHandler);
+    }, 0);
+    document.addEventListener("keydown", keyHandler);
+    return () => {
+      clearTimeout(id);
+      document.removeEventListener("mousedown", mouseHandler);
+      document.removeEventListener("keydown", keyHandler);
+    };
+  }, [sortOpened, filterOpened, fieldsOpened]);
+
+  const handleExport = useCallback(async () => {
+    if (exporting) return;
+    setExporting(true);
+    try {
+      await exportBaseToCsv(base.id);
+    } catch (err) {
+      notifications.show({
+        color: "red",
+        message: t("Failed to export CSV"),
+      });
+    } finally {
+      setExporting(false);
+    }
+  }, [base.id, exporting, t]);
+
+  const openToolbar = useCallback((panel: "sort" | "filter" | "fields") => {
+    setSortOpened(panel === "sort" ? (v) => !v : false);
+    setFilterOpened(panel === "filter" ? (v) => !v : false);
+    setFieldsOpened(panel === "fields" ? (v) => !v : false);
+  }, []);
+
+  const updateViewMutation = useUpdateViewMutation();
+
+  const sorts = activeView?.config?.sorts ?? [];
+  // Stored view config uses the engine's filter tree. The popover edits
+  // an AND-only flat list; we unwrap the top-level group's children when
+  // reading and rewrap on save.
+  const conditions = useMemo<FilterCondition[]>(() => {
+    const filter = activeView?.config?.filter;
+    if (!filter || filter.op !== "and") return [];
+    return filter.children.filter(
+      (c): c is FilterCondition => !("children" in c),
+    );
+  }, [activeView?.config?.filter]);
+
+  const hiddenFieldCount = useMemo(() => {
+    const cols = table.getAllLeafColumns().filter((col) => col.id !== "__row_number");
+    return cols.filter((col) => col.getCanHide() && !col.getIsVisible()).length;
+  }, [table, table.getState().columnVisibility]);
+
+  const handleSortsChange = useCallback(
+    (newSorts: ViewSortConfig[]) => {
+      if (!activeView) return;
+      const config = buildViewConfigFromTable(table, activeView.config, {
+        sorts: newSorts,
+      });
+      updateViewMutation.mutate({
+        viewId: activeView.id,
+        baseId: base.id,
+        config,
+      });
+    },
+    [activeView, base.id, table, updateViewMutation],
+  );
+
+  const handleFiltersChange = useCallback(
+    (newConditions: FilterCondition[]) => {
+      if (!activeView) return;
+      const filter: FilterGroup | undefined =
+        newConditions.length > 0
+          ? { op: "and", children: newConditions }
+          : undefined;
+      // `filter: undefined` in overrides removes the filter key; the helper's
+      // spread-then-overrides order means `undefined` wins over any base filter.
+      const config = buildViewConfigFromTable(table, activeView.config, {
+        filter,
+      });
+      updateViewMutation.mutate({
+        viewId: activeView.id,
+        baseId: base.id,
+        config,
+      });
+    },
+    [activeView, base.id, table, updateViewMutation],
+  );
+
+  return (
+    <div className={classes.toolbar}>
+      <ViewTabs
+        views={views}
+        activeViewId={activeView?.id}
+        baseId={base.id}
+        onViewChange={onViewChange}
+        onAddView={onAddView}
+      />
+
+      <div className={classes.toolbarRight} ref={toolbarRightRef}>
+        <Tooltip label={t("Export CSV")}>
+          <ActionIcon
+            variant="subtle"
+            size="sm"
+            color="gray"
+            loading={exporting}
+            onClick={handleExport}
+          >
+            <IconDownload size={16} />
+          </ActionIcon>
+        </Tooltip>
+
+        <ViewFilterConfigPopover
+          opened={filterOpened}
+          onClose={() => setFilterOpened(false)}
+          conditions={conditions}
+          properties={base.properties}
+          onChange={handleFiltersChange}
+        >
+          <Tooltip label={t("Filter")}>
+            <ActionIcon
+              variant="subtle"
+              size="sm"
+              color={conditions.length > 0 ? "blue" : "gray"}
+              onClick={() => openToolbar("filter")}
+            >
+              <IconFilter size={16} />
+              {conditions.length > 0 && (
+                <Badge
+                  size="xs"
+                  circle
+                  color="blue"
+                  style={{
+                    position: "absolute",
+                    top: -2,
+                    right: -2,
+                    padding: 0,
+                    width: 14,
+                    height: 14,
+                    minWidth: 14,
+                    fontSize: 9,
+                  }}
+                >
+                  {conditions.length}
+                </Badge>
+              )}
+            </ActionIcon>
+          </Tooltip>
+        </ViewFilterConfigPopover>
+
+        <ViewSortConfigPopover
+          opened={sortOpened}
+          onClose={() => setSortOpened(false)}
+          sorts={sorts}
+          properties={base.properties}
+          onChange={handleSortsChange}
+        >
+          <Tooltip label={t("Sort")}>
+            <ActionIcon
+              variant="subtle"
+              size="sm"
+              color={sorts.length > 0 ? "blue" : "gray"}
+              onClick={() => openToolbar("sort")}
+            >
+              <IconSortAscending size={16} />
+              {sorts.length > 0 && (
+                <Badge
+                  size="xs"
+                  circle
+                  color="blue"
+                  style={{
+                    position: "absolute",
+                    top: -2,
+                    right: -2,
+                    padding: 0,
+                    width: 14,
+                    height: 14,
+                    minWidth: 14,
+                    fontSize: 9,
+                  }}
+                >
+                  {sorts.length}
+                </Badge>
+              )}
+            </ActionIcon>
+          </Tooltip>
+        </ViewSortConfigPopover>
+
+        <ViewFieldVisibility
+          opened={fieldsOpened}
+          onClose={() => setFieldsOpened(false)}
+          table={table}
+          properties={base.properties}
+          onPersist={onPersistViewConfig}
+        >
+          <Tooltip label={t("Hide fields")}>
+            <ActionIcon
+              variant="subtle"
+              size="sm"
+              color={hiddenFieldCount > 0 ? "blue" : "gray"}
+              onClick={() => openToolbar("fields")}
+            >
+              <IconEye size={16} />
+              {hiddenFieldCount > 0 && (
+                <Badge
+                  size="xs"
+                  circle
+                  color="blue"
+                  style={{
+                    position: "absolute",
+                    top: -2,
+                    right: -2,
+                    padding: 0,
+                    width: 14,
+                    height: 14,
+                    minWidth: 14,
+                    fontSize: 9,
+                  }}
+                >
+                  {hiddenFieldCount}
+                </Badge>
+              )}
+            </ActionIcon>
+          </Tooltip>
+        </ViewFieldVisibility>
+      </div>
+    </div>
+  );
+}

apps/client/src/features/base/components/cells/cell-checkbox.tsx

@@ -0,0 +1,36 @@
+import { useCallback } from "react";
+import { Checkbox } from "@mantine/core";
+import { IBaseProperty } from "@/features/base/types/base.types";
+import cellClasses from "@/features/base/styles/cells.module.css";
+
+type CellCheckboxProps = {
+  value: unknown;
+  property: IBaseProperty;
+  rowId: string;
+  isEditing: boolean;
+  onCommit: (value: unknown) => void;
+  onCancel: () => void;
+};
+
+export function CellCheckbox({
+  value,
+  onCommit,
+}: CellCheckboxProps) {
+  const checked = value === true;
+
+  const handleChange = useCallback(() => {
+    onCommit(!checked);
+  }, [checked, onCommit]);
+
+  return (
+    <div className={cellClasses.checkboxCell} onClick={handleChange}>
+      <Checkbox
+        checked={checked}
+        onChange={() => {}}
+        size="xs"
+        tabIndex={-1}
+        styles={{ input: { cursor: "pointer", pointerEvents: "none" } }}
+      />
+    </div>
+  );
+}

apps/client/src/features/base/components/cells/cell-created-at.tsx

@@ -0,0 +1,34 @@
+import { IBaseProperty } from "@/features/base/types/base.types";
+import cellClasses from "@/features/base/styles/cells.module.css";
+
+type CellCreatedAtProps = {
+  value: unknown;
+  property: IBaseProperty;
+  rowId: string;
+  isEditing: boolean;
+  onCommit: (value: unknown) => void;
+  onCancel: () => void;
+};
+
+function formatTimestamp(val: unknown): string {
+  if (typeof val !== "string" || !val) return "";
+  const date = new Date(val);
+  if (isNaN(date.getTime())) return "";
+  return date.toLocaleDateString(undefined, {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+  });
+}
+
+export function CellCreatedAt({ value }: CellCreatedAtProps) {
+  const formatted = formatTimestamp(value);
+
+  if (!formatted) {
+    return <span className={cellClasses.emptyValue} />;
+  }
+
+  return <span className={cellClasses.dateValue}>{formatted}</span>;
+}

apps/client/src/features/base/components/cells/cell-date.tsx

@@ -0,0 +1,141 @@
+import { useCallback } from "react";
+import { Popover } from "@mantine/core";
+import { DatePicker } from "@mantine/dates";
+import {
+  IBaseProperty,
+  DateTypeOptions,
+} from "@/features/base/types/base.types";
+import cellClasses from "@/features/base/styles/cells.module.css";
+
+type CellDateProps = {
+  value: unknown;
+  property: IBaseProperty;
+  rowId: string;
+  isEditing: boolean;
+  onCommit: (value: unknown) => void;
+  onCancel: () => void;
+};
+
+function formatDateDisplay(
+  dateStr: string | null | undefined,
+  options: DateTypeOptions | undefined,
+): string {
+  if (!dateStr) return "";
+  try {
+    const date = new Date(dateStr);
+    if (isNaN(date.getTime())) return "";
+
+    const months = [
+      "Jan", "Feb", "Mar", "Apr", "May", "Jun",
+      "Jul", "Aug", "Sep", "Oct", "Nov", "Dec",
+    ];
+    const month = months[date.getMonth()];
+    const day = date.getDate();
+    const year = date.getFullYear();
+
+    let result = `${month} ${day}, ${year}`;
+
+    if (options?.includeTime) {
+      if (options.timeFormat === "24h") {
+        const hours = String(date.getHours()).padStart(2, "0");
+        const minutes = String(date.getMinutes()).padStart(2, "0");
+        result += ` ${hours}:${minutes}`;
+      } else {
+        let hours = date.getHours();
+        const ampm = hours >= 12 ? "PM" : "AM";
+        hours = hours % 12 || 12;
+        const minutes = String(date.getMinutes()).padStart(2, "0");
+        result += ` ${hours}:${minutes} ${ampm}`;
+      }
+    }
+
+    return result;
+  } catch {
+    return "";
+  }
+}
+
+function toISODateString(dateStr: string | null): string | null {
+  if (!dateStr) return null;
+  try {
+    const date = new Date(dateStr);
+    if (isNaN(date.getTime())) return null;
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, "0");
+    const day = String(date.getDate()).padStart(2, "0");
+    return `${year}-${month}-${day}`;
+  } catch {
+    return null;
+  }
+}
+
+export function CellDate({
+  value,
+  property,
+  isEditing,
+  onCommit,
+  onCancel,
+}: CellDateProps) {
+  const typeOptions = property.typeOptions as DateTypeOptions | undefined;
+  const dateStr = typeof value === "string" ? value : null;
+  const pickerValue = toISODateString(dateStr);
+
+  const handleChange = useCallback(
+    (selected: string | null) => {
+      if (selected) {
+        const date = new Date(selected);
+        onCommit(date.toISOString());
+      } else {
+        onCommit(null);
+      }
+    },
+    [onCommit],
+  );
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onCancel();
+      }
+    },
+    [onCancel],
+  );
+
+  if (isEditing) {
+    return (
+      <Popover
+        opened
+        onClose={onCancel}
+        position="bottom-start"
+        width="auto"
+        trapFocus
+      >
+        <Popover.Target>
+          <div style={{ width: "100%", height: "100%" }}>
+            <span className={cellClasses.dateValue}>
+              {formatDateDisplay(dateStr, typeOptions)}
+            </span>
+          </div>
+        </Popover.Target>
+        <Popover.Dropdown p="xs" onKeyDown={handleKeyDown}>
+          <DatePicker
+            value={pickerValue}
+            onChange={handleChange}
+            size="sm"
+          />
+        </Popover.Dropdown>
+      </Popover>
+    );
+  }
+
+  if (!dateStr) {
+    return <span className={cellClasses.emptyValue} />;
+  }
+
+  return (
+    <span className={cellClasses.dateValue}>
+      {formatDateDisplay(dateStr, typeOptions)}
+    </span>
+  );
+}

apps/client/src/features/base/components/cells/cell-email.tsx

@@ -0,0 +1,90 @@
+import { useState, useRef, useEffect, useCallback } from "react";
+import { IBaseProperty } from "@/features/base/types/base.types";
+import cellClasses from "@/features/base/styles/cells.module.css";
+
+type CellEmailProps = {
+  value: unknown;
+  property: IBaseProperty;
+  rowId: string;
+  isEditing: boolean;
+  onCommit: (value: unknown) => void;
+  onCancel: () => void;
+};
+
+export function CellEmail({
+  value,
+  isEditing,
+  onCommit,
+  onCancel,
+}: CellEmailProps) {
+  const displayValue = typeof value === "string" ? value : "";
+  const [draft, setDraft] = useState(displayValue);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const committedRef = useRef(false);
+
+  useEffect(() => {
+    if (isEditing) {
+      committedRef.current = false;
+      setDraft(displayValue);
+      requestAnimationFrame(() => {
+        inputRef.current?.focus();
+        inputRef.current?.select();
+      });
+    }
+  }, [isEditing, displayValue]);
+
+  const commitOnce = useCallback(
+    (val: unknown) => {
+      if (committedRef.current) return;
+      committedRef.current = true;
+      onCommit(val);
+    },
+    [onCommit],
+  );
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        commitOnce(draft || null);
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        onCancel();
+      }
+    },
+    [draft, commitOnce, onCancel],
+  );
+
+  const handleBlur = useCallback(() => {
+    commitOnce(draft || null);
+  }, [draft, commitOnce]);
+
+  if (isEditing) {
+    return (
+      <input
+        ref={inputRef}
+        type="email"
+        className={cellClasses.cellInput}
+        value={draft}
+        placeholder="email@example.com"
+        onChange={(e) => setDraft(e.target.value)}
+        onKeyDown={handleKeyDown}
+        onBlur={handleBlur}
+      />
+    );
+  }
+
+  if (!displayValue) {
+    return <span className={cellClasses.emptyValue} />;
+  }
+
+  return (
+    <a
+      className={cellClasses.emailLink}
+      href={`mailto:${displayValue}`}
+      onClick={(e) => e.stopPropagation()}
+    >
+      {displayValue}
+    </a>
+  );
+}

apps/client/src/features/base/components/cells/cell-file.tsx

@@ -0,0 +1,241 @@
+import { useState, useRef, useCallback } from "react";
+import { Popover, ActionIcon, Text, UnstyledButton } from "@mantine/core";
+import {
+  IconPaperclip,
+  IconUpload,
+  IconFile,
+  IconX,
+} from "@tabler/icons-react";
+import { IBaseProperty } from "@/features/base/types/base.types";
+import cellClasses from "@/features/base/styles/cells.module.css";
+import api from "@/lib/api-client";
+
+export type FileValue = {
+  id: string;
+  fileName: string;
+  mimeType?: string;
+  fileSize?: number;
+  filePath?: string;
+};
+
+type CellFileProps = {
+  value: unknown;
+  property: IBaseProperty;
+  rowId: string;
+  isEditing: boolean;
+  onCommit: (value: unknown) => void;
+  onCancel: () => void;
+};
+
+function formatFileSize(bytes?: number): string {
+  if (!bytes) return "";
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+function parseFiles(value: unknown): FileValue[] {
+  if (!Array.isArray(value)) return [];
+  return value.filter(
+    (f): f is FileValue =>
+      f && typeof f === "object" && "id" in f && "fileName" in f,
+  );
+}
+
+export function CellFile({
+  value,
+  property,
+  isEditing,
+  onCommit,
+  onCancel,
+}: CellFileProps) {
+  const files = parseFiles(value);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [uploading, setUploading] = useState(false);
+
+  const handleRemove = useCallback(
+    (fileId: string) => {
+      const updated = files.filter((f) => f.id !== fileId);
+      onCommit(updated.length > 0 ? updated : null);
+    },
+    [files, onCommit],
+  );
+
+  const handleUpload = useCallback(
+    async (fileList: FileList | null) => {
+      if (!fileList || fileList.length === 0) return;
+      setUploading(true);
+
+      const newFiles: FileValue[] = [...files];
+
+      for (const file of Array.from(fileList)) {
+        try {
+          const formData = new FormData();
+          formData.append("file", file);
+          formData.append("baseId", property.baseId);
+
+          const res = await api.post<FileValue>(
+            "/bases/files/upload",
+            formData,
+            {
+              headers: { "Content-Type": "multipart/form-data" },
+            },
+          );
+
+          const attachment = res as unknown as FileValue;
+          newFiles.push({
+            id: attachment.id,
+            fileName: attachment.fileName,
+            mimeType: attachment.mimeType,
+            fileSize: attachment.fileSize,
+            filePath: attachment.filePath,
+          });
+        } catch (err) {
+          console.error("File upload failed:", err);
+        }
+      }
+
+      setUploading(false);
+      onCommit(newFiles.length > 0 ? newFiles : null);
+    },
+    [files, property.baseId, onCommit],
+  );
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onCancel();
+      }
+    },
+    [onCancel],
+  );
+
+  const MAX_VISIBLE = 2;
+
+  if (isEditing) {
+    return (
+      <Popover
+        opened
+        onClose={onCancel}
+        position="bottom-start"
+        width={280}
+        trapFocus
+      >
+        <Popover.Target>
+          <div style={{ width: "100%", height: "100%" }}>
+            <FileList files={files} maxVisible={MAX_VISIBLE} />
+          </div>
+        </Popover.Target>
+        <Popover.Dropdown p={8} onKeyDown={handleKeyDown}>
+          {files.length === 0 && !uploading && (
+            <Text size="xs" c="dimmed" mb={8}>
+              No files attached
+            </Text>
+          )}
+
+          {files.map((file) => (
+            <div
+              key={file.id}
+              style={{
+                display: "flex",
+                alignItems: "center",
+                gap: 8,
+                padding: "4px 0",
+                borderBottom:
+                  "1px solid var(--mantine-color-default-border)",
+              }}
+            >
+              <IconFile
+                size={14}
+                style={{
+                  flexShrink: 0,
+                  color: "var(--mantine-color-gray-6)",
+                }}
+              />
+              <div style={{ flex: 1, minWidth: 0 }}>
+                <Text size="xs" truncate="end" fw={500}>
+                  {file.fileName}
+                </Text>
+                {file.fileSize != null && (
+                  <Text size="xs" c="dimmed">
+                    {formatFileSize(file.fileSize)}
+                  </Text>
+                )}
+              </div>
+              <ActionIcon
+                variant="subtle"
+                color="gray"
+                size="xs"
+                onClick={() => handleRemove(file.id)}
+              >
+                <IconX size={12} />
+              </ActionIcon>
+            </div>
+          ))}
+
+          <input
+            ref={fileInputRef}
+            type="file"
+            multiple
+            style={{ display: "none" }}
+            onChange={(e) => {
+              handleUpload(e.target.files);
+              e.target.value = "";
+            }}
+          />
+
+          <UnstyledButton
+            onClick={() => fileInputRef.current?.click()}
+            disabled={uploading}
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: 6,
+              padding: "6px 0",
+              marginTop: 4,
+              fontSize: "var(--mantine-font-size-xs)",
+              color: uploading
+                ? "var(--mantine-color-gray-5)"
+                : "var(--mantine-color-blue-6)",
+            }}
+          >
+            <IconUpload size={14} />
+            {uploading ? "Uploading..." : "Add file"}
+          </UnstyledButton>
+        </Popover.Dropdown>
+      </Popover>
+    );
+  }
+
+  if (files.length === 0) {
+    return <span className={cellClasses.emptyValue} />;
+  }
+
+  return <FileList files={files} maxVisible={MAX_VISIBLE} />;
+}
+
+function FileList({
+  files,
+  maxVisible,
+}: {
+  files: FileValue[];
+  maxVisible: number;
+}) {
+  const visible = files.slice(0, maxVisible);
+  const overflow = files.length - maxVisible;
+
+  return (
+    <div className={cellClasses.fileGroup}>
+      {visible.map((file) => (
+        <span key={file.id} className={cellClasses.fileBadge}>
+          <IconPaperclip size={12} />
+          {file.fileName}
+        </span>
+      ))}
+      {overflow > 0 && (
+        <span className={cellClasses.overflowCount}>+{overflow}</span>
+      )}
+    </div>
+  );
+}

apps/client/src/features/base/components/cells/cell-last-edited-at.tsx

@@ -0,0 +1,34 @@
+import { IBaseProperty } from "@/features/base/types/base.types";
+import cellClasses from "@/features/base/styles/cells.module.css";
+
+type CellLastEditedAtProps = {
+  value: unknown;
+  property: IBaseProperty;
+  rowId: string;
+  isEditing: boolean;
+  onCommit: (value: unknown) => void;
+  onCancel: () => void;
+};
+
+function formatTimestamp(val: unknown): string {
+  if (typeof val !== "string" || !val) return "";
+  const date = new Date(val);
+  if (isNaN(date.getTime())) return "";
+  return date.toLocaleDateString(undefined, {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+  });
+}
+
+export function CellLastEditedAt({ value }: CellLastEditedAtProps) {
+  const formatted = formatTimestamp(value);
+
+  if (!formatted) {
+    return <span className={cellClasses.emptyValue} />;
+  }
+
+  return <span className={cellClasses.dateValue}>{formatted}</span>;
+}

apps/client/src/features/base/components/cells/cell-last-edited-by.tsx

@@ -0,0 +1,53 @@
+import { useMemo } from "react";
+import { Group } from "@mantine/core";
+import { IBaseProperty } from "@/features/base/types/base.types";
+import { useWorkspaceMembersQuery } from "@/features/workspace/queries/workspace-query";
+import { CustomAvatar } from "@/components/ui/custom-avatar";
+import cellClasses from "@/features/base/styles/cells.module.css";
+
+type CellLastEditedByProps = {
+  value: unknown;
+  property: IBaseProperty;
+  rowId: string;
+  isEditing: boolean;
+  onCommit: (value: unknown) => void;
+  onCancel: () => void;
+};
+
+export function CellLastEditedBy({ value }: CellLastEditedByProps) {
+  const userId = typeof value === "string" ? value : null;
+
+  const { data: membersData } = useWorkspaceMembersQuery({ limit: 100 });
+
+  const user = useMemo(() => {
+    if (!userId || !membersData?.items) return null;
+    return membersData.items.find((u) => u.id === userId) ?? null;
+  }, [userId, membersData?.items]);
+
+  if (!userId) {
+    return <span className={cellClasses.emptyValue} />;
+  }
+
+  return (
+    <Group gap={6} wrap="nowrap" style={{ overflow: "hidden" }}>
+      <CustomAvatar
+        avatarUrl={user?.avatarUrl ?? ""}
+        name={user?.name ?? ""}
+        size={20}
+        radius="xl"
+      />
+      {user?.name && (
+        <span
+          style={{
+            fontSize: "var(--mantine-font-size-sm)",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+          }}
+        >
+          {user.name}
+        </span>
+      )}
+    </Group>
+  );
+}

apps/client/src/features/base/components/cells/cell-multi-select.tsx

@@ -0,0 +1,260 @@
+import { useState, useRef, useEffect, useCallback, useMemo } from "react";
+import { Popover, TextInput } from "@mantine/core";
+import clsx from "clsx";
+import {
+  IBaseProperty,
+  SelectTypeOptions,
+  Choice,
+} from "@/features/base/types/base.types";
+import { choiceColor } from "@/features/base/components/cells/choice-color";
+import { useUpdatePropertyMutation } from "@/features/base/queries/base-property-query";
+import { v7 as uuid7 } from "uuid";
+import cellClasses from "@/features/base/styles/cells.module.css";
+import { useListKeyboardNav } from "@/features/base/hooks/use-list-keyboard-nav";
+
+const CHOICE_COLORS = [
+  "gray", "red", "pink", "grape", "violet", "indigo",
+  "blue", "cyan", "teal", "green", "lime", "yellow", "orange",
+];
+
+type NavItem =
+  | { kind: "choice"; choice: Choice }
+  | { kind: "add" };
+
+type CellMultiSelectProps = {
+  value: unknown;
+  property: IBaseProperty;
+  rowId: string;
+  isEditing: boolean;
+  onCommit: (value: unknown) => void;
+  onCancel: () => void;
+};
+
+export function CellMultiSelect({
+  value,
+  property,
+  isEditing,
+  onCommit,
+  onCancel,
+}: CellMultiSelectProps) {
+  const typeOptions = property.typeOptions as SelectTypeOptions | undefined;
+  const choices = typeOptions?.choices ?? [];
+  const selectedIds = Array.isArray(value) ? (value as string[]) : [];
+  const selectedSet = new Set(selectedIds);
+
+  const selectedChoices = choices.filter((c) => selectedSet.has(c.id));
+
+  const [search, setSearch] = useState("");
+  const searchRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (isEditing) {
+      setSearch("");
+      requestAnimationFrame(() => searchRef.current?.focus());
+    }
+  }, [isEditing]);
+
+  const filteredChoices = search
+    ? choices.filter((c) => c.name.toLowerCase().includes(search.toLowerCase()))
+    : choices;
+
+  const handleToggle = useCallback(
+    (choice: Choice) => {
+      const newIds = selectedSet.has(choice.id)
+        ? selectedIds.filter((id) => id !== choice.id)
+        : [...selectedIds, choice.id];
+      onCommit(newIds);
+    },
+    [selectedIds, selectedSet, onCommit],
+  );
+
+  const updatePropertyMutation = useUpdatePropertyMutation();
+
+  const trimmedSearch = search.trim();
+  const hasExactMatch = useMemo(
+    () =>
+      trimmedSearch.length > 0 &&
+      choices.some((c) => c.name.toLowerCase() === trimmedSearch.toLowerCase()),
+    [choices, trimmedSearch],
+  );
+  const showAddOption = trimmedSearch.length > 0 && !hasExactMatch;
+
+  const addOptionColor = useMemo(
+    () => CHOICE_COLORS[choices.length % CHOICE_COLORS.length],
+    [choices.length],
+  );
+
+  const navItems = useMemo<NavItem[]>(
+    () => [
+      ...filteredChoices.map((c) => ({ kind: "choice" as const, choice: c })),
+      ...(showAddOption ? [{ kind: "add" as const }] : []),
+    ],
+    [filteredChoices, showAddOption],
+  );
+
+  const { activeIndex, setActiveIndex, handleNavKey, setOptionRef } =
+    useListKeyboardNav(navItems.length, [search, isEditing, showAddOption]);
+
+  const handleAddOption = useCallback(() => {
+    if (!trimmedSearch) return;
+    const newChoice: Choice = {
+      id: uuid7(),
+      name: trimmedSearch,
+      color: addOptionColor,
+    };
+    const newChoices = [...choices, newChoice];
+    updatePropertyMutation.mutate({
+      propertyId: property.id,
+      baseId: property.baseId,
+      typeOptions: {
+        ...typeOptions,
+        choices: newChoices,
+        choiceOrder: newChoices.map((c) => c.id),
+      },
+    });
+    onCommit([...selectedIds, newChoice.id]);
+    setSearch("");
+  }, [trimmedSearch, addOptionColor, choices, typeOptions, property, updatePropertyMutation, selectedIds, onCommit]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onCancel();
+        return;
+      }
+      if (handleNavKey(e)) return;
+      if (e.key === "Enter") {
+        if (activeIndex >= 0 && activeIndex < navItems.length) {
+          e.preventDefault();
+          const item = navItems[activeIndex];
+          if (item.kind === "choice") handleToggle(item.choice);
+          else handleAddOption();
+          return;
+        }
+        if (showAddOption) {
+          e.preventDefault();
+          handleAddOption();
+        }
+      }
+    },
+    [onCancel, handleNavKey, activeIndex, navItems, handleToggle, handleAddOption, showAddOption],
+  );
+
+  const MAX_VISIBLE = 3;
+
+  if (isEditing) {
+    const addOptionIdx = filteredChoices.length;
+    return (
+      <Popover
+        opened
+        onClose={onCancel}
+        position="bottom-start"
+        width={220}
+        trapFocus
+      >
+        <Popover.Target>
+          <div style={{ width: "100%", height: "100%" }}>
+            <BadgeList choices={selectedChoices} maxVisible={MAX_VISIBLE} />
+          </div>
+        </Popover.Target>
+        <Popover.Dropdown p={4}>
+          <TextInput
+            ref={searchRef}
+            size="xs"
+            placeholder="Search..."
+            value={search}
+            onChange={(e) => setSearch(e.currentTarget.value)}
+            onKeyDown={handleKeyDown}
+            mb={4}
+          />
+          <div className={cellClasses.selectDropdown}>
+            {filteredChoices.map((choice, idx) => {
+              const isSelected = selectedSet.has(choice.id);
+              return (
+                <div
+                  key={choice.id}
+                  ref={setOptionRef(idx)}
+                  className={clsx(
+                    cellClasses.selectOption,
+                    isSelected && cellClasses.selectOptionActive,
+                    idx === activeIndex && cellClasses.selectOptionKeyboardActive,
+                  )}
+                  onMouseEnter={() => setActiveIndex(idx)}
+                  onMouseDown={(e) => {
+                    // Keep focus on the search input so click doesn't blur + close popover.
+                    e.preventDefault();
+                  }}
+                  onClick={() => handleToggle(choice)}
+                >
+                  <span
+                    className={cellClasses.badge}
+                    style={choiceColor(choice.color)}
+                  >
+                    {choice.name}
+                  </span>
+                </div>
+              );
+            })}
+            {showAddOption && (
+              <div
+                ref={setOptionRef(addOptionIdx)}
+                className={clsx(
+                  cellClasses.addOptionRow,
+                  addOptionIdx === activeIndex && cellClasses.selectOptionKeyboardActive,
+                )}
+                onMouseEnter={() => setActiveIndex(addOptionIdx)}
+                onMouseDown={(e) => {
+                  e.preventDefault();
+                }}
+                onClick={handleAddOption}
+              >
+                <span className={cellClasses.addOptionLabel}>Add option:</span>
+                <span
+                  className={cellClasses.badge}
+                  style={choiceColor(addOptionColor)}
+                >
+                  {trimmedSearch}
+                </span>
+              </div>
+            )}
+          </div>
+        </Popover.Dropdown>
+      </Popover>
+    );
+  }
+
+  if (selectedChoices.length === 0) {
+    return <span className={cellClasses.emptyValue} />;
+  }
+
+  return <BadgeList choices={selectedChoices} maxVisible={MAX_VISIBLE} />;
+}
+
+function BadgeList({
+  choices,
+  maxVisible,
+}: {
+  choices: Choice[];
+  maxVisible: number;
+}) {
+  const visible = choices.slice(0, maxVisible);
+  const overflow = choices.length - maxVisible;
+
+  return (
+    <div className={cellClasses.badgeGroup}>
+      {visible.map((choice) => (
+        <span
+          key={choice.id}
+          className={cellClasses.badge}
+          style={choiceColor(choice.color)}
+        >
+          {choice.name}
+        </span>
+      ))}
+      {overflow > 0 && (
+        <span className={cellClasses.overflowCount}>+{overflow}</span>
+      )}
+    </div>
+  );
+}

apps/client/src/features/base/components/cells/cell-number.tsx

@@ -0,0 +1,122 @@
+import { useState, useRef, useEffect, useCallback } from "react";
+import {
+  IBaseProperty,
+  NumberTypeOptions,
+} from "@/features/base/types/base.types";
+import cellClasses from "@/features/base/styles/cells.module.css";
+
+type CellNumberProps = {
+  value: unknown;
+  property: IBaseProperty;
+  rowId: string;
+  isEditing: boolean;
+  onCommit: (value: unknown) => void;
+  onCancel: () => void;
+};
+
+function formatNumber(
+  val: number | null | undefined,
+  options: NumberTypeOptions | undefined,
+): string {
+  if (val == null) return "";
+  const precision = options?.precision ?? 0;
+  const format = options?.format ?? "plain";
+
+  switch (format) {
+    case "currency":
+      return `${options?.currencySymbol ?? "$"}${val.toFixed(precision)}`;
+    case "percent":
+      return `${val.toFixed(precision)}%`;
+    case "progress":
+      return `${Math.min(100, Math.max(0, val)).toFixed(0)}%`;
+    default:
+      return precision > 0 ? val.toFixed(precision) : String(val);
+  }
+}
+
+export function CellNumber({
+  value,
+  property,
+  isEditing,
+  onCommit,
+  onCancel,
+}: CellNumberProps) {
+  const numValue = typeof value === "number" ? value : null;
+  const typeOptions = property.typeOptions as NumberTypeOptions | undefined;
+  const [draft, setDraft] = useState(numValue != null ? String(numValue) : "");
+  const inputRef = useRef<HTMLInputElement>(null);
+  const committedRef = useRef(false);
+
+  useEffect(() => {
+    if (isEditing) {
+      committedRef.current = false;
+      setDraft(numValue != null ? String(numValue) : "");
+      requestAnimationFrame(() => {
+        inputRef.current?.focus();
+        inputRef.current?.select();
+      });
+    }
+  }, [isEditing, numValue]);
+
+  const parseDraft = useCallback(() => {
+    const parsed = draft === "" ? null : Number(draft);
+    return parsed != null && isNaN(parsed) ? null : parsed;
+  }, [draft]);
+
+  const commitOnce = useCallback(
+    (val: unknown) => {
+      if (committedRef.current) return;
+      committedRef.current = true;
+      onCommit(val);
+    },
+    [onCommit],
+  );
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        commitOnce(parseDraft());
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        onCancel();
+      }
+    },
+    [parseDraft, commitOnce, onCancel],
+  );
+
+  const handleBlur = useCallback(() => {
+    commitOnce(parseDraft());
+  }, [parseDraft, commitOnce]);
+
+  if (isEditing) {
+    return (
+      <input
+        ref={inputRef}
+        type="text"
+        inputMode="decimal"
+        className={cellClasses.cellInput}
+        style={{ textAlign: "right" }}
+        value={draft}
+        onChange={(e) => {
+          const v = e.target.value;
+          if (v === "" || v === "-" || /^-?\d*\.?\d*$/.test(v)) {
+            setDraft(v);
+          }
+        }}
+        onKeyDown={handleKeyDown}
+        onBlur={handleBlur}
+      />
+    );
+  }
+
+  if (numValue == null) {
+    return <span className={cellClasses.emptyValue} />;
+  }
+
+  return (
+    <span className={cellClasses.numberValue}>
+      {formatNumber(numValue, typeOptions)}
+    </span>
+  );
+}

apps/client/src/features/base/components/cells/cell-person.tsx

@@ -0,0 +1,263 @@
+import { useState, useRef, useEffect, useCallback, useMemo } from "react";
+import { Popover } from "@mantine/core";
+import { IconX } from "@tabler/icons-react";
+import clsx from "clsx";
+import {
+  IBaseProperty,
+  PersonTypeOptions,
+} from "@/features/base/types/base.types";
+import { useWorkspaceMembersQuery } from "@/features/workspace/queries/workspace-query";
+import { CustomAvatar } from "@/components/ui/custom-avatar";
+import cellClasses from "@/features/base/styles/cells.module.css";
+import { useListKeyboardNav } from "@/features/base/hooks/use-list-keyboard-nav";
+
+type CellPersonProps = {
+  value: unknown;
+  property: IBaseProperty;
+  rowId: string;
+  isEditing: boolean;
+  onCommit: (value: unknown) => void;
+  onCancel: () => void;
+};
+
+export function CellPerson({
+  value,
+  property,
+  isEditing,
+  onCommit,
+  onCancel,
+}: CellPersonProps) {
+  const allowMultiple =
+    (property.typeOptions as PersonTypeOptions)?.allowMultiple !== false;
+
+  const personIds = Array.isArray(value)
+    ? (value as string[])
+    : typeof value === "string"
+      ? [value]
+      : [];
+
+  const [search, setSearch] = useState("");
+  const searchRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (isEditing) {
+      setSearch("");
+      requestAnimationFrame(() => searchRef.current?.focus());
+    }
+  }, [isEditing]);
+
+  const { data: membersData } = useWorkspaceMembersQuery({ limit: 100 });
+  const members = membersData?.items ?? [];
+  const memberMap = useMemo(() => {
+    const map = new Map<string, (typeof members)[0]>();
+    for (const m of members) map.set(m.id, m);
+    return map;
+  }, [members]);
+
+  const filteredMembers = search
+    ? members.filter(
+        (m) =>
+          m.name.toLowerCase().includes(search.toLowerCase()) ||
+          (m.email && m.email.toLowerCase().includes(search.toLowerCase())),
+      )
+    : members;
+
+  const { activeIndex, setActiveIndex, handleNavKey, setOptionRef } =
+    useListKeyboardNav(filteredMembers.length, [search, isEditing]);
+
+  const handleSelect = useCallback(
+    (memberId: string) => {
+      if (allowMultiple) {
+        // Multi mode: toggle add/remove
+        if (personIds.includes(memberId)) {
+          const newIds = personIds.filter((id) => id !== memberId);
+          onCommit(newIds.length > 0 ? newIds : null);
+        } else {
+          onCommit([...personIds, memberId]);
+        }
+      } else {
+        // Single mode: replace or clear
+        if (personIds.includes(memberId)) {
+          onCommit(null);
+        } else {
+          onCommit(memberId);
+        }
+      }
+    },
+    [allowMultiple, personIds, onCommit],
+  );
+
+  const handleRemove = useCallback(
+    (memberId: string) => {
+      if (allowMultiple) {
+        const newIds = personIds.filter((id) => id !== memberId);
+        onCommit(newIds.length > 0 ? newIds : null);
+      } else {
+        onCommit(null);
+      }
+    },
+    [allowMultiple, personIds, onCommit],
+  );
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onCancel();
+        return;
+      }
+      if (handleNavKey(e)) return;
+      if (e.key === "Enter") {
+        if (activeIndex < 0 || activeIndex >= filteredMembers.length) return;
+        e.preventDefault();
+        handleSelect(filteredMembers[activeIndex].id);
+        return;
+      }
+      if (e.key === "Backspace" && search === "" && personIds.length > 0) {
+        e.preventDefault();
+        handleRemove(personIds[personIds.length - 1]);
+      }
+    },
+    [onCancel, handleNavKey, activeIndex, filteredMembers, handleSelect, search, personIds, handleRemove],
+  );
+
+  const selectedSet = new Set(personIds);
+
+  if (isEditing) {
+    return (
+      <Popover
+        opened
+        onClose={onCancel}
+        position="bottom-start"
+        width={300}
+        trapFocus
+      >
+        <Popover.Target>
+          <div style={{ width: "100%", height: "100%" }}>
+            <PersonReadList personIds={personIds} memberMap={memberMap} />
+          </div>
+        </Popover.Target>
+        <Popover.Dropdown p={0}>
+          {/* Tag input area */}
+          <div className={cellClasses.personTagArea}>
+            {personIds.map((id) => {
+              const member = memberMap.get(id);
+              const name = member?.name ?? id.substring(0, 8);
+              return (
+                <span key={id} className={cellClasses.personTag}>
+                  <CustomAvatar
+                    avatarUrl={member?.avatarUrl ?? ""}
+                    name={name}
+                    size={18}
+                    radius="xl"
+                  />
+                  <span className={cellClasses.personTagName}>{name}</span>
+                  <button
+                    type="button"
+                    className={cellClasses.personTagRemove}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handleRemove(id);
+                    }}
+                  >
+                    <IconX size={10} />
+                  </button>
+                </span>
+              );
+            })}
+            <input
+              ref={searchRef}
+              className={cellClasses.personTagInput}
+              placeholder={personIds.length === 0 ? "Search for a person..." : ""}
+              value={search}
+              onChange={(e) => setSearch(e.currentTarget.value)}
+              onKeyDown={handleKeyDown}
+            />
+          </div>
+
+          {/* Dropdown */}
+          <div className={cellClasses.personDropdownDivider} />
+          {allowMultiple && (
+            <div className={cellClasses.personDropdownHint}>
+              Select as many as you like
+            </div>
+          )}
+          <div className={cellClasses.selectDropdown}>
+            {filteredMembers.map((member, idx) => {
+              const isSelected = selectedSet.has(member.id);
+              return (
+                <div
+                  key={member.id}
+                  ref={setOptionRef(idx)}
+                  className={clsx(
+                    cellClasses.selectOption,
+                    isSelected && cellClasses.selectOptionActive,
+                    idx === activeIndex && cellClasses.selectOptionKeyboardActive,
+                  )}
+                  onMouseEnter={() => setActiveIndex(idx)}
+                  onMouseDown={(e) => {
+                    // Keep focus on the search input so click doesn't blur + close popover.
+                    e.preventDefault();
+                  }}
+                  onClick={() => handleSelect(member.id)}
+                >
+                  <CustomAvatar
+                    avatarUrl={member.avatarUrl}
+                    name={member.name}
+                    size={24}
+                    radius="xl"
+                  />
+                  <span className={cellClasses.personOptionName}>
+                    {member.name}
+                  </span>
+                </div>
+              );
+            })}
+            {filteredMembers.length === 0 && (
+              <div className={cellClasses.personDropdownHint}>
+                No members found
+              </div>
+            )}
+          </div>
+        </Popover.Dropdown>
+      </Popover>
+    );
+  }
+
+  if (personIds.length === 0) {
+    return <span className={cellClasses.emptyValue} />;
+  }
+
+  return <PersonReadList personIds={personIds} memberMap={memberMap} />;
+}
+
+function PersonReadList({
+  personIds,
+  memberMap,
+}: {
+  personIds: string[];
+  memberMap: Map<
+    string,
+    { id: string; name: string; email?: string; avatarUrl?: string }
+  >;
+}) {
+  return (
+    <div className={cellClasses.personGroup}>
+      {personIds.map((id) => {
+        const member = memberMap.get(id);
+        const name = member?.name ?? id.substring(0, 8);
+        return (
+          <div key={id} className={cellClasses.personRow}>
+            <CustomAvatar
+              avatarUrl={member?.avatarUrl ?? ""}
+              name={name}
+              size={20}
+              radius="xl"
+            />
+            <span className={cellClasses.personName}>{name}</span>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

apps/client/src/features/base/components/cells/cell-select.tsx

@@ -0,0 +1,242 @@
+import { useState, useRef, useEffect, useCallback, useMemo } from "react";
+import { Popover, TextInput } from "@mantine/core";
+import clsx from "clsx";
+import {
+  IBaseProperty,
+  SelectTypeOptions,
+  Choice,
+} from "@/features/base/types/base.types";
+import { choiceColor } from "@/features/base/components/cells/choice-color";
+import { useUpdatePropertyMutation } from "@/features/base/queries/base-property-query";
+import { v7 as uuid7 } from "uuid";
+import cellClasses from "@/features/base/styles/cells.module.css";
+import { useListKeyboardNav } from "@/features/base/hooks/use-list-keyboard-nav";
+
+const CHOICE_COLORS = [
+  "gray", "red", "pink", "grape", "violet", "indigo",
+  "blue", "cyan", "teal", "green", "lime", "yellow", "orange",
+];
+
+type NavItem =
+  | { kind: "choice"; choice: Choice }
+  | { kind: "add" };
+
+type CellSelectProps = {
+  value: unknown;
+  property: IBaseProperty;
+  rowId: string;
+  isEditing: boolean;
+  onCommit: (value: unknown) => void;
+  onCancel: () => void;
+};
+
+export function CellSelect({
+  value,
+  property,
+  isEditing,
+  onCommit,
+  onCancel,
+}: CellSelectProps) {
+  const typeOptions = property.typeOptions as SelectTypeOptions | undefined;
+  const choices = typeOptions?.choices ?? [];
+  const selectedId = typeof value === "string" ? value : null;
+  const selectedChoice = choices.find((c) => c.id === selectedId);
+
+  const [search, setSearch] = useState("");
+  const searchRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (isEditing) {
+      setSearch("");
+      requestAnimationFrame(() => searchRef.current?.focus());
+    }
+  }, [isEditing]);
+
+  const filteredChoices = search
+    ? choices.filter((c) =>
+        c.name.toLowerCase().includes(search.toLowerCase()),
+      )
+    : choices;
+
+  const handleSelect = useCallback(
+    (choice: Choice) => {
+      onCommit(choice.id === selectedId ? null : choice.id);
+    },
+    [selectedId, onCommit],
+  );
+
+  const updatePropertyMutation = useUpdatePropertyMutation();
+
+  const trimmedSearch = search.trim();
+  const hasExactMatch = useMemo(
+    () =>
+      trimmedSearch.length > 0 &&
+      choices.some((c) => c.name.toLowerCase() === trimmedSearch.toLowerCase()),
+    [choices, trimmedSearch],
+  );
+  const showAddOption = trimmedSearch.length > 0 && !hasExactMatch;
+
+  const addOptionColor = useMemo(
+    () => CHOICE_COLORS[choices.length % CHOICE_COLORS.length],
+    [choices.length],
+  );
+
+  const navItems = useMemo<NavItem[]>(
+    () => [
+      ...filteredChoices.map((c) => ({ kind: "choice" as const, choice: c })),
+      ...(showAddOption ? [{ kind: "add" as const }] : []),
+    ],
+    [filteredChoices, showAddOption],
+  );
+
+  const { activeIndex, setActiveIndex, handleNavKey, setOptionRef } =
+    useListKeyboardNav(navItems.length, [search, isEditing, showAddOption]);
+
+  const handleAddOption = useCallback(() => {
+    if (!trimmedSearch) return;
+    const newChoice: Choice = {
+      id: uuid7(),
+      name: trimmedSearch,
+      color: addOptionColor,
+    };
+    const newChoices = [...choices, newChoice];
+    updatePropertyMutation.mutate({
+      propertyId: property.id,
+      baseId: property.baseId,
+      typeOptions: {
+        ...typeOptions,
+        choices: newChoices,
+        choiceOrder: newChoices.map((c) => c.id),
+      },
+    });
+    onCommit(newChoice.id);
+  }, [trimmedSearch, addOptionColor, choices, typeOptions, property, updatePropertyMutation, onCommit]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onCancel();
+        return;
+      }
+      if (handleNavKey(e)) return;
+      if (e.key === "Enter") {
+        if (activeIndex >= 0 && activeIndex < navItems.length) {
+          e.preventDefault();
+          const item = navItems[activeIndex];
+          if (item.kind === "choice") handleSelect(item.choice);
+          else handleAddOption();
+          return;
+        }
+        if (showAddOption) {
+          e.preventDefault();
+          handleAddOption();
+        }
+      }
+    },
+    [onCancel, handleNavKey, activeIndex, navItems, handleSelect, handleAddOption, showAddOption],
+  );
+
+  if (isEditing) {
+    const addOptionIdx = filteredChoices.length;
+    return (
+      <Popover
+        opened
+        onClose={onCancel}
+        position="bottom-start"
+        width={220}
+        trapFocus
+      >
+        <Popover.Target>
+          <div style={{ width: "100%", height: "100%" }}>
+            {selectedChoice ? (
+              <span
+                className={cellClasses.badge}
+                style={choiceColor(selectedChoice.color)}
+              >
+                {selectedChoice.name}
+              </span>
+            ) : (
+              <span className={cellClasses.emptyValue} />
+            )}
+          </div>
+        </Popover.Target>
+        <Popover.Dropdown p={4}>
+          <TextInput
+            ref={searchRef}
+            size="xs"
+            placeholder="Search..."
+            value={search}
+            onChange={(e) => setSearch(e.currentTarget.value)}
+            onKeyDown={handleKeyDown}
+            mb={4}
+          />
+          <div className={cellClasses.selectDropdown}>
+            {filteredChoices.map((choice, idx) => {
+              const isSelected = choice.id === selectedId;
+              return (
+                <div
+                  key={choice.id}
+                  ref={setOptionRef(idx)}
+                  className={clsx(
+                    cellClasses.selectOption,
+                    isSelected && cellClasses.selectOptionActive,
+                    idx === activeIndex && cellClasses.selectOptionKeyboardActive,
+                  )}
+                  onMouseEnter={() => setActiveIndex(idx)}
+                  onMouseDown={(e) => {
+                    // Keep focus on the search input so click doesn't blur + close popover.
+                    e.preventDefault();
+                  }}
+                  onClick={() => handleSelect(choice)}
+                >
+                  <span
+                    className={cellClasses.badge}
+                    style={choiceColor(choice.color)}
+                  >
+                    {choice.name}
+                  </span>
+                </div>
+              );
+            })}
+            {showAddOption && (
+              <div
+                ref={setOptionRef(addOptionIdx)}
+                className={clsx(
+                  cellClasses.addOptionRow,
+                  addOptionIdx === activeIndex && cellClasses.selectOptionKeyboardActive,
+                )}
+                onMouseEnter={() => setActiveIndex(addOptionIdx)}
+                onMouseDown={(e) => {
+                  e.preventDefault();
+                }}
+                onClick={handleAddOption}
+              >
+                <span className={cellClasses.addOptionLabel}>Add option:</span>
+                <span
+                  className={cellClasses.badge}
+                  style={choiceColor(addOptionColor)}
+                >
+                  {trimmedSearch}
+                </span>
+              </div>
+            )}
+          </div>
+        </Popover.Dropdown>
+      </Popover>
+    );
+  }
+
+  if (!selectedChoice) {
+    return <span className={cellClasses.emptyValue} />;
+  }
+
+  return (
+    <span
+      className={cellClasses.badge}
+      style={choiceColor(selectedChoice.color)}
+    >
+      {selectedChoice.name}
+    </span>
+  );
+}

apps/client/src/features/base/components/cells/cell-status.tsx

@@ -0,0 +1,202 @@
+import { useState, useRef, useEffect, useCallback, useMemo } from "react";
+import { Popover, TextInput } from "@mantine/core";
+import {
+  IBaseProperty,
+  SelectTypeOptions,
+  Choice,
+} from "@/features/base/types/base.types";
+import { choiceColor } from "@/features/base/components/cells/choice-color";
+import cellClasses from "@/features/base/styles/cells.module.css";
+import clsx from "clsx";
+import { useListKeyboardNav } from "@/features/base/hooks/use-list-keyboard-nav";
+
+type CellStatusProps = {
+  value: unknown;
+  property: IBaseProperty;
+  rowId: string;
+  isEditing: boolean;
+  onCommit: (value: unknown) => void;
+  onCancel: () => void;
+};
+
+type CategoryGroup = {
+  label: string;
+  choices: Choice[];
+};
+
+const categoryLabels: Record<string, string> = {
+  todo: "To Do",
+  inProgress: "In Progress",
+  complete: "Complete",
+};
+
+export function CellStatus({
+  value,
+  property,
+  isEditing,
+  onCommit,
+  onCancel,
+}: CellStatusProps) {
+  const typeOptions = property.typeOptions as SelectTypeOptions | undefined;
+  const choices = typeOptions?.choices ?? [];
+  const selectedId = typeof value === "string" ? value : null;
+  const selectedChoice = choices.find((c) => c.id === selectedId);
+
+  const [search, setSearch] = useState("");
+  const searchRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (isEditing) {
+      setSearch("");
+      requestAnimationFrame(() => searchRef.current?.focus());
+    }
+  }, [isEditing]);
+
+  const groups = useMemo(() => {
+    const filtered = search
+      ? choices.filter((c) =>
+          c.name.toLowerCase().includes(search.toLowerCase()),
+        )
+      : choices;
+
+    const grouped: Record<string, Choice[]> = {};
+    for (const choice of filtered) {
+      const cat = choice.category ?? "todo";
+      if (!grouped[cat]) grouped[cat] = [];
+      grouped[cat].push(choice);
+    }
+
+    const result: CategoryGroup[] = [];
+    for (const key of ["todo", "inProgress", "complete"]) {
+      if (grouped[key]?.length) {
+        result.push({ label: categoryLabels[key] ?? key, choices: grouped[key] });
+      }
+    }
+    return result;
+  }, [choices, search]);
+
+  const flatChoices = useMemo(
+    () => groups.flatMap((g) => g.choices),
+    [groups],
+  );
+  const choiceIdxMap = useMemo(() => {
+    const m = new Map<string, number>();
+    flatChoices.forEach((c, i) => m.set(c.id, i));
+    return m;
+  }, [flatChoices]);
+
+  const { activeIndex, setActiveIndex, handleNavKey, setOptionRef } =
+    useListKeyboardNav(flatChoices.length, [search, isEditing]);
+
+  const handleSelect = useCallback(
+    (choice: Choice) => {
+      onCommit(choice.id === selectedId ? null : choice.id);
+    },
+    [selectedId, onCommit],
+  );
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onCancel();
+        return;
+      }
+      if (handleNavKey(e)) return;
+      if (e.key === "Enter") {
+        if (activeIndex < 0 || activeIndex >= flatChoices.length) return;
+        e.preventDefault();
+        handleSelect(flatChoices[activeIndex]);
+      }
+    },
+    [onCancel, handleNavKey, activeIndex, flatChoices, handleSelect],
+  );
+
+  if (isEditing) {
+    return (
+      <Popover
+        opened
+        onClose={onCancel}
+        position="bottom-start"
+        width={220}
+        trapFocus
+      >
+        <Popover.Target>
+          <div style={{ width: "100%", height: "100%" }}>
+            {selectedChoice ? (
+              <span
+                className={cellClasses.badge}
+                style={choiceColor(selectedChoice.color)}
+              >
+                {selectedChoice.name}
+              </span>
+            ) : (
+              <span className={cellClasses.emptyValue} />
+            )}
+          </div>
+        </Popover.Target>
+        <Popover.Dropdown p={4}>
+          <TextInput
+            ref={searchRef}
+            size="xs"
+            placeholder="Search..."
+            value={search}
+            onChange={(e) => setSearch(e.currentTarget.value)}
+            onKeyDown={handleKeyDown}
+            mb={4}
+          />
+          <div className={cellClasses.selectDropdown}>
+            {groups.map((group) => (
+              <div key={group.label}>
+                <div className={cellClasses.selectCategoryLabel}>
+                  {group.label}
+                </div>
+                {group.choices.map((choice) => {
+                  const idx = choiceIdxMap.get(choice.id) ?? -1;
+                  const isSelected = choice.id === selectedId;
+                  return (
+                    <div
+                      key={choice.id}
+                      ref={setOptionRef(idx)}
+                      className={clsx(
+                        cellClasses.selectOption,
+                        isSelected && cellClasses.selectOptionActive,
+                        idx === activeIndex && cellClasses.selectOptionKeyboardActive,
+                      )}
+                      onMouseEnter={() => setActiveIndex(idx)}
+                      onMouseDown={(e) => {
+                        // Keep focus on the search input so click doesn't blur + close popover.
+                        e.preventDefault();
+                      }}
+                      onClick={() => handleSelect(choice)}
+                    >
+                      <span
+                        className={cellClasses.badge}
+                        style={choiceColor(choice.color)}
+                      >
+                        {choice.name}
+                      </span>
+                    </div>
+                  );
+                })}
+              </div>
+            ))}
+          </div>
+        </Popover.Dropdown>
+      </Popover>
+    );
+  }
+
+  if (!selectedChoice) {
+    return <span className={cellClasses.emptyValue} />;
+  }
+
+  return (
+    <span
+      className={cellClasses.badge}
+      style={choiceColor(selectedChoice.color)}
+    >
+      {selectedChoice.name}
+    </span>
+  );
+}

apps/client/src/features/base/components/cells/cell-text.tsx

@@ -0,0 +1,82 @@
+import { useState, useRef, useEffect, useCallback } from "react";
+import { IBaseProperty } from "@/features/base/types/base.types";
+import cellClasses from "@/features/base/styles/cells.module.css";
+import gridClasses from "@/features/base/styles/grid.module.css";
+
+type CellTextProps = {
+  value: unknown;
+  property: IBaseProperty;
+  rowId: string;
+  isEditing: boolean;
+  onCommit: (value: unknown) => void;
+  onCancel: () => void;
+};
+
+export function CellText({
+  value,
+  isEditing,
+  onCommit,
+  onCancel,
+}: CellTextProps) {
+  const displayValue = typeof value === "string" ? value : "";
+  const [draft, setDraft] = useState(displayValue);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const committedRef = useRef(false);
+
+  useEffect(() => {
+    if (isEditing) {
+      committedRef.current = false;
+      setDraft(displayValue);
+      requestAnimationFrame(() => {
+        inputRef.current?.focus();
+        inputRef.current?.select();
+      });
+    }
+  }, [isEditing, displayValue]);
+
+  const commitOnce = useCallback(
+    (val: unknown) => {
+      if (committedRef.current) return;
+      committedRef.current = true;
+      onCommit(val);
+    },
+    [onCommit],
+  );
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        commitOnce(draft);
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        onCancel();
+      }
+    },
+    [draft, commitOnce, onCancel],
+  );
+
+  const handleBlur = useCallback(() => {
+    commitOnce(draft);
+  }, [draft, commitOnce]);
+
+  if (isEditing) {
+    return (
+      <input
+        ref={inputRef}
+        type="text"
+        className={cellClasses.cellInput}
+        value={draft}
+        onChange={(e) => setDraft(e.target.value)}
+        onKeyDown={handleKeyDown}
+        onBlur={handleBlur}
+      />
+    );
+  }
+
+  if (!displayValue) {
+    return <span className={cellClasses.emptyValue} />;
+  }
+
+  return <span className={gridClasses.cellContent}>{displayValue}</span>;
+}

apps/client/src/features/base/components/cells/cell-url.tsx

@@ -0,0 +1,92 @@
+import { useState, useRef, useEffect, useCallback } from "react";
+import { IBaseProperty } from "@/features/base/types/base.types";
+import cellClasses from "@/features/base/styles/cells.module.css";
+
+type CellUrlProps = {
+  value: unknown;
+  property: IBaseProperty;
+  rowId: string;
+  isEditing: boolean;
+  onCommit: (value: unknown) => void;
+  onCancel: () => void;
+};
+
+export function CellUrl({
+  value,
+  isEditing,
+  onCommit,
+  onCancel,
+}: CellUrlProps) {
+  const displayValue = typeof value === "string" ? value : "";
+  const [draft, setDraft] = useState(displayValue);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const committedRef = useRef(false);
+
+  useEffect(() => {
+    if (isEditing) {
+      committedRef.current = false;
+      setDraft(displayValue);
+      requestAnimationFrame(() => {
+        inputRef.current?.focus();
+        inputRef.current?.select();
+      });
+    }
+  }, [isEditing, displayValue]);
+
+  const commitOnce = useCallback(
+    (val: unknown) => {
+      if (committedRef.current) return;
+      committedRef.current = true;
+      onCommit(val);
+    },
+    [onCommit],
+  );
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        commitOnce(draft || null);
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        onCancel();
+      }
+    },
+    [draft, commitOnce, onCancel],
+  );
+
+  const handleBlur = useCallback(() => {
+    commitOnce(draft || null);
+  }, [draft, commitOnce]);
+
+  if (isEditing) {
+    return (
+      <input
+        ref={inputRef}
+        type="url"
+        className={cellClasses.cellInput}
+        value={draft}
+        placeholder="https://..."
+        onChange={(e) => setDraft(e.target.value)}
+        onKeyDown={handleKeyDown}
+        onBlur={handleBlur}
+      />
+    );
+  }
+
+  if (!displayValue) {
+    return <span className={cellClasses.emptyValue} />;
+  }
+
+  return (
+    <a
+      className={cellClasses.urlLink}
+      href={displayValue}
+      target="_blank"
+      rel="noopener noreferrer"
+      onClick={(e) => e.stopPropagation()}
+    >
+      {displayValue}
+    </a>
+  );
+}

apps/client/src/features/base/components/cells/choice-color.ts

@@ -0,0 +1,25 @@
+import { CSSProperties } from "react";
+
+const colorMap: Record<string, { bg: string; bgDark: string; text: string; textDark: string }> = {
+  gray: { bg: "#f1f3f5", bgDark: "#373a40", text: "#495057", textDark: "#ced4da" },
+  red: { bg: "#ffe3e3", bgDark: "#4a1a1a", text: "#c92a2a", textDark: "#ffa8a8" },
+  pink: { bg: "#ffdeeb", bgDark: "#4a1a2e", text: "#a61e4d", textDark: "#faa2c1" },
+  grape: { bg: "#f3d9fa", bgDark: "#3b1a4a", text: "#862e9c", textDark: "#e599f7" },
+  violet: { bg: "#e5dbff", bgDark: "#2b1a4a", text: "#5f3dc4", textDark: "#b197fc" },
+  indigo: { bg: "#dbe4ff", bgDark: "#1a2b4a", text: "#364fc7", textDark: "#91a7ff" },
+  blue: { bg: "#d0ebff", bgDark: "#1a2e4a", text: "#1971c2", textDark: "#74c0fc" },
+  cyan: { bg: "#c3fae8", bgDark: "#1a3a3a", text: "#0c8599", textDark: "#66d9e8" },
+  teal: { bg: "#c3fae8", bgDark: "#1a3a2e", text: "#087f5b", textDark: "#63e6be" },
+  green: { bg: "#d3f9d8", bgDark: "#1a3a1a", text: "#2b8a3e", textDark: "#69db7c" },
+  lime: { bg: "#e9fac8", bgDark: "#2e3a1a", text: "#5c940d", textDark: "#a9e34b" },
+  yellow: { bg: "#fff3bf", bgDark: "#3a351a", text: "#e67700", textDark: "#ffd43b" },
+  orange: { bg: "#ffe8cc", bgDark: "#3a2a1a", text: "#d9480f", textDark: "#ffa94d" },
+};
+
+export function choiceColor(color: string): CSSProperties {
+  const c = colorMap[color] ?? colorMap.gray;
+  return {
+    backgroundColor: `light-dark(${c.bg}, ${c.bgDark})`,
+    color: `light-dark(${c.text}, ${c.textDark})`,
+  };
+}

apps/client/src/features/base/components/grid/add-row-button.tsx

@@ -0,0 +1,26 @@
+import { memo } from "react";
+import { IconPlus } from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+import classes from "@/features/base/styles/grid.module.css";
+
+type AddRowButtonProps = {
+  onClick?: () => void;
+};
+
+export const AddRowButton = memo(function AddRowButton({
+  onClick,
+}: AddRowButtonProps) {
+  const { t } = useTranslation();
+
+  return (
+    <div
+      className={classes.addRowButton}
+      onClick={onClick}
+      role="button"
+      tabIndex={0}
+    >
+      <IconPlus size={14} />
+      <span>{t("New row")}</span>
+    </div>
+  );
+});

apps/client/src/features/base/components/grid/grid-cell.tsx

@@ -0,0 +1,149 @@
+import { memo, useCallback } from "react";
+import { Cell } from "@tanstack/react-table";
+import { useAtom } from "jotai";
+import { IBaseRow, IBaseProperty, EditingCell } from "@/features/base/types/base.types";
+import { editingCellAtom } from "@/features/base/atoms/base-atoms";
+import { isSystemPropertyType } from "@/features/base/hooks/use-base-table";
+import { CellText } from "@/features/base/components/cells/cell-text";
+import { CellNumber } from "@/features/base/components/cells/cell-number";
+import { CellSelect } from "@/features/base/components/cells/cell-select";
+import { CellStatus } from "@/features/base/components/cells/cell-status";
+import { CellMultiSelect } from "@/features/base/components/cells/cell-multi-select";
+import { CellDate } from "@/features/base/components/cells/cell-date";
+import { CellCheckbox } from "@/features/base/components/cells/cell-checkbox";
+import { CellUrl } from "@/features/base/components/cells/cell-url";
+import { CellEmail } from "@/features/base/components/cells/cell-email";
+import { CellPerson } from "@/features/base/components/cells/cell-person";
+import { CellFile } from "@/features/base/components/cells/cell-file";
+import { CellCreatedAt } from "@/features/base/components/cells/cell-created-at";
+import { CellLastEditedAt } from "@/features/base/components/cells/cell-last-edited-at";
+import { CellLastEditedBy } from "@/features/base/components/cells/cell-last-edited-by";
+import { RowNumberCell } from "./row-number-cell";
+import classes from "@/features/base/styles/grid.module.css";
+
+type CellComponentProps = {
+  value: unknown;
+  property: IBaseProperty;
+  rowId: string;
+  isEditing: boolean;
+  onCommit: (value: unknown) => void;
+  onCancel: () => void;
+};
+
+const cellComponents: Record<
+  string,
+  React.ComponentType<CellComponentProps>
+> = {
+  text: CellText,
+  number: CellNumber,
+  select: CellSelect,
+  status: CellStatus,
+  multiSelect: CellMultiSelect,
+  date: CellDate,
+  checkbox: CellCheckbox,
+  url: CellUrl,
+  email: CellEmail,
+  person: CellPerson,
+  file: CellFile,
+  createdAt: CellCreatedAt,
+  lastEditedAt: CellLastEditedAt,
+  lastEditedBy: CellLastEditedBy,
+};
+
+type RowDragProps = {
+  draggable: boolean;
+  onDragStart: (e: React.DragEvent) => void;
+};
+
+type GridCellProps = {
+  cell: Cell<IBaseRow, unknown>;
+  rowIndex: number;
+  onCellUpdate: (rowId: string, propertyId: string, value: unknown) => void;
+  rowDragProps?: RowDragProps;
+  orderedRowIds?: string[];
+};
+
+export const GridCell = memo(function GridCell({
+  cell,
+  rowIndex,
+  onCellUpdate,
+  rowDragProps,
+  orderedRowIds,
+}: GridCellProps) {
+  const property = cell.column.columnDef.meta?.property;
+  const isRowNumber = cell.column.id === "__row_number";
+  const isPinned = cell.column.getIsPinned();
+  const pinOffset = isPinned ? cell.column.getStart("left") : undefined;
+
+  const [editingCell, setEditingCell] = useAtom(editingCellAtom) as unknown as [EditingCell, (val: EditingCell) => void];
+
+  const rowId = cell.row.id;
+  const isEditing =
+    editingCell?.rowId === rowId &&
+    editingCell?.propertyId === property?.id;
+
+  const handleDoubleClick = useCallback(() => {
+    if (!property || isRowNumber) return;
+    if (property.type === "checkbox") return;
+    if (isSystemPropertyType(property.type)) return;
+    setEditingCell({ rowId, propertyId: property.id });
+  }, [property, isRowNumber, rowId, setEditingCell]);
+
+  const handleCommit = useCallback(
+    (value: unknown) => {
+      if (!property) return;
+      const currentValue = cell.getValue();
+      const hasChanged = value !== currentValue
+        && !(value === "" && (currentValue === null || currentValue === undefined))
+        && !(value === null && (currentValue === null || currentValue === undefined));
+      if (hasChanged) {
+        onCellUpdate(rowId, property.id, value);
+      }
+      setEditingCell(null);
+    },
+    [property, rowId, cell, onCellUpdate, setEditingCell],
+  );
+
+  const handleCancel = useCallback(() => {
+    setEditingCell(null);
+  }, [setEditingCell]);
+
+  if (isRowNumber) {
+    return (
+      <RowNumberCell
+        rowId={rowId}
+        rowIndex={rowIndex}
+        orderedRowIds={orderedRowIds ?? []}
+        isPinned={Boolean(isPinned)}
+        pinOffset={pinOffset}
+        rowDragProps={rowDragProps}
+      />
+    );
+  }
+
+  if (!property) return null;
+
+  const CellComponent = cellComponents[property.type];
+  if (!CellComponent) return null;
+
+  const value = cell.getValue();
+
+  return (
+    <div
+      className={`${classes.cell} ${isPinned ? classes.cellPinned : ""} ${isEditing ? classes.cellEditing : ""} ${property.isPrimary ? classes.primaryCell : ""}`}
+      style={{
+        ...(isPinned ? { left: pinOffset } : {}),
+      }}
+      onDoubleClick={handleDoubleClick}
+    >
+      <CellComponent
+        value={value}
+        property={property}
+        rowId={rowId}
+        isEditing={isEditing}
+        onCommit={handleCommit}
+        onCancel={handleCancel}
+      />
+    </div>
+  );
+});

apps/client/src/features/base/components/grid/grid-container.tsx

@@ -0,0 +1,306 @@
+import { useRef, useMemo, useCallback, useEffect } from "react";
+import { Table } from "@tanstack/react-table";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { useAtom } from "jotai";
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  DragEndEvent,
+} from "@dnd-kit/core";
+import {
+  SortableContext,
+  horizontalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { restrictToHorizontalAxis } from "@dnd-kit/modifiers";
+import { IBaseRow, IBaseProperty, EditingCell } from "@/features/base/types/base.types";
+import { editingCellAtom, activePropertyMenuAtom, propertyMenuDirtyAtom, propertyMenuCloseRequestAtom } from "@/features/base/atoms/base-atoms";
+import { useColumnResize } from "@/features/base/hooks/use-column-resize";
+import { useGridKeyboardNav } from "@/features/base/hooks/use-grid-keyboard-nav";
+import { useRowDrag } from "@/features/base/hooks/use-row-drag";
+import { useRowSelection } from "@/features/base/hooks/use-row-selection";
+import { useDeleteSelectedRows } from "@/features/base/hooks/use-delete-selected-rows";
+import { GridHeader } from "./grid-header";
+import { GridRow } from "./grid-row";
+import { AddRowButton } from "./add-row-button";
+import { SelectionActionBar } from "./selection-action-bar";
+import classes from "@/features/base/styles/grid.module.css";
+
+const ROW_HEIGHT = 36;
+const OVERSCAN = 10;
+
+type GridContainerProps = {
+  table: Table<IBaseRow>;
+  properties: IBaseProperty[];
+  onCellUpdate: (rowId: string, propertyId: string, value: unknown) => void;
+  onAddRow?: () => void;
+  baseId?: string;
+  onColumnReorder?: (columnId: string, overColumnId: string) => void;
+  onResizeEnd?: () => void;
+  onRowReorder?: (rowId: string, targetRowId: string, position: "above" | "below") => void;
+  hasNextPage?: boolean;
+  isFetchingNextPage?: boolean;
+  onFetchNextPage?: () => void;
+};
+
+export function GridContainer({
+  table,
+  properties,
+  onCellUpdate,
+  onAddRow,
+  baseId,
+  onColumnReorder,
+  onResizeEnd,
+  onRowReorder,
+  hasNextPage,
+  isFetchingNextPage,
+  onFetchNextPage,
+}: GridContainerProps) {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const lastTriggeredRowsLenRef = useRef(0);
+  const rows = table.getRowModel().rows;
+
+  const [editingCell, setEditingCell] = useAtom(editingCellAtom) as unknown as [EditingCell, (val: EditingCell) => void];
+  const [, setActivePropertyMenu] = useAtom(activePropertyMenuAtom) as unknown as [string | null, (val: string | null) => void];
+  const [propertyMenuDirty] = useAtom(propertyMenuDirtyAtom) as unknown as [boolean];
+  const [, setCloseRequest] = useAtom(propertyMenuCloseRequestAtom) as unknown as [number, (val: number) => void];
+  const propertyMenuDirtyRef = useRef(propertyMenuDirty);
+  propertyMenuDirtyRef.current = propertyMenuDirty;
+  const closeRequestCounterRef = useRef(0);
+
+  const { selectionCount, clear: clearSelection } = useRowSelection();
+  const { deleteSelected } = useDeleteSelectedRows(baseId ?? "");
+
+  useEffect(() => {
+    const handleMouseDown = (e: MouseEvent) => {
+      const target = e.target as HTMLElement;
+      if (target.closest(`.${classes.headerCell}`)) return;
+      if (target.closest("[role=\"dialog\"]")) return;
+      if (target.closest("[role=\"listbox\"]")) return;
+      if (target.closest("[data-mantine-shared-portal-node]")) return;
+      if (target.closest(`.${classes.cellEditing}`)) return;
+      if (propertyMenuDirtyRef.current) {
+        closeRequestCounterRef.current += 1;
+        setCloseRequest(closeRequestCounterRef.current);
+      } else {
+        setActivePropertyMenu(null);
+      }
+      setEditingCell(null);
+    };
+    document.addEventListener("mousedown", handleMouseDown);
+    return () => document.removeEventListener("mousedown", handleMouseDown);
+  }, [setActivePropertyMenu, setEditingCell, setCloseRequest]);
+
+  useColumnResize(table, onResizeEnd ?? (() => {}));
+
+  useGridKeyboardNav({
+    table,
+    editingCell,
+    setEditingCell,
+    containerRef: scrollRef,
+  });
+
+  const virtualizer = useVirtualizer({
+    count: rows.length,
+    getScrollElement: () => scrollRef.current,
+    estimateSize: () => ROW_HEIGHT,
+    overscan: OVERSCAN,
+  });
+
+  const virtualItems = virtualizer.getVirtualItems();
+
+  useEffect(() => {
+    if (!hasNextPage || isFetchingNextPage || !onFetchNextPage) return;
+    const lastItem = virtualItems[virtualItems.length - 1];
+    if (!lastItem) return;
+    if (lastItem.index < rows.length - OVERSCAN * 2) return;
+    if (rows.length <= lastTriggeredRowsLenRef.current) return;
+    lastTriggeredRowsLenRef.current = rows.length;
+    onFetchNextPage();
+  }, [virtualItems, rows.length, hasNextPage, isFetchingNextPage, onFetchNextPage]);
+
+  useEffect(() => {
+    // When the underlying row set shrinks (filter changed, sort toggled,
+    // view switched) or resets to zero, we're on a fresh pagination
+    // sequence — un-gate the trigger so the first page triggers a
+    // potential next fetch correctly.
+    if (rows.length === 0 || rows.length < lastTriggeredRowsLenRef.current) {
+      lastTriggeredRowsLenRef.current = 0;
+    }
+  }, [rows.length]);
+
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (!el || !baseId) return;
+    const handler = (e: KeyboardEvent) => {
+      if (editingCell) return;
+      const active = document.activeElement as HTMLElement | null;
+      if (!active || !el.contains(active)) return;
+      const tag = active.tagName;
+      if (tag === "INPUT" || tag === "TEXTAREA" || active.isContentEditable) {
+        return;
+      }
+      if (e.key === "Escape" && selectionCount > 0) {
+        clearSelection();
+        return;
+      }
+      if ((e.key === "Delete" || e.key === "Backspace") && selectionCount > 0) {
+        e.preventDefault();
+        void deleteSelected();
+      }
+    };
+    el.addEventListener("keydown", handler);
+    return () => el.removeEventListener("keydown", handler);
+  }, [editingCell, selectionCount, clearSelection, deleteSelected, baseId]);
+
+  const gridTemplateColumns = useMemo(() => {
+    const visibleColumns = table.getVisibleLeafColumns();
+    const columnWidths = visibleColumns.map((col) => `${col.getSize()}px`);
+    return columnWidths.join(" ") + (baseId ? " 40px" : "");
+  }, [table, table.getState().columnSizing, table.getState().columnVisibility, table.getState().columnOrder, baseId]);
+
+  const totalHeight = virtualizer.getTotalSize();
+
+  const paddingTop =
+    virtualItems.length > 0 ? virtualItems[0]?.start ?? 0 : 0;
+  const paddingBottom =
+    virtualItems.length > 0
+      ? totalHeight - (virtualItems[virtualItems.length - 1]?.end ?? 0)
+      : 0;
+
+  const rowIds = useMemo(() => rows.map((r) => r.id), [rows]);
+
+  const handleRowReorder = useCallback(
+    (rowId: string, targetRowId: string, position: "above" | "below") => {
+      onRowReorder?.(rowId, targetRowId, position);
+    },
+    [onRowReorder],
+  );
+
+  const {
+    dragState: rowDragState,
+    handleDragStart: handleRowDragStart,
+    handleDragOver: handleRowDragOver,
+    handleDragEnd: handleRowDragEnd,
+    handleDragLeave: handleRowDragLeave,
+  } = useRowDrag({ rowIds, onReorder: handleRowReorder });
+
+  const handleAddRow = useCallback(() => {
+    onAddRow?.();
+  }, [onAddRow]);
+
+  const handlePropertyCreated = useCallback(() => {
+    // Wait for React to re-render with the new column, then scroll to it
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        scrollRef.current?.scrollTo({
+          left: scrollRef.current.scrollWidth,
+          behavior: "smooth",
+        });
+      });
+    });
+  }, []);
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: { distance: 8 },
+    }),
+    useSensor(KeyboardSensor),
+  );
+
+  const sortableColumnIds = useMemo(() => {
+    return table
+      .getVisibleLeafColumns()
+      .filter((col) => col.id !== "__row_number")
+      .map((col) => col.id);
+  }, [table, table.getState().columnOrder]);
+
+  const handleDragEnd = useCallback(
+    (event: DragEndEvent) => {
+      const { active, over } = event;
+      if (!over || active.id === over.id) return;
+      onColumnReorder?.(active.id as string, over.id as string);
+    },
+    [onColumnReorder],
+  );
+
+  const modifiers = useMemo(() => [restrictToHorizontalAxis], []);
+
+  return (
+    <DndContext
+      sensors={sensors}
+      collisionDetection={closestCenter}
+      onDragEnd={handleDragEnd}
+      modifiers={modifiers}
+    >
+      <div
+        className={classes.gridWrapper}
+        ref={scrollRef}
+        tabIndex={0}
+      >
+        <div
+          className={classes.grid}
+          style={{ gridTemplateColumns }}
+          role="grid"
+        >
+          <SortableContext
+            items={sortableColumnIds}
+            strategy={horizontalListSortingStrategy}
+          >
+            <GridHeader
+              table={table}
+              baseId={baseId}
+              columnOrder={table.getState().columnOrder}
+              columnVisibility={table.getState().columnVisibility}
+              properties={properties}
+              loadedRowIds={rowIds}
+              onPropertyCreated={handlePropertyCreated}
+            />
+          </SortableContext>
+
+          {paddingTop > 0 && (
+            <div style={{ height: paddingTop, gridColumn: "1 / -1" }} />
+          )}
+
+          {virtualItems.map((virtualRow) => {
+            const row = rows[virtualRow.index];
+            if (!row) return null;
+            return (
+              <GridRow
+                key={row.id}
+                row={row}
+                rowIndex={virtualRow.index}
+                onCellUpdate={onCellUpdate}
+                orderedRowIds={rowIds}
+                columnVisibility={table.getState().columnVisibility}
+                dragHandlers={
+                  onRowReorder
+                    ? {
+                        onDragStart: handleRowDragStart,
+                        onDragOver: handleRowDragOver,
+                        onDragEnd: handleRowDragEnd,
+                        onDragLeave: handleRowDragLeave,
+                        isDragging: rowDragState.dragRowId === row.id,
+                        isDropTarget: rowDragState.dropTargetRowId === row.id,
+                        dropPosition: rowDragState.dropTargetRowId === row.id ? rowDragState.dropPosition : null,
+                      }
+                    : undefined
+                }
+              />
+            );
+          })}
+
+          {paddingBottom > 0 && (
+            <div style={{ height: paddingBottom, gridColumn: "1 / -1" }} />
+          )}
+
+          <AddRowButton onClick={handleAddRow} />
+          {baseId && <SelectionActionBar baseId={baseId} />}
+        </div>
+      </div>
+    </DndContext>
+  );
+}

apps/client/src/features/base/components/grid/grid-header-cell.tsx

@@ -0,0 +1,214 @@
+import { memo, useCallback, useEffect, useRef } from "react";
+import { Header, flexRender } from "@tanstack/react-table";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { Popover } from "@mantine/core";
+import { useAtom } from "jotai";
+import { IBaseRow, IBaseProperty, EditingCell } from "@/features/base/types/base.types";
+import { activePropertyMenuAtom, propertyMenuDirtyAtom, propertyMenuCloseRequestAtom, editingCellAtom } from "@/features/base/atoms/base-atoms";
+import {
+  IconLetterT,
+  IconHash,
+  IconCircleDot,
+  IconProgressCheck,
+  IconTags,
+  IconCalendar,
+  IconUser,
+  IconPaperclip,
+  IconCheckbox,
+  IconLink,
+  IconMail,
+  IconClockPlus,
+  IconClockEdit,
+  IconUserEdit,
+} from "@tabler/icons-react";
+import { PropertyMenuContent } from "@/features/base/components/property/property-menu";
+import { RowNumberHeaderCell } from "./row-number-header-cell";
+import { useRowSelection } from "@/features/base/hooks/use-row-selection";
+import classes from "@/features/base/styles/grid.module.css";
+
+const typeIcons: Record<string, typeof IconLetterT> = {
+  text: IconLetterT,
+  number: IconHash,
+  select: IconCircleDot,
+  status: IconProgressCheck,
+  multiSelect: IconTags,
+  date: IconCalendar,
+  person: IconUser,
+  file: IconPaperclip,
+  checkbox: IconCheckbox,
+  url: IconLink,
+  email: IconMail,
+  createdAt: IconClockPlus,
+  lastEditedAt: IconClockEdit,
+  lastEditedBy: IconUserEdit,
+};
+
+type GridHeaderCellProps = {
+  header: Header<IBaseRow, unknown>;
+  property: IBaseProperty | undefined;
+  loadedRowIds: string[];
+};
+
+export const GridHeaderCell = memo(function GridHeaderCell({
+  header,
+  property,
+  loadedRowIds,
+}: GridHeaderCellProps) {
+  const isRowNumber = header.column.id === "__row_number";
+  const isPinned = header.column.getIsPinned();
+  const pinOffset = isPinned ? header.column.getStart("left") : undefined;
+  const { selectionCount } = useRowSelection();
+  const hasSelection = selectionCount > 0;
+
+  const [activePropertyMenu, setActivePropertyMenu] = useAtom(activePropertyMenuAtom) as unknown as [string | null, (val: string | null) => void];
+  const menuOpened = activePropertyMenu === header.column.id;
+  const cellRef = useRef<HTMLDivElement>(null);
+  const [propertyMenuDirty, setPropertyMenuDirty] = useAtom(propertyMenuDirtyAtom) as unknown as [boolean, (val: boolean) => void];
+  const [closeRequest, setCloseRequest] = useAtom(propertyMenuCloseRequestAtom) as unknown as [number, (val: number) => void];
+  const [, setEditingCell] = useAtom(editingCellAtom) as unknown as [EditingCell, (val: EditingCell) => void];
+
+  const handleDirtyChange = useCallback((dirty: boolean) => {
+    setPropertyMenuDirty(dirty);
+  }, [setPropertyMenuDirty]);
+
+  const isSortableDisabled = isRowNumber || isPinned === "left";
+
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({
+    id: header.column.id,
+    disabled: isSortableDisabled,
+  });
+
+  const combinedRef = useCallback(
+    (node: HTMLDivElement | null) => {
+      setNodeRef(node);
+      (cellRef as React.MutableRefObject<HTMLDivElement | null>).current = node;
+    },
+    [setNodeRef],
+  );
+
+  const handleHeaderClick = useCallback(() => {
+    setEditingCell(null);
+    if (!isRowNumber && property && !isDragging) {
+      if (propertyMenuDirty && !menuOpened) return;
+      setActivePropertyMenu(menuOpened ? null : header.column.id);
+    }
+  }, [isRowNumber, property, isDragging, header.column.id, menuOpened, propertyMenuDirty, setActivePropertyMenu, setEditingCell]);
+
+  const handleMenuClose = useCallback(() => {
+    setActivePropertyMenu(null);
+  }, [setActivePropertyMenu]);
+
+  // Mantine's built-in `closeOnEscape` only fires when focus is inside the
+  // dropdown, but opening the property menu (clicking the header) leaves
+  // focus on the header itself. Mirror the click-outside path: when dirty,
+  // bump `propertyMenuCloseRequestAtom` so property-menu shows its
+  // "Unsaved changes" confirmation panel; otherwise close directly.
+  useEffect(() => {
+    if (!menuOpened) return;
+    const handler = (e: KeyboardEvent) => {
+      if (e.key !== "Escape") return;
+      if (propertyMenuDirty) {
+        setCloseRequest(closeRequest + 1);
+      } else {
+        handleMenuClose();
+      }
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [menuOpened, propertyMenuDirty, closeRequest, setCloseRequest, handleMenuClose]);
+
+  const TypeIcon = property ? typeIcons[property.type] : undefined;
+
+  const sortableStyle = transform
+    ? {
+        transform: CSS.Transform.toString({
+          ...transform,
+          scaleX: 1,
+          scaleY: 1,
+        }),
+        transition,
+        opacity: isDragging ? 0.5 : 1,
+        zIndex: isDragging ? 10 : undefined,
+      }
+    : {};
+
+  return (
+    <div
+      ref={combinedRef}
+      className={`${classes.headerCell} ${isPinned ? classes.headerCellPinned : ""} ${hasSelection ? classes.hasSelection : ""}`}
+      style={{
+        ...(isPinned ? { left: pinOffset } : {}),
+        ...(isRowNumber ? {} : { cursor: "pointer" }),
+        ...sortableStyle,
+      }}
+      onClick={handleHeaderClick}
+      {...(isSortableDisabled ? {} : attributes)}
+      {...(isSortableDisabled ? {} : listeners)}
+    >
+      {isRowNumber ? (
+        <RowNumberHeaderCell loadedRowIds={loadedRowIds} />
+      ) : (
+        <div className={classes.headerCellContent}>
+          {TypeIcon && (
+            <TypeIcon size={14} className={classes.headerTypeIcon} />
+          )}
+          <span className={classes.headerCellName}>
+            {flexRender(header.column.columnDef.header, header.getContext())}
+          </span>
+        </div>
+      )}
+      {header.column.getCanResize() && (
+        <div
+          className={`${classes.resizeHandle} ${
+            header.column.getIsResizing() ? classes.resizeHandleActive : ""
+          }`}
+          onMouseDown={(e) => {
+            e.stopPropagation();
+            header.getResizeHandler()(e);
+          }}
+          onTouchStart={(e) => {
+            e.stopPropagation();
+            header.getResizeHandler()(e);
+          }}
+          onPointerDown={(e) => e.stopPropagation()}
+          onClick={(e) => e.stopPropagation()}
+        />
+      )}
+      {property && !isRowNumber && (
+        <Popover
+          opened={menuOpened}
+          onClose={handleMenuClose}
+          position="bottom-start"
+          shadow="md"
+          width={260}
+          withinPortal
+          closeOnClickOutside={false}
+        >
+          <Popover.Target>
+            <div style={{ position: "absolute", inset: 0, pointerEvents: "none" }} />
+          </Popover.Target>
+          <Popover.Dropdown
+            p={0}
+            onClick={(e) => e.stopPropagation()}
+            onKeyDown={(e) => e.stopPropagation()}
+          >
+            <PropertyMenuContent
+              property={property}
+              opened={menuOpened}
+              onClose={handleMenuClose}
+              onDirtyChange={handleDirtyChange}
+            />
+          </Popover.Dropdown>
+        </Popover>
+      )}
+    </div>
+  );
+});

apps/client/src/features/base/components/grid/grid-header.tsx

@@ -0,0 +1,56 @@
+import { memo, useMemo } from "react";
+import { Table, ColumnOrderState, VisibilityState } from "@tanstack/react-table";
+import { IBaseRow, IBaseProperty } from "@/features/base/types/base.types";
+import { GridHeaderCell } from "./grid-header-cell";
+import { CreatePropertyPopover } from "@/features/base/components/property/create-property-popover";
+import classes from "@/features/base/styles/grid.module.css";
+
+type GridHeaderProps = {
+  table: Table<IBaseRow>;
+  baseId?: string;
+  // Passed explicitly to break memo when columns change
+  // (table ref is stable from useReactTable, so memo won't fire without these)
+  columnOrder: ColumnOrderState;
+  columnVisibility: VisibilityState;
+  properties: IBaseProperty[];
+  loadedRowIds: string[];
+  onPropertyCreated?: () => void;
+};
+
+export const GridHeader = memo(function GridHeader({
+  table,
+  baseId,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  columnOrder: _columnOrder,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  columnVisibility: _columnVisibility,
+  properties,
+  loadedRowIds,
+  onPropertyCreated,
+}: GridHeaderProps) {
+  const headerGroups = table.getHeaderGroups();
+  const propertyById = useMemo(() => {
+    const map = new Map<string, IBaseProperty>();
+    for (const p of properties) map.set(p.id, p);
+    return map;
+  }, [properties]);
+
+  return (
+    <div className={classes.headerRow} role="row">
+      {headerGroups[0]?.headers.map((header) => (
+        <GridHeaderCell
+          key={header.id}
+          header={header}
+          property={propertyById.get(header.column.id)}
+          loadedRowIds={loadedRowIds}
+        />
+      ))}
+      {baseId && (
+        <CreatePropertyPopover
+          baseId={baseId}
+          onPropertyCreated={onPropertyCreated}
+        />
+      )}
+    </div>
+  );
+});

apps/client/src/features/base/components/grid/grid-row.tsx

@@ -0,0 +1,92 @@
+import { memo, useCallback } from "react";
+import { Row, VisibilityState } from "@tanstack/react-table";
+import { IBaseRow } from "@/features/base/types/base.types";
+import { useRowSelection } from "@/features/base/hooks/use-row-selection";
+import { GridCell } from "./grid-cell";
+import classes from "@/features/base/styles/grid.module.css";
+
+type RowDragHandlers = {
+  onDragStart: (rowId: string) => void;
+  onDragOver: (rowId: string, e: React.DragEvent) => void;
+  onDragEnd: () => void;
+  onDragLeave: () => void;
+  isDragging: boolean;
+  isDropTarget: boolean;
+  dropPosition: "above" | "below" | null;
+};
+
+type GridRowProps = {
+  row: Row<IBaseRow>;
+  rowIndex: number;
+  onCellUpdate: (rowId: string, propertyId: string, value: unknown) => void;
+  dragHandlers?: RowDragHandlers;
+  orderedRowIds: string[];
+  columnVisibility: VisibilityState;
+};
+
+export const GridRow = memo(function GridRow({
+  row,
+  rowIndex,
+  onCellUpdate,
+  dragHandlers,
+  orderedRowIds,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  columnVisibility: _columnVisibility,
+}: GridRowProps) {
+  const isSelected = useRowSelection().isSelected(row.id);
+  const handleDragStart = useCallback(
+    (e: React.DragEvent) => {
+      e.dataTransfer.effectAllowed = "move";
+      e.dataTransfer.setData("text/plain", row.id);
+      dragHandlers?.onDragStart(row.id);
+    },
+    [row.id, dragHandlers],
+  );
+
+  const handleDragOver = useCallback(
+    (e: React.DragEvent) => {
+      dragHandlers?.onDragOver(row.id, e);
+    },
+    [row.id, dragHandlers],
+  );
+
+  const dropIndicatorClass = dragHandlers?.isDropTarget
+    ? dragHandlers.dropPosition === "above"
+      ? classes.rowDropAbove
+      : classes.rowDropBelow
+    : "";
+
+  return (
+    <div
+      className={`${classes.row} ${dragHandlers?.isDragging ? classes.rowDragging : ""} ${dropIndicatorClass} ${isSelected ? classes.rowSelected : ""}`}
+      role="row"
+      onDragOver={handleDragOver}
+      onDrop={(e) => {
+        e.preventDefault();
+        dragHandlers?.onDragEnd();
+      }}
+      onDragLeave={dragHandlers?.onDragLeave}
+    >
+      {row.getVisibleCells().map((cell) => {
+        const isRowNumber = cell.column.id === "__row_number";
+        return (
+          <GridCell
+            key={cell.id}
+            cell={cell}
+            rowIndex={rowIndex}
+            onCellUpdate={onCellUpdate}
+            orderedRowIds={orderedRowIds}
+            rowDragProps={
+              isRowNumber && dragHandlers
+                ? {
+                    draggable: true,
+                    onDragStart: handleDragStart,
+                  }
+                : undefined
+            }
+          />
+        );
+      })}
+    </div>
+  );
+});

apps/client/src/features/base/components/grid/row-number-cell.tsx

@@ -0,0 +1,70 @@
+import { memo, useCallback } from "react";
+import { Checkbox } from "@mantine/core";
+import { IconGripVertical } from "@tabler/icons-react";
+import { useRowSelection } from "@/features/base/hooks/use-row-selection";
+import classes from "@/features/base/styles/grid.module.css";
+
+type RowDragProps = {
+  draggable: boolean;
+  onDragStart: (e: React.DragEvent) => void;
+};
+
+type RowNumberCellProps = {
+  rowId: string;
+  rowIndex: number;
+  orderedRowIds: string[];
+  isPinned: boolean;
+  pinOffset?: number;
+  rowDragProps?: RowDragProps;
+};
+
+export const RowNumberCell = memo(function RowNumberCell({
+  rowId,
+  rowIndex,
+  orderedRowIds,
+  isPinned,
+  pinOffset,
+  rowDragProps,
+}: RowNumberCellProps) {
+  const { isSelected, toggle } = useRowSelection();
+  const selected = isSelected(rowId);
+
+  const handleCheckboxChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const nativeEvent = e.nativeEvent as MouseEvent;
+      toggle(rowId, {
+        shiftKey: nativeEvent.shiftKey === true,
+        rowIndex,
+        orderedRowIds,
+      });
+    },
+    [rowId, rowIndex, orderedRowIds, toggle],
+  );
+
+  return (
+    <div
+      className={`${classes.cell} ${classes.rowNumberCell} ${isPinned ? classes.cellPinned : ""}`}
+      style={isPinned ? { left: pinOffset } : undefined}
+    >
+      <div className={classes.rowNumberCellInner}>
+        <span
+          className={classes.rowNumberDragHandle}
+          draggable={rowDragProps?.draggable}
+          onDragStart={rowDragProps?.onDragStart}
+          aria-label="Drag row"
+        >
+          <IconGripVertical size={12} />
+        </span>
+        <span className={classes.rowNumberCheckbox}>
+          <Checkbox
+            size="xs"
+            checked={selected}
+            onChange={handleCheckboxChange}
+            aria-label="Select row"
+          />
+        </span>
+        <span className={classes.rowNumberIndex}>{rowIndex + 1}</span>
+      </div>
+    </div>
+  );
+});

apps/client/src/features/base/components/grid/row-number-header-cell.tsx

@@ -0,0 +1,48 @@
+import { memo, useMemo } from "react";
+import { Checkbox, Tooltip } from "@mantine/core";
+import { useRowSelection } from "@/features/base/hooks/use-row-selection";
+import classes from "@/features/base/styles/grid.module.css";
+
+type RowNumberHeaderCellProps = {
+  loadedRowIds: string[];
+};
+
+export const RowNumberHeaderCell = memo(function RowNumberHeaderCell({
+  loadedRowIds,
+}: RowNumberHeaderCellProps) {
+  const { selectedIds, toggleAll } = useRowSelection();
+
+  const { checked, indeterminate } = useMemo(() => {
+    if (loadedRowIds.length === 0) {
+      return { checked: false, indeterminate: false };
+    }
+    const selectedInLoaded = loadedRowIds.reduce(
+      (acc, id) => (selectedIds.has(id) ? acc + 1 : acc),
+      0,
+    );
+    return {
+      checked: selectedInLoaded === loadedRowIds.length,
+      indeterminate:
+        selectedInLoaded > 0 && selectedInLoaded < loadedRowIds.length,
+    };
+  }, [loadedRowIds, selectedIds]);
+
+  if (loadedRowIds.length === 0) return null;
+
+  return (
+    <div className={classes.rowNumberHeaderInner}>
+      <span className={classes.rowNumberHeaderHash}>#</span>
+      <span className={classes.rowNumberHeaderCheckbox}>
+        <Tooltip label="Select all loaded rows" withinPortal>
+          <Checkbox
+            size="xs"
+            checked={checked}
+            indeterminate={indeterminate}
+            onChange={() => toggleAll(loadedRowIds)}
+            aria-label="Select all loaded rows"
+          />
+        </Tooltip>
+      </span>
+    </div>
+  );
+});