From a8193566626197f50612975abf0c832df04bee5c Mon Sep 17 00:00:00 2001
From: Krasilnikov Roman <x0kill@ya.ru>
Date: Thu, 6 Jun 2024 22:31:38 +0300
Subject: [PATCH] Extract editor panel tabs

---
 src/components/editor/editor-surface.svelte   |   3 +-
 src/components/editor/editor.svelte           |   6 +-
 src/components/editor/panel/header.svelte     |  97 ++++++++
 src/components/editor/panel/model.ts          |  11 +
 src/components/editor/panel/panel.svelte      | 114 ++++++++++
 src/components/editor/panel/settings.svelte   |  14 ++
 src/components/editor/panel/terminal.svelte   |  20 ++
 src/components/editor/{ => panel}/terminal.ts |   0
 src/components/editor/panel/tests.svelte      |  34 +++
 src/components/editor/testing-panel.svelte    | 215 ------------------
 10 files changed, 295 insertions(+), 219 deletions(-)
 create mode 100644 src/components/editor/panel/header.svelte
 create mode 100644 src/components/editor/panel/model.ts
 create mode 100644 src/components/editor/panel/panel.svelte
 create mode 100644 src/components/editor/panel/settings.svelte
 create mode 100644 src/components/editor/panel/terminal.svelte
 rename src/components/editor/{ => panel}/terminal.ts (100%)
 create mode 100644 src/components/editor/panel/tests.svelte
 delete mode 100644 src/components/editor/testing-panel.svelte

diff --git a/src/components/editor/editor-surface.svelte b/src/components/editor/editor-surface.svelte
index 8a8d895..8fe4dde 100644
--- a/src/components/editor/editor-surface.svelte
+++ b/src/components/editor/editor-surface.svelte
@@ -20,7 +20,8 @@
   }
 
   const PANEL_BORDER_HEIGHT = 1
-  const MIN_PANEL_HEIGHT = 32 + PANEL_BORDER_HEIGHT
+  const PANEL_HEADER_VPADDING = 4 * 2
+  const MIN_PANEL_HEIGHT = 32 + PANEL_HEADER_VPADDING + PANEL_BORDER_HEIGHT
 
   function normalizeHeight(height: number) {
     return Math.min(Math.max(height, 0), window.innerHeight - MIN_PANEL_HEIGHT);
diff --git a/src/components/editor/editor.svelte b/src/components/editor/editor.svelte
index cf1bf50..6470929 100644
--- a/src/components/editor/editor.svelte
+++ b/src/components/editor/editor.svelte
@@ -11,7 +11,7 @@
 
   import EditorSurface from "./editor-surface.svelte";
   import LangSelect from "./lang-select.svelte";
-  import TestingPanel from "./testing-panel.svelte";
+  import Panel from "./panel/panel.svelte"
   import VimMode from './vim-mode.svelte';
 
   interface Props<L extends Language, I, O> {
@@ -68,7 +68,7 @@
 
 <EditorSurface {model} {widthStorage}>
   {#snippet panel({ resizer, api })}
-    <TestingPanel
+    <Panel
       {api}
       {model}
       {testsData}
@@ -79,6 +79,6 @@
         <VimMode {api} />
         <LangSelect bind:lang {languages} />
       {/snippet}
-    </TestingPanel>
+    </Panel>
   {/snippet}
 </EditorSurface>
diff --git a/src/components/editor/panel/header.svelte b/src/components/editor/panel/header.svelte
new file mode 100644
index 0000000..642436d
--- /dev/null
+++ b/src/components/editor/panel/header.svelte
@@ -0,0 +1,97 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import Icon from '@iconify/svelte';
+
+  import { type SurfaceApi } from '../model';
+  import { Tab, TAB_TITLES } from './model';
+
+  interface Props {
+    isRunning: boolean;
+    testsCount: number;
+    lastTestId: number;
+    selectedTab: Tab;
+    api: SurfaceApi;
+    onRun: () => void;
+    append: Snippet;
+  }
+
+  let {
+    selectedTab = $bindable(),
+    isRunning,
+    testsCount,
+    lastTestId,
+    api,
+    append,
+    onRun
+  }: Props = $props();
+
+  interface TabButtonProps { tab: Tab, append?: Snippet }
+</script>
+
+<div class="flex items-center gap-3 p-1">
+  <button
+    class="btn btn-sm btn-primary"
+    onclick={onRun}
+  >
+    {#if isRunning}
+      <span class="loading loading-spinner"></span>
+    {:else}
+      <Icon class="w-6" icon="lucide:play" />
+    {/if}
+  </button>
+  <div role="tablist" class="tabs panel-tabs">
+    {#snippet tabButton({ tab, append }: TabButtonProps)}
+      <a
+        href="#top"
+        role="tab"
+        class="tab"
+        class:tab-with-badge={append}
+        class:tab-active={selectedTab === tab}
+        onclick={() => {
+          selectedTab = tab
+          api.showPanel(window.innerHeight/3)
+        }}
+      >
+        {TAB_TITLES[tab]}
+        {#if append}
+          {@render append()}
+        {/if}
+      </a>
+    {/snippet}
+    {#snippet testBadge()}
+      <div
+        class="badge"
+        class:hidden={lastTestId < 0}
+        class:badge-success={lastTestId === testsCount}
+        class:badge-error={lastTestId < testsCount && lastTestId >= 0}
+      >
+        {lastTestId}/{testsCount}
+      </div>
+    {/snippet}
+    {@render tabButton({ tab: Tab.Tests, append: testBadge })}
+    {@render tabButton({ tab: Tab.Output })}
+    {@render tabButton({ tab: Tab.Settings })}
+  </div>
+  <div class="grow" ></div>
+  {@render append()}
+  <button
+    class="btn btn-sm btn-ghost"
+    onclick={() => {
+      api.togglePanel(window.innerHeight/3)
+    }}
+  >
+    <Icon icon={api.isPanelCollapsed ? "lucide:chevron-up" : "lucide:chevron-down"} />
+  </button>
+</div>
+
+<style>
+  .tab-with-badge {
+    @apply flex gap-2 items-center;
+  }
+  .panel-tabs {
+    @apply uppercase;
+    .tab:not(.tab-active) {
+      --tab-color: oklch(var(--bc) / 0.5);
+    }
+  }
+</style>
diff --git a/src/components/editor/panel/model.ts b/src/components/editor/panel/model.ts
new file mode 100644
index 0000000..ad0dac9
--- /dev/null
+++ b/src/components/editor/panel/model.ts
@@ -0,0 +1,11 @@
+export enum Tab {
+  Tests = "tests",
+  Output = "output",
+  Settings = "settings",
+}
+
+export const TAB_TITLES: Record<Tab, string> = {
+  [Tab.Tests]: "Tests",
+  [Tab.Output]: "Output",
+  [Tab.Settings]: "Settings",
+};
diff --git a/src/components/editor/panel/panel.svelte b/src/components/editor/panel/panel.svelte
new file mode 100644
index 0000000..715031a
--- /dev/null
+++ b/src/components/editor/panel/panel.svelte
@@ -0,0 +1,114 @@
+<script lang="ts" generics="Input, Output">
+  import type { Snippet } from 'svelte';
+  import type { editor } from "monaco-editor";
+  import { Terminal } from '@xterm/xterm'
+  import { FitAddon } from '@xterm/addon-fit'
+  import '@xterm/xterm/css/xterm.css'
+
+  import { createLogger } from '@/lib/logger';
+  import {
+    runTests,
+    type TestData,
+    type TestRunnerFactory,
+  } from "@/lib/testing";
+  
+  import { type SurfaceApi } from '../model';
+  import { Tab } from './model';
+  import { makeTheme } from './terminal'
+
+  import TestsTab from './tests.svelte';
+  import TerminalTab from './terminal.svelte';
+  import SettingsTab from './settings.svelte';
+  import TabsHeader from './header.svelte';
+
+  interface Props<I, O> {
+    api: SurfaceApi
+    model: editor.IModel;
+    testsData: TestData<I, O>[];
+    testRunnerFactory: TestRunnerFactory<I, O>;
+    children: Snippet
+    header: Snippet
+  }
+
+  let { api, model, testsData, testRunnerFactory, children, header }: Props<Input, Output> = $props();
+
+  let isRunning = $state(false);
+  let lastTestId = $state(-1);
+
+  $effect(() => {
+    testsData;
+    testRunnerFactory;
+    isRunning = false;
+    lastTestId = -1;
+  });
+
+  let selectedTab = $state<Tab>(Tab.Tests)
+
+  const term = new Terminal({
+    theme: makeTheme("business"),
+    fontFamily: "monospace",
+    convertEol: true,
+    rows: 1,
+  })
+  const fitAddon = new FitAddon()
+  term.loadAddon(fitAddon)
+  $effect(() => () => {
+    term.dispose()
+  })
+
+  let resizeFrameId: number
+  $effect(() => {
+    api.panelHeight;
+    api.width;
+    if (selectedTab !== Tab.Output) {
+      return
+    }
+    cancelAnimationFrame(resizeFrameId)
+    resizeFrameId = requestAnimationFrame(() => {
+      fitAddon.fit()
+    })
+    return () => {
+      cancelAnimationFrame(resizeFrameId)
+    }
+  })
+
+  const logger = createLogger(term)
+
+  async function handleRun (){
+    if (isRunning) {
+      return;
+    }
+    isRunning = true;
+    term.clear();
+    const runner = await testRunnerFactory({
+      code: model.getValue(),
+      out: term,
+    });
+    try {
+      lastTestId = await runTests(logger, runner, testsData);
+    } finally {
+      runner[Symbol.dispose]();
+      isRunning = false;
+    }
+  }
+</script>
+
+<div class="grow border-t border-base-100 relative flex flex-col bg-base-300 overflow-hidden">
+  <TabsHeader
+    bind:selectedTab
+    {api}
+    {isRunning}
+    {lastTestId}
+    testsCount={testsData.length}
+    onRun={handleRun}
+    append={header}
+  />
+  {#if selectedTab === Tab.Tests}
+    <TestsTab {testsData} {lastTestId} />
+  {:else if selectedTab === Tab.Settings}
+    <SettingsTab />
+  {/if}
+  <!-- This Tab should't be unmounted -->
+  <TerminalTab terminal={term} class={selectedTab !== Tab.Output ? "hidden" : ""} />
+  {@render children()}
+</div>
diff --git a/src/components/editor/panel/settings.svelte b/src/components/editor/panel/settings.svelte
new file mode 100644
index 0000000..32377ee
--- /dev/null
+++ b/src/components/editor/panel/settings.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { vimState } from "../model";
+</script>
+
+<div class="grow overflow-auto">
+  <div class="flex flex-col gap-4 p-4">
+    <div class="form-control">
+      <label class="label cursor-pointer">
+        <span class="label-text">Vim mode</span>
+        <input type="checkbox" bind:checked={vimState.value} class="checkbox" />
+      </label>
+    </div>
+  </div>
+</div>
diff --git a/src/components/editor/panel/terminal.svelte b/src/components/editor/panel/terminal.svelte
new file mode 100644
index 0000000..f6870f4
--- /dev/null
+++ b/src/components/editor/panel/terminal.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import type { Terminal } from "@xterm/xterm";
+
+  interface Props {
+    class: string;
+    terminal: Terminal;
+  }
+
+  const { terminal, class: className }: Props = $props();
+
+  let termElement: HTMLDivElement;
+
+  // NOTE: no `dispose` here
+  // https://github.com/xtermjs/xterm.js/issues/3939#issuecomment-1195377718
+  $effect(() => {
+    terminal.open(termElement);
+  });
+</script>
+
+<div bind:this={termElement} class="grow ml-4 mt-4 {className}"></div>
diff --git a/src/components/editor/terminal.ts b/src/components/editor/panel/terminal.ts
similarity index 100%
rename from src/components/editor/terminal.ts
rename to src/components/editor/panel/terminal.ts
diff --git a/src/components/editor/panel/tests.svelte b/src/components/editor/panel/tests.svelte
new file mode 100644
index 0000000..0bd390a
--- /dev/null
+++ b/src/components/editor/panel/tests.svelte
@@ -0,0 +1,34 @@
+<script lang="ts" generics="Input, Output">
+  import Icon from "@iconify/svelte";
+
+  import type { TestData } from "@/lib/testing";
+
+  interface Props<I, O> {
+    testsData: TestData<I, O>[];
+    lastTestId: number;
+  }
+
+  const { testsData, lastTestId }: Props<Input, Output> = $props();
+</script>
+
+<div class="overflow-auto grow">
+  <div class="flex flex-col gap-4 p-4">
+    {#each testsData as testData, i}
+      <div>
+        <div class="flex items-center gap-2 pb-2">
+          {#if lastTestId === i}
+            <Icon icon="lucide:circle-x" class="text-error" />
+          {:else if i < lastTestId}
+            <Icon icon="lucide:circle-check" class="text-success" />
+          {:else}
+            <Icon icon="lucide:circle-dashed" />
+          {/if}
+          Case {i + 1}
+        </div>
+        <pre class="p-2 rounded bg-base-100"><code
+            >{JSON.stringify(testData.input, null, 2)}</code
+          ></pre>
+      </div>
+    {/each}
+  </div>
+</div>
diff --git a/src/components/editor/testing-panel.svelte b/src/components/editor/testing-panel.svelte
deleted file mode 100644
index 71f951a..0000000
--- a/src/components/editor/testing-panel.svelte
+++ /dev/null
@@ -1,215 +0,0 @@
-<script lang="ts" generics="Input, Output">
-  import type { Snippet } from 'svelte';
-  import type { editor } from "monaco-editor";
-  import Icon from "@iconify/svelte";
-  import { Terminal } from '@xterm/xterm'
-  import { FitAddon } from '@xterm/addon-fit'
-  import '@xterm/xterm/css/xterm.css'
-
-  import { createLogger } from '@/lib/logger';
-  import {
-    runTests,
-    type TestData,
-    type TestRunnerFactory,
-  } from "@/lib/testing";
-  
-  import { type SurfaceApi, vimState } from './model';
-  import { makeTheme } from './terminal'
-
-  interface Props<I, O> {
-    api: SurfaceApi
-    model: editor.IModel;
-    testsData: TestData<I, O>[];
-    testRunnerFactory: TestRunnerFactory<I, O>;
-    children: Snippet
-    header: Snippet
-  }
-
-  let { api, model, testsData, testRunnerFactory, children, header }: Props<Input, Output> = $props();
-
-  let isRunning = $state(false);
-  let lastTestId = $state(-1);
-
-  $effect(() => {
-    testsData;
-    testRunnerFactory;
-    isRunning = false;
-    lastTestId = -1;
-  });
-
-  enum Tab {
-    Tests = "tests",
-    Output = "output",
-    Settings = "settings",
-  }
-
-  const TAB_TITLES: Record<Tab, string> = {
-    [Tab.Tests]: "Tests",
-    [Tab.Output]: "Output",
-    [Tab.Settings]: "Settings",
-  };
-
-  let selectedTab = $state<Tab>(Tab.Tests)
-
-  interface TabButtonProps { tab: Tab, append?: Snippet }
-
-  let termElement: HTMLDivElement
-  const term = new Terminal({
-    theme: makeTheme("business"),
-    fontFamily: "monospace",
-    convertEol: true,
-    rows: 1,
-  })
-  const fitAddon = new FitAddon()
-  term.loadAddon(fitAddon)
-
-  $effect(() => {
-    term.open(termElement)
-    return () => {
-      term.dispose()
-    }
-  })
-
-  const logger = createLogger(term)
-
-  let resizeFrameId: number
-
-  $effect(() => {
-    api.panelHeight;
-    api.width;
-    if (selectedTab !== Tab.Output) {
-      return
-    }
-    cancelAnimationFrame(resizeFrameId)
-    resizeFrameId = requestAnimationFrame(() => {
-      fitAddon.fit()
-    })
-    return () => {
-      cancelAnimationFrame(resizeFrameId)
-    }
-  })
-
-</script>
-
-<div class="grow border-t border-base-100 relative flex flex-col bg-base-300 overflow-hidden">
-  <div class="flex items-center gap-3 px-4">
-    <button
-      class="btn btn-sm btn-primary"
-      onclick={async () => {
-        if (isRunning) {
-          return;
-        }
-        isRunning = true;
-        term.clear();
-        const runner = await testRunnerFactory({
-          code: model.getValue(),
-          out: term,
-        });
-        try {
-          lastTestId = await runTests(logger, runner, testsData);
-        } finally {
-          runner[Symbol.dispose]();
-          isRunning = false;
-        }
-      }}
-    >
-      {#if isRunning}
-        <span class="loading loading-spinner"></span>
-      {:else}
-        <Icon class="w-6" icon="lucide:play" />
-      {/if}
-    </button>
-    <div role="tablist" class="tabs panel-tabs">
-      {#snippet tabButton({ tab, append }: TabButtonProps)}
-        <a
-          href="#top"
-          role="tab"
-          class="tab"
-          class:tab-with-badge={append}
-          class:tab-active={selectedTab === tab}
-          onclick={() => {
-            selectedTab = tab
-            api.showPanel(window.innerHeight/3)
-          }}
-        >
-          {TAB_TITLES[tab]}
-          {#if append}
-            {@render append()}
-          {/if}
-        </a>
-      {/snippet}
-      {#snippet testBadge()}
-        <div
-          class="badge"
-          class:hidden={lastTestId < 0}
-          class:badge-success={lastTestId === testsData.length}
-          class:badge-error={lastTestId < testsData.length && lastTestId >= 0}
-        >
-          {lastTestId}/{testsData.length}
-        </div>
-      {/snippet}
-      {@render tabButton({ tab: Tab.Tests, append: testBadge })}
-      {@render tabButton({ tab: Tab.Output })}
-      {@render tabButton({ tab: Tab.Settings })}
-    </div>
-    <div class="grow" ></div>
-    {@render header()}
-    <button
-      class="btn btn-sm btn-ghost"
-      onclick={() => {
-        api.togglePanel(window.innerHeight/3)
-      }}
-    >
-      <Icon icon={api.isPanelCollapsed ? "lucide:chevron-up" : "lucide:chevron-down"} />
-    </button>
-  </div>
-  <div class="overflow-auto grow" class:hidden={selectedTab !== Tab.Tests}>
-    <div class="flex flex-col gap-4 p-4">
-      {#each testsData as testData, i}
-        <div>
-          <div class="flex items-center gap-2 pb-2">
-            {#if lastTestId === i}
-              <Icon icon="lucide:circle-x" class="text-error" />
-            {:else if i < lastTestId}
-              <Icon icon="lucide:circle-check" class="text-success" />
-            {:else}
-              <Icon icon="lucide:circle-dashed" />
-            {/if}
-            Case {i + 1}
-          </div>
-          <pre
-            class="p-2 rounded bg-base-100"
-          ><code>{JSON.stringify(testData.input, null, 2)}</code></pre>
-        </div>
-      {/each}
-    </div>
-  </div>
-  <div
-    bind:this={termElement}
-    class="grow pl-4 mt-4"
-    class:hidden={selectedTab !== Tab.Output}
-  ></div>
-  <div class="grow overflow-auto" class:hidden={selectedTab !== Tab.Settings}>
-    <div class="flex flex-col gap-4 p-4" >
-      <div class="form-control">
-        <label class="label cursor-pointer">
-          <span class="label-text">Vim mode</span>
-          <input type="checkbox" bind:checked={vimState.value} class="checkbox" />
-        </label>
-      </div>
-    </div>
-  </div>
-  {@render children()}
-</div>
-
-<style>
-  .tab-with-badge {
-    @apply flex gap-2 items-center;
-  }
-  .panel-tabs {
-    @apply uppercase;
-    .tab:not(.tab-active) {
-      --tab-color: oklch(var(--bc) / 0.5);
-    }
-  }
-</style>