From d5a427d885bf22a8e3de1070c6544d021571f026 Mon Sep 17 00:00:00 2001
From: Caleb Allen <caleballen1276@gmail.com>
Date: Mon, 30 Mar 2026 15:51:19 -0400
Subject: [PATCH] =?UTF-8?q?feat:=20pill=20toggle=20for=20Library=20Only=20?=
 =?UTF-8?q?=E2=80=94=20globe=20=E2=86=94=20hard-drive=20icons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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  | 66 ++++++++++++++++++++++++++++++++-------------
 frontend/index.html |  9 ++++---
 2 files changed, 53 insertions(+), 22 deletions(-)

diff --git a/frontend/index.css b/frontend/index.css
index b4b5a71..fa3d3f6 100644
--- a/frontend/index.css
+++ b/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;
-    padding: 6px 12px;
-    border: 1px solid var(--yj-border-subtle, rgba(255, 255, 255, 0.12));
-    border-radius: 6px;
-    background: transparent;
-    color: var(--yj-text-secondary, #b3b3b3);
-    font-size: 12px;
+    width: 56px;
+    height: 28px;
+    border-radius: 14px;
+    background: var(--yj-bg-overlay, rgba(255, 255, 255, 0.1));
     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 {
-    background: var(--yj-bg-overlay, rgba(255, 255, 255, 0.06));
+.mode-toggle:hover {
+    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 {
-    background: var(--yj-accent, #ffd43b);
-    color: #000;
-    border-color: var(--yj-accent, #ffd43b);
+.mode-icon-local {
+    color: var(--yj-text-secondary, #b3b3b3);
 }
 
-.library-only-toggle wa-icon {
-    font-size: 14px;
+.mode-toggle.active .mode-icon-globe {
+    color: rgba(0, 0, 0, 0.3);
+}
+
+.mode-toggle.active .mode-icon-local {
+    color: #000;
 }
 
 ul {
diff --git a/frontend/index.html b/frontend/index.html
index 5944bd7..642e161 100644
--- a/frontend/index.html
+++ b/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">
-            <wa-icon name="book"></wa-icon>
-            <span>Library Only</span>
-        </button>
+        <div id="library-only-toggle" class="mode-toggle" title="Toggle Library Only mode">
+            <wa-icon name="globe" class="mode-icon mode-icon-globe"></wa-icon>
+            <div class="mode-toggle-thumb"></div>
+            <wa-icon name="hard-drive" class="mode-icon mode-icon-local"></wa-icon>
+        </div>
         <library-filter></library-filter>
         <search-bar></search-bar>
     </header>