fix(web): use keyed Fragment in ChatArea message list

web/src/components/ChatArea.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState, useMemo, useCallback, memo } from "react";
+import { useEffect, useRef, useState, useMemo, useCallback, memo, Fragment } from "react";
 import { useMessageStore } from "../stores/message.ts";
 import { api } from "../lib/api.ts";
 import { useChannelStore } from "../stores/channel.ts";
@@ -284,11 +284,12 @@ const MessageItem = memo(({
 MessageItem.displayName = "MessageItem";
 
 export function ChatArea() {
-  const activeChannelId = useChannelStore((s) => s.activeChannelId);
+  const rawActiveChannelId = useChannelStore((s) => s.activeChannelId);
+  const activeChannelId = rawActiveChannelId ? rawActiveChannelId.toLowerCase() : null;
   const channelsByServer = useChannelStore((s) => s.channelsByServer);
   const activeServerId = useServerStore((s) => s.activeServerId);
-  const messages = useMessageStore((s) =>
-    activeChannelId ? s.messagesByChannel[activeChannelId] || [] : [],
+  const messages = useMessageStore(
+    useCallback((s) => (activeChannelId ? s.messagesByChannel[activeChannelId] || [] : []), [activeChannelId])
   );
   const isLoading = useMessageStore((s) => s.isLoading);
   const isLoadingOlder = useMessageStore((s) => s.isLoadingOlder);
@@ -846,9 +847,8 @@ export function ChatArea() {
                   const lastReadId = activeChannelId ? readStates[activeChannelId] : undefined;
                   const showDivider = lastReadId && message.id === lastReadId && i < messages.length - 1;
                   return (
-                    <>
+                    <Fragment key={message.id}>
                       <MessageItem
-                        key={message.id}
                         message={message}
                         memberUsernames={memberUsernames}
                         selectMode={selectMode}
@@ -873,7 +873,7 @@ export function ChatArea() {
                           <span className="flex-1 border-t border-gb-red"></span>
                         </div>
                       )}
-                    </>
+                    </Fragment>
                   );
                 })}
                 <div ref={bottomRef} />