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 }) => (
+import { useState } from "react";
-  <div className="h-full">{props.source}</div>
+
-);
+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;
+  <li
-  if (!iconName) {
+    style={{ background: props.selected ? "#504651" : "" }}
-    const parts = props.file.name.split(".");
+    onMouseDown={() => props.onSelect(props.y)}
-    iconName = parts[parts.length - 1];
+    onDoubleClick={() => props.onOpen(props.file)}
-  }
+  >
-
+    {"  "}
-  if (!ICONS[iconName]) iconName = "UNKNOWN";
+    {props.inDirectory && (
-  const icon = ICONS[iconName];
+      <span className="text-[#5b515b]">
-
+        {props.inDirectory === "last" ? "└ " : "│ "}
-  return (
+      </span>
-    <li
+    )}
-      style={{ background: props.selected ? "#504651" : "" }}
+    <span style={{ color: getIcon(props.file).color }}>{`${
-      onMouseDown={() => props.onSelect(props.y)}
+      getIcon(props.file).char
-      onDoubleClick={() => props.onOpen(props.file)}
+    }`}</span>
-    >
+    {props.file.name === "README.md" ? (
-      {"  "}
+      <span className="font-bold text-[#d8c5a1]">README.md</span>
-      {props.inDirectory && (
+    ) : (
-        <span className="text-[#5b515b]">
+      <span>{props.file.name}</span>
-          {props.inDirectory === "last" ? "└ " : "│ "}
+    )}
-        </span>
+  </li>
-      )}
+);
-      <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>
-  );
-};

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(
+      setActiveFile({
-        `https://raw.githubusercontent.com/pihkaal/${file.repo}/main/${file.fileName}`,
+        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" }}>

src/utils/icons.ts

@@ -1,4 +1,23 @@
-import { Icon } from "./types";
+import { File, Icon } from "./types";
+
+export const getIcon = (file: File | string | undefined): Icon => {
+  if (file === undefined) return ICONS["UNKNOWN"];
+
+  let iconName;
+  if (typeof file === "string") {
+    const parts = file.split(".");
+    iconName = parts[parts.length - 1];
+  } else {
+    iconName = file.icon;
+    if (!iconName) {
+      const parts = file.name.split(".");
+      iconName = parts[parts.length - 1];
+    }
+  }
+
+  if (!ICONS[iconName]) iconName = "UNKNOWN";
+  return ICONS[iconName];
+};
 
 export const ICONS: Record<string, Icon> = {
   md: {