✨ Post overview w/ content length limit indicator

lib/controllers/post_editor_controller.dart

@@ -0,0 +1,114 @@
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+import 'package:solian/models/post.dart';
+import 'package:solian/models/realm.dart';
+import 'package:solian/widgets/attachments/attachment_publish.dart';
+import 'package:solian/widgets/posts/editor/post_editor_overview.dart';
+import 'package:textfield_tags/textfield_tags.dart';
+
+class PostEditorController extends GetxController {
+  final titleController = TextEditingController();
+  final descriptionController = TextEditingController();
+  final contentController = TextEditingController();
+  final tagController = StringTagController();
+
+  RxInt mode = 0.obs;
+  RxInt contentLength = 0.obs;
+
+  Rx<Post?> editTo = Rx(null);
+  Rx<Post?> replyTo = Rx(null);
+  Rx<Post?> repostTo = Rx(null);
+  Rx<Realm?> realmZone = Rx(null);
+  RxList<int> attachments = RxList<int>.empty(growable: true);
+
+  RxBool isDraft = false.obs;
+
+  PostEditorController() {
+    contentController.addListener(() {
+      contentLength.value = contentController.text.length;
+    });
+  }
+
+  Future<void> editOverview(BuildContext context) {
+    return showDialog(
+      context: context,
+      builder: (context) => PostEditorOverviewDialog(
+        controller: this,
+      ),
+    );
+  }
+
+  Future<void> editAttachment(BuildContext context) {
+    return showModalBottomSheet(
+      context: context,
+      isScrollControlled: true,
+      builder: (context) => AttachmentPublishPopup(
+        usage: 'i.attachment',
+        current: attachments,
+        onUpdate: (value) {
+          attachments.value = value;
+          attachments.refresh();
+        },
+      ),
+    );
+  }
+
+  void toggleDraftMode() {
+    isDraft.value = !isDraft.value;
+  }
+
+  set editTarget(Post? value) {
+    if (value == null) {
+      editTo.value = null;
+      return;
+    }
+
+    editTo.value = value;
+    isDraft.value = value.isDraft ?? false;
+    titleController.text = value.body['title'] ?? '';
+    descriptionController.text = value.body['description'] ?? '';
+    contentController.text = value.body['content'] ?? '';
+    attachments.value = value.body['attachments']?.cast<int>() ?? List.empty();
+    attachments.refresh();
+
+    contentLength.value = contentController.text.length;
+  }
+
+  String? get title {
+    if (titleController.text.isEmpty) return null;
+    return titleController.text;
+  }
+
+  String? get description {
+    if (descriptionController.text.isEmpty) return null;
+    return descriptionController.text;
+  }
+
+  Map<String, dynamic> get payload {
+    return {
+      'title': title,
+      'description': description,
+      'content': contentController.text,
+      'tags': tagController.getTags?.map((x) => {'alias': x}).toList() ??
+          List.empty(),
+      'attachments': attachments,
+      'is_draft': isDraft.value,
+      if (replyTo.value != null) 'reply_to': replyTo.value!.id,
+      if (repostTo.value != null) 'repost_to': repostTo.value!.id,
+      if (realmZone.value != null) 'realm': realmZone.value!.alias,
+    };
+  }
+
+  bool get isEmpty {
+    if (contentController.text.isEmpty) return true;
+
+    return false;
+  }
+
+  @override
+  void dispose() {
+    contentController.dispose();
+    tagController.dispose();
+    super.dispose();
+  }
+}

lib/models/post.dart

@@ -6,6 +6,7 @@ class Post {
   int id;
   DateTime createdAt;
   DateTime updatedAt;
+  DateTime? editedAt;
   DateTime? deletedAt;
   dynamic body;
   List<Tag>? tags;
@@ -28,6 +29,7 @@ class Post {
     required this.id,
     required this.createdAt,
     required this.updatedAt,
+    required this.editedAt,
     required this.deletedAt,
     required this.body,
     required this.tags,
@@ -69,6 +71,9 @@ class Post {
         repostTo:
             json['repost_to'] != null ? Post.fromJson(json['repost_to']) : null,
         realm: json['realm'] != null ? Realm.fromJson(json['realm']) : null,
+        editedAt: json['edited_at'] != null
+            ? DateTime.parse(json['edited_at'])
+            : null,
         publishedAt: json['published_at'] != null
             ? DateTime.parse(json['published_at'])
             : null,
@@ -86,7 +91,8 @@ class Post {
         'id': id,
         'created_at': createdAt.toIso8601String(),
         'updated_at': updatedAt.toIso8601String(),
-        'deleted_at': deletedAt,
+        'edited_at': editedAt?.toIso8601String(),
+        'deleted_at': deletedAt?.toIso8601String(),
         'body': body,
         'tags': tags,
         'categories': categories,

lib/screens/posts/post_editor.dart

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_animate/flutter_animate.dart';
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:get/get.dart';
+import 'package:solian/controllers/post_editor_controller.dart';
 import 'package:solian/exts.dart';
 import 'package:solian/models/post.dart';
 import 'package:solian/models/realm.dart';
@@ -10,10 +11,7 @@ import 'package:solian/router.dart';
 import 'package:solian/theme.dart';
 import 'package:solian/widgets/app_bar_leading.dart';
 import 'package:solian/widgets/app_bar_title.dart';
-import 'package:solian/widgets/attachments/attachment_publish.dart';
 import 'package:solian/widgets/posts/post_item.dart';
-import 'package:solian/widgets/feed/feed_tags_field.dart';
-import 'package:textfield_tags/textfield_tags.dart';
 import 'package:badges/badges.dart' as badges;
 
 class PostPublishArguments {
@@ -44,54 +42,30 @@ class PostPublishScreen extends StatefulWidget {
 }
 
 class _PostPublishScreenState extends State<PostPublishScreen> {
-  final _contentController = TextEditingController();
+  final _editorController = PostEditorController();
-  final _tagsController = StringTagController();
 
   bool _isBusy = false;
 
-  List<int> _attachments = List.empty();
+  void _applyPost() async {
-
-  bool _isDraft = false;
-
-  void showAttachments() {
-    showModalBottomSheet(
-      context: context,
-      isScrollControlled: true,
-      builder: (context) => AttachmentPublishPopup(
-        usage: 'i.attachment',
-        current: _attachments,
-        onUpdate: (value) {
-          setState(() => _attachments = value);
-        },
-      ),
-    );
-  }
-
-  void applyPost() async {
     final AuthProvider auth = Get.find();
     if (auth.isAuthorized.isFalse) return;
-    if (_contentController.value.text.isEmpty) return;
+    if (_editorController.isEmpty) return;
 
     setState(() => _isBusy = true);
 
     final client = auth.configureClient('interactive');
 
-    final payload = {
-      'content': _contentController.value.text,
-      'tags': _tagsController.getTags?.map((x) => {'alias': x}).toList() ??
-          List.empty(),
-      'attachments': _attachments,
-      'is_draft': _isDraft,
-      if (widget.reply != null) 'reply_to': widget.reply!.id,
-      if (widget.repost != null) 'repost_to': widget.repost!.id,
-      if (widget.realm != null) 'realm': widget.realm!.alias,
-    };
-
     Response resp;
     if (widget.edit != null) {
-      resp = await client.put('/stories/${widget.edit!.id}', payload);
+      resp = await client.put(
+        '/stories/${widget.edit!.id}',
+        _editorController.payload,
+      );
     } else {
-      resp = await client.post('/stories', payload);
+      resp = await client.post(
+        '/stories',
+        _editorController.payload,
+      );
     }
     if (resp.statusCode != 200) {
       context.showErrorDialog(resp.bodyString);
@@ -104,9 +78,7 @@ class _PostPublishScreenState extends State<PostPublishScreen> {
 
   void syncWidget() {
     if (widget.edit != null) {
-      _contentController.text = widget.edit!.body['content'];
+      _editorController.editTarget = widget.edit;
-      _attachments = widget.edit!.body['attachments']?.cast<int>() ?? List.empty();
-      _isDraft = widget.edit!.isDraft ?? false;
     }
   }
 
@@ -116,8 +88,8 @@ class _PostPublishScreenState extends State<PostPublishScreen> {
 
   @override
   void initState() {
-    syncWidget();
     super.initState();
+    syncWidget();
   }
 
   @override
@@ -139,24 +111,56 @@ class _PostPublishScreenState extends State<PostPublishScreen> {
           toolbarHeight: SolianTheme.toolbarHeight(context),
           actions: [
             TextButton(
-              onPressed: _isBusy ? null : () => applyPost(),
+              onPressed: _isBusy ? null : () => _applyPost(),
-              child: Text(
+              child: Obx(
-                _isDraft
+                () => Text(
+                  _editorController.isDraft.isTrue
                       ? 'draftSave'.tr.toUpperCase()
                       : 'postAction'.tr.toUpperCase(),
                 ),
+              ),
             )
           ],
         ),
-        body: Stack(
+        body: Column(
           children: [
-            ListView(
+            ListTile(
+              tileColor: Theme.of(context).colorScheme.surfaceContainerLow,
+              title: Text(
+                _editorController.title ?? 'title'.tr,
+                maxLines: 1,
+                overflow: TextOverflow.ellipsis,
+              ),
+              subtitle: Text(
+                _editorController.description ?? 'description'.tr,
+                maxLines: 2,
+                overflow: TextOverflow.ellipsis,
+              ),
+              contentPadding: const EdgeInsets.only(
+                left: 16,
+                right: 8,
+                top: 0,
+                bottom: 0,
+              ),
+              trailing: IconButton(
+                icon: const Icon(Icons.edit),
+                onPressed: () {
+                  _editorController.editOverview(context).then((_) {
+                    setState(() {});
+                  });
+                },
+              ),
+            ),
+            Expanded(
+              child: ListView(
                 children: [
-                if (_isBusy) const LinearProgressIndicator().animate().scaleX(),
+                  if (_isBusy)
+                    const LinearProgressIndicator().animate().scaleX(),
                   if (widget.edit != null && widget.edit!.isDraft != true)
                     MaterialBanner(
                       leading: const Icon(Icons.edit),
-                    leadingPadding: const EdgeInsets.only(left: 10, right: 20),
+                      leadingPadding:
+                          const EdgeInsets.only(left: 10, right: 20),
                       dividerColor: Colors.transparent,
                       content: Text('postEditingNotify'.tr),
                       actions: notifyBannerActions,
@@ -200,7 +204,8 @@ class _PostPublishScreenState extends State<PostPublishScreen> {
                   if (widget.realm != null)
                     MaterialBanner(
                       leading: const Icon(Icons.group),
-                    leadingPadding: const EdgeInsets.only(left: 10, right: 20),
+                      leadingPadding:
+                          const EdgeInsets.only(left: 10, right: 20),
                       dividerColor: Colors.transparent,
                       content: Text(
                         'postInRealmNotify'
@@ -208,8 +213,6 @@ class _PostPublishScreenState extends State<PostPublishScreen> {
                       ),
                       actions: notifyBannerActions,
                     ),
-                const Divider(thickness: 0.3, height: 0.3)
-                    .paddingOnly(bottom: 8),
                   Container(
                     padding:
                         const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
@@ -218,7 +221,7 @@ class _PostPublishScreenState extends State<PostPublishScreen> {
                       autofocus: true,
                       autocorrect: true,
                       keyboardType: TextInputType.multiline,
-                    controller: _contentController,
+                      controller: _editorController.contentController,
                       decoration: InputDecoration.collapsed(
                         hintText: 'postContentPlaceholder'.tr,
                       ),
@@ -229,54 +232,68 @@ class _PostPublishScreenState extends State<PostPublishScreen> {
                   const SizedBox(height: 120)
                 ],
               ),
-            Positioned(
+            ),
-              bottom: 0,
+            Material(
-              left: 0,
-              right: 0,
-              child: Material(
               elevation: 8,
               color: Theme.of(context).colorScheme.surface,
               child: Column(
                 crossAxisAlignment: CrossAxisAlignment.start,
                 children: [
-                    TagsField(
+                  if (_editorController.mode.value == 0)
-                      initialTags:
+                    Obx(
-                          widget.edit?.tags?.map((x) => x.alias).toList(),
+                      () => TweenAnimationBuilder<double>(
-                      tagsController: _tagsController,
+                        tween: Tween(
-                      hintText: 'postTagsPlaceholder'.tr,
+                          begin: 0,
+                          end: _editorController.contentLength.value / 4096,
+                        ),
+                        duration: const Duration(milliseconds: 300),
+                        curve: Curves.easeInOut,
+                        builder: (context, value, _) => LinearProgressIndicator(
+                          minHeight: 2,
+                          color: _editorController.contentLength.value > 4096
+                              ? Colors.red[900]
+                              : Theme.of(context).colorScheme.primary,
+                          value: value,
+                        ),
+                      ),
                     ),
-                    const Divider(thickness: 0.3, height: 0.3),
                   SizedBox(
                     height: 56,
                     child: ListView(
                       scrollDirection: Axis.horizontal,
                       children: [
-                          IconButton(
+                        Obx(
-                            icon: _isDraft
+                          () => IconButton(
+                            icon: _editorController.isDraft.value
                                 ? const Icon(Icons.drive_file_rename_outline)
                                 : const Icon(Icons.public),
-                            color: _isDraft
+                            color: _editorController.isDraft.value
                                 ? Colors.grey.shade600
                                 : Colors.green.shade700,
                             onPressed: () {
-                              setState(() => _isDraft = !_isDraft);
+                              _editorController.toggleDraftMode();
                             },
                           ),
+                        ),
                         IconButton(
-                            icon: badges.Badge(
+                          icon: Obx(
+                            () => badges.Badge(
                               badgeContent: Text(
-                                _attachments.length.toString(),
+                                _editorController.attachments.length.toString(),
                                 style: const TextStyle(color: Colors.white),
                               ),
-                              showBadge: _attachments.isNotEmpty,
+                              showBadge:
+                                  _editorController.attachments.isNotEmpty,
                               position: badges.BadgePosition.topEnd(
                                 top: -12,
                                 end: -8,
                               ),
                               child: const Icon(Icons.camera_alt),
                             ),
+                          ),
                           color: Theme.of(context).colorScheme.primary,
-                            onPressed: () => showAttachments(),
+                          onPressed: () =>
+                              _editorController.editAttachment(context),
                         ),
                       ],
                     ).paddingSymmetric(horizontal: 6, vertical: 8),
@@ -284,7 +301,6 @@ class _PostPublishScreenState extends State<PostPublishScreen> {
                 ],
               ).paddingOnly(bottom: MediaQuery.of(context).padding.bottom),
             ),
-            ),
           ],
         ),
       ),
@@ -293,8 +309,7 @@ class _PostPublishScreenState extends State<PostPublishScreen> {
 
   @override
   void dispose() {
-    _contentController.dispose();
+    _editorController.dispose();
-    _tagsController.dispose();
     super.dispose();
   }
 }

lib/translations/en_us.dart

@@ -40,6 +40,7 @@ const i18nEnglish = {
   'username': 'Username',
   'nickname': 'Nickname',
   'password': 'Password',
+  'title': 'Title',
   'description': 'Description',
   'birthday': 'Birthday',
   'firstName': 'First Name',
@@ -94,6 +95,7 @@ const i18nEnglish = {
   'totalDownvote': 'Downvote',
   'pinPost': 'Pin this post',
   'unpinPost': 'Unpin this post',
+  'postOverview': 'Overview',
   'postPinned': 'Pinned',
   'postListNews': 'News',
   'postListShuffle': 'Random',

lib/translations/zh_cn.dart

@@ -40,6 +40,7 @@ const i18nSimplifiedChinese = {
   'username': '用户名',
   'nickname': '显示名',
   'password': '密码',
+  'title': '标题',
   'description': '简介',
   'birthday': '生日',
   'firstName': '名称',
@@ -88,6 +89,7 @@ const i18nSimplifiedChinese = {
   'totalDownvote': '获踩数',
   'pinPost': '置顶本帖',
   'unpinPost': '取消置顶本帖',
+  'postOverview': '帖子概览',
   'postPinned': '已置顶',
   'postEditorModeStory': '发个帖子',
   'postEditorModeArticle': '撰写文章',

lib/widgets/markdown_text_content.dart

@@ -1,5 +1,5 @@
 import 'package:flutter/material.dart';
-import 'package:flutter_markdown/flutter_markdown.dart';
+import 'package:flutter_markdown_selectionarea/flutter_markdown.dart';
 import 'package:markdown/markdown.dart' as markdown;
 import 'package:url_launcher/url_launcher_string.dart';
 
@@ -13,8 +13,7 @@ class MarkdownTextContent extends StatelessWidget {
     this.isSelectable = false,
   });
 
-  @override
+  Widget _buildContent(BuildContext context) {
-  Widget build(BuildContext context) {
     return Markdown(
       shrinkWrap: true,
       physics: const NeverScrollableScrollPhysics(),
@@ -48,4 +47,12 @@ class MarkdownTextContent extends StatelessWidget {
       },
     );
   }
+
+  @override
+  Widget build(BuildContext context) {
+    if (isSelectable) {
+      return SelectionArea(child: _buildContent(context));
+    }
+    return _buildContent(context);
+  }
 }

lib/widgets/posts/editor/post_editor_overview.dart

@@ -0,0 +1,51 @@
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+import 'package:solian/controllers/post_editor_controller.dart';
+
+class PostEditorOverviewDialog extends StatelessWidget {
+  final PostEditorController controller;
+
+  const PostEditorOverviewDialog({super.key, required this.controller});
+
+  @override
+  Widget build(BuildContext context) {
+    return AlertDialog(
+      title: Text('postOverview'.tr),
+      content: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          TextField(
+            autofocus: true,
+            autocorrect: true,
+            controller: controller.titleController,
+            decoration: InputDecoration(
+              border: const UnderlineInputBorder(),
+              hintText: 'title'.tr,
+            ),
+            onTapOutside: (_) => FocusManager.instance.primaryFocus?.unfocus(),
+          ),
+          const SizedBox(height: 16),
+          TextField(
+            enabled: controller.mode.value == 1,
+            maxLines: null,
+            autofocus: true,
+            autocorrect: true,
+            keyboardType: TextInputType.multiline,
+            controller: controller.descriptionController,
+            decoration: InputDecoration(
+              border: const UnderlineInputBorder(),
+              hintText: 'description'.tr,
+            ),
+            onTapOutside: (_) => FocusManager.instance.primaryFocus?.unfocus(),
+          ),
+        ],
+      ),
+      actions: [
+        TextButton(
+          onPressed: () => Navigator.pop(context),
+          child: Text('confirm'.tr),
+        ),
+      ],
+    );
+  }
+}

lib/widgets/posts/post_item.dart

@@ -55,7 +55,7 @@ class _PostItemState extends State<PostItem> {
 
   Widget _buildDate() {
     if (widget.isFullDate) {
-      return Text(DateFormat('y/M/d H:m')
+      return Text(DateFormat('y/M/d HH:mm')
           .format(item.publishedAt?.toLocal() ?? DateTime.now()));
     } else {
       return Text(
@@ -75,20 +75,49 @@ class _PostItemState extends State<PostItem> {
             content: item.author.avatar.toString(),
             radius: 10,
           ).paddingOnly(left: 2),
+        Expanded(
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Row(
+                children: [
                   Text(
                     item.author.nick,
                     style: const TextStyle(fontWeight: FontWeight.bold),
-        ).paddingOnly(left: widget.isCompact ? 6 : 12),
+                  ),
                   _buildDate().paddingOnly(left: 4),
                 ],
+              ),
+              if (item.body['title'] != null)
+                Text(
+                  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,
+                ),
+              if (item.body['description'] != null ||
+                  item.body['title'] != null)
+                const Divider(thickness: 0.3, height: 1).paddingSymmetric(
+                  vertical: 8,
+                ),
+            ],
+          ).paddingOnly(left: widget.isCompact ? 6 : 12),
+        ),
+      ],
     );
   }
 
   Widget _buildFooter() {
     List<String> labels = List.empty(growable: true);
-    if (widget.item.createdAt != widget.item.updatedAt) {
+    if (widget.item.editedAt != null) {
       labels.add('postEdited'.trParams({
-        'date': DateFormat('yy/M/d H:m').format(item.updatedAt.toLocal()),
+        'date': DateFormat('yy/M/d HH:mm').format(item.editedAt!.toLocal()),
       }));
     }
     if (widget.item.realm != null) {

pubspec.lock

@@ -550,6 +550,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "0.7.3"
+  flutter_markdown_selectionarea:
+    dependency: "direct main"
+    description:
+      name: flutter_markdown_selectionarea
+      sha256: d4bc27e70a5c40ebdab23a4b81f75d53696a214d4d1f13c12045b38a0ddc58a2
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.6.17+1"
   flutter_plugin_android_lifecycle:
     dependency: transitive
     description:

pubspec.yaml

@@ -58,6 +58,7 @@ dependencies:
   dismissible_page: ^1.0.2
   share_plus: ^10.0.0
   flutter_cache_manager: ^3.3.3
+  flutter_markdown_selectionarea: ^0.6.17+1
 
 dev_dependencies:
   flutter_test: