Controls

The standard controls used across every APNAA screen. Both phones are live — try typing.

Search bar
9:41
Empty · with text
Riya Fan
Kabir Rao
Meera Iyer
Dev Malhotra
Isha Nair
Rohan Das
Empty, then with text: the clear × shows only when there is something to clear.
Message input
9:41
Circle · with photos
DM · replying
Replying to Riya Fan
AI chat · suggestions
Plain
Photo and emoji inside a borderless pill; they swap for a white Send circle as soon as you type.
Message input · Try it
9:41
Tap the box: the keyboard rises and the box rides on top of it. Type several lines — it grows to 5, then scrolls.
Search bar · rules
  • •One search bar everywhere a list or grid can be searched: Fan Discover, Creator Messages, Members, Moderation — no local variants.
  • •Pill, 40px high, input fill, no border, full width inside page margins.
  • •Grey search glass on the left, 15px text, grey placeholder that says what is searched ("Search by name").
  • •No label above it — the placeholder is the label.
  • •A clear × appears on the right only while there is text; tapping it empties the field.
  • •Results filter as you type. No Search button, no accent colour.
  • •Sits at the top of the sheet content, before filters and results.
Message input · rules
  • •Used in Creator Circle, Creator DMs, and Fan Circle, DMs and AI chat — one component, no local variants.
  • •Pill field, 44px at one line, input fill, no border, 15px text on 20px lines, grey placeholder.
  • •While empty, the add icons (photo, emoji) sit inside the field on the right. The moment there is text or a photo they vanish and Send takes their place.
  • •The field grows with the text up to 5 lines, then scrolls inside.
  • •Enter adds a new line — it never sends. Sending is only the white arrow.
  • •On a real phone the message box always pulls up and sits right above the keyboard; the pretend keyboard shows only on desktop.
  • •A view with the message box never shows the bottom tab bar: the screen gets a back arrow instead and the bar is hidden (the Circle tab itself is the Circle page — back returns to the tab you came from).
  • •The page behind scrolls with it: whenever the box opens, grows or sends, the latest message slides into view just above the box.
  • •Used in Creator tabs: Circle composer, Circle reply panel, and Messages → conversation (with AI reply suggestions). Same box everywhere — fan Circle, DM and AI chat follow it.
  • •On focus the composer moves up to sit directly on the keyboard; it drops back when the keyboard closes.
  • •Send: 32px white circle with a dark up arrow, inside the field. Only shown when there is something to send. No accent colour.
  • •Above the row, in this order: AI suggestion chips (only when empty), Replying to … with a cancel ×, then photo thumbnails (56px, 12px corners, tap to remove).
  • •AI chat has no photo icon (nothing to attach); Circle and DMs do.
  • •The composer has no Smoke and no background strip — the field floats on the page, pinned at the bottom, page margins left and right, 8px top and bottom.
  • •No scrollbars: the suggestion chips scroll sideways without a bar.