Improve result component with .map() and class_list!

Cargo.lock

@@ -245,6 +245,26 @@ dependencies = [
  "half",
 ]
 
+[[package]]
+name = "class_list"
+version = "0.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1746c8c41168bc0a525478266040c7d1f31d96232a013cee3e7696989d639687"
+dependencies = [
+ "class_list_macro",
+]
+
+[[package]]
+name = "class_list_macro"
+version = "0.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1d8a4320f7efd8035b870463dfeb6aa81ec2811fad28bf3e853361c5de5c9605"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.28",
+]
+
 [[package]]
 name = "collection_literals"
 version = "1.0.1"
@@ -384,6 +404,7 @@ name = "dyesub-tool"
 version = "0.1.0"
 dependencies = [
  "askama",
+ "class_list",
  "derive_more",
  "kle-serial",
  "lazy_static",

dyesub-tool/Cargo.toml

@@ -5,6 +5,7 @@ edition = "2021"
 
 [dependencies]
 askama = "0.12.0"
+class_list = "0.1.1"
 derive_more = "0.99.17"
 kle-serial = "0.2.2"
 lazy_static = "1.4.0"

dyesub-tool/src/main.rs

@@ -8,6 +8,7 @@ use leptos::{ev::SubmitEvent, html::Input, *};
 use strum_macros::IntoStaticStr;
 use wasm_bindgen::{JsCast, JsValue};
 use web_sys::File;
+use class_list::class_list;
 
 #[derive(Clone)]
 struct ResultMessageData {
@@ -17,6 +18,7 @@ struct ResultMessageData {
 }
 
 #[derive(Default, Clone, Copy, IntoStaticStr)]
+#[allow(dead_code)]
 enum Colorway {
     #[default]
     #[strum(serialize = "plain")]
@@ -33,17 +35,12 @@ enum Colorway {
 
 #[component]
 fn ResultMessage(cx: Scope, message: ReadSignal<Option<ResultMessageData>>) -> impl IntoView {
-    view! { cx,
-        <Show when=move || message().is_some() fallback=move |_| {}>
-            <div class=move || {
-                let colorway_str: &str = message().unwrap().colorway.into();
-                colorway_str.to_owned() + " box"
-            }>
-                <h3>{move || message().unwrap().title}</h3>
-                <p>{move || message().unwrap().message}</p>
-            </div>
-        </Show>
-    }
+    move || message().map(|ResultMessageData { title, message, colorway }| view! { cx,
+        <div class=class_list!["box", <Colorway as Into<&str>>::into(colorway)]>
+            <h3>{title}</h3>
+            <p>{message}</p>
+        </div>
+    })
 }
 
 #[derive(From, IntoStaticStr)]

flake.nix

@@ -55,7 +55,7 @@ Updating `cargoHash`:
           version = "0.1.0";
           buildAndTestSubdir = "dyesub-tool";
           buildInputs = with pkgs; [ trunk ];
-          cargoHash = "sha256-UcFVv4lqmZW4Nwjps2u2cNU323hk8ezifeGU9dEZ7Ao=";
+          cargoHash = "sha256-d5uj2LjKOhASfHY4anH4CtbZy2JSMzhkukpGp8qfOy0=";
           meta = meta // {
             description = "A tool for generating dye sublimation transfer sheet SVGs for Japanese thumb shift 拇指シフト keycaps.";
           };