hanna/fabrica

feat(web): Forgejo-style explore with repositories and users tabs

128d4be · hanna committed on 2026-07-25

Rebuild /explore with a centered sub-nav (Repositories / Users), a search
box, and the listing below. Add /explore/users listing the user directory
(avatar, name, join date) and server-side search filtering on both tabs; the
anonymous landing reuses the repositories tab.

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

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

assets/base.css +29 −0

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

crates/web/src/pages.rs +114 −20

crates/web/src/repo.rs +1 −1

crates/web/src/tests.rs +13 −2

   font-size: 0.82em;
+}
+/* User directory rows (Explore → Users). */
+.user-row {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  color: var(--fb-fg);
+}
+.user-row:hover {
+  background: var(--fb-bg-inset);
+  text-decoration: none;
+}
+.user-row .avatar {
+  width: 2.5rem;
+  height: 2.5rem;
+  flex: none;
+}
+.user-row-main {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+.user-row-name {
+  font-weight: 600;
+}
+.user-row-meta {
+  font-size: 0.85em;
+}
 /* ---- Avatars & profile header ---- */
 .avatar {
   border-radius: 6px;

         .nest_service("/api/v1", api)
         .route("/", get(pages::home))
         .route("/explore", get(pages::explore))
+        .route("/explore/users", get(pages::explore_users))
         .route("/login", get(pages::login_form).post(pages::login_submit))
         .route("/logout", post(pages::logout))
         .route(

 use crate::error::{AppError, AppResult};
 use crate::icons::{Icon, icon};
 use crate::layout::{Chrome, page};
-use crate::repo::{RepoEntry, repo_card};
+use crate::repo::{self, RepoEntry, repo_card};
 use crate::session::{
     MaybeUser, RequireUser, THEME_COOKIE, clear_cookie, ensure_csrf, session_cookie, verify_csrf,
 };
         let body = dashboard_body(&state, &u).await?;
         Ok((jar, page(&chrome, "Dashboard", body)).into_response())
     } else {
-        let body = explore_body(&state).await?;
+        let body = explore_repos_body(&state, "").await?;
         Ok((jar, page(&chrome, "Explore", body)).into_response())
+    }
+}
     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, uri.path().to_string());
-    let body = explore_body(&state).await?;
+    let body = explore_repos_body(&state, &lq.q.unwrap_or_default()).await?;
     Ok((jar, page(&chrome, "Explore", body)).into_response())
+}
-/// The dashboard: a greeting and the viewer's own repositories.
+/// `GET /explore/users` — every user, for anyone.
-async fn dashboard_body(state: &AppState, user: &User) -> AppResult<Markup> {
+pub async fn explore_users(
-    let mine = state.store.repos_by_owner(&user.id).await?;
+    State(state): State<AppState>,
-    let entries: Vec<RepoEntry> = mine
+    MaybeUser(user): MaybeUser,
-        .iter()
+    jar: CookieJar,
-        .map(|r| RepoEntry::owned(&user.username, r))
+    uri: Uri,
-        .collect();
+    axum::extract::Query(lq): axum::extract::Query<repo::ListQuery>,
-    Ok(html! {
+) -> AppResult<Response> {
-        h1 { "Welcome, " (user.display_name.clone().unwrap_or_else(|| user.username.clone())) }
+    let (jar, chrome) = build_chrome(&state, jar, user, uri.path().to_string());
-        (repo_card("Your repositories", "You have no repositories yet.", &entries))
+    let body = explore_users_body(&state, &lq.q.unwrap_or_default()).await?;
-    })
+    Ok((jar, page(&chrome, "Explore", body)).into_response())
+}
+/// The Explore sub-navigation (Repositories / Users tabs).
+fn explore_subnav(active: &str) -> Markup {
+    html! {
+        nav class="subnav" aria-label="Explore" {
+            a href="/explore" aria-current=[(active == "repos").then_some("page")] {
+                (icon(Icon::Box)) span { "Repositories" }
+            }
+            a href="/explore/users" aria-current=[(active == "users").then_some("page")] {
+                (icon(Icon::User)) span { "Users" }
+            }
+        }
+    }
+}
-/// The Explore listing: every public repository, labelled `owner/path`.
+/// The Explore repositories tab: sub-nav, a search box, and the public repos.
-async fn explore_body(state: &AppState) -> AppResult<Markup> {
+async fn explore_repos_body(state: &AppState, q: &str) -> AppResult<Markup> {
+    let needle = q.trim().to_lowercase();
     let all = state.store.list_repos().await?;
     let public: Vec<_> = all.into_iter().filter(|r| !r.is_private).collect();
-    // Resolve owner names once for the cross-owner labels/links.
+    // Resolve owner names once for the cross-owner labels/links and search.
     let mut owners: HashMap<String, String> = HashMap::new();
     for repo in &public {
         if !owners.contains_key(&repo.owner_id) {
+    }
     let entries: Vec<RepoEntry> = public
         .iter()
-        .map(|r| {
+        .filter_map(|r| {
             let owner = owners.get(&r.owner_id).map_or("", String::as_str);
-            RepoEntry::global(owner, r)
+            let label = format!("{owner}/{}", r.path);
+            (needle.is_empty() || label.to_lowercase().contains(&needle))
+                .then(|| RepoEntry::global(owner, r))
         })
         .collect();
     Ok(html! {
-        h1 { "Explore" }
+        (explore_subnav("repos"))
+        form class="search-row" method="get" action="/explore" {
+            input type="search" name="q" value=(q) placeholder="Search repositories…"
+                  aria-label="Search repositories";
+            button class="btn btn-primary" type="submit" { "Search" }
+        }
         (repo_card("Public repositories", "No public repositories.", &entries))
     })
+}
+/// The Explore users tab: sub-nav, a search box, and the user directory.
+async fn explore_users_body(state: &AppState, q: &str) -> AppResult<Markup> {
+    let needle = q.trim().to_lowercase();
+    let users: Vec<User> = state
+        .store
+        .list_users()
+        .await?
+        .into_iter()
+        .filter(|u| u.disabled_at.is_none())
+        .filter(|u| {
+            needle.is_empty()
+                || u.username.to_lowercase().contains(&needle)
+                || u.display_name
+                    .as_deref()
+                    .is_some_and(|d| d.to_lowercase().contains(&needle))
+        })
+        .collect();
+    Ok(html! {
+        (explore_subnav("users"))
+        form class="search-row" method="get" action="/explore/users" {
+            input type="search" name="q" value=(q) placeholder="Search users…"
+                  aria-label="Search users";
+            button class="btn btn-primary" type="submit" { "Search" }
+        }
+        (user_card(&users))
+    })
+}
+/// Render a directory of users as a listing card (avatar, name, join date).
+fn user_card(users: &[User]) -> Markup {
+    html! {
+        section class="listing" {
+            h2 { "Users" }
+            @if users.is_empty() {
+                div class="card" { p class="muted" { "No users." } }
+            } @else {
+                ul class="repo-list card" {
+                    @for u in users {
+                        li {
+                            a class="user-row" href={ "/" (u.username) } {
+                                img class="avatar" src={ "/avatar/" (u.username) } alt="";
+                                span class="user-row-main" {
+                                    span class="user-row-name" {
+                                        (u.display_name.as_deref().unwrap_or(&u.username))
+                                    }
+                                    span class="user-row-meta muted" {
+                                        "@" (u.username) " · Joined on " (repo::fmt_joined(u.created_at))
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+/// The dashboard: a greeting and the viewer's own repositories.
+async fn dashboard_body(state: &AppState, user: &User) -> AppResult<Markup> {
+    let mine = state.store.repos_by_owner(&user.id).await?;
+    let entries: Vec<RepoEntry> = mine
+        .iter()
+        .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))
+    })
+}
 /// Sign-in form fields.
 #[derive(Debug, Deserialize)]
 pub struct LoginForm {

 /// Format an epoch-millisecond timestamp as a human join date, e.g.
 /// `Jul 11, 2026`.
-fn fmt_joined(ms: i64) -> String {
+pub(crate) fn fmt_joined(ms: i64) -> String {
     let secs = ms.div_euclid(1000);
     match time::OffsetDateTime::from_unix_timestamp(secs) {
         Ok(dt) => {

     let html = body_string(res).await;
     assert!(html.contains("Public repositories"), "explore heading");
     assert!(html.contains("ada/open"), "public repo listed");
-    // The anonymous landing must not offer an in-content sign-in button.
+    // The Explore sub-nav offers the repositories and users tabs.
-    assert!(!html.contains("btn-primary"), "no content sign-in button");
+    assert!(html.contains("/explore/users"), "users tab present");
+}
+#[tokio::test]
+async fn explore_users_lists_the_directory() {
+    let (_state, app) = app().await;
+    let res = app.oneshot(get("/explore/users")).await.unwrap();
+    assert_eq!(res.status(), StatusCode::OK);
+    let html = body_string(res).await;
+    assert!(html.contains("Users"), "users heading");
+    assert!(html.contains("Ada"), "user display name listed");
+    assert!(html.contains("/avatar/ada"), "user avatar shown");
+}
 #[tokio::test]