v3: added a chatbox

src/components/ChatButton.tsx

@@ -0,0 +1,27 @@
+import { t } from "@lingui/core/macro";
+import { useWS } from "../hooks/useWS.ts";
+import { useChat } from "../hooks/useChat.ts";
+
+/** Header chat button with an unread-message badge. Opens the app-wide chat. */
+export function ChatButton() {
+  const { unreadChatCount } = useWS();
+  const { openChat } = useChat();
+
+  return (
+    <button
+      type="button"
+      className="chat-button"
+      onClick={openChat}
+      aria-label={unreadChatCount > 0
+        ? t`Chat (${unreadChatCount} unread)`
+        : t`Chat`}
+    >
+      <span className="chat-button-icon">💬</span>
+      {unreadChatCount > 0 && (
+        <span className="notification-badge">
+          {unreadChatCount > 99 ? "99+" : unreadChatCount}
+        </span>
+      )}
+    </button>
+  );
+}