refactor(music-player): using react-dom-curse

package.json

@@ -14,6 +14,7 @@
     "axios": "^1.6.7",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-dom-curse": "github:pihkaal/react-dom-curse",
     "react-router-dom": "^6.21.3",
     "tailwind-merge": "^2.2.1",
     "vite-tsconfig-paths": "^4.3.1",

pnpm-lock.yaml

@@ -14,6 +14,9 @@ dependencies:
   react-dom:
     specifier: 18.2.0
     version: 18.2.0(react@18.2.0)
+  react-dom-curse:
+    specifier: github:pihkaal/react-dom-curse
+    version: git@github.com+pihkaal/react-dom-curse/99f542457ffbe8dbba08261c8b423a7546fea56e(@types/react@18.2.47)
   react-router-dom:
     specifier: ^6.21.3
     version: 6.21.3(react-dom@18.2.0)(react@18.2.0)
@@ -672,7 +675,6 @@ packages:
 
   /@types/prop-types@15.7.11:
     resolution: {integrity: sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==}
-    dev: true
 
   /@types/react-dom@18.2.18:
     resolution: {integrity: sha512-TJxDm6OfAX2KJWJdMEVTwWke5Sc/E/RlnPGvGfS0W7+6ocy2xhDVQVh/KvC2Uf7kACs+gDytdusDSdWfWkaNzw==}
@@ -686,11 +688,9 @@ packages:
       '@types/prop-types': 15.7.11
       '@types/scheduler': 0.16.8
       csstype: 3.1.3
-    dev: true
 
   /@types/scheduler@0.16.8:
     resolution: {integrity: sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==}
-    dev: true
 
   /@types/semver@7.5.6:
     resolution: {integrity: sha512-dn1l8LaMea/IjDoHNd9J52uBbInB796CDffS6VdIxvqYCPSG0V0DzHp76GpaWnlhg88uYyPbXCDIowa86ybd5A==}
@@ -1177,7 +1177,6 @@ packages:
 
   /csstype@3.1.3:
     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
-    dev: true
 
   /damerau-levenshtein@1.0.8:
     resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==}
@@ -3260,6 +3259,14 @@ packages:
       punycode: 2.3.1
     dev: true
 
+  /use-sync-external-store@1.2.0(react@18.2.0):
+    resolution: {integrity: sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      react: 18.2.0
+    dev: false
+
   /util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
     dev: true
@@ -3412,3 +3419,37 @@ packages:
   /zod@3.22.4:
     resolution: {integrity: sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==}
     dev: false
+
+  /zustand@4.5.0(@types/react@18.2.47)(react@18.2.0):
+    resolution: {integrity: sha512-zlVFqS5TQ21nwijjhJlx4f9iGrXSL0o/+Dpy4txAP22miJ8Ti6c1Ol1RLNN98BMib83lmDH/2KmLwaNXpjrO1A==}
+    engines: {node: '>=12.7.0'}
+    peerDependencies:
+      '@types/react': '>=16.8'
+      immer: '>=9.0.6'
+      react: '>=16.8'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      immer:
+        optional: true
+      react:
+        optional: true
+    dependencies:
+      '@types/react': 18.2.47
+      react: 18.2.0
+      use-sync-external-store: 1.2.0(react@18.2.0)
+    dev: false
+
+  git@github.com+pihkaal/react-dom-curse/99f542457ffbe8dbba08261c8b423a7546fea56e(@types/react@18.2.47):
+    resolution: {commit: 99f542457ffbe8dbba08261c8b423a7546fea56e, repo: git@github.com:pihkaal/react-dom-curse.git, type: git}
+    id: git@github.com+pihkaal/react-dom-curse/99f542457ffbe8dbba08261c8b423a7546fea56e
+    name: react-dom-curse
+    version: 0.0.0
+    dependencies:
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      zustand: 4.5.0(@types/react@18.2.47)(react@18.2.0)
+    transitivePeerDependencies:
+      - '@types/react'
+      - immer
+    dev: false

src/App.tsx

@@ -2,7 +2,7 @@ import { BrowserRouter } from "react-router-dom";
 import { MusicPlayer } from "./components/MusicPlayer";
 import { MusicVisualizer } from "./components/MusicVisualizer";
 import { Nvim } from "./components/Nvim/Nvim";
-import { Terminal } from "./components/Terminal";
+import { Kitty } from "./components/Kitty";
 import { AppContextProvider } from "./context/AppContext";
 import { Waybar } from "./components/Waybar/Waybar";
 
@@ -17,23 +17,19 @@ function App() {
         >
           <Waybar />
 
-          <Terminal className="flex-1">
+          <Kitty className="flex-1"></Kitty>
-            <Nvim />
-          </Terminal>
 
-          <div className="flex gap-3">
+          <div className="flex gap-3 h-[142px]">
-            <Terminal className="flex-1 select-none">
+            <Kitty className="flex-1 select-none">
               <MusicPlayer
                 title="Last Tango in Kyoto"
                 artist="Floating Bits"
                 album="Last Tango in Kyoto"
                 duration={93}
               />
-            </Terminal>
+            </Kitty>
 
-            <Terminal className="flex-1">
+            <Kitty className="flex-1"></Kitty>
-              <MusicVisualizer />
-            </Terminal>
           </div>
         </main>
       </BrowserRouter>

src/components/Kitty.tsx

@@ -0,0 +1,15 @@
+import { type ReactNode } from "react";
+import clsx from "clsx";
+import { Terminal } from "react-dom-curse";
+
+export const Kitty = (props: { children?: ReactNode; className?: string }) => (
+  <div
+    className={clsx(
+      "overflow-hidden whitespace-pre rounded-lg border-2 border-borderInactive bg-background bg-opacity-80 text-lg text-color7 text-foreground shadow-window transition-colors duration-[500ms] ease-out hover:border-borderActive hover:duration-[200ms]",
+      props.className,
+    )}
+    style={{ backdropFilter: "blur(2px)" }}
+  >
+    <Terminal>{props.children}</Terminal>
+  </div>
+);

src/components/MusicPlayer.tsx

@@ -1,20 +1,6 @@
-import { useTerminal } from "~/context/TerminalContext";
-import { TerminalRenderer } from "~/utils/terminal/renderer";
-import { TerminalBoxElement } from "~/utils/terminal/elements/box";
 import { useEffect, useState } from "react";
-
+import { Bar, Frame, Group, Terminal, Text, useTerminal } from "react-dom-curse";
-const theme = {
+import { theme } from "~/utils/theme";
-  black: "#45475a",
-  red: "#f38ba8",
-  green: "#a6e3a1",
-  yellow: "#f9e2af",
-  blue: "#89bafa",
-  magenta: "#f5c2e7",
-  cyan: "#94e2d5",
-  white: "#bac2de",
-  grey: "#585B70",
-  lightGrey: "#a6adc8",
-};
 
 const formatDurationMSS = (duration: number) => {
   const minutes = Math.floor(duration / 60);
@@ -29,8 +15,7 @@ export const MusicPlayer = (props: {
   album: string;
   duration: number;
 }) => {
-  const { cols } = useTerminal();
+  const { terminal } = useTerminal();
-  const canvas = new TerminalRenderer(cols, 5);
 
   const [played, setPlayed] = useState(0);
   useEffect(() => {
@@ -41,45 +26,58 @@ export const MusicPlayer = (props: {
     return () => clearInterval(interval);
   }, [setPlayed, props.duration]);
 
-  canvas.writeElement(
-    new TerminalBoxElement(canvas.width, canvas.height),
-    0,
-    0,
-  );
-
-  canvas.write(1, 0, "Playback".substring(0, Math.min(8, canvas.width - 2)), {
-    foreground: theme.magenta,
-  });
-
-  const inner = new TerminalRenderer(canvas.width - 2, canvas.height - 2);
-  // Title and Artist
-  inner.write(2, 0, `${props.title} · ${props.artist}`, {
-    foreground: theme.cyan,
-    fontWeight: 700,
-  });
-  inner.apply(0, 0, {
-    char: "\udb81\udc0a",
-    foreground: theme.cyan,
-    fontWeight: 800,
-  });
-
-  // Album
-  inner.write(0, 1, props.album, { foreground: theme.yellow });
-
-  // Bar
-  inner.write(0, 2, " ".repeat(inner.width), {
-    foreground: theme.green,
-    background: "#55576d",
-  });
-  inner.write(0, 2, " ".repeat((inner.width * played) / props.duration), {
-    foreground: "#55576d",
-    background: theme.green,
-  });
   const time = `${formatDurationMSS(played)}/${formatDurationMSS(
     props.duration,
   )}`;
-  inner.write(inner.width / 2 - time.length / 2, 2, time, { fontWeight: 800 });
 
-  canvas.writeElement(inner, 1, 1);
+  return (
-  return <p>{canvas.render()}</p>;
+      <Group
+        x={0}
+        y={0}
+        width={terminal.width}
+        height={terminal.height}
+        style={{ foreground: theme.white }}
+      >
+        <Frame
+          x={0}
+          y={0}
+          width={terminal.width}
+          height={terminal.height}
+          border="single"
+        >
+          <Text x={0} y={0} style={{ foreground: theme.cyan }}>
+            {props.title} · {props.artist}
+          </Text>
+          <Text x={0} y={1} style={{ foreground: theme.yellow }}>
+            {props.album}
+          </Text>
+
+          <Group x={0} y={2} width={terminal.width} height={1}>
+            <Bar
+              x={0}
+              y={0}
+              style={{ foreground: theme.green, background: "#55576d" }}
+              char=" "
+              size={terminal.width}
+              direction="horizontal"
+            />
+            <Bar
+              x={0}
+              y={0}
+              style={{ foreground: "#55576d", background: theme.green }}
+              char=" "
+              size={terminal.width * (played / props.duration)}
+              direction="horizontal"
+            />
+            <Text x={Math.floor(terminal.width / 2 - time.length / 2)} y={0}>
+              {time}
+            </Text>
+          </Group>
+        </Frame>
+
+        <Text x={1} y={0} style={{ foreground: theme.magenta }}>
+          Playback
+        </Text>
+      </Group>
+  );
 };

src/components/Terminal.tsx

@@ -1,64 +0,0 @@
-import { useRef, useState, useEffect, type ReactNode } from "react";
-import clsx from "clsx";
-import { TerminalContextProvider } from "~/context/TerminalContext";
-
-export const Terminal = (props: {
-  children?: ReactNode;
-  className?: string;
-}) => {
-  const terminalRef = useRef<HTMLDivElement>(null);
-
-  const [size, setSize] = useState<{ cols: number; rows: number }>();
-
-  useEffect(() => {
-    const precision = 300;
-
-    const calculateSize = () => {
-      if (!terminalRef.current) return;
-
-      const node = document.createElement("span");
-      node.style.color = "transparent";
-      node.style.position = "absolute";
-      node.textContent = "A".repeat(precision);
-
-      terminalRef.current.appendChild(node);
-
-      setSize({
-        cols: Math.floor(
-          (terminalRef.current.offsetWidth - 4) /
-            (node.offsetWidth / precision),
-        ),
-        rows: Math.floor(
-          (terminalRef.current.offsetHeight - 4) / node.offsetHeight,
-        ),
-      });
-
-      node.remove();
-    };
-
-    calculateSize();
-
-    setTimeout(() => calculateSize(), 1);
-
-    window.addEventListener("resize", calculateSize);
-
-    return () => {
-      window.removeEventListener("resize", calculateSize);
-    };
-  }, []);
-
-  return (
-    <TerminalContextProvider value={size}>
-      <div
-        ref={terminalRef}
-        className={clsx(
-          "overflow-hidden whitespace-pre rounded-lg border-2 border-borderInactive bg-background bg-opacity-80 text-lg text-color7 text-foreground shadow-window transition-colors duration-[500ms] ease-out hover:border-borderActive hover:duration-[200ms]",
-          props.className,
-        )}
-        style={{ backdropFilter: "blur(2px)" }}
-      >
-        {size && props.children}
-      </div>
-    </TerminalContextProvider>
-  );
-};

src/context/TerminalContext.tsx

@@ -1,16 +0,0 @@
-/* eslint-disable react-refresh/only-export-components */
-import { createContext, useContext } from "react";
-
-const TerminalContext = createContext<
-  { cols: number; rows: number } | undefined
->(undefined);
-
-export const TerminalContextProvider = TerminalContext.Provider;
-
-export const useTerminal = () => {
-  const context = useContext(TerminalContext);
-  if (!context)
-    throw new Error("useTerminal must be used inside a Terminal component");
-
-  return context;
-};

src/utils/terminal/cell.ts

@@ -1,9 +0,0 @@
-export type Cell = {
-  char: string;
-} & CellStyle;
-
-export type CellStyle = Partial<{
-  foreground: string;
-  background: string;
-  fontWeight: number;
-}>;

src/utils/terminal/element.ts

@@ -1,7 +0,0 @@
-import { type Cell } from "./cell";
-
-export interface TerminalElement {
-  readonly data: Array<Array<Cell>>;
-  readonly width: number;
-  readonly height: number;
-}

src/utils/terminal/elements/box.ts

@@ -1,38 +0,0 @@
-import { type Cell, type CellStyle } from "../cell";
-import { TerminalRenderer } from "../renderer";
-import { type TerminalElement } from "../element";
-
-export class TerminalBoxElement implements TerminalElement {
-  public readonly data: Array<Array<Cell>>;
-
-  constructor(
-    public readonly width: number,
-    public readonly height: number,
-    style: CellStyle = {},
-  ) {
-    const canvas = new TerminalRenderer(width, height, style);
-
-    if (width == 1 && height > 1) {
-      for (let y = 0; y < height - 1; y++) {
-        canvas.write(0, y, "│");
-      }
-    } else if (height == 1 && width > 1) {
-      canvas.write(0, 0, "─".repeat(width - 2));
-    } else {
-      canvas.write(0, 0, "┌");
-      canvas.write(width - 1, 0, "┐");
-      canvas.write(0, height - 1, "└");
-      canvas.write(width - 1, height - 1, "┘");
-
-      canvas.write(1, 0, "─".repeat(width - 2));
-      canvas.write(1, height - 1, "─".repeat(width - 2));
-
-      for (let y = 1; y < height - 1; y++) {
-        canvas.write(0, y, "│");
-        canvas.write(width - 1, y, "│");
-      }
-    }
-
-    this.data = canvas.data;
-  }
-}

src/utils/terminal/renderer.tsx

@@ -1,124 +0,0 @@
-import { type ReactNode } from "react";
-import { floorAll } from "../math";
-import { type CellStyle, type Cell } from "./cell";
-import { type TerminalElement } from "./element";
-
-export class TerminalRenderer implements TerminalElement {
-  public readonly data: Array<Array<Cell>>;
-
-  constructor(
-    public readonly width: number,
-    public readonly height: number,
-    public readonly defaultStyle: CellStyle = {},
-  ) {
-    [this.width, this.height] = floorAll(this.width, this.height);
-
-    this.data = new Array(this.height).fill(0).map(() =>
-      new Array<Cell>(this.width).fill({
-        char: " ",
-        ...defaultStyle,
-      }),
-    );
-  }
-
-  apply(x: number, y: number, cell: Partial<Cell>): void {
-    [x, y] = floorAll(x, y);
-
-    if (x < 0 || x >= this.width || y < 0 || y >= this.height) return;
-
-    this.data[y][x] = {
-      ...this.data[y][x],
-      ...cell,
-    };
-  }
-
-  write(x: number, y: number, text: string, style: CellStyle = {}): void {
-    [x, y] = floorAll(x, y);
-
-    for (let i = 0; i < text.length; i++) {
-      this.apply(x + i, y, {
-        char: text[i],
-        ...style,
-      });
-    }
-  }
-
-  writeFilter(
-    x: number,
-    y: number,
-    text: string,
-    filter: (cell: Cell) => Cell,
-  ): void {
-    [x, y] = floorAll(x, y);
-
-    for (let i = 0; i < text.length; i++) {
-      this.apply(x + i, y, {
-        ...filter(this.data[y][x + i]),
-        char: text[i],
-      });
-    }
-  }
-
-  writeElement(canvas: TerminalElement, dx: number, dy: number): void {
-    [dx, dy] = floorAll(dx, dy);
-
-    for (let y = 0; y < canvas.height; y++) {
-      for (let x = 0; x < canvas.width; x++) {
-        this.apply(dx + x, dy + y, canvas.data[y][x]);
-      }
-    }
-  }
-
-  subCanvas(
-    x: number,
-    y: number,
-    width: number,
-    height: number,
-  ): TerminalRenderer {
-    [x, y, width, height] = floorAll(x, y, width, height);
-
-    const canvas = new TerminalRenderer(width, height);
-    for (let cy = 0; cy < height; cy++) {
-      for (let cx = 0; cx < width; cx++) {
-        canvas.apply(cx, cy, this.data[y + cy][x + cx]);
-      }
-    }
-
-    return canvas;
-  }
-
-  render(): Array<ReactNode> {
-    const nodes: Array<ReactNode> = [];
-
-    for (let y = 0; y < this.height; y++) {
-      for (let x = 0; x < this.width; x++) {
-        const cell = this.data[y][x];
-        /*
-        const span = document.createElement("span");
-        span.innerHTML = cell.char;
-        span.style.color = cell.foreground ?? "unset";
-        span.style.background = cell.background ?? "unset";
-        span.style.fontWeight = String(cell.fontWeight ?? "unset");
-
-        target.appendChild(span);
-        */
-        nodes.push(
-          <span
-            key={`${x}-${y}`}
-            style={{
-              color: cell.foreground,
-              background: cell.background,
-              fontWeight: cell.fontWeight,
-            }}
-          >
-            {cell.char}
-          </span>,
-        );
-      }
-
-      nodes.push(<br key={y} />);
-    }
-
-    return nodes;
-  }
-}