Show the OIDC profile picture with an identicon fallback

GET /api/me now carries the profile picture URL when the provider
supplies an absolute http(s) one; the SPA shows it in the lobby navbar
and draws a deterministic identicon from the sub otherwise, falling back
to the identicon when the image fails to load.

The identicon is a 5x5 mirrored grid seeded by an inline FNV-1a hash so
it stays stable across Rust versions and is unit-testable on the host.
The dev mock IdP hands alice and bob a picture claim.

web/src/components/avatar.rs

@@ -0,0 +1,183 @@
+//! User avatar: the provider's `picture` claim when available, a
+//! deterministic identicon generated from the OIDC `sub` otherwise.
+//!
+//! The identicon is a 5x5 mirrored pixel grid derived from an inline
+//! FNV-1a hash. The hash is implemented here (instead of
+//! `DefaultHasher`) so the picture is stable across Rust versions and
+//! the helper functions stay unit-testable on the host, with no DOM.
+
+use sycamore::prelude::*;
+
+/// FNV-1a 64-bit: a stable hash for identicon seeds.
+fn fnv1a(input: &str) -> u64 {
+    let mut hash: u64 = 0xcbf2_9ce4_8422_2325;
+    for byte in input.as_bytes() {
+        hash ^= u64::from(*byte);
+        hash = hash.wrapping_mul(0x0000_0100_0000_01b3);
+    }
+    hash
+}
+
+/// The identicon hue (0..360) for a seed.
+fn hue_for(seed: &str) -> u32 {
+    (fnv1a(seed) % 360) as u32
+}
+
+/// The identicon cell grid as 5 columns x 5 rows. Only 15 bits (3
+/// columns) are derived from the hash; the left half is mirrored onto
+/// the right so the icon is symmetric. The center cell is forced on so
+/// an unlucky hash can never produce a blank icon.
+fn cells_for(seed: &str) -> [[bool; 5]; 5] {
+    let hash = fnv1a(seed);
+    let mut half = [false; 15];
+    for (index, cell) in half.iter_mut().enumerate() {
+        *cell = (hash >> index) & 1 == 1;
+    }
+    if !half.iter().any(|set| *set) {
+        half[8] = true; // center of the half grid: row 2, column 2
+    }
+    let mut cells = [[false; 5]; 5];
+    for row in 0..5 {
+        for column in 0..3 {
+            let set = half[row * 3 + column];
+            cells[row][column] = set;
+            if column < 2 {
+                cells[row][4 - column] = set;
+            }
+        }
+    }
+    cells
+}
+
+/// Only absolute http(s) picture URLs are rendered. The backend filters
+/// the claim the same way; this is the client-side half of the rule.
+fn safe_picture_url(url: &str) -> Option<String> {
+    let trimmed = url.trim();
+    let lower = trimmed.to_ascii_lowercase();
+    if lower.starts_with("http://") || lower.starts_with("https://") {
+        Some(trimmed.to_string())
+    } else {
+        None
+    }
+}
+
+/// The user's avatar: their profile picture, or an identicon generated
+/// from the `sub`. A picture that fails to load falls back to the
+/// identicon as well.
+pub fn avatar(sub: &str, picture: Option<&str>) -> View {
+    let Some(url) = picture.and_then(safe_picture_url) else {
+        return identicon(sub);
+    };
+    let seed = sub.to_string();
+    let failed = create_signal(false);
+    view! {
+        (move || {
+            if failed.get() {
+                identicon(&seed)
+            } else {
+                let src = url.clone();
+                view! {
+                    img(class="avatar", src=src, alt="",
+                        on:error=move |_| failed.set(true))
+                }
+            }
+        })
+    }
+}
+
+/// The generated fallback avatar.
+fn identicon(seed: &str) -> View {
+    let hue = hue_for(seed);
+    let background = format!("hsl({hue}, 45%, 22%)");
+    let foreground = format!("hsl({hue}, 65%, 62%)");
+    let cells = cells_for(seed);
+    let mut squares: Vec<View> = Vec::new();
+    for (row, line) in cells.iter().enumerate() {
+        for (column, set) in line.iter().enumerate() {
+            if *set {
+                let x = column.to_string();
+                let y = row.to_string();
+                let fill = foreground.clone();
+                squares.push(view! {
+                    rect(x=x, y=y, width="1", height="1", fill=fill)
+                });
+            }
+        }
+    }
+    view! {
+        svg(class="avatar", viewBox="0 0 5 5", "aria-hidden"="true") {
+            rect(x="0", y="0", width="5", height="5", fill=background)
+            (squares)
+        }
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn hash_is_deterministic_and_seed_dependent() {
+        assert_eq!(fnv1a("alice"), fnv1a("alice"));
+        assert_ne!(fnv1a("alice"), fnv1a("bob"));
+        // Pinned vectors: guard against accidental changes to the hash
+        // (it must stay stable for the identicons users see).
+        assert_eq!(149_266_183, fnv1a("alice") % 1_000_000_000);
+        assert_eq!(23, hue_for("alice"));
+    }
+
+    #[test]
+    fn hue_stays_in_range() {
+        for seed in ["alice", "bob", "", "auth0|64f0c0ffee"] {
+            assert!(hue_for(seed) < 360);
+        }
+    }
+
+    #[test]
+    fn pattern_is_symmetric_and_never_blank() {
+        for seed in ["alice", "bob", "", "auth0|64f0c0ffee"] {
+            let cells = cells_for(seed);
+            assert!(
+                cells.iter().flatten().any(|cell| *cell),
+                "blank for {seed:?}"
+            );
+            for row in 0..5 {
+                for column in 0..5 {
+                    assert_eq!(
+                        cells[row][column],
+                        cells[row][4 - column],
+                        "asymmetric for {seed:?} at ({row}, {column})"
+                    );
+                }
+            }
+        }
+    }
+
+    #[test]
+    fn different_seeds_draw_different_patterns() {
+        assert_ne!(cells_for("alice"), cells_for("bob"));
+    }
+
+    #[test]
+    fn only_absolute_http_picture_urls_are_rendered() {
+        assert_eq!(
+            Some("https://cdn.example.com/a.png".to_string()),
+            safe_picture_url("https://cdn.example.com/a.png")
+        );
+        assert_eq!(
+            Some("https://cdn.example.com/a.png".to_string()),
+            safe_picture_url("  https://cdn.example.com/a.png  ")
+        );
+        assert_eq!(
+            Some("HTTPS://cdn.example.com/a.png".to_string()),
+            safe_picture_url("HTTPS://cdn.example.com/a.png")
+        );
+        assert_eq!(None, safe_picture_url("httpz://x"));
+        assert_eq!(None, safe_picture_url("/relative.png"));
+        assert_eq!(None, safe_picture_url("javascript:alert(1)"));
+        assert_eq!(
+            None,
+            safe_picture_url("data:image/svg+xml;base64,PHN2ZyB4bW")
+        );
+    }
+}

web/src/components/mod.rs

@@ -1,3 +1,4 @@
+pub mod avatar;
 pub mod briscola;
 pub mod card;
 pub mod copy;

web/src/model.rs

@@ -11,6 +11,8 @@ fn default_true() -> bool {
 pub struct User {
     pub sub: String,
     pub name: String,
+    #[serde(default)]
+    pub picture: Option<String>,
 }
 
 #[derive(Debug, Clone, Deserialize)]

web/src/pages/lobby.rs

@@ -12,6 +12,7 @@ use sycamore::prelude::*;
 use sycamore_router::navigate;
 
 use crate::api;
+use crate::components::avatar::avatar;
 use crate::components::card::card_back;
 use crate::components::login::login_card;
 use crate::components::toast::toast;
@@ -483,23 +484,30 @@ pub fn LobbyPage() -> View {
                 Some(Some(_me)) => {
                     view! {
                         (crate::components::nav::app_nav("/", move || {
-                            let name = user
-                                .get_clone()
-                                .flatten()
-                                .map(|u| u.name)
+                            let me = user.get_clone().flatten();
+                            let name = me
+                                .as_ref()
+                                .map(|u| u.name.clone())
                                 .unwrap_or_default();
+                            let avatar_view = me
+                                .as_ref()
+                                .map(|u| avatar(&u.sub, u.picture.as_deref()))
+                                .unwrap_or_else(|| view! {});
                             view! {
-                                span(class="navbar-text me-3") {
-                                    "Signed in as " strong { (name) }
-                                    (move || ratings
-                                        .get_clone()
-                                        .into_iter()
-                                        .find(|r| r.game_type == selected_game.get_clone())
-                                        .map(|r| view! {
-                                            span(class="badge text-bg-warning ms-2") {
-                                                "Elo " (r.rating)
-                                            }
-                                        }))
+                                span(class="navbar-text me-3 d-flex align-items-center gap-2") {
+                                    (avatar_view)
+                                    span() {
+                                        "Signed in as " strong { (name) }
+                                        (move || ratings
+                                            .get_clone()
+                                            .into_iter()
+                                            .find(|r| r.game_type == selected_game.get_clone())
+                                            .map(|r| view! {
+                                                span(class="badge text-bg-warning ms-2") {
+                                                    "Elo " (r.rating)
+                                                }
+                                            }))
+                                    }
                                 }
                                 a(
                                     class="btn btn-sm btn-outline-light",

web/style.css

@@ -33,6 +33,15 @@ body {
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
 }
 
+.avatar {
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+    object-fit: cover;
+    display: block;
+    flex: 0 0 auto;
+}
+
 /* ---------- game table ---------- */
 
 .hud {