hanna/fabrica

feat(web): user profiles, settings editor, and avatars

dd5f6ed · hanna committed on 2026-07-25

Redesign the user page as a profile: avatar, name, `User · username`,
pronouns, bio, and location/website/GitHub/Mastodon links with their icons.
Add a settings editor (display name, pronouns, bio, location, website, and
named social handles) plus an avatar uploader. Serve `/avatar/{username}`
from an uploaded PNG/JPEG/GIF/WebP (≤ 1 MiB, stored on disk) or a stable
FNV-derived identicon SVG — no gravatar, no network requests (§9.5). Both
mutating routes verify the double-submit CSRF token.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Signed by hannaSSH key fingerprint: SHA256:4g9cWhkAAw8gwqhJUcVbSnGEvdGwklW+1Aa/fMUu59k

Cargo.lock +18 −0

Cargo.toml +1 −1

assets/base.css +73 −0

crates/web/src/avatar.rs +165 −0

crates/web/src/icons.rs +0 −19

crates/web/src/lib.rs +7 −1

crates/web/src/pages.rs +123 −11

crates/web/src/repo.rs +108 −7

  "matchit",
  "memchr",
  "mime",
+ "multer",
  "percent-encoding",
  "pin-project-lite",
  "serde_core",
+]
 [[package]]
+name = "multer"
+version = "3.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "83e87776546dc87511aa5ee218730c92b666d7264ab6ed41f9d215af9cd5224b"
+dependencies = [
+ "bytes",
+ "encoding_rs",
+ "futures-util",
+ "http",
+ "httparse",
+ "memchr",
+ "mime",
+ "spin",
+ "version_check",
+]
+[[package]]
 name = "native-tls"
 version = "0.2.18"
 source = "registry+https://github.com/rust-lang/crates.io-index"

 # Web stack. No TLS/rustls features anywhere (TLS terminates at a reverse proxy),
 # so `ring` stays out of the graph. Versions are the current mutually-compatible
 # axum 0.8 set.
-axum = "0.8"
+axum = { version = "0.8", features = ["multipart"] }
 axum-extra = { version = "0.12", features = ["cookie"] }
 maud = { version = "0.27", features = ["axum"] }
 tower = { version = "0.5", features = ["util"] }

   font-size: 0.82em;
+}
+/* ---- Avatars & profile header ---- */
+.avatar {
+  border-radius: 50%;
+  object-fit: cover;
+  background: var(--fb-bg-inset);
+  border: 1px solid var(--fb-border);
+}
+.avatar-lg {
+  width: 5rem;
+  height: 5rem;
+}
+.avatar-xl {
+  width: 6rem;
+  height: 6rem;
+}
+.profile-head {
+  display: flex;
+  gap: 1.25rem;
+  align-items: flex-start;
+  margin-bottom: 1.5rem;
+  padding-bottom: 1.5rem;
+  border-bottom: 1px solid var(--fb-border);
+}
+.profile-meta {
+  min-width: 0;
+}
+.profile-meta h1 {
+  margin-bottom: 0.15rem;
+}
+.profile-sub {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+.profile-pronouns {
+  margin-left: 0.5rem;
+  padding: 0.05rem 0.5rem;
+  border: 1px solid var(--fb-border);
+  border-radius: 999px;
+  font-size: 0.82em;
+}
+.profile-bio {
+  margin: 0.6rem 0 0;
+  white-space: pre-wrap;
+}
+.profile-links {
+  list-style: none;
+  margin: 0.6rem 0 0;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem 1.25rem;
+}
+.profile-links li {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+.avatar-settings {
+  display: flex;
+  align-items: center;
+  gap: 1.25rem;
+  flex-wrap: wrap;
+}
+.avatar-settings form {
+  flex: 1;
+  min-width: 15rem;
+}
 /* ---- Tables ---- */
 table.list {
   width: 100%;
     display: block;
     overflow-x: auto;
+  }
+  /* Stack the profile header on narrow screens. */
+  .profile-head {
+    flex-direction: column;
+  }
+}

+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at https://mozilla.org/MPL/2.0/.
+//! Avatars: an uploaded image when the user has one, else a deterministic
+//! identicon generated from the username. Bytes live on disk under
+//! `{storage.data_dir}/avatars/{id}`; the `users.avatar_mime` column records the
+//! content type (its presence means "serve the file"). No network requests and
+//! no remote gravatar (§9.5).
+use std::fmt::Write as _;
+use std::path::PathBuf;
+use axum::extract::{Multipart, Path, State};
+use axum::http::{StatusCode, header};
+use axum::response::{IntoResponse, Redirect, Response};
+use axum_extra::extract::cookie::CookieJar;
+use crate::AppState;
+use crate::error::AppError;
+use crate::session::RequireUser;
+/// The largest avatar upload accepted, in bytes (1 `MiB`).
+const MAX_AVATAR_BYTES: usize = 1024 * 1024;
+/// The raster image types accepted for upload. SVG is deliberately excluded to
+/// avoid serving user-supplied markup; identicons are our own SVG.
+const ALLOWED_MIME: &[&str] = &["image/png", "image/jpeg", "image/gif", "image/webp"];
+/// The on-disk path of a user's uploaded avatar.
+fn avatar_path(state: &AppState, user_id: &str) -> PathBuf {
+    state.config.storage.data_dir.join("avatars").join(user_id)
+}
+/// `GET /avatar/{username}` — the user's uploaded avatar, or a generated
+/// identicon. Always renders an image so `<img>` tags never break.
+pub async fn show(State(state): State<AppState>, Path(username): Path<String>) -> Response {
+    let user = state.store.user_by_username(&username).await.ok().flatten();
+    if let Some(user) = &user
+        && let Some(mime) = &user.avatar_mime
+        && let Ok(bytes) = tokio::fs::read(avatar_path(&state, &user.id)).await
+    {
+        return (
+            [
+                (header::CONTENT_TYPE, mime.as_str()),
+                (header::CACHE_CONTROL, "private, max-age=60"),
+                (header::X_CONTENT_TYPE_OPTIONS, "nosniff"),
+            ],
+            bytes,
+        )
+            .into_response();
+    }
+    (
+        [
+            (header::CONTENT_TYPE, "image/svg+xml; charset=utf-8"),
+            (header::CACHE_CONTROL, "public, max-age=3600"),
+        ],
+        identicon(&username),
+    )
+        .into_response()
+}
+/// `POST /settings/avatar` — accept an image upload, store it, and record its
+/// content type. Multipart fields: `_csrf` (token) and `avatar` (the file).
+pub async fn upload(
+    State(state): State<AppState>,
+    RequireUser(user): RequireUser,
+    jar: CookieJar,
+    mut multipart: Multipart,
+) -> Response {
+    let mut csrf: Option<String> = None;
+    let mut mime: Option<String> = None;
+    let mut data: Option<Vec<u8>> = None;
+    while let Ok(Some(field)) = multipart.next_field().await {
+        match field.name() {
+            Some("_csrf") => csrf = field.text().await.ok(),
+            Some("avatar") => {
+                let content_type = field.content_type().map(str::to_string);
+                match field.bytes().await {
+                    Ok(bytes) if !bytes.is_empty() => {
+                        mime = content_type;
+                        data = Some(bytes.to_vec());
+                    }
+                    _ => {}
+                }
+            }
+            _ => {}
+        }
+    }
+    // CSRF: the double-submit cookie must match the submitted token.
+    if crate::session::verify_csrf(&jar, &axum::http::HeaderMap::new(), csrf.as_deref()).is_err() {
+        return AppError::Forbidden.into_response();
+    }
+    let (Some(bytes), Some(mime)) = (data, mime) else {
+        // Nothing chosen — treat as a no-op and return to settings.
+        return Redirect::to("/settings").into_response();
+    };
+    if bytes.len() > MAX_AVATAR_BYTES {
+        return AppError::BadRequest("Avatar must be 1 MiB or smaller.".to_string())
+            .into_response();
+    }
+    if !ALLOWED_MIME.contains(&mime.as_str()) {
+        return AppError::BadRequest("Avatar must be a PNG, JPEG, GIF, or WebP image.".to_string())
+            .into_response();
+    }
+    let dir = state.config.storage.data_dir.join("avatars");
+    if let Err(e) = tokio::fs::create_dir_all(&dir).await {
+        return AppError::internal(e).into_response();
+    }
+    if let Err(e) = tokio::fs::write(dir.join(&user.id), &bytes).await {
+        return AppError::internal(e).into_response();
+    }
+    if let Err(e) = state.store.set_avatar_mime(&user.id, Some(&mime)).await {
+        return AppError::from(e).into_response();
+    }
+    (StatusCode::SEE_OTHER, Redirect::to("/settings")).into_response()
+}
+/// Render a deterministic 5×5 mirrored identicon SVG for `seed` (the username).
+///
+/// The layout and hue derive from a stable FNV-1a hash, so the same name always
+/// yields the same badge across restarts and machines.
+fn identicon(seed: &str) -> Vec<u8> {
+    let hash = fnv1a(seed.to_lowercase().as_bytes());
+    // Hue from the top bits; a calm, legible fill against the light plate.
+    let hue = u32::try_from(hash % 360).unwrap_or(210);
+    let fill = format!("hsl({hue}, 55%, 55%)");
+    // 3 columns decide the pattern; columns 3 and 4 mirror 1 and 0.
+    let mut cells = String::new();
+    for row in 0..5u32 {
+        for col in 0..3u32 {
+            let bit = row * 3 + col;
+            if (hash >> bit) & 1 == 1 {
+                let mirror = 4 - col;
+                let _ = write!(cells, r#"<rect x="{col}" y="{row}" width="1" height="1"/>"#);
+                if mirror != col {
+                    let _ = write!(
+                        cells,
+                        r#"<rect x="{mirror}" y="{row}" width="1" height="1"/>"#
+                    );
+                }
+            }
+        }
+    }
+    format!(
+        r##"<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5 5" shape-rendering="crispEdges" role="img"><rect width="5" height="5" fill="#e8e8e8"/><g fill="{fill}">{cells}</g></svg>"##
+    )
+    .into_bytes()
+}
+/// FNV-1a 64-bit hash — small, dependency-free, and stable across runs.
+fn fnv1a(bytes: &[u8]) -> u64 {
+    let mut hash: u64 = 0xcbf2_9ce4_8422_2325;
+    for &b in bytes {
+        hash ^= u64::from(b);
+        hash = hash.wrapping_mul(0x0000_0100_0000_01b3);
+    }
+    hash
+}

 use maud::{Markup, PreEscaped, html};
 /// A vendored icon.
-// The full glyph set is vendored up front; the profile, explore, and settings
-// views wire in the remaining variants. Removed once every variant is consumed.
-#[allow(dead_code)]
 #[derive(Debug, Clone, Copy, PartialEq, Eq)]
 pub enum Icon {
     PanelLeft,
     Folder,
     File,
     GitBranch,
-    Tag,
     Search,
     Copy,
-    ChevronRight,
     Box,
     Link,
     User,
     Settings,
     LogOut,
     Upload,
-    Plus,
     Dashboard,
     Compass,
     MapPin,
     Globe,
-    Download,
-    AtSign,
     Github,
     Mastodon,
+}
             Icon::GitBranch => {
                 r#"<path d="M15 6a9 9 0 0 0-9 9V3"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/>"#
+            }
-            Icon::Tag => {
-                r#"<path d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"/><circle cx="7.5" cy="7.5" r=".5" fill="currentColor"/>"#
-            }
             Icon::Search => r#"<path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/>"#,
             Icon::Copy => {
                 r#"<rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>"#
+            }
-            Icon::ChevronRight => r#"<path d="m9 18 6-6-6-6"/>"#,
             Icon::Box => {
                 r#"<path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/><path d="m3.3 7 8.7 5 8.7-5"/><path d="M12 22V12"/>"#
+            }
             Icon::Upload => {
                 r#"<path d="M12 3v12"/><path d="m17 8-5-5-5 5"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>"#
+            }
-            Icon::Plus => r#"<path d="M5 12h14"/><path d="M12 5v14"/>"#,
             Icon::Dashboard => {
                 r#"<rect width="7" height="9" x="3" y="3" rx="1"/><rect width="7" height="5" x="14" y="3" rx="1"/><rect width="7" height="9" x="14" y="12" rx="1"/><rect width="7" height="5" x="3" y="16" rx="1"/>"#
+            }
             Icon::Globe => {
                 r#"<circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/>"#
+            }
-            Icon::Download => {
-                r#"<path d="M12 15V3"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/>"#
-            }
-            Icon::AtSign => {
-                r#"<circle cx="12" cy="12" r="4"/><path d="M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-4 8"/>"#
-            }
             Icon::Github => {
                 r#"<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>"#
+            }

 //! without JavaScript; htmx only enhances.
 mod assets;
+mod avatar;
 mod diff;
 mod error;
 mod git_http;
             get(pages::invite_form).post(pages::invite_submit),
+        )
         .route("/search", get(search::global))
-        .route("/settings", get(pages::settings))
+        .route(
+            "/settings",
+            get(pages::settings).post(pages::settings_submit),
+        )
+        .route("/settings/avatar", post(avatar::upload))
         .route("/settings/theme", get(pages::set_theme))
+        .route("/avatar/{username}", get(avatar::show))
         .route("/healthz", get(serve_assets::healthz))
         .route("/version", get(serve_assets::version))
         .route("/theme.css", get(serve_assets::theme_default))

 use crate::AppState;
 use crate::assets::Scheme;
 use crate::error::{AppError, AppResult};
+use crate::icons::{Icon, icon};
 use crate::layout::{Chrome, page};
 use crate::repo::{RepoEntry, repo_card};
 use crate::session::{
     Ok(invite)
+}
-/// `GET /settings` — the viewer's profile summary.
+/// `GET /settings` — the viewer's profile editor.
 pub async fn settings(
     State(state): State<AppState>,
     RequireUser(user): RequireUser,
     uri: Uri,
 ) -> Response {
     let (jar, chrome) = build_chrome(&state, jar, Some(user.clone()), uri.path().to_string());
-    let body = html! {
+    let body = settings_body(&user, &chrome.csrf, None);
+    (jar, page(&chrome, "Settings", body)).into_response()
+}
+/// Profile settings form fields. Empty strings clear the corresponding column.
+#[derive(Debug, Deserialize)]
+pub struct SettingsForm {
+    /// Display name.
+    #[serde(default)]
+    display_name: String,
+    /// Pronouns.
+    #[serde(default)]
+    pronouns: String,
+    /// Free-text bio.
+    #[serde(default)]
+    bio: String,
+    /// Website URL.
+    #[serde(default)]
+    website: String,
+    /// Location.
+    #[serde(default)]
+    location: String,
+    /// `GitHub` handle.
+    #[serde(default)]
+    social_github: String,
+    /// Mastodon handle.
+    #[serde(default)]
+    social_mastodon: String,
+    /// CSRF token (`_csrf`).
+    #[serde(rename = "_csrf")]
+    csrf: String,
+}
+/// `POST /settings` — persist the viewer's profile fields.
+pub async fn settings_submit(
+    State(state): State<AppState>,
+    RequireUser(user): RequireUser,
+    jar: CookieJar,
+    headers: HeaderMap,
+    Form(form): Form<SettingsForm>,
+) -> Response {
+    if verify_csrf(&jar, &headers, Some(&form.csrf)).is_err() {
+        return AppError::Forbidden.into_response();
+    }
+    let update = store::ProfileUpdate {
+        display_name: norm(&form.display_name),
+        pronouns: norm(&form.pronouns),
+        bio: norm(&form.bio),
+        website: norm(&form.website),
+        location: norm(&form.location),
+        social_github: norm(&form.social_github).map(|s| s.trim_start_matches('@').to_string()),
+        social_mastodon: norm(&form.social_mastodon),
+    };
+    match state.store.update_profile(&user.id, update).await {
+        Ok(_) => Redirect::to("/settings").into_response(),
+        Err(err) => AppError::from(err).into_response(),
+    }
+}
+/// Trim a form string, mapping the empty result to `None` (clears the column).
+fn norm(s: &str) -> Option<String> {
+    let t = s.trim();
+    (!t.is_empty()).then(|| t.to_string())
+}
+/// Render the settings page: avatar, profile fields, and read-only account info.
+fn settings_body(user: &User, csrf: &str, notice: Option<&str>) -> Markup {
+    let val = |v: &Option<String>| v.clone().unwrap_or_default();
+    html! {
         h1 { "Settings" }
-        div class="card" {
+        @if let Some(msg) = notice {
-            table class="list" {
+            div class="notice notice-success" { (msg) }
-                tr { th { "Username" } td { (user.username) } }
+        }
-                tr { th { "Email" } td { (user.email) } }
+        section class="listing" {
-                tr { th { "Display name" } td { (user.display_name.clone().unwrap_or_default()) } }
+            h2 { "Avatar" }
-                tr { th { "Administrator" } td { (if user.is_admin { "yes" } else { "no" }) } }
+            div class="card avatar-settings" {
+                img class="avatar avatar-lg" src={ "/avatar/" (user.username) } alt="Your avatar";
+                form method="post" action="/settings/avatar" enctype="multipart/form-data" {
+                    input type="hidden" name="_csrf" value=(csrf);
+                    p class="muted" { "PNG, JPEG, GIF, or WebP up to 1 MiB. Leave blank for a generated identicon." }
+                    input type="file" name="avatar" accept="image/png,image/jpeg,image/gif,image/webp";
+                    button class="btn" type="submit" { (icon(Icon::Upload)) span { "Upload" } }
+                }
+            }
+        }
-        p class="muted" { "Key and token management arrive with the settings pages." }
+        section class="listing" {
-    };
+            h2 { "Profile" }
-    (jar, page(&chrome, "Settings", body)).into_response()
+            div class="card" {
+                form method="post" action="/settings" {
+                    input type="hidden" name="_csrf" value=(csrf);
+                    label for="display_name" { "Display name" }
+                    input type="text" id="display_name" name="display_name"
+                          value=(val(&user.display_name)) autocomplete="name";
+                    label for="pronouns" { "Pronouns" }
+                    input type="text" id="pronouns" name="pronouns"
+                          value=(val(&user.pronouns)) placeholder="they/them";
+                    label for="bio" { "Bio" }
+                    textarea id="bio" name="bio" rows="3" { (val(&user.bio)) }
+                    label for="location" { "Location" }
+                    input type="text" id="location" name="location" value=(val(&user.location));
+                    label for="website" { "Website" }
+                    input type="text" id="website" name="website"
+                          value=(val(&user.website)) placeholder="https://example.com";
+                    label for="social_github" { "GitHub" }
+                    input type="text" id="social_github" name="social_github"
+                          value=(val(&user.social_github)) placeholder="username";
+                    label for="social_mastodon" { "Mastodon" }
+                    input type="text" id="social_mastodon" name="social_mastodon"
+                          value=(val(&user.social_mastodon)) placeholder="@user@instance";
+                    button class="btn btn-primary" type="submit" { "Save profile" }
+                }
+            }
+        }
+        section class="listing" {
+            h2 { "Account" }
+            div class="card" {
+                table class="list" {
+                    tr { th { "Username" } td { (user.username) } }
+                    tr { th { "Email" } td { (user.email) } }
+                    tr { th { "Administrator" } td { (if user.is_admin { "yes" } else { "no" }) } }
+                }
+            }
+        }
+    }
+}
 /// Theme-switch query.

     let (jar, chrome) = build_chrome(&state, jar, viewer.clone(), uri.path().to_string());
     let body = html! {
-        h1 { (owner.username) }
+        (profile_header(&owner))
         @if !groups.is_empty() {
-            section {
+            section class="listing" {
                 h2 { "Groups" }
-                ul class="repo-list" {
+                ul class="repo-list card" {
                     @for group in &groups {
-                        li { a href={ "/" (owner.username) "/" (group.path) } { (group.path) } }
+                        li {
+                            a class="repo-row" href={ "/" (owner.username) "/" (group.path) } {
+                                span class="repo-row-name" {
+                                    (icon(Icon::Folder)) span { (group.path) }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
         div class="blob-header" {
             span class="muted" { (blob.size) " bytes" }
             span { a class="btn" href=(raw_url) { "Raw" }
-                   button class="btn" type="button" data-clipboard=(raw_url) { "Copy path" } }
+                   button class="btn" type="button" data-clipboard=(raw_url) {
+                       (icon(Icon::Copy)) span { "Copy path" }
+                   } }
+        }
         @if is_image(filename) {
             p { img src=(raw_url) alt=(filename) style="max-width:100%"; }
+                                }
                                 span class="repo-row-meta muted" {
                                     (if e.private { "private" } else { "public" })
-                                    " · default: " (e.default_branch)
+                                    " · " (icon(Icon::GitBranch)) " " (e.default_branch)
+                                }
+                            }
+                        }
     repo_card("Repositories", "No repositories.", &entries)
+}
+/// The profile header: avatar, name, `User · username`, pronouns, bio, and any
+/// location and social links.
+fn profile_header(owner: &User) -> Markup {
+    let name = owner.display_name.as_deref().unwrap_or(&owner.username);
+    html! {
+        header class="profile-head" {
+            img class="avatar avatar-xl" src={ "/avatar/" (owner.username) } alt="";
+            div class="profile-meta" {
+                h1 { (name) }
+                p class="profile-sub muted" {
+                    (icon(Icon::User)) span { "User · " (owner.username) }
+                    @if let Some(pronouns) = pronouns(owner) {
+                        span class="profile-pronouns" { (pronouns) }
+                    }
+                }
+                @if let Some(bio) = non_empty(owner.bio.as_ref()) {
+                    p class="profile-bio" { (bio) }
+                }
+                @let links = profile_links(owner);
+                @if !links.is_empty() {
+                    ul class="profile-links muted" {
+                        @for link in &links { (link) }
+                    }
+                }
+            }
+        }
+    }
+}
+/// The trimmed pronouns, if set.
+fn pronouns(owner: &User) -> Option<&str> {
+    non_empty(owner.pronouns.as_ref())
+}
+/// A field's trimmed value, or `None` when empty.
+fn non_empty(field: Option<&String>) -> Option<&str> {
+    field.map(|s| s.trim()).filter(|s| !s.is_empty())
+}
+/// The profile's location and social links, each an icon-prefixed row.
+fn profile_links(owner: &User) -> Vec<Markup> {
+    let mut out = Vec::new();
+    if let Some(location) = non_empty(owner.location.as_ref()) {
+        out.push(html! { li { (icon(Icon::MapPin)) span { (location) } } });
+    }
+    if let Some(site) = non_empty(owner.website.as_ref()) {
+        let href = if site.starts_with("http://") || site.starts_with("https://") {
+            site.to_string()
+        } else {
+            format!("https://{site}")
+        };
+        let shown = site
+            .trim_start_matches("https://")
+            .trim_start_matches("http://");
+        out.push(html! {
+            li { a href=(href) rel="nofollow noopener" { (icon(Icon::Globe)) span { (shown) } } }
+        });
+    }
+    if let Some(handle) = non_empty(owner.social_github.as_ref()) {
+        let handle = handle.trim_start_matches('@');
+        out.push(html! {
+            li {
+                a href=(format!("https://github.com/{handle}")) rel="nofollow noopener" {
+                    (icon(Icon::Github)) span { (handle) }
+                }
+            }
+        });
+    }
+    if let Some(handle) = non_empty(owner.social_mastodon.as_ref()) {
+        out.push(html! { li { (mastodon_link(handle)) } });
+    }
+    out
+}
+/// Render a Mastodon `@user@instance` handle as a link when well-formed, else as
+/// plain text.
+fn mastodon_link(handle: &str) -> Markup {
+    let trimmed = handle.trim_start_matches('@');
+    if let Some((user, instance)) = trimmed.split_once('@')
+        && !user.is_empty()
+        && !instance.is_empty()
+    {
+        return html! {
+            a href=(format!("https://{instance}/@{user}")) rel="nofollow noopener me" {
+                (icon(Icon::Mastodon)) span { "@" (user) "@" (instance) }
+            }
+        };
+    }
+    html! { span { (icon(Icon::Mastodon)) span { (handle) } } }
+}
 /// The repo sub-header: slug, tabs, and clone URLs.
 fn repo_header(state: &AppState, ctx: &RepoCtx, active: Tab, rev: &str) -> Markup {
     let base = format!("/{}/{}", ctx.owner.username, ctx.repo.path);
             div class="clone-row" {
                 input type="text" readonly value=(clone_https(state, ctx))
                       aria-label="HTTPS clone URL";
-                button class="btn" type="button" data-clipboard=(clone_https(state, ctx)) { "Copy" }
+                button class="btn" type="button" data-clipboard=(clone_https(state, ctx)) {
+                    (icon(Icon::Copy)) span { "Copy" }
+                }
+            }
+        }
+    }