Merge remote-tracking branch 'origin/HEAD' into noah-dev

frontend/src/screens/AddSongModal.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+function AddSongModal({ onClose }) {
+  const handleBackdropClick = (e) => {
+    if (e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+
+  return (
+    <div className="modal-backdrop" onClick={handleBackdropClick}>
+      <div className="modal-content">
+        <div className="modal-header">
+          <h2>Add Song</h2>
+          <button className="close-btn" onClick={onClose}>
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
+            </svg>
+          </button>
+        </div>
+        
+        <div className="modal-body">
+          <p>Song addition functionality coming soon...</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default AddSongModal;