From 0108ea914927c9332a3e0d804a2254be539a2d48 Mon Sep 17 00:00:00 2001
From: MarekWo <mwojtaszek@gmail.com>
Date: Sat, 21 Mar 2026 07:55:59 +0100
Subject: [PATCH] refactor(menu): reorganize menu into logical sections +
 larger touch targets

Reorganize menu from 2 sections (Network Commands, Configuration) into 4:
- Messages (top, no header) - daily actions
- Network - advert commands
- Tools - Map, Console
- System - Device Info, System Log, Backup, Settings placeholder

Increase navbar button/select touch targets (min 40px) for mobile usability.
Widen offcanvas menu from 280px to 300px.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 app/static/css/style.css | 19 +++++++++++++-
 app/templates/base.html  | 55 +++++++++++++++++++++++++---------------
 2 files changed, 52 insertions(+), 22 deletions(-)

diff --git a/app/static/css/style.css b/app/static/css/style.css
index 25322c4..107b9f0 100644
--- a/app/static/css/style.css
+++ b/app/static/css/style.css
@@ -245,9 +245,26 @@ main {
     font-size: 1rem;
 }
 
+/* Navbar touch targets - larger for mobile */
+.navbar-touch-btn {
+    min-width: 40px;
+    min-height: 40px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.1rem;
+    padding: 0.35rem 0.6rem;
+}
+
+.navbar-touch-select {
+    min-height: 40px;
+    font-size: 1rem;
+    padding: 0.35rem 2rem 0.35rem 0.6rem;
+}
+
 /* Offcanvas menu styling */
 .offcanvas {
-    width: 280px !important;
+    width: 300px !important;
 }
 
 .offcanvas-body .list-group-item {
diff --git a/app/templates/base.html b/app/templates/base.html
index aa412bd..8d0f814 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -38,14 +38,14 @@
                 {% endif %}
             </span>
             <div class="d-flex align-items-center gap-2">
-                <div id="notificationBell" class="btn btn-outline-light btn-sm position-relative" style="cursor: pointer;" onclick="markAllChannelsRead()" title="Mark all as read">
+                <div id="notificationBell" class="btn btn-outline-light position-relative navbar-touch-btn" style="cursor: pointer;" onclick="markAllChannelsRead()" title="Mark all as read">
                     <i class="bi bi-bell"></i>
                 </div>
-                <select id="channelSelector" class="form-select form-select-sm" style="width: auto; min-width: 100px;" title="Select channel">
+                <select id="channelSelector" class="form-select navbar-touch-select" style="width: auto; min-width: 100px;" title="Select channel">
                     <option value="0">Public</option>
                     <!-- Channels loaded dynamically via JavaScript -->
                 </select>
-                <button class="btn btn-outline-light btn-sm" data-bs-toggle="offcanvas" data-bs-target="#mainMenu" title="Menu">
+                <button class="btn btn-outline-light navbar-touch-btn" data-bs-toggle="offcanvas" data-bs-target="#mainMenu" title="Menu">
                     <i class="bi bi-list"></i>
                 </button>
             </div>
@@ -72,6 +72,7 @@
         </div>
         <div class="offcanvas-body">
             <div class="list-group list-group-flush">
+                <!-- Messages -->
                 <button class="list-group-item list-group-item-action d-flex align-items-center gap-3" id="refreshBtn">
                     <i class="bi bi-arrow-clockwise" style="font-size: 1.5rem;"></i>
                     <span>Refresh Messages</span>
@@ -80,7 +81,6 @@
                     <i class="bi bi-broadcast-pin" style="font-size: 1.5rem;"></i>
                     <span>Manage Channels</span>
                 </button>
-                <!-- Notifications Toggle -->
                 <button id="notificationsToggle" class="list-group-item list-group-item-action d-flex align-items-center gap-3" type="button">
                     <i class="bi bi-bell" style="font-size: 1.5rem;"></i>
                     <div class="flex-grow-1">
@@ -104,9 +104,9 @@
                     </select>
                 </div>
 
-                <!-- Network Commands Section -->
+                <!-- Network -->
                 <div class="list-group-item py-2 mt-2">
-                    <small class="text-muted fw-bold text-uppercase">Network Commands</small>
+                    <small class="text-muted fw-bold text-uppercase">Network</small>
                 </div>
                 <button class="list-group-item list-group-item-action d-flex align-items-center gap-3" id="advertBtn" title="Send single advertisement (recommended for normal operation)">
                     <i class="bi bi-megaphone" style="font-size: 1.5rem;"></i>
@@ -123,23 +123,10 @@
                     </div>
                 </button>
 
+                <!-- Tools -->
                 <div class="list-group-item py-2 mt-2">
-                    <small class="text-muted fw-bold text-uppercase">Configuration</small>
+                    <small class="text-muted fw-bold text-uppercase">Tools</small>
                 </div>
-                <button class="list-group-item list-group-item-action d-flex align-items-center gap-3" data-bs-toggle="modal" data-bs-target="#consoleModal" data-bs-dismiss="offcanvas">
-                    <i class="bi bi-terminal" style="font-size: 1.5rem;"></i>
-                    <div>
-                        <span>Console</span>
-                        <small class="d-block text-muted">Direct meshcli commands</small>
-                    </div>
-                </button>
-                <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>
-                </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>
@@ -148,10 +135,29 @@
                         <small class="d-block text-muted">All contacts with GPS</small>
                     </div>
                 </button>
+                <button class="list-group-item list-group-item-action d-flex align-items-center gap-3" data-bs-toggle="modal" data-bs-target="#consoleModal" data-bs-dismiss="offcanvas">
+                    <i class="bi bi-terminal" style="font-size: 1.5rem;"></i>
+                    <div>
+                        <span>Console</span>
+                        <small class="d-block text-muted">Direct meshcli commands</small>
+                    </div>
+                </button>
+
+                <!-- System -->
+                <div class="list-group-item py-2 mt-2">
+                    <small class="text-muted fw-bold text-uppercase">System</small>
+                </div>
                 <button class="list-group-item list-group-item-action d-flex align-items-center gap-3" data-bs-toggle="modal" data-bs-target="#deviceInfoModal" data-bs-dismiss="offcanvas">
                     <i class="bi bi-cpu" style="font-size: 1.5rem;"></i>
                     <span>Device Info</span>
                 </button>
+                <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>
+                </button>
                 <button class="list-group-item list-group-item-action d-flex align-items-center gap-3" data-bs-toggle="modal" data-bs-target="#backupModal" data-bs-dismiss="offcanvas">
                     <i class="bi bi-database-down" style="font-size: 1.5rem;"></i>
                     <div>
@@ -159,6 +165,13 @@
                         <small class="d-block text-muted">Database backup & restore</small>
                     </div>
                 </button>
+                <button class="list-group-item list-group-item-action d-flex align-items-center gap-3" id="settingsBtn" disabled>
+                    <i class="bi bi-gear" style="font-size: 1.5rem;"></i>
+                    <div>
+                        <span>Settings</span>
+                        <small class="d-block text-muted">Coming soon</small>
+                    </div>
+                </button>
             </div>
         </div>
     </div>