# Support inbox · Mailroom The support inbox of a small software team, on a Quiet page: conversations in a list with the customer, subject, last line, age, status (Open, Waiting or Closed), who has it and a priority lamp; filters for Mine, Unassigned, All and each status, with a count that always matches the list; and a search. A conversation opens beside the list, or as its own screen with Back on a phone, with the thread, a private internal note that is plainly not sent, a reply box with saved replies, Assign, Status, Priority and Close, which asks first when the customer spoke last. The customer has a panel with plan, sign-up date, past conversations and a private note. Saved replies can be added, changed and deleted, and Reports counts the week from the same conversations. Loading, empty, error and sending-paused states included. Template · With the Kit · https://tactileui.dev/templates/mailroom > The code and styling for this template come with the Tactile UI Kit, which is in the Founder Pass. Sign in if you have it. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing ## Anatomy - [Bar](https://tactileui.dev/parts/bar): The top of a page: a wordmark with a lamp, printed links, and one contrast key at most. - [Panel](https://tactileui.dev/parts/panel): A face plate that groups what belongs together: a head, a rule, then the parts. Screws only on device-like panels. - [List](https://tactileui.dev/parts/list): Rows in a rack: a mark, a title, a second line and a fact or a key at the end. Chosen rows sink into a recess with their check key latched; in a running order, a row lifts out of the rack on its skirt and slides past the others, from the keyboard or by its grip. - [Message](https://tactileui.dev/parts/message): One chat message as a plate, with no chat around it, and made the way the chat is made. What you wrote is typed into a recess and sits to the right; what the assistant said is printed on a slip of paper torn along a perforation; what someone else wrote is a small raised plate. Along the top run the sender, printed as a legend, and the time; a lamp and a word say what has become of your message (sending, sent or not sent). A message that did not go grows a Retry key. Use it in a thread you build yourself, in a notification or in a log of what was said. - [Avatar](https://tactileui.dev/parts/avatar): A person’s mark, struck like a coin: initials stamped into the field, or a photo set under the rim, with a status lamp mounted at five o’clock. Stacks into a group with a count. - [Tag](https://tactileui.dev/parts/tag): A small printed plate: a type, a count, a badge. Solid for the one tag that must stand out. - [Status](https://tactileui.dev/parts/status): A lamp with words: the state line in tables, panel heads and lists. The words carry the meaning; the lamp is the glance. - [Lamp](https://tactileui.dev/parts/lamp): The only colour in the kit: a lamp that is on. Green is on, amber is waiting, red is recording or failing, blue is linked, white is standing by. Always next to words. - [Search field](https://tactileui.dev/parts/search-field): A recess for a question. A glass is printed on its floor at the start, the words run on, an optional count is printed behind an engraved line, and a clear key sits in the far corner while there is something to clear. Escape empties it. - [Segmented control](https://tactileui.dev/parts/segmented): A row of keys in a tray with one pressed down: pick a view, a range or a mode and it applies at once. It is the kit’s selector without the lamps, with sizes, a full-width row and icon segments. - [Select](https://tactileui.dev/parts/select): A choice from a longer list, in the same recess as a field, with a printed chevron. The browser’s own menu opens it. - [Switch](https://tactileui.dev/parts/switch): On or off, applied the moment it moves. A native checkbox with a ridged thumb in a slot that lights green when on. - [Drawer](https://tactileui.dev/parts/drawer): A panel that slides in from any edge of the window, on the native dialog. A face plate bolted to the frame, with a machined grip let into its inner edge to pull it shut by. - [Form validation](https://tactileui.dev/parts/validation): A form that says what is wrong, on the browser’s own checks. Press submit with something missing and each field in error gets a line under it with a red lamp lit and words that say how to put it right, its well ringed red; at the top of the form an annunciator lights over a count and a list that links to each field, and takes the focus. From then on each field is checked again as it changes. - [Alert dialog](https://tactileui.dev/parts/alert-dialog): The dialog plate for a question that must be answered before an act that matters. A caution strip is set across its head with one lamp in it, red when the act cannot be undone and amber when it can. The question is the title, one sentence says what will happen, and a grave act can ask for its name to be typed first. - [Readout](https://tactileui.dev/parts/readout): A printed label over a value: key figures, with the unit small and the change in words. - [Bars](https://tactileui.dev/parts/bars): Printed bars on the panel, one value each. The bars are ink laid flat on the plate, never a colour and never glass; the axis is engraved into it, a groove along the zero line with the light on its lower lip and a faint rule at each tick. Columns by default, rows when the labels are long, and on display glass the ink is the display’s light. - [Spec list](https://tactileui.dev/parts/spec): Key and value facts, printed like the plate on the back of a device. - [Alert](https://tactileui.dev/parts/alert): A message let into the surface, with an annunciator: a small lit legend (Note, Done, Check, Fault) beside the words that say what happened. - [Empty state](https://tactileui.dev/parts/empty-state): What a view shows before it has anything: an empty tray with the outline of what goes in it printed on its floor, one sentence and one key. - [Skeleton](https://tactileui.dev/parts/skeleton): The shape of a page before its data arrives, drawn as the unprinted plate: blank engraved bars where the words will print. Nothing on it moves. One amber lamp beside “Loading” is the only sign of work. - [Key](https://tactileui.dev/parts/key): Every button, and every link that acts like one: a cap on a skirt that drops below the plate when pressed. - [Toast](https://tactileui.dev/parts/toast): A confirmation after an action. ## Usage notes A sample-data strip · Bar with the name, three places (Inbox with its Open count, Saved replies, Reports), a Quiet switch and who is signed in · a tab bar on a phone · Inbox: a search field and a selector (Mine, Unassigned, All, Open, Waiting, Closed, each with its count) over a list of conversations, a lamp for high priority, a status word and the person who has it · the thread: messages as plates, the customer on the left and the team on the right, an internal note dashed and labelled Internal note, not sent, selects to assign and set status and priority, Close behind an alert dialog when the customer spoke last, a reply box with a saved-reply select and a switch to Internal note · the customer beside the thread, or its own page: plan, sign-up date, past conversations and a private note · Saved replies: a list with Edit and Delete (behind an alert dialog) and a drawer on the validation part · Reports: four readouts, bars for new and closed each day and for customer messages each hour, and a list of what is not closed by person · a key at the foot that shows the other states (?state=).