Listing states

Everything the item page and the order page say about where a listing stands, rendered from the real components and the real status configs. Two systems meet here: the listing's state (listings/config/listing-status.config.ts) colours the bar and the notice card, and the order's state (orders/config/order-status.config.ts) colours the badge and the order status card.

Icons

Every icon the two configs hand out, side by side. Nothing downstream picks its own: the badge and the order status card read the same leaf, and the fulfillment leaves follow the method.

Status bar

Across the top of the item page, and at the foot of the seller's item card. One line, the listing's colours. The seller reads their own state; a party to an order reads the outcome; everyone else reads why they can't buy.

Order status card

One card for where a party's order stands, on both pages: in the item page's details column, and as the current step of the order page's journey. Its colour, icon, state label and copy all follow the order (orders.statusCard in the dictionaries), so the two pages can't say different things. Only the foot changes. The item page links to the order. The order page puts its real actions there: the label, confirm and dispute, the handoff code, the way out while nothing has happened, and "Get help with this order" at every step. The dispute panel and the meetup card read the database, so they are left out here.

Notice card

The details column for anyone who is neither party, in the listing's public role: reserved is a wait (warning), sold is gone (neutral). Nothing to celebrate.

Order badge

Every leaf the order config derives, per viewer. Same order, three readings.