fix: blank page on channel click + logout issue

web/src/components/ChatArea.tsx

@@ -82,10 +82,10 @@ export function ChatArea() {
         {messages.map((message) => (
           <div key={message.id} className="break-words">
             <span className="text-gb-fg-f">
-              [{formatTime(message.createdAt)}]
+              [{formatTime(message.created_at)}]
             </span>{" "}
             <span className="text-gb-aqua">
-              &lt;{message.author.username}&gt;
+              &lt;{message.author_username}&gt;
             </span>{" "}
             <span className="text-gb-fg">{message.content}</span>
           </div>

web/src/stores/message.ts

@@ -1,14 +1,15 @@
-import { create } from 'zustand';
-import { api } from '../lib/api.ts';
-import type { User } from './auth.ts';
+import { create } from "zustand";
+import { api } from "../lib/api.ts";
 
 export interface Message {
   id: string;
-  channelId: string;
-  author: User;
+  channel_id: string;
+  author_id: string;
+  author_username: string;
+  author_display_name: string | null;
   content: string;
-  createdAt: string;
-  updatedAt?: string;
+  created_at: string;
+  edited_at: string | null;
 }
 
 interface MessageState {
@@ -30,22 +31,33 @@ export const useMessageStore = create<MessageState>((set) => ({
   fetchMessages: async (channelId, before) => {
     set({ isLoading: true, error: null });
     try {
-      const params = before ? `?before=${encodeURIComponent(before)}` : '';
-      const messages = await api.get<Message[]>(`/channels/${channelId}/messages${params}`);
+      const params = before ? `?before=${encodeURIComponent(before)}` : "";
+      const messages = await api.get<Message[]>(
+        `/channels/${channelId}/messages${params}`,
+      );
       set((state) => ({
-        messagesByChannel: { ...state.messagesByChannel, [channelId]: messages },
+        messagesByChannel: {
+          ...state.messagesByChannel,
+          [channelId]: Array.isArray(messages) ? messages : [],
+        },
         isLoading: false,
       }));
     } catch (error) {
       set({
         isLoading: false,
-        error: error instanceof Error ? error.message : 'Failed to fetch messages',
+        error:
+          error instanceof Error
+            ? error.message
+            : "Failed to fetch messages",
       });
     }
   },
 
   sendMessage: async (channelId, content) => {
-    const message = await api.post<Message>(`/channels/${channelId}/messages`, { content });
+    const message = await api.post<Message>(
+      `/channels/${channelId}/messages`,
+      { content },
+    );
     set((state) => {
       const list = state.messagesByChannel[channelId] || [];
       return {
@@ -60,25 +72,27 @@ export const useMessageStore = create<MessageState>((set) => ({
 
   addMessage: (message) =>
     set((state) => {
-      const list = state.messagesByChannel[message.channelId] || [];
+      const list = state.messagesByChannel[message.channel_id] || [];
       if (list.some((m) => m.id === message.id)) {
         return state;
       }
       return {
         messagesByChannel: {
           ...state.messagesByChannel,
-          [message.channelId]: [...list, message],
+          [message.channel_id]: [...list, message],
         },
       };
     }),
 
   updateMessage: (message) =>
     set((state) => {
-      const list = state.messagesByChannel[message.channelId] || [];
+      const list = state.messagesByChannel[message.channel_id] || [];
       return {
         messagesByChannel: {
           ...state.messagesByChannel,
-          [message.channelId]: list.map((m) => (m.id === message.id ? message : m)),
+          [message.channel_id]: list.map((m) =>
+            m.id === message.id ? message : m,
+          ),
         },
       };
     }),

web/src/stores/ws.ts

@@ -50,14 +50,14 @@ function extractServer(payload: UnknownPayload): Server | null {
 }
 
 function extractIds(payload: UnknownPayload): { channelId: string; messageId: string } | null {
-  if (typeof payload.channelId !== 'string' || typeof payload.messageId !== 'string') {
+  if (typeof payload.channel_id !== 'string' || typeof payload.message_id !== 'string') {
     return null;
   }
-  return { channelId: payload.channelId, messageId: payload.messageId };
+  return { channelId: payload.channel_id, messageId: payload.message_id };
 }
 
 function extractChannelId(payload: UnknownPayload): string | null {
-  return typeof payload.channelId === 'string' ? payload.channelId : null;
+  return typeof payload.channel_id === 'string' ? payload.channel_id : null;
 }
 
 export const useWebSocketStore = create<WebSocketState>((set, get) => ({
@@ -142,7 +142,7 @@ export const useWebSocketStore = create<WebSocketState>((set, get) => ({
         }
         case 'message_deleted': {
           const ids = extractIds(data.payload);
-          if (ids) removeMessage(ids.channelId, ids.messageId);
+          if (ids) removeMessage(ids.channel_id, ids.message_id);
           break;
         }
         case 'channel_created': {