wip: flash button

.helix/languages.toml

@@ -5,9 +5,8 @@ language-servers = ["rust-analyzer", "tailwindcss-ls"]
 [language-server.rust-analyzer.config]
 # procMacro = { ignored = { leptos_macro = ["server"] } }
 cargo = { features = ["ssr", "hydrate"] }
-
+check = { command = "clippy" }
-[language-server.rust-analyzer.config.check]
+rustfmt = { overrideCommand = ["leptosfmt", "--stdin", "--rustfmt"] }
-command = "clippy"
 
 [language-server.tailwindcss-ls]
 config = { userLanguages = { rust = "html", "*.rs" = "html" } }

crates/ascend/src/components/icons.rs

@@ -0,0 +1,51 @@
+use leptos::prelude::*;
+
+#[component]
+pub fn Bolt() -> impl IntoView {
+    view! {
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+            class="size-6"
+        >
+            <path
+                fill-rule="evenodd"
+                d="M14.615 1.595a.75.75 0 0 1 .359.852L12.982 9.75h7.268a.75.75 0 0 1 .548 1.262l-10.5 11.25a.75.75 0 0 1-1.272-.71l1.992-7.302H3.75a.75.75 0 0 1-.548-1.262l10.5-11.25a.75.75 0 0 1 .913-.143Z"
+                clip-rule="evenodd"
+            />
+        </svg>
+    }
+}
+
+#[component]
+pub fn Wrench() -> impl IntoView {
+    view! {
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+            class="size-6"
+        >
+            <path
+                fill-rule="evenodd"
+                d="M12 6.75a5.25 5.25 0 0 1 6.775-5.025.75.75 0 0 1 .313 1.248l-3.32 3.319c.063.475.276.934.641 1.299.365.365.824.578 1.3.64l3.318-3.319a.75.75 0 0 1 1.248.313 5.25 5.25 0 0 1-5.472 6.756c-1.018-.086-1.87.1-2.309.634L7.344 21.3A3.298 3.298 0 1 1 2.7 16.657l8.684-7.151c.533-.44.72-1.291.634-2.309A5.342 5.342 0 0 1 12 6.75ZM4.117 19.125a.75.75 0 0 1 .75-.75h.008a.75.75 0 0 1 .75.75v.008a.75.75 0 0 1-.75.75h-.008a.75.75 0 0 1-.75-.75v-.008Z"
+                clip-rule="evenodd"
+            />
+        </svg>
+    }
+}
+
+#[component]
+pub fn Forward() -> impl IntoView {
+    view! {
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+            class="size-6"
+        >
+            <path d="M5.055 7.06C3.805 6.347 2.25 7.25 2.25 8.69v8.122c0 1.44 1.555 2.343 2.805 1.628L12 14.471v2.34c0 1.44 1.555 2.343 2.805 1.628l7.108-4.061c1.26-.72 1.26-2.536 0-3.256l-7.108-4.061C13.555 6.346 12 7.249 12 8.689v2.34L5.055 7.061Z" />
+        </svg>
+    }
+}

crates/ascend/src/lib.rs

@@ -15,7 +15,9 @@ pub mod components {
     pub mod header;
     pub mod problem;
     pub mod problem_info;
+    pub mod icons;
 }
+
 pub mod resources {
     use crate::codec::ron::Ron;
     use crate::codec::ron::RonEncoded;

crates/ascend/src/pages/routes.rs

@@ -30,10 +30,10 @@ pub fn Routes() -> impl IntoView {
     let wall = crate::resources::wall_by_uid(wall_uid);
     let problems = crate::resources::problems_for_wall(wall_uid);
 
-    let header_items = HeaderItems {
+    let header_items = move || HeaderItems {
         left: vec![HeaderItem {
             text: "← Ascend".to_string(),
-            link: Some("/".to_string()),
+            link: Some(format!("/wall/{}", wall_uid.get())),
         }],
         middle: vec![HeaderItem {
             text: "Routes".to_string(),
@@ -63,7 +63,10 @@ pub fn Routes() -> impl IntoView {
                             each=problems_sample
                             key=|problem| problem.uid
                             children=move |problem: models::Problem| {
-                                view! { <Problem dim=wall_dimensions problem /> <hr class="h-px my-8 border-0 bg-gray-700" />}
+                                view! {
+                                    <Problem dim=wall_dimensions problem />
+                                    <hr class="h-px my-8 border-0 bg-gray-700" />
+                                }
                             }
                         />
                     </div>
@@ -76,7 +79,7 @@ pub fn Routes() -> impl IntoView {
 
     view! {
         <div class="min-w-screen min-h-screen bg-neutral-950">
-            <StyledHeader items=header_items />
+            <StyledHeader items=Signal::derive(header_items) />
 
             <div class="container mx-auto mt-6">
                 <Suspense fallback=|| view! { <p>"loading"</p> }>{suspend}</Suspense>

crates/ascend/src/pages/settings.rs

@@ -23,8 +23,7 @@ pub fn Settings() -> impl IntoView {
         <div class="min-w-screen min-h-screen bg-neutral-950">
             <StyledHeader items=header_items />
 
-            <div class="container mx-auto mt-2">
+            <div class="container mx-auto mt-2">// {move || view! { <Import wall_uid=wall_uid.get() /> }}
-                // {move || view! { <Import wall_uid=wall_uid.get() /> }}
             </div>
         </div>
     }

crates/ascend/src/pages/wall.rs

@@ -1,4 +1,5 @@
 use crate::codec::ron::RonEncoded;
+use crate::components::icons;
 use crate::components::ProblemInfo;
 use crate::components::button::Button;
 use crate::components::header::HeaderItem;
@@ -95,6 +96,8 @@ pub fn Wall() -> impl IntoView {
         ],
     };
 
+    let foo = RwSignal::new(false);
+
     leptos::view! {
         <div class="min-w-screen min-h-screen bg-neutral-950">
             <StyledHeader items=Signal::derive(header_items) />
@@ -115,12 +118,42 @@ pub fn Wall() -> impl IntoView {
                                 <div>
                                     <Button
                                         onclick=move |_| fn_next_problem(&wall)
+                                        // TODO: use forward icon
                                         text="➤ Next problem"
                                     />
 
-                                    <div class="m-4"/>
+                                    <div class="m-4" />
 
-                                    {move || problem_signal.get().map(|problem| view! { <ProblemInfo problem /> })}
+                                    {move || {
+                                        problem_signal
+                                            .get()
+                                            .map(|problem| view! { <ProblemInfo problem /> })
+                                    }}
+
+                                    <div class="m-4" />
+
+                                    <div>
+                                        <input
+                                            type="checkbox"
+                                            id="flash-option"
+                                            value=""
+                                            class="hidden peer"
+                                            required=""
+                                            bind:checked=foo
+                                        />
+                                        <label
+                                            for="flash-option"
+                                            class="relative inline-flex items-center justify-center p-0.5 mb-2 me-2 overflow-hidden text-sm font-medium rounded-lg group bg-gradient-to-br from-cyan-500 to-blue-500 text-white cursor-pointer hover:brightness-125"
+                                        >
+                                            <div
+                                                class="flex items-center gap-0.5 relative px-5 py-2.5 transition-all ease-in duration-75 bg-gray-900 rounded-md "
+                                                class:bg-transparent=move || foo.get()
+                                            >
+                                                <icons::Bolt />
+                                                <div class="w-full text-lg font-semibold">Flash!</div>
+                                            </div>
+                                        </label>
+                                    </div>
                                 </div>
                             </div>
                         };

crates/ascend/tailwind.config.js

@@ -6,6 +6,9 @@
       },
       // https://tailwindcss.com/docs/content-configuration#using-regular-expressions
       safelist: [
+        {
+          pattern: /bg-transparent/,
+        },
         {
           pattern: /grid-cols-.+/,
         },

justfile

@@ -53,3 +53,6 @@ leptos-discord:
 
 leptos-issues:
     xdg-open "https://github.com/leptos-rs/leptos/issues"
+
+icons:
+    xdg-open "https://heroicons.com/"

todo.md

@@ -9,5 +9,4 @@
 - decide on holds vs wall-edit terminology
 - clock
 - hotkeys (enter =next problem, arrow = shift left/right up/down)
-- remove brightness reduction when mousing over holds
 - impl `sizes` hint next to `srcset`