From 4e52f6b494974bf667e58e60353be646195b9726 Mon Sep 17 00:00:00 2001
From: Caleb Allen <caleballen1276@gmail.com>
Date: Mon, 30 Mar 2026 15:58:10 -0400
Subject: [PATCH] =?UTF-8?q?fix:=20icons=20outside=20the=20pill=20=E2=80=94?=
 =?UTF-8?q?=20globe=20left,=20track=20center,=20hard-drive=20right?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Moved icons to sit outside the toggle track on either side.
Both icons are always fully visible. The active side's icon
gets the accent color, the inactive side dims to secondary.
Track is a minimal 36×20px pill with a sliding thumb.
- Off: globe bright, thumb left, hard-drive dimmed
- On: globe dimmed, thumb right + yellow track, hard-drive accent
---
 frontend/index.css  | 56 ++++++++++++++++++++-------------------------
 frontend/index.html |  4 +++-
 2 files changed, 28 insertions(+), 32 deletions(-)

diff --git a/frontend/index.css b/frontend/index.css
index 8c76dd8..39e0f2d 100644
--- a/frontend/index.css
+++ b/frontend/index.css
@@ -41,71 +41,65 @@ p {
 }
 
 .mode-toggle {
-    position: relative;
     display: flex;
     align-items: center;
-    width: 52px;
-    height: 26px;
-    border-radius: 13px;
-    background: var(--yj-bg-overlay, rgba(255, 255, 255, 0.1));
+    gap: 6px;
     cursor: pointer;
     flex-shrink: 0;
+}
+
+.mode-toggle-track {
+    position: relative;
+    width: 36px;
+    height: 20px;
+    border-radius: 10px;
+    background: var(--yj-bg-overlay, rgba(255, 255, 255, 0.15));
     transition: background 0.2s ease;
 }
 
-.mode-toggle:hover {
-    background: rgba(255, 255, 255, 0.15);
+.mode-toggle:hover .mode-toggle-track {
+    background: rgba(255, 255, 255, 0.22);
 }
 
 .mode-toggle-thumb {
     position: absolute;
     top: 2px;
     left: 2px;
-    width: 22px;
-    height: 22px;
+    width: 16px;
+    height: 16px;
     border-radius: 50%;
     background: var(--yj-text-primary, #fff);
     transition: left 0.2s ease, background 0.2s ease;
-    z-index: 1;
 }
 
-.mode-toggle.active .mode-toggle-thumb {
-    left: 28px;
-    background: #000;
-}
-
-.mode-toggle.active {
+.mode-toggle.active .mode-toggle-track {
     background: var(--yj-accent, #ffd43b);
 }
 
+.mode-toggle.active .mode-toggle-thumb {
+    left: 18px;
+    background: #000;
+}
+
 .mode-icon {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    font-size: 12px;
-    z-index: 2;
-    transition: opacity 0.2s ease;
-    pointer-events: none;
+    font-size: 14px;
+    transition: color 0.2s ease, opacity 0.2s ease;
 }
 
 .mode-icon-globe {
-    left: 7px;
-    color: #000;
-    opacity: 0;
+    color: var(--yj-text-primary, #fff);
 }
 
 .mode-icon-local {
-    right: 7px;
-    color: var(--yj-text-secondary, #b3b3b3);
-    opacity: 1;
+    color: var(--yj-text-secondary, #888);
 }
 
 .mode-toggle.active .mode-icon-globe {
-    opacity: 1;
+    color: var(--yj-text-secondary, #888);
 }
 
 .mode-toggle.active .mode-icon-local {
-    opacity: 0;
+    color: var(--yj-accent, #ffd43b);
 }
 
 ul {
diff --git a/frontend/index.html b/frontend/index.html
index 642e161..c494472 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -17,7 +17,9 @@
         </hgroup>
         <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>
+            <div class="mode-toggle-track">
+                <div class="mode-toggle-thumb"></div>
+            </div>
             <wa-icon name="hard-drive" class="mode-icon mode-icon-local"></wa-icon>
         </div>
         <library-filter></library-filter>