1 files changed, 58 insertions, 0 deletions
diff --git a/src/components/roster_list.rs b/src/components/roster_list.rs
new file mode 100644
index 0000000..a398ffe
--- /dev/null
+++ b/src/components/roster_list.rs
@@ -0,0 +1,58 @@
+use std::collections::HashSet;
+
+use contact_request_manager::AddContact;
+use jid::BareJID;
+use leptos::prelude::*;
+use reactive_stores::Store;
+use roster_list_item::RosterListItem;
+
+use crate::{components::icon::IconComponent, icon::Icon, roster::{Roster, RosterStoreFields}};
+
+mod contact_request_manager;
+mod roster_list_item;
+
+#[component]
+pub fn RosterList() -> impl IntoView {
+    let requests: ReadSignal<HashSet<BareJID>> = use_context().expect("no pending subscriptions in context");
+
+    let roster: Store<Roster> = use_context().expect("no roster in context");
+    let (open_add_contact, set_open_add_contact) = signal(false);
+
+    // TODO: filter new messages signal
+    view! {
+        <div class="roster-list panel">
+            <div class="header">
+                <h2>Roster</h2>
+                <div class="add-contact header-icon" class:open=open_add_contact>
+                    <IconComponent icon=Icon::AddContact24 on:click=move |_| set_open_add_contact.update(|state| *state = !*state)/>
+                    {move || {
+                        if !requests.read().is_empty() {
+                            view! {
+                                <div class="badge"></div>
+                            }.into_any()
+                        } else {
+                            view! {}.into_any()
+                        }
+                    }}
+                </div>
+            </div>
+            {move || {
+                if *open_add_contact.read() {
+                    view! {
+                        <div class="roster-add-contact">
+                            <AddContact />
+                        </div>
+                    }.into_any()
+                } else {
+                    view! {}.into_any()
+                }
+            }}
+            <div class="roster-list-roster">
+                <For each=move || roster.contacts().get() key=|contact| contact.0.clone() let(contact)>
+                    <RosterListItem contact=contact.1 />
+                </For>
+            </div>
+        </div>
+    }
+}
+