Redesign SearchBar into a single shared RoomFilterInputBar

The new `RoomFilterInputBar` is shared across both the
narrow "Mobile"-oriented UI and the wider "Desktop"-oriented UI,
and is now shown in different places on each.

We place the filter bar inside of a `CachedWidget` to ensure that
there is only a singleton instance of the `RoomFilterInputBar`
globally across the whole app.
This means that the text is now shared and that there is no need
to filter its actions across multiple different SearchBar actions.

Thus, it now automatically works when transitioning between the mobile
and desktop views.

Author: kevinaboos

src/home/home_screen.rs

@@ -9,7 +9,7 @@ live_design! {
     use crate::home::rooms_sidebar::RoomsSideBar;
     use crate::home::spaces_dock::SpacesDock;
     use crate::shared::styles::*;
-    use crate::shared::search_bar::SearchBar;
+    use crate::shared::room_filter_input_bar::RoomFilterInputBar;
     use crate::home::main_desktop_ui::MainDesktopUI;
 
     NavigationWrapper = {{NavigationWrapper}} {
@@ -31,6 +31,14 @@ live_design! {
             <View> {
                 flow: Down
                 width: Fill, height: Fill
+
+                <CachedWidget> {
+                    <RoomFilterInputBar> {
+                        input = {
+                            empty_message: "Filter rooms..."
+                        }
+                    }
+                }
                 <MainDesktopUI> {}
             }
         }
@@ -45,10 +53,12 @@ live_design! {
 
             <NavigationWrapper> {
                 view_stack = <StackNavigation> {
+
                     root_view = {
                         padding: {top: 40.}
                         flow: Down
                         width: Fill, height: Fill
+
                         sidebar = <RoomsSideBar> {}
                         spaces = <SpacesDock> {}
                     }

src/home/rooms_list.rs

@@ -6,11 +6,10 @@ use crate::{
     app::{AppState, SelectedRoom},
     room::room_display_filter::{FilterableRoom, RoomDisplayFilter, RoomDisplayFilterBuilder, RoomFilterCriteria, SortFn},
     shared::{collapsible_header::{CollapsibleHeaderAction, CollapsibleHeaderWidgetRefExt, HeaderCategory},
-    jump_to_bottom_button::UnreadMessageCount},
+    jump_to_bottom_button::UnreadMessageCount, room_filter_input_bar::RoomFilterAction},
     sliding_sync::{submit_async_request, MatrixRequest, PaginationDirection},
 };
-
-use super::{room_preview::RoomPreviewAction, rooms_sidebar::RoomsViewAction};
+use super::room_preview::RoomPreviewAction;
 
 /// Whether to pre-paginate visible rooms at least once in order to
 /// be able to display the latest message in the room preview,
@@ -625,8 +624,8 @@ impl Widget for RoomsList {
 
         if let Event::Actions(actions) = event {
             for action in actions {
-                if let RoomsViewAction::Search(search_text) = action.as_widget_action().cast() {
-                    self.update_displayed_rooms(cx, &search_text);
+                if let RoomFilterAction::Changed(keywords) = action.as_widget_action().cast() {
+                    self.update_displayed_rooms(cx, &keywords);
                 }
             }
         }

src/home/rooms_sidebar.rs

@@ -1,6 +1,13 @@
-use makepad_widgets::*;
+//! The RoomsSideBar is the widget that contains the RoomsList and other items.
+//!
+//! It differs in what content it includes based on the adaptive view:
+//! * On a narrow mobile view, it acts as the root_view of StackNavigation
+//!   * It includes a title label, a search bar, and the RoomsList.
+//! * On a wide desktop view, it acts as a permanent tab that is on the left side of the dock.
+//!   * It only includes a title label and the RoomsList, because the SearcBar
+//!     is at the top of the HomeScreen in Desktop view.
 
-use crate::shared::search_bar::SearchBarAction;
+use makepad_widgets::*;
 
 live_design! {
     use link::theme::*;
@@ -9,94 +16,66 @@ live_design! {
 
     use crate::shared::styles::*;
     use crate::shared::helpers::*;
-    use crate::shared::search_bar::SearchBar;
+    use crate::shared::room_filter_input_bar::RoomFilterInputBar;
 
     use crate::home::rooms_list::RoomsList;
 
-    RoomsView = {{RoomsView}} {
-        show_bg: true,
-        draw_bg: {
-            instance bg_color: (COLOR_PRIMARY)
-            instance border_color: #f2f2f2
-            instance border_size: 0.003
+    pub RoomsSideBar = <AdaptiveView> {
+        Desktop = <View> {
+            padding: {top: 20, left: 10, right: 10}
+            flow: Down, spacing: 10
+            width: Fill, height: Fill
+
+            show_bg: true,
+            draw_bg: {
+                instance bg_color: (COLOR_PRIMARY)
+                instance border_color: #f2f2f2
+                instance border_size: 0.003
 
-            // Draws a right-side border
-            fn pixel(self) -> vec4 {
-                if self.pos.x > 1.0 - self.border_size {
-                    return self.border_color;
-                } else {
-                    return self.bg_color;
+                // Draws a right-side border
+                fn pixel(self) -> vec4 {
+                    if self.pos.x > 1.0 - self.border_size {
+                        return self.border_color;
+                    } else {
+                        return self.bg_color;
+                    }
                 }
             }
-        }
-        <Label> {
-            text: "All Rooms"
-            draw_text: {
-                color: #x0
-                text_style: <TITLE_TEXT>{}
+
+            sidebar_title = <Label> {
+                text: "All Rooms"
+                draw_text: {
+                    color: #x0
+                    text_style: <TITLE_TEXT>{}
+                }
             }
-        }
-        search_bar = <SearchBar> {
-            input = {
-                empty_message: "Filter rooms..."
+            <CachedWidget> {
+                rooms_list = <RoomsList> {}
             }
-        }
-        <CachedWidget> {
-            rooms_list = <RoomsList> {}
-        }
-    }
-
-    pub RoomsSideBar = <AdaptiveView> {
-        Desktop = <RoomsView> {
-            padding: {top: 20., left: 10., right: 10.}
-            flow: Down, spacing: 10
-            width: Fill, height: Fill
         },
-        Mobile = <RoomsView> {
-            padding: {top: 17., left: 17., right: 17.}
+
+        Mobile = <View> {
+            padding: {top: 17, left: 17, right: 17}
             flow: Down, spacing: 7
             width: Fill, height: Fill
-        }        
-    }
-}
-
-#[derive(Clone, Debug, DefaultNone)]
-pub enum RoomsViewAction {
-    /// Search for rooms
-    Search(String),
-    None,
-}
-
-#[derive(Widget, Live, LiveHook)]
-pub struct RoomsView {
-    #[deref]
-    view: View,
-}
 
-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 {
-            match action.as_widget_action().cast() {
-                SearchBarAction::Search(keywords) => {
-                    cx.widget_action(widget_uid, &scope.path, RoomsViewAction::Search(keywords.clone()));
+            sidebar_title = <Label> {
+                text: "All Rooms"
+                draw_text: {
+                    color: #x0
+                    text_style: <TITLE_TEXT>{}
                 }
-                SearchBarAction::ResetSearch => {
-                    cx.widget_action(widget_uid, &scope.path, RoomsViewAction::Search("".to_string()));
+            }
+            <CachedWidget> {
+                <RoomFilterInputBar> {
+                    input = {
+                        empty_message: "Filter rooms..."
+                    }
                 }
-                _ => {}
+            }
+            <CachedWidget> {
+                rooms_list = <RoomsList> {}
             }
         }
     }
-}
+}

src/shared/mod.rs

@@ -9,7 +9,7 @@ pub mod icon_button;
 pub mod jump_to_bottom_button;
 pub mod mentionable_text_input;
 pub mod popup_list;
-pub mod search_bar;
+pub mod room_filter_input_bar;
 pub mod styles;
 pub mod text_or_image;
 pub mod typing_animation;
@@ -24,7 +24,7 @@ pub fn live_design(cx: &mut Cx) {
     icon_button::live_design(cx);
     unread_badge::live_design(cx);
     collapsible_header::live_design(cx);
-    search_bar::live_design(cx);
+    room_filter_input_bar::live_design(cx);
     avatar::live_design(cx);
     text_or_image::live_design(cx);
     html_or_plaintext::live_design(cx);

src/shared/search_bar.rs src/shared/room_filter_input_bar.rssrc/shared/search_bar.rs renamed to src/shared/room_filter_input_bar.rs

@@ -1,3 +1,10 @@
+//! A text input used to filter the rooms list
+//! with a search icon and a button to clear the input.
+//!
+//! This is a dedicated widget instead of a general "SearchBar"
+//! in order for us to be able to place it inside of a `CachedWidget`
+//! and have a single instance be shared across the Mobile and Desktop app views.
+
 use makepad_widgets::*;
 
 live_design! {
@@ -10,7 +17,7 @@ live_design! {
 
     ICON_SEARCH = dep("crate://self/resources/icons/search.svg")
 
-    pub SearchBar = {{SearchBar}}<RoundedView> {
+    pub RoomFilterInputBar = {{RoomFilterInputBar}}<RoundedView> {
         width: Fill,
         height: Fit,
 
@@ -43,7 +50,7 @@ live_design! {
             width: Fill,
             height: Fit,
 
-            empty_message: "Search..."
+            empty_message: "Filter rooms..."
 
             draw_text: {
                 text_style: { font_size: 10 },
@@ -63,23 +70,23 @@ live_design! {
     }
 }
 
+/// A text input (with a search icon and cancel button) used to filter the rooms list.
+///
+/// See the module-level docs for more detail.
 #[derive(Live, LiveHook, Widget)]
-pub struct SearchBar {
-    #[deref]
-    view: View,
+pub struct RoomFilterInputBar {
+    #[deref] view: View,
 }
 
-/// Actions emitted by the search bar based on user interaction with it.
+/// Actions emitted by the `RoomFilterInputBar` based on user interaction with it.
 #[derive(Clone, Debug, DefaultNone)]
-pub enum SearchBarAction {
-    /// The user has entered a search query.
-    Search(String),
-    /// The user has cleared the search query.
-    ResetSearch,
-    None
+pub enum RoomFilterAction {
+    /// The user has changed the text entered into the filter bar.
+    Changed(String),
+    None,
 }
 
-impl Widget for SearchBar {
+impl Widget for RoomFilterInputBar {
     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);
@@ -90,40 +97,29 @@ impl Widget for SearchBar {
     }
 }
 
-impl WidgetMatchEvent for SearchBar {
+impl WidgetMatchEvent for RoomFilterInputBar {
     fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions, scope: &mut Scope) {
         let input = self.text_input(id!(input));
         let clear_button = self.button(id!(clear_button));
 
         // Handle user changing the input text
         if let Some(keywords) = input.changed(actions) {
             clear_button.set_visible(cx, !keywords.is_empty());
-            let widget_uid = self.widget_uid(); 
-            if keywords.is_empty() {
-                cx.widget_action(
-                    widget_uid,
-                    &scope.path,
-                    SearchBarAction::ResetSearch
-                );
-            } else {
-                cx.widget_action(
-                    widget_uid,
-                    &scope.path,
-                    SearchBarAction::Search(keywords)
-                );
-            }
+            cx.widget_action(
+                self.widget_uid(),
+                &scope.path,
+                RoomFilterAction::Changed(keywords)
+            );
         }
 
-        // Handle user clicked the clear button
         if clear_button.clicked(actions) {
             input.set_text(cx, "");
             clear_button.set_visible(cx, false);
             input.set_key_focus(cx);
-
             cx.widget_action(
                 self.widget_uid(),
                 &scope.path,
-                SearchBarAction::ResetSearch,
+                RoomFilterAction::Changed(String::new())
             );
         }
     }