new chat layout and stuff

webui/src/components/ChatPanel.jsx

@@ -1,65 +1,8 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { FaDiscord } from 'react-icons/fa';
 import { useChat } from '../context/ChatContext.jsx';
 import { useSession } from '../context/SessionContext.jsx';
 import { useSettingsNamespace } from '../settings/index.js';
-
-function roleColors(role) {
-  switch (role) {
-    case 'admin':
-    case 'lockdown':
-    case 'lockdown-admin':
-      return 'text-amber-300';
-    case 'spectator':
-      return 'text-slate-400';
-    default:
-      return 'text-sky-300';
-  }
-}
-
-function formatTime(ts) {
-  const date = new Date(ts);
-  return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
-}
-
-function displayName(message) {
-  return message.nickname || message.socketId?.slice(0, 6) || 'unknown';
-}
-
-function DiscordAvatar({ guildIconUrl, userAvatarUrl, label }) {
-  if (!guildIconUrl && !userAvatarUrl) return null;
-  return (
-    <span
-      className="flex h-4 w-4 overflow-hidden rounded-full border border-slate-700/80"
-      title={label}
-    >
-      <span
-        className={`h-full w-1/2 bg-slate-700/70 ${guildIconUrl ? 'bg-cover' : ''}`}
-        style={
-          guildIconUrl
-            ? {
-                backgroundImage: `url(${guildIconUrl})`,
-                backgroundPosition: 'left center',
-                backgroundSize: '200% 100%',
-              }
-            : undefined
-        }
-      />
-      <span
-        className={`h-full w-1/2 bg-slate-700/70 ${userAvatarUrl ? 'bg-cover' : ''}`}
-        style={
-          userAvatarUrl
-            ? {
-                backgroundImage: `url(${userAvatarUrl})`,
-                backgroundPosition: 'right center',
-                backgroundSize: '200% 100%',
-              }
-            : undefined
-        }
-      />
-    </span>
-  );
-}
+import ChatMessageRow from './ChatMessageRow.jsx';
 
 const FLITE_VOICES = ['kal', 'rms', 'slt', 'ksp', 'bdl'];
 const ESPEAK_PITCHES = Array.from({ length: 10 }, (_, idx) => idx * 10);
@@ -146,46 +89,7 @@ export default function ChatPanel({ hideInput = false, hideSpectatorNotice = fal
         {sorted.length === 0 ? (
           <p className="text-sm text-slate-500">No messages yet.</p>
         ) : (
-          sorted.map((msg) => {
-            const isAdmin =
-              msg.role === 'admin' || msg.role === 'lockdown' || msg.role === 'lockdown-admin';
-            const discordLabel = msg.fromDiscord
-              ? `${msg.discordGuildName || 'Discord'} · ${displayName(msg)}`
-              : null;
-            return (
-              <div
-                key={msg.id}
-                className={`surface-muted relative flex flex-wrap items-start gap-1 text-sm ${
-                  isAdmin
-                    ? 'border border-amber-400/30'
-                    : msg.fromDiscord
-                      ? 'border border-indigo-400/30 bg-indigo-900/20'
-                      : ''
-                }`}
-              >
-                {msg.fromDiscord ? (
-                  <>
-                    <FaDiscord className="h-3.5 w-3.5 text-indigo-200" />
-                    <DiscordAvatar
-                      guildIconUrl={msg.discordGuildIconUrl}
-                      userAvatarUrl={msg.discordUserAvatarUrl}
-                      label={discordLabel}
-                    />
-                  </>
-                ) : null}
-                <span className={`font-semibold text-[0.85rem] ${roleColors(msg.role)}`}>
-                  {displayName(msg)}
-                </span>
-                {msg.roverId && (
-                  <span className="rounded bg-slate-800 px-1 text-[0.7rem]">{msg.roverId}</span>
-                )}
-                <span className="text-slate-100 break-words leading-tight whitespace-pre-wrap">{msg.text}</span>
-                <span className="absolute bottom-0.5 right-1 text-[0.65rem] text-slate-400/60">
-                  {formatTime(msg.ts)}
-                </span>
-              </div>
-            );
-          })
+          sorted.map((msg) => <ChatMessageRow key={msg.id} message={msg} />)
         )}
       </div>
       {!hideInput && (
@@ -196,7 +100,13 @@ export default function ChatPanel({ hideInput = false, hideSpectatorNotice = fal
             onChange={(e) => setDraft(e.target.value)}
             onFocus={onInputFocus}
             onBlur={onInputBlur}
-            ref={(el) => registerInputRef(el)}
+            onKeyDown={(event) => {
+              if (event.key === 'Enter' && !draft.trim()) {
+                event.preventDefault();
+                blurChat();
+              }
+            }}
+            ref={(el) => registerInputRef(el, { target: 'panel' })}
             placeholder={canChat ? 'Type a message…' : hideSpectatorNotice ? '' : 'Spectators cannot chat'}
             disabled={!canChat}
           />