feat(nvim): display selected file in tree in the editor

src/components/Nvim/Nvim.tsx

@@ -2,19 +2,71 @@ import { useApp } from "~/context/AppContext";
 import { NvimStatusBar } from "./NvimStatusBar";
 import { NvimTree } from "./NvimTree";
 import { buildFileTree } from "~/utils/filesystem";
+import { useEffect, useState } from "react";
+import axios from "axios";
+import { useLocation, useNavigate } from "react-router-dom";
+import { NvimEditor } from "./NvimEditor";
+
+const fetchData = async (
+  branch: string,
+  repo: string,
+  file: string,
+): Promise<string | null> => {
+  try {
+    const response = await axios.get<string>(
+      `https://raw.githubusercontent.com/pihkaal/${repo}/${branch}/${file}`,
+    );
+    return response.data;
+  } catch {
+    return null;
+  }
+};
 
 export const Nvim = () => {
   const manifest = useApp();
+  const [data, setData] = useState<string | null>(null);
+
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const params = new URLSearchParams(location.search);
+    const view = params.get("view");
+    if (!view) {
+      navigate("?view=README.md");
+      return;
+    }
+
+    const path = view.split("/");
+    if (path.length === 1) {
+      path.splice(0, 0, "pihkaal");
+    }
+    const repo = path[0]!;
+    const file = path[1]!;
+
+    void (async () => {
+      const data =
+        (await fetchData("main", repo, file)) ??
+        (await fetchData("dev", repo, file));
+      if (!data) {
+        navigate("?view=README.md");
+        return;
+      }
+
+      setData(data);
+    })();
+  }, [location, navigate]);
 
   return (
-    <div>
-      <div className="flex">
+    <div className="flex flex-col">
+      <div className="flex flex-1 flex-row">
         <div className="w-fit">
           <NvimTree files={buildFileTree(manifest)} />
         </div>
-        <div className="flex-1"></div>
+        <div className="flex-1">
+          <NvimEditor content={data} />
+        </div>
       </div>
-
       <div className="h-fit bg-[#29293c]">
         <NvimStatusBar label="NORMAL" fileName="README.md" />
       </div>

src/components/Nvim/NvimEditor.tsx

@@ -0,0 +1,16 @@
+import { useTerminal } from "~/context/TerminalContext";
+import { TerminalRenderer } from "~/utils/terminal/renderer";
+
+export const NvimEditor = (props: { content: string | null }) => {
+  const { cols: width, rows: height } = useTerminal();
+
+  const canvas = new TerminalRenderer(width * 0.8, height - 2);
+
+  if (props.content) {
+    props.content.split("\n").forEach((line, y) => {
+      canvas.write(0, y, line);
+    });
+  }
+
+  return canvas.render();
+};

src/components/Nvim/NvimTree.tsx

@@ -1,4 +1,5 @@
 import { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
 import { useTerminal } from "~/context/TerminalContext";
 import {
   DEFAULT_FILE_STYLE,
@@ -23,6 +24,7 @@ const PATH_UNFOLDED: Cell = {
 export const NvimTree = (props: { files: Array<File> }) => {
   const [selected, setSelected] = useState(0);
   const [files, setFiles] = useState(props.files);
+  const navigate = useNavigate();
 
   const { cols: width, rows: height } = useTerminal();
   const canvas = new TerminalRenderer(width * 0.2, height - 2, {
@@ -108,6 +110,9 @@ export const NvimTree = (props: { files: Array<File> }) => {
           if (current.type === "directory") {
             current.folded = !current.folded;
             setFiles([...files]);
+          } else {
+            //document.location.href = `?view=${current.path}`
+            navigate(`?view=${current.path}`);
           }
           break;
       }