frontend: add AddSongPanel

frontend/src/components/App.tsx

@@ -1,60 +1,56 @@
-import React, { HTMLAttributes, useState } from 'react';
+import React, { useState } from 'react';
 import SongTable from './SongTable';
-import classNames from 'classnames';
-import { FaPlay, FaPause, FaStepForward, FaStepBackward } from 'react-icons/fa';
-
-interface NowPlayingProps extends HTMLAttributes<HTMLDivElement> {
-  songName: string;
-  fileName: string;
-  isPlaying: boolean;
-  onPlayPause: () => void;
-  onStepForward: () => void;
-  onStepBackward: () => void; 
-}
-
-const NowPlaying: React.FC<NowPlayingProps> = (props) => {
-  return (
-    <div className={classNames(props.className, 'bg-violet-100/50 h-[150px] p-5')}>
-      <div className="flex flex-col w-full gap-2">
-        <div className="flex flex-row w-full h-full bg-black/50 rounded-lg p-5 items-center">
-          <div className="flex-grow">
-            <div className="text-white text-lg font-bold">{props.songName}</div>
-            <div className="text-white text-sm">{props.fileName}</div>
-          </div>
-          <div className="flex flex-row gap-4">
-            <button className="text-white hover:text-violet-300 transition-colors" onClick={props.onStepBackward}>
-              <FaStepBackward size={24} />
-            </button>
-            <button className="text-white hover:text-violet-300 transition-colors" onClick={props.onPlayPause}>
-              {props.isPlaying ? <FaPause size={24} /> : <FaPlay size={24} />}
-            </button>
-            <button className="text-white hover:text-violet-300 transition-colors" onClick={props.onStepForward}>
-              <FaStepForward size={24} />
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-
+import NowPlaying from './NowPlaying';
+import AddSongPanel from './AddSongPanel';
 const App: React.FC = () => {
   const [isPlaying, setIsPlaying] = useState(false);
+  const [nowPlayingSong, setNowPlayingSong] = useState<string | null>(null);
+  const [nowPlayingFileName, setNowPlayingFileName] = useState<string | null>(null);
+  const [songs, setSongs] = useState<string[]>([]);
+
+  const handleAddURL = (url: string) => {
+    const urlToAdd = url.trim();
+    if (urlToAdd) {
+      setSongs([...songs, urlToAdd]);
+    }
+  };
+
+  const handleDelete = (index: number) => {
+    setSongs(songs.filter((_, i) => i !== index));
+  };
+
+  const handleSkipTo = (index: number) => {
+    setNowPlayingSong(songs[index]);
+    setNowPlayingFileName(songs[index].split('/').pop() || null);
+    setIsPlaying(true);
+  };
 
   return (
     <div className="flex items-center justify-center h-screen w-screen bg-black py-10">
       <div className="bg-violet-900 w-full md:max-w-xl h-full md:max-h-xl md:border md:rounded-2xl flex flex-col">
         <NowPlaying 
           className="flex flex-row md:rounded-t-2xl" 
-          songName={"Song Name"} 
-          fileName={"Song Name.mp3"} 
+          songName={nowPlayingSong || "(Not Playing)"} 
+          fileName={nowPlayingFileName || ""} 
           isPlaying={isPlaying} 
           onPlayPause={() => setIsPlaying(!isPlaying)} 
           onStepForward={() => {}} 
           onStepBackward={() => {}} 
         />
-        <SongTable />
+
+        {songs.length > 0 ? (
+          <SongTable 
+            songs={songs}
+            onDelete={handleDelete} 
+            onSkipTo={handleSkipTo} 
+          />
+        ) : (
+          <div className="flex items-center justify-center h-full">
+            <div className="text-white text-2xl font-bold">Playlist is empty</div>
+          </div>
+        )}
+
+        <AddSongPanel onAddURL={handleAddURL} />
       </div>
     </div>
   );