feat: Added chat when MySQL is in use

frontend/src/components/ChatPopover.tsx

@@ -36,10 +36,22 @@ export function ChatPanel({ msgs, online, myCall, onSend, onClose }: {
         <MessageSquare className="size-4 text-sky-600" />
         <span className="text-xs font-bold uppercase tracking-wider text-foreground/80">Chat</span>
         <span className="flex-1" />
-        <Users className="size-3.5 text-muted-foreground" />
-        <span className="text-[11px] text-muted-foreground" title={online.map((o) => o.operator).join(', ')}>
-          {online.length}
-        </span>
+        {/* Online count — hover to see who's connected. */}
+        <div className="relative group">
+          <span className="inline-flex items-center gap-1 text-[11px] text-muted-foreground cursor-default">
+            <Users className="size-3.5" />{online.length}
+          </span>
+          {online.length > 0 && (
+            <div className="hidden group-hover:block absolute right-0 top-5 z-20 min-w-[130px] rounded-md border border-border bg-popover shadow-lg p-1.5">
+              <div className="text-[9px] uppercase tracking-wider text-muted-foreground mb-1">Online</div>
+              {online.map((o) => (
+                <div key={o.operator} className="font-mono text-[11px] whitespace-nowrap">
+                  {o.operator}{o.station && o.station.toUpperCase() !== o.operator.toUpperCase() ? <span className="text-muted-foreground"> · {o.station}</span> : null}
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
         <button type="button" onClick={onClose} className="ml-1 text-muted-foreground hover:text-foreground" title="Close">
           <X className="size-3.5" />
         </button>