SplitInboxLayout

Inbox with list, conversation and details

Printer offline on floor 3

Open

From Grace Hopper

It stopped after the update this morning.

import { useState } from 'react';
import { Badge, DescriptionItem, DescriptionList, EmptyState } from '@rookcom/monarch-react';
import { RecordHeader, SplitInboxContextToggle, SplitInboxLayout } from '@rookcom/monarch-react/patterns';

const conversations = [
  {
    id: 'c1',
    subject: 'Printer offline on floor 3',
    from: 'Grace Hopper',
    preview: 'It stopped after the update this morning.',
  },
  {
    id: 'c2',
    subject: 'Invoice shows the wrong address',
    from: 'Alan Turing',
    preview: 'Our billing address changed in March.',
  },
  {
    id: 'c3',
    subject: 'Reset two-factor',
    from: 'Katherine Johnson',
    preview: 'I replaced my phone and lost the codes.',
  },
];

const listStyle = { listStyle: 'none', margin: 0, padding: 'var(--mn-space-2)' } as const;

const itemStyle = (active: boolean) =>
  ({
    display: 'grid',
    gap: '0.125rem',
    width: '100%',
    padding: 'var(--mn-space-2) var(--mn-space-3)',
    border: 0,
    borderRadius: 'var(--mn-radius-md)',
    background: active ? 'var(--mn-color-accent-subtle)' : 'transparent',
    color: 'inherit',
    font: 'inherit',
    textAlign: 'start',
    cursor: 'pointer',
  }) as const;

function InboxDemo() {
  const [openId, setOpenId] = useState<string | null>('c1');
  const open = conversations.find((c) => c.id === openId) ?? null;
  return (
    <div
      style={{
        height: '26rem',
        width: '100%',
        border: '1px solid var(--mn-color-border-default)',
        borderRadius: 'var(--mn-radius-lg)',
        overflow: 'hidden',
      }}
    >
      <SplitInboxLayout
        listLabel="Conversations"
        detailLabel="Conversation"
        contextLabel="Ticket details"
        defaultListSize={280}
        defaultContextSize={260}
        detailOpen={open !== null}
        onBack={() => setOpenId(null)}
        backLabel="Back to conversations"
        list={
          <ul style={listStyle}>
            {conversations.map((c) => (
              <li key={c.id}>
                <button
                  type="button"
                  style={itemStyle(c.id === openId)}
                  aria-current={c.id === openId ? 'true' : undefined}
                  onClick={() => setOpenId(c.id)}
                >
                  <strong style={{ fontSize: 'var(--mn-text-sm)' }}>{c.subject}</strong>
                  <span
                    style={{ fontSize: 'var(--mn-text-xs)', color: 'var(--mn-color-text-muted)' }}
                  >
                    {c.from} · {c.preview}
                  </span>
                </button>
              </li>
            ))}
          </ul>
        }
        detail={
          open ? (
            <div style={{ padding: 'var(--mn-space-4)' }}>
              <RecordHeader
                headingLevel="h2"
                title={open.subject}
                status={<Badge tone="info">Open</Badge>}
                subtitle={`From ${open.from}`}
                actions={
                  <SplitInboxContextToggle
                    showLabel="Show ticket details"
                    hideLabel="Hide ticket details"
                  />
                }
              />
              <p style={{ margin: 0, fontSize: 'var(--mn-text-sm)' }}>{open.preview}</p>
            </div>
          ) : (
            <EmptyState
              size="compact"
              headingLevel="h2"
              title="Pick a conversation"
              description="Choose one from the list."
            />
          )
        }
        context={
          <div style={{ padding: 'var(--mn-space-4)' }}>
            <DescriptionList columns={1}>
              <DescriptionItem term="Requester">{open?.from}</DescriptionItem>
              <DescriptionItem term="Priority">High</DescriptionItem>
              <DescriptionItem term="Assignee">{null}</DescriptionItem>
            </DescriptionList>
          </div>
        }
      />
    </div>
  );
}

<InboxDemo />

Usage examples

The example at the top of the page is the only one for this component.

Purpose

Lays out a whole inbox on one page: a list pane, a detail pane and an optional context pane (requester, properties, activity). Panes resize with the pointer and the keyboard and collapse; below 768px it becomes one pane with a back button, and below 1280px the context pane becomes a drawer. The product supplies every pane’s content and owns the selection and URL state. One powerful page instead of five similar ones.

Use when

A queue of items people work through one by one: tickets, conversations, applications, review requests.
The list, the open item and its context should stay on screen together.

Avoid when

A plain list-and-detail without resizing or a context pane: use SplitLayout.
A table people scan and sort: use DataTable on its own page.

Design principles

Content-agnostic: the layout never fetches, routes or selects; it shows what it is given.
Every state is a prop: detailOpen, listCollapsed, contextOpen and the sizes can live in the URL or storage, with change callbacks.
The same layout from 320px to wide screens: one pane, two panes, three panes.
Panes are landmarks, and focus moves with what the user is looking at.

API reference

import { SplitInboxContextToggle, SplitInboxLayout, useSplitInboxLayout } from '@rookcom/monarch-react/patterns';

Export	Kind	Rendering	Root class
`SplitInboxContextToggle`	component	client	`.mn-split-inbox`
`SplitInboxLayout`	component	client	`.mn-split-inbox`
`useSplitInboxLayout`	hook	client	–

Renders a <div> with the list (<aside>), the detail (<section>) and the context (<aside>, or a Sheet below 1280px). Forwards its ref.

The splitters are APG window splitters: role="separator" with aria-valuenow (px), aria-valuemin, aria-valuemax and aria-controls.

SplitInboxContextToggle is the details button for the detail pane’s header: it toggles the column on wide screens and the drawer otherwise, with aria-expanded.

useSplitInboxLayout() returns { layout, contextMode, contextVisible, setContextVisible, toggleContext, listCollapsed, setListCollapsed, focusPane, ids } inside a pane (or null), for custom toggles such as a focus-mode button.

Breakpoints are fixed (768px and 1280px) and shared by the stylesheet and the component, so the first render matches the server.

Exported from @rookcom/monarch-react/patterns.

Generated from the TypeScript declarations of packages/react/src/patterns/layout/split-inbox-layout.

Properties

`SplitInboxContextToggle`

The button that shows and hides the context pane, for the detail pane's header. It toggles the column on wide screens and the drawer otherwise, and exposes the state with `aria-expanded`.

Prop	Type	Description
`asChild`	`boolean`	Render the child element (e.g. a Next.js <Link>) with button styling.
`brandColor`	`string`	Brand or tenant colour for `variant="brand"`, as `#rrggbb` or `#rgb`. The fill and text are derived per theme by the tokens contrast engine, so the label always meets WCAG AA (7:1 in more-contrast themes); the colour may be darkened or lightened to get there. Ignored by other variants. An invalid or missing colour falls back to the product accent.
`className`	`string`
`disabled`	`boolean`
`hideLabel`	`string`	Label while it is showing. Default "Hide details".
`icon`	`ReactNode`	Replaces the default panel icon. Decorative.
`id`	`string`
`loading`	`boolean`	Shows a spinner, sets aria-busy and blocks clicks while keeping focus.
`showLabel`	`string`	Label while the context pane is hidden. Default "Show details".
`size`	`ButtonSize`
`variant`	`ButtonVariant`	Visual weight. Use one `primary` per view region. Default `secondary`.