feat: Move error dialogue to bottom of editor.

src/lib/components/Editor.svelte

@@ -6,7 +6,7 @@
   import * as monaco from 'monaco-editor';
   import monacoJsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
   import monacoEditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
-  import { onMount } from 'svelte';
+  import { onMount, onDestroy } from 'svelte';
   import { initEditor } from '$lib/util/monacoExtra';
   import { logEvent } from '$lib/util/stats';
 
@@ -110,7 +110,7 @@
     });
 
     if (divEl.parentElement) {
-      resizeObserver.observe(divEl.parentElement);
+      resizeObserver.observe(divEl);
     }
 
     // @ts-ignore
@@ -118,11 +118,27 @@
       // @ts-ignore
       window.editorLoaded = true;
     }
-    return () => {
-      // console.log(`editor disposed`);
-      editor?.dispose();
-    };
+  });
+
+  onDestroy(() => {
+    editor?.dispose();
   });
 </script>
 
-<div bind:this={divEl} id="editor" class="overflow-hidden" />
+<div class="flex flex-col h-full">
+  <div bind:this={divEl} id="editor" class="overflow-hidden flex-grow h-full" />
+  {#if $stateStore.error instanceof Error}
+    <div class="flex flex-col text-neutral-100">
+      <div class="bg-red-700 p-2">
+        <div class="flex gap-2 items-center">
+          <i class="fa fa-exclamation-circle w-4" aria-hidden="true" />
+          <p class="text-sm">Diagram syntax error</p>
+        </div>
+      </div>
+      <div class="bg-red-600 font-mono max-h-28 overflow-auto p-2 text-sm">
+        <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+        {@html $stateStore.error?.toString().replace(/\n/g, '<br />')}
+      </div>
+    </div>
+  {/if}
+</div>

src/lib/components/View.svelte

@@ -125,18 +125,12 @@
   });
 </script>
 
-{#if (error && $stateStore.error instanceof Error) || outOfSync}
+{#if outOfSync}
   <div
-    class="absolute w-full p-2 z-10 font-mono {error
-      ? 'text-red-600'
-      : 'text-yellow-600'} bg-base-100 bg-opacity-80 text-left"
+    class="absolute w-full p-8 z-10 font-mono text-yellow-600 bg-base-100 bg-opacity-80 text-center"
     id="errorContainer">
-    {#if error}
-      {@html $stateStore.error?.toString().replace(/\n/g, '<br />')}
-    {:else}
-      Diagram out of sync. <br />
-      Press <i class="fas fa-sync" /> (Sync button) or <kbd>{cmdKey} + Enter</kbd> to sync.
-    {/if}
+    Diagram out of sync. <br />
+    Press <i class="fas fa-sync" /> (Sync button) or <kbd>{cmdKey} + Enter</kbd> to sync.
   </div>
 {/if}