Let a day removed from a period stay removed

Taking one day out of a period the planner placed did nothing that
lasted: the period still asked for a full week, so the next sync put the
day straight back. The option was disabled rather than lying about it.

A removed day is now recorded as its own thing — no leave for this
parent, this child, this date — and the planner honours it on every
later sync. It is kept apart from the working-day overrides, which
answer a different question about the calendar rather than about the
plan.

The day belongs to the parent whose band was clicked, so removing one
parent's day leaves their partner's alone; where both parents were to be
off on one funding arrangement, the partner is simply funded on their
own instead. A removed day shortens what the period is asking for rather
than counting as a day the plan failed to find, so the advice about
closing a shortfall does not start arguing for a day nobody wants.

Nothing is removed without a way back: the toast undoes it, and the day
itself is marked in the calendar and offers to restore.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Ei7gCZzdd751uZtPzb1Pep

frontend/src/components/calendar/PeriodPopover.test.tsx

@@ -388,17 +388,52 @@ describe('PeriodPopover', () => {
       })
     })
 
-    it('disables "this day" and shows why, for a wish-linked band (would just reappear on the next sync)', () => {
+    // Intent changed (was: '"this day" is disabled for a wish-linked band').
+    // A single day removed from a planner-placed period is now recorded as a
+    // `PlannedDayExclusion`, so it no longer reappears on the next sync and
+    // the option is live — see Calendar.tsx's `excludeDay`.
+    it('enables "this day" for a wish-linked band and explains what it does', () => {
       render(<PeriodPopover {...defaultProps} wish={wish} />)
-      expect(screen.getByTestId('period-delete-day-button')).toBeDisabled()
+      expect(screen.getByTestId('period-delete-day-button')).not.toBeDisabled()
       expect(screen.getByTestId('period-delete-day-button')).toHaveAttribute(
         'title',
-        "Går inte att ta bort en enskild dag från en återkommande plan — planeraren lägger tillbaka den vid nästa synk. Ta bort perioden istället.",
+        'Bara den dagen tas bort. Resten av perioden ligger kvar, och planeraren lägger inte tillbaka dagen.',
       )
       expect(screen.getByTestId('period-delete-year-button')).not.toBeDisabled()
       expect(screen.getByTestId('period-delete-all-years-button')).not.toBeDisabled()
     })
 
+    it('calls onDelete with the "day" scope for a wish-linked band after confirmation', async () => {
+      mockOnDelete.mockResolvedValue(undefined)
+      render(<PeriodPopover {...defaultProps} wish={wish} />)
+      fireEvent.click(screen.getByTestId('period-delete-day-button'))
+      fireEvent.click(screen.getByTestId('period-delete-confirm-button'))
+      await waitFor(() => expect(mockOnDelete).toHaveBeenCalledWith('day'))
+    })
+
+    it('names the date and the parent in the "this day" confirmation', () => {
+      render(
+        <PeriodPopover
+          {...defaultProps}
+          wish={wish}
+          removeDayLabel="17 juni 2028"
+          removeDayParentName="Alex"
+        />,
+      )
+      fireEvent.click(screen.getByTestId('period-delete-day-button'))
+      expect(screen.getByTestId('period-delete-confirm')).toHaveTextContent(
+        'Ta bort 17 juni 2028 för Alex?',
+      )
+    })
+
+    it('falls back to the generic confirmation when the parent is unknown', () => {
+      render(<PeriodPopover {...defaultProps} wish={wish} removeDayLabel="17 juni 2028" />)
+      fireEvent.click(screen.getByTestId('period-delete-day-button'))
+      expect(screen.getByTestId('period-delete-confirm')).toHaveTextContent(
+        'Är du säker på att du vill ta bort den här dagen?',
+      )
+    })
+
     it('displays a generic local error when onDelete rejects with a non-Error value', async () => {
       mockOnDelete.mockRejectedValue('boom')
       render(<PeriodPopover {...defaultProps} wish={wish} />)

frontend/src/components/calendar/PeriodPopover.tsx

@@ -30,12 +30,12 @@ export interface PeriodPopoverSavePayload {
   wantsDubbeldag: boolean
 }
 
-/** todo.md #9 — the three-way remove. `'day'` removes just the clicked
- * occurrence's first date (ad-hoc bands only — see Calendar.tsx's
- * `handleDeletePeriod`); `'year'` removes this occurrence/year only (for a
- * yearly wish, narrows or splits `firstYear`/`lastYear`; for an ad-hoc band,
- * removes the whole contiguous range, same as today); `'allYears'` removes
- * every occurrence (today's only wish-branch behaviour, unchanged). */
+/** todo.md #9 — the three-way remove. `'day'` removes one date out of the
+ * clicked band — for an ad-hoc band by deleting the row, for a planner-placed
+ * one by recording a `PlannedDayExclusion` so the next sync leaves it alone
+ * (see Calendar.tsx's `handleDeletePeriod`); `'year'` removes this
+ * occurrence/year only (for an ad-hoc band, the whole contiguous range);
+ * `'allYears'` removes every occurrence of the wish. */
 export type PeriodDeleteScope = 'day' | 'year' | 'allYears'
 
 export interface PeriodPopoverProps {
@@ -48,6 +48,16 @@ export interface PeriodPopoverProps {
    * source of truth for an ad-hoc band. */
   startDate: string
   endDate: string
+  /** The single date "this day" would remove, already formatted for display
+   * (the day the user clicked inside the band, falling back to the band's
+   * first date). Shown in the confirm so it can never be ambiguous which day
+   * is about to go. */
+  removeDayLabel?: string | undefined
+  /** Whose day "this day" would remove. A removal is per parent — the
+   * partner's day on the same date stays — so the confirm says the name out
+   * loud rather than leaving the user to guess. `null` when the band's parent
+   * isn't among the known members (stale data, removed partner). */
+  removeDayParentName?: string | null | undefined
   parents: Array<{ id: string; name: string }>
   isSaving?: boolean | undefined
   error?: string | null | undefined
@@ -132,6 +142,8 @@ export function PeriodPopover({
   wish,
   startDate,
   endDate,
+  removeDayLabel,
+  removeDayParentName = null,
   parents,
   isSaving = false,
   error = null,
@@ -208,7 +220,13 @@ export function PeriodPopover({
   }
 
   const deleteConfirmMessage: Record<PeriodDeleteScope, string> = {
-    day: t('calendar.periodDeleteConfirmDay'),
+    day:
+      removeDayLabel && removeDayParentName
+        ? t('calendar.periodDeleteConfirmDayNamed', {
+            date: removeDayLabel,
+            parent: removeDayParentName,
+          })
+        : t('calendar.periodDeleteConfirmDay'),
     year: t('calendar.periodDeleteConfirmYear'),
     allYears: t('calendar.periodDeleteConfirmAllYears'),
   }
@@ -483,8 +501,8 @@ export function PeriodPopover({
                   type="button"
                   className="btn btn--danger"
                   onClick={() => handleDeleteClick('day')}
-                  disabled={isSaving || wish !== null}
-                  title={wish !== null ? t('calendar.periodDeleteDayDisabledHint') : undefined}
+                  disabled={isSaving}
+                  title={t('calendar.periodDeleteDayHint')}
                   data-testid="period-delete-day-button"
                 >
                   {t('calendar.periodDeleteDayButton')}

frontend/src/components/common/CalendarDay.test.tsx

@@ -270,4 +270,36 @@ describe('CalendarDay', () => {
       expect(day.getAttribute('aria-label')).toContain('arbetsdag')
     })
   })
+
+  describe('user-removed days (PlannedDayExclusion)', () => {
+    it('marks a removed day with its own class, badge and aria descriptor', () => {
+      const { getByTestId } = render(<CalendarDay date="2026-06-15" isExcluded={true} />)
+      const day = getByTestId('calendar-day')
+      expect(day).toHaveClass('calendar-day--excluded')
+      expect(getByTestId('calendar-day-excluded-badge')).toBeInTheDocument()
+      expect(day.getAttribute('aria-label')).toContain('borttagen dag')
+    })
+
+    it('leaves an ordinary day unmarked', () => {
+      const { getByTestId, queryByTestId } = render(<CalendarDay date="2026-06-15" />)
+      expect(getByTestId('calendar-day')).not.toHaveClass('calendar-day--excluded')
+      expect(queryByTestId('calendar-day-excluded-badge')).not.toBeInTheDocument()
+    })
+
+    it('can carry both an override and a removal on the same date', () => {
+      const { getByTestId } = render(
+        <CalendarDay
+          date="2026-06-15"
+          isOverride={true}
+          overrideIsWorkingDay={false}
+          isExcluded={true}
+        />,
+      )
+      const day = getByTestId('calendar-day')
+      expect(day).toHaveClass('calendar-day--override')
+      expect(day).toHaveClass('calendar-day--excluded')
+      expect(getByTestId('calendar-day-override-badge')).toBeInTheDocument()
+      expect(getByTestId('calendar-day-excluded-badge')).toBeInTheDocument()
+    })
+  })
 })

frontend/src/components/common/CalendarDay.tsx

@@ -21,6 +21,11 @@ export interface CalendarDayProps {
   isOverride?: boolean | undefined
   /** The override's value when `isOverride` is true (true = marked as a working day). */
   overrideIsWorkingDay?: boolean | null | undefined
+  /** True iff the user removed this date from the plan by hand (see
+   * `PlannedDayExclusion`). Without a mark, a day the planner deliberately
+   * skipped inside an otherwise-funded period just looks like a hole in the
+   * week. */
+  isExcluded?: boolean | undefined
 }
 
 export function CalendarDay({
@@ -37,6 +42,7 @@ export function CalendarDay({
   holidayName,
   isOverride = false,
   overrideIsWorkingDay = null,
+  isExcluded = false,
 }: CalendarDayProps): ReactNode {
   const { t } = useTranslation()
   const dateObj = new Date(date + 'T00:00:00Z')
@@ -82,6 +88,9 @@ export function CalendarDay({
       overrideIsWorkingDay ? t('calendarDay.overrideWorkingAria') : t('calendarDay.overrideFreeAria'),
     )
   }
+  if (isExcluded) {
+    descriptors.push(t('calendarDay.excludedAria'))
+  }
 
   const baseLabel = events.length > 0 ? t('calendarDay.ariaWithEvents', { date, count: events.length }) : date
   const ariaLabel = descriptors.length > 0 ? `${baseLabel}, ${descriptors.join(', ')}` : baseLabel
@@ -97,6 +106,7 @@ export function CalendarDay({
     dayType === 'klamdag' ? 'calendar-day--klamdag' : '',
     isPlainSaturday ? 'calendar-day--weekend' : '',
     isOverride ? 'calendar-day--override' : '',
+    isExcluded ? 'calendar-day--excluded' : '',
   ]
     .filter(Boolean)
     .join(' ')
@@ -143,6 +153,15 @@ export function CalendarDay({
           {overrideIsWorkingDay ? '⚒' : '✓'}
         </span>
       )}
+      {isExcluded && (
+        <span
+          className="calendar-day__excluded-badge"
+          data-testid="calendar-day-excluded-badge"
+          aria-hidden="true"
+        >
+          ⊘
+        </span>
+      )}
       {events.length > 0 && (
         <div className="calendar-day__events" data-testid="calendar-day-events">
           {events.map((event, idx) => (

frontend/src/components/common/CalendarWeek.test.tsx

@@ -34,6 +34,7 @@ vi.mock('./CalendarDay', () => ({
     holidayName,
     isOverride,
     overrideIsWorkingDay,
+    isExcluded,
   }: CalendarDayProps) => (
     <div
       data-testid={`calendar-day-${date}`}
@@ -42,6 +43,7 @@ vi.mock('./CalendarDay', () => ({
       data-holiday-name={holidayName ?? ''}
       data-is-override={isOverride ? 'true' : 'false'}
       data-override-is-working-day={overrideIsWorkingDay === null || overrideIsWorkingDay === undefined ? '' : String(overrideIsWorkingDay)}
+      data-is-excluded={isExcluded ? 'true' : 'false'}
       onClick={onClick}
       onPointerDown={() => onPointerDown?.(date)}
       onPointerEnter={() => onPointerEnter?.(date)}
@@ -481,9 +483,41 @@ describe('CalendarWeek', () => {
         parentPersonalDataUuid: 'parent-1',
         startDate: '2026-01-05',
         endDate: '2026-01-05',
+        // Clicking the band itself (not one of its day slots) reports the
+        // band's first date, which is what "this day" then removes.
+        clickedDate: '2026-01-05',
       })
     })
 
+    it('reports the clicked day slot as clickedDate, not the band start', () => {
+      const onBandClick: (info: BandClickInfo) => void = vi.fn()
+      const plannedDays = [
+        pd({ id: '1', date: '2026-01-05', wishId: 'wish-1', parentPersonalDataUuid: 'parent-1' }),
+        pd({ id: '2', date: '2026-01-06', wishId: 'wish-1', parentPersonalDataUuid: 'parent-1' }),
+        pd({ id: '3', date: '2026-01-07', wishId: 'wish-1', parentPersonalDataUuid: 'parent-1' }),
+      ]
+      const { container } = render(
+        <CalendarWeek {...defaultProps} plannedDays={plannedDays} onBandClick={onBandClick} />,
+      )
+      const daySlots = container.querySelectorAll('.calendar-band__day')
+      fireEvent.click(daySlots[1]!)
+      expect(onBandClick).toHaveBeenCalledWith(
+        expect.objectContaining({ clickedDate: '2026-01-06', startDate: '2026-01-05' }),
+      )
+    })
+
+    it('marks a user-removed date in the grid so the hole is explained', () => {
+      render(<CalendarWeek {...defaultProps} excludedDates={new Set(['2026-01-06'])} />)
+      expect(screen.getByTestId('calendar-day-2026-01-06')).toHaveAttribute(
+        'data-is-excluded',
+        'true',
+      )
+      expect(screen.getByTestId('calendar-day-2026-01-05')).toHaveAttribute(
+        'data-is-excluded',
+        'false',
+      )
+    })
+
     it('calls onBandClick with a null wishId for an ad-hoc (non-wish) band', () => {
       const onBandClick: (info: BandClickInfo) => void = vi.fn()
       const plannedDays = [pd({ id: '1', date: '2026-01-05', wishId: null })]
@@ -708,6 +742,7 @@ describe('CalendarWeek', () => {
         parentPersonalDataUuid: 'parent-1',
         startDate: '2026-01-05',
         endDate: '2026-01-05',
+        clickedDate: '2026-01-05',
       })
       // Clicking the band must not also trigger the day cell's own click.
       expect(onDayClick).not.toHaveBeenCalled()

frontend/src/components/common/CalendarWeek.tsx

@@ -14,6 +14,11 @@ export interface BandClickInfo {
   parentPersonalDataUuid: string
   startDate: string
   endDate: string
+  /** The single date the user actually clicked inside the band, which is what
+   * the popover's "this day" removes. Clicking the band anywhere else (or
+   * activating it from the keyboard) reports the band's own start date, so
+   * this is never empty. */
+  clickedDate: string
 }
 
 export interface CalendarWeekProps {
@@ -42,6 +47,11 @@ 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
+  /** Dates the user has removed from the plan by hand (see
+   * `PlannedDayExclusion`). A date the planner deliberately skipped inside an
+   * otherwise-funded period is invisible otherwise, and the hole in the week
+   * looks like a bug. */
+  excludedDates?: Set<string> | undefined
   /** 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
@@ -283,6 +293,7 @@ export function CalendarWeek({
   onPointerDown,
   onPointerEnter,
   calendarDaysByDate,
+  excludedDates,
   onBandClick,
   flashWishId,
   monthMaxLaneCount,
@@ -352,6 +363,7 @@ export function CalendarWeek({
               holidayName={calendarInfo?.name ?? null}
               isOverride={calendarInfo?.isOverride ?? false}
               overrideIsWorkingDay={calendarInfo?.overrideIsWorkingDay ?? null}
+              isExcluded={excludedDates?.has(date) ?? false}
               // Every cell is clickable/drag-selectable regardless of which
               // month it visually belongs to — `dayIsCurrentMonth` only
               // controls the dimmed `calendar-day--disabled` styling above.
@@ -394,12 +406,15 @@ export function CalendarWeek({
           .filter(Boolean)
           .join(' ')
 
-        const fireClick = () =>
+        const fireClick = (clickedDate?: string) =>
           onBandClick?.({
             wishId: segment.wishId,
             parentPersonalDataUuid: segment.parentUuid,
             startDate: segment.overallStart,
             endDate: segment.overallEnd,
+            // Falls back to the band's first date when the click didn't land
+            // on a specific day slot (the band's padding, or the keyboard).
+            clickedDate: clickedDate ?? segment.overallStart,
           })
 
         return (
@@ -417,7 +432,7 @@ export function CalendarWeek({
             aria-label={`${label} · ${typeLabel}, ${segment.overallStart} – ${segment.overallEnd}`}
             role={onBandClick ? 'button' : undefined}
             tabIndex={onBandClick ? 0 : undefined}
-            onClick={onBandClick ? fireClick : undefined}
+            onClick={onBandClick ? () => fireClick() : undefined}
             onKeyDown={
               onBandClick
                 ? (e) => {
@@ -443,6 +458,18 @@ export function CalendarWeek({
                   style={info.isGap ? undefined : { backgroundColor: getColorForType(info.dayType ?? 'vacation') }}
                   title={info.isPinned ? t('calendarDay.pinnedAria') : undefined}
                   data-testid={info.isPinned ? 'calendar-band-day-pinned' : undefined}
+                  // Clicking one day slot opens the same popover as clicking
+                  // the band, but tells it WHICH date was clicked — "this
+                  // day" must be able to remove a day in the middle of a
+                  // period, not only its first.
+                  onClick={
+                    onBandClick
+                      ? (e) => {
+                          e.stopPropagation()
+                          fireClick(info.date)
+                        }
+                      : undefined
+                  }
                 />
               ))}
             </div>

frontend/src/components/modals/PlannedDayModal.test.tsx

@@ -622,4 +622,58 @@ describe('PlannedDayModal', () => {
       expect(screen.queryByTestId('pinned-notice')).not.toBeInTheDocument()
     })
   })
+
+  describe('removed days (PlannedDayExclusion) — the way back', () => {
+    it('names the parent whose day was removed and offers to restore it', async () => {
+      const onRestoreExcluded = vi.fn().mockResolvedValue(undefined)
+      render(
+        <PlannedDayModal
+          {...defaultProps}
+          isOpen={true}
+          excludedEntries={[{ id: 'ex-1', parentName: 'Alex' }]}
+          onRestoreExcluded={onRestoreExcluded}
+        />,
+      )
+
+      expect(screen.getByTestId('excluded-notice')).toHaveTextContent(
+        'Du har tagit bort den här dagen för Alex.',
+      )
+      await userEvent.click(screen.getByTestId('restore-excluded-ex-1'))
+      await waitFor(() => expect(onRestoreExcluded).toHaveBeenCalledWith('ex-1'))
+    })
+
+    it('lists one notice per parent who lost that date', () => {
+      render(
+        <PlannedDayModal
+          {...defaultProps}
+          isOpen={true}
+          excludedEntries={[
+            { id: 'ex-1', parentName: 'Alex' },
+            { id: 'ex-2', parentName: 'Robin' },
+          ]}
+          onRestoreExcluded={vi.fn()}
+        />,
+      )
+      expect(screen.getAllByTestId('excluded-notice')).toHaveLength(2)
+    })
+
+    it('shows nothing when the date has no removals', () => {
+      render(<PlannedDayModal {...defaultProps} isOpen={true} />)
+      expect(screen.queryByTestId('excluded-notice')).not.toBeInTheDocument()
+    })
+
+    it('hides the notice in range mode, where it would be ambiguous which date it means', () => {
+      render(
+        <PlannedDayModal
+          {...defaultProps}
+          isOpen={true}
+          isRangeMode={true}
+          dayCount={3}
+          excludedEntries={[{ id: 'ex-1', parentName: 'Alex' }]}
+          onRestoreExcluded={vi.fn()}
+        />,
+      )
+      expect(screen.queryByTestId('excluded-notice')).not.toBeInTheDocument()
+    })
+  })
 })

frontend/src/components/modals/PlannedDayModal.tsx

@@ -23,6 +23,12 @@ export interface PlannedDayModalSavePinnedPayload {
   isDubbeldag: boolean
 }
 
+/** One day the user removed by hand, ready to be offered back. */
+export interface PlannedDayExclusionEntry {
+  id: string
+  parentName: string
+}
+
 export interface PlannedDayModalProps {
   date: string
   isOpen: boolean
@@ -39,6 +45,11 @@ export interface PlannedDayModalProps {
   onSaveWish: (payload: PlannedDayModalSaveWishPayload) => Promise<void>
   onSavePinned: (payload: PlannedDayModalSavePinnedPayload) => Promise<void>
   onDelete?: (() => Promise<void>) | undefined
+  /** Removals recorded for THIS date (see `PlannedDayExclusion`), one per
+   * parent. Shown with a way back: a day the user can't restore is a trap,
+   * and the undo toast is gone as soon as it times out. */
+  excludedEntries?: PlannedDayExclusionEntry[] | undefined
+  onRestoreExcluded?: ((exclusionId: string) => Promise<void>) | undefined
   onClose: () => void
   isSaving?: boolean | undefined
   error?: string | null | undefined
@@ -57,6 +68,8 @@ export function PlannedDayModal({
   onSaveWish,
   onSavePinned,
   onDelete,
+  excludedEntries = [],
+  onRestoreExcluded,
   onClose,
   isSaving = false,
   error = null,
@@ -217,6 +230,28 @@ export function PlannedDayModal({
             </div>
           )}
 
+          {!isRangeMode &&
+            excludedEntries.map((entry) => (
+              <div
+                key={entry.id}
+                className="planned-day-modal__excluded-notice"
+                data-testid="excluded-notice"
+              >
+                <span>{t('plannedDayModal.excludedNotice', { parent: entry.parentName })}</span>
+                {onRestoreExcluded && (
+                  <button
+                    type="button"
+                    className="btn btn--secondary btn--sm"
+                    onClick={() => void onRestoreExcluded(entry.id)}
+                    disabled={isSaving}
+                    data-testid={`restore-excluded-${entry.id}`}
+                  >
+                    {t('plannedDayModal.restoreExcludedButton')}
+                  </button>
+                )}
+              </div>
+            ))}
+
           <div className="stack">
             {!forcedAdvanced && hasMultipleParents && (
               <div className="field">

frontend/src/components/modals/planned-day-modal.css

@@ -36,6 +36,24 @@
   margin: calc(var(--sp-2) * -1) 0 var(--sp-4) 0;
 }
 
+/* "You removed this day" + the way back. Wraps and sizes itself by content
+ * so both the Swedish and the English string fit without clipping the
+ * button. */
+.planned-day-modal__excluded-notice {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--sp-2);
+  font-size: var(--fs-xs);
+  color: var(--c-text-muted);
+  margin-bottom: var(--sp-4);
+}
+
+.planned-day-modal__excluded-notice > span {
+  flex: 1 1 12rem;
+  min-width: 0;
+}
+
 .planned-day-modal__override-switch {
   display: flex;
   gap: var(--sp-4);