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

apps/meteor/client/views/account/preferences/AccountPreferencesPage.tsx

@@ -0,0 +1,105 @@
+import { ButtonGroup, Button, Box, Accordion } from '@rocket.chat/fuselage';
+import { Page, PageHeader, PageScrollableContentWithShadow, PageFooter } from '@rocket.chat/ui-client';
+import { useToastMessageDispatch, useSetting, useTranslation, useEndpoint } from '@rocket.chat/ui-contexts';
+import { useMutation } from '@tanstack/react-query';
+import { useId } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+
+import PreferencesGlobalSection from './PreferencesGlobalSection';
+import PreferencesHighlightsSection from './PreferencesHighlightsSection';
+import PreferencesLocalizationSection from './PreferencesLocalizationSection';
+import PreferencesMessagesSection from './PreferencesMessagesSection';
+import PreferencesMyDataSection from './PreferencesMyDataSection';
+import PreferencesNotificationsSection from './PreferencesNotificationsSection';
+import PreferencesSoundSection from './PreferencesSoundSection';
+import PreferencesUserPresenceSection from './PreferencesUserPresenceSection';
+import type { AccountPreferencesData } from './useAccountPreferencesValues';
+import { useAccountPreferencesValues } from './useAccountPreferencesValues';
+import { getDirtyFields } from '../../../lib/getDirtyFields';
+
+const AccountPreferencesPage = () => {
+	const t = useTranslation();
+	const dispatchToastMessage = useToastMessageDispatch();
+	const dataDownloadEnabled = useSetting('UserData_EnableDownload');
+	const preferencesValues = useAccountPreferencesValues();
+
+	const methods = useForm({ defaultValues: preferencesValues });
+	const {
+		handleSubmit,
+		reset,
+		watch,
+		formState: { isDirty, dirtyFields },
+	} = methods;
+
+	const currentData = watch();
+
+	const setPreferencesEndpoint = useEndpoint('POST', '/v1/users.setPreferences');
+	const setPreferencesAction = useMutation({
+		mutationFn: setPreferencesEndpoint,
+		onSuccess: () => {
+			dispatchToastMessage({ type: 'success', message: t('Preferences_saved') });
+		},
+		onError: (error) => {
+			dispatchToastMessage({ type: 'error', message: error });
+		},
+		onSettled: () => reset(currentData),
+	});
+
+	const handleSaveData = async (formData: AccountPreferencesData) => {
+		const { highlights, dontAskAgainList, ...data } = getDirtyFields(formData, dirtyFields);
+		if (highlights || highlights === '') {
+			Object.assign(data, {
+				highlights:
+					typeof highlights === 'string' &&
+					highlights
+						.split(/,|\n/)
+						.map((val) => val.trim())
+						.filter(Boolean),
+			});
+		}
+
+		if (dontAskAgainList) {
+			const list =
+				Array.isArray(dontAskAgainList) && dontAskAgainList.length > 0
+					? dontAskAgainList.map(([action, label]) => ({ action, label }))
+					: [];
+			Object.assign(data, { dontAskAgainList: list });
+		}
+
+		setPreferencesAction.mutateAsync({ data });
+	};
+
+	const preferencesFormId = useId();
+
+	return (
+		<Page>
+			<PageHeader title={t('Preferences')} />
+			<PageScrollableContentWithShadow>
+				<FormProvider {...methods}>
+					<Box id={preferencesFormId} is='form' maxWidth='x600' width='full' alignSelf='center' onSubmit={handleSubmit(handleSaveData)}>
+						<Accordion>
+							<PreferencesLocalizationSection />
+							<PreferencesGlobalSection />
+							<PreferencesUserPresenceSection />
+							<PreferencesNotificationsSection />
+							<PreferencesMessagesSection />
+							<PreferencesHighlightsSection />
+							<PreferencesSoundSection />
+							{dataDownloadEnabled && <PreferencesMyDataSection />}
+						</Accordion>
+					</Box>
+				</FormProvider>
+			</PageScrollableContentWithShadow>
+			<PageFooter isDirty={isDirty}>
+				<ButtonGroup>
+					<Button onClick={() => reset(preferencesValues)}>{t('Cancel')}</Button>
+					<Button form={preferencesFormId} primary type='submit'>
+						{t('Save_changes')}
+					</Button>
+				</ButtonGroup>
+			</PageFooter>
+		</Page>
+	);
+};
+
+export default AccountPreferencesPage;

apps/meteor/client/views/account/preferences/MyDataModal.tsx

@@ -0,0 +1,48 @@
+import {
+	Button,
+	Box,
+	Modal,
+	ModalHeader,
+	ModalIcon,
+	ModalTitle,
+	ModalClose,
+	ModalContent,
+	ModalFooter,
+	ModalFooterControllers,
+} from '@rocket.chat/fuselage';
+import type { ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export type MyDataModalProps = {
+	onCancel: () => void;
+	title: string;
+	text?: ReactNode;
+};
+
+const MyDataModal = ({ onCancel, title, text, ...props }: MyDataModalProps) => {
+	const { t } = useTranslation();
+
+	return (
+		<Modal {...props}>
+			<ModalHeader>
+				<ModalIcon color='status-font-on-success' name='circle-check' />
+				<ModalTitle>{title}</ModalTitle>
+				<ModalClose onClick={onCancel} />
+			</ModalHeader>
+			{text && (
+				<ModalContent fontScale='p2'>
+					<Box marginBlock={8}>{text}</Box>
+				</ModalContent>
+			)}
+			<ModalFooter>
+				<ModalFooterControllers>
+					<Button primary onClick={onCancel}>
+						{t('Ok')}
+					</Button>
+				</ModalFooterControllers>
+			</ModalFooter>
+		</Modal>
+	);
+};
+
+export default MyDataModal;

apps/meteor/client/views/account/preferences/PreferencesGlobalSection.tsx

@@ -0,0 +1,36 @@
+import type { SelectOption } from '@rocket.chat/fuselage';
+import { AccordionItem } from '@rocket.chat/fuselage';
+import { Field, FieldGroup, FieldLabel, FieldRow, MultiSelect } from '@rocket.chat/fuselage-forms';
+import { useUserPreference } from '@rocket.chat/ui-contexts';
+import { Controller, useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+
+const PreferencesGlobalSection = () => {
+	const { t } = useTranslation();
+
+	const userDontAskAgainList = useUserPreference<{ action: string; label: string }[]>('dontAskAgainList') || [];
+	const options: SelectOption[] = userDontAskAgainList.map(({ action, label }) => [action, label]);
+
+	const { control } = useFormContext();
+
+	return (
+		<AccordionItem title={t('Global')}>
+			<FieldGroup>
+				<Field>
+					<FieldLabel>{t('Dont_ask_me_again_list')}</FieldLabel>
+					<FieldRow>
+						<Controller
+							name='dontAskAgainList'
+							control={control}
+							render={({ field: { value, onChange } }) => (
+								<MultiSelect placeholder={t('Nothing_found')} value={value} onChange={onChange} options={options} />
+							)}
+						/>
+					</FieldRow>
+				</Field>
+			</FieldGroup>
+		</AccordionItem>
+	);
+};
+
+export default PreferencesGlobalSection;

apps/meteor/client/views/account/preferences/PreferencesHighlightsSection.tsx

@@ -0,0 +1,25 @@
+import { AccordionItem } from '@rocket.chat/fuselage';
+import { Field, FieldGroup, FieldLabel, FieldRow, FieldHint, TextAreaInput } from '@rocket.chat/fuselage-forms';
+import { Controller, useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+
+const PreferencesHighlightsSection = () => {
+	const { t } = useTranslation();
+	const { control } = useFormContext();
+
+	return (
+		<AccordionItem title={t('Highlights')}>
+			<FieldGroup>
+				<Field>
+					<FieldLabel>{t('Highlights_List')}</FieldLabel>
+					<FieldRow>
+						<Controller control={control} name='highlights' render={({ field }) => <TextAreaInput {...field} rows={4} />} />
+					</FieldRow>
+					<FieldHint>{t('Highlights_How_To')}</FieldHint>
+				</Field>
+			</FieldGroup>
+		</AccordionItem>
+	);
+};
+
+export default PreferencesHighlightsSection;

apps/meteor/client/views/account/preferences/PreferencesLocalizationSection.tsx

@@ -0,0 +1,31 @@
+import type { SelectOption } from '@rocket.chat/fuselage';
+import { AccordionItem } from '@rocket.chat/fuselage';
+import { Field, FieldGroup, FieldLabel, FieldRow, Select } from '@rocket.chat/fuselage-forms';
+import { useLanguages } from '@rocket.chat/ui-contexts';
+import { useMemo } from 'react';
+import { Controller, useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+
+const PreferencesLocalizationSection = () => {
+	const { t } = useTranslation();
+	const languages = useLanguages();
+
+	const { control } = useFormContext();
+
+	const languageOptions = useMemo(() => languages.map(({ key, name }): SelectOption => [key, name]), [languages]);
+
+	return (
+		<AccordionItem title={t('Localization')} defaultExpanded>
+			<FieldGroup>
+				<Field>
+					<FieldLabel>{t('Language')}</FieldLabel>
+					<FieldRow>
+						<Controller control={control} name='language' render={({ field }) => <Select {...field} options={languageOptions} />} />
+					</FieldRow>
+				</Field>
+			</FieldGroup>
+		</AccordionItem>
+	);
+};
+
+export default PreferencesLocalizationSection;

apps/meteor/client/views/account/preferences/PreferencesMessagesSection.tsx

@@ -0,0 +1,169 @@
+import type { SelectOption } from '@rocket.chat/fuselage';
+import { AccordionItem } from '@rocket.chat/fuselage';
+import { Field, FieldGroup, FieldHint, FieldLabel, FieldLink, FieldRow, Select, ToggleSwitch } from '@rocket.chat/fuselage-forms';
+import { useId, useMemo } from 'react';
+import { Controller, useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+
+const PreferencesMessagesSection = () => {
+	const { t } = useTranslation();
+	const { control } = useFormContext();
+
+	const messageTimeFormatLabelId = useId();
+	const hideUsernamesLabelId = useId();
+	const hideRolesLabelId = useId();
+
+	const alsoSendThreadMessageToChannelOptions = useMemo(
+		(): SelectOption[] => [
+			['default', t('Selected_first_reply_unselected_following_replies')],
+			['always', t('Selected_by_default')],
+			['never', t('Unselected_by_default')],
+		],
+		[t],
+	);
+
+	const sendOnEnterOptions = useMemo(
+		(): SelectOption[] => [
+			['normal', t('Enter_Normal')],
+			['alternative', t('Enter_Alternative')],
+			['desktop', t('Only_On_Desktop')],
+		],
+		[t],
+	);
+
+	return (
+		<AccordionItem title={t('Messages')}>
+			<FieldGroup>
+				<Field>
+					<FieldRow>
+						<FieldLabel>{t('Unread_Tray_Icon_Alert')}</FieldLabel>
+						<Controller
+							name='unreadAlert'
+							control={control}
+							render={({ field: { value, ...field } }) => <ToggleSwitch {...field} checked={value} />}
+						/>
+					</FieldRow>
+				</Field>
+				<Field>
+					<FieldRow>
+						<FieldLabel>{t('Always_show_thread_replies_in_main_channel')}</FieldLabel>
+						<Controller
+							name='showThreadsInMainChannel'
+							control={control}
+							render={({ field: { value, ...field } }) => <ToggleSwitch {...field} checked={value} />}
+						/>
+					</FieldRow>
+					<FieldHint>{t('Accounts_Default_User_Preferences_showThreadsInMainChannel_Description')}</FieldHint>
+				</Field>
+				<Field>
+					<FieldLabel>{t('Also_send_thread_message_to_channel_behavior')}</FieldLabel>
+					<FieldRow>
+						<Controller
+							name='alsoSendThreadToChannel'
+							control={control}
+							render={({ field }) => <Select {...field} options={alsoSendThreadMessageToChannelOptions} />}
+						/>
+					</FieldRow>
+					<FieldHint>{t('Accounts_Default_User_Preferences_alsoSendThreadToChannel_Description')}</FieldHint>
+				</Field>
+				<Field>
+					<FieldLabel id={messageTimeFormatLabelId}>{t('Message_TimeFormat')}</FieldLabel>
+					<FieldLink aria-describedby={messageTimeFormatLabelId} href='/account/accessibility-and-appearance#clockMode'>
+						{t('Go_to_accessibility_and_appearance')}
+					</FieldLink>
+				</Field>
+				<Field>
+					<FieldRow>
+						<FieldLabel>{t('Use_Emojis')}</FieldLabel>
+						<Controller
+							name='useEmojis'
+							control={control}
+							render={({ field: { value, ...field } }) => <ToggleSwitch {...field} checked={value} />}
+						/>
+					</FieldRow>
+				</Field>
+				<Field>
+					<FieldRow>
+						<FieldLabel>{t('Convert_Ascii_Emojis')}</FieldLabel>
+						<Controller
+							name='convertAsciiEmoji'
+							control={control}
+							render={({ field: { value, ...field } }) => <ToggleSwitch {...field} checked={value} />}
+						/>
+					</FieldRow>
+				</Field>
+				<Field>
+					<FieldRow>
+						<FieldLabel>{t('Auto_Load_Images')}</FieldLabel>
+						<Controller
+							name='autoImageLoad'
+							control={control}
+							render={({ field: { value, ...field } }) => <ToggleSwitch {...field} checked={value} />}
+						/>
+					</FieldRow>
+				</Field>
+				<Field>
+					<FieldRow>
+						<FieldLabel>{t('Save_Mobile_Bandwidth')}</FieldLabel>
+						<Controller
+							name='saveMobileBandwidth'
+							control={control}
+							render={({ field: { value, ...field } }) => <ToggleSwitch {...field} checked={value} />}
+						/>
+					</FieldRow>
+				</Field>
+				<Field>
+					<FieldRow>
+						<FieldLabel>{t('Collapse_Embedded_Media_By_Default')}</FieldLabel>
+						<Controller
+							name='collapseMediaByDefault'
+							control={control}
+							render={({ field: { value, ...field } }) => <ToggleSwitch {...field} checked={value} />}
+						/>
+					</FieldRow>
+				</Field>
+				<Field>
+					<FieldLabel id={hideUsernamesLabelId}>{t('Hide_usernames')}</FieldLabel>
+					<FieldLink aria-describedby={hideUsernamesLabelId} href='/account/accessibility-and-appearance#hideUsernames'>
+						{t('Go_to_accessibility_and_appearance')}
+					</FieldLink>
+				</Field>
+				<Field>
+					<FieldLabel id={hideRolesLabelId}>{t('Hide_roles')}</FieldLabel>
+					<FieldLink aria-describedby={hideRolesLabelId} href='/account/accessibility-and-appearance#hideRoles'>
+						{t('Go_to_accessibility_and_appearance')}
+					</FieldLink>
+				</Field>
+				<Field>
+					<FieldRow>
+						<FieldLabel>{t('Hide_flextab')}</FieldLabel>
+						<Controller
+							name='hideFlexTab'
+							control={control}
+							render={({ field: { value, ...field } }) => <ToggleSwitch {...field} checked={value} />}
+						/>
+					</FieldRow>
+				</Field>
+				<Field>
+					<FieldRow>
+						<FieldLabel>{t('Display_avatars')}</FieldLabel>
+						<Controller
+							name='displayAvatars'
+							control={control}
+							render={({ field: { value, ...field } }) => <ToggleSwitch {...field} checked={value} />}
+						/>
+					</FieldRow>
+				</Field>
+				<Field>
+					<FieldLabel>{t('Enter_Behaviour')}</FieldLabel>
+					<FieldRow>
+						<Controller name='sendOnEnter' control={control} render={({ field }) => <Select {...field} options={sendOnEnterOptions} />} />
+					</FieldRow>
+					<FieldHint>{t('Enter_Behaviour_Description')}</FieldHint>
+				</Field>
+			</FieldGroup>
+		</AccordionItem>
+	);
+};
+
+export default PreferencesMessagesSection;

apps/meteor/client/views/account/preferences/PreferencesMyDataSection.tsx

@@ -0,0 +1,92 @@
+import { AccordionItem, Box, Button, ButtonGroup } from '@rocket.chat/fuselage';
+import { useEndpoint, useSetModal, useToastMessageDispatch } from '@rocket.chat/ui-contexts';
+import DOMPurify from 'dompurify';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import MyDataModal from './MyDataModal';
+
+const PreferencesMyDataSection = () => {
+	const { t } = useTranslation();
+	const setModal = useSetModal();
+	const dispatchToastMessage = useToastMessageDispatch();
+
+	const requestDataDownload = useEndpoint('GET', '/v1/users.requestDataDownload');
+
+	const downloadData = useCallback(
+		async (fullExport: boolean) => {
+			try {
+				const result = await requestDataDownload({ fullExport: fullExport ? 'true' : 'false' });
+				if (result.requested) {
+					const text = t('UserDataDownload_Requested_Text', {
+						pending_operations: result.pendingOperationsBeforeMyRequest,
+					});
+					setModal(
+						<MyDataModal
+							title={t('UserDataDownload_Requested')}
+							text={<Box dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(text) }} />}
+							onCancel={() => setModal(null)}
+						/>,
+					);
+					return;
+				}
+
+				if (result.exportOperation) {
+					if (result.exportOperation.status === 'completed') {
+						const text = result.url
+							? t('UserDataDownload_CompletedRequestExistedWithLink_Text', {
+									download_link: result.url,
+								})
+							: t('UserDataDownload_CompletedRequestExisted_Text');
+
+						setModal(
+							<MyDataModal
+								title={t('UserDataDownload_Requested')}
+								text={<Box dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(text) }} />}
+								onCancel={() => setModal(null)}
+							/>,
+						);
+
+						return;
+					}
+
+					const text = t('UserDataDownload_RequestExisted_Text', {
+						pending_operations: result.pendingOperationsBeforeMyRequest,
+					});
+					setModal(
+						<MyDataModal
+							title={t('UserDataDownload_Requested')}
+							text={<Box dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(text) }} />}
+							onCancel={() => setModal(null)}
+						/>,
+					);
+
+					return;
+				}
+
+				setModal(<MyDataModal title={t('UserDataDownload_Requested')} onCancel={() => setModal(null)} />);
+			} catch (error) {
+				dispatchToastMessage({ type: 'error', message: error });
+			}
+		},
+		[dispatchToastMessage, requestDataDownload, setModal, t],
+	);
+
+	const handleClickDownload = useCallback(() => downloadData(false), [downloadData]);
+	const handleClickExport = useCallback(() => downloadData(true), [downloadData]);
+
+	return (
+		<AccordionItem title={t('My Data')}>
+			<ButtonGroup stretch>
+				<Button icon='download' onClick={handleClickDownload}>
+					{t('Download_My_Data')}
+				</Button>
+				<Button icon='download' onClick={handleClickExport}>
+					{t('Export_My_Data')}
+				</Button>
+			</ButtonGroup>
+		</AccordionItem>
+	);
+};
+
+export default PreferencesMyDataSection;

apps/meteor/client/views/account/preferences/PreferencesNotificationsSection.tsx

@@ -0,0 +1,212 @@
+import type { INotificationDesktop } from '@rocket.chat/core-typings';
+import type { SelectOption } from '@rocket.chat/fuselage';
+import { AccordionItem, Button } from '@rocket.chat/fuselage';
+import { Field, FieldGroup, FieldHint, FieldLabel, FieldRow, Select, ToggleSwitch } from '@rocket.chat/fuselage-forms';
+import type { TranslationKey } from '@rocket.chat/ui-contexts';
+import { useSetting, useUserPreference, useUser } from '@rocket.chat/ui-contexts';
+import { useCallback, useEffect, useId, useMemo, useState } from 'react';
+import { Controller, useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+
+import { useNotification } from '../../../hooks/notification/useNotification';
+
+const notificationOptionsLabelMap = {
+	all: 'All_messages',
+	mentions: 'Mentions',
+	nothing: 'Nothing',
+};
+
+const emailNotificationOptionsLabelMap = {
+	mentions: 'Email_Notification_Mode_All',
+	nothing: 'Email_Notification_Mode_Disabled',
+};
+
+const PreferencesNotificationsSection = () => {
+	const { t, i18n } = useTranslation();
+	const user = useUser();
+
+	const [notificationsPermission, setNotificationsPermission] = useState<NotificationPermission>();
+
+	const defaultDesktopNotifications = useSetting(
+		'Accounts_Default_User_Preferences_desktopNotifications',
+	) as keyof typeof notificationOptionsLabelMap;
+	const defaultMobileNotifications = useSetting(
+		'Accounts_Default_User_Preferences_pushNotifications',
+	) as keyof typeof notificationOptionsLabelMap;
+	const canChangeEmailNotification = useSetting('Accounts_AllowEmailNotifications');
+
+	const loginEmailEnabled = useSetting('Device_Management_Enable_Login_Emails');
+	const allowLoginEmailPreference = useSetting('Device_Management_Allow_Login_Email_preference');
+	const showNewLoginEmailPreference = loginEmailEnabled && allowLoginEmailPreference;
+	const showVideoConfMobileRinging = useSetting('VideoConf_Mobile_Ringing');
+	const showVoipMobileRinging = useSetting('VoIP_TeamCollab_Mobile_Ringing_Enabled');
+	const showMobileRinging = showVideoConfMobileRinging || showVoipMobileRinging;
+	const notify = useNotification();
+
+	const userEmailNotificationMode = useUserPreference('emailNotificationMode') as keyof typeof emailNotificationOptionsLabelMap;
+
+	useEffect(() => setNotificationsPermission(window.Notification && Notification.permission), []);
+
+	const onSendNotification = useCallback(() => {
+		notify({
+			payload: {
+				sender: { _id: 'rocket.cat', username: 'rocket.cat' },
+				rid: 'GENERAL',
+			} as INotificationDesktop['payload'],
+			title: t('Desktop_Notification_Test'),
+			text: t('This_is_a_desktop_notification'),
+		});
+	}, [notify, t]);
+
+	const onAskNotificationPermission = useCallback(() => {
+		window.Notification && Notification.requestPermission().then((val) => setNotificationsPermission(val));
+	}, []);
+
+	const notificationOptions = useMemo(
+		() => Object.entries(notificationOptionsLabelMap).map(([key, val]) => i18n.exists(val) && [key, t(val)]),
+		[i18n, t],
+	) as SelectOption[];
+
+	const desktopNotificationOptions = useMemo<SelectOption[]>((): SelectOption[] => {
+		const optionsCp = notificationOptions.slice();
+		optionsCp.unshift(['default', `${t('Default')} (${t(notificationOptionsLabelMap[defaultDesktopNotifications] as TranslationKey)})`]);
+		return optionsCp;
+	}, [defaultDesktopNotifications, notificationOptions, t]);
+
+	const mobileNotificationOptions = useMemo(() => {
+		const optionsCp = notificationOptions.slice();
+		optionsCp.unshift(['default', `${t('Default')} (${t(notificationOptionsLabelMap[defaultMobileNotifications] as TranslationKey)})`]);
+		return optionsCp;
+	}, [defaultMobileNotifications, notificationOptions, t]);
+
+	const emailNotificationOptions = useMemo(() => {
+		const options = Object.entries(emailNotificationOptionsLabelMap).map(
+			([key, val]) => i18n.exists(val) && [key, t(val)],
+		) as SelectOption[];
+		options.unshift(['default', `${t('Default')} (${t(emailNotificationOptionsLabelMap[userEmailNotificationMode] as TranslationKey)})`]);
+		return options;
+	}, [i18n, t, userEmailNotificationMode]);
+
+	const { control } = useFormContext();
+
+	const desktopNotificationsLabelId = useId();
+
+	const showCalendarPreference = user?.settings?.calendar?.outlook?.Enabled;
+
+	return (
+		<AccordionItem title={t('Notifications')}>
+			<FieldGroup>
+				<Field>
+					<FieldLabel>{t('Desktop_Notifications')}</FieldLabel>
+					<FieldRow>
+						{notificationsPermission === 'denied' && t('Desktop_Notifications_Disabled')}
+						{notificationsPermission === 'granted' && (
+							<Button primary onClick={onSendNotification} aria-labelledby={desktopNotificationsLabelId}>
+								{t('Test_Desktop_Notifications')}
+							</Button>
+						)}
+						{notificationsPermission !== 'denied' && notificationsPermission !== 'granted' && (
+							<Button primary onClick={onAskNotificationPermission} aria-labelledby={desktopNotificationsLabelId}>
+								{t('Enable_Desktop_Notifications')}
+							</Button>
+						)}
+					</FieldRow>
+				</Field>
+				<Field>
+					<FieldRow>
+						<FieldLabel>{t('Notification_RequireInteraction')}</FieldLabel>
+						<Controller
+							name='desktopNotificationRequireInteraction'
+							control={control}
+							render={({ field: { value, ...field } }) => <ToggleSwitch {...field} checked={value} />}
+						/>
+					</FieldRow>
+					<FieldHint>{t('Only_works_with_chrome_version_greater_50')}</FieldHint>
+				</Field>
+				<Field>
+					<FieldLabel>{t('Notification_Desktop_Default_For')}</FieldLabel>
+					<FieldRow>
+						<Controller
+							name='desktopNotifications'
+							control={control}
+							render={({ field }) => <Select {...field} options={desktopNotificationOptions} />}
+						/>
+					</FieldRow>
+				</Field>
+				<Field>
+					<FieldRow>
+						<FieldLabel>{t('Notification_Desktop_show_voice_calls')}</FieldLabel>
+						<Controller
+							name='desktopNotificationVoiceCalls'
+							control={control}
+							render={({ field: { value, ...field } }) => <ToggleSwitch {...field} checked={value} />}
+						/>
+					</FieldRow>
+				</Field>
+				<Field>
+					<FieldLabel>{t('Notification_Push_Default_For')}</FieldLabel>
+					<FieldRow>
+						<Controller
+							name='pushNotifications'
+							control={control}
+							render={({ field }) => <Select {...field} options={mobileNotificationOptions} />}
+						/>
+					</FieldRow>
+				</Field>
+				<Field>
+					<FieldLabel>{t('Email_Notification_Mode')}</FieldLabel>
+					<FieldRow>
+						<Controller
+							name='emailNotificationMode'
+							control={control}
+							render={({ field }) => <Select disabled={!canChangeEmailNotification} {...field} options={emailNotificationOptions} />}
+						/>
+					</FieldRow>
+					<FieldHint>
+						{canChangeEmailNotification && t('You_need_to_verifiy_your_email_address_to_get_notications')}
+						{!canChangeEmailNotification && t('Email_Notifications_Change_Disabled')}
+					</FieldHint>
+				</Field>
+				{showNewLoginEmailPreference && (
+					<Field>
+						<FieldRow>
+							<FieldLabel>{t('Receive_Login_Detection_Emails')}</FieldLabel>
+							<Controller
+								name='receiveLoginDetectionEmail'
+								control={control}
+								render={({ field: { value, ...field } }) => <ToggleSwitch {...field} checked={value} />}
+							/>
+						</FieldRow>
+						<FieldHint>{t('Receive_Login_Detection_Emails_Description')}</FieldHint>
+					</Field>
+				)}
+				{showCalendarPreference && (
+					<Field>
+						<FieldRow>
+							<FieldLabel>{t('Notify_Calendar_Events')}</FieldLabel>
+							<Controller
+								name='notifyCalendarEvents'
+								control={control}
+								render={({ field: { value, ...field } }) => <ToggleSwitch {...field} checked={value} />}
+							/>
+						</FieldRow>
+					</Field>
+				)}
+				{showMobileRinging && (
+					<Field>
+						<FieldRow>
+							<FieldLabel>{t('VideoConf_Mobile_Ringing')}</FieldLabel>
+							<Controller
+								name='enableMobileRinging'
+								control={control}
+								render={({ field: { value, ...field } }) => <ToggleSwitch {...field} checked={value} />}
+							/>
+						</FieldRow>
+					</Field>
+				)}
+			</FieldGroup>
+		</AccordionItem>
+	);
+};
+
+export default PreferencesNotificationsSection;

apps/meteor/client/views/account/preferences/PreferencesSoundSection.tsx

@@ -0,0 +1,129 @@
+import type { SelectOption } from '@rocket.chat/fuselage';
+import { AccordionItem } from '@rocket.chat/fuselage';
+import { Field, FieldGroup, FieldHint, FieldLabel, FieldRow, Select, ToggleSwitch, Slider } from '@rocket.chat/fuselage-forms';
+import { type TranslationKey, useCustomSound, useTranslation } from '@rocket.chat/ui-contexts';
+import { Controller, useFormContext } from 'react-hook-form';
+
+const PreferencesSoundSection = () => {
+	const t = useTranslation();
+
+	const customSound = useCustomSound();
+	const soundsList: SelectOption[] = customSound.list?.map((value) => [value._id, t(value.name as TranslationKey)]) || [];
+	const { control, watch } = useFormContext<{
+		newMessageNotification: string;
+		notificationsSoundVolume: number;
+		masterVolume: number;
+		voipRingerVolume: number;
+		newRoomNotification: string;
+		muteFocusedConversations: boolean;
+	}>();
+	const { newMessageNotification, notificationsSoundVolume = 100, masterVolume = 100, voipRingerVolume = 100 } = watch();
+
+	return (
+		<AccordionItem title={t('Sound')}>
+			<FieldGroup>
+				<Field>
+					<FieldLabel>{t('Master_volume')}</FieldLabel>
+					<FieldHint marginBlockEnd={4}>{t('Master_volume_hint')}</FieldHint>
+					<FieldRow>
+						<Controller name='masterVolume' control={control} render={({ field }) => <Slider {...field} minValue={0} maxValue={100} />} />
+					</FieldRow>
+				</Field>
+				<Field>
+					<FieldLabel>{t('Notification_volume')}</FieldLabel>
+					<FieldHint marginBlockEnd={4}>{t('Notification_volume_hint')}</FieldHint>
+					<FieldRow>
+						<Controller
+							name='notificationsSoundVolume'
+							control={control}
+							render={({ field: { onChange, ...field } }) => (
+								<Slider
+									{...field}
+									minValue={0}
+									maxValue={100}
+									onChange={(value: number) => {
+										const soundVolume = (notificationsSoundVolume * masterVolume) / 100;
+										customSound.play(newMessageNotification, { volume: soundVolume / 100 });
+										onChange(value);
+									}}
+								/>
+							)}
+						/>
+					</FieldRow>
+				</Field>
+				<Field>
+					<FieldLabel>{t('Call_ringer_volume')}</FieldLabel>
+					<FieldHint marginBlockEnd={4}>{t('Call_ringer_volume_hint')}</FieldHint>
+					<FieldRow>
+						<Controller
+							name='voipRingerVolume'
+							control={control}
+							render={({ field: { onChange, ...field } }) => (
+								<Slider
+									{...field}
+									minValue={0}
+									maxValue={100}
+									onChange={(value: number) => {
+										const soundVolume = (voipRingerVolume * masterVolume) / 100;
+										customSound.play('telephone', { volume: soundVolume / 100 });
+										onChange(value);
+									}}
+								/>
+							)}
+						/>
+					</FieldRow>
+				</Field>
+				<Field>
+					<FieldLabel>{t('New_Room_Notification')}</FieldLabel>
+					<FieldRow>
+						<Controller
+							name='newRoomNotification'
+							control={control}
+							render={({ field: { onChange, ...field } }) => (
+								<Select
+									{...field}
+									options={soundsList}
+									onChange={(value) => {
+										onChange(value);
+										customSound.play(String(value), { volume: notificationsSoundVolume / 100 });
+									}}
+								/>
+							)}
+						/>
+					</FieldRow>
+				</Field>
+				<Field>
+					<FieldLabel>{t('New_Message_Notification')}</FieldLabel>
+					<FieldRow>
+						<Controller
+							name='newMessageNotification'
+							control={control}
+							render={({ field: { onChange, ...field } }) => (
+								<Select
+									{...field}
+									options={soundsList}
+									onChange={(value) => {
+										onChange(value);
+										customSound.play(String(value), { volume: notificationsSoundVolume / 100 });
+									}}
+								/>
+							)}
+						/>
+					</FieldRow>
+				</Field>
+				<Field>
+					<FieldRow>
+						<FieldLabel>{t('Mute_Focused_Conversations')}</FieldLabel>
+						<Controller
+							name='muteFocusedConversations'
+							control={control}
+							render={({ field: { value, ...field } }) => <ToggleSwitch {...field} checked={value} />}
+						/>
+					</FieldRow>
+				</Field>
+			</FieldGroup>
+		</AccordionItem>
+	);
+};
+
+export default PreferencesSoundSection;

apps/meteor/client/views/account/preferences/PreferencesUserPresenceSection.tsx

@@ -0,0 +1,40 @@
+import { AccordionItem } from '@rocket.chat/fuselage';
+import { Field, FieldGroup, FieldHint, FieldLabel, FieldRow, ToggleSwitch, NumberInput } from '@rocket.chat/fuselage-forms';
+import { Controller, useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+
+const PreferencesUserPresenceSection = () => {
+	const { t } = useTranslation();
+	const { control } = useFormContext();
+
+	return (
+		<AccordionItem title={t('User_Presence')}>
+			<FieldGroup>
+				<Field>
+					<FieldRow>
+						<FieldLabel>{t('Enable_Auto_Away')}</FieldLabel>
+						<Controller
+							name='enableAutoAway'
+							control={control}
+							render={({ field: { value, ...field } }) => <ToggleSwitch {...field} checked={value} />}
+						/>
+					</FieldRow>
+					<FieldHint>{t('Enable_Auto_Away_Description')}</FieldHint>
+				</Field>
+				<Field>
+					<FieldLabel>{t('Idle_Time_Limit')}</FieldLabel>
+					<FieldRow>
+						<Controller
+							name='idleTimeLimit'
+							control={control}
+							render={({ field: { value, ...field } }) => <NumberInput {...field} value={value} />}
+						/>
+					</FieldRow>
+					<FieldHint>{t('Idle_Time_Limit_Description')}</FieldHint>
+				</Field>
+			</FieldGroup>
+		</AccordionItem>
+	);
+};
+
+export default PreferencesUserPresenceSection;

apps/meteor/client/views/account/preferences/useAccountPreferencesValues.ts

@@ -0,0 +1,115 @@
+import { useUserPreference } from '@rocket.chat/ui-contexts';
+
+export type AccountPreferencesData = {
+	language?: string;
+	dontAskAgainList?: string[];
+	enableAutoAway?: boolean;
+	idleTimeLimit?: number;
+	desktopNotificationRequireInteraction?: boolean;
+	desktopNotifications?: string;
+	pushNotifications?: string;
+	emailNotificationMode?: string;
+	receiveLoginDetectionEmail?: boolean;
+	notifyCalendarEvents?: boolean;
+	enableMobileRinging?: boolean;
+	unreadAlert?: boolean;
+	showThreadsInMainChannel?: boolean;
+	alsoSendThreadToChannel?: 'default' | 'always' | 'never';
+	useEmojis?: boolean;
+	convertAsciiEmoji?: boolean;
+	autoImageLoad?: boolean;
+	saveMobileBandwidth?: boolean;
+	collapseMediaByDefault?: boolean;
+	hideFlexTab?: boolean;
+	sendOnEnter?: 'normal' | 'alternative' | 'desktop';
+	highlights?: string;
+	newRoomNotification?: string;
+	newMessageNotification?: string;
+	muteFocusedConversations?: boolean;
+
+	enableNewMessageTemplate?: boolean;
+	displayAvatars?: boolean;
+	sidebarShowFavorites?: boolean;
+	sidebarShowUnread?: boolean;
+	sidebarSortby?: string;
+	sidebarViewMode?: string;
+	sidebarDisplayAvatar?: boolean;
+	sidebarGroupByType?: boolean;
+	masterVolume?: number;
+	notificationsSoundVolume?: number;
+	voipRingerVolume?: number;
+	desktopNotificationVoiceCalls?: boolean;
+};
+
+export const useAccountPreferencesValues = (): AccountPreferencesData => {
+	const language = useUserPreference<string>('language') || '';
+	const userDontAskAgainList = useUserPreference<{ action: string; label: string }[]>('dontAskAgainList') || [];
+	const dontAskAgainList = userDontAskAgainList.map(({ action }) => action);
+	const enableAutoAway = useUserPreference<boolean>('enableAutoAway');
+	const idleTimeLimit = useUserPreference<number>('idleTimeLimit');
+
+	const desktopNotificationRequireInteraction = useUserPreference<boolean>('desktopNotificationRequireInteraction');
+	const desktopNotifications = useUserPreference<string>('desktopNotifications');
+	const pushNotifications = useUserPreference<string>('pushNotifications');
+	const emailNotificationMode = useUserPreference<string>('emailNotificationMode');
+	const receiveLoginDetectionEmail = useUserPreference<boolean>('receiveLoginDetectionEmail', true);
+	const notifyCalendarEvents = useUserPreference<boolean>('notifyCalendarEvents');
+	const enableMobileRinging = useUserPreference<boolean>('enableMobileRinging');
+
+	const unreadAlert = useUserPreference<boolean>('unreadAlert');
+	const showThreadsInMainChannel = useUserPreference<boolean>('showThreadsInMainChannel');
+	const alsoSendThreadToChannel = useUserPreference<'default' | 'always' | 'never'>('alsoSendThreadToChannel');
+	const useEmojis = useUserPreference<boolean>('useEmojis');
+	const convertAsciiEmoji = useUserPreference<boolean>('convertAsciiEmoji');
+	const autoImageLoad = useUserPreference<boolean>('autoImageLoad');
+	const saveMobileBandwidth = useUserPreference<boolean>('saveMobileBandwidth');
+	const collapseMediaByDefault = useUserPreference<boolean>('collapseMediaByDefault');
+	const hideFlexTab = useUserPreference<boolean>('hideFlexTab');
+	const sendOnEnter = useUserPreference<'normal' | 'alternative' | 'desktop'>('sendOnEnter');
+	const displayAvatars = useUserPreference<boolean>('displayAvatars');
+
+	const highlights = useUserPreference<string[]>('highlights')?.join(',\n') ?? '';
+
+	const newRoomNotification = useUserPreference<string>('newRoomNotification');
+	const newMessageNotification = useUserPreference<string>('newMessageNotification');
+	const muteFocusedConversations = useUserPreference<boolean>('muteFocusedConversations');
+
+	const masterVolume = useUserPreference<number>('masterVolume', 100);
+	const notificationsSoundVolume = useUserPreference<number>('notificationsSoundVolume', 100);
+	const voipRingerVolume = useUserPreference<number>('voipRingerVolume', 100);
+
+	const desktopNotificationVoiceCalls = useUserPreference<boolean>('desktopNotificationVoiceCalls');
+
+	return {
+		language,
+		dontAskAgainList,
+		enableAutoAway,
+		idleTimeLimit,
+		desktopNotificationRequireInteraction,
+		desktopNotifications,
+		pushNotifications,
+		emailNotificationMode,
+		receiveLoginDetectionEmail,
+		notifyCalendarEvents,
+		enableMobileRinging,
+		unreadAlert,
+		showThreadsInMainChannel,
+		alsoSendThreadToChannel,
+		useEmojis,
+		convertAsciiEmoji,
+		autoImageLoad,
+		saveMobileBandwidth,
+		collapseMediaByDefault,
+		hideFlexTab,
+		sendOnEnter,
+		displayAvatars,
+		highlights,
+		newRoomNotification,
+		newMessageNotification,
+		muteFocusedConversations,
+		masterVolume,
+		notificationsSoundVolume,
+		voipRingerVolume,
+		desktopNotificationVoiceCalls,
+	};
+};