Cover And Feed Social Profile Block for React

Edit PERSON (name, handle, initials, bio, joined day, counts), POSTS and REPLIES (made with entry(id, date, text, likes, replies, to), where to is the handle a reply answers) and TILES. Dates are ISO strings, shown as "8 Oct" in UTC so they read the same everywhere. For real pictures, replace the cover's drawing and each tile with an img and object-cover; the posts stay as they are.

Follow and Like only change this page's state and say so in the foot: nothing is sent, and a reload starts again. To make them real, call your endpoint in follow and like, change the toggle and the count only when it answers, and put a failure in the same status line. A follower count that comes from a server should replace PERSON.followers; the page adds one to it only while you are following.

The three panels are all in the markup. The unseen copies sit in one grid cell with the live panel, so the cell is as tall as the tallest, and a shorter panel leaves quiet space under it instead of pulling the foot up. A phone has the same cell, narrower, and the tab list starts above the first phone screen's end.

The follow control is a toggle button named for the person ("Follow Marit Venkatesh"), whose pressed state is announced, and each Like is named for what it likes with its count ("Like your post, 128"), pressed or not. The tabs follow the arrow keys, the lists are real lists, the drawn pictures are hidden from assistive technology and each tile has a caption in words, and the status line is a polite live region present from the start. Handles keep their reading order in a right-to-left page.

The cover keeps its height and shows its middle, the avatar still overlaps it, the bio and the counts wrap under the name, and the tab list scrolls sideways if it has to. Media shows two tiles across instead of three.