feat: favorites (#2103)

* feat: favorites and templates(ee)

* rename migrations

* fix sidebar

* cleanup tabs

* fix

* turn off templates

* cleanup

* uuid validation

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,8 +688,10 @@ const CommandGroups: SlashMenuGroupedItemsType = {
 
 export const getSuggestionItems = ({
   query,
+  excludeItems,
 }: {
   query: string;
+  excludeItems?: Set<string>;
 }): SlashMenuGroupedItemsType => {
   const search = query.toLowerCase();
   const filteredGroups: SlashMenuGroupedItemsType = {};
@@ -706,6 +708,7 @@ 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,7 +11,9 @@ 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 from "@/features/editor/extensions/slash-command";
+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 { Collaboration, isChangeOrigin } from "@tiptap/extension-collaboration";
 import { CollaborationCaret } from "@tiptap/extension-collaboration-caret";
 import { HocuspocusProvider } from "@hocuspocus/provider";
@@ -380,6 +382,27 @@ 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,4 +47,5 @@ const SlashCommand = Command.configure({
   },
 });
 
+export { Command as SlashCommandExtension };
 export default SlashCommand;

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

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

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

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

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

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

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

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

@@ -0,0 +1,124 @@
+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-tabs.tsx

@@ -1,19 +1,40 @@
 import { Text, Tabs, Space } from "@mantine/core";
-import { IconClockHour3 } from "@tabler/icons-react";
-import RecentChanges from "@/components/common/recent-changes.tsx";
+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 { 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 defaultValue="recent">
-      <Tabs.List>
+    <Tabs
+      color="dark"
+      value={activeTab}
+      onChange={(value) => {
+        if (value) setActiveTab(value);
+      }}
+    >
+      <Tabs.List style={{ flexWrap: "nowrap", overflowX: "auto" }}>
         <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" />
@@ -21,6 +42,12 @@ 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,6 +12,8 @@ import {
   IconMarkdown,
   IconMessage,
   IconPrinter,
+  IconStar,
+  IconStarFilled,
   IconTrash,
   IconWifiOff,
 } from "@tabler/icons-react";
@@ -42,6 +44,11 @@ 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,
@@ -130,6 +137,10 @@ 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();
@@ -165,6 +176,16 @@ 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
@@ -196,6 +217,19 @@ 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,6 +17,7 @@ import {
   movePage,
   getPageBreadcrumbs,
   getRecentChanges,
+  getCreatedByPages,
   getAllSidebarPages,
   getDeletedPages,
   restorePage,
@@ -244,7 +245,7 @@ export function useGetSidebarPagesQuery(
   return useInfiniteQuery({
     queryKey: ["sidebar-pages", data],
     enabled: !!data?.pageId || !!data?.spaceId,
-    queryFn: ({ pageParam }) => getSidebarPages({ ...data, cursor: pageParam }),
+    queryFn: ({ pageParam }) => getSidebarPages({ ...data, cursor: pageParam, limit: 100 }),
     initialPageParam: undefined,
     getNextPageParam: (lastPage) =>
       lastPage.meta?.nextCursor ?? undefined,
@@ -255,7 +256,7 @@ export function useGetRootSidebarPagesQuery(data: SidebarPagesParams) {
   return useInfiniteQuery({
     queryKey: ["root-sidebar-pages", data.spaceId],
     queryFn: async ({ pageParam }) => {
-      return getSidebarPages({ spaceId: data.spaceId, cursor: pageParam });
+      return getSidebarPages({ spaceId: data.spaceId, cursor: pageParam, limit: 100 });
     },
     initialPageParam: undefined,
     getNextPageParam: (lastPage) =>
@@ -285,12 +286,26 @@ export async function fetchAllAncestorChildren(params: SidebarPagesParams) {
   return buildTree(allItems);
 }
 
-export function useRecentChangesQuery(
-  spaceId?: string,
-): UseQueryResult<IPagination<IPage>, Error> {
-  return useQuery({
+export function useRecentChangesQuery(spaceId?: string) {
+  return useInfiniteQuery({
     queryKey: ["recent-changes", spaceId],
-    queryFn: () => getRecentChanges(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,
     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 });
+    const req = await api.post("/pages/sidebar-pages", { ...params, cursor, limit: 100 });
 
     const data: IPagination<IPage> = req.data;
     pages.push(data);
@@ -100,9 +100,16 @@ export async function getPageBreadcrumbs(
 }
 
 export async function getRecentChanges(
-  spaceId?: string,
+  params?: QueryParams & { spaceId?: string },
 ): Promise<IPagination<IPage>> {
-  const req = await api.post("/pages/recent", { spaceId });
+  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);
   return req.data;
 }
 

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

@@ -28,6 +28,8 @@ import {
   IconLink,
   IconPlus,
   IconPointFilled,
+  IconStar,
+  IconStarFilled,
   IconTrash,
 } from "@tabler/icons-react";
 import {
@@ -69,6 +71,7 @@ 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;
@@ -506,6 +509,10 @@ 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 =
@@ -608,6 +615,21 @@ 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,6 +68,7 @@ export interface SidebarPagesParams {
   spaceId?: string;
   pageId?: string;
   cursor?: string;
+  limit?: number;
 }
 
 export interface IPageInput {

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

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

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

@@ -7,9 +7,26 @@
 }
 
 .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,12 +12,15 @@ 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, 9).map((space, index) => (
+  const cards = data?.items.slice(0, 6).map((space, index) => (
     <Card
       key={space.id}
       p="xs"
@@ -28,7 +31,11 @@ export default function SpaceGrid() {
       className={classes.card}
       withBorder
     >
-      <Card.Section className={classes.cardSection} h={40}></Card.Section>
+      <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>
       <CustomAvatar
         name={space.name}
         avatarUrl={space.logo}
@@ -59,7 +66,7 @@ export default function SpaceGrid() {
 
       <SimpleGrid cols={{ base: 1, xs: 2, sm: 3 }}>{cards}</SimpleGrid>
 
-      {data?.items && data.items.length > 9 && (
+      {data?.items && data.items.length > 6 && (
         <Group justify="flex-end" mt="lg">
           <Button
             component={Link}

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

@@ -1,23 +1,44 @@
 import { Text, Tabs, Space } from "@mantine/core";
-import { IconClockHour3 } from "@tabler/icons-react";
-import RecentChanges from "@/components/common/recent-changes.tsx";
+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 { useParams } from "react-router-dom";
-import { useGetSpaceBySlugQuery } from "@/features/space/queries/space-query.ts";
+import { useGetSpaceBySlugQuery } from "@/features/space/queries/space-query";
 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 defaultValue="recent">
-      <Tabs.List>
+    <Tabs
+      color="dark"
+      value={activeTab}
+      onChange={(value) => {
+        if (value) setActiveTab(value);
+      }}
+    >
+      <Tabs.List style={{ flexWrap: "nowrap", overflowX: "auto" }}>
         <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" />
@@ -25,6 +46,12 @@ 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,6 +9,7 @@ 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";
@@ -117,6 +118,7 @@ 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

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

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

@@ -27,12 +27,14 @@ 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 {
@@ -50,6 +52,10 @@ export interface IWorkspaceSharingSettings {
   disabled?: boolean;
 }
 
+export interface IWorkspaceTemplateSettings {
+  allowMemberTemplates?: boolean;
+}
+
 export interface ICreateInvite {
   role: string;
   emails: string[];