Sidebar and header in depth

Every control and text this screen shows, in screen order. The list is read from the demo by a crawl, and CI fails when the screen changes without its entry here.

The sidebar on the left and the header across the top are the same on every screen. The header also shows the open screen's name and a link to its guide page; those are listed on each screen's own Deeper page.

The screen as a whole: Tour of the app.

The numbers match the entries below. The picture shows the first screenful; controls further down, and texts, have no marker.

On the screenCopy Anchor Link

1. SendMock Mail · SMS · PaymentsCopy Anchor Link

Link.

• What it does: Opens the Overview, the dashboard of everything SendMock caught today.
• Links to: Overview.

2. OverviewCopy Anchor Link

Link.

• What it does: Opens Overview. The keyboard shortcut is g then o.
• Where its text comes from: The sidebar is built from one list in the app, the same one the command palette and the shortcuts use, so the three never disagree.
• Links to: Overview.

3. MailCopy Anchor Link

Link.

• What it does: Opens Mail, the inbox of every caught email; under it, Providers lists the email APIs SendMock answers. The keyboard shortcut is g then m.
• Where its text comes from: The sidebar is built from one list in the app, the same one the command palette and the shortcuts use, so the three never disagree.
• Links to: Mail.

4. SMSCopy Anchor Link

Link.

• What it does: Opens SMS, the conversations of every SMS; under it are Verify (g then v) and Providers. The keyboard shortcut is g then s.
• Where its text comes from: The sidebar is built from one list in the app, the same one the command palette and the shortcuts use, so the three never disagree.
• Links to: SMS.

5. PushCopy Anchor Link

Link.

• What it does: Opens Push, every push notification sent through FCM, Expo or OneSignal. The keyboard shortcut is g then u.
• Where its text comes from: The sidebar is built from one list in the app, the same one the command palette and the shortcuts use, so the three never disagree.
• Links to: Push.

6. HTTP CatcherCopy Anchor Link

Link.

• What it does: Opens HTTP Catcher, where bins capture the HTTP requests your app sends. The keyboard shortcut is g then h.
• Where its text comes from: The sidebar is built from one list in the app, the same one the command palette and the shortcuts use, so the three never disagree.
• Links to: HTTP Catcher.

7. WebhooksCopy Anchor Link

Link.

• What it does: Opens Webhooks; under it are Overview, Endpoints, Rules, Inbound routes, Deliveries (g then d), Composer, Templates, Variables and Saved. The keyboard shortcut is g then w.
• Where its text comes from: The sidebar is built from one list in the app, the same one the command palette and the shortcuts use, so the three never disagree.
• Links to: Webhooks.

8. PaymentsCopy Anchor Link

Link.

• What it does: Opens Payments; under it are All payments, Gateways, Methods, Flows and Subscriptions. The keyboard shortcut is g then p.
• Where its text comes from: The sidebar is built from one list in the app, the same one the command palette and the shortcuts use, so the three never disagree.
• Links to: Payments.

9. NumbersCopy Anchor Link

Link.

• What it does: Opens Numbers, the virtual phone numbers and their webhooks. The keyboard shortcut is g then n.
• Where its text comes from: The sidebar is built from one list in the app, the same one the command palette and the shortcuts use, so the three never disagree.
• Links to: Numbers.

10. ScenariosCopy Anchor Link

Link.

• What it does: Opens Scenarios, where multi-step checks are written and run. The keyboard shortcut is g then c.
• Where its text comes from: The sidebar is built from one list in the app, the same one the command palette and the shortcuts use, so the three never disagree.
• Links to: Scenarios.

11. LogsCopy Anchor Link

Link.

• What it does: Opens Logs, the SMTP sessions and the provider API requests. The keyboard shortcut is g then l.
• Where its text comes from: The sidebar is built from one list in the app, the same one the command palette and the shortcuts use, so the three never disagree.
• Links to: Logs.

12. SettingsCopy Anchor Link

Link.

• What it does: Opens Settings, every setting by section. The keyboard shortcut is g then ,.
• Where its text comes from: The sidebar is built from one list in the app, the same one the command palette and the shortcuts use, so the three never disagree.
• Links to: Settings.

13. DocumentationCopy Anchor Link

Link.

• What it does: Opens the docs of the version you run, in a new tab.
• Where its text comes from: The docs address is built into the app.

14. Report an issueCopy Anchor Link

Link.

• What it does: Opens GitHub's bug report form in a new tab, filled in with your SendMock version, release channel, operating system and browser. Nothing else is sent, and nothing at all until you submit the form.
• Where its text comes from: The version and channel come from GET /api/v1/info; the system and browser from the browser itself.

15. Request a featureCopy Anchor Link

Link.

• What it does: Opens GitHub's feature request form in a new tab, filled in the same way as Report an issue.

16. Report a security issueCopy Anchor Link

Link.

• What it does: Opens GitHub's private security advisory form, so a vulnerability is not reported in public.

17. Star on GitHubCopy Anchor Link

Link.

• What it does: Opens the SendMock repository on GitHub in a new tab.

18. Live · demo data, version #.#.#-devCopy Anchor Link

Status.

• What it does: Shows whether the app is connected to SendMock's realtime stream (Live, Connecting, or Offline, retrying), where the data comes from (the server, or demo data on the website demo) and the app's version.
• Where its text comes from: The connection state of the realtime stream, and the version the app was built with.
• Errors: Offline, retrying means the realtime stream dropped: the app keeps trying, and screens still load when you open them. If it stays offline, check SendMock is still running.

19. Toggle SidebarCopy Anchor Link

Button.

• What it does: Collapses the sidebar to icons, or opens it again. On a phone it opens the sidebar as a panel. The keyboard shortcut is ⌘ or Ctrl with B.
• What it changes: Remembered in the browser for your next visit.

20. Search or jump to... ⌘KCopy Anchor Link

Button.

• What it does: Opens the command palette: type a screen's name to go to it, or run one of its actions, Switch theme (T) and Show keyboard shortcuts (?). ⌘ or Ctrl with K opens it from anywhere.

21. Demo controlsCopy Anchor Link

Button.

• What it does: Only on the website demo: opens the demo controls, which add sample traffic, slow down or fail the demo API, switch between the standard, large and empty data sets, and turn the live traffic every 12 seconds on or off.
• What it changes: Only the demo in your browser tab; reloading the page starts a fresh demo.

22. Keyboard shortcutsCopy Anchor Link

Button.

• What it does: Opens the list of keyboard shortcuts. ? opens it too.

23. HelpCopy Anchor Link

Button.

• What it does: Opens the Help menu: Documentation, Keyboard shortcuts, What's new, Report an issue, Request a feature, Report a security issue and Star on GitHub, the same links as the sidebar's.

24. Change themeCopy Anchor Link

Button.

• What it does: Opens a menu to pick System, Light or Dark. System follows your computer's setting. T switches to the next theme from anywhere.
• What it changes: Remembered in the browser for your next visit.

25. NotificationsCopy Anchor Link

Button.

• What it does: Opens the list of recent notifications: new emails, new SMS and failed webhook deliveries, each opening what it is about. Clear all empties the list. When there are unread notifications the button says how many.
• Where its text comes from: Events from the realtime stream while the app is open; Settings > Notifications chooses which ones notify.
• Links to: The email, conversation or delivery each notification is about, and Settings.