fix: rendering of avatar thumbnails

crates/chattyness-user-ui/src/components/avatar_thumbnail.rs

@@ -0,0 +1,145 @@
+//! Avatar thumbnail component for rendering avatar previews.
+//!
+//! A simplified canvas-based component for rendering avatars in the
+//! avatar store grid. Uses the same layer compositing as the main
+//! avatar renderer but at thumbnail size.
+
+use leptos::prelude::*;
+use leptos::web_sys;
+
+/// Avatar thumbnail component for the avatar store.
+///
+/// Renders a small preview of an avatar using canvas compositing.
+/// Takes layer paths directly as props.
+///
+/// Props:
+/// - `skin_layer`: Asset paths for skin layer positions 0-8
+/// - `clothes_layer`: Asset paths for clothes layer positions 0-8
+/// - `accessories_layer`: Asset paths for accessories layer positions 0-8
+/// - `emotion_layer`: Asset paths for emotion layer positions 0-8
+/// - `size`: Optional canvas size in pixels (default: 80)
+#[component]
+pub fn AvatarThumbnail(
+    #[prop(into)] skin_layer: Signal<[Option<String>; 9]>,
+    #[prop(into)] clothes_layer: Signal<[Option<String>; 9]>,
+    #[prop(into)] accessories_layer: Signal<[Option<String>; 9]>,
+    #[prop(into)] emotion_layer: Signal<[Option<String>; 9]>,
+    #[prop(default = 80)] size: u32,
+) -> impl IntoView {
+    let canvas_ref = NodeRef::<leptos::html::Canvas>::new();
+    let cell_size = size / 3;
+
+    #[cfg(feature = "hydrate")]
+    {
+        use std::cell::RefCell;
+        use std::collections::HashMap;
+        use std::rc::Rc;
+        use wasm_bindgen::JsCast;
+        use wasm_bindgen::closure::Closure;
+
+        use crate::utils::normalize_asset_path;
+
+        // Image cache for this thumbnail
+        let image_cache: Rc<RefCell<HashMap<String, web_sys::HtmlImageElement>>> =
+            Rc::new(RefCell::new(HashMap::new()));
+
+        // Redraw trigger - incremented when images load
+        let (redraw_trigger, set_redraw_trigger) = signal(0u32);
+
+        Effect::new(move |_| {
+            // Subscribe to redraw trigger
+            let _ = redraw_trigger.get();
+
+            let Some(canvas) = canvas_ref.get() else {
+                return;
+            };
+
+            let skin = skin_layer.get();
+            let clothes = clothes_layer.get();
+            let accessories = accessories_layer.get();
+            let emotion = emotion_layer.get();
+
+            let canvas_el: &web_sys::HtmlCanvasElement = &canvas;
+            canvas_el.set_width(size);
+            canvas_el.set_height(size);
+
+            let Ok(Some(ctx)) = canvas_el.get_context("2d") else {
+                return;
+            };
+            let ctx: web_sys::CanvasRenderingContext2d = ctx.dyn_into().unwrap();
+
+            // Clear canvas
+            ctx.clear_rect(0.0, 0.0, size as f64, size as f64);
+
+            // Draw background
+            ctx.set_fill_style_str("#374151");
+            ctx.fill_rect(0.0, 0.0, size as f64, size as f64);
+
+            // Helper to load and draw an image at a grid position
+            let draw_at_position =
+                |path: &str,
+                 pos: usize,
+                 cache: &Rc<RefCell<HashMap<String, web_sys::HtmlImageElement>>>,
+                 ctx: &web_sys::CanvasRenderingContext2d| {
+                    let normalized_path = normalize_asset_path(path);
+                    let mut cache_borrow = cache.borrow_mut();
+                    let row = pos / 3;
+                    let col = pos % 3;
+                    let x = (col * cell_size as usize) as f64;
+                    let y = (row * cell_size as usize) as f64;
+                    let sz = cell_size as f64;
+
+                    if let Some(img) = cache_borrow.get(&normalized_path) {
+                        if img.complete() && img.natural_width() > 0 {
+                            let _ = ctx.draw_image_with_html_image_element_and_dw_and_dh(
+                                img, x, y, sz, sz,
+                            );
+                        }
+                    } else {
+                        let img = web_sys::HtmlImageElement::new().unwrap();
+                        let trigger = set_redraw_trigger;
+                        let onload = Closure::once(Box::new(move || {
+                            trigger.update(|v| *v += 1);
+                        }) as Box<dyn FnOnce()>);
+                        img.set_onload(Some(onload.as_ref().unchecked_ref()));
+                        onload.forget();
+                        img.set_src(&normalized_path);
+                        cache_borrow.insert(normalized_path, img);
+                    }
+                };
+
+            // Draw layers in order: skin -> clothes -> accessories -> emotion
+            for (pos, path) in skin.iter().enumerate() {
+                if let Some(p) = path {
+                    draw_at_position(p, pos, &image_cache, &ctx);
+                }
+            }
+
+            for (pos, path) in clothes.iter().enumerate() {
+                if let Some(p) = path {
+                    draw_at_position(p, pos, &image_cache, &ctx);
+                }
+            }
+
+            for (pos, path) in accessories.iter().enumerate() {
+                if let Some(p) = path {
+                    draw_at_position(p, pos, &image_cache, &ctx);
+                }
+            }
+
+            for (pos, path) in emotion.iter().enumerate() {
+                if let Some(p) = path {
+                    draw_at_position(p, pos, &image_cache, &ctx);
+                }
+            }
+        });
+    }
+
+    view! {
+        <canvas
+            node_ref=canvas_ref
+            style=format!("width: {}px; height: {}px;", size, size)
+            class="rounded"
+        />
+    }
+}