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 () => {
-      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)
+    it('shows an inline confirmation instead of deleting immediately', () => {
       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())
     })