From 033113829fa1d86f29dfd377091dd71a4e42198d Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Tue, 21 Oct 2025 22:38:07 +0200
Subject: [PATCH] Adds confirmation dialog for marking events complete

Improves user experience by adding a confirmation dialog
before marking a scheduled event as complete. This helps
prevent accidental completion of events.
---
 .../components/ScheduledEventCard.vue         | 43 ++++++++++++++++++-
 1 file changed, 41 insertions(+), 2 deletions(-)

diff --git a/src/modules/nostr-feed/components/ScheduledEventCard.vue b/src/modules/nostr-feed/components/ScheduledEventCard.vue
index 7ea3d65..49ae6c4 100644
--- a/src/modules/nostr-feed/components/ScheduledEventCard.vue
+++ b/src/modules/nostr-feed/components/ScheduledEventCard.vue
@@ -1,7 +1,15 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
 import { Calendar, MapPin, Clock, CheckCircle } from 'lucide-vue-next'
 import type { ScheduledEvent, EventCompletion } from '../services/ScheduledEventService'
 
@@ -22,6 +30,9 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<Emits>()
 
+// Confirmation dialog state
+const showConfirmDialog = ref(false)
+
 // Event address for tracking completion
 const eventAddress = computed(() => `31922:${props.event.pubkey}:${props.event.dTag}`)
 
@@ -82,10 +93,22 @@ const formattedTimeRange = computed(() => {
   }
 })
 
-// Handle mark complete button click
+// Handle mark complete button click - show confirmation dialog
 function handleMarkComplete() {
   console.log('🔘 Mark Complete button clicked for event:', props.event.title)
+  showConfirmDialog.value = true
+}
+
+// Confirm and execute mark complete
+function confirmMarkComplete() {
+  console.log('✅ Confirmed mark complete for event:', props.event.title)
   emit('toggle-complete', props.event)
+  showConfirmDialog.value = false
+}
+
+// Cancel mark complete
+function cancelMarkComplete() {
+  showConfirmDialog.value = false
 }
 </script>
 
@@ -152,5 +175,21 @@ function handleMarkComplete() {
         </Button>
       </div>
     </div>
+
+    <!-- Confirmation Dialog -->
+    <Dialog :open="showConfirmDialog" @update:open="(val: boolean) => showConfirmDialog = val">
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Mark Event as Complete?</DialogTitle>
+          <DialogDescription>
+            This will mark "{{ event.title }}" as completed by you. Other users will be able to see that you completed this event.
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button variant="outline" @click="cancelMarkComplete">Cancel</Button>
+          <Button @click="confirmMarkComplete">Mark Complete</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   </div>
 </template>