hanna/fabrica

fix(web): select caret, pill alignment, and release asset editing

beaef11 · hanna committed on 2026-07-26

- Draw the select dropdown caret from two token-coloured gradients (the native
  arrow ignored padding and hugged the border) with room from the edge.
- Tighten the collaborator role pill's line box so it centres on the name.
- Even out the release Edit/Delete buttons (flex no longer stretches Edit).
- Move release asset management (upload + per-asset delete) off the public
  release view onto the edit page, where the release already exists; the view
  now just lists assets as downloads.

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

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

assets/base.css +20 −1

crates/web/src/releases.rs +40 −23

data/repos/01/01kye56ybp94wrec3fm02e9ge8.git/refs/tags/v0.0.0 +1 −0

   align-items: center;
   gap: 0.6rem;
   min-width: 0;
+  /* Tight line boxes so the name and the role pill centre on each other. */
+  line-height: 1;
+}
 .collab-ident .entry-row-title {
   display: inline;
 textarea,
 select {
   width: 100%;
-  /* Extra right padding so the native dropdown arrow isn't flush to the border. */
   padding: 0.5rem 0.75rem;
   font: inherit;
   color: var(--fb-fg);
   border: 1px solid var(--fb-border);
   border-radius: var(--fb-radius);
+}
+/* Replace the native select arrow (which ignores padding and hugs the border)
+   with a token-coloured caret drawn from two gradients — no literal colours,
+   and given breathing room from the edge. */
+select {
+  appearance: none;
+  -webkit-appearance: none;
+  padding-right: 2rem;
+  background-image:
+    linear-gradient(45deg, transparent 50%, var(--fb-fg-muted) 50%),
+    linear-gradient(135deg, var(--fb-fg-muted) 50%, transparent 50%);
+  background-position: right 1.05rem center, right 0.7rem center;
+  background-size: 0.35rem 0.35rem;
+  background-repeat: no-repeat;
+}
+select:disabled {
+  background-image: none;
+}
 input:disabled,
 textarea:disabled,
 select:disabled {
+}
 .release-actions {
   display: flex;
+  align-items: center;
   gap: 0.5rem;
   flex: none;
+}

                             (icon(Icon::File))
                             a class="asset-name" href=(format!("/release-asset/{}", a.id)) { (a.name) }
                             span class="asset-size muted" { (fmt_bytes(a.size)) }
-                            @if can_write {
-                                form method="post" action=(format!("/release-asset/{}/delete", a.id)) class="inline-form" {
-                                    input type="hidden" name="_csrf" value=(csrf);
-                                    button class="icon-btn" type="submit" aria-label="Delete asset" title="Delete asset" { (icon(Icon::X)) }
-                                }
-                            }
+                        }
+                    }
                     li class="asset-row source" {
                         a class="asset-name" href=(format!("{base}/-/archive/{}.tar.gz", r.tag)) { "Source code (tar.gz)" }
+                    }
+                }
-                @if can_write {
-                    form method="post" action=(format!("/release/{}/asset", r.id)) enctype="multipart/form-data" class="asset-upload" {
-                        input type="hidden" name="_csrf" value=(csrf);
-                        input type="file" name="asset" required;
-                        button class="btn inline-btn" type="submit" { "Upload asset" }
-                    }
-                }
+            }
+        }
+    }
         .await?
         .map_or(repo.owner_id.clone(), |u| u.username);
     let back = format!("/{owner}/{}/-/releases/{}", repo.path, release.tag);
+    let assets = state.store.list_release_assets(&release.id).await?;
     let (jar, chrome) = build_chrome(&state, jar, Some(user), uri.path().to_string());
     let body = html! {
         p { a class="back-link" href=(back) { "← Back to release" } }
         (release_form(&format!("/release/{}/edit", release.id), &chrome.csrf, Some(&release), &[], &[]))
+        (assets_editor(&release.id, &chrome.csrf, &assets))
     };
     Ok((jar, page(&chrome, "Edit release", body)).into_response())
+}
+    }
+}
+/// The asset-management card shown on the edit page: existing assets with delete
+/// buttons, then the upload form. Only reachable once a release exists.
+fn assets_editor(release_id: &str, csrf: &str, assets: &[store::ReleaseAsset]) -> Markup {
+    html! {
+        section class="listing" {
+            h2 { "Assets" }
+            div class="card" {
+                @if assets.is_empty() {
+                    p class="muted" { "No uploaded assets yet." }
+                } @else {
+                    ul class="asset-list" {
+                        @for a in assets {
+                            li class="asset-row" {
+                                (icon(Icon::File))
+                                a class="asset-name" href=(format!("/release-asset/{}", a.id)) { (a.name) }
+                                span class="asset-size muted" { (fmt_bytes(a.size)) }
+                                form method="post" action=(format!("/release-asset/{}/delete", a.id)) class="inline-form" {
+                                    input type="hidden" name="_csrf" value=(csrf);
+                                    button class="icon-btn" type="submit" aria-label="Delete asset" title="Delete asset" { (icon(Icon::X)) }
+                                }
+                            }
+                        }
+                    }
+                }
+                form method="post" action=(format!("/release/{release_id}/asset")) enctype="multipart/form-data" class="asset-upload" {
+                    input type="hidden" name="_csrf" value=(csrf);
+                    input type="file" name="asset" required;
+                    button class="btn inline-btn" type="submit" { "Upload asset" }
+                }
+            }
+        }
+    }
+}
 /// Create/edit form body.
 #[derive(Debug, Deserialize)]
 pub struct ReleaseForm {
         return AppError::Forbidden.into_response();
+    }
     let result = async {
-        let (release, repo, user) = writer_release(&state, viewer.as_ref(), &id).await?;
+        let (release, _repo, _user) = writer_release(&state, viewer.as_ref(), &id).await?;
         if let Some((tmp_name, name, size, ctype)) = saved {
             let asset = state
                 .store
                 return Err(AppError::internal("storage error"));
+            }
+        }
-        Ok::<String, AppError>(format!(
+        Ok::<String, AppError>(format!("/release/{}/edit", release.id))
-            "/{}/{}/-/releases/{}",
-            user.username, repo.path, release.tag
-        ))
+    }
     .await;
     match result {
             .release_asset_by_id(&id)
             .await?
             .ok_or(AppError::NotFound)?;
-        let (release, repo, user) =
+        let (release, _repo, _user) =
             writer_release(&state, viewer.as_ref(), &asset.release_id).await?;
         let _ = tokio::fs::remove_file(assets_dir(&state).join(&asset.id)).await;
         state.store.delete_release_asset(&asset.id).await?;
-        Ok::<String, AppError>(format!(
+        Ok::<String, AppError>(format!("/release/{}/edit", release.id))
-            "/{}/{}/-/releases/{}",
-            user.username, repo.path, release.tag
-        ))
+    }
     .await;
     crate::issues::respond_redirect(result)

@@ -0,0 +1 @@
		1	37157e7f0e8a390c3579e4bfc14dbbbf1d06a711