💄 Optimize attachment preview

assets/i18n/en-US.json

@@ -841,5 +841,8 @@
   "messageJumpNotLoaded": "The referenced message was not loaded, unable to jump to it.",
   "postUnlinkRealm": "No linked realm",
   "postSlug": "Slug",
-  "postSlugHint": "The slug can be used to access your post via URL in the webpage, it should be publisher-wide unique."
+  "postSlugHint": "The slug can be used to access your post via URL in the webpage, it should be publisher-wide unique.",
+  "attachmentOnDevice": "On-device",
+  "attachmentOnCloud": "On-cloud",
+  "attachments": "Attachments"
 }

assets/i18n/zh-CN.json

@@ -816,5 +816,7 @@
   "messageJumpNotLoaded": "引用的消息没有被加载，无法跳转。",
   "postUnlinkRealm": "不关联领域",
   "postSlug": "别名",
-  "postSlugHint": "这个别名可以用于在网页通过 URL 浏览到你的帖子，它应该在同一发布者中是唯一。"
+  "postSlugHint": "这个别名可以用于在网页通过 URL 浏览到你的帖子，它应该在同一发布者中是唯一。",
+  "attachmentOnDevice": "离线",
+  "attachmentOnCloud": "在线"
 }

lib/screens/posts/compose_article.dart

@@ -89,6 +89,9 @@ class ArticleComposeScreen extends HookConsumerWidget {
     }, [state]);
 
     final showPreview = useState(false);
+    final isAttachmentsExpanded = useState(
+      true,
+    ); // New state for attachments section
 
     // Initialize publisher once when data is available
     useEffect(() {
@@ -297,16 +300,35 @@ class ArticleComposeScreen extends HookConsumerWidget {
                 valueListenable: state.attachments,
                 builder: (context, attachments, _) {
                   if (attachments.isEmpty) return const SizedBox.shrink();
-                  return Column(
+                  return Theme(
+                    data: Theme.of(
+                      context,
+                    ).copyWith(dividerColor: Colors.transparent),
+                    child: ExpansionTile(
+                      initiallyExpanded: isAttachmentsExpanded.value,
+                      onExpansionChanged: (expanded) {
+                        isAttachmentsExpanded.value = expanded;
+                      },
+                      collapsedBackgroundColor:
+                          Theme.of(context).colorScheme.surfaceContainer,
+                      title: Column(
                         crossAxisAlignment: CrossAxisAlignment.start,
                         children: [
-                      const Gap(16),
+                          Text('attachments').tr(),
                           Text(
                             'articleAttachmentHint'.tr(),
-                        style: Theme.of(context).textTheme.bodySmall?.copyWith(
+                            style: Theme.of(
-                          color: Theme.of(context).colorScheme.onSurfaceVariant,
+                              context,
+                            ).textTheme.bodySmall?.copyWith(
+                              color:
+                                  Theme.of(
+                                    context,
+                                  ).colorScheme.onSurfaceVariant,
                             ),
-                      ).padding(bottom: 8),
+                          ),
+                        ],
+                      ),
+                      children: [
                         ValueListenableBuilder<Map<int, double>>(
                           valueListenable: state.attachmentProgress,
                           builder: (context, progressMap, _) {
@@ -314,11 +336,16 @@ class ArticleComposeScreen extends HookConsumerWidget {
                               runSpacing: 8,
                               spacing: 8,
                               children: [
-                              for (var idx = 0; idx < attachments.length; idx++)
+                                for (
+                                  var idx = 0;
+                                  idx < attachments.length;
+                                  idx++
+                                )
                                   SizedBox(
-                                  width: 280,
+                                    width: 180,
-                                  height: 280,
+                                    height: 180,
                                     child: AttachmentPreview(
+                                      isCompact: true,
                                       item: attachments[idx],
                                       progress: progressMap[idx],
                                       onRequestUpload:
@@ -340,15 +367,6 @@ class ArticleComposeScreen extends HookConsumerWidget {
                                             state,
                                             idx,
                                           ),
-                                    onMove: (delta) {
-                                      state
-                                          .attachments
-                                          .value = ComposeLogic.moveAttachment(
-                                        state.attachments.value,
-                                        idx,
-                                        delta,
-                                      );
-                                    },
                                       onInsert:
                                           () => ComposeLogic.insertAttachment(
                                             ref,
@@ -361,7 +379,9 @@ class ArticleComposeScreen extends HookConsumerWidget {
                             );
                           },
                         ),
+                        Gap(16),
                       ],
+                    ),
                   );
                 },
               ),

lib/widgets/content/attachment_preview.dart

@@ -88,6 +88,7 @@ class AttachmentPreview extends HookConsumerWidget {
   final Function? onInsert;
   final Function(UniversalFile)? onUpdate;
   final Function? onRequestUpload;
+  final bool isCompact;
 
   const AttachmentPreview({
     super.key,
@@ -98,6 +99,7 @@ class AttachmentPreview extends HookConsumerWidget {
     this.onDelete,
     this.onUpdate,
     this.onInsert,
+    this.isCompact = false,
   });
 
   // GlobalKey for selector
@@ -361,7 +363,7 @@ class AttachmentPreview extends HookConsumerWidget {
                     ),
                 ],
               ),
-            ),
+            ).center(),
             Row(
               mainAxisAlignment: MainAxisAlignment.spaceBetween,
               children: [
@@ -458,9 +460,10 @@ class AttachmentPreview extends HookConsumerWidget {
                                       size: 16,
                                       color: Colors.white,
                                     ),
-                                    const Gap(8),
+                                    if (!isCompact) const Gap(8),
+                                    if (!isCompact)
                                       Text(
-                                      'On-cloud',
+                                        'attachmentOnCloud'.tr(),
                                         style: TextStyle(color: Colors.white),
                                       ),
                                   ],
@@ -473,9 +476,10 @@ class AttachmentPreview extends HookConsumerWidget {
                                       size: 16,
                                       color: Colors.white,
                                     ),
-                                    const Gap(8),
+                                    if (!isCompact) const Gap(8),
+                                    if (!isCompact)
                                       Text(
-                                      'On-device',
+                                        'attachmentOnDevice'.tr(),
                                         style: TextStyle(color: Colors.white),
                                       ),
                                   ],