msglist: Use icon for topic-list button in app bar

Komyyy · gnprice · commit 04af371cce0e · 2025-07-08T12:26:07.000-07:00
Fixes #1532.
diff --git a/assets/l10n/app_de.arb b/assets/l10n/app_de.arb
@@ -427,9 +427,9 @@
       }
     }
   },
-  "topicsButtonLabel": "THEMEN",
-  "@topicsButtonLabel": {
-    "description": "Label for message list button leading to topic-list page. (Use ALL CAPS for cased alphabets: Latin, Greek, Cyrillic, etc.)"
+  "topicsButtonTooltip": "Themen",
+  "@topicsButtonTooltip": {
+    "description": "Tooltip for button to navigate to topic-list page."
   },
   "markReadOnScrollSettingTitle": "Nachrichten beim Scrollen als gelesen markieren",
   "@markReadOnScrollSettingTitle": {
diff --git a/assets/l10n/app_en.arb b/assets/l10n/app_en.arb
@@ -853,9 +853,9 @@
   "@mainMenuMyProfile": {
     "description": "Label for main-menu button leading to the user's own profile."
   },
-  "topicsButtonLabel": "TOPICS",
-  "@topicsButtonLabel": {
-    "description": "Label for message list button leading to topic-list page. (Use ALL CAPS for cased alphabets: Latin, Greek, Cyrillic, etc.)"
+  "topicsButtonTooltip": "Topics",
+  "@topicsButtonTooltip": {
+    "description": "Tooltip for button to navigate to topic-list page."
   },
   "channelFeedButtonTooltip": "Channel feed",
   "@channelFeedButtonTooltip": {
diff --git a/assets/l10n/app_it.arb b/assets/l10n/app_it.arb
@@ -949,9 +949,9 @@
   "@mainMenuMyProfile": {
     "description": "Label for main-menu button leading to the user's own profile."
   },
-  "topicsButtonLabel": "ARGOMENTI",
-  "@topicsButtonLabel": {
-    "description": "Label for message list button leading to topic-list page. (Use ALL CAPS for cased alphabets: Latin, Greek, Cyrillic, etc.)"
+  "topicsButtonTooltip": "Argomenti",
+  "@topicsButtonTooltip": {
+    "description": "Tooltip for button to navigate to topic-list page."
   },
   "reactedEmojiSelfUser": "Tu",
   "@reactedEmojiSelfUser": {
diff --git a/assets/l10n/app_pl.arb b/assets/l10n/app_pl.arb
@@ -1061,9 +1061,9 @@
   "@composeBoxBannerButtonSave": {
     "description": "Label text for the 'Save' button in the compose-box banner when you are editing a message."
   },
-  "topicsButtonLabel": "WĄTKI",
-  "@topicsButtonLabel": {
-    "description": "Label for message list button leading to topic-list page. (Use ALL CAPS for cased alphabets: Latin, Greek, Cyrillic, etc.)"
+  "topicsButtonTooltip": "Wątki",
+  "@topicsButtonTooltip": {
+    "description": "Tooltip for button to navigate to topic-list page."
   },
   "actionSheetOptionListOfTopics": "Lista wątków",
   "@actionSheetOptionListOfTopics": {
diff --git a/assets/l10n/app_ru.arb b/assets/l10n/app_ru.arb
@@ -1065,9 +1065,9 @@
   "@actionSheetOptionListOfTopics": {
     "description": "Label for navigating to a channel's topic-list page."
   },
-  "topicsButtonLabel": "ТЕМЫ",
-  "@topicsButtonLabel": {
-    "description": "Label for message list button leading to topic-list page. (Use ALL CAPS for cased alphabets: Latin, Greek, Cyrillic, etc.)"
+  "topicsButtonTooltip": "Темы",
+  "@topicsButtonTooltip": {
+    "description": "Tooltip for button to navigate to topic-list page."
   },
   "newDmSheetSearchHintEmpty": "Добавить пользователей",
   "@newDmSheetSearchHintEmpty": {
diff --git a/assets/l10n/app_sl.arb b/assets/l10n/app_sl.arb
@@ -731,9 +731,9 @@
   "@mainMenuMyProfile": {
     "description": "Label for main-menu button leading to the user's own profile."
   },
-  "topicsButtonLabel": "TEME",
-  "@topicsButtonLabel": {
-    "description": "Label for message list button leading to topic-list page. (Use ALL CAPS for cased alphabets: Latin, Greek, Cyrillic, etc.)"
+  "topicsButtonTooltip": "Teme",
+  "@topicsButtonTooltip": {
+    "description": "Tooltip for button to navigate to topic-list page."
   },
   "channelFeedButtonTooltip": "Sporočila kanala",
   "@channelFeedButtonTooltip": {
diff --git a/assets/l10n/app_uk.arb b/assets/l10n/app_uk.arb
@@ -1031,9 +1031,9 @@
   "@editAlreadyInProgressTitle": {
     "description": "Error title when a message edit cannot be saved because there is another edit already in progress."
   },
-  "topicsButtonLabel": "ТЕМИ",
-  "@topicsButtonLabel": {
-    "description": "Label for message list button leading to topic-list page. (Use ALL CAPS for cased alphabets: Latin, Greek, Cyrillic, etc.)"
+  "topicsButtonTooltip": "Теми",
+  "@topicsButtonTooltip": {
+    "description": "Tooltip for button to navigate to topic-list page."
   },
   "actionSheetOptionHideMutedMessage": "Сховати заглушене повідомлення",
   "@actionSheetOptionHideMutedMessage": {
diff --git a/assets/l10n/app_zh_Hans_CN.arb b/assets/l10n/app_zh_Hans_CN.arb
@@ -1083,9 +1083,9 @@
   "@mainMenuMyProfile": {
     "description": "Label for main-menu button leading to the user's own profile."
   },
-  "topicsButtonLabel": "话题",
-  "@topicsButtonLabel": {
-    "description": "Label for message list button leading to topic-list page. (Use ALL CAPS for cased alphabets: Latin, Greek, Cyrillic, etc.)"
+  "topicsButtonTooltip": "话题",
+  "@topicsButtonTooltip": {
+    "description": "Tooltip for button to navigate to topic-list page."
   },
   "notifSelfUser": "您",
   "@notifSelfUser": {
diff --git a/assets/l10n/app_zh_Hant_TW.arb b/assets/l10n/app_zh_Hant_TW.arb
@@ -423,9 +423,9 @@
       }
     }
   },
-  "topicsButtonLabel": "話題",
-  "@topicsButtonLabel": {
-    "description": "Label for message list button leading to topic-list page. (Use ALL CAPS for cased alphabets: Latin, Greek, Cyrillic, etc.)"
+  "topicsButtonTooltip": "話題",
+  "@topicsButtonTooltip": {
+    "description": "Tooltip for button to navigate to topic-list page."
   },
   "themeSettingLight": "淺色主題",
   "@themeSettingLight": {
diff --git a/lib/generated/l10n/zulip_localizations.dart b/lib/generated/l10n/zulip_localizations.dart
@@ -1293,11 +1293,11 @@ abstract class ZulipLocalizations {
   /// **'My profile'**
   String get mainMenuMyProfile;
 
-  /// Label for message list button leading to topic-list page. (Use ALL CAPS for cased alphabets: Latin, Greek, Cyrillic, etc.)
+  /// Tooltip for button to navigate to topic-list page.
   ///
   /// In en, this message translates to:
-  /// **'TOPICS'**
-  String get topicsButtonLabel;
+  /// **'Topics'**
+  String get topicsButtonTooltip;
 
   /// Tooltip for button to navigate to a given channel's feed
   ///
diff --git a/lib/generated/l10n/zulip_localizations_ar.dart b/lib/generated/l10n/zulip_localizations_ar.dart
@@ -699,7 +699,7 @@ class ZulipLocalizationsAr extends ZulipLocalizations {
   String get mainMenuMyProfile => 'My profile';
 
   @override
-  String get topicsButtonLabel => 'TOPICS';
+  String get topicsButtonTooltip => 'Topics';
 
   @override
   String get channelFeedButtonTooltip => 'Channel feed';
diff --git a/lib/generated/l10n/zulip_localizations_de.dart b/lib/generated/l10n/zulip_localizations_de.dart
@@ -719,7 +719,7 @@ class ZulipLocalizationsDe extends ZulipLocalizations {
   String get mainMenuMyProfile => 'Mein Profil';
 
   @override
-  String get topicsButtonLabel => 'THEMEN';
+  String get topicsButtonTooltip => 'Themen';
 
   @override
   String get channelFeedButtonTooltip => 'Kanal-Feed';
diff --git a/lib/generated/l10n/zulip_localizations_en.dart b/lib/generated/l10n/zulip_localizations_en.dart
@@ -699,7 +699,7 @@ class ZulipLocalizationsEn extends ZulipLocalizations {
   String get mainMenuMyProfile => 'My profile';
 
   @override
-  String get topicsButtonLabel => 'TOPICS';
+  String get topicsButtonTooltip => 'Topics';
 
   @override
   String get channelFeedButtonTooltip => 'Channel feed';
diff --git a/lib/generated/l10n/zulip_localizations_it.dart b/lib/generated/l10n/zulip_localizations_it.dart
@@ -714,7 +714,7 @@ class ZulipLocalizationsIt extends ZulipLocalizations {
   String get mainMenuMyProfile => 'Il mio profilo';
 
   @override
-  String get topicsButtonLabel => 'ARGOMENTI';
+  String get topicsButtonTooltip => 'Argomenti';
 
   @override
   String get channelFeedButtonTooltip => 'Feed del canale';
diff --git a/lib/generated/l10n/zulip_localizations_ja.dart b/lib/generated/l10n/zulip_localizations_ja.dart
@@ -699,7 +699,7 @@ class ZulipLocalizationsJa extends ZulipLocalizations {
   String get mainMenuMyProfile => 'My profile';
 
   @override
-  String get topicsButtonLabel => 'TOPICS';
+  String get topicsButtonTooltip => 'Topics';
 
   @override
   String get channelFeedButtonTooltip => 'Channel feed';
diff --git a/lib/generated/l10n/zulip_localizations_nb.dart b/lib/generated/l10n/zulip_localizations_nb.dart
@@ -699,7 +699,7 @@ class ZulipLocalizationsNb extends ZulipLocalizations {
   String get mainMenuMyProfile => 'My profile';
 
   @override
-  String get topicsButtonLabel => 'TOPICS';
+  String get topicsButtonTooltip => 'Topics';
 
   @override
   String get channelFeedButtonTooltip => 'Channel feed';
diff --git a/lib/generated/l10n/zulip_localizations_pl.dart b/lib/generated/l10n/zulip_localizations_pl.dart
@@ -709,7 +709,7 @@ class ZulipLocalizationsPl extends ZulipLocalizations {
   String get mainMenuMyProfile => 'Mój profil';
 
   @override
-  String get topicsButtonLabel => 'WĄTKI';
+  String get topicsButtonTooltip => 'Wątki';
 
   @override
   String get channelFeedButtonTooltip => 'Strumień kanału';
diff --git a/lib/generated/l10n/zulip_localizations_ru.dart b/lib/generated/l10n/zulip_localizations_ru.dart
@@ -713,7 +713,7 @@ class ZulipLocalizationsRu extends ZulipLocalizations {
   String get mainMenuMyProfile => 'Мой профиль';
 
   @override
-  String get topicsButtonLabel => 'ТЕМЫ';
+  String get topicsButtonTooltip => 'Темы';
 
   @override
   String get channelFeedButtonTooltip => 'Лента канала';
diff --git a/lib/generated/l10n/zulip_localizations_sk.dart b/lib/generated/l10n/zulip_localizations_sk.dart
@@ -701,7 +701,7 @@ class ZulipLocalizationsSk extends ZulipLocalizations {
   String get mainMenuMyProfile => 'Môj profil';
 
   @override
-  String get topicsButtonLabel => 'TOPICS';
+  String get topicsButtonTooltip => 'Topics';
 
   @override
   String get channelFeedButtonTooltip => 'Channel feed';
diff --git a/lib/generated/l10n/zulip_localizations_sl.dart b/lib/generated/l10n/zulip_localizations_sl.dart
@@ -724,7 +724,7 @@ class ZulipLocalizationsSl extends ZulipLocalizations {
   String get mainMenuMyProfile => 'Moj profil';
 
   @override
-  String get topicsButtonLabel => 'TEME';
+  String get topicsButtonTooltip => 'Teme';
 
   @override
   String get channelFeedButtonTooltip => 'Sporočila kanala';
diff --git a/lib/generated/l10n/zulip_localizations_uk.dart b/lib/generated/l10n/zulip_localizations_uk.dart
@@ -712,7 +712,7 @@ class ZulipLocalizationsUk extends ZulipLocalizations {
   String get mainMenuMyProfile => 'Мій профіль';
 
   @override
-  String get topicsButtonLabel => 'ТЕМИ';
+  String get topicsButtonTooltip => 'Теми';
 
   @override
   String get channelFeedButtonTooltip => 'Стрічка каналу';
diff --git a/lib/generated/l10n/zulip_localizations_zh.dart b/lib/generated/l10n/zulip_localizations_zh.dart
@@ -699,7 +699,7 @@ class ZulipLocalizationsZh extends ZulipLocalizations {
   String get mainMenuMyProfile => 'My profile';
 
   @override
-  String get topicsButtonLabel => 'TOPICS';
+  String get topicsButtonTooltip => 'Topics';
 
   @override
   String get channelFeedButtonTooltip => 'Channel feed';
@@ -1534,7 +1534,7 @@ class ZulipLocalizationsZhHansCn extends ZulipLocalizationsZh {
   String get mainMenuMyProfile => '个人资料';
 
   @override
-  String get topicsButtonLabel => '话题';
+  String get topicsButtonTooltip => '话题';
 
   @override
   String get channelFeedButtonTooltip => '频道订阅';
@@ -2084,7 +2084,7 @@ class ZulipLocalizationsZhHantTw extends ZulipLocalizationsZh {
   String get channelsPageTitle => '頻道';
 
   @override
-  String get topicsButtonLabel => '話題';
+  String get topicsButtonTooltip => '話題';
 
   @override
   String get channelFeedButtonTooltip => '頻道饋給';
diff --git a/lib/widgets/message_list.dart b/lib/widgets/message_list.dart
@@ -459,24 +459,12 @@ class _TopicListButton extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final zulipLocalizations = ZulipLocalizations.of(context);
-    final designVariables = DesignVariables.of(context);
-    return GestureDetector(
-      onTap: () {
-        Navigator.of(context).push(TopicListPage.buildRoute(
-          context: context, streamId: streamId));
-      },
-      behavior: HitTestBehavior.opaque,
-      child: Padding(
-        padding: EdgeInsetsDirectional.fromSTEB(12, 8, 12, 8),
-        child: Center(child: Text(zulipLocalizations.topicsButtonLabel,
-          style: TextStyle(
-            color: designVariables.icon,
-            fontSize: 18,
-            height: 19 / 18,
-            // This is equivalent to css `all-small-caps`, see:
-            //   https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-caps#all-small-caps
-            fontFeatures: const [FontFeature.enable('c2sc'), FontFeature.enable('smcp')],
-          ).merge(weightVariableTextStyle(context, wght: 600))))));
+    return IconButton(
+      icon: const Icon(ZulipIcons.topics),
+      tooltip: zulipLocalizations.topicsButtonTooltip,
+      onPressed: () => Navigator.push(context,
+        TopicListPage.buildRoute(context: context,
+          streamId: streamId)));
   }
 }
 
diff --git a/test/widgets/message_list_test.dart b/test/widgets/message_list_test.dart
@@ -288,7 +288,7 @@ void main() {
       connection.prepare(json: GetStreamTopicsResult(topics: [
         eg.getStreamTopicsEntry(name: 'topic foo'),
       ]).toJson());
-      await tester.tap(find.text('TOPICS'));
+      await tester.tap(find.byIcon(ZulipIcons.topics));
       await tester.pump(); // tap the button
       await tester.pump(Duration.zero); // wait for request
       check(find.descendant(
@@ -323,7 +323,7 @@ void main() {
       connection.prepare(json: GetStreamTopicsResult(topics: [
         eg.getStreamTopicsEntry(name: 'topic foo'),
       ]).toJson());
-      await tester.tap(find.text('TOPICS'));
+      await tester.tap(find.byIcon(ZulipIcons.topics));
       await tester.pump(); // tap the button
       await tester.pump(Duration.zero); // wait for request
       check(find.descendant(
diff --git a/test/widgets/topic_list_test.dart b/test/widgets/topic_list_test.dart
@@ -142,7 +142,7 @@ void main() {
     // Tap "TOPICS" button navigating to the topic-list page…
     connection.prepare(json: GetStreamTopicsResult(
       topics: [eg.getStreamTopicsEntry(name: 'topic A')]).toJson());
-    await tester.tap(find.text('TOPICS'));
+    await tester.tap(find.byIcon(ZulipIcons.topics));
     await tester.pump();
     await tester.pump(Duration.zero);
     check(find.text('topic A')).findsOne();
@@ -154,7 +154,7 @@ void main() {
     // … then back to the topic-list page, expecting to fetch again.
     connection.prepare(json: GetStreamTopicsResult(
       topics: [eg.getStreamTopicsEntry(name: 'topic B')]).toJson());
-    await tester.tap(find.text('TOPICS'));
+    await tester.tap(find.byIcon(ZulipIcons.topics));
     await tester.pump();
     await tester.pump(Duration.zero);
     check(find.text('topic A')).findsNothing();

Original file line number	Diff line number	Diff line change
`@@ -427,9 +427,9 @@`
`427`	`427`	`}`
`428`	`428`	`}`
`429`	`429`	`},`
`430`		`- "topicsButtonLabel": "THEMEN",`
`431`		`- "@topicsButtonLabel": {`
`432`		`- "description": "Label for message list button leading to topic-list page. (Use ALL CAPS for cased alphabets: Latin, Greek, Cyrillic, etc.)"`
	`430`	`+ "topicsButtonTooltip": "Themen",`
	`431`	`+ "@topicsButtonTooltip": {`
	`432`	`+ "description": "Tooltip for button to navigate to topic-list page."`
`433`	`433`	`},`
`434`	`434`	`"markReadOnScrollSettingTitle": "Nachrichten beim Scrollen als gelesen markieren",`
`435`	`435`	`"@markReadOnScrollSettingTitle": {`
Original file line number	Diff line number	Diff line change
`@@ -423,9 +423,9 @@`
`423`	`423`	`}`
`424`	`424`	`}`
`425`	`425`	`},`
`426`		`- "topicsButtonLabel": "話題",`
`427`		`- "@topicsButtonLabel": {`
`428`		`- "description": "Label for message list button leading to topic-list page. (Use ALL CAPS for cased alphabets: Latin, Greek, Cyrillic, etc.)"`
	`426`	`+ "topicsButtonTooltip": "話題",`
	`427`	`+ "@topicsButtonTooltip": {`
	`428`	`+ "description": "Tooltip for button to navigate to topic-list page."`
`429`	`429`	`},`
`430`	`430`	`"themeSettingLight": "淺色主題",`
`431`	`431`	`"@themeSettingLight": {`