# UI conventions

The app should explain itself: anyone opening a page should see what it is for and what to do next.

- **Page intro:** one line under each title from `lang/en/help.php`, keyed by route name (`<x-page-intro />` in the tenant layout). Add a line for every new page.
- **Navigation:** grouped side menu with icons (`<x-icon name="…">`, outline set in `resources/views/components/icon.blade.php`); on small screens it opens from the menu button. "New post" is always at the top for people who can post.
- **Empty states:** never "No records". Use `<x-empty-state icon title :action action-label>` to say what will appear and the one thing to do next.
- **Statuses:** `<x-status-badge>` and `PostStatus::label()` use plain words ("Waiting for approval", "Posted", "Reconnect needed").
- **Networks:** `<x-platform provider="facebook">` shows the network in its colour.
- **Feedback:** `session()->flash('status'|'error', …)` in a Livewire action that doesn't redirect is shown at once as a toast (`App\Support\Livewire\FlashAsToast`, `<x-toasts />`).
- **Steps:** multi-step tasks show numbered steps (Home "Get started", the post editor, the post's progress bar).
- **Livewire names:** never name an action `upload`, `set`, `get`, `call`, `dispatch`, `watch`, `entangle` or another `$wire` alias; Livewire's JavaScript runs its own method instead (`vendor/livewire/livewire/dist/livewire.js`, `aliases`).