feat(waybar): hide groups based on screen size

src/components/Music/index.tsx

@@ -3,10 +3,14 @@ import { type IAudioMetadata, parseBlob } from "music-metadata-browser";
 import { Kitty } from "../Kitty";
 import { SpotifyPlayer } from "./SpotifyPlayer";
 import { Cava } from "./Cava";
+import { useApp } from "~/hooks/useApp";
+import { Responsive } from "../Responsive";
 
 const song = "/audio/asinine-vivement-quoi.mp3";
 
 export const Music = () => {
+  const { volume } = useApp();
+
   const audio = useRef<HTMLAudioElement>(null);
 
   const [metadata, setMetadata] = useState<IAudioMetadata>();
@@ -40,6 +44,12 @@ export const Music = () => {
       });
   }, [metadata]);
 
+  useEffect(() => {
+    if (audio.current) {
+      audio.current.volume = volume / 400;
+    }
+  }, [volume]);
+
   return (
     <div className="flex flex-row">
       <audio ref={audio} src={song} onTimeUpdate={handleTimeUpdate} loop />

src/components/Responsive.tsx

@@ -0,0 +1,31 @@
+import { useState, type ReactNode, useEffect } from "react";
+import { cn } from "~/utils/react";
+
+export const Responsive = (props: {
+  className?: string;
+  minScreenWidth?: number;
+  children: ReactNode;
+}) => {
+  const [hidden, setHidden] = useState(false);
+
+  useEffect(() => {
+    if (!props.minScreenWidth) return;
+
+    const handleResize = () => {
+      setHidden(
+        props.minScreenWidth !== undefined &&
+          window.innerWidth < props.minScreenWidth,
+      );
+    };
+
+    window.addEventListener("resize", handleResize);
+
+    handleResize();
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [props.minScreenWidth]);
+
+  return hidden ? null : props.children;
+};

src/components/Waybar/WaybarWidgetGroup.tsx

@@ -3,7 +3,7 @@ import { cn } from "~/utils/react";
 
 export const WaybarWidgetGroup = (props: {
   className?: string;
-  children: ReactNode | Array<ReactNode>;
+  children: ReactNode;
 }) => (
   <div
     className={cn(

src/components/Waybar/Widgets/WaybarCPUWidget.tsx

@@ -38,7 +38,7 @@ export const WaybarCPUWidget = (props: {
         <ul>
           <li>Total: {totalUsage}%</li>
           {usage.map((value, i) => (
-            <li>
+            <li key={i}>
               Core{i}: {value}%
             </li>
           ))}

src/components/Waybar/Widgets/WaybarTitleWidget.tsx

@@ -1,5 +1,5 @@
 import { WaybarWidget } from "../WaybarWidget";
 
 export const WaybarTitleWidget = () => (
-  <WaybarWidget className="px-3">nvim</WaybarWidget>
+  <WaybarWidget className="px-3">pihkaal</WaybarWidget>
 );

src/components/Waybar/index.tsx

@@ -16,6 +16,7 @@ import { WaybarPowerWidget } from "./Widgets/WaybarPowerWidget";
 import { WaybarTrayWidget } from "./Widgets/WaybarTrayWidget";
 import { WaybarToggleThemeWidget } from "./Widgets/WaybarToggleThemeWidget";
 import { WaybarWeatherWidget } from "./Widgets/WaybarWeatherWidget";
+import { Responsive } from "../Responsive";
 
 export const Waybar = () => {
   return (
@@ -25,11 +26,12 @@ export const Waybar = () => {
           <WaybarHomeWidget />
         </WaybarWidgetGroup>
 
+        <Responsive minScreenWidth={705}>
           <WaybarWidgetGroup>
             <WaybarCPUWidget
               variation={1}
               frequency={3250 + randomMinMax(-100, 100)}
-            cores={10}
+              cores={12}
               min={8}
               max={16}
             />
@@ -43,10 +45,13 @@ export const Waybar = () => {
             />
             <WaybarDiskWidget current={35.9} variation={4.1} capacity={160.3} />
           </WaybarWidgetGroup>
+        </Responsive>
 
+        <Responsive minScreenWidth={910}>
           <WaybarWidgetGroup>
             <WaybarTitleWidget />
           </WaybarWidgetGroup>
+        </Responsive>
       </div>
       <div className="flex items-center">
         <WaybarWidgetGroup>
@@ -56,6 +61,7 @@ export const Waybar = () => {
         </WaybarWidgetGroup>
       </div>
       <div className="flex items-center justify-end gap-2">
+        <Responsive minScreenWidth={1320}>
           <WaybarWidgetGroup>
             <WaybarTemperatureWidget
               min={50}
@@ -66,18 +72,23 @@ export const Waybar = () => {
 
             <WaybarBatteryWidget frequency={7000 + randomMinMax(-100, 100)} />
           </WaybarWidgetGroup>
+        </Responsive>
 
+        <Responsive minScreenWidth={970}>
           <WaybarWidgetGroup>
             <WaybarBrightnessWidget />
             <WaybarVolumeWidget />
             <WaybarMicrophoneWidget />
           </WaybarWidgetGroup>
+        </Responsive>
 
+        <Responsive minScreenWidth={475}>
           <WaybarWidgetGroup>
             <WaybarTrayWidget />
             <WaybarWeatherWidget />
             <WaybarToggleThemeWidget />
           </WaybarWidgetGroup>
+        </Responsive>
       </div>
     </div>
   );