feat: better connection error messages

resolve #159
fixes #158
fixes #153

src/lib/dialogs/ConnectionFailed.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">
+  import Dialog from "$lib/dialogs/Dialog.svelte";
+  import LL from "$i18n/i18n-svelte";
+
+  let {
+    message,
+    onclose,
+  }: {
+    message: string;
+    onclose: () => void;
+  } = $props();
+</script>
+
+<Dialog>
+  {#if !navigator.serial}
+    <h1>Incompatible Browser</h1>
+    <p>Your browser does not support the Web Serial API.</p>
+    <p>Supported browsers are any Chromium based Browsers, such as</p>
+    <ul>
+      <li>Google Chrome</li>
+      <li>Microsoft Edge</li>
+      <li>Opera</li>
+      <li>Brave</li>
+    </ul>
+  {:else}
+    <h1>Connection Failed</h1>
+    <pre>{message}</pre>
+    <h2>Troubleshooting Steps</h2>
+    <ul>
+      {#if navigator.userAgent.includes("Linux")}
+        <li>
+          <p>{@html $LL.deviceManager.LINUX_PERMISSIONS()}</p>
+          <p>
+            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>
+          <p>Special systems:</p>
+          <ul>
+            <li>
+              <a
+                target="_blank"
+                href="https://wiki.archlinux.org/title/Arduino#Accessing_serial"
+                >Arch and Arch-based like Manjaro or EndeavourOS</a
+              >
+            </li>
+            <li>
+              <a
+                target="_blank"
+                href="https://gist.github.com/CMCDragonkai/d00201ec143c9f749fc49533034e5009?permalink_comment_id=4670311#gistcomment-4670311"
+                >NixOS</a
+              >
+            </li>
+            <li>
+              <a
+                target="_blank"
+                href="https://wiki.gentoo.org/wiki/Arduino#Grant_access_to_non-root_users"
+                >Gentoo</a
+              >
+            </li>
+          </ul>
+        </li>
+      {/if}
+      <li>
+        You device may be pre-CCOS. refer to <a
+          target="_blank"
+          href="https://docs.charachorder.com/CCOS.html#upgrade-to-ccos"
+          >Upgrade to CCOS</a
+        > on how to upgrade your device.
+      </li>
+      <li>
+        Some USB cables or hubs can cause issues, try directly connecting to a
+        port on your computer with the included cable.
+      </li>
+    </ul>
+  {/if}
+  <div class="buttons">
+    <button class="primary" onclick={onclose}>Close</button>
+  </div>
+</Dialog>
+
+<style lang="scss">
+  h1 {
+    font-size: 2em;
+    text-align: center;
+    color: var(--md-sys-color-error);
+  }
+
+  .buttons {
+    display: flex;
+    justify-content: flex-end;
+    width: 100%;
+  }
+
+  pre {
+    color: var(--md-sys-color-error);
+  }
+
+  a {
+    display: inline;
+    color: var(--md-sys-color-primary);
+    padding: 0;
+  }
+</style>

src/lib/dialogs/connection-failed-dialog.ts

@@ -0,0 +1,24 @@
+import ConnectionFailed from "$lib/dialogs/ConnectionFailed.svelte";
+import { mount, unmount } from "svelte";
+
+export async function showConnectionFailedDialog(
+  message: string,
+): Promise<void> {
+  let resolvePromise: (value: void) => void;
+  const resultPromise = new Promise<void>((resolve) => {
+    resolvePromise = resolve;
+  });
+
+  const dialog = mount(ConnectionFailed, {
+    target: document.body,
+    props: {
+      message,
+      onclose: () => resolvePromise(),
+    },
+  });
+
+  const result = await resultPromise;
+  unmount(dialog);
+
+  return result;
+}

src/lib/serial/device.ts

@@ -9,6 +9,7 @@ import {
   stringifyPhrase,
 } from "$lib/serial/chord";
 import { browser } from "$app/environment";
+import { showConnectionFailedDialog } from "$lib/dialogs/connection-failed-dialog";
 
 const PORT_FILTERS: Map<string, SerialPortFilter> = new Map([
   ["ONE M0", { usbProductId: 32783, usbVendorId: 9114 }],
@@ -142,9 +143,8 @@ export class CharaDevice {
       this.chipset = chipset as typeof this.chipset;
       this.keyCount = KEY_COUNTS[this.device];
     } catch (e) {
-      alert(e);
       console.error(e);
-      throw e;
+      await showConnectionFailedDialog(String(e));
     }
   }
 

src/routes/(app)/Footer.svelte

@@ -16,6 +16,7 @@
     syncStatus,
   } from "$lib/serial/connection";
   import { fade, slide } from "svelte/transition";
+  import { showConnectionFailedDialog } from "$lib/dialogs/connection-failed-dialog";
 
   let locale = $state(
     (browser && (localStorage.getItem("locale") as Locales)) || detectLocale(),
@@ -52,9 +53,7 @@
       await initSerial(true);
     } catch (error) {
       console.error(error);
-      alert(
-        "Connection failed. Is your device maybe pre-CCOS? Refer to the doc link in the bottom left for more information on your device.",
-      );
+      await showConnectionFailedDialog(String(error));
     }
   }
 

src/routes/(app)/learn/sentence/+page.svelte

@@ -8,7 +8,6 @@
   import TrackChords from "$lib/charrecorder/TrackChords.svelte";
   import ChordHud from "$lib/charrecorder/ChordHud.svelte";
   import type { InferredChord } from "$lib/charrecorder/core/types";
-  import { onMount } from "svelte";
   import TrackText from "$lib/charrecorder/TrackText.svelte";
   import { browser } from "$app/environment";
   import { expoOut } from "svelte/easing";