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)}
{g}
{#each SECTIONS.filter((s) => s.group === g) as s (s.id)} - + {/each} {/each}
@@ -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; }