settings: Add language setting

PIG208 · PIG208 · commit 67e995ba7333 · 2025-05-16T17:39:39.000-04:00
Since there is no Figma design for the settings page yet, the design is
kept simple while matching zulip-mobile: we show both selfname (in its
own locale) and name (in the ambient locale) of each available language
option, and leave out the search funtionality.

We don't allow unsetting the language once it is set, but that can
easily change.
diff --git a/assets/l10n/app_en.arb b/assets/l10n/app_en.arb
@@ -835,6 +835,10 @@
   "@openLinksWithInAppBrowser": {
     "description": "Label for toggling setting to open links with in-app browser"
   },
+  "languageSettingTitle": "Language",
+  "@languageSettingTitle": {
+    "description": "Title for language setting."
+  },
   "languageEn": "English",
   "@languageEn": {
     "description": "Label for the English language."
diff --git a/lib/generated/l10n/zulip_localizations.dart b/lib/generated/l10n/zulip_localizations.dart
@@ -1226,6 +1226,12 @@ abstract class ZulipLocalizations {
   /// **'Open links with in-app browser'**
   String get openLinksWithInAppBrowser;
 
+  /// Title for language setting.
+  ///
+  /// In en, this message translates to:
+  /// **'Language'**
+  String get languageSettingTitle;
+
   /// Label for the English language.
   ///
   /// In en, this message translates to:
diff --git a/lib/generated/l10n/zulip_localizations_ar.dart b/lib/generated/l10n/zulip_localizations_ar.dart
@@ -679,6 +679,9 @@ class ZulipLocalizationsAr extends ZulipLocalizations {
   @override
   String get openLinksWithInAppBrowser => 'Open links with in-app browser';
 
+  @override
+  String get languageSettingTitle => 'Language';
+
   @override
   String get languageEn => 'English';
 
diff --git a/lib/generated/l10n/zulip_localizations_en.dart b/lib/generated/l10n/zulip_localizations_en.dart
@@ -679,6 +679,9 @@ class ZulipLocalizationsEn extends ZulipLocalizations {
   @override
   String get openLinksWithInAppBrowser => 'Open links with in-app browser';
 
+  @override
+  String get languageSettingTitle => 'Language';
+
   @override
   String get languageEn => 'English';
 
diff --git a/lib/generated/l10n/zulip_localizations_ja.dart b/lib/generated/l10n/zulip_localizations_ja.dart
@@ -679,6 +679,9 @@ class ZulipLocalizationsJa extends ZulipLocalizations {
   @override
   String get openLinksWithInAppBrowser => 'Open links with in-app browser';
 
+  @override
+  String get languageSettingTitle => 'Language';
+
   @override
   String get languageEn => 'English';
 
diff --git a/lib/generated/l10n/zulip_localizations_nb.dart b/lib/generated/l10n/zulip_localizations_nb.dart
@@ -679,6 +679,9 @@ class ZulipLocalizationsNb extends ZulipLocalizations {
   @override
   String get openLinksWithInAppBrowser => 'Open links with in-app browser';
 
+  @override
+  String get languageSettingTitle => 'Language';
+
   @override
   String get languageEn => 'English';
 
diff --git a/lib/generated/l10n/zulip_localizations_pl.dart b/lib/generated/l10n/zulip_localizations_pl.dart
@@ -688,6 +688,9 @@ class ZulipLocalizationsPl extends ZulipLocalizations {
   @override
   String get openLinksWithInAppBrowser => 'Otwieraj odnośniki w aplikacji';
 
+  @override
+  String get languageSettingTitle => 'Language';
+
   @override
   String get languageEn => 'English';
 
diff --git a/lib/generated/l10n/zulip_localizations_ru.dart b/lib/generated/l10n/zulip_localizations_ru.dart
@@ -692,6 +692,9 @@ class ZulipLocalizationsRu extends ZulipLocalizations {
   @override
   String get openLinksWithInAppBrowser => 'Открывать ссылки внутри приложения';
 
+  @override
+  String get languageSettingTitle => 'Language';
+
   @override
   String get languageEn => 'English';
 
diff --git a/lib/generated/l10n/zulip_localizations_sk.dart b/lib/generated/l10n/zulip_localizations_sk.dart
@@ -681,6 +681,9 @@ class ZulipLocalizationsSk extends ZulipLocalizations {
   @override
   String get openLinksWithInAppBrowser => 'Open links with in-app browser';
 
+  @override
+  String get languageSettingTitle => 'Language';
+
   @override
   String get languageEn => 'English';
 
diff --git a/lib/generated/l10n/zulip_localizations_uk.dart b/lib/generated/l10n/zulip_localizations_uk.dart
@@ -692,6 +692,9 @@ class ZulipLocalizationsUk extends ZulipLocalizations {
   String get openLinksWithInAppBrowser =>
       'Відкривати посилання за допомогою браузера додатку';
 
+  @override
+  String get languageSettingTitle => 'Language';
+
   @override
   String get languageEn => 'English';
 
diff --git a/lib/widgets/settings.dart b/lib/widgets/settings.dart
@@ -1,8 +1,10 @@
 import 'package:flutter/material.dart';
 
 import '../generated/l10n/zulip_localizations.dart';
+import '../model/localizations.dart';
 import '../model/settings.dart';
 import 'app_bar.dart';
+import 'icons.dart';
 import 'page.dart';
 import 'store.dart';
 
@@ -17,17 +19,28 @@ class SettingsPage extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final zulipLocalizations = ZulipLocalizations.of(context);
+
+    Widget? subtitle;
+    final language = GlobalStoreWidget.settingsOf(context).language;
+    if (language != null && kSelfnamesByLocale.containsKey(language)) {
+      subtitle = Text(kSelfnamesByLocale[language]!);
+    }
+
     return Scaffold(
       appBar: ZulipAppBar(
         title: Text(zulipLocalizations.settingsPageTitle)),
       body: Column(children: [
         const _ThemeSetting(),
         const _BrowserPreferenceSetting(),
+        ListTile(
+          title: Text(zulipLocalizations.languageSettingTitle),
+          subtitle: subtitle,
+          onTap: () => Navigator.push(context, _LanguagePage.buildRoute())),
         if (GlobalSettingsStore.experimentalFeatureFlags.isNotEmpty)
           ListTile(
             title: Text(zulipLocalizations.experimentalFeatureSettingsPageTitle),
             onTap: () => Navigator.push(context,
-              ExperimentalFeaturesPage.buildRoute()))
+              ExperimentalFeaturesPage.buildRoute())),
       ]));
   }
 }
@@ -82,6 +95,66 @@ class _BrowserPreferenceSetting extends StatelessWidget {
   }
 }
 
+class _LanguagePage extends StatelessWidget {
+  const _LanguagePage();
+
+  static WidgetRoute<void> buildRoute() {
+    return MaterialWidgetRoute(page: const _LanguagePage());
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final zulipLocalizations = ZulipLocalizations.of(context);
+    return Scaffold(
+      appBar: AppBar(
+        title: Text(zulipLocalizations.languageSettingTitle)),
+      body: SingleChildScrollView(
+        child: Column(children: [
+          for (final MapEntry(:key, :value) in kSelfnamesByLocale.entries)
+            _LanguageItem(locale: key, selfname: value),
+        ])));
+  }
+}
+
+class _LanguageItem extends StatelessWidget {
+  const _LanguageItem({required this.locale, required this.selfname});
+
+  final Locale locale;
+  final String selfname;
+
+  @override
+  Widget build(BuildContext context) {
+    final globalSettings = GlobalStoreWidget.settingsOf(context);
+
+    final Widget subtitle;
+    final Widget? trailing;
+    if (locale == globalSettings.language) {
+      assert(Localizations.localeOf(context) == locale);
+      // For `subtitle`, the ambient locale is the same as selfname's
+      // corresponding locale — there is no need to override [Localization].
+      subtitle = Text(selfname);
+      trailing = Icon(ZulipIcons.check);
+    } else {
+      final zulipLocalizations = ZulipLocalizations.of(context);
+      subtitle = Text(zulipLocalizations.localeDisplayName(locale));
+      trailing = null;
+    }
+
+    return ListTile(
+      title: Localizations.override(
+        context: context,
+        // Different from other text in the app, `selfname` is localized with
+        // its corresponding locale, which is not always the ambient one.
+        locale: locale,
+        child: Text(selfname)),
+      subtitle: subtitle,
+      trailing: trailing,
+      onTap: () {
+        globalSettings.setLanguage(locale);
+      });
+  }
+}
+
 class ExperimentalFeaturesPage extends StatelessWidget {
   const ExperimentalFeaturesPage({super.key});
 
diff --git a/test/widgets/settings_test.dart b/test/widgets/settings_test.dart
@@ -1,8 +1,10 @@
 import 'package:checks/checks.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_checks/flutter_checks.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:zulip/model/settings.dart';
+import 'package:zulip/widgets/icons.dart';
 import 'package:zulip/widgets/settings.dart';
 
 import '../flutter_checks.dart';
@@ -127,6 +129,95 @@ void main() {
     }, variant: TargetPlatformVariant({TargetPlatform.android, TargetPlatform.iOS}));
   });
 
+  group('language setting', () {
+    Finder languageListTileFinder = find.ancestor(
+      of: find.text('Language'), matching: find.byType(ListTile));
+
+    Locale ambientLocale(WidgetTester tester, [Finder? finder]) {
+      final element = tester.element(finder ?? find.byType(SettingsPage));
+      return Localizations.localeOf(element);
+    }
+
+    testWidgets('on SettingsPage, when no language is set', (tester) async {
+      await prepare(tester);
+      check(ambientLocale(tester)).equals(const Locale('en'));
+
+      assert(testBinding.globalStore.settings.language == null);
+      await tester.pump();
+      check(languageListTileFinder).findsOne();
+      check(find.text('English')).findsNothing();
+    });
+
+    testWidgets('on SettingsPage, when a language is set', (tester) async {
+      await prepare(tester);
+      check(ambientLocale(tester)).equals(const Locale('en'));
+
+      await testBinding.globalStore.settings.setLanguage(const Locale('en'));
+      await tester.pump();
+      check(find.descendant(
+        of: languageListTileFinder, matching: find.text('English'))).findsOne();
+    });
+
+    testWidgets('LanguagePage smoke', (tester) async {
+      await prepare(tester);
+      await tester.tap(languageListTileFinder);
+      await tester.pump();
+      await tester.pump();
+      check(find.text('Polski').hitTestable()).findsOne();
+      check(find.text('Polish')).findsOne();
+      check(find.byIcon(ZulipIcons.check)).findsNothing();
+      check(ambientLocale(tester)).equals(const Locale('en'));
+      check(testBinding.globalStore).settings.language.isNull();
+
+      await tester.tap(find.text('Polish'));
+      await tester.pump();
+      check(find.text('Polski').hitTestable()).findsExactly(2);
+      check(find.text('Polish')).findsNothing();
+      check(find.descendant(
+        of: find.widgetWithText(ListTile, 'Polski'),
+        matching: find.byIcon(ZulipIcons.check)),
+      ).findsOne();
+      check(ambientLocale(tester)).equals(const Locale('pl'));
+      check(testBinding.globalStore).settings.language.equals(const Locale('pl'));
+    });
+
+    testWidgets('show selfname in its appropriate (different) locale', (tester) async {
+      await prepare(tester);
+      await tester.tap(languageListTileFinder);
+      await tester.pump();
+      await tester.pump();
+
+      Finder findInPolishListTile(String label) => find.descendant(
+        of: find.ancestor(
+          of: find.text('Polish'),
+          matching: find.byType(ListTile)),
+        matching: find.text(label)).hitTestable();
+
+      check(ambientLocale(tester, findInPolishListTile('Polish')))
+        .equals(const Locale('en'));
+      check(ambientLocale(tester, findInPolishListTile('Polski')))
+        .equals(const Locale('pl'));
+    });
+
+    testWidgets('handle unsupported (but valid) locale stored in database', (tester) async {
+      await prepare(tester);
+      // https://www.loc.gov/standards/iso639-2/php/code_list.php
+      await testBinding.globalStore.settings.setLanguage(const Locale('zxx'));
+      await tester.pumpAndSettle(); // expect no errors
+      check(ambientLocale(tester)).equals(const Locale('en'));
+
+      await tester.tap(languageListTileFinder);
+      await tester.pump();
+      await tester.pump();
+      check(find.byIcon(ZulipIcons.check)).findsNothing();
+
+      await tester.tap(find.text('Polish'));
+      await tester.pump();
+      check(ambientLocale(tester)).equals(const Locale('pl'));
+      check(testBinding.globalStore).settings.language.equals(const Locale('pl'));
+    });
+  });
+
   // TODO maybe test GlobalSettingType.experimentalFeatureFlag settings
   //   Or maybe not; after all, it's a developer-facing feature, so
   //   should be low risk.
