1 files changed, 37 insertions, 5 deletions

diff --git a/src/components/chats_list.rs b/src/components/chats_list.rs
index 43ee53e..027de64 100644
--- a/src/components/chats_list.rs
+++ b/src/components/chats_list.rs
@@ -1,7 +1,9 @@
 use chats_list_item::ChatsListItem;
 use indexmap::IndexMap;
 use jid::BareJID;
-use leptos::prelude::*;
+use js_sys::{wasm_bindgen::UnwrapThrowExt, Object, Reflect, JSON};
+use leptos::{html::Div, prelude::*};
+use overlay_scrollbars::OverlayScrollbars;
 use tracing::debug;
 
 use crate::{
@@ -86,6 +88,30 @@ pub fn ChatsList() -> impl IntoView {
         }
     });
 
+    let chats_list: NodeRef<Div> = NodeRef::new();
+    let chats_list_viewport: NodeRef<Div> = NodeRef::new();
+    
+    let _scrollbars = Effect::new(move |_| {
+        if let Some(buffer) = chats_list.get() {
+            if let Some(viewport) = chats_list_viewport.get() {
+                let scrollbars_obj = Object::new();
+                // Reflect::set(&scrollbars_obj, &"theme".into(), &"os-macaw".into()).unwrap_throw();
+                // Reflect::set(&scrollbars_obj, &"autoHide".into(), &"leave".into()).unwrap_throw();
+                let options_obj = Object::new();
+                // Reflect::set(&options_obj, &"scrollbars".into(), &scrollbars_obj).unwrap_throw();
+
+                let elements_obj = Object::new();
+                Reflect::set(&elements_obj, &"viewport".into(), &viewport.into()).unwrap_throw();
+                let element_obj = Object::new();
+                Reflect::set(&elements_obj, &"elements".into(), &elements_obj).unwrap_throw();
+                Reflect::set(&element_obj, &"target".into(), &buffer.into()).unwrap_throw();
+                // let element = Object::define_property(&Object::define_property(&Object::new(), &"target".into(), &buffer.into()), &"elements".into(), &Object::define_property(&Object::new(), &"viewport".into(), &viewport.into()));
+                debug!("scrollable element: {}", JSON::stringify(&element_obj.clone().into()).unwrap_throw());
+                OverlayScrollbars(element_obj, options_obj); 
+            }
+        }
+    });
+
     view! {
         <div class="chats-list panel">
             // TODO: update icon, tooltip on hover.
@@ -110,10 +136,16 @@ pub fn ChatsList() -> impl IntoView {
                     }}
                 </div>
             </div>
-            <div class="chats-list-chats">
-                <For each=move || chats.get() key=|chat| chat.1.1.message.get().read().id let(chat)>
-                    <ChatsListItem chat=chat.1.0.into() message=chat.1.1.into() />
-                </For>
+            <div class="overlay-scroll" node_ref=chats_list>
+                <div class="chats-list-chats" node_ref=chats_list_viewport>
+                    <For
+                        each=move || chats.get()
+                        key=|chat| chat.1.1.message.get().read().id
+                        let(chat)
+                    >
+                        <ChatsListItem chat=chat.1.0.into() message=chat.1.1.into() />
+                    </For>
+                </div>
             </div>
         </div>
     }