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

apps/meteor/client/sidebar/sections/AirGappedRestrictionBanner/AirGappedRestrictionBanner.tsx

@@ -0,0 +1,25 @@
+import { SidebarBanner } from '@rocket.chat/fuselage';
+import { useTranslation } from 'react-i18next';
+
+import AirGappedRestrictionWarning from './AirGappedRestrictionWarning';
+import { links } from '../../../lib/links';
+
+export type AirGappedRestrictionSectionProps = { isRestricted: boolean; remainingDays: number };
+
+const AirGappedRestrictionSection = ({ isRestricted, remainingDays }: AirGappedRestrictionSectionProps) => {
+	const { t } = useTranslation();
+
+	return (
+		<SidebarBanner
+			title={<AirGappedRestrictionWarning isRestricted={isRestricted} remainingDays={remainingDays} />}
+			linkText={t('Learn_more')}
+			linkProps={{
+				target: '_blank',
+				rel: 'noopener noreferrer',
+				href: links.go.airgappedRestriction,
+			}}
+		/>
+	);
+};
+
+export default AirGappedRestrictionSection;

apps/meteor/client/sidebar/sections/AirGappedRestrictionBanner/AirGappedRestrictionWarning.tsx

@@ -0,0 +1,28 @@
+import { Box } from '@rocket.chat/fuselage';
+import { Trans } from 'react-i18next';
+
+export type AirGappedRestrictionWarningProps = { isRestricted: boolean; remainingDays: number };
+
+const AirGappedRestrictionWarning = ({ isRestricted, remainingDays }: AirGappedRestrictionWarningProps) => {
+	if (isRestricted) {
+		return (
+			<Trans i18nKey='Airgapped_workspace_restriction'>
+				This air-gapped workspace is in read-only mode.{' '}
+				<Box fontScale='p2' is='span'>
+					Connect it to internet or upgraded to a premium plan to restore full functionality.
+				</Box>
+			</Trans>
+		);
+	}
+
+	return (
+		<Trans i18nKey='Airgapped_workspace_warning' values={{ remainingDays }}>
+			This air-gapped workspace will enter read-only mode in {remainingDays} days.{' '}
+			<Box fontScale='p2' is='span'>
+				Connect it to internet or upgrade to a premium plan to prevent this.
+			</Box>
+		</Trans>
+	);
+};
+
+export default AirGappedRestrictionWarning;

apps/meteor/client/sidebar/sections/BannerSection.spec.tsx

@@ -0,0 +1,63 @@
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import { render, screen } from '@testing-library/react';
+
+import BannerSection from './BannerSection';
+
+// TODO: test presence banner
+describe('Sidebar -> BannerSection -> Airgapped restriction', () => {
+	it('Should render null if restricted and not admin', () => {
+		render(<BannerSection />, {
+			wrapper: mockAppRoot()
+				.withJohnDoe({ roles: ['user'] })
+				.withSetting('Cloud_Workspace_AirGapped_Restrictions_Remaining_Days', 0)
+				.build(),
+		});
+
+		expect(screen.queryByText('air-gapped', { exact: false })).not.toBeInTheDocument();
+	});
+
+	it('Should render null if admin and not restricted or warning', () => {
+		render(<BannerSection />, {
+			wrapper: mockAppRoot().withJohnDoe().withSetting('Cloud_Workspace_AirGapped_Restrictions_Remaining_Days', 8).build(),
+		});
+
+		expect(screen.queryByText('air-gapped', { exact: false })).not.toBeInTheDocument();
+	});
+
+	it('Should render warning message if admin and warning phase', () => {
+		render(<BannerSection />, {
+			wrapper: mockAppRoot()
+				.withJohnDoe()
+				.withRole('admin')
+				.withSetting('Cloud_Workspace_AirGapped_Restrictions_Remaining_Days', 7)
+				.build(),
+		});
+
+		expect(screen.getByText('will enter read-only', { exact: false })).toBeInTheDocument();
+	});
+
+	it('Should render restriction message if admin and restricted phase', () => {
+		render(<BannerSection />, {
+			wrapper: mockAppRoot()
+				.withJohnDoe()
+				.withRole('admin')
+				.withSetting('Cloud_Workspace_AirGapped_Restrictions_Remaining_Days', 0)
+				.build(),
+		});
+
+		expect(screen.getByText('is in read-only', { exact: false })).toBeInTheDocument();
+	});
+
+	it('Should render restriction message instead of another banner', () => {
+		render(<BannerSection />, {
+			wrapper: mockAppRoot()
+				.withJohnDoe()
+				.withRole('admin')
+				.withSetting('Cloud_Workspace_AirGapped_Restrictions_Remaining_Days', 0)
+				.withSetting('Presence_broadcast_disabled', true)
+				.build(),
+		});
+
+		expect(screen.getByText('is in read-only', { exact: false })).toBeInTheDocument();
+	});
+});

apps/meteor/client/sidebar/sections/BannerSection.tsx

@@ -0,0 +1,26 @@
+import { useSessionStorage } from '@rocket.chat/fuselage-hooks';
+import { useRole, useSetting } from '@rocket.chat/ui-contexts';
+
+import AirGappedRestrictionBanner from './AirGappedRestrictionBanner/AirGappedRestrictionBanner';
+import StatusDisabledBanner from './StatusDisabledBanner';
+import { useAirGappedRestriction } from '../../hooks/useAirGappedRestriction';
+
+const BannerSection = () => {
+	const [isRestricted, isWarning, remainingDays] = useAirGappedRestriction();
+	const isAdmin = useRole('admin');
+
+	const [bannerDismissed, setBannerDismissed] = useSessionStorage('presence_cap_notifier', false);
+	const presenceDisabled = useSetting('Presence_broadcast_disabled', false);
+
+	if ((isWarning || isRestricted) && isAdmin) {
+		return <AirGappedRestrictionBanner isRestricted={isRestricted} remainingDays={remainingDays} />;
+	}
+
+	if (presenceDisabled && !bannerDismissed) {
+		return <StatusDisabledBanner onDismiss={() => setBannerDismissed(true)} />;
+	}
+
+	return null;
+};
+
+export default BannerSection;

apps/meteor/client/sidebar/sections/NowPlayingSection.tsx

@@ -0,0 +1,85 @@
+import { AudioPlayerControls, Box, IconButton } from '@rocket.chat/fuselage';
+import { UserAvatar } from '@rocket.chat/ui-avatar';
+import { useUserDisplayName } from '@rocket.chat/ui-client';
+import { useTranslation } from 'react-i18next';
+
+import SidebarCard from './SidebarCard';
+import { useFormatMemorySize } from '../../hooks/useFormatMemorySize';
+import { setMessageJumpQueryStringParameter } from '../../lib/utils/setMessageJumpQueryStringParameter';
+import { useMediaPlayer } from '../../providers/MediaPlayerProvider';
+import { useGoToRoom } from '../../views/room/hooks/useGoToRoom';
+
+/**
+ * Persistent audio card pinned to the bottom of the sidebar (design 1c).
+ * It drives the shared audio element, so it stays available while a track is
+ * loaded — including after switching or closing the room, or closing the thread
+ * the audio was played from.
+ */
+const NowPlayingSection = () => {
+	const { t } = useTranslation();
+	const { track, playing, currentTime, duration, playbackRate, toggle, seek, cyclePlaybackRate, close } = useMediaPlayer();
+	const goToRoom = useGoToRoom();
+	const formatMemorySize = useFormatMemorySize();
+	const displayName = useUserDisplayName({ name: track?.name, username: track?.username });
+
+	if (!track) {
+		return null;
+	}
+
+	const openConversation = async () => {
+		if (!track.rid) {
+			return;
+		}
+		await goToRoom(track.rid);
+		if (track.mid) {
+			void setMessageJumpQueryStringParameter(track.mid);
+		}
+	};
+
+	return (
+		<SidebarCard>
+			<Box display='flex' alignItems='center' justifyContent='space-between' marginBlockEnd={10} style={{ gap: 8 }}>
+				<Box
+					display='flex'
+					alignItems='center'
+					minWidth={0}
+					flexGrow={1}
+					role='button'
+					tabIndex={0}
+					onClick={() => void openConversation()}
+					onKeyDown={(e) => {
+						if (e.key === 'Enter' || e.key === ' ') {
+							e.preventDefault();
+							void openConversation();
+						}
+					}}
+					title={t('Jump_to_message')}
+					style={{ gap: 8, cursor: track.rid ? 'pointer' : 'default' }}
+				>
+					{track.username && <UserAvatar username={track.username} size='x24' />}
+					<Box minWidth={0}>
+						<Box fontScale='p2b' color='default' withTruncatedText>
+							{displayName || t('Audio')}
+						</Box>
+						<Box fontScale='micro' color='hint' withTruncatedText>
+							{track.size ? `${track.title} (${formatMemorySize(track.size)})` : track.title}
+						</Box>
+					</Box>
+				</Box>
+				<IconButton mini icon='cross' onClick={close} title={t('Close')} aria-label={t('Close')} />
+			</Box>
+
+			<AudioPlayerControls
+				isPlaying={playing}
+				currentTime={currentTime}
+				durationTime={duration}
+				playbackSpeed={playbackRate}
+				onTogglePlay={toggle}
+				onSeek={seek}
+				onChangePlaybackSpeed={cyclePlaybackRate}
+			/>
+		</SidebarCard>
+	);
+};
+
+export default NowPlayingSection;

apps/meteor/client/sidebar/sections/SidebarCard.tsx

@@ -0,0 +1,24 @@
+import { Box } from '@rocket.chat/fuselage';
+import type { ReactNode } from 'react';
+
+export type SidebarCardProps = { children: ReactNode };
+
+/**
+ * Reusable elevated surface for sidebar sections: a padded, rounded, subtly
+ * bordered container in the sidebar tint.
+ */
+const SidebarCard = ({ children }: SidebarCardProps) => (
+	<Box
+		margin={8}
+		padding={10}
+		borderRadius='x8'
+		borderWidth='default'
+		borderStyle='solid'
+		borderColor='stroke-light'
+		backgroundColor='surface-tint'
+	>
+		{children}
+	</Box>
+);
+
+export default SidebarCard;

apps/meteor/client/sidebar/sections/StatusDisabledBanner.tsx

@@ -0,0 +1,22 @@
+import { SidebarBanner } from '@rocket.chat/fuselage';
+import { useTranslation } from 'react-i18next';
+
+import { useStatusDisabledModal } from '../../views/admin/customUserStatus/hooks/useStatusDisabledModal';
+
+export type StatusDisabledSectionProps = { onDismiss: () => void };
+
+const StatusDisabledSection = ({ onDismiss }: StatusDisabledSectionProps) => {
+	const { t } = useTranslation();
+	const handleStatusDisabledModal = useStatusDisabledModal();
+
+	return (
+		<SidebarBanner
+			title={t('User_status_temporarily_disabled')}
+			linkText={t('Learn_more')}
+			onClose={onDismiss}
+			linkProps={{ onClick: handleStatusDisabledModal, tabIndex: 0 }}
+		/>
+	);
+};
+
+export default StatusDisabledSection;