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

import React, { useState, useSyncExternalStore } from 'react';
import FocusTrap from 'focus-trap-react';
import { Box, Button, config, Line, Overlay, OverlayBackdrop, OverlayCenter, Text } from 'folds';
import { ContainerColor } from '../../styles/ContainerColor.css';
import { getKeyUploadWatch, subscribeKeyUploadWatch } from '../../utils/keyUploadWatch';
import { LogoutDialog } from '../../components/LogoutDialog';
import { stopPropagation } from '../../utils/keyboard';

/**
 * [Gitea #201 KE-1] "Encryption on this device is out of sync." Shown while
 * the server keeps rejecting this device's key uploads (keyUploadWatch). The
 * fix is a fresh login, so the action opens the normal logout dialog, which
 * already warns if the device isn't verified / backed up. Hideable for this
 * session only: the problem doesn't go away by itself.
 */
export function KeyUploadBanner() {
  const { stuck, lastError } = useSyncExternalStore(subscribeKeyUploadWatch, getKeyUploadWatch);
  const [hidden, setHidden] = useState(false);
  const [details, setDetails] = useState(false);
  const [logout, setLogout] = useState(false);

  if (!stuck || hidden) return null;

  return (
    <Box direction="Column" shrink="No">
      <Box
        className={ContainerColor({ variant: 'Critical' })}
        style={{ padding: `${config.space.S100} ${config.space.S300}` }}
        direction="Column"
        alignItems="Center"
        gap="100"
        role="alert"
      >
        <Box alignItems="Center" gap="300" wrap="Wrap" justifyContent="Center">
          <Text size="L400" align="Center">
            Encryption on this device is out of sync with the server. New encrypted messages and
            calls may fail until you sign out and back in.
          </Text>
          <Button
            size="300"
            variant="Critical"
            fill="Solid"
            radii="300"
            onClick={() => setLogout(true)}
          >
            <Text size="B300">Fix: sign out…</Text>
          </Button>
          <Button
            size="300"
            variant="Critical"
            fill="Soft"
            radii="300"
            onClick={() => setDetails((v) => !v)}
            aria-expanded={details}
          >
            <Text size="B300">Details</Text>
          </Button>
          <Button
            size="300"
            variant="Critical"
            fill="None"
            radii="300"
            onClick={() => setHidden(true)}
          >
            <Text size="B300">Hide</Text>
          </Button>
        </Box>
        {details && (
          <Box direction="Column" gap="100" style={{ maxWidth: 640 }}>
            <Text size="T200" align="Center">
              The server already has encryption keys this device thinks it hasn&apos;t sent, so it
              rejects every new upload and other people can&apos;t start fresh encrypted sessions
              with you. This usually happens after the browser cleared this site&apos;s storage
              while you stayed signed in. Before signing out, make sure this device is verified or
              key backup is on (Settings → Privacy & security), so your message history comes back
              when you sign in again.
            </Text>
            {lastError && (
              <Text size="T200" align="Center" priority="300" style={{ wordBreak: 'break-word' }}>
                Server said: {lastError}
              </Text>
            )}
          </Box>
        )}
      </Box>
      <Line variant="Critical" size="300" />
      {logout && (
        <Overlay open backdrop={<OverlayBackdrop />}>
          <OverlayCenter>
            <FocusTrap
              focusTrapOptions={{
                onDeactivate: () => setLogout(false),
                clickOutsideDeactivates: true,
                escapeDeactivates: stopPropagation,
              }}
            >
              <LogoutDialog handleClose={() => setLogout(false)} />
            </FocusTrap>
          </OverlayCenter>
        </Overlay>
      )}
    </Box>
  );
}