feat: Add Music Storage page to frontend routing

- Add MusicStorage page import and route to App.tsx
- Add '🎵 Music Storage' button in the header for easy access
- Route: /music-storage for the Music Storage page
- All Music Storage components (MusicUpload, MusicPlayer, SongMatching) are already implemented
- Users can now access the S3 music storage functionality from the main interface

The Music Storage page provides:
- File upload with drag & drop
- Music library management
- Song matching with Rekordbox library
- Browser-based music player
This commit is contained in:
Geert Rademakes 2025-08-06 14:53:21 +02:00
parent 3fdd5d130f
commit 72dfa951b4

View File

@ -6,6 +6,7 @@ import { PaginatedSongList } from "./components/PaginatedSongList";
import { PlaylistManager } from "./components/PlaylistManager";
import { SongDetails } from "./components/SongDetails";
import { Configuration } from "./pages/Configuration";
import { MusicStorage } from "./pages/MusicStorage";
import { useXmlParser } from "./hooks/useXmlParser";
import { usePaginatedSongs } from "./hooks/usePaginatedSongs";
import { formatTotalDuration } from "./utils/formatters";
@ -486,12 +487,24 @@ export default function RekordboxReader() {
Rekordbox Reader
</Heading>
{/* Music Storage Button */}
<Button
size="sm"
variant="ghost"
color="gray.300"
_hover={{ color: "white", bg: "whiteAlpha.200" }}
onClick={() => navigate('/music-storage')}
ml="auto"
mr={2}
>
🎵 Music Storage
</Button>
{/* Export Library Button */}
<IconButton
icon={<DownloadIcon />}
aria-label="Export Library"
variant="ghost"
ml="auto"
mr={2}
color="gray.300"
_hover={{ color: "white", bg: "whiteAlpha.200" }}
@ -514,6 +527,7 @@ export default function RekordboxReader() {
<Box flex={1} overflow="hidden">
<Routes>
<Route path="/config" element={<Configuration />} />
<Route path="/music-storage" element={<MusicStorage />} />
<Route
path="*"
element={