Improve addon configuration UI

[cr7pt0gr4ph7]

Proposed change

Improve the addon configuration UI for complex configuration schemas by reusing the existing infrastructure for Object selectors.

• Display top-level dict fields as expandable sections instead of falling back to the YAML editor.
• Display a reorderable list for list[dict] instead of falling back to the YAML editor.
• Display a nested editor for nested dict instead of falling back to the YAML editor.

Type of change

• Dependency upgrade
• Bugfix (non-breaking change which fixes an issue)
• New feature (thank you!)
• Breaking change (fix/feature causing existing functionality to break)
• Code quality improvements to existing code or addition of tests

Example configuration

Based on addons/mosquitto/config.yaml:

options:
  logins: []
  customize:
    active: false
    folder: mosquitto
schema:
  logins:
    - username: str
      password: password
      password_pre_hashed: "bool?"
  customize:
    active: bool
    folder: str

Screenshots

Lists of objects (list[dict])

Expandable sections (top-level dict)

Additional information

• This PR fixes or closes issue: fixes #
• This PR is related to issue or discussion: Allow deeply nested dicts and lists in addon config schemas supervisor#6171
• Link to documentation pull request:

Checklist

• The code change is tested and works locally.
• There is no commented out code in this PR.
• Tests have been added to verify that the new code works.

If user exposed functionality or configuration variables are added/changed:

• Documentation added/updated for www.home-assistant.io

[piitaya]

Thank you @cr7pt0gr4ph7 👍