From 67b7444f8256daabe5af0787966c9054b091cef8 Mon Sep 17 00:00:00 2001
From: KeelrLeek <156356974+KeelrLeek@users.noreply.github.com>
Date: Tue, 8 Sep 2026 16:28:18 -0500
Subject: [PATCH] settings: each section heading carries the same icon as its
 index entry

---
 src/views/Settings.svelte | 27 +++++++++++++++------------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/src/views/Settings.svelte b/src/views/Settings.svelte
index 76b0107..88dcdbe 100644
--- a/src/views/Settings.svelte
+++ b/src/views/Settings.svelte
@@ -340,6 +340,7 @@
         { id: "artistart", title: "Artist artwork", group: "Artwork", icon: "image" },
     ];
     const GROUPS = ["You", "Look & sound", "Music", "Artwork"];
+    const iconOf = (id) => SECTIONS.find((x) => x.id === id)?.icon ?? "settings";
     let active = $state("account");
     let pageEl = $state(null);
 
@@ -406,7 +407,7 @@
             <div class="body">
                 <!-- ── Account ─────────────────────────────────────────── -->
                 <section id="set-account" class="sec">
-                    <div class="sec-head"><h2>Account</h2><span class="blurb">Your Soulseek login and where the password lives.</span></div>
+                    <div class="sec-head"><span class="hic"><Icon name={iconOf("account")} size={14} /></span><h2>Account</h2><span class="blurb">Your Soulseek login and where the password lives.</span></div>
                     <div class="card">
                         <div class="row">
                             <div class="label">
@@ -427,7 +428,7 @@
 
                 <!-- ── Networks (from Community → You) ─────────────────── -->
                 <section id="set-networks" class="sec">
-                    <div class="sec-head"><h2>Networks</h2><span class="blurb">The two networks this app speaks, and whether they are tied together.</span></div>
+                    <div class="sec-head"><span class="hic"><Icon name={iconOf("networks")} size={14} /></span><h2>Networks</h2><span class="blurb">The two networks this app speaks, and whether they are tied together.</span></div>
                     <div class="card">
                         <div class="row">
                             <div class="label">
@@ -526,7 +527,7 @@
 
                 <!-- ── Appearance ──────────────────────────────────────── -->
                 <section id="set-appearance" class="sec">
-                    <div class="sec-head"><h2>Appearance</h2><span class="blurb">How the window is drawn.</span></div>
+                    <div class="sec-head"><span class="hic"><Icon name={iconOf("appearance")} size={14} /></span><h2>Appearance</h2><span class="blurb">How the window is drawn.</span></div>
                     <div class="card">
                         <div class="row">
                             <div class="label">
@@ -540,7 +541,7 @@
 
                 <!-- ── Playback ────────────────────────────────────────── -->
                 <section id="set-playback" class="sec">
-                    <div class="sec-head"><h2>Playback</h2><span class="blurb">Output and loudness.</span></div>
+                    <div class="sec-head"><span class="hic"><Icon name={iconOf("playback")} size={14} /></span><h2>Playback</h2><span class="blurb">Output and loudness.</span></div>
                     <div class="card">
                         <div class="row">
                             <div class="label">
@@ -562,7 +563,7 @@
 
                 <!-- ── Lyrics ──────────────────────────────────────────── -->
                 <section id="set-lyrics" class="sec">
-                    <div class="sec-head"><h2>Lyrics</h2><span class="blurb">Line sync is always on; word fill is the experiment.</span></div>
+                    <div class="sec-head"><span class="hic"><Icon name={iconOf("lyrics")} size={14} /></span><h2>Lyrics</h2><span class="blurb">Line sync is always on; word fill is the experiment.</span></div>
                     <div class="card">
                         <div class="row">
                             <div class="label">
@@ -608,7 +609,7 @@
 
                 <!-- ── Streaming ───────────────────────────────────────── -->
                 <section id="set-streaming" class="sec">
-                    <div class="sec-head"><h2>Streaming</h2><span class="blurb">What happens to a track after you streamed it.</span></div>
+                    <div class="sec-head"><span class="hic"><Icon name={iconOf("streaming")} size={14} /></span><h2>Streaming</h2><span class="blurb">What happens to a track after you streamed it.</span></div>
                     <div class="card">
                         <div class="row">
                             <div class="label">
@@ -630,7 +631,7 @@
 
                 <!-- ── Library & downloads ─────────────────────────────── -->
                 <section id="set-library" class="sec">
-                    <div class="sec-head"><h2>Library & downloads</h2><span class="blurb">Where music lands and how it is filed.</span></div>
+                    <div class="sec-head"><span class="hic"><Icon name={iconOf("library")} size={14} /></span><h2>Library & downloads</h2><span class="blurb">Where music lands and how it is filed.</span></div>
                     <div class="card">
                         <div class="row">
                             <div class="label">
@@ -654,7 +655,7 @@
 
                 <!-- ── Sharing ─────────────────────────────────────────── -->
                 <section id="set-sharing" class="sec">
-                    <div class="sec-head"><h2>Sharing</h2><span class="blurb">Sharing keeps you a good citizen — leechers get banned.</span></div>
+                    <div class="sec-head"><span class="hic"><Icon name={iconOf("sharing")} size={14} /></span><h2>Sharing</h2><span class="blurb">Sharing keeps you a good citizen — leechers get banned.</span></div>
                     <div class="card">
                         <div class="row">
                             <div class="label">
@@ -688,7 +689,7 @@
 
                 <!-- ── Source quality ──────────────────────────────────── -->
                 <section id="set-quality" class="sec">
-                    <div class="sec-head"><h2>Source quality</h2><span class="blurb">Independent preferences for streaming and downloading.</span></div>
+                    <div class="sec-head"><span class="hic"><Icon name={iconOf("quality")} size={14} /></span><h2>Source quality</h2><span class="blurb">Independent preferences for streaming and downloading.</span></div>
                     <div class="card">
                         <div class="foot top">The ceiling and floor bound which peer files qualify; priority decides whether the resolver picks the best format or the fastest transfer among them. Fastest estimates arrival from file size ÷ peer speed plus queue wait — a large FLAC from a fast peer can win.</div>
                         {#each [{ key: "stream", label: "Streaming" }, { key: "download", label: "Downloads" }] as mode (mode.key)}
@@ -720,7 +721,7 @@
 
                 <!-- ── Album artwork ───────────────────────────────────── -->
                 <section id="set-albumart" class="sec">
-                    <div class="sec-head"><h2>Album artwork</h2><span class="blurb">Covers come from Deezer, Apple and the Cover Art Archive; the catalog's wins, at the highest resolution any source serves.</span></div>
+                    <div class="sec-head"><span class="hic"><Icon name={iconOf("albumart")} size={14} /></span><h2>Album artwork</h2><span class="blurb">Covers come from Deezer, Apple and the Cover Art Archive; the catalog's wins, at the highest resolution any source serves.</span></div>
                     <div class="card">
                         <div class="row">
                             <div class="label">
@@ -756,7 +757,7 @@
 
                 <!-- ── Artist artwork ──────────────────────────────────── -->
                 <section id="set-artistart" class="sec">
-                    <div class="sec-head"><h2>Artist artwork</h2><span class="blurb">Portraits and the hero renderer.</span></div>
+                    <div class="sec-head"><span class="hic"><Icon name={iconOf("artistart")} size={14} /></span><h2>Artist artwork</h2><span class="blurb">Portraits and the hero renderer.</span></div>
                     <div class="card">
                         <div class="row">
                             <div class="label">
@@ -811,7 +812,9 @@
 
     /* ── sections and rows ── */
     .sec { margin-bottom: 26px; scroll-margin-top: 12px; }
-    .sec-head { display: flex; align-items: baseline; gap: 10px; margin: 0 0 8px; flex-wrap: wrap; }
+    .sec-head { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; flex-wrap: wrap; }
+    .sec-head .hic { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; flex: none; background: rgba(255, 255, 255, 0.08); color: var(--text-secondary); }
+    .sec-head .hic + h2 { margin-left: -2px; }
     .sec-head h2 { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: -0.01em; }
     .sec-head .blurb { font-size: 12px; color: var(--text-muted); }
     .card { background: var(--surf); border: 1px solid var(--hair); border-radius: 12px; overflow: hidden; }