feat: przebudowa systemu kolejki od podstaw z użyciem wskaźnika indeksu (nieusuwalna kolejka z możliwością przeskoku i przewijania)

static/app.js

@@ -409,7 +409,7 @@ function updateUI(status) {
     
     // 6. Queue render (if not currently dragging)
     if (!isDragging) {
-        renderQueue(status.queue);
+        renderQueue(status.queue, status.queue_index);
         renderHistory(status.history || []);
     }
     
@@ -418,7 +418,7 @@ function updateUI(status) {
 }
 
 // Render Queue Items list
-function renderQueue(queue) {
+function renderQueue(queue, queueIndex = -1) {
     // Clear list but keep empty queue message
     const items = queueList.querySelectorAll('.queue-item');
     items.forEach(el => el.remove());
@@ -434,7 +434,17 @@ function renderQueue(queue) {
     
     queue.forEach((track, idx) => {
         const li = document.createElement('li');
-        li.className = 'queue-item';
+        let classes = 'queue-item';
+        let indexHtml = `<div class="queue-index">${idx + 1}</div>`;
+        
+        if (idx === queueIndex) {
+            classes += ' playing-item';
+            indexHtml = `<div class="queue-index" title="Aktualnie odtwarzane"><i data-lucide="volume-2" style="color: var(--primary);"></i></div>`;
+        } else if (idx < queueIndex) {
+            classes += ' played-item';
+        }
+        
+        li.className = classes;
         li.setAttribute('draggable', 'true');
         li.setAttribute('data-id', track.id);
         li.setAttribute('data-index', idx);
@@ -443,11 +453,14 @@ function renderQueue(queue) {
             <div class="drag-handle" title="Przeciągnij, aby zmienić kolejność">
                 <i data-lucide="grip-vertical"></i>
             </div>
-            <div class="queue-index">${idx + 1}</div>
+            ${indexHtml}
             <div class="queue-track-info">
                 <div class="queue-track-title" title="${track.title}">${track.title}</div>
             </div>
             <div class="queue-item-actions">
+                <button class="btn-action-icon" onclick="jumpToTrack(${idx})" title="Odtwarzaj od tej pozycji">
+                    <i data-lucide="play"></i>
+                </button>
                 <button class="btn-action-icon" onclick="moveItemUp(${idx})" title="Przesuń w górę">
                     <i data-lucide="arrow-up"></i>
                 </button>
@@ -639,6 +652,21 @@ async function removeTrack(id) {
     }
 }
 
+// Jump to specific track index in queue
+async function jumpToTrack(idx) {
+    try {
+        const res = await fetch('/api/jump', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ index: idx })
+        });
+        if (!res.ok) throw new Error('Jump failed');
+        showToast('Zmieniono odtwarzany utwór', 'info');
+    } catch (err) {
+        showToast('Nie udało się zmienić utworu', 'error');
+    }
+}
+
 // Toggle Connection
 async function toggleConnection() {
     if (currentStatus && currentStatus.active_voice_channel) {

static/style.css

@@ -776,6 +776,23 @@ body {
     background: rgba(139, 92, 246, 0.08);
 }
 
+/* Playing state */
+.queue-item.playing-item {
+    background: rgba(139, 92, 246, 0.15);
+    border-color: var(--primary);
+    box-shadow: 0 0 15px var(--primary-glow);
+}
+
+.queue-item.playing-item .queue-track-title {
+    color: var(--primary-light);
+    font-weight: 600;
+}
+
+/* Played state */
+.queue-item.played-item {
+    opacity: 0.55;
+}
+
 .drag-handle {
     cursor: grab;
     color: var(--text-muted);