polish(dedicated): drive bay title, HDD/SSD optgroups, OS expansion + grouping

Four customer-copy / UX cleanups bundled together:

1. Drive bay title strip — shortGroupLabel() collapses "LFF/SFF/NVMe
   Drive Bays" to just "Drive Bays" everywhere it surfaces (rail
   anchor, configurator section title, BuildSummary line item).
   Each chassis only ever shows one drive bay group, so the
   form-factor prefix was redundant noise.

2. HDD/SSD optgroups in Drive Selection — VSelect now interleaves
   VListSubheader rows ("HDDs", "SSDs", "NVMe") between options.
   Sentinel header values (`__hdr_<cat>`) are filtered in
   onDriveChange so a stray header click can't propagate.

3. OS list expansion — went from 6 entries to 14: added AlmaLinux 8,
   Rocky 8, Ubuntu 22.04 LTS, Debian 11, Fedora Server 41, FreeBSD 14,
   Proxmox VE 8, Windows Server 2019 (BYOL). Default flipped from
   "No OS" → "AlmaLinux 9" (matching what most dedicated buyers
   actually want — flag and revert via seeder if you'd rather keep
   bare-metal as the default).

4. OS picker grouped by distro — OsGroupSelector renders family
   sections (AlmaLinux, Rocky Linux, Ubuntu, Debian, Fedora,
   FreeBSD, Proxmox VE, Windows Server, Other) with a small
   uppercase heading above each row of tiles. metaFor() helper
   maps slug → family + logo path. New SVG logos for fedora,
   freebsd, proxmox; refined geometry on almalinux + rocky + debian.

Reseeded the OS group (deleted old 6 values, recreated 14 with new
ordering). 20/20 dedicated tests still pass. `npm run build` clean.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-04-26 21:21:50 -04:00
parent f0df110b47
commit dd8f83a990
11 changed files with 235 additions and 69 deletions

View File

@@ -1,5 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="AlmaLinux">
<circle cx="32" cy="32" r="32" fill="#0E1F3D"/>
<path d="M32 12 C 36 22, 44 26, 50 30 C 44 32, 36 38, 32 50 C 28 38, 20 32, 14 30 C 20 26, 28 22, 32 12 Z" fill="#FA9001"/>
<circle cx="32" cy="30" r="3.5" fill="#FFD200"/>
<g transform="translate(32 32)">
<circle r="14" fill="none" stroke="#FA9001" stroke-width="3"/>
<path d="M-9 -2 Q 0 -14, 9 -2 Q 0 4, -9 -2 Z" fill="#FA9001"/>
<path d="M-7 5 Q 0 -2, 7 5 Q 0 12, -7 5 Z" fill="#FFD200"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 329 B

After

Width:  |  Height:  |  Size: 392 B

View File

@@ -1,5 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="Debian">
<circle cx="32" cy="32" r="32" fill="#fff"/>
<path d="M40 9 C 22 9, 9 22, 9 39 C 9 50, 16 58, 25 58 C 17 55, 13 47, 13 38 C 13 23, 25 11, 41 11 C 47 11, 52 13, 56 17 C 52 12, 47 9, 40 9 Z" fill="#D70751"/>
<path d="M30 23 C 38 23, 42 28, 42 33 C 42 39, 38 43, 31 43 C 28 42, 26 40, 26 38 C 28 39, 30 40, 32 40 C 36 40, 39 38, 39 33 C 39 28, 35 25, 30 25 Z" fill="#D70751"/>
<g transform="translate(32 32)">
<path d="M -2 -16 C -10 -16, -16 -10, -16 -2 C -16 6, -10 12, -2 12 C 4 12, 8 9, 9 5 C 6 8, 2 9, -2 8 C -8 7, -12 2, -12 -3 C -12 -8, -8 -13, -2 -13 C 3 -13, 7 -10, 8 -6 C 8 -12, 4 -16, -2 -16 Z" fill="#D70751"/>
<circle cx="9" cy="-6" r="1.4" fill="#D70751"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 479 B

After

Width:  |  Height:  |  Size: 457 B

View File

@@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="Fedora">
<circle cx="32" cy="32" r="32" fill="#294172"/>
<g transform="translate(32 32)">
<path d="M -2 -14 L 10 -14 L 10 -8 L 4 -8 L 4 -3 L 9 -3 L 9 3 L 4 3 L 4 14 L -2 14 L -2 -8 C -2 -12, -1 -14, 2 -14 Z" fill="#fff"/>
<circle cx="-6" cy="9" r="5" fill="none" stroke="#fff" stroke-width="2.5"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 407 B

View File

@@ -0,0 +1,10 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="FreeBSD">
<circle cx="32" cy="32" r="32" fill="#AB2B28"/>
<g transform="translate(32 32)">
<circle r="15" fill="#fff"/>
<circle cx="-5" cy="-3" r="2.5" fill="#AB2B28"/>
<circle cx="5" cy="-3" r="2.5" fill="#AB2B28"/>
<path d="M -7 4 Q 0 11, 7 4" fill="none" stroke="#AB2B28" stroke-width="2.5" stroke-linecap="round"/>
<path d="M -12 -10 L -8 -6 M 12 -10 L 8 -6" stroke="#AB2B28" stroke-width="3" stroke-linecap="round"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 543 B

View File

@@ -0,0 +1,11 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="Proxmox VE">
<circle cx="32" cy="32" r="32" fill="#E57000"/>
<g transform="translate(32 32)">
<rect x="-13" y="-13" width="26" height="26" rx="2" fill="#fff"/>
<rect x="-9" y="-9" width="6" height="6" fill="#E57000"/>
<rect x="3" y="-9" width="6" height="6" fill="#E57000"/>
<rect x="-9" y="3" width="6" height="6" fill="#E57000"/>
<rect x="3" y="3" width="6" height="6" fill="#E57000"/>
<rect x="-3" y="-3" width="6" height="6" fill="#E57000"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 571 B

View File

@@ -1,7 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="Rocky Linux">
<circle cx="32" cy="32" r="32" fill="#10B981"/>
<path d="M8 50 L 22 26 L 32 38 L 42 22 L 56 50 Z" fill="#fff"/>
<path d="M22 26 L 32 38 L 27 38 Z" fill="#0F766E" opacity="0.45"/>
<path d="M42 22 L 32 38 L 37 38 Z" fill="#0F766E" opacity="0.45"/>
<circle cx="46" cy="20" r="3" fill="#FDE68A"/>
<g>
<path d="M14 46 L 26 30 L 32 38 L 42 22 L 50 33 L 50 46 Z" fill="#fff"/>
<path d="M26 30 L 32 38 L 28.5 38 Z" fill="#0F766E" opacity="0.35"/>
<path d="M42 22 L 50 33 L 45 33 Z" fill="#0F766E" opacity="0.35"/>
<circle cx="44" cy="20" r="3" fill="#FDE68A"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 407 B

After

Width:  |  Height:  |  Size: 439 B