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

frontend/src/screens/StationPage.jsx

@@ -0,0 +1,115 @@
+import React, { useState } from 'react';
+import AddSongModal from './AddSongModal';
+
+function StationPage() {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [currentSong, setCurrentSong] = useState({
+    title: "No song playing",
+    artist: "Add songs to get started",
+    isPlaying: false
+  });
+
+  // Empty song list - no songs initially
+  const recommendedSongs = [];
+
+  const handlePlayPause = () => {
+    setCurrentSong(prev => ({ ...prev, isPlaying: !prev.isPlaying }));
+  };
+
+  const handleNext = () => {
+    console.log('Next song');
+  };
+
+  const handlePrevious = () => {
+    console.log('Previous song');
+  };
+
+  const openModal = () => {
+    setIsModalOpen(true);
+  };
+
+  const closeModal = () => {
+    setIsModalOpen(false);
+  };
+
+  return (
+    <div className="station-page">
+      <div className="animated-background">
+        {[...Array(20)].map((_, i) => (
+          <div key={i} className={`star star-${i + 1}`}></div>
+        ))}
+      </div>
+
+      <div className="station-content">
+        <header className="station-header">
+          <h1>Serena Station</h1>
+          <p className="station-subtitle">Collaborative Music Experience</p>
+        </header>
+
+        <div className="media-controls-section">
+          <div className="current-song">
+            <h3>{currentSong.title}</h3>
+            <p>{currentSong.artist}</p>
+          </div>
+          
+          <div className="media-controls">
+            <button className="control-btn" onClick={handlePrevious}>
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+                <path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/>
+              </svg>
+            </button>
+            
+            <button className="control-btn play-pause" onClick={handlePlayPause}>
+              {currentSong.isPlaying ? (
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+                  <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
+                </svg>
+              ) : (
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+                  <path d="M8 5v14l11-7z"/>
+                </svg>
+              )}
+            </button>
+            
+            <button className="control-btn" onClick={handleNext}>
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+                <path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/>
+              </svg>
+            </button>
+          </div>
+        </div>
+
+        <div className="songs-section">
+          <div className="section-header">
+            <h2>Song Queue</h2>
+            <button className="add-song-btn" onClick={openModal}>
+              Add Song
+            </button>
+          </div>
+          
+          <div className="songs-list">
+            {recommendedSongs.length === 0 ? (
+              <div className="empty-songs-state">
+                <p>No songs in queue yet. Add some songs to get started!</p>
+              </div>
+            ) : (
+              recommendedSongs.map(song => (
+                <div key={song.id} className="song-item">
+                  <div className="song-info">
+                    <h4>{song.title}</h4>
+                    <p>{song.artist}</p>
+                  </div>
+                  <span className="song-duration">{song.duration}</span>
+                </div>
+              ))
+            )}
+          </div>
+        </div>
+      </div>
+
+      {isModalOpen && <AddSongModal onClose={closeModal} />}
+    </div>
+  );
+}
+
+export default StationPage;