hanna/fabrica

feat(web): auto-upload assets, breadcrumbs, and asset-row polish

fc49ceb · hanna committed on 2026-07-26

- The dropzone uploads on selection/drop (no separate button); the plain button
  remains as the no-JS fallback, hidden when JS is active.
- Replace the release view/edit back links with GitHub-style breadcrumbs
  (Releases / name, and … / Edit).
- Reset the stacked-form top margin on the per-asset delete button so it centres
  in its row, and make it compact.

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

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

assets/base.css +25 −12

assets/fabrica.js +6 −16

crates/web/src/releases.rs +20 −9

data/fabrica/releases/01kyf3cgb99w0wjas5a5jbx2pt +0 −0

Binary file not shown.

 .back-link {
   font-size: 0.9em;
+}
+/* Breadcrumb (Releases / name / Edit). */
+.crumbs {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  flex-wrap: wrap;
+  margin-bottom: 1rem;
+  font-size: 0.95em;
+}
+.crumbs a {
+  color: var(--fb-accent);
+}
+.crumb-current {
+  color: var(--fb-fg-muted);
+}
 .release {
   margin-bottom: 1.25rem;
+}
   opacity: 0;
   pointer-events: none;
+}
-/* The pending (not-yet-uploaded) file: editable name, size, remove. */
-.asset-pending {
-  display: flex;
-  align-items: center;
-  gap: 0.6rem;
-  margin-bottom: 0.75rem;
-}
-.asset-pending-name {
-  flex: 1;
-  min-width: 0;
-  font-family: var(--fb-font-mono);
-}
 .asset-upload .btn {
   margin-top: 0.75rem;
+}
+/* The per-asset delete button sits in a card form; kill the stacked-form top
+   margin so it centres in the row, and keep it compact. Specificity beats
+   `.card form button[type="submit"]:not(.inline-btn)`. */
+.card .asset-list .asset-row form button[type="submit"] {
+  margin-top: 0;
+}
+.asset-row .icon-btn {
+  width: 1.75rem;
+  height: 1.75rem;
+}
 .release-form-actions {
   display: flex;
   align-items: center;

+    }
   });
-  // ---- Release asset dropzone (drag-drop / click, editable name + size) ----
+  // ---- Release asset dropzone: pick or drop a file to upload it immediately ----
   document.querySelectorAll(".asset-upload").forEach(function (form) {
     var input = form.querySelector("input[type=file]");
     var zone = form.querySelector(".dropzone");
-    var pending = form.querySelector(".asset-pending");
+    if (!input || !zone) return;
-    if (!input || !zone || !pending) return;
+    var submit = form.querySelector("button[type=submit]");
-    function show() {
+    if (submit) submit.hidden = true; // JS uploads on selection; button is no-JS only
-      var f = input.files[0];
+    input.addEventListener("change", function () { if (input.files.length) form.submit(); });
-      pending.hidden = !f;
-      if (!f) return;
-      pending.querySelector("input[type=text]").value = f.name;
-      pending.querySelector(".asset-size").textContent =
-        "(" + (f.size < 1048576 ? (f.size / 1024).toFixed(1) + " KB" : (f.size / 1048576).toFixed(2) + " MB") + ")";
-    }
-    input.addEventListener("change", show);
-    pending.querySelector(".asset-remove").addEventListener("click", function () {
-      input.value = ""; pending.hidden = true;
-    });
     ["dragover", "dragenter", "dragleave", "drop"].forEach(function (ev) {
       zone.addEventListener(ev, function (e) {
         e.preventDefault();
         zone.classList.toggle("drag", ev === "dragover" || ev === "dragenter");
-        if (ev === "drop" && e.dataTransfer.files.length) { input.files = e.dataTransfer.files; show(); }
+        if (ev === "drop" && e.dataTransfer.files.length) { input.files = e.dataTransfer.files; form.submit(); }
       });
     });
   });

     .await;
     let body = html! {
         (repo_header(state, &ctx, Tab::Releases, &ctx.repo.default_branch, &branches))
-        p { a class="back-link" href=(format!("{base}/-/releases")) { "← Releases" } }
+        nav class="crumbs" aria-label="Breadcrumb" {
+            a href=(format!("{base}/-/releases")) { "Releases" }
+            span class="slug-sep" { "/" }
+            span class="crumb-current" { (if release.name.is_empty() { &release.tag } else { &release.name }) }
+        }
         (card)
     };
     let title = format!(
         .user_by_id(&repo.owner_id)
         .await?
         .map_or(repo.owner_id.clone(), |u| u.username);
+    let releases = format!("/{owner}/{}/-/releases", repo.path);
     let back = format!("/{owner}/{}/-/releases/{}", repo.path, release.tag);
+    let crumb = if release.name.is_empty() {
+        &release.tag
+    } else {
+        &release.name
+    };
     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" } }
+        nav class="crumbs" aria-label="Breadcrumb" {
+            a href=(releases) { "Releases" }
+            span class="slug-sep" { "/" }
+            a href=(back) { (crumb) }
+            span class="slug-sep" { "/" }
+            span class="crumb-current" { "Edit" }
+        }
         (release_form(&format!("/release/{}/edit", release.id), &chrome.csrf, Some(&release), &[], &[]))
         (assets_editor(&release.id, &chrome.csrf, &assets))
     };
+                }
                 form method="post" action=(format!("/release/{release_id}/asset")) enctype="multipart/form-data" class="asset-upload" {
                     input type="hidden" name="_csrf" value=(csrf);
-                    // Populated by JS when a file is picked (editable name, size,
-                    // remove); stays hidden without JS.
-                    div class="asset-pending" hidden {
-                        input type="text" name="name" class="asset-pending-name" aria-label="Asset name";
-                        span class="asset-size muted" {}
-                        button type="button" class="asset-remove icon-btn" aria-label="Remove file" title="Remove file" { (icon(Icon::X)) }
-                    }
                     label class="dropzone" {
                         input type="file" name="asset" class="dropzone-input" required;
                         (icon(Icon::Download))
                         span { "Attach a file by dropping it here or selecting it." }
+                    }
+                    // Hidden by JS, which uploads on selection; the button is the
+                    // no-JS fallback.
                     button class="btn inline-btn" type="submit" { "Upload asset" }
+                }
+            }