After selecting a date, the agent picks a time. Today this is a vertical button list of 15-min slots — your "weak and dull" complaint applies hardest here.
Constraint: 15-minute boundary, 6:00 AM – 9:00 PM, must be ≥ 3h from now, ≤ 7 days ahead. All four options below honor that — they differ in how they feel to use.
A Current+0 KB Plain button list
What you have today. One slot per row, scrollable. Quick to scan if you know exactly what you want, but visually flat and tall.
Pros
Familiar / boring is OK
Easy to keyboard
Zero new code
Cons
Tall / dense
No AM/PM grouping
"Plain and dull" — your words
One slot per row · scroll · current behavior
B Current+0 KB Grouped Morning / Afternoon / Evening
Same react-day-picker companion, restyled. Two-column slot grid grouped by part of day with sticky section headers. ~3× denser than current list. Recommended pairing for the Stripe calendar.
Pros
3× more visible at once
Sticky AM/PM/EVE headers
Pairs cleanly with Stripe-style calendar
Cons
Custom CSS per group
Slightly busier visually than A
Morning
Afternoon
Evening
Grouped sections · 2-col grid · sticky headers
C + New dep+8 KB Wheel / spinner picker
iOS-style wheels for hour / minute / AM-PM, via `react-mobile-picker` or similar. Feels native on touch, satisfying scroll. Less great with mouse — desktop UX is the trade-off.
Pros
Mobile-perfect
Compact (3 columns, fixed height)
Tactile feel
Cons
Awkward with mouse-wheel
Slow if you know the time
Doesn't honor 15-min boundaries cleanly
8
9
10
11
12
:30
:45
:00
:15
:30
AM
AM
PM
iOS-style wheels · mobile-first · 10:00 AM
D + New dep+11 KB Free-text smart input (cal.com-style)
Type "tomorrow at 10am" or "fri 2pm" — `chrono-node` parses it into a real time. Suggestions below the input. This is what cal.com and Linear use. Power-user fast, friendly to typos.
Pros
Fastest for power users
Reads agent's intent ("3pm next tue")
Pairs with calendar — both visible
Cons
Parsing edge cases
Need clear validation feedback
+11 KB for chrono-node
Parsed as Sat May 16 · 10:00 AM
Tomorrow at 10:00 AMMay 16, 10:00
Tomorrow at 10:30 AMMay 16, 10:30
Tomorrow at 11:00 AMMay 16, 11:00
Type natural language · live parse · suggestions
Reply with A / B / C / D — or "B + D combined" (text input above grouped grid is a real option)