Collapse custom locations into a filterable list

[fatihemre]

Why

The Custom Locations tab renders every location fully expanded. That is fine for one or two, but it does not scale: on a host with ~30 locations the tab becomes a very long wall of identical field groups, and the "Add Location" button sits at the very bottom, so adding one more means scrolling past everything else every time.

This reworks the tab into a collapsible list, staying within the existing Tabler components already used elsewhere in the app (card, card-header, input-group, btn-action, badge-free muted icon) — no new dependencies and no new design language.

BEFORE

AFTER

What changed

• Each location is now a collapsible card, collapsed by default, whose header shows the path and the forward target (http://10.0.0.1:8080) so the list can be scanned without opening anything.
• "Add Location" moved to the top of the tab. New locations are still appended to the end of the list, then auto-expanded and scrolled into view — so the generated nginx config is byte-for-byte unchanged (regex locations are order-dependent, so insertion order must not move).
• A filter box appears once there are 5 or more locations. It matches the path as well as the forward scheme, host and port, so a location can be found by where it forwards to and not just by its path.
• The delete action became an icon button (btn-action) instead of a plain <a href="#">Delete</a> link.
• Locations with a custom nginx configuration get a muted icon in the header — the same icon as the advanced-config toggle inside the body — with a tooltip and an aria-label.
• Collapsed bodies are unmounted rather than hidden with CSS, because Formik's <Form> does not set noValidate and hidden required inputs would silently block submit.

Two existing bugs fixed along the way

• The per-location inputs used the same DOM ids (location-forwardHost, etc.) on every row, so every <label for> pointed at the first row's input.
• Expanded/advanced state was keyed by array index, so deleting a location moved the advanced-config panel onto the wrong row. Rows now carry a stable client-side id.

Not changed

No API, backend or generated-config changes. Only frontend/src/components/Form/LocationsFields.tsx, its CSS module, and two locale files (en.json, tr.json).

Type of Change

• Bug fix (non-breaking change that fixes an issue)
• New feature (non-breaking change that adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)
• Documentation update
• Code refactoring
• API changes
• Performance improvement
• Test addition or update

AI Usage

• AI was used to write this
• AI was used to review this

[nginxproxymanagerci]

Docker Image for build 1 is available on DockerHub:

nginxproxymanager/nginx-proxy-manager-dev:pr-5765

Note

Ensure you backup your NPM instance before testing this image! Especially if there are database changes.
This is a different docker image namespace than the official image.

Warning

Changes and additions to DNS Providers require verification by at least 2 members of the community!