itlxrd/Psychotoxical-psysonic
1
0
Fork 0
mirror of https://github.com/Psychotoxical/psysonic.git synced 2026-07-22 07:15:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* 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)
This commit is contained in:
Psychotoxical
2026-06-25 14:49:09 +02:00
committed by GitHub
parent 8b89596fcf
commit d49424e95b
40 changed files with 438 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/favorites/FavoritesSongsSectionHeader.tsx
+13 -5
View File
@@ -67,10 +67,12 @@ export default function FavoritesSongsSectionHeader({
</div>
{/* Action Buttons */}
<div className="favorites-songs-toolbar" style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', flexWrap: 'wrap' }}>
<div className="favorites-songs-toolbar compact-action-bar" style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', flexWrap: 'wrap' }}>
<button
className="btn btn-primary"
disabled={targetSongs.length === 0}
aria-label={inSelectMode ? t('favorites.playSelected') : t('favorites.playAll')}
data-tooltip={inSelectMode ? t('favorites.playSelected') : t('favorites.playAll')}
onClick={() => {
if (targetSongs.length === 0) return;
const tracks = targetSongs.map(songToTrack);
@@ -78,11 +80,13 @@ export default function FavoritesSongsSectionHeader({
}}
>
<Play size={15} />
{inSelectMode ? t('favorites.playSelected') : t('favorites.playAll')}
<span className="compact-btn-label">{inSelectMode ? t('favorites.playSelected') : t('favorites.playAll')}</span>
</button>
<button
className="btn btn-surface"
disabled={targetSongs.length === 0}
aria-label={inSelectMode ? t('favorites.enqueueSelected') : t('favorites.enqueueAll')}
data-tooltip={inSelectMode ? t('favorites.enqueueSelected') : t('favorites.enqueueAll')}
onClick={() => {
if (targetSongs.length === 0) return;
const tracks = targetSongs.map(songToTrack);
@@ -90,21 +94,25 @@ export default function FavoritesSongsSectionHeader({
}}
>
<ListPlus size={15} />
{inSelectMode ? t('favorites.enqueueSelected') : t('favorites.enqueueAll')}
<span className="compact-btn-label">{inSelectMode ? t('favorites.enqueueSelected') : t('favorites.enqueueAll')}</span>
</button>
{/* Filter Toggle Button */}
<button
className={`btn ${showFilters || selectedGenres.length > 0 || yearRange[0] !== minYear || yearRange[1] !== currentYear ? 'btn-primary' : 'btn-surface'}`}
onClick={() => setShowFilters(v => !v)}
aria-label={t('common.filters')}
data-tooltip={t('common.filters')}
>
<SlidersHorizontal size={14} />
{t('common.filters')}
<span className="compact-btn-label">{t('common.filters')}</span>
</button>
{(selectedArtist || selectedGenres.length > 0 || yearRange[0] !== minYear || yearRange[1] !== currentYear) && (
<button
className="btn btn-ghost"
aria-label={t('common.clearAll')}
data-tooltip={t('common.clearAll')}
onClick={() => {
setSelectedArtist(null);
setSelectedGenres([]);
@@ -114,7 +122,7 @@ export default function FavoritesSongsSectionHeader({
}}
>
<X size={13} />
{t('common.clearAll')}
<span className="compact-btn-label">{t('common.clearAll')}</span>
</button>
)}