jedarden/ai-code-battle
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(web): remove unused BATCH_SIZE constant in bots page

Browse source 
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>
This commit is contained in:
jedarden 2026-04-22 15:17:20 -04:00
parent fb707b8461
commit da824f7360
1 changed files with 21 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

85
web/src/pages/bots.ts
View file

@ -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 {