feat: filter UI part 2

crates/ascend/src/lib.rs

@@ -20,6 +20,18 @@ pub mod components {
     pub mod outlined_box;
     pub mod problem;
     pub mod problem_info;
+
+    use leptos::prelude::*;
+
+    #[component]
+    pub fn OnHoverRed(children: Children) -> impl IntoView {
+        view! {
+            <div class="group relative">
+                <div>{children()}</div>
+                <div class="absolute inset-0 bg-red-500 opacity-0 group-hover:opacity-50"></div>
+            </div>
+        }
+    }
 }
 
 pub mod gradient;

crates/ascend/src/pages/wall.rs

@@ -31,6 +31,7 @@
 // +--------------------------------------+
 
 use crate::codec::ron::RonEncoded;
+use crate::components::OnHoverRed;
 use crate::components::ProblemInfo;
 use crate::components::attempt::Attempt;
 use crate::components::button::Button;
@@ -125,7 +126,7 @@ fn WithWall(#[prop(into)] wall: Signal<models::Wall>) -> impl IntoView {
 
     // Filter
     let (filter_holds, set_filter_holds) = signal(BTreeSet::new());
-    let filter_add_hold = move |hold_pos: models::HoldPosition| {
+    let _filter_add_hold = move |hold_pos: models::HoldPosition| {
         set_filter_holds.update(move |set| {
             set.insert(hold_pos);
         });
@@ -189,7 +190,17 @@ fn WithWall(#[prop(into)] wall: Signal<models::Wall>) -> impl IntoView {
         for hold_pos in filter_holds.get() {
             let w = &*wall.read();
             if let Some(hold) = w.holds.get(&hold_pos).cloned() {
-                let v = view! { <Hold hold /> };
+                let onclick = move |_| {
+                    filter_remove_hold(hold_pos);
+                };
+
+                let v = view! {
+                    <button on:click=onclick>
+                        <OnHoverRed>
+                            <Hold hold />
+                        </OnHoverRed>
+                    </button>
+                };
                 cells.push(v);
             }
         }
@@ -201,7 +212,7 @@ fn WithWall(#[prop(into)] wall: Signal<models::Wall>) -> impl IntoView {
         <div class="inline-grid grid-cols-1 gap-8 md:grid-cols-[auto,1fr]">
             <div>{grid}</div>
 
-            <div class="flex flex-col max-w-screen-sm">
+            <div class="flex flex-col w-screen-sm">
                 <Section title="Filter">{filter}</Section>
 
                 <Separator />