sidebar and artist pipeline: one list in the rail, recents anchored to ids, and popular takes its own lane

src/components/TitleBar.svelte

@@ -189,24 +189,31 @@
         }
     }
 
+    // onResized fires on EVERY frame of a window drag, and answering each one
+    // with isMaximized() is an IPC round trip to the Rust side per frame — on
+    // the main thread, while the compositor is already busy re-rasterizing every
+    // backdrop-filter in the app at the new size. Maximized state cannot change
+    // part-way through a drag anyway: it only changes at the end of one, or on a
+    // discrete button press. So answer once, after the box settles.
+    let resizeSettle = null;
+    function syncMaximizedSoon() {
+        clearTimeout(resizeSettle);
+        resizeSettle = setTimeout(syncMaximized, 150);
+    }
+
     $effect(() => {
         let unlisten = null;
         syncMaximized();
         api.win
-            .onResized(syncMaximized)
+            .onResized(syncMaximizedSoon)
             .then((f) => (unlisten = f))
             .catch(() => {});
-        return () => unlisten?.();
+        return () => {
+            clearTimeout(resizeSettle);
+            unlisten?.();
+        };
     });
 
-    function statusClick() {
-        if (app.connection === "online") {
-            api.disconnect();
-            app.connection = "offline";
-        } else if (app.connection === "offline") {
-            app.showLogin = true;
-        }
-    }
 </script>
 
 <header class="titlebar" data-tauri-drag-region>
@@ -214,13 +221,8 @@
         <img class="logo" src="/logo.png" alt="" draggable="false" />
         <span class="name">SoulStream</span>
     </div>
-    <button
-        class="status {app.connection}"
-        onclick={statusClick}
-        title={app.connection === "online" ? "Click to disconnect" : "Click to connect"}
-    >
-        ● {app.connection === "online" ? app.username : app.connection}
-    </button>
+    <!-- The Soulseek status lives in the sidebar's glass bar now: it is an
+         account presence, and it belongs next to the library it feeds. -->
     <form class="bar-search" onsubmit={submitSearch} onfocusout={searchFocusOut}>
         <Icon name="search" size={13} />
         <input
@@ -336,8 +338,7 @@
     /* The visible strip above the panels is the 30px bar row plus the 8px
        grid gap; nudge the left cluster down so it centers optically in that
        full strip. The window controls stay flush with the top edge. */
-    .brand,
-    .status {
+    .brand {
         position: relative;
         top: 4px;
     }
@@ -361,26 +362,6 @@
         font-size: 13px;
     }
 
-    .status {
-        font-size: 12px;
-        color: var(--text-muted);
-        padding: 3px 9px;
-        border-radius: 10px;
-    }
-
-    .status:hover {
-        background: var(--bg-highlight);
-        color: var(--text-secondary);
-    }
-
-    .status.online {
-        color: var(--accent-hover);
-    }
-
-    .status.connecting {
-        color: #e8a33d;
-    }
-
     /* Centered on the window regardless of the left cluster's width; the
        same +4px optical nudge as the brand. Dragging still works on the
        uncovered bar either side. */