feat(admin): add server version check (#10816)

packages/frontend/admin/src/modules/nav/nav.tsx

@@ -4,6 +4,7 @@ import { AccountIcon, AiOutlineIcon, SelfhostIcon } from '@blocksuite/icons/rc';
 import { cssVarV2 } from '@toeverything/theme/v2';
 import { NavLink } from 'react-router-dom';
 
+import { ServerVersion } from './server-version';
 import { SettingsItem } from './settings-item';
 import { UserDropdown } from './user-dropdown';
 
@@ -112,11 +113,12 @@ export function Nav({ isCollapsed = false }: NavProps) {
       </nav>
       <div
         className={cn(
-          'flex gap-1 px-2 flex-col overflow-hidden',
+          'flex gap-2 px-2 flex-col overflow-hidden',
           isCollapsed && 'items-center px-0 gap-1'
         )}
       >
         <UserDropdown isCollapsed={isCollapsed} />
+        {isCollapsed ? null : <ServerVersion />}
       </div>
     </div>
   );

packages/frontend/admin/src/modules/nav/server-version.tsx

@@ -0,0 +1,37 @@
+import { cssVarV2 } from '@toeverything/theme/v2';
+import { useCallback } from 'react';
+
+import { Button } from '../../components/ui/button';
+import { useServerConfig } from '../common';
+
+export const ServerVersion = () => {
+  const serverConfig = useServerConfig();
+  const availableUpgrade = serverConfig?.availableUpgrade;
+  const version = serverConfig?.version;
+
+  const handleClick = useCallback(() => {
+    window.open(availableUpgrade.url, '_blank');
+  }, [availableUpgrade]);
+
+  if (availableUpgrade) {
+    return (
+      <Button
+        variant="outline"
+        className="flex items-center justify-center gap-1 text-xs p-2 font-medium"
+        onClick={handleClick}
+      >
+        New Version <span>{availableUpgrade.version}</span>Available
+      </Button>
+    );
+  }
+  return (
+    <div
+      className="flex items-center justify-between pt-2 border-t px-2 text-xs"
+      style={{
+        color: cssVarV2('text/tertiary'),
+      }}
+    >
+      ServerVersion<span>v{version}</span>
+    </div>
+  );
+};