One Tap, Any Stage: Quick Actions Come to the Tenancy Timeline on Mobile
One Tap, Any Stage: Quick Actions Come to the Tenancy Timeline on Mobile
Release v0.1.138 · UI/UX · Responsive
The problem we solved
The Tenancy Timeline is designed to give agents and landlords a complete picture of a tenancy at a glance — urgency banners surface deadlines, event cards document the key milestones, and every detail is a scroll away.
On mobile, though, that comprehensiveness had a cost. When an agent opened the timeline on a ~375 px screen, read the urgency banner at the top, and needed to act — say, kick off a check-out because the end date was approaching — they had to scroll back down through the timeline, locate the right event card, and tap View details to reach the action. The information was there. The action was there. But the path between them was longer than it needed to be.
What we shipped
We added a sticky floating action bar that pins itself to the bottom of the Tenancy Timeline on mobile, sitting just above the bottom navigation tabs.
It shows exactly one button — the most relevant next action for that tenancy right now:
- Start Check-In if the tenancy hasn't had a check-in recorded yet
- Start Check-Out if check-in is done and the end date is approaching
- Manage Deposit if check-out is complete and the deposit is awaiting release
When all three steps are done, the bar disappears on its own. No clutter, no stale buttons.
Why one button, not three?
Showing all possible actions at once forces a decision the agent shouldn't have to make. Most of the time there is only one right next step for a given tenancy — we made that step obvious and immediate. Fewer choices, faster action.
What this means in practice
An agent receives a push notification about an upcoming check-out deadline. They open the tenancy on their phone, skim the urgency banner — and the Start Check-Out button is already waiting at the bottom of the screen, no scrolling required. One tap starts the workflow.
That's the experience we were aiming for: the timeline tells you what's happening, and the toolbar tells you what to do next.
Technical note
The change is contained entirely within TenancyTimelineView (src/app/dashboard/tenancies/[id]/tenancy-timeline-view.tsx). The bar renders at z-index: 20 to layer correctly above the mobile tab bar without interfering with timeline content.
Released in v0.1.138. See the changelog for full details.