WeekCalendar design update

[devmount]

Description of the Change

This changes applies the latest design changes for the WeekCalendar component. Included:

• Blocked times (either due to user configuration or calendar event conflict) are now visually displayed as gray hatched in Bookers and Dashboard view
• The Bookers view now has a hover effect for selectable time slots
• The WeekCalendar.vue component now has an additional prop disabled to indicate, if users can select something (disabled=false, default) or not (disabled=true).
• The schedule-store.ts now has a function to calculate available time slots directly in the fronted (as equivalent to controller/calendar::available_slots_from_schedule in the backend). This was done to omit another async backend request and keep performance up.
• Additional types were introduced to handle grid items

Benefits

Alignment and consistency with designs.

Screenshots

Dashboard page:

Bookers page:

Known issues / things to improve

• Dark mode: We don't exactly have designs for dark mode, so I went with a (hopefully) reasonable default.

Related tickets

Closes #1465

[rwood-moz]

Looks good! One comment I have, and it might be a design question, but is there a reason why we are not aligning the existing appointments with the time lines? When I look at my dashboard calendar it looks like my existing appointments actually start earlier than they are actually scheduled for.

For example this appointment starts at 2pm but visually looks to me like it starts at 1:55pm maybe:

Compare the main dashboard calendar on current production where it is aligned:

Maybe this misalignment might cause our users some confusion?

Note with this PR on the bookee page we are aligning the available timeslots with the timelines which makes sense to me:

[devmount]

@rwood-moz Yes, this is indeed a question for design (@laurelterlesky, @solangevalverde). I implemented the views from Zeplin:

But maybe I misinterpreted and actually they were intended to be sharply aligned? 🤔 IMHO as a user I would be a little bit confused too 😇

[laurelterlesky]

Good catch. If the appointment starts on the hour - it should be on the line. I believe Davi did some increments of 15-min block in the code at some point. If an appointment starts at say 1:50, then it should show a bit above the line for 2pm.

Zeplin design were off a bit - they have been updated for reference.

[devmount]

Thanks Laurel! I removed the offset now, events should display grid-sharp again:

@rwood-moz @davinotdavid Do you mind checking this again?

[davinotdavid]

Wow, first of all, thank you for this work! 🎉 I find calendar tweaks to be quite difficult and you've done a great job on it!

Code-wise it overall looks good to me except that I think we are missing something on the calculation of the available slots (still not sure where though but might take a closer look later on). There is a small odd artifact I've found in the Dashboard on dark mode only it the available blocks seems to spill a little over:

Dark mode:

Light mode:

This was when I've set the Availability settings to be 45-min in slot duration. If I set it to 30-min I see that we are rounding the available slots in the Dashboard whereas I think we shouldn't?

I think this might be only apparent in dark mode because the background of the available slot is different than the background of the calendar itself so perhaps we can leave the calculations as is and tweak it on CSS land but I might be wrong.

Also, on mobile, the lines of the calendar show up above the selected time slot in the BookingsPage. Desktop looks fine though!