From 2a16ca726b4a1bf197549a7e2ea7534323669533 Mon Sep 17 00:00:00 2001
From: Julian KOUNE <jkoune@linagora.com>
Date: Thu, 5 Oct 2023 16:42:07 +0200
Subject: [PATCH] feat: add spacing between messages bubbles

---
 lib/pages/chat/chat_event_list.dart              |  2 +-
 lib/pages/chat/events/{ => message}/message.dart | 16 ++++++++++------
 lib/pages/chat/events/message/message_style.dart | 16 ++++++++++++++++
 3 files changed, 27 insertions(+), 7 deletions(-)
 rename lib/pages/chat/events/{ => message}/message.dart (98%)

diff --git a/lib/pages/chat/chat_event_list.dart b/lib/pages/chat/chat_event_list.dart
index eac742780b..54c46182e0 100644
--- a/lib/pages/chat/chat_event_list.dart
+++ b/lib/pages/chat/chat_event_list.dart
@@ -8,7 +8,7 @@ import 'package:scroll_to_index/scroll_to_index.dart';
 
 import 'package:fluffychat/config/themes.dart';
 import 'package:fluffychat/pages/chat/chat.dart';
-import 'package:fluffychat/pages/chat/events/message.dart';
+import 'package:fluffychat/pages/chat/events/message/message.dart';
 import 'package:fluffychat/pages/user_bottom_sheet/user_bottom_sheet.dart';
 import 'package:fluffychat/utils/adaptive_bottom_sheet.dart';
 import 'package:fluffychat/utils/matrix_sdk_extensions/filtered_timeline_extension.dart';
diff --git a/lib/pages/chat/events/message.dart b/lib/pages/chat/events/message/message.dart
similarity index 98%
rename from lib/pages/chat/events/message.dart
rename to lib/pages/chat/events/message/message.dart
index f48a585f3a..49184d1d8a 100644
--- a/lib/pages/chat/events/message.dart
+++ b/lib/pages/chat/events/message/message.dart
@@ -1,12 +1,17 @@
 import 'dart:math' as math;
 
+import 'package:fluffychat/config/app_config.dart';
 import 'package:fluffychat/config/themes.dart';
 import 'package:fluffychat/pages/chat/chat.dart';
 import 'package:fluffychat/pages/chat/chat_horizontal_action_menu.dart';
 import 'package:fluffychat/pages/chat/context_item_chat_action.dart';
 import 'package:fluffychat/pages/chat/events/message/message_style.dart';
+import 'package:fluffychat/pages/chat/events/message_content.dart';
 import 'package:fluffychat/pages/chat/events/message_reactions.dart';
 import 'package:fluffychat/pages/chat/events/message_time.dart';
+import 'package:fluffychat/pages/chat/events/reply_content.dart';
+import 'package:fluffychat/pages/chat/events/state_message.dart';
+import 'package:fluffychat/pages/chat/events/verification_request_content.dart';
 import 'package:fluffychat/pages/chat/sticky_timstamp_widget.dart';
 import 'package:fluffychat/utils/date_time_extension.dart';
 import 'package:fluffychat/widgets/avatar/avatar.dart';
@@ -18,12 +23,6 @@ import 'package:flutter/services.dart';
 import 'package:linagora_design_flutter/colors/linagora_sys_colors.dart';
 import 'package:matrix/matrix.dart';
 
-import '../../../config/app_config.dart';
-import 'message_content.dart';
-import 'reply_content.dart';
-import 'state_message.dart';
-import 'verification_request_content.dart';
-
 typedef OnMenuAction = Function(BuildContext, ChatHorizontalActionMenu, Event);
 
 class Message extends StatelessWidget {
@@ -141,6 +140,11 @@ class Message extends StatelessWidget {
                   Container(
                     alignment: alignment,
                     padding: EdgeInsetsDirectional.only(
+                      top: MessageStyle.messageSpacing(
+                        displayTime,
+                        nextEvent,
+                        event,
+                      ),
                       start: 8,
                       end: selected || controller.responsive.isDesktop(context)
                           ? 8
diff --git a/lib/pages/chat/events/message/message_style.dart b/lib/pages/chat/events/message/message_style.dart
index 1a2add3fb7..650100af1f 100644
--- a/lib/pages/chat/events/message/message_style.dart
+++ b/lib/pages/chat/events/message/message_style.dart
@@ -3,6 +3,7 @@ import 'package:fluffychat/di/global/get_it_initializer.dart';
 import 'package:fluffychat/utils/responsive/responsive_utils.dart';
 import 'package:flutter/material.dart';
 import 'package:fluffychat/utils/extension/build_context_extension.dart';
+import 'package:matrix/matrix.dart';
 
 class MessageStyle {
   static ResponsiveUtils responsiveUtils = getIt.get<ResponsiveUtils>();
@@ -68,4 +69,19 @@ class MessageStyle {
           MediaQuery.of(context).size.width * messageBubbleMobileRatioMaxWidth,
     );
   }
+
+  static double messageSpacing(
+    bool displayTime,
+    Event? nextEvent,
+    Event currentEvent,
+  ) {
+    // add spaces to messages only
+    if (nextEvent == null ||
+        displayTime ||
+        nextEvent.type != EventTypes.Message) {
+      return 0;
+    }
+
+    return currentEvent.senderId != nextEvent.senderId ? 8 : 4;
+  }
 }