💄 Better article editor

assets/i18n/en-US.json

@@ -1594,5 +1594,8 @@
     "other": "{} tasks"
   },
   "setAsThumbnail": "Set as thumbnail",
-  "unsetAsThumbnail": "Unset as thumbnail"
+  "unsetAsThumbnail": "Unset as thumbnail",
+  "sidebar": "Sidebar",
+  "dropFilesHere": "Drop your files here",
+  "dragAndDropToAttach": "Drag your files here to attach it"
 }

lib/screens/dashboard/dash.dart

@@ -1,5 +1,6 @@
 import 'dart:math' as math;
 
+import 'package:desktop_drop/desktop_drop.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
@@ -26,9 +27,11 @@ import 'package:island/models/activity.dart';
 import 'package:island/screens/notification.dart';
 import 'package:material_symbols_icons/material_symbols_icons.dart';
 import 'package:slide_countdown/slide_countdown.dart';
-import 'package:styled_widget/styled_widget.dart';
+import 'package:island/widgets/share/share_sheet.dart';
 import 'dart:async';
 
+import 'package:styled_widget/styled_widget.dart';
+
 class DashboardScreen extends HookConsumerWidget {
   const DashboardScreen({super.key});
 
@@ -51,77 +54,129 @@ class DashboardGrid extends HookConsumerWidget {
 
     final userInfo = ref.watch(userInfoProvider);
 
-    return Container(
+    final dragging = useState(false);
-      constraints: BoxConstraints(
+
-        maxHeight: isWide
+    return DropTarget(
-            ? math.min(640, MediaQuery.sizeOf(context).height * 0.65)
+      onDragDone: (detail) {
-            : MediaQuery.sizeOf(context).height,
+        dragging.value = false;
-      ),
+        if (detail.files.isNotEmpty) {
-      padding: isWide
+          showModalBottomSheet(
-          ? EdgeInsets.only(top: devicePadding.top)
+            context: context,
-          : EdgeInsets.only(top: 24 + devicePadding.top),
+            isScrollControlled: true,
-      child: Column(
+            useRootNavigator: true,
-        spacing: 16,
+            builder: (context) => ShareSheet.files(files: detail.files),
-        mainAxisAlignment: MainAxisAlignment.center,
+          );
+        }
+      },
+      onDragEntered: (_) => dragging.value = true,
+      onDragExited: (_) => dragging.value = false,
+      child: Stack(
         children: [
-          // Clock card spans full width
+          Container(
-          if (isWide)
+            constraints: BoxConstraints(
-            ClockCard().padding(horizontal: 24)
+              maxHeight: isWide
-          else
+                  ? math.min(640, MediaQuery.sizeOf(context).height * 0.65)
-            Row(
+                  : MediaQuery.sizeOf(context).height,
+            ),
+            padding: isWide
+                ? EdgeInsets.only(top: devicePadding.top)
+                : EdgeInsets.only(top: 24 + devicePadding.top),
+            child: Column(
+              spacing: 16,
               mainAxisAlignment: MainAxisAlignment.center,
               children: [
-                const Gap(8),
+                // Clock card spans full width
-                Expanded(child: ClockCard(compact: true)),
+                if (isWide)
-                IconButton(
+                  ClockCard().padding(horizontal: 24)
-                  onPressed: () {
+                else
-                    eventBus.fire(CommandPaletteTriggerEvent());
+                  Row(
-                  },
+                    mainAxisAlignment: MainAxisAlignment.center,
-                  icon: const Icon(Symbols.search),
+                    children: [
-                  tooltip: 'searchAnything'.tr(),
+                      const Gap(8),
-                ),
+                      Expanded(child: ClockCard(compact: true)),
+                      IconButton(
+                        onPressed: () {
+                          eventBus.fire(CommandPaletteTriggerEvent());
+                        },
+                        icon: const Icon(Symbols.search),
+                        tooltip: 'searchAnything'.tr(),
+                      ),
+                    ],
+                  ).padding(horizontal: 24),
+                // Row with two cards side by side
+                if (isWide)
+                  Padding(
+                    padding: EdgeInsets.symmetric(horizontal: isWide ? 24 : 16),
+                    child: SearchBar(
+                      hintText: 'searchAnything'.tr(),
+                      constraints: const BoxConstraints(minHeight: 56),
+                      leading: const Icon(
+                        Symbols.search,
+                      ).padding(horizontal: 24),
+                      readOnly: true,
+                      onTap: () {
+                        eventBus.fire(CommandPaletteTriggerEvent());
+                      },
+                    ),
+                  ),
+                if (userInfo.value != null)
+                  Expanded(
+                    child:
+                        SingleChildScrollView(
+                              padding: isWide
+                                  ? const EdgeInsets.symmetric(horizontal: 24)
+                                  : EdgeInsets.only(
+                                      bottom: 64 + devicePadding.bottom,
+                                    ),
+                              scrollDirection: isWide
+                                  ? Axis.horizontal
+                                  : Axis.vertical,
+                              child: isWide
+                                  ? _DashboardGridWide()
+                                  : _DashboardGridNarrow(),
+                            )
+                            .clipRRect(
+                              topLeft: isWide ? 0 : 12,
+                              topRight: isWide ? 0 : 12,
+                            )
+                            .padding(horizontal: isWide ? 0 : 16),
+                  )
+                else
+                  Center(
+                    child: _UnauthorizedCard(isWide: isWide),
+                  ).padding(horizontal: isWide ? 24 : 16),
               ],
-            ).padding(horizontal: 24),
+            ),
-          // Row with two cards side by side
+          ),
-          if (isWide)
+          if (dragging.value)
-            Padding(
+            Positioned.fill(
-              padding: EdgeInsets.symmetric(horizontal: isWide ? 24 : 16),
+              child: Container(
-              child: SearchBar(
+                color: Theme.of(
-                hintText: 'searchAnything'.tr(),
+                  context,
-                constraints: const BoxConstraints(minHeight: 56),
+                ).colorScheme.primaryContainer.withOpacity(0.9),
-                leading: const Icon(Symbols.search).padding(horizontal: 24),
+                child: Center(
-                readOnly: true,
+                  child: Column(
-                onTap: () {
+                    mainAxisSize: MainAxisSize.min,
-                  eventBus.fire(CommandPaletteTriggerEvent());
+                    children: [
-                },
+                      Icon(
+                        Symbols.upload_file,
+                        size: 64,
+                        color: Theme.of(context).colorScheme.primary,
+                      ),
+                      const Gap(16),
+                      Text(
+                        'dropToShare'.tr(),
+                        style: Theme.of(context).textTheme.headlineMedium
+                            ?.copyWith(
+                              color: Theme.of(context).colorScheme.primary,
+                              fontWeight: FontWeight.bold,
+                            ),
+                      ),
+                    ],
+                  ),
+                ),
               ),
             ),
-          if (userInfo.value != null)
-            Expanded(
-              child:
-                  SingleChildScrollView(
-                        padding: isWide
-                            ? const EdgeInsets.symmetric(horizontal: 24)
-                            : EdgeInsets.only(
-                                bottom: 64 + devicePadding.bottom,
-                              ),
-                        scrollDirection: isWide
-                            ? Axis.horizontal
-                            : Axis.vertical,
-                        child: isWide
-                            ? _DashboardGridWide()
-                            : _DashboardGridNarrow(),
-                      )
-                      .clipRRect(
-                        topLeft: isWide ? 0 : 12,
-                        topRight: isWide ? 0 : 12,
-                      )
-                      .padding(horizontal: isWide ? 0 : 16),
-            )
-          else
-            Center(
-              child: _UnauthorizedCard(isWide: isWide),
-            ).padding(horizontal: isWide ? 24 : 16),
         ],
       ),
     );

lib/screens/explore.dart

@@ -1,4 +1,3 @@
-import 'package:desktop_drop/desktop_drop.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
@@ -29,10 +28,9 @@ import 'package:island/widgets/realm/realm_card.dart';
 import 'package:island/widgets/publisher/publisher_card.dart';
 import 'package:island/widgets/web_article_card.dart';
 import 'package:island/services/event_bus.dart';
-import 'package:island/widgets/share/share_sheet.dart';
 import 'package:styled_widget/styled_widget.dart';
 import 'package:super_sliver_list/super_sliver_list.dart';
-import 'package:island/widgets/posts/post_subscription_filter.dart';
+import 'package:island/widgets/post/filters/post_subscription_filter.dart';
 import 'package:island/pods/post/post_list.dart';
 
 class ExploreScreen extends HookConsumerWidget {
@@ -193,118 +191,66 @@ class ExploreScreen extends HookConsumerWidget {
             hasSubscriptionsSelected,
           );
 
-    final dragging = useState(false);
+    return AppScaffold(
-
+      isNoBackground: false,
-    return DropTarget(
+      appBar: appBar,
-      onDragDone: (detail) {
+      floatingActionButton: userInfo.value != null
-        dragging.value = false;
+          ? FloatingActionButton(
-        if (detail.files.isNotEmpty) {
+              child: const Icon(Symbols.create),
-          showModalBottomSheet(
+              onPressed: () {
-            context: context,
+                showModalBottomSheet(
-            isScrollControlled: true,
+                  context: context,
-            useRootNavigator: true,
+                  isScrollControlled: true,
-            builder: (context) => ShareSheet.files(files: detail.files),
+                  useRootNavigator: true,
-          );
+                  builder: (context) => Column(
-        }
-      },
-      onDragEntered: (_) => dragging.value = true,
-      onDragExited: (_) => dragging.value = false,
-      child: Stack(
-        children: [
-          AppScaffold(
-            isNoBackground: false,
-            appBar: appBar,
-            floatingActionButton: userInfo.value != null
-                ? FloatingActionButton(
-                    child: const Icon(Symbols.create),
-                    onPressed: () {
-                      showModalBottomSheet(
-                        context: context,
-                        isScrollControlled: true,
-                        useRootNavigator: true,
-                        builder: (context) => Column(
-                          mainAxisSize: MainAxisSize.min,
-                          children: [
-                            const Gap(40),
-                            ListTile(
-                              contentPadding: const EdgeInsets.symmetric(
-                                horizontal: 24,
-                              ),
-                              leading: const Icon(Symbols.post_add_rounded),
-                              title: Text('postCompose').tr(),
-                              onTap: () async {
-                                Navigator.of(context).pop();
-                                await PostComposeSheet.show(context);
-                              },
-                            ),
-                            ListTile(
-                              contentPadding: const EdgeInsets.symmetric(
-                                horizontal: 24,
-                              ),
-                              leading: const Icon(Symbols.article),
-                              title: Text('articleCompose').tr(),
-                              onTap: () async {
-                                Navigator.of(context).pop();
-                                GoRouter.of(
-                                  context,
-                                ).pushNamed('articleCompose');
-                              },
-                            ),
-                            const Gap(16),
-                          ],
-                        ),
-                      );
-                    },
-                  ).padding(bottom: MediaQuery.of(context).padding.bottom)
-                : null,
-            body: isWide
-                ? _buildWideBody(
-                    context,
-                    ref,
-                    filterBar,
-                    user,
-                    notificationCount,
-                    query,
-                    events,
-                    selectedDay,
-                    currentFilter.value,
-                    selectedPublisherNames,
-                    selectedCategoryIds,
-                    selectedTagIds,
-                  )
-                : _buildNarrowBody(context, ref, currentFilter.value),
-          ),
-          if (dragging.value)
-            Positioned.fill(
-              child: Container(
-                color: Theme.of(
-                  context,
-                ).colorScheme.primaryContainer.withOpacity(0.9),
-                child: Center(
-                  child: Column(
                     mainAxisSize: MainAxisSize.min,
                     children: [
-                      Icon(
+                      const Gap(40),
-                        Symbols.upload_file,
+                      ListTile(
-                        size: 64,
+                        contentPadding: const EdgeInsets.symmetric(
-                        color: Theme.of(context).colorScheme.primary,
+                          horizontal: 24,
+                        ),
+                        leading: const Icon(Symbols.post_add_rounded),
+                        title: Text('postCompose').tr(),
+                        onTap: () async {
+                          Navigator.of(context).pop();
+                          await PostComposeSheet.show(context);
+                        },
+                      ),
+                      ListTile(
+                        contentPadding: const EdgeInsets.symmetric(
+                          horizontal: 24,
+                        ),
+                        leading: const Icon(Symbols.article),
+                        title: Text('articleCompose').tr(),
+                        onTap: () async {
+                          Navigator.of(context).pop();
+                          GoRouter.of(context).pushNamed('articleCompose');
+                        },
                       ),
                       const Gap(16),
-                      Text(
-                        'dropToShare'.tr(),
-                        style: Theme.of(context).textTheme.headlineMedium
-                            ?.copyWith(
-                              color: Theme.of(context).colorScheme.primary,
-                              fontWeight: FontWeight.bold,
-                            ),
-                      ),
                     ],
                   ),
-                ),
+                );
-              ),
+              },
-            ),
+            ).padding(bottom: MediaQuery.of(context).padding.bottom)
-        ],
+          : null,
-      ),
+      body: isWide
+          ? _buildWideBody(
+              context,
+              ref,
+              filterBar,
+              user,
+              notificationCount,
+              query,
+              events,
+              selectedDay,
+              currentFilter.value,
+              selectedPublisherNames,
+              selectedCategoryIds,
+              selectedTagIds,
+            )
+          : _buildNarrowBody(context, ref, currentFilter.value),
     );
   }
 

lib/screens/posts/compose_article.dart

@@ -15,6 +15,7 @@ import 'package:island/services/responsive.dart';
 import 'package:island/widgets/app_scaffold.dart';
 import 'package:island/widgets/content/cloud_files.dart';
 import 'package:island/widgets/content/markdown.dart';
+import 'package:island/widgets/common/responsive_sidebar.dart';
 import 'package:island/widgets/post/compose_form_fields.dart';
 import 'package:island/widgets/post/compose_shared.dart';
 import 'package:island/widgets/post/compose_attachments.dart';
@@ -87,6 +88,7 @@ class ArticleComposeScreen extends HookConsumerWidget {
     }, [state]);
 
     final showPreview = useState(false);
+    final showSidebar = useState(false);
 
     // Initialize publisher once when data is available
     useEffect(() {
@@ -140,17 +142,9 @@ class ArticleComposeScreen extends HookConsumerWidget {
     }, []);
 
     // Helper methods
-    void showSettingsSheet() {
-      showModalBottomSheet(
-        context: context,
-        isScrollControlled: true,
-        builder: (context) => ComposeSettingsSheet(state: state),
-      );
-    }
-
     Widget buildPreviewPane() {
       final widgetItem = SingleChildScrollView(
-        padding: const EdgeInsets.symmetric(vertical: 14, horizontal: 8),
+        padding: const EdgeInsets.symmetric(vertical: 24, horizontal: 24),
         child: ValueListenableBuilder<TextEditingValue>(
           valueListenable: state.titleController,
           builder: (context, titleValue, _) {
@@ -170,7 +164,7 @@ class ArticleComposeScreen extends HookConsumerWidget {
                               fontWeight: FontWeight.bold,
                             ),
                           ),
-                          const Gap(16),
+                          const Gap(20),
                         ],
                         if (descriptionValue.text.isNotEmpty) ...[
                           Text(
@@ -179,7 +173,7 @@ class ArticleComposeScreen extends HookConsumerWidget {
                               color: colorScheme.onSurface.withOpacity(0.7),
                             ),
                           ),
-                          const Gap(16),
+                          const Gap(20),
                         ],
                         if (contentValue.text.isNotEmpty)
                           MarkdownTextContent(
@@ -233,7 +227,7 @@ class ArticleComposeScreen extends HookConsumerWidget {
             ),
             Expanded(
               child: Padding(
-                padding: const EdgeInsets.symmetric(horizontal: 8),
+                padding: const EdgeInsets.symmetric(horizontal: 16),
                 child: widgetItem,
               ),
             ),
@@ -251,6 +245,7 @@ class ArticleComposeScreen extends HookConsumerWidget {
             children: [
               Expanded(
                 child: SingleChildScrollView(
+                  padding: const EdgeInsets.all(24),
                   child: ComposeFormFields(
                     state: state,
                     showPublisherAvatar: false,
@@ -265,12 +260,9 @@ class ArticleComposeScreen extends HookConsumerWidget {
                         }
                       });
                     },
-                  ).padding(top: 16),
+                  ),
                 ),
               ),
-
-              // Attachments preview
-              ArticleComposeAttachments(state: state),
             ],
           ),
         ),
@@ -290,8 +282,15 @@ class ArticleComposeScreen extends HookConsumerWidget {
           title: ValueListenableBuilder<TextEditingValue>(
             valueListenable: state.titleController,
             builder: (context, titleValue, _) {
-              return Text(
+              return AnimatedSwitcher(
-                titleValue.text.isEmpty ? 'postTitle'.tr() : titleValue.text,
+                duration: const Duration(milliseconds: 150),
+                switchInCurve: Curves.fastEaseInToSlowEaseOut,
+                switchOutCurve: Curves.fastEaseInToSlowEaseOut,
+                child: Text(
+                  titleValue.text.isEmpty ? 'postTitle'.tr() : titleValue.text,
+                  key: ValueKey(titleValue.text),
+                  overflow: TextOverflow.ellipsis,
+                ),
               );
             },
           ),
@@ -319,9 +318,9 @@ class ArticleComposeScreen extends HookConsumerWidget {
               },
             ),
             IconButton(
-              icon: const Icon(Symbols.settings),
+              icon: const Icon(Symbols.tune),
-              onPressed: showSettingsSheet,
+              onPressed: () => showSidebar.value = !showSidebar.value,
-              tooltip: 'postSettings'.tr(),
+              tooltip: 'sidebar'.tr(),
             ),
             Tooltip(
               message: 'togglePreview'.tr(),
@@ -333,17 +332,26 @@ class ArticleComposeScreen extends HookConsumerWidget {
             ValueListenableBuilder<bool>(
               valueListenable: state.submitting,
               builder: (context, submitting, _) {
-                return IconButton(
+                return AnimatedSwitcher(
-                  onPressed: submitting
+                  duration: const Duration(milliseconds: 200),
-                      ? null
+                  switchInCurve: Curves.easeOut,
-                      : () => ComposeLogic.performAction(
+                  switchOutCurve: Curves.easeIn,
-                          ref,
+                  transitionBuilder:
-                          state,
+                      (Widget child, Animation<double> animation) {
-                          context,
+                        return FadeTransition(
-                          originalPost: originalPost,
+                          opacity: animation,
-                        ),
+                          child: ScaleTransition(
-                  icon: submitting
+                            scale: Tween<double>(
+                              begin: 0.8,
+                              end: 1.0,
+                            ).animate(animation),
+                            child: child,
+                          ),
+                        );
+                      },
+                  child: submitting
                       ? SizedBox(
+                          key: const ValueKey('submitting'),
                           width: 28,
                           height: 28,
                           child: const CircularProgressIndicator(
@@ -351,8 +359,19 @@ class ArticleComposeScreen extends HookConsumerWidget {
                             strokeWidth: 2.5,
                           ),
                         ).center()
-                      : Icon(
+                      : IconButton(
-                          originalPost != null ? Symbols.edit : Symbols.upload,
+                          key: const ValueKey('icon'),
+                          onPressed: () => ComposeLogic.performAction(
+                            ref,
+                            state,
+                            context,
+                            originalPost: originalPost,
+                          ),
+                          icon: Icon(
+                            originalPost != null
+                                ? Symbols.edit
+                                : Symbols.upload,
+                          ),
                         ),
                 );
               },
@@ -363,24 +382,53 @@ class ArticleComposeScreen extends HookConsumerWidget {
         body: Column(
           children: [
             Expanded(
-              child: Padding(
+              child: ResponsiveSidebar(
-                padding: const EdgeInsets.only(left: 16, right: 16),
+                sidebarWidth: 480,
-                child: isWideScreen(context)
+                attachmentsContent: ArticleComposeAttachments(state: state),
-                    ? Row(
+                settingsContent: ComposeSettingsSheet(state: state),
-                        spacing: 16,
+                showSidebar: showSidebar,
-                        children: [
+                mainContent: Padding(
-                          Expanded(
+                  padding: const EdgeInsets.only(left: 16, right: 16),
-                            flex: showPreview.value ? 1 : 2,
+                  child: AnimatedSwitcher(
-                            child: buildEditorPane(),
+                    duration: const Duration(milliseconds: 250),
+                    switchInCurve: Curves.easeOutCubic,
+                    switchOutCurve: Curves.easeOutCubic,
+                    transitionBuilder:
+                        (Widget child, Animation<double> animation) {
+                          return FadeTransition(
+                            opacity: animation,
+                            child: SlideTransition(
+                              position:
+                                  Tween<Offset>(
+                                    begin: const Offset(0, 0.05),
+                                    end: Offset.zero,
+                                  ).animate(
+                                    CurvedAnimation(
+                                      parent: animation,
+                                      curve: Curves.easeOutCubic,
+                                    ),
+                                  ),
+                              child: child,
+                            ),
+                          );
+                        },
+                    child: isWideScreen(context)
+                        ? Row(
+                            spacing: 16,
+                            children: [
+                              Expanded(child: buildEditorPane()),
+                              if (showPreview.value)
+                                Expanded(child: buildPreviewPane()),
+                            ],
+                          )
+                        : Container(
+                            key: ValueKey('narrow-${showPreview.value}'),
+                            child: showPreview.value
+                                ? buildPreviewPane()
+                                : buildEditorPane(),
                           ),
-                          if (showPreview.value) const VerticalDivider(),
+                  ),
-                          if (showPreview.value)
+                ),
-                            Expanded(child: buildPreviewPane()),
-                        ],
-                      )
-                    : showPreview.value
-                    ? buildPreviewPane()
-                    : buildEditorPane(),
               ),
             ),
 
@@ -391,4 +439,4 @@ class ArticleComposeScreen extends HookConsumerWidget {
       ),
     );
   }
-}
+}

lib/screens/posts/publisher_profile.dart

@@ -25,7 +25,7 @@ import 'package:island/widgets/content/markdown.dart';
 import 'package:island/widgets/post/post_list.dart';
 import 'package:island/widgets/post/post_item.dart';
 import 'package:island/widgets/activity_heatmap.dart';
-import 'package:island/widgets/posts/post_filter.dart';
+import 'package:island/widgets/post/filters/post_filter.dart';
 import 'package:material_symbols_icons/symbols.dart';
 import 'package:island/services/color_extraction.dart';
 import 'package:riverpod_annotation/riverpod_annotation.dart';

lib/screens/search.dart

@@ -15,7 +15,7 @@ import 'package:island/widgets/extended_refresh_indicator.dart';
 import 'package:island/widgets/paging/pagination_list.dart';
 import 'package:island/widgets/post/post_item.dart';
 import 'package:island/widgets/post/post_item_skeleton.dart';
-import 'package:island/widgets/posts/post_filter.dart';
+import 'package:island/widgets/post/filters/post_filter.dart';
 import 'package:material_symbols_icons/symbols.dart';
 import 'package:styled_widget/styled_widget.dart';
 

lib/widgets/common/responsive_sidebar.dart

@@ -0,0 +1,177 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:island/services/responsive.dart';
+import 'package:island/widgets/post/article_sidebar_panel.dart';
+
+class ResponsiveSidebar extends HookConsumerWidget {
+  final Widget attachmentsContent;
+  final Widget settingsContent;
+  final Widget mainContent;
+  final double sidebarWidth;
+  final ValueNotifier<bool> showSidebar;
+
+  const ResponsiveSidebar({
+    super.key,
+    required this.attachmentsContent,
+    required this.settingsContent,
+    required this.mainContent,
+    this.sidebarWidth = 480,
+    required this.showSidebar,
+  });
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final isWide = isWideScreen(context);
+    final animationController = useAnimationController(
+      duration: const Duration(milliseconds: 300),
+    );
+    final animation = useMemoized(
+      () => Tween<double>(begin: 0, end: 1).animate(
+        CurvedAnimation(parent: animationController, curve: Curves.easeInOut),
+      ),
+      [animationController],
+    );
+
+    final showDrawer = useState(false);
+    final scaffoldKey = useMemoized(() => GlobalKey<ScaffoldState>());
+
+    useEffect(() {
+      void listener() {
+        final currentIsWide = isWideScreen(context);
+        if (currentIsWide) {
+          if (showSidebar.value && !showDrawer.value) {
+            showDrawer.value = true;
+            animationController.forward();
+          } else if (!showSidebar.value && showDrawer.value) {
+            showDrawer.value = false;
+            animationController.reverse();
+          }
+        } else {
+          if (showSidebar.value) {
+            scaffoldKey.currentState?.openEndDrawer();
+          } else {
+            Navigator.of(context).pop();
+          }
+        }
+      }
+
+      showSidebar.addListener(listener);
+      // Set initial state after first frame
+      WidgetsBinding.instance.addPostFrameCallback((_) => listener());
+
+      return () => showSidebar.removeListener(listener);
+    }, []);
+
+    useEffect(() {
+      void listener() {
+        if (!animationController.isAnimating &&
+            animationController.value == 0) {
+          showDrawer.value = false;
+        }
+      }
+
+      animationController.addListener(listener);
+      return () => animationController.removeListener(listener);
+    }, [animationController]);
+
+    void closeSidebar() {
+      showSidebar.value = false;
+    }
+
+    if (isWide) {
+      return LayoutBuilder(
+        builder: (context, constraints) {
+          return AnimatedBuilder(
+            animation: animation,
+            builder: (context, child) {
+              return Stack(
+                children: [
+                  _buildWideScreenContent(
+                    context,
+                    constraints,
+                    animation,
+                    mainContent,
+                  ),
+                  if (showDrawer.value)
+                    Positioned(
+                      right: 0,
+                      top: 0,
+                      bottom: 0,
+                      width: sidebarWidth,
+                      child: _buildWideScreenSidebar(
+                        context,
+                        animation,
+                        attachmentsContent,
+                        settingsContent,
+                        closeSidebar,
+                      ),
+                    ),
+                ],
+              );
+            },
+          );
+        },
+      );
+    } else {
+      return Scaffold(
+        key: scaffoldKey,
+        endDrawer: Drawer(
+          width: sidebarWidth,
+        child: ArticleSidebarPanelWidget(
+          attachmentsContent: attachmentsContent,
+          settingsContent: settingsContent,
+          onClose: () {
+            showSidebar.value = false;
+            Navigator.of(context).pop();
+          },
+          isWide: false,
+          width: sidebarWidth,
+        ),
+        ),
+        body: mainContent,
+      );
+    }
+  }
+
+  Widget _buildWideScreenContent(
+    BuildContext context,
+    BoxConstraints constraints,
+    Animation<double> animation,
+    Widget mainContent,
+  ) {
+    return Positioned(
+      left: 0,
+      top: 0,
+      bottom: 0,
+      width: constraints.maxWidth - animation.value * sidebarWidth,
+      child: mainContent,
+    );
+  }
+
+  Widget _buildWideScreenSidebar(
+    BuildContext context,
+    Animation<double> animation,
+    Widget attachmentsContent,
+    Widget settingsContent,
+    VoidCallback onClose,
+  ) {
+    return Transform.translate(
+      offset: Offset((1 - animation.value) * sidebarWidth, 0),
+      child: SizedBox(
+        width: sidebarWidth,
+        child: Material(
+          elevation: 8,
+          color: Theme.of(context).colorScheme.surfaceContainer,
+          child: ArticleSidebarPanelWidget(
+            attachmentsContent: attachmentsContent,
+            settingsContent: settingsContent,
+            onClose: onClose,
+            isWide: true,
+            width: sidebarWidth,
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/widgets/content/attachment_preview.dart

@@ -95,6 +95,7 @@ class AttachmentPreview extends HookConsumerWidget {
   final bool isCompact;
   final String? thumbnailId;
   final Function(String?)? onSetThumbnail;
+  final bool bordered;
 
   const AttachmentPreview({
     super.key,
@@ -109,6 +110,7 @@ class AttachmentPreview extends HookConsumerWidget {
     this.isCompact = false,
     this.thumbnailId,
     this.onSetThumbnail,
+    this.bordered = false,
   });
 
   // GlobalKey for selector
@@ -475,7 +477,7 @@ class AttachmentPreview extends HookConsumerWidget {
             item.isOnCloud &&
             (item.data as SnCloudFile).id == thumbnailId)
           Positioned(
-            top: 8,
+            bottom: 8,
             right: 8,
             child: Container(
               padding: const EdgeInsets.all(6),
@@ -493,10 +495,19 @@ class AttachmentPreview extends HookConsumerWidget {
       ],
     );
 
-    final contentWidget = ClipRRect(
+    final contentWidget = Container(
-      borderRadius: BorderRadius.circular(8),
+      decoration: BoxDecoration(
-      child: Container(
         color: Theme.of(context).colorScheme.surfaceContainer,
+        border: bordered
+            ? Border.all(
+                color: Theme.of(context).colorScheme.outline.withOpacity(0.5),
+                width: 1,
+              )
+            : null,
+        borderRadius: BorderRadius.circular(8),
+      ),
+      child: ClipRRect(
+        borderRadius: BorderRadius.circular(8),
         child: Stack(
           children: [
             if (ratio != null)

lib/widgets/debug_sheet.dart

@@ -3,6 +3,7 @@ import 'package:flutter/services.dart';
 import 'package:flutter_cache_manager/flutter_cache_manager.dart';
 import 'package:gap/gap.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:island/pods/audio.dart';
 import 'package:island/pods/message.dart';
 import 'package:island/pods/network.dart';
 import 'package:island/services/update_service.dart';
@@ -77,7 +78,7 @@ class DebugSheet extends HookConsumerWidget {
               minTileHeight: 48,
               leading: const Icon(Symbols.update),
               trailing: const Icon(Symbols.chevron_right),
-              title: Text('Force Update'),
+              title: Text('Force update'),
               contentPadding: const EdgeInsets.symmetric(horizontal: 24),
               onTap: () async {
                 // Fetch latest release and show the unified sheet
@@ -102,7 +103,7 @@ class DebugSheet extends HookConsumerWidget {
               minTileHeight: 48,
               leading: const Icon(Symbols.wifi),
               trailing: const Icon(Symbols.chevron_right),
-              title: Text('Connection Status'),
+              title: Text('Connection status'),
               contentPadding: EdgeInsets.symmetric(horizontal: 24),
               onTap: () {
                 showModalBottomSheet(
@@ -128,6 +129,23 @@ class DebugSheet extends HookConsumerWidget {
               },
             ),
             const Divider(height: 8),
+            ListTile(
+              minTileHeight: 48,
+              leading: const Icon(Symbols.play_arrow),
+              trailing: const Icon(Symbols.chevron_right),
+              contentPadding: EdgeInsets.symmetric(horizontal: 24),
+              title: Text('Play untitled'),
+              onTap: () async {
+                final synth = MiniSampleSynth(
+                  sampleAsset: 'assets/audio/messages.mp3',
+                  baseNote: 60,
+                );
+                await synth.playMidiAsset(
+                  'assets/midi/never-gonna-give-you-up.mid',
+                );
+              },
+            ),
+            const Divider(height: 8),
             ListTile(
               minTileHeight: 48,
               leading: const Icon(Symbols.copy_all),

lib/widgets/post/article_sidebar_panel.dart

@@ -0,0 +1,127 @@
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:material_symbols_icons/material_symbols_icons.dart';
+
+enum SidebarPanelType { attachments, settings }
+
+class ArticleSidebarPanelWidget extends HookConsumerWidget {
+  final Widget attachmentsContent;
+  final Widget settingsContent;
+  final VoidCallback onClose;
+  final bool isWide;
+  final double width;
+
+  const ArticleSidebarPanelWidget({
+    super.key,
+    required this.attachmentsContent,
+    required this.settingsContent,
+    required this.onClose,
+    required this.isWide,
+    this.width = 480,
+  });
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final theme = Theme.of(context);
+    final colorScheme = theme.colorScheme;
+
+    final activePanel = useState<SidebarPanelType>(
+      SidebarPanelType.attachments,
+    );
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      children: [
+        _buildHeader(context, activePanel, colorScheme, onClose, theme),
+        const Divider(height: 1),
+        Expanded(
+          child: AnimatedSwitcher(
+            duration: const Duration(milliseconds: 200),
+            switchInCurve: Curves.easeOutCubic,
+            switchOutCurve: Curves.easeInCubic,
+            child: activePanel.value == SidebarPanelType.attachments
+                ? Container(
+                    key: const ValueKey(SidebarPanelType.attachments),
+                    alignment: Alignment.topCenter,
+                    child: attachmentsContent,
+                  )
+                : Container(
+                    key: const ValueKey(SidebarPanelType.settings),
+                    alignment: Alignment.topCenter,
+                    child: settingsContent,
+                  ),
+          ),
+        ),
+      ],
+    );
+  }
+
+  Widget _buildHeader(
+    BuildContext context,
+    ValueNotifier<SidebarPanelType> activePanel,
+    ColorScheme colorScheme,
+    VoidCallback onClose,
+    ThemeData theme,
+  ) {
+    return Container(
+      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
+      child: Row(
+        children: [
+          _buildSegmentedTabs(activePanel, colorScheme, theme),
+          const Spacer(),
+          if (!isWide)
+            IconButton(
+              icon: const Icon(Symbols.close),
+              onPressed: onClose,
+              tooltip: 'close'.tr(),
+              padding: const EdgeInsets.all(8),
+              constraints: const BoxConstraints(minWidth: 40, minHeight: 40),
+            ),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildSegmentedTabs(
+    ValueNotifier<SidebarPanelType> activePanel,
+    ColorScheme colorScheme,
+    ThemeData theme,
+  ) {
+    return SegmentedButton<SidebarPanelType>(
+      segments: [
+        ButtonSegment(
+          value: SidebarPanelType.attachments,
+          label: Text('attachments'.tr()),
+          icon: const Icon(Symbols.attach_file, size: 18),
+        ),
+        ButtonSegment(
+          value: SidebarPanelType.settings,
+          label: Text('settings'.tr()),
+          icon: const Icon(Symbols.settings, size: 18),
+        ),
+      ],
+      selected: {activePanel.value},
+      onSelectionChanged: (Set<SidebarPanelType> selected) {
+        if (selected.isNotEmpty) {
+          activePanel.value = selected.first;
+        }
+      },
+      style: ButtonStyle(
+        backgroundColor: WidgetStateProperty.resolveWith((states) {
+          if (states.contains(WidgetState.selected)) {
+            return colorScheme.secondaryContainer;
+          }
+          return colorScheme.surfaceContainerHighest;
+        }),
+        foregroundColor: WidgetStateProperty.resolveWith((states) {
+          if (states.contains(WidgetState.selected)) {
+            return colorScheme.onSecondaryContainer;
+          }
+          return colorScheme.onSurface;
+        }),
+      ),
+    );
+  }
+}

lib/widgets/post/compose_attachments.dart

@@ -1,11 +1,15 @@
+import 'package:desktop_drop/desktop_drop.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:island/models/file.dart';
 import 'package:island/services/responsive.dart';
+import 'package:island/services/file_uploader.dart';
 import 'package:island/widgets/attachment_uploader.dart';
 import 'package:island/widgets/content/attachment_preview.dart';
 import 'package:island/widgets/post/compose_shared.dart';
+import 'package:material_symbols_icons/symbols.dart';
 
 /// A reusable widget for displaying attachments in compose screens.
 /// Supports both grid and list layouts based on screen width.
@@ -103,111 +107,256 @@ class ComposeAttachments extends ConsumerWidget {
   }
 }
 
-/// A specialized attachment widget for article compose with expansion tile.
+class ArticleComposeAttachments extends HookConsumerWidget {
-class ArticleComposeAttachments extends ConsumerWidget {
   final ComposeState state;
+  final EdgeInsets? padding;
 
-  const ArticleComposeAttachments({super.key, required this.state});
+  const ArticleComposeAttachments({
+    super.key,
+    required this.state,
+    this.padding,
+  });
+
+  Future<void> _handleDroppedFiles(DropDoneDetails details, ComposeState state) async {
+    final newFiles = <UniversalFile>[];
+
+    for (final xfile in details.files) {
+      // Create UniversalFile with default type first
+      final uf = UniversalFile(data: xfile, type: UniversalFileType.file);
+      // Use FileUploader.getMimeType to get proper MIME type
+      final mimeType = FileUploader.getMimeType(uf);
+      final fileType = switch (mimeType.split('/').firstOrNull) {
+        'image' => UniversalFileType.image,
+        'video' => UniversalFileType.video,
+        'audio' => UniversalFileType.audio,
+        _ => UniversalFileType.file,
+      };
+
+      // Update the file type
+      final correctedUf = UniversalFile(data: xfile, type: fileType);
+      newFiles.add(correctedUf);
+    }
+
+    if (newFiles.isNotEmpty) {
+      state.attachments.value = [...state.attachments.value, ...newFiles];
+    }
+  }
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    return ValueListenableBuilder<String?>(
+    return Padding(
-      valueListenable: state.thumbnailId,
+      padding: padding ?? EdgeInsets.all(16),
-      builder: (context, thumbnailId, _) {
+      child: ValueListenableBuilder<String?>(
-        return ValueListenableBuilder<List<UniversalFile>>(
+        valueListenable: state.thumbnailId,
-          valueListenable: state.attachments,
+        builder: (context, thumbnailId, _) {
-          builder: (context, attachments, _) {
+          return ValueListenableBuilder<List<UniversalFile>>(
-            if (attachments.isEmpty) return const SizedBox.shrink();
+            valueListenable: state.attachments,
-            return Theme(
+            builder: (context, attachments, _) {
-              data: Theme.of(
+              return HookBuilder(
-                context,
+                builder: (context) {
-              ).copyWith(dividerColor: Colors.transparent),
+                  final isDragging = useState(false);
-              child: ExpansionTile(
+                  return DropTarget(
-                initiallyExpanded: true,
+                    onDragDone: (details) async =>
-                title: Column(
+                        await _handleDroppedFiles(details, state),
-                  crossAxisAlignment: CrossAxisAlignment.start,
+                    onDragEntered: (details) => isDragging.value = true,
-                  children: [
+                    onDragExited: (details) => isDragging.value = false,
-                    Text('attachments').tr(),
+                    child: AnimatedContainer(
-                    Text(
+                      duration: const Duration(milliseconds: 200),
-                      'articleAttachmentHint'.tr(),
+                      curve: Curves.easeOut,
-                      style: Theme.of(context).textTheme.bodySmall?.copyWith(
+                      decoration: isDragging.value ? BoxDecoration(
-                        color: Theme.of(context).colorScheme.onSurfaceVariant,
+                        border: Border.all(
+                          color: Theme.of(context).colorScheme.primary,
+                          width: 2,
+                        ),
+                        borderRadius: BorderRadius.circular(12),
+                      ) : null,
+                      child: Padding(
+                        padding: isDragging.value ? const EdgeInsets.all(8) : EdgeInsets.zero,
+                        child: attachments.isEmpty
+                            ? AnimatedContainer(
+                                duration: const Duration(milliseconds: 200),
+                                curve: Curves.easeOut,
+                                width: double.infinity,
+                                height: 200,
+                                decoration: BoxDecoration(
+                                  color: Theme.of(context)
+                                        .colorScheme
+                                        .surfaceContainerHighest
+                                        .withOpacity(0.3),
+                                  border: Border.all(
+                                    color: Theme.of(
+                                        context,
+                                      ).colorScheme.outline.withOpacity(0.5),
+                                    width: 1,
+                                  ),
+                                  borderRadius: BorderRadius.circular(12),
+                                ),
+                                child: Column(
+                                  mainAxisAlignment: MainAxisAlignment.center,
+                                  children: [
+                                    Icon(
+                                      Symbols.upload,
+                                      size: 48,
+                                      color: Theme.of(
+                                        context,
+                                      ).colorScheme.onSurfaceVariant,
+                                    ),
+                                    const SizedBox(height: 16),
+                                    Text(
+                                      'dropFilesHere',
+                                      style: Theme.of(context).textTheme.titleMedium
+                                          ?.copyWith(
+                                            color: Theme.of(
+                                              context,
+                                            ).colorScheme.onSurfaceVariant,
+                                          ),
+                                    ).tr(),
+                                    const SizedBox(height: 8),
+                                    Text(
+                                      'dragAndDropToAttach',
+                                      style: Theme.of(context).textTheme.bodySmall
+                                          ?.copyWith(
+                                            color: Theme.of(context)
+                                                .colorScheme
+                                                .onSurfaceVariant
+                                                .withOpacity(0.7),
+                                          ),
+                                    ).tr(),
+                                  ],
+                                ),
+                              )
+                            : ValueListenableBuilder<Map<int, double?>>(
+                                valueListenable: state.attachmentProgress,
+                                builder: (context, progressMap, _) {
+                                  return Wrap(
+                                    runSpacing: 8,
+                                    spacing: 8,
+                                    children: [
+                                      for (var idx = 0; idx < attachments.length; idx++)
+                                        _AnimatedAttachmentItem(
+                                          index: idx,
+                                          item: attachments[idx],
+                                          progress: progressMap[idx],
+                                          isUploading: progressMap.containsKey(idx),
+                                          thumbnailId: thumbnailId,
+                                          onSetThumbnail: (id) =>
+                                              ComposeLogic.setThumbnail(state, id),
+                                          onRequestUpload: () async {
+                                            final config =
+                                                await showModalBottomSheet<
+                                                  AttachmentUploadConfig
+                                                >(
+                                                  context: context,
+                                                  isScrollControlled: true,
+                                                  useRootNavigator: true,
+                                                  builder: (context) => AttachmentUploaderSheet(
+                                                    ref: ref,
+                                                    state: state,
+                                                    index: idx,
+                                                  ),
+                                                );
+                                            if (config != null) {
+                                              await ComposeLogic.uploadAttachment(
+                                                ref,
+                                                state,
+                                                idx,
+                                                poolId: config.poolId,
+                                              );
+                                            }
+                                          },
+                                          onUpdate: (value) =>
+                                              ComposeLogic.updateAttachment(state, value, idx),
+                                          onDelete: () =>
+                                              ComposeLogic.deleteAttachment(ref, state, idx),
+                                          onInsert: () =>
+                                              ComposeLogic.insertAttachment(ref, state, idx),
+                                        ),
+                                    ],
+                                  );
+                                },
+                              ),
                       ),
                     ),
-                  ],
+                  );
-                ),
+                },
-                children: [
+              );
-                  ValueListenableBuilder<Map<int, double?>>(
+            },
-                    valueListenable: state.attachmentProgress,
+          );
-                    builder: (context, progressMap, _) {
+        },
-                      return Wrap(
+      ),
-                        runSpacing: 8,
-                        spacing: 8,
-                        children: [
-                          for (var idx = 0; idx < attachments.length; idx++)
-                            SizedBox(
-                              width: 180,
-                              height: 180,
-                              child: AttachmentPreview(
-                                isCompact: true,
-                                item: attachments[idx],
-                                progress: progressMap[idx],
-                                isUploading: progressMap.containsKey(idx),
-                                thumbnailId: thumbnailId,
-                                onSetThumbnail: (id) =>
-                                    ComposeLogic.setThumbnail(state, id),
-                                onRequestUpload: () async {
-                                  final config =
-                                      await showModalBottomSheet<
-                                        AttachmentUploadConfig
-                                      >(
-                                        context: context,
-                                        isScrollControlled: true,
-                                        builder: (context) =>
-                                            AttachmentUploaderSheet(
-                                              ref: ref,
-                                              state: state,
-                                              index: idx,
-                                            ),
-                                      );
-                                  if (config != null) {
-                                    await ComposeLogic.uploadAttachment(
-                                      ref,
-                                      state,
-                                      idx,
-                                      poolId: config.poolId,
-                                    );
-                                  }
-                                },
-                                onUpdate: (value) =>
-                                    ComposeLogic.updateAttachment(
-                                      state,
-                                      value,
-                                      idx,
-                                    ),
-                                onDelete: () => ComposeLogic.deleteAttachment(
-                                  ref,
-                                  state,
-                                  idx,
-                                ),
-                                onInsert: () => ComposeLogic.insertAttachment(
-                                  ref,
-                                  state,
-                                  idx,
-                                ),
-                              ),
-                            ),
-                        ],
-                      );
-                    },
-                  ),
-                  const SizedBox(height: 16),
-                ],
-              ),
-            );
-          },
-        );
-      },
     );
   }
 }
+
+class _AnimatedAttachmentItem extends HookWidget {
+  final int index;
+  final UniversalFile item;
+  final double? progress;
+  final bool isUploading;
+  final String? thumbnailId;
+  final Function(String?) onSetThumbnail;
+  final VoidCallback onRequestUpload;
+  final Function(UniversalFile) onUpdate;
+  final VoidCallback onDelete;
+  final VoidCallback onInsert;
+
+  const _AnimatedAttachmentItem({
+    required this.index,
+    required this.item,
+    required this.progress,
+    required this.isUploading,
+    required this.thumbnailId,
+    required this.onSetThumbnail,
+    required this.onRequestUpload,
+    required this.onUpdate,
+    required this.onDelete,
+    required this.onInsert,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final animationController = useAnimationController(
+      duration: const Duration(milliseconds: 300),
+    );
+
+    final fadeAnimation = Tween<double>(begin: 0.0, end: 1.0).animate(
+      CurvedAnimation(parent: animationController, curve: Curves.easeOut),
+    );
+
+    final slideAnimation =
+        Tween<Offset>(begin: const Offset(0, 0.1), end: Offset.zero).animate(
+          CurvedAnimation(
+            parent: animationController,
+            curve: Curves.easeOutCubic,
+          ),
+        );
+
+    useEffect(() {
+      final delay = Duration(milliseconds: 50 * index);
+      Future.delayed(delay, () {
+        animationController.forward();
+      });
+      return null;
+    }, [index]);
+
+    return FadeTransition(
+      opacity: fadeAnimation,
+      child: SlideTransition(
+        position: slideAnimation,
+        child: AttachmentPreview(
+          isCompact: true,
+          item: item,
+          progress: progress,
+          isUploading: isUploading,
+          thumbnailId: thumbnailId,
+          onSetThumbnail: onSetThumbnail,
+          onRequestUpload: onRequestUpload,
+          onUpdate: onUpdate,
+          onDelete: onDelete,
+          onInsert: onInsert,
+          bordered: true,
+        ),
+      ),
+    );
+  }
+}

lib/widgets/post/compose_settings_sheet.dart

@@ -139,364 +139,350 @@ class ComposeSettingsSheet extends HookConsumerWidget {
 
     final tagInputController = useTextEditingController();
 
-    return SheetScaffold(
+    return SingleChildScrollView(
-      titleText: 'postSettings'.tr(),
+      padding: const EdgeInsets.all(16),
-      heightFactor: 0.6,
+      child: Column(
-      child: SingleChildScrollView(
+        crossAxisAlignment: CrossAxisAlignment.start,
-        padding: const EdgeInsets.all(16),
+        spacing: 16,
-        child: Column(
+        children: [
-          crossAxisAlignment: CrossAxisAlignment.start,
+          // Slug field
-          spacing: 16,
+          TextField(
-          children: [
+            controller: state.slugController,
-            // Slug field
+            decoration: InputDecoration(
-            TextField(
+              labelText: 'postSlug'.tr(),
-              controller: state.slugController,
+              hintText: 'postSlugHint'.tr(),
-              decoration: InputDecoration(
+              contentPadding: const EdgeInsets.symmetric(
-                labelText: 'postSlug'.tr(),
+                vertical: 9,
-                hintText: 'postSlugHint'.tr(),
+                horizontal: 16,
-                contentPadding: const EdgeInsets.symmetric(
-                  vertical: 9,
-                  horizontal: 16,
-                ),
-                border: OutlineInputBorder(
-                  borderRadius: BorderRadius.circular(12),
-                ),
               ),
-              onTapOutside: (_) =>
+              border: OutlineInputBorder(
-                  FocusManager.instance.primaryFocus?.unfocus(),
-            ),
-
-            // Tags field
-            Container(
-              decoration: BoxDecoration(
-                border: Border.all(
-                  color: Theme.of(context).colorScheme.outline,
-                  width: 1,
-                ),
                 borderRadius: BorderRadius.circular(12),
               ),
-              padding: const EdgeInsets.all(16),
+            ),
-              child: Column(
+            onTapOutside: (_) => FocusManager.instance.primaryFocus?.unfocus(),
-                crossAxisAlignment: CrossAxisAlignment.start,
+          ),
-                spacing: 12,
+
-                children: [
+          // Tags field
-                  Text(
+          Container(
-                    'tags'.tr(),
+            decoration: BoxDecoration(
-                    style: Theme.of(context).textTheme.labelLarge,
+              border: Border.all(
+                color: Theme.of(context).colorScheme.outline,
+                width: 1,
+              ),
+              borderRadius: BorderRadius.circular(12),
+            ),
+            padding: const EdgeInsets.all(16),
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              spacing: 12,
+              children: [
+                Text(
+                  'tags'.tr(),
+                  style: Theme.of(context).textTheme.labelLarge,
+                ),
+                // Existing tags display
+                if (currentTags.isNotEmpty)
+                  Wrap(
+                    spacing: 8,
+                    runSpacing: 8,
+                    children: currentTags.map((tag) {
+                      return Container(
+                        decoration: BoxDecoration(
+                          color: Theme.of(context).colorScheme.primary,
+                          borderRadius: BorderRadius.circular(16),
+                        ),
+                        padding: const EdgeInsets.symmetric(
+                          horizontal: 12,
+                          vertical: 6,
+                        ),
+                        child: Row(
+                          mainAxisSize: MainAxisSize.min,
+                          children: [
+                            Text(
+                              '#$tag',
+                              style: TextStyle(
+                                color: Theme.of(context).colorScheme.onPrimary,
+                                fontSize: 14,
+                              ),
+                            ),
+                            const Gap(4),
+                            InkWell(
+                              onTap: () {
+                                final newTags = List<String>.from(
+                                  state.tags.value,
+                                )..remove(tag);
+                                state.tags.value = newTags;
+                              },
+                              child: Icon(
+                                Icons.close,
+                                size: 16,
+                                color: Theme.of(context).colorScheme.onPrimary,
+                              ),
+                            ),
+                          ],
+                        ),
+                      );
+                    }).toList(),
                   ),
-                  // Existing tags display
+                // Tag input with autocomplete
-                  if (currentTags.isNotEmpty)
+                TypeAheadField<SnPostTag>(
-                    Wrap(
+                  controller: tagInputController,
-                      spacing: 8,
+                  builder: (context, controller, focusNode) {
-                      runSpacing: 8,
+                    return TextField(
-                      children: currentTags.map((tag) {
+                      controller: controller,
-                        return Container(
+                      focusNode: focusNode,
+                      decoration: InputDecoration(
+                        hintText: 'addTag'.tr(),
+                        border: InputBorder.none,
+                        isCollapsed: true,
+                        contentPadding: EdgeInsets.zero,
+                      ),
+                      onSubmitted: (value) {
+                        state.tags.value = [...state.tags.value, value];
+                        controller.clear();
+                      },
+                    );
+                  },
+                  suggestionsCallback: (pattern) =>
+                      _fetchTagSuggestions(pattern, ref),
+                  itemBuilder: (context, suggestion) {
+                    return ListTile(
+                      shape: const RoundedRectangleBorder(
+                        borderRadius: BorderRadius.all(Radius.circular(8)),
+                      ),
+                      title: Text('#${suggestion.slug}'),
+                      subtitle: Text('${suggestion.usage} posts'),
+                      dense: true,
+                    );
+                  },
+                  onSelected: (suggestion) {
+                    if (!state.tags.value.contains(suggestion.slug)) {
+                      state.tags.value = [...state.tags.value, suggestion.slug];
+                    }
+                    tagInputController.clear();
+                  },
+                  direction: VerticalDirection.down,
+                  hideOnEmpty: true,
+                  hideOnLoading: true,
+                  debounceDuration: const Duration(milliseconds: 300),
+                ),
+              ],
+            ),
+          ),
+
+          // Categories field
+          DropdownButtonFormField2<SnPostCategory>(
+            isExpanded: true,
+            decoration: InputDecoration(
+              contentPadding: const EdgeInsets.symmetric(vertical: 9),
+              border: OutlineInputBorder(
+                borderRadius: BorderRadius.circular(12),
+              ),
+            ),
+            hint: Text('categories'.tr(), style: TextStyle(fontSize: 15)),
+            items: (postCategories.value?.items ?? <SnPostCategory>[]).map((
+              item,
+            ) {
+              return DropdownMenuItem(
+                value: item,
+                enabled: false,
+                child: StatefulBuilder(
+                  builder: (context, menuSetState) {
+                    final isSelected = state.categories.value.contains(item);
+                    return InkWell(
+                      onTap: () {
+                        isSelected
+                            ? state.categories.value = state.categories.value
+                                  .where((e) => e != item)
+                                  .toList()
+                            : state.categories.value = [
+                                ...state.categories.value,
+                                item,
+                              ];
+                        menuSetState(() {});
+                      },
+                      child: Container(
+                        height: double.infinity,
+                        padding: const EdgeInsets.symmetric(horizontal: 16.0),
+                        child: Row(
+                          children: [
+                            if (isSelected)
+                              const Icon(Icons.check_box_outlined)
+                            else
+                              const Icon(Icons.check_box_outline_blank),
+                            const SizedBox(width: 16),
+                            Expanded(
+                              child: Text(
+                                item.categoryDisplayTitle,
+                                style: const TextStyle(fontSize: 14),
+                              ),
+                            ),
+                          ],
+                        ),
+                      ),
+                    );
+                  },
+                ),
+              );
+            }).toList(),
+            value: currentCategories.isEmpty ? null : currentCategories.last,
+            onChanged: (_) {},
+            selectedItemBuilder: (context) {
+              return (postCategories.value?.items ?? []).map((item) {
+                return SingleChildScrollView(
+                  scrollDirection: Axis.horizontal,
+                  child: Row(
+                    children: [
+                      for (final category in currentCategories)
+                        Container(
                           decoration: BoxDecoration(
+                            borderRadius: BorderRadius.circular(20),
                             color: Theme.of(context).colorScheme.primary,
-                            borderRadius: BorderRadius.circular(16),
                           ),
                           padding: const EdgeInsets.symmetric(
                             horizontal: 12,
-                            vertical: 6,
+                            vertical: 4,
                           ),
-                          child: Row(
+                          margin: const EdgeInsets.only(right: 4),
-                            mainAxisSize: MainAxisSize.min,
+                          child: Text(
-                            children: [
+                            category.categoryDisplayTitle,
-                              Text(
+                            style: TextStyle(
-                                '#$tag',
+                              color: Theme.of(context).colorScheme.onPrimary,
-                                style: TextStyle(
+                              fontSize: 13,
-                                  color: Theme.of(
+                            ),
-                                    context,
-                                  ).colorScheme.onPrimary,
-                                  fontSize: 14,
-                                ),
-                              ),
-                              const Gap(4),
-                              InkWell(
-                                onTap: () {
-                                  final newTags = List<String>.from(
-                                    state.tags.value,
-                                  )..remove(tag);
-                                  state.tags.value = newTags;
-                                },
-                                child: Icon(
-                                  Icons.close,
-                                  size: 16,
-                                  color: Theme.of(
-                                    context,
-                                  ).colorScheme.onPrimary,
-                                ),
-                              ),
-                            ],
-                          ),
-                        );
-                      }).toList(),
-                    ),
-                  // Tag input with autocomplete
-                  TypeAheadField<SnPostTag>(
-                    controller: tagInputController,
-                    builder: (context, controller, focusNode) {
-                      return TextField(
-                        controller: controller,
-                        focusNode: focusNode,
-                        decoration: InputDecoration(
-                          hintText: 'addTag'.tr(),
-                          border: InputBorder.none,
-                          isCollapsed: true,
-                          contentPadding: EdgeInsets.zero,
-                        ),
-                        onSubmitted: (value) {
-                          state.tags.value = [...state.tags.value, value];
-                          controller.clear();
-                        },
-                      );
-                    },
-                    suggestionsCallback: (pattern) =>
-                        _fetchTagSuggestions(pattern, ref),
-                    itemBuilder: (context, suggestion) {
-                      return ListTile(
-                        shape: const RoundedRectangleBorder(
-                          borderRadius: BorderRadius.all(Radius.circular(8)),
-                        ),
-                        title: Text('#${suggestion.slug}'),
-                        subtitle: Text('${suggestion.usage} posts'),
-                        dense: true,
-                      );
-                    },
-                    onSelected: (suggestion) {
-                      if (!state.tags.value.contains(suggestion.slug)) {
-                        state.tags.value = [
-                          ...state.tags.value,
-                          suggestion.slug,
-                        ];
-                      }
-                      tagInputController.clear();
-                    },
-                    direction: VerticalDirection.down,
-                    hideOnEmpty: true,
-                    hideOnLoading: true,
-                    debounceDuration: const Duration(milliseconds: 300),
-                  ),
-                ],
-              ),
-            ),
-
-            // Categories field
-            DropdownButtonFormField2<SnPostCategory>(
-              isExpanded: true,
-              decoration: InputDecoration(
-                contentPadding: const EdgeInsets.symmetric(vertical: 9),
-                border: OutlineInputBorder(
-                  borderRadius: BorderRadius.circular(12),
-                ),
-              ),
-              hint: Text('categories'.tr(), style: TextStyle(fontSize: 15)),
-              items: (postCategories.value?.items ?? <SnPostCategory>[]).map((
-                item,
-              ) {
-                return DropdownMenuItem(
-                  value: item,
-                  enabled: false,
-                  child: StatefulBuilder(
-                    builder: (context, menuSetState) {
-                      final isSelected = state.categories.value.contains(item);
-                      return InkWell(
-                        onTap: () {
-                          isSelected
-                              ? state.categories.value = state.categories.value
-                                    .where((e) => e != item)
-                                    .toList()
-                              : state.categories.value = [
-                                  ...state.categories.value,
-                                  item,
-                                ];
-                          menuSetState(() {});
-                        },
-                        child: Container(
-                          height: double.infinity,
-                          padding: const EdgeInsets.symmetric(horizontal: 16.0),
-                          child: Row(
-                            children: [
-                              if (isSelected)
-                                const Icon(Icons.check_box_outlined)
-                              else
-                                const Icon(Icons.check_box_outline_blank),
-                              const SizedBox(width: 16),
-                              Expanded(
-                                child: Text(
-                                  item.categoryDisplayTitle,
-                                  style: const TextStyle(fontSize: 14),
-                                ),
-                              ),
-                            ],
                           ),
                         ),
-                      );
+                    ],
-                    },
                   ),
                 );
-              }).toList(),
+              }).toList();
-              value: currentCategories.isEmpty ? null : currentCategories.last,
+            },
-              onChanged: (_) {},
+            buttonStyleData: const ButtonStyleData(
-              selectedItemBuilder: (context) {
+              padding: EdgeInsets.only(left: 16, right: 8),
-                return (postCategories.value?.items ?? []).map((item) {
+              height: 38,
-                  return SingleChildScrollView(
+            ),
-                    scrollDirection: Axis.horizontal,
+            menuItemStyleData: const MenuItemStyleData(
-                    child: Row(
+              height: 38,
-                      children: [
+              padding: EdgeInsets.zero,
-                        for (final category in currentCategories)
+            ),
-                          Container(
+          ),
-                            decoration: BoxDecoration(
+
-                              borderRadius: BorderRadius.circular(20),
+          // Realm selection
-                              color: Theme.of(context).colorScheme.primary,
+          DropdownButtonFormField2<SnRealm?>(
-                            ),
+            isExpanded: true,
-                            padding: const EdgeInsets.symmetric(
+            decoration: InputDecoration(
-                              horizontal: 12,
+              contentPadding: const EdgeInsets.symmetric(vertical: 9),
-                              vertical: 4,
+              border: OutlineInputBorder(
-                            ),
+                borderRadius: BorderRadius.circular(12),
-                            margin: const EdgeInsets.only(right: 4),
-                            child: Text(
-                              category.categoryDisplayTitle,
-                              style: TextStyle(
-                                color: Theme.of(context).colorScheme.onPrimary,
-                                fontSize: 13,
-                              ),
-                            ),
-                          ),
-                      ],
-                    ),
-                  );
-                }).toList();
-              },
-              buttonStyleData: const ButtonStyleData(
-                padding: EdgeInsets.only(left: 16, right: 8),
-                height: 38,
-              ),
-              menuItemStyleData: const MenuItemStyleData(
-                height: 38,
-                padding: EdgeInsets.zero,
               ),
             ),
-
+            hint: Text('realm'.tr(), style: const TextStyle(fontSize: 15)),
-            // Realm selection
+            items: [
-            DropdownButtonFormField2<SnRealm?>(
+              DropdownMenuItem<SnRealm?>(
-              isExpanded: true,
+                value: null,
-              decoration: InputDecoration(
+                child: Row(
-                contentPadding: const EdgeInsets.symmetric(vertical: 9),
+                  children: [
-                border: OutlineInputBorder(
+                    const CircleAvatar(
-                  borderRadius: BorderRadius.circular(12),
+                      radius: 16,
-                ),
+                      child: Icon(Symbols.link_off, fill: 1),
+                    ),
+                    const SizedBox(width: 12),
+                    Text('postUnlinkRealm').tr(),
+                  ],
+                ).padding(left: 16, right: 8),
               ),
-              hint: Text('realm'.tr(), style: const TextStyle(fontSize: 15)),
+              // Include current realm if it's not null and not in joined realms
-              items: [
+              if (currentRealm != null &&
+                  !(userRealms.value ?? []).any((r) => r.id == currentRealm.id))
                 DropdownMenuItem<SnRealm?>(
-                  value: null,
+                  value: currentRealm,
                   child: Row(
                     children: [
-                      const CircleAvatar(
+                      ProfilePictureWidget(
+                        file: currentRealm.picture,
+                        fallbackIcon: Symbols.workspaces,
                         radius: 16,
-                        child: Icon(Symbols.link_off, fill: 1),
                       ),
                       const SizedBox(width: 12),
-                      Text('postUnlinkRealm').tr(),
+                      Text(currentRealm.name),
                     ],
                   ).padding(left: 16, right: 8),
                 ),
-                // Include current realm if it's not null and not in joined realms
+              if (userRealms.hasValue)
-                if (currentRealm != null &&
+                ...(userRealms.value ?? []).map(
-                    !(userRealms.value ?? []).any(
+                  (realm) => DropdownMenuItem<SnRealm?>(
-                      (r) => r.id == currentRealm.id,
+                    value: realm,
-                    ))
-                  DropdownMenuItem<SnRealm?>(
-                    value: currentRealm,
                     child: Row(
                       children: [
                         ProfilePictureWidget(
-                          file: currentRealm.picture,
+                          file: realm.picture,
                           fallbackIcon: Symbols.workspaces,
                           radius: 16,
                         ),
                         const SizedBox(width: 12),
-                        Text(currentRealm.name),
+                        Text(realm.name),
                       ],
                     ).padding(left: 16, right: 8),
                   ),
-                if (userRealms.hasValue)
+                ),
-                  ...(userRealms.value ?? []).map(
+            ],
-                    (realm) => DropdownMenuItem<SnRealm?>(
+            value: currentRealm,
-                      value: realm,
+            onChanged: (value) {
-                      child: Row(
+              state.realm.value = value;
-                        children: [
+            },
-                          ProfilePictureWidget(
+            selectedItemBuilder: (context) {
-                            file: realm.picture,
+              return (userRealms.value ?? []).map((_) {
-                            fallbackIcon: Symbols.workspaces,
+                return Row(
-                            radius: 16,
+                  children: [
-                          ),
+                    if (currentRealm == null)
-                          const SizedBox(width: 12),
+                      const CircleAvatar(
-                          Text(realm.name),
+                        radius: 16,
-                        ],
+                        child: Icon(Symbols.link_off, fill: 1),
-                      ).padding(left: 16, right: 8),
+                      )
-                    ),
+                    else
-                  ),
+                      ProfilePictureWidget(
-              ],
+                        file: currentRealm.picture,
-              value: currentRealm,
+                        fallbackIcon: Symbols.workspaces,
-              onChanged: (value) {
+                        radius: 16,
-                state.realm.value = value;
+                      ),
-              },
+                    const SizedBox(width: 12),
-              selectedItemBuilder: (context) {
+                    Text(currentRealm?.name ?? 'postUnlinkRealm'.tr()),
-                return (userRealms.value ?? []).map((_) {
+                  ],
-                  return Row(
+                );
-                    children: [
+              }).toList();
-                      if (currentRealm == null)
+            },
-                        const CircleAvatar(
+            buttonStyleData: const ButtonStyleData(
-                          radius: 16,
+              padding: EdgeInsets.only(left: 16, right: 8),
-                          child: Icon(Symbols.link_off, fill: 1),
+              height: 40,
-                        )
-                      else
-                        ProfilePictureWidget(
-                          file: currentRealm.picture,
-                          fallbackIcon: Symbols.workspaces,
-                          radius: 16,
-                        ),
-                      const SizedBox(width: 12),
-                      Text(currentRealm?.name ?? 'postUnlinkRealm'.tr()),
-                    ],
-                  );
-                }).toList();
-              },
-              buttonStyleData: const ButtonStyleData(
-                padding: EdgeInsets.only(left: 16, right: 8),
-                height: 40,
-              ),
-              menuItemStyleData: const MenuItemStyleData(
-                height: 56,
-                padding: EdgeInsets.zero,
-              ),
             ),
+            menuItemStyleData: const MenuItemStyleData(
+              height: 56,
+              padding: EdgeInsets.zero,
+            ),
+          ),
 
-            // Visibility setting
+          // Visibility setting
-            Container(
+          Container(
-              decoration: BoxDecoration(
+            decoration: BoxDecoration(
-                border: Border.all(color: colorScheme.outline, width: 1),
+              border: Border.all(color: colorScheme.outline, width: 1),
+              borderRadius: BorderRadius.circular(12),
+            ),
+            child: ListTile(
+              leading: Icon(getVisibilityIcon(currentVisibility)),
+              title: Text('postVisibility'.tr()),
+              subtitle: Text(getVisibilityText(currentVisibility).tr()),
+              trailing: const Icon(Symbols.chevron_right),
+              onTap: showVisibilitySheet,
+              shape: RoundedRectangleBorder(
                 borderRadius: BorderRadius.circular(12),
               ),
-              child: ListTile(
+              contentPadding: const EdgeInsets.symmetric(
-                leading: Icon(getVisibilityIcon(currentVisibility)),
+                horizontal: 16,
-                title: Text('postVisibility'.tr()),
+                vertical: 8,
-                subtitle: Text(getVisibilityText(currentVisibility).tr()),
-                trailing: const Icon(Symbols.chevron_right),
-                onTap: showVisibilitySheet,
-                shape: RoundedRectangleBorder(
-                  borderRadius: BorderRadius.circular(12),
-                ),
-                contentPadding: const EdgeInsets.symmetric(
-                  horizontal: 16,
-                  vertical: 8,
-                ),
               ),
             ),
-          ],
+          ),
-        ),
+        ],
       ),
     );
   }