feat: bootloader warning

refactor: reword linux premission warning

src/i18n/de/index.ts

@@ -67,6 +67,7 @@ const de = {
       TITLE: "Bootmenü",
       REBOOT: "Neustarten",
       BOOTLOADER: "Bootloader",
+      POWER_WARNING: "Um vom Bootloader aus neu zu starten muss das Gerät neu verbunden werden.",
     },
   },
   browserWarning: {

src/i18n/en/index.ts

@@ -60,12 +60,12 @@ const en = {
     TERMINAL: "Terminal",
     APPLY_SETTINGS: "Flash changes to device",
     NO_DEVICE: "No device connected",
-    LINUX_PERMISSIONS:
-      "On most Linux based systems need to adjust permissions in order to connnect your device.",
+    LINUX_PERMISSIONS: "Most Linux based systems need adjusted permissions in order to connect your device.",
     bootMenu: {
       TITLE: "Boot Menu",
       REBOOT: "Reboot",
       BOOTLOADER: "Bootloader",
+      POWER_WARNING: "To reboot from bootloader you need to physically reconnect your device.",
     },
   },
   browserWarning: {

src/routes/ConnectionPopup.svelte

@@ -5,8 +5,26 @@
   import {preference} from "$lib/preferences"
   import LL from "../i18n/i18n-svelte"
 
+  function reboot() {
+    $serialPort?.reboot()
+    $serialPort = undefined
+    powerDialog = false
+  }
+
+  function bootloader() {
+    $serialPort?.bootloader()
+    $serialPort = undefined
+    rebootInfo = true
+    powerDialog = false
+  }
+
+  let rebootInfo = false
   let terminal = false
   let powerDialog = false
+
+  $: if ($serialPort) {
+    rebootInfo = false
+  }
 </script>
 
 <section>
@@ -26,18 +44,19 @@
   {/if}
 
   {#if browser}
-    {#if navigator.userAgent.includes("Linux")}
-      <details class="linux-info">
+    {#if navigator.userAgent.includes("Linux") && !$serialPort}
+      <details class="linux-info" transition:slide>
         <summary>{@html $LL.deviceManager.LINUX_PERMISSIONS()}</summary>
+        In most cases you can simply follow the
+        <a target="_blank" href="https://docs.arduino.cc/software/ide-v1/tutorials/Linux#please-read"
+          >Arduino Guide</a
+        >
+        on serial port permissions.
+        <p>Special systems:</p>
         <ul>
-          <li>
-            <a target="_blank" href="https://docs.arduino.cc/software/ide-v1/tutorials/Linux#please-read"
-              >Debian (Ubuntu, Mint, Pop!_OS, ...), Fedora, OpenSUSE</a
-            >
-          </li>
           <li>
             <a target="_blank" href="https://wiki.archlinux.org/title/Arduino#Accessing_serial"
-              >Arch (Manjaro, EndeavourOS, ...)</a
+              >Arch and Arch-based like Manjaro or EndeavourOS</a
             >
           </li>
           <li>
@@ -55,6 +74,9 @@
         </ul>
       </details>
     {/if}
+    {#if rebootInfo}
+      <p transition:slide><b>{$LL.deviceManager.bootMenu.POWER_WARNING()}</b></p>
+    {/if}
     <div class="row">
       {#if $serialPort}
         <button
@@ -98,17 +120,11 @@
       />
       <dialog open transition:slide={{duration: 250}}>
         <h3>{$LL.deviceManager.bootMenu.TITLE()}</h3>
-        <button
-          on:click={() => {
-            $serialPort?.reboot()
-            $serialPort = undefined
-          }}><span class="icon">restart_alt</span>{$LL.deviceManager.bootMenu.REBOOT()}</button
+        <button on:click={reboot}
+          ><span class="icon">restart_alt</span>{$LL.deviceManager.bootMenu.REBOOT()}</button
         >
-        <button
-          on:click={() => {
-            $serialPort?.bootloader()
-            $serialPort = undefined
-          }}><span class="icon">rule_settings</span>{$LL.deviceManager.bootMenu.BOOTLOADER()}</button
+        <button on:click={bootloader}
+          ><span class="icon">rule_settings</span>{$LL.deviceManager.bootMenu.BOOTLOADER()}</button
         >
       </dialog>
     {/if}
@@ -126,7 +142,8 @@
 
   details a {
     display: inline;
-    padding-inline-start: 0;
+    padding-inline: 0;
+    text-decoration: underline;
   }
 
   section {
@@ -135,8 +152,7 @@
     align-items: flex-start;
     justify-content: flex-start;
 
-    min-width: 260px;
-    max-width: 400px;
+    width: 300px;
   }
 
   summary {