feat: presence avatar border rings (P5-18) + room emoji prefix support (P5-6)

P5-18: PresenceRingAvatar wrapper component applies a 2px box-shadow
ring to user avatars — green (online), yellow (idle/unavailable), red
(DND via status_msg='dnd'), no ring (offline). Applied to: message
timeline sender avatars, members drawer (members + knock requests),
@mention autocomplete, and inbox notification senders.

P5-6: Leading emoji in room names renders at 1.15× in the sidebar via
Unicode emoji regex detection in RoomNavItem. Emoji picker (EmojiBoard
in PopOut) added to all three room-name inputs: Create Room dialog
(converted to controlled input), Room Settings name field (shown only
when canEditName), and the "Rename for me" local rename dialog.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/app/features/room/MembersDrawer.tsx

@@ -68,7 +68,7 @@ import { useRoomCreators } from '../../hooks/useRoomCreators';
 import { useCrossSigningActive } from '../../hooks/useCrossSigning';
 import { MemberVerificationBadge } from '../../components/MemberVerificationBadge';
 import { useUserPresence } from '../../hooks/useUserPresence';
-import { PresenceBadge } from '../../components/presence';
+import { PresenceBadge, PresenceRingAvatar } from '../../components/presence';
 
 type MemberDrawerHeaderProps = {
   room: Room;
@@ -150,14 +150,16 @@ function MemberItem({
       radii="400"
       onClick={onClick}
       before={
-        <Avatar size="200">
-          <UserAvatar
-            userId={member.userId}
-            src={avatarUrl ?? undefined}
-            alt={name}
-            renderFallback={() => <Icon size="50" src={Icons.User} filled />}
-          />
-        </Avatar>
+        <PresenceRingAvatar userId={member.userId}>
+          <Avatar size="200">
+            <UserAvatar
+              userId={member.userId}
+              src={avatarUrl ?? undefined}
+              alt={name}
+              renderFallback={() => <Icon size="50" src={Icons.User} filled />}
+            />
+          </Avatar>
+        </PresenceRingAvatar>
       }
       after={
         <>
@@ -440,14 +442,16 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) {
                       gap="200"
                       style={{ padding: `0 ${config.space.S200}` }}
                     >
-                      <Avatar size="200">
-                        <UserAvatar
-                          userId={knockMember.userId}
-                          src={knockAvatarUrl ?? undefined}
-                          alt={knockName}
-                          renderFallback={() => <Icon size="50" src={Icons.User} filled />}
-                        />
-                      </Avatar>
+                      <PresenceRingAvatar userId={knockMember.userId}>
+                        <Avatar size="200">
+                          <UserAvatar
+                            userId={knockMember.userId}
+                            src={knockAvatarUrl ?? undefined}
+                            alt={knockName}
+                            renderFallback={() => <Icon size="50" src={Icons.User} filled />}
+                          />
+                        </Avatar>
+                      </PresenceRingAvatar>
                       <Box grow="Yes" direction="Column">
                         <Text size="T400" truncate>
                           {knockName}

src/app/features/room/message/Message.tsx

@@ -82,6 +82,7 @@ import colorMXID from '../../../../util/colorMXID';
 import { getPowerTagIconSrc } from '../../../hooks/useMemberPowerTag';
 import { ForwardMessageDialog } from './ForwardMessageDialog';
 import { useBookmarks } from '../../../hooks/useBookmarks';
+import { PresenceRingAvatar } from '../../../components/presence';
 
 // Delivery status indicator for own messages
 function DeliveryStatus({
@@ -873,25 +874,27 @@ export const Message = React.memo(
         <AvatarBase
           className={messageLayout === MessageLayout.Bubble ? css.BubbleAvatarBase : undefined}
         >
-          <Avatar
-            className={css.MessageAvatar}
-            as="button"
-            size="300"
-            data-user-id={senderId}
-            onClick={onUserClick}
-          >
-            <UserAvatar
-              userId={senderId}
-              src={
-                senderAvatarMxc
-                  ? (mxcUrlToHttp(mx, senderAvatarMxc, useAuthentication, 48, 48, 'crop') ??
-                    undefined)
-                  : undefined
-              }
-              alt={senderDisplayName}
-              renderFallback={() => <Icon size="200" src={Icons.User} filled />}
-            />
-          </Avatar>
+          <PresenceRingAvatar userId={senderId}>
+            <Avatar
+              className={css.MessageAvatar}
+              as="button"
+              size="300"
+              data-user-id={senderId}
+              onClick={onUserClick}
+            >
+              <UserAvatar
+                userId={senderId}
+                src={
+                  senderAvatarMxc
+                    ? (mxcUrlToHttp(mx, senderAvatarMxc, useAuthentication, 48, 48, 'crop') ??
+                      undefined)
+                    : undefined
+                }
+                alt={senderDisplayName}
+                renderFallback={() => <Icon size="200" src={Icons.User} filled />}
+              />
+            </Avatar>
+          </PresenceRingAvatar>
         </AvatarBase>
       );