From 682dec78b77c5c64c401243f136ed0de0834124e Mon Sep 17 00:00:00 2001
From: sandranymark <sandra@nymark.nu>
Date: Fri, 4 Jul 2025 16:00:50 +0200
Subject: [PATCH 01/27] testFuselagForms

---
 .../accessibility/AccessibilityPage.tsx       |  52 +--
 .../preferences/PreferencesGlobalSection.tsx  |  17 +-
 .../PreferencesHighlightsSection.tsx          |  23 +-
 .../PreferencesLocalizationSection.tsx        |  33 +-
 .../PreferencesMessagesSection.tsx            | 355 +++++++-----------
 .../PreferencesNotificationsSection.tsx       | 220 ++++-------
 .../preferences/PreferencesSoundSection.tsx   | 252 ++++++-------
 .../PreferencesUserPresenceSection.tsx        |  42 +--
 .../account/profile/AccountProfileForm.tsx    | 167 +++-----
 9 files changed, 440 insertions(+), 721 deletions(-)

diff --git a/apps/meteor/client/views/account/accessibility/AccessibilityPage.tsx b/apps/meteor/client/views/account/accessibility/AccessibilityPage.tsx
index 6b5b6a1bccc9c..dcd36503dce1e 100644
--- a/apps/meteor/client/views/account/accessibility/AccessibilityPage.tsx
+++ b/apps/meteor/client/views/account/accessibility/AccessibilityPage.tsx
@@ -1,12 +1,8 @@
 import { css } from '@rocket.chat/css-in-js';
 import type { SelectOption } from '@rocket.chat/fuselage';
+import { Accordion, AccordionItem, Box, Button, ButtonGroup } from '@rocket.chat/fuselage';
 import {
 	FieldDescription,
-	Accordion,
-	AccordionItem,
-	Box,
-	Button,
-	ButtonGroup,
 	Field,
 	FieldGroup,
 	FieldHint,
@@ -15,7 +11,7 @@ import {
 	RadioButton,
 	Select,
 	ToggleSwitch,
-} from '@rocket.chat/fuselage';
+} from '@rocket.chat/fuselage-forms';
 import { ExternalLink, Page, PageHeader, PageScrollableContentWithShadow, PageFooter } from '@rocket.chat/ui-client';
 import { useTranslation, useToastMessageDispatch, useEndpoint, useSetting } from '@rocket.chat/ui-contexts';
 import { useMutation } from '@tanstack/react-query';
@@ -49,11 +45,7 @@ const AccessibilityPage = () => {
 	);
 
 	const pageFormId = useId();
-	const fontSizeId = useId();
-	const mentionsWithSymbolId = useId();
-	const clockModeId = useId();
-	const hideUsernamesId = useId();
-	const hideRolesId = useId();
+
 	const linkListId = useId();
 
 	const {
@@ -113,7 +105,7 @@ const AccessibilityPage = () => {
 								return (
 									<Field key={id} pbe={themes.length - 1 ? undefined : 'x28'} pbs={index === 0 ? undefined : 'x28'}>
 										<FieldRow>
-											<FieldLabel display='flex' alignItems='center' htmlFor={id}>
+											<FieldLabel display='flex' alignItems='center'>
 												{t(title)}
 											</FieldLabel>
 											<Controller
@@ -137,29 +129,23 @@ const AccessibilityPage = () => {
 									<legend>{t('Adjustable_layout')}</legend>
 								</VisuallyHidden>
 								<Field>
-									<FieldLabel htmlFor={fontSizeId} mbe={12}>
-										{t('Font_size')}
-									</FieldLabel>
+									<FieldLabel mbe={12}>{t('Font_size')}</FieldLabel>
 									<FieldRow>
 										<Controller
 											control={control}
 											name='fontSize'
-											render={({ field: { onChange, value } }) => (
-												<Select id={fontSizeId} value={value} onChange={onChange} options={fontSizes(t)} />
-											)}
+											render={({ field: { onChange, value } }) => <Select value={value} onChange={onChange} options={fontSizes(t)} />}
 										/>
 									</FieldRow>
 									<FieldDescription mb={12}>{t('Adjustable_font_size_description')}</FieldDescription>
 								</Field>
 								<Field>
 									<FieldRow>
-										<FieldLabel htmlFor={mentionsWithSymbolId}>{t('Mentions_with_@_symbol')}</FieldLabel>
+										<FieldLabel>{t('Mentions_with_@_symbol')}</FieldLabel>
 										<Controller
 											control={control}
 											name='mentionsWithSymbol'
-											render={({ field: { onChange, value, ref } }) => (
-												<ToggleSwitch id={mentionsWithSymbolId} ref={ref} checked={value} onChange={onChange} />
-											)}
+											render={({ field: { onChange, value, ref } }) => <ToggleSwitch ref={ref} checked={value} onChange={onChange} />}
 										/>
 									</FieldRow>
 									<FieldDescription
@@ -172,30 +158,25 @@ const AccessibilityPage = () => {
 									</FieldDescription>
 								</Field>
 								<Field>
-									<FieldLabel htmlFor={clockModeId}>{t('Message_TimeFormat')}</FieldLabel>
+									<FieldLabel>{t('Message_TimeFormat')}</FieldLabel>
 									<FieldRow>
 										<Controller
 											name='clockMode'
 											control={control}
 											render={({ field: { value, onChange } }) => (
-												<Select id={clockModeId} value={`${value}`} onChange={onChange} options={timeFormatOptions} />
+												<Select value={`${value}`} onChange={onChange} options={timeFormatOptions} />
 											)}
 										/>
 									</FieldRow>
 								</Field>
 								<Field>
 									<FieldRow>
-										<FieldLabel htmlFor={hideUsernamesId}>{t('Show_usernames')}</FieldLabel>
+										<FieldLabel>{t('Show_usernames')}</FieldLabel>
 										<Controller
 											name='hideUsernames'
 											control={control}
 											render={({ field: { value, onChange, ref } }) => (
-												<ToggleSwitch
-													id={hideUsernamesId}
-													ref={ref}
-													checked={!value}
-													onChange={(e) => onChange(!(e.target as HTMLInputElement).checked)}
-												/>
+												<ToggleSwitch ref={ref} checked={!value} onChange={(e) => onChange(!(e.target as HTMLInputElement).checked)} />
 											)}
 										/>
 									</FieldRow>
@@ -204,17 +185,12 @@ const AccessibilityPage = () => {
 								{displayRolesEnabled && (
 									<Field>
 										<FieldRow>
-											<FieldLabel htmlFor={hideRolesId}>{t('Show_roles')}</FieldLabel>
+											<FieldLabel>{t('Show_roles')}</FieldLabel>
 											<Controller
 												name='hideRoles'
 												control={control}
 												render={({ field: { value, onChange, ref } }) => (
-													<ToggleSwitch
-														id={hideRolesId}
-														ref={ref}
-														checked={!value}
-														onChange={(e) => onChange(!(e.target as HTMLInputElement).checked)}
-													/>
+													<ToggleSwitch ref={ref} checked={!value} onChange={(e) => onChange(!(e.target as HTMLInputElement).checked)} />
 												)}
 											/>
 										</FieldRow>
diff --git a/apps/meteor/client/views/account/preferences/PreferencesGlobalSection.tsx b/apps/meteor/client/views/account/preferences/PreferencesGlobalSection.tsx
index 6bc5468e02007..2fdd22c0c9515 100644
--- a/apps/meteor/client/views/account/preferences/PreferencesGlobalSection.tsx
+++ b/apps/meteor/client/views/account/preferences/PreferencesGlobalSection.tsx
@@ -1,32 +1,35 @@
 import type { SelectOption } from '@rocket.chat/fuselage';
-import { AccordionItem, Field, FieldGroup, FieldLabel, FieldRow, MultiSelect } from '@rocket.chat/fuselage';
+import { Field, FieldGroup, FieldLabel, FieldRow, Select, FieldDescription, FieldLabelInfo } from '@rocket.chat/fuselage-forms';
+import { AccordionItem } from '@rocket.chat/fuselage';
 import { useUserPreference } from '@rocket.chat/ui-contexts';
-import { useId } from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
+// import { useId } from 'react';
 
 const PreferencesGlobalSection = () => {
 	const { t } = useTranslation();
 
+	// const multiSelectId = useId();
+
 	const userDontAskAgainList = useUserPreference<{ action: string; label: string }[]>('dontAskAgainList') || [];
 	const options: SelectOption[] = userDontAskAgainList.map(({ action, label }) => [action, label]);
 
 	const { control } = useFormContext();
-	const dontAskAgainListId = useId();
 
 	return (
 		<AccordionItem title={t('Global')}>
 			<FieldGroup>
+				<legend hidden>{t('Global')}</legend>
 				<Field>
-					<FieldLabel is='span' htmlFor={dontAskAgainListId}>
-						{t('Dont_ask_me_again_list')}
-					</FieldLabel>
+					<FieldLabel required>{t('Dont_ask_me_again_list')}</FieldLabel>
+					<FieldLabelInfo title='with extra info in a tooltip' />
+					<FieldDescription>You can use this field to enter multi-line text</FieldDescription>
 					<FieldRow>
 						<Controller
 							name='dontAskAgainList'
 							control={control}
 							render={({ field: { value, onChange } }) => (
-								<MultiSelect id={dontAskAgainListId} placeholder={t('Nothing_found')} value={value} onChange={onChange} options={options} />
+								<Select placeholder={t('Nothing_found')} value={value} onChange={onChange} options={options} />
 							)}
 						/>
 					</FieldRow>
diff --git a/apps/meteor/client/views/account/preferences/PreferencesHighlightsSection.tsx b/apps/meteor/client/views/account/preferences/PreferencesHighlightsSection.tsx
index 4e97317a2ca73..46c609596c3f9 100644
--- a/apps/meteor/client/views/account/preferences/PreferencesHighlightsSection.tsx
+++ b/apps/meteor/client/views/account/preferences/PreferencesHighlightsSection.tsx
@@ -1,5 +1,6 @@
-import { AccordionItem, Field, FieldGroup, FieldLabel, FieldRow, FieldHint, TextAreaInput } from '@rocket.chat/fuselage';
-import { useId } from 'react';
+import { Field, FieldLabel, FieldRow, FieldHint, TextAreaInput } from '@rocket.chat/fuselage-forms';
+import { AccordionItem } from '@rocket.chat/fuselage';
+
 import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
@@ -7,19 +8,15 @@ const PreferencesHighlightsSection = () => {
 	const { t } = useTranslation();
 	const { register } = useFormContext();
 
-	const highlightsId = useId();
-
 	return (
 		<AccordionItem title={t('Highlights')}>
-			<FieldGroup>
-				<Field>
-					<FieldLabel htmlFor={highlightsId}>{t('Highlights_List')}</FieldLabel>
-					<FieldRow>
-						<TextAreaInput id={highlightsId} {...register('highlights')} rows={4} />
-					</FieldRow>
-					<FieldHint>{t('Highlights_How_To')}</FieldHint>
-				</Field>
-			</FieldGroup>
+			<Field>
+				<FieldLabel required>{t('Highlights_List')}</FieldLabel>
+				<FieldRow>
+					<TextAreaInput {...register('highlights')} rows={4} />
+				</FieldRow>
+				<FieldHint>{t('Highlights_How_To')}</FieldHint>
+			</Field>
 		</AccordionItem>
 	);
 };
diff --git a/apps/meteor/client/views/account/preferences/PreferencesLocalizationSection.tsx b/apps/meteor/client/views/account/preferences/PreferencesLocalizationSection.tsx
index 46d33abda49d1..312b1ada448ff 100644
--- a/apps/meteor/client/views/account/preferences/PreferencesLocalizationSection.tsx
+++ b/apps/meteor/client/views/account/preferences/PreferencesLocalizationSection.tsx
@@ -1,7 +1,8 @@
 import type { SelectOption } from '@rocket.chat/fuselage';
-import { AccordionItem, Field, FieldGroup, FieldLabel, FieldRow, Select } from '@rocket.chat/fuselage';
+import { Field, FieldLabel, FieldRow, Select } from '@rocket.chat/fuselage-forms';
+import { AccordionItem } from '@rocket.chat/fuselage';
 import { useLanguages } from '@rocket.chat/ui-contexts';
-import { useId, useMemo } from 'react';
+import { useMemo } from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
@@ -13,26 +14,18 @@ const PreferencesLocalizationSection = () => {
 
 	const languageOptions = useMemo(() => languages.map(({ key, name }): SelectOption => [key, name]), [languages]);
 
-	const languageId = useId();
-
 	return (
 		<AccordionItem title={t('Localization')} defaultExpanded>
-			<FieldGroup>
-				<Field>
-					<FieldLabel is='span' id={languageId}>
-						{t('Language')}
-					</FieldLabel>
-					<FieldRow>
-						<Controller
-							control={control}
-							name='language'
-							render={({ field: { value, onChange } }) => (
-								<Select aria-labelledby={languageId} value={value} onChange={onChange} options={languageOptions} />
-							)}
-						/>
-					</FieldRow>
-				</Field>
-			</FieldGroup>
+			<Field>
+				<FieldLabel required>{t('Language')}</FieldLabel>
+				<FieldRow>
+					<Controller
+						control={control}
+						name='language'
+						render={({ field: { value, onChange } }) => <Select value={value} onChange={onChange} options={languageOptions} />}
+					/>
+				</FieldRow>
+			</Field>
 		</AccordionItem>
 	);
 };
diff --git a/apps/meteor/client/views/account/preferences/PreferencesMessagesSection.tsx b/apps/meteor/client/views/account/preferences/PreferencesMessagesSection.tsx
index 44e326ef3b24e..6dba760ee6189 100644
--- a/apps/meteor/client/views/account/preferences/PreferencesMessagesSection.tsx
+++ b/apps/meteor/client/views/account/preferences/PreferencesMessagesSection.tsx
@@ -1,6 +1,7 @@
 import type { SelectOption } from '@rocket.chat/fuselage';
-import { AccordionItem, Field, FieldGroup, FieldHint, FieldLabel, FieldLink, FieldRow, Select, ToggleSwitch } from '@rocket.chat/fuselage';
-import { useId, useMemo } from 'react';
+import { Field, FieldHint, FieldLabel, FieldLink, FieldRow, Select, ToggleSwitch, FieldDescription } from '@rocket.chat/fuselage-forms';
+import { AccordionItem } from '@rocket.chat/fuselage';
+import { useMemo } from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
@@ -26,219 +27,147 @@ const PreferencesMessagesSection = () => {
 		[t],
 	);
 
-	const unreadAlertId = useId();
-	const showThreadsInMainChannelId = useId();
-	const alsoSendThreadToChannelId = useId();
-	const useEmojisId = useId();
-	const convertAsciiEmojiId = useId();
-	const autoImageLoadId = useId();
-	const saveMobileBandwidthId = useId();
-	const collapseMediaByDefaultId = useId();
-	const hideFlexTabId = useId();
-	const displayAvatarsId = useId();
-	const sendOnEnterId = useId();
-	const messageTimeFormatLabelId = useId();
-	const messageTimeFormatLinkId = useId();
-	const hideUsernamesLabelId = useId();
-	const hideUsernamesLinkId = useId();
-	const hideRolesLabelId = useId();
-	const hideRolesLinkId = useId();
-
 	return (
 		<AccordionItem title={t('Messages')}>
-			<FieldGroup>
-				<Field>
-					<FieldRow>
-						<FieldLabel htmlFor={unreadAlertId}>{t('Unread_Tray_Icon_Alert')}</FieldLabel>
-						<Controller
-							name='unreadAlert'
-							control={control}
-							render={({ field: { value, onChange, ref } }) => (
-								<ToggleSwitch id={unreadAlertId} ref={ref} checked={value} onChange={onChange} />
-							)}
-						/>
-					</FieldRow>
-				</Field>
-				<Field>
-					<FieldRow>
-						<FieldLabel htmlFor={showThreadsInMainChannelId}>{t('Always_show_thread_replies_in_main_channel')}</FieldLabel>
-						<Controller
-							name='showThreadsInMainChannel'
-							control={control}
-							render={({ field: { value, onChange, ref } }) => (
-								<ToggleSwitch
-									aria-describedby={`${showThreadsInMainChannelId}-hint`}
-									id={showThreadsInMainChannelId}
-									ref={ref}
-									checked={value}
-									onChange={onChange}
-								/>
-							)}
-						/>
-					</FieldRow>
-					<FieldHint id={`${showThreadsInMainChannelId}-hint`}>
-						{t('Accounts_Default_User_Preferences_showThreadsInMainChannel_Description')}
-					</FieldHint>
-				</Field>
-				<Field>
-					<FieldLabel is='span' id={alsoSendThreadToChannelId}>
-						{t('Also_send_thread_message_to_channel_behavior')}
-					</FieldLabel>
-					<FieldRow>
-						<Controller
-							name='alsoSendThreadToChannel'
-							control={control}
-							render={({ field: { value, onChange } }) => (
-								<Select
-									aria-labelledby={alsoSendThreadToChannelId}
-									aria-describedby={`${alsoSendThreadToChannelId}-hint`}
-									value={value}
-									onChange={onChange}
-									options={alsoSendThreadMessageToChannelOptions}
-								/>
-							)}
-						/>
-					</FieldRow>
-					<FieldHint id={`${alsoSendThreadToChannelId}-hint`}>
-						{t('Accounts_Default_User_Preferences_alsoSendThreadToChannel_Description')}
-					</FieldHint>
-				</Field>
-				<Field>
-					<FieldLabel is='span' id={messageTimeFormatLabelId}>
-						{t('Message_TimeFormat')}
-					</FieldLabel>
-					<FieldLink
-						id={messageTimeFormatLinkId}
-						aria-labelledby={`${messageTimeFormatLabelId} ${messageTimeFormatLinkId}`}
-						href='/account/accessibility-and-appearance'
-					>
-						{t('Go_to_accessibility_and_appearance')}
-					</FieldLink>
-				</Field>
-				<Field>
-					<FieldRow>
-						<FieldLabel htmlFor={useEmojisId}>{t('Use_Emojis')}</FieldLabel>
-						<Controller
-							name='useEmojis'
-							control={control}
-							render={({ field: { value, onChange, ref } }) => (
-								<ToggleSwitch id={useEmojisId} ref={ref} checked={value} onChange={onChange} />
-							)}
-						/>
-					</FieldRow>
-				</Field>
-				<Field>
-					<FieldRow>
-						<FieldLabel htmlFor={convertAsciiEmojiId}>{t('Convert_Ascii_Emojis')}</FieldLabel>
-						<Controller
-							name='convertAsciiEmoji'
-							control={control}
-							render={({ field: { value, onChange, ref } }) => (
-								<ToggleSwitch id={convertAsciiEmojiId} ref={ref} checked={value} onChange={onChange} />
-							)}
-						/>
-					</FieldRow>
-				</Field>
-				<Field>
-					<FieldRow>
-						<FieldLabel htmlFor={autoImageLoadId}>{t('Auto_Load_Images')}</FieldLabel>
-						<Controller
-							name='autoImageLoad'
-							control={control}
-							render={({ field: { value, onChange, ref } }) => (
-								<ToggleSwitch id={autoImageLoadId} ref={ref} checked={value} onChange={onChange} />
-							)}
-						/>
-					</FieldRow>
-				</Field>
-				<Field>
-					<FieldRow>
-						<FieldLabel htmlFor={saveMobileBandwidthId}>{t('Save_Mobile_Bandwidth')}</FieldLabel>
-						<Controller
-							name='saveMobileBandwidth'
-							control={control}
-							render={({ field: { value, onChange, ref } }) => (
-								<ToggleSwitch id={saveMobileBandwidthId} ref={ref} checked={value} onChange={onChange} />
-							)}
-						/>
-					</FieldRow>
-				</Field>
-				<Field>
-					<FieldRow>
-						<FieldLabel htmlFor={collapseMediaByDefaultId}>{t('Collapse_Embedded_Media_By_Default')}</FieldLabel>
-						<Controller
-							name='collapseMediaByDefault'
-							control={control}
-							render={({ field: { value, onChange, ref } }) => (
-								<ToggleSwitch id={collapseMediaByDefaultId} ref={ref} checked={value} onChange={onChange} />
-							)}
-						/>
-					</FieldRow>
-				</Field>
-				<Field>
-					<FieldLabel is='span' id={hideUsernamesLabelId}>
-						{t('Hide_usernames')}
-					</FieldLabel>
-					<FieldLink
-						href='/account/accessibility-and-appearance'
-						id={hideUsernamesLinkId}
-						aria-labelledby={`${hideUsernamesLabelId} ${hideUsernamesLinkId}`}
-					>
-						{t('Go_to_accessibility_and_appearance')}
-					</FieldLink>
-				</Field>
-				<Field>
-					<FieldLabel is='span' id={hideRolesLabelId}>
-						{t('Hide_roles')}
-					</FieldLabel>
-					<FieldLink
-						id={hideRolesLinkId}
-						aria-labelledby={`${hideRolesLabelId} ${hideRolesLinkId}`}
-						href='/account/accessibility-and-appearance'
-					>
-						{t('Go_to_accessibility_and_appearance')}
-					</FieldLink>
-				</Field>
-				<Field>
-					<FieldRow>
-						<FieldLabel htmlFor={hideFlexTabId}>{t('Hide_flextab')}</FieldLabel>
-						<Controller
-							name='hideFlexTab'
-							control={control}
-							render={({ field: { value, onChange, ref } }) => (
-								<ToggleSwitch id={hideFlexTabId} ref={ref} checked={value} onChange={onChange} />
-							)}
-						/>
-					</FieldRow>
-				</Field>
-				<Field>
-					<FieldRow>
-						<FieldLabel htmlFor={displayAvatarsId}>{t('Display_avatars')}</FieldLabel>
-						<Controller
-							name='displayAvatars'
-							control={control}
-							render={({ field: { value, onChange, ref } }) => (
-								<ToggleSwitch id={displayAvatarsId} ref={ref} checked={value} onChange={onChange} />
-							)}
-						/>
-					</FieldRow>
-				</Field>
-				<Field>
-					<FieldLabel is='span' id={sendOnEnterId}>
-						{t('Enter_Behaviour')}
-					</FieldLabel>
-					<FieldRow>
-						<Controller
-							name='sendOnEnter'
-							control={control}
-							render={({ field: { value, onChange } }) => (
-								<Select aria-labelledby={sendOnEnterId} value={value} onChange={onChange} options={sendOnEnterOptions} />
-							)}
-						/>
-					</FieldRow>
-					<FieldHint>{t('Enter_Behaviour_Description')}</FieldHint>
-				</Field>
-			</FieldGroup>
+			<Field>
+				<FieldRow>
+					<FieldLabel required>{t('Unread_Tray_Icon_Alert')}</FieldLabel>
+					<FieldDescription>You can use this field to enter multi-line text</FieldDescription>
+					<Controller
+						name='unreadAlert'
+						control={control}
+						render={({ field: { value, onChange, ref } }) => <ToggleSwitch ref={ref} checked={value} onChange={onChange} />}
+					/>
+				</FieldRow>
+			</Field>
+			<Field>
+				<FieldRow>
+					<FieldLabel required>{t('Always_show_thread_replies_in_main_channel')}</FieldLabel>
+					<FieldDescription>You can use this field to enter multi-line text</FieldDescription>
+					<Controller
+						name='showThreadsInMainChannel'
+						control={control}
+						render={({ field: { value, onChange, ref } }) => <ToggleSwitch ref={ref} checked={value} onChange={onChange} />}
+					/>
+				</FieldRow>
+				<FieldHint>{t('Accounts_Default_User_Preferences_showThreadsInMainChannel_Description')}</FieldHint>
+			</Field>
+			<Field>
+				<FieldLabel required>{t('Also_send_thread_message_to_channel_behavior')}</FieldLabel>
+				<FieldDescription>You can use this field to enter multi-line text</FieldDescription>
+				<FieldRow>
+					<Controller
+						name='alsoSendThreadToChannel'
+						control={control}
+						render={({ field: { value, onChange } }) => (
+							<Select value={value} onChange={onChange} options={alsoSendThreadMessageToChannelOptions} />
+						)}
+					/>
+				</FieldRow>
+				<FieldHint>{t('Accounts_Default_User_Preferences_alsoSendThreadToChannel_Description')}</FieldHint>
+			</Field>
+			<Field>
+				<FieldLabel required>{t('Message_TimeFormat')}</FieldLabel>
+				<FieldLink href='/account/accessibility-and-appearance'>{t('Go_to_accessibility_and_appearance')}</FieldLink>
+			</Field>
+			<Field>
+				<FieldRow>
+					<FieldLabel required>{t('Use_Emojis')}</FieldLabel>
+					<FieldDescription>You can use this field to enter multi-line text</FieldDescription>
+					<Controller
+						name='useEmojis'
+						control={control}
+						render={({ field: { value, onChange, ref } }) => <ToggleSwitch ref={ref} checked={value} onChange={onChange} />}
+					/>
+				</FieldRow>
+			</Field>
+			<Field>
+				<FieldRow>
+					<FieldLabel required>{t('Convert_Ascii_Emojis')}</FieldLabel>
+					<Controller
+						name='convertAsciiEmoji'
+						control={control}
+						render={({ field: { value, onChange, ref } }) => <ToggleSwitch ref={ref} checked={value} onChange={onChange} />}
+					/>
+				</FieldRow>
+			</Field>
+			<Field>
+				<FieldRow>
+					<FieldLabel required>{t('Auto_Load_Images')}</FieldLabel>
+					<FieldDescription>You can use this field to enter multi-line text</FieldDescription>
+					<Controller
+						name='autoImageLoad'
+						control={control}
+						render={({ field: { value, onChange, ref } }) => <ToggleSwitch ref={ref} checked={value} onChange={onChange} />}
+					/>
+				</FieldRow>
+			</Field>
+			<Field>
+				<FieldRow>
+					<FieldLabel required>{t('Save_Mobile_Bandwidth')}</FieldLabel>
+					<FieldDescription>You can use this field to enter multi-line text</FieldDescription>
+					<Controller
+						name='saveMobileBandwidth'
+						control={control}
+						render={({ field: { value, onChange, ref } }) => <ToggleSwitch ref={ref} checked={value} onChange={onChange} />}
+					/>
+				</FieldRow>
+			</Field>
+			<Field>
+				<FieldRow>
+					<FieldLabel required>{t('Collapse_Embedded_Media_By_Default')}</FieldLabel>
+					<FieldDescription>You can use this field to enter multi-line text</FieldDescription>
+					<Controller
+						name='collapseMediaByDefault'
+						control={control}
+						render={({ field: { value, onChange, ref } }) => <ToggleSwitch ref={ref} checked={value} onChange={onChange} />}
+					/>
+				</FieldRow>
+			</Field>
+			<Field>
+				<FieldLabel required>{t('Hide_usernames')}</FieldLabel>
+				<FieldDescription>You can use this field to enter multi-line text</FieldDescription>
+				<FieldLink href='/account/accessibility-and-appearance'>{t('Go_to_accessibility_and_appearance')}</FieldLink>
+			</Field>
+			<Field>
+				<FieldLabel required>{t('Hide_roles')}</FieldLabel>
+				<FieldDescription>You can use this field to enter multi-line text</FieldDescription>
+				<FieldLink href='/account/accessibility-and-appearance'>{t('Go_to_accessibility_and_appearance')}</FieldLink>
+			</Field>
+			<Field>
+				<FieldRow>
+					<FieldLabel required>{t('Hide_flextab')}</FieldLabel>
+					<FieldDescription>You can use this field to enter multi-line text</FieldDescription>
+					<Controller
+						name='hideFlexTab'
+						control={control}
+						render={({ field: { value, onChange, ref } }) => <ToggleSwitch ref={ref} checked={value} onChange={onChange} />}
+					/>
+				</FieldRow>
+			</Field>
+			<Field>
+				<FieldRow>
+					<FieldLabel required>{t('Display_avatars')}</FieldLabel>
+					<FieldDescription>You can use this field to enter multi-line text</FieldDescription>
+					<Controller
+						name='displayAvatars'
+						control={control}
+						render={({ field: { value, onChange, ref } }) => <ToggleSwitch ref={ref} checked={value} onChange={onChange} />}
+					/>
+				</FieldRow>
+			</Field>
+			<Field>
+				<FieldLabel required>{t('Enter_Behaviour')}</FieldLabel>
+				<FieldDescription>You can use this field to enter multi-line text</FieldDescription>
+				<FieldRow>
+					<Controller
+						name='sendOnEnter'
+						control={control}
+						render={({ field: { value, onChange } }) => <Select value={value} onChange={onChange} options={sendOnEnterOptions} />}
+					/>
+				</FieldRow>
+				<FieldHint>{t('Enter_Behaviour_Description')}</FieldHint>
+			</Field>
 		</AccordionItem>
 	);
 };
diff --git a/apps/meteor/client/views/account/preferences/PreferencesNotificationsSection.tsx b/apps/meteor/client/views/account/preferences/PreferencesNotificationsSection.tsx
index 54c1cb0a2bd1a..d9c84d961de69 100644
--- a/apps/meteor/client/views/account/preferences/PreferencesNotificationsSection.tsx
+++ b/apps/meteor/client/views/account/preferences/PreferencesNotificationsSection.tsx
@@ -1,6 +1,7 @@
 import type { INotificationDesktop } from '@rocket.chat/core-typings';
 import type { SelectOption } from '@rocket.chat/fuselage';
-import { AccordionItem, Button, Field, FieldGroup, FieldHint, FieldLabel, FieldRow, Select, ToggleSwitch } from '@rocket.chat/fuselage';
+import { AccordionItem, Button } from '@rocket.chat/fuselage';
+import { Field, 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';
@@ -86,173 +87,112 @@ const PreferencesNotificationsSection = () => {
 
 	const { control } = useFormContext();
 
-	const notificationRequireId = useId();
-	const desktopNotificationsId = useId();
-	const pushNotificationsId = useId();
-	const emailNotificationModeId = useId();
-	const receiveLoginDetectionEmailId = useId();
-	const notifyCalendarEventsId = useId();
-	const enableMobileRingingId = useId();
 	const desktopNotificationsLabelId = useId();
-	const desktopNotificationVoiceCallsId = useId();
 
 	const showCalendarPreference = user?.settings?.calendar?.outlook?.Enabled;
 
 	return (
 		<AccordionItem title={t('Notifications')}>
-			<FieldGroup>
-				<Field>
-					<FieldLabel is='span' id={desktopNotificationsLabelId}>
-						{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>
+			<Field>
+				<FieldLabel required>{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 required>{t('Notification_RequireInteraction')}</FieldLabel>
+					<Controller
+						name='desktopNotificationRequireInteraction'
+						control={control}
+						render={({ field: { ref, value, onChange } }) => <ToggleSwitch ref={ref} checked={value} onChange={onChange} />}
+					/>
+				</FieldRow>
+				<FieldHint>{t('Only_works_with_chrome_version_greater_50')}</FieldHint>
+			</Field>
+			<Field>
+				<FieldLabel required>{t('Notification_Desktop_Default_For')}</FieldLabel>
+				<FieldRow>
+					<Controller
+						name='desktopNotifications'
+						control={control}
+						render={({ field: { value, onChange } }) => <Select value={value} onChange={onChange} options={desktopNotificationOptions} />}
+					/>
+				</FieldRow>
+			</Field>
+			<Field>
+				<FieldLabel required>{t('Notification_Push_Default_For')}</FieldLabel>
+				<FieldRow>
+					<Controller
+						name='pushNotifications'
+						control={control}
+						render={({ field: { value, onChange } }) => <Select value={value} onChange={onChange} options={mobileNotificationOptions} />}
+					/>
+				</FieldRow>
+			</Field>
+			<Field>
+				<FieldLabel required>{t('Email_Notification_Mode')}</FieldLabel>
+				<FieldRow>
+					<Controller
+						name='emailNotificationMode'
+						control={control}
+						render={({ field: { value, onChange } }) => (
+							<Select disabled={!canChangeEmailNotification} value={value} onChange={onChange} options={emailNotificationOptions} />
 						)}
-					</FieldRow>
-				</Field>
-				<Field>
-					<FieldRow>
-						<FieldLabel htmlFor={notificationRequireId}>{t('Notification_RequireInteraction')}</FieldLabel>
-						<Controller
-							name='desktopNotificationRequireInteraction'
-							control={control}
-							render={({ field: { ref, value, onChange } }) => (
-								<ToggleSwitch
-									aria-describedby={`${notificationRequireId}-hint`}
-									id={notificationRequireId}
-									ref={ref}
-									checked={value}
-									onChange={onChange}
-								/>
-							)}
-						/>
-					</FieldRow>
-					<FieldHint id={`${notificationRequireId}-hint`}>{t('Only_works_with_chrome_version_greater_50')}</FieldHint>
-				</Field>
-				<Field>
-					<FieldLabel is='span' id={desktopNotificationsId}>
-						{t('Notification_Desktop_Default_For')}
-					</FieldLabel>
-					<FieldRow>
-						<Controller
-							name='desktopNotifications'
-							control={control}
-							render={({ field: { value, onChange } }) => (
-								<Select aria-labelledby={desktopNotificationsId} value={value} onChange={onChange} options={desktopNotificationOptions} />
-							)}
-						/>
-					</FieldRow>
-				</Field>
+					/>
+				</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 htmlFor={desktopNotificationVoiceCallsId}>{t('Notification_Desktop_show_voice_calls')}</FieldLabel>
+						<FieldLabel required>{t('Receive_Login_Detection_Emails')}</FieldLabel>
 						<Controller
-							name='desktopNotificationVoiceCalls'
+							name='receiveLoginDetectionEmail'
 							control={control}
-							render={({ field: { ref, value, onChange } }) => (
-								<ToggleSwitch id={desktopNotificationVoiceCallsId} ref={ref} checked={value} onChange={onChange} />
-							)}
+							render={({ field: { ref, value, onChange } }) => <ToggleSwitch ref={ref} checked={value} onChange={onChange} />}
 						/>
 					</FieldRow>
+					<FieldHint>{t('Receive_Login_Detection_Emails_Description')}</FieldHint>
 				</Field>
+			)}
+			{showCalendarPreference && (
 				<Field>
-					<FieldLabel is='span' id={pushNotificationsId}>
-						{t('Notification_Push_Default_For')}
-					</FieldLabel>
 					<FieldRow>
+						<FieldLabel required>{t('Notify_Calendar_Events')}</FieldLabel>
 						<Controller
-							name='pushNotifications'
+							name='notifyCalendarEvents'
 							control={control}
-							render={({ field: { value, onChange } }) => (
-								<Select aria-labelledby={pushNotificationsId} value={value} onChange={onChange} options={mobileNotificationOptions} />
-							)}
+							render={({ field: { ref, value, onChange } }) => <ToggleSwitch ref={ref} checked={value} onChange={onChange} />}
 						/>
 					</FieldRow>
 				</Field>
+			)}
+			{showMobileRinging && (
 				<Field>
-					<FieldLabel is='span' id={emailNotificationModeId}>
-						{t('Email_Notification_Mode')}
-					</FieldLabel>
 					<FieldRow>
+						<FieldLabel required>{t('VideoConf_Mobile_Ringing')}</FieldLabel>
 						<Controller
-							name='emailNotificationMode'
+							name='enableMobileRinging'
 							control={control}
-							render={({ field: { value, onChange } }) => (
-								<Select
-									aria-describedby={`${emailNotificationModeId}-hint`}
-									aria-labelledby={emailNotificationModeId}
-									disabled={!canChangeEmailNotification}
-									value={value}
-									onChange={onChange}
-									options={emailNotificationOptions}
-								/>
-							)}
+							render={({ field: { ref, value, onChange } }) => <ToggleSwitch ref={ref} checked={value} onChange={onChange} />}
 						/>
 					</FieldRow>
-					<FieldHint id={`${emailNotificationModeId}-hint`}>
-						{canChangeEmailNotification && t('You_need_to_verifiy_your_email_address_to_get_notications')}
-						{!canChangeEmailNotification && t('Email_Notifications_Change_Disabled')}
-					</FieldHint>
 				</Field>
-				{showNewLoginEmailPreference && (
-					<Field>
-						<FieldRow>
-							<FieldLabel htmlFor={receiveLoginDetectionEmailId}>{t('Receive_Login_Detection_Emails')}</FieldLabel>
-							<Controller
-								name='receiveLoginDetectionEmail'
-								control={control}
-								render={({ field: { ref, value, onChange } }) => (
-									<ToggleSwitch
-										aria-describedby={`${receiveLoginDetectionEmailId}-hint`}
-										id={receiveLoginDetectionEmailId}
-										ref={ref}
-										checked={value}
-										onChange={onChange}
-									/>
-								)}
-							/>
-						</FieldRow>
-						<FieldHint id={`${receiveLoginDetectionEmailId}-hint`}>{t('Receive_Login_Detection_Emails_Description')}</FieldHint>
-					</Field>
-				)}
-				{showCalendarPreference && (
-					<Field>
-						<FieldRow>
-							<FieldLabel htmlFor={notifyCalendarEventsId}>{t('Notify_Calendar_Events')}</FieldLabel>
-							<Controller
-								name='notifyCalendarEvents'
-								control={control}
-								render={({ field: { ref, value, onChange } }) => (
-									<ToggleSwitch id={notifyCalendarEventsId} ref={ref} checked={value} onChange={onChange} />
-								)}
-							/>
-						</FieldRow>
-					</Field>
-				)}
-				{showMobileRinging && (
-					<Field>
-						<FieldRow>
-							<FieldLabel htmlFor={enableMobileRingingId}>{t('VideoConf_Mobile_Ringing')}</FieldLabel>
-							<Controller
-								name='enableMobileRinging'
-								control={control}
-								render={({ field: { ref, value, onChange } }) => (
-									<ToggleSwitch id={enableMobileRingingId} ref={ref} checked={value} onChange={onChange} />
-								)}
-							/>
-						</FieldRow>
-					</Field>
-				)}
-			</FieldGroup>
+			)}
 		</AccordionItem>
 	);
 };
diff --git a/apps/meteor/client/views/account/preferences/PreferencesSoundSection.tsx b/apps/meteor/client/views/account/preferences/PreferencesSoundSection.tsx
index 96f0a445d9a19..0c99b65ae1c69 100644
--- a/apps/meteor/client/views/account/preferences/PreferencesSoundSection.tsx
+++ b/apps/meteor/client/views/account/preferences/PreferencesSoundSection.tsx
@@ -1,8 +1,8 @@
 import type { SelectOption } from '@rocket.chat/fuselage';
-import { AccordionItem, Field, FieldGroup, FieldHint, FieldLabel, FieldRow, Select, Slider, ToggleSwitch } from '@rocket.chat/fuselage';
+import { Field, FieldHint, FieldLabel, FieldRow, Select, ToggleSwitch } from '@rocket.chat/fuselage-forms';
+import { AccordionItem, Slider } from '@rocket.chat/fuselage';
 import type { TranslationKey } from '@rocket.chat/ui-contexts';
 import { useCustomSound, useTranslation } from '@rocket.chat/ui-contexts';
-import { useId } from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 
 const PreferencesSoundSection = () => {
@@ -13,153 +13,111 @@ const PreferencesSoundSection = () => {
 	const { control, watch } = useFormContext();
 	const { newMessageNotification, notificationsSoundVolume = 100, masterVolume = 100, voipRingerVolume = 100 } = watch();
 
-	const newRoomNotificationId = useId();
-	const newMessageNotificationId = useId();
-	const muteFocusedConversationsId = useId();
-	const masterVolumeId = useId();
-	const notificationsSoundVolumeId = useId();
-	const voipRingerVolumeId = useId();
-
 	return (
 		<AccordionItem title={t('Sound')}>
-			<FieldGroup>
-				<Field>
-					<FieldLabel is='span' aria-describedby={`${masterVolumeId}-hint`}>
-						{t('Master_volume')}
-					</FieldLabel>
-					<FieldHint id={`${masterVolumeId}-hint`} mbe={4}>
-						{t('Master_volume_hint')}
-					</FieldHint>
-					<FieldRow>
-						<Controller
-							name='masterVolume'
-							control={control}
-							render={({ field: { onChange, value } }) => (
-								<Slider
-									aria-label={t('Master_volume')}
-									aria-describedby={`${masterVolumeId}-hint`}
-									value={value}
-									minValue={0}
-									maxValue={100}
-									onChange={onChange}
-								/>
-							)}
-						/>
-					</FieldRow>
-				</Field>
-				<Field>
-					<FieldLabel is='span' id={notificationsSoundVolumeId}>
-						{t('Notification_volume')}
-					</FieldLabel>
-					<FieldHint id={`${notificationsSoundVolumeId}-hint`} mbe={4}>
-						{t('Notification_volume_hint')}
-					</FieldHint>
-					<FieldRow>
-						<Controller
-							name='notificationsSoundVolume'
-							control={control}
-							render={({ field: { onChange, value } }) => (
-								<Slider
-									aria-label={t('Notification_volume')}
-									aria-describedby={`${notificationsSoundVolumeId}-hint`}
-									value={value}
-									minValue={0}
-									maxValue={100}
-									onChange={(value: number) => {
-										const soundVolume = (notificationsSoundVolume * masterVolume) / 100;
-										customSound.play(newMessageNotification, { volume: soundVolume / 100 });
-										onChange(value);
-									}}
-								/>
-							)}
-						/>
-					</FieldRow>
-				</Field>
-				<Field>
-					<FieldLabel is='span' aria-describedby={`${voipRingerVolumeId}-hint`}>
-						{t('Call_ringer_volume')}
-					</FieldLabel>
-					<FieldHint id={`${voipRingerVolumeId}-hint`} mbe={4}>
-						{t('Call_ringer_volume_hint')}
-					</FieldHint>
-					<FieldRow>
-						<Controller
-							name='voipRingerVolume'
-							control={control}
-							render={({ field: { onChange, value } }) => (
-								<Slider
-									aria-label={t('Call_ringer_volume')}
-									aria-describedby={`${voipRingerVolumeId}-hint`}
-									value={value}
-									minValue={0}
-									maxValue={100}
-									onChange={(value: number) => {
-										const soundVolume = (voipRingerVolume * masterVolume) / 100;
-										customSound.play('telephone', { volume: soundVolume / 100 });
-										onChange(value);
-									}}
-								/>
-							)}
-						/>
-					</FieldRow>
-				</Field>
-				<Field>
-					<FieldLabel is='span' id={newRoomNotificationId}>
-						{t('New_Room_Notification')}
-					</FieldLabel>
-					<FieldRow>
-						<Controller
-							name='newRoomNotification'
-							control={control}
-							render={({ field: { value, onChange } }) => (
-								<Select
-									aria-labelledby={newRoomNotificationId}
-									value={value}
-									options={soundsList}
-									onChange={(value) => {
-										onChange(value);
-										customSound.play(String(value), { volume: notificationsSoundVolume / 100 });
-									}}
-								/>
-							)}
-						/>
-					</FieldRow>
-				</Field>
-				<Field>
-					<FieldLabel is='span' id={newMessageNotificationId}>
-						{t('New_Message_Notification')}
-					</FieldLabel>
-					<FieldRow>
-						<Controller
-							name='newMessageNotification'
-							control={control}
-							render={({ field: { value, onChange } }) => (
-								<Select
-									aria-labelledby={newMessageNotificationId}
-									value={value}
-									options={soundsList}
-									onChange={(value) => {
-										onChange(value);
-										customSound.play(String(value), { volume: notificationsSoundVolume / 100 });
-									}}
-								/>
-							)}
-						/>
-					</FieldRow>
-				</Field>
-				<Field>
-					<FieldRow>
-						<FieldLabel htmlFor={muteFocusedConversationsId}>{t('Mute_Focused_Conversations')}</FieldLabel>
-						<Controller
-							name='muteFocusedConversations'
-							control={control}
-							render={({ field: { ref, value, onChange } }) => (
-								<ToggleSwitch id={muteFocusedConversationsId} ref={ref} checked={value} onChange={onChange} />
-							)}
-						/>
-					</FieldRow>
-				</Field>
-			</FieldGroup>
+			<Field>
+				<FieldLabel required>{t('Master_volume')}</FieldLabel>
+				<FieldHint mbe={4}>{t('Master_volume_hint')}</FieldHint>
+				<FieldRow>
+					<Controller
+						name='masterVolume'
+						control={control}
+						render={({ field: { onChange, value } }) => <Slider value={value} minValue={0} maxValue={100} onChange={onChange} />}
+					/>
+				</FieldRow>
+			</Field>
+			<Field>
+				<FieldLabel required>{t('Notification_volume')}</FieldLabel>
+				<FieldHint mbe={4}>{t('Notification_volume_hint')}</FieldHint>
+				<FieldRow>
+					<Controller
+						name='notificationsSoundVolume'
+						control={control}
+						render={({ field: { onChange, value } }) => (
+							<Slider
+								value={value}
+								minValue={0}
+								maxValue={100}
+								onChange={(value: number) => {
+									const soundVolume = (notificationsSoundVolume * masterVolume) / 100;
+									customSound.play(newMessageNotification, { volume: soundVolume / 100 });
+									onChange(value);
+								}}
+							/>
+						)}
+					/>
+				</FieldRow>
+			</Field>
+			<Field>
+				<FieldLabel required>{t('Call_ringer_volume')}</FieldLabel>
+				<FieldHint mbe={4}>{t('Call_ringer_volume_hint')}</FieldHint>
+				<FieldRow>
+					<Controller
+						name='voipRingerVolume'
+						control={control}
+						render={({ field: { onChange, value } }) => (
+							<Slider
+								value={value}
+								minValue={0}
+								maxValue={100}
+								onChange={(value: number) => {
+									const soundVolume = (voipRingerVolume * masterVolume) / 100;
+									customSound.play('telephone', { volume: soundVolume / 100 });
+									onChange(value);
+								}}
+							/>
+						)}
+					/>
+				</FieldRow>
+			</Field>
+			<Field>
+				<FieldLabel required>{t('New_Room_Notification')}</FieldLabel>
+				<FieldRow>
+					<Controller
+						name='newRoomNotification'
+						control={control}
+						render={({ field: { value, onChange } }) => (
+							<Select
+								value={value}
+								options={soundsList}
+								onChange={(value) => {
+									onChange(value);
+									customSound.play(String(value), { volume: notificationsSoundVolume / 100 });
+								}}
+							/>
+						)}
+					/>
+				</FieldRow>
+			</Field>
+			<Field>
+				<FieldLabel required>{t('New_Message_Notification')}</FieldLabel>
+				<FieldRow>
+					<Controller
+						name='newMessageNotification'
+						control={control}
+						render={({ field: { value, onChange } }) => (
+							<Select
+								value={value}
+								options={soundsList}
+								onChange={(value) => {
+									onChange(value);
+									customSound.play(String(value), { volume: notificationsSoundVolume / 100 });
+								}}
+							/>
+						)}
+					/>
+				</FieldRow>
+			</Field>
+			<Field>
+				<FieldRow>
+					<FieldLabel required>{t('Mute_Focused_Conversations')}</FieldLabel>
+					<Controller
+						name='muteFocusedConversations'
+						control={control}
+						render={({ field: { ref, value, onChange } }) => <ToggleSwitch ref={ref} checked={value} onChange={onChange} />}
+					/>
+				</FieldRow>
+			</Field>
 		</AccordionItem>
 	);
 };
diff --git a/apps/meteor/client/views/account/preferences/PreferencesUserPresenceSection.tsx b/apps/meteor/client/views/account/preferences/PreferencesUserPresenceSection.tsx
index 076b79e23592b..82d5d5510ccdc 100644
--- a/apps/meteor/client/views/account/preferences/PreferencesUserPresenceSection.tsx
+++ b/apps/meteor/client/views/account/preferences/PreferencesUserPresenceSection.tsx
@@ -1,4 +1,5 @@
-import { AccordionItem, Field, FieldGroup, FieldLabel, FieldRow, NumberInput, ToggleSwitch } from '@rocket.chat/fuselage';
+import { Field, FieldLabel, FieldRow, ToggleSwitch } from '@rocket.chat/fuselage-forms';
+import { AccordionItem, NumberInput } from '@rocket.chat/fuselage';
 import { useId } from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
@@ -7,33 +8,26 @@ const PreferencesUserPresenceSection = () => {
 	const { t } = useTranslation();
 	const { register, control } = useFormContext();
 
-	const enableAutoAwayId = useId();
 	const idleTimeLimit = useId();
 
 	return (
 		<AccordionItem title={t('User_Presence')}>
-			<FieldGroup>
-				<Field>
-					<FieldRow>
-						<FieldLabel is='span' id={enableAutoAwayId}>
-							{t('Enable_Auto_Away')}
-						</FieldLabel>
-						<Controller
-							name='enableAutoAway'
-							control={control}
-							render={({ field: { ref, value, onChange } }) => (
-								<ToggleSwitch ref={ref} aria-labelledby={enableAutoAwayId} checked={value} onChange={onChange} />
-							)}
-						/>
-					</FieldRow>
-				</Field>
-				<Field>
-					<FieldLabel htmlFor={idleTimeLimit}>{t('Idle_Time_Limit')}</FieldLabel>
-					<FieldRow>
-						<NumberInput id={idleTimeLimit} {...register('idleTimeLimit')} />
-					</FieldRow>
-				</Field>
-			</FieldGroup>
+			<Field>
+				<FieldRow>
+					<FieldLabel required>{t('Enable_Auto_Away')}</FieldLabel>
+					<Controller
+						name='enableAutoAway'
+						control={control}
+						render={({ field: { ref, value, onChange } }) => <ToggleSwitch ref={ref} checked={value} onChange={onChange} />}
+					/>
+				</FieldRow>
+			</Field>
+			<Field>
+				<FieldLabel required>{t('Idle_Time_Limit')}</FieldLabel>
+				<FieldRow>
+					<NumberInput id={idleTimeLimit} {...register('idleTimeLimit')} />
+				</FieldRow>
+			</Field>
 		</AccordionItem>
 	);
 };
diff --git a/apps/meteor/client/views/account/profile/AccountProfileForm.tsx b/apps/meteor/client/views/account/profile/AccountProfileForm.tsx
index 74eef8f84754b..3876d74722d13 100644
--- a/apps/meteor/client/views/account/profile/AccountProfileForm.tsx
+++ b/apps/meteor/client/views/account/profile/AccountProfileForm.tsx
@@ -1,18 +1,7 @@
 import type { IUser } from '@rocket.chat/core-typings';
 import { css } from '@rocket.chat/css-in-js';
-import {
-	Field,
-	FieldGroup,
-	FieldLabel,
-	FieldRow,
-	FieldError,
-	FieldHint,
-	TextInput,
-	TextAreaInput,
-	Box,
-	Icon,
-	Button,
-} from '@rocket.chat/fuselage';
+import { Box, Button, Icon } from '@rocket.chat/fuselage';
+import { Field, FieldGroup, FieldLabel, FieldRow, FieldError, FieldHint, TextInput, TextAreaInput } from '@rocket.chat/fuselage-forms';
 import { validateEmail } from '@rocket.chat/tools';
 import { CustomFieldsForm } from '@rocket.chat/ui-client';
 import {
@@ -25,7 +14,7 @@ import {
 } from '@rocket.chat/ui-contexts';
 import { useMutation } from '@tanstack/react-query';
 import type { AllHTMLAttributes, ReactElement } from 'react';
-import { useId, useCallback } from 'react';
+import { useCallback } from 'react';
 import { VisuallyHidden } from 'react-aria';
 import { Controller, useFormContext } from 'react-hook-form';
 
@@ -87,22 +76,14 @@ const AccountProfileForm = (props: AllHTMLAttributes<HTMLFormElement>): ReactEle
 	}, [email, previousEmail, mutateConfirmationEmail]);
 
 	const validateUsername = async (username: string): Promise<string | undefined> => {
-		if (!username) {
-			return;
-		}
+		if (!username) return;
 
-		if (username === previousUsername) {
-			return;
-		}
+		if (username === previousUsername) return;
 
-		if (!namesRegex.test(username)) {
-			return t('error-invalid-username');
-		}
+		if (!namesRegex.test(username)) return t('error-invalid-username');
 
 		const { result: isAvailable } = await checkUsernameAvailability({ username });
-		if (!isAvailable) {
-			return t('Username_already_exist');
-		}
+		if (!isAvailable) return t('Username_already_exist');
 	};
 
 	const updateOwnBasicInfo = useEndpoint('POST', '/v1/users.updateOwnBasicInfo');
@@ -133,13 +114,6 @@ const AccountProfileForm = (props: AllHTMLAttributes<HTMLFormElement>): ReactEle
 		}
 	};
 
-	const nameId = useId();
-	const usernameId = useId();
-	const nicknameId = useId();
-	const statusTextId = useId();
-	const bioId = useId();
-	const emailId = useId();
-
 	return (
 		<Box {...props} is='form' autoComplete='off' onSubmit={handleSubmit(handleSave)}>
 			<FieldGroup>
@@ -162,84 +136,57 @@ const AccountProfileForm = (props: AllHTMLAttributes<HTMLFormElement>): ReactEle
 						)}
 					/>
 				</Field>
+
 				<Box
 					display='flex'
 					flexDirection={isMobile ? 'column' : 'row'}
 					alignItems='stretch'
 					justifyContent='space-between'
-					className={[
-						css`
-							gap: 16px;
-						`,
-					]}
+					className={css`
+						gap: 16px;
+					`}
 				>
 					<Field flexShrink={1}>
-						<FieldLabel required htmlFor={nameId}>
-							{t('Name')}
-						</FieldLabel>
+						<FieldLabel required>{t('Name')}</FieldLabel>
 						<FieldRow>
 							<Controller
 								control={control}
 								name='name'
-								rules={{
-									required: requireName && t('Required_field', { field: t('Name') }),
-								}}
-								render={({ field }) => (
-									<TextInput
-										{...field}
-										id={nameId}
-										error={errors.name?.message}
-										disabled={!allowRealNameChange}
-										aria-required='true'
-										aria-invalid={errors.username ? 'true' : 'false'}
-										aria-describedby={`${nameId}-error ${nameId}-hint`}
-									/>
-								)}
+								rules={{ required: requireName && t('Required_field', { field: t('Name') }) }}
+								render={({ field }) => <TextInput {...field} disabled={!allowRealNameChange} error={errors.name?.message} />}
 							/>
 						</FieldRow>
-						{errors.name && (
-							<FieldError aria-live='assertive' id={`${nameId}-error`}>
-								{errors.name.message}
-							</FieldError>
-						)}
-						{!allowRealNameChange && <FieldHint id={`${nameId}-hint`}>{t('RealName_Change_Disabled')}</FieldHint>}
+						{errors.name && <FieldError>{errors.name.message}</FieldError>}
+						{!allowRealNameChange && <FieldHint>{t('RealName_Change_Disabled')}</FieldHint>}
 					</Field>
+
 					<Field flexShrink={1}>
-						<FieldLabel required htmlFor={usernameId}>
-							{t('Username')}
-						</FieldLabel>
+						<FieldLabel required>{t('Username')}</FieldLabel>
 						<FieldRow>
 							<Controller
 								control={control}
 								name='username'
 								rules={{
 									required: t('Required_field', { field: t('Username') }),
-									validate: (username) => validateUsername(username),
+									validate: validateUsername,
 								}}
 								render={({ field }) => (
 									<TextInput
 										{...field}
-										id={usernameId}
 										disabled={!canChangeUsername}
-										error={errors.username?.message}
 										addon={<Icon name='at' size='x20' />}
-										aria-required='true'
-										aria-invalid={errors.username ? 'true' : 'false'}
-										aria-describedby={`${usernameId}-error ${usernameId}-hint`}
+										error={errors.username?.message}
 									/>
 								)}
 							/>
 						</FieldRow>
-						{errors?.username && (
-							<FieldError aria-live='assertive' id={`${usernameId}-error`}>
-								{errors.username.message}
-							</FieldError>
-						)}
-						{!canChangeUsername && <FieldHint id={`${usernameId}-hint`}>{t('Username_Change_Disabled')}</FieldHint>}
+						{errors.username && <FieldError>{errors.username.message}</FieldError>}
+						{!canChangeUsername && <FieldHint>{t('Username_Change_Disabled')}</FieldHint>}
 					</Field>
 				</Box>
+
 				<Field>
-					<FieldLabel htmlFor={statusTextId}>{t('StatusMessage')}</FieldLabel>
+					<FieldLabel>{t('StatusMessage')}</FieldLabel>
 					<FieldRow>
 						<Controller
 							control={control}
@@ -253,13 +200,10 @@ const AccountProfileForm = (props: AllHTMLAttributes<HTMLFormElement>): ReactEle
 							render={({ field }) => (
 								<TextInput
 									{...field}
-									id={statusTextId}
-									error={errors?.statusText?.message}
+									placeholder={t('StatusMessage_Placeholder')}
 									disabled={!allowUserStatusMessageChange}
 									flexGrow={1}
-									placeholder={t('StatusMessage_Placeholder')}
-									aria-invalid={errors.statusText ? 'true' : 'false'}
-									aria-describedby={`${statusTextId}-error ${statusTextId}-hint`}
+									error={errors.statusText?.message}
 									addon={
 										<Controller
 											control={control}
@@ -273,56 +217,46 @@ const AccountProfileForm = (props: AllHTMLAttributes<HTMLFormElement>): ReactEle
 							)}
 						/>
 					</FieldRow>
-					{errors?.statusText && (
-						<FieldError aria-live='assertive' id={`${statusTextId}-error`}>
-							{errors?.statusText.message}
-						</FieldError>
-					)}
-					{!allowUserStatusMessageChange && <FieldHint id={`${statusTextId}-hint`}>{t('StatusMessage_Change_Disabled')}</FieldHint>}
+					{errors.statusText && <FieldError>{errors.statusText.message}</FieldError>}
+					{!allowUserStatusMessageChange && <FieldHint>{t('StatusMessage_Change_Disabled')}</FieldHint>}
 				</Field>
+
 				<Field>
-					<FieldLabel htmlFor={nicknameId}>{t('Nickname')}</FieldLabel>
+					<FieldLabel>{t('Nickname')}</FieldLabel>
 					<FieldRow>
 						<Controller
 							control={control}
 							name='nickname'
-							render={({ field }) => (
-								<TextInput {...field} id={nicknameId} flexGrow={1} addon={<Icon name='edit' size='x20' alignSelf='center' />} />
-							)}
+							render={({ field }) => <TextInput {...field} flexGrow={1} addon={<Icon name='edit' size='x20' alignSelf='center' />} />}
 						/>
 					</FieldRow>
 				</Field>
+
 				<Field>
-					<FieldLabel htmlFor={bioId}>{t('Bio')}</FieldLabel>
+					<FieldLabel>{t('Bio')}</FieldLabel>
 					<FieldRow>
 						<Controller
 							control={control}
 							name='bio'
-							rules={{ maxLength: { value: BIO_TEXT_MAX_LENGTH, message: t('Max_length_is', BIO_TEXT_MAX_LENGTH) } }}
+							rules={{
+								maxLength: { value: BIO_TEXT_MAX_LENGTH, message: t('Max_length_is', BIO_TEXT_MAX_LENGTH) },
+							}}
 							render={({ field }) => (
 								<TextAreaInput
 									{...field}
-									id={bioId}
-									error={errors.bio?.message}
 									rows={3}
 									flexGrow={1}
+									error={errors.bio?.message}
 									addon={<Icon name='edit' size='x20' alignSelf='center' />}
-									aria-invalid={errors.statusText ? 'true' : 'false'}
-									aria-describedby={`${bioId}-error`}
 								/>
 							)}
 						/>
 					</FieldRow>
-					{errors?.bio && (
-						<FieldError aria-live='assertive' id={`${bioId}-error`}>
-							{errors.bio.message}
-						</FieldError>
-					)}
+					{errors.bio && <FieldError>{errors.bio.message}</FieldError>}
 				</Field>
+
 				<Field>
-					<FieldLabel required htmlFor={emailId}>
-						{t('Email')}
-					</FieldLabel>
+					<FieldLabel required>{t('Email')}</FieldLabel>
 					<FieldRow
 						display='flex'
 						flexDirection={isMobile ? 'column' : 'row'}
@@ -337,19 +271,17 @@ const AccountProfileForm = (props: AllHTMLAttributes<HTMLFormElement>): ReactEle
 							name='email'
 							rules={{
 								required: t('Required_field', { field: t('Email') }),
-								validate: { validateEmail: (email) => (validateEmail(email) ? undefined : t('error-invalid-email-address')) },
+								validate: {
+									validateEmail: (email) => (validateEmail(email) ? undefined : t('error-invalid-email-address')),
+								},
 							}}
 							render={({ field }) => (
 								<TextInput
 									{...field}
-									id={emailId}
 									flexGrow={1}
-									error={errors.email?.message}
-									addon={<Icon name={isUserVerified ? 'circle-check' : 'mail'} size='x20' />}
 									disabled={!allowEmailChange}
-									aria-required='true'
-									aria-invalid={errors.email ? 'true' : 'false'}
-									aria-describedby={`${emailId}-error ${emailId}-hint`}
+									addon={<Icon name={isUserVerified ? 'circle-check' : 'mail'} size='x20' />}
+									error={errors.email?.message}
 								/>
 							)}
 						/>
@@ -359,13 +291,10 @@ const AccountProfileForm = (props: AllHTMLAttributes<HTMLFormElement>): ReactEle
 							</Button>
 						)}
 					</FieldRow>
-					{errors.email && (
-						<FieldError aria-live='assertive' id={`${emailId}-error`}>
-							{errors?.email?.message}
-						</FieldError>
-					)}
-					{!allowEmailChange && <FieldHint id={`${emailId}-hint`}>{t('Email_Change_Disabled')}</FieldHint>}
+					{errors.email && <FieldError>{errors.email.message}</FieldError>}
+					{!allowEmailChange && <FieldHint>{t('Email_Change_Disabled')}</FieldHint>}
 				</Field>
+
 				{customFieldsMetadata && <CustomFieldsForm formName='customFields' formControl={control} metadata={customFieldsMetadata} />}
 			</FieldGroup>
 		</Box>

From dd1dfb489aa28063aa65d709ec100634cd6caee0 Mon Sep 17 00:00:00 2001
From: gabriellsh <henriques.gabriell@gmail.com>
Date: Tue, 15 Jul 2025 18:24:48 -0300
Subject: [PATCH 02/27] revert some changes

---
 .../preferences/PreferencesGlobalSection.tsx    | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/apps/meteor/client/views/account/preferences/PreferencesGlobalSection.tsx b/apps/meteor/client/views/account/preferences/PreferencesGlobalSection.tsx
index 2fdd22c0c9515..6bc5468e02007 100644
--- a/apps/meteor/client/views/account/preferences/PreferencesGlobalSection.tsx
+++ b/apps/meteor/client/views/account/preferences/PreferencesGlobalSection.tsx
@@ -1,35 +1,32 @@
 import type { SelectOption } from '@rocket.chat/fuselage';
-import { Field, FieldGroup, FieldLabel, FieldRow, Select, FieldDescription, FieldLabelInfo } from '@rocket.chat/fuselage-forms';
-import { AccordionItem } from '@rocket.chat/fuselage';
+import { AccordionItem, Field, FieldGroup, FieldLabel, FieldRow, MultiSelect } from '@rocket.chat/fuselage';
 import { useUserPreference } from '@rocket.chat/ui-contexts';
+import { useId } from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-// import { useId } from 'react';
 
 const PreferencesGlobalSection = () => {
 	const { t } = useTranslation();
 
-	// const multiSelectId = useId();
-
 	const userDontAskAgainList = useUserPreference<{ action: string; label: string }[]>('dontAskAgainList') || [];
 	const options: SelectOption[] = userDontAskAgainList.map(({ action, label }) => [action, label]);
 
 	const { control } = useFormContext();
+	const dontAskAgainListId = useId();
 
 	return (
 		<AccordionItem title={t('Global')}>
 			<FieldGroup>
-				<legend hidden>{t('Global')}</legend>
 				<Field>
-					<FieldLabel required>{t('Dont_ask_me_again_list')}</FieldLabel>
-					<FieldLabelInfo title='with extra info in a tooltip' />
-					<FieldDescription>You can use this field to enter multi-line text</FieldDescription>
+					<FieldLabel is='span' htmlFor={dontAskAgainListId}>
+						{t('Dont_ask_me_again_list')}
+					</FieldLabel>
 					<FieldRow>
 						<Controller
 							name='dontAskAgainList'
 							control={control}
 							render={({ field: { value, onChange } }) => (
-								<Select placeholder={t('Nothing_found')} value={value} onChange={onChange} options={options} />
+								<MultiSelect id={dontAskAgainListId} placeholder={t('Nothing_found')} value={value} onChange={onChange} options={options} />
 							)}
 						/>
 					</FieldRow>

From 3774675ee8b0f3eb3610ce02a0a92e556ea30413 Mon Sep 17 00:00:00 2001
From: gabriellsh <henriques.gabriell@gmail.com>
Date: Tue, 15 Jul 2025 18:25:16 -0300
Subject: [PATCH 03/27] review

---
 .../PreferencesHighlightsSection.tsx          |  19 +-
 .../PreferencesLocalizationSection.tsx        |  24 +-
 .../PreferencesMessagesSection.tsx            | 270 +++++++++---------
 .../PreferencesNotificationsSection.tsx       | 158 +++++-----
 .../preferences/PreferencesSoundSection.tsx   | 213 +++++++-------
 .../PreferencesUserPresenceSection.tsx        |  36 +--
 .../account/profile/AccountProfileForm.tsx    |   6 +-
 7 files changed, 364 insertions(+), 362 deletions(-)

diff --git a/apps/meteor/client/views/account/preferences/PreferencesHighlightsSection.tsx b/apps/meteor/client/views/account/preferences/PreferencesHighlightsSection.tsx
index 46c609596c3f9..7fae2b4e1f4e8 100644
--- a/apps/meteor/client/views/account/preferences/PreferencesHighlightsSection.tsx
+++ b/apps/meteor/client/views/account/preferences/PreferencesHighlightsSection.tsx
@@ -1,6 +1,5 @@
-import { Field, FieldLabel, FieldRow, FieldHint, TextAreaInput } from '@rocket.chat/fuselage-forms';
 import { AccordionItem } from '@rocket.chat/fuselage';
-
+import { Field, FieldGroup, FieldLabel, FieldRow, FieldHint, TextAreaInput } from '@rocket.chat/fuselage-forms';
 import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
@@ -10,13 +9,15 @@ const PreferencesHighlightsSection = () => {
 
 	return (
 		<AccordionItem title={t('Highlights')}>
-			<Field>
-				<FieldLabel required>{t('Highlights_List')}</FieldLabel>
-				<FieldRow>
-					<TextAreaInput {...register('highlights')} rows={4} />
-				</FieldRow>
-				<FieldHint>{t('Highlights_How_To')}</FieldHint>
-			</Field>
+			<FieldGroup>
+				<Field>
+					<FieldLabel>{t('Highlights_List')}</FieldLabel>
+					<FieldRow>
+						<TextAreaInput {...register('highlights')} rows={4} />
+					</FieldRow>
+					<FieldHint>{t('Highlights_How_To')}</FieldHint>
+				</Field>
+			</FieldGroup>
 		</AccordionItem>
 	);
 };
diff --git a/apps/meteor/client/views/account/preferences/PreferencesLocalizationSection.tsx b/apps/meteor/client/views/account/preferences/PreferencesLocalizationSection.tsx
index 312b1ada448ff..215969464bd31 100644
--- a/apps/meteor/client/views/account/preferences/PreferencesLocalizationSection.tsx
+++ b/apps/meteor/client/views/account/preferences/PreferencesLocalizationSection.tsx
@@ -1,6 +1,6 @@
 import type { SelectOption } from '@rocket.chat/fuselage';
-import { Field, FieldLabel, FieldRow, Select } from '@rocket.chat/fuselage-forms';
 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';
@@ -16,16 +16,18 @@ const PreferencesLocalizationSection = () => {
 
 	return (
 		<AccordionItem title={t('Localization')} defaultExpanded>
-			<Field>
-				<FieldLabel required>{t('Language')}</FieldLabel>
-				<FieldRow>
-					<Controller
-						control={control}
-						name='language'
-						render={({ field: { value, onChange } }) => <Select value={value} onChange={onChange} options={languageOptions} />}
-					/>
-				</FieldRow>
-			</Field>
+			<FieldGroup>
+				<Field>
+					<FieldLabel>{t('Language')}</FieldLabel>
+					<FieldRow>
+						<Controller
+							control={control}
+							name='language'
+							render={({ field: { value, onChange } }) => <Select value={value} onChange={onChange} options={languageOptions} />}
+						/>
+					</FieldRow>
+				</Field>
+			</FieldGroup>
 		</AccordionItem>
 	);
 };
diff --git a/apps/meteor/client/views/account/preferences/PreferencesMessagesSection.tsx b/apps/meteor/client/views/account/preferences/PreferencesMessagesSection.tsx
index 6dba760ee6189..f11d8236974c5 100644
--- a/apps/meteor/client/views/account/preferences/PreferencesMessagesSection.tsx
+++ b/apps/meteor/client/views/account/preferences/PreferencesMessagesSection.tsx
@@ -1,6 +1,6 @@
 import type { SelectOption } from '@rocket.chat/fuselage';
-import { Field, FieldHint, FieldLabel, FieldLink, FieldRow, Select, ToggleSwitch, FieldDescription } from '@rocket.chat/fuselage-forms';
 import { AccordionItem } from '@rocket.chat/fuselage';
+import { Field, FieldGroup, FieldHint, FieldLabel, FieldLink, FieldRow, Select, ToggleSwitch } from '@rocket.chat/fuselage-forms';
 import { useMemo } from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
@@ -29,145 +29,135 @@ const PreferencesMessagesSection = () => {
 
 	return (
 		<AccordionItem title={t('Messages')}>
-			<Field>
-				<FieldRow>
-					<FieldLabel required>{t('Unread_Tray_Icon_Alert')}</FieldLabel>
-					<FieldDescription>You can use this field to enter multi-line text</FieldDescription>
-					<Controller
-						name='unreadAlert'
-						control={control}
-						render={({ field: { value, onChange, ref } }) => <ToggleSwitch ref={ref} checked={value} onChange={onChange} />}
-					/>
-				</FieldRow>
-			</Field>
-			<Field>
-				<FieldRow>
-					<FieldLabel required>{t('Always_show_thread_replies_in_main_channel')}</FieldLabel>
-					<FieldDescription>You can use this field to enter multi-line text</FieldDescription>
-					<Controller
-						name='showThreadsInMainChannel'
-						control={control}
-						render={({ field: { value, onChange, ref } }) => <ToggleSwitch ref={ref} checked={value} onChange={onChange} />}
-					/>
-				</FieldRow>
-				<FieldHint>{t('Accounts_Default_User_Preferences_showThreadsInMainChannel_Description')}</FieldHint>
-			</Field>
-			<Field>
-				<FieldLabel required>{t('Also_send_thread_message_to_channel_behavior')}</FieldLabel>
-				<FieldDescription>You can use this field to enter multi-line text</FieldDescription>
-				<FieldRow>
-					<Controller
-						name='alsoSendThreadToChannel'
-						control={control}
-						render={({ field: { value, onChange } }) => (
-							<Select value={value} onChange={onChange} options={alsoSendThreadMessageToChannelOptions} />
-						)}
-					/>
-				</FieldRow>
-				<FieldHint>{t('Accounts_Default_User_Preferences_alsoSendThreadToChannel_Description')}</FieldHint>
-			</Field>
-			<Field>
-				<FieldLabel required>{t('Message_TimeFormat')}</FieldLabel>
-				<FieldLink href='/account/accessibility-and-appearance'>{t('Go_to_accessibility_and_appearance')}</FieldLink>
-			</Field>
-			<Field>
-				<FieldRow>
-					<FieldLabel required>{t('Use_Emojis')}</FieldLabel>
-					<FieldDescription>You can use this field to enter multi-line text</FieldDescription>
-					<Controller
-						name='useEmojis'
-						control={control}
-						render={({ field: { value, onChange, ref } }) => <ToggleSwitch ref={ref} checked={value} onChange={onChange} />}
-					/>
-				</FieldRow>
-			</Field>
-			<Field>
-				<FieldRow>
-					<FieldLabel required>{t('Convert_Ascii_Emojis')}</FieldLabel>
-					<Controller
-						name='convertAsciiEmoji'
-						control={control}
-						render={({ field: { value, onChange, ref } }) => <ToggleSwitch ref={ref} checked={value} onChange={onChange} />}
-					/>
-				</FieldRow>
-			</Field>
-			<Field>
-				<FieldRow>
-					<FieldLabel required>{t('Auto_Load_Images')}</FieldLabel>
-					<FieldDescription>You can use this field to enter multi-line text</FieldDescription>
-					<Controller
-						name='autoImageLoad'
-						control={control}
-						render={({ field: { value, onChange, ref } }) => <ToggleSwitch ref={ref} checked={value} onChange={onChange} />}
-					/>
-				</FieldRow>
-			</Field>
-			<Field>
-				<FieldRow>
-					<FieldLabel required>{t('Save_Mobile_Bandwidth')}</FieldLabel>
-					<FieldDescription>You can use this field to enter multi-line text</FieldDescription>
-					<Controller
-						name='saveMobileBandwidth'
-						control={control}
-						render={({ field: { value, onChange, ref } }) => <ToggleSwitch ref={ref} checked={value} onChange={onChange} />}
-					/>
-				</FieldRow>
-			</Field>
-			<Field>
-				<FieldRow>
-					<FieldLabel required>{t('Collapse_Embedded_Media_By_Default')}</FieldLabel>
-					<FieldDescription>You can use this field to enter multi-line text</FieldDescription>
-					<Controller
-						name='collapseMediaByDefault'
-						control={control}
-						render={({ field: { value, onChange, ref } }) => <ToggleSwitch ref={ref} checked={value} onChange={onChange} />}
-					/>
-				</FieldRow>
-			</Field>
-			<Field>
-				<FieldLabel required>{t('Hide_usernames')}</FieldLabel>
-				<FieldDescription>You can use this field to enter multi-line text</FieldDescription>
-				<FieldLink href='/account/accessibility-and-appearance'>{t('Go_to_accessibility_and_appearance')}</FieldLink>
-			</Field>
-			<Field>
-				<FieldLabel required>{t('Hide_roles')}</FieldLabel>
-				<FieldDescription>You can use this field to enter multi-line text</FieldDescription>
-				<FieldLink href='/account/accessibility-and-appearance'>{t('Go_to_accessibility_and_appearance')}</FieldLink>
-			</Field>
-			<Field>
-				<FieldRow>
-					<FieldLabel required>{t('Hide_flextab')}</FieldLabel>
-					<FieldDescription>You can use this field to enter multi-line text</FieldDescription>
-					<Controller
-						name='hideFlexTab'
-						control={control}
-						render={({ field: { value, onChange, ref } }) => <ToggleSwitch ref={ref} checked={value} onChange={onChange} />}
-					/>
-				</FieldRow>
-			</Field>
-			<Field>
-				<FieldRow>
-					<FieldLabel required>{t('Display_avatars')}</FieldLabel>
-					<FieldDescription>You can use this field to enter multi-line text</FieldDescription>
-					<Controller
-						name='displayAvatars'
-						control={control}
-						render={({ field: { value, onChange, ref } }) => <ToggleSwitch ref={ref} checked={value} onChange={onChange} />}
-					/>
-				</FieldRow>
-			</Field>
-			<Field>
-				<FieldLabel required>{t('Enter_Behaviour')}</FieldLabel>
-				<FieldDescription>You can use this field to enter multi-line text</FieldDescription>
-				<FieldRow>
-					<Controller
-						name='sendOnEnter'
-						control={control}
-						render={({ field: { value, onChange } }) => <Select value={value} onChange={onChange} options={sendOnEnterOptions} />}
-					/>
-				</FieldRow>
-				<FieldHint>{t('Enter_Behaviour_Description')}</FieldHint>
-			</Field>
+			<FieldGroup>
+				<Field>
+					<FieldRow>
+						<FieldLabel>{t('Unread_Tray_Icon_Alert')}</FieldLabel>
+						<Controller
+							name='unreadAlert'
+							control={control}
+							render={({ field: { value, onChange, ref } }) => <ToggleSwitch ref={ref} checked={value} onChange={onChange} />}
+						/>
+					</FieldRow>
+				</Field>
+				<Field>
+					<FieldRow>
+						<FieldLabel>{t('Always_show_thread_replies_in_main_channel')}</FieldLabel>
+						<Controller
+							name='showThreadsInMainChannel'
+							control={control}
+							render={({ field: { value, onChange, ref } }) => <ToggleSwitch ref={ref} checked={value} onChange={onChange} />}
+						/>
+					</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: { value, onChange } }) => (
+								<Select value={value} onChange={onChange} options={alsoSendThreadMessageToChannelOptions} />
+							)}
+						/>
+					</FieldRow>
+					<FieldHint>{t('Accounts_Default_User_Preferences_alsoSendThreadToChannel_Description')}</FieldHint>
+				</Field>
+				<Field>
+					<FieldLabel>{t('Message_TimeFormat')}</FieldLabel>
+					<FieldLink href='/account/accessibility-and-appearance'>{t('Go_to_accessibility_and_appearance')}</FieldLink>
+				</Field>
+				<Field>
+					<FieldRow>
+						<FieldLabel>{t('Use_Emojis')}</FieldLabel>
+						<Controller
+							name='useEmojis'
+							control={control}
+							render={({ field: { value, onChange, ref } }) => <ToggleSwitch ref={ref} checked={value} onChange={onChange} />}
+						/>
+					</FieldRow>
+				</Field>
+				<Field>
+					<FieldRow>
+						<FieldLabel>{t('Convert_Ascii_Emojis')}</FieldLabel>
+						<Controller
+							name='convertAsciiEmoji'
+							control={control}
+							render={({ field: { value, onChange, ref } }) => <ToggleSwitch ref={ref} checked={value} onChange={onChange} />}
+						/>
+					</FieldRow>
+				</Field>
+				<Field>
+					<FieldRow>
+						<FieldLabel>{t('Auto_Load_Images')}</FieldLabel>
+						<Controller
+							name='autoImageLoad'
+							control={control}
+							render={({ field: { value, onChange, ref } }) => <ToggleSwitch ref={ref} checked={value} onChange={onChange} />}
+						/>
+					</FieldRow>
+				</Field>
+				<Field>
+					<FieldRow>
+						<FieldLabel>{t('Save_Mobile_Bandwidth')}</FieldLabel>
+						<Controller
+							name='saveMobileBandwidth'
+							control={control}
+							render={({ field: { value, onChange, ref } }) => <ToggleSwitch ref={ref} checked={value} onChange={onChange} />}
+						/>
+					</FieldRow>
+				</Field>
+				<Field>
+					<FieldRow>
+						<FieldLabel>{t('Collapse_Embedded_Media_By_Default')}</FieldLabel>
+						<Controller
+							name='collapseMediaByDefault'
+							control={control}
+							render={({ field: { value, onChange, ref } }) => <ToggleSwitch ref={ref} checked={value} onChange={onChange} />}
+						/>
+					</FieldRow>
+				</Field>
+				<Field>
+					<FieldLabel>{t('Hide_usernames')}</FieldLabel>
+					<FieldLink href='/account/accessibility-and-appearance'>{t('Go_to_accessibility_and_appearance')}</FieldLink>
+				</Field>
+				<Field>
+					<FieldLabel>{t('Hide_roles')}</FieldLabel>
+					<FieldLink href='/account/accessibility-and-appearance'>{t('Go_to_accessibility_and_appearance')}</FieldLink>
+				</Field>
+				<Field>
+					<FieldRow>
+						<FieldLabel>{t('Hide_flextab')}</FieldLabel>
+						<Controller
+							name='hideFlexTab'
+							control={control}
+							render={({ field: { value, onChange, ref } }) => <ToggleSwitch ref={ref} checked={value} onChange={onChange} />}
+						/>
+					</FieldRow>
+				</Field>
+				<Field>
+					<FieldRow>
+						<FieldLabel>{t('Display_avatars')}</FieldLabel>
+						<Controller
+							name='displayAvatars'
+							control={control}
+							render={({ field: { value, onChange, ref } }) => <ToggleSwitch ref={ref} checked={value} onChange={onChange} />}
+						/>
+					</FieldRow>
+				</Field>
+				<Field>
+					<FieldLabel>{t('Enter_Behaviour')}</FieldLabel>
+					<FieldRow>
+						<Controller
+							name='sendOnEnter'
+							control={control}
+							render={({ field: { value, onChange } }) => <Select value={value} onChange={onChange} options={sendOnEnterOptions} />}
+						/>
+					</FieldRow>
+					<FieldHint>{t('Enter_Behaviour_Description')}</FieldHint>
+				</Field>
+			</FieldGroup>
 		</AccordionItem>
 	);
 };
diff --git a/apps/meteor/client/views/account/preferences/PreferencesNotificationsSection.tsx b/apps/meteor/client/views/account/preferences/PreferencesNotificationsSection.tsx
index d9c84d961de69..5c69aaecd2c62 100644
--- a/apps/meteor/client/views/account/preferences/PreferencesNotificationsSection.tsx
+++ b/apps/meteor/client/views/account/preferences/PreferencesNotificationsSection.tsx
@@ -1,7 +1,7 @@
 import type { INotificationDesktop } from '@rocket.chat/core-typings';
 import type { SelectOption } from '@rocket.chat/fuselage';
 import { AccordionItem, Button } from '@rocket.chat/fuselage';
-import { Field, FieldHint, FieldLabel, FieldRow, Select, ToggleSwitch } from '@rocket.chat/fuselage-forms';
+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';
@@ -93,106 +93,108 @@ const PreferencesNotificationsSection = () => {
 
 	return (
 		<AccordionItem title={t('Notifications')}>
-			<Field>
-				<FieldLabel required>{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 required>{t('Notification_RequireInteraction')}</FieldLabel>
-					<Controller
-						name='desktopNotificationRequireInteraction'
-						control={control}
-						render={({ field: { ref, value, onChange } }) => <ToggleSwitch ref={ref} checked={value} onChange={onChange} />}
-					/>
-				</FieldRow>
-				<FieldHint>{t('Only_works_with_chrome_version_greater_50')}</FieldHint>
-			</Field>
-			<Field>
-				<FieldLabel required>{t('Notification_Desktop_Default_For')}</FieldLabel>
-				<FieldRow>
-					<Controller
-						name='desktopNotifications'
-						control={control}
-						render={({ field: { value, onChange } }) => <Select value={value} onChange={onChange} options={desktopNotificationOptions} />}
-					/>
-				</FieldRow>
-			</Field>
-			<Field>
-				<FieldLabel required>{t('Notification_Push_Default_For')}</FieldLabel>
-				<FieldRow>
-					<Controller
-						name='pushNotifications'
-						control={control}
-						render={({ field: { value, onChange } }) => <Select value={value} onChange={onChange} options={mobileNotificationOptions} />}
-					/>
-				</FieldRow>
-			</Field>
-			<Field>
-				<FieldLabel required>{t('Email_Notification_Mode')}</FieldLabel>
-				<FieldRow>
-					<Controller
-						name='emailNotificationMode'
-						control={control}
-						render={({ field: { value, onChange } }) => (
-							<Select disabled={!canChangeEmailNotification} value={value} onChange={onChange} options={emailNotificationOptions} />
+			<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>
 						)}
-					/>
-				</FieldRow>
-				<FieldHint>
-					{canChangeEmailNotification && t('You_need_to_verifiy_your_email_address_to_get_notications')}
-					{!canChangeEmailNotification && t('Email_Notifications_Change_Disabled')}
-				</FieldHint>
-			</Field>
-			{showNewLoginEmailPreference && (
+						{notificationsPermission !== 'denied' && notificationsPermission !== 'granted' && (
+							<Button primary onClick={onAskNotificationPermission} aria-labelledby={desktopNotificationsLabelId}>
+								{t('Enable_Desktop_Notifications')}
+							</Button>
+						)}
+					</FieldRow>
+				</Field>
 				<Field>
 					<FieldRow>
-						<FieldLabel required>{t('Receive_Login_Detection_Emails')}</FieldLabel>
+						<FieldLabel>{t('Notification_RequireInteraction')}</FieldLabel>
 						<Controller
-							name='receiveLoginDetectionEmail'
+							name='desktopNotificationRequireInteraction'
 							control={control}
 							render={({ field: { ref, value, onChange } }) => <ToggleSwitch ref={ref} checked={value} onChange={onChange} />}
 						/>
 					</FieldRow>
-					<FieldHint>{t('Receive_Login_Detection_Emails_Description')}</FieldHint>
+					<FieldHint>{t('Only_works_with_chrome_version_greater_50')}</FieldHint>
 				</Field>
-			)}
-			{showCalendarPreference && (
 				<Field>
+					<FieldLabel>{t('Notification_Desktop_Default_For')}</FieldLabel>
 					<FieldRow>
-						<FieldLabel required>{t('Notify_Calendar_Events')}</FieldLabel>
 						<Controller
-							name='notifyCalendarEvents'
+							name='desktopNotifications'
 							control={control}
-							render={({ field: { ref, value, onChange } }) => <ToggleSwitch ref={ref} checked={value} onChange={onChange} />}
+							render={({ field: { value, onChange } }) => <Select value={value} onChange={onChange} options={desktopNotificationOptions} />}
 						/>
 					</FieldRow>
 				</Field>
-			)}
-			{showMobileRinging && (
 				<Field>
+					<FieldLabel>{t('Notification_Push_Default_For')}</FieldLabel>
 					<FieldRow>
-						<FieldLabel required>{t('VideoConf_Mobile_Ringing')}</FieldLabel>
 						<Controller
-							name='enableMobileRinging'
+							name='pushNotifications'
 							control={control}
-							render={({ field: { ref, value, onChange } }) => <ToggleSwitch ref={ref} checked={value} onChange={onChange} />}
+							render={({ field: { value, onChange } }) => <Select value={value} onChange={onChange} options={mobileNotificationOptions} />}
+						/>
+					</FieldRow>
+				</Field>
+				<Field>
+					<FieldLabel>{t('Email_Notification_Mode')}</FieldLabel>
+					<FieldRow>
+						<Controller
+							name='emailNotificationMode'
+							control={control}
+							render={({ field: { value, onChange } }) => (
+								<Select disabled={!canChangeEmailNotification} value={value} onChange={onChange} 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: { ref, value, onChange } }) => <ToggleSwitch ref={ref} checked={value} onChange={onChange} />}
+							/>
+						</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: { ref, value, onChange } }) => <ToggleSwitch ref={ref} checked={value} onChange={onChange} />}
+							/>
+						</FieldRow>
+					</Field>
+				)}
+				{showMobileRinging && (
+					<Field>
+						<FieldRow>
+							<FieldLabel>{t('VideoConf_Mobile_Ringing')}</FieldLabel>
+							<Controller
+								name='enableMobileRinging'
+								control={control}
+								render={({ field: { ref, value, onChange } }) => <ToggleSwitch ref={ref} checked={value} onChange={onChange} />}
+							/>
+						</FieldRow>
+					</Field>
+				)}
+			</FieldGroup>
 		</AccordionItem>
 	);
 };
diff --git a/apps/meteor/client/views/account/preferences/PreferencesSoundSection.tsx b/apps/meteor/client/views/account/preferences/PreferencesSoundSection.tsx
index 0c99b65ae1c69..6170cf896f46b 100644
--- a/apps/meteor/client/views/account/preferences/PreferencesSoundSection.tsx
+++ b/apps/meteor/client/views/account/preferences/PreferencesSoundSection.tsx
@@ -1,8 +1,7 @@
 import type { SelectOption } from '@rocket.chat/fuselage';
-import { Field, FieldHint, FieldLabel, FieldRow, Select, ToggleSwitch } from '@rocket.chat/fuselage-forms';
 import { AccordionItem, Slider } from '@rocket.chat/fuselage';
-import type { TranslationKey } from '@rocket.chat/ui-contexts';
-import { useCustomSound, useTranslation } from '@rocket.chat/ui-contexts';
+import { Field, FieldGroup, FieldHint, FieldLabel, FieldRow, Select, ToggleSwitch } from '@rocket.chat/fuselage-forms';
+import { type TranslationKey, useCustomSound, useTranslation } from '@rocket.chat/ui-contexts';
 import { Controller, useFormContext } from 'react-hook-form';
 
 const PreferencesSoundSection = () => {
@@ -15,109 +14,111 @@ const PreferencesSoundSection = () => {
 
 	return (
 		<AccordionItem title={t('Sound')}>
-			<Field>
-				<FieldLabel required>{t('Master_volume')}</FieldLabel>
-				<FieldHint mbe={4}>{t('Master_volume_hint')}</FieldHint>
-				<FieldRow>
-					<Controller
-						name='masterVolume'
-						control={control}
-						render={({ field: { onChange, value } }) => <Slider value={value} minValue={0} maxValue={100} onChange={onChange} />}
-					/>
-				</FieldRow>
-			</Field>
-			<Field>
-				<FieldLabel required>{t('Notification_volume')}</FieldLabel>
-				<FieldHint mbe={4}>{t('Notification_volume_hint')}</FieldHint>
-				<FieldRow>
-					<Controller
-						name='notificationsSoundVolume'
-						control={control}
-						render={({ field: { onChange, value } }) => (
-							<Slider
-								value={value}
-								minValue={0}
-								maxValue={100}
-								onChange={(value: number) => {
-									const soundVolume = (notificationsSoundVolume * masterVolume) / 100;
-									customSound.play(newMessageNotification, { volume: soundVolume / 100 });
-									onChange(value);
-								}}
-							/>
-						)}
-					/>
-				</FieldRow>
-			</Field>
-			<Field>
-				<FieldLabel required>{t('Call_ringer_volume')}</FieldLabel>
-				<FieldHint mbe={4}>{t('Call_ringer_volume_hint')}</FieldHint>
-				<FieldRow>
-					<Controller
-						name='voipRingerVolume'
-						control={control}
-						render={({ field: { onChange, value } }) => (
-							<Slider
-								value={value}
-								minValue={0}
-								maxValue={100}
-								onChange={(value: number) => {
-									const soundVolume = (voipRingerVolume * masterVolume) / 100;
-									customSound.play('telephone', { volume: soundVolume / 100 });
-									onChange(value);
-								}}
-							/>
-						)}
-					/>
-				</FieldRow>
-			</Field>
-			<Field>
-				<FieldLabel required>{t('New_Room_Notification')}</FieldLabel>
-				<FieldRow>
-					<Controller
-						name='newRoomNotification'
-						control={control}
-						render={({ field: { value, onChange } }) => (
-							<Select
-								value={value}
-								options={soundsList}
-								onChange={(value) => {
-									onChange(value);
-									customSound.play(String(value), { volume: notificationsSoundVolume / 100 });
-								}}
-							/>
-						)}
-					/>
-				</FieldRow>
-			</Field>
-			<Field>
-				<FieldLabel required>{t('New_Message_Notification')}</FieldLabel>
-				<FieldRow>
-					<Controller
-						name='newMessageNotification'
-						control={control}
-						render={({ field: { value, onChange } }) => (
-							<Select
-								value={value}
-								options={soundsList}
-								onChange={(value) => {
-									onChange(value);
-									customSound.play(String(value), { volume: notificationsSoundVolume / 100 });
-								}}
-							/>
-						)}
-					/>
-				</FieldRow>
-			</Field>
-			<Field>
-				<FieldRow>
-					<FieldLabel required>{t('Mute_Focused_Conversations')}</FieldLabel>
-					<Controller
-						name='muteFocusedConversations'
-						control={control}
-						render={({ field: { ref, value, onChange } }) => <ToggleSwitch ref={ref} checked={value} onChange={onChange} />}
-					/>
-				</FieldRow>
-			</Field>
+			<FieldGroup>
+				<Field>
+					<FieldLabel>{t('Master_volume')}</FieldLabel>
+					<FieldHint mbe={4}>{t('Master_volume_hint')}</FieldHint>
+					<FieldRow>
+						<Controller
+							name='masterVolume'
+							control={control}
+							render={({ field: { onChange, value } }) => <Slider value={value} minValue={0} maxValue={100} onChange={onChange} />}
+						/>
+					</FieldRow>
+				</Field>
+				<Field>
+					<FieldLabel>{t('Notification_volume')}</FieldLabel>
+					<FieldHint mbe={4}>{t('Notification_volume_hint')}</FieldHint>
+					<FieldRow>
+						<Controller
+							name='notificationsSoundVolume'
+							control={control}
+							render={({ field: { onChange, value } }) => (
+								<Slider
+									value={value}
+									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 mbe={4}>{t('Call_ringer_volume_hint')}</FieldHint>
+					<FieldRow>
+						<Controller
+							name='voipRingerVolume'
+							control={control}
+							render={({ field: { onChange, value } }) => (
+								<Slider
+									value={value}
+									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: { value, onChange } }) => (
+								<Select
+									value={value}
+									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: { value, onChange } }) => (
+								<Select
+									value={value}
+									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: { ref, value, onChange } }) => <ToggleSwitch ref={ref} checked={value} onChange={onChange} />}
+						/>
+					</FieldRow>
+				</Field>
+			</FieldGroup>
 		</AccordionItem>
 	);
 };
diff --git a/apps/meteor/client/views/account/preferences/PreferencesUserPresenceSection.tsx b/apps/meteor/client/views/account/preferences/PreferencesUserPresenceSection.tsx
index 82d5d5510ccdc..01ea46a3e92bc 100644
--- a/apps/meteor/client/views/account/preferences/PreferencesUserPresenceSection.tsx
+++ b/apps/meteor/client/views/account/preferences/PreferencesUserPresenceSection.tsx
@@ -1,5 +1,5 @@
-import { Field, FieldLabel, FieldRow, ToggleSwitch } from '@rocket.chat/fuselage-forms';
 import { AccordionItem, NumberInput } from '@rocket.chat/fuselage';
+import { Field, FieldGroup, FieldLabel, FieldRow, ToggleSwitch } from '@rocket.chat/fuselage-forms';
 import { useId } from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
@@ -12,22 +12,24 @@ const PreferencesUserPresenceSection = () => {
 
 	return (
 		<AccordionItem title={t('User_Presence')}>
-			<Field>
-				<FieldRow>
-					<FieldLabel required>{t('Enable_Auto_Away')}</FieldLabel>
-					<Controller
-						name='enableAutoAway'
-						control={control}
-						render={({ field: { ref, value, onChange } }) => <ToggleSwitch ref={ref} checked={value} onChange={onChange} />}
-					/>
-				</FieldRow>
-			</Field>
-			<Field>
-				<FieldLabel required>{t('Idle_Time_Limit')}</FieldLabel>
-				<FieldRow>
-					<NumberInput id={idleTimeLimit} {...register('idleTimeLimit')} />
-				</FieldRow>
-			</Field>
+			<FieldGroup>
+				<Field>
+					<FieldRow>
+						<FieldLabel>{t('Enable_Auto_Away')}</FieldLabel>
+						<Controller
+							name='enableAutoAway'
+							control={control}
+							render={({ field: { ref, value, onChange } }) => <ToggleSwitch ref={ref} checked={value} onChange={onChange} />}
+						/>
+					</FieldRow>
+				</Field>
+				<Field>
+					<FieldLabel>{t('Idle_Time_Limit')}</FieldLabel>
+					<FieldRow>
+						<NumberInput id={idleTimeLimit} {...register('idleTimeLimit')} />
+					</FieldRow>
+				</Field>
+			</FieldGroup>
 		</AccordionItem>
 	);
 };
diff --git a/apps/meteor/client/views/account/profile/AccountProfileForm.tsx b/apps/meteor/client/views/account/profile/AccountProfileForm.tsx
index 3876d74722d13..ec108093d00dc 100644
--- a/apps/meteor/client/views/account/profile/AccountProfileForm.tsx
+++ b/apps/meteor/client/views/account/profile/AccountProfileForm.tsx
@@ -153,7 +153,9 @@ const AccountProfileForm = (props: AllHTMLAttributes<HTMLFormElement>): ReactEle
 								control={control}
 								name='name'
 								rules={{ required: requireName && t('Required_field', { field: t('Name') }) }}
-								render={({ field }) => <TextInput {...field} disabled={!allowRealNameChange} error={errors.name?.message} />}
+								render={({ field }) => (
+									<TextInput {...field} disabled={!allowRealNameChange} error={errors.name?.message} aria-required={true} />
+								)}
 							/>
 						</FieldRow>
 						{errors.name && <FieldError>{errors.name.message}</FieldError>}
@@ -173,6 +175,7 @@ const AccountProfileForm = (props: AllHTMLAttributes<HTMLFormElement>): ReactEle
 								render={({ field }) => (
 									<TextInput
 										{...field}
+										aria-required={true}
 										disabled={!canChangeUsername}
 										addon={<Icon name='at' size='x20' />}
 										error={errors.username?.message}
@@ -278,6 +281,7 @@ const AccountProfileForm = (props: AllHTMLAttributes<HTMLFormElement>): ReactEle
 							render={({ field }) => (
 								<TextInput
 									{...field}
+									aria-required={true}
 									flexGrow={1}
 									disabled={!allowEmailChange}
 									addon={<Icon name={isUserVerified ? 'circle-check' : 'mail'} size='x20' />}

From 73325f2815dc4c45b06dfcd8eb70f8b73ba8fd45 Mon Sep 17 00:00:00 2001
From: gabriellsh <henriques.gabriell@gmail.com>
Date: Wed, 30 Jul 2025 13:13:37 -0300
Subject: [PATCH 04/27] remove id

---
 .../account/preferences/PreferencesUserPresenceSection.tsx   | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/apps/meteor/client/views/account/preferences/PreferencesUserPresenceSection.tsx b/apps/meteor/client/views/account/preferences/PreferencesUserPresenceSection.tsx
index 01ea46a3e92bc..6b7ea39b0b5c0 100644
--- a/apps/meteor/client/views/account/preferences/PreferencesUserPresenceSection.tsx
+++ b/apps/meteor/client/views/account/preferences/PreferencesUserPresenceSection.tsx
@@ -1,6 +1,5 @@
 import { AccordionItem, NumberInput } from '@rocket.chat/fuselage';
 import { Field, FieldGroup, FieldLabel, FieldRow, ToggleSwitch } from '@rocket.chat/fuselage-forms';
-import { useId } from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
@@ -8,8 +7,6 @@ const PreferencesUserPresenceSection = () => {
 	const { t } = useTranslation();
 	const { register, control } = useFormContext();
 
-	const idleTimeLimit = useId();
-
 	return (
 		<AccordionItem title={t('User_Presence')}>
 			<FieldGroup>
@@ -26,7 +23,7 @@ const PreferencesUserPresenceSection = () => {
 				<Field>
 					<FieldLabel>{t('Idle_Time_Limit')}</FieldLabel>
 					<FieldRow>
-						<NumberInput id={idleTimeLimit} {...register('idleTimeLimit')} />
+						<NumberInput {...register('idleTimeLimit')} />
 					</FieldRow>
 				</Field>
 			</FieldGroup>

From 9b8575c6cfba3811b905cea75c94c28f34fb6eac Mon Sep 17 00:00:00 2001
From: gabriellsh <henriques.gabriell@gmail.com>
Date: Wed, 30 Jul 2025 13:14:35 -0300
Subject: [PATCH 05/27] update import

---
 .../account/preferences/PreferencesUserPresenceSection.tsx    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/meteor/client/views/account/preferences/PreferencesUserPresenceSection.tsx b/apps/meteor/client/views/account/preferences/PreferencesUserPresenceSection.tsx
index 6b7ea39b0b5c0..a8a859500ad3e 100644
--- a/apps/meteor/client/views/account/preferences/PreferencesUserPresenceSection.tsx
+++ b/apps/meteor/client/views/account/preferences/PreferencesUserPresenceSection.tsx
@@ -1,5 +1,5 @@
-import { AccordionItem, NumberInput } from '@rocket.chat/fuselage';
-import { Field, FieldGroup, FieldLabel, FieldRow, ToggleSwitch } from '@rocket.chat/fuselage-forms';
+import { AccordionItem } from '@rocket.chat/fuselage';
+import { Field, FieldGroup, FieldLabel, FieldRow, ToggleSwitch, NumberInput } from '@rocket.chat/fuselage-forms';
 import { Controller, useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 

From a81e433d972fce1ba746dab05864a5f3057f4e5d Mon Sep 17 00:00:00 2001
From: juliajforesti <juliajforesti@gmail.com>
Date: Wed, 18 Mar 2026 13:23:28 -0300
Subject: [PATCH 06/27] feat: use `NumberInput` from fuselage-forms in
 `PreferencesUserPresenceSection`

---
 .../preferences/PreferencesUserPresenceSection.tsx        | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/apps/meteor/client/views/account/preferences/PreferencesUserPresenceSection.tsx b/apps/meteor/client/views/account/preferences/PreferencesUserPresenceSection.tsx
index a8a859500ad3e..f6fb4d7988b7f 100644
--- a/apps/meteor/client/views/account/preferences/PreferencesUserPresenceSection.tsx
+++ b/apps/meteor/client/views/account/preferences/PreferencesUserPresenceSection.tsx
@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 
 const PreferencesUserPresenceSection = () => {
 	const { t } = useTranslation();
-	const { register, control } = useFormContext();
+	const { control } = useFormContext();
 
 	return (
 		<AccordionItem title={t('User_Presence')}>
@@ -23,7 +23,11 @@ const PreferencesUserPresenceSection = () => {
 				<Field>
 					<FieldLabel>{t('Idle_Time_Limit')}</FieldLabel>
 					<FieldRow>
-						<NumberInput {...register('idleTimeLimit')} />
+						<Controller
+							name='idleTimeLimit'
+							control={control}
+							render={({ field: { ref, value, onChange } }) => <NumberInput ref={ref} value={value} onChange={onChange} />}
+						/>
 					</FieldRow>
 				</Field>
 			</FieldGroup>

From 6b8c030fbd9933958a9c85600a98a8245a5c45aa Mon Sep 17 00:00:00 2001
From: juliajforesti <juliajforesti@gmail.com>
Date: Thu, 19 Mar 2026 10:38:48 -0300
Subject: [PATCH 07/27] chore: use `Slider` from `fuselage-forms`

---
 .../views/account/preferences/PreferencesSoundSection.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/meteor/client/views/account/preferences/PreferencesSoundSection.tsx b/apps/meteor/client/views/account/preferences/PreferencesSoundSection.tsx
index 6170cf896f46b..a4fa3f123f3a4 100644
--- a/apps/meteor/client/views/account/preferences/PreferencesSoundSection.tsx
+++ b/apps/meteor/client/views/account/preferences/PreferencesSoundSection.tsx
@@ -1,6 +1,6 @@
 import type { SelectOption } from '@rocket.chat/fuselage';
-import { AccordionItem, Slider } from '@rocket.chat/fuselage';
-import { Field, FieldGroup, FieldHint, FieldLabel, FieldRow, Select, ToggleSwitch } from '@rocket.chat/fuselage-forms';
+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';
 
@@ -38,7 +38,7 @@ const PreferencesSoundSection = () => {
 									value={value}
 									minValue={0}
 									maxValue={100}
-									onChange={(value: number) => {
+									onChange={(value) => {
 										const soundVolume = (notificationsSoundVolume * masterVolume) / 100;
 										customSound.play(newMessageNotification, { volume: soundVolume / 100 });
 										onChange(value);
@@ -60,7 +60,7 @@ const PreferencesSoundSection = () => {
 									value={value}
 									minValue={0}
 									maxValue={100}
-									onChange={(value: number) => {
+									onChange={(value) => {
 										const soundVolume = (voipRingerVolume * masterVolume) / 100;
 										customSound.play('telephone', { volume: soundVolume / 100 });
 										onChange(value);

From 6af5b951dc2eec197bf83845acf9bcc8b47a8a12 Mon Sep 17 00:00:00 2001
From: juliajforesti <juliajforesti@gmail.com>
Date: Thu, 19 Mar 2026 10:39:02 -0300
Subject: [PATCH 08/27] chore: use `MultiSelect` from `fuselage-forms`

---
 .../account/preferences/PreferencesGlobalSection.tsx  | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/apps/meteor/client/views/account/preferences/PreferencesGlobalSection.tsx b/apps/meteor/client/views/account/preferences/PreferencesGlobalSection.tsx
index 6bc5468e02007..fcd75cd258dcd 100644
--- a/apps/meteor/client/views/account/preferences/PreferencesGlobalSection.tsx
+++ b/apps/meteor/client/views/account/preferences/PreferencesGlobalSection.tsx
@@ -1,7 +1,7 @@
 import type { SelectOption } from '@rocket.chat/fuselage';
-import { AccordionItem, Field, FieldGroup, FieldLabel, FieldRow, MultiSelect } 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 { useId } from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
@@ -12,21 +12,18 @@ const PreferencesGlobalSection = () => {
 	const options: SelectOption[] = userDontAskAgainList.map(({ action, label }) => [action, label]);
 
 	const { control } = useFormContext();
-	const dontAskAgainListId = useId();
 
 	return (
 		<AccordionItem title={t('Global')}>
 			<FieldGroup>
 				<Field>
-					<FieldLabel is='span' htmlFor={dontAskAgainListId}>
-						{t('Dont_ask_me_again_list')}
-					</FieldLabel>
+					<FieldLabel>{t('Dont_ask_me_again_list')}</FieldLabel>
 					<FieldRow>
 						<Controller
 							name='dontAskAgainList'
 							control={control}
 							render={({ field: { value, onChange } }) => (
-								<MultiSelect id={dontAskAgainListId} placeholder={t('Nothing_found')} value={value} onChange={onChange} options={options} />
+								<MultiSelect placeholder={t('Nothing_found')} value={value} onChange={onChange} options={options} />
 							)}
 						/>
 					</FieldRow>

From e145a9955ea3c7ace9b5c1aa49048ea8496c48f3 Mon Sep 17 00:00:00 2001
From: juliajforesti <juliajforesti@gmail.com>
Date: Tue, 24 Mar 2026 16:26:27 -0300
Subject: [PATCH 09/27] chore: add type definitions to form fields in
 `PreferencesSoundSection`

---
 .../account/preferences/PreferencesSoundSection.tsx      | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/apps/meteor/client/views/account/preferences/PreferencesSoundSection.tsx b/apps/meteor/client/views/account/preferences/PreferencesSoundSection.tsx
index a4fa3f123f3a4..a86976ba5db88 100644
--- a/apps/meteor/client/views/account/preferences/PreferencesSoundSection.tsx
+++ b/apps/meteor/client/views/account/preferences/PreferencesSoundSection.tsx
@@ -9,7 +9,14 @@ const PreferencesSoundSection = () => {
 
 	const customSound = useCustomSound();
 	const soundsList: SelectOption[] = customSound.list?.map((value) => [value._id, t(value.name as TranslationKey)]) || [];
-	const { control, watch } = useFormContext();
+	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 (

From b14967f2b55abdd236247581c46e4262a6f8bed5 Mon Sep 17 00:00:00 2001
From: juliajforesti <juliajforesti@gmail.com>
Date: Thu, 26 Mar 2026 14:32:34 -0300
Subject: [PATCH 10/27] chore: only add `required` field prop when
 `requireName` is truthy

---
 .../views/account/profile/AccountProfileForm.tsx   | 14 ++------------
 1 file changed, 2 insertions(+), 12 deletions(-)

diff --git a/apps/meteor/client/views/account/profile/AccountProfileForm.tsx b/apps/meteor/client/views/account/profile/AccountProfileForm.tsx
index ec108093d00dc..475431811f83b 100644
--- a/apps/meteor/client/views/account/profile/AccountProfileForm.tsx
+++ b/apps/meteor/client/views/account/profile/AccountProfileForm.tsx
@@ -137,17 +137,9 @@ const AccountProfileForm = (props: AllHTMLAttributes<HTMLFormElement>): ReactEle
 					/>
 				</Field>
 
-				<Box
-					display='flex'
-					flexDirection={isMobile ? 'column' : 'row'}
-					alignItems='stretch'
-					justifyContent='space-between'
-					className={css`
-						gap: 16px;
-					`}
-				>
+				<Box display='flex' flexDirection={isMobile ? 'column' : 'row'} style={{ gap: '16px' }}>
 					<Field flexShrink={1}>
-						<FieldLabel required>{t('Name')}</FieldLabel>
+						<FieldLabel required={requireName}>{t('Name')}</FieldLabel>
 						<FieldRow>
 							<Controller
 								control={control}
@@ -261,10 +253,8 @@ const AccountProfileForm = (props: AllHTMLAttributes<HTMLFormElement>): ReactEle
 				<Field>
 					<FieldLabel required>{t('Email')}</FieldLabel>
 					<FieldRow
-						display='flex'
 						flexDirection={isMobile ? 'column' : 'row'}
 						alignItems='stretch'
-						justifyContent='space-between'
 						className={css`
 							gap: 8px;
 						`}

From 9a3c913e95677d25a9d5ba950acf09cc0804238c Mon Sep 17 00:00:00 2001
From: juliajforesti <juliajforesti@gmail.com>
Date: Fri, 27 Mar 2026 16:03:47 -0300
Subject: [PATCH 11/27] chore: apply fuselage-forms in `omnichannel` account
 preferences

---
 .../PreferencesConversationTranscript.tsx     | 39 +++++++------------
 .../omnichannel/PreferencesGeneral.tsx        |  8 ++--
 2 files changed, 18 insertions(+), 29 deletions(-)

diff --git a/apps/meteor/client/views/account/omnichannel/PreferencesConversationTranscript.tsx b/apps/meteor/client/views/account/omnichannel/PreferencesConversationTranscript.tsx
index 35b7b55cafa16..5173985d675e1 100644
--- a/apps/meteor/client/views/account/omnichannel/PreferencesConversationTranscript.tsx
+++ b/apps/meteor/client/views/account/omnichannel/PreferencesConversationTranscript.tsx
@@ -1,6 +1,6 @@
-import { AccordionItem, Box, Field, FieldGroup, FieldLabel, FieldRow, FieldHint, Tag, ToggleSwitch } from '@rocket.chat/fuselage';
+import { AccordionItem, Tag } from '@rocket.chat/fuselage';
+import { Field, FieldGroup, FieldLabel, FieldRow, FieldHint, ToggleSwitch } from '@rocket.chat/fuselage-forms';
 import { useTranslation, usePermission, useSetting } from '@rocket.chat/ui-contexts';
-import { useId } from 'react';
 import { useFormContext } from 'react-hook-form';
 
 import { useHasLicenseModule } from '../../../hooks/useHasLicenseModule';
@@ -17,40 +17,31 @@ const PreferencesConversationTranscript = () => {
 	const canSendTranscriptEmail = canSendTranscriptEmailPermission && !alwaysSendEmailTranscript;
 	const cantSendTranscriptPDF = !canSendTranscriptPDF || !hasLicense;
 
-	const omnichannelTranscriptPDF = useId();
-	const omnichannelTranscriptEmail = useId();
-
 	return (
 		<AccordionItem defaultExpanded title={t('Conversational_transcript')}>
 			<FieldGroup>
 				<Field>
 					<FieldRow>
-						<FieldLabel htmlFor={omnichannelTranscriptPDF}>
-							<Box display='flex' alignItems='center'>
-								{t('Omnichannel_transcript_pdf')}
-								<Box marginInline={4}>
-									{!hasLicense && <Tag variant='featured'>{t('Premium')}</Tag>}
-									{!canSendTranscriptPDF && hasLicense && <Tag>{t('No_permission')}</Tag>}
-								</Box>
-							</Box>
+						<FieldLabel>
+							{t('Omnichannel_transcript_pdf')}
+							{!hasLicense && (
+								<Tag mi={4} variant='featured'>
+									{t('Premium')}
+								</Tag>
+							)}
+							{!canSendTranscriptPDF && hasLicense && <Tag mi={4}>{t('No_permission')}</Tag>}
 						</FieldLabel>
-						<ToggleSwitch id={omnichannelTranscriptPDF} disabled={cantSendTranscriptPDF} {...register('omnichannelTranscriptPDF')} />
+						<ToggleSwitch disabled={cantSendTranscriptPDF} {...register('omnichannelTranscriptPDF')} />
 					</FieldRow>
 					<FieldHint>{t('Accounts_Default_User_Preferences_omnichannelTranscriptPDF_Description')}</FieldHint>
 				</Field>
 				<Field>
 					<FieldRow>
-						<FieldLabel htmlFor={omnichannelTranscriptEmail}>
-							<Box display='flex' alignItems='center'>
-								{t('Omnichannel_transcript_email')}
-								{!canSendTranscriptEmailPermission && (
-									<Box marginInline={4}>
-										<Tag>{t('No_permission')}</Tag>
-									</Box>
-								)}
-							</Box>
+						<FieldLabel>
+							{t('Omnichannel_transcript_email')}
+							{!canSendTranscriptEmailPermission && <Tag mi={4}>{t('No_permission')}</Tag>}
 						</FieldLabel>
-						<ToggleSwitch id={omnichannelTranscriptEmail} disabled={!canSendTranscriptEmail} {...register('omnichannelTranscriptEmail')} />
+						<ToggleSwitch disabled={!canSendTranscriptEmail} {...register('omnichannelTranscriptEmail')} />
 					</FieldRow>
 					<FieldHint>{t('Accounts_Default_User_Preferences_omnichannelTranscriptEmail_Description')}</FieldHint>
 				</Field>
diff --git a/apps/meteor/client/views/account/omnichannel/PreferencesGeneral.tsx b/apps/meteor/client/views/account/omnichannel/PreferencesGeneral.tsx
index ade5f3435715b..786c1053f25e2 100644
--- a/apps/meteor/client/views/account/omnichannel/PreferencesGeneral.tsx
+++ b/apps/meteor/client/views/account/omnichannel/PreferencesGeneral.tsx
@@ -1,5 +1,4 @@
-import { Field, FieldGroup, FieldHint, FieldLabel, FieldRow, ToggleSwitch } from '@rocket.chat/fuselage';
-import { useId } from 'react';
+import { Field, FieldGroup, FieldHint, FieldLabel, FieldRow, ToggleSwitch } from '@rocket.chat/fuselage-forms';
 import type { ReactElement } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
@@ -7,14 +6,13 @@ import { useTranslation } from 'react-i18next';
 export const PreferencesGeneral = (): ReactElement => {
 	const { t } = useTranslation();
 	const { register } = useFormContext();
-	const omnichannelHideAfterClosing = useId();
 
 	return (
 		<FieldGroup marginBlockEnd='1.5rem' paddingInline='0.5rem'>
 			<Field>
 				<FieldRow>
-					<FieldLabel htmlFor={omnichannelHideAfterClosing}>{t('Omnichannel_hide_conversation_after_closing')}</FieldLabel>
-					<ToggleSwitch id={omnichannelHideAfterClosing} {...register('omnichannelHideConversationAfterClosing')} />
+					<FieldLabel>{t('Omnichannel_hide_conversation_after_closing')}</FieldLabel>
+					<ToggleSwitch {...register('omnichannelHideConversationAfterClosing')} />
 				</FieldRow>
 				<FieldHint>{t('Omnichannel_hide_conversation_after_closing_description')}</FieldHint>
 			</Field>

From 492ad98f2932e79eeb8390cbae5a79dc8c3ed6a1 Mon Sep 17 00:00:00 2001
From: juliajforesti <juliajforesti@gmail.com>
Date: Fri, 27 Mar 2026 16:04:02 -0300
Subject: [PATCH 12/27] chore: add id associations for accessibility in
 `PreferencesMessagesSection` links

---
 .../PreferencesMessagesSection.tsx            | 27 ++++++++++++++-----
 1 file changed, 20 insertions(+), 7 deletions(-)

diff --git a/apps/meteor/client/views/account/preferences/PreferencesMessagesSection.tsx b/apps/meteor/client/views/account/preferences/PreferencesMessagesSection.tsx
index f11d8236974c5..afd1cd61a6908 100644
--- a/apps/meteor/client/views/account/preferences/PreferencesMessagesSection.tsx
+++ b/apps/meteor/client/views/account/preferences/PreferencesMessagesSection.tsx
@@ -1,13 +1,20 @@
 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 { useMemo } from 'react';
+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();
+	// Remove id associations after `FieldLink` is added to fuselage-forms
+	const messageTimeFormatLabelId = useId();
+	const messageTimeFormatLinkId = useId();
+	const hideUsernamesLabelId = useId();
+	const hideUsernamesLinkId = useId();
+	const hideRolesLabelId = useId();
+	const hideRolesLinkId = useId();
 
 	const alsoSendThreadMessageToChannelOptions = useMemo(
 		(): SelectOption[] => [
@@ -65,8 +72,10 @@ const PreferencesMessagesSection = () => {
 					<FieldHint>{t('Accounts_Default_User_Preferences_alsoSendThreadToChannel_Description')}</FieldHint>
 				</Field>
 				<Field>
-					<FieldLabel>{t('Message_TimeFormat')}</FieldLabel>
-					<FieldLink href='/account/accessibility-and-appearance'>{t('Go_to_accessibility_and_appearance')}</FieldLink>
+					<FieldLabel id={messageTimeFormatLabelId}>{t('Message_TimeFormat')}</FieldLabel>
+					<FieldLink id={messageTimeFormatLinkId} aria-labelledby={messageTimeFormatLabelId} href='/account/accessibility-and-appearance'>
+						{t('Go_to_accessibility_and_appearance')}
+					</FieldLink>
 				</Field>
 				<Field>
 					<FieldRow>
@@ -119,12 +128,16 @@ const PreferencesMessagesSection = () => {
 					</FieldRow>
 				</Field>
 				<Field>
-					<FieldLabel>{t('Hide_usernames')}</FieldLabel>
-					<FieldLink href='/account/accessibility-and-appearance'>{t('Go_to_accessibility_and_appearance')}</FieldLink>
+					<FieldLabel id={hideUsernamesLabelId}>{t('Hide_usernames')}</FieldLabel>
+					<FieldLink id={hideUsernamesLinkId} aria-labelledby={hideUsernamesLabelId} href='/account/accessibility-and-appearance'>
+						{t('Go_to_accessibility_and_appearance')}
+					</FieldLink>
 				</Field>
 				<Field>
-					<FieldLabel>{t('Hide_roles')}</FieldLabel>
-					<FieldLink href='/account/accessibility-and-appearance'>{t('Go_to_accessibility_and_appearance')}</FieldLink>
+					<FieldLabel id={hideRolesLabelId}>{t('Hide_roles')}</FieldLabel>
+					<FieldLink id={hideRolesLinkId} aria-labelledby={hideRolesLabelId} href='/account/accessibility-and-appearance'>
+						{t('Go_to_accessibility_and_appearance')}
+					</FieldLink>
 				</Field>
 				<Field>
 					<FieldRow>

From f966cbcd7f7e862010ecc65dc8eda111053cc9b3 Mon Sep 17 00:00:00 2001
From: juliajforesti <juliajforesti@gmail.com>
Date: Fri, 27 Mar 2026 16:13:46 -0300
Subject: [PATCH 13/27] chore: apply `Select` from `fuselage-forms` in
 `AccountIntegrationsPage`

---
 .../account/integrations/AccountIntegrationsPage.tsx   | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/meteor/client/views/account/integrations/AccountIntegrationsPage.tsx b/apps/meteor/client/views/account/integrations/AccountIntegrationsPage.tsx
index eb62c25d8077f..e3295f9faa490 100644
--- a/apps/meteor/client/views/account/integrations/AccountIntegrationsPage.tsx
+++ b/apps/meteor/client/views/account/integrations/AccountIntegrationsPage.tsx
@@ -1,6 +1,6 @@
 import type { SelectOption } from '@rocket.chat/fuselage';
-import { SelectLegacy, Box, Button, Field, FieldLabel, FieldRow, FieldError } from '@rocket.chat/fuselage';
-import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
+import { Box, Button } from '@rocket.chat/fuselage';
+import { Select, Field, FieldLabel, FieldRow, FieldError } from '@rocket.chat/fuselage-forms';
 import { Page, PageHeader, PageScrollableContentWithShadow } from '@rocket.chat/ui-client';
 import { useToastMessageDispatch } from '@rocket.chat/ui-contexts';
 import { useId, useMemo } from 'react';
@@ -37,9 +37,9 @@ const AccountIntegrationsPage = () => {
 		},
 	});
 
-	const handleSubmitForm = useEffectEvent(({ accountSelected }: { accountSelected: string }) => {
+	const handleSubmitForm = ({ accountSelected }: { accountSelected: string }) => {
 		removeMutation.mutate({ accountSelected });
-	});
+	};
 
 	const accountSelectedId = useId();
 
@@ -55,7 +55,7 @@ const AccountIntegrationsPage = () => {
 								control={control}
 								name='accountSelected'
 								rules={{ required: t('Required_field', { field: t('WebDAV_Accounts') }) }}
-								render={({ field }) => <SelectLegacy {...field} options={options} placeholder={t('Select_an_option')} />}
+								render={({ field }) => <Select {...field} options={options} placeholder={t('Select_an_option')} />}
 							/>
 							<Button type='submit' danger>
 								{t('Remove')}

From 84c761da9188696dd90e5fc039e08f9171e900a4 Mon Sep 17 00:00:00 2001
From: Douglas Fabris <devfabris@gmail.com>
Date: Tue, 31 Mar 2026 13:21:54 -0300
Subject: [PATCH 14/27] fix: add back removed config

---
 .../preferences/PreferencesNotificationsSection.tsx    | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/apps/meteor/client/views/account/preferences/PreferencesNotificationsSection.tsx b/apps/meteor/client/views/account/preferences/PreferencesNotificationsSection.tsx
index 5c69aaecd2c62..ed956b10cf88a 100644
--- a/apps/meteor/client/views/account/preferences/PreferencesNotificationsSection.tsx
+++ b/apps/meteor/client/views/account/preferences/PreferencesNotificationsSection.tsx
@@ -121,6 +121,16 @@ const PreferencesNotificationsSection = () => {
 					</FieldRow>
 					<FieldHint>{t('Only_works_with_chrome_version_greater_50')}</FieldHint>
 				</Field>
+				<Field>
+					<FieldRow>
+						<FieldLabel>{t('Notification_Desktop_show_voice_calls')}</FieldLabel>
+						<Controller
+							name='desktopNotificationVoiceCalls'
+							control={control}
+							render={({ field: { ref, value, onChange } }) => <ToggleSwitch ref={ref} checked={value} onChange={onChange} />}
+						/>
+					</FieldRow>
+				</Field>
 				<Field>
 					<FieldLabel>{t('Notification_Desktop_Default_For')}</FieldLabel>
 					<FieldRow>

From ea5654a53d8a0b6efe04cbac41c59bda8b98b2bd Mon Sep 17 00:00:00 2001
From: Douglas Fabris <devfabris@gmail.com>
Date: Tue, 31 Mar 2026 13:24:41 -0300
Subject: [PATCH 15/27] fix: unnecessary changes

---
 .../account/profile/AccountProfileForm.tsx    | 23 ++++++++++---------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/apps/meteor/client/views/account/profile/AccountProfileForm.tsx b/apps/meteor/client/views/account/profile/AccountProfileForm.tsx
index 475431811f83b..ece7fa71aa819 100644
--- a/apps/meteor/client/views/account/profile/AccountProfileForm.tsx
+++ b/apps/meteor/client/views/account/profile/AccountProfileForm.tsx
@@ -76,14 +76,22 @@ const AccountProfileForm = (props: AllHTMLAttributes<HTMLFormElement>): ReactEle
 	}, [email, previousEmail, mutateConfirmationEmail]);
 
 	const validateUsername = async (username: string): Promise<string | undefined> => {
-		if (!username) return;
+		if (!username) {
+			return;
+		}
 
-		if (username === previousUsername) return;
+		if (username === previousUsername) {
+			return;
+		}
 
-		if (!namesRegex.test(username)) return t('error-invalid-username');
+		if (!namesRegex.test(username)) {
+			return t('error-invalid-username');
+		}
 
 		const { result: isAvailable } = await checkUsernameAvailability({ username });
-		if (!isAvailable) return t('Username_already_exist');
+		if (!isAvailable) {
+			return t('Username_already_exist');
+		}
 	};
 
 	const updateOwnBasicInfo = useEndpoint('POST', '/v1/users.updateOwnBasicInfo');
@@ -136,7 +144,6 @@ const AccountProfileForm = (props: AllHTMLAttributes<HTMLFormElement>): ReactEle
 						)}
 					/>
 				</Field>
-
 				<Box display='flex' flexDirection={isMobile ? 'column' : 'row'} style={{ gap: '16px' }}>
 					<Field flexShrink={1}>
 						<FieldLabel required={requireName}>{t('Name')}</FieldLabel>
@@ -153,7 +160,6 @@ const AccountProfileForm = (props: AllHTMLAttributes<HTMLFormElement>): ReactEle
 						{errors.name && <FieldError>{errors.name.message}</FieldError>}
 						{!allowRealNameChange && <FieldHint>{t('RealName_Change_Disabled')}</FieldHint>}
 					</Field>
-
 					<Field flexShrink={1}>
 						<FieldLabel required>{t('Username')}</FieldLabel>
 						<FieldRow>
@@ -179,7 +185,6 @@ const AccountProfileForm = (props: AllHTMLAttributes<HTMLFormElement>): ReactEle
 						{!canChangeUsername && <FieldHint>{t('Username_Change_Disabled')}</FieldHint>}
 					</Field>
 				</Box>
-
 				<Field>
 					<FieldLabel>{t('StatusMessage')}</FieldLabel>
 					<FieldRow>
@@ -215,7 +220,6 @@ const AccountProfileForm = (props: AllHTMLAttributes<HTMLFormElement>): ReactEle
 					{errors.statusText && <FieldError>{errors.statusText.message}</FieldError>}
 					{!allowUserStatusMessageChange && <FieldHint>{t('StatusMessage_Change_Disabled')}</FieldHint>}
 				</Field>
-
 				<Field>
 					<FieldLabel>{t('Nickname')}</FieldLabel>
 					<FieldRow>
@@ -226,7 +230,6 @@ const AccountProfileForm = (props: AllHTMLAttributes<HTMLFormElement>): ReactEle
 						/>
 					</FieldRow>
 				</Field>
-
 				<Field>
 					<FieldLabel>{t('Bio')}</FieldLabel>
 					<FieldRow>
@@ -249,7 +252,6 @@ const AccountProfileForm = (props: AllHTMLAttributes<HTMLFormElement>): ReactEle
 					</FieldRow>
 					{errors.bio && <FieldError>{errors.bio.message}</FieldError>}
 				</Field>
-
 				<Field>
 					<FieldLabel required>{t('Email')}</FieldLabel>
 					<FieldRow
@@ -288,7 +290,6 @@ const AccountProfileForm = (props: AllHTMLAttributes<HTMLFormElement>): ReactEle
 					{errors.email && <FieldError>{errors.email.message}</FieldError>}
 					{!allowEmailChange && <FieldHint>{t('Email_Change_Disabled')}</FieldHint>}
 				</Field>
-
 				{customFieldsMetadata && <CustomFieldsForm formName='customFields' formControl={control} metadata={customFieldsMetadata} />}
 			</FieldGroup>
 		</Box>

From 9fcf94beb4af2ed0006569df13f4d8c5de6faa42 Mon Sep 17 00:00:00 2001
From: Douglas Fabris <devfabris@gmail.com>
Date: Tue, 31 Mar 2026 13:31:44 -0300
Subject: [PATCH 16/27] chore: restore positions

---
 .../preferences/PreferencesNotificationsSection.tsx  | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/apps/meteor/client/views/account/preferences/PreferencesNotificationsSection.tsx b/apps/meteor/client/views/account/preferences/PreferencesNotificationsSection.tsx
index ed956b10cf88a..37966397f64d9 100644
--- a/apps/meteor/client/views/account/preferences/PreferencesNotificationsSection.tsx
+++ b/apps/meteor/client/views/account/preferences/PreferencesNotificationsSection.tsx
@@ -122,22 +122,22 @@ const PreferencesNotificationsSection = () => {
 					<FieldHint>{t('Only_works_with_chrome_version_greater_50')}</FieldHint>
 				</Field>
 				<Field>
+					<FieldLabel>{t('Notification_Desktop_Default_For')}</FieldLabel>
 					<FieldRow>
-						<FieldLabel>{t('Notification_Desktop_show_voice_calls')}</FieldLabel>
 						<Controller
-							name='desktopNotificationVoiceCalls'
+							name='desktopNotifications'
 							control={control}
-							render={({ field: { ref, value, onChange } }) => <ToggleSwitch ref={ref} checked={value} onChange={onChange} />}
+							render={({ field: { value, onChange } }) => <Select value={value} onChange={onChange} options={desktopNotificationOptions} />}
 						/>
 					</FieldRow>
 				</Field>
 				<Field>
-					<FieldLabel>{t('Notification_Desktop_Default_For')}</FieldLabel>
 					<FieldRow>
+						<FieldLabel>{t('Notification_Desktop_show_voice_calls')}</FieldLabel>
 						<Controller
-							name='desktopNotifications'
+							name='desktopNotificationVoiceCalls'
 							control={control}
-							render={({ field: { value, onChange } }) => <Select value={value} onChange={onChange} options={desktopNotificationOptions} />}
+							render={({ field: { ref, value, onChange } }) => <ToggleSwitch ref={ref} checked={value} onChange={onChange} />}
 						/>
 					</FieldRow>
 				</Field>

From ae1e0c6397b8ad637c3830fc62ff5aa3f8621e87 Mon Sep 17 00:00:00 2001
From: Douglas Fabris <devfabris@gmail.com>
Date: Tue, 31 Mar 2026 15:52:02 -0300
Subject: [PATCH 17/27] chore: remove unused id associations in
 PreferencesMessagesSection

---
 .../preferences/PreferencesMessagesSection.tsx        | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/apps/meteor/client/views/account/preferences/PreferencesMessagesSection.tsx b/apps/meteor/client/views/account/preferences/PreferencesMessagesSection.tsx
index afd1cd61a6908..db3124de76ad1 100644
--- a/apps/meteor/client/views/account/preferences/PreferencesMessagesSection.tsx
+++ b/apps/meteor/client/views/account/preferences/PreferencesMessagesSection.tsx
@@ -8,13 +8,10 @@ import { useTranslation } from 'react-i18next';
 const PreferencesMessagesSection = () => {
 	const { t } = useTranslation();
 	const { control } = useFormContext();
-	// Remove id associations after `FieldLink` is added to fuselage-forms
+
 	const messageTimeFormatLabelId = useId();
-	const messageTimeFormatLinkId = useId();
 	const hideUsernamesLabelId = useId();
-	const hideUsernamesLinkId = useId();
 	const hideRolesLabelId = useId();
-	const hideRolesLinkId = useId();
 
 	const alsoSendThreadMessageToChannelOptions = useMemo(
 		(): SelectOption[] => [
@@ -73,7 +70,7 @@ const PreferencesMessagesSection = () => {
 				</Field>
 				<Field>
 					<FieldLabel id={messageTimeFormatLabelId}>{t('Message_TimeFormat')}</FieldLabel>
-					<FieldLink id={messageTimeFormatLinkId} aria-labelledby={messageTimeFormatLabelId} href='/account/accessibility-and-appearance'>
+					<FieldLink aria-describedby={messageTimeFormatLabelId} href='/account/accessibility-and-appearance'>
 						{t('Go_to_accessibility_and_appearance')}
 					</FieldLink>
 				</Field>
@@ -129,13 +126,13 @@ const PreferencesMessagesSection = () => {
 				</Field>
 				<Field>
 					<FieldLabel id={hideUsernamesLabelId}>{t('Hide_usernames')}</FieldLabel>
-					<FieldLink id={hideUsernamesLinkId} aria-labelledby={hideUsernamesLabelId} href='/account/accessibility-and-appearance'>
+					<FieldLink aria-describedby={hideUsernamesLabelId} href='/account/accessibility-and-appearance'>
 						{t('Go_to_accessibility_and_appearance')}
 					</FieldLink>
 				</Field>
 				<Field>
 					<FieldLabel id={hideRolesLabelId}>{t('Hide_roles')}</FieldLabel>
-					<FieldLink id={hideRolesLinkId} aria-labelledby={hideRolesLabelId} href='/account/accessibility-and-appearance'>
+					<FieldLink aria-describedby={hideRolesLabelId} href='/account/accessibility-and-appearance'>
 						{t('Go_to_accessibility_and_appearance')}
 					</FieldLink>
 				</Field>

From 5df674a9458ab92206995ecb7207dc8fb7e0d5c8 Mon Sep 17 00:00:00 2001
From: Douglas Fabris <devfabris@gmail.com>
Date: Wed, 1 Apr 2026 09:57:42 -0300
Subject: [PATCH 18/27] fix: update form handling in
 PreferencesHighlightsSection to use Controller

---
 .../account/preferences/PreferencesHighlightsSection.tsx    | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/meteor/client/views/account/preferences/PreferencesHighlightsSection.tsx b/apps/meteor/client/views/account/preferences/PreferencesHighlightsSection.tsx
index 7fae2b4e1f4e8..812a1fdada40b 100644
--- a/apps/meteor/client/views/account/preferences/PreferencesHighlightsSection.tsx
+++ b/apps/meteor/client/views/account/preferences/PreferencesHighlightsSection.tsx
@@ -1,11 +1,11 @@
 import { AccordionItem } from '@rocket.chat/fuselage';
 import { Field, FieldGroup, FieldLabel, FieldRow, FieldHint, TextAreaInput } from '@rocket.chat/fuselage-forms';
-import { useFormContext } from 'react-hook-form';
+import { Controller, useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
 const PreferencesHighlightsSection = () => {
 	const { t } = useTranslation();
-	const { register } = useFormContext();
+	const { control } = useFormContext();
 
 	return (
 		<AccordionItem title={t('Highlights')}>
@@ -13,7 +13,7 @@ const PreferencesHighlightsSection = () => {
 				<Field>
 					<FieldLabel>{t('Highlights_List')}</FieldLabel>
 					<FieldRow>
-						<TextAreaInput {...register('highlights')} rows={4} />
+						<Controller control={control} name='highlights' render={({ field }) => <TextAreaInput {...field} rows={4} />} />
 					</FieldRow>
 					<FieldHint>{t('Highlights_How_To')}</FieldHint>
 				</Field>

From 653453322c5a328a0876ed45354862dc2a23bb3a Mon Sep 17 00:00:00 2001
From: Douglas Fabris <devfabris@gmail.com>
Date: Wed, 1 Apr 2026 10:00:15 -0300
Subject: [PATCH 19/27] chore: remove unused id association and simplify error
 handling in AccountIntegrationsPage

---
 .../account/integrations/AccountIntegrationsPage.tsx   | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/apps/meteor/client/views/account/integrations/AccountIntegrationsPage.tsx b/apps/meteor/client/views/account/integrations/AccountIntegrationsPage.tsx
index e3295f9faa490..f2a6a4264635a 100644
--- a/apps/meteor/client/views/account/integrations/AccountIntegrationsPage.tsx
+++ b/apps/meteor/client/views/account/integrations/AccountIntegrationsPage.tsx
@@ -3,7 +3,7 @@ import { Box, Button } from '@rocket.chat/fuselage';
 import { Select, Field, FieldLabel, FieldRow, FieldError } from '@rocket.chat/fuselage-forms';
 import { Page, PageHeader, PageScrollableContentWithShadow } from '@rocket.chat/ui-client';
 import { useToastMessageDispatch } from '@rocket.chat/ui-contexts';
-import { useId, useMemo } from 'react';
+import { useMemo } from 'react';
 import { useForm, Controller } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
@@ -41,8 +41,6 @@ const AccountIntegrationsPage = () => {
 		removeMutation.mutate({ accountSelected });
 	};
 
-	const accountSelectedId = useId();
-
 	return (
 		<Page>
 			<PageHeader title={t('Integrations')} />
@@ -61,11 +59,7 @@ const AccountIntegrationsPage = () => {
 								{t('Remove')}
 							</Button>
 						</FieldRow>
-						{errors?.accountSelected && (
-							<FieldError aria-live='assertive' id={`${accountSelectedId}-error`}>
-								{errors.accountSelected.message}
-							</FieldError>
-						)}
+						{errors?.accountSelected && <FieldError>{errors.accountSelected.message}</FieldError>}
 					</Field>
 				</Box>
 			</PageScrollableContentWithShadow>

From 1a2c851cb888ec58265ff439a5c9a0ab1223175e Mon Sep 17 00:00:00 2001
From: Douglas Fabris <devfabris@gmail.com>
Date: Wed, 1 Apr 2026 10:02:48 -0300
Subject: [PATCH 20/27] fix: update form handling in
 PreferencesConversationTranscript to use Controller

---
 .../PreferencesConversationTranscript.tsx       | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/apps/meteor/client/views/account/omnichannel/PreferencesConversationTranscript.tsx b/apps/meteor/client/views/account/omnichannel/PreferencesConversationTranscript.tsx
index 5173985d675e1..2f88a5f622149 100644
--- a/apps/meteor/client/views/account/omnichannel/PreferencesConversationTranscript.tsx
+++ b/apps/meteor/client/views/account/omnichannel/PreferencesConversationTranscript.tsx
@@ -1,14 +1,13 @@
 import { AccordionItem, Tag } from '@rocket.chat/fuselage';
 import { Field, FieldGroup, FieldLabel, FieldRow, FieldHint, ToggleSwitch } from '@rocket.chat/fuselage-forms';
 import { useTranslation, usePermission, useSetting } from '@rocket.chat/ui-contexts';
-import { useFormContext } from 'react-hook-form';
+import { Controller, useFormContext } from 'react-hook-form';
 
 import { useHasLicenseModule } from '../../../hooks/useHasLicenseModule';
 
 const PreferencesConversationTranscript = () => {
 	const t = useTranslation();
-
-	const { register } = useFormContext();
+	const { control } = useFormContext();
 
 	const { data: hasLicense = false } = useHasLicenseModule('livechat-enterprise');
 	const alwaysSendEmailTranscript = useSetting('Livechat_transcript_send_always');
@@ -31,7 +30,11 @@ const PreferencesConversationTranscript = () => {
 							)}
 							{!canSendTranscriptPDF && hasLicense && <Tag mi={4}>{t('No_permission')}</Tag>}
 						</FieldLabel>
-						<ToggleSwitch disabled={cantSendTranscriptPDF} {...register('omnichannelTranscriptPDF')} />
+						<Controller
+							control={control}
+							name='omnichannelTranscriptPDF'
+							render={({ field: { value, ...field } }) => <ToggleSwitch disabled={cantSendTranscriptPDF} {...field} checked={value} />}
+						/>
 					</FieldRow>
 					<FieldHint>{t('Accounts_Default_User_Preferences_omnichannelTranscriptPDF_Description')}</FieldHint>
 				</Field>
@@ -41,7 +44,11 @@ const PreferencesConversationTranscript = () => {
 							{t('Omnichannel_transcript_email')}
 							{!canSendTranscriptEmailPermission && <Tag mi={4}>{t('No_permission')}</Tag>}
 						</FieldLabel>
-						<ToggleSwitch disabled={!canSendTranscriptEmail} {...register('omnichannelTranscriptEmail')} />
+						<Controller
+							control={control}
+							name='omnichannelTranscriptEmail'
+							render={({ field: { value, ...field } }) => <ToggleSwitch disabled={!canSendTranscriptEmail} {...field} checked={value} />}
+						/>
 					</FieldRow>
 					<FieldHint>{t('Accounts_Default_User_Preferences_omnichannelTranscriptEmail_Description')}</FieldHint>
 				</Field>

From ad1cedf684bfc303bdefc800ca799d8574877234 Mon Sep 17 00:00:00 2001
From: Douglas Fabris <devfabris@gmail.com>
Date: Wed, 1 Apr 2026 10:03:57 -0300
Subject: [PATCH 21/27] fix: update form handling in PreferencesGeneral to use
 Controller

---
 .../views/account/omnichannel/PreferencesGeneral.tsx   | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/apps/meteor/client/views/account/omnichannel/PreferencesGeneral.tsx b/apps/meteor/client/views/account/omnichannel/PreferencesGeneral.tsx
index 786c1053f25e2..bfdd236df6eea 100644
--- a/apps/meteor/client/views/account/omnichannel/PreferencesGeneral.tsx
+++ b/apps/meteor/client/views/account/omnichannel/PreferencesGeneral.tsx
@@ -1,18 +1,22 @@
 import { Field, FieldGroup, FieldHint, FieldLabel, FieldRow, ToggleSwitch } from '@rocket.chat/fuselage-forms';
 import type { ReactElement } from 'react';
-import { useFormContext } from 'react-hook-form';
+import { Controller, useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
 export const PreferencesGeneral = (): ReactElement => {
 	const { t } = useTranslation();
-	const { register } = useFormContext();
+	const { control } = useFormContext();
 
 	return (
 		<FieldGroup marginBlockEnd='1.5rem' paddingInline='0.5rem'>
 			<Field>
 				<FieldRow>
 					<FieldLabel>{t('Omnichannel_hide_conversation_after_closing')}</FieldLabel>
-					<ToggleSwitch {...register('omnichannelHideConversationAfterClosing')} />
+					<Controller
+						control={control}
+						name='omnichannelHideConversationAfterClosing'
+						render={({ field: { value, ...field } }) => <ToggleSwitch {...field} checked={value} />}
+					/>
 				</FieldRow>
 				<FieldHint>{t('Omnichannel_hide_conversation_after_closing_description')}</FieldHint>
 			</Field>

From d9b449cef5f009823023cdff9f65c7bfb2b168e4 Mon Sep 17 00:00:00 2001
From: Douglas Fabris <devfabris@gmail.com>
Date: Wed, 1 Apr 2026 10:07:06 -0300
Subject: [PATCH 22/27] fix: simplify Controller usage in
 PreferencesLocalizationSection

---
 .../account/preferences/PreferencesLocalizationSection.tsx  | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/apps/meteor/client/views/account/preferences/PreferencesLocalizationSection.tsx b/apps/meteor/client/views/account/preferences/PreferencesLocalizationSection.tsx
index 215969464bd31..8be6748e0d119 100644
--- a/apps/meteor/client/views/account/preferences/PreferencesLocalizationSection.tsx
+++ b/apps/meteor/client/views/account/preferences/PreferencesLocalizationSection.tsx
@@ -20,11 +20,7 @@ const PreferencesLocalizationSection = () => {
 				<Field>
 					<FieldLabel>{t('Language')}</FieldLabel>
 					<FieldRow>
-						<Controller
-							control={control}
-							name='language'
-							render={({ field: { value, onChange } }) => <Select value={value} onChange={onChange} options={languageOptions} />}
-						/>
+						<Controller control={control} name='language' render={({ field }) => <Select {...field} options={languageOptions} />} />
 					</FieldRow>
 				</Field>
 			</FieldGroup>

From 7e9de688d7127f451287eff48e5f156f847d03bf Mon Sep 17 00:00:00 2001
From: Douglas Fabris <devfabris@gmail.com>
Date: Wed, 1 Apr 2026 10:07:14 -0300
Subject: [PATCH 23/27] fix: streamline Controller rendering in
 PreferencesMessagesSection

---
 .../PreferencesMessagesSection.tsx            | 28 ++++++++-----------
 1 file changed, 11 insertions(+), 17 deletions(-)

diff --git a/apps/meteor/client/views/account/preferences/PreferencesMessagesSection.tsx b/apps/meteor/client/views/account/preferences/PreferencesMessagesSection.tsx
index db3124de76ad1..1bf43d99d4dfd 100644
--- a/apps/meteor/client/views/account/preferences/PreferencesMessagesSection.tsx
+++ b/apps/meteor/client/views/account/preferences/PreferencesMessagesSection.tsx
@@ -40,7 +40,7 @@ const PreferencesMessagesSection = () => {
 						<Controller
 							name='unreadAlert'
 							control={control}
-							render={({ field: { value, onChange, ref } }) => <ToggleSwitch ref={ref} checked={value} onChange={onChange} />}
+							render={({ field: { value, ...field } }) => <ToggleSwitch {...field} checked={value} />}
 						/>
 					</FieldRow>
 				</Field>
@@ -50,7 +50,7 @@ const PreferencesMessagesSection = () => {
 						<Controller
 							name='showThreadsInMainChannel'
 							control={control}
-							render={({ field: { value, onChange, ref } }) => <ToggleSwitch ref={ref} checked={value} onChange={onChange} />}
+							render={({ field: { value, ...field } }) => <ToggleSwitch {...field} checked={value} />}
 						/>
 					</FieldRow>
 					<FieldHint>{t('Accounts_Default_User_Preferences_showThreadsInMainChannel_Description')}</FieldHint>
@@ -61,9 +61,7 @@ const PreferencesMessagesSection = () => {
 						<Controller
 							name='alsoSendThreadToChannel'
 							control={control}
-							render={({ field: { value, onChange } }) => (
-								<Select value={value} onChange={onChange} options={alsoSendThreadMessageToChannelOptions} />
-							)}
+							render={({ field }) => <Select {...field} options={alsoSendThreadMessageToChannelOptions} />}
 						/>
 					</FieldRow>
 					<FieldHint>{t('Accounts_Default_User_Preferences_alsoSendThreadToChannel_Description')}</FieldHint>
@@ -80,7 +78,7 @@ const PreferencesMessagesSection = () => {
 						<Controller
 							name='useEmojis'
 							control={control}
-							render={({ field: { value, onChange, ref } }) => <ToggleSwitch ref={ref} checked={value} onChange={onChange} />}
+							render={({ field: { value, ...field } }) => <ToggleSwitch {...field} checked={value} />}
 						/>
 					</FieldRow>
 				</Field>
@@ -90,7 +88,7 @@ const PreferencesMessagesSection = () => {
 						<Controller
 							name='convertAsciiEmoji'
 							control={control}
-							render={({ field: { value, onChange, ref } }) => <ToggleSwitch ref={ref} checked={value} onChange={onChange} />}
+							render={({ field: { value, ...field } }) => <ToggleSwitch {...field} checked={value} />}
 						/>
 					</FieldRow>
 				</Field>
@@ -100,7 +98,7 @@ const PreferencesMessagesSection = () => {
 						<Controller
 							name='autoImageLoad'
 							control={control}
-							render={({ field: { value, onChange, ref } }) => <ToggleSwitch ref={ref} checked={value} onChange={onChange} />}
+							render={({ field: { value, ...field } }) => <ToggleSwitch {...field} checked={value} />}
 						/>
 					</FieldRow>
 				</Field>
@@ -110,7 +108,7 @@ const PreferencesMessagesSection = () => {
 						<Controller
 							name='saveMobileBandwidth'
 							control={control}
-							render={({ field: { value, onChange, ref } }) => <ToggleSwitch ref={ref} checked={value} onChange={onChange} />}
+							render={({ field: { value, ...field } }) => <ToggleSwitch {...field} checked={value} />}
 						/>
 					</FieldRow>
 				</Field>
@@ -120,7 +118,7 @@ const PreferencesMessagesSection = () => {
 						<Controller
 							name='collapseMediaByDefault'
 							control={control}
-							render={({ field: { value, onChange, ref } }) => <ToggleSwitch ref={ref} checked={value} onChange={onChange} />}
+							render={({ field: { value, ...field } }) => <ToggleSwitch {...field} checked={value} />}
 						/>
 					</FieldRow>
 				</Field>
@@ -142,7 +140,7 @@ const PreferencesMessagesSection = () => {
 						<Controller
 							name='hideFlexTab'
 							control={control}
-							render={({ field: { value, onChange, ref } }) => <ToggleSwitch ref={ref} checked={value} onChange={onChange} />}
+							render={({ field: { value, ...field } }) => <ToggleSwitch {...field} checked={value} />}
 						/>
 					</FieldRow>
 				</Field>
@@ -152,18 +150,14 @@ const PreferencesMessagesSection = () => {
 						<Controller
 							name='displayAvatars'
 							control={control}
-							render={({ field: { value, onChange, ref } }) => <ToggleSwitch ref={ref} checked={value} onChange={onChange} />}
+							render={({ field: { value, ...field } }) => <ToggleSwitch {...field} checked={value} />}
 						/>
 					</FieldRow>
 				</Field>
 				<Field>
 					<FieldLabel>{t('Enter_Behaviour')}</FieldLabel>
 					<FieldRow>
-						<Controller
-							name='sendOnEnter'
-							control={control}
-							render={({ field: { value, onChange } }) => <Select value={value} onChange={onChange} options={sendOnEnterOptions} />}
-						/>
+						<Controller name='sendOnEnter' control={control} render={({ field }) => <Select {...field} options={sendOnEnterOptions} />} />
 					</FieldRow>
 					<FieldHint>{t('Enter_Behaviour_Description')}</FieldHint>
 				</Field>

From 9ce8d345fac7d469eeae4d93759126b486b78aa4 Mon Sep 17 00:00:00 2001
From: Douglas Fabris <devfabris@gmail.com>
Date: Wed, 1 Apr 2026 10:07:25 -0300
Subject: [PATCH 24/27] fix: refactor Controller rendering in AccessibilityPage
 for improved field handling

---
 .../accessibility/AccessibilityPage.tsx       | 25 +++++++------------
 1 file changed, 9 insertions(+), 16 deletions(-)

diff --git a/apps/meteor/client/views/account/accessibility/AccessibilityPage.tsx b/apps/meteor/client/views/account/accessibility/AccessibilityPage.tsx
index dcd36503dce1e..2719d0204cbe0 100644
--- a/apps/meteor/client/views/account/accessibility/AccessibilityPage.tsx
+++ b/apps/meteor/client/views/account/accessibility/AccessibilityPage.tsx
@@ -45,7 +45,6 @@ const AccessibilityPage = () => {
 	);
 
 	const pageFormId = useId();
-
 	const linkListId = useId();
 
 	const {
@@ -111,8 +110,8 @@ const AccessibilityPage = () => {
 											<Controller
 												control={control}
 												name='themeAppearence'
-												render={({ field: { onChange, value, ref } }) => (
-													<RadioButton id={id} ref={ref} onChange={() => onChange(id)} checked={value === id} />
+												render={({ field: { value, onChange, ...field } }) => (
+													<RadioButton id={id} {...field} onChange={() => onChange(id)} checked={value === id} />
 												)}
 											/>
 										</FieldRow>
@@ -131,11 +130,7 @@ const AccessibilityPage = () => {
 								<Field>
 									<FieldLabel mbe={12}>{t('Font_size')}</FieldLabel>
 									<FieldRow>
-										<Controller
-											control={control}
-											name='fontSize'
-											render={({ field: { onChange, value } }) => <Select value={value} onChange={onChange} options={fontSizes(t)} />}
-										/>
+										<Controller control={control} name='fontSize' render={({ field }) => <Select {...field} options={fontSizes(t)} />} />
 									</FieldRow>
 									<FieldDescription mb={12}>{t('Adjustable_font_size_description')}</FieldDescription>
 								</Field>
@@ -145,7 +140,7 @@ const AccessibilityPage = () => {
 										<Controller
 											control={control}
 											name='mentionsWithSymbol'
-											render={({ field: { onChange, value, ref } }) => <ToggleSwitch ref={ref} checked={value} onChange={onChange} />}
+											render={({ field: { value, ...field } }) => <ToggleSwitch {...field} checked={value} />}
 										/>
 									</FieldRow>
 									<FieldDescription
@@ -163,9 +158,7 @@ const AccessibilityPage = () => {
 										<Controller
 											name='clockMode'
 											control={control}
-											render={({ field: { value, onChange } }) => (
-												<Select value={`${value}`} onChange={onChange} options={timeFormatOptions} />
-											)}
+											render={({ field: { value, ...field } }) => <Select {...field} value={`${value}`} options={timeFormatOptions} />}
 										/>
 									</FieldRow>
 								</Field>
@@ -175,8 +168,8 @@ const AccessibilityPage = () => {
 										<Controller
 											name='hideUsernames'
 											control={control}
-											render={({ field: { value, onChange, ref } }) => (
-												<ToggleSwitch ref={ref} checked={!value} onChange={(e) => onChange(!(e.target as HTMLInputElement).checked)} />
+											render={({ field: { value, onChange, ...field } }) => (
+												<ToggleSwitch {...field} checked={!value} onChange={(e) => onChange(!(e.target as HTMLInputElement).checked)} />
 											)}
 										/>
 									</FieldRow>
@@ -189,8 +182,8 @@ const AccessibilityPage = () => {
 											<Controller
 												name='hideRoles'
 												control={control}
-												render={({ field: { value, onChange, ref } }) => (
-													<ToggleSwitch ref={ref} checked={!value} onChange={(e) => onChange(!(e.target as HTMLInputElement).checked)} />
+												render={({ field: { value, onChange, ...field } }) => (
+													<ToggleSwitch {...field} checked={!value} onChange={(e) => onChange(!(e.target as HTMLInputElement).checked)} />
 												)}
 											/>
 										</FieldRow>

From 130ea23af083463b94af7f6f446fd5403cfd3f5d Mon Sep 17 00:00:00 2001
From: Douglas Fabris <devfabris@gmail.com>
Date: Wed, 1 Apr 2026 10:14:19 -0300
Subject: [PATCH 25/27] fix: simplify Controller rendering in
 PreferencesNotificationsSection for improved field handling

---
 .../PreferencesNotificationsSection.tsx        | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/apps/meteor/client/views/account/preferences/PreferencesNotificationsSection.tsx b/apps/meteor/client/views/account/preferences/PreferencesNotificationsSection.tsx
index 37966397f64d9..4b3ed1b4ae99d 100644
--- a/apps/meteor/client/views/account/preferences/PreferencesNotificationsSection.tsx
+++ b/apps/meteor/client/views/account/preferences/PreferencesNotificationsSection.tsx
@@ -116,7 +116,7 @@ const PreferencesNotificationsSection = () => {
 						<Controller
 							name='desktopNotificationRequireInteraction'
 							control={control}
-							render={({ field: { ref, value, onChange } }) => <ToggleSwitch ref={ref} checked={value} onChange={onChange} />}
+							render={({ field: { value, ...field } }) => <ToggleSwitch {...field} checked={value} />}
 						/>
 					</FieldRow>
 					<FieldHint>{t('Only_works_with_chrome_version_greater_50')}</FieldHint>
@@ -127,7 +127,7 @@ const PreferencesNotificationsSection = () => {
 						<Controller
 							name='desktopNotifications'
 							control={control}
-							render={({ field: { value, onChange } }) => <Select value={value} onChange={onChange} options={desktopNotificationOptions} />}
+							render={({ field }) => <Select {...field} options={desktopNotificationOptions} />}
 						/>
 					</FieldRow>
 				</Field>
@@ -137,7 +137,7 @@ const PreferencesNotificationsSection = () => {
 						<Controller
 							name='desktopNotificationVoiceCalls'
 							control={control}
-							render={({ field: { ref, value, onChange } }) => <ToggleSwitch ref={ref} checked={value} onChange={onChange} />}
+							render={({ field: { value, ...field } }) => <ToggleSwitch {...field} checked={value} />}
 						/>
 					</FieldRow>
 				</Field>
@@ -147,7 +147,7 @@ const PreferencesNotificationsSection = () => {
 						<Controller
 							name='pushNotifications'
 							control={control}
-							render={({ field: { value, onChange } }) => <Select value={value} onChange={onChange} options={mobileNotificationOptions} />}
+							render={({ field }) => <Select {...field} options={mobileNotificationOptions} />}
 						/>
 					</FieldRow>
 				</Field>
@@ -157,9 +157,7 @@ const PreferencesNotificationsSection = () => {
 						<Controller
 							name='emailNotificationMode'
 							control={control}
-							render={({ field: { value, onChange } }) => (
-								<Select disabled={!canChangeEmailNotification} value={value} onChange={onChange} options={emailNotificationOptions} />
-							)}
+							render={({ field }) => <Select disabled={!canChangeEmailNotification} {...field} options={emailNotificationOptions} />}
 						/>
 					</FieldRow>
 					<FieldHint>
@@ -174,7 +172,7 @@ const PreferencesNotificationsSection = () => {
 							<Controller
 								name='receiveLoginDetectionEmail'
 								control={control}
-								render={({ field: { ref, value, onChange } }) => <ToggleSwitch ref={ref} checked={value} onChange={onChange} />}
+								render={({ field: { value, ...field } }) => <ToggleSwitch {...field} checked={value} />}
 							/>
 						</FieldRow>
 						<FieldHint>{t('Receive_Login_Detection_Emails_Description')}</FieldHint>
@@ -187,7 +185,7 @@ const PreferencesNotificationsSection = () => {
 							<Controller
 								name='notifyCalendarEvents'
 								control={control}
-								render={({ field: { ref, value, onChange } }) => <ToggleSwitch ref={ref} checked={value} onChange={onChange} />}
+								render={({ field: { value, ...field } }) => <ToggleSwitch {...field} checked={value} />}
 							/>
 						</FieldRow>
 					</Field>
@@ -199,7 +197,7 @@ const PreferencesNotificationsSection = () => {
 							<Controller
 								name='enableMobileRinging'
 								control={control}
-								render={({ field: { ref, value, onChange } }) => <ToggleSwitch ref={ref} checked={value} onChange={onChange} />}
+								render={({ field: { value, ...field } }) => <ToggleSwitch {...field} checked={value} />}
 							/>
 						</FieldRow>
 					</Field>

From c227a012dd73a354700b0f9fc061f1b7c35ff93e Mon Sep 17 00:00:00 2001
From: Douglas Fabris <devfabris@gmail.com>
Date: Wed, 1 Apr 2026 10:14:26 -0300
Subject: [PATCH 26/27] fix: streamline Controller rendering in
 PreferencesSoundSection for improved field handling

---
 .../preferences/PreferencesSoundSection.tsx   | 28 ++++++++-----------
 1 file changed, 12 insertions(+), 16 deletions(-)

diff --git a/apps/meteor/client/views/account/preferences/PreferencesSoundSection.tsx b/apps/meteor/client/views/account/preferences/PreferencesSoundSection.tsx
index a86976ba5db88..826051d2b5489 100644
--- a/apps/meteor/client/views/account/preferences/PreferencesSoundSection.tsx
+++ b/apps/meteor/client/views/account/preferences/PreferencesSoundSection.tsx
@@ -26,11 +26,7 @@ const PreferencesSoundSection = () => {
 					<FieldLabel>{t('Master_volume')}</FieldLabel>
 					<FieldHint mbe={4}>{t('Master_volume_hint')}</FieldHint>
 					<FieldRow>
-						<Controller
-							name='masterVolume'
-							control={control}
-							render={({ field: { onChange, value } }) => <Slider value={value} minValue={0} maxValue={100} onChange={onChange} />}
-						/>
+						<Controller name='masterVolume' control={control} render={({ field }) => <Slider {...field} minValue={0} maxValue={100} />} />
 					</FieldRow>
 				</Field>
 				<Field>
@@ -40,12 +36,12 @@ const PreferencesSoundSection = () => {
 						<Controller
 							name='notificationsSoundVolume'
 							control={control}
-							render={({ field: { onChange, value } }) => (
+							render={({ field: { onChange, ...field } }) => (
 								<Slider
-									value={value}
+									{...field}
 									minValue={0}
 									maxValue={100}
-									onChange={(value) => {
+									onChange={(value: number) => {
 										const soundVolume = (notificationsSoundVolume * masterVolume) / 100;
 										customSound.play(newMessageNotification, { volume: soundVolume / 100 });
 										onChange(value);
@@ -62,12 +58,12 @@ const PreferencesSoundSection = () => {
 						<Controller
 							name='voipRingerVolume'
 							control={control}
-							render={({ field: { onChange, value } }) => (
+							render={({ field: { onChange, ...field } }) => (
 								<Slider
-									value={value}
+									{...field}
 									minValue={0}
 									maxValue={100}
-									onChange={(value) => {
+									onChange={(value: number) => {
 										const soundVolume = (voipRingerVolume * masterVolume) / 100;
 										customSound.play('telephone', { volume: soundVolume / 100 });
 										onChange(value);
@@ -83,9 +79,9 @@ const PreferencesSoundSection = () => {
 						<Controller
 							name='newRoomNotification'
 							control={control}
-							render={({ field: { value, onChange } }) => (
+							render={({ field: { onChange, ...field } }) => (
 								<Select
-									value={value}
+									{...field}
 									options={soundsList}
 									onChange={(value) => {
 										onChange(value);
@@ -102,9 +98,9 @@ const PreferencesSoundSection = () => {
 						<Controller
 							name='newMessageNotification'
 							control={control}
-							render={({ field: { value, onChange } }) => (
+							render={({ field: { onChange, ...field } }) => (
 								<Select
-									value={value}
+									{...field}
 									options={soundsList}
 									onChange={(value) => {
 										onChange(value);
@@ -121,7 +117,7 @@ const PreferencesSoundSection = () => {
 						<Controller
 							name='muteFocusedConversations'
 							control={control}
-							render={({ field: { ref, value, onChange } }) => <ToggleSwitch ref={ref} checked={value} onChange={onChange} />}
+							render={({ field: { value, ...field } }) => <ToggleSwitch {...field} checked={value} />}
 						/>
 					</FieldRow>
 				</Field>

From 41822eef066144d13b75d0876c4b22b2687ca09a Mon Sep 17 00:00:00 2001
From: Douglas Fabris <devfabris@gmail.com>
Date: Wed, 1 Apr 2026 10:15:31 -0300
Subject: [PATCH 27/27] fix: streamline Controller rendering in
 PreferencesUserPresenceSection for improved field handling

---
 .../account/preferences/PreferencesUserPresenceSection.tsx    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/meteor/client/views/account/preferences/PreferencesUserPresenceSection.tsx b/apps/meteor/client/views/account/preferences/PreferencesUserPresenceSection.tsx
index f6fb4d7988b7f..c9bc4df15b13a 100644
--- a/apps/meteor/client/views/account/preferences/PreferencesUserPresenceSection.tsx
+++ b/apps/meteor/client/views/account/preferences/PreferencesUserPresenceSection.tsx
@@ -16,7 +16,7 @@ const PreferencesUserPresenceSection = () => {
 						<Controller
 							name='enableAutoAway'
 							control={control}
-							render={({ field: { ref, value, onChange } }) => <ToggleSwitch ref={ref} checked={value} onChange={onChange} />}
+							render={({ field: { value, ...field } }) => <ToggleSwitch {...field} checked={value} />}
 						/>
 					</FieldRow>
 				</Field>
@@ -26,7 +26,7 @@ const PreferencesUserPresenceSection = () => {
 						<Controller
 							name='idleTimeLimit'
 							control={control}
-							render={({ field: { ref, value, onChange } }) => <NumberInput ref={ref} value={value} onChange={onChange} />}
+							render={({ field: { value, ...field } }) => <NumberInput {...field} value={value} />}
 						/>
 					</FieldRow>
 				</Field>