✨ Thumbnail

lib/controllers/post_editor_controller.dart

@@ -10,6 +10,7 @@ import 'package:solian/widgets/posts/editor/post_editor_categories_tags.dart';
 import 'package:solian/widgets/posts/editor/post_editor_date.dart';
 import 'package:solian/widgets/posts/editor/post_editor_overview.dart';
 import 'package:solian/widgets/posts/editor/post_editor_publish_zone.dart';
+import 'package:solian/widgets/posts/editor/post_editor_thumbnail.dart';
 import 'package:solian/widgets/posts/editor/post_editor_visibility.dart';
 import 'package:shared_preferences/shared_preferences.dart';
 
@@ -31,6 +32,7 @@ class PostEditorController extends GetxController {
   Rx<DateTime?> publishedUntil = Rx(null);
   RxList<int> attachments = RxList<int>.empty(growable: true);
   RxList<String> tags = RxList<String>.empty(growable: true);
+  Rx<int?> thumbnail = Rx(null);
 
   RxList<int> visibleUsers = RxList.empty(growable: true);
   RxList<int> invisibleUsers = RxList.empty(growable: true);
@@ -125,6 +127,15 @@ class PostEditorController extends GetxController {
     );
   }
 
+  Future<void> editThumbnail(BuildContext context) {
+    return showDialog(
+      context: context,
+      builder: (context) => PostEditorThumbnailDialog(
+        controller: this,
+      ),
+    );
+  }
+
   void toggleDraftMode() {
     isDraft.value = !isDraft.value;
   }
@@ -165,6 +176,7 @@ class PostEditorController extends GetxController {
     visibleUsers.clear();
     invisibleUsers.clear();
     visibility.value = 0;
+    thumbnail.value = 0;
     publishedAt.value = null;
     publishedUntil.value = null;
     isDraft.value = false;
@@ -246,6 +258,7 @@ class PostEditorController extends GetxController {
       'title': title,
       'description': description,
       'content': contentController.text,
+      'thumbnail': thumbnail.value,
       'tags': tags.map((x) => {'alias': x}).toList(),
       'attachments': attachments,
       'visible_users': visibleUsers,
@@ -269,6 +282,7 @@ class PostEditorController extends GetxController {
     contentController.text = value['content'] ?? '';
     attachments.value = value['attachments'].cast<int>() ?? List.empty();
     attachments.refresh();
+    thumbnail.value = value['thumbnail'];
     visibility.value = value['visibility'];
     isDraft.value = value['is_draft'];
     if (value['visible_users'] != null) {
@@ -308,7 +322,8 @@ class PostEditorController extends GetxController {
       descriptionController.text.isNotEmpty,
       contentController.text.isNotEmpty,
       attachments.isNotEmpty,
-      tags.isNotEmpty
+      tags.isNotEmpty,
+      thumbnail.value != null,
     ].any((x) => x);
   }
 

lib/screens/home.dart

@@ -208,7 +208,12 @@ class PostCreatePopup extends StatelessWidget {
                             children: [
                               x.icon,
                               const SizedBox(height: 8),
-                              Text(x.label),
+                              Expanded(
+                                child: Text(
+                                  x.label,
+                                  overflow: TextOverflow.fade,
+                                ),
+                              ),
                             ],
                           ).paddingAll(18),
                         ),

lib/screens/posts/post_editor.dart

@@ -453,6 +453,23 @@ class _PostPublishScreenState extends State<PostPublishScreen> {
                             _editorController.editPublishZone(context);
                           },
                         ),
+                        IconButton(
+                          icon: Obx(() {
+                            return badges.Badge(
+                              showBadge:
+                                  _editorController.thumbnail.value != null,
+                              position: badges.BadgePosition.topEnd(
+                                top: -4,
+                                end: -6,
+                              ),
+                              child: const Icon(Icons.preview),
+                            );
+                          }),
+                          color: Theme.of(context).colorScheme.primary,
+                          onPressed: () {
+                            _editorController.editThumbnail(context);
+                          },
+                        ),
                         IconButton(
                           icon: Obx(() {
                             return badges.Badge(
@@ -475,14 +492,15 @@ class _PostPublishScreenState extends State<PostPublishScreen> {
                         MarkdownToolbar(
                           hideImage: true,
                           useIncludedTextField: false,
-                          backgroundColor: Colors.transparent,
+                          backgroundColor:
+                              Theme.of(context).colorScheme.surface,
                           iconColor: Theme.of(context).colorScheme.onSurface,
                           controller: _editorController.contentController,
                           focusNode: _contentFocusNode,
                           borderRadius:
                               const BorderRadius.all(Radius.circular(20)),
                           width: 40,
-                        ).paddingSymmetric(horizontal: 4),
+                        ).paddingSymmetric(horizontal: 2),
                       ],
                     ).paddingSymmetric(horizontal: 6, vertical: 8),
                   ),

lib/translations/en_us.dart

@@ -119,6 +119,9 @@ const i18nEnglish = {
   'postVisibleUsers': 'Visible users',
   'postInvisibleUsers': 'Invisible users',
   'postOverview': 'Overview',
+  'postThumbnail': 'Thumbnail',
+  'postThumbnailAttachmentNew': 'Upload thumbnail',
+  'postThumbnailAttachment': 'Attachment serial number',
   'postPinned': 'Pinned',
   'postListNews': 'News',
   'postListShuffle': 'Random',
@@ -351,7 +354,7 @@ const i18nEnglish = {
   'attachmentSaved': 'Attachment saved to your system album.',
   'cropImage': 'Crop Image',
   'stickerUploader': 'Upload sticker',
-  'stickerUploaderAttachmentNew': 'Upload new attachment',
+  'stickerUploaderAttachmentNew': 'Upload sticker',
   'stickerUploaderAttachment': 'Attachment serial number',
   'stickerUploaderPack': 'Sticker pack serial number',
   'stickerUploaderPackHint':

lib/translations/zh_cn.dart

@@ -113,6 +113,9 @@ const i18nSimplifiedChinese = {
   'postVisibleUsers': '可见帖子者',
   'postInvisibleUsers': '隐藏帖子者',
   'postOverview': '帖子概览',
+  'postThumbnail': '帖子缩略图',
+  'postThumbnailAttachmentNew': '上传附件作为缩略图',
+  'postThumbnailAttachment': '附件序列号',
   'postPinned': '已置顶',
   'postEditorModeStory': '发个帖子',
   'postEditorModeArticle': '撰写文章',
@@ -322,7 +325,7 @@ const i18nSimplifiedChinese = {
   'attachmentSaved': '附件已保存到系统相册',
   'cropImage': '裁剪图片',
   'stickerUploader': '上传贴图',
-  'stickerUploaderAttachmentNew': '上传附件',
+  'stickerUploaderAttachmentNew': '上传附件作为贴图',
   'stickerUploaderAttachment': '附件序列号',
   'stickerUploaderPack': '贴图包序号',
   'stickerUploaderPackHint': '没有该序号？请转到我们的创作者平台创建一个贴图包。',

lib/widgets/posts/editor/post_editor_thumbnail.dart

@@ -0,0 +1,96 @@
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+import 'package:solian/controllers/post_editor_controller.dart';
+import 'package:solian/widgets/attachments/attachment_editor.dart';
+
+class PostEditorThumbnailDialog extends StatefulWidget {
+  final PostEditorController controller;
+
+  const PostEditorThumbnailDialog({super.key, required this.controller});
+
+  @override
+  State<PostEditorThumbnailDialog> createState() =>
+      _PostEditorThumbnailDialogState();
+}
+
+class _PostEditorThumbnailDialogState extends State<PostEditorThumbnailDialog> {
+  final TextEditingController _attachmentController = TextEditingController();
+
+  void _promptUploadNewAttachment() {
+    showModalBottomSheet(
+      context: context,
+      builder: (context) => AttachmentEditorPopup(
+        usage: 'i.attachment',
+        singleMode: true,
+        imageOnly: true,
+        autoUpload: true,
+        onAdd: (value) {
+          setState(() {
+            _attachmentController.text = value.toString();
+          });
+
+          widget.controller.thumbnail.value = value;
+        },
+        initialAttachments: const [],
+        onRemove: (_) {},
+      ),
+    );
+  }
+
+  @override
+  void initState() {
+    _attachmentController.text =
+        widget.controller.thumbnail.value?.toString() ?? '';
+    super.initState();
+  }
+
+  @override
+  void dispose() {
+    _attachmentController.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return AlertDialog(
+      title: Text('postThumbnail'.tr),
+      content: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          ListTile(
+            title: Text('postThumbnailAttachmentNew'.tr),
+            contentPadding: const EdgeInsets.only(left: 16, right: 13),
+            trailing: const Icon(Icons.chevron_right),
+            shape: const RoundedRectangleBorder(
+              borderRadius: BorderRadius.all(Radius.circular(8)),
+            ),
+            onTap: () {
+              _promptUploadNewAttachment();
+            },
+          ),
+          const SizedBox(height: 8),
+          TextField(
+            controller: _attachmentController,
+            decoration: InputDecoration(
+              isDense: true,
+              border: const OutlineInputBorder(),
+              prefixText: '#',
+              labelText: 'postThumbnailAttachment'.tr,
+            ),
+            onTapOutside: (_) => FocusManager.instance.primaryFocus?.unfocus(),
+          ),
+        ],
+      ),
+      actions: [
+        TextButton(
+          onPressed: () {
+            widget.controller.thumbnail.value =
+                int.tryParse(_attachmentController.text);
+            Navigator.pop(context);
+          },
+          child: Text('confirm'.tr),
+        ),
+      ],
+    );
+  }
+}

lib/widgets/posts/post_item.dart

@@ -76,6 +76,30 @@ class _PostItemState extends State<PostItem> {
     }
   }
 
+  Widget _buildThumbnail() {
+    if (widget.item.body['thumbnail'] == null) return const SizedBox();
+    const radius = BorderRadius.all(Radius.circular(8));
+    return AspectRatio(
+      aspectRatio: 16 / 9,
+      child: Container(
+        decoration: BoxDecoration(
+          border: Border.all(
+            color: Theme.of(context).dividerColor,
+            width: 0.3,
+          ),
+          borderRadius: radius,
+        ),
+        child: ClipRRect(
+          borderRadius: radius,
+          child: AttachmentSelfContainedEntry(
+            id: widget.item.body['thumbnail'],
+            parentId: 'p${item.id}-thumbnail',
+          ),
+        ),
+      ),
+    );
+  }
+
   Widget _buildHeader() {
     return Row(
       crossAxisAlignment: CrossAxisAlignment.start,
@@ -283,6 +307,7 @@ class _PostItemState extends State<PostItem> {
       return Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
+          _buildThumbnail().paddingSymmetric(horizontal: 12, vertical: 4),
           _buildHeader().paddingSymmetric(horizontal: 12),
           _buildHeaderDivider().paddingSymmetric(horizontal: 12),
           Stack(
@@ -356,6 +381,7 @@ class _PostItemState extends State<PostItem> {
       closedBuilder: (_, openContainer) => Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
+          _buildThumbnail().paddingSymmetric(horizontal: 12, vertical: 4),
           Row(
             crossAxisAlignment: CrossAxisAlignment.start,
             children: [
@@ -390,7 +416,7 @@ class _PostItemState extends State<PostItem> {
                               setState(() => _contentHeight = size.height);
                             },
                             child: MarkdownTextContent(
-                              parentId: 'p${item.id}',
+                              parentId: 'p${item.id}-embed',
                               content: item.body['content'],
                               isSelectable: widget.isContentSelectable,
                             ).paddingOnly(left: 12, right: 8),