settings: Use InputRowRadioButtons for the language picker

This lets us simplify code, and it also gives consistency with our
other radio-button inputs:

- The row's selected value is now shown in the row itself, so you
  don't have to find it by opening the options screen (and scrolling
  down if it's not in the first screenful there).
- The idiosyncratic dividers between language options are removed.

Author: chrisbobbe

src/common/SelectableOptionsScreen.js

@@ -95,8 +95,8 @@ export default function SelectableOptionsScreen<TItemKey: string | number>(
       ? items
       : items.filter(item => {
           // TODO: Is this the best way to filter? Where `title` and
-          //   `subtitle` are present, behavior is matched to the language
-          //   picker.
+          //   `subtitle` are present, behavior is matched to an old
+          //   implementation of the language picker.
 
           /* eslint-disable prefer-template */
           const itemData =

src/nav/AppNavigator.js

@@ -31,7 +31,6 @@ import PmConversationDetailsScreen from '../chat/PmConversationDetailsScreen';
 import SearchMessagesScreen from '../search/SearchMessagesScreen';
 import New1to1PmScreen from '../user-picker/New1to1PmScreen';
 import ChatScreen from '../chat/ChatScreen';
-import LanguageScreen from '../settings/LanguageScreen';
 import PasswordAuthScreen from '../start/PasswordAuthScreen';
 import LightboxScreen from '../lightbox/LightboxScreen';
 import NewGroupPmScreen from '../user-picker/NewGroupPmScreen';
@@ -67,7 +66,6 @@ export type AppNavigatorParamList = {|
   +'realm-input': RouteParamsOf<typeof RealmInputScreen>,
   +'search-messages': RouteParamsOf<typeof SearchMessagesScreen>,
   +'new-1to1-pm': RouteParamsOf<typeof New1to1PmScreen>,
-  +language: RouteParamsOf<typeof LanguageScreen>,
   +lightbox: RouteParamsOf<typeof LightboxScreen>,
   +'new-group-pm': RouteParamsOf<typeof NewGroupPmScreen>,
   +'invite-users': RouteParamsOf<typeof InviteUsersScreen>,
@@ -171,7 +169,6 @@ export default function AppNavigator(props: Props): Node {
         component={useHaveServerDataGate(SearchMessagesScreen)}
       />
       <Stack.Screen name="new-1to1-pm" component={useHaveServerDataGate(New1to1PmScreen)} />
-      <Stack.Screen name="language" component={useHaveServerDataGate(LanguageScreen)} />
       <Stack.Screen name="lightbox" component={useHaveServerDataGate(LightboxScreen)} />
       <Stack.Screen name="new-group-pm" component={useHaveServerDataGate(NewGroupPmScreen)} />
       <Stack.Screen name="invite-users" component={useHaveServerDataGate(InviteUsersScreen)} />

src/settings/LanguagePicker.js

@@ -31,6 +31,7 @@ import { showErrorAlert } from '../utils/info';
 import { TranslationContext } from '../boot/TranslationProvider';
 import { useNotificationReportsByIdentityKey } from './NotifTroubleshootingScreen';
 import { keyOfIdentity } from '../account/accountMisc';
+import languages from './languages';
 
 type Props = $ReadOnly<{|
   navigation: AppNavigationProp<'settings'>,
@@ -42,6 +43,7 @@ export default function SettingsScreen(props: Props): Node {
   const browser = useGlobalSelector(state => getGlobalSettings(state).browser);
   const globalSettings = useGlobalSelector(getGlobalSettings);
   const markMessagesReadOnScroll = globalSettings.markMessagesReadOnScroll;
+  const language = useGlobalSelector(state => getGlobalSettings(state).language);
 
   const zulipVersion = useSelector(getServerVersion);
   const identity = useSelector(getIdentity);
@@ -99,12 +101,20 @@ export default function SettingsScreen(props: Props): Node {
           navigation.push('notifications');
         }}
       />
-      <NestedNavRow
+      <InputRowRadioButtons
         icon={{ Component: IconLanguage }}
-        title="Language"
-        onPress={() => {
-          navigation.push('language');
+        navigation={navigation}
+        label="Language"
+        valueKey={language}
+        items={languages.map(l => ({
+          key: l.tag,
+          title: { text: '{_}', values: { _: l.selfname } },
+          subtitle: { text: '{_}', values: { _: l.name } },
+        }))}
+        onValueChange={value => {
+          dispatch(setGlobalSettings({ language: value }));
         }}
+        search
       />
       <NestedNavRow
         icon={{ Component: IconMoreHorizontal }}