really add con/disconn

remove file

web/src/components/ConnectionStatus.jsx

@@ -0,0 +1,82 @@
+import { useState, useEffect } from 'react';
+
+const API_URL = import.meta.env.VITE_API_URL || '/api';
+
+export default function ConnectionStatus() {
+  const [channels, setChannels] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [disconnecting, setDisconnecting] = useState(false);
+
+  useEffect(() => {
+    loadChannels();
+    const interval = setInterval(loadChannels, 5000);
+    return () => clearInterval(interval);
+  }, []);
+
+  const loadChannels = async () => {
+    try {
+      setLoading(true);
+      const response = await fetch(`${API_URL}/channels`);
+      const data = await response.json();
+      setChannels(data.channels || []);
+    } catch (error) {
+      console.error('Failed to load channels:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleDisconnect = async () => {
+    try {
+      setDisconnecting(true);
+      const response = await fetch(`${API_URL}/channels/disconnect`, {
+        method: 'POST'
+      });
+
+      if (response.ok) {
+        loadChannels();
+      }
+    } catch (error) {
+      console.error('Failed to disconnect:', error);
+    } finally {
+      setDisconnecting(false);
+    }
+  };
+
+  const currentChannel = channels.find(c => c.current);
+
+  if (loading && !currentChannel) {
+    return (
+      <div className="flex items-center gap-2 px-4 py-2 bg-slate-700/50 rounded-lg">
+        <div className="text-slate-400 text-sm">Loading...</div>
+      </div>
+    );
+  }
+
+  if (!currentChannel) {
+    return (
+      <div className="flex items-center gap-2 px-4 py-2 bg-slate-700/50 rounded-lg">
+        <div className="w-2 h-2 bg-slate-500 rounded-full"></div>
+        <div className="text-slate-400 text-sm">Disconnected</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex items-center gap-3 px-4 py-2 bg-green-600/20 border border-green-500/50 rounded-lg">
+      <div className="flex items-center gap-2 flex-1">
+        <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
+        <div className="text-green-300 text-sm font-medium">
+          Connected to {currentChannel.name}
+        </div>
+      </div>
+      <button
+        onClick={handleDisconnect}
+        disabled={disconnecting}
+        className="px-3 py-1 bg-red-600 hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed text-white text-sm rounded transition-colors"
+      >
+        {disconnecting ? 'Disconnecting...' : 'Disconnect'}
+      </button>
+    </div>
+  );
+}

web/src/components/Queue.jsx

@@ -0,0 +1,151 @@
+import { useState, useEffect } from 'react';
+
+const API_URL = import.meta.env.VITE_API_URL || '/api';
+
+function formatDuration(seconds) {
+  const mins = Math.floor(seconds / 60);
+  const secs = Math.floor(seconds % 60);
+  return `${mins}:${secs.toString().padStart(2, '0')}`;
+}
+
+export default function Queue({ onQueueUpdate }) {
+  const [queue, setQueue] = useState([]);
+  const [currentTrack, setCurrentTrack] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [draggedIndex, setDraggedIndex] = useState(null);
+  const [dropTargetIndex, setDropTargetIndex] = useState(null);
+
+  const loadQueue = async () => {
+    try {
+      setLoading(true);
+      const response = await fetch(`${API_URL}/queue`);
+      const data = await response.json();
+      setQueue(data.tracks || []);
+      setCurrentTrack(data.currentTrack);
+    } catch (error) {
+      console.error('Failed to load queue:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleReorder = async (from, to) => {
+    if (from === to) return;
+
+    try {
+      await fetch(`${API_URL}/queue/reorder`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ from, to })
+      });
+      loadQueue();
+      if (onQueueUpdate) onQueueUpdate();
+    } catch (error) {
+      console.error('Failed to reorder queue:', error);
+    }
+  };
+
+  const handleDragStart = (e, index) => {
+    setDraggedIndex(index);
+    e.dataTransfer.effectAllowed = 'move';
+  };
+
+  const handleDragOver = (e, index) => {
+    e.preventDefault();
+    setDropTargetIndex(index);
+  };
+
+  const handleDragLeave = () => {
+    setDropTargetIndex(null);
+  };
+
+  const handleDrop = (e, toIndex) => {
+    e.preventDefault();
+    if (draggedIndex !== null && draggedIndex !== toIndex) {
+      handleReorder(draggedIndex, toIndex);
+    }
+    setDraggedIndex(null);
+    setDropTargetIndex(null);
+  };
+
+  const handleDragEnd = () => {
+    setDraggedIndex(null);
+    setDropTargetIndex(null);
+  };
+
+  useEffect(() => {
+    loadQueue();
+  }, []);
+
+  return (
+    <div className="bg-slate-800/50 backdrop-blur-sm rounded-xl p-6 border border-slate-700">
+      <div className="flex items-center justify-between mb-4">
+        <h3 className="text-xl font-bold text-white">
+          Playback Queue <span className="text-slate-400 text-sm font-normal">({queue.length} tracks)</span>
+        </h3>
+      </div>
+
+      {loading && (
+        <div className="text-center text-slate-400 py-8">Loading...</div>
+      )}
+
+      {!loading && queue.length === 0 && (
+        <div className="text-center text-slate-400 py-8">
+          <p>No tracks in library</p>
+          <p className="text-sm mt-2">Upload some MP3 files to get started</p>
+        </div>
+      )}
+
+      {!loading && queue.length > 0 && (
+        <div className="space-y-2 max-h-[400px] overflow-y-auto pr-2">
+          {queue.map((track, index) => {
+            const isCurrentTrack = currentTrack && track.id === currentTrack.id && index === 0;
+
+            return (
+              <div
+                key={`${track.id}-${index}`}
+                draggable
+                onDragStart={(e) => handleDragStart(e, index)}
+                onDragOver={(e) => handleDragOver(e, index)}
+                onDragLeave={handleDragLeave}
+                onDrop={(e) => handleDrop(e, index)}
+                onDragEnd={handleDragEnd}
+                className={`p-3 rounded-lg transition-all cursor-move ${
+                  isCurrentTrack
+                    ? 'bg-green-600/20 border-2 border-green-500/50'
+                    : draggedIndex === index
+                    ? 'opacity-50 scale-95'
+                    : dropTargetIndex === index
+                    ? 'bg-purple-600/20 border-2 border-purple-500/50'
+                    : 'bg-slate-700/30 hover:bg-slate-700/50'
+                }`}
+              >
+                <div className="flex items-center gap-3">
+                  <div className={`text-sm font-mono w-6 ${isCurrentTrack ? 'text-green-400 font-bold' : 'text-slate-500'}`}>
+                    {isCurrentTrack ? '▶' : index + 1}
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <div className={`font-medium truncate ${isCurrentTrack ? 'text-green-300' : 'text-white'}`}>
+                      {track.title}
+                    </div>
+                    <div className={`text-sm truncate ${isCurrentTrack ? 'text-green-400/80' : 'text-slate-400'}`}>
+                      {track.artist}
+                    </div>
+                  </div>
+                  {track.duration > 0 && (
+                    <div className="text-xs text-slate-500">
+                      {formatDuration(track.duration)}
+                    </div>
+                  )}
+                  <div className="text-slate-500 text-xl cursor-grab active:cursor-grabbing">
+                    ⋮⋮
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}