feat: profile settings panel

3 files changed, 227 insertions, 22 deletions

diff --git a/Cargo.toml b/Cargo.toml
index 4e894ed..38867aa 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -11,6 +11,7 @@ console_error_panic_hook = "0.1.7"
 filamento = { path = "../luz/filamento", features = [
 	"reactive_stores",
 	"opfs",
+	# "serde"
 ] }
 futures = "0.3.31"
 indexmap = "2.9.0"
@@ -29,7 +30,7 @@ tracing = "0.1.41"
 tracing-wasm = "0.2.1"
 uuid = { version = "1.16.0", features = ["v4"] }
 # wasm-bindgen = "0.2.100"
-web-sys = { version = "0.3.77", features = ["HtmlInputElement", "FileList"] }
+web-sys = { version = "0.3.77", features = ["HtmlInputElement", "FileList", "Url"] }
 
 [patch.crates-io]
 tokio_with_wasm = { path = "../tokio-with-wasm/tokio_with_wasm" }
diff --git a/assets/style.scss b/assets/style.scss
index 6903145..8838937 100644
--- a/assets/style.scss
+++ b/assets/style.scss
@@ -102,6 +102,7 @@ label {
 
 input[type="text"],
 input[type="password"] {
+  font-size: 1rem;
   border: 2px solid black;
   font-family: "k2d";
 }
@@ -118,6 +119,7 @@ main {
 
 button,
 .button {
+  font-size: 1rem;
   background: #FACC34;
   color: #000000;
   text-decoration: none !important;
@@ -127,6 +129,7 @@ button,
   font-family: K2D;
   font-weight: 600;
   box-shadow: inset 0px -0.75em 0.5em #ebb62e, 0 0.25em 0.25em #00000048;
+  cursor: pointer;
 }
 
 h1,
@@ -656,6 +659,76 @@ background: #00000060;
 
 .settings-page {
   flex: 1 1 0;
+  overflow-y: scroll;
+}
+
+.profile-settings {
+  display: flex;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  flex-direction: row-reverse;
+}
+
+.profile-form {
+  flex: 1 1 auto;
+  margin: 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 16px;
+}
+
+.profile-form label {
+  font-size: 1rem;
+}
+
+.profile-form .change-avatar {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+#client-user-avatar {
+  opacity: 0;
+  position: absolute;
+  z-index: -1;
+}
+
+.profile-preview {
+  margin: 24px;
+  border: 2px solid black;
+  min-width: 240px;
+}
+
+.profile-preview .preview {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.profile-preview h2 {
+  padding: 8px 16px;
+  border-bottom: 2px solid black;
+}
+
+.profile-preview .avatar {
+  width: 64px;
+  height: 64px;
+}
+
+.profile-preview .nick {
+  font-size: 20px;
+  font-weight: bold;
+}
+
+hr {
+  width: 100%;
+  border: 1px solid black;
+}
+
+.profile-preview .preview {
+  padding: 16px;
 }
 
 .modal .overlay {
diff --git a/src/views/macaw/settings.rs b/src/views/macaw/settings.rs
index 11a3fc3..c4cc99b 100644
--- a/src/views/macaw/settings.rs
+++ b/src/views/macaw/settings.rs
@@ -4,23 +4,53 @@ use profile_settings::ProfileSettings;
 use crate::{components::{icon::IconComponent, modal::Modal}, icon::Icon};
 
 mod profile_settings {
-    use filamento::error::{AvatarPublishError, CommandError};
+    use filamento::{error::{AvatarPublishError, CommandError, NickError}, user::User};
     use thiserror::Error;
     use leptos::prelude::*;
-    use web_sys::{js_sys::Uint8Array, wasm_bindgen::{prelude::Closure, JsCast, UnwrapThrowExt}, Event, FileReader, HtmlInputElement, ProgressEvent};
+    use web_sys::{js_sys::Uint8Array, wasm_bindgen::{prelude::Closure, JsCast, UnwrapThrowExt}, Event, FileReader, HtmlInputElement, ProgressEvent, Url};
 
-    use crate::{client::Client, files::Files};
+    use crate::{client::Client, files::Files, user::{fetch_avatar, NO_AVATAR}};
 
     #[derive(Debug, Clone, Error)]
     pub enum ProfileSaveError {
         #[error("avatar publish: {0}")]
         Avatar(#[from] CommandError<AvatarPublishError<Files>>),
+        #[error("nick publish: {0}")]
+        Nick(#[from] CommandError<NickError>),
     }
 
     #[component]
     pub fn ProfileSettings() -> impl IntoView {
         let client: Client = use_context().expect("no client in context");
 
+        let old_profile = LocalResource::new(move || {
+            let value = client.clone();
+            async move {
+                // TODO: error
+                let jid = &*value.jid;
+                let old_profile = value.get_user(jid.clone()).await.unwrap();
+                old_profile
+            }
+        });
+
+        view! {
+            {move || {
+                if let Some(old_profile) = old_profile.get() {
+                    view! {
+                        <ProfileForm old_profile />
+                    }.into_any()
+                } else {
+                    view! {}.into_any()
+                }
+            }}
+        }
+    }
+
+    #[component]
+    pub fn ProfileForm(old_profile: User) -> impl IntoView {
+        
+        let client: Client = use_context().expect("no client in context");
+
         // TODO: compartmentalise into error component, form component...
         let (error, set_error) = signal(None::<ProfileSaveError>);
         let error_message = move || {
@@ -32,9 +62,24 @@ mod profile_settings {
                 }
             })
         };
+
+        let (success_message, set_success_message) = signal(None::<String>);
+        let success_message = move || {
+            if let Some(message) = success_message.get() {
+                view! { <div class="success">{message}</div> }.into_any()
+            } else {
+                view! {}.into_any()
+            }
+        };
+
         let (profile_save_pending, set_profile_save_pending) = signal(false);
 
         let profile_upload_data = RwSignal::new(None::<Vec<u8>>);
+        let new_nick= RwSignal::new(old_profile.nick.clone().unwrap_or_default().to_string());
+        let has_avatar = RwSignal::new(old_profile.avatar.is_some());
+        let new_avatar_preview_url = RwSignal::new(None::<String>);
+        let remove_avatar = RwSignal::new(false);
+
         let from_input = move |ev: Event| {
             let elem = ev.target().unwrap().unchecked_into::<HtmlInputElement>();
         
@@ -43,6 +88,9 @@ mod profile_settings {
             let files = elem.files().unwrap_throw();
 
             if let Some(file) = files.get(0) {
+                let url = Url::create_object_url_with_blob(&file).unwrap_throw();
+
+                new_avatar_preview_url.set(Some(url));
                 let reader = FileReader::new().unwrap_throw();
                 // let name = file.name();
 
@@ -92,32 +140,115 @@ mod profile_settings {
 
         let save_profile = Action::new_local(move |_| {
             let client = client.clone();
-            async move {}
+            let old_nick = old_profile.nick.clone();
+            async move {
+                set_profile_save_pending.set(true);
+
+                let new_nick = new_nick.get();
+                let new_nick = if new_nick.is_empty() {
+                    None
+                } else {
+                    Some(new_nick)
+                };
+                if new_nick != old_nick {
+                    match client.change_nick(new_nick).await {
+                        Ok(_) => {},
+                        Err(e) => {
+                            set_error.set(Some(ProfileSaveError::Nick(e)));
+                            set_profile_save_pending.set(false);
+                            return;
+                        },
+                    }
+                }
+
+                if let Some(profile_data) = profile_upload_data.get() {
+                    match client.change_avatar(Some(profile_data)).await {
+                        Ok(_) => {},
+                        Err(e) => {
+                            set_error.set(Some(ProfileSaveError::Avatar(e)));
+                            set_profile_save_pending.set(false);
+                            return;
+                        },
+                    }
+                } else if remove_avatar.get() {
+                    match client.change_avatar(None).await {
+                        Ok(_) => {},
+                        Err(e) => {
+                            set_error.set(Some(ProfileSaveError::Avatar(e)));
+                            set_profile_save_pending.set(false);
+                            return;
+                        },
+                    }
+                }
+
+                set_profile_save_pending.set(false);
+                set_success_message.set(Some("Profile Updated!".to_string()));
+            }
         });
 
-        let new_nick= RwSignal::new("".to_string());
+        let _old_account_avatar = LocalResource::new(move || {
+            let avatar = old_profile.avatar.clone();
+            async move {
+                let url = fetch_avatar(avatar.as_deref()).await;
+                new_avatar_preview_url.set(Some(url));
+            }
+        });
 
         view! {
             <div class="profile-settings">
-                <form on:submit=move |ev| {
-                        ev.prevent_default();
-                        save_profile.dispatch(());
+                <div class="profile-preview">
+                    <h2>Profile Preview</h2>
+                    <div class="preview">
+                        <img class="avatar" src=new_avatar_preview_url />
+                        <div class="nick">{move || {
+                            let nick = new_nick.get();
+                            if nick.is_empty() {
+                                old_profile.jid.to_string()
+                            } else {
+                                nick
+                            }
+                        }}</div>
+                    </div>
+                </div>
+                <form class="profile-form" on:submit=move |ev| {
+                    ev.prevent_default();
+                    save_profile.dispatch(());
                 }>
+                    {success_message}
                     {error_message}
-                    <div class="change-avatar">
-                        <input type="file" id="client-user-avatar" on:change=from_input />
+                    <div>
+                    <h3>Nick</h3>
+                    <input disabled=profile_save_pending placeholder="Nick" type="text" id="client-user-nick" bind:value=new_nick name="client-user-nick" />
+                    </div>
+                    <div>
+                        <h3>Avatar</h3>
+                        <div class="change-avatar">
+                            <label for="client-user-avatar"><div class="button">Change Avatar</div></label>
+                            <input type="file" id="client-user-avatar" on:change=move |e| {
+                                has_avatar.set(true);
+                                remove_avatar.set(false);
+                                from_input(e);
+                            } />
+                            {move || {
+                                if has_avatar.get() {
+                                    view! {
+                                        <a on:click=move |_| {
+                                            profile_upload_data.set(None);
+                                            remove_avatar.set(true);
+                                            has_avatar.set(false);
+                                            new_avatar_preview_url.set(Some(NO_AVATAR.to_string()));
+                                        } style="cursor: pointer">Remove Avatar</a>
+                                    }.into_any()
+                                } else {
+                                    view! {}.into_any()
+                                }
+                            }}
+                        </div>
                     </div>
-                    <input disabled=profile_save_pending placeholder="Nickname" type="text" id="client-user-nick" bind:value=new_nick name="client-user-nick" />
+                    <hr />
                     <input disabled=profile_save_pending class="button" type="submit" value="Save Changes" />
                 </form>
             </div>
-            <div class="profile-preview">
-                <h2>Profile Preview</h2>
-                <div class="preview">
-                    <img />
-                    <div>nick</div>
-                </div>
-            </div>
         }
     }
 }
@@ -153,10 +284,10 @@ pub fn Settings() -> impl IntoView {
                     <div class="settings-page">
                         {move || if let Some(page) = show_settings.get() {
                             match page {
-                            SettingsPage::Account => view! { <div>"account"</div> }.into_any(),
-                            SettingsPage::Chat => view! { <div>"chat"</div> }.into_any(),
+                            SettingsPage::Account => view! { <div style="padding: 16px">"Account settings coming soon!"</div> }.into_any(),
+                            SettingsPage::Chat => view! { <div style="padding: 16px">"Chat settings coming soon!"</div> }.into_any(),
                             SettingsPage::Profile => view! { <ProfileSettings /> }.into_any(),
-                            SettingsPage::Privacy => view! { <div>"privacy"</div> }.into_any(),
+                            SettingsPage::Privacy => view! { <div style="padding: 16px">"Privacy settings coming soon!"</div> }.into_any(),
                             }
                         } else {
                             view! {}.into_any()