From 5b173e59c1ea52881660fe3640a9c0e6daa8b309 Mon Sep 17 00:00:00 2001
From: "bert.hausmans" <bert@hausmans.nl>
Date: Sun, 12 Apr 2026 14:00:02 +0200
Subject: [PATCH] fix: ververs crowd list tellers in detailzijbalk na
 verwijderen persoon

Made-with: Cursor
---
 apps/app/src/composables/api/useCrowdLists.ts        |  5 ++++-
 apps/app/src/pages/events/[id]/crowd-lists/index.vue | 10 +++++++++-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/apps/app/src/composables/api/useCrowdLists.ts b/apps/app/src/composables/api/useCrowdLists.ts
index 56628f78..bbb46e2f 100644
--- a/apps/app/src/composables/api/useCrowdLists.ts
+++ b/apps/app/src/composables/api/useCrowdLists.ts
@@ -125,8 +125,11 @@ export function useRemovePersonFromCrowdList(eventId: Ref<string>) {
         `/events/${eventId.value}/crowd-lists/${listId}/persons/${personId}`,
       )
     },
-    onSuccess: () => {
+    onSuccess: (_data, variables) => {
       queryClient.invalidateQueries({ queryKey: ['crowd-lists', eventId.value] })
+      queryClient.invalidateQueries({
+        queryKey: ['crowd-lists', eventId.value, 'persons', variables.listId],
+      })
     },
   })
 }
diff --git a/apps/app/src/pages/events/[id]/crowd-lists/index.vue b/apps/app/src/pages/events/[id]/crowd-lists/index.vue
index 374c336b..d0bb218b 100644
--- a/apps/app/src/pages/events/[id]/crowd-lists/index.vue
+++ b/apps/app/src/pages/events/[id]/crowd-lists/index.vue
@@ -56,6 +56,14 @@ const editingCrowdList = ref<CrowdList | null>(null)
 const isDetailPanelOpen = ref(false)
 const selectedCrowdList = ref<CrowdList | null>(null)
 
+/** Sync met TanStack-query na mutaties (verwijderen personen, enz.); anders blijft de zijbalk op oude tellers. */
+const detailPanelCrowdList = computed((): CrowdList | null => {
+  const selected = selectedCrowdList.value
+  if (!selected) return null
+  const fresh = crowdLists.value?.find(cl => cl.id === selected.id)
+  return fresh ?? selected
+})
+
 // Delete confirmation
 const isDeleteDialogOpen = ref(false)
 const deletingCrowdList = ref<CrowdList | null>(null)
@@ -262,7 +270,7 @@ function formatPersonsCount(item: CrowdList): string {
       v-model="isDetailPanelOpen"
       :event-id="eventId"
       :org-id="orgId"
-      :crowd-list="selectedCrowdList"
+      :crowd-list="detailPanelCrowdList"
       @edit="onEditFromPanel"
     />