feat: allow collections to be added to favorites

toeverything · Mar 25, 2024 · ac557ce · ac557ce
1 parent 410976e
commit ac557ce
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 5 deletions.
diff --git a/packages/frontend/core/src/components/page-list/view/collection-operations.tsx b/packages/frontend/core/src/components/page-list/view/collection-operations.tsx
@@ -2,15 +2,18 @@ import type { MenuItemProps } from '@affine/component';
 import { Menu, MenuIcon, MenuItem } from '@affine/component';
 import { useAppSettingHelper } from '@affine/core/hooks/affine/use-app-setting-helper';
 import { Workbench } from '@affine/core/modules/workbench';
+import { FavoriteItemsAdapter } from '@affine/core/modules/workspace';
 import type { Collection, DeleteCollectionInfo } from '@affine/env/filter';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import {
   DeleteIcon,
   EditIcon,
+  FavoriteIcon,
+  FavoritedIcon,
   FilterIcon,
   SplitViewIcon,
 } from '@blocksuite/icons';
-import { useService } from '@toeverything/infra';
+import { useLiveData, useService } from '@toeverything/infra';
 import type { PropsWithChildren, ReactElement } from 'react';
 import { useCallback, useMemo } from 'react';
 
@@ -76,6 +79,19 @@ export const CollectionOperations = ({
     workbench.openCollection(collection.id, { at: 'tail' });
   }, [collection.id, workbench]);
 
+  const favAdapter = useService(FavoriteItemsAdapter);
+
+  const onToggleFavoritePage = useCallback(() => {
+    favAdapter.toggle(collection.id, 'collection');
+  }, [favAdapter, collection.id]);
+
+  const favorite = useLiveData(
+    useMemo(
+      () => favAdapter.isFavorite$(collection.id, 'collection'),
+      [collection.id, favAdapter]
+    )
+  );
+
   const actions = useMemo<
     Array<
       | {
@@ -109,6 +125,21 @@ export const CollectionOperations = ({
         name: t['com.affine.collection.menu.edit'](),
         click: showEdit,
       },
+      {
+        icon: (
+          <MenuIcon>
+            {favorite ? (
+              <FavoritedIcon style={{ color: 'var(--affine-primary-color)' }} />
+            ) : (
+              <FavoriteIcon />
+            )}
+          </MenuIcon>
+        ),
+        name: favorite
+          ? t['com.affine.favoritePageOperation.remove']()
+          : t['com.affine.favoritePageOperation.add'](),
+        click: onToggleFavoritePage,
+      },
       ...(appSettings.enableMultiView
         ? [
             {
@@ -142,6 +173,8 @@ export const CollectionOperations = ({
       t,
       showEditName,
       showEdit,
+      favorite,
+      onToggleFavoritePage,
       appSettings.enableMultiView,
       openCollectionSplitView,
       service,

diff --git a/packages/frontend/core/src/components/pure/workspace-slider-bar/favorite/favorite-list.tsx b/packages/frontend/core/src/components/pure/workspace-slider-bar/favorite/favorite-list.tsx
@@ -1,9 +1,10 @@
 import { useBlockSuiteDocMeta } from '@affine/core/hooks/use-block-suite-page-meta';
+import { CollectionService } from '@affine/core/modules/collection';
 import { FavoriteItemsAdapter } from '@affine/core/modules/workspace';
 import type { DocMeta } from '@blocksuite/store';
 import { useDroppable } from '@dnd-kit/core';
 import { useLiveData, useService } from '@toeverything/infra';
-import { useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 
 import { getDropItemId } from '../../../../hooks/affine/use-sidebar-drag';
 import type { FavoriteListProps } from '../index';
@@ -18,10 +19,24 @@ export const FavoriteList = ({
 }: FavoriteListProps) => {
   const metas = useBlockSuiteDocMeta(workspace);
   const favAdapter = useService(FavoriteItemsAdapter);
+  const collections = useLiveData(useService(CollectionService).collections$);
   const dropItemId = getDropItemId('favorites');
 
   const favourites = useLiveData(favAdapter.favorites$);
 
+  const getIdType = useCallback(
+    (id: string): 'doc' | 'collection' | null => {
+      if (metas.some(meta => meta.id === id)) {
+        return 'doc';
+      }
+      if (collections.some(collection => collection.id === id)) {
+        return 'collection';
+      }
+      return null;
+    },
+    [collections, metas]
+  );
+
   const favoriteList = useMemo(
     () =>
       favourites.filter(fav => {
@@ -54,12 +69,16 @@ export const FavoriteList = ({
       ref={setNodeRef}
       data-over={isOver}
     >
-      {favoriteList.map((pageMeta, index) => {
+      {favoriteList.map(item => {
+        if (getIdType(item.id) === 'collection') {
+          return <div key={item.id}>TODO: collection</div>;
+        }
+
         return (
           <FavouritePage
-            key={`${pageMeta}-${index}`}
+            key={item.id}
             metaMapping={metaMapping}
-            pageId={pageMeta.id}
+            pageId={item.id}
             // memo?
             parentIds={emptyPageIdSet}
             docCollection={workspace}