Settings › Labels speaks the home page's language #9809

Settings › Labels now lists each label as a row in the same list the Capacity and Features pages use. bun scripts/gate.ts, bun x tsc --noEmit and bun scripts/design-lint.ts pass. The label tests pass (18 tests across 5 files) — those are the test/label*.test.ts and test/api-labels*.test.ts files. I haven't looked at the page in a browser, so the 390 px phone fit is untested.

What changed

• Each row has the label's colour chip and name, then its N open link to the issues it carries (or "unused" at zero).
• In each row's trail is the edit form: name, colour, Save and Delete.
• "New label" is a plain titled block instead of a card box.
• Create, rename, recolour and delete are still plain POST forms with the same-origin check and work with JavaScript off.
• Delete still goes through the confirm page, and its button now has the label's name as its accessible name.
• The colour still goes through the existing hex validation at the boundary and is never echoed raw.
• .label-open is now styled standalone, because the count link moved out of the edit form. Removing the unused .edit-row > .preview rule and adding a padding rule for the new row layout are the only other CSS changes. No new component class was added.
• docs/design/areas/settings.md describes the new layout.
• I added a test in test/labels-page-counts.test.ts that checks the setting-list row, its anchor id, the POST action, the hex value and the confirm link.

Not done

• No live colour-preview script or colour-picker restyling.
• I did not run the full suite; the forge's check does that on push.

Closes #9747

Settings › Labels now lists each label as a row in the same list the Capacity and Features pages use. bun scripts/gate.ts, bun x tsc --noEmit and bun scripts/design-lint.ts pass. The label tests pass (18 tests across 5 files) — those are the test/label*.test.ts and test/api-labels*.test.ts files. I haven't looked at the page in a browser, so the 390 px phone fit is untested.

What changed

• Each row has the label's colour chip and name, then its N open link to the issues it carries (or "unused" at zero).
• In each row's trail is the edit form: name, colour, Save and Delete.
• "New label" is a plain titled block instead of a card box.
• Create, rename, recolour and delete are still plain POST forms with the same-origin check and work with JavaScript off.
• Delete still goes through the confirm page, and its button now has the label's name as its accessible name.
• The colour still goes through the existing hex validation at the boundary and is never echoed raw.
• .label-open is now styled standalone, because the count link moved out of the edit form. Removing the unused .edit-row > .preview rule and adding a padding rule for the new row layout are the only other CSS changes. No new component class was added.
• docs/design/areas/settings.md describes the new layout.
• I added a test in test/labels-page-counts.test.ts that checks the setting-list row, its anchor id, the POST action, the hex value and the confirm link.

Not done

• No live colour-preview script or colour-picker restyling.
• I did not run the full suite; the forge's check does that on push.

Settings › Labels now shows each label as a row with its colour chip, name and an N open link to the issues it carries. The edit form (name, colour, Save, Delete) sits at the end of the row. The check failed only because no commit had a "Try:" line, so I added an empty commit with one. bun scripts/gate.ts now passes locally and the fix is pushed; I haven't seen the forge's check re-run yet.

Create, rename, recolour and delete are still plain POST forms with the same-origin check and work with JavaScript off. Delete still goes through the confirm page. The colour is still validated as hex at the boundary and never echoed raw.

I haven't looked at the page in a browser, so the 390 px phone fit is untested. bun scripts/design-lint.ts, bun x tsc --noEmit and the label tests passed before the first push. I didn't re-run them after the empty commit, since no code changed.

I left out a live colour-preview script and any colour-picker restyling. No new component class was added.

To try it, open /trevato/forge/settings/labels on the preview.