android: the nav's badges — transfers in flight on You, unread chats on Community

The desktop's title-bar download ring and its unread indicator, on the
phone's nav: a count on You while Save is fetching, a count on Community
when a chat has unread lines.

ANDROID.md

@@ -213,7 +213,9 @@ Save menu: Save to library (at once when the cache is byte-complete, else
 through the download pipeline) and Save this record for the streamed
 record the queue holds. A moment after boot the phone warms the library's thumbnails the
 desktop's way (`library_art_prewarm` at the cards' edge, one decode at a
-time behind the tiles' gate). The Library's count line carries the collection's hours and the sort
+time behind the tiles' gate). The nav wears two badges the desktop's chrome has: transfers in flight on
+You (the title bar's download ring) and unread chats on Community.
+The Library's count line carries the collection's hours and the sort
 offers By format (lossless by depth and rate first, then by bitrate); the
 empty Search page shows Jump back in, the desktop's. The Library's cards wear the desktop's file stats (`library_album_stats`,
 one call for the whole library: FLAC 24/96, MP3 320k, the size on the

src/mobile/Mobile.svelte

@@ -30,7 +30,7 @@
     import Thread from "./screens/Thread.svelte";
     import You from "./screens/You.svelte";
     import Transfers from "./screens/Transfers.svelte";
-    import { transfers, bindTransfers } from "./transfers.svelte.js";
+    import { transfers, bindTransfers, active as activeTransfers } from "./transfers.svelte.js";
     import { bindHome } from "./home.svelte.js";
     import Stub from "./screens/Stub.svelte";
     import { lib, loadLibrary, refreshRecents, albumById, albumsBy, watchLibrary } from "./lib.svelte.js";
@@ -40,7 +40,7 @@
     import { loadPrefs } from "./prefs.svelte.js";
     import { catalog, artistKey } from "./catalog.svelte.js";
     import { bindMedia, syncMedia } from "./media.svelte.js";
-    import { slsk, bindSlsk, connectStored } from "./slsk.svelte.js";
+    import { slsk, bindSlsk, connectStored, unreadTotal } from "./slsk.svelte.js";
     import { net, bindNet } from "./net.svelte.js";
     import { resolver, streamSong, streamCatalogAlbum } from "./resolve.svelte.js";
     import { notice, clearNote } from "./notice.svelte.js";
@@ -285,7 +285,11 @@
         {#each TABS as [id, icon, label] (id)}
             <button class:on={nav.tab === id} onclick={() => go(id)}>
                 <span class="pill"></span>
-                <span class="gl"><Icon name={icon} size={22} /></span>
+                <span class="gl">
+                    <Icon name={icon} size={22} />
+                    {#if id === "you" && activeTransfers().length}<span class="nb">{activeTransfers().length}</span>{/if}
+                    {#if id === "community" && unreadTotal()}<span class="nb">{unreadTotal()}</span>{/if}
+                </span>
                 <span class="lb">{label}</span>
             </button>
         {/each}

src/mobile/shell.css

@@ -1368,3 +1368,6 @@ html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="
 
 /* Community: the room filter sits with the section, not the page's own field */
 .sfield.roomfilter { margin-top: 2px; }
+
+/* the nav's badges: transfers in flight on You, unread chats on Community */
+.nav button .gl .nb { position: absolute; top: -3px; right: -12px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--accent); color: #04121a; font-size: 10px; font-weight: 800; line-height: 16px; text-align: center; box-shadow: 0 0 0 2px var(--nav-bg, #101014); }

tests/mobile/smoke.mjs

@@ -116,6 +116,7 @@ const PROBE = `(function () {
         rooms: document.querySelectorAll('.screen button.row .art.hash').length,
         jump: document.querySelectorAll('.screen .rail .release').length,
         countline: (document.querySelector('.countline .t-sub') || {}).textContent || '',
+        navBadges: [].map.call(document.querySelectorAll('.nav .nb'), function (b) { return b.textContent.trim(); }).join('|'),
         firstBadge: (document.querySelector('.grid2 .release .ed-badge') || {}).textContent || '',
         plthumbs: document.querySelectorAll('.pl-rows .thumb img').length,
         imp: document.querySelectorAll('.imp-rows .trk').length,
@@ -465,7 +466,7 @@ const MOCK_EXPECT = {
     "cat-album-sheet": (i) => i.half.includes("up") && /Save to library/.test(i.halfText) && /Add to playlist/.test(i.halfText) && /Go to artist/.test(i.halfText),
     "cat-track-sheet": (i) => i.half.includes("up") && /Save to library/.test(i.halfText),
     "cat-track-save": (i) => /Saving from /.test(i.halfText) || !i.half.includes("up"),
-    "cat-album-save": (i) => /^Saving \d+ from /.test(i.save),
+    "cat-album-save": (i) => /^Saving \d+ from /.test(i.save) && /^\d+$/.test(i.navBadges),
     transfers: (i) => i.title.startsWith("Transfers") && i.xfers >= 11,
     gaps: (i) => i.title.startsWith("Your library") && i.gaplines >= 1,
     "gaps-open": (i) => i.gapCards >= 3,