fix: hold drawer state across pinning

2 files changed, 53 insertions, 43 deletions

diff --git a/assets/style.scss b/assets/style.scss
index 4078aa1..6903145 100644
--- a/assets/style.scss
+++ b/assets/style.scss
@@ -284,7 +284,7 @@ background: #00000060;
 .chats-list-chats,
 .roster-list-roster {
   flex-grow: 1;
-  overflow: scroll;
+  overflow-y: scroll;
 }
 
 .open-chat-views {
@@ -345,7 +345,7 @@ background: #00000060;
   color: black;
   background-color: #dcdcdc;
   max-height: 32em;
-  overflow: scroll;
+  overflow-y: scroll;
   font-size: 16px;
   border: 2px solid black;
   padding: 8px;
@@ -372,7 +372,7 @@ background: #00000060;
   /* You could leave this, but after a user resizes, then it ruins the auto sizing */
   resize: none;
   /* Firefox shows scrollbar on growth, you can hide like this. */
-  overflow: scroll;
+  overflow-y: scroll;
 }
 
 .grow-wrap>textarea,
@@ -395,7 +395,7 @@ background: #00000060;
   display: flex;
   flex-direction: column-reverse;
   flex-grow: 1;
-  overflow: scroll;
+  overflow-y: scroll;
 }
 
 .chat-message {
@@ -573,6 +573,10 @@ background: #00000060;
   border-top: 2px solid black;
 }
 
+.sidebar {
+  position: relative;
+}
+
 .dock .personal .dock-item {
   padding: 8px 16px
 }
@@ -584,7 +588,6 @@ background: #00000060;
 
 .sidebar-drawer {
   height: auto;
-  position: relative;
   z-index: 5;
 }
 
@@ -592,17 +595,18 @@ background: #00000060;
   z-index: 10;
 }
 
-.sidebar .sidebar-hovering-drawer>* {
+.sidebar .sidebar-hovering-drawer {
   position: absolute;
-  left: 0;
-  transition: left 0.2s ease-in;
-  transition-behaviour: allow-discrete;
+  height: 100%;
+  /* must be width of dock... */
+  left: 82px;
+  transition: left 0.2s ease-out allow-discrete;
 }
 
 @starting-style {
-  .sidebar .sidebar-hovering-drawer>* {
+  .sidebar .sidebar-hovering-drawer {
     /* TODO: allow to edit this width */
-    left: -400px;
+    left: -318px;
   }
 }
 
@@ -1443,4 +1447,4 @@ hr {
   font-weight: normal;
   font-style: italic;
   font-display: block;
-}
\ No newline at end of file
+}
diff --git a/src/components/sidebar.rs b/src/components/sidebar.rs
index ca753ef..487fb76 100644
--- a/src/components/sidebar.rs
+++ b/src/components/sidebar.rs
@@ -1,7 +1,8 @@
-use std::collections::HashSet;
+use std::collections::{HashMap, HashSet};
 
 use jid::BareJID;
 use leptos::prelude::*;
+use reactive_stores::Store;
 
 use crate::components::{
     personal_status::PersonalStatus,
@@ -9,12 +10,18 @@ use crate::components::{
     roster_list::RosterList,
 };
 
-#[derive(PartialEq, Eq, Clone, Copy)]
+#[derive(PartialEq, Eq, Clone, Copy, Hash)]
 pub enum SidebarOpen {
     Roster,
     Chats,
 }
 
+#[derive(Store)]
+pub struct Drawer {
+    open: SidebarOpen,
+    hovering: bool,
+}
+
 pub enum Open {
     /// Currently on screen
     Focused,
@@ -68,8 +75,22 @@ pub fn Sidebar() -> impl IntoView {
     // for what has been clicked open (in the background)
     let (open, set_open) = signal(None::<SidebarOpen>);
     // for what is just in the hovered state (not clicked to be pinned open yet necessarily)
+    let open= Memo::new(move |_| open.get());
     let (hovered, set_hovered) = signal(None::<SidebarOpen>);
+    let hovered = Memo::new(move |_| hovered.get());
     let (just_closed, set_just_closed) = signal(false);
+    let just_closed = Memo::new(move |_| just_closed.get());
+
+    let pages = Memo::new(move |_| {
+        let mut pages = HashSet::new();
+        if let Some(hovered) = *hovered.read() {
+            pages.insert(hovered);
+        }
+        if let Some(opened) = *open.read() {
+            pages.insert(opened);
+        }
+        pages
+    });
 
     view! {
         <div class="sidebar" on:mouseleave=move |_| {
@@ -129,46 +150,31 @@ pub fn Sidebar() -> impl IntoView {
                     <PersonalStatus />
                 </div>
             </div>
-            {move || if let Some(hovered) = *hovered.read() {
-                if Some(hovered) != *open.read() {
-                    if !just_closed.get() {
-                        match hovered {
+            {move || {
+                if !just_closed.get() {
+                    view! {
+                        <For each=move || pages.get() key=|page| *page let(page)>
+                        {move || match page {
                             SidebarOpen::Roster => view! {
-                                <div class="sidebar-drawer sidebar-hovering-drawer">
+                                <div class:sidebar-drawer=true class:sidebar-hovering-drawer=move || {
+                                    !(*open.read() == Some(SidebarOpen::Roster)) && (*hovered.read() == Some(SidebarOpen::Roster))
+                                }>
                                     <RosterList />
                                 </div>
                             }.into_any(),
                             SidebarOpen::Chats => view! {
-                                <div class="sidebar-drawer sidebar-hovering-drawer">
+                                <div class:sidebar-drawer=true class:sidebar-hovering-drawer=move || {
+                                    !(*open.read() == Some(SidebarOpen::Chats)) && (*hovered.read() == Some(SidebarOpen::Chats))
+                                }>
                                     <ChatsList />
                                 </div>
                             }.into_any(),
-                        }
-                    } else {
-                        
-                        view! {}.into_any()
-                    }
+                        }}
+                        </For>
+                    }.into_any()
                 } else {
                     view! {}.into_any()
                 }
-            } else {
-                    view! {}.into_any()
-            }}
-            {move || if let Some(opened) = *open.read() {
-                match opened {
-                    SidebarOpen::Roster => view! {
-                        <div class="sidebar-drawer">
-                            <RosterList />
-                        </div>
-                    }.into_any(),
-                    SidebarOpen::Chats => view! {
-                        <div class="sidebar-drawer">
-                            <ChatsList />
-                        </div>
-                    }.into_any(),
-                }
-            } else {
-                    view! {}.into_any()
             }}
         </div>
     }