Throttle List

The Throttle List screen (/throttles) gives you a bird's-eye view of every active throttle on your layout. It is designed for operators who need to monitor and control multiple trains at the same time.

Grid Layout

Active throttles are displayed as ThrottleTile cards arranged in a responsive grid:

• On mobile screens, each tile takes the full width (one column).
• On medium screens and above (768px+), tiles arrange into a two-column grid, each tile taking half the width.

Tiles are rendered at the bottom of the viewport and fill upward, so you see your most recently added throttles aligned toward the bottom of the screen -- a layout choice that keeps the add button easily reachable on touch devices.

Throttle Tiles

Each tile is a compact version of the full throttle control, rendered as a rounded card with a violet-to-cyan gradient border. A single tile contains:

• Current speed -- the signed speed value displayed in the upper-left corner inside a glowing badge. This area also doubles as the drag handle for reordering (shown as a grab cursor).
• Locomotive name -- displayed in the center with gradient text, alongside the roadname logo.
• Locomotive avatar -- in the upper-right corner, with a context menu for Stop and Park actions. The avatar also displays the mini consist indicator if the loco is part of a consist group.
• Button controls -- a horizontal row of speed adjustment buttons spanning the full width of the tile:
  • Double decrease (--5)
  • Decrease (--1)
  • Stop
  • Increase (+1)
  • Double increase (+5)

The horizontal button layout is specific to the tile view (the full Throttle Control screen uses a vertical stack). Icons change to plus/minus symbols instead of chevrons to better suit the horizontal orientation.

Drag to Reorder

Tiles can be reordered by dragging the speed display area (the drag handle in the upper-left corner of each tile). The app uses vuedraggable to support smooth drag-and-drop with a 150ms animation.

Your custom tile order is persisted in local storage under the key @DEJA/throttles/order, so your arrangement is preserved across page reloads and browser sessions. The ordering logic works as follows:

• Throttles with a saved position are sorted according to your custom order.
• Newly added throttles (not yet in the saved order) are appended to the end, sorted by DCC address.
• If a throttle is removed (released/parked), it is automatically cleaned from the saved order list.

Adding a Locomotive

A floating action button (FAB) with a + icon is positioned in the bottom-right area of the screen. Tapping it opens a roster dialog -- a modal that displays all available locomotives from your layout's roster.

Each locomotive in the dialog is represented by its LocoAvatar component. Tap an avatar to:

1. Acquire the throttle -- the app creates a new throttle document in Firestore at layouts/{layoutId}/throttles/{address}, which the DEJA.js server picks up to begin controlling that address.
2. Close the dialog -- the roster modal dismisses and the new throttle tile appears in the grid.

The roster data is fetched from Firestore via the useLocos() composable from @repo/modules.

Navigating to Full Control

Tapping the locomotive avatar on any tile (via the select action in the avatar's context menu) navigates you to the full Throttle Control screen for that locomotive at /throttle/:address.

Background

The Throttle List screen features a dark background with three large, blurred gradient orbs (purple, blue, and violet) positioned at different corners, providing subtle depth without distracting from the tile content.