get errors and warnings out of the way of the code, finally

site/src/components/Repl/CodeMirror.svelte

@@ -20,9 +20,7 @@
 	export let mode;
 	export let code;
 	export let readonly = false;
-	export let error = null;
 	export let errorLoc = null;
-	export let warningCount = 0;
 	export let flex = false;
 	export let lineNumbers = true;
 	export let tab = true;
@@ -200,8 +198,7 @@
 		background-color: rgba(200, 0, 0, .05);
 	}
 
-	.loading,
+	.loading {
-	.error {
 		text-align: center;
 		color: #999;
 		font-weight: 400;
@@ -245,13 +242,6 @@
 	}
 </style>
 
-<!--
------------------------------------------------
-	syntax-highlighting [prism]
-	NOTE
-	- just started to transfer colors from prism to codemirror
------------------------------------------------
--->
 <div class='codemirror-container' class:flex bind:offsetWidth={w} bind:offsetHeight={h}>
 	<textarea
 		tabindex='2'
@@ -260,29 +250,6 @@
 		value={code}
 	></textarea>
 
-	{#if error}
-		<p class='error message'>
-			{#if error.loc}
-				<strong>
-					{#if error.filename}
-						<span
-							class='filename'
-							on:click="{() => navigate({ filename: error.filename })}"
-						>{error.filename}</span>
-					{/if}
-
-					({error.loc.line}:{error.loc.column})
-				</strong>
-			{/if}
-
-			{error.message}
-		</p>
-	{:else if warningCount > 0}
-		<p class='warning message'>
-			Compiled, but with {warningCount} {warningCount === 1 ? 'warning' : 'warnings'} — check the console for details
-		</p>
-	{/if}
-
 	{#if !CodeMirror}
 		<pre style="position: absolute; left: 0; top: 0"
 		>{code}</pre>

site/src/components/Repl/Input/ModuleEditor.svelte

@@ -2,7 +2,7 @@
 	import { getContext } from 'svelte';
 	import CodeMirror from '../CodeMirror.svelte';
 
-	const { selected, handle_change } = getContext('REPL');
+	const { selected, handle_change, navigate } = getContext('REPL');
 
 	export let error;
 	export let errorLoc;
@@ -13,10 +13,49 @@
 	.editor-wrapper {
 		z-index: 5;
 		background: var(--back-light);
+		display: flex;
+		flex-direction: column;
+	}
+
+	.editor {
+		height: 0;
+		flex: 1;
+	}
+
+	.info p {
+		position: relative;
+		color: white;
+		padding: 1.2rem 1.6rem 1.2rem 4.4rem;
+		font: 400 1.2rem/1.7 var(--font);
+		margin: 0;
+		border-top: 1px solid white;
+	}
+
+	.info p::before {
+		content: '!';
+		position: absolute;
+		left: 1.2rem;
+		top: 1.1rem;
+		width: 1rem;
+		height: 1rem;
+		text-align: center;
+		line-height: 1;
+		padding: .4rem;
+		border-radius: 50%;
+		color: white;
+		border: .2rem solid white;
+	}
+
+	.error {
+		background-color: #da106e;
+	}
+
+	.warning {
+		background-color: #e47e0a;
 	}
 
 	@media (min-width: 600px) {
-		.editor-wrapper {
+		.editor-wrapper.columns {
 			/* make it easier to interact with scrollbar */
 			padding-right: 8px;
 			height: auto;
@@ -26,14 +65,22 @@
 </style>
 
 <div class="editor-wrapper">
+	<div class="editor">
 		{#if $selected}
 			<CodeMirror
 				mode="{$selected.type === 'js' ? 'javascript' : 'handlebars'}"
 				code={$selected.source}
-			{error}
 				{errorLoc}
-			{warningCount}
 				on:change={handle_change}
 			/>
 		{/if}
+	</div>
+
+	<div class="info">
+		{#if error}
+			<p class="error" on:click="{() => navigate(error)}">{error.message}</p>
+		{:else if warningCount > 0}
+			<p class="warning">Compiled, but with {warningCount} {warningCount === 1 ? 'warning' : 'warnings'} — check the console for details</p>
+		{/if}
+	</div>
 </div>

site/src/components/Repl/Output/index.svelte

@@ -170,7 +170,6 @@
 	<CodeMirror
 		mode="javascript"
 		code="{view === 'js' ? js : css}"
-		error={sourceError}
 		errorLoc={sourceErrorLoc}
 		readonly
 	/>
@@ -180,7 +179,6 @@
 			<CodeMirror
 				mode="javascript"
 				code="{view === 'js' ? js : css}"
-				error={sourceError}
 				errorLoc={sourceErrorLoc}
 				readonly
 			/>

site/src/components/Repl/index.svelte

@@ -11,7 +11,7 @@
 	export let version = 'beta'; // TODO change this to latest when the time comes
 	export let app;
 	export let embedded = false;
-	export let orientation = 'auto';
+	export let orientation = 'columns';
 	export let show_props = true;
 
 	export function toJSON() {
@@ -262,7 +262,7 @@
 	}
 </style>
 
-<div class="container" bind:clientWidth={width}>
+<div class="container" class:orientation bind:clientWidth={width}>
 	<div class="repl-inner" class:offset="{show_output}">
 		<SplitPane
 			type="{orientation === 'rows' ? 'vertical' : 'horizontal'}"