settings: Add language setting

PIG208 · PIG208 · commit 004c55a02a80 · 2025-06-14T21:46:10.000-04:00
Since there is no Figma design for the settings page yet, the design is kept simple while mostly matching zulip-mobile: we show both selfname and name 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. Fixes: #1139
diff --git a/assets/l10n/app_en.arb b/assets/l10n/app_en.arb
@@ -943,6 +943,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
@@ -1407,6 +1407,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
@@ -767,6 +767,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_de.dart b/lib/generated/l10n/zulip_localizations_de.dart
@@ -767,6 +767,9 @@ class ZulipLocalizationsDe 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
@@ -767,6 +767,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_it.dart b/lib/generated/l10n/zulip_localizations_it.dart
@@ -767,6 +767,9 @@ class ZulipLocalizationsIt 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
@@ -767,6 +767,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
@@ -767,6 +767,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
@@ -778,6 +778,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
@@ -781,6 +781,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
@@ -769,6 +769,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_sl.dart b/lib/generated/l10n/zulip_localizations_sl.dart
@@ -789,6 +789,9 @@ class ZulipLocalizationsSl extends ZulipLocalizations {
   String get openLinksWithInAppBrowser =>
       'Odpri povezave v brskalniku znotraj aplikacije';
 
+  @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
@@ -781,6 +781,9 @@ class ZulipLocalizationsUk extends ZulipLocalizations {
   String get openLinksWithInAppBrowser =>
       'Відкривати посилання за допомогою браузера додатку';
 
+  @override
+  String get languageSettingTitle => 'Language';
+
   @override
   String get languageEn => 'English';
 
diff --git a/lib/generated/l10n/zulip_localizations_zh.dart b/lib/generated/l10n/zulip_localizations_zh.dart
@@ -767,6 +767,9 @@ class ZulipLocalizationsZh 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/widgets/settings.dart b/lib/widgets/settings.dart
@@ -1,8 +1,12 @@
+import 'dart:async';
+
 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,13 +21,24 @@ class SettingsPage extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final zulipLocalizations = ZulipLocalizations.of(context);
+
+    Widget? languageSettingSubtitle;
+    final language = GlobalStoreWidget.settingsOf(context).language;
+    if (language != null && kSelfnamesByLocale.containsKey(language)) {
+      languageSettingSubtitle = Text(kSelfnamesByLocale[language]!);
+    }
+
     return Scaffold(
       appBar: ZulipAppBar(
         title: Text(zulipLocalizations.settingsPageTitle)),
       body: Column(children: [
         const _ThemeSetting(),
         const _BrowserPreferenceSetting(),
         const _VisitFirstUnreadSetting(),
+        ListTile(
+          title: Text(zulipLocalizations.languageSettingTitle),
+          subtitle: languageSettingSubtitle,
+          onTap: () => Navigator.push(context, _LanguagePage.buildRoute())),
         if (GlobalSettingsStore.experimentalFeatureFlags.isNotEmpty)
           ListTile(
             title: Text(zulipLocalizations.experimentalFeatureSettingsPageTitle),
@@ -150,6 +165,55 @@ class VisitFirstUnreadSettingPage 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 language in zulipLocalizations.languages())
+            _LanguageItem(language: language),
+        ])));
+  }
+}
+
+class _LanguageItem extends StatelessWidget {
+  const _LanguageItem({required this.language});
+
+  /// The [Language] this corresponds to, from [ZulipLocalizations.languages].
+  final Language language;
+
+  @override
+  Widget build(BuildContext context) {
+    final (locale, selfname, displayName) = language;
+    final isCurrentLanguageInSettings =
+      locale == GlobalStoreWidget.settingsOf(context).language;
+
+    return ListTile(
+      title: Text(selfname),
+      subtitle: Text(
+        isCurrentLanguageInSettings
+        ? // Make sure the subtitle text is consistent to the title — since
+          // displayName (decided by translators) can be different from our
+          // hard-coded selfname when isCurrentLanguage is true.
+          selfname
+        : displayName),
+      trailing: isCurrentLanguageInSettings ? Icon(ZulipIcons.check) : null,
+      onTap: () {
+        unawaited(GlobalStoreWidget.settingsOf(context).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';
@@ -129,6 +131,75 @@ void main() {
 
   // TODO(#1571): test visitFirstUnread setting UI
 
+  group('language setting', () {
+    Finder languageListTileFinder = find.ancestor(
+      of: find.text('Language'), matching: find.byType(ListTile));
+
+    Subject<Locale> checkAmbientLocale(WidgetTester tester) =>
+      check(Localizations.localeOf(tester.element(find.byType(SettingsPage))));
+
+    testWidgets('on SettingsPage, when no language is set', (tester) async {
+      await prepare(tester);
+      checkAmbientLocale(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);
+      checkAmbientLocale(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();
+      checkAmbientLocale(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();
+      checkAmbientLocale(tester).equals(const Locale('pl'));
+      check(testBinding.globalStore).settings.language.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
+      checkAmbientLocale(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();
+      checkAmbientLocale(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.
