diff --git a/web/src/pages/matches.ts b/web/src/pages/matches.ts index 80428eb..a751383 100644 --- a/web/src/pages/matches.ts +++ b/web/src/pages/matches.ts @@ -14,64 +14,82 @@ export async function renderMatchesPage(): Promise { `; @@ -119,22 +141,50 @@ export async function renderMatchesPage(): Promise { } function renderPlaylistCards(container: HTMLElement, index: PlaylistIndex): void { + // Priority slugs for the curated sections at the top + const curatedSlugs = ['best-of-week', 'biggest-upsets', 'closest-finishes']; + const curatedSections = curatedSlugs + .map(slug => index.playlists.find(p => p.slug === slug)) + .filter((p): p is NonNullable => p !== undefined); + + // Remaining playlists shown as a scrollable row + const curatedSlugSet = new Set(curatedSlugs); + const rest = index.playlists.filter(p => !curatedSlugSet.has(p.slug)); + + const curatedHtml = curatedSections.map((p, i) => ` + + ${formatCategory(p.category)} +

${escapeHtml(p.title)}

+

${escapeHtml(p.description)}

+
+ ${p.match_count} matches + Browse → +
+ + `).join(''); + + const restHtml = rest.map(p => ` + +

+ ${escapeHtml(p.title)} + ${formatCategory(p.category)} +

+

${escapeHtml(p.description)}

+
${p.match_count} matches · ${formatRelativeTime(p.updated_at)}
+ + `).join(''); + container.innerHTML = ` -

Featured Playlists

-
- ${index.playlists.map(p => ` - -

- ${escapeHtml(p.title)} - ${formatCategory(p.category)} -

-

${escapeHtml(p.description)}

-
- ${p.match_count} matches - ${formatRelativeTime(p.updated_at)} -
- - `).join('')} +
+
+

Featured Playlists

+ Browse all → +
+ ${curatedSections.length > 0 ? `
${curatedHtml}
` : ''} + ${rest.length > 0 ? ` +

More Collections

+
${restHtml}
+ ` : ''}
`; }