From ca0ba37be597fc1d42c365d66f16e35a433beca8 Mon Sep 17 00:00:00 2001
From: MarekWo <mwojtaszek@gmail.com>
Date: Fri, 20 Mar 2026 20:41:20 +0100
Subject: [PATCH] fix(logs): open System Log as fullscreen modal like Console

Changed from target="_blank" link to fullscreen modal with iframe,
matching the pattern used by Console, DM, and Contacts modals.
Iframe loads on open and clears on close to manage WebSocket lifecycle.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 app/templates/base.html  |  4 ++--
 app/templates/index.html | 37 +++++++++++++++++++++++++++++++++++++
 app/templates/logs.html  |  8 ++------
 3 files changed, 41 insertions(+), 8 deletions(-)

diff --git a/app/templates/base.html b/app/templates/base.html
index f3c9d03..aa412bd 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -133,13 +133,13 @@
                         <small class="d-block text-muted">Direct meshcli commands</small>
                     </div>
                 </button>
-                <a href="/logs" target="_blank" class="list-group-item list-group-item-action d-flex align-items-center gap-3" data-bs-dismiss="offcanvas">
+                <button class="list-group-item list-group-item-action d-flex align-items-center gap-3" data-bs-toggle="modal" data-bs-target="#logsModal" data-bs-dismiss="offcanvas">
                     <i class="bi bi-journal-text" style="font-size: 1.5rem;"></i>
                     <div>
                         <span>System Log</span>
                         <small class="d-block text-muted">Real-time application logs</small>
                     </div>
-                </a>
+                </button>
                 <button class="list-group-item list-group-item-action d-flex align-items-center gap-3"
                         id="mapBtn" title="Show all contacts with GPS on map">
                     <i class="bi bi-map" style="font-size: 1.5rem;"></i>
diff --git a/app/templates/index.html b/app/templates/index.html
index 40963c4..c1168f1 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -44,6 +44,7 @@
     /* Modal fullscreen - remove all margins and padding */
     #dmModal .modal-dialog.modal-fullscreen,
     #contactsModal .modal-dialog.modal-fullscreen,
+    #logsModal .modal-dialog.modal-fullscreen,
     #consoleModal .modal-dialog.modal-fullscreen {
         margin: 0 !important;
         width: 100vw !important;
@@ -54,6 +55,7 @@
 
     #dmModal .modal-content,
     #contactsModal .modal-content,
+    #logsModal .modal-content,
     #consoleModal .modal-content {
         border: none !important;
         border-radius: 0 !important;
@@ -62,6 +64,7 @@
 
     #dmModal .modal-body,
     #contactsModal .modal-body,
+    #logsModal .modal-body,
     #consoleModal .modal-body {
         overflow: hidden !important;
     }
@@ -230,6 +233,23 @@
         </div>
     </div>
 </div>
+
+<!-- System Log Modal (Full Screen) -->
+<div class="modal fade" id="logsModal" tabindex="-1" aria-hidden="true">
+    <div class="modal-dialog modal-fullscreen">
+        <div class="modal-content" style="background-color: #1a1a2e;">
+            <div class="modal-header" style="background-color: #16213e; border-bottom: 1px solid #0f3460;">
+                <h5 class="modal-title text-white"><i class="bi bi-journal-text"></i> System Log</h5>
+                <button type="button" class="btn btn-outline-light" data-bs-dismiss="modal">
+                    <i class="bi bi-x-lg"></i> Close
+                </button>
+            </div>
+            <div class="modal-body p-0">
+                <iframe id="logsFrame" style="width: 100%; height: 100%; border: none;"></iframe>
+            </div>
+        </div>
+    </div>
+</div>
 {% endblock %}
 
 {% block extra_scripts %}
@@ -302,6 +322,23 @@
                 }
             });
         }
+
+        // System Log modal - load iframe on open, clear on close
+        const logsModal = document.getElementById('logsModal');
+        if (logsModal) {
+            logsModal.addEventListener('show.bs.modal', function () {
+                const logsFrame = document.getElementById('logsFrame');
+                if (logsFrame) {
+                    logsFrame.src = '/logs';
+                }
+            });
+            logsModal.addEventListener('hidden.bs.modal', function () {
+                const logsFrame = document.getElementById('logsFrame');
+                if (logsFrame) {
+                    logsFrame.src = '';  // disconnect WebSocket when closed
+                }
+            });
+        }
     });
 </script>
 {% endblock %}
diff --git a/app/templates/logs.html b/app/templates/logs.html
index a6e331f..48235b4 100644
--- a/app/templates/logs.html
+++ b/app/templates/logs.html
@@ -151,15 +151,11 @@
     <div class="log-container">
         <!-- Header -->
         <div class="log-header d-flex justify-content-between align-items-center">
-            <div class="d-flex align-items-center gap-2">
-                <a href="/" class="btn btn-sm btn-log" title="Back to chat">
-                    <i class="bi bi-arrow-left"></i>
-                </a>
-                <h6 class="mb-0 text-light">System Log</h6>
-            </div>
             <div class="d-flex align-items-center gap-2">
                 <span class="log-count" id="logCount">0 entries</span>
                 <span class="status-indicator" id="statusDot"></span>
+            </div>
+            <div class="d-flex align-items-center gap-2">
                 <button class="btn btn-sm btn-log" id="pauseBtn" title="Pause/Resume">
                     <i class="bi bi-pause-fill" id="pauseIcon"></i>
                 </button>