android: the library's file stats on the cards, the artist's own plays, the thumbnail prewarm

The desktop Library's per-record file stats on the phone (library_album_stats,
one call for the whole library): FLAC 24/96 or MP3 320k badges on the cards,
the size on the list rows and the record page. The artist page's own
listening (artist_play_stats): the time played as a chip, the most played
track under "On this phone". The whole-library thumbnail warm a moment after
boot, at the cards' edge, one decode at a time behind the tiles' gate.

src/mobile/screens/Artist.svelte

@@ -22,12 +22,25 @@
     import { catalog, lookupArtist, artistKey, fans, yearOf, looseTitle, loadExtras, picture } from "../catalog.svelte.js";
     import { resolver, streamSong, streamCatalogAlbum } from "../resolve.svelte.js";
     import { discoTabs, activeYears, latestOf, timelineOf, isUpcoming, SOCIAL_LABEL } from "../disco.js";
-    import { shuffled, mmss } from "../util.js";
+    import { shuffled, mmss, ago } from "../util.js";
 
     /** `seed`: the search's own row (a CatalogArtist), when the page was
      *  opened from one — the identity is then known, no name search. */
     let { name, seed = null, screenEl = null } = $props();
 
+    /* the desktop's play-stats chips: this phone's own listening to the artist */
+    let plays = $state({ key: "", seconds: 0, last: null, topTitle: null, topCount: 0 });
+    $effect(() => {
+        const n = name;
+        if (plays.key === n) return;
+        plays = { key: n, seconds: 0, last: null, topTitle: null, topCount: 0 };
+        api.artistPlayStats(n).then((st) => {
+            if (plays.key !== n) return;
+            plays = { key: n, seconds: st?.seconds ?? 0, last: st?.last_played_at ?? null, topTitle: st?.top_title ?? null, topCount: st?.top_count ?? 0 };
+        }, () => { /* the chips stay hidden */ });
+    });
+    const playTime = $derived(!plays.seconds || plays.seconds < 60 ? "" : plays.seconds < 3600 ? Math.round(plays.seconds / 60) + " min" : (plays.seconds / 3600).toFixed(1) + " hours");
+
     /* ── the library's shell ─────────────────────────────────────────── */
     const albums = $derived(albumsBy(name));
     const portrait = $derived(albums.find((a) => a.artist_art_path)?.artist_art_path || null);
@@ -198,6 +211,7 @@
         {#if page?.artist?.fans || seed?.fans}<span class="s"><Icon name="users" size={12} strokeWidth={3} />{fans(page?.artist?.fans || seed?.fans)}</span>{/if}
         {#if years}<span class="s"><Icon name="calendar" size={12} strokeWidth={3} />{years}</span>{/if}
         {#if page?.top_genre}<span class="s"><Icon name="tag" size={12} strokeWidth={3} />{page.top_genre}</span>{/if}
+        {#if playTime}<span class="s played"><Icon name="history" size={12} strokeWidth={3} />{playTime} played</span>{/if}
         {#if albums.length}<button class="s quiet" onclick={shuffleAll}><Icon name="shuffle" size={12} strokeWidth={3} />{albums.length} here · shuffle</button>{/if}
         {#each socials as link (link.kind + link.url)}
             <button class="s quiet soc" onclick={() => openLink(link.url)}><Icon name={link.kind === "website" ? "globe" : "link"} size={12} strokeWidth={3} />{SOCIAL_LABEL[link.kind] || link.kind}</button>
@@ -303,6 +317,7 @@
 
 {#if albums.length}
     <div class="sec"><h2>On this phone <em>· {albums.length} record{albums.length === 1 ? "" : "s"}{tracks ? ` · ${tracks} tracks` : ""}</em></h2></div>
+    {#if plays.topTitle}<div class="sec-note">Most played here: {plays.topTitle} · {plays.topCount}×{plays.last ? " · last " + ago(plays.last) : ""}</div>{/if}
     <div class="grid2">
         {#each albums as a (a.id)}
             <Release title={a.title} sub={String(a.year || "")} path={a.art_path} onclick={() => push("album", { id: a.id }, screenEl)} />