feat(ui): Move the bubbles into their own directory

assets/i18n/strings.i18n.json

@@ -27,6 +27,31 @@
 	    "warningChannelDescription": "Warnings related to Moxxy"
 	}
     },
+    "dateTime": {
+	"justNow": "Just now",
+	"nMinutesAgo": "${min}min ago",
+	"mondayAbbrev": "Mon",
+	"tuesdayAbbrev": "Tue",
+	"wednessdayAbbrev": "Wed",
+	"thursdayAbbrev": "Thu",
+	"fridayAbbrev": "Fri",
+	"saturdayAbbrev": "Sat",
+	"sundayAbbrev": "Sun",
+	"january": "January",
+	"february": "February",
+	"march": "March",
+	"april": "April",
+	"may": "May",
+	"june": "June",
+	"july": "July",
+	"august": "August",
+	"september": "September",
+	"october": "October",
+	"november": "November",
+	"december": "December",
+	"today": "Today",
+	"yesterday": "Yesterday"
+    },
     "messages": {
 	"image": "Image",
 	"video": "Video",

assets/i18n/strings_de.i18n.json

@@ -27,6 +27,31 @@
 	    "warningChannelDescription": "Warnungen im Bezug auf Moxxy"
 	}
     },
+    "dateTime": {
+	"justNow": "Gerade",
+	"nMinutesAgo": "vor ${min}min",
+	"mondayAbbrev": "Mon",
+	"tuesdayAbbrev": "Die",
+	"wednessdayAbbrev": "Mit",
+	"thursdayAbbrev": "Don",
+	"fridayAbbrev": "Fre",
+	"saturdayAbbrev": "Sam",
+	"sundayAbbrev": "Son",
+	"january": "Januar",
+	"february": "Februar",
+	"march": "März",
+	"april": "April",
+	"may": "Mai",
+	"june": "Juni",
+	"july": "Juli",
+	"august": "August",
+	"september": "September",
+	"october": "Oktober",
+	"november": "November",
+	"december": "Dezember",
+	"today": "Heute",
+	"yesterday": "Gestern"
+    },
     "messages": {
 	"image": "Bild",
 	"video": "Video",

lib/shared/helpers.dart

@@ -40,7 +40,7 @@ String formatConversationTimestamp(int timestamp, int now) {
       return '${hourDifference}h';
     }
   } else if (difference <= Duration.millisecondsPerMinute) {
-    return 'Just now';
+    return t.dateTime.justNow;
   }
 
   return '${(difference / Duration.millisecondsPerMinute).floor()}min';
@@ -58,9 +58,10 @@ String formatMessageTimestamp(int timestamp, int now) {
     return '${dt.hour}:${padInt(dt.minute)}';
   } else {
     if (difference < Duration.millisecondsPerMinute) {
-      return 'Just now';
+      return t.dateTime.justNow;
     } else {
-      return '${(difference / Duration.millisecondsPerMinute).floor()}min ago';
+      final diff = (difference / Duration.millisecondsPerMinute).floor();
+      return t.dateTime.nMinutesAgo(min: diff);
     }
   }
 }
@@ -69,19 +70,19 @@ String formatMessageTimestamp(int timestamp, int now) {
 String weekdayToStringAbbrev(int day) {
   switch (day) {
     case DateTime.monday:
-      return 'Mon';
+      return t.dateTime.mondayAbbrev;
     case DateTime.tuesday:
-      return 'Tue';
+      return t.dateTime.tuesdayAbbrev;
     case DateTime.wednesday:
-      return 'Wed';
+      return t.dateTime.wednessdayAbbrev;
     case DateTime.thursday:
-      return 'Thu';
+      return t.dateTime.thursdayAbbrev;
     case DateTime.friday:
-      return 'Fri';
+      return t.dateTime.fridayAbbrev;
     case DateTime.saturday:
-      return 'Sat';
+      return t.dateTime.saturdayAbbrev;
     case DateTime.sunday:
-      return 'Sun';
+      return t.dateTime.sundayAbbrev;
   }
 
   // Should not happen
@@ -92,29 +93,29 @@ String weekdayToStringAbbrev(int day) {
 String monthToString(int month) {
   switch (month) {
     case DateTime.january:
-      return 'January';
+      return t.dateTime.january;
     case DateTime.february:
-      return 'February';
+      return t.dateTime.february;
     case DateTime.march:
-      return 'March';
+      return t.dateTime.march;
     case DateTime.april:
-      return 'April';
+      return t.dateTime.april;
     case DateTime.may:
-      return 'May';
+      return t.dateTime.may;
     case DateTime.june:
-      return 'June';
+      return t.dateTime.june;
     case DateTime.july:
-      return 'July';
+      return t.dateTime.july;
     case DateTime.august:
-      return 'August';
+      return t.dateTime.august;
     case DateTime.september:
-      return 'September';
+      return t.dateTime.september;
     case DateTime.october:
-      return 'October';
+      return t.dateTime.october;
     case DateTime.november:
-      return 'November';
+      return t.dateTime.november;
     case DateTime.december:
-      return 'December';
+      return t.dateTime.december;
   }
 
   // Should not happen
@@ -125,9 +126,9 @@ String monthToString(int month) {
 /// like 'Today', 'Yesterday', 'Fri, 7. August' or '6. August 2022'.
 String formatDateBubble(DateTime dt, DateTime now) {
   if (dt.day == now.day && dt.month == now.month && dt.year == now.year) {
-    return 'Today';
+    return t.dateTime.today;
   } else if (now.subtract(const Duration(days: 1)).day == dt.day) {
-    return 'Yesterday';
+    return t.dateTime.yesterday;
   } else if (dt.year == now.year) {
     return '${weekdayToStringAbbrev(dt.weekday)}, ${dt.day}. ${monthToString(dt.month)}';
   } else {

lib/ui/pages/conversation/conversation.dart

@@ -17,9 +17,9 @@ import 'package:moxxyv2/ui/pages/conversation/blink.dart';
 import 'package:moxxyv2/ui/pages/conversation/bottom.dart';
 import 'package:moxxyv2/ui/pages/conversation/helpers.dart';
 import 'package:moxxyv2/ui/pages/conversation/topbar.dart';
+import 'package:moxxyv2/ui/widgets/chat/bubbles/date.dart';
+import 'package:moxxyv2/ui/widgets/chat/bubbles/new_device.dart';
 import 'package:moxxyv2/ui/widgets/chat/chatbubble.dart';
-import 'package:moxxyv2/ui/widgets/chat/datebubble.dart';
-import 'package:moxxyv2/ui/widgets/chat/media/new_device.dart';
 import 'package:moxxyv2/ui/widgets/overview_menu.dart';
 
 class ConversationPage extends StatefulWidget {
@@ -109,22 +109,31 @@ class ConversationPageState extends State<ConversationPage> with TickerProviderS
 
   Widget _renderBubble(ConversationState state, BuildContext context, int _index, double maxWidth, String jid) {
     if (_index.isEven) {
-      // Check if we have to render a date bubble
-      final nextMessageDateTime = DateTime.fromMillisecondsSinceEpoch(
-        state.messages[state.messages.length - 1 - _index ~/ 2].timestamp,
-      );
-      final nextIndex = state.messages.length - 2 - _index ~/ 2;
-      final lastMessageDateTime = nextIndex > 0 ?
-        DateTime.fromMillisecondsSinceEpoch(state.messages[nextIndex].timestamp) :
-        null;
-        
-      if (lastMessageDateTime == null) {
-        return const SizedBox();
-      }
+      if (_index == 0) return const SizedBox();
 
-      if (lastMessageDateTime.day != nextMessageDateTime.day ||
-          lastMessageDateTime.month != nextMessageDateTime.month ||
-          lastMessageDateTime.year != nextMessageDateTime.year) {
+      final prevIndexRaw = (_index + 2) ~/ 2;
+      final prevIndex = state.messages.length - prevIndexRaw;
+      final prevMessageDateTime = prevIndex < 0 || prevIndexRaw == 0 ?
+        null :
+        DateTime.fromMillisecondsSinceEpoch(
+          state.messages[prevIndex].timestamp,
+        );
+
+      if (prevMessageDateTime == null) return const SizedBox();
+
+      final nextIndexRaw = _index ~/ 2;
+      final nextIndex = state.messages.length - nextIndexRaw;
+      final nextMessageDateTime = nextIndex < 0 || nextIndexRaw == 0 ?
+        null :
+        DateTime.fromMillisecondsSinceEpoch(
+          state.messages[nextIndex].timestamp,
+        );
+      if (nextMessageDateTime == null) return const SizedBox();
+      
+      // Check if we have to render a date bubble
+      if (prevMessageDateTime.day != nextMessageDateTime.day ||
+          prevMessageDateTime.month != nextMessageDateTime.month ||
+          prevMessageDateTime.year != nextMessageDateTime.year) {
         return Row(
           mainAxisAlignment: MainAxisAlignment.center,
           children: [