feat(core): add favorite operation to all collection (#6428)

https://github.com/toeverything/AFFiNE/assets/102217452/d90553aa-6076-4ecc-996b-a8398991982a

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,7 +49,8 @@ export const favoriteCell = style({
   flexShrink: 0,
   opacity: 0,
   selectors: {
-    [`&[data-favorite], ${itemStyles.root}:hover &`]: {
+    [`&[data-favorite], ${pageItemRoot}:hover &, ${collectionItemRoot}:hover &`]:
+      {
         opacity: 1,
       },
   },

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,10 +358,28 @@ export const CollectionOperationCell = ({
           <FilterIcon />
         </IconButton>
       </Tooltip>
-
       <ColWrapper alignment="start">
         <Menu
           items={
+            <>
+              <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={
@@ -351,6 +391,7 @@ export const CollectionOperationCell = ({
               >
                 {t['Delete']()}
               </MenuItem>
+            </>
           }
           contentOptions={{
             align: 'end',