diff --git a/apps/web/src/components/header/header-right-items/SyncUser.tsx b/apps/web/src/components/header/header-right-items/SyncUser.tsx
index 2bf8d415ab..28a552a4f2 100644
--- a/apps/web/src/components/header/header-right-items/SyncUser.tsx
+++ b/apps/web/src/components/header/header-right-items/SyncUser.tsx
@@ -3,7 +3,26 @@ import { useAppState } from '@/providers/app-state-provider';
import { displayFlex, styled, Tooltip, IconButton } from '@affine/component';
import { useTranslation } from '@affine/i18n';
import { useModal } from '@/store/globalModal';
+import { useEffect, useState } from 'react';
+import { WorkspaceUnit } from '@affine/datacenter';
+const NoNetWorkIcon = () => {
+ return (
+
+ );
+};
const IconWrapper = styled.div(() => {
return {
width: '32px',
@@ -13,13 +32,56 @@ const IconWrapper = styled.div(() => {
...displayFlex('center', 'center'),
};
});
+
+const getStatus = (workspace: WorkspaceUnit | null) => {
+ if (!navigator.onLine) {
+ return 'offline';
+ }
+ if (workspace?.provider === 'local') {
+ return 'local';
+ }
+ return 'cloud';
+};
export const SyncUser = () => {
const { currentWorkspace } = useAppState();
const { triggerEnableWorkspaceModal } = useModal();
+ const [status, setStatus] = useState<'offline' | 'local' | 'cloud'>(
+ getStatus(currentWorkspace)
+ );
+
+ useEffect(() => {
+ const online = () => {
+ setStatus(getStatus(currentWorkspace));
+ };
+
+ const offline = () => {
+ setStatus('offline');
+ };
+ window.addEventListener('online', online);
+ window.addEventListener('offline', offline);
+ return () => {
+ window.removeEventListener('online', online);
+ window.removeEventListener('offline', offline);
+ };
+ }, [currentWorkspace]);
+
const { t } = useTranslation();
- if (currentWorkspace?.provider === 'local') {
+ if (status === 'offline') {
+ return (
+
+
+
+
+
+ );
+ }
+
+ if (status === 'local') {
return (