Fix searchbar (#98)

* fix: searchbar filter and adjust height items

* remove some clones

public/app.css

@@ -281,6 +281,7 @@ ul {
   gap: 0;
   height: fit-content;
   min-height: 78px;
+  overflow: hidden;
 }
 
 .list {
@@ -847,6 +848,12 @@ ul {
   line-height: 24px;
 }
 
+.header__title--sticky {
+  position: sticky;
+  top: 0;
+  background: var(--background);
+}
+
 .header__cta {
   cursor: pointer;
   background: transparent;
@@ -1282,6 +1289,17 @@ ul {
   height: calc(100vh - 80px);
 }
 
+.chat-list__rooms__content {
+  overflow: auto;
+}
+
+.chat-list__item {
+  display: flex;
+  height: fit-content;
+  flex-direction: column;
+  margin-bottom: 12px;
+}
+
 .chat-list__active-room {
   display: flex;
   gap: 12px;
@@ -1648,4 +1666,4 @@ ul {
   .menu {
     width: 100vw;
   }
-}
+}

src/pages/chat/chat_list.rs

@@ -261,35 +261,42 @@ pub fn ChatList() -> Element {
                         error: None,
                         on_input: move |event: FormEvent| {
                             pattern.set(event.value().clone());
-                            let default_rooms = all_rooms().iter().cloned().collect::<Vec<_>>();
                             if !event.value().is_empty() {
-                                let x = default_rooms
+                                let filter = all_rooms()
                                     .iter()
                                     .filter(|r| {
                                         r.name.to_lowercase().contains(&event.value().to_lowercase())
                                     })
                                     .cloned()
                                     .collect::<Vec<_>>();
-                                rooms_filtered.set(x);
+                                rooms_filtered.set(filter);
                             } else {
-                                rooms_filtered.set(rooms_list.get_joined().clone())
+                                rooms_filtered.set(rooms_list.get_joined())
                             }
                         },
                         on_keypress: move |_| {},
                         on_click: move |_| { on_scroll_chat_list_wrapper(ScrollToPosition::Right) }
                     }
-                    if !rooms_list.get_invited().is_empty() {
-                        h2 { class: "header__title", {translate!(i18, "chat.list.invitate")} }
+                    div {
+                        class: "chat-list__rooms__content",
+                        if !rooms_list.get_invited().is_empty() {
+                           div {
+                                class: "chat-list__item",
+                                h2 { class: "header__title header__title--sticky", {translate!(i18, "chat.list.invitate")} }
+                                RoomsList {
+                                    rooms: rooms_list.get_invited(),
+                                    is_loading: is_loading(),
+                                    on_submit: on_click_invitation
+                                }
+                           }
+                        }
 
-                        RoomsList {
-                            rooms: rooms_list.get_invited().clone(),
-                            is_loading: is_loading(),
-                            on_submit: on_click_invitation
+                        div {
+                            class: "chat-list__item",
+                            h2 { class: "header__title header__title--sticky", {translate!(i18, "chat.list.rooms")} }
+                            RoomsList { rooms: rooms_filtered(), is_loading: is_loading(), on_submit: on_click_room }
                         }
                     }
-
-                    h2 { class: "header__title", {translate!(i18, "chat.list.rooms")} }
-                    RoomsList { rooms: rooms_list.get_joined(), is_loading: is_loading(), on_submit: on_click_room }
                 }
                 div {
                     class: "chat-list__content",