v0.5.4-beta.0

Co-authored-by: Himself65 <himself65@outlook.com>

.commitlintrc.json

@@ -6,6 +6,7 @@
       "always",
       [
         "electron",
+        "server",
         "web",
         "docs",
         "component",

.eslintignore

@@ -4,3 +4,4 @@ dist
 out
 storybook-static
 affine-out
+_next

.eslintrc.js

@@ -1,8 +1,11 @@
-module.exports = {
+/**
+ * @type {import('eslint').Linter.Config}
+ */
+const config = {
   root: true,
   settings: {
     react: {
-      version: '18',
+      version: 'detect',
     },
     next: {
       rootDir: 'apps/web',
@@ -10,6 +13,7 @@ module.exports = {
   },
   extends: [
     'eslint:recommended',
+    'plugin:react-hooks/recommended',
     'plugin:react/recommended',
     'plugin:react/jsx-runtime',
     'plugin:@typescript-eslint/recommended',
@@ -64,4 +68,14 @@ module.exports = {
       },
     ],
   },
+  overrides: [
+    {
+      files: 'apps/server/**/*.ts',
+      rules: {
+        '@typescript-eslint/consistent-type-imports': 0,
+      },
+    },
+  ],
 };
+
+module.exports = config;

.github/CLA.md

@@ -53,3 +53,6 @@ Example:
 - Aditya Sharma, @adityash1, 2023/03/21
 - Fangdun Tsai, @fundon, 2023/03/21
 - Zhilin Liu, @lzlme, 2023/04/09
+- Skye Sun, @skyesun, 2023/04/14
+- Jordy Delgado, @Jdelgad8, 2023/04/17
+- Howard Do, @howarddo2208, 2023/04/20

.github/ISSUE_TEMPLATE/BUG-REPORT.yml

@@ -23,6 +23,11 @@ body:
       options:
         - app.affine.pro
         - stage.affine.pro
+        - dev.affine.live
+        - affine-preview.vercel.app
+        - macOS x64
+        - macOS ARM 64
+        - Windows x64
     validations:
       required: true
   - type: dropdown

.github/actions/setup-node/action.yml

@@ -9,10 +9,6 @@ inputs:
     description: 'Run the install step.'
     required: false
     default: 'true'
-  electron-workspace-install:
-    description: 'Run the install step for the electron workspace.'
-    required: false
-    default: 'false'
   playwright-install:
     description: 'Run the install step for Playwright.'
     required: false
@@ -33,10 +29,6 @@ runs:
         scope: '@toeverything'
         cache: 'yarn'
 
-    - name: CI Module Resolve
-      shell: bash
-      run: node scripts/module-resolve/ci.cjs
-
     - name: Expose yarn config as "$GITHUB_OUTPUT"
       id: yarn-config
       shell: bash
@@ -86,17 +78,6 @@ runs:
         YARN_INSTALL_STATE_PATH: .yarn/ci-cache/install-state.gz
         HUSKY: '0'
 
-    - name: yarn install (electron)
-      if: ${{ inputs.electron-workspace-install == 'true' }}
-      shell: bash
-      run: yarn install ${{ inputs.extra-flags }}
-      working-directory: apps/electron
-      env:
-        NODE_AUTH_TOKEN: ${{ inputs.npm-token }}
-        YARN_ENABLE_GLOBAL_CACHE: 'false'
-        YARN_INSTALL_STATE_PATH: ../../.yarn/ci-cache/install-state.gz
-        HUSKY: '0'
-
     - name: Get installed Playwright version
       id: playwright-version
       if: ${{ inputs.playwright-install == 'true' }}

.github/labeler.yml

@@ -3,7 +3,7 @@ docs:
   - '**/README.md'
   - 'packages/templates/**/*'
 
-tests:
+test:
   - 'tests/**/*'
   - '**/tests/**/*'
   - '**/__tests__/**/*'
@@ -40,3 +40,5 @@ package:y-indexeddb: 'packages/y-indexeddb/**/*'
 app:web: 'apps/web/**/*'
 
 app:electron: 'apps/electron/**/*'
+
+app:server: 'apps/server/**/*'

.github/workflows/build-master.yml

@@ -137,9 +137,9 @@ jobs:
         with:
           path: |
             ${{ github.workspace }}/apps/web/.next/cache
-          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
+          key: ${{ runner.os }}-nextjs-dev-${{ hashFiles('**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
           restore-keys: |
-            ${{ runner.os }}-nextjs-${{ hashFiles('**/yarn.lock') }}-
+            ${{ runner.os }}-nextjs-dev-${{ hashFiles('**/yarn.lock') }}-
 
       - name: Build
         run: yarn build
@@ -153,6 +153,7 @@ jobs:
           NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID: ${{ secrets.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID }}
           API_SERVER_PROFILE: local
           ENABLE_DEBUG_PAGE: true
+          COVERAGE: true
 
       - name: Upload artifact
         uses: actions/upload-artifact@v3
@@ -190,6 +191,59 @@ jobs:
           name: affine
           fail_ci_if_error: true
 
+  server-test:
+    name: Server Test
+    runs-on: ubuntu-latest
+    environment: development
+    services:
+      postgres:
+        image: postgres
+        env:
+          POSTGRES_PASSWORD: affine
+        options: >-
+          --health-cmd pg_isready
+          --health-interval 10s
+          --health-timeout 5s
+          --health-retries 5
+        ports:
+          - 5432:5432
+    steps:
+      - uses: actions/checkout@v3
+      - name: Setup Node.js
+        uses: ./.github/actions/setup-node
+      - name: Initialize database
+        run: |
+          psql -h localhost -U postgres -c "CREATE DATABASE affine;"
+          psql -h localhost -U postgres -c "CREATE USER affine WITH PASSWORD 'affine';"
+          psql -h localhost -U postgres -c "ALTER USER affine WITH SUPERUSER;"
+        env:
+          PGPASSWORD: affine
+      - name: Generate prisma client
+        run: |
+          yarn exec prisma generate
+          yarn exec prisma db push
+        working-directory: apps/server
+        env:
+          DATABASE_URL: postgresql://affine:affine@localhost:5432/affine
+      - name: Run init-db script
+        run: yarn exec ts-node-esm ./scripts/init-db.ts
+        working-directory: apps/server
+        env:
+          DATABASE_URL: postgresql://affine:affine@localhost:5432/affine
+      - name: Run server tests
+        run: yarn test:coverage
+        working-directory: apps/server
+        env:
+          DATABASE_URL: postgresql://affine:affine@localhost:5432/affine
+      - name: Upload server test coverage results
+        uses: codecov/codecov-action@v3
+        with:
+          token: ${{ secrets.CODECOV_TOKEN }}
+          files: ./apps/server/.coverage/lcov.info
+          flags: server-test
+          name: affine
+          fail_ci_if_error: true
+
   e2e-test:
     name: E2E Test
     runs-on: ubuntu-latest
@@ -230,6 +284,10 @@ jobs:
           name: storybook
           path: ./packages/component/storybook-static
 
+      - name: Wait for Octobase Ready
+        run: |
+          node ./scripts/wait-3000-healthz.mjs
+
       - name: Run playwright tests
         run: yarn test --forbid-only --shard=${{ matrix.shard }}/${{ strategy.job-total }}
         env:

.github/workflows/build.yml

@@ -26,8 +26,6 @@ jobs:
       - uses: actions/checkout@v3
       - name: Install All Dependencies
         uses: ./.github/actions/setup-node
-        with:
-          electron-workspace-install: true
 
   build-storybook:
     name: Build Storybook
@@ -75,6 +73,7 @@ jobs:
           NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID: ${{ secrets.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID }}
           API_SERVER_PROFILE: local
           ENABLE_DEBUG_PAGE: true
+          COVERAGE: true
 
       - name: Upload artifact
         uses: actions/upload-artifact@v3
@@ -83,6 +82,59 @@ jobs:
           path: ./apps/web/.next
           if-no-files-found: error
 
+  server-test:
+    name: Server Test
+    runs-on: ubuntu-latest
+    environment: development
+    services:
+      postgres:
+        image: postgres
+        env:
+          POSTGRES_PASSWORD: affine
+        options: >-
+          --health-cmd pg_isready
+          --health-interval 10s
+          --health-timeout 5s
+          --health-retries 5
+        ports:
+          - 5432:5432
+    steps:
+      - uses: actions/checkout@v3
+      - name: Setup Node.js
+        uses: ./.github/actions/setup-node
+      - name: Initialize database
+        run: |
+          psql -h localhost -U postgres -c "CREATE DATABASE affine;"
+          psql -h localhost -U postgres -c "CREATE USER affine WITH PASSWORD 'affine';"
+          psql -h localhost -U postgres -c "ALTER USER affine WITH SUPERUSER;"
+        env:
+          PGPASSWORD: affine
+      - name: Generate prisma client
+        run: |
+          yarn exec prisma generate
+          yarn exec prisma db push
+        working-directory: apps/server
+        env:
+          DATABASE_URL: postgresql://affine:affine@localhost:5432/affine
+      - name: Run init-db script
+        run: yarn exec ts-node-esm ./scripts/init-db.ts
+        working-directory: apps/server
+        env:
+          DATABASE_URL: postgresql://affine:affine@localhost:5432/affine
+      - name: Run server tests
+        run: yarn test:coverage
+        working-directory: apps/server
+        env:
+          DATABASE_URL: postgresql://affine:affine@localhost:5432/affine
+      - name: Upload server test coverage results
+        uses: codecov/codecov-action@v3
+        with:
+          token: ${{ secrets.CODECOV_TOKEN }}
+          files: ./apps/server/.coverage/lcov.info
+          flags: server-test
+          name: affine
+          fail_ci_if_error: true
+
   storybook-test:
     name: Storybook Test
     runs-on: ubuntu-latest
@@ -149,6 +201,10 @@ jobs:
           name: storybook
           path: ./packages/component/storybook-static
 
+      - name: Wait for Octobase Ready
+        run: |
+          node ./scripts/wait-3000-healthz.mjs
+
       - name: Run playwright tests
         run: yarn test --forbid-only --shard=${{ matrix.shard }}/${{ strategy.job-total }}
         env:

.github/workflows/release-desktop-app.yml

@@ -17,6 +17,11 @@ on:
         type: boolean
         required: true
         default: true
+      is-canary:
+        description: 'Canary Release? The app will be named as "AFFiNE Canary"'
+        type: boolean
+        required: true
+        default: true
 
 permissions:
   actions: write
@@ -29,142 +34,146 @@ concurrency:
   group: ${{ github.workflow }}-${{ github.event_name == 'pull_request' && github.head_ref || github.sha }}
   cancel-in-progress: true
 
-jobs:
-  make-macos:
-    environment: production
-    env:
-      APPLE_ID: ${{ secrets.APPLE_ID }}
-      APPLE_PASSWORD: ${{ secrets.APPLE_PASSWORD }}
-      APPLE_TEAM_ID: ${{ secrets.APPLE_TEAM_ID }}
-      NEXT_PUBLIC_FIREBASE_API_KEY: ${{ secrets.NEXT_PUBLIC_FIREBASE_API_KEY }}
-      NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN: ${{ secrets.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN }}
-      NEXT_PUBLIC_FIREBASE_PROJECT_ID: ${{ secrets.NEXT_PUBLIC_FIREBASE_PROJECT_ID }}
-      NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET: ${{ secrets.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET }}
-      NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID: ${{ secrets.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID }}
-      NEXT_PUBLIC_FIREBASE_APP_ID: ${{ secrets.NEXT_PUBLIC_FIREBASE_APP_ID }}
-      NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID: ${{ secrets.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID }}
-      AFFINE_GOOGLE_CLIENT_ID: ${{ secrets.AFFINE_GOOGLE_CLIENT_ID }}
-      AFFINE_GOOGLE_CLIENT_SECRET: ${{ secrets.AFFINE_GOOGLE_CLIENT_SECRET }}
-      API_SERVER_PROFILE: prod
+env:
+  BUILD_TYPE: ${{ github.event.inputs.is-canary == 'true' && 'canary' || 'stable' }}
 
-    runs-on: macos-latest
-    strategy:
-      matrix:
-        arch: [x64, arm64]
+jobs:
+  before-make:
+    runs-on: ubuntu-latest
+    environment: ${{ github.ref_name == 'master' && 'production' || 'development' }}
     steps:
       - uses: actions/checkout@v3
       - name: Setup Node.js
         uses: ./.github/actions/setup-node
+      - name: generate-assets
+        working-directory: apps/electron
+        run: yarn generate-assets
+        env:
+          NEXT_PUBLIC_FIREBASE_API_KEY: ${{ secrets.NEXT_PUBLIC_FIREBASE_API_KEY }}
+          NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN: ${{ secrets.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN }}
+          NEXT_PUBLIC_FIREBASE_PROJECT_ID: ${{ secrets.NEXT_PUBLIC_FIREBASE_PROJECT_ID }}
+          NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET: ${{ secrets.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET }}
+          NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID: ${{ secrets.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID }}
+          NEXT_PUBLIC_FIREBASE_APP_ID: ${{ secrets.NEXT_PUBLIC_FIREBASE_APP_ID }}
+          NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID: ${{ secrets.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID }}
+          AFFINE_GOOGLE_CLIENT_ID: ${{ secrets.AFFINE_GOOGLE_CLIENT_ID }}
+          AFFINE_GOOGLE_CLIENT_SECRET: ${{ secrets.AFFINE_GOOGLE_CLIENT_SECRET }}
+          SENTRY_ORG: ${{ secrets.SENTRY_ORG }}
+          SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}
+          NEXT_PUBLIC_SENTRY_DSN: ${{ secrets.NEXT_PUBLIC_SENTRY_DSN }}
+          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+          API_SERVER_PROFILE: prod
+
+      - name: Upload Artifact (web-static)
+        uses: actions/upload-artifact@v3
         with:
-          electron-workspace-install: true
+          name: before-make-web-static
+          path: apps/electron/resources/web-static
 
-      - name: install Rust stable
-        uses: dtolnay/rust-toolchain@stable
-
-      - name: add arm64 target
-        if: matrix.arch == 'arm64'
-        run: rustup target add aarch64-apple-darwin
-
-      - name: Rust cache
-        uses: swatinem/rust-cache@v2
+      - name: Upload Artifact (electron dist)
+        uses: actions/upload-artifact@v3
         with:
-          key: ${{ matrix.arch }}
-          workspaces: './packages/octobase-node -> target'
+          name: before-make-electron-dist
+          path: apps/electron/dist
+
+  make-distribution:
+    environment: ${{ github.ref_name == 'master' && 'production' || 'development' }}
+    strategy:
+      # all combinations: macos-latest x64, macos-latest arm64, windows-latest x64, ubuntu-latest x64
+      matrix:
+        spec:
+          - { os: macos-latest, platform: macos, arch: x64 }
+          - { os: macos-latest, platform: macos, arch: arm64 }
+          - { os: ubuntu-latest, platform: linux, arch: x64 }
+          - { os: windows-latest, platform: windows, arch: x64 }
+    runs-on: ${{ matrix.spec.os }}
+    needs: before-make
+    env:
+      APPLE_ID: ${{ secrets.APPLE_ID }}
+      APPLE_PASSWORD: ${{ secrets.APPLE_PASSWORD }}
+      APPLE_TEAM_ID: ${{ secrets.APPLE_TEAM_ID }}
+      SKIP_GENERATE_ASSETS: 1
+    steps:
+      - uses: actions/checkout@v3
+      - name: Setup Node.js
+        uses: ./.github/actions/setup-node
+      - uses: actions/download-artifact@v3
+        with:
+          name: before-make-web-static
+          path: apps/electron/resources/web-static
+      - uses: actions/download-artifact@v3
+        with:
+          name: before-make-electron-dist
+          path: apps/electron/dist
 
       - name: Signing By Apple Developer ID
+        if: ${{ matrix.spec.platform == 'macos' }}
         uses: apple-actions/import-codesign-certs@v2
         with:
           p12-file-base64: ${{ secrets.CERTIFICATES_P12 }}
           p12-password: ${{ secrets.CERTIFICATES_P12_PASSWORD }}
 
-      - name: make build
-        run: yarn make-macos-${{ matrix.arch }}
+      - name: make
+        run: yarn make-${{ matrix.spec.platform }}-${{ matrix.spec.arch }}
         working-directory: apps/electron
 
-      - name: Save artifacts
+      - name: Save artifacts (mac)
+        if: ${{ matrix.spec.platform == 'macos' }}
         run: |
           mkdir -p builds
-          mv apps/electron/out/make/AFFiNE.dmg ./builds/affine-darwin-${{ matrix.arch }}.dmg
+          mv apps/electron/out/*/make/*.dmg ./builds/affine-${{ env.BUILD_TYPE }}-macos-${{ matrix.spec.arch }}.dmg
+
+      - name: Save artifacts (windows)
+        if: ${{ matrix.spec.platform == 'windows' }}
+        run: |
+          mkdir -p builds
+          mv apps/electron/out/*/make/zip/win32/x64/AFFiNE*-win32-x64-*.zip ./builds/affine-${{ env.BUILD_TYPE }}-windows-x64.zip
+          mv apps/electron/out/*/make/squirrel.windows/x64/*.exe ./builds/affine-${{ env.BUILD_TYPE }}-windows-x64.exe
+          mv apps/electron/out/*/make/squirrel.windows/x64/*.msi ./builds/affine-${{ env.BUILD_TYPE }}-windows-x64.msi
+          mv apps/electron/out/*/make/squirrel.windows/x64/*.nupkg ./builds/affine-${{ env.BUILD_TYPE }}-windows-x64.nupkg
+
+      - name: Save artifacts (linux)
+        if: ${{ matrix.spec.platform == 'linux' }}
+        run: |
+          mkdir -p builds
+          mv apps/electron/out/*/make/zip/linux/x64/*.zip ./builds/affine-${{ env.BUILD_TYPE }}-linux-x64.zip
 
       - name: Upload Artifact
         uses: actions/upload-artifact@v3
         with:
-          name: affine-darwin-${{ matrix.arch }}-builds
-          path: builds
-
-  make-windows:
-    runs-on: windows-latest
-    environment: production
-    env:
-      APPLE_ID: ${{ secrets.APPLE_ID }}
-      APPLE_PASSWORD: ${{ secrets.APPLE_PASSWORD }}
-      APPLE_TEAM_ID: ${{ secrets.APPLE_TEAM_ID }}
-      NEXT_PUBLIC_FIREBASE_API_KEY: ${{ secrets.NEXT_PUBLIC_FIREBASE_API_KEY }}
-      NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN: ${{ secrets.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN }}
-      NEXT_PUBLIC_FIREBASE_PROJECT_ID: ${{ secrets.NEXT_PUBLIC_FIREBASE_PROJECT_ID }}
-      NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET: ${{ secrets.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET }}
-      NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID: ${{ secrets.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID }}
-      NEXT_PUBLIC_FIREBASE_APP_ID: ${{ secrets.NEXT_PUBLIC_FIREBASE_APP_ID }}
-      NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID: ${{ secrets.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID }}
-      AFFINE_GOOGLE_CLIENT_ID: ${{ secrets.AFFINE_GOOGLE_CLIENT_ID }}
-      AFFINE_GOOGLE_CLIENT_SECRET: ${{ secrets.AFFINE_GOOGLE_CLIENT_SECRET }}
-      API_SERVER_PROFILE: prod
-
-    steps:
-      - uses: actions/checkout@v3
-      - name: Setup Node.js
-        uses: ./.github/actions/setup-node
-        with:
-          electron-workspace-install: true
-
-      - name: install Rust stable
-        uses: dtolnay/rust-toolchain@stable
-
-      - name: Rust cache
-        uses: swatinem/rust-cache@v2
-        with:
-          workspaces: './packages/octobase-node -> target'
-
-      - name: make build
-        run: yarn make-windows-x64
-        working-directory: apps/electron
-
-      - name: Save windows artifacts
-        run: |
-          mkdir -p builds
-          mv apps/electron/out/make/zip/win32/x64/AFFiNE-win32-x64-0.0.0.zip ./builds/affine-windows-x64.zip
-
-      - name: Upload Artifact
-        uses: actions/upload-artifact@v3
-        with:
-          name: affine-windows-x64-builds
+          name: affine-${{ matrix.spec.platform }}-${{ matrix.spec.arch }}-builds
           path: builds
 
   release:
-    needs: [make-macos, make-windows]
+    needs: make-distribution
     runs-on: ubuntu-latest
-    steps:
-      - name: Download MacOS x64 Artifacts
-        uses: actions/download-artifact@v3
-        with:
-          name: affine-darwin-x64-builds
-          path: ./
 
-      - name: Download MacOS arm64 Artifacts
+    steps:
+      - name: Download Artifacts (macos-x64)
         uses: actions/download-artifact@v3
         with:
-          name: affine-darwin-arm64-builds
+          name: affine-macos-x64-builds
           path: ./
-      - name: Download Windows Artifacts
+      - name: Download Artifacts (macos-arm64)
+        uses: actions/download-artifact@v3
+        with:
+          name: affine-macos-arm64-builds
+          path: ./
+      - name: Download Artifacts (windows-x64)
         uses: actions/download-artifact@v3
         with:
           name: affine-windows-x64-builds
           path: ./
+      - name: Download Artifacts (linux-x64)
+        uses: actions/download-artifact@v3
+        with:
+          name: affine-linux-x64-builds
+          path: ./
 
       - name: Create Release Draft
         uses: softprops/action-gh-release@v1
         env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.RELEASE_TOKEN }}
         with:
           name: Desktop APP ${{ github.event.inputs.version }}
           body: 'TODO: Add release notes here'

.github/workflows/release.yml

@@ -0,0 +1,19 @@
+name: Release
+
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  release:
+    name: Try publishing npm@latest release
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Setup Node.js
+        uses: ./.github/actions/setup-node
+      - name: Try publishing to NPM
+        run: ./scripts/publish.sh
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.gitignore

@@ -5,7 +5,7 @@
 !.yarn/plugins
 !.yarn/releases
 !.yarn/sdks
-!.yarn/versions
+.yarn/versions
 
 # compiled output
 *dist
@@ -58,8 +58,6 @@ Thumbs.db
 out/
 storybook-static
 
-module-resolve.js
-module-resolve.cjs
 /test-results/
 /playwright-report/
 /playwright/.cache/

.husky/pre-commit

@@ -3,7 +3,6 @@
 
 # check lockfile is up to date
 yarn install
-cd ./apps/eletron && yarn install
 
 # lint staged files
 yarn exec lint-staged

.yarnrc.yml

@@ -2,7 +2,7 @@ nmMode: hardlinks-local
 
 nodeLinker: node-modules
 
-npmAuthToken: '${NODE_AUTH_TOKEN:-NONE}'
+npmAuthToken: '${NPM_TOKEN:-NONE}'
 
 npmPublishAccess: public
 
@@ -11,5 +11,9 @@ npmPublishRegistry: 'https://registry.npmjs.org'
 plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
     spec: '@yarnpkg/plugin-interactive-tools'
+  - path: .yarn/plugins/@yarnpkg/plugin-version.cjs
+    spec: '@yarnpkg/plugin-version'
+  - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
+    spec: '@yarnpkg/plugin-workspace-tools'
 
 yarnPath: .yarn/releases/yarn-3.5.0.cjs

README.md

@@ -24,7 +24,11 @@ See https://github.com/all-?/all-contributors/issues/361#issuecomment-637166066
 
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
-[![affine-app-logo]](https://app.affine.pro)
+[![AFFiNE Web](<https://img.shields.io/badge/-Try%20It%20Online%20%E2%86%92-rgb(84,56,255)?style=flat-square&logoColor=white&logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAADAAAAAwAEwd99eAAABjElEQVRYhe1W0U3DMBB9RfyTDeoNyAYNG2QDOgJsECYgGxA26AZ4hIxgJqCZ4PjIGV+tUxK7raqiPsmKdXe5e3fOs7IiIlwSdxetfiNw7QRKAD0Ax/ssrI5QgQOw5v03AJOTJHcCL1x84LVmWzJyJlBg7P4BwCvb3pmIAbBPykZEqaulEU7YHNva1HypxUsKqIS9EvbynASs0n3ss+ciUIsuO8VvhL9emjdFBa3YO8XvALwpsZNYSqBB0PwUWgRZNksSL5GhlN0ngGd+dkpsD6AG8IGlslxwTh2fa09EBc3Dir32rRysuQlUAL54/wTAcpePPAXHPsOTGXhSEv69rAlYpZOt6DSO29J4D/TRRLJk6AvtaZSY9PkCFYVLqI9i/NF5YkkECgrXa6P4fVEn4iolrhNxRQqBZu7FqMNdZiMqAUPj2KdGZyicu1dHzlGqBHxn2sdTR53bmeJ+ebJd7LtXhGH4uQEwd0ttAPzMxGi5/6BdxTuMej41Bs59gGP+CU+Cq/4tvxH4HwR+Ab3Uqr/VGbqEAAAAAElFTkSuQmCC>)](https://app.affine.pro)
+[![AFFiNE macOS M1/M2 Chip](https://img.shields.io/badge/-macOS_M_Chip%20%E2%86%92-black?style=flat-square&logo=apple&logoColor=white)](https://github.com/toeverything/AFFiNE/releases/latest)
+[![AFFiNE macOS x64](https://img.shields.io/badge/-macOS_x86%20%E2%86%92-black?style=flat-square&logo=apple&logoColor=white)](https://github.com/toeverything/AFFiNE/releases/latest)
+[![AFFiNE Window x64](https://img.shields.io/badge/-Windows%20%E2%86%92-blue?style=flat-square&logo=windows&logoColor=white)](https://github.com/toeverything/AFFiNE/releases/latest)
+
 [![stars-icon]](https://github.com/toeverything/AFFiNE)
 [![All Contributors][all-contributors-badge]](#contributors)
 [![codecov]](https://codecov.io/gh/toeverything/AFFiNE)
@@ -36,6 +40,8 @@ See https://github.com/all-?/all-contributors/issues/361#issuecomment-637166066
 
 </div>
 
+---
+
 <div align="center">
     <a href="http://affine.pro"><img src="https://img.shields.io/badge/-AFFiNE-06449d?style=social&logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAMAAAAPkIrYAAAAP1BMVEU8b9w8b9w+b947cNw7b9w6b908b909b9w8b9w7b9w8b9w7cN08b9w7b908b9w7b9w8b907cNw8b9w8b91HcEx3NJCJAAAAFXRSTlP/3QWSgA+lHPlu6Di4XtIrxk/xRADGudUoAAAB9UlEQVR42tWYwbKjIBREG0GJKkRj/v9bZ1ZvRC99rzib11tTB9qqnKoW3/+X38vy7ifzQ1b/wk/8Q1bCv3y6Z6wFh2x2llIRGB6xRhzz6p+wVhRJD1gRZZYHrADYSyqsjFPGZtYbuFESesUysZXlcMnYyJpxTW5keQh5N7G6CUJCE2uHFNfEGiBmbmB1H4jxDawNcqbuPmtAJTtj6RZ0lpIwiR5jNmgfNtHHwLXPWfFYcS2NMdxkjac/dNaNCJPo3yf9pFuseHbDrBsRFguGs8te8Q4rXzTjVSPCIHp3FePKWbzi30xE+4zlBMmoJaGLfpLUmAmLiN4Xyibahy76WZRQMLJ2WX27on2oFvQVac8yi4p+J2forA0V8W1c++AVS1f1H6p9KKLHxk9RWKmsyB+VLC76gV65DLjokdg5KmsEMXsiDwXWSmTc9ezSoKJHoi9zUVihbMHfQOSsXB7Mrz1S1huKPde69sEsiKgNt8hYTjiWlAyENeu7IFe1D15RSEBN+yCiXw17K1RZm/w7UtJVWYN8f1ZyLlkVb2bT4vIVVrINH1dqX2YttkHmIWsfVWs646wcRFYis6fIVGpfYq1kjpGSW8kSRD+xYSmXRM0Ang9eSZioVdy/5pWaLqzIRyIpuVxYozvGf1m67I7pf/s3UXv+AP61NI2Y+BbSAAAAAElFTkSuQmCC" height=25></a>
     &nbsp;
@@ -55,7 +61,6 @@ See https://github.com/all-?/all-contributors/issues/361#issuecomment-637166066
 <em>See docs, canvas and tables are hyper merged with AFFiNE - just like the word affine (əˈfʌɪn | a-fine).</em>
 </div>
 <br />
-</div>
 
 ![img_v2_37a7cc04-ab3f-4405-ae9a-f84ceb4c948g](https://user-images.githubusercontent.com/79301703/230892907-5fd5c0c5-1665-4d75-8a35-744e0afc36a5.gif)
 
@@ -123,102 +128,12 @@ Thanks a lot to the community for providing such powerful and simple libraries,
 
 # Contributors
 
-<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
-<!-- prettier-ignore-start -->
-<!-- markdownlint-disable -->
-<table>
-  <tr>
-    <td align="center"><a href="https://github.com/doodlewind"><img src="https://avatars.githubusercontent.com/u/7312949?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Yifeng Wang</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=doodlewind" title="Code">💻</a> <a href="https://github.com/toeverything/AFFiNE/commits?author=doodlewind" title="Documentation">📖</a></td>
-    <td align="center"><a href="https://darksky.eu.org/"><img src="https://avatars.githubusercontent.com/u/25152247?v=4?s=50" width="50px;" alt=""/><br /><sub><b>DarkSky</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=darkskygit" title="Code">💻</a> <a href="https://github.com/toeverything/AFFiNE/commits?author=darkskygit" title="Documentation">📖</a></td>
-    <td align="center"><a href="http://zhangchi.page/"><img src="https://avatars.githubusercontent.com/u/5910926?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Chi Zhang</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=tzhangchi" title="Code">💻</a> <a href="https://github.com/toeverything/AFFiNE/commits?author=tzhangchi" title="Documentation">📖</a></td>
-    <td align="center"><a href="https://github.com/alt1o"><img src="https://avatars.githubusercontent.com/u/21084335?v=4?s=50" width="50px;" alt=""/><br /><sub><b>wang xinglong</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=alt1o" title="Code">💻</a> <a href="https://github.com/toeverything/AFFiNE/commits?author=alt1o" title="Documentation">📖</a></td>
-    <td align="center"><a href="https://github.com/Brooooooklyn"><img src="https://avatars.githubusercontent.com/u/3468483?v=4?s=50" width="50px;" alt=""/><br /><sub><b>LongYinan</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=Brooooooklyn" title="Code">💻</a> <a href="https://github.com/toeverything/AFFiNE/commits?author=Brooooooklyn" title="Documentation">📖</a></td>
-    <td align="center"><a href="https://github.com/hwangdev97"><img src="https://avatars.githubusercontent.com/u/24713927?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Hwang</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=hwangdev97" title="Code">💻</a> <a href="https://github.com/toeverything/AFFiNE/commits?author=hwangdev97" title="Documentation">📖</a></td>
-    <td align="center"><a href="https://github.com/kobeshanks"><img src="https://avatars.githubusercontent.com/u/82570088?v=4?s=50" width="50px;" alt=""/><br /><sub><b>kobeshanks</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=kobeshanks" title="Code">💻</a> <a href="https://github.com/toeverything/AFFiNE/commits?author=kobeshanks" title="Documentation">📖</a></td>
-  </tr>
-  <tr>
-    <td align="center"><a href="https://pengx17.vercel.app/"><img src="https://avatars.githubusercontent.com/u/584378?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Peng Xiao</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=pengx17" title="Code">💻</a> <a href="https://github.com/toeverything/AFFiNE/commits?author=pengx17" title="Documentation">📖</a></td>
-    <td align="center"><a href="https://mirone.me/"><img src="https://avatars.githubusercontent.com/u/10047788?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Mirone</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=Saul-Mirone" title="Code">💻</a> <a href="https://github.com/toeverything/AFFiNE/commits?author=Saul-Mirone" title="Documentation">📖</a></td>
-    <td align="center"><a href="https://github.com/zqran"><img src="https://avatars.githubusercontent.com/u/15389209?v=4?s=50" width="50px;" alt=""/><br /><sub><b>zqran</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=zqran" title="Code">💻</a> <a href="https://github.com/toeverything/AFFiNE/commits?author=zqran" title="Documentation">📖</a></td>
-    <td align="center"><a href="https://sunebear.com/"><img src="https://avatars.githubusercontent.com/u/7693264?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Shule Hsiung</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=SuneBear" title="Code">💻</a> <a href="https://github.com/toeverything/AFFiNE/commits?author=SuneBear" title="Documentation">📖</a></td>
-    <td align="center"><a href="https://fundon.viz.rs/"><img src="https://avatars.githubusercontent.com/u/27926?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Fangdun Tsai</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=fundon" title="Code">💻</a> <a href="https://github.com/toeverything/AFFiNE/commits?author=fundon" title="Documentation">📖</a></td>
-    <td align="center"><a href="https://lawvs.github.io/profile/"><img src="https://avatars.githubusercontent.com/u/18554747?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Whitewater</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=lawvs" title="Code">💻</a> <a href="https://github.com/toeverything/AFFiNE/commits?author=lawvs" title="Documentation">📖</a></td>
-    <td align="center"><a href="https://github.com/zuoxiaodong0815"><img src="https://avatars.githubusercontent.com/u/53252747?v=4?s=50" width="50px;" alt=""/><br /><sub><b>xiaodong zuo</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=zuoxiaodong0815" title="Code">💻</a> <a href="https://github.com/toeverything/AFFiNE/commits?author=zuoxiaodong0815" title="Documentation">📖</a></td>
-  </tr>
-  <tr>
-    <td align="center"><a href="https://github.com/Himself65"><img src="https://avatars.githubusercontent.com/u/14026360?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Himself65</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=Himself65" title="Code">💻</a> <a href="https://github.com/toeverything/AFFiNE/commits?author=Himself65" title="Documentation">📖</a></td>
-    <td align="center"><a href="https://github.com/DiamondThree"><img src="https://avatars.githubusercontent.com/u/24630517?v=4?s=50" width="50px;" alt=""/><br /><sub><b>DiamondThree</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=DiamondThree" title="Code">💻</a> <a href="https://github.com/toeverything/AFFiNE/commits?author=DiamondThree" title="Documentation">📖</a></td>
-    <td align="center"><a href="https://github.com/QiShaoXuan"><img src="https://avatars.githubusercontent.com/u/22772830?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Qi</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=QiShaoXuan" title="Code">💻</a> <a href="https://github.com/toeverything/AFFiNE/commits?author=QiShaoXuan" title="Documentation">📖</a></td>
-    <td align="center"><a href="https://colelawrence.com/"><img src="https://avatars.githubusercontent.com/u/2925395?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Cole Lawrence</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=colelawrence" title="Code">💻</a> <a href="https://github.com/toeverything/AFFiNE/commits?author=colelawrence" title="Documentation">📖</a></td>
-    <td align="center"><a href="https://onetwo.ren/wiki"><img src="https://avatars.githubusercontent.com/u/3746270?v=4?s=50" width="50px;" alt=""/><br /><sub><b>lin onetwo</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=linonetwo" title="Code">💻</a> <a href="https://github.com/toeverything/AFFiNE/commits?author=linonetwo" title="Documentation">📖</a></td>
-    <td align="center"><a href="https://github.com/thorseraq"><img src="https://avatars.githubusercontent.com/u/20554850?v=4?s=50" width="50px;" alt=""/><br /><sub><b>x1a0t</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=thorseraq" title="Code">💻</a> <a href="https://github.com/toeverything/AFFiNE/commits?author=thorseraq" title="Documentation">📖</a></td>
-    <td align="center"><a href="https://github.com/HeJiachen-PM"><img src="https://avatars.githubusercontent.com/u/79301703?v=4?s=50" width="50px;" alt=""/><br /><sub><b>HeJiachen-PM</b></sub></a><br /><a href="#research-HeJiachen-PM" title="Research">🔬</a> <a href="https://github.com/toeverything/AFFiNE/commits?author=HeJiachen-PM" title="Documentation">📖</a></td>
-  </tr>
-  <tr>
-    <td align="center"><a href="https://www.notion.so/houjoe/Joe-2a85f5be01004cd2b6a5ad26fbb948b1"><img src="https://avatars.githubusercontent.com/u/22443345?v=4?s=50" width="50px;" alt=""/><br /><sub><b>houjoe</b></sub></a><br /><a href="#research-joebeijing" title="Research">🔬</a> <a href="https://github.com/toeverything/AFFiNE/commits?author=joebeijing" title="Documentation">📖</a></td>
-    <td align="center"><a href="https://github.com/Yipei-Operation"><img src="https://avatars.githubusercontent.com/u/79373028?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Yipei Wei</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=Yipei-Operation" title="Documentation">📖</a></td>
-    <td align="center"><a href="https://github.com/VelikaHF"><img src="https://avatars.githubusercontent.com/u/121547898?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Velika</b></sub></a><br /><a href="#design-VelikaHF" title="Design">🎨</a></td>
-    <td align="center"><a href="https://github.com/Svaney-ssman"><img src="https://avatars.githubusercontent.com/u/110808979?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Svaney</b></sub></a><br /><a href="#design-Svaney-ssman" title="Design">🎨</a></td>
-    <td align="center"><a href="http://xell.me/"><img src="https://avatars.githubusercontent.com/u/132558?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Guozhu Liu</b></sub></a><br /><a href="#design-xell" title="Design">🎨</a></td>
-    <td align="center"><a href="https://github.com/fyZheng07"><img src="https://avatars.githubusercontent.com/u/63830919?v=4?s=50" width="50px;" alt=""/><br /><sub><b>fyZheng07</b></sub></a><br /><a href="#eventOrganizing-fyZheng07" title="Event Organizing">📋</a> <a href="#userTesting-fyZheng07" title="User Testing">📓</a></td>
-    <td align="center"><a href="https://github.com/CJSS"><img src="https://avatars.githubusercontent.com/u/4605025?v=4?s=50" width="50px;" alt=""/><br /><sub><b>CJSS</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=CJSS" title="Documentation">📖</a></td>
-  </tr>
-  <tr>
-    <td align="center"><a href="https://github.com/JimmFly"><img src="https://avatars.githubusercontent.com/u/102217452?v=4?s=50" width="50px;" alt=""/><br /><sub><b>JimmFly</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=JimmFly" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/mitsuhatu"><img src="https://avatars.githubusercontent.com/u/110213079?v=4?s=50" width="50px;" alt=""/><br /><sub><b>mitsuhatu</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=mitsuhatu" title="Code">💻</a> <a href="https://github.com/toeverything/AFFiNE/commits?author=mitsuhatu" title="Documentation">📖</a></td>
-    <td align="center"><a href="https://shockwave.me/"><img src="https://avatars.githubusercontent.com/u/15013925?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Austaras</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=Austaras" title="Code">💻</a> <a href="https://github.com/toeverything/AFFiNE/commits?author=Austaras" title="Documentation">📖</a></td>
-    <td align="center"><a href="https://github.com/uptonking"><img src="https://avatars.githubusercontent.com/u/11391549?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Jin Yao</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=uptonking" title="Code">💻</a> <a href="https://github.com/toeverything/AFFiNE/commits?author=uptonking" title="Documentation">📖</a></td>
-    <td align="center"><a href="https://github.com/CarlosZoft"><img src="https://avatars.githubusercontent.com/u/62192072?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Carlos Rafael </b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=CarlosZoft" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/caleboleary"><img src="https://avatars.githubusercontent.com/u/12816579?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Caleb OLeary</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=caleboleary" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/westongraham"><img src="https://avatars.githubusercontent.com/u/89493023?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Weston Graham</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=westongraham" title="Documentation">📖</a></td>
-  </tr>
-  <tr>
-    <td align="center"><a href="https://github.com/SaikaSakura"><img src="https://avatars.githubusercontent.com/u/11530942?v=4?s=50" width="50px;" alt=""/><br /><sub><b>MingLIang Wang</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=SaikaSakura" title="Code">💻</a> <a href="https://github.com/toeverything/AFFiNE/commits?author=SaikaSakura" title="Documentation">📖</a></td>
-    <td align="center"><a href="https://github.com/fanjing22"><img src="https://avatars.githubusercontent.com/u/109729699?v=4?s=50" width="50px;" alt=""/><br /><sub><b>fanjing22</b></sub></a><br /><a href="#design-fanjing22" title="Design">🎨</a></td>
-    <td align="center"><a href="https://github.com/pointmax"><img src="https://avatars.githubusercontent.com/u/49361135?v=4?s=50" width="50px;" alt=""/><br /><sub><b>pointmax</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=pointmax" title="Documentation">📖</a> <a href="https://github.com/toeverything/AFFiNE/commits?author=pointmax" title="Code">💻</a></td>
-    <td align="center"><a href="https://liby.github.io/notes"><img src="https://avatars.githubusercontent.com/u/38807139?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Bryan Lee</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=liby" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/chenmoonmo"><img src="https://avatars.githubusercontent.com/u/36295999?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Simon Li</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=chenmoonmo" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/githbq"><img src="https://avatars.githubusercontent.com/u/10009709?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Bob Hu</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=githbq" title="Code">💻</a></td>
-    <td align="center"><a href="https://quavo.vercel.app/"><img src="https://avatars.githubusercontent.com/u/67266933?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Quavo</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=lucky-chap" title="Documentation">📖</a> <a href="https://github.com/toeverything/AFFiNE/commits?author=lucky-chap" title="Code">💻</a></td>
-  </tr>
-  <tr>
-    <td align="center"><a href="https://github.com/LuciNyan"><img src="https://avatars.githubusercontent.com/u/22126563?v=4?s=50" width="50px;" alt=""/><br /><sub><b>子瞻 Luci</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=LuciNyan" title="Code">💻</a></td>
-    <td align="center"><a href="http://blog.ipili.me/"><img src="https://avatars.githubusercontent.com/u/4948120?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Horus</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=m1911star" title="Code">💻</a> <a href="#platform-m1911star" title="Packaging/porting to new platform">📦</a></td>
-    <td align="center"><a href="https://segmentfault.com/u/qzuser_584786517d31a"><img src="https://avatars.githubusercontent.com/u/15103283?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Super.x</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=fanshyiis" title="Code">💻</a></td>
-    <td align="center"><a href="https://wangyu-1999.github.io/"><img src="https://avatars.githubusercontent.com/u/80874770?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Wang Yu</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=wangyu-1999" title="Code">💻</a></td>
-    <td align="center"><a href="https://felixc.at/"><img src="https://avatars.githubusercontent.com/u/1006477?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Felix Yan</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=felixonmars" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/lynettelopez"><img src="https://avatars.githubusercontent.com/u/32908859?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Lynette Lopez</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=lynettelopez" title="Code">💻</a></td>
-    <td align="center"><a href="http://manjusaka.itscoder.com/"><img src="https://avatars.githubusercontent.com/u/7054676?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Manjusaka</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=Zheaoli" title="Code">💻</a></td>
-  </tr>
-  <tr>
-    <td align="center"><a href="https://juejin.cn/user/2867982785579102/posts?sort=popular"><img src="https://avatars.githubusercontent.com/u/76603360?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Frozen FIsh</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=sudongyuer" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/MuhammedFaraz"><img src="https://avatars.githubusercontent.com/u/92734739?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Mohammed Faraz</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=MuhammedFaraz" title="Documentation">📖</a> <a href="https://github.com/toeverything/AFFiNE/commits?author=MuhammedFaraz" title="Code">💻</a></td>
-    <td align="center"><a href="https://pranavsriram.dev/"><img src="https://avatars.githubusercontent.com/u/28348429?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Pranav Sriram </b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=Pranav4399" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/Reson-a"><img src="https://avatars.githubusercontent.com/u/20806266?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Reson-a</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=Reson-a" title="Code">💻</a></td>
-    <td align="center"><a href="https://t.me/littlepoint"><img src="https://avatars.githubusercontent.com/u/7611700?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Zhizhen He</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=hezhizhen" title="Code">💻</a></td>
-    <td align="center"><a href="https://akr.moe/"><img src="https://avatars.githubusercontent.com/u/85140972?v=4?s=50" width="50px;" alt=""/><br /><sub><b>AkaraChen</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=AkaraChen" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/suyanhanx"><img src="https://avatars.githubusercontent.com/u/24221472?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Suyan</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=suyanhanx" title="Code">💻</a></td>
-  </tr>
-  <tr>
-    <td align="center"><a href="https://github.com/hehex9"><img src="https://avatars.githubusercontent.com/u/9209882?v=4?s=50" width="50px;" alt=""/><br /><sub><b>hehe</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=hehex9" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/albertodlc"><img src="https://avatars.githubusercontent.com/u/32411964?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Alberto de la Cruz</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=albertodlc" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/AlessioGr"><img src="https://avatars.githubusercontent.com/u/70709113?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Alessio Gravili</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=AlessioGr" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/lzlme"><img src="https://avatars.githubusercontent.com/u/117659326?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Zhilin Liu</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=lzlme" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/suica"><img src="https://avatars.githubusercontent.com/u/8041462?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Sg</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=suica" title="Code">💻</a></td>
-    <td align="center"><a href="https://sinchang.me/"><img src="https://avatars.githubusercontent.com/u/3297859?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Jeff Wen</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=sinchang" title="Code">💻</a></td>
-    <td align="center"><a href="https://m1212e.github.io/portfolio/"><img src="https://avatars.githubusercontent.com/u/14091540?v=4?s=50" width="50px;" alt=""/><br /><sub><b>m1212e</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=m1212e" title="Code">💻</a></td>
-  </tr>
-  <tr>
-    <td align="center"><a href="https://adityash1.github.io/"><img src="https://avatars.githubusercontent.com/u/65771169?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Aditya Sharma</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=adityash1" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/sheben404"><img src="https://avatars.githubusercontent.com/u/61317160?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Kehan Wang</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=sheben404" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/VictorNanka"><img src="https://avatars.githubusercontent.com/u/30154366?v=4?s=50" width="50px;" alt=""/><br /><sub><b>VictorNanka</b></sub></a><br /><a href="https://github.com/toeverything/AFFiNE/commits?author=VictorNanka" title="Code">💻</a></td>
-  </tr>
-</table>
+We would like to express our gratitude to all the individuals who have already contributed to AFFiNE! If you have any AFFiNE-related project, documentation, tool or template, please feel free to contribute it by submitting a pull request to our curated list on GitHub: [awesome-affine](https://github.com/toeverything/awesome-affine).
 
-<!-- markdownlint-restore -->
-<!-- prettier-ignore-end -->
+<a href="https://github.com/toeverything/affine/graphs/contributors">
+  <img src="https://user-images.githubusercontent.com/5910926/233382206-312428ca-094a-4579-ae06-213961ed7eab.svg" />
+</a>
 
-<!-- ALL-CONTRIBUTORS-LIST:END -->
 
 ## Self-Host
 
@@ -260,11 +175,10 @@ See [LICENSE] for details.
 [jobs available]: ./docs/jobs.md
 [latest packages]: https://github.com/toeverything/AFFiNE/pkgs/container/affine-self-hosted
 [contributor license agreement]: https://github.com/toeverything/affine/edit/master/.github/CLA.md
-[affine-app-logo]: https://img.shields.io/static/v1?label=Try%20Online&logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAhpJREFUWEdjZEACtnl3MxgY/0YzMjAaMzAwcCLLUYH9/T/D/7MM/5mXHp6kPANmHiOI4Zx9Xfg3C+tKBob/zlSwiAgjGPey/vkdvneq5luwA+zy7+yhn+Vwv+89NFHFhREU7IyM/6YT4WyqK/n/nymT0Tb/1mFGBkYbqptOhIH/Gf4fYbTLv/2NBgmOCOvBSr6DHPCfWNW0UEe2A2x1uRlakiXBbtpx6jND+7KXZLmPbAdURokzeJjxwi31rrzH8OX7P5IdQbYDtnUoMXBzMMEt7Fj2imH7qU/0cQBy8MNsPHL5K0P13Of0cQB68MNsJScaSI4CHk4mhq3tSnCf3n36k0FZmh3Mn7L+DcPqgx9ICgWSHeBpxsdQESUGtgRk+eqDH+H8O09/MiR3P6atA1qTJRlsdLnhPgYlPOQQCW96wPDi3R+iHUFSCKAHP8wydEeREg0kOQA9+JOgwR1qL8CQEygC9jWp0UCSA+aVysIT3JqDHxgmr38DtlRCiIVhZZ0CPNhB6QDkEGIA0Q4gZAkuxxFyBNEOQA7ml+/+MIQ1PUAxG1kelAhB6YMYQLQDCPmQUAjhcgxRDiDWcEKOxOYIohyQGyjCEGIvANaPLfhhBiNHA6hmBBXNhABRDgCV/aBQAAFQpYMrn4PUgNTCACiXEMoNRDmAkC8okR8UDhjYRumAN8sHvGMCSkAD2jUDOWDAO6ewbDQQ3XMAy/oxKownQR0AAAAASUVORK5CYII=&color=orange&message=%E2%86%92
 [rust-version-icon]: https://img.shields.io/badge/Rust-1.70.0-dea584
 [stars-icon]: https://img.shields.io/github/stars/toeverything/AFFiNE.svg?style=flat&logo=github&colorB=red&label=stars
 [codecov]: https://codecov.io/gh/toeverything/affine/branch/master/graphs/badge.svg?branch=master
-[node-version-icon]: https://img.shields.io/badge/node-%3E=18.15.0-success
+[node-version-icon]: https://img.shields.io/badge/node-%3E=18.16.0-success
 [typescript-version-icon]: https://img.shields.io/github/package-json/dependency-version/toeverything/affine/dev/typescript
 [react-version-icon]: https://img.shields.io/github/package-json/dependency-version/toeverything/affine/dev/react?color=rgb%2897%2C%20218%2C%20251%29
 [blocksuite-icon]: https://img.shields.io/github/package-json/dependency-version/toeverything/AFFiNE/@blocksuite/store?color=6880ff&filename=apps%2Fweb%2Fpackage.json&label=blocksuite

apps/electron/.yarnrc.yml

@@ -1,8 +0,0 @@
-cacheFolder: '../../.yarn/cache'
-# deferredVersionFolder: '../../.yarn/versions'
-globalFolder: '../../.yarn/global'
-installStatePath: '../../.yarn/install-state.gz'
-patchFolder: '../../.yarn/patches'
-pnpUnpluggedFolder: '../../.yarn/unplugged'
-yarnPath: '../../.yarn/releases/yarn-3.5.0.cjs'
-virtualFolder: '../../.yarn/__virtual__'

apps/electron/README.md

@@ -1,21 +1,17 @@
 # AFFiNE Electron App
 
-# ⚠️ NOTE ⚠️
-
-Due to PNPM related issues, this project is currently using **yarn 3**.
-See https://github.com/electron/forge/issues/2633
-
 ## Development
 
-```
-# in project root, start web app at :8080
+To run AFFiNE Desktop Client Application locally, run the following commands:
+
+```sh
+# in repo root
+yarn install
 yarn dev
 
-# build octobase-node
-yarn workspace @affine/octobase-node build
-
-# in /apps/electron, start electron app
-yarn dev
+# in apps/electron
+yarn generate-assets
+yarn dev # or yarn prod for production build
 ```
 
 ## Credits

apps/electron/forge.config.js

@@ -1,7 +1,37 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const {
+  utils: { fromBuildIdentifier },
+} = require('@electron-forge/core');
+
+const path = require('node:path');
+
+const isCanary = process.env.BUILD_TYPE === 'canary';
+const buildType = isCanary ? 'canary' : 'stable';
+const productName = isCanary ? 'AFFiNE-Canary' : 'AFFiNE';
+const icoPath = isCanary
+  ? './resources/icons/icon_canary.ico'
+  : './resources/icons/icon.ico';
+const icnsPath = isCanary
+  ? './resources/icons/icon_canary.icns'
+  : './resources/icons/icon.icns';
+
+const arch =
+  process.argv.indexOf('--arch') > 0
+    ? process.argv[process.argv.indexOf('--arch') + 1]
+    : process.arch;
+
+/**
+ * @type {import('@electron-forge/shared-types').ForgeConfig}
+ */
 module.exports = {
+  buildIdentifier: isCanary ? 'canary' : 'stable',
   packagerConfig: {
-    name: 'AFFiNE',
-    icon: './resources/icons/icon.icns',
+    name: productName,
+    appBundleId: fromBuildIdentifier({
+      canary: 'pro.affine.canary',
+      stable: 'pro.affine.app',
+    }),
+    icon: icnsPath,
     osxSign: {
       identity: 'Developer ID Application: TOEVERYTHING PTE. LTD.',
       'hardened-runtime': true,
@@ -19,30 +49,71 @@ module.exports = {
     {
       name: '@electron-forge/maker-dmg',
       config: {
-        format: 'ULFO',
-        icon: './resources/icons/icon.icns',
+        icon: icnsPath,
         name: 'AFFiNE',
+        'icon-size': 128,
+        background: './resources/icons/dmg-background.png',
+        contents: [
+          {
+            x: 176,
+            y: 192,
+            type: 'file',
+            path: path.resolve(
+              __dirname,
+              'out',
+              buildType,
+              `${productName}-darwin-${arch}`,
+              `${productName}.app`
+            ),
+          },
+          { x: 432, y: 192, type: 'link', path: '/Applications' },
+        ],
       },
     },
     {
       name: '@electron-forge/maker-zip',
       config: {
         name: 'affine',
-        iconUrl: './resources/icons/icon.ico',
-        setupIcon: './resources/icons/icon.ico',
+        iconUrl: icoPath,
+        setupIcon: icoPath,
+        platforms: ['darwin', 'linux', 'win32'],
+      },
+    },
+    {
+      name: '@electron-forge/maker-squirrel',
+      config: {
+        name: 'AFFiNE',
+        setupIcon: icoPath,
+        // loadingGif: './resources/icons/loading.gif',
       },
     },
   ],
   hooks: {
+    readPackageJson: async (_, packageJson) => {
+      // we want different package name for canary build
+      // so stable and canary will not share the same app data
+      packageJson.productName = productName;
+    },
     generateAssets: async (_, platform, arch) => {
+      if (process.env.SKIP_GENERATE_ASSETS) {
+        return;
+      }
+
       const { $ } = await import('zx');
 
+      // TODO: right now we do not need the following
+      // it is for octobase-node, but we dont use it for now.
       if (platform === 'darwin' && arch === 'arm64') {
         // In GitHub Actions runner, MacOS is always x64
         // we need to manually set TARGET to aarch64-apple-darwin
         process.env.TARGET = 'aarch64-apple-darwin';
       }
 
+      if (platform === 'win32') {
+        $.shell = 'powershell.exe';
+        $.prefix = '';
+      }
+
       // run yarn generate-assets
       await $`yarn generate-assets`;
     },

apps/electron/layers/logger.ts

@@ -0,0 +1,3 @@
+import log from 'electron-log';
+
+export const logger = log;

apps/electron/layers/main/src/app-state/index.ts

@@ -1,75 +0,0 @@
-import * as os from 'node:os';
-import path from 'node:path';
-
-import { Storage } from '@affine/octobase-node';
-import { app, shell } from 'electron';
-import { BrowserWindow, ipcMain, nativeTheme } from 'electron';
-import fs from 'fs-extra';
-import { parse } from 'url';
-
-import { getExchangeTokenParams, oauthEndpoint } from './google-auth';
-
-const AFFINE_ROOT = path.join(os.homedir(), '.affine');
-
-fs.ensureDirSync(AFFINE_ROOT);
-
-const logger = console;
-
-// todo: rethink this
-export const appState = {
-  storage: new Storage(path.join(AFFINE_ROOT, 'test.db')),
-};
-
-export const registerHandlers = () => {
-  ipcMain.handle('octo:workspace-sync', async (_, id) => {
-    return appState.storage.sync(id, '');
-  });
-
-  ipcMain.handle('ui:theme-change', async (_, theme) => {
-    nativeTheme.themeSource = theme;
-    logger.info('theme change', theme);
-  });
-
-  ipcMain.handle('ui:sidebar-visibility-change', async (_, visible) => {
-    // todo
-    const windows = BrowserWindow.getAllWindows();
-    windows.forEach(w => {
-      // hide window buttons when sidebar is not visible
-      w.setWindowButtonVisibility(visible);
-    });
-    logger.info('sidebar visibility change', visible);
-  });
-
-  ipcMain.handle('ui:get-google-oauth-code', async () => {
-    logger.info('starting google sign in ...');
-    shell.openExternal(oauthEndpoint);
-
-    return new Promise((resolve, reject) => {
-      const handleOpenUrl = async (_: any, url: string) => {
-        const mainWindow = BrowserWindow.getAllWindows().find(
-          w => !w.isDestroyed()
-        );
-        const urlObj = parse(url.replace('??', '?'), true);
-        if (!mainWindow || !url.startsWith('affine://auth-callback')) return;
-        const code = urlObj.query['code'] as string;
-        if (!code) return;
-
-        logger.info('google sign in code received from callback', code);
-
-        app.removeListener('open-url', handleOpenUrl);
-        resolve(getExchangeTokenParams(code));
-      };
-
-      app.on('open-url', handleOpenUrl);
-
-      setTimeout(() => {
-        reject(new Error('Timed out'));
-        app.removeListener('open-url', handleOpenUrl);
-      }, 30000);
-    });
-  });
-
-  ipcMain.handle('main:env-update', async (_, env, value) => {
-    process.env[env] = value;
-  });
-};

apps/electron/layers/main/src/context.ts

@@ -0,0 +1,9 @@
+import { app } from 'electron';
+import path from 'path';
+
+export const appContext = {
+  appName: app.name,
+  appDataPath: path.join(app.getPath('appData'), app.name),
+};
+
+export type AppContext = typeof appContext;

apps/electron/layers/main/src/data/export.ts

@@ -0,0 +1,34 @@
+import fs from 'fs-extra';
+
+import { logger } from '../../../logger';
+import type { WorkspaceDatabase } from './sqlite';
+
+/**
+ * Start a backup of the database to the given destination.
+ */
+export async function exportDatabase(db: WorkspaceDatabase, dest: string) {
+  await fs.copyFile(db.path, dest);
+  logger.log('export: ', dest);
+}
+
+// export async function startBackup(db: WorkspaceDatabase, dest: string) {
+//   let timeout: NodeJS.Timeout | null;
+//   async function backup() {
+//     await fs.copyFile(db.path, dest);
+//     logger.log('backup: ', dest);
+//   }
+
+//   backup();
+
+//   const _db = await db.sqliteDB$;
+
+//   _db.on('change', () => {
+//     if (timeout) {
+//       clearTimeout(timeout);
+//     }
+//     timeout = setTimeout(async () => {
+//       await backup();
+//       timeout = null;
+//     }, 1000);
+//   });
+// }

apps/electron/layers/main/src/data/sqlite.ts

@@ -0,0 +1,216 @@
+import path from 'node:path';
+
+import fs from 'fs-extra';
+import type { Database } from 'sqlite3';
+import sqlite3Default from 'sqlite3';
+import * as Y from 'yjs';
+
+import { logger } from '../../../logger';
+import type { AppContext } from '../context';
+
+const sqlite3 = sqlite3Default.verbose();
+
+const schemas = [
+  `CREATE TABLE IF NOT EXISTS "updates" (
+  id INTEGER PRIMARY KEY AUTOINCREMENT,
+  data BLOB NOT NULL,
+  timestamp TIMESTAMP DEFAULT CURRENT_TIMESTAMP NOT NULL
+)`,
+  `CREATE TABLE IF NOT EXISTS "blobs" (
+  key TEXT PRIMARY KEY NOT NULL,
+  data BLOB NOT NULL,
+  timestamp TIMESTAMP DEFAULT CURRENT_TIMESTAMP NOT NULL
+)`,
+];
+
+sqlite3.verbose();
+
+interface UpdateRow {
+  id: number;
+  data: Buffer;
+  timestamp: string;
+}
+
+interface BlobRow {
+  key: string;
+  data: Buffer;
+  timestamp: string;
+}
+
+export class WorkspaceDatabase {
+  sqliteDB$: Promise<Database>;
+  ydoc = new Y.Doc();
+  _db: Database | null = null;
+
+  ready: Promise<Uint8Array>;
+
+  constructor(public path: string) {
+    this.sqliteDB$ = this.reconnectDB();
+    logger.log('open db', path);
+
+    this.ydoc.on('update', update => {
+      this.addUpdateToSQLite(update);
+    });
+
+    this.ready = (async () => {
+      const updates = await this.getUpdates();
+      updates.forEach(update => {
+        Y.applyUpdate(this.ydoc, update.data);
+      });
+      return this.getEncodedDocUpdates();
+    })();
+  }
+
+  // release resources
+  destroy = () => {
+    this._db?.close();
+    this.ydoc.destroy();
+  };
+
+  reconnectDB = async () => {
+    logger.log('open db', this.path);
+    if (this._db) {
+      const _db = this._db;
+      await new Promise<void>(res =>
+        _db.close(() => {
+          res();
+        })
+      );
+    }
+    return (this.sqliteDB$ = new Promise(res => {
+      // use cached version?
+      const db = new sqlite3.Database(this.path, error => {
+        if (error) {
+          logger.error('open db error', error);
+        }
+      });
+      this._db = db;
+
+      db.exec(schemas.join(';'), () => {
+        res(db);
+      });
+    }));
+  };
+
+  getEncodedDocUpdates = () => {
+    return Y.encodeStateAsUpdate(this.ydoc);
+  };
+
+  // non-blocking and use yDoc to validate the update
+  // after that, the update is added to the db
+  applyUpdate = (data: Uint8Array) => {
+    Y.applyUpdate(this.ydoc, data);
+    // todo: trim the updates when the number of records is too large
+    // 1. store the current ydoc state in the db
+    // 2. then delete the old updates
+    // yjs-idb will always trim the db for the first time after DB is loaded
+  };
+
+  addBlob = async (key: string, data: Uint8Array) => {
+    const db = await this.sqliteDB$;
+    return new Promise<void>((resolve, reject) => {
+      db.run(
+        'INSERT INTO blobs (key, data) VALUES (?, ?) ON CONFLICT(key) DO UPDATE SET data = ?',
+        [key, data, data],
+        err => {
+          if (err) {
+            logger.error('addBlob', err);
+            reject(err);
+          } else {
+            resolve();
+          }
+        }
+      );
+    });
+  };
+
+  getBlob = async (key: string) => {
+    const db = await this.sqliteDB$;
+    return new Promise<Uint8Array | null>((resolve, reject) => {
+      db.get<BlobRow>(
+        'SELECT data FROM blobs WHERE key = ?',
+        [key],
+        (err, row) => {
+          if (err) {
+            logger.error('getBlob', err);
+            reject(err);
+          } else if (!row) {
+            logger.error('getBlob', 'not found');
+            resolve(null);
+          } else {
+            resolve(row.data);
+          }
+        }
+      );
+    });
+  };
+
+  deleteBlob = async (key: string) => {
+    const db = await this.sqliteDB$;
+    return new Promise<void>((resolve, reject) => {
+      db.run('DELETE FROM blobs WHERE key = ?', [key], err => {
+        if (err) {
+          logger.error('deleteBlob', err);
+          reject(err);
+        } else {
+          resolve();
+        }
+      });
+    });
+  };
+
+  getPersistentBlobKeys = async () => {
+    const db = await this.sqliteDB$;
+    return new Promise<string[]>((resolve, reject) => {
+      db.all<BlobRow>('SELECT key FROM blobs', (err, rows) => {
+        if (err) {
+          logger.error('getPersistentBlobKeys', err);
+          reject(err);
+        } else {
+          resolve(rows.map(row => row.key));
+        }
+      });
+    });
+  };
+
+  private getUpdates = async () => {
+    const db = await this.sqliteDB$;
+    return new Promise<{ id: number; data: any }[]>((resolve, reject) => {
+      // do we need to order by id?
+      db.all<UpdateRow>('SELECT * FROM updates', (err, rows) => {
+        if (err) {
+          logger.error('getUpdates', err);
+          reject(err);
+        } else {
+          resolve(rows);
+        }
+      });
+    });
+  };
+
+  private addUpdateToSQLite = async (data: Uint8Array) => {
+    const db = await this.sqliteDB$;
+    return new Promise<void>((resolve, reject) => {
+      db.run('INSERT INTO updates (data) VALUES (?)', [data], err => {
+        if (err) {
+          logger.error('addUpdateToSQLite', err);
+          reject(err);
+        } else {
+          resolve();
+        }
+      });
+    });
+  };
+}
+
+export async function openWorkspaceDatabase(
+  context: AppContext,
+  workspaceId: string
+) {
+  const basePath = path.join(context.appDataPath, 'workspaces', workspaceId);
+  // hmmm.... blocking api but it should be fine, right?
+  await fs.ensureDir(basePath);
+  const dbPath = path.join(basePath, 'storage.db');
+
+  return new WorkspaceDatabase(dbPath);
+}

apps/electron/layers/main/src/data/workspace.ts

@@ -0,0 +1,20 @@
+import path from 'node:path';
+
+import fs from 'fs-extra';
+
+import type { AppContext } from '../context';
+
+export async function listWorkspaces(context: AppContext) {
+  const basePath = path.join(context.appDataPath, 'workspaces');
+  return fs.readdir(basePath);
+}
+
+export async function deleteWorkspace(context: AppContext, id: string) {
+  const basePath = path.join(context.appDataPath, 'workspaces', id);
+  const movedPath = path.join(
+    context.appDataPath,
+    'delete-workspaces',
+    `${id}`
+  );
+  return fs.move(basePath, movedPath);
+}

apps/electron/layers/main/src/handlers.ts

@@ -0,0 +1,184 @@
+import {
+  app,
+  BrowserWindow,
+  dialog,
+  ipcMain,
+  nativeTheme,
+  shell,
+} from 'electron';
+import { parse } from 'url';
+
+import { logger } from '../../logger';
+import { isMacOS } from '../../utils';
+import { appContext } from './context';
+import { exportDatabase } from './data/export';
+import type { WorkspaceDatabase } from './data/sqlite';
+import { openWorkspaceDatabase } from './data/sqlite';
+import { deleteWorkspace, listWorkspaces } from './data/workspace';
+import { getExchangeTokenParams, oauthEndpoint } from './google-auth';
+
+let currentWorkspaceId = '';
+
+const dbMapping = new Map<string, WorkspaceDatabase>();
+
+async function ensureWorkspaceDB(id: string) {
+  let workspaceDB = dbMapping.get(id);
+  if (!workspaceDB) {
+    // hmm... potential race condition?
+    workspaceDB = await openWorkspaceDatabase(appContext, id);
+    dbMapping.set(id, workspaceDB);
+  }
+  await workspaceDB.ready;
+  return workspaceDB;
+}
+
+function registerWorkspaceHandlers() {
+  ipcMain.handle('workspace:list', async _ => {
+    logger.info('list workspaces');
+    return listWorkspaces(appContext);
+  });
+
+  ipcMain.handle('workspace:delete', async (_, id) => {
+    logger.info('delete workspace', id);
+    return deleteWorkspace(appContext, id);
+  });
+}
+
+function registerUIHandlers() {
+  ipcMain.handle('ui:theme-change', async (_, theme) => {
+    nativeTheme.themeSource = theme;
+    logger.info('theme change', theme);
+  });
+
+  ipcMain.handle('ui:sidebar-visibility-change', async (_, visible) => {
+    // todo
+    // detect if os is macos
+    if (isMacOS()) {
+      const windows = BrowserWindow.getAllWindows();
+      windows.forEach(w => {
+        // hide window buttons when sidebar is not visible
+        w.setWindowButtonVisibility(visible);
+      });
+      logger.info('sidebar visibility change', visible);
+    }
+  });
+
+  ipcMain.handle('ui:workspace-change', async (_, workspaceId) => {
+    logger.info('workspace change', workspaceId);
+    currentWorkspaceId = workspaceId;
+  });
+
+  // @deprecated
+  ipcMain.handle('ui:get-google-oauth-code', async () => {
+    logger.info('starting google sign in ...');
+    shell.openExternal(oauthEndpoint);
+
+    return new Promise((resolve, reject) => {
+      const handleOpenUrl = async (_: any, url: string) => {
+        const mainWindow = BrowserWindow.getAllWindows().find(
+          w => !w.isDestroyed()
+        );
+        const urlObj = parse(url.replace('??', '?'), true);
+        if (!mainWindow || !url.startsWith('affine://auth-callback')) return;
+        const code = urlObj.query['code'] as string;
+        if (!code) return;
+
+        logger.info('google sign in code received from callback', code);
+
+        app.removeListener('open-url', handleOpenUrl);
+        resolve(getExchangeTokenParams(code));
+      };
+
+      app.on('open-url', handleOpenUrl);
+
+      setTimeout(() => {
+        reject(new Error('Timed out'));
+        app.removeListener('open-url', handleOpenUrl);
+      }, 30000);
+    });
+  });
+
+  ipcMain.handle('main:env-update', async (_, env, value) => {
+    process.env[env] = value;
+  });
+}
+
+function registerDBHandlers() {
+  app.on('activate', () => {
+    for (const [_, workspaceDB] of dbMapping) {
+      workspaceDB.reconnectDB();
+    }
+  });
+
+  ipcMain.handle('db:get-doc', async (_, id) => {
+    logger.log('main: get doc', id);
+    const workspaceDB = await ensureWorkspaceDB(id);
+    return workspaceDB.getEncodedDocUpdates();
+  });
+
+  ipcMain.handle('db:apply-doc-update', async (_, id, update) => {
+    logger.log('main: apply doc update', id);
+    const workspaceDB = await ensureWorkspaceDB(id);
+    return workspaceDB.applyUpdate(update);
+  });
+
+  ipcMain.handle('db:add-blob', async (_, workspaceId, key, data) => {
+    logger.log('main: add blob', workspaceId, key);
+    const workspaceDB = await ensureWorkspaceDB(workspaceId);
+    return workspaceDB.addBlob(key, data);
+  });
+
+  ipcMain.handle('db:get-blob', async (_, workspaceId, key) => {
+    logger.log('main: get blob', workspaceId, key);
+    const workspaceDB = await ensureWorkspaceDB(workspaceId);
+    return workspaceDB.getBlob(key);
+  });
+
+  ipcMain.handle('db:get-persisted-blobs', async (_, workspaceId) => {
+    logger.log('main: get persisted blob keys', workspaceId);
+    const workspaceDB = await ensureWorkspaceDB(workspaceId);
+    return workspaceDB.getPersistentBlobKeys();
+  });
+
+  ipcMain.handle('db:delete-blob', async (_, workspaceId, key) => {
+    logger.log('main: delete blob', workspaceId, key);
+    const workspaceDB = await ensureWorkspaceDB(workspaceId);
+    return workspaceDB.deleteBlob(key);
+  });
+
+  ipcMain.handle('ui:open-db-folder', async _ => {
+    const workspaceDB = await ensureWorkspaceDB(currentWorkspaceId);
+    logger.log('main: open db folder', workspaceDB.path);
+    shell.showItemInFolder(workspaceDB.path);
+  });
+
+  ipcMain.handle('ui:open-load-db-file-dialog', async () => {
+    // todo
+  });
+
+  ipcMain.handle('ui:open-save-db-file-dialog', async () => {
+    logger.log('main: open save db file dialog', currentWorkspaceId);
+    const workspaceDB = await ensureWorkspaceDB(currentWorkspaceId);
+    const ret = await dialog.showSaveDialog({
+      properties: ['showOverwriteConfirmation'],
+      title: 'Save Workspace',
+      buttonLabel: 'Save',
+      defaultPath: currentWorkspaceId + '.db',
+      message: 'Save Workspace as SQLite Database',
+    });
+    const filePath = ret.filePath;
+    if (ret.canceled || !filePath) {
+      return null;
+    }
+
+    await exportDatabase(workspaceDB, filePath);
+    shell.showItemInFolder(filePath);
+    return filePath;
+  });
+}
+
+export const registerHandlers = () => {
+  registerWorkspaceHandlers();
+  registerUIHandlers();
+  registerDBHandlers();
+};

apps/electron/layers/main/src/index.ts

@@ -3,10 +3,12 @@ import './security-restrictions';
 import { app } from 'electron';
 import path from 'path';
 
-import { registerHandlers } from './app-state';
+import { logger } from '../../logger';
+import { registerHandlers } from './handlers';
 import { restoreOrCreateWindow } from './main-window';
 import { registerProtocol } from './protocol';
 
+if (require('electron-squirrel-startup')) app.exit();
 if (process.defaultApp) {
   if (process.argv.length >= 2) {
     app.setAsDefaultProtocolClient('affine', process.execPath, [
@@ -21,6 +23,7 @@ if (process.defaultApp) {
  */
 const isSingleInstance = app.requestSingleInstanceLock();
 if (!isSingleInstance) {
+  logger.info('Another instance is running, exiting...');
   app.quit();
   process.exit(0);
 }

apps/electron/layers/main/src/main-window.ts

@@ -2,6 +2,7 @@ import { BrowserWindow, nativeTheme } from 'electron';
 import electronWindowState from 'electron-window-state';
 import { join } from 'path';
 
+import { logger } from '../../logger';
 import { isMacOS } from '../../utils';
 
 const IS_DEV = process.env.NODE_ENV === 'development';
@@ -14,12 +15,12 @@ async function createWindow() {
 
   const browserWindow = new BrowserWindow({
     titleBarStyle: isMacOS() ? 'hiddenInset' : 'default',
-    trafficLightPosition: { x: 20, y: 18 },
+    trafficLightPosition: { x: 24, y: 18 },
     x: mainWindowState.x,
     y: mainWindowState.y,
     width: mainWindowState.width,
     minWidth: 640,
-    transparent: true,
+    transparent: isMacOS(),
     visualEffectState: 'active',
     vibrancy: 'under-window',
     height: mainWindowState.height,
@@ -87,7 +88,7 @@ export async function restoreOrCreateWindow() {
     browserWindow.restore();
   }
 
-  browserWindow.focus();
+  logger.info('Create main window');
 
   return browserWindow;
 }

apps/electron/layers/preload/preload.d.ts

@@ -7,6 +7,6 @@ interface Window {
      *
      * @see https://github.com/cawa-93/dts-for-context-bridge
      */
-    readonly apis: { workspaceSync: (id: string) => Promise<any>; onThemeChange: (theme: string) => Promise<any>; onSidebarVisibilityChange: (visible: boolean) => Promise<any>; getGoogleOauthCode: () => Promise<{ requestInit: RequestInit; url: string; }>; updateEnv: (env: string, value: string) => void; };
+    readonly apis: { db: { getDoc: (id: string) => Promise<Uint8Array>; applyDocUpdate: (id: string, update: Uint8Array) => Promise<any>; addBlob: (workspaceId: string, key: string, data: Uint8Array) => Promise<any>; getBlob: (workspaceId: string, key: string) => Promise<Uint8Array>; deleteBlob: (workspaceId: string, key: string) => Promise<any>; getPersistedBlobs: (workspaceId: string) => Promise<string[]>; }; workspace: { list: () => Promise<string[]>; delete: (id: string) => Promise<void>; }; openLoadDBFileDialog: () => Promise<any>; openSaveDBFileDialog: () => Promise<any>; onThemeChange: (theme: string) => Promise<any>; onSidebarVisibilityChange: (visible: boolean) => Promise<any>; onWorkspaceChange: (workspaceId: string) => Promise<any>; openDBFolder: () => Promise<any>; getGoogleOauthCode: () => Promise<{ requestInit: RequestInit; url: string; }>; updateEnv: (env: string, value: string) => void; };
     readonly appInfo: { electron: boolean; isMacOS: boolean; };
 }

apps/electron/layers/preload/src/index.ts

@@ -22,7 +22,33 @@ import { isMacOS } from '../../utils';
  * @see https://github.com/cawa-93/dts-for-context-bridge
  */
 contextBridge.exposeInMainWorld('apis', {
-  workspaceSync: (id: string) => ipcRenderer.invoke('octo:workspace-sync', id),
+  db: {
+    // TODO: do we need to store the workspace list locally?
+    // workspace providers
+    getDoc: (id: string): Promise<Uint8Array | null> =>
+      ipcRenderer.invoke('db:get-doc', id),
+    applyDocUpdate: (id: string, update: Uint8Array) =>
+      ipcRenderer.invoke('db:apply-doc-update', id, update),
+    addBlob: (workspaceId: string, key: string, data: Uint8Array) =>
+      ipcRenderer.invoke('db:add-blob', workspaceId, key, data),
+    getBlob: (workspaceId: string, key: string): Promise<Uint8Array | null> =>
+      ipcRenderer.invoke('db:get-blob', workspaceId, key),
+    deleteBlob: (workspaceId: string, key: string) =>
+      ipcRenderer.invoke('db:delete-blob', workspaceId, key),
+    getPersistedBlobs: (workspaceId: string): Promise<string[]> =>
+      ipcRenderer.invoke('db:get-persisted-blobs', workspaceId),
+  },
+
+  workspace: {
+    list: (): Promise<string[]> => ipcRenderer.invoke('workspace:list'),
+    delete: (id: string): Promise<void> =>
+      ipcRenderer.invoke('workspace:delete', id),
+    // create will be implicitly called by db functions
+  },
+
+  openLoadDBFileDialog: () => ipcRenderer.invoke('ui:open-load-db-file-dialog'),
+  openSaveDBFileDialog: () => ipcRenderer.invoke('ui:open-save-db-file-dialog'),
+
   // ui
   onThemeChange: (theme: string) =>
     ipcRenderer.invoke('ui:theme-change', theme),
@@ -30,6 +56,11 @@ contextBridge.exposeInMainWorld('apis', {
   onSidebarVisibilityChange: (visible: boolean) =>
     ipcRenderer.invoke('ui:sidebar-visibility-change', visible),
 
+  onWorkspaceChange: (workspaceId: string) =>
+    ipcRenderer.invoke('ui:workspace-change', workspaceId),
+
+  openDBFolder: () => ipcRenderer.invoke('ui:open-db-folder'),
+
   /**
    * Try sign in using Google and return a request object to exchange the code for a token
    * Not exchange in Node side because it is easier to do it in the renderer with VPN

apps/electron/package.json

@@ -1,32 +1,26 @@
 {
   "name": "@affine/electron",
-  "productName": "AFFiNE",
   "private": true,
-  "version": "0.0.0",
+  "version": "0.5.4-beta.0",
   "author": "affine",
   "description": "AFFiNE App",
   "homepage": "https://github.com/toeverything/AFFiNE",
-  "workspaces": [
-    "../../packages/*",
-    "../../tests/fixtures"
-  ],
   "scripts": {
     "dev": "cross-env NODE_ENV=development node scripts/dev.mjs",
     "prod": "cross-env NODE_ENV=production node scripts/dev.mjs",
     "generate-assets": "zx scripts/generate-assets.mjs",
+    "package": "electron-forge package",
     "make": "electron-forge make",
     "make-macos-arm64": "electron-forge make --platform=darwin --arch=arm64",
     "make-macos-x64": "electron-forge make --platform=darwin --arch=x64",
     "make-windows-x64": "electron-forge make --platform=win32 --arch=x64",
-    "build:octobase-node": "yarn workspace @affine/octobase-node build",
-    "postinstall": "ELECTRON_RUN_AS_NODE=1 electron scripts/update-electron-vendors.mjs"
+    "make-linux-x64": "electron-forge make --platform=linux --arch=x64"
   },
   "config": {
     "forge": "./forge.config.js"
   },
   "main": "./dist/layers/main/index.js",
   "devDependencies": {
-    "@affine/octobase-node": "workspace:*",
     "@electron-forge/cli": "^6.1.1",
     "@electron-forge/core": "^6.1.1",
     "@electron-forge/core-utils": "^6.1.1",
@@ -35,19 +29,23 @@
     "@electron-forge/maker-squirrel": "^6.1.1",
     "@electron-forge/maker-zip": "^6.1.1",
     "@electron-forge/shared-types": "^6.1.1",
-    "@electron/rebuild": "^3.2.10",
+    "@electron/rebuild": "^3.2.12",
     "@electron/remote": "2.0.9",
+    "@types/fs-extra": "^11.0.1",
+    "cross-env": "7.0.3",
     "dts-for-context-bridge": "^0.7.1",
-    "electron": "24.0.0",
-    "esbuild": "^0.17.16",
+    "electron": "24.1.2",
+    "electron-squirrel-startup": "1.0.0",
+    "esbuild": "^0.17.17",
     "zx": "^7.2.1"
   },
   "dependencies": {
-    "cross-env": "7.0.3",
+    "electron-log": "^5.0.0-beta.22",
     "electron-window-state": "^5.0.3",
-    "firebase": "^9.18.0",
     "fs-extra": "^11.1.1",
-    "undici": "^5.21.2"
+    "sqlite3": "^5.1.6",
+    "undici": "^5.21.2",
+    "yjs": "^13.5.53"
   },
   "build": {
     "protocols": [
@@ -59,5 +57,8 @@
       }
     ]
   },
-  "packageManager": "yarn@3.5.0"
+  "stableVersion": "0.5.3",
+  "installConfig": {
+    "hoistingLimits": "workspaces"
+  }
 }

apps/electron/scripts/common.mjs

@@ -1,13 +1,4 @@
-import fs from 'node:fs';
-import path from 'node:path';
-import * as url from 'node:url';
-const __dirname = url.fileURLToPath(new URL('.', import.meta.url));
-const { node } = JSON.parse(
-  fs.readFileSync(
-    path.join(__dirname, '../electron-vendors.autogen.json'),
-    'utf-8'
-  )
-);
+const NODE_MAJOR_VERSION = 18;
 
 const nativeNodeModulesPlugin = {
   name: 'native-node-modules',
@@ -35,9 +26,9 @@ export default () => {
       entryPoints: ['layers/main/src/index.ts'],
       outdir: 'dist/layers/main',
       bundle: true,
-      target: `node${node}`,
+      target: `node${NODE_MAJOR_VERSION}`,
       platform: 'node',
-      external: ['electron'],
+      external: ['electron', 'sqlite3'],
       plugins: [nativeNodeModulesPlugin],
       define: define,
     },
@@ -45,7 +36,7 @@ export default () => {
       entryPoints: ['layers/preload/src/index.ts'],
       outdir: 'dist/layers/preload',
       bundle: true,
-      target: `node${node}`,
+      target: `node${NODE_MAJOR_VERSION}`,
       platform: 'node',
       external: ['electron'],
       define: define,

apps/electron/scripts/generate-assets.mjs

@@ -29,49 +29,48 @@ console.log('build with following dir', {
 await cleanup();
 echo('Clean up done');
 
-// step 1: build web (nextjs) dist
+if (process.platform === 'win32') {
+  $.shell = 'powershell.exe';
+  $.prefix = '';
+}
+
 cd(repoRootDir);
-await $`yarn add`;
-await $`yarn build`;
-await $`yarn export`;
 
-// step 1.5: amend sourceMappingURL to allow debugging in devtools
-await glob('**/*.{js,css}', { cwd: affineWebOutDir }).then(files => {
-  return files.map(async file => {
-    const dir = path.dirname(file);
-    const fullpath = path.join(affineWebOutDir, file);
-    let content = await fs.readFile(fullpath, 'utf-8');
-    // replace # sourceMappingURL=76-6370cd185962bc89.js.map
-    // to      # sourceMappingURL=assets://./{dir}/76-6370cd185962bc89.js.map
-    content = content.replace(/# sourceMappingURL=(.*)\.map/g, (_, p1) => {
-      return `# sourceMappingURL=assets://./${dir}/${p1}.map`;
-    });
-    await fs.writeFile(fullpath, content);
-  });
-});
-
-await fs.move(affineWebOutDir, publicAffineOutDir, { overwrite: true });
-
-// step 2: build electron resources
+// step 1: build electron resources
 await buildLayers();
 echo('Build layers done');
 
-// step 3: build octobase-node
-let buildOctobaseNode = 'yarn workspace @affine/octobase-node build';
-if (process.env.TARGET) {
-  buildOctobaseNode += ` --target=${process.env.TARGET}`;
-}
-await $([buildOctobaseNode]);
+// step 2: build web (nextjs) dist
+if (!process.env.SKIP_WEB_BUILD) {
+  process.env.ENABLE_LEGACY_PROVIDER = 'false';
+  await $`yarn build`;
+  await $`yarn export`;
 
-// step 4: copy octobase-node to electron dist
-await fs.ensureDir('./apps/electron/dist/layers/main/');
-await $`cp ./packages/octobase-node/octobase.*.node ./apps/electron/dist/layers/main/`;
+  // step 1.5: amend sourceMappingURL to allow debugging in devtools
+  await glob('**/*.{js,css}', { cwd: affineWebOutDir }).then(files => {
+    return files.map(async file => {
+      const dir = path.dirname(file);
+      const fullpath = path.join(affineWebOutDir, file);
+      let content = await fs.readFile(fullpath, 'utf-8');
+      // replace # sourceMappingURL=76-6370cd185962bc89.js.map
+      // to      # sourceMappingURL=assets://./{dir}/76-6370cd185962bc89.js.map
+      content = content.replace(/# sourceMappingURL=(.*)\.map/g, (_, p1) => {
+        return `# sourceMappingURL=assets://./${dir}/${p1}.map`;
+      });
+      await fs.writeFile(fullpath, content);
+    });
+  });
+
+  await fs.move(affineWebOutDir, publicAffineOutDir, { overwrite: true });
+}
 
 /// --------
 /// --------
 /// --------
 async function cleanup() {
-  await fs.emptyDir(publicAffineOutDir);
+  if (!process.env.SKIP_WEB_BUILD) {
+    await fs.emptyDir(publicAffineOutDir);
+  }
   await fs.emptyDir(path.join(electronRootDir, 'layers', 'main', 'dist'));
   await fs.emptyDir(path.join(electronRootDir, 'layers', 'preload', 'dist'));
   await fs.remove(path.join(electronRootDir, 'out'));

apps/electron/scripts/update-electron-vendors.mjs

@@ -1,17 +0,0 @@
-/**
- * This script should be run in electron context
- * @example
- *  ELECTRON_RUN_AS_NODE=1 electron scripts/update-electron-vendors.mjs
- */
-
-import { writeFileSync } from 'fs';
-
-const electronRelease = process.versions;
-
-const node = electronRelease.node.split('.')[0];
-const chrome = electronRelease.v8.split('.').splice(0, 2).join('');
-
-writeFileSync(
-  './electron-vendors.autogen.json',
-  JSON.stringify({ chrome, node })
-);

apps/server/.env.example

@@ -0,0 +1 @@
+DATABASE_URL="postgresql://affine@localhost:5432/affine"

apps/server/.gitignore

@@ -0,0 +1,2 @@
+.env
+src/schema.gql

apps/server/migrations/20230418212743_init/migration.sql

@@ -0,0 +1,67 @@
+-- CreateTable
+CREATE TABLE "google_users" (
+    "id" VARCHAR NOT NULL,
+    "user_id" VARCHAR NOT NULL,
+    "google_id" VARCHAR NOT NULL,
+
+    CONSTRAINT "google_users_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "permissions" (
+    "id" VARCHAR NOT NULL,
+    "workspace_id" VARCHAR NOT NULL,
+    "user_id" VARCHAR,
+    "user_email" TEXT,
+    "type" SMALLINT NOT NULL,
+    "accepted" BOOLEAN NOT NULL DEFAULT false,
+    "created_at" TIMESTAMPTZ(6) DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "permissions_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "seaql_migrations" (
+    "version" VARCHAR NOT NULL,
+    "applied_at" BIGINT NOT NULL,
+
+    CONSTRAINT "seaql_migrations_pkey" PRIMARY KEY ("version")
+);
+
+-- CreateTable
+CREATE TABLE "users" (
+    "id" VARCHAR NOT NULL,
+    "name" VARCHAR NOT NULL,
+    "email" VARCHAR NOT NULL,
+    "avatar_url" VARCHAR,
+    "token_nonce" SMALLINT DEFAULT 0,
+    "password" VARCHAR,
+    "created_at" TIMESTAMPTZ(6) DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "users_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "workspaces" (
+    "id" VARCHAR NOT NULL,
+    "public" BOOLEAN NOT NULL,
+    "type" SMALLINT NOT NULL,
+    "created_at" TIMESTAMPTZ(6) DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "workspaces_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "google_users_google_id_key" ON "google_users"("google_id");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "users_email_key" ON "users"("email");
+
+-- AddForeignKey
+ALTER TABLE "google_users" ADD CONSTRAINT "google_users_user_id_fkey" FOREIGN KEY ("user_id") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "permissions" ADD CONSTRAINT "permissions_user_id_fkey" FOREIGN KEY ("user_id") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "permissions" ADD CONSTRAINT "permissions_workspace_id_fkey" FOREIGN KEY ("workspace_id") REFERENCES "workspaces"("id") ON DELETE CASCADE ON UPDATE CASCADE;

apps/server/migrations/migration_lock.toml

@@ -0,0 +1,3 @@
+# Please do not edit this file manually
+# It should be added in your version-control system (i.e. Git)
+provider = "postgresql"

apps/server/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "@affine/server",
+  "private": true,
+  "version": "0.5.4-beta.0",
+  "description": "Affine Node.js server",
+  "type": "module",
+  "bin": {
+    "run-test": "./scripts/run-test.ts"
+  },
+  "scripts": {
+    "dev": "nodemon ./src/index.ts",
+    "test": "yarn exec ts-node-esm ./scripts/run-test.ts all",
+    "test:coverage": "c8 yarn exec ts-node-esm ./scripts/run-test.ts all"
+  },
+  "dependencies": {
+    "@apollo/server": "^4.6.0",
+    "@nestjs/apollo": "^11.0.5",
+    "@nestjs/common": "^9.4.0",
+    "@nestjs/core": "^9.4.0",
+    "@nestjs/graphql": "^11.0.5",
+    "@nestjs/platform-express": "^9.4.0",
+    "@prisma/client": "^4.12.0",
+    "dotenv": "^16.0.3",
+    "graphql": "^16.6.0",
+    "graphql-type-json": "^0.3.2",
+    "lodash-es": "^4.17.21",
+    "prisma": "^4.12.0",
+    "reflect-metadata": "^0.1.13",
+    "rxjs": "^7.8.0"
+  },
+  "devDependencies": {
+    "@nestjs/testing": "^9.4.0",
+    "@types/lodash-es": "^4.14.194",
+    "@types/node": "^18.15.11",
+    "@types/supertest": "^2.0.12",
+    "c8": "^7.13.0",
+    "nodemon": "^2.0.22",
+    "supertest": "^6.3.3",
+    "ts-node": "^10.9.1",
+    "typescript": "^5.0.4",
+    "vitest": "^0.30.1"
+  },
+  "nodemonConfig": {
+    "exec": "node",
+    "script": "./src/index.ts",
+    "nodeArgs": [
+      "--loader",
+      "ts-node/esm.mjs",
+      "--es-module-specifier-resolution",
+      "node"
+    ],
+    "ignore": [
+      "**/__tests__/**",
+      "**/dist/**"
+    ],
+    "env": {
+      "TS_NODE_PROJECT": "./tsconfig.json",
+      "NODE_ENV": "development",
+      "DEBUG": "affine:*",
+      "FORCE_COLOR": true,
+      "DEBUG_COLORS": true
+    },
+    "delay": 1000
+  },
+  "c8": {
+    "reporter": [
+      "text",
+      "lcov"
+    ],
+    "report-dir": ".coverage",
+    "exclude": [
+      "scripts",
+      "node_modules",
+      "**/*.spec.ts"
+    ]
+  },
+  "stableVersion": "0.5.3"
+}

apps/server/schema.prisma

@@ -0,0 +1,52 @@
+datasource db {
+  provider = "postgresql"
+  url      = env("DATABASE_URL")
+}
+
+generator client {
+  provider = "prisma-client-js"
+}
+
+model google_users {
+  id        String @id @db.VarChar
+  user_id   String @db.VarChar
+  google_id String @unique @db.VarChar
+  users     users  @relation(fields: [user_id], references: [id], onDelete: Cascade)
+}
+
+model permissions {
+  id           String     @id @db.VarChar
+  workspace_id String     @db.VarChar
+  user_id      String?    @db.VarChar
+  user_email   String?
+  type         Int        @db.SmallInt
+  accepted     Boolean    @default(false)
+  created_at   DateTime?  @default(now()) @db.Timestamptz(6)
+  users        users?     @relation(fields: [user_id], references: [id], onDelete: Cascade)
+  workspaces   workspaces @relation(fields: [workspace_id], references: [id], onDelete: Cascade)
+}
+
+model seaql_migrations {
+  version    String @id @db.VarChar
+  applied_at BigInt
+}
+
+model users {
+  id           String         @id @db.VarChar
+  name         String         @db.VarChar
+  email        String         @unique @db.VarChar
+  avatar_url   String?        @db.VarChar
+  token_nonce  Int?           @default(0) @db.SmallInt
+  password     String?        @db.VarChar
+  created_at   DateTime?      @default(now()) @db.Timestamptz(6)
+  google_users google_users[]
+  permissions  permissions[]
+}
+
+model workspaces {
+  id          String        @id @db.VarChar
+  public      Boolean
+  type        Int           @db.SmallInt
+  created_at  DateTime?     @default(now()) @db.Timestamptz(6)
+  permissions permissions[]
+}

apps/server/scripts/init-db.ts

@@ -0,0 +1,24 @@
+import { randomUUID } from 'node:crypto';
+
+import userA from '@affine-test/fixtures/userA.json' assert { type: 'json' };
+import { PrismaClient } from '@prisma/client';
+const prisma = new PrismaClient();
+
+async function main() {
+  await prisma.users.create({
+    data: {
+      id: randomUUID(),
+      ...userA,
+    },
+  });
+}
+
+main()
+  .then(async () => {
+    await prisma.$disconnect();
+  })
+  .catch(async e => {
+    console.error(e);
+    await prisma.$disconnect();
+    process.exit(1);
+  });

apps/server/scripts/run-test.ts

@@ -0,0 +1,56 @@
+#!/usr/bin/env ts-node-esm
+import { resolve } from 'node:path';
+
+import * as p from '@clack/prompts';
+import { spawn } from 'child_process';
+import { readdir } from 'fs/promises';
+import * as process from 'process';
+import { fileURLToPath } from 'url';
+
+import pkg from '../package.json' assert { type: 'json' };
+const root = fileURLToPath(new URL('..', import.meta.url));
+const testDir = resolve(root, 'src', 'tests');
+const files = await readdir(testDir);
+
+const args = [...pkg.nodemonConfig.nodeArgs, '--test'];
+
+const env = {
+  PATH: process.env.PATH,
+  NODE_ENV: 'test',
+  DATABASE_URL: process.env.DATABASE_URL,
+};
+
+if (process.argv[2] === 'all') {
+  const cp = spawn('node', [...args, resolve(testDir, '*')], {
+    cwd: root,
+    env,
+    stdio: 'inherit',
+    shell: true,
+  });
+  cp.on('exit', code => {
+    process.exit(code ?? 0);
+  });
+} else {
+  const result = await p.group({
+    file: () =>
+      p.select({
+        message: 'Select a file to run',
+        options: files.map(file => ({
+          label: file,
+          value: file as any,
+        })),
+      }),
+  });
+
+  const target = resolve(testDir, result.file);
+
+  const cp = spawn('node', [...args, target], {
+    cwd: root,
+    env,
+    stdio: 'inherit',
+    shell: true,
+  });
+  cp.on('exit', code => {
+    process.exit(code ?? 0);
+  });
+}

apps/server/src/app.ts

@@ -0,0 +1,16 @@
+import { Module } from '@nestjs/common';
+
+import { ConfigModule } from './config';
+import { GqlModule } from './graphql.module';
+import { BusinessModules } from './modules';
+import { PrismaModule } from './prisma';
+
+@Module({
+  imports: [
+    PrismaModule,
+    GqlModule,
+    ConfigModule.forRoot(),
+    ...BusinessModules,
+  ],
+})
+export class AppModule {}

apps/server/src/config/def.ts

@@ -0,0 +1,202 @@
+import type { ApolloDriverConfig } from '@nestjs/apollo';
+
+import type { LeafPaths } from '../utils/types';
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace globalThis {
+    // eslint-disable-next-line no-var
+    var AFFiNE: AFFiNEConfig;
+  }
+}
+
+export const enum ExternalAccount {
+  github = 'github',
+  google = 'google',
+  firebase = 'firebase',
+}
+
+type EnvConfigType = 'string' | 'int' | 'float' | 'boolean';
+type ConfigPaths = LeafPaths<
+  Omit<
+    AFFiNEConfig,
+    | 'ENV_MAP'
+    | 'version'
+    | 'baseUrl'
+    | 'origin'
+    | 'prod'
+    | 'dev'
+    | 'test'
+    | 'deploy'
+  >,
+  '',
+  '....'
+>;
+/**
+ * parse number value from environment variables
+ */
+function int(value: string) {
+  const n = parseInt(value);
+  return Number.isNaN(n) ? undefined : n;
+}
+
+function float(value: string) {
+  const n = parseFloat(value);
+  return Number.isNaN(n) ? undefined : n;
+}
+
+function boolean(value: string) {
+  return value === '1' || value.toLowerCase() === 'true';
+}
+
+export function parseEnvValue(value: string | undefined, type?: EnvConfigType) {
+  if (typeof value === 'undefined') {
+    return;
+  }
+
+  return type === 'int'
+    ? int(value)
+    : type === 'float'
+    ? float(value)
+    : type === 'boolean'
+    ? boolean(value)
+    : value;
+}
+
+/**
+ * All Configurations that would control AFFiNE server behaviors
+ *
+ */
+export interface AFFiNEConfig {
+  ENV_MAP: Record<string, ConfigPaths | [ConfigPaths, EnvConfigType?]>;
+  /**
+   * System version
+   */
+  readonly version: string;
+  /**
+   * alias to `process.env.NODE_ENV`
+   *
+   * @default 'production'
+   * @env NODE_ENV
+   */
+  readonly env: string;
+  /**
+   * fast environment judge
+   */
+  get prod(): boolean;
+  get dev(): boolean;
+  get test(): boolean;
+  get deploy(): boolean;
+
+  /**
+   * Whether the server is hosted on a ssl enabled domain
+   */
+  https: boolean;
+  /**
+   * where the server get deployed.
+   *
+   * @default 'localhost'
+   * @env AFFINE_SERVER_HOST
+   */
+  host: string;
+  /**
+   * which port the server will listen on
+   *
+   * @default 3000
+   * @env AFFINE_SERVER_PORT
+   */
+  port: number;
+  /**
+   * subpath where the server get deployed if there is.
+   *
+   * @default '' // empty string
+   * @env AFFINE_SERVER_SUB_PATH
+   */
+  path: string;
+
+  /**
+   * Readonly property `baseUrl` is the full url of the server consists of `https://HOST:PORT/PATH`.
+   *
+   * if `host` is not `localhost` then the port will be ignored
+   */
+  get baseUrl(): string;
+
+  /**
+   * Readonly property `origin` is domain origin in the form of `https://HOST:PORT` without subpath.
+   *
+   * if `host` is not `localhost` then the port will be ignored
+   */
+  get origin(): string;
+
+  /**
+   * the apollo driver config
+   */
+  graphql: ApolloDriverConfig;
+  /**
+   * object storage Config
+   *
+   * all artifacts and logs will be stored on instance disk,
+   * and can not shared between instances if not configured
+   */
+  objectStorage: {
+    /**
+     * whether use remote object storage
+     */
+    enable: boolean;
+    /**
+     * used to store all uploaded builds and analysis reports
+     *
+     * the concrete type definition is not given here because different storage providers introduce
+     * significant differences in configuration
+     *
+     * @example
+     * {
+     *   provider: 'aws',
+     *   region: 'eu-west-1',
+     *   aws_access_key_id: '',
+     *   aws_secret_access_key: '',
+     *   // other aws storage config...
+     * }
+     */
+    config: Record<string, string>;
+  };
+
+  /**
+   * authentication config
+   */
+  auth: {
+    /**
+     * whether allow user to signup with email directly
+     */
+    enableSignup: boolean;
+    /**
+     * whether allow user to signup by oauth providers
+     */
+    enableOauth: boolean;
+    /**
+     * all available oauth providers
+     */
+    oauthProviders: Partial<
+      Record<
+        ExternalAccount,
+        {
+          clientId: string;
+          clientSecret: string;
+          /**
+           * uri to start oauth flow
+           */
+          authorizationUri?: string;
+          /**
+           * uri to authenticate `access_token` when user is redirected back from oauth provider with `code`
+           */
+          accessTokenUri?: string;
+          /**
+           * uri to get user info with authenticated `access_token`
+           */
+          userInfoUri?: string;
+          args?: Record<string, any>;
+        }
+      >
+    >;
+  };
+}

apps/server/src/config/default.ts

@@ -0,0 +1,51 @@
+import pkg from '../../package.json' assert { type: 'json' };
+import type { AFFiNEConfig } from './def';
+
+export const getDefaultAFFiNEConfig: () => AFFiNEConfig = () => ({
+  version: pkg.version,
+  ENV_MAP: {},
+  env: process.env.NODE_ENV ?? 'development',
+  get prod() {
+    return this.env === 'production';
+  },
+  get dev() {
+    return this.env === 'development';
+  },
+  get test() {
+    return this.env === 'test';
+  },
+  get deploy() {
+    return !this.dev && !this.test;
+  },
+  https: false,
+  host: 'localhost',
+  port: 3010,
+  path: '',
+  get origin() {
+    return this.dev
+      ? 'http://localhost:8080'
+      : `${this.https ? 'https' : 'http'}://${this.host}${
+          this.host === 'localhost' ? `:${this.port}` : ''
+        }`;
+  },
+  get baseUrl() {
+    return `${this.origin}${this.path}`;
+  },
+  graphql: {
+    buildSchemaOptions: {
+      numberScalarMode: 'integer',
+    },
+    introspection: true,
+    playground: true,
+    debug: true,
+  },
+  auth: {
+    enableSignup: true,
+    enableOauth: false,
+    oauthProviders: {},
+  },
+  objectStorage: {
+    enable: false,
+    config: {},
+  },
+});

apps/server/src/config/env.ts

@@ -0,0 +1,15 @@
+import { set } from 'lodash-es';
+
+import { parseEnvValue } from './def';
+
+for (const env in AFFiNE.ENV_MAP) {
+  const config = AFFiNE.ENV_MAP[env];
+  const [path, value] =
+    typeof config === 'string'
+      ? [config, process.env[env]]
+      : [config[0], parseEnvValue(process.env[env], config[1])];
+
+  if (typeof value !== 'undefined') {
+    set(globalThis.AFFiNE, path, process.env[env]);
+  }
+}

apps/server/src/config/index.ts

@@ -0,0 +1,69 @@
+import type { DynamicModule, FactoryProvider } from '@nestjs/common';
+import { merge } from 'lodash-es';
+
+import type { DeepPartial } from '../utils/types';
+import type { AFFiNEConfig } from './def';
+
+type ConstructorOf<T> = {
+  new (): T;
+};
+
+function ApplyType<T>(): ConstructorOf<T> {
+  // @ts-expect-error used to fake the type of config
+  return class Inner implements T {
+    constructor() {}
+  };
+}
+
+/**
+ * usage:
+ * ```
+ * import { Config } from '@affine/server'
+ *
+ * class TestConfig {
+ *   constructor(private readonly config: Config) {}
+ *   test() {
+ *     return this.config.env
+ *   }
+ * }
+ * ```
+ */
+export class Config extends ApplyType<AFFiNEConfig>() {}
+
+function createConfigProvider(
+  override?: DeepPartial<Config>
+): FactoryProvider<Config> {
+  return {
+    provide: Config,
+    useFactory: () => {
+      const wrapper = new Config();
+      const config = merge({}, AFFiNE, override);
+
+      const proxy: Config = new Proxy(wrapper, {
+        get: (_target, property: keyof Config) => {
+          const desc = Object.getOwnPropertyDescriptor(AFFiNE, property);
+          if (desc?.get) {
+            return desc.get.call(proxy);
+          }
+          return config[property];
+        },
+      });
+      return proxy;
+    },
+  };
+}
+
+export class ConfigModule {
+  static forRoot = (override?: DeepPartial<Config>): DynamicModule => {
+    const provider = createConfigProvider(override);
+
+    return {
+      global: true,
+      module: ConfigModule,
+      providers: [provider],
+      exports: [provider],
+    };
+  };
+}
+
+export { AFFiNEConfig } from './def';

apps/server/src/graphql.module.ts

@@ -0,0 +1,30 @@
+import type { ApolloDriverConfig } from '@nestjs/apollo';
+import { ApolloDriver } from '@nestjs/apollo';
+import { Global, Module } from '@nestjs/common';
+import { GraphQLModule } from '@nestjs/graphql';
+import { join } from 'path';
+import { fileURLToPath } from 'url';
+
+import { Config } from './config';
+
+@Global()
+@Module({
+  imports: [
+    GraphQLModule.forRootAsync<ApolloDriverConfig>({
+      driver: ApolloDriver,
+      useFactory: (config: Config) => {
+        return {
+          ...config.graphql,
+          path: `${config.path}/graphql`,
+          autoSchemaFile: join(
+            fileURLToPath(import.meta.url),
+            '..',
+            'schema.gql'
+          ),
+        };
+      },
+      inject: [Config],
+    }),
+  ],
+})
+export class GqlModule {}

apps/server/src/index.ts

@@ -0,0 +1,20 @@
+import './prelude';
+
+import { NestFactory } from '@nestjs/core';
+import type { NestExpressApplication } from '@nestjs/platform-express';
+
+import { AppModule } from './app';
+
+const app = await NestFactory.create<NestExpressApplication>(AppModule, {
+  cors: {
+    origin:
+      process.env.AFFINE_ENV === 'preview'
+        ? ['https://affine-preview.vercel.app']
+        : ['http://localhost:8080'],
+    methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
+    allowedHeaders: '*',
+  },
+  bodyParser: true,
+});
+
+await app.listen(process.env.PORT ?? 3010);

apps/server/src/modules/index.ts

@@ -0,0 +1,4 @@
+import { UsersModule } from './users';
+import { WorkspaceModule } from './workspaces';
+
+export const BusinessModules = [WorkspaceModule, UsersModule];

apps/server/src/modules/users/index.ts

@@ -0,0 +1,8 @@
+import { Module } from '@nestjs/common';
+
+import { UserResolver } from './resolver';
+
+@Module({
+  providers: [UserResolver],
+})
+export class UsersModule {}

apps/server/src/modules/users/resolver.ts

@@ -0,0 +1,37 @@
+import { Args, Field, ID, ObjectType, Query, Resolver } from '@nestjs/graphql';
+import type { users } from '@prisma/client';
+
+import { PrismaService } from '../../prisma/service';
+
+@ObjectType()
+export class User implements users {
+  @Field(() => ID)
+  id!: string;
+  @Field({ description: 'User name' })
+  name!: string;
+  @Field({ description: 'User email' })
+  email!: string;
+  @Field({ description: 'User password', nullable: true })
+  password!: string;
+  @Field({ description: 'User avatar url', nullable: true })
+  avatar_url!: string;
+  @Field({ description: 'User token nonce', nullable: true })
+  token_nonce!: number;
+  @Field({ description: 'User created date', nullable: true })
+  created_at!: Date;
+}
+
+@Resolver(() => User)
+export class UserResolver {
+  constructor(private readonly prisma: PrismaService) {}
+
+  @Query(() => User, {
+    name: 'user',
+    description: 'Get user by email',
+  })
+  async user(@Args('email') email: string) {
+    return this.prisma.users.findUnique({
+      where: { email },
+    });
+  }
+}

apps/server/src/modules/workspaces/index.ts

@@ -0,0 +1,8 @@
+import { Module } from '@nestjs/common';
+
+import { WorkspaceResolver } from './resolver';
+
+@Module({
+  providers: [WorkspaceResolver],
+})
+export class WorkspaceModule {}

apps/server/src/modules/workspaces/resolver.ts

@@ -0,0 +1,85 @@
+import { randomUUID } from 'node:crypto';
+
+import {
+  Args,
+  Field,
+  ID,
+  Mutation,
+  ObjectType,
+  Query,
+  registerEnumType,
+  Resolver,
+} from '@nestjs/graphql';
+import type { workspaces } from '@prisma/client';
+
+import { PrismaService } from '../../prisma/service';
+
+export enum WorkspaceType {
+  Private = 0,
+  Normal = 1,
+}
+
+registerEnumType(WorkspaceType, {
+  name: 'WorkspaceType',
+  description: 'Workspace type',
+  valuesMap: {
+    Normal: {
+      description: 'Normal workspace',
+    },
+    Private: {
+      description: 'Private workspace',
+    },
+  },
+});
+
+@ObjectType()
+export class Workspace implements workspaces {
+  @Field(() => ID)
+  id!: string;
+  @Field({ description: 'is Public workspace' })
+  public!: boolean;
+  @Field(() => WorkspaceType, { description: 'Workspace type' })
+  type!: WorkspaceType;
+  @Field({ description: 'Workspace created date' })
+  created_at!: Date;
+}
+
+@Resolver(() => Workspace)
+export class WorkspaceResolver {
+  constructor(private readonly prisma: PrismaService) {}
+
+  // debug only query should be removed
+  @Query(() => [Workspace], {
+    name: 'workspaces',
+    description: 'Get all workspaces',
+  })
+  async workspaces() {
+    return this.prisma.workspaces.findMany();
+  }
+
+  @Query(() => Workspace, {
+    name: 'workspace',
+    description: 'Get workspace by id',
+  })
+  async workspace(@Args('id') id: string) {
+    return this.prisma.workspaces.findUnique({
+      where: { id },
+    });
+  }
+
+  // create workspace
+  @Mutation(() => Workspace, {
+    name: 'createWorkspace',
+    description: 'Create workspace',
+  })
+  async createWorkspace() {
+    return this.prisma.workspaces.create({
+      data: {
+        id: randomUUID(),
+        type: WorkspaceType.Private,
+        public: false,
+        created_at: new Date(),
+      },
+    });
+  }
+}

apps/server/src/prelude.ts

@@ -0,0 +1,6 @@
+import 'reflect-metadata';
+import 'dotenv/config';
+
+import { getDefaultAFFiNEConfig } from './config/default';
+
+globalThis.AFFiNE = getDefaultAFFiNEConfig();

apps/server/src/prisma/index.ts

@@ -0,0 +1,10 @@
+import { Global, Module } from '@nestjs/common';
+
+import { PrismaService } from './service';
+
+@Global()
+@Module({
+  providers: [PrismaService],
+  exports: [PrismaService],
+})
+export class PrismaModule {}

apps/server/src/prisma/service.ts

@@ -0,0 +1,16 @@
+import type { INestApplication, OnModuleInit } from '@nestjs/common';
+import { Injectable } from '@nestjs/common';
+import { PrismaClient } from '@prisma/client';
+
+@Injectable()
+export class PrismaService extends PrismaClient implements OnModuleInit {
+  async onModuleInit() {
+    await this.$connect();
+  }
+
+  async enableShutdownHooks(app: INestApplication) {
+    this.$on('beforeExit', async () => {
+      await app.close();
+    });
+  }
+}

apps/server/src/tests/app.e2e.ts

@@ -0,0 +1,100 @@
+import { equal, ok } from 'node:assert';
+import { afterEach, beforeEach, describe, test } from 'node:test';
+
+import { INestApplication } from '@nestjs/common';
+import { Test } from '@nestjs/testing';
+import request from 'supertest';
+
+import { AppModule } from '../app';
+import { getDefaultAFFiNEConfig } from '../config/default';
+
+const gql = '/graphql';
+
+globalThis.AFFiNE = getDefaultAFFiNEConfig();
+
+// please run `ts-node-esm ./scripts/init-db.ts` before running this test
+describe('AppModule', () => {
+  let app: INestApplication;
+
+  beforeEach(async () => {
+    const module = await Test.createTestingModule({
+      imports: [AppModule],
+    }).compile();
+    app = module.createNestApplication();
+    await app.init();
+  });
+
+  afterEach(async () => {
+    await app.close();
+  });
+
+  test('should init app', async () => {
+    ok(typeof app === 'object');
+    await request(app.getHttpServer())
+      .post(gql)
+      .send({
+        query: `
+    query {
+      error
+    }
+    `,
+      })
+      .expect(400);
+    await request(app.getHttpServer())
+      .post(gql)
+      .send({
+        query: `
+      mutation {
+        createWorkspace {
+          id
+          type
+          public
+          created_at
+        }
+      }
+    `,
+      })
+      .expect(200)
+      .expect(res => {
+        ok(
+          typeof res.body.data.createWorkspace === 'object',
+          'res.body.data.createWorkspace is not an object'
+        );
+        ok(
+          typeof res.body.data.createWorkspace.id === 'string',
+          'res.body.data.createWorkspace.id is not a string'
+        );
+        ok(
+          typeof res.body.data.createWorkspace.type === 'string',
+          'res.body.data.createWorkspace.type is not a string'
+        );
+        ok(
+          typeof res.body.data.createWorkspace.public === 'boolean',
+          'res.body.data.createWorkspace.public is not a boolean'
+        );
+        ok(
+          typeof res.body.data.createWorkspace.created_at === 'string',
+          'res.body.data.createWorkspace.created_at is not a string'
+        );
+      });
+  });
+
+  test('should find default user', async () => {
+    await request(app.getHttpServer())
+      .post(gql)
+      .send({
+        query: `
+      query {
+        user(email: "alex.yang@example.org") {
+          email
+          avatar_url
+        }
+      }
+    `,
+      })
+      .expect(200)
+      .expect(res => {
+        equal(res.body.data.user.email, 'alex.yang@example.org');
+      });
+  });
+});

apps/server/src/tests/config.spec.ts

@@ -0,0 +1,35 @@
+import { equal, ok } from 'node:assert';
+import { beforeEach, test } from 'node:test';
+
+import { Test } from '@nestjs/testing';
+
+import { Config, ConfigModule } from '../config';
+import { getDefaultAFFiNEConfig } from '../config/default';
+
+globalThis.AFFiNE = getDefaultAFFiNEConfig();
+
+let config: Config;
+beforeEach(async () => {
+  const module = await Test.createTestingModule({
+    imports: [ConfigModule.forRoot()],
+  }).compile();
+  config = module.get(Config);
+});
+
+test('should be able to get config', t => {
+  ok(typeof config.host === 'string');
+  equal(config.env, 'test');
+});
+
+test('should be able to override config', async t => {
+  const module = await Test.createTestingModule({
+    imports: [
+      ConfigModule.forRoot({
+        host: 'testing',
+      }),
+    ],
+  }).compile();
+  const config = module.get(Config);
+
+  ok(config.host, 'testing');
+});

apps/server/src/utils/types.ts

@@ -0,0 +1,42 @@
+export type DeepPartial<T> = T extends Array<infer U>
+  ? DeepPartial<U>[]
+  : T extends ReadonlyArray<infer U>
+  ? ReadonlyArray<DeepPartial<U>>
+  : T extends object
+  ? {
+      [K in keyof T]?: DeepPartial<T[K]>;
+    }
+  : T;
+
+type Join<Prefix, Suffixes> = Prefix extends string | number
+  ? Suffixes extends string | number
+    ? Prefix extends ''
+      ? Suffixes
+      : `${Prefix}.${Suffixes}`
+    : never
+  : never;
+
+export type PrimitiveType =
+  | string
+  | number
+  | boolean
+  | symbol
+  | null
+  | undefined;
+
+export type LeafPaths<
+  T,
+  Path extends string = '',
+  MaxDepth extends string = '...',
+  Depth extends string = ''
+> = Depth extends MaxDepth
+  ? never
+  : T extends Record<string | number, any>
+  ? {
+      [K in keyof T]-?: K extends string | number
+        ? T[K] extends PrimitiveType
+          ? K
+          : Join<K, LeafPaths<T[K], Path, MaxDepth, `${Depth}.`>>
+        : never;
+    }[keyof T]
+  : never;

apps/server/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "composite": true,
+    "target": "ESNext",
+    "module": "ESNext",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "bundler",
+    "isolatedModules": false,
+    "resolveJsonModule": true,
+    "types": ["node"],
+    "outDir": "dist",
+    "noEmit": false
+  },
+  "include": ["src", "package.json"],
+  "exclude": ["dist", "node_modules"],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ],
+  "ts-node": {
+    "esm": true,
+    "experimentalSpecifierResolution": "node"
+  }
+}

apps/server/tsconfig.node.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "target": "ESNext",
+    "module": "ESNext",
+    "resolveJsonModule": true,
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["./scripts", "package.json"]
+}

apps/web/.env.local.template

@@ -17,6 +17,7 @@ EXPOSE_INTERNAL=1
 ENABLE_DEBUG_PAGE=
 ENABLE_SUBPAGE=
 ENABLE_CHANGELOG=1
+ENABLE_LEGACY_PROVIDER=true
 
 # Sentry
 SENTRY_AUTH_TOKEN=

apps/web/README.md

@@ -20,10 +20,7 @@ For more information on Next.js, take a look at the [Next.js Documentation](http
 
 `preset.config.mjs` contains the build presets for the application. The presets are used to configure the build process for different environments. The presets are:
 
-- `enableIndexedDBProvider`: Enables the IndexedDB provider for the application. This is used to store data in the browser.
 - `enableBroadCastChannelProvider`: Enables the Broadcast Channel provider for the application. This is used to communicate between local browser tabs.
-- `prefetchWorkspace`: **deprecated**
-- `exposeInternal`: Exposes internal variables into `globalThis` for debugging purposes.
 - `enableDebugPage`: Enables the debug page for the application. This is used for debugging purposes.
 
 ## BlockSuite Integration

apps/web/next.config.mjs

@@ -22,6 +22,10 @@ if (enableDebugLocal) {
   console.info('Debugging local blocksuite');
 }
 
+if (process.env.COVERAGE === 'true') {
+  console.info('Enable coverage report');
+}
+
 const profileTarget = {
   ac: '100.85.73.88:12001',
   dev: '100.84.105.99:11001',
@@ -74,6 +78,7 @@ const nextConfig = {
   },
   reactStrictMode: true,
   transpilePackages: [
+    'jotai-devtools',
     '@affine/component',
     '@affine/i18n',
     '@affine/debug',

apps/web/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@affine/web",
   "private": true,
+  "version": "0.5.4-beta.0",
   "scripts": {
     "dev": "next dev",
     "build": "next build",
@@ -17,11 +18,11 @@
     "@affine/jotai": "workspace:*",
     "@affine/templates": "workspace:*",
     "@affine/workspace": "workspace:*",
-    "@blocksuite/blocks": "0.0.0-20230413112150-e058f87e-nightly",
-    "@blocksuite/editor": "0.0.0-20230413112150-e058f87e-nightly",
-    "@blocksuite/global": "0.0.0-20230413112150-e058f87e-nightly",
+    "@blocksuite/blocks": "0.0.0-20230420210727-85b7de79-nightly",
+    "@blocksuite/editor": "0.0.0-20230420210727-85b7de79-nightly",
+    "@blocksuite/global": "0.0.0-20230420210727-85b7de79-nightly",
     "@blocksuite/icons": "^2.1.10",
-    "@blocksuite/store": "0.0.0-20230413112150-e058f87e-nightly",
+    "@blocksuite/store": "0.0.0-20230420210727-85b7de79-nightly",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/sortable": "^7.0.2",
     "@emotion/cache": "^11.10.7",
@@ -29,12 +30,14 @@
     "@emotion/server": "^11.10.0",
     "@emotion/styled": "^11.10.6",
     "@mui/material": "^5.12.0",
-    "@sentry/nextjs": "^7.47.0",
+    "@react-hookz/web": "^23.0.0",
+    "@sentry/nextjs": "^7.48.0",
     "@toeverything/hooks": "workspace:*",
     "cmdk": "^0.2.0",
     "css-spring": "^4.1.0",
     "dayjs": "^1.11.7",
     "jotai": "^2.0.4",
+    "jotai-devtools": "^0.4.0",
     "lit": "^2.7.2",
     "lottie-web": "^5.11.0",
     "next-themes": "^0.2.1",
@@ -53,7 +56,7 @@
     "@sentry/webpack-plugin": "^1.20.0",
     "@swc-jotai/debug-label": "^0.0.9",
     "@swc-jotai/react-refresh": "^0.0.7",
-    "@types/react": "=18.0.31",
+    "@types/react": "^18.0.35",
     "@types/react-dom": "^18.0.11",
     "@types/webpack-env": "^1.18.0",
     "@vanilla-extract/css": "^1.11.0",
@@ -69,5 +72,6 @@
     "swc-plugin-coverage-instrument": "=0.0.14",
     "typescript": "^5.0.4",
     "webpack": "^5.79.0"
-  }
+  },
+  "stableVersion": "0.0.0"
 }

apps/web/preset.config.mjs

@@ -1,16 +1,14 @@
 import 'dotenv/config';
 
 const config = {
-  enableIndexedDBProvider: Boolean(process.env.ENABLE_IDB_PROVIDER ?? '1'),
+  enableLegacyCloud: process.env.ENABLE_LEGACY_PROVIDER
+    ? process.env.ENABLE_LEGACY_PROVIDER === 'true'
+    : true,
   enableBroadCastChannelProvider: Boolean(
     process.env.ENABLE_BC_PROVIDER ?? '1'
   ),
-  prefetchWorkspace: Boolean(process.env.PREFETCH_WORKSPACE ?? '1'),
-  exposeInternal: Boolean(process.env.EXPOSE_INTERNAL ?? '1'),
   enableDebugPage: Boolean(
     process.env.ENABLE_DEBUG_PAGE ?? process.env.NODE_ENV === 'development'
   ),
-  enableSubpage: Boolean(process.env.ENABLE_SUBPAGE ?? '1'),
-  enableChangeLog: Boolean(process.env.ENABLE_CHANGELOG ?? '1'),
 };
 export default config;

apps/web/src/atoms/index.ts

@@ -1,40 +1,84 @@
+import { DebugLogger } from '@affine/debug';
 import { atomWithSyncStorage } from '@affine/jotai';
-import { jotaiWorkspacesAtom } from '@affine/workspace/atom';
-import type { EditorContainer } from '@blocksuite/editor';
+import type { RootWorkspaceMetadata } from '@affine/workspace/atom';
+import {
+  rootCurrentEditorAtom,
+  rootCurrentPageIdAtom,
+  rootCurrentWorkspaceIdAtom,
+  rootWorkspacesMetadataAtom,
+} from '@affine/workspace/atom';
+import { WorkspaceFlavour } from '@affine/workspace/type';
 import type { Page } from '@blocksuite/store';
-import { assertExists } from '@blocksuite/store';
 import { atom } from 'jotai';
 
 import { WorkspacePlugins } from '../plugins';
-import type { AllWorkspace } from '../shared';
+
+const logger = new DebugLogger('web:atoms');
+
 // workspace necessary atoms
-export const currentWorkspaceIdAtom = atom<string | null>(null);
-export const currentPageIdAtom = atom<string | null>(null);
-export const currentEditorAtom = atom<Readonly<EditorContainer> | null>(null);
+/**
+ * @deprecated Use `rootCurrentWorkspaceIdAtom` directly instead.
+ */
+export const currentWorkspaceIdAtom = rootCurrentWorkspaceIdAtom;
+
+// todo(himself65): move this to the workspace package
+rootWorkspacesMetadataAtom.onMount = setAtom => {
+  function createFirst(): RootWorkspaceMetadata[] {
+    const Plugins = Object.values(WorkspacePlugins).sort(
+      (a, b) => a.loadPriority - b.loadPriority
+    );
+
+    return Plugins.flatMap(Plugin => {
+      return Plugin.Events['app:init']?.().map(
+        id =>
+          ({
+            id,
+            flavour: Plugin.flavour,
+          } satisfies RootWorkspaceMetadata)
+      );
+    }).filter((ids): ids is RootWorkspaceMetadata => !!ids);
+  }
+
+  setAtom(metadata => {
+    if (metadata.length === 0) {
+      const newMetadata = createFirst();
+      logger.info('create first workspace', newMetadata);
+      return newMetadata;
+    }
+    return metadata;
+  });
+
+  if (environment.isDesktop) {
+    window.apis.workspace.list().then(workspaceIDs => {
+      const newMetadata = workspaceIDs.map(w => ({
+        id: w,
+        flavour: WorkspaceFlavour.LOCAL,
+      }));
+      setAtom(metadata => {
+        return [
+          ...metadata,
+          ...newMetadata.filter(m => !metadata.find(m2 => m2.id === m.id)),
+        ];
+      });
+    });
+  }
+};
+
+/**
+ * @deprecated Use `rootCurrentPageIdAtom` directly instead.
+ */
+export const currentPageIdAtom = rootCurrentPageIdAtom;
+/**
+ * @deprecated Use `rootCurrentEditorAtom` directly instead.
+ */
+export const currentEditorAtom = rootCurrentEditorAtom;
 
 // modal atoms
 export const openWorkspacesModalAtom = atom(false);
 export const openCreateWorkspaceModalAtom = atom(false);
 export const openQuickSearchModalAtom = atom(false);
 
-export const workspacesAtom = atom<Promise<AllWorkspace[]>>(async get => {
-  const flavours: string[] = Object.values(WorkspacePlugins).map(
-    plugin => plugin.flavour
-  );
-  const jotaiWorkspaces = get(jotaiWorkspacesAtom).filter(workspace =>
-    flavours.includes(workspace.flavour)
-  );
-  const workspaces = await Promise.all(
-    jotaiWorkspaces.map(workspace => {
-      const plugin =
-        WorkspacePlugins[workspace.flavour as keyof typeof WorkspacePlugins];
-      assertExists(plugin);
-      const { CRUD } = plugin;
-      return CRUD.get(workspace.id);
-    })
-  );
-  return workspaces.filter(workspace => workspace !== null) as AllWorkspace[];
-});
+export { workspacesAtom } from './root';
 
 type View = { id: string; mode: 'page' | 'edgeless' };
 

apps/web/src/atoms/public-workspace/index.ts

@@ -1,4 +1,3 @@
-import { getLoginStorage } from '@affine/workspace/affine/login';
 import type { AffinePublicWorkspace } from '@affine/workspace/type';
 import { WorkspaceFlavour } from '@affine/workspace/type';
 import { createEmptyBlockSuiteWorkspace } from '@affine/workspace/utils';
@@ -9,13 +8,16 @@ import { affineApis } from '../../shared/apis';
 
 function createPublicWorkspace(
   workspaceId: string,
-  binary: ArrayBuffer
+  binary: ArrayBuffer,
+  singlePage = false
 ): AffinePublicWorkspace {
   const blockSuiteWorkspace = createEmptyBlockSuiteWorkspace(
     workspaceId,
-    (k: string) =>
-      // fixme: token could be expired
-      ({ api: `api/workspace`, token: getLoginStorage()?.token }[k])
+    WorkspaceFlavour.AFFINE,
+    {
+      workspaceApis: affineApis,
+      cachePrefix: WorkspaceFlavour.PUBLIC + (singlePage ? '-single-page' : ''),
+    }
   );
   BlockSuiteWorkspace.Y.applyUpdate(
     blockSuiteWorkspace.doc,
@@ -23,7 +25,7 @@ function createPublicWorkspace(
   );
   blockSuiteWorkspace.awarenessStore.setFlag('enable_block_hub', false);
   blockSuiteWorkspace.awarenessStore.setFlag('enable_set_remote_flag', false);
-  blockSuiteWorkspace.awarenessStore.setFlag('enable_database', true);
+  blockSuiteWorkspace.awarenessStore.setFlag('enable_database', false);
   blockSuiteWorkspace.awarenessStore.setFlag('enable_edgeless_toolbar', false);
   blockSuiteWorkspace.awarenessStore.setFlag('enable_slash_menu', false);
   blockSuiteWorkspace.awarenessStore.setFlag('enable_drag_handle', false);
@@ -49,7 +51,7 @@ export const publicPageBlockSuiteAtom = atom<Promise<AffinePublicWorkspace>>(
       workspaceId,
       pageId
     );
-    return createPublicWorkspace(workspaceId, binary);
+    return createPublicWorkspace(workspaceId, binary, true);
   }
 );
 export const publicWorkspaceAtom = atom<Promise<AffinePublicWorkspace>>(
@@ -59,6 +61,6 @@ export const publicWorkspaceAtom = atom<Promise<AffinePublicWorkspace>>(
       throw new Error('No workspace id');
     }
     const binary = await affineApis.downloadWorkspace(workspaceId, true);
-    return createPublicWorkspace(workspaceId, binary);
+    return createPublicWorkspace(workspaceId, binary, false);
   }
 );

apps/web/src/atoms/root.ts

@@ -0,0 +1,87 @@
+//#region async atoms that to load the real workspace data
+import { DebugLogger } from '@affine/debug';
+import { config } from '@affine/env';
+import {
+  rootCurrentWorkspaceIdAtom,
+  rootWorkspacesMetadataAtom,
+} from '@affine/workspace/atom';
+import { WorkspaceFlavour } from '@affine/workspace/type';
+import { assertExists } from '@blocksuite/store';
+import { atom } from 'jotai';
+
+import { WorkspacePlugins } from '../plugins';
+import type { AllWorkspace } from '../shared';
+
+const logger = new DebugLogger('web:atoms:root');
+
+/**
+ * Fetch all workspaces from the Plugin CRUD
+ */
+export const workspacesAtom = atom<Promise<AllWorkspace[]>>(async get => {
+  const flavours: string[] = Object.values(WorkspacePlugins).map(
+    plugin => plugin.flavour
+  );
+  const jotaiWorkspaces = get(rootWorkspacesMetadataAtom)
+    .filter(
+      workspace => flavours.includes(workspace.flavour)
+      // TODO: remove this when we remove the legacy cloud
+    )
+    .filter(workspace =>
+      !config.enableLegacyCloud
+        ? workspace.flavour !== WorkspaceFlavour.AFFINE
+        : true
+    );
+  const workspaces = await Promise.all(
+    jotaiWorkspaces.map(workspace => {
+      const plugin =
+        WorkspacePlugins[workspace.flavour as keyof typeof WorkspacePlugins];
+      assertExists(plugin);
+      const { CRUD } = plugin;
+      return CRUD.get(workspace.id);
+    })
+  );
+  logger.info('workspaces', workspaces);
+  workspaces.forEach(workspace => {
+    if (workspace === null) {
+      console.warn(
+        'workspace is null. this should not happen. If you see this error, please report it to the developer.'
+      );
+    }
+  });
+  return workspaces.filter(workspace => workspace !== null) as AllWorkspace[];
+});
+
+/**
+ * This will throw an error if the workspace is not found,
+ * should not be used on the root component,
+ * use `rootCurrentWorkspaceIdAtom` instead
+ */
+export const rootCurrentWorkspaceAtom = atom<Promise<AllWorkspace>>(
+  async get => {
+    const metadata = get(rootWorkspacesMetadataAtom);
+    const targetId = get(rootCurrentWorkspaceIdAtom);
+    if (targetId === null) {
+      throw new Error(
+        'current workspace id is null. this should not happen. If you see this error, please report it to the developer.'
+      );
+    }
+    const targetWorkspace = metadata.find(meta => meta.id === targetId);
+    if (!targetWorkspace) {
+      throw new Error(`cannot find the workspace with id ${targetId}.`);
+    }
+    const workspace = await WorkspacePlugins[targetWorkspace.flavour].CRUD.get(
+      targetWorkspace.id
+    );
+    if (!workspace) {
+      throw new Error(
+        `cannot find the workspace with id ${targetId} in the plugin ${targetWorkspace.flavour}.`
+      );
+    }
+    return workspace;
+  }
+);
+
+// Do not add `rootCurrentWorkspacePageAtom`, this is not needed.
+// It can be derived from `rootCurrentWorkspaceAtom` and `rootCurrentPageIdAtom`
+
+//#endregion

apps/web/src/blocksuite/index.ts

@@ -19,8 +19,7 @@ export const createAffineProviders = (
       createAffineWebSocketProvider(blockSuiteWorkspace),
       config.enableBroadCastChannelProvider &&
         createBroadCastChannelProvider(blockSuiteWorkspace),
-      config.enableIndexedDBProvider &&
-        createIndexedDBProvider(blockSuiteWorkspace),
+      createIndexedDBProvider(blockSuiteWorkspace),
     ] as any[]
   ).filter(v => Boolean(v));
 };

apps/web/src/components/__debug__/client/Editor.tsx

@@ -1,4 +1,4 @@
-'use client';
+import { WorkspaceFlavour } from '@affine/workspace/type';
 import { createEmptyBlockSuiteWorkspace } from '@affine/workspace/utils';
 import type { EditorContainer } from '@blocksuite/editor';
 import type { Page } from '@blocksuite/store';
@@ -10,8 +10,10 @@ import { BlockSuiteEditor } from '../../blocksuite/block-suite-editor';
 
 const blockSuiteWorkspace = createEmptyBlockSuiteWorkspace(
   'test',
-  _ => undefined,
-  Generator.AutoIncrement
+  WorkspaceFlavour.LOCAL,
+  {
+    idGenerator: Generator.AutoIncrement,
+  }
 );
 
 const page = blockSuiteWorkspace.createPage('page0');

apps/web/src/components/__tests__/PinBoard.spec.tsx

@@ -1,236 +0,0 @@
-/**
- * @vitest-environment happy-dom
- */
-import 'fake-indexeddb/auto';
-
-import type { PageMeta } from '@blocksuite/store';
-import matchers from '@testing-library/jest-dom/matchers';
-import type { RenderResult } from '@testing-library/react';
-import { render, renderHook } from '@testing-library/react';
-import { createStore, getDefaultStore, Provider } from 'jotai';
-import type { FC, PropsWithChildren } from 'react';
-import { beforeEach, describe, expect, test } from 'vitest';
-
-import { workspacesAtom } from '../../atoms';
-import {
-  currentWorkspaceAtom,
-  useCurrentWorkspace,
-} from '../../hooks/current/use-current-workspace';
-import { useWorkspacesHelper } from '../../hooks/use-workspaces';
-import { ThemeProvider } from '../../providers/ThemeProvider';
-import type { BlockSuiteWorkspace } from '../../shared';
-import type { PinboardProps } from '../pure/workspace-slider-bar/Pinboard';
-import Pinboard from '../pure/workspace-slider-bar/Pinboard';
-
-expect.extend(matchers);
-
-let store = getDefaultStore();
-beforeEach(async () => {
-  store = createStore();
-  await store.get(workspacesAtom);
-});
-
-const ProviderWrapper: FC<PropsWithChildren> = ({ children }) => {
-  return <Provider store={store}>{children}</Provider>;
-};
-
-const initPinBoard = async () => {
-  //  create one workspace with 2 root pages and 2 pinboard pages
-  //  - hasPinboardPage
-  //    - hasPinboardPage
-  //      - pinboard1
-  //      - pinboard2
-  //    - noPinboardPage
-
-  const mutationHook = renderHook(() => useWorkspacesHelper(), {
-    wrapper: ProviderWrapper,
-  });
-  const rootPageIds = ['hasPinboardPage', 'noPinboardPage'];
-  const pinboardPageIds = ['pinboard1', 'pinboard2'];
-  const id = await mutationHook.result.current.createLocalWorkspace('test0');
-  await store.get(workspacesAtom);
-  mutationHook.rerender();
-
-  await store.get(currentWorkspaceAtom);
-  const currentWorkspaceHook = renderHook(() => useCurrentWorkspace(), {
-    wrapper: ProviderWrapper,
-  });
-  currentWorkspaceHook.result.current[1](id);
-  const currentWorkspace = await store.get(currentWorkspaceAtom);
-  const blockSuiteWorkspace =
-    currentWorkspace?.blockSuiteWorkspace as BlockSuiteWorkspace;
-
-  // create root pinboard
-  mutationHook.result.current.createWorkspacePage(id, 'rootPinboard');
-  blockSuiteWorkspace.meta.setPageMeta('rootPinboard', {
-    isRootPinboard: true,
-    subpageIds: rootPageIds,
-  });
-  // create parent
-  rootPageIds.forEach(rootPageId => {
-    mutationHook.result.current.createWorkspacePage(id, rootPageId);
-    blockSuiteWorkspace.meta.setPageMeta(rootPageId, {
-      subpageIds: rootPageId === rootPageIds[0] ? pinboardPageIds : [],
-    });
-  });
-  // create children to firs parent
-  pinboardPageIds.forEach(pinboardId => {
-    mutationHook.result.current.createWorkspacePage(id, pinboardId);
-    blockSuiteWorkspace.meta.setPageMeta(pinboardId, {
-      title: pinboardId,
-    });
-  });
-
-  const App = (props: PinboardProps) => {
-    return (
-      <ThemeProvider>
-        <ProviderWrapper>
-          <Pinboard {...props} />
-        </ProviderWrapper>
-      </ThemeProvider>
-    );
-  };
-
-  const app = render(
-    <App
-      blockSuiteWorkspace={blockSuiteWorkspace as BlockSuiteWorkspace}
-      allMetas={blockSuiteWorkspace.meta.pageMetas as PageMeta[]}
-      openPage={() => {}}
-    />
-  );
-
-  return {
-    rootPageIds,
-    pinboardPageIds,
-    app,
-    blockSuiteWorkspace,
-  };
-};
-const openOperationMenu = async (app: RenderResult, pageId: string) => {
-  const rootPinboard = await app.findByTestId(`pinboard-${pageId}`);
-  const operationBtn = (await rootPinboard.querySelector(
-    '[data-testid="pinboard-operation-button"]'
-  )) as HTMLElement;
-  await operationBtn.click();
-  const menu = await app.findByTestId('pinboard-operation-menu');
-  expect(menu).toBeInTheDocument();
-};
-describe('PinBoard', () => {
-  test('add pinboard', async () => {
-    const { app, blockSuiteWorkspace, rootPageIds } = await initPinBoard();
-    const [hasChildrenPageId] = rootPageIds;
-    await openOperationMenu(app, hasChildrenPageId);
-
-    const addBtn = await app.findByTestId('pinboard-operation-add');
-    await addBtn.click();
-
-    const hasChildrenPageMeta =
-      blockSuiteWorkspace.meta.getPageMeta(hasChildrenPageId);
-
-    // Page meta have been added
-    expect(blockSuiteWorkspace.meta.pageMetas.length).toBe(6);
-    // New page meta is added in initial page meta
-
-    expect(hasChildrenPageMeta?.subpageIds.length).toBe(3);
-    app.unmount();
-  });
-
-  test('delete pinboard', async () => {
-    const {
-      app,
-      blockSuiteWorkspace,
-      rootPageIds: [hasChildrenPageId],
-    } = await initPinBoard();
-    await openOperationMenu(app, hasChildrenPageId);
-
-    const deleteBtn = await app.findByTestId(
-      'pinboard-operation-move-to-trash'
-    );
-    await deleteBtn.click();
-
-    const confirmBtn = await app.findByTestId('move-to-trash-confirm');
-    expect(confirmBtn).toBeInTheDocument();
-    await confirmBtn.click();
-
-    // Every page should be tagged as trash
-    expect(blockSuiteWorkspace.meta.pageMetas.filter(m => m.trash).length).toBe(
-      3
-    );
-    app.unmount();
-  });
-
-  test('rename pinboard', async () => {
-    const {
-      app,
-      rootPageIds: [hasChildrenPageId],
-    } = await initPinBoard();
-    await openOperationMenu(app, hasChildrenPageId);
-
-    const renameBtn = await app.findByTestId('pinboard-operation-rename');
-    await renameBtn.click();
-
-    const input = await app.findByTestId(`pinboard-input-${hasChildrenPageId}`);
-    expect(input).toBeInTheDocument();
-
-    // TODO: Fix this test
-    // fireEvent.change(input, { target: { value: 'tteesstt' } });
-    // expect(
-    //   blockSuiteWorkspace.meta.getPageMeta(hasChildrenPageId)?.name
-    // ).toBe('tteesstt');
-    app.unmount();
-  });
-
-  test('move pinboard', async () => {
-    const {
-      app,
-      blockSuiteWorkspace,
-      rootPageIds: [hasChildrenPageId],
-      pinboardPageIds: [pinboardId1, pinboardId2],
-    } = await initPinBoard();
-    await openOperationMenu(app, pinboardId1);
-
-    const moveToBtn = await app.findByTestId('pinboard-operation-move-to');
-    await moveToBtn.click();
-
-    const pinboardMenu = await app.findByTestId('pinboard-menu');
-    expect(pinboardMenu).toBeInTheDocument();
-
-    await (
-      pinboardMenu.querySelector(
-        `[data-testid="pinboard-${pinboardId2}"]`
-      ) as HTMLElement
-    ).click();
-
-    const hasChildrenPageMeta =
-      blockSuiteWorkspace.meta.getPageMeta(hasChildrenPageId);
-
-    expect(hasChildrenPageMeta?.subpageIds.includes(pinboardId1)).toBe(false);
-    expect(hasChildrenPageMeta?.subpageIds.includes(pinboardId2)).toBe(true);
-    app.unmount();
-  });
-
-  test('remove from pinboard', async () => {
-    const {
-      app,
-      blockSuiteWorkspace,
-      rootPageIds: [hasChildrenPageId],
-      pinboardPageIds: [pinboardId1],
-    } = await initPinBoard();
-    await openOperationMenu(app, pinboardId1);
-
-    const moveToBtn = await app.findByTestId('pinboard-operation-move-to');
-    await moveToBtn.click();
-
-    const removeFromPinboardBtn = await app.findByTestId(
-      'remove-from-pinboard-button'
-    );
-    removeFromPinboardBtn.click();
-
-    const hasPinboardPageMeta =
-      blockSuiteWorkspace.meta.getPageMeta(hasChildrenPageId);
-
-    expect(hasPinboardPageMeta?.subpageIds.length).toBe(1);
-    expect(hasPinboardPageMeta?.subpageIds.includes(pinboardId1)).toBe(false);
-    app.unmount();
-  });
-});

apps/web/src/components/__tests__/WorkSpaceSliderBar.spec.tsx

@@ -3,23 +3,27 @@
  */
 import 'fake-indexeddb/auto';
 
+import {
+  rootCurrentPageIdAtom,
+  rootCurrentWorkspaceIdAtom,
+} from '@affine/workspace/atom';
 import { WorkspaceFlavour } from '@affine/workspace/type';
 import { assertExists } from '@blocksuite/store';
 import { render, renderHook } from '@testing-library/react';
-import { createStore, getDefaultStore, Provider } from 'jotai';
+import { useBlockSuiteWorkspaceHelper } from '@toeverything/hooks/use-block-suite-workspace-helper';
+import { createStore, getDefaultStore, Provider, useAtomValue } from 'jotai';
 import { useRouter } from 'next/router';
 import type React from 'react';
 import { useCallback } from 'react';
 import { beforeEach, describe, expect, test, vi } from 'vitest';
 
 import { workspacesAtom } from '../../atoms';
-import { useCurrentPageId } from '../../hooks/current/use-current-page-id';
+import { rootCurrentWorkspaceAtom } from '../../atoms/root';
 import {
   currentWorkspaceAtom,
   useCurrentWorkspace,
 } from '../../hooks/current/use-current-workspace';
-import { useBlockSuiteWorkspaceHelper } from '../../hooks/use-blocksuite-workspace-helper';
-import { useWorkspacesHelper } from '../../hooks/use-workspaces';
+import { useAppHelper } from '../../hooks/use-workspaces';
 import { ThemeProvider } from '../../providers/ThemeProvider';
 import { pathGenerator } from '../../shared';
 import { WorkSpaceSliderBar } from '../pure/workspace-slider-bar';
@@ -45,21 +49,22 @@ describe('WorkSpaceSliderBar', () => {
 
     const onOpenWorkspaceListModalFn = vi.fn();
     const onOpenQuickSearchModalFn = vi.fn();
-    const mutationHook = renderHook(() => useWorkspacesHelper(), {
+    const mutationHook = renderHook(() => useAppHelper(), {
       wrapper: ProviderWrapper,
     });
     const id = await mutationHook.result.current.createLocalWorkspace('test0');
     await store.get(workspacesAtom);
     mutationHook.rerender();
     mutationHook.result.current.createWorkspacePage(id, 'test1');
-    await store.get(currentWorkspaceAtom);
+    store.set(rootCurrentWorkspaceIdAtom, id);
+    await store.get(rootCurrentWorkspaceAtom);
     const currentWorkspaceHook = renderHook(() => useCurrentWorkspace(), {
       wrapper: ProviderWrapper,
     });
     let i = 0;
     const Component = () => {
       const [currentWorkspace] = useCurrentWorkspace();
-      const [currentPageId] = useCurrentPageId();
+      const currentPageId = useAtomValue(rootCurrentPageIdAtom);
       assertExists(currentWorkspace);
       const helper = useBlockSuiteWorkspaceHelper(
         currentWorkspace.blockSuiteWorkspace

apps/web/src/components/affine/pinboard/pinboard-menu/index.tsx

@@ -5,7 +5,7 @@ import { RemoveIcon, SearchIcon } from '@blocksuite/icons';
 import type { PageMeta } from '@blocksuite/store';
 import React, { useCallback, useMemo, useState } from 'react';
 
-import { usePageMetaHelper } from '../../../../hooks/use-page-meta';
+import { useReferenceLinkHelper } from '../../../../hooks/affine/use-reference-link-helper';
 import { usePinboardData } from '../../../../hooks/use-pinboard-data';
 import { usePinboardHandler } from '../../../../hooks/use-pinboard-handler';
 import type { BlockSuiteWorkspace } from '../../../../shared';
@@ -41,13 +41,13 @@ export const PinboardMenu = ({
     [currentMeta.id, propsMetas]
   );
   const { t } = useTranslation();
-  const { setPageMeta } = usePageMetaHelper(blockSuiteWorkspace);
   const [query, setQuery] = useState('');
   const isSearching = query.length > 0;
 
   const searchResult = metas.filter(
     meta => !meta.trash && meta.title.includes(query)
   );
+  const { removeReferenceLink } = useReferenceLinkHelper(blockSuiteWorkspace);
 
   const { dropPin } = usePinboardHandler({
     blockSuiteWorkspace,
@@ -117,16 +117,7 @@ export const PinboardMenu = ({
           <StyledPinboard
             data-testid={'remove-from-pinboard-button'}
             onClick={() => {
-              const parentMeta = metas.find(m =>
-                m.subpageIds.includes(currentMeta.id)
-              );
-              if (!parentMeta) return;
-              const newSubpageIds = [...parentMeta.subpageIds];
-              const deleteIndex = newSubpageIds.findIndex(
-                id => id === currentMeta.id
-              );
-              newSubpageIds.splice(deleteIndex, 1);
-              setPageMeta(parentMeta.id, { subpageIds: newSubpageIds });
+              removeReferenceLink(currentMeta.id);
             }}
           >
             <RemoveIcon />

apps/web/src/components/affine/pinboard/pinboard-render/AddButton.tsx

@@ -0,0 +1,22 @@
+import { PlusIcon } from '@blocksuite/icons';
+
+import { StyledOperationButton } from '../styles';
+import type { OperationButtonProps } from './OperationButton';
+
+export const AddButton = ({
+  onAdd,
+  visible,
+}: Pick<OperationButtonProps, 'onAdd' | 'visible'>) => {
+  return (
+    <StyledOperationButton
+      visible={visible}
+      size="small"
+      onClick={e => {
+        e.stopPropagation();
+        onAdd();
+      }}
+    >
+      <PlusIcon />
+    </StyledOperationButton>
+  );
+};

apps/web/src/components/affine/pinboard/pinboard-render/EmptyItem.tsx

@@ -5,8 +5,8 @@ import { StyledPinboard } from '../styles';
 export const EmptyItem = () => {
   const { t } = useTranslation();
   return (
-    <StyledPinboard disable={true} style={{ paddingLeft: '32px' }}>
-      {t('No item')}
+    <StyledPinboard disable={true} textWrap={true}>
+      {t('Organize pages to build knowledge')}
     </StyledPinboard>
   );
 };

apps/web/src/components/affine/pinboard/pinboard-render/OperationButton.tsx

@@ -1,4 +1,9 @@
-import { MenuItem, MuiClickAwayListener, PureMenu } from '@affine/component';
+import {
+  baseTheme,
+  MenuItem,
+  MuiClickAwayListener,
+  PureMenu,
+} from '@affine/component';
 import { useTranslation } from '@affine/i18n';
 import {
   MoreVerticalIcon,
@@ -7,10 +12,9 @@ import {
   PlusIcon,
 } from '@blocksuite/icons';
 import type { PageMeta } from '@blocksuite/store';
-import { useTheme } from '@mui/material';
 import { useMemo, useRef, useState } from 'react';
 
-import { useMetaHelper } from '../../../../hooks/affine/use-meta-helper';
+import { useBlockSuiteMetaHelper } from '../../../../hooks/affine/use-block-suite-meta-helper';
 import type { BlockSuiteWorkspace } from '../../../../shared';
 import { toast } from '../../../../utils';
 import { CopyLink, MoveToTrash } from '../../operation-menu-items';
@@ -24,7 +28,7 @@ export type OperationButtonProps = {
   metas: PageMeta[];
   currentMeta: PageMeta;
   blockSuiteWorkspace: BlockSuiteWorkspace;
-  isHover: boolean;
+  visible: boolean;
   onRename?: () => void;
   onMenuClose?: () => void;
 };
@@ -35,13 +39,10 @@ export const OperationButton = ({
   metas,
   currentMeta,
   blockSuiteWorkspace,
-  isHover,
+  visible,
   onMenuClose,
   onRename,
 }: OperationButtonProps) => {
-  const {
-    zIndex: { modal: modalIndex },
-  } = useTheme();
   const { t } = useTranslation();
 
   const timer = useRef<ReturnType<typeof setTimeout>>();
@@ -49,8 +50,8 @@ export const OperationButton = ({
   const [operationMenuOpen, setOperationMenuOpen] = useState(false);
   const [pinboardMenuOpen, setPinboardMenuOpen] = useState(false);
   const [confirmModalOpen, setConfirmModalOpen] = useState(false);
-  const menuIndex = useMemo(() => modalIndex + 1, [modalIndex]);
-  const { removeToTrash } = useMetaHelper(blockSuiteWorkspace);
+  const menuIndex = useMemo(() => parseInt(baseTheme.zIndexModal) + 1, []);
+  const { removeToTrash } = useBlockSuiteMetaHelper(blockSuiteWorkspace);
 
   return (
     <MuiClickAwayListener
@@ -60,6 +61,7 @@ export const OperationButton = ({
       }}
     >
       <div
+        style={{ display: 'flex' }}
         onClick={e => {
           e.stopPropagation();
         }}
@@ -80,7 +82,7 @@ export const OperationButton = ({
           onClick={() => {
             setOperationMenuOpen(!operationMenuOpen);
           }}
-          visible={isHover}
+          visible={visible}
         >
           <MoreVerticalIcon />
         </StyledOperationButton>

apps/web/src/components/affine/pinboard/pinboard-render/index.tsx

@@ -6,14 +6,15 @@ import {
   PageIcon,
   PivotsIcon,
 } from '@blocksuite/icons';
+import { usePageMetaHelper } from '@toeverything/hooks/use-block-suite-page-meta';
 import { useAtomValue } from 'jotai';
 import { useRouter } from 'next/router';
 import { useMemo, useState } from 'react';
 
 import { workspacePreferredModeAtom } from '../../../../atoms';
-import { usePageMetaHelper } from '../../../../hooks/use-page-meta';
 import type { PinboardNode } from '../../../../hooks/use-pinboard-data';
 import { StyledCollapsedButton, StyledPinboard } from '../styles';
+import { AddButton } from './AddButton';
 import EmptyItem from './EmptyItem';
 import { OperationButton } from './OperationButton';
 
@@ -84,10 +85,8 @@ export const PinboardRender: PinboardNode['render'] = (
             <ArrowDownSmallIcon />
           </StyledCollapsedButton>
         )}
-
         {asPath && !isRoot ? <LevelIcon className="path-icon" /> : null}
         {getIcon(isRoot ? 'root' : record[node.id])}
-
         {showRename ? (
           <Input
             data-testid={`pinboard-input-${node.id}`}
@@ -106,6 +105,7 @@ export const PinboardRender: PinboardNode['render'] = (
         ) : (
           <span>{isRoot ? 'Pinboard' : currentMeta.title || 'Untitled'}</span>
         )}
+        {showOperationButton && <AddButton onAdd={onAdd} visible={isHover} />}
 
         {showOperationButton && (
           <OperationButton
@@ -115,7 +115,7 @@ export const PinboardRender: PinboardNode['render'] = (
             metas={metas}
             currentMeta={currentMeta!}
             blockSuiteWorkspace={blockSuiteWorkspace!}
-            isHover={isHover}
+            visible={isHover}
             onMenuClose={() => setIsHover(false)}
             onRename={() => {
               setShowRename(true);

apps/web/src/components/affine/pinboard/styles.ts

@@ -1,5 +1,4 @@
 import {
-  alpha,
   displayFlex,
   IconButton,
   styled,
@@ -9,21 +8,26 @@ import {
 export const StyledCollapsedButton = styled('button')<{
   collapse: boolean;
   show?: boolean;
-}>(({ collapse, show = true, theme }) => {
+}>(({ collapse, show = true }) => {
   return {
     width: '16px',
-    height: '16px',
+    height: '100%',
+    ...displayFlex('center', 'center'),
     fontSize: '16px',
     position: 'absolute',
     left: '0',
     top: '0',
     bottom: '0',
     margin: 'auto',
-    color: theme.colors.iconColor,
+    color: 'var(--affine-icon-color)',
     opacity: '.6',
+    transition: 'opacity .15s ease-in-out',
     display: show ? 'flex' : 'none',
     svg: {
-      transform: `rotate(${collapse ? '0' : '-90'}deg)`,
+      transform: `rotate(${collapse ? '-90' : '0'}deg)`,
+    },
+    ':hover': {
+      opacity: '1',
     },
   };
 });
@@ -33,44 +37,63 @@ export const StyledPinboard = styled('div')<{
   active?: boolean;
   isOver?: boolean;
   disableCollapse?: boolean;
-}>(({ disableCollapse, disable = false, active = false, theme, isOver }) => {
-  return {
-    width: '100%',
-    height: '32px',
-    borderRadius: '8px',
-    ...displayFlex('flex-start', 'center'),
-    padding: disableCollapse ? '0 5px' : '0 2px 0 16px',
-    position: 'relative',
-    color: disable
-      ? theme.colors.disableColor
-      : active
-      ? theme.colors.primaryColor
-      : theme.colors.textColor,
-    cursor: disable ? 'not-allowed' : 'pointer',
-    background: isOver ? alpha(theme.colors.primaryColor, 0.06) : '',
-    fontSize: theme.font.base,
-    userSelect: 'none',
-    span: {
-      flexGrow: '1',
-      textAlign: 'left',
-      ...textEllipsis(1),
-    },
-    '.path-icon': {
-      fontSize: '16px',
-      transform: 'translateY(-4px)',
-    },
-    '.mode-icon': {
-      fontSize: '20px',
-      marginRight: '8px',
-      flexShrink: '0',
-      color: active ? theme.colors.primaryColor : theme.colors.iconColor,
-    },
+  textWrap?: boolean;
+}>(
+  ({
+    disableCollapse,
+    disable = false,
+    active = false,
+    isOver,
+    textWrap = false,
+  }) => {
+    return {
+      width: '100%',
+      lineHeight: '1.5',
+      minHeight: '32px',
+      borderRadius: '8px',
+      ...displayFlex('flex-start', 'center'),
+      padding: disableCollapse ? '0 5px' : '0 2px 0 16px',
+      position: 'relative',
+      color: disable
+        ? 'var(--affine-text-disable-color)'
+        : active
+        ? 'var(--affine-primary-color)'
+        : 'var(--affine-text-primary-color)',
+      cursor: disable ? 'not-allowed' : 'pointer',
+      background: isOver ? 'rgba(118, 95, 254, 0.06)' : '',
+      fontSize: 'var(--affine-font-base)',
+      userSelect: 'none',
+      ...(textWrap
+        ? {
+            wordBreak: 'break-word',
+            whiteSpace: 'pre-wrap',
+          }
+        : {}),
 
-    ':hover': {
-      backgroundColor: disable ? '' : theme.colors.hoverBackground,
-    },
-  };
-});
+      span: {
+        flexGrow: '1',
+        textAlign: 'left',
+        ...textEllipsis(1),
+      },
+      '.path-icon': {
+        fontSize: '16px',
+        transform: 'translateY(-4px)',
+      },
+      '.mode-icon': {
+        fontSize: '20px',
+        marginRight: '8px',
+        flexShrink: '0',
+        color: active
+          ? 'var(--affine-primary-color)'
+          : 'var(--affine-icon-color)',
+      },
+
+      ':hover': {
+        backgroundColor: disable ? '' : 'var(--affine-hover-color)',
+      },
+    };
+  }
+);
 
 export const StyledOperationButton = styled(IconButton, {
   shouldForwardProp: prop => {
@@ -82,14 +105,14 @@ export const StyledOperationButton = styled(IconButton, {
   };
 });
 
-export const StyledSearchContainer = styled('div')(({ theme }) => {
+export const StyledSearchContainer = styled('div')(() => {
   return {
     width: 'calc(100% - 24px)',
     margin: '0 auto',
     ...displayFlex('flex-start', 'center'),
-    borderBottom: `1px solid ${theme.colors.borderColor}`,
+    borderBottom: '1px solid var(--affine-border-color)',
     label: {
-      color: theme.colors.iconColor,
+      color: 'var(--affine-icon-color)',
       fontSize: '20px',
       height: '20px',
     },
@@ -101,24 +124,24 @@ export const StyledMenuContent = styled('div')(() => {
     overflow: 'auto',
   };
 });
-export const StyledMenuSubTitle = styled('div')(({ theme }) => {
+export const StyledMenuSubTitle = styled('div')(() => {
   return {
-    color: theme.colors.secondaryTextColor,
+    color: 'var(--affine-text-secondary-color)',
     lineHeight: '36px',
     padding: '0 12px',
   };
 });
 
-export const StyledMenuFooter = styled('div')(({ theme }) => {
+export const StyledMenuFooter = styled('div')(() => {
   return {
     width: 'calc(100% - 24px)',
     margin: '0 auto',
-    borderTop: `1px solid ${theme.colors.borderColor}`,
+    borderTop: '1px solid var(--affine-border-color)',
     padding: '6px 0',
 
     p: {
       paddingLeft: '44px',
-      color: theme.colors.secondaryTextColor,
+      color: 'var(--affine-text-secondary-color)',
       fontSize: '14px',
     },
   };

apps/web/src/components/affine/sidebar-switch/index.tsx

@@ -13,12 +13,14 @@ import { StyledSidebarSwitch } from './style';
 type SidebarSwitchProps = {
   visible?: boolean;
   tooltipContent?: string;
-  testid?: string;
 };
+
+// fixme: the following code is not correct, SSR will fail because hydrate will not match the client side render
+//  in `StyledSidebarSwitch` component
 export const SidebarSwitch = ({
   visible = true,
   tooltipContent,
-  testid = '',
+  ...props
 }: SidebarSwitchProps) => {
   useUpdateTipsOnVersionChange();
   const [open, setOpen] = useSidebarStatus();
@@ -38,9 +40,9 @@ export const SidebarSwitch = ({
       visible={tooltipVisible}
     >
       <StyledSidebarSwitch
+        {...props}
         visible={visible}
         disabled={!visible}
-        data-testid={testid}
         onClick={useCallback(() => {
           setOpen(!open);
           setTooltipVisible(false);

apps/web/src/components/affine/tmp-disable-affine-cloud-modal/index.tsx

@@ -0,0 +1,72 @@
+import { Empty, IconButton, Modal, ModalWrapper } from '@affine/component';
+import { CloseIcon } from '@blocksuite/icons';
+import type React from 'react';
+
+import {
+  Content,
+  ContentTitle,
+  Header,
+  StyleButton,
+  StyleButtonContainer,
+  StyleImage,
+  StyleTips,
+} from './style';
+
+interface TmpDisableAffineCloudModalProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+export const TmpDisableAffineCloudModal: React.FC<
+  TmpDisableAffineCloudModalProps
+> = ({ open, onClose }) => {
+  return (
+    <Modal open={open} onClose={onClose}>
+      <ModalWrapper width={480}>
+        <Header>
+          <IconButton
+            onClick={() => {
+              onClose();
+            }}
+          >
+            <CloseIcon />
+          </IconButton>
+        </Header>
+        <Content>
+          <ContentTitle>AFFiNE Cloud is upgrading now.</ContentTitle>
+          <StyleTips>
+            We are upgrading the AFFiNE Cloud service and it is temporarily
+            unavailable on the client side. If you wish to be notified the first
+            time it&apos;s available, please&nbsp;
+            <a
+              href="https://github.com/toeverything/AFFiNE/releases"
+              target="_blank"
+            >
+              click here
+            </a>
+            .
+          </StyleTips>
+          <StyleImage>
+            <Empty
+              containerStyle={{
+                width: '200px',
+                height: '112px',
+              }}
+            />
+          </StyleImage>
+          <StyleButtonContainer>
+            <StyleButton
+              shape="round"
+              type="primary"
+              onClick={() => {
+                onClose();
+              }}
+            >
+              Got it
+            </StyleButton>
+          </StyleButtonContainer>
+        </Content>
+      </ModalWrapper>
+    </Modal>
+  );
+};

apps/web/src/components/affine/tmp-disable-affine-cloud-modal/style.ts

@@ -0,0 +1,55 @@
+import { Button, displayFlex, styled } from '@affine/component';
+
+export const Header = styled('div')({
+  height: '44px',
+  display: 'flex',
+  flexDirection: 'row-reverse',
+  paddingRight: '10px',
+  paddingTop: '10px',
+  flexShrink: 0,
+});
+
+export const Content = styled('div')({
+  padding: '0 40px',
+});
+
+export const ContentTitle = styled('h1')(({ theme }) => {
+  return {
+    fontSize: 'var(--affine-font-h6)',
+    lineHeight: '28px',
+    fontWeight: 600,
+  };
+});
+
+export const StyleTips = styled('div')(({ theme }) => {
+  return {
+    userSelect: 'none',
+    margin: '20px 0',
+    a: {
+      color: 'var(--affine-background-primary-color)',
+    },
+  };
+});
+
+export const StyleButton = styled(Button)(({ theme }) => {
+  return {
+    textAlign: 'center',
+    margin: '20px 0',
+    borderRadius: '8px',
+    backgroundColor: 'var(--affine-background-primary-color)',
+    span: {
+      margin: '0',
+    },
+  };
+});
+export const StyleButtonContainer = styled('div')(() => {
+  return {
+    width: '100%',
+    ...displayFlex('flex-end', 'center'),
+  };
+});
+export const StyleImage = styled('div')(() => {
+  return {
+    width: '100%',
+  };
+});

apps/web/src/components/affine/workspace-setting-detail/panel/collaboration/index.tsx

@@ -1,4 +1,5 @@
 import { Button, IconButton, Menu, MenuItem, Wrapper } from '@affine/component';
+import { config } from '@affine/env';
 import { useTranslation } from '@affine/i18n';
 import { PermissionType } from '@affine/workspace/affine/api';
 import type { AffineWorkspace, LocalWorkspace } from '@affine/workspace/type';
@@ -14,6 +15,7 @@ import { useCallback, useState } from 'react';
 import { useMembers } from '../../../../../hooks/affine/use-members';
 import { toast } from '../../../../../utils';
 import { Unreachable } from '../../../affine-error-eoundary';
+import { TmpDisableAffineCloudModal } from '../../../tmp-disable-affine-cloud-modal';
 import { TransformWorkspaceToAffineModal } from '../../../transform-workspace-to-affine-modal';
 import type { PanelProps } from '../../index';
 import { InviteMemberModal } from './invite-member-modal';
@@ -171,6 +173,7 @@ const LocalCollaborationPanel: React.FC<
   return (
     <>
       <Wrapper marginBottom="42px">{t('Collaboration Description')}</Wrapper>
+
       <Button
         data-testid="local-workspace-enable-cloud-button"
         type="light"
@@ -181,20 +184,29 @@ const LocalCollaborationPanel: React.FC<
       >
         {t('Enable AFFiNE Cloud')}
       </Button>
-      <TransformWorkspaceToAffineModal
-        open={open}
-        onClose={() => {
-          setOpen(false);
-        }}
-        onConform={() => {
-          onTransferWorkspace(
-            WorkspaceFlavour.LOCAL,
-            WorkspaceFlavour.AFFINE,
-            workspace
-          );
-          setOpen(false);
-        }}
-      />
+      {config.enableLegacyCloud ? (
+        <TransformWorkspaceToAffineModal
+          open={open}
+          onClose={() => {
+            setOpen(false);
+          }}
+          onConform={() => {
+            onTransferWorkspace(
+              WorkspaceFlavour.LOCAL,
+              WorkspaceFlavour.AFFINE,
+              workspace
+            );
+            setOpen(false);
+          }}
+        />
+      ) : (
+        <TmpDisableAffineCloudModal
+          open={open}
+          onClose={() => {
+            setOpen(false);
+          }}
+        />
+      )}
     </>
   );
 };

apps/web/src/components/affine/workspace-setting-detail/panel/collaboration/invite-member-modal/index.tsx

@@ -154,7 +154,7 @@ const Members = styled('div')(({ theme }) => {
   return {
     position: 'absolute',
     width: '100%',
-    background: theme.colors.pageBackground,
+    background: 'var(--affine-background-primary-color)',
     textAlign: 'left',
     zIndex: 1,
     borderRadius: '0px 10px 10px 10px',
@@ -162,7 +162,7 @@ const Members = styled('div')(({ theme }) => {
     padding: '8px 12px',
     input: {
       '&::placeholder': {
-        color: theme.colors.placeHolderColor,
+        color: 'var(--affine-placeholder-color)',
       },
     },
   };
@@ -170,8 +170,8 @@ const Members = styled('div')(({ theme }) => {
 
 // const NoFind = styled('div')(({ theme }) => {
 //   return {
-//     color: theme.colors.iconColor,
-//     fontSize: theme.font.sm,
+//     color: 'var(--affine-icon-color)',
+//     fontSize: 'var(--affine-font-sm)',
 //     lineHeight: '40px',
 //     userSelect: 'none',
 //     width: '100%',
@@ -180,8 +180,8 @@ const Members = styled('div')(({ theme }) => {
 
 const Member = styled('div')(({ theme }) => {
   return {
-    color: theme.colors.iconColor,
-    fontSize: theme.font.sm,
+    color: 'var(--affine-icon-color)',
+    fontSize: 'var(--affine-font-sm)',
     lineHeight: '40px',
     userSelect: 'none',
     display: 'flex',
@@ -193,7 +193,7 @@ const MemberIcon = styled('div')(({ theme }) => {
     width: '40px',
     height: '40px',
     borderRadius: '50%',
-    color: theme.colors.primaryColor,
+    color: 'var(--affine-primary-color)',
     background: '#F5F5F5',
     textAlign: 'center',
     lineHeight: '45px',

apps/web/src/components/affine/workspace-setting-detail/panel/collaboration/style.ts

@@ -66,7 +66,7 @@ export const StyledMemberName = styled('div')(({ theme }) => {
     fontWeight: '400',
     fontSize: '18px',
     lineHeight: '26px',
-    color: theme.colors.textColor,
+    color: 'var(--affine-text-primary-color)',
   };
 });
 
@@ -75,7 +75,7 @@ export const StyledMemberEmail = styled('div')(({ theme }) => {
     fontWeight: '400',
     fontSize: '16px',
     lineHeight: '22px',
-    color: theme.colors.iconColor,
+    color: 'var(--affine-icon-color)',
   };
 });
 

apps/web/src/components/affine/workspace-setting-detail/panel/export/index.tsx

@@ -6,7 +6,14 @@ export const ExportPanel = () => {
   return (
     <>
       <Wrapper marginBottom="42px"> {t('Export Description')}</Wrapper>
-      <Button type="light" shape="circle" disabled>
+      <Button
+        type="light"
+        shape="circle"
+        disabled={!environment.isDesktop}
+        onClick={() => {
+          window.apis.openSaveDBFileDialog();
+        }}
+      >
         {t('Export AFFiNE backup file')}
       </Button>
     </>

apps/web/src/components/affine/workspace-setting-detail/panel/general/delete/index.tsx

@@ -1,7 +1,7 @@
 import { Button, Input, Modal, ModalCloseButton } from '@affine/component';
 import { Trans, useTranslation } from '@affine/i18n';
 import { WorkspaceFlavour } from '@affine/workspace/type';
-import { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-blocksuite-workspace-name';
+import { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-block-suite-workspace-name';
 import { useCallback, useState } from 'react';
 
 import type { AffineOfficialWorkspace } from '../../../../../../shared';

apps/web/src/components/affine/workspace-setting-detail/panel/general/delete/style.ts

@@ -5,7 +5,7 @@ export const StyledModalWrapper = styled('div')(({ theme }) => {
     position: 'relative',
     padding: '0px',
     width: '560px',
-    background: theme.colors.popoverBackground,
+    background: 'var(--affine-white)',
     borderRadius: '12px',
     // height: '312px',
   };
@@ -42,7 +42,7 @@ export const StyledInputContent = styled('div')(({ theme }) => {
     flexDirection: 'row',
     justifyContent: 'center',
     margin: '24px 0',
-    fontSize: theme.font.base,
+    fontSize: 'var(--affine-font-base)',
   };
 });
 

apps/web/src/components/affine/workspace-setting-detail/panel/general/index.tsx

@@ -2,8 +2,8 @@ import { Button, FlexWrapper, MuiFade } from '@affine/component';
 import { WorkspaceAvatar } from '@affine/component/workspace-avatar';
 import { useTranslation } from '@affine/i18n';
 import { WorkspaceFlavour } from '@affine/workspace/type';
-import { useBlockSuiteWorkspaceAvatarUrl } from '@toeverything/hooks/use-blocksuite-workspace-avatar-url';
-import { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-blocksuite-workspace-name';
+import { useBlockSuiteWorkspaceAvatarUrl } from '@toeverything/hooks/use-block-suite-workspace-avatar-url';
+import { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-block-suite-workspace-name';
 import type React from 'react';
 import { useState } from 'react';
 
@@ -98,7 +98,7 @@ export const GeneralPanel: React.FC<PanelProps> = ({
                   height={38}
                   value={input}
                   placeholder={t('Workspace Name')}
-                  maxLength={15}
+                  maxLength={50}
                   minLength={0}
                   onChange={newName => {
                     setInput(newName);
@@ -158,7 +158,13 @@ export const GeneralPanel: React.FC<PanelProps> = ({
       {/*  </StyledRow>*/}
       {/*)}*/}
 
-      <StyledRow>
+      <StyledRow
+        onClick={() => {
+          if (environment.isDesktop) {
+            window.apis.openDBFolder();
+          }
+        }}
+      >
         <StyledSettingKey>{t('Workspace Type')}</StyledSettingKey>
         {isOwner ? (
           workspace.flavour === WorkspaceFlavour.LOCAL ? (

apps/web/src/components/affine/workspace-setting-detail/panel/general/leave/style.ts

@@ -5,7 +5,7 @@ export const StyledModalWrapper = styled('div')(({ theme }) => {
     position: 'relative',
     padding: '0px',
     width: '460px',
-    background: theme.colors.popoverBackground,
+    background: 'var(--affine-white)',
     borderRadius: '12px',
   };
 });

apps/web/src/components/affine/workspace-setting-detail/panel/general/style.ts

@@ -3,9 +3,9 @@ import { Input } from '@affine/component';
 
 export const StyledInput = styled(Input)(({ theme }) => {
   return {
-    border: `1px solid ${theme.colors.borderColor}`,
+    border: '1px solid var(--affine-border-color)',
     borderRadius: '10px',
-    fontSize: theme.font.sm,
+    fontSize: 'var(--affine-font-sm)',
   };
 });
 
@@ -14,7 +14,7 @@ export const StyledWorkspaceInfo = styled('div')(({ theme }) => {
     ...displayFlex('flex-start', 'center'),
     fontSize: '20px',
     span: {
-      fontSize: theme.font.base,
+      fontSize: 'var(--affine-font-base)',
       marginLeft: '15px',
     },
   };
@@ -42,6 +42,7 @@ export const StyledAvatar = styled('div')(
         backgroundColor: 'rgba(60, 61, 63, 0.5)',
         justifyContent: 'center',
         alignItems: 'center',
+        zIndex: 10,
       },
     };
   }
@@ -49,7 +50,7 @@ export const StyledAvatar = styled('div')(
 
 export const StyledEditButton = styled('div')(({ theme }) => {
   return {
-    color: theme.colors.primaryColor,
+    color: 'var(--affine-primary-color)',
     cursor: 'pointer',
     marginLeft: '36px',
   };