Add search to the playlist discovery

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/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,4 +1,5 @@
 <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';
@@ -6,6 +7,16 @@
   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 = {
@@ -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,10 +98,69 @@
 
   $: 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> = {};
+  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]);
@@ -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}
@@ -363,6 +507,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;