compose: Change topic hint text conditionally

This is implemented to match web's behavior.

See CZO discussion for design details:
  https://chat.zulip.org/#narrow/channel/530-mobile-design/topic/general.20chat.20design.20.23F1297/near/2106736

Signed-off-by: Zixuan James Li <[email protected]>

Author: PIG208

assets/l10n/app_en.arb

@@ -367,6 +367,13 @@
   "@composeBoxTopicHintText":  {
     "description": "Hint text for topic input widget in compose box."
   },
+  "composeBoxEnterTopicOrSkipHintText": "Enter a topic (skip for “{defaultTopicName}”)",
+  "@composeBoxEnterTopicOrSkipHintText":  {
+    "description": "Hint text for topic input widget in compose box when topics are optional.",
+    "placeholders": {
+      "defaultTopicName": {"type": "String", "example": "general chat"}
+    }
+  },
   "composeBoxUploadingFilename": "Uploading {filename}…",
   "@composeBoxUploadingFilename": {
     "description": "Placeholder in compose box showing the specified file is currently uploading.",

lib/generated/l10n/zulip_localizations.dart

@@ -591,6 +591,12 @@ abstract class ZulipLocalizations {
   /// **'Topic'**
   String get composeBoxTopicHintText;
 
+  /// Hint text for topic input widget in compose box when topics are optional.
+  ///
+  /// In en, this message translates to:
+  /// **'Enter a topic (skip for “{defaultTopicName}”)'**
+  String composeBoxEnterTopicOrSkipHintText(String defaultTopicName);
+
   /// Placeholder in compose box showing the specified file is currently uploading.
   ///
   /// In en, this message translates to:

lib/generated/l10n/zulip_localizations_ar.dart

@@ -289,6 +289,11 @@ class ZulipLocalizationsAr extends ZulipLocalizations {
   @override
   String get composeBoxTopicHintText => 'Topic';
 
+  @override
+  String composeBoxEnterTopicOrSkipHintText(String defaultTopicName) {
+    return 'Enter a topic (skip for “$defaultTopicName”)';
+  }
+
   @override
   String composeBoxUploadingFilename(String filename) {
     return 'Uploading $filename…';

lib/generated/l10n/zulip_localizations_en.dart

@@ -289,6 +289,11 @@ class ZulipLocalizationsEn extends ZulipLocalizations {
   @override
   String get composeBoxTopicHintText => 'Topic';
 
+  @override
+  String composeBoxEnterTopicOrSkipHintText(String defaultTopicName) {
+    return 'Enter a topic (skip for “$defaultTopicName”)';
+  }
+
   @override
   String composeBoxUploadingFilename(String filename) {
     return 'Uploading $filename…';

lib/generated/l10n/zulip_localizations_ja.dart

@@ -289,6 +289,11 @@ class ZulipLocalizationsJa extends ZulipLocalizations {
   @override
   String get composeBoxTopicHintText => 'Topic';
 
+  @override
+  String composeBoxEnterTopicOrSkipHintText(String defaultTopicName) {
+    return 'Enter a topic (skip for “$defaultTopicName”)';
+  }
+
   @override
   String composeBoxUploadingFilename(String filename) {
     return 'Uploading $filename…';

lib/generated/l10n/zulip_localizations_nb.dart

@@ -289,6 +289,11 @@ class ZulipLocalizationsNb extends ZulipLocalizations {
   @override
   String get composeBoxTopicHintText => 'Topic';
 
+  @override
+  String composeBoxEnterTopicOrSkipHintText(String defaultTopicName) {
+    return 'Enter a topic (skip for “$defaultTopicName”)';
+  }
+
   @override
   String composeBoxUploadingFilename(String filename) {
     return 'Uploading $filename…';

lib/generated/l10n/zulip_localizations_pl.dart

@@ -289,6 +289,11 @@ class ZulipLocalizationsPl extends ZulipLocalizations {
   @override
   String get composeBoxTopicHintText => 'Wątek';
 
+  @override
+  String composeBoxEnterTopicOrSkipHintText(String defaultTopicName) {
+    return 'Enter a topic (skip for “$defaultTopicName”)';
+  }
+
   @override
   String composeBoxUploadingFilename(String filename) {
     return 'Przekazywanie $filename…';

lib/generated/l10n/zulip_localizations_ru.dart

@@ -289,6 +289,11 @@ class ZulipLocalizationsRu extends ZulipLocalizations {
   @override
   String get composeBoxTopicHintText => 'Тема';
 
+  @override
+  String composeBoxEnterTopicOrSkipHintText(String defaultTopicName) {
+    return 'Enter a topic (skip for “$defaultTopicName”)';
+  }
+
   @override
   String composeBoxUploadingFilename(String filename) {
     return 'Загрузка $filename…';

lib/generated/l10n/zulip_localizations_sk.dart

@@ -289,6 +289,11 @@ class ZulipLocalizationsSk extends ZulipLocalizations {
   @override
   String get composeBoxTopicHintText => 'Topic';
 
+  @override
+  String composeBoxEnterTopicOrSkipHintText(String defaultTopicName) {
+    return 'Enter a topic (skip for “$defaultTopicName”)';
+  }
+
   @override
   String composeBoxUploadingFilename(String filename) {
     return 'Uploading $filename…';

lib/widgets/compose_box.dart

@@ -202,7 +202,7 @@ class ComposeTopicController extends ComposeController<TopicValidationError> {
   //   https://github.com/zulip/zulip-flutter/pull/1148#discussion_r1941990585
   String getDestinationString({
     required String streamName,
-    required bool contentHasFocus,
+    required bool hasChosenTopic,
   }) {
     final textTrimmed = text.trim();
     if (textTrimmed.isNotEmpty) {
@@ -217,7 +217,7 @@ class ComposeTopicController extends ComposeController<TopicValidationError> {
       // Do not fall back to a vacuous topic unless the user explicitly chooses
       // to do so (by skipping topic input and moving focus to content input),
       // because we expect a call to action for the user to pick one first.
-      || !contentHasFocus
+      || !hasChosenTopic
     ) {
       return '#$streamName';
     }
@@ -618,16 +618,26 @@ class _StreamContentInputState extends State<_StreamContentInput> {
     });
   }
 
+  void _hasChosenTopicChanged() {
+    setState(() {
+      // The relevant state lives on widget.controller.hasChosenTopic itself.
+    });
+  }
+
   void _contentFocusChanged() {
     setState(() {
       // The relevant state lives on widget.controller.contentFocusNode itself.
     });
+    if (widget.controller.contentFocusNode.hasFocus){
+      widget.controller.hasChosenTopic.value = true;
+    }
   }
 
   @override
   void initState() {
     super.initState();
     widget.controller.topic.addListener(_topicChanged);
+    widget.controller.hasChosenTopic.addListener(_hasChosenTopicChanged);
     widget.controller.contentFocusNode.addListener(_contentFocusChanged);
   }
 
@@ -638,6 +648,10 @@ class _StreamContentInputState extends State<_StreamContentInput> {
       oldWidget.controller.topic.removeListener(_topicChanged);
       widget.controller.topic.addListener(_topicChanged);
     }
+    if (widget.controller.hasChosenTopic != oldWidget.controller.hasChosenTopic) {
+      oldWidget.controller.hasChosenTopic.removeListener(_hasChosenTopicChanged);
+      widget.controller.hasChosenTopic.addListener(_hasChosenTopicChanged);
+    }
     if (widget.controller.contentFocusNode != oldWidget.controller.contentFocusNode) {
       oldWidget.controller.contentFocusNode.removeListener(_contentFocusChanged);
       widget.controller.contentFocusNode.addListener(_contentFocusChanged);
@@ -647,6 +661,7 @@ class _StreamContentInputState extends State<_StreamContentInput> {
   @override
   void dispose() {
     widget.controller.topic.removeListener(_topicChanged);
+    widget.controller.hasChosenTopic.removeListener(_hasChosenTopicChanged);
     widget.controller.contentFocusNode.removeListener(_contentFocusChanged);
     super.dispose();
   }
@@ -665,45 +680,113 @@ class _StreamContentInputState extends State<_StreamContentInput> {
       hintText: zulipLocalizations.composeBoxChannelContentHint(
         widget.controller.topic.getDestinationString(
           streamName: streamName,
-          contentHasFocus: widget.controller.contentFocusNode.hasFocus)));
+          hasChosenTopic: widget.controller.hasChosenTopic.value)));
   }
 }
 
-class _TopicInput extends StatelessWidget {
+class _TopicInput extends StatefulWidget {
   const _TopicInput({required this.streamId, required this.controller});
 
   final int streamId;
   final StreamComposeBoxController controller;
 
+  @override
+  State<_TopicInput> createState() => _TopicInputState();
+}
+
+class _TopicInputState extends State<_TopicInput> {
+  @override
+  void initState() {
+    super.initState();
+    widget.controller.topicFocusNode.addListener(_topicFocusChanged);
+    widget.controller.hasChosenTopic.addListener(_hasChosenTopicChanged);
+  }
+
+  @override
+  void didUpdateWidget(covariant _TopicInput oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (widget.controller.topicFocusNode != oldWidget.controller.topicFocusNode) {
+      oldWidget.controller.topicFocusNode.removeListener(_topicFocusChanged);
+      widget.controller.topicFocusNode.addListener(_topicFocusChanged);
+    }
+    if (widget.controller.hasChosenTopic != oldWidget.controller.hasChosenTopic) {
+      oldWidget.controller.hasChosenTopic.removeListener(_hasChosenTopicChanged);
+      widget.controller.hasChosenTopic.addListener(_hasChosenTopicChanged);
+    }
+  }
+
+  @override
+  void dispose() {
+    widget.controller.topicFocusNode.removeListener(_topicFocusChanged);
+    widget.controller.hasChosenTopic.removeListener(_hasChosenTopicChanged);
+    super.dispose();
+  }
+
+  void _topicFocusChanged() {
+    setState(() {
+      // The relevant state lives on widget.controller.topicFocusNode itself.
+    });
+    if (widget.controller.topicFocusNode.hasFocus) {
+      widget.controller.hasChosenTopic.value = false;
+    }
+  }
+
+  void _hasChosenTopicChanged() {
+    setState(() {
+      // The relevant state lives on widget.controller.hasChosenTopic itself.
+    });
+  }
+
   @override
   Widget build(BuildContext context) {
     final zulipLocalizations = ZulipLocalizations.of(context);
     final designVariables = DesignVariables.of(context);
+    final store = PerAccountStoreWidget.of(context);
     TextStyle topicTextStyle = TextStyle(
       fontSize: 20,
       height: 22 / 20,
       color: designVariables.textInput.withFadedAlpha(0.9),
     ).merge(weightVariableTextStyle(context, wght: 600));
+    final hintStyle = topicTextStyle.copyWith(
+      color: designVariables.textInput.withFadedAlpha(0.5));
+
+    final defaultTopicDisplayName = store.zulipFeatureLevel >= 334
+      ? store.realmEmptyTopicDisplayName : kNoTopicTopic;
+
+    final decoration = switch ((
+      store.realmMandatoryTopics,
+      widget.controller.hasChosenTopic.value,
+      widget.controller.topicFocusNode.hasFocus,
+    )) {
+      (false, true, _) => InputDecoration(
+        hintText: defaultTopicDisplayName,
+        hintStyle: topicTextStyle.copyWith(
+          fontStyle: store.zulipFeatureLevel >= 334 ? FontStyle.italic : null)),
+      (false, false, true) => InputDecoration(
+        hintText: zulipLocalizations.composeBoxEnterTopicOrSkipHintText(
+          defaultTopicDisplayName),
+        hintStyle: hintStyle),
+      (_, _, _) => InputDecoration(
+        hintText: zulipLocalizations.composeBoxTopicHintText,
+        hintStyle: hintStyle),
+    };
 
     return TopicAutocomplete(
-      streamId: streamId,
-      controller: controller.topic,
-      focusNode: controller.topicFocusNode,
-      contentFocusNode: controller.contentFocusNode,
+      streamId: widget.streamId,
+      controller: widget.controller.topic,
+      focusNode: widget.controller.topicFocusNode,
+      contentFocusNode: widget.controller.contentFocusNode,
       fieldViewBuilder: (context) => Container(
         padding: const EdgeInsets.only(top: 10, bottom: 9),
         decoration: BoxDecoration(border: Border(bottom: BorderSide(
           width: 1,
           color: designVariables.foreground.withFadedAlpha(0.2)))),
         child: TextField(
-          controller: controller.topic,
-          focusNode: controller.topicFocusNode,
+          controller: widget.controller.topic,
+          focusNode: widget.controller.topicFocusNode,
           textInputAction: TextInputAction.next,
           style: topicTextStyle,
-          decoration: InputDecoration(
-            hintText: zulipLocalizations.composeBoxTopicHintText,
-            hintStyle: topicTextStyle.copyWith(
-              color: designVariables.textInput.withFadedAlpha(0.5))))));
+          decoration: decoration)));
   }
 }
 
@@ -1381,10 +1464,18 @@ class StreamComposeBoxController extends ComposeBoxController {
   final ComposeTopicController topic;
   final topicFocusNode = FocusNode();
 
+  /// Whether the user has made up their mind choosing a topic.
+  ///
+  /// Empirically, this should be set to `false` whenever the user focuses on
+  /// the topic input, and set to `true` whenever the user focuses on the
+  /// content input.
+  ValueNotifier<bool> hasChosenTopic = ValueNotifier(false);
+
   @override
   void dispose() {
     topic.dispose();
     topicFocusNode.dispose();
+    hasChosenTopic.dispose();
     super.dispose();
   }
 }

test/flutter_checks.dart

@@ -99,6 +99,7 @@ extension TextStyleChecks on Subject<TextStyle> {
   Subject<bool> get inherit => has((t) => t.inherit, 'inherit');
   Subject<Color?> get color => has((t) => t.color, 'color');
   Subject<double?> get fontSize => has((t) => t.fontSize, 'fontSize');
+  Subject<FontStyle?> get fontStyle => has((t) => t.fontStyle, 'fontStyle');
   Subject<FontWeight?> get fontWeight => has((t) => t.fontWeight, 'fontWeight');
   Subject<double?> get letterSpacing => has((t) => t.letterSpacing, 'letterSpacing');
   Subject<List<FontVariation>?> get fontVariations => has((t) => t.fontVariations, 'fontVariations');
@@ -170,6 +171,7 @@ extension MaterialChecks on Subject<Material> {
 
 extension InputDecorationChecks on Subject<InputDecoration> {
   Subject<String?> get hintText => has((x) => x.hintText, 'hintText');
+  Subject<TextStyle?> get hintStyle => has((x) => x.hintStyle, 'hintStyle');
 }
 
 extension BoxDecorationChecks on Subject<BoxDecoration> {