feat(core): move collapsed groups state to masonry

packages/frontend/component/src/ui/masonry/masonry.tsx

@@ -31,6 +31,23 @@ import {
 export interface MasonryProps extends React.HTMLAttributes<HTMLDivElement> {
   items: MasonryItem[] | MasonryGroup[];
 
+  itemComponent: React.ComponentType<{
+    groupId: string;
+    itemId: string;
+  }>;
+  groupComponent?: React.ComponentType<{
+    groupId: string;
+    itemCount: number;
+    collapsed: boolean;
+    onCollapse: (collapsed: boolean) => void;
+  }>;
+
+  groupHeight?: number | ((group: MasonryGroup) => number);
+  itemHeight: number | ((item: MasonryItem) => number);
+
+  groupClassName?: string;
+  itemClassName?: string;
+
   gapX?: number;
   gapY?: number;
   paddingX?: MasonryPX;
@@ -39,8 +56,7 @@ export interface MasonryProps extends React.HTMLAttributes<HTMLDivElement> {
   groupsGap?: number;
   groupHeaderGapWithItems?: number;
   stickyGroupHeader?: boolean;
-  collapsedGroups?: string[];
+
-  onGroupCollapse?: (groupId: string, collapsed: boolean) => void;
   /**
    * Specify the width of the item.
    * - `number`: The width of the item in pixels.
@@ -61,6 +77,9 @@ export interface MasonryProps extends React.HTMLAttributes<HTMLDivElement> {
   columns?: number;
   resizeDebounce?: number;
   preloadHeight?: number;
+
+  itemSelected?: string[];
+  onItemSelectedChanged?: (selected: string[]) => void;
 }
 
 export const Masonry = ({
@@ -77,11 +96,15 @@ export const Masonry = ({
   groupsGap = 0,
   groupHeaderGapWithItems = 0,
   stickyGroupHeader = true,
-  collapsedGroups,
   columns,
   preloadHeight = 50,
   resizeDebounce = 20,
-  onGroupCollapse,
+  groupComponent: GroupComponent,
+  itemComponent: ItemComponent,
+  groupClassName,
+  itemClassName,
+  itemHeight,
+  groupHeight,
   ...props
 }: MasonryProps) => {
   const rootRef = useRef<HTMLDivElement>(null);
@@ -99,9 +122,17 @@ export const Masonry = ({
     undefined
   );
   const [totalWidth, setTotalWidth] = useState(0);
+
+  const [collapsedGroups, setCollapsedGroups] = useState<string[]>([]);
+  const onGroupCollapse = useCallback((groupId: string, collapsed: boolean) => {
+    setCollapsedGroups(prev =>
+      collapsed ? [...prev, groupId] : prev.filter(id => id !== groupId)
+    );
+  }, []);
+
   const stickyGroupCollapsed = !!(
     collapsedGroups &&
-    stickyGroupId &&
+    stickyGroupId !== undefined &&
     collapsedGroups.includes(stickyGroupId)
   );
 
@@ -114,7 +145,7 @@ export const Masonry = ({
   }, [items]);
 
   const stickyGroup = useMemo(() => {
-    if (!stickyGroupId) return undefined;
+    if (stickyGroupId === undefined) return undefined;
     return groups.find(group => group.id === stickyGroupId);
   }, [groups, stickyGroupId]);
 
@@ -164,6 +195,8 @@ export const Masonry = ({
       groupsGap,
       groupHeaderGapWithItems,
       collapsedGroups: collapsedGroups ?? [],
+      groupHeight: groupHeight ?? 0,
+      itemHeight,
     });
     setLayoutMap(layout);
     setHeight(height);
@@ -180,8 +213,10 @@ export const Masonry = ({
     gapX,
     gapY,
     groupHeaderGapWithItems,
+    groupHeight,
     groups,
     groupsGap,
+    itemHeight,
     itemWidth,
     itemWidthMin,
     paddingX,
@@ -233,13 +268,7 @@ export const Masonry = ({
       >
         {groups.map(group => {
           // sleep is not calculated, do not render
-          const {
+          const { id: groupId, items, ...groupProps } = group;
-            id: groupId,
-            items,
-            className,
-            Component,
-            ...groupProps
-          } = group;
           const collapsed =
             collapsedGroups && collapsedGroups.includes(groupId);
 
@@ -248,14 +277,16 @@ export const Masonry = ({
               {/* group header */}
               {virtualScroll && !activeMap.get(group.id) ? null : (
                 <MasonryGroupHeader
-                  className={clsx(styles.groupHeader, className)}
+                  className={clsx(styles.groupHeader, groupClassName)}
                   key={`header-${groupId}`}
                   id={groupId}
                   locateMode={locateMode}
                   xywh={layoutMap.get(groupId)}
                   {...groupProps}
-                  onClick={() => onGroupCollapse?.(groupId, !collapsed)}
+                  onCollapse={collapsed =>
-                  Component={Component}
+                    onGroupCollapse?.(groupId, collapsed)
+                  }
+                  Component={GroupComponent}
                   itemCount={items.length}
                   collapsed={!!collapsed}
                   groupId={groupId}
@@ -265,19 +296,20 @@ export const Masonry = ({
               {/* group items */}
               {collapsed
                 ? null
-                : items.map(({ id: itemId, Component, ...item }) => {
+                : items.map(item => {
+                    const itemId = item.id;
                     const mixId = groupId ? `${groupId}:${itemId}` : itemId;
                     if (virtualScroll && !activeMap.get(mixId)) return null;
                     return (
                       <MasonryGroupItem
                         key={mixId}
                         id={mixId}
-                        {...item}
                         locateMode={locateMode}
                         xywh={layoutMap.get(mixId)}
                         groupId={groupId}
                         itemId={itemId}
-                        Component={Component}
+                        className={itemClassName}
+                        Component={ItemComponent}
                       />
                     );
                   })}
@@ -289,24 +321,24 @@ export const Masonry = ({
       <Scrollable.Scrollbar />
       {stickyGroup ? (
         <div
-          className={clsx(styles.stickyGroupHeader, stickyGroup.className)}
+          className={clsx(styles.stickyGroupHeader, groupClassName)}
           style={{
             padding: `0 ${calcPX(paddingX, totalWidth)}px`,
-            height: stickyGroup.height,
+            height:
-            ...stickyGroup.style,
+              typeof groupHeight === 'function'
+                ? groupHeight(stickyGroup)
+                : groupHeight,
           }}
-          onClick={() =>
-            onGroupCollapse?.(stickyGroup.id, !stickyGroupCollapsed)
-          }
         >
-          {stickyGroup.Component ? (
+          {GroupComponent && (
-            <stickyGroup.Component
+            <GroupComponent
               groupId={stickyGroup.id}
               itemCount={stickyGroup.items.length}
               collapsed={stickyGroupCollapsed}
+              onCollapse={collapsed => {
+                onGroupCollapse(stickyGroup.id, collapsed);
+              }}
             />
-          ) : (
-            stickyGroup.children
           )}
         </div>
       ) : null}
@@ -330,11 +362,12 @@ const MasonryGroupHeader = memo(function MasonryGroupHeader({
   groupId,
   itemCount,
   collapsed,
-  height,
   paddingX,
+  onCollapse,
   ...props
 }: Omit<MasonryItemProps, 'Component'> & {
-  Component?: MasonryGroup['Component'];
+  Component?: MasonryProps['groupComponent'];
+  onCollapse: (collapsed: boolean) => void;
   groupId: string;
   itemCount: number;
   collapsed: boolean;
@@ -347,16 +380,16 @@ const MasonryGroupHeader = memo(function MasonryGroupHeader({
           groupId={groupId}
           itemCount={itemCount}
           collapsed={collapsed}
+          onCollapse={onCollapse}
         />
       );
     }
     return children;
-  }, [Component, children, collapsed, groupId, itemCount]);
+  }, [Component, children, collapsed, groupId, itemCount, onCollapse]);
 
   return (
     <MasonryItem
       id={id}
-      height={height}
       style={{
         padding: `0 ${paddingX}px`,
         height: '100%',
@@ -381,6 +414,7 @@ const MasonryGroupItem = memo(function MasonryGroupItem({
 }: MasonryItemProps & {
   groupId: string;
   itemId: string;
+  Component?: MasonryProps['itemComponent'];
 }) {
   const content = useMemo(() => {
     if (Component) {

packages/frontend/component/src/ui/masonry/type.ts

@@ -1,18 +1,10 @@
-export interface MasonryItem extends React.HTMLAttributes<HTMLDivElement> {
+export interface MasonryItem {
   id: string;
-  height: number;
-  Component?: React.ComponentType<{ groupId: string; itemId: string }>;
 }
 
-export interface MasonryGroup extends React.HTMLAttributes<HTMLDivElement> {
+export interface MasonryGroup {
   id: string;
-  height: number;
   items: MasonryItem[];
-  Component?: React.ComponentType<{
-    groupId: string;
-    collapsed?: boolean;
-    itemCount: number;
-  }>;
 }
 
 export interface MasonryItemXYWH {

packages/frontend/component/src/ui/masonry/utils.ts

@@ -61,6 +61,8 @@ export const calcLayout = (
     groupsGap: number;
     groupHeaderGapWithItems: number;
     collapsedGroups: string[];
+    groupHeight: number | ((group: MasonryGroup) => number);
+    itemHeight: number | ((item: MasonryItem) => number);
   }
 ) => {
   const {
@@ -74,6 +76,8 @@ export const calcLayout = (
     groupsGap,
     groupHeaderGapWithItems,
     collapsedGroups,
+    groupHeight,
+    itemHeight,
   } = options;
   const paddingX = calcPX(_paddingX, totalWidth);
 
@@ -92,7 +96,7 @@ export const calcLayout = (
       x: 0,
       y: finalHeight,
       w: totalWidth,
-      h: group.height,
+      h: typeof groupHeight === 'function' ? groupHeight(group) : groupHeight,
     };
     layout.set(group.id, groupHeaderLayout);
 
@@ -110,19 +114,21 @@ export const calcLayout = (
       const hasGap = heightStack[minHeightIndex] ? gapY : 0;
       const x = minHeightIndex * (width + gapX) + paddingX;
       const y = finalHeight + minHeight + hasGap;
+      const height =
+        typeof itemHeight === 'function' ? itemHeight(item) : itemHeight;
 
-      heightStack[minHeightIndex] += item.height + hasGap;
+      heightStack[minHeightIndex] += height + hasGap;
       layout.set(itemId, {
         type: 'item',
         x,
         y,
         w: width,
-        h: item.height,
+        h: height,
       });
     });
 
-    const groupHeight = Math.max(...heightStack) + paddingY;
+    const height = Math.max(...heightStack) + paddingY;
-    finalHeight += groupHeight;
+    finalHeight += height;
   });
 
   return { layout, height: finalHeight };
@@ -167,9 +173,9 @@ export const calcSticky = (options: {
     return xywh.y < scrollY && (!next || next[1].y > scrollY);
   });
 
-  return stickyGroupEntry
+  return stickyGroupEntry !== undefined
     ? stickyGroupEntry[0]
     : groupEntries.length > 0
       ? groupEntries[0][0]
-      : '';
+      : undefined;
 };

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

@@ -7,7 +7,6 @@ import type { ExplorerPreference } from './types';
 export type DocExplorerContextType = {
   view$: LiveData<DocListItemView>;
   groups$: LiveData<Array<{ key: string; items: string[] }>>;
-  collapsedGroups$: LiveData<string[]>;
   selectMode$?: LiveData<boolean>;
   selectedDocIds$: LiveData<string[]>;
   prevCheckAnchorId$?: LiveData<string | null>;
@@ -25,7 +24,6 @@ export const createDocExplorerContext = () =>
   ({
     view$: new LiveData<DocListItemView>('list'),
     groups$: new LiveData<Array<{ key: string; items: string[] }>>([]),
-    collapsedGroups$: new LiveData<string[]>([]),
     selectMode$: new LiveData<boolean>(false),
     selectedDocIds$: new LiveData<string[]>([]),
     prevCheckAnchorId$: new LiveData<string | null>(null),

packages/frontend/core/src/components/explorer/docs-view/group-header.tsx

@@ -16,16 +16,19 @@ import * as styles from './group-header.css';
 export const DocGroupHeader = ({
   className,
   groupId,
+  collapsed,
+  onCollapse,
   ...props
 }: HTMLAttributes<HTMLDivElement> & {
   groupId: string;
+  collapsed: boolean;
+  onCollapse: (collapsed: boolean) => void;
 }) => {
   const t = useI18n();
   const contextValue = useContext(DocExplorerContext);
 
   const groups = useLiveData(contextValue.groups$);
   const selectedDocIds = useLiveData(contextValue.selectedDocIds$);
-  const collapsedGroups = useLiveData(contextValue.collapsedGroups$);
   const selectMode = useLiveData(contextValue.selectMode$);
 
   const group = groups.find(g => g.key === groupId);
@@ -34,13 +37,8 @@ export const DocGroupHeader = ({
   );
 
   const handleToggleCollapse = useCallback(() => {
-    const prev = contextValue.collapsedGroups$.value;
+    onCollapse(!collapsed);
-    contextValue.collapsedGroups$.next(
+  }, [collapsed, onCollapse]);
-      prev.includes(groupId)
-        ? prev.filter(id => id !== groupId)
-        : [...prev, groupId]
-    );
-  }, [groupId, contextValue]);
 
   const handleSelectAll = useCallback(() => {
     const prev = contextValue.selectedDocIds$.value;
@@ -64,10 +62,7 @@ export const DocGroupHeader = ({
   ).length;
 
   return (
-    <div
+    <div className={styles.groupHeader} data-collapsed={collapsed}>
-      className={styles.groupHeader}
-      data-collapsed={collapsedGroups.includes(groupId)}
-    >
       <div className={clsx(styles.content, className)} {...props} />
       {selectMode ? (
         <div className={styles.selectInfo}>
@@ -105,6 +100,8 @@ export const PlainTextDocGroupHeader = ({
   ...props
 }: HTMLAttributes<HTMLDivElement> & {
   groupId: string;
+  collapsed: boolean;
+  onCollapse: (collapsed: boolean) => void;
   docCount: number;
   icon?: ReactNode;
 }) => {

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

@@ -30,4 +30,5 @@ export interface GroupHeaderProps {
   groupId: string;
   docCount: number;
   collapsed: boolean;
+  onCollapse: (collapsed: boolean) => void;
 }

packages/frontend/core/src/components/workspace-property-types/checkbox.tsx

@@ -100,10 +100,17 @@ export const CheckboxDocListProperty = ({
 export const CheckboxGroupHeader = ({
   groupId,
   docCount,
+  collapsed,
+  onCollapse,
 }: GroupHeaderProps) => {
   const text = groupId === 'true' ? 'Checked' : 'Unchecked';
   return (
-    <PlainTextDocGroupHeader docCount={docCount} groupId={groupId}>
+    <PlainTextDocGroupHeader
+      docCount={docCount}
+      groupId={groupId}
+      collapsed={collapsed}
+      onCollapse={onCollapse}
+    >
       {text}
     </PlainTextDocGroupHeader>
   );

packages/frontend/core/src/components/workspace-property-types/created-updated-by.tsx

@@ -166,11 +166,18 @@ export const UpdatedByDocListInlineProperty = ({
 export const ModifiedByGroupHeader = ({
   groupId,
   docCount,
+  collapsed,
+  onCollapse,
 }: GroupHeaderProps) => {
   const userId = groupId;
 
   return (
-    <PlainTextDocGroupHeader groupId={groupId} docCount={docCount}>
+    <PlainTextDocGroupHeader
+      groupId={groupId}
+      docCount={docCount}
+      collapsed={collapsed}
+      onCollapse={onCollapse}
+    >
       <div className={styles.userLabelContainer}>
         <PublicUserLabel id={userId} size={20} showName={false} />
       </div>

packages/frontend/core/src/components/workspace-property-types/date.tsx

@@ -243,11 +243,21 @@ export const UpdatedDateDocListProperty = ({ doc }: DocListPropertyProps) => {
   );
 };
 
-export const DateGroupHeader = ({ groupId, docCount }: GroupHeaderProps) => {
+export const DateGroupHeader = ({
+  groupId,
+  docCount,
+  collapsed,
+  onCollapse,
+}: GroupHeaderProps) => {
   const date = groupId || 'No Date';
 
   return (
-    <PlainTextDocGroupHeader groupId={groupId} docCount={docCount}>
+    <PlainTextDocGroupHeader
+      groupId={groupId}
+      docCount={docCount}
+      collapsed={collapsed}
+      onCollapse={onCollapse}
+    >
       {date}
     </PlainTextDocGroupHeader>
   );

packages/frontend/core/src/components/workspace-property-types/doc-primary-mode.tsx

@@ -137,6 +137,8 @@ export const DocPrimaryModeDocListProperty = ({
 export const DocPrimaryModeGroupHeader = ({
   groupId,
   docCount,
+  collapsed,
+  onCollapse,
 }: GroupHeaderProps) => {
   const t = useI18n();
   const text =
@@ -147,7 +149,12 @@ export const DocPrimaryModeGroupHeader = ({
         : 'Default';
 
   return (
-    <PlainTextDocGroupHeader groupId={groupId} docCount={docCount}>
+    <PlainTextDocGroupHeader
+      groupId={groupId}
+      docCount={docCount}
+      collapsed={collapsed}
+      onCollapse={onCollapse}
+    >
       {text}
     </PlainTextDocGroupHeader>
   );

packages/frontend/core/src/components/workspace-property-types/journal.tsx

@@ -236,10 +236,20 @@ export const JournalDocListProperty = ({ doc }: DocListPropertyProps) => {
   );
 };
 
-export const JournalGroupHeader = ({ groupId, docCount }: GroupHeaderProps) => {
+export const JournalGroupHeader = ({
+  groupId,
+  docCount,
+  collapsed,
+  onCollapse,
+}: GroupHeaderProps) => {
   const text = groupId === 'true' ? 'Journal' : 'Not Journal';
   return (
-    <PlainTextDocGroupHeader groupId={groupId} docCount={docCount}>
+    <PlainTextDocGroupHeader
+      groupId={groupId}
+      docCount={docCount}
+      collapsed={collapsed}
+      onCollapse={onCollapse}
+    >
       {text}
     </PlainTextDocGroupHeader>
   );

packages/frontend/core/src/components/workspace-property-types/tags.tsx

@@ -202,7 +202,12 @@ export const TagsDocListProperty = ({ doc }: DocListPropertyProps) => {
   );
 };
 
-export const TagsGroupHeader = ({ groupId, docCount }: GroupHeaderProps) => {
+export const TagsGroupHeader = ({
+  groupId,
+  docCount,
+  collapsed,
+  onCollapse,
+}: GroupHeaderProps) => {
   const t = useI18n();
   const tagService = useService(TagService);
   const tag = useLiveData(tagService.tagList.tagByTagId$(groupId));
@@ -212,6 +217,8 @@ export const TagsGroupHeader = ({ groupId, docCount }: GroupHeaderProps) => {
       <PlainTextDocGroupHeader
         groupId={groupId}
         docCount={docCount}
+        collapsed={collapsed}
+        onCollapse={onCollapse}
         icon={
           <div
             style={{
@@ -231,6 +238,8 @@ export const TagsGroupHeader = ({ groupId, docCount }: GroupHeaderProps) => {
     <PlainTextDocGroupHeader
       groupId={groupId}
       docCount={docCount}
+      collapsed={collapsed}
+      onCollapse={onCollapse}
       icon={<TagIcon tag={tag} />}
     >
       <TagName tag={tag} />

packages/frontend/core/src/components/workspace-property-types/text.tsx

@@ -260,10 +260,20 @@ export const TextDocListProperty = ({ value }: { value: string }) => {
   return <StackProperty icon={<TextTypeIcon />}>{value}</StackProperty>;
 };
 
-export const TextGroupHeader = ({ groupId, docCount }: GroupHeaderProps) => {
+export const TextGroupHeader = ({
+  groupId,
+  docCount,
+  collapsed,
+  onCollapse,
+}: GroupHeaderProps) => {
   const text = groupId || 'No Text';
   return (
-    <PlainTextDocGroupHeader groupId={groupId} docCount={docCount}>
+    <PlainTextDocGroupHeader
+      groupId={groupId}
+      docCount={docCount}
+      collapsed={collapsed}
+      onCollapse={onCollapse}
+    >
       {text}
     </PlainTextDocGroupHeader>
   );

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

@@ -50,10 +50,12 @@ import { PinnedCollections } from './pinned-collections';
 const GroupHeader = memo(function GroupHeader({
   groupId,
   collapsed,
+  onCollapse,
   itemCount,
 }: {
   groupId: string;
   collapsed?: boolean;
+  onCollapse: (collapsed: boolean) => void;
   itemCount: number;
 }) {
   const contextValue = useContext(DocExplorerContext);
@@ -76,12 +78,21 @@ const GroupHeader = memo(function GroupHeader({
           groupId={groupId}
           docCount={itemCount}
           collapsed={!!collapsed}
+          onCollapse={onCollapse}
         />
       );
     } else {
       return '// TODO: ' + groupType;
     }
-  }, [allProperties, collapsed, groupId, groupKey, groupType, itemCount]);
+  }, [
+    allProperties,
+    collapsed,
+    groupId,
+    groupKey,
+    groupType,
+    itemCount,
+    onCollapse,
+  ]);
 
   if (!groupType) {
     return null;
@@ -114,6 +125,18 @@ export const AllPage = () => {
   const collectionService = useService(CollectionService);
   const pinnedCollectionService = useService(PinnedCollectionService);
 
+  const isCollectionDataReady = useLiveData(
+    collectionService.collectionDataReady$
+  );
+
+  const isPinnedCollectionDataReady = useLiveData(
+    pinnedCollectionService.pinnedCollectionDataReady$
+  );
+
+  const pinnedCollections = useLiveData(
+    pinnedCollectionService.pinnedCollections$
+  );
+
   const [selectedCollectionId, setSelectedCollectionId] = useState<
     string | null
   >(null);
@@ -124,17 +147,28 @@ export const AllPage = () => {
   );
 
   useEffect(() => {
-    // if selected collection is not found, set selected collection id to null
+    // if selected collection is not in pinned collections, set selected collection id to null
-    if (!selectedCollection && selectedCollectionId) {
+    if (
+      isPinnedCollectionDataReady &&
+      selectedCollectionId &&
+      !pinnedCollections.some(c => c.collectionId === selectedCollectionId)
+    ) {
       setSelectedCollectionId(null);
     }
-  }, [selectedCollection, selectedCollectionId]);
+  }, [isPinnedCollectionDataReady, pinnedCollections, selectedCollectionId]);
+
+  useEffect(() => {
+    // if selected collection is not found, set selected collection id to null
+    if (!selectedCollection && selectedCollectionId && isCollectionDataReady) {
+      setSelectedCollectionId(null);
+    }
+  }, [isCollectionDataReady, selectedCollection, selectedCollectionId]);
 
   const selectedCollectionInfo = useLiveData(
     selectedCollection ? selectedCollection.info$ : null
   );
 
-  const [tempFilters, setTempFilters] = useState<FilterParams[]>([]);
+  const [tempFilters, setTempFilters] = useState<FilterParams[] | null>(null);
 
   const [explorerContextValue] = useState(createDocExplorerContext);
 
@@ -143,7 +177,6 @@ export const AllPage = () => {
   const orderBy = useLiveData(explorerContextValue.orderBy$);
   const groups = useLiveData(explorerContextValue.groups$);
   const selectedDocIds = useLiveData(explorerContextValue.selectedDocIds$);
-  const collapsedGroups = useLiveData(explorerContextValue.collapsedGroups$);
   const selectMode = useLiveData(explorerContextValue.selectMode$);
 
   const { openPromptModal } = usePromptModal();
@@ -152,36 +185,23 @@ export const AllPage = () => {
     const items = groups.map((group: any) => {
       return {
         id: group.key,
-        Component: groups.length > 1 ? GroupHeader : undefined,
-        height: groups.length > 1 ? 24 : 0,
-        className: styles.groupHeader,
         items: group.items.map((docId: string) => {
           return {
             id: docId,
-            Component: DocListItemComponent,
-            height:
-              view === 'list'
-                ? 42
-                : view === 'grid'
-                  ? 280
-                  : calcCardHeightById(docId),
-            'data-view': view,
-            className: styles.docItem,
           };
         }),
       } satisfies MasonryGroup;
     });
     return items;
-  }, [groups, view]);
+  }, [groups]);
 
   const collectionRulesService = useService(CollectionRulesService);
   useEffect(() => {
     const subscription = collectionRulesService
       .watch(
-        // collection filters and temp filters can't exist at the same time
         selectedCollectionInfo
           ? {
-              filters: selectedCollectionInfo.rules.filters,
+              filters: tempFilters ?? selectedCollectionInfo.rules.filters,
               groupBy,
               orderBy,
               extraAllowList: selectedCollectionInfo.allowList,
@@ -303,42 +323,74 @@ export const AllPage = () => {
     });
   }, [docsService.list, openConfirmModal, selectedDocIds, t]);
 
+  const handleSelectCollection = useCallback((collectionId: string) => {
+    setSelectedCollectionId(collectionId);
+    setTempFilters(null);
+  }, []);
+
+  const handleEditCollection = useCallback(
+    (collectionId: string) => {
+      const collection = collectionService.collection$(collectionId).value;
+      if (!collection) {
+        return;
+      }
+      setSelectedCollectionId(collectionId);
+      setTempFilters(collection.info$.value.rules.filters);
+    },
+    [collectionService]
+  );
+
   const handleSaveFilters = useCallback(() => {
-    openPromptModal({
+    if (selectedCollectionId) {
-      title: t['com.affine.editCollection.saveCollection'](),
+      collectionService.updateCollection(selectedCollectionId, {
-      label: t['com.affine.editCollectionName.name'](),
+        rules: {
-      inputOptions: {
+          filters: tempFilters ?? [],
-        placeholder: t['com.affine.editCollectionName.name.placeholder'](),
+        },
-      },
+      });
-      children: t['com.affine.editCollectionName.createTips'](),
+      setTempFilters(null);
-      confirmText: t['com.affine.editCollection.save'](),
+    } else {
-      cancelText: t['com.affine.editCollection.button.cancel'](),
+      openPromptModal({
-      confirmButtonOptions: {
+        title: t['com.affine.editCollection.saveCollection'](),
-        variant: 'primary',
+        label: t['com.affine.editCollectionName.name'](),
-      },
+        inputOptions: {
-      onConfirm(name) {
+          placeholder: t['com.affine.editCollectionName.name.placeholder'](),
-        const id = collectionService.createCollection({
+        },
-          name,
+        children: t['com.affine.editCollectionName.createTips'](),
-          rules: {
+        confirmText: t['com.affine.editCollection.save'](),
-            filters: tempFilters,
+        cancelText: t['com.affine.editCollection.button.cancel'](),
-          },
+        confirmButtonOptions: {
-        });
+          variant: 'primary',
-        pinnedCollectionService.addPinnedCollection({
+        },
-          collectionId: id,
+        onConfirm(name) {
-          index: pinnedCollectionService.indexAt('after'),
+          const id = collectionService.createCollection({
-        });
+            name,
-        setTempFilters([]);
+            rules: {
-        setSelectedCollectionId(id);
+              filters: tempFilters ?? [],
-      },
+            },
-    });
+          });
+          pinnedCollectionService.addPinnedCollection({
+            collectionId: id,
+            index: pinnedCollectionService.indexAt('after'),
+          });
+          setTempFilters(null);
+          setSelectedCollectionId(id);
+        },
+      });
+    }
   }, [
     collectionService,
     openPromptModal,
     pinnedCollectionService,
+    selectedCollectionId,
     t,
     tempFilters,
   ]);
 
+  const handleNewTempFilter = useCallback((params: FilterParams) => {
+    setSelectedCollectionId(null);
+    setTempFilters([params]);
+  }, []);
+
   return (
     <DocExplorerContext.Provider value={explorerContextValue}>
       <ViewTitle title={t['All pages']()} />
@@ -352,29 +404,24 @@ export const AllPage = () => {
           <div className={styles.pinnedCollection}>
             <PinnedCollections
               activeCollectionId={selectedCollectionId}
-              onClickAll={() => setSelectedCollectionId(null)}
+              onActiveAll={() => setSelectedCollectionId(null)}
-              onClickCollection={collectionId => {
+              onActiveCollection={handleSelectCollection}
-                setSelectedCollectionId(collectionId);
+              onAddFilter={handleNewTempFilter}
-                setTempFilters([]);
+              onEditCollection={handleEditCollection}
-              }}
+              hiddenAdd={tempFilters !== null}
-              onAddFilter={params => {
-                setSelectedCollectionId(null);
-                setTempFilters([...(tempFilters ?? []), params]);
-              }}
-              hiddenAdd={tempFilters.length > 0}
             />
           </div>
-          {tempFilters.length > 0 && (
+          {tempFilters !== null && (
             <div className={styles.filterArea}>
               <Filters
                 className={styles.filters}
-                filters={tempFilters ?? []}
+                filters={tempFilters}
                 onChange={handleFilterChange}
               />
               <Button
                 variant="plain"
                 onClick={() => {
-                  setTempFilters([]);
+                  setTempFilters(null);
                 }}
               >
                 {t['Cancel']()}
@@ -394,11 +441,24 @@ export const AllPage = () => {
               preloadHeight={100}
               itemWidth={'stretch'}
               virtualScroll
-              collapsedGroups={collapsedGroups}
+              groupComponent={GroupHeader}
+              itemComponent={DocListItemComponent}
+              groupClassName={styles.groupHeader}
+              itemClassName={styles.docItem}
               paddingX={useCallback(
                 (w: number) => (w > 500 ? 24 : w > 393 ? 20 : 16),
                 []
               )}
+              groupHeight={groupBy ? 24 : 0}
+              itemHeight={useMemo(
+                () =>
+                  view === 'list'
+                    ? 42
+                    : view === 'grid'
+                      ? 280
+                      : item => calcCardHeightById(item.id),
+                [view]
+              )}
             />
           </div>
         </div>

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

@@ -27,6 +27,38 @@ export const item = style({
   },
 });
 
+export const itemContent = style({
+  display: 'inline-block',
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis',
+  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 closeButton = style({});
+
 export const container = style({
   display: 'flex',
   flexDirection: 'row',

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

@@ -7,7 +7,13 @@ import {
 } from '@affine/core/modules/collection';
 import type { FilterParams } from '@affine/core/modules/collection-rules';
 import { useI18n } from '@affine/i18n';
-import { CollectionsIcon, FilterIcon, PlusIcon } from '@blocksuite/icons/rc';
+import {
+  CloseIcon,
+  CollectionsIcon,
+  EditIcon,
+  FilterIcon,
+  PlusIcon,
+} from '@blocksuite/icons/rc';
 import { useLiveData, useService } from '@toeverything/infra';
 import { useMemo, useState } from 'react';
 
@@ -17,10 +23,14 @@ export const PinnedCollectionItem = ({
   record,
   isActive,
   onClick,
+  onClickRemove,
+  onClickEdit,
 }: {
   record: PinnedCollectionRecord;
+  onClickRemove: () => void;
   isActive: boolean;
   onClick: () => void;
+  onClickEdit: () => void;
 }) => {
   const t = useI18n();
   const collectionService = useService(CollectionService);
@@ -38,22 +48,46 @@ export const PinnedCollectionItem = ({
       data-active={isActive ? 'true' : undefined}
       onClick={onClick}
     >
-      {name ?? t['Untitled']()}
+      <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}
+          size="16"
+          onClick={e => {
+            e.stopPropagation();
+            onClickRemove();
+          }}
+        >
+          <CloseIcon />
+        </IconButton>
+      )}
     </div>
   );
 };
 
 export const PinnedCollections = ({
   activeCollectionId,
-  onClickAll,
+  onActiveAll,
-  onClickCollection,
+  onActiveCollection,
   onAddFilter,
+  onEditCollection,
   hiddenAdd,
 }: {
   activeCollectionId: string | null;
-  onClickAll: () => void;
+  onActiveAll: () => void;
-  onClickCollection: (collectionId: string) => void;
+  onActiveCollection: (collectionId: string) => void;
   onAddFilter: (params: FilterParams) => void;
+  onEditCollection: (collectionId: string) => void;
   hiddenAdd?: boolean;
 }) => {
   const t = useI18n();
@@ -74,22 +108,32 @@ export const PinnedCollections = ({
       <div
         className={styles.item}
         data-active={activeCollectionId === null ? 'true' : undefined}
-        onClick={onClickAll}
+        onClick={onActiveAll}
         role="button"
       >
         {t['com.affine.all-docs.pinned-collection.all']()}
       </div>
-      {pinnedCollections.map(record => (
+      {pinnedCollections.map((record, index) => (
         <PinnedCollectionItem
           key={record.collectionId}
           record={record}
           isActive={activeCollectionId === record.collectionId}
-          onClick={() => onClickCollection(record.collectionId)}
+          onClick={() => onActiveCollection(record.collectionId)}
+          onClickEdit={() => onEditCollection(record.collectionId)}
+          onClickRemove={() => {
+            const nextCollectionId = pinnedCollections[index - 1]?.collectionId;
+            if (nextCollectionId) {
+              onActiveCollection(nextCollectionId);
+            } else {
+              onActiveAll();
+            }
+            pinnedCollectionService.removePinnedCollection(record.collectionId);
+          }}
         />
       ))}
       {!hiddenAdd && (
         <AddPinnedCollection
-          onAddPinnedCollection={handleAddPinnedCollection}
+          onPinCollection={handleAddPinnedCollection}
           onAddFilter={onAddFilter}
         />
       )}
@@ -98,17 +142,17 @@ export const PinnedCollections = ({
 };
 
 export const AddPinnedCollection = ({
-  onAddPinnedCollection,
+  onPinCollection,
   onAddFilter,
 }: {
-  onAddPinnedCollection: (collectionId: string) => void;
+  onPinCollection: (collectionId: string) => void;
   onAddFilter: (params: FilterParams) => void;
 }) => {
   return (
     <Menu
       items={
         <AddPinnedCollectionMenuContent
-          onAddPinnedCollection={onAddPinnedCollection}
+          onPinCollection={onPinCollection}
           onAddFilter={onAddFilter}
         />
       }
@@ -121,10 +165,10 @@ export const AddPinnedCollection = ({
 };
 
 export const AddPinnedCollectionMenuContent = ({
-  onAddPinnedCollection,
+  onPinCollection,
   onAddFilter,
 }: {
-  onAddPinnedCollection: (collectionId: string) => void;
+  onPinCollection: (collectionId: string) => void;
   onAddFilter: (params: FilterParams) => void;
 }) => {
   const [addingFilter, setAddingFilter] = useState<boolean>(false);
@@ -167,7 +211,7 @@ export const AddPinnedCollectionMenuContent = ({
           prefixIcon={<CollectionsIcon />}
           suffixIcon={<PlusIcon />}
           onClick={() => {
-            onAddPinnedCollection(meta.id);
+            onPinCollection(meta.id);
           }}
         >
           {meta.name ?? t['Untitled']()}

packages/frontend/core/src/modules/cloud/services/doc-created-by-updated-by-sync.ts

@@ -136,7 +136,8 @@ export class DocCreatedByUpdatedBySyncService extends Service {
           workspaceRootDocSynced &&
           isOwnerOrAdmin &&
           missingCreatedBy &&
-          !markedSynced
+          !markedSynced &&
+          this.workspaceService.workspace.flavour !== 'local'
       )
     ),
     false

packages/frontend/core/src/modules/collection/services/collection.ts

@@ -19,6 +19,11 @@ export class CollectionService extends Service {
     },
   });
 
+  readonly collectionDataReady$ = LiveData.from(
+    this.store.watchCollectionDataReady(),
+    false
+  );
+
   // collection metas used in collection list, only include `id` and `name`, without `rules` and `allowList`
   readonly collectionMetas$ = LiveData.from(
     this.store.watchCollectionMetas(),

packages/frontend/core/src/modules/collection/services/pinned-collection.ts

@@ -14,6 +14,11 @@ export class PinnedCollectionService extends Service {
     super();
   }
 
+  pinnedCollectionDataReady$ = LiveData.from(
+    this.pinnedCollectionStore.watchPinnedCollectionDataReady(),
+    false
+  );
+
   pinnedCollections$ = LiveData.from<PinnedCollectionRecord[]>(
     this.pinnedCollectionStore.watchPinnedCollections(),
     []

packages/frontend/core/src/modules/collection/stores/collection.ts

@@ -7,7 +7,7 @@ import {
 } from '@toeverything/infra';
 import dayjs from 'dayjs';
 import { nanoid } from 'nanoid';
-import { map, type Observable, switchMap } from 'rxjs';
+import { distinctUntilChanged, map, type Observable, switchMap } from 'rxjs';
 import { Array as YArray } from 'yjs';
 
 import type { FilterParams } from '../../collection-rules';
@@ -35,6 +35,17 @@ export class CollectionStore extends Store {
     return this.rootYDoc.getMap('setting');
   }
 
+  watchCollectionDataReady() {
+    return this.workspaceService.workspace.engine.doc
+      .docState$(this.workspaceService.workspace.id)
+      .pipe(
+        map(docState => {
+          return docState.ready;
+        }),
+        distinctUntilChanged()
+      );
+  }
+
   watchCollectionMetas() {
     return yjsGetPath(this.workspaceSettingYMap, 'collections').pipe(
       switchMap(yjsObserveDeep),

packages/frontend/core/src/modules/collection/stores/pinned-collection.ts

@@ -13,6 +13,10 @@ export class PinnedCollectionStore extends Store {
     super();
   }
 
+  watchPinnedCollectionDataReady() {
+    return this.workspaceDBService.db.pinnedCollections.isReady$;
+  }
+
   watchPinnedCollections(): Observable<PinnedCollectionRecord[]> {
     return this.workspaceDBService.db.pinnedCollections.find$();
   }

packages/frontend/core/src/modules/db/entities/table.ts

@@ -3,7 +3,7 @@ import type {
   TableSchemaBuilder,
 } from '@toeverything/infra';
 import { Entity, LiveData } from '@toeverything/infra';
-import { map } from 'rxjs';
+import { distinctUntilChanged, map } from 'rxjs';
 
 import type { WorkspaceService } from '../../workspace';
 
@@ -19,10 +19,23 @@ export class WorkspaceDBTable<
     super();
   }
 
+  isReady$ = LiveData.from(
+    this.workspaceService.workspace.engine.doc
+      .docState$(this.props.storageDocId)
+      .pipe(
+        map(docState => docState.ready),
+        distinctUntilChanged()
+      ),
+    false
+  );
+
   isSyncing$ = LiveData.from(
     this.workspaceService.workspace.engine.doc
       .docState$(this.props.storageDocId)
-      .pipe(map(docState => docState.syncing)),
+      .pipe(
+        map(docState => docState.syncing),
+        distinctUntilChanged()
+      ),
     false
   );