refactor: reached same app state using vite

src/components/MusicPlayer.tsx

@@ -0,0 +1,85 @@
+import { useTerminal } from "~/context/TerminalContext";
+import { TerminalRenderer } from "~/utils/terminal/renderer";
+import { TerminalBoxElement } from "~/utils/terminal/elements/box";
+import { useEffect, useState } from "react";
+
+const 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);
+  const seconds = duration % 60;
+
+  return `${minutes}:${seconds.toString().padStart(2, "0")}`;
+};
+
+export const MusicPlayer = (props: {
+  title: string;
+  artist: string;
+  album: string;
+  duration: number;
+}) => {
+  const { cols } = useTerminal();
+  const canvas = new TerminalRenderer(cols, 5);
+
+  const [played, setPlayed] = useState(0);
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setPlayed(x => Math.min(props.duration, x + 1));
+    }, 1000);
+
+    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 <p>{canvas.render()}</p>;
+};

src/components/MusicVisualizer.tsx

@@ -0,0 +1,5 @@
+import { type FunctionComponent } from "react";
+
+export const MusicVisualizer: FunctionComponent = () => (
+  <div className="h-full w-full bg-red-500"></div>
+);

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">
+          <NvimTree />
+        </div>
+        <div className="flex-1"></div>
+      </div>
+
+      <div className="h-fit bg-[#29293c]">
+        <NvimStatusBar label="NORMAL" fileName="README.md" />
+      </div>
+    </div>
+  );
+};

src/components/Nvim/NvimStatusBar.tsx

@@ -0,0 +1,31 @@
+import { useTerminal } from "~/context/TerminalContext";
+import { TerminalRenderer } from "~/utils/terminal/renderer";
+import { theme } from "~/utils/terminal/theme";
+
+export const NvimStatusBar = (props: { label: string; fileName: string }) => {
+  const { cols: width } = useTerminal();
+  const canvas = new TerminalRenderer(width, 1);
+
+  canvas.write(0, 0, ` ${props.label} `, {
+    background: theme.blue,
+    foreground: "#000",
+  });
+  canvas.write(props.label.length + 2, 0, "\ue0ba", {
+    background: theme.blue,
+    foreground: "#474353",
+  });
+  canvas.write(props.label.length + 3, 0, "\ue0ba", {
+    background: "#474353",
+    foreground: "#373040",
+  });
+  canvas.write(props.label.length + 4, 0, ` ${props.fileName} `, {
+    background: "#373040",
+    foreground: theme.white,
+  });
+  canvas.write(props.label.length + 6 + props.fileName.length, 0, "\ue0ba", {
+    background: "#373040",
+    foreground: "#29293c",
+  });
+
+  return <p>{canvas.render()}</p>;
+};

src/components/Nvim/NvimTree.tsx

@@ -0,0 +1,158 @@
+import { useState, useEffect } from "react";
+import { useApp } from "~/context/AppContext";
+import { useTerminal } from "~/context/TerminalContext";
+import { FILE_STYLES, type File } from "~/utils/filesystem";
+import { type Cell } from "~/utils/terminal/cell";
+import { TerminalRenderer } from "~/utils/terminal/renderer";
+import { theme } from "~/utils/terminal/theme";
+import { type Manifest } from "~/utils/types";
+
+const PATH_FOLDED: Cell = {
+  char: "",
+  foreground: theme.grey,
+};
+
+const PATH_UNFOLDED: Cell = {
+  char: "",
+  foreground: theme.blue,
+};
+
+const buildFileTree = (manifest: Manifest): Array<File> => {
+  if (manifest === undefined) return [];
+
+  const files: Array<File> = [];
+  manifest.projects.forEach(project => {
+    if (project.name === "pihkaal") {
+      project.files.forEach(file => {
+        files.push({
+          name: file,
+          type: "md",
+        });
+      });
+    } else {
+      files.push({
+        name: project.name,
+        type: "directory",
+        folded: true,
+        children: project.files.map(file => ({
+          name: file,
+          type: "md",
+        })),
+      });
+    }
+  });
+
+  return files;
+};
+
+export const NvimTree = () => {
+  const manifest = useApp();
+
+  const [selected, setSelected] = useState(0);
+  const [files, setFiles] = useState(buildFileTree(manifest));
+
+  const { cols: width, rows: height } = useTerminal();
+  const canvas = new TerminalRenderer(width * 0.2, height - 2, {
+    background: "#0000001a",
+  });
+
+  const tree = new TerminalRenderer(canvas.width - 3, height - 1);
+  tree.write(0, selected, " ".repeat(tree.width), { background: "#504651" });
+
+  let y = 0;
+  let indent = 0;
+  const renderTree = (files: Array<File>) => {
+    files.forEach(file => {
+      tree.apply(2 + indent * 2, y, FILE_STYLES[file.type]);
+
+      if (file.type === "directory") {
+        tree.apply(indent * 2, y, file.folded ? PATH_FOLDED : PATH_UNFOLDED);
+        tree.write(4 + indent * 2, y, file.name, {
+          foreground: FILE_STYLES.directory.foreground,
+        });
+
+        y++;
+        if (!file.folded) {
+          indent++;
+          renderTree(file.children);
+          indent--;
+        }
+      } else {
+        if (file.name === "README.md") {
+          tree.write(4 + indent * 2, y, file.name, {
+            foreground: theme.yellow,
+            fontWeight: 800,
+          });
+        } else {
+          tree.write(4 + indent * 2, y, file.name);
+        }
+        y++;
+      }
+    });
+  };
+
+  useEffect(() => {
+    const onScroll = (event: KeyboardEvent) => {
+      switch (event.key) {
+        case "ArrowUp":
+          setSelected(x => Math.max(0, x - 1));
+          break;
+
+        case "ArrowDown":
+          setSelected(x => Math.min(y - 1, x + 1));
+          break;
+
+        case "Enter":
+          let y = 0;
+          const findFile = (files: Array<File>): File | null => {
+            for (const f of files) {
+              if (y === selected) {
+                return f;
+              }
+              y++;
+              if (f.type === "directory" && !f.folded) {
+                const found = findFile(f.children);
+                if (found) return found;
+              }
+            }
+
+            return null;
+          };
+
+          const current = findFile(files);
+          if (!current) {
+            setSelected(0);
+            return;
+          }
+
+          if (current.type === "directory") {
+            current.folded = !current.folded;
+            setFiles([...files]);
+          }
+          break;
+      }
+    };
+
+    window.addEventListener("keydown", onScroll);
+
+    return () => {
+      window.removeEventListener("keydown", onScroll);
+    };
+  });
+
+  renderTree(files);
+
+  canvas.writeElement(tree, 2, 1);
+
+  return <p>{canvas.render()}</p>;
+};
+
+/*
+  .sort((a, b) => a.name.localeCompare(b.name)).sort((a, b) =>
+      a.type === "directory" && b.type !== "directory"
+        ? -1
+        : a.type !== "directory" && b.type === "directory"
+          ? 1
+          : 0,
+    ),
+*/

src/components/Terminal.tsx

@@ -0,0 +1,64 @@
+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>
+  );
+};