feat(nav): merge Random Mix & Albums into Build a Mix hub

Replaces two sidebar entries (Random Mix, Random Albums) with a single 'Build a Mix' item (Wand2 icon) at /random. Landing page shows two cards — Mix by Tracks and Mix by Albums — with glow-on-hover. Old routes updated throughout. All 7 locales updated.
This commit is contained in:
kilyabin
2026-04-12 13:26:27 +04:00
committed by GitHub
parent 8f18f73b33
commit bf38a286cd
13 changed files with 216 additions and 10 deletions
+1 -1
View File
@@ -120,7 +120,7 @@ export default function Home() {
{isVisible('discover') && (
<AlbumRow
title={t('home.discover')}
titleLink="/random-albums"
titleLink="/random/albums"
albums={random}
onLoadMore={() => loadMore('random', random, setRandom)}
moreText={t('home.discoverMore')}
+52
View File
@@ -0,0 +1,52 @@
import React from 'react';
import { useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { Shuffle, Dices } from 'lucide-react';
interface MixCard {
icon: React.ElementType;
labelKey: string;
descKey: string;
to: string;
}
const CARDS: MixCard[] = [
{
icon: Shuffle,
labelKey: 'randomLanding.mixByTracks',
descKey: 'randomLanding.mixByTracksDesc',
to: '/random/mix',
},
{
icon: Dices,
labelKey: 'randomLanding.mixByAlbums',
descKey: 'randomLanding.mixByAlbumsDesc',
to: '/random/albums',
},
];
export default function RandomLanding() {
const { t } = useTranslation();
const navigate = useNavigate();
return (
<div className="random-landing">
<div className="random-landing-grid">
{CARDS.map(({ icon: Icon, labelKey, descKey, to }) => (
<button
key={to}
className="mix-pick-card"
onClick={() => navigate(to)}
>
<Icon className="mix-pick-card-bg-icon" strokeWidth={1} aria-hidden />
<div className="mix-pick-card-content">
<Icon size={28} strokeWidth={1.5} className="mix-pick-card-icon" aria-hidden />
<span className="mix-pick-card-label">{t(labelKey)}</span>
<span className="mix-pick-card-desc">{t(descKey)}</span>
</div>
</button>
))}
</div>
</div>
);
}