hanna/fabrica

feat(web): bookmark button, navbar icon, and profile tabs

844ac86 · hanna committed on 2026-07-26

- A Bookmark toggle in the repo header (signed-in viewers) and a
  bookmarks icon in the navbar linking to your bookmarks tab.
- The profile page is now a left sidebar plus three tabs on the right —
  Repositories, Groups, and Bookmarks. The bookmarks tab lists the
  repositories you have starred, filtered to those the viewer can read.

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

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

assets/base.css +12 −0

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

crates/web/src/layout.rs +3 −1

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

crates/web/src/repo.rs +171 −24

@@ @@ -2038,13 +2038,23 @@ pre.code { @@
+}
 /* Tab strips (repo sub-nav, explore sub-nav): active-pill style. */
 .repo-tabs,
 .profile-tabs,
 .subnav {
   display: flex;
   gap: 0.5rem;
   flex-wrap: wrap;
   margin: 0.75rem 0 1.25rem;
+}
 .profile-tabs {
   margin-top: 0;
+}
 /* Active toggle button (e.g. a bookmarked repo). */
 .btn-active {
   color: var(--fb-accent);
   border-color: var(--fb-accent);
+}
 .repo-tabs a,
 .profile-tabs a,
 .subnav a {
   display: inline-flex;
   align-items: center;
@@ @@ -2054,12 +2064,14 @@ pre.code { @@
   color: var(--fb-fg-muted);
+}
 .repo-tabs a:hover,
 .profile-tabs a:hover,
 .subnav a:hover {
   color: var(--fb-fg);
   background: var(--fb-bg-inset);
   text-decoration: none;
+}
 .repo-tabs a[aria-current="page"],
 .profile-tabs a[aria-current="page"],
 .subnav a[aria-current="page"] {
   color: var(--fb-fg);
   background: var(--fb-bg-inset);

@@ @@ -41,6 +41,7 @@ pub enum Icon { @@
     Download,
     Mirror,
     GitFork,
     Bookmark,
     Github,
     Mastodon,
+}
@@ @@ -128,6 +129,8 @@ impl Icon { @@
             Icon::GitFork => {
                 r#"<circle cx="12" cy="18" r="3"/><circle cx="6" cy="6" r="3"/><circle cx="18" cy="6" r="3"/><path d="M18 9v2c0 .6-.4 1-1 1H7c-.6 0-1-.4-1-1V9"/><path d="M12 12v3"/>"#
+            }
             // 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"/>"#,
             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"/>"#
+            }

@@ @@ -74,8 +74,10 @@ fn topbar(chrome: &Chrome) -> Markup { @@
             button class="icon-btn" type="button" data-drawer-toggle aria-label="Menu"
                    aria-controls="drawer" aria-expanded="false" { (icon(Icon::PanelLeft)) }
             span class="slug" { a href="/" { (chrome.instance_name) } }
             @if chrome.user.is_some() {
             @if let Some(user) = &chrome.user {
                 (create_menu(chrome))
                 a class="icon-btn" href={ "/" (user.username) "?tab=bookmarks" }
                   aria-label="Bookmarks" title="Bookmarks" { (icon(Icon::Bookmark)) }
+            }
             form class="topbar-search" method="get" action="/search" role="search" {
                 input type="search" name="q" placeholder="Search…" aria-label="Search";

@@ @@ -319,6 +319,7 @@ pub fn build_router(state: AppState) -> Router { @@
             "/repo-fork/{id}",
             get(repo::fork_confirm).post(repo::fork_create),
+        )
         .route("/repo-bookmark/{id}", get(repo::bookmark_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))

@@ @@ -78,6 +78,8 @@ pub(crate) struct RepoCtx { @@
     pub(crate) access: auth::Access,
     /// The signed-in viewer's id, if any (gates the Fork action).
     pub(crate) viewer_id: Option<String>,
     /// Whether the viewer has bookmarked this repo.
     pub(crate) bookmarked: bool,
     /// The parent repo's `(owner_username, path)` when this repo is a fork.
     pub(crate) fork_parent: Option<(String, String)>,
+}
@@ @@ -153,11 +155,20 @@ pub(crate) async fn resolve( @@
         Some(pid) => resolve_fork_parent(state, pid).await,
         None => None,
     };
     let bookmarked = match viewer {
         Some(u) => state
             .store
             .is_bookmarked(&u.id, &repo.id)
             .await
             .unwrap_or(false),
         None => false,
     };
     Ok(Some(RepoCtx {
         owner,
         repo,
         access,
         viewer_id: viewer.map(|u| u.id.clone()),
         bookmarked,
         fork_parent,
     }))
+}
@@ @@ -180,6 +191,9 @@ pub struct ListQuery { @@
     /// Case-insensitive substring filter over repository paths.
     #[serde(default)]
     pub q: Option<String>,
     /// Active profile tab: `repos` (default), `groups`, or `bookmarks`.
     #[serde(default)]
     pub tab: Option<String>,
+}
 /// Paging state parsed from `?page=&per_page=`, for long lists (commits, …).
@@ @@ -303,37 +317,44 @@ pub async fn user_page( @@
     let Some(owner) = state.store.user_by_username(&owner_name).await? else {
         return Err(AppError::NotFound);
     };
     let repos = visible_repos(&state, &owner, viewer.as_ref()).await?;
     let groups = state.store.groups_by_owner(&owner.id).await?;
     let tab = match lq.tab.as_deref() {
         Some("groups") => ProfileTab::Groups,
         Some("bookmarks") => ProfileTab::Bookmarks,
         _ => ProfileTab::Repos,
     };
     let q = lq.q.unwrap_or_default();
     let needle = q.trim().to_lowercase();
     // The profile lists only top-level groups and repos; grouped ones live in
     // their group. A search, however, spans everything so nested items are
     // findable.
     let top_groups: Vec<_> = groups.iter().filter(|g| !g.path.contains('/')).collect();
     let entries: Vec<RepoEntry> = repos
         .iter()
         .filter(|r| {
             let matches = needle.is_empty() || r.path.to_lowercase().contains(&needle);
             matches && (!needle.is_empty() || !r.path.contains('/'))
         })
         .map(|r| RepoEntry::owned(&owner.username, r))
         .collect();
     let base = format!("/{}", owner.username);
     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)) }
             div class="profile-main" {
     let content = match tab {
         ProfileTab::Repos => {
             let repos = visible_repos(&state, &owner, viewer.as_ref()).await?;
             // Top-level repos only; a search spans nested ones so they are findable.
             let entries: Vec<RepoEntry> = repos
                 .iter()
                 .filter(|r| {
                     let matches = needle.is_empty() || r.path.to_lowercase().contains(&needle);
                     matches && (!needle.is_empty() || !r.path.contains('/'))
                 })
                 .map(|r| RepoEntry::owned(&owner.username, r))
                 .collect();
             html! {
                 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" }
+                }
                 @if !top_groups.is_empty() {
                     section class="listing" {
                         h2 { "Groups" }
                 (repo_card("", "No repositories.", &entries))
+            }
+        }
         ProfileTab::Groups => {
             let groups = state.store.groups_by_owner(&owner.id).await?;
             let top_groups: Vec<_> = groups.iter().filter(|g| !g.path.contains('/')).collect();
             html! {
                 section class="listing" {
                     @if top_groups.is_empty() {
                         div class="card" { p class="muted" { "No groups." } }
                     } @else {
                         ul class="repo-list card" {
                             @for group in &top_groups {
                                 li {
@@ @@ -347,13 +368,109 @@ pub async fn user_page( @@
+                        }
+                    }
+                }
                 (repo_card("Repositories", "No repositories.", &entries))
+            }
+        }
         ProfileTab::Bookmarks => {
             let bookmarked = state.store.bookmarked_repos(&owner.id).await?;
             let visible = filter_readable(&state, bookmarked, viewer.as_ref()).await?;
             let entries: Vec<RepoEntry> = visible
                 .iter()
                 .map(|r| {
                     // Resolve each repo's own owner for the cross-owner label.
                     RepoEntry::global(&r.owner_id, r)
                 })
                 .collect();
             // Replace the owner-id label with the username where we can.
             let entries = resolve_bookmark_labels(&state, &visible, entries).await;
             html! { (repo_card("", "No bookmarks yet.", &entries)) }
+        }
     };
     let (jar, chrome) = build_chrome(&state, jar, viewer.clone(), uri.path().to_string());
     let ptab = |t: ProfileTab, key: &str, label: &str| {
         html! {
             a href=(format!("{base}?tab={key}")) aria-current=[(tab == t).then_some("page")] { (label) }
+        }
     };
     let body = html! {
         div class="profile-layout" {
             aside class="profile-sidebar" { (profile_sidebar(&owner)) }
             div class="profile-main" {
                 nav class="tabs profile-tabs" {
                     (ptab(ProfileTab::Repos, "repos", "Repositories"))
                     (ptab(ProfileTab::Groups, "groups", "Groups"))
                     (ptab(ProfileTab::Bookmarks, "bookmarks", "Bookmarks"))
+                }
                 (content)
+            }
+        }
     };
     Ok((jar, page(&chrome, &owner.username, body)).into_response())
+}
 /// The three tabs on a user's profile.
 #[derive(Debug, Clone, Copy, PartialEq, Eq)]
 enum ProfileTab {
     Repos,
     Groups,
     Bookmarks,
+}
 /// Filter an arbitrary repo list to those `viewer` may read (for bookmarks).
 async fn filter_readable(
     state: &AppState,
     repos: Vec<Repo>,
     viewer: Option<&User>,
 ) -> AppResult<Vec<Repo>> {
     let viewer_id = viewer.map(|v| auth::Viewer {
         id: v.id.clone(),
         is_admin: v.is_admin,
     });
     let mut out = Vec::new();
     for repo in repos {
         let collab = match viewer {
             Some(v) => state
                 .store
                 .collaborator_permission(&repo.id, &v.id)
                 .await?
                 .and_then(|p| auth::Permission::parse(&p)),
             None => None,
         };
         let access = auth::access(viewer_id.as_ref(), &repo, collab, state.allow_anonymous());
         if access >= auth::Access::Read {
             out.push(repo);
+        }
+    }
     Ok(out)
+}
 /// Replace each bookmark entry's owner-id label/href with the real username.
 async fn resolve_bookmark_labels(
     state: &AppState,
     repos: &[Repo],
     mut entries: Vec<RepoEntry>,
 ) -> Vec<RepoEntry> {
     let mut names: std::collections::HashMap<String, String> = std::collections::HashMap::new();
     for (repo, entry) in repos.iter().zip(entries.iter_mut()) {
         let owner = if let Some(n) = names.get(&repo.owner_id) {
             n.clone()
         } else {
             let n = state
                 .store
                 .user_by_id(&repo.owner_id)
                 .await
                 .ok()
                 .flatten()
                 .map_or_else(|| repo.owner_id.clone(), |u| u.username);
             names.insert(repo.owner_id.clone(), n.clone());
+            n
         };
         entry.href = format!("/{owner}/{}", repo.path);
         entry.label = format!("{owner}/{}", repo.path);
+    }
     entries
+}
 /// `GET /{owner}/{*rest}` — dispatch a repo path and view.
 pub async fn dispatch(
     State(state): State<AppState>,
@@ @@ -1618,6 +1735,31 @@ async fn require_readable_repo( @@
     Ok(repo)
+}
 /// `GET /repo-bookmark/{id}` — toggle the viewer's bookmark of a readable repo,
 /// then return to it. (A GET toggle, matching the fork link; bookmarks are a
 /// trivial, reversible per-user flag.)
 pub async fn bookmark_toggle(
     State(state): State<AppState>,
     MaybeUser(viewer): MaybeUser,
     Path(id): Path<String>,
 ) -> AppResult<Response> {
     let Some(user) = viewer.clone() else {
         return Ok(Redirect::to("/login").into_response());
     };
     let repo = require_readable_repo(&state, viewer.as_ref(), &id).await?;
     if state.store.is_bookmarked(&user.id, &repo.id).await? {
         state.store.remove_bookmark(&user.id, &repo.id).await?;
     } else {
         state.store.add_bookmark(&user.id, &repo.id).await?;
+    }
     let owner = state
         .store
         .user_by_id(&repo.owner_id)
         .await?
         .map_or_else(|| repo.owner_id.clone(), |u| u.username);
     Ok(Redirect::to(&format!("/{owner}/{}", repo.path)).into_response())
+}
 /// `GET /repo-fork/{id}` — confirm forking a readable repo to your account.
 pub async fn fork_confirm(
     State(state): State<AppState>,
@@ @@ -2857,6 +2999,11 @@ pub(crate) fn repo_header( @@
+                }
                 div class="repo-actions" {
                     @if ctx.viewer_id.is_some() {
                         a class=(if ctx.bookmarked { "btn btn-active" } else { "btn" })
                           href=(format!("/repo-bookmark/{}", ctx.repo.id)) {
                             (icon(Icon::Bookmark))
                             span { (if ctx.bookmarked { "Bookmarked" } else { "Bookmark" }) }
+                        }
                         a class="btn" href=(format!("/repo-fork/{}", ctx.repo.id)) {
                             (icon(Icon::GitFork)) span { "Fork" }
+                        }