hanna/fabrica

fix(web): avatar collaborator rows and tighter card top padding

52fd809 · hanna committed on 2026-07-26

Redesign collaborator rows as [avatar] [name] [role] with the remove button on
the right, sharing one `collaborators_card` helper between the repo and group
settings pages. Drop the doubled top padding on the first collaborator row and
on the first label of a card form so cards no longer open with an oversized gap.

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

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

assets/base.css +31 −1

crates/web/src/groups.rs +5 −49

crates/web/src/repo.rs +41 −29

data/fabrica/trash/01kydt075vpteqnjzyms8v3vtm-1785061358405.git/HEAD +0 −0

No textual changes.

data/fabrica/trash/01kydt075vpteqnjzyms8v3vtm-1785061358405.git/config +0 −0

No textual changes.

data/fabrica/trash/01kydt075vpteqnjzyms8v3vtm-1785061358405.git/description +0 −0

No textual changes.

data/fabrica/trash/01kydt075vpteqnjzyms8v3vtm-1785061358405.git/hooks/README.sample +0 −0

No textual changes.

data/fabrica/trash/01kydt075vpteqnjzyms8v3vtm-1785061358405.git/hooks/post-receive +0 −0

No textual changes.

data/fabrica/trash/01kydt075vpteqnjzyms8v3vtm-1785061358405.git/hooks/pre-receive +0 −0

No textual changes.

data/fabrica/trash/01kydt075vpteqnjzyms8v3vtm-1785061358405.git/info/exclude +0 −0

No textual changes.

data/fabrica/trash/01kydta3a2b6gmfh0c4x7tx4b0-1785061363714.git/HEAD +0 −0

No textual changes.

data/fabrica/trash/01kydta3a2b6gmfh0c4x7tx4b0-1785061363714.git/config +0 −0

No textual changes.

data/fabrica/trash/01kydta3a2b6gmfh0c4x7tx4b0-1785061363714.git/description +0 −0

No textual changes.

data/fabrica/trash/01kydta3a2b6gmfh0c4x7tx4b0-1785061363714.git/hooks/README.sample +0 −0

No textual changes.

data/fabrica/trash/01kydta3a2b6gmfh0c4x7tx4b0-1785061363714.git/hooks/post-receive +0 −0

No textual changes.

data/fabrica/trash/01kydta3a2b6gmfh0c4x7tx4b0-1785061363714.git/hooks/pre-receive +0 −0

No textual changes.

data/fabrica/trash/01kydta3a2b6gmfh0c4x7tx4b0-1785061363714.git/info/exclude +0 −0

No textual changes.

data/fabrica/trash/01kydtah34meqbxcfatt6m90p3-1785061376374.git/HEAD +0 −0

No textual changes.

data/fabrica/trash/01kydtah34meqbxcfatt6m90p3-1785061376374.git/config +0 −0

No textual changes.

data/fabrica/trash/01kydtah34meqbxcfatt6m90p3-1785061376374.git/description +0 −0

No textual changes.

data/fabrica/trash/01kydtah34meqbxcfatt6m90p3-1785061376374.git/hooks/README.sample +0 −0

No textual changes.

data/fabrica/trash/01kydtah34meqbxcfatt6m90p3-1785061376374.git/hooks/post-receive +0 −0

No textual changes.

data/fabrica/trash/01kydtah34meqbxcfatt6m90p3-1785061376374.git/hooks/pre-receive +0 −0

No textual changes.

data/fabrica/trash/01kydtah34meqbxcfatt6m90p3-1785061376374.git/info/exclude +0 −0

No textual changes.

   margin-bottom: 0;
+}
-/* Collaborators: a bordered list inside the card, then an add row. */
+/* Collaborators: a bordered list inside the card, then an add row. Each row is
+   [avatar] [name] [role] on the left, remove button on the right. */
 .collab-list {
   margin-bottom: 1rem;
+}
   padding-left: 0;
   padding-right: 0;
+}
+/* The first row abuts the card padding; drop its own top padding so the list
+   doesn't sit with a doubled gap at the top of the card. */
+.collab-list .entry-row:first-child {
+  padding-top: 0;
+}
+.collab-ident {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  min-width: 0;
+}
+.collab-ident .entry-row-title {
+  display: inline;
+}
+.collab-perm {
+  font-size: 0.8em;
+  color: var(--fb-fg-muted);
+  border: 1px solid var(--fb-border);
+  border-radius: 999px;
+  padding: 0.05rem 0.55rem;
+  text-transform: capitalize;
+}
 .collab-list .entry-row-actions .btn {
   padding: 0.25rem 0.6rem;
   font-size: 0.85em;
   margin: 0.75rem 0 0.25rem;
   font-weight: 600;
+}
+/* The first label in a card form abuts the card padding — drop its top margin so
+   the form doesn't sit with a doubled gap at the top. The CSRF hidden input is
+   usually the real first child, so also match the label right after it. */
+.card form > label:first-child,
+.card form > input[type="hidden"]:first-child + label {
+  margin-top: 0;
+}
 input[type="text"],
 input[type="password"],
 input[type="email"],

+                    }
+                }
+            }
-            (group_collaborators_section(gid, &chrome.csrf, &collaborators))
+            section class="listing" {
+                h2 { "Collaborators" }
+                p class="muted field-hint" { "Group collaborators gain the same access to every repository within this group." }
+                (crate::repo::collaborators_card(&format!("/group-settings/{gid}"), &chrome.csrf, &collaborators))
+            }
             section class="listing" {
                 h2 { "Danger zone" }
                 div class="card danger-zone" {
     result.unwrap_or_else(IntoResponse::into_response)
+}
-/// The group collaborators section: current members with remove buttons, add form.
-fn group_collaborators_section(
-    id: &str,
-    csrf: &str,
-    collaborators: &[store::Collaborator],
-) -> Markup {
-    let perm_option = |value: &str, label: &str| html! { option value=(value) { (label) } };
-    html! {
-        section class="listing" {
-            h2 { "Collaborators" }
-            p class="muted field-hint" { "Group collaborators gain the same access to every repository within this group." }
-            div class="card" {
-                @if collaborators.is_empty() {
-                    p class="muted" { "No collaborators yet." }
-                } @else {
-                    ul class="entry-list collab-list" {
-                        @for c in collaborators {
-                            li class="entry-row" {
-                                div class="entry-row-body" {
-                                    a class="entry-row-title" href={ "/" (c.username) } { (c.username) }
-                                    div class="entry-row-meta muted" { (c.permission) }
-                                }
-                                div class="entry-row-actions" {
-                                    form method="post" action=(format!("/group-settings/{id}/collaborators/remove")) {
-                                        input type="hidden" name="_csrf" value=(csrf);
-                                        input type="hidden" name="user_id" value=(c.user_id);
-                                        button class="btn btn-danger" type="submit" { "Remove" }
-                                    }
-                                }
-                            }
-                        }
-                    }
-                }
-                form class="collab-add" method="post" action=(format!("/group-settings/{id}/collaborators")) {
-                    input type="hidden" name="_csrf" value=(csrf);
-                    input type="text" name="username" placeholder="Username" aria-label="Username" required;
-                    select name="permission" aria-label="Permission" {
-                        (perm_option("read", "Read"))
-                        (perm_option("write", "Write"))
-                        (perm_option("admin", "Admin"))
-                    }
-                    button class="btn btn-primary inline-btn" type="submit" { "Add" }
-                }
-            }
-        }
-    }
-}
 /// The group general-settings form (rename + visibility).
 #[derive(Debug, Deserialize)]
 pub struct GroupGeneralForm {

 /// The Collaborators section of the repo settings page: the current list with
 /// remove buttons, and the add form.
 fn collaborators_section(id: &str, csrf: &str, collaborators: &[store::Collaborator]) -> Markup {
-    let perm_option = |value: &str, label: &str| html! { option value=(value) { (label) } };
     html! {
         section class="listing" {
             h2 { "Collaborators" }
-            div class="card" {
+            (collaborators_card(&format!("/repo-settings/{id}"), csrf, collaborators))
-                @if collaborators.is_empty() {
+        }
-                    p class="muted" { "No collaborators yet." }
+    }
-                } @else {
+}
-                    ul class="entry-list collab-list" {
-                        @for c in collaborators {
+/// The collaborators card — an avatar/name/role list with remove buttons, then
-                            li class="entry-row" {
+/// an add row. Shared by the repo and group settings pages; `base` is the action
-                                div class="entry-row-body" {
+/// URL prefix (`/repo-settings/{id}` or `/group-settings/{id}`).
-                                    a class="entry-row-title" href={ "/" (c.username) } { (c.username) }
+pub(crate) fn collaborators_card(
-                                    div class="entry-row-meta muted" { (c.permission) }
+    base: &str,
-                                }
+    csrf: &str,
-                                div class="entry-row-actions" {
+    collaborators: &[store::Collaborator],
-                                    form method="post"
+) -> Markup {
-                                         action=(format!("/repo-settings/{id}/collaborators/remove")) {
+    let perm_option = |value: &str, label: &str| html! { option value=(value) { (label) } };
-                                        input type="hidden" name="_csrf" value=(csrf);
+    html! {
-                                        input type="hidden" name="user_id" value=(c.user_id);
+        div class="card" {
-                                        button class="btn btn-danger" type="submit" { "Remove" }
+            @if collaborators.is_empty() {
-                                    }
+                p class="muted" { "No collaborators yet." }
+            } @else {
+                ul class="entry-list collab-list" {
+                    @for c in collaborators {
+                        li class="entry-row" {
+                            div class="collab-ident" {
+                                img class="avatar avatar-sm" src=(format!("/avatar/{}", c.username)) alt="";
+                                a class="entry-row-title" href={ "/" (c.username) } { (c.username) }
+                                span class="collab-perm" { (c.permission) }
+                            }
+                            div class="entry-row-actions" {
+                                form method="post" action=(format!("{base}/collaborators/remove")) {
+                                    input type="hidden" name="_csrf" value=(csrf);
+                                    input type="hidden" name="user_id" value=(c.user_id);
+                                    button class="btn btn-danger" type="submit" { "Remove" }
+                                }
+                            }
+                        }
+                    }
+                }
-                form class="collab-add" method="post"
+            }
-                     action=(format!("/repo-settings/{id}/collaborators")) {
+            form class="collab-add" method="post" action=(format!("{base}/collaborators")) {
-                    input type="hidden" name="_csrf" value=(csrf);
+                input type="hidden" name="_csrf" value=(csrf);
-                    input type="text" name="username" placeholder="Username" aria-label="Username" required;
+                input type="text" name="username" placeholder="Username" aria-label="Username" required;
-                    select name="permission" aria-label="Permission" {
+                select name="permission" aria-label="Permission" {
-                        (perm_option("read", "Read"))
+                    (perm_option("read", "Read"))
-                        (perm_option("write", "Write"))
+                    (perm_option("write", "Write"))
-                        (perm_option("admin", "Admin"))
+                    (perm_option("admin", "Admin"))
-                    }
-                    button class="btn btn-primary inline-btn" type="submit" { "Add" }
+                }
+                button class="btn btn-primary inline-btn" type="submit" { "Add" }
+            }
+        }
+    }