feat: watch space

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

@@ -7,7 +7,6 @@
   "Add members": "Add members",
   "Add to groups": "Add to groups",
   "Add space members": "Add space members",
-  "Add to favorites": "Add to favorites",
   "Admin": "Admin",
   "Are you sure you want to delete this group? Members will lose access to resources this group has access to.": "Are you sure you want to delete this group? Members will lose access to resources this group has access to.",
   "Are you sure you want to delete this page?": "Are you sure you want to delete this page?",
@@ -75,9 +74,6 @@
   "Failed to import pages": "Failed to import pages",
   "Failed to load page. An error occurred.": "Failed to load page. An error occurred.",
   "Failed to update data": "Failed to update data",
-  "Favorite spaces": "Favorite spaces",
-  "Favorite spaces appear here": "Favorite spaces appear here",
-  "Favorites": "Favorites",
   "Full access": "Full access",
   "Full page width": "Full page width",
   "Full width": "Full width",
@@ -96,7 +92,6 @@
   "Invite by email": "Invite by email",
   "Invite members": "Invite members",
   "Invite new members": "Invite new members",
-  "Invite People": "Invite People",
   "Invited members who are yet to accept their invitation will appear here.": "Invited members who are yet to accept their invitation will appear here.",
   "Invited members will be granted access to spaces the groups can access": "Invited members will be granted access to spaces the groups can access",
   "Join the workspace": "Join the workspace",
@@ -144,7 +139,6 @@
   "Profile": "Profile",
   "Recently updated": "Recently updated",
   "Remove": "Remove",
-  "Remove from favorites": "Remove from favorites",
   "Remove group member": "Remove group member",
   "Remove space member": "Remove space member",
   "Restore": "Restore",
@@ -181,7 +175,6 @@
   "Successfully imported": "Successfully imported",
   "Successfully restored": "Successfully restored",
   "System settings": "System settings",
-  "Templates": "Templates",
   "Theme": "Theme",
   "To change your email, you have to enter your password and new email.": "To change your email, you have to enter your password and new email.",
   "Toggle full page width": "Toggle full page width",
@@ -485,7 +478,6 @@
   "Replace (Enter)": "Replace (Enter)",
   "Replace all (Ctrl+Alt+Enter)": "Replace all (Ctrl+Alt+Enter)",
   "Replace all": "Replace all",
-  "View all": "View all",
   "View all spaces": "View all spaces",
   "Error": "Error",
   "Failed to disable MFA": "Failed to disable MFA",
@@ -635,7 +627,6 @@
   "AI Answer": "AI Answer",
   "Ask AI": "Ask AI",
   "AI is thinking...": "AI is thinking...",
-  "Thinking": "Thinking",
   "Ask a question...": "Ask a question...",
   "AI Answers": "AI Answers",
   "AI-powered search (AI Answers)": "AI-powered search (AI Answers)",
@@ -764,32 +755,5 @@
   "Publish": "Publish",
   "Security": "Security",
   "Enforce SSO": "Enforce SSO",
-  "Once enforced, members will not be able to login with email and password.": "Once enforced, members will not be able to login with email and password.",
-  "AI-generated content may not be accurate.": "AI-generated content may not be accurate.",
-  "AI Chat": "AI Chat",
-  "Analyze for insights": "Analyze for insights",
-  "Ask anything...": "Ask anything...",
-  "Chat history": "Chat history",
-  "Chat name": "Chat name",
-  "Close": "Close",
-  "Docmost AI": "Docmost AI",
-  "Failed to load chat. An error occurred.": "Failed to load chat. An error occurred.",
-  "Failed to render this message.": "Failed to render this message.",
-  "How can I help you today?": "How can I help you today?",
-  "New chat": "New chat",
-  "No chat history": "No chat history",
-  "No chats found": "No chats found",
-  "No conversations yet": "No conversations yet",
-  "Open full page": "Open full page",
-  "Previous 7 days": "Previous 7 days",
-  "Previous 30 days": "Previous 30 days",
-  "Search chats...": "Search chats...",
-  "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",
-  "Translate this page": "Translate this page",
-  "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?"
+  "Once enforced, members will not be able to login with email and password.": "Once enforced, members will not be able to login with email and password."
 }

apps/client/src/App.tsx

@@ -38,10 +38,6 @@ 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 AuditLogs from "@/ee/audit/pages/audit-logs.tsx";
-import TemplateList from "@/ee/template/pages/template-list";
-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";
 
 export default function App() {
@@ -85,15 +81,7 @@ export default function App() {
 
         <Route element={<Layout />}>
           <Route path={"/home"} element={<Home />} />
-          <Route path={"/ai"} element={<AiChat />} />
-          <Route path={"/ai/chat/:chatId"} element={<AiChat />} />
           <Route path={"/spaces"} element={<SpacesPage />} />
-          <Route path={"/favorites"} element={<FavoritesPage />} />
-          <Route path={"/templates"} element={<TemplateList />} />
-          <Route
-            path={"/templates/:templateId"}
-            element={<TemplateEditor />}
-          />
           <Route path={"/s/:spaceSlug"} element={<SpaceHome />} />
           <Route path={"/s/:spaceSlug/trash"} element={<SpaceTrash />} />
           <Route

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

@@ -1,4 +1,4 @@
-import { ActionIcon, MantineColor, MantineSize, Tooltip } from "@mantine/core";
+import { ActionIcon, Tooltip } from "@mantine/core";
 import { CopyButton } from "@/components/common/copy-button";
 import { IconCheck, IconCopy } from "@tabler/icons-react";
 import React from "react";
@@ -6,10 +6,8 @@ import { useTranslation } from "react-i18next";
 
 interface CopyProps {
   text: string;
-  size?: MantineSize;
-  color?: MantineColor;
 }
-export default function CopyTextButton({ text, size }: CopyProps) {
+export default function CopyTextButton({ text }: CopyProps) {
   const { t } = useTranslation();
 
   return (
@@ -24,7 +22,6 @@ export default function CopyTextButton({ text, size }: CopyProps) {
             color={copied ? "teal" : "gray"}
             variant="subtle"
             onClick={copy}
-            size={size}
           >
             {copied ? <IconCheck size={16} /> : <IconCopy size={16} />}
           </ActionIcon>

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

@@ -5,7 +5,6 @@ import {
   Badge,
   Table,
   ActionIcon,
-  Button,
 } from "@mantine/core";
 import { Link } from "react-router-dom";
 import PageListSkeleton from "@/components/ui/page-list-skeleton.tsx";
@@ -24,8 +23,7 @@ interface Props {
 
 export default function RecentChanges({ spaceId }: Props) {
   const { t } = useTranslation();
-  const { data, isLoading, isError, hasNextPage, fetchNextPage, isFetchingNextPage } = useRecentChangesQuery(spaceId);
-  const pages = data?.pages.flatMap((p) => p.items) ?? [];
+  const { data: pages, isLoading, isError } = useRecentChangesQuery(spaceId);
 
   if (isLoading) {
     return <PageListSkeleton />;
@@ -35,72 +33,58 @@ export default function RecentChanges({ spaceId }: Props) {
     return <Text>{t("Failed to fetch recent pages")}</Text>;
   }
 
-  return pages.length > 0 ? (
-    <>
-      <Table.ScrollContainer minWidth={500}>
-        <Table highlightOnHover verticalSpacing="sm">
-          <Table.Tbody>
-            {pages.map((page) => (
-              <Table.Tr key={page.id}>
-                <Table.Td>
-                  <UnstyledButton
-                    component={Link}
-                    to={buildPageUrl(page?.space.slug, page.slugId, page.title)}
-                  >
-                    <Group wrap="nowrap">
-                      {page.icon || (
-                        <ActionIcon variant="transparent" color="gray" size={18}>
-                          <IconFileDescription size={18} />
-                        </ActionIcon>
-                      )}
+  return pages && pages.items.length > 0 ? (
+    <Table.ScrollContainer minWidth={500}>
+      <Table highlightOnHover verticalSpacing="sm">
+        <Table.Tbody>
+          {pages.items.map((page) => (
+            <Table.Tr key={page.id}>
+              <Table.Td>
+                <UnstyledButton
+                  component={Link}
+                  to={buildPageUrl(page?.space.slug, page.slugId, page.title)}
+                >
+                  <Group wrap="nowrap">
+                    {page.icon || (
+                      <ActionIcon variant="transparent" color="gray" size={18}>
+                        <IconFileDescription size={18} />
+                      </ActionIcon>
+                    )}
 
-                      <Text fw={500} size="md" lineClamp={1}>
-                        {page.title || t("Untitled")}
-                      </Text>
-                    </Group>
-                  </UnstyledButton>
-                </Table.Td>
-                {!spaceId && (
-                  <Table.Td>
-                    <Badge
-                      color={getInitialsColor(page?.space.name)}
-                      variant="light"
-                      component={Link}
-                      to={getSpaceUrl(page?.space.slug)}
-                      style={{ cursor: "pointer" }}
-                    >
-                      {page?.space.name}
-                    </Badge>
-                  </Table.Td>
-                )}
+                    <Text fw={500} size="md" lineClamp={1}>
+                      {page.title || t("Untitled")}
+                    </Text>
+                  </Group>
+                </UnstyledButton>
+              </Table.Td>
+              {!spaceId && (
                 <Table.Td>
-                  <Text
-                    c="dimmed"
-                    style={{ whiteSpace: "nowrap" }}
-                    size="xs"
-                    fw={500}
+                  <Badge
+                    color={getInitialsColor(page?.space.name)}
+                    variant="light"
+                    component={Link}
+                    to={getSpaceUrl(page?.space.slug)}
+                    style={{ cursor: "pointer" }}
                   >
-                    {formattedDate(page.updatedAt)}
-                  </Text>
+                    {page?.space.name}
+                  </Badge>
                 </Table.Td>
-              </Table.Tr>
-            ))}
-          </Table.Tbody>
-        </Table>
-      </Table.ScrollContainer>
-      {hasNextPage && (
-        <Button
-          variant="subtle"
-          fullWidth
-          mt="sm"
-          mb="xl"
-          onClick={() => fetchNextPage()}
-          loading={isFetchingNextPage}
-        >
-          {t("Load more")}
-        </Button>
-      )}
-    </>
+              )}
+              <Table.Td>
+                <Text
+                  c="dimmed"
+                  style={{ whiteSpace: "nowrap" }}
+                  size="xs"
+                  fw={500}
+                >
+                  {formattedDate(page.updatedAt)}
+                </Text>
+              </Table.Td>
+            </Table.Tr>
+          ))}
+        </Table.Tbody>
+      </Table>
+    </Table.ScrollContainer>
   ) : (
     <EmptyState
       icon={IconFiles}

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

@@ -7,19 +7,6 @@
     padding-right: var(--mantine-spacing-md);
 }
 
-.brand {
-    display: flex;
-    align-items: center;
-    text-decoration: none;
-    color: inherit;
-    cursor: pointer;
-}
-
-.brandIcon {
-    display: flex;
-    align-items: center;
-}
-
 .link {
     display: block;
     line-height: 1;
@@ -29,9 +16,6 @@
     color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
     font-size: var(--mantine-font-size-sm);
     font-weight: 500;
-    user-select: none;
-    white-space: nowrap;
-    flex-shrink: 0;
 
     @mixin hover {
         background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));

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

@@ -1,18 +1,8 @@
-import {
-  ActionIcon,
-  Badge,
-  Box,
-  Group,
-  Text,
-  Tooltip,
-  UnstyledButton,
-} from "@mantine/core";
+import { Badge, Group, Text, Tooltip } from "@mantine/core";
 import classes from "./app-header.module.css";
 import React from "react";
 import TopMenu from "@/components/layouts/global/top-menu.tsx";
-import { Link, useLocation } from "react-router-dom";
-import { IconSparkles } from "@tabler/icons-react";
-import useToggleAside from "@/hooks/use-toggle-aside.tsx";
+import { Link } from "react-router-dom";
 import APP_ROUTE from "@/lib/app-route.ts";
 import { useAtom } from "jotai";
 import {
@@ -33,11 +23,8 @@ import {
   shareSearchSpotlight,
 } from "@/features/search/constants.ts";
 import { NotificationPopover } from "@/features/notification/components/notification-popover.tsx";
-import { workspaceAtom } from "@/features/user/atoms/current-user-atom.ts";
 
-const links = [
-  { link: APP_ROUTE.HOME, label: "Home" },
-];
+const links = [{ link: APP_ROUTE.HOME, label: "Home" }];
 
 export function AppHeader() {
   const { t } = useTranslation();
@@ -47,12 +34,10 @@ export function AppHeader() {
   const [desktopOpened] = useAtom(desktopSidebarAtom);
   const toggleDesktop = useToggleSidebar(desktopSidebarAtom);
   const { isTrial, trialDaysLeft } = useTrial();
-  const location = useLocation();
-  const toggleAside = useToggleAside();
-  const [workspace] = useAtom(workspaceAtom);
-  const aiChatEnabled = workspace?.settings?.ai?.chat === true;
 
-  const isPageRoute = location.pathname.includes("/p/");
+  const isHomeRoute = location.pathname.startsWith("/home");
+  const isSpacesRoute = location.pathname === "/spaces";
+  const hideSidebar = isHomeRoute || isSpacesRoute;
 
   const items = links.map((link) => (
     <Link key={link.label} to={link.link} className={classes.link}>
@@ -64,44 +49,39 @@ export function AppHeader() {
     <>
       <Group h="100%" px="md" justify="space-between" wrap={"nowrap"}>
         <Group wrap="nowrap">
-          <Tooltip label={t("Sidebar toggle")}>
-            <SidebarToggle
-              aria-label={t("Sidebar toggle")}
-              opened={mobileOpened}
-              onClick={toggleMobile}
-              hiddenFrom="sm"
-              size="sm"
-            />
-          </Tooltip>
+          {!hideSidebar && (
+            <>
+              <Tooltip label={t("Sidebar toggle")}>
+                <SidebarToggle
+                  aria-label={t("Sidebar toggle")}
+                  opened={mobileOpened}
+                  onClick={toggleMobile}
+                  hiddenFrom="sm"
+                  size="sm"
+                />
+              </Tooltip>
 
-          <Tooltip label={t("Sidebar toggle")}>
-            <SidebarToggle
-              aria-label={t("Sidebar toggle")}
-              opened={desktopOpened}
-              onClick={toggleDesktop}
-              visibleFrom="sm"
-              size="sm"
-            />
-          </Tooltip>
+              <Tooltip label={t("Sidebar toggle")}>
+                <SidebarToggle
+                  aria-label={t("Sidebar toggle")}
+                  opened={desktopOpened}
+                  onClick={toggleDesktop}
+                  visibleFrom="sm"
+                  size="sm"
+                />
+              </Tooltip>
+            </>
+          )}
 
-          <Link to="/home" className={classes.brand} aria-label="Docmost">
-            <Box hiddenFrom="sm" className={classes.brandIcon}>
-              <img
-                src="/icons/favicon-32x32.png"
-                alt="Docmost"
-                width={22}
-                height={22}
-              />
-            </Box>
-            <Text
-              size="lg"
-              fw={600}
-              style={{ userSelect: "none" }}
-              visibleFrom="sm"
-            >
-              Docmost
-            </Text>
-          </Link>
+          <Text
+            size="lg"
+            fw={600}
+            style={{ cursor: "pointer", userSelect: "none" }}
+            component={Link}
+            to="/home"
+          >
+            Docmost
+          </Text>
 
           <Group ml={50} gap={5} className={classes.links} visibleFrom="sm">
             {items}
@@ -118,49 +98,6 @@ export function AppHeader() {
         </div>
 
         <Group px={"xl"} wrap="nowrap">
-          {aiChatEnabled && (
-            <>
-              <UnstyledButton
-                component={Link}
-                to="/ai"
-                className={classes.link}
-                visibleFrom="sm"
-                onClick={(e: React.MouseEvent) => {
-                  if (e.metaKey || e.ctrlKey || e.shiftKey || e.button === 1) {
-                    return;
-                  }
-                  if (isPageRoute) {
-                    e.preventDefault();
-                    toggleAside("chat");
-                  }
-                }}
-              >
-                {t("AI Chat")}
-              </UnstyledButton>
-              <Tooltip label={t("AI Chat")} openDelay={250} withArrow>
-                <ActionIcon
-                  component={Link}
-                  to="/ai"
-                  variant="subtle"
-                  color="dark"
-                  size="sm"
-                  hiddenFrom="sm"
-                  aria-label={t("AI Chat")}
-                  onClick={(e: React.MouseEvent) => {
-                    if (e.metaKey || e.ctrlKey || e.shiftKey || e.button === 1) {
-                      return;
-                    }
-                    if (isPageRoute) {
-                      e.preventDefault();
-                      toggleAside("chat");
-                    }
-                  }}
-                >
-                  <IconSparkles size={20} stroke={2} />
-                </ActionIcon>
-              </Tooltip>
-            </>
-          )}
           <NotificationPopover />
           {isCloud() && isTrial && trialDaysLeft !== 0 && (
             <Badge

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

@@ -7,7 +7,6 @@ import { useTranslation } from "react-i18next";
 import { TableOfContents } from "@/features/editor/components/table-of-contents/table-of-contents.tsx";
 import { useAtomValue } from "jotai";
 import { pageEditorAtom } from "@/features/editor/atoms/editor-atoms.ts";
-import AsideChatPanel from "@/ee/ai-chat/components/aside-chat-panel";
 
 export default function Aside() {
   const [{ tab }] = useAtom(asideStateAtom);
@@ -26,10 +25,6 @@ export default function Aside() {
       component = <TableOfContents editor={pageEditor} />;
       title = "Table of contents";
       break;
-    case "chat":
-      component = <AsideChatPanel />;
-      title = "AI Chat";
-      break;
     default:
       component = null;
       title = null;
@@ -39,14 +34,12 @@ export default function Aside() {
     <Box p="md" style={{ height: "100%", display: "flex", flexDirection: "column" }}>
       {component && (
         <>
-          {tab !== "chat" && (
-            <Text mb="md" fw={500}>
-              {t(title)}
-            </Text>
-          )}
+          <Text mb="md" fw={500}>
+            {t(title)}
+          </Text>
 
-          {tab === "comments" || tab === "chat" ? (
-            component
+          {tab === "comments" ? (
+            <CommentListWithTabs />
           ) : (
             <ScrollArea
               style={{ height: "85vh" }}

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

@@ -10,13 +10,11 @@ import {
   sidebarWidthAtom,
 } from "@/components/layouts/global/hooks/atoms/sidebar-atom.ts";
 import { SpaceSidebar } from "@/features/space/components/sidebar/space-sidebar.tsx";
-import AiChatSidebar from "@/ee/ai-chat/components/ai-chat-sidebar.tsx";
 import { AppHeader } from "@/components/layouts/global/app-header.tsx";
 import Aside from "@/components/layouts/global/aside.tsx";
 import classes from "./app-shell.module.css";
 import { useTrialEndAction } from "@/ee/hooks/use-trial-end-action.tsx";
 import { useToggleSidebar } from "@/components/layouts/global/hooks/hooks/use-toggle-sidebar.ts";
-import GlobalSidebar from "@/components/layouts/global/global-sidebar.tsx";
 
 export default function GlobalAppShell({
   children,
@@ -74,21 +72,24 @@ export default function GlobalAppShell({
   const location = useLocation();
   const isSettingsRoute = location.pathname.startsWith("/settings");
   const isSpaceRoute = location.pathname.startsWith("/s/");
-  const isAiRoute = location.pathname.startsWith("/ai");
+  const isHomeRoute = location.pathname.startsWith("/home");
+  const isSpacesRoute = location.pathname === "/spaces";
   const isPageRoute = location.pathname.includes("/p/");
-  const showGlobalSidebar = !isSpaceRoute && !isSettingsRoute && !isAiRoute;
+  const hideSidebar = isHomeRoute || isSpacesRoute;
 
   return (
     <AppShell
       header={{ height: 45 }}
-      navbar={{
-        width: isSpaceRoute ? sidebarWidth : 300,
-        breakpoint: "sm",
-        collapsed: {
-          mobile: !mobileOpened,
-          desktop: !desktopOpened,
-        },
-      }}
+      navbar={
+        !hideSidebar && {
+          width: isSpaceRoute ? sidebarWidth : 300,
+          breakpoint: "sm",
+          collapsed: {
+            mobile: !mobileOpened,
+            desktop: !desktopOpened,
+          },
+        }
+      }
       aside={
         isPageRoute && {
           width: 350,
@@ -101,22 +102,20 @@ export default function GlobalAppShell({
       <AppShell.Header px="md" className={classes.header}>
         <AppHeader />
       </AppShell.Header>
-      <AppShell.Navbar
-        className={classes.navbar}
-        withBorder={false}
-        ref={sidebarRef}
-      >
-        {isSpaceRoute && (
+      {!hideSidebar && (
+        <AppShell.Navbar
+          className={classes.navbar}
+          withBorder={false}
+          ref={sidebarRef}
+        >
           <div className={classes.resizeHandle} onMouseDown={startResizing} />
-        )}
-        {isSpaceRoute && <SpaceSidebar />}
-        {isSettingsRoute && <SettingsSidebar />}
-        {isAiRoute && <AiChatSidebar />}
-        {showGlobalSidebar && <GlobalSidebar />}
-      </AppShell.Navbar>
+          {isSpaceRoute && <SpaceSidebar />}
+          {isSettingsRoute && <SettingsSidebar />}
+        </AppShell.Navbar>
+      )}
       <AppShell.Main>
         {isSettingsRoute ? (
-          <Container size={900}>{children}</Container>
+          <Container size={850}>{children}</Container>
         ) : (
           children
         )}

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

@@ -1,89 +0,0 @@
-.navbar {
-    height: 100%;
-    width: 100%;
-    padding: var(--mantine-spacing-md);
-    display: flex;
-    flex-direction: column;
-}
-
-.section {
-    padding-bottom: var(--mantine-spacing-xs);
-}
-
-.link {
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    text-decoration: none;
-    font-size: var(--mantine-font-size-sm);
-    color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
-    padding-left: var(--mantine-spacing-xs);
-    min-height: 30px;
-    border-radius: var(--mantine-radius-sm);
-    font-weight: 500;
-    user-select: none;
-
-    @mixin hover {
-        background-color: light-dark(
-                var(--mantine-color-gray-1),
-                var(--mantine-color-dark-6)
-        );
-        color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
-    }
-
-    &[data-active] {
-        &,
-        & :hover {
-            background-color: light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-6));
-            color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
-        }
-    }
-}
-
-.linkIcon {
-    color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
-    margin-right: var(--mantine-spacing-sm);
-    width: rem(16px);
-    height: rem(16px);
-}
-
-.sectionHeader {
-    padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
-    font-size: var(--mantine-font-size-xs);
-    color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-3));
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-}
-
-.spacer {
-    flex: 1;
-}
-
-.bottomSection {
-    padding-top: var(--mantine-spacing-xs);
-    border-top: rem(1px) solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
-}
-
-.spaceItem {
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    gap: var(--mantine-spacing-sm);
-    text-decoration: none;
-    font-size: var(--mantine-font-size-sm);
-    color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
-    padding-left: var(--mantine-spacing-xs);
-    min-height: 30px;
-    border-radius: var(--mantine-radius-sm);
-    font-weight: 500;
-    user-select: none;
-
-    @mixin hover {
-        background-color: light-dark(
-                var(--mantine-color-gray-1),
-                var(--mantine-color-dark-6)
-        );
-        color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
-    }
-}

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

@@ -1,158 +0,0 @@
-import { useEffect, useState } from "react";
-import { ScrollArea, Text, Divider, Modal } from "@mantine/core";
-import {
-  IconHome,
-  IconClock,
-  IconStar,
-  IconLayoutGrid,
-  IconSettings,
-  IconUserPlus,
-} from "@tabler/icons-react";
-import { Link, useLocation } from "react-router-dom";
-import classes from "./global-sidebar.module.css";
-import { useTranslation } from "react-i18next";
-import { useAtom } from "jotai";
-import { mobileSidebarAtom } from "@/components/layouts/global/hooks/atoms/sidebar-atom";
-import { useToggleSidebar } from "@/components/layouts/global/hooks/hooks/use-toggle-sidebar";
-import { useFavoritesQuery } from "@/features/favorite/queries/favorite-query";
-import { getSpaceUrl } from "@/lib/config";
-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";
-
-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();
-  const location = useLocation();
-  const [active, setActive] = useState(location.pathname);
-  const [mobileSidebarOpened] = useAtom(mobileSidebarAtom);
-  const toggleMobileSidebar = useToggleSidebar(mobileSidebarAtom);
-  const { data: favoriteSpacesData } = useFavoritesQuery("space");
-  const favoriteSpaces = favoriteSpacesData?.pages.flatMap((p) => p.items) ?? [];
-  const sortedFavoriteSpaces = [...favoriteSpaces]
-    .filter((fav) => fav.space)
-    .sort((a, b) => {
-      const cmp = (a.space!.name ?? "").localeCompare(b.space!.name ?? "", undefined, { sensitivity: "base" });
-      return cmp !== 0 ? cmp : a.id.localeCompare(b.id);
-    });
-  const [inviteOpened, { open: openInvite, close: closeInvite }] =
-    useDisclosure(false);
-
-  useEffect(() => {
-    setActive(location.pathname);
-  }, [location.pathname]);
-
-  const handleNavClick = () => {
-    if (mobileSidebarOpened) {
-      toggleMobileSidebar();
-    }
-  };
-
-  return (
-    <div className={classes.navbar}>
-      <ScrollArea w="100%" style={{ flex: 1 }}>
-        <div className={classes.section}>
-          {mainNavItems.map((item) => (
-            <Link
-              key={item.label}
-              className={classes.link}
-              data-active={active === item.path || undefined}
-              to={item.path}
-              onClick={handleNavClick}
-            >
-              <item.icon className={classes.linkIcon} stroke={2} />
-              <span>{t(item.label)}</span>
-            </Link>
-          ))}
-        </div>
-
-        <Divider my="xs" />
-        <div className={classes.section}>
-          <Text className={classes.sectionHeader}>{t("Favorite spaces")}</Text>
-          {sortedFavoriteSpaces.length === 0 ? (
-            <Text size="xs" c="dimmed" pl="xs" py={4}>
-              {t("Favorite spaces appear here")}
-            </Text>
-          ) : (
-            <>
-              {sortedFavoriteSpaces.slice(0, 10).map((fav) => (
-                <Link
-                  key={fav.id}
-                  className={classes.spaceItem}
-                  to={getSpaceUrl(fav.space!.slug)}
-                  onClick={handleNavClick}
-                >
-                  <CustomAvatar
-                    name={fav.space!.name}
-                    avatarUrl={fav.space!.logo}
-                    type={AvatarIconType.SPACE_ICON}
-                    color="initials"
-                    variant="filled"
-                    size={20}
-                  />
-                  <Text size="sm" fw={500} lineClamp={1}>
-                    {fav.space!.name}
-                  </Text>
-                </Link>
-              ))}
-              {sortedFavoriteSpaces.length > 10 && (
-                <Link
-                  className={classes.spaceItem}
-                  to="/spaces"
-                  onClick={handleNavClick}
-                >
-                  <Text size="xs" c="dimmed">
-                    {t("View all")}
-                  </Text>
-                </Link>
-              )}
-            </>
-          )}
-        </div>
-
-      </ScrollArea>
-
-      <div className={classes.bottomSection}>
-        <a
-          className={classes.link}
-          onClick={(e) => {
-            e.preventDefault();
-            openInvite();
-          }}
-          href="#"
-        >
-          <IconUserPlus className={classes.linkIcon} stroke={2} />
-          <span>{t("Invite People")}</span>
-        </a>
-        <Link
-          className={classes.link}
-          data-active={active.startsWith("/settings") || undefined}
-          to="/settings/account/profile"
-          onClick={handleNavClick}
-        >
-          <IconSettings className={classes.linkIcon} stroke={2} />
-          <span>{t("Settings")}</span>
-        </Link>
-      </div>
-
-      <Modal
-        size="550"
-        opened={inviteOpened}
-        onClose={closeInvite}
-        title={t("Invite new members")}
-        centered
-      >
-        <Divider size="xs" mb="xs" />
-        <ScrollArea h="80%">
-          <WorkspaceInviteForm onClose={closeInvite} />
-        </ScrollArea>
-      </Modal>
-    </div>
-  );
-}

apps/client/src/components/ui/card-carousel.module.css

@@ -1,68 +0,0 @@
-.root {
-  position: relative;
-}
-
-.track {
-  display: flex;
-  gap: var(--mantine-spacing-md);
-  overflow-x: auto;
-  scroll-snap-type: x mandatory;
-  scroll-behavior: smooth;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  padding: 2px;
-  margin: -2px;
-}
-
-.track::-webkit-scrollbar {
-  display: none;
-}
-
-.track > * {
-  scroll-snap-align: start;
-  flex: 0 0 auto;
-}
-
-.arrow {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 32px;
-  height: 32px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  border: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
-  background: light-dark(var(--mantine-color-white), var(--mantine-color-dark-6));
-  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
-  cursor: pointer;
-  padding: 0;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 120ms ease, background-color 120ms ease, transform 120ms ease;
-  z-index: 2;
-}
-
-.root:hover .arrow.visible,
-.arrow.visible:focus-visible {
-  opacity: 1;
-  pointer-events: auto;
-}
-
-.arrow:hover {
-  background: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-5));
-}
-
-.arrow:active {
-  transform: translateY(-50%) scale(0.95);
-}
-
-.arrowLeft {
-  left: -14px;
-}
-
-.arrowRight {
-  right: -14px;
-}

apps/client/src/components/ui/card-carousel.tsx

@@ -1,77 +0,0 @@
-import { useCallback, useEffect, useRef, useState, type ReactNode } from "react";
-import { IconChevronLeft, IconChevronRight } from "@tabler/icons-react";
-import { useTranslation } from "react-i18next";
-import classes from "./card-carousel.module.css";
-
-type Props = {
-  children: ReactNode;
-  ariaLabel?: string;
-};
-
-export default function CardCarousel({ children, ariaLabel }: Props) {
-  const { t } = useTranslation();
-  const trackRef = useRef<HTMLDivElement>(null);
-  const [canScrollLeft, setCanScrollLeft] = useState(false);
-  const [canScrollRight, setCanScrollRight] = useState(false);
-
-  const updateScrollState = useCallback(() => {
-    const el = trackRef.current;
-    if (!el) return;
-    const maxScroll = el.scrollWidth - el.clientWidth;
-    setCanScrollLeft(el.scrollLeft > 1);
-    setCanScrollRight(el.scrollLeft < maxScroll - 1);
-  }, []);
-
-  useEffect(() => {
-    updateScrollState();
-    const el = trackRef.current;
-    if (!el) return;
-
-    const observer = new ResizeObserver(updateScrollState);
-    observer.observe(el);
-    for (const child of Array.from(el.children)) {
-      observer.observe(child);
-    }
-
-    return () => observer.disconnect();
-  }, [updateScrollState, children]);
-
-  const scrollBy = (direction: 1 | -1) => {
-    const el = trackRef.current;
-    if (!el) return;
-    el.scrollBy({ left: direction * el.clientWidth * 0.85, behavior: "smooth" });
-  };
-
-  return (
-    <div className={classes.root}>
-      <div
-        ref={trackRef}
-        className={classes.track}
-        onScroll={updateScrollState}
-        {...(ariaLabel ? { role: "region", "aria-label": ariaLabel } : {})}
-      >
-        {children}
-      </div>
-
-      <button
-        type="button"
-        className={`${classes.arrow} ${classes.arrowLeft} ${canScrollLeft ? classes.visible : ""}`}
-        onClick={() => scrollBy(-1)}
-        aria-label={t("Scroll left")}
-        tabIndex={canScrollLeft ? 0 : -1}
-      >
-        <IconChevronLeft size={18} />
-      </button>
-
-      <button
-        type="button"
-        className={`${classes.arrow} ${classes.arrowRight} ${canScrollRight ? classes.visible : ""}`}
-        onClick={() => scrollBy(1)}
-        aria-label={t("Scroll right")}
-        tabIndex={canScrollRight ? 0 : -1}
-      >
-        <IconChevronRight size={18} />
-      </button>
-    </div>
-  );
-}

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

@@ -1,67 +0,0 @@
-import { useState, useEffect } from "react";
-import { Modal, Button, Group } from "@mantine/core";
-import { useTranslation } from "react-i18next";
-import { DestinationPicker } from "./destination-picker";
-import {
-  DestinationPickerModalProps,
-  DestinationSelection,
-} from "./destination-picker.types";
-
-export function DestinationPickerModal({
-  opened,
-  onClose,
-  title,
-  actionLabel,
-  onSelect,
-  loading,
-  excludePageId,
-  pageLimit,
-}: DestinationPickerModalProps) {
-  const { t } = useTranslation();
-  const [selection, setSelection] = useState<DestinationSelection | null>(null);
-
-  useEffect(() => {
-    if (!opened) {
-      setSelection(null);
-    }
-  }, [opened]);
-
-  return (
-    <Modal.Root
-      opened={opened}
-      onClose={onClose}
-      size={550}
-      padding="lg"
-      yOffset="10vh"
-      onClick={(e) => e.stopPropagation()}
-    >
-      <Modal.Overlay />
-      <Modal.Content>
-        <Modal.Header py={0}>
-          <Modal.Title fw={500}>{title}</Modal.Title>
-          <Modal.CloseButton />
-        </Modal.Header>
-        <Modal.Body>
-          <DestinationPicker
-            onSelectionChange={setSelection}
-            excludePageId={excludePageId}
-            pageLimit={pageLimit}
-          />
-
-          <Group justify="flex-end" mt="md">
-            <Button variant="default" onClick={onClose}>
-              {t("Close")}
-            </Button>
-            <Button
-              onClick={() => selection && onSelect(selection)}
-              disabled={!selection}
-              loading={loading}
-            >
-              {actionLabel}
-            </Button>
-          </Group>
-        </Modal.Body>
-      </Modal.Content>
-    </Modal.Root>
-  );
-}

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

@@ -1,128 +0,0 @@
-.searchInput {
-    margin-bottom: var(--mantine-spacing-sm);
-}
-
-.scrollArea {
-    max-height: 50vh;
-}
-
-.row {
-    padding: 6px 12px;
-    border-radius: var(--mantine-radius-sm);
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    transition: background-color 150ms ease;
-    user-select: none;
-
-    @mixin hover {
-        background-color: light-dark(
-                var(--mantine-color-gray-0),
-                var(--mantine-color-dark-6)
-        );
-    }
-}
-
-.selected {
-    background-color: light-dark(
-            var(--mantine-color-blue-0),
-            var(--mantine-color-dark-5)
-    );
-    border-left: 2px solid var(--mantine-primary-color-filled);
-}
-
-.spaceRow {
-    composes: row;
-    font-weight: 500;
-}
-
-.pageRow {
-    composes: row;
-    font-weight: 400;
-}
-
-.disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-    pointer-events: none;
-}
-
-.chevron {
-    width: 20px;
-    height: 20px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: var(--mantine-radius-sm);
-    flex-shrink: 0;
-    transition: transform 150ms ease;
-    color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
-
-    @mixin hover {
-        background-color: light-dark(
-                var(--mantine-color-gray-1),
-                var(--mantine-color-dark-5)
-        );
-    }
-}
-
-.chevronExpanded {
-    transform: rotate(90deg);
-}
-
-.loadMore {
-    text-align: center;
-    padding: 6px;
-    color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
-    font-size: var(--mantine-font-size-sm);
-    cursor: pointer;
-
-    @mixin hover {
-        text-decoration: underline;
-    }
-}
-
-.selectedIndicator {
-    padding: 8px 12px;
-    font-size: var(--mantine-font-size-sm);
-    color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
-    border-top: 1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4));
-    margin-top: var(--mantine-spacing-xs);
-}
-
-.emptyState {
-    padding: 12px;
-    text-align: center;
-    font-size: var(--mantine-font-size-sm);
-    color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
-}
-
-.searchResult {
-    composes: row;
-}
-
-.pageTitle {
-    flex: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    font-size: var(--mantine-font-size-sm);
-}
-
-.spaceName {
-    color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
-    font-size: var(--mantine-font-size-xs);
-    flex-shrink: 0;
-}
-
-.iconWrapper {
-    width: 22px;
-    height: 22px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    font-size: 16px;
-    line-height: 1;
-}

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

@@ -1,168 +0,0 @@
-import { useState, useCallback } from "react";
-import { TextInput, ScrollArea, Loader } from "@mantine/core";
-import { useDebouncedValue } from "@mantine/hooks";
-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";
-import { ISpace } from "@/features/space/types/space.types";
-import { IPage } from "@/features/page/types/page.types";
-import { DestinationSelection } from "./destination-picker.types";
-import { SpaceRow } from "./space-row";
-import classes from "./destination-picker.module.css";
-
-type DestinationPickerProps = {
-  onSelectionChange: (selection: DestinationSelection | null) => void;
-  excludePageId?: string;
-  pageLimit?: number;
-};
-
-export function DestinationPicker({
-  onSelectionChange,
-  excludePageId,
-  pageLimit = 15,
-}: DestinationPickerProps) {
-  const { t } = useTranslation();
-  const [searchQuery, setSearchQuery] = useState("");
-  const [selection, setSelection] = useState<DestinationSelection | null>(null);
-  const [debouncedQuery] = useDebouncedValue(searchQuery, 300);
-
-  const { data: spacesData, isLoading: spacesLoading } = useGetSpacesQuery({
-    limit: 100,
-  });
-
-  const searchEnabled = debouncedQuery && debouncedQuery.length >= 2;
-
-  const { data: searchData, isLoading: searchLoading } =
-    useSearchSuggestionsQuery({
-      query: searchEnabled ? debouncedQuery : "",
-      includePages: true,
-      limit: 20,
-    });
-
-  const isSearching = !!searchEnabled;
-
-  const selectedId =
-    selection?.type === "space" ? selection.spaceId : selection?.pageId ?? null;
-
-  const updateSelection = useCallback(
-    (next: DestinationSelection | null) => {
-      setSelection(next);
-      onSelectionChange(next);
-    },
-    [onSelectionChange],
-  );
-
-  const handleSearchResultClick = (page: Partial<IPage>) => {
-    if (!page.space || !page.id) return;
-
-    updateSelection({
-      type: "page",
-      spaceId: page.space.id,
-      pageId: page.id,
-      page,
-      space: page.space,
-    });
-    setSearchQuery("");
-  };
-
-  const handleSelectSpace = useCallback(
-    (space: ISpace) => {
-      updateSelection({ type: "space", spaceId: space.id, space });
-    },
-    [updateSelection],
-  );
-
-  const handleSelectPage = useCallback(
-    (page: Partial<IPage>, space: ISpace) => {
-      if (!page.id) return;
-      updateSelection({
-        type: "page",
-        spaceId: page.spaceId ?? space.id,
-        pageId: page.id,
-        page,
-        space,
-      });
-    },
-    [updateSelection],
-  );
-
-  return (
-    <>
-      <TextInput
-        leftSection={<IconSearch size={16} />}
-        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}>
-        {isSearching ? (
-          searchLoading ? (
-            <div className={classes.emptyState}>
-              <Loader size="xs" />
-            </div>
-          ) : searchData?.pages && searchData.pages.length > 0 ? (
-            searchData.pages.map(
-              (page) =>
-                page && (
-                  <div
-                    key={page.id}
-                    className={classes.searchResult}
-                    onClick={() => handleSearchResultClick(page)}
-                  >
-                    <div className={classes.iconWrapper}>
-                      {page.icon ? (
-                        page.icon
-                      ) : (
-                        <IconFile
-                          size={16}
-                          color="var(--mantine-color-gray-5)"
-                        />
-                      )}
-                    </div>
-                    <div className={classes.pageTitle}>
-                      {page.title || t("Untitled")}
-                    </div>
-                    {page.space && (
-                      <div className={classes.spaceName}>
-                        {page.space.name}
-                      </div>
-                    )}
-                  </div>
-                ),
-            )
-          ) : (
-            <div className={classes.emptyState}>{t("No results found")}</div>
-          )
-        ) : spacesLoading ? (
-          <div className={classes.emptyState}>
-            <Loader size="xs" />
-          </div>
-        ) : (
-          spacesData?.items?.map((space) => (
-            <SpaceRow
-              key={space.id}
-              space={space}
-              limit={pageLimit}
-              selectedId={selectedId}
-              excludePageId={excludePageId}
-              onSelectSpace={handleSelectSpace}
-              onSelectPage={handleSelectPage}
-            />
-          ))
-        )}
-      </ScrollArea>
-
-      {selection && (
-        <div className={classes.selectedIndicator}>
-          {selection.type === "space"
-            ? selection.space.name
-            : `${selection.space.name} / ${selection.page.title || t("Untitled")}`}
-        </div>
-      )}
-    </>
-  );
-}

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

@@ -1,23 +0,0 @@
-import { ISpace } from "@/features/space/types/space.types";
-import { IPage } from "@/features/page/types/page.types";
-
-export type DestinationSelection =
-  | { type: "space"; spaceId: string; space: ISpace }
-  | {
-      type: "page";
-      spaceId: string;
-      pageId: string;
-      page: Partial<IPage>;
-      space: Partial<ISpace>;
-    };
-
-export type DestinationPickerModalProps = {
-  opened: boolean;
-  onClose: () => void;
-  title: string;
-  actionLabel: string;
-  onSelect: (selection: DestinationSelection) => void | Promise<void>;
-  loading?: boolean;
-  excludePageId?: string;
-  pageLimit?: number;
-};

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

@@ -1,83 +0,0 @@
-import { useInfiniteQuery } from "@tanstack/react-query";
-import { Loader } from "@mantine/core";
-import { useTranslation } from "react-i18next";
-import { getSidebarPages } from "@/features/page/services/page-service";
-import { IPage } from "@/features/page/types/page.types";
-import { IPagination } from "@/lib/types";
-import { PageRow } from "./page-row";
-import classes from "./destination-picker.module.css";
-
-type PageChildrenProps = {
-  spaceId: string;
-  pageId?: string;
-  depth: number;
-  limit: number;
-  selectedId: string | null;
-  excludePageId?: string;
-  onSelectPage: (page: Partial<IPage>) => void;
-};
-
-export function PageChildren({
-  spaceId,
-  pageId,
-  depth,
-  limit,
-  selectedId,
-  excludePageId,
-  onSelectPage,
-}: PageChildrenProps) {
-  const { t } = useTranslation();
-
-  const { data, isLoading, hasNextPage, fetchNextPage } = useInfiniteQuery({
-    queryKey: ["destination-pages", spaceId, pageId ?? "root"],
-    queryFn: ({ pageParam }) =>
-      getSidebarPages({
-        spaceId,
-        pageId,
-        limit,
-        cursor: pageParam,
-      }),
-    initialPageParam: undefined as string | undefined,
-    getNextPageParam: (lastPage: IPagination<IPage>) =>
-      lastPage.meta?.nextCursor ?? undefined,
-  });
-
-  const pages = data?.pages.flatMap((page) => page.items) ?? [];
-
-  if (isLoading) {
-    return (
-      <div className={classes.emptyState}>
-        <Loader size="xs" />
-      </div>
-    );
-  }
-
-  if (pages.length === 0) {
-    return (
-      <div className={classes.emptyState}>
-        {pageId ? t("No pages inside") : t("No pages in this space")}
-      </div>
-    );
-  }
-
-  return (
-    <>
-      {pages.map((page) => (
-        <PageRow
-          key={page.id}
-          page={page}
-          depth={depth}
-          limit={limit}
-          selectedId={selectedId}
-          excludePageId={excludePageId}
-          onSelect={onSelectPage}
-        />
-      ))}
-      {hasNextPage && (
-        <div className={classes.loadMore} onClick={() => fetchNextPage()}>
-          {t("Load more")}
-        </div>
-      )}
-    </>
-  );
-}

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

@@ -1,89 +0,0 @@
-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";
-import classes from "./destination-picker.module.css";
-
-type PageRowProps = {
-  page: Partial<IPage>;
-  depth: number;
-  limit: number;
-  selectedId: string | null;
-  excludePageId?: string;
-  onSelect: (page: Partial<IPage>) => void;
-};
-
-export function PageRow({
-  page,
-  depth,
-  limit,
-  selectedId,
-  excludePageId,
-  onSelect,
-}: PageRowProps) {
-  const { t } = useTranslation();
-  const [expanded, setExpanded] = useState(false);
-
-  const isExcluded = page.id === excludePageId;
-  const isSelected = page.id === selectedId;
-
-  const rowClasses = [
-    classes.pageRow,
-    isSelected && classes.selected,
-    isExcluded && classes.disabled,
-  ]
-    .filter(Boolean)
-    .join(" ");
-
-  return (
-    <>
-      <div
-        className={rowClasses}
-        style={{ paddingLeft: depth * 20 + 12 }}
-        onClick={() => !isExcluded && onSelect(page)}
-      >
-        {page.hasChildren ? (
-          <div
-            className={`${classes.chevron} ${expanded ? classes.chevronExpanded : ""}`}
-            onClick={(e) => {
-              e.stopPropagation();
-              setExpanded(!expanded);
-            }}
-          >
-            <IconChevronRight size={14} />
-          </div>
-        ) : (
-          <div style={{ width: 20, flexShrink: 0 }} />
-        )}
-
-        <div className={classes.iconWrapper}>
-          {page.icon ? (
-            page.icon
-          ) : (
-            <IconFile
-              size={16}
-              color="var(--mantine-color-gray-5)"
-            />
-          )}
-        </div>
-
-        <div className={classes.pageTitle}>
-          {page.title || t("Untitled")}
-        </div>
-      </div>
-
-      {expanded && page.hasChildren && (
-        <PageChildren
-          spaceId={page.spaceId}
-          pageId={page.id}
-          depth={depth + 1}
-          limit={limit}
-          selectedId={selectedId}
-          excludePageId={excludePageId}
-          onSelectPage={onSelect}
-        />
-      )}
-    </>
-  );
-}

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

@@ -1,108 +0,0 @@
-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";
-import { IPage } from "@/features/page/types/page.types";
-import { SpaceRole } from "@/lib/types";
-import { CustomAvatar } from "@/components/ui/custom-avatar";
-import { AvatarIconType } from "@/features/attachments/types/attachment.types";
-import { PageChildren } from "./page-children";
-import classes from "./destination-picker.module.css";
-
-type SpaceRowProps = {
-  space: ISpace;
-  limit: number;
-  selectedId: string | null;
-  excludePageId?: string;
-  onSelectSpace: (space: ISpace) => void;
-  onSelectPage: (page: Partial<IPage>, space: ISpace) => void;
-};
-
-export function SpaceRow({
-  space,
-  limit,
-  selectedId,
-  excludePageId,
-  onSelectSpace,
-  onSelectPage,
-}: SpaceRowProps) {
-  const { t } = useTranslation();
-  const [expanded, setExpanded] = useState(false);
-
-  const writable =
-    !!space.membership?.role && space.membership.role !== SpaceRole.READER;
-  const isSelected = space.id === selectedId;
-
-  const rowClasses = [
-    classes.spaceRow,
-    isSelected && classes.selected,
-    !writable && classes.disabled,
-  ]
-    .filter(Boolean)
-    .join(" ");
-
-  const rowContent = (
-    <div
-      className={rowClasses}
-      onClick={() => writable && onSelectSpace(space)}
-    >
-      {writable ? (
-        <div
-          className={`${classes.chevron} ${expanded ? classes.chevronExpanded : ""}`}
-          onClick={(e) => {
-            e.stopPropagation();
-            setExpanded(!expanded);
-          }}
-        >
-          <IconChevronRight size={14} />
-        </div>
-      ) : (
-        <div style={{ width: 20, flexShrink: 0 }} />
-      )}
-
-      <CustomAvatar
-        name={space.name}
-        avatarUrl={space.logo}
-        type={AvatarIconType.SPACE_ICON}
-        size={22}
-      />
-
-      <div className={classes.pageTitle}>{space.name}</div>
-
-      {!writable && (
-        <IconLock
-          size={14}
-          color="var(--mantine-color-gray-5)"
-        />
-      )}
-    </div>
-  );
-
-  return (
-    <>
-      {writable ? (
-        rowContent
-      ) : (
-        <Tooltip
-          label={t("You don't have permission to create pages here")}
-          position="right"
-          withArrow
-        >
-          <div>{rowContent}</div>
-        </Tooltip>
-      )}
-
-      {expanded && writable && (
-        <PageChildren
-          spaceId={space.id}
-          depth={1}
-          limit={limit}
-          selectedId={selectedId}
-          excludePageId={excludePageId}
-          onSelectPage={(page) => onSelectPage(page, space)}
-        />
-      )}
-    </>
-  );
-}

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

@@ -1,106 +0,0 @@
-import { useEffect, useRef } from "react";
-import { useLocation, useNavigate, useParams } from "react-router-dom";
-import { useChatInfoQuery } from "../queries/ai-chat-query";
-import { useChatStream } from "../hooks/use-chat-stream";
-import ChatMessageList from "./chat-message-list";
-import ChatEmptyState from "./chat-empty-state";
-import ChatInput from "./chat-input";
-import type { HomeAiPromptInitialState } from "@/features/home/components/home-ai-prompt";
-import classes from "../styles/ai-chat.module.css";
-
-export default function AiChatLayout() {
-  const { chatId } = useParams<{ chatId: string }>();
-  const location = useLocation();
-  const navigate = useNavigate();
-  const chatInfoQuery = useChatInfoQuery(chatId);
-
-  // If the URL points at a chat the user does not own, the info fetch 404s.
-  // Bounce them back to /ai so they cannot interact with any chat UI (including
-  // kicking off orphan uploads) tied to a chat they have no access to.
-  useEffect(() => {
-    if (chatId && chatInfoQuery.isError) {
-      navigate("/ai", { replace: true });
-    }
-  }, [chatId, chatInfoQuery.isError, navigate]);
-  const {
-    messages,
-    streamingContent,
-    streamingToolCalls,
-    isStreaming,
-    error,
-    sendMessage,
-    stopGeneration,
-    hydrateFromServer,
-  } = useChatStream(chatId);
-
-  const autoSentRef = useRef(false);
-
-  useEffect(() => {
-    if (chatInfoQuery.data?.messages) {
-      hydrateFromServer(chatInfoQuery.data.messages);
-    }
-  }, [chatInfoQuery.data, hydrateFromServer]);
-
-  useEffect(() => {
-    if (autoSentRef.current || chatId) return;
-    const state = location.state as HomeAiPromptInitialState | null;
-    if (!state?.initialContent && !state?.initialAttachments?.length) return;
-
-    autoSentRef.current = true;
-    sendMessage(
-      state.initialContent ?? "",
-      state.initialMentions ?? [],
-      state.initialAttachments ?? [],
-    );
-    navigate(location.pathname, { replace: true, state: null });
-  }, [chatId, location, navigate, sendMessage]);
-
-  const hasMessages = messages.length > 0 || isStreaming;
-
-  // While the redirect effect is running (or if the user is still on this
-  // component for any reason) never render the chat UI for a forbidden chat.
-  if (chatId && chatInfoQuery.isError) {
-    return null;
-  }
-
-  return (
-    <div className={classes.main}>
-      {error && (
-        <div
-          style={{
-            padding: "var(--mantine-spacing-sm) var(--mantine-spacing-lg)",
-            color: "var(--mantine-color-red-6)",
-            fontSize: "var(--mantine-font-size-sm)",
-          }}
-        >
-          {error}
-        </div>
-      )}
-
-      {hasMessages ? (
-        <>
-          <ChatMessageList
-            messages={messages}
-            isStreaming={isStreaming}
-            streamingContent={streamingContent}
-            streamingToolCalls={streamingToolCalls}
-          />
-          <div className={classes.inputArea}>
-            <ChatInput
-              isStreaming={isStreaming}
-              onSend={sendMessage}
-              onStop={stopGeneration}
-              chatId={chatId}
-            />
-          </div>
-        </>
-      ) : (
-        <ChatEmptyState
-          isStreaming={isStreaming}
-          onSend={sendMessage}
-          onStop={stopGeneration}
-        />
-      )}
-    </div>
-  );
-}

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

@@ -1,166 +0,0 @@
-import { useState, useRef, useEffect, useMemo, useCallback } from "react";
-import { ActionIcon, Menu, TextInput } from "@mantine/core";
-import { IconDots, IconTrash, IconEdit } from "@tabler/icons-react";
-import { Link } from "react-router-dom";
-import { useTranslation } from "react-i18next";
-import type { AiChat } from "../types/ai-chat.types";
-import classes from "../styles/chat-sidebar.module.css";
-
-type Props = {
-  chat: AiChat;
-  isActive: boolean;
-  onDelete: (chatId: string) => void;
-  onRename: (chatId: string, title: string) => void;
-};
-
-function formatChatDate(
-  isoString: string | Date,
-  locale: string | undefined,
-): string {
-  const date = new Date(isoString);
-  if (Number.isNaN(date.getTime())) return "";
-
-  const now = new Date();
-  const startOfToday = new Date(
-    now.getFullYear(),
-    now.getMonth(),
-    now.getDate(),
-  ).getTime();
-  const ts = date.getTime();
-  const sameYear = date.getFullYear() === now.getFullYear();
-
-  if (ts >= startOfToday) {
-    return date.toLocaleTimeString(locale, {
-      hour: "numeric",
-      minute: "2-digit",
-    });
-  }
-
-  if (sameYear) {
-    return date.toLocaleDateString(locale, {
-      month: "short",
-      day: "numeric",
-    });
-  }
-
-  return date.toLocaleDateString(locale, {
-    month: "short",
-    day: "numeric",
-    year: "numeric",
-  });
-}
-
-export default function AiChatSidebarItem({
-  chat,
-  isActive,
-  onDelete,
-  onRename,
-}: Props) {
-  const { t, i18n } = useTranslation();
-  const [renaming, setRenaming] = useState(false);
-  const [renameValue, setRenameValue] = useState("");
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  const formattedDate = useMemo(
-    () => formatChatDate(chat.updatedAt, i18n.language),
-    [chat.updatedAt, i18n.language],
-  );
-
-  useEffect(() => {
-    if (renaming) {
-      // Wait for the input to be mounted before selecting.
-      const id = window.setTimeout(() => inputRef.current?.select(), 0);
-      return () => window.clearTimeout(id);
-    }
-  }, [renaming]);
-
-  const startRename = useCallback(() => {
-    setRenameValue(chat.title || "");
-    setRenaming(true);
-  }, [chat.title]);
-
-  const submitRename = useCallback(() => {
-    const trimmed = renameValue.trim();
-    if (trimmed && trimmed !== chat.title) {
-      onRename(chat.id, trimmed);
-    }
-    setRenaming(false);
-  }, [renameValue, chat.id, chat.title, onRename]);
-
-  if (renaming) {
-    return (
-      <div className={classes.chatItem} data-active={isActive || undefined}>
-        <TextInput
-          ref={inputRef}
-          size="xs"
-          variant="unstyled"
-          placeholder={t("Chat name")}
-          value={renameValue}
-          onChange={(e) => setRenameValue(e.currentTarget.value)}
-          onKeyDown={(e) => {
-            if (e.key === "Enter") {
-              e.preventDefault();
-              submitRename();
-            } else if (e.key === "Escape") {
-              e.preventDefault();
-              setRenaming(false);
-            }
-          }}
-          onBlur={submitRename}
-          classNames={{ input: classes.chatItemRenameInput }}
-          style={{ flex: 1 }}
-        />
-      </div>
-    );
-  }
-
-  return (
-    <Link
-      to={`/ai/chat/${chat.id}`}
-      className={classes.chatItem}
-      data-active={isActive || undefined}
-    >
-      <span className={classes.chatItemTitle}>
-        {chat.title || t("Untitled chat")}
-      </span>
-      <span className={classes.chatItemDate}>{formattedDate}</span>
-      <div className={classes.chatItemActions}>
-        <Menu position="bottom-end" withinPortal>
-          <Menu.Target>
-            <ActionIcon
-              variant="subtle"
-              size="xs"
-              color="gray"
-              onClick={(e) => e.preventDefault()}
-            >
-              <IconDots size={14} />
-            </ActionIcon>
-          </Menu.Target>
-          <Menu.Dropdown>
-            <Menu.Item
-              leftSection={<IconEdit size={14} />}
-              onClick={(e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                startRename();
-              }}
-            >
-              {t("Rename")}
-            </Menu.Item>
-            <Menu.Item
-              leftSection={<IconTrash size={14} />}
-              color="red"
-              onClick={(e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                onDelete(chat.id);
-              }}
-            >
-              {t("Delete")}
-            </Menu.Item>
-          </Menu.Dropdown>
-        </Menu>
-      </div>
-    </Link>
-  );
-}

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

@@ -1,180 +0,0 @@
-import { useState, useCallback, useEffect, useMemo, useRef } from "react";
-import { Link, useNavigate, useParams } from "react-router-dom";
-import { ActionIcon, Center, TextInput, Loader, Tooltip } from "@mantine/core";
-import { useDebouncedValue } from "@mantine/hooks";
-import { IconPlus, IconSearch, IconMessageCircle2 } from "@tabler/icons-react";
-import { useTranslation } from "react-i18next";
-import {
-  useChatsQuery,
-  useDeleteChatMutation,
-  useUpdateChatTitleMutation,
-  useSearchChatsQuery,
-} from "../queries/ai-chat-query";
-import AiChatSidebarItem from "./ai-chat-sidebar-item";
-import { groupChatsByAge } from "../utils/group-chats-by-age";
-import classes from "../styles/chat-sidebar.module.css";
-
-export default function AiChatSidebar() {
-  const { t } = useTranslation();
-  const navigate = useNavigate();
-  const { chatId } = useParams<{ chatId: string }>();
-  const [search, setSearch] = useState("");
-  const [debouncedSearch] = useDebouncedValue(search, 300);
-  const chatsQuery = useChatsQuery();
-  const searchQuery = useSearchChatsQuery(debouncedSearch);
-  const deleteMutation = useDeleteChatMutation();
-  const renameMutation = useUpdateChatTitleMutation();
-
-  const chats = useMemo(() => {
-    if (debouncedSearch) {
-      return searchQuery.data || [];
-    }
-    return chatsQuery.data?.pages.flatMap((p) => p.items) || [];
-  }, [debouncedSearch, searchQuery.data, chatsQuery.data]);
-
-  const groupedChats = useMemo(() => groupChatsByAge(chats, t), [chats, t]);
-
-  const sentinelRef = useRef<HTMLDivElement>(null);
-  const { hasNextPage, fetchNextPage, isFetchingNextPage } = chatsQuery;
-  const isSearching = Boolean(debouncedSearch);
-
-  useEffect(() => {
-    if (isSearching) return;
-    const sentinel = sentinelRef.current;
-    if (!sentinel) return;
-
-    const observer = new IntersectionObserver(
-      (entries) => {
-        if (entries[0].isIntersecting && hasNextPage && !isFetchingNextPage) {
-          fetchNextPage();
-        }
-      },
-      { threshold: 0.1 },
-    );
-
-    observer.observe(sentinel);
-    return () => observer.disconnect();
-  }, [isSearching, hasNextPage, isFetchingNextPage, fetchNextPage]);
-
-  const handleNewChat = useCallback(
-    (event: React.MouseEvent<HTMLAnchorElement>) => {
-      if (
-        event.button !== 0 ||
-        event.ctrlKey ||
-        event.metaKey ||
-        event.shiftKey
-      ) {
-        return;
-      }
-      event.preventDefault();
-      navigate("/ai");
-    },
-    [navigate],
-  );
-
-  const handleDelete = useCallback(
-    (id: string) => {
-      deleteMutation.mutate(id, {
-        onSuccess: () => {
-          if (chatId === id) {
-            navigate("/ai");
-          }
-        },
-      });
-    },
-    [deleteMutation, chatId, navigate],
-  );
-
-  const handleRename = useCallback(
-    (chatId: string, title: string) => {
-      renameMutation.mutate({ chatId, title });
-    },
-    [renameMutation],
-  );
-
-  const isLoading = chatsQuery.isLoading || searchQuery.isLoading;
-
-  return (
-    <div className={classes.sidebar}>
-      <div className={classes.header}>
-        <span className={classes.title}>{t("AI Chat")}</span>
-        <Tooltip label={t("New chat")} openDelay={250} withArrow>
-          <ActionIcon
-            component={Link}
-            to="/ai"
-            variant="subtle"
-            color="gray"
-            onClick={handleNewChat}
-            aria-label={t("New chat")}
-          >
-            <IconPlus size={18} />
-          </ActionIcon>
-        </Tooltip>
-      </div>
-
-      <TextInput
-        className={classes.searchInput}
-        placeholder="Search chats..."
-        leftSection={<IconSearch size={14} />}
-        size="xs"
-        value={search}
-        onChange={(e) => setSearch(e.currentTarget.value)}
-      />
-
-      <div className={classes.chatList}>
-        {isLoading && <Loader size="xs" mx="auto" mt="md" />}
-        {!isLoading && chats.length === 0 && (
-          <div className={classes.chatListEmpty}>
-            <IconMessageCircle2
-              size={28}
-              stroke={1.5}
-              className={classes.chatListEmptyIcon}
-            />
-            <div className={classes.chatListEmptyTitle}>
-              {isSearching ? t("No chats found") : t("No conversations yet")}
-            </div>
-            <div className={classes.chatListEmptyHint}>
-              {isSearching
-                ? t("Try a different search term.")
-                : t("Start a new chat to see it here.")}
-            </div>
-          </div>
-        )}
-        {isSearching
-          ? chats.map((chat) => (
-              <AiChatSidebarItem
-                key={chat.id}
-                chat={chat}
-                isActive={chat.id === chatId}
-                onDelete={handleDelete}
-                onRename={handleRename}
-              />
-            ))
-          : groupedChats.map((group) => (
-              <div key={group.key} className={classes.chatGroup}>
-                <div className={classes.chatGroupLabel}>{group.label}</div>
-                {group.chats.map((chat) => (
-                  <AiChatSidebarItem
-                    key={chat.id}
-                    chat={chat}
-                    isActive={chat.id === chatId}
-                    onDelete={handleDelete}
-                    onRename={handleRename}
-                  />
-                ))}
-              </div>
-            ))}
-        {!isSearching && (
-          <>
-            <div ref={sentinelRef} style={{ height: 1 }} />
-            {isFetchingNextPage && (
-              <Center py="xs">
-                <Loader size="xs" />
-              </Center>
-            )}
-          </>
-        )}
-      </div>
-    </div>
-  );
-}

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

@@ -1,67 +0,0 @@
-import { useState } from "react";
-import { TextInput, Loader, Text, ScrollArea } from "@mantine/core";
-import { IconSearch } from "@tabler/icons-react";
-import { useChatsQuery, useSearchChatsQuery } from "../queries/ai-chat-query";
-import { useDebouncedValue } from "@mantine/hooks";
-import { useTranslation } from "react-i18next";
-import classes from "../styles/aside-chat-panel.module.css";
-
-type Props = {
-  activeChatId: string | undefined;
-  onSelect: (chatId: string) => void;
-};
-
-export default function AsideChatHistory({ activeChatId, onSelect }: Props) {
-  const { t } = useTranslation();
-  const [searchValue, setSearchValue] = useState("");
-  const [debouncedSearch] = useDebouncedValue(searchValue, 300);
-
-  const chatsQuery = useChatsQuery();
-  const searchQuery = useSearchChatsQuery(debouncedSearch);
-
-  const isSearching = debouncedSearch.length > 0;
-  const chats = isSearching
-    ? (searchQuery.data ?? [])
-    : (chatsQuery.data?.pages.flatMap((p) => p.items) ?? []);
-  const isLoading = isSearching ? searchQuery.isLoading : chatsQuery.isLoading;
-
-  return (
-    <div>
-      <TextInput
-        placeholder={t("Search chats...")}
-        leftSection={<IconSearch size={14} />}
-        size="xs"
-        mb="xs"
-        value={searchValue}
-        onChange={(e) => setSearchValue(e.currentTarget.value)}
-      />
-
-      {isLoading ? (
-        <div style={{ display: "flex", justifyContent: "center", padding: 16 }}>
-          <Loader size="sm" />
-        </div>
-      ) : chats.length === 0 ? (
-        <Text size="sm" c="dimmed" ta="center" py="md">
-          {isSearching ? t("No chats found") : t("No chat history")}
-        </Text>
-      ) : (
-        <ScrollArea.Autosize mah={300} scrollbars="y">
-          <div className={classes.historyList}>
-            {chats.map((chat) => (
-              <div
-                key={chat.id}
-                className={classes.historyItem}
-                data-active={chat.id === activeChatId || undefined}
-                onClick={() => onSelect(chat.id)}
-              >
-                <span className={classes.historyItemTitle}>
-                  {chat.title || t("Untitled chat")}
-                </span>
-              </div>
-            ))}
-          </div>
-        </ScrollArea.Autosize>
-      )}
-    </div>
-  );
-}

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

@@ -1,258 +0,0 @@
-import { useState, useEffect, useCallback } from "react";
-import { ActionIcon, Popover, Tooltip, UnstyledButton } from "@mantine/core";
-import {
-  IconPlus,
-  IconChevronDown,
-  IconArrowsDiagonal,
-  IconX,
-  IconSparkles,
-  IconFileText,
-  IconLanguage,
-  IconSearch,
-} from "@tabler/icons-react";
-import { useAtom } from "jotai";
-import { useNavigate, useParams } from "react-router-dom";
-import { useTranslation } from "react-i18next";
-import { asideStateAtom } from "@/components/layouts/global/hooks/atoms/sidebar-atom";
-import { usePageQuery } from "@/features/page/queries/page-query";
-import { extractPageSlugId } from "@/lib";
-import { useChatStream } from "../hooks/use-chat-stream";
-import { useChatInfoQuery } from "../queries/ai-chat-query";
-import ChatMessageList from "./chat-message-list";
-import ChatInput from "./chat-input";
-import AsideChatHistory from "./aside-chat-history";
-import type { ChatAttachment, PageMention } from "../types/ai-chat.types";
-import classes from "../styles/aside-chat-panel.module.css";
-
-type QuickAction = {
-  icon: React.ReactNode;
-  label: string;
-  prompt: string;
-};
-
-export default function AsideChatPanel() {
-  const { t } = useTranslation();
-  const navigate = useNavigate();
-  const [, setAsideState] = useAtom(asideStateAtom);
-  const [chatId, setChatId] = useState<string | undefined>(undefined);
-  const [historyOpen, setHistoryOpen] = useState(false);
-  const [contextPages, setContextPages] = useState<PageMention[]>([]);
-  const { pageSlug } = useParams();
-  const slugId = extractPageSlugId(pageSlug);
-  const { data: page } = usePageQuery({ pageId: slugId });
-
-  const chatInfoQuery = useChatInfoQuery(chatId);
-  const {
-    messages,
-    streamingContent,
-    streamingToolCalls,
-    isStreaming,
-    error,
-    sendMessage,
-    stopGeneration,
-    hydrateFromServer,
-  } = useChatStream(chatId, {
-    onChatCreated: (newChatId) => {
-      setChatId(newChatId);
-    },
-  });
-
-  useEffect(() => {
-    if (page && !chatId) {
-      setContextPages([{ id: page.id, title: page.title || "", slugId: page.slugId }]);
-    }
-  }, [page, chatId]);
-
-  const handleRemoveContextPage = useCallback((pageId: string) => {
-    setContextPages((prev) => prev.filter((p) => p.id !== pageId));
-  }, []);
-
-  useEffect(() => {
-    if (chatInfoQuery.data?.messages) {
-      hydrateFromServer(chatInfoQuery.data.messages);
-    }
-  }, [chatInfoQuery.data, hydrateFromServer]);
-
-  // Drop the open chatId if the current user lost access to it (404/403 on
-  // the info fetch). Reverts the panel to a fresh chat instead of presenting
-  // an input tied to a chat the user does not own.
-  useEffect(() => {
-    if (chatId && chatInfoQuery.isError) {
-      setChatId(undefined);
-    }
-  }, [chatId, chatInfoQuery.isError]);
-
-  const handleNewChat = useCallback(
-    (event: React.MouseEvent<HTMLAnchorElement>) => {
-      if (
-        event.button !== 0 ||
-        event.ctrlKey ||
-        event.metaKey ||
-        event.shiftKey
-      ) {
-        return;
-      }
-      event.preventDefault();
-      setChatId(undefined);
-      if (page) {
-        setContextPages([
-          { id: page.id, title: page.title || "", slugId: page.slugId },
-        ]);
-      }
-    },
-    [page],
-  );
-
-  const handleSelectChat = useCallback((selectedChatId: string) => {
-    setChatId(selectedChatId);
-    setHistoryOpen(false);
-  }, []);
-
-  const handleExpand = useCallback(() => {
-    if (chatId) {
-      navigate(`/ai/chat/${chatId}`);
-    } else {
-      navigate("/ai");
-    }
-    setAsideState({ tab: "", isAsideOpen: false });
-  }, [chatId, navigate, setAsideState]);
-
-  const handleClose = useCallback(() => {
-    setAsideState({ tab: "", isAsideOpen: false });
-  }, [setAsideState]);
-
-  const handleSend = useCallback(
-    (content: string, mentions: PageMention[], attachments: ChatAttachment[]) => {
-      const contextPageId = contextPages.length > 0 ? contextPages[0].id : undefined;
-      sendMessage(content, mentions, attachments, contextPageId);
-    },
-    [sendMessage, contextPages],
-  );
-
-  const handleQuickAction = useCallback(
-    (prompt: string) => {
-      handleSend(prompt, [], []);
-    },
-    [handleSend],
-  );
-
-  const hasMessages = messages.length > 0 || isStreaming;
-
-  const quickActions: QuickAction[] = [
-    { icon: <IconFileText size={16} />, label: t("Summarize this page"), prompt: "Summarize this page" },
-    { icon: <IconLanguage size={16} />, label: t("Translate this page"), prompt: "Translate this page" },
-    { icon: <IconSearch size={16} />, label: t("Analyze for insights"), prompt: "Analyze this page for insights" },
-  ];
-
-  return (
-    <div className={classes.panel}>
-      <div className={classes.toolbar}>
-        <Popover
-          opened={historyOpen}
-          onChange={setHistoryOpen}
-          position="bottom-start"
-          width={280}
-          shadow="md"
-        >
-          <Popover.Target>
-            <UnstyledButton
-              className={classes.titleButton}
-              onClick={() => setHistoryOpen((o) => !o)}
-            >
-              <span className={classes.titleText}>
-                {chatInfoQuery.data?.chat?.title || t("New chat")}
-              </span>
-              <IconChevronDown size={16} stroke={1.75} />
-            </UnstyledButton>
-          </Popover.Target>
-          <Popover.Dropdown>
-            <AsideChatHistory activeChatId={chatId} onSelect={handleSelectChat} />
-          </Popover.Dropdown>
-        </Popover>
-
-        <div className={classes.toolbarSpacer} />
-
-        <Tooltip label={t("New chat")} openDelay={250}>
-          <ActionIcon
-            component="a"
-            href="/ai"
-            variant="subtle"
-            color="dark"
-            onClick={handleNewChat}
-          >
-            <IconPlus size={20} stroke={1.75} />
-          </ActionIcon>
-        </Tooltip>
-
-        <Tooltip label={t("Open full page")} openDelay={250}>
-          <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" onClick={handleClose}>
-            <IconX size={20} stroke={1.75} />
-          </ActionIcon>
-        </Tooltip>
-      </div>
-
-      {error && (
-        <div
-          style={{
-            padding: "var(--mantine-spacing-xs) var(--mantine-spacing-sm)",
-            color: "var(--mantine-color-red-6)",
-            fontSize: "var(--mantine-font-size-xs)",
-          }}
-        >
-          {error}
-        </div>
-      )}
-
-      {hasMessages ? (
-        <>
-          <div className={classes.messages} data-aside-chat>
-            <ChatMessageList
-              messages={messages}
-              isStreaming={isStreaming}
-              streamingContent={streamingContent}
-              streamingToolCalls={streamingToolCalls}
-            />
-          </div>
-        </>
-      ) : (
-        <div className={classes.emptyState}>
-          <IconSparkles size={36} stroke={1.5} className={classes.emptyStateIcon} />
-          <div className={classes.emptyStateTitle}>{t("How can I help you today?")}</div>
-          <div className={classes.quickActions}>
-            {quickActions.map((action) => (
-              <button
-                key={action.label}
-                type="button"
-                className={classes.quickAction}
-                onClick={() => handleQuickAction(action.prompt)}
-              >
-                <span className={classes.quickActionIcon}>{action.icon}</span>
-                {action.label}
-              </button>
-            ))}
-          </div>
-        </div>
-      )}
-
-      <div className={classes.inputArea}>
-        <ChatInput
-          isStreaming={isStreaming}
-          onSend={handleSend}
-          onStop={stopGeneration}
-          placeholder={t("Ask anything...")}
-          autofocus={false}
-          contextPages={contextPages}
-          onRemoveContextPage={handleRemoveContextPage}
-          variant="flat"
-          chatId={chatId}
-        />
-      </div>
-    </div>
-  );
-}

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

@@ -1,91 +0,0 @@
-import {
-  IconSparkles,
-  IconSearch,
-  IconFilePlus,
-  IconEdit,
-  IconFileText,
-} from "@tabler/icons-react";
-import { useTranslation } from "react-i18next";
-import ChatInput from "./chat-input";
-import type { ChatAttachment, PageMention } from "../types/ai-chat.types";
-import classes from "../styles/ai-chat.module.css";
-
-type Suggestion = {
-  icon: React.ReactNode;
-  text: string;
-  prompt: string;
-};
-
-const SUGGESTIONS: Suggestion[] = [
-  {
-    icon: <IconSearch size={16} />,
-    text: "Search across all pages",
-    prompt: "Search for pages about ",
-  },
-  {
-    icon: <IconFilePlus size={16} />,
-    text: "Create a new page",
-    prompt: "Create a new page titled ",
-  },
-  {
-    icon: <IconFileText size={16} />,
-    text: "Summarize a page",
-    prompt: "Summarize the page @",
-  },
-  {
-    icon: <IconEdit size={16} />,
-    text: "Update page content",
-    prompt: "Update the page @",
-  },
-];
-
-type Props = {
-  isStreaming: boolean;
-  onSend: (content: string, mentions: PageMention[], attachments: ChatAttachment[]) => void;
-  onStop: () => void;
-};
-
-export default function ChatEmptyState({ isStreaming, onSend, onStop }: Props) {
-  const { t } = useTranslation();
-
-  const handleSuggestionClick = (prompt: string) => {
-    onSend(prompt, [], []);
-  };
-
-  return (
-    <div className={classes.emptyState}>
-      <IconSparkles size={48} stroke={1.5} className={classes.emptyStateIcon} />
-      <div className={classes.emptyStateBrand}>{t("Docmost AI")}</div>
-      <div className={classes.emptyStateTitle}>
-        {t("What can I help you with?")}
-      </div>
-
-      <div className={classes.emptyStateInput}>
-        <ChatInput
-          isStreaming={isStreaming}
-          onSend={onSend}
-          onStop={onStop}
-          placeholder="Ask anything... Use @ to mention pages"
-          autofocus
-        />
-      </div>
-
-      <div className={classes.suggestionsSection}>
-        <div className={classes.suggestionsLabel}>Get started</div>
-        <div className={classes.suggestionsGrid}>
-          {SUGGESTIONS.map((s) => (
-            <button
-              key={s.text}
-              type="button"
-              className={classes.suggestionCard}
-              onClick={() => handleSuggestionClick(s.prompt)}
-            >
-              <span className={classes.suggestionIcon}>{s.icon}</span>
-              <span className={classes.suggestionText}>{s.text}</span>
-            </button>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-}

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

@@ -1,409 +0,0 @@
-import { useCallback, useRef, useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { IconArrowUp, IconPaperclip, IconPlayerStopFilled, IconX, IconFile, IconPhoto, IconPlus, IconAt, IconFileText } from "@tabler/icons-react";
-import { Popover } from "@mantine/core";
-import { notifications } from "@mantine/notifications";
-import { EditorContent, ReactNodeViewRenderer, useEditor } from "@tiptap/react";
-import { Placeholder } from "@tiptap/extension-placeholder";
-import { CharacterCount } from "@tiptap/extensions";
-import { StarterKit } from "@tiptap/starter-kit";
-import { Mention, LinkExtension } from "@docmost/editor-ext";
-import EmojiCommand from "@/features/editor/extensions/emoji-command";
-import mentionRenderItems from "@/features/editor/components/mention/mention-suggestion";
-import MentionView from "@/features/editor/components/mention/mention-view";
-import { uploadChatFile } from "../services/ai-chat-service";
-import type { ChatAttachment, PageMention } from "../types/ai-chat.types";
-import classes from "../styles/chat-input.module.css";
-
-type PendingAttachment = ChatAttachment & { uploading: boolean };
-
-const IMAGE_EXTENSIONS = ["png", "jpg", "jpeg", "webp", "gif"];
-const ACCEPTED_FILE_TYPES = ".pdf,.docx,.txt,.csv,.md,.png,.jpg,.jpeg,.webp";
-// Kept in sync with MAX_ATTACHMENTS_PER_MESSAGE in apps/server/src/ee/ai-chat/ai-chat-limits.ts
-const MAX_ATTACHMENTS_PER_MESSAGE = 5;
-
-type Props = {
-  isStreaming: boolean;
-  onSend: (content: string, mentions: PageMention[], attachments: ChatAttachment[]) => void;
-  onStop: () => void;
-  placeholder?: string;
-  autofocus?: boolean;
-  contextPages?: PageMention[];
-  onRemoveContextPage?: (pageId: string) => void;
-  variant?: "card" | "flat";
-  showDisclaimer?: boolean;
-  chatId?: string;
-};
-
-function extractMentions(json: any): PageMention[] {
-  const mentions: PageMention[] = [];
-  const seen = new Set<string>();
-
-  function walk(node: any) {
-    if (node.type === "mention" && node.attrs?.entityType === "page" && node.attrs?.entityId) {
-      if (!seen.has(node.attrs.entityId)) {
-        seen.add(node.attrs.entityId);
-        mentions.push({
-          id: node.attrs.entityId,
-          title: node.attrs.label || "",
-          slugId: node.attrs.slugId || "",
-        });
-      }
-    }
-    if (node.content) {
-      for (const child of node.content) {
-        walk(child);
-      }
-    }
-  }
-
-  walk(json);
-  return mentions;
-}
-
-function editorJsonToText(json: any): string {
-  let text = "";
-
-  function walk(node: any) {
-    if (node.type === "text") {
-      text += node.text || "";
-    } else if (node.type === "mention") {
-      text += `@${node.attrs?.label || ""}`;
-    } else if (node.type === "paragraph") {
-      if (text.length > 0) text += "\n";
-      if (node.content) {
-        for (const child of node.content) {
-          walk(child);
-        }
-      }
-      return;
-    }
-    if (node.content) {
-      for (const child of node.content) {
-        walk(child);
-      }
-    }
-  }
-
-  walk(json);
-  return text;
-}
-
-export default function ChatInput({
-  isStreaming,
-  onSend,
-  onStop,
-  placeholder,
-  autofocus = true,
-  contextPages,
-  onRemoveContextPage,
-  variant = "card",
-  showDisclaimer = true,
-  chatId,
-}: Props) {
-  const chatIdRef = useRef(chatId);
-  chatIdRef.current = chatId;
-  const { t } = useTranslation();
-  const [isEmpty, setIsEmpty] = useState(true);
-  const [pendingAttachments, setPendingAttachments] = useState<PendingAttachment[]>([]);
-  const [plusMenuOpen, setPlusMenuOpen] = useState(false);
-  const fileInputRef = useRef<HTMLInputElement>(null);
-  const onSendRef = useRef(onSend);
-  onSendRef.current = onSend;
-
-  const handleFileSelect = useCallback(async (files: FileList | null) => {
-    if (!files?.length) return;
-
-    const room = MAX_ATTACHMENTS_PER_MESSAGE - pendingAttachments.length;
-    if (room <= 0) {
-      notifications.show({
-        color: "yellow",
-        message: t("You can attach up to {{max}} files per message.", {
-          max: MAX_ATTACHMENTS_PER_MESSAGE,
-        }),
-      });
-      if (fileInputRef.current) fileInputRef.current.value = "";
-      return;
-    }
-
-    const incoming = Array.from(files);
-    const accepted = incoming.slice(0, room);
-
-    if (incoming.length > accepted.length) {
-      notifications.show({
-        color: "yellow",
-        message: t(
-          "Only the first {{n}} file(s) were added (max {{max}} per message).",
-          { n: accepted.length, max: MAX_ATTACHMENTS_PER_MESSAGE },
-        ),
-      });
-    }
-
-    for (const file of accepted) {
-      const tempId = `uploading-${Date.now()}-${Math.random()}`;
-      const ext = file.name.split(".").pop()?.toLowerCase() || "";
-
-      const placeholder: PendingAttachment = {
-        id: tempId,
-        fileName: file.name,
-        fileExt: ext,
-        fileSize: file.size,
-        mimeType: file.type,
-        uploading: true,
-      };
-
-      setPendingAttachments((prev) => [...prev, placeholder]);
-
-      try {
-        const uploaded = await uploadChatFile(file, chatIdRef.current);
-        setPendingAttachments((prev) =>
-          prev.map((a) =>
-            a.id === tempId ? { ...uploaded, uploading: false } : a,
-          ),
-        );
-      } catch {
-        setPendingAttachments((prev) => prev.filter((a) => a.id !== tempId));
-      }
-    }
-
-    if (fileInputRef.current) {
-      fileInputRef.current.value = "";
-    }
-  }, [pendingAttachments.length, t]);
-
-  const removeAttachment = useCallback((id: string) => {
-    setPendingAttachments((prev) => prev.filter((a) => a.id !== id));
-  }, []);
-
-  const handleSubmit = useCallback(() => {
-    if (!editor || isStreaming) return;
-    const json = editor.getJSON();
-    const text = editorJsonToText(json).trim();
-    const readyAttachments = pendingAttachments.filter((a) => !a.uploading);
-    if (!text && readyAttachments.length === 0) return;
-
-    const mentions = extractMentions(json);
-    onSendRef.current(text, mentions, readyAttachments);
-    editor.commands.clearContent();
-    editor.commands.focus();
-    setPendingAttachments([]);
-  }, [isStreaming, pendingAttachments]);
-
-  const handleSubmitRef = useRef(handleSubmit);
-  handleSubmitRef.current = handleSubmit;
-
-  const editor = useEditor({
-    extensions: [
-      StarterKit.configure({
-        gapcursor: false,
-        dropcursor: false,
-        link: false,
-      }),
-      Placeholder.configure({
-        placeholder: placeholder || "Ask anything... Use @ to mention pages",
-      }),
-      CharacterCount.configure({
-        limit: 50000,
-      }),
-      LinkExtension,
-      EmojiCommand,
-      Mention.configure({
-        suggestion: {
-          allowSpaces: true,
-          items: () => [],
-          // @ts-ignore
-          render: mentionRenderItems,
-        },
-        HTMLAttributes: {
-          class: "mention",
-        },
-      }).extend({
-        addNodeView() {
-          this.editor.isInitialized = true;
-          return ReactNodeViewRenderer(MentionView);
-        },
-      }),
-    ],
-    editorProps: {
-      handleDOMEvents: {
-        keydown: (_view, event) => {
-          if (
-            ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Enter"].includes(
-              event.key,
-            )
-          ) {
-            const emojiCommand = document.querySelector("#emoji-command");
-            const mentionPopup = document.querySelector("#mention");
-            if (emojiCommand || mentionPopup) {
-              return true;
-            }
-          }
-
-          if (event.key === "Enter" && !event.shiftKey) {
-            event.preventDefault();
-            handleSubmitRef.current();
-            return true;
-          }
-        },
-      },
-    },
-    content: "",
-    editable: true,
-    immediatelyRender: true,
-    shouldRerenderOnTransaction: false,
-    autofocus: autofocus ? "end" : false,
-    onUpdate: ({ editor: e }) => {
-      setIsEmpty(!e.getText().trim());
-    },
-  });
-
-  useEffect(() => {
-    if (editor && autofocus) {
-      editor.commands.focus();
-    }
-  }, [editor]);
-
-  const hasContent = !isEmpty || pendingAttachments.some((a) => !a.uploading) || (contextPages?.length ?? 0) > 0;
-
-  const wrapperClass = variant === "flat" ? classes.inputWrapperFlat : classes.inputWrapper;
-
-  return (
-    <>
-    <div className={wrapperClass} data-chat-input>
-      <input
-        ref={fileInputRef}
-        type="file"
-        accept={ACCEPTED_FILE_TYPES}
-        multiple
-        style={{ display: "none" }}
-        onChange={(e) => handleFileSelect(e.target.files)}
-      />
-
-      {((contextPages?.length ?? 0) > 0 || pendingAttachments.length > 0) && (
-        <div className={classes.attachmentChips}>
-          {contextPages?.map((page) => (
-            <div key={page.id} className={classes.attachmentChip}>
-              <IconFileText size={14} />
-              <span className={classes.attachmentChipName}>
-                {page.title || "Untitled"}
-              </span>
-              {onRemoveContextPage && (
-                <button
-                  type="button"
-                  className={classes.attachmentChipRemove}
-                  onClick={() => onRemoveContextPage(page.id)}
-                  aria-label={`Remove ${page.title}`}
-                >
-                  <IconX size={12} />
-                </button>
-              )}
-            </div>
-          ))}
-          {pendingAttachments.map((attachment) => (
-            <div
-              key={attachment.id}
-              className={`${classes.attachmentChip} ${attachment.uploading ? classes.attachmentChipUploading : ""}`}
-            >
-              {IMAGE_EXTENSIONS.includes(attachment.fileExt) ? (
-                <IconPhoto size={14} />
-              ) : (
-                <IconFile size={14} />
-              )}
-              <span className={classes.attachmentChipName}>
-                {attachment.fileName}
-              </span>
-              {!attachment.uploading && (
-                <button
-                  type="button"
-                  className={classes.attachmentChipRemove}
-                  onClick={() => removeAttachment(attachment.id)}
-                  aria-label={`Remove ${attachment.fileName}`}
-                >
-                  <IconX size={12} />
-                </button>
-              )}
-            </div>
-          ))}
-        </div>
-      )}
-
-      <EditorContent editor={editor} className={classes.editorContent} />
-      <div className={classes.actions}>
-        <Popover opened={plusMenuOpen} onChange={setPlusMenuOpen} position="top-start" width={220} shadow="md">
-          <Popover.Target>
-            <button
-              type="button"
-              className={classes.plusButton}
-              onClick={() => setPlusMenuOpen((o) => !o)}
-              aria-label="Add content"
-            >
-              <IconPlus size={14} />
-            </button>
-          </Popover.Target>
-          <Popover.Dropdown p={4}>
-            <button
-              type="button"
-              className={classes.plusMenuItem}
-              onClick={() => {
-                fileInputRef.current?.click();
-                setPlusMenuOpen(false);
-              }}
-              disabled={pendingAttachments.length >= MAX_ATTACHMENTS_PER_MESSAGE}
-              title={
-                pendingAttachments.length >= MAX_ATTACHMENTS_PER_MESSAGE
-                  ? t("Max {{max}} files per message", {
-                      max: MAX_ATTACHMENTS_PER_MESSAGE,
-                    })
-                  : undefined
-              }
-            >
-              <IconPaperclip size={16} className={classes.plusMenuIcon} />
-              {t("Add files")}
-            </button>
-            <button
-              type="button"
-              className={classes.plusMenuItem}
-              onClick={() => {
-                editor?.commands.insertContent("@");
-                editor?.commands.focus();
-                setPlusMenuOpen(false);
-              }}
-            >
-              <IconAt size={16} className={classes.plusMenuIcon} />
-              Mention a page
-            </button>
-          </Popover.Dropdown>
-        </Popover>
-
-        <div style={{ flex: 1 }} />
-
-        {isStreaming ? (
-          <button
-            type="button"
-            className={classes.stopButton}
-            onClick={onStop}
-            aria-label="Stop generation"
-          >
-            <IconPlayerStopFilled size={14} />
-          </button>
-        ) : (
-          <button
-            type="button"
-            className={classes.sendButton}
-            onClick={handleSubmit}
-            disabled={!hasContent}
-            aria-label="Send message"
-          >
-            <IconArrowUp size={16} stroke={2.5} />
-          </button>
-        )}
-      </div>
-    </div>
-    {showDisclaimer && (
-      <div className={classes.disclaimer}>
-        {t("AI-generated content may not be accurate.")}
-      </div>
-    )}
-    </>
-  );
-}

apps/client/src/ee/ai-chat/components/chat-message-list.tsx

@@ -1,174 +0,0 @@
-import { useEffect, useRef, useCallback, useState } from "react";
-import { ErrorBoundary } from "react-error-boundary";
-import { IconArrowDown, IconAlertTriangle } from "@tabler/icons-react";
-import { useTranslation } from "react-i18next";
-import type { AiChatMessage, AiChatToolCall } from "../types/ai-chat.types";
-import ChatMessage from "./chat-message";
-import classes from "../styles/ai-chat.module.css";
-
-function ChatMessageErrorFallback() {
-  const { t } = useTranslation();
-  return (
-    <div className={classes.messageErrorFallback}>
-      <IconAlertTriangle size={14} />
-      <span>{t("Failed to render this message.")}</span>
-    </div>
-  );
-}
-
-type Props = {
-  messages: AiChatMessage[];
-  isStreaming: boolean;
-  streamingContent: string;
-  streamingToolCalls: AiChatToolCall[];
-};
-
-const BOTTOM_THRESHOLD_PX = 32;
-const SCROLL_UP_THRESHOLD_PX = 5;
-const SMOOTH_SCROLL_SETTLE_MS = 600;
-
-export default function ChatMessageList({
-  messages,
-  isStreaming,
-  streamingContent,
-  streamingToolCalls,
-}: Props) {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const bottomRef = useRef<HTMLDivElement>(null);
-  const isAtBottomRef = useRef(true);
-  const isAutoScrollingRef = useRef(false);
-  const prevScrollTopRef = useRef(0);
-  const [showScrollButton, setShowScrollButton] = useState(false);
-
-  const scrollToBottom = useCallback((behavior: ScrollBehavior = "smooth") => {
-    const container = containerRef.current;
-    if (!container) return;
-
-    isAutoScrollingRef.current = true;
-    const target = container.scrollHeight - container.clientHeight;
-    container.scrollTo({ top: target, behavior });
-    prevScrollTopRef.current = target;
-    isAtBottomRef.current = true;
-    setShowScrollButton(false);
-
-    if (behavior === "smooth") {
-      setTimeout(() => {
-        isAutoScrollingRef.current = false;
-        if (containerRef.current) {
-          prevScrollTopRef.current = containerRef.current.scrollTop;
-        }
-      }, SMOOTH_SCROLL_SETTLE_MS);
-    } else {
-      isAutoScrollingRef.current = false;
-    }
-  }, []);
-
-  const handleScroll = useCallback(() => {
-    if (isAutoScrollingRef.current) return;
-
-    const container = containerRef.current;
-    if (!container) return;
-
-    const currentScrollTop = container.scrollTop;
-    const scrolledUp =
-      currentScrollTop < prevScrollTopRef.current - SCROLL_UP_THRESHOLD_PX;
-    prevScrollTopRef.current = currentScrollTop;
-
-    const distanceFromBottom =
-      container.scrollHeight - currentScrollTop - container.clientHeight;
-    const atBottom = distanceFromBottom <= BOTTOM_THRESHOLD_PX;
-
-    if (scrolledUp) {
-      isAtBottomRef.current = atBottom;
-    } else if (atBottom) {
-      isAtBottomRef.current = true;
-    }
-
-    setShowScrollButton(!atBottom);
-  }, []);
-
-  useEffect(() => {
-    const container = containerRef.current;
-    if (!container) return;
-
-    container.addEventListener("scroll", handleScroll, { passive: true });
-    return () => container.removeEventListener("scroll", handleScroll);
-  }, [handleScroll]);
-
-  // Instant scroll during streaming to keep up with rapid updates
-  useEffect(() => {
-    if (isAtBottomRef.current) {
-      scrollToBottom("instant");
-    }
-  }, [streamingContent, streamingToolCalls.length, scrollToBottom]);
-
-  // Smooth scroll for new messages. Always force-scroll when the latest
-  // message is from the user (they just sent it), even if they were reading
-  // scrollback.
-  useEffect(() => {
-    const lastMessage = messages[messages.length - 1];
-    const lastIsUser = lastMessage?.role === "user";
-    if (lastIsUser || isAtBottomRef.current) {
-      scrollToBottom("smooth");
-      return;
-    }
-
-    // No auto-scroll: recompute from actual layout so that chat switches to
-    // content that doesn't overflow correctly hide the button even when no
-    // scroll event fires.
-    const container = containerRef.current;
-    if (!container) return;
-    const distanceFromBottom =
-      container.scrollHeight - container.scrollTop - container.clientHeight;
-    const atBottom = distanceFromBottom <= BOTTOM_THRESHOLD_PX;
-    isAtBottomRef.current = atBottom;
-    setShowScrollButton(!atBottom);
-  }, [messages, scrollToBottom]);
-
-  return (
-    <div className={classes.messageListWrapper}>
-      <div ref={containerRef} className={classes.messageList}>
-        {messages.map((msg) => (
-          <ErrorBoundary
-            key={msg.id}
-            fallback={<ChatMessageErrorFallback />}
-          >
-            <ChatMessage message={msg} />
-          </ErrorBoundary>
-        ))}
-        {isStreaming && (
-          <ErrorBoundary
-            resetKeys={[streamingContent, streamingToolCalls.length]}
-            fallback={<ChatMessageErrorFallback />}
-          >
-            <ChatMessage
-              message={{
-                id: "streaming",
-                chatId: "",
-                role: "assistant",
-                content: null,
-                toolCalls: null,
-                metadata: null,
-                createdAt: new Date().toISOString(),
-              }}
-              isStreaming
-              streamingContent={streamingContent}
-              streamingToolCalls={streamingToolCalls}
-            />
-          </ErrorBoundary>
-        )}
-        <div ref={bottomRef} />
-      </div>
-      {showScrollButton && (
-        <button
-          type="button"
-          aria-label="Scroll to bottom"
-          className={classes.scrollToBottomButton}
-          onClick={() => scrollToBottom("smooth")}
-        >
-          <IconArrowDown size={16} stroke={2} />
-        </button>
-      )}
-    </div>
-  );
-}

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

@@ -1,139 +0,0 @@
-import { useCallback } from "react";
-import { useNavigate } from "react-router";
-import DOMPurify from "dompurify";
-import { ActionIcon, Tooltip } from "@mantine/core";
-import {
-  IconCheck,
-  IconCopy,
-  IconFile,
-  IconLoader2,
-  IconPhoto,
-} from "@tabler/icons-react";
-import { markdownToHtml } from "@docmost/editor-ext";
-import { CopyButton } from "@/components/common/copy-button";
-import type { AiChatMessage, AiChatToolCall } from "../types/ai-chat.types";
-import ChatToolGroup from "./chat-tool-group";
-import classes from "../styles/chat-message.module.css";
-import CopyTextButton from "@/components/common/copy.tsx";
-
-const chatSanitizer = DOMPurify();
-chatSanitizer.addHook("afterSanitizeAttributes", (node) => {
-  if (node.tagName === "A") {
-    const href = node.getAttribute("href") || "";
-    if (href.startsWith("http://") || href.startsWith("https://")) {
-      node.setAttribute("target", "_blank");
-      node.setAttribute("rel", "noopener noreferrer");
-    }
-  }
-});
-
-const IMAGE_EXTENSIONS = ["png", "jpg", "jpeg", "webp", "gif"];
-
-type Props = {
-  message: AiChatMessage;
-  isStreaming?: boolean;
-  streamingContent?: string;
-  streamingToolCalls?: AiChatToolCall[];
-};
-
-export default function ChatMessage({
-  message,
-  isStreaming,
-  streamingContent,
-  streamingToolCalls,
-}: Props) {
-  const navigate = useNavigate();
-
-  const handleContentClick = useCallback(
-    (e: React.MouseEvent<HTMLDivElement>) => {
-      const target = e.target as HTMLElement;
-      const anchor = target.closest("a");
-      if (!anchor) return;
-
-      const href = anchor.getAttribute("href");
-      if (href && (href.startsWith("/s/") || href.startsWith("/p/"))) {
-        e.preventDefault();
-        navigate(href);
-      }
-    },
-    [navigate],
-  );
-
-  if (message.role === "tool") return null;
-
-  const isUser = message.role === "user";
-  const content = isStreaming ? streamingContent : message.content;
-  const toolCalls = isStreaming ? streamingToolCalls : message.toolCalls;
-
-  if (isUser) {
-    const displayContent = (content || "").replace(
-      /\n\n<referenced_pages>[\s\S]*<\/referenced_pages>$/,
-      "",
-    );
-    const attachments =
-      (message.metadata?.attachments as {
-        id: string;
-        fileName: string;
-        fileExt: string;
-      }[]) || [];
-
-    return (
-      <div className={classes.userMessage}>
-        <div className={classes.userBubble}>
-          {attachments.length > 0 && (
-            <div className={classes.messageAttachments}>
-              {attachments.map((a) => (
-                <span key={a.id} className={classes.messageAttachmentChip}>
-                  {IMAGE_EXTENSIONS.includes(a.fileExt) ? (
-                    <IconPhoto size={13} />
-                  ) : (
-                    <IconFile size={13} />
-                  )}
-                  {a.fileName}
-                </span>
-              ))}
-            </div>
-          )}
-          {displayContent}
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className={classes.assistantMessage}>
-      <div className={classes.messageContent}>
-        {toolCalls && toolCalls.length > 0 && (
-          <ChatToolGroup toolCalls={toolCalls} isStreaming={isStreaming} />
-        )}
-        {content && (
-          <div
-            onClick={handleContentClick}
-            dangerouslySetInnerHTML={{
-              __html: chatSanitizer.sanitize(
-                markdownToHtml(content) as string,
-                { ADD_ATTR: ["target", "rel"] },
-              ),
-            }}
-          />
-        )}
-        {isStreaming && (
-          <>
-            {!content && (
-              <span className={classes.processingIndicator}>
-                <IconLoader2 size={16} className={classes.processingSpinner} />
-                Thinking
-              </span>
-            )}
-            <span className={classes.streamingCursor} />
-          </>
-        )}
-      </div>
-      {!isStreaming && message.content && (
-        <div className={classes.messageActions}>
-          <CopyTextButton text={message?.content} />
-        </div>
-      )}
-    </div>
-  );
-}

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

@@ -1,56 +0,0 @@
-import { useState } from "react";
-import {
-  IconChevronRight,
-  IconChevronDown,
-  IconLoader2,
-} from "@tabler/icons-react";
-import type { AiChatToolCall } from "../types/ai-chat.types";
-import ChatToolResult, { TOOL_LABELS } from "./chat-tool-result";
-import classes from "../styles/chat-message.module.css";
-
-type Props = {
-  toolCalls: AiChatToolCall[];
-  isStreaming?: boolean;
-};
-
-export default function ChatToolGroup({ toolCalls, isStreaming }: Props) {
-  const [expanded, setExpanded] = useState(false);
-
-  if (!toolCalls || toolCalls.length === 0) return null;
-
-  const activeCall =
-    isStreaming && toolCalls.length > 0
-      ? [...toolCalls].reverse().find((tc) => tc.result === undefined)
-      : undefined;
-
-  const activeLabel = activeCall
-    ? TOOL_LABELS[activeCall.name] || activeCall.name
-    : null;
-
-  return (
-    <div className={classes.toolGroup}>
-      <div
-        className={classes.toolGroupHeader}
-        onClick={() => setExpanded((prev) => !prev)}
-      >
-        {activeLabel ? (
-          <IconLoader2 size={12} className={classes.processingSpinner} />
-        ) : expanded ? (
-          <IconChevronDown size={12} />
-        ) : (
-          <IconChevronRight size={12} />
-        )}
-        <span className={classes.toolGroupLabel}>
-          {activeLabel ? `${activeLabel}…` : `Steps ${toolCalls.length}`}
-        </span>
-      </div>
-      {expanded && (
-        <div className={classes.toolGroupSteps}>
-          {toolCalls.map((tc) => (
-            <ChatToolResult key={tc.id} toolCall={tc} />
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}

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

@@ -1,49 +0,0 @@
-import { useState } from "react";
-import { IconChevronRight, IconChevronDown } from "@tabler/icons-react";
-import type { AiChatToolCall } from "../types/ai-chat.types";
-import classes from "../styles/chat-message.module.css";
-
-export const TOOL_LABELS: Record<string, string> = {
-  list_spaces: "Listed spaces",
-  search_pages: "Searched pages",
-  get_page: "Read page",
-  create_page: "Created page",
-  update_page: "Updated page",
-};
-
-type Props = {
-  toolCall: AiChatToolCall;
-};
-
-export default function ChatToolResult({ toolCall }: Props) {
-  const [expanded, setExpanded] = useState(false);
-  const label = TOOL_LABELS[toolCall.name] || toolCall.name;
-
-  return (
-    <div className={classes.toolStep}>
-      <div
-        className={classes.toolStepRow}
-        onClick={() => setExpanded((prev) => !prev)}
-      >
-        <span className={classes.toolStepBullet}>·</span>
-        {expanded ? (
-          <IconChevronDown size={12} />
-        ) : (
-          <IconChevronRight size={12} />
-        )}
-        <span>{label}</span>
-      </div>
-      {expanded && (
-        <div className={classes.toolStepDetails}>
-          <pre style={{ margin: 0, whiteSpace: "pre-wrap" }}>
-            {JSON.stringify(
-              { args: toolCall.args, result: toolCall.result },
-              null,
-              2,
-            )}
-          </pre>
-        </div>
-      )}
-    </div>
-  );
-}

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

@@ -1,67 +0,0 @@
-import { Badge, Group, Text, Switch, Tooltip } from "@mantine/core";
-import { useAtom } from "jotai";
-import { workspaceAtom } from "@/features/user/atoms/current-user-atom.ts";
-import { 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";
-import { Feature } from "@/ee/features";
-import { useUpgradeLabel } from "@/ee/hooks/use-upgrade-label";
-
-export default function EnableAiChat() {
-  const { t } = useTranslation();
-
-  return (
-    <Group justify="space-between" wrap="nowrap" gap="xl">
-      <div>
-        <Group gap="xs" align="center">
-          <Text size="md">{t("AI Chat")}</Text>
-          <Badge color="gray" variant="light" size="sm" radius="sm">
-            {t("Beta")}
-          </Badge>
-        </Group>
-        <Text size="sm" c="dimmed">
-          {t(
-            "Enable AI Chat to allow users to have multi-turn conversations with AI about your workspace content.",
-          )}
-        </Text>
-      </div>
-
-      <AiChatToggle />
-    </Group>
-  );
-}
-
-function AiChatToggle() {
-  const { t } = useTranslation();
-  const [workspace, setWorkspace] = useAtom(workspaceAtom);
-  const [checked, setChecked] = useState(workspace?.settings?.ai?.chat);
-  const hasAccess = useHasFeature(Feature.AI);
-  const upgradeLabel = useUpgradeLabel();
-
-  const handleChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
-    const value = event.currentTarget.checked;
-    try {
-      const updatedWorkspace = await updateWorkspace({ aiChat: value } as any);
-      setChecked(value);
-      setWorkspace(updatedWorkspace);
-    } catch (err: any) {
-      notifications.show({
-        message: err?.response?.data?.message,
-        color: "red",
-      });
-    }
-  };
-
-  return (
-    <Tooltip label={upgradeLabel} disabled={hasAccess} refProp="rootRef">
-      <Switch
-        defaultChecked={checked}
-        onChange={handleChange}
-        disabled={!hasAccess}
-        aria-label={t("Toggle AI Chat")}
-      />
-    </Tooltip>
-  );
-}

apps/client/src/ee/ai-chat/hooks/use-chat-stream.ts

@@ -1,227 +0,0 @@
-import { useState, useCallback, useEffect, useRef } from "react";
-import { useQueryClient } from "@tanstack/react-query";
-import { useNavigate } from "react-router-dom";
-import { sendChatMessage } from "../services/ai-chat-service";
-import type {
-  AiChatMessage,
-  AiChatStreamEvent,
-  AiChatToolCall,
-  ChatAttachment,
-  PageMention,
-} from "../types/ai-chat.types";
-
-type ChatStreamOptions = {
-  onChatCreated?: (chatId: string) => void;
-};
-
-export function useChatStream(
-  chatId: string | undefined,
-  options?: ChatStreamOptions,
-) {
-  const [messages, setMessages] = useState<AiChatMessage[]>([]);
-  const [streamingContent, setStreamingContent] = useState("");
-  const [streamingToolCalls, setStreamingToolCalls] = useState<AiChatToolCall[]>(
-    [],
-  );
-  const [isStreaming, setIsStreaming] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [errorCode, setErrorCode] = useState<string | null>(null);
-  const [isRetryable, setIsRetryable] = useState(false);
-  const abortRef = useRef<AbortController | null>(null);
-  const queryClient = useQueryClient();
-  const navigate = useNavigate();
-  const currentChatIdRef = useRef(chatId);
-  currentChatIdRef.current = chatId;
-  // Tracks which chatId the local `messages` state currently represents.
-  // Set when we seed from a server fetch AND when we optimistically own a
-  // freshly-created chat after `chat_created`. This is the single authority
-  // marker that keeps server-state effects from clobbering in-flight streams.
-  const hydratedChatIdRef = useRef<string | undefined>(undefined);
-
-  // Reset local state when the consumer switches to a different chat.
-  // Skip the reset if the new chatId is one the hook itself already claimed
-  // during a new-chat flow — in that case our optimistic state is the truth.
-  useEffect(() => {
-    if (chatId && chatId === hydratedChatIdRef.current) return;
-    hydratedChatIdRef.current = undefined;
-    setMessages([]);
-    setError(null);
-    setErrorCode(null);
-    setIsRetryable(false);
-  }, [chatId]);
-
-  const hydrateFromServer = useCallback((msgs: AiChatMessage[]) => {
-    const forId = currentChatIdRef.current;
-    if (!forId) return;
-    if (hydratedChatIdRef.current === forId) return;
-    hydratedChatIdRef.current = forId;
-    setMessages(msgs);
-  }, []);
-
-  const sendMessage = useCallback(
-    (content: string, mentions: PageMention[] = [], attachments: ChatAttachment[] = [], contextPageId?: string) => {
-      if (isStreaming || (!content.trim() && attachments.length === 0)) return;
-
-      setError(null);
-      setErrorCode(null);
-      setIsRetryable(false);
-      setIsStreaming(true);
-      setStreamingContent("");
-      setStreamingToolCalls([]);
-
-      const metadata: Record<string, unknown> = {};
-      if (mentions.length) {
-        metadata.mentionedPageIds = mentions.map((m) => m.id);
-      }
-      if (attachments.length) {
-        metadata.attachments = attachments.map((a) => ({
-          id: a.id,
-          fileName: a.fileName,
-          fileExt: a.fileExt,
-        }));
-      }
-
-      const userMessage: AiChatMessage = {
-        id: `temp-${Date.now()}`,
-        chatId: currentChatIdRef.current || "",
-        role: "user",
-        content,
-        toolCalls: null,
-        metadata: Object.keys(metadata).length ? metadata : null,
-        createdAt: new Date().toISOString(),
-      };
-
-      setMessages((prev) => [...prev, userMessage]);
-
-      const attachmentIds = attachments.map((a) => a.id);
-
-      const abortController = sendChatMessage(
-        {
-          chatId: currentChatIdRef.current,
-          content,
-          mentionedPageIds: mentions.map((m) => m.id),
-          ...(contextPageId && { contextPageId }),
-          ...(attachmentIds.length && { attachmentIds }),
-        },
-        (event: AiChatStreamEvent) => {
-          switch (event.type) {
-            case "chat_created":
-              currentChatIdRef.current = event.chatId;
-              // Claim authority over this new chatId so when the consumer's
-              // prop catches up via navigation/onChatCreated, the reset effect
-              // sees a match and preserves our optimistic messages.
-              hydratedChatIdRef.current = event.chatId;
-              if (options?.onChatCreated) {
-                options.onChatCreated(event.chatId);
-              } else {
-                navigate(`/ai/chat/${event.chatId}`, { replace: true });
-              }
-              queryClient.invalidateQueries({ queryKey: ["ai-chats"] });
-              break;
-            case "content":
-              setStreamingContent((prev) => prev + event.text);
-              break;
-            case "tool_call":
-              setStreamingToolCalls((prev) => [
-                ...prev,
-                {
-                  id: event.id,
-                  name: event.name,
-                  args: event.args,
-                },
-              ]);
-              break;
-            case "tool_result":
-              setStreamingToolCalls((prev) =>
-                prev.map((tc) =>
-                  tc.id === event.id ? { ...tc, result: event.result } : tc,
-                ),
-              );
-              break;
-            case "done": {
-              setStreamingContent((currentContent) => {
-                setStreamingToolCalls((currentToolCalls) => {
-                  const assistantMessage: AiChatMessage = {
-                    id: event.messageId,
-                    chatId: currentChatIdRef.current || "",
-                    role: "assistant",
-                    content: currentContent || null,
-                    toolCalls: currentToolCalls.length
-                      ? currentToolCalls
-                      : null,
-                    metadata: event.usage ? { tokenUsage: event.usage } : null,
-                    createdAt: new Date().toISOString(),
-                  };
-
-                  setMessages((prev) => [...prev, assistantMessage]);
-                  return [];
-                });
-                return "";
-              });
-              setIsStreaming(false);
-              queryClient.invalidateQueries({
-                queryKey: ["ai-chat", currentChatIdRef.current],
-              });
-              break;
-            }
-            case "error":
-              setError(event.message);
-              setErrorCode(event.code || null);
-              setIsRetryable(event.retryable || false);
-              setIsStreaming(false);
-              break;
-          }
-        },
-        (errorMsg) => {
-          setError(errorMsg);
-          setIsStreaming(false);
-        },
-        () => {
-          setIsStreaming(false);
-        },
-      );
-
-      abortRef.current = abortController;
-    },
-    [isStreaming, navigate, queryClient],
-  );
-
-  const stopGeneration = useCallback(() => {
-    abortRef.current?.abort();
-    abortRef.current = null;
-
-    setStreamingContent((currentContent) => {
-      setStreamingToolCalls((currentToolCalls) => {
-        if (currentContent || currentToolCalls.length > 0) {
-          const partialMessage: AiChatMessage = {
-            id: `stopped-${Date.now()}`,
-            chatId: currentChatIdRef.current || "",
-            role: "assistant",
-            content: currentContent || null,
-            toolCalls: currentToolCalls.length ? currentToolCalls : null,
-            metadata: null,
-            createdAt: new Date().toISOString(),
-          };
-          setMessages((prev) => [...prev, partialMessage]);
-        }
-        return [];
-      });
-      return "";
-    });
-
-    setIsStreaming(false);
-  }, []);
-
-  return {
-    messages,
-    streamingContent,
-    streamingToolCalls,
-    isStreaming,
-    error,
-    errorCode,
-    isRetryable,
-    sendMessage,
-    stopGeneration,
-    hydrateFromServer,
-  };
-}

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

@@ -1,39 +0,0 @@
-import { useParams } from "react-router-dom";
-import { ErrorBoundary } from "react-error-boundary";
-import { Button } from "@mantine/core";
-import { IconAlertTriangle } from "@tabler/icons-react";
-import { useTranslation } from "react-i18next";
-import AiChatLayout from "../components/ai-chat-layout";
-import { EmptyState } from "@/components/ui/empty-state.tsx";
-import classes from "../styles/ai-chat.module.css";
-
-export default function AiChat() {
-  const { t } = useTranslation();
-  const { chatId } = useParams<{ chatId: string }>();
-
-  return (
-    <div className={classes.layout}>
-      <ErrorBoundary
-        resetKeys={[chatId]}
-        fallbackRender={({ resetErrorBoundary }) => (
-          <EmptyState
-            icon={IconAlertTriangle}
-            title={t("Failed to load chat. An error occurred.")}
-            action={
-              <Button
-                variant="default"
-                size="sm"
-                mt="xs"
-                onClick={resetErrorBoundary}
-              >
-                {t("Try again")}
-              </Button>
-            }
-          />
-        )}
-      >
-        <AiChatLayout />
-      </ErrorBoundary>
-    </div>
-  );
-}

apps/client/src/ee/ai-chat/queries/ai-chat-query.ts

@@ -1,61 +0,0 @@
-import {
-  useQuery,
-  useMutation,
-  useQueryClient,
-  useInfiniteQuery,
-} from "@tanstack/react-query";
-import {
-  listChats,
-  getChatInfo,
-  deleteChat,
-  updateChatTitle,
-  searchChats,
-} from "../services/ai-chat-service";
-
-export function useChatsQuery() {
-  return useInfiniteQuery({
-    queryKey: ["ai-chats"],
-    queryFn: ({ pageParam }) =>
-      listChats({ cursor: pageParam, limit: 30 }),
-    initialPageParam: undefined as string | undefined,
-    getNextPageParam: (lastPage) =>
-      lastPage.meta.hasNextPage ? lastPage.meta.nextCursor : undefined,
-  });
-}
-
-export function useChatInfoQuery(chatId: string | undefined) {
-  return useQuery({
-    queryKey: ["ai-chat", chatId],
-    queryFn: () => getChatInfo(chatId!),
-    enabled: !!chatId,
-  });
-}
-
-export function useDeleteChatMutation() {
-  const queryClient = useQueryClient();
-  return useMutation({
-    mutationFn: (chatId: string) => deleteChat(chatId),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["ai-chats"] });
-    },
-  });
-}
-
-export function useUpdateChatTitleMutation() {
-  const queryClient = useQueryClient();
-  return useMutation({
-    mutationFn: ({ chatId, title }: { chatId: string; title: string }) =>
-      updateChatTitle(chatId, title),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["ai-chats"] });
-    },
-  });
-}
-
-export function useSearchChatsQuery(query: string) {
-  return useQuery({
-    queryKey: ["ai-chats-search", query],
-    queryFn: () => searchChats(query),
-    enabled: query.length > 0,
-  });
-}

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

@@ -1,144 +0,0 @@
-import api from "@/lib/api-client.ts";
-import type {
-  AiChat,
-  AiChatMessage,
-  AiChatStreamEvent,
-  ChatAttachment,
-} from "../types/ai-chat.types";
-import { IPagination } from "@/lib/types.ts";
-
-export async function createChat(): Promise<AiChat> {
-  const req = await api.post<AiChat>("/ai/chats/create");
-  return req.data;
-}
-
-export async function listChats(params?: {
-  limit?: number;
-  cursor?: string;
-}): Promise<IPagination<AiChat>> {
-  const req = await api.post("/ai/chats", params);
-  return req.data;
-}
-
-export async function getChatInfo(
-  chatId: string,
-): Promise<{ chat: AiChat; messages: AiChatMessage[] }> {
-  const req = await api.post("/ai/chats/info", { chatId });
-  return req.data;
-}
-
-export async function deleteChat(chatId: string): Promise<void> {
-  await api.post("/ai/chats/delete", { chatId });
-}
-
-export async function updateChatTitle(
-  chatId: string,
-  title: string,
-): Promise<void> {
-  await api.post("/ai/chats/update", { chatId, title });
-}
-
-export async function searchChats(query: string): Promise<AiChat[]> {
-  const req = await api.post("/ai/chats/search", { query });
-  return req.data;
-}
-
-export async function uploadChatFile(
-  file: File,
-  chatId?: string,
-): Promise<ChatAttachment> {
-  const formData = new FormData();
-  formData.append("file", file);
-  if (chatId) {
-    formData.append("chatId", chatId);
-  }
-  return await api.post("/ai/chats/upload", formData, {
-    headers: { "Content-Type": "multipart/form-data" },
-  });
-}
-
-export function sendChatMessage(
-  params: {
-    chatId?: string;
-    content: string;
-    mentionedPageIds?: string[];
-    contextPageId?: string;
-    attachmentIds?: string[];
-  },
-  onEvent: (event: AiChatStreamEvent) => void,
-  onError?: (error: string) => void,
-  onComplete?: () => void,
-): AbortController {
-  const abortController = new AbortController();
-
-  (async () => {
-    try {
-      const response = await fetch("/api/ai/chats/send", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(params),
-        signal: abortController.signal,
-        credentials: "include",
-      });
-
-      if (!response.ok) {
-        const errorBody = await response.text();
-        let errorMessage = `HTTP error ${response.status}`;
-        try {
-          const parsed = JSON.parse(errorBody);
-          errorMessage = parsed.message || errorMessage;
-        } catch {
-          // use default
-        }
-        onError?.(errorMessage);
-        return;
-      }
-
-      const reader = response.body?.getReader();
-      const decoder = new TextDecoder();
-
-      if (!reader) {
-        onError?.("Response body is not readable");
-        return;
-      }
-
-      let buffer = "";
-      try {
-        while (true) {
-          const { done, value } = await reader.read();
-          if (done) break;
-
-          buffer += decoder.decode(value, { stream: true });
-          const lines = buffer.split("\n");
-          buffer = lines.pop() || "";
-
-          for (const line of lines) {
-            if (line.startsWith("data: ")) {
-              const data = line.slice(6);
-              if (data === "[DONE]") {
-                onComplete?.();
-                return;
-              }
-              try {
-                const parsed = JSON.parse(data) as AiChatStreamEvent;
-                onEvent(parsed);
-              } catch {
-                // Skip invalid JSON
-              }
-            }
-          }
-        }
-      } finally {
-        reader.releaseLock();
-      }
-
-      onComplete?.();
-    } catch (error: any) {
-      if (error.name !== "AbortError") {
-        onError?.(error.message);
-      }
-    }
-  })();
-
-  return abortController;
-}

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

@@ -1,169 +0,0 @@
-.layout {
-  display: flex;
-  height: 100%;
-  width: 100%;
-}
-
-.main {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  height: calc(100vh - 45px - 2 * var(--mantine-spacing-md));
-  max-width: 900px;
-  margin: 0 auto;
-  width: 100%;
-}
-
-.messageListWrapper {
-  flex: 1;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  height: 100%;
-  width: 100%;
-}
-
-.messageList {
-  flex: 1;
-  overflow-y: auto;
-  padding: var(--mantine-spacing-md) var(--mantine-spacing-lg);
-}
-
-.messageErrorFallback {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 8px 12px;
-  margin-bottom: var(--mantine-spacing-lg);
-  border-radius: var(--mantine-radius-sm);
-  background: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
-  color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
-  font-size: var(--mantine-font-size-xs);
-}
-
-.scrollToBottomButton {
-  position: absolute;
-  bottom: 12px;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 32px;
-  height: 32px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  border: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
-  background: light-dark(var(--mantine-color-white), var(--mantine-color-dark-6));
-  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
-  cursor: pointer;
-  padding: 0;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-  transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
-  z-index: 2;
-}
-
-.scrollToBottomButton:hover {
-  background: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-5));
-  border-color: light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-3));
-}
-
-.scrollToBottomButton:active {
-  transform: translateX(-50%) scale(0.95);
-}
-
-.inputArea {
-  padding: var(--mantine-spacing-xs) var(--mantine-spacing-lg) var(--mantine-spacing-lg);
-}
-
-/* Empty state - Notion AI style centered layout */
-.emptyState {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: var(--mantine-spacing-xl) var(--mantine-spacing-lg);
-}
-
-.emptyStateIcon {
-  width: 48px;
-  height: 48px;
-  margin-bottom: var(--mantine-spacing-sm);
-  color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
-}
-
-.emptyStateBrand {
-  font-size: var(--mantine-font-size-xs);
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
-  margin-bottom: var(--mantine-spacing-xs);
-}
-
-.emptyStateTitle {
-  font-size: 1.5rem;
-  font-weight: 600;
-  color: light-dark(var(--mantine-color-gray-8), var(--mantine-color-dark-0));
-  margin-bottom: var(--mantine-spacing-xl);
-  text-align: center;
-}
-
-.emptyStateInput {
-  width: 100%;
-  max-width: 600px;
-  margin-bottom: var(--mantine-spacing-xl);
-  padding: 6px 0;
-}
-
-.suggestionsSection {
-  width: 100%;
-  max-width: 600px;
-}
-
-.suggestionsLabel {
-  font-size: var(--mantine-font-size-xs);
-  font-weight: 500;
-  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);
-}
-
-.suggestionsGrid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: var(--mantine-spacing-sm);
-}
-
-.suggestionCard {
-  display: flex;
-  align-items: flex-start;
-  gap: var(--mantine-spacing-sm);
-  padding: var(--mantine-spacing-sm) var(--mantine-spacing-md);
-  border: 1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
-  border-radius: var(--mantine-radius-md);
-  cursor: pointer;
-  background: transparent;
-  transition: background-color 150ms, border-color 150ms;
-  text-align: left;
-  width: 100%;
-
-  @mixin hover {
-    background: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
-    border-color: light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
-  }
-}
-
-.suggestionIcon {
-  flex-shrink: 0;
-  color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
-  margin-top: 1px;
-}
-
-.suggestionText {
-  font-size: var(--mantine-font-size-sm);
-  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
-  line-height: 1.4;
-}

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

@@ -1,139 +0,0 @@
-.panel {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  overflow: hidden;
-}
-
-.toolbar {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 0 0 var(--mantine-spacing-sm) 0;
-  border-bottom: 1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
-}
-
-.toolbarSpacer {
-  flex: 1;
-}
-
-.titleButton {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 4px 8px;
-  border-radius: var(--mantine-radius-sm);
-  font-size: var(--mantine-font-size-sm);
-  font-weight: 500;
-  color: light-dark(var(--mantine-color-gray-8), var(--mantine-color-dark-0));
-  max-width: 60%;
-  min-width: 0;
-}
-
-.titleButton:hover {
-  background-color: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-6));
-}
-
-.titleText {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  min-width: 0;
-}
-
-.messages {
-  flex: 1;
-  overflow-y: auto;
-  padding: var(--mantine-spacing-sm) 0;
-  scroll-behavior: smooth;
-}
-
-.inputArea {
-  padding-top: var(--mantine-spacing-sm);
-}
-
-.emptyState {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: var(--mantine-spacing-md);
-  padding: var(--mantine-spacing-xl) var(--mantine-spacing-sm);
-}
-
-.emptyStateIcon {
-  color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
-}
-
-.emptyStateTitle {
-  font-size: var(--mantine-font-size-lg);
-  font-weight: 600;
-  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
-  text-align: center;
-}
-
-.quickActions {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  width: 100%;
-}
-
-.quickAction {
-  display: flex;
-  align-items: center;
-  gap: var(--mantine-spacing-sm);
-  padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
-  border: 1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
-  border-radius: var(--mantine-radius-md);
-  cursor: pointer;
-  background: transparent;
-  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
-  font-size: var(--mantine-font-size-sm);
-  text-align: left;
-  width: 100%;
-  transition: background-color 150ms, border-color 150ms;
-
-  @mixin hover {
-    background: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
-    border-color: light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
-  }
-}
-
-.quickActionIcon {
-  flex-shrink: 0;
-  color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
-}
-
-.historyList {
-  max-height: 300px;
-  overflow-y: auto;
-}
-
-.historyItem {
-  display: flex;
-  align-items: center;
-  padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
-  cursor: pointer;
-  border-radius: var(--mantine-radius-sm);
-  font-size: var(--mantine-font-size-sm);
-  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
-  transition: background-color 150ms;
-
-  @mixin hover {
-    background: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
-  }
-
-  &[data-active] {
-    background: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));
-  }
-}
-
-.historyItemTitle {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}

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

@@ -1,242 +0,0 @@
-.inputWrapper {
-  position: relative;
-  overflow: hidden;
-  border: 1px solid
-    light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
-  border-radius: 16px;
-  background: light-dark(var(--mantine-color-white), var(--mantine-color-dark-7));
-  box-shadow: light-dark(
-    0 2px 40px 4px rgba(0, 0, 0, 0.07),
-    0 2px 40px 4px rgba(0, 0, 0, 0.5)
-  );
-  transition:
-    border-color 150ms,
-    box-shadow 150ms;
-
-  &:focus-within {
-    border-color: light-dark(
-      var(--mantine-color-gray-3),
-      var(--mantine-color-dark-4)
-    );
-    box-shadow: light-dark(
-      0 4px 48px 6px rgba(0, 0, 0, 0.09),
-      0 4px 48px 6px rgba(0, 0, 0, 0.6)
-    );
-  }
-}
-
-.inputWrapperFlat {
-  position: relative;
-  overflow: hidden;
-  border: 1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
-  border-radius: 12px;
-  background: light-dark(var(--mantine-color-white), var(--mantine-color-dark-7));
-  box-shadow: none;
-  transition: border-color 150ms;
-
-  &:focus-within {
-    border-color: light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
-  }
-}
-
-.disclaimer {
-  margin-top: 6px;
-  text-align: center;
-  font-size: var(--mantine-font-size-xs);
-  color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
-}
-
-.attachmentChips {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  padding: 10px 14px 0;
-}
-
-.attachmentChip {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  padding: 4px 8px;
-  border-radius: 8px;
-  background: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-6));
-  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
-  font-size: var(--mantine-font-size-xs);
-  max-width: 200px;
-}
-
-.attachmentChipUploading {
-  opacity: 0.55;
-}
-
-.attachmentChipName {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.attachmentChipRemove {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: none;
-  background: none;
-  cursor: pointer;
-  padding: 0;
-  margin-left: 2px;
-  color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
-  border-radius: 50%;
-
-  @mixin hover {
-    color: light-dark(var(--mantine-color-gray-8), var(--mantine-color-dark-0));
-  }
-}
-
-.editorContent {
-  overflow: hidden;
-
-  :global(.ProseMirror) {
-    outline: none;
-    border: none;
-    background-color: transparent;
-    padding: 14px 18px 8px;
-    font-size: 15px;
-    line-height: 1.6;
-    max-height: 200px;
-    overflow-y: auto;
-    min-height: 24px;
-    color: light-dark(var(--mantine-color-gray-9), var(--mantine-color-dark-0));
-  }
-
-  :global(.ProseMirror p) {
-    margin-block-start: 0;
-    margin-block-end: 0;
-  }
-
-  :global(.ProseMirror p.is-editor-empty:first-child::before) {
-    color: light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-3));
-    content: attr(data-placeholder);
-    float: left;
-    height: 0;
-    pointer-events: none;
-  }
-}
-
-.actions {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  padding: 4px 12px 10px;
-  gap: var(--mantine-spacing-xs);
-}
-
-.sendButton {
-  width: 28px;
-  height: 28px;
-  min-width: 28px;
-  min-height: 28px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: none;
-  cursor: pointer;
-  transition: background-color 150ms, opacity 150ms;
-  background: light-dark(var(--mantine-color-dark-9), var(--mantine-color-gray-0));
-  color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-9));
-
-  &:disabled {
-    opacity: 0.25;
-    cursor: default;
-  }
-
-  @mixin hover {
-    &:not(:disabled) {
-      opacity: 0.85;
-    }
-  }
-}
-
-.attachButton {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: none;
-  background: none;
-  cursor: pointer;
-  padding: 2px;
-  color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
-  transition: color 150ms;
-
-  @mixin hover {
-    color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
-  }
-}
-
-.plusButton {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  border: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
-  background: none;
-  cursor: pointer;
-  color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
-  transition: color 150ms, background-color 150ms;
-
-  @mixin hover {
-    color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
-    background: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
-  }
-}
-
-.plusMenuItem {
-  display: flex;
-  align-items: center;
-  gap: var(--mantine-spacing-sm);
-  padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
-  border: none;
-  background: none;
-  cursor: pointer;
-  width: 100%;
-  font-size: var(--mantine-font-size-sm);
-  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
-  border-radius: var(--mantine-radius-sm);
-  transition: background-color 150ms;
-
-  @mixin hover {
-    background: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
-  }
-
-  &:disabled {
-    opacity: 0.45;
-    cursor: not-allowed;
-    background: none;
-  }
-}
-
-.plusMenuIcon {
-  color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
-}
-
-.stopButton {
-  width: 28px;
-  height: 28px;
-  min-width: 28px;
-  min-height: 28px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
-  cursor: pointer;
-  transition: background-color 150ms;
-  background: light-dark(var(--mantine-color-white), var(--mantine-color-dark-6));
-  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
-
-  @mixin hover {
-    background: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));
-  }
-}

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

@@ -1,286 +0,0 @@
-.message {
-  margin-bottom: var(--mantine-spacing-lg);
-}
-
-.userMessage {
-  composes: message;
-  display: flex;
-  justify-content: flex-end;
-}
-
-.userBubble {
-  max-width: 75%;
-  padding: 10px 16px;
-  border-radius: 18px;
-  background: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-6));
-  color: light-dark(var(--mantine-color-gray-9), var(--mantine-color-dark-0));
-  font-size: 15px;
-  line-height: 1.6;
-  word-wrap: break-word;
-  overflow-wrap: break-word;
-}
-
-[data-aside-chat] .userBubble {
-  background: light-dark(var(--mantine-color-white), var(--mantine-color-dark-7));
-  border: 1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
-}
-
-.userBubble p {
-  margin: 0;
-}
-
-.messageAttachments {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-  margin-bottom: 6px;
-}
-
-.messageAttachmentChip {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 2px 8px;
-  border-radius: 6px;
-  background: light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
-  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-2));
-  font-size: var(--mantine-font-size-xs);
-  max-width: 180px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.assistantMessage {
-  composes: message;
-}
-
-.messageContent {
-  font-size: 15px;
-  line-height: 1.7;
-  color: light-dark(var(--mantine-color-gray-8), var(--mantine-color-dark-1));
-  word-wrap: break-word;
-  overflow-wrap: break-word;
-}
-
-.messageContent p {
-  margin: 0 0 0.75em 0;
-}
-
-.messageContent p:last-child {
-  margin-bottom: 0;
-}
-
-.messageContent ul,
-.messageContent ol {
-  margin: 0.5em 0 0.75em 0;
-  padding-left: 1.5em;
-}
-
-.messageContent li {
-  margin-bottom: 0.3em;
-}
-
-.messageContent h1,
-.messageContent h2,
-.messageContent h3 {
-  margin: 1em 0 0.5em 0;
-  font-weight: 600;
-  color: light-dark(var(--mantine-color-gray-9), var(--mantine-color-dark-0));
-}
-
-.messageContent h1 {
-  font-size: 1.4em;
-}
-
-.messageContent h2 {
-  font-size: 1.2em;
-}
-
-.messageContent h3 {
-  font-size: 1.05em;
-}
-
-.messageContent pre {
-  background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-7));
-  padding: var(--mantine-spacing-sm) var(--mantine-spacing-md);
-  border-radius: var(--mantine-radius-md);
-  overflow-x: auto;
-  font-size: var(--mantine-font-size-sm);
-  margin: 0.75em 0;
-}
-
-.messageContent code {
-  background-color: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-6));
-  padding: 2px 6px;
-  border-radius: 4px;
-  font-size: 0.88em;
-}
-
-.messageContent pre code {
-  background: none;
-  padding: 0;
-}
-
-.messageContent blockquote {
-  border-left: 3px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
-  padding-left: var(--mantine-spacing-md);
-  margin: 0.75em 0;
-  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-2));
-}
-
-.messageContent a {
-  color: light-dark(var(--mantine-color-blue-7), var(--mantine-color-blue-4));
-  text-decoration: none;
-
-  @mixin hover {
-    text-decoration: underline;
-  }
-}
-
-.messageContent a[href^="/s/"],
-.messageContent a[href^="/p/"] {
-  color: light-dark(var(--mantine-color-dark-4), var(--mantine-color-dark-1));
-  font-weight: 500;
-  text-decoration: none;
-  cursor: pointer;
-
-  @mixin light {
-    border-bottom: 0.05em solid var(--mantine-color-dark-0);
-  }
-
-  @mixin dark {
-    border-bottom: 0.05em solid var(--mantine-color-dark-2);
-  }
-
-  @mixin hover {
-    text-decoration: none;
-    @mixin light {
-      border-bottom-color: var(--mantine-color-dark-2);
-    }
-    @mixin dark {
-      border-bottom-color: var(--mantine-color-dark-0);
-    }
-  }
-}
-
-.messageContent hr {
-  border: none;
-  border-top: 1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
-  margin: 1em 0;
-}
-
-.toolGroup {
-  margin: 6px 0;
-  font-size: var(--mantine-font-size-xs);
-}
-
-.toolGroupHeader {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  cursor: pointer;
-  user-select: none;
-  color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
-  line-height: 1.4;
-  transition: color 120ms ease;
-}
-
-.toolGroupHeader:hover {
-  color: light-dark(var(--mantine-color-gray-8), var(--mantine-color-dark-0));
-}
-
-.toolGroupLabel {
-  font-weight: 500;
-}
-
-.toolGroupSteps {
-  margin-top: 4px;
-  padding-left: 14px;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.toolStep {
-  font-size: var(--mantine-font-size-xs);
-}
-
-.toolStepRow {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  cursor: pointer;
-  user-select: none;
-  color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
-  line-height: 1.5;
-  transition: color 120ms ease;
-}
-
-.toolStepRow:hover {
-  color: light-dark(var(--mantine-color-gray-8), var(--mantine-color-dark-0));
-}
-
-.toolStepBullet {
-  display: inline-block;
-  width: 8px;
-  text-align: center;
-  opacity: 0.6;
-}
-
-.toolStepDetails {
-  margin-top: 4px;
-  margin-left: 18px;
-  padding: 6px 10px;
-  border-radius: var(--mantine-radius-sm);
-  background: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-7));
-  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
-  font-size: 11px;
-  line-height: 1.5;
-  overflow-x: auto;
-}
-
-.messageActions {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  margin-top: 4px;
-  color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
-}
-
-.processingIndicator {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
-  font-size: var(--mantine-font-size-sm);
-}
-
-.processingSpinner {
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.streamingCursor {
-  display: inline-block;
-  width: 2px;
-  height: 1em;
-  background: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
-  animation: blink 1s step-end infinite;
-  vertical-align: text-bottom;
-  margin-left: 1px;
-}
-
-@keyframes blink {
-  50% {
-    opacity: 0;
-  }
-}

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

@@ -1,138 +0,0 @@
-.sidebar {
-  height: 100%;
-  width: 100%;
-  padding: var(--mantine-spacing-md);
-  display: flex;
-  flex-direction: column;
-  gap: var(--mantine-spacing-xs);
-}
-
-.header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding-bottom: var(--mantine-spacing-xs);
-}
-
-.title {
-  font-weight: 600;
-  font-size: var(--mantine-font-size-sm);
-}
-
-.searchInput {
-  margin-bottom: var(--mantine-spacing-xs);
-}
-
-.chatList {
-  flex: 1;
-  overflow-y: auto;
-}
-
-.chatGroup + .chatGroup {
-  margin-top: var(--mantine-spacing-sm);
-}
-
-.chatGroupLabel {
-  padding: 4px var(--mantine-spacing-xs);
-  font-size: var(--mantine-font-size-xs);
-  font-weight: 600;
-  color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
-  user-select: none;
-}
-
-.chatListEmpty {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: var(--mantine-spacing-xl) var(--mantine-spacing-md);
-  text-align: center;
-  gap: 4px;
-  user-select: none;
-}
-
-.chatListEmptyIcon {
-  color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
-  margin-bottom: var(--mantine-spacing-xs);
-}
-
-.chatListEmptyTitle {
-  font-size: var(--mantine-font-size-sm);
-  font-weight: 600;
-  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
-}
-
-.chatListEmptyHint {
-  font-size: var(--mantine-font-size-xs);
-  color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-3));
-  line-height: 1.4;
-}
-
-.chatItem {
-  display: flex;
-  align-items: center;
-  padding: 8px var(--mantine-spacing-xs);
-  border-radius: var(--mantine-radius-sm);
-  cursor: pointer;
-  text-decoration: none;
-  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
-  font-size: var(--mantine-font-size-sm);
-  user-select: none;
-  gap: var(--mantine-spacing-xs);
-
-  @mixin hover {
-    background-color: light-dark(
-      var(--mantine-color-gray-1),
-      var(--mantine-color-dark-6)
-    );
-  }
-
-  &[data-active] {
-    background-color: light-dark(
-      var(--mantine-color-gray-2),
-      var(--mantine-color-dark-6)
-    );
-  }
-}
-
-.chatItemTitle {
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.chatItemDate {
-  font-size: var(--mantine-font-size-xs);
-  color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
-  white-space: nowrap;
-  transition: opacity 150ms;
-}
-
-.chatItemRenameInput {
-  font-size: var(--mantine-font-size-sm);
-  padding: 0;
-  height: auto;
-  min-height: 0;
-  background: transparent;
-  color: inherit;
-}
-
-.chatItem:hover .chatItemDate {
-  opacity: 0;
-}
-
-.chatItemActions {
-  position: absolute;
-  right: var(--mantine-spacing-xs);
-  opacity: 0;
-  transition: opacity 150ms;
-}
-
-.chatItem {
-  position: relative;
-}
-
-.chatItem:hover .chatItemActions {
-  opacity: 1;
-}

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

@@ -1,49 +0,0 @@
-export type AiChat = {
-  id: string;
-  workspaceId: string;
-  creatorId: string;
-  title: string | null;
-  createdAt: string;
-  updatedAt: string;
-};
-
-export type AiChatToolCall = {
-  id: string;
-  name: string;
-  args: Record<string, unknown>;
-  result?: unknown;
-};
-
-export type AiChatMessage = {
-  id: string;
-  chatId: string;
-  role: 'user' | 'assistant' | 'tool';
-  content: string | null;
-  toolCalls: AiChatToolCall[] | null;
-  metadata: Record<string, unknown> | null;
-  createdAt: string;
-};
-
-export type AiChatStreamEvent =
-  | { type: 'chat_created'; chatId: string }
-  | { type: 'content'; text: string }
-  | { type: 'tool_call'; id: string; name: string; args: Record<string, unknown> }
-  | { type: 'tool_result'; id: string; result: unknown }
-  | { type: 'done'; messageId: string; usage?: Record<string, number> }
-  | { type: 'error'; message: string; code?: string; retryable?: boolean };
-
-export type PageMention = {
-  id: string;
-  title: string;
-  slugId: string;
-  spaceSlug?: string;
-  icon?: string;
-};
-
-export type ChatAttachment = {
-  id: string;
-  fileName: string;
-  fileExt: string;
-  fileSize: number;
-  mimeType: string;
-};

apps/client/src/ee/ai-chat/utils/group-chats-by-age.ts

@@ -1,45 +0,0 @@
-import type { AiChat } from "../types/ai-chat.types";
-
-export type ChatGroup = { key: string; label: string; chats: AiChat[] };
-
-export function groupChatsByAge(
-  chats: AiChat[],
-  t: (key: string) => string,
-): ChatGroup[] {
-  if (chats.length === 0) return [];
-
-  const now = new Date();
-  const startOfToday = new Date(
-    now.getFullYear(),
-    now.getMonth(),
-    now.getDate(),
-  ).getTime();
-  const startOfYesterday = startOfToday - 24 * 60 * 60 * 1000;
-  const startOfLast7 = startOfToday - 7 * 24 * 60 * 60 * 1000;
-  const startOfLast30 = startOfToday - 30 * 24 * 60 * 60 * 1000;
-
-  const buckets: Record<string, ChatGroup> = {
-    today: { key: "today", label: t("Today"), chats: [] },
-    yesterday: { key: "yesterday", label: t("Yesterday"), chats: [] },
-    last7: { key: "last7", label: t("Previous 7 days"), chats: [] },
-    last30: { key: "last30", label: t("Previous 30 days"), chats: [] },
-    older: { key: "older", label: t("Older"), chats: [] },
-  };
-
-  for (const chat of chats) {
-    const ts = new Date(chat.updatedAt).getTime();
-    if (ts >= startOfToday) buckets.today.chats.push(chat);
-    else if (ts >= startOfYesterday) buckets.yesterday.chats.push(chat);
-    else if (ts >= startOfLast7) buckets.last7.chats.push(chat);
-    else if (ts >= startOfLast30) buckets.last30.chats.push(chat);
-    else buckets.older.chats.push(chat);
-  }
-
-  return [
-    buckets.today,
-    buckets.yesterday,
-    buckets.last7,
-    buckets.last30,
-    buckets.older,
-  ].filter((b) => b.chats.length > 0);
-}

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

@@ -6,7 +6,6 @@ import useUserRole from "@/hooks/use-user-role.tsx";
 import { useTranslation } from "react-i18next";
 import EnableAiSearch from "@/ee/ai/components/enable-ai-search.tsx";
 import EnableGenerativeAi from "@/ee/ai/components/enable-generative-ai.tsx";
-import EnableAiChat from "@/ee/ai-chat/components/enable-ai-chat.tsx";
 import McpSettings from "@/ee/ai/components/mcp-settings.tsx";
 import { Alert, Stack, Tabs } from "@mantine/core";
 import { IconInfoCircle } from "@tabler/icons-react";
@@ -72,7 +71,6 @@ export default function AiSettings() {
           <Stack gap="md">
             {!isCloud() && <EnableAiSearch />}
             <EnableGenerativeAi />
-            <EnableAiChat />
           </Stack>
         </Tabs.Panel>
 

apps/client/src/ee/features.ts

@@ -16,6 +16,5 @@ export const Feature = {
   AUDIT_LOGS: 'audit:logs',
   RETENTION: 'retention',
   SHARING_CONTROLS: 'sharing:controls',
-  TEMPLATES: 'templates',
   VIEWER_COMMENTS: 'comment:viewer',
 } as const;

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

@@ -1,70 +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 { 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";
-import { Feature } from "@/ee/features";
-import { useUpgradeLabel } from "@/ee/hooks/use-upgrade-label.ts";
-
-export default function AllowMemberTemplates() {
-  const { t } = useTranslation();
-
-  return (
-    <Group justify="space-between" wrap="nowrap" gap="xl">
-      <div>
-        <Text size="md">{t("Allow members to create templates")}</Text>
-        <Text size="sm" c="dimmed">
-          {t(
-            "Allow non-admin members to create and manage templates in their spaces.",
-          )}
-        </Text>
-      </div>
-
-      <AllowMemberTemplatesToggle />
-    </Group>
-  );
-}
-
-function AllowMemberTemplatesToggle() {
-  const { t } = useTranslation();
-  const [workspace, setWorkspace] = useAtom(workspaceAtom);
-  const [checked, setChecked] = useState(
-    workspace?.settings?.templates?.allowMemberTemplates === true,
-  );
-  const hasSecuritySettings = useHasFeature(Feature.SECURITY_SETTINGS);
-  const upgradeLabel = useUpgradeLabel();
-
-  const handleChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
-    const value = event.currentTarget.checked;
-    try {
-      const updatedWorkspace = await updateWorkspace({
-        allowMemberTemplates: value,
-      });
-      setChecked(value);
-      setWorkspace(updatedWorkspace);
-    } catch (err) {
-      notifications.show({
-        message: err?.response?.data?.message,
-        color: "red",
-      });
-    }
-  };
-
-  return (
-    <Tooltip
-      label={upgradeLabel}
-      disabled={hasSecuritySettings}
-      refProp="rootRef"
-    >
-      <Switch
-        checked={checked}
-        onChange={handleChange}
-        disabled={!hasSecuritySettings}
-        aria-label={t("Toggle allow members to create templates")}
-      />
-    </Tooltip>
-  );
-}

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

@@ -12,7 +12,6 @@ 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 { useHasFeature } from "@/ee/hooks/use-feature";
 import { Feature } from "@/ee/features";
 

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

@@ -1,118 +0,0 @@
-import { useState } from "react";
-import {
-  Modal,
-  TextInput,
-  Select,
-  Button,
-  Stack,
-  Group,
-} from "@mantine/core";
-import { useTranslation } from "react-i18next";
-import { useNavigate } from "react-router-dom";
-import { useCreateTemplateMutation } from "../queries/template-query";
-import { useGetSpacesQuery } from "@/features/space/queries/space-query";
-import useUserRole from "@/hooks/use-user-role";
-
-type CreateTemplateModalProps = {
-  opened: boolean;
-  onClose: () => void;
-};
-
-export default function CreateTemplateModal({
-  opened,
-  onClose,
-}: CreateTemplateModalProps) {
-  const { t } = useTranslation();
-  const navigate = useNavigate();
-  const { isAdmin: isWorkspaceAdmin } = useUserRole();
-  const createMutation = useCreateTemplateMutation();
-  const { data: spaces } = useGetSpacesQuery({ limit: 100 });
-
-  const [title, setTitle] = useState("");
-  const [spaceId, setSpaceId] = useState<string | null>(null);
-
-  const scopeOptions = [
-    ...(isWorkspaceAdmin
-      ? [
-          { group: t("Workspace"), items: [{ value: "", label: t("Global") }] },
-        ]
-      : []),
-    ...(spaces?.items?.length
-      ? [
-          {
-            group: t("Spaces"),
-            items: spaces.items.map((s) => ({ value: s.id, label: s.name })),
-          },
-        ]
-      : []),
-  ];
-
-  const handleCreate = async () => {
-    if (!title.trim()) return;
-
-    try {
-      const result = await createMutation.mutateAsync({
-        title: title.trim(),
-        spaceId: spaceId || undefined,
-      });
-
-      handleClose();
-      navigate(`/templates/${result.id}`);
-    } catch {
-      // error notification handled by mutation's onError
-    }
-  };
-
-  const handleClose = () => {
-    setTitle("");
-    setSpaceId(null);
-    onClose();
-  };
-
-  return (
-    <Modal
-      opened={opened}
-      onClose={handleClose}
-      title={t("New template")}
-      centered
-    >
-      <Stack gap="md">
-        <TextInput
-          label={t("Title")}
-          placeholder={t("Untitled")}
-          value={title}
-          onChange={(e) => setTitle(e.currentTarget.value)}
-          data-autofocus
-          onKeyDown={(e) => {
-            if (e.key === "Enter" && title.trim() && !createMutation.isPending) {
-              handleCreate();
-            }
-          }}
-        />
-
-        <Select
-          label={t("Scope")}
-          description={t("Choose which space this template belongs to")}
-          data={scopeOptions}
-          value={spaceId || ""}
-          onChange={(val) => setSpaceId(val || null)}
-          searchable
-          placeholder={t("Select scope")}
-        />
-
-        <Group justify="flex-end" mt="sm">
-          <Button variant="default" onClick={handleClose}>
-            {t("Cancel")}
-          </Button>
-          <Button
-            onClick={handleCreate}
-            loading={createMutation.isPending}
-            disabled={!title.trim()}
-          >
-            {t("Create")}
-          </Button>
-        </Group>
-      </Stack>
-    </Modal>
-  );
-}

apps/client/src/ee/template/components/readonly-template-editor.tsx

@@ -1,49 +0,0 @@
-import "@/features/editor/styles/index.css";
-import { useMemo } from "react";
-import { Title } from "@mantine/core";
-import { EditorProvider } from "@tiptap/react";
-import { mainExtensions } from "@/features/editor/extensions/extensions";
-import { UniqueID } from "@docmost/editor-ext";
-import { ITemplate } from "@/ee/template/types/template.types";
-import TemplateMeta from "@/ee/template/components/template-meta";
-
-type ReadonlyTemplateEditorProps = {
-  template: ITemplate;
-};
-
-export default function ReadonlyTemplateEditor({
-  template,
-}: ReadonlyTemplateEditorProps) {
-  const extensions = useMemo(() => {
-    const filteredExtensions = mainExtensions.filter(
-      (ext) => ext.name !== "uniqueID",
-    );
-
-    return [
-      ...filteredExtensions,
-      UniqueID.configure({
-        types: ["heading", "paragraph"],
-        updateDocument: false,
-      }),
-    ];
-  }, []);
-
-  return (
-    <>
-      <div style={{ padding: "0 3rem" }}>
-        <Title order={1} size="2.5rem" lh={1.2}>
-          {template.title || "Untitled"}
-        </Title>
-
-        <TemplateMeta template={template} />
-      </div>
-
-      <EditorProvider
-        editable={false}
-        immediatelyRender={true}
-        extensions={extensions}
-        content={template.content}
-      />
-    </>
-  );
-}

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

@@ -1,67 +0,0 @@
-.card {
-    display: flex;
-    flex-direction: column;
-    background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-6));
-    transition: transform 150ms ease;
-    box-shadow: light-dark(rgba(0, 0, 0, 0.07) 0px 2px 45px 4px, none);
-
-    @mixin hover {
-        transform: scale(1.02);
-    }
-}
-
-.cardBody {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    min-height: 0;
-}
-
-.icon {
-    font-size: 22px;
-    line-height: 1;
-    width: 36px;
-    height: 36px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: var(--mantine-radius-md);
-    background-color: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));
-    flex-shrink: 0;
-}
-
-.iconFallback {
-    composes: icon;
-    color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
-}
-
-.title {
-    font-weight: 600;
-    font-size: var(--mantine-font-size-md);
-    line-height: 1.35;
-    color: light-dark(var(--mantine-color-gray-9), var(--mantine-color-gray-0));
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-    word-break: break-word;
-}
-
-.footer {
-    display: flex;
-    align-items: center;
-    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));
-}
-
-.menuTarget {
-    opacity: 0;
-    transition: opacity 100ms ease;
-
-    .card:hover & {
-        opacity: 1;
-    }
-}

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

@@ -1,100 +0,0 @@
-import { Card, Text, ActionIcon, Menu, Group } from "@mantine/core";
-import {
-  IconDots,
-  IconEdit,
-  IconTrash,
-  IconFileText,
-} from "@tabler/icons-react";
-import { ITemplate } from "@/ee/template/types/template.types";
-import { useTranslation } from "react-i18next";
-import classes from "./template-card.module.css";
-
-type TemplateCardProps = {
-  template: ITemplate;
-  spaceName?: string;
-  onUse: (template: ITemplate) => void;
-  onEdit?: (template: ITemplate) => void;
-  onDelete?: (template: ITemplate) => void;
-  canManage?: boolean;
-};
-
-export default function TemplateCard({
-  template,
-  spaceName,
-  onUse,
-  onEdit,
-  onDelete,
-  canManage,
-}: TemplateCardProps) {
-  const { t } = useTranslation();
-
-  return (
-    <Card
-      radius="md"
-      padding="lg"
-      className={classes.card}
-      style={{ cursor: "pointer" }}
-      onClick={() => onUse(template)}
-    >
-      <div className={classes.cardBody}>
-        <Group justify="space-between" align="flex-start" wrap="nowrap" mb="md">
-          {template.icon ? (
-            <div className={classes.icon}>{template.icon}</div>
-          ) : (
-            <div className={classes.iconFallback}>
-              <IconFileText size={20} stroke={1.5} />
-            </div>
-          )}
-
-          <Group gap={6} wrap="nowrap">
-            {canManage && (
-              <Menu width={150} shadow="md" withArrow>
-                <Menu.Target>
-                  <ActionIcon
-                    variant="subtle"
-                    size="sm"
-                    color="gray"
-                    className={classes.menuTarget}
-                    onClick={(e) => e.stopPropagation()}
-                  >
-                    <IconDots size={16} />
-                  </ActionIcon>
-                </Menu.Target>
-
-                <Menu.Dropdown>
-                  <Menu.Item
-                    leftSection={<IconEdit size={14} />}
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      onEdit?.(template);
-                    }}
-                  >
-                    {t("Edit")}
-                  </Menu.Item>
-                  <Menu.Item
-                    color="red"
-                    leftSection={<IconTrash size={14} />}
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      onDelete?.(template);
-                    }}
-                  >
-                    {t("Delete")}
-                  </Menu.Item>
-                </Menu.Dropdown>
-              </Menu>
-            )}
-          </Group>
-        </Group>
-
-        <div className={classes.title}>{template.title}</div>
-
-        <div className={classes.footer}>
-          <Text size="sm" fw={500} c="dimmed">
-            {template.spaceId ? (spaceName || t("Space")) : t("Global")}
-          </Text>
-        </div>
-      </div>
-    </Card>
-  );
-}

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

@@ -1,37 +0,0 @@
-import { Group, Text } from "@mantine/core";
-import { CustomAvatar } from "@/components/ui/custom-avatar";
-import { useTranslation } from "react-i18next";
-import { useTimeAgo } from "@/hooks/use-time-ago";
-import { ITemplate } from "@/ee/template/types/template.types";
-
-type TemplateMetaProps = {
-  template: ITemplate;
-};
-
-export default function TemplateMeta({ template }: TemplateMetaProps) {
-  const { t } = useTranslation();
-  const updatedAtAgo = useTimeAgo(template.updatedAt);
-
-  return (
-    <Group gap={8} mt="xs" wrap="nowrap" style={{ cursor: "default" }}>
-      {template.creator?.name && (
-        <>
-          <CustomAvatar
-            size={24}
-            radius="xl"
-            name={template.creator.name}
-            avatarUrl={template.creator.avatarUrl}
-          />
-          <Text size="sm" c="dimmed" fw={500}>
-            {t("By {{name}}", { name: template.creator.name })}
-          </Text>
-        </>
-      )}
-      {updatedAtAgo && (
-        <Text size="sm" c="dimmed">
-          {t("Updated {{time}}", { time: updatedAtAgo })}
-        </Text>
-      )}
-    </Group>
-  );
-}

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

@@ -1,65 +0,0 @@
-import { Modal, Text, ScrollArea, Button, Group, Center, Loader } from "@mantine/core";
-import { useTranslation } from "react-i18next";
-import { useGetTemplateByIdQuery } from "@/ee/template/queries/template-query";
-import ReadonlyTemplateEditor from "@/ee/template/components/readonly-template-editor";
-
-type TemplatePreviewModalProps = {
-  templateId: string;
-  opened: boolean;
-  onClose: () => void;
-  onUse: () => void;
-  onEdit?: () => void;
-};
-
-export default function TemplatePreviewModal({
-  templateId,
-  opened,
-  onClose,
-  onUse,
-  onEdit,
-}: TemplatePreviewModalProps) {
-  const { t } = useTranslation();
-  const { data: template, isLoading } = useGetTemplateByIdQuery(templateId);
-
-  const title = template?.title || t("Untitled");
-
-  return (
-    <Modal.Root size={1200} opened={opened} onClose={onClose}>
-      <Modal.Overlay />
-      <Modal.Content style={{ overflow: "hidden" }}>
-        <Modal.Header>
-          <Modal.Title>
-            <Group gap="xs">
-              {template?.icon && <Text size="lg">{template.icon}</Text>}
-              <Text size="md" fw={500}>
-                {title}
-              </Text>
-            </Group>
-          </Modal.Title>
-          <Group gap="sm">
-            {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>
-        <Modal.Body p={0}>
-          {isLoading ? (
-            <Center py="xl">
-              <Loader size="sm" />
-            </Center>
-          ) : (
-            <ScrollArea h="80vh" w="100%" scrollbarSize={5}>
-              {template && <ReadonlyTemplateEditor template={template} />}
-            </ScrollArea>
-          )}
-        </Modal.Body>
-      </Modal.Content>
-    </Modal.Root>
-  );
-}

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

@@ -1,59 +0,0 @@
-import { useTranslation } from "react-i18next";
-import { useNavigate } from "react-router-dom";
-import { ITemplate } from "@/ee/template/types/template.types";
-import { useUseTemplateMutation } from "@/ee/template/queries/template-query";
-import { buildPageUrl } from "@/features/page/page.utils";
-import { DestinationPickerModal } from "@/components/ui/destination-picker/destination-picker-modal";
-import { DestinationSelection } from "@/components/ui/destination-picker/destination-picker.types";
-
-type UseTemplateModalProps = {
-  template: ITemplate;
-  opened: boolean;
-  onClose: () => void;
-};
-
-export default function UseTemplateModal({
-  template,
-  opened,
-  onClose,
-}: UseTemplateModalProps) {
-  const { t } = useTranslation();
-  const navigate = useNavigate();
-  const useTemplateMutation = useUseTemplateMutation();
-
-  const handleSelect = async (selection: DestinationSelection) => {
-    const spaceId = selection.spaceId;
-    const parentPageId =
-      selection.type === "page" ? selection.pageId : undefined;
-
-    try {
-      const page = await useTemplateMutation.mutateAsync({
-        templateId: template.id,
-        spaceId,
-        parentPageId,
-      });
-
-      onClose();
-
-      if (page?.slugId) {
-        const space = selection.space;
-        if (space?.slug) {
-          navigate(buildPageUrl(space.slug, page.slugId, page.title));
-        }
-      }
-    } catch {
-      // error notification handled by mutation's onError
-    }
-  };
-
-  return (
-    <DestinationPickerModal
-      opened={opened}
-      onClose={onClose}
-      title={t("Choose destination")}
-      actionLabel={t("Create page")}
-      onSelect={handleSelect}
-      loading={useTemplateMutation.isPending}
-    />
-  );
-}

apps/client/src/ee/template/pages/template-editor.module.css

@@ -1,68 +0,0 @@
-.header {
-    height: 45px;
-    background-color: var(--mantine-color-body);
-    padding-left: var(--mantine-spacing-md);
-    padding-right: var(--mantine-spacing-md);
-    position: fixed;
-    z-index: 99;
-    top: var(--app-shell-header-offset, 0rem);
-    inset-inline-start: var(--app-shell-navbar-offset, 0rem);
-    inset-inline-end: var(--app-shell-aside-offset, 0rem);
-
-    @media (max-width: $mantine-breakpoint-sm) {
-        padding-left: var(--mantine-spacing-xs);
-        padding-right: var(--mantine-spacing-xs);
-    }
-}
-
-.editor {
-    height: 100%;
-    padding: 8px 0;
-    margin: 48px auto;
-}
-
-.titleArea {
-    padding: 0 3rem;
-    margin-bottom: 1.5em;
-}
-
-.emojiButton {
-    display: flex;
-    align-items: center;
-    margin-bottom: 0.25em;
-}
-
-.titleInput {
-    font-size: 2.5rem;
-    font-weight: 700;
-    line-height: 1.2;
-    border: none;
-    outline: none;
-    width: 100%;
-    padding: 0;
-    background: transparent;
-    color: inherit;
-
-    &::placeholder {
-        color: light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-3));
-    }
-}
-
-.emojiIcon {
-    font-size: 3rem;
-    line-height: 1;
-}
-
-.backLink {
-    color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
-    text-decoration: none;
-    font-size: var(--mantine-font-size-sm);
-    font-weight: 500;
-    display: flex;
-    align-items: center;
-    gap: 4px;
-
-    @mixin hover {
-        color: light-dark(var(--mantine-color-gray-9), var(--mantine-color-gray-0));
-    }
-}

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

@@ -1,373 +0,0 @@
-import "@/features/editor/styles/index.css";
-import { useCallback, useEffect, useRef, useState } from "react";
-import {
-  Button,
-  Container,
-  Group,
-  Select,
-  Popover,
-  Stack,
-  ActionIcon,
-  Text,
-} from "@mantine/core";
-import {
-  IconArrowLeft,
-  IconSettings,
-  IconMoodSmile,
-  IconCheck,
-} from "@tabler/icons-react";
-import EmojiPicker from "@/components/ui/emoji-picker";
-import TemplateMeta from "@/ee/template/components/template-meta";
-import { useTranslation } from "react-i18next";
-import { useDisclosure, useWindowEvent } from "@mantine/hooks";
-import { notifications } from "@mantine/notifications";
-import { Link, useParams } from "react-router-dom";
-import { Helmet } from "react-helmet-async";
-import { getAppName } from "@/lib/config";
-import { useEditor, EditorContent } from "@tiptap/react";
-import { templateExtensions } from "@/features/editor/extensions/extensions";
-import {
-  useUpdateTemplateMutation,
-  useGetTemplateByIdQuery,
-} from "../queries/template-query";
-import { useGetSpacesQuery } from "@/features/space/queries/space-query";
-import useUserRole from "@/hooks/use-user-role";
-
-import classes from "./template-editor.module.css";
-
-export default function TemplateEditor() {
-  const { t } = useTranslation();
-  const { templateId } = useParams<{ templateId: string }>();
-  const { isAdmin: isWorkspaceAdmin } = useUserRole();
-
-  const { data: existingTemplate } = useGetTemplateByIdQuery(templateId || "");
-  const { data: spaces } = useGetSpacesQuery({ limit: 100 });
-  const updateMutation = useUpdateTemplateMutation();
-  const updateMutationRef = useRef(updateMutation.mutateAsync);
-  updateMutationRef.current = updateMutation.mutateAsync;
-
-  const [title, setTitle] = useState("");
-  const [icon, setIcon] = useState<string | null>(null);
-  const [spaceId, setSpaceId] = useState<string | null>(null);
-  const [draftSpaceId, setDraftSpaceId] = useState<string | null>(null);
-  const [settingsOpened, { open: openSettings, close: closeSettings }] =
-    useDisclosure(false);
-
-  useWindowEvent("keydown", (event) => {
-    if (settingsOpened && event.key === "Escape") {
-      event.stopPropagation();
-      event.preventDefault();
-      closeSettings();
-    }
-  });
-
-  const [saveStatus, setSaveStatus] = useState<
-    "idle" | "saving" | "saved" | "error"
-  >("idle");
-  const titleRef = useRef(title);
-  const iconRef = useRef(icon);
-  const spaceIdRef = useRef(spaceId);
-  const loadedRef = useRef(false);
-  const isDirtyRef = useRef(false);
-  const saveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const savedFadeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  const editor = useEditor({
-    extensions: templateExtensions,
-    content: "",
-    onUpdate() {
-      if (loadedRef.current) {
-        markDirty();
-      }
-    },
-  });
-
-  // Load template data into editor
-  useEffect(() => {
-    if (existingTemplate && editor) {
-      loadedRef.current = false;
-      setTitle(existingTemplate.title || "");
-      setIcon(existingTemplate.icon || null);
-      setSpaceId(existingTemplate.spaceId || null);
-      titleRef.current = existingTemplate.title || "";
-      iconRef.current = existingTemplate.icon || null;
-      spaceIdRef.current = existingTemplate.spaceId || null;
-      if (existingTemplate.content) {
-        editor.commands.setContent(existingTemplate.content);
-      }
-      requestAnimationFrame(() => {
-        loadedRef.current = true;
-      });
-    }
-  }, [existingTemplate, editor]);
-
-  const spaceOptions = [
-    ...(isWorkspaceAdmin
-      ? [
-          { group: t("Workspace"), items: [{ value: "", label: t("Global") }] },
-        ]
-      : []),
-    ...(spaces?.items?.length
-      ? [
-          {
-            group: t("Spaces"),
-            items: spaces.items.map((s) => ({ value: s.id, label: s.name })),
-          },
-        ]
-      : []),
-  ];
-
-  // Save function
-  const save = useCallback(async () => {
-    if (!editor || !templateId || !titleRef.current.trim()) return;
-    if (!isDirtyRef.current) return;
-
-    setSaveStatus("saving");
-    try {
-      await updateMutationRef.current({
-        templateId,
-        title: titleRef.current,
-        icon: iconRef.current || undefined,
-        content: editor.getJSON(),
-        spaceId: spaceIdRef.current,
-      });
-      isDirtyRef.current = false;
-      setSaveStatus("saved");
-
-      if (savedFadeTimerRef.current) clearTimeout(savedFadeTimerRef.current);
-      savedFadeTimerRef.current = setTimeout(() => {
-        setSaveStatus((prev) => (prev === "saved" ? "idle" : prev));
-      }, 3000);
-    } catch {
-      setSaveStatus("error");
-    }
-  }, [editor, templateId]);
-
-  // Schedule save 30s after last change
-  const scheduleSave = useCallback(() => {
-    if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
-    saveTimerRef.current = setTimeout(() => {
-      save();
-    }, 30000);
-  }, [save]);
-
-  // Mark content as dirty and schedule save
-  const markDirty = useCallback(() => {
-    isDirtyRef.current = true;
-    setSaveStatus("idle");
-    scheduleSave();
-  }, [scheduleSave]);
-
-  const handleTitleChange = useCallback(
-    (value: string) => {
-      setTitle(value);
-      titleRef.current = value;
-      if (loadedRef.current) markDirty();
-    },
-    [markDirty],
-  );
-
-  const handleIconChange = useCallback(
-    (value: string | null) => {
-      setIcon(value);
-      iconRef.current = value;
-      if (loadedRef.current) markDirty();
-    },
-    [markDirty],
-  );
-
-  const handleSpaceIdChange = useCallback(
-    (value: string | null) => {
-      setSpaceId(value);
-      spaceIdRef.current = value;
-      if (loadedRef.current) markDirty();
-    },
-    [markDirty],
-  );
-
-  // beforeunload warning for unsaved changes
-  // If user cancels (stays on page), the save fires and completes.
-  // If user leaves, the save is fire-and-forget.
-  useEffect(() => {
-    const handleBeforeUnload = (e: BeforeUnloadEvent) => {
-      if (isDirtyRef.current) {
-        e.preventDefault();
-        e.returnValue = "";
-        save();
-      }
-    };
-    window.addEventListener("beforeunload", handleBeforeUnload);
-    return () => {
-      window.removeEventListener("beforeunload", handleBeforeUnload);
-    };
-  }, [save]);
-
-  // Save on unmount if dirty
-  useEffect(() => {
-    return () => {
-      if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
-      if (savedFadeTimerRef.current) clearTimeout(savedFadeTimerRef.current);
-      if (isDirtyRef.current) {
-        save();
-      }
-    };
-  }, [save]);
-
-  // Manual retry for error state
-  const handleRetry = useCallback(() => {
-    save();
-  }, [save]);
-
-  return (
-    <>
-      <Helmet>
-        <title>
-          {t("Edit template")} - {getAppName()}
-        </title>
-      </Helmet>
-
-      <div className={classes.header}>
-        <Container size={900} h="100%" px={0}>
-        <Group justify="space-between" h="100%" wrap="nowrap">
-          <Link to="/templates" className={classes.backLink}>
-            <IconArrowLeft size={16} />
-            {t("Templates")}
-          </Link>
-
-          <Group gap="xs" wrap="nowrap">
-            {saveStatus === "saving" && (
-              <Text size="xs" c="dimmed">
-                {t("Saving...")}
-              </Text>
-            )}
-            {saveStatus === "saved" && (
-              <Group gap={4} wrap="nowrap">
-                <IconCheck size={14} color="var(--mantine-color-green-6)" />
-                <Text size="xs" c="dimmed">
-                  {t("Saved")}
-                </Text>
-              </Group>
-            )}
-            {saveStatus === "error" && (
-              <Text
-                size="xs"
-                c="red"
-                style={{ cursor: "pointer" }}
-                onClick={handleRetry}
-              >
-                {t("Save failed. Retry")}
-              </Text>
-            )}
-
-            <Popover
-              width={300}
-              position="bottom"
-              shadow="md"
-              opened={settingsOpened}
-              onDismiss={closeSettings}
-            >
-              <Popover.Target>
-                <ActionIcon
-                  variant="subtle"
-                  color="gray"
-                  size="md"
-                  onClick={() => {
-                    setDraftSpaceId(spaceId);
-                    openSettings();
-                  }}
-                >
-                  <IconSettings size={18} />
-                </ActionIcon>
-              </Popover.Target>
-              <Popover.Dropdown>
-                <Stack gap="sm">
-                  <Select
-                    label={t("Scope")}
-                    description={t("Choose which space this template belongs to")}
-                    data={spaceOptions}
-                    value={draftSpaceId || ""}
-                    onChange={(val) =>
-                      setDraftSpaceId(val || null)
-                    }
-                    searchable
-                    size="sm"
-                    comboboxProps={{ withinPortal: false }}
-                  />
-                  <Group justify="flex-end" mt="xs">
-                    <Button
-                      variant="default"
-                      size="xs"
-                      onClick={closeSettings}
-                    >
-                      {t("Cancel")}
-                    </Button>
-                    <Button
-                      size="xs"
-                      onClick={() => {
-                        const scopeChanged = draftSpaceId !== spaceId;
-                        handleSpaceIdChange(draftSpaceId);
-                        closeSettings();
-                        if (scopeChanged) {
-                          notifications.show({
-                            message: t("Template scope updated"),
-                          });
-                        }
-                      }}
-                    >
-                      {t("Save")}
-                    </Button>
-                  </Group>
-                </Stack>
-              </Popover.Dropdown>
-            </Popover>
-          </Group>
-        </Group>
-        </Container>
-      </div>
-
-      <Container size={900} className={classes.editor}>
-        <div className={classes.titleArea}>
-          <div className={classes.emojiButton}>
-            <EmojiPicker
-              onEmojiSelect={(emoji: { native: string }) =>
-                handleIconChange(emoji.native)
-              }
-              icon={
-                icon ? (
-                  <span className={classes.emojiIcon}>{icon}</span>
-                ) : (
-                  <IconMoodSmile size={20} stroke={1.5} />
-                )
-              }
-              removeEmojiAction={() =>
-                handleIconChange(null)
-              }
-              readOnly={false}
-              actionIconProps={icon ? { size: "3rem", variant: "transparent" } : undefined}
-            />
-          </div>
-          <input
-            className={classes.titleInput}
-            placeholder={t("Untitled")}
-            autoFocus
-            value={title}
-            onChange={(e) =>
-              handleTitleChange(e.currentTarget.value)
-            }
-            onKeyDown={(e) => {
-              if (e.key === "Enter") {
-                e.preventDefault();
-                editor?.commands.focus("start");
-              }
-            }}
-          />
-          {existingTemplate && (
-            <TemplateMeta template={existingTemplate} />
-          )}
-        </div>
-        <EditorContent editor={editor} />
-        <div style={{ paddingBottom: "20vh" }} />
-      </Container>
-    </>
-  );
-}

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

@@ -1,213 +0,0 @@
-import { useState } from "react";
-import {
-  Container,
-  Title,
-  Group,
-  Button,
-  SimpleGrid,
-  Select,
-  Text,
-  Center,
-  Skeleton,
-  Card,
-} from "@mantine/core";
-import { modals } from "@mantine/modals";
-import { IconPlus } from "@tabler/icons-react";
-import { Helmet } from "react-helmet-async";
-import { useTranslation } from "react-i18next";
-import { useNavigate } from "react-router-dom";
-import { useDisclosure } from "@mantine/hooks";
-import { getAppName } from "@/lib/config";
-import {
-  useGetTemplatesQuery,
-  useDeleteTemplateMutation,
-} from "@/ee/template/queries/template-query";
-import TemplateCard from "@/ee/template/components/template-card";
-import { ITemplate } from "@/ee/template/types/template.types";
-import { useGetSpacesQuery } from "@/features/space/queries/space-query";
-import UseTemplateModal from "@/ee/template/components/use-template-modal";
-import TemplatePreviewModal from "@/ee/template/components/template-preview-modal";
-import useUserRole from "@/hooks/use-user-role";
-import CreateTemplateModal from "@/ee/template/components/create-template-modal";
-
-export default function TemplateList() {
-  const { t } = useTranslation();
-  const navigate = useNavigate();
-  const { isAdmin: isWorkspaceAdmin } = useUserRole();
-  const [spaceFilter, setSpaceFilter] = useState<string | null>(null);
-  const [selectedTemplate, setSelectedTemplate] = useState<ITemplate | null>(
-    null,
-  );
-  const [useModalOpened, { open: openUseModal, close: closeUseModal }] =
-    useDisclosure(false);
-  const [previewOpened, { open: openPreview, close: closePreview }] =
-    useDisclosure(false);
-  const [createModalOpened, { open: openCreateModal, close: closeCreateModal }] =
-    useDisclosure(false);
-
-  const {
-    data,
-    isLoading,
-    hasNextPage,
-    fetchNextPage,
-    isFetchingNextPage,
-  } = useGetTemplatesQuery({
-    spaceId: spaceFilter || undefined,
-  });
-
-  const templates = data?.pages.flatMap((p) => p.items) ?? [];
-
-  const { data: spaces } = useGetSpacesQuery({ limit: 100 });
-  const deleteTemplateMutation = useDeleteTemplateMutation();
-
-  const spaceOptions = [
-    { value: "", label: t("All templates") },
-    ...(spaces?.items?.map((s) => ({ value: s.id, label: s.name })) || []),
-  ];
-
-  const spaceNameMap = new Map(
-    spaces?.items?.map((s) => [s.id, s.name]) || [],
-  );
-
-  const handlePreview = (template: ITemplate) => {
-    setSelectedTemplate(template);
-    openPreview();
-  };
-
-  const handleUse = (template: ITemplate) => {
-    setSelectedTemplate(template);
-    closePreview();
-    openUseModal();
-  };
-
-  const handleEdit = (template: ITemplate) => {
-    navigate(`/templates/${template.id}`);
-  };
-
-  const handleDelete = (template: ITemplate) => {
-    modals.openConfirmModal({
-      title: t("Are you sure you want to delete this template?"),
-      centered: true,
-      labels: { confirm: t("Delete"), cancel: t("Cancel") },
-      confirmProps: { color: "red" },
-      onConfirm: () => deleteTemplateMutation.mutate(template.id),
-    });
-  };
-
-  return (
-    <>
-      <Helmet>
-        <title>
-          {t("Templates")} - {getAppName()}
-        </title>
-      </Helmet>
-
-      <Container size="900" pt="xl">
-        <Group justify="space-between" mb="xl">
-          <Title order={3}>{t("Templates")}</Title>
-          {isWorkspaceAdmin && (
-            <Button
-              leftSection={<IconPlus size={16} />}
-              onClick={openCreateModal}
-            >
-              {t("New template")}
-            </Button>
-          )}
-        </Group>
-
-        <Group mb="lg">
-          <Select
-            data={spaceOptions}
-            value={spaceFilter || ""}
-            onChange={(val) => setSpaceFilter(val || null)}
-            placeholder={t("Filter by space")}
-            clearable={false}
-            searchable
-            size="sm"
-            w={220}
-            comboboxProps={{ width: "target" }}
-          />
-        </Group>
-
-        {isLoading ? (
-          <SimpleGrid cols={{ base: 1, xs: 2, sm: 3 }}>
-            {Array.from({ length: 6 }).map((_, i) => (
-              <Card key={i} radius="md" padding="lg" style={{ boxShadow: "rgba(0, 0, 0, 0.07) 0px 2px 45px 4px" }}>
-                <Group justify="space-between" align="flex-start" mb="md">
-                  <Skeleton width={36} height={36} radius="md" />
-                </Group>
-                <Skeleton height={14} width="70%" mb={8} />
-                <Skeleton height={10} width="50%" mb="sm" />
-                <Group justify="space-between" pt="sm" style={{ borderTop: "1px solid var(--mantine-color-gray-2)", marginTop: "auto" }}>
-                  <Skeleton height={20} width={60} radius="xl" />
-                  <Group gap={6}>
-                    <Skeleton height={18} circle />
-                    <Skeleton height={10} width={80} />
-                  </Group>
-                </Group>
-              </Card>
-            ))}
-          </SimpleGrid>
-        ) : templates.length ? (
-          <>
-            <SimpleGrid cols={{ base: 1, xs: 2, sm: 3 }}>
-              {templates.map((template) => (
-                <TemplateCard
-                  key={template.id}
-                  template={template}
-                  spaceName={
-                    template.spaceId
-                      ? spaceNameMap.get(template.spaceId)
-                      : undefined
-                  }
-                  onUse={handlePreview}
-                  onEdit={handleEdit}
-                  onDelete={handleDelete}
-                  canManage={isWorkspaceAdmin}
-                />
-              ))}
-            </SimpleGrid>
-            {hasNextPage && (
-              <Button
-                variant="subtle"
-                fullWidth
-                mt="sm"
-                mb="xl"
-                onClick={() => fetchNextPage()}
-                loading={isFetchingNextPage}
-              >
-                {t("Load more")}
-              </Button>
-            )}
-          </>
-        ) : (
-          <Center py="xl">
-            <Text c="dimmed">{t("No templates found")}</Text>
-          </Center>
-        )}
-      </Container>
-
-      <CreateTemplateModal
-        opened={createModalOpened}
-        onClose={closeCreateModal}
-      />
-
-      {selectedTemplate && (
-        <>
-          <TemplatePreviewModal
-            templateId={selectedTemplate.id}
-            opened={previewOpened}
-            onClose={closePreview}
-            onUse={() => handleUse(selectedTemplate)}
-            onEdit={isWorkspaceAdmin ? () => handleEdit(selectedTemplate) : undefined}
-          />
-          <UseTemplateModal
-            template={selectedTemplate}
-            opened={useModalOpened}
-            onClose={closeUseModal}
-          />
-        </>
-      )}
-    </>
-  );
-}

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

@@ -1,167 +0,0 @@
-import {
-  useInfiniteQuery,
-  useMutation,
-  useQuery,
-  useQueryClient,
-  UseQueryResult,
-  InfiniteData,
-} from "@tanstack/react-query";
-import {
-  getTemplates,
-  getTemplateById,
-  createTemplate,
-  updateTemplate,
-  deleteTemplate,
-  useTemplate,
-} from "@/ee/template/services/template-service.ts";
-import { ITemplate } from "@/ee/template/types/template.types";
-import { IPagination } from "@/lib/types.ts";
-import { notifications } from "@mantine/notifications";
-import { useTranslation } from "react-i18next";
-
-export function useGetTemplatesQuery(params?: { spaceId?: string }) {
-  const { spaceId } = params ?? {};
-  return useInfiniteQuery({
-    queryKey: ["templates", { spaceId }],
-    queryFn: ({ pageParam }) =>
-      getTemplates({ spaceId, cursor: pageParam, limit: 30 }),
-    initialPageParam: undefined as string | undefined,
-    getNextPageParam: (lastPage) =>
-      lastPage.meta.hasNextPage ? lastPage.meta.nextCursor : undefined,
-  });
-}
-
-export function useGetTemplateByIdQuery(
-  templateId: string,
-): UseQueryResult<ITemplate, Error> {
-  return useQuery({
-    queryKey: ["template", templateId],
-    queryFn: () => getTemplateById(templateId),
-    enabled: !!templateId,
-  });
-}
-
-export function useCreateTemplateMutation() {
-  const queryClient = useQueryClient();
-  const { t } = useTranslation();
-
-  return useMutation<ITemplate, Error, Partial<ITemplate>>({
-    mutationFn: (data) => createTemplate(data),
-    onSuccess: (newTemplate) => {
-      queryClient.setQueriesData<InfiniteData<IPagination<ITemplate>>>(
-        { queryKey: ["templates"] },
-        (old) => {
-          if (!old) return old;
-          const firstPage = old.pages[0];
-          return {
-            ...old,
-            pages: [
-              { ...firstPage, items: [newTemplate, ...firstPage.items] },
-              ...old.pages.slice(1),
-            ],
-          };
-        },
-      );
-      notifications.show({ message: t("Template created successfully") });
-    },
-    onError: (error) => {
-      const errorMessage = error["response"]?.data?.message;
-      notifications.show({
-        message: errorMessage || t("Failed to create template"),
-        color: "red",
-      });
-    },
-  });
-}
-
-export function useUpdateTemplateMutation() {
-  const queryClient = useQueryClient();
-  const { t } = useTranslation();
-
-  return useMutation<
-    ITemplate,
-    Error,
-    Partial<ITemplate> & { templateId: string }
-  >({
-    mutationFn: (data) => updateTemplate(data),
-    onSuccess: (updatedTemplate) => {
-      queryClient.setQueriesData<InfiniteData<IPagination<ITemplate>>>(
-        { queryKey: ["templates"] },
-        (old) => {
-          if (!old) return old;
-          return {
-            ...old,
-            pages: old.pages.map((page) => ({
-              ...page,
-              items: page.items.map((item) =>
-                item.id === updatedTemplate.id ? updatedTemplate : item,
-              ),
-            })),
-          };
-        },
-      );
-      queryClient.setQueryData(
-        ["template", updatedTemplate.id],
-        updatedTemplate,
-      );
-    },
-    onError: (error) => {
-      const errorMessage = error["response"]?.data?.message;
-      notifications.show({
-        message: errorMessage || t("Failed to update template"),
-        color: "red",
-      });
-    },
-  });
-}
-
-export function useDeleteTemplateMutation() {
-  const queryClient = useQueryClient();
-  const { t } = useTranslation();
-
-  return useMutation<void, Error, string>({
-    mutationFn: (templateId) => deleteTemplate(templateId),
-    onSuccess: (_data, templateId) => {
-      queryClient.setQueriesData<InfiniteData<IPagination<ITemplate>>>(
-        { queryKey: ["templates"] },
-        (old) => {
-          if (!old) return old;
-          return {
-            ...old,
-            pages: old.pages.map((page) => ({
-              ...page,
-              items: page.items.filter((item) => item.id !== templateId),
-            })),
-          };
-        },
-      );
-      notifications.show({ message: t("Template deleted") });
-    },
-    onError: (error) => {
-      const errorMessage = error["response"]?.data?.message;
-      notifications.show({
-        message: errorMessage || t("Failed to delete template"),
-        color: "red",
-      });
-    },
-  });
-}
-
-export function useUseTemplateMutation() {
-  const { t } = useTranslation();
-
-  return useMutation({
-    mutationFn: (data: {
-      templateId: string;
-      spaceId: string;
-      parentPageId?: string;
-    }) => useTemplate(data),
-    onError: (error) => {
-      const errorMessage = error["response"]?.data?.message;
-      notifications.show({
-        message: errorMessage || t("Failed to create page from template"),
-        color: "red",
-      });
-    },
-  });
-}

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

@@ -1,46 +0,0 @@
-import api from "@/lib/api-client";
-import { ITemplate } from "@/ee/template/types/template.types";
-import { IPagination } from "@/lib/types.ts";
-
-export async function getTemplates(params?: {
-  spaceId?: string;
-  cursor?: string;
-  limit?: number;
-}): Promise<IPagination<ITemplate>> {
-  const req = await api.post("/templates", params);
-  return req.data;
-}
-
-export async function getTemplateById(
-  templateId: string,
-): Promise<ITemplate> {
-  const req = await api.post<ITemplate>("/templates/info", { templateId });
-  return req.data;
-}
-
-export async function createTemplate(
-  data: Partial<ITemplate>,
-): Promise<ITemplate> {
-  const req = await api.post<ITemplate>("/templates/create", data);
-  return req.data;
-}
-
-export async function updateTemplate(
-  data: Partial<ITemplate> & { templateId: string },
-): Promise<ITemplate> {
-  const req = await api.post<ITemplate>("/templates/update", data);
-  return req.data;
-}
-
-export async function deleteTemplate(templateId: string): Promise<void> {
-  await api.post<void>("/templates/delete", { templateId });
-}
-
-export async function useTemplate(data: {
-  templateId: string;
-  spaceId: string;
-  parentPageId?: string;
-}): Promise<any> {
-  const req = await api.post("/templates/use", data);
-  return req.data;
-}

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

@@ -1,18 +0,0 @@
-export interface ITemplate {
-  id: string;
-  title: string;
-  description?: string;
-  content?: any;
-  icon?: string;
-  spaceId?: string;
-  workspaceId: string;
-  creatorId: string;
-  lastUpdatedById?: string;
-  creator?: {
-    id: string;
-    name: string;
-    avatarUrl?: string;
-  };
-  createdAt: string;
-  updatedAt: string;
-}

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

@@ -62,7 +62,7 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
     query: props.query,
     includeUsers: true,
     includePages: true,
-    spaceId: space?.id,
+    spaceId: space.id,
     limit: props.query ? 10 : 5,
     preload: true,
   });

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

@@ -53,8 +53,8 @@ const mentionRenderItems = () => {
       const editorDom = props.editor?.view?.dom;
       const asideEl = editorDom?.closest(".mantine-AppShell-aside");
       const dialogEl = editorDom?.closest("[data-comment-dialog]");
-      const chatInput = editorDom?.closest("[data-chat-input]");
-      const isInCommentContext = !!(asideEl || dialogEl || chatInput);
+      const isInCommentContext = !!(asideEl || dialogEl);
+     // const isInCommentContext = !!asideEl;
 
       component = new ReactRenderer(MentionList, {
         props: { ...props, isInCommentContext },

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

@@ -419,7 +419,7 @@ const CommandGroups: SlashMenuGroupedItemsType = {
           .run(),
     },
     {
-      title: "Draw.io (diagrams.net)",
+      title: "Draw.io (diagrams.net) ",
       description: "Insert and design Drawio diagrams",
       searchTerms: ["drawio", "diagrams", "charts", "uml", "whiteboard"],
       icon: IconDrawio,
@@ -688,10 +688,8 @@ const CommandGroups: SlashMenuGroupedItemsType = {
 
 export const getSuggestionItems = ({
   query,
-  excludeItems,
 }: {
   query: string;
-  excludeItems?: Set<string>;
 }): SlashMenuGroupedItemsType => {
   const search = query.toLowerCase();
   const filteredGroups: SlashMenuGroupedItemsType = {};
@@ -708,7 +706,6 @@ export const getSuggestionItems = ({
 
   for (const [group, items] of Object.entries(CommandGroups)) {
     const filteredItems = items.filter((item) => {
-      if (excludeItems?.has(item.title)) return false;
       return (
         fuzzyMatch(search, item.title) ||
         item.description.toLowerCase().includes(search) ||

apps/client/src/features/editor/extensions/extensions.ts

@@ -11,9 +11,7 @@ import { TextStyle } from "@tiptap/extension-text-style";
 import { Color } from "@tiptap/extension-color";
 import GlobalDragHandle from "tiptap-extension-global-drag-handle";
 import { Youtube } from "@tiptap/extension-youtube";
-import SlashCommand, { SlashCommandExtension as Command } from "@/features/editor/extensions/slash-command";
-import renderItems from "@/features/editor/components/slash-menu/render-items";
-import getSuggestionItems from "@/features/editor/components/slash-menu/menu-items";
+import SlashCommand from "@/features/editor/extensions/slash-command";
 import { Collaboration, isChangeOrigin } from "@tiptap/extension-collaboration";
 import { CollaborationCaret } from "@tiptap/extension-collaboration-caret";
 import { HocuspocusProvider } from "@hocuspocus/provider";
@@ -382,27 +380,6 @@ export const mainExtensions = [
 
 type CollabExtensions = (provider: HocuspocusProvider, user: IUser) => any[];
 
-const TEMPLATE_EXCLUDED_SLASH_ITEMS = new Set([
-  "Image",
-  "Video",
-  "File attachment",
-  "Draw.io (diagrams.net)",
-  "Excalidraw diagram",
-]);
-
-const TemplateSlashCommand = Command.configure({
-  suggestion: {
-    items: ({ query }: { query: string }) =>
-      getSuggestionItems({ query, excludeItems: TEMPLATE_EXCLUDED_SLASH_ITEMS }),
-    render: renderItems,
-  },
-});
-
-export const templateExtensions = [
-  ...mainExtensions.filter((ext: any) => ext !== SlashCommand),
-  TemplateSlashCommand,
-] as any;
-
 export const collabExtensions: CollabExtensions = (provider, user) => [
   Collaboration.configure({
     document: provider.document,

apps/client/src/features/editor/extensions/slash-command.ts

@@ -47,5 +47,4 @@ const SlashCommand = Command.configure({
   },
 });
 
-export { Command as SlashCommandExtension };
 export default SlashCommand;

apps/client/src/features/favorite/components/star-button.tsx

@@ -1,76 +0,0 @@
-import { ActionIcon, Tooltip } from "@mantine/core";
-import { IconStar, IconStarFilled } from "@tabler/icons-react";
-import {
-  useFavoriteIds,
-  useAddFavoriteMutation,
-  useRemoveFavoriteMutation,
-} from "../queries/favorite-query";
-import { FavoriteType } from "../types/favorite.types";
-import { ToggleFavoriteParams } from "../services/favorite-service";
-import { useTranslation } from "react-i18next";
-
-type StarButtonProps = {
-  type: FavoriteType;
-  pageId?: string;
-  spaceId?: string;
-  templateId?: string;
-  size?: number;
-};
-
-function getEntityId(props: StarButtonProps): string | undefined {
-  if (props.type === "page") return props.pageId;
-  if (props.type === "space") return props.spaceId;
-  if (props.type === "template") return props.templateId;
-  return undefined;
-}
-
-export default function StarButton(props: StarButtonProps) {
-  const { type, size = 18 } = props;
-  const { t } = useTranslation();
-  const favoriteIds = useFavoriteIds(type);
-  const addMutation = useAddFavoriteMutation();
-  const removeMutation = useRemoveFavoriteMutation();
-
-  const entityId = getEntityId(props);
-  const isFavorited = entityId ? favoriteIds.has(entityId) : false;
-  const isPending = addMutation.isPending || removeMutation.isPending;
-
-  const handleToggle = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    e.preventDefault();
-
-    const params: ToggleFavoriteParams = {
-      type,
-      pageId: props.pageId,
-      spaceId: props.spaceId,
-      templateId: props.templateId,
-    };
-
-    if (isFavorited) {
-      removeMutation.mutate(params);
-    } else {
-      addMutation.mutate(params);
-    }
-  };
-
-  return (
-    <Tooltip
-      label={isFavorited ? t("Remove from favorites") : t("Add to favorites")}
-      openDelay={250}
-      withArrow
-    >
-      <ActionIcon
-        variant="subtle"
-        color={isFavorited ? "yellow" : "gray"}
-        onClick={handleToggle}
-        loading={isPending}
-      >
-        {isFavorited ? (
-          <IconStarFilled size={size} />
-        ) : (
-          <IconStar size={size} stroke={2} />
-        )}
-      </ActionIcon>
-    </Tooltip>
-  );
-}

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

@@ -1,78 +0,0 @@
-import {
-  useQuery,
-  useInfiniteQuery,
-  useMutation,
-  useQueryClient,
-} from "@tanstack/react-query";
-import {
-  addFavorite,
-  removeFavorite,
-  getFavorites,
-  ToggleFavoriteParams,
-} from "../services/favorite-service";
-import { IPagination } from "@/lib/types.ts";
-import { IFavorite, FavoriteType } from "../types/favorite.types";
-
-export function useFavoritesQuery(type?: FavoriteType) {
-  return useInfiniteQuery({
-    queryKey: ["favorites", type],
-    queryFn: ({ pageParam }) =>
-      getFavorites({ type, cursor: pageParam, limit: 15 }),
-    initialPageParam: undefined as string | undefined,
-    getNextPageParam: (lastPage) =>
-      lastPage.meta.hasNextPage ? lastPage.meta.nextCursor : undefined,
-    refetchOnMount: true,
-  });
-}
-
-export function useFavoriteIds(type: FavoriteType): Set<string> {
-  const { data } = useQuery<IPagination<IFavorite>>({
-    queryKey: ["favorite-ids", type],
-    queryFn: () => getFavorites({ type, limit: 50 }),
-    refetchOnMount: true,
-  });
-
-  const ids = new Set<string>();
-  if (data?.items) {
-    for (const fav of data.items) {
-      let id: string | undefined;
-      if (type === "page") id = fav.pageId;
-      else if (type === "space") id = fav.spaceId;
-      else if (type === "template") id = fav.templateId;
-      if (id) ids.add(id);
-    }
-  }
-  return ids;
-}
-
-export function useAddFavoriteMutation() {
-  const queryClient = useQueryClient();
-
-  return useMutation<void, Error, ToggleFavoriteParams>({
-    mutationFn: (data) => addFavorite(data),
-    onSuccess: (_result, variables) => {
-      queryClient.invalidateQueries({
-        queryKey: ["favorite-ids", variables.type],
-      });
-      queryClient.invalidateQueries({
-        queryKey: ["favorites", variables.type],
-      });
-    },
-  });
-}
-
-export function useRemoveFavoriteMutation() {
-  const queryClient = useQueryClient();
-
-  return useMutation<void, Error, ToggleFavoriteParams>({
-    mutationFn: (data) => removeFavorite(data),
-    onSuccess: (_result, variables) => {
-      queryClient.invalidateQueries({
-        queryKey: ["favorite-ids", variables.type],
-      });
-      queryClient.invalidateQueries({
-        queryKey: ["favorites", variables.type],
-      });
-    },
-  });
-}

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

@@ -1,31 +0,0 @@
-import api from "@/lib/api-client";
-import { IPagination } from "@/lib/types.ts";
-import { IFavorite, FavoriteType } from "../types/favorite.types";
-
-export type ToggleFavoriteParams = {
-  type: FavoriteType;
-  pageId?: string;
-  spaceId?: string;
-  templateId?: string;
-};
-
-export async function addFavorite(
-  params: ToggleFavoriteParams,
-): Promise<void> {
-  await api.post("/favorites/add", params);
-}
-
-export async function removeFavorite(
-  params: ToggleFavoriteParams,
-): Promise<void> {
-  await api.post("/favorites/remove", params);
-}
-
-export async function getFavorites(params?: {
-  type?: FavoriteType;
-  limit?: number;
-  cursor?: string;
-}): Promise<IPagination<IFavorite>> {
-  const req = await api.post("/favorites", params);
-  return req.data;
-}

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

@@ -1,32 +0,0 @@
-export type FavoriteType = "page" | "space" | "template";
-
-export type IFavorite = {
-  id: string;
-  userId: string;
-  pageId: string | null;
-  spaceId: string | null;
-  templateId: string | null;
-  type: FavoriteType;
-  workspaceId: string;
-  createdAt: string;
-  page?: {
-    id: string;
-    slugId: string;
-    title: string;
-    icon: string | null;
-    spaceId: string;
-  };
-  space?: {
-    id: string;
-    name: string;
-    slug: string;
-    logo: string | null;
-  };
-  template?: {
-    id: string;
-    title: string;
-    description: string | null;
-    icon: string | null;
-    spaceId: string | null;
-  };
-};

apps/client/src/features/home/atoms/home-tab-atom.ts

@@ -1,3 +0,0 @@
-import { atomWithStorage } from "jotai/utils";
-
-export const homeTabAtom = atomWithStorage<string>("home-tab", "recent");

apps/client/src/features/home/components/created-by-me.tsx

@@ -1,126 +0,0 @@
-import {
-  Text,
-  Group,
-  UnstyledButton,
-  Badge,
-  Table,
-  ActionIcon,
-  Button,
-} from "@mantine/core";
-import { Link } from "react-router-dom";
-import PageListSkeleton from "@/components/ui/page-list-skeleton";
-import { buildPageUrl } from "@/features/page/page.utils";
-import { formattedDate } from "@/lib/time";
-import { useCreatedByQuery } from "@/features/page/queries/page-query";
-import { IconFileDescription, IconFiles } from "@tabler/icons-react";
-import { EmptyState } from "@/components/ui/empty-state";
-import { getSpaceUrl } from "@/lib/config";
-import { useTranslation } from "react-i18next";
-import { getInitialsColor } from "@/lib/get-initials-color";
-
-type Props = {
-  spaceId?: string;
-};
-
-export default function CreatedByMe({ spaceId }: Props) {
-  const { t } = useTranslation();
-  const {
-    data,
-    isLoading,
-    isError,
-    hasNextPage,
-    fetchNextPage,
-    isFetchingNextPage,
-  } = useCreatedByQuery({ spaceId });
-
-  const pages = data?.pages.flatMap((p) => p.items) ?? [];
-
-  if (isLoading) {
-    return <PageListSkeleton />;
-  }
-
-  if (isError) {
-    return <Text>{t("Failed to fetch pages")}</Text>;
-  }
-
-  return pages.length > 0 ? (
-    <>
-      <Table.ScrollContainer minWidth={500}>
-        <Table highlightOnHover verticalSpacing="sm">
-          <Table.Tbody>
-            {pages.map((page) => (
-              <Table.Tr key={page.id}>
-                <Table.Td>
-                  <UnstyledButton
-                    component={Link}
-                    to={buildPageUrl(
-                      page?.space.slug,
-                      page.slugId,
-                      page.title,
-                    )}
-                  >
-                    <Group wrap="nowrap">
-                      {page.icon || (
-                        <ActionIcon
-                          variant="transparent"
-                          color="gray"
-                          size={18}
-                        >
-                          <IconFileDescription size={18} />
-                        </ActionIcon>
-                      )}
-                      <Text fw={500} size="md" lineClamp={1}>
-                        {page.title || t("Untitled")}
-                      </Text>
-                    </Group>
-                  </UnstyledButton>
-                </Table.Td>
-                {!spaceId && (
-                  <Table.Td>
-                    <Badge
-                      color={getInitialsColor(page?.space.name)}
-                      variant="light"
-                      component={Link}
-                      to={getSpaceUrl(page?.space.slug)}
-                      style={{ cursor: "pointer" }}
-                    >
-                      {page?.space.name}
-                    </Badge>
-                  </Table.Td>
-                )}
-                <Table.Td>
-                  <Text
-                    c="dimmed"
-                    style={{ whiteSpace: "nowrap" }}
-                    size="xs"
-                    fw={500}
-                  >
-                    {formattedDate(page.createdAt)}
-                  </Text>
-                </Table.Td>
-              </Table.Tr>
-            ))}
-          </Table.Tbody>
-        </Table>
-      </Table.ScrollContainer>
-      {hasNextPage && (
-        <Button
-          variant="subtle"
-          fullWidth
-          mt="sm"
-          mb="xl"
-          onClick={() => fetchNextPage()}
-          loading={isFetchingNextPage}
-        >
-          {t("Load more")}
-        </Button>
-      )}
-    </>
-  ) : (
-    <EmptyState
-      icon={IconFiles}
-      title={t("No pages yet")}
-      description={t("Pages you create will show up here.")}
-    />
-  );
-}

apps/client/src/features/home/components/favorites-pages.tsx

@@ -1,124 +0,0 @@
-import {
-  Text,
-  Group,
-  UnstyledButton,
-  Badge,
-  Table,
-  ActionIcon,
-  Button,
-} from "@mantine/core";
-import { Link } from "react-router-dom";
-import PageListSkeleton from "@/components/ui/page-list-skeleton";
-import { buildPageUrl } from "@/features/page/page.utils";
-import { formattedDate } from "@/lib/time";
-import { useFavoritesQuery } from "@/features/favorite/queries/favorite-query";
-import { IconFileDescription, IconStar } from "@tabler/icons-react";
-import { EmptyState } from "@/components/ui/empty-state";
-import { getSpaceUrl } from "@/lib/config";
-import { useTranslation } from "react-i18next";
-import { getInitialsColor } from "@/lib/get-initials-color";
-
-export default function FavoritesPages() {
-  const { t } = useTranslation();
-  const {
-    data,
-    isLoading,
-    isError,
-    hasNextPage,
-    fetchNextPage,
-    isFetchingNextPage,
-  } = useFavoritesQuery("page");
-
-  const favorites = data?.pages.flatMap((p) => p.items) ?? [];
-
-  if (isLoading) {
-    return <PageListSkeleton />;
-  }
-
-  if (isError) {
-    return <Text>{t("Failed to fetch starred pages")}</Text>;
-  }
-
-  return favorites.length > 0 ? (
-    <>
-      <Table.ScrollContainer minWidth={500}>
-        <Table highlightOnHover verticalSpacing="sm">
-          <Table.Tbody>
-            {favorites.map((fav) =>
-              fav.page ? (
-                <Table.Tr key={fav.id}>
-                  <Table.Td>
-                    <UnstyledButton
-                      component={Link}
-                      to={buildPageUrl(
-                        fav.space?.slug,
-                        fav.page.slugId,
-                        fav.page.title,
-                      )}
-                    >
-                      <Group wrap="nowrap">
-                        {fav.page.icon || (
-                          <ActionIcon
-                            variant="transparent"
-                            color="gray"
-                            size={18}
-                          >
-                            <IconFileDescription size={18} />
-                          </ActionIcon>
-                        )}
-                        <Text fw={500} size="md" lineClamp={1}>
-                          {fav.page.title || t("Untitled")}
-                        </Text>
-                      </Group>
-                    </UnstyledButton>
-                  </Table.Td>
-                  <Table.Td>
-                    {fav.space && (
-                      <Badge
-                        color={getInitialsColor(fav.space.name)}
-                        variant="light"
-                        component={Link}
-                        to={getSpaceUrl(fav.space.slug)}
-                        style={{ cursor: "pointer" }}
-                      >
-                        {fav.space.name}
-                      </Badge>
-                    )}
-                  </Table.Td>
-                  <Table.Td>
-                    <Text
-                      c="dimmed"
-                      style={{ whiteSpace: "nowrap" }}
-                      size="xs"
-                      fw={500}
-                    >
-                      {formattedDate(new Date(fav.createdAt))}
-                    </Text>
-                  </Table.Td>
-                </Table.Tr>
-              ) : null,
-            )}
-          </Table.Tbody>
-        </Table>
-      </Table.ScrollContainer>
-      {hasNextPage && (
-        <Button
-          variant="subtle"
-          fullWidth
-          mt="sm"
-          mb="xl"
-          onClick={() => fetchNextPage()}
-          loading={isFetchingNextPage}
-        >
-          {t("Load more")}
-        </Button>
-      )}
-    </>
-  ) : (
-    <EmptyState
-      icon={IconStar}
-      title={t("No favorites yet")}
-      description={t("Pages you star will show up here.")}
-    />
-  );
-}

apps/client/src/features/home/components/home-ai-prompt.module.css

@@ -1,28 +0,0 @@
-.wrapper {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: var(--mantine-spacing-xl) var(--mantine-spacing-md) var(--mantine-spacing-lg);
-}
-
-.heading {
-  font-size: 1.75rem;
-  font-weight: 600;
-  color: light-dark(var(--mantine-color-gray-8), var(--mantine-color-dark-0));
-  text-align: center;
-  margin: 0;
-  line-height: 1.2;
-}
-
-.subtitle {
-  font-size: var(--mantine-font-size-sm);
-  color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
-  text-align: center;
-  margin-top: 6px;
-  margin-bottom: var(--mantine-spacing-lg);
-}
-
-.inputContainer {
-  width: 100%;
-  max-width: 640px;
-}

apps/client/src/features/home/components/home-ai-prompt.tsx

@@ -1,60 +0,0 @@
-import { useAtomValue } from "jotai";
-import { useNavigate } from "react-router-dom";
-import { useTranslation } from "react-i18next";
-import { workspaceAtom } from "@/features/user/atoms/current-user-atom.ts";
-import ChatInput from "@/ee/ai-chat/components/chat-input";
-import type {
-  ChatAttachment,
-  PageMention,
-} from "@/ee/ai-chat/types/ai-chat.types";
-import classes from "./home-ai-prompt.module.css";
-
-export type HomeAiPromptInitialState = {
-  initialContent: string;
-  initialMentions: PageMention[];
-  initialAttachments: ChatAttachment[];
-};
-
-export default function HomeAiPrompt() {
-  const { t } = useTranslation();
-  const navigate = useNavigate();
-  const workspace = useAtomValue(workspaceAtom);
-
-  const aiChatEnabled = workspace?.settings?.ai?.chat === true;
-  if (!aiChatEnabled) return null;
-
-  const handleSend = (
-    content: string,
-    mentions: PageMention[],
-    attachments: ChatAttachment[],
-  ) => {
-    if (!content.trim() && attachments.length === 0) return;
-    const state: HomeAiPromptInitialState = {
-      initialContent: content,
-      initialMentions: mentions,
-      initialAttachments: attachments,
-    };
-    navigate("/ai", { state });
-  };
-
-  return (
-    <div className={classes.wrapper}>
-      <h1 className={classes.heading}>
-        {t("Welcome to {{name}}", { name: workspace?.name ?? "Docmost" })}
-      </h1>
-      <div className={classes.subtitle}>
-        {t("Ask anything or search your workspace")}
-      </div>
-
-      <div className={classes.inputContainer}>
-        <ChatInput
-          isStreaming={false}
-          onSend={handleSend}
-          onStop={() => {}}
-          placeholder={t("Ask anything... Use @ to mention pages")}
-          autofocus={false}
-        />
-      </div>
-    </div>
-  );
-}

apps/client/src/features/home/components/home-tabs.tsx

@@ -1,40 +1,19 @@
 import { Text, Tabs, Space } from "@mantine/core";
-import { IconClockHour3, IconStar, IconUser } from "@tabler/icons-react";
-import RecentChanges from "@/components/common/recent-changes";
-import FavoritesPages from "./favorites-pages";
-import CreatedByMe from "./created-by-me";
+import { IconClockHour3 } from "@tabler/icons-react";
+import RecentChanges from "@/components/common/recent-changes.tsx";
 import { useTranslation } from "react-i18next";
-import { useAtom } from "jotai";
-import { homeTabAtom } from "@/features/home/atoms/home-tab-atom";
 
 export default function HomeTabs() {
   const { t } = useTranslation();
-  const [activeTab, setActiveTab] = useAtom(homeTabAtom);
 
   return (
-    <Tabs
-      color="dark"
-      value={activeTab}
-      onChange={(value) => {
-        if (value) setActiveTab(value);
-      }}
-    >
-      <Tabs.List style={{ flexWrap: "nowrap", overflowX: "auto" }}>
+    <Tabs defaultValue="recent">
+      <Tabs.List>
         <Tabs.Tab value="recent" leftSection={<IconClockHour3 size={18} />}>
           <Text size="sm" fw={500}>
             {t("Recently updated")}
           </Text>
         </Tabs.Tab>
-        <Tabs.Tab value="favorites" leftSection={<IconStar size={18} />}>
-          <Text size="sm" fw={500}>
-            {t("Favorites")}
-          </Text>
-        </Tabs.Tab>
-        <Tabs.Tab value="created" leftSection={<IconUser size={18} />}>
-          <Text size="sm" fw={500}>
-            {t("Created by me")}
-          </Text>
-        </Tabs.Tab>
       </Tabs.List>
 
       <Space my="md" />
@@ -42,12 +21,6 @@ export default function HomeTabs() {
       <Tabs.Panel value="recent">
         <RecentChanges />
       </Tabs.Panel>
-      <Tabs.Panel value="favorites">
-        <FavoritesPages />
-      </Tabs.Panel>
-      <Tabs.Panel value="created">
-        <CreatedByMe />
-      </Tabs.Panel>
     </Tabs>
   );
 }

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

@@ -12,8 +12,6 @@ import {
   IconMarkdown,
   IconMessage,
   IconPrinter,
-  IconStar,
-  IconStarFilled,
   IconTrash,
   IconWifiOff,
 } from "@tabler/icons-react";
@@ -44,11 +42,6 @@ import { PageStateSegmentedControl } from "@/features/user/components/page-state
 import MovePageModal from "@/features/page/components/move-page-modal.tsx";
 import { useTimeAgo } from "@/hooks/use-time-ago.tsx";
 import { PageShareModal } from "@/ee/page-permission";
-import {
-  useFavoriteIds,
-  useAddFavoriteMutation,
-  useRemoveFavoriteMutation,
-} from "@/features/favorite/queries/favorite-query";
 import {
   useWatchStatusQuery,
   useWatchPageMutation,
@@ -137,10 +130,6 @@ function PageActionMenu({ readOnly }: PageActionMenuProps) {
   ] = useDisclosure(false);
   const [pageEditor] = useAtom(pageEditorAtom);
   const pageUpdatedAt = useTimeAgo(page?.updatedAt);
-  const favoriteIds = useFavoriteIds("page");
-  const addFavoriteMutation = useAddFavoriteMutation();
-  const removeFavoriteMutation = useRemoveFavoriteMutation();
-  const isFavorited = page?.id ? favoriteIds.has(page.id) : false;
   const { data: watchStatus } = useWatchStatusQuery(page?.id);
   const watchPage = useWatchPageMutation();
   const unwatchPage = useUnwatchPageMutation();
@@ -176,16 +165,6 @@ function PageActionMenu({ readOnly }: PageActionMenuProps) {
     openDeleteModal({ onConfirm: () => tree?.delete(page.id) });
   };
 
-  const handleToggleFavorite = () => {
-    if (!page?.id) return;
-    const params = { type: "page" as const, pageId: page.id };
-    if (isFavorited) {
-      removeFavoriteMutation.mutate(params);
-    } else {
-      addFavoriteMutation.mutate(params);
-    }
-  };
-
   return (
     <>
       <Menu
@@ -217,19 +196,6 @@ function PageActionMenu({ readOnly }: PageActionMenuProps) {
             {t("Copy as Markdown")}
           </Menu.Item>
 
-          <Menu.Item
-            leftSection={
-              isFavorited ? (
-                <IconStarFilled size={16} color="var(--mantine-color-yellow-5)" />
-              ) : (
-                <IconStar size={16} />
-              )
-            }
-            onClick={handleToggleFavorite}
-          >
-            {isFavorited ? t("Remove from favorites") : t("Add to favorites")}
-          </Menu.Item>
-
           {watchStatus?.watching ? (
             <Menu.Item
               leftSection={<IconEyeOff size={16} />}

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

@@ -17,7 +17,6 @@ import {
   movePage,
   getPageBreadcrumbs,
   getRecentChanges,
-  getCreatedByPages,
   getAllSidebarPages,
   getDeletedPages,
   restorePage,
@@ -245,7 +244,7 @@ export function useGetSidebarPagesQuery(
   return useInfiniteQuery({
     queryKey: ["sidebar-pages", data],
     enabled: !!data?.pageId || !!data?.spaceId,
-    queryFn: ({ pageParam }) => getSidebarPages({ ...data, cursor: pageParam, limit: 100 }),
+    queryFn: ({ pageParam }) => getSidebarPages({ ...data, cursor: pageParam }),
     initialPageParam: undefined,
     getNextPageParam: (lastPage) =>
       lastPage.meta?.nextCursor ?? undefined,
@@ -256,7 +255,7 @@ export function useGetRootSidebarPagesQuery(data: SidebarPagesParams) {
   return useInfiniteQuery({
     queryKey: ["root-sidebar-pages", data.spaceId],
     queryFn: async ({ pageParam }) => {
-      return getSidebarPages({ spaceId: data.spaceId, cursor: pageParam, limit: 100 });
+      return getSidebarPages({ spaceId: data.spaceId, cursor: pageParam });
     },
     initialPageParam: undefined,
     getNextPageParam: (lastPage) =>
@@ -286,26 +285,12 @@ export async function fetchAllAncestorChildren(params: SidebarPagesParams) {
   return buildTree(allItems);
 }
 
-export function useRecentChangesQuery(spaceId?: string) {
-  return useInfiniteQuery({
+export function useRecentChangesQuery(
+  spaceId?: string,
+): UseQueryResult<IPagination<IPage>, Error> {
+  return useQuery({
     queryKey: ["recent-changes", spaceId],
-    queryFn: ({ pageParam }) =>
-      getRecentChanges({ spaceId, cursor: pageParam, limit: 15 }),
-    initialPageParam: undefined as string | undefined,
-    getNextPageParam: (lastPage) =>
-      lastPage.meta.hasNextPage ? lastPage.meta.nextCursor : undefined,
-    refetchOnMount: true,
-  });
-}
-
-export function useCreatedByQuery(params?: { userId?: string; spaceId?: string }) {
-  const { userId, spaceId } = params ?? {};
-  return useInfiniteQuery({
-    queryKey: ["pages-created-by-user", { userId, spaceId }],
-    queryFn: ({ pageParam }) => getCreatedByPages({ userId, spaceId, cursor: pageParam, limit: 15 }),
-    initialPageParam: undefined as string | undefined,
-    getNextPageParam: (lastPage) =>
-      lastPage.meta.hasNextPage ? lastPage.meta.nextCursor : undefined,
+    queryFn: () => getRecentChanges(spaceId),
     refetchOnMount: true,
   });
 }

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

@@ -77,7 +77,7 @@ export async function getAllSidebarPages(
   const pageParams: (string | undefined)[] = [];
 
   do {
-    const req = await api.post("/pages/sidebar-pages", { ...params, cursor, limit: 100 });
+    const req = await api.post("/pages/sidebar-pages", { ...params, cursor });
 
     const data: IPagination<IPage> = req.data;
     pages.push(data);
@@ -100,16 +100,9 @@ export async function getPageBreadcrumbs(
 }
 
 export async function getRecentChanges(
-  params?: QueryParams & { spaceId?: string },
+  spaceId?: string,
 ): Promise<IPagination<IPage>> {
-  const req = await api.post("/pages/recent", params);
-  return req.data;
-}
-
-export async function getCreatedByPages(
-  params?: QueryParams & { userId?: string; spaceId?: string },
-): Promise<IPagination<IPage>> {
-  const req = await api.post("/pages/created-by-user", params);
+  const req = await api.post("/pages/recent", { spaceId });
   return req.data;
 }
 

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

@@ -28,8 +28,6 @@ import {
   IconLink,
   IconPlus,
   IconPointFilled,
-  IconStar,
-  IconStarFilled,
   IconTrash,
 } from "@tabler/icons-react";
 import {
@@ -71,7 +69,6 @@ import { mobileSidebarAtom } from "@/components/layouts/global/hooks/atoms/sideb
 import { useToggleSidebar } from "@/components/layouts/global/hooks/hooks/use-toggle-sidebar.ts";
 import CopyPageModal from "../../components/copy-page-modal.tsx";
 import { duplicatePage } from "../../services/page-service.ts";
-import { useFavoriteIds, useAddFavoriteMutation, useRemoveFavoriteMutation } from "@/features/favorite/queries/favorite-query";
 
 interface SpaceTreeProps {
   spaceId: string;
@@ -509,10 +506,6 @@ function NodeMenu({ node, treeApi, spaceId }: NodeMenuProps) {
     copyPageModalOpened,
     { open: openCopyPageModal, close: closeCopySpaceModal },
   ] = useDisclosure(false);
-  const favoriteIds = useFavoriteIds("page");
-  const addFavorite = useAddFavoriteMutation();
-  const removeFavorite = useRemoveFavoriteMutation();
-  const isFavorited = favoriteIds.has(node.data.id);
 
   const handleCopyLink = () => {
     const pageUrl =
@@ -615,21 +608,6 @@ function NodeMenu({ node, treeApi, spaceId }: NodeMenuProps) {
             {t("Copy link")}
           </Menu.Item>
 
-          <Menu.Item
-            leftSection={isFavorited ? <IconStarFilled size={16} /> : <IconStar size={16} />}
-            onClick={(e) => {
-              e.preventDefault();
-              e.stopPropagation();
-              if (isFavorited) {
-                removeFavorite.mutate({ type: "page", pageId: node.data.id });
-              } else {
-                addFavorite.mutate({ type: "page", pageId: node.data.id });
-              }
-            }}
-          >
-            {isFavorited ? t("Remove from favorites") : t("Add to favorites")}
-          </Menu.Item>
-
           <Menu.Item
             leftSection={<IconFileExport size={16} />}
             onClick={(e) => {

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

@@ -68,7 +68,6 @@ export interface SidebarPagesParams {
   spaceId?: string;
   pageId?: string;
   cursor?: string;
-  limit?: number;
 }
 
 export interface IPageInput {

apps/client/src/features/search/components/search-control.module.css

@@ -29,8 +29,6 @@
     border-radius: var(--mantine-radius-sm);
     border: 1px solid;
     font-weight: bold;
-    white-space: nowrap;
-    flex-shrink: 0;
 
     @mixin light {
         color: var(--mantine-color-gray-7);

apps/client/src/features/space/components/sidebar/space-sidebar.tsx

@@ -56,7 +56,6 @@ export function SpaceSidebar() {
   const [mobileSidebarOpened] = useAtom(mobileSidebarAtom);
   const toggleMobileSidebar = useToggleSidebar(mobileSidebarAtom);
 
-
   const { spaceSlug } = useParams();
   const { data: space } = useGetSpaceBySlugQuery(spaceSlug);
 
@@ -82,13 +81,11 @@ export function SpaceSidebar() {
             marginBottom: 3,
           }}
         >
-          <Group gap={4} wrap="nowrap" justify="space-between" style={{ width: "100%" }}>
-            <SwitchSpace
-              spaceName={space?.name}
-              spaceSlug={space?.slug}
-              spaceIcon={space?.logo}
-            />
-          </Group>
+          <SwitchSpace
+            spaceName={space?.name}
+            spaceSlug={space?.slug}
+            spaceIcon={space?.logo}
+          />
         </div>
 
         <div className={classes.section}>

apps/client/src/features/space/components/space-carousel.module.css

@@ -1,22 +0,0 @@
-.card {
-  background-color: var(--mantine-color-body);
-  width: 220px;
-
-  @mixin hover {
-    box-shadow: var(--mantine-shadow-xs);
-    transform: scale(1.02);
-  }
-}
-
-.cardSection {
-  background: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-6));
-}
-
-.title {
-  font-family:
-          Greycliff CF,
-          var(--mantine-font-family);
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-}

apps/client/src/features/space/components/space-carousel.tsx

@@ -1,77 +0,0 @@
-import { Text, Card, rem, Group, Button } from "@mantine/core";
-import {
-  prefetchSpace,
-  useGetSpacesQuery,
-} from "@/features/space/queries/space-query.ts";
-import { getSpaceUrl } from "@/lib/config.ts";
-import { Link } from "react-router-dom";
-import classes from "./space-carousel.module.css";
-import { formatMemberCount } from "@/lib";
-import { useTranslation } from "react-i18next";
-import { IconArrowRight } from "@tabler/icons-react";
-import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
-import { AvatarIconType } from "@/features/attachments/types/attachment.types.ts";
-import CardCarousel from "@/components/ui/card-carousel";
-
-export default function SpaceCarousel() {
-  const { t } = useTranslation();
-  const { data } = useGetSpacesQuery({ limit: 20 });
-
-  const cards = data?.items.map((space) => (
-    <Card
-      key={space.id}
-      p="xs"
-      radius="md"
-      component={Link}
-      to={getSpaceUrl(space.slug)}
-      onMouseEnter={() => prefetchSpace(space.slug, space.id)}
-      className={classes.card}
-      withBorder
-    >
-      <Card.Section className={classes.cardSection} h={40}></Card.Section>
-      <CustomAvatar
-        name={space.name}
-        avatarUrl={space.logo}
-        type={AvatarIconType.SPACE_ICON}
-        color="initials"
-        variant="filled"
-        size="md"
-        mt={rem(-20)}
-      />
-
-      <Text fz="md" fw={500} mt="xs" className={classes.title}>
-        {space.name}
-      </Text>
-
-      <Text c="dimmed" size="xs" fw={700} mt="md">
-        {formatMemberCount(space.memberCount, t)}
-      </Text>
-    </Card>
-  ));
-
-  return (
-    <>
-      <Group justify="space-between" align="center" mb="md">
-        <Text fz="sm" fw={500}>
-          {t("Spaces you belong to")}
-        </Text>
-      </Group>
-
-      <CardCarousel ariaLabel={t("Spaces you belong to")}>{cards}</CardCarousel>
-
-      {data?.items && data.items.length > 1 && (
-        <Group justify="flex-end" mt="lg">
-          <Button
-            component={Link}
-            to="/spaces"
-            variant="subtle"
-            rightSection={<IconArrowRight size={16} />}
-            size="sm"
-          >
-            {t("View all spaces")}
-          </Button>
-        </Group>
-      )}
-    </>
-  );
-}

apps/client/src/features/space/components/space-grid.module.css

@@ -7,26 +7,9 @@
 }
 
 .cardSection {
-    position: relative;
     background: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-6));
 }
 
-.starButton {
-    position: absolute;
-    top: 4px;
-    right: 4px;
-    opacity: 0;
-    transition: opacity 150ms ease;
-}
-
-.starButton[data-favorited="true"] {
-    opacity: 1;
-}
-
-.card:hover .starButton {
-    opacity: 1;
-}
-
 .title {
     font-family:
             Greycliff CF,

apps/client/src/features/space/components/space-grid.tsx

@@ -12,15 +12,12 @@ import { useTranslation } from "react-i18next";
 import { IconArrowRight } from "@tabler/icons-react";
 import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
 import { AvatarIconType } from "@/features/attachments/types/attachment.types.ts";
-import StarButton from "@/features/favorite/components/star-button";
-import { useFavoriteIds } from "@/features/favorite/queries/favorite-query";
 
 export default function SpaceGrid() {
   const { t } = useTranslation();
   const { data, isLoading } = useGetSpacesQuery({ limit: 10 });
-  const spaceFavoriteIds = useFavoriteIds("space");
 
-  const cards = data?.items.slice(0, 6).map((space, index) => (
+  const cards = data?.items.slice(0, 9).map((space, index) => (
     <Card
       key={space.id}
       p="xs"
@@ -31,11 +28,7 @@ export default function SpaceGrid() {
       className={classes.card}
       withBorder
     >
-      <Card.Section className={classes.cardSection} h={40}>
-        <div className={classes.starButton} data-favorited={spaceFavoriteIds.has(space.id)}>
-          <StarButton type="space" spaceId={space.id} size={16} />
-        </div>
-      </Card.Section>
+      <Card.Section className={classes.cardSection} h={40}></Card.Section>
       <CustomAvatar
         name={space.name}
         avatarUrl={space.logo}
@@ -66,7 +59,7 @@ export default function SpaceGrid() {
 
       <SimpleGrid cols={{ base: 1, xs: 2, sm: 3 }}>{cards}</SimpleGrid>
 
-      {data?.items && data.items.length > 6 && (
+      {data?.items && data.items.length > 9 && (
         <Group justify="flex-end" mt="lg">
           <Button
             component={Link}

apps/client/src/features/space/components/space-home-tabs.tsx

@@ -1,44 +1,23 @@
 import { Text, Tabs, Space } from "@mantine/core";
-import { IconClockHour3, IconStar, IconUser } from "@tabler/icons-react";
-import RecentChanges from "@/components/common/recent-changes";
-import FavoritesPages from "@/features/home/components/favorites-pages";
-import CreatedByMe from "@/features/home/components/created-by-me";
+import { IconClockHour3 } from "@tabler/icons-react";
+import RecentChanges from "@/components/common/recent-changes.tsx";
 import { useParams } from "react-router-dom";
-import { useGetSpaceBySlugQuery } from "@/features/space/queries/space-query";
+import { useGetSpaceBySlugQuery } from "@/features/space/queries/space-query.ts";
 import { useTranslation } from "react-i18next";
-import { useAtom } from "jotai";
-import { homeTabAtom } from "@/features/home/atoms/home-tab-atom";
 
 export default function SpaceHomeTabs() {
   const { t } = useTranslation();
   const { spaceSlug } = useParams();
   const { data: space } = useGetSpaceBySlugQuery(spaceSlug);
-  const [activeTab, setActiveTab] = useAtom(homeTabAtom);
 
   return (
-    <Tabs
-      color="dark"
-      value={activeTab}
-      onChange={(value) => {
-        if (value) setActiveTab(value);
-      }}
-    >
-      <Tabs.List style={{ flexWrap: "nowrap", overflowX: "auto" }}>
+    <Tabs defaultValue="recent">
+      <Tabs.List>
         <Tabs.Tab value="recent" leftSection={<IconClockHour3 size={18} />}>
           <Text size="sm" fw={500}>
             {t("Recently updated")}
           </Text>
         </Tabs.Tab>
-        <Tabs.Tab value="favorites" leftSection={<IconStar size={18} />}>
-          <Text size="sm" fw={500}>
-            {t("Favorites")}
-          </Text>
-        </Tabs.Tab>
-        <Tabs.Tab value="created" leftSection={<IconUser size={18} />}>
-          <Text size="sm" fw={500}>
-            {t("Created by me")}
-          </Text>
-        </Tabs.Tab>
       </Tabs.List>
 
       <Space my="md" />
@@ -46,12 +25,6 @@ export default function SpaceHomeTabs() {
       <Tabs.Panel value="recent">
         {space?.id && <RecentChanges spaceId={space.id} />}
       </Tabs.Panel>
-      <Tabs.Panel value="favorites">
-        <FavoritesPages />
-      </Tabs.Panel>
-      <Tabs.Panel value="created">
-        {space?.id && <CreatedByMe spaceId={space.id} />}
-      </Tabs.Panel>
     </Tabs>
   );
 }

apps/client/src/features/space/components/spaces-page/all-spaces-list.tsx

@@ -9,7 +9,6 @@ import {
   Anchor,
 } from "@mantine/core";
 import { IconDots, IconSettings } from "@tabler/icons-react";
-import StarButton from "@/features/favorite/components/star-button";
 import { Link } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import React, { useState } from "react";
@@ -118,7 +117,6 @@ export default function AllSpacesList({
                   </Table.Td>
                   <Table.Td>
                     <Group gap="xs" justify="flex-end">
-                      <StarButton type="space" spaceId={space.id} size={16} />
                       <Menu position="bottom-end">
                         <Menu.Target>
                           <ActionIcon variant="subtle" color="gray">

apps/client/src/features/space/components/spaces-page/favorite-spaces-grid.tsx

@@ -1,90 +0,0 @@
-import { Text, SimpleGrid, Card, rem, Group, Box, Button } from "@mantine/core";
-import { useState } from "react";
-import { Link } from "react-router-dom";
-import { useTranslation } from "react-i18next";
-import { useFavoritesQuery } from "@/features/favorite/queries/favorite-query";
-import { CustomAvatar } from "@/components/ui/custom-avatar";
-import { AvatarIconType } from "@/features/attachments/types/attachment.types";
-import { getSpaceUrl } from "@/lib/config";
-import { prefetchSpace } from "@/features/space/queries/space-query";
-import StarButton from "@/features/favorite/components/star-button";
-import { IconChevronDown } from "@tabler/icons-react";
-import spaceClasses from "../space-grid.module.css";
-
-const INITIAL_COUNT = 8;
-
-export default function FavoriteSpacesGrid() {
-  const { t } = useTranslation();
-  const { data } = useFavoritesQuery("space");
-  const [expanded, setExpanded] = useState(false);
-
-  const allSpaces = (data?.pages.flatMap((p) => p.items) ?? [])
-    .filter((fav) => fav.space)
-    .sort((a, b) => a.space!.name.localeCompare(b.space!.name));
-
-  if (allSpaces.length === 0) return null;
-
-  const visibleSpaces = expanded
-    ? allSpaces
-    : allSpaces.slice(0, INITIAL_COUNT);
-
-  return (
-    <Box mb="xl">
-      <Text size="sm" fw={500} mb="md">
-        {t("Favorite spaces")}
-      </Text>
-
-      <SimpleGrid cols={{ base: 1, xs: 2, sm: 4 }}>
-        {visibleSpaces.map((fav) => (
-          <Card
-            key={fav.id}
-            p="xs"
-            radius="md"
-            component={Link}
-            to={getSpaceUrl(fav.space!.slug)}
-            onMouseEnter={() =>
-              prefetchSpace(fav.space!.slug, fav.space!.id)
-            }
-            className={spaceClasses.card}
-            withBorder
-          >
-            <Card.Section className={spaceClasses.cardSection} h={40}>
-              <div className={spaceClasses.starButton} data-favorited="true">
-                <StarButton
-                  type="space"
-                  spaceId={fav.space!.id}
-                  size={16}
-                />
-              </div>
-            </Card.Section>
-            <CustomAvatar
-              name={fav.space!.name}
-              avatarUrl={fav.space!.logo}
-              type={AvatarIconType.SPACE_ICON}
-              color="initials"
-              variant="filled"
-              size="md"
-              mt={rem(-20)}
-            />
-            <Text fz="md" fw={500} mt="xs" className={spaceClasses.title}>
-              {fav.space!.name}
-            </Text>
-          </Card>
-        ))}
-      </SimpleGrid>
-
-      {!expanded && allSpaces.length > INITIAL_COUNT && (
-        <Group justify="center" mt="sm">
-          <Button
-            variant="subtle"
-            size="xs"
-            rightSection={<IconChevronDown size={14} />}
-            onClick={() => setExpanded(true)}
-          >
-            {t("Show more")}
-          </Button>
-        </Group>
-      )}
-    </Box>
-  );
-}

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

@@ -69,10 +69,9 @@ export const prefetchSpace = (spaceSlug: string, spaceId?: string) => {
 
   if (spaceId) {
     // this endpoint only accepts uuid for now
-    queryClient.prefetchInfiniteQuery({
+    queryClient.prefetchQuery({
       queryKey: ["recent-changes", spaceId],
-      queryFn: () => getRecentChanges({ spaceId }),
-      initialPageParam: undefined,
+      queryFn: () => getRecentChanges(spaceId),
     });
   }
 };

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

@@ -27,14 +27,12 @@ export interface IWorkspace {
   mcpEnabled?: boolean;
   trashRetentionDays?: number;
   restrictApiToAdmins?: boolean;
-  allowMemberTemplates?: boolean;
 }
 
 export interface IWorkspaceSettings {
   ai?: IWorkspaceAiSettings;
   sharing?: IWorkspaceSharingSettings;
   api?: IWorkspaceApiSettings;
-  templates?: IWorkspaceTemplateSettings;
 }
 
 export interface IWorkspaceApiSettings {
@@ -45,17 +43,12 @@ export interface IWorkspaceAiSettings {
   search?: boolean;
   generative?: boolean;
   mcp?: boolean;
-  chat?: boolean;
 }
 
 export interface IWorkspaceSharingSettings {
   disabled?: boolean;
 }
 
-export interface IWorkspaceTemplateSettings {
-  allowMemberTemplates?: boolean;
-}
-
 export interface ICreateInvite {
   role: string;
   emails: string[];

apps/client/src/hooks/use-time-ago.tsx

@@ -26,7 +26,7 @@ function getSnapshot() {
   return tick;
 }
 
-export function useTimeAgo(date: Date | string | undefined) {
+export function useTimeAgo(date: Date | string) {
   const currentTick = useSyncExternalStore(subscribe, getSnapshot);
-  return useMemo(() => (date ? timeAgo(new Date(date)) : ""), [date, currentTick]);
+  return useMemo(() => timeAgo(new Date(date)), [date, currentTick]);
 }

apps/client/src/lib/app-route.ts

@@ -1,7 +1,6 @@
 const APP_ROUTE = {
   HOME: "/home",
   SPACES: "/spaces",
-  FAVORITES: "/favorites",
   SEARCH: "/search",
   AUTH: {
     LOGIN: "/login",

apps/client/src/pages/dashboard/home.tsx

@@ -1,7 +1,6 @@
 import { Container, Space } from "@mantine/core";
 import HomeTabs from "@/features/home/components/home-tabs";
-import HomeAiPrompt from "@/features/home/components/home-ai-prompt";
-import SpaceCarousel from "@/features/space/components/space-carousel.tsx";
+import SpaceGrid from "@/features/space/components/space-grid.tsx";
 import { getAppName } from "@/lib/config.ts";
 import { Helmet } from "react-helmet-async";
 import { useTranslation } from "react-i18next";
@@ -16,12 +15,8 @@ export default function Home() {
           {t("Home")} - {getAppName()}
         </title>
       </Helmet>
-      <Container size={"900"} pt="xl">
-        <HomeAiPrompt />
-
-        <Space h="xl" />
-
-        <SpaceCarousel />
+      <Container size={"800"} pt="xl">
+        <SpaceGrid />
 
         <Space h="xl" />
 

apps/client/src/pages/favorites/favorites-page.tsx

@@ -1,139 +0,0 @@
-import {
-  Text,
-  Group,
-  UnstyledButton,
-  Badge,
-  Table,
-  Container,
-  Title,
-  ActionIcon,
-  Button,
-} from "@mantine/core";
-import { Link } from "react-router-dom";
-import { buildPageUrl } from "@/features/page/page.utils";
-import { formattedDate } from "@/lib/time";
-import { useFavoritesQuery } from "@/features/favorite/queries/favorite-query";
-import { IconFileDescription, IconStar } from "@tabler/icons-react";
-import { EmptyState } from "@/components/ui/empty-state";
-import { getSpaceUrl } from "@/lib/config";
-import { useTranslation } from "react-i18next";
-import { getInitialsColor } from "@/lib/get-initials-color";
-import PageListSkeleton from "@/components/ui/page-list-skeleton";
-
-export default function FavoritesPage() {
-  const { t } = useTranslation();
-  const { data, isLoading, isError, hasNextPage, fetchNextPage, isFetchingNextPage } = useFavoritesQuery("page");
-  const favorites = data?.pages.flatMap((p) => p.items) ?? [];
-
-  if (isLoading) {
-    return (
-      <Container size={800} py="xl">
-        <Title order={3} mb="lg">
-          {t("Favorites")}
-        </Title>
-        <PageListSkeleton />
-      </Container>
-    );
-  }
-
-  if (isError) {
-    return (
-      <Container size={800} py="xl">
-        <Title order={3} mb="lg">
-          {t("Favorites")}
-        </Title>
-        <Text>{t("Failed to fetch favorite pages")}</Text>
-      </Container>
-    );
-  }
-
-  return (
-    <Container size={800} py="xl">
-      <Title order={3} mb="lg">
-        {t("Favorites")}
-      </Title>
-      {favorites.length > 0 ? (
-        <>
-          <Table.ScrollContainer minWidth={500}>
-            <Table highlightOnHover verticalSpacing="sm">
-              <Table.Tbody>
-                {favorites.map((fav) =>
-                  fav.page ? (
-                    <Table.Tr key={fav.id}>
-                      <Table.Td>
-                        <UnstyledButton
-                          component={Link}
-                          to={buildPageUrl(
-                            fav.space?.slug,
-                            fav.page.slugId,
-                            fav.page.title,
-                          )}
-                        >
-                          <Group wrap="nowrap">
-                            {fav.page.icon || (
-                              <ActionIcon
-                                variant="transparent"
-                                color="gray"
-                                size={18}
-                              >
-                                <IconFileDescription size={18} />
-                              </ActionIcon>
-                            )}
-                            <Text fw={500} size="md" lineClamp={1}>
-                              {fav.page.title || t("Untitled")}
-                            </Text>
-                          </Group>
-                        </UnstyledButton>
-                      </Table.Td>
-                      <Table.Td>
-                        {fav.space && (
-                          <Badge
-                            color={getInitialsColor(fav.space.name)}
-                            variant="light"
-                            component={Link}
-                            to={getSpaceUrl(fav.space.slug)}
-                            style={{ cursor: "pointer" }}
-                          >
-                            {fav.space.name}
-                          </Badge>
-                        )}
-                      </Table.Td>
-                      <Table.Td>
-                        <Text
-                          c="dimmed"
-                          style={{ whiteSpace: "nowrap" }}
-                          size="xs"
-                          fw={500}
-                        >
-                          {formattedDate(new Date(fav.createdAt))}
-                        </Text>
-                      </Table.Td>
-                    </Table.Tr>
-                  ) : null,
-                )}
-              </Table.Tbody>
-            </Table>
-          </Table.ScrollContainer>
-          {hasNextPage && (
-            <Button
-              variant="subtle"
-              fullWidth
-              mt="sm"
-              mb="xl"
-              onClick={() => fetchNextPage()}
-              loading={isFetchingNextPage}
-            >
-              {t("Load more")}
-            </Button>
-          )}
-        </>
-      ) : (
-        <EmptyState
-          icon={IconStar}
-          title={t("No favorite pages")}
-          description={t("Pages you favorite will show up here.")}
-        />
-      )}
-    </Container>
-  );
-}

apps/client/src/pages/space/space-home.tsx

@@ -14,7 +14,7 @@ export default function SpaceHome() {
             <Helmet>
                 <title>{space?.name || 'Overview'} - {getAppName()}</title>
             </Helmet>
-            <Container size={"900"} pt="xl">
+            <Container size={"800"} pt="xl">
                 {space && <SpaceHomeTabs/>}
             </Container>
         </>

apps/client/src/pages/spaces/spaces.tsx

@@ -5,7 +5,6 @@ import { getAppName } from "@/lib/config";
 import { useGetSpacesQuery } from "@/features/space/queries/space-query";
 import CreateSpaceModal from "@/features/space/components/create-space-modal";
 import { AllSpacesList } from "@/features/space/components/spaces-page";
-import FavoriteSpacesGrid from "@/features/space/components/spaces-page/favorite-spaces-grid";
 import { usePaginateAndSearch } from "@/hooks/use-paginate-and-search";
 import useUserRole from "@/hooks/use-user-role";
 
@@ -34,11 +33,9 @@ export default function Spaces() {
           {isAdmin && <CreateSpaceModal />}
         </Group>
 
-        <FavoriteSpacesGrid />
-
         <Box>
           <Text size="sm" c="dimmed" mb="md">
-            {t("All spaces")}
+            {t("Spaces you belong to")}
           </Text>
 
           <AllSpacesList

apps/server/package.json

@@ -75,12 +75,10 @@
     "class-transformer": "^0.5.1",
     "class-validator": "^0.15.1",
     "cookie": "^1.1.1",
-    "fast-bm25": "0.0.5",
     "fastify-ip": "^2.0.0",
     "fs-extra": "^11.3.4",
     "happy-dom": "20.8.9",
     "ioredis": "^5.10.1",
-    "js-tiktoken": "^1.0.21",
     "jsonwebtoken": "^9.0.3",
     "kysely": "^0.28.14",
     "kysely-migration-cli": "^0.4.2",

apps/server/src/common/features.ts

@@ -17,7 +17,6 @@ export const Feature = {
   RETENTION: 'retention',
   SHARING_CONTROLS: 'sharing:controls',
   VIEWER_COMMENTS: 'comment:viewer',
-  TEMPLATES: 'templates',
 } as const;
 
 export type FeatureKey = (typeof Feature)[keyof typeof Feature];

apps/server/src/core/attachment/attachment.constants.ts

@@ -3,7 +3,6 @@ export enum AttachmentType {
   WorkspaceIcon = 'workspace-icon',
   SpaceIcon = 'space-icon',
   File = 'file',
-  Chat = 'chat',
 }
 
 export const validImageExtensions = ['.jpg', '.png', '.jpeg'];

apps/server/src/core/attachment/attachment.controller.ts

@@ -178,30 +178,22 @@ export class AttachmentController {
     }
 
     const attachment = await this.attachmentRepo.findById(fileId);
-    if (!attachment || attachment.workspaceId !== workspace.id) {
+    if (
+      !attachment ||
+      attachment.workspaceId !== workspace.id ||
+      !attachment.pageId ||
+      !attachment.spaceId
+    ) {
       throw new NotFoundException();
     }
 
-    if (attachment.aiChatId) {
-      // Chat-owned attachment: only the user who uploaded (and therefore
-      // owns the chat, per AttachmentRepo.claimAttachmentsForChat) can
-      // read it back.
-      if (attachment.creatorId !== user.id) {
-        throw new NotFoundException();
-      }
-    } else {
-      if (!attachment.pageId || !attachment.spaceId) {
-        throw new NotFoundException();
-      }
-
-      const page = await this.pageRepo.findById(attachment.pageId);
-      if (!page) {
-        throw new NotFoundException();
-      }
-
-      await this.pageAccessService.validateCanView(page, user);
+    const page = await this.pageRepo.findById(attachment.pageId);
+    if (!page) {
+      throw new NotFoundException();
     }
 
+    await this.pageAccessService.validateCanView(page, user);
+
     try {
       return await this.sendFileResponse(req, res, attachment, 'private');
     } catch (err) {