From 7003e1aa0577f56b05ade344cddcbcb71eee6ef4 Mon Sep 17 00:00:00 2001
From: alanpoon <brightshadowx@gmail.com>
Date: Thu, 11 Sep 2025 20:15:27 +0800
Subject: [PATCH 01/26] collapsible small state improvement

---
 src/home/room_screen.rs | 220 +++++++++++++++++++++++++++++++++++++---
 1 file changed, 206 insertions(+), 14 deletions(-)

diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs
index 62049826..cb30426b 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -485,6 +485,28 @@ live_design! {
                 }
                 text: ""
             }
+            
+            // Collapsible button for small state event groups
+            // Shows on the first item of each group to toggle expansion
+            // Text is dynamically updated: ▼ (collapsed) or ▲ (expanded)
+            collapsible_button = <Button> {
+                width: Fit,
+                height: Fit,
+                margin: { left: 5, right: 5 }
+                padding: { left: 4, right: 4, top: 2, bottom: 2 }
+                text: "▼"  // Default to collapsed state
+                draw_text: {
+                    text_style: <SMALL_STATE_TEXT_STYLE> {},
+                    color: #666
+                }
+                draw_bg: {
+                    fn pixel(self) -> vec4 {
+                        let sdf = Sdf2d::viewport(self.pos * self.rect_size);
+                        return sdf.result
+                    }
+                }
+            }
+            
             // Center the Avatar vertically with respect to the SmallStateEvent content.
             avatar_row = <AvatarRow> { margin: {top: -1.0} }
         }
@@ -872,7 +894,7 @@ impl Widget for RoomScreen {
         }
 
         if let Event::Actions(actions) = event {
-            for (_, wr) in portal_list.items_with_actions(actions) {
+            for (item_id, wr) in portal_list.items_with_actions(actions) {
                 let reaction_list = wr.reaction_list(id!(reaction_list));
                 if let RoomScreenTooltipActions::HoverInReactionButton {
                     widget_rect,
@@ -931,6 +953,32 @@ impl Widget for RoomScreen {
                         TooltipAction::HoverOut
                     );
                 }
+
+                // Handle collapsible button click in SmallStateEvent
+                if wr.button(id!(collapsible_button)).clicked(actions) {
+                    if let Some(tl_state) = &mut self.tl_state {
+                        for (range, open) in &mut tl_state.small_state_groups {
+                            if range.start == item_id {
+                                // Toggle the group's open/closed state
+                                *open = !*open;
+                                
+                                // Force redraw of all items in this group by clearing their cached drawn status
+                                tl_state.content_drawn_since_last_update.remove(range.clone());
+                                tl_state.profile_drawn_since_last_update.remove(range.clone());
+                                
+                                // Update button text to reflect new state:
+                                // ▲ (up arrow) = expanded/open - items are visible
+                                // ▼ (down arrow) = collapsed/closed - items are hidden
+                                let button_text = if *open { "▲" } else { "▼" };
+                                wr.button(id!(collapsible_button)).set_text(cx, button_text);
+                                // If the last item is a group of small state events, scroll to the end when it is expanded.
+                                if range.end == tl_state.items.len() && *open {
+                                    portal_list.smooth_scroll_to_end(cx, 90.0, None);
+                                }
+                            }
+                        }
+                    }
+                }
             }
 
             self.handle_message_actions(cx, actions, &portal_list, &loading_pane);
@@ -1043,7 +1091,6 @@ impl Widget for RoomScreen {
                 }
             }
 
-
             // Handle the send message button being clicked or Cmd/Ctrl + Return being pressed.
             if self.button(id!(send_message_button)).clicked(actions)
                 || text_input.returned(actions).is_some_and(
@@ -1312,11 +1359,12 @@ impl Widget for RoomScreen {
                         content_drawn: tl_state.content_drawn_since_last_update.contains(&tl_idx),
                         profile_drawn: tl_state.profile_drawn_since_last_update.contains(&tl_idx),
                     };
+                    let prev_event = tl_idx.checked_sub(1).and_then(|i| tl_items.get(i));
+                    let next_event = tl_idx.checked_add(1).and_then(|i| tl_items.get(i));
                     let (item, item_new_draw_status) = match timeline_item.kind() {
                         TimelineItemKind::Event(event_tl_item) => match event_tl_item.content() {
                             TimelineItemContent::MsgLike(msg_like_content) => match &msg_like_content.kind {
                                 MsgLikeKind::Message(_) | MsgLikeKind::Sticker(_) => {
-                                    let prev_event = tl_idx.checked_sub(1).and_then(|i| tl_items.get(i));
                                     populate_message_view(
                                         cx,
                                         list,
@@ -1338,8 +1386,11 @@ impl Widget for RoomScreen {
                                     item_id,
                                     room_id,
                                     event_tl_item,
+                                    prev_event,
+                                    next_event,
                                     poll_state,
                                     item_drawn_status,
+                                    &mut tl_state.small_state_groups,
                                 ),
                                 MsgLikeKind::Redacted => populate_small_state_event(
                                     cx,
@@ -1347,8 +1398,11 @@ impl Widget for RoomScreen {
                                     item_id,
                                     room_id,
                                     event_tl_item,
+                                    prev_event,
+                                    next_event,
                                     &RedactedMessageEventMarker,
                                     item_drawn_status,
+                                    &mut tl_state.small_state_groups,
                                 ),
                                 MsgLikeKind::UnableToDecrypt(utd) => populate_small_state_event(
                                     cx,
@@ -1356,8 +1410,11 @@ impl Widget for RoomScreen {
                                     item_id,
                                     room_id,
                                     event_tl_item,
+                                    prev_event,
+                                    next_event,
                                     utd,
                                     item_drawn_status,
+                                    &mut tl_state.small_state_groups,
                                 ),
                             },
                             TimelineItemContent::MembershipChange(membership_change) => populate_small_state_event(
@@ -1366,8 +1423,11 @@ impl Widget for RoomScreen {
                                 item_id,
                                 room_id,
                                 event_tl_item,
+                                prev_event,
+                                next_event,
                                 membership_change,
                                 item_drawn_status,
+                                &mut tl_state.small_state_groups,
                             ),
                             TimelineItemContent::ProfileChange(profile_change) => populate_small_state_event(
                                 cx,
@@ -1375,8 +1435,11 @@ impl Widget for RoomScreen {
                                 item_id,
                                 room_id,
                                 event_tl_item,
+                                prev_event,
+                                next_event,
                                 profile_change,
                                 item_drawn_status,
+                                &mut tl_state.small_state_groups,
                             ),
                             TimelineItemContent::OtherState(other) => populate_small_state_event(
                                 cx,
@@ -1384,8 +1447,11 @@ impl Widget for RoomScreen {
                                 item_id,
                                 room_id,
                                 event_tl_item,
+                                prev_event,
+                                next_event,
                                 other,
                                 item_drawn_status,
+                                &mut tl_state.small_state_groups,
                             ),
                             unhandled => {
                                 let item = list.item(cx, item_id, live_id!(SmallStateEvent));
@@ -1571,7 +1637,19 @@ impl RoomScreen {
                     } else {
                         tl.content_drawn_since_last_update.remove(changed_indices.clone());
                         tl.profile_drawn_since_last_update.remove(changed_indices.clone());
-                        // log!("Timeline::handle_event(): changed_indices: {changed_indices:?}, items len: {}\ncontent drawn: {:#?}\nprofile drawn: {:#?}", items.len(), tl.content_drawn_since_last_update, tl.profile_drawn_since_last_update);
+                    }
+                    // Handles item_id changes whenever there is a backward pagination.  
+                    if !is_append {
+                        // Calculate the shift amount based on the difference between old and new lengths
+                        let old_len = tl.items.len();
+                        let new_len = new_items.len();
+                        let shift = new_len as i32 - old_len as i32;
+                        // Apply the shift to the small_state_groups.
+                        for (range, _) in &mut tl.small_state_groups {
+                            let new_start = (range.start as i32 + shift).max(0) as usize;
+                            let new_end = (range.end as i32 + shift).max(0) as usize;
+                            *range = new_start..new_end;
+                        }
                     }
                     tl.items = new_items;
                     done_loading = true;
@@ -2322,6 +2400,7 @@ impl RoomScreen {
                 prev_first_index: None,
                 scrolled_past_read_marker: false,
                 latest_own_user_receipt: None,
+                small_state_groups: Vec::new(),
             };
             (tl_state, true)
         };
@@ -2876,6 +2955,10 @@ struct TimelineUiState {
     /// When new message come in, this value is reset to `false`.
     scrolled_past_read_marker: bool,
     latest_own_user_receipt: Option<Receipt>,
+    /// A vector of ranges of small state items that are grouped together in the UI.
+    /// 
+    /// There is a collapsible to the right of the message of the first item in the group. 
+    small_state_groups: Vec<(std::ops::Range<usize>, bool)>
 }
 
 #[derive(Default, Debug)]
@@ -3927,6 +4010,80 @@ fn populate_preview_of_timeline_item(
     widget_out.show_html(cx, html);
 }
 
+/// Checks if a event timeline item is a small state event.
+/// Returns true if the item is a small state event that can be grouped.
+fn is_small_state_event(
+    event_tl_item: &EventTimelineItem,
+) -> bool {
+    matches!(
+        event_tl_item.content(),
+        TimelineItemContent::MembershipChange(_) |
+        TimelineItemContent::ProfileChange(_) |
+        TimelineItemContent::OtherState(_) |
+        TimelineItemContent::MsgLike(MsgLikeContent {
+            kind: MsgLikeKind::Poll(_) | MsgLikeKind::Redacted | MsgLikeKind::UnableToDecrypt(_),
+            ..
+        })
+    )
+}
+
+/// Dynamically updates small state groups as timeline items are processed.
+/// This function is called during populate_small_state_event to build groups on-demand.
+/// Since iteration starts from the biggest item_id and goes backwards, we handle reverse grouping.
+/// Returns a tuple whether to display the message, and whether to display the collapsible button and whether collapsible list is expanded.
+fn update_small_state_groups_for_item(
+    item_id: usize,
+    current_item: &EventTimelineItem,
+    previous_item: Option<&Arc<TimelineItem>>,
+    next_item: Option<&Arc<TimelineItem>>,
+    small_state_groups: &mut Vec<(std::ops::Range<usize>, bool)>,
+) -> (bool, bool, bool) {
+    let current_item_is_small_state = is_small_state_event(current_item);
+
+    if !current_item_is_small_state {
+        return (true, false, false); // Not a small state event, draw as individual item, no debug button
+    }
+
+    // check if the next item (item_id + 1) is a small state event to continue grouping
+    let next_item_is_small_state = next_item
+        .and_then(|timeline_item| match timeline_item.kind() {
+            TimelineItemKind::Event(event_tl_item) => Some(event_tl_item),
+            _ => None,
+        })
+        .map(is_small_state_event)
+        .unwrap_or(false);
+    let previous_item_is_small_state = previous_item
+        .and_then(|timeline_item| match timeline_item.kind() {
+            TimelineItemKind::Event(event_tl_item) => Some(event_tl_item),
+            _ => None,
+        })
+        .map(is_small_state_event)
+        .unwrap_or(false);
+    if !previous_item_is_small_state && !next_item_is_small_state {
+        return (true, false, false); // Isolated small state event, no debug button
+    }
+
+    // Check if this item is already part of an existing group or can extend one
+    for (range, is_open) in small_state_groups.iter_mut() {
+        if range.start == item_id {
+            return (true, true, *is_open); // Start of group, show debug button
+        }
+        if range.contains(&item_id) {
+            return (*is_open, false, *is_open); // Item is in group but not at start, no debug button
+        }
+        // Since we're iterating backwards (from highest to lowest item_id),
+        if range.start == item_id + 1 {
+            // Extend this group backwards to include current item
+            *range = item_id..range.end;
+            return (*is_open, false, false); // Extended group, no debug button for this item
+        }
+    }
+    if next_item_is_small_state {
+        // Plus to include the next item into the group.
+        small_state_groups.push((item_id..(item_id + 2), false));
+    }
+    (false, false, false) // Return collapsed state, no debug button
+}
 
 /// A trait for abstracting over the different types of timeline events
 /// that can be displayed in a `SmallStateEvent` widget.
@@ -4117,8 +4274,11 @@ fn populate_small_state_event(
     item_id: usize,
     room_id: &OwnedRoomId,
     event_tl_item: &EventTimelineItem,
+    prev_event: Option<&Arc<TimelineItem>>,
+    next_event: Option<&Arc<TimelineItem>>,
     event_content: &impl SmallStateEventContent,
     item_drawn_status: ItemDrawnStatus,
+    small_state_groups: &mut Vec<(std::ops::Range<usize>, bool)>,
 ) -> (WidgetRef, ItemDrawnStatus) {
     let mut new_drawn_status = item_drawn_status;
     let (item, existed) = list.item_with_existed(cx, item_id, live_id!(SmallStateEvent));
@@ -4155,18 +4315,50 @@ fn populate_small_state_event(
         new_drawn_status.profile_drawn = profile_drawn;
         username
     });
-
-    // Proceed to draw the actual event content.
-    event_content.populate_item_content(
-        cx,
-        list,
+    // Dynamically determine group membership and update groups
+    // Returns: (opened, show_collapsible_button, expanded)
+    // - opened: whether this individual item should be rendered (based on group state)
+    // - show_collapsible_button: true if this item is the first in a collapsible group
+    // - expanded: current expansion state of the group (for button text)
+    let (opened, show_collapsible_button, expanded) = update_small_state_groups_for_item(
         item_id,
-        item,
         event_tl_item,
-        &username,
-        item_drawn_status,
-        new_drawn_status,
-    )
+        prev_event,
+        next_event,
+        small_state_groups,
+    );
+    // Only show the collapsible button on the first item of each group
+    item.button(id!(collapsible_button))
+        .set_visible(cx, show_collapsible_button);
+
+    // Render logic based on group state
+    if opened {
+        // This item should be visible - set appropriate button text if this is a group leader
+        if show_collapsible_button {
+            // Update button text to show current group state:
+            // ▲ = group is expanded (click to collapse)
+            // ▼ = group is collapsed (click to expand)
+            let button_text = if expanded { "▲" } else { "▼" };
+            item.button(id!(collapsible_button))
+                .set_text(cx, button_text);
+        }
+
+        // Render the actual event content
+        event_content.populate_item_content(
+            cx,
+            list,
+            item_id,
+            item,
+            event_tl_item,
+            &username,
+            item_drawn_status,
+            new_drawn_status,
+        )
+    } else {
+        // This item is part of a collapsed group - render as empty placeholder
+        let (item, _existed) = list.item_with_existed(cx, item_id, live_id!(Empty));
+        (item, new_drawn_status)
+    }
 }
 
 

From 1a79bc338bf93b57244d97b52bf65a8b5a73132f Mon Sep 17 00:00:00 2001
From: alanpoon <brightshadowx@gmail.com>
Date: Fri, 10 Oct 2025 20:36:42 +0800
Subject: [PATCH 02/26] summary text

---
 src/home/room_screen.rs | 104 ++++++++++++++++++++++++++++++++++++----
 1 file changed, 96 insertions(+), 8 deletions(-)

diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs
index c1d3ef55..39cf340f 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -1,7 +1,7 @@
 //! A room screen is the UI view that displays a single Room's timeline of events/messages
 //! along with a message input bar at the bottom.
 
-use std::{borrow::Cow, cell::RefCell, collections::BTreeMap, ops::{DerefMut, Range}, sync::Arc};
+use std::{borrow::Cow, cell::RefCell, collections::{BTreeMap, HashMap}, ops::{DerefMut, Range}, sync::Arc};
 
 use bytesize::ByteSize;
 use imbl::Vector;
@@ -206,7 +206,21 @@ live_design! {
 
 
     // An empty view that takes up no space in the portal list.
-    Empty = <View> { }
+    Empty = <View> {
+        content = <Label> {
+            width: Fill,
+            height: Fit
+            padding: { top: 0.0, bottom: 0.0, left: 0.0, right: 0.0 }
+            draw_text: {
+                wrap: Word,
+                text_style: <THEME_FONT_REGULAR>{
+                    font_size: (0),
+                },
+                color: (SMALL_STATE_TEXT_COLOR)
+            }
+            text: ""
+        }
+    }
 
     // The view used for each text-based message event in a room's timeline.
     Message = {{Message}} {
@@ -442,12 +456,49 @@ live_design! {
     SmallStateEvent = <View> {
         width: Fill,
         height: Fit,
-        flow: Right,
+        flow: Down,
         margin: { top: 4.0, bottom: 4.0}
         padding: { top: 1.0, bottom: 1.0, right: 10.0 }
         spacing: 0.0
         cursor: Default
-
+        small_state_header = <View> {
+            width: Fill,
+            height: Fit
+            visible: false
+            padding: { left: 7.0, top: 2.0, bottom: 2.0 }
+            summary_text = <Label> {
+                width: Fill, height: Fit
+                flow: RightWrap,
+                padding: 0,
+                draw_text: {
+                    wrap: Word,
+                    text_style: <THEME_FONT_REGULAR>{
+                        font_size: (SMALL_STATE_FONT_SIZE),
+                    },
+                    color: (SMALL_STATE_TEXT_COLOR)
+                }
+            }
+            // Collapsible button for small state event groups
+            // Shows on the first item of each group to toggle expansion
+            // Text is dynamically updated: ▼ (collapsed) or ▲ (expanded)
+            // collapsible_button = <Button> {
+            //     width: Fit,
+            //     height: Fit,
+            //     margin: { left: 5, right: 5 }
+            //     padding: { left: 4, right: 4, top: 2, bottom: 2 }
+            //     text: "▼"  // Default to collapsed state
+            //     draw_text: {
+            //         text_style: <SMALL_STATE_TEXT_STYLE> {},
+            //         color: #666
+            //     }
+            //     draw_bg: {
+            //         fn pixel(self) -> vec4 {
+            //             let sdf = Sdf2d::viewport(self.pos * self.rect_size);
+            //             return sdf.result
+            //         }
+            //     }
+            // }
+        }
         body = <View> {
             width: Fill,
             height: Fit
@@ -920,10 +971,10 @@ impl Widget for RoomScreen {
                             if range.start == item_id {
                                 // Toggle the group's open/closed state
                                 *open = !*open;
-                                
+                                let omit_first_range = (range.start+1)..range.end;
                                 // Force redraw of all items in this group by clearing their cached drawn status
-                                tl_state.content_drawn_since_last_update.remove(range.clone());
-                                tl_state.profile_drawn_since_last_update.remove(range.clone());
+                                tl_state.content_drawn_since_last_update.remove(omit_first_range.clone());
+                                tl_state.profile_drawn_since_last_update.remove(omit_first_range.clone());
                                 
                                 // Update button text to reflect new state:
                                 // ▲ (up arrow) = expanded/open - items are visible
@@ -4448,6 +4499,34 @@ fn populate_small_state_event(
             let button_text = if expanded { "▲" } else { "▼" };
             item.button(id!(collapsible_button))
                 .set_text(cx, button_text);
+            for (range, _) in small_state_groups.clone() {
+                println!("range {:?} ", range);
+                if range.start == item_id {
+                    let mut same_event_hashmap = HashMap::new();
+                    for entry_id in range {
+                        if let Some((_, widget_ref)) = list.get_item(entry_id) {
+                            let s = widget_ref.label(id!(content)).text();
+                            if let Some(count) = same_event_hashmap.get_mut(&s) {
+                                *count += 1;
+                            } else {
+                                same_event_hashmap.insert(s, 1);
+                            }
+                        }
+                    }
+                    let mut summary_text = String::new();
+                    for (s, count) in same_event_hashmap {
+                        if count > 1 {
+                            summary_text.push_str(&format!("{}", count));
+                        }
+                        summary_text.push_str(&s);
+                        summary_text.push_str(", ");
+                    }
+                    item.view(id!(small_state_header)).set_visible(cx, true);
+                    item.label(id!(small_state_header.summary_text)).set_text(cx, &summary_text);
+                    break;
+                }
+            }
+            
         }
 
         // Render the actual event content
@@ -4464,7 +4543,16 @@ fn populate_small_state_event(
     } else {
         // This item is part of a collapsed group - render as empty placeholder
         let (item, _existed) = list.item_with_existed(cx, item_id, live_id!(Empty));
-        (item, new_drawn_status)
+        event_content.populate_item_content(
+            cx,
+            list,
+            item_id,
+            item,
+            event_tl_item,
+            &username,
+            item_drawn_status,
+            new_drawn_status,
+        )
     }
 }
 

From 688d355c59e34a3083df8d732e6d3e01ef3a7a78 Mon Sep 17 00:00:00 2001
From: alanpoon <brightshadowx@gmail.com>
Date: Sat, 11 Oct 2025 22:32:50 +0800
Subject: [PATCH 03/26] summary_text

---
 src/home/room_screen.rs              | 316 ++++++++++++++++++++++-----
 src/shared/membership_example.rs     |  67 ++++++
 src/shared/membership_transitions.rs | 262 ++++++++++++++++++++++
 src/shared/mod.rs                    |   2 +
 4 files changed, 590 insertions(+), 57 deletions(-)
 create mode 100644 src/shared/membership_example.rs
 create mode 100644 src/shared/membership_transitions.rs

diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs
index 39cf340f..15293120 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -1,7 +1,7 @@
 //! A room screen is the UI view that displays a single Room's timeline of events/messages
 //! along with a message input bar at the bottom.
 
-use std::{borrow::Cow, cell::RefCell, collections::{BTreeMap, HashMap}, ops::{DerefMut, Range}, sync::Arc};
+use std::{any::Any, borrow::Cow, cell::RefCell, collections::{BTreeMap, HashMap}, ops::{DerefMut, Range}, sync::Arc};
 
 use bytesize::ByteSize;
 use imbl::Vector;
@@ -24,13 +24,14 @@ use matrix_sdk::{
 use matrix_sdk_ui::timeline::{
     self, EmbeddedEvent, EncryptedMessage, EventTimelineItem, InReplyToDetails, MemberProfileChange, MsgLikeContent, MsgLikeKind, OtherMessageLike, PollState, RoomMembershipChange, TimelineDetails, TimelineEventItemId, TimelineItem, TimelineItemContent, TimelineItemKind, VirtualTimelineItem
 };
+use ruma::events::{MessageLikeEventContent, MessageLikeEventType};
 
 use crate::{
     app::AppStateAction, avatar_cache, event_preview::{plaintext_body_of_timeline_item, text_preview_of_encrypted_message, text_preview_of_member_profile_change, text_preview_of_other_message_like, text_preview_of_other_state, text_preview_of_redacted_message, text_preview_of_room_membership_change, text_preview_of_timeline_item}, home::{edited_indicator::EditedIndicatorWidgetRefExt, editing_pane::EditingPaneState, link_preview::{LinkPreviewCache, LinkPreviewRef, LinkPreviewWidgetRefExt}, loading_pane::{LoadingPaneState, LoadingPaneWidgetExt}, rooms_list::RoomsListRef, tombstone_footer::TombstoneFooterWidgetExt}, location::init_location_subscriber, media_cache::{MediaCache, MediaCacheEntry}, profile::{
         user_profile::{AvatarState, ShowUserProfileAction, UserProfile, UserProfileAndRoomId, UserProfilePaneInfo, UserProfileSlidingPaneRef, UserProfileSlidingPaneWidgetExt},
         user_profile_cache,
     }, room::typing_notice::TypingNoticeWidgetExt, shared::{
-        avatar::AvatarWidgetRefExt, callout_tooltip::TooltipAction, html_or_plaintext::{HtmlOrPlaintextRef, HtmlOrPlaintextWidgetRefExt, RobrixHtmlLinkAction}, jump_to_bottom_button::{JumpToBottomButtonWidgetExt, UnreadMessageCount}, popup_list::{enqueue_popup_notification, PopupItem, PopupKind}, restore_status_view::RestoreStatusViewWidgetExt, styles::*, text_or_image::{TextOrImageRef, TextOrImageWidgetRefExt}, timestamp::TimestampWidgetRefExt
+        avatar::AvatarWidgetRefExt, callout_tooltip::TooltipAction, html_or_plaintext::{HtmlOrPlaintextRef, HtmlOrPlaintextWidgetRefExt, RobrixHtmlLinkAction}, jump_to_bottom_button::{JumpToBottomButtonWidgetExt, UnreadMessageCount}, membership_transitions::{generate_summary, get_transition_from_membership_change, get_transition_from_other_events, TransitionType, UserEvent}, popup_list::{enqueue_popup_notification, PopupItem, PopupKind}, restore_status_view::RestoreStatusViewWidgetExt, styles::*, text_or_image::{TextOrImageRef, TextOrImageWidgetRefExt}, timestamp::TimestampWidgetRefExt
     }, sliding_sync::{get_client, submit_async_request, take_timeline_endpoints, BackwardsPaginateUntilEventRequest, MatrixRequest, PaginationDirection, TimelineEndpoints, TimelineRequestSender, UserPowerLevels}, utils::{self, room_name_or_id, unix_time_millis_to_datetime, ImageFormat, MEDIA_THUMBNAIL_FORMAT}
 };
 use crate::home::event_reaction_list::ReactionListWidgetRefExt;
@@ -967,7 +968,7 @@ impl Widget for RoomScreen {
                 // Handle collapsible button click in SmallStateEvent
                 if wr.button(id!(collapsible_button)).clicked(actions) {
                     if let Some(tl_state) = &mut self.tl_state {
-                        for (range, open) in &mut tl_state.small_state_groups {
+                        for (range, open, _user_events) in &mut tl_state.small_state_groups {
                             if range.start == item_id {
                                 // Toggle the group's open/closed state
                                 *open = !*open;
@@ -1684,10 +1685,15 @@ impl RoomScreen {
                         let new_len = new_items.len();
                         let shift = new_len as i32 - old_len as i32;
                         // Apply the shift to the small_state_groups.
-                        for (range, _) in &mut tl.small_state_groups {
+                        for (range, _, user_events) in &mut tl.small_state_groups {
                             let new_start = (range.start as i32 + shift).max(0) as usize;
                             let new_end = (range.end as i32 + shift).max(0) as usize;
                             *range = new_start..new_end;
+                            for user_events in user_events.values_mut() {
+                                for user_event in user_events.iter_mut() {
+                                    user_event.index = (user_event.index as i32 + shift).max(0) as usize;
+                                }
+                            }
                         }
                     }
                     tl.items = new_items;
@@ -3020,7 +3026,7 @@ struct TimelineUiState {
     /// A vector of ranges of small state items that are grouped together in the UI.
     /// 
     /// There is a collapsible to the right of the message of the first item in the group. 
-    small_state_groups: Vec<(std::ops::Range<usize>, bool)>
+    small_state_groups: Vec<(std::ops::Range<usize>, bool, HashMap<String, Vec<UserEvent>>)>
 }
 
 #[derive(Default, Debug)]
@@ -4150,17 +4156,67 @@ fn populate_preview_of_timeline_item(
 /// Returns true if the item is a small state event that can be grouped.
 fn is_small_state_event(
     event_tl_item: &EventTimelineItem,
-) -> bool {
-    matches!(
-        event_tl_item.content(),
-        TimelineItemContent::MembershipChange(_) |
-        TimelineItemContent::ProfileChange(_) |
-        TimelineItemContent::OtherState(_) |
+) -> (bool, TransitionType) {
+    match event_tl_item.content() {
+        TimelineItemContent::MembershipChange(change) => (true, change.change().map(
+            |f| get_transition_from_membership_change(&f)
+            ).unwrap_or_default()
+        ),
+        TimelineItemContent::ProfileChange(change) => {
+            let transition_type = if let Some(_) = change.avatar_url_change() {
+                TransitionType::ChangedAvatar
+            } else if let Some(_) = change.displayname_change() {
+                TransitionType::ChangedName
+            } else {
+                TransitionType::NoChange
+            };
+            (true, transition_type)
+        }
+        TimelineItemContent::OtherState(other_state) => (true, get_transition_from_other_events(other_state.content(), other_state.state_key())),
         TimelineItemContent::MsgLike(MsgLikeContent {
-            kind: MsgLikeKind::Poll(_) | MsgLikeKind::Redacted | MsgLikeKind::UnableToDecrypt(_),
+            kind: MsgLikeKind::Poll(_),
             ..
-        })
-    )
+        }) => (true, TransitionType::NoChange),
+        TimelineItemContent::MsgLike(MsgLikeContent {
+            kind: MsgLikeKind::Redacted,
+            ..
+        }) => (true, TransitionType::MessageRemoved),
+        TimelineItemContent::MsgLike(MsgLikeContent {
+            kind: MsgLikeKind::UnableToDecrypt(_),
+            ..
+        }) => (true, TransitionType::UnableToDecrypt),
+        _ => {
+            (false, TransitionType::NoChange)
+        }
+    }
+    // matches!(
+    //     event_tl_item.content(),
+    //     TimelineItemContent::MembershipChange(_) |
+    //     TimelineItemContent::ProfileChange(_) |
+    //     TimelineItemContent::OtherState(_) |
+    //     TimelineItemContent::MsgLike(MsgLikeContent {
+    //         kind: MsgLikeKind::Poll(_) | MsgLikeKind::Redacted | MsgLikeKind::UnableToDecrypt(_),
+    //         ..
+    //     })
+    // )
+}
+
+fn append_user_event(index: usize, user_id: &UserId, username: String, transition: TransitionType, user_events: &mut HashMap<String, Vec<UserEvent>>) {
+    let user_event = UserEvent{
+        user_id: user_id.to_string(),
+        display_name: username.clone(),
+        transition,
+        index,
+    };
+    println!("append_user_event: index: {}, user_id: {}, username: {}, transition: {:?}", index, user_id, username, transition);
+    if let Some(mut events) = user_events.get_mut(&user_id.to_string()) {
+        println!("append_user_event: events: {:?}", events);
+        if events.iter().filter(|user_event| user_event.index == index).count() == 0 {
+            events.push(user_event);
+        }
+    } else {
+        user_events.insert(user_id.to_string(), vec![user_event]);
+    }
 }
 
 /// Dynamically updates small state groups as timeline items are processed.
@@ -4169,54 +4225,61 @@ fn is_small_state_event(
 /// Returns a tuple whether to display the message, and whether to display the collapsible button and whether collapsible list is expanded.
 fn update_small_state_groups_for_item(
     item_id: usize,
+    username: String,
     current_item: &EventTimelineItem,
     previous_item: Option<&Arc<TimelineItem>>,
     next_item: Option<&Arc<TimelineItem>>,
-    small_state_groups: &mut Vec<(std::ops::Range<usize>, bool)>,
+    small_state_groups: &mut Vec<(std::ops::Range<usize>, bool, HashMap<String, Vec<UserEvent>>)>,
 ) -> (bool, bool, bool) {
-    let current_item_is_small_state = is_small_state_event(current_item);
-
+    let (current_item_is_small_state, transition) = is_small_state_event(current_item);
+    //println!("update_small_state_groups_for_item: item_id: {}, transition_type: {:?}, current_item_is_small_state: {}", item_id, transition_type, current_item_is_small_state);
     if !current_item_is_small_state {
         return (true, false, false); // Not a small state event, draw as individual item, no debug button
     }
 
     // check if the next item (item_id + 1) is a small state event to continue grouping
-    let next_item_is_small_state = next_item
+    let (next_item_is_small_state, _) = next_item
         .and_then(|timeline_item| match timeline_item.kind() {
             TimelineItemKind::Event(event_tl_item) => Some(event_tl_item),
             _ => None,
         })
         .map(is_small_state_event)
-        .unwrap_or(false);
-    let previous_item_is_small_state = previous_item
+        .unwrap_or((false, TransitionType::NoChange));
+    let (previous_item_is_small_state, _) = previous_item
         .and_then(|timeline_item| match timeline_item.kind() {
             TimelineItemKind::Event(event_tl_item) => Some(event_tl_item),
             _ => None,
         })
         .map(is_small_state_event)
-        .unwrap_or(false);
+        .unwrap_or((false, TransitionType::NoChange));
     if !previous_item_is_small_state && !next_item_is_small_state {
         return (true, false, false); // Isolated small state event, no debug button
     }
 
     // Check if this item is already part of an existing group or can extend one
-    for (range, is_open) in small_state_groups.iter_mut() {
+    for (range, is_open, user_events) in small_state_groups.iter_mut() {
+        
         if range.start == item_id {
+            append_user_event(item_id, &current_item.sender(), username, transition, user_events);
             return (true, true, *is_open); // Start of group, show debug button
         }
         if range.contains(&item_id) {
+            append_user_event(item_id, &current_item.sender(), username, transition, user_events);
             return (*is_open, false, *is_open); // Item is in group but not at start, no debug button
         }
         // Since we're iterating backwards (from highest to lowest item_id),
         if range.start == item_id + 1 {
             // Extend this group backwards to include current item
             *range = item_id..range.end;
+            append_user_event(item_id, &current_item.sender(), username, transition, user_events);
             return (*is_open, false, false); // Extended group, no debug button for this item
         }
     }
     if next_item_is_small_state {
-        // Plus to include the next item into the group.
-        small_state_groups.push((item_id..(item_id + 2), false));
+        let mut user_events = HashMap::new();
+        append_user_event(item_id, &current_item.sender(), username, transition, &mut user_events);
+        // Plus 2 to include the next item into the group.
+        small_state_groups.push((item_id..(item_id + 2), false, user_events));
     }
     (false, false, false) // Return collapsed state, no debug button
 }
@@ -4249,6 +4312,18 @@ trait SmallStateEventContent {
         item_drawn_status: ItemDrawnStatus,
         new_drawn_status: ItemDrawnStatus,
     ) -> (WidgetRef, ItemDrawnStatus);
+
+    fn populate_transition_type(
+        &self,
+        cx: &mut Cx,
+        list: &mut PortalList,
+        item_id: usize,
+        item: WidgetRef,
+        event_tl_item: &EventTimelineItem,
+        username: &str,
+        item_drawn_status: ItemDrawnStatus,
+        new_drawn_status: ItemDrawnStatus,
+    ) -> (WidgetRef, ItemDrawnStatus);
 }
 
 /// An empty marker struct used for populating redacted messages.
@@ -4277,6 +4352,19 @@ impl SmallStateEventContent for RedactedMessageEventMarker {
         new_drawn_status.content_drawn = true;
         (item, new_drawn_status)
     }
+    fn populate_transition_type(
+        &self,
+        cx: &mut Cx,
+        list: &mut PortalList,
+        item_id: usize,
+        item: WidgetRef,
+        _event_tl_item: &EventTimelineItem,
+        username: &str,
+        _item_drawn_status: ItemDrawnStatus,
+        mut new_drawn_status: ItemDrawnStatus
+        ) -> (WidgetRef, ItemDrawnStatus) {
+        (item, new_drawn_status)
+    }
 }
 
 // For unable to decrypt messages.
@@ -4299,6 +4387,19 @@ impl SmallStateEventContent for EncryptedMessage {
         new_drawn_status.content_drawn = true;
         (item, new_drawn_status)
     }
+    fn populate_transition_type(
+        &self,
+        cx: &mut Cx,
+        _list: &mut PortalList,
+        _item_id: usize,
+        item: WidgetRef,
+        _event_tl_item: &EventTimelineItem,
+        username: &str,
+        _item_drawn_status: ItemDrawnStatus,
+        mut new_drawn_status: ItemDrawnStatus,
+    ) -> (WidgetRef, ItemDrawnStatus) {
+        (item, new_drawn_status)
+    }
 }
 
 // For other message-like content (custom message-like events).
@@ -4321,6 +4422,19 @@ impl SmallStateEventContent for OtherMessageLike {
         new_drawn_status.content_drawn = true;
         (item, new_drawn_status)
     }
+    fn populate_transition_type(
+        &self,
+        cx: &mut Cx,
+        _list: &mut PortalList,
+        _item_id: usize,
+        item: WidgetRef,
+        _event_tl_item: &EventTimelineItem,
+        username: &str,
+        _item_drawn_status: ItemDrawnStatus,
+        mut new_drawn_status: ItemDrawnStatus,
+    ) -> (WidgetRef, ItemDrawnStatus) {
+        (item, new_drawn_status)
+    }
 }
 
 // TODO: once we properly display polls, we should remove this,
@@ -4344,6 +4458,19 @@ impl SmallStateEventContent for PollState {
         new_drawn_status.content_drawn = true;
         (item, new_drawn_status)
     }
+    fn populate_transition_type(
+        &self,
+        cx: &mut Cx,
+        _list: &mut PortalList,
+        _item_id: usize,
+        item: WidgetRef,
+        _event_tl_item: &EventTimelineItem,
+        username: &str,
+        _item_drawn_status: ItemDrawnStatus,
+        mut new_drawn_status: ItemDrawnStatus,
+    ) -> (WidgetRef, ItemDrawnStatus) {
+        (item, new_drawn_status)
+    }
 }
 
 impl SmallStateEventContent for timeline::OtherState {
@@ -4370,6 +4497,22 @@ impl SmallStateEventContent for timeline::OtherState {
         };
         (item, new_drawn_status)
     }
+
+    fn populate_transition_type(
+        &self,
+        cx: &mut Cx,
+        _list: &mut PortalList,
+        _item_id: usize,
+        item: WidgetRef,
+        _event_tl_item: &EventTimelineItem,
+        username: &str,
+        _item_drawn_status: ItemDrawnStatus,
+        mut new_drawn_status: ItemDrawnStatus,
+    ) -> (WidgetRef, ItemDrawnStatus) {
+        
+        let transition_type = get_transition_from_other_events(self.content(), self.state_key());
+        (item, new_drawn_status)
+    }
 }
 
 impl SmallStateEventContent for MemberProfileChange {
@@ -4392,6 +4535,35 @@ impl SmallStateEventContent for MemberProfileChange {
         new_drawn_status.content_drawn = true;
         (item, new_drawn_status)
     }
+    // fn transition_type(&self) -> TransitionType {
+    //     if let Some(_) = self.avatar_url_change() {
+    //         TransitionType::ChangedAvatar
+    //     } else if let Some(_) = self.displayname_change() {
+    //         TransitionType::ChangedName
+    //     } else {
+    //         TransitionType::NoChange
+    //     }
+    // }
+    fn populate_transition_type(
+        &self,
+        cx: &mut Cx,
+        _list: &mut PortalList,
+        _item_id: usize,
+        item: WidgetRef,
+        _event_tl_item: &EventTimelineItem,
+        username: &str,
+        _item_drawn_status: ItemDrawnStatus,
+        mut new_drawn_status: ItemDrawnStatus,
+    ) -> (WidgetRef, ItemDrawnStatus) {
+        let transition_type = if let Some(_) = self.avatar_url_change() {
+            TransitionType::ChangedAvatar
+        } else if let Some(_) = self.displayname_change() {
+            TransitionType::ChangedName
+        } else {
+            TransitionType::NoChange
+        };
+        (item, new_drawn_status)
+    }
 }
 
 impl SmallStateEventContent for RoomMembershipChange {
@@ -4419,6 +4591,25 @@ impl SmallStateEventContent for RoomMembershipChange {
         new_drawn_status.content_drawn = true;
         (item, new_drawn_status)
     }
+
+    fn populate_transition_type(
+        &self,
+        cx: &mut Cx,
+        _list: &mut PortalList,
+        _item_id: usize,
+        item: WidgetRef,
+        _event_tl_item: &EventTimelineItem,
+        username: &str,
+        _item_drawn_status: ItemDrawnStatus,
+        mut new_drawn_status: ItemDrawnStatus,
+    ) -> (WidgetRef, ItemDrawnStatus) {
+        let transition_type = if let Some(change) = self.change() {
+            get_transition_from_membership_change(&change)
+        } else {
+            TransitionType::HiddenEvent
+        };
+        (item, new_drawn_status)
+    }
 }
 
 /// Creates, populates, and adds a SmallStateEvent liveview widget to the given `PortalList`
@@ -4436,7 +4627,7 @@ fn populate_small_state_event(
     next_event: Option<&Arc<TimelineItem>>,
     event_content: &impl SmallStateEventContent,
     item_drawn_status: ItemDrawnStatus,
-    small_state_groups: &mut Vec<(std::ops::Range<usize>, bool)>,
+    small_state_groups: &mut Vec<(std::ops::Range<usize>, bool, HashMap<String, Vec<UserEvent>>)>,
 ) -> (WidgetRef, ItemDrawnStatus) {
     let mut new_drawn_status = item_drawn_status;
     let (item, existed) = list.item_with_existed(cx, item_id, live_id!(SmallStateEvent));
@@ -4480,6 +4671,7 @@ fn populate_small_state_event(
     // - expanded: current expansion state of the group (for button text)
     let (opened, show_collapsible_button, expanded) = update_small_state_groups_for_item(
         item_id,
+        username.clone(),
         event_tl_item,
         prev_event,
         next_event,
@@ -4499,34 +4691,43 @@ fn populate_small_state_event(
             let button_text = if expanded { "▲" } else { "▼" };
             item.button(id!(collapsible_button))
                 .set_text(cx, button_text);
-            for (range, _) in small_state_groups.clone() {
-                println!("range {:?} ", range);
+            for (range, _, user_events) in small_state_groups.clone() {
                 if range.start == item_id {
-                    let mut same_event_hashmap = HashMap::new();
-                    for entry_id in range {
-                        if let Some((_, widget_ref)) = list.get_item(entry_id) {
-                            let s = widget_ref.label(id!(content)).text();
-                            if let Some(count) = same_event_hashmap.get_mut(&s) {
-                                *count += 1;
-                            } else {
-                                same_event_hashmap.insert(s, 1);
-                            }
-                        }
-                    }
-                    let mut summary_text = String::new();
-                    for (s, count) in same_event_hashmap {
-                        if count > 1 {
-                            summary_text.push_str(&format!("{}", count));
-                        }
-                        summary_text.push_str(&s);
-                        summary_text.push_str(", ");
-                    }
+                    
+                    let summary_text = generate_summary(&user_events, 4);
+                    println!("range {:?} user_events {:?} summary_text {:?}", range, user_events, summary_text);
                     item.view(id!(small_state_header)).set_visible(cx, true);
                     item.label(id!(small_state_header.summary_text)).set_text(cx, &summary_text);
                     break;
                 }
             }
-            
+            // for (range, _) in small_state_groups.clone() {
+            //     println!("range {:?} ", range);
+            //     if range.start == item_id {
+            //         let mut same_event_hashmap = HashMap::new();
+            //         for entry_id in range {
+            //             if let Some((_, widget_ref)) = list.get_item(entry_id) {
+            //                 let s = widget_ref.label(id!(content)).text();
+            //                 if let Some(count) = same_event_hashmap.get_mut(&s) {
+            //                     *count += 1;
+            //                 } else {
+            //                     same_event_hashmap.insert(s, 1);
+            //                 }
+            //             }
+            //         }
+            //         let mut summary_text = String::new();
+            //         for (s, count) in same_event_hashmap {
+            //             if count > 1 {
+            //                 summary_text.push_str(&format!("{}", count));
+            //             }
+            //             summary_text.push_str(&s);
+            //             summary_text.push_str(", ");
+            //         }
+            //         item.view(id!(small_state_header)).set_visible(cx, true);
+            //         item.label(id!(small_state_header.summary_text)).set_text(cx, &summary_text);
+            //         break;
+            //     }
+            // }
         }
 
         // Render the actual event content
@@ -4543,16 +4744,17 @@ fn populate_small_state_event(
     } else {
         // This item is part of a collapsed group - render as empty placeholder
         let (item, _existed) = list.item_with_existed(cx, item_id, live_id!(Empty));
-        event_content.populate_item_content(
-            cx,
-            list,
-            item_id,
-            item,
-            event_tl_item,
-            &username,
-            item_drawn_status,
-            new_drawn_status,
-        )
+        // event_content.populate_transition_type(
+        //     cx,
+        //     list,
+        //     item_id,
+        //     item,
+        //     event_tl_item,
+        //     &username,
+        //     item_drawn_status,
+        //     new_drawn_status,
+        // )
+        (item, new_drawn_status)
     }
 }
 
diff --git a/src/shared/membership_example.rs b/src/shared/membership_example.rs
new file mode 100644
index 00000000..3bac2139
--- /dev/null
+++ b/src/shared/membership_example.rs
@@ -0,0 +1,67 @@
+use std::collections::HashMap;
+use crate::shared::membership_transitions::{generate_summary, UserEvent, TransitionType};
+
+/// Example function showing how to use the membership_transitions module
+/// with the room_screen summary_text functionality.
+pub fn example_usage_for_summary_text() -> String {
+    // This is an example of how you would collect UserEvent data
+    // from actual Matrix timeline events and generate a summary
+    let mut user_events: HashMap<String, Vec<UserEvent>> = HashMap::new();
+
+    // Example: Alice joined and then left
+    user_events.insert("alice".into(), vec![
+        UserEvent { 
+            user_id: "alice".into(), 
+            display_name: "Alice".into(), 
+            transition: TransitionType::Joined, 
+            index: 0 
+        },
+        UserEvent { 
+            user_id: "alice".into(), 
+            display_name: "Alice".into(), 
+            transition: TransitionType::Left, 
+            index: 1 
+        },
+    ]);
+
+    // Example: Bob changed avatar
+    user_events.insert("bob".into(), vec![
+        UserEvent { 
+            user_id: "bob".into(), 
+            display_name: "Bob".into(), 
+            transition: TransitionType::ChangedAvatar, 
+            index: 2 
+        },
+    ]);
+
+    // Example: Charlie joined
+    user_events.insert("charlie".into(), vec![
+        UserEvent { 
+            user_id: "charlie".into(), 
+            display_name: "Charlie".into(), 
+            transition: TransitionType::Joined, 
+            index: 3 
+        },
+    ]);
+
+    // Generate the summary text using the membership_transitions module
+    // The second parameter (2) is the max number of names to show before "and N others"
+    generate_summary(&user_events, 2)
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn test_example_summary() {
+        let summary = example_usage_for_summary_text();
+        
+        // The summary should contain the users and their actions
+        assert!(summary.contains("Alice") || summary.contains("joined and left"));
+        assert!(summary.contains("Bob") || summary.contains("changed avatar"));
+        assert!(summary.contains("Charlie") || summary.contains("joined"));
+        
+        println!("Generated summary: {}", summary);
+    }
+}
\ No newline at end of file
diff --git a/src/shared/membership_transitions.rs b/src/shared/membership_transitions.rs
new file mode 100644
index 00000000..f9dcf346
--- /dev/null
+++ b/src/shared/membership_transitions.rs
@@ -0,0 +1,262 @@
+use std::collections::HashMap;
+use matrix_sdk_ui::timeline::{AnyOtherFullStateEventContent, MembershipChange, RoomMembershipChange};
+
+#[derive(Default, Debug, Clone, Copy, PartialEq, Eq, Hash)]
+pub enum TransitionType {
+    CreateRoom,
+    Joined,
+    Left,
+    JoinedAndLeft,
+    LeftAndJoined,
+    InviteReject,
+    InviteWithdrawal,
+    Invited,
+    Banned,
+    Unbanned,
+    Kicked,
+    ChangedName,
+    ChangedAvatar,
+    #[default]
+    NoChange,
+    ServerAcl,
+    ChangedPins,
+    MessageRemoved,
+    UnableToDecrypt,
+    HiddenEvent,
+}
+
+#[derive(Debug, Clone)]
+pub struct UserEvent {
+    pub user_id: String,
+    pub display_name: String,
+    pub transition: TransitionType,
+    pub index: usize,
+}
+
+/// Canonicalize neighbouring transitions, e.g. [Joined, Left] -> [JoinedAndLeft]
+fn canonicalize_transitions(transitions: &[TransitionType]) -> Vec<TransitionType> {
+    let mut res = Vec::new();
+    let mut i = 0;
+    while i < transitions.len() {
+        let t = transitions[i];
+        if i + 1 < transitions.len() {
+            let t2 = transitions[i + 1];
+            match (t, t2) {
+                (TransitionType::Joined, TransitionType::Left) => {
+                    res.push(TransitionType::JoinedAndLeft);
+                    i += 2;
+                    continue;
+                }
+                (TransitionType::Left, TransitionType::Joined) => {
+                    res.push(TransitionType::LeftAndJoined);
+                    i += 2;
+                    continue;
+                }
+                _ => {}
+            }
+        }
+        res.push(t);
+        i += 1;
+    }
+    res
+}
+
+/// Combine repeated transitions (e.g. [JoinedAndLeft, JoinedAndLeft] -> 2×JoinedAndLeft)
+fn coalesce_repeated_transitions(transitions: &[TransitionType]) -> Vec<(TransitionType, usize)> {
+    let mut res = Vec::new();
+    for &t in transitions {
+        if let Some((last, count)) = res.last_mut() {
+            if *last == t {
+                *count += 1;
+                continue;
+            }
+        }
+        res.push((t, 1));
+    }
+    res
+}
+
+/// Determine the textual description for a transition
+fn describe_transition(t: TransitionType, user_count: usize, repeats: usize) -> String {
+    let plural = user_count > 1;
+    let count_str = if repeats > 1 {
+        format!(" (×{})", repeats)
+    } else {
+        "".to_string()
+    };
+    match t {
+        TransitionType::CreateRoom => format!("created and configured the room"),
+        TransitionType::Joined => {
+            if plural { format!("joined{}", count_str) } else { format!("joined{}", count_str) }
+        }
+        TransitionType::Left => {
+            if plural { format!("left{}", count_str) } else { format!("left{}", count_str) }
+        }
+        TransitionType::JoinedAndLeft => format!("joined and left{}", count_str),
+        TransitionType::LeftAndJoined => format!("left and rejoined{}", count_str),
+        TransitionType::ChangedName => format!("changed name{}", count_str),
+        TransitionType::ChangedAvatar => format!("changed avatar{}", count_str),
+        TransitionType::Invited => format!("was invited{}", count_str),
+        TransitionType::Banned => format!("was banned{}", count_str),
+        TransitionType::Unbanned => format!("was unbanned{}", count_str),
+        TransitionType::InviteReject => format!("rejected invite{}", count_str),
+        TransitionType::InviteWithdrawal => format!("invite withdrawn{}", count_str),
+        TransitionType::Kicked => format!("was kicked{}", count_str),
+        TransitionType::ServerAcl => format!("updated server ACLs{}", count_str),
+        TransitionType::ChangedPins => format!("changed pinned messages{}", count_str),
+        TransitionType::MessageRemoved => format!("removed a message{}", count_str),
+        TransitionType::HiddenEvent => format!("did a hidden event{}", count_str),
+        TransitionType::NoChange => format!("made no changes{}", count_str),
+        TransitionType::UnableToDecrypt => format!("decryption failed{}", count_str),
+    }
+}
+
+/// Produce an English-readable name list, with "and N others"
+fn format_name_list(names: &[String], max_names: usize) -> String {
+    match names.len() {
+        0 => "".into(),
+        1 => names[0].clone(),
+        2 => format!("{} and {}", names[0], names[1]),
+        n if n <= max_names => names.join(", "),
+        n => format!("{}, and {} others", names[..max_names].join(", "), n - max_names),
+    }
+}
+
+/// Convert Matrix membership change → transition type
+pub fn get_transition_from_membership_change(change: &MembershipChange) -> TransitionType {
+    use matrix_sdk_ui::timeline::MembershipChange;
+    match change {
+        MembershipChange::Joined => TransitionType::Joined,
+        MembershipChange::Left => TransitionType::Left,
+        MembershipChange::Banned => TransitionType::Banned,
+        MembershipChange::Unbanned => TransitionType::Unbanned,
+        MembershipChange::Kicked => TransitionType::Kicked,
+        MembershipChange::Invited => TransitionType::Invited,
+        MembershipChange::KickedAndBanned => TransitionType::Banned,
+        MembershipChange::InvitationAccepted => TransitionType::Joined,
+        MembershipChange::InvitationRejected => TransitionType::InviteReject,
+        MembershipChange::InvitationRevoked => TransitionType::InviteWithdrawal,
+        MembershipChange::Knocked => TransitionType::HiddenEvent,
+        MembershipChange::KnockAccepted => TransitionType::Joined,
+        MembershipChange::KnockRetracted => TransitionType::HiddenEvent,
+        MembershipChange::None => TransitionType::NoChange,
+        MembershipChange::Error => TransitionType::NoChange,
+        MembershipChange::NotImplemented => TransitionType::NoChange,
+        MembershipChange::KnockDenied => TransitionType::HiddenEvent,
+    }
+}
+
+/// Convert other room state events → transition type
+pub fn get_transition_from_other_events(content: &AnyOtherFullStateEventContent, _state_key: &str) -> TransitionType {
+    match content {
+        AnyOtherFullStateEventContent::RoomServerAcl(_) => TransitionType::ServerAcl,
+        AnyOtherFullStateEventContent::RoomPinnedEvents(_) => TransitionType::ChangedPins,
+        AnyOtherFullStateEventContent::RoomName(_) => TransitionType::NoChange,
+        AnyOtherFullStateEventContent::RoomTopic(_) => TransitionType::NoChange,
+        AnyOtherFullStateEventContent::RoomAvatar(_) => TransitionType::NoChange,
+        AnyOtherFullStateEventContent::RoomCanonicalAlias(_) => TransitionType::NoChange,
+        AnyOtherFullStateEventContent::RoomCreate(_) => TransitionType::CreateRoom,
+        AnyOtherFullStateEventContent::RoomEncryption(_) => TransitionType::HiddenEvent,
+        AnyOtherFullStateEventContent::RoomGuestAccess(_) => TransitionType::HiddenEvent,
+        AnyOtherFullStateEventContent::RoomHistoryVisibility(_) => TransitionType::HiddenEvent,
+        AnyOtherFullStateEventContent::RoomJoinRules(_) => TransitionType::HiddenEvent,
+        AnyOtherFullStateEventContent::RoomPowerLevels(_) => TransitionType::HiddenEvent,
+        AnyOtherFullStateEventContent::RoomThirdPartyInvite(_) => TransitionType::HiddenEvent,
+        AnyOtherFullStateEventContent::RoomTombstone(_) => TransitionType::HiddenEvent,
+        AnyOtherFullStateEventContent::RoomAliases(_) => TransitionType::HiddenEvent,
+        AnyOtherFullStateEventContent::SpaceChild(_) => TransitionType::HiddenEvent,
+        AnyOtherFullStateEventContent::SpaceParent(_) => TransitionType::HiddenEvent,
+        AnyOtherFullStateEventContent::PolicyRuleRoom(_) => TransitionType::HiddenEvent,
+        AnyOtherFullStateEventContent::PolicyRuleServer(_) => TransitionType::HiddenEvent,
+        AnyOtherFullStateEventContent::PolicyRuleUser(_) => TransitionType::HiddenEvent,
+        AnyOtherFullStateEventContent::_Custom { .. } => TransitionType::HiddenEvent,
+    }
+}
+
+/// Summarize all user transitions into a single string
+pub fn generate_summary(
+    user_events: &HashMap<String, Vec<UserEvent>>,
+    summary_length: usize,
+) -> String {
+    // Aggregate by transition sequence
+    let mut aggregates: HashMap<String, Vec<String>> = HashMap::new();
+    for (user_id, events) in user_events {
+        let mut transitions: Vec<_> = events.iter().map(|e| e.transition).collect();
+        transitions.reverse();
+        
+        // Filter out Joined transitions for room creators
+        if transitions.contains(&TransitionType::CreateRoom) {
+            transitions.retain(|&t| t != TransitionType::Joined);
+        }
+        
+        let canonical = canonicalize_transitions(&transitions);
+        let sequence_key = canonical.iter().map(|t| format!("{:?}", t)).collect::<Vec<_>>().join(",");
+
+        let name = events.first().map(|e| e.display_name.clone()).unwrap_or(user_id.clone());
+        aggregates.entry(sequence_key).or_default().push(name);
+    }
+
+    // Order by first appearance (optional; just lexical sort for now)
+    let mut sequences: Vec<_> = aggregates.into_iter().collect();
+    sequences.sort_by_key(|(k, _)| k.clone());
+
+    // Build text
+    let mut summary_parts = Vec::new();
+    for (seq, names) in sequences {
+        let transitions: Vec<_> = seq
+            .split(',')
+            .filter_map(|s| match s.trim() {
+                "CreateRoom" => Some(TransitionType::CreateRoom),
+                "Joined" => Some(TransitionType::Joined),
+                "Left" => Some(TransitionType::Left),
+                "JoinedAndLeft" => Some(TransitionType::JoinedAndLeft),
+                "LeftAndJoined" => Some(TransitionType::LeftAndJoined),
+                "ChangedName" => Some(TransitionType::ChangedName),
+                "ChangedAvatar" => Some(TransitionType::ChangedAvatar),
+                _ => None,
+            })
+            .collect();
+
+        let canonical = canonicalize_transitions(&transitions);
+        let coalesced = coalesce_repeated_transitions(&canonical);
+
+        let descs: Vec<String> = coalesced
+            .into_iter()
+            .map(|(t, repeats)| describe_transition(t, names.len(), repeats))
+            .collect();
+
+        let name_list = format_name_list(&names, summary_length);
+        let transition_text = descs.join(", ");
+        summary_parts.push(format!("{} {}", name_list, transition_text));
+    }
+
+    summary_parts.join(", ")
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn test_generate_summary() {
+        let mut user_events: HashMap<String, Vec<UserEvent>> = HashMap::new();
+
+        user_events.insert("alice".into(), vec![
+            UserEvent { user_id: "alice".into(), display_name: "Alice".into(), transition: TransitionType::Joined, index: 0 },
+            UserEvent { user_id: "alice".into(), display_name: "Alice".into(), transition: TransitionType::Left, index: 1 },
+        ]);
+
+        user_events.insert("bob".into(), vec![
+            UserEvent { user_id: "bob".into(), display_name: "Bob".into(), transition: TransitionType::ChangedAvatar, index: 2 },
+        ]);
+
+        user_events.insert("charlie".into(), vec![
+            UserEvent { user_id: "charlie".into(), display_name: "Charlie".into(), transition: TransitionType::Joined, index: 3 },
+        ]);
+
+        let summary = generate_summary(&user_events, 2);
+        assert!(summary.contains("Alice"));
+        assert!(summary.contains("Bob"));
+        assert!(summary.contains("Charlie"));
+    }
+}
\ No newline at end of file
diff --git a/src/shared/mod.rs b/src/shared/mod.rs
index 044d49ee..8fc90b06 100644
--- a/src/shared/mod.rs
+++ b/src/shared/mod.rs
@@ -8,6 +8,8 @@ pub mod helpers;
 pub mod html_or_plaintext;
 pub mod icon_button;
 pub mod jump_to_bottom_button;
+pub mod membership_transitions;
+pub mod membership_example;
 pub mod mentionable_text_input;
 pub mod popup_list;
 pub mod room_filter_input_bar;

From faaa5f24256449d8c526279d8f0cc0bc77919b1d Mon Sep 17 00:00:00 2001
From: alanpoon <brightshadowx@gmail.com>
Date: Mon, 13 Oct 2025 16:38:42 +0800
Subject: [PATCH 04/26] add debug

---
 src/home/room_screen.rs              | 131 +++++++++++++++------------
 src/shared/membership_example.rs     |  67 --------------
 src/shared/membership_transitions.rs |  99 +++++++++++++-------
 src/shared/mod.rs                    |   1 -
 4 files changed, 140 insertions(+), 158 deletions(-)
 delete mode 100644 src/shared/membership_example.rs

diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs
index 15293120..b8b04197 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -1,7 +1,7 @@
 //! A room screen is the UI view that displays a single Room's timeline of events/messages
 //! along with a message input bar at the bottom.
 
-use std::{any::Any, borrow::Cow, cell::RefCell, collections::{BTreeMap, HashMap}, ops::{DerefMut, Range}, sync::Arc};
+use std::{borrow::Cow, cell::RefCell, collections::{BTreeMap, HashMap}, ops::{DerefMut, Range}, sync::Arc};
 
 use bytesize::ByteSize;
 use imbl::Vector;
@@ -24,14 +24,13 @@ use matrix_sdk::{
 use matrix_sdk_ui::timeline::{
     self, EmbeddedEvent, EncryptedMessage, EventTimelineItem, InReplyToDetails, MemberProfileChange, MsgLikeContent, MsgLikeKind, OtherMessageLike, PollState, RoomMembershipChange, TimelineDetails, TimelineEventItemId, TimelineItem, TimelineItemContent, TimelineItemKind, VirtualTimelineItem
 };
-use ruma::events::{MessageLikeEventContent, MessageLikeEventType};
 
 use crate::{
     app::AppStateAction, avatar_cache, event_preview::{plaintext_body_of_timeline_item, text_preview_of_encrypted_message, text_preview_of_member_profile_change, text_preview_of_other_message_like, text_preview_of_other_state, text_preview_of_redacted_message, text_preview_of_room_membership_change, text_preview_of_timeline_item}, home::{edited_indicator::EditedIndicatorWidgetRefExt, editing_pane::EditingPaneState, link_preview::{LinkPreviewCache, LinkPreviewRef, LinkPreviewWidgetRefExt}, loading_pane::{LoadingPaneState, LoadingPaneWidgetExt}, rooms_list::RoomsListRef, tombstone_footer::TombstoneFooterWidgetExt}, location::init_location_subscriber, media_cache::{MediaCache, MediaCacheEntry}, profile::{
         user_profile::{AvatarState, ShowUserProfileAction, UserProfile, UserProfileAndRoomId, UserProfilePaneInfo, UserProfileSlidingPaneRef, UserProfileSlidingPaneWidgetExt},
         user_profile_cache,
     }, room::typing_notice::TypingNoticeWidgetExt, shared::{
-        avatar::AvatarWidgetRefExt, callout_tooltip::TooltipAction, html_or_plaintext::{HtmlOrPlaintextRef, HtmlOrPlaintextWidgetRefExt, RobrixHtmlLinkAction}, jump_to_bottom_button::{JumpToBottomButtonWidgetExt, UnreadMessageCount}, membership_transitions::{generate_summary, get_transition_from_membership_change, get_transition_from_other_events, TransitionType, UserEvent}, popup_list::{enqueue_popup_notification, PopupItem, PopupKind}, restore_status_view::RestoreStatusViewWidgetExt, styles::*, text_or_image::{TextOrImageRef, TextOrImageWidgetRefExt}, timestamp::TimestampWidgetRefExt
+        avatar::AvatarWidgetRefExt, callout_tooltip::TooltipAction, html_or_plaintext::{HtmlOrPlaintextRef, HtmlOrPlaintextWidgetRefExt, RobrixHtmlLinkAction}, jump_to_bottom_button::{JumpToBottomButtonWidgetExt, UnreadMessageCount}, membership_transitions::{append_user_event, generate_summary, get_transition_from_membership_change, get_transition_from_other_events, TransitionType, UserEvent}, popup_list::{enqueue_popup_notification, PopupItem, PopupKind}, restore_status_view::RestoreStatusViewWidgetExt, styles::*, text_or_image::{TextOrImageRef, TextOrImageWidgetRefExt}, timestamp::TimestampWidgetRefExt
     }, sliding_sync::{get_client, submit_async_request, take_timeline_endpoints, BackwardsPaginateUntilEventRequest, MatrixRequest, PaginationDirection, TimelineEndpoints, TimelineRequestSender, UserPowerLevels}, utils::{self, room_name_or_id, unix_time_millis_to_datetime, ImageFormat, MEDIA_THUMBNAIL_FORMAT}
 };
 use crate::home::event_reaction_list::ReactionListWidgetRefExt;
@@ -215,7 +214,7 @@ live_design! {
             draw_text: {
                 wrap: Word,
                 text_style: <THEME_FONT_REGULAR>{
-                    font_size: (0),
+                    font_size: (10),
                 },
                 color: (SMALL_STATE_TEXT_COLOR)
             }
@@ -1689,11 +1688,12 @@ impl RoomScreen {
                             let new_start = (range.start as i32 + shift).max(0) as usize;
                             let new_end = (range.end as i32 + shift).max(0) as usize;
                             *range = new_start..new_end;
-                            for user_events in user_events.values_mut() {
-                                for user_event in user_events.iter_mut() {
-                                    user_event.index = (user_event.index as i32 + shift).max(0) as usize;
-                                }
-                            }
+                            user_events.clear();
+                            // for (_, user_events_list) in user_events.iter_mut() {
+                            //     for user_event in user_events_list.iter_mut() {
+                            //         user_event.index = (user_event.index as i32 + shift).max(0) as usize;
+                            //     }
+                            // }
                         }
                     }
                     tl.items = new_items;
@@ -3026,7 +3026,7 @@ struct TimelineUiState {
     /// A vector of ranges of small state items that are grouped together in the UI.
     /// 
     /// There is a collapsible to the right of the message of the first item in the group. 
-    small_state_groups: Vec<(std::ops::Range<usize>, bool, HashMap<String, Vec<UserEvent>>)>
+    small_state_groups: Vec<(std::ops::Range<usize>, bool, Vec<(String, Vec<UserEvent>)>)>
 }
 
 #[derive(Default, Debug)]
@@ -4201,23 +4201,7 @@ fn is_small_state_event(
     // )
 }
 
-fn append_user_event(index: usize, user_id: &UserId, username: String, transition: TransitionType, user_events: &mut HashMap<String, Vec<UserEvent>>) {
-    let user_event = UserEvent{
-        user_id: user_id.to_string(),
-        display_name: username.clone(),
-        transition,
-        index,
-    };
-    println!("append_user_event: index: {}, user_id: {}, username: {}, transition: {:?}", index, user_id, username, transition);
-    if let Some(mut events) = user_events.get_mut(&user_id.to_string()) {
-        println!("append_user_event: events: {:?}", events);
-        if events.iter().filter(|user_event| user_event.index == index).count() == 0 {
-            events.push(user_event);
-        }
-    } else {
-        user_events.insert(user_id.to_string(), vec![user_event]);
-    }
-}
+
 
 /// Dynamically updates small state groups as timeline items are processed.
 /// This function is called during populate_small_state_event to build groups on-demand.
@@ -4229,7 +4213,7 @@ fn update_small_state_groups_for_item(
     current_item: &EventTimelineItem,
     previous_item: Option<&Arc<TimelineItem>>,
     next_item: Option<&Arc<TimelineItem>>,
-    small_state_groups: &mut Vec<(std::ops::Range<usize>, bool, HashMap<String, Vec<UserEvent>>)>,
+    small_state_groups: &mut Vec<(std::ops::Range<usize>, bool, Vec<(String, Vec<UserEvent>)>)>,
 ) -> (bool, bool, bool) {
     let (current_item_is_small_state, transition) = is_small_state_event(current_item);
     //println!("update_small_state_groups_for_item: item_id: {}, transition_type: {:?}, current_item_is_small_state: {}", item_id, transition_type, current_item_is_small_state);
@@ -4258,8 +4242,8 @@ fn update_small_state_groups_for_item(
 
     // Check if this item is already part of an existing group or can extend one
     for (range, is_open, user_events) in small_state_groups.iter_mut() {
-        
         if range.start == item_id {
+            println!("range.start");
             append_user_event(item_id, &current_item.sender(), username, transition, user_events);
             return (true, true, *is_open); // Start of group, show debug button
         }
@@ -4276,7 +4260,7 @@ fn update_small_state_groups_for_item(
         }
     }
     if next_item_is_small_state {
-        let mut user_events = HashMap::new();
+        let mut user_events = Vec::new();
         append_user_event(item_id, &current_item.sender(), username, transition, &mut user_events);
         // Plus 2 to include the next item into the group.
         small_state_groups.push((item_id..(item_id + 2), false, user_events));
@@ -4433,6 +4417,12 @@ impl SmallStateEventContent for OtherMessageLike {
         _item_drawn_status: ItemDrawnStatus,
         mut new_drawn_status: ItemDrawnStatus,
     ) -> (WidgetRef, ItemDrawnStatus) {
+        println!("populate_transition_type OtherMessageLike");
+        item.label(id!(content)).set_text(
+            cx,
+            &text_preview_of_other_message_like(self).format_with(username, false),
+        );
+        new_drawn_status.content_drawn = true;
         (item, new_drawn_status)
     }
 }
@@ -4485,6 +4475,7 @@ impl SmallStateEventContent for timeline::OtherState {
         _item_drawn_status: ItemDrawnStatus,
         mut new_drawn_status: ItemDrawnStatus,
     ) -> (WidgetRef, ItemDrawnStatus) {
+        println!("populate_transition_type OtherState");
         let item = if let Some(text_preview) = text_preview_of_other_state(self, false) {
             item.label(id!(content))
                 .set_text(cx, &text_preview.format_with(username, false));
@@ -4501,16 +4492,26 @@ impl SmallStateEventContent for timeline::OtherState {
     fn populate_transition_type(
         &self,
         cx: &mut Cx,
-        _list: &mut PortalList,
-        _item_id: usize,
+        list: &mut PortalList,
+        item_id: usize,
         item: WidgetRef,
         _event_tl_item: &EventTimelineItem,
         username: &str,
         _item_drawn_status: ItemDrawnStatus,
         mut new_drawn_status: ItemDrawnStatus,
     ) -> (WidgetRef, ItemDrawnStatus) {
-        
-        let transition_type = get_transition_from_other_events(self.content(), self.state_key());
+        // let transition_type = get_transition_from_other_events(self.content(), self.state_key());
+        println!("populate_transition_type OtherState");
+        let item = if let Some(text_preview) = text_preview_of_other_state(self, false) {
+            item.label(id!(content))
+                .set_text(cx, &text_preview.format_with(username, false));
+            new_drawn_status.content_drawn = true;
+            item
+        } else {
+            let item = list.item(cx, item_id, live_id!(Empty));
+            new_drawn_status = ItemDrawnStatus::new();
+            item
+        };
         (item, new_drawn_status)
     }
 }
@@ -4548,20 +4549,27 @@ impl SmallStateEventContent for MemberProfileChange {
         &self,
         cx: &mut Cx,
         _list: &mut PortalList,
-        _item_id: usize,
+        item_id: usize,
         item: WidgetRef,
         _event_tl_item: &EventTimelineItem,
         username: &str,
         _item_drawn_status: ItemDrawnStatus,
         mut new_drawn_status: ItemDrawnStatus,
     ) -> (WidgetRef, ItemDrawnStatus) {
-        let transition_type = if let Some(_) = self.avatar_url_change() {
-            TransitionType::ChangedAvatar
-        } else if let Some(_) = self.displayname_change() {
-            TransitionType::ChangedName
-        } else {
-            TransitionType::NoChange
-        };
+        // let transition_type = if let Some(_) = self.avatar_url_change() {
+        //     TransitionType::ChangedAvatar
+        // } else if let Some(_) = self.displayname_change() {
+        //     TransitionType::ChangedName
+        // } else {
+        //     TransitionType::NoChange
+        // };
+        println!("item_id: {:?}, populate_transition_type MemberProfileChange username  {:?}", item_id, username);
+        item.label(id!(content)).set_text(
+            cx,
+            &text_preview_of_member_profile_change(self, username, false)
+                .format_with(username, false),
+        );
+        new_drawn_status.content_drawn = true;
         (item, new_drawn_status)
     }
 }
@@ -4627,10 +4635,16 @@ fn populate_small_state_event(
     next_event: Option<&Arc<TimelineItem>>,
     event_content: &impl SmallStateEventContent,
     item_drawn_status: ItemDrawnStatus,
-    small_state_groups: &mut Vec<(std::ops::Range<usize>, bool, HashMap<String, Vec<UserEvent>>)>,
+    small_state_groups: &mut Vec<(std::ops::Range<usize>, bool, Vec<(String, Vec<UserEvent>)>)>,
 ) -> (WidgetRef, ItemDrawnStatus) {
     let mut new_drawn_status = item_drawn_status;
-    let (item, existed) = list.item_with_existed(cx, item_id, live_id!(SmallStateEvent));
+    let (item, mut existed) = list.item_with_existed(cx, item_id, live_id!(SmallStateEvent));
+    println!("existed: {} SmallStateEvent", existed);
+    if !existed {
+        let (item, existed_in_empty) = list.item_with_existed(cx, item_id, live_id!(Empty));
+        println!("item_id: {:?} existed_in_empty: {} text {:?}", item_id, existed_in_empty,  item.label(id!(content)).text());
+        existed = existed_in_empty;
+    }
     // The content of a small state event view may depend on the profile info,
     // so we can only mark the content as drawn after the profile has been fully drawn and cached.
     let skip_redrawing_profile = existed && item_drawn_status.profile_drawn;
@@ -4691,9 +4705,8 @@ fn populate_small_state_event(
             let button_text = if expanded { "▲" } else { "▼" };
             item.button(id!(collapsible_button))
                 .set_text(cx, button_text);
-            for (range, _, user_events) in small_state_groups.clone() {
+            for (range, _, user_events) in small_state_groups {
                 if range.start == item_id {
-                    
                     let summary_text = generate_summary(&user_events, 4);
                     println!("range {:?} user_events {:?} summary_text {:?}", range, user_events, summary_text);
                     item.view(id!(small_state_header)).set_visible(cx, true);
@@ -4742,18 +4755,22 @@ fn populate_small_state_event(
             new_drawn_status,
         )
     } else {
+        println!("empty placeholder item_id {:?}", item_id);
         // This item is part of a collapsed group - render as empty placeholder
-        let (item, _existed) = list.item_with_existed(cx, item_id, live_id!(Empty));
-        // event_content.populate_transition_type(
-        //     cx,
-        //     list,
-        //     item_id,
-        //     item,
-        //     event_tl_item,
-        //     &username,
-        //     item_drawn_status,
-        //     new_drawn_status,
-        // )
+        //let (item, _existed) = list.item_with_existed(cx, item_id, live_id!(Empty));
+        let item = list.item(cx, item_id, live_id!(Empty));
+        //let (item, _existed) = list.item_with_existed(cx, item_id, live_id!(SmallStateEvent));
+        let (item, _existed) = event_content.populate_transition_type(
+            cx,
+            list,
+            item_id,
+            item,
+            event_tl_item,
+            &username,
+            item_drawn_status,
+            new_drawn_status,
+        );
+        new_drawn_status.content_drawn = true;
         (item, new_drawn_status)
     }
 }
diff --git a/src/shared/membership_example.rs b/src/shared/membership_example.rs
deleted file mode 100644
index 3bac2139..00000000
--- a/src/shared/membership_example.rs
+++ /dev/null
@@ -1,67 +0,0 @@
-use std::collections::HashMap;
-use crate::shared::membership_transitions::{generate_summary, UserEvent, TransitionType};
-
-/// Example function showing how to use the membership_transitions module
-/// with the room_screen summary_text functionality.
-pub fn example_usage_for_summary_text() -> String {
-    // This is an example of how you would collect UserEvent data
-    // from actual Matrix timeline events and generate a summary
-    let mut user_events: HashMap<String, Vec<UserEvent>> = HashMap::new();
-
-    // Example: Alice joined and then left
-    user_events.insert("alice".into(), vec![
-        UserEvent { 
-            user_id: "alice".into(), 
-            display_name: "Alice".into(), 
-            transition: TransitionType::Joined, 
-            index: 0 
-        },
-        UserEvent { 
-            user_id: "alice".into(), 
-            display_name: "Alice".into(), 
-            transition: TransitionType::Left, 
-            index: 1 
-        },
-    ]);
-
-    // Example: Bob changed avatar
-    user_events.insert("bob".into(), vec![
-        UserEvent { 
-            user_id: "bob".into(), 
-            display_name: "Bob".into(), 
-            transition: TransitionType::ChangedAvatar, 
-            index: 2 
-        },
-    ]);
-
-    // Example: Charlie joined
-    user_events.insert("charlie".into(), vec![
-        UserEvent { 
-            user_id: "charlie".into(), 
-            display_name: "Charlie".into(), 
-            transition: TransitionType::Joined, 
-            index: 3 
-        },
-    ]);
-
-    // Generate the summary text using the membership_transitions module
-    // The second parameter (2) is the max number of names to show before "and N others"
-    generate_summary(&user_events, 2)
-}
-
-#[cfg(test)]
-mod tests {
-    use super::*;
-
-    #[test]
-    fn test_example_summary() {
-        let summary = example_usage_for_summary_text();
-        
-        // The summary should contain the users and their actions
-        assert!(summary.contains("Alice") || summary.contains("joined and left"));
-        assert!(summary.contains("Bob") || summary.contains("changed avatar"));
-        assert!(summary.contains("Charlie") || summary.contains("joined"));
-        
-        println!("Generated summary: {}", summary);
-    }
-}
\ No newline at end of file
diff --git a/src/shared/membership_transitions.rs b/src/shared/membership_transitions.rs
index f9dcf346..01faa5be 100644
--- a/src/shared/membership_transitions.rs
+++ b/src/shared/membership_transitions.rs
@@ -1,5 +1,5 @@
-use std::collections::HashMap;
-use matrix_sdk_ui::timeline::{AnyOtherFullStateEventContent, MembershipChange, RoomMembershipChange};
+use matrix_sdk_ui::timeline::{AnyOtherFullStateEventContent, MembershipChange};
+use ruma::UserId;
 
 #[derive(Default, Debug, Clone, Copy, PartialEq, Eq, Hash)]
 pub enum TransitionType {
@@ -25,7 +25,7 @@ pub enum TransitionType {
     HiddenEvent,
 }
 
-#[derive(Debug, Clone)]
+#[derive(Debug, Clone, PartialEq)]
 pub struct UserEvent {
     pub user_id: String,
     pub display_name: String,
@@ -87,15 +87,15 @@ fn describe_transition(t: TransitionType, user_count: usize, repeats: usize) ->
     match t {
         TransitionType::CreateRoom => format!("created and configured the room"),
         TransitionType::Joined => {
-            if plural { format!("joined{}", count_str) } else { format!("joined{}", count_str) }
+            if plural { format!("joined{}", count_str) } else { format!("joined the room{}", count_str) }
         }
         TransitionType::Left => {
-            if plural { format!("left{}", count_str) } else { format!("left{}", count_str) }
+            if plural { format!("left{}", count_str) } else { format!("left the room{}", count_str) }
         }
         TransitionType::JoinedAndLeft => format!("joined and left{}", count_str),
         TransitionType::LeftAndJoined => format!("left and rejoined{}", count_str),
-        TransitionType::ChangedName => format!("changed name{}", count_str),
-        TransitionType::ChangedAvatar => format!("changed avatar{}", count_str),
+        TransitionType::ChangedName => format!("changed their name{}", count_str),
+        TransitionType::ChangedAvatar => format!("changed their profile picture{}", count_str),
         TransitionType::Invited => format!("was invited{}", count_str),
         TransitionType::Banned => format!("was banned{}", count_str),
         TransitionType::Unbanned => format!("was unbanned{}", count_str),
@@ -173,36 +173,70 @@ pub fn get_transition_from_other_events(content: &AnyOtherFullStateEventContent,
     }
 }
 
+/// Appends a new user event to the given list of user events.
+///
+/// If the given transition is `HiddenEvent`, this function does nothing.
+///
+/// Otherwise, it appends a new `UserEvent` to the list of user events for the given user ID.
+/// If the user ID is not found in the list, a new entry is created.
+///
+/// If the user ID is found, but there is no existing `UserEvent` with the same index,
+/// a new `UserEvent` is appended to the list of user events for that user ID.
+///
+/// The function prints debug messages to help with debugging.
+pub fn append_user_event(index: usize, user_id: &UserId, username: String, transition: TransitionType, user_events: &mut Vec<(String, Vec<UserEvent>)>) {
+    if let TransitionType::HiddenEvent = transition {
+        return;
+    }
+    let user_event = UserEvent{
+        user_id: user_id.to_string(),
+        display_name: username.clone(),
+        transition,
+        index,
+    };
+    println!("appending user event: user_id: {}, display_name: {}, transition: {:?}, index: {}", user_id, username, transition, index);
+    let user_id_str = user_id.to_string();
+    if let Some((_, events)) = user_events.iter_mut().find(|(id, _)| id == &user_id_str) {
+        if events.iter().filter(|user_event| user_event.index == index).count() == 0 {
+            events.push(user_event);
+        }
+    } else {
+        user_events.push((user_id_str, vec![user_event]));
+    }
+    println!("user_events after append: {:#?}", user_events.into_iter().map(|(u,_e)|{u.clone()}).collect::<Vec<_>>());
+}
+
 /// Summarize all user transitions into a single string
 pub fn generate_summary(
-    user_events: &HashMap<String, Vec<UserEvent>>,
+    user_events: &Vec<(String, Vec<UserEvent>)>,
     summary_length: usize,
 ) -> String {
     // Aggregate by transition sequence
-    let mut aggregates: HashMap<String, Vec<String>> = HashMap::new();
-    for (user_id, events) in user_events {
+    let mut aggregates: Vec<(String, Vec<String>)> = Vec::new();
+    for (user_id, events) in user_events.iter().rev() {
         let mut transitions: Vec<_> = events.iter().map(|e| e.transition).collect();
-        transitions.reverse();
+        // transitions.reverse();
         
         // Filter out Joined transitions for room creators
         if transitions.contains(&TransitionType::CreateRoom) {
             transitions.retain(|&t| t != TransitionType::Joined);
         }
-        
+        println!("transitions user_id {:?} transitions {:?}", user_id, transitions);
         let canonical = canonicalize_transitions(&transitions);
+        println!("canonical for {}: {}", user_id, canonical.iter().map(|t| format!("{:?}", t)).collect::<Vec<_>>().join(","));
         let sequence_key = canonical.iter().map(|t| format!("{:?}", t)).collect::<Vec<_>>().join(",");
-
+        println!("sequence_key for {}: {}", user_id, sequence_key);
         let name = events.first().map(|e| e.display_name.clone()).unwrap_or(user_id.clone());
-        aggregates.entry(sequence_key).or_default().push(name);
+        if let Some((_, events)) = aggregates.iter_mut().find(|(id, _)| id == &sequence_key) {
+            events.push(name);
+        } else {
+            aggregates.push((sequence_key.clone(), vec![name]));
+        }
     }
 
-    // Order by first appearance (optional; just lexical sort for now)
-    let mut sequences: Vec<_> = aggregates.into_iter().collect();
-    sequences.sort_by_key(|(k, _)| k.clone());
-
     // Build text
     let mut summary_parts = Vec::new();
-    for (seq, names) in sequences {
+    for (seq, names) in aggregates {
         let transitions: Vec<_> = seq
             .split(',')
             .filter_map(|s| match s.trim() {
@@ -239,22 +273,21 @@ mod tests {
 
     #[test]
     fn test_generate_summary() {
-        let mut user_events: HashMap<String, Vec<UserEvent>> = HashMap::new();
-
-        user_events.insert("alice".into(), vec![
-            UserEvent { user_id: "alice".into(), display_name: "Alice".into(), transition: TransitionType::Joined, index: 0 },
-            UserEvent { user_id: "alice".into(), display_name: "Alice".into(), transition: TransitionType::Left, index: 1 },
-        ]);
-
-        user_events.insert("bob".into(), vec![
-            UserEvent { user_id: "bob".into(), display_name: "Bob".into(), transition: TransitionType::ChangedAvatar, index: 2 },
-        ]);
-
-        user_events.insert("charlie".into(), vec![
-            UserEvent { user_id: "charlie".into(), display_name: "Charlie".into(), transition: TransitionType::Joined, index: 3 },
-        ]);
+        let user_events: Vec<(String, Vec<UserEvent>)> = vec![
+            ("alice".into(), vec![
+                UserEvent { user_id: "alice".into(), display_name: "Alice".into(), transition: TransitionType::Joined, index: 0 },
+                UserEvent { user_id: "alice".into(), display_name: "Alice".into(), transition: TransitionType::Left, index: 1 },
+            ]),
+            ("bob".into(), vec![
+                UserEvent { user_id: "bob".into(), display_name: "Bob".into(), transition: TransitionType::ChangedAvatar, index: 2 },
+            ]),
+            ("charlie".into(), vec![
+                UserEvent { user_id: "charlie".into(), display_name: "Charlie".into(), transition: TransitionType::Joined, index: 3 },
+            ]),
+        ];
 
         let summary = generate_summary(&user_events, 2);
+        println!("summary: {}", summary);
         assert!(summary.contains("Alice"));
         assert!(summary.contains("Bob"));
         assert!(summary.contains("Charlie"));
diff --git a/src/shared/mod.rs b/src/shared/mod.rs
index 8fc90b06..9fbb0a52 100644
--- a/src/shared/mod.rs
+++ b/src/shared/mod.rs
@@ -9,7 +9,6 @@ pub mod html_or_plaintext;
 pub mod icon_button;
 pub mod jump_to_bottom_button;
 pub mod membership_transitions;
-pub mod membership_example;
 pub mod mentionable_text_input;
 pub mod popup_list;
 pub mod room_filter_input_bar;

From c1e4061a137f0e35839c3bd8ddecfb0c0cf84edb Mon Sep 17 00:00:00 2001
From: alanpoon <brightshadowx@gmail.com>
Date: Mon, 13 Oct 2025 23:23:46 +0800
Subject: [PATCH 05/26] Fix user_events iteration in summary text

---
 src/home/room_screen.rs              | 296 +++++++--------------------
 src/shared/membership_transitions.rs |  40 ++--
 2 files changed, 99 insertions(+), 237 deletions(-)

diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs
index b8b04197..4efb401d 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -30,7 +30,7 @@ use crate::{
         user_profile::{AvatarState, ShowUserProfileAction, UserProfile, UserProfileAndRoomId, UserProfilePaneInfo, UserProfileSlidingPaneRef, UserProfileSlidingPaneWidgetExt},
         user_profile_cache,
     }, room::typing_notice::TypingNoticeWidgetExt, shared::{
-        avatar::AvatarWidgetRefExt, callout_tooltip::TooltipAction, html_or_plaintext::{HtmlOrPlaintextRef, HtmlOrPlaintextWidgetRefExt, RobrixHtmlLinkAction}, jump_to_bottom_button::{JumpToBottomButtonWidgetExt, UnreadMessageCount}, membership_transitions::{append_user_event, generate_summary, get_transition_from_membership_change, get_transition_from_other_events, TransitionType, UserEvent}, popup_list::{enqueue_popup_notification, PopupItem, PopupKind}, restore_status_view::RestoreStatusViewWidgetExt, styles::*, text_or_image::{TextOrImageRef, TextOrImageWidgetRefExt}, timestamp::TimestampWidgetRefExt
+        avatar::AvatarWidgetRefExt, callout_tooltip::TooltipAction, html_or_plaintext::{HtmlOrPlaintextRef, HtmlOrPlaintextWidgetRefExt, RobrixHtmlLinkAction}, jump_to_bottom_button::{JumpToBottomButtonWidgetExt, UnreadMessageCount}, membership_transitions::{generate_summary, get_transition_from_membership_change, get_transition_from_other_events, TransitionType, UserEvent}, popup_list::{enqueue_popup_notification, PopupItem, PopupKind}, restore_status_view::RestoreStatusViewWidgetExt, styles::*, text_or_image::{TextOrImageRef, TextOrImageWidgetRefExt}, timestamp::TimestampWidgetRefExt
     }, sliding_sync::{get_client, submit_async_request, take_timeline_endpoints, BackwardsPaginateUntilEventRequest, MatrixRequest, PaginationDirection, TimelineEndpoints, TimelineRequestSender, UserPowerLevels}, utils::{self, room_name_or_id, unix_time_millis_to_datetime, ImageFormat, MEDIA_THUMBNAIL_FORMAT}
 };
 use crate::home::event_reaction_list::ReactionListWidgetRefExt;
@@ -967,7 +967,7 @@ impl Widget for RoomScreen {
                 // Handle collapsible button click in SmallStateEvent
                 if wr.button(id!(collapsible_button)).clicked(actions) {
                     if let Some(tl_state) = &mut self.tl_state {
-                        for (range, open, _user_events) in &mut tl_state.small_state_groups {
+                        for (range, open, _user_events_map) in &mut tl_state.small_state_groups {
                             if range.start == item_id {
                                 // Toggle the group's open/closed state
                                 *open = !*open;
@@ -1684,16 +1684,21 @@ impl RoomScreen {
                         let new_len = new_items.len();
                         let shift = new_len as i32 - old_len as i32;
                         // Apply the shift to the small_state_groups.
-                        for (range, _, user_events) in &mut tl.small_state_groups {
+                        for (range, _, user_events_map) in &mut tl.small_state_groups {
                             let new_start = (range.start as i32 + shift).max(0) as usize;
                             let new_end = (range.end as i32 + shift).max(0) as usize;
                             *range = new_start..new_end;
-                            user_events.clear();
-                            // for (_, user_events_list) in user_events.iter_mut() {
-                            //     for user_event in user_events_list.iter_mut() {
-                            //         user_event.index = (user_event.index as i32 + shift).max(0) as usize;
-                            //     }
-                            // }
+                            
+                            let user_events_map_clone = user_events_map.clone();
+                            user_events_map.clear();
+                            for (group_id, (user_id, mut user_events)) in user_events_map_clone {
+                                for user_event in &mut user_events {
+                                    user_event.index = (user_event.index as i32 + shift).max(0) as usize;
+                                }
+                                user_events_map.insert(group_id + shift as usize, (user_id.clone(), user_events.clone()));
+                            }
+                            // Note: If we want to preserve events during shifts, we would need to
+                            // update the HashMap keys and UserEvent indices here
                         }
                     }
                     tl.items = new_items;
@@ -3026,7 +3031,7 @@ struct TimelineUiState {
     /// A vector of ranges of small state items that are grouped together in the UI.
     /// 
     /// There is a collapsible to the right of the message of the first item in the group. 
-    small_state_groups: Vec<(std::ops::Range<usize>, bool, Vec<(String, Vec<UserEvent>)>)>
+    small_state_groups: Vec<(std::ops::Range<usize>, bool, HashMap<usize, (String, Vec<UserEvent>)>)>
 }
 
 #[derive(Default, Debug)]
@@ -4201,7 +4206,30 @@ fn is_small_state_event(
     // )
 }
 
-
+fn append_user_event(user_event: UserEvent, user_events: &mut HashMap<usize, (String, Vec<UserEvent>)>) {
+    let item_id = user_event.index;
+    let mut old_group_id = None;
+    for (group_id, (user_id, user_events_vec)) in user_events.iter_mut() {
+        if user_event.user_id == user_id.clone() {
+            if user_events_vec.iter().filter(|user_event| user_event.index == item_id).count() == 0 {
+                user_events_vec.push(user_event.clone());
+            }
+            if &item_id >= group_id {
+                return;
+            }
+            old_group_id = Some(group_id.clone());
+        }
+    }
+    if let Some(old_group_id) = old_group_id {
+        println!("old_group_id: {} display_name: {}", old_group_id, user_event.display_name);
+        if let Some(data) = user_events.remove(&old_group_id) {
+             println!("old_group_id: removed {} replacement {:?} user_events: {:#?}", old_group_id, item_id, user_events);
+            user_events.insert(item_id, data);
+            return;
+        }
+    }
+    user_events.insert(item_id, (user_event.user_id.clone(), vec![user_event]));
+}
 
 /// Dynamically updates small state groups as timeline items are processed.
 /// This function is called during populate_small_state_event to build groups on-demand.
@@ -4213,7 +4241,7 @@ fn update_small_state_groups_for_item(
     current_item: &EventTimelineItem,
     previous_item: Option<&Arc<TimelineItem>>,
     next_item: Option<&Arc<TimelineItem>>,
-    small_state_groups: &mut Vec<(std::ops::Range<usize>, bool, Vec<(String, Vec<UserEvent>)>)>,
+    small_state_groups: &mut Vec<(std::ops::Range<usize>, bool, HashMap<usize, (String, Vec<UserEvent>)>)>,
 ) -> (bool, bool, bool) {
     let (current_item_is_small_state, transition) = is_small_state_event(current_item);
     //println!("update_small_state_groups_for_item: item_id: {}, transition_type: {:?}, current_item_is_small_state: {}", item_id, transition_type, current_item_is_small_state);
@@ -4241,29 +4269,50 @@ fn update_small_state_groups_for_item(
     }
 
     // Check if this item is already part of an existing group or can extend one
-    for (range, is_open, user_events) in small_state_groups.iter_mut() {
+    for (range, is_open, user_events_map) in small_state_groups.iter_mut() {
+        let user_event = UserEvent {
+            user_id: current_item.sender().to_string(),
+            display_name: username.clone(),
+            transition,
+            index: item_id,
+        };
         if range.start == item_id {
             println!("range.start");
-            append_user_event(item_id, &current_item.sender(), username, transition, user_events);
+            // Add user event to the HashMap using item_id as key with userId and Vec<UserEvent>
+            println!("range {:?} username: {}", range, username);
+            append_user_event(user_event, user_events_map);
             return (true, true, *is_open); // Start of group, show debug button
         }
         if range.contains(&item_id) {
-            append_user_event(item_id, &current_item.sender(), username, transition, user_events);
+            // Add user event to the HashMap using item_id as key with userId and Vec<UserEvent>
+            println!("range {:?} username: {}", range, username);
+            append_user_event(user_event, user_events_map);
+            if username == "Jack S" || username == "Florian Heese" {
+                println!("user_events_map: {:#?}", user_events_map);
+            }
             return (*is_open, false, *is_open); // Item is in group but not at start, no debug button
         }
         // Since we're iterating backwards (from highest to lowest item_id),
         if range.start == item_id + 1 {
+            println!("range {:?} username: {}", range, username);
             // Extend this group backwards to include current item
             *range = item_id..range.end;
-            append_user_event(item_id, &current_item.sender(), username, transition, user_events);
+            println!("after range {:?} username: {}", range, username);
+            append_user_event(user_event, user_events_map);
             return (*is_open, false, false); // Extended group, no debug button for this item
         }
     }
     if next_item_is_small_state {
-        let mut user_events = Vec::new();
-        append_user_event(item_id, &current_item.sender(), username, transition, &mut user_events);
+        let mut user_events_map = HashMap::new();
+        let user_event = UserEvent {
+            user_id: current_item.sender().to_string(),
+            display_name: username.clone(),
+            transition,
+            index: item_id,
+        };
+        append_user_event(user_event, &mut user_events_map);
         // Plus 2 to include the next item into the group.
-        small_state_groups.push((item_id..(item_id + 2), false, user_events));
+        small_state_groups.push((item_id..(item_id + 2), false, user_events_map));
     }
     (false, false, false) // Return collapsed state, no debug button
 }
@@ -4297,17 +4346,6 @@ trait SmallStateEventContent {
         new_drawn_status: ItemDrawnStatus,
     ) -> (WidgetRef, ItemDrawnStatus);
 
-    fn populate_transition_type(
-        &self,
-        cx: &mut Cx,
-        list: &mut PortalList,
-        item_id: usize,
-        item: WidgetRef,
-        event_tl_item: &EventTimelineItem,
-        username: &str,
-        item_drawn_status: ItemDrawnStatus,
-        new_drawn_status: ItemDrawnStatus,
-    ) -> (WidgetRef, ItemDrawnStatus);
 }
 
 /// An empty marker struct used for populating redacted messages.
@@ -4336,19 +4374,6 @@ impl SmallStateEventContent for RedactedMessageEventMarker {
         new_drawn_status.content_drawn = true;
         (item, new_drawn_status)
     }
-    fn populate_transition_type(
-        &self,
-        cx: &mut Cx,
-        list: &mut PortalList,
-        item_id: usize,
-        item: WidgetRef,
-        _event_tl_item: &EventTimelineItem,
-        username: &str,
-        _item_drawn_status: ItemDrawnStatus,
-        mut new_drawn_status: ItemDrawnStatus
-        ) -> (WidgetRef, ItemDrawnStatus) {
-        (item, new_drawn_status)
-    }
 }
 
 // For unable to decrypt messages.
@@ -4371,19 +4396,6 @@ impl SmallStateEventContent for EncryptedMessage {
         new_drawn_status.content_drawn = true;
         (item, new_drawn_status)
     }
-    fn populate_transition_type(
-        &self,
-        cx: &mut Cx,
-        _list: &mut PortalList,
-        _item_id: usize,
-        item: WidgetRef,
-        _event_tl_item: &EventTimelineItem,
-        username: &str,
-        _item_drawn_status: ItemDrawnStatus,
-        mut new_drawn_status: ItemDrawnStatus,
-    ) -> (WidgetRef, ItemDrawnStatus) {
-        (item, new_drawn_status)
-    }
 }
 
 // For other message-like content (custom message-like events).
@@ -4406,25 +4418,6 @@ impl SmallStateEventContent for OtherMessageLike {
         new_drawn_status.content_drawn = true;
         (item, new_drawn_status)
     }
-    fn populate_transition_type(
-        &self,
-        cx: &mut Cx,
-        _list: &mut PortalList,
-        _item_id: usize,
-        item: WidgetRef,
-        _event_tl_item: &EventTimelineItem,
-        username: &str,
-        _item_drawn_status: ItemDrawnStatus,
-        mut new_drawn_status: ItemDrawnStatus,
-    ) -> (WidgetRef, ItemDrawnStatus) {
-        println!("populate_transition_type OtherMessageLike");
-        item.label(id!(content)).set_text(
-            cx,
-            &text_preview_of_other_message_like(self).format_with(username, false),
-        );
-        new_drawn_status.content_drawn = true;
-        (item, new_drawn_status)
-    }
 }
 
 // TODO: once we properly display polls, we should remove this,
@@ -4448,19 +4441,6 @@ impl SmallStateEventContent for PollState {
         new_drawn_status.content_drawn = true;
         (item, new_drawn_status)
     }
-    fn populate_transition_type(
-        &self,
-        cx: &mut Cx,
-        _list: &mut PortalList,
-        _item_id: usize,
-        item: WidgetRef,
-        _event_tl_item: &EventTimelineItem,
-        username: &str,
-        _item_drawn_status: ItemDrawnStatus,
-        mut new_drawn_status: ItemDrawnStatus,
-    ) -> (WidgetRef, ItemDrawnStatus) {
-        (item, new_drawn_status)
-    }
 }
 
 impl SmallStateEventContent for timeline::OtherState {
@@ -4489,31 +4469,6 @@ impl SmallStateEventContent for timeline::OtherState {
         (item, new_drawn_status)
     }
 
-    fn populate_transition_type(
-        &self,
-        cx: &mut Cx,
-        list: &mut PortalList,
-        item_id: usize,
-        item: WidgetRef,
-        _event_tl_item: &EventTimelineItem,
-        username: &str,
-        _item_drawn_status: ItemDrawnStatus,
-        mut new_drawn_status: ItemDrawnStatus,
-    ) -> (WidgetRef, ItemDrawnStatus) {
-        // let transition_type = get_transition_from_other_events(self.content(), self.state_key());
-        println!("populate_transition_type OtherState");
-        let item = if let Some(text_preview) = text_preview_of_other_state(self, false) {
-            item.label(id!(content))
-                .set_text(cx, &text_preview.format_with(username, false));
-            new_drawn_status.content_drawn = true;
-            item
-        } else {
-            let item = list.item(cx, item_id, live_id!(Empty));
-            new_drawn_status = ItemDrawnStatus::new();
-            item
-        };
-        (item, new_drawn_status)
-    }
 }
 
 impl SmallStateEventContent for MemberProfileChange {
@@ -4536,42 +4491,6 @@ impl SmallStateEventContent for MemberProfileChange {
         new_drawn_status.content_drawn = true;
         (item, new_drawn_status)
     }
-    // fn transition_type(&self) -> TransitionType {
-    //     if let Some(_) = self.avatar_url_change() {
-    //         TransitionType::ChangedAvatar
-    //     } else if let Some(_) = self.displayname_change() {
-    //         TransitionType::ChangedName
-    //     } else {
-    //         TransitionType::NoChange
-    //     }
-    // }
-    fn populate_transition_type(
-        &self,
-        cx: &mut Cx,
-        _list: &mut PortalList,
-        item_id: usize,
-        item: WidgetRef,
-        _event_tl_item: &EventTimelineItem,
-        username: &str,
-        _item_drawn_status: ItemDrawnStatus,
-        mut new_drawn_status: ItemDrawnStatus,
-    ) -> (WidgetRef, ItemDrawnStatus) {
-        // let transition_type = if let Some(_) = self.avatar_url_change() {
-        //     TransitionType::ChangedAvatar
-        // } else if let Some(_) = self.displayname_change() {
-        //     TransitionType::ChangedName
-        // } else {
-        //     TransitionType::NoChange
-        // };
-        println!("item_id: {:?}, populate_transition_type MemberProfileChange username  {:?}", item_id, username);
-        item.label(id!(content)).set_text(
-            cx,
-            &text_preview_of_member_profile_change(self, username, false)
-                .format_with(username, false),
-        );
-        new_drawn_status.content_drawn = true;
-        (item, new_drawn_status)
-    }
 }
 
 impl SmallStateEventContent for RoomMembershipChange {
@@ -4599,25 +4518,6 @@ impl SmallStateEventContent for RoomMembershipChange {
         new_drawn_status.content_drawn = true;
         (item, new_drawn_status)
     }
-
-    fn populate_transition_type(
-        &self,
-        cx: &mut Cx,
-        _list: &mut PortalList,
-        _item_id: usize,
-        item: WidgetRef,
-        _event_tl_item: &EventTimelineItem,
-        username: &str,
-        _item_drawn_status: ItemDrawnStatus,
-        mut new_drawn_status: ItemDrawnStatus,
-    ) -> (WidgetRef, ItemDrawnStatus) {
-        let transition_type = if let Some(change) = self.change() {
-            get_transition_from_membership_change(&change)
-        } else {
-            TransitionType::HiddenEvent
-        };
-        (item, new_drawn_status)
-    }
 }
 
 /// Creates, populates, and adds a SmallStateEvent liveview widget to the given `PortalList`
@@ -4635,16 +4535,11 @@ fn populate_small_state_event(
     next_event: Option<&Arc<TimelineItem>>,
     event_content: &impl SmallStateEventContent,
     item_drawn_status: ItemDrawnStatus,
-    small_state_groups: &mut Vec<(std::ops::Range<usize>, bool, Vec<(String, Vec<UserEvent>)>)>,
+    small_state_groups: &mut Vec<(std::ops::Range<usize>, bool, HashMap<usize, (String, Vec<UserEvent>)>)>,
 ) -> (WidgetRef, ItemDrawnStatus) {
     let mut new_drawn_status = item_drawn_status;
-    let (item, mut existed) = list.item_with_existed(cx, item_id, live_id!(SmallStateEvent));
-    println!("existed: {} SmallStateEvent", existed);
-    if !existed {
-        let (item, existed_in_empty) = list.item_with_existed(cx, item_id, live_id!(Empty));
-        println!("item_id: {:?} existed_in_empty: {} text {:?}", item_id, existed_in_empty,  item.label(id!(content)).text());
-        existed = existed_in_empty;
-    }
+    let (item, existed) = list.item_with_existed(cx, item_id, live_id!(SmallStateEvent));
+
     // The content of a small state event view may depend on the profile info,
     // so we can only mark the content as drawn after the profile has been fully drawn and cached.
     let skip_redrawing_profile = existed && item_drawn_status.profile_drawn;
@@ -4705,42 +4600,15 @@ fn populate_small_state_event(
             let button_text = if expanded { "▲" } else { "▼" };
             item.button(id!(collapsible_button))
                 .set_text(cx, button_text);
-            for (range, _, user_events) in small_state_groups {
+            for (range, _, user_events_map) in small_state_groups {
                 if range.start == item_id {
-                    let summary_text = generate_summary(&user_events, 4);
-                    println!("range {:?} user_events {:?} summary_text {:?}", range, user_events, summary_text);
+                    // Pass HashMap directly to generate_summary
+                    let summary_text = generate_summary(&user_events_map, 4);
                     item.view(id!(small_state_header)).set_visible(cx, true);
                     item.label(id!(small_state_header.summary_text)).set_text(cx, &summary_text);
                     break;
                 }
             }
-            // for (range, _) in small_state_groups.clone() {
-            //     println!("range {:?} ", range);
-            //     if range.start == item_id {
-            //         let mut same_event_hashmap = HashMap::new();
-            //         for entry_id in range {
-            //             if let Some((_, widget_ref)) = list.get_item(entry_id) {
-            //                 let s = widget_ref.label(id!(content)).text();
-            //                 if let Some(count) = same_event_hashmap.get_mut(&s) {
-            //                     *count += 1;
-            //                 } else {
-            //                     same_event_hashmap.insert(s, 1);
-            //                 }
-            //             }
-            //         }
-            //         let mut summary_text = String::new();
-            //         for (s, count) in same_event_hashmap {
-            //             if count > 1 {
-            //                 summary_text.push_str(&format!("{}", count));
-            //             }
-            //             summary_text.push_str(&s);
-            //             summary_text.push_str(", ");
-            //         }
-            //         item.view(id!(small_state_header)).set_visible(cx, true);
-            //         item.label(id!(small_state_header.summary_text)).set_text(cx, &summary_text);
-            //         break;
-            //     }
-            // }
         }
 
         // Render the actual event content
@@ -4755,21 +4623,7 @@ fn populate_small_state_event(
             new_drawn_status,
         )
     } else {
-        println!("empty placeholder item_id {:?}", item_id);
-        // This item is part of a collapsed group - render as empty placeholder
-        //let (item, _existed) = list.item_with_existed(cx, item_id, live_id!(Empty));
-        let item = list.item(cx, item_id, live_id!(Empty));
-        //let (item, _existed) = list.item_with_existed(cx, item_id, live_id!(SmallStateEvent));
-        let (item, _existed) = event_content.populate_transition_type(
-            cx,
-            list,
-            item_id,
-            item,
-            event_tl_item,
-            &username,
-            item_drawn_status,
-            new_drawn_status,
-        );
+        let (item, _existed) = list.item_with_existed(cx, item_id, live_id!(Empty));
         new_drawn_status.content_drawn = true;
         (item, new_drawn_status)
     }
diff --git a/src/shared/membership_transitions.rs b/src/shared/membership_transitions.rs
index 01faa5be..9397d9e6 100644
--- a/src/shared/membership_transitions.rs
+++ b/src/shared/membership_transitions.rs
@@ -1,3 +1,4 @@
+use std::collections::HashMap;
 use matrix_sdk_ui::timeline::{AnyOtherFullStateEventContent, MembershipChange};
 use ruma::UserId;
 
@@ -208,12 +209,17 @@ pub fn append_user_event(index: usize, user_id: &UserId, username: String, trans
 
 /// Summarize all user transitions into a single string
 pub fn generate_summary(
-    user_events: &Vec<(String, Vec<UserEvent>)>,
+    user_events: &HashMap<usize, (String, Vec<UserEvent>)>,
     summary_length: usize,
 ) -> String {
     // Aggregate by transition sequence
     let mut aggregates: Vec<(String, Vec<String>)> = Vec::new();
-    for (user_id, events) in user_events.iter().rev() {
+    // Sort keys in ascending order for consistent iteration
+    let mut sorted_keys: Vec<&usize> = user_events.keys().collect();
+    sorted_keys.sort();
+    
+    for &index in sorted_keys {
+        let (user_id, events) = &user_events[&index];
         let mut transitions: Vec<_> = events.iter().map(|e| e.transition).collect();
         // transitions.reverse();
         
@@ -227,8 +233,8 @@ pub fn generate_summary(
         let sequence_key = canonical.iter().map(|t| format!("{:?}", t)).collect::<Vec<_>>().join(",");
         println!("sequence_key for {}: {}", user_id, sequence_key);
         let name = events.first().map(|e| e.display_name.clone()).unwrap_or(user_id.clone());
-        if let Some((_, events)) = aggregates.iter_mut().find(|(id, _)| id == &sequence_key) {
-            events.push(name);
+        if let Some((_, names)) = aggregates.iter_mut().find(|(id, _)| id == &sequence_key) {
+            names.push(name);
         } else {
             aggregates.push((sequence_key.clone(), vec![name]));
         }
@@ -273,18 +279,20 @@ mod tests {
 
     #[test]
     fn test_generate_summary() {
-        let user_events: Vec<(String, Vec<UserEvent>)> = vec![
-            ("alice".into(), vec![
-                UserEvent { user_id: "alice".into(), display_name: "Alice".into(), transition: TransitionType::Joined, index: 0 },
-                UserEvent { user_id: "alice".into(), display_name: "Alice".into(), transition: TransitionType::Left, index: 1 },
-            ]),
-            ("bob".into(), vec![
-                UserEvent { user_id: "bob".into(), display_name: "Bob".into(), transition: TransitionType::ChangedAvatar, index: 2 },
-            ]),
-            ("charlie".into(), vec![
-                UserEvent { user_id: "charlie".into(), display_name: "Charlie".into(), transition: TransitionType::Joined, index: 3 },
-            ]),
-        ];
+        let mut user_events: HashMap<usize, (String, Vec<UserEvent>)> = HashMap::new();
+        
+        user_events.insert(0, ("alice".into(), vec![
+            UserEvent { user_id: "alice".into(), display_name: "Alice".into(), transition: TransitionType::Joined, index: 0 },
+            UserEvent { user_id: "alice".into(), display_name: "Alice".into(), transition: TransitionType::Left, index: 1 },
+        ]));
+        
+        user_events.insert(2, ("bob".into(), vec![
+            UserEvent { user_id: "bob".into(), display_name: "Bob".into(), transition: TransitionType::ChangedAvatar, index: 2 },
+        ]));
+        
+        user_events.insert(3, ("charlie".into(), vec![
+            UserEvent { user_id: "charlie".into(), display_name: "Charlie".into(), transition: TransitionType::Joined, index: 3 },
+        ]));
 
         let summary = generate_summary(&user_events, 2);
         println!("summary: {}", summary);

From f9c760f81c1118ed4ebaa794eb4ed6225b92a9f4 Mon Sep 17 00:00:00 2001
From: alanpoon <brightshadowx@gmail.com>
Date: Tue, 14 Oct 2025 11:50:22 +0800
Subject: [PATCH 06/26] remove empty space

---
 src/home/room_screen.rs              | 18 ++----------------
 src/shared/membership_transitions.rs |  7 ++-----
 2 files changed, 4 insertions(+), 21 deletions(-)

diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs
index 4efb401d..a0450144 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -206,21 +206,7 @@ live_design! {
 
 
     // An empty view that takes up no space in the portal list.
-    Empty = <View> {
-        content = <Label> {
-            width: Fill,
-            height: Fit
-            padding: { top: 0.0, bottom: 0.0, left: 0.0, right: 0.0 }
-            draw_text: {
-                wrap: Word,
-                text_style: <THEME_FONT_REGULAR>{
-                    font_size: (10),
-                },
-                color: (SMALL_STATE_TEXT_COLOR)
-            }
-            text: ""
-        }
-    }
+    Empty = <View> { }
 
     // The view used for each text-based message event in a room's timeline.
     Message = {{Message}} {
@@ -1695,7 +1681,7 @@ impl RoomScreen {
                                 for user_event in &mut user_events {
                                     user_event.index = (user_event.index as i32 + shift).max(0) as usize;
                                 }
-                                user_events_map.insert(group_id + shift as usize, (user_id.clone(), user_events.clone()));
+                                user_events_map.insert((group_id as i32 + shift).max(0) as usize, (user_id.clone(), user_events.clone()));
                             }
                             // Note: If we want to preserve events during shifts, we would need to
                             // update the HashMap keys and UserEvent indices here
diff --git a/src/shared/membership_transitions.rs b/src/shared/membership_transitions.rs
index 9397d9e6..132260a5 100644
--- a/src/shared/membership_transitions.rs
+++ b/src/shared/membership_transitions.rs
@@ -221,7 +221,7 @@ pub fn generate_summary(
     for &index in sorted_keys {
         let (user_id, events) = &user_events[&index];
         let mut transitions: Vec<_> = events.iter().map(|e| e.transition).collect();
-        // transitions.reverse();
+        transitions.reverse();
         
         // Filter out Joined transitions for room creators
         if transitions.contains(&TransitionType::CreateRoom) {
@@ -295,9 +295,6 @@ mod tests {
         ]));
 
         let summary = generate_summary(&user_events, 2);
-        println!("summary: {}", summary);
-        assert!(summary.contains("Alice"));
-        assert!(summary.contains("Bob"));
-        assert!(summary.contains("Charlie"));
+        assert_eq!(summary, "Alice joined and left, Bob changed their profile picture, Charlie joined the room");
     }
 }
\ No newline at end of file

From 0747521988aa849310d38b130a07eddae4c0d843 Mon Sep 17 00:00:00 2001
From: alanpoon <brightshadowx@gmail.com>
Date: Wed, 15 Oct 2025 12:13:25 +0800
Subject: [PATCH 07/26] Do not show collapsible button when range is <=2

---
 src/home/room_screen.rs | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs
index a0450144..77a3d849 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -4267,16 +4267,13 @@ fn update_small_state_groups_for_item(
             // Add user event to the HashMap using item_id as key with userId and Vec<UserEvent>
             println!("range {:?} username: {}", range, username);
             append_user_event(user_event, user_events_map);
-            return (true, true, *is_open); // Start of group, show debug button
+            return (true, range.len() > 2, *is_open); // Start of group, show debug button
         }
         if range.contains(&item_id) {
             // Add user event to the HashMap using item_id as key with userId and Vec<UserEvent>
             println!("range {:?} username: {}", range, username);
             append_user_event(user_event, user_events_map);
-            if username == "Jack S" || username == "Florian Heese" {
-                println!("user_events_map: {:#?}", user_events_map);
-            }
-            return (*is_open, false, *is_open); // Item is in group but not at start, no debug button
+            return (*is_open || range.len() <= 2, false, *is_open); // Item is in group but not at start, no debug button
         }
         // Since we're iterating backwards (from highest to lowest item_id),
         if range.start == item_id + 1 {
@@ -4285,7 +4282,7 @@ fn update_small_state_groups_for_item(
             *range = item_id..range.end;
             println!("after range {:?} username: {}", range, username);
             append_user_event(user_event, user_events_map);
-            return (*is_open, false, false); // Extended group, no debug button for this item
+            return (*is_open || range.len() <= 2, false, false); // Extended group, no debug button for this item
         }
     }
     if next_item_is_small_state {
@@ -4525,7 +4522,6 @@ fn populate_small_state_event(
 ) -> (WidgetRef, ItemDrawnStatus) {
     let mut new_drawn_status = item_drawn_status;
     let (item, existed) = list.item_with_existed(cx, item_id, live_id!(SmallStateEvent));
-
     // The content of a small state event view may depend on the profile info,
     // so we can only mark the content as drawn after the profile has been fully drawn and cached.
     let skip_redrawing_profile = existed && item_drawn_status.profile_drawn;

From 7df3f345d089a944e90d378e2a8356d8e3a48991 Mon Sep 17 00:00:00 2001
From: alanpoon <brightshadowx@gmail.com>
Date: Wed, 15 Oct 2025 13:35:10 +0800
Subject: [PATCH 08/26] not_empty

---
 src/home/room_screen.rs | 34 +++++++++++++++-------------------
 1 file changed, 15 insertions(+), 19 deletions(-)

diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs
index 77a3d849..d0684817 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -3664,7 +3664,7 @@ fn populate_message_view(
                 .show_with_state(cx, tsp_sign_state);
         }
     }
-
+    item.as_view().set_visible(cx, true);
     (item, new_drawn_status)
 }
 
@@ -4328,7 +4328,6 @@ trait SmallStateEventContent {
         item_drawn_status: ItemDrawnStatus,
         new_drawn_status: ItemDrawnStatus,
     ) -> (WidgetRef, ItemDrawnStatus);
-
 }
 
 /// An empty marker struct used for populating redacted messages.
@@ -4451,7 +4450,6 @@ impl SmallStateEventContent for timeline::OtherState {
         };
         (item, new_drawn_status)
     }
-
 }
 
 impl SmallStateEventContent for MemberProfileChange {
@@ -4521,7 +4519,7 @@ fn populate_small_state_event(
     small_state_groups: &mut Vec<(std::ops::Range<usize>, bool, HashMap<usize, (String, Vec<UserEvent>)>)>,
 ) -> (WidgetRef, ItemDrawnStatus) {
     let mut new_drawn_status = item_drawn_status;
-    let (item, existed) = list.item_with_existed(cx, item_id, live_id!(SmallStateEvent));
+    let (item, mut existed) = list.item_with_existed(cx, item_id, live_id!(SmallStateEvent));
     // The content of a small state event view may depend on the profile info,
     // so we can only mark the content as drawn after the profile has been fully drawn and cached.
     let skip_redrawing_profile = existed && item_drawn_status.profile_drawn;
@@ -4571,7 +4569,16 @@ fn populate_small_state_event(
     // Only show the collapsible button on the first item of each group
     item.button(id!(collapsible_button))
         .set_visible(cx, show_collapsible_button);
-
+    let (item, new_drawn_status) = event_content.populate_item_content(
+        cx,
+        list,
+        item_id,
+        item,
+        event_tl_item,
+        &username,
+        item_drawn_status,
+        new_drawn_status,
+    );
     // Render logic based on group state
     if opened {
         // This item should be visible - set appropriate button text if this is a group leader
@@ -4592,23 +4599,12 @@ fn populate_small_state_event(
                 }
             }
         }
-
+        item.as_view().set_visible(cx, true);
         // Render the actual event content
-        event_content.populate_item_content(
-            cx,
-            list,
-            item_id,
-            item,
-            event_tl_item,
-            &username,
-            item_drawn_status,
-            new_drawn_status,
-        )
     } else {
-        let (item, _existed) = list.item_with_existed(cx, item_id, live_id!(Empty));
-        new_drawn_status.content_drawn = true;
-        (item, new_drawn_status)
+       item.as_view().set_visible(cx, false);
     }
+    (item, new_drawn_status)
 }
 
 

From b9a3eb0d6e91624a72211e2c8d827d6650499df3 Mon Sep 17 00:00:00 2001
From: alanpoon <brightshadowx@gmail.com>
Date: Thu, 16 Oct 2025 09:57:37 +0800
Subject: [PATCH 09/26] fix with content_drawn

---
 src/home/room_screen.rs | 124 +++++++++++++++++-----------------------
 1 file changed, 53 insertions(+), 71 deletions(-)

diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs
index d0684817..1d9f77f4 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -443,8 +443,6 @@ live_design! {
         width: Fill,
         height: Fit,
         flow: Down,
-        margin: { top: 4.0, bottom: 4.0}
-        padding: { top: 1.0, bottom: 1.0, right: 10.0 }
         spacing: 0.0
         cursor: Default
         small_state_header = <View> {
@@ -467,29 +465,30 @@ live_design! {
             // Collapsible button for small state event groups
             // Shows on the first item of each group to toggle expansion
             // Text is dynamically updated: ▼ (collapsed) or ▲ (expanded)
-            // collapsible_button = <Button> {
-            //     width: Fit,
-            //     height: Fit,
-            //     margin: { left: 5, right: 5 }
-            //     padding: { left: 4, right: 4, top: 2, bottom: 2 }
-            //     text: "▼"  // Default to collapsed state
-            //     draw_text: {
-            //         text_style: <SMALL_STATE_TEXT_STYLE> {},
-            //         color: #666
-            //     }
-            //     draw_bg: {
-            //         fn pixel(self) -> vec4 {
-            //             let sdf = Sdf2d::viewport(self.pos * self.rect_size);
-            //             return sdf.result
-            //         }
-            //     }
-            // }
+            collapsible_button = <Button> {
+                width: Fit,
+                height: Fit,
+                margin: { left: 5, right: 5 }
+                padding: { left: 4, right: 4, top: 2, bottom: 2 }
+                text: "▼"  // Default to collapsed state
+                draw_text: {
+                    text_style: <SMALL_STATE_TEXT_STYLE> {},
+                    color: #666
+                }
+                draw_bg: {
+                    fn pixel(self) -> vec4 {
+                        let sdf = Sdf2d::viewport(self.pos * self.rect_size);
+                        return sdf.result
+                    }
+                }
+            }
         }
         body = <View> {
             width: Fill,
             height: Fit
             flow: Right,
-            padding: { left: 7.0, top: 2.0, bottom: 2.0 }
+            margin: { top: 4.0, bottom: 4.0}
+            padding: { left: 7.0, top: 2.0, bottom: 2.0, right: 10.0 }
             spacing: 5.0
 
             left_container = <View> {
@@ -524,26 +523,6 @@ live_design! {
                 text: ""
             }
             
-            // Collapsible button for small state event groups
-            // Shows on the first item of each group to toggle expansion
-            // Text is dynamically updated: ▼ (collapsed) or ▲ (expanded)
-            collapsible_button = <Button> {
-                width: Fit,
-                height: Fit,
-                margin: { left: 5, right: 5 }
-                padding: { left: 4, right: 4, top: 2, bottom: 2 }
-                text: "▼"  // Default to collapsed state
-                draw_text: {
-                    text_style: <SMALL_STATE_TEXT_STYLE> {},
-                    color: #666
-                }
-                draw_bg: {
-                    fn pixel(self) -> vec4 {
-                        let sdf = Sdf2d::viewport(self.pos * self.rect_size);
-                        return sdf.result
-                    }
-                }
-            }
             
             // Center the Avatar vertically with respect to the SmallStateEvent content.
             avatar_row = <AvatarRow> { margin: {top: -1.0} }
@@ -1398,6 +1377,7 @@ impl Widget for RoomScreen {
                                     poll_state,
                                     item_drawn_status,
                                     &mut tl_state.small_state_groups,
+                                    &mut tl_state.content_drawn_since_last_update
                                 ),
                                 MsgLikeKind::Redacted => populate_small_state_event(
                                     cx,
@@ -1410,6 +1390,7 @@ impl Widget for RoomScreen {
                                     &RedactedMessageEventMarker,
                                     item_drawn_status,
                                     &mut tl_state.small_state_groups,
+                                    &mut tl_state.content_drawn_since_last_update
                                 ),
                                 MsgLikeKind::UnableToDecrypt(utd) => populate_small_state_event(
                                     cx,
@@ -1422,6 +1403,7 @@ impl Widget for RoomScreen {
                                     utd,
                                     item_drawn_status,
                                     &mut tl_state.small_state_groups,
+                                    &mut tl_state.content_drawn_since_last_update
                                 ),
                                 MsgLikeKind::Other(other) => populate_small_state_event(
                                     cx,
@@ -1434,6 +1416,7 @@ impl Widget for RoomScreen {
                                     other,
                                     item_drawn_status,
                                     &mut tl_state.small_state_groups,
+                                    &mut tl_state.content_drawn_since_last_update
                                 ),
                             },
                             TimelineItemContent::MembershipChange(membership_change) => populate_small_state_event(
@@ -1447,6 +1430,7 @@ impl Widget for RoomScreen {
                                 membership_change,
                                 item_drawn_status,
                                 &mut tl_state.small_state_groups,
+                                &mut tl_state.content_drawn_since_last_update
                             ),
                             TimelineItemContent::ProfileChange(profile_change) => populate_small_state_event(
                                 cx,
@@ -1459,6 +1443,7 @@ impl Widget for RoomScreen {
                                 profile_change,
                                 item_drawn_status,
                                 &mut tl_state.small_state_groups,
+                                &mut tl_state.content_drawn_since_last_update
                             ),
                             TimelineItemContent::OtherState(other) => populate_small_state_event(
                                 cx,
@@ -1471,6 +1456,7 @@ impl Widget for RoomScreen {
                                 other,
                                 item_drawn_status,
                                 &mut tl_state.small_state_groups,
+                                &mut tl_state.content_drawn_since_last_update
                             ),
                             unhandled => {
                                 let item = list.item(cx, item_id, live_id!(SmallStateEvent));
@@ -4180,16 +4166,6 @@ fn is_small_state_event(
             (false, TransitionType::NoChange)
         }
     }
-    // matches!(
-    //     event_tl_item.content(),
-    //     TimelineItemContent::MembershipChange(_) |
-    //     TimelineItemContent::ProfileChange(_) |
-    //     TimelineItemContent::OtherState(_) |
-    //     TimelineItemContent::MsgLike(MsgLikeContent {
-    //         kind: MsgLikeKind::Poll(_) | MsgLikeKind::Redacted | MsgLikeKind::UnableToDecrypt(_),
-    //         ..
-    //     })
-    // )
 }
 
 fn append_user_event(user_event: UserEvent, user_events: &mut HashMap<usize, (String, Vec<UserEvent>)>) {
@@ -4207,9 +4183,7 @@ fn append_user_event(user_event: UserEvent, user_events: &mut HashMap<usize, (St
         }
     }
     if let Some(old_group_id) = old_group_id {
-        println!("old_group_id: {} display_name: {}", old_group_id, user_event.display_name);
         if let Some(data) = user_events.remove(&old_group_id) {
-             println!("old_group_id: removed {} replacement {:?} user_events: {:#?}", old_group_id, item_id, user_events);
             user_events.insert(item_id, data);
             return;
         }
@@ -4220,7 +4194,7 @@ fn append_user_event(user_event: UserEvent, user_events: &mut HashMap<usize, (St
 /// Dynamically updates small state groups as timeline items are processed.
 /// This function is called during populate_small_state_event to build groups on-demand.
 /// Since iteration starts from the biggest item_id and goes backwards, we handle reverse grouping.
-/// Returns a tuple whether to display the message, and whether to display the collapsible button and whether collapsible list is expanded.
+/// Returns a tuple whether to display the message, and whether to display the collapsible button and whether collapsible list is expanded and range to redraw
 fn update_small_state_groups_for_item(
     item_id: usize,
     username: String,
@@ -4228,11 +4202,10 @@ fn update_small_state_groups_for_item(
     previous_item: Option<&Arc<TimelineItem>>,
     next_item: Option<&Arc<TimelineItem>>,
     small_state_groups: &mut Vec<(std::ops::Range<usize>, bool, HashMap<usize, (String, Vec<UserEvent>)>)>,
-) -> (bool, bool, bool) {
+) -> (bool, bool, bool, Range<usize>) {
     let (current_item_is_small_state, transition) = is_small_state_event(current_item);
-    //println!("update_small_state_groups_for_item: item_id: {}, transition_type: {:?}, current_item_is_small_state: {}", item_id, transition_type, current_item_is_small_state);
     if !current_item_is_small_state {
-        return (true, false, false); // Not a small state event, draw as individual item, no debug button
+        return (true, false, false, Range::default()); // Not a small state event, draw as individual item, no debug button
     }
 
     // check if the next item (item_id + 1) is a small state event to continue grouping
@@ -4251,7 +4224,7 @@ fn update_small_state_groups_for_item(
         .map(is_small_state_event)
         .unwrap_or((false, TransitionType::NoChange));
     if !previous_item_is_small_state && !next_item_is_small_state {
-        return (true, false, false); // Isolated small state event, no debug button
+        return (true, false, false,  Range::default()); // Isolated small state event, no debug button
     }
 
     // Check if this item is already part of an existing group or can extend one
@@ -4263,26 +4236,24 @@ fn update_small_state_groups_for_item(
             index: item_id,
         };
         if range.start == item_id {
-            println!("range.start");
             // Add user event to the HashMap using item_id as key with userId and Vec<UserEvent>
+            println!("range.start");
             println!("range {:?} username: {}", range, username);
             append_user_event(user_event, user_events_map);
-            return (true, range.len() > 2, *is_open); // Start of group, show debug button
+            return (true, range.len() > 2, *is_open, range.clone()); // Start of group, show debug button
         }
         if range.contains(&item_id) {
             // Add user event to the HashMap using item_id as key with userId and Vec<UserEvent>
             println!("range {:?} username: {}", range, username);
             append_user_event(user_event, user_events_map);
-            return (*is_open || range.len() <= 2, false, *is_open); // Item is in group but not at start, no debug button
+            return (*is_open || range.len() <= 2, false, *is_open,  range.clone()); // Item is in group but not at start, no debug button
         }
         // Since we're iterating backwards (from highest to lowest item_id),
         if range.start == item_id + 1 {
-            println!("range {:?} username: {}", range, username);
             // Extend this group backwards to include current item
             *range = item_id..range.end;
-            println!("after range {:?} username: {}", range, username);
             append_user_event(user_event, user_events_map);
-            return (*is_open || range.len() <= 2, false, false); // Extended group, no debug button for this item
+            return (*is_open || range.len() <= 2, false, false,  range.clone()); // Extended group, no debug button for this item
         }
     }
     if next_item_is_small_state {
@@ -4296,8 +4267,9 @@ fn update_small_state_groups_for_item(
         append_user_event(user_event, &mut user_events_map);
         // Plus 2 to include the next item into the group.
         small_state_groups.push((item_id..(item_id + 2), false, user_events_map));
+        return (false, false, false, item_id..(item_id + 2));
     }
-    (false, false, false) // Return collapsed state, no debug button
+    (false, false, false,  Range::default()) // Return collapsed state, no debug button
 }
 
 /// A trait for abstracting over the different types of timeline events
@@ -4437,7 +4409,6 @@ impl SmallStateEventContent for timeline::OtherState {
         _item_drawn_status: ItemDrawnStatus,
         mut new_drawn_status: ItemDrawnStatus,
     ) -> (WidgetRef, ItemDrawnStatus) {
-        println!("populate_transition_type OtherState");
         let item = if let Some(text_preview) = text_preview_of_other_state(self, false) {
             item.label(id!(content))
                 .set_text(cx, &text_preview.format_with(username, false));
@@ -4517,9 +4488,10 @@ fn populate_small_state_event(
     event_content: &impl SmallStateEventContent,
     item_drawn_status: ItemDrawnStatus,
     small_state_groups: &mut Vec<(std::ops::Range<usize>, bool, HashMap<usize, (String, Vec<UserEvent>)>)>,
+    content_drawn_since_last_update: &mut RangeSet<usize>,
 ) -> (WidgetRef, ItemDrawnStatus) {
     let mut new_drawn_status = item_drawn_status;
-    let (item, mut existed) = list.item_with_existed(cx, item_id, live_id!(SmallStateEvent));
+    let (item, existed) = list.item_with_existed(cx, item_id, live_id!(SmallStateEvent));
     // The content of a small state event view may depend on the profile info,
     // so we can only mark the content as drawn after the profile has been fully drawn and cached.
     let skip_redrawing_profile = existed && item_drawn_status.profile_drawn;
@@ -4558,7 +4530,7 @@ fn populate_small_state_event(
     // - opened: whether this individual item should be rendered (based on group state)
     // - show_collapsible_button: true if this item is the first in a collapsible group
     // - expanded: current expansion state of the group (for button text)
-    let (opened, show_collapsible_button, expanded) = update_small_state_groups_for_item(
+    let (opened, show_collapsible_button, expanded, to_redraw) = update_small_state_groups_for_item(
         item_id,
         username.clone(),
         event_tl_item,
@@ -4566,10 +4538,11 @@ fn populate_small_state_event(
         next_event,
         small_state_groups,
     );
+    println!("populate_small_state_event: item_id: {}, opened: {}, show_collapsible_button: {}, expanded: {} small_state_groups {:?}", item_id, opened, show_collapsible_button, expanded, small_state_groups);
     // Only show the collapsible button on the first item of each group
     item.button(id!(collapsible_button))
         .set_visible(cx, show_collapsible_button);
-    let (item, new_drawn_status) = event_content.populate_item_content(
+    let (item, mut new_drawn_status) = event_content.populate_item_content(
         cx,
         list,
         item_id,
@@ -4598,12 +4571,21 @@ fn populate_small_state_event(
                     break;
                 }
             }
+            item.view(id!(body)).set_visible(cx, expanded);
+        } else {
+            item.view(id!(body)).set_visible(cx, true);
         }
-        item.as_view().set_visible(cx, true);
-        // Render the actual event content
     } else {
-       item.as_view().set_visible(cx, false);
+       item.view(id!(body)).set_visible(cx, false);
+    }
+    println!("to_redraw: {:?} item_id: {} content_drawn_since_last_update:{:?}", to_redraw, item_id ,content_drawn_since_last_update);
+    if !to_redraw.is_empty() {
+        content_drawn_since_last_update.remove(to_redraw.clone());
+        if to_redraw.contains(&item_id) {
+            new_drawn_status.content_drawn = false; // Force redraw if part of a group that changed
+        }     
     }
+   
     (item, new_drawn_status)
 }
 

From 5d9ab194e7d067621a9cd9f579e61e1dd8341beb Mon Sep 17 00:00:00 2001
From: alanpoon <brightshadowx@gmail.com>
Date: Fri, 17 Oct 2025 16:19:51 +0800
Subject: [PATCH 10/26] before changing hashmap key from sender to state_key

---
 src/home/room_screen.rs              | 264 +++++++++++++++++----------
 src/shared/membership_transitions.rs | 191 +++++++++++++++----
 2 files changed, 324 insertions(+), 131 deletions(-)

diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs
index 1d9f77f4..3981fdb7 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -30,7 +30,7 @@ use crate::{
         user_profile::{AvatarState, ShowUserProfileAction, UserProfile, UserProfileAndRoomId, UserProfilePaneInfo, UserProfileSlidingPaneRef, UserProfileSlidingPaneWidgetExt},
         user_profile_cache,
     }, room::typing_notice::TypingNoticeWidgetExt, shared::{
-        avatar::AvatarWidgetRefExt, callout_tooltip::TooltipAction, html_or_plaintext::{HtmlOrPlaintextRef, HtmlOrPlaintextWidgetRefExt, RobrixHtmlLinkAction}, jump_to_bottom_button::{JumpToBottomButtonWidgetExt, UnreadMessageCount}, membership_transitions::{generate_summary, get_transition_from_membership_change, get_transition_from_other_events, TransitionType, UserEvent}, popup_list::{enqueue_popup_notification, PopupItem, PopupKind}, restore_status_view::RestoreStatusViewWidgetExt, styles::*, text_or_image::{TextOrImageRef, TextOrImageWidgetRefExt}, timestamp::TimestampWidgetRefExt
+        avatar::AvatarWidgetRefExt, callout_tooltip::TooltipAction, html_or_plaintext::{HtmlOrPlaintextRef, HtmlOrPlaintextWidgetRefExt, RobrixHtmlLinkAction}, jump_to_bottom_button::{JumpToBottomButtonWidgetExt, UnreadMessageCount}, membership_transitions::{convert_to_timeline_event, generate_summary, get_transition_from_membership_change, get_transition_from_other_events, is_small_state_event, TransitionType, UserEvent}, popup_list::{enqueue_popup_notification, PopupItem, PopupKind}, restore_status_view::RestoreStatusViewWidgetExt, styles::*, text_or_image::{TextOrImageRef, TextOrImageWidgetRefExt}, timestamp::TimestampWidgetRefExt
     }, sliding_sync::{get_client, submit_async_request, take_timeline_endpoints, BackwardsPaginateUntilEventRequest, MatrixRequest, PaginationDirection, TimelineEndpoints, TimelineRequestSender, UserPowerLevels}, utils::{self, room_name_or_id, unix_time_millis_to_datetime, ImageFormat, MEDIA_THUMBNAIL_FORMAT}
 };
 use crate::home::event_reaction_list::ReactionListWidgetRefExt;
@@ -932,23 +932,51 @@ impl Widget for RoomScreen {
                 // Handle collapsible button click in SmallStateEvent
                 if wr.button(id!(collapsible_button)).clicked(actions) {
                     if let Some(tl_state) = &mut self.tl_state {
-                        for (range, open, _user_events_map) in &mut tl_state.small_state_groups {
-                            if range.start == item_id {
-                                // Toggle the group's open/closed state
-                                *open = !*open;
-                                let omit_first_range = (range.start+1)..range.end;
-                                // Force redraw of all items in this group by clearing their cached drawn status
-                                tl_state.content_drawn_since_last_update.remove(omit_first_range.clone());
-                                tl_state.profile_drawn_since_last_update.remove(omit_first_range.clone());
-                                
-                                // Update button text to reflect new state:
-                                // ▲ (up arrow) = expanded/open - items are visible
-                                // ▼ (down arrow) = collapsed/closed - items are hidden
-                                let button_text = if *open { "▲" } else { "▼" };
-                                wr.button(id!(collapsible_button)).set_text(cx, button_text);
-                                // If the last item is a group of small state events, scroll to the end when it is expanded.
-                                if range.end == tl_state.items.len() && *open {
-                                    portal_list.smooth_scroll_to_end(cx, 90.0, None);
+                        println!("item_id: {} collapsible_button clicked", item_id);
+                        let mut is_creation_group = false;
+                        let (creation_hashmap, creation_event, open) = &mut tl_state.creation_event;
+                        if let Some(creation_event) = &creation_event {
+                            if let Some(range) = creation_hashmap.get(&creation_event.sender) {
+                                if range.start == item_id {
+                                    // Toggle the group's open/closed state
+                                    *open = !*open;
+                                    let omit_first_range = (range.start+1)..range.end;
+                                    // Force redraw of all items in this group by clearing their cached drawn status
+                                    tl_state.content_drawn_since_last_update.remove(omit_first_range.clone());
+                                    tl_state.profile_drawn_since_last_update.remove(omit_first_range.clone());
+                                    
+                                    // Update button text to reflect new state:
+                                    // ▲ (up arrow) = expanded/open - items are visible
+                                    // ▼ (down arrow) = collapsed/closed - items are hidden
+                                    let button_text = if *open { "▲" } else { "▼" };
+                                    wr.button(id!(collapsible_button)).set_text(cx, button_text);
+                                    // If the last item is a group of small state events, scroll to the end when it is expanded.
+                                    if range.end == tl_state.items.len() && *open {
+                                        portal_list.smooth_scroll_to_end(cx, 90.0, None);
+                                    }
+                                    is_creation_group = true;
+                                }
+                            }
+                        }
+                        if !is_creation_group {
+                            for (range, open, _user_events_map) in &mut tl_state.small_state_groups {
+                                if range.start == item_id {
+                                    // Toggle the group's open/closed state
+                                    *open = !*open;
+                                    let omit_first_range = (range.start+1)..range.end;
+                                    // Force redraw of all items in this group by clearing their cached drawn status
+                                    tl_state.content_drawn_since_last_update.remove(omit_first_range.clone());
+                                    tl_state.profile_drawn_since_last_update.remove(omit_first_range.clone());
+                                    
+                                    // Update button text to reflect new state:
+                                    // ▲ (up arrow) = expanded/open - items are visible
+                                    // ▼ (down arrow) = collapsed/closed - items are hidden
+                                    let button_text = if *open { "▲" } else { "▼" };
+                                    wr.button(id!(collapsible_button)).set_text(cx, button_text);
+                                    // If the last item is a group of small state events, scroll to the end when it is expanded.
+                                    if range.end == tl_state.items.len() && *open {
+                                        portal_list.smooth_scroll_to_end(cx, 90.0, None);
+                                    }
                                 }
                             }
                         }
@@ -1377,7 +1405,8 @@ impl Widget for RoomScreen {
                                     poll_state,
                                     item_drawn_status,
                                     &mut tl_state.small_state_groups,
-                                    &mut tl_state.content_drawn_since_last_update
+                                    &mut tl_state.content_drawn_since_last_update,
+                                    &mut tl_state.creation_event
                                 ),
                                 MsgLikeKind::Redacted => populate_small_state_event(
                                     cx,
@@ -1390,7 +1419,8 @@ impl Widget for RoomScreen {
                                     &RedactedMessageEventMarker,
                                     item_drawn_status,
                                     &mut tl_state.small_state_groups,
-                                    &mut tl_state.content_drawn_since_last_update
+                                    &mut tl_state.content_drawn_since_last_update,
+                                    &mut tl_state.creation_event
                                 ),
                                 MsgLikeKind::UnableToDecrypt(utd) => populate_small_state_event(
                                     cx,
@@ -1403,7 +1433,8 @@ impl Widget for RoomScreen {
                                     utd,
                                     item_drawn_status,
                                     &mut tl_state.small_state_groups,
-                                    &mut tl_state.content_drawn_since_last_update
+                                    &mut tl_state.content_drawn_since_last_update,
+                                    &mut tl_state.creation_event
                                 ),
                                 MsgLikeKind::Other(other) => populate_small_state_event(
                                     cx,
@@ -1416,7 +1447,8 @@ impl Widget for RoomScreen {
                                     other,
                                     item_drawn_status,
                                     &mut tl_state.small_state_groups,
-                                    &mut tl_state.content_drawn_since_last_update
+                                    &mut tl_state.content_drawn_since_last_update,
+                                    &mut tl_state.creation_event
                                 ),
                             },
                             TimelineItemContent::MembershipChange(membership_change) => populate_small_state_event(
@@ -1430,7 +1462,8 @@ impl Widget for RoomScreen {
                                 membership_change,
                                 item_drawn_status,
                                 &mut tl_state.small_state_groups,
-                                &mut tl_state.content_drawn_since_last_update
+                                &mut tl_state.content_drawn_since_last_update,
+                                &mut tl_state.creation_event
                             ),
                             TimelineItemContent::ProfileChange(profile_change) => populate_small_state_event(
                                 cx,
@@ -1443,7 +1476,8 @@ impl Widget for RoomScreen {
                                 profile_change,
                                 item_drawn_status,
                                 &mut tl_state.small_state_groups,
-                                &mut tl_state.content_drawn_since_last_update
+                                &mut tl_state.content_drawn_since_last_update,
+                                &mut tl_state.creation_event
                             ),
                             TimelineItemContent::OtherState(other) => populate_small_state_event(
                                 cx,
@@ -1456,7 +1490,8 @@ impl Widget for RoomScreen {
                                 other,
                                 item_drawn_status,
                                 &mut tl_state.small_state_groups,
-                                &mut tl_state.content_drawn_since_last_update
+                                &mut tl_state.content_drawn_since_last_update,
+                                &mut tl_state.creation_event
                             ),
                             unhandled => {
                                 let item = list.item(cx, item_id, live_id!(SmallStateEvent));
@@ -1672,6 +1707,15 @@ impl RoomScreen {
                             // Note: If we want to preserve events during shifts, we would need to
                             // update the HashMap keys and UserEvent indices here
                         }
+                        let (creation_hashmap, creation_event, is_open) = &mut tl.creation_event;
+                        for (_user_id, range) in creation_hashmap.iter_mut() {
+                            let new_start = (range.start as i32 + shift).max(0) as usize;
+                            let new_end = (range.end as i32 + shift).max(0) as usize;
+                            *range = new_start..new_end;
+                        }
+                        if let Some(creation_event) = creation_event {
+                            creation_event.index = (creation_event.index as i32 + shift).max(0) as usize;
+                        }
                     }
                     tl.items = new_items;
                     done_loading = true;
@@ -2420,6 +2464,7 @@ impl RoomScreen {
                 latest_own_user_receipt: None,
                 tombstone_info: successor_room,
                 small_state_groups: Vec::new(),
+                creation_event: (HashMap::new(), None, false),
             };
             (tl_state, true)
         };
@@ -3003,7 +3048,8 @@ struct TimelineUiState {
     /// A vector of ranges of small state items that are grouped together in the UI.
     /// 
     /// There is a collapsible to the right of the message of the first item in the group. 
-    small_state_groups: Vec<(std::ops::Range<usize>, bool, HashMap<usize, (String, Vec<UserEvent>)>)>
+    small_state_groups: Vec<(std::ops::Range<usize>, bool, HashMap<usize, (String, Vec<UserEvent>)>)>,
+    creation_event: (HashMap<std::string::String, std::ops::Range<usize>>, std::option::Option<UserEvent>, bool),
 }
 
 #[derive(Default, Debug)]
@@ -4129,50 +4175,13 @@ fn populate_preview_of_timeline_item(
     widget_out.show_html(cx, html);
 }
 
-/// Checks if a event timeline item is a small state event.
-/// Returns true if the item is a small state event that can be grouped.
-fn is_small_state_event(
-    event_tl_item: &EventTimelineItem,
-) -> (bool, TransitionType) {
-    match event_tl_item.content() {
-        TimelineItemContent::MembershipChange(change) => (true, change.change().map(
-            |f| get_transition_from_membership_change(&f)
-            ).unwrap_or_default()
-        ),
-        TimelineItemContent::ProfileChange(change) => {
-            let transition_type = if let Some(_) = change.avatar_url_change() {
-                TransitionType::ChangedAvatar
-            } else if let Some(_) = change.displayname_change() {
-                TransitionType::ChangedName
-            } else {
-                TransitionType::NoChange
-            };
-            (true, transition_type)
-        }
-        TimelineItemContent::OtherState(other_state) => (true, get_transition_from_other_events(other_state.content(), other_state.state_key())),
-        TimelineItemContent::MsgLike(MsgLikeContent {
-            kind: MsgLikeKind::Poll(_),
-            ..
-        }) => (true, TransitionType::NoChange),
-        TimelineItemContent::MsgLike(MsgLikeContent {
-            kind: MsgLikeKind::Redacted,
-            ..
-        }) => (true, TransitionType::MessageRemoved),
-        TimelineItemContent::MsgLike(MsgLikeContent {
-            kind: MsgLikeKind::UnableToDecrypt(_),
-            ..
-        }) => (true, TransitionType::UnableToDecrypt),
-        _ => {
-            (false, TransitionType::NoChange)
-        }
-    }
-}
+
 
 fn append_user_event(user_event: UserEvent, user_events: &mut HashMap<usize, (String, Vec<UserEvent>)>) {
     let item_id = user_event.index;
     let mut old_group_id = None;
     for (group_id, (user_id, user_events_vec)) in user_events.iter_mut() {
-        if user_event.user_id == user_id.clone() {
+        if user_event.sender == user_id.clone() {
             if user_events_vec.iter().filter(|user_event| user_event.index == item_id).count() == 0 {
                 user_events_vec.push(user_event.clone());
             }
@@ -4188,7 +4197,7 @@ fn append_user_event(user_event: UserEvent, user_events: &mut HashMap<usize, (St
             return;
         }
     }
-    user_events.insert(item_id, (user_event.user_id.clone(), vec![user_event]));
+    user_events.insert(item_id, (user_event.sender.clone(), vec![user_event]));
 }
 
 /// Dynamically updates small state groups as timeline items are processed.
@@ -4202,52 +4211,111 @@ fn update_small_state_groups_for_item(
     previous_item: Option<&Arc<TimelineItem>>,
     next_item: Option<&Arc<TimelineItem>>,
     small_state_groups: &mut Vec<(std::ops::Range<usize>, bool, HashMap<usize, (String, Vec<UserEvent>)>)>,
+    creation_event: &mut (HashMap<String,std::ops::Range<usize>>, Option<UserEvent>, bool),
 ) -> (bool, bool, bool, Range<usize>) {
-    let (current_item_is_small_state, transition) = is_small_state_event(current_item);
+    let (current_item_is_small_state, transition, state_key) = is_small_state_event(current_item);
     if !current_item_is_small_state {
         return (true, false, false, Range::default()); // Not a small state event, draw as individual item, no debug button
     }
 
     // check if the next item (item_id + 1) is a small state event to continue grouping
-    let (next_item_is_small_state, _) = next_item
+    let (next_item_is_small_state, _, _) = next_item
         .and_then(|timeline_item| match timeline_item.kind() {
             TimelineItemKind::Event(event_tl_item) => Some(event_tl_item),
             _ => None,
         })
         .map(is_small_state_event)
-        .unwrap_or((false, TransitionType::NoChange));
-    let (previous_item_is_small_state, _) = previous_item
+        .unwrap_or((false, TransitionType::NoChange, None));
+    let (previous_item_is_small_state, _, _) = previous_item
         .and_then(|timeline_item| match timeline_item.kind() {
             TimelineItemKind::Event(event_tl_item) => Some(event_tl_item),
             _ => None,
         })
         .map(is_small_state_event)
-        .unwrap_or((false, TransitionType::NoChange));
+        .unwrap_or((false, TransitionType::NoChange, None));
     if !previous_item_is_small_state && !next_item_is_small_state {
         return (true, false, false,  Range::default()); // Isolated small state event, no debug button
     }
-
+    
+    let user_event = convert_to_timeline_event(current_item.clone(), username.clone(), item_id);
+    //println!("user_event: {:?}", user_event);
+    let (creation_events_map, creation_user_event, is_open) = creation_event;
+    if user_event.event_type == "m.room.create" {
+        println!("m.room.create: small_state_groups {:?}", small_state_groups);
+        *creation_user_event = Some(user_event.clone());
+        println!("creation_events_map  {:?}", creation_events_map);
+        for (user_id, join_range) in creation_events_map.iter_mut() {
+            if user_id == &user_event.sender {
+                if join_range.start == item_id + 1 {
+                    println!("join_range changes in creation user event {:?} user_id: {:?}", join_range, user_id);
+                    *join_range = item_id..join_range.end;
+                }
+                return (true, true, false, Range::default()); // Continue creation group
+            }
+        }
+        return (true, true, false, Range::default());
+    }
+    if user_event.membership.as_ref().unwrap_or(&"".to_string()) == "join" || 
+        user_event.event_type == "m.room.state" || user_event.event_type == "m.room.name"
+    {
+        for (user_id, join_range) in creation_events_map.iter_mut() {
+            if user_id == &user_event.sender {
+                if join_range.start == item_id + 1 {
+                    println!("join_range changes outside creation user event {:?}", join_range);
+                    *join_range = item_id..join_range.end;
+                    if let Some(creation_user_event) = creation_user_event {
+                        if creation_user_event.sender != user_event.sender {
+                            return (true, false, *is_open, join_range.clone()); // Start of group, show debug button
+                        }
+                    }
+                }
+                return (*is_open, false, false, Range::default()); // Continue creation group
+            }
+        }
+        creation_events_map.insert(user_event.sender.clone(), item_id..(item_id + 2));
+        return (true, false, false, item_id..(item_id + 2)); // New creation group created
+    }
+    
+    // if let Some((creation_event, creation_group_range, is_open)) = creation_event {
+    //     if user_event.sender == creation_event.sender && user_event.membership == Some("join".to_string()) {
+    //         println!("Continuing creation group: {:?} item_id: {}", creation_group_range, item_id);
+    //         if creation_group_range.start == item_id + 1 {
+    //             *creation_group_range = item_id..creation_group_range.end;
+    //             return (*is_open, false, false, Range::default()); // Continue creation group
+    //         }
+    //     }
+    //     if let Some(state_key) = &user_event.state_key {
+    //         println!("state_key: {}", state_key);
+    //         if state_key == &creation_event.sender {
+    //             println!("creation_group_range: {:?} item_id: {} small_state_groups: {:?}", creation_group_range, item_id, small_state_groups);
+    //             if creation_group_range.start == item_id + 1 {
+    //                 *creation_group_range = item_id..creation_group_range.end;
+    //                 return (*is_open, false, false, creation_group_range.clone()); // Continue creation group
+    //             }
+    //         }
+    //     }
+    // } else {
+    //     if user_event.event_type == "m.room.create" {
+    //         *creation_event = Some((user_event.clone(), item_id..(item_id + 2), true));
+    //         return (true, true, true, item_id..(item_id + 2)); // New creation group created
+    //     }
+    // }
     // Check if this item is already part of an existing group or can extend one
     for (range, is_open, user_events_map) in small_state_groups.iter_mut() {
-        let user_event = UserEvent {
-            user_id: current_item.sender().to_string(),
-            display_name: username.clone(),
-            transition,
-            index: item_id,
-        };
         if range.start == item_id {
             // Add user event to the HashMap using item_id as key with userId and Vec<UserEvent>
-            println!("range.start");
-            println!("range {:?} username: {}", range, username);
+            // println!("range.start");
+            // println!("range {:?} username: {}", range, username);
             append_user_event(user_event, user_events_map);
-            return (true, range.len() > 2, *is_open, range.clone()); // Start of group, show debug button
+            return (true, range.len() > 2, *is_open, Range::default()); // Start of group, show debug button
         }
         if range.contains(&item_id) {
             // Add user event to the HashMap using item_id as key with userId and Vec<UserEvent>
-            println!("range {:?} username: {}", range, username);
+            //println!("range {:?} username: {}", range, username);
             append_user_event(user_event, user_events_map);
-            return (*is_open || range.len() <= 2, false, *is_open,  range.clone()); // Item is in group but not at start, no debug button
+            return (*is_open || range.len() <= 2, false, *is_open,  Range::default()); // Item is in group but not at start, no debug button
         }
+        
         // Since we're iterating backwards (from highest to lowest item_id),
         if range.start == item_id + 1 {
             // Extend this group backwards to include current item
@@ -4258,12 +4326,6 @@ fn update_small_state_groups_for_item(
     }
     if next_item_is_small_state {
         let mut user_events_map = HashMap::new();
-        let user_event = UserEvent {
-            user_id: current_item.sender().to_string(),
-            display_name: username.clone(),
-            transition,
-            index: item_id,
-        };
         append_user_event(user_event, &mut user_events_map);
         // Plus 2 to include the next item into the group.
         small_state_groups.push((item_id..(item_id + 2), false, user_events_map));
@@ -4272,6 +4334,8 @@ fn update_small_state_groups_for_item(
     (false, false, false,  Range::default()) // Return collapsed state, no debug button
 }
 
+
+
 /// A trait for abstracting over the different types of timeline events
 /// that can be displayed in a `SmallStateEvent` widget.
 trait SmallStateEventContent {
@@ -4489,6 +4553,7 @@ fn populate_small_state_event(
     item_drawn_status: ItemDrawnStatus,
     small_state_groups: &mut Vec<(std::ops::Range<usize>, bool, HashMap<usize, (String, Vec<UserEvent>)>)>,
     content_drawn_since_last_update: &mut RangeSet<usize>,
+    creation_event: &mut (HashMap<std::string::String, std::ops::Range<usize>>, std::option::Option<UserEvent>, bool),
 ) -> (WidgetRef, ItemDrawnStatus) {
     let mut new_drawn_status = item_drawn_status;
     let (item, existed) = list.item_with_existed(cx, item_id, live_id!(SmallStateEvent));
@@ -4537,8 +4602,9 @@ fn populate_small_state_event(
         prev_event,
         next_event,
         small_state_groups,
+        creation_event
     );
-    println!("populate_small_state_event: item_id: {}, opened: {}, show_collapsible_button: {}, expanded: {} small_state_groups {:?}", item_id, opened, show_collapsible_button, expanded, small_state_groups);
+    //println!("populate_small_state_event: item_id: {}, opened: {}, show_collapsible_button: {} creation_event: {:?}", item_id, opened, show_collapsible_button, creation_event);
     // Only show the collapsible button on the first item of each group
     item.button(id!(collapsible_button))
         .set_visible(cx, show_collapsible_button);
@@ -4562,6 +4628,20 @@ fn populate_small_state_event(
             let button_text = if expanded { "▲" } else { "▼" };
             item.button(id!(collapsible_button))
                 .set_text(cx, button_text);
+            if let Some(creation_user_event) = &creation_event.1 {
+                for (user_id, creation_range) in creation_event.0.iter() {
+                    if event_tl_item.sender().to_string() == *user_id {
+                        if creation_range.start == item_id {
+                            let summary_text = format!("{} created and configured the room", creation_user_event.display_name);
+                            item.view(id!(small_state_header)).set_visible(cx, true);
+                            item.label(id!(small_state_header.summary_text)).set_text(cx, &summary_text);
+                            item.view(id!(body)).set_visible(cx, false);
+                            return (item, new_drawn_status);
+                        }
+                    }
+                }
+            }
+            println!("small_state_groups item_id: {} small_state_groups: {:?} ", item_id, small_state_groups);
             for (range, _, user_events_map) in small_state_groups {
                 if range.start == item_id {
                     // Pass HashMap directly to generate_summary
@@ -4579,11 +4659,11 @@ fn populate_small_state_event(
        item.view(id!(body)).set_visible(cx, false);
     }
     println!("to_redraw: {:?} item_id: {} content_drawn_since_last_update:{:?}", to_redraw, item_id ,content_drawn_since_last_update);
-    if !to_redraw.is_empty() {
+    if !to_redraw.is_empty() && to_redraw.end > to_redraw.start {
         content_drawn_since_last_update.remove(to_redraw.clone());
         if to_redraw.contains(&item_id) {
             new_drawn_status.content_drawn = false; // Force redraw if part of a group that changed
-        }     
+        }
     }
    
     (item, new_drawn_status)
diff --git a/src/shared/membership_transitions.rs b/src/shared/membership_transitions.rs
index 132260a5..654b2b09 100644
--- a/src/shared/membership_transitions.rs
+++ b/src/shared/membership_transitions.rs
@@ -1,5 +1,7 @@
 use std::collections::HashMap;
-use matrix_sdk_ui::timeline::{AnyOtherFullStateEventContent, MembershipChange};
+use makepad_widgets::event;
+use matrix_sdk::crypto::types::events;
+use matrix_sdk_ui::timeline::{AnyOtherFullStateEventContent, EventTimelineItem, MembershipChange, MsgLikeContent, MsgLikeKind, TimelineItemContent};
 use ruma::UserId;
 
 #[derive(Default, Debug, Clone, Copy, PartialEq, Eq, Hash)]
@@ -27,11 +29,17 @@ pub enum TransitionType {
 }
 
 #[derive(Debug, Clone, PartialEq)]
-pub struct UserEvent {
-    pub user_id: String,
-    pub display_name: String,
+pub struct UserEvent {    
+    pub event_type: String,
     pub transition: TransitionType,
     pub index: usize,
+    pub is_state: bool,
+    pub is_redacted: bool,
+    pub should_show: bool,
+    pub sender: String,
+    pub display_name: String,
+    pub state_key: Option<String>,
+    pub membership: Option<String>,
 }
 
 /// Canonicalize neighbouring transitions, e.g. [Joined, Left] -> [JoinedAndLeft]
@@ -123,6 +131,82 @@ fn format_name_list(names: &[String], max_names: usize) -> String {
     }
 }
 
+pub fn convert_to_timeline_event(event_item: EventTimelineItem, user_name: String, index: usize) -> UserEvent {
+    use matrix_sdk_ui::timeline::{TimelineItemContent, MembershipChange};
+    
+    let event_type = match event_item.content() {
+        TimelineItemContent::MsgLike(msg_like) => {
+            use matrix_sdk_ui::timeline::MsgLikeKind;
+            match &msg_like.kind {
+                MsgLikeKind::Message(_) => "m.room.message",
+                MsgLikeKind::Poll(_) => "m.room.poll",
+                MsgLikeKind::Redacted => "m.room.redacted",
+                MsgLikeKind::UnableToDecrypt(_) => "m.room.encrypted",
+                _ => "m.room.message",
+            }
+        }
+        TimelineItemContent::MembershipChange(_) => "m.room.member",
+        TimelineItemContent::ProfileChange(_) => "m.room.member", // Profile changes are member events
+        TimelineItemContent::OtherState(other) => {
+            if !other.state_key().is_empty() {
+                println!("OtherState event with state_key: {}", other.state_key()); 
+            }
+            // Extract the actual event type from the state event
+            match other.content() {
+                matrix_sdk_ui::timeline::AnyOtherFullStateEventContent::RoomCreate(_) => "m.room.create",
+                matrix_sdk_ui::timeline::AnyOtherFullStateEventContent::RoomName(_) => "m.room.name",
+                matrix_sdk_ui::timeline::AnyOtherFullStateEventContent::RoomTopic(_) => "m.room.topic",
+                matrix_sdk_ui::timeline::AnyOtherFullStateEventContent::RoomServerAcl(_) => "m.room.server_acl",
+                matrix_sdk_ui::timeline::AnyOtherFullStateEventContent::RoomPinnedEvents(_) => "m.room.pinned_events",
+                // matrix_sdk_ui::timeline::AnyOtherFullStateEventContent::RoomJoinRules(_) => "m.room.join_rules",
+                // matrix_sdk_ui::timeline::AnyOtherFullStateEventContent::RoomHistoryVisibility(_) => "m.room.history_visibility",
+                _ => "m.room.state",
+            }
+        }
+        _ => "unknown",
+    }.to_string();
+
+    let (state_key, membership) = match event_item.content() {
+        TimelineItemContent::MembershipChange(change) => {
+            let state_key = Some(change.user_id().to_string());
+            let membership = match change.change() {
+                Some(MembershipChange::Joined) => Some("join".to_string()),
+                Some(MembershipChange::Left) => Some("leave".to_string()),
+                Some(MembershipChange::Invited) => Some("invite".to_string()),
+                Some(MembershipChange::Banned) => Some("ban".to_string()),
+                _ => None,
+            };
+            (state_key, membership)
+        }
+        TimelineItemContent::OtherState(other) => {
+            if !other.state_key().is_empty() {
+                println!("OtherState event with state_key: {}", other.state_key());
+            }
+            (Some(other.state_key().to_string()), None)
+        }
+        _ => (None, None),
+    };
+    let (_, transistion_type, _) = is_small_state_event(&event_item);
+    //println!("state_key: {:?}, membership: {:?}, transistion_type: {:?}, event_type: {}", state_key, membership, transistion_type, event_type);
+    UserEvent {
+        index,
+        display_name: user_name,
+        event_type,
+        transition: transistion_type,
+        is_state: matches!(event_item.content(), 
+            TimelineItemContent::MembershipChange(_) | 
+            TimelineItemContent::ProfileChange(_) | 
+            TimelineItemContent::OtherState(_)
+        ),
+        is_redacted: matches!(event_item.content(), 
+            TimelineItemContent::MsgLike(msg) if matches!(msg.kind, matrix_sdk_ui::timeline::MsgLikeKind::Redacted)
+        ),
+        should_show: true, // For now, assume all events should be shown
+        sender: event_item.sender().to_string(),
+        state_key,
+        membership,
+    }
+}
 /// Convert Matrix membership change → transition type
 pub fn get_transition_from_membership_change(change: &MembershipChange) -> TransitionType {
     use matrix_sdk_ui::timeline::MembershipChange;
@@ -185,28 +269,58 @@ pub fn get_transition_from_other_events(content: &AnyOtherFullStateEventContent,
 /// a new `UserEvent` is appended to the list of user events for that user ID.
 ///
 /// The function prints debug messages to help with debugging.
-pub fn append_user_event(index: usize, user_id: &UserId, username: String, transition: TransitionType, user_events: &mut Vec<(String, Vec<UserEvent>)>) {
-    if let TransitionType::HiddenEvent = transition {
+pub fn append_user_event(user_event: UserEvent, user_events: &mut Vec<(String, Vec<UserEvent>)>) {
+    if let TransitionType::HiddenEvent = user_event.transition {
         return;
     }
-    let user_event = UserEvent{
-        user_id: user_id.to_string(),
-        display_name: username.clone(),
-        transition,
-        index,
-    };
-    println!("appending user event: user_id: {}, display_name: {}, transition: {:?}, index: {}", user_id, username, transition, index);
-    let user_id_str = user_id.to_string();
+    let user_id_str = user_event.sender.to_string();
     if let Some((_, events)) = user_events.iter_mut().find(|(id, _)| id == &user_id_str) {
-        if events.iter().filter(|user_event| user_event.index == index).count() == 0 {
+        if events.iter().filter(|inner_user_event| inner_user_event.index == user_event.index).count() == 0 {
             events.push(user_event);
         }
     } else {
         user_events.push((user_id_str, vec![user_event]));
     }
-    println!("user_events after append: {:#?}", user_events.into_iter().map(|(u,_e)|{u.clone()}).collect::<Vec<_>>());
 }
 
+/// Checks if a event timeline item is a small state event.
+/// Returns true if the item is a small state event that can be grouped.
+pub fn is_small_state_event(
+    event_tl_item: &EventTimelineItem,
+) -> (bool, TransitionType, Option<String>) {
+    match event_tl_item.content() {
+        TimelineItemContent::MembershipChange(change) => (true, change.change().map(
+            |f| get_transition_from_membership_change(&f)
+            ).unwrap_or_default(), None
+        ),
+        TimelineItemContent::ProfileChange(change) => {
+            let transition_type = if let Some(_) = change.avatar_url_change() {
+                TransitionType::ChangedAvatar
+            } else if let Some(_) = change.displayname_change() {
+                TransitionType::ChangedName
+            } else {
+                TransitionType::NoChange
+            };
+            (true, transition_type, None)
+        }
+        TimelineItemContent::OtherState(other_state) => (true, get_transition_from_other_events(other_state.content(), other_state.state_key()), Some(other_state.state_key().to_string())),
+        TimelineItemContent::MsgLike(MsgLikeContent {
+            kind: MsgLikeKind::Poll(_),
+            ..
+        }) => (true, TransitionType::NoChange, None),
+        TimelineItemContent::MsgLike(MsgLikeContent {
+            kind: MsgLikeKind::Redacted,
+            ..
+        }) => (true, TransitionType::MessageRemoved, None),
+        TimelineItemContent::MsgLike(MsgLikeContent {
+            kind: MsgLikeKind::UnableToDecrypt(_),
+            ..
+        }) => (true, TransitionType::UnableToDecrypt, None),
+        _ => {
+            (false, TransitionType::NoChange, None)
+        }
+    }
+}
 /// Summarize all user transitions into a single string
 pub fn generate_summary(
     user_events: &HashMap<usize, (String, Vec<UserEvent>)>,
@@ -220,18 +334,16 @@ pub fn generate_summary(
     
     for &index in sorted_keys {
         let (user_id, events) = &user_events[&index];
+        let mut events = events.clone();
+        events.sort_by_key(|e|e.index);
         let mut transitions: Vec<_> = events.iter().map(|e| e.transition).collect();
-        transitions.reverse();
-        
+
         // Filter out Joined transitions for room creators
         if transitions.contains(&TransitionType::CreateRoom) {
             transitions.retain(|&t| t != TransitionType::Joined);
         }
-        println!("transitions user_id {:?} transitions {:?}", user_id, transitions);
         let canonical = canonicalize_transitions(&transitions);
-        println!("canonical for {}: {}", user_id, canonical.iter().map(|t| format!("{:?}", t)).collect::<Vec<_>>().join(","));
         let sequence_key = canonical.iter().map(|t| format!("{:?}", t)).collect::<Vec<_>>().join(",");
-        println!("sequence_key for {}: {}", user_id, sequence_key);
         let name = events.first().map(|e| e.display_name.clone()).unwrap_or(user_id.clone());
         if let Some((_, names)) = aggregates.iter_mut().find(|(id, _)| id == &sequence_key) {
             names.push(name);
@@ -239,7 +351,7 @@ pub fn generate_summary(
             aggregates.push((sequence_key.clone(), vec![name]));
         }
     }
-
+    println!("Aggregates: {:?}", aggregates);
     // Build text
     let mut summary_parts = Vec::new();
     for (seq, names) in aggregates {
@@ -253,6 +365,7 @@ pub fn generate_summary(
                 "LeftAndJoined" => Some(TransitionType::LeftAndJoined),
                 "ChangedName" => Some(TransitionType::ChangedName),
                 "ChangedAvatar" => Some(TransitionType::ChangedAvatar),
+                "Invited" => Some(TransitionType::Invited),
                 _ => None,
             })
             .collect();
@@ -264,7 +377,7 @@ pub fn generate_summary(
             .into_iter()
             .map(|(t, repeats)| describe_transition(t, names.len(), repeats))
             .collect();
-
+        println!("descs: {:?}", descs);
         let name_list = format_name_list(&names, summary_length);
         let transition_text = descs.join(", ");
         summary_parts.push(format!("{} {}", name_list, transition_text));
@@ -277,24 +390,24 @@ pub fn generate_summary(
 mod tests {
     use super::*;
 
-    #[test]
-    fn test_generate_summary() {
-        let mut user_events: HashMap<usize, (String, Vec<UserEvent>)> = HashMap::new();
+    // #[test]
+    // fn test_generate_summary() {
+    //     let mut user_events: HashMap<usize, (String, Vec<UserEvent>)> = HashMap::new();
         
-        user_events.insert(0, ("alice".into(), vec![
-            UserEvent { user_id: "alice".into(), display_name: "Alice".into(), transition: TransitionType::Joined, index: 0 },
-            UserEvent { user_id: "alice".into(), display_name: "Alice".into(), transition: TransitionType::Left, index: 1 },
-        ]));
+    //     user_events.insert(0, ("alice".into(), vec![
+    //         UserEvent { user_id: "alice".into(), display_name: "Alice".into(), transition: TransitionType::Joined, index: 0, state_key: None },
+    //         UserEvent { user_id: "alice".into(), display_name: "Alice".into(), transition: TransitionType::Left, index: 1, state_key: None },
+    //     ]));
         
-        user_events.insert(2, ("bob".into(), vec![
-            UserEvent { user_id: "bob".into(), display_name: "Bob".into(), transition: TransitionType::ChangedAvatar, index: 2 },
-        ]));
+    //     user_events.insert(2, ("bob".into(), vec![
+    //         UserEvent { user_id: "bob".into(), display_name: "Bob".into(), transition: TransitionType::ChangedAvatar, index: 2, state_key: None },
+    //     ]));
         
-        user_events.insert(3, ("charlie".into(), vec![
-            UserEvent { user_id: "charlie".into(), display_name: "Charlie".into(), transition: TransitionType::Joined, index: 3 },
-        ]));
+    //     user_events.insert(3, ("charlie".into(), vec![
+    //         UserEvent { user_id: "charlie".into(), display_name: "Charlie".into(), transition: TransitionType::Joined, index: 3, state_key: None },
+    //     ]));
 
-        let summary = generate_summary(&user_events, 2);
-        assert_eq!(summary, "Alice joined and left, Bob changed their profile picture, Charlie joined the room");
-    }
+    //     let summary = generate_summary(&user_events, 2);
+    //     assert_eq!(summary, "Alice joined and left, Bob changed their profile picture, Charlie joined the room");
+    // }
 }
\ No newline at end of file

From 2562019d4d4934f98f5adf24a673e8a05ce035ab Mon Sep 17 00:00:00 2001
From: alanpoon <brightshadowx@gmail.com>
Date: Fri, 17 Oct 2025 22:12:54 +0800
Subject: [PATCH 11/26] collapsible

---
 src/home/room_screen.rs              | 40 ++++++++++++++++++++--------
 src/shared/membership_transitions.rs | 23 +++++++++-------
 2 files changed, 42 insertions(+), 21 deletions(-)

diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs
index 3981fdb7..d884c900 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -4178,10 +4178,19 @@ fn populate_preview_of_timeline_item(
 
 
 fn append_user_event(user_event: UserEvent, user_events: &mut HashMap<usize, (String, Vec<UserEvent>)>) {
+    if user_event.transition == TransitionType::UnableToDecrypt {
+        println!("unable to decrypt user event {:?}", user_event);
+    }
     let item_id = user_event.index;
     let mut old_group_id = None;
+    let user_state_key = user_event.state_key.clone().unwrap_or_default();
+    let user_state_key = if user_state_key.is_empty() {
+        user_event.sender.clone()
+    } else {
+        user_state_key
+    };
     for (group_id, (user_id, user_events_vec)) in user_events.iter_mut() {
-        if user_event.sender == user_id.clone() {
+        if user_state_key == *user_id {
             if user_events_vec.iter().filter(|user_event| user_event.index == item_id).count() == 0 {
                 user_events_vec.push(user_event.clone());
             }
@@ -4191,13 +4200,15 @@ fn append_user_event(user_event: UserEvent, user_events: &mut HashMap<usize, (St
             old_group_id = Some(group_id.clone());
         }
     }
+    
+    
     if let Some(old_group_id) = old_group_id {
         if let Some(data) = user_events.remove(&old_group_id) {
             user_events.insert(item_id, data);
             return;
         }
     }
-    user_events.insert(item_id, (user_event.sender.clone(), vec![user_event]));
+    user_events.insert(item_id, (user_state_key.clone(), vec![user_event]));
 }
 
 /// Dynamically updates small state groups as timeline items are processed.
@@ -4213,26 +4224,26 @@ fn update_small_state_groups_for_item(
     small_state_groups: &mut Vec<(std::ops::Range<usize>, bool, HashMap<usize, (String, Vec<UserEvent>)>)>,
     creation_event: &mut (HashMap<String,std::ops::Range<usize>>, Option<UserEvent>, bool),
 ) -> (bool, bool, bool, Range<usize>) {
-    let (current_item_is_small_state, transition, state_key) = is_small_state_event(current_item);
+    let (current_item_is_small_state, transition, state_key, _) = is_small_state_event(current_item);
     if !current_item_is_small_state {
         return (true, false, false, Range::default()); // Not a small state event, draw as individual item, no debug button
     }
 
     // check if the next item (item_id + 1) is a small state event to continue grouping
-    let (next_item_is_small_state, _, _) = next_item
+    let (next_item_is_small_state, _, _, _) = next_item
         .and_then(|timeline_item| match timeline_item.kind() {
             TimelineItemKind::Event(event_tl_item) => Some(event_tl_item),
             _ => None,
         })
         .map(is_small_state_event)
-        .unwrap_or((false, TransitionType::NoChange, None));
-    let (previous_item_is_small_state, _, _) = previous_item
+        .unwrap_or((false, TransitionType::NoChange, None, None));
+    let (previous_item_is_small_state, _, _, _) = previous_item
         .and_then(|timeline_item| match timeline_item.kind() {
             TimelineItemKind::Event(event_tl_item) => Some(event_tl_item),
             _ => None,
         })
         .map(is_small_state_event)
-        .unwrap_or((false, TransitionType::NoChange, None));
+        .unwrap_or((false, TransitionType::NoChange, None, None));
     if !previous_item_is_small_state && !next_item_is_small_state {
         return (true, false, false,  Range::default()); // Isolated small state event, no debug button
     }
@@ -4256,7 +4267,7 @@ fn update_small_state_groups_for_item(
         return (true, true, false, Range::default());
     }
     if user_event.membership.as_ref().unwrap_or(&"".to_string()) == "join" || 
-        user_event.event_type == "m.room.state" || user_event.event_type == "m.room.name"
+        user_event.event_type == "m.room.state" || user_event.event_type == "m.room.name" && creation_user_event.is_none()
     {
         for (user_id, join_range) in creation_events_map.iter_mut() {
             if user_id == &user_event.sender {
@@ -4269,7 +4280,9 @@ fn update_small_state_groups_for_item(
                         }
                     }
                 }
-                return (*is_open, false, false, Range::default()); // Continue creation group
+                // if join_range.contains(&item_id) {
+                //     return (*is_open, false, false, Range::default()); // Continue creation group
+                // }
             }
         }
         creation_events_map.insert(user_event.sender.clone(), item_id..(item_id + 2));
@@ -4604,6 +4617,9 @@ fn populate_small_state_event(
         small_state_groups,
         creation_event
     );
+    if item_id == 55 {
+        println!("populate_small_state_event: item_id: {} opened: {} show_collapsible_button: {} expanded: {} to_redraw: {:?} small_state_groups: {:?} creation_event: {:?}", item_id, opened, show_collapsible_button, expanded, to_redraw, small_state_groups, creation_event);
+    }
     //println!("populate_small_state_event: item_id: {}, opened: {}, show_collapsible_button: {} creation_event: {:?}", item_id, opened, show_collapsible_button, creation_event);
     // Only show the collapsible button on the first item of each group
     item.button(id!(collapsible_button))
@@ -4641,7 +4657,7 @@ fn populate_small_state_event(
                     }
                 }
             }
-            println!("small_state_groups item_id: {} small_state_groups: {:?} ", item_id, small_state_groups);
+            println!("small_state_groups item_id: {} small_state_groups: {:?} ", item_id, 2);
             for (range, _, user_events_map) in small_state_groups {
                 if range.start == item_id {
                     // Pass HashMap directly to generate_summary
@@ -4653,10 +4669,12 @@ fn populate_small_state_event(
             }
             item.view(id!(body)).set_visible(cx, expanded);
         } else {
+            item.view(id!(small_state_header)).set_visible(cx, false);
             item.view(id!(body)).set_visible(cx, true);
         }
     } else {
-       item.view(id!(body)).set_visible(cx, false);
+        item.view(id!(small_state_header)).set_visible(cx, false);
+        item.view(id!(body)).set_visible(cx, false);
     }
     println!("to_redraw: {:?} item_id: {} content_drawn_since_last_update:{:?}", to_redraw, item_id ,content_drawn_since_last_update);
     if !to_redraw.is_empty() && to_redraw.end > to_redraw.start {
diff --git a/src/shared/membership_transitions.rs b/src/shared/membership_transitions.rs
index 654b2b09..c079d9d9 100644
--- a/src/shared/membership_transitions.rs
+++ b/src/shared/membership_transitions.rs
@@ -186,11 +186,11 @@ pub fn convert_to_timeline_event(event_item: EventTimelineItem, user_name: Strin
         }
         _ => (None, None),
     };
-    let (_, transistion_type, _) = is_small_state_event(&event_item);
+    let (_, transistion_type, _, display_name_from_state) = is_small_state_event(&event_item);
     //println!("state_key: {:?}, membership: {:?}, transistion_type: {:?}, event_type: {}", state_key, membership, transistion_type, event_type);
     UserEvent {
         index,
-        display_name: user_name,
+        display_name: display_name_from_state.unwrap_or(user_name),
         event_type,
         transition: transistion_type,
         is_state: matches!(event_item.content(), 
@@ -285,13 +285,15 @@ pub fn append_user_event(user_event: UserEvent, user_events: &mut Vec<(String, V
 
 /// Checks if a event timeline item is a small state event.
 /// Returns true if the item is a small state event that can be grouped.
+/// return state key
+/// return Display name
 pub fn is_small_state_event(
     event_tl_item: &EventTimelineItem,
-) -> (bool, TransitionType, Option<String>) {
+) -> (bool, TransitionType, Option<String>, Option<String>) {
     match event_tl_item.content() {
         TimelineItemContent::MembershipChange(change) => (true, change.change().map(
             |f| get_transition_from_membership_change(&f)
-            ).unwrap_or_default(), None
+            ).unwrap_or_default(), None, change.display_name()
         ),
         TimelineItemContent::ProfileChange(change) => {
             let transition_type = if let Some(_) = change.avatar_url_change() {
@@ -301,23 +303,23 @@ pub fn is_small_state_event(
             } else {
                 TransitionType::NoChange
             };
-            (true, transition_type, None)
+            (true, transition_type, None, None)
         }
-        TimelineItemContent::OtherState(other_state) => (true, get_transition_from_other_events(other_state.content(), other_state.state_key()), Some(other_state.state_key().to_string())),
+        TimelineItemContent::OtherState(other_state) => (true, get_transition_from_other_events(other_state.content(), other_state.state_key()), Some(other_state.state_key().to_string()), None),
         TimelineItemContent::MsgLike(MsgLikeContent {
             kind: MsgLikeKind::Poll(_),
             ..
-        }) => (true, TransitionType::NoChange, None),
+        }) => (true, TransitionType::NoChange, None, None),
         TimelineItemContent::MsgLike(MsgLikeContent {
             kind: MsgLikeKind::Redacted,
             ..
-        }) => (true, TransitionType::MessageRemoved, None),
+        }) => (true, TransitionType::MessageRemoved, None, None),
         TimelineItemContent::MsgLike(MsgLikeContent {
             kind: MsgLikeKind::UnableToDecrypt(_),
             ..
-        }) => (true, TransitionType::UnableToDecrypt, None),
+        }) => (true, TransitionType::UnableToDecrypt, None, None),
         _ => {
-            (false, TransitionType::NoChange, None)
+            (false, TransitionType::NoChange, None, None)
         }
     }
 }
@@ -366,6 +368,7 @@ pub fn generate_summary(
                 "ChangedName" => Some(TransitionType::ChangedName),
                 "ChangedAvatar" => Some(TransitionType::ChangedAvatar),
                 "Invited" => Some(TransitionType::Invited),
+                "UnableToDecrypt" => Some(TransitionType::UnableToDecrypt),
                 _ => None,
             })
             .collect();

From f218892d319356741041059a611353d91401fee2 Mon Sep 17 00:00:00 2001
From: alanpoon <brightshadowx@gmail.com>
Date: Sat, 18 Oct 2025 11:31:56 +0800
Subject: [PATCH 12/26] after some AI

---
 src/home/room_screen.rs              |  32 +-----
 src/shared/membership_transitions.rs | 150 ++++++++++++++++-----------
 2 files changed, 92 insertions(+), 90 deletions(-)

diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs
index d884c900..7539b8bb 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -4280,39 +4280,12 @@ fn update_small_state_groups_for_item(
                         }
                     }
                 }
-                // if join_range.contains(&item_id) {
-                //     return (*is_open, false, false, Range::default()); // Continue creation group
-                // }
             }
         }
         creation_events_map.insert(user_event.sender.clone(), item_id..(item_id + 2));
         return (true, false, false, item_id..(item_id + 2)); // New creation group created
     }
-    
-    // if let Some((creation_event, creation_group_range, is_open)) = creation_event {
-    //     if user_event.sender == creation_event.sender && user_event.membership == Some("join".to_string()) {
-    //         println!("Continuing creation group: {:?} item_id: {}", creation_group_range, item_id);
-    //         if creation_group_range.start == item_id + 1 {
-    //             *creation_group_range = item_id..creation_group_range.end;
-    //             return (*is_open, false, false, Range::default()); // Continue creation group
-    //         }
-    //     }
-    //     if let Some(state_key) = &user_event.state_key {
-    //         println!("state_key: {}", state_key);
-    //         if state_key == &creation_event.sender {
-    //             println!("creation_group_range: {:?} item_id: {} small_state_groups: {:?}", creation_group_range, item_id, small_state_groups);
-    //             if creation_group_range.start == item_id + 1 {
-    //                 *creation_group_range = item_id..creation_group_range.end;
-    //                 return (*is_open, false, false, creation_group_range.clone()); // Continue creation group
-    //             }
-    //         }
-    //     }
-    // } else {
-    //     if user_event.event_type == "m.room.create" {
-    //         *creation_event = Some((user_event.clone(), item_id..(item_id + 2), true));
-    //         return (true, true, true, item_id..(item_id + 2)); // New creation group created
-    //     }
-    // }
+
     // Check if this item is already part of an existing group or can extend one
     for (range, is_open, user_events_map) in small_state_groups.iter_mut() {
         if range.start == item_id {
@@ -4617,9 +4590,6 @@ fn populate_small_state_event(
         small_state_groups,
         creation_event
     );
-    if item_id == 55 {
-        println!("populate_small_state_event: item_id: {} opened: {} show_collapsible_button: {} expanded: {} to_redraw: {:?} small_state_groups: {:?} creation_event: {:?}", item_id, opened, show_collapsible_button, expanded, to_redraw, small_state_groups, creation_event);
-    }
     //println!("populate_small_state_event: item_id: {}, opened: {}, show_collapsible_button: {} creation_event: {:?}", item_id, opened, show_collapsible_button, creation_event);
     // Only show the collapsible button on the first item of each group
     item.button(id!(collapsible_button))
diff --git a/src/shared/membership_transitions.rs b/src/shared/membership_transitions.rs
index c079d9d9..00ff6406 100644
--- a/src/shared/membership_transitions.rs
+++ b/src/shared/membership_transitions.rs
@@ -1,8 +1,5 @@
 use std::collections::HashMap;
-use makepad_widgets::event;
-use matrix_sdk::crypto::types::events;
 use matrix_sdk_ui::timeline::{AnyOtherFullStateEventContent, EventTimelineItem, MembershipChange, MsgLikeContent, MsgLikeKind, TimelineItemContent};
-use ruma::UserId;
 
 #[derive(Default, Debug, Clone, Copy, PartialEq, Eq, Hash)]
 pub enum TransitionType {
@@ -28,6 +25,57 @@ pub enum TransitionType {
     HiddenEvent,
 }
 
+impl TransitionType {
+    const fn as_str(self) -> &'static str {
+        match self {
+            TransitionType::CreateRoom => "CreateRoom",
+            TransitionType::Joined => "Joined",
+            TransitionType::Left => "Left",
+            TransitionType::JoinedAndLeft => "JoinedAndLeft",
+            TransitionType::LeftAndJoined => "LeftAndJoined",
+            TransitionType::InviteReject => "InviteReject",
+            TransitionType::InviteWithdrawal => "InviteWithdrawal",
+            TransitionType::Invited => "Invited",
+            TransitionType::Banned => "Banned",
+            TransitionType::Unbanned => "Unbanned",
+            TransitionType::Kicked => "Kicked",
+            TransitionType::ChangedName => "ChangedName",
+            TransitionType::ChangedAvatar => "ChangedAvatar",
+            TransitionType::NoChange => "NoChange",
+            TransitionType::ServerAcl => "ServerAcl",
+            TransitionType::ChangedPins => "ChangedPins",
+            TransitionType::MessageRemoved => "MessageRemoved",
+            TransitionType::UnableToDecrypt => "UnableToDecrypt",
+            TransitionType::HiddenEvent => "HiddenEvent",
+        }
+    }
+
+    fn from_str(s: &str) -> Option<Self> {
+        match s {
+            "CreateRoom" => Some(TransitionType::CreateRoom),
+            "Joined" => Some(TransitionType::Joined),
+            "Left" => Some(TransitionType::Left),
+            "JoinedAndLeft" => Some(TransitionType::JoinedAndLeft),
+            "LeftAndJoined" => Some(TransitionType::LeftAndJoined),
+            "InviteReject" => Some(TransitionType::InviteReject),
+            "InviteWithdrawal" => Some(TransitionType::InviteWithdrawal),
+            "Invited" => Some(TransitionType::Invited),
+            "Banned" => Some(TransitionType::Banned),
+            "Unbanned" => Some(TransitionType::Unbanned),
+            "Kicked" => Some(TransitionType::Kicked),
+            "ChangedName" => Some(TransitionType::ChangedName),
+            "ChangedAvatar" => Some(TransitionType::ChangedAvatar),
+            "NoChange" => Some(TransitionType::NoChange),
+            "ServerAcl" => Some(TransitionType::ServerAcl),
+            "ChangedPins" => Some(TransitionType::ChangedPins),
+            "MessageRemoved" => Some(TransitionType::MessageRemoved),
+            "UnableToDecrypt" => Some(TransitionType::UnableToDecrypt),
+            "HiddenEvent" => Some(TransitionType::HiddenEvent),
+            _ => None,
+        }
+    }
+}
+
 #[derive(Debug, Clone, PartialEq)]
 pub struct UserEvent {    
     pub event_type: String,
@@ -88,35 +136,38 @@ fn coalesce_repeated_transitions(transitions: &[TransitionType]) -> Vec<(Transit
 /// Determine the textual description for a transition
 fn describe_transition(t: TransitionType, user_count: usize, repeats: usize) -> String {
     let plural = user_count > 1;
-    let count_str = if repeats > 1 {
-        format!(" (×{})", repeats)
-    } else {
-        "".to_string()
-    };
     match t {
-        TransitionType::CreateRoom => format!("created and configured the room"),
+        TransitionType::CreateRoom => "created and configured the room".to_string(),
         TransitionType::Joined => {
-            if plural { format!("joined{}", count_str) } else { format!("joined the room{}", count_str) }
+            if repeats > 1 {
+                if plural { format!("joined (×{})", repeats) } else { format!("joined the room (×{})", repeats) }
+            } else {
+                if plural { "joined".to_string() } else { "joined the room".to_string() }
+            }
         }
         TransitionType::Left => {
-            if plural { format!("left{}", count_str) } else { format!("left the room{}", count_str) }
+            if repeats > 1 {
+                if plural { format!("left (×{})", repeats) } else { format!("left the room (×{})", repeats) }
+            } else {
+                if plural { "left".to_string() } else { "left the room".to_string() }
+            }
         }
-        TransitionType::JoinedAndLeft => format!("joined and left{}", count_str),
-        TransitionType::LeftAndJoined => format!("left and rejoined{}", count_str),
-        TransitionType::ChangedName => format!("changed their name{}", count_str),
-        TransitionType::ChangedAvatar => format!("changed their profile picture{}", count_str),
-        TransitionType::Invited => format!("was invited{}", count_str),
-        TransitionType::Banned => format!("was banned{}", count_str),
-        TransitionType::Unbanned => format!("was unbanned{}", count_str),
-        TransitionType::InviteReject => format!("rejected invite{}", count_str),
-        TransitionType::InviteWithdrawal => format!("invite withdrawn{}", count_str),
-        TransitionType::Kicked => format!("was kicked{}", count_str),
-        TransitionType::ServerAcl => format!("updated server ACLs{}", count_str),
-        TransitionType::ChangedPins => format!("changed pinned messages{}", count_str),
-        TransitionType::MessageRemoved => format!("removed a message{}", count_str),
-        TransitionType::HiddenEvent => format!("did a hidden event{}", count_str),
-        TransitionType::NoChange => format!("made no changes{}", count_str),
-        TransitionType::UnableToDecrypt => format!("decryption failed{}", count_str),
+        TransitionType::JoinedAndLeft => if repeats > 1 { format!("joined and left (×{})", repeats) } else { "joined and left".to_string() },
+        TransitionType::LeftAndJoined => if repeats > 1 { format!("left and rejoined (×{})", repeats) } else { "left and rejoined".to_string() },
+        TransitionType::ChangedName => if repeats > 1 { format!("changed their name (×{})", repeats) } else { "changed their name".to_string() },
+        TransitionType::ChangedAvatar => if repeats > 1 { format!("changed their profile picture (×{})", repeats) } else { "changed their profile picture".to_string() },
+        TransitionType::Invited => if repeats > 1 { format!("was invited (×{})", repeats) } else { "was invited".to_string() },
+        TransitionType::Banned => if repeats > 1 { format!("was banned (×{})", repeats) } else { "was banned".to_string() },
+        TransitionType::Unbanned => if repeats > 1 { format!("was unbanned (×{})", repeats) } else { "was unbanned".to_string() },
+        TransitionType::InviteReject => if repeats > 1 { format!("rejected invite (×{})", repeats) } else { "rejected invite".to_string() },
+        TransitionType::InviteWithdrawal => if repeats > 1 { format!("invite withdrawn (×{})", repeats) } else { "invite withdrawn".to_string() },
+        TransitionType::Kicked => if repeats > 1 { format!("was kicked (×{})", repeats) } else { "was kicked".to_string() },
+        TransitionType::ServerAcl => if repeats > 1 { format!("updated server ACLs (×{})", repeats) } else { "updated server ACLs".to_string() },
+        TransitionType::ChangedPins => if repeats > 1 { format!("changed pinned messages (×{})", repeats) } else { "changed pinned messages".to_string() },
+        TransitionType::MessageRemoved => if repeats > 1 { format!("removed a message (×{})", repeats) } else { "removed a message".to_string() },
+        TransitionType::HiddenEvent => if repeats > 1 { format!("did a hidden event (×{})", repeats) } else { "did a hidden event".to_string() },
+        TransitionType::NoChange => if repeats > 1 { format!("made no changes (×{})", repeats) } else { "made no changes".to_string() },
+        TransitionType::UnableToDecrypt => if repeats > 1 { format!("decryption failed (×{})", repeats) } else { "decryption failed".to_string() },
     }
 }
 
@@ -164,18 +215,18 @@ pub fn convert_to_timeline_event(event_item: EventTimelineItem, user_name: Strin
             }
         }
         _ => "unknown",
-    }.to_string();
+    };
 
     let (state_key, membership) = match event_item.content() {
         TimelineItemContent::MembershipChange(change) => {
             let state_key = Some(change.user_id().to_string());
             let membership = match change.change() {
-                Some(MembershipChange::Joined) => Some("join".to_string()),
-                Some(MembershipChange::Left) => Some("leave".to_string()),
-                Some(MembershipChange::Invited) => Some("invite".to_string()),
-                Some(MembershipChange::Banned) => Some("ban".to_string()),
+                Some(MembershipChange::Joined) => Some("join"),
+                Some(MembershipChange::Left) => Some("leave"),
+                Some(MembershipChange::Invited) => Some("invite"),
+                Some(MembershipChange::Banned) => Some("ban"),
                 _ => None,
-            };
+            }.map(|s| s.to_string());
             (state_key, membership)
         }
         TimelineItemContent::OtherState(other) => {
@@ -191,7 +242,7 @@ pub fn convert_to_timeline_event(event_item: EventTimelineItem, user_name: Strin
     UserEvent {
         index,
         display_name: display_name_from_state.unwrap_or(user_name),
-        event_type,
+        event_type: event_type.to_string(),
         transition: transistion_type,
         is_state: matches!(event_item.content(), 
             TimelineItemContent::MembershipChange(_) | 
@@ -273,13 +324,12 @@ pub fn append_user_event(user_event: UserEvent, user_events: &mut Vec<(String, V
     if let TransitionType::HiddenEvent = user_event.transition {
         return;
     }
-    let user_id_str = user_event.sender.to_string();
-    if let Some((_, events)) = user_events.iter_mut().find(|(id, _)| id == &user_id_str) {
+    if let Some((_, events)) = user_events.iter_mut().find(|(id, _)| id == &user_event.sender) {
         if events.iter().filter(|inner_user_event| inner_user_event.index == user_event.index).count() == 0 {
             events.push(user_event);
         }
     } else {
-        user_events.push((user_id_str, vec![user_event]));
+        user_events.push((user_event.sender.clone(), vec![user_event]));
     }
 }
 
@@ -329,7 +379,7 @@ pub fn generate_summary(
     summary_length: usize,
 ) -> String {
     // Aggregate by transition sequence
-    let mut aggregates: Vec<(String, Vec<String>)> = Vec::new();
+    let mut aggregates: Vec<(Vec<TransitionType>, Vec<String>)> = Vec::new();
     // Sort keys in ascending order for consistent iteration
     let mut sorted_keys: Vec<&usize> = user_events.keys().collect();
     sorted_keys.sort();
@@ -345,35 +395,17 @@ pub fn generate_summary(
             transitions.retain(|&t| t != TransitionType::Joined);
         }
         let canonical = canonicalize_transitions(&transitions);
-        let sequence_key = canonical.iter().map(|t| format!("{:?}", t)).collect::<Vec<_>>().join(",");
         let name = events.first().map(|e| e.display_name.clone()).unwrap_or(user_id.clone());
-        if let Some((_, names)) = aggregates.iter_mut().find(|(id, _)| id == &sequence_key) {
+        if let Some((_, names)) = aggregates.iter_mut().find(|(seq, _)| seq == &canonical) {
             names.push(name);
         } else {
-            aggregates.push((sequence_key.clone(), vec![name]));
+            aggregates.push((canonical, vec![name]));
         }
     }
     println!("Aggregates: {:?}", aggregates);
     // Build text
     let mut summary_parts = Vec::new();
-    for (seq, names) in aggregates {
-        let transitions: Vec<_> = seq
-            .split(',')
-            .filter_map(|s| match s.trim() {
-                "CreateRoom" => Some(TransitionType::CreateRoom),
-                "Joined" => Some(TransitionType::Joined),
-                "Left" => Some(TransitionType::Left),
-                "JoinedAndLeft" => Some(TransitionType::JoinedAndLeft),
-                "LeftAndJoined" => Some(TransitionType::LeftAndJoined),
-                "ChangedName" => Some(TransitionType::ChangedName),
-                "ChangedAvatar" => Some(TransitionType::ChangedAvatar),
-                "Invited" => Some(TransitionType::Invited),
-                "UnableToDecrypt" => Some(TransitionType::UnableToDecrypt),
-                _ => None,
-            })
-            .collect();
-
-        let canonical = canonicalize_transitions(&transitions);
+    for (canonical, names) in aggregates {
         let coalesced = coalesce_repeated_transitions(&canonical);
 
         let descs: Vec<String> = coalesced

From 65e55adc35e43064429371dabd45b06cd5ed0230 Mon Sep 17 00:00:00 2001
From: alanpoon <brightshadowx@gmail.com>
Date: Sat, 18 Oct 2025 17:26:04 +0800
Subject: [PATCH 13/26] minor improvement

---
 src/home/room_screen.rs              | 86 +++++++++++++++++++++++-----
 src/shared/membership_transitions.rs |  8 +--
 2 files changed, 75 insertions(+), 19 deletions(-)

diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs
index 7539b8bb..5eefa5db 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -30,7 +30,7 @@ use crate::{
         user_profile::{AvatarState, ShowUserProfileAction, UserProfile, UserProfileAndRoomId, UserProfilePaneInfo, UserProfileSlidingPaneRef, UserProfileSlidingPaneWidgetExt},
         user_profile_cache,
     }, room::typing_notice::TypingNoticeWidgetExt, shared::{
-        avatar::AvatarWidgetRefExt, callout_tooltip::TooltipAction, html_or_plaintext::{HtmlOrPlaintextRef, HtmlOrPlaintextWidgetRefExt, RobrixHtmlLinkAction}, jump_to_bottom_button::{JumpToBottomButtonWidgetExt, UnreadMessageCount}, membership_transitions::{convert_to_timeline_event, generate_summary, get_transition_from_membership_change, get_transition_from_other_events, is_small_state_event, TransitionType, UserEvent}, popup_list::{enqueue_popup_notification, PopupItem, PopupKind}, restore_status_view::RestoreStatusViewWidgetExt, styles::*, text_or_image::{TextOrImageRef, TextOrImageWidgetRefExt}, timestamp::TimestampWidgetRefExt
+        avatar::AvatarWidgetRefExt, callout_tooltip::TooltipAction, html_or_plaintext::{HtmlOrPlaintextRef, HtmlOrPlaintextWidgetRefExt, RobrixHtmlLinkAction}, jump_to_bottom_button::{JumpToBottomButtonWidgetExt, UnreadMessageCount}, membership_transitions::{convert_to_timeline_event, generate_summary, is_small_state_event, TransitionType, UserEvent}, popup_list::{enqueue_popup_notification, PopupItem, PopupKind}, restore_status_view::RestoreStatusViewWidgetExt, styles::*, text_or_image::{TextOrImageRef, TextOrImageWidgetRefExt}, timestamp::TimestampWidgetRefExt
     }, sliding_sync::{get_client, submit_async_request, take_timeline_endpoints, BackwardsPaginateUntilEventRequest, MatrixRequest, PaginationDirection, TimelineEndpoints, TimelineRequestSender, UserPowerLevels}, utils::{self, room_name_or_id, unix_time_millis_to_datetime, ImageFormat, MEDIA_THUMBNAIL_FORMAT}
 };
 use crate::home::event_reaction_list::ReactionListWidgetRefExt;
@@ -932,7 +932,7 @@ impl Widget for RoomScreen {
                 // Handle collapsible button click in SmallStateEvent
                 if wr.button(id!(collapsible_button)).clicked(actions) {
                     if let Some(tl_state) = &mut self.tl_state {
-                        println!("item_id: {} collapsible_button clicked", item_id);
+                        println!("item_id: {} collapsible_button clicked tl_state.creation_event {:?} small_state_groups {:?}", item_id, tl_state.creation_event, tl_state.small_state_groups);
                         let mut is_creation_group = false;
                         let (creation_hashmap, creation_event, open) = &mut tl_state.creation_event;
                         if let Some(creation_event) = &creation_event {
@@ -941,6 +941,7 @@ impl Widget for RoomScreen {
                                     // Toggle the group's open/closed state
                                     *open = !*open;
                                     let omit_first_range = (range.start+1)..range.end;
+                                    println!("Toggling creation event group for sender {} range {:?} new open state {}", creation_event.sender, omit_first_range, *open);
                                     // Force redraw of all items in this group by clearing their cached drawn status
                                     tl_state.content_drawn_since_last_update.remove(omit_first_range.clone());
                                     tl_state.profile_drawn_since_last_update.remove(omit_first_range.clone());
@@ -967,7 +968,8 @@ impl Widget for RoomScreen {
                                     // Force redraw of all items in this group by clearing their cached drawn status
                                     tl_state.content_drawn_since_last_update.remove(omit_first_range.clone());
                                     tl_state.profile_drawn_since_last_update.remove(omit_first_range.clone());
-                                    
+                                    println!("Toggling not is_creation_group event group for range {:?} new open state {}", omit_first_range, *open);
+
                                     // Update button text to reflect new state:
                                     // ▲ (up arrow) = expanded/open - items are visible
                                     // ▼ (down arrow) = collapsed/closed - items are hidden
@@ -1707,7 +1709,7 @@ impl RoomScreen {
                             // Note: If we want to preserve events during shifts, we would need to
                             // update the HashMap keys and UserEvent indices here
                         }
-                        let (creation_hashmap, creation_event, is_open) = &mut tl.creation_event;
+                        let (creation_hashmap, creation_event, _is_open) = &mut tl.creation_event;
                         for (_user_id, range) in creation_hashmap.iter_mut() {
                             let new_start = (range.start as i32 + shift).max(0) as usize;
                             let new_end = (range.end as i32 + shift).max(0) as usize;
@@ -4216,15 +4218,17 @@ fn append_user_event(user_event: UserEvent, user_events: &mut HashMap<usize, (St
 /// Since iteration starts from the biggest item_id and goes backwards, we handle reverse grouping.
 /// Returns a tuple whether to display the message, and whether to display the collapsible button and whether collapsible list is expanded and range to redraw
 fn update_small_state_groups_for_item(
+    cx:&mut Cx,
+    room_id: &OwnedRoomId,
     item_id: usize,
-    username: String,
+    mut username: String,
     current_item: &EventTimelineItem,
     previous_item: Option<&Arc<TimelineItem>>,
     next_item: Option<&Arc<TimelineItem>>,
     small_state_groups: &mut Vec<(std::ops::Range<usize>, bool, HashMap<usize, (String, Vec<UserEvent>)>)>,
     creation_event: &mut (HashMap<String,std::ops::Range<usize>>, Option<UserEvent>, bool),
 ) -> (bool, bool, bool, Range<usize>) {
-    let (current_item_is_small_state, transition, state_key, _) = is_small_state_event(current_item);
+    let (current_item_is_small_state, _transition, state_key, _) = is_small_state_event(current_item);
     if !current_item_is_small_state {
         return (true, false, false, Range::default()); // Not a small state event, draw as individual item, no debug button
     }
@@ -4247,28 +4251,59 @@ fn update_small_state_groups_for_item(
     if !previous_item_is_small_state && !next_item_is_small_state {
         return (true, false, false,  Range::default()); // Isolated small state event, no debug button
     }
-    
+    if let Some(state_key) = state_key {
+        if !state_key.is_empty() {
+            if let Ok(user_id) = UserId::parse(&state_key) {
+                println!("small state event user_id: {:?}", user_id);
+                let display_name = user_profile_cache::with_user_profile(cx, user_id, true, |profile, room_members| {
+                    room_members
+                        .get(room_id)
+                        .map(|rm| {
+                            rm.display_name().map(|n| n.to_owned())
+                        })
+                        .unwrap_or_else(|| profile.username.clone())
+                });
+                if let Some(display_name) = display_name {
+                    if let Some(display_name) = display_name {
+                        println!("small state event display_name: {:?}", display_name);
+                        username = display_name;
+                    }
+                }
+            }
+        }
+    }
     let user_event = convert_to_timeline_event(current_item.clone(), username.clone(), item_id);
-    //println!("user_event: {:?}", user_event);
+    println!("user_event: index: {:?} user_event: {:?}", user_event.index, user_event);
     let (creation_events_map, creation_user_event, is_open) = creation_event;
     if user_event.event_type == "m.room.create" {
-        println!("m.room.create: small_state_groups {:?}", small_state_groups);
+        println!("m.room.create: item_id {:?}", item_id );
         *creation_user_event = Some(user_event.clone());
         println!("creation_events_map  {:?}", creation_events_map);
         for (user_id, join_range) in creation_events_map.iter_mut() {
             if user_id == &user_event.sender {
                 if join_range.start == item_id + 1 {
-                    println!("join_range changes in creation user event {:?} user_id: {:?}", join_range, user_id);
                     *join_range = item_id..join_range.end;
+                    println!("join_range changes in creation user event {:?} user_id: {:?}", join_range, user_id);
+                    return (true, true, false, join_range.clone()); // Continue creation group
                 }
+                // *join_range = item_id..join_range.end;
+                // println!("join_range changes in creation user event {:?} user_id: {:?}", join_range, user_id);
                 return (true, true, false, Range::default()); // Continue creation group
             }
         }
         return (true, true, false, Range::default());
     }
-    if user_event.membership.as_ref().unwrap_or(&"".to_string()) == "join" || 
-        user_event.event_type == "m.room.state" || user_event.event_type == "m.room.name" && creation_user_event.is_none()
+    println!("item id {:?}, creation_user_event.is_none()",creation_user_event.is_none());
+    println!("item_id {:?}, update before checking membership {:?} transition {:?}", item_id, user_event.membership, user_event.transition );
+    println!("item_id {:?}, update before event_type {:?} ", item_id, user_event.event_type);
+    if creation_user_event.is_none() && (matches!(user_event.event_type.as_str(), 
+        "m.room.create" |
+        "m.room.name" | "m.room.topic" | "m.room.pinned_events" |
+        "m.room.power_levels" | "m.room.join_rules" | "m.room.history_visibility" |
+        "m.room.canonical_alias" |   "m.room.state"
+    ) || user_event.transition == TransitionType::Joined)
     {
+        println!("item_id {:?} entered creation_events_map {:?}", item_id, creation_events_map);
         for (user_id, join_range) in creation_events_map.iter_mut() {
             if user_id == &user_event.sender {
                 if join_range.start == item_id + 1 {
@@ -4280,12 +4315,31 @@ fn update_small_state_groups_for_item(
                         }
                     }
                 }
+                if !join_range.contains(&item_id) {
+                    if item_id < join_range.start {
+                        let old_range = join_range.clone();
+                        *join_range = item_id..(item_id + 1);
+                        return (true, false, *is_open, item_id..old_range.end); // Set range to earlier timeline that might
+                    }
+                }
+                return (true, false, *is_open, join_range.clone()); // Start of group, show debug button
             }
         }
+        println!("new creation group created for user {:?} range {:?}", user_event.sender, item_id..(item_id + 2));
         creation_events_map.insert(user_event.sender.clone(), item_id..(item_id + 2));
         return (true, false, false, item_id..(item_id + 2)); // New creation group created
     }
-
+    if let Some(creation_user_event) = creation_user_event {
+        for (user_id, join_range) in creation_events_map.iter_mut() {
+            if user_id == &creation_user_event.sender {
+                if join_range.start != item_id + 1 {
+                    if join_range.contains(&item_id) {
+                        return (*is_open, false, false, Range::default()); // Item is in group but not at start, no debug button
+                    }
+                }
+            }
+        }
+    }
     // Check if this item is already part of an existing group or can extend one
     for (range, is_open, user_events_map) in small_state_groups.iter_mut() {
         if range.start == item_id {
@@ -4582,6 +4636,8 @@ fn populate_small_state_event(
     // - show_collapsible_button: true if this item is the first in a collapsible group
     // - expanded: current expansion state of the group (for button text)
     let (opened, show_collapsible_button, expanded, to_redraw) = update_small_state_groups_for_item(
+        cx,
+        room_id,
         item_id,
         username.clone(),
         event_tl_item,
@@ -4590,7 +4646,7 @@ fn populate_small_state_event(
         small_state_groups,
         creation_event
     );
-    //println!("populate_small_state_event: item_id: {}, opened: {}, show_collapsible_button: {} creation_event: {:?}", item_id, opened, show_collapsible_button, creation_event);
+    println!("populate_small_state_event: item_id: {}, opened: {}, show_collapsible_button: {} creation_event: {:?}", item_id, opened, show_collapsible_button, creation_event);
     // Only show the collapsible button on the first item of each group
     item.button(id!(collapsible_button))
         .set_visible(cx, show_collapsible_button);
@@ -4646,7 +4702,7 @@ fn populate_small_state_event(
         item.view(id!(small_state_header)).set_visible(cx, false);
         item.view(id!(body)).set_visible(cx, false);
     }
-    println!("to_redraw: {:?} item_id: {} content_drawn_since_last_update:{:?}", to_redraw, item_id ,content_drawn_since_last_update);
+    //println!("to_redraw: {:?} item_id: {} content_drawn_since_last_update:{:?}", to_redraw, item_id ,content_drawn_since_last_update);
     if !to_redraw.is_empty() && to_redraw.end > to_redraw.start {
         content_drawn_since_last_update.remove(to_redraw.clone());
         if to_redraw.contains(&item_id) {
diff --git a/src/shared/membership_transitions.rs b/src/shared/membership_transitions.rs
index 00ff6406..187f6cda 100644
--- a/src/shared/membership_transitions.rs
+++ b/src/shared/membership_transitions.rs
@@ -26,7 +26,7 @@ pub enum TransitionType {
 }
 
 impl TransitionType {
-    const fn as_str(self) -> &'static str {
+    pub const fn as_str(self) -> &'static str {
         match self {
             TransitionType::CreateRoom => "CreateRoom",
             TransitionType::Joined => "Joined",
@@ -50,7 +50,7 @@ impl TransitionType {
         }
     }
 
-    fn from_str(s: &str) -> Option<Self> {
+    pub fn from_str(s: &str) -> Option<Self> {
         match s {
             "CreateRoom" => Some(TransitionType::CreateRoom),
             "Joined" => Some(TransitionType::Joined),
@@ -237,11 +237,11 @@ pub fn convert_to_timeline_event(event_item: EventTimelineItem, user_name: Strin
         }
         _ => (None, None),
     };
-    let (_, transistion_type, _, display_name_from_state) = is_small_state_event(&event_item);
+    let (_, transistion_type, _, _display_name_from_state) = is_small_state_event(&event_item);
     //println!("state_key: {:?}, membership: {:?}, transistion_type: {:?}, event_type: {}", state_key, membership, transistion_type, event_type);
     UserEvent {
         index,
-        display_name: display_name_from_state.unwrap_or(user_name),
+        display_name: user_name,
         event_type: event_type.to_string(),
         transition: transistion_type,
         is_state: matches!(event_item.content(), 

From 32726d244c4af18ddf1d2dbcaf249c15e53d6166 Mon Sep 17 00:00:00 2001
From: alanpoon <brightshadowx@gmail.com>
Date: Fri, 28 Nov 2025 15:42:19 +0800
Subject: [PATCH 14/26] added CreationCollapsibleList

---
 .../membership_transitions.rs                 | 330 +++++++++++-------
 src/home/mod.rs                               |   1 +
 src/home/room_screen.rs                       | 327 ++++-------------
 src/shared/mod.rs                             |   1 -
 4 files changed, 259 insertions(+), 400 deletions(-)
 rename src/{shared => home}/membership_transitions.rs (61%)

diff --git a/src/shared/membership_transitions.rs b/src/home/membership_transitions.rs
similarity index 61%
rename from src/shared/membership_transitions.rs
rename to src/home/membership_transitions.rs
index 187f6cda..1f226d0c 100644
--- a/src/shared/membership_transitions.rs
+++ b/src/home/membership_transitions.rs
@@ -1,9 +1,12 @@
-use std::collections::HashMap;
-use matrix_sdk_ui::timeline::{AnyOtherFullStateEventContent, EventTimelineItem, MembershipChange, MsgLikeContent, MsgLikeKind, TimelineItemContent};
+use std::{collections::HashMap, ops::Range, sync::Arc};
+use matrix_sdk::ruma::{OwnedEventId, OwnedUserId};
+use matrix_sdk_ui::timeline::{AnyOtherFullStateEventContent, EventTimelineItem, MembershipChange, MsgLikeContent, MsgLikeKind, TimelineItem, TimelineItemContent, TimelineItemKind};
+use ruma::events::FullStateEventContent;
 
 #[derive(Default, Debug, Clone, Copy, PartialEq, Eq, Hash)]
 pub enum TransitionType {
     CreateRoom,
+    ConfigureRoom,
     Joined,
     Left,
     JoinedAndLeft,
@@ -25,63 +28,10 @@ pub enum TransitionType {
     HiddenEvent,
 }
 
-impl TransitionType {
-    pub const fn as_str(self) -> &'static str {
-        match self {
-            TransitionType::CreateRoom => "CreateRoom",
-            TransitionType::Joined => "Joined",
-            TransitionType::Left => "Left",
-            TransitionType::JoinedAndLeft => "JoinedAndLeft",
-            TransitionType::LeftAndJoined => "LeftAndJoined",
-            TransitionType::InviteReject => "InviteReject",
-            TransitionType::InviteWithdrawal => "InviteWithdrawal",
-            TransitionType::Invited => "Invited",
-            TransitionType::Banned => "Banned",
-            TransitionType::Unbanned => "Unbanned",
-            TransitionType::Kicked => "Kicked",
-            TransitionType::ChangedName => "ChangedName",
-            TransitionType::ChangedAvatar => "ChangedAvatar",
-            TransitionType::NoChange => "NoChange",
-            TransitionType::ServerAcl => "ServerAcl",
-            TransitionType::ChangedPins => "ChangedPins",
-            TransitionType::MessageRemoved => "MessageRemoved",
-            TransitionType::UnableToDecrypt => "UnableToDecrypt",
-            TransitionType::HiddenEvent => "HiddenEvent",
-        }
-    }
-
-    pub fn from_str(s: &str) -> Option<Self> {
-        match s {
-            "CreateRoom" => Some(TransitionType::CreateRoom),
-            "Joined" => Some(TransitionType::Joined),
-            "Left" => Some(TransitionType::Left),
-            "JoinedAndLeft" => Some(TransitionType::JoinedAndLeft),
-            "LeftAndJoined" => Some(TransitionType::LeftAndJoined),
-            "InviteReject" => Some(TransitionType::InviteReject),
-            "InviteWithdrawal" => Some(TransitionType::InviteWithdrawal),
-            "Invited" => Some(TransitionType::Invited),
-            "Banned" => Some(TransitionType::Banned),
-            "Unbanned" => Some(TransitionType::Unbanned),
-            "Kicked" => Some(TransitionType::Kicked),
-            "ChangedName" => Some(TransitionType::ChangedName),
-            "ChangedAvatar" => Some(TransitionType::ChangedAvatar),
-            "NoChange" => Some(TransitionType::NoChange),
-            "ServerAcl" => Some(TransitionType::ServerAcl),
-            "ChangedPins" => Some(TransitionType::ChangedPins),
-            "MessageRemoved" => Some(TransitionType::MessageRemoved),
-            "UnableToDecrypt" => Some(TransitionType::UnableToDecrypt),
-            "HiddenEvent" => Some(TransitionType::HiddenEvent),
-            _ => None,
-        }
-    }
-}
-
 #[derive(Debug, Clone, PartialEq)]
 pub struct UserEvent {    
-    pub event_type: String,
     pub transition: TransitionType,
     pub index: usize,
-    pub is_state: bool,
     pub is_redacted: bool,
     pub should_show: bool,
     pub sender: String,
@@ -90,6 +40,13 @@ pub struct UserEvent {
     pub membership: Option<String>,
 }
 
+#[derive(Default, Debug)]
+pub struct CreationCollapsibleList {
+    pub range: std::ops::Range<usize>,
+    pub opened: bool,
+    pub username: String,
+}
+
 /// Canonicalize neighbouring transitions, e.g. [Joined, Left] -> [JoinedAndLeft]
 fn canonicalize_transitions(transitions: &[TransitionType]) -> Vec<TransitionType> {
     let mut res = Vec::new();
@@ -138,6 +95,7 @@ fn describe_transition(t: TransitionType, user_count: usize, repeats: usize) ->
     let plural = user_count > 1;
     match t {
         TransitionType::CreateRoom => "created and configured the room".to_string(),
+        TransitionType::ConfigureRoom => "".to_string(),
         TransitionType::Joined => {
             if repeats > 1 {
                 if plural { format!("joined (×{})", repeats) } else { format!("joined the room (×{})", repeats) }
@@ -184,39 +142,6 @@ fn format_name_list(names: &[String], max_names: usize) -> String {
 
 pub fn convert_to_timeline_event(event_item: EventTimelineItem, user_name: String, index: usize) -> UserEvent {
     use matrix_sdk_ui::timeline::{TimelineItemContent, MembershipChange};
-    
-    let event_type = match event_item.content() {
-        TimelineItemContent::MsgLike(msg_like) => {
-            use matrix_sdk_ui::timeline::MsgLikeKind;
-            match &msg_like.kind {
-                MsgLikeKind::Message(_) => "m.room.message",
-                MsgLikeKind::Poll(_) => "m.room.poll",
-                MsgLikeKind::Redacted => "m.room.redacted",
-                MsgLikeKind::UnableToDecrypt(_) => "m.room.encrypted",
-                _ => "m.room.message",
-            }
-        }
-        TimelineItemContent::MembershipChange(_) => "m.room.member",
-        TimelineItemContent::ProfileChange(_) => "m.room.member", // Profile changes are member events
-        TimelineItemContent::OtherState(other) => {
-            if !other.state_key().is_empty() {
-                println!("OtherState event with state_key: {}", other.state_key()); 
-            }
-            // Extract the actual event type from the state event
-            match other.content() {
-                matrix_sdk_ui::timeline::AnyOtherFullStateEventContent::RoomCreate(_) => "m.room.create",
-                matrix_sdk_ui::timeline::AnyOtherFullStateEventContent::RoomName(_) => "m.room.name",
-                matrix_sdk_ui::timeline::AnyOtherFullStateEventContent::RoomTopic(_) => "m.room.topic",
-                matrix_sdk_ui::timeline::AnyOtherFullStateEventContent::RoomServerAcl(_) => "m.room.server_acl",
-                matrix_sdk_ui::timeline::AnyOtherFullStateEventContent::RoomPinnedEvents(_) => "m.room.pinned_events",
-                // matrix_sdk_ui::timeline::AnyOtherFullStateEventContent::RoomJoinRules(_) => "m.room.join_rules",
-                // matrix_sdk_ui::timeline::AnyOtherFullStateEventContent::RoomHistoryVisibility(_) => "m.room.history_visibility",
-                _ => "m.room.state",
-            }
-        }
-        _ => "unknown",
-    };
-
     let (state_key, membership) = match event_item.content() {
         TimelineItemContent::MembershipChange(change) => {
             let state_key = Some(change.user_id().to_string());
@@ -230,25 +155,15 @@ pub fn convert_to_timeline_event(event_item: EventTimelineItem, user_name: Strin
             (state_key, membership)
         }
         TimelineItemContent::OtherState(other) => {
-            if !other.state_key().is_empty() {
-                println!("OtherState event with state_key: {}", other.state_key());
-            }
             (Some(other.state_key().to_string()), None)
         }
         _ => (None, None),
     };
-    let (_, transistion_type, _, _display_name_from_state) = is_small_state_event(&event_item);
-    //println!("state_key: {:?}, membership: {:?}, transistion_type: {:?}, event_type: {}", state_key, membership, transistion_type, event_type);
+    let (_is_small_state, transistion_type, _display_name_from_state) = is_small_state_event(&event_item);
     UserEvent {
         index,
         display_name: user_name,
-        event_type: event_type.to_string(),
         transition: transistion_type,
-        is_state: matches!(event_item.content(), 
-            TimelineItemContent::MembershipChange(_) | 
-            TimelineItemContent::ProfileChange(_) | 
-            TimelineItemContent::OtherState(_)
-        ),
         is_redacted: matches!(event_item.content(), 
             TimelineItemContent::MsgLike(msg) if matches!(msg.kind, matrix_sdk_ui::timeline::MsgLikeKind::Redacted)
         ),
@@ -258,6 +173,7 @@ pub fn convert_to_timeline_event(event_item: EventTimelineItem, user_name: Strin
         membership,
     }
 }
+
 /// Convert Matrix membership change → transition type
 pub fn get_transition_from_membership_change(change: &MembershipChange) -> TransitionType {
     use matrix_sdk_ui::timeline::MembershipChange;
@@ -286,25 +202,25 @@ pub fn get_transition_from_membership_change(change: &MembershipChange) -> Trans
 pub fn get_transition_from_other_events(content: &AnyOtherFullStateEventContent, _state_key: &str) -> TransitionType {
     match content {
         AnyOtherFullStateEventContent::RoomServerAcl(_) => TransitionType::ServerAcl,
-        AnyOtherFullStateEventContent::RoomPinnedEvents(_) => TransitionType::ChangedPins,
-        AnyOtherFullStateEventContent::RoomName(_) => TransitionType::NoChange,
-        AnyOtherFullStateEventContent::RoomTopic(_) => TransitionType::NoChange,
-        AnyOtherFullStateEventContent::RoomAvatar(_) => TransitionType::NoChange,
-        AnyOtherFullStateEventContent::RoomCanonicalAlias(_) => TransitionType::NoChange,
+        AnyOtherFullStateEventContent::RoomPinnedEvents(_) => TransitionType::ConfigureRoom,
+        AnyOtherFullStateEventContent::RoomName(_) => TransitionType::ConfigureRoom,
+        AnyOtherFullStateEventContent::RoomTopic(_) => TransitionType::ConfigureRoom,
+        AnyOtherFullStateEventContent::RoomAvatar(_) => TransitionType::ConfigureRoom,
+        AnyOtherFullStateEventContent::RoomCanonicalAlias(_) => TransitionType::ConfigureRoom,
         AnyOtherFullStateEventContent::RoomCreate(_) => TransitionType::CreateRoom,
-        AnyOtherFullStateEventContent::RoomEncryption(_) => TransitionType::HiddenEvent,
-        AnyOtherFullStateEventContent::RoomGuestAccess(_) => TransitionType::HiddenEvent,
-        AnyOtherFullStateEventContent::RoomHistoryVisibility(_) => TransitionType::HiddenEvent,
-        AnyOtherFullStateEventContent::RoomJoinRules(_) => TransitionType::HiddenEvent,
-        AnyOtherFullStateEventContent::RoomPowerLevels(_) => TransitionType::HiddenEvent,
-        AnyOtherFullStateEventContent::RoomThirdPartyInvite(_) => TransitionType::HiddenEvent,
-        AnyOtherFullStateEventContent::RoomTombstone(_) => TransitionType::HiddenEvent,
-        AnyOtherFullStateEventContent::RoomAliases(_) => TransitionType::HiddenEvent,
-        AnyOtherFullStateEventContent::SpaceChild(_) => TransitionType::HiddenEvent,
-        AnyOtherFullStateEventContent::SpaceParent(_) => TransitionType::HiddenEvent,
-        AnyOtherFullStateEventContent::PolicyRuleRoom(_) => TransitionType::HiddenEvent,
-        AnyOtherFullStateEventContent::PolicyRuleServer(_) => TransitionType::HiddenEvent,
-        AnyOtherFullStateEventContent::PolicyRuleUser(_) => TransitionType::HiddenEvent,
+        AnyOtherFullStateEventContent::RoomEncryption(_) => TransitionType::ConfigureRoom,
+        AnyOtherFullStateEventContent::RoomGuestAccess(_) => TransitionType::ConfigureRoom,
+        AnyOtherFullStateEventContent::RoomHistoryVisibility(_) => TransitionType::ConfigureRoom,
+        AnyOtherFullStateEventContent::RoomJoinRules(_) => TransitionType::ConfigureRoom,
+        AnyOtherFullStateEventContent::RoomPowerLevels(_) => TransitionType::ConfigureRoom,
+        AnyOtherFullStateEventContent::RoomThirdPartyInvite(_) => TransitionType::ConfigureRoom,
+        AnyOtherFullStateEventContent::RoomTombstone(_) => TransitionType::ConfigureRoom,
+        AnyOtherFullStateEventContent::RoomAliases(_) => TransitionType::ConfigureRoom,
+        AnyOtherFullStateEventContent::SpaceChild(_) => TransitionType::ConfigureRoom,
+        AnyOtherFullStateEventContent::SpaceParent(_) => TransitionType::ConfigureRoom,
+        AnyOtherFullStateEventContent::PolicyRuleRoom(_) => TransitionType::ConfigureRoom,
+        AnyOtherFullStateEventContent::PolicyRuleServer(_) => TransitionType::ConfigureRoom,
+        AnyOtherFullStateEventContent::PolicyRuleUser(_) => TransitionType::ConfigureRoom,
         AnyOtherFullStateEventContent::_Custom { .. } => TransitionType::HiddenEvent,
     }
 }
@@ -333,17 +249,49 @@ pub fn append_user_event(user_event: UserEvent, user_events: &mut Vec<(String, V
     }
 }
 
+/// Appends a new user event to the given HashMap of user events.
+/// This version handles the HashMap structure used in room_screen.rs
+fn append_user_event_to_map(user_event: UserEvent, user_events: &mut HashMap<usize, (String, Vec<UserEvent>)>) {
+    let item_id = user_event.index;
+    let mut old_group_id = None;
+    let user_state_key = user_event.state_key.clone().unwrap_or_default();
+    let user_state_key = if user_state_key.is_empty() {
+        user_event.sender.clone()
+    } else {
+        user_state_key
+    };
+    for (group_id, (user_id, user_events_vec)) in user_events.iter_mut() {
+        if user_state_key == *user_id {
+            if user_events_vec.iter().filter(|user_event| user_event.index == item_id).count() == 0 {
+                user_events_vec.push(user_event.clone());
+            }
+            if &item_id >= group_id {
+                return;
+            }
+            old_group_id = Some(group_id.clone());
+        }
+    }
+    
+    
+    if let Some(old_group_id) = old_group_id {
+        if let Some(data) = user_events.remove(&old_group_id) {
+            user_events.insert(item_id, data);
+            return;
+        }
+    }
+    user_events.insert(item_id, (user_state_key.clone(), vec![user_event]));
+}
+
 /// Checks if a event timeline item is a small state event.
 /// Returns true if the item is a small state event that can be grouped.
-/// return state key
 /// return Display name
 pub fn is_small_state_event(
     event_tl_item: &EventTimelineItem,
-) -> (bool, TransitionType, Option<String>, Option<String>) {
+) -> (bool, TransitionType, Option<String>) {
     match event_tl_item.content() {
         TimelineItemContent::MembershipChange(change) => (true, change.change().map(
             |f| get_transition_from_membership_change(&f)
-            ).unwrap_or_default(), None, change.display_name()
+            ).unwrap_or_default(), change.display_name()
         ),
         TimelineItemContent::ProfileChange(change) => {
             let transition_type = if let Some(_) = change.avatar_url_change() {
@@ -353,26 +301,29 @@ pub fn is_small_state_event(
             } else {
                 TransitionType::NoChange
             };
-            (true, transition_type, None, None)
+            (true, transition_type, None)
         }
-        TimelineItemContent::OtherState(other_state) => (true, get_transition_from_other_events(other_state.content(), other_state.state_key()), Some(other_state.state_key().to_string()), None),
+        TimelineItemContent::OtherState(other_state) => {
+            (true, get_transition_from_other_events(other_state.content(), other_state.state_key()), None)
+        },
         TimelineItemContent::MsgLike(MsgLikeContent {
             kind: MsgLikeKind::Poll(_),
             ..
-        }) => (true, TransitionType::NoChange, None, None),
+        }) => (true, TransitionType::NoChange, None),
         TimelineItemContent::MsgLike(MsgLikeContent {
             kind: MsgLikeKind::Redacted,
             ..
-        }) => (true, TransitionType::MessageRemoved, None, None),
+        }) => (true, TransitionType::MessageRemoved, None),
         TimelineItemContent::MsgLike(MsgLikeContent {
             kind: MsgLikeKind::UnableToDecrypt(_),
             ..
-        }) => (true, TransitionType::UnableToDecrypt, None, None),
+        }) => (true, TransitionType::UnableToDecrypt, None),
         _ => {
-            (false, TransitionType::NoChange, None, None)
+            (false, TransitionType::NoChange, None)
         }
     }
 }
+
 /// Summarize all user transitions into a single string
 pub fn generate_summary(
     user_events: &HashMap<usize, (String, Vec<UserEvent>)>,
@@ -402,7 +353,6 @@ pub fn generate_summary(
             aggregates.push((canonical, vec![name]));
         }
     }
-    println!("Aggregates: {:?}", aggregates);
     // Build text
     let mut summary_parts = Vec::new();
     for (canonical, names) in aggregates {
@@ -412,7 +362,6 @@ pub fn generate_summary(
             .into_iter()
             .map(|(t, repeats)| describe_transition(t, names.len(), repeats))
             .collect();
-        println!("descs: {:?}", descs);
         let name_list = format_name_list(&names, summary_length);
         let transition_text = descs.join(", ");
         summary_parts.push(format!("{} {}", name_list, transition_text));
@@ -421,25 +370,140 @@ pub fn generate_summary(
     summary_parts.join(", ")
 }
 
+/// Dynamically updates small state groups as timeline items are processed.
+/// This function is called during populate_small_state_event to build groups on-demand.
+/// Since iteration starts from the biggest item_id and goes backwards, we handle reverse grouping.
+/// Returns a tuple whether to display the message, and whether to display the collapsible button and whether collapsible list is expanded and range to redraw
+pub fn update_small_state_groups_for_item(
+    item_id: usize,
+    username: String,
+    current_item: &EventTimelineItem,
+    previous_item: Option<&Arc<TimelineItem>>,
+    next_item: Option<&Arc<TimelineItem>>,
+    room_creation: &mut Option<(OwnedUserId, OwnedEventId)>,
+    small_state_groups: &mut Vec<(std::ops::Range<usize>, bool, HashMap<usize, (String, Vec<UserEvent>)>)>,
+    creation_collapsible_list: &mut CreationCollapsibleList,
+) -> (bool, bool, bool, Range<usize>) { //opened, show_collapsible_button, expanded, redraw_range
+    let (current_item_is_small_state, _transition, display_name) = is_small_state_event(current_item);
+    if !current_item_is_small_state {
+        return (true, false, false, Range::default()); // Not a small state event, draw as individual item, no debug button
+    }
+
+    // check if the next item (item_id + 1) is a small state event to continue grouping
+    let (next_item_is_small_state, _, _) = next_item
+        .and_then(|timeline_item| match timeline_item.kind() {
+            TimelineItemKind::Event(event_tl_item) => Some(event_tl_item),
+            _ => None,
+        })
+        .map(is_small_state_event)
+        .unwrap_or((false, TransitionType::NoChange, None));
+    let (previous_item_is_small_state, _, _) = previous_item
+        .and_then(|timeline_item| match timeline_item.kind() {
+            TimelineItemKind::Event(event_tl_item) => Some(event_tl_item),
+            _ => None,
+        })
+        .map(is_small_state_event)
+        .unwrap_or((false, TransitionType::NoChange, None));
+    if !previous_item_is_small_state && !next_item_is_small_state {
+        return (true, false, false,  Range::default()); // Isolated small state event, no debug button
+    }
+    if room_creation.is_none() {
+        if let TimelineItemContent::OtherState(other_state) = current_item.content() {
+            if let AnyOtherFullStateEventContent::RoomCreate(FullStateEventContent::Original { .. }) = other_state.content() {
+                let creator_id = current_item.sender().to_owned();
+                if let Some(event_id) = current_item.event_id() {
+                    *room_creation = Some((creator_id, event_id.to_owned()));
+                    creation_collapsible_list.range.start = item_id;
+                    if creation_collapsible_list.range.end <= item_id {
+                        creation_collapsible_list.range.end = item_id + 1;
+                    }
+                    return (true, true, creation_collapsible_list.opened, item_id..item_id + 1);
+                }                
+            }
+        }
+    }
+    creation_collapsible_list.username = username.clone();
+    let user_event = convert_to_timeline_event(current_item.clone(), display_name.unwrap_or(username), item_id);
+    if item_id == creation_collapsible_list.range.start && creation_collapsible_list.range.len() > 0 {
+        return (true, true, creation_collapsible_list.opened, creation_collapsible_list.range.clone());
+    }
+    if matches!(user_event.transition, 
+        TransitionType::ConfigureRoom | TransitionType::Joined
+    ) {
+        if creation_collapsible_list.range.len()== 0 {
+            return (true, false, true, Range::default());
+        }
+        if creation_collapsible_list.range.end == item_id {
+            creation_collapsible_list.range.end = item_id + 1;
+            if matches!(user_event.transition, 
+                TransitionType::ConfigureRoom | TransitionType::Joined
+            ) {
+                return (creation_collapsible_list.opened, false, creation_collapsible_list.opened, item_id..item_id + 2);
+            } else {
+                return (creation_collapsible_list.opened, false, creation_collapsible_list.opened, item_id..item_id + 1);
+            }
+        }
+        if creation_collapsible_list.range.contains(&item_id) {
+            return (creation_collapsible_list.opened, false, creation_collapsible_list.opened, Range::default());
+        }
+    }
+    // Check if this item is already part of an existing group or can extend one
+    let group_keys: Vec<Range<usize>> = small_state_groups.iter().map(|f| f.0.clone()).collect();
+    'outer: for (range, is_open, user_events_map) in small_state_groups.iter_mut() {
+        if range.start == item_id {
+            // Add user event to the HashMap using item_id as key with userId and Vec<UserEvent>
+            append_user_event_to_map(user_event, user_events_map);
+            return (true, range.len() > 2, *is_open, Range::default()); // Start of group, show debug button
+        }
+        if range.contains(&item_id) {
+            // Add user event to the HashMap using item_id as key with userId and Vec<UserEvent>
+            append_user_event_to_map(user_event, user_events_map);
+            return (*is_open || range.len() <= 2, false, *is_open,  Range::default()); // Item is in group but not at start, no debug button
+        }
+        
+        // Since we're iterating backwards (from highest to lowest item_id),
+        if range.start == item_id + 1 {
+            for r in group_keys.iter() {
+                if r.contains(&item_id) {
+                    continue 'outer;
+                }
+            }
+            // Extend this group backwards to include current item
+            *range = item_id..range.end;
+            append_user_event_to_map(user_event, user_events_map);
+            return (*is_open || range.len() <= 2, false, false,  range.clone()); // Extended group, no debug button for this item
+        }
+    }
+
+    if next_item_is_small_state {
+        let mut user_events_map = HashMap::new();
+        append_user_event_to_map(user_event, &mut user_events_map);
+        // Plus 2 to include the next item into the group.        
+        small_state_groups.push((item_id..(item_id + 2), false, user_events_map));
+        return (false, false, false, item_id..(item_id + 2));
+    }
+    (false, false, false,  Range::default()) // Return collapsed state, no debug button
+}
+
 #[cfg(test)]
 mod tests {
     use super::*;
 
-    // #[test]
+    //#[test]
     // fn test_generate_summary() {
     //     let mut user_events: HashMap<usize, (String, Vec<UserEvent>)> = HashMap::new();
         
     //     user_events.insert(0, ("alice".into(), vec![
-    //         UserEvent { user_id: "alice".into(), display_name: "Alice".into(), transition: TransitionType::Joined, index: 0, state_key: None },
-    //         UserEvent { user_id: "alice".into(), display_name: "Alice".into(), transition: TransitionType::Left, index: 1, state_key: None },
+    //         UserEvent { display_name: "Alice".into(), transition: TransitionType::Joined, index: 0, state_key: None },
+    //         UserEvent { display_name: "Alice".into(), transition: TransitionType::Left, index: 1, state_key: None },
     //     ]));
         
     //     user_events.insert(2, ("bob".into(), vec![
-    //         UserEvent { user_id: "bob".into(), display_name: "Bob".into(), transition: TransitionType::ChangedAvatar, index: 2, state_key: None },
+    //         UserEvent { display_name: "Bob".into(), transition: TransitionType::ChangedAvatar, index: 2, state_key: None },
     //     ]));
         
     //     user_events.insert(3, ("charlie".into(), vec![
-    //         UserEvent { user_id: "charlie".into(), display_name: "Charlie".into(), transition: TransitionType::Joined, index: 3, state_key: None },
+    //         UserEvent { display_name: "Charlie".into(), transition: TransitionType::Joined, index: 3, state_key: None },
     //     ]));
 
     //     let summary = generate_summary(&user_events, 2);
diff --git a/src/home/mod.rs b/src/home/mod.rs
index 83b88384..9c8a40d3 100644
--- a/src/home/mod.rs
+++ b/src/home/mod.rs
@@ -10,6 +10,7 @@ pub mod loading_pane;
 pub mod location_preview;
 pub mod main_desktop_ui;
 pub mod main_mobile_ui;
+pub mod membership_transitions;
 pub mod room_screen;
 pub mod room_read_receipt;
 pub mod rooms_list;
diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs
index 4ae9fa13..a5c160ff 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -18,7 +18,7 @@ use matrix_sdk::{
             },
             sticker::{StickerEventContent, StickerMediaSource},
         },
-        matrix_uri::MatrixId, uint, EventId, MatrixToUri, MatrixUri, OwnedEventId, OwnedMxcUri, OwnedRoomId, UserId
+        matrix_uri::MatrixId, uint, EventId, MatrixToUri, MatrixUri, OwnedEventId, OwnedMxcUri, OwnedRoomId, OwnedUserId, UserId
     }, OwnedServerName
 };
 use matrix_sdk_ui::timeline::{
@@ -26,13 +26,13 @@ use matrix_sdk_ui::timeline::{
 };
 
 use crate::{
-    app::AppStateAction, avatar_cache, event_preview::{plaintext_body_of_timeline_item, text_preview_of_encrypted_message, text_preview_of_member_profile_change, text_preview_of_other_message_like, text_preview_of_other_state, text_preview_of_redacted_message, text_preview_of_room_membership_change, text_preview_of_timeline_item}, home::{edited_indicator::EditedIndicatorWidgetRefExt, link_preview::{LinkPreviewCache, LinkPreviewRef, LinkPreviewWidgetRefExt}, loading_pane::{LoadingPaneState, LoadingPaneWidgetExt}, rooms_list::RoomsListRef, tombstone_footer::SuccessorRoomDetails}, media_cache::{MediaCache, MediaCacheEntry}, profile::{
+    app::AppStateAction, avatar_cache, event_preview::{plaintext_body_of_timeline_item, text_preview_of_encrypted_message, text_preview_of_member_profile_change, text_preview_of_other_message_like, text_preview_of_other_state, text_preview_of_redacted_message, text_preview_of_room_membership_change, text_preview_of_timeline_item}, home::{edited_indicator::EditedIndicatorWidgetRefExt, link_preview::{LinkPreviewCache, LinkPreviewRef, LinkPreviewWidgetRefExt}, loading_pane::{LoadingPaneState, LoadingPaneWidgetExt}, membership_transitions::{CreationCollapsibleList, UserEvent, generate_summary, update_small_state_groups_for_item}, rooms_list::RoomsListRef, tombstone_footer::SuccessorRoomDetails}, media_cache::{MediaCache, MediaCacheEntry}, profile::{
         user_profile::{AvatarState, ShowUserProfileAction, UserProfile, UserProfileAndRoomId, UserProfilePaneInfo, UserProfileSlidingPaneRef, UserProfileSlidingPaneWidgetExt},
         user_profile_cache,
     },
     room::{room_input_bar::RoomInputBarState, typing_notice::TypingNoticeWidgetExt},
     shared::{
-        avatar::AvatarWidgetRefExt, callout_tooltip::TooltipAction, html_or_plaintext::{HtmlOrPlaintextRef, HtmlOrPlaintextWidgetRefExt, RobrixHtmlLinkAction}, jump_to_bottom_button::{JumpToBottomButtonWidgetExt, UnreadMessageCount}, membership_transitions::{TransitionType, UserEvent, convert_to_timeline_event, generate_summary, is_small_state_event}, popup_list::{PopupItem, PopupKind, enqueue_popup_notification}, restore_status_view::RestoreStatusViewWidgetExt, styles::*, text_or_image::{TextOrImageRef, TextOrImageWidgetRefExt}, timestamp::TimestampWidgetRefExt
+        avatar::AvatarWidgetRefExt, callout_tooltip::TooltipAction, html_or_plaintext::{HtmlOrPlaintextRef, HtmlOrPlaintextWidgetRefExt, RobrixHtmlLinkAction}, jump_to_bottom_button::{JumpToBottomButtonWidgetExt, UnreadMessageCount}, popup_list::{PopupItem, PopupKind, enqueue_popup_notification}, restore_status_view::RestoreStatusViewWidgetExt, styles::*, text_or_image::{TextOrImageRef, TextOrImageWidgetRefExt}, timestamp::TimestampWidgetRefExt
     },
     sliding_sync::{BackwardsPaginateUntilEventRequest, MatrixRequest, PaginationDirection, TimelineEndpoints, TimelineRequestSender, UserPowerLevels, get_client, submit_async_request, take_timeline_endpoints}, utils::{self, ImageFormat, MEDIA_THUMBNAIL_FORMAT, room_name_or_id, unix_time_millis_to_datetime}
 };
@@ -406,8 +406,7 @@ live_design! {
                 }
                 text: ""
             }
-            
-            
+
             // Center the Avatar vertically with respect to the SmallStateEvent content.
             avatar_row = <AvatarRow> { margin: {top: -1.0} }
         }
@@ -703,33 +702,30 @@ impl Widget for RoomScreen {
                 // Handle collapsible button click in SmallStateEvent
                 if wr.button(ids!(collapsible_button)).clicked(actions) {
                     if let Some(tl_state) = &mut self.tl_state {
-                        println!("item_id: {} collapsible_button clicked tl_state.creation_event {:?} small_state_groups {:?}", item_id, tl_state.creation_event, tl_state.small_state_groups);
-                        let mut is_creation_group = false;
-                        let (creation_hashmap, creation_event, open) = &mut tl_state.creation_event;
-                        if let Some(creation_event) = &creation_event {
-                            if let Some(range) = creation_hashmap.get(&creation_event.sender) {
-                                if range.start == item_id {
-                                    // Toggle the group's open/closed state
-                                    *open = !*open;
-                                    let omit_first_range = (range.start+1)..range.end;
-                                    println!("Toggling creation event group for sender {} range {:?} new open state {}", creation_event.sender, omit_first_range, *open);
-                                    // Force redraw of all items in this group by clearing their cached drawn status
-                                    tl_state.content_drawn_since_last_update.remove(omit_first_range.clone());
-                                    tl_state.profile_drawn_since_last_update.remove(omit_first_range.clone());
-                                    
-                                    // Update button text to reflect new state:
-                                    // ▲ (up arrow) = expanded/open - items are visible
-                                    // ▼ (down arrow) = collapsed/closed - items are hidden
-                                    let button_text = if *open { "▲" } else { "▼" };
-                                    wr.button(ids!(collapsible_button)).set_text(cx, button_text);
-                                    // If the last item is a group of small state events, scroll to the end when it is expanded.
-                                    if range.end == tl_state.items.len() && *open {
-                                        portal_list.smooth_scroll_to_end(cx, 90.0, None);
-                                    }
-                                    is_creation_group = true;
-                                }
+                        let mut is_creation_group = false;                        
+                        if tl_state.creation_collapsible_list.range.start == item_id {
+                            let open = &mut tl_state.creation_collapsible_list.opened;
+                            // Toggle the group's open/closed state
+                            *open = !*open;
+                            let range = tl_state.creation_collapsible_list.range.clone();
+                            let omit_first_range = (range.start + 1)..range.end + 1;
+                            // Force redraw of all items in this group by clearing their cached drawn status
+                            tl_state.content_drawn_since_last_update.remove(omit_first_range.clone());
+                            tl_state.profile_drawn_since_last_update.remove(omit_first_range.clone());
+                            
+                            // Update button text to reflect new state:
+                            // ▲ (up arrow) = expanded/open - items are visible
+                            // ▼ (down arrow) = collapsed/closed - items are hidden
+                            let button_text = if *open { "▲" } else { "▼" };
+                            wr.button(ids!(collapsible_button)).set_text(cx, button_text);
+                            // If the last item is a group of small state events, scroll to the end when it is expanded.
+                            if range.end == tl_state.items.len() && *open {
+                                portal_list.smooth_scroll_to_end(cx, 90.0, None);
                             }
+                            is_creation_group = true;
                         }
+                            
+                        
                         if !is_creation_group {
                             for (range, open, _user_events_map) in &mut tl_state.small_state_groups {
                                 if range.start == item_id {
@@ -739,7 +735,6 @@ impl Widget for RoomScreen {
                                     // Force redraw of all items in this group by clearing their cached drawn status
                                     tl_state.content_drawn_since_last_update.remove(omit_first_range.clone());
                                     tl_state.profile_drawn_since_last_update.remove(omit_first_range.clone());
-                                    println!("Toggling not is_creation_group event group for range {:?} new open state {}", omit_first_range, *open);
 
                                     // Update button text to reflect new state:
                                     // ▲ (up arrow) = expanded/open - items are visible
@@ -1077,9 +1072,10 @@ impl Widget for RoomScreen {
                                     next_event,
                                     poll_state,
                                     item_drawn_status,
+                                    &mut tl_state.room_creator_event,
                                     &mut tl_state.small_state_groups,
                                     &mut tl_state.content_drawn_since_last_update,
-                                    &mut tl_state.creation_event
+                                    &mut tl_state.creation_collapsible_list
                                 ),
                                 MsgLikeKind::Redacted => populate_small_state_event(
                                     cx,
@@ -1091,9 +1087,10 @@ impl Widget for RoomScreen {
                                     next_event,
                                     &RedactedMessageEventMarker,
                                     item_drawn_status,
+                                    &mut tl_state.room_creator_event,
                                     &mut tl_state.small_state_groups,
                                     &mut tl_state.content_drawn_since_last_update,
-                                    &mut tl_state.creation_event
+                                    &mut tl_state.creation_collapsible_list
                                 ),
                                 MsgLikeKind::UnableToDecrypt(utd) => populate_small_state_event(
                                     cx,
@@ -1105,9 +1102,10 @@ impl Widget for RoomScreen {
                                     next_event,
                                     utd,
                                     item_drawn_status,
+                                    &mut tl_state.room_creator_event,
                                     &mut tl_state.small_state_groups,
                                     &mut tl_state.content_drawn_since_last_update,
-                                    &mut tl_state.creation_event
+                                    &mut tl_state.creation_collapsible_list
                                 ),
                                 MsgLikeKind::Other(other) => populate_small_state_event(
                                     cx,
@@ -1119,9 +1117,10 @@ impl Widget for RoomScreen {
                                     next_event,
                                     other,
                                     item_drawn_status,
+                                    &mut tl_state.room_creator_event,
                                     &mut tl_state.small_state_groups,
                                     &mut tl_state.content_drawn_since_last_update,
-                                    &mut tl_state.creation_event
+                                    &mut tl_state.creation_collapsible_list
                                 ),
                             },
                             TimelineItemContent::MembershipChange(membership_change) => populate_small_state_event(
@@ -1134,9 +1133,10 @@ impl Widget for RoomScreen {
                                 next_event,
                                 membership_change,
                                 item_drawn_status,
+                                &mut tl_state.room_creator_event,
                                 &mut tl_state.small_state_groups,
                                 &mut tl_state.content_drawn_since_last_update,
-                                &mut tl_state.creation_event
+                                &mut tl_state.creation_collapsible_list
                             ),
                             TimelineItemContent::ProfileChange(profile_change) => populate_small_state_event(
                                 cx,
@@ -1148,9 +1148,10 @@ impl Widget for RoomScreen {
                                 next_event,
                                 profile_change,
                                 item_drawn_status,
+                                &mut tl_state.room_creator_event,
                                 &mut tl_state.small_state_groups,
                                 &mut tl_state.content_drawn_since_last_update,
-                                &mut tl_state.creation_event
+                                &mut tl_state.creation_collapsible_list
                             ),
                             TimelineItemContent::OtherState(other) => populate_small_state_event(
                                 cx,
@@ -1162,9 +1163,10 @@ impl Widget for RoomScreen {
                                 next_event,
                                 other,
                                 item_drawn_status,
+                                &mut tl_state.room_creator_event,
                                 &mut tl_state.small_state_groups,
                                 &mut tl_state.content_drawn_since_last_update,
-                                &mut tl_state.creation_event
+                                &mut tl_state.creation_collapsible_list
                             ),
                             unhandled => {
                                 let item = list.item(cx, item_id, id!(SmallStateEvent));
@@ -1379,14 +1381,10 @@ impl RoomScreen {
                             // Note: If we want to preserve events during shifts, we would need to
                             // update the HashMap keys and UserEvent indices here
                         }
-                        let (creation_hashmap, creation_event, _is_open) = &mut tl.creation_event;
-                        for (_user_id, range) in creation_hashmap.iter_mut() {
-                            let new_start = (range.start as i32 + shift).max(0) as usize;
-                            let new_end = (range.end as i32 + shift).max(0) as usize;
-                            *range = new_start..new_end;
-                        }
-                        if let Some(creation_event) = creation_event {
-                            creation_event.index = (creation_event.index as i32 + shift).max(0) as usize;
+                        if !tl.creation_collapsible_list.range.is_empty() {
+                            let new_start = (tl.creation_collapsible_list.range.start as i32 + shift).max(0) as usize;
+                            let new_end = (tl.creation_collapsible_list.range.end as i32 + shift).max(0) as usize;
+                            tl.creation_collapsible_list.range = new_start..new_end;
                         }
                     }
                     tl.items = new_items;
@@ -2152,8 +2150,9 @@ impl RoomScreen {
                 scrolled_past_read_marker: false,
                 latest_own_user_receipt: None,
                 tombstone_info,
+                room_creator_event: None,
                 small_state_groups: Vec::new(),
-                creation_event: (HashMap::new(), None, false),
+                creation_collapsible_list: CreationCollapsibleList::default(),
             };
             (tl_state, true)
         };
@@ -2712,11 +2711,14 @@ struct TimelineUiState {
     /// If `Some`, this room has been tombstoned and the details of its successor room
     /// are contained within. If `None`, the room has not been tombstoned.
     tombstone_info: Option<SuccessorRoomDetails>,
+    
+    /// The user ID of the room creator and the event that created the room, if known.
+    room_creator_event: Option<(OwnedUserId, OwnedEventId)>,
     /// A vector of ranges of small state items that are grouped together in the UI.
     /// 
     /// There is a collapsible to the right of the message of the first item in the group. 
     small_state_groups: Vec<(std::ops::Range<usize>, bool, HashMap<usize, (String, Vec<UserEvent>)>)>,
-    creation_event: (HashMap<std::string::String, std::ops::Range<usize>>, std::option::Option<UserEvent>, bool),
+    creation_collapsible_list: CreationCollapsibleList,
 }
 
 #[derive(Default, Debug)]
@@ -3362,7 +3364,6 @@ fn populate_message_view(
                 .show_with_state(cx, tsp_sign_state);
         }
     }
-    item.as_view().set_visible(cx, true);
     (item, new_drawn_status)
 }
 
@@ -3846,204 +3847,6 @@ pub fn populate_preview_of_timeline_item(
 }
 
 
-
-fn append_user_event(user_event: UserEvent, user_events: &mut HashMap<usize, (String, Vec<UserEvent>)>) {
-    if user_event.transition == TransitionType::UnableToDecrypt {
-        println!("unable to decrypt user event {:?}", user_event);
-    }
-    let item_id = user_event.index;
-    let mut old_group_id = None;
-    let user_state_key = user_event.state_key.clone().unwrap_or_default();
-    let user_state_key = if user_state_key.is_empty() {
-        user_event.sender.clone()
-    } else {
-        user_state_key
-    };
-    for (group_id, (user_id, user_events_vec)) in user_events.iter_mut() {
-        if user_state_key == *user_id {
-            if user_events_vec.iter().filter(|user_event| user_event.index == item_id).count() == 0 {
-                user_events_vec.push(user_event.clone());
-            }
-            if &item_id >= group_id {
-                return;
-            }
-            old_group_id = Some(group_id.clone());
-        }
-    }
-    
-    
-    if let Some(old_group_id) = old_group_id {
-        if let Some(data) = user_events.remove(&old_group_id) {
-            user_events.insert(item_id, data);
-            return;
-        }
-    }
-    user_events.insert(item_id, (user_state_key.clone(), vec![user_event]));
-}
-
-/// Dynamically updates small state groups as timeline items are processed.
-/// This function is called during populate_small_state_event to build groups on-demand.
-/// Since iteration starts from the biggest item_id and goes backwards, we handle reverse grouping.
-/// Returns a tuple whether to display the message, and whether to display the collapsible button and whether collapsible list is expanded and range to redraw
-fn update_small_state_groups_for_item(
-    cx:&mut Cx,
-    room_id: &OwnedRoomId,
-    item_id: usize,
-    mut username: String,
-    current_item: &EventTimelineItem,
-    previous_item: Option<&Arc<TimelineItem>>,
-    next_item: Option<&Arc<TimelineItem>>,
-    small_state_groups: &mut Vec<(std::ops::Range<usize>, bool, HashMap<usize, (String, Vec<UserEvent>)>)>,
-    creation_event: &mut (HashMap<String,std::ops::Range<usize>>, Option<UserEvent>, bool),
-) -> (bool, bool, bool, Range<usize>) {
-    let (current_item_is_small_state, _transition, state_key, _) = is_small_state_event(current_item);
-    if !current_item_is_small_state {
-        return (true, false, false, Range::default()); // Not a small state event, draw as individual item, no debug button
-    }
-
-    // check if the next item (item_id + 1) is a small state event to continue grouping
-    let (next_item_is_small_state, _, _, _) = next_item
-        .and_then(|timeline_item| match timeline_item.kind() {
-            TimelineItemKind::Event(event_tl_item) => Some(event_tl_item),
-            _ => None,
-        })
-        .map(is_small_state_event)
-        .unwrap_or((false, TransitionType::NoChange, None, None));
-    let (previous_item_is_small_state, _, _, _) = previous_item
-        .and_then(|timeline_item| match timeline_item.kind() {
-            TimelineItemKind::Event(event_tl_item) => Some(event_tl_item),
-            _ => None,
-        })
-        .map(is_small_state_event)
-        .unwrap_or((false, TransitionType::NoChange, None, None));
-    if !previous_item_is_small_state && !next_item_is_small_state {
-        return (true, false, false,  Range::default()); // Isolated small state event, no debug button
-    }
-    if let Some(state_key) = state_key {
-        if !state_key.is_empty() {
-            if let Ok(user_id) = UserId::parse(&state_key) {
-                println!("small state event user_id: {:?}", user_id);
-                let display_name = user_profile_cache::with_user_profile(cx, user_id, true, |profile, room_members| {
-                    room_members
-                        .get(room_id)
-                        .map(|rm| {
-                            rm.display_name().map(|n| n.to_owned())
-                        })
-                        .unwrap_or_else(|| profile.username.clone())
-                });
-                if let Some(display_name) = display_name {
-                    if let Some(display_name) = display_name {
-                        println!("small state event display_name: {:?}", display_name);
-                        username = display_name;
-                    }
-                }
-            }
-        }
-    }
-    let user_event = convert_to_timeline_event(current_item.clone(), username.clone(), item_id);
-    println!("user_event: index: {:?} user_event: {:?}", user_event.index, user_event);
-    let (creation_events_map, creation_user_event, is_open) = creation_event;
-    if user_event.event_type == "m.room.create" {
-        println!("m.room.create: item_id {:?}", item_id );
-        *creation_user_event = Some(user_event.clone());
-        println!("creation_events_map  {:?}", creation_events_map);
-        for (user_id, join_range) in creation_events_map.iter_mut() {
-            if user_id == &user_event.sender {
-                if join_range.start == item_id + 1 {
-                    *join_range = item_id..join_range.end;
-                    println!("join_range changes in creation user event {:?} user_id: {:?}", join_range, user_id);
-                    return (true, true, false, join_range.clone()); // Continue creation group
-                }
-                // *join_range = item_id..join_range.end;
-                // println!("join_range changes in creation user event {:?} user_id: {:?}", join_range, user_id);
-                return (true, true, false, Range::default()); // Continue creation group
-            }
-        }
-        return (true, true, false, Range::default());
-    }
-    println!("item id {:?}, creation_user_event.is_none()",creation_user_event.is_none());
-    println!("item_id {:?}, update before checking membership {:?} transition {:?}", item_id, user_event.membership, user_event.transition );
-    println!("item_id {:?}, update before event_type {:?} ", item_id, user_event.event_type);
-    if creation_user_event.is_none() && (matches!(user_event.event_type.as_str(), 
-        "m.room.create" |
-        "m.room.name" | "m.room.topic" | "m.room.pinned_events" |
-        "m.room.power_levels" | "m.room.join_rules" | "m.room.history_visibility" |
-        "m.room.canonical_alias" |   "m.room.state"
-    ) || user_event.transition == TransitionType::Joined)
-    {
-        println!("item_id {:?} entered creation_events_map {:?}", item_id, creation_events_map);
-        for (user_id, join_range) in creation_events_map.iter_mut() {
-            if user_id == &user_event.sender {
-                if join_range.start == item_id + 1 {
-                    println!("join_range changes outside creation user event {:?}", join_range);
-                    *join_range = item_id..join_range.end;
-                    if let Some(creation_user_event) = creation_user_event {
-                        if creation_user_event.sender != user_event.sender {
-                            return (true, false, *is_open, join_range.clone()); // Start of group, show debug button
-                        }
-                    }
-                }
-                if !join_range.contains(&item_id) {
-                    if item_id < join_range.start {
-                        let old_range = join_range.clone();
-                        *join_range = item_id..(item_id + 1);
-                        return (true, false, *is_open, item_id..old_range.end); // Set range to earlier timeline that might
-                    }
-                }
-                return (true, false, *is_open, join_range.clone()); // Start of group, show debug button
-            }
-        }
-        println!("new creation group created for user {:?} range {:?}", user_event.sender, item_id..(item_id + 2));
-        creation_events_map.insert(user_event.sender.clone(), item_id..(item_id + 2));
-        return (true, false, false, item_id..(item_id + 2)); // New creation group created
-    }
-    if let Some(creation_user_event) = creation_user_event {
-        for (user_id, join_range) in creation_events_map.iter_mut() {
-            if user_id == &creation_user_event.sender {
-                if join_range.start != item_id + 1 {
-                    if join_range.contains(&item_id) {
-                        return (*is_open, false, false, Range::default()); // Item is in group but not at start, no debug button
-                    }
-                }
-            }
-        }
-    }
-    // Check if this item is already part of an existing group or can extend one
-    for (range, is_open, user_events_map) in small_state_groups.iter_mut() {
-        if range.start == item_id {
-            // Add user event to the HashMap using item_id as key with userId and Vec<UserEvent>
-            // println!("range.start");
-            // println!("range {:?} username: {}", range, username);
-            append_user_event(user_event, user_events_map);
-            return (true, range.len() > 2, *is_open, Range::default()); // Start of group, show debug button
-        }
-        if range.contains(&item_id) {
-            // Add user event to the HashMap using item_id as key with userId and Vec<UserEvent>
-            //println!("range {:?} username: {}", range, username);
-            append_user_event(user_event, user_events_map);
-            return (*is_open || range.len() <= 2, false, *is_open,  Range::default()); // Item is in group but not at start, no debug button
-        }
-        
-        // Since we're iterating backwards (from highest to lowest item_id),
-        if range.start == item_id + 1 {
-            // Extend this group backwards to include current item
-            *range = item_id..range.end;
-            append_user_event(user_event, user_events_map);
-            return (*is_open || range.len() <= 2, false, false,  range.clone()); // Extended group, no debug button for this item
-        }
-    }
-    if next_item_is_small_state {
-        let mut user_events_map = HashMap::new();
-        append_user_event(user_event, &mut user_events_map);
-        // Plus 2 to include the next item into the group.
-        small_state_groups.push((item_id..(item_id + 2), false, user_events_map));
-        return (false, false, false, item_id..(item_id + 2));
-    }
-    (false, false, false,  Range::default()) // Return collapsed state, no debug button
-}
-
-
-
 /// A trait for abstracting over the different types of timeline events
 /// that can be displayed in a `SmallStateEvent` widget.
 trait SmallStateEventContent {
@@ -4259,9 +4062,10 @@ fn populate_small_state_event(
     next_event: Option<&Arc<TimelineItem>>,
     event_content: &impl SmallStateEventContent,
     item_drawn_status: ItemDrawnStatus,
+    room_creation: &mut Option<(OwnedUserId, OwnedEventId)>,
     small_state_groups: &mut Vec<(std::ops::Range<usize>, bool, HashMap<usize, (String, Vec<UserEvent>)>)>,
     content_drawn_since_last_update: &mut RangeSet<usize>,
-    creation_event: &mut (HashMap<std::string::String, std::ops::Range<usize>>, std::option::Option<UserEvent>, bool),
+    creation_collapsible_list: &mut CreationCollapsibleList,
 ) -> (WidgetRef, ItemDrawnStatus) {
     let mut new_drawn_status = item_drawn_status;
     let (item, existed) = list.item_with_existed(cx, item_id, id!(SmallStateEvent));
@@ -4304,17 +4108,15 @@ fn populate_small_state_event(
     // - show_collapsible_button: true if this item is the first in a collapsible group
     // - expanded: current expansion state of the group (for button text)
     let (opened, show_collapsible_button, expanded, to_redraw) = update_small_state_groups_for_item(
-        cx,
-        room_id,
         item_id,
         username.clone(),
         event_tl_item,
         prev_event,
         next_event,
+        room_creation,
         small_state_groups,
-        creation_event
+        creation_collapsible_list
     );
-    println!("populate_small_state_event: item_id: {}, opened: {}, show_collapsible_button: {} creation_event: {:?}", item_id, opened, show_collapsible_button, creation_event);
     // Only show the collapsible button on the first item of each group
     item.button(ids!(collapsible_button))
         .set_visible(cx, show_collapsible_button);
@@ -4338,20 +4140,14 @@ fn populate_small_state_event(
             let button_text = if expanded { "▲" } else { "▼" };
             item.button(ids!(collapsible_button))
                 .set_text(cx, button_text);
-            if let Some(creation_user_event) = &creation_event.1 {
-                for (user_id, creation_range) in creation_event.0.iter() {
-                    if event_tl_item.sender().to_string() == *user_id {
-                        if creation_range.start == item_id {
-                            let summary_text = format!("{} created and configured the room", creation_user_event.display_name);
-                            item.view(ids!(small_state_header)).set_visible(cx, true);
-                            item.label(ids!(small_state_header.summary_text)).set_text(cx, &summary_text);
-                            item.view(ids!(body)).set_visible(cx, false);
-                            return (item, new_drawn_status);
-                        }
-                    }
-                }
+            if room_creation.is_some() && creation_collapsible_list.range.start == item_id {
+                let summary_text = format!("{} created and configured the room: {:?}", creation_collapsible_list.username, item_id);
+                item.view(ids!(small_state_header)).set_visible(cx, true);
+                item.label(ids!(small_state_header.summary_text)).set_text(cx, &summary_text);
+                item.view(ids!(body)).set_visible(cx, false);
+                return (item, new_drawn_status);
             }
-            println!("small_state_groups item_id: {} small_state_groups: {:?} ", item_id, 2);
+           
             for (range, _, user_events_map) in small_state_groups {
                 if range.start == item_id {
                     // Pass HashMap directly to generate_summary
@@ -4370,7 +4166,6 @@ fn populate_small_state_event(
         item.view(ids!(small_state_header)).set_visible(cx, false);
         item.view(ids!(body)).set_visible(cx, false);
     }
-    //println!("to_redraw: {:?} item_id: {} content_drawn_since_last_update:{:?}", to_redraw, item_id ,content_drawn_since_last_update);
     if !to_redraw.is_empty() && to_redraw.end > to_redraw.start {
         content_drawn_since_last_update.remove(to_redraw.clone());
         if to_redraw.contains(&item_id) {
diff --git a/src/shared/mod.rs b/src/shared/mod.rs
index 9fbb0a52..044d49ee 100644
--- a/src/shared/mod.rs
+++ b/src/shared/mod.rs
@@ -8,7 +8,6 @@ pub mod helpers;
 pub mod html_or_plaintext;
 pub mod icon_button;
 pub mod jump_to_bottom_button;
-pub mod membership_transitions;
 pub mod mentionable_text_input;
 pub mod popup_list;
 pub mod room_filter_input_bar;

From 5eafd5b0120a327f68a5bb53a0044c2c71a9231a Mon Sep 17 00:00:00 2001
From: alanpoon <brightshadowx@gmail.com>
Date: Fri, 5 Dec 2025 19:54:38 +0800
Subject: [PATCH 15/26] Added small state group manager

---
 src/home/membership_transitions.rs    |  512 -----------
 src/home/mod.rs                       |    3 +-
 src/home/room_screen.rs               |  267 ++----
 src/home/small_state_group_manager.rs | 1156 +++++++++++++++++++++++++
 4 files changed, 1218 insertions(+), 720 deletions(-)
 delete mode 100644 src/home/membership_transitions.rs
 create mode 100644 src/home/small_state_group_manager.rs

diff --git a/src/home/membership_transitions.rs b/src/home/membership_transitions.rs
deleted file mode 100644
index 1f226d0c..00000000
--- a/src/home/membership_transitions.rs
+++ /dev/null
@@ -1,512 +0,0 @@
-use std::{collections::HashMap, ops::Range, sync::Arc};
-use matrix_sdk::ruma::{OwnedEventId, OwnedUserId};
-use matrix_sdk_ui::timeline::{AnyOtherFullStateEventContent, EventTimelineItem, MembershipChange, MsgLikeContent, MsgLikeKind, TimelineItem, TimelineItemContent, TimelineItemKind};
-use ruma::events::FullStateEventContent;
-
-#[derive(Default, Debug, Clone, Copy, PartialEq, Eq, Hash)]
-pub enum TransitionType {
-    CreateRoom,
-    ConfigureRoom,
-    Joined,
-    Left,
-    JoinedAndLeft,
-    LeftAndJoined,
-    InviteReject,
-    InviteWithdrawal,
-    Invited,
-    Banned,
-    Unbanned,
-    Kicked,
-    ChangedName,
-    ChangedAvatar,
-    #[default]
-    NoChange,
-    ServerAcl,
-    ChangedPins,
-    MessageRemoved,
-    UnableToDecrypt,
-    HiddenEvent,
-}
-
-#[derive(Debug, Clone, PartialEq)]
-pub struct UserEvent {    
-    pub transition: TransitionType,
-    pub index: usize,
-    pub is_redacted: bool,
-    pub should_show: bool,
-    pub sender: String,
-    pub display_name: String,
-    pub state_key: Option<String>,
-    pub membership: Option<String>,
-}
-
-#[derive(Default, Debug)]
-pub struct CreationCollapsibleList {
-    pub range: std::ops::Range<usize>,
-    pub opened: bool,
-    pub username: String,
-}
-
-/// Canonicalize neighbouring transitions, e.g. [Joined, Left] -> [JoinedAndLeft]
-fn canonicalize_transitions(transitions: &[TransitionType]) -> Vec<TransitionType> {
-    let mut res = Vec::new();
-    let mut i = 0;
-    while i < transitions.len() {
-        let t = transitions[i];
-        if i + 1 < transitions.len() {
-            let t2 = transitions[i + 1];
-            match (t, t2) {
-                (TransitionType::Joined, TransitionType::Left) => {
-                    res.push(TransitionType::JoinedAndLeft);
-                    i += 2;
-                    continue;
-                }
-                (TransitionType::Left, TransitionType::Joined) => {
-                    res.push(TransitionType::LeftAndJoined);
-                    i += 2;
-                    continue;
-                }
-                _ => {}
-            }
-        }
-        res.push(t);
-        i += 1;
-    }
-    res
-}
-
-/// Combine repeated transitions (e.g. [JoinedAndLeft, JoinedAndLeft] -> 2×JoinedAndLeft)
-fn coalesce_repeated_transitions(transitions: &[TransitionType]) -> Vec<(TransitionType, usize)> {
-    let mut res = Vec::new();
-    for &t in transitions {
-        if let Some((last, count)) = res.last_mut() {
-            if *last == t {
-                *count += 1;
-                continue;
-            }
-        }
-        res.push((t, 1));
-    }
-    res
-}
-
-/// Determine the textual description for a transition
-fn describe_transition(t: TransitionType, user_count: usize, repeats: usize) -> String {
-    let plural = user_count > 1;
-    match t {
-        TransitionType::CreateRoom => "created and configured the room".to_string(),
-        TransitionType::ConfigureRoom => "".to_string(),
-        TransitionType::Joined => {
-            if repeats > 1 {
-                if plural { format!("joined (×{})", repeats) } else { format!("joined the room (×{})", repeats) }
-            } else {
-                if plural { "joined".to_string() } else { "joined the room".to_string() }
-            }
-        }
-        TransitionType::Left => {
-            if repeats > 1 {
-                if plural { format!("left (×{})", repeats) } else { format!("left the room (×{})", repeats) }
-            } else {
-                if plural { "left".to_string() } else { "left the room".to_string() }
-            }
-        }
-        TransitionType::JoinedAndLeft => if repeats > 1 { format!("joined and left (×{})", repeats) } else { "joined and left".to_string() },
-        TransitionType::LeftAndJoined => if repeats > 1 { format!("left and rejoined (×{})", repeats) } else { "left and rejoined".to_string() },
-        TransitionType::ChangedName => if repeats > 1 { format!("changed their name (×{})", repeats) } else { "changed their name".to_string() },
-        TransitionType::ChangedAvatar => if repeats > 1 { format!("changed their profile picture (×{})", repeats) } else { "changed their profile picture".to_string() },
-        TransitionType::Invited => if repeats > 1 { format!("was invited (×{})", repeats) } else { "was invited".to_string() },
-        TransitionType::Banned => if repeats > 1 { format!("was banned (×{})", repeats) } else { "was banned".to_string() },
-        TransitionType::Unbanned => if repeats > 1 { format!("was unbanned (×{})", repeats) } else { "was unbanned".to_string() },
-        TransitionType::InviteReject => if repeats > 1 { format!("rejected invite (×{})", repeats) } else { "rejected invite".to_string() },
-        TransitionType::InviteWithdrawal => if repeats > 1 { format!("invite withdrawn (×{})", repeats) } else { "invite withdrawn".to_string() },
-        TransitionType::Kicked => if repeats > 1 { format!("was kicked (×{})", repeats) } else { "was kicked".to_string() },
-        TransitionType::ServerAcl => if repeats > 1 { format!("updated server ACLs (×{})", repeats) } else { "updated server ACLs".to_string() },
-        TransitionType::ChangedPins => if repeats > 1 { format!("changed pinned messages (×{})", repeats) } else { "changed pinned messages".to_string() },
-        TransitionType::MessageRemoved => if repeats > 1 { format!("removed a message (×{})", repeats) } else { "removed a message".to_string() },
-        TransitionType::HiddenEvent => if repeats > 1 { format!("did a hidden event (×{})", repeats) } else { "did a hidden event".to_string() },
-        TransitionType::NoChange => if repeats > 1 { format!("made no changes (×{})", repeats) } else { "made no changes".to_string() },
-        TransitionType::UnableToDecrypt => if repeats > 1 { format!("decryption failed (×{})", repeats) } else { "decryption failed".to_string() },
-    }
-}
-
-/// Produce an English-readable name list, with "and N others"
-fn format_name_list(names: &[String], max_names: usize) -> String {
-    match names.len() {
-        0 => "".into(),
-        1 => names[0].clone(),
-        2 => format!("{} and {}", names[0], names[1]),
-        n if n <= max_names => names.join(", "),
-        n => format!("{}, and {} others", names[..max_names].join(", "), n - max_names),
-    }
-}
-
-pub fn convert_to_timeline_event(event_item: EventTimelineItem, user_name: String, index: usize) -> UserEvent {
-    use matrix_sdk_ui::timeline::{TimelineItemContent, MembershipChange};
-    let (state_key, membership) = match event_item.content() {
-        TimelineItemContent::MembershipChange(change) => {
-            let state_key = Some(change.user_id().to_string());
-            let membership = match change.change() {
-                Some(MembershipChange::Joined) => Some("join"),
-                Some(MembershipChange::Left) => Some("leave"),
-                Some(MembershipChange::Invited) => Some("invite"),
-                Some(MembershipChange::Banned) => Some("ban"),
-                _ => None,
-            }.map(|s| s.to_string());
-            (state_key, membership)
-        }
-        TimelineItemContent::OtherState(other) => {
-            (Some(other.state_key().to_string()), None)
-        }
-        _ => (None, None),
-    };
-    let (_is_small_state, transistion_type, _display_name_from_state) = is_small_state_event(&event_item);
-    UserEvent {
-        index,
-        display_name: user_name,
-        transition: transistion_type,
-        is_redacted: matches!(event_item.content(), 
-            TimelineItemContent::MsgLike(msg) if matches!(msg.kind, matrix_sdk_ui::timeline::MsgLikeKind::Redacted)
-        ),
-        should_show: true, // For now, assume all events should be shown
-        sender: event_item.sender().to_string(),
-        state_key,
-        membership,
-    }
-}
-
-/// Convert Matrix membership change → transition type
-pub fn get_transition_from_membership_change(change: &MembershipChange) -> TransitionType {
-    use matrix_sdk_ui::timeline::MembershipChange;
-    match change {
-        MembershipChange::Joined => TransitionType::Joined,
-        MembershipChange::Left => TransitionType::Left,
-        MembershipChange::Banned => TransitionType::Banned,
-        MembershipChange::Unbanned => TransitionType::Unbanned,
-        MembershipChange::Kicked => TransitionType::Kicked,
-        MembershipChange::Invited => TransitionType::Invited,
-        MembershipChange::KickedAndBanned => TransitionType::Banned,
-        MembershipChange::InvitationAccepted => TransitionType::Joined,
-        MembershipChange::InvitationRejected => TransitionType::InviteReject,
-        MembershipChange::InvitationRevoked => TransitionType::InviteWithdrawal,
-        MembershipChange::Knocked => TransitionType::HiddenEvent,
-        MembershipChange::KnockAccepted => TransitionType::Joined,
-        MembershipChange::KnockRetracted => TransitionType::HiddenEvent,
-        MembershipChange::None => TransitionType::NoChange,
-        MembershipChange::Error => TransitionType::NoChange,
-        MembershipChange::NotImplemented => TransitionType::NoChange,
-        MembershipChange::KnockDenied => TransitionType::HiddenEvent,
-    }
-}
-
-/// Convert other room state events → transition type
-pub fn get_transition_from_other_events(content: &AnyOtherFullStateEventContent, _state_key: &str) -> TransitionType {
-    match content {
-        AnyOtherFullStateEventContent::RoomServerAcl(_) => TransitionType::ServerAcl,
-        AnyOtherFullStateEventContent::RoomPinnedEvents(_) => TransitionType::ConfigureRoom,
-        AnyOtherFullStateEventContent::RoomName(_) => TransitionType::ConfigureRoom,
-        AnyOtherFullStateEventContent::RoomTopic(_) => TransitionType::ConfigureRoom,
-        AnyOtherFullStateEventContent::RoomAvatar(_) => TransitionType::ConfigureRoom,
-        AnyOtherFullStateEventContent::RoomCanonicalAlias(_) => TransitionType::ConfigureRoom,
-        AnyOtherFullStateEventContent::RoomCreate(_) => TransitionType::CreateRoom,
-        AnyOtherFullStateEventContent::RoomEncryption(_) => TransitionType::ConfigureRoom,
-        AnyOtherFullStateEventContent::RoomGuestAccess(_) => TransitionType::ConfigureRoom,
-        AnyOtherFullStateEventContent::RoomHistoryVisibility(_) => TransitionType::ConfigureRoom,
-        AnyOtherFullStateEventContent::RoomJoinRules(_) => TransitionType::ConfigureRoom,
-        AnyOtherFullStateEventContent::RoomPowerLevels(_) => TransitionType::ConfigureRoom,
-        AnyOtherFullStateEventContent::RoomThirdPartyInvite(_) => TransitionType::ConfigureRoom,
-        AnyOtherFullStateEventContent::RoomTombstone(_) => TransitionType::ConfigureRoom,
-        AnyOtherFullStateEventContent::RoomAliases(_) => TransitionType::ConfigureRoom,
-        AnyOtherFullStateEventContent::SpaceChild(_) => TransitionType::ConfigureRoom,
-        AnyOtherFullStateEventContent::SpaceParent(_) => TransitionType::ConfigureRoom,
-        AnyOtherFullStateEventContent::PolicyRuleRoom(_) => TransitionType::ConfigureRoom,
-        AnyOtherFullStateEventContent::PolicyRuleServer(_) => TransitionType::ConfigureRoom,
-        AnyOtherFullStateEventContent::PolicyRuleUser(_) => TransitionType::ConfigureRoom,
-        AnyOtherFullStateEventContent::_Custom { .. } => TransitionType::HiddenEvent,
-    }
-}
-
-/// Appends a new user event to the given list of user events.
-///
-/// If the given transition is `HiddenEvent`, this function does nothing.
-///
-/// Otherwise, it appends a new `UserEvent` to the list of user events for the given user ID.
-/// If the user ID is not found in the list, a new entry is created.
-///
-/// If the user ID is found, but there is no existing `UserEvent` with the same index,
-/// a new `UserEvent` is appended to the list of user events for that user ID.
-///
-/// The function prints debug messages to help with debugging.
-pub fn append_user_event(user_event: UserEvent, user_events: &mut Vec<(String, Vec<UserEvent>)>) {
-    if let TransitionType::HiddenEvent = user_event.transition {
-        return;
-    }
-    if let Some((_, events)) = user_events.iter_mut().find(|(id, _)| id == &user_event.sender) {
-        if events.iter().filter(|inner_user_event| inner_user_event.index == user_event.index).count() == 0 {
-            events.push(user_event);
-        }
-    } else {
-        user_events.push((user_event.sender.clone(), vec![user_event]));
-    }
-}
-
-/// Appends a new user event to the given HashMap of user events.
-/// This version handles the HashMap structure used in room_screen.rs
-fn append_user_event_to_map(user_event: UserEvent, user_events: &mut HashMap<usize, (String, Vec<UserEvent>)>) {
-    let item_id = user_event.index;
-    let mut old_group_id = None;
-    let user_state_key = user_event.state_key.clone().unwrap_or_default();
-    let user_state_key = if user_state_key.is_empty() {
-        user_event.sender.clone()
-    } else {
-        user_state_key
-    };
-    for (group_id, (user_id, user_events_vec)) in user_events.iter_mut() {
-        if user_state_key == *user_id {
-            if user_events_vec.iter().filter(|user_event| user_event.index == item_id).count() == 0 {
-                user_events_vec.push(user_event.clone());
-            }
-            if &item_id >= group_id {
-                return;
-            }
-            old_group_id = Some(group_id.clone());
-        }
-    }
-    
-    
-    if let Some(old_group_id) = old_group_id {
-        if let Some(data) = user_events.remove(&old_group_id) {
-            user_events.insert(item_id, data);
-            return;
-        }
-    }
-    user_events.insert(item_id, (user_state_key.clone(), vec![user_event]));
-}
-
-/// Checks if a event timeline item is a small state event.
-/// Returns true if the item is a small state event that can be grouped.
-/// return Display name
-pub fn is_small_state_event(
-    event_tl_item: &EventTimelineItem,
-) -> (bool, TransitionType, Option<String>) {
-    match event_tl_item.content() {
-        TimelineItemContent::MembershipChange(change) => (true, change.change().map(
-            |f| get_transition_from_membership_change(&f)
-            ).unwrap_or_default(), change.display_name()
-        ),
-        TimelineItemContent::ProfileChange(change) => {
-            let transition_type = if let Some(_) = change.avatar_url_change() {
-                TransitionType::ChangedAvatar
-            } else if let Some(_) = change.displayname_change() {
-                TransitionType::ChangedName
-            } else {
-                TransitionType::NoChange
-            };
-            (true, transition_type, None)
-        }
-        TimelineItemContent::OtherState(other_state) => {
-            (true, get_transition_from_other_events(other_state.content(), other_state.state_key()), None)
-        },
-        TimelineItemContent::MsgLike(MsgLikeContent {
-            kind: MsgLikeKind::Poll(_),
-            ..
-        }) => (true, TransitionType::NoChange, None),
-        TimelineItemContent::MsgLike(MsgLikeContent {
-            kind: MsgLikeKind::Redacted,
-            ..
-        }) => (true, TransitionType::MessageRemoved, None),
-        TimelineItemContent::MsgLike(MsgLikeContent {
-            kind: MsgLikeKind::UnableToDecrypt(_),
-            ..
-        }) => (true, TransitionType::UnableToDecrypt, None),
-        _ => {
-            (false, TransitionType::NoChange, None)
-        }
-    }
-}
-
-/// Summarize all user transitions into a single string
-pub fn generate_summary(
-    user_events: &HashMap<usize, (String, Vec<UserEvent>)>,
-    summary_length: usize,
-) -> String {
-    // Aggregate by transition sequence
-    let mut aggregates: Vec<(Vec<TransitionType>, Vec<String>)> = Vec::new();
-    // Sort keys in ascending order for consistent iteration
-    let mut sorted_keys: Vec<&usize> = user_events.keys().collect();
-    sorted_keys.sort();
-    
-    for &index in sorted_keys {
-        let (user_id, events) = &user_events[&index];
-        let mut events = events.clone();
-        events.sort_by_key(|e|e.index);
-        let mut transitions: Vec<_> = events.iter().map(|e| e.transition).collect();
-
-        // Filter out Joined transitions for room creators
-        if transitions.contains(&TransitionType::CreateRoom) {
-            transitions.retain(|&t| t != TransitionType::Joined);
-        }
-        let canonical = canonicalize_transitions(&transitions);
-        let name = events.first().map(|e| e.display_name.clone()).unwrap_or(user_id.clone());
-        if let Some((_, names)) = aggregates.iter_mut().find(|(seq, _)| seq == &canonical) {
-            names.push(name);
-        } else {
-            aggregates.push((canonical, vec![name]));
-        }
-    }
-    // Build text
-    let mut summary_parts = Vec::new();
-    for (canonical, names) in aggregates {
-        let coalesced = coalesce_repeated_transitions(&canonical);
-
-        let descs: Vec<String> = coalesced
-            .into_iter()
-            .map(|(t, repeats)| describe_transition(t, names.len(), repeats))
-            .collect();
-        let name_list = format_name_list(&names, summary_length);
-        let transition_text = descs.join(", ");
-        summary_parts.push(format!("{} {}", name_list, transition_text));
-    }
-
-    summary_parts.join(", ")
-}
-
-/// Dynamically updates small state groups as timeline items are processed.
-/// This function is called during populate_small_state_event to build groups on-demand.
-/// Since iteration starts from the biggest item_id and goes backwards, we handle reverse grouping.
-/// Returns a tuple whether to display the message, and whether to display the collapsible button and whether collapsible list is expanded and range to redraw
-pub fn update_small_state_groups_for_item(
-    item_id: usize,
-    username: String,
-    current_item: &EventTimelineItem,
-    previous_item: Option<&Arc<TimelineItem>>,
-    next_item: Option<&Arc<TimelineItem>>,
-    room_creation: &mut Option<(OwnedUserId, OwnedEventId)>,
-    small_state_groups: &mut Vec<(std::ops::Range<usize>, bool, HashMap<usize, (String, Vec<UserEvent>)>)>,
-    creation_collapsible_list: &mut CreationCollapsibleList,
-) -> (bool, bool, bool, Range<usize>) { //opened, show_collapsible_button, expanded, redraw_range
-    let (current_item_is_small_state, _transition, display_name) = is_small_state_event(current_item);
-    if !current_item_is_small_state {
-        return (true, false, false, Range::default()); // Not a small state event, draw as individual item, no debug button
-    }
-
-    // check if the next item (item_id + 1) is a small state event to continue grouping
-    let (next_item_is_small_state, _, _) = next_item
-        .and_then(|timeline_item| match timeline_item.kind() {
-            TimelineItemKind::Event(event_tl_item) => Some(event_tl_item),
-            _ => None,
-        })
-        .map(is_small_state_event)
-        .unwrap_or((false, TransitionType::NoChange, None));
-    let (previous_item_is_small_state, _, _) = previous_item
-        .and_then(|timeline_item| match timeline_item.kind() {
-            TimelineItemKind::Event(event_tl_item) => Some(event_tl_item),
-            _ => None,
-        })
-        .map(is_small_state_event)
-        .unwrap_or((false, TransitionType::NoChange, None));
-    if !previous_item_is_small_state && !next_item_is_small_state {
-        return (true, false, false,  Range::default()); // Isolated small state event, no debug button
-    }
-    if room_creation.is_none() {
-        if let TimelineItemContent::OtherState(other_state) = current_item.content() {
-            if let AnyOtherFullStateEventContent::RoomCreate(FullStateEventContent::Original { .. }) = other_state.content() {
-                let creator_id = current_item.sender().to_owned();
-                if let Some(event_id) = current_item.event_id() {
-                    *room_creation = Some((creator_id, event_id.to_owned()));
-                    creation_collapsible_list.range.start = item_id;
-                    if creation_collapsible_list.range.end <= item_id {
-                        creation_collapsible_list.range.end = item_id + 1;
-                    }
-                    return (true, true, creation_collapsible_list.opened, item_id..item_id + 1);
-                }                
-            }
-        }
-    }
-    creation_collapsible_list.username = username.clone();
-    let user_event = convert_to_timeline_event(current_item.clone(), display_name.unwrap_or(username), item_id);
-    if item_id == creation_collapsible_list.range.start && creation_collapsible_list.range.len() > 0 {
-        return (true, true, creation_collapsible_list.opened, creation_collapsible_list.range.clone());
-    }
-    if matches!(user_event.transition, 
-        TransitionType::ConfigureRoom | TransitionType::Joined
-    ) {
-        if creation_collapsible_list.range.len()== 0 {
-            return (true, false, true, Range::default());
-        }
-        if creation_collapsible_list.range.end == item_id {
-            creation_collapsible_list.range.end = item_id + 1;
-            if matches!(user_event.transition, 
-                TransitionType::ConfigureRoom | TransitionType::Joined
-            ) {
-                return (creation_collapsible_list.opened, false, creation_collapsible_list.opened, item_id..item_id + 2);
-            } else {
-                return (creation_collapsible_list.opened, false, creation_collapsible_list.opened, item_id..item_id + 1);
-            }
-        }
-        if creation_collapsible_list.range.contains(&item_id) {
-            return (creation_collapsible_list.opened, false, creation_collapsible_list.opened, Range::default());
-        }
-    }
-    // Check if this item is already part of an existing group or can extend one
-    let group_keys: Vec<Range<usize>> = small_state_groups.iter().map(|f| f.0.clone()).collect();
-    'outer: for (range, is_open, user_events_map) in small_state_groups.iter_mut() {
-        if range.start == item_id {
-            // Add user event to the HashMap using item_id as key with userId and Vec<UserEvent>
-            append_user_event_to_map(user_event, user_events_map);
-            return (true, range.len() > 2, *is_open, Range::default()); // Start of group, show debug button
-        }
-        if range.contains(&item_id) {
-            // Add user event to the HashMap using item_id as key with userId and Vec<UserEvent>
-            append_user_event_to_map(user_event, user_events_map);
-            return (*is_open || range.len() <= 2, false, *is_open,  Range::default()); // Item is in group but not at start, no debug button
-        }
-        
-        // Since we're iterating backwards (from highest to lowest item_id),
-        if range.start == item_id + 1 {
-            for r in group_keys.iter() {
-                if r.contains(&item_id) {
-                    continue 'outer;
-                }
-            }
-            // Extend this group backwards to include current item
-            *range = item_id..range.end;
-            append_user_event_to_map(user_event, user_events_map);
-            return (*is_open || range.len() <= 2, false, false,  range.clone()); // Extended group, no debug button for this item
-        }
-    }
-
-    if next_item_is_small_state {
-        let mut user_events_map = HashMap::new();
-        append_user_event_to_map(user_event, &mut user_events_map);
-        // Plus 2 to include the next item into the group.        
-        small_state_groups.push((item_id..(item_id + 2), false, user_events_map));
-        return (false, false, false, item_id..(item_id + 2));
-    }
-    (false, false, false,  Range::default()) // Return collapsed state, no debug button
-}
-
-#[cfg(test)]
-mod tests {
-    use super::*;
-
-    //#[test]
-    // fn test_generate_summary() {
-    //     let mut user_events: HashMap<usize, (String, Vec<UserEvent>)> = HashMap::new();
-        
-    //     user_events.insert(0, ("alice".into(), vec![
-    //         UserEvent { display_name: "Alice".into(), transition: TransitionType::Joined, index: 0, state_key: None },
-    //         UserEvent { display_name: "Alice".into(), transition: TransitionType::Left, index: 1, state_key: None },
-    //     ]));
-        
-    //     user_events.insert(2, ("bob".into(), vec![
-    //         UserEvent { display_name: "Bob".into(), transition: TransitionType::ChangedAvatar, index: 2, state_key: None },
-    //     ]));
-        
-    //     user_events.insert(3, ("charlie".into(), vec![
-    //         UserEvent { display_name: "Charlie".into(), transition: TransitionType::Joined, index: 3, state_key: None },
-    //     ]));
-
-    //     let summary = generate_summary(&user_events, 2);
-    //     assert_eq!(summary, "Alice joined and left, Bob changed their profile picture, Charlie joined the room");
-    // }
-}
\ No newline at end of file
diff --git a/src/home/mod.rs b/src/home/mod.rs
index db594b5c..f0b163e3 100644
--- a/src/home/mod.rs
+++ b/src/home/mod.rs
@@ -10,7 +10,7 @@ pub mod loading_pane;
 pub mod location_preview;
 pub mod main_desktop_ui;
 pub mod main_mobile_ui;
-pub mod membership_transitions;
+pub mod small_state_group_manager;
 pub mod room_screen;
 pub mod room_read_receipt;
 pub mod rooms_list;
@@ -49,4 +49,5 @@ pub fn live_design(cx: &mut Cx) {
     light_themed_dock::live_design(cx);
     event_reaction_list::live_design(cx);
     link_preview::live_design(cx);
+    small_state_group_manager::live_design(cx);
 }
diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs
index 66c0020f..6980d529 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -1,7 +1,7 @@
 //! A room screen is the UI view that displays a single Room's timeline of events/messages
 //! along with a message input bar at the bottom.
 
-use std::{borrow::Cow, cell::RefCell, collections::{BTreeMap, HashMap}, ops::{DerefMut, Range}, sync::Arc};
+use std::{borrow::Cow, cell::RefCell, collections::BTreeMap, ops::{DerefMut, Range}, sync::Arc};
 
 use bytesize::ByteSize;
 use imbl::Vector;
@@ -18,7 +18,7 @@ use matrix_sdk::{
             },
             sticker::{StickerEventContent, StickerMediaSource},
         },
-        matrix_uri::MatrixId, uint, EventId, MatrixToUri, MatrixUri, OwnedEventId, OwnedMxcUri, OwnedRoomId, OwnedUserId, UserId
+        matrix_uri::MatrixId, uint, EventId, MatrixToUri, MatrixUri, OwnedEventId, OwnedMxcUri, OwnedRoomId, UserId
     }, OwnedServerName
 };
 use matrix_sdk_ui::timeline::{
@@ -26,7 +26,7 @@ use matrix_sdk_ui::timeline::{
 };
 
 use crate::{
-    app::AppStateAction, avatar_cache, event_preview::{plaintext_body_of_timeline_item, text_preview_of_encrypted_message, text_preview_of_member_profile_change, text_preview_of_other_message_like, text_preview_of_other_state, text_preview_of_redacted_message, text_preview_of_room_membership_change, text_preview_of_timeline_item}, home::{edited_indicator::EditedIndicatorWidgetRefExt, link_preview::{LinkPreviewCache, LinkPreviewRef, LinkPreviewWidgetRefExt}, loading_pane::{LoadingPaneState, LoadingPaneWidgetExt}, membership_transitions::{CreationCollapsibleList, UserEvent, generate_summary, update_small_state_groups_for_item}, rooms_list::RoomsListRef, tombstone_footer::SuccessorRoomDetails}, media_cache::{MediaCache, MediaCacheEntry}, profile::{
+    app::AppStateAction, avatar_cache, event_preview::{plaintext_body_of_timeline_item, text_preview_of_encrypted_message, text_preview_of_member_profile_change, text_preview_of_other_message_like, text_preview_of_other_state, text_preview_of_redacted_message, text_preview_of_room_membership_change, text_preview_of_timeline_item}, home::{edited_indicator::EditedIndicatorWidgetRefExt, link_preview::{LinkPreviewCache, LinkPreviewRef, LinkPreviewWidgetRefExt}, loading_pane::{LoadingPaneState, LoadingPaneWidgetExt}, small_state_group_manager::{handle_backward_pagination_index_shift, handle_collapsible_button_click, render_small_state_event_group_logic, SmallStateGroupManager, update_small_state_groups_for_item}, rooms_list::RoomsListRef, tombstone_footer::SuccessorRoomDetails}, media_cache::{MediaCache, MediaCacheEntry}, profile::{
         user_profile::{AvatarState, ShowUserProfileAction, UserProfile, UserProfileAndRoomId, UserProfilePaneInfo, UserProfileSlidingPaneRef, UserProfileSlidingPaneWidgetExt},
         user_profile_cache,
     },
@@ -80,6 +80,7 @@ live_design! {
     use crate::rooms_list::*;
     use crate::shared::restore_status_view::*;
     use crate::home::link_preview::LinkPreview;
+    use crate::home::small_state_group_manager::SmallStateHeader;
     use link::tsp_link::TspSignIndicator;
 
     COLOR_BG = #xfff8ee
@@ -329,44 +330,7 @@ live_design! {
         flow: Down,
         spacing: 0.0
         cursor: Default
-        small_state_header = <View> {
-            width: Fill,
-            height: Fit
-            visible: false
-            padding: { left: 7.0, top: 2.0, bottom: 2.0 }
-            summary_text = <Label> {
-                width: Fill, height: Fit
-                flow: RightWrap,
-                padding: 0,
-                draw_text: {
-                    wrap: Word,
-                    text_style: <THEME_FONT_REGULAR>{
-                        font_size: (SMALL_STATE_FONT_SIZE),
-                    },
-                    color: (SMALL_STATE_TEXT_COLOR)
-                }
-            }
-            // Collapsible button for small state event groups
-            // Shows on the first item of each group to toggle expansion
-            // Text is dynamically updated: ▼ (collapsed) or ▲ (expanded)
-            collapsible_button = <Button> {
-                width: Fit,
-                height: Fit,
-                margin: { left: 5, right: 5 }
-                padding: { left: 4, right: 4, top: 2, bottom: 2 }
-                text: "▼"  // Default to collapsed state
-                draw_text: {
-                    text_style: <SMALL_STATE_TEXT_STYLE> {},
-                    color: #666
-                }
-                draw_bg: {
-                    fn pixel(self) -> vec4 {
-                        let sdf = Sdf2d::viewport(self.pos * self.rect_size);
-                        return sdf.result
-                    }
-                }
-            }
-        }
+        small_state_header = <SmallStateHeader> { }
         body = <View> {
             width: Fill,
             height: Fit
@@ -702,52 +666,16 @@ impl Widget for RoomScreen {
                 // Handle collapsible button click in SmallStateEvent
                 if wr.button(ids!(collapsible_button)).clicked(actions) {
                     if let Some(tl_state) = &mut self.tl_state {
-                        let mut is_creation_group = false;                        
-                        if tl_state.creation_collapsible_list.range.start == item_id {
-                            let open = &mut tl_state.creation_collapsible_list.opened;
-                            // Toggle the group's open/closed state
-                            *open = !*open;
-                            let range = tl_state.creation_collapsible_list.range.clone();
-                            let omit_first_range = (range.start + 1)..range.end + 1;
-                            // Force redraw of all items in this group by clearing their cached drawn status
-                            tl_state.content_drawn_since_last_update.remove(omit_first_range.clone());
-                            tl_state.profile_drawn_since_last_update.remove(omit_first_range.clone());
-                            
-                            // Update button text to reflect new state:
-                            // ▲ (up arrow) = expanded/open - items are visible
-                            // ▼ (down arrow) = collapsed/closed - items are hidden
-                            let button_text = if *open { "▲" } else { "▼" };
-                            wr.button(ids!(collapsible_button)).set_text(cx, button_text);
-                            // If the last item is a group of small state events, scroll to the end when it is expanded.
-                            if range.end == tl_state.items.len() && *open {
-                                portal_list.smooth_scroll_to_end(cx, 90.0, None);
-                            }
-                            is_creation_group = true;
-                        }
-                            
-                        
-                        if !is_creation_group {
-                            for (range, open, _user_events_map) in &mut tl_state.small_state_groups {
-                                if range.start == item_id {
-                                    // Toggle the group's open/closed state
-                                    *open = !*open;
-                                    let omit_first_range = (range.start+1)..range.end;
-                                    // Force redraw of all items in this group by clearing their cached drawn status
-                                    tl_state.content_drawn_since_last_update.remove(omit_first_range.clone());
-                                    tl_state.profile_drawn_since_last_update.remove(omit_first_range.clone());
-
-                                    // Update button text to reflect new state:
-                                    // ▲ (up arrow) = expanded/open - items are visible
-                                    // ▼ (down arrow) = collapsed/closed - items are hidden
-                                    let button_text = if *open { "▲" } else { "▼" };
-                                    wr.button(ids!(collapsible_button)).set_text(cx, button_text);
-                                    // If the last item is a group of small state events, scroll to the end when it is expanded.
-                                    if range.end == tl_state.items.len() && *open {
-                                        portal_list.smooth_scroll_to_end(cx, 90.0, None);
-                                    }
-                                }
-                            }
-                        }
+                        handle_collapsible_button_click(
+                            cx,
+                            &wr,
+                            item_id,
+                            &portal_list,
+                            &mut tl_state.group_manager,
+                            &mut tl_state.content_drawn_since_last_update,
+                            &mut tl_state.profile_drawn_since_last_update,
+                            tl_state.items.len(),
+                        );
                     }
                 }
             }
@@ -1039,12 +967,11 @@ impl Widget for RoomScreen {
                         content_drawn: tl_state.content_drawn_since_last_update.contains(&tl_idx),
                         profile_drawn: tl_state.profile_drawn_since_last_update.contains(&tl_idx),
                     };
-                    let prev_event = tl_idx.checked_sub(1).and_then(|i| tl_items.get(i));
-                    let next_event = tl_idx.checked_add(1).and_then(|i| tl_items.get(i));
                     let (item, item_new_draw_status) = match timeline_item.kind() {
                         TimelineItemKind::Event(event_tl_item) => match event_tl_item.content() {
                             TimelineItemContent::MsgLike(msg_like_content) => match &msg_like_content.kind {
                                 MsgLikeKind::Message(_) | MsgLikeKind::Sticker(_) => {
+                                    let prev_event = tl_idx.checked_sub(1).and_then(|i| tl_items.get(i));
                                     populate_message_view(
                                         cx,
                                         list,
@@ -1068,14 +995,11 @@ impl Widget for RoomScreen {
                                     item_id,
                                     room_id,
                                     event_tl_item,
-                                    prev_event,
-                                    next_event,
+                                    tl_items,
                                     poll_state,
                                     item_drawn_status,
-                                    &mut tl_state.room_creator_event,
-                                    &mut tl_state.small_state_groups,
+                                    &mut tl_state.group_manager,
                                     &mut tl_state.content_drawn_since_last_update,
-                                    &mut tl_state.creation_collapsible_list
                                 ),
                                 MsgLikeKind::Redacted => populate_small_state_event(
                                     cx,
@@ -1083,14 +1007,11 @@ impl Widget for RoomScreen {
                                     item_id,
                                     room_id,
                                     event_tl_item,
-                                    prev_event,
-                                    next_event,
+                                    tl_items,
                                     &RedactedMessageEventMarker,
                                     item_drawn_status,
-                                    &mut tl_state.room_creator_event,
-                                    &mut tl_state.small_state_groups,
+                                    &mut tl_state.group_manager,
                                     &mut tl_state.content_drawn_since_last_update,
-                                    &mut tl_state.creation_collapsible_list
                                 ),
                                 MsgLikeKind::UnableToDecrypt(utd) => populate_small_state_event(
                                     cx,
@@ -1098,14 +1019,11 @@ impl Widget for RoomScreen {
                                     item_id,
                                     room_id,
                                     event_tl_item,
-                                    prev_event,
-                                    next_event,
+                                    tl_items,
                                     utd,
                                     item_drawn_status,
-                                    &mut tl_state.room_creator_event,
-                                    &mut tl_state.small_state_groups,
+                                    &mut tl_state.group_manager,
                                     &mut tl_state.content_drawn_since_last_update,
-                                    &mut tl_state.creation_collapsible_list
                                 ),
                                 MsgLikeKind::Other(other) => populate_small_state_event(
                                     cx,
@@ -1113,14 +1031,11 @@ impl Widget for RoomScreen {
                                     item_id,
                                     room_id,
                                     event_tl_item,
-                                    prev_event,
-                                    next_event,
+                                    tl_items,
                                     other,
                                     item_drawn_status,
-                                    &mut tl_state.room_creator_event,
-                                    &mut tl_state.small_state_groups,
+                                    &mut tl_state.group_manager,
                                     &mut tl_state.content_drawn_since_last_update,
-                                    &mut tl_state.creation_collapsible_list
                                 ),
                             },
                             TimelineItemContent::MembershipChange(membership_change) => populate_small_state_event(
@@ -1129,14 +1044,11 @@ impl Widget for RoomScreen {
                                 item_id,
                                 room_id,
                                 event_tl_item,
-                                prev_event,
-                                next_event,
+                                tl_items,
                                 membership_change,
                                 item_drawn_status,
-                                &mut tl_state.room_creator_event,
-                                &mut tl_state.small_state_groups,
+                                &mut tl_state.group_manager,
                                 &mut tl_state.content_drawn_since_last_update,
-                                &mut tl_state.creation_collapsible_list
                             ),
                             TimelineItemContent::ProfileChange(profile_change) => populate_small_state_event(
                                 cx,
@@ -1144,14 +1056,11 @@ impl Widget for RoomScreen {
                                 item_id,
                                 room_id,
                                 event_tl_item,
-                                prev_event,
-                                next_event,
+                                tl_items,
                                 profile_change,
                                 item_drawn_status,
-                                &mut tl_state.room_creator_event,
-                                &mut tl_state.small_state_groups,
+                                &mut tl_state.group_manager,
                                 &mut tl_state.content_drawn_since_last_update,
-                                &mut tl_state.creation_collapsible_list
                             ),
                             TimelineItemContent::OtherState(other) => populate_small_state_event(
                                 cx,
@@ -1159,14 +1068,11 @@ impl Widget for RoomScreen {
                                 item_id,
                                 room_id,
                                 event_tl_item,
-                                prev_event,
-                                next_event,
+                                tl_items,
                                 other,
                                 item_drawn_status,
-                                &mut tl_state.room_creator_event,
-                                &mut tl_state.small_state_groups,
+                                &mut tl_state.group_manager,
                                 &mut tl_state.content_drawn_since_last_update,
-                                &mut tl_state.creation_collapsible_list
                             ),
                             unhandled => {
                                 let item = list.item(cx, item_id, id!(SmallStateEvent));
@@ -1360,32 +1266,13 @@ impl RoomScreen {
                     }
                     // Handles item_id changes whenever there is a backward pagination.  
                     if !is_append {
-                        // Calculate the shift amount based on the difference between old and new lengths
                         let old_len = tl.items.len();
                         let new_len = new_items.len();
-                        let shift = new_len as i32 - old_len as i32;
-                        // Apply the shift to the small_state_groups.
-                        for (range, _, user_events_map) in &mut tl.small_state_groups {
-                            let new_start = (range.start as i32 + shift).max(0) as usize;
-                            let new_end = (range.end as i32 + shift).max(0) as usize;
-                            *range = new_start..new_end;
-                            
-                            let user_events_map_clone = user_events_map.clone();
-                            user_events_map.clear();
-                            for (group_id, (user_id, mut user_events)) in user_events_map_clone {
-                                for user_event in &mut user_events {
-                                    user_event.index = (user_event.index as i32 + shift).max(0) as usize;
-                                }
-                                user_events_map.insert((group_id as i32 + shift).max(0) as usize, (user_id.clone(), user_events.clone()));
-                            }
-                            // Note: If we want to preserve events during shifts, we would need to
-                            // update the HashMap keys and UserEvent indices here
-                        }
-                        if !tl.creation_collapsible_list.range.is_empty() {
-                            let new_start = (tl.creation_collapsible_list.range.start as i32 + shift).max(0) as usize;
-                            let new_end = (tl.creation_collapsible_list.range.end as i32 + shift).max(0) as usize;
-                            tl.creation_collapsible_list.range = new_start..new_end;
-                        }
+                        let shift = new_len.saturating_sub(old_len) as i32;
+                        handle_backward_pagination_index_shift(
+                            shift,
+                            &mut tl.group_manager,
+                        );
                     }
                     tl.items = new_items;
                     done_loading = true;
@@ -2150,9 +2037,7 @@ impl RoomScreen {
                 scrolled_past_read_marker: false,
                 latest_own_user_receipt: None,
                 tombstone_info,
-                room_creator_event: None,
-                small_state_groups: Vec::new(),
-                creation_collapsible_list: CreationCollapsibleList::default(),
+                group_manager: SmallStateGroupManager::default(),
             };
             (tl_state, true)
         };
@@ -2712,13 +2597,8 @@ struct TimelineUiState {
     /// are contained within. If `None`, the room has not been tombstoned.
     tombstone_info: Option<SuccessorRoomDetails>,
     
-    /// The user ID of the room creator and the event that created the room, if known.
-    room_creator_event: Option<(OwnedUserId, OwnedEventId)>,
-    /// A vector of ranges of small state items that are grouped together in the UI.
-    /// 
-    /// There is a collapsible to the right of the message of the first item in the group. 
-    small_state_groups: Vec<(std::ops::Range<usize>, bool, HashMap<usize, (String, Vec<UserEvent>)>)>,
-    creation_collapsible_list: CreationCollapsibleList,
+    /// Manager for small state groups, room creation info, and creation collapsible list.
+    group_manager: SmallStateGroupManager,
 }
 
 #[derive(Default, Debug)]
@@ -4058,15 +3938,14 @@ fn populate_small_state_event(
     item_id: usize,
     room_id: &OwnedRoomId,
     event_tl_item: &EventTimelineItem,
-    prev_event: Option<&Arc<TimelineItem>>,
-    next_event: Option<&Arc<TimelineItem>>,
+    tl_items: &Vector<Arc<TimelineItem>>,
     event_content: &impl SmallStateEventContent,
     item_drawn_status: ItemDrawnStatus,
-    room_creation: &mut Option<(OwnedUserId, OwnedEventId)>,
-    small_state_groups: &mut Vec<(std::ops::Range<usize>, bool, HashMap<usize, (String, Vec<UserEvent>)>)>,
+    group_manager: &mut SmallStateGroupManager,
     content_drawn_since_last_update: &mut RangeSet<usize>,
-    creation_collapsible_list: &mut CreationCollapsibleList,
 ) -> (WidgetRef, ItemDrawnStatus) {
+    let prev_event = item_id.checked_sub(1).and_then(|i| tl_items.get(i));
+    let next_event = item_id.checked_add(1).and_then(|i| tl_items.get(i));
     let mut new_drawn_status = item_drawn_status;
     let (item, existed) = list.item_with_existed(cx, item_id, id!(SmallStateEvent));
     // The content of a small state event view may depend on the profile info,
@@ -4103,19 +3982,17 @@ fn populate_small_state_event(
         username
     });
     // Dynamically determine group membership and update groups
-    // Returns: (opened, show_collapsible_button, expanded)
-    // - opened: whether this individual item should be rendered (based on group state)
+    // Returns: (show, show_collapsible_button, expanded)
+    // - show: whether this individual item should be rendered (based on group state)
     // - show_collapsible_button: true if this item is the first in a collapsible group
     // - expanded: current expansion state of the group (for button text)
-    let (opened, show_collapsible_button, expanded, to_redraw) = update_small_state_groups_for_item(
+    let (show, show_collapsible_button, expanded, to_redraw) = update_small_state_groups_for_item(
         item_id,
         username.clone(),
         event_tl_item,
         prev_event,
         next_event,
-        room_creation,
-        small_state_groups,
-        creation_collapsible_list
+        group_manager,
     );
     // Only show the collapsible button on the first item of each group
     item.button(ids!(collapsible_button))
@@ -4130,49 +4007,25 @@ fn populate_small_state_event(
         item_drawn_status,
         new_drawn_status,
     );
-    // Render logic based on group state
-    if opened {
-        // This item should be visible - set appropriate button text if this is a group leader
-        if show_collapsible_button {
-            // Update button text to show current group state:
-            // ▲ = group is expanded (click to collapse)
-            // ▼ = group is collapsed (click to expand)
-            let button_text = if expanded { "▲" } else { "▼" };
-            item.button(ids!(collapsible_button))
-                .set_text(cx, button_text);
-            if room_creation.is_some() && creation_collapsible_list.range.start == item_id {
-                let summary_text = format!("{} created and configured the room: {:?}", creation_collapsible_list.username, item_id);
-                item.view(ids!(small_state_header)).set_visible(cx, true);
-                item.label(ids!(small_state_header.summary_text)).set_text(cx, &summary_text);
-                item.view(ids!(body)).set_visible(cx, false);
-                return (item, new_drawn_status);
-            }
-           
-            for (range, _, user_events_map) in small_state_groups {
-                if range.start == item_id {
-                    // Pass HashMap directly to generate_summary
-                    let summary_text = generate_summary(&user_events_map, 4);
-                    item.view(ids!(small_state_header)).set_visible(cx, true);
-                    item.label(ids!(small_state_header.summary_text)).set_text(cx, &summary_text);
-                    break;
-                }
-            }
-            item.view(ids!(body)).set_visible(cx, expanded);
-        } else {
-            item.view(ids!(small_state_header)).set_visible(cx, false);
-            item.view(ids!(body)).set_visible(cx, true);
-        }
-    } else {
-        item.view(ids!(small_state_header)).set_visible(cx, false);
-        item.view(ids!(body)).set_visible(cx, false);
-    }
+    // Handle rendering logic for group state using centralized function
+    render_small_state_event_group_logic(
+        cx,
+        &item,
+        item_id,
+        show,
+        show_collapsible_button,
+        expanded,
+        group_manager,
+        room_id,
+    );
+    
+    // Handle redraw logic for group changes
     if !to_redraw.is_empty() && to_redraw.end > to_redraw.start {
         content_drawn_since_last_update.remove(to_redraw.clone());
         if to_redraw.contains(&item_id) {
             new_drawn_status.content_drawn = false; // Force redraw if part of a group that changed
         }
     }
-   
     (item, new_drawn_status)
 }
 
@@ -4409,4 +4262,4 @@ pub fn clear_timeline_states(_cx: &mut Cx) {
     TIMELINE_STATES.with_borrow_mut(|states| {
         states.clear();
     });
-}
\ No newline at end of file
+}
diff --git a/src/home/small_state_group_manager.rs b/src/home/small_state_group_manager.rs
new file mode 100644
index 00000000..053ad92a
--- /dev/null
+++ b/src/home/small_state_group_manager.rs
@@ -0,0 +1,1156 @@
+use makepad_widgets::*;
+use matrix_sdk::ruma::{events::FullStateEventContent, OwnedEventId, OwnedUserId, UserId};
+use matrix_sdk_ui::timeline::{
+    AnyOtherFullStateEventContent, EventTimelineItem, MembershipChange, MsgLikeContent,
+    MsgLikeKind, TimelineItem, TimelineItemContent, TimelineItemKind,
+};
+use rangemap::RangeSet;
+use std::{collections::HashMap, ops::Range, sync::Arc};
+use indexmap::IndexMap;
+
+use crate::home::room_read_receipt::{AvatarRowWidgetRefExt, MAX_VISIBLE_AVATARS_IN_READ_RECEIPT};
+
+const MIN_GROUP_SIZE_FOR_COLLAPSE: usize = 3;
+
+live_design! {
+    use link::theme::*;
+    use link::shaders::*;
+    use link::widgets::*;
+
+    use crate::shared::styles::*;
+    use crate::home::room_read_receipt::*;
+    pub SmallStateHeader = <View> {
+        width: Fill,
+        height: Fit
+        visible: false
+        padding: { left: 7.0, top: 2.0, bottom: 2.0 }
+        flow: Right,
+        align: { y: 0.5 }
+        spacing: 7.0
+        user_event_avatar_row = <AvatarRow> {
+            margin: { left: 10.0 },
+        }
+        
+        summary_text = <Label> {
+            width: Fill, height: Fit
+            flow: RightWrap,
+            padding: 0,
+            draw_text: {
+                wrap: Word,
+                text_style: <THEME_FONT_REGULAR>{
+                    font_size: (SMALL_STATE_FONT_SIZE),
+                },
+                color: (SMALL_STATE_TEXT_COLOR)
+            }
+        }
+        // Collapsible button for small state event groups
+        // Shows on the first item of each group to toggle expansion
+        // Text is dynamically updated: ▶ (collapsed) or ▼ (expanded)
+        collapsible_button = <Button> {
+            width: Fit,
+            height: Fit,
+            margin: { left: 5, right: 5 }
+            padding: { left: 4, right: 4, top: 2, bottom: 2 }
+            text: "▼"  // Default to collapsed state
+            draw_text: {
+                text_style: <SMALL_STATE_TEXT_STYLE> {},
+                color: #666
+            }
+            draw_bg: {
+                fn pixel(self) -> vec4 {
+                    let sdf = Sdf2d::viewport(self.pos * self.rect_size);
+                    return sdf.result
+                }
+            }
+        }
+    }
+}
+
+/// Represents a group of adjacent small state events that can be collapsed/expanded in the UI.
+///
+/// This struct encapsulates the grouping logic for small state events (membership changes,
+/// profile changes, etc.) that appear together in the timeline. Groups can be toggled
+/// between expanded (showing all individual events) and collapsed (showing a summary).
+///
+/// The group is identified by a range of timeline item indices, and contains a mapping
+/// of user events within that range for generating summaries.
+#[derive(Debug, Clone, Default)]
+pub struct SmallStateGroup {
+    /// The range of timeline item indices that belong to this group.
+    ///
+    /// The range is inclusive of the start index and exclusive of the end index.
+    pub range: std::ops::Range<usize>,
+
+    /// Whether this group is currently expanded (true) or collapsed (false).
+    ///
+    /// When collapsed, only the first item is shown with a summary of the group.
+    /// When expanded, all items in the group are displayed individually.
+    pub opened: bool,
+
+    /// Mapping of user IDs to their events within this group.
+    ///
+    /// Key: The user ID who performed the state changes (OwnedUserId).
+    /// Value: Vector of UserEvent containing details about the specific state changes
+    /// for that user within this group.
+    ///
+    /// This simplified structure allows efficient lookup and summary generation.
+    /// Event ordering is preserved within each user's Vec<UserEvent> by their index field.
+    pub user_events_map: HashMap<OwnedUserId, Vec<UserEvent>>,
+}
+
+/// Combined state for managing small state groups and room creation information
+#[derive(Default, Debug)]
+pub struct SmallStateGroupManager {
+    /// Optional room creation info (creator user ID and event ID)
+    pub room_creation: Option<(OwnedUserId, OwnedEventId)>,
+    /// Creation collapsible list state
+    pub creation_collapsible_list: CreationCollapsibleList,
+    /// List of small state groups
+    pub small_state_groups: Vec<SmallStateGroup>,
+}
+
+#[derive(Default, Debug, Clone, Copy, PartialEq, Eq, PartialOrd, Ord, Hash)]
+pub enum TransitionType {
+    CreateRoom,
+    ConfigureRoom,
+    Joined,
+    Left,
+    JoinedAndLeft,
+    LeftAndJoined,
+    InvitationRejected,
+    InvitationRevoked,
+    Invited,
+    Banned,
+    Unbanned,
+    Kicked,
+    ChangedName,
+    ChangedAvatar,
+    #[default]
+    NoChange,
+    ServerAcl,
+    ChangedPins,
+    MessageRemoved,
+    UnableToDecrypt,
+    HiddenEvent,
+}
+
+#[derive(Debug, Clone)]
+pub struct UserEvent {
+    pub transition: TransitionType,
+    pub index: usize,
+    pub sender: OwnedUserId,
+    pub display_name: String,
+    pub state_key: Option<String>,
+    pub membership: Option<String>,
+    pub sender_profile: Option<crate::profile::user_profile::UserProfile>,
+}
+
+/// State for the creation collapsible list
+#[derive(Debug)]
+pub struct CreationCollapsibleList {
+    pub range: std::ops::Range<usize>,
+    pub opened: bool,
+    pub username: String,
+}
+
+impl Default for CreationCollapsibleList {
+    fn default() -> Self {
+        CreationCollapsibleList {
+            range: 0..0,
+            opened: true,
+            username: String::new(),
+        }
+    }
+}
+
+/// Combines neighboring transitions into compound actions, e.g. [Joined, Left] -> [JoinedAndLeft]
+fn merge_adjacent_transitions(transitions: &[TransitionType]) -> Vec<TransitionType> {
+    let mut res = Vec::new();
+    let mut i = 0;
+    while i < transitions.len() {
+        let t = transitions[i];
+        if i + 1 < transitions.len() {
+            let t2 = transitions[i + 1];
+            match (t, t2) {
+                (TransitionType::Joined, TransitionType::Left) => {
+                    res.push(TransitionType::JoinedAndLeft);
+                    i += 2;
+                    continue;
+                }
+                (TransitionType::Left, TransitionType::Joined) => {
+                    res.push(TransitionType::LeftAndJoined);
+                    i += 2;
+                    continue;
+                }
+                _ => {}
+            }
+        }
+        res.push(t);
+        i += 1;
+    }
+    res
+}
+
+/// Groups consecutive identical transitions with their count (e.g. [JoinedAndLeft, JoinedAndLeft] -> (JoinedAndLeft, 2))
+pub fn group_repeated_transitions(transitions: &[TransitionType]) -> Vec<(TransitionType, usize)> {
+    let mut res = Vec::new();
+    for &t in transitions {
+        if let Some((last, count)) = res.last_mut() {
+            if *last == t {
+                *count += 1;
+                continue;
+            }
+        }
+        res.push((t, 1));
+    }
+    res
+}
+
+/// Creates human-readable text for a transition type with user count and repetition count
+fn format_transition_text(
+    transition: TransitionType,
+    user_count: usize,
+    repeat_count: usize,
+) -> String {
+    let is_plural = user_count > 1;
+    match transition {
+        TransitionType::CreateRoom => "created and configured the room".to_string(),
+        TransitionType::ConfigureRoom => "".to_string(),
+        TransitionType::Joined => {
+            if repeat_count > 1 {
+                if is_plural {
+                    format!("joined (×{})", repeat_count)
+                } else {
+                    format!("joined the room (×{})", repeat_count)
+                }
+            } else {
+                if is_plural {
+                    "joined".to_string()
+                } else {
+                    "joined the room".to_string()
+                }
+            }
+        }
+        TransitionType::Left => {
+            if repeat_count > 1 {
+                if is_plural {
+                    format!("left (×{})", repeat_count)
+                } else {
+                    format!("left the room (×{})", repeat_count)
+                }
+            } else {
+                if is_plural {
+                    "left".to_string()
+                } else {
+                    "left the room".to_string()
+                }
+            }
+        }
+        TransitionType::JoinedAndLeft => {
+            if repeat_count > 1 {
+                format!("joined and left (×{})", repeat_count)
+            } else {
+                "joined and left".to_string()
+            }
+        }
+        TransitionType::LeftAndJoined => {
+            if repeat_count > 1 {
+                format!("left and rejoined (×{})", repeat_count)
+            } else {
+                "left and rejoined".to_string()
+            }
+        }
+        TransitionType::ChangedName => {
+            if repeat_count > 1 {
+                format!("changed their name (×{})", repeat_count)
+            } else {
+                "changed their name".to_string()
+            }
+        }
+        TransitionType::ChangedAvatar => {
+            if repeat_count > 1 {
+                format!("changed their profile picture (×{})", repeat_count)
+            } else {
+                "changed their profile picture".to_string()
+            }
+        }
+        TransitionType::Invited => {
+            if repeat_count > 1 {
+                format!("was invited (×{})", repeat_count)
+            } else {
+                "was invited".to_string()
+            }
+        }
+        TransitionType::Banned => {
+            if repeat_count > 1 {
+                format!("was banned (×{})", repeat_count)
+            } else {
+                "was banned".to_string()
+            }
+        }
+        TransitionType::Unbanned => {
+            if repeat_count > 1 {
+                format!("was unbanned (×{})", repeat_count)
+            } else {
+                "was unbanned".to_string()
+            }
+        }
+        TransitionType::InvitationRejected => {
+            if repeat_count > 1 {
+                format!("rejected invite (×{})", repeat_count)
+            } else {
+                "rejected invite".to_string()
+            }
+        }
+        TransitionType::InvitationRevoked => {
+            if repeat_count > 1 {
+                format!("invite withdrawn (×{})", repeat_count)
+            } else {
+                "invite withdrawn".to_string()
+            }
+        }
+        TransitionType::Kicked => {
+            if repeat_count > 1 {
+                format!("was kicked (×{})", repeat_count)
+            } else {
+                "was kicked".to_string()
+            }
+        }
+        TransitionType::ServerAcl => {
+            if repeat_count > 1 {
+                format!("updated server ACLs (×{})", repeat_count)
+            } else {
+                "updated server ACLs".to_string()
+            }
+        }
+        TransitionType::ChangedPins => {
+            if repeat_count > 1 {
+                format!("changed pinned messages (×{})", repeat_count)
+            } else {
+                "changed pinned messages".to_string()
+            }
+        }
+        TransitionType::MessageRemoved => {
+            if repeat_count > 1 {
+                format!("removed a message (×{})", repeat_count)
+            } else {
+                "removed a message".to_string()
+            }
+        }
+        TransitionType::HiddenEvent => {
+            if repeat_count > 1 {
+                format!("did a hidden event (×{})", repeat_count)
+            } else {
+                "did a hidden event".to_string()
+            }
+        }
+        TransitionType::NoChange => {
+            if repeat_count > 1 {
+                format!("made no changes (×{})", repeat_count)
+            } else {
+                "made no changes".to_string()
+            }
+        }
+        TransitionType::UnableToDecrypt => {
+            if repeat_count > 1 {
+                format!("decryption failed (×{})", repeat_count)
+            } else {
+                "decryption failed".to_string()
+            }
+        }
+    }
+}
+
+/// Produce an English-readable name list, with "and N others"
+pub fn format_user_list(user_names: &[String], max_display_count: usize) -> String {
+    match user_names.len() {
+        0 => "".into(),
+        1 => user_names[0].clone(),
+        2 => format!("{} and {}", user_names[0], user_names[1]),
+        3 => format!("{}, {}, and {}", user_names[0], user_names[1], user_names[2]),
+        n if n <= max_display_count => {
+            let all_but_last = &user_names[..n-1];
+            let last = &user_names[n-1];
+            format!("{}, and {}", all_but_last.join(", "), last)
+        },
+        n => format!(
+            "{}, and {} others",
+            user_names[..max_display_count].join(", "),
+            n - max_display_count
+        ),
+    }
+}
+
+/// Converts a `EventTimelineItem` to a `UserEvent`.
+///
+/// This function takes an `EventTimelineItem`, the user name of the event sender, and an index.
+/// It then returns a `UserEvent` with the index, display name, transition type,
+/// sender, state key, and membership change.
+///
+/// The transition type is determined using `is_small_state_event`.
+///
+/// The state key is set to `Some(event_item.state_key().to_string())` if the event item
+/// is a membership change or an other state event.
+///
+/// The membership change is set to `Some(s.to_string())` if the event item is a membership change,
+/// where `s` is one of "join", "leave", "invite", or "ban".
+pub fn convert_to_timeline_event(
+    event_item: &EventTimelineItem,
+    user_name: String,
+    index: usize,
+    sender_profile: Option<crate::profile::user_profile::UserProfile>,
+) -> UserEvent {
+    use matrix_sdk_ui::timeline::{MembershipChange, TimelineItemContent};
+    let (state_key, membership) = match event_item.content() {
+        TimelineItemContent::MembershipChange(change) => {
+            let state_key = Some(change.user_id().to_string());
+            let membership = match change.change() {
+                Some(MembershipChange::Joined) => Some("join"),
+                Some(MembershipChange::Left) => Some("leave"),
+                Some(MembershipChange::Invited) => Some("invite"),
+                Some(MembershipChange::Banned) => Some("ban"),
+                _ => None,
+            }
+            .map(|s| s.to_string());
+            (state_key, membership)
+        }
+        TimelineItemContent::OtherState(other) => (Some(other.state_key().to_string()), None),
+        _ => (None, None),
+    };
+    let (_is_small_state, transition_type, _display_name_from_state) =
+        is_small_state_event(event_item);
+    UserEvent {
+        index,
+        display_name: user_name,
+        transition: transition_type,
+        sender: event_item.sender().into(),
+        state_key,
+        membership,
+        sender_profile,
+    }
+}
+
+/// Convert Matrix membership change → transition type
+pub fn get_transition_from_membership_change(change: MembershipChange) -> TransitionType {
+    use matrix_sdk_ui::timeline::MembershipChange;
+    match change {
+        MembershipChange::Joined => TransitionType::Joined,
+        MembershipChange::Left => TransitionType::Left,
+        MembershipChange::Banned => TransitionType::Banned,
+        MembershipChange::Unbanned => TransitionType::Unbanned,
+        MembershipChange::Kicked => TransitionType::Kicked,
+        MembershipChange::Invited => TransitionType::Invited,
+        MembershipChange::KickedAndBanned => TransitionType::Banned,
+        MembershipChange::InvitationAccepted => TransitionType::Joined,
+        MembershipChange::InvitationRejected => TransitionType::InvitationRejected,
+        MembershipChange::InvitationRevoked => TransitionType::InvitationRevoked,
+        MembershipChange::Knocked => TransitionType::HiddenEvent,
+        MembershipChange::KnockAccepted => TransitionType::Joined,
+        MembershipChange::KnockRetracted => TransitionType::HiddenEvent,
+        MembershipChange::None => TransitionType::NoChange,
+        MembershipChange::Error => TransitionType::NoChange,
+        MembershipChange::NotImplemented => TransitionType::NoChange,
+        MembershipChange::KnockDenied => TransitionType::HiddenEvent,
+    }
+}
+
+/// Convert other room state events → transition type
+pub fn get_transition_from_other_events(
+    content: &AnyOtherFullStateEventContent,
+    _state_key: &str,
+) -> TransitionType {
+    match content {
+        AnyOtherFullStateEventContent::RoomServerAcl(_) => TransitionType::ServerAcl,
+        AnyOtherFullStateEventContent::RoomPinnedEvents(_) => TransitionType::ConfigureRoom,
+        AnyOtherFullStateEventContent::RoomName(_) => TransitionType::ConfigureRoom,
+        AnyOtherFullStateEventContent::RoomTopic(_) => TransitionType::ConfigureRoom,
+        AnyOtherFullStateEventContent::RoomAvatar(_) => TransitionType::ConfigureRoom,
+        AnyOtherFullStateEventContent::RoomCanonicalAlias(_) => TransitionType::ConfigureRoom,
+        AnyOtherFullStateEventContent::RoomCreate(_) => TransitionType::CreateRoom,
+        AnyOtherFullStateEventContent::RoomEncryption(_) => TransitionType::ConfigureRoom,
+        AnyOtherFullStateEventContent::RoomGuestAccess(_) => TransitionType::ConfigureRoom,
+        AnyOtherFullStateEventContent::RoomHistoryVisibility(_) => TransitionType::ConfigureRoom,
+        AnyOtherFullStateEventContent::RoomJoinRules(_) => TransitionType::ConfigureRoom,
+        AnyOtherFullStateEventContent::RoomPowerLevels(_) => TransitionType::ConfigureRoom,
+        AnyOtherFullStateEventContent::RoomThirdPartyInvite(_) => TransitionType::ConfigureRoom,
+        AnyOtherFullStateEventContent::RoomTombstone(_) => TransitionType::ConfigureRoom,
+        AnyOtherFullStateEventContent::RoomAliases(_) => TransitionType::ConfigureRoom,
+        AnyOtherFullStateEventContent::SpaceChild(_) => TransitionType::ConfigureRoom,
+        AnyOtherFullStateEventContent::SpaceParent(_) => TransitionType::ConfigureRoom,
+        AnyOtherFullStateEventContent::PolicyRuleRoom(_) => TransitionType::ConfigureRoom,
+        AnyOtherFullStateEventContent::PolicyRuleServer(_) => TransitionType::ConfigureRoom,
+        AnyOtherFullStateEventContent::PolicyRuleUser(_) => TransitionType::ConfigureRoom,
+        AnyOtherFullStateEventContent::_Custom { .. } => TransitionType::HiddenEvent,
+    }
+}
+
+/// Appends a new user event to the given list of user events.
+///
+/// If the given transition is `HiddenEvent`, this function does nothing.
+///
+/// Otherwise, it appends a new `UserEvent` to the list of user events for the given user ID.
+/// If the user ID is not found in the list, a new entry is created.
+///
+/// If the user ID is found, but there is no existing `UserEvent` with the same index,
+/// a new `UserEvent` is appended to the list of user events for that user ID.
+///
+/// The function prints debug messages to help with debugging.
+pub fn append_user_event(
+    user_event: UserEvent,
+    user_events: &mut Vec<(OwnedUserId, Vec<UserEvent>)>,
+) {
+    if let TransitionType::HiddenEvent = user_event.transition {
+        return;
+    }
+    if let Some((_, events)) = user_events
+        .iter_mut()
+        .find(|(id, _)| id == &user_event.sender)
+    {
+        if events
+            .iter()
+            .filter(|inner_user_event| inner_user_event.index == user_event.index)
+            .count()
+            == 0
+        {
+            events.push(user_event);
+        }
+    } else {
+        user_events.push((user_event.sender.clone(), vec![user_event]));
+    }
+}
+
+/// Gets the effective user ID for a user event, preferring state_key over sender.
+/// This handles cases where the state_key represents the actual user being affected.
+fn get_effective_user_id(user_event: &UserEvent) -> OwnedUserId {
+    match user_event.state_key.as_ref().map(UserId::parse) {
+        Some(Ok(user_id)) => user_id,
+        _ => user_event.sender.clone(),
+    }
+}
+
+/// Appends a new user event to the given HashMap of user events.
+/// 
+/// The HashMap structure maps: user_id -> Vec<UserEvent>
+/// This simplified structure groups events by user ID, avoiding the complexity
+/// of maintaining timeline indices as keys.
+fn append_user_event_to_map(
+    user_event: UserEvent,
+    user_events: &mut HashMap<OwnedUserId, Vec<UserEvent>>,
+) {
+    let effective_user_id = get_effective_user_id(&user_event);
+    
+    // Get or create the user's event list
+    let user_events_vec = user_events.entry(effective_user_id).or_default();
+    
+    // Add the event if it's not already present (avoid duplicates)
+    if !user_events_vec.iter().any(|event| event.index == user_event.index) {
+        user_events_vec.push(user_event);
+    }
+}
+
+/// Checks if a timeline item is a small state event.
+///
+/// # Arguments
+/// * `event_tl_item` - The timeline item to check
+///
+/// # Returns
+/// * `bool` - Whether this is a small state event
+/// * `TransitionType` - The type of transition
+/// * `Option<String>` - Display name if available
+pub fn is_small_state_event(
+    event_tl_item: &EventTimelineItem,
+) -> (bool, TransitionType, Option<String>) {
+    match event_tl_item.content() {
+        TimelineItemContent::MembershipChange(change) => {
+            let transition = change
+                .change()
+                .map(get_transition_from_membership_change)
+                .unwrap_or_default();
+            (true, transition, change.display_name())
+        }
+        TimelineItemContent::ProfileChange(change) => {
+            let transition_type = match (change.avatar_url_change(), change.displayname_change()) {
+                (Some(_), _) => TransitionType::ChangedAvatar,
+                (None, Some(_)) => TransitionType::ChangedName,
+                _ => TransitionType::NoChange,
+            };
+            (true, transition_type, None)
+        }
+        TimelineItemContent::OtherState(other_state) => {
+            let transition =
+                get_transition_from_other_events(other_state.content(), other_state.state_key());
+            (true, transition, None)
+        }
+        TimelineItemContent::MsgLike(MsgLikeContent { kind, .. }) => {
+            let transition = match kind {
+                MsgLikeKind::Poll(_) => TransitionType::NoChange,
+                MsgLikeKind::Redacted => TransitionType::MessageRemoved,
+                MsgLikeKind::UnableToDecrypt(_) => TransitionType::UnableToDecrypt,
+                _ => return (false, TransitionType::NoChange, None),
+            };
+            (true, transition, None)
+        }
+        _ => (false, TransitionType::NoChange, None),
+    }
+}
+
+/// Generates a summary string from user events.
+///
+/// # Arguments
+/// * `user_events` - A HashMap mapping user IDs to their list of UserEvents
+/// * `summary_length` - Maximum number of user names to display before coalescing
+/// # Returns
+/// * `String` - The generated summary string
+pub fn generate_summary(
+    user_events: &HashMap<OwnedUserId, Vec<UserEvent>>,
+    summary_length: usize,
+) -> String {
+    // Aggregate by transition sequence
+    let mut aggregates: Vec<(Vec<TransitionType>, Vec<String>)> = Vec::new();
+
+    for (user_id, events) in user_events {
+        let mut events = events.clone();
+        // Sort events by their timeline index to maintain chronological order
+        events.sort_by_key(|e| e.index);
+        let mut transitions: Vec<_> = events.iter().map(|e| e.transition).collect();
+
+        // Filter out Joined transitions for room creators
+        if transitions.contains(&TransitionType::CreateRoom) {
+            transitions.retain(|&t| t != TransitionType::Joined);
+        }
+        
+        let canonical = merge_adjacent_transitions(&transitions);
+        let name = events
+            .first()
+            .map(|e| e.display_name.clone())
+            .unwrap_or(user_id.to_string());
+            
+        if let Some((_, names)) = aggregates.iter_mut().find(|(seq, _)| seq == &canonical) {
+            names.push(name);
+        } else {
+            aggregates.push((canonical, vec![name]));
+        }
+    }
+    
+    // Build text
+    let mut summary_parts = Vec::new();
+    for (canonical, names) in aggregates {
+        let coalesced = group_repeated_transitions(&canonical);
+
+        let descs: Vec<String> = coalesced
+            .into_iter()
+            .map(|(transition, repeat_count)| {
+                format_transition_text(transition, names.len(), repeat_count)
+            })
+            .collect();
+        let name_list = format_user_list(&names, summary_length);
+        let transition_text = descs.join(", ");
+        summary_parts.push(format!("{} {}", name_list, transition_text));
+    }
+
+    summary_parts.join(", ")
+}
+
+/// Populates the avatar row with user avatars from the user events map.
+/// 
+/// # Arguments
+/// * `cx` - Makepad context
+/// * `avatar_row` - The avatar row widget to populate  
+/// * `room_id` - The room ID for avatar fetching
+/// * `user_events_map` - HashMap of user events to extract user IDs from
+/// * `max_avatars` - Maximum number of avatars to display
+fn populate_avatar_row_for_group(
+    cx: &mut Cx,
+    avatar_row: &WidgetRef,
+    room_id: &matrix_sdk::ruma::RoomId,
+    user_events_map: &HashMap<OwnedUserId, Vec<UserEvent>>,
+    max_avatars: usize,
+) {
+    // Extract user IDs from the map, sorted by their first event index for consistency
+    let mut user_data: Vec<(OwnedUserId, usize)> = user_events_map
+        .iter()
+        .map(|(user_id, events)| {
+            let first_index = events.iter().map(|e| e.index).min().unwrap_or(0);
+            (user_id.clone(), first_index)
+        })
+        .collect();
+    
+    // Sort by first event index to maintain chronological order
+    user_data.sort_by_key(|(_, first_index)| *first_index);
+    
+    // Extract just the user IDs and limit to max_avatars
+    let user_ids: Vec<OwnedUserId> = user_data
+        .into_iter()
+        .take(max_avatars)
+        .map(|(user_id, _)| user_id)
+        .collect();
+    
+    // Create a receipts map for the avatar row using the extracted user IDs
+    let receipts_map: IndexMap<OwnedUserId, matrix_sdk::ruma::events::receipt::Receipt> = user_ids
+        .into_iter()
+        .map(|user_id| {
+            // Create a simple receipt for display purposes
+            let receipt = matrix_sdk::ruma::events::receipt::Receipt::new(
+                matrix_sdk::ruma::MilliSecondsSinceUnixEpoch::now()
+            );
+            (user_id, receipt)
+        })
+        .collect();
+    
+    // Use set_avatar_row to populate the avatars  
+    avatar_row.avatar_row(ids!(user_event_avatar_row)).set_avatar_row(cx, room_id, None, &receipts_map);
+}
+
+/// Checks if an item is a small state event and determines if it can be grouped.
+/// Returns whether previous and next items are small state events.
+fn check_small_state_context(
+    current_item: &EventTimelineItem,
+    previous_item: Option<&Arc<TimelineItem>>,
+    next_item: Option<&Arc<TimelineItem>>,
+) -> (bool, bool, bool, Option<String>) {
+    let (current_item_is_small_state, _transition, display_name) = is_small_state_event(current_item);
+    
+    if !current_item_is_small_state {
+        return (false, false, false, display_name);
+    }
+
+    let (next_item_is_small_state, _, _) = next_item
+        .and_then(|timeline_item| match timeline_item.kind() {
+            TimelineItemKind::Event(event_tl_item) => Some(event_tl_item),
+            _ => None,
+        })
+        .map(is_small_state_event)
+        .unwrap_or((false, TransitionType::NoChange, None));
+        
+    let (previous_item_is_small_state, _, _) = previous_item
+        .and_then(|timeline_item| match timeline_item.kind() {
+            TimelineItemKind::Event(event_tl_item) => Some(event_tl_item),
+            _ => None,
+        })
+        .map(is_small_state_event)
+        .unwrap_or((false, TransitionType::NoChange, None));
+
+    (current_item_is_small_state, previous_item_is_small_state, next_item_is_small_state, display_name)
+}
+
+/// Handles room creation event grouping logic.
+/// Returns Some(result) if this item was processed as part of room creation, None otherwise.
+fn handle_room_creation_group(
+    item_id: usize,
+    current_item: &EventTimelineItem,
+    group_manager: &mut SmallStateGroupManager,
+) -> Option<(bool, bool, bool, Range<usize>)> {
+    if group_manager.room_creation.is_some() {
+        return None;
+    }
+
+    if let TimelineItemContent::OtherState(other_state) = current_item.content() {
+        if let AnyOtherFullStateEventContent::RoomCreate(FullStateEventContent::Original { .. }) = other_state.content() {
+            let creator_id = current_item.sender().to_owned();
+            if let Some(event_id) = current_item.event_id() {
+                group_manager.room_creation = Some((creator_id, event_id.to_owned()));
+                group_manager.creation_collapsible_list.range.start = item_id;
+                if group_manager.creation_collapsible_list.range.end <= item_id {
+                    group_manager.creation_collapsible_list.range.end = item_id + 1;
+                }
+                return Some((
+                    true,
+                    true,
+                    group_manager.creation_collapsible_list.opened,
+                    group_manager.creation_collapsible_list.range.clone(),
+                ));
+            }
+        }
+    }
+    None
+}
+
+/// Handles creation collapsible list logic for configuration and join events.
+/// Returns Some(result) if this item was processed as part of creation list, None otherwise.
+fn handle_creation_collapsible_list(
+    item_id: usize,
+    user_event: &UserEvent,
+    group_manager: &mut SmallStateGroupManager,
+) -> Option<(bool, bool, bool, Range<usize>)> {
+    // Check if this is the start of the creation collapsible list
+    if item_id == group_manager.creation_collapsible_list.range.start
+        && !group_manager.creation_collapsible_list.range.is_empty()
+    {
+        return Some((
+            true,
+            true,
+            group_manager.creation_collapsible_list.opened,
+            group_manager.creation_collapsible_list.range.clone(),
+        ));
+    }
+
+    // Handle configure room and joined events in creation list
+    if matches!(user_event.transition, TransitionType::ConfigureRoom | TransitionType::Joined) {
+        if group_manager.creation_collapsible_list.range.is_empty() {
+            return Some((true, false, true, Range::default()));
+        }
+        
+        if group_manager.creation_collapsible_list.range.end == item_id {
+            group_manager.creation_collapsible_list.range.end = item_id + 1;
+            return Some((
+                group_manager.creation_collapsible_list.opened,
+                false,
+                group_manager.creation_collapsible_list.opened,
+                item_id..item_id + 2, // +2 to include the next item to be redrawn
+            ));
+        }
+        
+        if group_manager.creation_collapsible_list.range.contains(&item_id) {
+            return Some((
+                group_manager.creation_collapsible_list.opened,
+                false,
+                group_manager.creation_collapsible_list.opened,
+                Range::default(),
+            ));
+        }
+    }
+    
+    None
+}
+
+/// Finds and updates existing small state groups.
+/// Returns Some(result) if item was added to an existing group, None otherwise.
+fn find_and_update_existing_group(
+    item_id: usize,
+    user_event: UserEvent,
+    group_manager: &mut SmallStateGroupManager,
+) -> Option<(bool, bool, bool, Range<usize>)> {
+    let group_keys: Vec<Range<usize>> = group_manager
+        .small_state_groups
+        .iter()
+        .map(|f| f.range.clone())
+        .collect();
+
+    'outer: for SmallStateGroup { range, opened, user_events_map } in group_manager.small_state_groups.iter_mut() {
+        if range.start == item_id {
+            append_user_event_to_map(user_event, user_events_map);
+            return Some((true, range.len() > MIN_GROUP_SIZE_FOR_COLLAPSE, *opened, Range::default()));
+        }
+        
+        if range.contains(&item_id) {
+            append_user_event_to_map(user_event, user_events_map);
+            return Some((
+                *opened || range.len() <= MIN_GROUP_SIZE_FOR_COLLAPSE,
+                false,
+                *opened,
+                Range::default(),
+            ));
+        }
+
+        // Since we're iterating backwards (from highest to lowest item_id),
+        // check if we can extend an existing group backwards
+        if range.start == item_id + 1 {
+            for r in group_keys.iter() {
+                if r.contains(&item_id) {
+                    continue 'outer;
+                }
+            }
+            // Extend this group backwards to include current item
+            *range = item_id..range.end;
+            append_user_event_to_map(user_event, user_events_map);
+            return Some((
+                *opened || range.len() <= MIN_GROUP_SIZE_FOR_COLLAPSE,
+                false,
+                false,
+                range.clone(),
+            ));
+        }
+    }
+    
+    None
+}
+
+/// Creates a new group if the next item is also a small state event.
+/// Returns Some(result) if a new group was created, None otherwise.
+fn create_new_group_if_needed(
+    item_id: usize,
+    user_event: UserEvent,
+    next_item_is_small_state: bool,
+    group_manager: &mut SmallStateGroupManager,
+) -> Option<(bool, bool, bool, Range<usize>)> {
+    if next_item_is_small_state {
+        let mut user_events_map = HashMap::new();
+        append_user_event_to_map(user_event, &mut user_events_map);
+        
+        group_manager.small_state_groups.push(SmallStateGroup {
+            range: item_id..(item_id + 2), // Plus 2 to include the next item into the group
+            opened: false,
+            user_events_map,
+        });
+        
+        return Some((false, false, false, item_id..(item_id + 2)));
+    }
+    None
+}
+
+/// Dynamically updates small state groups as timeline items are processed.
+///
+/// This function is called during populate_small_state_event to build groups on-demand.
+/// Since iteration starts from the highest item_id and goes backwards, we handle reverse grouping.
+/// Returns a tuple whether to display the message, and whether to display the collapsible button and whether collapsible list is expanded and range to redraw
+/// This is required as unexpanded first item in the group needs to display only the header and not the body.
+/// This case will return (true, true, false, Range::default()).
+pub fn update_small_state_groups_for_item(
+    item_id: usize,
+    username: String,
+    current_item: &EventTimelineItem,
+    previous_item: Option<&Arc<TimelineItem>>,
+    next_item: Option<&Arc<TimelineItem>>,
+    group_manager: &mut SmallStateGroupManager,
+) -> (bool, bool, bool, Range<usize>) {
+    // Check if this is a small state event and get context about neighboring items
+    let (current_item_is_small_state, previous_item_is_small_state, next_item_is_small_state, display_name) = 
+        check_small_state_context(current_item, previous_item, next_item);
+    
+    if !current_item_is_small_state {
+        return (true, false, false, Range::default()); // Not a small state event, draw as individual item
+    }
+
+    if !previous_item_is_small_state && !next_item_is_small_state {
+        return (true, false, false, Range::default()); // Isolated small state event, no collapsible button
+    }
+
+    // Handle room creation events as a special case
+    if let Some(result) = handle_room_creation_group(item_id, current_item, group_manager) {
+        return result;
+    }
+
+    // Set username for creation collapsible list and create user event
+    group_manager.creation_collapsible_list.username = username.clone();
+    let user_event = convert_to_timeline_event(
+        current_item,
+        display_name.unwrap_or(username),
+        item_id,
+        None, // TODO: Pass actual sender profile when available
+    );
+
+    // Handle creation collapsible list logic
+    if let Some(result) = handle_creation_collapsible_list(item_id, &user_event, group_manager) {
+        return result;
+    }
+
+    // Try to find and update existing groups
+    if let Some(result) = find_and_update_existing_group(item_id, user_event.clone(), group_manager) {
+        return result;
+    }
+
+    // Create new group if needed
+    if let Some(result) = create_new_group_if_needed(item_id, user_event, next_item_is_small_state, group_manager) {
+        return result;
+    }
+
+    // Default return - collapsed state, no collapsible button
+    (false, false, false, Range::default())
+}
+
+/// Handles item_id changes during backward pagination by shifting indices in small state groups
+/// and creation collapsible lists when new items are prepended to the timeline.
+///
+/// # Arguments
+/// * `old_len` - The length of the timeline before adding new items
+/// * `new_len` - The length of the timeline after adding new items  
+/// * `group_manager` - Mutable reference to the small state group manager to update
+pub fn handle_backward_pagination_index_shift(
+    shift: i32,
+    group_manager: &mut SmallStateGroupManager,
+) {
+    // Apply the shift to the small_state_groups
+    for SmallStateGroup {
+        range,
+        user_events_map,
+        opened: _,
+    } in &mut group_manager.small_state_groups
+    {
+        let new_start = (range.start as i32 + shift).max(0) as usize;
+        let new_end = (range.end as i32 + shift).max(0) as usize;
+        *range = new_start..new_end;
+
+        // Update the user events map indices
+        for user_events in user_events_map.values_mut() {
+            for user_event in user_events.iter_mut() {
+                user_event.index = (user_event.index as i32 + shift).max(0) as usize;
+            }
+        }
+    }
+
+    // Apply the shift to the creation collapsible list
+    if !group_manager.creation_collapsible_list.range.is_empty() {
+        let new_start =
+            (group_manager.creation_collapsible_list.range.start as i32 + shift).max(0) as usize;
+        let new_end =
+            (group_manager.creation_collapsible_list.range.end as i32 + shift).max(0) as usize;
+        group_manager.creation_collapsible_list.range = new_start..new_end;
+    }
+}
+
+/// Handles the rendering logic for small state events based on their group state.
+/// This function manages visibility, collapsible button states, and summary text display
+/// for timeline items that are part of collapsible groups.
+///
+/// # Arguments
+/// * `cx` - Makepad context for UI operations
+/// * `item` - The widget reference for the timeline item
+/// * `item_id` - The index of this item in the timeline
+/// * `opened` - Whether this individual item should be rendered (based on group state)
+/// * `show_collapsible_button` - True if this item is the first in a collapsible group
+/// * `expanded` - Current expansion state of the group (for button text)
+/// * `group_manager` - Reference to the small state group manager
+/// * `room_id` - The room ID for avatar fetching
+pub fn render_small_state_event_group_logic(
+    cx: &mut Cx,
+    item: &WidgetRef,
+    item_id: usize,
+    opened: bool,
+    show_collapsible_button: bool,
+    expanded: bool,
+    group_manager: &SmallStateGroupManager,
+    room_id: &matrix_sdk::ruma::RoomId,
+) {
+    // Render logic based on group state
+    if opened {
+        // This item should be visible - set appropriate button text if this is a group leader
+        if show_collapsible_button {
+            // Update button text to show current group state:
+            // ▶ = group is expanded (click to collapse)
+            // ▼ = group is collapsed (click to expand)
+            let button_text = if expanded { "▼" } else { "▶" };
+            item.button(ids!(collapsible_button))
+                .set_text(cx, button_text);
+            if group_manager.room_creation.is_some()
+                && group_manager.creation_collapsible_list.range.start == item_id
+            {
+                let summary_text = format!(
+                    "{} created and configured the room",
+                    group_manager.creation_collapsible_list.username
+                );
+                item.view(ids!(small_state_header)).set_visible(cx, true);
+                
+                // For creation groups, show only the creator's avatar
+                if let Some((creator_id, _)) = &group_manager.room_creation {
+                    let mut creator_map = HashMap::new();
+                    creator_map.insert(creator_id.clone(), vec![]); // Empty events, just for avatar display
+                    populate_avatar_row_for_group(
+                        cx,
+                        item,
+                        room_id,
+                        &creator_map,
+                        1 // Only show creator
+                    );
+                }
+                
+                item.label(ids!(small_state_header.summary_text))
+                    .set_text(cx, &summary_text);
+                item.view(ids!(body)).set_visible(cx, false);
+                return;
+            }
+            for SmallStateGroup {
+                range,
+                opened: _,
+                user_events_map,
+            } in &group_manager.small_state_groups
+            {
+                if range.start == item_id {
+                    // Pass HashMap directly to generate_summary
+                    let summary_text = generate_summary(user_events_map, 4);
+                    item.view(ids!(small_state_header)).set_visible(cx, true);
+                    
+                    // Populate avatar row with users from this group
+                    populate_avatar_row_for_group(
+                        cx,
+                        item, 
+                        room_id, 
+                        user_events_map, 
+                        MAX_VISIBLE_AVATARS_IN_READ_RECEIPT
+                    );
+                    
+                    item.view(ids!(body)).set_visible(cx, false);
+                    item.label(ids!(small_state_header.summary_text))
+                        .set_text(cx, &summary_text);
+                    break;
+                }
+            }
+            item.view(ids!(body)).set_visible(cx, expanded);
+        } else {
+            item.view(ids!(small_state_header)).set_visible(cx, false);
+            item.view(ids!(body)).set_visible(cx, true);
+        }
+    } else {
+        item.view(ids!(small_state_header)).set_visible(cx, false);
+        item.view(ids!(body)).set_visible(cx, false);
+    }
+}
+
+/// Handles collapsible button click events for small state event groups.
+/// This function manages toggling the open/closed state of groups and updates
+/// the UI accordingly including button text and clearing cached drawn status.
+///
+/// # Arguments
+/// * `cx` - Makepad context for UI operations
+/// * `wr` - Widget reference for UI updates
+/// * `item_id` - The index of the clicked item in the timeline
+/// * `portal_list` - Portal list widget for scrolling operations
+/// * `group_manager` - Mutable reference to the small state group manager
+/// * `content_drawn_since_last_update` - Mutable reference to content drawn tracking
+/// * `profile_drawn_since_last_update` - Mutable reference to profile drawn tracking
+/// * `items_len` - Length of the timeline items list
+pub fn handle_collapsible_button_click(
+    cx: &mut Cx,
+    wr: &WidgetRef,
+    item_id: usize,
+    portal_list: &makepad_widgets::PortalListRef,
+    group_manager: &mut SmallStateGroupManager,
+    content_drawn_since_last_update: &mut RangeSet<usize>,
+    profile_drawn_since_last_update: &mut RangeSet<usize>,
+    items_len: usize,
+) {
+    let mut is_creation_group = false;                        
+    if group_manager.creation_collapsible_list.range.start == item_id {
+        let open = &mut group_manager.creation_collapsible_list.opened;
+        // Toggle the group's open/closed state
+        *open = !*open;
+        let range = group_manager.creation_collapsible_list.range.clone();
+        let to_redraw = range.start..range.end + 1;
+        // Force redraw of all items in this group by clearing their cached drawn status
+        content_drawn_since_last_update.remove(to_redraw.clone());
+        profile_drawn_since_last_update.remove(to_redraw.clone());
+        
+        // Update button text to reflect new state:
+        // ▼ (down arrow) = expanded/open - items are visible
+        // ▶(right arrow) = collapsed/closed - items are hidden
+        let button_text = if *open { "▼" } else { "▶" };
+        wr.button(ids!(collapsible_button)).set_text(cx, button_text);
+        // If the last item is a group of small state events, scroll to the end when it is expanded.
+        if range.end == items_len && *open {
+            portal_list.smooth_scroll_to_end(cx, 90.0, None);
+        }
+        is_creation_group = true;
+    }
+
+    if !is_creation_group {
+        for SmallStateGroup { range, opened, user_events_map: _ } in &mut group_manager.small_state_groups {
+            if range.start == item_id {
+                // Toggle the group's open/closed state
+                *opened = !*opened;
+                // Force redraw of all items in this group by clearing their cached drawn status
+                content_drawn_since_last_update.remove(range.clone());
+                profile_drawn_since_last_update.remove(range.clone());
+
+                // Update button text to reflect new state:
+                // ▼ (down arrow) = expanded/open - items are visible
+                // ▶ (right arrow) = collapsed/closed - items are hidden
+                let button_text = if *opened { "▼" } else { "▶" };
+                wr.button(ids!(collapsible_button)).set_text(cx, button_text);
+                // If the last item is a group of small state events, scroll to the end when it is expanded.
+                if range.end == items_len && *opened {
+                    portal_list.smooth_scroll_to_end(cx, 90.0, None);
+                }
+                return;
+            }
+        }
+    }
+}

From ee7ebab2c33f15a29e2c671e22286ac625fc5e46 Mon Sep 17 00:00:00 2001
From: alanpoon <brightshadowx@gmail.com>
Date: Mon, 8 Dec 2025 11:59:52 +0800
Subject: [PATCH 16/26] optimize function name

---
 src/home/room_screen.rs               |  4 +-
 src/home/small_state_group_manager.rs | 80 +++++++++++++++------------
 2 files changed, 47 insertions(+), 37 deletions(-)

diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs
index 6980d529..a38af385 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -26,7 +26,7 @@ use matrix_sdk_ui::timeline::{
 };
 
 use crate::{
-    app::AppStateAction, avatar_cache, event_preview::{plaintext_body_of_timeline_item, text_preview_of_encrypted_message, text_preview_of_member_profile_change, text_preview_of_other_message_like, text_preview_of_other_state, text_preview_of_redacted_message, text_preview_of_room_membership_change, text_preview_of_timeline_item}, home::{edited_indicator::EditedIndicatorWidgetRefExt, link_preview::{LinkPreviewCache, LinkPreviewRef, LinkPreviewWidgetRefExt}, loading_pane::{LoadingPaneState, LoadingPaneWidgetExt}, small_state_group_manager::{handle_backward_pagination_index_shift, handle_collapsible_button_click, render_small_state_event_group_logic, SmallStateGroupManager, update_small_state_groups_for_item}, rooms_list::RoomsListRef, tombstone_footer::SuccessorRoomDetails}, media_cache::{MediaCache, MediaCacheEntry}, profile::{
+    app::AppStateAction, avatar_cache, event_preview::{plaintext_body_of_timeline_item, text_preview_of_encrypted_message, text_preview_of_member_profile_change, text_preview_of_other_message_like, text_preview_of_other_state, text_preview_of_redacted_message, text_preview_of_room_membership_change, text_preview_of_timeline_item}, home::{edited_indicator::EditedIndicatorWidgetRefExt, link_preview::{LinkPreviewCache, LinkPreviewRef, LinkPreviewWidgetRefExt}, loading_pane::{LoadingPaneState, LoadingPaneWidgetExt}, small_state_group_manager::{handle_backward_pagination_index_shift, handle_collapsible_button_click, render_small_state_event_group_logic, SmallStateGroupManager, determine_item_group_state}, rooms_list::RoomsListRef, tombstone_footer::SuccessorRoomDetails}, media_cache::{MediaCache, MediaCacheEntry}, profile::{
         user_profile::{AvatarState, ShowUserProfileAction, UserProfile, UserProfileAndRoomId, UserProfilePaneInfo, UserProfileSlidingPaneRef, UserProfileSlidingPaneWidgetExt},
         user_profile_cache,
     },
@@ -3986,7 +3986,7 @@ fn populate_small_state_event(
     // - show: whether this individual item should be rendered (based on group state)
     // - show_collapsible_button: true if this item is the first in a collapsible group
     // - expanded: current expansion state of the group (for button text)
-    let (show, show_collapsible_button, expanded, to_redraw) = update_small_state_groups_for_item(
+    let (show, show_collapsible_button, expanded, to_redraw) = determine_item_group_state(
         item_id,
         username.clone(),
         event_tl_item,
diff --git a/src/home/small_state_group_manager.rs b/src/home/small_state_group_manager.rs
index 053ad92a..3cc5762e 100644
--- a/src/home/small_state_group_manager.rs
+++ b/src/home/small_state_group_manager.rs
@@ -418,7 +418,7 @@ pub fn convert_to_timeline_event(
         _ => (None, None),
     };
     let (_is_small_state, transition_type, _display_name_from_state) =
-        is_small_state_event(event_item);
+        analyze_timeline_event_type(event_item);
     UserEvent {
         index,
         display_name: user_name,
@@ -548,7 +548,7 @@ fn append_user_event_to_map(
     }
 }
 
-/// Checks if a timeline item is a small state event.
+/// Analyzes a timeline event to determine if it represents a small state change.
 ///
 /// # Arguments
 /// * `event_tl_item` - The timeline item to check
@@ -557,7 +557,7 @@ fn append_user_event_to_map(
 /// * `bool` - Whether this is a small state event
 /// * `TransitionType` - The type of transition
 /// * `Option<String>` - Display name if available
-pub fn is_small_state_event(
+pub fn analyze_timeline_event_type(
     event_tl_item: &EventTimelineItem,
 ) -> (bool, TransitionType, Option<String>) {
     match event_tl_item.content() {
@@ -609,10 +609,10 @@ pub fn generate_summary(
     let mut aggregates: Vec<(Vec<TransitionType>, Vec<String>)> = Vec::new();
 
     for (user_id, events) in user_events {
-        let mut events = events.clone();
-        // Sort events by their timeline index to maintain chronological order
-        events.sort_by_key(|e| e.index);
-        let mut transitions: Vec<_> = events.iter().map(|e| e.transition).collect();
+        // Create sorted indices instead of cloning the entire events vector
+        let mut sorted_indices: Vec<usize> = (0..events.len()).collect();
+        sorted_indices.sort_by_key(|&i| events[i].index);
+        let mut transitions: Vec<_> = sorted_indices.iter().map(|&i| events[i].transition).collect();
 
         // Filter out Joined transitions for room creators
         if transitions.contains(&TransitionType::CreateRoom) {
@@ -620,15 +620,16 @@ pub fn generate_summary(
         }
         
         let canonical = merge_adjacent_transitions(&transitions);
-        let name = events
-            .first()
-            .map(|e| e.display_name.clone())
-            .unwrap_or(user_id.to_string());
+        let name = if let Some(&first_idx) = sorted_indices.first() {
+            &events[first_idx].display_name
+        } else {
+            &user_id.to_string()
+        };
             
         if let Some((_, names)) = aggregates.iter_mut().find(|(seq, _)| seq == &canonical) {
-            names.push(name);
+            names.push(name.to_string());
         } else {
-            aggregates.push((canonical, vec![name]));
+            aggregates.push((canonical, vec![name.to_string()]));
         }
     }
     
@@ -701,14 +702,14 @@ fn populate_avatar_row_for_group(
     avatar_row.avatar_row(ids!(user_event_avatar_row)).set_avatar_row(cx, room_id, None, &receipts_map);
 }
 
-/// Checks if an item is a small state event and determines if it can be grouped.
+/// Analyzes the context around a timeline item to determine grouping eligibility.
 /// Returns whether previous and next items are small state events.
-fn check_small_state_context(
+fn analyze_grouping_context(
     current_item: &EventTimelineItem,
     previous_item: Option<&Arc<TimelineItem>>,
     next_item: Option<&Arc<TimelineItem>>,
 ) -> (bool, bool, bool, Option<String>) {
-    let (current_item_is_small_state, _transition, display_name) = is_small_state_event(current_item);
+    let (current_item_is_small_state, _transition, display_name) = analyze_timeline_event_type(current_item);
     
     if !current_item_is_small_state {
         return (false, false, false, display_name);
@@ -719,7 +720,7 @@ fn check_small_state_context(
             TimelineItemKind::Event(event_tl_item) => Some(event_tl_item),
             _ => None,
         })
-        .map(is_small_state_event)
+        .map(analyze_timeline_event_type)
         .unwrap_or((false, TransitionType::NoChange, None));
         
     let (previous_item_is_small_state, _, _) = previous_item
@@ -727,15 +728,15 @@ fn check_small_state_context(
             TimelineItemKind::Event(event_tl_item) => Some(event_tl_item),
             _ => None,
         })
-        .map(is_small_state_event)
+        .map(analyze_timeline_event_type)
         .unwrap_or((false, TransitionType::NoChange, None));
 
     (current_item_is_small_state, previous_item_is_small_state, next_item_is_small_state, display_name)
 }
 
-/// Handles room creation event grouping logic.
+/// Processes room creation events for special grouping treatment.
 /// Returns Some(result) if this item was processed as part of room creation, None otherwise.
-fn handle_room_creation_group(
+fn process_room_creation_event(
     item_id: usize,
     current_item: &EventTimelineItem,
     group_manager: &mut SmallStateGroupManager,
@@ -765,9 +766,9 @@ fn handle_room_creation_group(
     None
 }
 
-/// Handles creation collapsible list logic for configuration and join events.
+/// Manages room setup events in the creation collapsible list.
 /// Returns Some(result) if this item was processed as part of creation list, None otherwise.
-fn handle_creation_collapsible_list(
+fn process_room_setup_events(
     item_id: usize,
     user_event: &UserEvent,
     group_manager: &mut SmallStateGroupManager,
@@ -888,14 +889,14 @@ fn create_new_group_if_needed(
     None
 }
 
-/// Dynamically updates small state groups as timeline items are processed.
+/// Determines how to render a timeline item based on small state group logic.
 ///
-/// This function is called during populate_small_state_event to build groups on-demand.
+/// This function is called during timeline rendering to build groups on-demand.
 /// Since iteration starts from the highest item_id and goes backwards, we handle reverse grouping.
 /// Returns a tuple whether to display the message, and whether to display the collapsible button and whether collapsible list is expanded and range to redraw
 /// This is required as unexpanded first item in the group needs to display only the header and not the body.
 /// This case will return (true, true, false, Range::default()).
-pub fn update_small_state_groups_for_item(
+pub fn determine_item_group_state(
     item_id: usize,
     username: String,
     current_item: &EventTimelineItem,
@@ -905,7 +906,7 @@ pub fn update_small_state_groups_for_item(
 ) -> (bool, bool, bool, Range<usize>) {
     // Check if this is a small state event and get context about neighboring items
     let (current_item_is_small_state, previous_item_is_small_state, next_item_is_small_state, display_name) = 
-        check_small_state_context(current_item, previous_item, next_item);
+        analyze_grouping_context(current_item, previous_item, next_item);
     
     if !current_item_is_small_state {
         return (true, false, false, Range::default()); // Not a small state event, draw as individual item
@@ -916,7 +917,7 @@ pub fn update_small_state_groups_for_item(
     }
 
     // Handle room creation events as a special case
-    if let Some(result) = handle_room_creation_group(item_id, current_item, group_manager) {
+    if let Some(result) = process_room_creation_event(item_id, current_item, group_manager) {
         return result;
     }
 
@@ -924,21 +925,29 @@ pub fn update_small_state_groups_for_item(
     group_manager.creation_collapsible_list.username = username.clone();
     let user_event = convert_to_timeline_event(
         current_item,
-        display_name.unwrap_or(username),
+        display_name.clone().unwrap_or(username.clone()),
         item_id,
         None, // TODO: Pass actual sender profile when available
     );
 
     // Handle creation collapsible list logic
-    if let Some(result) = handle_creation_collapsible_list(item_id, &user_event, group_manager) {
+    if let Some(result) = process_room_setup_events(item_id, &user_event, group_manager) {
         return result;
     }
 
     // Try to find and update existing groups
-    if let Some(result) = find_and_update_existing_group(item_id, user_event.clone(), group_manager) {
+    if let Some(result) = find_and_update_existing_group(item_id, user_event, group_manager) {
         return result;
     }
 
+    // Recreate user_event for the remaining cases since it was moved
+    let user_event = convert_to_timeline_event(
+        current_item,
+        display_name.unwrap_or(username),
+        item_id,
+        None,
+    );
+
     // Create new group if needed
     if let Some(result) = create_new_group_if_needed(item_id, user_event, next_item_is_small_state, group_manager) {
         return result;
@@ -1113,11 +1122,11 @@ pub fn handle_collapsible_button_click(
         let open = &mut group_manager.creation_collapsible_list.opened;
         // Toggle the group's open/closed state
         *open = !*open;
-        let range = group_manager.creation_collapsible_list.range.clone();
+        let range = &group_manager.creation_collapsible_list.range;
         let to_redraw = range.start..range.end + 1;
         // Force redraw of all items in this group by clearing their cached drawn status
         content_drawn_since_last_update.remove(to_redraw.clone());
-        profile_drawn_since_last_update.remove(to_redraw.clone());
+        profile_drawn_since_last_update.remove(to_redraw);
         
         // Update button text to reflect new state:
         // ▼ (down arrow) = expanded/open - items are visible
@@ -1125,7 +1134,7 @@ pub fn handle_collapsible_button_click(
         let button_text = if *open { "▼" } else { "▶" };
         wr.button(ids!(collapsible_button)).set_text(cx, button_text);
         // If the last item is a group of small state events, scroll to the end when it is expanded.
-        if range.end == items_len && *open {
+        if group_manager.creation_collapsible_list.range.end == items_len && *open {
             portal_list.smooth_scroll_to_end(cx, 90.0, None);
         }
         is_creation_group = true;
@@ -1137,8 +1146,9 @@ pub fn handle_collapsible_button_click(
                 // Toggle the group's open/closed state
                 *opened = !*opened;
                 // Force redraw of all items in this group by clearing their cached drawn status
-                content_drawn_since_last_update.remove(range.clone());
-                profile_drawn_since_last_update.remove(range.clone());
+                let range_to_remove = range.clone(); // Only clone when actually needed
+                content_drawn_since_last_update.remove(range_to_remove.clone());
+                profile_drawn_since_last_update.remove(range_to_remove);
 
                 // Update button text to reflect new state:
                 // ▼ (down arrow) = expanded/open - items are visible

From 6d446f7459c58af4e50e2d9b0919bf9043bd1f93 Mon Sep 17 00:00:00 2001
From: alanpoon <brightshadowx@gmail.com>
Date: Mon, 8 Dec 2025 12:30:23 +0800
Subject: [PATCH 17/26] added TimelineGroupService

---
 src/home/small_state_group_manager.rs | 501 +++++++++++++++++++-------
 1 file changed, 371 insertions(+), 130 deletions(-)

diff --git a/src/home/small_state_group_manager.rs b/src/home/small_state_group_manager.rs
index 3cc5762e..81288be1 100644
--- a/src/home/small_state_group_manager.rs
+++ b/src/home/small_state_group_manager.rs
@@ -11,6 +11,7 @@ use indexmap::IndexMap;
 use crate::home::room_read_receipt::{AvatarRowWidgetRefExt, MAX_VISIBLE_AVATARS_IN_READ_RECEIPT};
 
 const MIN_GROUP_SIZE_FOR_COLLAPSE: usize = 3;
+const SUMMARY_LENGTH: usize = 4;
 
 live_design! {
     use link::theme::*;
@@ -96,6 +97,14 @@ pub struct SmallStateGroup {
     /// This simplified structure allows efficient lookup and summary generation.
     /// Event ordering is preserved within each user's Vec<UserEvent> by their index field.
     pub user_events_map: HashMap<OwnedUserId, Vec<UserEvent>>,
+
+    /// Cached summary text to avoid recomputation during rendering.
+    /// This is computed once when the group is created or modified.
+    pub cached_summary: Option<String>,
+
+    /// Cached list of user IDs for avatar display, pre-sorted and limited.
+    /// This avoids expensive sorting and extraction during rendering.
+    pub cached_avatar_user_ids: Option<Vec<OwnedUserId>>,
 }
 
 /// Combined state for managing small state groups and room creation information
@@ -163,6 +172,240 @@ impl Default for CreationCollapsibleList {
     }
 }
 
+impl SmallStateGroup {
+    /// Computes and caches the summary text and avatar user IDs for this group.
+    /// This should be called whenever the group's user_events_map is modified.
+    pub fn update_cached_data(&mut self) {
+        // Cache the summary text
+        self.cached_summary = Some(generate_summary(&self.user_events_map, SUMMARY_LENGTH));
+        
+        // Cache the avatar user IDs
+        self.cached_avatar_user_ids = Some(extract_avatar_user_ids(&self.user_events_map, MAX_VISIBLE_AVATARS_IN_READ_RECEIPT));
+    }
+
+    /// Gets the cached summary text, computing it if not available.
+    pub fn get_summary(&mut self) -> &str {
+        if self.cached_summary.is_none() {
+            self.update_cached_data();
+        }
+        self.cached_summary.as_ref().unwrap()
+    }
+
+    /// Gets the cached avatar user IDs, computing them if not available.
+    pub fn get_avatar_user_ids(&mut self) -> &[OwnedUserId] {
+        if self.cached_avatar_user_ids.is_none() {
+            self.update_cached_data();
+        }
+        self.cached_avatar_user_ids.as_ref().unwrap()
+    }
+}
+
+/// Timeline grouping service that separates business logic from UI rendering.
+/// This service handles all timeline grouping computations and maintains caching.
+pub struct TimelineGroupService;
+
+impl TimelineGroupService {
+    /// Analyzes a timeline item and determines its grouping behavior.
+    /// Returns computed group state without performing UI operations.
+    pub fn compute_item_group_state(
+        item_id: usize,
+        username: String,
+        current_item: &EventTimelineItem,
+        previous_item: Option<&Arc<TimelineItem>>,
+        next_item: Option<&Arc<TimelineItem>>,
+        group_manager: &mut SmallStateGroupManager,
+    ) -> GroupStateResult {
+        let (current_item_is_small_state, previous_item_is_small_state, next_item_is_small_state, display_name) = 
+            analyze_grouping_context(current_item, previous_item, next_item);
+        
+        if !current_item_is_small_state {
+            return GroupStateResult {
+                show: true,
+                show_collapsible_button: false,
+                expanded: false,
+                to_redraw: Range::default(),
+                summary_text: None,
+                avatar_user_ids: None,
+            };
+        }
+
+        if !previous_item_is_small_state && !next_item_is_small_state {
+            return GroupStateResult {
+                show: true,
+                show_collapsible_button: false,
+                expanded: false,
+                to_redraw: Range::default(),
+                summary_text: None,
+                avatar_user_ids: None,
+            };
+        }
+
+        // Handle room creation events as a special case
+        if let Some((show, show_button, expanded, range)) = Self::process_room_creation(
+            item_id, current_item, group_manager
+        ) {
+            let summary_text = if show_button {
+                Some(format!(
+                    "{} created and configured the room",
+                    group_manager.creation_collapsible_list.username
+                ))
+            } else {
+                None
+            };
+            let avatar_user_ids = if let Some((creator_id, _)) = &group_manager.room_creation {
+                Some(vec![creator_id.clone()])
+            } else {
+                None
+            };
+            
+            return GroupStateResult {
+                show,
+                show_collapsible_button: show_button,
+                expanded,
+                to_redraw: range,
+                summary_text,
+                avatar_user_ids,
+            };
+        }
+
+        // Set username for creation collapsible list and create user event
+        group_manager.creation_collapsible_list.username = username.clone();
+        let user_event = convert_to_timeline_event(
+            current_item,
+            display_name.clone().unwrap_or(username.clone()),
+            item_id,
+            None,
+        );
+
+        // Handle creation collapsible list logic
+        if let Some((show, show_button, expanded, range)) = Self::process_room_setup(
+            item_id, &user_event, group_manager
+        ) {
+            return GroupStateResult {
+                show,
+                show_collapsible_button: show_button,
+                expanded,
+                to_redraw: range,
+                summary_text: None,
+                avatar_user_ids: None,
+            };
+        }
+
+        // Try to find and update existing groups
+        if let Some((show, show_button, expanded, range, summary, avatars)) = Self::handle_existing_group(
+            item_id, user_event, group_manager
+        ) {
+            return GroupStateResult {
+                show,
+                show_collapsible_button: show_button,
+                expanded,
+                to_redraw: range,
+                summary_text: summary,
+                avatar_user_ids: avatars,
+            };
+        }
+
+        // Recreate user_event for the remaining cases since it was moved
+        let user_event = convert_to_timeline_event(
+            current_item,
+            display_name.unwrap_or(username),
+            item_id,
+            None,
+        );
+
+        // Create new group if needed
+        if let Some((show, show_button, expanded, range)) = Self::create_new_group(
+            item_id, user_event, next_item_is_small_state, group_manager
+        ) {
+            return GroupStateResult {
+                show,
+                show_collapsible_button: show_button,
+                expanded,
+                to_redraw: range,
+                summary_text: None,
+                avatar_user_ids: None,
+            };
+        }
+
+        // Default return - collapsed state, no collapsible button
+        GroupStateResult {
+            show: false,
+            show_collapsible_button: false,
+            expanded: false,
+            to_redraw: Range::default(),
+            summary_text: None,
+            avatar_user_ids: None,
+        }
+    }
+
+    fn process_room_creation(
+        item_id: usize,
+        current_item: &EventTimelineItem,
+        group_manager: &mut SmallStateGroupManager,
+    ) -> Option<(bool, bool, bool, Range<usize>)> {
+        process_room_creation_event(item_id, current_item, group_manager)
+    }
+
+    fn process_room_setup(
+        item_id: usize,
+        user_event: &UserEvent,
+        group_manager: &mut SmallStateGroupManager,
+    ) -> Option<(bool, bool, bool, Range<usize>)> {
+        process_room_setup_events(item_id, user_event, group_manager)
+    }
+
+    fn handle_existing_group(
+        item_id: usize,
+        user_event: UserEvent,
+        group_manager: &mut SmallStateGroupManager,
+    ) -> Option<ServiceResult> {
+        if let Some((show, show_button, expanded, range)) = find_and_update_existing_group(
+            item_id, user_event, group_manager
+        ) {
+            // Get cached data for the group if it's the start of a group
+            let (summary_text, avatar_user_ids) = if show_button {
+                // Find the group and get its cached data
+                if let Some(group) = group_manager.small_state_groups.iter_mut().find(|g| g.range.start == item_id) {
+                    let summary = Some(group.get_summary().to_string());
+                    let avatars = Some(group.get_avatar_user_ids().to_vec());
+                    (summary, avatars)
+                } else {
+                    (None, None)
+                }
+            } else {
+                (None, None)
+            };
+            
+            Some((show, show_button, expanded, range, summary_text, avatar_user_ids))
+        } else {
+            None
+        }
+    }
+
+    fn create_new_group(
+        item_id: usize,
+        user_event: UserEvent,
+        next_item_is_small_state: bool,
+        group_manager: &mut SmallStateGroupManager,
+    ) -> Option<(bool, bool, bool, Range<usize>)> {
+        create_new_group_if_needed(item_id, user_event, next_item_is_small_state, group_manager)
+    }
+}
+
+/// Result of group state computation, containing all necessary data for rendering.
+#[derive(Debug)]
+pub struct GroupStateResult {
+    pub show: bool,
+    pub show_collapsible_button: bool,
+    pub expanded: bool,
+    pub to_redraw: Range<usize>,
+    pub summary_text: Option<String>,
+    pub avatar_user_ids: Option<Vec<OwnedUserId>>,
+}
+
+/// Type alias for complex service method return types.
+type ServiceResult = (bool, bool, bool, Range<usize>, Option<String>, Option<Vec<OwnedUserId>>);
+
 /// Combines neighboring transitions into compound actions, e.g. [Joined, Left] -> [JoinedAndLeft]
 fn merge_adjacent_transitions(transitions: &[TransitionType]) -> Vec<TransitionType> {
     let mut res = Vec::new();
@@ -533,6 +776,11 @@ fn get_effective_user_id(user_event: &UserEvent) -> OwnedUserId {
 /// The HashMap structure maps: user_id -> Vec<UserEvent>
 /// This simplified structure groups events by user ID, avoiding the complexity
 /// of maintaining timeline indices as keys.
+/// Appends a new user event to the given HashMap of user events and invalidates cache.
+/// 
+/// The HashMap structure maps: user_id -> Vec<UserEvent>
+/// This simplified structure groups events by user ID, avoiding the complexity
+/// of maintaining timeline indices as keys.
 fn append_user_event_to_map(
     user_event: UserEvent,
     user_events: &mut HashMap<OwnedUserId, Vec<UserEvent>>,
@@ -548,6 +796,17 @@ fn append_user_event_to_map(
     }
 }
 
+/// Appends a user event to a group and updates its cache.
+fn append_user_event_to_group(
+    user_event: UserEvent,
+    group: &mut SmallStateGroup,
+) {
+    append_user_event_to_map(user_event, &mut group.user_events_map);
+    // Invalidate cache since the group has been modified
+    group.cached_summary = None;
+    group.cached_avatar_user_ids = None;
+}
+
 /// Analyzes a timeline event to determine if it represents a small state change.
 ///
 /// # Arguments
@@ -652,21 +911,12 @@ pub fn generate_summary(
     summary_parts.join(", ")
 }
 
-/// Populates the avatar row with user avatars from the user events map.
-/// 
-/// # Arguments
-/// * `cx` - Makepad context
-/// * `avatar_row` - The avatar row widget to populate  
-/// * `room_id` - The room ID for avatar fetching
-/// * `user_events_map` - HashMap of user events to extract user IDs from
-/// * `max_avatars` - Maximum number of avatars to display
-fn populate_avatar_row_for_group(
-    cx: &mut Cx,
-    avatar_row: &WidgetRef,
-    room_id: &matrix_sdk::ruma::RoomId,
+/// Extracts and sorts user IDs from user events map for avatar display.
+/// This is the expensive computation part that should be cached.
+fn extract_avatar_user_ids(
     user_events_map: &HashMap<OwnedUserId, Vec<UserEvent>>,
     max_avatars: usize,
-) {
+) -> Vec<OwnedUserId> {
     // Extract user IDs from the map, sorted by their first event index for consistency
     let mut user_data: Vec<(OwnedUserId, usize)> = user_events_map
         .iter()
@@ -680,21 +930,30 @@ fn populate_avatar_row_for_group(
     user_data.sort_by_key(|(_, first_index)| *first_index);
     
     // Extract just the user IDs and limit to max_avatars
-    let user_ids: Vec<OwnedUserId> = user_data
+    user_data
         .into_iter()
         .take(max_avatars)
         .map(|(user_id, _)| user_id)
-        .collect();
-    
-    // Create a receipts map for the avatar row using the extracted user IDs
+        .collect()
+}
+
+/// Populates the avatar row with user avatars from pre-computed user IDs.
+/// This is now a lightweight operation that just creates the receipts map.
+fn populate_avatar_row_from_user_ids(
+    cx: &mut Cx,
+    avatar_row: &WidgetRef,
+    room_id: &matrix_sdk::ruma::RoomId,
+    user_ids: &[OwnedUserId],
+) {
+    // Create a receipts map for the avatar row using the provided user IDs
     let receipts_map: IndexMap<OwnedUserId, matrix_sdk::ruma::events::receipt::Receipt> = user_ids
-        .into_iter()
+        .iter()
         .map(|user_id| {
             // Create a simple receipt for display purposes
             let receipt = matrix_sdk::ruma::events::receipt::Receipt::new(
                 matrix_sdk::ruma::MilliSecondsSinceUnixEpoch::now()
             );
-            (user_id, receipt)
+            (user_id.clone(), receipt)
         })
         .collect();
     
@@ -821,45 +1080,60 @@ fn find_and_update_existing_group(
     user_event: UserEvent,
     group_manager: &mut SmallStateGroupManager,
 ) -> Option<(bool, bool, bool, Range<usize>)> {
-    let group_keys: Vec<Range<usize>> = group_manager
+    let _group_keys: Vec<Range<usize>> = group_manager
         .small_state_groups
         .iter()
         .map(|f| f.range.clone())
         .collect();
 
-    'outer: for SmallStateGroup { range, opened, user_events_map } in group_manager.small_state_groups.iter_mut() {
-        if range.start == item_id {
-            append_user_event_to_map(user_event, user_events_map);
-            return Some((true, range.len() > MIN_GROUP_SIZE_FOR_COLLAPSE, *opened, Range::default()));
+    // First check for direct matches or containment
+    for group in group_manager.small_state_groups.iter_mut() {
+        if group.range.start == item_id {
+            append_user_event_to_group(user_event, group);
+            return Some((true, group.range.len() > MIN_GROUP_SIZE_FOR_COLLAPSE, group.opened, Range::default()));
         }
         
-        if range.contains(&item_id) {
-            append_user_event_to_map(user_event, user_events_map);
+        if group.range.contains(&item_id) {
+            append_user_event_to_group(user_event, group);
             return Some((
-                *opened || range.len() <= MIN_GROUP_SIZE_FOR_COLLAPSE,
+                group.opened || group.range.len() <= MIN_GROUP_SIZE_FOR_COLLAPSE,
                 false,
-                *opened,
+                group.opened,
                 Range::default(),
             ));
         }
-
-        // Since we're iterating backwards (from highest to lowest item_id),
-        // check if we can extend an existing group backwards
-        if range.start == item_id + 1 {
-            for r in group_keys.iter() {
-                if r.contains(&item_id) {
-                    continue 'outer;
+    }
+    
+    // Check for backward extension (need separate loop to avoid borrow conflicts)
+    let group_ranges: Vec<Range<usize>> = group_manager
+        .small_state_groups
+        .iter()
+        .map(|g| g.range.clone())
+        .collect();
+    
+    for (idx, group) in group_manager.small_state_groups.iter_mut().enumerate() {
+        if group.range.start == item_id + 1 {
+            // Check if item_id is already covered by another group
+            let mut conflict = false;
+            for (other_idx, other_range) in group_ranges.iter().enumerate() {
+                if other_idx != idx && other_range.contains(&item_id) {
+                    conflict = true;
+                    break;
                 }
             }
-            // Extend this group backwards to include current item
-            *range = item_id..range.end;
-            append_user_event_to_map(user_event, user_events_map);
-            return Some((
-                *opened || range.len() <= MIN_GROUP_SIZE_FOR_COLLAPSE,
-                false,
-                false,
-                range.clone(),
-            ));
+            
+            if !conflict {
+                // Extend this group backwards to include current item
+                let old_end = group.range.end;
+                group.range = item_id..old_end;
+                append_user_event_to_group(user_event, group);
+                return Some((
+                    group.opened || group.range.len() <= MIN_GROUP_SIZE_FOR_COLLAPSE,
+                    false,
+                    false,
+                    item_id..old_end,
+                ));
+            }
         }
     }
     
@@ -878,11 +1152,18 @@ fn create_new_group_if_needed(
         let mut user_events_map = HashMap::new();
         append_user_event_to_map(user_event, &mut user_events_map);
         
-        group_manager.small_state_groups.push(SmallStateGroup {
+        let mut new_group = SmallStateGroup {
             range: item_id..(item_id + 2), // Plus 2 to include the next item into the group
             opened: false,
             user_events_map,
-        });
+            cached_summary: None,
+            cached_avatar_user_ids: None,
+        };
+        
+        // Pre-compute cache for the new group
+        new_group.update_cached_data();
+        
+        group_manager.small_state_groups.push(new_group);
         
         return Some((false, false, false, item_id..(item_id + 2)));
     }
@@ -890,12 +1171,7 @@ fn create_new_group_if_needed(
 }
 
 /// Determines how to render a timeline item based on small state group logic.
-///
-/// This function is called during timeline rendering to build groups on-demand.
-/// Since iteration starts from the highest item_id and goes backwards, we handle reverse grouping.
-/// Returns a tuple whether to display the message, and whether to display the collapsible button and whether collapsible list is expanded and range to redraw
-/// This is required as unexpanded first item in the group needs to display only the header and not the body.
-/// This case will return (true, true, false, Range::default()).
+/// This is now a thin wrapper around the TimelineGroupService.
 pub fn determine_item_group_state(
     item_id: usize,
     username: String,
@@ -904,57 +1180,36 @@ pub fn determine_item_group_state(
     next_item: Option<&Arc<TimelineItem>>,
     group_manager: &mut SmallStateGroupManager,
 ) -> (bool, bool, bool, Range<usize>) {
-    // Check if this is a small state event and get context about neighboring items
-    let (current_item_is_small_state, previous_item_is_small_state, next_item_is_small_state, display_name) = 
-        analyze_grouping_context(current_item, previous_item, next_item);
-    
-    if !current_item_is_small_state {
-        return (true, false, false, Range::default()); // Not a small state event, draw as individual item
-    }
-
-    if !previous_item_is_small_state && !next_item_is_small_state {
-        return (true, false, false, Range::default()); // Isolated small state event, no collapsible button
-    }
-
-    // Handle room creation events as a special case
-    if let Some(result) = process_room_creation_event(item_id, current_item, group_manager) {
-        return result;
-    }
-
-    // Set username for creation collapsible list and create user event
-    group_manager.creation_collapsible_list.username = username.clone();
-    let user_event = convert_to_timeline_event(
-        current_item,
-        display_name.clone().unwrap_or(username.clone()),
+    let result = TimelineGroupService::compute_item_group_state(
         item_id,
-        None, // TODO: Pass actual sender profile when available
-    );
-
-    // Handle creation collapsible list logic
-    if let Some(result) = process_room_setup_events(item_id, &user_event, group_manager) {
-        return result;
-    }
-
-    // Try to find and update existing groups
-    if let Some(result) = find_and_update_existing_group(item_id, user_event, group_manager) {
-        return result;
-    }
-
-    // Recreate user_event for the remaining cases since it was moved
-    let user_event = convert_to_timeline_event(
+        username,
         current_item,
-        display_name.unwrap_or(username),
-        item_id,
-        None,
+        previous_item,
+        next_item,
+        group_manager,
     );
+    
+    (result.show, result.show_collapsible_button, result.expanded, result.to_redraw)
+}
 
-    // Create new group if needed
-    if let Some(result) = create_new_group_if_needed(item_id, user_event, next_item_is_small_state, group_manager) {
-        return result;
-    }
-
-    // Default return - collapsed state, no collapsible button
-    (false, false, false, Range::default())
+/// New service-based API that returns rich group state information.
+/// This should be preferred over the basic determine_item_group_state function.
+pub fn compute_timeline_item_group_state(
+    item_id: usize,
+    username: String,
+    current_item: &EventTimelineItem,
+    previous_item: Option<&Arc<TimelineItem>>,
+    next_item: Option<&Arc<TimelineItem>>,
+    group_manager: &mut SmallStateGroupManager,
+) -> GroupStateResult {
+    TimelineGroupService::compute_item_group_state(
+        item_id,
+        username,
+        current_item,
+        previous_item,
+        next_item,
+        group_manager,
+    )
 }
 
 /// Handles item_id changes during backward pagination by shifting indices in small state groups
@@ -973,6 +1228,7 @@ pub fn handle_backward_pagination_index_shift(
         range,
         user_events_map,
         opened: _,
+        ..
     } in &mut group_manager.small_state_groups
     {
         let new_start = (range.start as i32 + shift).max(0) as usize;
@@ -1008,7 +1264,7 @@ pub fn handle_backward_pagination_index_shift(
 /// * `opened` - Whether this individual item should be rendered (based on group state)
 /// * `show_collapsible_button` - True if this item is the first in a collapsible group
 /// * `expanded` - Current expansion state of the group (for button text)
-/// * `group_manager` - Reference to the small state group manager
+/// * `group_manager` - Mutable reference to the small state group manager (for cache updates)
 /// * `room_id` - The room ID for avatar fetching
 pub fn render_small_state_event_group_logic(
     cx: &mut Cx,
@@ -1017,7 +1273,7 @@ pub fn render_small_state_event_group_logic(
     opened: bool,
     show_collapsible_button: bool,
     expanded: bool,
-    group_manager: &SmallStateGroupManager,
+    group_manager: &mut SmallStateGroupManager,
     room_id: &matrix_sdk::ruma::RoomId,
 ) {
     // Render logic based on group state
@@ -1041,15 +1297,8 @@ pub fn render_small_state_event_group_logic(
                 
                 // For creation groups, show only the creator's avatar
                 if let Some((creator_id, _)) = &group_manager.room_creation {
-                    let mut creator_map = HashMap::new();
-                    creator_map.insert(creator_id.clone(), vec![]); // Empty events, just for avatar display
-                    populate_avatar_row_for_group(
-                        cx,
-                        item,
-                        room_id,
-                        &creator_map,
-                        1 // Only show creator
-                    );
+                    let creator_ids = vec![creator_id.clone()];
+                    populate_avatar_row_from_user_ids(cx, item, room_id, &creator_ids);
                 }
                 
                 item.label(ids!(small_state_header.summary_text))
@@ -1057,29 +1306,21 @@ pub fn render_small_state_event_group_logic(
                 item.view(ids!(body)).set_visible(cx, false);
                 return;
             }
-            for SmallStateGroup {
-                range,
-                opened: _,
-                user_events_map,
-            } in &group_manager.small_state_groups
-            {
-                if range.start == item_id {
-                    // Pass HashMap directly to generate_summary
-                    let summary_text = generate_summary(user_events_map, 4);
+            // Find the group and use cached data for rendering
+            for group in &mut group_manager.small_state_groups {
+                if group.range.start == item_id {
                     item.view(ids!(small_state_header)).set_visible(cx, true);
                     
-                    // Populate avatar row with users from this group
-                    populate_avatar_row_for_group(
-                        cx,
-                        item, 
-                        room_id, 
-                        user_events_map, 
-                        MAX_VISIBLE_AVATARS_IN_READ_RECEIPT
-                    );
+                    // Use cached summary text (compute if not cached)
+                    let summary_text = group.get_summary();
+                    item.label(ids!(small_state_header.summary_text))
+                        .set_text(cx, summary_text);
+                    
+                    // Use cached avatar user IDs for lightweight avatar population
+                    let avatar_user_ids = group.get_avatar_user_ids();
+                    populate_avatar_row_from_user_ids(cx, item, room_id, avatar_user_ids);
                     
                     item.view(ids!(body)).set_visible(cx, false);
-                    item.label(ids!(small_state_header.summary_text))
-                        .set_text(cx, &summary_text);
                     break;
                 }
             }
@@ -1141,7 +1382,7 @@ pub fn handle_collapsible_button_click(
     }
 
     if !is_creation_group {
-        for SmallStateGroup { range, opened, user_events_map: _ } in &mut group_manager.small_state_groups {
+        for SmallStateGroup { range, opened, .. } in &mut group_manager.small_state_groups {
             if range.start == item_id {
                 // Toggle the group's open/closed state
                 *opened = !*opened;

From e9869d4540ac95e07310a480f9cdf148182aa083 Mon Sep 17 00:00:00 2001
From: alanpoon <brightshadowx@gmail.com>
Date: Thu, 25 Dec 2025 19:57:33 +0800
Subject: [PATCH 18/26] SmallStateGroup improvement

---
 src/home/room_screen.rs               |   46 +-
 src/home/small_state_group_manager.rs | 1179 ++++++++++++-------------
 2 files changed, 561 insertions(+), 664 deletions(-)

diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs
index e2165646..05b6e730 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -26,7 +26,7 @@ use matrix_sdk_ui::timeline::{
 };
 
 use crate::{
-    app::AppStateAction, avatar_cache, event_preview::{plaintext_body_of_timeline_item, text_preview_of_encrypted_message, text_preview_of_member_profile_change, text_preview_of_other_message_like, text_preview_of_other_state, text_preview_of_redacted_message, text_preview_of_room_membership_change, text_preview_of_timeline_item}, home::{edited_indicator::EditedIndicatorWidgetRefExt, link_preview::{LinkPreviewCache, LinkPreviewRef, LinkPreviewWidgetRefExt}, loading_pane::{LoadingPaneState, LoadingPaneWidgetExt}, small_state_group_manager::{handle_backward_pagination_index_shift, handle_collapsible_button_click, render_small_state_event_group_logic, SmallStateGroupManager, determine_item_group_state}, rooms_list::RoomsListRef, tombstone_footer::SuccessorRoomDetails}, media_cache::{MediaCache, MediaCacheEntry}, profile::{
+    app::AppStateAction, avatar_cache, event_preview::{plaintext_body_of_timeline_item, text_preview_of_encrypted_message, text_preview_of_member_profile_change, text_preview_of_other_message_like, text_preview_of_other_state, text_preview_of_redacted_message, text_preview_of_room_membership_change, text_preview_of_timeline_item}, home::{edited_indicator::EditedIndicatorWidgetRefExt, link_preview::{LinkPreviewCache, LinkPreviewRef, LinkPreviewWidgetRefExt}, loading_pane::{LoadingPaneState, LoadingPaneWidgetExt}, rooms_list::RoomsListRef, small_state_group_manager::{CollapsibleButton, SmallStateGroupManager, handle_backward_pagination_index_shift, handle_collapsible_button_click}, tombstone_footer::SuccessorRoomDetails}, media_cache::{MediaCache, MediaCacheEntry}, profile::{
         user_profile::{AvatarState, ShowUserProfileAction, UserProfile, UserProfileAndRoomId, UserProfilePaneInfo, UserProfileSlidingPaneRef, UserProfileSlidingPaneWidgetExt},
         user_profile_cache,
     },
@@ -1007,7 +1007,6 @@ impl Widget for RoomScreen {
                                     poll_state,
                                     item_drawn_status,
                                     &mut tl_state.group_manager,
-                                    &mut tl_state.content_drawn_since_last_update,
                                 ),
                                 MsgLikeKind::Redacted => populate_small_state_event(
                                     cx,
@@ -1019,7 +1018,6 @@ impl Widget for RoomScreen {
                                     &RedactedMessageEventMarker,
                                     item_drawn_status,
                                     &mut tl_state.group_manager,
-                                    &mut tl_state.content_drawn_since_last_update,
                                 ),
                                 MsgLikeKind::UnableToDecrypt(utd) => populate_small_state_event(
                                     cx,
@@ -1031,7 +1029,6 @@ impl Widget for RoomScreen {
                                     utd,
                                     item_drawn_status,
                                     &mut tl_state.group_manager,
-                                    &mut tl_state.content_drawn_since_last_update,
                                 ),
                                 MsgLikeKind::Other(other) => populate_small_state_event(
                                     cx,
@@ -1043,7 +1040,6 @@ impl Widget for RoomScreen {
                                     other,
                                     item_drawn_status,
                                     &mut tl_state.group_manager,
-                                    &mut tl_state.content_drawn_since_last_update,
                                 ),
                             },
                             TimelineItemContent::MembershipChange(membership_change) => populate_small_state_event(
@@ -1056,7 +1052,6 @@ impl Widget for RoomScreen {
                                 membership_change,
                                 item_drawn_status,
                                 &mut tl_state.group_manager,
-                                &mut tl_state.content_drawn_since_last_update,
                             ),
                             TimelineItemContent::ProfileChange(profile_change) => populate_small_state_event(
                                 cx,
@@ -1068,7 +1063,6 @@ impl Widget for RoomScreen {
                                 profile_change,
                                 item_drawn_status,
                                 &mut tl_state.group_manager,
-                                &mut tl_state.content_drawn_since_last_update,
                             ),
                             TimelineItemContent::OtherState(other) => populate_small_state_event(
                                 cx,
@@ -1080,7 +1074,6 @@ impl Widget for RoomScreen {
                                 other,
                                 item_drawn_status,
                                 &mut tl_state.group_manager,
-                                &mut tl_state.content_drawn_since_last_update,
                             ),
                             unhandled => {
                                 let item = list.item(cx, item_id, id!(SmallStateEvent));
@@ -3269,6 +3262,7 @@ fn populate_message_view(
                 .show_with_state(cx, tsp_sign_state);
         }
     }
+
     (item, new_drawn_status)
 }
 
@@ -3967,7 +3961,6 @@ fn populate_small_state_event(
     event_content: &impl SmallStateEventContent,
     item_drawn_status: ItemDrawnStatus,
     group_manager: &mut SmallStateGroupManager,
-    content_drawn_since_last_update: &mut RangeSet<usize>,
 ) -> (WidgetRef, ItemDrawnStatus) {
     let prev_event = item_id.checked_sub(1).and_then(|i| tl_items.get(i));
     let next_event = item_id.checked_add(1).and_then(|i| tl_items.get(i));
@@ -4011,18 +4004,22 @@ fn populate_small_state_event(
     // - show: whether this individual item should be rendered (based on group state)
     // - show_collapsible_button: true if this item is the first in a collapsible group
     // - expanded: current expansion state of the group (for button text)
-    let (show, show_collapsible_button, expanded, to_redraw) = determine_item_group_state(
-        item_id,
+    let user_event = crate::home::small_state_group_manager::convert_event_tl_item_to_user_event(event_tl_item, item_id);
+    let is_previous_small_state = crate::home::small_state_group_manager::is_small_state(prev_event);
+    let is_next_small_state = crate::home::small_state_group_manager::is_small_state(next_event);
+
+    let result = group_manager.compute_group_state(
         username.clone(),
-        event_tl_item,
-        prev_event,
-        next_event,
-        group_manager,
+        &user_event,
+        is_previous_small_state,
+        is_next_small_state,
     );
+
+    let (show, collapsible_button) = (result.show, result.collapsible_button);
     // Only show the collapsible button on the first item of each group
     item.button(ids!(collapsible_button))
-        .set_visible(cx, show_collapsible_button);
-    let (item, mut new_drawn_status) = event_content.populate_item_content(
+        .set_visible(cx, collapsible_button != CollapsibleButton::None);
+    let (item, new_drawn_status) = event_content.populate_item_content(
         cx,
         list,
         item_id,
@@ -4033,24 +4030,15 @@ fn populate_small_state_event(
         new_drawn_status,
     );
     // Handle rendering logic for group state using centralized function
-    render_small_state_event_group_logic(
+    group_manager.render_collapsible_button_and_body(
         cx,
         &item,
         item_id,
         show,
-        show_collapsible_button,
-        expanded,
-        group_manager,
+        collapsible_button,
         room_id,
     );
-    
-    // Handle redraw logic for group changes
-    if !to_redraw.is_empty() && to_redraw.end > to_redraw.start {
-        content_drawn_since_last_update.remove(to_redraw.clone());
-        if to_redraw.contains(&item_id) {
-            new_drawn_status.content_drawn = false; // Force redraw if part of a group that changed
-        }
-    }
+
     (item, new_drawn_status)
 }
 
diff --git a/src/home/small_state_group_manager.rs b/src/home/small_state_group_manager.rs
index 81288be1..fbd84687 100644
--- a/src/home/small_state_group_manager.rs
+++ b/src/home/small_state_group_manager.rs
@@ -1,8 +1,7 @@
 use makepad_widgets::*;
-use matrix_sdk::ruma::{events::FullStateEventContent, OwnedEventId, OwnedUserId, UserId};
+use matrix_sdk::ruma::{OwnedEventId, OwnedUserId, UserId};
 use matrix_sdk_ui::timeline::{
-    AnyOtherFullStateEventContent, EventTimelineItem, MembershipChange, MsgLikeContent,
-    MsgLikeKind, TimelineItem, TimelineItemContent, TimelineItemKind,
+    AnyOtherFullStateEventContent, EventTimelineItem, MembershipChange, MsgLikeContent, MsgLikeKind, TimelineItem, TimelineItemContent, TimelineItemKind
 };
 use rangemap::RangeSet;
 use std::{collections::HashMap, ops::Range, sync::Arc};
@@ -10,7 +9,9 @@ use indexmap::IndexMap;
 
 use crate::home::room_read_receipt::{AvatarRowWidgetRefExt, MAX_VISIBLE_AVATARS_IN_READ_RECEIPT};
 
+// Minimum number of sequential small state events to collapse 
 const MIN_GROUP_SIZE_FOR_COLLAPSE: usize = 3;
+// Maximum number of user names to display before coalescing
 const SUMMARY_LENGTH: usize = 4;
 
 live_design! {
@@ -28,6 +29,7 @@ live_design! {
         flow: Right,
         align: { y: 0.5 }
         spacing: 7.0
+
         user_event_avatar_row = <AvatarRow> {
             margin: { left: 10.0 },
         }
@@ -44,6 +46,7 @@ live_design! {
                 color: (SMALL_STATE_TEXT_COLOR)
             }
         }
+
         // Collapsible button for small state event groups
         // Shows on the first item of each group to toggle expansion
         // Text is dynamically updated: ▶ (collapsed) or ▼ (expanded)
@@ -118,8 +121,195 @@ pub struct SmallStateGroupManager {
     pub small_state_groups: Vec<SmallStateGroup>,
 }
 
+impl SmallStateGroupManager {
+    /// Analyzes a timeline item and determines its grouping behavior.
+    /// 
+    /// Returns computed group state result without performing UI operations.
+    pub fn compute_group_state(
+        &mut self,
+        username: String,
+        current_item: &UserEvent,
+        previous_item_is_small_state: bool,
+        next_item_is_small_state: bool,
+    ) -> GroupStateResult {
+        if !previous_item_is_small_state && !next_item_is_small_state {
+            return GroupStateResult {
+                show: true,
+                collapsible_button: CollapsibleButton::None,
+                summary_text: None,
+                avatar_user_ids: None,
+            };
+        }
+
+        // Handle room creation events as a special case
+        if let Some((show, collapsible_button)) = process_room_creation_event(
+            current_item, previous_item_is_small_state, self
+        ) {
+            let summary_text = if collapsible_button != CollapsibleButton::None {
+                Some(format!(
+                    "{} created and configured the room",
+                    self.creation_collapsible_list.username
+                ))
+            } else {
+                None
+            };
+            let avatar_user_ids = if let Some((creator_id, _)) = &self.room_creation {
+                Some(vec![creator_id.clone()])
+            } else {
+                None
+            };
+            
+            return GroupStateResult {
+                show: show || !previous_item_is_small_state,
+                collapsible_button,
+                summary_text,
+                avatar_user_ids,
+            };
+        }
+
+        // Set username for creation collapsible list and create user event
+        self.creation_collapsible_list.username = username.clone();
+
+        // Handle creation collapsible list logic
+        if let Some((show, collapsible_button)) = process_room_setup_events(
+            current_item, self
+        ) {
+            return GroupStateResult {
+                show,
+                collapsible_button,
+                summary_text: None,
+                avatar_user_ids: None,
+            };
+        }
+
+        // Try to find and update existing groups
+        if let Some((show, collapsible_button)) = find_and_update_existing_group(
+            current_item, self, previous_item_is_small_state
+        ) {
+            // Get cached data for the group if it's the start of a group
+            let (summary_text, avatar_user_ids) = if collapsible_button != CollapsibleButton::None {
+                // Find the group and get its cached data
+                if let Some(group) = self.small_state_groups.iter_mut().find(|g| g.range.start == current_item.index) {
+                    let summary = Some(group.get_summary().to_string());
+                    let avatars = Some(group.get_avatar_user_ids().to_vec());
+                    (summary, avatars)
+                } else {
+                    (None, None)
+                }
+            } else {
+                (None, None)
+            };
+            
+            return GroupStateResult {
+                show,
+                collapsible_button,
+                summary_text,
+                avatar_user_ids,
+            };
+        }
+
+        // Create new group if needed
+        if let Some((show, collapsible_button)) = create_new_group_if_needed(
+        current_item, previous_item_is_small_state,next_item_is_small_state, self
+        ) {
+            return GroupStateResult {
+                show,
+                collapsible_button,
+                summary_text: None,
+                avatar_user_ids: None,
+            };
+        }
+        // Default return - collapsed state, no collapsible button
+        GroupStateResult {
+            show: true,
+            collapsible_button: CollapsibleButton::None,
+            summary_text: None,
+            avatar_user_ids: None,
+        }
+    }
+
+    /// Handles the rendering logic for small state events based on their group state.
+    /// This function manages visibility, collapsible button states, and summary text display
+    /// for timeline items that are part of collapsible groups.
+    ///
+    /// # Arguments
+    /// * `cx` - Makepad context for UI operations
+    /// * `item` - The widget reference for the timeline item
+    /// * `item_id` - The index of this item in the timeline
+    /// * `opened` - Whether this individual item should be rendered (based on group state)
+    /// * `collapsible_button` - Collapsible button state for this item
+    /// * `room_id` - The room ID for avatar fetching
+    pub fn render_collapsible_button_and_body(
+        &mut self,
+        cx: &mut Cx,
+        item: &WidgetRef,
+        item_id: usize,
+        opened: bool,
+        collapsible_button: CollapsibleButton,
+        room_id: &matrix_sdk::ruma::RoomId,
+    ) {
+        // Render logic based on group state
+        if opened {
+            // This item should be visible - set appropriate button text if this is a group leader
+            if collapsible_button != CollapsibleButton::None {
+                // Update button text to show current group state:
+                // ▶ = group is expanded (click to collapse)
+                // ▼ = group is collapsed (click to expand)
+                let button_text = if collapsible_button == CollapsibleButton::Expanded { "▼" } else { "▶" };
+                item.button(ids!(collapsible_button))
+                    .set_text(cx, button_text);
+                if self.room_creation.is_some()
+                    && self.creation_collapsible_list.range.start == item_id
+                {
+                    let summary_text = format!(
+                        "{} created and configured the room",
+                        self.creation_collapsible_list.username
+                    );
+                    item.view(ids!(small_state_header)).set_visible(cx, true);
+                    
+                    // For creation groups, show only the creator's avatar
+                    if let Some((creator_id, _)) = &self.room_creation {
+                        let creator_ids = vec![creator_id.clone()];
+                        populate_avatar_row_from_user_ids(cx, item, room_id, &creator_ids);
+                    }
+                    
+                    item.label(ids!(small_state_header.summary_text))
+                        .set_text(cx, &summary_text);
+                    item.view(ids!(body)).set_visible(cx, false);
+                    return;
+                }
+                // Find the group and use cached data for rendering
+                for group in &mut self.small_state_groups {
+                    if group.range.start == item_id {
+                        item.view(ids!(small_state_header)).set_visible(cx, true);
+                        
+                        // Use cached summary text (compute if not cached)
+                        let summary_text = group.get_summary();
+                        item.label(ids!(small_state_header.summary_text))
+                            .set_text(cx, summary_text);
+                        
+                        // Use cached avatar user IDs for lightweight avatar population
+                        let avatar_user_ids = group.get_avatar_user_ids();
+                        populate_avatar_row_from_user_ids(cx, item, room_id, avatar_user_ids);
+                        
+                        item.view(ids!(body)).set_visible(cx, false);
+                        break;
+                    }
+                }
+                item.view(ids!(body)).set_visible(cx, collapsible_button == CollapsibleButton::Expanded);
+            } else {
+                item.view(ids!(small_state_header)).set_visible(cx, false);
+                item.view(ids!(body)).set_visible(cx, true);
+            }
+        } else {
+            item.view(ids!(small_state_header)).set_visible(cx, false);
+            item.view(ids!(body)).set_visible(cx, false);
+        }
+    }
+}
+/// Represent Small state type.
 #[derive(Default, Debug, Clone, Copy, PartialEq, Eq, PartialOrd, Ord, Hash)]
-pub enum TransitionType {
+pub enum SmallStateType {
     CreateRoom,
     ConfigureRoom,
     Joined,
@@ -143,15 +333,90 @@ pub enum TransitionType {
     HiddenEvent,
 }
 
-#[derive(Debug, Clone)]
+impl From<MembershipChange> for SmallStateType {
+    fn from(change: MembershipChange) -> Self {
+        use matrix_sdk_ui::timeline::MembershipChange;
+        match change {
+            MembershipChange::Joined => SmallStateType::Joined,
+            MembershipChange::Left => SmallStateType::Left,
+            MembershipChange::Banned => SmallStateType::Banned,
+            MembershipChange::Unbanned => SmallStateType::Unbanned,
+            MembershipChange::Kicked => SmallStateType::Kicked,
+            MembershipChange::Invited => SmallStateType::Invited,
+            MembershipChange::KickedAndBanned => SmallStateType::Banned,
+            MembershipChange::InvitationAccepted => SmallStateType::Joined,
+            MembershipChange::InvitationRejected => SmallStateType::InvitationRejected,
+            MembershipChange::InvitationRevoked => SmallStateType::InvitationRevoked,
+            MembershipChange::Knocked => SmallStateType::HiddenEvent,
+            MembershipChange::KnockAccepted => SmallStateType::Joined,
+            MembershipChange::KnockRetracted => SmallStateType::HiddenEvent,
+            MembershipChange::None => SmallStateType::NoChange,
+            MembershipChange::Error => SmallStateType::NoChange,
+            MembershipChange::NotImplemented => SmallStateType::NoChange,
+            MembershipChange::KnockDenied => SmallStateType::HiddenEvent,
+        }
+    }
+}
+
+impl From<&AnyOtherFullStateEventContent> for SmallStateType {
+    fn from(content: &AnyOtherFullStateEventContent) -> Self {
+        match content {
+            AnyOtherFullStateEventContent::RoomServerAcl(_) => SmallStateType::ServerAcl,
+            AnyOtherFullStateEventContent::RoomCreate(_) => SmallStateType::CreateRoom,
+            AnyOtherFullStateEventContent::_Custom { .. } => SmallStateType::HiddenEvent,
+            // All other room state events are configuration changes
+            _ => SmallStateType::ConfigureRoom,
+        }
+    }
+}
+
+impl From<&TimelineItemContent> for SmallStateType {
+    fn from(content: &TimelineItemContent) -> Self {
+        use matrix_sdk_ui::timeline::TimelineItemContent;
+        match content {
+            TimelineItemContent::MembershipChange(change) => {
+                change.change()
+                    .map(SmallStateType::from)
+                    .unwrap_or_default()
+            }
+            TimelineItemContent::ProfileChange(change) => {
+                match (change.avatar_url_change(), change.displayname_change()) {
+                    (Some(_), _) => SmallStateType::ChangedAvatar,
+                    (None, Some(_)) => SmallStateType::ChangedName,
+                    _ => SmallStateType::NoChange,
+                }
+            }
+            TimelineItemContent::OtherState(other_state) => {
+                SmallStateType::from(other_state.content())
+            }
+            TimelineItemContent::MsgLike(MsgLikeContent { kind, .. }) => {
+                match kind {
+                    MsgLikeKind::Poll(_) => SmallStateType::NoChange,
+                    MsgLikeKind::Redacted => SmallStateType::MessageRemoved,
+                    MsgLikeKind::UnableToDecrypt(_) => SmallStateType::UnableToDecrypt,
+                    _ => SmallStateType::NoChange,
+                }
+            }
+            _ => SmallStateType::NoChange,
+        }
+    }
+}
+
+/// Condensed version of a `EventTimelineItem`, used for generating summaries.
+#[derive(Debug, Clone, Default)]
 pub struct UserEvent {
-    pub transition: TransitionType,
+    /// The transition type
+    pub transition: SmallStateType,
+    /// The index of the event in the timeline
     pub index: usize,
-    pub sender: OwnedUserId,
+    /// The sender of the event
+    pub sender: Option<OwnedUserId>,
+    /// The display name of the sender
     pub display_name: String,
+    /// The state key of the event
     pub state_key: Option<String>,
-    pub membership: Option<String>,
-    pub sender_profile: Option<crate::profile::user_profile::UserProfile>,
+    /// The ID of the event
+    pub event_id: Option<OwnedEventId>,
 }
 
 /// State for the creation collapsible list
@@ -174,6 +439,7 @@ impl Default for CreationCollapsibleList {
 
 impl SmallStateGroup {
     /// Computes and caches the summary text and avatar user IDs for this group.
+    /// 
     /// This should be called whenever the group's user_events_map is modified.
     pub fn update_cached_data(&mut self) {
         // Cache the summary text
@@ -200,214 +466,32 @@ impl SmallStateGroup {
     }
 }
 
-/// Timeline grouping service that separates business logic from UI rendering.
-/// This service handles all timeline grouping computations and maintains caching.
-pub struct TimelineGroupService;
-
-impl TimelineGroupService {
-    /// Analyzes a timeline item and determines its grouping behavior.
-    /// Returns computed group state without performing UI operations.
-    pub fn compute_item_group_state(
-        item_id: usize,
-        username: String,
-        current_item: &EventTimelineItem,
-        previous_item: Option<&Arc<TimelineItem>>,
-        next_item: Option<&Arc<TimelineItem>>,
-        group_manager: &mut SmallStateGroupManager,
-    ) -> GroupStateResult {
-        let (current_item_is_small_state, previous_item_is_small_state, next_item_is_small_state, display_name) = 
-            analyze_grouping_context(current_item, previous_item, next_item);
-        
-        if !current_item_is_small_state {
-            return GroupStateResult {
-                show: true,
-                show_collapsible_button: false,
-                expanded: false,
-                to_redraw: Range::default(),
-                summary_text: None,
-                avatar_user_ids: None,
-            };
-        }
-
-        if !previous_item_is_small_state && !next_item_is_small_state {
-            return GroupStateResult {
-                show: true,
-                show_collapsible_button: false,
-                expanded: false,
-                to_redraw: Range::default(),
-                summary_text: None,
-                avatar_user_ids: None,
-            };
-        }
-
-        // Handle room creation events as a special case
-        if let Some((show, show_button, expanded, range)) = Self::process_room_creation(
-            item_id, current_item, group_manager
-        ) {
-            let summary_text = if show_button {
-                Some(format!(
-                    "{} created and configured the room",
-                    group_manager.creation_collapsible_list.username
-                ))
-            } else {
-                None
-            };
-            let avatar_user_ids = if let Some((creator_id, _)) = &group_manager.room_creation {
-                Some(vec![creator_id.clone()])
-            } else {
-                None
-            };
-            
-            return GroupStateResult {
-                show,
-                show_collapsible_button: show_button,
-                expanded,
-                to_redraw: range,
-                summary_text,
-                avatar_user_ids,
-            };
-        }
-
-        // Set username for creation collapsible list and create user event
-        group_manager.creation_collapsible_list.username = username.clone();
-        let user_event = convert_to_timeline_event(
-            current_item,
-            display_name.clone().unwrap_or(username.clone()),
-            item_id,
-            None,
-        );
-
-        // Handle creation collapsible list logic
-        if let Some((show, show_button, expanded, range)) = Self::process_room_setup(
-            item_id, &user_event, group_manager
-        ) {
-            return GroupStateResult {
-                show,
-                show_collapsible_button: show_button,
-                expanded,
-                to_redraw: range,
-                summary_text: None,
-                avatar_user_ids: None,
-            };
-        }
-
-        // Try to find and update existing groups
-        if let Some((show, show_button, expanded, range, summary, avatars)) = Self::handle_existing_group(
-            item_id, user_event, group_manager
-        ) {
-            return GroupStateResult {
-                show,
-                show_collapsible_button: show_button,
-                expanded,
-                to_redraw: range,
-                summary_text: summary,
-                avatar_user_ids: avatars,
-            };
-        }
-
-        // Recreate user_event for the remaining cases since it was moved
-        let user_event = convert_to_timeline_event(
-            current_item,
-            display_name.unwrap_or(username),
-            item_id,
-            None,
-        );
-
-        // Create new group if needed
-        if let Some((show, show_button, expanded, range)) = Self::create_new_group(
-            item_id, user_event, next_item_is_small_state, group_manager
-        ) {
-            return GroupStateResult {
-                show,
-                show_collapsible_button: show_button,
-                expanded,
-                to_redraw: range,
-                summary_text: None,
-                avatar_user_ids: None,
-            };
-        }
-
-        // Default return - collapsed state, no collapsible button
-        GroupStateResult {
-            show: false,
-            show_collapsible_button: false,
-            expanded: false,
-            to_redraw: Range::default(),
-            summary_text: None,
-            avatar_user_ids: None,
-        }
-    }
-
-    fn process_room_creation(
-        item_id: usize,
-        current_item: &EventTimelineItem,
-        group_manager: &mut SmallStateGroupManager,
-    ) -> Option<(bool, bool, bool, Range<usize>)> {
-        process_room_creation_event(item_id, current_item, group_manager)
-    }
-
-    fn process_room_setup(
-        item_id: usize,
-        user_event: &UserEvent,
-        group_manager: &mut SmallStateGroupManager,
-    ) -> Option<(bool, bool, bool, Range<usize>)> {
-        process_room_setup_events(item_id, user_event, group_manager)
-    }
-
-    fn handle_existing_group(
-        item_id: usize,
-        user_event: UserEvent,
-        group_manager: &mut SmallStateGroupManager,
-    ) -> Option<ServiceResult> {
-        if let Some((show, show_button, expanded, range)) = find_and_update_existing_group(
-            item_id, user_event, group_manager
-        ) {
-            // Get cached data for the group if it's the start of a group
-            let (summary_text, avatar_user_ids) = if show_button {
-                // Find the group and get its cached data
-                if let Some(group) = group_manager.small_state_groups.iter_mut().find(|g| g.range.start == item_id) {
-                    let summary = Some(group.get_summary().to_string());
-                    let avatars = Some(group.get_avatar_user_ids().to_vec());
-                    (summary, avatars)
-                } else {
-                    (None, None)
-                }
-            } else {
-                (None, None)
-            };
-            
-            Some((show, show_button, expanded, range, summary_text, avatar_user_ids))
-        } else {
-            None
-        }
-    }
-
-    fn create_new_group(
-        item_id: usize,
-        user_event: UserEvent,
-        next_item_is_small_state: bool,
-        group_manager: &mut SmallStateGroupManager,
-    ) -> Option<(bool, bool, bool, Range<usize>)> {
-        create_new_group_if_needed(item_id, user_event, next_item_is_small_state, group_manager)
-    }
-}
 
 /// Result of group state computation, containing all necessary data for rendering.
 #[derive(Debug)]
 pub struct GroupStateResult {
+    /// Whether to show this item in the timeline
+    /// 
+    /// This is always `true` for item that is first in a collapsible group.
+    /// This is `false` for items under collapsed groups. 
     pub show: bool,
-    pub show_collapsible_button: bool,
-    pub expanded: bool,
-    pub to_redraw: Range<usize>,
+    /// Whether to show the collapsible button
+    /// 
+    /// This is always `false` for items that are not the first in a collapsible group.
+    pub collapsible_button: CollapsibleButton,
     pub summary_text: Option<String>,
     pub avatar_user_ids: Option<Vec<OwnedUserId>>,
 }
 
-/// Type alias for complex service method return types.
-type ServiceResult = (bool, bool, bool, Range<usize>, Option<String>, Option<Vec<OwnedUserId>>);
-
+#[derive(Debug, Default, Clone, Copy, PartialEq)]
+pub enum CollapsibleButton {
+    Expanded,
+    Collapsed,
+    #[default]
+    None
+}
 /// Combines neighboring transitions into compound actions, e.g. [Joined, Left] -> [JoinedAndLeft]
-fn merge_adjacent_transitions(transitions: &[TransitionType]) -> Vec<TransitionType> {
+fn merge_adjacent_transitions(transitions: &[SmallStateType]) -> Vec<SmallStateType> {
     let mut res = Vec::new();
     let mut i = 0;
     while i < transitions.len() {
@@ -415,13 +499,13 @@ fn merge_adjacent_transitions(transitions: &[TransitionType]) -> Vec<TransitionT
         if i + 1 < transitions.len() {
             let t2 = transitions[i + 1];
             match (t, t2) {
-                (TransitionType::Joined, TransitionType::Left) => {
-                    res.push(TransitionType::JoinedAndLeft);
+                (SmallStateType::Joined, SmallStateType::Left) => {
+                    res.push(SmallStateType::JoinedAndLeft);
                     i += 2;
                     continue;
                 }
-                (TransitionType::Left, TransitionType::Joined) => {
-                    res.push(TransitionType::LeftAndJoined);
+                (SmallStateType::Left, SmallStateType::Joined) => {
+                    res.push(SmallStateType::LeftAndJoined);
                     i += 2;
                     continue;
                 }
@@ -435,7 +519,7 @@ fn merge_adjacent_transitions(transitions: &[TransitionType]) -> Vec<TransitionT
 }
 
 /// Groups consecutive identical transitions with their count (e.g. [JoinedAndLeft, JoinedAndLeft] -> (JoinedAndLeft, 2))
-pub fn group_repeated_transitions(transitions: &[TransitionType]) -> Vec<(TransitionType, usize)> {
+fn group_repeated_transitions(transitions: &[SmallStateType]) -> Vec<(SmallStateType, usize)> {
     let mut res = Vec::new();
     for &t in transitions {
         if let Some((last, count)) = res.last_mut() {
@@ -451,15 +535,15 @@ pub fn group_repeated_transitions(transitions: &[TransitionType]) -> Vec<(Transi
 
 /// Creates human-readable text for a transition type with user count and repetition count
 fn format_transition_text(
-    transition: TransitionType,
+    transition: SmallStateType,
     user_count: usize,
     repeat_count: usize,
 ) -> String {
     let is_plural = user_count > 1;
     match transition {
-        TransitionType::CreateRoom => "created and configured the room".to_string(),
-        TransitionType::ConfigureRoom => "".to_string(),
-        TransitionType::Joined => {
+        SmallStateType::CreateRoom => "created and configured the room".to_string(),
+        SmallStateType::ConfigureRoom => "".to_string(),
+        SmallStateType::Joined => {
             if repeat_count > 1 {
                 if is_plural {
                     format!("joined (×{})", repeat_count)
@@ -474,7 +558,7 @@ fn format_transition_text(
                 }
             }
         }
-        TransitionType::Left => {
+        SmallStateType::Left => {
             if repeat_count > 1 {
                 if is_plural {
                     format!("left (×{})", repeat_count)
@@ -489,112 +573,112 @@ fn format_transition_text(
                 }
             }
         }
-        TransitionType::JoinedAndLeft => {
+        SmallStateType::JoinedAndLeft => {
             if repeat_count > 1 {
                 format!("joined and left (×{})", repeat_count)
             } else {
                 "joined and left".to_string()
             }
         }
-        TransitionType::LeftAndJoined => {
+        SmallStateType::LeftAndJoined => {
             if repeat_count > 1 {
                 format!("left and rejoined (×{})", repeat_count)
             } else {
                 "left and rejoined".to_string()
             }
         }
-        TransitionType::ChangedName => {
+        SmallStateType::ChangedName => {
             if repeat_count > 1 {
                 format!("changed their name (×{})", repeat_count)
             } else {
                 "changed their name".to_string()
             }
         }
-        TransitionType::ChangedAvatar => {
+        SmallStateType::ChangedAvatar => {
             if repeat_count > 1 {
                 format!("changed their profile picture (×{})", repeat_count)
             } else {
                 "changed their profile picture".to_string()
             }
         }
-        TransitionType::Invited => {
+        SmallStateType::Invited => {
             if repeat_count > 1 {
                 format!("was invited (×{})", repeat_count)
             } else {
                 "was invited".to_string()
             }
         }
-        TransitionType::Banned => {
+        SmallStateType::Banned => {
             if repeat_count > 1 {
                 format!("was banned (×{})", repeat_count)
             } else {
                 "was banned".to_string()
             }
         }
-        TransitionType::Unbanned => {
+        SmallStateType::Unbanned => {
             if repeat_count > 1 {
                 format!("was unbanned (×{})", repeat_count)
             } else {
                 "was unbanned".to_string()
             }
         }
-        TransitionType::InvitationRejected => {
+        SmallStateType::InvitationRejected => {
             if repeat_count > 1 {
                 format!("rejected invite (×{})", repeat_count)
             } else {
                 "rejected invite".to_string()
             }
         }
-        TransitionType::InvitationRevoked => {
+        SmallStateType::InvitationRevoked => {
             if repeat_count > 1 {
                 format!("invite withdrawn (×{})", repeat_count)
             } else {
                 "invite withdrawn".to_string()
             }
         }
-        TransitionType::Kicked => {
+        SmallStateType::Kicked => {
             if repeat_count > 1 {
                 format!("was kicked (×{})", repeat_count)
             } else {
                 "was kicked".to_string()
             }
         }
-        TransitionType::ServerAcl => {
+        SmallStateType::ServerAcl => {
             if repeat_count > 1 {
                 format!("updated server ACLs (×{})", repeat_count)
             } else {
                 "updated server ACLs".to_string()
             }
         }
-        TransitionType::ChangedPins => {
+        SmallStateType::ChangedPins => {
             if repeat_count > 1 {
                 format!("changed pinned messages (×{})", repeat_count)
             } else {
                 "changed pinned messages".to_string()
             }
         }
-        TransitionType::MessageRemoved => {
+        SmallStateType::MessageRemoved => {
             if repeat_count > 1 {
                 format!("removed a message (×{})", repeat_count)
             } else {
                 "removed a message".to_string()
             }
         }
-        TransitionType::HiddenEvent => {
+        SmallStateType::HiddenEvent => {
             if repeat_count > 1 {
                 format!("did a hidden event (×{})", repeat_count)
             } else {
                 "did a hidden event".to_string()
             }
         }
-        TransitionType::NoChange => {
+        SmallStateType::NoChange => {
             if repeat_count > 1 {
                 format!("made no changes (×{})", repeat_count)
             } else {
                 "made no changes".to_string()
             }
         }
-        TransitionType::UnableToDecrypt => {
+        SmallStateType::UnableToDecrypt => {
             if repeat_count > 1 {
                 format!("decryption failed (×{})", repeat_count)
             } else {
@@ -605,7 +689,7 @@ fn format_transition_text(
 }
 
 /// Produce an English-readable name list, with "and N others"
-pub fn format_user_list(user_names: &[String], max_display_count: usize) -> String {
+fn format_user_list(user_names: &[String], max_display_count: usize) -> String {
     match user_names.len() {
         0 => "".into(),
         1 => user_names[0].clone(),
@@ -624,149 +708,38 @@ pub fn format_user_list(user_names: &[String], max_display_count: usize) -> Stri
     }
 }
 
-/// Converts a `EventTimelineItem` to a `UserEvent`.
-///
-/// This function takes an `EventTimelineItem`, the user name of the event sender, and an index.
-/// It then returns a `UserEvent` with the index, display name, transition type,
-/// sender, state key, and membership change.
-///
-/// The transition type is determined using `is_small_state_event`.
-///
-/// The state key is set to `Some(event_item.state_key().to_string())` if the event item
-/// is a membership change or an other state event.
-///
-/// The membership change is set to `Some(s.to_string())` if the event item is a membership change,
-/// where `s` is one of "join", "leave", "invite", or "ban".
-pub fn convert_to_timeline_event(
+/// Convert an event timeline item to a user event
+pub fn convert_event_tl_item_to_user_event(
     event_item: &EventTimelineItem,
-    user_name: String,
     index: usize,
-    sender_profile: Option<crate::profile::user_profile::UserProfile>,
 ) -> UserEvent {
-    use matrix_sdk_ui::timeline::{MembershipChange, TimelineItemContent};
-    let (state_key, membership) = match event_item.content() {
+    use matrix_sdk_ui::timeline::TimelineItemContent;
+    let state_key = match event_item.content() {
         TimelineItemContent::MembershipChange(change) => {
-            let state_key = Some(change.user_id().to_string());
-            let membership = match change.change() {
-                Some(MembershipChange::Joined) => Some("join"),
-                Some(MembershipChange::Left) => Some("leave"),
-                Some(MembershipChange::Invited) => Some("invite"),
-                Some(MembershipChange::Banned) => Some("ban"),
-                _ => None,
-            }
-            .map(|s| s.to_string());
-            (state_key, membership)
+            Some(change.user_id().to_string())
         }
-        TimelineItemContent::OtherState(other) => (Some(other.state_key().to_string()), None),
-        _ => (None, None),
+        TimelineItemContent::OtherState(other) => Some(other.state_key().to_string()),
+        _ => None,
     };
-    let (_is_small_state, transition_type, _display_name_from_state) =
-        analyze_timeline_event_type(event_item);
+    let transition_type: SmallStateType = event_item.content().into();
+
     UserEvent {
         index,
-        display_name: user_name,
+        display_name: event_item.sender().to_string(),
         transition: transition_type,
-        sender: event_item.sender().into(),
+        sender: Some(event_item.sender().into()),
         state_key,
-        membership,
-        sender_profile,
+        event_id: event_item.event_id().map(|e|e.to_owned()),
     }
 }
 
-/// Convert Matrix membership change → transition type
-pub fn get_transition_from_membership_change(change: MembershipChange) -> TransitionType {
-    use matrix_sdk_ui::timeline::MembershipChange;
-    match change {
-        MembershipChange::Joined => TransitionType::Joined,
-        MembershipChange::Left => TransitionType::Left,
-        MembershipChange::Banned => TransitionType::Banned,
-        MembershipChange::Unbanned => TransitionType::Unbanned,
-        MembershipChange::Kicked => TransitionType::Kicked,
-        MembershipChange::Invited => TransitionType::Invited,
-        MembershipChange::KickedAndBanned => TransitionType::Banned,
-        MembershipChange::InvitationAccepted => TransitionType::Joined,
-        MembershipChange::InvitationRejected => TransitionType::InvitationRejected,
-        MembershipChange::InvitationRevoked => TransitionType::InvitationRevoked,
-        MembershipChange::Knocked => TransitionType::HiddenEvent,
-        MembershipChange::KnockAccepted => TransitionType::Joined,
-        MembershipChange::KnockRetracted => TransitionType::HiddenEvent,
-        MembershipChange::None => TransitionType::NoChange,
-        MembershipChange::Error => TransitionType::NoChange,
-        MembershipChange::NotImplemented => TransitionType::NoChange,
-        MembershipChange::KnockDenied => TransitionType::HiddenEvent,
-    }
-}
 
-/// Convert other room state events → transition type
-pub fn get_transition_from_other_events(
-    content: &AnyOtherFullStateEventContent,
-    _state_key: &str,
-) -> TransitionType {
-    match content {
-        AnyOtherFullStateEventContent::RoomServerAcl(_) => TransitionType::ServerAcl,
-        AnyOtherFullStateEventContent::RoomPinnedEvents(_) => TransitionType::ConfigureRoom,
-        AnyOtherFullStateEventContent::RoomName(_) => TransitionType::ConfigureRoom,
-        AnyOtherFullStateEventContent::RoomTopic(_) => TransitionType::ConfigureRoom,
-        AnyOtherFullStateEventContent::RoomAvatar(_) => TransitionType::ConfigureRoom,
-        AnyOtherFullStateEventContent::RoomCanonicalAlias(_) => TransitionType::ConfigureRoom,
-        AnyOtherFullStateEventContent::RoomCreate(_) => TransitionType::CreateRoom,
-        AnyOtherFullStateEventContent::RoomEncryption(_) => TransitionType::ConfigureRoom,
-        AnyOtherFullStateEventContent::RoomGuestAccess(_) => TransitionType::ConfigureRoom,
-        AnyOtherFullStateEventContent::RoomHistoryVisibility(_) => TransitionType::ConfigureRoom,
-        AnyOtherFullStateEventContent::RoomJoinRules(_) => TransitionType::ConfigureRoom,
-        AnyOtherFullStateEventContent::RoomPowerLevels(_) => TransitionType::ConfigureRoom,
-        AnyOtherFullStateEventContent::RoomThirdPartyInvite(_) => TransitionType::ConfigureRoom,
-        AnyOtherFullStateEventContent::RoomTombstone(_) => TransitionType::ConfigureRoom,
-        AnyOtherFullStateEventContent::RoomAliases(_) => TransitionType::ConfigureRoom,
-        AnyOtherFullStateEventContent::SpaceChild(_) => TransitionType::ConfigureRoom,
-        AnyOtherFullStateEventContent::SpaceParent(_) => TransitionType::ConfigureRoom,
-        AnyOtherFullStateEventContent::PolicyRuleRoom(_) => TransitionType::ConfigureRoom,
-        AnyOtherFullStateEventContent::PolicyRuleServer(_) => TransitionType::ConfigureRoom,
-        AnyOtherFullStateEventContent::PolicyRuleUser(_) => TransitionType::ConfigureRoom,
-        AnyOtherFullStateEventContent::_Custom { .. } => TransitionType::HiddenEvent,
-    }
-}
-
-/// Appends a new user event to the given list of user events.
-///
-/// If the given transition is `HiddenEvent`, this function does nothing.
-///
-/// Otherwise, it appends a new `UserEvent` to the list of user events for the given user ID.
-/// If the user ID is not found in the list, a new entry is created.
-///
-/// If the user ID is found, but there is no existing `UserEvent` with the same index,
-/// a new `UserEvent` is appended to the list of user events for that user ID.
-///
-/// The function prints debug messages to help with debugging.
-pub fn append_user_event(
-    user_event: UserEvent,
-    user_events: &mut Vec<(OwnedUserId, Vec<UserEvent>)>,
-) {
-    if let TransitionType::HiddenEvent = user_event.transition {
-        return;
-    }
-    if let Some((_, events)) = user_events
-        .iter_mut()
-        .find(|(id, _)| id == &user_event.sender)
-    {
-        if events
-            .iter()
-            .filter(|inner_user_event| inner_user_event.index == user_event.index)
-            .count()
-            == 0
-        {
-            events.push(user_event);
-        }
-    } else {
-        user_events.push((user_event.sender.clone(), vec![user_event]));
-    }
-}
 
 /// Gets the effective user ID for a user event, preferring state_key over sender.
 /// This handles cases where the state_key represents the actual user being affected.
-fn get_effective_user_id(user_event: &UserEvent) -> OwnedUserId {
+fn get_effective_user_id(user_event: &UserEvent) -> Option<OwnedUserId> {
     match user_event.state_key.as_ref().map(UserId::parse) {
-        Some(Ok(user_id)) => user_id,
+        Some(Ok(user_id)) => Some(user_id),
         _ => user_event.sender.clone(),
     }
 }
@@ -776,17 +749,11 @@ fn get_effective_user_id(user_event: &UserEvent) -> OwnedUserId {
 /// The HashMap structure maps: user_id -> Vec<UserEvent>
 /// This simplified structure groups events by user ID, avoiding the complexity
 /// of maintaining timeline indices as keys.
-/// Appends a new user event to the given HashMap of user events and invalidates cache.
-/// 
-/// The HashMap structure maps: user_id -> Vec<UserEvent>
-/// This simplified structure groups events by user ID, avoiding the complexity
-/// of maintaining timeline indices as keys.
 fn append_user_event_to_map(
     user_event: UserEvent,
     user_events: &mut HashMap<OwnedUserId, Vec<UserEvent>>,
 ) {
-    let effective_user_id = get_effective_user_id(&user_event);
-    
+    let Some(effective_user_id) = get_effective_user_id(&user_event) else { return };
     // Get or create the user's event list
     let user_events_vec = user_events.entry(effective_user_id).or_default();
     
@@ -796,7 +763,7 @@ fn append_user_event_to_map(
     }
 }
 
-/// Appends a user event to a group and updates its cache.
+/// Appends a user event to a group and invalidates its cache.
 fn append_user_event_to_group(
     user_event: UserEvent,
     group: &mut SmallStateGroup,
@@ -807,52 +774,31 @@ fn append_user_event_to_group(
     group.cached_avatar_user_ids = None;
 }
 
-/// Analyzes a timeline event to determine if it represents a small state change.
+/// Checks if a timeline item represents a small state change (membership change, profile change, poll, redacted, or unable to decrypt).
 ///
 /// # Arguments
-/// * `event_tl_item` - The timeline item to check
+/// * `timeline_item` - The timeline item to check
 ///
 /// # Returns
 /// * `bool` - Whether this is a small state event
-/// * `TransitionType` - The type of transition
-/// * `Option<String>` - Display name if available
-pub fn analyze_timeline_event_type(
-    event_tl_item: &EventTimelineItem,
-) -> (bool, TransitionType, Option<String>) {
-    match event_tl_item.content() {
-        TimelineItemContent::MembershipChange(change) => {
-            let transition = change
-                .change()
-                .map(get_transition_from_membership_change)
-                .unwrap_or_default();
-            (true, transition, change.display_name())
-        }
-        TimelineItemContent::ProfileChange(change) => {
-            let transition_type = match (change.avatar_url_change(), change.displayname_change()) {
-                (Some(_), _) => TransitionType::ChangedAvatar,
-                (None, Some(_)) => TransitionType::ChangedName,
-                _ => TransitionType::NoChange,
-            };
-            (true, transition_type, None)
-        }
-        TimelineItemContent::OtherState(other_state) => {
-            let transition =
-                get_transition_from_other_events(other_state.content(), other_state.state_key());
-            (true, transition, None)
-        }
-        TimelineItemContent::MsgLike(MsgLikeContent { kind, .. }) => {
-            let transition = match kind {
-                MsgLikeKind::Poll(_) => TransitionType::NoChange,
-                MsgLikeKind::Redacted => TransitionType::MessageRemoved,
-                MsgLikeKind::UnableToDecrypt(_) => TransitionType::UnableToDecrypt,
-                _ => return (false, TransitionType::NoChange, None),
-            };
-            (true, transition, None)
-        }
-        _ => (false, TransitionType::NoChange, None),
-    }
+pub fn is_small_state(timeline_item: Option<&Arc<TimelineItem>>) -> bool {
+    timeline_item
+        .and_then(|timeline_item| match timeline_item.kind() {
+            TimelineItemKind::Event(event_tl_item) => Some(event_tl_item),
+            _ => None,
+        })
+        .map(|e| {
+            match e.content() {
+                TimelineItemContent::MembershipChange(_) | TimelineItemContent::ProfileChange(_) |
+                TimelineItemContent::OtherState(_) => true,
+                TimelineItemContent::MsgLike(MsgLikeContent { kind: MsgLikeKind::Poll(_) | MsgLikeKind::Redacted | MsgLikeKind::UnableToDecrypt(_), .. }) => true,
+                _ => false,
+            }
+        })
+        .unwrap_or(false)
 }
 
+
 /// Generates a summary string from user events.
 ///
 /// # Arguments
@@ -860,12 +806,12 @@ pub fn analyze_timeline_event_type(
 /// * `summary_length` - Maximum number of user names to display before coalescing
 /// # Returns
 /// * `String` - The generated summary string
-pub fn generate_summary(
+fn generate_summary(
     user_events: &HashMap<OwnedUserId, Vec<UserEvent>>,
     summary_length: usize,
 ) -> String {
     // Aggregate by transition sequence
-    let mut aggregates: Vec<(Vec<TransitionType>, Vec<String>)> = Vec::new();
+    let mut aggregates: Vec<(Vec<SmallStateType>, Vec<String>)> = Vec::new();
 
     for (user_id, events) in user_events {
         // Create sorted indices instead of cloning the entire events vector
@@ -874,8 +820,8 @@ pub fn generate_summary(
         let mut transitions: Vec<_> = sorted_indices.iter().map(|&i| events[i].transition).collect();
 
         // Filter out Joined transitions for room creators
-        if transitions.contains(&TransitionType::CreateRoom) {
-            transitions.retain(|&t| t != TransitionType::Joined);
+        if transitions.contains(&SmallStateType::CreateRoom) {
+            transitions.retain(|&t| t != SmallStateType::Joined);
         }
         
         let canonical = merge_adjacent_transitions(&transitions);
@@ -912,6 +858,7 @@ pub fn generate_summary(
 }
 
 /// Extracts and sorts user IDs from user events map for avatar display.
+/// 
 /// This is the expensive computation part that should be cached.
 fn extract_avatar_user_ids(
     user_events_map: &HashMap<OwnedUserId, Vec<UserEvent>>,
@@ -938,18 +885,16 @@ fn extract_avatar_user_ids(
 }
 
 /// Populates the avatar row with user avatars from pre-computed user IDs.
-/// This is now a lightweight operation that just creates the receipts map.
 fn populate_avatar_row_from_user_ids(
     cx: &mut Cx,
     avatar_row: &WidgetRef,
     room_id: &matrix_sdk::ruma::RoomId,
     user_ids: &[OwnedUserId],
 ) {
-    // Create a receipts map for the avatar row using the provided user IDs
+    // Reuse read receipts logic to populate the avatar row.
     let receipts_map: IndexMap<OwnedUserId, matrix_sdk::ruma::events::receipt::Receipt> = user_ids
         .iter()
         .map(|user_id| {
-            // Create a simple receipt for display purposes
             let receipt = matrix_sdk::ruma::events::receipt::Receipt::new(
                 matrix_sdk::ruma::MilliSecondsSinceUnixEpoch::now()
             );
@@ -957,149 +902,117 @@ fn populate_avatar_row_from_user_ids(
         })
         .collect();
     
-    // Use set_avatar_row to populate the avatars  
     avatar_row.avatar_row(ids!(user_event_avatar_row)).set_avatar_row(cx, room_id, None, &receipts_map);
 }
 
-/// Analyzes the context around a timeline item to determine grouping eligibility.
-/// Returns whether previous and next items are small state events.
-fn analyze_grouping_context(
-    current_item: &EventTimelineItem,
-    previous_item: Option<&Arc<TimelineItem>>,
-    next_item: Option<&Arc<TimelineItem>>,
-) -> (bool, bool, bool, Option<String>) {
-    let (current_item_is_small_state, _transition, display_name) = analyze_timeline_event_type(current_item);
-    
-    if !current_item_is_small_state {
-        return (false, false, false, display_name);
-    }
-
-    let (next_item_is_small_state, _, _) = next_item
-        .and_then(|timeline_item| match timeline_item.kind() {
-            TimelineItemKind::Event(event_tl_item) => Some(event_tl_item),
-            _ => None,
-        })
-        .map(analyze_timeline_event_type)
-        .unwrap_or((false, TransitionType::NoChange, None));
-        
-    let (previous_item_is_small_state, _, _) = previous_item
-        .and_then(|timeline_item| match timeline_item.kind() {
-            TimelineItemKind::Event(event_tl_item) => Some(event_tl_item),
-            _ => None,
-        })
-        .map(analyze_timeline_event_type)
-        .unwrap_or((false, TransitionType::NoChange, None));
-
-    (current_item_is_small_state, previous_item_is_small_state, next_item_is_small_state, display_name)
-}
-
 /// Processes room creation events for special grouping treatment.
-/// Returns Some(result) if this item was processed as part of room creation, None otherwise.
+/// 
+/// Returns an optional tuple containing a boolean flag (whether to display it) nd a collapsible button state.
 fn process_room_creation_event(
-    item_id: usize,
-    current_item: &EventTimelineItem,
+    current_item: &UserEvent,
+    previous_item_is_small_state: bool,
     group_manager: &mut SmallStateGroupManager,
-) -> Option<(bool, bool, bool, Range<usize>)> {
+) -> Option<(bool, CollapsibleButton)> {
     if group_manager.room_creation.is_some() {
         return None;
     }
-
-    if let TimelineItemContent::OtherState(other_state) = current_item.content() {
-        if let AnyOtherFullStateEventContent::RoomCreate(FullStateEventContent::Original { .. }) = other_state.content() {
-            let creator_id = current_item.sender().to_owned();
-            if let Some(event_id) = current_item.event_id() {
-                group_manager.room_creation = Some((creator_id, event_id.to_owned()));
-                group_manager.creation_collapsible_list.range.start = item_id;
-                if group_manager.creation_collapsible_list.range.end <= item_id {
-                    group_manager.creation_collapsible_list.range.end = item_id + 1;
-                }
-                return Some((
-                    true,
-                    true,
-                    group_manager.creation_collapsible_list.opened,
-                    group_manager.creation_collapsible_list.range.clone(),
-                ));
+    let item_id = current_item.index;
+    if current_item.transition == SmallStateType::CreateRoom {
+        if let (Some(creator_id), Some(event_id)) = (current_item.sender.clone(), current_item.event_id.clone()) {
+            group_manager.room_creation = Some((creator_id, event_id.to_owned()));
+            group_manager.creation_collapsible_list.range.start = item_id;
+            if group_manager.creation_collapsible_list.range.end <= item_id {
+                group_manager.creation_collapsible_list.range.end = item_id + 1;
             }
+            return Some((
+                true,
+                if previous_item_is_small_state {
+                    CollapsibleButton::None
+                } else if group_manager.creation_collapsible_list.opened {
+                    CollapsibleButton::Expanded
+                } else {
+                    CollapsibleButton::Collapsed
+                }
+            ));
         }
     }
     None
 }
 
 /// Manages room setup events in the creation collapsible list.
-/// Returns Some(result) if this item was processed as part of creation list, None otherwise.
+/// 
+/// Returns an optional tuple containing a boolean flag (whether to display it) nd a collapsible button state.
 fn process_room_setup_events(
-    item_id: usize,
     user_event: &UserEvent,
     group_manager: &mut SmallStateGroupManager,
-) -> Option<(bool, bool, bool, Range<usize>)> {
+) -> Option<(bool, CollapsibleButton)> {
+    let item_id = user_event.index;
     // Check if this is the start of the creation collapsible list
     if item_id == group_manager.creation_collapsible_list.range.start
         && !group_manager.creation_collapsible_list.range.is_empty()
     {
         return Some((
             true,
-            true,
-            group_manager.creation_collapsible_list.opened,
-            group_manager.creation_collapsible_list.range.clone(),
+            if group_manager.creation_collapsible_list.opened {
+                CollapsibleButton::Expanded
+            } else {
+                CollapsibleButton::Collapsed
+            },
         ));
     }
 
     // Handle configure room and joined events in creation list
-    if matches!(user_event.transition, TransitionType::ConfigureRoom | TransitionType::Joined) {
+    if matches!(user_event.transition, SmallStateType::ConfigureRoom | SmallStateType::Joined) {
         if group_manager.creation_collapsible_list.range.is_empty() {
-            return Some((true, false, true, Range::default()));
+            return None;
         }
         
         if group_manager.creation_collapsible_list.range.end == item_id {
             group_manager.creation_collapsible_list.range.end = item_id + 1;
             return Some((
                 group_manager.creation_collapsible_list.opened,
-                false,
-                group_manager.creation_collapsible_list.opened,
-                item_id..item_id + 2, // +2 to include the next item to be redrawn
+                CollapsibleButton::None,
             ));
         }
         
         if group_manager.creation_collapsible_list.range.contains(&item_id) {
             return Some((
                 group_manager.creation_collapsible_list.opened,
-                false,
-                group_manager.creation_collapsible_list.opened,
-                Range::default(),
+                CollapsibleButton::None,
             ));
         }
     }
-    
     None
 }
 
 /// Finds and updates existing small state groups.
-/// Returns Some(result) if item was added to an existing group, None otherwise.
+/// 
+/// Returns an optional tuple containing a boolean flag (whether to display it) nd a collapsible button state.
 fn find_and_update_existing_group(
-    item_id: usize,
-    user_event: UserEvent,
+    user_event: &UserEvent,
     group_manager: &mut SmallStateGroupManager,
-) -> Option<(bool, bool, bool, Range<usize>)> {
-    let _group_keys: Vec<Range<usize>> = group_manager
-        .small_state_groups
-        .iter()
-        .map(|f| f.range.clone())
-        .collect();
-
+    previous_item_is_small_state: bool,
+) -> Option<(bool, CollapsibleButton)> {
+    let item_id = user_event.index;
     // First check for direct matches or containment
     for group in group_manager.small_state_groups.iter_mut() {
         if group.range.start == item_id {
-            append_user_event_to_group(user_event, group);
-            return Some((true, group.range.len() > MIN_GROUP_SIZE_FOR_COLLAPSE, group.opened, Range::default()));
+            append_user_event_to_group(user_event.clone(), group);
+            let collapsible_button = if group.range.len() <= MIN_GROUP_SIZE_FOR_COLLAPSE || previous_item_is_small_state {
+                CollapsibleButton::None
+            } else if group.opened {
+                CollapsibleButton::Expanded
+            } else {
+                CollapsibleButton::Collapsed
+            };
+            return Some((true, collapsible_button));
         }
         
         if group.range.contains(&item_id) {
-            append_user_event_to_group(user_event, group);
+            append_user_event_to_group(user_event.clone(), group);
             return Some((
                 group.opened || group.range.len() <= MIN_GROUP_SIZE_FOR_COLLAPSE,
-                false,
-                group.opened,
-                Range::default(),
+                CollapsibleButton::None,
             ));
         }
     }
@@ -1126,12 +1039,14 @@ fn find_and_update_existing_group(
                 // Extend this group backwards to include current item
                 let old_end = group.range.end;
                 group.range = item_id..old_end;
-                append_user_event_to_group(user_event, group);
+                append_user_event_to_group(user_event.clone(), group);
                 return Some((
-                    group.opened || group.range.len() <= MIN_GROUP_SIZE_FOR_COLLAPSE,
-                    false,
-                    false,
-                    item_id..old_end,
+                    group.opened || group.range.len() <= MIN_GROUP_SIZE_FOR_COLLAPSE || !previous_item_is_small_state,
+                    if previous_item_is_small_state {
+                        CollapsibleButton::None
+                    } else {
+                        CollapsibleButton::Collapsed
+                    },
                 ));
             }
         }
@@ -1141,17 +1056,18 @@ fn find_and_update_existing_group(
 }
 
 /// Creates a new group if the next item is also a small state event.
+/// 
 /// Returns Some(result) if a new group was created, None otherwise.
 fn create_new_group_if_needed(
-    item_id: usize,
-    user_event: UserEvent,
+    user_event: &UserEvent,
+    previous_item_is_small_state: bool,
     next_item_is_small_state: bool,
     group_manager: &mut SmallStateGroupManager,
-) -> Option<(bool, bool, bool, Range<usize>)> {
+) -> Option<(bool, CollapsibleButton)> {
     if next_item_is_small_state {
         let mut user_events_map = HashMap::new();
-        append_user_event_to_map(user_event, &mut user_events_map);
-        
+        append_user_event_to_map(user_event.clone(), &mut user_events_map);
+        let item_id = user_event.index;
         let mut new_group = SmallStateGroup {
             range: item_id..(item_id + 2), // Plus 2 to include the next item into the group
             opened: false,
@@ -1163,57 +1079,18 @@ fn create_new_group_if_needed(
         // Pre-compute cache for the new group
         new_group.update_cached_data();
         
-        group_manager.small_state_groups.push(new_group);
-        
-        return Some((false, false, false, item_id..(item_id + 2)));
+        group_manager.small_state_groups.push(new_group.clone());
+        let collapsible_button = if new_group.range.len() <= MIN_GROUP_SIZE_FOR_COLLAPSE || previous_item_is_small_state {
+            CollapsibleButton::None
+        } else {
+            CollapsibleButton::Collapsed
+        };
+        return Some((true, collapsible_button));
     }
     None
 }
 
-/// Determines how to render a timeline item based on small state group logic.
-/// This is now a thin wrapper around the TimelineGroupService.
-pub fn determine_item_group_state(
-    item_id: usize,
-    username: String,
-    current_item: &EventTimelineItem,
-    previous_item: Option<&Arc<TimelineItem>>,
-    next_item: Option<&Arc<TimelineItem>>,
-    group_manager: &mut SmallStateGroupManager,
-) -> (bool, bool, bool, Range<usize>) {
-    let result = TimelineGroupService::compute_item_group_state(
-        item_id,
-        username,
-        current_item,
-        previous_item,
-        next_item,
-        group_manager,
-    );
-    
-    (result.show, result.show_collapsible_button, result.expanded, result.to_redraw)
-}
-
-/// New service-based API that returns rich group state information.
-/// This should be preferred over the basic determine_item_group_state function.
-pub fn compute_timeline_item_group_state(
-    item_id: usize,
-    username: String,
-    current_item: &EventTimelineItem,
-    previous_item: Option<&Arc<TimelineItem>>,
-    next_item: Option<&Arc<TimelineItem>>,
-    group_manager: &mut SmallStateGroupManager,
-) -> GroupStateResult {
-    TimelineGroupService::compute_item_group_state(
-        item_id,
-        username,
-        current_item,
-        previous_item,
-        next_item,
-        group_manager,
-    )
-}
-
-/// Handles item_id changes during backward pagination by shifting indices in small state groups
-/// and creation collapsible lists when new items are prepended to the timeline.
+/// Handles item_id changes during backward pagination by shifting indices in small SmallStateGroupManager
 ///
 /// # Arguments
 /// * `old_len` - The length of the timeline before adding new items
@@ -1253,89 +1130,9 @@ pub fn handle_backward_pagination_index_shift(
     }
 }
 
-/// Handles the rendering logic for small state events based on their group state.
-/// This function manages visibility, collapsible button states, and summary text display
-/// for timeline items that are part of collapsible groups.
-///
-/// # Arguments
-/// * `cx` - Makepad context for UI operations
-/// * `item` - The widget reference for the timeline item
-/// * `item_id` - The index of this item in the timeline
-/// * `opened` - Whether this individual item should be rendered (based on group state)
-/// * `show_collapsible_button` - True if this item is the first in a collapsible group
-/// * `expanded` - Current expansion state of the group (for button text)
-/// * `group_manager` - Mutable reference to the small state group manager (for cache updates)
-/// * `room_id` - The room ID for avatar fetching
-pub fn render_small_state_event_group_logic(
-    cx: &mut Cx,
-    item: &WidgetRef,
-    item_id: usize,
-    opened: bool,
-    show_collapsible_button: bool,
-    expanded: bool,
-    group_manager: &mut SmallStateGroupManager,
-    room_id: &matrix_sdk::ruma::RoomId,
-) {
-    // Render logic based on group state
-    if opened {
-        // This item should be visible - set appropriate button text if this is a group leader
-        if show_collapsible_button {
-            // Update button text to show current group state:
-            // ▶ = group is expanded (click to collapse)
-            // ▼ = group is collapsed (click to expand)
-            let button_text = if expanded { "▼" } else { "▶" };
-            item.button(ids!(collapsible_button))
-                .set_text(cx, button_text);
-            if group_manager.room_creation.is_some()
-                && group_manager.creation_collapsible_list.range.start == item_id
-            {
-                let summary_text = format!(
-                    "{} created and configured the room",
-                    group_manager.creation_collapsible_list.username
-                );
-                item.view(ids!(small_state_header)).set_visible(cx, true);
-                
-                // For creation groups, show only the creator's avatar
-                if let Some((creator_id, _)) = &group_manager.room_creation {
-                    let creator_ids = vec![creator_id.clone()];
-                    populate_avatar_row_from_user_ids(cx, item, room_id, &creator_ids);
-                }
-                
-                item.label(ids!(small_state_header.summary_text))
-                    .set_text(cx, &summary_text);
-                item.view(ids!(body)).set_visible(cx, false);
-                return;
-            }
-            // Find the group and use cached data for rendering
-            for group in &mut group_manager.small_state_groups {
-                if group.range.start == item_id {
-                    item.view(ids!(small_state_header)).set_visible(cx, true);
-                    
-                    // Use cached summary text (compute if not cached)
-                    let summary_text = group.get_summary();
-                    item.label(ids!(small_state_header.summary_text))
-                        .set_text(cx, summary_text);
-                    
-                    // Use cached avatar user IDs for lightweight avatar population
-                    let avatar_user_ids = group.get_avatar_user_ids();
-                    populate_avatar_row_from_user_ids(cx, item, room_id, avatar_user_ids);
-                    
-                    item.view(ids!(body)).set_visible(cx, false);
-                    break;
-                }
-            }
-            item.view(ids!(body)).set_visible(cx, expanded);
-        } else {
-            item.view(ids!(small_state_header)).set_visible(cx, false);
-            item.view(ids!(body)).set_visible(cx, true);
-        }
-    } else {
-        item.view(ids!(small_state_header)).set_visible(cx, false);
-        item.view(ids!(body)).set_visible(cx, false);
-    }
-}
 
 /// Handles collapsible button click events for small state event groups.
+/// 
 /// This function manages toggling the open/closed state of groups and updates
 /// the UI accordingly including button text and clearing cached drawn status.
 ///
@@ -1405,3 +1202,115 @@ pub fn handle_collapsible_button_click(
         }
     }
 }
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use matrix_sdk::ruma::UserId;
+    use ruma::EventId;
+
+    fn create_test_user_event(
+        index: usize,
+        transition_type: SmallStateType,
+        is_previous_small_state: bool,
+        is_next_small_state: bool,
+    ) -> (UserEvent, bool, bool) {
+        let sender = "@alice:example.com";
+        (UserEvent {
+            index,
+            transition: transition_type,
+            display_name: sender.to_string(),
+            state_key: None,
+            event_id: EventId::parse("$bY-3JMD1c4gGBiGVAey0s-NdY_5NPRwYtMoXImd0LaA").ok(),
+            sender: UserId::parse(sender).ok(),
+        }, is_previous_small_state, is_next_small_state)
+    }
+
+    #[test]
+    fn test_compute_group_state() {
+        let mut group_manager = SmallStateGroupManager::default();
+        let user_events = vec![
+            create_test_user_event(5, SmallStateType::Left, true, true),
+            create_test_user_event(4, SmallStateType::Left, true, true),
+            create_test_user_event(3, SmallStateType::Left, true, true), 
+            create_test_user_event(2, SmallStateType::Left, false, true)
+        ];
+        let mut results = HashMap::new();
+        for (user_event, previous_item_is_small_state, next_item_is_small_state)  in user_events.clone() {
+            let result = group_manager.compute_group_state(
+                "Alice".to_string(),
+                &user_event,
+                previous_item_is_small_state, // previous not small state
+                next_item_is_small_state, // next not small state
+            );
+            results.insert(user_event.index, result);
+        }
+        for (user_event, previous_item_is_small_state, next_item_is_small_state)  in user_events.clone() {
+            let result = group_manager.compute_group_state(
+                "Alice".to_string(),
+                &user_event,
+                previous_item_is_small_state, // previous not small state
+                next_item_is_small_state, // next not small state
+            );
+            results.insert(user_event.index, result);
+        }
+        assert!(results.get(&2).unwrap().show);
+        assert!(results.get(&2).unwrap().collapsible_button != CollapsibleButton::None);
+
+    }
+
+    #[test]
+    fn test_compute_group_state_2_items() {
+        let mut group_manager = SmallStateGroupManager::default();
+        let user_events = vec![
+            create_test_user_event(14, SmallStateType::ChangedName, true, false),
+            create_test_user_event(13, SmallStateType::ChangedName, false, true),
+        ];
+        let mut results = HashMap::new();
+        for (user_event, previous_item_is_small_state, next_item_is_small_state)  in user_events.clone() {
+            let result = group_manager.compute_group_state(
+                "Alice".to_string(),
+                &user_event,
+                previous_item_is_small_state, // previous not small state
+                next_item_is_small_state, // next not small state
+            );
+            results.insert(user_event.index, result);
+        }
+        for (user_event, previous_item_is_small_state, next_item_is_small_state)  in user_events.clone() {
+            let result = group_manager.compute_group_state(
+                "Alice".to_string(),
+                &user_event,
+                previous_item_is_small_state, // previous not small state
+                next_item_is_small_state, // next not small state
+            );
+            results.insert(user_event.index, result);
+        }
+        assert!(results.get(&13).unwrap().show);
+        assert!(results.get(&13).unwrap().collapsible_button == CollapsibleButton::None);
+    }
+
+    #[test]
+    fn test_compute_group_state_joined_items_out_creation() {
+        let mut group_manager = SmallStateGroupManager::default();
+        let user_events = vec![
+            create_test_user_event(16, SmallStateType::Joined, true, false),
+            create_test_user_event(15, SmallStateType::Joined, true, true),
+            create_test_user_event(14, SmallStateType::Joined, true, true),
+            create_test_user_event(13, SmallStateType::Joined, false, true),
+            create_test_user_event(3, SmallStateType::Joined, true, false),
+            create_test_user_event(2, SmallStateType::CreateRoom, false, true),
+        ];
+        let mut results = HashMap::new();
+        for (user_event, previous_item_is_small_state, next_item_is_small_state)  in user_events.clone() {
+            let result = group_manager.compute_group_state(
+                "Alice".to_string(),
+                &user_event,
+                previous_item_is_small_state, // previous not small state
+                next_item_is_small_state, // next not small state
+            );
+            results.insert(user_event.index, result);
+        }
+        assert!(results.get(&13).unwrap().show);
+        assert!(results.get(&13).unwrap().collapsible_button != CollapsibleButton::None);
+    }
+}

From 74a9767679901dbcf9c59561145b64175381281f Mon Sep 17 00:00:00 2001
From: alanpoon <brightshadowx@gmail.com>
Date: Thu, 25 Dec 2025 20:16:33 +0800
Subject: [PATCH 19/26] fix clippy

---
 src/home/small_state_group_manager.rs | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/src/home/small_state_group_manager.rs b/src/home/small_state_group_manager.rs
index fbd84687..779fac6f 100644
--- a/src/home/small_state_group_manager.rs
+++ b/src/home/small_state_group_manager.rs
@@ -788,12 +788,9 @@ pub fn is_small_state(timeline_item: Option<&Arc<TimelineItem>>) -> bool {
             _ => None,
         })
         .map(|e| {
-            match e.content() {
-                TimelineItemContent::MembershipChange(_) | TimelineItemContent::ProfileChange(_) |
-                TimelineItemContent::OtherState(_) => true,
-                TimelineItemContent::MsgLike(MsgLikeContent { kind: MsgLikeKind::Poll(_) | MsgLikeKind::Redacted | MsgLikeKind::UnableToDecrypt(_), .. }) => true,
-                _ => false,
-            }
+            matches!(e.content(), TimelineItemContent::MembershipChange(_) | TimelineItemContent::ProfileChange(_) |
+                TimelineItemContent::OtherState(_) | TimelineItemContent::MsgLike(MsgLikeContent { kind: MsgLikeKind::Poll(_) | 
+                MsgLikeKind::Redacted | MsgLikeKind::UnableToDecrypt(_), .. }))
         })
         .unwrap_or(false)
 }
@@ -907,7 +904,7 @@ fn populate_avatar_row_from_user_ids(
 
 /// Processes room creation events for special grouping treatment.
 /// 
-/// Returns an optional tuple containing a boolean flag (whether to display it) nd a collapsible button state.
+/// Returns an optional tuple containing a boolean flag (whether to display it) and a collapsible button state.
 fn process_room_creation_event(
     current_item: &UserEvent,
     previous_item_is_small_state: bool,
@@ -941,7 +938,7 @@ fn process_room_creation_event(
 
 /// Manages room setup events in the creation collapsible list.
 /// 
-/// Returns an optional tuple containing a boolean flag (whether to display it) nd a collapsible button state.
+/// Returns an optional tuple containing a boolean flag (whether to display it) and a collapsible button state.
 fn process_room_setup_events(
     user_event: &UserEvent,
     group_manager: &mut SmallStateGroupManager,
@@ -987,7 +984,7 @@ fn process_room_setup_events(
 
 /// Finds and updates existing small state groups.
 /// 
-/// Returns an optional tuple containing a boolean flag (whether to display it) nd a collapsible button state.
+/// Returns an optional tuple containing a boolean flag (whether to display it) and a collapsible button state.
 fn find_and_update_existing_group(
     user_event: &UserEvent,
     group_manager: &mut SmallStateGroupManager,
@@ -1221,7 +1218,7 @@ mod tests {
             transition: transition_type,
             display_name: sender.to_string(),
             state_key: None,
-            event_id: EventId::parse("$bY-3JMD1c4gGBiGVAey0s-NdY_5NPRwYtMoXImd0LaA").ok(),
+            event_id: EventId::parse("$bY-3JMD1c4gGBiGVAey0s-ndY_5NPRwYtMoXImd0LaA").ok(),
             sender: UserId::parse(sender).ok(),
         }, is_previous_small_state, is_next_small_state)
     }

From b346b81442e3b49f2650edb4c07c83a82ed59ec6 Mon Sep 17 00:00:00 2001
From: alanpoon <brightshadowx@gmail.com>
Date: Thu, 25 Dec 2025 20:40:12 +0800
Subject: [PATCH 20/26] fix typo

---
 src/home/small_state_group_manager.rs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/home/small_state_group_manager.rs b/src/home/small_state_group_manager.rs
index 779fac6f..431f4370 100644
--- a/src/home/small_state_group_manager.rs
+++ b/src/home/small_state_group_manager.rs
@@ -1218,7 +1218,7 @@ mod tests {
             transition: transition_type,
             display_name: sender.to_string(),
             state_key: None,
-            event_id: EventId::parse("$bY-3JMD1c4gGBiGVAey0s-ndY_5NPRwYtMoXImd0LaA").ok(),
+            event_id: EventId::parse("$bY-3JMD1c4gGBiGVAey0s-nv_5NPRwYtMoXImd0LaA").ok(),
             sender: UserId::parse(sender).ok(),
         }, is_previous_small_state, is_next_small_state)
     }

From 3b76b26597cb2bd1e013246f0c010e57939b548b Mon Sep 17 00:00:00 2001
From: alanpoon <brightshadowx@gmail.com>
Date: Mon, 5 Jan 2026 14:26:50 +0800
Subject: [PATCH 21/26] compute_group_state_2

---
 src/home/small_state_group_manager.rs | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/home/small_state_group_manager.rs b/src/home/small_state_group_manager.rs
index 431f4370..97f084e3 100644
--- a/src/home/small_state_group_manager.rs
+++ b/src/home/small_state_group_manager.rs
@@ -228,6 +228,11 @@ impl SmallStateGroupManager {
         }
     }
 
+    pub fn compute_group_state_2(items: Vec<UserEvent>) {
+
+    }
+
+
     /// Handles the rendering logic for small state events based on their group state.
     /// This function manages visibility, collapsible button states, and summary text display
     /// for timeline items that are part of collapsible groups.

From 912777229254165cd107e7a626bb7ee1cce58968 Mon Sep 17 00:00:00 2001
From: alanpoon <brightshadowx@gmail.com>
Date: Tue, 6 Jan 2026 21:51:11 +0800
Subject: [PATCH 22/26] compute_group_state early

---
 src/home/room_screen.rs               |   54 +-
 src/home/small_state_group_manager.rs | 1259 ++++++++++++++-----------
 2 files changed, 755 insertions(+), 558 deletions(-)

diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs
index 648aec7b..a394532f 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -80,6 +80,7 @@ live_design! {
     use crate::shared::restore_status_view::*;
     use crate::home::link_preview::LinkPreview;
     use crate::home::small_state_group_manager::SmallStateHeader;
+    use crate::home::small_state_group_manager::CollapsibleButton;
     use link::tsp_link::TspSignIndicator;
 
     COLOR_BG = #xfff8ee
@@ -470,6 +471,7 @@ live_design! {
             Empty = <Empty> {}
             DateDivider = <DateDivider> {}
             ReadMarker = <ReadMarker> {}
+            CollapsibleButton = <CollapsibleButton> {}
         }
 
         // A jump to bottom button (with an unread message badge) that is shown
@@ -961,15 +963,40 @@ impl Widget for RoomScreen {
             let room_id = &tl_state.room_id;
             let tl_items = &tl_state.items;
 
-            // Set the portal list's range based on the number of timeline items.
-            let last_item_id = tl_items.len();
+            // Set the portal list's range based on the number of timeline items,
+            // accounting for small state groups (collapsed groups take 1 slot each)
+            let base_item_count = tl_items.len();
+            let group_count = tl_state.group_manager.small_state_groups.len();
+            let last_item_id = base_item_count + group_count;
 
             let list = list_ref.deref_mut();
             list.set_item_range(cx, 0, last_item_id);
 
             while let Some(item_id) = list.next_visible_item(cx) {
                 let item = {
-                    let tl_idx = item_id;
+                    // Adjust timeline index by subtracting the number of small state groups
+                    // that come before this item_id
+                    let groups_before = tl_state.group_manager.small_state_groups
+                        .iter()
+                        .filter(|(range, _)| range.end <= item_id)
+                        .count();
+                    let tl_idx = item_id.saturating_sub(groups_before);
+                    
+                    // Check if this item_id should be the extra collapsible button for the first item in a small_state_group
+                    for (range, _group_id) in tl_state.group_manager.small_state_groups.iter() {
+                        if item_id == range.start {
+                            // This is the first item in a small state group, draw collapsible button instead of message
+                            if let Some(group) = tl_state.group_manager.groups_by_event_id.get(_group_id) {
+                                if !group.opened && range.len() >= 3 {  // Only show button for collapsible groups
+                                    let button = list.item(cx, item_id, id!(CollapsibleButton)).button(ids!(collapsible_button));
+                                    button.set_text(cx, "▼");  // Show collapsed state
+                                    button.set_visible(cx, true);
+                                    continue;
+                                }
+                            }
+                        }
+                    }
+                    
                     let Some(timeline_item) = tl_items.get(tl_idx) else {
                         // This shouldn't happen (unless the timeline gets corrupted or some other weird error),
                         // but we can always safely fill the item with an empty widget that takes up no space.
@@ -1180,6 +1207,16 @@ impl RoomScreen {
                     portal_list.set_tail_range(true);
                     jump_to_bottom.update_visibility(cx, true);
 
+                    // Compute small state groups for initial items
+                    let small_state_events = small_state_group_manager::extract_small_state_events(initial_items.iter().cloned());
+                    if tl.room_id.to_string() == "!UrPVVKTBTiyKLvSgIw:matrix.org" {
+                        println!("FirstUpdate: small_state_events: {:?}", small_state_events);
+                    }
+                    tl.group_manager.compute_group_state_2(small_state_events);
+                    if tl.room_id.to_string() == "!UrPVVKTBTiyKLvSgIw:matrix.org" {
+                        println!("FirstUpdate: computed group state {:?}", tl.group_manager);
+                    }
+
                     tl.items = initial_items;
                     done_loading = true;
                 }
@@ -1301,6 +1338,17 @@ impl RoomScreen {
                             &mut tl.group_manager,
                         );
                     }
+                    
+                    // Compute small state groups for new items
+                    let small_state_events = small_state_group_manager::extract_small_state_events(new_items.iter().cloned());
+                    if tl.room_id.to_string() == "!UrPVVKTBTiyKLvSgIw:matrix.org" {
+                        println!("NewItems: computed group state for {:?}", small_state_events);
+                    }
+                    tl.group_manager.compute_group_state_2(small_state_events);
+                    if tl.room_id.to_string() == "!UrPVVKTBTiyKLvSgIw:matrix.org" {
+                        println!("NewItems: computed group state for tl.group_manager {:?} done", tl.group_manager);
+                    }
+                    
                     tl.items = new_items;
                     done_loading = true;
                 }
diff --git a/src/home/small_state_group_manager.rs b/src/home/small_state_group_manager.rs
index 97f084e3..d0ec2955 100644
--- a/src/home/small_state_group_manager.rs
+++ b/src/home/small_state_group_manager.rs
@@ -3,8 +3,9 @@ use matrix_sdk::ruma::{OwnedEventId, OwnedUserId, UserId};
 use matrix_sdk_ui::timeline::{
     AnyOtherFullStateEventContent, EventTimelineItem, MembershipChange, MsgLikeContent, MsgLikeKind, TimelineItem, TimelineItemContent, TimelineItemKind
 };
-use rangemap::RangeSet;
-use std::{collections::HashMap, ops::Range, sync::Arc};
+use makepad_widgets::{Cx, WidgetRef};
+use rangemap::{RangeMap, RangeSet};
+use std::{collections::HashMap, sync::Arc};
 use indexmap::IndexMap;
 
 use crate::home::room_read_receipt::{AvatarRowWidgetRefExt, MAX_VISIBLE_AVATARS_IN_READ_RECEIPT};
@@ -21,6 +22,23 @@ live_design! {
 
     use crate::shared::styles::*;
     use crate::home::room_read_receipt::*;
+    pub CollapsibleButton = <Button> {
+        width: Fit,
+        height: Fit,
+        margin: { left: 5, right: 5 }
+        padding: { left: 4, right: 4, top: 2, bottom: 2 }
+        text: "▼"  // Default to collapsed state
+        draw_text: {
+            text_style: <SMALL_STATE_TEXT_STYLE> {},
+            color: #666
+        }
+        draw_bg: {
+            fn pixel(self) -> vec4 {
+                let sdf = Sdf2d::viewport(self.pos * self.rect_size);
+                return sdf.result
+            }
+        }
+    }
     pub SmallStateHeader = <View> {
         width: Fill,
         height: Fit
@@ -78,12 +96,14 @@ live_design! {
 ///
 /// The group is identified by a range of timeline item indices, and contains a mapping
 /// of user events within that range for generating summaries.
-#[derive(Debug, Clone, Default)]
+#[derive(Debug, Clone, Default, PartialEq, Eq)]
 pub struct SmallStateGroup {
+    pub is_room_creation: bool,
+    pub room_creator: Option<OwnedUserId>,
     /// The range of timeline item indices that belong to this group.
     ///
     /// The range is inclusive of the start index and exclusive of the end index.
-    pub range: std::ops::Range<usize>,
+    //pub range: std::ops::Range<usize>,
 
     /// Whether this group is currently expanded (true) or collapsed (false).
     ///
@@ -110,205 +130,319 @@ pub struct SmallStateGroup {
     pub cached_avatar_user_ids: Option<Vec<OwnedUserId>>,
 }
 
-/// Combined state for managing small state groups and room creation information
+/// Combined state for managing small state groups
 #[derive(Default, Debug)]
 pub struct SmallStateGroupManager {
-    /// Optional room creation info (creator user ID and event ID)
-    pub room_creation: Option<(OwnedUserId, OwnedEventId)>,
-    /// Creation collapsible list state
-    pub creation_collapsible_list: CreationCollapsibleList,
-    /// List of small state groups
-    pub small_state_groups: Vec<SmallStateGroup>,
+    /// Map of small state groups by their index ranges, storing the group header's event_id
+    pub small_state_groups: RangeMap<usize, OwnedEventId>,
+    /// Map from event_id to actual SmallStateGroup data
+    pub groups_by_event_id: HashMap<OwnedEventId, SmallStateGroup>,
 }
 
 impl SmallStateGroupManager {
-    /// Analyzes a timeline item and determines its grouping behavior.
-    /// 
-    /// Returns computed group state result without performing UI operations.
-    pub fn compute_group_state(
-        &mut self,
-        username: String,
-        current_item: &UserEvent,
-        previous_item_is_small_state: bool,
-        next_item_is_small_state: bool,
-    ) -> GroupStateResult {
-        if !previous_item_is_small_state && !next_item_is_small_state {
-            return GroupStateResult {
-                show: true,
-                collapsible_button: CollapsibleButton::None,
-                summary_text: None,
-                avatar_user_ids: None,
-            };
+    // COMMENTED OUT: This method uses the old Vec interface (iter_mut, push, etc.)
+    // /// Analyzes a timeline item and determines its grouping behavior.
+    // /// 
+    // /// Returns computed group state result without performing UI operations.
+    // pub fn compute_group_state(
+    //     &mut self,
+    //     username: String,
+    //     current_item: &UserEvent,
+    //     previous_item_is_small_state: bool,
+    //     next_item_is_small_state: bool,
+    // ) -> GroupStateResult {
+    //     if !previous_item_is_small_state && !next_item_is_small_state {
+    //         return GroupStateResult {
+    //             show: true,
+    //             collapsible_button: CollapsibleButton::None,
+    //             summary_text: None,
+    //             avatar_user_ids: None,
+    //         };
+    //     }
+
+    //     // Handle room creation events as a special case
+    //     if let Some((show, collapsible_button)) = process_room_creation_event(
+    //         current_item, previous_item_is_small_state, self
+    //     ) {
+    //         let summary_text = if collapsible_button != CollapsibleButton::None {
+    //             Some(format!(
+    //                 "{} created and configured the room",
+    //                 // self.creation_collapsible_list.username
+    //                 "Unknown"
+    //             ))
+    //         } else {
+    //             None
+    //         };
+    //         let avatar_user_ids = if let Some((creator_id, _)) = &self.room_creation {
+    //             // Some(vec![creator_id.clone()])
+    //             None
+    //         } else {
+    //             None
+    //         };
+            
+    //         return GroupStateResult {
+    //             show: show || !previous_item_is_small_state,
+    //             collapsible_button,
+    //             summary_text,
+    //             avatar_user_ids,
+    //         };
+    //     }
+
+    //     // Set username for creation collapsible list and create user event
+    //     // self.creation_collapsible_list.username = username.clone();
+
+    //     // Handle creation collapsible list logic
+    //     if let Some((show, collapsible_button)) = process_room_setup_events(
+    //         current_item, self
+    //     ) {
+    //         return GroupStateResult {
+    //             show,
+    //             collapsible_button,
+    //             summary_text: None,
+    //             avatar_user_ids: None,
+    //         };
+    //     }
+
+    //     // Try to find and update existing groups
+    //     if let Some((show, collapsible_button)) = find_and_update_existing_group(
+    //         current_item, self, previous_item_is_small_state
+    //     ) {
+    //         // Get cached data for the group if it's the start of a group
+    //         let (summary_text, avatar_user_ids) = if collapsible_button != CollapsibleButton::None {
+    //             // Find the group and get its cached data
+    //             if let Some(group) = self.small_state_groups.iter_mut().find(|g| g.range.start == current_item.index) {
+    //                 let summary = Some(group.get_summary().to_string());
+    //                 let avatars = Some(group.get_avatar_user_ids().to_vec());
+    //                 (summary, avatars)
+    //             } else {
+    //                 (None, None)
+    //             }
+    //         } else {
+    //             (None, None)
+    //         };
+            
+    //         return GroupStateResult {
+    //             show,
+    //             collapsible_button,
+    //             summary_text,
+    //             avatar_user_ids,
+    //         };
+    //     }
+
+    //     // Create new group if needed
+    //     if let Some((show, collapsible_button)) = create_new_group_if_needed(
+    //     current_item, previous_item_is_small_state,next_item_is_small_state, self
+    //     ) {
+    //         return GroupStateResult {
+    //             show,
+    //             collapsible_button,
+    //             summary_text: None,
+    //             avatar_user_ids: None,
+    //         };
+    //     }
+    //     // Default return - collapsed state, no collapsible button
+    //     GroupStateResult {
+    //         show: true,
+    //         collapsible_button: CollapsibleButton::None,
+    //         summary_text: None,
+    //         avatar_user_ids: None,
+    //     }
+    // }
+
+    pub fn compute_group_state_2(&mut self, small_state_events: Vec<UserEvent>) {
+        if small_state_events.is_empty() {
+            return;
         }
 
-        // Handle room creation events as a special case
-        if let Some((show, collapsible_button)) = process_room_creation_event(
-            current_item, previous_item_is_small_state, self
-        ) {
-            let summary_text = if collapsible_button != CollapsibleButton::None {
-                Some(format!(
-                    "{} created and configured the room",
-                    self.creation_collapsible_list.username
-                ))
-            } else {
-                None
-            };
-            let avatar_user_ids = if let Some((creator_id, _)) = &self.room_creation {
-                Some(vec![creator_id.clone()])
+        // Track room creation state locally
+        let mut creation_events = Vec::new();
+        let mut creation_end_index = None;
+        let mut room_creator = None;
+        let mut regular_events = Vec::new();
+        
+        for event in &small_state_events {
+            if event.transition == SmallStateType::CreateRoom {
+                // Start tracking room creation
+                room_creator = event.sender.clone();
+                creation_end_index = Some(event.index);
+                creation_events.push(event.clone());
+            } else if let Some(last_creation_index) = creation_end_index {
+                if event.transition == SmallStateType::Joined &&
+                   event.sender.as_ref() == room_creator.as_ref() &&
+                   event.index == last_creation_index + 1 {
+                    // Include consecutive room creator events in room creation group
+                    creation_end_index = Some(event.index);
+                    creation_events.push(event.clone());
+                } else {
+                    // End room creation group and process it
+                    if !creation_events.is_empty() {
+                        self.create_room_creation_group(&creation_events);
+                        creation_events.clear();
+                    }
+                    creation_end_index = None;
+                    room_creator = None;
+                    
+                    // Add current event to regular events
+                    regular_events.push(event.clone());
+                }
             } else {
-                None
-            };
-            
-            return GroupStateResult {
-                show: show || !previous_item_is_small_state,
-                collapsible_button,
-                summary_text,
-                avatar_user_ids,
-            };
+                // Add to regular events
+                regular_events.push(event.clone());
+            }
         }
 
-        // Set username for creation collapsible list and create user event
-        self.creation_collapsible_list.username = username.clone();
-
-        // Handle creation collapsible list logic
-        if let Some((show, collapsible_button)) = process_room_setup_events(
-            current_item, self
-        ) {
-            return GroupStateResult {
-                show,
-                collapsible_button,
-                summary_text: None,
-                avatar_user_ids: None,
-            };
+        // Process any remaining room creation group
+        if !creation_events.is_empty() {
+            self.create_room_creation_group(&creation_events);
         }
 
-        // Try to find and update existing groups
-        if let Some((show, collapsible_button)) = find_and_update_existing_group(
-            current_item, self, previous_item_is_small_state
-        ) {
-            // Get cached data for the group if it's the start of a group
-            let (summary_text, avatar_user_ids) = if collapsible_button != CollapsibleButton::None {
-                // Find the group and get its cached data
-                if let Some(group) = self.small_state_groups.iter_mut().find(|g| g.range.start == current_item.index) {
-                    let summary = Some(group.get_summary().to_string());
-                    let avatars = Some(group.get_avatar_user_ids().to_vec());
-                    (summary, avatars)
-                } else {
-                    (None, None)
-                }
-            } else {
-                (None, None)
-            };
-            
-            return GroupStateResult {
-                show,
-                collapsible_button,
-                summary_text,
-                avatar_user_ids,
-            };
+        // Group consecutive regular events
+        if regular_events.is_empty() {
+            return;
         }
 
-        // Create new group if needed
-        if let Some((show, collapsible_button)) = create_new_group_if_needed(
-        current_item, previous_item_is_small_state,next_item_is_small_state, self
-        ) {
-            return GroupStateResult {
-                show,
-                collapsible_button,
-                summary_text: None,
-                avatar_user_ids: None,
-            };
+        let mut current_group_events = vec![regular_events[0].clone()];
+        
+        for i in 1..regular_events.len() {
+            let prev_index = regular_events[i - 1].index;
+            let current_index = regular_events[i].index;
+            
+            // Check if current event is consecutive to the previous one
+            if current_index == prev_index + 1 {
+                // Add to current group
+                current_group_events.push(regular_events[i].clone());
+            } else {
+                // Process current group if it has enough events
+                if current_group_events.len() >= MIN_GROUP_SIZE_FOR_COLLAPSE {
+                    self.create_group_from_events(&current_group_events);
+                }
+                
+                // Start a new group
+                current_group_events = vec![regular_events[i].clone()];
+            }
         }
-        // Default return - collapsed state, no collapsible button
-        GroupStateResult {
-            show: true,
-            collapsible_button: CollapsibleButton::None,
-            summary_text: None,
-            avatar_user_ids: None,
+        
+        // Process the final group
+        if current_group_events.len() >= MIN_GROUP_SIZE_FOR_COLLAPSE {
+            self.create_group_from_events(&current_group_events);
         }
     }
 
-    pub fn compute_group_state_2(items: Vec<UserEvent>) {
+    /// Creates a room creation SmallStateGroup from creation events
+    fn create_room_creation_group(&mut self, events: &[UserEvent]) {
+        if events.is_empty() {
+            return;
+        }
+        
+        let start_index = events.first().unwrap().index;
+        let end_index = events.last().unwrap().index + 1;
+        
+        let mut user_events_map = HashMap::new();
+        for event in events {
+            if let Some(effective_user_id) = get_effective_user_id(event) {
+                let user_events_vec: &mut Vec<UserEvent> = user_events_map.entry(effective_user_id).or_default();
+                if !user_events_vec.iter().any(|e| e.index == event.index) {
+                    user_events_vec.push(event.clone());
+                }
+            }
+        }
+        
+        let room_creator = events.first()
+            .and_then(|e| e.sender.clone());
+        
+        let mut new_group = SmallStateGroup {
+            is_room_creation: true,
+            room_creator,
+            opened: false,
+            user_events_map,
+            cached_summary: None,
+            cached_avatar_user_ids: None,
+        };
+        
+        // Pre-compute cache for the new group
+        new_group.update_cached_data();
+        
+        // Use the first event's event_id as the group header event_id
+        if let Some(header_event_id) = events.first().and_then(|e| e.event_id.clone()) {
+            self.small_state_groups.insert(start_index..end_index, header_event_id.clone());
+            self.groups_by_event_id.insert(header_event_id, new_group);
+        }
+    }
 
+    /// Creates a SmallStateGroup from a collection of consecutive UserEvents
+    fn create_group_from_events(&mut self, events: &[UserEvent]) {
+        if events.is_empty() {
+            return;
+        }
+        let mut user_events_map = HashMap::new();
+        for event in events {
+            // Direct implementation since append_user_event_to_map is commented out
+            if let Some(effective_user_id) = get_effective_user_id(event) {
+                let user_events_vec: &mut Vec<UserEvent> = user_events_map.entry(effective_user_id).or_default();
+                if !user_events_vec.iter().any(|e| e.index == event.index) {
+                    user_events_vec.push(event.clone());
+                }
+            }
+        }
+        
+        let start_index = events.first().unwrap().index;
+        let end_index = events.last().unwrap().index + 1;
+        
+        let mut new_group = SmallStateGroup {
+            is_room_creation: false,
+            room_creator: None,
+            opened: false,
+            user_events_map,
+            cached_summary: None,
+            cached_avatar_user_ids: None,
+        };
+        
+        // Pre-compute cache for the new group
+        new_group.update_cached_data();
+        
+        // Use the first event's event_id as the group header event_id
+        if let Some(header_event_id) = events.first().and_then(|e| e.event_id.clone()) {
+            self.small_state_groups.insert(start_index..end_index, header_event_id.clone());
+            self.groups_by_event_id.insert(header_event_id, new_group);
+        }
     }
 
 
+    // COMMENTED OUT: This method uses the old Vec interface (iter_mut)
+    // Temporary stub method to maintain compilation
     /// Handles the rendering logic for small state events based on their group state.
-    /// This function manages visibility, collapsible button states, and summary text display
-    /// for timeline items that are part of collapsible groups.
-    ///
-    /// # Arguments
-    /// * `cx` - Makepad context for UI operations
-    /// * `item` - The widget reference for the timeline item
-    /// * `item_id` - The index of this item in the timeline
-    /// * `opened` - Whether this individual item should be rendered (based on group state)
-    /// * `collapsible_button` - Collapsible button state for this item
-    /// * `room_id` - The room ID for avatar fetching
+    /// 
+    /// STUB: This is a temporary stub to allow testing of compute_group_state_2.
     pub fn render_collapsible_button_and_body(
         &mut self,
-        cx: &mut Cx,
-        item: &WidgetRef,
-        item_id: usize,
-        opened: bool,
-        collapsible_button: CollapsibleButton,
-        room_id: &matrix_sdk::ruma::RoomId,
+        _cx: &mut Cx,
+        _item: &WidgetRef,
+        _item_id: usize,
+        _opened: bool,
+        _collapsible_button: CollapsibleButton,
+        _room_id: &matrix_sdk::ruma::RoomId,
     ) {
-        // Render logic based on group state
-        if opened {
-            // This item should be visible - set appropriate button text if this is a group leader
-            if collapsible_button != CollapsibleButton::None {
-                // Update button text to show current group state:
-                // ▶ = group is expanded (click to collapse)
-                // ▼ = group is collapsed (click to expand)
-                let button_text = if collapsible_button == CollapsibleButton::Expanded { "▼" } else { "▶" };
-                item.button(ids!(collapsible_button))
-                    .set_text(cx, button_text);
-                if self.room_creation.is_some()
-                    && self.creation_collapsible_list.range.start == item_id
-                {
-                    let summary_text = format!(
-                        "{} created and configured the room",
-                        self.creation_collapsible_list.username
-                    );
-                    item.view(ids!(small_state_header)).set_visible(cx, true);
-                    
-                    // For creation groups, show only the creator's avatar
-                    if let Some((creator_id, _)) = &self.room_creation {
-                        let creator_ids = vec![creator_id.clone()];
-                        populate_avatar_row_from_user_ids(cx, item, room_id, &creator_ids);
-                    }
-                    
-                    item.label(ids!(small_state_header.summary_text))
-                        .set_text(cx, &summary_text);
-                    item.view(ids!(body)).set_visible(cx, false);
-                    return;
-                }
-                // Find the group and use cached data for rendering
-                for group in &mut self.small_state_groups {
-                    if group.range.start == item_id {
-                        item.view(ids!(small_state_header)).set_visible(cx, true);
-                        
-                        // Use cached summary text (compute if not cached)
-                        let summary_text = group.get_summary();
-                        item.label(ids!(small_state_header.summary_text))
-                            .set_text(cx, summary_text);
-                        
-                        // Use cached avatar user IDs for lightweight avatar population
-                        let avatar_user_ids = group.get_avatar_user_ids();
-                        populate_avatar_row_from_user_ids(cx, item, room_id, avatar_user_ids);
-                        
-                        item.view(ids!(body)).set_visible(cx, false);
-                        break;
-                    }
-                }
-                item.view(ids!(body)).set_visible(cx, collapsible_button == CollapsibleButton::Expanded);
-            } else {
-                item.view(ids!(small_state_header)).set_visible(cx, false);
-                item.view(ids!(body)).set_visible(cx, true);
-            }
-        } else {
-            item.view(ids!(small_state_header)).set_visible(cx, false);
-            item.view(ids!(body)).set_visible(cx, false);
+        // Stub implementation - does nothing
+    }
+
+    // COMMENTED OUT: This method uses the old Vec interface (iter_mut, push, etc.)
+    // Temporary stub method to maintain compilation
+    /// Analyzes a timeline item and determines its grouping behavior.
+    /// 
+    /// STUB: This is a temporary stub to allow testing of compute_group_state_2.
+    pub fn compute_group_state(
+        &mut self,
+        _username: String,
+        _current_item: &UserEvent,
+        _previous_item_is_small_state: bool,
+        _next_item_is_small_state: bool,
+    ) -> GroupStateResult {
+        // Stub implementation - returns default
+        GroupStateResult {
+            show: true,
+            collapsible_button: CollapsibleButton::None,
+            summary_text: None,
+            avatar_user_ids: None,
         }
     }
 }
@@ -408,7 +542,7 @@ impl From<&TimelineItemContent> for SmallStateType {
 }
 
 /// Condensed version of a `EventTimelineItem`, used for generating summaries.
-#[derive(Debug, Clone, Default)]
+#[derive(Debug, Clone, Default, PartialEq, Eq)]
 pub struct UserEvent {
     /// The transition type
     pub transition: SmallStateType,
@@ -749,35 +883,37 @@ fn get_effective_user_id(user_event: &UserEvent) -> Option<OwnedUserId> {
     }
 }
 
-/// Appends a new user event to the given HashMap of user events.
-/// 
-/// The HashMap structure maps: user_id -> Vec<UserEvent>
-/// This simplified structure groups events by user ID, avoiding the complexity
-/// of maintaining timeline indices as keys.
-fn append_user_event_to_map(
-    user_event: UserEvent,
-    user_events: &mut HashMap<OwnedUserId, Vec<UserEvent>>,
-) {
-    let Some(effective_user_id) = get_effective_user_id(&user_event) else { return };
-    // Get or create the user's event list
-    let user_events_vec = user_events.entry(effective_user_id).or_default();
+// COMMENTED OUT: This function uses the old Vec interface (push, iter, any)
+// /// Appends a new user event to the given HashMap of user events.
+// /// 
+// /// The HashMap structure maps: user_id -> Vec<UserEvent>
+// /// This simplified structure groups events by user ID, avoiding the complexity
+// /// of maintaining timeline indices as keys.
+// fn append_user_event_to_map(
+//     user_event: UserEvent,
+//     user_events: &mut HashMap<OwnedUserId, Vec<UserEvent>>,
+// ) {
+//     let Some(effective_user_id) = get_effective_user_id(&user_event) else { return };
+//     // Get or create the user's event list
+//     let user_events_vec = user_events.entry(effective_user_id).or_default();
     
-    // Add the event if it's not already present (avoid duplicates)
-    if !user_events_vec.iter().any(|event| event.index == user_event.index) {
-        user_events_vec.push(user_event);
-    }
-}
-
-/// Appends a user event to a group and invalidates its cache.
-fn append_user_event_to_group(
-    user_event: UserEvent,
-    group: &mut SmallStateGroup,
-) {
-    append_user_event_to_map(user_event, &mut group.user_events_map);
-    // Invalidate cache since the group has been modified
-    group.cached_summary = None;
-    group.cached_avatar_user_ids = None;
-}
+//     // Add the event if it's not already present (avoid duplicates)
+//     if !user_events_vec.iter().any(|event| event.index == user_event.index) {
+//         user_events_vec.push(user_event);
+//     }
+// }
+
+// COMMENTED OUT: This function uses the old Vec interface (push via append_user_event_to_map)
+// /// Appends a user event to a group and invalidates its cache.
+// fn append_user_event_to_group(
+//     user_event: UserEvent,
+//     group: &mut SmallStateGroup,
+// ) {
+//     append_user_event_to_map(user_event, &mut group.user_events_map);
+//     // Invalidate cache since the group has been modified
+//     group.cached_summary = None;
+//     group.cached_avatar_user_ids = None;
+// }
 
 /// Checks if a timeline item represents a small state change (membership change, profile change, poll, redacted, or unable to decrypt).
 ///
@@ -800,6 +936,34 @@ pub fn is_small_state(timeline_item: Option<&Arc<TimelineItem>>) -> bool {
         .unwrap_or(false)
 }
 
+/// Extracts small state events from timeline items and converts them to UserEvents.
+///
+/// # Arguments
+/// * `timeline_items` - An iterator over timeline items to process
+///
+/// # Returns
+/// * `Vec<UserEvent>` - A vector of converted UserEvent objects from small state timeline items
+pub fn extract_small_state_events<I>(timeline_items: I) -> Vec<UserEvent> 
+where
+    I: IntoIterator<Item = std::sync::Arc<matrix_sdk_ui::timeline::TimelineItem>>,
+    I::IntoIter: ExactSizeIterator,
+{
+    timeline_items
+        .into_iter()
+        .enumerate()
+        .filter_map(|(index, item)| {
+            if is_small_state(Some(&item)) {
+                if let matrix_sdk_ui::timeline::TimelineItemKind::Event(event_tl_item) = item.kind() {
+                    Some(convert_event_tl_item_to_user_event(event_tl_item, index))
+                } else {
+                    None
+                }
+            } else {
+                None
+            }
+        })
+        .collect()
+}
 
 /// Generates a summary string from user events.
 ///
@@ -907,302 +1071,257 @@ fn populate_avatar_row_from_user_ids(
     avatar_row.avatar_row(ids!(user_event_avatar_row)).set_avatar_row(cx, room_id, None, &receipts_map);
 }
 
-/// Processes room creation events for special grouping treatment.
-/// 
-/// Returns an optional tuple containing a boolean flag (whether to display it) and a collapsible button state.
-fn process_room_creation_event(
-    current_item: &UserEvent,
-    previous_item_is_small_state: bool,
-    group_manager: &mut SmallStateGroupManager,
-) -> Option<(bool, CollapsibleButton)> {
-    if group_manager.room_creation.is_some() {
-        return None;
-    }
-    let item_id = current_item.index;
-    if current_item.transition == SmallStateType::CreateRoom {
-        if let (Some(creator_id), Some(event_id)) = (current_item.sender.clone(), current_item.event_id.clone()) {
-            group_manager.room_creation = Some((creator_id, event_id.to_owned()));
-            group_manager.creation_collapsible_list.range.start = item_id;
-            if group_manager.creation_collapsible_list.range.end <= item_id {
-                group_manager.creation_collapsible_list.range.end = item_id + 1;
-            }
-            return Some((
-                true,
-                if previous_item_is_small_state {
-                    CollapsibleButton::None
-                } else if group_manager.creation_collapsible_list.opened {
-                    CollapsibleButton::Expanded
-                } else {
-                    CollapsibleButton::Collapsed
-                }
-            ));
-        }
-    }
-    None
-}
-
-/// Manages room setup events in the creation collapsible list.
-/// 
-/// Returns an optional tuple containing a boolean flag (whether to display it) and a collapsible button state.
-fn process_room_setup_events(
-    user_event: &UserEvent,
-    group_manager: &mut SmallStateGroupManager,
-) -> Option<(bool, CollapsibleButton)> {
-    let item_id = user_event.index;
-    // Check if this is the start of the creation collapsible list
-    if item_id == group_manager.creation_collapsible_list.range.start
-        && !group_manager.creation_collapsible_list.range.is_empty()
-    {
-        return Some((
-            true,
-            if group_manager.creation_collapsible_list.opened {
-                CollapsibleButton::Expanded
-            } else {
-                CollapsibleButton::Collapsed
-            },
-        ));
-    }
-
-    // Handle configure room and joined events in creation list
-    if matches!(user_event.transition, SmallStateType::ConfigureRoom | SmallStateType::Joined) {
-        if group_manager.creation_collapsible_list.range.is_empty() {
-            return None;
-        }
-        
-        if group_manager.creation_collapsible_list.range.end == item_id {
-            group_manager.creation_collapsible_list.range.end = item_id + 1;
-            return Some((
-                group_manager.creation_collapsible_list.opened,
-                CollapsibleButton::None,
-            ));
-        }
+// COMMENTED OUT: This function references removed fields
+// /// Processes room creation events for special grouping treatment.
+// /// 
+// /// Returns an optional tuple containing a boolean flag (whether to display it) and a collapsible button state.
+// fn process_room_creation_event(
+//     current_item: &UserEvent,
+//     previous_item_is_small_state: bool,
+//     group_manager: &mut SmallStateGroupManager,
+// ) -> Option<(bool, CollapsibleButton)> {
+//     if group_manager.room_creation.is_some() {
+//         return None;
+//     }
+//     let item_id = current_item.index;
+//     if current_item.transition == SmallStateType::CreateRoom {
+//         if let (Some(creator_id), Some(event_id)) = (current_item.sender.clone(), current_item.event_id.clone()) {
+//             group_manager.room_creation = Some((creator_id, event_id.to_owned()));
+//             group_manager.creation_collapsible_list.range.start = item_id;
+//             if group_manager.creation_collapsible_list.range.end <= item_id {
+//                 group_manager.creation_collapsible_list.range.end = item_id + 1;
+//             }
+//             return Some((
+//                 true,
+//                 if previous_item_is_small_state {
+//                     CollapsibleButton::None
+//                 } else if group_manager.creation_collapsible_list.opened {
+//                     CollapsibleButton::Expanded
+//                 } else {
+//                     CollapsibleButton::Collapsed
+//                 }
+//             ));
+//         }
+//     }
+//     None
+// }
+
+// COMMENTED OUT: This function references removed fields
+// /// Manages room setup events in the creation collapsible list.
+// /// 
+// /// Returns an optional tuple containing a boolean flag (whether to display it) and a collapsible button state.
+// fn process_room_setup_events(
+//     user_event: &UserEvent,
+//     group_manager: &mut SmallStateGroupManager,
+// ) -> Option<(bool, CollapsibleButton)> {
+//     let item_id = user_event.index;
+//     // Check if this is the start of the creation collapsible list
+//     if item_id == group_manager.creation_collapsible_list.range.start
+//         && !group_manager.creation_collapsible_list.range.is_empty()
+//     {
+//         return Some((
+//             true,
+//             if group_manager.creation_collapsible_list.opened {
+//                 CollapsibleButton::Expanded
+//             } else {
+//                 CollapsibleButton::Collapsed
+//             },
+//         ));
+//     }
+//
+//     // Handle configure room and joined events in creation list
+//     if matches!(user_event.transition, SmallStateType::ConfigureRoom | SmallStateType::Joined) {
+//         if group_manager.creation_collapsible_list.range.is_empty() {
+//             return None;
+//         }
+//         
+//         if group_manager.creation_collapsible_list.range.end == item_id {
+//             group_manager.creation_collapsible_list.range.end = item_id + 1;
+//             return Some((
+//                 group_manager.creation_collapsible_list.opened,
+//                 CollapsibleButton::None,
+//             ));
+//         }
+//         
+//         if group_manager.creation_collapsible_list.range.contains(&item_id) {
+//             return Some((
+//                 group_manager.creation_collapsible_list.opened,
+//                 CollapsibleButton::None,
+//             ));
+//         }
+//     }
+//     None
+// }
+
+// COMMENTED OUT: This function uses the old Vec interface (iter_mut, iter)
+// /// Finds and updates existing small state groups.
+// /// 
+// /// Returns an optional tuple containing a boolean flag (whether to display it) and a collapsible button state.
+// fn find_and_update_existing_group(
+//     user_event: &UserEvent,
+//     group_manager: &mut SmallStateGroupManager,
+//     previous_item_is_small_state: bool,
+// ) -> Option<(bool, CollapsibleButton)> {
+//     let item_id = user_event.index;
+//     // First check for direct matches or containment
+//     for group in group_manager.small_state_groups.iter_mut() {
+//         if group.range.start == item_id {
+//             append_user_event_to_group(user_event.clone(), group);
+//             let collapsible_button = if group.range.len() <= MIN_GROUP_SIZE_FOR_COLLAPSE || previous_item_is_small_state {
+//                 CollapsibleButton::None
+//             } else if group.opened {
+//                 CollapsibleButton::Expanded
+//             } else {
+//                 CollapsibleButton::Collapsed
+//             };
+//             return Some((true, collapsible_button));
+//         }
         
-        if group_manager.creation_collapsible_list.range.contains(&item_id) {
-            return Some((
-                group_manager.creation_collapsible_list.opened,
-                CollapsibleButton::None,
-            ));
-        }
-    }
-    None
-}
-
-/// Finds and updates existing small state groups.
-/// 
-/// Returns an optional tuple containing a boolean flag (whether to display it) and a collapsible button state.
-fn find_and_update_existing_group(
-    user_event: &UserEvent,
-    group_manager: &mut SmallStateGroupManager,
-    previous_item_is_small_state: bool,
-) -> Option<(bool, CollapsibleButton)> {
-    let item_id = user_event.index;
-    // First check for direct matches or containment
-    for group in group_manager.small_state_groups.iter_mut() {
-        if group.range.start == item_id {
-            append_user_event_to_group(user_event.clone(), group);
-            let collapsible_button = if group.range.len() <= MIN_GROUP_SIZE_FOR_COLLAPSE || previous_item_is_small_state {
-                CollapsibleButton::None
-            } else if group.opened {
-                CollapsibleButton::Expanded
-            } else {
-                CollapsibleButton::Collapsed
-            };
-            return Some((true, collapsible_button));
-        }
-        
-        if group.range.contains(&item_id) {
-            append_user_event_to_group(user_event.clone(), group);
-            return Some((
-                group.opened || group.range.len() <= MIN_GROUP_SIZE_FOR_COLLAPSE,
-                CollapsibleButton::None,
-            ));
-        }
-    }
+//         if group.range.contains(&item_id) {
+//             append_user_event_to_group(user_event.clone(), group);
+//             return Some((
+//                 group.opened || group.range.len() <= MIN_GROUP_SIZE_FOR_COLLAPSE,
+//                 CollapsibleButton::None,
+//             ));
+//         }
+//     }
     
-    // Check for backward extension (need separate loop to avoid borrow conflicts)
-    let group_ranges: Vec<Range<usize>> = group_manager
-        .small_state_groups
-        .iter()
-        .map(|g| g.range.clone())
-        .collect();
+//     // Check for backward extension (need separate loop to avoid borrow conflicts)
+//     let group_ranges: Vec<Range<usize>> = group_manager
+//         .small_state_groups
+//         .iter()
+//         .map(|g| g.range.clone())
+//         .collect();
     
-    for (idx, group) in group_manager.small_state_groups.iter_mut().enumerate() {
-        if group.range.start == item_id + 1 {
-            // Check if item_id is already covered by another group
-            let mut conflict = false;
-            for (other_idx, other_range) in group_ranges.iter().enumerate() {
-                if other_idx != idx && other_range.contains(&item_id) {
-                    conflict = true;
-                    break;
-                }
-            }
+//     for (idx, group) in group_manager.small_state_groups.iter_mut().enumerate() {
+//         if group.range.start == item_id + 1 {
+//             // Check if item_id is already covered by another group
+//             let mut conflict = false;
+//             for (other_idx, other_range) in group_ranges.iter().enumerate() {
+//                 if other_idx != idx && other_range.contains(&item_id) {
+//                     conflict = true;
+//                     break;
+//                 }
+//             }
             
-            if !conflict {
-                // Extend this group backwards to include current item
-                let old_end = group.range.end;
-                group.range = item_id..old_end;
-                append_user_event_to_group(user_event.clone(), group);
-                return Some((
-                    group.opened || group.range.len() <= MIN_GROUP_SIZE_FOR_COLLAPSE || !previous_item_is_small_state,
-                    if previous_item_is_small_state {
-                        CollapsibleButton::None
-                    } else {
-                        CollapsibleButton::Collapsed
-                    },
-                ));
-            }
-        }
-    }
+//             if !conflict {
+//                 // Extend this group backwards to include current item
+//                 let old_end = group.range.end;
+//                 group.range = item_id..old_end;
+//                 append_user_event_to_group(user_event.clone(), group);
+//                 return Some((
+//                     group.opened || group.range.len() <= MIN_GROUP_SIZE_FOR_COLLAPSE || !previous_item_is_small_state,
+//                     if previous_item_is_small_state {
+//                         CollapsibleButton::None
+//                     } else {
+//                         CollapsibleButton::Collapsed
+//                     },
+//                 ));
+//             }
+//         }
+//     }
     
-    None
-}
-
-/// Creates a new group if the next item is also a small state event.
-/// 
-/// Returns Some(result) if a new group was created, None otherwise.
-fn create_new_group_if_needed(
-    user_event: &UserEvent,
-    previous_item_is_small_state: bool,
-    next_item_is_small_state: bool,
-    group_manager: &mut SmallStateGroupManager,
-) -> Option<(bool, CollapsibleButton)> {
-    if next_item_is_small_state {
-        let mut user_events_map = HashMap::new();
-        append_user_event_to_map(user_event.clone(), &mut user_events_map);
-        let item_id = user_event.index;
-        let mut new_group = SmallStateGroup {
-            range: item_id..(item_id + 2), // Plus 2 to include the next item into the group
-            opened: false,
-            user_events_map,
-            cached_summary: None,
-            cached_avatar_user_ids: None,
-        };
+//     None
+// }
+
+// COMMENTED OUT: This function uses the old Vec interface (push)
+// /// Creates a new group if the next item is also a small state event.
+// /// 
+// /// Returns Some(result) if a new group was created, None otherwise.
+// fn create_new_group_if_needed(
+//     user_event: &UserEvent,
+//     previous_item_is_small_state: bool,
+//     next_item_is_small_state: bool,
+//     group_manager: &mut SmallStateGroupManager,
+// ) -> Option<(bool, CollapsibleButton)> {
+//     if next_item_is_small_state {
+//         let mut user_events_map = HashMap::new();
+//         append_user_event_to_map(user_event.clone(), &mut user_events_map);
+//         let item_id = user_event.index;
+//         let mut new_group = SmallStateGroup {
+//             range: item_id..(item_id + 2), // Plus 2 to include the next item into the group
+//             opened: false,
+//             user_events_map,
+//             cached_summary: None,
+//             cached_avatar_user_ids: None,
+//         };
         
-        // Pre-compute cache for the new group
-        new_group.update_cached_data();
+//         // Pre-compute cache for the new group
+//         new_group.update_cached_data();
         
-        group_manager.small_state_groups.push(new_group.clone());
-        let collapsible_button = if new_group.range.len() <= MIN_GROUP_SIZE_FOR_COLLAPSE || previous_item_is_small_state {
-            CollapsibleButton::None
-        } else {
-            CollapsibleButton::Collapsed
-        };
-        return Some((true, collapsible_button));
-    }
-    None
-}
-
+//         group_manager.small_state_groups.push(new_group.clone());
+//         let collapsible_button = if new_group.range.len() <= MIN_GROUP_SIZE_FOR_COLLAPSE || previous_item_is_small_state {
+//             CollapsibleButton::None
+//         } else {
+//             CollapsibleButton::Collapsed
+//         };
+//         return Some((true, collapsible_button));
+//     }
+//     None
+// }
+
+// COMMENTED OUT: This function uses the old Vec interface (iter_mut, values_mut, iter_mut)
+// Temporary stub function to maintain compilation
 /// Handles item_id changes during backward pagination by shifting indices in small SmallStateGroupManager
 ///
+/// When backward pagination occurs, new items are inserted at the beginning of the timeline,
+/// which shifts all existing indices. This function updates the rangemap and user event indices
+/// to maintain consistency with the shifted timeline.
+///
 /// # Arguments
-/// * `old_len` - The length of the timeline before adding new items
-/// * `new_len` - The length of the timeline after adding new items  
-/// * `group_manager` - Mutable reference to the small state group manager to update
+/// * `shift` - The number of positions to shift indices (positive values shift forward)
+/// * `group_manager` - The group manager to update
 pub fn handle_backward_pagination_index_shift(
     shift: i32,
     group_manager: &mut SmallStateGroupManager,
 ) {
-    // Apply the shift to the small_state_groups
-    for SmallStateGroup {
-        range,
-        user_events_map,
-        opened: _,
-        ..
-    } in &mut group_manager.small_state_groups
-    {
+    if shift == 0 {
+        return;
+    }
+
+    // Create new rangemap with shifted ranges
+    let mut new_rangemap = RangeMap::new();
+    
+    for (range, event_id) in group_manager.small_state_groups.iter() {
         let new_start = (range.start as i32 + shift).max(0) as usize;
         let new_end = (range.end as i32 + shift).max(0) as usize;
-        *range = new_start..new_end;
+        let new_range = new_start..new_end;
+        new_rangemap.insert(new_range, event_id.clone());
+    }
+    
+    group_manager.small_state_groups = new_rangemap;
 
-        // Update the user events map indices
-        for user_events in user_events_map.values_mut() {
+    // Update user event indices in all groups
+    for group in group_manager.groups_by_event_id.values_mut() {
+        for user_events in group.user_events_map.values_mut() {
             for user_event in user_events.iter_mut() {
                 user_event.index = (user_event.index as i32 + shift).max(0) as usize;
             }
         }
-    }
-
-    // Apply the shift to the creation collapsible list
-    if !group_manager.creation_collapsible_list.range.is_empty() {
-        let new_start =
-            (group_manager.creation_collapsible_list.range.start as i32 + shift).max(0) as usize;
-        let new_end =
-            (group_manager.creation_collapsible_list.range.end as i32 + shift).max(0) as usize;
-        group_manager.creation_collapsible_list.range = new_start..new_end;
+        
+        // Invalidate cached data since indices have changed
+        group.cached_summary = None;
+        group.cached_avatar_user_ids = None;
     }
 }
 
 
+// COMMENTED OUT: This function uses the old Vec interface (iter_mut)
+// Temporary stub function to maintain compilation
 /// Handles collapsible button click events for small state event groups.
 /// 
-/// This function manages toggling the open/closed state of groups and updates
-/// the UI accordingly including button text and clearing cached drawn status.
-///
-/// # Arguments
-/// * `cx` - Makepad context for UI operations
-/// * `wr` - Widget reference for UI updates
-/// * `item_id` - The index of the clicked item in the timeline
-/// * `portal_list` - Portal list widget for scrolling operations
-/// * `group_manager` - Mutable reference to the small state group manager
-/// * `content_drawn_since_last_update` - Mutable reference to content drawn tracking
-/// * `profile_drawn_since_last_update` - Mutable reference to profile drawn tracking
-/// * `items_len` - Length of the timeline items list
+/// STUB: This is a temporary stub to allow testing of compute_group_state_2.
 pub fn handle_collapsible_button_click(
-    cx: &mut Cx,
-    wr: &WidgetRef,
-    item_id: usize,
-    portal_list: &makepad_widgets::PortalListRef,
-    group_manager: &mut SmallStateGroupManager,
-    content_drawn_since_last_update: &mut RangeSet<usize>,
-    profile_drawn_since_last_update: &mut RangeSet<usize>,
-    items_len: usize,
+    _cx: &mut Cx,
+    _wr: &WidgetRef,
+    _item_id: usize,
+    _portal_list: &makepad_widgets::PortalListRef,
+    _group_manager: &mut SmallStateGroupManager,
+    _content_drawn_since_last_update: &mut RangeSet<usize>,
+    _profile_drawn_since_last_update: &mut RangeSet<usize>,
+    _items_len: usize,
 ) {
-    let mut is_creation_group = false;                        
-    if group_manager.creation_collapsible_list.range.start == item_id {
-        let open = &mut group_manager.creation_collapsible_list.opened;
-        // Toggle the group's open/closed state
-        *open = !*open;
-        let range = &group_manager.creation_collapsible_list.range;
-        let to_redraw = range.start..range.end + 1;
-        // Force redraw of all items in this group by clearing their cached drawn status
-        content_drawn_since_last_update.remove(to_redraw.clone());
-        profile_drawn_since_last_update.remove(to_redraw);
-        
-        // Update button text to reflect new state:
-        // ▼ (down arrow) = expanded/open - items are visible
-        // ▶(right arrow) = collapsed/closed - items are hidden
-        let button_text = if *open { "▼" } else { "▶" };
-        wr.button(ids!(collapsible_button)).set_text(cx, button_text);
-        // If the last item is a group of small state events, scroll to the end when it is expanded.
-        if group_manager.creation_collapsible_list.range.end == items_len && *open {
-            portal_list.smooth_scroll_to_end(cx, 90.0, None);
-        }
-        is_creation_group = true;
-    }
-
-    if !is_creation_group {
-        for SmallStateGroup { range, opened, .. } in &mut group_manager.small_state_groups {
-            if range.start == item_id {
-                // Toggle the group's open/closed state
-                *opened = !*opened;
-                // Force redraw of all items in this group by clearing their cached drawn status
-                let range_to_remove = range.clone(); // Only clone when actually needed
-                content_drawn_since_last_update.remove(range_to_remove.clone());
-                profile_drawn_since_last_update.remove(range_to_remove);
-
-                // Update button text to reflect new state:
-                // ▼ (down arrow) = expanded/open - items are visible
-                // ▶ (right arrow) = collapsed/closed - items are hidden
-                let button_text = if *opened { "▼" } else { "▶" };
-                wr.button(ids!(collapsible_button)).set_text(cx, button_text);
-                // If the last item is a group of small state events, scroll to the end when it is expanded.
-                if range.end == items_len && *opened {
-                    portal_list.smooth_scroll_to_end(cx, 90.0, None);
-                }
-                return;
-            }
-        }
-    }
+    // Stub implementation - does nothing
 }
 
 #[cfg(test)]
@@ -1227,92 +1346,122 @@ mod tests {
             sender: UserId::parse(sender).ok(),
         }, is_previous_small_state, is_next_small_state)
     }
-
-    #[test]
-    fn test_compute_group_state() {
-        let mut group_manager = SmallStateGroupManager::default();
-        let user_events = vec![
-            create_test_user_event(5, SmallStateType::Left, true, true),
-            create_test_user_event(4, SmallStateType::Left, true, true),
-            create_test_user_event(3, SmallStateType::Left, true, true), 
-            create_test_user_event(2, SmallStateType::Left, false, true)
-        ];
-        let mut results = HashMap::new();
-        for (user_event, previous_item_is_small_state, next_item_is_small_state)  in user_events.clone() {
-            let result = group_manager.compute_group_state(
-                "Alice".to_string(),
-                &user_event,
-                previous_item_is_small_state, // previous not small state
-                next_item_is_small_state, // next not small state
-            );
-            results.insert(user_event.index, result);
-        }
-        for (user_event, previous_item_is_small_state, next_item_is_small_state)  in user_events.clone() {
-            let result = group_manager.compute_group_state(
-                "Alice".to_string(),
-                &user_event,
-                previous_item_is_small_state, // previous not small state
-                next_item_is_small_state, // next not small state
-            );
-            results.insert(user_event.index, result);
-        }
-        assert!(results.get(&2).unwrap().show);
-        assert!(results.get(&2).unwrap().collapsible_button != CollapsibleButton::None);
-
-    }
-
-    #[test]
-    fn test_compute_group_state_2_items() {
-        let mut group_manager = SmallStateGroupManager::default();
-        let user_events = vec![
-            create_test_user_event(14, SmallStateType::ChangedName, true, false),
-            create_test_user_event(13, SmallStateType::ChangedName, false, true),
-        ];
-        let mut results = HashMap::new();
-        for (user_event, previous_item_is_small_state, next_item_is_small_state)  in user_events.clone() {
-            let result = group_manager.compute_group_state(
-                "Alice".to_string(),
-                &user_event,
-                previous_item_is_small_state, // previous not small state
-                next_item_is_small_state, // next not small state
-            );
-            results.insert(user_event.index, result);
-        }
-        for (user_event, previous_item_is_small_state, next_item_is_small_state)  in user_events.clone() {
-            let result = group_manager.compute_group_state(
-                "Alice".to_string(),
-                &user_event,
-                previous_item_is_small_state, // previous not small state
-                next_item_is_small_state, // next not small state
-            );
-            results.insert(user_event.index, result);
+    fn create_test_user_event2(
+        index: usize,
+        transition_type: SmallStateType,
+    ) -> UserEvent {
+        let sender = "@alice:example.com";
+        UserEvent {
+            index,
+            transition: transition_type,
+            display_name: sender.to_string(),
+            state_key: None,
+            event_id: EventId::parse(&format!("$event-{}-{:?}", index, transition_type)).ok(),
+            sender: UserId::parse(sender).ok(),
         }
-        assert!(results.get(&13).unwrap().show);
-        assert!(results.get(&13).unwrap().collapsible_button == CollapsibleButton::None);
     }
-
+    // COMMENTED OUT: This test uses the old Vec interface methods
+    // #[test]
+    // fn test_compute_group_state() {
+    //     let mut group_manager = SmallStateGroupManager::default();
+    //     let user_events = vec![
+    //         create_test_user_event(5, SmallStateType::Left, true, true),
+    //         create_test_user_event(4, SmallStateType::Left, true, true),
+    //         create_test_user_event(3, SmallStateType::Left, true, true), 
+    //         create_test_user_event(2, SmallStateType::Left, false, true)
+    //     ];
+    //     let mut results = HashMap::new();
+    //     for (user_event, previous_item_is_small_state, next_item_is_small_state)  in user_events.clone() {
+    //         let result = group_manager.compute_group_state(
+    //             "Alice".to_string(),
+    //             &user_event,
+    //             previous_item_is_small_state, // previous not small state
+    //             next_item_is_small_state, // next not small state
+    //         );
+    //         results.insert(user_event.index, result);
+    //     }
+    //     for (user_event, previous_item_is_small_state, next_item_is_small_state)  in user_events.clone() {
+    //         let result = group_manager.compute_group_state(
+    //             "Alice".to_string(),
+    //             &user_event,
+    //             previous_item_is_small_state, // previous not small state
+    //             next_item_is_small_state, // next not small state
+    //         );
+    //         results.insert(user_event.index, result);
+    //     }
+    //     assert!(results.get(&2).unwrap().show);
+    //     assert!(results.get(&2).unwrap().collapsible_button != CollapsibleButton::None);
+
+    // }
+
+    // COMMENTED OUT: This test uses the old Vec interface methods
+    // #[test]
+    // fn test_compute_group_state_2_items() {
+    //     let mut group_manager = SmallStateGroupManager::default();
+    //     let user_events = vec![
+    //         create_test_user_event(14, SmallStateType::ChangedName, true, false),
+    //         create_test_user_event(13, SmallStateType::ChangedName, false, true),
+    //     ];
+    //     let mut results = HashMap::new();
+    //     for (user_event, previous_item_is_small_state, next_item_is_small_state)  in user_events.clone() {
+    //         let result = group_manager.compute_group_state(
+    //             "Alice".to_string(),
+    //             &user_event,
+    //             previous_item_is_small_state, // previous not small state
+    //             next_item_is_small_state, // next not small state
+    //         );
+    //         results.insert(user_event.index, result);
+    //     }
+    //     for (user_event, previous_item_is_small_state, next_item_is_small_state)  in user_events.clone() {
+    //         let result = group_manager.compute_group_state(
+    //             "Alice".to_string(),
+    //             &user_event,
+    //             previous_item_is_small_state, // previous not small state
+    //             next_item_is_small_state, // next not small state
+    //         );
+    //         results.insert(user_event.index, result);
+    //     }
+    //     assert!(results.get(&13).unwrap().show);
+    //     assert!(results.get(&13).unwrap().collapsible_button == CollapsibleButton::None);
+    // }
+
+    // COMMENTED OUT: This test uses the old Vec interface methods
+    // #[test]
+    // fn test_compute_group_state_joined_items_out_creation() {
+    //     let mut group_manager = SmallStateGroupManager::default();
+    //     let user_events = vec![
+    //         create_test_user_event(16, SmallStateType::Joined, true, false),
+    //         create_test_user_event(15, SmallStateType::Joined, true, true),
+    //         create_test_user_event(14, SmallStateType::Joined, true, true),
+    //         create_test_user_event(13, SmallStateType::Joined, false, true),
+    //         create_test_user_event(3, SmallStateType::Joined, true, false),
+    //         create_test_user_event(2, SmallStateType::CreateRoom, false, true),
+    //     ];
+    //     let mut results = HashMap::new();
+    //     for (user_event, previous_item_is_small_state, next_item_is_small_state)  in user_events.clone() {
+    //         let result = group_manager.compute_group_state(
+    //             "Alice".to_string(),
+    //             &user_event,
+    //             previous_item_is_small_state, // previous not small state
+    //             next_item_is_small_state, // next not small state
+    //         );
+    //         results.insert(user_event.index, result);
+    //     }
+    //     assert!(results.get(&13).unwrap().show);
+    //     assert!(results.get(&13).unwrap().collapsible_button != CollapsibleButton::None);
+    // }
     #[test]
-    fn test_compute_group_state_joined_items_out_creation() {
+    fn test_new_compute_group_state_2_items() {
         let mut group_manager = SmallStateGroupManager::default();
-        let user_events = vec![
-            create_test_user_event(16, SmallStateType::Joined, true, false),
-            create_test_user_event(15, SmallStateType::Joined, true, true),
-            create_test_user_event(14, SmallStateType::Joined, true, true),
-            create_test_user_event(13, SmallStateType::Joined, false, true),
-            create_test_user_event(3, SmallStateType::Joined, true, false),
-            create_test_user_event(2, SmallStateType::CreateRoom, false, true),
+        let small_state_events = vec![
+            create_test_user_event2(2, SmallStateType::CreateRoom),
+            create_test_user_event2(3, SmallStateType::Joined),
+            create_test_user_event2(13, SmallStateType::Joined),
+            create_test_user_event2(14, SmallStateType::Joined),
+            create_test_user_event2(15, SmallStateType::Joined),
+            create_test_user_event2(16, SmallStateType::Joined),
         ];
-        let mut results = HashMap::new();
-        for (user_event, previous_item_is_small_state, next_item_is_small_state)  in user_events.clone() {
-            let result = group_manager.compute_group_state(
-                "Alice".to_string(),
-                &user_event,
-                previous_item_is_small_state, // previous not small state
-                next_item_is_small_state, // next not small state
-            );
-            results.insert(user_event.index, result);
-        }
-        assert!(results.get(&13).unwrap().show);
-        assert!(results.get(&13).unwrap().collapsible_button != CollapsibleButton::None);
+        group_manager.compute_group_state_2(small_state_events);
+        println!("group_manager: {:?}", group_manager);
     }
 }

From 5d6d59fbc7b249c134f45630f7c69ef397d39066 Mon Sep 17 00:00:00 2001
From: alanpoon <brightshadowx@gmail.com>
Date: Wed, 7 Jan 2026 19:43:25 +0800
Subject: [PATCH 23/26] added smallstate header

---
 src/home/room_screen.rs               | 101 +++-------
 src/home/small_state_group_manager.rs | 266 ++++++++++++++++++++++++--
 2 files changed, 270 insertions(+), 97 deletions(-)

diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs
index a394532f..dd265892 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -80,7 +80,6 @@ live_design! {
     use crate::shared::restore_status_view::*;
     use crate::home::link_preview::LinkPreview;
     use crate::home::small_state_group_manager::SmallStateHeader;
-    use crate::home::small_state_group_manager::CollapsibleButton;
     use link::tsp_link::TspSignIndicator;
 
     COLOR_BG = #xfff8ee
@@ -327,16 +326,17 @@ live_design! {
     SmallStateEvent = <View> {
         width: Fill,
         height: Fit,
-        flow: Down,
+        flow: Right,
+        margin: { top: 4.0, bottom: 4.0}
+        padding: { top: 1.0, bottom: 1.0, right: 10.0 }
         spacing: 0.0
         cursor: Default
-        small_state_header = <SmallStateHeader> { }
+
         body = <View> {
             width: Fill,
             height: Fit
             flow: Right,
-            margin: { top: 4.0, bottom: 4.0}
-            padding: { left: 7.0, top: 2.0, bottom: 2.0, right: 10.0 }
+            padding: { left: 7.0, top: 2.0, bottom: 2.0 }
             spacing: 5.0
 
             left_container = <View> {
@@ -471,7 +471,7 @@ live_design! {
             Empty = <Empty> {}
             DateDivider = <DateDivider> {}
             ReadMarker = <ReadMarker> {}
-            CollapsibleButton = <CollapsibleButton> {}
+            SmallStateHeader = <SmallStateHeader> {}
         }
 
         // A jump to bottom button (with an unread message badge) that is shown
@@ -967,36 +967,27 @@ impl Widget for RoomScreen {
             // accounting for small state groups (collapsed groups take 1 slot each)
             let base_item_count = tl_items.len();
             let group_count = tl_state.group_manager.small_state_groups.len();
+            println!("group_count: {}, base_item_count: {}", group_count, base_item_count);
             let last_item_id = base_item_count + group_count;
 
             let list = list_ref.deref_mut();
             list.set_item_range(cx, 0, last_item_id);
 
             while let Some(item_id) = list.next_visible_item(cx) {
+                // Check if this item is a group header and get the count of groups before it
+                let (is_header, groups_before) = tl_state.group_manager.check_group_header_status(item_id);
+                
+                if is_header {
+                    println!("is_header");
+                    // This is the first item in a small state group, populate SmallStateHeader
+                    let (item, _existed) = tl_state.group_manager.populate_small_state_header(cx, list, item_id, room_id);
+                    item.draw_all(cx, scope);
+                    continue;
+                }
+                
                 let item = {
-                    // Adjust timeline index by subtracting the number of small state groups
-                    // that come before this item_id
-                    let groups_before = tl_state.group_manager.small_state_groups
-                        .iter()
-                        .filter(|(range, _)| range.end <= item_id)
-                        .count();
+                    println!("groups_before: {} item_id: {}", groups_before, item_id);
                     let tl_idx = item_id.saturating_sub(groups_before);
-                    
-                    // Check if this item_id should be the extra collapsible button for the first item in a small_state_group
-                    for (range, _group_id) in tl_state.group_manager.small_state_groups.iter() {
-                        if item_id == range.start {
-                            // This is the first item in a small state group, draw collapsible button instead of message
-                            if let Some(group) = tl_state.group_manager.groups_by_event_id.get(_group_id) {
-                                if !group.opened && range.len() >= 3 {  // Only show button for collapsible groups
-                                    let button = list.item(cx, item_id, id!(CollapsibleButton)).button(ids!(collapsible_button));
-                                    button.set_text(cx, "▼");  // Show collapsed state
-                                    button.set_visible(cx, true);
-                                    continue;
-                                }
-                            }
-                        }
-                    }
-                    
                     let Some(timeline_item) = tl_items.get(tl_idx) else {
                         // This shouldn't happen (unless the timeline gets corrupted or some other weird error),
                         // but we can always safely fill the item with an empty widget that takes up no space.
@@ -1039,10 +1030,8 @@ impl Widget for RoomScreen {
                                     item_id,
                                     room_id,
                                     event_tl_item,
-                                    tl_items,
                                     poll_state,
                                     item_drawn_status,
-                                    &mut tl_state.group_manager,
                                 ),
                                 MsgLikeKind::Redacted => populate_small_state_event(
                                     cx,
@@ -1050,10 +1039,8 @@ impl Widget for RoomScreen {
                                     item_id,
                                     room_id,
                                     event_tl_item,
-                                    tl_items,
                                     &RedactedMessageEventMarker,
                                     item_drawn_status,
-                                    &mut tl_state.group_manager,
                                 ),
                                 MsgLikeKind::UnableToDecrypt(utd) => populate_small_state_event(
                                     cx,
@@ -1061,10 +1048,8 @@ impl Widget for RoomScreen {
                                     item_id,
                                     room_id,
                                     event_tl_item,
-                                    tl_items,
                                     utd,
                                     item_drawn_status,
-                                    &mut tl_state.group_manager,
                                 ),
                                 MsgLikeKind::Other(other) => populate_small_state_event(
                                     cx,
@@ -1072,10 +1057,8 @@ impl Widget for RoomScreen {
                                     item_id,
                                     room_id,
                                     event_tl_item,
-                                    tl_items,
                                     other,
                                     item_drawn_status,
-                                    &mut tl_state.group_manager,
                                 ),
                             },
                             TimelineItemContent::MembershipChange(membership_change) => populate_small_state_event(
@@ -1084,10 +1067,8 @@ impl Widget for RoomScreen {
                                 item_id,
                                 room_id,
                                 event_tl_item,
-                                tl_items,
                                 membership_change,
                                 item_drawn_status,
-                                &mut tl_state.group_manager,
                             ),
                             TimelineItemContent::ProfileChange(profile_change) => populate_small_state_event(
                                 cx,
@@ -1095,10 +1076,8 @@ impl Widget for RoomScreen {
                                 item_id,
                                 room_id,
                                 event_tl_item,
-                                tl_items,
                                 profile_change,
                                 item_drawn_status,
-                                &mut tl_state.group_manager,
                             ),
                             TimelineItemContent::OtherState(other) => populate_small_state_event(
                                 cx,
@@ -1106,10 +1085,8 @@ impl Widget for RoomScreen {
                                 item_id,
                                 room_id,
                                 event_tl_item,
-                                tl_items,
                                 other,
                                 item_drawn_status,
-                                &mut tl_state.group_manager,
                             ),
                             unhandled => {
                                 let item = list.item(cx, item_id, id!(SmallStateEvent));
@@ -4054,13 +4031,9 @@ fn populate_small_state_event(
     item_id: usize,
     room_id: &OwnedRoomId,
     event_tl_item: &EventTimelineItem,
-    tl_items: &Vector<Arc<TimelineItem>>,
     event_content: &impl SmallStateEventContent,
     item_drawn_status: ItemDrawnStatus,
-    group_manager: &mut small_state_group_manager::SmallStateGroupManager,
 ) -> (WidgetRef, ItemDrawnStatus) {
-    let prev_event = item_id.checked_sub(1).and_then(|i| tl_items.get(i));
-    let next_event = item_id.checked_add(1).and_then(|i| tl_items.get(i));
     let mut new_drawn_status = item_drawn_status;
     let (item, existed) = list.item_with_existed(cx, item_id, id!(SmallStateEvent));
     // The content of a small state event view may depend on the profile info,
@@ -4096,27 +4069,9 @@ fn populate_small_state_event(
         new_drawn_status.profile_drawn = profile_drawn;
         username
     });
-    // Dynamically determine group membership and update groups
-    // Returns: (show, show_collapsible_button, expanded)
-    // - show: whether this individual item should be rendered (based on group state)
-    // - show_collapsible_button: true if this item is the first in a collapsible group
-    // - expanded: current expansion state of the group (for button text)
-    let user_event = small_state_group_manager::convert_event_tl_item_to_user_event(event_tl_item, item_id);
-    let is_previous_small_state = small_state_group_manager::is_small_state(prev_event);
-    let is_next_small_state = small_state_group_manager::is_small_state(next_event);
-
-    let result = group_manager.compute_group_state(
-        username.clone(),
-        &user_event,
-        is_previous_small_state,
-        is_next_small_state,
-    );
 
-    let (show, collapsible_button) = (result.show, result.collapsible_button);
-    // Only show the collapsible button on the first item of each group
-    item.button(ids!(collapsible_button))
-        .set_visible(cx, collapsible_button != small_state_group_manager::CollapsibleButton::None);
-    let (item, new_drawn_status) = event_content.populate_item_content(
+    // Proceed to draw the actual event content.
+    event_content.populate_item_content(
         cx,
         list,
         item_id,
@@ -4125,21 +4080,9 @@ fn populate_small_state_event(
         &username,
         item_drawn_status,
         new_drawn_status,
-    );
-    // Handle rendering logic for group state using centralized function
-    group_manager.render_collapsible_button_and_body(
-        cx,
-        &item,
-        item_id,
-        show,
-        collapsible_button,
-        room_id,
-    );
-
-    (item, new_drawn_status)
+    )
 }
 
-
 /// Returns the display name of the sender of the given `event_tl_item`, if available.
 fn get_profile_display_name(event_tl_item: &EventTimelineItem) -> Option<String> {
     if let TimelineDetails::Ready(profile) = event_tl_item.sender_profile() {
diff --git a/src/home/small_state_group_manager.rs b/src/home/small_state_group_manager.rs
index d0ec2955..d930098b 100644
--- a/src/home/small_state_group_manager.rs
+++ b/src/home/small_state_group_manager.rs
@@ -22,23 +22,6 @@ live_design! {
 
     use crate::shared::styles::*;
     use crate::home::room_read_receipt::*;
-    pub CollapsibleButton = <Button> {
-        width: Fit,
-        height: Fit,
-        margin: { left: 5, right: 5 }
-        padding: { left: 4, right: 4, top: 2, bottom: 2 }
-        text: "▼"  // Default to collapsed state
-        draw_text: {
-            text_style: <SMALL_STATE_TEXT_STYLE> {},
-            color: #666
-        }
-        draw_bg: {
-            fn pixel(self) -> vec4 {
-                let sdf = Sdf2d::viewport(self.pos * self.rect_size);
-                return sdf.result
-            }
-        }
-    }
     pub SmallStateHeader = <View> {
         width: Fill,
         height: Fit
@@ -267,7 +250,7 @@ impl SmallStateGroupManager {
                 creation_end_index = Some(event.index);
                 creation_events.push(event.clone());
             } else if let Some(last_creation_index) = creation_end_index {
-                if event.transition == SmallStateType::Joined &&
+                if (event.transition == SmallStateType::Joined || event.transition == SmallStateType::ConfigureRoom) &&
                    event.sender.as_ref() == room_creator.as_ref() &&
                    event.index == last_creation_index + 1 {
                     // Include consecutive room creator events in room creation group
@@ -445,6 +428,75 @@ impl SmallStateGroupManager {
             avatar_user_ids: None,
         }
     }
+
+    /// Checks if an item is a group header and returns the count of groups before it.
+    ///
+    /// # Arguments
+    /// * `item_id` - The index of the timeline item to check
+    ///
+    /// # Returns
+    /// * `(bool, usize)` - A tuple containing:
+    ///   - `bool`: Whether this item is a group header (first item in a group)
+    ///   - `usize`: The count of groups that start before or at this item_id
+    pub fn check_group_header_status(&self, item_id: usize) -> (bool, usize) {
+        let groups_before = self.small_state_groups
+            .iter()
+            .filter(|(range, _)| range.start <= item_id)
+            .count();
+            
+        let mut is_header = false;
+        for (range, _group_id) in self.small_state_groups.iter() {
+            if item_id == range.start {
+                // This is the first item in a small state group, draw collapsible button instead of message
+                is_header = true;
+                break;
+            }
+        }
+        
+        (is_header, groups_before)
+    }
+
+    /// Populates a SmallStateHeader widget for a group header item.
+    ///
+    /// # Arguments
+    /// * `cx` - The drawing context
+    /// * `list` - The portal list reference
+    /// * `item_id` - The index of the timeline item
+    /// * `room_id` - The room ID for avatar population
+    /// * `item_drawn_status` - The current drawing status of the item
+    ///
+    /// # Returns
+    /// * `(WidgetRef, ItemDrawnStatus)` - A tuple containing:
+    ///   - `WidgetRef`: The SmallStateHeader widget reference
+    ///   - `ItemDrawnStatus`: The updated drawing status after population
+    pub fn populate_small_state_header(
+        &self,
+        cx: &mut Cx,
+        list: &mut makepad_widgets::PortalList,
+        item_id: usize,
+        room_id: &matrix_sdk::ruma::RoomId,
+    ) -> (WidgetRef, bool) {
+        let (item, existed) = list.item_with_existed(cx, item_id, live_id!(SmallStateHeader));
+        
+        // Find the corresponding SmallStateGroup and populate summary text and avatars
+        if let Some((_range, group_event_id)) = self.small_state_groups.iter().find(|(range, _)| range.start == item_id) {
+            if let Some(group) = self.groups_by_event_id.get(group_event_id) {
+                // Set the summary text
+                if let Some(summary_text) = &group.cached_summary {
+                    let summary_label = item.label(ids!(summary_text));
+                    summary_label.set_text(cx, summary_text);
+                }
+                
+                // Populate the avatar row
+                if let Some(user_ids) = &group.cached_avatar_user_ids {
+                    let avatar_row = &item;
+                    populate_avatar_row_from_user_ids(cx, avatar_row, room_id, user_ids);
+                }
+            }
+        }
+        
+        (item, existed)
+    }
 }
 /// Represent Small state type.
 #[derive(Default, Debug, Clone, Copy, PartialEq, Eq, PartialOrd, Ord, Hash)]
@@ -1464,4 +1516,182 @@ mod tests {
         group_manager.compute_group_state_2(small_state_events);
         println!("group_manager: {:?}", group_manager);
     }
+
+    #[test]
+    fn test_new_compute_group_state_in_room() {
+        let mut group_manager = SmallStateGroupManager::default();
+        let small_state_events = vec![
+            UserEvent {
+                transition: SmallStateType::CreateRoom,
+                index: 2,
+                sender: Some("@ruitoalpha:matrix.org".to_owned().try_into().unwrap()),
+                display_name: "@ruitoalpha:matrix.org".to_string(),
+                state_key: Some("".to_string()),
+                event_id: EventId::parse("$5iVFVZRVAV_t2lQxpEA84-SHibJ_0RW6FiEHt3rF-6o").ok(),
+            },
+            UserEvent {
+                transition: SmallStateType::Joined,
+                index: 3,
+                sender: Some("@ruitoalpha:matrix.org".to_owned().try_into().unwrap()),
+                display_name: "@ruitoalpha:matrix.org".to_string(),
+                state_key: Some("@ruitoalpha:matrix.org".to_string()),
+                event_id: EventId::parse("$RiNNqcH4xjUvBpMy-9GN5QUXGBfUn0wNFzr6AXhoij8").ok(),
+            },
+            UserEvent {
+                transition: SmallStateType::ConfigureRoom,
+                index: 4,
+                sender: Some("@ruitoalpha:matrix.org".to_owned().try_into().unwrap()),
+                display_name: "@ruitoalpha:matrix.org".to_string(),
+                state_key: Some("".to_string()),
+                event_id: EventId::parse("$qKZko9pxnm0G8_kdudNaeALlkQc35asEdFC0KoQaqFA").ok(),
+            },
+            UserEvent {
+                transition: SmallStateType::ConfigureRoom,
+                index: 5,
+                sender: Some("@ruitoalpha:matrix.org".to_owned().try_into().unwrap()),
+                display_name: "@ruitoalpha:matrix.org".to_string(),
+                state_key: Some("".to_string()),
+                event_id: EventId::parse("$A2aaV1IgBT5Y0PY8hoUpbPurR7mejeEnhSunHcNJxC4").ok(),
+            },
+            UserEvent {
+                transition: SmallStateType::ConfigureRoom,
+                index: 6,
+                sender: Some("@ruitoalpha:matrix.org".to_owned().try_into().unwrap()),
+                display_name: "@ruitoalpha:matrix.org".to_string(),
+                state_key: Some("".to_string()),
+                event_id: EventId::parse("$JRMNs1NLOjr2GwFDKILJ7upQ9Jj2lBPdnLG21U4ByqI").ok(),
+            },
+            UserEvent {
+                transition: SmallStateType::ConfigureRoom,
+                index: 7,
+                sender: Some("@ruitoalpha:matrix.org".to_owned().try_into().unwrap()),
+                display_name: "@ruitoalpha:matrix.org".to_string(),
+                state_key: Some("".to_string()),
+                event_id: EventId::parse("$HYY_-sH5Ek4UDPuuegRz5K13Aq7839uI8F67BX3rkls").ok(),
+            },
+            UserEvent {
+                transition: SmallStateType::ConfigureRoom,
+                index: 8,
+                sender: Some("@ruitoalpha:matrix.org".to_owned().try_into().unwrap()),
+                display_name: "@ruitoalpha:matrix.org".to_string(),
+                state_key: Some("".to_string()),
+                event_id: EventId::parse("$8yqHIZd-kjJkAXB0KTJHA2kWrmcYHhCae1WNvgGbyvg").ok(),
+            },
+            UserEvent {
+                transition: SmallStateType::ConfigureRoom,
+                index: 9,
+                sender: Some("@ruitoalpha:matrix.org".to_owned().try_into().unwrap()),
+                display_name: "@ruitoalpha:matrix.org".to_string(),
+                state_key: Some("".to_string()),
+                event_id: EventId::parse("$IlYc4t03j8ILo3SWNIEruulcMgsyDIXj7VPhhbusEY4").ok(),
+            },
+            UserEvent {
+                transition: SmallStateType::UnableToDecrypt,
+                index: 10,
+                sender: Some("@ruitoalpha:matrix.org".to_owned().try_into().unwrap()),
+                display_name: "@ruitoalpha:matrix.org".to_string(),
+                state_key: None,
+                event_id: EventId::parse("$298PuV38_98MW4W-SQRrZ7h_klfRqQF6zGt5Yd6XzIY").ok(),
+            },
+            UserEvent {
+                transition: SmallStateType::UnableToDecrypt,
+                index: 11,
+                sender: Some("@ruitoalpha:matrix.org".to_owned().try_into().unwrap()),
+                display_name: "@ruitoalpha:matrix.org".to_string(),
+                state_key: None,
+                event_id: EventId::parse("$5GclF_FSgBvjgOFKtNJbxcED7Wv6t-juExuzvjypsuw").ok(),
+            },
+            UserEvent {
+                transition: SmallStateType::UnableToDecrypt,
+                index: 12,
+                sender: Some("@ruitoalpha:matrix.org".to_owned().try_into().unwrap()),
+                display_name: "@ruitoalpha:matrix.org".to_string(),
+                state_key: None,
+                event_id: EventId::parse("$JmpSXEwW2xw19IsdtG5iEv8WsArErTnfNqiaGTxYqso").ok(),
+            },
+            UserEvent {
+                transition: SmallStateType::UnableToDecrypt,
+                index: 13,
+                sender: Some("@ruitoalpha:matrix.org".to_owned().try_into().unwrap()),
+                display_name: "@ruitoalpha:matrix.org".to_string(),
+                state_key: None,
+                event_id: EventId::parse("$GYKDh99yuEQ_zyVUf3UxHmoyCPLXuQsNU4xTwGKKv68").ok(),
+            },
+            UserEvent {
+                transition: SmallStateType::UnableToDecrypt,
+                index: 14,
+                sender: Some("@ruitoalpha:matrix.org".to_owned().try_into().unwrap()),
+                display_name: "@ruitoalpha:matrix.org".to_string(),
+                state_key: None,
+                event_id: EventId::parse("$Ad9SVGo-pTuJDCP3kcFUTd_G3wZmZB_mllGaX_0sCx8").ok(),
+            },
+            UserEvent {
+                transition: SmallStateType::UnableToDecrypt,
+                index: 15,
+                sender: Some("@ruitoalpha:matrix.org".to_owned().try_into().unwrap()),
+                display_name: "@ruitoalpha:matrix.org".to_string(),
+                state_key: None,
+                event_id: EventId::parse("$L5B6xnrT_qVO4cmBTc291c8OAOmo6Soys1_eYt7g5cU").ok(),
+            },
+            UserEvent {
+                transition: SmallStateType::UnableToDecrypt,
+                index: 17,
+                sender: Some("@ruitoalpha:matrix.org".to_owned().try_into().unwrap()),
+                display_name: "@ruitoalpha:matrix.org".to_string(),
+                state_key: None,
+                event_id: EventId::parse("$82Y0r4Gr0mPDShQ1UUo8clRjziL6Hb481LCv7AQ1Vd0").ok(),
+            },
+            UserEvent {
+                transition: SmallStateType::UnableToDecrypt,
+                index: 18,
+                sender: Some("@ruitoalpha:matrix.org".to_owned().try_into().unwrap()),
+                display_name: "@ruitoalpha:matrix.org".to_string(),
+                state_key: None,
+                event_id: EventId::parse("$u03fCRDsrKdAxzN9d96Wp2302XV3LfHJAq7MeYg8Cj4").ok(),
+            },
+            UserEvent {
+                transition: SmallStateType::ChangedName,
+                index: 20,
+                sender: Some("@ruitoalpha:matrix.org".to_owned().try_into().unwrap()),
+                display_name: "@ruitoalpha:matrix.org".to_string(),
+                state_key: None,
+                event_id: EventId::parse("$XrpaH-WD3SfJ9tZty4f9jnPYnPZR1RggjKsBulY8SB4").ok(),
+            },
+            UserEvent {
+                transition: SmallStateType::ChangedName,
+                index: 21,
+                sender: Some("@ruitoalpha:matrix.org".to_owned().try_into().unwrap()),
+                display_name: "@ruitoalpha:matrix.org".to_string(),
+                state_key: None,
+                event_id: EventId::parse("$-jOWJ53Gpqs0IzMmpzzuSIxmEJ-nzAnKz5mG5f7PhYs").ok(),
+            },
+            UserEvent {
+                transition: SmallStateType::ChangedName,
+                index: 23,
+                sender: Some("@ruitoalpha:matrix.org".to_owned().try_into().unwrap()),
+                display_name: "@ruitoalpha:matrix.org".to_string(),
+                state_key: None,
+                event_id: EventId::parse("$joGXHDoxL4oEAHSL7tJHY-vnigQAP12qhAMDWIbawqo").ok(),
+            },
+        ];
+        
+        group_manager.compute_group_state_2(small_state_events);
+        
+        // Test with item_id 1 (not a header)
+        let item_id = 1;
+        let (is_header, groups_before) = group_manager.check_group_header_status(item_id);
+        println!("item_id {}: is_header: {}, groups_before: {}", item_id, is_header, groups_before);
+        
+        // Test with item_id 2 (is a header)
+        let item_id = 2;
+        let (is_header, groups_before) = group_manager.check_group_header_status(item_id);
+        println!("item_id {}: is_header: {}, groups_before: {}", item_id, is_header, groups_before);
+        
+        // Test with item_id 10 (is a header)
+        let item_id = 10;
+        let (is_header, groups_before) = group_manager.check_group_header_status(item_id);
+        println!("item_id {}: is_header: {}, groups_before: {}", item_id, is_header, groups_before);
+        //println!("group_manager: {:?}", group_manager);
+
+    }
 }

From 080c81e3d17bbf6dc5ad00a011bb11a08bd4c48a Mon Sep 17 00:00:00 2001
From: alanpoon <brightshadowx@gmail.com>
Date: Wed, 7 Jan 2026 21:16:33 +0800
Subject: [PATCH 24/26] draw

---
 src/home/room_screen.rs               |  11 +--
 src/home/small_state_group_manager.rs | 107 +++++++++++++++++++++++++-
 2 files changed, 109 insertions(+), 9 deletions(-)

diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs
index dd265892..0706d1b5 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -978,15 +978,15 @@ impl Widget for RoomScreen {
                 let (is_header, groups_before) = tl_state.group_manager.check_group_header_status(item_id);
                 
                 if is_header {
-                    println!("is_header");
+                    println!("is_heade {:?} groups_before {:?}", item_id, groups_before);
                     // This is the first item in a small state group, populate SmallStateHeader
-                    let (item, _existed) = tl_state.group_manager.populate_small_state_header(cx, list, item_id, room_id);
+                    let (item, _existed) = tl_state.group_manager.populate_small_state_header(cx, list, item_id, groups_before, room_id);
                     item.draw_all(cx, scope);
                     continue;
                 }
                 
                 let item = {
-                    println!("groups_before: {} item_id: {}", groups_before, item_id);
+                    //println!("groups_before: {} item_id: {}", groups_before, item_id);
                     let tl_idx = item_id.saturating_sub(groups_before);
                     let Some(timeline_item) = tl_items.get(tl_idx) else {
                         // This shouldn't happen (unless the timeline gets corrupted or some other weird error),
@@ -1186,11 +1186,11 @@ impl RoomScreen {
 
                     // Compute small state groups for initial items
                     let small_state_events = small_state_group_manager::extract_small_state_events(initial_items.iter().cloned());
-                    if tl.room_id.to_string() == "!UrPVVKTBTiyKLvSgIw:matrix.org" {
+                    if tl.room_id.to_string() == "!MhCFIYPPVRVgyyvRWK:matrix.org" {
                         println!("FirstUpdate: small_state_events: {:?}", small_state_events);
                     }
                     tl.group_manager.compute_group_state_2(small_state_events);
-                    if tl.room_id.to_string() == "!UrPVVKTBTiyKLvSgIw:matrix.org" {
+                    if tl.room_id.to_string() == "!MhCFIYPPVRVgyyvRWK:matrix.org" {
                         println!("FirstUpdate: computed group state {:?}", tl.group_manager);
                     }
 
@@ -1198,6 +1198,7 @@ impl RoomScreen {
                     done_loading = true;
                 }
                 TimelineUpdate::NewItems { new_items, changed_indices, is_append, clear_cache } => {
+                    return;
                     if new_items.is_empty() {
                         if !tl.items.is_empty() {
                             log!("process_timeline_updates(): timeline (had {} items) was cleared for room {}", tl.items.len(), tl.room_id);
diff --git a/src/home/small_state_group_manager.rs b/src/home/small_state_group_manager.rs
index d930098b..f0d3e705 100644
--- a/src/home/small_state_group_manager.rs
+++ b/src/home/small_state_group_manager.rs
@@ -25,7 +25,6 @@ live_design! {
     pub SmallStateHeader = <View> {
         width: Fill,
         height: Fit
-        visible: false
         padding: { left: 7.0, top: 2.0, bottom: 2.0 }
         flow: Right,
         align: { y: 0.5 }
@@ -446,7 +445,7 @@ impl SmallStateGroupManager {
             
         let mut is_header = false;
         for (range, _group_id) in self.small_state_groups.iter() {
-            if item_id == range.start {
+            if item_id == range.start + groups_before {
                 // This is the first item in a small state group, draw collapsible button instead of message
                 is_header = true;
                 break;
@@ -474,12 +473,13 @@ impl SmallStateGroupManager {
         cx: &mut Cx,
         list: &mut makepad_widgets::PortalList,
         item_id: usize,
+        groups_before: usize,
         room_id: &matrix_sdk::ruma::RoomId,
     ) -> (WidgetRef, bool) {
         let (item, existed) = list.item_with_existed(cx, item_id, live_id!(SmallStateHeader));
-        
+        println!("header: {}, existed: {}", item_id, existed);
         // Find the corresponding SmallStateGroup and populate summary text and avatars
-        if let Some((_range, group_event_id)) = self.small_state_groups.iter().find(|(range, _)| range.start == item_id) {
+        if let Some((_range, group_event_id)) = self.small_state_groups.iter().find(|(range, _)| range.start + groups_before == item_id) {
             if let Some(group) = self.groups_by_event_id.get(group_event_id) {
                 // Set the summary text
                 if let Some(summary_text) = &group.cached_summary {
@@ -1694,4 +1694,103 @@ mod tests {
         //println!("group_manager: {:?}", group_manager);
 
     }
+
+    #[test]
+    fn test_new_compute_group_state_in_room_shift() {
+        let mut group_manager = SmallStateGroupManager::default();
+        let small_state_events = vec![
+            UserEvent {
+                transition: SmallStateType::Joined,
+                index: 3,
+                sender: Some("@ruitoalpha:matrix.org".to_owned().try_into().unwrap()),
+                display_name: "@ruitoalpha:matrix.org".to_string(),
+                state_key: Some("@ruitoalpha:matrix.org".to_string()),
+                event_id: EventId::parse("$RiNNqcH4xjUvBpMy-9GN5QUXGBfUn0wNFzr6AXhoij8").ok(),
+            },
+            UserEvent {
+                transition: SmallStateType::ConfigureRoom,
+                index: 4,
+                sender: Some("@ruitoalpha:matrix.org".to_owned().try_into().unwrap()),
+                display_name: "@ruitoalpha:matrix.org".to_string(),
+                state_key: Some("".to_string()),
+                event_id: EventId::parse("$qKZko9pxnm0G8_kdudNaeALlkQc35asEdFC0KoQaqFA").ok(),
+            },
+            UserEvent {
+                transition: SmallStateType::ConfigureRoom,
+                index: 5,
+                sender: Some("@ruitoalpha:matrix.org".to_owned().try_into().unwrap()),
+                display_name: "@ruitoalpha:matrix.org".to_string(),
+                state_key: Some("".to_string()),
+                event_id: EventId::parse("$qKZko9pxnm0G8_kdudNaeALlkQc35asEdFC0KoQaqFA").ok(),
+            },
+            UserEvent {
+                transition: SmallStateType::UnableToDecrypt,
+                index: 10,
+                sender: Some("@ruitoalpha:matrix.org".to_owned().try_into().unwrap()),
+                display_name: "@ruitoalpha:matrix.org".to_string(),
+                state_key: None,
+                event_id: EventId::parse("$298PuV38_98MW4W-SQRrZ7h_klfRqQF6zGt5Yd6XzIY").ok(),
+            },
+            UserEvent {
+                transition: SmallStateType::UnableToDecrypt,
+                index: 11,
+                sender: Some("@ruitoalpha:matrix.org".to_owned().try_into().unwrap()),
+                display_name: "@ruitoalpha:matrix.org".to_string(),
+                state_key: None,
+                event_id: EventId::parse("$298PuV38_98MW4W-SQRrZ7h_klfRqQF6zGt5Yd6XzIY").ok(),
+            },
+            UserEvent {
+                transition: SmallStateType::UnableToDecrypt,
+                index: 12,
+                sender: Some("@ruitoalpha:matrix.org".to_owned().try_into().unwrap()),
+                display_name: "@ruitoalpha:matrix.org".to_string(),
+                state_key: None,
+                event_id: EventId::parse("$298PuV38_98MW4W-SQRrZ7h_klfRqQF6zGt5Yd6XzIY").ok(),
+            },
+        ];
+        
+        group_manager.compute_group_state_2(small_state_events);
+        println!("group_manager: {:?}", group_manager);
+
+        let small_state_events = vec![
+            UserEvent {
+                transition: SmallStateType::CreateRoom,
+                index: 1,
+                sender: Some("@ruitoalpha:matrix.org".to_owned().try_into().unwrap()),
+                display_name: "@ruitoalpha:matrix.org".to_string(),
+                state_key: Some("".to_string()),
+                event_id: EventId::parse("$5iVFVZRVAV_t2lQxpEA84-SHibJ_0RW6FiEHt3rF-6o").ok(),
+            },
+            UserEvent {
+                transition: SmallStateType::Joined,
+                index: 2,
+                sender: Some("@ruitoalpha:matrix.org".to_owned().try_into().unwrap()),
+                display_name: "@ruitoalpha:matrix.org".to_string(),
+                state_key: Some("@ruitoalpha:matrix.org".to_string()),
+                event_id: EventId::parse("$RiNNqcH4xjUvBpMy-9GN5QUXGBfUn0wNFzr6AXhoij8").ok(),
+            },
+            UserEvent {
+                transition: SmallStateType::ConfigureRoom,
+                index: 3,
+                sender: Some("@ruitoalpha:matrix.org".to_owned().try_into().unwrap()),
+                display_name: "@ruitoalpha:matrix.org".to_string(),
+                state_key: Some("".to_string()),
+                event_id: EventId::parse("$qKZko9pxnm0G8_kdudNaeALlkQc35asEdFC0KoQaqFA").ok(),
+            },
+            UserEvent {
+                transition: SmallStateType::UnableToDecrypt,
+                index: 9,
+                sender: Some("@ruitoalpha:matrix.org".to_owned().try_into().unwrap()),
+                display_name: "@ruitoalpha:matrix.org".to_string(),
+                state_key: None,
+                event_id: EventId::parse("$298PuV38_98MW4W-SQRrZ7h_klfRqQF6zGt5Yd6XzIY").ok(),
+            },
+        ];
+        handle_backward_pagination_index_shift(
+            1,
+            &mut group_manager,
+        );
+        group_manager.compute_group_state_2(small_state_events);
+    }
+
 }

From 2ac06645750d33efd18352944ee21e0bda7df807 Mon Sep 17 00:00:00 2001
From: alanpoon <brightshadowx@gmail.com>
Date: Wed, 7 Jan 2026 22:45:24 +0800
Subject: [PATCH 25/26] loop

---
 src/home/small_state_group_manager.rs | 47 +++++++++++++++++++--------
 1 file changed, 33 insertions(+), 14 deletions(-)

diff --git a/src/home/small_state_group_manager.rs b/src/home/small_state_group_manager.rs
index f0d3e705..b516701e 100644
--- a/src/home/small_state_group_manager.rs
+++ b/src/home/small_state_group_manager.rs
@@ -431,28 +431,44 @@ impl SmallStateGroupManager {
     /// Checks if an item is a group header and returns the count of groups before it.
     ///
     /// # Arguments
-    /// * `item_id` - The index of the timeline item to check
+    /// * `item_id` - The portal list index to check
     ///
     /// # Returns
     /// * `(bool, usize)` - A tuple containing:
     ///   - `bool`: Whether this item is a group header (first item in a group)
-    ///   - `usize`: The count of groups that start before or at this item_id
+    ///   - `usize`: The count of groups that start before this item_id
     pub fn check_group_header_status(&self, item_id: usize) -> (bool, usize) {
-        let groups_before = self.small_state_groups
-            .iter()
-            .filter(|(range, _)| range.start <= item_id)
-            .count();
+        let mut current_item_id = item_id;
+        let mut groups_before = 0;
+        
+        // Use a while loop to look for group_before of the item_id and add group_before to the item_id,
+        // until there is no change in group_before
+        loop {
+            let new_groups_before = self.small_state_groups
+                .iter()
+                .filter(|(range, _)| range.start <= current_item_id)
+                .count();
             
-        let mut is_header = false;
-        for (range, _group_id) in self.small_state_groups.iter() {
-            if item_id == range.start + groups_before {
-                // This is the first item in a small state group, draw collapsible button instead of message
-                is_header = true;
+            // If groups_before doesn't change, we've reached a stable state
+            if new_groups_before <= groups_before {
                 break;
             }
+            
+            groups_before = new_groups_before;
+            current_item_id = current_item_id.saturating_sub(groups_before);
         }
-        
-        (is_header, groups_before)
+        if groups_before == 0 {
+            return (false, groups_before);
+        }
+        for (num, (range, _)) in self.small_state_groups.iter().enumerate() {
+            if num == groups_before.saturating_sub(1) {
+                if range.start == item_id.saturating_sub(groups_before) + 1 {
+                    return (true, groups_before);
+                }
+                break;
+            }
+        }
+        (false, groups_before)
     }
 
     /// Populates a SmallStateHeader widget for a group header item.
@@ -478,8 +494,11 @@ impl SmallStateGroupManager {
     ) -> (WidgetRef, bool) {
         let (item, existed) = list.item_with_existed(cx, item_id, live_id!(SmallStateHeader));
         println!("header: {}, existed: {}", item_id, existed);
+        // Convert item_id (portal list index) to timeline index by subtracting groups_before
+        let tl_idx = item_id.saturating_sub(groups_before);
+        
         // Find the corresponding SmallStateGroup and populate summary text and avatars
-        if let Some((_range, group_event_id)) = self.small_state_groups.iter().find(|(range, _)| range.start + groups_before == item_id) {
+        if let Some((_range, group_event_id)) = self.small_state_groups.iter().find(|(range, _)| range.start == tl_idx) {
             if let Some(group) = self.groups_by_event_id.get(group_event_id) {
                 // Set the summary text
                 if let Some(summary_text) = &group.cached_summary {

From d792363f85dbf8325c1055db73def36694b63e68 Mon Sep 17 00:00:00 2001
From: alanpoon <brightshadowx@gmail.com>
Date: Wed, 7 Jan 2026 23:07:46 +0800
Subject: [PATCH 26/26] fix check_group_header_status

---
 src/home/small_state_group_manager.rs | 103 ++++++++++++++++++++------
 1 file changed, 79 insertions(+), 24 deletions(-)

diff --git a/src/home/small_state_group_manager.rs b/src/home/small_state_group_manager.rs
index b516701e..5eefccea 100644
--- a/src/home/small_state_group_manager.rs
+++ b/src/home/small_state_group_manager.rs
@@ -438,37 +438,27 @@ impl SmallStateGroupManager {
     ///   - `bool`: Whether this item is a group header (first item in a group)
     ///   - `usize`: The count of groups that start before this item_id
     pub fn check_group_header_status(&self, item_id: usize) -> (bool, usize) {
-        let mut current_item_id = item_id;
+        // Count how many group headers appear before this item_id in the portal list
         let mut groups_before = 0;
+        let mut is_header = false;
         
-        // Use a while loop to look for group_before of the item_id and add group_before to the item_id,
-        // until there is no change in group_before
-        loop {
-            let new_groups_before = self.small_state_groups
-                .iter()
-                .filter(|(range, _)| range.start <= current_item_id)
-                .count();
+        // Calculate portal positions for each group header
+        let mut current_portal_offset = 0;
+        for (range, _) in self.small_state_groups.iter() {
+            let header_portal_position = range.start + current_portal_offset;
             
-            // If groups_before doesn't change, we've reached a stable state
-            if new_groups_before <= groups_before {
+            if header_portal_position < item_id {
+                groups_before += 1;
+            } else if header_portal_position == item_id {
+                is_header = true;
+                // For the groups_before count, we don't include the current group
                 break;
             }
             
-            groups_before = new_groups_before;
-            current_item_id = current_item_id.saturating_sub(groups_before);
+            current_portal_offset += 1; // Each group adds 1 to the portal offset
         }
-        if groups_before == 0 {
-            return (false, groups_before);
-        }
-        for (num, (range, _)) in self.small_state_groups.iter().enumerate() {
-            if num == groups_before.saturating_sub(1) {
-                if range.start == item_id.saturating_sub(groups_before) + 1 {
-                    return (true, groups_before);
-                }
-                break;
-            }
-        }
-        (false, groups_before)
+        
+        (is_header, groups_before)
     }
 
     /// Populates a SmallStateHeader widget for a group header item.
@@ -1812,4 +1802,69 @@ mod tests {
         group_manager.compute_group_state_2(small_state_events);
     }
 
+    #[test]
+    fn test_check_group_header_status_with_ranges() {
+        let mut group_manager = SmallStateGroupManager::default();
+        
+        // Create test events to populate the ranges 6..9 and 10..15
+        let event1_id = EventId::parse("$event1").unwrap();
+        let event2_id = EventId::parse("$event2").unwrap();
+        
+        // Insert ranges into small_state_groups
+        group_manager.small_state_groups.insert(6..9, event1_id.clone());
+        group_manager.small_state_groups.insert(10..15, event2_id.clone());
+        
+        // Create corresponding groups in groups_by_event_id (required for completeness)
+        let group1 = SmallStateGroup {
+            is_room_creation: false,
+            room_creator: None,
+            opened: false,
+            user_events_map: HashMap::new(),
+            cached_summary: None,
+            cached_avatar_user_ids: None,
+        };
+        let group2 = SmallStateGroup {
+            is_room_creation: false,
+            room_creator: None,
+            opened: false,
+            user_events_map: HashMap::new(),
+            cached_summary: None,
+            cached_avatar_user_ids: None,
+        };
+        group_manager.groups_by_event_id.insert(event1_id, group1);
+        group_manager.groups_by_event_id.insert(event2_id, group2);
+        
+        // Debug: Print all ranges to understand structure
+        for (range, event_id) in group_manager.small_state_groups.iter() {
+            println!("Range: {:?}, Event ID: {:?}", range, event_id);
+        }
+        
+        // Test case 1: item_id = 6, expected: is_header = true, groups_before = 1
+        let (is_header, groups_before) = group_manager.check_group_header_status(6);
+        println!("item_id=6: is_header={}, groups_before={}", is_header, groups_before);
+        // Actually, if item_id=6 is the first group header, it should have groups_before=0
+        // Let me check if the expected values make sense...
+        // For now, let's see what the function actually returns
+        println!("Expected: item_id=6 should be header with groups_before=0");
+        println!("Actual: is_header={}, groups_before={}", is_header, groups_before);
+        
+        // Test case 2: item_id = 10, expected: is_header = false, groups_before = 1  
+        let (is_header, groups_before) = group_manager.check_group_header_status(10);
+        println!("item_id=10: is_header={}, groups_before={}", is_header, groups_before);
+        println!("Expected: item_id=10 should NOT be header with groups_before=1");
+        println!("Actual: is_header={}, groups_before={}", is_header, groups_before);
+        
+        // Test case 3: item_id = 11, expected: is_header = true, groups_before = 2
+        let (is_header, groups_before) = group_manager.check_group_header_status(11);
+        println!("item_id=11: is_header={}, groups_before={}", is_header, groups_before);
+        println!("Expected: item_id=11 should be header with groups_before=2");
+        println!("Actual: is_header={}, groups_before={}", is_header, groups_before);
+        
+        // Let's also test a few more positions to understand the pattern
+        for test_id in 5..15 {
+            let (is_header, groups_before) = group_manager.check_group_header_status(test_id);
+            println!("item_id={}: is_header={}, groups_before={}", test_id, is_header, groups_before);
+        }
+    }
+
 }