Populate the dedicated view of direct messages ("People") in the rooms list

[aaravlu]

issue #139

[aaravlu]

Screencast.from.2025-01-14.16-12-01.webm

I will fix the issue in a later pr that user can select common room and direct room at the same time if you donnot mind. :)

[kevinaboos]

Hmm, I don't think we want to have separate scrollable lists for people and rooms -- those should be combined into a single scrollable list.

So the goal would be to have separate sections/headings within a single scroll list. That design will also work well with the room search/filter function, in which we may want to show only direct people rooms or only regular public rooms. It will also not waste vertical space, like what's shown in your screenshot with all the whitespace between the People and the Rooms sections.

[aaravlu]

Hmm, I don't think we want to have separate scrollable lists for people and rooms -- those should be combined into a single scrollable list.

So the goal would be to have separate sections/headings within a single scroll list.

Considering that the implementation methods are quite different, I force pushed.

[aaravlu]

A simple schematic

This solution is obsolete.

[kevinaboos]

so, did we decide on a different design style for this? As in, you no longer want to put everything into one list?

I'm open to alternative ideas, though it's probably best if we implement a general collapsible heading widget before we actually continue working on this feature, since that's sort of a prerequisite. We need something like this details/summary expander:

Rooms

• Room 1
• Room 2
• Room 3

People

• Direct chat 1
• Direct chat 2
• Direct chat 3

we should probably be able to re-use Rik's existing components for this, as I've seen some expandable lists used in the File Tree for makepad-studio.

[aaravlu]

so, did we decide on a different design style for this? As in, you no longer want to put everything into one list?

Yeah, the sidebar will become much tough to maintain if we put all widgets into one list, that is , we only sort rooms by whether it is direct.
However, there will be more solution to sort rooms in future.

Restructure the related code of sidebar to add more sorting solutions such as sorting by room name, that will be quite complicated.

[aaravlu]

Btw, the current difficulty is that we can't do: Checking whether we can get() a room from the vec self.displayed_rooms via a index , which is equal to item_id fromwhile let Some (item_id) = list.next_visible_item(), at the same time, checking the item_id is equal to the related widget such as status_label .

Because some rooms will be ignored and won't appear in the <PortalList> .

The original code works because we don't care about any categorizing of rooms, so we can definitely get() Some(room_info) in self.displayed_rooms by item_id.
We know that once we start thinking about categorization or sorting of rooms, the index of self.displayed_rooms and item_id have nothing to do with each other.

related code:

robrix/src/home/rooms_list.rs

Lines 643 to 674 in 85c6f00

	let item = if let Some(room_info) = room_to_draw {
	let item = list.item(cx, item_id, live_id!(room_preview));
	self.displayed_rooms_map.insert(item.widget_uid(), item_id);
	room_info.is_selected = self.current_active_room_index == Some(item_id);
	// Paginate the room if it hasn't been paginated yet.
	if PREPAGINATE_VISIBLE_ROOMS && !room_info.has_been_paginated {
	room_info.has_been_paginated = true;
	submit_async_request(MatrixRequest::PaginateRoomTimeline {
	room_id: room_info.room_id.clone(),
	num_events: 50,
	direction: PaginationDirection::Backwards,
	});
	}
	// Pass the room info down to the RoomPreview widget via Scope.
	scope = Scope::with_props(&*room_info);
	item
	}
	// Draw the status label as the bottom entry.
	else if item_id == status_label_id {
	let item = list.item(cx, item_id, live_id!(status_label));
	item.as_view().apply_over(cx, live!{
	height: Fit,
	label = { text: (&self.status) }
	});
	item
	}
	// Draw a filler entry to take up space at the bottom of the portal list.
	else {
	list.item(cx, item_id, live_id!(bottom_filler))
	};

---

---

Now if we want to put all widgets in a and consider room categorization, we only can determine it by item_id

related code for referance:

robrix/src/home/rooms_list.rs

Lines 691 to 802 in 5b982b1

	let item = if item_id == 0 {
	let item = list.item(cx, 0, live_id!(rooms_or_people_label));
	item.set_text("People");
	item
	}
	else if item_id >= start_people_index && item_id <= last_people_index {
	let mut item = WidgetRef::empty();
	let mut room_index = None;
	for (a, b) in displayed_rooms_index_with_should_continue.iter_mut() {
	if *b {
	continue;
	}
	if let Some(room_info) = self.displayed_rooms.get(*a)
	.and_then(|room_id|{self.all_rooms.get(room_id)})
	{
	if room_info.is_direct {
	room_index = Some(*a);
	break;
	}
	}
	}
	if let Some(pos) = room_index {
	displayed_rooms_index_with_should_continue.get_mut(pos).unwrap().1 = true;
	item = list.item(cx, item_id, live_id!(room_preview));
	if let Some(room_info) = self.displayed_rooms.get(pos)
	.and_then(|room_id|{self.all_rooms.get_mut(room_id)})
	{
	self.displayed_rooms_map.insert(item.widget_uid(), pos);
	room_info.is_selected = self.current_active_room_index == Some(pos);
	// Paginate the room if it hasn't been paginated yet.
	if PREPAGINATE_VISIBLE_ROOMS && !room_info.has_been_paginated {
	room_info.has_been_paginated = true;
	submit_async_request(MatrixRequest::PaginateRoomTimeline {
	room_id: room_info.room_id.clone(),
	num_events: 50,
	direction: PaginationDirection::Backwards,
	});
	}
	scope = Scope::with_props(&*room_info);
	}
	}
	item
	}
	else if item_id == blank_index {
	list.item(cx, item_id, live_id!(blank))
	}
	else if item_id == rooms_header_index {
	let item = list.item(cx, 0, live_id!(rooms_or_people_label));
	item.set_text("Rooms");
	item
	}
	else if item_id >= start_room_index && item_id <= last_room_index {
	let mut item = WidgetRef::empty();
	let mut room_index = None;
	for (a, b) in displayed_rooms_index_with_should_continue.iter() {
	if *b {
	continue;
	}
	if let Some(room_info) = self.displayed_rooms.get(*a)
	.and_then(|room_id|{self.all_rooms.get(room_id)})
	{
	if !room_info.is_direct {
	room_index = Some(*a);
	break;
	}
	}
	}
	if let Some(pos) = room_index {
	displayed_rooms_index_with_should_continue.get_mut(pos).unwrap().1 = true;
	item = list.item(cx, item_id, live_id!(room_preview));
	if let Some(room_info) = self.displayed_rooms.get(pos)
	.and_then(|room_id|{self.all_rooms.get_mut(room_id)})
	{
	self.displayed_rooms_map.insert(item.widget_uid(), pos);
	room_info.is_selected = self.current_active_room_index == Some(pos);
	// Paginate the room if it hasn't been paginated yet.
	if PREPAGINATE_VISIBLE_ROOMS && !room_info.has_been_paginated {
	room_info.has_been_paginated = true;
	submit_async_request(MatrixRequest::PaginateRoomTimeline {
	room_id: room_info.room_id.clone(),
	num_events: 50,
	direction: PaginationDirection::Backwards,
	});
	}
	scope = Scope::with_props(&*room_info);
	}
	}
	item
	}
	else if item_id == status_label_index {
	let item = list.item(cx, item_id, live_id!(status_label));
	item.as_view().apply_over(cx, live!{
	height: Fit,
	label = { text: (&self.status) }
	});
	item
	} else {
	list.item(cx, 0, live_id!(self.displayed_rooms))
	};

[aaravlu]

I'm open to alternative ideas, though it's probably best if we implement a general collapsible heading widget before we actually continue working on this feature, since that's sort of a prerequisite. We need something like this details/summary expander:
Rooms
People

we should probably be able to re-use Rik's existing components for this, as I've seen some expandable lists used in the File Tree for makepad-studio.

That's great!
However, I feel like it's a big project for current stage.
And thanks to @alanpoon for guiding me a solution, the related changes this time are not much, but it serves the purpose of the original issue.

This commit can be used as a temporary solution, IMHO, since it's easy to refactor in the future.

[aaravlu]

Fixed:
Screencast from 2025-01-20 19-54-54.webm

[kevinaboos]

this does look nice, great job!

However, while this UI model is acceptable for account with 20-50 rooms, if you have 10,000 rooms (or even 100+) in your account, then this interface becomes quite cumbersome to use --- you have to scroll through all of the Rooms conversations before you get to the People. That's why we need some sort of collapsible widget.

We can keep this PR open, though I won't merge it in yet.

[aaravlu]

we should probably be able to re-use Rik's existing components for this, as I've seen some expandable lists used in the File Tree for makepad-studio.

Hi, @kevinaboos , I am studying the implementation of <Filetree> these days.

I found that we don't need a node structure, its depth is just two (Collapsible title and rooms under it), not like the file and path, which is unlimited nested.

And I found no suitable widgets in makepad for RoomsList. So, I want to simplify & modify the <Filetree> to make a new customized widget for RoomsList.

[alanpoon]

Maybe there is no need use the File Tree. We can just add arrow buttons next to header that will hide the rooms in room list while still using portal list. @aaravlu Do you want to try my suggestion? Or I shall attempt this issue 139 again.

[aaravlu]

Maybe there is no need use the File Tree. We can just add arrow buttons next to header that will hide the rooms in room list while still using portal list. @aaravlu Do you want to try my suggestion? Or I shall attempt this issue 139 again.

Of course i want to try your suggestion!