Room list search bar

src/home/room_preview.rs

@@ -104,6 +104,7 @@ live_design! {
     }
 
     RoomPreview = {{RoomPreview}} {
+        height: 65.
         // Wraps the RoomPreviewContent in an AdaptiveView
         // to change the displayed content (and its layout) based on the available space in the sidebar.
         adaptive_preview = <AdaptiveView> {

src/home/rooms_list.rs

@@ -5,7 +5,7 @@ use matrix_sdk::ruma::{MilliSecondsSinceUnixEpoch, OwnedRoomId};
 
 use crate::{app::AppState, sliding_sync::{submit_async_request, MatrixRequest, PaginationDirection}};
 
-use super::room_preview::RoomPreviewAction;
+use super::{room_preview::RoomPreviewAction, rooms_sidebar::{RoomsSideBarAction, RoomsSideBarFilter}};
 
 /// Whether to pre-paginate visible rooms at least once in order to
 /// be able to display the latest message in the room preview,
@@ -232,6 +232,25 @@ impl RoomsList {
             format!("Loaded {} rooms.", self.all_rooms.len())
         };
     }
+    fn filter_rooms(&mut self, keywords: &str) {
+        let keywords = keywords.to_lowercase();
+
+        if keywords.is_empty() {
+            self.display_filter = RoomDisplayFilter::default();
+            self.displayed_rooms = self.all_rooms.keys().cloned().collect();
+            return;
+        }
+
+        self.display_filter = RoomDisplayFilter(Box::new(move |room| {
+            let room_name = room.room_name.as_ref().map(|n| n.to_lowercase());
+            room_name.as_ref().map_or(false, |n| n.contains(&keywords))
+        }));
+
+        self.displayed_rooms = self.all_rooms.iter()
+            .filter(|(_, room)| (self.display_filter)(&room))
+            .map(|(room_id, _)| room_id.clone())
+            .collect();
+    }
 }
 
 impl Widget for RoomsList {
@@ -369,6 +388,7 @@ impl Widget for RoomsList {
                 self.redraw(cx);
             }
         }
+        self.widget_match_event(cx, event, scope);
     }
 
 
@@ -397,7 +417,6 @@ impl Widget for RoomsList {
 
             while let Some(item_id) = list.next_visible_item(cx) {
                 let mut scope = Scope::empty();
-
                 // Draw the room preview for each room in the `displayed_rooms` list.
                 let room_to_draw = self.displayed_rooms
                     .get(item_id)
@@ -443,3 +462,15 @@ impl Widget for RoomsList {
     }
 
 }
+
+impl WidgetMatchEvent for RoomsList {
+    fn handle_actions(&mut self, cx: &mut Cx, actions:&Actions, _scope: &mut Scope) {
+        for action in actions {
+            if let RoomsSideBarAction::Filter { keywords, filter } = action.as_widget_action().cast() {
+                if filter == RoomsSideBarFilter::Rooms {
+                    self.filter_rooms(&keywords);
+                }
+            }
+        }
+    }
+}

src/home/rooms_sidebar.rs

@@ -1,5 +1,7 @@
 use makepad_widgets::*;
 
+use crate::shared::search_bar::SearchBarAction;
+
 live_design! {
     import makepad_widgets::base::*;
     import makepad_widgets::theme_desktop_dark::*;
@@ -10,6 +12,85 @@ live_design! {
     import crate::shared::adaptive_view::AdaptiveView;
 
     import crate::home::rooms_list::RoomsList;
+    import crate::shared::cached_widget::CachedWidget;
+
+    ICON_COLLAPSE = dep("crate://self/resources/icons/collapse.svg")
+    ICON_ADD = dep("crate://self/resources/icons/add.svg")
+
+    CollapsableTitle = <View> {
+        width: Fill, height: Fit
+        flow: Right, spacing: 10.
+        align: {x: 0.0, y: 0.5}
+        collapse_icon = <Icon> {
+            draw_icon: {
+                svg_file: (ICON_COLLAPSE),
+                uniform rotation_angle: -90.0,
+                fn get_color(self) -> vec4 {
+                    // return #666;
+                    return (COLOR_TEXT_IDLE);
+                }
+
+                // Support rotation of the icon
+                fn clip_and_transform_vertex(self, rect_pos: vec2, rect_size: vec2) -> vec4 {
+                    let clipped: vec2 = clamp(
+                        self.geom_pos * rect_size + rect_pos,
+                        self.draw_clip.xy,
+                        self.draw_clip.zw
+                    )
+                    self.pos = (clipped - rect_pos) / rect_size
+
+                    // Calculate the texture coordinates based on the rotation angle
+                    let angle_rad = self.rotation_angle * 3.14159265359 / 180.0;
+                    let cos_angle = cos(angle_rad);
+                    let sin_angle = sin(angle_rad);
+                    let rot_matrix = mat2(
+                        cos_angle, -sin_angle,
+                        sin_angle, cos_angle
+                    );
+                    self.tex_coord1 = mix(
+                        self.icon_t1.xy,
+                        self.icon_t2.xy,
+                        (rot_matrix * (self.pos.xy - vec2(0.5))) + vec2(0.5)
+                    );
+
+                    return self.camera_projection * (self.camera_view * (self.view_transform * vec4(
+                        clipped.x,
+                        clipped.y,
+                        self.draw_depth + self.draw_zbias,
+                        1.
+                    )))
+                }
+            }
+            icon_walk: {width: 12, height: 12}
+        }
+
+        title = <Label> {
+            draw_text: {
+                color: #x0,
+                text_style: <TITLE_TEXT>{ font_size: 11}
+            }
+        }
+
+        <View> {
+            width: Fill
+        }
+
+        add_icon = <View> {
+            width: Fit
+            visible: false
+            padding: {right: 10}
+            align: {x: 0.5, y: 0.5}
+            <Icon> {
+                icon_walk: {width: 10, height: 10}
+                draw_icon: {
+                    svg_file: (ICON_ADD),
+                    fn get_color(self) -> vec4 {
+                        return (COLOR_TEXT_IDLE);
+                    }
+                }
+            }
+        }
+    }
 
     RoomsView = {{RoomsView}} {
         show_bg: true,
@@ -34,6 +115,11 @@ live_design! {
                 text_style: <TITLE_TEXT>{}
             }
         }
+        <SearchBar> {
+            input = {
+                empty_message: "Search for rooms..."
+            }
+        }
         <CachedWidget> {
             rooms_list = <RoomsList> {}
         }
@@ -53,6 +139,25 @@ live_design! {
     }
 }
 
+#[derive(Debug, Clone, PartialEq, Eq)]
+pub enum RoomsSideBarFilter {
+    /// Filter all
+    All,
+    /// Filter people
+    People,
+    /// Filter rooms
+    Rooms,
+}
+
+#[derive(Debug, Clone, DefaultNone)]
+pub enum RoomsSideBarAction {
+    /// Filter
+    Filter {
+        keywords: String,
+        filter: RoomsSideBarFilter,
+    },
+    None
+}
 #[derive(Widget, Live, LiveHook)]
 pub struct RoomsView {
     #[deref]
@@ -62,9 +167,42 @@ pub struct RoomsView {
 impl Widget for RoomsView {
     fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
         self.view.handle_event(cx, event, scope);
+        self.widget_match_event(cx, event, scope);
     }
 
     fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
         self.view.draw_walk(cx, scope, walk)
     }
 }
+
+impl WidgetMatchEvent for RoomsView {
+    fn handle_actions(&mut self, cx: &mut Cx, actions:&Actions, scope: &mut Scope) {
+        let widget_uid = self.widget_uid();
+
+        for action in actions.iter() {
+            match action.as_widget_action().cast() {
+                SearchBarAction::Search(keywords) => {
+                    cx.widget_action(
+                        widget_uid,
+                        &scope.path,
+                        RoomsSideBarAction::Filter {
+                            keywords: keywords.clone(),
+                            filter: RoomsSideBarFilter::Rooms,
+                        }
+                    );
+                },
+                SearchBarAction::ResetSearch => {
+                    cx.widget_action(
+                        widget_uid,
+                        &scope.path,
+                        RoomsSideBarAction::Filter {
+                            keywords: "".to_string(),
+                            filter: RoomsSideBarFilter::Rooms,
+                        }
+                    );
+                }
+                _ => {}
+            }
+        }
+    }
+}