Jonathan/Lyra
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): settings helptext behind a "?" popup instead of inline paragraphs

Browse Source 
The Qobuz/Monitor/Discovery help I just added was always-visible and verbose.
Replace each with a compact "?" button (new reusable HelpButton) that opens the
same content in a popup (reuses the Modal), keeping the settings tabs clean.

web tsc + build clean.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jonathan
2026-07-14 12:21:17 +02:00
parent 24d4ba6098
commit 1a612f1808
3 changed files with 72 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/app/settings/settings-form.tsx
+36 -30
View File
@@ -2,6 +2,7 @@
import { useEffect, useState } from "react";
import { PageHead } from "../_ui/page-head";
import { HelpButton } from "../_ui/help-button";
type Loaded = {
qobuzEmail: string;
@@ -192,12 +193,14 @@ export function SettingsForm() {
{tab === "Qobuz" ? (
<form className="settings-section" onSubmit={saveCredentials}>
<p className="help">
Lyra signs in to Qobuz with a <b>user ID + auth token</b> — the download engine
treats these as more reliable than email/password, which Qobuz often rejects. Find
them in your logged-in Qobuz web session (bundle/app secret + user auth token).
</p>
<div className="subhead">Auth token</div>
<div className="subhead">
Auth token
<HelpButton title="Qobuz authentication">
Lyra signs in to Qobuz with a <b>user ID + auth token</b> — the download engine
treats these as more reliable than email/password, which Qobuz often rejects. Find
them in your logged-in Qobuz web session (bundle/app secret + user auth token).
</HelpButton>
</div>
<div className="field-grid">
<label className="field">
<span>Qobuz user ID</span>
@@ -339,20 +342,22 @@ export function SettingsForm() {
/>
Automatic monitoring (grab &amp; upgrade)
</label>
<HelpButton title="Monitoring">
When on, the worker periodically checks your followed artists: it <b>grabs new
releases</b> as they appear and <b>upgrades</b> owned albums that fall below the
quality cutoff.
<br />
<br />
<b>Quality cutoff</b> — the minimum acceptable quality class: <code>1</code> = lossy,{" "}
<code>2</code> = CD-lossless (FLAC 16/44.1), <code>3</code> = hi-res. An owned album is
kept as-is when it’s ≥ the cutoff; otherwise a better copy is chased. Range 1–3.
<br />
<br />
<b>Poll interval</b> — hours between new-release checks. <b>Retry interval</b> — hours
before re-attempting a release that couldn’t be found yet. <b>Upgrade window</b> — how
many days after first acquiring an album to keep looking for a better copy.
</HelpButton>
</div>
<p className="help">
When on, the worker periodically checks your followed artists: it <b>grabs new
releases</b> as they appear and <b>upgrades</b> owned albums that fall below the
quality cutoff.
<br />
<b>Quality cutoff</b> — the minimum acceptable quality class: <code>1</code> = lossy,{" "}
<code>2</code> = CD-lossless (FLAC 16/44.1), <code>3</code> = hi-res. An owned album is
kept as-is when it’s ≥ the cutoff; otherwise a better copy is chased. Range 1–3.
<br />
<b>Poll interval</b> — hours between new-release checks. <b>Retry interval</b> — hours
before re-attempting a release that couldn’t be found yet. <b>Upgrade window</b> — how
many days after first acquiring an album to keep looking for a better copy.
</p>
<div className="field-grid">
{MONITOR_FIELDS.map(([key, label]) => (
<label key={key} className="field">
@@ -379,18 +384,19 @@ export function SettingsForm() {
/>
Scheduled discovery sweep
</label>
<HelpButton title="Discovery">
When on, the worker periodically sweeps your followed artists for similar artists +
their new releases (via ListenBrainz and, if configured, Last.fm) and lists them on{" "}
<b>Discover</b>. Nothing is downloaded automatically — you Follow/Want from there.
<br />
<br />
<b>Interval</b> — hours between sweeps. <b>Seeds per chunk</b> — how many followed
artists are processed per worker cycle (keeps job-claiming responsive on big rosters).
<b> Similar per seed</b> — candidates pulled per artist. <b>Albums per artist</b> —
releases surfaced per suggested artist. <b>Min score</b> — drops weak suggestions.{" "}
<b>ListenBrainz base URL</b> — leave blank for the default endpoint.
</HelpButton>
</div>
<p className="help">
When on, the worker periodically sweeps your followed artists for similar artists +
their new releases (via ListenBrainz and, if configured, Last.fm) and lists them on{" "}
<b>Discover</b>. Nothing is downloaded automatically — you Follow/Want from there.
<br />
<b>Interval</b> — hours between sweeps. <b>Seeds per chunk</b> — how many followed
artists are processed per worker cycle (keeps job-claiming responsive on big rosters).
<b> Similar per seed</b> — candidates pulled per artist. <b>Albums per artist</b> —
releases surfaced per suggested artist. <b>Min score</b> — drops weak suggestions.{" "}
<b>ListenBrainz base URL</b> — leave blank for the default endpoint.
</p>
<div className="field-grid">
{DISCOVERY_FIELDS.map(([key, label]) => (
<label key={key} className="field">