Shared Components
Reference for shared UI components that appear across multiple pages in Tradeways — account switcher, event bell, P&L mode switcher, and more.
Shared Components
Tradeways uses a set of shared UI components that appear on multiple pages. These components provide consistent behavior for account selection, navigation, notifications, and common form controls.
Navigation
App Sidebar
The collapsible sidebar is the primary navigation element. It contains two groups of links:
| Group | Items |
|---|---|
| Navigation | Dashboard, Trades, Journal, Mentoring |
| Timeline | Daily, Weekly, Monthly, Yearly, Lifetime |
The footer includes links to Documentation (opens the docs site in a new tab), Settings, and a user menu with a sign-out option. When viewing a mentored account, the avatar area shows the student's name and a "Read-only" label.
The Journal link is hidden when the user has no journal access (e.g. on a mentored account without journal permissions).
Header
The public-facing header appears on the landing page and unauthenticated routes. It shows the Tradeways logo, and either sign-in / sign-up buttons or the signed-in user's email with a sign-out link.
Account Switcher
The account switcher is a dropdown in the top bar that lets users switch between trading accounts. It displays the active account's name and currency.
| Behavior | Description |
|---|---|
| Favorites | Shows only favorited accounts. If no accounts are favorited, all own accounts are displayed instead. |
| Mentored accounts | Favorited mentored accounts appear in a separate section below own accounts. |
| Manage Accounts | Opens a modal to create, edit, or delete trading accounts. |
| URL-aware switching | When on /dashboard/<ref>, switches redirect to /dashboard to avoid referencing a non-existent dashboard. |
Switching accounts updates the active account and navigates to the same page with the new account selected.
Event Bell
The event bell is a notification center accessible from the top bar. It shows a bell icon with an unread count badge and opens a scrollable event list.
Event Types
| Event | Description |
|---|---|
| Trade imported | Trades were imported via a broker integration |
| Trade created | A trade was manually created |
| Trade closed | A trade was closed |
| Trade deleted | A trade was deleted |
| Image uploaded | An image was attached to a trade |
| Account created / deleted | A trading account was created or removed |
| Dashboard created / deleted | A custom dashboard was created or removed |
| Mentor events | Invitation, acceptance, decline, permission changes, feedback, and replies |
Interactions
- Mark all as read -- clears the unread badge for all events.
- Mark individual as read -- a checkmark button appears on hover for unread events.
- Click to navigate -- clickable events navigate to the relevant page (e.g. trade detail, mentoring).
- Timestamps display as relative time: "Just now", "5m ago", "2h ago", "3d ago".
Changes appear instantly in the UI.
P&L Mode Switcher
The P&L mode switcher lets users change how profit and loss values are displayed across the entire app. It appears in the top bar as an icon representing the current mode.
| Mode | Icon | Description |
|---|---|---|
| Currency | $ | P&L in the account's settlement currency |
| Ticks (1 Lot) | # | Ticks normalized to one standard lot |
| Ticks (Sized) | Chart | Ticks scaled to the actual position size |
| Percentage | % | P&L as a percentage of account equity |
Percentage mode requires at least one account transaction. The first transaction is the account's starting balance and may be 0. If none exist, the percentage option shows a hint and links to the accounts settings page.
The tick unit label adapts to the dominant asset class of the active account (Ticks for futures, Pips for forex, Points for CFD, Cents for stocks). See P&L Display Modes for details on conversion and scope.
Form Controls
Currency Select
A dropdown for selecting an ISO 4217 currency code. Supports two display variants:
| Variant | Display |
|---|---|
| compact | Currency code only (e.g. "USD") |
| detailed | Code + symbol + name (e.g. "USD $ — US Dollar") |
Currency metadata (symbol, name, decimal digits) is provided by Tradeways.
Date Picker
A popover calendar for selecting a single date. Features include:
- Configurable date range with earliest and latest selectable month.
- Clearable selection via an X button.
- Custom date formatting.
- Dropdown navigation for month and year.
Instrument Form
A shared form for configuring instrument metadata, used in both the instrument settings page and the import flow. Fields adapt based on the selected asset class:
| Asset Class | P&L Unit | Fields shown |
|---|---|---|
| Futures | Ticks | Tick Size, Point Value, P&L Currency, Exchange |
| Forex | Ticks | Tick Size, Point Value, P&L Currency (auto-derived) |
| CFD | Ticks | Tick Size, Point Value, P&L Currency |
| Stocks, Crypto | Currency | Contract Multiplier, Lot Size, P&L Currency |
For forex and crypto pairs, the P&L currency is automatically derived from the symbol (e.g. EURUSD derives USD). A cross-currency warning appears when the instrument's P&L currency differs from the account's settlement currency.
Segment Toggle
A generic toggle control for switching between a set of labeled options. Renders as a compact row of buttons with the selected option highlighted. Used throughout the app for mode switches, view toggles, and filter selectors.
Display Components
Asset Class Badge
A small outlined badge that shows the localized name of an asset class (Futures, Forex, Stocks, Crypto, CFD). Used in trade lists, instrument configuration, and detail views.
Save Status Indicator
A status dot with label that shows the current save state of a note or form. Used primarily in the journal editor.
| Status | Dot Color | Label |
|---|---|---|
| empty | Gray | No note |
| saved | Green | Saved |
| creating | Blue (pulse) | Creating... |
| dirty | Amber | Unsaved changes |
| saving | Blue (pulse) | Saving... |
Sidebar Section Header
A small uppercase label used to separate sections in detail sidebars (e.g. trade detail, journal). Supports an optional action slot (e.g. an add button). A collapsible variant adds a chevron toggle to expand/collapse the section content.
See Also
- P&L Display Modes -- details on P&L mode conversion, scope, and tick unit names
- Trading Display -- configure the default P&L display mode
- Accounts -- manage trading accounts, favorites, and starting balances