feat(settings): compact server cards with capability badges (#1054)

* 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).
This commit is contained in:
cucadmuh
2026-06-10 00:25:30 +03:00
committed by GitHub
parent 36a0615dcb
commit ae9be74719
23 changed files with 374 additions and 117 deletions
+49
View File
@@ -190,6 +190,55 @@
margin-right: var(--space-2);
}
.settings-server-inline-badge {
display: inline-flex;
align-items: center;
font-size: 11px;
font-weight: 600;
padding: 1px 6px;
border-radius: var(--radius-sm);
background: var(--accent);
color: var(--text-on-accent);
flex-shrink: 0;
}
.settings-server-inline-badge--positive {
background: var(--positive);
color: var(--text-on-accent, #111);
}
.settings-server-version-info-btn {
padding: 2px;
min-width: 20px;
min-height: 20px;
height: auto;
line-height: 1;
color: var(--text-muted);
flex-shrink: 0;
cursor: help;
display: inline-flex;
align-items: center;
justify-content: center;
}
.settings-server-use-active-slot {
font-size: 12px;
padding: 4px 10px;
min-height: 28px;
box-sizing: border-box;
}
button.settings-server-use-active-slot {
display: inline-flex;
align-items: center;
gap: 6px;
}
span.settings-server-use-active-slot {
display: inline-flex;
align-items: center;
}
/* ── In-Page-Suche fuer Settings ─────────────────────────────────────────── */
.settings-header {
display: flex;