From 6d98d512222ffb422bc2a4bef4284a644558b39d Mon Sep 17 00:00:00 2001
From: Tania Sanz <info@taniasanz.com>
Date: Sat, 16 May 2026 21:26:18 +0200
Subject: [PATCH] feat(contacts): make email cell a link to the contact detail
 page

Currently the only entry point from the /contacts list to a contact's
detail page is the small Edit icon-button in the actions column. Make
the email itself a Link to /contacts/:id so the obvious affordance
("click the thing that identifies the row") works too. Applied to both
the desktop table cell and the mobile card variant.
---
 apps/web/src/pages/contacts/index.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/pages/contacts/index.tsx b/apps/web/src/pages/contacts/index.tsx
index 0a4ff88..a4bc66d 100644
--- a/apps/web/src/pages/contacts/index.tsx
+++ b/apps/web/src/pages/contacts/index.tsx
@@ -405,7 +405,12 @@ export default function ContactsPage() {
                                 ) : (
                                   <MailX className="h-4 w-4 text-red-600" />
                                 )}
-                                <span className="text-sm font-medium text-neutral-900">{contact.email}</span>
+                                <Link
+                                  href={`/contacts/${contact.id}`}
+                                  className="text-sm font-medium text-neutral-900 hover:text-neutral-700 focus-visible:outline-none focus-visible:underline"
+                                >
+                                  {contact.email}
+                                </Link>
                               </div>
                             </td>
                             <td className="px-6 py-4 whitespace-nowrap">
@@ -455,7 +460,12 @@ export default function ContactsPage() {
                             ) : (
                               <MailX className="h-4 w-4 text-red-600 flex-shrink-0" />
                             )}
-                            <span className="text-sm font-medium text-neutral-900 truncate">{contact.email}</span>
+                            <Link
+                              href={`/contacts/${contact.id}`}
+                              className="text-sm font-medium text-neutral-900 truncate hover:text-neutral-700 focus-visible:outline-none focus-visible:underline"
+                            >
+                              {contact.email}
+                            </Link>
                           </div>
                           <span
                             className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium flex-shrink-0 ${