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,28 +26,32 @@ export const Waybar = () => {
           <WaybarHomeWidget />
         </WaybarWidgetGroup>
 
-        <WaybarWidgetGroup>
+        <Responsive minScreenWidth={705}>
-          <WaybarCPUWidget
+          <WaybarWidgetGroup>
-            variation={1}
+            <WaybarCPUWidget
-            frequency={3250 + randomMinMax(-100, 100)}
+              variation={1}
-            cores={10}
+              frequency={3250 + randomMinMax(-100, 100)}
-            min={8}
+              cores={12}
-            max={16}
+              min={8}
-          />
+              max={16}
-          <WaybarRAMWidget
+            />
-            variation={1}
+            <WaybarRAMWidget
-            frequency={5000 + randomMinMax(-100, 100)}
+              variation={1}
-            min={18}
+              frequency={5000 + randomMinMax(-100, 100)}
-            max={40}
+              min={18}
-            start={randomMinMax(20, 30)}
+              max={40}
-            capacity={16}
+              start={randomMinMax(20, 30)}
-          />
+              capacity={16}
-          <WaybarDiskWidget current={35.9} variation={4.1} capacity={160.3} />
+            />
-        </WaybarWidgetGroup>
+            <WaybarDiskWidget current={35.9} variation={4.1} capacity={160.3} />
+          </WaybarWidgetGroup>
+        </Responsive>
 
-        <WaybarWidgetGroup>
+        <Responsive minScreenWidth={910}>
-          <WaybarTitleWidget />
+          <WaybarWidgetGroup>
-        </WaybarWidgetGroup>
+            <WaybarTitleWidget />
+          </WaybarWidgetGroup>
+        </Responsive>
       </div>
       <div className="flex items-center">
         <WaybarWidgetGroup>
@@ -56,28 +61,34 @@ export const Waybar = () => {
         </WaybarWidgetGroup>
       </div>
       <div className="flex items-center justify-end gap-2">
-        <WaybarWidgetGroup>
+        <Responsive minScreenWidth={1320}>
-          <WaybarTemperatureWidget
+          <WaybarWidgetGroup>
-            min={50}
+            <WaybarTemperatureWidget
-            max={70}
+              min={50}
-            variation={1}
+              max={70}
-            frequency={7000 + randomMinMax(-100, 100)}
+              variation={1}
-          />
+              frequency={7000 + randomMinMax(-100, 100)}
+            />
 
-          <WaybarBatteryWidget frequency={7000 + randomMinMax(-100, 100)} />
+            <WaybarBatteryWidget frequency={7000 + randomMinMax(-100, 100)} />
-        </WaybarWidgetGroup>
+          </WaybarWidgetGroup>
+        </Responsive>
 
-        <WaybarWidgetGroup>
+        <Responsive minScreenWidth={970}>
-          <WaybarBrightnessWidget />
+          <WaybarWidgetGroup>
-          <WaybarVolumeWidget />
+            <WaybarBrightnessWidget />
-          <WaybarMicrophoneWidget />
+            <WaybarVolumeWidget />
-        </WaybarWidgetGroup>
+            <WaybarMicrophoneWidget />
+          </WaybarWidgetGroup>
+        </Responsive>
 
-        <WaybarWidgetGroup>
+        <Responsive minScreenWidth={475}>
-          <WaybarTrayWidget />
+          <WaybarWidgetGroup>
-          <WaybarWeatherWidget />
+            <WaybarTrayWidget />
-          <WaybarToggleThemeWidget />
+            <WaybarWeatherWidget />
-        </WaybarWidgetGroup>
+            <WaybarToggleThemeWidget />
+          </WaybarWidgetGroup>
+        </Responsive>
       </div>
     </div>
   );