Add in-app settings menu and fix settings API

Move WiFi and device name configuration into a modal menu, reuse existing settings endpoints, and harden settings serialization and startup for MicroPython.
2026-01-29 00:54:20 +13:00
parent cf1d831b5a
commit 00514f0525
6 changed files with 444 additions and 5 deletions
--- a/src/static/style.css
+++ b/src/static/style.css
@@ -355,6 +355,122 @@ header h1 {
    font-size: 1.1rem;
 }

+/* Settings modal layout */
+.settings-section {
+    background-color: #1a1a1a;
+    border-radius: 8px;
+    padding: 1rem;
+    margin-top: 1rem;
+    border: 1px solid #4a4a4a;
+}
+
+.settings-section h3 {
+    font-size: 1.1rem;
+    margin-bottom: 0.75rem;
+    color: #fff;
+    border-bottom: 1px solid #4a4a4a;
+    padding-bottom: 0.25rem;
+}
+
+.form-group {
+    margin-bottom: 1rem;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 0.5rem;
+    color: #ccc;
+    font-weight: 500;
+}
+
+.form-group input[type="text"],
+.form-group input[type="password"],
+.form-group input[type="number"],
+.form-group select {
+    width: 100%;
+    padding: 0.5rem;
+    background-color: #2e2e2e;
+    border: 1px solid #4a4a4a;
+    border-radius: 4px;
+    color: white;
+    font-size: 0.95rem;
+}
+
+.form-group small {
+    display: block;
+    margin-top: 0.25rem;
+    color: #888;
+    font-size: 0.8rem;
+}
+
+.form-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 0.75rem;
+}
+
+.status-info {
+    background-color: #2e2e2e;
+    border: 1px solid #4a4a4a;
+    border-radius: 4px;
+    padding: 0.75rem;
+    margin-bottom: 0.75rem;
+}
+
+.status-info h3,
+.status-info h4 {
+    font-size: 1rem;
+    margin-bottom: 0.5rem;
+    color: #fff;
+}
+
+.status-info p {
+    color: #aaa;
+    margin: 0.25rem 0;
+    font-size: 0.9rem;
+}
+
+.status-connected {
+    color: #4caf50;
+}
+
+.status-disconnected {
+    color: #f44336;
+}
+
+.btn-group {
+    display: flex;
+    gap: 0.5rem;
+    margin-top: 0.75rem;
+}
+
+.btn-full {
+    flex: 1;
+}
+
+.message {
+    padding: 0.75rem;
+    border-radius: 4px;
+    margin-bottom: 1rem;
+    display: none;
+}
+
+.message.success {
+    background-color: #1b5e20;
+    color: #4caf50;
+    border: 1px solid #4caf50;
+}
+
+.message.error {
+    background-color: #5e1b1b;
+    color: #f44336;
+    border: 1px solid #f44336;
+}
+
+.message.show {
+    display: block;
+}
+
 .patterns-list {
    display: flex;
    flex-direction: column;