From 7cc890557d06046fd1391c16c3fa4607a0f7b613 Mon Sep 17 00:00:00 2001
From: Geert Rademakes <g26107@eon.com>
Date: Wed, 6 Aug 2025 15:40:18 +0200
Subject: [PATCH] fix: Fix S3Configuration import error and integrate as Music
 Storage tab

- Fix FiTestTube import error by replacing with FiZap (which exists in react-icons)
- Integrate S3 Configuration as a tab in Music Storage page
- Remove standalone S3 Configuration route and header button
- Clean up unused imports and routes
- Improve organization by grouping S3 functionality with Music Storage

The S3 Configuration is now accessible as a tab within the Music Storage page,
and the import error has been resolved.
---
 packages/frontend/src/App.tsx                   | 14 --------------
 packages/frontend/src/pages/MusicStorage.tsx    |  9 +++++++++
 packages/frontend/src/pages/S3Configuration.tsx |  6 +++---
 3 files changed, 12 insertions(+), 17 deletions(-)

diff --git a/packages/frontend/src/App.tsx b/packages/frontend/src/App.tsx
index f7359c2..baffc3d 100644
--- a/packages/frontend/src/App.tsx
+++ b/packages/frontend/src/App.tsx
@@ -7,7 +7,6 @@ import { PlaylistManager } from "./components/PlaylistManager";
 import { SongDetails } from "./components/SongDetails";
 import { Configuration } from "./pages/Configuration";
 import { MusicStorage } from "./pages/MusicStorage";
-import { S3Configuration } from "./pages/S3Configuration";
 import { PersistentMusicPlayer } from "./components/PersistentMusicPlayer";
 import { MusicPlayerProvider, useMusicPlayer } from "./contexts/MusicPlayerContext";
 import { useXmlParser } from "./hooks/useXmlParser";
@@ -517,18 +516,6 @@ const RekordboxReader: React.FC = () => {
             🎵 Music Storage
           </Button>
 
-          {/* S3 Configuration Button */}
-          <Button
-            size="sm"
-            variant="ghost"
-            color="gray.300"
-            _hover={{ color: "white", bg: "whiteAlpha.200" }}
-            onClick={() => navigate('/s3-config')}
-            mr={2}
-          >
-            ⚙️ S3 Config
-          </Button>
-
           {/* Export Library Button */}
           <IconButton
             icon={<DownloadIcon />}
@@ -557,7 +544,6 @@ const RekordboxReader: React.FC = () => {
           <Routes>
             <Route path="/config" element={<Configuration />} />
             <Route path="/music-storage" element={<MusicStorage />} />
-            <Route path="/s3-config" element={<S3Configuration />} />
             <Route
               path="*"
               element={
diff --git a/packages/frontend/src/pages/MusicStorage.tsx b/packages/frontend/src/pages/MusicStorage.tsx
index 32c22b3..8eedb49 100644
--- a/packages/frontend/src/pages/MusicStorage.tsx
+++ b/packages/frontend/src/pages/MusicStorage.tsx
@@ -25,6 +25,7 @@ import {
 import { FiPlay, FiTrash2, FiMusic, FiRefreshCw } from 'react-icons/fi';
 import { MusicUpload } from '../components/MusicUpload';
 import { SongMatching } from '../components/SongMatching';
+import { S3Configuration } from './S3Configuration';
 import { useMusicPlayer } from '../contexts/MusicPlayerContext';
 import type { Song } from '../types/interfaces';
 
@@ -240,6 +241,9 @@ export const MusicStorage: React.FC = () => {
             <Tab color="gray.300" _selected={{ bg: "gray.700", color: "white", borderColor: "gray.600" }}>
               Song Matching
             </Tab>
+            <Tab color="gray.300" _selected={{ bg: "gray.700", color: "white", borderColor: "gray.600" }}>
+              S3 Configuration
+            </Tab>
           </TabList>
 
           <TabPanels flex={1} overflow="hidden">
@@ -378,6 +382,11 @@ export const MusicStorage: React.FC = () => {
             <TabPanel bg="gray.900" height="100%" overflowY="auto">
               <SongMatching />
             </TabPanel>
+
+            {/* S3 Configuration Tab */}
+            <TabPanel bg="gray.900" height="100%" overflowY="auto">
+              <S3Configuration />
+            </TabPanel>
           </TabPanels>
         </Tabs>
       </VStack>
diff --git a/packages/frontend/src/pages/S3Configuration.tsx b/packages/frontend/src/pages/S3Configuration.tsx
index da4518f..6372972 100644
--- a/packages/frontend/src/pages/S3Configuration.tsx
+++ b/packages/frontend/src/pages/S3Configuration.tsx
@@ -24,7 +24,7 @@ import {
   Switch,
   FormHelperText,
 } from '@chakra-ui/react';
-import { FiCheck, FiX, FiSettings, FiTestTube, FiSave } from 'react-icons/fi';
+import { FiCheck, FiX, FiSettings, FiZap, FiSave } from 'react-icons/fi';
 
 interface S3Config {
   endpoint: string;
@@ -330,7 +330,7 @@ export const S3Configuration: React.FC = () => {
         <Card bg="gray.800" borderColor="gray.700">
           <CardHeader>
             <HStack spacing={3}>
-              <Icon as={FiTestTube} w={5} h={5} color="blue.400" />
+              <Icon as={FiZap} w={5} h={5} color="blue.400" />
               <Heading size="md" color="white">Test Connection</Heading>
             </HStack>
           </CardHeader>
@@ -341,7 +341,7 @@ export const S3Configuration: React.FC = () => {
               </Text>
               
               <Button
-                leftIcon={isTesting ? <Spinner size="sm" /> : <FiTestTube />}
+                leftIcon={isTesting ? <Spinner size="sm" /> : <FiZap />}
                 onClick={testConnection}
                 isLoading={isTesting}
                 loadingText="Testing..."