Base app with dioxus

.gitignore

@@ -0,0 +1,2 @@
+/target
+/dist

Cargo.toml

@@ -0,0 +1,11 @@
+[package]
+name = "bottom-web"
+version = "0.1.0"
+edition = "2021"
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[dependencies]
+dioxus = "0.4.0"
+dioxus-web = "0.4.0"
+bottomify = "1.2.0"

Dioxus.toml

@@ -0,0 +1,17 @@
+[application]
+name = "bottom-rs-web"
+default_platform = "web"
+
+[web.app]
+title = "bottom-rs converter"
+asset_dir = "public"
+
+[web.watcher]
+watch_path = ["src", "public"]
+
+[web.resource]
+style = [
+  "/style.css"
+]
+
+[web.resource.dev]

public/style.css

@@ -0,0 +1,86 @@
+@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300&family=Shantell+Sans:wght@300&display=swap');
+
+html {
+  background: #2b5768;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  max-width: 600px;
+  width: calc(100vw - 24px);
+  margin: 0 auto;
+  background: white;
+  padding: 0;
+}
+
+#main {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+nav, footer {
+  font-family: 'Quicksand', sans-serif;
+  background: #bae0ee;
+  padding: 16px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+
+h1 {
+  margin: 0;
+  flex: 1;
+}
+
+main {
+  flex: 1;
+  padding: 16px;
+  font-family: 'Shantell Sans', serif;
+}
+
+form {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  border: solid 2px #b0b1ff;
+  border-radius: 6px;
+  overflow: hidden;
+  margin: 8px -4px;
+}
+
+form * {
+  border: solid 0px transparent;
+  border-radius: none;
+  outline: none;
+}
+
+form textarea {
+  grid-column: 1/3;
+  height: 200px;
+  resize: none;
+  padding: 4px;
+}
+
+form button {
+  height: 50px;
+  background: #b0b1ff;
+  opacity: .8;
+}
+
+form button:hover:not(:disabled) {
+  opacity: 1;
+}
+
+form button:disabled {
+  opacity: .4;
+}
+
+#status {
+  font-size: 14px;
+  opacity: .6;
+}
+
+#status.error {
+  color: red;
+}

src/main.rs

@@ -0,0 +1,148 @@
+#![allow(non_snake_case)]
+use dioxus::prelude::*;
+
+use bottomify::bottom::{encode_string, decode_string};
+
+fn main() {
+    dioxus_web::launch(App);
+}
+
+fn App(cx: Scope) -> Element {
+    cx.render(rsx! {
+        Layout {
+            Encoder { }
+        }
+    })
+}
+
+#[derive(Props)]
+struct LayoutProps<'a> {
+    children: Element<'a>,
+}
+fn Layout<'a>(cx: Scope<'a, LayoutProps<'a>>) -> Element {
+    cx.render(rsx! {
+        nav {
+            h1 {
+                "bottom-rs-web"
+            }
+            a {
+                href: "https://github.com/bottom-software-foundation/bottom-rs",
+                target: "_blank",
+                "original tool"
+            }
+        }
+        main {
+            &cx.props.children
+        }
+        footer {
+            span {
+                "Created by "
+                a {
+                    href: "https://tempest.dev/about/rose",
+                    "Ashelyn Rose"
+                },
+                " because they were far too bored"
+            }
+        }
+    })
+}
+
+fn Encoder<'a>(cx: Scope<'a, LayoutProps<'a>>) -> Element {
+    let input_text = use_state(cx, || "".to_string());
+    let status_text = use_state(cx, || "".to_string());
+    let error_status = use_state(cx, || false);
+
+    let input_stripped = strip_spaces(input_text.to_string());
+    let is_valid_bottom = decode_string(&input_stripped).is_ok();
+
+    let bottomify = move |event: Event<MouseData>| {
+        event.stop_propagation();
+
+        let input = input_text.to_string();
+        let space_stripped = strip_spaces(input_text.to_string());
+
+        if space_stripped.len() < 1 {
+            return
+        }
+
+        input_text.set(encode_string(&input_text.to_string()));
+        status_text.set(format!("Bottomed from \"{}\"", input));
+        error_status.set(false);
+    };
+
+    let debottomify = move |event: Event<MouseData>| {
+        event.stop_propagation();
+
+        let input = input_text.to_string();
+        let space_stripped = strip_spaces(input_text.to_string());
+
+        if space_stripped.len() < 1 {
+            return
+        }
+
+        let result = decode_string(&space_stripped);
+
+        match result {
+            Ok(output) => {
+                input_text.set(output);
+                status_text.set(format!("De-bottomed from {}", input));
+                error_status.set(false);
+            }
+            Err(_error) => {
+                status_text.set("Could not decode bottom text".to_string());
+                error_status.set(true);
+            }
+        }
+    };
+
+    cx.render(rsx! {
+        label {
+            "for": "input",
+            "Enter a message to convert:"
+        }
+        form {
+            action: "javascript:void(0);",
+            textarea {
+                id: "input",
+                value: "{input_text}",
+                oninput: move |evt| input_text.set(evt.value.clone()),
+            }
+            button {
+                disabled: is_valid_bottom,
+                title: if is_valid_bottom {
+                    "Not encoding, input is already valid bottom text"
+                } else {
+                    ""
+                },
+                onclick: bottomify,
+                "Bottomify"
+            }
+            button {
+                disabled: !is_valid_bottom,
+                title: if !is_valid_bottom {
+                    "Cannot decode, input is not valid bottom text"
+                } else {
+                    ""
+                },
+                onclick: debottomify,
+                "Debottomify"
+            }
+        }
+
+        span {
+            id: "status",
+            class: if **error_status {
+                "error"
+            } else {
+                "false"
+            },
+            "{status_text}"
+        }
+    })
+}
+
+fn strip_spaces(input: String) -> String {
+    input.split(' ')
+        .collect::<Vec<_>>()
+        .join("")
+}