From f3cf5c1cfca048cfb496592af18e07782e3d22a2 Mon Sep 17 00:00:00 2001
From: cel 🌸 <cel@bunny.garden>
Date: Mon, 19 May 2025 10:34:44 +0100
Subject: feat: new chat widget

---
 src/lib.rs | 171 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 168 insertions(+), 3 deletions(-)

(limited to 'src')

diff --git a/src/lib.rs b/src/lib.rs
index 9419d05..e887fc0 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -1023,6 +1023,16 @@ pub fn Overlay(set_open: WriteSignal<bool>, children: Children) -> impl IntoView
     }
 }
 
+#[component]
+pub fn Modal(set_open: WriteSignal<bool>, children: Children) -> impl IntoView {
+    view! {
+        <div class="modal">
+            <div class="modal-background" on:click=move |_| set_open.update(|state| *state = false)></div>
+            <div class="modal-content">{children()}</div>
+        </div>
+    }
+}
+
 #[component]
 pub fn OpenChatsPanelView() -> impl IntoView {
     let open_chats: Store<OpenChatsPanel> = use_context().expect("no open chats panel in context");
@@ -1377,12 +1387,38 @@ impl Icon {
             Icon::Available16Color => 16,
         }
     }
+
+    pub fn light(&self) -> bool {
+        match self {
+            Icon::AddContact24 => true,
+            Icon::Attachment24 => true,
+            Icon::Away16 => true,
+            Icon::Away16Color => false,
+            Icon::Bubble16 => true,
+            Icon::Bubble16Color => false,
+            Icon::Bubble24 => true,
+            Icon::Contact24 => true,
+            Icon::Delivered16 => true,
+            Icon::Dnd16 => true,
+            Icon::Dnd16Color => false,
+            Icon::Error16Color => false,
+            Icon::Forward24 => true,
+            Icon::Heart24 => true,
+            Icon::NewBubble24 => true,
+            Icon::Reply24 => true,
+            Icon::Sending16 => true,
+            Icon::Sent16 => true,
+            Icon::Chat16Color => false,
+            Icon::Xa16Color => false,
+            Icon::Available16Color => false,
+        }
+    }
 }
 
 #[component]
 pub fn IconComponent(icon: Icon) -> impl IntoView {
     view! {
-        <img class:icon=true style=move || format!("height: {}px; width: {}px", icon.size(), icon.size()) src=move || icon.src() />
+        <img class:light=icon.light() class:icon=true style=move || format!("height: {}px; width: {}px", icon.size(), icon.size()) src=move || icon.src() />
     }
 }
 
@@ -1945,6 +1981,8 @@ fn ChatsList() -> impl IntoView {
         }
     });
 
+    let (open_new_chat, set_open_new_chat) = signal(false);
+
     // TODO: filter new messages signal
     let new_messages_signal: RwSignal<MessageSubscriptions> = use_context().unwrap();
     let (sub_id, set_sub_id) = signal(None);
@@ -1983,7 +2021,24 @@ fn ChatsList() -> impl IntoView {
 
     view! {
         <div class="chats-list panel">
-            <h2>Chats</h2>
+            // TODO: update icon, tooltip on hover.
+            <div class="header">
+                <h2>Chats</h2>
+                <div class="new-chat header-icon" class:open=open_new_chat >
+                    <IconComponent icon=Icon::NewBubble24 on:click=move |_| set_open_new_chat.update(|state| *state = !*state)/>
+                    {move || {
+                        if *open_new_chat.read() {
+                            view! {
+                                <Overlay set_open=set_open_new_chat>
+                                    <NewChatWidget set_open_new_chat />
+                                </Overlay>
+                            }.into_any()
+                        } else {
+                            view! {}.into_any()
+                        }
+                    }}
+                </div>
+            </div>
             <div class="chats-list-chats">
                 <For each=move || chats.get() key=|chat| chat.1.1.message.read().id let(chat)>
                     <ChatsListItem chat=chat.1.0 message=chat.1.1 />
@@ -1993,6 +2048,116 @@ fn ChatsList() -> impl IntoView {
     }
 }
 
+#[derive(Clone, Debug, Error)]
+pub enum NewChatError {
+    #[error("Missing JID")]
+    MissingJID,
+    #[error("Invalid JID: {0}")]
+    InvalidJID(#[from] jid::ParseError),
+    #[error("Database: {0}")]
+    Db(#[from] CommandError<DatabaseError>),
+}
+
+#[component]
+fn NewChatWidget(set_open_new_chat: WriteSignal<bool>) -> impl IntoView {
+    let jid = RwSignal::new("".to_string());
+
+    // TODO: compartmentalise into error component, form component...
+    let (error, set_error) = signal(None::<NewChatError>);
+    let error_message = move || {
+        error.with(|error| {
+            if let Some(error) = error {
+                view! { <div class="error">{error.to_string()}</div> }.into_any()
+            } else {
+                view! {}.into_any()
+            }
+        })
+    };
+    let (new_chat_pending, set_new_chat_pending) = signal(false);
+ 
+    let open_chats: Store<OpenChatsPanel> =
+        use_context().expect("no open chats panel store in context");
+    let client = use_context::<Client>().expect("client not in context");
+
+    let chat_state_store: StateStore<JID, ArcStore<Chat>> =
+        use_context().expect("no chat state store");
+    let user_state_store: StateStore<JID, ArcStore<User>> =
+        use_context().expect("no user state store");
+
+    let open_chat = Action::new_local(move |_| {
+        let client = client.clone();
+        async move {
+            set_new_chat_pending.set(true);
+
+            if jid.read_untracked().is_empty() {
+                set_error.set(Some(NewChatError::MissingJID));
+                set_new_chat_pending.set(false);
+                return;
+            }
+
+            let jid = match JID::from_str(&jid.read_untracked()) {
+                Ok(j) => j,
+                Err(e) => {
+                    set_error.set(Some(e.into()));
+                    set_new_chat_pending.set(false);
+                    return;
+                }
+            };
+
+            let chat_jid = jid.as_bare();
+            let (chat, user) = match client.get_chat_and_user(chat_jid).await {
+                Ok(c) => c,
+                Err(e) => {
+                    set_error.set(Some(e.into()));
+                    set_new_chat_pending.set(false);
+                    return;
+                },
+            };
+
+            let chat = {
+                let user = user_state_store.store(user.jid.clone(), ArcStore::new(user));
+                let chat = chat_state_store.store(chat.correspondent.clone(), ArcStore::new(chat));
+                MacawChat { chat, user }
+            };
+            open_chats.update(|open_chats| open_chats.open(chat.clone()));
+            set_open_new_chat.set(false);
+        }
+    });
+
+    let jid_input = NodeRef::<Input>::new();
+    let _focus = Effect::new(move |_| {
+        if let Some(input) = jid_input.get() {
+            let _ = input.focus();
+            input.set_text_content(Some(""));
+            // input.style("height: 0");
+            // let height = input.scroll_height();
+            // input.style(format!("height: {}px", height));
+        }
+    });
+
+    view! {
+        <div class="new-chat-widget">
+            <form on:submit=move |ev| {
+                ev.prevent_default();
+                open_chat.dispatch(());
+            }>
+                {error_message}
+                <input
+                    disabled=new_chat_pending
+                    placeholder="JID"
+                    type="text"
+                    node_ref=jid_input
+                    bind:value=jid
+                    name="jid"
+                    id="jid"
+                    autofocus="true"
+                />
+                <input disabled=new_chat_pending class="button" type="submit" value="Start Chat" />
+            </form>
+        </div>
+    }
+}
+
 #[component]
 fn RosterList() -> impl IntoView {
     let roster: Store<Roster> = use_context().expect("no roster in context");
@@ -2000,7 +2165,7 @@ fn RosterList() -> impl IntoView {
     // TODO: filter new messages signal
     view! {
         <div class="roster-list panel">
-            <h2>Roster</h2>
+            <div class="header"><h2>Roster</h2><div class="header-icon"><IconComponent icon=Icon::AddContact24 /></div></div>
             <div class="roster-list-roster">
                 <For each=move || roster.contacts().get() key=|contact| contact.0.clone() let(contact)>
                     <RosterListItem contact=contact.1 />
-- 
cgit