compose [nfc]: Extract _ComposeBoxLayout

This separates the layout of the compose box from the setup of
its state, which will let us share the former with compose boxes
for other types of narrows.

Author: gnprice

lib/widgets/compose_box.dart

@@ -667,32 +667,20 @@ class _SendButtonState extends State<_SendButton> {
   }
 }
 
-/// A compose box for use in a stream narrow.
-///
-/// This offers a text input for the topic to send to,
-/// in addition to a text input for the message content.
-class _StreamComposeBox extends StatefulWidget {
-  const _StreamComposeBox({required this.narrow});
-
-  /// The narrow on view in the message list.
-  final StreamNarrow narrow;
-
-  @override
-  State<_StreamComposeBox> createState() => _StreamComposeBoxState();
-}
-
-class _StreamComposeBoxState extends State<_StreamComposeBox> {
-  final _topicController = ComposeTopicController();
-  final _contentController = ComposeContentController();
-  final _contentFocusNode = FocusNode();
+class _ComposeBoxLayout extends StatelessWidget {
+  const _ComposeBoxLayout({
+    required this.topicInput,
+    required this.contentInput,
+    required this.sendButton,
+    required this.contentController,
+    required this.contentFocusNode,
+  });
 
-  @override
-  void dispose() {
-    _topicController.dispose();
-    _contentController.dispose();
-    _contentFocusNode.dispose();
-    super.dispose();
-  }
+  final Widget? topicInput;
+  final Widget contentInput;
+  final Widget sendButton;
+  final ComposeContentController contentController;
+  final FocusNode contentFocusNode;
 
   @override
   Widget build(BuildContext context) {
@@ -713,12 +701,6 @@ class _StreamComposeBoxState extends State<_StreamComposeBox> {
       ),
     );
 
-    final topicInput = TextField(
-      controller: _topicController,
-      style: TextStyle(color: colorScheme.onSurface),
-      decoration: const InputDecoration(hintText: 'Topic'),
-    );
-
     return Material(
       color: colorScheme.surfaceVariant,
       child: SafeArea(
@@ -731,31 +713,75 @@ class _StreamComposeBoxState extends State<_StreamComposeBox> {
                 child: Theme(
                   data: inputThemeData,
                   child: Column(children: [
-                    topicInput,
-                    const SizedBox(height: 8),
-                    _StreamContentInput(
-                      narrow: widget.narrow,
-                      topicController: _topicController,
-                      controller: _contentController,
-                      focusNode: _contentFocusNode),
+                    if (topicInput != null) topicInput!,
+                    if (topicInput != null) const SizedBox(height: 8),
+                    contentInput,
                   ]))),
               const SizedBox(width: 8),
-              _SendButton(
-                topicController: _topicController,
-                contentController: _contentController,
-                getDestination: () => StreamDestination(
-                  widget.narrow.streamId, _topicController.textNormalized),
-              ),
+              sendButton,
             ]),
             Theme(
               data: themeData.copyWith(
                 iconTheme: themeData.iconTheme.copyWith(color: colorScheme.onSurfaceVariant)),
               child: Row(children: [
-                _AttachFileButton(contentController: _contentController, contentFocusNode: _contentFocusNode),
-                _AttachMediaButton(contentController: _contentController, contentFocusNode: _contentFocusNode),
-                _AttachFromCameraButton(contentController: _contentController, contentFocusNode: _contentFocusNode),
+                _AttachFileButton(contentController: contentController, contentFocusNode: contentFocusNode),
+                _AttachMediaButton(contentController: contentController, contentFocusNode: contentFocusNode),
+                _AttachFromCameraButton(contentController: contentController, contentFocusNode: contentFocusNode),
               ])),
-          ]))));
+          ]))));  }
+}
+
+/// A compose box for use in a stream narrow.
+///
+/// This offers a text input for the topic to send to,
+/// in addition to a text input for the message content.
+class _StreamComposeBox extends StatefulWidget {
+  const _StreamComposeBox({required this.narrow});
+
+  /// The narrow on view in the message list.
+  final StreamNarrow narrow;
+
+  @override
+  State<_StreamComposeBox> createState() => _StreamComposeBoxState();
+}
+
+class _StreamComposeBoxState extends State<_StreamComposeBox> {
+  final _topicController = ComposeTopicController();
+  final _contentController = ComposeContentController();
+  final _contentFocusNode = FocusNode();
+
+  @override
+  void dispose() {
+    _topicController.dispose();
+    _contentController.dispose();
+    _contentFocusNode.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+
+    return _ComposeBoxLayout(
+      contentController: _contentController,
+      contentFocusNode: _contentFocusNode,
+      topicInput: TextField(
+        controller: _topicController,
+        style: TextStyle(color: colorScheme.onSurface),
+        decoration: const InputDecoration(hintText: 'Topic'),
+      ),
+      contentInput: _StreamContentInput(
+        narrow: widget.narrow,
+        topicController: _topicController,
+        controller: _contentController,
+        focusNode: _contentFocusNode,
+      ),
+      sendButton: _SendButton(
+        topicController: _topicController,
+        contentController: _contentController,
+        getDestination: () => StreamDestination(
+          widget.narrow.streamId, _topicController.textNormalized),
+      ));
   }
 }