feat(nvim): implement basic layout

src/App.tsx

@@ -2,7 +2,7 @@ import { useState } from "react";
 import { Kitty } from "./components/Kitty";
 import { AppProvider } from "./context/AppContext";
 import { Music } from "./components/Music";
-// import { Nvim } from "./components/Nvim";
+import { Nvim } from "./components/Nvim";
 
 export default function App() {
   const [loggedIn, setLoggedIn] = useState(false);
@@ -13,7 +13,7 @@ export default function App() {
         {loggedIn ? (
           <div className="flex h-full w-full flex-col">
             <Kitty className="w-full flex-1 pb-1 pl-2 pr-2 pt-2">
-              {/* <Nvim /> */}
+              <Nvim />
             </Kitty>
 
             <Music />
@@ -32,4 +32,3 @@ export default function App() {
     </AppProvider>
   );
 }
-

src/components/Kitty.tsx

@@ -51,7 +51,7 @@ export const Kitty = (props: {
 
     setWidth(`${width}px`);
     setHeight(`${height}px`);
-    setContext((ctx) => ({ ...(ctx ?? { active: false }), rows, cols }));
+    setContext(ctx => ({ ...(ctx ?? { active: false }), rows, cols }));
   }, []);
 
   useEffect(() => {
@@ -76,9 +76,9 @@ export const Kitty = (props: {
           lineHeight: `${CHAR_HEIGHT}px`,
           ...(activeKitty === id
             ? {
-              borderColor: "#cdd6f4",
+                borderColor: "#cdd6f4",
-              animationDuration: "200ms",
+                animationDuration: "200ms",
-            }
+              }
             : {}),
         }}
         ref={container}

src/components/Music/SpotifyPlayer.tsx

@@ -18,8 +18,12 @@ export const SpotifyPlayer = (props: {
     <div
       className="grid select-none"
       style={{
-        gridTemplateColumns: `${CHAR_WIDTH}px ${CHAR_WIDTH * 8}px 1fr ${CHAR_WIDTH}px`,
+        gridTemplateColumns: `${CHAR_WIDTH}px ${
-        gridTemplateRows: `${CHAR_HEIGHT}px ${CHAR_HEIGHT * 3}px ${CHAR_HEIGHT}px`,
+          CHAR_WIDTH * 8
+        }px 1fr ${CHAR_WIDTH}px`,
+        gridTemplateRows: `${CHAR_HEIGHT}px ${
+          CHAR_HEIGHT * 3
+        }px ${CHAR_HEIGHT}px`,
       }}
     >
       {kitty && <InnerSpotifyPlayer {...props} {...kitty} />}
@@ -35,7 +39,9 @@ const InnerSpotifyPlayer = (props: InnerKittyProps<typeof SpotifyPlayer>) => {
   );
   const emptySize = props.cols - 2 - fillSize;
 
-  const timeString = `${formatMMSS(props.played)}/${formatMMSS(props.duration)}`;
+  const timeString = `${formatMMSS(props.played)}/${formatMMSS(
+    props.duration,
+  )}`;
   const timeStringLeft = Math.round(
     (props.cols - 2) / 2 - timeString.length / 2,
   );

src/components/Music/index.tsx

@@ -30,9 +30,9 @@ export const Music = () => {
     if (metadata) return;
 
     void fetch(song)
-      .then((r) => r.blob())
+      .then(r => r.blob())
-      .then((b) => parseBlob(b))
+      .then(b => parseBlob(b))
-      .then((m) => {
+      .then(m => {
         if (!audio.current) return;
 
         setMetadata(m);

src/components/Nvim/NvimEditor.tsx

@@ -0,0 +1 @@
+export const NvimEditor = () => <div className="h-full">editor</div>;

src/components/Nvim/NvimInput.tsx

@@ -0,0 +1 @@
+export const NvimInput = () => <div>input</div>;

src/components/Nvim/NvimStatusBar.tsx

@@ -0,0 +1,17 @@
+export const NvimStatusBar = (props: {
+  label: string;
+  labelColor: string;
+  fileName: string;
+}) => (
+  <div className="bg-[#29293c]">
+    <span className="text-black" 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] text-[#29293c]">{"\ue0ba"}</span>
+  </div>
+);

src/components/Nvim/NvimTree.tsx

@@ -0,0 +1 @@
+export const NvimTree = () => <div className="h-full bg-[#0000001a]">tree</div>;

src/components/Nvim/index.tsx

@@ -0,0 +1,28 @@
+import { CHAR_HEIGHT } from "../Kitty";
+import { NvimEditor } from "./NvimEditor";
+import { NvimInput } from "./NvimInput";
+import { NvimStatusBar } from "./NvimStatusBar";
+import { NvimTree } from "./NvimTree";
+
+export const Nvim = () => (
+  <div
+    className="grid h-full"
+    style={{
+      gridTemplateColumns: `0.4fr 2fr`,
+      gridTemplateRows: `1fr ${CHAR_HEIGHT}px ${CHAR_HEIGHT}px`,
+    }}
+  >
+    <div style={{ gridArea: "1 / 1 / 1 / 2" }}>
+      <NvimTree />
+    </div>
+    <div style={{ gridArea: "1 / 2 / 1 / 3" }}>
+      <NvimEditor />
+    </div>
+    <div style={{ gridArea: "2 / 1 / 2 / 3" }}>
+      <NvimStatusBar label="INSERT" labelColor="#7ea7ca" fileName="README.md" />
+    </div>
+    <div style={{ gridArea: "3 / 1 / 3 / 3" }}>
+      <NvimInput />
+    </div>
+  </div>
+);