style: sort board families alphabetically (ESP, nRF, RP)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/components/BoardSelector.svelte

@@ -56,25 +56,8 @@
     {/each}
   </div>
 
-  <p class="text-xs text-text-dim mb-2 font-mono">RP2040</p>
-  <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 mb-4">
-    {#each rpBoards as board}
-      <button
-        class="text-left bg-bg-card border p-4 rounded transition-all cursor-pointer
-          {selected?.id === board.id
-          ? 'border-accent shadow-[0_0_12px_oklch(from_var(--color-accent)_l_c_h_/_0.15)]'
-          : 'border-border hover:border-border-bright'}"
-        onclick={() => onselect(board)}
-      >
-        <div class="font-mono font-medium text-text text-sm">{board.name}</div>
-        <div class="text-xs text-text-muted mt-1">{board.mcu} &middot; {board.radio}</div>
-        <div class="text-xs {badgeColor(board)} mt-2 font-mono">{badgeText(board)}</div>
-      </button>
-    {/each}
-  </div>
-
   <p class="text-xs text-text-dim mb-2 font-mono">nRF52840</p>
-  <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+  <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 mb-4">
     {#each nrfBoards as board}
       <button
         class="text-left bg-bg-card border p-4 rounded transition-all cursor-pointer
@@ -89,4 +72,21 @@
       </button>
     {/each}
   </div>
+
+  <p class="text-xs text-text-dim mb-2 font-mono">RP2040</p>
+  <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+    {#each rpBoards as board}
+      <button
+        class="text-left bg-bg-card border p-4 rounded transition-all cursor-pointer
+          {selected?.id === board.id
+          ? 'border-accent shadow-[0_0_12px_oklch(from_var(--color-accent)_l_c_h_/_0.15)]'
+          : 'border-border hover:border-border-bright'}"
+        onclick={() => onselect(board)}
+      >
+        <div class="font-mono font-medium text-text text-sm">{board.name}</div>
+        <div class="text-xs text-text-muted mt-1">{board.mcu} &middot; {board.radio}</div>
+        <div class="text-xs {badgeColor(board)} mt-2 font-mono">{badgeText(board)}</div>
+      </button>
+    {/each}
+  </div>
 </div>

src/lib/boards.ts

@@ -40,15 +40,6 @@ export const boards: BoardDef[] = [
     flashMethod: "uf2",
     assetPattern: "donglora-rak_wisblock_4631-v{version}.uf2",
   },
-  {
-    id: "waveshare_rp2040_lora",
-    name: "Waveshare RP2040-LoRa",
-    mcu: "RP2040",
-    radio: "SX1262",
-    family: "rp2040",
-    flashMethod: "uf2",
-    assetPattern: "donglora-waveshare_rp2040_lora-v{version}.uf2",
-  },
   {
     id: "wio_tracker_l1",
     name: "Wio Tracker L1",
@@ -58,6 +49,15 @@ export const boards: BoardDef[] = [
     flashMethod: "uf2",
     assetPattern: "donglora-wio_tracker_l1-v{version}.uf2",
   },
+  {
+    id: "waveshare_rp2040_lora",
+    name: "Waveshare RP2040-LoRa",
+    mcu: "RP2040",
+    radio: "SX1262",
+    family: "rp2040",
+    flashMethod: "uf2",
+    assetPattern: "donglora-waveshare_rp2040_lora-v{version}.uf2",
+  },
 ];
 
 export function getAssetName(board: BoardDef, version: string): string {

src/pages/index.astro

@@ -240,13 +240,13 @@ your code ──► client lib ──┘</pre>
         <p class="text-xs text-info mt-2 font-mono">UF2 Download</p>
       </div>
       <div class="bg-bg-card border border-border p-5 rounded">
-        <h3 class="font-mono font-medium text-text mb-2">Waveshare RP2040-LoRa</h3>
-        <p class="text-sm text-text-muted">RP2040 &middot; SX1262</p>
+        <h3 class="font-mono font-medium text-text mb-2">Wio Tracker L1</h3>
+        <p class="text-sm text-text-muted">nRF52840 &middot; SX1262</p>
         <p class="text-xs text-info mt-2 font-mono">UF2 Download</p>
       </div>
       <div class="bg-bg-card border border-border p-5 rounded">
-        <h3 class="font-mono font-medium text-text mb-2">Wio Tracker L1</h3>
-        <p class="text-sm text-text-muted">nRF52840 &middot; SX1262</p>
+        <h3 class="font-mono font-medium text-text mb-2">Waveshare RP2040-LoRa</h3>
+        <p class="text-sm text-text-muted">RP2040 &middot; SX1262</p>
         <p class="text-xs text-info mt-2 font-mono">UF2 Download</p>
       </div>
     </div>