From e5414befa748d6cfdabe5057494cdba387ddd41b Mon Sep 17 00:00:00 2001
From: Dylan De Faoite <dylanseandefaoite@gmail.com>
Date: Wed, 18 Mar 2026 19:12:25 +0000
Subject: [PATCH] feat(frontend): add dominant emotion display to UserModal

---
 frontend/src/components/UserModal.tsx | 12 ++++++++++++
 frontend/src/types/ApiTypes.ts        |  1 +
 2 files changed, 13 insertions(+)

diff --git a/frontend/src/components/UserModal.tsx b/frontend/src/components/UserModal.tsx
index 54ee5fc..682b730 100644
--- a/frontend/src/components/UserModal.tsx
+++ b/frontend/src/components/UserModal.tsx
@@ -12,6 +12,9 @@ type Props = {
 };
 
 export default function UserModal({ open, onClose, userData, username }: Props) {
+  const dominantEmotionEntry = Object.entries(userData?.avg_emotions ?? {})
+    .sort((a, b) => b[1] - a[1])[0];
+
   return (
     <Dialog open={open} onClose={onClose} style={styles.modalRoot}>
       <div style={styles.modalBackdrop} />
@@ -66,6 +69,15 @@ export default function UserModal({ open, onClose, userData, username }: Props)
                   </div>
                 </div>
               ) : null}
+
+              {dominantEmotionEntry ? (
+                <div style={styles.topUserItem}>
+                  <div style={styles.topUserName}>Dominant Avg Emotion</div>
+                  <div style={styles.topUserMeta}>
+                    {dominantEmotionEntry[0].replace("emotion_", "")} ({dominantEmotionEntry[1].toFixed(3)})
+                  </div>
+                </div>
+              ) : null}
             </div>
           )}
         </DialogPanel>
diff --git a/frontend/src/types/ApiTypes.ts b/frontend/src/types/ApiTypes.ts
index 0e41386..7a0b521 100644
--- a/frontend/src/types/ApiTypes.ts
+++ b/frontend/src/types/ApiTypes.ts
@@ -40,6 +40,7 @@ type User = {
   comment: number;
   comment_post_ratio: number;
   comment_share: number;
+  avg_emotions?: Record<string, number>;
   vocab?: Vocab | null;
 };