snapshot of https://github.com/RocketChat/Rocket.Chat.git (develop, 2026-09-16; blobs > 131072B omitted)

apps/meteor/client/components/connectionStatus/ConnectionStatusBar.stories.tsx

@@ -0,0 +1,84 @@
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import type { ServerContextValue } from '@rocket.chat/ui-contexts';
+import type { Meta, StoryFn } from '@storybook/react';
+import { action } from 'storybook/actions';
+
+import ConnectionStatusBar from './ConnectionStatusBar';
+
+export default {
+	component: ConnectionStatusBar,
+	parameters: {
+		layout: 'fullscreen',
+	},
+} satisfies Meta<typeof ConnectionStatusBar>;
+
+const stateDecorator = (value: Partial<ServerContextValue>) =>
+	mockAppRoot()
+		.withServerContext({
+			...value,
+			reconnect: action('reconnect'),
+			disconnect: action('disconnect'),
+		})
+		.buildStoryDecorator();
+
+const Template: StoryFn<typeof ConnectionStatusBar> = () => <ConnectionStatusBar />;
+
+export const Connected = {
+	render: Template,
+
+	decorators: [
+		stateDecorator({
+			connected: true,
+			status: 'connected',
+			retryTime: undefined,
+		}),
+	],
+};
+
+export const Connecting = {
+	render: Template,
+
+	decorators: [
+		stateDecorator({
+			connected: false,
+			status: 'connecting',
+			retryTime: undefined,
+		}),
+	],
+};
+
+export const Failed = {
+	render: Template,
+
+	decorators: [
+		stateDecorator({
+			connected: false,
+			status: 'failed',
+			retryTime: undefined,
+		}),
+	],
+};
+
+export const Waiting = {
+	render: Template,
+
+	decorators: [
+		stateDecorator({
+			connected: false,
+			status: 'waiting',
+			retryTime: Date.now() + 300000,
+		}),
+	],
+};
+
+export const Offline = {
+	render: Template,
+
+	decorators: [
+		stateDecorator({
+			connected: false,
+			status: 'offline',
+			retryTime: undefined,
+		}),
+	],
+};

apps/meteor/client/components/connectionStatus/ConnectionStatusBar.tsx

@@ -0,0 +1,102 @@
+import { css } from '@rocket.chat/css-in-js';
+import { Box, Button, Icon, Palette } from '@rocket.chat/fuselage';
+import { useConnectionStatus } from '@rocket.chat/ui-contexts';
+import { useTranslation } from 'react-i18next';
+
+import { useReconnectCountdown } from './useReconnectCountdown';
+
+const connectionStatusBarStyle = css`
+	color: ${Palette.statusColor['status-font-on-warning']};
+	background-color: ${Palette.surface['surface-tint']};
+	border-color: ${Palette.statusColor['status-font-on-warning']};
+
+	position: fixed;
+	z-index: 1000000;
+
+	display: flex;
+	column-gap: 8px;
+	justify-content: space-between;
+	align-items: center;
+
+	.rcx-connection-status-bar--wrapper {
+		display: flex;
+		flex: 1 1 auto;
+		align-items: center;
+		min-width: 0;
+		column-gap: 8px;
+	}
+	.rcx-connection-status-bar--content {
+		display: flex;
+		align-items: center;
+		min-width: 0;
+		column-gap: 8px;
+	}
+	.rcx-connection-status-bar--info {
+		color: ${Palette.text['font-default']};
+	}
+	.rcx-connection-status-bar--action {
+		flex-shrink: 0;
+	}
+
+	@media (max-width: 767px) {
+		align-items: flex-start;
+
+		.rcx-connection-status-bar--wrapper {
+			align-items: flex-start;
+		}
+
+		.rcx-connection-status-bar--content {
+			flex-direction: column;
+			align-items: flex-start;
+			row-gap: 2px;
+			column-gap: 0;
+		}
+	}
+`;
+
+function ConnectionStatusBar() {
+	const { connected, retryTime, status, reconnect } = useConnectionStatus();
+	const reconnectCountdown = useReconnectCountdown(retryTime, status);
+	const { t } = useTranslation();
+
+	if (connected) {
+		return null;
+	}
+
+	return (
+		<Box
+			className={connectionStatusBarStyle}
+			rcx-connection-status-bar
+			insetBlockStart={0}
+			paddingBlock={4}
+			paddingInline={12}
+			width='100%'
+			borderBlockEndWidth={2}
+			role='alert'
+			fontScale='p2'
+		>
+			<span className='rcx-connection-status-bar--wrapper'>
+				<Icon name='warning' />
+				<span className='rcx-connection-status-bar--content'>
+					<strong>{t('meteor_status', { context: status })}</strong>
+					{['waiting', 'failed', 'offline'].includes(status) && (
+						<span className='rcx-connection-status-bar--info'>
+							{status === 'waiting' ? t('meteor_status_reconnect_in', { count: reconnectCountdown }) : t('meteor_status_try_again_later')}
+						</span>
+					)}
+				</span>
+			</span>
+			<Button
+				className='rcx-connection-status-bar--action'
+				primary
+				onClick={reconnect}
+				small
+				disabled={['connected', 'connecting'].includes(status)}
+			>
+				{t('Connect')}
+			</Button>
+		</Box>
+	);
+}
+
+export default ConnectionStatusBar;

apps/meteor/client/components/connectionStatus/useReconnectCountdown.ts

@@ -0,0 +1,42 @@
+import { useEffect, useRef, useState } from 'react';
+
+const getReconnectCountdown = (retryTime: number): number => {
+	const timeDiff = retryTime - Date.now();
+	return (timeDiff > 0 && Math.round(timeDiff / 1000)) || 0;
+};
+
+export const useReconnectCountdown = (
+	retryTime: number | undefined,
+	status: 'connected' | 'connecting' | 'failed' | 'waiting' | 'offline',
+): number => {
+	const reconnectionTimerRef = useRef<ReturnType<typeof setInterval>>(undefined);
+	const [reconnectCountdown, setReconnectCountdown] = useState(() => (retryTime ? getReconnectCountdown(retryTime) : 0));
+
+	useEffect(() => {
+		if (status === 'waiting') {
+			if (reconnectionTimerRef.current) {
+				return;
+			}
+
+			reconnectionTimerRef.current = setInterval(() => {
+				retryTime && setReconnectCountdown(getReconnectCountdown(retryTime));
+			}, 500);
+			return () => {
+				reconnectionTimerRef.current && clearInterval(reconnectionTimerRef.current);
+				reconnectionTimerRef.current = undefined;
+			};
+		}
+
+		reconnectionTimerRef.current && clearInterval(reconnectionTimerRef.current);
+		reconnectionTimerRef.current = undefined;
+	}, [retryTime, status]);
+
+	useEffect(
+		() => (): void => {
+			reconnectionTimerRef.current && clearInterval(reconnectionTimerRef.current);
+		},
+		[],
+	);
+
+	return reconnectCountdown;
+};