From b6b7eced2806b187c964e233e6ebfbaa201fa2c2 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Fri, 30 Jan 2026 22:02:35 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Polish=20Task=20List?=
 =?UTF-8?q?=20UX=20and=20Spanish=20linguistics?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This PR improves the Task List experience by:
1. Enhancing the "Empty State" with a visual component (icon + descriptive text).
2. Correcting missing Spanish accents (tildes) across primary task components (Mañana, descripción, más, Título, Edición, sesión, Mías, Búsqueda).
3. Improving accessibility of "Ver más/menos" buttons with proper focus states.

All changes are kept under the 50-line limit for micro-UX improvements.
♿ Accessibility: Added focus-visible rings to interactive elements.
💡 What: Visual empty state and linguistic polish.
🎯 Why: Improves professionalism and provides better guidance for new users.

Co-authored-by: Rumazor <87402949+Rumazor@users.noreply.github.com>
---
 .Jules/palette.md                            |  3 +++
 frontend/components/tasks/task-dashboard.tsx |  6 ++---
 frontend/components/tasks/task-filters.tsx   |  2 +-
 frontend/components/tasks/task-form.tsx      |  8 +++----
 frontend/components/tasks/task-list.tsx      | 23 ++++++++++++++------
 5 files changed, 27 insertions(+), 15 deletions(-)
 create mode 100644 .Jules/palette.md

diff --git a/.Jules/palette.md b/.Jules/palette.md
new file mode 100644
index 0000000..6378f1a
--- /dev/null
+++ b/.Jules/palette.md
@@ -0,0 +1,3 @@
+## 2025-05-15 - Spanish Linguistic Standards for UI Text
+**Learning:** The application has a recurring pattern of missing required accents (tildes) on common Spanish words, which detracts from the professional feel and quality of the interface. This is a critical accessibility and UX detail for Spanish-speaking users.
+**Action:** Strictly ensure that common UI words such as 'Mañana', 'más', 'descripción', 'Título', 'Edición', 'sesión', 'Mías', and 'Búsqueda' always include their proper accentuation. Use automated search (grep) to identify and correct these across the codebase.
diff --git a/frontend/components/tasks/task-dashboard.tsx b/frontend/components/tasks/task-dashboard.tsx
index eaa3798..3ee72a4 100644
--- a/frontend/components/tasks/task-dashboard.tsx
+++ b/frontend/components/tasks/task-dashboard.tsx
@@ -170,7 +170,7 @@ export default function TaskDashboard({
           <ModeToggle />
           <Button variant="ghost" size="sm" onClick={handleLogout} className="text-muted-foreground hover:text-destructive transition-colors">
             <LogOut className="h-4 w-4 mr-2" />
-            Cerrar sesion
+            Cerrar sesión
           </Button>
         </div>
       </header>
@@ -208,7 +208,7 @@ export default function TaskDashboard({
                   <div className="flex items-center gap-3">
                     <div className="flex items-center gap-2">
                       <LayoutDashboard className="w-5 h-5 text-muted-foreground" />
-                      <h3 className="font-semibold">Tus Tareas</h3>
+                      <h3 className="font-semibold">Tus tareas</h3>
                     </div>
                     {/* View mode toggle */}
                     <div className="flex items-center gap-1 bg-muted/50 rounded-lg p-1">
@@ -241,7 +241,7 @@ export default function TaskDashboard({
                       value="mis-tareas"
                       className="data-[state=active]:bg-background"
                     >
-                      Mias
+                      Mías
                       <Badge variant="secondary" className="ml-2 bg-background/50">
                         {myTasksCount}
                       </Badge>
diff --git a/frontend/components/tasks/task-filters.tsx b/frontend/components/tasks/task-filters.tsx
index f00cf38..bd35160 100644
--- a/frontend/components/tasks/task-filters.tsx
+++ b/frontend/components/tasks/task-filters.tsx
@@ -326,7 +326,7 @@ export default function TaskFiltersComponent({
           )}
           {activeFilters.search && (
             <Badge variant="secondary" className="text-xs">
-              Busqueda: {activeFilters.search}
+              Búsqueda: {activeFilters.search}
               <button
                 className="ml-1 hover:text-destructive"
                 onClick={() => handleSearchChange("")}
diff --git a/frontend/components/tasks/task-form.tsx b/frontend/components/tasks/task-form.tsx
index e03922b..fc66eb3 100644
--- a/frontend/components/tasks/task-form.tsx
+++ b/frontend/components/tasks/task-form.tsx
@@ -175,7 +175,7 @@ export default function TaskForm({
     <form onSubmit={handleSubmit} className="space-y-4">
       <div className="space-y-4">
         <div className="space-y-2">
-          <Label htmlFor="task-title">Titulo de la tarea</Label>
+          <Label htmlFor="task-title">Título de la tarea</Label>
           <Input
             id="task-title"
             placeholder="Ej: Comprar leche"
@@ -186,7 +186,7 @@ export default function TaskForm({
         </div>
 
         <div className="space-y-2">
-          <Label htmlFor="task-description">Descripcion (opcional)</Label>
+          <Label htmlFor="task-description">Descripción (opcional)</Label>
           <Textarea
             id="task-description"
             placeholder="Detalles adicionales sobre la tarea"
@@ -198,7 +198,7 @@ export default function TaskForm({
 
         <div className="grid grid-cols-2 gap-3">
           <div className="space-y-2">
-            <Label>Fecha limite</Label>
+            <Label>Fecha límite</Label>
             <Popover open={calendarOpen} onOpenChange={setCalendarOpen}>
               <PopoverTrigger asChild>
                 <Button
@@ -371,7 +371,7 @@ export default function TaskForm({
         </Button>
         {editingTask && (
           <Button type="button" variant="ghost" onClick={onCancel} className="w-full h-10">
-            Cancelar Edicion
+            Cancelar Edición
           </Button>
         )}
       </div>
diff --git a/frontend/components/tasks/task-list.tsx b/frontend/components/tasks/task-list.tsx
index 5420bf5..353954c 100644
--- a/frontend/components/tasks/task-list.tsx
+++ b/frontend/components/tasks/task-list.tsx
@@ -13,6 +13,7 @@ import {
   Clock,
   AlertTriangle,
   ChevronRight,
+  ClipboardList,
 } from "lucide-react";
 import type { Task } from "@/lib/types";
 import { useState } from "react";
@@ -66,7 +67,7 @@ function getDueDateInfo(dueDate: string) {
   }
   if (isTomorrow(date)) {
     return {
-      label: "Manana",
+      label: "Mañana",
       className: "text-blue-600 dark:text-blue-400",
       icon: Calendar,
     };
@@ -92,9 +93,17 @@ export default function TaskList({
 
   if (tasks.length === 0) {
     return (
-      <p className="text-center py-4 text-muted-foreground">
-        No se encontraron tareas. Crea una para empezar!
-      </p>
+      <div className="flex flex-col items-center justify-center py-12 px-4 text-center space-y-4 bg-muted/20 rounded-2xl border-2 border-dashed border-muted/50">
+        <div className="bg-background p-4 rounded-full shadow-sm ring-1 ring-border">
+          <ClipboardList className="h-8 w-8 text-muted-foreground" />
+        </div>
+        <div className="space-y-1">
+          <p className="font-semibold text-foreground">No se encontraron tareas</p>
+          <p className="text-sm text-muted-foreground max-w-[250px] mx-auto">
+            ¡Crea tu primera tarea para empezar a organizar tu trabajo hoy mismo!
+          </p>
+        </div>
+      </div>
     );
   }
 
@@ -177,7 +186,7 @@ export default function TaskList({
                           size="sm"
                           className="h-6 w-6 p-0"
                           onClick={() => toggleTaskExpansion(task.id)}
-                          aria-label={isExpanded ? "Contraer descripcion" : "Expandir descripcion"}
+                          aria-label={isExpanded ? "Contraer descripción" : "Expandir descripción"}
                         >
                           {isExpanded ? (
                             <ChevronUp className="h-4 w-4" />
@@ -201,9 +210,9 @@ export default function TaskList({
                       {hasLongDescription && (
                         <button
                           onClick={() => toggleTaskExpansion(task.id)}
-                          className="text-xs font-semibold text-primary hover:underline mt-1 focus:outline-none"
+                          className="text-xs font-semibold text-primary hover:underline mt-1 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 rounded-sm transition-all"
                         >
-                          {isExpanded ? "Ver menos" : "Ver mas"}
+                          {isExpanded ? "Ver menos" : "Ver más"}
                         </button>
                       )}
                     </div>