From 3832a7ca523d0f99ede5c96a24683fbe210e74b5 Mon Sep 17 00:00:00 2001
From: Pihkaal <pihkaal@proton.me>
Date: Thu, 30 May 2024 15:44:49 +0200
Subject: [PATCH] feat(nvim): implement basic layout

---
 src/App.tsx                            |  5 ++---
 src/components/Kitty.tsx               |  8 ++++----
 src/components/Music/SpotifyPlayer.tsx | 12 ++++++++---
 src/components/Music/index.tsx         |  6 +++---
 src/components/Nvim/NvimEditor.tsx     |  1 +
 src/components/Nvim/NvimInput.tsx      |  1 +
 src/components/Nvim/NvimStatusBar.tsx  | 17 ++++++++++++++++
 src/components/Nvim/NvimTree.tsx       |  1 +
 src/components/Nvim/index.tsx          | 28 ++++++++++++++++++++++++++
 9 files changed, 66 insertions(+), 13 deletions(-)
 create mode 100644 src/components/Nvim/NvimEditor.tsx
 create mode 100644 src/components/Nvim/NvimInput.tsx
 create mode 100644 src/components/Nvim/NvimStatusBar.tsx
 create mode 100644 src/components/Nvim/NvimTree.tsx
 create mode 100644 src/components/Nvim/index.tsx

diff --git a/src/App.tsx b/src/App.tsx
index fb88362..6c93c8d 100644
--- a/src/App.tsx
+++ b/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>
   );
 }
-
diff --git a/src/components/Kitty.tsx b/src/components/Kitty.tsx
index 288195d..722cbeb 100644
--- a/src/components/Kitty.tsx
+++ b/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",
-              animationDuration: "200ms",
-            }
+                borderColor: "#cdd6f4",
+                animationDuration: "200ms",
+              }
             : {}),
         }}
         ref={container}
diff --git a/src/components/Music/SpotifyPlayer.tsx b/src/components/Music/SpotifyPlayer.tsx
index f9e0bed..752cb20 100644
--- a/src/components/Music/SpotifyPlayer.tsx
+++ b/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`,
-        gridTemplateRows: `${CHAR_HEIGHT}px ${CHAR_HEIGHT * 3}px ${CHAR_HEIGHT}px`,
+        gridTemplateColumns: `${CHAR_WIDTH}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,
   );
diff --git a/src/components/Music/index.tsx b/src/components/Music/index.tsx
index 1ec1585..a654533 100644
--- a/src/components/Music/index.tsx
+++ b/src/components/Music/index.tsx
@@ -30,9 +30,9 @@ export const Music = () => {
     if (metadata) return;
 
     void fetch(song)
-      .then((r) => r.blob())
-      .then((b) => parseBlob(b))
-      .then((m) => {
+      .then(r => r.blob())
+      .then(b => parseBlob(b))
+      .then(m => {
         if (!audio.current) return;
 
         setMetadata(m);
diff --git a/src/components/Nvim/NvimEditor.tsx b/src/components/Nvim/NvimEditor.tsx
new file mode 100644
index 0000000..28513e8
--- /dev/null
+++ b/src/components/Nvim/NvimEditor.tsx
@@ -0,0 +1 @@
+export const NvimEditor = () => <div className="h-full">editor</div>;
diff --git a/src/components/Nvim/NvimInput.tsx b/src/components/Nvim/NvimInput.tsx
new file mode 100644
index 0000000..e78b4d8
--- /dev/null
+++ b/src/components/Nvim/NvimInput.tsx
@@ -0,0 +1 @@
+export const NvimInput = () => <div>input</div>;
diff --git a/src/components/Nvim/NvimStatusBar.tsx b/src/components/Nvim/NvimStatusBar.tsx
new file mode 100644
index 0000000..74a4b8d
--- /dev/null
+++ b/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>
+);
diff --git a/src/components/Nvim/NvimTree.tsx b/src/components/Nvim/NvimTree.tsx
new file mode 100644
index 0000000..21eb43a
--- /dev/null
+++ b/src/components/Nvim/NvimTree.tsx
@@ -0,0 +1 @@
+export const NvimTree = () => <div className="h-full bg-[#0000001a]">tree</div>;
diff --git a/src/components/Nvim/index.tsx b/src/components/Nvim/index.tsx
new file mode 100644
index 0000000..05ab8b0
--- /dev/null
+++ b/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>
+);