toolbar is now only present when textfield is focused

also added it to manage account page

lib/pages/create_post/create_post.dart

@@ -31,6 +31,7 @@ class CreatePostPage extends HookWidget {
     );
 
     final titleFocusNode = useFocusNode();
+    final editorFocusNode = useFocusNode();
 
     handleSubmit(Jwt token) async {
       if (formKey.currentState!.validate()) {
@@ -63,6 +64,7 @@ class CreatePostPage extends HookWidget {
         labelText: L10n.of(context).body,
         instanceHost: store.instanceHost,
         fancy: store.showFancy,
+        focusNode: editorFocusNode,
       ),
     );
 
@@ -146,6 +148,7 @@ class CreatePostPage extends HookWidget {
                 children: [
                   const Spacer(),
                   EditorToolbar(
+                    editorFocusNode: editorFocusNode,
                     controller: bodyController,
                     instanceHost: context.read<CreatePostStore>().instanceHost,
                   ),

lib/pages/manage_account.dart

@@ -234,7 +234,9 @@ class _ManageAccount extends HookWidget {
       }
     }
 
-    return ListView(
+    return Stack(
+      children: [
+        ListView(
           padding: const EdgeInsets.symmetric(horizontal: 15),
           children: [
             _ImagePicker(
@@ -253,7 +255,8 @@ class _ManageAccount extends HookWidget {
               informAcceptedRef: informAcceptedBannerRef,
             ),
             const SizedBox(height: 8),
-        Text(L10n.of(context).display_name, style: theme.textTheme.headline6),
+            Text(L10n.of(context).display_name,
+                style: theme.textTheme.headline6),
             TextField(
               controller: displayNameController,
               onSubmitted: (_) => bioFocusNode.requestFocus(),
@@ -277,7 +280,8 @@ class _ManageAccount extends HookWidget {
               onSubmitted: (_) => matrixUserFocusNode.requestFocus(),
             ),
             const SizedBox(height: 8),
-        Text(L10n.of(context).matrix_user, style: theme.textTheme.headline6),
+            Text(L10n.of(context).matrix_user,
+                style: theme.textTheme.headline6),
             TextField(
               focusNode: matrixUserFocusNode,
               controller: matrixUserController,
@@ -379,6 +383,21 @@ class _ManageAccount extends HookWidget {
             ),
             const BottomSafe(),
           ],
+        ),
+        SafeArea(
+          child: Column(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            children: [
+              const Spacer(),
+              EditorToolbar(
+                editorFocusNode: bioFocusNode,
+                controller: bioController,
+                instanceHost: user.instanceHost,
+              ),
+            ],
+          ),
+        ),
+      ],
     );
   }
 }

lib/widgets/editor/editor.dart

@@ -52,9 +52,11 @@ class Editor extends HookWidget {
       );
     }
 
-    return TextField(
+    return FocusScope(
-      controller: actualController,
+      child: Focus(
         focusNode: focusNode,
+        child: TextField(
+          controller: actualController,
           autofocus: autofocus,
           keyboardType: TextInputType.multiline,
           textCapitalization: TextCapitalization.sentences,
@@ -64,6 +66,8 @@ class Editor extends HookWidget {
           minLines: minLines,
           decoration: InputDecoration(labelText: labelText),
           inputFormatters: [MarkdownFormatter()],
+        ),
+      ),
     );
   }
 }

lib/widgets/editor/editor_toolbar.dart

@@ -39,24 +39,36 @@ enum HeaderLevel {
   final int value;
 }
 
-class EditorToolbar extends StatelessWidget {
+class EditorToolbar extends HookWidget {
   final TextEditingController controller;
   final String instanceHost;
   final EditorToolbarStore store;
+  final FocusNode editorFocusNode;
   static const _height = 50.0;
 
   EditorToolbar({
     required this.controller,
     required this.instanceHost,
+    required this.editorFocusNode,
   }) : store = EditorToolbarStore(instanceHost);
 
   @override
   Widget build(BuildContext context) {
+    final visible = useState(editorFocusNode.hasFocus);
+    useEffect(() {
+      editorFocusNode.addListener(() {
+        visible.value = editorFocusNode.hasFocus;
+      });
+
+      return;
+    }, [editorFocusNode]);
+
     return MobxProvider(
       create: (context) => store,
       child: AsyncStoreListener(
         asyncStore: store.imageUploadState,
-        child: Container(
+        child: visible.value
+            ? Container(
                 height: _height,
                 width: double.infinity,
                 color: Theme.of(context).cardColor,
@@ -69,7 +81,8 @@ class EditorToolbar extends StatelessWidget {
                     ),
                   ),
                 ),
-        ),
+              )
+            : const SizedBox.shrink(),
       ),
     );
   }

lib/widgets/write_comment.dart

@@ -36,6 +36,7 @@ class WriteComment extends HookWidget {
     final showFancy = useState(false);
     final delayed = useDelayedLoading();
     final loggedInAction = useLoggedInAction(post.instanceHost);
+    final editorFocusNode = useFocusNode();
 
     final preview = () {
       final body = () {
@@ -117,6 +118,7 @@ class WriteComment extends HookWidget {
                 controller: controller,
                 autofocus: true,
                 fancy: showFancy.value,
+                focusNode: editorFocusNode,
               ),
               Row(
                 mainAxisAlignment: MainAxisAlignment.end,
@@ -141,6 +143,7 @@ class WriteComment extends HookWidget {
               children: [
                 const Spacer(),
                 EditorToolbar(
+                  editorFocusNode: editorFocusNode,
                   controller: controller,
                   instanceHost: post.instanceHost,
                 ),