From 39f6ededfdee0da3c4fa58238c7928678dff91f8 Mon Sep 17 00:00:00 2001
From: Donkie <daniel.cf.hultgren@gmail.com>
Date: Wed, 29 Jul 2026 20:57:23 +0200
Subject: [PATCH] client_v2: show spool weight in the add-spool search results
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Vendors list the same filament in several sizes, so "Polymaker · PLA"
rows for the 1 kg and 250 g variants were indistinguishable in both the
catalog and SpoolmanDB result lists. Show the net weight on each row,
and on the chosen-filament card so the pick can be confirmed on step 2.

The row weight sits outside .res-name rather than being appended to the
vendor/material line: that element truncates with an ellipsis, which
would drop the one field that tells two matching results apart. The
chosen card's .cs line wraps instead, so a plain append is safe there.

A local filament's weight maps to 0 when unrecorded, so both row sites
guard on it rather than rendering "0 g".
---
 .../src/lib/components/AddSpoolModal.svelte   | 30 ++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/client_v2/src/lib/components/AddSpoolModal.svelte b/client_v2/src/lib/components/AddSpoolModal.svelte
index 7398a9c9..e1a759e5 100644
--- a/client_v2/src/lib/components/AddSpoolModal.svelte
+++ b/client_v2/src/lib/components/AddSpoolModal.svelte
@@ -17,6 +17,7 @@
 	import { spoolSource, type NewFilamentDraft } from '$lib/api/spoolSource';
 	import { fields } from '$lib/stores/fields.svelte';
 	import { externalColors, externalDirection, type ExternalFilament } from '$lib/api/external';
+	import { weightAuto } from '$lib/utils/format';
 	import { loadMaterials, type MaterialSpec } from '$lib/data/materials';
 	import * as m from '$lib/paraglide/messages';
 
@@ -456,6 +457,12 @@
 										<span class="rn">{f.name}</span>
 										<span class="rs">{vendorName(f)} · {f.material}</span>
 									</div>
+									<!-- See the note on the external rows below: weight disambiguates two
+									     otherwise identical entries, so it sits outside the truncating
+									     .res-name. A catalog filament may have no weight recorded (0). -->
+									{#if f.weight}
+										<span class="res-weight">{weightAuto(f.weight)}</span>
+									{/if}
 									<span class="tag in-catalog">{m['add.inCatalog']()}</span>
 								</button>
 							{/each}
@@ -483,6 +490,13 @@
 										<span class="rn">{ext.name}</span>
 										<span class="rs">{ext.manufacturer} · {ext.material}</span>
 									</div>
+									<!-- Weight is part of the identity here: vendors list the same filament in
+									     several sizes, so the rows are otherwise indistinguishable. It sits
+									     outside .res-name so the ellipsis can never eat the one field that
+									     tells two matching results apart. -->
+									{#if ext.weight}
+										<span class="res-weight">{weightAuto(ext.weight)}</span>
+									{/if}
 									<span class="tag external">{serverInfo.externalDbName}</span>
 								</button>
 							{/each}
@@ -634,7 +648,14 @@
 											>{serverInfo.externalDbName}</span
 										>{/if}
 								</div>
-								<div class="cs">{cVendor(chosen)} · {cMaterial(chosen)}</div>
+								<!-- Weight closes the loop on the search rows: it confirms which of several
+								     same-named sizes was picked. This is the filament's full-spool weight, so
+								     it stays put even if the Weight field below is edited for this spool. -->
+								<div class="cs">
+									{cVendor(chosen)} · {cMaterial(chosen)}{cWeight(chosen)
+										? ' · ' + weightAuto(cWeight(chosen))
+										: ''}
+								</div>
 							</div>
 							<button class="change" onclick={() => (step = 1)}>{m['add.change']()}</button>
 						</div>
@@ -929,6 +950,13 @@
 		color: var(--text-muted);
 		font-size: 12px;
 	}
+	.res-weight {
+		flex: none;
+		white-space: nowrap;
+		font-size: 12px;
+		font-variant-numeric: tabular-nums;
+		color: var(--text);
+	}
 	.tag {
 		font-size: 10.5px;
 		padding: 1px 7px;