compose: Change content input hint text statefully

Before, the content input shows the "#stream > topic" hint text
as long as it has focus, and set the hint text to "#stream" when it
loses focus.

Now, the content input still shows "#stream > topic" when it gains
focus, except that it will keep showing it even after losing focus,
until the user moves focus to the topic input.

Author: PIG208

lib/widgets/compose_box.dart

@@ -596,11 +596,18 @@ class _StreamContentInputState extends State<_StreamContentInput> {
     });
   }
 
+  void _topicInteractionStatusChanged() {
+    setState(() {
+      // The relevant state lives on widget.controller.topicInteractionStatus itself.
+    });
+  }
+
   @override
   void initState() {
     super.initState();
     widget.controller.topic.addListener(_topicChanged);
     widget.controller.contentFocusNode.addListener(_contentFocusChanged);
+    widget.controller.topicInteractionStatus.addListener(_topicInteractionStatusChanged);
   }
 
   @override
@@ -614,12 +621,17 @@ class _StreamContentInputState extends State<_StreamContentInput> {
       oldWidget.controller.contentFocusNode.removeListener(_contentFocusChanged);
       widget.controller.contentFocusNode.addListener(_contentFocusChanged);
     }
+    if (widget.controller.topicInteractionStatus != oldWidget.controller.topicInteractionStatus) {
+      oldWidget.controller.topicInteractionStatus.removeListener(_topicInteractionStatusChanged);
+      widget.controller.topicInteractionStatus.addListener(_topicInteractionStatusChanged);
+    }
   }
 
   @override
   void dispose() {
     widget.controller.topic.removeListener(_topicChanged);
     widget.controller.contentFocusNode.removeListener(_contentFocusChanged);
+    widget.controller.topicInteractionStatus.removeListener(_topicInteractionStatusChanged);
     super.dispose();
   }
 
@@ -630,11 +642,11 @@ class _StreamContentInputState extends State<_StreamContentInput> {
         // The chosen topic can't be sent to, so don't show it.
         return null;
       }
-      if (!widget.controller.contentFocusNode.hasFocus) {
-        // 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),
-        // so that the user is not encouraged to use vacuous topic when they
-        // have not interacted with the inputs at all.
+      if (widget.controller.topicInteractionStatus.value !=
+          ComposeTopicInteractionStatus.hasChosen) {
+        // Do not fall back to a vacuous topic unless the user explicitly
+        // chooses to do so, so that the user is not encouraged to use vacuous
+        // topic before they have interacted with the inputs at all.
         return null;
       }
     }

test/widgets/compose_box_test.dart

@@ -472,6 +472,23 @@ void main() {
           contentHintText: 'Message #${channel.name}');
       });
 
+      testWidgets('with empty topic, content input has focus, then loses it', (tester) async {
+        await prepare(tester, narrow: narrow, mandatoryTopics: false);
+        await enterContent(tester, '');
+        await tester.pump();
+        checkComposeBoxHintTexts(tester,
+          topicHintText: eg.defaultRealmEmptyTopicDisplayName,
+          contentHintText: 'Message #${channel.name} > '
+                           '${eg.defaultRealmEmptyTopicDisplayName}');
+
+        FocusManager.instance.primaryFocus!.unfocus();
+        await tester.pump();
+        checkComposeBoxHintTexts(tester,
+          topicHintText: eg.defaultRealmEmptyTopicDisplayName,
+          contentHintText: 'Message #${channel.name} > '
+                           '${eg.defaultRealmEmptyTopicDisplayName}');
+      });
+
       testWidgets('with non-empty topic', (tester) async {
         await prepare(tester, narrow: narrow, mandatoryTopics: false);
         await enterTopic(tester, narrow: narrow, topic: 'new topic');