shadcn.io is not affiliated with official shadcn/ui
Comment Thread Timeline Block for Svelte
A question-and-answer thread on a rail: one question, five answers with reply-latency chips such as after 12 min, two nested replies on a sub-rail, and an Accept this answer toggle that moves the Solved marker and the header to Solved after 3 h 5 min.
Installation
Overview
Show how fast a question was answered, and which answer solved it, with this comment thread timeline for Svelte with Ark UI. It is written for Askhollow, a fictional question-and-answer forum. A hairline frame with a plus mark on each corner holds the question and, on a vertical rail below it, five answers in the order they arrived, each with a lettermark avatar and a chip counted from the typed times ("after 12 min"). Two replies sit on a sub-rail under the answers they belong to, each with its own latency. You are the asker, so every answer has an "Accept this answer" Toggle: accepting one moves the Solved Badge to it and the header says "Solved after 3 h 5 min"; pressing it again reopens the question and the header says how long it has been open. Only one answer can be accepted. The marker has a reserved place on every answer, so nothing shifts when it moves. For help centres, forums and support threads. The people, question and answers are example data.
FAQ
How do I change the thread?
Edit QUESTION and ANSWERS at the top of the file. Each answer has an id, a from, an ISO time at in UTC, its text and a list of replies of the same shape. The latency chips and the header are derived from the times and AS_OF.
What does accepting do?
It sets which answer id is accepted, which is one string, so only one answer can be accepted at a time. Accepting the accepted answer again clears it. The header is rebuilt from the accepted answer's time. Nothing is posted: the status line says so.
What does the chip count?
The minutes between the question and the answer for an answer, and between the answer and the reply for a reply, written as hours and minutes by span. It uses no locale, so the text is the same on the server and in the browser.
What stays in the page, and how do I wire it?
The accepted answer, in local state. To wire it for real, send the accept to your server from accept, and only change the state when the server confirms; show the Toggle only to the asker.
Is it accessible?
The answers are an ordered list with a heading per answer. Each accept control is a toggle button with aria-pressed, labelled by its text. The Solved badge is text, and on answers that are not accepted it is hidden from assistive technology while keeping its place. The status line is a polite live region.