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

---
 configurator/index.html | 71 +++++++++++++++++++++--------------------
 deploy.sh               |  2 +-
 2 files changed, 37 insertions(+), 36 deletions(-)

diff --git a/configurator/index.html b/configurator/index.html
index f1fa5a8..87ae9f3 100644
--- a/configurator/index.html
+++ b/configurator/index.html
@@ -32,7 +32,7 @@
                         <ul x-show="isSectionActive(section)" x-collapse 
                             class="space-y-0 pl-1 border-l-2 border-slate-800 ml-1 transition-all duration-500">
                             <template x-for="minor in section.minors" :key="minor.step">
-                                <li class="relative flex items-center gap-3 py-2 -ml-[7px] group">
+                                <li class="relative flex items-center gap-3 py-2.5 -ml-[7px] group">
                                     <!-- Status Dot -->
                                     <div :class="{
                                             'bg-fuchsia-500 shadow-[0_0_10px_rgba(192,38,211,0.8)] scale-125': step === minor.step,
@@ -42,7 +42,7 @@
                                          class="w-3 h-3 rounded-full shrink-0 transition-all duration-300 z-10"></div>
                                     
                                     <!-- Label -->
-                                    <span :class="step === minor.step ? 'text-white font-bold' : 'text-slate-500'" 
+                                    <span :class="step === minor.step ? 'text-white font-bold' : 'text-slate-400'" 
                                           class="text-[11px] leading-tight transition-colors" x-text="minor.label"></span>
                                 </li>
                             </template>
@@ -253,7 +253,7 @@
                                             <div class="w-10 h-10 rounded-full bg-slate-800 flex items-center justify-center text-sky-400 font-bold" x-text="(user.name.charAt(0) || user.username.charAt(0) || '?').toUpperCase()"></div>
                                             <div>
                                                 <p class="font-bold text-slate-200 text-lg group-hover:text-white transition-colors" x-text="user.name || user.username || 'New User'"></p>
-                                                <p class="text-[10px] text-slate-500 uppercase tracking-widest font-bold group-hover:text-white transition-colors" x-text="user.isStatic ? 'Administrator (Sudo)' : 'Standard User'"></p>
+                                                <p class="text-xs text-slate-500 uppercase tracking-widest font-bold group-hover:text-white transition-colors" x-text="user.isStatic ? 'Administrator (Sudo)' : 'Standard User'"></p>
                                             </div>
                                         </div>
                                         <button x-show="!user.isStatic" @click="removeUser(index)" class="text-slate-500 hover:text-red-500 transition-colors">
@@ -263,7 +263,7 @@
                                     
                                     <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                         <div class="space-y-1">
-                                            <label class="text-[10px] font-bold text-slate-400 uppercase tracking-tighter">Username <span class="text-fuchsia-500" x-show="user.isStatic">*</span></label>
+                                            <label class="text-xs font-bold text-slate-400 uppercase tracking-tighter">Username <span class="text-fuchsia-500" x-show="user.isStatic">*</span></label>
                                             <div class="relative">
                                                 <i class="mdi mdi-account absolute left-3 top-1/2 -translate-y-1/2 text-slate-600"></i>
                                                 <input type="text" x-model="user.username" :disabled="user.isStatic" 
@@ -272,7 +272,7 @@
                                             </div>
                                         </div>
                                         <div class="space-y-1">
-                                            <label class="text-[10px] font-bold text-slate-400 uppercase tracking-tighter">Display Name <span class="text-fuchsia-500" x-show="user.isStatic">*</span></label>
+                                            <label class="text-xs font-bold text-slate-400 uppercase tracking-tighter">Display Name <span class="text-fuchsia-500" x-show="user.isStatic">*</span></label>
                                             <div class="relative">
                                                 <i class="mdi mdi-card-account-details absolute left-3 top-1/2 -translate-y-1/2 text-slate-600"></i>
                                                 <input type="text" x-model="user.name" :placeholder="user.isStatic ? 'Alexandre' : 'Full Name'" 
@@ -280,7 +280,7 @@
                                             </div>
                                         </div>
                                         <div class="space-y-1">
-                                            <label class="text-[10px] font-bold text-slate-400 uppercase tracking-tighter">Email Address <span class="text-fuchsia-500" x-show="user.isStatic">*</span></label>
+                                            <label class="text-xs font-bold text-slate-400 uppercase tracking-tighter">Email Address <span class="text-fuchsia-500" x-show="user.isStatic">*</span></label>
                                             <div class="relative">
                                                 <i class="mdi mdi-email absolute left-3 top-1/2 -translate-y-1/2 text-slate-600"></i>
                                                 <input type="email" x-model="user.email" placeholder="admin@example.com" 
@@ -403,15 +403,24 @@
                             </div>
                         </div>
 
-                        <div class="grid grid-cols-1 md:grid-cols-2 gap-10 items-start">
-                            <!-- Boot Selection -->
-                            <div class="space-y-6 flex flex-col">
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-x-10 gap-y-6 items-start">
+                            <!-- Headers Row: Aligned horizontally -->
+                            <div class="space-y-2">
                                 <h3 class="text-xl font-bold text-white flex items-center gap-2">
                                     <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">
+                            </div>
+
+                            <div class="space-y-2">
+                                <h3 class="text-xl font-bold text-white flex items-center gap-2">
+                                    <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>
+
+                            <!-- Lists Row: Aligned horizontally -->
+                            <div class="space-y-3">
                                     <template x-for="disk in sortedDisks()" :key="disk.id">
                                         <button @click="toggleDisk(disk.id, 'boot')"
                                                 x-show="!formData.disks.data.includes(disk.id)"
@@ -430,26 +439,20 @@
                                                 </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>
+                                                <p class="text-xs text-amber-200/80"><i class="mdi mdi-alert-circle mr-1"></i>Disk did not passed SMART test. You should consider using another disk.</p>
                                             </div>
                                         </button>
                                     </template>
-                                </div>
 
-                                <!-- Boot Safety Warning -->
                                 <div x-show="formData.disks.boot.length === 1" class="bg-amber-500/5 border border-amber-500/20 p-4 rounded-xl">
                                     <p class="text-xs text-amber-200/70"><i class="mdi mdi-shield-alert mr-1"></i> <strong>Striped Config:</strong> Using only one boot disk provides no hardware redundancy. If this drive fails, the system will not boot.</p>
                                 </div>
+                                <div x-show="formData.disks.boot.length === 2" class="bg-green-500/5 border border-green-500/20 p-4 rounded-xl">
+                                    <p class="text-xs text-green-400/70"><i class="mdi mdi-shield-check mr-1"></i> <strong>Mirror RAID Active:</strong> Your data is protected by redundancy.</p>
+                                </div>
                             </div>
 
-                            <!-- Data Selection -->
-                            <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-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">
+                            <div class="space-y-3">
                                     <template x-for="disk in sortedDisks()" :key="disk.id">
                                         <button @click="toggleDisk(disk.id, 'data')"
                                                 x-show="!formData.disks.boot.includes(disk.id)"
@@ -468,18 +471,16 @@
                                                 </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>
+                                                <p class="text-xs text-amber-200/80"><i class="mdi mdi-alert-circle mr-1"></i>Disk did not passed SMART test. You should consider using another disk.</p>
                                             </div>
                                         </button>
                                     </template>
-                                </div>
 
-                                <!-- Data Safety Warning -->
                                 <div x-show="formData.disks.data.length === 1" class="bg-amber-500/5 border border-amber-500/20 p-4 rounded-xl">
                                     <p class="text-xs text-amber-200/70"><i class="mdi mdi-shield-alert mr-1"></i> <strong>Striped Config:</strong> One data disk provides no parity. Data loss will occur if this drive fails.</p>
                                 </div>
                                 <div x-show="formData.disks.data.length > 1" class="bg-green-500/5 border border-green-500/20 p-4 rounded-xl">
-                                    <p class="text-xs text-green-400/70"><i class="mdi mdi-shield-check mr-1"></i> <strong>SnapRAID Active:</strong> Your data is protected by parity drives.</p>
+                                    <p class="text-xs text-green-400/70"><i class="mdi mdi-shield-check mr-1"></i> <strong>SnapRAID Active:</strong> Your data is protected by redundancy.</p>
                                 </div>
                             </div>
                         </div>
@@ -534,7 +535,7 @@
                                             <img src="https://cdn.jsdelivr.net/gh/selfhst/icons@main/svg/netbird.svg" class="w-8 h-8" alt="NetBird">
                                             <div class="font-bold text-xl" :class="formData.remote_access.provider === 'netbird-cloud' ? 'text-white' : 'text-slate-200 group-hover:text-white'">NetBird Cloud</div>
                                         </div>
-                                        <span class="text-[10px] bg-green-500/20 text-green-400 px-2 py-1 rounded uppercase font-bold">Recommended for small teams</span>
+                                        <span class="text-xs bg-green-500/20 text-green-400 px-2 py-1 rounded uppercase font-bold">Recommended for small teams</span>
                                     </div>
                                     <p class="text-sm leading-relaxed transition-colors" :class="formData.remote_access.provider === 'netbird-cloud' ? 'text-white' : 'text-slate-400 group-hover:text-white'">The easiest zero-trust solution. Perfect for families and teams of up to 5 people.</p>
                                 </button>
@@ -700,7 +701,7 @@
                                                 <img :src="'https://cdn.jsdelivr.net/gh/selfhst/icons@main/svg/' + (serviceMetadata[dns].icon || dns) + '.svg'" class="w-6 h-6" :alt="dns">
                                                 <div class="font-bold capitalize text-lg" :class="formData.services.dns === dns ? 'text-white' : 'text-slate-200 group-hover:text-white'" x-text="dns"></div>
                                             </div>
-                                            <a :href="serviceMetadata[dns].link" target="_blank" @click.stop class="text-[10px] text-sky-400 underline opacity-40 group-hover:opacity-100 transition-opacity">Website</a>
+                                            <a :href="serviceMetadata[dns].link" target="_blank" @click.stop class="text-xs text-sky-400 underline opacity-40 group-hover:opacity-100 transition-opacity">Website</a>
                                         </div>
                                         <p class="text-sm leading-relaxed transition-colors" :class="formData.services.dns === dns ? 'text-white' : 'text-slate-400 group-hover:text-white'" x-text="serviceMetadata[dns].desc"></p>
                                     </button>
@@ -717,7 +718,7 @@
                                             <span class="text-base font-bold capitalize" x-text="app"></span>
                                         </div>
                                         <p class="text-sm leading-normal transition-colors" :class="formData.services.apps.includes(app) ? 'text-white' : 'text-slate-500 group-hover:text-white'" x-text="serviceMetadata[app].desc"></p>
-                                        <a :href="serviceMetadata[app].link" target="_blank" class="text-[10px] text-sky-400 underline opacity-0 group-hover:opacity-100 transition-opacity mt-auto">Learn more</a>
+                                        <a :href="serviceMetadata[app].link" target="_blank" class="text-xs text-sky-400 underline opacity-0 group-hover:opacity-100 transition-opacity mt-auto">Learn more</a>
                                     </label>
                                 </template>
                             </div>
@@ -734,7 +735,7 @@
                                             <img :src="'https://cdn.jsdelivr.net/gh/selfhst/icons@main/svg/' + (serviceMetadata[sys].icon || sys) + '.svg'" :class="formData.services.system.includes(sys) ? 'opacity-100' : 'opacity-40 group-hover:opacity-100'" class="w-6 h-6 transition-opacity" :alt="sys">
                                         </div>
                                         <p class="text-sm transition-colors" :class="formData.services.system.includes(sys) ? 'text-white' : 'text-slate-500 group-hover:text-white'" x-text="serviceMetadata[sys].desc"></p>
-                                        <a :href="serviceMetadata[sys].link" target="_blank" class="text-[10px] text-sky-400 underline opacity-0 group-hover:opacity-100 transition-opacity mt-auto">Learn more</a>
+                                        <a :href="serviceMetadata[sys].link" target="_blank" class="text-xs text-sky-400 underline opacity-0 group-hover:opacity-100 transition-opacity mt-auto">Learn more</a>
                                     </label>
                                 </template>
                             </div>
@@ -939,13 +940,13 @@
                         <h2 class="text-4xl font-bold text-white">Deploying Numbus...</h2>
                         <div class="bg-black/40 rounded-xl p-6 w-full font-mono text-left text-[10px] text-green-400 border border-slate-800">
                             <div class="flex justify-between items-center mb-4 border-b border-slate-800 pb-2">
-                                <span class="uppercase tracking-widest text-slate-500">Live Terminal Logs</span>
-                                <button class="text-[9px] bg-slate-800 px-2 py-0.5 rounded text-slate-400">Toggle Logs</button>
+                                <span class="uppercase tracking-widest text-slate-500 text-xs">Live Terminal Logs</span>
+                                <button class="text-xs bg-slate-800 px-2 py-1 rounded text-slate-400">Toggle Logs</button>
                             </div>
                             <div class="h-40 overflow-y-auto custom-scrollbar">
-                                <p class="text-fuchsia-400">[INFO] Starting deployment sequence...</p>
-                                <p class="text-sky-400">[CMD] nixos-anywhere --flake .#numbus-server</p>
-                                <p class="text-slate-500">[STDOUT] Initializing remote connection...</p>
+                                <p class="text-fuchsia-400 text-xs">[INFO] Starting deployment sequence...</p>
+                                <p class="text-sky-400 text-xs">[CMD] nixos-anywhere --flake .#numbus-server</p>
+                                <p class="text-slate-500 text-xs">[STDOUT] Initializing remote connection...</p>
                             </div>
                         </div>
                     </div>
diff --git a/deploy.sh b/deploy.sh
index 58105b0..9934eaf 100644
--- a/deploy.sh
+++ b/deploy.sh
@@ -109,8 +109,8 @@ for DISK in \$(lsblk -x SIZE -d -n -e 7,11 -o NAME); do
   HDD=\$(cat /sys/block/\$DISK/queue/rotational)
   TRANSPORT_PROTOCOL=\$(lsblk -x SIZE -d -n -e 7,11 -o TRAN /dev/\$DISK)
   if [[ "\$DISK" == "nvme*" ]]; then DISK_TYPE+=("NVMe");
-  elif [[ "\$HDD" -eq 1 ]]; then DISK_TYPE+=("HDD");
   elif [[ "\$TRANSPORT_PROTOCOL" == "usb" ]]; then DISK_TYPE+=("USB");
+  elif [[ "\$HDD" -eq 1 ]]; then DISK_TYPE+=("HDD");
   elif [[ "\$HDD" -eq 0 ]]; then DISK_TYPE+=("SSD");
   else DISK_TYPE+=("Other")
   fi