Chat im Match: Match-Chat und Team-Chat in Tabs, Zuschauer ausgeschlossen, nach Matchende nur lesbar

client/src/components/ChatBox.jsx

@@ -0,0 +1,107 @@
+import { useEffect, useRef, useState } from 'react';
+import { api } from '../lib/api.js';
+
+const time = (ms) => new Date(ms).toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' });
+const SEEN_KEY = (matchId) => `cs2mv:chat-seen:${matchId}`;
+
+function readSeen(matchId) {
+  try {
+    return JSON.parse(localStorage.getItem(SEEN_KEY(matchId))) ?? {};
+  } catch {
+    return {};
+  }
+}
+
+/** Chat im Match: Tabs für Match-Chat und Team-Chat über der Nachrichtenliste. */
+export default function ChatBox({ chat, matchId, token, playerToken }) {
+  const [active, setActive] = useState(chat.channels[0].key);
+  const [text, setText] = useState('');
+  const [error, setError] = useState(null);
+  const [sending, setSending] = useState(false);
+  const [seen, setSeen] = useState(() => readSeen(matchId));
+  const listRef = useRef(null);
+  const channel = chat.channels.some((c) => c.key === active) ? active : chat.channels[0].key;
+  const messages = chat.messages[channel] ?? [];
+  const lastId = (key) => chat.messages[key]?.at(-1)?.id ?? 0;
+
+  // Aktiven Kanal als gelesen merken und ans Ende scrollen, wenn neue Nachrichten kommen
+  useEffect(() => {
+    const id = lastId(channel);
+    if (id && seen[channel] !== id) {
+      const next = { ...seen, [channel]: id };
+      setSeen(next);
+      try {
+        localStorage.setItem(SEEN_KEY(matchId), JSON.stringify(next));
+      } catch {
+        /* ignorieren */
+      }
+    }
+    const el = listRef.current;
+    if (el) el.scrollTop = el.scrollHeight;
+  }, [channel, messages.length]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const send = async (e) => {
+    e.preventDefault();
+    if (!text.trim() || sending) return;
+    setSending(true);
+    setError(null);
+    try {
+      await api(`/matches/${matchId}/chat`, { method: 'POST', body: { channel, text }, token, playerToken });
+      setText('');
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setSending(false);
+    }
+  };
+
+  return (
+    <section className="panel chat-box" aria-label="Chat">
+      <div className="chat-tabs" role="tablist">
+        {chat.channels.map((c) => {
+          const unread = c.key !== channel && lastId(c.key) > (seen[c.key] ?? 0);
+          return (
+            <button key={c.key} role="tab" aria-selected={c.key === channel}
+              className={`chat-tab chat-tab-${c.key.toLowerCase()} ${c.key === channel ? 'is-active' : ''}`}
+              onClick={() => setActive(c.key)}>
+              {c.label}
+              {unread && <span className="chat-unread" aria-label="neue Nachrichten" />}
+            </button>
+          );
+        })}
+      </div>
+      <ol className="chat-list" ref={listRef} aria-live="polite">
+        {messages.length === 0 && (
+          <li className="chat-empty muted small">
+            {channel === 'match' ? 'Noch keine Nachricht. Hier schreiben beide Teams und der Organisator.' : 'Noch keine Nachricht. Diesen Chat sieht nur dein Team.'}
+          </li>
+        )}
+        {messages.map((m) => (
+          <li key={m.id} className={`chat-msg ${m.mine ? 'is-mine' : ''}`}>
+            <span className="chat-meta">
+              <strong className={m.team ? `team-${m.team.toLowerCase()}` : 'chat-org'}>{m.author}</strong>
+              {m.organizer && m.team && <span className="chat-role">Organisator</span>}
+              <time className="muted">{time(m.at)}</time>
+            </span>
+            <span className="chat-text">{m.text}</span>
+          </li>
+        ))}
+      </ol>
+      {chat.canWrite ? (
+        <form className="chat-form" onSubmit={send}>
+          <input
+            value={text}
+            onChange={(e) => setText(e.target.value)}
+            maxLength={chat.maxLength}
+            placeholder={channel === 'match' ? 'Nachricht an alle im Match' : 'Nachricht an dein Team'}
+            aria-label="Nachricht"
+          />
+          <button className="btn btn-primary" disabled={!text.trim() || sending}>Senden</button>
+        </form>
+      ) : (
+        <p className="small muted chat-closed">Das Match ist beendet, der Chat ist nur noch lesbar.</p>
+      )}
+      {error && <p className="field-error">{error}</p>}
+    </section>
+  );
+}