2 files changed, 50 insertions, 151 deletions
diff --git a/web/src/components/toolbar/index.css b/web/src/components/toolbar/index.css
index b580fbf..e082f7d 100644
--- a/web/src/components/toolbar/index.css
+++ b/web/src/components/toolbar/index.css
@@ -1,44 +1,46 @@
-ntv-toolbar {
-  display: flex;
-  border-radius: 99999px;
-  background: var(--color-neutral-900);
-  width: min-content;
-}
+@layer components {
+  ntv-toolbar {
+    display: flex;
+    border-radius: 99999px;
+    background: var(--color-neutral-900);
+    width: min-content;
+  }
 
-ntv-toolbar > section {
-  display: flex;
-  gap: 0.25rem;
-  padding: 0.325rem;
-}
+  ntv-toolbar > section {
+    display: flex;
+    gap: 0.25rem;
+    padding: 0.325rem;
+  }
 
-ntv-toolbar button {
-  border-radius: 99999px;
-  background: var(--color-neutral-800);
-  padding: 0 0.5rem;
-  height: 1.25rem;
-  color: white;
-  font-size: 0.75rem;
-}
+  ntv-toolbar button {
+    border-radius: 99999px;
+    background: var(--color-neutral-800);
+    padding: 0 0.5rem;
+    height: 1.25rem;
+    color: white;
+    font-size: 0.75rem;
+  }
 
-ntv-toolbar button:hover {
-  background: var(--color-neutral-700);
-}
+  ntv-toolbar button:hover {
+    background: var(--color-green-400);
+  }
 
-ntv-toolbar button[data-variant="icon"] {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  aspect-ratio: 1;
-  height: 1.25rem;
-}
+  ntv-toolbar button[data-icon] {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    aspect-ratio: 1;
+    height: 1.25rem;
+  }
 
-ntv-toolbar input {
-  border: 1px solid var(--color-neutral-700);
-  border-radius: 4px;
-  background: var(--color-neutral-900);
-  width: 2.5rem;
-  height: 1.25rem;
-  color: white;
-  font-size: 0.75rem;
-  text-align: center;
+  ntv-toolbar input {
+    border: 1px solid var(--color-neutral-700);
+    border-radius: 4px;
+    background: var(--color-neutral-900);
+    width: 2.5rem;
+    height: 1.25rem;
+    color: white;
+    font-size: 0.75rem;
+    text-align: center;
+  }
 }
diff --git a/web/src/components/toolbar/index.ts b/web/src/components/toolbar/index.ts
index 84f6a65..da4b69d 100644
--- a/web/src/components/toolbar/index.ts
+++ b/web/src/components/toolbar/index.ts
@@ -1,131 +1,28 @@
 import NotiveElement, { customElement } from "../../element";
-import h, { CreateElement } from "../../html";
-import { ActiveCellSelection, RangeSelection } from "../../selection";
+import h, { fragment } from "../../html";
 import "./index.css";
 
-function getSelectedSubdivisionsCount(): number | undefined {
-  const selection = window.notive.selection;
-
-  if (!selection) return;
-
-  if (selection instanceof ActiveCellSelection) {
-    return 1;
-  }
-
-  if (!(selection instanceof RangeSelection)) return;
-
-  const grid = window.notive.getGrid(selection.gridId);
-
-  if (!grid) return;
-
-  const selectedCells = selection.getSelectedCells(grid);
-
-  return Math.min(...selectedCells.map((cells) => cells.length));
-}
-
 @customElement("ntv-toolbar")
 class NotiveToolbarElement extends NotiveElement {
+  connectedCallback() {
+    this.append(this.#view());
+  }
+
   #subdivisionsInputEl: HTMLInputElement = h.input({
     title: "Subdivisions",
-    placeholder: "-",
     disabled: true,
   });
 
-  connectedCallback() {
-    this.#render();
-
-    window.addEventListener("ntv:selectionchange", () => {
-      if (window.notive.pendingSelection) {
-        this.#subdivisionsInputEl.disabled = true;
-        this.#subdivisionsInputEl.value = "";
-        return;
-      }
-
-      const subdivisionsCount = getSelectedSubdivisionsCount();
-
-      if (!subdivisionsCount) {
-        this.#subdivisionsInputEl.disabled = true;
-        this.#subdivisionsInputEl.value = "";
-        return;
-      }
-
-      this.#subdivisionsInputEl.disabled = false;
-      this.#subdivisionsInputEl.value = subdivisionsCount.toString();
-    });
-
-    this.#subdivisionsInputEl.addEventListener("change", () => {
-      window.notive.subdivideSelection(
-        parseInt(this.#subdivisionsInputEl.value),
-      );
-    });
-  }
-
-  #render() {
-    this.append(
+  #view() {
+    return fragment(
       h.section(
-        h.button(
-          {
-            dataset: { variant: "icon" },
-            onclick: () => {
-              const subdivisions = Math.max(
-                1,
-                parseInt(this.#subdivisionsInputEl.value) - 1,
-              );
-
-              this.#subdivisionsInputEl.value = subdivisions.toString();
-              window.notive.subdivideSelection(subdivisions);
-            },
-          },
-          "-",
-        ),
+        h.button({ dataset: { icon: "" } }, "-"),
         this.#subdivisionsInputEl,
-        h.button(
-          {
-            dataset: { variant: "icon" },
-
-            onclick: () => {
-              const subdivisions =
-                parseInt(this.#subdivisionsInputEl.value) + 1;
-
-              this.#subdivisionsInputEl.value = subdivisions.toString();
-              window.notive.subdivideSelection(subdivisions);
-            },
-          },
-          "+",
-        ),
-      ),
-      h.section(
-        h.button(
-          {
-            dataset: { variant: "menu" },
-            onclick: () => {
-              this.#play();
-            },
-          },
-          "Play",
-        ),
+        h.button({ dataset: { icon: "" } }, "+"),
       ),
+      h.section(h.button("Play")),
     );
   }
-
-  async #play() {
-    const Tone = await import("tone");
-    await Tone.start();
-    const transport = Tone.getTransport();
-    transport.stop();
-    transport.position = 0;
-    transport.cancel();
-    const synth = new Tone.Synth().toDestination();
-    const seq = new Tone.Sequence(
-      (time, note) => {
-        synth.triggerAttackRelease(note, 0.1, time);
-      },
-      ["C4", "D4", "E4"],
-      "1m",
-    ).start(0);
-    seq.loop = false;
-    transport.start();
-  }
 }
 
 export default NotiveToolbarElement.makeFactory();