feat(core): server version check for selfhost login (#13247)

close AF-2752;

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Added a version compatibility check for self-hosted environments
during sign-in, displaying a clear error message and upgrade
instructions if the server version is outdated.
* **Style**
* Updated the appearance of the notification icon in the mobile header
for improved visual consistency.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

packages/frontend/core/package.json

@@ -83,6 +83,7 @@
     "react-transition-state": "^2.2.0",
     "react-virtuoso": "^4.12.3",
     "rxjs": "^7.8.1",
+    "semver": "^7.7.2",
     "ses": "^1.10.0",
     "shiki": "^3.7.0",
     "socket.io-client": "^4.8.1",
@@ -100,6 +101,7 @@
     "@types/bytes": "^3.1.5",
     "@types/image-blob-reduce": "^4.1.4",
     "@types/lodash-es": "^4.17.12",
+    "@types/semver": "^7",
     "@vanilla-extract/css": "^1.17.0",
     "fake-indexeddb": "^6.0.0",
     "lodash-es": "^4.17.21",

packages/frontend/core/src/components/hooks/affine/use-selfhost-login-version-guard.tsx

@@ -0,0 +1,57 @@
+import type { Server } from '@affine/core/modules/cloud';
+import { useLiveData } from '@toeverything/infra';
+import { cssVarV2 } from '@toeverything/theme/v2';
+import semver from 'semver';
+
+const rules = [
+  {
+    min: '0.23.0',
+    tip: (receivedVersion: string, requiredVersion: string) => (
+      <div>
+        <p
+          style={{
+            color: cssVarV2('status/error'),
+            fontSize: 14,
+            lineHeight: '22px',
+          }}
+        >
+          Your server version{' '}
+          <b style={{ fontWeight: 600 }}>{receivedVersion}</b> is not compatible
+          with current client. Please upgrade your server to{' '}
+          <b style={{ fontWeight: 600 }}>{requiredVersion}</b> or higher to use
+          this client.
+        </p>
+        <div style={{ marginTop: '12px', color: cssVarV2.text.primary }}>
+          <span style={{ fontWeight: 500 }}>Instructions:</span>
+          <br />
+          <a
+            style={{
+              whiteSpace: 'break-spaces',
+              wordBreak: 'break-all',
+              fontSize: 12,
+              lineHeight: '16px',
+            }}
+          >
+            https://docs.affine.pro/self-host-affine/install/upgrade
+          </a>
+        </div>
+      </div>
+    ),
+  },
+];
+
+/**
+ * Return the error tip if the server version is not meet the requirement
+ */
+export const useSelfhostLoginVersionGuard = (server: Server) => {
+  const serverVersion =
+    useLiveData(server.config$.selector(c => c.version)) ?? '0.0.0';
+
+  for (const rule of rules) {
+    if (semver.lt(serverVersion, rule.min)) {
+      return rule.tip(serverVersion, rule.min);
+    }
+  }
+
+  return null;
+};

packages/frontend/core/src/components/sign-in/sign-in.tsx

@@ -27,6 +27,7 @@ import {
   useState,
 } from 'react';
 
+import { useSelfhostLoginVersionGuard } from '../hooks/affine/use-selfhost-login-version-guard';
 import type { SignInState } from '.';
 import { Back } from './back';
 import * as style from './style.css';
@@ -54,6 +55,7 @@ export const SignInStep = ({
   const serverName = useLiveData(
     serverService.server.config$.selector(c => c.serverName)
   );
+  const versionError = useSelfhostLoginVersionGuard(serverService.server);
   const isSelfhosted = useLiveData(
     serverService.server.config$.selector(
       c => c.type === ServerDeploymentType.Selfhosted
@@ -125,6 +127,20 @@ export const SignInStep = ({
     }));
   }, [changeState]);
 
+  if (versionError && isSelfhosted) {
+    return (
+      <AuthContainer>
+        <AuthHeader
+          title={t['com.affine.auth.sign.in']()}
+          subTitle={serverName}
+        />
+        <AuthContent>
+          <div>{versionError}</div>
+        </AuthContent>
+      </AuthContainer>
+    );
+  }
+
   return (
     <AuthContainer>
       <AuthHeader

packages/frontend/core/src/mobile/views/home-header/index.tsx

@@ -11,6 +11,7 @@ import { WorkbenchService } from '@affine/core/modules/workbench';
 import { useI18n } from '@affine/i18n';
 import { NotificationIcon, SettingsIcon } from '@blocksuite/icons/rc';
 import { useLiveData, useService } from '@toeverything/infra';
+import { cssVarV2 } from '@toeverything/theme/v2';
 import clsx from 'clsx';
 import { useCallback, useRef, useState } from 'react';
 
@@ -76,7 +77,13 @@ export const HomeHeader = () => {
           ref={floatWorkspaceCardRef}
         />
         <Menu items={<NotificationList />}>
-          <div style={{ position: 'relative' }}>
+          <div
+            style={{
+              position: 'relative',
+              lineHeight: 0,
+              color: cssVarV2.icon.primary,
+            }}
+          >
             <NotificationIcon width={28} height={28} />
             {notificationCount > 0 && (
               <div

yarn.lock

@@ -435,6 +435,7 @@ __metadata:
     "@types/bytes": "npm:^3.1.5"
     "@types/image-blob-reduce": "npm:^4.1.4"
     "@types/lodash-es": "npm:^4.17.12"
+    "@types/semver": "npm:^7"
     "@vanilla-extract/css": "npm:^1.17.0"
     "@vanilla-extract/dynamic": "npm:^2.1.2"
     "@webcontainer/api": "npm:^1.6.1"
@@ -476,6 +477,7 @@ __metadata:
     react-transition-state: "npm:^2.2.0"
     react-virtuoso: "npm:^4.12.3"
     rxjs: "npm:^7.8.1"
+    semver: "npm:^7.7.2"
     ses: "npm:^1.10.0"
     shiki: "npm:^3.7.0"
     socket.io-client: "npm:^4.8.1"
@@ -15352,7 +15354,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/semver@npm:^7.5.8":
+"@types/semver@npm:^7, @types/semver@npm:^7.5.8":
   version: 7.7.0
   resolution: "@types/semver@npm:7.7.0"
   checksum: 10/ee4514c6c852b1c38f951239db02f9edeea39f5310fad9396a00b51efa2a2d96b3dfca1ae84c88181ea5b7157c57d32d7ef94edacee36fbf975546396b85ba5b