feat: ograniczenie widocznych plików do 10 ostatnio używanych, dodanie okna modalnego z całą bazą plików oraz zmiana ikony na plus przy przycisku Dodaj

static/app.js

@@ -53,6 +53,12 @@ const uploadStatusText = document.getElementById('upload-status-text');
 const uploadsList = document.getElementById('uploads-list');
 const emptyUploadsMsg = document.getElementById('empty-uploads-msg');
 const uploadsCountBadge = document.getElementById('uploads-count');
+const btnOpenAllUploads = document.getElementById('btn-open-all-uploads');
+const btnAllUploadsCount = document.getElementById('btn-all-uploads-count');
+const uploadsModal = document.getElementById('uploads-modal');
+const btnCloseUploads = document.getElementById('btn-close-uploads');
+const modalUploadsList = document.getElementById('modal-uploads-list');
+const emptyModalUploadsMsg = document.getElementById('empty-modal-uploads-msg');
 const historyList = document.getElementById('history-list');
 const emptyHistoryMsg = document.getElementById('empty-history-msg');
 const historyCountBadge = document.getElementById('history-count');
@@ -170,6 +176,15 @@ function bindEvents() {
         });
     }
 
+    // Uploads Modal Events
+    if (btnOpenAllUploads) btnOpenAllUploads.addEventListener('click', openUploadsModal);
+    if (btnCloseUploads) btnCloseUploads.addEventListener('click', closeUploadsModal);
+    if (uploadsModal) {
+        uploadsModal.addEventListener('click', (e) => {
+            if (e.target === uploadsModal) closeUploadsModal();
+        });
+    }
+
     // Upload Events
     if (btnSelectFile && fileInput) {
         btnSelectFile.addEventListener('click', () => fileInput.click());
@@ -848,20 +863,33 @@ async function fetchUploads() {
     }
 }
 
-// Render Uploaded Files
-function renderUploads(files) {
-    if (!uploadsList) return;
-    const items = uploadsList.querySelectorAll('.queue-item');
+let allUploadedFiles = [];
+
+// Open Uploads Modal
+function openUploadsModal() {
+    if (uploadsModal) {
+        uploadsModal.style.display = 'flex';
+        renderModalUploads(allUploadedFiles);
+    }
+}
+
+// Close Uploads Modal
+function closeUploadsModal() {
+    if (uploadsModal) uploadsModal.style.display = 'none';
+}
+
+// Render Modal Uploads (All files)
+function renderModalUploads(files) {
+    if (!modalUploadsList) return;
+    const items = modalUploadsList.querySelectorAll('.queue-item');
     items.forEach(el => el.remove());
     
     if (!files || files.length === 0) {
-        emptyUploadsMsg.style.display = 'flex';
-        uploadsCountBadge.textContent = '0 plików';
+        if (emptyModalUploadsMsg) emptyModalUploadsMsg.style.display = 'flex';
         return;
     }
     
-    emptyUploadsMsg.style.display = 'none';
-    uploadsCountBadge.textContent = `${files.length} ${files.length === 1 ? 'plik' : files.length < 5 ? 'pliki' : 'plików'}`;
+    if (emptyModalUploadsMsg) emptyModalUploadsMsg.style.display = 'none';
     
     files.forEach(file => {
         const li = document.createElement('li');
@@ -877,7 +905,55 @@ function renderUploads(files) {
             </div>
             <div class="queue-item-actions" style="display: flex; gap: 6px; align-items: center;">
                 <button class="btn btn-primary" style="padding: 4px 10px; font-size: 0.8rem; display: flex; align-items: center; gap: 4px;" onclick="playUploadedFile('${safeFilename}')" title="Dodaj do kolejki">
-                    <i data-lucide="play"></i> Dodaj
+                    <i data-lucide="plus"></i> Dodaj
+                </button>
+                <button class="btn-action-icon delete" onclick="deleteUploadedFile('${safeFilename}')" title="Usuń z serwera">
+                    <i data-lucide="trash-2"></i>
+                </button>
+            </div>
+        `;
+        modalUploadsList.appendChild(li);
+    });
+    lucide.createIcons();
+}
+
+// Render Uploaded Files (Top 10 most recent on dashboard panel)
+function renderUploads(files) {
+    allUploadedFiles = files || [];
+    if (btnAllUploadsCount) btnAllUploadsCount.textContent = allUploadedFiles.length;
+    
+    if (!uploadsList) return;
+    const items = uploadsList.querySelectorAll('.queue-item');
+    items.forEach(el => el.remove());
+    
+    if (!files || files.length === 0) {
+        emptyUploadsMsg.style.display = 'flex';
+        uploadsCountBadge.textContent = '0 plików';
+        if (modalUploadsList) renderModalUploads([]);
+        return;
+    }
+    
+    emptyUploadsMsg.style.display = 'none';
+    uploadsCountBadge.textContent = `${files.length} ${files.length === 1 ? 'plik' : files.length < 5 ? 'pliki' : 'plików'}`;
+    
+    // Take only top 10 most recently used/uploaded
+    const top10 = files.slice(0, 10);
+    
+    top10.forEach(file => {
+        const li = document.createElement('li');
+        li.className = 'queue-item';
+        
+        const safeFilename = file.filename.replace(/'/g, "\\'");
+        
+        li.innerHTML = `
+            <div class="queue-index"><i data-lucide="file-audio"></i></div>
+            <div class="queue-track-info" style="flex: 1; min-width: 0;">
+                <div class="queue-track-title" title="${file.filename}" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">${file.filename}</div>
+                <div class="queue-track-artist">${file.size_mb} MB</div>
+            </div>
+            <div class="queue-item-actions" style="display: flex; gap: 6px; align-items: center;">
+                <button class="btn btn-primary" style="padding: 4px 10px; font-size: 0.8rem; display: flex; align-items: center; gap: 4px;" onclick="playUploadedFile('${safeFilename}')" title="Dodaj do kolejki">
+                    <i data-lucide="plus"></i> Dodaj
                 </button>
                 <button class="btn-action-icon delete" onclick="deleteUploadedFile('${safeFilename}')" title="Usuń z serwera">
                     <i data-lucide="trash-2"></i>
@@ -886,6 +962,11 @@ function renderUploads(files) {
         `;
         uploadsList.appendChild(li);
     });
+    
+    if (uploadsModal && uploadsModal.style.display !== 'none') {
+        renderModalUploads(allUploadedFiles);
+    }
+    
     lucide.createIcons();
 }