frontend/src/components/react/admin/Inbox.tsx

@@ -75,10 +75,17 @@ export default function Inbox() {
             className="border border-[var(--surface2)]/60"
             style={{ borderRadius: 1 }}
           >
-            <button
+            <div
-              type="button"
+              role="button"
+              tabIndex={0}
               onClick={() => setExpandedId(isOpen ? null : m.id)}
-              className="w-full flex flex-col md:flex-row md:items-baseline md:justify-between gap-2 md:gap-4 px-5 py-4 text-left hover:bg-[var(--surface0)]/40 transition-colors"
+              onKeyDown={e => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault();
+                  setExpandedId(isOpen ? null : m.id);
+                }
+              }}
+              className="w-full flex flex-col md:flex-row md:items-baseline md:justify-between gap-2 md:gap-4 px-5 py-4 text-left hover:bg-[var(--surface0)]/40 transition-colors cursor-pointer"
               aria-expanded={isOpen}
             >
               <div className="flex-1 min-w-0">
@@ -87,13 +94,23 @@ export default function Inbox() {
                 </div>
                 <div className="font-display italic text-xs text-[var(--subtext0)] tracking-wider mt-1 truncate">
                   {m.name ? `${m.name} · ` : ''}
-                  {m.email ?? 'no email'}
+                  {m.email ? (
+                    <a
+                      href={`mailto:${m.email}${m.subject ? `?subject=${encodeURIComponent('Re: ' + m.subject)}` : ''}`}
+                      onClick={e => e.stopPropagation()}
+                      className="underline decoration-[var(--surface2)] underline-offset-2 hover:text-[var(--mauve)] hover:decoration-[var(--mauve)] transition-colors"
+                    >
+                      {m.email}
+                    </a>
+                  ) : (
+                    'no email'
+                  )}
                 </div>
               </div>
               <div className="font-display italic text-xs text-[var(--subtext0)] tracking-wider shrink-0">
                 {formatDate(m.received_at)}
               </div>
-            </button>
+            </div>
             {isOpen && (
               <div className="px-5 pb-5 pt-2 border-t border-[var(--surface2)]/40 space-y-4">
                 <pre className="font-sans whitespace-pre-wrap text-[var(--text)] text-sm leading-relaxed">