From 4624a4923dcce3abaf7ce399a5b7f19be7153469 Mon Sep 17 00:00:00 2001 From: JimmFly <447268514@qq.com> Date: Tue, 2 Apr 2024 08:35:26 +0000 Subject: [PATCH] feat(core): add favorite operation to all collection (#6428) https://github.com/toeverything/AFFiNE/assets/102217452/d90553aa-6076-4ecc-996b-a8398991982a --- .../core/src/components/page-list/list.css.ts | 10 +-- .../components/page-list/operation-cell.tsx | 65 +++++++++++++++---- 2 files changed, 59 insertions(+), 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 index 6b0af3dc62..82310a8c78 100644 --- 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 index acc18c6037..0954655473 100644 --- 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} + + + @@ -336,21 +358,40 @@ export const CollectionOperationCell = ({ - - - - } - type="danger" - > - {t['Delete']()} - + <> + + {favourite ? ( + + ) : ( + + )} + + } + > + {favourite + ? t['com.affine.favoritePageOperation.remove']() + : t['com.affine.favoritePageOperation.add']()} + + + + + } + type="danger" + > + {t['Delete']()} + + } contentOptions={{ align: 'end',