⚡ Optimized chat messages

lib/controllers/chat_events_controller.dart

@@ -2,7 +2,7 @@ import 'package:get/get.dart';
 import 'package:solian/models/channel.dart';
 import 'package:solian/models/event.dart';
 import 'package:solian/platform.dart';
-import 'package:solian/providers/message/helper.dart';
+import 'package:solian/providers/message/adaptor.dart';
 import 'package:solian/providers/message/events.dart';
 
 class ChatEventController {
@@ -57,11 +57,13 @@ class ChatEventController {
       totalEvents.value = result?.$2 ?? 0;
       if (result != null) {
         for (final x in result.$1.reversed) {
-          applyEvent(LocalEvent(x.id, x, x.channelId, x.createdAt));
+          final entry = LocalEvent(x.id, x, x.channelId, x.createdAt);
+          insertEvent(entry);
+          applyEvent(entry);
         }
       }
     } else {
-      final result = await database.syncEvents(
+      final result = await database.syncRemoteEvents(
         channel,
         scope: scope,
       );
@@ -80,14 +82,16 @@ class ChatEventController {
         remainDepth: 3,
         offset: currentEvents.length,
       );
-      totalEvents.value = result?.$2 ?? 0;
       if (result != null) {
+        totalEvents.value = result.$2;
         for (final x in result.$1.reversed) {
-          applyEvent(LocalEvent(x.id, x, x.channelId, x.createdAt));
+          final entry = LocalEvent(x.id, x, x.channelId, x.createdAt);
+          currentEvents.add(entry);
+          applyEvent(entry);
         }
       }
     } else {
-      final result = await database.syncEvents(
+      final result = await database.syncRemoteEvents(
         channel,
         depth: 3,
         scope: scope,
@@ -102,6 +106,7 @@ class ChatEventController {
   Future<bool> syncLocal(Channel channel) async {
     if (PlatformInfo.isWeb) return false;
     final data = await database.localEvents.findAllByChannel(channel.id);
+    currentEvents.replaceRange(0, currentEvents.length, data);
     for (final x in data.reversed) {
       applyEvent(x);
     }
@@ -121,18 +126,21 @@ class ChatEventController {
       entry = await database.receiveEvent(remote);
     }
 
+    insertEvent(entry);
     applyEvent(entry);
   }
 
-  applyEvent(LocalEvent entry) {
+  insertEvent(LocalEvent entry) {
-    if (entry.channelId != channel?.id) return;
-
     final idx = currentEvents.indexWhere((x) => x.data.uuid == entry.data.uuid);
     if (idx != -1) {
       currentEvents[idx] = entry;
     } else {
       currentEvents.insert(0, entry);
     }
+  }
+
+  applyEvent(LocalEvent entry) {
+    if (entry.channelId != channel?.id) return;
 
     switch (entry.data.type) {
       case 'messages.edit':

lib/main.dart

@@ -33,32 +33,39 @@ void main() async {
     appRunner: () async {
       WidgetsFlutterBinding.ensureInitialized();
 
-      if (!PlatformInfo.isWeb) {
+      _initializeFirebase();
-        await protocolHandler.register('solink');
+      _initializePlatformComponents();
-      }
-
-      await Firebase.initializeApp(
-        options: DefaultFirebaseOptions.currentPlatform,
-      );
-
-      if (PlatformInfo.isDesktop) {
-        await Window.initialize();
-
-        if (PlatformInfo.isMacOS) {
-          await Window.hideTitle();
-          await Window.hideCloseButton();
-          await Window.hideMiniaturizeButton();
-          await Window.hideZoomButton();
-          await Window.makeTitlebarTransparent();
-          await Window.enableFullSizeContentView();
-        }
-      }
 
       runApp(const SolianApp());
     },
   );
 }
 
+Future<void> _initializeFirebase() async {
+  await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);
+}
+
+Future<void> _initializePlatformComponents() async {
+  if (!PlatformInfo.isWeb) {
+    await protocolHandler.register('solink');
+  }
+
+  if (PlatformInfo.isDesktop) {
+    await Window.initialize();
+
+    if (PlatformInfo.isMacOS) {
+      await Future.wait([
+        Window.hideTitle(),
+        Window.hideCloseButton(),
+        Window.hideMiniaturizeButton(),
+        Window.hideZoomButton(),
+        Window.makeTitlebarTransparent(),
+        Window.enableFullSizeContentView(),
+      ]);
+    }
+  }
+}
+
 class SolianApp extends StatelessWidget {
   const SolianApp({super.key});
 
@@ -75,33 +82,7 @@ class SolianApp extends StatelessWidget {
       translations: SolianMessages(),
       locale: Get.deviceLocale,
       fallbackLocale: const Locale('en', 'US'),
-      onInit: () {
+      onInit: () => _initializeProviders(context),
-        Get.lazyPut(() => AuthProvider());
-        Get.lazyPut(() => FriendProvider());
-        Get.lazyPut(() => PostProvider());
-        Get.lazyPut(() => AttachmentProvider());
-        Get.lazyPut(() => ChatProvider());
-        Get.lazyPut(() => AccountProvider());
-        Get.lazyPut(() => StatusProvider());
-        Get.lazyPut(() => ChannelProvider());
-        Get.lazyPut(() => RealmProvider());
-        Get.lazyPut(() => ChatCallProvider());
-
-        final AuthProvider auth = Get.find();
-        auth.isAuthorized.then((value) async {
-          if (value) {
-            Get.find<AccountProvider>().connect();
-            Get.find<ChatProvider>().connect();
-
-            try {
-              Get.find<AccountProvider>().registerPushNotifications();
-            } catch (err) {
-              context.showSnackbar('pushNotifyRegisterFailed'
-                  .trParams({'reason': err.toString()}));
-            }
-          }
-        });
-      },
       builder: (context, child) {
         return ListenerShell(
           child: ScaffoldMessenger(
@@ -111,4 +92,33 @@ class SolianApp extends StatelessWidget {
       },
     );
   }
+
+  void _initializeProviders(BuildContext context) {
+    Get.lazyPut(() => AuthProvider());
+    Get.lazyPut(() => FriendProvider());
+    Get.lazyPut(() => PostProvider());
+    Get.lazyPut(() => AttachmentProvider());
+    Get.lazyPut(() => ChatProvider());
+    Get.lazyPut(() => AccountProvider());
+    Get.lazyPut(() => StatusProvider());
+    Get.lazyPut(() => ChannelProvider());
+    Get.lazyPut(() => RealmProvider());
+    Get.lazyPut(() => ChatCallProvider());
+
+    final AuthProvider auth = Get.find();
+    auth.isAuthorized.then((value) async {
+      if (value) {
+        Get.find<AccountProvider>().connect();
+        Get.find<ChatProvider>().connect();
+
+        try {
+          Get.find<AccountProvider>().registerPushNotifications();
+        } catch (err) {
+          context.showSnackbar(
+            'pushNotifyRegisterFailed'.trParams({'reason': err.toString()}),
+          );
+        }
+      }
+    });
+  }
 }

lib/providers/message/adaptor.dart

@@ -81,7 +81,7 @@ Future<(List<Event>, int)?> getRemoteEvents(
   return ([...result, ...expandResult], response.count);
 }
 
-extension MessageHistoryHelper on MessageHistoryDb {
+extension MessageHistoryAdaptor on MessageHistoryDb {
   Future<LocalEvent> receiveEvent(Event remote) async {
     final entry = LocalEvent(
       remote.id,
@@ -121,7 +121,7 @@ extension MessageHistoryHelper on MessageHistoryDb {
     return await receiveEvent(remoteRecord);
   }
 
-  Future<(List<Event>, int)?> syncEvents(Channel channel,
+  Future<(List<Event>, int)?> syncRemoteEvents(Channel channel,
       {String scope = 'global', depth = 10, offset = 0}) async {
     final lastOne = await localEvents.findLastByChannel(channel.id);
 
@@ -145,7 +145,7 @@ extension MessageHistoryHelper on MessageHistoryDb {
     return data;
   }
 
-  Future<List<LocalEvent>> listMessages(Channel channel) async {
+  Future<List<LocalEvent>> listEvents(Channel channel) async {
     return await localEvents.findAllByChannel(channel.id);
   }
 }

lib/screens/account/friend.dart

@@ -186,13 +186,14 @@ class _FriendScreenState extends State<FriendScreen> {
                       showScopedListPopup('accountFriendBlocked'.tr, 2),
                 ),
               ),
-              SliverFriendList(
+              if (_accountId != null)
-                accountId: _accountId!,
+                SliverFriendList(
-                items: filterWithStatus(1),
+                  accountId: _accountId!,
-                onUpdate: () {
+                  items: filterWithStatus(1),
-                  getFriendship();
+                  onUpdate: () {
-                },
+                    getFriendship();
-              ),
+                  },
+                ),
               const SliverToBoxAdapter(
                 child: Divider(thickness: 0.3, height: 0.3),
               ),

lib/screens/auth/signup.dart

@@ -1,7 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'package:solian/exts.dart';
-import 'package:solian/router.dart';
 import 'package:solian/services.dart';
 
 class SignUpPopup extends StatefulWidget {

lib/screens/channel/channel_chat.dart

@@ -21,7 +21,7 @@ import 'package:solian/widgets/app_bar_title.dart';
 import 'package:solian/widgets/chat/call/call_prejoin.dart';
 import 'package:solian/widgets/chat/call/chat_call_action.dart';
 import 'package:solian/widgets/chat/chat_event.dart';
-import 'package:solian/widgets/chat/chat_event_action.dart';
+import 'package:solian/widgets/chat/chat_event_list.dart';
 import 'package:solian/widgets/chat/chat_message_input.dart';
 import 'package:solian/widgets/current_state_action.dart';
 
@@ -111,7 +111,7 @@ class _ChannelChatScreenState extends State<ChannelChatScreen> {
       switch (event.method) {
         case 'events.new':
           final payload = Event.fromJson(event.payload!);
-            _chatController.receiveEvent(payload);
+          _chatController.receiveEvent(payload);
           break;
         case 'calls.new':
           final payload = Call.fromJson(event.payload!);
@@ -124,12 +124,6 @@ class _ChannelChatScreenState extends State<ChannelChatScreen> {
     });
   }
 
-  bool checkMessageMergeable(Event? a, Event? b) {
-    if (a == null || b == null) return false;
-    if (a.sender.account.id != b.sender.account.id) return false;
-    return a.createdAt.difference(b.createdAt).inMinutes <= 3;
-  }
-
   void showCallPrejoin() {
     showModalBottomSheet(
       useRootNavigator: true,
@@ -153,50 +147,6 @@ class _ChannelChatScreenState extends State<ChannelChatScreen> {
     );
   }
 
-  Widget buildHistory(context, index) {
-    bool isMerged = false, hasMerged = false;
-    if (index > 0) {
-      hasMerged = checkMessageMergeable(
-        _chatController.currentEvents[index - 1].data,
-        _chatController.currentEvents[index].data,
-      );
-    }
-    if (index + 1 < _chatController.currentEvents.length) {
-      isMerged = checkMessageMergeable(
-        _chatController.currentEvents[index].data,
-        _chatController.currentEvents[index + 1].data,
-      );
-    }
-
-    final item = _chatController.currentEvents[index].data;
-
-    return InkWell(
-      child: Container(
-        child: buildHistoryBody(item, isMerged: isMerged).paddingOnly(
-          top: !isMerged ? 8 : 0,
-          bottom: !hasMerged ? 8 : 0,
-        ),
-      ),
-      onLongPress: () {
-        showModalBottomSheet(
-          useRootNavigator: true,
-          context: context,
-          builder: (context) => ChatEventAction(
-            channel: _channel!,
-            realm: _channel!.realm,
-            item: item,
-            onEdit: () {
-              setState(() => _messageToEditing = item);
-            },
-            onReply: () {
-              setState(() => _messageToReplying = item);
-            },
-          ),
-        );
-      },
-    );
-  }
-
   @override
   void initState() {
     _chatController = ChatEventController();
@@ -283,120 +233,81 @@ class _ChannelChatScreenState extends State<ChannelChatScreen> {
           ),
         ],
       ),
-      body: Stack(
+      body: Column(
         children: [
-          Column(
-            children: [
-              Expanded(
-                child: CustomScrollView(
-                  reverse: true,
-                  slivers: [
-                    Obx(() {
-                      return SliverList.builder(
-                        key: Key('chat-history#${_channel!.id}'),
-                        itemCount: _chatController.currentEvents.length,
-                        itemBuilder: buildHistory,
-                      );
-                    }),
-                    Obx(() {
-                      final amount = _chatController.totalEvents -
-                          _chatController.currentEvents.length;
-
-                      if (amount.value <= 0 ||
-                          _chatController.isLoading.isTrue) {
-                        return const SliverToBoxAdapter(child: SizedBox());
-                      }
-
-                      return SliverToBoxAdapter(
-                        child: ListTile(
-                          tileColor:
-                              Theme.of(context).colorScheme.surfaceContainerLow,
-                          leading: const Icon(Icons.sync_disabled),
-                          title: Text('messageUnsync'.tr),
-                          subtitle: Text('messageUnsyncCaption'.trParams({
-                            'count': amount.string,
-                          })),
-                          onTap: () {
-                            _chatController.loadEvents(
-                              _channel!,
-                              widget.realm,
-                            );
-                          },
-                        ),
-                      );
-                    }),
-                    Obx(() {
-                      if (_chatController.isLoading.isFalse) {
-                        return const SliverToBoxAdapter(child: SizedBox());
-                      }
-
-                      return SliverToBoxAdapter(
-                        child: const LinearProgressIndicator().animate().slideY(),
-                      );
-                    }),
-                  ],
-                ),
-              ),
-              ClipRect(
-                child: BackdropFilter(
-                  filter: ImageFilter.blur(sigmaX: 50, sigmaY: 50),
-                  child: SafeArea(
-                    child: ChatMessageInput(
-                      edit: _messageToEditing,
-                      reply: _messageToReplying,
-                      realm: widget.realm,
-                      placeholder: placeholder,
-                      channel: _channel!,
-                      onSent: (Event item) {
-                        setState(() {
-                          _chatController.addPendingEvent(item);
-                        });
-                      },
-                      onReset: () {
-                        setState(() {
-                          _messageToReplying = null;
-                          _messageToEditing = null;
-                        });
-                      },
-                    ),
-                  ),
-                ),
-              ),
-            ],
-          ),
           if (_ongoingCall != null)
-            Positioned(
+            MaterialBanner(
-              top: 0,
+              padding: const EdgeInsets.only(left: 16, top: 4, bottom: 4),
-              left: 0,
+              leading: const Icon(Icons.call_received),
-              right: 0,
+              backgroundColor: Theme.of(context).colorScheme.surfaceContainer,
-              child: MaterialBanner(
+              dividerColor: Colors.transparent,
-                padding: const EdgeInsets.only(left: 16, top: 4, bottom: 4),
+              content: Text('callOngoing'.tr),
-                leading: const Icon(Icons.call_received),
+              actions: [
-                backgroundColor: Theme.of(context).colorScheme.surfaceContainer,
+                Obx(() {
-                dividerColor: Colors.transparent,
+                  if (call.current.value == null) {
-                content: Text('callOngoing'.tr),
+                    return TextButton(
-                actions: [
+                      onPressed: showCallPrejoin,
-                  Obx(() {
+                      child: Text('callJoin'.tr),
-                    if (call.current.value == null) {
+                    );
-                      return TextButton(
+                  } else if (call.channel.value?.id == _channel?.id) {
-                        onPressed: showCallPrejoin,
+                    return TextButton(
-                        child: Text('callJoin'.tr),
+                      onPressed: () => call.gotoScreen(context),
-                      );
+                      child: Text('callResume'.tr),
-                    } else if (call.channel.value?.id == _channel?.id) {
+                    );
-                      return TextButton(
+                  } else {
-                        onPressed: () => call.gotoScreen(context),
+                    return TextButton(
-                        child: Text('callResume'.tr),
+                      onPressed: null,
-                      );
+                      child: Text('callJoin'.tr),
-                    } else {
+                    );
-                      return TextButton(
+                  }
-                        onPressed: null,
+                })
-                        child: Text('callJoin'.tr),
+              ],
-                      );
+            ),
-                    }
+          Expanded(
-                  })
+            child: ChatEventList(
-                ],
+              scope: widget.realm,
+              channel: _channel!,
+              chatController: _chatController,
+              onEdit: (item) {
+                setState(() => _messageToEditing = item);
+              },
+              onReply: (item) {
+                setState(() => _messageToReplying = item);
+              },
+            ),
+          ),
+          Obx(() {
+            if (_chatController.isLoading.isTrue) {
+              return const LinearProgressIndicator().animate().slideY();
+            } else {
+              return const SizedBox();
+            }
+          }),
+          ClipRect(
+            child: BackdropFilter(
+              filter: ImageFilter.blur(sigmaX: 50, sigmaY: 50),
+              child: SafeArea(
+                child: ChatMessageInput(
+                  edit: _messageToEditing,
+                  reply: _messageToReplying,
+                  realm: widget.realm,
+                  placeholder: placeholder,
+                  channel: _channel!,
+                  onSent: (Event item) {
+                    setState(() {
+                      _chatController.addPendingEvent(item);
+                    });
+                  },
+                  onReset: () {
+                    setState(() {
+                      _messageToReplying = null;
+                      _messageToEditing = null;
+                    });
+                  },
+                ),
               ),
             ),
+          ),
         ],
       ),
     );

lib/translations.dart

@@ -178,8 +178,8 @@ class SolianMessages extends Translations {
           'channelNotifyLevelNone': 'Ignore all',
           'channelNotifyLevelApplied':
               'Your notification settings has been applied.',
-          'messageUnsync': 'Messages Un-synced',
+          'messageUnSync': 'Messages Un-synced',
-          'messageUnsyncCaption': '@count message(s) still in un-synced.',
+          'messageUnSyncCaption': '@count message(s) still in un-synced.',
           'messageSending': 'Sending...',
           'messageEditDesc': 'Edited message @id',
           'messageDeleteDesc': 'Deleted message @id',
@@ -408,8 +408,8 @@ class SolianMessages extends Translations {
           'channelNotifyLevelMentioned': '仅提及',
           'channelNotifyLevelNone': '忽略一切',
           'channelNotifyLevelApplied': '你的通知设置已经应用。',
-          'messageUnsync': '消息未同步',
+          'messageUnSync': '消息未同步',
-          'messageUnsyncCaption': '还有 @count 条消息未同步',
+          'messageUnSyncCaption': '还有 @count 条消息未同步',
           'messageSending': '消息发送中…',
           'messageEditDesc': '修改了消息 @id',
           'messageDeleteDesc': '删除了消息 @id',

lib/widgets/attachments/attachment_item.dart

@@ -46,7 +46,9 @@ class _AttachmentItemState extends State<AttachmentItem> {
     _chewieController = ChewieController(
       aspectRatio: widget.item.metadata?['ratio'] ?? 16 / 9,
       videoPlayerController: _videoPlayerController!,
-      customControls: const MaterialControls(showPlayButton: true),
+      customControls: PlatformInfo.isMobile
+          ? const MaterialControls()
+          : const MaterialDesktopControls(),
       materialProgressColors: ChewieProgressColors(
         playedColor: Theme.of(context).colorScheme.primary,
         handleColor: Theme.of(context).colorScheme.primary,

lib/widgets/attachments/attachment_list.dart

@@ -102,79 +102,81 @@ class _AttachmentListState extends State<AttachmentList> {
   }
 
   Widget buildEntry(Attachment element, int idx) {
-    return GestureDetector(
+    return RepaintBoundary(
-      child: Container(
+      child: GestureDetector(
-        width: widget.width ?? MediaQuery.of(context).size.width,
+        child: Container(
-        decoration: BoxDecoration(
+          width: widget.width ?? MediaQuery.of(context).size.width,
-          color: Theme.of(context).colorScheme.surfaceContainerHigh,
+          decoration: BoxDecoration(
-        ),
+            color: Theme.of(context).colorScheme.surfaceContainerHigh,
-        child: Stack(
+          ),
-          fit: StackFit.expand,
+          child: Stack(
-          children: [
+            fit: StackFit.expand,
-            AttachmentItem(
+            children: [
-              parentId: widget.parentId,
+              AttachmentItem(
-              key: Key('a${element.uuid}'),
-              item: element,
-              badge: _attachmentsMeta.length > 1
-                  ? '${idx + 1}/${_attachmentsMeta.length}'
-                  : null,
-              showHideButton: !element.isMature || _showMature,
-              onHide: () {
-                setState(() => _showMature = false);
-              },
-            ),
-            if (element.isMature && !_showMature)
-              BackdropFilter(
-                filter: ImageFilter.blur(sigmaX: 100, sigmaY: 100),
-                child: Container(
-                  decoration: BoxDecoration(
-                    color: Colors.black.withOpacity(0.5),
-                  ),
-                ),
-              ),
-            if (element.isMature && !_showMature)
-              Center(
-                child: Container(
-                  constraints: const BoxConstraints(maxWidth: 280),
-                  child: Column(
-                    mainAxisAlignment: MainAxisAlignment.center,
-                    children: [
-                      const Icon(Icons.visibility_off,
-                          color: Colors.white, size: 32),
-                      const SizedBox(height: 8),
-                      Text(
-                        'matureContent'.tr,
-                        style: const TextStyle(
-                            color: Colors.white,
-                            fontWeight: FontWeight.bold,
-                            fontSize: 16),
-                      ),
-                      Text(
-                        'matureContentCaption'.tr,
-                        style: const TextStyle(color: Colors.white),
-                        textAlign: TextAlign.center,
-                      ),
-                    ],
-                  ),
-                ),
-              ),
-          ],
-        ),
-      ),
-      onTap: () {
-        if (!_showMature && _attachmentsMeta.any((e) => e!.isMature)) {
-          setState(() => _showMature = true);
-        } else if (['image'].contains(element.mimetype.split('/').first)) {
-          Navigator.of(context, rootNavigator: true).push(
-            MaterialPageRoute(
-              builder: (context) => AttachmentListFullScreen(
                 parentId: widget.parentId,
-                attachment: element,
+                key: Key('a${element.uuid}'),
+                item: element,
+                badge: _attachmentsMeta.length > 1
+                    ? '${idx + 1}/${_attachmentsMeta.length}'
+                    : null,
+                showHideButton: !element.isMature || _showMature,
+                onHide: () {
+                  setState(() => _showMature = false);
+                },
               ),
-            ),
+              if (element.isMature && !_showMature)
-          );
+                BackdropFilter(
-        }
+                  filter: ImageFilter.blur(sigmaX: 100, sigmaY: 100),
-      },
+                  child: Container(
+                    decoration: BoxDecoration(
+                      color: Colors.black.withOpacity(0.5),
+                    ),
+                  ),
+                ),
+              if (element.isMature && !_showMature)
+                Center(
+                  child: Container(
+                    constraints: const BoxConstraints(maxWidth: 280),
+                    child: Column(
+                      mainAxisAlignment: MainAxisAlignment.center,
+                      children: [
+                        const Icon(Icons.visibility_off,
+                            color: Colors.white, size: 32),
+                        const SizedBox(height: 8),
+                        Text(
+                          'matureContent'.tr,
+                          style: const TextStyle(
+                              color: Colors.white,
+                              fontWeight: FontWeight.bold,
+                              fontSize: 16),
+                        ),
+                        Text(
+                          'matureContentCaption'.tr,
+                          style: const TextStyle(color: Colors.white),
+                          textAlign: TextAlign.center,
+                        ),
+                      ],
+                    ),
+                  ),
+                ),
+            ],
+          ),
+        ),
+        onTap: () {
+          if (!_showMature && _attachmentsMeta.any((e) => e!.isMature)) {
+            setState(() => _showMature = true);
+          } else if (['image'].contains(element.mimetype.split('/').first)) {
+            Navigator.of(context, rootNavigator: true).push(
+              MaterialPageRoute(
+                builder: (context) => AttachmentListFullScreen(
+                  parentId: widget.parentId,
+                  attachment: element,
+                ),
+              ),
+            );
+          }
+        },
+      ),
     );
   }
 

lib/widgets/chat/chat_event_list.dart

@@ -0,0 +1,116 @@
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+import 'package:solian/controllers/chat_events_controller.dart';
+import 'package:solian/models/channel.dart';
+import 'package:solian/models/event.dart';
+import 'package:solian/widgets/chat/chat_event.dart';
+import 'package:solian/widgets/chat/chat_event_action.dart';
+
+class ChatEventList extends StatelessWidget {
+  final String scope;
+  final Channel channel;
+  final ChatEventController chatController;
+
+  final Function(Event) onEdit;
+  final Function(Event) onReply;
+
+  const ChatEventList({
+    super.key,
+    this.scope = 'global',
+    required this.channel,
+    required this.chatController,
+    required this.onEdit,
+    required this.onReply,
+  });
+
+  bool checkMessageMergeable(Event? a, Event? b) {
+    if (a == null || b == null) return false;
+    if (a.sender.account.id != b.sender.account.id) return false;
+    return a.createdAt.difference(b.createdAt).inMinutes <= 3;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return CustomScrollView(
+      reverse: true,
+      slivers: [
+        Obx(() {
+          return SliverList.builder(
+            key: Key('chat-history#${channel.id}'),
+            itemCount: chatController.currentEvents.length,
+            itemBuilder: (context, index) {
+              bool isMerged = false, hasMerged = false;
+              if (index > 0) {
+                hasMerged = checkMessageMergeable(
+                  chatController.currentEvents[index - 1].data,
+                  chatController.currentEvents[index].data,
+                );
+              }
+              if (index + 1 < chatController.currentEvents.length) {
+                isMerged = checkMessageMergeable(
+                  chatController.currentEvents[index].data,
+                  chatController.currentEvents[index + 1].data,
+                );
+              }
+
+              final item = chatController.currentEvents[index].data;
+
+              return InkWell(
+                child: RepaintBoundary(
+                  child: ChatEvent(
+                    key: Key('m${item.uuid}'),
+                    item: item,
+                    isMerged: isMerged,
+                    chatController: chatController,
+                  ).paddingOnly(
+                    top: !isMerged ? 8 : 0,
+                    bottom: !hasMerged ? 8 : 0,
+                  ),
+                ),
+                onLongPress: () {
+                  showModalBottomSheet(
+                    useRootNavigator: true,
+                    context: context,
+                    builder: (context) => ChatEventAction(
+                      channel: channel,
+                      realm: channel.realm,
+                      item: item,
+                      onEdit: () {
+                        onEdit(item);
+                      },
+                      onReply: () {
+                        onReply(item);
+                      },
+                    ),
+                  );
+                },
+              );
+            },
+          );
+        }),
+        Obx(() {
+          final amount =
+              chatController.totalEvents - chatController.currentEvents.length;
+
+          if (amount.value <= 0 || chatController.isLoading.isTrue) {
+            return const SliverToBoxAdapter(child: SizedBox());
+          }
+
+          return SliverToBoxAdapter(
+            child: ListTile(
+              tileColor: Theme.of(context).colorScheme.surfaceContainerLow,
+              leading: const Icon(Icons.sync_disabled),
+              title: Text('messageUnSync'.tr),
+              subtitle: Text('messageUnSyncCaption'.trParams({
+                'count': amount.string,
+              })),
+              onTap: () {
+                chatController.loadEvents(channel, scope);
+              },
+            ),
+          );
+        }),
+      ],
+    );
+  }
+}

lib/widgets/posts/post_list.dart

@@ -26,29 +26,31 @@ class PostListWidget extends StatelessWidget {
       pagingController: controller,
       builderDelegate: PagedChildBuilderDelegate<Post>(
         itemBuilder: (context, item, index) {
-          return GestureDetector(
+          return RepaintBoundary(
-            child: PostItem(
+            child: GestureDetector(
-              key: Key('p${item.alias}'),
+              child: PostItem(
-              item: item,
+                key: Key('p${item.alias}'),
-              isShowEmbed: isShowEmbed,
+                item: item,
-              isClickable: isNestedClickable,
+                isShowEmbed: isShowEmbed,
-            ).paddingSymmetric(vertical: 8),
+                isClickable: isNestedClickable,
-            onTap: () {
+              ).paddingSymmetric(vertical: 8),
-              if (!isClickable) return;
+              onTap: () {
-              AppRouter.instance.pushNamed(
+                if (!isClickable) return;
-                'postDetail',
+                AppRouter.instance.pushNamed(
-                pathParameters: {'alias': item.alias},
+                  'postDetail',
-              );
+                  pathParameters: {'alias': item.alias},
-            },
+                );
-            onLongPress: () {
+              },
-              showModalBottomSheet(
+              onLongPress: () {
-                useRootNavigator: true,
+                showModalBottomSheet(
-                context: context,
+                  useRootNavigator: true,
-                builder: (context) => PostAction(item: item),
+                  context: context,
-              ).then((value) {
+                  builder: (context) => PostAction(item: item),
-                if (value != null) controller.refresh();
+                ).then((value) {
-              });
+                  if (value != null) controller.refresh();
-            },
+                });
+              },
+            ),
           );
         },
       ),