added infinite scrolling to frontend and displaying vote information

discord_verificiation/playtime-frontend/lib/queries.ts

@@ -239,7 +239,7 @@ export interface MapVoteRow {
   vote_weight: number;
 }
 
-export async function searchMapNames(q: string, limit = 50): Promise<MapSummary[]> {
+export async function searchMapNames(q: string, limit = 50, offset = 0): Promise<MapSummary[]> {
   const like = `%${q}%`;
   return query<MapSummary>(
     `SELECT m.map_name, COUNT(*) AS times_played, MAX(m.map_start_dt) AS last_played,
@@ -249,8 +249,8 @@ export async function searchMapNames(q: string, limit = 50): Promise<MapSummary[
        AND ${REAL_MAP_PERIOD}
      GROUP BY m.map_name
      ORDER BY last_played DESC
-     LIMIT ?`,
-    [like, limit],
+     LIMIT ? OFFSET ?`,
+    [like, limit, offset],
   );
 }
 

discord_verificiation/playtime-frontend/lib/useInfiniteScroll.ts

@@ -0,0 +1,32 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+
+/**
+ * Calls `onIntersect` when the returned sentinel ref becomes visible near
+ * the bottom of the viewport — the standard "load more as you scroll"
+ * pattern, via IntersectionObserver rather than a scroll listener (cheaper,
+ * no manual throttling needed).
+ */
+export function useInfiniteScroll(onIntersect: () => void, enabled: boolean) {
+  const sentinelRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!enabled) return;
+    const el = sentinelRef.current;
+    if (!el) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0]?.isIntersecting) onIntersect();
+      },
+      { rootMargin: '400px' }, // start loading a bit before the sentinel is actually on screen
+    );
+
+    observer.observe(el);
+    return () => observer.disconnect();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [enabled, onIntersect]);
+
+  return sentinelRef;
+}