# Toolbar

The **Toolbar** runs along the top of the modeler and provides global actions
and status information. It is organized into three sections: left, center, and
right.

![Toolbar showing model title, search, and action buttons](assets/screenshots/toolbar.png){ .screenshot }

## Left section

### Quick-add event button

The **+ Event** button lets you add a new event (start node) to the canvas.
Clicking it opens a popup with all available event types. Select one to place
it on the canvas.

### Start flow filter

When the model has multiple event flows, a **flow filter** dropdown appears
that lets you show or hide individual flows on the canvas. This is useful for
focusing on a specific part of a complex workflow.

See [Flow Filtering](../features/flow-filtering.md) for details.

### Context selector

When the model owner provides workflow contexts, a dropdown appears that lets
you filter the available components to those relevant to a specific context.
Selecting a context:

- Filters the Component Panel and quick-add popups.
- Hides favorites (components appear in alphabetical order).
- Applies dependency rules to further narrow available components.

## Center section

### Model title

Displays the current model name. An unsaved-changes indicator (a dot) appears
next to the title when you have made changes that have not been saved yet.

Click the title to open the **Metadata Modal**, where you can edit the model's
name, description, version, tags, and other properties.

**Double-click** the title area to toggle between fullscreen and restored
[view modes](../features/view-modes.md).

In restored mode within Drupal, you can **drag** the center area to reposition
the modeler window.

### Messages indicator

When the system has messages to display (e.g., save confirmations, warnings),
a lightning bolt icon appears next to the title. Click it to toggle message
visibility. A trash icon lets you clear all messages.

Messages auto-fade after 5 seconds, but you can pin them by clicking the
lightning bolt icon after they fade.

## Right section

The right section contains the main toolbar actions. On wider screens, all
buttons are visible. On narrower screens, lower-priority buttons collapse into
an overflow menu (see [Responsive behavior](#responsive-behavior) below).

### Search toggle

Click the search icon (or press `Ctrl+F` / `Cmd+F`) to toggle the search bar.
Type to search nodes and edges by label, plugin, type, or ID. Matching results
appear in a dropdown and are highlighted on the canvas.

See [Search & Find](../features/search.md) for details.

### Edge order toggle

The **#** button shows or hides edge order numbers on connections. This is
useful for understanding the sequence in which conditions are evaluated.

### Copy and Paste

- **Copy**: Copies the selected elements to the clipboard (also available via `Ctrl+C`).
- **Paste**: Pastes copied elements onto the canvas (also available via `Ctrl+V`).

These buttons are enabled/disabled based on the current selection and clipboard
state.

### Model settings

Opens the **Metadata Modal** where you can edit the model name, description,
version, tags, template status, and other properties. This is equivalent to
clicking the model title.

### Zoom controls

- **Zoom out** (-): Decrease the zoom level.
- **Zoom in** (+): Increase the zoom level.

Both buttons are disabled when reaching the zoom limits.

### Auto layout

Automatically repositions all nodes on the canvas using an optimized layout
algorithm. The layout aims for a clean, readable arrangement of your workflow.

### Lock canvas

Toggles locking for the entire canvas. When locked, nodes cannot be moved or
deleted.

### Dark mode toggle

Switches between light and dark themes. The preference is saved to your
browser's local storage and persists across sessions.

See [Dark Mode](../features/dark-mode.md) for details.

### Minimap toggle

Shows or hides a small overview map in the corner of the canvas.

### Documentation link

Opens the project documentation site in a new browser tab.

### Export

Opens the export dialog where you can export the workflow in multiple formats:
Recipe, Archive, JSON, or SVG.

See [Export](../features/export.md) for details.

### Save

Saves the current model. The button is disabled when there are no unsaved
changes.

### View mode toggle

Switches between fullscreen and restored [view modes](../features/view-modes.md).

### Minimize

Collapses the modeler to a small bar at the bottom of the screen (Drupal
context only).

### Close

Returns to the model list. If there are unsaved changes, a confirmation dialog
appears with options to **Save and Close**, **Close Without Saving**, or
**Cancel**.

## Responsive behavior

The toolbar adapts to the available screen width:

- **Wide screens**: All buttons are visible in the right section.
- **Narrow screens**: Lower-priority buttons collapse into an **overflow menu**
  (a dropdown accessible via a menu icon). The most important actions (Save,
  Close, View mode) remain visible longest.
- **Very narrow screens** (below 660px): The toolbar enters compact mode where
  all right-section actions move into the overflow menu.

The overflow menu contains the same actions as the toolbar -- just in a
vertical dropdown list. In read-only mode (e.g., when viewing a template
without edit permission), editing-related actions are automatically hidden
from the overflow menu.
