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}