Moving files around

src/lib/components/editor/EditorWithLogs.svelte

@@ -0,0 +1,118 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import Editor from './Editor.svelte';
+  import LogPanel from './LogPanel.svelte';
+  import type { EditorSettingsStore } from '../../stores/editorSettings';
+
+  interface Props {
+    value: string;
+    language?: 'javascript' | 'html' | 'css';
+    onChange?: (value: string) => void;
+    onExecute?: (code: string) => void;
+    logs?: string[];
+    editorSettings: EditorSettingsStore;
+  }
+
+  let {
+    value = '',
+    language = 'javascript',
+    onChange,
+    onExecute,
+    logs = [],
+    editorSettings
+  }: Props = $props();
+
+  let logPanelRef: LogPanel;
+
+  let editorHeight = $state(70);
+  let isResizing = $state(false);
+  let startY = $state(0);
+  let startHeight = $state(0);
+
+  function handleResizeStart(e: MouseEvent) {
+    isResizing = true;
+    startY = e.clientY;
+    startHeight = editorHeight;
+    e.preventDefault();
+  }
+
+  function handleResizeMove(e: MouseEvent) {
+    if (!isResizing) return;
+
+    const container = document.querySelector('.editor-with-logs');
+    if (!container) return;
+
+    const containerHeight = container.clientHeight;
+    const deltaY = e.clientY - startY;
+    const deltaPercent = (deltaY / containerHeight) * 100;
+    const newHeight = Math.max(20, Math.min(80, startHeight + deltaPercent));
+
+    editorHeight = newHeight;
+  }
+
+  function handleResizeEnd() {
+    isResizing = false;
+  }
+
+  onMount(() => {
+    document.addEventListener('mousemove', handleResizeMove);
+    document.addEventListener('mouseup', handleResizeEnd);
+
+    return () => {
+      document.removeEventListener('mousemove', handleResizeMove);
+      document.removeEventListener('mouseup', handleResizeEnd);
+    };
+  });
+
+</script>
+
+<div class="editor-with-logs">
+  <div class="editor-section" style="height: {editorHeight}%;">
+    <Editor
+      {value}
+      {language}
+      {onChange}
+      {onExecute}
+      {editorSettings}
+    />
+  </div>
+
+  <div class="resize-divider" onmousedown={handleResizeStart}></div>
+
+  <div class="logs-section" style="height: {100 - editorHeight}%;">
+    <LogPanel bind:this={logPanelRef} {logs} />
+  </div>
+</div>
+
+<style>
+  .editor-with-logs {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+  }
+
+  .editor-section {
+    position: relative;
+    overflow: hidden;
+  }
+
+  .resize-divider {
+    height: 4px;
+    background-color: #2a2a2a;
+    cursor: ns-resize;
+    transition: background-color 0.2s;
+    z-index: 10;
+  }
+
+  .resize-divider:hover,
+  .resize-divider:active {
+    background-color: #646cff;
+  }
+
+  .logs-section {
+    position: relative;
+    overflow: hidden;
+  }
+</style>