ci: use setup version action to init version

![CleanShot 2023-12-20 at 16.54.30@2x.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/g3jz87HxbjOJpXV3FPT7/318a2d3c-14ea-48db-907a-881886d605e7.png)

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

@@ -0,0 +1,20 @@
+name: Setup Version
+description: 'Setup Version'
+runs:
+  using: 'composite'
+  steps:
+    - name: 'Write Version'
+      id: version
+      shell: bash
+      run: |
+        if [ "${{ github.ref_type }}" == "tag" ]; then
+          APP_VERSION=${{ github.ref_name }}
+        else
+          PACKAGE_VERSION=$(node -p "require('./package.json').version")
+          TIME_VERSION=$(date +%Y%m%d%H%M)
+          GIT_SHORT_HASH=$(git rev-parse --short HEAD)
+          APP_VERSION=$PACKAGE_VERSION-nightly-$TIME_VERSION-$GIT_SHORT_HASH
+        fi
+        echo $APP_VERSION
+        echo "APP_VERSION=$APP_VERSION" >> "$GITHUB_OUTPUT"
+        ./scripts/set-version.sh $APP_VERSION

.github/workflows/deploy.yml

@@ -4,10 +4,14 @@ on:
   workflow_dispatch:
     inputs:
       flavor:
-        description: 'Build type (canary, beta, or stable or internal)'
-        type: string
+        description: 'Select what enverionment to deploy to'
+        type: choice
         default: canary
-
+        options:
+          - canary
+          - beta
+          - stable
+          - internal
 env:
   APP_NAME: affine
   NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }}
@@ -18,6 +22,8 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
+      - name: Setup Version
+        uses: ./.github/actions/setup-version
       - name: Setup Node.js
         uses: ./.github/actions/setup-node
         with:
@@ -36,6 +42,8 @@ jobs:
     environment: ${{ github.event.inputs.flavor }}
     steps:
       - uses: actions/checkout@v4
+      - name: Setup Version
+        uses: ./.github/actions/setup-version
       - name: Setup Node.js
         uses: ./.github/actions/setup-node
       - name: Build Plugins
@@ -67,6 +75,8 @@ jobs:
 
     steps:
       - uses: actions/checkout@v4
+      - name: Setup Version
+        uses: ./.github/actions/setup-version
       - name: Setup Node.js
         uses: ./.github/actions/setup-node
       - name: Build Rust
@@ -88,6 +98,8 @@ jobs:
 
     steps:
       - uses: actions/checkout@v4
+      - name: Setup Version
+        uses: ./.github/actions/setup-version
       - name: Setup Node.js
         uses: ./.github/actions/setup-node
       - name: Build Rust
@@ -207,12 +219,8 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - name: setup deploy version
-        id: version
-        run: |
-          export APP_VERSION=`node -e "console.log(require('./package.json').version)"`
-          echo $APP_VERSION
-          echo "APP_VERSION=$APP_VERSION" >> "$GITHUB_OUTPUT"
+      - name: Setup Version
+        uses: ./.github/actions/setup-version
       - name: Deploy to ${{ github.event.inputs.flavor }}
         uses: ./.github/actions/deploy
         with:

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

@@ -5,9 +5,14 @@ import { loading, speedVar } from './styles.css';
 export interface LoadingProps {
   size?: number;
   speed?: number;
+  progress?: number;
 }
 
-export const Loading = ({ size, speed = 1.2 }: LoadingProps) => {
+export const Loading = ({
+  size,
+  speed = 1.2,
+  progress = 0.2,
+}: LoadingProps) => {
   return (
     <svg
       className={loading}
@@ -22,13 +27,22 @@ export const Loading = ({ size, speed = 1.2 }: LoadingProps) => {
         }),
       }}
     >
-      <path
-        d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM4.95017 12C4.95017 15.8935 8.10648 19.0498 12 19.0498C15.8935 19.0498 19.0498 15.8935 19.0498 12C19.0498 8.10648 15.8935 4.95017 12 4.95017C8.10648 4.95017 4.95017 8.10648 4.95017 12Z"
-        fill="var(--affine-black-10)"
+      <circle
+        cx={12}
+        cy={12}
+        r={8}
+        strokeWidth={4}
+        stroke="var(--affine-black-10)"
       />
-      <path
-        d="M20.525 12C21.3396 12 22.0111 11.3361 21.8914 10.5303C21.7714 9.72269 21.5527 8.93094 21.2388 8.17317C20.7362 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C15.0691 2.44732 14.2773 2.22859 13.4697 2.10859C12.6639 1.98886 12 2.66038 12 3.475C12 4.28962 12.6674 4.93455 13.4643 5.10374C13.8853 5.19314 14.2983 5.32113 14.6979 5.48665C15.5533 5.84095 16.3304 6.36024 16.9851 7.0149C17.6398 7.66955 18.1591 8.44674 18.5133 9.30208C18.6789 9.70167 18.8069 10.1147 18.8963 10.5357C19.0655 11.3326 19.7104 12 20.525 12Z"
-        fill="var(--affine-primary-color)"
+      <circle
+        cx={12}
+        cy={12}
+        r={8}
+        strokeWidth={4}
+        stroke="var(--affine-primary-color)"
+        strokeDasharray={`${2 * Math.PI * 8 * progress} ${
+          2 * Math.PI * 8 * (1 - progress)
+        }`}
       />
     </svg>
   );

packages/frontend/component/src/ui/loading/styles.css.ts

@@ -13,5 +13,6 @@ export const loading = style({
   },
   textRendering: 'optimizeLegibility',
   WebkitFontSmoothing: 'antialiased',
+  transform: 'rotate(-90deg)',
   animation: `${rotate} ${speedVar} infinite linear`,
 });

packages/frontend/core/src/components/pure/workspace-slider-bar/workspace-card/index.tsx

@@ -15,7 +15,7 @@ import {
 import { useWorkspaceBlobObjectUrl } from '@toeverything/hooks/use-workspace-blob';
 import { useWorkspaceInfo } from '@toeverything/hooks/use-workspace-info';
 import { useAtomValue } from 'jotai';
-import { debounce } from 'lodash-es';
+import { debounce, mean } from 'lodash-es';
 import {
   forwardRef,
   type HTMLAttributes,
@@ -45,10 +45,10 @@ const CloudWorkspaceStatus = () => {
   );
 };
 
-const SyncingWorkspaceStatus = () => {
+const SyncingWorkspaceStatus = ({ progress }: { progress?: number }) => {
   return (
     <>
-      <Loading />
+      <Loading progress={progress} speed={progress ? 0 : undefined} />
       Syncing...
     </>
   );
@@ -85,7 +85,7 @@ const OfflineStatus = () => {
   );
 };
 
-const WorkspaceStatus = () => {
+const useSyncEngineSyncProgress = () => {
   const isOnline = useSystemOnline();
 
   const [syncEngineStatus, setSyncEngineStatus] =
@@ -106,6 +106,24 @@ const WorkspaceStatus = () => {
     };
   }, [currentWorkspace]);
 
+  const progress = useMemo(() => {
+    if (!syncEngineStatus?.remotes || syncEngineStatus?.remotes.length === 0) {
+      return null;
+    }
+    return mean(
+      syncEngineStatus.remotes.map(peer => {
+        if (!peer) {
+          return 0;
+        }
+        const totalTask =
+          peer.totalDocs + peer.pendingPullUpdates + peer.pendingPushUpdates;
+        const doneTask = peer.loadedDocs;
+
+        return doneTask / totalTask;
+      })
+    );
+  }, [syncEngineStatus?.remotes]);
+
   const content = useMemo(() => {
     // TODO: add i18n
     if (currentWorkspace.flavour === WorkspaceFlavour.LOCAL) {
@@ -118,38 +136,51 @@ const WorkspaceStatus = () => {
       return 'Disconnected, please check your network connection';
     }
     if (!syncEngineStatus || syncEngineStatus.step === SyncEngineStep.Syncing) {
-      return 'Syncing with AFFiNE Cloud';
+      return (
+        `Syncing with AFFiNE Cloud` +
+        (progress ? ` (${Math.floor(progress * 100)}%)` : '')
+      );
     }
     if (syncEngineStatus.retrying) {
       return 'Sync disconnected due to unexpected issues, reconnecting.';
     }
     return 'Synced with AFFiNE Cloud';
-  }, [currentWorkspace.flavour, isOnline, syncEngineStatus]);
+  }, [currentWorkspace.flavour, isOnline, progress, syncEngineStatus]);
 
   const CloudWorkspaceSyncStatus = useCallback(() => {
     if (!syncEngineStatus || syncEngineStatus.step === SyncEngineStep.Syncing) {
-      return SyncingWorkspaceStatus();
+      return SyncingWorkspaceStatus({
+        progress: progress ? Math.max(progress, 0.2) : undefined,
+      });
     } else if (syncEngineStatus.retrying) {
       return UnSyncWorkspaceStatus();
     } else {
       return CloudWorkspaceStatus();
     }
-  }, [syncEngineStatus]);
+  }, [progress, syncEngineStatus]);
+
+  return {
+    message: content,
+    icon:
+      currentWorkspace.flavour === WorkspaceFlavour.AFFINE_CLOUD ? (
+        !isOnline ? (
+          <OfflineStatus />
+        ) : (
+          <CloudWorkspaceSyncStatus />
+        )
+      ) : (
+        <LocalWorkspaceStatus />
+      ),
+  };
+};
+
+const WorkspaceStatus = () => {
+  const { message, icon } = useSyncEngineSyncProgress();
 
   return (
     <div style={{ display: 'flex' }}>
-      <Tooltip content={content}>
-        <StyledWorkspaceStatus>
-          {currentWorkspace.flavour === WorkspaceFlavour.AFFINE_CLOUD ? (
-            !isOnline ? (
-              <OfflineStatus />
-            ) : (
-              <CloudWorkspaceSyncStatus />
-            )
-          ) : (
-            <LocalWorkspaceStatus />
-          )}
-        </StyledWorkspaceStatus>
+      <Tooltip content={message}>
+        <StyledWorkspaceStatus>{icon}</StyledWorkspaceStatus>
       </Tooltip>
     </div>
   );