cinny/src/app/pages/client/SyncStatus.tsx

import { MatrixClient, SyncState } from 'matrix-js-sdk';
import React, { useCallback, useState } from 'react';
import { useAtomValue } from 'jotai';
import { Box, config, Line, Text } from 'folds';
import { useSyncState } from '../../hooks/useSyncState';
import { ContainerColor } from '../../styles/ContainerColor.css';
import { serverStatusAtom } from '../../state/serverStatus';
import { serverConfirmedUpSince } from '../../utils/kumaStatus';

type StateData = {
  current: SyncState | null;
  previous: SyncState | null | undefined;
};

type SyncStatusProps = {
  mx: MatrixClient;
};
export function SyncStatus({ mx }: SyncStatusProps) {
  const serverStatus = useAtomValue(serverStatusAtom);
  const [stateData, setStateData] = useState<StateData>({
    current: null,
    previous: undefined,
  });

  useSyncState(
    mx,
    useCallback((current, previous) => {
      setStateData((s) => {
        if (s.current === current && s.previous === previous) {
          return s;
        }
        return { current, previous };
      });
    }, []),
  );

  if (
    (stateData.current === SyncState.Prepared ||
      stateData.current === SyncState.Syncing ||
      stateData.current === SyncState.Catchup) &&
    stateData.previous !== SyncState.Syncing
  ) {
    return (
      <Box direction="Column" shrink="No">
        <Box
          className={ContainerColor({ variant: 'Success' })}
          style={{ padding: `${config.space.S100} 0` }}
          alignItems="Center"
          justifyContent="Center"
          role="status"
          aria-live="polite"
        >
          <Text size="L400">Connecting...</Text>
        </Box>
        <Line variant="Success" size="300" />
      </Box>
    );
  }

  // [Gitea #124] When Kuma confirms the homeserver is down, the status banner
  // says so ("Lotus Chat's server is down…") instead of "Connection Lost!".
  const serverDown = serverStatus.status?.homeserver === 'down';
  // Only blame the user's connection when Kuma has checked the server since
  // the drop and it was fine (a stale "up" from before proves nothing).
  const serverUp = serverConfirmedUpSince(serverStatus.status, serverStatus.lostAt);

  if (stateData.current === SyncState.Reconnecting && !serverDown) {
    return (
      <Box direction="Column" shrink="No">
        <Box
          className={ContainerColor({ variant: 'Warning' })}
          style={{ padding: `${config.space.S100} 0` }}
          alignItems="Center"
          justifyContent="Center"
          role="status"
          aria-live="polite"
        >
          <Text size="L400">
            {serverUp
              ? "Connection lost. Our status checks say Lotus Chat's server is up, so it may be your internet connection. Reconnecting…"
              : 'Connection Lost! Reconnecting...'}
          </Text>
        </Box>
        <Line variant="Warning" size="300" />
      </Box>
    );
  }

  if (stateData.current === SyncState.Error && !serverDown) {
    return (
      <Box direction="Column" shrink="No">
        <Box
          className={ContainerColor({ variant: 'Critical' })}
          style={{ padding: `${config.space.S100} 0` }}
          alignItems="Center"
          justifyContent="Center"
          role="alert"
          aria-live="assertive"
        >
          <Text size="L400">
            {serverUp
              ? "Connection lost. Our status checks say Lotus Chat's server is up, so check your internet connection."
              : 'Connection Lost!'}
          </Text>
        </Box>
        <Line variant="Critical" size="300" />
      </Box>
    );
  }

  return null;
}