From 72dfa951b4b237c01302d9964d4713dc9001a185 Mon Sep 17 00:00:00 2001
From: Geert Rademakes <g26107@eon.com>
Date: Wed, 6 Aug 2025 14:53:21 +0200
Subject: [PATCH] feat: Add Music Storage page to frontend routing
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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
---
 packages/frontend/src/App.tsx | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/src/App.tsx b/packages/frontend/src/App.tsx
index dbdcc70..2dffd3d 100644
--- a/packages/frontend/src/App.tsx
+++ b/packages/frontend/src/App.tsx
@@ -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={