Author leave on the calendar itself

Planning used to mean filling in a wish list on one tab, pressing a button to
see a suggestion, then pressing another to accept it — with nothing on screen
telling you whether a plan was active. Dragging a range on the calendar now
creates the period directly, clicking a band opens it for editing, and each
change is recomputed and saved in one step. A period repeats never or yearly,
matching what the planner can actually express.

Clicking a day edits that day: its funding type, which pins it so the planner
leaves it alone, and whether the day counts as worked or off. That switch used
to be a mode covering the whole grid, which is what made the calendar confusing.

The season presets move to a rail beside the grid. Picking one lets the planner
choose the placement, then jumps there and flashes it, rather than asking the
user to guess dates the engine already knows.

A sync that funds nothing now says so, naming the period and how many days it
fell short, instead of leaving the screen unchanged and looking broken.
This commit is contained in:
2026-09-17 21:31:54 +02:00
parent 5e96c352fb
commit c2e64b504d
19 changed files with 3440 additions and 745 deletions
@@ -29,8 +29,12 @@ export interface CalendarWeekProps {
onPointerEnter: (date: string) => void
/** §3.4/§3.6 — calendar metadata (röda dagar/klämdagar/overrides) keyed by ISO date. */
calendarDaysByDate?: Map<string, CalendarDayEntry> | undefined
/** Optional for now — a later task wires this to a period editor. */
/** Opens the period editor for the clicked band's underlying period. */
onBandClick?: ((info: BandClickInfo) => void) | undefined
/** §Task7 — the wishId of a just-created/just-edited period to briefly
* highlight (see Calendar.tsx's preset rail: "scrolls to the resolved
* placement and flashes the band"). `null`/omitted highlights nothing. */
flashWishId?: string | null | undefined
}
/** One day's slot inside a band segment: either a real planned_leave_day
@@ -241,6 +245,7 @@ export function CalendarWeek({
onPointerEnter,
calendarDaysByDate,
onBandClick,
flashWishId,
}: CalendarWeekProps): ReactNode {
const { t } = useTranslation()
const bandSegments = useMemo(
@@ -323,6 +328,7 @@ export function CalendarWeek({
'calendar-band',
segment.isBandStart ? 'calendar-band--start' : '',
segment.isBandEnd ? 'calendar-band--end' : '',
segment.wishId && segment.wishId === flashWishId ? 'calendar-band--flash' : '',
]
.filter(Boolean)
.join(' ')