ui: улучшить карточки findings — сворачивание, копирование кода, breadcrumbs

- Добавить collapsible details/summary для findings
- Добавить кнопку Copy с feedback 'Copied!'
- Добавить toggle All (Expand/Collapse)
- Добавить breadcrumbs на detail-страницах
- Добавить spinner для scanning статуса на detail-страницах
- Добавить empty state для findings
- Добавить scripts block в base.html

guarddog_nexus/web/templates/base.html

@@ -21,5 +21,6 @@
         {% block breadcrumbs %}{% endblock %}
         {% block content %}{% endblock %}
     </main>
+    {% block scripts %}{% endblock %}
 </body>
 </html>

guarddog_nexus/web/templates/package_detail.html

@@ -1,4 +1,14 @@
 {% extends "base.html" %}
+{% block title %}{{ pkg_name }} v{{ pkg_version }} — GuardDog Nexus{% endblock %}
+{% block breadcrumbs %}
+<div class="breadcrumbs">
+    <a href="/">Home</a>
+    <span class="separator">/</span>
+    <a href="/packages">Packages</a>
+    <span class="separator">/</span>
+    <span>{{ pkg_name }} v{{ pkg_version }}</span>
+</div>
+{% endblock %}
 {% block content %}
 <h1>{{ pkg_name }} <small>v{{ pkg_version }}</small></h1>
 
@@ -12,7 +22,9 @@
         <tr>
             <td><a href="/scans/{{ s.id }}">#{{ s.id }}</a></td>
             <td>{{ s.repository }}</td>
-            <td><span class="status-{{ s.status }}">{{ s.status }}</span></td>
+            <td>
+                {% if s.status == 'scanning' %}<span class="status-scanning"><span class="spinner"></span>scanning</span>{% else %}<span class="status-{{ s.status }}">{{ s.status }}</span>{% endif %}
+            </td>
             <td>{% if s.flagged %}<span class="flagged">{{ s.total_findings }}</span>{% else %}<span class="clean">0</span>{% endif %}</td>
             <td>{{ s.started_at.strftime('%Y-%m-%d %H:%M') if s.started_at }}</td>
         </tr>
@@ -20,18 +32,66 @@
     </tbody>
 </table>
 
-<h2>Findings ({{ findings|length }})</h2>
+<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;">
+    <h2>Findings ({{ findings|length }})</h2>
+    {% if findings|length > 1 %}
+    <button class="toggle-all-btn" onclick="toggleFindings()">Collapse All</button>
+    {% endif %}
+</div>
+
 {% if findings %}
-    {% for f in findings|sort(attribute='severity', reverse=true) %}
-    <article class="finding-card {{ f.severity }}">
-        <strong class="severity-{{ f.severity }}">[{{ f.severity }}]</strong>
-        <strong>{{ f.rule }}</strong>
-        {% if f.location %}<small> @ {{ f.location }}</small>{% endif %}
-        <p>{{ f.message }}</p>
-        {% if f.code %}<pre><code>{{ f.code }}</code></pre>{% endif %}
-    </article>
+    <div id="findings-container">
+    {% for f in findings %}
+    <details class="finding-card {{ f.severity }}" data-finding-id="{{ f.id }}">
+        <summary style="cursor: pointer; list-style: none; display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0;">
+            <strong class="severity-{{ f.severity }}">[{{ f.severity }}]</strong>
+            <strong>{{ f.rule }}</strong>
+            {% if f.location %}<small> @ {{ f.location }}</small>{% endif %}
+            <span style="margin-left: auto; font-size: 0.8rem; opacity: 0.5;">click to expand</span>
+        </summary>
+        <div class="finding-details">
+            <p>{{ f.message }}</p>
+            {% if f.code %}
+            <div style="display: flex; justify-content: flex-end; margin-bottom: 0.25rem;">
+                <button class="copy-btn" onclick="copyCode(this, 'code-{{ f.id }}')">Copy</button>
+            </div>
+            <pre><code id="code-{{ f.id }}">{{ f.code }}</code></pre>
+            {% endif %}
+        </div>
+    </details>
     {% endfor %}
+    </div>
 {% else %}
-    <p class="clean">No findings — package looks clean.</p>
+    <div class="empty-state" style="padding: 1rem;">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+        <h3>No findings</h3>
+        <small>Package looks clean.</small>
+    </div>
 {% endif %}
 {% endblock %}
+
+{% block scripts %}
+<script>
+function toggleFindings() {
+    const container = document.getElementById('findings-container');
+    const details = container.querySelectorAll('details');
+    const first = details[0];
+    const isOpen = first && first.open;
+    details.forEach(d => d.open = !isOpen);
+    const btn = container.parentElement.querySelector('.toggle-all-btn');
+    if (btn) btn.textContent = isOpen ? 'Expand All' : 'Collapse All';
+}
+
+function copyCode(btn, codeId) {
+    const code = document.getElementById(codeId).textContent;
+    navigator.clipboard.writeText(code).then(() => {
+        btn.textContent = 'Copied!';
+        btn.classList.add('copied');
+        setTimeout(() => {
+            btn.textContent = 'Copy';
+            btn.classList.remove('copied');
+        }, 2000);
+    });
+}
+</script>
+{% endblock %}

guarddog_nexus/web/templates/scan_detail.html

@@ -1,4 +1,14 @@
 {% extends "base.html" %}
+{% block title %}Scan #{{ scan.id }} — GuardDog Nexus{% endblock %}
+{% block breadcrumbs %}
+<div class="breadcrumbs">
+    <a href="/">Home</a>
+    <span class="separator">/</span>
+    <a href="/scans">Scans</a>
+    <span class="separator">/</span>
+    <span>Scan #{{ scan.id }}</span>
+</div>
+{% endblock %}
 {% block content %}
 <h1>Scan #{{ scan.id }}</h1>
 
@@ -7,25 +17,75 @@
     <tr><td><strong>Version</strong></td><td>{{ scan.package_version }}</td></tr>
     <tr><td><strong>Ecosystem</strong></td><td>{{ scan.ecosystem }}</td></tr>
     <tr><td><strong>Repository</strong></td><td>{{ scan.repository }}</td></tr>
-    <tr><td><strong>Status</strong></td><td><span class="status-{{ scan.status }}">{{ scan.status }}</span></td></tr>
+    <tr><td><strong>Status</strong></td><td>
+        {% if scan.status == 'scanning' %}<span class="status-scanning"><span class="spinner"></span>scanning</span>{% else %}<span class="status-{{ scan.status }}">{{ scan.status }}</span>{% endif %}
+    </td></tr>
     <tr><td><strong>SHA256</strong></td><td><code>{{ scan.sha256 or '-' }}</code></td></tr>
     <tr><td><strong>Started</strong></td><td>{{ scan.started_at.isoformat() if scan.started_at }}</td></tr>
     <tr><td><strong>Finished</strong></td><td>{{ scan.finished_at.isoformat() if scan.finished_at }}</td></tr>
     {% if scan.error_message %}<tr><td><strong>Error</strong></td><td><span class="flagged">{{ scan.error_message }}</span></td></tr>{% endif %}
 </table>
 
-<h2>Findings ({{ scan.findings|length }})</h2>
+<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;">
+    <h2>Findings ({{ scan.findings|length }})</h2>
+    {% if scan.findings|length > 1 %}
+    <button class="toggle-all-btn" onclick="toggleFindings()">Collapse All</button>
+    {% endif %}
+</div>
+
 {% if scan.findings %}
-    {% for f in scan.findings|sort(attribute='data.severity', reverse=true) %}
-    <article class="finding-card {{ f.data.severity }}">
-        <strong class="severity-{{ f.data.severity }}">[{{ f.data.severity }}]</strong>
-        <strong>{{ f.data.rule }}</strong>
-        {% if f.data.location %}<small> @ {{ f.data.location }}</small>{% endif %}
-        <p>{{ f.data.message }}</p>
-        {% if f.data.code %}<pre><code>{{ f.data.code }}</code></pre>{% endif %}
-    </article>
+    <div id="findings-container">
+    {% for f in scan.findings %}
+    <details class="finding-card {{ f.data.severity }}" data-finding-id="{{ f.id }}">
+        <summary style="cursor: pointer; list-style: none; display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0;">
+            <strong class="severity-{{ f.data.severity }}">[{{ f.data.severity }}]</strong>
+            <strong>{{ f.data.rule }}</strong>
+            {% if f.data.location %}<small> @ {{ f.data.location }}</small>{% endif %}
+            <span style="margin-left: auto; font-size: 0.8rem; opacity: 0.5;">click to expand</span>
+        </summary>
+        <div class="finding-details">
+            <p>{{ f.data.message }}</p>
+            {% if f.data.code %}
+            <div style="display: flex; justify-content: flex-end; margin-bottom: 0.25rem;">
+                <button class="copy-btn" onclick="copyCode(this, 'code-{{ f.id }}')">Copy</button>
+            </div>
+            <pre><code id="code-{{ f.id }}">{{ f.data.code }}</code></pre>
+            {% endif %}
+        </div>
+    </details>
     {% endfor %}
+    </div>
 {% else %}
-    <p class="clean">No findings — package looks clean.</p>
+    <div class="empty-state" style="padding: 1rem;">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+        <h3>No findings</h3>
+        <small>Package looks clean.</small>
+    </div>
 {% endif %}
 {% endblock %}
+
+{% block scripts %}
+<script>
+function toggleFindings() {
+    const container = document.getElementById('findings-container');
+    const details = container.querySelectorAll('details');
+    const first = details[0];
+    const isOpen = first && first.open;
+    details.forEach(d => d.open = !isOpen);
+    const btn = container.parentElement.querySelector('.toggle-all-btn');
+    if (btn) btn.textContent = isOpen ? 'Expand All' : 'Collapse All';
+}
+
+function copyCode(btn, codeId) {
+    const code = document.getElementById(codeId).textContent;
+    navigator.clipboard.writeText(code).then(() => {
+        btn.textContent = 'Copied!';
+        btn.classList.add('copied');
+        setTimeout(() => {
+            btn.textContent = 'Copy';
+            btn.classList.remove('copied');
+        }, 2000);
+    });
+}
+</script>
+{% endblock %}