From 00fa9bff21173d7c2056653e151accd6865e2f3f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Forment?= <raphael.forment@gmail.com>
Date: Thu, 13 Nov 2025 18:23:08 +0100
Subject: [PATCH] Feat: eval button

---
 src/App.svelte                                | 20 +++++++++++++++++++
 src/lib/components/editor/Editor.svelte       |  2 +-
 .../components/editor/EditorWithLogs.svelte   |  6 ++++++
 3 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/src/App.svelte b/src/App.svelte
index 2cbea96..83c86de 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -34,6 +34,7 @@
     PanelLeftOpen,
     PanelRightOpen,
     CircleStop,
+    Play,
   } from "lucide-svelte";
 
   const appContext = createAppContext();
@@ -51,6 +52,7 @@
 
   let analyserNode = $state<AnalyserNode | null>(null);
   let interpreterLogs = $state<LogEntry[]>([]);
+  let editorWithLogsRef: EditorWithLogs;
 
   let logsUnsubscribe: (() => void) | undefined;
 
@@ -350,6 +352,15 @@
         <Share2 size={18} />
       </button>
     {/snippet}
+    <button
+      onclick={() => editorWithLogsRef?.triggerEvaluate()}
+      class="icon-button evaluate-button"
+      disabled={!$initialized}
+      class:is-running={$running}
+      title="Evaluate (Cmd-E)"
+    >
+      <Play size={18} />
+    </button>
     <button
       onclick={() => uiState.toggleScope()}
       class="icon-button"
@@ -405,6 +416,7 @@
 
     <div class="editor-area">
       <EditorWithLogs
+        bind:this={editorWithLogsRef}
         value={projectEditor.content}
         onChange={handleEditorChange}
         onExecute={handleExecute}
@@ -588,6 +600,14 @@
     border-color: var(--danger-hover);
   }
 
+  .icon-button.evaluate-button.is-running {
+    color: var(--accent-color);
+  }
+
+  .icon-button.evaluate-button.is-running:hover:not(:disabled) {
+    border-color: var(--accent-color);
+  }
+
   h3 {
     margin-top: 0;
     color: var(--text-color);
diff --git a/src/lib/components/editor/Editor.svelte b/src/lib/components/editor/Editor.svelte
index 90b48a3..efd74ac 100644
--- a/src/lib/components/editor/Editor.svelte
+++ b/src/lib/components/editor/Editor.svelte
@@ -47,7 +47,7 @@
   const hoverTooltipCompartment = new Compartment();
   const themeCompartment = new Compartment();
 
-  function handleExecute() {
+  export function handleExecute() {
     if (!editorView) return;
 
     if (mode === 'composition') {
diff --git a/src/lib/components/editor/EditorWithLogs.svelte b/src/lib/components/editor/EditorWithLogs.svelte
index b7e0eb9..92a638c 100644
--- a/src/lib/components/editor/EditorWithLogs.svelte
+++ b/src/lib/components/editor/EditorWithLogs.svelte
@@ -22,8 +22,13 @@
     mode = 'composition'
   }: Props = $props();
 
+  let editorRef: Editor;
   let logPanelRef: LogPanel;
 
+  export function triggerEvaluate() {
+    editorRef?.handleExecute();
+  }
+
   let editorHeight = $state(70);
   let isResizing = $state(false);
   let startY = $state(0);
@@ -82,6 +87,7 @@
 <div class="editor-with-logs">
   <div class="editor-section" style="height: {editorHeight}%;">
     <Editor
+      bind:this={editorRef}
       {value}
       {onChange}
       {onExecute}