feat(app): let Windows users switch back to Fluxer Sans (#3365)

fluxer_app/src/features/user/components/modals/tabs/AdvancedSettingDirectControls.tsx

@@ -15,6 +15,7 @@ import {
 	KeepNekoStillControl,
 	ShowNekoControl,
 	VoiceChannelJoinBehaviorControl,
+	WindowsFluxerSansControl,
 } from '@app/features/user/components/modals/tabs/advanced_settings_tab/AdvancedAppearanceControls';
 import {
 	AutoSendGifsControl,
@@ -61,6 +62,7 @@ import type {SearchableSettingItem} from '@app/features/user/components/settings
 import {observer} from 'mobx-react-lite';
 
 export const DIRECT_CONTROL_ITEM_IDS = new Set([
+	'advanced-windows-fluxer-sans',
 	'accessibility-text-selection',
 	'accessibility-video-seek-thumbnails',
 	'accessibility-smooth-scrolling',
@@ -112,6 +114,7 @@ export const FULL_WIDTH_CONTROL_ITEM_IDS = new Set([
 ]);
 
 export const COMPACT_SWITCH_CONTROL_ITEM_IDS = new Set([
+	'advanced-windows-fluxer-sans',
 	'accessibility-text-selection',
 	'accessibility-video-seek-thumbnails',
 	'accessibility-smooth-scrolling',
@@ -148,6 +151,10 @@ export const COMPACT_SWITCH_CONTROL_ITEM_IDS = new Set([
 
 export const AdvancedSettingControl = observer(({item}: {item: SearchableSettingItem}) => {
 	switch (item.id) {
+		case 'advanced-windows-fluxer-sans':
+			return (
+				<WindowsFluxerSansControl data-flx="user.advanced-setting-direct-controls.advanced-setting-control.windows-fluxer-sans-control" />
+			);
 		case 'accessibility-text-selection':
 			return (
 				<TextSelectionControl data-flx="user.advanced-setting-direct-controls.advanced-setting-control.text-selection-control" />

fluxer_app/src/features/user/components/modals/tabs/advanced_settings_tab/AdvancedAppearanceControls.tsx

@@ -3,6 +3,7 @@
 import * as AccessibilityCommands from '@app/features/accessibility/commands/AccessibilityCommands';
 import Accessibility from '@app/features/accessibility/state/Accessibility';
 import HiddenGuildListButtons from '@app/features/guild/state/HiddenGuildListButtons';
+import WindowsFont from '@app/features/theme/state/WindowsFont';
 import {Switch} from '@app/features/ui/components/form/FormSwitch';
 import {SwitchGroup, SwitchGroupItem} from '@app/features/ui/components/SwitchGroup';
 import {
@@ -12,6 +13,7 @@ import {
 	SHOW_DOWNLOAD_BUTTON_DESCRIPTOR,
 	SHOW_HELP_CENTER_BUTTON_DESCRIPTOR,
 	SHOW_NEKO_DESCRIPTOR,
+	USE_FLUXER_SANS_ON_WINDOWS_DESCRIPTOR,
 } from '@app/features/user/components/settings_utils/section_registry/SharedDescriptors';
 import {msg} from '@lingui/core/macro';
 import {useLingui} from '@lingui/react/macro';
@@ -26,6 +28,19 @@ const CONFIRM_BEFORE_JOINING_VOICE_CHANNELS_DESCRIPTOR = msg({
 	comment: 'Short label for an advanced voice-channel safety preference.',
 });
 
+export const WindowsFluxerSansControl = observer(() => {
+	const {i18n} = useLingui();
+	return (
+		<Switch
+			ariaLabel={i18n._(USE_FLUXER_SANS_ON_WINDOWS_DESCRIPTOR)}
+			value={WindowsFont.useFluxerSans}
+			onChange={WindowsFont.setUseFluxerSans}
+			compact
+			data-flx="user.advanced-settings-tab.switch.windows-fluxer-sans"
+		/>
+	);
+});
+
 export const ShowNekoControl = observer(() => {
 	const {i18n} = useLingui();
 	return (

fluxer_app/src/features/user/components/modals/tabs/advanced_settings_tab/AdvancedSettingRow.tsx

@@ -9,7 +9,10 @@ import {
 	FULL_WIDTH_CONTROL_ITEM_IDS,
 } from '@app/features/user/components/modals/tabs/AdvancedSettingDirectControls';
 import styles from '@app/features/user/components/modals/tabs/AdvancedSettingsTab.module.css';
-import {getAdvancedSettingSourceTab} from '@app/features/user/components/modals/tabs/advanced_settings_tab/AdvancedSettingsItemUtils';
+import {
+	getAdvancedSettingRowElementId,
+	getAdvancedSettingSourceTab,
+} from '@app/features/user/components/modals/tabs/advanced_settings_tab/AdvancedSettingsItemUtils';
 import type {SearchableSettingItem} from '@app/features/user/components/settings_utils/SettingsSectionRegistry';
 import {SettingsItemStatusBadges} from '@app/features/user/components/settings_utils/SettingsStatusBadge';
 import {msg} from '@lingui/core/macro';
@@ -50,6 +53,7 @@ export const AdvancedSettingRow = observer(
 		return (
 			<div
 				ref={rowRef}
+				id={getAdvancedSettingRowElementId(item.id)}
 				className={clsx(styles.settingRow, hasFullWidthControl && styles.settingRowFullWidth)}
 				data-flx="user.advanced-settings-tab.setting-row"
 			>

fluxer_app/src/features/user/components/modals/tabs/advanced_settings_tab/AdvancedSettingsItemUtils.ts

@@ -13,3 +13,7 @@ export function getAdvancedSettingSourceTab(item: SearchableSettingItem): UserSe
 export function getAdvancedSettingSourceSection(item: SearchableSettingItem): UserSettingsSubtabType | undefined {
 	return (item.sourceSectionId ?? item.sectionId) as UserSettingsSubtabType | undefined;
 }
+
+export function getAdvancedSettingRowElementId(itemId: string): string {
+	return `advanced-setting-${itemId}`;
+}

fluxer_app/src/features/user/components/settings_utils/search_index/AdvancedSettingsIndex.ts

@@ -1,6 +1,11 @@
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
+import {isNativeWindows} from '@app/features/ui/utils/NativeUtils';
 import type {SearchableSettingDescriptor} from '@app/features/user/components/settings_utils/search_index/SearchIndexTypes';
+import {
+	FONTS_DESCRIPTOR,
+	USE_FLUXER_SANS_ON_WINDOWS_DESCRIPTOR,
+} from '@app/features/user/components/settings_utils/section_registry/SharedDescriptors';
 import {msg} from '@lingui/core/macro';
 
 const UNREAD_BADGE_CUSTOMIZATION_DESCRIPTOR = msg({
@@ -53,7 +58,27 @@ const SHOW_A_ONE_CLICK_SHORTCUT_FOR_COPYING_EXPRESSIONS_DESCRIPTOR = msg({
 	comment: 'Settings search entry description. One-line summary of what the setting controls.',
 });
 
+const SEGOE_UI_DESCRIPTOR = msg({
+	message: 'Segoe UI',
+	comment: 'Settings search synonym. Segoe UI is the name of the Windows system font and must not be translated.',
+});
+const SHOW_TEXT_IN_THE_PREVIOUS_FONT_DESCRIPTOR = msg({
+	message: 'Show text in Fluxer Sans, the previous default font, instead of the Windows system font',
+	comment:
+		'Settings search entry description. One-line summary of what the setting controls. Fluxer Sans is a font name and must not be translated.',
+});
+
 export const advancedSettingsIndex: Array<SearchableSettingDescriptor> = [
+	{
+		id: 'advanced-windows-fluxer-sans',
+		tabType: 'advanced_settings',
+		label: USE_FLUXER_SANS_ON_WINDOWS_DESCRIPTOR,
+		keywords: [FONTS_DESCRIPTOR, SEGOE_UI_DESCRIPTOR],
+		description: SHOW_TEXT_IN_THE_PREVIOUS_FONT_DESCRIPTOR,
+		audience: 'advanced',
+		tags: ['appearance'],
+		isVisible: () => isNativeWindows(),
+	},
 	{
 		id: 'advanced-unread-badge-customization',
 		tabType: 'advanced_settings',

fluxer_app/src/features/user/components/settings_utils/section_registry/SharedDescriptors.ts

@@ -51,6 +51,11 @@ export const SHOW_NEKO_DESCRIPTOR = msg({
 	message: 'Show Neko',
 	comment: 'Toggle label and settings search entry for showing the Neko sprite that chases the cursor.',
 });
+export const USE_FLUXER_SANS_ON_WINDOWS_DESCRIPTOR = msg({
+	message: 'Use Fluxer Sans on Windows',
+	comment:
+		'Toggle label and settings search entry for showing app text in the Fluxer Sans font instead of the Windows system font. Fluxer Sans is a font name and must not be translated.',
+});
 export const KEEP_NEKO_STILL_DESCRIPTOR = msg({
 	message: 'Keep Neko still',
 	comment: 'Toggle label and settings search entry for stopping the Neko sprite from chasing the cursor.',