Initial support for Hand Raise feature

Signed-off-by: Milton Moura <miltonmoura@gmail.com>

src/tile/GridTile.tsx

@@ -44,6 +44,7 @@ import {
 import { Slider } from "../Slider";
 import { MediaView } from "./MediaView";
 import { useLatest } from "../useLatest";
+import { useRaisedHands } from "../room/useRaisedHands";
 
 interface TileProps {
   className?: string;
@@ -90,6 +91,8 @@ const UserMediaTile = forwardRef<HTMLDivElement, UserMediaTileProps>(
       },
       [vm],
     );
+    const { raisedHands } = useRaisedHands();
+    const raisedHand = raisedHands.includes(vm.member?.userId ?? "");
 
     const MicIcon = audioEnabled ? MicOnSolidIcon : MicOffSolidIcon;
 
@@ -144,6 +147,7 @@ const UserMediaTile = forwardRef<HTMLDivElement, UserMediaTileProps>(
             {menu}
           </Menu>
         }
+        raisedHand={raisedHand}
         {...props}
       />
     );

src/tile/MediaView.module.css

@@ -90,6 +90,22 @@ unconditionally select the container so we can use cqmin units */
   place-items: start;
 }
 
+.raisedHand {
+  margin: var(--cpd-space-2x);
+  padding: var(--cpd-space-2x);
+  padding-block: var(--cpd-space-2x);
+  color: var(--cpd-color-icon-secondary);
+  background-color: var(--cpd-color-icon-secondary);
+  display: flex;
+  align-items: center;
+  border-radius: var(--cpd-radius-pill-effect);
+  user-select: none;
+  overflow: hidden;
+  box-shadow: var(--small-drop-shadow);
+  box-sizing: border-box;
+  max-inline-size: 100%;
+}
+
 .nameTag {
   grid-area: nameTag;
   padding: var(--cpd-space-1x);

src/tile/MediaView.tsx

@@ -16,6 +16,7 @@ import { Text, Tooltip } from "@vector-im/compound-web";
 import { ErrorIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import styles from "./MediaView.module.css";
+import RaiseHandIcon from "../icons/RaiseHand.svg?react";
 import { Avatar } from "../Avatar";
 
 interface Props extends ComponentProps<typeof animated.div> {
@@ -32,6 +33,7 @@ interface Props extends ComponentProps<typeof animated.div> {
   nameTagLeadingIcon?: ReactNode;
   displayName: string;
   primaryButton?: ReactNode;
+  raisedHand: boolean;
 }
 
 export const MediaView = forwardRef<HTMLDivElement, Props>(
@@ -50,6 +52,7 @@ export const MediaView = forwardRef<HTMLDivElement, Props>(
       nameTagLeadingIcon,
       displayName,
       primaryButton,
+      raisedHand,
       ...props
     },
     ref,
@@ -86,6 +89,11 @@ export const MediaView = forwardRef<HTMLDivElement, Props>(
           )}
         </div>
         <div className={styles.fg}>
+          {raisedHand && (
+            <div className={styles.raisedHand}>
+              <RaiseHandIcon width={22} height={22} />
+            </div>
+          )}
           <div className={styles.nameTag}>
             {nameTagLeadingIcon}
             <Text as="span" size="sm" weight="medium" className={styles.name}>