feat(home/trending): Some UX updates

ji-devs · May 21, 2024 · 0989420 · 0989420
1 parent ca9c8e5
commit 0989420
Showing 1 changed file with 70 additions and 44 deletions.
diff --git a/frontend/apps/crates/entry/home/src/home/dom/mod.rs b/frontend/apps/crates/entry/home/src/home/dom/mod.rs
@@ -1,10 +1,11 @@
 use dominator::{clone, html, Dom};
 use futures_signals::signal::SignalExt;
+use utils::events;
 
 use std::rc::Rc;
 
 use components::{
-    asset_card::{render_asset_card, AssetCardConfig},
+    asset_card::{render_asset_card, AssetCardBottomIndicator, AssetCardConfig},
     page_footer,
     page_header::{PageHeader, PageHeaderConfig, PageLinks},
     player_popup::{PlayerPopup, PreviewPopupCallbacks},
@@ -28,49 +29,74 @@ impl Home {
                     ..Default::default()
                 }).render())
             }))
-            .children(&mut [
-                search_section::render(state.clone(), auto_search),
-                html!("div", {
-                    .style("display", "grid")
-                    .child(html!("div", {
-                        .style("overflow-x", "auto")
-                        .style("padding", "32px")
-                        .style("display", "grid")
-                        .style("grid-auto-flow", "column")
-                        .style("justify-content", "start")
-                        .style("gap", "24px")
-                        .style("scrollbar-color", "var(--light-gray-2) transparent")
-                        .style("scrollbar-width", "thin")
-                        .children_signal_vec(state.trending.signal_cloned().map(|trending| {
-                            match trending {
-                                None => vec![html!("progress")],
-                                Some(trending) => {
-                                    trending.into_iter().map(|jig| {
-                                        render_asset_card(&jig.into(), AssetCardConfig {
-                                            dense: true,
-                                            ..Default::default()
-                                        })
-                                    }).collect()
-                                },
-                            }
-                        }).to_signal_vec())
-                    }))
-                }),
-                html!("empty-fragment", {
-                    .child_signal(state.mode.signal_cloned().map(move |mode| {
-                        match mode {
-                            HomePageMode::Home => {
-                                // Some(home_sections::render(state.clone()))
-                                Some(Iframe::new().render())
-                            },
-                            HomePageMode::Search(search_results) => {
-                                Some(search_results.render())
-                            },
-                        }
-                    }))
-                }),
-                page_footer::dom::render(None),
-            ])
+            .child(search_section::render(state.clone(), auto_search))
+            .child_signal(state.mode.signal_ref(clone!(state => move |mode| {
+                match mode {
+                    HomePageMode::Search(_) => None,
+                    HomePageMode::Home => {
+                        Some(html!("div", {
+                            .style("display", "grid")
+                            .child(html!("h3", {
+                                .style("color", "#fd7076")
+                                .style("font-weight", "600")
+                                .style("font-size", "24px")
+                                .style("margin", "0")
+                                .style("padding", "24px")
+                                .style("padding-bottom", "0")
+                                .text("Trending JIGs")
+                            }))
+                            .child(html!("div", {
+                                .style("overflow-x", "auto")
+                                .style("padding", "24px")
+                                .style("display", "grid")
+                                .style("grid-auto-flow", "column")
+                                .style("justify-content", "start")
+                                .style("gap", "24px")
+                                .style("scrollbar-color", "var(--light-gray-2) transparent")
+                                .style("scrollbar-width", "thin")
+                                .children_signal_vec(state.trending.signal_cloned().map(clone!(state => move |trending| {
+                                    match trending {
+                                        None => vec![html!("progress")],
+                                        Some(trending) => {
+                                            trending.into_iter().map(|jig| {
+                                                let jig_id = jig.id;
+                                                html!("div", {
+                                                    .style("cursor", "pointer")
+                                                    .child(render_asset_card(
+                                                        &jig.into(),
+                                                        AssetCardConfig {
+                                                            bottom_indicator: AssetCardBottomIndicator::Author,
+                                                            dense: true,
+                                                            ..Default::default()
+                                                        }
+                                                    ))
+                                                    .event(clone!(state => move |_: events::Click| {
+                                                        state.play_asset.set(Some(jig_id.into()));
+                                                    }))
+                                                })
+                                            }).collect()
+                                        },
+                                    }
+                                })).to_signal_vec())
+                            }))
+                        }))
+                    }
+                }
+            })))
+            .child(html!("empty-fragment", {
+                .child_signal(state.mode.signal_cloned().map(move |mode| {
+                    match mode {
+                        HomePageMode::Home => {
+                            // Some(home_sections::render(state.clone()))
+                            Some(Iframe::new().render())
+                        },
+                        HomePageMode::Search(search_results) => {
+                            Some(search_results.render())
+                        },
+                    }
+                }))
+            }))
+            .child(page_footer::dom::render(None))
             .child_signal(state.play_asset.signal_cloned().map(clone!(state => move|play_asset| {
                 play_asset.map(|asset_id| {
                     let close = clone!(state => move || {