fix: consume blob stream correctly (#5706)

patch cmdk based on https://github.com/pengx17/cmdk/tree/patch-1
fix https://github.com/toeverything/AFFiNE/issues/5548

package.json

@@ -172,6 +172,7 @@
     "next-auth@^4.24.5": "patch:next-auth@npm%3A4.24.5#~/.yarn/patches/next-auth-npm-4.24.5-8428e11927.patch",
     "@reforged/maker-appimage/@electron-forge/maker-base": "7.2.0",
     "macos-alias": "npm:macos-alias-building@latest",
-    "fs-xattr": "npm:@napi-rs/xattr@latest"
+    "fs-xattr": "npm:@napi-rs/xattr@latest",
+    "@radix-ui/react-dialog": "npm:@radix-ui/react-dialog@latest"
   }
 }

packages/backend/server/package.json

@@ -20,7 +20,7 @@
   "dependencies": {
     "@apollo/server": "^4.9.5",
     "@auth/prisma-adapter": "^1.0.7",
-    "@aws-sdk/client-s3": "^3.454.0",
+    "@aws-sdk/client-s3": "^3.499.0",
     "@google-cloud/opentelemetry-cloud-monitoring-exporter": "^0.17.0",
     "@google-cloud/opentelemetry-cloud-trace-exporter": "^2.1.0",
     "@keyv/redis": "^2.8.0",

packages/backend/server/src/modules/doc/manager.ts

@@ -4,6 +4,7 @@ import {
   OnModuleDestroy,
   OnModuleInit,
 } from '@nestjs/common';
+import { Cron, CronExpression } from '@nestjs/schedule';
 import { Snapshot, Update } from '@prisma/client';
 import { chunk } from 'lodash-es';
 import { defer, retry } from 'rxjs';
@@ -79,6 +80,7 @@ export function isEmptyBuffer(buf: Buffer): boolean {
 }
 
 const MAX_SEQ_NUM = 0x3fffffff; // u31
+const UPDATES_QUEUE_CACHE_KEY = 'doc:manager:updates';
 
 /**
  * Since we can't directly save all client updates into database, in which way the database will overload,
@@ -663,26 +665,44 @@ export class DocManager implements OnModuleInit, OnModuleDestroy {
     count: number
   ) {
     const result = await this.cache.mapIncrease(
-      `doc:manager:updates`,
+      UPDATES_QUEUE_CACHE_KEY,
       `${workspaceId}::${guid}`,
       count
     );
 
     if (result <= 0) {
       await this.cache.mapDelete(
-        `doc:manager:updates`,
+        UPDATES_QUEUE_CACHE_KEY,
         `${workspaceId}::${guid}`
       );
     }
   }
 
   private async getAutoSquashCandidateFromCache() {
-    const key = await this.cache.mapRandomKey('doc:manager:updates');
+    const key = await this.cache.mapRandomKey(UPDATES_QUEUE_CACHE_KEY);
 
     if (key) {
-      const count = await this.cache.mapGet<number>('doc:manager:updates', key);
+      const cachedCount = await this.cache.mapIncrease(
-      if (typeof count === 'number' && count > 0) {
+        UPDATES_QUEUE_CACHE_KEY,
+        key,
+        0
+      );
+
+      if (cachedCount > 0) {
         const [workspaceId, id] = key.split('::');
+        const count = await this.db.update.count({
+          where: {
+            workspaceId,
+            id,
+          },
+        });
+
+        // FIXME(@forehalo): somehow the update count in cache is not accurate
+        if (count === 0) {
+          await this.cache.mapDelete(UPDATES_QUEUE_CACHE_KEY, key);
+
+          return null;
+        }
         return { id, workspaceId };
       }
     }
@@ -690,22 +710,38 @@ export class DocManager implements OnModuleInit, OnModuleDestroy {
     return null;
   }
 
-  private async doWithLock<T>(lock: string, job: () => Promise<T>) {
+  private async doWithLock<T>(
+    lockScope: string,
+    lockResource: string,
+    job: () => Promise<T>
+  ) {
+    const lock = `lock:${lockScope}:${lockResource}`;
     const acquired = await this.cache.setnx(lock, 1, {
       ttl: 60 * 1000,
     });
+    metrics.doc.counter('lock').add(1, { scope: lockScope });
 
     if (!acquired) {
+      metrics.doc.counter('lock_failed').add(1, { scope: lockScope });
       return;
     }
+    metrics.doc.counter('lock_required').add(1, { scope: lockScope });
 
     try {
       return await job();
     } finally {
-      await this.cache.delete(lock).catch(e => {
+      await this.cache
-        // safe, the lock will be expired when ttl ends
+        .delete(lock)
-        this.logger.error(`Failed to release lock ${lock}`, e);
+        .then(() => {
-      });
+          metrics.doc.counter('lock_released').add(1, { scope: lockScope });
+        })
+        .catch(e => {
+          metrics.doc
+            .counter('lock_release_failed')
+            .add(1, { scope: lockScope });
+          // safe, the lock will be expired when ttl ends
+          this.logger.error(`Failed to release lock ${lock}`, e);
+        });
     }
   }
 
@@ -715,7 +751,8 @@ export class DocManager implements OnModuleInit, OnModuleDestroy {
     job: () => Promise<T>
   ) {
     return this.doWithLock(
-      `doc:manager:updates-lock:${workspaceId}::${guid}`,
+      'doc:manager:updates',
+      `${workspaceId}::${guid}`,
       job
     );
   }
@@ -726,8 +763,16 @@ export class DocManager implements OnModuleInit, OnModuleDestroy {
     job: () => Promise<T>
   ) {
     return this.doWithLock(
-      `doc:manager:snapshot-lock:${workspaceId}::${guid}`,
+      'doc:manager:snapshot',
+      `${workspaceId}::${guid}`,
       job
     );
   }
+
+  @Cron(CronExpression.EVERY_MINUTE)
+  async reportUpdatesQueueCount() {
+    metrics.doc
+      .gauge('updates_queue_count')
+      .record(await this.db.update.count());
+  }
 }

packages/backend/server/src/modules/features/management.ts

@@ -48,22 +48,26 @@ export class FeatureManagementService {
     return this.feature.listFeatureUsers(FeatureType.EarlyAccess);
   }
 
+  async isEarlyAccessUser(email: string) {
+    const user = await this.prisma.user.findFirst({
+      where: {
+        email,
+      },
+    });
+    if (user) {
+      const canEarlyAccess = await this.feature
+        .hasUserFeature(user.id, FeatureType.EarlyAccess)
+        .catch(() => false);
+
+      return canEarlyAccess;
+    }
+    return false;
+  }
+
   /// check early access by email
   async canEarlyAccess(email: string) {
     if (this.config.featureFlags.earlyAccessPreview && !this.isStaff(email)) {
-      const user = await this.prisma.user.findFirst({
+      return this.isEarlyAccessUser(email);
-        where: {
-          email,
-        },
-      });
-      if (user) {
-        const canEarlyAccess = await this.feature
-          .hasUserFeature(user.id, FeatureType.EarlyAccess)
-          .catch(() => false);
-
-        return canEarlyAccess;
-      }
-      return false;
     } else {
       return true;
     }

packages/backend/server/src/modules/payment/service.ts

@@ -680,7 +680,7 @@ export class SubscriptionService {
     user: User,
     couponType: CouponType
   ): Promise<string | null> {
-    const earlyAccess = await this.features.canEarlyAccess(user.email);
+    const earlyAccess = await this.features.isEarlyAccessUser(user.email);
     if (earlyAccess) {
       try {
         const coupon = await this.stripe.coupons.retrieve(couponType);

packages/backend/server/src/modules/storage/providers/r2.ts

@@ -10,6 +10,7 @@ export class R2StorageProvider extends S3StorageProvider {
     super(
       {
         ...config,
+        forcePathStyle: true,
         endpoint: `https://${config.accountId}.r2.cloudflarestorage.com`,
       },
       bucket

packages/backend/server/src/modules/storage/providers/s3.ts

@@ -49,7 +49,7 @@ export class S3StorageProvider implements StorageProvider {
         new PutObjectCommand({
           Bucket: this.bucket,
           Key: key,
-          Body: body,
+          Body: blob,
 
           // metadata
           ContentType: metadata.contentType,

packages/backend/server/src/modules/users/resolver.ts

@@ -109,6 +109,9 @@ export class UserResolver {
     const user = await this.users.findUserByEmail(email);
     if (currentUser) return user;
 
+    // return empty response when user not exists
+    if (!user) return null;
+
     // only return limited info when not logged in
     return {
       email: user?.email,

packages/common/cmdk/LICENSE.md

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2022 Paco Coursey
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

packages/common/cmdk/README.md

@@ -1,3 +0,0 @@
-# copied directly from https://github.com/pacocoursey/cmdk
-
-will remove after a new CMDK version is published to npm

packages/common/cmdk/package.json

@@ -1,15 +0,0 @@
-{
-  "name": "@affine/cmdk",
-  "private": true,
-  "type": "module",
-  "main": "./src/index.tsx",
-  "module": "./src/index.tsx",
-  "devDependencies": {
-    "react": "18.2.0",
-    "react-dom": "18.2.0"
-  },
-  "dependencies": {
-    "@radix-ui/react-dialog": "^1.0.5"
-  },
-  "version": "0.11.0"
-}

packages/common/cmdk/src/command-score.ts

@@ -1,179 +0,0 @@
-/* eslint-disable */
-// @ts-nocheck
-
-// The scores are arranged so that a continuous match of characters will
-// result in a total score of 1.
-//
-// The best case, this character is a match, and either this is the start
-// of the string, or the previous character was also a match.
-var SCORE_CONTINUE_MATCH = 1,
-  // A new match at the start of a word scores better than a new match
-  // elsewhere as it's more likely that the user will type the starts
-  // of fragments.
-  // NOTE: We score word jumps between spaces slightly higher than slashes, brackets
-  // hyphens, etc.
-  SCORE_SPACE_WORD_JUMP = 0.9,
-  SCORE_NON_SPACE_WORD_JUMP = 0.8,
-  // Any other match isn't ideal, but we include it for completeness.
-  SCORE_CHARACTER_JUMP = 0.17,
-  // If the user transposed two letters, it should be significantly penalized.
-  //
-  // i.e. "ouch" is more likely than "curtain" when "uc" is typed.
-  SCORE_TRANSPOSITION = 0.1,
-  // The goodness of a match should decay slightly with each missing
-  // character.
-  //
-  // i.e. "bad" is more likely than "bard" when "bd" is typed.
-  //
-  // This will not change the order of suggestions based on SCORE_* until
-  // 100 characters are inserted between matches.
-  PENALTY_SKIPPED = 0.999,
-  // The goodness of an exact-case match should be higher than a
-  // case-insensitive match by a small amount.
-  //
-  // i.e. "HTML" is more likely than "haml" when "HM" is typed.
-  //
-  // This will not change the order of suggestions based on SCORE_* until
-  // 1000 characters are inserted between matches.
-  PENALTY_CASE_MISMATCH = 0.9999,
-  // Match higher for letters closer to the beginning of the word
-  PENALTY_DISTANCE_FROM_START = 0.9,
-  // If the word has more characters than the user typed, it should
-  // be penalised slightly.
-  //
-  // i.e. "html" is more likely than "html5" if I type "html".
-  //
-  // However, it may well be the case that there's a sensible secondary
-  // ordering (like alphabetical) that it makes sense to rely on when
-  // there are many prefix matches, so we don't make the penalty increase
-  // with the number of tokens.
-  PENALTY_NOT_COMPLETE = 0.99;
-
-var IS_GAP_REGEXP = /[\\\/_+.#"@\[\(\{&]/,
-  COUNT_GAPS_REGEXP = /[\\\/_+.#"@\[\(\{&]/g,
-  IS_SPACE_REGEXP = /[\s-]/,
-  COUNT_SPACE_REGEXP = /[\s-]/g;
-
-function commandScoreInner(
-  string,
-  abbreviation,
-  lowerString,
-  lowerAbbreviation,
-  stringIndex,
-  abbreviationIndex,
-  memoizedResults
-) {
-  if (abbreviationIndex === abbreviation.length) {
-    if (stringIndex === string.length) {
-      return SCORE_CONTINUE_MATCH;
-    }
-    return PENALTY_NOT_COMPLETE;
-  }
-
-  var memoizeKey = `${stringIndex},${abbreviationIndex}`;
-  if (memoizedResults[memoizeKey] !== undefined) {
-    return memoizedResults[memoizeKey];
-  }
-
-  var abbreviationChar = lowerAbbreviation.charAt(abbreviationIndex);
-  var index = lowerString.indexOf(abbreviationChar, stringIndex);
-  var highScore = 0;
-
-  var score, transposedScore, wordBreaks, spaceBreaks;
-
-  while (index >= 0) {
-    score = commandScoreInner(
-      string,
-      abbreviation,
-      lowerString,
-      lowerAbbreviation,
-      index + 1,
-      abbreviationIndex + 1,
-      memoizedResults
-    );
-    if (score > highScore) {
-      if (index === stringIndex) {
-        score *= SCORE_CONTINUE_MATCH;
-      } else if (IS_GAP_REGEXP.test(string.charAt(index - 1))) {
-        score *= SCORE_NON_SPACE_WORD_JUMP;
-        wordBreaks = string
-          .slice(stringIndex, index - 1)
-          .match(COUNT_GAPS_REGEXP);
-        if (wordBreaks && stringIndex > 0) {
-          score *= Math.pow(PENALTY_SKIPPED, wordBreaks.length);
-        }
-      } else if (IS_SPACE_REGEXP.test(string.charAt(index - 1))) {
-        score *= SCORE_SPACE_WORD_JUMP;
-        spaceBreaks = string
-          .slice(stringIndex, index - 1)
-          .match(COUNT_SPACE_REGEXP);
-        if (spaceBreaks && stringIndex > 0) {
-          score *= Math.pow(PENALTY_SKIPPED, spaceBreaks.length);
-        }
-      } else {
-        score *= SCORE_CHARACTER_JUMP;
-        if (stringIndex > 0) {
-          score *= Math.pow(PENALTY_SKIPPED, index - stringIndex);
-        }
-      }
-
-      if (string.charAt(index) !== abbreviation.charAt(abbreviationIndex)) {
-        score *= PENALTY_CASE_MISMATCH;
-      }
-    }
-
-    if (
-      (score < SCORE_TRANSPOSITION &&
-        lowerString.charAt(index - 1) ===
-          lowerAbbreviation.charAt(abbreviationIndex + 1)) ||
-      (lowerAbbreviation.charAt(abbreviationIndex + 1) ===
-        lowerAbbreviation.charAt(abbreviationIndex) && // allow duplicate letters. Ref #7428
-        lowerString.charAt(index - 1) !==
-          lowerAbbreviation.charAt(abbreviationIndex))
-    ) {
-      transposedScore = commandScoreInner(
-        string,
-        abbreviation,
-        lowerString,
-        lowerAbbreviation,
-        index + 1,
-        abbreviationIndex + 2,
-        memoizedResults
-      );
-
-      if (transposedScore * SCORE_TRANSPOSITION > score) {
-        score = transposedScore * SCORE_TRANSPOSITION;
-      }
-    }
-
-    if (score > highScore) {
-      highScore = score;
-    }
-
-    index = lowerString.indexOf(abbreviationChar, index + 1);
-  }
-
-  memoizedResults[memoizeKey] = highScore;
-  return highScore;
-}
-
-function formatInput(string) {
-  // convert all valid space characters to space so they match each other
-  return string.toLowerCase().replace(COUNT_SPACE_REGEXP, ' ');
-}
-
-export function commandScore(string: string, abbreviation: string): number {
-  /* NOTE:
-   * in the original, we used to do the lower-casing on each recursive call, but this meant that toLowerCase()
-   * was the dominating cost in the algorithm, passing both is a little ugly, but considerably faster.
-   */
-  return commandScoreInner(
-    string,
-    abbreviation,
-    formatInput(string),
-    formatInput(abbreviation),
-    0,
-    0,
-    {}
-  );
-}

packages/common/cmdk/tsconfig.json

@@ -1,9 +0,0 @@
-{
-  "extends": "../../../tsconfig.json",
-  "include": ["./src"],
-  "compilerOptions": {
-    "composite": true,
-    "noEmit": false,
-    "outDir": "lib"
-  }
-}

packages/common/env/package.json

@@ -3,8 +3,8 @@
   "private": true,
   "type": "module",
   "devDependencies": {
-    "@blocksuite/global": "0.11.0-nightly-202401020419-752a5b8",
+    "@blocksuite/global": "0.12.0-nightly-202401120404-4219e86",
-    "@blocksuite/store": "0.11.0-nightly-202401020419-752a5b8",
+    "@blocksuite/store": "0.12.0-nightly-202401120404-4219e86",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "vitest": "1.1.3"

packages/common/infra/package.json

@@ -13,9 +13,9 @@
     "@affine/debug": "workspace:*",
     "@affine/env": "workspace:*",
     "@affine/templates": "workspace:*",
-    "@blocksuite/blocks": "0.11.0-nightly-202401020419-752a5b8",
+    "@blocksuite/blocks": "0.12.0-nightly-202401120404-4219e86",
-    "@blocksuite/global": "0.11.0-nightly-202401020419-752a5b8",
+    "@blocksuite/global": "0.12.0-nightly-202401120404-4219e86",
-    "@blocksuite/store": "0.11.0-nightly-202401020419-752a5b8",
+    "@blocksuite/store": "0.12.0-nightly-202401120404-4219e86",
     "jotai": "^2.5.1",
     "jotai-effect": "^0.2.3",
     "nanoid": "^5.0.3",
@@ -26,8 +26,8 @@
   "devDependencies": {
     "@affine-test/fixtures": "workspace:*",
     "@affine/templates": "workspace:*",
-    "@blocksuite/lit": "0.11.0-nightly-202401020419-752a5b8",
+    "@blocksuite/lit": "0.12.0-nightly-202401120404-4219e86",
-    "@blocksuite/presets": "0.11.0-nightly-202401020419-752a5b8",
+    "@blocksuite/presets": "0.12.0-nightly-202401120404-4219e86",
     "async-call-rpc": "^6.3.1",
     "react": "^18.2.0",
     "rxjs": "^7.8.1",

packages/common/y-indexeddb/package.json

@@ -32,14 +32,14 @@
     }
   },
   "dependencies": {
-    "@blocksuite/global": "0.11.0-nightly-202401020419-752a5b8",
+    "@blocksuite/global": "0.12.0-nightly-202401120404-4219e86",
     "idb": "^8.0.0",
     "nanoid": "^5.0.3",
     "y-provider": "workspace:*"
   },
   "devDependencies": {
-    "@blocksuite/blocks": "0.11.0-nightly-202401020419-752a5b8",
+    "@blocksuite/blocks": "0.12.0-nightly-202401120404-4219e86",
-    "@blocksuite/store": "0.11.0-nightly-202401020419-752a5b8",
+    "@blocksuite/store": "0.12.0-nightly-202401120404-4219e86",
     "fake-indexeddb": "^5.0.0",
     "vite": "^5.0.6",
     "vite-plugin-dts": "3.7.0",

packages/common/y-provider/package.json

@@ -24,7 +24,7 @@
     "build": "vite build"
   },
   "devDependencies": {
-    "@blocksuite/store": "0.11.0-nightly-202401020419-752a5b8",
+    "@blocksuite/store": "0.12.0-nightly-202401120404-4219e86",
     "vite": "^5.0.6",
     "vite-plugin-dts": "3.7.0",
     "vitest": "1.1.3",

packages/frontend/component/package.json

@@ -71,12 +71,12 @@
     "uuid": "^9.0.1"
   },
   "devDependencies": {
-    "@blocksuite/blocks": "0.11.0-nightly-202401020419-752a5b8",
+    "@blocksuite/blocks": "0.12.0-nightly-202401120404-4219e86",
-    "@blocksuite/global": "0.11.0-nightly-202401020419-752a5b8",
+    "@blocksuite/global": "0.12.0-nightly-202401120404-4219e86",
     "@blocksuite/icons": "2.1.40",
-    "@blocksuite/lit": "0.11.0-nightly-202401020419-752a5b8",
+    "@blocksuite/lit": "0.12.0-nightly-202401120404-4219e86",
-    "@blocksuite/presets": "0.11.0-nightly-202401020419-752a5b8",
+    "@blocksuite/presets": "0.12.0-nightly-202401120404-4219e86",
-    "@blocksuite/store": "0.11.0-nightly-202401020419-752a5b8",
+    "@blocksuite/store": "0.12.0-nightly-202401120404-4219e86",
     "@storybook/addon-actions": "^7.5.3",
     "@storybook/addon-essentials": "^7.5.3",
     "@storybook/addon-interactions": "^7.5.3",

packages/frontend/component/src/components/app-sidebar/sidebar-containers/index.tsx

@@ -5,6 +5,8 @@ import { type PropsWithChildren, useRef } from 'react';
 import * as styles from './index.css';
 import { useHasScrollTop } from './use-has-scroll-top';
 
+export { useHasScrollTop } from './use-has-scroll-top';
+
 export function SidebarContainer({ children }: PropsWithChildren) {
   return <div className={clsx([styles.baseContainer])}>{children}</div>;
 }

packages/frontend/component/src/components/page-list/operation-menu-items/get-content-parser.ts

@@ -1,18 +0,0 @@
-import { ContentParser } from '@blocksuite/blocks/content-parser';
-import type { Page } from '@blocksuite/store';
-
-const contentParserWeakMap = new WeakMap<Page, ContentParser>();
-
-export function getContentParser(page: Page) {
-  if (!contentParserWeakMap.has(page)) {
-    contentParserWeakMap.set(
-      page,
-      new ContentParser(page, {
-        imageProxyEndpoint: !environment.isDesktop
-          ? runtimeConfig.imageProxyUrl
-          : undefined,
-      })
-    );
-  }
-  return contentParserWeakMap.get(page) as ContentParser;
-}

packages/frontend/core/package.json

@@ -17,7 +17,6 @@
   },
   "dependencies": {
     "@affine-test/fixtures": "workspace:*",
-    "@affine/cmdk": "workspace:*",
     "@affine/component": "workspace:*",
     "@affine/debug": "workspace:*",
     "@affine/electron-api": "workspace:*",
@@ -27,14 +26,14 @@
     "@affine/templates": "workspace:*",
     "@affine/workspace": "workspace:*",
     "@affine/workspace-impl": "workspace:*",
-    "@blocksuite/block-std": "0.11.0-nightly-202401020419-752a5b8",
+    "@blocksuite/block-std": "0.12.0-nightly-202401120404-4219e86",
-    "@blocksuite/blocks": "0.11.0-nightly-202401020419-752a5b8",
+    "@blocksuite/blocks": "0.12.0-nightly-202401120404-4219e86",
-    "@blocksuite/global": "0.11.0-nightly-202401020419-752a5b8",
+    "@blocksuite/global": "0.12.0-nightly-202401120404-4219e86",
     "@blocksuite/icons": "2.1.40",
-    "@blocksuite/inline": "0.11.0-nightly-202401020419-752a5b8",
+    "@blocksuite/inline": "0.12.0-nightly-202401120404-4219e86",
-    "@blocksuite/lit": "0.11.0-nightly-202401020419-752a5b8",
+    "@blocksuite/lit": "0.12.0-nightly-202401120404-4219e86",
-    "@blocksuite/presets": "0.11.0-nightly-202401020419-752a5b8",
+    "@blocksuite/presets": "0.12.0-nightly-202401120404-4219e86",
-    "@blocksuite/store": "0.11.0-nightly-202401020419-752a5b8",
+    "@blocksuite/store": "0.12.0-nightly-202401120404-4219e86",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/sortable": "^8.0.0",
     "@emotion/cache": "^11.11.0",
@@ -44,8 +43,10 @@
     "@marsidev/react-turnstile": "^0.4.0",
     "@radix-ui/react-collapsible": "^1.0.3",
     "@radix-ui/react-dialog": "^1.0.4",
+    "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-scroll-area": "^1.0.5",
     "@radix-ui/react-select": "^2.0.0",
+    "@radix-ui/react-toolbar": "^1.0.4",
     "@react-hookz/web": "^24.0.0",
     "@sentry/integrations": "^7.83.0",
     "@sentry/react": "^7.83.0",
@@ -55,6 +56,7 @@
     "async-call-rpc": "^6.3.1",
     "bytes": "^3.1.2",
     "clsx": "^2.0.0",
+    "cmdk": "patch:cmdk@npm%3A0.2.0#~/.yarn/patches/cmdk-npm-0.2.0-302237a911.patch",
     "css-spring": "^4.1.0",
     "cssnano": "^6.0.1",
     "dayjs": "^1.11.10",
@@ -66,8 +68,10 @@
     "jotai": "^2.5.1",
     "jotai-devtools": "^0.7.0",
     "jotai-effect": "^0.2.3",
+    "jotai-scope": "^0.4.1",
     "lit": "^3.0.2",
     "lodash-es": "^4.17.21",
+    "lottie-react": "^2.4.0",
     "lottie-web": "^5.12.2",
     "mini-css-extract-plugin": "^2.7.6",
     "nanoid": "^5.0.3",
@@ -79,6 +83,7 @@
     "react-error-boundary": "^4.0.11",
     "react-is": "18.2.0",
     "react-router-dom": "^6.16.0",
+    "react-virtuoso": "^4.6.2",
     "rxjs": "^7.8.1",
     "ses": "^1.0.0",
     "swr": "2.2.4",
@@ -89,8 +94,8 @@
     "zod": "^3.22.4"
   },
   "devDependencies": {
-    "@aws-sdk/client-s3": "3.485.0",
+    "@aws-sdk/client-s3": "3.499.0",
-    "@perfsee/webpack": "^1.8.4",
+    "@perfsee/webpack": "^1.10.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
     "@sentry/webpack-plugin": "^2.8.0",
     "@swc/core": "^1.3.93",

packages/frontend/core/src/atoms/collections.ts

@@ -1,7 +1,3 @@
-import type {
-  CollectionsCRUD,
-  CollectionsCRUDAtom,
-} from '@affine/component/page-list';
 import {
   currentWorkspaceAtom,
   waitForCurrentWorkspaceAtom,
@@ -14,6 +10,10 @@ import { atom } from 'jotai';
 import { atomWithObservable } from 'jotai/utils';
 import { Observable, of } from 'rxjs';
 
+import type {
+  CollectionsCRUD,
+  CollectionsCRUDAtom,
+} from '../components/page-list';
 import { getUserSetting } from '../utils/user-setting';
 import { getWorkspaceSetting } from '../utils/workspace-setting';
 import { sessionAtom } from './cloud-user';

packages/frontend/core/src/components/affine/auth/subscription-redirect.tsx

@@ -1,7 +1,7 @@
 import { SignUpPage } from '@affine/component/auth-components';
-import { AffineShapeIcon } from '@affine/component/page-list';
 import { Button } from '@affine/component/ui/button';
 import { Loading } from '@affine/component/ui/loading';
+import { AffineShapeIcon } from '@affine/core/components/page-list';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
 import type { SubscriptionRecurring } from '@affine/graphql';
 import {

packages/frontend/core/src/components/affine/create-workspace-modal/index.tsx

@@ -121,6 +121,9 @@ export const CreateWorkspaceModal = ({
         const result = await apis.dialog.loadDBFile();
         if (result.workspaceId && !canceled) {
           _addLocalWorkspace(result.workspaceId);
+          workspaceManager.list.revalidate().catch(err => {
+            logger.error("can't revalidate workspace list", err);
+          });
           onCreate(result.workspaceId);
         } else if (result.error || result.canceled) {
           if (result.error) {

packages/frontend/core/src/components/affine/share-page-modal/share-menu/share-export.tsx

@@ -1,6 +1,6 @@
-import { ExportMenuItems } from '@affine/component/page-list';
 import { Button } from '@affine/component/ui/button';
 import { Divider } from '@affine/component/ui/divider';
+import { ExportMenuItems } from '@affine/core/components/page-list';
 import { WorkspaceFlavour } from '@affine/env/workspace';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { LinkIcon } from '@blocksuite/icons';

packages/frontend/core/src/components/blocksuite/block-suite-header-title/operation-menu.tsx

@@ -1,10 +1,14 @@
-import { Export, FavoriteTag, MoveToTrash } from '@affine/component/page-list';
 import {
   Menu,
   MenuIcon,
   MenuItem,
   MenuSeparator,
 } from '@affine/component/ui/menu';
+import {
+  Export,
+  FavoriteTag,
+  MoveToTrash,
+} from '@affine/core/components/page-list';
 import { useBlockSuitePageMeta } from '@affine/core/hooks/use-block-suite-page-meta';
 import { waitForCurrentWorkspaceAtom } from '@affine/core/modules/workspace';
 import { WorkspaceFlavour } from '@affine/env/workspace';

packages/frontend/core/src/components/page-list/components/favorite-tag.tsx

@@ -1,10 +1,10 @@
+import { IconButton, type IconButtonProps } from '@affine/component';
+import { Tooltip } from '@affine/component';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { FavoritedIcon, FavoriteIcon } from '@blocksuite/icons';
 import Lottie from 'lottie-react';
 import { forwardRef, useCallback, useState } from 'react';
 
-import { IconButton, type IconButtonProps } from '../../../ui/button';
-import { Tooltip } from '../../../ui/tooltip';
 import favoritedAnimation from './favorited-animation/data.json';
 
 export const FavoriteTag = forwardRef<

packages/frontend/core/src/components/page-list/components/new-page-buttton.tsx

@@ -1,10 +1,9 @@
+import { DropdownButton, Menu } from '@affine/component';
+import { BlockCard } from '@affine/component/card/block-card';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { EdgelessIcon, ImportIcon, PageIcon } from '@blocksuite/icons';
 import { type PropsWithChildren, useCallback, useState } from 'react';
 
-import { DropdownButton } from '../../../ui/button';
-import { Menu } from '../../../ui/menu';
-import { BlockCard } from '../../card/block-card';
 import { menuContent } from './new-page-button.css';
 
 type NewPageButtonProps = {

packages/frontend/core/src/components/page-list/filter/condition.tsx

@@ -1,9 +1,9 @@
+import { Menu, MenuItem } from '@affine/component';
 import type { Filter, Literal } from '@affine/env/filter';
 import type { PropertiesMeta } from '@affine/env/filter';
 import type { ReactNode } from 'react';
 import { useMemo } from 'react';
 
-import { Menu, MenuItem } from '../../../ui/menu';
 import { FilterTag } from './filter-tag-translation';
 import * as styles from './index.css';
 import { literalMatcher } from './literal-matcher';

packages/frontend/core/src/components/page-list/filter/filter-list.tsx

@@ -1,11 +1,9 @@
+import { Button, IconButton, Menu } from '@affine/component';
 import type { Filter } from '@affine/env/filter';
 import type { PropertiesMeta } from '@affine/env/filter';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { CloseIcon, PlusIcon } from '@blocksuite/icons';
 
-import { Button } from '../../../ui/button';
-import { IconButton } from '../../../ui/button';
-import { Menu } from '../../../ui/menu';
 import { Condition } from './condition';
 import * as styles from './index.css';
 import { CreateFilterMenu } from './vars';

packages/frontend/core/src/components/page-list/filter/literal-matcher.tsx

@@ -1,10 +1,9 @@
+import { Input, Menu, MenuItem } from '@affine/component';
+import { AFFiNEDatePicker } from '@affine/component/date-picker';
 import type { LiteralValue, Tag } from '@affine/env/filter';
 import dayjs from 'dayjs';
 import { type ReactNode } from 'react';
 
-import Input from '../../../ui/input';
-import { Menu, MenuItem } from '../../../ui/menu';
-import { AFFiNEDatePicker } from '../../date-picker';
 import { FilterTag } from './filter-tag-translation';
 import { inputStyle } from './index.css';
 import { tBoolean, tDate, tDateRange, tTag } from './logical/custom-type';

packages/frontend/core/src/components/page-list/filter/multi-select.tsx

@@ -1,7 +1,7 @@
+import { Menu, MenuItem } from '@affine/component';
 import type { MouseEvent } from 'react';
 import { useMemo } from 'react';
 
-import { Menu, MenuItem } from '../../../ui/menu';
 import * as styles from './multi-select.css';
 
 export const MultiSelect = ({

packages/frontend/core/src/components/page-list/filter/vars.tsx

@@ -1,3 +1,4 @@
+import { MenuIcon, MenuItem, MenuSeparator } from '@affine/component';
 import type {
   Filter,
   LiteralValue,
@@ -8,7 +9,6 @@ import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import dayjs from 'dayjs';
 import type { ReactNode } from 'react';
 
-import { MenuIcon, MenuItem, MenuSeparator } from '../../../ui/menu';
 import { FilterTag } from './filter-tag-translation';
 import * as styles from './index.css';
 import { tBoolean, tDate, tDateRange, tTag } from './logical/custom-type';

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

@@ -1,3 +1,11 @@
+import {
+  ConfirmModal,
+  IconButton,
+  Menu,
+  MenuIcon,
+  MenuItem,
+  Tooltip,
+} from '@affine/component';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import {
   DeletePermanentlyIcon,
@@ -10,10 +18,6 @@ import {
 import { useState } from 'react';
 import { Link } from 'react-router-dom';
 
-import { IconButton } from '../../ui/button';
-import { Menu, MenuIcon, MenuItem } from '../../ui/menu';
-import { ConfirmModal } from '../../ui/modal';
-import { Tooltip } from '../../ui/tooltip';
 import { FavoriteTag } from './components/favorite-tag';
 import { DisablePublicSharing, MoveToTrash } from './operation-menu-items';
 import * as styles from './page-list.css';

packages/frontend/core/src/components/page-list/operation-menu-items/disable-public-sharing.tsx

@@ -1,9 +1,8 @@
+import { MenuIcon, MenuItem, type MenuItemProps } from '@affine/component';
+import { PublicLinkDisableModal } from '@affine/component/disable-public-link';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { ShareIcon } from '@blocksuite/icons';
 
-import { MenuIcon, MenuItem, type MenuItemProps } from '../../../ui/menu';
-import { PublicLinkDisableModal } from '../../disable-public-link';
-
 export const DisablePublicSharing = (props: MenuItemProps) => {
   const t = useAFFiNEI18N();
   return (

packages/frontend/core/src/components/page-list/operation-menu-items/export.tsx

@@ -1,3 +1,4 @@
+import { MenuIcon, MenuItem, MenuSub } from '@affine/component';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import {
   ExportIcon,
@@ -8,7 +9,6 @@ import {
 } from '@blocksuite/icons';
 import { type ReactNode, useMemo } from 'react';
 
-import { MenuIcon, MenuItem, MenuSub } from '../../../ui/menu';
 import { transitionStyle } from './index.css';
 
 interface ExportMenuItemProps<T> {

packages/frontend/core/src/components/page-list/operation-menu-items/move-to-trash.tsx

@@ -1,9 +1,13 @@
+import {
+  ConfirmModal,
+  type ConfirmModalProps,
+  MenuIcon,
+  MenuItem,
+  type MenuItemProps,
+} from '@affine/component';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { DeleteIcon } from '@blocksuite/icons';
 
-import { MenuIcon, MenuItem, type MenuItemProps } from '../../../ui/menu';
-import { ConfirmModal, type ConfirmModalProps } from '../../../ui/modal';
-
 export const MoveToTrash = (props: MenuItemProps) => {
   const t = useAFFiNEI18N();
 

packages/frontend/core/src/components/page-list/page-header.tsx

@@ -1,3 +1,4 @@
+import { Checkbox, type CheckboxProps } from '@affine/component';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { MultiSelectIcon, SortDownIcon, SortUpIcon } from '@blocksuite/icons';
 import type { PageMeta } from '@blocksuite/store';
@@ -10,7 +11,6 @@ import {
   useMemo,
 } from 'react';
 
-import { Checkbox, type CheckboxProps } from '../../ui/checkbox';
 import * as styles from './page-list.css';
 import {
   pageListHandlersAtom,

packages/frontend/core/src/components/page-list/page-list-item.tsx

@@ -1,9 +1,9 @@
+import { Checkbox } from '@affine/component';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { useDraggable } from '@dnd-kit/core';
 import { type PropsWithChildren, useCallback, useMemo } from 'react';
 import { Link } from 'react-router-dom';
 
-import { Checkbox } from '../../ui/checkbox';
 import * as styles from './page-list-item.css';
 import { PageTags } from './page-tags';
 import type { DraggableTitleCellData, PageListItemProps } from './types';

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

@@ -1,3 +1,5 @@
+import { Scrollable } from '@affine/component';
+import { useHasScrollTop } from '@affine/component/app-sidebar';
 import clsx from 'clsx';
 import {
   type ForwardedRef,
@@ -10,8 +12,6 @@ import {
   useRef,
 } from 'react';
 
-import { Scrollable } from '../../ui/scrollbar';
-import { useHasScrollTop } from '../app-sidebar/sidebar-containers/use-has-scroll-top';
 import { PageGroup } from './page-group';
 import { PageListTableHeader } from './page-header';
 import * as styles from './page-list.css';

packages/frontend/core/src/components/page-list/page-tags.tsx

@@ -1,10 +1,10 @@
+import { Menu } from '@affine/component';
 import type { Tag } from '@affine/env/filter';
 import { MoreHorizontalIcon } from '@blocksuite/icons';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 import clsx from 'clsx';
 import { useMemo } from 'react';
 
-import { Menu } from '../../ui/menu';
 import * as styles from './page-tags.css';
 import { stopPropagation } from './utils';
 

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

@@ -1,3 +1,4 @@
+import { Button, Tooltip } from '@affine/component';
 import type { DeleteCollectionInfo, PropertiesMeta } from '@affine/env/filter';
 import type { GetPageInfoById } from '@affine/env/page-info';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
@@ -5,8 +6,6 @@ import { ViewLayersIcon } from '@blocksuite/icons';
 import clsx from 'clsx';
 import { useState } from 'react';
 
-import { Button } from '../../../ui/button';
-import { Tooltip } from '../../../ui/tooltip';
 import {
   type CollectionsCRUDAtom,
   useCollectionManager,

packages/frontend/core/src/components/page-list/view/collection-list.tsx

@@ -1,3 +1,6 @@
+import { Button } from '@affine/component';
+import { FlexWrapper } from '@affine/component';
+import { Menu } from '@affine/component';
 import type {
   Collection,
   DeleteCollectionInfo,
@@ -8,9 +11,6 @@ import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { FilterIcon } from '@blocksuite/icons';
 import { useCallback, useState } from 'react';
 
-import { Button } from '../../../ui/button';
-import { FlexWrapper } from '../../../ui/layout';
-import { Menu } from '../../../ui/menu';
 import { CreateFilterMenu } from '../filter/vars';
 import type { useCollectionManager } from '../use-collection-manager';
 import * as styles from './collection-list.css';

packages/frontend/core/src/components/page-list/view/collection-operations.tsx

@@ -1,3 +1,9 @@
+import {
+  Menu,
+  MenuIcon,
+  MenuItem,
+  type MenuItemProps,
+} from '@affine/component';
 import type { Collection, DeleteCollectionInfo } from '@affine/env/filter';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { DeleteIcon, EditIcon, FilterIcon } from '@blocksuite/icons';
@@ -8,7 +14,6 @@ import {
   useMemo,
 } from 'react';
 
-import { Menu, MenuIcon, MenuItem, type MenuItemProps } from '../../../ui/menu';
 import type { useCollectionManager } from '../use-collection-manager';
 import type { AllPageListConfig } from '.';
 import * as styles from './collection-operations.css';

packages/frontend/core/src/components/page-list/view/create-collection.tsx

@@ -1,9 +1,7 @@
+import { Button, Input, Modal } from '@affine/component';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { useCallback, useMemo, useState } from 'react';
 
-import { Button } from '../../../ui/button';
-import Input from '../../../ui/input';
-import { Modal } from '../../../ui/modal';
 import * as styles from './create-collection.css';
 
 export interface CreateCollectionModalProps {

packages/frontend/core/src/components/page-list/view/edit-collection/edit-collection.tsx

@@ -1,12 +1,15 @@
+import {
+  Button,
+  Modal,
+  RadioButton,
+  RadioButtonGroup,
+} from '@affine/component';
 import type { Collection } from '@affine/env/filter';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import type { PageMeta, Workspace } from '@blocksuite/store';
 import type { DialogContentProps } from '@radix-ui/react-dialog';
 import { type ReactNode, useCallback, useMemo, useState } from 'react';
 
-import { RadioButton, RadioButtonGroup } from '../../../../index';
-import { Button } from '../../../../ui/button';
-import { Modal } from '../../../../ui/modal';
 import * as styles from './edit-collection.css';
 import { PagesMode } from './pages-mode';
 import { RulesMode } from './rules-mode';

packages/frontend/core/src/components/page-list/view/edit-collection/hooks.tsx

@@ -1,6 +1,6 @@
+import { Modal } from '@affine/component';
 import { useCallback, useState } from 'react';
 
-import { Modal } from '../../../../ui/modal';
 import type { AllPageListConfig } from './edit-collection';
 import { SelectPage } from './select-page';
 export const useSelectPage = ({

packages/frontend/core/src/components/page-list/view/edit-collection/pages-mode.tsx

@@ -1,3 +1,4 @@
+import { Menu } from '@affine/component';
 import type { Collection } from '@affine/env/filter';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { FilterIcon } from '@blocksuite/icons';
@@ -5,7 +6,6 @@ import type { PageMeta } from '@blocksuite/store';
 import clsx from 'clsx';
 import { type ReactNode, useCallback } from 'react';
 
-import { Menu } from '../../../../ui/menu';
 import { FilterList } from '../../filter/filter-list';
 import { VariableSelect } from '../../filter/vars';
 import { VirtualizedPageList } from '../../virtualized-page-list';

packages/frontend/core/src/components/page-list/view/edit-collection/select-page.tsx

@@ -1,11 +1,10 @@
+import { Button, Menu } from '@affine/component';
 import { Trans } from '@affine/i18n';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { FilterIcon } from '@blocksuite/icons';
 import clsx from 'clsx';
 import { useCallback, useState } from 'react';
 
-import { Button } from '../../../../ui/button';
-import { Menu } from '../../../../ui/menu';
 import { FilterList } from '../../filter';
 import { VariableSelect } from '../../filter/vars';
 import { VirtualizedPageList } from '../../virtualized-page-list';

packages/frontend/core/src/components/page-list/view/save-as-collection-button.tsx

@@ -1,10 +1,10 @@
+import { Button } from '@affine/component';
 import type { Collection } from '@affine/env/filter';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { SaveIcon } from '@blocksuite/icons';
 import { nanoid } from 'nanoid';
 import { useCallback } from 'react';
 
-import { Button } from '../../../ui/button';
 import { createEmptyCollection } from '../use-collection-manager';
 import { useEditCollectionName } from './use-edit-collection';