feat: use new way to work with group sizes

src/App.tsx

@@ -1,7 +1,5 @@
 import { BrowserRouter } from "react-router-dom";
 import { MusicPlayer } from "./components/MusicPlayer";
-import { MusicVisualizer } from "./components/MusicVisualizer";
-import { Nvim } from "./components/Nvim/Nvim";
 import { Kitty } from "./components/Kitty";
 import { AppContextProvider } from "./context/AppContext";
 import { Waybar } from "./components/Waybar/Waybar";
@@ -19,7 +17,7 @@ function App() {
 
           <Kitty className="flex-1"></Kitty>
 
-          <div className="flex gap-3 h-[142px]">
+          <div className="flex h-[142px] gap-3">
             <Kitty className="flex-1 select-none">
               <MusicPlayer
                 title="Last Tango in Kyoto"

src/components/Kitty.tsx

@@ -10,6 +10,6 @@ export const Kitty = (props: { children?: ReactNode; className?: string }) => (
     )}
     style={{ backdropFilter: "blur(2px)" }}
   >
-    <Terminal>{props.children}</Terminal>
+    <Terminal font="20px JetbrainsMono">{props.children}</Terminal>
   </div>
 );

src/components/MusicPlayer.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { Bar, Frame, Group, Terminal, Text, useTerminal } from "react-dom-curse";
+import { Bar, Frame, Group, Text, useTerminal } from "react-dom-curse";
 import { theme } from "~/utils/theme";
 
 const formatDurationMSS = (duration: number) => {
@@ -15,7 +15,7 @@ export const MusicPlayer = (props: {
   album: string;
   duration: number;
 }) => {
-  const { terminal } = useTerminal();
+  const { width } = useTerminal();
 
   const [played, setPlayed] = useState(0);
   useEffect(() => {
@@ -34,49 +34,51 @@ export const MusicPlayer = (props: {
     <Group
       x={0}
       y={0}
-        width={terminal.width}
+      width={width}
-        height={terminal.height}
+      height={5}
       style={{ foreground: theme.white }}
     >
-        <Frame
+      <Frame x={0} y={0} width={width} height={5} border="single">
-          x={0}
+        <Text x={0} y={0} style={{ foreground: theme.cyan, bold: true }}>
-          y={0}
-          width={terminal.width}
-          height={terminal.height}
-          border="single"
-        >
-          <Text x={0} y={0} style={{ foreground: theme.cyan }}>
           {props.title} · {props.artist}
         </Text>
         <Text x={0} y={1} style={{ foreground: theme.yellow }}>
           {props.album}
         </Text>
 
-          <Group x={0} y={2} width={terminal.width} height={1}>
+        <Group x={0} y={2} width={width} height={1}>
           <Bar
             x={0}
             y={0}
-              style={{ foreground: theme.green, background: "#55576d" }}
+            style={{
+              foreground: theme.green,
+              background: "#55576d",
+              bold: true,
+            }}
             char=" "
-              size={terminal.width}
+            size={width}
             direction="horizontal"
           />
           <Bar
             x={0}
             y={0}
-              style={{ foreground: "#55576d", background: theme.green }}
+            style={{
+              foreground: "#55576d",
+              background: theme.green,
+              bold: true,
+            }}
             char=" "
-              size={terminal.width * (played / props.duration)}
+            size={width * (played / props.duration)}
             direction="horizontal"
           />
-            <Text x={Math.floor(terminal.width / 2 - time.length / 2)} y={0}>
+          <Text x={Math.floor(width / 2 - time.length / 2 - 1)} y={0}>
             {time}
           </Text>
         </Group>
       </Frame>
 
       <Text x={1} y={0} style={{ foreground: theme.magenta }}>
-          Playback
+        {"Playback".substring(0, Math.min(8, width - 2))}
       </Text>
     </Group>
   );