Cleaning Up the Bulk-Select Bar in Grid View

v0.1.115 · UI/UX Consistency

Small interface decisions compound over time. One of the quieter pain points in the tenancies and properties grid views was a structural quirk that most users probably couldn't name — but definitely felt: an extra strip of UI that was always there, even when it had nothing to say.

The Problem: Two Rows Where One Should Do

In grid view, the area above the cards contained two separate rows:

1. A select-all checkbox row — always visible, always taking up ~32px of vertical space.
2. A BulkActionBar — only meaningful when items are selected, but structurally present at all times (rendered at 0-height when empty).

This meant that even when you'd selected nothing and had no intention of doing so, the UI was quietly reserving space and adding visual layers that served no purpose in that moment. In table view, the BulkActionBar sat correctly inside the card border. In grid view, it floated outside — inconsistent, and slightly untethered from the content it referred to.

The Fix: Toolbar as the Single Source of Truth

The solution consolidates everything into the single toolbar row that was already there — the one containing FilterToolbar, the view toggle, and the New button.

• When nothing is selected, the toolbar looks exactly as it always has.
• When items are selected, the toolbar animates to surface bulk action controls — sliding in alongside or in place of the New button.

This is the same pattern GitHub uses in its issue list: the toolbar transforms contextually rather than spawning a second, competing row beneath itself.

What This Means in Practice

• Less visual noise. The 32px select-all strip is gone. The grid starts immediately below the toolbar.
• Intentional, not ambient. Bulk actions appear when they're relevant. They don't occupy space when they're not.
• Consistent across views. Tenancies list and properties list now behave the same way in grid view. Table view is unaffected.
• Animated, not abrupt. The transition uses a sliding animation, so the toolbar change feels like a mode shift rather than a layout jump.

Affected Files

• src/app/dashboard/tenancies/tenancies-list.tsx
• src/app/dashboard/properties/properties-list.tsx

No API changes. No data model changes. Just a cleaner surface for the work that matters.