feat: show browser not supported popup at startup (#112)

* feat: show browser not supported popup at startup

* fix: if browser supports webusb then do not show warning, also adjusted styling for the popup

* chore: biome

* fix: I snap het

---------

Co-authored-by: Koen <[email protected]>

src/assets/translations/en.json

@@ -125,6 +125,11 @@
 	"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",
+	"BROWSER_NOT_SUPPORTED": "The browser you are using doesn't support web-serial or web-usb.",
+	"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",
 	"INVALID_ROBOT_TITLE": "Incompatible device",
 	"INVALID_ROBOT": "The selected robot {robot} does not work with the automatically detected {board}!",
 	"INCOMPATIBLE_PROJECT": "Incompatible",

src/assets/translations/nl.json

@@ -125,6 +125,11 @@
 	"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",
+	"BROWSER_NOT_SUPPORTED": "De browser die je gebruikt support geen web-serial of web-usb.",
+	"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": "Ik snap het",
+	"ACKNOWLEDGE_BROWSER_NOT_SUPPORTED_DONT_SHOW_AGAIN": "Laat niet meer zien",
 	"INVALID_ROBOT_TITLE": "Ongeschikte robot",
 	"INVALID_ROBOT": "De geselecteerde robot {robot} werkt niet met de automatisch gedetecteerde {board}!",
 	"INCOMPATIBLE_PROJECT": "Ongeschikt",

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

@@ -0,0 +1,56 @@
+<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="error">
+	<h2 class="text">{$_("BROWSER_NOT_SUPPORTED")}</h2>
+</div>
+
+<div class="content">
+	<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={"primary"} onclick={close} bold={true} />
+	<Button name={$_("ACKNOWLEDGE_BROWSER_NOT_SUPPORTED_DONT_SHOW_AGAIN")} mode={"secondary"} onclick={close_dont_show_again} bold={true} />
+</div>
+
+<style>
+	.error {
+		border-radius: 5px;
+		padding: 10px;
+		color: red;
+		text-align: center;
+	}
+
+	.content {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		width: 800px;
+		gap: 10px;
+		text-align: center;
+	}
+
+	.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,16 @@ export async function setup() {
 			allowInteraction: false,
 		});
 	}
+
+	if (
+		!localStorage.getItem("dontShowBrowserNotSupported") &&
+		navigator.serial === undefined &&
+		navigator.usb === undefined
+	) {
+		await popups.open({
+			component: BrowserNotSupported,
+			data: {},
+			allowInteraction: false,
+		});
+	}
 }