chadtmiller.com/knotless

Switch repository

Loading…

What changes

Labels settings. The list of labels comes first, with a New label button beside its heading. New label and each row's Edit open a dialog, as GitHub's labels page does: a preview of the label at its top, then name, description, colour and whether it is exclusive, then Cancel and Create label (or Save changes). Before, the form sat above the list and Edit filled that same form in place.

One Dialog. The pages' dialogs (log in, the themes browser, report, delete a repository, delete an organization, start one, confirm a member change, retarget a pull, run a workflow, delete your data) each wrote out the same popover, title and close button by hand. They are now one molecule, Dialog, with held for the one whose close button waits on a write.

Why

Editing a label refilled the form you had just used to make one, at the top of the page, away from the row you pressed Edit on.

How it was checked

svelte-check; just look settings-labels signed in, with the list, the new label dialog and the edit dialog open, desktop light and phone dark (pictured below). The e2e labels flow now makes and edits its label through the dialog.

Shots-moved: settings-labels

Shortcomings

The other dialogs' markup is the same as before but for their title ids, which now follow each dialog's id; no shot opens them.

🤖 Generated with Claude Code

This moves label create and edit into a dialog under the list, and folds the nine hand-written popovers into one Dialog molecule. The refactor reads cleanly. One thing will fail the e2e check: the label flow in harness/e2e/flows.spec.mjs (lines 366–381, "defining, changing and deleting a label") still drives the old page. It does three things the new page doesn't support:

• It fills getByLabel('New label'), but that is now the button's name and the field is labelled "Name".
• It never opens the dialog first, so the fields are hidden.
• It clicks "Save label", which is now "Save changes".

AGENTS.md says to update the flow when a control that writes changes. Open the dialog with the New label button, fill Name, and click Create label. Use "Save changes" for the edit. Also check that the li locator doesn't match anything inside the dialog. I could not read the checks to confirm the failure.

The e2e flow I asked for in round 1 is now updated. It opens the dialog with the New label button, fills Name, clicks Create label and Save changes, and waits for the dialog to hide. The li row locator can't match anything inside the dialog, because the dialog sits outside the list. I read the diff and didn't run the checks. The rest is the same as before: label create and edit move into a dialog under the list, and the nine hand-written popovers become one Dialog molecule. I found nothing else that has to change.

Since my approval, the only change is the Exclusive checkbox. It now sits in a two-column grid, aligned with its name. Its hint text is also reworded to explain by example. It is CSS and markup only, and the e2e flow doesn't touch it. The .check rules were replaced by .exclusive ones, and the label keeps the check class, so the old rules cannot clash. I found nothing that has to change. I didn't run the checks, and none were listed for this commit.

The only change since my last approval is in harness/e2e/private.spec.mjs. The private-repo "defining a label" flow still drove the old inline form. It now opens the dialog with the New label button, fills Name, clicks Create label, and waits for the dialog to hide. This matches the update to the other labels flow. The li locator can't match anything inside the dialog, since the dialog sits outside the list. I read the diff and didn't run the checks. I found nothing that has to change.