feat(settings): add a Compact buttons appearance toggle (#1189)

* feat(ui): prototype compact hero and toolbar buttons (Large/Small appearance setting)

* feat(settings): rename action-button size toggle to "Compact buttons"

Promote the hero-button prototype to a real, app-wide setting.

- rename heroButtonSize → buttonSize, data-hero-buttons → data-button-size,
  hero-action-bar/hero-btn-label → compact-action-bar/compact-btn-label
- relabel "Hero buttons" → "Compact buttons" and broaden the description
  (action + toolbar buttons across detail pages and browse views) in all 11 locales
- move the feature CSS out of cover-lightbox.css into its own compact-buttons.css
- add tests: themeStore buttonSize toggle, SelectionToggleButton

* docs(changelog): compact buttons appearance toggle (#1189)

* docs(credits): compact buttons appearance toggle (#1189)

src/styles/components/compact-buttons.css

@@ -0,0 +1,59 @@
+/* ─ Compact buttons (Settings → Appearance → Compact buttons) ─
+   Toggled by `html[data-button-size="small"]` (themeStore `buttonSize`).
+   Reusable opt-in: a button row adds `compact-action-bar`, and each button
+   wraps its text in a `compact-btn-label` span. In Small the labels hide and
+   the buttons collapse to icon-only — across detail-page hero rows, shared
+   browse toolbars (`mainstage-inpage-toolbar` → `toolbar-btn-label`) and the
+   standalone Most Played sort/filter buttons.
+
+   These rules are viewport-agnostic, so the toggle applies on mobile too. The
+   one deliberate exception is the AlbumHeader's mobile layout: it renders its
+   own large touch-target buttons (`album-icon-btn`, ~44–54px) instead of a
+   `compact-action-bar`, so Small never shrinks them below the touch target. */
+
+html[data-button-size="small"] .compact-action-bar {
+  gap: 6px;
+}
+
+html[data-button-size="small"] .compact-action-bar .btn,
+html[data-button-size="small"] .compact-action-bar .artist-ext-link {
+  padding: 5px;
+  gap: 5px;
+  min-height: 0;
+  min-width: 0;
+}
+
+html[data-button-size="small"] .compact-action-bar .btn svg,
+html[data-button-size="small"] .compact-action-bar .artist-ext-link svg {
+  width: 15px;
+  height: 15px;
+}
+
+/* Labelled buttons (Play, Bio, Download, Offline, …) become icon-only in Small. */
+html[data-button-size="small"] .compact-action-bar .compact-btn-label {
+  display: none;
+}
+
+/* Album header keeps its inner primary cluster tight in Small too. */
+html[data-button-size="small"] .album-detail-actions-primary {
+  gap: 5px;
+}
+
+/* Browse-page toolbars (All Albums style: Sort, Year, Genre, Favorites, Lossless,
+   Sampler, multi-select) collapse to icon-only in Small, reusing the same pattern
+   as the mobile toolbar — labels live in `.toolbar-btn-label`, the icon + tooltip
+   + aria-label stay. One rule covers every shared `mainstage-inpage-toolbar`. */
+html[data-button-size="small"] .mainstage-inpage-toolbar .toolbar-btn-label {
+  display: none;
+}
+
+/* Once labels are hidden, keep all toolbar buttons square / equal size. */
+html[data-button-size="small"] .mainstage-inpage-toolbar .btn {
+  padding: 0.5rem;
+}
+
+/* Most Played has its own standalone sort/filter buttons (not in a shared bar). */
+html[data-button-size="small"] .mp-sort-btn .compact-btn-label,
+html[data-button-size="small"] .mp-filter-btn .compact-btn-label {
+  display: none;
+}