fix(staged): improve badge validation UX and show unique name conflicts - #630
Conversation
…onflict When updating a repo badge's short name, the raw SQLite unique constraint error was unhelpful. Now we look up the conflicting badge first and return a clear error message identifying which repo already uses that name. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The saveBadge handler silently swallowed errors. Now it shows an error toast with the backend message (e.g. which repo owns the conflicting short name) and reverts the edit fields to their last saved values. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The repo settings sidebar only iterated over action_contexts, so badges that existed in repo_badges without a matching action_context were invisible. Merge both tables into a unified entry list so orphan badges appear in the sidebar and can be edited or deleted. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Replace the error toast on badge save failures with an inline error message below the short name input. The input also gets a red border to draw attention. The error clears on new input or repo switch. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Swap the DOM order so the name/hue fields come first and the live badge preview sits to their right, matching the expected visual layout. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Remove flex: 1 from badge-editor-fields so the preview sits snugly to the right of the fields instead of being pushed to the far edge. Use flex-basis: 100% on badge-error so it breaks onto its own line below the input. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Call saveBadge on every input event so the error appears/disappears as the user types. Fix --danger → --ui-danger to match the actual CSS variable, making the error text and input border red. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Restructure the badge editor so the controls (name, hue, preview) live in one row and the error message sits on a separate row below. This prevents the error from pushing the hue slider out of position. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Stop reverting badgeEditName/badgeEditHue to saved values on error. This lets the user keep typing through a conflicting prefix (e.g. "ge" is taken but "ges" would be valid). The $effect already resets fields when switching repos. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 2cd1537324
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
| } catch (e) { | ||
| console.error('Failed to update badge:', e); | ||
| const msg = typeof e === 'string' ? e : e instanceof Error ? e.message : String(e); | ||
| badgeError = msg; |
There was a problem hiding this comment.
saveBadge is now triggered on every oninput, so multiple async repoBadgeStore.update calls can overlap; when an older request rejects after a newer request succeeds (or after the user switches repos), this catch block still writes badgeError for the current selection. That produces incorrect inline errors that do not correspond to the currently edited repo/value. Capture the selected repo key (or a request generation counter) and only set badgeError if the response still matches the latest in-flight edit.
Useful? React with 👍 / 👎.
1 participant
Summary
Test plan
🤖 Generated with Claude Code