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/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)}
+        />
+      )}
+    </>
+  );
+}