feat: show browser not supported popup at startup

src/assets/translations/en.json

@@ -124,5 +124,10 @@
 	"EXPLAIN_BLOCK": "Explain Block ✨",
 	"META_ATTRIBUTION": "Built with Meta Llama 3",
 	"AI_RATE_LIMITED": "The explanation robot is a little too busy right now, please try again later.",
-	"CHOOSING_ROBOT": "Choose your board"
+	"CHOOSING_ROBOT": "Choose your board",
+	"BROWSER_NOT_SUPPORTED": "The browser you are using doesn't support web-serial.",
+	"BROWSER_NOT_SUPPORTED_1": "You won't be able to upload your code.",
+	"BROWSER_NOT_SUPPORTED_SUGGESTION": "A chromium based browser should work (Edge/Chrome/Brave)",
+	"ACKNOWLEDGE_BROWSER_NOT_SUPPORTED": "I understand",
+	"ACKNOWLEDGE_BROWSER_NOT_SUPPORTED_DONT_SHOW_AGAIN": "Don't show again"
 }

src/assets/translations/nl.json

@@ -124,5 +124,10 @@
 	"EXPLAIN_BLOCK": "Leg blok uit ✨",
 	"META_ATTRIBUTION": "Gemaakt met Meta Llama 3",
 	"AI_RATE_LIMITED": "De uitleg robot is op dit moment erg druk, probeer het later nog eens.",
-	"CHOOSING_ROBOT": "Kies je arduino"
+	"CHOOSING_ROBOT": "Kies je arduino",
+	"BROWSER_NOT_SUPPORTED": "De browser die je gebruikt support geen web-serial.",
+	"BROWSER_NOT_SUPPORTED_1": "Je zal daardoor je code niet kunnen uploaden.",
+	"BROWSER_NOT_SUPPORTED_SUGGESTION": "Een chromium based browser zou werken (Edge/Chrome/Brave)",
+	"ACKNOWLEDGE_BROWSER_NOT_SUPPORTED": "I snap het",
+	"ACKNOWLEDGE_BROWSER_NOT_SUPPORTED_DONT_SHOW_AGAIN": "Laat niet meer zien"
 }

src/lib/components/core/popups/popups/BrowserNotSupported.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+import Button from "$components/ui/Button.svelte";
+import { type PopupState, popups } from "$state/popup.svelte";
+import { getContext } from "svelte";
+import { _ } from "svelte-i18n";
+import type { Writable } from "svelte/store";
+
+const popupState = getContext<Writable<PopupState>>("state");
+function close() {
+	popups.close($popupState.id);
+}
+function close_dont_show_again() {
+	localStorage.setItem("dontShowBrowserNotSupported", "true");
+	popups.close($popupState.id);
+}
+</script>
+
+<div class="content">
+	<div class="text">{$_("BROWSER_NOT_SUPPORTED")}</div>
+	<div class="text">{$_("BROWSER_NOT_SUPPORTED_1")}</div>
+	<div class="text">{$_("BROWSER_NOT_SUPPORTED_SUGGESTION")}</div>
+</div>
+
+<div class="actions">
+	<Button name={$_("ACKNOWLEDGE_BROWSER_NOT_SUPPORTED")} mode={"accent"} onclick={close} bold={true} />
+	<Button name={$_("ACKNOWLEDGE_BROWSER_NOT_SUPPORTED_DONT_SHOW_AGAIN")} mode={"accent"} onclick={close_dont_show_again} bold={true} />
+</div>
+
+<style>
+	.content {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		width: 800px;
+		padding: 20px;
+		gap: 20px;
+		text-align: center;
+		font-size: larger;
+	}
+
+	.actions {
+		display: flex;
+		justify-content: center;
+		margin-top: 20px;
+		padding: 20px;
+		gap: 20px;
+	}
+</style>

src/lib/state/popup.svelte.ts

@@ -1,3 +1,4 @@
+import BrowserNotSupported from "$components/core/popups/popups/BrowserNotSupported.svelte";
 import Credits from "$components/core/popups/popups/Credits.svelte";
 import LanguageSelector from "$components/core/popups/popups/LanguageSelector.svelte";
 import type { ComponentType } from "svelte";
@@ -92,4 +93,15 @@ export async function setup() {
 			allowInteraction: false,
 		});
 	}
+
+	if (
+		!localStorage.getItem("dontShowBrowserNotSupported") &&
+		navigator.serial === undefined
+	) {
+		await popups.open({
+			component: BrowserNotSupported,
+			data: {},
+			allowInteraction: false,
+		});
+	}
 }