fix: collection-list pin icon not changed (#3625)

packages/component/src/components/page-list/view/collection-bar.css.ts

@@ -1,5 +1,7 @@
 import { style } from '@vanilla-extract/css';
 
+import { viewMenu } from './collection-list.css';
+
 export const view = style({
   display: 'flex',
   alignItems: 'center',
@@ -36,6 +38,9 @@ export const pinedIcon = style({
     [`${option}:hover &`]: {
       display: 'none',
     },
+    [`${viewMenu}:hover &`]: {
+      display: 'none',
+    },
   },
 });
 export const pinIcon = style({
@@ -44,5 +49,8 @@ export const pinIcon = style({
     [`${option}:hover &`]: {
       display: 'block',
     },
+    [`${viewMenu}:hover &`]: {
+      display: 'block',
+    },
   },
 });

packages/component/src/components/page-list/view/collection-bar.tsx

@@ -3,21 +3,14 @@ import { EditCollectionModel } from '@affine/component/page-list';
 import type { PropertiesMeta } from '@affine/env/filter';
 import type { GetPageInfoById } from '@affine/env/page-info';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
-import {
-  DeleteIcon,
-  FilterIcon,
-  PinedIcon,
-  PinIcon,
-  UnpinIcon,
-  ViewLayersIcon,
-} from '@blocksuite/icons';
+import { ViewLayersIcon } from '@blocksuite/icons';
 import { Button } from '@toeverything/components/button';
 import clsx from 'clsx';
-import type { ReactNode } from 'react';
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useState } from 'react';
 
 import { useCollectionManager } from '../use-collection-manager';
 import * as styles from './collection-bar.css';
+import { useActions } from './use-action';
 
 interface CollectionBarProps {
   getPageInfo: GetPageInfoById;
@@ -26,74 +19,17 @@ interface CollectionBarProps {
   workspaceId: string;
 }
 
-interface CollectionBarAction {
-  icon: ReactNode;
-  click: () => void;
-  className?: string;
-  name: string;
-  tooltip: string;
-}
-
 export const CollectionBar = (props: CollectionBarProps) => {
   const { getPageInfo, propertiesMeta, columnsCount, workspaceId } = props;
   const t = useAFFiNEI18N();
   const setting = useCollectionManager(workspaceId);
   const collection = setting.currentCollection;
   const [open, setOpen] = useState(false);
-  const actions = useMemo<CollectionBarAction[]>(
-    () => [
-      {
-        icon: (
-          <>
-            {collection.pinned ? (
-              <PinedIcon className={styles.pinedIcon}></PinedIcon>
-            ) : (
-              <PinIcon className={styles.pinedIcon}></PinIcon>
-            )}
-            {collection.pinned ? (
-              <UnpinIcon className={styles.pinIcon}></UnpinIcon>
-            ) : (
-              <PinIcon className={styles.pinIcon}></PinIcon>
-            )}
-          </>
-        ),
-        name: 'pin',
-        tooltip: collection.pinned
-          ? t['com.affine.collection-bar.action.tooltip.unpin']()
-          : t['com.affine.collection-bar.action.tooltip.pin'](),
-        className: styles.pin,
-        click: () => {
-          setting
-            .updateCollection({
-              ...collection,
-              pinned: !collection.pinned,
-            })
-            .catch(err => {
-              console.error(err);
-            });
-        },
-      },
-      {
-        icon: <FilterIcon />,
-        name: 'edit',
-        tooltip: t['com.affine.collection-bar.action.tooltip.edit'](),
-        click: () => {
-          setOpen(true);
-        },
-      },
-      {
-        icon: <DeleteIcon style={{ color: 'var(--affine-error-color)' }} />,
-        name: 'delete',
-        tooltip: t['com.affine.collection-bar.action.tooltip.delete'](),
-        click: () => {
-          setting.deleteCollection(collection.id).catch(err => {
-            console.error(err);
-          });
-        },
-      },
-    ],
-    [collection, t, setting]
-  );
+  const actions = useActions({
+    collection,
+    setting,
+    openEdit: () => setOpen(true),
+  });
   const onClose = useCallback(() => setOpen(false), []);
 
   return !setting.isDefault ? (

packages/component/src/components/page-list/view/collection-list.tsx

@@ -3,19 +3,12 @@ import type { Collection, Filter } from '@affine/env/filter';
 import type { PropertiesMeta } from '@affine/env/filter';
 import type { GetPageInfoById } from '@affine/env/page-info';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
-import {
-  DeleteIcon,
-  FilteredIcon,
-  FilterIcon,
-  FolderIcon,
-  PinIcon,
-  ViewLayersIcon,
-} from '@blocksuite/icons';
+import { FilteredIcon, FolderIcon, ViewLayersIcon } from '@blocksuite/icons';
 import { Button } from '@toeverything/components/button';
 import clsx from 'clsx';
 import { useAtom } from 'jotai';
-import type { MouseEvent, ReactNode } from 'react';
-import { useCallback, useMemo, useState } from 'react';
+import type { MouseEvent } from 'react';
+import { useCallback, useState } from 'react';
 
 import { MenuItem, Tooltip } from '../../..';
 import Menu from '../../../ui/menu/menu';
@@ -23,6 +16,7 @@ import { appSidebarOpenAtom } from '../../app-sidebar';
 import { CreateFilterMenu } from '../filter/vars';
 import type { useCollectionManager } from '../use-collection-manager';
 import * as styles from './collection-list.css';
+import { useActions } from './use-action';
 
 const CollectionOption = ({
   collection,
@@ -33,46 +27,12 @@ const CollectionOption = ({
   setting: ReturnType<typeof useCollectionManager>;
   updateCollection: (view: Collection) => void;
 }) => {
-  const actions: {
-    icon: ReactNode;
-    click: () => void;
-    className?: string;
-    name: string;
-  }[] = useMemo(
-    () => [
-      {
-        icon: <PinIcon />,
-        name: 'pin',
-        click: () => {
-          setting
-            .updateCollection({
-              ...collection,
-              pinned: !collection.pinned,
-            })
-            .catch(err => {
-              console.error(err);
-            });
-        },
-      },
-      {
-        icon: <FilterIcon />,
-        name: 'edit',
-        click: () => {
-          updateCollection(collection);
-        },
-      },
-      {
-        icon: <DeleteIcon style={{ color: 'var(--affine-error-color)' }} />,
-        name: 'delete',
-        click: () => {
-          setting.deleteCollection(collection.id).catch(err => {
-            console.error(err);
-          });
-        },
-      },
-    ],
-    [setting, updateCollection, collection]
-  );
+  const actions = useActions({
+    collection,
+    setting,
+    openEdit: updateCollection,
+  });
+
   const selectCollection = useCallback(
     () => setting.selectCollection(collection.id),
     [setting, collection.id]
@@ -112,20 +72,21 @@ const CollectionOption = ({
               alignItems: 'center',
             }}
           >
-            {actions.map((v, i) => {
+            {actions.map((action, i) => {
               const onClick = (e: MouseEvent<HTMLDivElement>) => {
                 e.stopPropagation();
-                v.click();
+                action.click();
               };
+
               return (
                 <div
-                  data-testid={`collection-select-option-${v.name}`}
+                  data-testid={`collection-select-option-${action.name}`}
                   key={i}
                   onClick={onClick}
                   style={{ marginLeft: i === 0 ? 28 : undefined }}
-                  className={clsx(styles.viewOption, v.className)}
+                  className={clsx(styles.viewOption, action.className)}
                 >
-                  {v.icon}
+                  {action.icon}
                 </div>
               );
             })}

packages/component/src/components/page-list/view/use-action.tsx

@@ -0,0 +1,86 @@
+import type { Collection } from '@affine/env/filter';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import {
+  DeleteIcon,
+  FilterIcon,
+  PinedIcon,
+  PinIcon,
+  UnpinIcon,
+} from '@blocksuite/icons';
+import { type ReactNode, useMemo } from 'react';
+
+import type { useCollectionManager } from '../use-collection-manager';
+import * as styles from './collection-bar.css';
+
+interface CollectionBarAction {
+  icon: ReactNode;
+  click: () => void;
+  className?: string;
+  name: string;
+  tooltip: string;
+}
+
+export const useActions = ({
+  collection,
+  setting,
+  openEdit,
+}: {
+  collection: Collection;
+  setting: ReturnType<typeof useCollectionManager>;
+  openEdit: (open: Collection) => void;
+}) => {
+  const t = useAFFiNEI18N();
+  return useMemo<CollectionBarAction[]>(() => {
+    return [
+      {
+        icon: (
+          <>
+            {collection.pinned ? (
+              <PinedIcon className={styles.pinedIcon}></PinedIcon>
+            ) : (
+              <PinIcon className={styles.pinedIcon}></PinIcon>
+            )}
+            {collection.pinned ? (
+              <UnpinIcon className={styles.pinIcon}></UnpinIcon>
+            ) : (
+              <PinIcon className={styles.pinIcon}></PinIcon>
+            )}
+          </>
+        ),
+        name: 'pin',
+        tooltip: collection.pinned
+          ? t['com.affine.collection-bar.action.tooltip.unpin']()
+          : t['com.affine.collection-bar.action.tooltip.pin'](),
+        className: styles.pin,
+        click: () => {
+          setting
+            .updateCollection({
+              ...collection,
+              pinned: !collection.pinned,
+            })
+            .catch(err => {
+              console.error(err);
+            });
+        },
+      },
+      {
+        icon: <FilterIcon />,
+        name: 'edit',
+        tooltip: t['com.affine.collection-bar.action.tooltip.edit'](),
+        click: () => {
+          openEdit(collection);
+        },
+      },
+      {
+        icon: <DeleteIcon style={{ color: 'var(--affine-error-color)' }} />,
+        name: 'delete',
+        tooltip: t['com.affine.collection-bar.action.tooltip.delete'](),
+        click: () => {
+          setting.deleteCollection(collection.id).catch(err => {
+            console.error(err);
+          });
+        },
+      },
+    ];
+  }, [collection, t, setting, openEdit]);
+};