Tenancy Timeline: Mobile Quick Actions Floating Toolbar

Introduced in v0.1.138

Overview

The Tenancy Timeline page (/dashboard/tenancies/[id]) now includes a sticky floating action bar at the bottom of the screen on mobile devices. It provides one-tap access to the most important workflow action for the current tenancy state, without requiring the user to scroll through the timeline to find the relevant event card.

How it works

The floating bar renders a single full-width button whose label and action depend on where the tenancy is in its lifecycle:

Tenancy state	Button shown	What it does
Check-in not yet started	Start Check-In	Opens the check-in creation flow
Check-in complete, approaching or past end date	Start Check-Out	Opens the check-out creation flow
Check-out complete, deposit pending	Manage Deposit	Opens the deposit release workflow
All workflow steps complete	(no bar shown)	Bar is automatically dismissed

The bar sits above the mobile bottom navigation tabs (z-index: 20) so it is always visible without obscuring page content.

Behaviour details

• Context-aware: Only the single most relevant next action is shown at any time — the bar does not present all three options simultaneously, keeping the decision surface minimal.
• Icon + label: Each button combines an icon with a short text label to support quick visual recognition.
• Auto-dismiss: Once all three steps (check-in → check-out → deposit release) are complete, the bar disappears. No manual dismiss action is required.
• Mobile only: The floating bar is scoped to mobile viewports. On larger screens the existing timeline card actions remain the primary interaction point.

Affected component

src/app/dashboard/tenancies/[id]/tenancy-timeline-view.tsx

Related features

• Tenancy Timeline urgency banners
• Check-In workflow
• Check-Out workflow
• Deposit Release