[Kennyando]

Why

On Step 3 of booking creation, a selected time slot could only be removed by double-clicking it on the calendar, or by clicking the ✖ on its chip in the "Selected time slot(s)" list above. Double-click is hard to discover. This PR adds an X to the slot itself so one click removes it.

What changed

• New (teal) slots in Week and Day view show a white X in the top-right corner. One click removes the slot.
• Approved and pending bookings never show the X.
• The X is hidden in Month view, where slots are only one line tall. Slots can still be removed there from the chip list.
• Double-click to remove still works.

Screenshot

Where to look

• calendar-booking-event.tsx: renders the X when an onRemoveEvent prop is passed and the slot has no status. The click is stopped so it doesn't also select the slot.
• booking-calendar.tsx: new optional onRemoveEvent prop, passed into each event. Other calendars don't pass it, so they show no X.
• booking-creation-time-slot-selector.tsx: passes the existing removeNewBooking as onRemoveEvent. No new removal logic.
• calendar-booking-event.module.scss: places the X 0.65rem from the top and right edges, and hides it in Month view.

Testing

• tsc --noEmit passes.
• Checked by hand in the browser: the X shows on new slots in Day view, and its position was adjusted.
• Not checked: touch screens, and short slots (30 min or less), where the X may overlap the time text.