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

feat(mobile): comprehensive mobile UI overhaul (#238)

Browse Source 
RandomMix: filters and genre mix panels collapse on mobile
- RandomAlbums / album grids: auto-fill favouring 3 columns at narrow widths
- BottomNav: More button opens a bottom sheet with remaining nav items
- MobileMoreOverlay: new sheet component with backdrop and slide-up animation
- Tracklist: mobile Title / Artist two-line stacked layout (Apple Music style)
- ArtistDetail: centred header (photo → name → buttons), icon-only buttons
  except Play All, collapsible Similar Artists (5 default), 2-column album
  grid, avatar glow derived from dominant cover colour
- Settings: fixed overflow in ReplayGain, Crossfade, mix rating filters,
  theme scheduler, and Next Track Buffering sections

Co-authored-by: kilyabin <65072190+kilyabin@users.noreply.github.com>
This commit is contained in:
Frank Stellmacher
2026-04-21 12:10:02 +02:00
committed by GitHub
parent f73cca669b
commit c61bcacd0d
15 changed files with 518 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/BottomNav.tsx
+15 -1
View File
@@ -1,9 +1,10 @@
import { useState } from 'react';
import { NavLink } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { Disc3, Search, Music4, AudioLines } from 'lucide-react';
import { Disc3, Search, Music4, AudioLines, MoreHorizontal } from 'lucide-react';
import { usePlayerStore } from '../store/playerStore';
import MobileSearchOverlay from './MobileSearchOverlay';
import MobileMoreOverlay from './MobileMoreOverlay';
const NAV_ITEMS = [
{ to: '/', end: true, icon: Disc3, labelKey: 'sidebar.mainstage' },
@@ -16,6 +17,7 @@ export default function BottomNav() {
const isPlaying = usePlayerStore(s => s.isPlaying);
const currentTrack = usePlayerStore(s => s.currentTrack);
const [searchOpen, setSearchOpen] = useState(false);
const [moreOpen, setMoreOpen] = useState(false);
return (
<>
@@ -47,9 +49,21 @@ export default function BottomNav() {
</span>
<span className="bottom-nav-label">{t('search.title')}</span>
</button>
<button
className={`bottom-nav-item${moreOpen ? ' active' : ''}`}
onClick={() => setMoreOpen(v => !v)}
aria-label={t('sidebar.more')}
>
<span className="bottom-nav-icon-wrap">
<MoreHorizontal size={22} />
</span>
<span className="bottom-nav-label">{t('sidebar.more')}</span>
</button>
</nav>
{searchOpen && <MobileSearchOverlay onClose={() => setSearchOpen(false)} />}
{moreOpen && <MobileMoreOverlay onClose={() => setMoreOpen(false)} />}
</>
);
}
src/components/MobileMoreOverlay.tsx
+73
View File
@@ -0,0 +1,73 @@
import { createPortal } from 'react-dom';
import { NavLink } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { Settings, HardDriveDownload } from 'lucide-react';
import { useSidebarStore } from '../store/sidebarStore';
import { useAuthStore } from '../store/authStore';
import { useOfflineStore } from '../store/offlineStore';
import { ALL_NAV_ITEMS } from '../config/navItems';
const BOTTOM_NAV_ROUTES = new Set(['/', '/albums', '/now-playing']);
export default function MobileMoreOverlay({ onClose }: { onClose: () => void }) {
const { t } = useTranslation();
const sidebarItems = useSidebarStore(s => s.items);
const randomNavMode = useAuthStore(s => s.randomNavMode);
const serverId = useAuthStore(s => s.activeServerId ?? '');
const offlineAlbums = useOfflineStore(s => s.albums);
const hasOfflineContent = Object.values(offlineAlbums).some(a => a.serverId === serverId);
const items = sidebarItems
.filter(cfg => {
if (!cfg?.visible) return false;
const item = ALL_NAV_ITEMS[cfg.id];
if (!item) return false;
if (BOTTOM_NAV_ROUTES.has(item.to)) return false;
if (randomNavMode === 'hub' && (cfg.id === 'randomMix' || cfg.id === 'randomAlbums')) return false;
if (randomNavMode === 'separate' && cfg.id === 'randomPicker') return false;
return true;
})
.map(cfg => ALL_NAV_ITEMS[cfg.id]);
return createPortal(
<>
<div className="mobile-more-backdrop" onClick={onClose} />
<div className="mobile-more-sheet">
<div className="mobile-more-handle" />
<div className="mobile-more-grid">
{items.map(item => (
<NavLink
key={item.to}
to={item.to}
end={item.to === '/'}
className={({ isActive }) => `mobile-more-item${isActive ? ' active' : ''}`}
onClick={onClose}
>
<span className="mobile-more-icon"><item.icon size={24} /></span>
<span className="mobile-more-label">{t(item.labelKey)}</span>
</NavLink>
))}
{hasOfflineContent && (
<NavLink
to="/offline"
className={({ isActive }) => `mobile-more-item${isActive ? ' active' : ''}`}
onClick={onClose}
>
<span className="mobile-more-icon"><HardDriveDownload size={24} /></span>
<span className="mobile-more-label">{t('sidebar.offlineLibrary')}</span>
</NavLink>
)}
<NavLink
to="/settings"
className={({ isActive }) => `mobile-more-item${isActive ? ' active' : ''}`}
onClick={onClose}
>
<span className="mobile-more-icon"><Settings size={24} /></span>
<span className="mobile-more-label">{t('sidebar.settings')}</span>
</NavLink>
</div>
</div>
</>,
document.body
);
}
src/locales/de.ts
+1
View File
@@ -30,6 +30,7 @@ export const deTranslation = {
allLibraries: 'Alle Bibliotheken',
expandPlaylists: 'Playlists ausklappen',
collapsePlaylists: 'Playlists einklappen',
more: 'Mehr',
},
home: {
hero: 'Featured',
src/locales/en.ts
+1
View File
@@ -31,6 +31,7 @@ export const enTranslation = {
allLibraries: 'All libraries',
expandPlaylists: 'Expand playlists',
collapsePlaylists: 'Collapse playlists',
more: 'More',
},
home: {
hero: 'Featured',
src/locales/es.ts
+1
View File
@@ -31,6 +31,7 @@ export const esTranslation = {
allLibraries: 'Todas las bibliotecas',
expandPlaylists: 'Expandir listas',
collapsePlaylists: 'Colapsar listas',
more: 'Más',
},
home: {
hero: 'Destacado',
src/locales/fr.ts
+1
View File
@@ -30,6 +30,7 @@ export const frTranslation = {
allLibraries: 'Toutes les bibliothèques',
expandPlaylists: 'Développer les playlists',
collapsePlaylists: 'Réduire les playlists',
more: 'Plus',
},
home: {
hero: 'En vedette',
src/locales/nb.ts
+1
View File
@@ -30,6 +30,7 @@ export const nbTranslation = {
allLibraries: 'Alle biblioteker',
expandPlaylists: 'Utvid spillelister',
collapsePlaylists: 'Skjul spillelister',
more: 'Mer',
},
home: {
hero: 'Utvalgt',
src/locales/nl.ts
+1
View File
@@ -30,6 +30,7 @@ export const nlTranslation = {
allLibraries: 'Alle bibliotheken',
expandPlaylists: 'Afspeellijsten uitklappen',
collapsePlaylists: 'Afspeellijsten inklappen',
more: 'Meer',
},
home: {
hero: 'Uitgelicht',
src/locales/ru.ts
+1
View File
@@ -31,6 +31,7 @@ export const ruTranslation = {
allLibraries: 'Все библиотеки',
expandPlaylists: 'Развернуть плейлисты',
collapsePlaylists: 'Свернуть плейлисты',
more: 'Ещё',
},
home: {
hero: 'Подборка',
src/locales/zh.ts
+1
View File
@@ -30,6 +30,7 @@ export const zhTranslation = {
allLibraries: '所有资料库',
expandPlaylists: '展开播放列表',
collapsePlaylists: '收起播放列表',
more: '更多',
},
home: {
hero: '精选',
src/pages/ArtistDetail.tsx
+59 -22
View File
@@ -4,7 +4,8 @@ import { getArtist, getArtistInfo, getTopSongs, getSimilarSongs2, getAlbum, sear
import AlbumCard from '../components/AlbumCard';
import CachedImage from '../components/CachedImage';
import CoverLightbox from '../components/CoverLightbox';
import { ArrowLeft, Users, ExternalLink, Heart, Play, Shuffle, Radio, HardDriveDownload, Check, Camera, Loader2 } from 'lucide-react';
import { ArrowLeft, Users, ExternalLink, Heart, Play, Shuffle, Radio, HardDriveDownload, Check, Camera, Loader2, ChevronDown, ChevronUp } from 'lucide-react';
import { useIsMobile } from '../hooks/useIsMobile';
import { open } from '@tauri-apps/plugin-shell';
import { usePlayerStore, songToTrack } from '../store/playerStore';
import { useOfflineStore } from '../store/offlineStore';
@@ -15,6 +16,7 @@ import { lastfmGetSimilarArtists, lastfmIsConfigured } from '../api/lastfm';
import LastfmIcon from '../components/LastfmIcon';
import { invalidateCoverArt } from '../utils/imageCache';
import { showToast } from '../utils/toast';
import { extractCoverColors } from '../utils/dynamicColors';
import StarRating from '../components/StarRating';
function formatDuration(seconds: number): string {
@@ -62,7 +64,10 @@ export default function ArtistDetail() {
const [lightboxOpen, setLightboxOpen] = useState(false);
const [bioExpanded, setBioExpanded] = useState(false);
const [uploading, setUploading] = useState(false);
const [similarCollapsed, setSimilarCollapsed] = useState(true);
const isMobile = useIsMobile();
const [coverRevision, setCoverRevision] = useState(0);
const [avatarGlow, setAvatarGlow] = useState('');
const imageInputRef = useRef<HTMLInputElement>(null);
const playTrack = usePlayerStore(state => state.playTrack);
@@ -91,6 +96,7 @@ export default function ArtistDetail() {
setInfo(null);
setTopSongs([]);
setFeaturedAlbums([]);
setAvatarGlow('');
getArtist(id).then(artistData => {
if (cancelled) return;
setArtist(artistData.artist);
@@ -449,7 +455,14 @@ export default function ArtistDetail() {
)}
<div className="artist-detail-header">
<div className="artist-detail-avatar" style={{ position: 'relative' }}>
<div
className="artist-detail-avatar"
style={{
position: 'relative',
boxShadow: avatarGlow ? `0 0 36px 8px ${avatarGlow.replace('rgb(', 'rgba(').replace(')', ', 0.55)')}` : undefined,
transition: 'box-shadow 0.6s ease',
}}
>
{coverId ? (
<button
className="artist-detail-avatar-btn"
@@ -462,6 +475,7 @@ export default function ArtistDetail() {
cacheKey={coverArtCacheKey(coverId, 300)}
alt={artist.name}
style={{ width: '100%', height: '100%', objectFit: 'cover' }}
onLoad={e => extractCoverColors(e.currentTarget.src).then(({ accent }) => { if (accent) setAvatarGlow(accent); })}
onError={e => { (e.currentTarget as HTMLImageElement).style.display = 'none'; }}
/>
</button>
@@ -538,15 +552,25 @@ export default function ArtistDetail() {
{playAllLoading ? <div className="spinner" style={{ width: 16, height: 16, borderTopColor: 'currentColor' }} /> : <Play size={16} />}
{t('artistDetail.playAll')}
</button>
<button className="btn btn-surface" onClick={handleShuffle} disabled={playAllLoading}>
<button
className="btn btn-surface"
onClick={handleShuffle}
disabled={playAllLoading}
data-tooltip={isMobile ? t('artistDetail.shuffle') : undefined}
>
{playAllLoading ? <div className="spinner" style={{ width: 16, height: 16, borderTopColor: 'currentColor' }} /> : <Shuffle size={16} />}
{t('artistDetail.shuffle')}
{!isMobile && t('artistDetail.shuffle')}
</button>
</>
)}
<button className="btn btn-surface" onClick={handleStartRadio} disabled={radioLoading}>
<button
className="btn btn-surface"
onClick={handleStartRadio}
disabled={radioLoading}
data-tooltip={isMobile ? t('artistDetail.radio') : undefined}
>
{radioLoading ? <div className="spinner" style={{ width: 16, height: 16, borderTopColor: 'currentColor' }} /> : <Radio size={16} />}
{radioLoading ? t('artistDetail.loading') : t('artistDetail.radio')}
{!isMobile && (radioLoading ? t('artistDetail.loading') : t('artistDetail.radio'))}
</button>
{albums.length > 0 && (() => {
const progress = id ? bulkProgress[id] : undefined;
@@ -564,9 +588,9 @@ export default function ArtistDetail() {
{isDownloading
? <div className="spinner" style={{ width: 16, height: 16, borderTopColor: 'currentColor' }} />
: isDone ? <Check size={16} /> : <HardDriveDownload size={16} />}
{isDownloading
{!isMobile && (isDownloading
? t('artistDetail.offlineDownloading', { done: progress.done, total: progress.total })
: isDone ? t('artistDetail.offlineCached') : t('artistDetail.cacheOffline')}
: isDone ? t('artistDetail.offlineCached') : t('artistDetail.cacheOffline'))}
</button>
);
})()}
@@ -665,9 +689,20 @@ export default function ArtistDetail() {
{showSimilarSection && (
<>
<h2 className="section-title" style={{ marginTop: '2rem', marginBottom: '1rem' }}>
{t('artistDetail.similarArtists')}
</h2>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: '2rem', marginBottom: '1rem' }}>
<h2 className="section-title" style={{ margin: 0 }}>
{t('artistDetail.similarArtists')}
</h2>
{isMobile && (() => {
const list = showAudiomuseSimilar ? serverSimilarArtists : similarArtists;
return list.length > 5 ? (
<button className="btn btn-ghost" style={{ fontSize: 12, padding: '2px 8px' }} onClick={() => setSimilarCollapsed(v => !v)}>
{similarCollapsed ? <ChevronDown size={14} /> : <ChevronUp size={14} />}
{similarCollapsed ? t('nowPlaying.readMore') : t('nowPlaying.showLess')}
</button>
) : null;
})()}
</div>
{showLastfmSimilar && similarLoading ? (
<div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', color: 'var(--text-muted)', fontSize: '0.875rem' }}>
<div className="spinner" style={{ width: 16, height: 16, borderTopColor: 'currentColor' }} />
@@ -675,15 +710,17 @@ export default function ArtistDetail() {
</div>
) : (
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem' }}>
{(showAudiomuseSimilar ? serverSimilarArtists : similarArtists).map(a => (
<button
key={a.id}
className="artist-ext-link"
onClick={() => navigate(`/artist/${a.id}`)}
>
{a.name}
</button>
))}
{(showAudiomuseSimilar ? serverSimilarArtists : similarArtists)
.slice(0, isMobile && similarCollapsed ? 5 : undefined)
.map(a => (
<button
key={a.id}
className="artist-ext-link"
onClick={() => navigate(`/artist/${a.id}`)}
>
{a.name}
</button>
))}
</div>
)}
</>
@@ -695,7 +732,7 @@ export default function ArtistDetail() {
</h2>
{albums.length > 0 ? (
<div className="album-grid-wrap">
<div className="album-grid-wrap album-grid-wrap--artist">
{albums.map(a => <AlbumCard key={a.id} album={a} />)}
</div>
) : (
@@ -715,7 +752,7 @@ export default function ArtistDetail() {
))}
</div>
) : (
<div className="album-grid-wrap" style={{ animation: 'fadeIn 0.3s ease' }}>
<div className="album-grid-wrap album-grid-wrap--artist" style={{ animation: 'fadeIn 0.3s ease' }}>
{featuredAlbums.map(a => <AlbumCard key={a.id} album={a} />)}
</div>
)}
src/pages/RandomMix.tsx
+154 -118
View File
@@ -5,6 +5,7 @@ import { useAuthStore } from '../store/authStore';
import { Play, RefreshCw, ChevronDown, ChevronUp, Heart } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import { useDragDrop } from '../contexts/DragDropContext';
import { useIsMobile } from '../hooks/useIsMobile';
import {
fetchRandomMixSongsUntilFull,
getMixMinRatingsConfigFromAuth,
@@ -38,6 +39,7 @@ export default function RandomMix() {
const starredOverrides = usePlayerStore(s => s.starredOverrides);
const setStarredOverride = usePlayerStore(s => s.setStarredOverride);
const [contextMenuSongId, setContextMenuSongId] = useState<string | null>(null);
const isMobile = useIsMobile();
const psyDrag = useDragDrop();
const [starredSongs, setStarredSongs] = useState<Set<string>>(new Set());
const {
@@ -68,6 +70,10 @@ export default function RandomMix() {
const [blacklistOpen, setBlacklistOpen] = useState(false);
const [newGenre, setNewGenre] = useState('');
// Mobile collapsible panels
const [filtersExpanded, setFiltersExpanded] = useState(false);
const [genreMixExpanded, setGenreMixExpanded] = useState(false);
// Genre Mix state
const [serverGenres, setServerGenres] = useState<SubsonicGenre[]>([]);
const [allAvailableGenres, setAllAvailableGenres] = useState<string[]>([]);
@@ -217,7 +223,7 @@ export default function RandomMix() {
{/* ── Filter + Genre Mix panel ─────────────────────────────── */}
<div style={{
display: 'grid',
gridTemplateColumns: '1fr 1fr',
gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr',
gap: '1px',
background: 'var(--border)',
border: '1px solid var(--border)',
@@ -227,134 +233,164 @@ export default function RandomMix() {
}}>
{/* Left: Blacklist */}
<div style={{ background: 'var(--bg-card)', padding: '1rem 1.25rem' }}>
<div style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em', color: 'var(--text-muted)', marginBottom: '0.5rem' }}>
{t('randomMix.filterPanelTitle')}
</div>
<p style={{ fontSize: 12, color: 'var(--text-muted)', marginBottom: '0.75rem', lineHeight: 1.5 }}>
{t('randomMix.filterPanelDesc')}
</p>
<label style={{ display: 'flex', alignItems: 'flex-start', gap: '0.5rem', cursor: 'pointer', fontSize: 13, marginBottom: '0.75rem' }}>
<input
type="checkbox"
checked={excludeAudiobooks}
onChange={e => setExcludeAudiobooks(e.target.checked)}
style={{ marginTop: 2 }}
/>
<div>
<div style={{ fontWeight: 500, color: 'var(--text-primary)' }}>{t('randomMix.excludeAudiobooks')}</div>
<div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 2 }}>{t('randomMix.excludeAudiobooksDesc')}</div>
{isMobile ? (
<button
className="btn btn-ghost"
style={{ width: '100%', justifyContent: 'space-between', fontSize: 12, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em', color: 'var(--text-muted)', padding: '0' }}
onClick={() => setFiltersExpanded(v => !v)}
>
{t('randomMix.filterPanelTitle')}
{filtersExpanded ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
</button>
) : (
<div style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em', color: 'var(--text-muted)', marginBottom: '0.5rem' }}>
{t('randomMix.filterPanelTitle')}
</div>
</label>
)}
{(!isMobile || filtersExpanded) && (
<div style={{ marginTop: isMobile ? '0.75rem' : 0 }}>
<p style={{ fontSize: 12, color: 'var(--text-muted)', marginBottom: '0.75rem', lineHeight: 1.5 }}>
{t('randomMix.filterPanelDesc')}
</p>
<button
className="btn btn-ghost"
style={{ fontSize: 12, padding: '3px 8px', marginBottom: blacklistOpen ? '0.5rem' : 0 }}
onClick={() => setBlacklistOpen(v => !v)}
>
{blacklistOpen ? <ChevronUp size={12} /> : <ChevronDown size={12} />}
{t('randomMix.blacklistToggle')} ({customGenreBlacklist.length})
</button>
{blacklistOpen && (
<div>
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.35rem', marginBottom: '0.5rem', minHeight: 24 }}>
{customGenreBlacklist.length === 0 ? (
<span style={{ fontSize: 11, color: 'var(--text-muted)' }}>{t('settings.randomMixBlacklistEmpty')}</span>
) : (
customGenreBlacklist.map(genre => (
<span key={genre} style={{
display: 'inline-flex', alignItems: 'center', gap: 3,
background: 'color-mix(in srgb, var(--accent) 15%, transparent)',
color: 'var(--accent)', borderRadius: 'var(--radius-sm)',
padding: '1px 7px', fontSize: 11, fontWeight: 500,
}}>
{genre}
<button
style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'inherit', padding: 0, lineHeight: 1, fontSize: 13 }}
onClick={() => setCustomGenreBlacklist(customGenreBlacklist.filter(g => g !== genre))}
>×</button>
</span>
))
)}
</div>
<div style={{ display: 'flex', gap: '0.4rem' }}>
<label style={{ display: 'flex', alignItems: 'flex-start', gap: '0.5rem', cursor: 'pointer', fontSize: 13, marginBottom: '0.75rem' }}>
<input
className="input"
type="text"
value={newGenre}
onChange={e => setNewGenre(e.target.value)}
onKeyDown={e => {
if (e.key === 'Enter' && newGenre.trim()) {
const trimmed = newGenre.trim();
if (!customGenreBlacklist.includes(trimmed)) setCustomGenreBlacklist([...customGenreBlacklist, trimmed]);
setNewGenre('');
}
}}
placeholder={t('settings.randomMixBlacklistPlaceholder')}
style={{ fontSize: 12 }}
type="checkbox"
checked={excludeAudiobooks}
onChange={e => setExcludeAudiobooks(e.target.checked)}
style={{ marginTop: 2 }}
/>
<button
className="btn btn-ghost"
style={{ fontSize: 12, padding: '4px 10px', flexShrink: 0 }}
onClick={() => {
const trimmed = newGenre.trim();
if (trimmed && !customGenreBlacklist.includes(trimmed)) setCustomGenreBlacklist([...customGenreBlacklist, trimmed]);
setNewGenre('');
}}
disabled={!newGenre.trim()}
>{t('settings.randomMixBlacklistAdd')}</button>
</div>
<div>
<div style={{ fontWeight: 500, color: 'var(--text-primary)' }}>{t('randomMix.excludeAudiobooks')}</div>
<div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 2 }}>{t('randomMix.excludeAudiobooksDesc')}</div>
</div>
</label>
<button
className="btn btn-ghost"
style={{ fontSize: 12, padding: '3px 8px', marginBottom: blacklistOpen ? '0.5rem' : 0 }}
onClick={() => setBlacklistOpen(v => !v)}
>
{blacklistOpen ? <ChevronUp size={12} /> : <ChevronDown size={12} />}
{t('randomMix.blacklistToggle')} ({customGenreBlacklist.length})
</button>
{blacklistOpen && (
<div>
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.35rem', marginBottom: '0.5rem', minHeight: 24 }}>
{customGenreBlacklist.length === 0 ? (
<span style={{ fontSize: 11, color: 'var(--text-muted)' }}>{t('settings.randomMixBlacklistEmpty')}</span>
) : (
customGenreBlacklist.map(genre => (
<span key={genre} style={{
display: 'inline-flex', alignItems: 'center', gap: 3,
background: 'color-mix(in srgb, var(--accent) 15%, transparent)',
color: 'var(--accent)', borderRadius: 'var(--radius-sm)',
padding: '1px 7px', fontSize: 11, fontWeight: 500,
}}>
{genre}
<button
style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'inherit', padding: 0, lineHeight: 1, fontSize: 13 }}
onClick={() => setCustomGenreBlacklist(customGenreBlacklist.filter(g => g !== genre))}
>×</button>
</span>
))
)}
</div>
<div style={{ display: 'flex', gap: '0.4rem' }}>
<input
className="input"
type="text"
value={newGenre}
onChange={e => setNewGenre(e.target.value)}
onKeyDown={e => {
if (e.key === 'Enter' && newGenre.trim()) {
const trimmed = newGenre.trim();
if (!customGenreBlacklist.includes(trimmed)) setCustomGenreBlacklist([...customGenreBlacklist, trimmed]);
setNewGenre('');
}
}}
placeholder={t('settings.randomMixBlacklistPlaceholder')}
style={{ fontSize: 12 }}
/>
<button
className="btn btn-ghost"
style={{ fontSize: 12, padding: '4px 10px', flexShrink: 0 }}
onClick={() => {
const trimmed = newGenre.trim();
if (trimmed && !customGenreBlacklist.includes(trimmed)) setCustomGenreBlacklist([...customGenreBlacklist, trimmed]);
setNewGenre('');
}}
disabled={!newGenre.trim()}
>{t('settings.randomMixBlacklistAdd')}</button>
</div>
</div>
)}
</div>
)}
</div>
{/* Right: Genre Mix */}
<div style={{ background: 'var(--bg-card)', padding: '1rem 1.25rem' }}>
<div style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em', color: 'var(--text-muted)', marginBottom: '0.75rem' }}>
{t('randomMix.genreMixTitle')}
</div>
<p style={{ fontSize: 12, color: 'var(--text-muted)', marginBottom: '0.75rem' }}>{t('randomMix.genreMixDesc')}</p>
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.4rem', alignItems: 'center' }}>
{serverGenres.length === 0 ? (
<div className="spinner" style={{ width: 14, height: 14 }} />
) : displayedGenres.length === 0 ? (
<span style={{ fontSize: 12, color: 'var(--text-muted)' }}>{t('randomMix.genreMixNoGenres')}</span>
) : (
<>
<button
className={`btn ${selectedGenre === null ? 'btn-primary' : 'btn-surface'}`}
style={{ fontSize: 12, padding: '4px 12px' }}
onClick={() => { setSelectedGenre(null); setGenreMixSongs([]); setGenreMixComplete(false); fetchSongs(); }}
disabled={genreMixLoading}
>
{t('randomMix.genreMixAll')}
</button>
{displayedGenres.map(genre => (
<button
key={genre}
className={`btn ${selectedGenre === genre ? 'btn-primary' : 'btn-surface'}`}
style={{ fontSize: 12, padding: '4px 12px' }}
onClick={() => { setSelectedGenre(genre); loadGenreMix(genre); }}
disabled={genreMixLoading}
>
{genre}
</button>
))}
{allAvailableGenres.length > 20 && (
<button
className="btn btn-ghost"
style={{ fontSize: 12, padding: '4px 10px', flexShrink: 0 }}
onClick={shuffleDisplayedGenres}
disabled={genreMixLoading}
data-tooltip={t('randomMix.shuffleGenres')}
>
<RefreshCw size={12} />
</button>
{isMobile ? (
<button
className="btn btn-ghost"
style={{ width: '100%', justifyContent: 'space-between', fontSize: 12, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em', color: 'var(--text-muted)', padding: '0' }}
onClick={() => setGenreMixExpanded(v => !v)}
>
{t('randomMix.genreMixTitle')}
{genreMixExpanded ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
</button>
) : (
<div style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em', color: 'var(--text-muted)', marginBottom: '0.75rem' }}>
{t('randomMix.genreMixTitle')}
</div>
)}
{(!isMobile || genreMixExpanded) && (
<div style={{ marginTop: isMobile ? '0.75rem' : 0 }}>
<p style={{ fontSize: 12, color: 'var(--text-muted)', marginBottom: '0.75rem' }}>{t('randomMix.genreMixDesc')}</p>
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.4rem', alignItems: 'center' }}>
{serverGenres.length === 0 ? (
<div className="spinner" style={{ width: 14, height: 14 }} />
) : displayedGenres.length === 0 ? (
<span style={{ fontSize: 12, color: 'var(--text-muted)' }}>{t('randomMix.genreMixNoGenres')}</span>
) : (
<>
<button
className={`btn ${selectedGenre === null ? 'btn-primary' : 'btn-surface'}`}
style={{ fontSize: 12, padding: '4px 12px' }}
onClick={() => { setSelectedGenre(null); setGenreMixSongs([]); setGenreMixComplete(false); fetchSongs(); }}
disabled={genreMixLoading}
>
{t('randomMix.genreMixAll')}
</button>
{displayedGenres.map(genre => (
<button
key={genre}
className={`btn ${selectedGenre === genre ? 'btn-primary' : 'btn-surface'}`}
style={{ fontSize: 12, padding: '4px 12px' }}
onClick={() => { setSelectedGenre(genre); loadGenreMix(genre); }}
disabled={genreMixLoading}
>
{genre}
</button>
))}
{allAvailableGenres.length > 20 && (
<button
className="btn btn-ghost"
style={{ fontSize: 12, padding: '4px 10px', flexShrink: 0 }}
onClick={shuffleDisplayedGenres}
disabled={genreMixLoading}
data-tooltip={t('randomMix.shuffleGenres')}
>
<RefreshCw size={12} />
</button>
)}
</>
)}
</>
)}
</div>
</div>
</div>
)}
</div>
</div>
src/pages/Settings.tsx
+19 -19
View File
@@ -1317,29 +1317,29 @@ export default function Settings() {
)}
{auth.replayGainEnabled && (
<div style={{ paddingLeft: '1rem', marginTop: '0.75rem', display: 'flex', flexDirection: 'column', gap: '0.6rem' }}>
<div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
<span style={{ fontSize: 13, color: 'var(--text-secondary)', minWidth: 160 }}>
<div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', flexWrap: 'wrap' }}>
<span style={{ fontSize: 13, color: 'var(--text-secondary)', minWidth: 100 }}>
{t('settings.replayGainPreGain')}
</span>
<input
type="range" min={0} max={6} step={0.5}
value={auth.replayGainPreGainDb}
onChange={e => auth.setReplayGainPreGainDb(Number(e.target.value))}
style={{ flex: 1, maxWidth: 160 }}
style={{ flex: 1, minWidth: 80, maxWidth: 160 }}
/>
<span style={{ fontSize: 12, color: 'var(--text-muted)', minWidth: 40, textAlign: 'right' }}>
{auth.replayGainPreGainDb > 0 ? `+${auth.replayGainPreGainDb}` : auth.replayGainPreGainDb} dB
</span>
</div>
<div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
<span style={{ fontSize: 13, color: 'var(--text-secondary)', minWidth: 160 }}>
<div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', flexWrap: 'wrap' }}>
<span style={{ fontSize: 13, color: 'var(--text-secondary)', minWidth: 100 }}>
{t('settings.replayGainFallback')}
</span>
<input
type="range" min={-6} max={0} step={0.5}
value={auth.replayGainFallbackDb}
onChange={e => auth.setReplayGainFallbackDb(Number(e.target.value))}
style={{ flex: 1, maxWidth: 160 }}
style={{ flex: 1, minWidth: 80, maxWidth: 160 }}
/>
<span style={{ fontSize: 12, color: 'var(--text-muted)', minWidth: 40, textAlign: 'right' }}>
{auth.replayGainFallbackDb > 0 ? `+${auth.replayGainFallbackDb}` : auth.replayGainFallbackDb} dB
@@ -1367,7 +1367,7 @@ export default function Settings() {
</label>
</div>
{auth.crossfadeEnabled && !auth.gaplessEnabled && (
<div style={{ paddingLeft: '1rem', marginTop: '0.5rem', display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
<div style={{ paddingLeft: '1rem', marginTop: '0.5rem', display: 'flex', alignItems: 'center', gap: '0.75rem', flexWrap: 'wrap' }}>
<input
type="range"
min={0.1}
@@ -1375,7 +1375,7 @@ export default function Settings() {
step={0.1}
value={auth.crossfadeSecs}
onChange={e => auth.setCrossfadeSecs(parseFloat(e.target.value))}
style={{ width: 120 }}
style={{ flex: 1, minWidth: 80, maxWidth: 200 }}
id="crossfade-secs-slider"
/>
<span style={{ fontSize: 13, color: 'var(--text-secondary)', minWidth: 36 }}>
@@ -1440,7 +1440,7 @@ export default function Settings() {
</div>
{auth.preloadMode !== 'off' && (
<>
<div style={{ paddingLeft: '1rem', marginTop: '0.5rem', display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
<div style={{ paddingLeft: '1rem', marginTop: '0.5rem', display: 'flex', alignItems: 'center', gap: '0.75rem', flexWrap: 'wrap' }}>
{(['balanced', 'early', 'custom'] as const).map(mode => (
<button
key={mode}
@@ -1453,13 +1453,13 @@ export default function Settings() {
))}
</div>
{auth.preloadMode === 'custom' && (
<div style={{ paddingLeft: '1rem', marginTop: '0.5rem', display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
<div style={{ paddingLeft: '1rem', marginTop: '0.5rem', display: 'flex', alignItems: 'center', gap: '0.75rem', flexWrap: 'wrap' }}>
<input
type="range"
min={5} max={120} step={5}
value={auth.preloadCustomSeconds}
onChange={e => auth.setPreloadCustomSeconds(parseInt(e.target.value))}
style={{ width: 120 }}
style={{ flex: 1, minWidth: 80, maxWidth: 200 }}
/>
<span style={{ fontSize: 13, color: 'var(--text-secondary)', minWidth: 36 }}>
{t('settings.preloadCustomSeconds', { n: auth.preloadCustomSeconds })}
@@ -1503,13 +1503,13 @@ export default function Settings() {
{auth.hotCacheEnabled && (
<div style={{ marginTop: '1.25rem' }}>
<div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
<div style={{ display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap' }}>
<input
className="input"
type="text"
readOnly
value={auth.hotCacheDownloadDir || t('settings.hotCacheDirDefault')}
style={{ flex: 1, fontSize: 13, color: auth.hotCacheDownloadDir ? 'var(--text-primary)' : 'var(--text-muted)', cursor: 'default' }}
style={{ flex: 1, minWidth: 0, fontSize: 13, color: auth.hotCacheDownloadDir ? 'var(--text-primary)' : 'var(--text-muted)', cursor: 'default' }}
/>
{auth.hotCacheDownloadDir && (
<button
@@ -1552,15 +1552,15 @@ export default function Settings() {
<div>
<div style={{ fontWeight: 500, marginBottom: 6 }}>{t('settings.hotCacheMaxMb')}</div>
<div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
<input type="range" min={32} max={20000} step={32} value={snapHotCacheMb(auth.hotCacheMaxMb)} onChange={e => auth.setHotCacheMaxMb(parseInt(e.target.value, 10))} style={{ width: 140 }} id="hot-cache-max-mb-slider" />
<span style={{ fontSize: 13, color: 'var(--text-secondary)', minWidth: 72 }}>{snapHotCacheMb(auth.hotCacheMaxMb)} MB</span>
<input type="range" min={32} max={20000} step={32} value={snapHotCacheMb(auth.hotCacheMaxMb)} onChange={e => auth.setHotCacheMaxMb(parseInt(e.target.value, 10))} style={{ flex: 1, minWidth: 80, maxWidth: 200 }} id="hot-cache-max-mb-slider" />
<span style={{ fontSize: 13, color: 'var(--text-secondary)', minWidth: 60 }}>{snapHotCacheMb(auth.hotCacheMaxMb)} MB</span>
</div>
</div>
<div style={{ marginTop: '0.75rem' }}>
<div style={{ fontWeight: 500, marginBottom: 6 }}>{t('settings.hotCacheDebounce')}</div>
<div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
<input type="range" min={0} max={600} step={1} value={Math.min(600, Math.max(0, auth.hotCacheDebounceSec))} onChange={e => auth.setHotCacheDebounceSec(parseInt(e.target.value, 10))} style={{ width: 140 }} id="hot-cache-debounce-slider" />
<span style={{ fontSize: 13, color: 'var(--text-secondary)', minWidth: 100 }}>
<input type="range" min={0} max={600} step={1} value={Math.min(600, Math.max(0, auth.hotCacheDebounceSec))} onChange={e => auth.setHotCacheDebounceSec(parseInt(e.target.value, 10))} style={{ flex: 1, minWidth: 80, maxWidth: 200 }} id="hot-cache-debounce-slider" />
<span style={{ fontSize: 13, color: 'var(--text-secondary)', minWidth: 80 }}>
{Math.min(600, Math.max(0, auth.hotCacheDebounceSec)) === 0
? t('settings.hotCacheDebounceImmediate')
: t('settings.hotCacheDebounceSeconds', { n: Math.min(600, Math.max(0, auth.hotCacheDebounceSec)) })}
@@ -1945,7 +1945,7 @@ export default function Settings() {
<div
style={{
display: 'grid',
gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
gridTemplateColumns: 'repeat(auto-fit, minmax(90px, 1fr))',
gap: '1rem 0.75rem',
alignItems: 'start',
}}
@@ -2199,7 +2199,7 @@ export default function Settings() {
const nightH = theme.timeNightStart.split(':')[0];
const nightM = theme.timeNightStart.split(':')[1];
return (
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem', marginTop: '1rem' }}>
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(160px, 1fr))', gap: '1rem', marginTop: '1rem' }}>
<div className="form-group">
<label className="settings-label" style={{ marginBottom: 6 }}>{t('settings.themeSchedulerDayTheme')}</label>
<CustomSelect value={theme.themeDay} onChange={theme.setThemeDay} options={themeOptions} />
src/styles/components.css
+103 -1
View File
@@ -6815,9 +6815,111 @@ html.no-compositing .fs-seekbar-played {
MOBILE COMPONENT OVERRIDES (< 800px)
═══════════════════════════════════════════════════════════════════════════ */
/* ─── Tracklist — compact Title + Artist rows ─── */
.app-shell[data-mobile] .tracklist-header {
display: none;
}
.app-shell[data-mobile] .track-row {
display: grid !important;
grid-template-columns: 44px 1fr 50px !important;
grid-template-rows: auto auto;
column-gap: 8px;
row-gap: 0;
min-height: 52px;
padding: 6px 0;
}
/* play button / number */
.app-shell[data-mobile] .track-row > :nth-child(1) {
grid-column: 1;
grid-row: 1 / span 2;
align-self: center;
}
/* title cell */
.app-shell[data-mobile] .track-row > :nth-child(2) {
grid-column: 2;
grid-row: 1;
align-self: end;
padding-bottom: 1px;
}
/* artist cell — shown as subtitle */
.app-shell[data-mobile] .track-row > :nth-child(3) {
grid-column: 2;
grid-row: 2;
align-self: start;
overflow: hidden;
}
/* duration — last child, right column */
.app-shell[data-mobile] .track-row > :last-child {
grid-column: 3;
grid-row: 1 / span 2;
align-self: center;
justify-self: end;
display: flex !important;
}
/* hide album, genre, star and any extra columns */
.app-shell[data-mobile] .track-row > :nth-child(n+4):not(:last-child) {
display: none !important;
}
/* artist button/span as subtitle */
.app-shell[data-mobile] .track-row .track-artist-cell .rm-artist-btn,
.app-shell[data-mobile] .track-row .track-artist-cell .track-artist {
font-size: 12px !important;
color: var(--text-secondary) !important;
padding: 0 !important;
background: none !important;
border: none !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
width: 100%;
text-align: left;
cursor: default;
}
/* ─── Artist Detail page ─── */
.app-shell[data-mobile] .artist-detail-header {
flex-direction: column;
align-items: center;
text-align: center;
}
.app-shell[data-mobile] .artist-detail-avatar {
width: 150px;
height: 150px;
flex-shrink: 0;
}
.app-shell[data-mobile] .artist-detail-meta {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
padding-top: 0;
}
.app-shell[data-mobile] .artist-detail-entity-rating {
justify-content: center;
}
.app-shell[data-mobile] .artist-detail-links {
justify-content: center;
}
.app-shell[data-mobile] .album-grid-wrap--artist {
grid-template-columns: repeat(2, 1fr);
}
/* ─── Album / Artist Grid — fewer columns ─── */
.app-shell[data-mobile] .album-grid-wrap {
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
grid-template-columns: repeat(auto-fill, minmax(min(140px, 30%), 1fr));
gap: var(--space-3);
}
src/styles/layout.css
+87
View File
@@ -2066,6 +2066,93 @@ html[data-platform="windows"] .player-bar.floating {
line-height: 1;
}
/* ─── Mobile More Sheet ─── */
.mobile-more-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
z-index: 200;
}
.mobile-more-sheet {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: var(--bg-app);
border-radius: 16px 16px 0 0;
border-top: 1px solid var(--border);
z-index: 201;
padding: 0.5rem 0.75rem calc(0.75rem + var(--bottom-nav-height, 62px));
animation: more-sheet-up 0.22s ease;
}
@keyframes more-sheet-up {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
.mobile-more-handle {
width: 36px;
height: 4px;
background: var(--border);
border-radius: 2px;
margin: 0 auto 0.75rem;
}
.mobile-more-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.25rem 0;
}
.mobile-more-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.3rem;
padding: 0.65rem 0.25rem;
border-radius: var(--radius);
color: var(--text-secondary);
text-decoration: none;
font-size: 11px;
font-weight: 500;
cursor: pointer;
background: none;
border: none;
transition: color var(--transition-fast), background var(--transition-fast);
}
.mobile-more-item:hover {
color: var(--text-primary);
background: var(--bg-hover);
}
.mobile-more-item.active {
color: var(--accent);
}
.mobile-more-icon {
display: flex;
align-items: center;
justify-content: center;
opacity: 0.75;
}
.mobile-more-item.active .mobile-more-icon,
.mobile-more-item:hover .mobile-more-icon {
opacity: 1;
}
.mobile-more-label {
line-height: 1.2;
text-align: center;
max-width: 72px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ─── Grid Overrides ─── */
.app-shell[data-mobile] {
grid-template-columns: 1fr;