mini player + dark glass: eight shapes run by the hidden main as the one brain, dissolving covers and accents, drag from anywhere, and the space between the panes turned to real acrylic - with the webview flags that keep rest frames honest

src/components/Icon.svelte

@@ -25,6 +25,10 @@
         volume: '<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M15.54 8.46a5 5 0 0 1 0 7.07"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14"/>',
         "volume-low": '<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M15.54 8.46a5 5 0 0 1 0 7.07"/>',
         "volume-mute": '<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><line x1="22" x2="16" y1="9" y2="15"/><line x1="16" x2="22" y1="9" y2="15"/>',
+        // The mini player's chrome (Lucide pin / shapes / maximize-2).
+        pin: '<path d="M12 17v5"/><path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"/>',
+        shapes: '<path d="M8.3 10a.7.7 0 0 1-.626-1.079L11.4 3a.7.7 0 0 1 1.198-.043L16.3 8.9a.7.7 0 0 1-.572 1.1Z"/><rect x="3" y="14" width="7" height="7" rx="1"/><circle cx="17.5" cy="17.5" r="3.5"/>',
+        restore: '<path d="M15 3h6v6"/><path d="M9 21H3v-6"/><path d="M21 3l-8 8"/><path d="M3 21l8-8"/>',
         music: '<path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/>',
         disc: '<circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="2"/>',
         folder: '<path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/>',

src/components/PlayerBar.svelte

@@ -36,6 +36,7 @@
         PENDING_ALPHA,
     } from "../lib/waveshape.js";
     import Icon from "./Icon.svelte";
+    import { shapeById, storedShapeId } from "../mini/shapes.js";
 
     const pct = $derived(
         player.duration ? Math.min(100, (player.position / player.duration) * 100) : 0,
@@ -265,6 +266,12 @@
         menuOpen = false;
         showNowPlaying(); // the queue lives in the panel; always reveal it
     }
+    function openMini() {
+        menuOpen = false;
+        // Open at the stored shape's size; the mini asserts it again on boot.
+        const s = shapeById(storedShapeId());
+        void api.miniOpen(s.w, s.h);
+    }
     function openLyrics() {
         menuOpen = false;
         // The lyrics PAGE (views/Lyrics.svelte) — the overlay it used to open
@@ -1324,8 +1331,8 @@
         <button role="menuitem" disabled={!currentItem} onclick={openLyrics}>
             <Icon name="lyrics" size={15} /> Lyrics
         </button>
-        <button role="menuitem" disabled title="Not built yet">
-            <Icon name="panel-right" size={15} /> Mini player <span class="soon">soon</span>
+        <button role="menuitem" onclick={openMini}>
+            <Icon name="panel-right" size={15} /> Mini player
         </button>
         <button role="menuitem" disabled title="Not built yet">
             <Icon name="volume" size={15} /> Output device <span class="soon">soon</span>