♻️ Move the title, description out of the settings sheet

lib/screens/posts/compose.dart

@@ -207,8 +207,6 @@ class PostComposeScreen extends HookConsumerWidget {
         isScrollControlled: true,
         builder:
             (context) => ComposeSettingsSheet(
-              titleController: state.titleController,
-              descriptionController: state.descriptionController,
               visibility: state.visibility,
               tagsController: state.tagsController,
               categoriesController: state.categoriesController,
@@ -370,14 +368,52 @@ class PostComposeScreen extends HookConsumerWidget {
                     // Post content form
                     Expanded(
                       child: SingleChildScrollView(
-                        padding: const EdgeInsets.symmetric(vertical: 12),
+                        padding: const EdgeInsets.symmetric(vertical: 16),
                         child: Column(
                           crossAxisAlignment: CrossAxisAlignment.start,
                           children: [
+                            TextField(
+                              controller: state.titleController,
+                              decoration: InputDecoration(
+                                hintText: 'postTitle'.tr(),
+                                border: InputBorder.none,
+                                isCollapsed: true,
+                                contentPadding: const EdgeInsets.symmetric(
+                                  vertical: 8,
+                                  horizontal: 8,
+                                ),
+                              ),
+                              style: theme.textTheme.titleMedium,
+                              onTapOutside:
+                                  (_) =>
+                                      FocusManager.instance.primaryFocus
+                                          ?.unfocus(),
+                            ),
+                            TextField(
+                              controller: state.descriptionController,
+                              decoration: InputDecoration(
+                                hintText: 'postDescription'.tr(),
+                                border: InputBorder.none,
+                                isCollapsed: true,
+                                contentPadding: const EdgeInsets.fromLTRB(
+                                  8,
+                                  4,
+                                  8,
+                                  12,
+                                ),
+                              ),
+                              style: theme.textTheme.bodyMedium,
+                              minLines: 1,
+                              maxLines: 3,
+                              onTapOutside:
+                                  (_) =>
+                                      FocusManager.instance.primaryFocus
+                                          ?.unfocus(),
+                            ),
                             // Content field with borderless design
-                            RawKeyboardListener(
+                            KeyboardListener(
                               focusNode: FocusNode(),
-                              onKey:
+                              onKeyEvent:
                                   (event) => ComposeLogic.handleKeyPress(
                                     event,
                                     state,
@@ -393,7 +429,11 @@ class PostComposeScreen extends HookConsumerWidget {
                                 decoration: InputDecoration(
                                   border: InputBorder.none,
                                   hintText: 'postContent'.tr(),
-                                  contentPadding: const EdgeInsets.all(8),
+                                  isCollapsed: true,
+                                  contentPadding: const EdgeInsets.symmetric(
+                                    vertical: 8,
+                                    horizontal: 8,
+                                  ),
                                 ),
                                 maxLines: null,
                                 onTapOutside:

lib/screens/posts/compose_article.dart

@@ -140,8 +140,6 @@ class ArticleComposeScreen extends HookConsumerWidget {
         isScrollControlled: true,
         builder:
             (context) => ComposeSettingsSheet(
-              titleController: state.titleController,
-              descriptionController: state.descriptionController,
               visibility: state.visibility,
               tagsController: state.tagsController,
               categoriesController: state.categoriesController,
@@ -242,10 +240,39 @@ class ArticleComposeScreen extends HookConsumerWidget {
           child: Column(
             crossAxisAlignment: CrossAxisAlignment.start,
             children: [
+              TextField(
+                controller: state.titleController,
+                decoration: InputDecoration(
+                  hintText: 'postTitle'.tr(),
+                  border: InputBorder.none,
+                  isCollapsed: true,
+                  contentPadding: const EdgeInsets.symmetric(
+                    vertical: 8,
+                    horizontal: 8,
+                  ),
+                ),
+                style: theme.textTheme.titleMedium,
+                onTapOutside:
+                    (_) => FocusManager.instance.primaryFocus?.unfocus(),
+              ),
+              TextField(
+                controller: state.descriptionController,
+                decoration: InputDecoration(
+                  hintText: 'postDescription'.tr(),
+                  border: InputBorder.none,
+                  isCollapsed: true,
+                  contentPadding: const EdgeInsets.fromLTRB(8, 4, 8, 12),
+                ),
+                style: theme.textTheme.bodyMedium,
+                minLines: 1,
+                maxLines: 3,
+                onTapOutside:
+                    (_) => FocusManager.instance.primaryFocus?.unfocus(),
+              ),
               Expanded(
-                child: RawKeyboardListener(
+                child: KeyboardListener(
                   focusNode: FocusNode(),
-                  onKey:
+                  onKeyEvent:
                       (event) => _handleKeyPress(
                         event,
                         state,
@@ -454,7 +481,7 @@ class ArticleComposeScreen extends HookConsumerWidget {
                               flex: showPreview.value ? 1 : 2,
                               child: buildEditorPane(),
                             ),
-                            const VerticalDivider(),
+                            if (showPreview.value) const VerticalDivider(),
                             if (showPreview.value)
                               Expanded(child: buildPreviewPane()),
                           ],
@@ -475,7 +502,7 @@ class ArticleComposeScreen extends HookConsumerWidget {
 
   // Helper method to handle keyboard shortcuts
   void _handleKeyPress(
-    RawKeyEvent event,
+    KeyEvent event,
     ComposeState state,
     WidgetRef ref,
     BuildContext context, {
@@ -485,7 +512,9 @@ class ArticleComposeScreen extends HookConsumerWidget {
 
     final isPaste = event.logicalKey == LogicalKeyboardKey.keyV;
     final isSave = event.logicalKey == LogicalKeyboardKey.keyS;
-    final isModifierPressed = event.isMetaPressed || event.isControlPressed;
+    final isModifierPressed =
+        HardwareKeyboard.instance.isMetaPressed ||
+        HardwareKeyboard.instance.isControlPressed;
     final isSubmit = event.logicalKey == LogicalKeyboardKey.enter;
 
     if (isPaste && isModifierPressed) {

lib/widgets/post/compose_settings_sheet.dart

@@ -99,8 +99,6 @@ class ChipTagInputField extends StatelessWidget {
 }
 
 class ComposeSettingsSheet extends HookWidget {
-  final TextEditingController titleController;
-  final TextEditingController descriptionController;
   final ValueNotifier<int> visibility;
   final VoidCallback? onVisibilityChanged;
   final StringTagController tagsController;
@@ -108,8 +106,6 @@ class ComposeSettingsSheet extends HookWidget {
 
   const ComposeSettingsSheet({
     super.key,
-    required this.titleController,
-    required this.descriptionController,
     required this.visibility,
     this.onVisibilityChanged,
     required this.tagsController,
@@ -216,39 +212,6 @@ class ComposeSettingsSheet extends HookWidget {
           crossAxisAlignment: CrossAxisAlignment.start,
           spacing: 16,
           children: [
-            // Title field
-            TextField(
-              controller: titleController,
-              decoration: InputDecoration(
-                labelText: 'postTitle'.tr(),
-                hintText: 'postTitle'.tr(),
-                border: OutlineInputBorder(
-                  borderRadius: BorderRadius.circular(12),
-                ),
-                contentPadding: const EdgeInsets.all(16),
-              ),
-              style: theme.textTheme.titleMedium,
-              onTapOutside:
-                  (_) => FocusManager.instance.primaryFocus?.unfocus(),
-            ),
-
-            // Description field
-            TextField(
-              controller: descriptionController,
-              decoration: InputDecoration(
-                labelText: 'postDescription'.tr(),
-                hintText: 'postDescription'.tr(),
-                border: OutlineInputBorder(
-                  borderRadius: BorderRadius.circular(12),
-                ),
-                contentPadding: const EdgeInsets.all(16),
-              ),
-              style: theme.textTheme.bodyMedium,
-              maxLines: 3,
-              onTapOutside:
-                  (_) => FocusManager.instance.primaryFocus?.unfocus(),
-            ),
-
             // Tags field
             TextFieldTags(
               textfieldTagsController: tagsController,

lib/widgets/post/compose_shared.dart

@@ -689,7 +689,7 @@ class ComposeLogic {
   }
 
   static void handleKeyPress(
-    RawKeyEvent event,
+    KeyEvent event,
     ComposeState state,
     WidgetRef ref,
     BuildContext context, {
@@ -701,7 +701,9 @@ class ComposeLogic {
 
     final isPaste = event.logicalKey == LogicalKeyboardKey.keyV;
     final isSave = event.logicalKey == LogicalKeyboardKey.keyS;
-    final isModifierPressed = event.isMetaPressed || event.isControlPressed;
+    final isModifierPressed =
+        HardwareKeyboard.instance.isMetaPressed ||
+        HardwareKeyboard.instance.isControlPressed;
     final isSubmit = event.logicalKey == LogicalKeyboardKey.enter;
 
     if (isPaste && isModifierPressed) {

lib/widgets/post/compose_toolbar.dart

@@ -63,6 +63,7 @@ class ComposeToolbar extends HookConsumerWidget {
 
     return Material(
       elevation: 4,
+      color: Theme.of(context).colorScheme.surfaceContainerLow,
       child: Center(
         child: ConstrainedBox(
           constraints: const BoxConstraints(maxWidth: 560),