feat(waybar): hide groups based on screen size

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;
+};