Show big warning if user tries to flash unstable firmware

Author: hhvrc

src/lib/components/FirmwareChannelSelector.svelte

@@ -61,12 +61,14 @@
     {#if channel === 'stable'}
       <CircleCheckBig color="#22c55e" />
       <p class="text-green-500">This is the recommended channel.</p>
+      <!--
     {:else if channel === 'beta'}
       <TriangleAlert color="#eab308" />
       <p class="text-yellow-500">This channel might contain bugs.</p>
+    -->
     {:else}
       <TriangleAlert color="#ef4444" />
-      <p class="text-red-500">Avoid this channel unless you know what you're doing.</p>
+      <p class="text-red-500 font-bold">DO NOT USE THIS UNLESS YOU KNOW WHAT YOU ARE DOING</p>
     {/if}
   </div>
 </div>

src/routes/flashtool/+page.svelte

@@ -2,6 +2,7 @@
   import { MessageCircleQuestion, SquareTerminal } from '@lucide/svelte';
   import { browser } from '$app/environment';
   import { PUBLIC_DISCORD_INVITE_URL } from '$env/static/public';
+  import type { FirmwareChannel } from '$lib/api/firmwareCDN';
   import Container from '$lib/components/Container.svelte';
   import FirmwareChannelSelector from '$lib/components/FirmwareChannelSelector.svelte';
   import TextInput from '$lib/components/input/TextInput.svelte';
@@ -58,6 +59,7 @@
 
   let showHelpDialog = $state(false);
 
+  let channel = $state<FirmwareChannel>('stable');
   let version = $state<string | null>(null);
   let board = $state<string | null>(null);
   let eraseBeforeFlash = $state<boolean>(false);
@@ -105,7 +107,7 @@
 
   {#if manager}
     <h3 class="scroll-m-20 text-2xl font-semibold tracking-tight">Select Channel</h3>
-    <FirmwareChannelSelector bind:version disabled={isFlashing} />
+    <FirmwareChannelSelector bind:channel bind:version disabled={isFlashing} />
 
     <h3 class="scroll-m-20 text-2xl font-semibold tracking-tight">Select Board</h3>
     <FirmwareBoardSelector {version} bind:selectedBoard={board} disabled={isFlashing} />
@@ -127,7 +129,14 @@
     </div>
 
     {#if version && board}
-      <FirmwareFlasher {version} {board} {manager} {eraseBeforeFlash} bind:isFlashing />
+      <FirmwareFlasher
+        {version}
+        {board}
+        {manager}
+        {eraseBeforeFlash}
+        showNonStableWarning={channel !== 'stable'}
+        bind:isFlashing
+      />
     {/if}
   {:else if port && !connectFailed}
     <div class="flex flex-col items-center gap-2">

src/routes/flashtool/FirmwareFlasher.svelte

@@ -2,6 +2,7 @@
   import { Microchip, TriangleAlert } from '@lucide/svelte';
   import { DownloadAndVerifyBoardBinary } from '$lib/api/firmwareCDN';
   import { Button } from '$lib/components/ui/button';
+  import * as Dialog from '$lib/components/ui/dialog';
   import { Progress } from '$lib/components/ui/progress';
   import FlashManager from './FlashManager';
 
@@ -10,6 +11,7 @@
     board: string;
     manager: FlashManager;
     eraseBeforeFlash: boolean;
+    showNonStableWarning: boolean;
     isFlashing?: boolean;
   }
 
@@ -18,9 +20,11 @@
     board,
     manager,
     eraseBeforeFlash,
+    showNonStableWarning,
     isFlashing = $bindable(false),
   }: Props = $props();
 
+  let riskAcknowledgeStatus = $state<'none' | 'shown' | 'accepted'>('none');
   let progressName = $state<string | null>(null);
   let progressPercent = $state<number | null>(null);
   let error = $state<string | null>(null);
@@ -65,6 +69,10 @@
   }
   async function FlashDevice() {
     if (isFlashing) return;
+    if (showNonStableWarning && riskAcknowledgeStatus !== 'accepted') {
+      riskAcknowledgeStatus = 'shown';
+      return;
+    }
     try {
       isFlashing = true;
       await FlashDeviceImpl();
@@ -76,6 +84,39 @@
   }
 </script>
 
+<!-- Risk acknowledgement modal -->
+<Dialog.Root open={riskAcknowledgeStatus === 'shown'}>
+  <Dialog.Content>
+    <Dialog.Header>
+      <Dialog.Title>⚠️ Unstable Firmware Warning</Dialog.Title>
+      <Dialog.Description>
+        You are about to install <strong class="text-red-500">experimental, non-stable firmware</strong>.
+        <br /><br />
+        This firmware is <strong class="text-red-500">not intended for general use</strong> and may contain
+        serious bugs, regressions, or incomplete features.
+        <br /><br />
+        <strong class="text-red-500">No support is provided for issues caused by non-stable firmware.</strong>
+      </Dialog.Description>
+    </Dialog.Header>
+
+    <div class="flex justify-end gap-2">
+      <Button
+        variant="secondary"
+        onclick={() => (riskAcknowledgeStatus = 'none')}
+      >
+        Cancel
+      </Button>
+
+      <Button
+        variant="destructive"
+        onclick={() => (riskAcknowledgeStatus = 'accepted')}
+      >
+        I UNDERSTAND AND ACCEPT ALL RISKS
+      </Button>
+    </div>
+  </Dialog.Content>
+</Dialog.Root>
+
 <div class="flex flex-col items-stretch justify-start gap-4">
   <!-- Flash button -->
   <Button onclick={FlashDevice} disabled={!manager || isFlashing}>