hanna/fabrica

feat(web): followers — follow button, counts, and lists

9a8ec36 · hanna committed on 2026-07-26

The profile sidebar now shows "N followers · N following" (linking to
those lists) and a Follow/Unfollow button for signed-in visitors on other
people's profiles. Two new profile views, ?tab=followers and
?tab=following, render the users as follow-cards with per-row
Follow/Unfollow. A /user-follow/{username} link toggles the relationship.

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

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

assets/base.css +58 −0

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

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

crates/web/src/repo.rs +131 −3

   margin: 0;
   text-align: center;
+}
+/* Follower/following counts and the follow button in the profile sidebar. */
+.profile-follow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.35rem;
+  margin: 0.5rem 0 0;
+  font-size: 0.9em;
+}
+.profile-follow a {
+  color: inherit;
+}
+.profile-follow a:hover strong {
+  color: var(--fb-accent);
+}
+.profile-follow-btn {
+  display: block;
+  text-align: center;
+  margin: 0.75rem 0 0.25rem;
+}
+/* A list of users (followers/following) as follow-cards. */
+.user-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.user-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 0.85rem 1rem;
+  border-bottom: 1px solid var(--fb-border);
+}
+.user-row:last-child {
+  border-bottom: none;
+}
+.user-row .avatar {
+  width: 3rem;
+  height: 3rem;
+  flex: none;
+}
+.user-row-body {
+  flex: 1;
+  min-width: 0;
+}
+.user-row-name {
+  font-weight: 600;
+  color: var(--fb-fg);
+}
+.user-row-bio,
+.user-row-loc {
+  margin: 0.2rem 0 0;
+  font-size: 0.9em;
+}
+.user-row > .btn {
+  flex: none;
+  align-self: center;
+}
 .profile-pronouns {
   padding: 0.05rem 0.5rem;
   border: 1px solid var(--fb-border);

     Mirror,
     GitFork,
     Bookmark,
+    Users,
     Github,
     Mastodon,
+}
+            }
             // Lucide "bookmark".
             Icon::Bookmark => r#"<path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"/>"#,
+            // Lucide "users": follower/following counts.
+            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"/>"#
+            }
             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"/>"#
+            }

             get(repo::fork_confirm).post(repo::fork_create),
+        )
         .route("/repo-bookmark/{id}", get(repo::bookmark_toggle))
+        .route("/user-follow/{username}", get(repo::follow_toggle))
         // 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))

 /// `GET /{owner}` — the user's profile: an info sidebar on the left, their groups
 /// and repositories (filterable) on the right.
+#[allow(clippy::too_many_lines)] // A flat per-tab dispatcher; splitting hurts readability.
 pub async fn user_page(
     State(state): State<AppState>,
     MaybeUser(viewer): MaybeUser,
     let tab = match lq.tab.as_deref() {
         Some("groups") => ProfileTab::Groups,
         Some("bookmarks") => ProfileTab::Bookmarks,
+        Some("followers") => ProfileTab::Followers,
+        Some("following") => ProfileTab::Following,
         _ => ProfileTab::Repos,
     };
     let q = lq.q.unwrap_or_default();
             let entries = resolve_bookmark_labels(&state, &visible, entries).await;
             html! { (repo_card("", "No bookmarks yet.", &entries)) }
+        }
+        ProfileTab::Followers => {
+            let users = state.store.followers(&owner.id).await?;
+            user_list(&state, &users, viewer.as_ref(), "No followers yet.").await?
+        }
+        ProfileTab::Following => {
+            let users = state.store.following(&owner.id).await?;
+            user_list(&state, &users, viewer.as_ref(), "Not following anyone yet.").await?
+        }
+    };
+    let followers = state.store.count_followers(&owner.id).await?;
+    let following = state.store.count_following(&owner.id).await?;
+    let follow = match &viewer {
+        Some(v) if v.id != owner.id => Some(
+            state
+                .store
+                .is_following(&v.id, &owner.id)
+                .await
+                .unwrap_or(false),
+        ),
+        _ => None,
     };
     let (jar, chrome) = build_chrome(&state, jar, viewer.clone(), uri.path().to_string());
     };
     let body = html! {
         div class="profile-layout" {
-            aside class="profile-sidebar" { (profile_sidebar(&owner)) }
+            aside class="profile-sidebar" { (profile_sidebar(&owner, followers, following, follow)) }
             div class="profile-main" {
                 nav class="tabs profile-tabs" {
                     (ptab(ProfileTab::Repos, "repos", "Repositories"))
     Ok((jar, page(&chrome, &owner.username, body)).into_response())
+}
-/// The three tabs on a user's profile.
+/// The tabs on a user's profile. Followers/Following are reached from the
+/// sidebar counts rather than the main tab strip.
 #[derive(Debug, Clone, Copy, PartialEq, Eq)]
 enum ProfileTab {
     Repos,
     Groups,
     Bookmarks,
+    Followers,
+    Following,
+}
+/// Render a list of users as follow-cards (avatar, name, bio, location, and a
+/// Follow/Unfollow button for signed-in viewers looking at other people).
+async fn user_list(
+    state: &AppState,
+    users: &[User],
+    viewer: Option<&User>,
+    empty: &str,
+) -> AppResult<Markup> {
+    if users.is_empty() {
+        return Ok(html! { div class="card" { p class="muted" { (empty) } } });
+    }
+    // Precompute the viewer's follow relationship to each listed user.
+    let mut following: std::collections::HashSet<String> = std::collections::HashSet::new();
+    if let Some(v) = viewer {
+        for u in users {
+            if u.id != v.id
+                && state
+                    .store
+                    .is_following(&v.id, &u.id)
+                    .await
+                    .unwrap_or(false)
+            {
+                following.insert(u.id.clone());
+            }
+        }
+    }
+    Ok(html! {
+        ul class="user-list card" {
+            @for u in users {
+                @let name = u.display_name.as_deref().unwrap_or(&u.username);
+                li class="user-row" {
+                    img class="avatar" src={ "/avatar/" (u.username) } alt="";
+                    div class="user-row-body" {
+                        div class="user-row-title" {
+                            a class="user-row-name" href={ "/" (u.username) } { (name) }
+                            " " span class="muted" { (u.username) }
+                        }
+                        @if let Some(bio) = non_empty(u.bio.as_ref()) {
+                            p class="user-row-bio muted" { (bio) }
+                        }
+                        @if let Some(loc) = non_empty(u.location.as_ref()) {
+                            p class="user-row-loc muted" { (icon(Icon::MapPin)) " " (loc) }
+                        }
+                    }
+                    @if let Some(v) = viewer {
+                        @if v.id != u.id {
+                            a class=(if following.contains(&u.id) { "btn" } else { "btn btn-primary" })
+                              href={ "/user-follow/" (u.username) } {
+                                (if following.contains(&u.id) { "Unfollow" } else { "Follow" })
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    })
+}
 /// Filter an arbitrary repo list to those `viewer` may read (for bookmarks).
     Ok(Redirect::to(&format!("/{owner}/{}", repo.path)).into_response())
+}
+/// `GET /user-follow/{username}` — toggle following a user, then return to their
+/// profile. (A GET toggle, matching the bookmark link.)
+pub async fn follow_toggle(
+    State(state): State<AppState>,
+    MaybeUser(viewer): MaybeUser,
+    Path(username): Path<String>,
+) -> AppResult<Response> {
+    let Some(me) = viewer else {
+        return Ok(Redirect::to("/login").into_response());
+    };
+    let Some(target) = state.store.user_by_username(&username).await? else {
+        return Err(AppError::NotFound);
+    };
+    if target.id != me.id {
+        if state.store.is_following(&me.id, &target.id).await? {
+            state.store.unfollow(&me.id, &target.id).await?;
+        } else {
+            state.store.follow(&me.id, &target.id).await?;
+        }
+    }
+    Ok(Redirect::to(&format!("/{}", target.username)).into_response())
+}
 /// `GET /repo-fork/{id}` — confirm forking a readable repo to your account.
 pub async fn fork_confirm(
     State(state): State<AppState>,
 /// The profile sidebar card: avatar, name, handle, pronouns, markdown bio,
 /// location/social links, and the join date.
-fn profile_sidebar(owner: &User) -> Markup {
+fn profile_sidebar(owner: &User, followers: i64, following: i64, follow: Option<bool>) -> Markup {
     let name = owner.display_name.as_deref().unwrap_or(&owner.username);
+    let user = &owner.username;
     html! {
         div class="card profile-card" {
             img class="avatar avatar-xl" src={ "/avatar/" (owner.username) } alt="";
                     " · " (pronouns)
+                }
+            }
+            p class="profile-follow muted" {
+                (icon(Icon::Users)) " "
+                a href={ "/" (user) "?tab=followers" } {
+                    strong { (followers) } " follower" @if followers != 1 { "s" }
+                }
+                " · "
+                a href={ "/" (user) "?tab=following" } {
+                    strong { (following) } " following"
+                }
+            }
+            @match follow {
+                Some(true) => {
+                    a class="btn profile-follow-btn" href={ "/user-follow/" (user) } { "Unfollow" }
+                }
+                Some(false) => {
+                    a class="btn btn-primary profile-follow-btn" href={ "/user-follow/" (user) } { "Follow" }
+                }
+                None => {}
+            }
             @if let Some(bio) = non_empty(owner.bio.as_ref()) {
                 div class="profile-bio markdown" { (markdown::render(bio)) }
+            }