Calendar: jarring transitions when switching Month/Week/Day/Table views

[AndresL230]

Summary

Switching between the Calendar views (Month / Week / Day / Table) has a jarring, abrupt transition. The current view unmounts and the next one mounts instantly with no animation, and because the four layouts have very different heights (Month = 6-row grid, Week = single row of 7 columns, Day = single column, Table = list), the page content and height snap between states.

Steps to reproduce

1. Go to /calendar.
2. Use the view switch in the top-right (Month | Week | Day | Table).
3. Toggle between the options and watch the calendar body swap.

Expected

A smooth transition when switching views — e.g. a short crossfade/slide, and ideally a settled height change rather than an instant snap.

Actual

Instant hard swap of the whole calendar body; content and page height jump.

Technical detail

Views are rendered as plain conditional swaps with no transition wrapper:

frontend/src/components/screens/Calendar.tsx:252-255

{!loading && view === "month" && <MonthView ... />}
{!loading && view === "week"  && <WeekView ... />}
{!loading && view === "day"   && <DayView ... />}
{!loading && view === "table" && ( ... )}

There is no AnimatePresence / motion wrapper around the view body.

Suggested fix

There's already an in-repo precedent: Study.tsx wraps its mode-content switch in AnimatePresence mode="wait" with a keyed motion.div (initial={{opacity:0,y:8}} → animate={{opacity:1,y:0}}). The same pattern could wrap the Calendar view body, keyed on view, for a consistent fade/slide. (Respect prefers-reduced-motion.)

Notes

• This is pre-existing behavior, not introduced by the control-consolidation work in PR refactor(frontend): shared UI primitives + green consolidation (Phase 2) #294 (that PR only replaced the view-switch buttons with the shared <Toggle>; the view-body rendering at the lines above was untouched).
• Observed on branch refactor/component-system.