First PoC for reactions

src/tile/GridTile.tsx

@@ -45,6 +45,7 @@ import { Slider } from "../Slider";
 import { MediaView } from "./MediaView";
 import { useLatest } from "../useLatest";
 import { useReactions } from "../useReactions";
+import { ReactionOption } from "../reactions";
 
 interface TileProps {
   className?: string;
@@ -91,7 +92,7 @@ const UserMediaTile = forwardRef<HTMLDivElement, UserMediaTileProps>(
       },
       [vm],
     );
-    const { raisedHands } = useReactions();
+    const { raisedHands, reactions } = useReactions();
 
     const MicIcon = audioEnabled ? MicOnSolidIcon : MicOffSolidIcon;
 
@@ -110,6 +111,8 @@ const UserMediaTile = forwardRef<HTMLDivElement, UserMediaTileProps>(
     );
 
     const handRaised: Date | undefined = raisedHands[vm.member?.userId ?? ""];
+    const currentReaction: ReactionOption | undefined =
+      reactions[vm.member?.userId ?? ""];
 
     const showSpeaking = showSpeakingIndicators && speaking;
 
@@ -152,6 +155,7 @@ const UserMediaTile = forwardRef<HTMLDivElement, UserMediaTileProps>(
           </Menu>
         }
         raisedHandTime={handRaised}
+        currentReaction={currentReaction}
         {...props}
       />
     );

src/tile/MediaView.tsx

@@ -19,6 +19,7 @@ import styles from "./MediaView.module.css";
 import { Avatar } from "../Avatar";
 import { RaisedHandIndicator } from "../reactions/RaisedHandIndicator";
 import { showHandRaisedTimer, useSetting } from "../settings/settings";
+import { ReactionOption } from "../reactions";
 
 interface Props extends ComponentProps<typeof animated.div> {
   className?: string;
@@ -35,6 +36,7 @@ interface Props extends ComponentProps<typeof animated.div> {
   displayName: string;
   primaryButton?: ReactNode;
   raisedHandTime?: Date;
+  currentReaction?: ReactionOption;
 }
 
 export const MediaView = forwardRef<HTMLDivElement, Props>(
@@ -54,6 +56,7 @@ export const MediaView = forwardRef<HTMLDivElement, Props>(
       displayName,
       primaryButton,
       raisedHandTime,
+      currentReaction,
       ...props
     },
     ref,
@@ -101,7 +104,7 @@ export const MediaView = forwardRef<HTMLDivElement, Props>(
           <div className={styles.nameTag}>
             {nameTagLeadingIcon}
             <Text as="span" size="sm" weight="medium" className={styles.name}>
-              {displayName}
+              {displayName} {currentReaction?.emoji ?? ""}
             </Text>
             {unencryptedWarning && (
               <Tooltip