Keelrleek/SoulStream
2
1 Fork 1
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

settings: each index entry carries its section's icon, lit in the accent when it is the one on screen

Browse Source
This commit is contained in:
KeelrLeek committed 2026-09-08 15:45:42 -05:00
1 parent 07ac3d3631
commit a0528c6d3f
1 file changed
+16 -13
Download Patch File Download Diff File Expand all files Collapse all files
src/views/Settings.svelte
+16 -13
View File
@@ -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; }