✨ Better reaction panel

assets/translations/en.json

@@ -104,10 +104,20 @@
   "postRepostingNotice": "You're about to repost a post that posted {}.",
   "postReact": "React",
   "postReactions": "Reactions of Post",
-  "postReactionPoints": {
-    "zero": "{} pt",
-    "one": "{} pt",
-    "other": "{} pts"
+  "postReactionUpvote": {
+    "zero": "0 upvote",
+    "one": "{} upvote",
+    "other": "{} upvotes"
+  },
+  "postReactionDownvote": {
+    "zero": "0 downvote",
+    "one": "{} downvote",
+    "other": "{} downvotes"
+  },
+  "postReactionSocialPoint": {
+    "zero": "0 point",
+    "one": "{} point",
+    "other": "{} points"
   },
   "postReactCompleted": "Reaction has been added.",
   "postReactUncompleted": "Reaction has been removed.",

assets/translations/zh.json

@@ -104,10 +104,20 @@
   "postReact": "反应",
   "postPosted": "帖子已经发表。",
   "postReactions": "帖子的反应",
-  "postReactionPoints": {
-    "zero": "{} 点",
-    "one": "{} 点",
-    "other": "{} 点"
+  "postReactionUpvote": {
+    "zero": "0 个顶",
+    "one": "{} 个顶",
+    "other": "{} 个顶"
+  },
+  "postReactionDownvote": {
+    "zero": "0 个踩",
+    "one": "{} 个踩",
+    "other": "{} 个踩"
+  },
+  "postReactionSocialPoint": {
+    "zero": "无社会信用点变更",
+    "one": "{} 点社会信用点变更",
+    "other": "{} 点社会信用点变更"
   },
   "postReactCompleted": "反应已被添加。",
   "postReactUncompleted": "反应已被移除。",

lib/router.dart

@@ -48,7 +48,8 @@ final _appRoutes = [
           GoRoute(
             path: '/post/write/:mode',
             name: 'postEditor',
-            pageBuilder: (context, state) => CustomTransitionPage(
+            builder: (context, state) => AppBackground(
+              isLessOptimization: true,
               child: PostEditorScreen(
                 mode: state.pathParameters['mode']!,
                 postEditId: int.tryParse(
@@ -61,34 +62,17 @@ final _appRoutes = [
                   state.uri.queryParameters['reposting'] ?? '',
                 ),
               ),
-              transitionsBuilder:
-                  (context, animation, secondaryAnimation, child) {
-                return FadeThroughTransition(
-                  animation: animation,
-                  secondaryAnimation: secondaryAnimation,
-                  fillColor: Colors.transparent,
-                  child: AppBackground(isLessOptimization: true, child: child),
-                );
-              },
             ),
           ),
           GoRoute(
             path: '/post/:slug',
             name: 'postDetail',
-            pageBuilder: (context, state) => CustomTransitionPage(
+            builder: (context, state) => AppBackground(
+              isLessOptimization: true,
               child: PostDetailScreen(
                 slug: state.pathParameters['slug']!,
                 preload: state.extra as SnPost?,
               ),
-              transitionsBuilder:
-                  (context, animation, secondaryAnimation, child) {
-                return FadeThroughTransition(
-                  animation: animation,
-                  secondaryAnimation: secondaryAnimation,
-                  fillColor: Colors.transparent,
-                  child: AppBackground(isLessOptimization: true, child: child),
-                );
-              },
             ),
           ),
         ],

lib/screens/chat/manage.dart

@@ -130,7 +130,7 @@ class _ChatManageScreenState extends State<ChatManageScreen> {
             LoadingIndicator(isActive: _isBusy),
             if (_editingChannel != null)
               MaterialBanner(
-                leading: const Icon(Icons.edit),
+                leading: const Icon(Symbols.edit),
                 leadingPadding: const EdgeInsets.only(left: 10, right: 20),
                 dividerColor: Colors.transparent,
                 content: Text(

lib/screens/explore.dart

@@ -173,7 +173,13 @@ class _ExploreScreenState extends State<ExploreScreen> {
               onFetchData: _fetchPosts,
               itemBuilder: (context, idx) {
                 return GestureDetector(
-                  child: PostItem(data: _posts[idx], maxWidth: 640),
+                  child: PostItem(
+                    data: _posts[idx],
+                    maxWidth: 640,
+                    onChanged: (data) {
+                      setState(() => _posts[idx] = data);
+                    },
+                  ),
                   onTap: () {
                     GoRouter.of(context).pushNamed(
                       'postDetail',

lib/screens/notification.dart

@@ -135,7 +135,7 @@ class _NotificationScreenState extends State<NotificationScreen> {
         title: Text('screenNotification').tr(),
         actions: [
           IconButton(
-            icon: const Icon(Icons.checklist),
+            icon: const Icon(Symbols.checklist),
             onPressed: _isSubmitting ? null : _markAllAsRead,
           ),
         ],

lib/screens/post/post_detail.dart

@@ -113,6 +113,9 @@ class _PostDetailScreenState extends State<PostDetailScreen> {
                 data: _data!,
                 maxWidth: 640,
                 showComments: false,
+                onChanged: (data) {
+                  setState(() => _data = data);
+                },
               ),
             ),
           const SliverToBoxAdapter(child: Divider(height: 1)),
@@ -144,7 +147,6 @@ class _PostDetailScreenState extends State<PostDetailScreen> {
                 child: PostMiniEditor(
                   postReplyId: _data!.id,
                   onPost: () {
-                    _childListKey.currentState!.refresh();
                     setState(() {
                       _data = _data!.copyWith(
                         metric: _data!.metric.copyWith(
@@ -152,6 +154,7 @@ class _PostDetailScreenState extends State<PostDetailScreen> {
                         ),
                       );
                     });
+                    _childListKey.currentState!.refresh();
                   },
                 ),
               ),

lib/screens/post/post_editor.dart

@@ -292,7 +292,8 @@ class _PostEditorScreenState extends State<PostEditorScreen> {
                                 ]),
                                 children: <Widget>[
                                   PostItem(
-                                      data: _writeController.repostingPost!)
+                                    data: _writeController.repostingPost!,
+                                  )
                                 ],
                               ),
                             ),
@@ -354,7 +355,25 @@ class _PostEditorScreenState extends State<PostEditorScreen> {
               ),
               if (_writeController.attachments.isNotEmpty)
                 PostMediaPendingList(
-                  controller: _writeController,
+                  attachments: _writeController.attachments,
+                  isBusy: _writeController.isBusy,
+                  onUpdate: (int idx, PostWriteMedia updatedMedia) async {
+                    _writeController.setIsBusy(true);
+                    try {
+                      _writeController.setAttachmentAt(idx, updatedMedia);
+                    } finally {
+                      _writeController.setIsBusy(false);
+                    }
+                  },
+                  onRemove: (int idx) async {
+                    _writeController.setIsBusy(true);
+                    try {
+                      _writeController.removeAttachmentAt(idx);
+                    } finally {
+                      _writeController.setIsBusy(false);
+                    }
+                  },
+                  onUpdateBusy: (state) => _writeController.setIsBusy(state),
                 ).padding(bottom: 8),
               Material(
                 elevation: 2,

lib/screens/realm.dart

@@ -81,8 +81,8 @@ class _RealmScreenState extends State<RealmScreen> {
         actions: [
           IconButton(
             icon: !_isCompactView
-                ? const Icon(Icons.view_list)
-                : const Icon(Icons.view_module),
+                ? const Icon(Symbols.view_list)
+                : const Icon(Symbols.view_module),
             onPressed: () {
               setState(() => _isCompactView = !_isCompactView);
             },

lib/screens/realm/manage.dart

@@ -191,7 +191,7 @@ class _RealmManageScreenState extends State<RealmManageScreen> {
             LoadingIndicator(isActive: _isBusy),
             if (_editingRealm != null)
               MaterialBanner(
-                leading: const Icon(Icons.edit),
+                leading: const Icon(Symbols.edit),
                 leadingPadding: const EdgeInsets.only(left: 10, right: 20),
                 dividerColor: Colors.transparent,
                 content: Text(

lib/widgets/attachment/attachment_item.dart

@@ -232,7 +232,7 @@ class _AttachmentItemContentVideoState
               )
             else
               const Center(
-                child: Icon(Icons.movie, size: 64),
+                child: Icon(Symbols.movie, size: 64),
               ),
             Align(
               alignment: Alignment.bottomCenter,
@@ -397,7 +397,7 @@ class _AttachmentItemContentAudioState
               )
             else
               const Center(
-                child: Icon(Icons.radio, size: 64),
+                child: Icon(Symbols.radio, size: 64),
               ),
             Align(
               alignment: Alignment.bottomCenter,
@@ -485,7 +485,7 @@ class _AttachmentItemContentAudioState
           child: Column(
             mainAxisAlignment: MainAxisAlignment.center,
             children: [
-              const Icon(Icons.audio_file, size: 32),
+              const Icon(Symbols.audio_file, size: 32),
               const Gap(8),
               Text(
                 widget.data.alt,
@@ -554,8 +554,8 @@ class _AttachmentItemContentAudioState
                   const Gap(16),
                   IconButton.filled(
                     icon: _isPlaying
-                        ? const Icon(Icons.pause)
-                        : const Icon(Icons.play_arrow),
+                        ? const Icon(Symbols.pause)
+                        : const Icon(Symbols.play_arrow),
                     onPressed: () {
                       _audioPlayer!.playOrPause();
                     },

lib/widgets/chat/chat_message_input.dart

@@ -175,7 +175,7 @@ class ChatMessageInputState extends State<ChatMessageInput> {
           padding: _attachments.isNotEmpty
               ? const EdgeInsets.only(top: 8)
               : EdgeInsets.zero,
-          child: PostMediaPendingListRaw(
+          child: PostMediaPendingList(
             attachments: _attachments,
             isBusy: _isBusy,
             onUpdate: (idx, updatedMedia) async {

lib/widgets/post/post_comment_list.dart

@@ -98,6 +98,9 @@ class PostCommentSliverListState extends State<PostCommentSliverList> {
           child: PostItem(
             data: _posts[idx],
             maxWidth: widget.maxWidth,
+            onChanged: (data) {
+              setState(() => _posts[idx] = data);
+            },
           ),
           onTap: () {
             GoRouter.of(context).pushNamed(

lib/widgets/post/post_item.dart

@@ -106,9 +106,14 @@ class _PostBottomAction extends StatelessWidget {
                   children: [
                     Icon(Symbols.add_reaction, size: 20, color: iconColor),
                     const Gap(8),
-                    if (data.totalDownvote > 0 || data.totalUpvote > 0)
-                      Text('postReactionPoints').plural(
-                        data.totalUpvote - data.totalDownvote,
+                    if (data.totalUpvote > 0 &&
+                        data.totalUpvote >= data.totalDownvote)
+                      Text('postReactionUpvote').plural(
+                        data.totalUpvote,
+                      )
+                    else if (data.totalDownvote > 0)
+                      Text('postReactionDownvote').plural(
+                        data.totalDownvote,
                       )
                     else
                       Text('postReact').tr(),
@@ -119,12 +124,12 @@ class _PostBottomAction extends StatelessWidget {
                     context: context,
                     builder: (context) => PostReactionPopup(
                       data: data,
-                      onChanged: (value, isPositive, delta) {
+                      onChanged: (value, attr, delta) {
                         onChanged(data.copyWith(
-                          totalUpvote: isPositive
+                          totalUpvote: attr == 1
                               ? data.totalUpvote + delta
                               : data.totalUpvote,
-                          totalDownvote: !isPositive
+                          totalDownvote: attr == 2
                               ? data.totalDownvote + delta
                               : data.totalDownvote,
                           metric: data.metric.copyWith(reactionList: value),

lib/widgets/post/post_media_pending_list.dart

@@ -17,53 +17,13 @@ import 'package:surface/widgets/attachment/attachment_detail.dart';
 import 'package:surface/widgets/dialog.dart';
 
 class PostMediaPendingList extends StatelessWidget {
-  final PostWriteController controller;
-
-  const PostMediaPendingList({super.key, required this.controller});
-
-  Future<void> _handleUpdate(int idx, PostWriteMedia updatedMedia) async {
-    controller.setIsBusy(true);
-    try {
-      controller.setAttachmentAt(idx, updatedMedia);
-    } finally {
-      controller.setIsBusy(false);
-    }
-  }
-
-  Future<void> _handleRemove(int idx) async {
-    controller.setIsBusy(true);
-    try {
-      controller.removeAttachmentAt(idx);
-    } finally {
-      controller.setIsBusy(false);
-    }
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    return ListenableBuilder(
-      listenable: controller,
-      builder: (context, _) {
-        return PostMediaPendingListRaw(
-          attachments: controller.attachments,
-          isBusy: controller.isBusy,
-          onUpdate: (idx, updatedMedia) => _handleUpdate(idx, updatedMedia),
-          onRemove: (idx) => _handleRemove(idx),
-          onUpdateBusy: (state) => controller.setIsBusy(state),
-        );
-      },
-    );
-  }
-}
-
-class PostMediaPendingListRaw extends StatelessWidget {
   final List<PostWriteMedia> attachments;
   final bool isBusy;
   final Future<void> Function(int idx, PostWriteMedia updatedMedia)? onUpdate;
   final Future<void> Function(int idx)? onRemove;
   final void Function(bool state)? onUpdateBusy;
 
-  const PostMediaPendingListRaw({
+  const PostMediaPendingList({
     super.key,
     required this.attachments,
     required this.isBusy,
@@ -122,6 +82,53 @@ class PostMediaPendingListRaw extends StatelessWidget {
     }
   }
 
+  ContextMenu _buildContextMenu(
+      BuildContext context, int idx, PostWriteMedia media) {
+    return ContextMenu(
+      entries: [
+        if (media.type == PostWriteMediaType.image && media.attachment != null)
+          MenuItem(
+            label: 'preview'.tr(),
+            icon: Symbols.preview,
+            onSelected: () {
+              context.pushTransparentRoute(
+                AttachmentDetailPopup(data: media.attachment!),
+                rootNavigator: true,
+              );
+            },
+          ),
+        if (media.type == PostWriteMediaType.image && media.attachment == null)
+          MenuItem(
+            label: 'crop'.tr(),
+            icon: Symbols.crop,
+            onSelected: () => _cropImage(context, idx),
+          ),
+        if (media.attachment != null && onRemove != null)
+          MenuItem(
+            label: 'delete'.tr(),
+            icon: Symbols.delete,
+            onSelected: isBusy ? null : () => _deleteAttachment(context, idx),
+          ),
+        if (media.attachment == null && onRemove != null)
+          MenuItem(
+            label: 'delete'.tr(),
+            icon: Symbols.delete,
+            onSelected: () {
+              onRemove!(idx);
+            },
+          )
+        else if (onRemove != null)
+          MenuItem(
+            label: 'unlink'.tr(),
+            icon: Symbols.link_off,
+            onSelected: () {
+              onRemove!(idx);
+            },
+          ),
+      ],
+    );
+  }
+
   @override
   Widget build(BuildContext context) {
     final devicePixelRatio = MediaQuery.of(context).devicePixelRatio;
@@ -136,52 +143,7 @@ class PostMediaPendingListRaw extends StatelessWidget {
         itemBuilder: (context, idx) {
           final media = attachments[idx];
           return ContextMenuRegion(
-            contextMenu: ContextMenu(
-              entries: [
-                if (media.type == PostWriteMediaType.image &&
-                    media.attachment != null)
-                  MenuItem(
-                    label: 'preview'.tr(),
-                    icon: Symbols.preview,
-                    onSelected: () {
-                      context.pushTransparentRoute(
-                        AttachmentDetailPopup(data: media.attachment!),
-                        rootNavigator: true,
-                      );
-                    },
-                  ),
-                if (media.type == PostWriteMediaType.image &&
-                    media.attachment == null)
-                  MenuItem(
-                    label: 'crop'.tr(),
-                    icon: Symbols.crop,
-                    onSelected: () => _cropImage(context, idx),
-                  ),
-                if (media.attachment != null && onRemove != null)
-                  MenuItem(
-                    label: 'delete'.tr(),
-                    icon: Symbols.delete,
-                    onSelected:
-                        isBusy ? null : () => _deleteAttachment(context, idx),
-                  ),
-                if (media.attachment == null && onRemove != null)
-                  MenuItem(
-                    label: 'delete'.tr(),
-                    icon: Symbols.delete,
-                    onSelected: () {
-                      onRemove!(idx);
-                    },
-                  )
-                else if (onRemove != null)
-                  MenuItem(
-                    label: 'unlink'.tr(),
-                    icon: Symbols.link_off,
-                    onSelected: () {
-                      onRemove!(idx);
-                    },
-                  ),
-              ],
-            ),
+            contextMenu: _buildContextMenu(context, idx, media),
             child: Container(
               decoration: BoxDecoration(
                 border: Border.all(

lib/widgets/post/post_reaction.dart

@@ -11,7 +11,7 @@ import 'package:surface/widgets/dialog.dart';
 
 class PostReactionPopup extends StatefulWidget {
   final SnPost data;
-  final Function(Map<String, int> value, bool isPositive, int delta)? onChanged;
+  final Function(Map<String, int> value, int attr, int delta)? onChanged;
   const PostReactionPopup({super.key, required this.data, this.onChanged});
 
   @override
@@ -43,7 +43,7 @@ class _PostReactionPopupState extends State<PostReactionPopup> {
         if (widget.onChanged != null) {
           widget.onChanged!(
             _reactions,
-            kTemplateReactions[symbol]!.attitude == 1,
+            kTemplateReactions[symbol]!.attitude,
             1,
           );
         }
@@ -54,7 +54,7 @@ class _PostReactionPopupState extends State<PostReactionPopup> {
         if (widget.onChanged != null) {
           widget.onChanged!(
             _reactions,
-            kTemplateReactions[symbol]!.attitude == 1,
+            kTemplateReactions[symbol]!.attitude,
             -1,
           );
         }
@@ -89,11 +89,36 @@ class _PostReactionPopupState extends State<PostReactionPopup> {
                   .textStyle(Theme.of(context).textTheme.titleLarge!),
             ],
           ).padding(horizontal: 20, top: 16, bottom: 12),
+          Container(
+            color: Theme.of(context).colorScheme.surfaceContainer,
+            child: Row(
+              children: [
+                const Icon(Symbols.thumb_up, size: 16),
+                const Gap(8),
+                Text('postReactionUpvote').plural(widget.data.totalUpvote),
+                const Gap(24),
+                const Icon(Symbols.thumb_down, size: 16),
+                const Gap(8),
+                Text('postReactionDownvote').plural(widget.data.totalDownvote),
+                const Gap(24),
+                Icon(
+                  widget.data.totalUpvote >= widget.data.totalDownvote
+                      ? Symbols.trending_up
+                      : Symbols.trending_down,
+                  size: 16,
+                ),
+                const Gap(8),
+                Text('postReactionSocialPoint').plural(
+                  widget.data.totalUpvote - widget.data.totalDownvote,
+                ),
+              ],
+            ).padding(vertical: 8, horizontal: 24),
+          ),
           Expanded(
-            child: GridView.count(
+            child: GridView.extent(
               crossAxisSpacing: 4,
               mainAxisSpacing: 4,
-              crossAxisCount: 4,
+              maxCrossAxisExtent: 120,
               children: kTemplateReactions.entries.map((e) {
                 return InkWell(
                   onTap: () {