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
2026-06-29 17:51:32 +00:00
parent bb67a7652e
commit 23902de912
5 changed files with 240 additions and 80 deletions
@@ -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]
@@ -1,83 +1,85 @@
-import { usePresenceStore } from '../stores/presence.ts';
-import type { User, UserStatus } from '../stores/auth.ts';
-
-interface MemberListProps {
-  members?: User[];
-}
+import { useEffect } from "react";
+import { useServerStore } from "../stores/server.ts";
+import { useMemberStore, type Member } from "../stores/member.ts";
+import { usePresenceStore } from "../stores/presence.ts";
+import type { UserStatus } from "../stores/auth.ts";

 function statusIcon(status: UserStatus): string {
  switch (status) {
-    case 'online':
-      return '\u25cf';
-    case 'idle':
-      return '\u25d0';
-    case 'dnd':
-      return '\u26d5';
+    case "online":
+      return "\u25cf";
+    case "idle":
+      return "\u25d0";
+    case "dnd":
+      return "\u26d5";
    default:
-      return '\u25cb';
+      return "\u25cb";
  }
 }

 function statusColor(status: UserStatus): string {
  switch (status) {
-    case 'online':
-      return 'text-gb-green';
-    case 'idle':
-      return 'text-gb-yellow';
-    case 'dnd':
-      return 'text-gb-red';
+    case "online":
+      return "text-gb-green";
+    case "idle":
+      return "text-gb-yellow";
+    case "dnd":
+      return "text-gb-red";
    default:
-      return 'text-gb-gray';
+      return "text-gb-gray";
  }
 }

 function usernameColor(status: UserStatus): string {
  switch (status) {
-    case 'online':
-      return 'text-gb-aqua';
-    case 'idle':
-      return 'text-gb-yellow';
-    case 'dnd':
-      return 'text-gb-red';
+    case "online":
+      return "text-gb-aqua";
+    case "idle":
+      return "text-gb-yellow";
+    case "dnd":
+      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 useLiveStatus(member: User): UserStatus {
+function MemberRow({ member }: { member: Member }) {
  const presence = usePresenceStore((s) => s.presences[member.id]);
-  return presence?.status ?? member.status;
-}
-
-interface MemberRowProps {
-  member: User;
-}
-
-function MemberRow({ member }: MemberRowProps) {
-  const status = useLiveStatus(member);
+  const status = presence?.status ?? member.status;

  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) {
-  // Derive live status for every member to decide online/offline buckets.
+export function MemberList() {
+  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) => (
-              <MemberRow key={member.id} member={member} />
+            {online.map((m) => (
+              <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) => (
-              <MemberRow key={member.id} member={member} />
+            {offline.map((m) => (
+              <MemberRow key={m.id} member={m} />
            ))}
          </div>
        )}
@@ -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 });
+    }
+  },
+}));