feat: add an issue report button

Author: ItsMeBrianD

src/lib/editor/Mirror.svelte

@@ -124,7 +124,6 @@
 
 		lspClient.connect({
 			send(m) {
-				const msg = JSON.parse(m);
 				editor.project.lspWrite(m);
 			},
 			subscribe(h) {

src/lib/editor/ProjectEditor.svelte

@@ -2,7 +2,7 @@
 	import Mirror from '$lib/editor/Mirror.svelte';
 	import PreviewPicker from '$lib/editor/PreviewPicker.svelte';
 	import { onMount } from 'svelte';
-	import { createEditorContext } from './MMSEditor.svelte';
+	import { useEditorContext } from './MMSEditor.svelte';
 	import { Pane, Splitpanes } from 'svelte-splitpanes';
 	import * as v from 'valibot';
 	import DeepslateRendererOffloaded, {
@@ -12,8 +12,7 @@
 	import { Icon } from '@steeze-ui/svelte-icon';
 	import { Download } from '@steeze-ui/tabler-icons';
 
-	const editor = createEditorContext();
-
+	const editor = useEditorContext();
 	const sizingSchema = v.object({
 		picker: v.number(),
 		center: v.number(),
@@ -64,7 +63,9 @@
 			<aside
 				class="flex h-full min-h-0 w-full flex-col gap-4 overflow-x-hidden bg-slate-100 px-2 py-1 font-mono text-sm text-ellipsis"
 			>
-				<button class="flex gap-2 items-center" onclick={() => editor.project.download()}><Icon src={Download} class="w-4"/> Export</button>
+				<button class="flex items-center gap-2" onclick={() => editor.project.download()}
+					><Icon src={Download} class="w-4" /> Export</button
+				>
 				<PreviewPicker />
 			</aside>
 		</Pane>
@@ -76,7 +77,7 @@
 				}}
 			>
 				<Pane size={sizes.mirror}>
-					<div class="min-h-0 max-h-full w-full overflow-x-hidden">
+					<div class="max-h-full min-h-0 w-full overflow-x-hidden">
 						<Mirror />
 					</div>
 				</Pane>

src/routes/+layout.svelte

@@ -1,7 +1,41 @@
 <script lang="ts">
+	import { Icon } from '@steeze-ui/svelte-icon';
 	import '../app.css';
+	import { BrandGithub, Bug } from '@steeze-ui/tabler-icons';
+	import { createEditorContext } from '../lib/editor/MMSEditor.svelte';
 
 	let { children } = $props();
+	const editor = createEditorContext();
+
+	let issueLink = $derived.by(() => {
+		const out = new URL('https://github.com/minecraftmetascript/mms/issues/new');
+
+		out.searchParams.set(
+			'body',
+			`
+# MMS Editor Bug Report:
+
+## Problem
+
+*[add a short description of the issue you're having here]*
+
+## Expected Behavior
+
+*[add a short description of what you expected to happen here]*
+
+<details>
+<summary>Issue Script</summary>
+\`\`\`
+${editor.project.source['wasm.mms']}
+\`\`\`
+</details>
+`.trim()
+		);
+
+		return out.toString();
+	});
+
+	$inspect(editor.project.source);
 </script>
 
 <main class="flex h-svh w-svw flex-col">
@@ -15,13 +49,24 @@
 			<br />
 			This tool is <strong>NOT</strong> production ready.
 		</p>
-		<a
-			href="https://github.com/minecraftmetascript/mms"
-			target="_blank"
-			class="absolute top-2 right-2 font-mono text-sm uppercase hover:underline"
-		>
-			Github
-		</a>
+		<div class="absolute top-2 right-2 flex justify-end gap-4 text-sm">
+			<a
+				href={issueLink}
+				target="_blank"
+				class="flex items-center gap-1 font-mono text-sm whitespace-nowrap uppercase hover:underline"
+			>
+				<Icon src={Bug} class="h-4" />
+				Report an Issue
+			</a>
+			<a
+				href="https://github.com/minecraftmetascript/mms"
+				target="_blank"
+				class="flex items-center gap-1 font-mono text-sm uppercase hover:underline"
+			>
+				<Icon src={BrandGithub} class="h-4" />
+				Github
+			</a>
+		</div>
 	</header>
 	{@render children?.()}
 </main>