first commit

ui/hooks/useTablePageSize.ts

@@ -0,0 +1,62 @@
+import { RefObject, useCallback, useEffect, useState } from "react";
+
+const ROW_HEIGHT = 48; // h-12 = 3rem = 48px
+const HEADER_HEIGHT = 44; // approximate table header height
+const STATUS_ROW_HEIGHT = 48; // the "Listening for logs..." row (h-12)
+const MIN_PAGE_SIZE = 5; // minimum items per page
+
+interface UseTablePageSizeOptions {
+	debounceMs?: number;
+}
+
+export function useTablePageSize(containerRef: RefObject<HTMLElement | null>, options: UseTablePageSizeOptions = {}): number | null {
+	const { debounceMs = 150 } = options;
+	const [pageSize, setPageSize] = useState<number | null>(null);
+
+	const calculatePageSize = useCallback((height: number): number => {
+		const availableHeight = height - HEADER_HEIGHT - STATUS_ROW_HEIGHT;
+		const calculated = Math.floor(availableHeight / ROW_HEIGHT);
+		return Math.max(calculated, MIN_PAGE_SIZE);
+	}, []);
+
+	useEffect(() => {
+		const element = containerRef.current;
+		if (!element) return;
+
+		let timeoutId: ReturnType<typeof setTimeout> | null = null;
+
+		const handleResize = (entries: ResizeObserverEntry[]) => {
+			const entry = entries[0];
+			if (!entry) return;
+
+			const height = entry.contentRect.height;
+
+			if (timeoutId) {
+				clearTimeout(timeoutId);
+			}
+
+			timeoutId = setTimeout(() => {
+				const newPageSize = calculatePageSize(height);
+				setPageSize(newPageSize);
+			}, debounceMs);
+		};
+
+		const resizeObserver = new ResizeObserver(handleResize);
+		resizeObserver.observe(element);
+
+		// Calculate initial size immediately
+		const initialHeight = element.getBoundingClientRect().height;
+		if (initialHeight > 0) {
+			setPageSize(calculatePageSize(initialHeight));
+		}
+
+		return () => {
+			if (timeoutId) {
+				clearTimeout(timeoutId);
+			}
+			resizeObserver.disconnect();
+		};
+	}, [containerRef, calculatePageSize, debounceMs]);
+
+	return pageSize;
+}