From dd6c5faa5ab4801c82765b674813e64bf53bb35f Mon Sep 17 00:00:00 2001
From: Pihkaal <pihkaal@proton.me>
Date: Thu, 22 Aug 2024 18:18:21 +0200
Subject: [PATCH] refactor: use class helper instead of component to handle
 responsiveness

---
 src/components/Music/index.tsx  | 20 +++++--
 src/components/Responsive.tsx   | 31 -----------
 src/components/Waybar/index.tsx | 94 +++++++++++++++------------------
 src/context/AppContext.tsx      |  2 +-
 src/providers/AppProvider.tsx   | 15 +++++-
 src/utils/react.ts              |  2 +
 6 files changed, 77 insertions(+), 87 deletions(-)
 delete mode 100644 src/components/Responsive.tsx

diff --git a/src/components/Music/index.tsx b/src/components/Music/index.tsx
index 9871492..707ef78 100644
--- a/src/components/Music/index.tsx
+++ b/src/components/Music/index.tsx
@@ -4,12 +4,12 @@ import { Kitty } from "../Kitty";
 import { SpotifyPlayer } from "./SpotifyPlayer";
 import { Cava } from "./Cava";
 import { useApp } from "~/hooks/useApp";
-import { Responsive } from "../Responsive";
+import { cn, hideIf } from "~/utils/react";
 
 const song = "/audio/asinine-vivement-quoi.mp3";
 
 export const Music = () => {
-  const { volume } = useApp();
+  const { volume, screenWidth } = useApp();
 
   const audio = useRef<HTMLAudioElement>(null);
 
@@ -55,7 +55,13 @@ export const Music = () => {
       <audio ref={audio} src={song} onTimeUpdate={handleTimeUpdate} loop />
       {audio.current && metadata ? (
         <>
-          <Kitty className="h-full w-1/2 pb-2 pl-2 pr-1 pt-1" rows={5}>
+          <Kitty
+            className={cn(
+              "h-full pb-2 pl-2 pr-1 pt-1",
+              screenWidth < 900 ? "w-full" : "w-1/2",
+            )}
+            rows={5}
+          >
             <SpotifyPlayer
               title={metadata.common.title ?? "Unknown"}
               artist={metadata.common.artist ?? "Unknown"}
@@ -66,7 +72,13 @@ export const Music = () => {
             />
           </Kitty>
 
-          <Kitty className="h-full w-1/2 pb-2 pl-1 pr-2 pt-1" rows={5}>
+          <Kitty
+            className={cn(
+              "h-full w-1/2 pb-2 pl-1 pr-2 pt-1",
+              hideIf(screenWidth < 900),
+            )}
+            rows={5}
+          >
             <Cava audio={audio} />
           </Kitty>
         </>
diff --git a/src/components/Responsive.tsx b/src/components/Responsive.tsx
deleted file mode 100644
index fb08af7..0000000
--- a/src/components/Responsive.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-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/index.tsx b/src/components/Waybar/index.tsx
index fb7a953..24496f0 100644
--- a/src/components/Waybar/index.tsx
+++ b/src/components/Waybar/index.tsx
@@ -17,8 +17,12 @@ import { WaybarTrayWidget } from "./Widgets/WaybarTrayWidget";
 import { WaybarToggleThemeWidget } from "./Widgets/WaybarToggleThemeWidget";
 import { WaybarWeatherWidget } from "./Widgets/WaybarWeatherWidget";
 import { Responsive } from "../Responsive";
+import { cn, hideIf } from "~/utils/react";
+import { useApp } from "~/hooks/useApp";
 
 export const Waybar = () => {
+  const { screenWidth } = useApp();
+
   return (
     <div className="grid h-[37px] w-full select-none grid-cols-[1fr_max-content_1fr] grid-rows-1 gap-0">
       <div className="flex items-center gap-3">
@@ -26,32 +30,28 @@ export const Waybar = () => {
           <WaybarHomeWidget />
         </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 className={cn(hideIf(screenWidth < 705))}>
+          <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 minScreenWidth={910}>
-          <WaybarWidgetGroup>
-            <WaybarTitleWidget />
-          </WaybarWidgetGroup>
-        </Responsive>
+        <WaybarWidgetGroup className={cn(hideIf(screenWidth < 910))}>
+          <WaybarTitleWidget />
+        </WaybarWidgetGroup>
       </div>
       <div className="flex items-center">
         <WaybarWidgetGroup>
@@ -61,34 +61,28 @@ export const Waybar = () => {
         </WaybarWidgetGroup>
       </div>
       <div className="flex items-center justify-end gap-2">
-        <Responsive minScreenWidth={1320}>
-          <WaybarWidgetGroup>
-            <WaybarTemperatureWidget
-              min={50}
-              max={70}
-              variation={1}
-              frequency={7000 + randomMinMax(-100, 100)}
-            />
+        <WaybarWidgetGroup className={cn(hideIf(screenWidth < 1320))}>
+          <WaybarTemperatureWidget
+            min={50}
+            max={70}
+            variation={1}
+            frequency={7000 + randomMinMax(-100, 100)}
+          />
 
-            <WaybarBatteryWidget frequency={7000 + randomMinMax(-100, 100)} />
-          </WaybarWidgetGroup>
-        </Responsive>
+          <WaybarBatteryWidget frequency={7000 + randomMinMax(-100, 100)} />
+        </WaybarWidgetGroup>
 
-        <Responsive minScreenWidth={970}>
-          <WaybarWidgetGroup>
-            <WaybarBrightnessWidget />
-            <WaybarVolumeWidget />
-            <WaybarMicrophoneWidget />
-          </WaybarWidgetGroup>
-        </Responsive>
+        <WaybarWidgetGroup className={cn(hideIf(screenWidth < 970))}>
+          <WaybarBrightnessWidget />
+          <WaybarVolumeWidget />
+          <WaybarMicrophoneWidget />
+        </WaybarWidgetGroup>
 
-        <Responsive minScreenWidth={475}>
-          <WaybarWidgetGroup>
-            <WaybarTrayWidget />
-            <WaybarWeatherWidget />
-            <WaybarToggleThemeWidget />
-          </WaybarWidgetGroup>
-        </Responsive>
+        <WaybarWidgetGroup className={cn(hideIf(screenWidth < 475))}>
+          <WaybarTrayWidget />
+          <WaybarWeatherWidget />
+          <WaybarToggleThemeWidget />
+        </WaybarWidgetGroup>
       </div>
     </div>
   );
diff --git a/src/context/AppContext.tsx b/src/context/AppContext.tsx
index a8768b7..a30d68c 100644
--- a/src/context/AppContext.tsx
+++ b/src/context/AppContext.tsx
@@ -5,7 +5,7 @@ export const AppContext = createContext<
   | Prettify<
       State<"activeKitty", string> &
         State<"brightness", number> &
-        State<"volume", number>
+        State<"volume", number> & { screenWidth: number }
     >
   | undefined
 >(undefined);
diff --git a/src/providers/AppProvider.tsx b/src/providers/AppProvider.tsx
index 68bc1c2..4371095 100644
--- a/src/providers/AppProvider.tsx
+++ b/src/providers/AppProvider.tsx
@@ -1,4 +1,4 @@
-import { type ReactNode, useState } from "react";
+import { type ReactNode, useState, useEffect } from "react";
 import { AppContext } from "~/context/AppContext";
 
 export const AppProvider = (props: { children?: ReactNode }) => {
@@ -6,6 +6,18 @@ export const AppProvider = (props: { children?: ReactNode }) => {
   const [brightness, setBrightness] = useState(100);
   const [volume, setVolume] = useState(100);
 
+  const [screenWidth, setScreenWidth] = useState(window.innerWidth);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setScreenWidth(window.innerWidth);
+    };
+
+    window.addEventListener("resize", handleResize);
+
+    return () => window.removeEventListener("resize", handleResize);
+  });
+
   return (
     <AppContext.Provider
       value={{
@@ -15,6 +27,7 @@ export const AppProvider = (props: { children?: ReactNode }) => {
         setBrightness,
         volume,
         setVolume,
+        screenWidth,
       }}
     >
       {props.children}
diff --git a/src/utils/react.ts b/src/utils/react.ts
index 441e078..177c67d 100644
--- a/src/utils/react.ts
+++ b/src/utils/react.ts
@@ -2,3 +2,5 @@ import { type ClassNameValue, twMerge } from "tailwind-merge";
 import { clsx } from "clsx";
 
 export const cn = (...classes: Array<ClassNameValue>) => twMerge(clsx(classes));
+
+export const hideIf = (condition: boolean) => (condition ? "hidden" : "");