From 507cffbe570941e7d7ba06de36ee5a54713d0a59 Mon Sep 17 00:00:00 2001
From: chris <chris@chrisedwards.tech>
Date: Sun, 4 Oct 2026 07:12:19 -0400
Subject: [PATCH] Web: Sign in with Last.fm and explain the Spotify beta limit

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MzFywujuH9TiuXbr9vjoX8
---
 apps/web/src/app/settings/page.tsx | 35 +++++++++++++++++++++++++-----
 1 file changed, 29 insertions(+), 6 deletions(-)

diff --git a/apps/web/src/app/settings/page.tsx b/apps/web/src/app/settings/page.tsx
index 78e1c8c..64a1ae2 100644
--- a/apps/web/src/app/settings/page.tsx
+++ b/apps/web/src/app/settings/page.tsx
@@ -95,7 +95,9 @@ function ProfileForm({ me }: { me: MeDTO }) {
 function Connections() {
   const params = useSearchParams();
   const { data: connections = [], mutate } = useSWR<ConnectionDTO[]>('/connections', fetcher);
-  const [error, setError] = useState<string | null>(params.get('error'));
+  const errorParam = params.get('error');
+  const spotifyLimited = errorParam === 'spotify_limited';
+  const [error, setError] = useState<string | null>(spotifyLimited ? null : errorParam);
   const byProvider = new Map(connections.map((c) => [c.provider, c]));
 
   const run = async (fn: () => Promise<unknown>) => {
@@ -108,7 +110,7 @@ function Connections() {
     }
   };
 
-  const connectOAuth = (provider: 'spotify' | 'plex') =>
+  const connectOAuth = (provider: 'spotify' | 'plex' | 'lastfm') =>
     run(async () => {
       const { url } = await api<{ url: string }>(`/connections/${provider}/authorize`, { body: { client: 'web' } });
       window.location.href = url;
@@ -187,6 +189,16 @@ function Connections() {
           )}
         </div>
 
+        {spotifyLimited && (
+          <div className="notice">
+            <strong>Spotify sign-in is limited during beta.</strong> Spotify only lets a few accounts sign in to new apps
+            directly. You can still share Spotify through Last.fm: sign in to Last.fm below, then{' '}
+            <a href="https://www.last.fm/settings/applications" target="_blank" rel="noreferrer">
+              connect “Spotify Scrobbling” on Last.fm
+            </a>
+            .
+          </div>
+        )}
         {(['lastfm', 'listenbrainz'] as const).map((p) => (
           <div className="connection" key={p}>
             <div>
@@ -202,8 +214,19 @@ function Connections() {
               </div>
             </div>
             {byProvider.has(p) ? (
-              <button className="btn" onClick={() => disconnect(p)}>
-                Disconnect
+              <div className="row">
+                {p === 'lastfm' && (
+                  <a className="btn" href="https://www.last.fm/settings/applications" target="_blank" rel="noreferrer">
+                    Link Spotify
+                  </a>
+                )}
+                <button className="btn" onClick={() => disconnect(p)}>
+                  Disconnect
+                </button>
+              </div>
+            ) : p === 'lastfm' ? (
+              <button className="btn btn-primary" onClick={() => connectOAuth('lastfm')}>
+                Sign in with Last.fm
               </button>
             ) : (
               <form className="row" onSubmit={connectUsername(p)}>
@@ -214,10 +237,10 @@ function Connections() {
           </div>
         ))}
 
-        <div className="connection disabled">
+        <div className={`connection ${byProvider.has('apple_music') ? '' : 'disabled'}`}>
           <div>
             <strong>Apple Music</strong>
-            <div className="muted">Coming with the iOS app</div>
+            <div className="muted">{byProvider.has('apple_music') ? status('apple_music') : 'Connect from the musicshare iPhone app (one tap)'}</div>
           </div>
         </div>
       </div>