feat(nvim): word wrap and snap tree width to characters

src/components/Kitty.tsx

@@ -85,7 +85,7 @@ export const Kitty = (props: {
         ref={container}
       >
         <div
-          className="whitespace-pre"
+          className="whitespace-pre-wrap"
           style={{ backdropFilter: "blur(2px)", width, height }}
         >
           <KittyProvider value={context}>{props.children}</KittyProvider>

src/components/Nvim/NvimEditor.tsx

@@ -14,5 +14,5 @@ export const NvimEditor = (props: { source: string | undefined }) => {
     });
   }, [props.source]);
 
-  return <div className="h-full">{loading ? "Loading..." : data}</div>;
+  return <p>{loading ? "Loading..." : data}</p>;
 };

src/components/Nvim/NvimStatusBar.tsx

@@ -6,7 +6,7 @@ export const NvimStatusBar = (props: {
   fileIcon?: string;
   fileName: string;
 }) => (
-  <div className="bg-[#29293c]">
+  <div className="select-none bg-[#29293c]">
     <span className="text-[#272332]" style={{ background: props.labelColor }}>
       {` ${props.label} `}
     </span>

src/components/Nvim/NvimTree/index.tsx

@@ -10,7 +10,6 @@ import {
 import { type Nvim } from "..";
 import { NvimTreeDirectory } from "./NvimTreeDirectory";
 import { NvimTreeFile } from "./NvimTreeFile";
-import { promiseHooks } from "v8";
 
 const sortFiles = (files: Array<File | Directory>) =>
   files

src/components/Nvim/index.tsx

@@ -1,15 +1,19 @@
 import { useKitty } from "~/hooks/useKitty";
-import { CHAR_HEIGHT } from "../Kitty";
+import { CHAR_HEIGHT, CHAR_WIDTH } from "../Kitty";
 import { NvimEditor } from "./NvimEditor";
 import { NvimInput } from "./NvimInput";
 import { NvimStatusBar } from "./NvimStatusBar";
 import { NvimTree } from "./NvimTree";
 import { useState } from "react";
-import { File } from "~/utils/types";
+import { File, InnerKittyProps } from "~/utils/types";
 
 export const Nvim = (_props: {}) => {
   const kitty = useKitty();
 
+  return kitty && <InnerNvimTree {...kitty} />;
+};
+
+const InnerNvimTree = (props: InnerKittyProps<typeof Nvim>) => {
   const [activeFile, setActiveFile] = useState<{
     name: string;
     url: string;
@@ -32,31 +36,36 @@ export const Nvim = (_props: {}) => {
     <div
       className="grid h-full"
       style={{
-        gridTemplateColumns: `0.4fr 2fr`,
+        gridTemplateColumns: `minmax(${CHAR_WIDTH * 20}px, ${
+          Math.round(props.cols * 0.2) * CHAR_WIDTH
+        }px) 1fr`,
         gridTemplateRows: `1fr ${CHAR_HEIGHT}px ${CHAR_HEIGHT}px`,
       }}
     >
-      {kitty && (
-        <>
-          <div style={{ gridArea: "1 / 1 / 1 / 2" }}>
-            <NvimTree {...kitty} onOpen={handleOpenFile} />
-          </div>
-          <div style={{ gridArea: "1 / 2 / 1 / 3", overflow: "scroll" }}>
-            <NvimEditor source={activeFile?.url} />
-          </div>
-          <div style={{ gridArea: "2 / 1 / 2 / 3" }}>
-            <NvimStatusBar
-              label=" NORMAL"
-              labelColor="#7ea7ca"
-              fileIcon={activeFile?.icon}
-              fileName={activeFile?.name ?? `NvimTree_1`}
-            />
-          </div>
-          <div style={{ gridArea: "3 / 1 / 3 / 3" }}>
-            <NvimInput />
-          </div>
-        </>
-      )}
+      <div style={{ gridArea: "1 / 1 / 1 / 2" }}>
+        <NvimTree {...props} onOpen={handleOpenFile} />
+      </div>
+      <div
+        className="overflow-y-auto break-all"
+        style={{
+          gridArea: "1 / 2 / 1 / 3",
+          overflowY: "auto",
+          wordWrap: "break-word",
+        }}
+      >
+        <NvimEditor source={activeFile?.url} />
+      </div>
+      <div style={{ gridArea: "2 / 1 / 2 / 3" }}>
+        <NvimStatusBar
+          label=" NORMAL"
+          labelColor="#7ea7ca"
+          fileIcon={activeFile?.icon}
+          fileName={activeFile?.name ?? `NvimTree_1`}
+        />
+      </div>
+      <div style={{ gridArea: "3 / 1 / 3 / 3" }}>
+        <NvimInput />
+      </div>
     </div>
   );
 };