fix(ui): swap Gapless / Infinite Queue toolbar icons (#284)

Reported in #274 — the icons for the Gapless and Infinite Queue toggles
were the wrong way round. The infinity symbol was on Gapless, but reads
much more naturally on Infinite Queue (a queue that never ends), and the
arrow-up-to-line on Infinite Queue had no obvious mapping at all.

Move infinity to Infinite Queue. Use MoveRight (right-pointing arrow) for
Gapless — visualises 'flows straight through to the next track without
stopping' and stays distinct from the chain/link family at 13 px in both
the QueuePanel and Mini Player toolbars.

Closes #274
This commit is contained in:
Frank Stellmacher
2026-04-24 00:48:55 +02:00
committed by GitHub
parent e721b3060d
commit e86133738d
2 changed files with 6 additions and 6 deletions
+3 -3
View File
@@ -3,7 +3,7 @@ import { createPortal } from 'react-dom';
import { emit, listen } from '@tauri-apps/api/event'; import { emit, listen } from '@tauri-apps/api/event';
import { invoke } from '@tauri-apps/api/core'; import { invoke } from '@tauri-apps/api/core';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { Play, Pause, SkipBack, SkipForward, Pin, PinOff, Maximize2, X, ListMusic, Volume2, VolumeX, Shuffle, Infinity as InfinityIcon, Waves, ArrowUpToLine } from 'lucide-react'; import { Play, Pause, SkipBack, SkipForward, Pin, PinOff, Maximize2, X, ListMusic, Volume2, VolumeX, Shuffle, Infinity as InfinityIcon, Waves, MoveRight } from 'lucide-react';
import CachedImage from './CachedImage'; import CachedImage from './CachedImage';
import { buildCoverArtUrl, coverArtCacheKey } from '../api/subsonic'; import { buildCoverArtUrl, coverArtCacheKey } from '../api/subsonic';
import { usePlayerStore } from '../store/playerStore'; import { usePlayerStore } from '../store/playerStore';
@@ -582,7 +582,7 @@ export default function MiniPlayer() {
data-tooltip={t('queue.gapless')} data-tooltip={t('queue.gapless')}
aria-label={t('queue.gapless')} aria-label={t('queue.gapless')}
> >
<InfinityIcon size={13} /> <MoveRight size={13} />
</button> </button>
<button <button
@@ -604,7 +604,7 @@ export default function MiniPlayer() {
data-tooltip={t('queue.infiniteQueue')} data-tooltip={t('queue.infiniteQueue')}
aria-label={t('queue.infiniteQueue')} aria-label={t('queue.infiniteQueue')}
> >
<ArrowUpToLine size={13} /> <InfinityIcon size={13} />
</button> </button>
<span className="mini-player__toolbar-sep" aria-hidden /> <span className="mini-player__toolbar-sep" aria-hidden />
+3 -3
View File
@@ -1,6 +1,6 @@
import React, { useState, useRef, useMemo, useEffect } from 'react'; import React, { useState, useRef, useMemo, useEffect } from 'react';
import { Track, usePlayerStore, songToTrack } from '../store/playerStore'; import { Track, usePlayerStore, songToTrack } from '../store/playerStore';
import { Play, Music, Star, X, Trash2, Save, FolderOpen, Shuffle, Infinity, Waves, MicVocal, ListMusic, Check, ListPlus, ArrowUpToLine, Radio, HardDrive, ChevronDown, Info, Share2 } from 'lucide-react'; import { Play, Music, Star, X, Trash2, Save, FolderOpen, Shuffle, Infinity, Waves, MicVocal, ListMusic, Check, ListPlus, MoveRight, Radio, HardDrive, ChevronDown, Info, Share2 } from 'lucide-react';
import { buildCoverArtUrl, coverArtCacheKey, getAlbum, getPlaylists, getPlaylist, updatePlaylist, deletePlaylist, SubsonicPlaylist } from '../api/subsonic'; import { buildCoverArtUrl, coverArtCacheKey, getAlbum, getPlaylists, getPlaylist, updatePlaylist, deletePlaylist, SubsonicPlaylist } from '../api/subsonic';
import { usePlaylistStore } from '../store/playlistStore'; import { usePlaylistStore } from '../store/playlistStore';
import { useCachedUrl } from './CachedImage'; import { useCachedUrl } from './CachedImage';
@@ -588,7 +588,7 @@ export default function QueuePanel() {
data-tooltip={t('queue.gapless')} data-tooltip={t('queue.gapless')}
aria-label={t('queue.gapless')} aria-label={t('queue.gapless')}
> >
<Infinity size={13} /> <MoveRight size={13} />
</button> </button>
<div style={{ position: 'relative' }}> <div style={{ position: 'relative' }}>
<button <button
@@ -640,7 +640,7 @@ export default function QueuePanel() {
data-tooltip={t('queue.infiniteQueue')} data-tooltip={t('queue.infiniteQueue')}
aria-label={t('queue.infiniteQueue')} aria-label={t('queue.infiniteQueue')}
> >
<ArrowUpToLine size={13} /> <Infinity size={13} />
</button> </button>
</div> </div>