feat: pill toggle for Library Only — globe ↔ hard-drive icons

Replaced the text button with a sliding pill toggle:
- Left: globe icon (online/explore mode)
- Right: hard-drive icon (library-only mode)
- Thumb slides left↔right with CSS transition
- Inactive: dark background, white thumb on left (globe side)
- Active: accent yellow background, thumb on right (local side)
- Icons dim/brighten based on active state

frontend/index.css

@@ -40,35 +40,65 @@ p {
     flex: 0 1 320px;
 }
 
-.library-only-toggle {
+.mode-toggle {
+    position: relative;
     display: flex;
     align-items: center;
-    gap: 6px;
+    width: 56px;
-    padding: 6px 12px;
+    height: 28px;
-    border: 1px solid var(--yj-border-subtle, rgba(255, 255, 255, 0.12));
+    border-radius: 14px;
-    border-radius: 6px;
+    background: var(--yj-bg-overlay, rgba(255, 255, 255, 0.1));
-    background: transparent;
-    color: var(--yj-text-secondary, #b3b3b3);
-    font-size: 12px;
     cursor: pointer;
-    transition: all 0.15s ease;
-    white-space: nowrap;
     flex-shrink: 0;
+    padding: 0 4px;
+    justify-content: space-between;
+    transition: background 0.2s ease;
 }
 
-.library-only-toggle:hover {
+.mode-toggle:hover {
-    background: var(--yj-bg-overlay, rgba(255, 255, 255, 0.06));
+    background: rgba(255, 255, 255, 0.15);
+}
+
+.mode-toggle-thumb {
+    position: absolute;
+    top: 3px;
+    left: 3px;
+    width: 22px;
+    height: 22px;
+    border-radius: 50%;
+    background: var(--yj-text-primary, #fff);
+    transition: left 0.2s ease;
+    z-index: 1;
+}
+
+.mode-toggle.active .mode-toggle-thumb {
+    left: 31px;
+}
+
+.mode-toggle.active {
+    background: var(--yj-accent, #ffd43b);
+}
+
+.mode-icon {
+    font-size: 13px;
+    z-index: 2;
+    transition: color 0.2s ease;
+}
+
+.mode-icon-globe {
     color: var(--yj-text-primary, #fff);
 }
 
-.library-only-toggle.active {
+.mode-icon-local {
-    background: var(--yj-accent, #ffd43b);
+    color: var(--yj-text-secondary, #b3b3b3);
-    color: #000;
-    border-color: var(--yj-accent, #ffd43b);
 }
 
-.library-only-toggle wa-icon {
+.mode-toggle.active .mode-icon-globe {
-    font-size: 14px;
+    color: rgba(0, 0, 0, 0.3);
+}
+
+.mode-toggle.active .mode-icon-local {
+    color: #000;
 }
 
 ul {

frontend/index.html

@@ -15,10 +15,11 @@
             <h1 class="title">YellowJacket</h1>
             <h3 class="subtitle">Music how it was meant to bee.</h3>
         </hgroup>
-        <button id="library-only-toggle" class="library-only-toggle" title="Library Only mode">
+        <div id="library-only-toggle" class="mode-toggle" title="Toggle Library Only mode">
-            <wa-icon name="book"></wa-icon>
+            <wa-icon name="globe" class="mode-icon mode-icon-globe"></wa-icon>
-            <span>Library Only</span>
+            <div class="mode-toggle-thumb"></div>
-        </button>
+            <wa-icon name="hard-drive" class="mode-icon mode-icon-local"></wa-icon>
+        </div>
         <library-filter></library-filter>
         <search-bar></search-bar>
     </header>