Mobile View Chat Block for Vue

One state holds the screen, "list" or "thread", and one holds the open chat. Opening a row sets both, marks the chat read and moves focus to the thread's heading. Back shows the list and moves focus to the row that was open, through one focus effect that runs after the screen changes.

They are derived, never typed twice: each chat has a typed count at load, a chat you have opened is read, and the Back chip shows the total of every other chat. The list's own total is the same sum.

Everything. The replies come from a short typed script in this file: a few keyed on words in your message, then one fallback per message and a last line that says it was the last sample reply. Each chat has its own two sample replies, in turn. Nothing is sent and no model runs, as the line under the composer says. To wire it for real, send the text where the code says so and append incoming messages to the same list.

The log is a focusable region announced as a log, so new messages are read out once, and every message starts with a hidden sender and time. Receipts and states are a glyph and a word, never a color. Tab runs through the controls, the field and Send.

It is the phone layout at every size: 44 px targets, a composer padded for a phone's home bar, and a window that keeps its height with only the list or the log scrolling.