User Settings: Add Shell selector dropdown to the Preferences tab

src/components/terminal-picker.tsx

@@ -0,0 +1,57 @@
+import { SelectControl } from '@wordpress/components';
+import { useI18n } from '@wordpress/react-i18n';
+import { useEffect, useState } from 'react';
+import { SupportedTerminal, supportedTerminalNames } from 'src/lib/terminal';
+
+interface TerminalPickerProps {
+	value: SupportedTerminal;
+	onChange: ( value: SupportedTerminal ) => void;
+}
+
+export const TerminalPicker = ( { value, onChange }: TerminalPickerProps ) => {
+	const { __ } = useI18n();
+	const [ installedTerminals, setInstalledTerminals ] = useState< {
+		iterm: boolean | null;
+		terminal: boolean | null;
+	} >( {
+		iterm: null,
+		terminal: null,
+	} );
+
+	useEffect( () => {
+		const fetchInstalledTerminals = async () => {
+			try {
+				const terminals = { iterm: true, terminal: true }; // TODO:: Fetch installed terminals from the API
+				setInstalledTerminals( terminals );
+			} catch ( error ) {
+				console.error( 'Failed to fetch installed terminals:', error );
+			}
+		};
+
+		fetchInstalledTerminals();
+	}, [] );
+
+	const options = Object.entries( supportedTerminalNames ).map( ( [ terminal, label ] ) => {
+		const terminalKey = terminal as SupportedTerminal;
+		const isInstalled = installedTerminals[ terminalKey as keyof typeof installedTerminals ];
+
+		return {
+			value: terminalKey,
+			label,
+			disabled: ! isInstalled,
+		};
+	} );
+
+	return (
+		<div className="flex gap-5 flex-col">
+			<h2 className="a8c-subtitle-small">{ __( 'Shell' ) }</h2>
+			<SelectControl
+				value={ value }
+				onChange={ onChange }
+				options={ options }
+				__nextHasNoMarginBottom
+				className="mb-2"
+			/>
+		</div>
+	);
+};

src/components/tests/terminal-picker.tsx

@@ -0,0 +1,26 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { TerminalPicker } from 'src/components/terminal-picker';
+
+describe( 'TerminalPicker', () => {
+	const mockOnChange = jest.fn();
+
+	beforeEach( () => {
+		jest.clearAllMocks();
+	} );
+
+	it( 'renders correctly with initial props', () => {
+		render( <TerminalPicker value="terminal" onChange={ mockOnChange } /> );
+
+		expect( screen.getByText( 'Shell' ) ).toBeVisible();
+		expect( screen.getByRole( 'combobox' ) ).toBeVisible();
+	} );
+
+	it( 'calls onChange when selecting a different terminal', async () => {
+		render( <TerminalPicker value="terminal" onChange={ mockOnChange } /> );
+
+		const select = screen.getByRole( 'combobox' );
+		fireEvent.change( select, { target: { value: 'iterm' } } );
+
+		expect( mockOnChange ).toHaveBeenCalledWith( 'iterm', expect.anything() );
+	} );
+} );

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

@@ -87,6 +87,7 @@ describe( 'UserSettings', () => {
 			fireEvent.click( screen.getByText( 'Preferences' ) );
 			expect( screen.getByText( 'Preferences' ) ).toHaveAttribute( 'aria-selected', 'true' );
 			expect( screen.getByText( 'Language' ) ).toBeVisible();
+			expect( screen.getByText( 'Shell' ) ).toBeVisible();
 
 			// Switch to Usage tab
 			fireEvent.click( screen.getByText( 'Usage' ) );

src/components/user-settings.tsx

@@ -22,8 +22,10 @@ import { useIpcListener } from 'src/hooks/use-ipc-listener';
 import { useOffline } from 'src/hooks/use-offline';
 import { usePromptUsage } from 'src/hooks/use-prompt-usage';
 import { useSnapshots } from 'src/hooks/use-snapshots';
+import { useTerminalData } from 'src/hooks/use-terminal-data';
 import { cx } from 'src/lib/cx';
 import { getIpcApi } from 'src/lib/get-ipc-api';
+import { TerminalPicker } from './terminal-picker';
 
 const UserInfo = ( {
 	user,
@@ -227,24 +229,35 @@ const PreferencesTab = ( { onClose }: { onClose: () => void } ) => {
 	const { editor, handleEditorChange, saveEditorPreference, resetEditor, hasEditorChanges } =
 		useEditorData();
 
+	const {
+		terminal,
+		handleTerminalChange,
+		saveTerminalPreference,
+		resetTerminal,
+		hasTerminalChanges,
+	} = useTerminalData();
+
 	const savePreferences = async () => {
 		setSavedLocale( locale );
 		await saveEditorPreference();
+		await saveTerminalPreference();
 		onClose();
 	};
 
 	const cancelChanges = () => {
 		setLocale( savedLocale );
 		resetEditor();
+		resetTerminal();
 		onClose();
 	};
 
-	const hasChanges = locale !== savedLocale || hasEditorChanges;
+	const hasChanges = locale !== savedLocale || hasEditorChanges || hasTerminalChanges;
 
 	return (
 		<>
 			<LanguagePicker value={ locale } onChange={ setLocale } />
 			<EditorPicker value={ editor } onChange={ handleEditorChange } />
+			<TerminalPicker value={ terminal } onChange={ handleTerminalChange } />
 			<div className="mt-auto pt-6 flex justify-end gap-3">
 				<Button variant="tertiary" onClick={ cancelChanges }>
 					{ __( 'Cancel' ) }

src/hooks/use-terminal-data.ts

@@ -0,0 +1,50 @@
+import { useState, useEffect } from 'react';
+import { SupportedTerminal, DEFAULT_TERMINAL } from 'src/lib/terminal';
+
+/**
+ * Hook to manage terminal preferences
+ */
+export function useTerminalData() {
+	const [ terminal, setTerminal ] = useState< SupportedTerminal >( DEFAULT_TERMINAL );
+	const [ savedTerminalValue, setSavedTerminalValue ] =
+		useState< SupportedTerminal >( DEFAULT_TERMINAL );
+
+	const getSavedTerminal = async () => {
+		// TODO::Get the actual terminal from the IPC API
+		return DEFAULT_TERMINAL;
+	};
+
+	// Load the saved terminal value
+	useEffect( () => {
+		const loadSavedTerminal = async () => {
+			const terminal = await getSavedTerminal();
+			setSavedTerminalValue( terminal );
+			setTerminal( terminal );
+		};
+		loadSavedTerminal();
+	}, [] );
+
+	const handleTerminalChange = ( newTerminal: SupportedTerminal ) => {
+		setTerminal( newTerminal );
+	};
+
+	const saveTerminalPreference = async () => {
+		//TODO:: Save the terminal preference to the IPC API
+		alert( terminal );
+	};
+
+	const resetTerminal = () => {
+		setTerminal( savedTerminalValue );
+	};
+
+	const hasTerminalChanges = terminal !== savedTerminalValue;
+
+	return {
+		terminal,
+		savedTerminalValue,
+		handleTerminalChange,
+		saveTerminalPreference,
+		resetTerminal,
+		hasTerminalChanges,
+	};
+}

src/lib/terminal.ts

@@ -0,0 +1,8 @@
+export type SupportedTerminal = 'terminal' | 'iterm';
+
+export const supportedTerminalNames: Record< SupportedTerminal, string > = {
+	terminal: 'Terminal',
+	iterm: 'iTerm',
+};
+
+export const DEFAULT_TERMINAL: SupportedTerminal = 'terminal';