From c90d511251eda6097f1258f85f9bb52722451502 Mon Sep 17 00:00:00 2001
From: Cats Juice <wp1298554944@hotmail.com>
Date: Thu, 17 Jul 2025 17:21:51 +0800
Subject: [PATCH] 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           |  2 +
 .../use-selfhost-login-version-guard.tsx      | 57 +++++++++++++++++++
 .../core/src/components/sign-in/sign-in.tsx   | 16 ++++++
 .../src/mobile/views/home-header/index.tsx    |  9 ++-
 yarn.lock                                     |  4 +-
 5 files changed, 86 insertions(+), 2 deletions(-)
 create mode 100644 packages/frontend/core/src/components/hooks/affine/use-selfhost-login-version-guard.tsx

diff --git a/packages/frontend/core/package.json b/packages/frontend/core/package.json
index e49f8fff8e..7c490455ae 100644
--- a/packages/frontend/core/package.json
+++ b/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",
diff --git a/packages/frontend/core/src/components/hooks/affine/use-selfhost-login-version-guard.tsx b/packages/frontend/core/src/components/hooks/affine/use-selfhost-login-version-guard.tsx
new file mode 100644
index 0000000000..03deadf703
--- /dev/null
+++ b/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;
+};
diff --git a/packages/frontend/core/src/components/sign-in/sign-in.tsx b/packages/frontend/core/src/components/sign-in/sign-in.tsx
index 09126c08c5..e9bf6d7c86 100644
--- a/packages/frontend/core/src/components/sign-in/sign-in.tsx
+++ b/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
diff --git a/packages/frontend/core/src/mobile/views/home-header/index.tsx b/packages/frontend/core/src/mobile/views/home-header/index.tsx
index 6a79a9e03e..e4d2917520 100644
--- a/packages/frontend/core/src/mobile/views/home-header/index.tsx
+++ b/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
diff --git a/yarn.lock b/yarn.lock
index fdd7ddef86..2abb0603cf 100644
--- a/yarn.lock
+++ b/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