radios

Cargo.lock

@@ -1760,9 +1760,9 @@ checksum = "03087c2bad5e1034e8cace5926dec053fb3790248370865f5117a7d0213354c8"
 
 [[package]]
 name = "leptos"
-version = "0.7.5"
+version = "0.7.7"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "78329c12843d64766d8f00216aae665416d804327302ce8e0ab83884dfa91887"
+checksum = "88613d81f70f4e267473b2ee107e1ee70cf765a3c3dfee945929c8e9c520b957"
 dependencies = [
  "any_spawner",
  "base64 0.22.1",
@@ -1823,9 +1823,9 @@ dependencies = [
 
 [[package]]
 name = "leptos_config"
-version = "0.7.5"
+version = "0.7.7"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "132a18e8ffc4fbe2d624f3743d88a1b4989bff2d5e12be2b0d2749201d9dfb52"
+checksum = "4172cfee12576224775ccfbb9d3e76625017a8b4207c4641a2f9b96a70e6d524"
 dependencies = [
  "config",
  "regex",
@@ -1836,9 +1836,9 @@ dependencies = [
 
 [[package]]
 name = "leptos_dom"
-version = "0.7.5"
+version = "0.7.7"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d468f638f2f13d70d99d9952be98d671a75366034472f3828e586ba62d770049"
+checksum = "a41f6dc3ddaa09d876d7015f08f4f3905787da4ea5460cef130c365419483a89"
 dependencies = [
  "js-sys",
  "or_poisoned",
@@ -1852,9 +1852,9 @@ dependencies = [
 
 [[package]]
 name = "leptos_hot_reload"
-version = "0.7.5"
+version = "0.7.7"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8ba37d76693fc6228554e0bb06a9aa41c59e2b5180caf423c7913557b81d01dd"
+checksum = "31f5c961e5d9b2aa6deab39d5d842272e8b1b165744b5caf674770d5cf0daa04"
 dependencies = [
  "anyhow",
  "camino",
@@ -1885,9 +1885,9 @@ dependencies = [
 
 [[package]]
 name = "leptos_macro"
-version = "0.7.5"
+version = "0.7.7"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "064d0c8b144b93f8d7e84b30c16d1da0e64a63c7e91b9a872f7be63601c5868b"
+checksum = "2b9165909eabb02188a4b33b0ab6acff408bdf440018bf65b30bba0d38d61b19"
 dependencies = [
  "attribute-derive",
  "cfg-if",
@@ -1961,9 +1961,9 @@ dependencies = [
 
 [[package]]
 name = "leptos_server"
-version = "0.7.5"
+version = "0.7.7"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "fb1779f1f0570915066c132fb11f999add8b13d02ca5221735193eb02b3fa69a"
+checksum = "4fee9ed4526484b17561bc8ce1532c613e37be2c01788fed3d1c4104db674dd9"
 dependencies = [
  "any_spawner",
  "base64 0.22.1",
@@ -2663,9 +2663,9 @@ dependencies = [
 
 [[package]]
 name = "reactive_graph"
-version = "0.1.5"
+version = "0.1.7"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "059aede5acae8f5c25b1d34b6df34700006418b3c493db3698b7ebcd4a8a6287"
+checksum = "9996b4c0f501d64a755ff3dfbe9276e9f834d105d7d45059ad4bd6d2a56477d0"
 dependencies = [
  "any_spawner",
  "async-lock",
@@ -2685,9 +2685,9 @@ dependencies = [
 
 [[package]]
 name = "reactive_stores"
-version = "0.1.5"
+version = "0.1.7"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "4c7edacf4298579a5772285b8e2dc0b9953c8fbaa9c3f56c3dd69d56e5af7a48"
+checksum = "74c3d2a20d8edd8ac6628718209f743da86349d7f10a4458304666c2ddfc082e"
 dependencies = [
  "guardian",
  "itertools 0.13.0",
@@ -2700,9 +2700,9 @@ dependencies = [
 
 [[package]]
 name = "reactive_stores_macro"
-version = "0.1.5"
+version = "0.1.7"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "178b1cd8b2871a45bfc8e13ff8076049b6e9a5132e72414e5cab3894c4a6adb3"
+checksum = "6d4d8e40112b8ee1424e5ec636fcbc9764c1a099e81f8fa818f6762b43cc10cd"
 dependencies = [
  "convert_case",
  "proc-macro-error2",
@@ -2941,9 +2941,9 @@ dependencies = [
 
 [[package]]
 name = "server_fn"
-version = "0.7.5"
+version = "0.7.7"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5c183c31152fd00e994a3ea0ca43e6017056ccf7812160b0ae008acc3de8241c"
+checksum = "055476c2a42c9a98a69e3f0ce29b86aa3acbdef19a84e0523330f095097defcf"
 dependencies = [
  "axum",
  "bytes",
@@ -2978,9 +2978,9 @@ dependencies = [
 
 [[package]]
 name = "server_fn_macro"
-version = "0.7.5"
+version = "0.7.7"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c43b2266308c118be1a1cc60602f8efb07a64e72deed8d317704d5cfda092ca1"
+checksum = "e65737414a9583ce3b43dddd4e5dfb33fe385a6933ed79a9b539b8eb0767cd07"
 dependencies = [
  "const_format",
  "convert_case",
@@ -2992,9 +2992,9 @@ dependencies = [
 
 [[package]]
 name = "server_fn_macro_default"
-version = "0.7.5"
+version = "0.7.7"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "087eca61bc8f93d868b8c10ca058da358fd7aaeb7bc8415b572f9f3f27ce0b93"
+checksum = "563909a43390341403ab76fbc33fde306712613da02244e692eabeae8ffde949"
 dependencies = [
  "server_fn_macro",
  "syn",
@@ -3148,9 +3148,9 @@ dependencies = [
 
 [[package]]
 name = "tachys"
-version = "0.1.5"
+version = "0.1.7"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "59a3bbcf8e3b52cad5f0aa860837d4d1796c7c4873b083c9520a1bbba4747973"
+checksum = "4c05fed41ed4e334257090500510df21bb1611680c0cfd3be14acec7ffdf3d95"
 dependencies = [
  "any_spawner",
  "async-trait",

crates/ascend/Cargo.toml

@@ -23,7 +23,7 @@ derive_more = { version = "2", features = [
 ] }
 http = "1"
 image = { version = "0.25", optional = true }
-leptos = { version = "0.7.4", features = ["tracing"] }
+leptos = { version = "0.7.7", features = ["tracing"] }
 leptos_axum = { version = "0.7", optional = true }
 leptos_meta = { version = "0.7" }
 leptos_router = { version = "0.7.0" }

crates/ascend/src/components/button.rs

@@ -12,11 +12,13 @@ pub fn Button(
 
     #[prop(optional)] color: Gradient,
 
+    #[prop(into, optional)] highlight: MaybeProp<bool>,
+
     onclick: impl FnMut(MouseEvent) + 'static,
 ) -> impl IntoView {
     let icon_view = icon.get().map(|i| {
         let icon_view = i.into_view();
-        let mut classes = "self-center mx-5 my-2.5 text-pink-500 rounded-sm".to_string();
+        let mut classes = "self-center mx-5 my-2.5 rounded-sm".to_string();
         classes.push(' ');
         classes.push_str(color.class_text());
 
@@ -41,7 +43,7 @@ pub fn Button(
             type="button"
             class="mb-2 me-2 hover:brightness-125 active:brightness-90"
         >
-            <OutlinedBox color>
+            <OutlinedBox color highlight>
                 <div class="flex items-stretch">{icon_view} {separator} {text_view}</div>
             </OutlinedBox>
         </button>

crates/ascend/src/components/icons.rs

@@ -11,6 +11,8 @@ pub enum Icon {
     ArrowPath,
     PaperAirplaneSolid,
     NoSymbol,
+    Trophy,
+    ArrowTrendingUp,
 }
 impl Icon {
     // TODO: Actually impl IntoView for Icon instead
@@ -25,6 +27,8 @@ impl Icon {
             Icon::ArrowPath => view! { <ArrowPath /> }.into_any(),
             Icon::PaperAirplaneSolid => view! { <PaperAirplaneSolid /> }.into_any(),
             Icon::NoSymbol => view! { <NoSymbol /> }.into_any(),
+            Icon::Trophy => view! { <Trophy /> }.into_any(),
+            Icon::ArrowTrendingUp => view! { <ArrowTrendingUp /> }.into_any(),
         }
     }
 }
@@ -182,3 +186,43 @@ pub fn NoSymbol() -> impl IntoView {
         </svg>
     }
 }
+
+#[component]
+pub fn Trophy() -> impl IntoView {
+    view! {
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="1.5"
+            stroke="currentColor"
+            class="size-6"
+        >
+            <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M16.5 18.75h-9m9 0a3 3 0 0 1 3 3h-15a3 3 0 0 1 3-3m9 0v-3.375c0-.621-.503-1.125-1.125-1.125h-.871M7.5 18.75v-3.375c0-.621.504-1.125 1.125-1.125h.872m5.007 0H9.497m5.007 0a7.454 7.454 0 0 1-.982-3.172M9.497 14.25a7.454 7.454 0 0 0 .981-3.172M5.25 4.236c-.982.143-1.954.317-2.916.52A6.003 6.003 0 0 0 7.73 9.728M5.25 4.236V4.5c0 2.108.966 3.99 2.48 5.228M5.25 4.236V2.721C7.456 2.41 9.71 2.25 12 2.25c2.291 0 4.545.16 6.75.47v1.516M7.73 9.728a6.726 6.726 0 0 0 2.748 1.35m8.272-6.842V4.5c0 2.108-.966 3.99-2.48 5.228m2.48-5.492a46.32 46.32 0 0 1 2.916.52 6.003 6.003 0 0 1-5.395 4.972m0 0a6.726 6.726 0 0 1-2.749 1.35m0 0a6.772 6.772 0 0 1-3.044 0"
+            />
+        </svg>
+    }
+}
+
+#[component]
+pub fn ArrowTrendingUp() -> impl IntoView {
+    view! {
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="1.5"
+            stroke="currentColor"
+            class="size-6"
+        >
+            <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M2.25 18 9 11.25l4.306 4.306a11.95 11.95 0 0 1 5.814-5.518l2.74-1.22m0 0-5.94-2.281m5.94 2.28-2.28 5.941"
+            />
+        </svg>
+    }
+}

crates/ascend/src/components/outlined_box.rs

@@ -2,16 +2,43 @@ use crate::gradient::Gradient;
 use leptos::prelude::*;
 
 #[component]
-pub fn OutlinedBox(children: Children, color: Gradient) -> impl IntoView {
+pub fn OutlinedBox(children: Children, color: Gradient, #[prop(optional)] highlight: MaybeProp<bool>) -> impl IntoView {
-    let mut classes = "p-0.5 bg-gradient-to-br rounded-lg".to_string();
+    let highlight = move || highlight.get().unwrap_or(false);
-    classes.push(' ');
+
-    classes.push_str(color.class_from());
+    let outer_classes = move || {
-    classes.push(' ');
+        let mut c = "p-0.5 bg-gradient-to-br rounded-lg".to_string();
-    classes.push_str(color.class_to());
+        c.push(' ');
+        c.push_str(color.class_from());
+        c.push(' ');
+        c.push_str(color.class_to());
+        if highlight() {
+            c.push(' ');
+            c.push_str("brightness-110");
+        }
+        c
+    };
+
+    let inner_classes = move || {
+        let mut c = "py-1.5 rounded-md".to_string();
+        if highlight() {
+            let bg = match color {
+                Gradient::PinkOrange => "bg-pink-900",
+                Gradient::CyanBlue => "bg-cyan-900",
+                Gradient::TealLime => "bg-teal-900",
+            };
+
+            c.push(' ');
+            c.push_str(bg);
+        } else {
+            c.push(' ');
+            c.push_str("bg-gray-900");
+        }
+        c
+    };
 
     view! {
-        <div class=classes>
+        <div class=outer_classes>
-            <div class="py-1.5 bg-gray-900 rounded-md">{children()}</div>
+            <div class=inner_classes>{children()}</div>
         </div>
     }
 }

crates/ascend/src/pages/wall.rs

@@ -21,9 +21,9 @@
 // |                                      |
 // +--------------------------------------+
 
-// + ------- +   + ------ -+   +---------+
+// +---------+   +---------+   +---------+
-// |  Flash  |   |   Top   |   | Attempt |
+// |  Flash  |   |   Send  |   | Attempt |
-// + ------- +   + ------ -+   +---------+
+// +---------+   +---------+   +---------+
 
 // +---------- <Latest attempt> ----------+
 // | Today:                     <Attempt> |
@@ -94,6 +94,7 @@ pub fn Wall() -> impl IntoView {
 
     let ui_is_flash = RwSignal::new(false);
     let ui_is_climbed = RwSignal::new(false);
+    let ui_is_attempt = RwSignal::new(false);
     let ui_is_favorite = RwSignal::new(false);
 
     // On reception of user interaction state, set UI signals
@@ -163,17 +164,44 @@ pub fn Wall() -> impl IntoView {
 
                                 <div>
                                     <div class="flex">
-                                        <Checkbox
+                                        <Button
-                                            checked=ui_is_flash
+                                            onclick=move |_| {
+                                                ui_is_flash
+                                                    .update(|x| {
+                                                        *x = !*x;
+                                                    });
+                                            }
                                             text="Flash"
+                                            icon=Icon::BoltSolid
                                             color=Gradient::CyanBlue
+                                            highlight=Signal::derive(move || { ui_is_flash.get() })
                                         />
-                                        <Checkbox
+
-                                            checked=ui_is_climbed
+                                        <Button
-                                            text="Top"
+                                            onclick=move |_| {
+                                                ui_is_climbed
+                                                    .update(|x| {
+                                                        *x = !*x;
+                                                    });
+                                            }
+                                            text="Send"
+                                            icon=Icon::Trophy
                                             color=Gradient::TealLime
+                                            highlight=Signal::derive(move || { ui_is_climbed.get() })
+                                        />
+
+                                        <Button
+                                            onclick=move |_| {
+                                                ui_is_attempt
+                                                    .update(|x| {
+                                                        *x = !*x;
+                                                    });
+                                            }
+                                            text="Attempt"
+                                            icon=Icon::ArrowTrendingUp
+                                            color=Gradient::PinkOrange
+                                            highlight=Signal::derive(move || { ui_is_attempt.get() })
                                         />
-                                        <Checkbox checked=ui_is_favorite text="Attempt" />
                                     </div>
 
                                     <Button