feat(core): add pinned collections to all docs (#12269)

packages/frontend/core/src/components/explorer/context.ts

@@ -12,7 +12,9 @@ export type DocExplorerContextType = {
   selectedDocIds$: LiveData<string[]>;
   prevCheckAnchorId$?: LiveData<string | null>;
 } & {
-  [K in keyof ExplorerPreference as `${K}$`]: LiveData<ExplorerPreference[K]>;
+  [K in keyof Omit<ExplorerPreference, 'filters'> as `${K}$`]: LiveData<
+    ExplorerPreference[K]
+  >;
 };
 
 export const DocExplorerContext = createContext<DocExplorerContextType>(
@@ -27,7 +29,6 @@ export const createDocExplorerContext = () =>
     selectMode$: new LiveData<boolean>(false),
     selectedDocIds$: new LiveData<string[]>([]),
     prevCheckAnchorId$: new LiveData<string | null>(null),
-    filters$: new LiveData<ExplorerPreference['filters']>([]),
     groupBy$: new LiveData<ExplorerPreference['groupBy']>(undefined),
     orderBy$: new LiveData<ExplorerPreference['orderBy']>(undefined),
     displayProperties$: new LiveData<ExplorerPreference['displayProperties']>(

packages/frontend/core/src/components/filter/add-filter.tsx

@@ -2,7 +2,7 @@ import { IconButton, Menu, MenuItem, MenuSeparator } from '@affine/component';
 import type { FilterParams } from '@affine/core/modules/collection-rules';
 import { WorkspacePropertyService } from '@affine/core/modules/workspace-property';
 import { useI18n } from '@affine/i18n';
-import { FavoriteIcon, PlusIcon } from '@blocksuite/icons/rc';
+import { ArrowLeftBigIcon, FavoriteIcon, PlusIcon } from '@blocksuite/icons/rc';
 import { useLiveData, useService } from '@toeverything/infra';
 
 import { WorkspacePropertyIcon, WorkspacePropertyName } from '../properties';
@@ -11,8 +11,10 @@ import * as styles from './styles.css';
 
 export const AddFilterMenu = ({
   onAdd,
+  onBack,
 }: {
   onAdd: (params: FilterParams) => void;
+  onBack?: () => void;
 }) => {
   const t = useI18n();
   const workspacePropertyService = useService(WorkspacePropertyService);
@@ -20,9 +22,17 @@ export const AddFilterMenu = ({
 
   return (
     <>
-      <div className={styles.variableSelectTitleStyle}>
-        {t['com.affine.filter']()}
+      <div className={styles.selectHeaderContainer}>
+        {onBack && (
+          <IconButton onClick={onBack}>
+            <ArrowLeftBigIcon />
+          </IconButton>
+        )}
+        <div className={styles.variableSelectTitleStyle}>
+          {t['com.affine.filter']()}
+        </div>
       </div>
+
       <MenuSeparator />
       <MenuItem
         prefixIcon={<FavoriteIcon className={styles.filterTypeItemIcon} />}

packages/frontend/core/src/components/filter/filters.tsx

@@ -1,4 +1,5 @@
 import type { FilterParams } from '@affine/core/modules/collection-rules';
+import clsx from 'clsx';
 
 import { AddFilter } from './add-filter';
 import { Filter } from './filter';
@@ -6,9 +7,11 @@ import * as styles from './styles.css';
 
 export const Filters = ({
   filters,
+  className,
   onChange,
 }: {
   filters: FilterParams[];
+  className?: string;
   onChange?: (filters: FilterParams[]) => void;
 }) => {
   const handleDelete = (index: number) => {
@@ -20,7 +23,7 @@ export const Filters = ({
   };
 
   return (
-    <div className={styles.container}>
+    <div className={clsx(styles.container, className)}>
       {filters.map((filter, index) => {
         return (
           <Filter

packages/frontend/core/src/components/filter/styles.css.ts

@@ -30,12 +30,24 @@ export const filterItemCloseStyle = style({
   marginLeft: '4px',
 });
 
+export const selectHeaderContainer = style({
+  display: 'flex',
+  flexDirection: 'row',
+  margin: '2px 2px',
+  alignItems: 'center',
+  gap: '4px',
+});
+
 export const variableSelectTitleStyle = style({
-  margin: '2px 12px',
   fontWeight: 500,
   lineHeight: '22px',
   fontSize: cssVar('fontSm'),
   color: cssVar('textPrimaryColor'),
+  selectors: {
+    '&:first-child': {
+      marginLeft: '12px',
+    },
+  },
 });
 
 export const filterTypeItemIcon = style({