refactor: use class helper instead of component to handle responsiveness

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}