ThreadPanel

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

GitHub

Preview#

Thread — #acme-design

1/2
Cindy10:08
Should ThreadPanel own the right-panel chrome?
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#

API#WIP

ThreadPanelRoot#

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

ThreadPanelHeader#

PropTypeDefaultDescription
...propsdiv props—Fixed thread header region.

ThreadPanelTitle#

PropTypeDefaultDescription
...propsh2 props—Primary thread title. Truncates within the header.

ThreadPanelTitleMeta#

PropTypeDefaultDescription
...propsspan props—Secondary title metadata, such as the parent channel name.

ThreadPanelActions#

PropTypeDefaultDescription
...propsdiv props—Action cluster for header or search controls.

ThreadPanelContent#

PropTypeDefaultDescription
...propsdiv props—Thread surface below the header, including search, messages, and composer slots.

ThreadPanelSearchTrailing#

PropTypeDefaultDescription
...propsdiv 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#

PropTypeDefaultDescription
...propsdiv props—Match-count label in the trailing cluster, formatted as a/b.

ThreadPanelOriginalMessage#

PropTypeDefaultDescription
...propsdiv props—Original message region above the scroll body. Place a MessageItem inside it.

ThreadPanelReplySummary#

PropTypeDefaultDescription
...propsdiv props—Aligns the reply notice and count with the thread panel content gutter for the active theme.

ThreadPanelReplyCount#

PropTypeDefaultDescription
...propsdiv props—Labels the reply count above the message list.

ThreadPanelBody#

PropTypeDefaultDescription
...propsdiv props—Scrollable message body.

MessageListDateDivider#

PropTypeDefaultDescription
...propsdiv props—Day-boundary marker in the message list.

MessageListNotice#

PropTypeDefaultDescription
...propsdiv props—Inline notice in the message list.

MessageItemSearchMatch#

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