Add communication confirmation checkbox for unclaiming tasks

Require users to confirm they've communicated with the team before unclaiming a task to prevent coordination issues.

Changes:
- Add hasConfirmedCommunication checkbox state
- Show checkbox in unclaim confirmation dialog
- Disable "Unclaim Task" button until checkbox is checked
- Reset checkbox state when dialog is closed/cancelled
- Update dialog description to prompt communication

UX Flow:
1. User clicks "Unclaim" button
2. Dialog appears with message about removing claim
3. Checkbox: "I have communicated this to the team"
4. "Unclaim Task" button disabled until checkbox checked
5. Forces user acknowledgment before unclaiming

This prevents situations where:
- Someone unclaims without notifying others working on related tasks
- Team members are left confused about task status
- Work gets duplicated or blocked due to lack of communication

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
padreug 2025-11-16 21:14:34 +01:00
parent 4e85488921
commit 8f05f4ec7c

View file

@ -2,6 +2,7 @@
import { computed, ref } from 'vue'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Checkbox } from '@/components/ui/checkbox'
import {
Dialog,
DialogContent,
@ -46,6 +47,7 @@ const authService = injectService<AuthService>(SERVICE_TOKENS.AUTH_SERVICE)
// Confirmation dialog state
const showConfirmDialog = ref(false)
const hasConfirmedCommunication = ref(false)
// Event address for tracking completion
const eventAddress = computed(() => `31922:${props.event.pubkey}:${props.event.dTag}`)
@ -178,6 +180,11 @@ function handleUnclaimTask() {
function confirmAction() {
if (!pendingAction.value) return
// For unclaim action, require checkbox confirmation
if (pendingAction.value === 'unclaim' && !hasConfirmedCommunication.value) {
return
}
switch (pendingAction.value) {
case 'claim':
emit('claim-task', props.event, occurrence.value)
@ -195,12 +202,14 @@ function confirmAction() {
showConfirmDialog.value = false
pendingAction.value = null
hasConfirmedCommunication.value = false
}
// Cancel action
function cancelAction() {
showConfirmDialog.value = false
pendingAction.value = null
hasConfirmedCommunication.value = false
}
// Get dialog content based on pending action
@ -227,7 +236,7 @@ const dialogContent = computed(() => {
case 'unclaim':
return {
title: 'Unclaim Task?',
description: `This will remove your claim on "${props.event.title}" and make it available for others.`,
description: `This will remove your claim on "${props.event.title}" and make it available for others.\n\nHave you communicated to others that you are unclaiming this task?`,
confirmText: 'Unclaim Task'
}
default:
@ -466,9 +475,30 @@ const dialogContent = computed(() => {
{{ dialogContent.description }}
</DialogDescription>
</DialogHeader>
<!-- Communication confirmation checkbox (only for unclaim) -->
<div v-if="pendingAction === 'unclaim'" class="flex items-start space-x-3 py-4">
<Checkbox
:model-value="hasConfirmedCommunication"
@update:model-value="(val) => hasConfirmedCommunication = !!val"
id="confirm-communication"
/>
<label
for="confirm-communication"
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer"
>
I have communicated this to the team.
</label>
</div>
<DialogFooter>
<Button variant="outline" @click="cancelAction">Cancel</Button>
<Button @click="confirmAction">{{ dialogContent.confirmText }}</Button>
<Button
@click="confirmAction"
:disabled="pendingAction === 'unclaim' && !hasConfirmedCommunication"
>
{{ dialogContent.confirmText }}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>