feat: basic nvim setup and other partially working stuff

src/components/MusicPlayer.tsx

@@ -39,7 +39,7 @@ export const MusicPlayer = (props: {
     }, 1000);
 
     return () => clearInterval(interval);
-  }, [setPlayed]);
+  }, [setPlayed, props.duration]);
 
   canvas.writeElement(
     new TerminalBoxElement(canvas.width, canvas.height),
@@ -55,7 +55,7 @@ export const MusicPlayer = (props: {
   // Title and Artist
   inner.write(2, 0, `${props.title} · ${props.artist}`, {
     foreground: theme.cyan,
-    fontWeight: 800,
+    fontWeight: 700,
   });
   inner.apply(0, 0, {
     char: "\udb81\udc0a",
@@ -69,16 +69,16 @@ export const MusicPlayer = (props: {
   // Bar
   inner.write(0, 2, " ".repeat(inner.width), {
     foreground: theme.green,
-    background: theme.black,
+    background: "#55576d",
   });
   inner.write(0, 2, " ".repeat((inner.width * played) / props.duration), {
-    foreground: theme.black,
+    foreground: "#55576d",
     background: theme.green,
   });
   const time = `${formatDurationMSS(played)}/${formatDurationMSS(
     props.duration,
   )}`;
-  inner.write(inner.width / 2 - time.length / 2, 2, time);
+  inner.write(inner.width / 2 - time.length / 2, 2, time, { fontWeight: 800 });
 
   canvas.writeElement(inner, 1, 1);
   return <p>{canvas.render()}</p>;

src/components/Nvim/Nvim.tsx

@@ -0,0 +1,19 @@
+import { NvimStatusBar } from "./NvimStatusBar";
+import { NvimTree } from "./NvimTree";
+
+export const Nvim = () => {
+  return (
+    <div>
+      <div className="flex">
+        <div className="w-fit bg-green-500">
+          <NvimTree />
+        </div>
+        <div className="flex-1 bg-blue-500"></div>
+      </div>
+
+      <div className="h-fit bg-red-500">
+        <NvimStatusBar />
+      </div>
+    </div>
+  );
+};

src/components/Nvim/NvimStatusBar.tsx

@@ -0,0 +1,12 @@
+import { useTerminal } from "~/context/TerminalContext";
+import { TerminalRenderer } from "~/utils/terminal/renderer";
+
+export const NvimStatusBar = () => {
+  const { cols: width } = useTerminal();
+  const canvas = new TerminalRenderer(width, 2);
+
+  canvas.write(0, 0, "status line 1");
+  canvas.write(0, 1, "status line 2");
+
+  return <p>{canvas.render()}</p>;
+};

src/components/Nvim/NvimTree.tsx

@@ -0,0 +1,11 @@
+import { useTerminal } from "~/context/TerminalContext";
+import { TerminalRenderer } from "~/utils/terminal/renderer";
+
+export const NvimTree = () => {
+  const { cols: width, rows: height } = useTerminal();
+  const canvas = new TerminalRenderer(width * 0.15, height - 2);
+
+  canvas.write(0, 0, "ijirjginrgi");
+
+  return <p>{canvas.render()}</p>;
+};

src/components/Terminal.tsx

@@ -38,6 +38,8 @@ export const Terminal = (props: {
 
     calculateSize();
 
+    setTimeout(() => calculateSize(), 1);
+
     window.addEventListener("resize", calculateSize);
 
     return () => {

src/components/terminal/TerminalBox.tsx

@@ -0,0 +1,22 @@
+import { useTerminalCanvas } from "~/context/TerminalCanvasContext";
+import { type CellStyle } from "~/utils/terminal/cell";
+import { TerminalBoxElement } from "~/utils/terminal/elements/box";
+
+export const TerminalBox = (props: {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  style?: CellStyle;
+}) => {
+  const canvas = useTerminalCanvas();
+
+  const element = new TerminalBoxElement(
+    props.width,
+    props.height,
+    props.style ?? {},
+  );
+  canvas.writeElement(element, props.x, props.y);
+
+  return null;
+};

src/components/terminal/TerminalCell.tsx

@@ -0,0 +1,21 @@
+import { useTerminalCanvas } from "~/context/TerminalCanvasContext";
+import { type CellStyle } from "~/utils/terminal/cell";
+
+export const TerminalCell = (props: {
+  x: number;
+  y: number;
+  children: Array<string> | string;
+  style?: CellStyle;
+}) => {
+  const canvas = useTerminalCanvas();
+
+  const text = Array.isArray(props.children)
+    ? props.children.join("")
+    : props.children;
+  canvas.apply(props.x, props.y, {
+    char: text,
+    ...(props.style ?? {}),
+  });
+
+  return null;
+};

src/components/terminal/TerminalSubCanvas.tsx

@@ -0,0 +1,25 @@
+import React, { type ReactNode, useState } from "react";
+import {
+  TerminalCanvasContextProvider,
+  useTerminalCanvas,
+} from "~/context/TerminalCanvasContext";
+import { TerminalRenderer } from "~/utils/terminal/renderer";
+
+export const TerminalSubCanvas = (props: {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  children?: Array<ReactNode> | ReactNode;
+}) => {
+  const parent = useTerminalCanvas();
+  const [canvas] = useState(new TerminalRenderer(props.width, props.height));
+
+  parent.writeElement(canvas, props.x, props.y);
+
+  return (
+    <TerminalCanvasContextProvider value={canvas}>
+      {props.children}
+    </TerminalCanvasContextProvider>
+  );
+};

src/pages/index.tsx

@@ -2,6 +2,7 @@ import Head from "next/head";
 import { Terminal } from "~/components/Terminal";
 import { MusicVisualizer } from "~/components/MusicVisualizer";
 import { MusicPlayer } from "~/components/MusicPlayer";
+import { Nvim } from "~/components/Nvim/Nvim";
 
 export default function Home() {
   return (
@@ -16,7 +17,9 @@ export default function Home() {
       >
         <nav className="border border-red-500">toolbar</nav>
 
-        <Terminal className="flex-1">nvim</Terminal>
+        <Terminal className="flex-1">
+          <Nvim />
+        </Terminal>
 
         <div className="flex gap-3">
           <Terminal className="flex-1">