fix(app): backport rendering improvements (#1580)

fluxer_app/src/features/moderation/components/modals/BanMemberModal.tsx

@@ -21,6 +21,7 @@ import {Combobox as FormCombobox} from '@app/features/ui/components/form/FormCom
 import {Input} from '@app/features/ui/components/form/FormInput';
 import {RadioGroup} from '@app/features/ui/radio_group/RadioGroup';
 import type {User} from '@app/features/user/models/User';
+import * as DisplayNameUtils from '@app/features/user/utils/DisplayNameUtils';
 import bannedMp4 from '@app/media/videos/banned.mp4';
 import bannedWebm from '@app/media/videos/banned.webm';
 import bannedPoster from '@app/media/videos/banned.webp';
@@ -129,6 +130,7 @@ export const BanMemberModal: React.FC<{guildId: string; targetUser: User}> = obs
 	const [banDuration, setBanDuration] = useState<number>(0);
 	const [isBanDurationCustom, setIsBanDurationCustom] = useState(false);
 	const [isBanning, setIsBanning] = useState(false);
+	const targetUserTag = DisplayNameUtils.formatTagForStreamerMode(targetUser.tag);
 	const getBanDurationOptions = useCallback(
 		(): ReadonlyArray<ComboboxOption> => [
 			{value: 0, label: i18n._(PERMANENT_DESCRIPTOR)},
@@ -151,7 +153,7 @@ export const BanMemberModal: React.FC<{guildId: string; targetUser: User}> = obs
 			await GuildCommands.banMember(guildId, targetUser.id, deleteMessageDays, reason || undefined, banDuration);
 			ToastCommands.createToast({
 				type: 'success',
-				children: <Trans>Banned {targetUser.tag} from the community</Trans>,
+				children: <Trans>Banned {targetUserTag} from the community</Trans>,
 			});
 			ModalCommands.pop();
 		} catch (error) {
@@ -168,7 +170,7 @@ export const BanMemberModal: React.FC<{guildId: string; targetUser: User}> = obs
 	return (
 		<Modal.Root size="small" centered data-flx="moderation.ban-member-modal.modal-root">
 			<Modal.Header
-				title={i18n._(BAN_DESCRIPTOR, {tag: targetUser.tag})}
+				title={i18n._(BAN_DESCRIPTOR, {tag: targetUserTag})}
 				data-flx="moderation.ban-member-modal.modal-header"
 			/>
 			<Modal.Content data-flx="moderation.ban-member-modal.modal-content">

fluxer_app/src/features/moderation/components/modals/KickMemberModal.tsx

@@ -7,6 +7,7 @@ import {showModerationErrorModal} from '@app/features/moderation/components/aler
 import {Logger} from '@app/features/platform/utils/AppLogger';
 import * as ToastCommands from '@app/features/ui/commands/ToastCommands';
 import type {User} from '@app/features/user/models/User';
+import * as DisplayNameUtils from '@app/features/user/utils/DisplayNameUtils';
 import {msg} from '@lingui/core/macro';
 import {Trans, useLingui} from '@lingui/react/macro';
 import {observer} from 'mobx-react-lite';
@@ -19,12 +20,13 @@ const KICK_DESCRIPTOR = msg({
 const logger = new Logger('KickMemberModal');
 export const KickMemberModal: React.FC<{guildId: string; targetUser: User}> = observer(({guildId, targetUser}) => {
 	const {i18n} = useLingui();
+	const targetUserTag = DisplayNameUtils.formatTagForStreamerMode(targetUser.tag);
 	const handleKick = async () => {
 		try {
 			await GuildMemberCommands.kick(guildId, targetUser.id);
 			ToastCommands.createToast({
 				type: 'success',
-				children: <Trans>Kicked {targetUser.tag} from the community</Trans>,
+				children: <Trans>Kicked {targetUserTag} from the community</Trans>,
 			});
 		} catch (error) {
 			logger.error('Failed to kick member:', error);
@@ -43,7 +45,7 @@ export const KickMemberModal: React.FC<{guildId: string; targetUser: User}> = ob
 				<div data-flx="moderation.kick-member-modal.div">
 					<Trans>
 						Are you sure you want to kick{' '}
-						<strong data-flx="moderation.kick-member-modal.strong">{targetUser.tag}</strong> from the community? They
+						<strong data-flx="moderation.kick-member-modal.strong">{targetUserTag}</strong> from the community? They
 						will be able to rejoin with a new invite.
 					</Trans>
 				</div>

fluxer_app/src/features/moderation/components/modals/RemoveTimeoutModal.tsx

@@ -9,6 +9,7 @@ import {Button} from '@app/features/ui/button/Button';
 import * as ModalCommands from '@app/features/ui/commands/ModalCommands';
 import * as ToastCommands from '@app/features/ui/commands/ToastCommands';
 import type {User} from '@app/features/user/models/User';
+import * as DisplayNameUtils from '@app/features/user/utils/DisplayNameUtils';
 import {Trans, useLingui} from '@lingui/react/macro';
 import {observer} from 'mobx-react-lite';
 import type React from 'react';
@@ -24,13 +25,14 @@ interface RemoveTimeoutModalProps {
 export const RemoveTimeoutModal: React.FC<RemoveTimeoutModalProps> = observer(({guildId, targetUser}) => {
 	const {i18n} = useLingui();
 	const [isSubmitting, setIsSubmitting] = useState(false);
+	const targetUserTag = DisplayNameUtils.formatTagForStreamerMode(targetUser.tag);
 	const handleRemove = async () => {
 		setIsSubmitting(true);
 		try {
 			await GuildMemberCommands.timeout(guildId, targetUser.id, null);
 			ToastCommands.createToast({
 				type: 'success',
-				children: <Trans>Removed timeout from {targetUser.tag}</Trans>,
+				children: <Trans>Removed timeout from {targetUserTag}</Trans>,
 			});
 			ModalCommands.pop();
 		} catch (error) {
@@ -52,7 +54,7 @@ export const RemoveTimeoutModal: React.FC<RemoveTimeoutModalProps> = observer(({
 					<Modal.Description data-flx="moderation.remove-timeout-modal.description">
 						<Trans>
 							Removing the timeout will allow{' '}
-							<strong data-flx="moderation.remove-timeout-modal.strong">{targetUser.tag}</strong> to send messages,
+							<strong data-flx="moderation.remove-timeout-modal.strong">{targetUserTag}</strong> to send messages,
 							react, and join voice channels again.
 						</Trans>
 					</Modal.Description>

fluxer_app/src/features/moderation/components/modals/TimeoutMemberModal.module.css

@@ -1,11 +1,5 @@
 /* SPDX-License-Identifier: AGPL-3.0-or-later */
 
-.durationInputs {
-	display: flex;
-	gap: 0.75rem;
-	align-items: flex-start;
-}
-
 .hint {
 	margin: 0;
 }

fluxer_app/src/features/moderation/components/modals/TimeoutMemberModal.tsx

@@ -10,56 +10,16 @@ import {Button} from '@app/features/ui/button/Button';
 import * as ModalCommands from '@app/features/ui/commands/ModalCommands';
 import * as ToastCommands from '@app/features/ui/commands/ToastCommands';
 import {Combobox as FormCombobox} from '@app/features/ui/components/form/FormCombobox';
-import {Input, Textarea} from '@app/features/ui/components/form/FormInput';
+import {Textarea} from '@app/features/ui/components/form/FormInput';
 import {formatGuildSettingsPath} from '@app/features/user/components/settings_utils/GuildSettingsConstants';
 import type {User} from '@app/features/user/models/User';
-import {
-	DAYS_PER_YEAR,
-	SECONDS_PER_DAY,
-	SECONDS_PER_HOUR,
-	SECONDS_PER_MINUTE,
-} from '@fluxer/date_utils/src/DateConstants';
+import * as DisplayNameUtils from '@app/features/user/utils/DisplayNameUtils';
 import {msg} from '@lingui/core/macro';
 import {Trans, useLingui} from '@lingui/react/macro';
 import {observer} from 'mobx-react-lite';
 import type React from 'react';
-import {useCallback, useMemo, useState} from 'react';
+import {useMemo, useState} from 'react';
 
-const SECONDS_DESCRIPTOR = msg({
-	message: 'Seconds',
-	comment:
-		'Custom-duration unit option in the timeout-member modal. Plural unit label paired with the numeric duration input.',
-});
-const MINUTES_DESCRIPTOR = msg({
-	message: 'Minutes',
-	comment:
-		'Custom-duration unit option in the timeout-member modal. Plural unit label paired with the numeric duration input.',
-});
-const HOURS_DESCRIPTOR = msg({
-	message: 'Hours',
-	comment:
-		'Custom-duration unit option in the timeout-member modal. Plural unit label paired with the numeric duration input.',
-});
-const DAYS_DESCRIPTOR = msg({
-	message: 'Days',
-	comment:
-		'Custom-duration unit option in the timeout-member modal. Plural unit label paired with the numeric duration input.',
-});
-const CUSTOM_DURATION_DESCRIPTOR = msg({
-	message: 'Custom duration',
-	comment:
-		'Last option in the timeout duration dropdown of the timeout-member modal. Reveals a numeric input plus a unit dropdown.',
-});
-const DURATION_MUST_BE_GREATER_THAN_ZERO_DESCRIPTOR = msg({
-	message: 'Duration must be greater than zero.',
-	comment:
-		'Inline validation error on the custom duration input of the timeout-member modal when the value is zero or negative.',
-});
-const TIMEOUT_CANNOT_EXCEED_365_DAYS_DESCRIPTOR = msg({
-	message: 'Timeout cannot exceed 365 days.',
-	comment:
-		'Inline validation error on the custom duration input of the timeout-member modal when the resolved duration exceeds the 365-day cap.',
-});
 const TIMEOUT_DESCRIPTOR = msg({
 	message: 'Timeout {tag}',
 	comment:
@@ -73,11 +33,6 @@ const HOW_LONG_THIS_USER_SHOULD_BE_TIMED_OUT_DESCRIPTOR = msg({
 	message: 'How long they stay timed out.',
 	comment: 'Helper text under the timeout duration dropdown in the timeout-member modal.',
 });
-const UNIT_DESCRIPTOR = msg({
-	message: 'Unit',
-	comment:
-		'Label of the unit selector next to the custom duration input in the timeout-member modal. Short standalone label.',
-});
 const REASON_OPTIONAL_DESCRIPTOR = msg({
 	message: 'Reason (optional)',
 	comment:
@@ -85,79 +40,32 @@ const REASON_OPTIONAL_DESCRIPTOR = msg({
 });
 const logger = new Logger('TimeoutMemberModal');
 
-interface ComboboxOption<V extends string | number = number> {
-	value: V;
-	label: string;
-}
-
 interface TimeoutMemberModalProps {
 	guildId: string;
 	targetUser: User;
 }
 
-const MAX_TIMEOUT_SECONDS = DAYS_PER_YEAR * SECONDS_PER_DAY;
-
-type CustomDurationUnit = 'seconds' | 'minutes' | 'hours' | 'days';
-
-const CUSTOM_DURATION_MULTIPLIERS: Record<CustomDurationUnit, number> = {
-	seconds: 1,
-	minutes: SECONDS_PER_MINUTE,
-	hours: SECONDS_PER_HOUR,
-	days: SECONDS_PER_DAY,
-};
 export const TimeoutMemberModal: React.FC<TimeoutMemberModalProps> = observer(({guildId, targetUser}) => {
 	const {i18n} = useLingui();
 	const activityLogSettingsPath = formatGuildSettingsPath(i18n, 'audit_log');
-	const getCustomDurationUnitOptions = useCallback(
-		(): ReadonlyArray<ComboboxOption<CustomDurationUnit>> => [
-			{value: 'seconds', label: i18n._(SECONDS_DESCRIPTOR)},
-			{value: 'minutes', label: i18n._(MINUTES_DESCRIPTOR)},
-			{value: 'hours', label: i18n._(HOURS_DESCRIPTOR)},
-			{value: 'days', label: i18n._(DAYS_DESCRIPTOR)},
-		],
-		[i18n],
-	);
-	const timeoutDurationOptions = useMemo(() => getTimeoutDurationOptions(i18n), [i18n.locale]);
-	const durationOptions = useMemo<Array<ComboboxOption<number | 'custom'>>>(() => {
-		const baseOptions = timeoutDurationOptions.map((option) => ({
-			value: option.value,
-			label: option.label,
-		}));
-		return [...baseOptions, {value: 'custom' as const, label: i18n._(CUSTOM_DURATION_DESCRIPTOR)}];
-	}, [timeoutDurationOptions, i18n.locale]);
-	const customDurationUnitOptions = getCustomDurationUnitOptions();
-	const [selectedDuration, setSelectedDuration] = useState<number | 'custom'>(timeoutDurationOptions[3].value);
-	const [customDurationValue, setCustomDurationValue] = useState('10');
-	const [customDurationUnit, setCustomDurationUnit] = useState<CustomDurationUnit>('minutes');
+	const durationOptions = useMemo(() => getTimeoutDurationOptions(i18n), [i18n.locale]);
+	const [selectedDuration, setSelectedDuration] = useState<number>(durationOptions[3].value);
 	const [reason, setReason] = useState('');
 	const [isSubmitting, setIsSubmitting] = useState(false);
-	const customDurationNumber = Number(customDurationValue);
-	const customDurationSeconds =
-		Number.isFinite(customDurationNumber) && customDurationNumber > 0
-			? customDurationNumber * CUSTOM_DURATION_MULTIPLIERS[customDurationUnit]
-			: 0;
-	const customDurationError =
-		selectedDuration === 'custom'
-			? customDurationNumber <= 0
-				? i18n._(DURATION_MUST_BE_GREATER_THAN_ZERO_DESCRIPTOR)
-				: customDurationSeconds > MAX_TIMEOUT_SECONDS
-					? i18n._(TIMEOUT_CANNOT_EXCEED_365_DAYS_DESCRIPTOR)
-					: undefined
-			: undefined;
-	const isCustomDurationValid = selectedDuration !== 'custom' || !customDurationError;
-	const effectiveDurationSeconds = selectedDuration === 'custom' ? customDurationSeconds : (selectedDuration as number);
+	const targetUserTag = DisplayNameUtils.formatTagForStreamerMode(targetUser.tag);
 	const handleTimeout = async () => {
-		if (selectedDuration === 'custom' && (!isCustomDurationValid || customDurationSeconds <= 0)) {
-			return;
-		}
 		setIsSubmitting(true);
 		try {
-			const timeoutUntil = new Date(Date.now() + effectiveDurationSeconds * 1000).toISOString();
+			const timeoutUntil = new Date(Date.now() + selectedDuration * 1000).toISOString();
 			const trimmedReason = reason.trim();
-			await GuildMemberCommands.timeout(guildId, targetUser.id, timeoutUntil, trimmedReason || null);
+			let auditReason: string | null = trimmedReason;
+			if (trimmedReason.length === 0) {
+				auditReason = null;
+			}
+			await GuildMemberCommands.timeout(guildId, targetUser.id, timeoutUntil, auditReason);
 			ToastCommands.createToast({
 				type: 'success',
-				children: <Trans>Timed out {targetUser.tag}</Trans>,
+				children: <Trans>Timed out {targetUserTag}</Trans>,
 			});
 			ModalCommands.pop();
 		} catch (error) {
@@ -174,59 +82,26 @@ export const TimeoutMemberModal: React.FC<TimeoutMemberModalProps> = observer(({
 	return (
 		<Modal.Root size="small" centered data-flx="moderation.timeout-member-modal.modal-root">
 			<Modal.Header
-				title={i18n._(TIMEOUT_DESCRIPTOR, {tag: targetUser.tag})}
+				title={i18n._(TIMEOUT_DESCRIPTOR, {tag: targetUserTag})}
 				data-flx="moderation.timeout-member-modal.modal-header"
 			/>
 			<Modal.Content data-flx="moderation.timeout-member-modal.modal-content">
 				<Modal.ContentLayout data-flx="moderation.timeout-member-modal.modal-content-layout">
 					<Modal.Description data-flx="moderation.timeout-member-modal.helper-text">
 						<Trans>
-							Prevent <strong data-flx="moderation.timeout-member-modal.strong">{targetUser.tag}</strong> from sending
+							Prevent <strong data-flx="moderation.timeout-member-modal.strong">{targetUserTag}</strong> from sending
 							messages, reacting, and joining voice channels for the specified duration.
 						</Trans>
 					</Modal.Description>
-					<FormCombobox<number | 'custom'>
+					<FormCombobox<number>
 						label={i18n._(TIMEOUT_DURATION_DESCRIPTOR)}
 						description={i18n._(HOW_LONG_THIS_USER_SHOULD_BE_TIMED_OUT_DESCRIPTOR)}
 						value={selectedDuration}
-						onChange={(value) => setSelectedDuration(value)}
+						onChange={setSelectedDuration}
 						options={durationOptions}
 						disabled={isSubmitting}
 						data-flx="moderation.timeout-member-modal.form-select.set-selected-duration"
 					/>
-					{selectedDuration === 'custom' && (
-						<>
-							<div className={styles.durationInputs} data-flx="moderation.timeout-member-modal.duration-inputs">
-								<Input
-									type="number"
-									label={i18n._(CUSTOM_DURATION_DESCRIPTOR)}
-									min={1}
-									step={1}
-									value={customDurationValue}
-									onChange={(event) => setCustomDurationValue(event.target.value)}
-									error={customDurationError}
-									disabled={isSubmitting}
-									data-flx="moderation.timeout-member-modal.input.set-custom-duration-value.number"
-								/>
-								<FormCombobox<CustomDurationUnit>
-									label={i18n._(UNIT_DESCRIPTOR)}
-									value={customDurationUnit}
-									onChange={(value) => setCustomDurationUnit(value)}
-									options={customDurationUnitOptions}
-									disabled={isSubmitting}
-									data-flx="moderation.timeout-member-modal.form-select.set-custom-duration-unit"
-								/>
-							</div>
-							<Modal.Description className={styles.hint} data-flx="moderation.timeout-member-modal.hint">
-								<Trans>Enter a numeric value and choose a unit.</Trans>
-							</Modal.Description>
-							<Modal.Description className={styles.hint} data-flx="moderation.timeout-member-modal.hint--2">
-								<Trans>
-									The timeout cannot exceed {DAYS_PER_YEAR} days ({MAX_TIMEOUT_SECONDS} seconds).
-								</Trans>
-							</Modal.Description>
-						</>
-					)}
 					<Textarea
 						label={i18n._(REASON_OPTIONAL_DESCRIPTOR)}
 						value={reason}
@@ -236,7 +111,7 @@ export const TimeoutMemberModal: React.FC<TimeoutMemberModalProps> = observer(({
 						disabled={isSubmitting}
 						data-flx="moderation.timeout-member-modal.textarea.set-reason"
 					/>
-					<Modal.Description className={styles.hint} data-flx="moderation.timeout-member-modal.hint--3">
+					<Modal.Description className={styles.hint} data-flx="moderation.timeout-member-modal.hint">
 						<Trans>This reason will be displayed in the activity log in {activityLogSettingsPath}.</Trans>
 					</Modal.Description>
 				</Modal.ContentLayout>
@@ -253,7 +128,7 @@ export const TimeoutMemberModal: React.FC<TimeoutMemberModalProps> = observer(({
 				<Button
 					variant="danger"
 					onClick={handleTimeout}
-					disabled={isSubmitting || (selectedDuration === 'custom' && !isCustomDurationValid)}
+					disabled={isSubmitting}
 					data-flx="moderation.timeout-member-modal.button.timeout"
 				>
 					<Trans>Timeout</Trans>

fluxer_app/src/features/moderation/components/modals/TimeoutMemberSheet.tsx

@@ -14,6 +14,7 @@ import {
 	TIMEOUT_DESCRIPTOR,
 } from '@app/features/moderation/utils/ModerationMessageDescriptors';
 import {Logger} from '@app/features/platform/utils/AppLogger';
+import {remFromPx} from '@app/features/theme/layout/RemFromPx';
 import * as ModalCommands from '@app/features/ui/commands/ModalCommands';
 import {modal} from '@app/features/ui/commands/ModalCommands';
 import * as ToastCommands from '@app/features/ui/commands/ToastCommands';
@@ -24,6 +25,7 @@ import {
 	type MenuRadioType,
 } from '@app/features/ui/menu_bottom_sheet/MenuBottomSheet';
 import type {User} from '@app/features/user/models/User';
+import * as DisplayNameUtils from '@app/features/user/utils/DisplayNameUtils';
 import {msg} from '@lingui/core/macro';
 import {Trans, useLingui} from '@lingui/react/macro';
 import {ClockIcon, XCircleIcon} from '@phosphor-icons/react';
@@ -56,6 +58,7 @@ export const TimeoutMemberSheet: React.FC<TimeoutMemberSheetProps> = observer(
 		const timeoutOptions = useMemo(() => getTimeoutDurationOptions(i18n), [i18n.locale]);
 		const [timeoutDuration, setTimeoutDuration] = useState<number>(timeoutOptions[3].value);
 		const [isSubmitting, setIsSubmitting] = useState(false);
+		const targetUserTag = DisplayNameUtils.formatTagForStreamerMode(targetUser.tag);
 		const handleTimeout = useCallback(async () => {
 			setIsSubmitting(true);
 			try {
@@ -63,7 +66,7 @@ export const TimeoutMemberSheet: React.FC<TimeoutMemberSheetProps> = observer(
 				await GuildMemberCommands.timeout(guildId, targetUser.id, timeoutUntil);
 				ToastCommands.createToast({
 					type: 'success',
-					children: <Trans>Timed out {targetUser.tag}</Trans>,
+					children: <Trans>Timed out {targetUserTag}</Trans>,
 				});
 				onClose();
 			} catch (error) {
@@ -76,7 +79,7 @@ export const TimeoutMemberSheet: React.FC<TimeoutMemberSheetProps> = observer(
 			} finally {
 				setIsSubmitting(false);
 			}
-		}, [guildId, onClose, targetUser.id, timeoutDuration, targetUser.tag]);
+		}, [guildId, onClose, targetUser.id, targetUserTag, timeoutDuration]);
 		const durationItems: Array<MenuRadioType> = useMemo(() => {
 			return timeoutOptions.map((option: TimeoutDurationOption) => ({
 				label: option.label,
@@ -88,7 +91,7 @@ export const TimeoutMemberSheet: React.FC<TimeoutMemberSheetProps> = observer(
 			const items: Array<MenuItemType> = [
 				{
 					id: 'timeout',
-					icon: <ClockIcon size={20} data-flx="moderation.timeout-member-sheet.action-items.clock-icon" />,
+					icon: <ClockIcon size={remFromPx(20)} data-flx="moderation.timeout-member-sheet.action-items.clock-icon" />,
 					label: i18n._(TIMEOUT_DESCRIPTOR),
 					onClick: handleTimeout,
 					danger: true,
@@ -98,7 +101,9 @@ export const TimeoutMemberSheet: React.FC<TimeoutMemberSheetProps> = observer(
 			if (isCurrentlyTimedOut) {
 				items.push({
 					id: 'remove-timeout',
-					icon: <XCircleIcon size={20} data-flx="moderation.timeout-member-sheet.action-items.x-circle-icon" />,
+					icon: (
+						<XCircleIcon size={remFromPx(20)} data-flx="moderation.timeout-member-sheet.action-items.x-circle-icon" />
+					),
 					label: i18n._(REMOVE_TIMEOUT_DESCRIPTOR),
 					onClick: () => {
 						ModalCommands.pushAfterBottomSheetClose(
@@ -123,13 +128,13 @@ export const TimeoutMemberSheet: React.FC<TimeoutMemberSheetProps> = observer(
 				<p className={styles.description} data-flx="moderation.timeout-member-sheet.description">
 					{isCurrentlyTimedOut ? (
 						<Trans>
-							<strong data-flx="moderation.timeout-member-sheet.strong">{targetUser.tag}</strong> is currently timed
-							out. You can update their timeout duration or remove the timeout.
+							<strong data-flx="moderation.timeout-member-sheet.strong">{targetUserTag}</strong> is currently timed out.
+							You can update their timeout duration or remove the timeout.
 						</Trans>
 					) : (
 						<Trans>
-							Prevent <strong data-flx="moderation.timeout-member-sheet.strong--2">{targetUser.tag}</strong> from
-							sending messages, reacting, and connecting to voice channels for the specified duration.
+							Prevent <strong data-flx="moderation.timeout-member-sheet.strong--2">{targetUserTag}</strong> from sending
+							messages, reacting, and connecting to voice channels for the specified duration.
 						</Trans>
 					)}
 				</p>
@@ -141,7 +146,7 @@ export const TimeoutMemberSheet: React.FC<TimeoutMemberSheetProps> = observer(
 				isOpen={isOpen}
 				onClose={onClose}
 				title={
-					isCurrentlyTimedOut ? i18n._(UPDATE_TIMEOUT_DESCRIPTOR) : i18n._(TIMEOUT_2_DESCRIPTOR, {tag: targetUser.tag})
+					isCurrentlyTimedOut ? i18n._(UPDATE_TIMEOUT_DESCRIPTOR) : i18n._(TIMEOUT_2_DESCRIPTOR, {tag: targetUserTag})
 				}
 				showCloseButton={true}
 				headerContent={headerContent}