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

apps/meteor/client/views/room/contextualBar/NotificationPreferences/components/NotificationByDevice.tsx

@@ -0,0 +1,27 @@
+import { Box, AccordionItem, Icon, FieldGroup } from '@rocket.chat/fuselage';
+import type { Keys as IconName } from '@rocket.chat/icons';
+import type { ReactNode } from 'react';
+import { memo } from 'react';
+
+export type NotificationByDeviceProps = {
+	device: string;
+	icon: IconName;
+	children: ReactNode;
+};
+
+const NotificationByDevice = ({ device, icon, children }: NotificationByDeviceProps) => (
+	<AccordionItem
+		title={
+			<Box display='flex' alignItems='center'>
+				<Icon name={icon} size='x18' />
+				<Box fontScale='p2m' marginInline={16}>
+					{device}
+				</Box>
+			</Box>
+		}
+	>
+		<FieldGroup>{children}</FieldGroup>
+	</AccordionItem>
+);
+
+export default memo(NotificationByDevice);

apps/meteor/client/views/room/contextualBar/NotificationPreferences/components/NotificationPreference.tsx

@@ -0,0 +1,24 @@
+import type { SelectOption } from '@rocket.chat/fuselage';
+import { Field, FieldLabel, FieldRow, Select } from '@rocket.chat/fuselage';
+import type { ReactNode } from 'react';
+
+export type NotificationPreferenceProps = {
+	id: string;
+	name: string;
+	options: SelectOption[];
+	onChange: (e: unknown) => void;
+	optionValue: string;
+	children?: ReactNode;
+};
+
+const NotificationPreference = ({ name, options, onChange, optionValue, children, ...props }: NotificationPreferenceProps) => (
+	<Field {...props}>
+		<FieldLabel>{name}</FieldLabel>
+		<FieldRow>
+			<Select onChange={onChange} options={options} value={optionValue} />
+			{children}
+		</FieldRow>
+	</Field>
+);
+
+export default NotificationPreference;

apps/meteor/client/views/room/contextualBar/NotificationPreferences/components/NotificationToggle.tsx

@@ -0,0 +1,27 @@
+import { Field, FieldLabel, FieldDescription, FieldGroup, ToggleSwitch, FieldRow } from '@rocket.chat/fuselage';
+import type { ComponentProps } from 'react';
+import { memo, useId } from 'react';
+
+export type NotificationToggleProps = {
+	label: string;
+	description?: string;
+	onChange: (e: unknown) => void;
+} & ComponentProps<typeof ToggleSwitch>;
+
+const NotificationToggle = ({ label, description, onChange, ...props }: NotificationToggleProps) => {
+	const fieldId = useId();
+
+	return (
+		<FieldGroup>
+			<Field>
+				<FieldRow>
+					<FieldLabel htmlFor={fieldId}>{label}</FieldLabel>
+					<ToggleSwitch id={fieldId} aria-describedby={`${fieldId}-hint`} onChange={onChange} {...props} />
+				</FieldRow>
+				{description && <FieldDescription id={`${fieldId}-hint`}>{description}</FieldDescription>}
+			</Field>
+		</FieldGroup>
+	);
+};
+
+export default memo(NotificationToggle);