fix: keep approved devices in inventory after bulk approve

Bulk/single approve optimistically stripped approved rows from the local list,
but scanApi.pending() still returns them (on-canvas, with an 'In N canvas'
badge). The list went empty until the modal was reopened. Reload after approve
instead of stripping, so approved rows stay visible with a fresh canvas_count.

ha-relevant: yes

frontend/src/components/modals/PendingDevicesModal.tsx

@@ -287,8 +287,10 @@ export function PendingDevicesModal({ open, onClose, highlightId, initialStatus
       injectAutoEdges(res.data.edges)
       const extra = res.data.edges_created > 0 ? ` (+${res.data.edges_created} link${res.data.edges_created !== 1 ? 's' : ''})` : ''
       toast.success(`Approved ${nodeData.label}${extra}`)
-      setDevices((prev) => prev.filter((d) => d.id !== device.id))
+      // Keep the row (now on-canvas, shown with an "In N canvas" badge); reload
+      // for a fresh canvas_count rather than dropping it until reopen.
       setSelected(null)
+      await load()
     } catch {
       toast.error('Failed to approve device')
     }
@@ -353,8 +355,11 @@ export function PendingDevicesModal({ open, onClose, highlightId, initialStatus
         })
       })
       injectAutoEdges(res.data.edges)
-      setDevices((prev) => prev.filter((d) => !ids.includes(d.id)))
+      // Don't strip approved rows locally: the inventory keeps them with an
+      // "In N canvas" badge (that's what showOnCanvas toggles). Reload so they
+      // reappear with a fresh canvas_count instead of vanishing until reopen.
       setSelectedIds(new Set())
+      await load()
       const linkExtra = res.data.edges_created > 0 ? ` (+${res.data.edges_created} link${res.data.edges_created !== 1 ? 's' : ''})` : ''
       toast.success(`Approved ${res.data.approved} device${res.data.approved !== 1 ? 's' : ''}${linkExtra}`)
     } catch {