mirror of
https://github.com/Psychotoxical/psysonic.git
synced 2026-07-21 23:05:46 +00:00
cucadmuh
ae9be74719
* feat(settings): redesign server cards with identity line and capability badges Compact two-line server headers (entry name + user@host), HTTPS lock, and a clickable version info tooltip. Navidrome ≥0.62 shows a green AudioMuse inline badge; older Navidrome keeps the manual toggle row. Adds click-pinned tooltips via data-tooltip-click on TooltipPortal. * feat(settings): unify use/active slot and move delete into edit form Merge Active badge and Use button into one rightmost action; Active uses green styling. Reorder actions to edit, test, use/active. Remove the card delete icon — deletion lives in the server edit form footer. * docs: note compact server cards in CHANGELOG and credits (PR #1054) * fix(credits): move PR #1054 server cards line to cucadmuh block Was appended to Psychotoxical's contributions array by mistake; CHANGELOG already credited cucadmuh (gh pr view author).
27 lines
1.0 KiB
TypeScript
27 lines
1.0 KiB
TypeScript
/**
|
|
* Pairs a tooltip with its accessible label so the two never drift apart.
|
|
*
|
|
* Spread onto any element that should show a hover tooltip rendered by
|
|
* `TooltipPortal`. The same already-translated string becomes both the
|
|
* `data-tooltip` (visual hover label) and the `aria-label` (screen readers).
|
|
*
|
|
* <button {...tooltipAttrs(t('albums.sortTooltip'))} onClick={…}>
|
|
*
|
|
* `pos: 'bottom'` is a viewport-edge escape hatch only (forces the tooltip
|
|
* below the anchor instead of the default auto-flip) — do not use it on
|
|
* ordinary toolbar buttons. `wrap` enables multi-line wrapping.
|
|
* `click` shows the tooltip immediately on click (for touch / explicit open).
|
|
*/
|
|
export function tooltipAttrs(
|
|
text: string,
|
|
opts?: { pos?: 'bottom'; wrap?: boolean; click?: boolean },
|
|
): Record<string, string> {
|
|
return {
|
|
'data-tooltip': text,
|
|
'aria-label': text,
|
|
...(opts?.pos ? { 'data-tooltip-pos': opts.pos } : {}),
|
|
...(opts?.wrap ? { 'data-tooltip-wrap': '' } : {}),
|
|
...(opts?.click ? { 'data-tooltip-click': '' } : {}),
|
|
};
|
|
}
|