From 03d90db62090e636419d032646cb8a90ea22fbab Mon Sep 17 00:00:00 2001
From: Pihkaal <pihkaal@proton.me>
Date: Thu, 22 Aug 2024 14:57:13 +0200
Subject: [PATCH] feat(waybar): hide groups based on screen size

---
 src/components/Music/index.tsx                | 10 ++
 src/components/Responsive.tsx                 | 31 +++++++
 src/components/Waybar/WaybarWidgetGroup.tsx   |  2 +-
 .../Waybar/Widgets/WaybarCPUWidget.tsx        |  2 +-
 .../Waybar/Widgets/WaybarTitleWidget.tsx      |  2 +-
 src/components/Waybar/index.tsx               | 91 +++++++++++--------
 6 files changed, 95 insertions(+), 43 deletions(-)
 create mode 100644 src/components/Responsive.tsx

diff --git a/src/components/Music/index.tsx b/src/components/Music/index.tsx
index 54048c2..9871492 100644
--- a/src/components/Music/index.tsx
+++ b/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 />
diff --git a/src/components/Responsive.tsx b/src/components/Responsive.tsx
new file mode 100644
index 0000000..fb08af7
--- /dev/null
+++ b/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;
+};
diff --git a/src/components/Waybar/WaybarWidgetGroup.tsx b/src/components/Waybar/WaybarWidgetGroup.tsx
index 85f6dfc..e993525 100644
--- a/src/components/Waybar/WaybarWidgetGroup.tsx
+++ b/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(
diff --git a/src/components/Waybar/Widgets/WaybarCPUWidget.tsx b/src/components/Waybar/Widgets/WaybarCPUWidget.tsx
index 8bbb1a2..cdc6b4b 100644
--- a/src/components/Waybar/Widgets/WaybarCPUWidget.tsx
+++ b/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>
           ))}
diff --git a/src/components/Waybar/Widgets/WaybarTitleWidget.tsx b/src/components/Waybar/Widgets/WaybarTitleWidget.tsx
index 6ab25dd..5f02744 100644
--- a/src/components/Waybar/Widgets/WaybarTitleWidget.tsx
+++ b/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>
 );
diff --git a/src/components/Waybar/index.tsx b/src/components/Waybar/index.tsx
index 140bdb3..fb7a953 100644
--- a/src/components/Waybar/index.tsx
+++ b/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>
-          <WaybarCPUWidget
-            variation={1}
-            frequency={3250 + randomMinMax(-100, 100)}
-            cores={10}
-            min={8}
-            max={16}
-          />
-          <WaybarRAMWidget
-            variation={1}
-            frequency={5000 + randomMinMax(-100, 100)}
-            min={18}
-            max={40}
-            start={randomMinMax(20, 30)}
-            capacity={16}
-          />
-          <WaybarDiskWidget current={35.9} variation={4.1} capacity={160.3} />
-        </WaybarWidgetGroup>
+        <Responsive minScreenWidth={705}>
+          <WaybarWidgetGroup>
+            <WaybarCPUWidget
+              variation={1}
+              frequency={3250 + randomMinMax(-100, 100)}
+              cores={12}
+              min={8}
+              max={16}
+            />
+            <WaybarRAMWidget
+              variation={1}
+              frequency={5000 + randomMinMax(-100, 100)}
+              min={18}
+              max={40}
+              start={randomMinMax(20, 30)}
+              capacity={16}
+            />
+            <WaybarDiskWidget current={35.9} variation={4.1} capacity={160.3} />
+          </WaybarWidgetGroup>
+        </Responsive>
 
-        <WaybarWidgetGroup>
-          <WaybarTitleWidget />
-        </WaybarWidgetGroup>
+        <Responsive minScreenWidth={910}>
+          <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>
-          <WaybarTemperatureWidget
-            min={50}
-            max={70}
-            variation={1}
-            frequency={7000 + randomMinMax(-100, 100)}
-          />
+        <Responsive minScreenWidth={1320}>
+          <WaybarWidgetGroup>
+            <WaybarTemperatureWidget
+              min={50}
+              max={70}
+              variation={1}
+              frequency={7000 + randomMinMax(-100, 100)}
+            />
 
-          <WaybarBatteryWidget frequency={7000 + randomMinMax(-100, 100)} />
-        </WaybarWidgetGroup>
+            <WaybarBatteryWidget frequency={7000 + randomMinMax(-100, 100)} />
+          </WaybarWidgetGroup>
+        </Responsive>
 
-        <WaybarWidgetGroup>
-          <WaybarBrightnessWidget />
-          <WaybarVolumeWidget />
-          <WaybarMicrophoneWidget />
-        </WaybarWidgetGroup>
+        <Responsive minScreenWidth={970}>
+          <WaybarWidgetGroup>
+            <WaybarBrightnessWidget />
+            <WaybarVolumeWidget />
+            <WaybarMicrophoneWidget />
+          </WaybarWidgetGroup>
+        </Responsive>
 
-        <WaybarWidgetGroup>
-          <WaybarTrayWidget />
-          <WaybarWeatherWidget />
-          <WaybarToggleThemeWidget />
-        </WaybarWidgetGroup>
+        <Responsive minScreenWidth={475}>
+          <WaybarWidgetGroup>
+            <WaybarTrayWidget />
+            <WaybarWeatherWidget />
+            <WaybarToggleThemeWidget />
+          </WaybarWidgetGroup>
+        </Responsive>
       </div>
     </div>
   );