✨ 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": {
+  "postReactionUpvote": {
-    "zero": "{} pt",
+    "zero": "0 upvote",
-    "one": "{} pt",
+    "one": "{} upvote",
-    "other": "{} pts"
+    "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": {
+  "postReactionUpvote": {
-    "zero": "{} 点",
+    "zero": "0 个顶",
-    "one": "{} 点",
+    "one": "{} 个顶",
-    "other": "{} 点"
+    "other": "{} 个顶"
+  },
+  "postReactionDownvote": {
+    "zero": "0 个踩",
+    "one": "{} 个踩",
+    "other": "{} 个踩"
+  },
+  "postReactionSocialPoint": {
+    "zero": "无社会信用点变更",
+    "one": "{} 点社会信用点变更",
+    "other": "{} 点社会信用点变更"
   },
   "postReactCompleted": "反应已被添加。",
   "postReactUncompleted": "反应已被移除。",

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!,
+                                  )
                                 ],
                               ),
                             ),

lib/screens/realm.dart

@@ -81,8 +81,8 @@ class _RealmScreenState extends State<RealmScreen> {
         actions: [
           IconButton(
             icon: !_isCompactView
-                ? const Icon(Icons.view_list)
+                ? const Icon(Symbols.view_list)
-                : const Icon(Icons.view_module),
+                : 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(Symbols.pause)
-                        : const Icon(Icons.play_arrow),
+                        : const Icon(Symbols.play_arrow),
                     onPressed: () {
                       _audioPlayer!.playOrPause();
                     },

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)
+                    if (data.totalUpvote > 0 &&
-                      Text('postReactionPoints').plural(
+                        data.totalUpvote >= data.totalDownvote)
-                        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_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: () {