initial commit of the paytime session frontend

discord_verificiation/playtime-frontend/lib/useContainerWidth.ts

@@ -0,0 +1,31 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+
+/**
+ * Tracks a container element's width with a plain resize listener, instead
+ * of relying on Recharts' ResponsiveContainer (which uses a ResizeObserver
+ * internally and can silently never fire in some browser/extension setups
+ * — when that happens, ResponsiveContainer renders an empty div forever,
+ * with no error and no fallback). This sidesteps that failure mode
+ * entirely: charts get an explicit pixel width from plain DOM measurement,
+ * which always works.
+ */
+export function useContainerWidth<T extends HTMLElement>(fallback = 600) {
+  const ref = useRef<T>(null);
+  const [width, setWidth] = useState(fallback);
+
+  useEffect(() => {
+    function measure() {
+      if (ref.current) {
+        setWidth(ref.current.clientWidth || fallback);
+      }
+    }
+
+    measure();
+    window.addEventListener('resize', measure);
+    return () => window.removeEventListener('resize', measure);
+  }, [fallback]);
+
+  return { ref, width };
+}