From a0528c6d3ffca5f3980f7048947b601d41baa2fb Mon Sep 17 00:00:00 2001
From: KeelrLeek <156356974+KeelrLeek@users.noreply.github.com>
Date: Tue, 8 Sep 2026 15:45:42 -0500
Subject: [PATCH] settings: each index entry carries its section's icon, lit in
 the accent when it is the one on screen

---
 src/views/Settings.svelte | 29 ++++++++++++++++-------------
 1 file changed, 16 insertions(+), 13 deletions(-)

diff --git a/src/views/Settings.svelte b/src/views/Settings.svelte
index e04efe8..65e28a5 100644
--- a/src/views/Settings.svelte
+++ b/src/views/Settings.svelte
@@ -327,17 +327,17 @@
 
     // ---- the index ---------------------------------------------------------
     const SECTIONS = [
-        { id: "account", title: "Account", group: "You" },
-        { id: "networks", title: "Networks", group: "You" },
-        { id: "appearance", title: "Appearance", group: "Look & sound" },
-        { id: "playback", title: "Playback", group: "Look & sound" },
-        { id: "lyrics", title: "Lyrics", group: "Look & sound" },
-        { id: "streaming", title: "Streaming", group: "Music" },
-        { id: "library", title: "Library & downloads", group: "Music" },
-        { id: "sharing", title: "Sharing", group: "Music" },
-        { id: "quality", title: "Source quality", group: "Music" },
-        { id: "albumart", title: "Album artwork", group: "Artwork" },
-        { id: "artistart", title: "Artist artwork", group: "Artwork" },
+        { id: "account", title: "Account", group: "You", icon: "users" },
+        { id: "networks", title: "Networks", group: "You", icon: "globe" },
+        { id: "appearance", title: "Appearance", group: "Look & sound", icon: "display" },
+        { id: "playback", title: "Playback", group: "Look & sound", icon: "volume" },
+        { id: "lyrics", title: "Lyrics", group: "Look & sound", icon: "lyrics" },
+        { id: "streaming", title: "Streaming", group: "Music", icon: "music" },
+        { id: "library", title: "Library & downloads", group: "Music", icon: "library" },
+        { id: "sharing", title: "Sharing", group: "Music", icon: "export" },
+        { id: "quality", title: "Source quality", group: "Music", icon: "layers" },
+        { id: "albumart", title: "Album artwork", group: "Artwork", icon: "disc" },
+        { id: "artistart", title: "Artist artwork", group: "Artwork", icon: "image" },
     ];
     const GROUPS = ["You", "Look & sound", "Music", "Artwork"];
     let active = $state("account");
@@ -395,7 +395,7 @@
                 {#each GROUPS as g (g)}
                     <div class="grp">{g}</div>
                     {#each SECTIONS.filter((s) => s.group === g) as s (s.id)}
-                        <button class="jump" class:on={active === s.id} onclick={() => jump(s.id)}>{s.title}</button>
+                        <button class="jump" class:on={active === s.id} onclick={() => jump(s.id)}><span class="ic"><Icon name={s.icon} size={13} /></span>{s.title}</button>
                     {/each}
                 {/each}
                 <div class="state" aria-live="polite">
@@ -798,9 +798,12 @@
     .index { position: sticky; top: 12px; display: flex; flex-direction: column; }
     .index .h { padding: 0 10px 10px; font-size: 22px; font-weight: 800; letter-spacing: -0.01em; }
     .index .grp { padding: 10px 10px 4px; font-size: 10px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
-    .jump { display: block; width: 100%; padding: 6px 10px; border-radius: 8px; font-size: 12.5px; font-weight: 700; color: var(--text-secondary); text-align: left; }
+    .jump { display: flex; align-items: center; gap: 9px; width: 100%; padding: 5px 10px 5px 8px; border-radius: 8px; font-size: 12.5px; font-weight: 700; color: var(--text-secondary); text-align: left; }
     .jump:hover { color: #fff; background: rgba(255, 255, 255, 0.05); }
     .jump.on { color: #fff; background: var(--surf-hi); }
+    .jump .ic { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; flex: none; background: rgba(255, 255, 255, 0.08); color: var(--text-secondary); transition: background 0.15s, color 0.15s; }
+    .jump:hover .ic { color: #fff; }
+    .jump.on .ic { background: var(--accent); color: #000; }
     .index .state { margin: 14px 10px 0; min-height: 26px; }
     .pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 800; background: var(--surf-hi); color: var(--text-secondary); }
     .pill.ok { background: color-mix(in srgb, var(--ok) 14%, transparent); color: #5ee89a; }