From 9e26f0c05c7f788a9f82dc2656bc728fdde5ad1f Mon Sep 17 00:00:00 2001
From: borja <borja@brobert.net>
Date: Thu, 16 Oct 2025 11:44:16 +0200
Subject: [PATCH] feat: densificar TaskItem con emoji y contador; mantener 0
 responsables

Co-authored-by: aider (openrouter/openai/gpt-5) <aider@aider.chat>
---
 apps/web/src/lib/ui/data/TaskItem.svelte    | 40 +++++++++++----------
 apps/web/src/lib/ui/feedback/Popover.svelte |  2 +-
 2 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/apps/web/src/lib/ui/data/TaskItem.svelte b/apps/web/src/lib/ui/data/TaskItem.svelte
index 163e365..76c3c68 100644
--- a/apps/web/src/lib/ui/data/TaskItem.svelte
+++ b/apps/web/src/lib/ui/data/TaskItem.svelte
@@ -38,10 +38,10 @@
 	let showAssignees = false;
 	let assigneesButtonEl: HTMLButtonElement | null = null;
 	$: assigneesCount = Array.isArray(assignees) ? assignees.length : 0;
-	$: assigneesLabel =
+	$: assigneesAria =
 		assigneesCount === 0
-			? "Sin responsable"
-			: `Responsables: ${assigneesCount}${isAssigned ? " (tú)" : ""}`;
+			? "Sin responsables"
+			: `${assigneesCount} responsable${assigneesCount === 1 ? "" : "s"}${isAssigned ? "; tú incluido" : ""}`;
 
 	onDestroy(() => {
 		// Cerrar popover si se desmonta el item (por navegación o filtrado)
@@ -286,7 +286,7 @@
 			</span>
 		{/if}
 	</div>
-	<div class="assignees">
+	<div class="actions">
 		{#if assigneesCount === 0}
 			<button
 				class="assignees-badge empty"
@@ -294,7 +294,7 @@
 				aria-haspopup="dialog"
 				aria-expanded="false"
 				aria-controls={"assignees-popover-" + id}
-				title="Sin responsable"
+				title="Sin responsables"
 				disabled
 				bind:this={assigneesButtonEl}
 			>
@@ -307,15 +307,15 @@
 				aria-haspopup="dialog"
 				aria-expanded={showAssignees}
 				aria-controls={"assignees-popover-" + id}
-				title="Ver responsables"
+				title={assigneesAria}
+				aria-label={assigneesAria}
 				on:click|preventDefault={() => (showAssignees = true)}
 				bind:this={assigneesButtonEl}
 			>
-				👥 {assigneesLabel}
+				<span class="icon" aria-hidden="true">👥</span>
+				<span class="count">{assigneesCount}</span>
 			</button>
 		{/if}
-	</div>
-	<div class="actions">
 		{#if !completed}
 			{#if !isAssigned}
 				<button
@@ -496,12 +496,6 @@
 	.date-badge.soon {
 		border-color: var(--color-warning);
 	}
-	.assignees {
-		grid-row: 3/4;
-		grid-column: 1/2;
-		text-align: left;
-		align-self: end;
-	}
 	.assignee {
 		display: inline-flex;
 		align-items: center;
@@ -514,15 +508,15 @@
 	}
 
 	.actions {
-		justify-self: center;
-		grid-column: 2/3;
+		justify-self: stretch;
+		grid-column: 1/3;
 		grid-row: 3/4;
-		margin-bottom: 4px;
+		margin: 2px 0 4px 0;
 		display: flex;
 		flex-wrap: wrap;
 		gap: 6px;
 		align-items: center;
-		justify-content: flex-end;
+		justify-content: flex-start;
 	}
 	.btn {
 		padding: 4px 8px;
@@ -606,6 +600,14 @@
 		font-size: 12px;
 		cursor: pointer;
 	}
+	.assignees-badge .icon {
+		font-size: 16px;
+		line-height: 1;
+	}
+	.assignees-badge .count {
+		font-size: 12px;
+		line-height: 1;
+	}
 	.assignees-badge[aria-expanded="true"] {
 		border-color: var(--color-primary);
 	}
diff --git a/apps/web/src/lib/ui/feedback/Popover.svelte b/apps/web/src/lib/ui/feedback/Popover.svelte
index 6891be4..ef112ae 100644
--- a/apps/web/src/lib/ui/feedback/Popover.svelte
+++ b/apps/web/src/lib/ui/feedback/Popover.svelte
@@ -106,7 +106,7 @@
     color: var(--color-text);
     border: 1px solid var(--color-border);
     border-radius: 10px;
-    box-shadow: var(--shadow-lg);
+    box-shadow: var(--shadow-md);
     padding: 12px;
     outline: none;
   }