Implement Splittable with a simple test case

src/components/Header.tsx

@@ -1,9 +1,9 @@
-import clsx from "clsx";
 import { useMemoryContext } from "../MemoryContext";
 import styles from "../css/Header.module.css";
 import Panel from "./Panel";
 import SpectrumGraph from "./SpectrumGraph";
 import WaveformGraph from "./WaveformGraph";
+import Splitable from "./Splitable";
 
 export default function Header() {
 
@@ -18,18 +18,15 @@ export default function Header() {
       <button>Track</button>
       <button>Help</button>
       <button onClick={() => {
-        memoryContext.addPanel(() => <Panel />);
+        memoryContext.addPanel(() => (
+          <Splitable type="horizontal">
+            <Panel />
+            <Panel />
+          </Splitable>
+        ));
         // memoryContext.setPanels([...memoryContext.panels, <Panel />]);
         console.log(memoryContext.panels);
       }}>+ Panel</button>
-      <button
-        class={clsx(memoryContext.isEditingPanels && styles.editButtonActive)}
-        onClick={() => {
-          memoryContext.toggleEditingPanels();
-        }}
-      >
-        ✏️
-      </button>
 
       <input
         style={{ flex: 1 }}

src/components/PanelHandler.tsx

@@ -11,10 +11,8 @@ export default function PanelHandler() {
 
   createEffect(() => {
     if (memoryContext.isEditingPanels) {
-      console.log("Editing panels...");
       ref.style.cursor = "copy";
     } else {
-      console.log("Not editing panels...");
       ref.style.cursor = "auto";
     }
   });

src/components/SplitLine.tsx

@@ -0,0 +1,11 @@
+export default function SplitLine(props: { type: "horizontal" | "vertical" }) {
+  // Thin line between panels, usually used in a Splitable.
+
+  return (
+    <div style={{
+      "width": props.type === "horizontal" ? "1px" : "100%",
+      "height": props.type === "vertical" ? "1px" : "100%",
+      "border": "2px solid magenta",
+    }} />
+  );
+}

src/components/Splitable.tsx

@@ -1,25 +1,31 @@
 import { JSX, Match, Switch } from "solid-js";
+import SplitLine from "./SplitLine";
 
 type SplitableProps = {
-  topElement?: JSX.Element,
-  bottomElement?: JSX.Element,
-  leftElement?: JSX.Element,
-  rightElement?: JSX.Element,
+  type: "horizontal" | "vertical",
+  children: [JSX.Element, JSX.Element]
 }
 
+/**
+ * Render two elements that can be split horizontally or vertically.
+ * @param props If the type is "horizontal", the children will be rendered side by side. If the type is "vertical", the children will be rendered one on top of the other.
+ * @returns {JSX.Element}
+ */
 export default function Splitable(props: SplitableProps) {
   return (
     <Switch fallback={<FallbackComponent />}>
-      <Match when={props.topElement && props.bottomElement}>
-        <div style={{ display: "flex", "flex-direction": "column" }}>
-          {props.topElement}
-          {props.bottomElement}
+      <Match when={props.type === "vertical"}>
+        <div style={{ display: "flex", "flex-direction": "column", flex: 1 }}>
+          {props.children[0]}
+          <SplitLine type="vertical" />
+          {props.children[1]}
         </div>
       </Match>
-      <Match when={props.leftElement && props.rightElement}>
-        <div style={{ display: "flex", "flex-direction": "row" }}>
-          {props.leftElement}
-          {props.rightElement}
+      <Match when={props.type === "horizontal"}>
+        <div style={{ display: "flex", "flex-direction": "row", flex: 1 }}>
+          {props.children[0]}
+          <SplitLine type="horizontal" />
+          {props.children[1]}
         </div>
       </Match>
     </Switch>