♻️ Refactored post layout

lib/screens/account/profile_edit.dart

@@ -192,7 +192,7 @@ class _PersonalizeScreenState extends State<PersonalizeScreen> {
         const Gap(24),
         Stack(
           children: [
-            AccountAvatar(content: _avatar, radius: 40),
+            AttachedCircleAvatar(content: _avatar, radius: 40),
             Positioned(
               bottom: 0,
               left: 40,

lib/screens/account/profile_page.dart

@@ -260,7 +260,8 @@ class _AccountProfilePageState extends State<AccountProfilePage> {
                           const Gap(8),
                       const Gap(8),
                       if (_userinfo != null)
-                        AccountAvatar(content: _userinfo!.avatar, radius: 16),
+                        AttachedCircleAvatar(
+                            content: _userinfo!.avatar, radius: 16),
                       const Gap(12),
                       Expanded(
                         child: Column(

lib/screens/chat.dart

@@ -252,7 +252,7 @@ class _ChatListState extends State<ChatList> {
                         child: Row(
                           mainAxisSize: MainAxisSize.min,
                           children: [
-                            AccountAvatar(
+                            AttachedCircleAvatar(
                               content: x.avatar,
                               radius: 14,
                               fallbackWidget: const Icon(

lib/screens/dashboard.dart

@@ -392,7 +392,7 @@ class _DashboardScreenState extends State<DashboardScreen> {
                                 backgroundColor: Theme.of(context)
                                     .colorScheme
                                     .surfaceContainerLow,
-                              ),
+                              ).paddingAll(8),
                             ),
                           ),
                         ).paddingSymmetric(horizontal: 8),

lib/screens/explore.dart

@@ -6,13 +6,13 @@ import 'package:get/get.dart';
 import 'package:solian/controllers/post_list_controller.dart';
 import 'package:solian/providers/auth.dart';
 import 'package:solian/providers/navigation.dart';
-import 'package:solian/router.dart';
 import 'package:solian/screens/account/notification.dart';
 import 'package:solian/theme.dart';
 import 'package:solian/widgets/account/signin_required_overlay.dart';
 import 'package:solian/widgets/current_state_action.dart';
 import 'package:solian/widgets/app_bar_leading.dart';
 import 'package:solian/widgets/navigation/realm_switcher.dart';
+import 'package:solian/widgets/posts/post_creation.dart';
 import 'package:solian/widgets/posts/post_list.dart';
 import 'package:solian/widgets/posts/post_shuffle_swiper.dart';
 import 'package:solian/widgets/root_container.dart';
@@ -225,106 +225,3 @@ class _ExploreScreenState extends State<ExploreScreen>
     super.dispose();
   }
 }
-
-class PostCreatePopup extends StatelessWidget {
-  final bool hideDraftBox;
-
-  const PostCreatePopup({
-    super.key,
-    this.hideDraftBox = false,
-  });
-
-  @override
-  Widget build(BuildContext context) {
-    final AuthProvider auth = Get.find();
-
-    if (auth.isAuthorized.isFalse) {
-      return const SizedBox.shrink();
-    }
-
-    final List<dynamic> actionList = [
-      (
-        icon: const Icon(Icons.post_add),
-        label: 'postEditorModeStory'.tr,
-        onTap: () {
-          Navigator.pop(
-            context,
-            AppRouter.instance.pushNamed(
-              'postEditor',
-              queryParameters: {
-                'mode': 0.toString(),
-              },
-            ),
-          );
-        },
-      ),
-      (
-        icon: const Icon(Icons.description),
-        label: 'postEditorModeArticle'.tr,
-        onTap: () {
-          Navigator.pop(
-            context,
-            AppRouter.instance.pushNamed(
-              'postEditor',
-              queryParameters: {
-                'mode': 1.toString(),
-              },
-            ),
-          );
-        },
-      ),
-      (
-        icon: const Icon(Icons.drafts),
-        label: 'draftBoxOpen'.tr,
-        onTap: () {
-          Navigator.pop(
-            context,
-            AppRouter.instance.pushNamed('draftBox'),
-          );
-        },
-      ),
-    ];
-
-    return SizedBox(
-      height: MediaQuery.of(context).size.height * 0.38,
-      child: Column(
-        crossAxisAlignment: CrossAxisAlignment.start,
-        children: [
-          Text(
-            'postNew'.tr,
-            style: Theme.of(context).textTheme.headlineSmall,
-          ).paddingOnly(left: 24, right: 24, top: 32, bottom: 16),
-          Expanded(
-            child: GridView.count(
-              physics: const NeverScrollableScrollPhysics(),
-              crossAxisCount: 3,
-              children: actionList
-                  .map((x) => Card(
-                        color: Theme.of(context).colorScheme.surfaceContainer,
-                        child: InkWell(
-                          borderRadius:
-                              const BorderRadius.all(Radius.circular(8)),
-                          onTap: x.onTap,
-                          child: Column(
-                            crossAxisAlignment: CrossAxisAlignment.start,
-                            children: [
-                              x.icon,
-                              const Gap(8),
-                              Expanded(
-                                child: Text(
-                                  x.label,
-                                  overflow: TextOverflow.fade,
-                                ),
-                              ),
-                            ],
-                          ).paddingAll(18),
-                        ),
-                      ))
-                  .toList(),
-            ).paddingSymmetric(horizontal: 20),
-          ),
-        ],
-      ),
-    );
-  }
-}

lib/screens/posts/post_detail.dart

@@ -24,11 +24,11 @@ class PostDetailScreen extends StatefulWidget {
 class _PostDetailScreenState extends State<PostDetailScreen> {
   Post? item;
 
-  Future<Post?> getDetail() async {
+  Future<Post?> _getDetail() async {
     if (widget.post != null) {
+      setState(() {
         item = widget.post;
-      Get.find<LastReadProvider>().feedLastReadAt = item?.id;
+      });
-      return widget.post;
     }
 
     final PostProvider provider = Get.find();
@@ -48,7 +48,7 @@ class _PostDetailScreenState extends State<PostDetailScreen> {
   @override
   Widget build(BuildContext context) {
     return FutureBuilder(
-      future: getDetail(),
+      future: _getDetail(),
       builder: (context, snapshot) {
         if (!snapshot.hasData || snapshot.data == null) {
           return const Center(

lib/screens/realms.dart

@@ -156,7 +156,7 @@ class _RealmListScreenState extends State<RealmListScreen> {
                                 size: 18,
                               ),
                             )
-                          : AccountAvatar(
+                          : AttachedCircleAvatar(
                               content: element.avatar!,
                               bgColor: Theme.of(context).colorScheme.primary,
                             ),

lib/widgets/account/account_avatar.dart

@@ -1,15 +1,16 @@
 import 'package:flutter/material.dart';
 import 'package:solian/services.dart';
+import 'package:solian/widgets/account/account_profile_popup.dart';
 import 'package:solian/widgets/auto_cache_image.dart';
 
-class AccountAvatar extends StatelessWidget {
+class AttachedCircleAvatar extends StatelessWidget {
   final dynamic content;
   final Color? bgColor;
   final Color? feColor;
   final double? radius;
   final Widget? fallbackWidget;
 
-  const AccountAvatar({
+  const AttachedCircleAvatar({
     super.key,
     required this.content,
     this.bgColor,
@@ -39,7 +40,7 @@ class AccountAvatar extends StatelessWidget {
       child: isEmpty
           ? (fallbackWidget ??
               Icon(
-                Icons.account_circle,
+                Icons.image,
                 size: radius != null ? radius! * 1.2 : 24,
                 color: feColor,
               ))
@@ -48,6 +49,54 @@ class AccountAvatar extends StatelessWidget {
   }
 }
 
+class AccountAvatar extends StatelessWidget {
+  final dynamic content;
+  final String username;
+  final Color? bgColor;
+  final Color? feColor;
+  final double? radius;
+  final Widget? fallbackWidget;
+
+  const AccountAvatar({
+    super.key,
+    required this.content,
+    required this.username,
+    this.bgColor,
+    this.feColor,
+    this.radius,
+    this.fallbackWidget,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      child: AttachedCircleAvatar(
+        content: content,
+        bgColor: bgColor,
+        feColor: feColor,
+        radius: radius,
+        fallbackWidget: (fallbackWidget ??
+            Icon(
+              Icons.account_circle,
+              size: radius != null ? radius! * 1.2 : 24,
+              color: feColor,
+            )),
+      ),
+      onTap: () {
+        showModalBottomSheet(
+          useRootNavigator: true,
+          isScrollControlled: true,
+          backgroundColor: Theme.of(context).colorScheme.surface,
+          context: context,
+          builder: (context) => AccountProfilePopup(
+            name: username,
+          ),
+        );
+      },
+    );
+  }
+}
+
 class AccountProfileImage extends StatelessWidget {
   final dynamic content;
   final BoxFit fit;

lib/widgets/account/account_heading.dart

@@ -84,7 +84,7 @@ class AccountHeadingWidget extends StatelessWidget {
               Positioned(
                 bottom: -30,
                 left: 32,
-                child: AccountAvatar(content: avatar, radius: 40),
+                child: AttachedCircleAvatar(content: avatar, radius: 40),
               ),
             ],
           ),

lib/widgets/account/account_select.dart

@@ -138,7 +138,7 @@ class _AccountSelectorState extends State<AccountSelector> {
                 return ListTile(
                   title: Text(element.nick),
                   subtitle: Text(element.name),
-                  leading: AccountAvatar(content: element.avatar),
+                  leading: AttachedCircleAvatar(content: element.avatar),
                   trailing: widget.trailingBuilder != null
                       ? widget.trailingBuilder!(element)
                       : _checkSelected(element)

lib/widgets/account/relative_list.dart

@@ -23,7 +23,7 @@ class SilverRelativeList extends StatelessWidget {
       title: Text(element.related.nick),
       subtitle: Text(element.related.name),
       leading: GestureDetector(
-        child: AccountAvatar(content: element.related.avatar),
+        child: AttachedCircleAvatar(content: element.related.avatar),
         onTap: () {
           showModalBottomSheet(
             useRootNavigator: true,

lib/widgets/account/relative_select.dart

@@ -56,7 +56,7 @@ class _RelativeSelectorState extends State<RelativeSelector> {
                 return ListTile(
                   title: Text(element.nick),
                   subtitle: Text(element.name),
-                  leading: AccountAvatar(content: element.avatar),
+                  leading: AttachedCircleAvatar(content: element.avatar),
                   trailing: widget.trailingBuilder != null
                       ? widget.trailingBuilder!(element)
                       : null,

lib/widgets/attachments/attachment_fullscreen.dart

@@ -175,7 +175,7 @@ class _AttachmentFullScreenState extends State<AttachmentFullScreen> {
                       Row(
                         children: [
                           IgnorePointer(
-                            child: AccountAvatar(
+                            child: AttachedCircleAvatar(
                               content: widget.item.account!.avatar,
                               radius: 19,
                             ),

lib/widgets/attachments/attachment_list.dart

@@ -19,9 +19,8 @@ class AttachmentList extends StatefulWidget {
   final List<Attachment>? attachments;
   final bool isGrid;
   final bool isColumn;
-  final bool isForceGrid;
+  final bool isFullWidth;
   final bool autoload;
-  final double flatMaxHeight;
   final double columnMaxWidth;
 
   final double? width;
@@ -34,9 +33,8 @@ class AttachmentList extends StatefulWidget {
     this.attachments,
     this.isGrid = false,
     this.isColumn = false,
-    this.isForceGrid = false,
+    this.isFullWidth = false,
     this.autoload = false,
-    this.flatMaxHeight = 720,
     this.columnMaxWidth = 480,
     this.width,
     this.viewport,
@@ -175,9 +173,70 @@ class _AttachmentListState extends State<AttachmentList> {
           .fadeIn(duration: 1250.ms);
     }
 
+    const radius = BorderRadius.all(Radius.circular(8));
+
+    if (widget.isFullWidth && _attachments.length == 1) {
+      final element = _attachments.first;
+      double ratio = element!.metadata?['ratio']?.toDouble() ?? 16 / 9;
+      return Container(
+        constraints: BoxConstraints(
+          maxWidth: widget.columnMaxWidth,
+          maxHeight: 640,
+        ),
+        child: AspectRatio(
+          aspectRatio: ratio,
+          child: Container(
+            decoration: BoxDecoration(
+              border: Border.symmetric(
+                horizontal: BorderSide(
+                  color: Theme.of(context).dividerColor,
+                  width: 1,
+                ),
+              ),
+            ),
+            child: _buildEntry(element, 0),
+          ),
+        ),
+      );
+    }
+
+    final isNotPureImage = _attachments.any(
+      (x) => x?.mimetype.split('/').firstOrNull != 'image',
+    );
+    if (widget.isGrid && !isNotPureImage) {
+      return GridView.builder(
+        padding: EdgeInsets.zero,
+        primary: false,
+        physics: const NeverScrollableScrollPhysics(),
+        shrinkWrap: true,
+        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+          crossAxisCount: math.min(3, _attachments.length),
+          mainAxisSpacing: 8.0,
+          crossAxisSpacing: 8.0,
+        ),
+        itemCount: _attachments.length,
+        itemBuilder: (context, idx) {
+          final element = _attachments[idx];
+          return Container(
+            decoration: BoxDecoration(
+              color: Theme.of(context).colorScheme.surfaceContainerHigh,
+              border: Border.all(
+                color: Theme.of(context).dividerColor,
+                width: 1,
+              ),
+              borderRadius: radius,
+            ),
+            child: ClipRRect(
+              borderRadius: radius,
+              child: _buildEntry(element, idx),
+            ),
+          );
+        },
+      );
+    }
+
     if (widget.isColumn) {
       var idx = 0;
-      const radius = BorderRadius.all(Radius.circular(8));
       return Wrap(
         spacing: 8,
         runSpacing: 8,
@@ -212,27 +271,31 @@ class _AttachmentListState extends State<AttachmentList> {
       );
     }
 
-    final isNotPureImage = _attachments.any(
+    return SizedBox(
-      (x) => x?.mimetype.split('/').firstOrNull != 'image',
+      width: math.min(MediaQuery.of(context).size.width, widget.columnMaxWidth),
-    );
+      child: CarouselSlider.builder(
-    if (widget.isGrid && (widget.isForceGrid || !isNotPureImage)) {
+        options: CarouselOptions(
-      const radius = BorderRadius.all(Radius.circular(8));
+          disableCenter: true,
-      return GridView.builder(
+          animateToClosest: true,
-        padding: EdgeInsets.zero,
+          aspectRatio: _aspectRatio,
-        primary: false,
+          enlargeCenterPage: true,
-        physics: const NeverScrollableScrollPhysics(),
+          viewportFraction: widget.viewport ?? 0.95,
-        shrinkWrap: true,
+          enableInfiniteScroll: false,
-        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
-          crossAxisCount: math.min(3, _attachments.length),
-          mainAxisSpacing: 8.0,
-          crossAxisSpacing: 8.0,
         ),
         itemCount: _attachments.length,
-        itemBuilder: (context, idx) {
+        itemBuilder: (context, idx, _) {
           final element = _attachments[idx];
+          if (element == null) const SizedBox.shrink();
+          double ratio = element!.metadata?['ratio']?.toDouble() ?? 16 / 9;
           return Container(
+            constraints: BoxConstraints(
+              maxWidth: widget.columnMaxWidth,
+              maxHeight: 640,
+            ),
+            child: AspectRatio(
+              aspectRatio: ratio,
+              child: Container(
                 decoration: BoxDecoration(
-              color: Theme.of(context).colorScheme.surfaceContainerHigh,
                   border: Border.all(
                     color: Theme.of(context).dividerColor,
                     width: 1,
@@ -243,38 +306,10 @@ class _AttachmentListState extends State<AttachmentList> {
                   borderRadius: radius,
                   child: _buildEntry(element, idx),
                 ),
+              ),
+            ),
           );
         },
-      ).paddingSymmetric(horizontal: 24);
-    }
-
-    return Container(
-      width: MediaQuery.of(context).size.width,
-      constraints: BoxConstraints(
-        maxHeight: widget.flatMaxHeight,
-      ),
-      decoration: BoxDecoration(
-        color: Colors.transparent,
-        border: Border.symmetric(
-          horizontal: BorderSide(
-            width: 0.3,
-            color: Theme.of(context).dividerColor,
-          ),
-        ),
-      ),
-      child: CarouselSlider.builder(
-        options: CarouselOptions(
-          animateToClosest: true,
-          aspectRatio: _aspectRatio,
-          viewportFraction:
-              widget.viewport ?? (_attachments.length > 1 ? 0.95 : 1),
-          enableInfiniteScroll: false,
-        ),
-        itemCount: _attachments.length,
-        itemBuilder: (context, idx, _) {
-          final element = _attachments[idx];
-          return _buildEntry(element, idx);
-        },
       ),
     );
   }

lib/widgets/channel/channel_list.dart

@@ -205,7 +205,7 @@ class _ChannelListWidgetState extends State<ChannelListWidget> {
         item.members!.where((e) => e.account.id != widget.selfId).firstOrNull;
 
     if (item.type == 1 && otherside != null) {
-      final avatar = AccountAvatar(
+      final avatar = AttachedCircleAvatar(
         content: otherside.account.avatar,
         radius: 20,
         bgColor: Theme.of(context).colorScheme.primary,
@@ -241,7 +241,7 @@ class _ChannelListWidgetState extends State<ChannelListWidget> {
                   padding: const EdgeInsets.all(2),
                   elevation: 8,
                 ),
-                badgeContent: AccountAvatar(
+                badgeContent: AttachedCircleAvatar(
                   content: item.realm?.avatar,
                   radius: 10,
                   fallbackWidget: const Icon(

lib/widgets/channel/channel_member.dart

@@ -152,7 +152,8 @@ class _ChannelMemberListPopupState extends State<ChannelMemberListPopup> {
                   title: Text(element.account.nick),
                   subtitle: Text(element.account.name),
                   leading: GestureDetector(
-                    child: AccountAvatar(content: element.account.avatar),
+                    child:
+                        AttachedCircleAvatar(content: element.account.avatar),
                     onTap: () {
                       showModalBottomSheet(
                         useRootNavigator: true,

lib/widgets/chat/call/call_no_content.dart

@@ -74,7 +74,7 @@ class _NoContentWidgetState extends State<NoContentWidget>
               ),
             )
           ],
-          child: AccountAvatar(
+          child: AttachedCircleAvatar(
             content: widget.userinfo!.avatar,
             bgColor: Colors.transparent,
             radius: radius,

lib/widgets/chat/chat_event.dart

@@ -220,7 +220,7 @@ class ChatEvent extends StatelessWidget {
                 children: [
                   Row(
                     children: [
-                      AccountAvatar(
+                      AttachedCircleAvatar(
                         content: item.sender.account.avatar,
                         radius: 9,
                       ),
@@ -250,7 +250,8 @@ class ChatEvent extends StatelessWidget {
             crossAxisAlignment: CrossAxisAlignment.start,
             children: [
               GestureDetector(
-                child: AccountAvatar(content: item.sender.account.avatar),
+                child:
+                    AttachedCircleAvatar(content: item.sender.account.avatar),
                 onTap: () {
                   showModalBottomSheet(
                     useRootNavigator: true,

lib/widgets/chat/chat_message_input.dart

@@ -443,7 +443,7 @@ class _ChatMessageInputState extends State<ChatMessageInput> {
                           .map(
                             (x) => ChatMessageSuggestion(
                               type: 'users',
-                              leading: AccountAvatar(content: x.avatar),
+                              leading: AttachedCircleAvatar(content: x.avatar),
                               display: x.nick,
                               content: '@${x.name}',
                             ),

lib/widgets/navigation/app_account_widget.dart

@@ -69,7 +69,7 @@ class _AppAccountWidgetState extends State<AppAccountWidget> {
             bottom: 0,
             end: -2,
           ),
-          child: AccountAvatar(
+          child: AttachedCircleAvatar(
             radius: 14,
             content: auth.userProfile.value!['avatar'],
           ),

lib/widgets/navigation/realm_switcher.dart

@@ -36,7 +36,7 @@ class RealmSwitcher extends StatelessWidget {
                       mainAxisAlignment: MainAxisAlignment.center,
                       children: [
                         if (item != null)
-                          AccountAvatar(
+                          AttachedCircleAvatar(
                             content: item.avatar,
                             radius: 14,
                             fallbackWidget: const Icon(

lib/widgets/posts/post_creation.dart

@@ -0,0 +1,108 @@
+import 'package:flutter/material.dart';
+import 'package:gap/gap.dart';
+import 'package:get/get.dart';
+import 'package:solian/providers/auth.dart';
+import 'package:solian/router.dart';
+
+class PostCreatePopup extends StatelessWidget {
+  final bool hideDraftBox;
+
+  const PostCreatePopup({
+    super.key,
+    this.hideDraftBox = false,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final AuthProvider auth = Get.find();
+
+    if (auth.isAuthorized.isFalse) {
+      return const SizedBox.shrink();
+    }
+
+    final List<dynamic> actionList = [
+      (
+        icon: const Icon(Icons.post_add),
+        label: 'postEditorModeStory'.tr,
+        onTap: () {
+          Navigator.pop(
+            context,
+            AppRouter.instance.pushNamed(
+              'postEditor',
+              queryParameters: {
+                'mode': 0.toString(),
+              },
+            ),
+          );
+        },
+      ),
+      (
+        icon: const Icon(Icons.description),
+        label: 'postEditorModeArticle'.tr,
+        onTap: () {
+          Navigator.pop(
+            context,
+            AppRouter.instance.pushNamed(
+              'postEditor',
+              queryParameters: {
+                'mode': 1.toString(),
+              },
+            ),
+          );
+        },
+      ),
+      (
+        icon: const Icon(Icons.drafts),
+        label: 'draftBoxOpen'.tr,
+        onTap: () {
+          Navigator.pop(
+            context,
+            AppRouter.instance.pushNamed('draftBox'),
+          );
+        },
+      ),
+    ];
+
+    return SizedBox(
+      height: MediaQuery.of(context).size.height * 0.38,
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Text(
+            'postNew'.tr,
+            style: Theme.of(context).textTheme.headlineSmall,
+          ).paddingOnly(left: 24, right: 24, top: 32, bottom: 16),
+          Expanded(
+            child: GridView.count(
+              physics: const NeverScrollableScrollPhysics(),
+              crossAxisCount: 3,
+              children: actionList
+                  .map((x) => Card(
+                        color: Theme.of(context).colorScheme.surfaceContainer,
+                        child: InkWell(
+                          borderRadius:
+                              const BorderRadius.all(Radius.circular(8)),
+                          onTap: x.onTap,
+                          child: Column(
+                            crossAxisAlignment: CrossAxisAlignment.start,
+                            children: [
+                              x.icon,
+                              const Gap(8),
+                              Expanded(
+                                child: Text(
+                                  x.label,
+                                  overflow: TextOverflow.fade,
+                                ),
+                              ),
+                            ],
+                          ).paddingAll(18),
+                        ),
+                      ))
+                  .toList(),
+            ).paddingSymmetric(horizontal: 20),
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/widgets/posts/post_item.dart

@@ -12,7 +12,6 @@ import 'package:solian/screens/posts/post_detail.dart';
 import 'package:solian/shells/title_shell.dart';
 import 'package:solian/theme.dart';
 import 'package:solian/widgets/account/account_avatar.dart';
-import 'package:solian/widgets/account/account_profile_popup.dart';
 import 'package:solian/widgets/attachments/attachment_list.dart';
 import 'package:solian/widgets/link_expansion.dart';
 import 'package:solian/widgets/markdown_text_content.dart';
@@ -36,6 +35,7 @@ class PostItem extends StatefulWidget {
   final bool showFeaturedReply;
   final String? attachmentParent;
   final Color? backgroundColor;
+  final Function? onComment;
 
   const PostItem({
     super.key,
@@ -52,6 +52,7 @@ class PostItem extends StatefulWidget {
     this.showFeaturedReply = false,
     this.attachmentParent,
     this.backgroundColor,
+    this.onComment,
   });
 
   @override
@@ -92,8 +93,6 @@ class _PostItemState extends State<PostItem> {
             item: item,
           ).paddingSymmetric(horizontal: 12),
           _PostHeaderDividerWidget(item: item).paddingSymmetric(horizontal: 12),
-          Stack(
-            children: [
           SizedContainer(
             maxWidth: 640,
             maxHeight: widget.isFullContent ? double.infinity : 80,
@@ -110,15 +109,12 @@ class _PostItemState extends State<PostItem> {
                   isSelectable: widget.isContentSelectable,
                 ),
               ).paddingOnly(
-                    left: 16,
+                left: 12,
                 right: 12,
-                    top: 2,
                 bottom: hasAttachment ? 4 : 0,
               ),
             ),
           ),
-            ],
-          ),
           if (_contentHeight >= 80 && !widget.isFullContent)
             Opacity(
               opacity: 0.8,
@@ -132,7 +128,7 @@ class _PostItemState extends State<PostItem> {
             right: 8,
             top: 4,
           ),
-          _PostFooterWidget(item: item).paddingOnly(left: 16),
+          _PostFooterWidget(item: item).paddingOnly(left: 12),
           if (attachments.isNotEmpty)
             Row(
               children: [
@@ -148,7 +144,7 @@ class _PostItemState extends State<PostItem> {
                   style: TextStyle(color: _unFocusColor),
                 )
               ],
-            ).paddingOnly(left: 16, top: 4),
+            ).paddingOnly(left: 14, top: 4),
         ],
       );
     }
@@ -162,25 +158,7 @@ class _PostItemState extends State<PostItem> {
             rid: item.body['thumbnail'],
             parentId: widget.item.id.toString(),
           ).paddingOnly(bottom: 4),
-          Row(
+          Column(
-            crossAxisAlignment: CrossAxisAlignment.start,
-            children: [
-              GestureDetector(
-                child: AccountAvatar(content: item.author.avatar),
-                onTap: () {
-                  showModalBottomSheet(
-                    useRootNavigator: true,
-                    isScrollControlled: true,
-                    backgroundColor: Theme.of(context).colorScheme.surface,
-                    context: context,
-                    builder: (context) => AccountProfilePopup(
-                      name: item.author.name,
-                    ),
-                  );
-                },
-              ),
-              Expanded(
-                child: Column(
             crossAxisAlignment: CrossAxisAlignment.start,
             children: [
               _PostHeaderWidget(
@@ -188,12 +166,9 @@ class _PostItemState extends State<PostItem> {
                 item: item,
               ),
               _PostHeaderDividerWidget(item: item),
-                    Stack(
-                      children: [
               SizedContainer(
                 maxWidth: 640,
-                          maxHeight:
+                maxHeight: widget.isFullContent ? double.infinity : 320,
-                              widget.isFullContent ? double.infinity : 320,
                 child: _MeasureSize(
                   onChange: (size) {
                     setState(() => _contentHeight = size.height);
@@ -205,30 +180,24 @@ class _PostItemState extends State<PostItem> {
                       content: item.body['content'],
                       isAutoWarp: item.type == 'story',
                       isSelectable: widget.isContentSelectable,
-                                isLargeText: item.type == 'article' &&
+                      isLargeText:
-                                    widget.isFullContent,
+                          item.type == 'article' && widget.isFullContent,
-                              ).paddingOnly(left: 12, right: 8),
                     ),
                   ),
                 ),
-                      ],
               ),
               if (_contentHeight >= 320 && !widget.isFullContent)
                 Opacity(
                   opacity: 0.8,
                   child: InkWell(child: Text('readMore'.tr)),
-                      ).paddingOnly(
+                ).paddingOnly(top: 4),
-                        left: 12,
-                        top: 4,
-                      ),
               if (widget.item.replyTo != null && widget.isShowEmbed)
                 Container(
                   constraints: const BoxConstraints(maxWidth: 480),
-                        padding: const EdgeInsets.only(top: 4),
+                  padding: const EdgeInsets.only(top: 8),
                   child: _PostEmbedWidget(
                     isClickable: widget.isClickable,
-                          isOverrideEmbedClickable:
+                    isOverrideEmbedClickable: widget.isOverrideEmbedClickable,
-                              widget.isOverrideEmbedClickable,
                     item: widget.item.replyTo!,
                     username: widget.item.replyTo!.author.name,
                     hintText: 'postRepliedNotify',
@@ -239,11 +208,10 @@ class _PostItemState extends State<PostItem> {
               if (widget.item.repostTo != null && widget.isShowEmbed)
                 Container(
                   constraints: const BoxConstraints(maxWidth: 480),
-                        padding: const EdgeInsets.only(top: 4),
+                  padding: const EdgeInsets.only(top: 8),
                   child: _PostEmbedWidget(
                     isClickable: widget.isClickable,
-                          isOverrideEmbedClickable:
+                    isOverrideEmbedClickable: widget.isOverrideEmbedClickable,
-                              widget.isOverrideEmbedClickable,
                     item: widget.item.repostTo!,
                     username: widget.item.repostTo!.author.name,
                     hintText: 'postRepostedNotify',
@@ -251,24 +219,19 @@ class _PostItemState extends State<PostItem> {
                     id: widget.item.repostTo!.id.toString(),
                   ),
                 ),
-                    _PostFooterWidget(item: item).paddingOnly(left: 12),
+              _PostFooterWidget(item: item),
-                    LinkExpansion(content: item.body['content'])
+              LinkExpansion(content: item.body['content']).paddingOnly(top: 4),
-                        .paddingOnly(top: 4),
-                  ],
-                ),
-              ),
             ],
           ).paddingOnly(
-            top: 10,
-            bottom:
-                (attachments.length == 1 && !AppTheme.isLargeScreen(context))
-                    ? 10
-                    : 0,
             right: 16,
             left: 16,
           ),
           _PostAttachmentWidget(item: item),
-          if (widget.showFeaturedReply) _PostFeaturedReplyWidget(item: item),
+          if (widget.showFeaturedReply)
+            _PostFeaturedReplyWidget(item: item).paddingSymmetric(
+              horizontal: 12,
+            ),
+          if (widget.showFeaturedReply) const Gap(8),
           if (widget.isShowReply || widget.isReactable)
             PostQuickAction(
               isShowReply: widget.isShowReply,
@@ -280,19 +243,15 @@ class _PostItemState extends State<PostItem> {
                       (item.metric!.reactionList[symbol] ?? 0) + changes;
                 });
               },
+              onComment: () {
+                if (widget.onComment != null) {
+                  widget.onComment!();
+                }
+              },
             ).paddingOnly(
-              top: (attachments.length == 1 && !AppTheme.isLargeScreen(context))
+              left: 14,
-                  ? 10
+              right: 14,
-                  : 6,
-              left:
-                  (attachments.length == 1 && !AppTheme.isLargeScreen(context))
-                      ? 24
-                      : 60,
-              right: 16,
-              bottom: 10,
             )
-          else
-            const Gap(10),
         ],
       ),
       openBuilder: (_, __) => TitleShell(
@@ -317,7 +276,6 @@ class _PostFeaturedReplyWidget extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final isLargeScreen = AppTheme.isLargeScreen(context);
     final unFocusColor =
         Theme.of(context).colorScheme.onSurface.withOpacity(0.75);
 
@@ -325,13 +283,10 @@ class _PostFeaturedReplyWidget extends StatelessWidget {
       return const SizedBox.shrink();
     }
 
-    final List<String> attachments = item.body['attachments'] is List
-        ? List.from(item.body['attachments']?.whereType<String>())
-        : List.empty();
-
     return FutureBuilder(
-      future:
+      future: Get.find<PostProvider>().listPostFeaturedReply(
-          Get.find<PostProvider>().listPostFeaturedReply(item.id.toString()),
+        item.id.toString(),
+      ),
       builder: (context, snapshot) {
         if (!snapshot.hasData || snapshot.data!.isEmpty) {
           return const SizedBox.shrink();
@@ -351,7 +306,7 @@ class _PostFeaturedReplyWidget extends StatelessWidget {
                           mainAxisAlignment: MainAxisAlignment.center,
                           crossAxisAlignment: CrossAxisAlignment.start,
                           children: [
-                            AccountAvatar(
+                            AttachedCircleAvatar(
                               content: reply.author.avatar,
                               radius: 10,
                             ),
@@ -423,16 +378,9 @@ class _PostFeaturedReplyWidget extends StatelessWidget {
                   .toList(),
             ),
           ),
-        )
+        ).animate().fadeIn(
-            .animate()
-            .fadeIn(
               duration: 300.ms,
               curve: Curves.easeIn,
-            )
-            .paddingOnly(
-              top: (attachments.length == 1 && !isLargeScreen) ? 10 : 6,
-              left: (attachments.length == 1 && !isLargeScreen) ? 24 : 60,
-              right: 16,
             );
       },
     );
@@ -452,30 +400,33 @@ class _PostAttachmentWidget extends StatelessWidget {
         ? List.from(item.body['attachments']?.whereType<String>())
         : List.empty();
 
-    if (attachments.length > 3) {
+    if (attachments.isEmpty) return const SizedBox.shrink();
+
+    if (attachments.length == 1) {
+      return AttachmentList(
+        parentId: item.id.toString(),
+        attachmentIds: item.preload == null ? attachments : null,
+        attachments: item.preload?.attachments,
+        autoload: false,
+        isFullWidth: true,
+      ).paddingOnly(top: 4);
+    } else if (attachments.length > 1 &&
+        attachments.length % 3 == 0 &&
+        !isLargeScreen) {
       return AttachmentList(
         parentId: item.id.toString(),
         attachmentIds: item.preload == null ? attachments : null,
         attachments: item.preload?.attachments,
         autoload: false,
         isGrid: true,
-      ).paddingOnly(left: 36, top: 4, bottom: 4);
+      ).paddingSymmetric(horizontal: 14, vertical: 8);
-    } else if (attachments.length > 1 || isLargeScreen) {
-      return AttachmentList(
-        parentId: item.id.toString(),
-        attachmentIds: item.preload == null ? attachments : null,
-        attachments: item.preload?.attachments,
-        autoload: false,
-        isColumn: true,
-      ).paddingOnly(left: 60, right: 24, top: 4, bottom: 4);
     } else {
       return AttachmentList(
-        flatMaxHeight: MediaQuery.of(context).size.width,
         parentId: item.id.toString(),
         attachmentIds: item.preload == null ? attachments : null,
         attachments: item.preload?.attachments,
         autoload: false,
-      );
+      ).paddingOnly(bottom: 8, top: 4);
     }
   }
 }
@@ -515,16 +466,17 @@ class _PostEmbedWidget extends StatelessWidget {
                 size: 16,
                 color: unFocusColor,
               ),
+              const Gap(6),
               Expanded(
                 child: Text(
                   hintText.trParams(
                     {'username': '@$username'},
                   ),
                   style: TextStyle(color: unFocusColor),
-                ).paddingOnly(left: 6),
+                ),
               ),
             ],
-          ).paddingOnly(left: 12),
+          ).paddingOnly(left: 2),
           Card(
             elevation: 1,
             child: PostItem(
@@ -560,9 +512,7 @@ class _PostHeaderDividerWidget extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     if (item.body['description'] != null || item.body['title'] != null) {
-      return const Divider(thickness: 0.3, height: 1).paddingSymmetric(
+      return const Gap(8);
-        vertical: 8,
-      );
     }
     return const SizedBox.shrink();
   }
@@ -634,49 +584,59 @@ class _PostHeaderWidget extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Row(
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Row(
           crossAxisAlignment: CrossAxisAlignment.start,
           children: [
-        if (isCompact)
             AccountAvatar(
               content: item.author.avatar,
-            radius: 10,
+              username: item.author.name,
-          ).paddingOnly(left: 2, top: 1),
+              radius: isCompact ? 10 : null,
+            ),
+            Gap(isCompact ? 6 : 8),
             Expanded(
               child: Column(
                 crossAxisAlignment: CrossAxisAlignment.start,
                 children: [
                   Row(
+                    crossAxisAlignment: CrossAxisAlignment.center,
                     children: [
                       Text(
                         item.author.nick,
                         style: const TextStyle(fontWeight: FontWeight.bold),
                       ),
-                  RelativeDate(item.publishedAt?.toLocal() ?? DateTime.now())
+                      if (isCompact) const Gap(4),
-                      .paddingOnly(left: 4),
+                      if (isCompact)
+                        RelativeDate(
+                          item.publishedAt?.toLocal() ?? DateTime.now(),
+                        ).paddingOnly(top: 1),
                     ],
                   ),
-              if (item.body['title'] != null)
+                  if (!isCompact)
-                Text(
+                    RelativeDate(item.publishedAt?.toLocal() ?? DateTime.now()),
-                  item.body['title'],
-                  style: Theme.of(context)
-                      .textTheme
-                      .bodyMedium!
-                      .copyWith(fontSize: 15),
-                ),
-              if (item.body['description'] != null)
-                Text(
-                  item.body['description'],
-                  style: Theme.of(context).textTheme.bodySmall,
-                ),
                 ],
-          ).paddingOnly(left: isCompact ? 6 : 12),
+              ),
             ),
             if (item.type == 'article')
               Badge(
                 label: Text('article'.tr),
               ).paddingOnly(top: 3),
           ],
+        ),
+        const Gap(8),
+        if (item.body['title'] != null)
+          Text(
+            item.body['title'],
+            style: Theme.of(context).textTheme.titleMedium,
+          ),
+        if (item.body['description'] != null)
+          Text(
+            item.body['description'],
+            style: Theme.of(context).textTheme.titleSmall,
+          ),
+      ],
     );
   }
 }

lib/widgets/posts/post_list.dart

@@ -3,6 +3,8 @@ import 'package:get/get.dart';
 import 'package:infinite_scroll_pagination/infinite_scroll_pagination.dart';
 import 'package:solian/models/post.dart';
 import 'package:solian/providers/auth.dart';
+import 'package:solian/router.dart';
+import 'package:solian/screens/posts/post_editor.dart';
 import 'package:solian/widgets/posts/post_action.dart';
 import 'package:solian/widgets/posts/post_item.dart';
 
@@ -12,6 +14,7 @@ class PostListWidget extends StatelessWidget {
   final bool isNestedClickable;
   final PagingController<int, Post> controller;
   final Color? backgroundColor;
+  final EdgeInsets? padding;
 
   const PostListWidget({
     super.key,
@@ -20,6 +23,7 @@ class PostListWidget extends StatelessWidget {
     this.isClickable = true,
     this.isNestedClickable = true,
     this.backgroundColor,
+    this.padding,
   });
 
   @override
@@ -29,7 +33,9 @@ class PostListWidget extends StatelessWidget {
       pagingController: controller,
       builderDelegate: PagedChildBuilderDelegate<Post>(
         itemBuilder: (context, item, index) {
-          return PostListEntryWidget(
+          return Padding(
+            padding: padding ?? EdgeInsets.zero,
+            child: PostListEntryWidget(
               isShowEmbed: isShowEmbed,
               isNestedClickable: isNestedClickable,
               isClickable: isClickable,
@@ -39,6 +45,7 @@ class PostListWidget extends StatelessWidget {
               onUpdate: () {
                 controller.refresh();
               },
+            ),
           );
         },
       ),
@@ -77,6 +84,22 @@ class PostListEntryWidget extends StatelessWidget {
         isClickable: isNestedClickable,
         showFeaturedReply: showFeaturedReply,
         backgroundColor: backgroundColor,
+        onComment: () {
+          AppRouter.instance
+              .pushNamed(
+            'postEditor',
+            extra: PostPublishArguments(reply: item),
+          )
+              .then((value) {
+            if (value is Future) {
+              value.then((_) {
+                onUpdate();
+              });
+            } else if (value != null) {
+              onUpdate();
+            }
+          });
+        },
       ).paddingSymmetric(vertical: 8),
       onLongPress: () {
         final AuthProvider auth = Get.find();

lib/widgets/posts/post_quick_action.dart

@@ -11,6 +11,7 @@ class PostQuickAction extends StatefulWidget {
   final Post item;
   final bool isReactable;
   final bool isShowReply;
+  final Function onComment;
   final void Function(String symbol, int num) onReact;
 
   const PostQuickAction({
@@ -18,6 +19,7 @@ class PostQuickAction extends StatefulWidget {
     required this.item,
     this.isShowReply = true,
     this.isReactable = true,
+    required this.onComment,
     required this.onReact,
   });
 
@@ -106,7 +108,11 @@ class _PostQuickActionState extends State<PostQuickAction> {
                     builder: (context) {
                       return PostReplyListPopup(item: widget.item);
                     },
-                  );
+                  ).then((signal) {
+                    if (signal == true) {
+                      widget.onComment();
+                    }
+                  });
                 },
               ),
             ),

lib/widgets/posts/post_replies.dart

@@ -53,6 +53,7 @@ class _PostReplyListState extends State<PostReplyList> {
   @override
   Widget build(BuildContext context) {
     return PostListWidget(
+      padding: EdgeInsets.symmetric(horizontal: 10),
       isShowEmbed: false,
       controller: _pagingController,
       backgroundColor: widget.backgroundColor,
@@ -70,16 +71,30 @@ class PostReplyListPopup extends StatelessWidget {
     return Column(
       crossAxisAlignment: CrossAxisAlignment.start,
       children: [
-        Text(
+        Row(
+          children: [
+            Expanded(
+              child: Text(
                 'postReplies'.tr,
                 style: Theme.of(context).textTheme.headlineSmall,
-        ).paddingOnly(left: 24, right: 24, top: 32, bottom: 16),
+              ),
+            ),
+            IconButton(
+              icon: const Icon(Icons.add_comment),
+              visualDensity: const VisualDensity(horizontal: -4),
+              onPressed: () {
+                Navigator.pop(context, true);
+              },
+            ),
+          ],
+        ).paddingOnly(left: 24, right: 24, top: 24, bottom: 8),
         Expanded(
           child: CustomScrollView(
             slivers: [
               PostReplyList(
                 item: item,
-                backgroundColor: Theme.of(context).colorScheme.surfaceContainerLow,
+                backgroundColor:
+                    Theme.of(context).colorScheme.surfaceContainerLow,
               ),
             ],
           ),

lib/widgets/realms/realm_member.dart

@@ -149,7 +149,8 @@ class _RealmMemberListPopupState extends State<RealmMemberListPopup> {
                   title: Text(element.account.nick),
                   subtitle: Text(element.account.name),
                   leading: GestureDetector(
-                    child: AccountAvatar(content: element.account.avatar),
+                    child:
+                        AttachedCircleAvatar(content: element.account.avatar),
                     onTap: () {
                       showModalBottomSheet(
                         useRootNavigator: true,