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/roster_list.rs | 77 ++++++++++++++++++++++++++++++++++++-------
 1 file changed, 66 insertions(+), 11 deletions(-)

(limited to 'src/components/roster_list.rs')

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