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

cmd/server/main.go

@@ -97,6 +97,7 @@ func main() {
 
 	// Permissions checker
 	permissionsChecker := permissions.NewChecker(database.DB)
+	memberHandler := server.NewMemberHandler(database.DB)
 
 	r := chi.NewRouter()
 	r.Use(chimw.Logger)
@@ -134,11 +135,22 @@ func main() {
 
 			// Servers
 			r.Route("/servers", func(r chi.Router) {
-				server.NewHandler(database.DB).RegisterRoutes(r)
+				serverHandler := server.NewHandler(database.DB)
+				r.Post("/", serverHandler.Create)
+				r.Get("/", serverHandler.List)
 
-				// Channels (nested under servers)
+				r.Route("/{serverID}", func(r chi.Router) {
-				r.Route("/{serverID}/channels", func(r chi.Router) {
+					r.Get("/", serverHandler.Get)
-					channel.NewHandler(database.DB, permissionsChecker).RegisterRoutes(r)
+					r.Patch("/", serverHandler.Update)
+					r.Delete("/", serverHandler.Delete)
+
+					// Server members
+					memberHandler.RegisterRoutes(r)
+
+					// Channels (nested under servers)
+					r.Route("/channels", func(r chi.Router) {
+						channel.NewHandler(database.DB, permissionsChecker).RegisterRoutes(r)
+					})
 				})
 			})
 

internal/server/members.go

@@ -0,0 +1,76 @@
+package server
+
+import (
+	"database/sql"
+	"encoding/json"
+	"net/http"
+
+	"git.dustin.coffee/hobokenchicken/dumpsterChat/internal/middleware"
+	"github.com/go-chi/chi/v5"
+)
+
+type MemberHandler struct {
+	db *sql.DB
+}
+
+func NewMemberHandler(db *sql.DB) *MemberHandler {
+	return &MemberHandler{db: db}
+}
+
+func (h *MemberHandler) RegisterRoutes(r chi.Router) {
+	r.Get("/members", h.ListMembers)
+}
+
+type memberResponse struct {
+	ID          string `json:"id"`
+	Username    string `json:"username"`
+	DisplayName string `json:"display_name"`
+	Avatar      string `json:"avatar"`
+	Status      string `json:"status"`
+	StatusText  string `json:"status_text"`
+}
+
+func (h *MemberHandler) ListMembers(w http.ResponseWriter, r *http.Request) {
+	userID, ok := middleware.UserIDFromContext(r.Context())
+	if !ok {
+		http.Error(w, `{"error":"unauthorized"}`, http.StatusUnauthorized)
+		return
+	}
+
+	serverID := chi.URLParam(r, "serverID")
+
+	// Verify the caller is a member
+	var exists bool
+	err := h.db.QueryRowContext(r.Context(),
+		`SELECT EXISTS(SELECT 1 FROM members WHERE user_id = $1 AND server_id = $2)`,
+		userID, serverID).Scan(&exists)
+	if err != nil || !exists {
+		http.Error(w, `{"error":"not a member"}`, http.StatusForbidden)
+		return
+	}
+
+	rows, err := h.db.QueryContext(r.Context(), `
+		SELECT u.id, u.username, u.display_name, COALESCE(u.avatar, ""), u.status, COALESCE(u.status_text, "")
+		FROM members m
+		JOIN users u ON u.id = m.user_id
+		WHERE m.server_id = $1
+		ORDER BY u.username
+	`, serverID)
+	if err != nil {
+		http.Error(w, `{"error":"server error"}`, http.StatusInternalServerError)
+		return
+	}
+	defer rows.Close()
+
+	members := make([]memberResponse, 0)
+	for rows.Next() {
+		var m memberResponse
+		if err := rows.Scan(&m.ID, &m.Username, &m.DisplayName, &m.Avatar, &m.Status, &m.StatusText); err != nil {
+			continue
+		}
+		members = append(members, m)
+	}
+
+	w.Header().Set("Content-Type", "application/json")
+	json.NewEncoder(w).Encode(members)
+}

web/src/components/ChatArea.tsx

@@ -1,57 +1,78 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from "react";
-import { useMessageStore } from '../stores/message.ts';
+import { useMessageStore } from "../stores/message.ts";
-import { useChannelStore } from '../stores/channel.ts';
+import { useChannelStore } from "../stores/channel.ts";
-import { GiphyPicker, type Gif } from './GiphyPicker';
+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 hours = date.getHours().toString().padStart(2, "0");
-  const minutes = date.getMinutes().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 activeChannelId = useChannelStore((s) => s.activeChannelId);
-  const messages = useMessageStore((state) =>
+  const channelsByServer = useChannelStore((s) => s.channelsByServer);
-    activeChannelId ? state.messagesByChannel[activeChannelId] || [] : []
+  const activeServerId = useServerStore((s) => s.activeServerId);
+  const messages = useMessageStore((s) =>
+    activeChannelId ? s.messagesByChannel[activeChannelId] || [] : [],
   );
-  const isLoading = useMessageStore((state) => state.isLoading);
+  const isLoading = useMessageStore((s) => s.isLoading);
-  const fetchMessages = useMessageStore((state) => state.fetchMessages);
+  const fetchMessages = useMessageStore((s) => s.fetchMessages);
-  const sendMessage = useMessageStore((state) => state.sendMessage);
+  const sendMessage = useMessageStore((s) => s.sendMessage);
-  const [input, setInput] = useState('');
+  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()) {
+    if (!activeChannelId || !input.trim()) return;
-      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})`;
+    const content = `![${gif.title || "GIF"}](${gif.url})`;
-    await sendMessage(activeChannelId, content);
+    try {
-    setShowGifPicker(false);
+      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-fg-f">
-            <span className="text-gb-aqua">&lt;{message.author.username}&gt;</span>{' '}
+              [{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="_"
+          placeholder="type a message..."
-          className="terminal-input"
+          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]

web/src/components/MemberList.tsx

@@ -1,83 +1,85 @@
-import { usePresenceStore } from '../stores/presence.ts';
+import { useEffect } from "react";
-import type { User, UserStatus } from '../stores/auth.ts';
+import { useServerStore } from "../stores/server.ts";
-
+import { useMemberStore, type Member } from "../stores/member.ts";
-interface MemberListProps {
+import { usePresenceStore } from "../stores/presence.ts";
-  members?: User[];
+import type { UserStatus } from "../stores/auth.ts";
-}
 
 function statusIcon(status: UserStatus): string {
   switch (status) {
-    case 'online':
+    case "online":
-      return '\u25cf';
+      return "\u25cf";
-    case 'idle':
+    case "idle":
-      return '\u25d0';
+      return "\u25d0";
-    case 'dnd':
+    case "dnd":
-      return '\u26d5';
+      return "\u26d5";
     default:
-      return '\u25cb';
+      return "\u25cb";
   }
 }
 
 function statusColor(status: UserStatus): string {
   switch (status) {
-    case 'online':
+    case "online":
-      return 'text-gb-green';
+      return "text-gb-green";
-    case 'idle':
+    case "idle":
-      return 'text-gb-yellow';
+      return "text-gb-yellow";
-    case 'dnd':
+    case "dnd":
-      return 'text-gb-red';
+      return "text-gb-red";
     default:
-      return 'text-gb-gray';
+      return "text-gb-gray";
   }
 }
 
 function usernameColor(status: UserStatus): string {
   switch (status) {
-    case 'online':
+    case "online":
-      return 'text-gb-aqua';
+      return "text-gb-aqua";
-    case 'idle':
+    case "idle":
-      return 'text-gb-yellow';
+      return "text-gb-yellow";
-    case 'dnd':
+    case "dnd":
-      return 'text-gb-red';
+      return "text-gb-red";
     default:
-      return 'text-gb-fg-f';
+      return "text-gb-fg-f";
   }
 }
 
-/** Return the live status for a member, falling back to the static value. */
+function MemberRow({ member }: { member: Member }) {
-function useLiveStatus(member: User): UserStatus {
   const presence = usePresenceStore((s) => s.presences[member.id]);
-  return presence?.status ?? member.status;
+  const status = presence?.status ?? member.status;
-}
-
-interface MemberRowProps {
-  member: User;
-}
-
-function MemberRow({ member }: MemberRowProps) {
-  const status = useLiveStatus(member);
 
   return (
     <div className="flex items-center gap-2 px-2 py-1">
       <span className={statusColor(status)}>{statusIcon(status)}</span>
       <span className={`truncate ${usernameColor(status)}`}>
-        {member.username}
+        {member.display_name || member.username}
       </span>
     </div>
   );
 }
 
-export function MemberList({ members = [] }: MemberListProps) {
+export function MemberList() {
-  // Derive live status for every member to decide online/offline buckets.
+  const activeServerId = useServerStore((s) => s.activeServerId);
+  const membersByServer = useMemberStore((s) => s.membersByServer);
+  const fetchMembers = useMemberStore((s) => s.fetchMembers);
   const presences = usePresenceStore((s) => s.presences);
 
+  const members = activeServerId
+    ? membersByServer[activeServerId] || []
+    : [];
+
+  useEffect(() => {
+    if (activeServerId) {
+      fetchMembers(activeServerId);
+    }
+  }, [activeServerId, fetchMembers]);
+
   const online = members.filter((m) => {
     const status = presences[m.id]?.status ?? m.status;
-    return status !== 'offline';
+    return status !== "offline";
   });
   const offline = members.filter((m) => {
     const status = presences[m.id]?.status ?? m.status;
-    return status === 'offline';
+    return status === "offline";
   });
 
   return (
@@ -86,15 +88,18 @@ export function MemberList({ members = [] }: MemberListProps) {
         [MEMBERS]
       </div>
       <div className="flex-1 overflow-y-auto p-2 font-mono text-sm">
-        {members.length === 0 && (
+        {!activeServerId && (
+          <p className="text-gb-fg-f">[select a server]</p>
+        )}
+        {activeServerId && members.length === 0 && (
           <p className="text-gb-fg-f">[no members]</p>
         )}
         {online.length > 0 && (
           <div className="mb-3">
             <div className="text-gb-fg-t text-xs uppercase mb-1">ONLINE</div>
             <div className="text-gb-fg-f text-xs mb-1">---</div>
-            {online.map((member) => (
+            {online.map((m) => (
-              <MemberRow key={member.id} member={member} />
+              <MemberRow key={m.id} member={m} />
             ))}
           </div>
         )}
@@ -102,8 +107,8 @@ export function MemberList({ members = [] }: MemberListProps) {
           <div>
             <div className="text-gb-fg-t text-xs uppercase mb-1">OFFLINE</div>
             <div className="text-gb-fg-f text-xs mb-1">---</div>
-            {offline.map((member) => (
+            {offline.map((m) => (
-              <MemberRow key={member.id} member={member} />
+              <MemberRow key={m.id} member={m} />
             ))}
           </div>
         )}

web/src/stores/member.ts

@@ -0,0 +1,37 @@
+import { create } from "zustand";
+import { api } from "../lib/api.ts";
+
+export interface Member {
+  id: string;
+  username: string;
+  display_name: string;
+  avatar: string;
+  status: "online" | "idle" | "dnd" | "offline";
+  status_text: string;
+}
+
+interface MemberState {
+  membersByServer: Record<string, Member[]>;
+  isLoading: boolean;
+  fetchMembers: (serverId: string) => Promise<void>;
+}
+
+export const useMemberStore = create<MemberState>((set) => ({
+  membersByServer: {},
+  isLoading: false,
+
+  fetchMembers: async (serverId) => {
+    set({ isLoading: true });
+    try {
+      const members = await api.get<Member[]>(
+        `/servers/${serverId}/members`,
+      );
+      set((state) => ({
+        membersByServer: { ...state.membersByServer, [serverId]: members },
+        isLoading: false,
+      }));
+    } catch {
+      set({ isLoading: false });
+    }
+  },
+}));