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

apps/meteor/client/navbar/NavBarPagesGroup/hooks/useViewModeItems.tsx

@@ -0,0 +1,57 @@
+import { RadioButton, ToggleSwitch } from '@rocket.chat/fuselage';
+import type { GenericMenuItemProps } from '@rocket.chat/ui-client';
+import { useEndpoint, useUserPreference } from '@rocket.chat/ui-contexts';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export const useViewModeItems = (): GenericMenuItemProps[] => {
+	const { t } = useTranslation();
+
+	const saveUserPreferences = useEndpoint('POST', '/v1/users.setPreferences');
+
+	const useHandleChange = (value: 'medium' | 'extended' | 'condensed'): (() => void) =>
+		useCallback(() => saveUserPreferences({ data: { sidebarViewMode: value } }), [value]);
+
+	const sidebarViewMode = useUserPreference<'medium' | 'extended' | 'condensed'>('sidebarViewMode', 'extended');
+	const sidebarDisplayAvatar = useUserPreference('sidebarDisplayAvatar', false);
+
+	const setToExtended = useHandleChange('extended');
+	const setToMedium = useHandleChange('medium');
+	const setToCondensed = useHandleChange('condensed');
+
+	const handleChangeSidebarDisplayAvatar = useCallback(
+		() => saveUserPreferences({ data: { sidebarDisplayAvatar: !sidebarDisplayAvatar } }),
+		[saveUserPreferences, sidebarDisplayAvatar],
+	);
+
+	return [
+		{
+			id: 'extended',
+			content: t('Extended'),
+			icon: 'extended-view',
+			onClick: setToExtended,
+			addon: <RadioButton checked={sidebarViewMode === 'extended'} onChange={() => undefined} />,
+		},
+		{
+			id: 'medium',
+			content: t('Medium'),
+			icon: 'medium-view',
+			onClick: setToMedium,
+			addon: <RadioButton checked={sidebarViewMode === 'medium'} onChange={() => undefined} />,
+		},
+		{
+			id: 'condensed',
+			content: t('Condensed'),
+			icon: 'condensed-view',
+			onClick: setToCondensed,
+			addon: <RadioButton checked={sidebarViewMode === 'condensed'} onChange={() => undefined} />,
+		},
+		{
+			id: 'avatars',
+			content: t('Avatars'),
+			icon: 'user-rounded',
+			onClick: handleChangeSidebarDisplayAvatar,
+			addon: <ToggleSwitch checked={sidebarDisplayAvatar} onChange={() => undefined} />,
+		},
+	];
+};