frontend: add AddSongPanel

frontend/src/components/AddSongPanel.tsx

@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+
+interface AddSongPanelProps {
+  onAddURL: (url: string) => void;
+}
+
+const AddSongPanel: React.FC<AddSongPanelProps> = ({ onAddURL }) => {
+  const [url, setUrl] = useState('');
+
+  const handleAddURL = () => {
+    onAddURL(url);
+    setUrl('');
+  }
+  
+  return (
+    <div className="flex items-center justify-center h-fit bg-black/50 rounded-b-2xl">
+      <div className="flex flex-row items-center gap-4 w-full px-8 py-4">
+        <input 
+          type="text" 
+          value={url} 
+          onChange={(e) => setUrl(e.target.value)} 
+          placeholder="Add any URL..." 
+          className="p-2 rounded-lg border-2 border-violet-500 flex-grow" 
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              handleAddURL();
+            }
+          }}
+        />
+
+        <button 
+          className="bg-violet-500 text-white p-2 rounded-lg px-4 border-2 border-violet-500" 
+          onClick={handleAddURL}
+        > 
+          Add
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default 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 NowPlaying from './NowPlaying';
-import { FaPlay, FaPause, FaStepForward, FaStepBackward } from 'react-icons/fa';
+import AddSongPanel from './AddSongPanel';
-
-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>
-  );
-};
-
-
 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"} 
+          songName={nowPlayingSong || "(Not Playing)"} 
-          fileName={"Song Name.mp3"} 
+          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>
   );

frontend/src/components/NowPlaying.tsx

@@ -0,0 +1,40 @@
+import React, { HTMLAttributes } from 'react';
+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>
+  );
+};
+
+export default NowPlaying;

frontend/src/components/SongRow.tsx

@@ -0,0 +1,68 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { FaPlay } from 'react-icons/fa';
+
+interface SongRowProps {
+  song: string;
+  onDelete: () => void;
+  onPlay: () => void;
+}
+
+const SongRow: React.FC<SongRowProps> = ({ song, onDelete, onPlay }) => {
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (buttonRef.current && !buttonRef.current.contains(event.target as Node)) {
+        setShowDeleteConfirm(false);
+      }
+    };
+    
+    if (showDeleteConfirm) {
+      document.addEventListener('click', handleClickOutside);
+    }
+    
+    return () => {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  }, [showDeleteConfirm]);
+  
+  return (
+    <div className="flex flex-row w-full h-[100px] bg-black/40 px-2 py-5 items-center border-b gap-2 hover:bg-black/50 transition-colors">
+      <div className="flex flex-row gap-2">
+        <button 
+          className="text-white/40 hover:text-white transition-colors px-3 py-1 bg-white/10 rounded"
+          onClick={onPlay}
+        >
+          <FaPlay size={12} />
+        </button>
+      </div>
+      
+      <div className="flex-grow min-w-0">
+        <div className="text-white text-md truncate">
+          {song}
+        </div>
+      </div>
+      
+      <div className="flex flex-row gap-2">
+        <button
+          ref={buttonRef}
+          className="text-red-500 px-3 py-1 bg-red-500/10 rounded"
+          onClick={(e) => {
+            e.stopPropagation();
+            if (showDeleteConfirm) {
+              setShowDeleteConfirm(false);
+              onDelete();
+            } else {
+              setShowDeleteConfirm(true);
+            }
+          }}
+        >
+          {showDeleteConfirm ? 'Delete' : '×'}
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default SongRow;

frontend/src/components/SongTable.tsx

@@ -1,68 +1,22 @@
-import React, { useEffect, useRef, useState } from "react";
+import React from "react";
-import { FaPlay } from 'react-icons/fa';
+import SongRow from "./SongRow";
 
-const SongRow: React.FC<{ song: string }> = ({ song }) => {
+interface SongTableProps {
-  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+  songs: string[];
-  const buttonRef = useRef<HTMLButtonElement>(null);
+  onDelete: (index: number) => void;
-  
+  onSkipTo: (index: number) => void;
-  useEffect(() => {
+}
-    const handleClickOutside = (event: MouseEvent) => {
-      if (buttonRef.current && !buttonRef.current.contains(event.target as Node)) {
-        setShowDeleteConfirm(false);
-      }
-    };
-    
-    if (showDeleteConfirm) {
-      document.addEventListener('click', handleClickOutside);
-    }
-    
-    return () => {
-      document.removeEventListener('click', handleClickOutside);
-    };
-  }, [showDeleteConfirm]);
-  
-  return (
-    <div className="flex flex-row w-full h-[100px] bg-black/40 px-2 py-5 items-center border-b gap-2 hover:bg-black/50 transition-colors">
-      <div className="flex flex-row gap-2">
-        <button className="text-white/40 hover:text-white transition-colors px-3 py-1 bg-white/10 rounded">
-          <FaPlay size={12} />
-        </button>
-      </div>
-      
-      <div className="flex-grow min-w-0">
-        <div className="text-white text-md truncate">
-          {song}
-        </div>
-      </div>
-      
-      <div className="flex flex-row gap-2">
-        <button
-          ref={buttonRef}
-          className="text-red-500 px-3 py-1 bg-red-500/10 rounded"
-          onClick={(e) => {
-            e.stopPropagation();
-            if (showDeleteConfirm) {
-              // Handle delete here
-              console.log('Deleting:', song);
-            } else {
-              setShowDeleteConfirm(true);
-            }
-          }}
-        >
-          {showDeleteConfirm ? 'Delete' : '×'}
-        </button>
-      </div>
-    </div>
-  );
-};
 
-const SongTable: React.FC = () => {
+const SongTable: React.FC<SongTableProps> = ({ songs, onDelete, onSkipTo }) => {
-  const songs = Array.from({ length: 20 }, (_, index) => `Song ${index + 1}`);
-  
   return (
     <div className="flex flex-col w-full h-full overflow-y-auto border-y">
       {songs.map((song, index) => (
-        <SongRow key={index} song={song} />
+        <SongRow 
+          key={index} 
+          song={song} 
+          onDelete={() => onDelete(index)} 
+          onPlay={() => onSkipTo(index)} 
+        />
       ))}
     </div>
   );