feat(help): rewrite Help page — trimmed Q/A, 10 sections, live search (#485)

* feat(help): rewrite English Q/A entries — trim, consolidate, refresh

The Help page had grown to ~50 entries over time, with several that
the UI itself answers (double-click to play, click the cover for
fullscreen, click the repeat button to cycle, …) and other groups
that were better folded into a single answer (rating + Skip-to-1★,
Internet Radio basics + supported formats, Device Sync overview +
filename template + cross-platform behaviour, …).

This pass:
- drops obviously-redundant entries (q4, q7, q8, q11, q22, q24, q25,
  and the trivial Settings → X pointers q12, q13, q15, q32, q42, q43)
- consolidates the natural groupings (q5+q31, q37+q38+q39, q53+q54+q55,
  q34+q35+q47, q26+q27+q28, q12+q41, q56+q57)
- adds entries for features that did not exist yet when the previous
  Q/A list was written: Orbit (Listen Together), Magic Strings
  sharing, LUFS Smart Loudness Normalization, Mini Player + Floating
  Player Bar, Smart Playlists, Track Preview, Search and Advanced
  Search, Statistics, Tracks library hub, Genre tag-cloud browser,
  Discord Rich Presence, Bandsintown tour dates, Multi-select +
  Shift-click range selection, Sidebar / Home / Artist Page
  customization, Sleep Timer, Open Source Licenses

Result: 45 focused entries across 10 sections (Getting Started /
Playback & Queue / Audio Tools / Library & Discovery / Lyrics /
Sharing & Social / Personalization / Power User / Offline & Sync /
Integrations & Troubleshooting), each one answering something the UI
does not already answer at a glance.

* feat(help): restructure into 10 sections with live search

Page is now organised into ten focused sections (Getting Started,
Playback & Queue, Audio Tools, Library & Discovery, Lyrics, Sharing
& Social, Personalization, Power User, Offline & Sync, Integrations
& Troubleshooting) each rendered as its own column-friendly accordion
group with a Lucide icon.

A search input lives in the page header. Typing filters every Q+A
pair across all sections by case-insensitive substring; sections that
end up empty are hidden, matched items are auto-expanded so the user
sees the answer without having to click each result, and a "no
results" empty state appears when the query matches nothing. Clearing
the input restores the manual accordion behaviour. An × button next
to the input clears the query in one click.

CSS uses dedicated `.help-search`, `.help-search-icon`,
`.help-search-input`, `.help-search-clear` rules instead of leaning
on the global `.input` class — the latter brought its own focus-ring
styles that doubled with the wrapper border. Focus state highlights
the wrapper border to `--accent` via `:focus-within`.

* i18n(help): translate the new Help page to 7 locales

Updates de, fr, nl, zh, nb, ru, es to match the new English Q/A
structure (45 entries across 10 sections, plus the live-search
labels: title, searchPlaceholder, noResults).

DE / FR / NL / NB / ES were translated directly. RU and ZH are
structurally correct but written at machine-translation quality;
both could use a pass from the original locale maintainers
(@cucadmuh for RU, @jiezhuo for ZH) — none of the wording is
load-bearing for the i18n keys, so the page renders correctly today
and refinements can land as follow-up touch-ups without coupling.

* docs: changelog + contributors for PR #485

Adds the v1.46.0 "Changed" entry and the Psychotoxical contributors
line for the Help page rewrite.
This commit is contained in:
Frank Stellmacher
2026-05-06 19:28:47 +02:00
committed by GitHub
parent 43d75e744b
commit e215694301
12 changed files with 1049 additions and 1081 deletions
+54
View File
@@ -3848,6 +3848,60 @@ html[data-track-previews-randommix="off"] [data-preview-loc="randomMix"] .pl
}
}
.help-search {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
background: var(--bg-card);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
width: 280px;
max-width: 100%;
transition: border-color var(--transition-fast);
}
.help-search:focus-within {
border-color: var(--accent);
}
.help-search-icon {
color: var(--text-muted);
flex-shrink: 0;
}
.help-search-input {
flex: 1;
min-width: 0;
background: transparent;
border: none;
outline: none;
padding: 2px 0;
color: var(--text-primary);
font-size: 0.9rem;
font-family: inherit;
}
.help-search-input::placeholder {
color: var(--text-muted);
}
.help-search-clear {
background: transparent;
border: none;
color: var(--text-muted);
cursor: pointer;
padding: 0;
display: inline-flex;
align-items: center;
flex-shrink: 0;
transition: color var(--transition-fast);
}
.help-search-clear:hover {
color: var(--text-primary);
}
.help-list {
display: flex;
flex-direction: column;