From b66ecd75bd7aff2a4a82274a6343f26bc37a674b Mon Sep 17 00:00:00 2001
From: Brian Lee <blee@satstack.cloud>
Date: Fri, 17 Oct 2025 10:18:35 -0700
Subject: [PATCH] Add note about Oauth

---
 .../guides/beatleader-auth/+page.svelte       |  3 +
 .../tools/beatleader-compare/+page.svelte     | 60 ++++++++++---------
 2 files changed, 34 insertions(+), 29 deletions(-)

diff --git a/src/routes/guides/beatleader-auth/+page.svelte b/src/routes/guides/beatleader-auth/+page.svelte
index 479a23b..cd84807 100644
--- a/src/routes/guides/beatleader-auth/+page.svelte
+++ b/src/routes/guides/beatleader-auth/+page.svelte
@@ -150,6 +150,9 @@
       Use the OAuth Login above; we request <code>scp:offline_access</code> to allow refresh without re‑prompting.
     </li>
   </ol>
+  <p>
+    <strong>Multi‑environment setup:</strong> If you deploy to multiple environments (dev, staging, production), you must register <strong>all redirect URIs</strong> in your BeatLeader OAuth application. For example: <code>http://localhost:5173/auth/beatleader/callback</code>, <code>https://staging.example.com/auth/beatleader/callback</code>, and <code>https://example.com/auth/beatleader/callback</code>. The app automatically uses the correct redirect URI based on the current environment's origin.
+  </p>
 
   <h2 id="usage">How this app uses your auth</h2>
   <ul>
diff --git a/src/routes/tools/beatleader-compare/+page.svelte b/src/routes/tools/beatleader-compare/+page.svelte
index c77d7d5..9c91e62 100644
--- a/src/routes/tools/beatleader-compare/+page.svelte
+++ b/src/routes/tools/beatleader-compare/+page.svelte
@@ -523,35 +523,37 @@
                 {/key}
               </div>
             {/if}
-            <div class="mt-3">
-              <SongPlayer hash={item.hash} preferBeatLeader={true} />
-            </div>
-            <div class="mt-3 flex flex-wrap gap-2">
-              <a
-                class="rounded-md border border-white/10 px-2 py-1 text-xs hover:border-white/20"
-                href={item.leaderboardId
-                  ? `https://beatleader.com/leaderboard/global/${item.leaderboardId}`
-                  : `https://beatleader.com/leaderboard/global/${item.hash}?diff=${encodeURIComponent(item.difficulties[0]?.name ?? 'ExpertPlus')}&mode=${encodeURIComponent(item.difficulties[0]?.characteristic ?? 'Standard')}`}
-                target="_blank"
-                rel="noopener"
-                title="Open in BeatLeader"
-                >BL</a
-              >
-              <a
-                class="rounded-md border border-white/10 px-2 py-1 text-xs hover:border-white/20"
-                href={metaByHash[item.hash]?.key ? `https://beatsaver.com/maps/${metaByHash[item.hash]?.key}` : `https://beatsaver.com/search/hash/${item.hash}`}
-                target="_blank"
-                rel="noopener"
-                title="Open in BeatSaver"
-                >BSR</a
-              >
-              <button
-                class="rounded-md border border-white/10 px-2 py-1 text-xs hover:border-white/20 disabled:opacity-50"
-                class:lit-up={litButtons.has(`bsr-${item.hash}`)}
-                on:click={() => { const key = metaByHash[item.hash]?.key; if (key) copyBsrCommand(key, item.hash); }}
-                disabled={!metaByHash[item.hash]?.key}
-                title="Copy !bsr"
-              >Copy !bsr</button>
+            <div class="mt-3 flex items-center gap-2">
+              <div class="w-1/2 flex flex-wrap gap-2">
+                <a
+                  class="rounded-md border border-white/10 px-2 py-1 text-xs hover:border-white/20"
+                  href={item.leaderboardId
+                    ? `https://beatleader.com/leaderboard/global/${item.leaderboardId}`
+                    : `https://beatleader.com/leaderboard/global/${item.hash}?diff=${encodeURIComponent(item.difficulties[0]?.name ?? 'ExpertPlus')}&mode=${encodeURIComponent(item.difficulties[0]?.characteristic ?? 'Standard')}`}
+                  target="_blank"
+                  rel="noopener"
+                  title="Open in BeatLeader"
+                  >BL</a
+                >
+                <a
+                  class="rounded-md border border-white/10 px-2 py-1 text-xs hover:border-white/20"
+                  href={metaByHash[item.hash]?.key ? `https://beatsaver.com/maps/${metaByHash[item.hash]?.key}` : `https://beatsaver.com/search/hash/${item.hash}`}
+                  target="_blank"
+                  rel="noopener"
+                  title="Open in BeatSaver"
+                  >BSR</a
+                >
+                <button
+                  class="rounded-md border border-white/10 px-2 py-1 text-xs hover:border-white/20 disabled:opacity-50"
+                  class:lit-up={litButtons.has(`bsr-${item.hash}`)}
+                  on:click={() => { const key = metaByHash[item.hash]?.key; if (key) copyBsrCommand(key, item.hash); }}
+                  disabled={!metaByHash[item.hash]?.key}
+                  title="Copy !bsr"
+                >Copy !bsr</button>
+              </div>
+              <div class="w-1/2">
+                <SongPlayer hash={item.hash} preferBeatLeader={true} />
+              </div>
             </div>
           </div>
         </article>