Fix performance issue: debounce resize event listeners

- Add useDebounce hook for value debouncing
- Add useWindowSize hook for debounced window dimensions
- Add useElementSize hook for debounced element size tracking with ResizeObserver
- Replace undebounced resize listeners in App.tsx, simulation-chart.tsx, and settings.tsx
- Prevents excessive re-renders during window resize operations
- Resolves app freezing and performance degradation

src/components/simulation-chart.tsx

@@ -26,6 +26,7 @@ import {
   TooltipTrigger as UiTooltipTrigger,
   TooltipContent as UiTooltipContent,
 } from './ui/tooltip';
+import { useElementSize } from '../hooks/useElementSize';
 
 // Chart color scheme
 const CHART_COLORS = {
@@ -70,21 +71,9 @@ const SimulationChart = ({
   const dispDays = parseInt(displayedDays, 10) || 2;
   const simDays = parseInt(simulationDays, 10) || 3;
 
-  // Calculate chart dimensions
-  const [containerWidth, setContainerWidth] = React.useState(1000);
+  // Calculate chart dimensions using debounced element size observer
   const containerRef = React.useRef<HTMLDivElement>(null);
-
-  React.useEffect(() => {
-    const updateWidth = () => {
-      if (containerRef.current) {
-        setContainerWidth(containerRef.current.clientWidth);
-      }
-    };
-
-    updateWidth();
-    window.addEventListener('resize', updateWidth);
-    return () => window.removeEventListener('resize', updateWidth);
-  }, []);
+  const { width: containerWidth } = useElementSize(containerRef, 150);
 
   // Track current theme for chart styling
   const [isDarkTheme, setIsDarkTheme] = React.useState(false);