Ask before deleting without leaving the app

Deleting a period or a day went through the browser's own confirmation box.
It halts the page while it is open, which meant the delete path could not be
driven by anything automated, and it looks nothing like the rest of the app.
Both now ask inline: the first click offers the choice, and only the second
one deletes. That matters more than it did, since deleting a period now takes
its days with it.

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

@@ -46,19 +46,28 @@ describe('PeriodPopover', () => {
       expect(screen.getByTestId('period-delete-button')).toHaveTextContent('Ta bort dessa dagar')
     })
 
-    it('calls onDelete after confirmation', async () => {
+    it('shows an inline confirmation instead of deleting immediately', () => {
-      vi.spyOn(window, 'confirm').mockReturnValue(true)
-      mockOnDelete.mockResolvedValue(undefined)
-      render(<PeriodPopover {...defaultProps} />)
-      fireEvent.click(screen.getByTestId('period-delete-button'))
-      await waitFor(() => expect(mockOnDelete).toHaveBeenCalled())
-    })
-
-    it('does not call onDelete when confirmation is cancelled', () => {
-      vi.spyOn(window, 'confirm').mockReturnValue(false)
       render(<PeriodPopover {...defaultProps} />)
       fireEvent.click(screen.getByTestId('period-delete-button'))
       expect(mockOnDelete).not.toHaveBeenCalled()
+      expect(screen.getByTestId('period-delete-confirm')).toBeInTheDocument()
+    })
+
+    it('calls onDelete after confirming inline', async () => {
+      mockOnDelete.mockResolvedValue(undefined)
+      render(<PeriodPopover {...defaultProps} />)
+      fireEvent.click(screen.getByTestId('period-delete-button'))
+      fireEvent.click(screen.getByTestId('period-delete-confirm-button'))
+      await waitFor(() => expect(mockOnDelete).toHaveBeenCalled())
+    })
+
+    it('does not call onDelete when the inline confirmation is cancelled', () => {
+      render(<PeriodPopover {...defaultProps} />)
+      fireEvent.click(screen.getByTestId('period-delete-button'))
+      fireEvent.click(screen.getByTestId('period-delete-cancel-button'))
+      expect(mockOnDelete).not.toHaveBeenCalled()
+      expect(screen.queryByTestId('period-delete-confirm')).not.toBeInTheDocument()
+      expect(screen.getByTestId('period-delete-button')).toBeInTheDocument()
     })
   })
 
@@ -217,20 +226,20 @@ describe('PeriodPopover', () => {
     })
 
     it('displays a generic local error when onDelete rejects with a non-Error value', async () => {
-      vi.spyOn(window, 'confirm').mockReturnValue(true)
       mockOnDelete.mockRejectedValue('boom')
       render(<PeriodPopover {...defaultProps} wish={wish} />)
       fireEvent.click(screen.getByTestId('period-delete-button'))
+      fireEvent.click(screen.getByTestId('period-delete-confirm-button'))
       await waitFor(() => {
         expect(screen.getByRole('alert')).toHaveTextContent('Det gick inte att skapa perioden')
       })
     })
 
     it('calls onDelete for a wish-linked band after confirmation', async () => {
-      vi.spyOn(window, 'confirm').mockReturnValue(true)
       mockOnDelete.mockResolvedValue(undefined)
       render(<PeriodPopover {...defaultProps} wish={wish} />)
       fireEvent.click(screen.getByTestId('period-delete-button'))
+      fireEvent.click(screen.getByTestId('period-delete-confirm-button'))
       await waitFor(() => expect(mockOnDelete).toHaveBeenCalled())
     })
 

frontend/src/components/calendar/PeriodPopover.tsx

@@ -101,6 +101,7 @@ export function PeriodPopover({
     lastYear: null,
   })
   const [localError, setLocalError] = useState<string | null>(null)
+  const [isConfirmingDelete, setIsConfirmingDelete] = useState(false)
 
   useEffect(() => {
     if (wish) {
@@ -117,6 +118,7 @@ export function PeriodPopover({
       })
     }
     setLocalError(null)
+    setIsConfirmingDelete(false)
   }, [isOpen, wish, startDate, endDate, t])
 
   if (!isOpen) return null
@@ -141,14 +143,22 @@ export function PeriodPopover({
     }
   }
 
-  const handleDelete = async () => {
+  const handleDeleteClick = () => {
-    if (confirm(t('calendar.periodDeleteConfirm'))) {
+    setIsConfirmingDelete(true)
+  }
+
+  const handleCancelDelete = () => {
+    setIsConfirmingDelete(false)
+  }
+
+  const handleConfirmDelete = async () => {
     try {
       setLocalError(null)
       await onDelete()
     } catch (err) {
       setLocalError(err instanceof Error ? err.message : t('calendar.periodCreateError'))
-      }
+    } finally {
+      setIsConfirmingDelete(false)
     }
   }
 
@@ -339,9 +349,33 @@ export function PeriodPopover({
         </div>
 
         <div className="period-popover__footer">
+          {isConfirmingDelete ? (
+            <div className="period-popover__delete-confirm" data-testid="period-delete-confirm">
+              <span className="period-popover__delete-confirm-text">
+                {t('calendar.periodDeleteConfirm')}
+              </span>
+              <button
+                className="period-popover__button period-popover__button--secondary"
+                onClick={handleCancelDelete}
+                disabled={isSaving}
+                data-testid="period-delete-cancel-button"
+              >
+                {t('calendar.periodCancelButton')}
+              </button>
               <button
                 className="period-popover__button period-popover__button--danger"
-            onClick={() => void handleDelete()}
+                onClick={() => void handleConfirmDelete()}
+                disabled={isSaving}
+                data-testid="period-delete-confirm-button"
+              >
+                {isSaving ? t('calendar.periodDeletingButton') : t('calendar.periodDeleteConfirmButton')}
+              </button>
+            </div>
+          ) : (
+            <>
+              <button
+                className="period-popover__button period-popover__button--danger"
+                onClick={handleDeleteClick}
                 disabled={isSaving}
                 data-testid="period-delete-button"
               >
@@ -369,6 +403,8 @@ export function PeriodPopover({
                   {isSaving ? t('calendar.periodSavingButton') : t('calendar.periodSaveButton')}
                 </button>
               )}
+            </>
+          )}
         </div>
       </div>
     </div>

frontend/src/components/calendar/period-popover.css

@@ -175,3 +175,16 @@
 .period-popover__button--danger:hover:not(:disabled) {
   background-color: #b71c1c;
 }
+
+.period-popover__delete-confirm {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+}
+
+.period-popover__delete-confirm-text {
+  font-size: 14px;
+  color: #333;
+  margin-right: auto;
+}

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

@@ -429,9 +429,6 @@ describe('PlannedDayModal', () => {
       })
       mockOnDelete.mockRejectedValue(new Error('Delete failed'))
 
-      // Mock the confirm dialog
-      vi.spyOn(window, 'confirm').mockReturnValue(true)
-
       render(
         <PlannedDayModal
           {...defaultProps}
@@ -443,6 +440,7 @@ describe('PlannedDayModal', () => {
 
       const deleteButton = screen.getByTestId('delete-button')
       await userEvent.click(deleteButton)
+      await userEvent.click(screen.getByTestId('delete-confirm-button'))
 
       await waitFor(() => {
         expect(screen.getByRole('alert')).toHaveTextContent('Delete failed')
@@ -455,7 +453,6 @@ describe('PlannedDayModal', () => {
         parentPersonalDataUuid: 'p1',
       })
       mockOnDelete.mockRejectedValue('Some error')
-      vi.spyOn(window, 'confirm').mockReturnValue(true)
 
       render(
         <PlannedDayModal
@@ -468,6 +465,7 @@ describe('PlannedDayModal', () => {
 
       const deleteButton = screen.getByTestId('delete-button')
       await userEvent.click(deleteButton)
+      await userEvent.click(screen.getByTestId('delete-confirm-button'))
 
       await waitFor(() => {
         expect(screen.getByRole('alert')).toHaveTextContent('Det gick inte att ta bort den planerade dagen')
@@ -711,38 +709,12 @@ describe('PlannedDayModal', () => {
       expect(screen.getByTestId('delete-button')).toBeInTheDocument()
     })
 
-    it('shows confirmation dialog before deleting', async () => {
+    it('shows an inline confirmation instead of deleting immediately', async () => {
       const existingDay = makePlannedLeaveDay({
         id: 'day-1',
         parentPersonalDataUuid: 'p1',
       })
 
-      const confirmSpy = vi.spyOn(window, 'confirm').mockReturnValue(true)
-      mockOnDelete.mockResolvedValue(undefined)
-
-      render(
-        <PlannedDayModal
-          {...defaultProps}
-          isOpen={true}
-          existingDay={existingDay}
-          onDelete={mockOnDelete}
-        />
-      )
-
-      const deleteButton = screen.getByTestId('delete-button')
-      await userEvent.click(deleteButton)
-
-      expect(confirmSpy).toHaveBeenCalledWith('Är du säker på att du vill ta bort den här planerade dagen?')
-      confirmSpy.mockRestore()
-    })
-
-    it('does not call onDelete if confirmation is cancelled', async () => {
-      const existingDay = makePlannedLeaveDay({
-        id: 'day-1',
-        parentPersonalDataUuid: 'p1',
-      })
-
-      const confirmSpy = vi.spyOn(window, 'confirm').mockReturnValue(false)
       mockOnDelete.mockResolvedValue(undefined)
 
       render(
@@ -758,16 +730,17 @@ describe('PlannedDayModal', () => {
       await userEvent.click(deleteButton)
 
       expect(mockOnDelete).not.toHaveBeenCalled()
-      confirmSpy.mockRestore()
+      expect(screen.getByTestId('delete-confirm')).toHaveTextContent(
+        'Är du säker på att du vill ta bort den här planerade dagen?',
+      )
     })
 
-    it('calls onDelete if confirmation is accepted', async () => {
+    it('does not call onDelete if the inline confirmation is cancelled', async () => {
       const existingDay = makePlannedLeaveDay({
         id: 'day-1',
         parentPersonalDataUuid: 'p1',
       })
 
-      const confirmSpy = vi.spyOn(window, 'confirm').mockReturnValue(true)
       mockOnDelete.mockResolvedValue(undefined)
 
       render(
@@ -781,11 +754,37 @@ describe('PlannedDayModal', () => {
 
       const deleteButton = screen.getByTestId('delete-button')
       await userEvent.click(deleteButton)
+      await userEvent.click(screen.getByTestId('delete-cancel-button'))
+
+      expect(mockOnDelete).not.toHaveBeenCalled()
+      expect(screen.queryByTestId('delete-confirm')).not.toBeInTheDocument()
+      expect(screen.getByTestId('delete-button')).toBeInTheDocument()
+    })
+
+    it('calls onDelete if the inline confirmation is accepted', async () => {
+      const existingDay = makePlannedLeaveDay({
+        id: 'day-1',
+        parentPersonalDataUuid: 'p1',
+      })
+
+      mockOnDelete.mockResolvedValue(undefined)
+
+      render(
+        <PlannedDayModal
+          {...defaultProps}
+          isOpen={true}
+          existingDay={existingDay}
+          onDelete={mockOnDelete}
+        />
+      )
+
+      const deleteButton = screen.getByTestId('delete-button')
+      await userEvent.click(deleteButton)
+      await userEvent.click(screen.getByTestId('delete-confirm-button'))
 
       await waitFor(() => {
         expect(mockOnDelete).toHaveBeenCalled()
       })
-      confirmSpy.mockRestore()
     })
 
     it('disables delete button when saving', () => {

frontend/src/components/modals/PlannedDayModal.tsx

@@ -55,6 +55,7 @@ export function PlannedDayModal({
   const [isDubbeldag, setIsDubbeldag] = useState(false)
   const [localError, setLocalError] = useState<string | null>(null)
   const [isTogglingOverride, setIsTogglingOverride] = useState(false)
+  const [isConfirmingDelete, setIsConfirmingDelete] = useState(false)
 
   useEffect(() => {
     if (existingDay) {
@@ -67,6 +68,7 @@ export function PlannedDayModal({
       setIsDubbeldag(false)
     }
     setLocalError(null)
+    setIsConfirmingDelete(false)
   }, [isOpen, existingDay, selectedParentId, defaultDayType])
 
   useEffect(() => {
@@ -88,15 +90,24 @@ export function PlannedDayModal({
     }
   }
 
-  const handleDelete = async () => {
+  const handleDeleteClick = () => {
+    if (!onDelete) return
+    setIsConfirmingDelete(true)
+  }
+
+  const handleCancelDelete = () => {
+    setIsConfirmingDelete(false)
+  }
+
+  const handleConfirmDelete = async () => {
     if (!onDelete) return
-    if (confirm(t('plannedDayModal.confirmDelete'))) {
     try {
       setLocalError(null)
       await onDelete()
     } catch (err) {
       setLocalError(err instanceof Error ? err.message : t('plannedDayModal.deleteError'))
-      }
+    } finally {
+      setIsConfirmingDelete(false)
     }
   }
 
@@ -256,10 +267,35 @@ export function PlannedDayModal({
         </div>
 
         <div className="planned-day-modal__footer">
+          {!isRangeMode && existingDay && onDelete && isConfirmingDelete && (
+            <div className="planned-day-modal__delete-confirm" data-testid="delete-confirm">
+              <span className="planned-day-modal__delete-confirm-text">
+                {t('plannedDayModal.confirmDelete')}
+              </span>
+              <button
+                className="planned-day-modal__button planned-day-modal__button--secondary"
+                onClick={handleCancelDelete}
+                disabled={isSaving}
+                data-testid="delete-cancel-button"
+              >
+                {t('plannedDayModal.cancelButton')}
+              </button>
+              <button
+                className="planned-day-modal__button planned-day-modal__button--danger"
+                onClick={() => void handleConfirmDelete()}
+                disabled={isSaving}
+                data-testid="delete-confirm-button"
+              >
+                {isSaving ? t('plannedDayModal.deletingButton') : t('plannedDayModal.deleteConfirmButton')}
+              </button>
+            </div>
+          )}
+          {!isConfirmingDelete && (
+            <>
               {!isRangeMode && existingDay && onDelete && (
                 <button
                   className="planned-day-modal__button planned-day-modal__button--danger"
-              onClick={handleDelete}
+                  onClick={handleDeleteClick}
                   disabled={isSaving}
                   data-testid="delete-button"
                 >
@@ -282,6 +318,8 @@ export function PlannedDayModal({
               >
                 {isSaving ? t('plannedDayModal.savingButton') : t('plannedDayModal.saveButton')}
               </button>
+            </>
+          )}
         </div>
       </div>
     </div>

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

@@ -187,3 +187,16 @@
 .planned-day-modal__button--danger:hover:not(:disabled) {
   background-color: #b71c1c;
 }
+
+.planned-day-modal__delete-confirm {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+}
+
+.planned-day-modal__delete-confirm-text {
+  font-size: 14px;
+  color: #333;
+  margin-right: auto;
+}

frontend/src/i18n/en/calendar.ts

@@ -40,6 +40,7 @@ export const calendar = {
   'plannedDayModal.closeAria': 'Close',
   'plannedDayModal.confirmDelete': 'Are you sure you want to delete this planned day?',
   'plannedDayModal.deleteButton': 'Delete',
+  'plannedDayModal.deleteConfirmButton': 'Yes, delete',
   'plannedDayModal.deleteError': 'Failed to delete planned day',
   'plannedDayModal.deletingButton': 'Deleting…',
   'plannedDayModal.doubleDayHint': 'Double days do not apply to vacation',
@@ -108,6 +109,7 @@ export const calendar = {
   'calendar.periodDeleteButton': 'Delete period',
   'calendar.periodDeletingButton': 'Deleting…',
   'calendar.periodDeleteConfirm': 'Are you sure you want to delete this period?',
+  'calendar.periodDeleteConfirmButton': 'Yes, delete',
   'calendar.periodDeleteAdHocButton': 'Delete these days',
   'calendar.periodCancelButton': 'Cancel',
   'calendar.periodCloseAria': 'Close',

frontend/src/i18n/sv/calendar.ts

@@ -40,6 +40,7 @@ export const calendar = {
   'plannedDayModal.closeAria': 'Stäng',
   'plannedDayModal.confirmDelete': 'Är du säker på att du vill ta bort den här planerade dagen?',
   'plannedDayModal.deleteButton': 'Ta bort',
+  'plannedDayModal.deleteConfirmButton': 'Ja, ta bort',
   'plannedDayModal.deleteError': 'Det gick inte att ta bort den planerade dagen',
   'plannedDayModal.deletingButton': 'Tar bort…',
   'plannedDayModal.doubleDayHint': 'Dubbeldagar gäller inte för semester',
@@ -108,6 +109,7 @@ export const calendar = {
   'calendar.periodDeleteButton': 'Ta bort period',
   'calendar.periodDeletingButton': 'Tar bort…',
   'calendar.periodDeleteConfirm': 'Är du säker på att du vill ta bort den här perioden?',
+  'calendar.periodDeleteConfirmButton': 'Ja, ta bort',
   'calendar.periodDeleteAdHocButton': 'Ta bort dessa dagar',
   'calendar.periodCancelButton': 'Avbryt',
   'calendar.periodCloseAria': 'Stäng',