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

settings: each section heading carries the same icon as its index entry

Browse Source
This commit is contained in:
KeelrLeek committed 2026-09-08 16:28:18 -05:00
1 parent 48ae01c753
commit 67b7444f82
1 file changed
+15 -12
Download Patch File Download Diff File Expand all files Collapse all files
src/views/Settings.svelte
+15 -12
View File
@@ -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; }