✨ Add TabsBar to the LayoutBig (Conversations layout)

src/ui/layouts/conversations.rs

@@ -143,10 +143,54 @@ fn LayoutSmall() -> Element {
 
             {conversation_panels.iter()}
 
+#[component]
+fn Tab(room_id: RoomId) -> Element {
+    let rooms = STORE.read().rooms();
+    let room = rooms.get(&room_id).unwrap().signal();
+
+    let room_avatar = if let Some(content) = room.avatar() {
+        let encoded = general_purpose::STANDARD.encode(content);
+        rsx! {
             div {
-                class: ClassName::CONVERSATIONS_VIEW_TAIL,
+                class: ClassName::TAB_AVATAR_IMAGE,
+
+                div {
+                    class: ClassName::TAB_AVATAR_IMAGE,
+                    background_image: format!("url(data:image/jpeg;base64,{encoded})"),
+                }
             }
         }
+    } else {
+        VNode::empty()
+    };
+
+    rsx! {
+        div {
+            class: ClassName::TAB,
+
+            {room_avatar}
+
+            div {
+                class: ClassName::TAB_NAME,
+
+                {room.name()}
+            }
+        }
+    }
+}
+
+#[component]
+fn TabsBar(room_ids: HashSet<RoomId>) -> Element {
+    let tabs = room_ids
+        .iter()
+        .map(|room_id| rsx! { Tab { room_id: room_id.clone() }});
+
+    rsx! {
+        div {
+            class: ClassName::TABS_BAR,
+
+            {tabs}
+        }
     }
 }
 
@@ -217,7 +261,11 @@ fn LayoutBig() -> Element {
             div {
                 class: ClassName::CONVERSATIONS_VIEW_BIG_CONVERSATIONS,
 
+                div {
+                    class: ClassName::CONVERSATIONS_VIEW_BIG_CONVERSATIONS_TABS_BAR,
 
+                    TabsBar { room_ids: displayed_room_ids}
+                }
 
                 div {
                     class: ClassName::CONVERSATIONS_VIEW_BIG_CONVERSATIONS_PANELS,