From 060b63bce941dfe79be79f848ab259ed31a6f402 Mon Sep 17 00:00:00 2001
From: Claude Agent <claude-agent@romfast.ro>
Date: Thu, 2 Apr 2026 13:16:51 +0000
Subject: [PATCH] =?UTF-8?q?style(design):=20FINDING-004=20=E2=80=94=20add?=
 =?UTF-8?q?=20empty=20state=20for=20logs=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When no sync run is selected, the logs page was completely blank
below the controls. Added a guidance message with icon explaining
what to do. Hides automatically when a run is selected.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 api/app/static/js/logs.js   | 3 +++
 api/app/templates/logs.html | 9 ++++++++-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/api/app/static/js/logs.js b/api/app/static/js/logs.js
index b4c6165..7ac2e55 100644
--- a/api/app/static/js/logs.js
+++ b/api/app/static/js/logs.js
@@ -95,12 +95,15 @@ async function selectRun(runId) {
     const ddMobile = document.getElementById('runsDropdownMobile');
     if (ddMobile && ddMobile.value !== runId) ddMobile.value = runId;
 
+    const emptyState = document.getElementById('logEmptyState');
     if (!runId) {
         document.getElementById('logViewerSection').style.display = 'none';
+        if (emptyState) emptyState.style.display = '';
         return;
     }
 
     document.getElementById('logViewerSection').style.display = '';
+    if (emptyState) emptyState.style.display = 'none';
     const logRunIdEl = document.getElementById('logRunId'); if (logRunIdEl) logRunIdEl.textContent = runId;
     document.getElementById('logStatusBadge').innerHTML = '...';
     document.getElementById('textLogSection').style.display = 'none';
diff --git a/api/app/templates/logs.html b/api/app/templates/logs.html
index a6720cb..0ab5567 100644
--- a/api/app/templates/logs.html
+++ b/api/app/templates/logs.html
@@ -47,6 +47,13 @@
     </div>
 </div>
 
+<!-- Empty state (shown when no run selected) -->
+<div id="logEmptyState" class="text-center py-5" style="color:var(--text-muted)">
+    <i class="bi bi-journal-text" style="font-size:2.5rem;opacity:0.4"></i>
+    <p class="mt-3 mb-1" style="font-size:0.9375rem">Selecteaza un sync run din lista de mai sus</p>
+    <p style="font-size:0.8125rem">Jurnalele arata detalii pentru fiecare sincronizare: comenzi importate, omise, erori.</p>
+</div>
+
 <!-- Detail Viewer (shown when run selected) -->
 <div id="logViewerSection" style="display:none;">
     <!-- Filter pills -->
@@ -102,5 +109,5 @@
 {% endblock %}
 
 {% block scripts %}
-<script src="{{ request.scope.get('root_path', '') }}/static/js/logs.js?v=14"></script>
+<script src="{{ request.scope.get('root_path', '') }}/static/js/logs.js?v=15"></script>
 {% endblock %}