feat(core): add favorite operation to all collection

toeverything · Apr 1, 2024 · 2497717 · 2497717
1 parent b15ae21
commit 2497717
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 16 deletions.
diff --git a/packages/frontend/core/src/components/page-list/list.css.ts b/packages/frontend/core/src/components/page-list/list.css.ts
@@ -1,7 +1,8 @@
 import { cssVar } from '@toeverything/theme';
 import { createContainer, style } from '@vanilla-extract/css';
 
-import * as itemStyles from './docs/page-list-item.css';
+import { root as collectionItemRoot } from './collections/collection-list-item.css';
+import { root as pageItemRoot } from './docs/page-list-item.css';
 export const listRootContainer = createContainer('list-root-container');
 export const pageListScrollContainer = style({
   width: '100%',
@@ -48,9 +49,10 @@ export const favoriteCell = style({
   flexShrink: 0,
   opacity: 0,
   selectors: {
-    [`&[data-favorite], ${itemStyles.root}:hover &`]: {
-      opacity: 1,
-    },
+    [`&[data-favorite], ${pageItemRoot}:hover &, ${collectionItemRoot}:hover &`]:
+      {
+        opacity: 1,
+      },
   },
 });
 export const clearLinkStyle = style({

diff --git a/packages/frontend/core/src/components/page-list/operation-cell.tsx b/packages/frontend/core/src/components/page-list/operation-cell.tsx
@@ -285,6 +285,10 @@ export const CollectionOperationCell = ({
   info,
 }: CollectionOperationCellProps) => {
   const t = useAFFiNEI18N();
+  const favAdapter = useService(FavoriteItemsAdapter);
+  const favourite = useLiveData(
+    favAdapter.isFavorite$(collection.id, 'collection')
+  );
 
   const { open: openEditCollectionModal, node: editModal } =
     useEditCollection(config);
@@ -322,10 +326,28 @@ export const CollectionOperationCell = ({
     return service.deleteCollection(info, collection.id);
   }, [service, info, collection]);
 
+  const onToggleFavoriteCollection = useCallback(() => {
+    const status = favAdapter.isFavorite(collection.id, 'collection');
+    favAdapter.toggle(collection.id, 'collection');
+    toast(
+      status
+        ? t['com.affine.toastMessage.removedFavorites']()
+        : t['com.affine.toastMessage.addedFavorites']()
+    );
+  }, [favAdapter, collection.id, t]);
+
   return (
     <>
       {editModal}
       {editNameModal}
+      <ColWrapper
+        hideInSmallContainer
+        data-testid="page-list-item-favorite"
+        data-favorite={favourite ? true : undefined}
+        className={styles.favoriteCell}
+      >
+        <FavoriteTag onClick={onToggleFavoriteCollection} active={favourite} />
+      </ColWrapper>
       <Tooltip content={t['com.affine.collection.menu.rename']()} side="top">
         <IconButton onClick={handleEditName}>
           <EditIcon />
@@ -336,21 +358,40 @@ export const CollectionOperationCell = ({
           <FilterIcon />
         </IconButton>
       </Tooltip>
-
       <ColWrapper alignment="start">
         <Menu
           items={
-            <MenuItem
-              onClick={handleDelete}
-              preFix={
-                <MenuIcon>
-                  <DeleteIcon />
-                </MenuIcon>
-              }
-              type="danger"
-            >
-              {t['Delete']()}
-            </MenuItem>
+            <>
+              <MenuItem
+                onClick={onToggleFavoriteCollection}
+                preFix={
+                  <MenuIcon>
+                    {favourite ? (
+                      <FavoritedIcon
+                        style={{ color: 'var(--affine-primary-color)' }}
+                      />
+                    ) : (
+                      <FavoriteIcon />
+                    )}
+                  </MenuIcon>
+                }
+              >
+                {favourite
+                  ? t['com.affine.favoritePageOperation.remove']()
+                  : t['com.affine.favoritePageOperation.add']()}
+              </MenuItem>
+              <MenuItem
+                onClick={handleDelete}
+                preFix={
+                  <MenuIcon>
+                    <DeleteIcon />
+                  </MenuIcon>
+                }
+                type="danger"
+              >
+                {t['Delete']()}
+              </MenuItem>
+            </>
           }
           contentOptions={{
             align: 'end',