♻️ Clean Cargo.toml file and add target specific dependencies

tracing package doesn't support web platform when dioxus-logger `will eventually support every target that Dioxus
does. Currently only web and desktop platforms are supported.`

Cargo.toml

@@ -3,13 +3,16 @@ name = "beau-gosse-du-92"
 version = "0.1.0"
 edition = "2021"
 
-# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+[features]
+default = []
+desktop = ["dioxus/desktop"]
+web = ["dioxus/web"]
 
 [dependencies]
 dioxus = "0.5.0"
-dioxus-desktop = "0.5.0"
 dioxus-free-icons = { version = "0.8", features = ["material-design-icons-navigation", "ionicons"] }
-dioxus-std = { git = "https://github.com/DioxusLabs/dioxus-std.git", branch = "master", features = ["utils"] }
+dioxus-sdk = { version = "0.5.0", features = ["utils"] }
+dioxus-logger = { version = "0.4.1", features = ["timestamps"] }
 
 matrix-sdk = { git = "https://github.com/matrix-org/matrix-rust-sdk.git", branch = "main", default-features = false, features = ["js", "rustls-tls"] }
 
@@ -17,12 +20,10 @@ anyhow = "1.0.75"
 url = "2.5.0"
 dirs = "5.0.1"
 ctrlc-async = "3.2.2"
-tracing-subscriber = "0.3.18"
 thiserror = "1.0.50"
 turf = "0.7.0"
 tokio = "1.34.0"
 log = "0.4.20"
-tracing = "0.1.40"
 futures-util = "0.3.29"
 futures = "0.3.29"
 rand = "0.8.5"
@@ -30,17 +31,13 @@ reqwest = "0.11.24"
 validator = { version = "0.17.0", features = ["derive"] }
 const_format = "0.2.32"
 zxcvbn = "2.2.2"
+async-std = "1.12.0"
 
-[build]
-target = "x86_64-unknown-linux-gnu"
+[target.'cfg(target_family = "wasm")'.dependencies]
+web-sys = { version = "0.3.69" }
 
 [build-dependencies]
 regex = "1.10.3"
 
 [package.metadata.turf.class_names]
 template = "<original_name>--<id>"
-
-[features]
-default = []
-desktop = ["dioxus/desktop"]
-web = ["dioxus/web"]

src/base.rs

@@ -15,7 +15,7 @@ use matrix_sdk::{
     ruma::{OwnedRoomId, OwnedUserId},
 };
 use tokio::select;
-use tracing::{debug, error, warn};
+use log::{debug, error, warn};
 
 use crate::ui::components::chats_window::interface::Interface as ChatsWinInterface;
 

src/infrastructure/messaging/matrix/client.rs

@@ -1,11 +1,11 @@
 use std::cell::RefCell;
 use std::sync::Arc;
 
+use log::{debug, error};
 use tokio::sync::broadcast;
 use tokio::sync::broadcast::Sender;
 use tokio::sync::mpsc::{unbounded_channel, UnboundedReceiver};
 use tokio::task::JoinHandle;
-use tracing::{debug, error};
 
 use matrix_sdk::{
     config::SyncSettings,

src/infrastructure/services/random_svg_generators.rs

@@ -1,12 +1,17 @@
-use std::collections::HashMap;
 use std::fmt;
-use std::io::Result as IoResult;
+use std::future::Future;
 use std::sync::OnceLock;
+use std::{collections::HashMap, future::IntoFuture};
 
+use log::error;
 use rand::distributions::{Alphanumeric, DistString};
 use reqwest::Result as RequestResult;
+
+#[cfg(feature = "desktop")]
 use tokio::fs::read_to_string;
-use tracing::error;
+
+#[cfg(feature = "web")]
+use web_sys;
 
 #[derive(Eq, PartialEq, Hash)]
 pub enum AvatarFeeling {
@@ -59,9 +64,9 @@ struct DicebearConfig<'a> {
     lips: Vec<u32>,
 }
 
-fn dicebear_variants() -> &'static HashMap<AvatarFeeling, DicebearConfig<'static>> {
-    static HASHMAP: OnceLock<HashMap<AvatarFeeling, DicebearConfig>> = OnceLock::new();
-    HASHMAP.get_or_init(|| {
+fn avatar_variants() -> &'static HashMap<AvatarFeeling, DicebearConfig<'static>> {
+    static VARIANTS: OnceLock<HashMap<AvatarFeeling, DicebearConfig>> = OnceLock::new();
+    VARIANTS.get_or_init(|| {
         let mut variants = HashMap::new();
         variants.insert(
             AvatarFeeling::Alerting,
@@ -103,17 +108,16 @@ fn render_dicebear_variants(values: &[u32]) -> String {
 }
 
 async fn fetch_text(req: String) -> RequestResult<String> {
-    reqwest::get(req).await?.text().await
-}
-
-async fn read_file(path: &str) -> IoResult<String> {
-    read_to_string(path).await
+    match reqwest::get(req).await?.error_for_status() {
+        Ok(res) => res.text().await,
+        Err(err) => Err(err),
+    }
 }
 
 async fn fetch_dicebear_svg(
     r#type: &DicebearType,
     req_fields: &Vec<String>,
-    placeholder_path: Option<&str>,
+    placeholder_fetcher: Option<Box<impl Future<Output = Option<String>>>>,
 ) -> String {
     // TODO: Use configuration file
     let url = "dicebear.tools.adrien.run";
@@ -121,7 +125,7 @@ async fn fetch_dicebear_svg(
     let seed = Alphanumeric.sample_string(&mut rand::thread_rng(), 16);
     let type_str = r#type.to_string();
     let url = format!(
-        "https://{url}/7.x/{type_str}/svg?seed={seed}{}{}",
+        "https://{url}/8.x/{type_str}/svg?seed={seed}&randomizeIds=true{}{}",
         if !req_fields.is_empty() { "&" } else { " " },
         req_fields.join("&")
     );
@@ -130,19 +134,10 @@ async fn fetch_dicebear_svg(
         Ok(text) => Some(text),
         Err(err) => {
             error!("Error during placeholder loading: {}", err);
-
-            match placeholder_path {
-                Some(placeholder_path) => match read_file(placeholder_path).await {
-                    Ok(content) => Some(content),
-                    Err(err) => {
-                        error!(
-                            "Error during to read {placeholder_path} file: {}",
-                            err.to_string()
-                        );
-                        None
-                    }
-                },
-                None => None,
+            if let Some(placeholder_fetcher) = placeholder_fetcher {
+                placeholder_fetcher.into_future().await
+            } else {
+                None
             }
         }
     };
@@ -150,9 +145,44 @@ async fn fetch_dicebear_svg(
     text.unwrap_or("".to_string())
 }
 
+#[cfg(feature = "desktop")]
+fn gen_placeholder_fetcher<'a>(path: &'static str) -> Box<impl Future<Output = Option<String>>> {
+    let path = format!(".{}", &path);
+    Box::new(async move {
+        match read_to_string(&path).await {
+            Ok(content) => Some(content),
+            Err(err) => {
+                error!(
+                    "Error during the access to the {path} file: {}",
+                    err.to_string()
+                );
+                None
+            }
+        }
+    })
+}
+#[cfg(feature = "web")]
+fn gen_placeholder_fetcher<'a>(path: &'static str) -> Box<impl Future<Output = Option<String>>> {
+    Box::new(async move {
+        let url = format!("{}{}", web_sys::window().unwrap().origin(), path);
+        match fetch_text(url).await {
+            Ok(content) => Some(content),
+            Err(err) => {
+                error!("Error during {path} fetching: {}", err.to_string());
+                None
+            }
+        }
+    })
+}
+
+#[cfg(not(any(feature = "desktop", feature = "web")))]
+fn gen_placeholder_fetcher<'a>(_path: &'static str) -> Box<impl Future<Output = Option<String>>> {
+    Box::new(async move { None })
+}
+
 pub async fn generate_random_svg_avatar<'a>(config: Option<&'a AvatarConfig<'a>>) -> String {
     let (variant, feeling) = match config {
-        Some(config) => (dicebear_variants().get(&config.feeling), &config.feeling),
+        Some(config) => (avatar_variants().get(&config.feeling), &config.feeling),
         None => (None, &AvatarFeeling::Alerting),
     };
 
@@ -182,15 +212,15 @@ pub async fn generate_random_svg_avatar<'a>(config: Option<&'a AvatarConfig<'a>>
     }
 
     let placeholder_path = match feeling {
-        AvatarFeeling::Ok => "./images/modal-default-ok-icon.svg",
-        AvatarFeeling::Warning => "./images/modal-default-warning-icon.svg",
-        AvatarFeeling::Alerting => "./images/modal-default-critical-icon.svg",
+        AvatarFeeling::Ok => "/images/modal-default-ok-icon.svg",
+        AvatarFeeling::Warning => "/images/modal-default-warning-icon.svg",
+        AvatarFeeling::Alerting => "/images/modal-default-critical-icon.svg",
     };
 
     fetch_dicebear_svg(
         &DicebearType::Notionists,
         &req_fields,
-        Some(placeholder_path),
+        Some(gen_placeholder_fetcher(placeholder_path)),
     )
     .await
 }
@@ -227,5 +257,11 @@ pub async fn generate_random_svg_shape<'a>(config: Option<&'a ShapeConfig<'a>>)
         req_fields.push(format!("shape3Color={}", config.shape_3_color));
     }
 
-    fetch_dicebear_svg(&DicebearType::Shapes, &req_fields, None).await
+    let placeholder_path = "/images/login-profile-placeholder.svg";
+    fetch_dicebear_svg(
+        &DicebearType::Shapes,
+        &req_fields,
+        Some(gen_placeholder_fetcher(placeholder_path)),
+    )
+    .await
 }

src/main.rs

@@ -4,9 +4,14 @@ mod infrastructure;
 mod ui;
 mod utils;
 
+use std::time::Duration;
+
+use async_std::task;
 use dioxus::prelude::*;
-use tokio::time::{sleep, Duration};
-use tracing::{debug, Level};
+use log::{debug, LevelFilter};
+
+#[cfg(feature = "desktop")]
+use dioxus::desktop::Config;
 
 use crate::base::{login, sync_rooms};
 use crate::base::{APP_SETTINGS, ROOMS, SESSION};
@@ -24,8 +29,8 @@ fn app() -> Element {
     // Dummy timer simulating the loading of the application
     let _: Coroutine<()> = use_coroutine(|_: UnboundedReceiver<_>| async move {
         debug!("Not ready");
-        sleep(Duration::from_secs(3)).await;
-        // sleep(Duration::from_secs(0)).await;
+        task::sleep(Duration::from_secs(3)).await;
+        // task::sleep(Duration::from_secs(0)).await;
         debug!("Ready");
         ready.set(true);
     });
@@ -108,10 +113,17 @@ fn app() -> Element {
 }
 
 fn main() {
-    tracing_subscriber::fmt()
-        // .pretty()
-        .with_max_level(Level::DEBUG)
-        .init();
+    dioxus_logger::init(LevelFilter::Info).expect("failed to init logger");
 
-    launch(app);
+    #[cfg(feature = "desktop")]
+    {
+        let config = Config::new().with_menu(None);
+        let builder = LaunchBuilder::new().with_cfg(config);
+        builder.launch(app);
+    }
+    #[cfg(feature = "web")]
+    {
+        let builder = LaunchBuilder::new();
+        builder.launch(app);
+    }
 }

src/ui/_base.scss

@@ -186,6 +186,12 @@ $geist-font-path: "../fonts/Geist";
 
 $transition-duration: 300ms;
 
+@font-face {
+    src: url("#{$geist-font-path}/Geist-Medium.woff2") format("woff2");
+    font-family: "Geist";
+    font-weight: normal;
+}
+
 @font-face {
     src: url("#{$geist-font-path}/Geist-Bold.woff2") format("woff2");
     font-family: "Geist";
@@ -205,6 +211,7 @@ body {
     width: 100%;
 
     font-family: "Geist";
+    font-weight: normal;
 }
 
 ::selection {

src/ui/components/chats_window/conversation.rs

@@ -1,6 +1,6 @@
 use dioxus::prelude::*;
+use log::error;
 use matrix_sdk::ruma::OwnedRoomId;
-use tracing::error;
 
 use super::edit_section::EditSection;
 use crate::base::{sync_messages, ROOMS};

src/ui/components/chats_window/mod.rs

@@ -8,9 +8,9 @@ use std::cell::RefCell;
 use std::collections::{HashMap, HashSet};
 
 use dioxus::prelude::*;
+use log::{debug, error};
 use matrix_sdk::ruma::OwnedRoomId;
 use tokio::sync::broadcast::Receiver;
-use tracing::{debug, error};
 
 use crate::base::{sync_rooms, Room, ROOMS};
 use crate::infrastructure::messaging::matrix::requester::Receivers;

src/ui/components/chats_window/navbar.rs

@@ -1,5 +1,5 @@
 use dioxus::prelude::*;
-use tracing::debug;
+use log::debug;
 
 turf::style_sheet!("src/ui/components/chats_window/navbar.scss");
 

src/ui/components/contacts_window/contacts.rs

@@ -1,7 +1,7 @@
 use std::rc::Rc;
 
 use dioxus::prelude::*;
-use tracing::debug;
+use log::debug;
 
 use crate::ui::components::contacts_window::contacts_section::{
     filter_people_conversations, filter_room_conversations, ContactsSection,

src/ui/components/contacts_window/contacts_section.rs

@@ -4,8 +4,8 @@ use std::rc::Rc;
 use dioxus::prelude::*;
 use dioxus_free_icons::icons::io_icons::IoChevronDown;
 use dioxus_free_icons::Icon;
+use log::debug;
 use matrix_sdk::{ruma::OwnedRoomId, RoomState};
-use tracing::debug;
 
 use crate::base::{ByIdRooms, Room, CHATS_WIN_INTERFACE, ROOMS};
 use crate::ui::components::chats_window::interface::Interface as ChatsWindowInterface;

src/ui/components/contacts_window/mod.rs

@@ -3,7 +3,7 @@ mod contacts_section;
 mod user_infos;
 
 use dioxus::prelude::*;
-use tracing::debug;
+use log::debug;
 
 use crate::ui::components::contacts_window::contacts::Contacts;
 use crate::ui::components::contacts_window::user_infos::UserInfos;

src/ui/components/contacts_window/user_infos.rs

@@ -1,5 +1,5 @@
 use dioxus::prelude::*;
-use tracing::debug;
+use log::debug;
 
 use crate::ui::components::avatar_selector::AvatarSelector;
 use crate::ui::components::icons::DownArrowIcon;

src/ui/components/loading.rs

@@ -1,5 +1,5 @@
 use dioxus::prelude::*;
-use tracing::debug;
+use log::debug;
 
 use super::spinner::Spinner;
 use super::wallpaper::Wallpaper;

src/ui/components/login.rs

@@ -5,7 +5,7 @@ use std::rc::Rc;
 
 use const_format::formatcp;
 use dioxus::prelude::*;
-use tracing::{debug, error, warn};
+use log::{debug, error, warn};
 use validator::{Validate, ValidateArgs, ValidateEmail, ValidationError, ValidationErrors};
 use zxcvbn::zxcvbn;
 

src/ui/components/main_window.rs

@@ -1,5 +1,5 @@
 use dioxus::prelude::*;
-use tracing::debug;
+use log::debug;
 
 use crate::base::SESSION;
 use crate::ui::components::contacts_window::ContactsWindow;

src/ui/components/modal.scss

@@ -68,7 +68,7 @@ $modal-max-height: 55vh;
 
             &__placeholder {
                 width: calc(100% + (2 * $border-normal-width));
-                height: calc(100% - (2 * $border-normal-width));
+                height: 100%;
             }
 
             svg {