feat(frontend): add dominant emotion display to UserModal

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>

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;
 };