From 3542d69f0485aa1ebb34ba651bf7288b79c2984a Mon Sep 17 00:00:00 2001
From: Nic-dorman <nbdorman@gmail.com>
Date: Tue, 12 May 2026 12:16:44 +0100
Subject: [PATCH] =?UTF-8?q?chore(ui):=20polish=20batch=20=E2=80=94=20downl?=
 =?UTF-8?q?oads=20icon,=20button=20alignment,=20progress=20spacing,=20Inde?=
 =?UTF-8?q?lible=20spinner?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Four small fixes batched into one PR. No functional changes.

* **Downloads empty-state icon.** Mirror the uploads empty state — a
  down-arrow svg next to "No downloads yet". Files page Downloads section
  no longer renders text-only.

* **Earnings "Use {address}" button alignment.** Wallet page suggestion
  banner was flex-row with gap-3 only — text and button sat side by side,
  no right-edge anchoring. Add `justify-between` and `shrink-0` on the
  button so the button hugs the right edge of the banner across all
  widths and address lengths.

* **Progress bar spacing on Files page.** ProgressLine carried a `mt-1`
  internally which rendered flush against the filename. Move the gap
  control to the parent (`flex flex-col gap-1.5` wrapping filename +
  bar) and drop the internal margin so future callers can choose their
  own spacing.

* **Indelible upload progress.** The Indelible backend ships no
  per-chunk progress events, so the segmented quote/pay/store bar sat
  on three empty segments for the whole transfer. New
  `indeterminate` prop on ProgressLine renders the same pulsing
  single-bar as downloads-without-total. `isIndeterminateUpload(file)`
  in files.vue picks this branch when `settingsStore.indelibleConnected
  && !settingsStore.devnetActive` — the conditions that route through
  startIndelibleUpload.

V2-264 (double scrollbar) deliberately deferred — it needs interactive
devtools inspection to identify the offending portal/iframe root, and
guessing at fixes risks regressing legitimate scrolling.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 components/ProgressLine.vue | 24 +++++++++++++--
 pages/files.vue             | 61 +++++++++++++++++++++++++------------
 pages/wallet.vue            |  4 +--
 3 files changed, 64 insertions(+), 25 deletions(-)

diff --git a/components/ProgressLine.vue b/components/ProgressLine.vue
index d009d0a..0827406 100644
--- a/components/ProgressLine.vue
+++ b/components/ProgressLine.vue
@@ -1,11 +1,25 @@
 <template>
+  <!-- Indeterminate single-bar override: used when the upload backend gives
+       us no progress signal at all (Indelible has no per-chunk event stream,
+       so the segmented quote/pay/store bar would stay empty for the entire
+       transfer). The pulsing single bar at least confirms the row is alive. -->
+  <div
+    v-if="indeterminate"
+    class="h-1 w-full min-w-[8rem] overflow-hidden rounded bg-autonomi-surface"
+    role="progressbar"
+    aria-valuemin="0"
+    aria-valuemax="100"
+  >
+    <div class="h-full w-1/3 animate-pulse bg-autonomi-blue/60" />
+  </div>
+
   <!-- Segmented bar for uploads: [quote] · [pay] · [store]
        For downloads: a single bar (no payment phase).
        Stage detail text is rendered separately by the parent (next to the
        status badge), not here — this component is purely the bar. -->
   <div
-    v-if="kind === 'upload'"
-    class="mt-1 flex w-full min-w-[8rem] items-center gap-1.5"
+    v-else-if="kind === 'upload'"
+    class="flex w-full min-w-[8rem] items-center gap-1.5"
     role="progressbar"
     :aria-valuenow="overallPercent"
     aria-valuemin="0"
@@ -18,7 +32,7 @@
 
   <div
     v-else
-    class="mt-1 h-1 w-full min-w-[8rem] overflow-hidden rounded bg-autonomi-surface"
+    class="h-1 w-full min-w-[8rem] overflow-hidden rounded bg-autonomi-surface"
     role="progressbar"
     :aria-valuenow="overallPercent"
     aria-valuemin="0"
@@ -50,6 +64,10 @@ const props = defineProps<{
   stage: TransferStage | undefined
   stageDone: number | undefined
   stageTotal: number | undefined
+  /** Render the indeterminate single bar regardless of `kind`. Used when the
+   *  backend produces no progress events (e.g. Indelible). Optional; defaults
+   *  to false for backwards compatibility with existing callers. */
+  indeterminate?: boolean
 }>()
 
 function clamp(p: number) {
diff --git a/pages/files.vue b/pages/files.vue
index 02a2231..c833e3d 100644
--- a/pages/files.vue
+++ b/pages/files.vue
@@ -107,16 +107,19 @@
                 @click="onRowClick(file)"
               >
                 <td class="px-4 py-2.5">
-                  <div>{{ file.name }}</div>
-                  <ProgressLine
-                    v-if="showsProgressBar(file)"
-                    :percent="file.progress"
-                    :kind="file.kind"
-                    :status="file.status"
-                    :stage="file.stage"
-                    :stage-done="file.stageDone"
-                    :stage-total="file.stageTotal"
-                  />
+                  <div class="flex flex-col gap-1.5">
+                    <div>{{ file.name }}</div>
+                    <ProgressLine
+                      v-if="showsProgressBar(file)"
+                      :percent="file.progress"
+                      :kind="file.kind"
+                      :status="file.status"
+                      :stage="file.stage"
+                      :stage-done="file.stageDone"
+                      :stage-total="file.stageTotal"
+                      :indeterminate="isIndeterminateUpload(file)"
+                    />
+                  </div>
                 </td>
                 <td class="px-4 py-2.5 align-top">
                   <div><StatusBadge :status="statusLabel(file)" /></div>
@@ -221,6 +224,9 @@
         v-if="sortedDownloads.length === 0"
         class="flex flex-col items-center justify-center rounded-lg border border-dashed border-autonomi-border py-12"
       >
+        <svg class="mb-3 h-8 w-8 text-autonomi-muted" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" />
+        </svg>
         <p class="text-sm text-autonomi-muted">No downloads yet</p>
         <p class="mt-1 text-xs text-autonomi-muted">Use "Download by Address" or "Download by Datamap"</p>
       </div>
@@ -252,16 +258,18 @@
               @click="onRowClick(file)"
             >
               <td class="px-4 py-2.5">
-                <div>{{ file.name }}</div>
-                <ProgressLine
-                  v-if="showsProgressBar(file)"
-                  :percent="file.progress"
-                  :kind="file.kind"
-                  :status="file.status"
-                  :stage="file.stage"
-                  :stage-done="file.stageDone"
-                  :stage-total="file.stageTotal"
-                />
+                <div class="flex flex-col gap-1.5">
+                  <div>{{ file.name }}</div>
+                  <ProgressLine
+                    v-if="showsProgressBar(file)"
+                    :percent="file.progress"
+                    :kind="file.kind"
+                    :status="file.status"
+                    :stage="file.stage"
+                    :stage-done="file.stageDone"
+                    :stage-total="file.stageTotal"
+                  />
+                </div>
               </td>
               <td class="px-4 py-2.5 align-top">
                 <div><StatusBadge :status="statusLabel(file)" /></div>
@@ -546,6 +554,19 @@ function showsProgressBar(file: FileEntry): boolean {
   )
 }
 
+/** True when the segmented quote/pay/store bar would never advance — the
+ *  Indelible backend ships no per-chunk progress events, so the row would
+ *  sit on three empty segments for the whole transfer. Fall back to the
+ *  indeterminate single-bar pulse so the user at least sees motion. */
+function isIndeterminateUpload(file: FileEntry): boolean {
+  return (
+    file.kind === 'upload'
+    && file.status === 'uploading'
+    && settingsStore.indelibleConnected
+    && !settingsStore.devnetActive
+  )
+}
+
 /** Settled = not currently transferring or queued. Per-row Remove and (for
  *  failed uploads) Retry are gated on this — we don't want a row to vanish
  *  mid-store. */
diff --git a/pages/wallet.vue b/pages/wallet.vue
index 132d78a..a225ef8 100644
--- a/pages/wallet.vue
+++ b/pages/wallet.vue
@@ -23,13 +23,13 @@
         <!-- Suggest using payment wallet address (local mode only) -->
         <div
           v-if="!settingsStore.indelibleConnected && walletStore.connected && walletStore.paymentAddress && walletStore.earningsAddress !== walletStore.paymentAddress"
-          class="mt-3 flex items-center gap-3 rounded-md border border-autonomi-blue/20 bg-autonomi-blue/5 px-3 py-2"
+          class="mt-3 flex items-center justify-between gap-3 rounded-md border border-autonomi-blue/20 bg-autonomi-blue/5 px-3 py-2"
         >
           <span class="text-xs text-autonomi-muted">
             Use your connected wallet address for earnings?
           </span>
           <button
-            class="rounded-md bg-autonomi-blue px-2.5 py-1 text-xs font-medium text-white hover:opacity-90"
+            class="shrink-0 rounded-md bg-autonomi-blue px-2.5 py-1 text-xs font-medium text-white hover:opacity-90"
             @click="usePaymentAsEarnings"
           >
             Use {{ truncateAddress(walletStore.paymentAddress) }}