Route beatleader profile requests through ssr

src/app.css

@@ -58,3 +58,56 @@ p a:hover {
 @utility neon-text {
   @apply text-transparent bg-clip-text bg-gradient-to-r from-neon via-accent to-neon-fuchsia;
 }
+
+input[type='checkbox'] {
+  appearance: none;
+  width: 1.05rem;
+  height: 1.05rem;
+  border-radius: 0.35rem;
+  border: 1px solid rgba(148, 163, 184, 0.35);
+  background-color: rgba(15, 23, 42, 0.85);
+  display: grid;
+  place-content: center;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
+  cursor: pointer;
+}
+
+input[type='checkbox']::after {
+  content: '';
+  width: 0.55rem;
+  height: 0.55rem;
+  clip-path: polygon(14% 44%, 0 60%, 43% 100%, 100% 16%, 86% 0, 40% 64%);
+  background-color: transparent;
+  transform: scale(0.4) rotate(6deg);
+  opacity: 0;
+  transition: opacity 0.12s ease, transform 0.12s ease, background-color 0.12s ease;
+}
+
+input[type='checkbox']:hover {
+  border-color: rgba(94, 234, 212, 0.4);
+}
+
+input[type='checkbox']:focus-visible {
+  outline: none;
+  border-color: rgba(94, 234, 212, 0.6);
+  box-shadow: 0 0 0 2px rgba(94, 234, 212, 0.25);
+}
+
+input[type='checkbox']:checked {
+  border-color: rgba(34, 211, 238, 0.8);
+  background-color: rgba(34, 211, 238, 0.18);
+  box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.2);
+}
+
+input[type='checkbox']:checked::after {
+  background-color: var(--color-neon);
+  opacity: 1;
+  transform: scale(1) rotate(0deg);
+}
+
+input[type='checkbox']:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+  box-shadow: none;
+  border-color: rgba(148, 163, 184, 0.2);
+}

src/lib/components/MapCard.svelte

@@ -23,23 +23,21 @@ export let beatsaverKey: string | undefined = undefined;
 // BeatSaver stats
 export let score: number | undefined = undefined;
 
-// Layout tweaks
-export let compact = false;
 export let showActions = true;
 export let showPublished = true;
 
 $: hasScore = typeof score === 'number' && Number.isFinite(score);
 </script>
 
-<div class:compact-wrapper={compact} class="card-wrapper">
+<div class="card-wrapper">
-  <div class:compact-cover={compact} class="cover">
+  <div class="cover">
     {#if coverURL}
       <img src={coverURL} alt={songName ?? hash} loading="lazy" />
     {:else}
       <div class="placeholder">☁️</div>
     {/if}
   </div>
-  <div class:compact-body={compact} class="body">
+  <div class="body">
     <div class="title" title={songName ?? hash}>
       {songName ?? hash}
     </div>
@@ -57,8 +55,8 @@ $: hasScore = typeof score === 'number' && Number.isFinite(score);
       </div>
     {/if}
 
-    <div class:compact-row={compact} class="meta">
+    <div class="meta">
-      <div class:compact-leading={compact} class="meta-leading">
+      <div class="meta-leading">
         <slot name="meta-leading">
           <DifficultyLabel {diffName} {modeName} />
         </slot>
@@ -95,13 +93,6 @@ $: hasScore = typeof score === 'number' && Number.isFinite(score);
     width: 100%;
   }
 
-  .card-wrapper.compact-wrapper {
-    display: grid;
-    grid-template-columns: auto 1fr;
-    align-items: stretch;
-    column-gap: 0.6rem;
-  }
-
   .cover {
     position: relative;
     width: 100%;
@@ -128,14 +119,6 @@ $: hasScore = typeof score === 'number' && Number.isFinite(score);
     font-size: 1.5rem;
   }
 
-  .cover.compact-cover {
-    width: 104px;
-    min-width: 104px;
-    max-width: 104px;
-    padding-top: 104px;
-    border-radius: 0.5rem;
-  }
-
   .body {
     padding: 0.75rem 0.75rem 1rem;
     display: flex;
@@ -143,12 +126,6 @@ $: hasScore = typeof score === 'number' && Number.isFinite(score);
     flex: 1;
   }
 
-  .body.compact-body {
-    padding: 0.25rem 0.2rem 0.5rem;
-    gap: 0.4rem;
-    min-width: 0;
-  }
-
   .title {
     font-weight: 600;
     font-size: 1rem;
@@ -157,10 +134,6 @@ $: hasScore = typeof score === 'number' && Number.isFinite(score);
     text-overflow: ellipsis;
   }
 
-  .body.compact-body .title {
-    font-size: 0.95rem;
-  }
-
   .mapper-row {
     display: flex;
     justify-content: space-between;
@@ -200,21 +173,12 @@ $: hasScore = typeof score === 'number' && Number.isFinite(score);
     flex: 1;
   }
 
-  .meta-leading.compact-leading {
-    width: 100%;
-  }
-
   .meta-leading :global(.score-meter) {
     width: 100%;
     max-width: 45%;
     margin-left: auto;
   }
 
-  .meta.compact-row {
-    margin-top: 0.25rem;
-    gap: 0.35rem;
-  }
-
   .actions {
     margin-top: 0.6rem;
     display: flex;
@@ -223,10 +187,6 @@ $: hasScore = typeof score === 'number' && Number.isFinite(score);
     flex-wrap: wrap;
   }
 
-  .body.compact-body .actions {
-    margin-top: 0.3rem;
-  }
-
   .player {
     flex: 1;
     max-width: 45%;
@@ -240,28 +200,10 @@ $: hasScore = typeof score === 'number' && Number.isFinite(score);
   }
 
   @media (max-width: 959px) {
-    .card-wrapper.compact-wrapper {
+    .player {
-      grid-template-columns: 1fr;
+      max-width: none;
-      row-gap: 0.35rem;
-    }
-
-    .cover.compact-cover {
-      margin: 0 auto;
-      width: 100%;
-      max-width: 240px;
-      padding-top: 100%;
-    }
-  }
-
-  @media (min-width: 960px) {
-    .meta.compact-row {
-      flex-direction: column;
-      align-items: flex-start;
-      gap: 0.2rem;
-    }
-
-    .meta.compact-row .meta-leading {
       width: 100%;
+      margin-left: 0;
     }
   }
 

src/lib/components/PlayerCompareForm.svelte

@@ -2,7 +2,7 @@
   import { onMount } from 'svelte';
   import { browser } from '$app/environment';
   import PlayerCard from '$lib/components/PlayerCard.svelte';
-  import type { BeatLeaderPlayerProfile } from '$lib/utils/plebsaber-utils';
+  import { fetchBeatLeaderPlayerProfile, type BeatLeaderPlayerProfile } from '$lib/utils/plebsaber-utils';
 
   export let playerA = '';
   export let playerB = '';
@@ -69,23 +69,13 @@
     history.replaceState(null, '', url);
   }
 
-  async function fetchPlayerProfile(playerId: string): Promise<BeatLeaderPlayerProfile | null> {
-    try {
-      const res = await fetch(`https://api.beatleader.xyz/player/${encodeURIComponent(playerId)}`);
-      if (!res.ok) return null;
-      return (await res.json()) as BeatLeaderPlayerProfile;
-    } catch {
-      return null;
-    }
-  }
-
   async function loadDefaultPlayerCards(a: string, b: string): Promise<void> {
     playerAProfile = null;
     playerBProfile = null;
     if (!a || !b) return;
     const [pa, pb] = await Promise.all([
-      fetchPlayerProfile(a),
+      fetchBeatLeaderPlayerProfile(a),
-      fetchPlayerProfile(b)
+      fetchBeatLeaderPlayerProfile(b)
     ]);
     playerAProfile = pa;
     playerBProfile = pb;
@@ -110,7 +100,7 @@
     }
 
     try {
-      const profile = await fetchPlayerProfile(trimmed);
+      const profile = await fetchBeatLeaderPlayerProfile(trimmed);
       // Only update if this is still the current player ID
       const currentId = player === 'A' ? playerA.trim() : playerB.trim();
       if (currentId === trimmed) {

src/lib/utils/plebsaber-utils.ts

@@ -225,6 +225,33 @@ export async function fetchBeatLeaderStarsByHash(
   }
 }
 
+export async function fetchBeatLeaderPlayerProfile(
+  playerId: string,
+  fetcher?: typeof fetch,
+  authMode: 'steam' | 'oauth' | 'session' | 'auto' | 'none' = 'auto'
+): Promise<BeatLeaderPlayerProfile | null> {
+  const trimmed = playerId?.trim?.();
+  if (!trimmed) return null;
+
+  const callFetch = (fetcher ?? globalThis.fetch) as typeof fetch | undefined;
+  if (!callFetch) return null;
+
+  const search = new URLSearchParams();
+  if (authMode) {
+    search.set('auth', authMode);
+  }
+
+  const url = `/api/beatleader/player/${encodeURIComponent(trimmed)}${search.size ? `?${search.toString()}` : ''}`;
+
+  try {
+    const res = await callFetch(url);
+    if (!res.ok) return null;
+    return (await res.json()) as BeatLeaderPlayerProfile;
+  } catch {
+    return null;
+  }
+}
+
 /**
  * Load metadata for a list of items with unique hashes
  * Only loads metadata that isn't already in the cache

src/routes/tools/player-playlist-gaps/+page.svelte

@@ -8,6 +8,7 @@
     type BeatLeaderPlayerProfile,
     fetchAllPlayerScores,
     fetchBeatSaverMeta,
+    fetchBeatLeaderPlayerProfile,
     type MapMeta
   } from '$lib/utils/plebsaber-utils';
 
@@ -154,7 +155,7 @@
     
     loadingPreview = true;
     try {
-      const profile = await fetchPlayerProfile(id);
+      const profile = await fetchBeatLeaderPlayerProfile(id);
       // Only update if this is still the current player ID
       if (playerId.trim() === id) {
         previewPlayerProfile = profile;
@@ -330,16 +331,6 @@
     URL.revokeObjectURL(url);
   }
 
-  async function fetchPlayerProfile(id: string): Promise<BeatLeaderPlayerProfile | null> {
-    try {
-      const res = await fetch(`https://api.beatleader.xyz/player/${encodeURIComponent(id)}`);
-      if (!res.ok) return null;
-      return (await res.json()) as BeatLeaderPlayerProfile;
-    } catch {
-      return null;
-    }
-  }
-
   async function onAnalyze(ev: SubmitEvent) {
     ev.preventDefault();
     errorMsg = null;
@@ -359,7 +350,7 @@
     try {
       const [scores, profile] = await Promise.all([
         fetchAllPlayerScores(playerId.trim(), 150),
-        fetchPlayerProfile(playerId.trim())
+        fetchBeatLeaderPlayerProfile(playerId.trim())
       ]);
       analyzedPlayerProfile = profile;
       hasAnalyzed = true;

src/routes/tools/playlist-discovery/+page.server.ts

@@ -1,4 +1,9 @@
-import { createBeatSaverAPI, type PlaylistFull, type PlaylistSearchResponse } from '$lib/server/beatsaver';
+import {
+  createBeatSaverAPI,
+  type PlaylistFull,
+  type PlaylistSearchParams,
+  type PlaylistSearchResponse
+} from '$lib/server/beatsaver';
 import type { PageServerLoad } from './$types';
 
 function parsePositiveInt(value: string | null, fallback: number): number {
@@ -8,6 +13,17 @@ function parsePositiveInt(value: string | null, fallback: number): number {
   return parsed;
 }
 
+const SORT_ORDER_VALUES = ['Latest', 'Relevance', 'Curated'] as const;
+type SortOrderOption = (typeof SORT_ORDER_VALUES)[number];
+const SORT_ORDER_SET = new Set<string>(SORT_ORDER_VALUES);
+const DEFAULT_SORT_ORDER: SortOrderOption = 'Latest';
+
+function parseSortOrder(value: string | null): SortOrderOption {
+  if (!value) return DEFAULT_SORT_ORDER;
+  const normalized = value.trim();
+  return SORT_ORDER_SET.has(normalized) ? (normalized as SortOrderOption) : DEFAULT_SORT_ORDER;
+}
+
 type SearchInfoShape = {
   page?: number;
   pages?: number;
@@ -23,13 +39,41 @@ export const load: PageServerLoad = async ({ url, fetch, parent }) => {
 
   const api = createBeatSaverAPI(fetch);
   const MIN_MAPS = 3;
+  const hasSubmitted = url.searchParams.has('submitted');
+  const rawQuery = url.searchParams.get('q') ?? '';
+  const query = rawQuery.trim();
+  const rawSortOrder = url.searchParams.get('order') ?? url.searchParams.get('sortOrder');
+  const sortOrder = parseSortOrder(rawSortOrder);
+  const curated = url.searchParams.has('curated');
+  const verified = url.searchParams.has('verified') ? true : hasSubmitted ? false : true;
+
+  const searchState = {
+    submitted: hasSubmitted,
+    query,
+    sortOrder,
+    curated,
+    verified
+  };
+
+  const searchParams: PlaylistSearchParams = {
+    page: pageIndex,
+    sortOrder,
+    includeEmpty: false
+  };
+
+  if (query) {
+    searchParams.query = query;
+  }
+  if (curated) {
+    searchParams.curated = true;
+  }
+  if (verified) {
+    searchParams.verified = true;
+  }
 
   try {
     const response = (await api.searchPlaylists({
-      page: pageIndex,
+      ...searchParams
-      sortOrder: 'Latest',
-      verified: true,
-      includeEmpty: false
     })) as PlaylistSearchResponse<PlaylistFull>;
     const docsRaw = Array.isArray(response?.docs) ? response.docs : [];
     const docs = docsRaw.filter((playlist) => {
@@ -56,7 +100,8 @@ export const load: PageServerLoad = async ({ url, fetch, parent }) => {
       totalPages,
       total,
       pageSize,
-      error: null
+      error: null,
+      search: searchState
     };
   } catch (err) {
     console.error('Failed to load BeatSaver playlists', err);
@@ -68,7 +113,8 @@ export const load: PageServerLoad = async ({ url, fetch, parent }) => {
       totalPages: null,
       total: null,
       pageSize: 0,
-      error: err instanceof Error ? err.message : 'Failed to load playlists'
+      error: err instanceof Error ? err.message : 'Failed to load playlists',
+      search: searchState
     };
   }
 };

src/routes/tools/playlist-discovery/+page.svelte

@@ -1,14 +1,25 @@
 <script lang="ts">
+  import { tick } from 'svelte';
   import HasToolAccess from '$lib/components/HasToolAccess.svelte';
-  import MapCard from '$lib/components/MapCard.svelte';
   import ScoreBar from '$lib/components/ScoreBar.svelte';
+  import PlaylistSongCard from './PlaylistSongCard.svelte';
   import type { MapDetailWithOrder, MapDetail, MapVersion, MapDifficulty, PlaylistFull } from '$lib/server/beatsaver';
   import type { BeatLeaderPlayerProfile } from '$lib/utils/plebsaber-utils';
   import { TOOL_REQUIREMENTS } from '$lib/utils/plebsaber-utils';
 
+  const SORT_OPTIONS = ['Latest', 'Relevance', 'Curated'] as const;
+  type SortOrderOption = (typeof SORT_OPTIONS)[number];
+  type SearchState = {
+    submitted: boolean;
+    query: string;
+    sortOrder: SortOrderOption;
+    curated: boolean;
+    verified: boolean;
+  };
+
   type PlaylistWithStats = PlaylistFull & { stats?: PlaylistFull['stats'] };
 
-  type PlaylistSongCard = {
+  type PlaylistSongCardData = {
     id: string;
     hash: string;
     coverURL?: string;
@@ -24,7 +35,7 @@
 
   type PlaylistState = {
     loading: boolean;
-    maps: PlaylistSongCard[];
+    maps: PlaylistSongCardData[];
     error: string | null;
     total: number | null;
     offset: number;
@@ -42,6 +53,7 @@
     player: BeatLeaderPlayerProfile | null;
     adminRank: number | null;
     adminPlayer: BeatLeaderPlayerProfile | null;
+    search: SearchState;
   };
 
   const requirement = TOOL_REQUIREMENTS['playlist-discovery'];
@@ -49,6 +61,35 @@
   const playlistBaseUrl = 'https://beatsaver.com/playlists/';
   const profileBaseUrl = 'https://beatsaver.com/profile/';
 
+  let searchForm: HTMLFormElement | null = null;
+  let appliedSearch: SearchState = {
+    submitted: false,
+    query: '',
+    sortOrder: 'Latest',
+    curated: false,
+    verified: true
+  };
+  let searchQuery = appliedSearch.query;
+  let sortOrder: SortOrderOption = appliedSearch.sortOrder;
+  let curated = appliedSearch.curated;
+  let verified = appliedSearch.verified;
+  let lastSearchKey = '';
+
+  $: appliedSearch = {
+    submitted: data?.search?.submitted ?? false,
+    query: data?.search?.query ?? '',
+    sortOrder: (data?.search?.sortOrder ?? 'Latest') as SortOrderOption,
+    curated: Boolean(data?.search?.curated),
+    verified: data?.search?.verified ?? true
+  };
+
+  $: if (data) {
+    searchQuery = appliedSearch.query;
+    sortOrder = appliedSearch.sortOrder;
+    curated = appliedSearch.curated;
+    verified = appliedSearch.verified;
+  }
+
   $: playlists = data?.playlists ?? [];
   $: page = data?.page ?? 1;
   $: totalPages = data?.totalPages ?? null;
@@ -57,11 +98,70 @@
 
   $: hasPrev = page > 1;
   $: hasNext = totalPages != null ? page < totalPages : playlists.length > 0 && playlists.length === pageSize;
-  $: prevHref = hasPrev ? `?page=${page - 1}` : null;
+  $: prevHref = hasPrev ? buildPageHref(page - 1) : null;
-  $: nextHref = hasNext ? `?page=${page + 1}` : null;
+  $: nextHref = hasNext ? buildPageHref(page + 1) : null;
+
   let expanded: Record<number, boolean> = {};
   let playlistState: Record<number, PlaylistState> = {};
 
+  $: {
+    const currentKey = JSON.stringify({
+      page,
+      query: appliedSearch.query,
+      sortOrder: appliedSearch.sortOrder,
+      curated: appliedSearch.curated,
+      verified: appliedSearch.verified
+    });
+    if (currentKey !== lastSearchKey) {
+      lastSearchKey = currentKey;
+      expanded = {};
+      playlistState = {};
+    }
+  }
+
+  type PresetKey = 'default' | 'picks' | 'packs';
+
+  function buildPageHref(targetPage: number): string {
+    const params = new URLSearchParams();
+    params.set('page', String(targetPage));
+    params.set('submitted', '1');
+    if (appliedSearch.query) params.set('q', appliedSearch.query);
+    if (appliedSearch.sortOrder) params.set('order', appliedSearch.sortOrder);
+    if (appliedSearch.curated) params.set('curated', 'on');
+    if (appliedSearch.verified) params.set('verified', 'on');
+    return `?${params.toString()}`;
+  }
+
+  async function submitSearch() {
+    await tick();
+    searchForm?.requestSubmit();
+  }
+
+  async function applyPreset(preset: PresetKey) {
+    switch (preset) {
+      case 'default':
+        searchQuery = '';
+        sortOrder = 'Latest';
+        curated = false;
+        verified = true;
+        break;
+      case 'picks':
+        searchQuery = 'picks';
+        sortOrder = 'Latest';
+        curated = false;
+        verified = false;
+        break;
+      case 'packs':
+        searchQuery = 'pack';
+        sortOrder = 'Latest';
+        curated = false;
+        verified = true;
+        break;
+    }
+
+    await submitSearch();
+  }
+
 function togglePlaylist(id: number) {
   const currentlyExpanded = Boolean(expanded[id]);
   const nextExpanded: Record<number, boolean> = {};
@@ -88,7 +188,7 @@ function togglePlaylist(id: number) {
       const maps = Array.isArray(payload?.maps) ? payload.maps : [];
       const cards = maps
         .map((entry) => mapEntryToCard(entry))
-        .filter((card): card is PlaylistSongCard => card !== null);
+        .filter((card): card is PlaylistSongCardData => card !== null);
       playlistState = {
         ...playlistState,
         [id]: {
@@ -134,7 +234,7 @@ function togglePlaylist(id: number) {
     return date.toLocaleDateString();
   }
 
-  function mapEntryToCard(entry: MapDetailWithOrder): PlaylistSongCard | null {
+  function mapEntryToCard(entry: MapDetailWithOrder): PlaylistSongCardData | null {
     const rawMap = (entry as unknown as { map?: MapDetail }).map ?? (entry as unknown as MapDetail);
     if (!rawMap) return null;
 
@@ -195,11 +295,55 @@ function togglePlaylist(id: number) {
 <section class="py-8">
   <h1 class="font-display text-3xl sm:text-4xl">Playlist Discovery</h1>
   <p class="mt-2 text-muted max-w-2xl">
-    See <strong><a href="https://bsaber.com/playlists" target="_blank" rel="noreferrer">Featured Packs</a> on Beast Saber</strong> for curated map packs. You can also view most packs by searching BeatSaver for <a href="https://beatsaver.com/playlists?q=picks&order=Latest" target="_blank" rel="noreferrer">picks</a> or <a href="https://beatsaver.com/playlists?q=pack&verified=true&order=Latest" target="_blank" rel="noreferrer">packs</a>.
+    This page is a UI/UX experiment that shows playlists with a reactive interface for previewing map ratings and listening to song previews.
-    Otherwise this page is a UI/UX experiment that shows playlists by verified mappers, and provides a reactive interface for previewing map ratings and listening to song previews.
+    See <strong><a href="https://bsaber.com/playlists" target="_blank" rel="noreferrer">Featured Packs</a> on Beast Saber</strong> for curated map packs.
   </p>
 
   <HasToolAccess player={data?.player ?? null} requirement={requirement} adminRank={data?.adminRank ?? null} adminPlayer={data?.adminPlayer ?? null}>
+    <form class="search-form card-surface" method="GET" bind:this={searchForm}>
+      <input type="hidden" name="submitted" value="1" />
+      <input type="hidden" name="page" value="1" />
+
+      <div class="search-grid">
+        <label class="form-field search-query">
+          <span class="form-label">Search</span>
+          <input type="search" name="q" placeholder="Search playlists" bind:value={searchQuery} />
+        </label>
+        <label class="form-field sort-field">
+          <span class="form-label">Sort order</span>
+          <select name="order" bind:value={sortOrder} on:change={submitSearch}>
+            {#each SORT_OPTIONS as option}
+              <option value={option}>{option}</option>
+            {/each}
+          </select>
+        </label>
+      </div>
+
+      <div class="search-filters">
+        <label class="filter-checkbox">
+          <input type="checkbox" name="curated" value="on" bind:checked={curated} on:change={submitSearch} />
+          <span>Curated playlists</span>
+        </label>
+        <label class="filter-checkbox">
+          <input type="checkbox" name="verified" value="on" bind:checked={verified} on:change={submitSearch} />
+          <span>Playlists from verified mappers</span>
+        </label>
+      </div>
+
+      <div class="search-actions">
+        <button class="form-btn primary" type="submit">Search</button>
+        <div class="preset-group">
+          <span class="preset-label">Presets:</span>
+          <button class="form-btn secondary" type="button" on:click={() => applyPreset('packs')}>
+            Map Packs
+          </button>
+          <button class="form-btn secondary" type="button" on:click={() => applyPreset('picks')}>
+            Picks
+          </button>
+        </div>
+      </div>
+    </form>
+
     {#if data?.error}
       <div class="mt-6 rounded-md border border-danger/40 bg-danger/10 px-4 py-3 text-danger text-sm">
         {data.error}
@@ -316,28 +460,14 @@ function togglePlaylist(id: number) {
                   {/if}
                   <div class="songs-grid">
                     {#each state.maps as card (card.id)}
-                      <MapCard
+                      <PlaylistSongCard
                         hash={card.hash}
                         coverURL={card.coverURL}
                         songName={card.songName}
                         mapper={card.mapper}
-                        timeset={card.timeset}
-                        diffName={card.diffName}
-                        modeName={card.modeName}
                         beatsaverKey={card.beatsaverKey}
-                        compact={true}
+                        score={card.score ?? null}
-                        showActions={false}
-                        showPublished={false}
-                      >
-                        <ScoreBar
-                          slot="meta-leading"
-                          value={card.score ?? null}
-                          size="sm"
-                          decimals={1}
-                          showLabel={true}
-                          emptyLabel="No score"
                       />
-                      </MapCard>
                     {/each}
                   </div>
                 {:else}
@@ -363,6 +493,202 @@ function togglePlaylist(id: number) {
 </section>
 
 <style>
+  .search-form {
+    margin-top: 1.75rem;
+    width: 100%;
+    max-width: 600px;
+    padding: 1.25rem 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1.25rem;
+  }
+
+  .search-grid {
+    display: grid;
+    gap: 1rem;
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: end;
+  }
+
+  .form-field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.45rem;
+  }
+
+  .form-label {
+    font-size: 0.75rem;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: rgba(148, 163, 184, 0.75);
+  }
+
+  .search-query {
+    min-width: 0;
+  }
+
+  .sort-field {
+    max-width: 10em;
+  }
+
+  .form-field input,
+  .form-field select {
+    background: rgba(15, 23, 42, 0.6);
+    border: 1px solid rgba(148, 163, 184, 0.2);
+    border-radius: 0.5rem;
+    padding: 0.55rem 0.75rem;
+    color: #e2e8f0;
+    font-size: 0.95rem;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+  }
+
+  .form-field input::placeholder {
+    color: rgba(148, 163, 184, 0.6);
+  }
+
+  .form-field input:focus,
+  .form-field select:focus {
+    outline: none;
+    border-color: rgba(94, 234, 212, 0.5);
+    box-shadow: 0 0 0 2px rgba(94, 234, 212, 0.2);
+  }
+
+  .search-filters {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.75rem 1rem;
+    align-items: stretch;
+  }
+
+  .filter-checkbox {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    font-size: 0.9rem;
+    color: rgba(226, 232, 240, 0.9);
+    line-height: 1.45;
+    padding: 0.55rem 0.9rem 0.55rem 2.35rem;
+    border: 1px solid rgba(148, 163, 184, 0.2);
+    border-radius: 0.5rem;
+    background: rgba(15, 23, 42, 0.6);
+    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
+    cursor: pointer;
+  }
+
+  .filter-checkbox:hover {
+    border-color: rgba(94, 234, 212, 0.35);
+    background: rgba(15, 23, 42, 0.7);
+  }
+
+  .filter-checkbox:focus-within {
+    border-color: rgba(94, 234, 212, 0.5);
+    box-shadow: 0 0 0 2px rgba(94, 234, 212, 0.2);
+  }
+
+  .filter-checkbox input {
+    position: absolute;
+    left: 0.75rem;
+    top: 50%;
+    transform: translateY(-50%);
+    flex-shrink: 0;
+  }
+
+  .filter-checkbox span {
+    display: inline-block;
+  }
+
+  .search-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem 1.5rem;
+    align-items: center;
+  }
+
+  .form-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.5rem 1.25rem;
+    border-radius: 0.5rem;
+    border: 1px solid rgba(148, 163, 184, 0.25);
+    background: rgba(15, 23, 42, 0.5);
+    color: white;
+    font-size: 0.9rem;
+    font-weight: 500;
+    transition: all 0.2s ease;
+    cursor: pointer;
+  }
+
+  .form-btn:hover {
+    border-color: rgba(94, 234, 212, 0.5);
+    box-shadow: 0 0 12px rgba(94, 234, 212, 0.2);
+  }
+
+  .form-btn.primary {
+    background: rgba(94, 234, 212, 0.85);
+    border-color: rgba(94, 234, 212, 0.85);
+    color: #0f172a;
+    font-weight: 600;
+  }
+
+  .form-btn.primary:hover {
+    box-shadow: 0 8px 20px rgba(94, 234, 212, 0.25);
+  }
+
+  .form-btn.secondary {
+    background: rgba(15, 23, 42, 0.45);
+  }
+
+  .form-btn:disabled {
+    opacity: 0.45;
+    cursor: default;
+    box-shadow: none;
+    border-color: rgba(148, 163, 184, 0.2);
+  }
+
+  .preset-group {
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+    align-items: center;
+  }
+
+  .preset-label {
+    font-size: 0.8rem;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: rgba(148, 163, 184, 0.75);
+  }
+
+  @media (max-width: 640px) {
+    .search-form {
+      padding: 1rem;
+    }
+
+    .search-grid {
+      grid-template-columns: minmax(0, 1fr);
+    }
+
+    .sort-field {
+      max-width: none;
+    }
+
+    .search-filters {
+      flex-direction: column;
+      align-items: stretch;
+    }
+
+    .search-actions {
+      flex-direction: column;
+      align-items: stretch;
+      gap: 0.9rem;
+    }
+
+    .preset-group {
+      justify-content: flex-start;
+    }
+  }
+
   .playlists-grid {
     display: grid;
     gap: 1.25rem;

src/routes/tools/playlist-discovery/PlaylistSongCard.svelte

@@ -0,0 +1,158 @@
+<script lang="ts">
+  import ScoreBar from '$lib/components/ScoreBar.svelte';
+  import SongPlayer from '$lib/components/SongPlayer.svelte';
+
+  const beatsaverMapBase = 'https://beatsaver.com/maps/';
+
+  export let hash: string;
+  export let coverURL: string | undefined = undefined;
+  export let songName: string | undefined = undefined;
+  export let mapper: string | undefined = undefined;
+  export let beatsaverKey: string | undefined = undefined;
+  export let score: number | null | undefined = undefined;
+
+  $: mapTitle = songName ?? hash;
+  $: mapLink = beatsaverKey ? `${beatsaverMapBase}${beatsaverKey}` : null;
+</script>
+
+<article class="playlist-map-card card-surface">
+  <div class="cover">
+    {#if coverURL}
+      <img src={coverURL} alt={`Cover art for ${mapTitle}`} loading="lazy" />
+    {:else}
+      <div class="placeholder" aria-hidden="true">☁️</div>
+    {/if}
+  </div>
+
+  <div class="content">
+    <div class="title" title={mapTitle}>
+      {#if mapLink}
+        <a href={mapLink} target="_blank" rel="noreferrer noopener">{mapTitle}</a>
+      {:else}
+        <span>{mapTitle}</span>
+      {/if}
+    </div>
+
+    {#if mapper}
+      <div class="mapper">{mapper}</div>
+    {/if}
+
+    <div class="metrics">
+      <ScoreBar value={score ?? null} size="sm" decimals={1} showLabel={true} emptyLabel="No score" />
+    </div>
+
+    <div class="player">
+      <SongPlayer {hash} preferBeatLeader={true} />
+    </div>
+  </div>
+</article>
+
+<style>
+  .playlist-map-card {
+    display: grid;
+    grid-template-columns: 104px 1fr;
+    gap: 1rem;
+    padding: 0.85rem 1rem;
+    border-radius: 0.75rem;
+    background: rgba(15, 23, 42, 0.55);
+    border: 1px solid rgba(148, 163, 184, 0.12);
+    box-shadow: 0 18px 36px -18px rgba(15, 23, 42, 0.8);
+  }
+
+  .cover {
+    position: relative;
+    width: 100%;
+    padding-top: 100%;
+    border-radius: 0.65rem;
+    overflow: hidden;
+    background: rgba(15, 23, 42, 0.65);
+  }
+
+  .cover img,
+  .cover .placeholder {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+
+  .cover .placeholder {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.5rem;
+    color: rgba(226, 232, 240, 0.8);
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    gap: 0.65rem;
+    min-width: 0;
+  }
+
+  .title {
+    font-weight: 600;
+    font-size: 1rem;
+    color: #f8fafc;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .title a {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  .title a:hover {
+    text-decoration: underline;
+    color: color-mix(in srgb, var(--color-neon) 80%, white 20%);
+  }
+
+  .mapper {
+    font-size: 0.8rem;
+    color: rgba(148, 163, 184, 0.85);
+  }
+
+  .metrics {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .metrics :global(.score-meter) {
+    width: 100%;
+    max-width: none;
+    margin: 0;
+  }
+
+  .player {
+    margin-top: auto;
+    padding-top: 0.5rem;
+  }
+
+  .player :global(.song-player) {
+    width: 100%;
+  }
+
+  @media (max-width: 640px) {
+    .playlist-map-card {
+      grid-template-columns: minmax(0, 1fr);
+      padding: 0.75rem;
+      gap: 0.75rem;
+    }
+
+    .cover {
+      padding-top: 60%;
+      border-radius: 0.5rem;
+    }
+
+    .player {
+      margin-top: 0.25rem;
+    }
+  }
+</style>
+

src/routes/tools/stats/+page.server.ts

@@ -1,6 +1,6 @@
 import { error, redirect } from '@sveltejs/kit';
 import { getAllSessions, getSession } from '$lib/server/sessionStore';
-import { PLEB_BEATLEADER_ID } from '$lib/utils/plebsaber-utils';
+import { PLEB_BEATLEADER_ID, fetchBeatLeaderPlayerProfile } from '$lib/utils/plebsaber-utils';
 import type { PageServerLoad } from './$types';
 
 type StatsUser = {
@@ -16,28 +16,7 @@ type StatsUser = {
   lastSeenIso: string;
 };
 
-type BeatLeaderPlayer = {
+export const load: PageServerLoad = async ({ cookies, fetch }) => {
-  id: string;
-  name: string;
-  avatar?: string;
-  country?: string;
-  rank?: number;
-  techPp?: number;
-  accPp?: number;
-  passPp?: number;
-};
-
-async function fetchBeatLeaderProfile(playerId: string): Promise<BeatLeaderPlayer | null> {
-  try {
-    const response = await fetch(`https://api.beatleader.xyz/player/${playerId}`);
-    if (!response.ok) return null;
-    return (await response.json()) as BeatLeaderPlayer;
-  } catch {
-    return null;
-  }
-}
-
-export const load: PageServerLoad = async ({ cookies }) => {
   const currentSession = getSession(cookies);
   if (!currentSession) {
     throw redirect(302, '/auth/beatleader/login?redirect_uri=%2Ftools%2Fstats');
@@ -59,7 +38,7 @@ export const load: PageServerLoad = async ({ cookies }) => {
 
   // Fetch all player profiles in parallel
   const userPromises = Array.from(aggregated.values()).map(async ({ session }) => {
-    const profile = await fetchBeatLeaderProfile(session.beatleaderId);
+    const profile = await fetchBeatLeaderPlayerProfile(session.beatleaderId, fetch);
     return {
       beatleaderId: session.beatleaderId,
       name: profile?.name ?? session.name,