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/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