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


			@@ -359,6 +359,9 @@ select:focus {
359	359		}
360	360		.badge-private {
361	361		color: var(--fb-fg-muted);
	362	+	/* An explicit muted border: Carbon's --fb-border equals --fb-bg-inset, so the
	363	+	default badge border vanishes against a hovered inset row. */
	364	+	border-color: var(--fb-fg-muted);
362	365		}
363	366
364	367		/* Inline search row: input grows, button sits to its right with margin. */

			@@ -461,6 +464,103 @@ select:focus {
461	464		font-size: 0.85em;
462	465		}
463	466
	467	+	/* ---- Dashboard (activity + repo sidebar) ---- */
	468	+	.dashboard {
	469	+	display: flex;
	470	+	gap: 1.5rem;
	471	+	align-items: flex-start;
	472	+	}
	473	+	.dashboard-main {
	474	+	flex: 1;
	475	+	min-width: 0;
	476	+	}
	477	+	.dashboard-side {
	478	+	flex: none;
	479	+	width: 20rem;
	480	+	}
	481	+	.dashboard-side .search-row {
	482	+	margin-top: 0;
	483	+	}
	484	+
	485	+	/* Contribution heatmap. */
	486	+	.heatmap-wrap {
	487	+	overflow-x: auto;
	488	+	padding-bottom: 0.25rem;
	489	+	}
	490	+	.heatmap {
	491	+	display: block;
	492	+	}
	493	+	.hm-label {
	494	+	fill: var(--fb-fg-muted);
	495	+	font-size: 9px;
	496	+	font-family: var(--fb-font-sans);
	497	+	}
	498	+	.hm-cell {
	499	+	fill: var(--fb-bg-inset);
	500	+	}
	501	+	.hm-cell[data-level="1"] {
	502	+	fill: color-mix(in srgb, var(--fb-accent) 30%, var(--fb-bg-inset));
	503	+	}
	504	+	.hm-cell[data-level="2"] {
	505	+	fill: color-mix(in srgb, var(--fb-accent) 55%, var(--fb-bg-inset));
	506	+	}
	507	+	.hm-cell[data-level="3"] {
	508	+	fill: color-mix(in srgb, var(--fb-accent) 78%, var(--fb-bg-inset));
	509	+	}
	510	+	.hm-cell[data-level="4"] {
	511	+	fill: var(--fb-accent);
	512	+	}
	513	+	.heatmap-caption {
	514	+	margin: 0.25rem 0 1.5rem;
	515	+	font-size: 0.85em;
	516	+	}
	517	+
	518	+	/* Recent-activity feed. */
	519	+	.activity-feed {
	520	+	list-style: none;
	521	+	margin: 0;
	522	+	padding: 0;
	523	+	}
	524	+	.activity-item {
	525	+	padding: 0.75rem 1rem;
	526	+	border-bottom: 1px solid var(--fb-border);
	527	+	}
	528	+	.activity-item:last-child {
	529	+	border-bottom: none;
	530	+	}
	531	+	.activity-head {
	532	+	display: flex;
	533	+	align-items: center;
	534	+	gap: 0.4rem;
	535	+	flex-wrap: wrap;
	536	+	font-size: 0.9em;
	537	+	}
	538	+	.activity-time {
	539	+	margin-left: auto;
	540	+	}
	541	+	.activity-commit {
	542	+	display: flex;
	543	+	gap: 0.6rem;
	544	+	margin-top: 0.35rem;
	545	+	align-items: baseline;
	546	+	color: var(--fb-fg);
	547	+	}
	548	+	.activity-commit:hover {
	549	+	color: var(--fb-accent);
	550	+	text-decoration: none;
	551	+	}
	552	+	.commit-sha {
	553	+	flex: none;
	554	+	color: var(--fb-fg-muted);
	555	+	font-size: 0.85em;
	556	+	}
	557	+	.commit-summary {
	558	+	min-width: 0;
	559	+	overflow: hidden;
	560	+	text-overflow: ellipsis;
	561	+	white-space: nowrap;
	562	+	}
	563	+
464	564		/* ---- Avatars & profile header ---- */
465	565		.avatar {
466	566		border-radius: 6px;

			@@ -546,6 +646,18 @@ select:focus {
546	646		display: inline-flex;
547	647		align-items: center;
548	648		gap: 0.5rem;
	649	+	min-width: 0;
	650	+	}
	651	+	.profile-links li .icon {
	652	+	flex: none;
	653	+	color: var(--fb-fg-muted);
	654	+	}
	655	+	.profile-links a {
	656	+	color: var(--fb-accent);
	657	+	min-width: 0;
	658	+	overflow: hidden;
	659	+	text-overflow: ellipsis;
	660	+	white-space: nowrap;
549	661		}
550	662		.profile-joined {
551	663		margin: 0;

			@@ -718,34 +830,33 @@ pre.code {
718	830		.repo-slug a {
719	831		color: var(--fb-accent);
720	832		}
721		-	/* Horizontal tab strips (repo sub-nav, explore sub-nav). */
	833	+	/* Tab strips (repo sub-nav, explore sub-nav): active-pill style. */
722	834		.repo-tabs,
723	835		.subnav {
724	836		display: flex;
725		-	gap: 0.25rem;
	837	+	gap: 0.5rem;
726	838		flex-wrap: wrap;
727		-	margin: 0.75rem 0;
728		-	border-bottom: 1px solid var(--fb-border);
	839	+	margin: 0.75rem 0 1.25rem;
729	840		}
730	841		.repo-tabs a,
731	842		.subnav a {
732	843		display: inline-flex;
733	844		align-items: center;
734	845		gap: 0.4rem;
735		-	padding: 0.5rem 0.85rem;
	846	+	padding: 0.4rem 0.9rem;
	847	+	border-radius: 999px;
736	848		color: var(--fb-fg-muted);
737		-	border-bottom: 2px solid transparent;
738		-	margin-bottom: -1px;
739	849		}
740	850		.repo-tabs a:hover,
741	851		.subnav a:hover {
742	852		color: var(--fb-fg);
	853	+	background: var(--fb-bg-inset);
743	854		text-decoration: none;
744	855		}
745	856		.repo-tabs a[aria-current="page"],
746	857		.subnav a[aria-current="page"] {
747	858		color: var(--fb-fg);
748		-	border-bottom-color: var(--fb-accent);
	859	+	background: var(--fb-bg-inset);
749	860		font-weight: 600;
750	861		}
751	862		.subnav {

			@@ -1018,11 +1129,13 @@ td.diff-empty {
1018	1129		display: block;
1019	1130		overflow-x: auto;
1020	1131		}
1021		-	/* Stack the profile columns on narrow screens. */
1022		-	.profile-layout {
	1132	+	/* Stack the profile and dashboard columns on narrow screens. */
	1133	+	.profile-layout,
	1134	+	.dashboard {
1023	1135		flex-direction: column;
1024	1136		}
1025		-	.profile-sidebar {
	1137	+	.profile-sidebar,
	1138	+	.dashboard-side {
1026	1139		width: 100%;
1027	1140		}
1028	1141		}

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

@@ @@ -65,10 +65,11 @@ pub async fn home( @@
     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?;
@@ @@ -211,16 +212,35 @@ fn user_card(users: &[User]) -> Markup { @@
+    }
+}
 /// The dashboard: a greeting and the viewer's own repositories.
 async fn dashboard_body(state: &AppState, user: &User) -> AppResult<Markup> {
 /// The dashboard: the viewer's contribution activity and recent commits, beside
 /// 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())) }
         (repo_card("Your repositories", "You have no repositories yet.", &entries))
         div class="dashboard" {
             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))
+            }
+        }
     })
+}

@@ @@ -0,0 +1,288 @@ @@
 // 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")
+    }
+}