Add Language Switcher

src/components/language-picker.tsx

@@ -0,0 +1,51 @@
+import { SelectControl } from '@wordpress/components';
+import { useState } from 'react';
+import { getIpcApi } from '../lib/get-ipc-api';
+
+// TODO: use supportedLocales from locale.ts
+export const supportedLocales = {
+	ar: 'العربية',
+	de: 'Deutsch',
+	en: 'English',
+	es: 'Español',
+	fr: 'Français',
+	he: 'עברית',
+	id: 'Bahasa Indonesia',
+	it: 'Italiano',
+	ja: '日本語',
+	ko: '한국어',
+	nl: 'Nederlands',
+	pl: 'Polski',
+	'pt-br': 'Português (Brasil)',
+	ru: 'Русский',
+	sv: 'Svenska',
+	tr: 'Türkçe',
+	'zh-cn': '简体中文',
+	'zh-tw': '繁體中文',
+};
+
+export const LanguagePicker = () => {
+	const [ locale, setLocale ] = useState( '' );
+
+	const handleLocaleChange = ( value: string ) => {
+		console.log( `Switching to locale: ${ value }` );
+		setLocale( value );
+
+		// Save locale string to saveUserLocale
+		getIpcApi().saveUserLocale( value );
+	};
+
+	return (
+		<div className="flex gap-5 flex-col">
+			<h2 className="a8c-subtitle-small">Language</h2>
+			<SelectControl
+				value={ locale || 'en' }
+				onChange={ handleLocaleChange }
+				options={ Object.entries( supportedLocales ).map( ( [ locale, name ] ) => ( {
+					value: locale,
+					label: name as string,
+				} ) ) }
+			/>
+		</div>
+	);
+};

src/components/tests/user-settings.test.tsx

@@ -20,6 +20,13 @@ describe( 'UserSettings', () => {
 				callback();
 			}
 		} );
+
+		// Mock window.matchMedia
+		window.matchMedia = jest.fn().mockReturnValue( {
+			matches: false,
+			addListener: jest.fn(),
+			removeListener: jest.fn(),
+		} );
 	} );
 
 	it( 'logs in when not authenticated', async () => {

src/components/user-settings.tsx

@@ -14,6 +14,7 @@ import { cx } from '../lib/cx';
 import { getIpcApi } from '../lib/get-ipc-api';
 import Button from './button';
 import { Gravatar } from './gravatar';
+import { LanguagePicker } from './language-picker';
 import Modal from './modal';
 import offlineIcon from './offline-icon';
 import ProgressBar from './progress-bar';
@@ -196,6 +197,7 @@ export default function UserSettings() {
 						<div className="gap-6 flex flex-col">
 							<UserInfo onLogout={ logout } user={ user } />
 							<div className="border border-[#F0F0F0] w-full"></div>
+							<LanguagePicker />
 							<SnapshotInfo
 								isDeleting={ loadingDeletingAllSnapshots }
 								isDisabled={

src/ipc-handlers.ts

@@ -542,6 +542,14 @@ export async function saveOnboarding(
 	} );
 }
 
+export async function saveUserLocale( _event: IpcMainInvokeEvent, userLocale: string ) {
+	const userData = await loadUserData();
+	await saveUserData( {
+		...userData,
+		userLocale,
+	} );
+}
+
 export async function getThumbnailData( _event: IpcMainInvokeEvent, id: string ) {
 	const path = getSiteThumbnailPath( id );
 	return getImageData( path );

src/lib/locale.ts

@@ -5,6 +5,27 @@ import type { LocaleData } from '@wordpress/i18n';
 
 export const DEFAULT_LOCALE = 'en';
 
+export const namedLocales = {
+	ar: 'العربية',
+	de: 'Deutsch',
+	en: 'English',
+	es: 'Español',
+	fr: 'Français',
+	he: 'עברית',
+	id: 'Bahasa Indonesia',
+	it: 'Italiano',
+	ja: '日本語',
+	ko: '한국어',
+	nl: 'Nederlands',
+	pl: 'Polski',
+	'pt-br': 'Português (Brasil)',
+	ru: 'Русский',
+	sv: 'Svenska',
+	tr: 'Türkçe',
+	'zh-cn': '简体中文',
+	'zh-tw': '繁體中文',
+};
+
 const supportedLocales = [
 	'ar',
 	'de',

src/preload.ts

@@ -39,6 +39,7 @@ const api: IpcApi = {
 	getOnboardingData: () => ipcRenderer.invoke( 'getOnboardingData' ),
 	saveOnboarding: ( onboardingCompleted: boolean ) =>
 		ipcRenderer.invoke( 'saveOnboarding', onboardingCompleted ),
+	saveUserLocale: ( locale: string ) => ipcRenderer.invoke( 'saveUserLocale', locale ),
 	openTerminalAtPath: ( targetPath: string ) =>
 		ipcRenderer.invoke( 'openTerminalAtPath', targetPath ),
 	showMessageBox: ( options: Electron.MessageBoxOptions ) =>

src/storage/storage-types.ts

@@ -6,6 +6,7 @@ export interface UserData {
 	devToolsOpen?: boolean;
 	authToken?: StoredToken;
 	onboardingCompleted?: boolean;
+	userLocale?: string;
 	lastBumpStats?: {
 		[ group: string ]: {
 			[ stat: string ]: number;