pc: grouped ×N cards list each item on its own line, shared brand in label
All checks were successful
Deploy production / deploy (push) Successful in 1m14s

This commit is contained in:
2026-10-25 21:34:33 +00:00
parent 3c5ef605df
commit 27a15f0428

View File

@@ -38,6 +38,16 @@
const qty = $derived(parts.reduce((s, p) => s + (isAddOn(p) ? 0 : units(p)), 0)); const qty = $derived(parts.reduce((s, p) => s + (isAddOn(p) ? 0 : units(p)), 0));
const image = $derived(parts.flatMap((p) => p.imageUrls)[0] ?? null); const image = $derived(parts.flatMap((p) => p.imageUrls)[0] ?? null);
const names = $derived([...new Set(parts.map(displayName))]); const names = $derived([...new Set(parts.map(displayName))]);
// Grouped (×N) cards list each item on its own line; a brand shared by all moves to the label.
const brands = $derived([...new Set(parts.map((p) => p.brand ?? ''))]);
const sharedBrand = $derived(
names.length > 1 && brands.length === 1 && brands[0] ? brands[0] : null
);
const lines = $derived(
sharedBrand
? [...new Set(parts.map((p) => displayName({ brand: null, model: p.model })))]
: names
);
const spec = $derived(keySpec(first)); const spec = $derived(keySpec(first));
const badges = $derived([...new Set(parts.flatMap(usageBadges))]); const badges = $derived([...new Set(parts.flatMap(usageBadges))]);
const flag = $derived(badges.find((b) => b !== 'long ago') ?? null); const flag = $derived(badges.find((b) => b !== 'long ago') ?? null);
@@ -63,12 +73,19 @@
>{/if} >{/if}
<span class="min-w-0 flex-1"> <span class="min-w-0 flex-1">
<span class="label"> <span class="label">
{slotLabel(slot, first.category)}{#if qty > 1}<span class="qty">×{qty}</span>{/if} {slotLabel(slot, first.category)}{#if qty > 1}<span class="qty">×{qty}</span
>{/if}{#if sharedBrand}<span class="brand">· {sharedBrand}</span>{/if}
{#if !compact}{#each badges as b (b)}<span class="badge" class:warn={b === 'model TBD'} {#if !compact}{#each badges as b (b)}<span class="badge" class:warn={b === 'model TBD'}
>{b}</span >{b}</span
>{/each}{/if} >{/each}{/if}
</span> </span>
<span class="name" title={names.join(' + ')}>{names.join(' + ')}</span> {#if lines.length > 1}
<span class="lines">
{#each lines as l (l)}<span class="line">{l}</span>{/each}
</span>
{:else}
<span class="name" title={names[0]}>{names[0]}</span>
{/if}
{#if spec && !compact}<span class="spec">{spec}</span>{/if} {#if spec && !compact}<span class="spec">{spec}</span>{/if}
</span> </span>
</button> </button>
@@ -210,6 +227,29 @@
font-weight: 500; font-weight: 500;
line-height: 1.2; line-height: 1.2;
} }
.brand {
text-transform: none;
letter-spacing: 0;
}
.lines {
display: flex;
flex-direction: column;
gap: 0.1rem;
margin-top: 0.05rem;
}
.line {
font-size: 0.8rem;
font-weight: 500;
line-height: 1.2;
overflow-wrap: anywhere;
}
.line + .line {
padding-top: 0.1rem;
border-top: 1px solid color-mix(in srgb, var(--site-border) 60%, transparent);
}
.compact .line {
font-size: 0.72rem;
}
.compact .label { .compact .label {
letter-spacing: 0.03em; letter-spacing: 0.03em;
} }