Update client/src/Chat.jsx

client/src/Chat.jsx

@@ -8,15 +8,13 @@ export default function Chat({ socket, roomId, name, isHost, members }) {
   const inputRef = useRef(null);
   const logRef = useRef(null);
 
-  // Mentions
   const [showMentions, setShowMentions] = useState(false);
   const [mentionQuery, setMentionQuery] = useState('');
   const [mentionAtIndex, setMentionAtIndex] = useState(-1);
 
   const mentionCandidates = useMemo(() => {
     const q = (mentionQuery || '').toLowerCase();
-    const arr = (members || []).filter(m => m.name.toLowerCase().includes(q)).slice(0, 8);
-    return arr;
+    return (members || []).filter(m => m.name.toLowerCase().includes(q)).slice(0, 8);
   }, [mentionQuery, members]);
 
   useEffect(() => {
@@ -34,18 +32,10 @@ export default function Chat({ socket, roomId, name, isHost, members }) {
   const parseCommand = (t) => {
     const raw = t.trim();
     const lower = raw.toLowerCase();
-    if (lower.startsWith('/play ')) {
-      return { cmd: 'play', arg: raw.slice(6).trim() };
-    }
-    if (lower.startsWith('/kick ')) {
-      return { cmd: 'kick', arg: raw.slice(6).trim().replace(/^@/, '') };
-    }
-    if (lower.startsWith('/promote ')) {
-      return { cmd: 'promote', arg: raw.slice(9).trim().replace(/^@/, '') };
-    }
-    if (lower.startsWith('/mute ')) {
-      return { cmd: 'mute', arg: raw.slice(6).trim().replace(/^@/, '') };
-    }
+    if (lower.startsWith('/play ')) return { cmd: 'play', arg: raw.slice(6).trim() };
+    if (lower.startsWith('/kick ')) return { cmd: 'kick', arg: raw.slice(6).trim().replace(/^@/, '') };
+    if (lower.startsWith('/promote ')) return { cmd: 'promote', arg: raw.slice(9).trim().replace(/^@/, '') };
+    if (lower.startsWith('/mute ')) return { cmd: 'mute', arg: raw.slice(6).trim().replace(/^@/, '') };
     return null;
   };
 
@@ -65,20 +55,15 @@ export default function Chat({ socket, roomId, name, isHost, members }) {
         return;
       }
       if (parsed.cmd === 'kick' || parsed.cmd === 'promote' || parsed.cmd === 'mute') {
-        if (!isHost) {
-          push('Only host/co-host can run admin commands', 'warn');
-        } else if (!parsed.arg) {
-          push('Provide a username like /kick @username', 'warn');
-        } else {
-          socket.emit('admin_command', { roomId, cmd: parsed.cmd, targetName: parsed.arg });
-        }
+        if (!isHost) push('Only host/co-host can run admin commands', 'warn');
+        else if (!parsed.arg) push('Provide a username like /kick @username', 'warn');
+        else socket.emit('admin_command', { roomId, cmd: parsed.cmd, targetName: parsed.arg });
         setText('');
         setShowMentions(false);
         return;
       }
     }
 
-    // Normal chat
     const m = { name, text: t, at: Date.now() };
     setMessages((prev) => [...prev, m]);
     socket.emit('chat_message', { roomId, name, text: t });
@@ -91,7 +76,6 @@ export default function Chat({ socket, roomId, name, isHost, members }) {
     const caret = e.target.selectionStart ?? val.length;
     setText(val);
 
-    // Find last '@' before caret
     let at = -1;
     for (let i = caret - 1; i >= 0; i--) {
       if (val[i] === '@') { at = i; break; }
@@ -118,7 +102,6 @@ export default function Chat({ socket, roomId, name, isHost, members }) {
     if (at < 0) return;
 
     const before = val.slice(0, at);
-    // find end of mention segment from at+1 to caret (no spaces)
     const nextSpace = val.slice(at + 1).search(/\s/);
     const end = nextSpace < 0 ? val.length : (at + 1 + nextSpace);
     const after = val.slice(end);
@@ -127,12 +110,8 @@ export default function Chat({ socket, roomId, name, isHost, members }) {
     const nextVal = inserted + after;
     setText(nextVal);
 
-    // place caret after inserted
     const newPos = inserted.length;
-    setTimeout(() => {
-      el.focus();
-      el.setSelectionRange(newPos, newPos);
-    }, 0);
+    setTimeout(() => { el.focus(); el.setSelectionRange(newPos, newPos); }, 0);
 
     setShowMentions(false);
     setMentionQuery('');
@@ -159,18 +138,13 @@ export default function Chat({ socket, roomId, name, isHost, members }) {
         <button className="btn primary" onClick={handleSend}>Send</button>
       </div>
 
-      {showMentions && mentionCandidates.length > 0 && (
+      {showMentions && (
         <div className="mentions" style={{ left: 8, bottom: 52 }}>
-          {mentionCandidates.map(m => (
+          {mentionCandidates.length ? mentionCandidates.map(m => (
             <div key={m.id} className="item" onClick={() => chooseMention(m)}>
               @{m.name} {m.role !== 'member' ? `(${m.role})` : ''}
             </div>
-          ))}
-        </div>
-      )}
-      {showMentions && mentionCandidates.length === 0 && (
-        <div className="mentions" style={{ left: 8, bottom: 52 }}>
-          <div className="item" style={{ opacity:.7 }}>No matches</div>
+          )) : <div className="item" style={{ opacity:.7 }}>No matches</div>}
         </div>
       )}
     </div>