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/components/editor/autocomplete/UserMentionAutocomplete.tsx

@@ -20,6 +20,7 @@ import { getMemberDisplayName, getMemberSearchStr } from '../../../utils/room';
 import { UserAvatar } from '../../user-avatar';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 import { Membership } from '../../../../types/matrix/room';
+import { PresenceRingAvatar } from '../../presence';
 
 type MentionAutoCompleteHandler = (userId: string, name: string) => void;
 
@@ -47,12 +48,14 @@ function UnknownMentionItem({
       }
       onClick={() => handleAutocomplete(userId, name)}
       before={
-        <Avatar size="200">
-          <UserAvatar
-            userId={userId}
-            renderFallback={() => <Icon size="50" src={Icons.User} filled />}
-          />
-        </Avatar>
+        <PresenceRingAvatar userId={userId}>
+          <Avatar size="200">
+            <UserAvatar
+              userId={userId}
+              renderFallback={() => <Icon size="50" src={Icons.User} filled />}
+            />
+          </Avatar>
+        </PresenceRingAvatar>
       }
     >
       <Text style={{ flexGrow: 1 }} size="B400">
@@ -174,14 +177,16 @@ export function UserMentionAutocomplete({
                 </Text>
               }
               before={
-                <Avatar size="200">
-                  <UserAvatar
-                    userId={roomMember.userId}
-                    src={avatarUrl ?? undefined}
-                    alt={getName(roomMember)}
-                    renderFallback={() => <Icon size="50" src={Icons.User} filled />}
-                  />
-                </Avatar>
+                <PresenceRingAvatar userId={roomMember.userId}>
+                  <Avatar size="200">
+                    <UserAvatar
+                      userId={roomMember.userId}
+                      src={avatarUrl ?? undefined}
+                      alt={getName(roomMember)}
+                      renderFallback={() => <Icon size="50" src={Icons.User} filled />}
+                    />
+                  </Avatar>
+                </PresenceRingAvatar>
               }
             >
               <Text style={{ flexGrow: 1 }} size="B400" truncate>

src/app/components/presence/PresenceRingAvatar.tsx

@@ -0,0 +1,36 @@
+import React, { ReactNode } from 'react';
+import { color } from 'folds';
+import { Presence, useUserPresence } from '../../hooks/useUserPresence';
+
+function presenceRingColor(presence: Presence | undefined, status?: string): string | null {
+  if (!presence || presence === Presence.Offline) return null;
+  if (presence === Presence.Unavailable) {
+    return status === 'dnd' ? color.Critical.Main : color.Warning.Main;
+  }
+  return color.Success.Main;
+}
+
+type PresenceRingAvatarProps = {
+  userId: string;
+  children: ReactNode;
+};
+
+export function PresenceRingAvatar({ userId, children }: PresenceRingAvatarProps) {
+  const presence = useUserPresence(userId);
+  const ringColor = presenceRingColor(presence?.presence, presence?.status);
+
+  if (!ringColor) return <>{children}</>;
+
+  return (
+    <div
+      style={{
+        display: 'inline-flex',
+        borderRadius: '50%',
+        boxShadow: `0 0 0 2px ${ringColor}`,
+        flexShrink: 0,
+      }}
+    >
+      {children}
+    </div>
+  );
+}

src/app/components/presence/index.ts

@@ -1 +1,2 @@
 export * from './Presence';
+export * from './PresenceRingAvatar';