feat(core): adjust pinned collections edit button (#12533)

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
	- Added a centralized "Edit collection rules" button in the pinned collections footer, enabling users to edit collection rules via a dialog.
- **Style**
	- Removed hover effects and visual styling from the edit icon button in pinned collections.
- **Bug Fixes**
	- Removed per-item edit buttons to streamline the editing process.
- **Documentation**
	- Added a new localized label for the edit collection rules action.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

packages/frontend/core/src/desktop/pages/workspace/all-page/all-page.tsx

@@ -122,7 +122,7 @@ export const AllPage = () => {
       .watch(
         selectedCollectionInfo
           ? {
-              filters: tempFilters ?? selectedCollectionInfo.rules.filters,
+              filters: selectedCollectionInfo.rules.filters,
               groupBy,
               orderBy,
               extraAllowList: selectedCollectionInfo.allowList,
@@ -221,19 +221,6 @@ export const AllPage = () => {
     setTempFilters(null);
   }, []);
 
-  const handleEditCollection = useCallback(
-    (collectionId: string) => {
-      const collection = collectionService.collection$(collectionId).value;
-      if (!collection) {
-        return;
-      }
-      setSelectedCollectionId(collectionId);
-      setTempFilters(collection.info$.value.rules.filters);
-      setTempFiltersInitial(null);
-    },
-    [collectionService]
-  );
-
   const handleSaveFilters = useCallback(() => {
     if (selectedCollectionId) {
       collectionService.updateCollection(selectedCollectionId, {
@@ -312,7 +299,6 @@ export const AllPage = () => {
               onActiveAll={handleSelectAll}
               onActiveCollection={handleSelectCollection}
               onAddFilter={handleNewTempFilter}
-              onEditCollection={handleEditCollection}
               hiddenAdd={tempFilters !== null}
             />
           </div>

packages/frontend/core/src/desktop/pages/workspace/all-page/pinned-collections.css.ts

@@ -35,27 +35,9 @@ export const itemContent = style({
   textAlign: 'center',
   maxWidth: '128px',
   minWidth: '32px',
-
-  selectors: {
-    [`${item}:hover > &`]: {
-      mask:
-        'linear-gradient(#fff) left / calc(100% - 32px) no-repeat,' +
-        'linear-gradient(90deg,#fff 0%,transparent 50%,transparent 100%) right / 32px no-repeat',
-    },
-  },
 });
 
-export const editIconButton = style({
-  opacity: 0,
-  marginLeft: -16,
-  backgroundColor: cssVarV2('layer/background/hoverOverlay'),
-
-  selectors: {
-    [`${item}:hover > &`]: {
-      opacity: 1,
-    },
-  },
-});
+export const editIconButton = style({});
 
 export const closeButton = style({});
 

packages/frontend/core/src/desktop/pages/workspace/all-page/pinned-collections.tsx

@@ -1,4 +1,10 @@
-import { Divider, IconButton, Menu, MenuItem } from '@affine/component';
+import {
+  Divider,
+  IconButton,
+  Menu,
+  MenuItem,
+  Tooltip,
+} from '@affine/component';
 import { AddFilterMenu } from '@affine/core/components/filter/add-filter';
 import {
   CollectionService,
@@ -6,6 +12,7 @@ import {
   PinnedCollectionService,
 } from '@affine/core/modules/collection';
 import type { FilterParams } from '@affine/core/modules/collection-rules';
+import { WorkspaceDialogService } from '@affine/core/modules/dialogs';
 import { useI18n } from '@affine/i18n';
 import {
   CloseIcon,
@@ -24,13 +31,11 @@ export const PinnedCollectionItem = ({
   isActive,
   onClick,
   onClickRemove,
-  onClickEdit,
 }: {
   record: PinnedCollectionRecord;
   onClickRemove: () => void;
   isActive: boolean;
   onClick: () => void;
-  onClickEdit: () => void;
 }) => {
   const t = useI18n();
   const collectionService = useService(CollectionService);
@@ -49,16 +54,6 @@ export const PinnedCollectionItem = ({
       onClick={onClick}
     >
       <span className={styles.itemContent}>{name ?? t['Untitled']()}</span>
-      <IconButton
-        size="16"
-        className={styles.editIconButton}
-        onClick={e => {
-          e.stopPropagation();
-          onClickEdit();
-        }}
-      >
-        <EditIcon />
-      </IconButton>
       {isActive && (
         <IconButton
           className={styles.closeButton}
@@ -80,17 +75,16 @@ export const PinnedCollections = ({
   onActiveAll,
   onActiveCollection,
   onAddFilter,
-  onEditCollection,
   hiddenAdd,
 }: {
   activeCollectionId: string | null;
   onActiveAll: () => void;
   onActiveCollection: (collectionId: string) => void;
   onAddFilter: (params: FilterParams) => void;
-  onEditCollection: (collectionId: string) => void;
   hiddenAdd?: boolean;
 }) => {
   const t = useI18n();
+  const workspaceDialogService = useService(WorkspaceDialogService);
   const pinnedCollectionService = useService(PinnedCollectionService);
   const pinnedCollections = useLiveData(
     pinnedCollectionService.sortedPinnedCollections$
@@ -127,7 +121,6 @@ export const PinnedCollections = ({
               ? onActiveCollection(record.collectionId)
               : undefined
           }
-          onClickEdit={() => onEditCollection(record.collectionId)}
           onClickRemove={() => {
             const nextCollectionId = pinnedCollections[index - 1]?.collectionId;
             if (nextCollectionId) {
@@ -145,6 +138,22 @@ export const PinnedCollections = ({
           onAddFilter={onAddFilter}
         />
       )}
+      <div style={{ flex: 1 }}></div>
+      {activeCollectionId && (
+        <Tooltip content={t['com.affine.all-docs.pinned-collection.edit']()}>
+          <IconButton
+            size="16"
+            className={styles.editIconButton}
+            onClick={() =>
+              workspaceDialogService.open('collection-editor', {
+                collectionId: activeCollectionId,
+              })
+            }
+          >
+            <EditIcon />
+          </IconButton>
+        </Tooltip>
+      )}
     </div>
   );
 };

packages/frontend/i18n/src/i18n.gen.ts

@@ -7172,6 +7172,10 @@ export function useAFFiNEI18N(): {
       * `All`
       */
     ["com.affine.all-docs.pinned-collection.all"](): string;
+    /**
+      * `Edit collection rules`
+      */
+    ["com.affine.all-docs.pinned-collection.edit"](): string;
     /**
       * `Template`
       */

packages/frontend/i18n/src/resources/en.json

@@ -1792,6 +1792,7 @@
   "com.affine.all-docs.quick-action.delete-permanently": "Delete permanently",
   "com.affine.all-docs.quick-action.restore": "Restore",
   "com.affine.all-docs.pinned-collection.all": "All",
+  "com.affine.all-docs.pinned-collection.edit": "Edit collection rules",
   "com.affine.all-docs.group.is-template": "Template",
   "com.affine.all-docs.group.is-not-template": "Not Template",
   "com.affine.all-docs.group.is-journal": "Journal",