From fd9ffbc0487ebcf54f04ac13d3eae2f0f96157cb Mon Sep 17 00:00:00 2001 From: jedarden Date: Tue, 21 Apr 2026 17:11:16 -0400 Subject: [PATCH] =?UTF-8?q?feat(watch/replays):=20show=20featured=20playli?= =?UTF-8?q?sts=20as=20curated=20sections=20per=20=C2=A710?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Replace the flat horizontal playlist row with a curated layout: - Top 3 featured playlists (Best of Week, Biggest Upsets, Closest Finishes) displayed as distinct visual sections in a 2:1:1 grid - "Best of Week" highlighted with a primary accent style - Remaining playlists shown in a scrollable "More Collections" row - "Browse all โ†’" header link routes to /watch/playlists Co-Authored-By: Claude Sonnet 4.6 --- web/src/pages/matches.ts | 144 ++++++++++++++++++++++++++------------- 1 file changed, 97 insertions(+), 47 deletions(-) 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}
+ ` : ''}
`; }