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,28 +667,20 @@ class _SendButtonState extends State<_SendButton> {
   }
 }
 
-/// The compose box for writing a stream message.
-class _StreamComposeBox extends StatefulWidget {
-  const _StreamComposeBox({required this.narrow});
-
-  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) {
@@ -709,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(
@@ -727,31 +713,71 @@ 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),
               ])),
-          ]))));
+          ]))));  }
+}
+
+/// The compose box for writing a stream message.
+class _StreamComposeBox extends StatefulWidget {
+  const _StreamComposeBox({required this.narrow});
+
+  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),
+      ));
   }
 }