From b1a0c6e15400ac24fe437d180543d2fabec015a7 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Thu, 29 Jan 2026 21:59:01 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Enhance=20UX=20with?=
 =?UTF-8?q?=20tooltips=20and=20Spanish=20linguistic=20fixes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Added global `TooltipProvider` to `app/layout.tsx`.
- Implemented `Tooltip` components for icon-only buttons in `task-list.tsx` (Edit, Delete, Expand).
- Corrected numerous missing Spanish accents and tildes across `task-list.tsx`, `task-form.tsx`, and `task-dashboard.tsx` to improve accessibility and polish.
- Improved ARIA labels with correct spelling for better screen reader support.

Co-authored-by: Rumazor <87402949+Rumazor@users.noreply.github.com>
---
 .Jules/palette.md                            |  3 +
 frontend/app/layout.tsx                      |  9 +-
 frontend/components/tasks/task-dashboard.tsx |  4 +-
 frontend/components/tasks/task-form.tsx      |  8 +-
 frontend/components/tasks/task-list.tsx      | 92 ++++++++++++--------
 5 files changed, 71 insertions(+), 45 deletions(-)
 create mode 100644 .Jules/palette.md

diff --git a/.Jules/palette.md b/.Jules/palette.md
new file mode 100644
index 0000000..5df04f2
--- /dev/null
+++ b/.Jules/palette.md
@@ -0,0 +1,3 @@
+## 2025-01-29 - [Spanish Linguistic Quality & Tooltip Foundation]
+**Learning:** Found a systemic pattern of missing Spanish accents (tildes) in button labels, ARIA labels, and form fields, which negatively impacts professionalism and screen reader pronunciation. Also discovered that `TooltipProvider` was missing from the global layout, preventing the use of accessible tooltips.
+**Action:** Always verify linguistic correctness in Spanish (check common words like 'Mañana', 'más', 'descripción', 'Título') and ensure `TooltipProvider` is available at the root level before implementing new tooltips.
diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx
index 242af68..3b9b6d0 100644
--- a/frontend/app/layout.tsx
+++ b/frontend/app/layout.tsx
@@ -5,6 +5,7 @@ import "./globals.css";
 import { Toaster } from "@/components/ui/toaster";
 import { ThemeProvider } from "@/components/theme-provider";
 import { PWAProvider } from "@/components/pwa";
+import { TooltipProvider } from "@/components/ui/tooltip";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -79,9 +80,11 @@ export default function RootLayout({
           enableSystem
           disableTransitionOnChange
         >
-          {children}
-          <Toaster />
-          <PWAProvider />
+          <TooltipProvider>
+            {children}
+            <Toaster />
+            <PWAProvider />
+          </TooltipProvider>
         </ThemeProvider>
       </body>
     </html>
diff --git a/frontend/components/tasks/task-dashboard.tsx b/frontend/components/tasks/task-dashboard.tsx
index eaa3798..0107e88 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>
@@ -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-form.tsx b/frontend/components/tasks/task-form.tsx
index e03922b..3494b32 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..5a5c909 100644
--- a/frontend/components/tasks/task-list.tsx
+++ b/frontend/components/tasks/task-list.tsx
@@ -3,6 +3,11 @@
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Badge } from "@/components/ui/badge";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import {
   Edit,
   Trash2,
@@ -66,7 +71,7 @@ function getDueDateInfo(dueDate: string) {
   }
   if (isTomorrow(date)) {
     return {
-      label: "Manana",
+      label: "Mañana",
       className: "text-blue-600 dark:text-blue-400",
       icon: Calendar,
     };
@@ -172,19 +177,26 @@ export default function TaskList({
 
                     <div className="flex items-center gap-1">
                       {hasLongDescription && (
-                        <Button
-                          variant="ghost"
-                          size="sm"
-                          className="h-6 w-6 p-0"
-                          onClick={() => toggleTaskExpansion(task.id)}
-                          aria-label={isExpanded ? "Contraer descripcion" : "Expandir descripcion"}
-                        >
-                          {isExpanded ? (
-                            <ChevronUp className="h-4 w-4" />
-                          ) : (
-                            <ChevronDown className="h-4 w-4" />
-                          )}
-                        </Button>
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              className="h-6 w-6 p-0"
+                              onClick={() => toggleTaskExpansion(task.id)}
+                              aria-label={isExpanded ? "Contraer descripción" : "Expandir descripción"}
+                            >
+                              {isExpanded ? (
+                                <ChevronUp className="h-4 w-4" />
+                              ) : (
+                                <ChevronDown className="h-4 w-4" />
+                              )}
+                            </Button>
+                          </TooltipTrigger>
+                          <TooltipContent side="top">
+                            {isExpanded ? "Ver menos" : "Ver más"}
+                          </TooltipContent>
+                        </Tooltip>
                       )}
                     </div>
                   </div>
@@ -203,7 +215,7 @@ export default function TaskList({
                           onClick={() => toggleTaskExpansion(task.id)}
                           className="text-xs font-semibold text-primary hover:underline mt-1 focus:outline-none"
                         >
-                          {isExpanded ? "Ver menos" : "Ver mas"}
+                          {isExpanded ? "Ver menos" : "Ver más"}
                         </button>
                       )}
                     </div>
@@ -313,27 +325,35 @@ export default function TaskList({
               </div>
 
               <div className="flex space-x-1 ml-2 shrink-0 absolute top-4 right-4">
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  className="h-7 w-7 p-0"
-                  onClick={() => onEdit(task)}
-                  disabled={task.completed}
-                  aria-label="Editar tarea"
-                  title="Editar tarea"
-                >
-                  <Edit className="h-3.5 w-3.5" />
-                </Button>
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  className="h-7 w-7 p-0"
-                  onClick={() => handleDeleteClick(task)}
-                  aria-label="Eliminar tarea"
-                  title="Eliminar tarea"
-                >
-                  <Trash2 className="h-3.5 w-3.5" />
-                </Button>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="h-7 w-7 p-0"
+                      onClick={() => onEdit(task)}
+                      disabled={task.completed}
+                      aria-label="Editar tarea"
+                    >
+                      <Edit className="h-3.5 w-3.5" />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent side="top">Editar tarea</TooltipContent>
+                </Tooltip>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="h-7 w-7 p-0"
+                      onClick={() => handleDeleteClick(task)}
+                      aria-label="Eliminar tarea"
+                    >
+                      <Trash2 className="h-3.5 w-3.5" />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent side="top">Eliminar tarea</TooltipContent>
+                </Tooltip>
               </div>
             </div>
           );