fix(web,flutter): PlayerBar test scoping + system-playlists revalidate

Two bundled fixes:

### Web: PlayerBar test failures
PlayerBar renders both compact (md:hidden) and desktop (hidden md:flex)
blocks; jsdom doesn't apply CSS media queries so both DOM trees are
present in tests. screen.getByRole/getByText found duplicates →
14 test failures.

Added data-testid="player-bar-compact" + "player-bar-desktop"; tests
scope queries via within(getByTestId(...)). Compact is the focus of
#358, so most tests scope there. The "Up next" subgroup explicitly
scopes to desktop since that copy was dropped from compact.

### Flutter: system playlists not loading
cacheFirst was too conservative — when drift had user-created
playlists from sync but no system playlists (For-You / Discover),
fetchAndPopulate never fired (drift wasn't empty). Result: home
tile row showed user playlists but never the system ones.

Added cacheFirst alwaysRefresh option = stale-while-revalidate.
playlistsListProvider opts in: yields cache immediately, then kicks
off REST refresh in background. Drift watch() picks up the new rows
and re-emits.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

flutter_client/lib/cache/cache_first.dart

@@ -5,6 +5,12 @@
 //   - empty + online → fetch via REST, populate drift, await re-emission
 //   - empty + offline → yield mapped empty result (UI shows empty state)
 //
+// With `alwaysRefresh: true`, also kicks off a one-shot REST refresh
+// in the background after the first non-empty emission. Use for
+// aggregate lists (playlists, etc.) where the server may have rows
+// the local sync didn't pick up — yields cache immediately, refreshes
+// silently, and drift watch() re-emits with whatever new rows landed.
+//
 // The pattern lets every read provider trust drift as the source of
 // truth. SyncController keeps drift fresh in the background; widget
 // rebuilds happen automatically as drift writes propagate via watch().
@@ -28,10 +34,25 @@ Stream<T> cacheFirst<D, T>({
   required Future<void> Function() fetchAndPopulate,
   required T Function(List<D>) toResult,
   required Future<bool> Function() isOnline,
+  bool alwaysRefresh = false,
 }) async* {
+  // Tracks whether we've already kicked off a stale-while-revalidate
+  // refresh for this stream subscription, so we don't fire one on every
+  // drift re-emission (otherwise the populate cycles forever).
+  var revalidated = false;
+
   await for (final rows in driftStream) {
     if (rows.isNotEmpty) {
       yield toResult(rows);
+      // Stale-while-revalidate: yield cache immediately, then kick off
+      // a REST refresh in the background. Drift watch() picks up the
+      // resulting writes and re-emits via this same stream loop.
+      // Useful for aggregate lists (e.g. playlists) where the server
+      // may have rows the local sync didn't pick up.
+      if (alwaysRefresh && !revalidated && await isOnline()) {
+        revalidated = true;
+        unawaited(_safeFetch(fetchAndPopulate));
+      }
       continue;
     }
     if (await isOnline()) {
@@ -47,3 +68,11 @@ Stream<T> cacheFirst<D, T>({
     }
   }
 }
+
+Future<void> _safeFetch(Future<void> Function() fn) async {
+  try {
+    await fn();
+  } catch (_) {
+    // Background revalidate — swallow; UI already showed cached state.
+  }
+}

flutter_client/lib/playlists/playlists_provider.dart

@@ -61,6 +61,11 @@ final playlistsListProvider =
       return PlaylistsList(owned: owned, public: pub);
     },
     isOnline: () async => (await ref.read(connectivityProvider.future)),
+    // Aggregate list — server may add system playlists (For-You /
+    // Discover) that the per-user delta sync doesn't always emit.
+    // Stale-while-revalidate ensures the home tile row reflects the
+    // current server state on every screen visit.
+    alwaysRefresh: true,
   );
 });