From da824f736002b1e597d4c5c658c1122a1f3895b4 Mon Sep 17 00:00:00 2001
From: jedarden <github@jedarden.com>
Date: Wed, 22 Apr 2026 15:17:20 -0400
Subject: [PATCH] fix(web): remove unused BATCH_SIZE constant in bots page

The bots page was refactored to use lazySection but left behind an
unused BATCH_SIZE = 50 constant, causing a TS6133 build error.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 web/src/pages/bots.ts | 85 +++++++++++--------------------------------
 1 file changed, 21 insertions(+), 64 deletions(-)

diff --git a/web/src/pages/bots.ts b/web/src/pages/bots.ts
index ca5ff43..13acada 100644
--- a/web/src/pages/bots.ts
+++ b/web/src/pages/bots.ts
@@ -1,11 +1,11 @@
 // Bot directory page - lists all registered bots
 // §16.15: windowed rendering for large directories, "Show more" button,
-// keyboard-accessible affordances.
+// keyboard-accessible affordances, IntersectionObserver lazy loading.
 
 import { fetchBotDirectory, type BotDirectoryEntry } from '../api-types';
+import { initLazySections, lazySection } from '../lib/lazy-section';
 
 const INITIAL_COUNT = 30;
-const BATCH_SIZE = 50;
 
 export async function renderBotsPage(): Promise<void> {
   const app = document.getElementById('app');
@@ -55,74 +55,31 @@ function renderBotsList(
   const initial = sortedBots.slice(0, INITIAL_COUNT);
   const remaining = sortedBots.slice(INITIAL_COUNT);
 
+  const initialHtml = initial.map((bot, idx) => renderBotCard(bot, idx + 1)).join('');
+
+  if (remaining.length === 0) {
+    container.innerHTML = `
+      <p class="updated-at">Last updated: ${formatTimestamp(updatedAt)}</p>
+      <div class="bots-grid">${initialHtml}</div>
+    `;
+    return;
+  }
+
+  // Use lazySection for below-the-fold bot cards
+  const remainingHtml = remaining.map((bot, i) => renderBotCard(bot, INITIAL_COUNT + i + 1)).join('');
   container.innerHTML = `
     <p class="updated-at">Last updated: ${formatTimestamp(updatedAt)}</p>
     <div class="bots-grid">
-      ${initial.map((bot, idx) => renderBotCard(bot, idx + 1)).join('')}
+      ${initialHtml}
+      ${lazySection(
+        'bots-remaining',
+        remainingHtml,
+        { placeholder: '<div class="lazy-placeholder" style="min-height:200px"></div>' }
+      )}
     </div>
-    ${remaining.length > 0 ? `<div id="bots-remaining"></div>` : ''}
   `;
 
-  // Lazy-load remaining bots when scrolled near the sentinel
-  if (remaining.length > 0) {
-    const sentinel = document.getElementById('bots-remaining');
-    if (sentinel) {
-      let offset = 0;
-      const total = remaining.length;
-
-      const observer = new IntersectionObserver((entries) => {
-        for (const entry of entries) {
-          if (!entry.isIntersecting) continue;
-          observer.disconnect();
-          appendBotBatch(sentinel, remaining, offset, total);
-        }
-      }, { rootMargin: '300px' });
-      observer.observe(sentinel);
-    }
-  }
-}
-
-function appendBotBatch(
-  sentinel: HTMLElement,
-  remaining: BotDirectoryEntry[],
-  startOffset: number,
-  totalCount: number
-): void {
-  const batch = remaining.slice(startOffset, startOffset + BATCH_SIZE);
-  if (batch.length === 0) return;
-
-  const grid = sentinel.previousElementSibling as HTMLElement | null;
-  if (!grid) return;
-
-  // Adjust rank to continue from where initial batch left off
-  const rankOffset = INITIAL_COUNT + startOffset;
-  const html = batch.map((bot, i) => renderBotCard(bot, rankOffset + i + 1)).join('');
-  const temp = document.createElement('div');
-  temp.innerHTML = html;
-  while (temp.firstChild) {
-    grid.appendChild(temp.firstChild);
-  }
-
-  const newOffset = startOffset + batch.length;
-  if (newOffset < totalCount) {
-    // Add "Show more" button
-    const left = totalCount - newOffset;
-    const next = Math.min(BATCH_SIZE, left);
-    const btn = document.createElement('button');
-    btn.className = 'btn secondary show-more-btn';
-    btn.type = 'button';
-    btn.textContent = `Show ${next} more bots (${left} remaining)`;
-    btn.setAttribute('aria-label', `Show ${next} more bots, ${left} remaining`);
-
-    btn.addEventListener('click', () => {
-      btn.remove();
-      appendBotBatch(sentinel, remaining, newOffset, totalCount);
-    });
-
-    sentinel.before(btn);
-  } else {
-    sentinel.remove();
-  }
+  initLazySections(container);
 }
 
 function renderBotCard(bot: BotDirectoryEntry, rank: number): string {