fix: improve background settings UX and fix pointer events (#598)

- add pointer-events: none to body::before (fixes input blocking)
- remove disabled state from background URL input (can set fallback)
- fix toast message when toggling playing artwork off
- update descriptions to clarify fallback behavior
- always show tile checkbox when background URL is set

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

authored by zzstoatzz.io Claude Opus 4.5 and committed by GitHub 59d7cd26 9ef9abf9

Changed files
+5 -5
frontend
src
routes
+1
frontend/src/routes/+layout.svelte
··· 536 536 filter: blur(var(--bg-blur, 0px)); 537 537 transform: scale(1.1); /* prevent blur edge artifacts */ 538 538 z-index: -1; 539 + pointer-events: none; 539 540 } 540 541 541 542 .app-layout {
+4 -5
frontend/src/routes/settings/+page.svelte
··· 177 177 178 178 async function saveUsePlayingArtwork(enabled: boolean) { 179 179 await preferences.updateUiSettings({ use_playing_artwork_as_background: enabled }); 180 - toast.success(enabled ? 'using playing artwork as background' : 'using custom background'); 180 + toast.success(enabled ? 'playing artwork background enabled' : 'playing artwork background disabled'); 181 181 } 182 182 183 183 function selectTheme(theme: Theme) { ··· 457 457 <div class="setting-row"> 458 458 <div class="setting-info"> 459 459 <h3>background image</h3> 460 - <p>set a custom background image (URL)</p> 460 + <p>set a custom background image (URL){#if usePlayingArtwork} — used as fallback when nothing is playing{/if}</p> 461 461 </div> 462 462 <div class="background-controls"> 463 463 <input ··· 467 467 bind:value={backgroundInput} 468 468 onblur={saveBackgroundImage} 469 469 onkeydown={(e) => e.key === 'Enter' && saveBackgroundImage()} 470 - disabled={usePlayingArtwork} 471 470 /> 472 - {#if backgroundImageUrl && !usePlayingArtwork} 471 + {#if backgroundImageUrl} 473 472 <label class="tile-toggle"> 474 473 <input 475 474 type="checkbox" ··· 485 484 <div class="setting-row"> 486 485 <div class="setting-info"> 487 486 <h3>playing artwork as background</h3> 488 - <p>use the currently playing track's artwork as background (overrides custom image)</p> 487 + <p>use currently playing track's artwork as background (falls back to custom image when nothing is playing)</p> 489 488 </div> 490 489 <label class="toggle-switch"> 491 490 <input