hanna/fabrica

feat(web): split dashboard and explore, restyle repo listings

1d75fb4 · hanna committed on 2026-07-25

Give `/` a signed-in dashboard (your repositories) and anonymous visitors
the public Explore landing with no in-content sign-in button; add `/explore`
for the public listing at any time. Replace the plain repo lists with a
titled card of bordered rows — bold name, package icon, and a muted
`visibility · default: branch` subtitle — matching the requested reference
design, and reuse it for user and group pages.

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

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

assets/base.css +42 −0

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

crates/web/src/pages.rs +47 −53

crates/web/src/repo.rs +74 −17

+}
 /* ---- Repo/list rows ---- */
+.listing {
+  margin-bottom: 1.5rem;
+}
 .repo-list {
   list-style: none;
   margin: 0;
   font-size: 1.05em;
+}
+/* Listing card: bordered rows inside a single card. */
+.repo-list.card {
+  padding: 0;
+  overflow: hidden;
+}
+.repo-list.card li {
+  padding: 0;
+  border-bottom: 1px solid var(--fb-border);
+}
+.repo-list.card li:last-child {
+  border-bottom: none;
+}
+.repo-row {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+  padding: 0.75rem 1rem;
+  color: var(--fb-fg);
+}
+.repo-row:hover {
+  background: var(--fb-bg-inset);
+  text-decoration: none;
+}
+.repo-row-name {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  font-weight: 600;
+}
+.repo-row-name .icon {
+  color: var(--fb-fg-muted);
+}
+.repo-row-desc {
+  font-size: 0.9em;
+}
+.repo-row-meta {
+  font-size: 0.82em;
+}
 /* ---- Tables ---- */
 table.list {
   width: 100%;

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

 use crate::assets::Scheme;
 use crate::error::{AppError, AppResult};
 use crate::layout::{Chrome, page};
+use crate::repo::{RepoEntry, repo_card};
 use crate::session::{
     MaybeUser, RequireUser, THEME_COOKIE, clear_cookie, ensure_csrf, session_cookie, verify_csrf,
 };
     (jar, chrome)
+}
-/// `GET /` — your repositories and the public ones.
+/// `GET /` — the signed-in viewer's dashboard, or the public Explore landing for
+/// anonymous visitors.
 pub async fn home(
     State(state): State<AppState>,
     MaybeUser(user): MaybeUser,
     uri: Uri,
 ) -> AppResult<Response> {
     let (jar, chrome) = build_chrome(&state, jar, user.clone(), uri.path().to_string());
-    let body = home_body(&state, user.as_ref()).await?;
+    if let Some(u) = user {
-    Ok((jar, page(&chrome, "Home", body)).into_response())
+        let body = dashboard_body(&state, &u).await?;
+        Ok((jar, page(&chrome, "Dashboard", body)).into_response())
+    } else {
+        let body = explore_body(&state).await?;
+        Ok((jar, page(&chrome, "Explore", body)).into_response())
+    }
+}
-/// Render the home content: the viewer's own repos, plus public repos.
+/// `GET /explore` — every public repository, for anyone.
-async fn home_body(state: &AppState, user: Option<&User>) -> AppResult<Markup> {
+pub async fn explore(
-    let mine = match user {
+    State(state): State<AppState>,
-        Some(u) => state.store.repos_by_owner(&u.id).await?,
+    MaybeUser(user): MaybeUser,
-        None => Vec::new(),
+    jar: CookieJar,
-    };
+    uri: Uri,
-    // Public repos, with owner names resolved for their links.
+) -> AppResult<Response> {
+    let (jar, chrome) = build_chrome(&state, jar, user, uri.path().to_string());
+    let body = explore_body(&state).await?;
+    Ok((jar, page(&chrome, "Explore", body)).into_response())
+}
+/// 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))
+    })
+}
+/// The Explore listing: every public repository, labelled `owner/path`.
+async fn explore_body(state: &AppState) -> AppResult<Markup> {
     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.
     let mut owners: HashMap<String, String> = HashMap::new();
     for repo in &public {
         if !owners.contains_key(&repo.owner_id) {
             owners.insert(repo.owner_id.clone(), name);
+        }
+    }
+    let entries: Vec<RepoEntry> = public
+        .iter()
+        .map(|r| {
+            let owner = owners.get(&r.owner_id).map_or("", String::as_str);
+            RepoEntry::global(owner, r)
+        })
+        .collect();
     Ok(html! {
-        @if let Some(u) = user {
+        h1 { "Explore" }
-            h1 { "Welcome, " (u.display_name.clone().unwrap_or_else(|| u.username.clone())) }
+        (repo_card("Public repositories", "No public repositories.", &entries))
-            section {
-                h2 { "Your repositories" }
-                @if mine.is_empty() {
-                    p class="muted" { "You have no repositories yet." }
-                } @else {
-                    ul class="repo-list" {
-                        @for repo in &mine {
-                            li {
-                                div class="name" {
-                                    a href={ "/" (u.username) "/" (repo.path) } { (repo.path) }
-                                    @if repo.is_private { " " span class="badge badge-private" { "private" } }
-                                }
-                                @if let Some(desc) = &repo.description { p class="muted" { (desc) } }
-                            }
-                        }
-                    }
-                }
-            }
-        } @else {
-            h1 { "Welcome to " (state.config.instance.name) }
-            p { a class="btn btn-primary" href="/login" { "Sign in" } }
-        }
-        section {
-            h2 { "Public repositories" }
-            @if public.is_empty() {
-                p class="muted" { "No public repositories." }
-            } @else {
-                ul class="repo-list" {
-                    @for repo in &public {
-                        @let owner = owners.get(&repo.owner_id).cloned().unwrap_or_default();
-                        li {
-                            div class="name" {
-                                a href={ "/" (owner) "/" (repo.path) } { (owner) "/" (repo.path) }
-                            }
-                            @if let Some(desc) = &repo.description { p class="muted" { (desc) } }
-                        }
-                    }
-                }
-            }
-        }
     })
+}

+                }
+            }
+        }
-        section {
+        (owned_repo_card(&owner.username, &repos))
-            h2 { "Repositories" }
-            (repo_list(&owner.username, &repos))
-        }
     };
     Ok((jar, page(&chrome, &owner.username, body)).into_response())
+}
+                }
+            }
+        }
-        section { h2 { "Repositories" } (repo_list(&owner.username, &repos)) }
+        (owned_repo_card(&owner.username, &repos))
     };
     let (jar, chrome) = build_chrome(state, jar, viewer, uri.path().to_string());
     let title = format!("{}/{}", owner.username, group.path);
     Ok(out)
+}
-/// Render a list of repositories as links.
+/// One row in a repository listing card.
-fn repo_list(owner: &str, repos: &[Repo]) -> Markup {
+pub(crate) struct RepoEntry {
+    /// Link target.
+    pub(crate) href: String,
+    /// Display label (a bare repo path, or `owner/path` in cross-owner listings).
+    pub(crate) label: String,
+    /// Whether the repo is private (drives the badge and visibility subtitle).
+    pub(crate) private: bool,
+    /// The default branch, shown in the subtitle.
+    pub(crate) default_branch: String,
+    /// Optional one-line description, shown under the name when present.
+    pub(crate) description: Option<String>,
+}
+impl RepoEntry {
+    /// Build an entry for a repo shown on its owner's own page (bare-path label).
+    pub(crate) fn owned(owner: &str, repo: &Repo) -> Self {
+        Self {
+            href: format!("/{owner}/{}", repo.path),
+            label: repo.path.clone(),
+            private: repo.is_private,
+            default_branch: repo.default_branch.clone(),
+            description: repo.description.clone(),
+        }
+    }
+    /// Build an entry for a cross-owner listing (e.g. Explore), labelled
+    /// `owner/path`.
+    pub(crate) fn global(owner: &str, repo: &Repo) -> Self {
+        Self {
+            href: format!("/{owner}/{}", repo.path),
+            label: format!("{owner}/{}", repo.path),
+            private: repo.is_private,
+            default_branch: repo.default_branch.clone(),
+            description: repo.description.clone(),
+        }
+    }
+}
+/// Render a titled card of repository rows in the reference listing style: a
+/// card headed by `title`, one bordered row per repo with a bold name and a
+/// muted `visibility · default: branch` subtitle.
+pub(crate) fn repo_card(title: &str, empty: &str, entries: &[RepoEntry]) -> Markup {
     html! {
-        @if repos.is_empty() {
+        section class="listing" {
-            p class="muted" { "No repositories." }
+            h2 { (title) }
-        } @else {
+            @if entries.is_empty() {
-            ul class="repo-list" {
+                div class="card" { p class="muted" { (empty) } }
-                @for repo in repos {
+            } @else {
-                    li {
+                ul class="repo-list card" {
-                        div class="name" {
+                    @for e in entries {
-                            a href={ "/" (owner) "/" (repo.path) } { (repo.path) }
+                        li {
-                            @if repo.is_private { " " span class="badge badge-private" { "private" } }
+                            a class="repo-row" href=(e.href) {
+                                span class="repo-row-name" {
+                                    (icon(Icon::Box)) span { (e.label) }
+                                    @if e.private {
+                                        span class="badge badge-private" { "private" }
+                                    }
+                                }
+                                @if let Some(desc) = &e.description {
+                                    span class="repo-row-desc muted" { (desc) }
+                                }
+                                span class="repo-row-meta muted" {
+                                    (if e.private { "private" } else { "public" })
+                                    " · default: " (e.default_branch)
+                                }
+                            }
+                        }
-                        @if let Some(desc) = &repo.description { p class="muted" { (desc) } }
+                    }
+                }
+            }
+    }
+}
+/// Render an owner's repositories as a listing card.
+fn owned_repo_card(owner: &str, repos: &[Repo]) -> Markup {
+    let entries: Vec<RepoEntry> = repos.iter().map(|r| RepoEntry::owned(owner, r)).collect();
+    repo_card("Repositories", "No repositories.", &entries)
+}
 /// The repo sub-header: slug, tabs, and clone URLs.
 fn repo_header(state: &AppState, ctx: &RepoCtx, active: Tab, rev: &str) -> Markup {
     let base = format!("/{}/{}", ctx.owner.username, ctx.repo.path);