feat(phase4): rich profiles, badges DB, block list

web/src/components/ChatArea.tsx

@@ -10,6 +10,7 @@ import { MessageSearch } from "./MessageSearch";
 import { ThreadListPanel } from "./ThreadListPanel.tsx";
 import { ThreadPanel } from "./ThreadPanel.tsx";
 import { ForumView } from "./ForumView.tsx";
+import { UserProfileModal } from "./UserProfileModal.tsx";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 
@@ -120,6 +121,7 @@ export function ChatArea() {
   const [selectMode, setSelectMode] = useState(false);
   const [showThreads, setShowThreads] = useState(false);
   const [activeThread, setActiveThread] = useState<{ id: string; name: string } | null>(null);
+  const [profileUserId, setProfileUserId] = useState<string | null>(null);
   const bottomRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
 
@@ -282,11 +284,11 @@ export function ChatArea() {
         />
       )}
       {showThreads && activeChannelId && activeChannel?.type !== 'forum' && (
-        <ThreadListPanel
-          channelId={activeChannelId}
-          onSelect={(t) => setActiveThread(t)}
-          onClose={() => setShowThreads(false)}
-        />
+      <ThreadListPanel
+        channelId={activeChannelId}
+        onSelect={(t: { id: string; name: string }) => setActiveThread(t)}
+        onClose={() => setShowThreads(false)}
+      />
       )}
       {selectMode && activeChannelId && activeChannel?.type !== 'forum' && (
         <div className="px-3 py-1 text-xs font-mono text-gb-fg-f flex items-center justify-between bg-gb-bg-s border-b border-gb-bg-t">
@@ -339,7 +341,9 @@ export function ChatArea() {
                       </span>
                     )}
                     <span className="text-gb-fg-f">[{formatTime(message.created_at)}]</span>{" "}
-                    <span className="text-gb-aqua">&lt;{message.author_username}&gt;</span>{" "}
+                    <span className="text-gb-aqua hover:text-gb-orange cursor-pointer" onClick={() => setProfileUserId(message.author_id)}>
+                      &lt;{message.author_username}&gt;
+                    </span>{" "}
                     <span className="text-gb-fg">{renderContent(message.content, memberUsernames)}</span>
                     {renderEmbeds(message.embeds)}
                   </div>
@@ -394,6 +398,9 @@ export function ChatArea() {
           </>
         )}
       </div>
+      {profileUserId && (
+        <UserProfileModal userId={profileUserId} onClose={() => setProfileUserId(null)} />
+      )}
     </div>
   );
 }