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/Guestbook.svelte

@@ -0,0 +1,544 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import PlayerCard from '$lib/components/PlayerCard.svelte';
+
+  type GuestbookAuthor = {
+    beatleaderId: string;
+    name: string | null;
+    avatar: string | null;
+    country: string | null;
+    rank: number | null;
+    techPp: number | null;
+    accPp: number | null;
+    passPp: number | null;
+  };
+
+  type GuestbookComment = {
+    id: string;
+    message: string;
+    author: GuestbookAuthor;
+    createdAt: number;
+    updatedAt: number | null;
+  };
+
+  type GuestbookViewer = {
+    beatleaderId: string;
+    name: string | null;
+    avatar: string | null;
+  };
+
+  type GuestbookPagination = {
+    total: number;
+    offset: number;
+    limit: number;
+    hasPrev: boolean;
+    hasNext: boolean;
+  };
+
+  type GuestbookResponse = {
+    viewer: GuestbookViewer | null;
+    comments: GuestbookComment[];
+    pagination?: GuestbookPagination | null;
+  };
+
+  let loading = false;
+  let error: string | null = null;
+  let comments: GuestbookComment[] = [];
+  let viewer: GuestbookViewer | null = null;
+  let newMessage = '';
+  let newMessageError: string | null = null;
+  let submittingNew = false;
+  let pagination: GuestbookPagination = { total: 0, offset: 0, limit: 5, hasPrev: false, hasNext: false };
+
+  const loginUrl = '/auth/beatleader/login';
+  const PAGE_SIZE = 5;
+
+  $: showingStart = pagination.total > 0 ? pagination.offset + 1 : 0;
+  $: showingEnd = pagination.total > 0 ? Math.min(pagination.offset + comments.length, pagination.total) : 0;
+
+  function normalizePagination(data: GuestbookResponse, fallbackOffset: number): GuestbookPagination {
+    const page = data.pagination ?? null;
+    const limit = typeof page?.limit === 'number' && Number.isFinite(page.limit) && page.limit > 0 ? page.limit : PAGE_SIZE;
+    const total = typeof page?.total === 'number' && page.total >= 0 ? page.total : Math.max(data.comments.length + fallbackOffset, 0);
+    const offset = typeof page?.offset === 'number' && page.offset >= 0 ? page.offset : fallbackOffset;
+    const hasPrev = page?.hasPrev ?? offset > 0;
+    const hasNext = page?.hasNext ?? offset + data.comments.length < total;
+    return { total, offset, limit, hasPrev, hasNext };
+  }
+
+  function formatTimestamp(ts: number): string {
+    const now = Date.now();
+    const diff = Math.max(0, now - ts);
+
+    const minute = 60 * 1000;
+    const hour = 60 * minute;
+    const day = 24 * hour;
+    const week = 7 * day;
+    const month = 30 * day;
+    const year = 365 * day;
+
+    if (diff < minute) {
+      const seconds = Math.floor(diff / 1000);
+      return seconds <= 1 ? 'just now' : `${seconds} seconds ago`;
+    }
+    if (diff < hour) {
+      const minutes = Math.floor(diff / minute);
+      return minutes === 1 ? 'a minute ago' : `${minutes} minutes ago`;
+    }
+    if (diff < day) {
+      const hours = Math.floor(diff / hour);
+      return hours === 1 ? 'an hour ago' : `${hours} hours ago`;
+    }
+    if (diff < week) {
+      const days = Math.floor(diff / day);
+      return days === 1 ? 'yesterday' : `${days} days ago`;
+    }
+    if (diff < month) {
+      const weeks = Math.floor(diff / week);
+      return weeks === 1 ? 'a week ago' : `${weeks} weeks ago`;
+    }
+    if (diff < year) {
+      const months = Math.floor(diff / month);
+      return months === 1 ? 'a month ago' : `${months} months ago`;
+    }
+    const years = Math.floor(diff / year);
+    return years === 1 ? 'a year ago' : `${years} years ago`;
+  }
+
+  async function fetchGuestbook(offset = 0): Promise<void> {
+    loading = true;
+    error = null;
+    try {
+      const params = new URLSearchParams({
+        limit: String(PAGE_SIZE),
+        offset: String(Math.max(0, Math.floor(offset)))
+      });
+      const res = await fetch(`/api/guestbook?${params.toString()}`);
+      if (!res.ok) {
+        const body = await res.json().catch(() => null);
+        const message = body?.error ?? `Failed to load guestbook (${res.status})`;
+        throw new Error(message);
+      }
+      const data = (await res.json()) as GuestbookResponse;
+      viewer = data.viewer ?? null;
+      comments = Array.isArray(data.comments) ? data.comments : [];
+      pagination = normalizePagination(data, Math.max(0, offset));
+    } catch (err) {
+      error = err instanceof Error ? err.message : 'Failed to load guestbook.';
+    } finally {
+      loading = false;
+    }
+  }
+
+  async function postComment(message: string): Promise<void> {
+    const res = await fetch('/api/guestbook', {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ message })
+    });
+
+    const payload = await res.json().catch(() => null);
+    if (!res.ok) {
+      const messageText = payload?.error ?? `Request failed (${res.status})`;
+      throw new Error(messageText);
+    }
+
+    const data = payload as GuestbookResponse;
+    viewer = data.viewer ?? viewer;
+    comments = Array.isArray(data.comments) ? data.comments : comments;
+    pagination = normalizePagination(data, 0);
+  }
+
+  async function deleteComment(id: string): Promise<void> {
+    const params = new URLSearchParams({
+      id,
+      limit: String(PAGE_SIZE),
+      offset: String(pagination.offset)
+    });
+    const res = await fetch(`/api/guestbook?${params.toString()}`, {
+      method: 'DELETE'
+    });
+
+    const payload = await res.json().catch(() => null);
+    if (!res.ok) {
+      const messageText = payload?.error ?? `Failed to delete comment (${res.status})`;
+      throw new Error(messageText);
+    }
+
+    const data = payload as GuestbookResponse;
+    comments = Array.isArray(data.comments) ? data.comments : comments;
+    pagination = normalizePagination(data, pagination.offset);
+  }
+
+  async function submitNewComment(): Promise<void> {
+    if (!viewer) {
+      newMessageError = 'You must be logged in to leave a comment.';
+      return;
+    }
+    const trimmed = newMessage.trim();
+    if (!trimmed) {
+      newMessageError = 'Please enter a message before submitting.';
+      return;
+    }
+    if (trimmed.length > 2000) {
+      newMessageError = 'Message exceeds the 2000 character limit.';
+      return;
+    }
+
+    submittingNew = true;
+    newMessageError = null;
+    try {
+      await postComment(trimmed);
+      newMessage = '';
+    } catch (err) {
+      newMessageError = err instanceof Error ? err.message : 'Failed to post comment.';
+    } finally {
+      submittingNew = false;
+    }
+  }
+
+  async function loadNewer(): Promise<void> {
+    if (loading || !pagination.hasPrev) return;
+    const nextOffset = Math.max(0, pagination.offset - pagination.limit);
+    await fetchGuestbook(nextOffset);
+  }
+
+  async function loadOlder(): Promise<void> {
+    if (loading || !pagination.hasNext) return;
+    const nextOffset = pagination.offset + pagination.limit;
+    await fetchGuestbook(nextOffset);
+  }
+
+  onMount(() => {
+    void fetchGuestbook(0);
+  });
+</script>
+
+<section class="guestbook-section">
+  <div class="guestbook-header">
+    <h2 class="font-display tracking-widest">Guestbook</h2>
+  </div>
+
+  {#if viewer}
+    <form class="guestbook-form" on:submit|preventDefault={submitNewComment}>
+      <textarea
+        id="guestbook-new-message"
+        class="input"
+        bind:value={newMessage}
+        maxlength={2000}
+        rows={4}
+        placeholder="Leave your mark—drop a note in the guestbook!"
+      ></textarea>
+      {#if newMessageError}
+        <div class="form-error">{newMessageError}</div>
+      {/if}
+      <div class="form-actions">
+        <button class="btn-neon" type="submit" disabled={submittingNew}>
+          {submittingNew ? 'Posting…' : 'Post Comment'}
+        </button>
+      </div>
+    </form>
+  {:else}
+    <div class="guestbook-login">
+      <p>
+        <a class="underline" href={loginUrl}>Log in with BeatLeader</a> to leave a comment.
+      </p>
+    </div>
+  {/if}
+
+  {#if loading}
+    <div class="guestbook-status">Loading comments…</div>
+  {:else if error}
+    <div class="guestbook-error">{error}</div>
+  {:else if comments.length === 0}
+    <div class="guestbook-empty">No comments yet. Be the first to say hello!</div>
+  {:else}
+    <ul class="guestbook-threads">
+      {#each comments as comment (comment.id)}
+        <li class="guestbook-thread">
+          <article class="guestbook-comment">
+            <div class="comment-header">
+              <PlayerCard
+                name={comment.author.name ?? 'Unknown'}
+                country={comment.author.country}
+                rank={null}
+                showRank={false}
+                avatar={comment.author.avatar}
+                width="100%"
+                avatarSize={56}
+                techPp={comment.author.techPp}
+                accPp={comment.author.accPp}
+                passPp={comment.author.passPp}
+                playerId={comment.author.beatleaderId}
+                gradientId={`guestbook-${comment.id}`}
+              />
+            </div>
+            <p class="comment-body">{comment.message}</p>
+            <div class="comment-meta">
+              <div class="comment-meta-left">
+                {#if viewer?.beatleaderId === comment.author.beatleaderId}
+                  <button
+                    class="comment-delete"
+                    type="button"
+                    on:click={async () => {
+                      try {
+                        await deleteComment(comment.id);
+                      } catch (err) {
+                        console.error(err);
+                        error = err instanceof Error ? err.message : 'Failed to delete comment.';
+                      }
+                    }}
+                    disabled={loading}
+                  >
+                    Delete
+                  </button>
+                {/if}
+              </div>
+              <span class="comment-meta-right">{formatTimestamp(comment.createdAt)}</span>
+            </div>
+          </article>
+        </li>
+      {/each}
+    </ul>
+  {/if}
+
+  <div class="guestbook-pagination">
+    <span class="guestbook-range">
+      {#if pagination.total > 0}
+        Showing {showingStart}–{showingEnd} of {pagination.total}
+      {:else}
+        No comments yet
+      {/if}
+    </span>
+    <div class="guestbook-pagination-buttons">
+      <button
+        class="guestbook-nav-button"
+        type="button"
+        on:click={loadNewer}
+        disabled={loading || !pagination.hasPrev}
+      >
+        Newer
+      </button>
+      <button
+        class="guestbook-nav-button"
+        type="button"
+        on:click={loadOlder}
+        disabled={loading || !pagination.hasNext}
+      >
+        Older
+      </button>
+    </div>
+  </div>
+</section>
+
+<style>
+  .guestbook-section {
+    border-radius: 1rem;
+    padding: 0.625rem;
+    background: linear-gradient(160deg, rgba(15, 23, 42, 0.85), rgba(4, 7, 17, 0.9));
+    border: 1px solid rgba(148, 163, 184, 0.08);
+    box-shadow: 0 20px 45px rgba(2, 6, 23, 0.35);
+  }
+
+  .guestbook-header {
+    margin-bottom: 1.5rem;
+  }
+
+  .guestbook-form {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    margin-bottom: 2rem;
+    width: 100%;
+  }
+
+  .input {
+    width: 100%;
+    border-radius: 0.75rem;
+    padding: 0.85rem 1rem;
+    border: 1px solid rgba(148, 163, 184, 0.15);
+    background: rgba(15, 23, 42, 0.6);
+    color: rgba(226, 232, 240, 0.95);
+    resize: vertical;
+    min-height: 120px;
+  }
+
+  .input:focus {
+    outline: none;
+    border-color: rgba(34, 211, 238, 0.45);
+    box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.15);
+  }
+
+  .form-error {
+    color: rgba(248, 113, 113, 0.9);
+    font-size: 0.8rem;
+  }
+
+  .form-actions {
+    display: flex;
+    gap: 0.75rem;
+    align-items: center;
+    justify-content: flex-end;
+  }
+
+  .guestbook-login {
+    padding: 1rem 1.25rem;
+    border-radius: 0.75rem;
+    border: 1px dashed rgba(148, 163, 184, 0.25);
+    background: rgba(15, 23, 42, 0.4);
+    color: rgba(148, 163, 184, 0.9);
+    margin-bottom: 2rem;
+  }
+
+  .guestbook-status,
+  .guestbook-error,
+  .guestbook-empty {
+    font-size: 0.95rem;
+    color: rgba(148, 163, 184, 0.85);
+    padding: 1rem 0;
+  }
+
+  .guestbook-error {
+    color: rgba(248, 113, 113, 0.9);
+  }
+
+  .guestbook-threads {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 1.25rem;
+  }
+
+  .guestbook-thread {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .guestbook-comment {
+    border: 1px solid rgba(148, 163, 184, 0.12);
+    border-radius: 1rem;
+    padding: 1.25rem;
+    background: rgba(8, 12, 24, 0.65);
+    backdrop-filter: blur(8px);
+    display: grid;
+    grid-template-rows: auto 1fr auto;
+    gap: 0.9rem;
+  }
+
+  .comment-header {
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+  }
+
+  .comment-meta {
+    font-size: 0.75rem;
+    color: rgba(148, 163, 184, 0.7);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 0.75rem;
+  }
+
+  .comment-meta-left {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .comment-meta-right {
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-end;
+    min-width: 6rem;
+    text-align: right;
+  }
+
+  .comment-delete {
+    background: none;
+    border: none;
+    color: rgba(248, 113, 113, 0.85);
+    font-size: 0.7rem;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    cursor: pointer;
+    padding: 0.25rem 0;
+  }
+
+  .comment-delete:hover:not(:disabled) {
+    color: rgba(248, 113, 113, 1);
+  }
+
+  .comment-delete:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .comment-body {
+    font-size: 0.95rem;
+    line-height: 1.5;
+    color: rgba(226, 232, 240, 0.92);
+    white-space: pre-wrap;
+  }
+
+  .guestbook-pagination {
+    margin-top: 1.75rem;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem;
+  }
+
+  .guestbook-range {
+    font-size: 0.8rem;
+    color: rgba(148, 163, 184, 0.75);
+    letter-spacing: 0.04em;
+  }
+
+  .guestbook-pagination-buttons {
+    display: flex;
+    gap: 0.5rem;
+  }
+
+  .guestbook-nav-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.5rem 0.95rem;
+    border-radius: 9999px;
+    border: 1px solid rgba(148, 163, 184, 0.25);
+    background: rgba(15, 23, 42, 0.55);
+    color: rgba(226, 232, 240, 0.88);
+    font-size: 0.75rem;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
+  }
+
+  .guestbook-nav-button:hover:not(:disabled) {
+    border-color: rgba(34, 211, 238, 0.45);
+    color: rgba(34, 211, 238, 0.95);
+    background: rgba(15, 23, 42, 0.7);
+  }
+
+  .guestbook-nav-button:disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+  }
+
+
+  @media (max-width: 640px) {
+    .guestbook-section {
+      padding: 1.75rem;
+    }
+
+    .comment-meta {
+      font-size: 0.7rem;
+    }
+  }
+</style>
+

src/lib/components/MapActionButtons.svelte

@@ -62,7 +62,7 @@
     : `https://beatsaver.com/search/hash/${hash}`;
 </script>
 
-<div class="flex flex-wrap gap-2">
+<div class="map-action-buttons flex flex-wrap gap-2">
   <a
     class="rounded-md border border-white/10 px-2 py-1 text-xs hover:border-white/20"
     href={beatLeaderUrl}

src/lib/components/MapCard.svelte

@@ -2,6 +2,7 @@
   import DifficultyLabel from './DifficultyLabel.svelte';
   import MapActionButtons from './MapActionButtons.svelte';
   import SongPlayer from './SongPlayer.svelte';
+  import ScoreBar from './ScoreBar.svelte';
 
 // Song metadata
 export let hash: string;
@@ -19,21 +20,24 @@ export let modeName: string = 'Standard';
 export let leaderboardId: string | undefined = undefined;
 export let beatsaverKey: string | undefined = undefined;
 
-// Layout tweaks
+// BeatSaver stats
-export let compact = false;
+export let score: number | undefined = undefined;
+
 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>
@@ -51,14 +55,14 @@ export let showPublished = true;
       </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>
-      </div>
+        {#if hasScore}
-      <div class="player">
+          <ScoreBar value={score} showLabel={true} size="sm" decimals={1} className="score-meter--with-max" />
-        <SongPlayer {hash} preferBeatLeader={true} />
+        {/if}
       </div>
     </div>
 
@@ -73,6 +77,9 @@ export let showPublished = true;
           {modeName}
           {beatsaverKey}
         />
+        <div class="player">
+          <SongPlayer {hash} preferBeatLeader={true} />
+        </div>
       </div>
     {/if}
   </div>
@@ -86,13 +93,6 @@ export let showPublished = true;
     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%;
@@ -119,14 +119,6 @@ export let showPublished = true;
     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;
@@ -134,12 +126,6 @@ export let showPublished = true;
     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;
@@ -148,10 +134,6 @@ export let showPublished = true;
     text-overflow: ellipsis;
   }
 
-  .body.compact-body .title {
-    font-size: 0.95rem;
-  }
-
   .mapper-row {
     display: flex;
     justify-content: space-between;
@@ -191,58 +173,37 @@ export let showPublished = true;
     flex: 1;
   }
 
-  .meta-leading.compact-leading {
-    width: 100%;
-  }
-
   .meta-leading :global(.score-meter) {
     width: 100%;
+    max-width: 45%;
+    margin-left: auto;
   }
 
-  .meta.compact-row {
+  .actions {
-    margin-top: 0.25rem;
+    margin-top: 0.6rem;
-    gap: 0.35rem;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    flex-wrap: wrap;
   }
 
   .player {
     flex: 1;
+    max-width: 45%;
+    margin-left: auto;
   }
 
-  .actions {
+  .actions :global(.map-action-buttons) {
-    margin-top: auto;
+    display: inline-flex;
-  }
+    flex-wrap: wrap;
-
+    gap: 0.5rem;
-  .body.compact-body .actions {
-    margin-top: 0.3rem;
   }
 
   @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%;
-    }
-
-    .meta.compact-row .player {
       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/server/guestbookStore.ts

@@ -0,0 +1,130 @@
+import * as fs from 'node:fs';
+import * as path from 'node:path';
+import { randomUUID } from 'node:crypto';
+
+export type GuestbookAuthor = {
+  beatleaderId: string;
+  name: string | null;
+  avatar: string | null;
+  country: string | null;
+  rank: number | null;
+  techPp: number | null;
+  accPp: number | null;
+  passPp: number | null;
+};
+
+export type GuestbookComment = {
+  id: string;
+  message: string;
+  author: GuestbookAuthor;
+  createdAt: number;
+  updatedAt: number | null;
+};
+
+type GuestbookFileData = {
+  comments: GuestbookComment[];
+};
+
+const DATA_DIR = '.data';
+const GUESTBOOK_FILE = 'guestbook.json';
+
+const EMPTY_DATA: GuestbookFileData = { comments: [] };
+
+const CONTROL_CHARS_REGEX = /[\u0000-\u001F\u007F]/g;
+const HTML_TAG_REGEX = /<[^>]*>/g;
+const JAVASCRIPT_PROTOCOL_REGEX = /javascript:/gi;
+
+function sanitizeGuestbookMessage(value: string): string {
+  if (!value) return '';
+  const withoutTags = value.replace(HTML_TAG_REGEX, '');
+  const withoutControl = withoutTags.replace(CONTROL_CHARS_REGEX, ' ');
+  const withoutJsProtocol = withoutControl.replace(JAVASCRIPT_PROTOCOL_REGEX, '');
+  return withoutJsProtocol.trim();
+}
+
+function ensureDataDir(): void {
+  if (!fs.existsSync(DATA_DIR)) {
+    fs.mkdirSync(DATA_DIR, { recursive: true });
+  }
+}
+
+function resolveGuestbookPath(): string {
+  return path.join(process.cwd(), DATA_DIR, GUESTBOOK_FILE);
+}
+
+function loadGuestbookFile(): GuestbookFileData {
+  try {
+    const filePath = resolveGuestbookPath();
+    if (!fs.existsSync(filePath)) {
+      return { ...EMPTY_DATA, comments: [] };
+    }
+    const raw = fs.readFileSync(filePath, 'utf-8');
+    const parsed = JSON.parse(raw);
+    if (!parsed || typeof parsed !== 'object') {
+      return { ...EMPTY_DATA, comments: [] };
+    }
+    const comments = Array.isArray((parsed as GuestbookFileData).comments)
+      ? ((parsed as GuestbookFileData).comments as GuestbookComment[])
+      : [];
+    return { comments };
+  } catch (error) {
+    console.error('Failed to read guestbook store', error);
+    return { ...EMPTY_DATA, comments: [] };
+  }
+}
+
+function persistGuestbookFile(data: GuestbookFileData): void {
+  try {
+    ensureDataDir();
+    fs.writeFileSync(resolveGuestbookPath(), JSON.stringify(data, null, 2), 'utf-8');
+  } catch (error) {
+    console.error('Failed to persist guestbook store', error);
+  }
+}
+
+export function listGuestbookComments(): GuestbookComment[] {
+  const data = loadGuestbookFile();
+  return [...data.comments]
+    .map((comment) => ({ ...comment, message: sanitizeGuestbookMessage(comment.message) }))
+    .sort((a, b) => b.createdAt - a.createdAt);
+}
+
+export function addGuestbookComment(input: {
+  message: string;
+  author: GuestbookAuthor;
+}): GuestbookComment {
+  const data = loadGuestbookFile();
+
+  const sanitizedMessage = sanitizeGuestbookMessage(input.message);
+
+  const comment: GuestbookComment = {
+    id: randomUUID(),
+    message: sanitizedMessage,
+    author: input.author,
+    createdAt: Date.now(),
+    updatedAt: null
+  };
+
+  data.comments.push(comment);
+  persistGuestbookFile(data);
+  return comment;
+}
+
+export function getGuestbookComments(): GuestbookComment[] {
+  return listGuestbookComments();
+}
+
+export function deleteGuestbookComment(id: string, requesterBeatleaderId: string): boolean {
+  if (!id) return false;
+  const data = loadGuestbookFile();
+  const index = data.comments.findIndex(
+    (comment) => comment.id === id && comment.author.beatleaderId === requesterBeatleaderId
+  );
+  if (index === -1) return false;
+
+  data.comments.splice(index, 1);
+  persistGuestbookFile(data);
+  return true;
+}
+
+

src/lib/utils/plebsaber-utils.ts

@@ -11,6 +11,7 @@ export type MapMeta = {
   key?: string;
   coverURL?: string;
   mapper?: string;
+  score?: number;
 };
 
 export type StarInfo = {
@@ -180,7 +181,8 @@ export async function fetchBeatSaverMeta(hash: string): Promise<MapMeta | null>
       songName: data?.metadata?.songName ?? data?.name ?? undefined,
       key: data?.id ?? undefined,
       coverURL: cover,
-      mapper: data?.uploader?.name ?? undefined
+      mapper: data?.uploader?.name ?? undefined,
+      score: typeof data?.stats?.score === 'number' ? data.stats.score : undefined
     };
   } catch {
     // Fallback to CDN cover only
@@ -223,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/+page.svelte

@@ -1,10 +1,14 @@
+<script lang="ts">
+  import Guestbook from '$lib/components/Guestbook.svelte';
+</script>
+
 <section class="grid items-center gap-10 py-12 md:py-20 lg:grid-cols-2">
   <div class="space-y-6">
     <h1 class="font-display text-4xl sm:text-5xl lg:text-6xl leading-tight">
       helper tools  for <span class="neon-text">Beat Saber</span>
     </h1>
     <p class="max-w-prose text-lg text-muted">
-      Notes about how things work, helpers and utilities.
+      Notes about how things work and utilities for finding maps to play.
     </p>
     <div class="flex flex-wrap gap-3">
       <a href="/tools" class="btn-neon">Explore Tools</a>
@@ -18,20 +22,26 @@
     <div class="grid grid-cols-2 gap-4">
       <a href="/tools/compare-histories" class="rounded-lg bg-black/30 ring-1 ring-white/10 p-4 block hover:ring-white/20 transition">
         <div class="text-sm text-muted">Tool</div>
-        <div class="mt-1 text-2xl font-mono">Compare PlayerHistories</div>
+        <div class="mt-1 text-2xl font-mono">Player History Comparison</div>
         <div class="mt-1 text-sm text-muted">A vs B: songs A played that B has not</div>
       </a>
-      
+      <a href="/tools/playlist-discovery" class="rounded-lg bg-black/30 ring-1 ring-white/10 p-4 block hover:ring-white/20 transition">
+        <div class="text-sm text-muted">Tool</div>
+        <div class="mt-1 text-2xl font-mono">Playlist Discovery</div>
+        <div class="mt-1 text-sm text-muted">Experimental UX for browsing new playlists on BeatSaver</div>
+      </a>
     </div>
   </div>
   </div>
 </section>
 
-<section class="py-10">
+<section class="py-12">
+  <div class="grid gap-10 xl:gap-14 lg:grid-cols-[minmax(0,2fr)_minmax(0,1fr)] items-start">
+    <div class="space-y-6">
       <div class="prose prose-invert max-w-none">
         <h2 class="font-display tracking-widest">Latest Guides</h2>
       </div>
-  <div class="not-prose mt-4 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+      <div class="not-prose grid gap-4 sm:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2">
         <a href="/guides/finding-new-songs" class="card-surface p-5 block">
           <div class="text-sm text-muted">Guide</div>
           <h3 class="font-semibold mt-1">Finding New Songs (BeatLeader)</h3>
@@ -43,6 +53,10 @@
           <p class="mt-1 text-sm text-muted">Connect BeatLeader and enable unranked stars in tools.</p>
         </a>
       </div>
+    </div>
+
+    <Guestbook />
+  </div>
 </section>
 
 

src/routes/api/guestbook/+server.ts

@@ -0,0 +1,221 @@
+import type { RequestHandler } from '@sveltejs/kit';
+import {
+  addGuestbookComment,
+  deleteGuestbookComment,
+  getGuestbookComments,
+  type GuestbookAuthor
+} from '$lib/server/guestbookStore';
+import { getSession } from '$lib/server/sessionStore';
+
+const MAX_COMMENT_LENGTH = 2000;
+const PLAYER_ENDPOINT = 'https://api.beatleader.com/player/';
+const DEFAULT_PAGE_SIZE = 5;
+const MAX_PAGE_SIZE = 50;
+
+type GuestbookViewer = {
+  beatleaderId: string;
+  name: string | null;
+  avatar: string | null;
+};
+
+type GuestbookResponse = {
+  viewer: GuestbookViewer | null;
+  comments: ReturnType<typeof getGuestbookComments>;
+  pagination: {
+    total: number;
+    offset: number;
+    limit: number;
+    hasPrev: boolean;
+    hasNext: boolean;
+  };
+};
+
+function mapSessionToViewer(session: ReturnType<typeof getSession>): GuestbookViewer | null {
+  if (!session) return null;
+  return {
+    beatleaderId: session.beatleaderId,
+    name: session.name ?? null,
+    avatar: session.avatar ?? null
+  };
+}
+
+async function buildAuthor(session: NonNullable<ReturnType<typeof getSession>>, fetchFn: typeof fetch): Promise<GuestbookAuthor> {
+  const base: GuestbookAuthor = {
+    beatleaderId: session.beatleaderId,
+    name: session.name ?? null,
+    avatar: session.avatar ?? null,
+    country: null,
+    rank: null,
+    techPp: null,
+    accPp: null,
+    passPp: null
+  };
+
+  try {
+    const res = await fetchFn(`${PLAYER_ENDPOINT}${encodeURIComponent(session.beatleaderId)}?stats=true`);
+    if (!res.ok) return base;
+    const data = (await res.json()) as Record<string, unknown>;
+    return {
+      beatleaderId: session.beatleaderId,
+      name: typeof data.name === 'string' ? (data.name as string) : base.name,
+      avatar: typeof data.avatar === 'string' ? (data.avatar as string) : base.avatar,
+      country: typeof data.country === 'string' ? (data.country as string) : base.country,
+      rank: typeof data.rank === 'number' ? (data.rank as number) : base.rank,
+      techPp: typeof data.techPp === 'number' ? (data.techPp as number) : base.techPp,
+      accPp: typeof data.accPp === 'number' ? (data.accPp as number) : base.accPp,
+      passPp: typeof data.passPp === 'number' ? (data.passPp as number) : base.passPp
+    };
+  } catch (error) {
+    console.error('Failed to load BeatLeader profile for guestbook author', error);
+    return base;
+  }
+}
+
+function sanitizeMessage(value: unknown): { ok: true; message: string } | { ok: false; error: string } {
+  if (typeof value !== 'string') {
+    return { ok: false, error: 'Message must be a string' };
+  }
+  const trimmed = value.trim();
+  if (!trimmed) {
+    return { ok: false, error: 'Message cannot be empty' };
+  }
+  if (trimmed.length > MAX_COMMENT_LENGTH) {
+    return { ok: false, error: `Message exceeds ${MAX_COMMENT_LENGTH} characters` };
+  }
+  return { ok: true, message: trimmed };
+}
+
+function parseLimit(value: string | null): number {
+  if (!value) return DEFAULT_PAGE_SIZE;
+  const parsed = Math.floor(Number(value));
+  if (!Number.isFinite(parsed) || parsed <= 0) return DEFAULT_PAGE_SIZE;
+  return Math.min(MAX_PAGE_SIZE, parsed);
+}
+
+function parseOffset(value: string | null): number {
+  if (!value) return 0;
+  const parsed = Math.floor(Number(value));
+  if (!Number.isFinite(parsed) || parsed <= 0) return 0;
+  return parsed;
+}
+
+function clampOffset(offset: number, total: number): number {
+  if (total <= 0) return 0;
+  const safeOffset = Math.max(0, Math.floor(offset));
+  const maxOffset = Math.max(0, total - 1);
+  return Math.min(safeOffset, maxOffset);
+}
+
+function buildGuestbookPayload(
+  session: ReturnType<typeof getSession>,
+  limit: number,
+  offset: number
+): GuestbookResponse {
+  const allComments = getGuestbookComments();
+  const total = allComments.length;
+  const safeLimit = Math.max(1, Math.min(MAX_PAGE_SIZE, Math.floor(limit)));
+  const safeOffset = clampOffset(offset, total);
+  const pageComments = allComments.slice(safeOffset, safeOffset + safeLimit);
+
+  return {
+    viewer: mapSessionToViewer(session),
+    comments: pageComments,
+    pagination: {
+      total,
+      offset: safeOffset,
+      limit: safeLimit,
+      hasPrev: safeOffset > 0,
+      hasNext: safeOffset + safeLimit < total
+    }
+  };
+}
+
+function jsonResponse(payload: GuestbookResponse, init?: ResponseInit): Response {
+  return new Response(JSON.stringify(payload), {
+    headers: { 'content-type': 'application/json' },
+    ...init
+  });
+}
+
+export const GET: RequestHandler = ({ cookies, url }) => {
+  const session = getSession(cookies);
+  const limit = parseLimit(url.searchParams.get('limit'));
+  const offset = parseOffset(url.searchParams.get('offset'));
+
+  return jsonResponse(buildGuestbookPayload(session, limit, offset));
+};
+
+export const POST: RequestHandler = async ({ request, cookies, fetch }) => {
+  const session = getSession(cookies);
+  if (!session) {
+    return new Response(
+      JSON.stringify({ error: 'Unauthorized', login: '/auth/beatleader/login' }),
+      { status: 401, headers: { 'content-type': 'application/json' } }
+    );
+  }
+
+  let body: unknown;
+  try {
+    body = await request.json();
+  } catch {
+    return new Response(JSON.stringify({ error: 'Invalid JSON body' }), {
+      status: 400,
+      headers: { 'content-type': 'application/json' }
+    });
+  }
+
+  const sanitizedMessage = sanitizeMessage((body as Record<string, unknown>)?.message);
+  if (!sanitizedMessage.ok) {
+    return new Response(JSON.stringify({ error: sanitizedMessage.error }), {
+      status: 400,
+      headers: { 'content-type': 'application/json' }
+    });
+  }
+
+  const { message } = sanitizedMessage;
+
+  try {
+    const author = await buildAuthor(session, fetch);
+    addGuestbookComment({ message, author });
+  } catch (error) {
+    const msg = error instanceof Error ? error.message : 'Failed to save comment';
+    return new Response(JSON.stringify({ error: msg }), {
+      status: 400,
+      headers: { 'content-type': 'application/json' }
+    });
+  }
+
+  return jsonResponse(buildGuestbookPayload(session, DEFAULT_PAGE_SIZE, 0), { status: 201 });
+};
+
+export const DELETE: RequestHandler = ({ url, cookies }) => {
+  const session = getSession(cookies);
+  if (!session) {
+    return new Response(
+      JSON.stringify({ error: 'Unauthorized', login: '/auth/beatleader/login' }),
+      { status: 401, headers: { 'content-type': 'application/json' } }
+    );
+  }
+
+  const id = url.searchParams.get('id') || null;
+  if (!id) {
+    return new Response(JSON.stringify({ error: 'Missing comment id' }), {
+      status: 400,
+      headers: { 'content-type': 'application/json' }
+    });
+  }
+
+  const success = deleteGuestbookComment(id, session.beatleaderId);
+  if (!success) {
+    return new Response(JSON.stringify({ error: 'Comment not found or not owned by you' }), {
+      status: 404,
+      headers: { 'content-type': 'application/json' }
+    });
+  }
+
+  const limit = parseLimit(url.searchParams.get('limit'));
+  const offset = parseOffset(url.searchParams.get('offset'));
+  return jsonResponse(buildGuestbookPayload(session, limit, offset), { status: 200 });
+};
+
+

src/routes/guides/finding-new-songs/+page.svelte

@@ -1,7 +1,7 @@
 <section class="py-8 prose prose-invert max-w-none">
   <h1 class="font-display tracking-widest">Finding New Songs with BeatLeader</h1>
   <p>
-    A fast, repeatable workflow to discover fresh maps using BeatLeader’s powerful search. It relies on
+    A slow, but repeatable workflow to discover fresh maps using BeatLeader’s powerful search. This relies on
     supporter‑only unranked star ratings (<code>ShowAllRatings</code>) and sorts by <strong>techRating</strong> to surface interesting patterns.
   </p>
 
@@ -16,11 +16,11 @@
   <h2 id="requirements">Requirements</h2>
   <ul>
     <li><strong>BeatLeader supporter</strong> role on your BL account (Patreon/tipper/supporter/sponsor).</li>
-    <li><strong><code>ShowAllRatings</code></strong> enabled on your BL profile. See <a href="/guides/beatleader-auth">BeatLeader Authentication</a> for how to sign in and enable it.</li>
+    <li><strong><code>ShowAllRatings</code></strong> enabled on your BL profile. Navigate to  the Leaderboard section in <a href="https://beatleader.com/settings#leaderboard" target="_blank" rel="noreferrer">Beatleader settings</a> and enable "Show rating for all maps"</li>
   </ul>
 
   <h2 id="search-setup">Search setup</h2>
-  <p>Use the BeatLeader maps search with these filters:</p>
+  <p>Use the BeatLeader map search with these filters:</p>
   <ul>
     <li><strong>Date range</strong>: pick a single month (e.g., Dec 1 → Jan 1). Iterate month by month.</li>
     <li><strong>Stars</strong>: set a band to control density and overall difficulty (e.g., <strong>8–10</strong> for fun, <strong>6–8</strong> for warm‑ups).</li>

src/routes/tools/compare-histories/+page.svelte

@@ -179,7 +179,10 @@
 
 <section class="py-8">
   <h1 class="font-display text-3xl sm:text-4xl">Compare Play Histories</h1>
-  <p class="mt-2 text-muted">Maps Player A has played that Player B hasn't — configurable lookback.</p>
+  <p class="mt-2 text-muted max-w-2xl">
+    Maps Player A has played that Player B has not.
+    This tool can be useful for finding songs to <code>!bsr</code> in Twitch streams, so we can recommend songs that we've played that the streamer has not.
+  </p>
  
   <HasToolAccess player={playerProfile} requirement={requirement} {adminRank} adminPlayer={adminPlayer}>
     <PlayerCompareForm bind:playerA bind:playerB {loading} hasResults={results.length > 0} oncompare={onCompare} currentPlayer={playerProfile}>
@@ -238,6 +241,7 @@
               modeName={item.difficulties[0]?.characteristic ?? 'Standard'}
               leaderboardId={item.leaderboardId}
               beatsaverKey={metaByHash[item.hash]?.key}
+              score={metaByHash[item.hash]?.score}
             />
           </article>
         {/each}

src/routes/tools/player-headtohead/+page.svelte

@@ -313,7 +313,9 @@
 
 <section class="py-8">
   <h1 class="font-display text-3xl sm:text-4xl">Player Head-to-Head</h1>
-  <p class="mt-2 text-muted">Paginated head-to-head results on the same map and difficulty.</p>
+  <p class="mt-2 text-muted max-w-2xl">
+    Compare two players on maps they've both played.
+  </p>
 
   <HasToolAccess player={playerProfile} requirement={requirement} {adminRank} adminPlayer={adminPlayer}>
     <PlayerCompareForm bind:playerA bind:playerB {loading} hasResults={items.length > 0} oncompare={onCompare} currentPlayer={playerProfile} />
@@ -499,6 +501,7 @@
               modeName={item.modeName}
               leaderboardId={item.leaderboardId}
               beatsaverKey={metaByHash[item.hash]?.key}
+              score={metaByHash[item.hash]?.score}
             >
               <div slot="content">
                 <div class="mt-3 grid grid-cols-2 gap-3 neon-surface">

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,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]);
@@ -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,