phenom/SoulStream
1
0 Fork 0
forked from Keelrleek/SoulStream
Code Pull Requests Activity

settings: the long lists use the app's own chooser — the sort menu's popover under a pill — instead of native selects the webview draws with the OS's text

Browse Source
This commit is contained in:
KeelrLeek committed 2026-09-08 15:43:13 -05:00
1 parent 7e291cfccc
commit 07ac3d3631
2 files changed
+167 -49
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/components/Chooser.svelte
+149
View File
@@ -0,0 +1,149 @@
<script>
// A chooser: one value out of a list, in the app's own menu vocabulary
// (Library's sort menu ← CatalogDiscography ← the player bar's popover)
// instead of a native <select>, which WebView2 draws with the OS's text
// rendering and looks wrong beside everything else. The trigger is a
// pill with the current label and a chevron; the popover is the same
// dark .menu as the sort menu, with the accent check on the current row.
//
// Portalled to body and positioned fixed: a settings card clips its
// overflow, and the pane is a containing block for anything fixed
// inside it. Closes on a choice, Escape, an outside press, a scroll, or
// a resize — a menu that drifts from its trigger is worse than none.
import Icon from "./Icon.svelte";
/** @type {{ options: [string, string][], value: string, onchange: (v: string) => void, disabled?: boolean, title?: string, width?: number }} */
let { options, value, onchange, disabled = false, title = "", width = 0 } = $props();
let triggerEl = $state(null);
let menuEl = $state(null);
let open = $state(false);
let pos = $state({ top: 0, left: 0, minWidth: 186 });
const label = $derived(options.find(([v]) => v === value)?.[1] ?? value ?? "");
function portal(node) {
document.body.appendChild(node);
return { destroy: () => node.remove() };
}
function place() {
const r = triggerEl.getBoundingClientRect();
const minWidth = Math.max(186, width || r.width);
const est = 12 + options.length * 30;
let top = r.bottom + 6;
if (top + est > window.innerHeight - 8) top = Math.max(8, r.top - 6 - est);
let left = Math.min(r.right - minWidth, window.innerWidth - minWidth - 8);
left = Math.max(8, left);
pos = { top, left, minWidth };
}
function toggle(e) {
e.stopPropagation();
if (disabled) return;
if (open) {
open = false;
return;
}
place();
open = true;
}
function pick(v) {
open = false;
if (v !== value) onchange(v);
}
$effect(() => {
if (!open) return;
const onDown = (e) => {
if (triggerEl?.contains(e.target) || menuEl?.contains(e.target)) return;
open = false;
};
const onKey = (e) => {
if (e.key === "Escape") open = false;
};
const close = () => (open = false);
document.addEventListener("pointerdown", onDown, true);
document.addEventListener("keydown", onKey);
document.addEventListener("scroll", close, true);
window.addEventListener("resize", close);
return () => {
document.removeEventListener("pointerdown", onDown, true);
document.removeEventListener("keydown", onKey);
document.removeEventListener("scroll", close, true);
window.removeEventListener("resize", close);
};
});
</script>
<button bind:this={triggerEl} class="chooser" class:on={open} onclick={toggle} {disabled} {title} aria-haspopup="menu" aria-expanded={open}>
<span class="lab">{label}</span>
<Icon name="chevron-down" size={13} />
</button>
{#if open}
<div class="menu" role="menu" use:portal bind:this={menuEl} style:top="{pos.top}px" style:left="{pos.left}px" style:min-width="{pos.minWidth}px">
{#each options as [v, l] (v)}
<button role="menuitemradio" aria-checked={v === value} class:cur={v === value} onclick={() => pick(v)}>
{l}
{#if v === value}<span class="mcheck"><Icon name="check" size={13} /></span>{/if}
</button>
{/each}
</div>
{/if}
<style>
.chooser {
display: inline-flex;
align-items: center;
gap: 8px;
height: 32px;
padding: 0 11px 0 14px;
border-radius: 99px;
background: var(--bg-highlight);
color: var(--text-primary);
font-size: 12.5px;
font-weight: 800;
white-space: nowrap;
max-width: 320px;
transition: background 0.15s;
}
.chooser .lab { overflow: hidden; text-overflow: ellipsis; }
.chooser :global(svg) { color: var(--text-secondary); flex: none; transition: transform 160ms ease; }
.chooser:hover:not(:disabled), .chooser.on { background: var(--bg-press); }
.chooser.on :global(svg) { transform: rotate(180deg); }
.chooser:disabled { opacity: 0.6; cursor: default; }
/* the sort menu's popover, verbatim — solid on purpose: a menu has to be
readable over whatever it lands on, dark glass included */
.menu {
position: fixed;
z-index: 1000;
display: flex;
flex-direction: column;
gap: 2px;
padding: 7px;
border-radius: 9px;
background: #0d0d0d;
border: 1px solid var(--border);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7);
font-family: var(--app-font);
}
.menu button {
display: flex;
align-items: center;
gap: 9px;
width: 100%;
padding: 6px 8px;
border-radius: 6px;
font-size: 12px;
font-weight: 600;
color: var(--text-secondary);
text-align: left;
white-space: nowrap;
}
.menu button:hover, .menu button.cur { color: var(--text-primary); }
.menu button:hover { background: var(--bg-highlight); }
.menu .mcheck { margin-left: auto; display: inline-flex; color: var(--accent-hover); }
</style>
src/views/Settings.svelte
+18 -49
View File
@@ -10,6 +10,7 @@
import { applyGlass } from "../lib/glass.js";
import * as api from "../lib/api.js";
import Icon from "../components/Icon.svelte";
import Chooser from "../components/Chooser.svelte";
import {
community,
refreshFreenet,
@@ -311,6 +312,19 @@
return d.toLocaleDateString([], { month: "short", day: "numeric" });
}
// ---- the long lists, as [value, label] for the chooser -------------------
const RETENTION = [["1", "1 day"], ["3", "3 days"], ["7", "1 week"], ["14", "2 weeks"], ["30", "1 month (recommended)"], ["90", "3 months"], ["forever", "Forever — save to library"]];
const CACHE = [["512", "512 MB"], ["1024", "1 GB"], ["2048", "2 GB (recommended)"], ["5120", "5 GB"], ["10240", "10 GB"], ["20480", "20 GB"], ["0", "Unlimited"]];
const MIN_QUALITY = [["any", "Any quality"], ["kbps192", "192 kbps and up"], ["kbps256", "256 kbps and up"], ["kbps320", "320 kbps and up"], ["lossless", "Lossless only"]];
const audioOutputs = $derived.by(() => {
if (!settings) return [];
const out = [["", "System default (recommended)"]];
const cur = settings.audio_output_device;
if (cur && !settings.audio_output_devices.includes(cur)) out.push([cur, `${cur} (unavailable)`]);
for (const d of settings.audio_output_devices) out.push([d, d]);
return out;
});
// ---- the index ---------------------------------------------------------
const SECTIONS = [
{ id: "account", title: "Account", group: "You" },
@@ -533,17 +547,7 @@
<div class="name">Audio output</div>
<div class="hint">System default follows Windows when headphones or speakers change.</div>
</div>
<div class="ctl">
<select class="menu" value={settings.audio_output_device ?? ""} disabled={saving} onchange={(e) => setAudioOutput(e.currentTarget.value)}>
<option value="">System default (recommended)</option>
{#if settings.audio_output_device && !settings.audio_output_devices.includes(settings.audio_output_device)}
<option value={settings.audio_output_device}>{settings.audio_output_device} (unavailable)</option>
{/if}
{#each settings.audio_output_devices as device (device)}
<option value={device}>{device}</option>
{/each}
</select>
</div>
<div class="ctl"><Chooser options={audioOutputs} value={settings.audio_output_device ?? ""} onchange={(v) => setAudioOutput(v)} disabled={saving} /></div>
</div>
<div class="row">
<div class="label">
@@ -611,34 +615,14 @@
<div class="name">Keep streamed tracks</div>
<div class="hint">Streamed songs stay in a private cache for instant replay — not in your library. Forever adds everything you stream to the library instead.</div>
</div>
<div class="ctl">
<select class="menu" value={settings.stream_keep_forever ? "forever" : String(settings.stream_retention_days)} disabled={saving} onchange={(e) => setStreamRetention(e.currentTarget.value)}>
<option value="1">1 day</option>
<option value="3">3 days</option>
<option value="7">1 week</option>
<option value="14">2 weeks</option>
<option value="30">1 month (recommended)</option>
<option value="90">3 months</option>
<option value="forever">Forever — save to library</option>
</select>
</div>
<div class="ctl"><Chooser options={RETENTION} value={settings.stream_keep_forever ? "forever" : String(settings.stream_retention_days)} onchange={(v) => setStreamRetention(v)} disabled={saving} /></div>
</div>
<div class="row">
<div class="label">
<div class="name">Cache size limit</div>
<div class="hint">Oldest streamed tracks are removed first once the cache passes this size. Saved and downloaded music is never touched.</div>
</div>
<div class="ctl">
<select class="menu" value={String(settings.stream_cache_max_mb)} disabled={saving} onchange={(e) => setStreamCacheMax(e.currentTarget.value)}>
<option value="512">512 MB</option>
<option value="1024">1 GB</option>
<option value="2048">2 GB (recommended)</option>
<option value="5120">5 GB</option>
<option value="10240">10 GB</option>
<option value="20480">20 GB</option>
<option value="0">Unlimited</option>
</select>
</div>
<div class="ctl"><Chooser options={CACHE} value={String(settings.stream_cache_max_mb)} onchange={(v) => setStreamCacheMax(v)} disabled={saving} /></div>
</div>
<div class="foot">Retention counts from the last time a track was played. Tracks you save stay in your library regardless.</div>
</div>
@@ -721,15 +705,7 @@
<div class="name">Minimum</div>
<div class="hint">Reject files below this floor. Lossy files must report a bitrate to qualify.</div>
</div>
<div class="ctl">
<select class="menu" value={sourcePrefsFor(mode.key).min} disabled={saving} onchange={(e) => setSourcePref(mode.key, "min", e.currentTarget.value)}>
<option value="any">Any quality</option>
<option value="kbps192">192 kbps and up</option>
<option value="kbps256">256 kbps and up</option>
<option value="kbps320">320 kbps and up</option>
<option value="lossless">Lossless only</option>
</select>
</div>
<div class="ctl"><Chooser options={MIN_QUALITY} value={sourcePrefsFor(mode.key).min} onchange={(v) => setSourcePref(mode.key, "min", v)} disabled={saving} /></div>
</div>
<div class="row">
<div class="label">
@@ -876,13 +852,6 @@
.seg button.on { background: var(--accent); color: #000; }
.seg button:hover:not(.on):not(:disabled) { color: #fff; }
.seg button:disabled { opacity: 0.6; cursor: default; }
/* a long list stays a real <select>, dressed as the menu pill */
.menu { appearance: none; -webkit-appearance: none; height: 32px; padding: 0 30px 0 14px; border-radius: 99px; border: none; background-color: var(--surf-hi); color: #fff; font-size: 12.5px; font-weight: 800; outline: none; cursor: pointer; max-width: 320px;
background-image: linear-gradient(45deg, transparent 50%, var(--text-secondary) 50%), linear-gradient(135deg, var(--text-secondary) 50%, transparent 50%);
background-position: calc(100% - 16px) 55%, calc(100% - 11px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.menu:hover { background-color: var(--bg-press); }
.menu:disabled { opacity: 0.6; cursor: default; }
.menu option { background: var(--bg-elevated); color: var(--text-primary); font-weight: 600; }
.ax-ghost { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: 99px; font-size: 12px; font-weight: 800; border: 1px solid rgba(255, 255, 255, 0.28); transition: 0.18s; white-space: nowrap; }
.ax-ghost:hover:not(:disabled) { border-color: #fff; background: rgba(255, 255, 255, 0.08); }
.ax-ghost.sm { height: 28px; padding: 0 11px; font-size: 11px; }