feat: favorites (#2103)

* feat: favorites and templates(ee)

* rename migrations

* fix sidebar

* cleanup tabs

* fix

* turn off templates

* cleanup

* uuid validation

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

@@ -5,6 +5,7 @@ import {
   Badge,
   Table,
   ActionIcon,
+  Button,
 } from "@mantine/core";
 import { Link } from "react-router-dom";
 import PageListSkeleton from "@/components/ui/page-list-skeleton.tsx";
@@ -23,7 +24,8 @@ interface Props {
 
 export default function RecentChanges({ spaceId }: Props) {
   const { t } = useTranslation();
-  const { data: pages, isLoading, isError } = useRecentChangesQuery(spaceId);
+  const { data, isLoading, isError, hasNextPage, fetchNextPage, isFetchingNextPage } = useRecentChangesQuery(spaceId);
+  const pages = data?.pages.flatMap((p) => p.items) ?? [];
 
   if (isLoading) {
     return <PageListSkeleton />;
@@ -33,58 +35,72 @@ export default function RecentChanges({ spaceId }: Props) {
     return <Text>{t("Failed to fetch recent pages")}</Text>;
   }
 
-  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 && (
+  return pages.length > 0 ? (
+    <>
+      <Table.ScrollContainer minWidth={500}>
+        <Table highlightOnHover verticalSpacing="sm">
+          <Table.Tbody>
+            {pages.map((page) => (
+              <Table.Tr key={page.id}>
                 <Table.Td>
-                  <Badge
-                    color={getInitialsColor(page?.space.name)}
-                    variant="light"
+                  <UnstyledButton
                     component={Link}
-                    to={getSpaceUrl(page?.space.slug)}
-                    style={{ cursor: "pointer" }}
+                    to={buildPageUrl(page?.space.slug, page.slugId, page.title)}
                   >
-                    {page?.space.name}
-                  </Badge>
+                    <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>
-              )}
-              <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>
+                {!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.updatedAt)}
+                  </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}

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

@@ -52,10 +52,7 @@ export function AppHeader() {
   const [workspace] = useAtom(workspaceAtom);
   const aiChatEnabled = workspace?.settings?.ai?.chat === true;
 
-  const isHomeRoute = location.pathname.startsWith("/home");
-  const isSpacesRoute = location.pathname === "/spaces";
   const isPageRoute = location.pathname.includes("/p/");
-  const hideSidebar = isHomeRoute || isSpacesRoute;
 
   const items = links.map((link) => (
     <Link key={link.label} to={link.link} className={classes.link}>
@@ -67,29 +64,25 @@ export function AppHeader() {
     <>
       <Group h="100%" px="md" justify="space-between" wrap={"nowrap"}>
         <Group wrap="nowrap">
-          {!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={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}>

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

@@ -16,6 +16,7 @@ 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,24 +75,20 @@ export default function GlobalAppShell({
   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 hideSidebar = isHomeRoute || isSpacesRoute;
+  const showGlobalSidebar = !isSpaceRoute && !isSettingsRoute && !isAiRoute;
 
   return (
     <AppShell
       header={{ height: 45 }}
-      navbar={
-        !hideSidebar && {
-          width: isSpaceRoute ? sidebarWidth : 300,
-          breakpoint: "sm",
-          collapsed: {
-            mobile: !mobileOpened,
-            desktop: !desktopOpened,
-          },
-        }
-      }
+      navbar={{
+        width: isSpaceRoute ? sidebarWidth : 300,
+        breakpoint: "sm",
+        collapsed: {
+          mobile: !mobileOpened,
+          desktop: !desktopOpened,
+        },
+      }}
       aside={
         isPageRoute && {
           width: 350,
@@ -104,21 +101,22 @@ export default function GlobalAppShell({
       <AppShell.Header px="md" className={classes.header}>
         <AppHeader />
       </AppShell.Header>
-      {!hideSidebar && (
-        <AppShell.Navbar
-          className={classes.navbar}
-          withBorder={false}
-          ref={sidebarRef}
-        >
-          {!isAiRoute && <div className={classes.resizeHandle} onMouseDown={startResizing} />}
-          {isSpaceRoute && <SpaceSidebar />}
-          {isSettingsRoute && <SettingsSidebar />}
-          {isAiRoute && <AiChatSidebar />}
-        </AppShell.Navbar>
-      )}
+      <AppShell.Navbar
+        className={classes.navbar}
+        withBorder={false}
+        ref={sidebarRef}
+      >
+        {isSpaceRoute && (
+          <div className={classes.resizeHandle} onMouseDown={startResizing} />
+        )}
+        {isSpaceRoute && <SpaceSidebar />}
+        {isSettingsRoute && <SettingsSidebar />}
+        {isAiRoute && <AiChatSidebar />}
+        {showGlobalSidebar && <GlobalSidebar />}
+      </AppShell.Navbar>
       <AppShell.Main>
         {isSettingsRoute ? (
-          <Container size={850}>{children}</Container>
+          <Container size={900}>{children}</Container>
         ) : (
           children
         )}

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

@@ -0,0 +1,89 @@
+.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

@@ -0,0 +1,158 @@
+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/destination-picker/destination-picker-modal.tsx

@@ -0,0 +1,67 @@
+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

@@ -0,0 +1,128 @@
+.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

@@ -0,0 +1,168 @@
+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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,83 @@
+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

@@ -0,0 +1,89 @@
+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

@@ -0,0 +1,108 @@
+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)}
+        />
+      )}
+    </>
+  );
+}