mirror of
https://github.com/kilyabin/psysonic.git
synced 2026-07-22 14:35:41 +00:00
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:
committed by
GitHub
parent
43d75e744b
commit
e215694301
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user