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

@@ -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,9 +214,20 @@ function Connections() {
               </div>
             </div>
             {byProvider.has(p) ? (
+              <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)}>
                 <input name="username" placeholder="Username" required />
@@ -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>