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/components/randomMix/RandomMixHeader.tsx

@@ -28,28 +28,31 @@ export default function RandomMixHeader({
     <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '2rem' }}>
       <h1 className="page-title">{t('randomMix.title')}</h1>
 
-      <div style={{ display: 'flex', gap: '0.5rem' }}>
+      <div className="compact-action-bar" style={{ display: 'flex', gap: '0.5rem' }}>
         <button
           className="btn btn-surface"
           onClick={onRefresh}
           disabled={selectedGenre ? genreMixLoading : loading}
+          aria-label={selectedGenre ? t('randomMix.remixGenre', { genre: selectedGenre }) : t('randomMix.remix')}
           data-tooltip={selectedGenre
             ? t('randomMix.remixTooltipGenre', { genre: selectedGenre })
             : t('randomMix.remixTooltip')
           }
         >
           <RefreshCw size={18} className={(selectedGenre ? genreMixLoading : loading) ? 'spin' : ''} />
-          {selectedGenre ? t('randomMix.remixGenre', { genre: selectedGenre }) : t('randomMix.remix')}
+          <span className="compact-btn-label">{selectedGenre ? t('randomMix.remixGenre', { genre: selectedGenre }) : t('randomMix.remix')}</span>
         </button>
         <button
           className={`btn ${isGenreLoading ? 'btn-surface' : 'btn-primary'}`}
           onClick={onPlayAll}
           disabled={isPlayDisabled}
+          aria-label={t('randomMix.playAll')}
+          data-tooltip={t('randomMix.playAll')}
         >
           {isGenreLoading ? (
-            <><div className="spinner" style={{ width: 14, height: 14, borderWidth: 2 }} /> {Math.min(genreMixSongsLength, randomMixSize)} / {randomMixSize}</>
+            <><div className="spinner" style={{ width: 14, height: 14, borderWidth: 2 }} /> <span className="compact-btn-label">{Math.min(genreMixSongsLength, randomMixSize)} / {randomMixSize}</span></>
           ) : (
-            <><Play size={18} fill="currentColor" /> {t('randomMix.playAll')}</>
+            <><Play size={18} fill="currentColor" /> <span className="compact-btn-label">{t('randomMix.playAll')}</span></>
           )}
         </button>
       </div>