Improvements to UI settings readability

[DedeHai]

I am proposing "sections" instead of a "continuous list"
like this:

had to increase the contrast slightly to make it work well, i.e. dim the background down.

let me know what you think and I will update all config pages to this pattern.

the flash cost is minimal, changes to LED settings page is a handful of bytes (64 if you need a number ;) )

Summary by CodeRabbit

• Style

  • Darker global background and a new rounded "sec" panel style for clearer, spaced section blocks.

• Refactor

  • Settings pages reorganized into grouped, self-contained sections across LEDs, 2D panels, Wi‑Fi & Network, Time, Security, Sync, UI, Usermods, and pins for improved navigation.

• New Features

  • New LED controls (global brightness factor, per-output limiter, LED outputs block), Color & White (gamma, white balance/CCT), IR Remote and Relay subsections, palette wrapping and FPS warnings, Ethernet type selector, timezone/macro presets, skin/CSS upload, expanded sync/notification options.

• Other

  • Minor label and wording updates (e.g., "WiFi & Network").

[coderabbitai]

Walkthrough

Reorganizes many HTML settings pages into new visual sections (.sec), restructures the LED settings into multiple subsections with new controls (brightness factor, gamma/CCT/white, IR/relay blocks, LED outputs, advanced palette/FPS options), adds Ethernet/WiFi/network blocks and UI skin upload, updates CSS (.sec) and small C++ edits (json.cpp, set.cpp, xml.cpp).

Changes

Cohort / File(s)	Summary
LED Settings UI wled00/data/settings_leds.htm	Breaks the previous single LED & Hardware block into multiple .sec subsections (LED setup, Color & White, Hardware: Buttons/IR/Relay, LED outputs, General: Power up/Transitions/Random/Timed, Advanced). Adds Global brightness factor, gamma/CCT/white controls, IR/JSON UI, relay options, palette-wrapping and FPS warnings, moves config template and trailing toast container; structural DOM reflow for form integration.
Grouped settings pages (structural rewraps & minor content edits) wled00/data/settings.htm, wled00/data/settings_2D.htm, wled00/data/settings_pin.htm, wled00/data/settings_sec.htm, wled00/data/settings_sync.htm, wled00/data/settings_time.htm, wled00/data/settings_ui.htm, wled00/data/settings_um.htm, wled00/data/settings_wifi.htm	Wraps many settings blocks in new <div class="sec"> containers and reorders headings/closures. Introduces/relocates inputs and labels (Time zone, Macro/Timer presets, Ethernet Type, WiFi Power, ESP-NOW toggle, OTA/passphrase UI, UI skin upload, holidays upload, send notifications options). Mostly presentational/layout changes with a few text/label tweaks.
Styling wled00/data/style.css	Adds .sec CSS rules (background, border-radius, padding, margin, max-width) and adjusts global background color to support the new sectioned layout.
Small C++ adjustments wled00/json.cpp, wled00/set.cpp, wled00/xml.cpp	Minor edits: comment text tweak in serializeInfo, removal of syncToggleReceive = request->hasArg(F("ST")) from UI handler, and removal of an inner loop variable shadowing in getSettingsJS. No API/signature changes.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related PRs

• Fix LED buffer size calculation #4928: Overlapping edits to LED settings UI and per-bus/memory/pin validation in settings_leds.htm.
• Improvements & fixes for HUB75 #5026: Changes to HUB75/HUB-specific LED fields and validation that may interact with the reworked LED settings layout.
• Update RGB2Go Ethernet naming #4780: Ethernet option/dropdown changes in WiFi settings that overlap the Ethernet Type UI edits.

Suggested reviewers

• netmindz
• softhack007

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 50.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title "Improvements to UI settings readability" accurately and directly summarizes the main objective of the pull request: restructuring settings pages into visual sections to improve readability and scanability.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

No actionable comments were generated in the recent review. 🎉

🧹 Recent nitpick comments

wled00/data/settings_leds.htm (2)

878-880: Duplicate heading text: both <h2> and <h3> say "LED setup".

The category heading (Line 878, <h2>LED setup</h2>) and the section heading (Line 880, <h3>LED setup</h3>) use identical text. The other categories ("Hardware setup", "General settings") have distinct subsection names. Consider renaming the <h3> to something more specific (e.g., "LED outputs & limits") or dropping the <h2> since there's only one section in this category.

---

949-949: Minor inconsistency: warning icon encoding.

This line uses a literal ⚠ character while other warnings in the file (Lines 900, 912, 1026–1028) use the HTML entity ⚠. Both render identically, but consistency would be slightly cleaner.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[softhack007]

@DedeHai I like the new look :-)
If i understood your code correctly, the main idea is to add <div class="sec"> .... </div> around each section, right?

[DedeHai]

correct.
When testing I tend to be scrolling quickly through that settings page and it is annoying to have no real "overview" to quickly spot things like the relay pin for example as its just "somewhere in that list". So I came up with this.

[DedeHai]

I updated all config pages and made some other minor modifications, mainly:

• renamed "WiFi Setup" to "WiFi & Network" in settings menu
• renamed "LED Preferences" to "LED & Hardware" in settings menu
• Added settings title in various places (sync page and UM page mostly) for a cleaner layout
• removed some outdated text in time settings and added links to HTTP and JSON API
• minor reordering in UI settings to better suit the sections
• moved ETH settings just below WiFi settings

Total additional flash use: ~150bytes

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@wled00/data/settings_sec.htm`:
- Around line 62-70: The HTML has invalid nesting because the inline element
<span id="OTA"> opens before a </div> and closes after several block elements;
move or refactor this so the element with id "OTA" does not span across
block-level boundaries — either wrap the relevant block content inside a single
container (e.g., give the <div class="sec"> or a new <div> the id "OTA" instead
of using a span) or remove the span and toggle visibility via the existing <div
class="sec"> using the same id; ensure related JS (function U(), and inputs
named "AO" and "SU") references are updated to target the new container.

[DedeHai]

Screenshots:

[DedeHai]

I updated the LED/Harware settings page with a more "natural workflow".

• moved "brightness factor" to the top, just before the ABL and renamed to "Global brightness factor" to have both auto and non-auto limits in the same place
• moved gamma & white balance up, right after the LED settings as those influence LEDs directly
• re-wording regarding bootup settings / random palette / 2-wire CCT
  Looks like this now (LED settings omitted):

[DedeHai]

@netmindz what do you think of this? it's ready to merge, there are zero functional changes, only cosmetics.

[DedeHai]

I see it has conflicts due to recent addition to user_fx, ready to merge after a quick fixup.

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

wled00/data/settings_sync.htm (1)

127-128: ⚠️ Potential issue | 🟡 Minor

"Send Alexa notifications" checkbox visible but non-functional when Alexa is compiled out.

The SA checkbox (line 127) is in the always-visible "Send" section, outside the Alexa-specific <div id="Alexa"> that gets hidden when WLED_DISABLE_ALEXA is defined. However, in xml.cpp, the SA value is only populated inside #ifndef WLED_DISABLE_ALEXA (line 497), and when Alexa is disabled, toggle('Alexa') is called (line 500) which hides only the Alexa divs—not the "Send" section. This leaves the SA checkbox visible but unchecked and non-functional.

Move the SA checkbox into the Alexa-specific <div id="Alexa"> (inside settings_sync.htm), or wrap it in a separate conditionally-hidden element.

The SH checkbox (line 128) is correctly populated unconditionally in xml.cpp.