feat(nvim): display active file in status bar and use url in editor

src/components/Nvim/NvimEditor.tsx

@@ -1,3 +1,8 @@
-export const NvimEditor = (props: { source: string | undefined }) => (
-  <div className="h-full">{props.source}</div>
-);
+import { useState } from "react";
+
+export const NvimEditor = (props: { source: string | undefined }) => {
+  const [data, setData] = useState<string>();
+  const [loading, setLoading] = useState(false);
+
+  return <div className="h-full">{props.source}</div>;
+};

src/components/Nvim/NvimStatusBar.tsx

@@ -1,17 +1,22 @@
+import { ICONS, getIcon } from "~/utils/icons";
+
 export const NvimStatusBar = (props: {
   label: string;
   labelColor: string;
+  fileIcon?: string;
   fileName: string;
 }) => (
   <div className="bg-[#29293c]">
-    <span className="text-black" style={{ background: props.labelColor }}>
+    <span className="text-[#272332]" style={{ background: props.labelColor }}>
       {` ${props.label} `}
     </span>
     <span className="text-[#474353]" style={{ background: props.labelColor }}>
       {"\ue0ba"}
     </span>
     <span className="bg-[#474353] text-[#373040]">{"\ue0ba"}</span>
-    <span className="bg-[#373040] text-white">{` ${props.fileName} `}</span>
+    <span className="bg-[#373040]">{` ${getIcon(props.fileIcon).char}${
+      props.fileName
+    } `}</span>
     <span className="bg-[#373040] text-[#29293c]">{"\ue0ba"}</span>
   </div>
 );

src/components/Nvim/NvimTree/NvimTreeFile.tsx

@@ -1,4 +1,4 @@
-import { ICONS } from "~/utils/icons";
+import { getIcon } from "~/utils/icons";
 import { File } from "~/utils/types";
 
 export const NvimTreeFile = (props: {
@@ -8,34 +8,25 @@ export const NvimTreeFile = (props: {
   inDirectory: boolean | "last";
   onSelect: (y: number) => void;
   onOpen: (file: File) => void;
-}) => {
-  let iconName = props.file.icon;
-  if (!iconName) {
-    const parts = props.file.name.split(".");
-    iconName = parts[parts.length - 1];
-  }
-
-  if (!ICONS[iconName]) iconName = "UNKNOWN";
-  const icon = ICONS[iconName];
-
-  return (
-    <li
-      style={{ background: props.selected ? "#504651" : "" }}
-      onMouseDown={() => props.onSelect(props.y)}
-      onDoubleClick={() => props.onOpen(props.file)}
-    >
-      {"  "}
-      {props.inDirectory && (
-        <span className="text-[#5b515b]">
-          {props.inDirectory === "last" ? "└ " : "│ "}
-        </span>
-      )}
-      <span style={{ color: icon.color }}>{`${icon.char}`}</span>
-      {props.file.name === "README.md" ? (
-        <span className="font-bold text-[#d8c5a1]">README.md</span>
-      ) : (
-        <span>{props.file.name}</span>
-      )}
-    </li>
-  );
-};
+}) => (
+  <li
+    style={{ background: props.selected ? "#504651" : "" }}
+    onMouseDown={() => props.onSelect(props.y)}
+    onDoubleClick={() => props.onOpen(props.file)}
+  >
+    {"  "}
+    {props.inDirectory && (
+      <span className="text-[#5b515b]">
+        {props.inDirectory === "last" ? "└ " : "│ "}
+      </span>
+    )}
+    <span style={{ color: getIcon(props.file).color }}>{`${
+      getIcon(props.file).char
+    }`}</span>
+    {props.file.name === "README.md" ? (
+      <span className="font-bold text-[#d8c5a1]">README.md</span>
+    ) : (
+      <span>{props.file.name}</span>
+    )}
+  </li>
+);

src/components/Nvim/NvimTree/index.tsx

@@ -159,20 +159,3 @@ export const NvimTree = (
     </div>
   );
 };
-
-type FileIcon = {
-  char: string;
-  color: string;
-};
-
-const FILE_ICONS: Record<string, FileIcon> = {
-  md: {
-    char: " ",
-    color: "#89bafa",
-  },
-  asc: {
-    char: "󰷖 ",
-    color: "#f9e2af",
-  },
-  UNKNOWN: { char: "󰈚 ", color: "#f599ae" },
-};

src/components/Nvim/index.tsx

@@ -10,15 +10,21 @@ import { File } from "~/utils/types";
 export const Nvim = (_props: {}) => {
   const kitty = useKitty();
 
-  const [activeFile, setActiveFile] = useState<string>();
+  const [activeFile, setActiveFile] = useState<{
+    name: string;
+    url: string;
+    icon?: string;
+  }>();
 
   const handleOpenFile = (file: File) => {
     if (file.type === "link") {
       window.open(file.url, "_blank")?.focus();
     } else {
-      setActiveFile(
-        `https://raw.githubusercontent.com/pihkaal/${file.repo}/main/${file.fileName}`,
-      );
+      setActiveFile({
+        name: file.repo === "pihkaal" ? file.fileName : file.repo,
+        icon: file.icon,
+        url: `https://raw.githubusercontent.com/pihkaal/${file.repo}/main/${file.fileName}`,
+      });
     }
   };
 
@@ -36,13 +42,14 @@ export const Nvim = (_props: {}) => {
             <NvimTree {...kitty} onOpen={handleOpenFile} />
           </div>
           <div style={{ gridArea: "1 / 2 / 1 / 3", overflow: "scroll" }}>
-            <NvimEditor source={activeFile} />
+            <NvimEditor source={activeFile?.url} />
           </div>
           <div style={{ gridArea: "2 / 1 / 2 / 3" }}>
             <NvimStatusBar
-              label="INSERT"
+              label=" NORMAL"
               labelColor="#7ea7ca"
-              fileName="README.md"
+              fileIcon={activeFile?.icon}
+              fileName={activeFile?.name ?? `NvimTree_1`}
             />
           </div>
           <div style={{ gridArea: "3 / 1 / 3 / 3" }}>