From 2cac8c729c8ee175f01f677f285382349a7f9f62 Mon Sep 17 00:00:00 2001
From: cel 🌸 <cel@bunny.garden>
Date: Wed, 11 Jun 2025 09:52:05 +0100
Subject: feat: prettier scrollbars

---
 src/components/chats_list.rs       | 42 +++++++++++++++++---
 src/components/message_composer.rs | 79 +++++++++++++++++++++++++++-----------
 src/components/roster_list.rs      | 77 +++++++++++++++++++++++++++++++------
 3 files changed, 160 insertions(+), 38 deletions(-)

(limited to 'src')

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>
     }
diff --git a/src/components/message_composer.rs b/src/components/message_composer.rs
index 09e5f80..6b34298 100644
--- a/src/components/message_composer.rs
+++ b/src/components/message_composer.rs
@@ -1,6 +1,9 @@
 use filamento::chat::Body;
 use jid::BareJID;
+use js_sys::{wasm_bindgen::UnwrapThrowExt, Object, Reflect, JSON};
 use leptos::{html::Div, prelude::*, task::spawn_local};
+use overlay_scrollbars::OverlayScrollbars;
+use tracing::debug;
 
 use crate::client::Client;
 
@@ -60,35 +63,67 @@ pub fn ChatViewMessageComposer(chat: BareJID) -> impl IntoView {
     // };
     //
 
+    let composer: NodeRef<Div> = NodeRef::new();
+
+    let _scrollbars = Effect::new(move |_| {
+        if let Some(buffer) = composer.get() {
+            if let Some(viewport) = message_input.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()
+                );
+                debug!(
+                    "scrollable options: {}",
+                    JSON::stringify(&options_obj.clone().into()).unwrap_throw()
+                );
+                OverlayScrollbars(element_obj, options_obj);
+            }
+        }
+    });
+
     // TODO: placeholder
     view! {
         <form class="new-message-composer panel">
-            <div
-                class="text-box"
-                on:input:target=move |ev| {
-                    new_message.set(ev.target().text_content().unwrap_or_default())
-                }
-                node_ref=message_input
-                contenteditable
-                on:keydown=move |ev| {
-                    match ev.key_code() {
-                        16 => set_shift_pressed.set(true),
-                        13 => {
-                            if !shift_pressed.get() {
-                                ev.prevent_default();
-                                send_message();
+            <div class="overlay-scroll" node_ref=composer>
+                <div
+                    class="text-box"
+                    on:input:target=move |ev| {
+                        new_message.set(ev.target().text_content().unwrap_or_default())
+                    }
+                    node_ref=message_input
+                    contenteditable
+                    on:keydown=move |ev| {
+                        match ev.key_code() {
+                            16 => set_shift_pressed.set(true),
+                            13 => {
+                                if !shift_pressed.get() {
+                                    ev.prevent_default();
+                                    send_message();
+                                }
                             }
+                            _ => {}
                         }
-                        _ => {}
                     }
-                }
-                on:keyup=move |ev| {
-                    match ev.key_code() {
-                        16 => set_shift_pressed.set(false),
-                        _ => {}
+                    on:keyup=move |ev| {
+                        match ev.key_code() {
+                            16 => set_shift_pressed.set(false),
+                            _ => {}
+                        }
                     }
-                }
-            ></div>
+                ></div>
+            </div>
         // <input hidden type="submit" />
         </form>
     }
diff --git a/src/components/roster_list.rs b/src/components/roster_list.rs
index 50c7989..21a9666 100644
--- a/src/components/roster_list.rs
+++ b/src/components/roster_list.rs
@@ -2,9 +2,12 @@ use std::collections::HashSet;
 
 use contact_request_manager::AddContact;
 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 reactive_stores::Store;
 use roster_list_item::RosterListItem;
+use tracing::debug;
 
 use crate::{
     components::icon::IconComponent,
@@ -29,6 +32,54 @@ pub fn RosterList() -> impl IntoView {
     let open_chat = Memo::new(move |_| open_chats.chat_view().get());
     provide_context(open_chat);
 
+    let roster_list: NodeRef<Div> = NodeRef::new();
+    let roster_list_viewport: NodeRef<Div> = NodeRef::new();
+
+    let _scrollbars = Effect::new(move |_| {
+        if let Some(buffer) = roster_list.get() {
+            if let Some(viewport) = roster_list_viewport.get() {
+                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, Object::new());
+            }
+        }
+    });
+
+    let add_contact: NodeRef<Div> = NodeRef::new();
+    let add_contact_viewport: NodeRef<Div> = NodeRef::new();
+
+    let _scrollbars = Effect::new(move |_| {
+        if let Some(buffer) = add_contact.get() {
+            if let Some(viewport) = add_contact_viewport.get() {
+                let scrollbars_obj = Object::new();
+                Reflect::set(&scrollbars_obj, &"theme".into(), &"os-macaw".into()).unwrap_throw();
+                Reflect::set(&scrollbars_obj, &"move".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);
+            }
+        }
+    });
+
     // TODO: filter new messages signal
     view! {
         <div class="roster-list panel">
@@ -51,8 +102,10 @@ pub fn RosterList() -> impl IntoView {
             {move || {
                 if *open_add_contact.read() {
                     view! {
-                        <div class="roster-add-contact">
-                            <AddContact />
+                        <div class="overlay-scroll add-contact-panel" node_ref=add_contact>
+                            <div class="roster-add-contact" node_ref=add_contact_viewport>
+                                <AddContact />
+                            </div>
                         </div>
                     }
                         .into_any()
@@ -60,14 +113,16 @@ pub fn RosterList() -> impl IntoView {
                     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 class="overlay-scroll" node_ref=roster_list>
+                <div class="roster-list-roster" node_ref=roster_list_viewport>
+                    <For
+                        each=move || roster.contacts().get()
+                        key=|contact| contact.0.clone()
+                        let(contact)
+                    >
+                        <RosterListItem contact=contact.1 />
+                    </For>
+                </div>
             </div>
         </div>
     }
-- 
cgit