hanna/fabrica

feat(web): repo toolbar, code search, markdown preview, spacing fixes

7b7bb33 · hanna committed on 2026-07-25

Turn the branch/commits row into a button toolbar, drop the Search tab in
favour of an in-repo code-search box on the overview, and space the repo
slug's owner/name/badge segments. Default markdown blobs to a rendered
preview with a Preview/Code toggle (?display=source), and tidy the blob-
header actions (consistent button sizing and grouping).

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

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

assets/base.css +30 −2

crates/web/src/repo.rs +59 −20

   margin-bottom: 1rem;
+}
 .repo-slug {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  flex-wrap: wrap;
   font-size: 1.4rem;
   font-weight: 400;
+}
 .repo-slug a {
   color: var(--fb-accent);
+}
+.slug-sep {
+  color: var(--fb-fg-muted);
+}
+.repo-slug .badge {
+  font-size: 0.6em;
+  align-self: center;
+}
 /* Tab strips (repo sub-nav, explore sub-nav): active-pill style. */
 .repo-tabs,
 .subnav {
 .subnav {
   justify-content: center;
+}
-.ref-row {
+.repo-toolbar {
   display: flex;
   gap: 0.5rem;
   align-items: center;
+  flex-wrap: wrap;
   margin-top: 0.5rem;
+}
+.repo-codesearch {
+  margin: 0 0 1.25rem;
+}
 .clone-row {
   display: flex;
   gap: 0.5rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
+  gap: 0.75rem;
+  flex-wrap: wrap;
   padding: 0.5rem 0.75rem;
   background: var(--fb-bg-raised);
   border: 1px solid var(--fb-border);
   border-bottom: none;
   border-radius: var(--fb-radius) var(--fb-radius) 0 0;
+}
+.blob-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  flex-wrap: wrap;
+}
 .blob-header .btn {
-  padding: 0.2rem 0.5rem;
+  padding: 0.3rem 0.6rem;
+  font-size: 0.85em;
+}
+.blob-header .btn.active {
+  border-color: var(--fb-accent);
+  color: var(--fb-accent);
+}
 table.blob {

     let (kind, rest) = view.split_once('/').unwrap_or((view, ""));
     match kind {
         "tree" => tree_view(state, viewer, jar, uri, ctx, rest).await,
-        "blob" => blob_view(state, viewer, jar, uri, ctx, rest, false).await,
+        "blob" => blob_view(state, viewer, jar, uri, ctx, rest).await,
         "raw" => raw_view(state, ctx, rest).await,
         "commits" => commits_view(state, viewer, jar, uri, ctx, rest).await,
         "commit" => match rest.split_once('/') {
             })
             .await?;
             let readme = load_readme(state, &ctx.repo.id, &rev, &entries).await;
+            let base = format!("/{}/{}", ctx.owner.username, ctx.repo.path);
             html! {
                 (repo_header(&ctx, Tab::Code, &rev_name))
                 (clone_widget(state, &ctx))
+                form class="search-row repo-codesearch" method="get" action=(format!("{base}/-/search")) {
+                    input type="search" name="q" placeholder="Search this repository…"
+                          aria-label="Search this repository";
+                    button class="btn" type="submit" { (icon(Icon::Search)) span { "Search" } }
+                }
                 (tree_table(&ctx.owner.username, &ctx.repo.path, &rev_name, "", &entries))
                 @if let Some(rendered) = readme {
                     div class="card markdown readme" { (rendered) }
     uri: &Uri,
     ctx: RepoCtx,
     rest: &str,
-    _raw: bool,
 ) -> AppResult<Response> {
+    // `?display=source` forces the highlighted source over a rendered preview.
+    let source_view = uri.query().is_some_and(|q| q.contains("display=source"));
     let (rev_name, path) = split_ref_path(rest);
     let rev_name = ref_or_default(&ctx.repo, &rev_name);
     if path.is_empty() {
     })
     .await?;
-    let content_body = render_blob(&ctx, &rev_name, &path, &blob, attr_lang.as_deref());
+    let content_body = render_blob(
+        &ctx,
+        &rev_name,
+        &path,
+        &blob,
+        attr_lang.as_deref(),
+        source_view,
+    );
     let body = html! {
         (repo_header(&ctx, Tab::Code, &rev_name))
         (breadcrumb(&ctx.owner.username, &ctx.repo.path, &rev_name, &path))
     Ok((jar, page(&chrome, &title, body)).into_response())
+}
-/// Render a blob: highlighted code with line anchors, an inline image, or a
+/// Render a blob: a rendered preview for markdown, highlighted code with line
-/// binary notice.
+/// anchors, an inline image, or a binary notice.
 fn render_blob(
     ctx: &RepoCtx,
     rev_name: &str,
     path: &str,
     blob: &git::Blob,
     attr_lang: Option<&str>,
+    source_view: bool,
 ) -> Markup {
-    let raw_url = format!(
+    let base = format!("/{}/{}", ctx.owner.username, ctx.repo.path);
-        "/{}/{}/-/raw/{rev_name}/{path}",
+    let raw_url = format!("{base}/-/raw/{rev_name}/{path}");
-        ctx.owner.username, ctx.repo.path
+    let blob_url = format!("{base}/-/blob/{rev_name}/{path}");
-    );
     let filename = path.rsplit('/').next().unwrap_or(path);
+    let previewable = is_markdown(filename) && !blob.is_binary;
+    let show_preview = previewable && !source_view;
     html! {
         div class="blob-header" {
             span class="muted" { (blob.size) " bytes" }
-            span { a class="btn" href=(raw_url) { "Raw" }
+            div class="blob-actions" {
-                   button class="btn" type="button" data-clipboard=(raw_url) {
+                @if previewable {
-                       (icon(Icon::Copy)) span { "Copy path" }
+                    a class=(toggle_class(show_preview)) href=(blob_url.clone()) { "Preview" }
-                   } }
+                    a class=(toggle_class(!show_preview)) href=(format!("{blob_url}?display=source")) { "Code" }
+                }
+                a class="btn" href=(raw_url) { "Raw" }
+                button class="btn" type="button" data-clipboard=(raw_url) {
+                    (icon(Icon::Copy)) span { "Copy path" }
+                }
+            }
+        }
         @if is_image(filename) {
             p { img src=(raw_url) alt=(filename) style="max-width:100%"; }
                 p class="muted" { "Binary file not shown." }
                 p { a class="btn" href=(raw_url) { "Download" } }
+            }
+        } @else if show_preview {
+            div class="card markdown" {
+                (markdown::render(&String::from_utf8_lossy(&blob.content)))
+            }
         } @else {
             (highlighted_code(FsPath::new(path), &blob.content, attr_lang))
+        }
+    }
+}
+/// Whether a filename is a markdown document (rendered as a preview by default).
+fn is_markdown(filename: &str) -> bool {
+    matches!(
+        filename
+            .rsplit('.')
+            .next()
+            .map(str::to_ascii_lowercase)
+            .as_deref(),
+        Some("md" | "markdown" | "mdown" | "mkd")
+    )
+}
 /// Render highlighted code as a line-numbered table with `#L{n}` anchors.
 fn highlighted_code(path: &FsPath, content: &[u8], attr_lang: Option<&str>) -> Markup {
     let highlighted = highlight::highlight(path, content, attr_lang);
     html! {
         div class="repo-head" {
             h1 class="repo-slug" {
-                a href={ "/" (ctx.owner.username) } { (ctx.owner.username) } "/"
+                a href={ "/" (ctx.owner.username) } { (ctx.owner.username) }
+                span class="slug-sep" { "/" }
                 a href=(base) { (ctx.repo.name) }
-                @if ctx.repo.is_private { " " span class="badge badge-private" { "private" } }
+                @if ctx.repo.is_private { span class="badge badge-private" { "private" } }
+            }
             @if let Some(desc) = &ctx.repo.description { p class="muted" { (desc) } }
             nav class="tabs repo-tabs" {
                 (tab(Tab::Code, "Code", Icon::File, base.clone()))
                 (tab(Tab::Branches, "Branches", Icon::GitBranch, format!("{base}/-/branches")))
                 (tab(Tab::Tags, "Tags", Icon::Box, format!("{base}/-/tags")))
-                (tab(Tab::Search, "Search", Icon::Search, format!("{base}/-/search")))
+            }
-            div class="ref-row" {
+            div class="repo-toolbar" {
-                // Current ref, linking to the branch picker.
+                a class="btn" href=(format!("{base}/-/branches")) {
-                a class="badge" href=(format!("{base}/-/branches")) { (rev) }
+                    (icon(Icon::GitBranch)) span { (rev) }
-                a href=(format!("{base}/-/commits/{rev}")) { "Commits" }
+                }
+                a class="btn" href=(format!("{base}/-/commits/{rev}")) { "Commits" }
+            }
+        }
+    }