Fix Ctrl+click batch blocking: ensure calendar updates and shows red

- Clear pendingDates after successful blocking
- Add key props to DayPicker to force re-render on state change
- Improve error handling with revert on failure
- Call fetchAll() after batch operations to get real IDs

logs/out-0.log

@@ -14,3 +14,4 @@
 2025-10-31T19:17:21: > Ready on http://localhost:3000
 2025-10-31T20:05:46: > Ready on http://localhost:3000
 2025-10-31T20:42:18: > Ready on http://localhost:3000
+2025-10-31T20:54:03: > Ready on http://localhost:3000

src/app/admin/availability/page.tsx

@@ -299,15 +299,20 @@ function AvailabilityAdminContent() {
                     onClick={async () => {
                       setSaving(true)
                       const isos = pendingDates.map(pd => isoFromDate(pd))
+                      // Optimistically add to blocked list
                       setBlocked(prev => [...prev, ...isos.map(i => ({ id: `tmp-${i}`, block_date: i }))])
                       try {
                         await Promise.all(pendingDates.map(pd => fetch('/api/availability/blocked', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({ block_date: isoFromDate(pd), note: '' }) })))
                         addToast(`${pendingDates.length} dage blokeret`, 'success')
                         setPendingDates([])
+                        // Fetch to get real IDs and confirm
+                        await fetchAll()
                       } catch (err) {
                         addToast('Kunne ikke oprette alle blokeringer', 'error')
+                        // Revert on error
+                        setBlocked(prev => prev.filter(b => !isos.includes(b.block_date)))
+                        await fetchAll()
                       } finally {
-                        fetchAll()
                         setSaving(false)
                       }
                     }}
@@ -321,6 +326,7 @@ function AvailabilityAdminContent() {
 
               <div className="flex justify-center">{multiSelectMode ? (
                   <DayPicker
+                    key={`multi-${blocked.length}`}
                     className="admin-calendar"
                     mode="multiple"
                     selected={selectedDates}
@@ -338,6 +344,7 @@ function AvailabilityAdminContent() {
                   />
                 ) : (
                   <DayPicker
+                    key={`single-${blocked.length}-${pendingDates.length}`}
                     className="admin-calendar"
                     mode="single"
                     onDayClick={async (d: Date, modifiers: any, e: any) => {