fixed code

src/components/chat/ChatHeader.jsx

@@ -0,0 +1,20 @@
+export default function ChatHeader({ title, onBack, avatar, statusLabel, statusConnected }) {
+  return (
+      <div className="chat-header">
+        <button className="chat-back-btn" onClick={onBack}>
+          ←
+        </button>
+        {avatar !== undefined && (
+            <div className="chat-header-avatar">{avatar}</div>
+        )}
+        <div className="chat-header-title">{title}</div>
+        {statusLabel !== undefined ? (
+            <div className={`chat-status${statusConnected ? " connected" : ""}`}>
+              {statusLabel}
+            </div>
+        ) : (
+            <div />
+        )}
+      </div>
+  );
+}

src/components/chat/ChatInputBar.jsx

@@ -0,0 +1,56 @@
+import { useRef } from "react";
+import Picker from "@emoji-mart/react";
+import emojiData from "@emoji-mart/data";
+import { useClickOutside } from "../../hooks/useClickOutside";
+
+export default function ChatInputBar({
+  input,
+  onInputChange,
+  onSend,
+  onEmojiSelect,
+  showEmoji,
+  onToggleEmoji,
+  onCloseEmoji,
+  connected,
+  placeholder,
+}) {
+  const emojiPickerRef = useRef(null);
+  useClickOutside(emojiPickerRef, onCloseEmoji, showEmoji);
+
+  return (
+      <div className="chat-input-area">
+        {showEmoji && (
+            <div className="chat-emoji-picker" ref={emojiPickerRef}>
+              <Picker
+                  data={emojiData}
+                  onEmojiSelect={onEmojiSelect}
+                  theme="dark"
+                  previewPosition="none"
+                  skinTonePosition="none"
+                  searchPosition="sticky"
+                  maxSearchResults={30}
+                  perLine={8}
+              />
+            </div>
+        )}
+        <form onSubmit={onSend} className="chat-input-row">
+          <input
+              value={input}
+              onChange={(e) => onInputChange(e.target.value)}
+              placeholder={placeholder}
+              className="chat-input"
+          />
+          <button
+              type="button"
+              className={`chat-emoji-btn${showEmoji ? " active" : ""}`}
+              onClick={onToggleEmoji}
+          >
+            😊
+          </button>
+          <button type="submit" className="chat-send-btn" disabled={!connected}>
+            ➤
+          </button>
+        </form>
+      </div>
+  );
+}

src/components/chat/ChatListItem.jsx

@@ -0,0 +1,40 @@
+import { getChatDisplayInfo } from "../../utils/chatDisplay";
+import TrashIcon from "../icons/TrashIcon";
+
+export default function ChatListItem({ chat, post, unreadMap, t, onOpen, onDelete }) {
+  const { title, imgSrc, emoji, unreadCount } = getChatDisplayInfo(chat, post, unreadMap, t);
+
+  return (
+      <div
+          className={`chat-list-item${unreadCount > 0 ? " unread" : ""}`}
+          onClick={() => onOpen(chat.id)}
+      >
+        <div className="chat-list-avatar">
+          {imgSrc ? (
+              <img src={imgSrc} alt="" className="chat-list-avatar-img" />
+          ) : (
+              emoji || chat.otherUser?.name?.[0] || "?"
+          )}
+        </div>
+        <div className="chat-list-info">
+          <div className="chat-list-name">{title}</div>
+          <div className="chat-list-preview">
+            {chat.lastMessage?.content || t('chat.noMessages')}
+          </div>
+        </div>
+        {unreadCount > 0 && (
+            <div className="chat-list-unread-badge">{unreadCount > 99 ? "99+" : unreadCount}</div>
+        )}
+        <button
+            className="chat-list-delete-btn"
+            title={t('chat.deleteChat')}
+            onClick={(e) => {
+              e.stopPropagation();
+              onDelete(chat.id);
+            }}
+        >
+          <TrashIcon />
+        </button>
+      </div>
+  );
+}

src/components/chat/MessageBubble.jsx

@@ -0,0 +1,7 @@
+export default function MessageBubble({ message, isMine }) {
+  return (
+      <div className={`chat-bubble${isMine ? " mine" : ""}`}>
+        {message.content}
+      </div>
+  );
+}