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.

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); }