From 4bb8b1d93b18c89ce00e6da564170712e7cc7e99 Mon Sep 17 00:00:00 2001
From: brobert <borja@brobert.net>
Date: Fri, 17 Oct 2025 15:53:25 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20a=C3=B1adir=20Hourglass.svelte=20y=20us?=
 =?UTF-8?q?arlo=20en=20TaskItem.svelte?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: aider (openrouter/openai/gpt-5) <aider@aider.chat>
---
 apps/web/src/lib/ui/data/TaskItem.svelte   |  9 ++++++--
 apps/web/src/lib/ui/icons/Hourglass.svelte | 27 ++++++++++++++++++++++
 2 files changed, 34 insertions(+), 2 deletions(-)
 create mode 100644 apps/web/src/lib/ui/icons/Hourglass.svelte

diff --git a/apps/web/src/lib/ui/data/TaskItem.svelte b/apps/web/src/lib/ui/data/TaskItem.svelte
index 847c980..3d80699 100644
--- a/apps/web/src/lib/ui/data/TaskItem.svelte
+++ b/apps/web/src/lib/ui/data/TaskItem.svelte
@@ -11,6 +11,7 @@
 	import Popover from "$lib/ui/feedback/Popover.svelte";
 	import { normalizeDigits, buildWaMeUrl } from "$lib/utils/phone";
 	import { colorForGroup } from "$lib/utils/groupColor";
+	import Hourglass from "$lib/ui/icons/Hourglass.svelte";
 
 	export let id: number;
 	export let description: string;
@@ -285,7 +286,8 @@
 				class:soon={imminent}
 				title={overdue ? "Vencida" : imminent ? "Próxima" : "Fecha"}
 			>
-				📅 {dateDmy}{#if overdue}
+				<Hourglass size={16} />
+				{dateDmy}{#if overdue}
 					⚠{/if}
 			</span>
 		{/if}
@@ -392,7 +394,7 @@
 					aria-label="Editar fecha"
 					title="Editar fecha"
 					on:click|preventDefault={toggleEdit}
-					disabled={busy}>🗓️ Fecha</button
+					disabled={busy}><Hourglass size={16} /> Fecha</button
 				>
 			{:else}
 				<input class="date" type="date" bind:value={dateValue} />
@@ -517,6 +519,9 @@
 		font-size: 12px;
 	}
 	.date-badge {
+		display: inline-flex;
+		align-items: center;
+		gap: 4px;
 		padding: 4px 6px;
 		border-radius: 6px;
 		border: 1px solid transparent;
diff --git a/apps/web/src/lib/ui/icons/Hourglass.svelte b/apps/web/src/lib/ui/icons/Hourglass.svelte
new file mode 100644
index 0000000..a48e38a
--- /dev/null
+++ b/apps/web/src/lib/ui/icons/Hourglass.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+  export let size: number = 16;
+  export let className: string = '';
+  export let ariaLabel?: string;
+  export let title?: string;
+</script>
+
+<svg
+  width={size}
+  height={size}
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  class={className}
+  role={ariaLabel ? 'img' : undefined}
+  aria-label={ariaLabel}
+  aria-hidden={ariaLabel ? undefined : 'true'}
+>
+  {#if title}<title>{title}</title>{/if}
+  <path d="M6 2h12" />
+  <path d="M6 22h12" />
+  <path d="M8 4l8 8" />
+  <path d="M8 20l8-8" />
+</svg>