shadcn.io is not affiliated with official shadcn/ui
Bug Report Completeness Success Block for Solid
A bug-report confirmation inside an app panel: the issue number with a copy button, a triage badge, a five-item completeness list with a progress bar, and an Add button that opens a textarea and ticks the missing item locally.
Installation
Overview
Show a reporter what their report is missing and let them fix it on the spot, with this confirmation panel for Solid with Ark UI. It is the panel Gnatcatch, an issue tracker, shows after someone files a bug: a header with one action, the Shine Button Track this issue, over one framed card ruled by Guides. Its first band names the report with the issue number, a Copy Button, the title and an outline Badge for triage. The second is a Progress bar and a list of five parts, Steps to reproduce, Console log, Screenshot, App version and Minimal repro, with the missing one marked and an Add button. A status line follows, and the last band is a Collapsible with a Textarea: Save ticks the item and moves "4 of 5" to "5 of 5". For trackers, support forms and anything that triages reports.
FAQ
What stays in the page, and how do I wire it for real?
Nothing was filed. The issue, its title and the five parts are typed constants; Save only ticks the item in the page. To wire it, build the list from the stored report, send the added text to an endpoint that attaches it to the issue, and compute the count and the bar from what the record holds.
Where do the count and the bar come from?
From the list. "4 of 5" and the bar's width are both worked out from how many parts are included, so ticking the last one moves them together. Nothing is typed twice.
Where does the editor open, and does it move things?
In the last band, under the status line, so opening it moves nothing above it. The section is inert while closed. Add opens it and moves focus to the textarea; saving or cancelling closes it and puts focus back on the Add button, or on the new "Included" mark once the item is in.
Is a missing part only a colour?
No. Each part is a check and the word "Included", or a bar and the word "Missing", in the same weight in light and dark. On a phone the word "Missing" is hidden visually but the button is named "Add minimal repro".