Włączanie i wyłączanie trybu komentowania

assets/css/comments.css

@@ -222,4 +222,50 @@ input:checked+.slider:before {
     z-index: 100001;
     pointer-events: auto !important;
     /* Żeby dało się w nie klikać nawet w trybie blokady */
+}
+
+/* Ukrywanie pinesek */
+body.comments-hidden .comment-marker {
+    display: none !important;
+}
+
+/* Dialog listy wszystkich komentarzy */
+#all-comments-dialog {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: white;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
+    z-index: 100005;
+    width: 500px;
+    max-width: 90vw;
+    display: none;
+}
+
+#all-comments-dialog-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 100004;
+    display: none;
+    backdrop-filter: blur(2px);
+}
+
+.comment-list-item {
+    padding: 10px;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.comment-list-item:last-child {
+    border-bottom: none;
+}
+
+.comment-list-item:hover {
+    background: #f9f9f9;
 }

assets/js/comments.js

@@ -17,15 +17,35 @@
         const bar = document.createElement('div');
         bar.id = 'prototype-topbar';
         bar.innerHTML = `
-            <div style="font-weight: bold; font-size: 14px;">
-                <span style="color: #696cff;">Magico</span> Feedback
+            <div style="display:flex; align-items:center;">
+                <div style="font-weight: bold; font-size: 14px; margin-right: 20px;">
+                    <span style="color: #696cff;">Magico</span> Feedback
+                </div>
             </div>
-            <div class="mode-switch">
-                <span style="font-size: 13px; margin-right: 8px;">Tryb Komentowania</span>
-                <label class="switch-label">
-                    <input type="checkbox" id="comment-toggle">
-                    <span class="slider"></span>
-                </label>
+            
+            <div style="display:flex; align-items:center; gap: 20px;">
+                 <!-- Licznik -->
+                 <div id="comments-count-badge" style="cursor:pointer; font-size:13px; display:flex; align-items:center; gap:5px; padding: 5px 10px; background: rgba(255,255,255,0.1); border-radius: 4px;">
+                    <span style="opacity:0.8;">Komentarzy:</span>
+                    <span id="comments-count-val" style="background:#696cff; padding:2px 8px; border-radius:10px; font-weight:bold; font-size:11px;">0</span>
+                 </div>
+
+                 <!-- Pokaż/Ukryj -->
+                 <div style="display:flex; align-items:center; font-size:13px; gap: 5px;">
+                    <input type="checkbox" id="comments-visibility-toggle" checked style="cursor:pointer;">
+                    <label for="comments-visibility-toggle" style="cursor:pointer; margin-bottom:0;">Pokaż pineski</label>
+                 </div>
+
+                 <div style="width: 1px; height: 20px; background: rgba(255,255,255,0.2);"></div>
+
+                 <!-- Tryb -->
+                 <div class="mode-switch">
+                    <span style="font-size: 13px; margin-right: 8px;">Tryb Komentowania</span>
+                    <label class="switch-label">
+                        <input type="checkbox" id="comment-toggle">
+                        <span class="slider"></span>
+                    </label>
+                </div>
             </div>
         `;
         document.body.appendChild(bar);
@@ -42,10 +62,19 @@
                     <button id="save-comment" class="btn btn-sm btn-primary">Zapisz</button>
                 </div>
             </div>
+
+            <!-- Modal Lista Wszystkich -->
+            <div id="all-comments-dialog-overlay"></div>
+            <div id="all-comments-dialog">
+                <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:15px; border-bottom:1px solid #eee; padding-bottom:10px;">
+                    <h5 style="margin:0;">Wszystkie komentarze</h5>
+                    <button id="close-all-comments" class="btn btn-sm btn-outline-secondary">X</button>
+                </div>
+                <div id="all-comments-list" style="max-height:60vh; overflow-y:auto; padding-right:5px;"></div>
+            </div>
         `;
         document.body.insertAdjacentHTML('beforeend', modalHtml);
 
-        // Listenery UI
         // Listenery UI
         const toggle = document.getElementById('comment-toggle');
 
@@ -68,6 +97,31 @@
             }
         });
 
+        // Toggle visibility
+        const visToggle = document.getElementById('comments-visibility-toggle');
+        const savedVis = localStorage.getItem('magico_markers_visible');
+        if (savedVis === 'false') {
+            visToggle.checked = false;
+            document.body.classList.add('comments-hidden');
+        }
+
+        visToggle.addEventListener('change', (e) => {
+            if (e.target.checked) {
+                document.body.classList.remove('comments-hidden');
+                localStorage.setItem('magico_markers_visible', 'true');
+            } else {
+                document.body.classList.add('comments-hidden');
+                localStorage.setItem('magico_markers_visible', 'false');
+            }
+        });
+
+        // Open list dialog
+        document.getElementById('comments-count-badge').addEventListener('click', showAllCommentsDialog);
+        document.getElementById('close-all-comments').addEventListener('click', () => {
+            document.getElementById('all-comments-dialog').style.display = 'none';
+            document.getElementById('all-comments-dialog-overlay').style.display = 'none';
+        });
+
         // --- RESTORE SESSION ---
         const savedMode = localStorage.getItem('magico_comment_mode');
         if (savedMode === 'true') {
@@ -314,7 +368,11 @@
 
         // Grupowanie komentarzy po selektorze
         const grouped = {};
+        let activeCount = 0;
+
         markersData.forEach((c) => {
+            if (c.is_resolved == 0) activeCount++;
+
             // Pomiń rozwiązane, jeśli chcemy je ukrywać (na razie pokazujemy wszystkie, albo tylko nierozwiązane?)
             // User: "archiwum zmienia flagę is_resolved". Zakładamy że archiwum = ukryte?
             // "Archiwum" zwykle oznacza ukryte. Ukryjmy rozwiązane.
@@ -324,6 +382,10 @@
             grouped[c.dom_selector].push(c);
         });
 
+        // Aktualizacja licznika na pasku
+        const cntEl = document.getElementById('comments-count-val');
+        if (cntEl) cntEl.textContent = activeCount;
+
         Object.keys(grouped).forEach((selector, index) => {
             const commentsList = grouped[selector];
             if (!commentsList.length) return;
@@ -610,4 +672,68 @@
         attributeFilter: ['class', 'style', 'hidden']
     });
 
+    // --- 7. DIALOG Z LISTĄ WSZYSTKICH ---
+    function showAllCommentsDialog() {
+        const dialog = document.getElementById('all-comments-dialog');
+        const overlay = document.getElementById('all-comments-dialog-overlay');
+        const list = document.getElementById('all-comments-list');
+
+        // Budowanie listy
+        // Filtrujemy tylko nierozwiązane??? W sumie user chciał "wszystkimi zebranymi z tego ekranu".
+        // Pokażmy wszystkie uporządkowane od najnowszych, z oznaczeniem rozwiązanych.
+
+        // Kopia i sortowanie
+        const sorted = [...markersData].sort((a, b) => b.id - a.id);
+
+        if (sorted.length === 0) {
+            list.innerHTML = '<p style="text-align:center; color:#999; padding:20px;">Brak komentarzy na tym ekranie.</p>';
+        } else {
+            let html = '';
+            sorted.forEach(c => {
+                const bg = c.is_resolved == 1 ? '#f0fff0' : '#fff';
+                const status = c.is_resolved == 1 ? '<span class="badge bg-success" style="font-size:10px;">Rozwiązany</span>' : '';
+
+                html += `
+                <div class="comment-list-item" style="background:${bg};">
+                    <div style="display:flex; justify-content:space-between; margin-bottom:5px;">
+                        <div>
+                            <strong>${c.author || 'Anonim'}</strong> 
+                            ${status}
+                        </div>
+                        <small style="color:#999;">${c.created_at}</small>
+                    </div>
+                    <p style="margin-bottom:8px;">${c.comment}</p>
+                    <div style="font-size:11px; color:#888; margin-bottom:5px;">
+                        Element: <code>${c.dom_selector.substring(0, 30)}...</code>
+                    </div>
+                    <div style="text-align:right;">
+                        ${c.is_resolved == 0 ? `<button class="btn btn-sm btn-outline-success btn-resolve-list" data-id="${c.id}">Rozwiąż</button>` : ''}
+                        <button class="btn btn-sm btn-outline-danger btn-delete-list" data-id="${c.id}">Usuń</button>
+                    </div>
+                </div>
+               `;
+            });
+            list.innerHTML = html;
+
+            // Listenery w liście
+            list.querySelectorAll('.btn-resolve-list').forEach(btn => {
+                btn.addEventListener('click', () => resolveComment(btn.dataset.id));
+            });
+            list.querySelectorAll('.btn-delete-list').forEach(btn => {
+                btn.addEventListener('click', () => deleteComment(btn.dataset.id));
+            });
+        }
+
+        dialog.style.display = 'block';
+        overlay.style.display = 'block';
+    }
+
+    // Dodajmy do renderMarkers aktualizację licznika
+    // Musimy przechwycić oryginalny renderMarkers wyżej
+    // Ale jesteśmy w module, więc po prostu dopiszmy to do renderMarkers
+
+    // W renderMarkers (linia ~300) dodać:
+    // document.getElementById('comments-count-val').textContent = markersData.filter(c => c.is_resolved == 0).length;
+    // Albo wszystkich? "Liczba komentarzy". Raczej wszystkich aktywnych.
+
 })();