Use thawui components for frontend (#40)

Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "mdns-browser-ui"
-version = "0.0.3"
+ersion = "0.0.4"
 edition = "2021"
 
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
@@ -14,6 +14,8 @@ serde-wasm-bindgen = "0.6"
 log = "^0.4.21"
 console_error_panic_hook = "0.1.7"
 console_log = "1.0.0"
+thaw = { version = "0.2.3", features = ["csr"] }
+leptos_meta = { version = "0.6.9", features = ["csr"] }
 
 [workspace]
 members = ["src-tauri"]

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "mdns-browser"
-version = "0.0.3"
+version = "0.0.4"
 description = "mDNS browser"
 authors = ["hrzlgnm"]
 edition = "2021"

src-tauri/tauri.conf.json

@@ -8,7 +8,7 @@
   },
   "package": {
     "productName": "mdns-browser",
-    "version": "0.0.3"
+    "version": "0.0.4"
   },
   "tauri": {
     "allowlist": {

src/app.rs

@@ -1,8 +1,10 @@
 use std::{fmt::Display, net::IpAddr};
 
-use leptos::{html::Input, *};
+use leptos::*;
+use leptos_meta::provide_meta_context;
 use serde::{Deserialize, Serialize};
 use serde_wasm_bindgen::{from_value, to_value};
+use thaw::{Button, GlobalStyle, Input, Layout, Space, Table, Theme, ThemeProvider};
 use wasm_bindgen::prelude::*;
 
 #[wasm_bindgen]
@@ -68,50 +70,59 @@ async fn resolve_service(service_type: String) -> ResolvedServices {
 #[component]
 fn ShowServicesTypes(services: ServiceTypes) -> impl IntoView {
     view! {
-        <ul>
+    <Table>
+        <thead>
+            <tr>
+                <th>"Service type"</th>
+            </tr>
+        </thead>
+        <tbody>
             {services.into_iter()
-                .map(|n| view! { <div>{n}</div>})
+                .map(|n| view! { <tr><td>{n}</td></tr>})
                 .collect::<Vec<_>>()}
-        </ul>
+        </tbody>
+    </Table>
     }
 }
 
 #[component]
 fn EnumerateServiceTypes() -> impl IntoView {
     let enum_action = create_action(|_input: &()| async move { enum_service_types().await });
     let value = enum_action.value();
-    view! { <form
-             on:submit=move |ev| {
-                 ev.prevent_default(); // don't reload the page...
-                 enum_action.dispatch(());
-             } >
-            <button type="submit">"Enum service types"</button>
-        </form>
-        <p>
-             "Service types"
-         </p>
-         {move || match value.get() {
-            None => view! { <p>"Click on button above."</p> }.into_view(),
+    let on_click = move |_| {
+        enum_action.dispatch(());
+    };
+    view! {
+        <Layout style="padding: 20px;">
+        <Space vertical=true>
+        <Button on_click>"Enumerate service types"</Button>
+        {move || match value.get() {
+            None => view! { "" }.into_view(),
             Some(services) => {
                 view! {
                     <ShowServicesTypes services />
                 }.into_view()
             }
-         }}
+            }
+        }
+        </Space>
+        </Layout>
     }
 }
 
 #[component]
 fn ShowResolvedServices(services: ResolvedServices) -> impl IntoView {
     view! {
-    <table>
+    <Table>
         <thead>
-            <th>Instance</th>
-            <th>Subtype</th>
-            <th>Hostname</th>
-            <th>Port</th>
-            <th>IPs</th>
-            <th>txt</th>
+            <tr>
+                <th>"Instance"</th>
+                <th>"Subtype"</th>
+                <th>"Hostname"</th>
+                <th>"Port"</th>
+                <th>"IPs"</th>
+                <th>"txt"</th>
+            </tr>
         </thead>
         <tbody>
         {services.into_iter()
@@ -126,51 +137,52 @@ fn ShowResolvedServices(services: ResolvedServices) -> impl IntoView {
             </tr>
             }).collect::<Vec<_>>()}
         </tbody>
-    </table>
+    </Table>
     }
 }
 
 #[component]
 fn ResolveService() -> impl IntoView {
-    let (service, _) = create_signal("".to_string());
+    let value = create_rw_signal(String::from(""));
     let resolve_action = create_action(|input: &String| {
         let input = input.clone();
         async move { resolve_service(input.clone()).await }
     });
-    let input_element: NodeRef<Input> = create_node_ref();
-    let on_submit = move |ev: ev::SubmitEvent| {
-        ev.prevent_default();
-        let value = input_element.get().expect("<input> to exist").value();
+
+    let on_click = move |_| {
+        let value = value.get();
         resolve_action.dispatch(value);
     };
 
-    let value = resolve_action.value();
+    let action = resolve_action.value();
 
     view! {
-        <form on:submit=on_submit>
-            <input type="text"
-                value=service
-                node_ref=input_element
-            />
-            <button type="submit">"Resolve"</button>
-        </form>
-         {move || match value.get() {
-            None => view! { <p>Click on Resolve</p> }.into_view(),
-            Some(services) => {
-                view! {
-                    <ShowResolvedServices services />
-                }.into_view()
-            }
-         }}
+    <Layout style="padding: 20px;">
+    <Space>
+        <Input value/>
+        <Button on_click>"Resolve"</Button>
+    </Space>
+    {move || match action.get() {
+        None => view! { "" }.into_view(),
+        Some(services) => {
+            view! {
+                <ShowResolvedServices services />
+            }.into_view()
+        }
+    }}
+    </Layout>
     }
 }
 
 #[component]
 pub fn App() -> impl IntoView {
+    provide_meta_context();
+    let theme = create_rw_signal(Theme::dark());
     view! {
-        <main class="container">
+        <ThemeProvider theme>
+            <GlobalStyle />
             <ResolveService />
             <EnumerateServiceTypes />
-        </main>
+        </ThemeProvider>
     }
 }

styles.css

@@ -1,107 +1,3 @@
-.logo.leptos:hover {
-  filter: drop-shadow(0 0 2em #a82e20);
-}
-:root {
-  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: 400;
-
-  color: #0f0f0f;
-  background-color: #f6f6f6;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
-}
-
-.container {
-  margin: 0;
-  padding-top: 10vh;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: 0.75s;
-}
-
-.logo.tauri:hover {
-  filter: drop-shadow(0 0 2em #24c8db);
-}
-
-.row {
-  display: flex;
-  justify-content: center;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-
-a:hover {
-  color: #535bf2;
-}
-
-h1 {
-  text-align: center;
-}
-
-input,
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  color: #0f0f0f;
-  background-color: #ffffff;
-  transition: border-color 0.25s;
-  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
-}
-
-button {
-  cursor: pointer;
-}
-button:hover {
-  border-color: #396cd8;
-}
-button:active {
-  border-color: #396cd8;
-  background-color: #e8e8e8;
-}
-
-input,
-button {
-  outline: none;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    color: #f6f6f6;
-    background-color: #2f2f2f;
-  }
-
-  a:hover {
-    color: #24c8db;
-  }
-
-  input,
-  button {
-    color: #ffffff;
-    background-color: #0f0f0f98;
-  }
-  button:active {
-    background-color: #0f0f0f69;
-  }
-}
+/**
+* No style yet, we currently rely upon thawui components style
+**/