shadcn.io is not affiliated with official shadcn/ui
Thread Merging Comments Block for Svelte
A Duplicates page with a Merge button that opens a dialog, shown open in place: choose the primary of three similar threads, read a live preview of the combined comments and people, and merge with an Undo.
Installation
Overview
Fold three versions of one question into one thread, with this merge dialog for Svelte with Ark UI. It opens from the Duplicates page of Mergeley, a duplicates cleaner for forums: the page header holds an outline Merge Button, a strip above the list says what has been merged with an Undo, and the page itself is drawn under a soft scrim inside a hairline frame with a plus mark on each corner. The dialog asks which thread to keep: three native radio cards, each with the title, the number of comments and people and the age. A preview is worked out from the choice ("After the merge: 12 comments, 5 people"), and two Checkboxes decide whether to leave a "Merged from" notice and keep the other titles as aliases. Merge threads, the only Shine Button, merges, closes the dialog and moves focus to Undo; the drawn list below the strip then shows one thread. For preview the dialog is drawn open in place when the page loads; Merge opens the real Dialog, with the same choices and the same state. It is built from Dialog, Checkbox, Shine Button, Button and Guides, with a CSS entrance only. For forums, help centres and any place where the same question gets asked three times.
FAQ
Why is the dialog already open, and what do I keep?
So you can see it without a click. On load the dialog is a copy drawn in place over the page: a native dialog element that is not modal, so nothing is trapped, hidden or focused. The Merge button opens the real Dialog, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same MergeFields component and share the block's state. In your app keep the Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.
How do I use my own threads?
Edit THREADS: each has an id, a title, its comments count, the people who wrote in it and the ISO date of the last comment. START_PRIMARY is the thread that is chosen first, and AS_OF is the fixed day ages are counted from. The preview adds up the comments and counts each person once, so people who wrote in two threads are not counted twice.
What does Merge threads do here?
It records the choice in local state, closes the dialog, writes what happened in the strip ("Merged into ... 12 comments, 5 people. Kept a notice.") and moves focus to Undo. The drawn list below then shows one thread, and the Merge button is unavailable until you undo. Nothing is sent. In your app, post the primary id, the other ids and the two options to your server, and show the row the server returns.
Is it accessible from the keyboard?
Yes. The real dialog is named by its title and described by its sentence, focus starts inside it and stays there until it closes, and Escape and Cancel return focus to Merge. The primary choice is a group of radios you move through with the arrow keys; the options are checkboxes with visible labels. The copy shown on load moves no focus; Escape inside it, Cancel and its close button close it and put focus on Merge. Each result is read from one polite status line.