feat: Nicer room creation UI

lib/pages/chat/chat.dart

@@ -261,8 +261,7 @@ class ChatController extends State<ChatPageWithRoom>
       var readMarkerEventIndex = readMarkerEventId.isEmpty
           ? -1
           : timeline!.events
-              .where((e) => e.isVisibleInGui || e.eventId == readMarkerEventId)
+              .filterByVisibleInGui(exceptionEventId: readMarkerEventId)
-              .toList()
               .indexWhere((e) => e.eventId == readMarkerEventId);
 
       // Read marker is existing but not found in first events. Try a single
@@ -270,8 +269,7 @@ class ChatController extends State<ChatPageWithRoom>
       if (readMarkerEventId.isNotEmpty && readMarkerEventIndex == -1) {
         await timeline?.requestHistory(historyCount: _loadHistoryCount);
         readMarkerEventIndex = timeline!.events
-            .where((e) => e.isVisibleInGui || e.eventId == readMarkerEventId)
+            .filterByVisibleInGui(exceptionEventId: readMarkerEventId)
-            .toList()
             .indexWhere((e) => e.eventId == readMarkerEventId);
       }
 
@@ -868,8 +866,7 @@ class ChatController extends State<ChatPageWithRoom>
     final eventIndex = foundEvent == null
         ? -1
         : timeline!.events
-            .where((event) => event.isVisibleInGui || event.eventId == eventId)
+            .filterByVisibleInGui(exceptionEventId: eventId)
-            .toList()
             .indexOf(foundEvent);
 
     if (eventIndex == -1) {

lib/pages/chat/chat_event_list.dart

@@ -25,9 +25,7 @@ class ChatEventList extends StatelessWidget {
   Widget build(BuildContext context) {
     final horizontalPadding = FluffyThemes.isColumnMode(context) ? 8.0 : 0.0;
 
-    final events = controller.timeline!.events
+    final events = controller.timeline!.events.filterByVisibleInGui();
-        .where((event) => event.isVisibleInGui)
-        .toList();
     final animateInEventIndex = controller.animateInEventIndex;
 
     // create a map of eventId --> index to greatly improve performance of

lib/pages/chat/events/message.dart

@@ -6,6 +6,7 @@ import 'package:matrix/matrix.dart';
 import 'package:swipe_to_action/swipe_to_action.dart';
 
 import 'package:fluffychat/config/themes.dart';
+import 'package:fluffychat/pages/chat/events/room_creation_state_event.dart';
 import 'package:fluffychat/utils/date_time_extension.dart';
 import 'package:fluffychat/utils/string_color.dart';
 import 'package:fluffychat/widgets/avatar.dart';
@@ -68,6 +69,9 @@ class Message extends StatelessWidget {
       if (event.type.startsWith('m.call.')) {
         return const SizedBox.shrink();
       }
+      if (event.type == EventTypes.RoomCreate) {
+        return RoomCreationStateEvent(event: event);
+      }
       return StateMessage(event);
     }
 

lib/pages/chat/events/room_creation_state_event.dart

@@ -0,0 +1,40 @@
+import 'package:flutter/material.dart';
+
+import 'package:flutter_gen/gen_l10n/l10n.dart';
+import 'package:matrix/matrix.dart';
+
+import 'package:fluffychat/utils/date_time_extension.dart';
+import 'package:fluffychat/utils/matrix_sdk_extensions/matrix_locals.dart';
+import 'package:fluffychat/widgets/avatar.dart';
+
+class RoomCreationStateEvent extends StatelessWidget {
+  final Event event;
+  const RoomCreationStateEvent({required this.event, super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final l10n = L10n.of(context);
+    final matrixLocals = MatrixLocals(l10n);
+    final theme = Theme.of(context);
+    final roomName = event.room.getLocalizedDisplayname(matrixLocals);
+    return Column(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        Avatar(
+          mxContent: event.room.avatar,
+          name: roomName,
+          size: Avatar.defaultSize * 2,
+        ),
+        Text(
+          roomName,
+          style: theme.textTheme.headlineSmall,
+        ),
+        Text(
+          '${event.originServerTs.localizedTime(context)} | ${l10n.countParticipants((event.room.summary.mJoinedMemberCount ?? 1) + (event.room.summary.mInvitedMemberCount ?? 0))}',
+          style: theme.textTheme.labelSmall,
+        ),
+        const SizedBox(height: 48),
+      ],
+    );
+  }
+}

lib/utils/matrix_sdk_extensions/filtered_timeline_extension.dart

@@ -2,6 +2,36 @@ import 'package:matrix/matrix.dart';
 
 import '../../config/app_config.dart';
 
+extension VisibleInGuiExtension on List<Event> {
+  List<Event> filterByVisibleInGui({String? exceptionEventId}) {
+    final visibleEvents =
+        where((e) => e.isVisibleInGui || e.eventId == exceptionEventId)
+            .toList();
+
+    // Hide creation state events:
+    if (visibleEvents.isNotEmpty &&
+        visibleEvents.last.type == EventTypes.RoomCreate) {
+      var i = visibleEvents.length - 2;
+      while (i > 0) {
+        final event = visibleEvents[i];
+        if (!event.isState) break;
+        if (event.type == EventTypes.Encryption) {
+          i--;
+          continue;
+        }
+        if (event.type == EventTypes.RoomMember &&
+            event.roomMemberChangeType == RoomMemberChangeType.acceptInvite) {
+          i--;
+          continue;
+        }
+        visibleEvents.removeAt(i);
+        i--;
+      }
+    }
+    return visibleEvents;
+  }
+}
+
 extension IsStateExtension on Event {
   bool get isVisibleInGui =>
       // always filter out edit and reaction relationships