hanna/fabrica

feat(web): dashboard with contribution graph and activity feed

8fa11e3 · hanna committed on 2026-07-25

Replace the signed-in landing with a Forgejo-style dashboard: a 53-week
contribution heatmap (commits attributed to the viewer by author email,
bounded scan per repo, themeable via color-mix on the accent) and a recent-
commit feed beside a filterable repository sidebar. Switch the tab strips
(repo sub-nav, explore) to an active-pill style, give the private badge a
visible border on Carbon, and mute the profile social-link icons.

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

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

assets/base.css +124 −11

crates/web/src/activity.rs +288 −0

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

crates/web/src/pages.rs +25 −5

+}
 .badge-private {
   color: var(--fb-fg-muted);
+  /* An explicit muted border: Carbon's --fb-border equals --fb-bg-inset, so the
+     default badge border vanishes against a hovered inset row. */
+  border-color: var(--fb-fg-muted);
+}
 /* Inline search row: input grows, button sits to its right with margin. */
   font-size: 0.85em;
+}
+/* ---- Dashboard (activity + repo sidebar) ---- */
+.dashboard {
+  display: flex;
+  gap: 1.5rem;
+  align-items: flex-start;
+}
+.dashboard-main {
+  flex: 1;
+  min-width: 0;
+}
+.dashboard-side {
+  flex: none;
+  width: 20rem;
+}
+.dashboard-side .search-row {
+  margin-top: 0;
+}
+/* Contribution heatmap. */
+.heatmap-wrap {
+  overflow-x: auto;
+  padding-bottom: 0.25rem;
+}
+.heatmap {
+  display: block;
+}
+.hm-label {
+  fill: var(--fb-fg-muted);
+  font-size: 9px;
+  font-family: var(--fb-font-sans);
+}
+.hm-cell {
+  fill: var(--fb-bg-inset);
+}
+.hm-cell[data-level="1"] {
+  fill: color-mix(in srgb, var(--fb-accent) 30%, var(--fb-bg-inset));
+}
+.hm-cell[data-level="2"] {
+  fill: color-mix(in srgb, var(--fb-accent) 55%, var(--fb-bg-inset));
+}
+.hm-cell[data-level="3"] {
+  fill: color-mix(in srgb, var(--fb-accent) 78%, var(--fb-bg-inset));
+}
+.hm-cell[data-level="4"] {
+  fill: var(--fb-accent);
+}
+.heatmap-caption {
+  margin: 0.25rem 0 1.5rem;
+  font-size: 0.85em;
+}
+/* Recent-activity feed. */
+.activity-feed {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.activity-item {
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--fb-border);
+}
+.activity-item:last-child {
+  border-bottom: none;
+}
+.activity-head {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  flex-wrap: wrap;
+  font-size: 0.9em;
+}
+.activity-time {
+  margin-left: auto;
+}
+.activity-commit {
+  display: flex;
+  gap: 0.6rem;
+  margin-top: 0.35rem;
+  align-items: baseline;
+  color: var(--fb-fg);
+}
+.activity-commit:hover {
+  color: var(--fb-accent);
+  text-decoration: none;
+}
+.commit-sha {
+  flex: none;
+  color: var(--fb-fg-muted);
+  font-size: 0.85em;
+}
+.commit-summary {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 /* ---- Avatars & profile header ---- */
 .avatar {
   border-radius: 6px;
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
+  min-width: 0;
+}
+.profile-links li .icon {
+  flex: none;
+  color: var(--fb-fg-muted);
+}
+.profile-links a {
+  color: var(--fb-accent);
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .profile-joined {
   margin: 0;
 .repo-slug a {
   color: var(--fb-accent);
+}
-/* Horizontal tab strips (repo sub-nav, explore sub-nav). */
+/* Tab strips (repo sub-nav, explore sub-nav): active-pill style. */
 .repo-tabs,
 .subnav {
   display: flex;
-  gap: 0.25rem;
+  gap: 0.5rem;
   flex-wrap: wrap;
-  margin: 0.75rem 0;
+  margin: 0.75rem 0 1.25rem;
-  border-bottom: 1px solid var(--fb-border);
+}
 .repo-tabs a,
 .subnav a {
   display: inline-flex;
   align-items: center;
   gap: 0.4rem;
-  padding: 0.5rem 0.85rem;
+  padding: 0.4rem 0.9rem;
+  border-radius: 999px;
   color: var(--fb-fg-muted);
-  border-bottom: 2px solid transparent;
-  margin-bottom: -1px;
+}
 .repo-tabs a:hover,
 .subnav a:hover {
   color: var(--fb-fg);
+  background: var(--fb-bg-inset);
   text-decoration: none;
+}
 .repo-tabs a[aria-current="page"],
 .subnav a[aria-current="page"] {
   color: var(--fb-fg);
-  border-bottom-color: var(--fb-accent);
+  background: var(--fb-bg-inset);
   font-weight: 600;
+}
 .subnav {
     display: block;
     overflow-x: auto;
+  }
-  /* Stack the profile columns on narrow screens. */
+  /* Stack the profile and dashboard columns on narrow screens. */
-  .profile-layout {
+  .profile-layout,
+  .dashboard {
     flex-direction: column;
+  }
-  .profile-sidebar {
+  .profile-sidebar,
+  .dashboard-side {
     width: 100%;
+  }
+}

 //! [`serve`](mod@serve_assets) (assets/health). Every interactive element works
 //! without JavaScript; htmx only enhances.
+mod activity;
 mod assets;
 mod avatar;
 mod diff;

     MaybeUser(user): MaybeUser,
     jar: CookieJar,
     uri: Uri,
+    axum::extract::Query(lq): axum::extract::Query<repo::ListQuery>,
 ) -> AppResult<Response> {
     let (jar, chrome) = build_chrome(&state, jar, user.clone(), uri.path().to_string());
     if let Some(u) = user {
-        let body = dashboard_body(&state, &u).await?;
+        let body = dashboard_body(&state, &u, &lq.q.unwrap_or_default()).await?;
         Ok((jar, page(&chrome, "Dashboard", body)).into_response())
     } else {
         let body = explore_repos_body(&state, "").await?;
+    }
+}
-/// The dashboard: a greeting and the viewer's own repositories.
+/// The dashboard: the viewer's contribution activity and recent commits, beside
-async fn dashboard_body(state: &AppState, user: &User) -> AppResult<Markup> {
+/// a filterable list of their repositories.
+async fn dashboard_body(state: &AppState, user: &User, q: &str) -> AppResult<Markup> {
+    let now = now_ms();
+    let activity = crate::activity::compute(state, user, now).await?;
     let mine = state.store.repos_by_owner(&user.id).await?;
+    let needle = q.trim().to_lowercase();
     let entries: Vec<RepoEntry> = mine
         .iter()
+        .filter(|r| needle.is_empty() || r.path.to_lowercase().contains(&needle))
         .map(|r| RepoEntry::owned(&user.username, r))
         .collect();
     Ok(html! {
-        h1 { "Welcome, " (user.display_name.clone().unwrap_or_else(|| user.username.clone())) }
+        div class="dashboard" {
-        (repo_card("Your repositories", "You have no repositories yet.", &entries))
+            div class="dashboard-main" {
+                (activity.heatmap())
+                (activity.feed_section(now))
+            }
+            aside class="dashboard-side" {
+                form class="search-row" method="get" {
+                    input type="search" name="q" value=(q)
+                          placeholder="Search repositories…" aria-label="Search repositories";
+                    button class="btn btn-primary" type="submit" { "Search" }
+                }
+                (repo_card("Repositories", "You have no repositories yet.", &entries))
+            }
+        }
     })
+}

+// 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/.
+//! The dashboard's contribution activity: a 53-week commit heatmap and a recent
+//! commit feed, computed across the viewer's own repositories.
+//!
+//! Commits are attributed to the viewer by author email (case-insensitive) over
+//! the trailing 53 weeks. Scanning is bounded per repo so a large history never
+//! makes the dashboard slow.
+use std::cmp::Reverse;
+use std::fmt::Write as _;
+use maud::{Markup, PreEscaped, html};
+use model::User;
+use time::{Duration, OffsetDateTime};
+use crate::AppState;
+use crate::error::AppResult;
+use crate::icons::{Icon, icon};
+use crate::repo::git_read;
+/// Weeks shown across the heatmap (a year plus the current partial week).
+const WEEKS: usize = 53;
+/// Commits scanned per repo on its default branch — bounds dashboard cost.
+const SCAN_PER_REPO: usize = 400;
+/// Recent commits shown in the activity feed.
+const FEED_LIMIT: usize = 20;
+/// One commit in the activity feed.
+pub struct FeedItem {
+    /// The repo's owner username.
+    pub owner: String,
+    /// The repo path.
+    pub repo: String,
+    /// The branch the commit is on (the default branch).
+    pub branch: String,
+    /// The abbreviated commit id.
+    pub short: String,
+    /// The full commit id, for the link.
+    pub oid: String,
+    /// The commit summary line.
+    pub summary: String,
+    /// Author time, epoch milliseconds.
+    pub time_ms: i64,
+}
+/// The computed activity for a user.
+pub struct Activity {
+    /// Per-cell commit counts, indexed `week * 7 + weekday` (weekday 0 = Monday).
+    counts: Vec<u32>,
+    /// Total commits in the window.
+    total: u32,
+    /// The Monday of the first (leftmost) column.
+    start: time::Date,
+    /// The most recent commits, newest first.
+    feed: Vec<FeedItem>,
+}
+/// Compute the viewer's activity across their own repositories.
+pub async fn compute(state: &AppState, user: &User, now_ms: i64) -> AppResult<Activity> {
+    let repos = state.store.repos_by_owner(&user.id).await?;
+    let email = user.email.to_lowercase();
+    // The grid ends today and starts on the Monday 53 weeks back.
+    let today = OffsetDateTime::from_unix_timestamp(now_ms.div_euclid(1000))
+        .unwrap_or(OffsetDateTime::UNIX_EPOCH)
+        .date();
+    let this_monday = today - Duration::days(i64::from(today.weekday().number_days_from_monday()));
+    let start = this_monday - Duration::days(i64::try_from((WEEKS - 1) * 7).unwrap_or(0));
+    let mut counts = vec![0u32; WEEKS * 7];
+    let mut feed: Vec<FeedItem> = Vec::new();
+    for repo in &repos {
+        let rev_name = repo.default_branch.clone();
+        let commits = git_read(state, &repo.id, move |r| {
+            let rev = r.resolve_ref(&rev_name)?;
+            r.commits(&rev, None, git::Page::first(SCAN_PER_REPO))
+        })
+        .await;
+        let Ok(commits) = commits else { continue };
+        for c in commits {
+            if !c.author.email.eq_ignore_ascii_case(&email) {
+                continue;
+            }
+            // Bucket into the heatmap when inside the window.
+            if let Ok(dt) = OffsetDateTime::from_unix_timestamp(c.author.time_ms.div_euclid(1000)) {
+                let offset = (dt.date() - start).whole_days();
+                let total_days = i64::try_from(WEEKS * 7).unwrap_or(0);
+                if (0..total_days).contains(&offset)
+                    && let Ok(idx) = usize::try_from(offset)
+                {
+                    counts[idx] += 1;
+                }
+            }
+            feed.push(FeedItem {
+                owner: user.username.clone(),
+                repo: repo.path.clone(),
+                branch: repo.default_branch.clone(),
+                short: c.oid.short().to_string(),
+                oid: c.oid.to_string(),
+                summary: c.summary.clone(),
+                time_ms: c.author.time_ms,
+            });
+        }
+    }
+    let total = counts.iter().sum();
+    feed.sort_by_key(|i| Reverse(i.time_ms));
+    feed.truncate(FEED_LIMIT);
+    Ok(Activity {
+        counts,
+        total,
+        start,
+        feed,
+    })
+}
+impl Activity {
+    /// The intensity level (0–4) for a commit count, scaled to the busiest day.
+    fn level(&self, count: u32) -> u8 {
+        if count == 0 {
+            return 0;
+        }
+        let max = self.counts.iter().copied().max().unwrap_or(1).max(1);
+        let step = count.saturating_sub(1).saturating_mul(4) / max;
++ u8::try_from(step.min(3)).unwrap_or(3)
+    }
+    /// Render the contribution heatmap as an inline SVG with month and weekday
+    /// labels.
+    pub fn heatmap(&self) -> Markup {
+        // Geometry, in SVG user units.
+        let cell = 11u32;
+        let gap = 3u32;
+        let step = cell + gap;
+        let left = 30u32; // weekday-label gutter
+        let top = 18u32; // month-label strip
+        let width = left + u32::try_from(WEEKS).unwrap_or(53) * step;
+        let height = top + 7 * step;
+        let month_name = |m: time::Month| match m {
+            time::Month::January => "Jan",
+            time::Month::February => "Feb",
+            time::Month::March => "Mar",
+            time::Month::April => "Apr",
+            time::Month::May => "May",
+            time::Month::June => "Jun",
+            time::Month::July => "Jul",
+            time::Month::August => "Aug",
+            time::Month::September => "Sep",
+            time::Month::October => "Oct",
+            time::Month::November => "Nov",
+            time::Month::December => "Dec",
+        };
+        let mut body = String::new();
+        // Month labels: at the first column whose Monday introduces a new month.
+        let mut prev_month: Option<time::Month> = None;
+        for week in 0..WEEKS {
+            let wk = u32::try_from(week).unwrap_or(0);
+            let col_date = self.start + Duration::days(i64::from(wk) * 7);
+            let m = col_date.month();
+            if prev_month != Some(m) {
+                prev_month = Some(m);
+                let x = left + wk * step;
+                let _ = write!(
+                    body,
+                    r#"<text x="{x}" y="12" class="hm-label">{}</text>"#,
+                    month_name(m)
+                );
+            }
+        }
+        // Weekday labels (Mon/Wed/Fri).
+        for (row, label) in [(0u32, "Mon"), (2, "Wed"), (4, "Fri")] {
+            let y = top + row * step + cell;
+            let _ = write!(
+                body,
+                r#"<text x="0" y="{y}" class="hm-label">{label}</text>"#
+            );
+        }
+        // Cells.
+        for week in 0..WEEKS {
+            let wk = u32::try_from(week).unwrap_or(0);
+            for day in 0..7u32 {
+                let idx = week * 7 + usize::try_from(day).unwrap_or(0);
+                let count = self.counts[idx];
+                let x = left + wk * step;
+                let y = top + day * step;
+                let lvl = self.level(count);
+                let date = self.start + Duration::days(i64::try_from(idx).unwrap_or(0));
+                let _ = write!(
+                    body,
+                    r#"<rect x="{x}" y="{y}" width="{cell}" height="{cell}" rx="2" class="hm-cell" data-level="{lvl}"><title>{count} on {}-{:02}-{:02}</title></rect>"#,
+                    date.year(),
+                    u8::from(date.month()),
+                    date.day(),
+                );
+            }
+        }
+        html! {
+            div class="heatmap-wrap" {
+                svg class="heatmap" viewBox=(format!("0 0 {width} {height}"))
+                    width=(width) height=(height) role="img"
+                    aria-label=(format!("{} contributions in the last year", self.total)) {
+                    (PreEscaped(body))
+                }
+            }
+            p class="muted heatmap-caption" {
+                (self.total) " contributions in the last year"
+            }
+        }
+    }
+    /// Render the recent-activity commit feed.
+    pub fn feed_section(&self, now_ms: i64) -> Markup {
+        html! {
+            section class="listing" {
+                h2 { "Recent activity" }
+                @if self.feed.is_empty() {
+                    div class="card" { p class="muted" { "No recent activity." } }
+                } @else {
+                    ul class="activity-feed card" {
+                        @for item in &self.feed {
+                            @let base = format!("/{}/{}", item.owner, item.repo);
+                            li class="activity-item" {
+                                div class="activity-head muted" {
+                                    (icon(Icon::GitBranch))
+                                    " pushed to "
+                                    span class="badge" { (item.branch) }
+                                    " at "
+                                    a href=(base) { (item.owner) "/" (item.repo) }
+                                    span class="activity-time" { (fmt_relative(item.time_ms, now_ms)) }
+                                }
+                                a class="activity-commit" href=(format!("{base}/-/commit/{}", item.oid)) {
+                                    span class="mono commit-sha" { (item.short) }
+                                    span class="commit-summary" { (item.summary) }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+/// Format an epoch-millisecond timestamp relative to `now_ms`, e.g. `3 hours
+/// ago`, falling back to an absolute date past a month.
+fn fmt_relative(ms: i64, now_ms: i64) -> String {
+    let secs = (now_ms - ms).div_euclid(1000).max(0);
+    let mins = secs / 60;
+    let hours = mins / 60;
+    let days = hours / 24;
+    if secs < 60 {
+        "just now".to_string()
+    } else if mins < 60 {
+        plural(mins, "minute")
+    } else if hours < 24 {
+        plural(hours, "hour")
+    } else if days < 30 {
+        plural(days, "day")
+    } else {
+        match OffsetDateTime::from_unix_timestamp(ms.div_euclid(1000)) {
+            Ok(dt) => format!(
+                "on {}-{:02}-{:02}",
+                dt.year(),
+                u8::from(dt.month()),
+                dt.day()
+            ),
+            Err(_) => "a while ago".to_string(),
+        }
+    }
+}
+/// `N unit(s) ago`, pluralizing the unit.
+fn plural(n: i64, unit: &str) -> String {
+    if n == 1 {
+        format!("1 {unit} ago")
+    } else {
+        format!("{n} {unit}s ago")
+    }
+}