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 "sec" panel style for clearer, rounded section blocks.

• Refactor

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

• New Features

  • New LED controls (brightness factor, per-output limiter, LED outputs memory), Color & White controls (gamma, white balance/CCT), IR Remote and Relay subsections, Power‑up/Transitions/Random Palettes/Timed light groups, Palette wrapping and FPS warnings, Ethernet type selector, time zone/UTC offset, macro/timer presets, skin/CSS upload, ESP‑NOW and expanded sync/notification options.

• Other

  • Small label updates (e.g., "WiFi & Network") and minor UI wording clarifications.

[coderabbitai]

Walkthrough

Reorganizes many settings pages into discrete .sec sections, restructures the LED settings into multiple subsections, adds UI controls (Ethernet type, Gamma/CCT/white options, IR JSON, skin upload, time/macro controls), updates global styling (.sec and background), and applies three small code edits.

Changes

Cohort / File(s)	Summary
LED Settings UI wled00/data/settings_leds.htm	Replaces the single “LED & Hardware setup” block with multiple subsection wrappers (LED setup, Color & White, Buttons, IR Remote, Relay, General, Power up, Transitions, Random Palettes, Timed light, Advanced). Adds BF, gamma/CCT/white controls, IR JSON/info UI, LED outputs subheading, layout adjustments, and a trailing toast container.
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 related controls in new <div class="sec"> blocks across multiple settings pages, reorganizes headings and block boundaries, introduces/adjusts fields (time zone, macro presets, Ethernet Type, WiFi Power, ESP-NOW/Sync options, security passphrase, UI skin upload), and updates closing-tag flow for layout. Changes are primarily presentational and grouping-focused.
Styling wled00/data/style.css	Changes global background color and adds a .sec class (background, border-radius, padding, margin, max-width) to support the new sectioned layout.
Small code adjustments wled00/json.cpp, wled00/set.cpp, wled00/xml.cpp	Minor edits: comment text tweak in JSON serialization, removal of syncToggleReceive assignment from UI handling, and a loop variable scope change in getSettingsJS (removes inner int i declaration).

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• Fix LED buffer size calculation #4928: Overlaps LED settings/UI changes — touches settings_leds.htm and LED configuration UI/JS.
• "Unlimited" buses #4529: Prior edits to LED/Hardware UI and related JS that may intersect with the new DOM structure.
• Update RGB2Go Ethernet naming #4780: Modifies Ethernet-related UI/options in settings_wifi.htm, overlapping the Ethernet Type changes.

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 accurately summarizes the main objective of the PR—reorganizing UI settings pages into sections to improve readability and scanability. It directly reflects the core changes across all affected files.

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

✨ Finishing touches

🧪 Generate unit tests (beta)

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

---

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):