ThreadPanel

Thread side-panel chrome for the right panel stack: header, title, action cluster, scroll body, and composer/footer slot.

Preview#

Thread — #acme-design

1/2

Cindy

Should ThreadPanel own the right-panel chrome?

Beginning of replies

10 replies

Today

Cindy

SideThreadColumn owns persisted width and desktop resize chrome.

Atlas

ThreadPanel now owns the right-panel header, body, action, and footer chrome.

Noah

Keep the original message pinned above the scroll body so context stays visible.

Atlas

Agreed. Replies should scroll independently from the header search and composer footer.

Mia

Does the scrollbar still fade out once the reply stack gets long?

Cindy

Yes, it fades as soon as scrolling settles. Short threads never show it at all.

Atlas

Desktop uses ScrollArea and mobile keeps the native PanelScrollViewport, so both behave the same.

Noah

One more thing: the last reply should never sit behind the composer.

Mia

Scrolling to the end should leave a comfortable gap above the footer.

Atlas

That clearance comes from the message-list content recipe.

Controls

Anatomy#

<ThreadPanelRoot>
  <ThreadPanelHeader>
    <Button className="mr-1 lg:hidden" variant="outline" size="icon-sm" aria-label="Back">
      <ChevronLeft />
    </Button>
    <ThreadPanelTitle>
      Thread
      <ThreadPanelTitleMeta> — #acme-design</ThreadPanelTitleMeta>
    </ThreadPanelTitle>
    <ThreadPanelActions>
      <PanelAction aria-label="Search thread">
        <Search />
      </PanelAction>
      <PanelAction aria-label="View in channel">
        <ExternalLink />
        <span className="hidden md:inline">View in channel</span>
      </PanelAction>
      <PanelAction className="max-lg:hidden" aria-label="Close thread">
        <X />
      </PanelAction>
    </ThreadPanelActions>
  </ThreadPanelHeader>
  <ThreadPanelContent>
    <ThreadPanelSearch>
      <InputGroup />
      <ThreadPanelSearchTrailing>
        <ThreadPanelSearchCount />
        <ThreadPanelActions>
          <PanelAction aria-label="Previous match">
            <ChevronUp />
          </PanelAction>
          <PanelAction aria-label="Next match">
            <ChevronDown />
          </PanelAction>
          <PanelAction aria-label="Close search">
            <X />
          </PanelAction>
        </ThreadPanelActions>
      </ThreadPanelSearchTrailing>
    </ThreadPanelSearch>
    <ThreadPanelOriginalMessage>
      <MessageItem />
    </ThreadPanelOriginalMessage>
    <ThreadPanelBody>
      <MessageList>
        <ThreadPanelReplySummary>
          <MessageListNotice />
          <ThreadPanelReplyCount />
        </ThreadPanelReplySummary>
        <MessageListDateDivider />
        <MessageItem />
        <MessageItem>
          <MessageItemBody>
            <MessageItemSearchMatch>Matching text</MessageItemSearchMatch>
          </MessageItemBody>
        </MessageItem>
      </MessageList>
    </ThreadPanelBody>
    <ThreadPanelFooter>
      <ComposerRoot>
        <Composer>
          <ComposerInput />
          <ComposerToolbar>
            <ComposerActions />
            <ComposerMeta>
              <ComposerSubmit />
            </ComposerMeta>
          </ComposerToolbar>
        </Composer>
      </ComposerRoot>
    </ThreadPanelFooter>
  </ThreadPanelContent>
</ThreadPanelRoot>

Usage#

Thread with search#

Thread — #acme-design

1/2

Cindy

Should ThreadPanel own the right-panel chrome?

Beginning of replies

10 replies

Today

Cindy

SideThreadColumn owns persisted width and desktop resize chrome.

Atlas

ThreadPanel now owns the right-panel header, body, action, and footer chrome.

Noah

Keep the original message pinned above the scroll body so context stays visible.

Atlas

Agreed. Replies should scroll independently from the header search and composer footer.

Mia

Does the scrollbar still fade out once the reply stack gets long?

Cindy

Yes, it fades as soon as scrolling settles. Short threads never show it at all.

Atlas

Desktop uses ScrollArea and mobile keeps the native PanelScrollViewport, so both behave the same.

Noah

One more thing: the last reply should never sit behind the composer.

Mia

Scrolling to the end should leave a comfortable gap above the footer.

Atlas

That clearance comes from the message-list content recipe.

Controls

API#WIP

ThreadPanelRoot#

...props

section props

Full-height thread panel surface. It does not own thread data, routing, responsive placement, or document scroll behavior.

Prop	Type	Default	Description
`...props`	section props	—	Full-height thread panel surface. It does not own thread data, routing, responsive placement, or document scroll behavior.

ThreadPanelHeader#

...props

div props

Fixed thread header region.

Prop	Type	Default	Description
`...props`	div props	—	Fixed thread header region.

ThreadPanelTitle#

...props

h2 props

Primary thread title. Truncates within the header.

Prop	Type	Default	Description
`...props`	h2 props	—	Primary thread title. Truncates within the header.

ThreadPanelTitleMeta#

...props

span props

Secondary title metadata, such as the parent channel name.

Prop	Type	Default	Description
`...props`	span props	—	Secondary title metadata, such as the parent channel name.

ThreadPanelActions#

...props

div props

Action cluster for header or search controls.

Prop	Type	Default	Description
`...props`	div props	—	Action cluster for header or search controls.

ThreadPanelContent#

...props

div props

Thread surface below the header, including search, messages, and composer slots.

Prop	Type	Default	Description
`...props`	div props	—	Thread surface below the header, including search, messages, and composer slots.

ThreadPanelSearch#

...props

div props

In-thread search row under the header. Left: InputGroup. Right: ThreadPanelSearchTrailing.

Prop	Type	Default	Description
`...props`	div props	—	In-thread search row under the header. Left: InputGroup. Right: ThreadPanelSearchTrailing.

ThreadPanelSearchTrailing#

...props

div props

Right-aligned cluster for match count and PanelAction controls. Stays flush to the row end when the input is narrower than the row.

Prop	Type	Default	Description
`...props`	div props	—	Right-aligned cluster for match count and PanelAction controls. Stays flush to the row end when the input is narrower than the row.

ThreadPanelSearchCount#

...props

div props

Match-count label in the trailing cluster, formatted as a/b.

Prop	Type	Default	Description
`...props`	div props	—	Match-count label in the trailing cluster, formatted as a/b.

ThreadPanelOriginalMessage#

...props

div props

Original message region above the scroll body. Place a MessageItem inside it.

Prop	Type	Default	Description
`...props`	div props	—	Original message region above the scroll body. Place a MessageItem inside it.

ThreadPanelReplySummary#

...props

div props

Aligns the reply notice and count with the thread panel content gutter.

Prop	Type	Default	Description
`...props`	div props	—	Aligns the reply notice and count with the thread panel content gutter.

ThreadPanelReplyCount#

...props

div props

Labels the reply count above the message list.

Prop	Type	Default	Description
`...props`	div props	—	Labels the reply count above the message list.

ThreadPanelBody#

...props

div props

Scrollable message body.

Prop	Type	Default	Description
`...props`	div props	—	Scrollable message body.

MessageListDateDivider#

...props

div props

Day-boundary marker in the message list.

Prop	Type	Default	Description
`...props`	div props	—	Day-boundary marker in the message list.

MessageListNotice#

...props

div props

Inline notice in the message list.

Prop	Type	Default	Description
`...props`	div props	—	Inline notice in the message list.

MessageItemSearchMatch#

...props

mark props

Inline matched-text part that also applies the search-result surface to its containing MessageItem.

Prop	Type	Default	Description
`...props`	mark props	—	Inline matched-text part that also applies the search-result surface to its containing MessageItem.

ThreadPanelFooter#

...props

div props

Composer/footer boundary. Compose it with ComposerRoot like ConversationPanelFooter.