feat: server members API + member list in sidebar + fix chat input

Backend:
- Add GET /api/v1/servers/{serverID}/members endpoint
- Wire MemberHandler routes in main.go

Frontend:
- Create member store (fetchMembers by server ID)
- MemberList now fetches members from API instead of empty props
- ChatArea: show channel name instead of ID, add error display,
  add flex-1 + min-w-0 to input for proper sizing, error handling
  on sendMessage

web/src/components/ChatArea.tsx

@@ -1,57 +1,78 @@
-import { useEffect, useRef, useState } from 'react';
-import { useMessageStore } from '../stores/message.ts';
-import { useChannelStore } from '../stores/channel.ts';
-import { GiphyPicker, type Gif } from './GiphyPicker';
+import { useEffect, useRef, useState } from "react";
+import { useMessageStore } from "../stores/message.ts";
+import { useChannelStore } from "../stores/channel.ts";
+import { useServerStore } from "../stores/server.ts";
+import { GiphyPicker, type Gif } from "./GiphyPicker";
 
 function formatTime(iso: string): string {
   const date = new Date(iso);
-  const hours = date.getHours().toString().padStart(2, '0');
-  const minutes = date.getMinutes().toString().padStart(2, '0');
+  const hours = date.getHours().toString().padStart(2, "0");
+  const minutes = date.getMinutes().toString().padStart(2, "0");
   return `${hours}:${minutes}`;
 }
 
 export function ChatArea() {
-  const activeChannelId = useChannelStore((state) => state.activeChannelId);
-  const messages = useMessageStore((state) =>
-    activeChannelId ? state.messagesByChannel[activeChannelId] || [] : []
+  const activeChannelId = useChannelStore((s) => s.activeChannelId);
+  const channelsByServer = useChannelStore((s) => s.channelsByServer);
+  const activeServerId = useServerStore((s) => s.activeServerId);
+  const messages = useMessageStore((s) =>
+    activeChannelId ? s.messagesByChannel[activeChannelId] || [] : [],
   );
-  const isLoading = useMessageStore((state) => state.isLoading);
-  const fetchMessages = useMessageStore((state) => state.fetchMessages);
-  const sendMessage = useMessageStore((state) => state.sendMessage);
-  const [input, setInput] = useState('');
+  const isLoading = useMessageStore((s) => s.isLoading);
+  const fetchMessages = useMessageStore((s) => s.fetchMessages);
+  const sendMessage = useMessageStore((s) => s.sendMessage);
+  const [input, setInput] = useState("");
+  const [error, setError] = useState<string | null>(null);
   const [showGifPicker, setShowGifPicker] = useState(false);
   const bottomRef = useRef<HTMLDivElement>(null);
 
+  const channels = activeServerId
+    ? channelsByServer[activeServerId] || []
+    : [];
+  const activeChannel = channels.find((c) => c.id === activeChannelId);
+
   useEffect(() => {
     if (activeChannelId) {
       fetchMessages(activeChannelId);
+      setError(null);
     }
   }, [activeChannelId, fetchMessages]);
 
   useEffect(() => {
-    bottomRef.current?.scrollIntoView({ behavior: 'auto' });
+    bottomRef.current?.scrollIntoView({ behavior: "auto" });
   }, [messages]);
 
   const handleSubmit = async (event: React.FormEvent) => {
     event.preventDefault();
-    if (!activeChannelId || !input.trim()) {
-      return;
+    if (!activeChannelId || !input.trim()) return;
+    setError(null);
+    try {
+      await sendMessage(activeChannelId, input.trim());
+      setInput("");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to send");
     }
-    await sendMessage(activeChannelId, input.trim());
-    setInput('');
   };
 
   const handleGifSelect = async (gif: Gif) => {
     if (!activeChannelId) return;
-    const content = `![${gif.title || 'GIF'}](${gif.url})`;
-    await sendMessage(activeChannelId, content);
-    setShowGifPicker(false);
+    const content = `![${gif.title || "GIF"}](${gif.url})`;
+    try {
+      await sendMessage(activeChannelId, content);
+      setShowGifPicker(false);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to send");
+    }
   };
 
   return (
     <div className="flex flex-col h-full bg-gb-bg">
       <div className="terminal-border border-t-0 border-x-0 px-3 py-2 text-gb-fg-s">
-        {activeChannelId ? `#${activeChannelId}` : '[NO CHANNEL SELECTED]'}
+        {activeChannel
+          ? `# ${activeChannel.name}`
+          : activeChannelId
+            ? `#${activeChannelId}`
+            : "[NO CHANNEL SELECTED]"}
       </div>
       <div className="flex-1 overflow-y-auto p-3 space-y-1 font-mono text-sm">
         {isLoading && <p className="text-gb-fg-f">[loading...]</p>}
@@ -60,8 +81,12 @@ export function ChatArea() {
         )}
         {messages.map((message) => (
           <div key={message.id} className="break-words">
-            <span className="text-gb-fg-f">[{formatTime(message.createdAt)}]</span>{' '}
-            <span className="text-gb-aqua">&lt;{message.author.username}&gt;</span>{' '}
+            <span className="text-gb-fg-f">
+              [{formatTime(message.createdAt)}]
+            </span>{" "}
+            <span className="text-gb-aqua">
+              &lt;{message.author.username}&gt;
+            </span>{" "}
             <span className="text-gb-fg">{message.content}</span>
           </div>
         ))}
@@ -75,21 +100,26 @@ export function ChatArea() {
           />
         </div>
       )}
+      {error && (
+        <div className="px-3 pb-1">
+          <p className="text-gb-red text-xs font-mono">ERR: {error}</p>
+        </div>
+      )}
       <form onSubmit={handleSubmit} className="p-3 flex items-center gap-2">
-        <span className="text-gb-fg-f select-none">{'>'}</span>
+        <span className="text-gb-fg-f select-none shrink-0">{">"}</span>
         <input
           type="text"
           value={input}
           onChange={(e) => setInput(e.target.value)}
-          placeholder="_"
-          className="terminal-input"
+          placeholder="type a message..."
+          className="terminal-input flex-1 min-w-0"
           disabled={!activeChannelId}
         />
         <button
           type="button"
           onClick={() => setShowGifPicker((prev) => !prev)}
           disabled={!activeChannelId}
-          className="text-gb-fg-f hover:text-gb-orange font-mono text-sm select-none disabled:opacity-50 disabled:cursor-not-allowed"
+          className="text-gb-fg-f hover:text-gb-orange font-mono text-sm select-none disabled:opacity-50 disabled:cursor-not-allowed shrink-0"
           title="Toggle GIF picker"
         >
           [GIF]