From cf1601f2b91ae5ac1082c276fd037be40faa074f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Numbus?= <raphael@numbus.eu>
Date: Sun, 29 Mar 2026 16:52:19 +0200
Subject: [PATCH] Disks minor step improvements.

---
 configurator/index.html | 49 +++++++++++++++++++++++++++++------------
 1 file changed, 35 insertions(+), 14 deletions(-)

diff --git a/configurator/index.html b/configurator/index.html
index 1a0ce49..f1fa5a8 100644
--- a/configurator/index.html
+++ b/configurator/index.html
@@ -403,32 +403,35 @@
                             </div>
                         </div>
 
-                        <div class="grid grid-cols-1 md:grid-cols-2 gap-10">
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-10 items-start">
                             <!-- Boot Selection -->
-                            <div class="space-y-6">
+                            <div class="space-y-6 flex flex-col">
                                 <h3 class="text-xl font-bold text-white flex items-center gap-2">
-                                    <i class="mdi mdi-boot text-sky-400"></i> Boot Disks
+                                    <i class="mdi mdi-nix text-sky-400"></i> Boot Disks
                                 </h3>
                                 <p class="text-sm text-slate-400">Choose 1 (Stripe) or 2 (Mirror) disks for the operating system.</p>
                                 
                                 <div class="space-y-3">
-                                    <template x-for="disk in hardwareData.disks" :key="disk.id">
+                                    <template x-for="disk in sortedDisks()" :key="disk.id">
                                         <button @click="toggleDisk(disk.id, 'boot')"
                                                 x-show="!formData.disks.data.includes(disk.id)"
                                                 :class="formData.disks.boot.includes(disk.id) ? 'bg-fuchsia-600/20 border-fuchsia-500' : 'bg-slate-900 border-slate-700 opacity-60 hover:opacity-100'"
                                                 class="w-full p-4 border rounded-xl text-left transition-all group">
                                             <div class="flex justify-between items-center">
                                                 <div class="flex items-center gap-3">
-                                                    <i class="mdi mdi-harddisk text-2xl" :class="formData.disks.boot.includes(disk.id) ? 'text-white' : 'text-slate-500'"></i>
+                                                    <i :class="'mdi ' + getDiskIcon(disk.type) + ' text-2xl'" :class="formData.disks.boot.includes(disk.id) ? 'text-white' : 'text-slate-500'"></i>
                                                     <div>
                                                         <div class="font-bold text-sm" x-text="disk.name"></div>
-                                                        <div class="text-[10px] uppercase text-slate-500 font-bold" x-text="disk.size + ' • ' + disk.type"></div>
+                                                        <div class="text-xs uppercase text-slate-500 font-bold" x-text="disk.size + ' • ' + disk.type"></div>
                                                     </div>
                                                 </div>
                                                 <div class="text-right">
-                                                    <div class="text-[10px] font-bold" :class="disk.health === 'PASSED' ? 'text-green-500' : 'text-amber-500'" x-text="'Health: ' + disk.health"></div>
+                                                    <div class="text-xs font-bold" :class="disk.health === 'PASSED' ? 'text-green-500' : 'text-amber-500'" x-text="'Health: ' + disk.health"></div>
                                                 </div>
                                             </div>
+                                            <div x-show="formData.disks.boot.includes(disk.id) && disk.health !== 'PASSED'" class="mt-3 p-2 bg-amber-500/10 border border-amber-500/30 rounded-lg">
+                                                <p class="text-[10px] text-amber-200/80"><i class="mdi mdi-alert-circle mr-1"></i> Disk health is not optimal. Use for boot with caution.</p>
+                                            </div>
                                         </button>
                                     </template>
                                 </div>
@@ -440,30 +443,33 @@
                             </div>
 
                             <!-- Data Selection -->
-                            <div class="space-y-6">
+                            <div class="space-y-6 flex flex-col">
                                 <h3 class="text-xl font-bold text-white flex items-center gap-2">
-                                    <i class="mdi mdi-database text-sky-400"></i> Data Disks
+                                    <i class="mdi mdi-server text-sky-400"></i> Data Disks
                                 </h3>
                                 <p class="text-sm text-slate-400">Select disks for storage. SnapRAID parity is used if >1 disk is chosen.</p>
                                 
                                 <div class="space-y-3">
-                                    <template x-for="disk in hardwareData.disks" :key="disk.id">
+                                    <template x-for="disk in sortedDisks()" :key="disk.id">
                                         <button @click="toggleDisk(disk.id, 'data')"
-                                                df81ec3e7f29dfdb84a3a7eec1ea38348003b908x-show="!formData.disks.boot.includes(disk.id)"
+                                                x-show="!formData.disks.boot.includes(disk.id)"
                                                 :class="formData.disks.data.includes(disk.id) ? 'bg-fuchsia-600/20 border-fuchsia-500' : 'bg-slate-900 border-slate-700 opacity-60 hover:opacity-100'"
                                                 class="w-full p-4 border rounded-xl text-left transition-all group">
                                             <div class="flex justify-between items-center">
                                                 <div class="flex items-center gap-3">
-                                                    <i class="mdi mdi-server text-2xl" :class="formData.disks.data.includes(disk.id) ? 'text-white' : 'text-slate-500'"></i>
+                                                    <i :class="'mdi ' + getDiskIcon(disk.type) + ' text-2xl'" :class="formData.disks.data.includes(disk.id) ? 'text-white' : 'text-slate-500'"></i>
                                                     <div>
                                                         <div class="font-bold text-sm" x-text="disk.name"></div>
-                                                        <div class="text-[10px] uppercase text-slate-500 font-bold" x-text="disk.size + ' • ' + disk.type"></div>
+                                                        <div class="text-xs uppercase text-slate-500 font-bold" x-text="disk.size + ' • ' + disk.type"></div>
                                                     </div>
                                                 </div>
                                                 <div class="text-right">
-                                                    <div class="text-[10px] font-bold" :class="disk.health === 'PASSED' ? 'text-green-500' : 'text-amber-500'" x-text="'Health: ' + disk.health"></div>
+                                                    <div class="text-xs font-bold" :class="disk.health === 'PASSED' ? 'text-green-500' : 'text-amber-500'" x-text="'Health: ' + disk.health"></div>
                                                 </div>
                                             </div>
+                                            <div x-show="formData.disks.data.includes(disk.id) && disk.health !== 'PASSED'" class="mt-3 p-2 bg-amber-500/10 border border-amber-500/30 rounded-lg">
+                                                <p class="text-[10px] text-amber-200/80"><i class="mdi mdi-alert-circle mr-1"></i> SMART health warning. Consider replacing before use as data storage.</p>
+                                            </div>
                                         </button>
                                     </template>
                                 </div>
@@ -1192,6 +1198,21 @@
                         }
                     }
                 },
+                sortedDisks() {
+                    const order = { 'NVMe': 0, 'SSD': 1, 'HDD': 2, 'USB': 3, 'Other': 4 };
+                    return [...this.hardwareData.disks].sort((a, b) => {
+                        return (order[a.type] ?? 5) - (order[b.type] ?? 5);
+                    });
+                },
+                getDiskIcon(type) {
+                    switch(type) {
+                        case 'NVMe': return 'mdi-flash';
+                        case 'SSD': return 'mdi-memory';
+                        case 'HDD': return 'mdi-harddisk';
+                        case 'USB': return 'mdi-usb';
+                        default: return 'mdi-harddisk';
+                    }
+                },
                 toggleDisk(id, category) {
                     const list = this.formData.disks[category];
                     const index = list.indexOf(id);