From 6da0089ddf5bb00c083e52eeb50d6ac76f94299a Mon Sep 17 00:00:00 2001
From: borja <borja@brobert.net>
Date: Thu, 16 Oct 2025 10:32:10 +0200
Subject: [PATCH] feat: deshabilitar badge de responsables cuando no hay y
 cerrar popover al desmontar

Co-authored-by: aider (openrouter/openai/gpt-5) <aider@aider.chat>
---
 apps/web/src/lib/ui/data/TaskItem.svelte | 56 ++++++++++++++++++------
 1 file changed, 42 insertions(+), 14 deletions(-)

diff --git a/apps/web/src/lib/ui/data/TaskItem.svelte b/apps/web/src/lib/ui/data/TaskItem.svelte
index d17302d..163e365 100644
--- a/apps/web/src/lib/ui/data/TaskItem.svelte
+++ b/apps/web/src/lib/ui/data/TaskItem.svelte
@@ -7,7 +7,7 @@
 		isTomorrow,
 	} from "$lib/utils/date";
 	import { success, error as toastError } from "$lib/stores/toasts";
-	import { tick } from "svelte";
+	import { tick, onDestroy } from "svelte";
 	import Popover from "$lib/ui/feedback/Popover.svelte";
 	import { normalizeDigits, buildWaMeUrl } from "$lib/utils/phone";
 
@@ -43,6 +43,11 @@
 			? "Sin responsable"
 			: `Responsables: ${assigneesCount}${isAssigned ? " (tú)" : ""}`;
 
+	onDestroy(() => {
+		// Cerrar popover si se desmonta el item (por navegación o filtrado)
+		showAssignees = false;
+	});
+
 	// Edición de texto (inline)
 	let editingText = false;
 	let descEl: HTMLElement | null = null;
@@ -282,18 +287,33 @@
 		{/if}
 	</div>
 	<div class="assignees">
-		<button
-			class="assignees-badge"
-			type="button"
-			aria-haspopup="dialog"
-			aria-expanded={showAssignees}
-			aria-controls={"assignees-popover-" + id}
-			title={assigneesCount === 0 ? "Sin responsable" : "Ver responsables"}
-			on:click|preventDefault={() => (showAssignees = true)}
-			bind:this={assigneesButtonEl}
-		>
-			👥 {assigneesLabel}
-		</button>
+		{#if assigneesCount === 0}
+			<button
+				class="assignees-badge empty"
+				type="button"
+				aria-haspopup="dialog"
+				aria-expanded="false"
+				aria-controls={"assignees-popover-" + id}
+				title="Sin responsable"
+				disabled
+				bind:this={assigneesButtonEl}
+			>
+				🙅
+			</button>
+		{:else}
+			<button
+				class="assignees-badge"
+				type="button"
+				aria-haspopup="dialog"
+				aria-expanded={showAssignees}
+				aria-controls={"assignees-popover-" + id}
+				title="Ver responsables"
+				on:click|preventDefault={() => (showAssignees = true)}
+				bind:this={assigneesButtonEl}
+			>
+				👥 {assigneesLabel}
+			</button>
+		{/if}
 	</div>
 	<div class="actions">
 		{#if !completed}
@@ -374,7 +394,7 @@
 			{/if}
 		{/if}
 	</div>
-	<Popover bind:open={showAssignees} ariaLabel="Responsables" id={"assignees-popover-" + id} on:closed={() => { tick().then(() => assigneesButtonEl?.focus()); }}>
+	<Popover bind:open={showAssignees} ariaLabel="Responsables" id={"assignees-popover-" + id}>
 		<h3 class="popover-title">Responsables</h3>
 		{#if assigneesCount === 0}
 			<p class="muted">No hay responsables asignados.</p>
@@ -589,6 +609,14 @@
 	.assignees-badge[aria-expanded="true"] {
 		border-color: var(--color-primary);
 	}
+	.assignees-badge:disabled {
+		cursor: not-allowed;
+		opacity: 0.6;
+	}
+	.assignees-badge.empty {
+		padding: 2px 6px;
+		gap: 0;
+	}
 
 	.assignees-list {
 		list-style: none;