From 2be257e5942c8a18d508b388090c5b48b06748dc Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Sun, 1 Oct 2023 00:18:44 +0200
Subject: [PATCH] add fullscreen for eval fields

---
 .../inputEditor/EvalV2InputEditor.svelte      | 62 ++++++++++++++-----
 1 file changed, 47 insertions(+), 15 deletions(-)

diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/EvalV2InputEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/EvalV2InputEditor.svelte
index b03e0aaa29..4c29f79502 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/EvalV2InputEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/EvalV2InputEditor.svelte
@@ -6,6 +6,8 @@
 	import SimpleEditor from '$lib/components/SimpleEditor.svelte'
 	import { buildExtraLib } from '$lib/components/apps/utils'
 	import { inferDeps } from '../../appUtilsInfer'
+	import { Maximize2 } from 'lucide-svelte'
+	import { Drawer } from '$lib/components/common'
 
 	export let componentInput: EvalV2AppInput | undefined
 	export let id: string
@@ -39,25 +41,55 @@
 			inferDeps(code, $worldStore.outputsById, componentInput, app)
 		}
 	}
+
+	let fullscreen = false
 </script>
 
 {#if componentInput?.type === 'evalv2'}
-	<div class="border">
-		<SimpleEditor
-			bind:this={editor}
-			lang="javascript"
-			bind:code={componentInput.expr}
-			shouldBindKey={false}
-			{extraLib}
-			autoHeight
-			on:change={async (e) => {
-				if (onchange) {
-					onchange()
-				}
-				inferDepsFromCode(e.detail.code)
-			}}
-		/>
+	{#if fullscreen}
+		<Drawer placement="bottom" on:close={() => (fullscreen = false)} open>
+			<SimpleEditor
+				class="h-full w-full"
+				bind:this={editor}
+				lang="javascript"
+				bind:code={componentInput.expr}
+				shouldBindKey={false}
+				fixedOverflowWidgets={false}
+				{extraLib}
+				on:change={async (e) => {
+					if (onchange) {
+						onchange()
+					}
+					inferDepsFromCode(e.detail.code)
+				}}
+			/>
+		</Drawer>
+	{/if}
+	<div class="border relative">
+		{#if !fullscreen}
+			<SimpleEditor
+				bind:this={editor}
+				lang="javascript"
+				bind:code={componentInput.expr}
+				shouldBindKey={false}
+				{extraLib}
+				autoHeight
+				on:change={async (e) => {
+					if (onchange) {
+						onchange()
+					}
+					inferDepsFromCode(e.detail.code)
+				}}
+			/>
+			<button
+				class="border bg-surface absolute top-0.5 right-2 p-0.5"
+				on:click={() => (fullscreen = true)}><Maximize2 size={12} /></button
+			>
+		{:else}
+			<pre class="text-small border px-2">{componentInput.expr}</pre>
+		{/if}
 	</div>
+
 	{#if componentInput?.expr && componentInput.expr != '' && componentInput.expr
 			.trim()
 			.startsWith('{')}