From 23a83cbd7b0887a0d7179ea55bf7d9ba78cc07df Mon Sep 17 00:00:00 2001 From: Shawn Date: Tue, 16 Jun 2026 18:19:32 -0400 Subject: [PATCH] Settings: left sidebar nav with separate page views per category Replaced horizontal tab bar with a left sidebar navigation that feels like separate pages: - Left nav with icons + labels (Connection, Audio, 4CM Routing, Network, Bluetooth, About) - Active category highlighted in accent color - Each category has its own URL via hash (#connection, #audio, etc.) - Back/forward browser navigation via popstate handler - Stacked layout on mobile (sidebar becomes scrollable row) --- src/web/static/style.css | 119 +++++-- src/web/templates/settings.html | 536 ++++++++++++++++++-------------- 2 files changed, 392 insertions(+), 263 deletions(-) diff --git a/src/web/static/style.css b/src/web/static/style.css index 67220be..fb55452 100644 --- a/src/web/static/style.css +++ b/src/web/static/style.css @@ -696,43 +696,87 @@ body { line-height: 1.4; } -/* ── Settings tabs ────────────────────────────────────────────────── */ +/* ── Settings layout: sidebar + content ──────────────────────────── */ -.settings-tabs { +.settings-layout { display: flex; - gap: 4px; - overflow-x: auto; - -webkit-overflow-scrolling: touch; - scrollbar-width: none; - margin-bottom: 12px; - padding-bottom: 4px; - border-bottom: 1px solid var(--border); + gap: 16px; + align-items: flex-start; } -.settings-tabs::-webkit-scrollbar { - display: none; +/* ── Settings sidebar ──────────────────────────────────────────────── */ + +.settings-sidebar { + width: 180px; + flex-shrink: 0; + display: flex; + flex-direction: column; + gap: 2px; + background: var(--bg-secondary); + border: 1px solid var(--border); + border-radius: var(--radius); + padding: 6px; + position: sticky; + top: 12px; } -.settings-tab { - padding: 8px 14px; +.settings-nav-item { + display: flex; + align-items: center; + gap: 10px; + padding: 10px 12px; + border-radius: 6px; + text-decoration: none; + color: var(--text-secondary); + font-size: 0.85rem; + font-weight: 500; + transition: all 0.15s; + cursor: pointer; + touch-action: manipulation; border: none; background: transparent; - color: var(--text-secondary); - font-size: 0.82rem; - cursor: pointer; - white-space: nowrap; - border-bottom: 2px solid transparent; - transition: color 0.2s, border-color 0.2s; - touch-action: manipulation; + width: 100%; + text-align: left; } -.settings-tab:hover { +.settings-nav-item:hover { + background: var(--bg-hover); color: var(--text-primary); } -.settings-tab.active { - color: var(--accent); - border-bottom-color: var(--accent); +.settings-nav-item.active { + background: var(--accent); + color: #000; + font-weight: 600; +} + +.settings-nav-item.active .settings-nav-icon { + filter: none; +} + +.settings-nav-icon { + font-size: 1rem; + width: 22px; + text-align: center; + flex-shrink: 0; + opacity: 0.7; +} + +.settings-nav-item.active .settings-nav-icon { + opacity: 1; +} + +.settings-nav-label { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +/* ── Settings content panel ──────────────────────────────────────────── */ + +.settings-content { + flex: 1; + min-width: 0; } .settings-panel { @@ -743,6 +787,33 @@ body { display: block; } +/* Mobile: stack sidebar above content */ +@media (max-width: 640px) { + .settings-layout { + flex-direction: column; + } + .settings-sidebar { + width: 100%; + flex-direction: row; + overflow-x: auto; + position: static; + scrollbar-width: none; + } + .settings-sidebar::-webkit-scrollbar { + display: none; + } + .settings-nav-item { + white-space: nowrap; + flex-shrink: 0; + padding: 8px 12px; + font-size: 0.8rem; + } + .settings-nav-icon { + font-size: 0.85rem; + width: 18px; + } +} + /* ── Network UI ──────────────────────────────────────────────────── */ .network-status-row { diff --git a/src/web/templates/settings.html b/src/web/templates/settings.html index a12c8d6..3f619d9 100644 --- a/src/web/templates/settings.html +++ b/src/web/templates/settings.html @@ -6,259 +6,298 @@

Settings

- -
- - - - - - -
+
+ + - -
-
-

Connection

-
-
-
Hostname
-
pedal.local
-
-
-
Web Server
-
http://pedal.local:8080
-
-
-
Connected Clients
-
0
-
-
-
-
- - -
-
-

Audio

-
-
-
Master Volume
-
- - {{ (master_volume * 100)|int }}% -
-
-
-
Tuner
-
- -
-
-
-
-
- - -
-
-

4-Cable Method (4CM)

-
-
-
4CM Mode
-
- -
-
-
-
Breakpoint
-
- - {{ routing_breakpoint }} -
-
-
-
Routing
-
- - {% if routing_mode == '4cm' %} - Input 1 (Guitar) → Pre blocks [0..{{ routing_breakpoint }}) → Send -  |  Input 2 (Return) → Post blocks [{{ routing_breakpoint }}..] → Output - {% else %} - Mono: Guitar → Full chain → Output - {% endif %} - -
-
-
-
-
- - -
- -
-

WiFi Status

-
-
-
📶
-
-
—
-
—
-
—
-
- -
-
-
- - -
-
-

WiFi Networks

- -
-
-
Click Scan to find available WiFi networks.
-
-
- - -
-

Known Networks

-
-
Loading...
-
-
- - -
-

WiFi Hotspot

-
-
-
-
Hotspot Status
-
- Off + +
+ +
+
+

Connection

+
+
+
Hostname
+
pedal.local
+
+
+
Web Server
+
http://pedal.local:8080
+
+
+
Connected Clients
+
0
-
-
SSID
-
- +
+
+ + +
+
+

Audio

+
+
+
Master Volume
+
+ + {{ (master_volume * 100)|int }}% +
+
+
+
Tuner
+
+ +
+
+
+
Latency Profile
+
+ +
+
+
+
JACK Status
+
+ — + +
-
-
Password
-
- +
+
+ + +
+
+

4-Cable Method (4CM)

+
+
+
4CM Mode
+
+ +
+
+
+
Breakpoint
+
+ + {{ routing_breakpoint }} +
+
+
+
Routing
+
+ + {% if routing_mode == '4cm' %} + Input 1 (Guitar) → Pre blocks [0..{{ routing_breakpoint }}) → Send +  |  Input 2 (Return) → Post blocks [{{ routing_breakpoint }}..] → Output + {% else %} + Mono: Guitar → Full chain → Output + {% endif %} + +
-
-
Connected Clients
-
0
-
-
- - -
-
-
- -
- -
-

Bluetooth

-
-
-
Bluetooth
-
- + +
+ +
+

WiFi Status

+
+
+
📶
+
+
—
+
—
+
—
+
+ +
-
-
Discoverable
-
- + + +
+
+

WiFi Networks

+ +
+
+
Click Scan to find available WiFi networks.
-
-
Adapter Name
-
—
-
-
-
Address
-
—
-
-
-
- -
-
-

Discover Devices

- -
-
-
Click Scan to find discoverable Bluetooth devices.
-
-
- - -
-

Paired Devices

-
-
Loading...
-
-
- - -
-

Bluetooth MIDI

-
-
-
BT MIDI Service
-
- Off + +
+

Known Networks

+
+
Loading...
-
- - -
-
-
Connected MIDI Devices
-
- None connected + + +
+

WiFi Hotspot

+
+
+
+
Hotspot Status
+
+ Off +
+
+
+
SSID
+
+ +
+
+
+
Password
+
+ +
+
+
+
Connected Clients
+
0
+
+
+ + +
+
-
-
- -
-
-

About

-
-
-

Pi Multi-FX Pedal v0.1.0

-

Raspberry Pi 4B — Python 3.11 — JACK Audio

-

Gitea Repository

+ +
+ +
+

Bluetooth

+
+
+
Bluetooth
+
+ +
+
+
+
Discoverable
+
+ +
+
+
+
Adapter Name
+
—
+
+
+
Address
+
—
+
+
+
+ + +
+
+

Discover Devices

+ +
+
+
Click Scan to find discoverable Bluetooth devices.
+
+
+ + +
+

Paired Devices

+
+
Loading...
+
+
+ + +
+

Bluetooth MIDI

+
+
+
BT MIDI Service
+
+ Off +
+
+
+ + +
+
+
Connected MIDI Devices
+
+ None connected +
+
+
+
+
+ + +
+
+

About

+
+
+

Pi Multi-FX Pedal v0.1.0

+

Raspberry Pi 4B — Python 3.11 — JACK Audio

+

Gitea Repository

+
+
@@ -293,13 +332,21 @@ -{% endblock %} \ No newline at end of file +{% endblock %}