From 2c009d734f6ca8e0e8db47a408755d88577defdd Mon Sep 17 00:00:00 2001
From: Ronald Moesbergen <rmoesbergen@users.noreply.github.com>
Date: Thu, 9 May 2024 19:03:26 +0200
Subject: [PATCH 1/8] fix: require a filename for save as dialog

---
 src/lib/components/core/header/Header.svelte        |  1 +
 src/lib/components/core/popups/popups/Prompt.svelte | 10 +++++++++-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/core/header/Header.svelte b/src/lib/components/core/header/Header.svelte
index d8390f1..c829c3b 100644
--- a/src/lib/components/core/header/Header.svelte
+++ b/src/lib/components/core/header/Header.svelte
@@ -100,6 +100,7 @@ async function saveProjectAs() {
 			name: "SAVEAS",
 			placeholder: "GIVE_FILENAME",
 			confirm: "SAVE",
+			requireValue: true,
 		},
 		allowInteraction: false,
 	});
diff --git a/src/lib/components/core/popups/popups/Prompt.svelte b/src/lib/components/core/popups/popups/Prompt.svelte
index 5776dca..ee8852f 100644
--- a/src/lib/components/core/popups/popups/Prompt.svelte
+++ b/src/lib/components/core/popups/popups/Prompt.svelte
@@ -11,8 +11,15 @@ interface Props {
 	placeholder: string;
 	confirm: string;
 	value?: string;
+	requireValue: boolean;
 }
-let { name, placeholder, confirm, value = $bindable("") }: Props = $props();
+let {
+	name,
+	placeholder,
+	confirm,
+	value = $bindable(""),
+	requireValue = false,
+}: Props = $props();
 const popupState = getContext<Writable<PopupState>>("state");
 
 function cancel() {
@@ -20,6 +27,7 @@ function cancel() {
 }
 
 function save() {
+	if (requireValue && !value) return;
 	popups.close($popupState.id, value);
 }
 

From 90bffb60a51cf874655e5783dca931fc4e4c8890 Mon Sep 17 00:00:00 2001
From: Ronald Moesbergen <rmoesbergen@users.noreply.github.com>
Date: Fri, 10 May 2024 09:38:56 +0200
Subject: [PATCH 2/8] fix: add required attribute to input when prompt requires
 a value

---
 src/lib/components/core/popups/popups/Prompt.svelte | 3 ++-
 src/lib/components/ui/TextInput.svelte              | 3 +++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/core/popups/popups/Prompt.svelte b/src/lib/components/core/popups/popups/Prompt.svelte
index ee8852f..067a6ea 100644
--- a/src/lib/components/core/popups/popups/Prompt.svelte
+++ b/src/lib/components/core/popups/popups/Prompt.svelte
@@ -11,7 +11,7 @@ interface Props {
 	placeholder: string;
 	confirm: string;
 	value?: string;
-	requireValue: boolean;
+	requireValue?: boolean;
 }
 let {
 	name,
@@ -45,6 +45,7 @@ function onsubmit(event: SubmitEvent) {
         mode={"secondary"}
         rounded={true}
         focus={true}
+		required={requireValue}
     />
     <div class="actions">
         <Button onclick={cancel} mode={"secondary"} name={$_("CANCEL")} />
diff --git a/src/lib/components/ui/TextInput.svelte b/src/lib/components/ui/TextInput.svelte
index a2d6ee5..c18557f 100644
--- a/src/lib/components/ui/TextInput.svelte
+++ b/src/lib/components/ui/TextInput.svelte
@@ -7,6 +7,7 @@ interface Props {
 	mode: "primary" | "secondary";
 	rounded: boolean;
 	focus?: boolean;
+	required?: boolean;
 }
 let {
 	placeholder,
@@ -14,6 +15,7 @@ let {
 	mode,
 	rounded,
 	focus,
+	required,
 }: Props = $props();
 
 let input: HTMLInputElement;
@@ -31,6 +33,7 @@ onMount(() => {
     class:primary={mode === "primary"}
     class:secondary={mode === "secondary"}
     class:rounded
+	{required}
 />
 
 <style>

From c1f4d6c500b378c30e73495780b718226b87f26d Mon Sep 17 00:00:00 2001
From: Ronald Moesbergen <rmoesbergen@users.noreply.github.com>
Date: Fri, 10 May 2024 10:19:10 +0200
Subject: [PATCH 3/8] chore: format with tabs

---
 .../core/popups/popups/Prompt.svelte          | 49 ++++++++++---------
 1 file changed, 25 insertions(+), 24 deletions(-)

diff --git a/src/lib/components/core/popups/popups/Prompt.svelte b/src/lib/components/core/popups/popups/Prompt.svelte
index 067a6ea..c8f2423 100644
--- a/src/lib/components/core/popups/popups/Prompt.svelte
+++ b/src/lib/components/core/popups/popups/Prompt.svelte
@@ -13,6 +13,7 @@ interface Props {
 	value?: string;
 	requireValue?: boolean;
 }
+
 let {
 	name,
 	placeholder,
@@ -38,33 +39,33 @@ function onsubmit(event: SubmitEvent) {
 </script>
 
 <form class="content" {onsubmit}>
-    <h2>{$_(name)}</h2>
-    <TextInput
-        bind:value
-        placeholder={$_(placeholder)}
-        mode={"secondary"}
-        rounded={true}
-        focus={true}
+	<h2>{$_(name)}</h2>
+	<TextInput
+		bind:value
+		placeholder={$_(placeholder)}
+		mode={"secondary"}
+		rounded={true}
+		focus={true}
 		required={requireValue}
-    />
-    <div class="actions">
-        <Button onclick={cancel} mode={"secondary"} name={$_("CANCEL")} />
-        <Button onclick={save} mode={"primary"} name={$_(confirm)} />
-    </div>
+	/>
+	<div class="actions">
+		<Button onclick={cancel} mode={"secondary"} name={$_("CANCEL")}/>
+		<Button onclick={save} mode={"primary"} name={$_(confirm)}/>
+	</div>
 </form>
 
 <style>
-    .content {
-        padding: 20px;
-        display: flex;
-        flex-direction: column;
-        min-width: 400px;
-        text-align: center;
-    }
+	.content {
+		padding: 20px;
+		display: flex;
+		flex-direction: column;
+		min-width: 400px;
+		text-align: center;
+	}
 
-    .actions {
-        display: flex;
-        justify-content: space-between;
-        margin-top: 20px;
-    }
+	.actions {
+		display: flex;
+		justify-content: space-between;
+		margin-top: 20px;
+	}
 </style>

From b16ab705f7388c0431f48b023df187b4e5e475fc Mon Sep 17 00:00:00 2001
From: Ronald Moesbergen <rmoesbergen@users.noreply.github.com>
Date: Fri, 10 May 2024 10:20:30 +0200
Subject: [PATCH 4/8] chore: fix more spaces

---
 src/lib/components/ui/TextInput.svelte | 70 ++++++++++++++------------
 1 file changed, 37 insertions(+), 33 deletions(-)

diff --git a/src/lib/components/ui/TextInput.svelte b/src/lib/components/ui/TextInput.svelte
index c18557f..f1bbd0d 100644
--- a/src/lib/components/ui/TextInput.svelte
+++ b/src/lib/components/ui/TextInput.svelte
@@ -9,6 +9,7 @@ interface Props {
 	focus?: boolean;
 	required?: boolean;
 }
+
 let {
 	placeholder,
 	value = $bindable(""),
@@ -25,43 +26,46 @@ onMount(() => {
 </script>
 
 <input
-    bind:this={input}
-    class="input"
-    type="text"
-    {placeholder}
-    bind:value
-    class:primary={mode === "primary"}
-    class:secondary={mode === "secondary"}
-    class:rounded
+	bind:this={input}
+	class="input"
+	type="text"
+	{placeholder}
+	bind:value
+	class:primary={mode === "primary"}
+	class:secondary={mode === "secondary"}
+	class:rounded
 	{required}
 />
 
 <style>
-    .input {
-        border: none;
-        padding: 5px 10px;
-        margin: 0;
-        width: 100%;
-        outline: 0;
-        font-size: 1em;
-    }
+	.input {
+		border: none;
+		padding: 5px 10px;
+		margin: 0;
+		width: 100%;
+		outline: 0;
+		font-size: 1em;
+	}
+
+	.primary {
+		background: var(--primary);
+		color: var(--on-primary);
+	}
+
+	.secondary {
+		background: var(--secondary);
+		color: var(--on-secondary);
+	}
+
+	.rounded {
+		border-radius: 20px;
+	}
 
-    .primary {
-        background: var(--primary);
-        color: var(--on-primary);
-    }
-    .secondary {
-        background: var(--secondary);
-        color: var(--on-secondary);
-    }
-    .rounded {
-        border-radius: 20px;
-    }
+	.primary::placeholder {
+		color: var(--text-muted);
+	}
 
-    .primary::placeholder {
-        color: var(--text-muted);
-    }
-    .secondary::placeholder {
-        color: var(--on-secondary-muted);
-    }
+	.secondary::placeholder {
+		color: var(--on-secondary-muted);
+	}
 </style>

From 5c800961fadc471b392c5920b0dd372a0c903393 Mon Sep 17 00:00:00 2001
From: Ronald Moesbergen <rmoesbergen@users.noreply.github.com>
Date: Sat, 11 May 2024 14:46:57 +0200
Subject: [PATCH 5/8] fix: use form onsumbit instead of button onclick

---
 src/lib/components/core/header/Header.svelte        | 2 +-
 src/lib/components/core/popups/popups/Prompt.svelte | 5 ++---
 src/lib/components/ui/Button.svelte                 | 7 ++++---
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/core/header/Header.svelte b/src/lib/components/core/header/Header.svelte
index c829c3b..7de0df8 100644
--- a/src/lib/components/core/header/Header.svelte
+++ b/src/lib/components/core/header/Header.svelte
@@ -51,7 +51,7 @@ import {
 	faVolumeHigh,
 	faVolumeXmark,
 } from "@fortawesome/free-solid-svg-icons";
-import { Xml, serialization } from "blockly";
+import { serialization } from "blockly";
 import JSZip from "jszip";
 import { get } from "svelte/store";
 import MicroPythonIO from "../../../micropython";
diff --git a/src/lib/components/core/popups/popups/Prompt.svelte b/src/lib/components/core/popups/popups/Prompt.svelte
index c8f2423..b7c390f 100644
--- a/src/lib/components/core/popups/popups/Prompt.svelte
+++ b/src/lib/components/core/popups/popups/Prompt.svelte
@@ -28,7 +28,6 @@ function cancel() {
 }
 
 function save() {
-	if (requireValue && !value) return;
 	popups.close($popupState.id, value);
 }
 
@@ -38,7 +37,7 @@ function onsubmit(event: SubmitEvent) {
 }
 </script>
 
-<form class="content" {onsubmit}>
+<form class="content" onsubmit={onsubmit}>
 	<h2>{$_(name)}</h2>
 	<TextInput
 		bind:value
@@ -50,7 +49,7 @@ function onsubmit(event: SubmitEvent) {
 	/>
 	<div class="actions">
 		<Button onclick={cancel} mode={"secondary"} name={$_("CANCEL")}/>
-		<Button onclick={save} mode={"primary"} name={$_(confirm)}/>
+		<Button type="submit" mode={"primary"} name={$_(confirm)}/>
 	</div>
 </form>
 
diff --git a/src/lib/components/ui/Button.svelte b/src/lib/components/ui/Button.svelte
index f766cbc..2208974 100644
--- a/src/lib/components/ui/Button.svelte
+++ b/src/lib/components/ui/Button.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 import type { IconDefinition } from "@fortawesome/free-solid-svg-icons";
-import { type Snippet, onDestroy, onMount, setContext } from "svelte";
-import Fa from "svelte-fa";
+import type { Snippet } from "svelte";
 import { type Writable, writable } from "svelte/store";
 import ContextMenu from "./ContextMenu.svelte";
 
@@ -13,6 +12,7 @@ interface Props {
 	disabled?: boolean;
 	mode: "primary" | "secondary" | "outlined" | "accent";
 	bold?: boolean;
+	type?: "button" | "submit";
 }
 const {
 	name,
@@ -22,6 +22,7 @@ const {
 	bold,
 	icon,
 	disabled,
+	type = "button",
 }: Props = $props();
 
 let btn: HTMLButtonElement = $state();
@@ -42,7 +43,7 @@ function onContext() {
     bind:this={btn}
     {onclick}
     {disabled}
-    type="button"
+	{type}
     class="btn"
     class:primary={mode === "primary"}
     class:secondary={mode === "secondary"}

From a455dde2a115baaab6f052f73b6a1888841ea3ce Mon Sep 17 00:00:00 2001
From: Ronald Moesbergen <rmoesbergen@users.noreply.github.com>
Date: Sat, 11 May 2024 15:00:10 +0200
Subject: [PATCH 6/8] fix: missing imports

---
 src/lib/components/core/header/Header.svelte | 1 +
 src/lib/components/ui/Button.svelte          | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/core/header/Header.svelte b/src/lib/components/core/header/Header.svelte
index 7de0df8..b1c4b6d 100644
--- a/src/lib/components/core/header/Header.svelte
+++ b/src/lib/components/core/header/Header.svelte
@@ -53,6 +53,7 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import { serialization } from "blockly";
 import JSZip from "jszip";
+import type { Writable } from "svelte/store";
 import { get } from "svelte/store";
 import MicroPythonIO from "../../../micropython";
 import About from "../popups/popups/About.svelte";
diff --git a/src/lib/components/ui/Button.svelte b/src/lib/components/ui/Button.svelte
index 2208974..86d97c1 100644
--- a/src/lib/components/ui/Button.svelte
+++ b/src/lib/components/ui/Button.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 import type { IconDefinition } from "@fortawesome/free-solid-svg-icons";
-import type { Snippet } from "svelte";
+import { type Snippet, onDestroy, onMount, setContext } from "svelte";
+import Fa from "svelte-fa";
 import { type Writable, writable } from "svelte/store";
 import ContextMenu from "./ContextMenu.svelte";
 

From 78b24a3529ba5a06a3dde3d207af2d9a09022a16 Mon Sep 17 00:00:00 2001
From: Ronald Moesbergen <rmoesbergen@users.noreply.github.com>
Date: Sat, 11 May 2024 15:03:52 +0200
Subject: [PATCH 7/8] fix: onsubmit shortcut

---
 src/lib/components/core/popups/popups/Prompt.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/core/popups/popups/Prompt.svelte b/src/lib/components/core/popups/popups/Prompt.svelte
index b7c390f..c404626 100644
--- a/src/lib/components/core/popups/popups/Prompt.svelte
+++ b/src/lib/components/core/popups/popups/Prompt.svelte
@@ -37,7 +37,7 @@ function onsubmit(event: SubmitEvent) {
 }
 </script>
 
-<form class="content" onsubmit={onsubmit}>
+<form class="content" {onsubmit}>
 	<h2>{$_(name)}</h2>
 	<TextInput
 		bind:value

From 172801870e74ee351f3bdc506cd7458fe243ffd4 Mon Sep 17 00:00:00 2001
From: Ronald Moesbergen <rmoesbergen@users.noreply.github.com>
Date: Sat, 11 May 2024 15:50:18 +0200
Subject: [PATCH 8/8] chore: reformat button

---
 src/lib/components/ui/Button.svelte | 122 +++++++++++++++-------------
 1 file changed, 64 insertions(+), 58 deletions(-)

diff --git a/src/lib/components/ui/Button.svelte b/src/lib/components/ui/Button.svelte
index 86d97c1..366fd63 100644
--- a/src/lib/components/ui/Button.svelte
+++ b/src/lib/components/ui/Button.svelte
@@ -15,6 +15,7 @@ interface Props {
 	bold?: boolean;
 	type?: "button" | "submit";
 }
+
 const {
 	name,
 	mode,
@@ -29,6 +30,7 @@ const {
 let btn: HTMLButtonElement = $state();
 
 const open = writable(false);
+
 function onContext() {
 	if (!context) return;
 
@@ -37,70 +39,74 @@ function onContext() {
 </script>
 
 {#if $open}
-    <ContextMenu {open} source={btn} content={context} />
+	<ContextMenu {open} source={btn} content={context}/>
 {/if}
 
 <button
-    bind:this={btn}
-    {onclick}
-    {disabled}
+	bind:this={btn}
+	{onclick}
+	{disabled}
 	{type}
-    class="btn"
-    class:primary={mode === "primary"}
-    class:secondary={mode === "secondary"}
-    class:outlined={mode === "outlined"}
-    class:accent={mode === "accent"}
-    class:bold
+	class="btn"
+	class:primary={mode === "primary"}
+	class:secondary={mode === "secondary"}
+	class:outlined={mode === "outlined"}
+	class:accent={mode === "accent"}
+	class:bold
 >
-    {#if icon}
-        {#if typeof icon === "string"}
-            <img class="icon" src={icon} alt="Icon" />
-        {:else}
-            <Fa {icon} />
-        {/if}
-    {/if}
-    {#if name}{name}{/if}
+	{#if icon}
+		{#if typeof icon === "string"}
+			<img class="icon" src={icon} alt="Icon"/>
+		{:else}
+			<Fa {icon}/>
+		{/if}
+	{/if}
+	{#if name}{name}{/if}
 </button>
 
 <style>
-    .btn {
-        display: flex;
-        gap: 5px;
-        align-items: center;
-        cursor: pointer;
-        border-radius: 20px;
-        background: none;
-        border: none;
-        padding: 10px 15px;
-    }
-
-    .icon {
-        height: 1em;
-    }
-
-    .primary {
-        background: var(--primary);
-        color: var(--on-primary);
-    }
-    .secondary {
-        background: var(--secondary);
-        color: var(--on-secondary);
-    }
-    .outlined {
-        border: 1px solid var(--accent);
-        color: var(--on-primary);
-    }
-    .accent {
-        background: var(--accent);
-        color: var(--on-accent);
-    }
-    .bold {
-        font-weight: bolder;
-        font-size: 1.1em;
-    }
-
-    .btn[disabled] {
-        filter: opacity(.5);
-        cursor: unset;
-    }
+	.btn {
+		display: flex;
+		gap: 5px;
+		align-items: center;
+		cursor: pointer;
+		border-radius: 20px;
+		background: none;
+		border: none;
+		padding: 10px 15px;
+	}
+
+	.icon {
+		height: 1em;
+	}
+
+	.primary {
+		background: var(--primary);
+		color: var(--on-primary);
+	}
+
+	.secondary {
+		background: var(--secondary);
+		color: var(--on-secondary);
+	}
+
+	.outlined {
+		border: 1px solid var(--accent);
+		color: var(--on-primary);
+	}
+
+	.accent {
+		background: var(--accent);
+		color: var(--on-accent);
+	}
+
+	.bold {
+		font-weight: bolder;
+		font-size: 1.1em;
+	}
+
+	.btn[disabled] {
+		filter: opacity(.5);
+		cursor: unset;
+	}
 </style>