frontend: add AddSongPanel

frontend/src/components/SongTable.tsx

@@ -1,68 +1,22 @@
-import React, { useEffect, useRef, useState } from "react";
-import { FaPlay } from 'react-icons/fa';
+import React from "react";
+import SongRow from "./SongRow";
 
-const SongRow: React.FC<{ song: string }> = ({ song }) => {
-  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">
-          <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>
-  );
-};
+interface SongTableProps {
+  songs: string[];
+  onDelete: (index: number) => void;
+  onSkipTo: (index: number) => void;
+}
 
-const SongTable: React.FC = () => {
-  const songs = Array.from({ length: 20 }, (_, index) => `Song ${index + 1}`);
-  
+const SongTable: React.FC<SongTableProps> = ({ songs, onDelete, onSkipTo }) => {
   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>
   );