feat(core): add remove from collection to collection page list (#6265)

close AFF-246

packages/frontend/core/src/components/page-list/docs/virtualized-page-list.tsx

@@ -2,6 +2,7 @@ import { toast } from '@affine/component';
 import { useBlockSuiteMetaHelper } from '@affine/core/hooks/affine/use-block-suite-meta-helper';
 import { useTrashModalHelper } from '@affine/core/hooks/affine/use-trash-modal-helper';
 import { useBlockSuiteDocMeta } from '@affine/core/hooks/use-block-suite-page-meta';
+import { CollectionService } from '@affine/core/modules/collection';
 import type { Tag } from '@affine/core/modules/tag';
 import { Workbench } from '@affine/core/modules/workbench';
 import type { Collection, Filter } from '@affine/env/filter';
@@ -36,9 +37,17 @@ const usePageOperationsRenderer = () => {
   );
   const t = useAFFiNEI18N();
   const workbench = useService(Workbench);
+  const collectionService = useService(CollectionService);
+  const removeFromAllowList = useCallback(
+    (id: string) => {
+      collectionService.deletePagesFromCollections([id]);
+      toast(t['com.affine.collection.removePage.success']());
+    },
+    [collectionService, t]
+  );
 
   const pageOperationsRenderer = useCallback(
-    (page: DocMeta) => {
+    (page: DocMeta, isInAllowList?: boolean) => {
       const onDisablePublicSharing = () => {
         toast('Successfully disabled', {
           portal: document.body,
@@ -49,6 +58,7 @@ const usePageOperationsRenderer = () => {
         <PageOperationCell
           favorite={!!page.favorite}
           isPublic={!!page.isPublic}
+          isInAllowList={isInAllowList}
           onDisablePublicSharing={onDisablePublicSharing}
           link={`/workspace/${currentWorkspace.id}/${page.id}`}
           onOpenInSplitView={() => workbench.openPage(page.id, { at: 'tail' })}
@@ -71,6 +81,7 @@ const usePageOperationsRenderer = () => {
                 : t['com.affine.toastMessage.addedFavorites']()
             );
           }}
+          onRemoveFromAllowList={() => removeFromAllowList(page.id)}
         />
       );
     },
@@ -81,6 +92,7 @@ const usePageOperationsRenderer = () => {
       setTrashModal,
       toggleFavorite,
       t,
+      removeFromAllowList,
     ]
   );
 
@@ -134,9 +146,10 @@ export const VirtualizedPageList = ({
   const pageOperationRenderer = useCallback(
     (item: ListItem) => {
       const page = item as DocMeta;
-      return pageOperations(page);
+      const isInAllowList = collection?.allowList?.includes(page.id);
+      return pageOperations(page, isInAllowList);
     },
-    [pageOperations]
+    [collection, pageOperations]
   );
 
   const pageHeaderRenderer = useCallback(() => {

packages/frontend/core/src/components/page-list/operation-cell.tsx

@@ -17,6 +17,7 @@ import {
   FavoritedIcon,
   FavoriteIcon,
   FilterIcon,
+  FilterMinusIcon,
   MoreVerticalIcon,
   OpenInNewIcon,
   ResetIcon,
@@ -39,26 +40,31 @@ export interface PageOperationCellProps {
   favorite: boolean;
   isPublic: boolean;
   link: string;
+  isInAllowList?: boolean;
   onToggleFavoritePage: () => void;
   onRemoveToTrash: () => void;
   onDuplicate: () => void;
   onDisablePublicSharing: () => void;
   onOpenInSplitView: () => void;
+  onRemoveFromAllowList?: () => void;
 }
 
 export const PageOperationCell = ({
   favorite,
   isPublic,
+  isInAllowList,
   link,
   onToggleFavoritePage,
   onRemoveToTrash,
   onDuplicate,
   onDisablePublicSharing,
   onOpenInSplitView,
+  onRemoveFromAllowList,
 }: PageOperationCellProps) => {
   const t = useAFFiNEI18N();
   const { appSettings } = useAppSettingHelper();
   const [openDisableShared, setOpenDisableShared] = useState(false);
+
   const OperationMenu = (
     <>
       {isPublic && (
@@ -69,6 +75,18 @@ export const PageOperationCell = ({
           }}
         />
       )}
+      {isInAllowList && (
+        <MenuItem
+          onClick={onRemoveFromAllowList}
+          preFix={
+            <MenuIcon>
+              <FilterMinusIcon />
+            </MenuIcon>
+          }
+        >
+          {t['Remove special filter']()}
+        </MenuItem>
+      )}
       <MenuItem
         onClick={onToggleFavoritePage}
         preFix={