hanna/fabrica

feat(web): notifications and @mentions

dd5ce44 · hanna committed on 2026-07-26

- @username in issue/PR descriptions and comments links to the profile
  (markdown linkifier, skipping emails/code/existing links) and creates a
  "mention" notification for each mentioned user who can read the repo
  (on issue open, comment, and PR open).
- A notifications inbox (/notifications, bell icon in the navbar): lists
  events newest-first, highlights unread, opens the target issue/PR while
  marking the item read, and a Mark-all-read action.

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

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

assets/base.css +55 −2

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

crates/web/src/issues.rs +42 −0

crates/web/src/layout.rs +2 −0

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

crates/web/src/markdown.rs +79 −2

crates/web/src/notifications.rs +182 −0

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

   color: var(--fb-accent);
   border-color: var(--fb-accent);
+}
-/* An inline #n issue/PR cross-reference link. */
+/* Inline #n / @user references in rendered markdown. */
-.issue-ref {
+.issue-ref,
+.user-ref {
   font-weight: 600;
+}
+/* Notifications inbox. */
+.notif-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-bottom: 1rem;
+}
+.notif-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.notif-row {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.7rem 1rem;
+  border-bottom: 1px solid var(--fb-border);
+}
+.notif-row:last-child {
+  border-bottom: none;
+}
+.notif-row.unread {
+  background: var(--fb-bg-inset);
+}
+.notif-icon {
+  flex: none;
+  color: var(--fb-fg-muted);
+}
+.notif-row.unread .notif-icon {
+  color: var(--fb-accent);
+}
+.notif-body {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  flex: 1;
+  min-width: 0;
+  color: var(--fb-fg);
+}
+.notif-text {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.notif-time {
+  flex: none;
+  font-size: 0.85em;
+}
 .repo-tabs a,
 .profile-tabs a,
 .subnav a {

     GitFork,
     Bookmark,
     Users,
+    Bell,
     Github,
     Mastodon,
+}
             Icon::Users => {
                 r#"<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>"#
+            }
+            // Lucide "bell": notifications.
+            Icon::Bell => {
+                r#"<path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"/>"#
+            }
             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"/>"#
+            }

                 state.store.add_issue_label(&issue.id, id).await?;
+            }
+        }
+        notify_mentions(&state, &user.id, &repo, &issue.id, desc.trim()).await;
         Ok::<String, AppError>(issue_url(&state, &repo, &issue).await)
+    }
     .await;
     respond_redirect(result)
+}
+/// Create a "mention" notification for every `@user` in `body` who can read the
+/// repo. Best-effort: failures are ignored.
+pub(crate) async fn notify_mentions(
+    state: &AppState,
+    actor_id: &str,
+    repo: &model::Repo,
+    issue_id: &str,
+    body: &str,
+) {
+    for name in markdown::mentions(body) {
+        let Ok(Some(user)) = state.store.user_by_username(&name).await else {
+            continue;
+        };
+        let collab = state
+            .store
+            .collaborator_permission(&repo.id, &user.id)
+            .await
+            .ok()
+            .flatten()
+            .and_then(|p| auth::Permission::parse(&p));
+        let viewer = auth::Viewer {
+            id: user.id.clone(),
+            is_admin: user.is_admin,
+        };
+        let access = auth::access(Some(&viewer), repo, collab, state.allow_anonymous());
+        if access >= auth::Access::Read {
+            let _ = state
+                .store
+                .create_notification(store::NewNotification {
+                    user_id: user.id,
+                    actor_id: actor_id.to_string(),
+                    kind: "mention".to_string(),
+                    repo_id: Some(repo.id.clone()),
+                    issue_id: Some(issue_id.to_string()),
+                })
+                .await;
+        }
+    }
+}
 /// Edit-title form.
 #[derive(Debug, Deserialize)]
 pub struct EditTitleForm {
         let body = form.body.trim();
         if !body.is_empty() {
             state.store.add_comment(&issue.id, &user.id, body).await?;
+            notify_mentions(&state, &user.id, &repo, &issue.id, body).await;
+        }
         Ok::<String, AppError>(issue_url(&state, &repo, &issue).await)
+    }

                 (create_menu(chrome))
                 a class="icon-btn" href={ "/" (user.username) "?tab=bookmarks" }
                   aria-label="Bookmarks" title="Bookmarks" { (icon(Icon::Bookmark)) }
+                a class="icon-btn" href="/notifications"
+                  aria-label="Notifications" title="Notifications" { (icon(Icon::Bell)) }
+            }
             form class="topbar-search" method="get" action="/search" role="search" {
                 input type="search" name="q" placeholder="Search…" aria-label="Search";

 mod lfs;
 mod license;
 mod markdown;
+mod notifications;
 mod pages;
 mod pulls;
 mod repo;
+        )
         .route("/repo-bookmark/{id}", get(repo::bookmark_toggle))
         .route("/user-follow/{username}", get(repo::follow_toggle))
+        .route("/notifications", get(notifications::list))
+        .route("/notifications/read-all", post(notifications::read_all))
+        .route("/notifications/{id}", get(notifications::open))
         // Issue/PR mutations: fixed prefixes so they never hit the repo catch-all.
         .route("/issue-new/{repo_id}", post(issues::create))
         .route("/issue/{id}/comment", post(issues::comment))

     let mut i = 0;
     let mut in_tag = false;
     let mut code_depth: usize = 0;
+    let mut a_depth: usize = 0; // inside an existing <a> (or email autolink)
     while i < bytes.len() {
         let c = bytes[i];
         if in_tag {
                 code_depth += 1;
             } else if rest.starts_with("</code") || rest.starts_with("</pre") {
                 code_depth = code_depth.saturating_sub(1);
+            } else if rest.starts_with("<a") && !rest.starts_with("<abbr") {
+                a_depth += 1;
+            } else if rest.starts_with("</a") {
+                a_depth = a_depth.saturating_sub(1);
+            }
             in_tag = true;
             out.push(b'<');
             i += 1;
             continue;
+        }
-        // A `#` that follows a non-alphanumeric boundary and is followed by digits.
+        let plain = code_depth == 0 && a_depth == 0;
-        if code_depth == 0 && c == b'#' && (i == 0 || !bytes[i - 1].is_ascii_alphanumeric()) {
+        let boundary = i == 0 || !bytes[i - 1].is_ascii_alphanumeric();
+        // `#123` → issue/PR link.
+        if plain && boundary && c == b'#' {
             let mut j = i + 1;
             while j < bytes.len() && bytes[j].is_ascii_digit() {
                 j += 1;
                 continue;
+            }
+        }
+        // `@name` → user profile link (boundary avoids matching email local parts).
+        if plain && boundary && c == b'@' {
+            let mut j = i + 1;
+            while j < bytes.len() && is_username_byte(bytes[j]) {
+                j += 1;
+            }
+            if j > i + 1 {
+                let name = &html[i + 1..j];
+                out.extend_from_slice(
+                    format!("<a class=\"user-ref\" href=\"/{name}\">@{name}</a>").as_bytes(),
+                );
+                i = j;
+                continue;
+            }
+        }
         out.push(c);
         i += 1;
+    }
     String::from_utf8(out).unwrap_or_else(|_| html.to_string())
+}
+/// Bytes allowed in a username (matches `model::validate_name`'s character set).
+fn is_username_byte(b: u8) -> bool {
+    b.is_ascii_alphanumeric() || b == b'-' || b == b'_'
+}
+/// Extract `@username` mentions from raw markdown text, deduplicated. Used to
+/// create mention notifications (over-matching inside code is acceptable).
+#[must_use]
+pub fn mentions(text: &str) -> Vec<String> {
+    let bytes = text.as_bytes();
+    let mut out: Vec<String> = Vec::new();
+    let mut i = 0;
+    while i < bytes.len() {
+        let boundary = i == 0 || !bytes[i - 1].is_ascii_alphanumeric();
+        if boundary && bytes[i] == b'@' {
+            let mut j = i + 1;
+            while j < bytes.len() && is_username_byte(bytes[j]) {
+                j += 1;
+            }
+            if j > i + 1 {
+                let name = text[i + 1..j].to_string();
+                if !out.contains(&name) {
+                    out.push(name);
+                }
+                i = j;
+                continue;
+            }
+        }
+        i += 1;
+    }
+    out
+}
 /// The ammonia sanitizer, extended to allow the highlighter's `<span class="hl-*">`
 /// runs (and only those classes) inside code blocks.
 fn sanitizer() -> ammonia::Builder<'static> {
+    }
     #[test]
+    fn linkifies_mentions_but_not_emails() {
+        let html = render_with_refs("hi @alice, mail me@example.com", "/o/r").into_string();
+        assert!(
+            html.contains(r#"<a class="user-ref" href="/alice">@alice</a>"#),
+            "@alice links: {html}"
+        );
+        // The email's `@example` is not a mention (local part is alphanumeric).
+        assert!(
+            !html.contains(r#"href="/example""#),
+            "email untouched: {html}"
+        );
+    }
+    #[test]
+    fn extracts_mentions() {
+        assert_eq!(mentions("hey @bob and @carol-x!"), vec!["bob", "carol-x"]);
+        assert_eq!(mentions("foo@bar.com only"), Vec::<String>::new());
+        // Deduplicated.
+        assert_eq!(mentions("@a @a @b"), vec!["a", "b"]);
+    }
+    #[test]
     fn highlights_fenced_code() {
         let html = render("```rust\nfn main() {}\n```").into_string();
         // A keyword span survives sanitizing with its highlight class.

+// 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 notifications inbox: list, open (mark read + go to the target), and
+//! mark-all-read.
+use axum::Form;
+use axum::extract::{Path, State};
+use axum::http::{HeaderMap, Uri};
+use axum::response::{IntoResponse, Redirect, Response};
+use axum_extra::extract::cookie::CookieJar;
+use maud::html;
+use serde::Deserialize;
+use crate::error::{AppError, AppResult};
+use crate::icons::{Icon, icon};
+use crate::layout::page;
+use crate::pages::build_chrome;
+use crate::session::{RequireUser, verify_csrf};
+use crate::{AppState, now_ms};
+/// A resolved notification ready to render.
+struct Row {
+    id: String,
+    actor: String,
+    unread: bool,
+    created_at: i64,
+    /// The `owner/repo#n title` label of the target.
+    label: String,
+    kind: String,
+}
+/// `GET /notifications` — the viewer's inbox.
+pub async fn list(
+    State(state): State<AppState>,
+    RequireUser(user): RequireUser,
+    jar: CookieJar,
+    uri: Uri,
+) -> AppResult<Response> {
+    let raw = state.store.list_notifications(&user.id, 100).await?;
+    let mut rows = Vec::with_capacity(raw.len());
+    for n in &raw {
+        let actor = match &n.actor_id {
+            Some(id) => state
+                .store
+                .user_by_id(id)
+                .await
+                .ok()
+                .flatten()
+                .map_or_else(|| "someone".to_string(), |u| u.username),
+            None => "someone".to_string(),
+        };
+        let (_, label) = resolve_target(&state, n.issue_id.as_deref()).await;
+        rows.push(Row {
+            id: n.id.clone(),
+            actor,
+            unread: n.read_at.is_none(),
+            created_at: n.created_at,
+            label,
+            kind: n.kind.clone(),
+        });
+    }
+    let unread = rows.iter().filter(|r| r.unread).count();
+    let (jar, chrome) = build_chrome(&state, jar, Some(user), uri.path().to_string());
+    let now = now_ms();
+    let body = html! {
+        div class="notif-page" {
+            div class="notif-head" {
+                h1 { "Notifications" }
+                @if unread > 0 {
+                    form method="post" action="/notifications/read-all" {
+                        input type="hidden" name="_csrf" value=(chrome.csrf);
+                        button class="btn" type="submit" { "Mark all read" }
+                    }
+                }
+            }
+            @if rows.is_empty() {
+                div class="card" { p class="muted" { "You have no notifications." } }
+            } @else {
+                ul class="notif-list card" {
+                    @for r in &rows {
+                        li class=(if r.unread { "notif-row unread" } else { "notif-row" }) {
+                            span class="notif-icon" { (icon(notif_icon(&r.kind))) }
+                            a class="notif-body" href=(format!("/notifications/{}", r.id)) {
+                                span class="notif-text" {
+                                    strong { "@" (r.actor) } " " (verb(&r.kind)) " "
+                                    @if r.label.is_empty() { "a conversation" } @else { (r.label) }
+                                }
+                                span class="notif-time muted" { (crate::activity::fmt_relative(r.created_at, now)) }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    };
+    Ok((jar, page(&chrome, "Notifications", body)).into_response())
+}
+/// `GET /notifications/{id}` — mark one read and go to its target.
+pub async fn open(
+    State(state): State<AppState>,
+    RequireUser(user): RequireUser,
+    Path(id): Path<String>,
+) -> AppResult<Response> {
+    let notif = state
+        .store
+        .list_notifications(&user.id, 500)
+        .await?
+        .into_iter()
+        .find(|n| n.id == id);
+    let Some(notif) = notif else {
+        return Err(AppError::NotFound);
+    };
+    let _ = state.store.mark_notification_read(&id, &user.id).await;
+    let (href, _) = resolve_target(&state, notif.issue_id.as_deref()).await;
+    Ok(Redirect::to(&href.unwrap_or_else(|| "/notifications".to_string())).into_response())
+}
+/// The CSRF-only mark-all form.
+#[derive(Debug, Deserialize)]
+pub struct BareForm {
+    #[serde(rename = "_csrf")]
+    csrf: String,
+}
+/// `POST /notifications/read-all` — mark every notification read.
+pub async fn read_all(
+    State(state): State<AppState>,
+    RequireUser(user): RequireUser,
+    jar: CookieJar,
+    headers: HeaderMap,
+    Form(form): Form<BareForm>,
+) -> Response {
+    if verify_csrf(&jar, &headers, Some(&form.csrf)).is_err() {
+        return AppError::Forbidden.into_response();
+    }
+    let _ = state.store.mark_all_notifications_read(&user.id).await;
+    Redirect::to("/notifications").into_response()
+}
+/// Resolve a notification's issue to its `(url, "owner/repo#n title")` label.
+async fn resolve_target(state: &AppState, issue_id: Option<&str>) -> (Option<String>, String) {
+    let Some(issue_id) = issue_id else {
+        return (None, String::new());
+    };
+    let Ok(Some(issue)) = state.store.issue_by_id(issue_id).await else {
+        return (None, String::new());
+    };
+    let Ok(Some(repo)) = state.store.repo_by_id(&issue.repo_id).await else {
+        return (None, String::new());
+    };
+    let owner = state
+        .store
+        .user_by_id(&repo.owner_id)
+        .await
+        .ok()
+        .flatten()
+        .map_or_else(|| repo.owner_id.clone(), |u| u.username);
+    let seg = if issue.is_pull { "pulls" } else { "issues" };
+    let href = format!("/{owner}/{}/-/{seg}/{}", repo.path, issue.number);
+    let label = format!("{owner}/{}#{}: {}", repo.path, issue.number, issue.title);
+    (Some(href), label)
+}
+/// The verb shown for a notification kind.
+fn verb(kind: &str) -> &'static str {
+    match kind {
+        "assign" => "assigned you to",
+        _ => "mentioned you in",
+    }
+}
+/// The icon for a notification kind.
+fn notif_icon(kind: &str) -> Icon {
+    match kind {
+        "assign" => Icon::User,
+        _ => Icon::Issue,
+    }
+}