From 8993ab3293d2aed106ffaf21f272e977ae832061 Mon Sep 17 00:00:00 2001
From: "Carlos (Almeira)" <carlos@almeira.com.co>
Date: Mon, 30 Mar 2026 10:35:10 -0500
Subject: [PATCH] feat: add tooltips with title to media items in dashboard and
 selection modals

---
 src/app/dashboard/media/page.tsx               | 4 ++--
 src/components/dashboard/MediaGridSelector.tsx | 2 +-
 src/components/dashboard/MediaPickerMini.tsx   | 1 +
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/app/dashboard/media/page.tsx b/src/app/dashboard/media/page.tsx
index 91614d2..4ae4b2b 100644
--- a/src/app/dashboard/media/page.tsx
+++ b/src/app/dashboard/media/page.tsx
@@ -100,7 +100,7 @@ export default async function MediaLibraryPage({
                       <div className="h-48 w-full relative bg-slate-950 flex items-center justify-center overflow-hidden">
                           {item.tipo === 'video' ? (
                               <>
-                                <video src={fileUrl} className="w-full h-full object-cover opacity-50 blur-sm" />
+                                <video src={fileUrl} title={item.titulo} className="w-full h-full object-cover opacity-50 blur-sm" />
                                 <div className="absolute inset-0 flex items-center justify-center">
                                     <div className="w-16 h-16 bg-cyan-500/20 rounded-full flex items-center justify-center border border-cyan-500/50">
                                         <Video className="text-cyan-400" size={32} />
@@ -109,7 +109,7 @@ export default async function MediaLibraryPage({
                               </>
                           ) : (
                               // eslint-disable-next-line @next/next/no-img-element
-                              <img src={fileUrl} alt={item.alt_text || item.titulo} className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" />
+                              <img src={fileUrl} alt={item.alt_text || item.titulo} title={item.titulo} className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" />
                           )}
                           <div className="absolute top-2 right-2 flex bg-black/50 backdrop-blur-md rounded-lg p-1 opacity-0 group-hover:opacity-100 transition-opacity">
                                <DeleteButton collectionId={"media"} documentId={item.$id} entityAlias={"media"} />
diff --git a/src/components/dashboard/MediaGridSelector.tsx b/src/components/dashboard/MediaGridSelector.tsx
index 64f2b75..6a2a556 100644
--- a/src/components/dashboard/MediaGridSelector.tsx
+++ b/src/components/dashboard/MediaGridSelector.tsx
@@ -211,7 +211,7 @@ export const MediaGridSelector = ({
                             value === item.file_id ? 'border-cyan-500 shadow-xl shadow-cyan-500/20' : 'border-slate-800 hover:border-slate-600 shadow-lg'
                         }`}
                         >
-                        <img src={url} alt={item.titulo} className="w-full h-full object-cover transition-transform group-hover:scale-110" loading="lazy" />
+                        <img src={url} alt={item.titulo} title={item.titulo} className="w-full h-full object-cover transition-transform group-hover:scale-110" loading="lazy" />
                         <div className="absolute inset-0 bg-gradient-to-t from-cyan-500/20 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none" />
                         {value === item.$id && (
                             <div className="absolute top-2 right-2 bg-cyan-500 text-white rounded-full p-1 shadow-lg">
diff --git a/src/components/dashboard/MediaPickerMini.tsx b/src/components/dashboard/MediaPickerMini.tsx
index 24fdea5..43f645d 100644
--- a/src/components/dashboard/MediaPickerMini.tsx
+++ b/src/components/dashboard/MediaPickerMini.tsx
@@ -176,6 +176,7 @@ export const MediaPickerMini = ({ value, onChange, label }: MediaPickerMiniProps
                       <img 
                         src={getImageUrl(item.file_id)} 
                         alt={item.titulo} 
+                        title={item.titulo}
                         className="w-full h-full object-cover transition-transform group-hover:scale-110"
                         loading="lazy"
                       />