Improved structure and added caching for server messages

src/hooks/use-app.ts

@@ -7,8 +7,7 @@ import useUser, { UserProfile } from "./get-user";
 export default function useApp(): App {
   const node = useRef<WebSocket | null>(null);
   const [profiles, setProfiles] = useState<StringMap<UserProfile>>({});
-  const messages = useMessages((s) => s.messages);
-  const addMessage = useMessages((s) => s.addMessage);
+  const { messages, addMessage } = useMessages();
   const [sidebarOpen, setSidebarOpen] = useState(true);
   const profile = useUser();
 

src/hooks/use-messages.ts

@@ -9,6 +9,13 @@ interface MessageStore {
   clearMessages: () => void;
 }
 
+type ServerMessageStore = {
+  messages: Record<string, Message[]>; // server_id → messages
+  setMessages: (serverId: string, msgs: Message[]) => void;
+  addMessage: (serverId: string, msg: Message) => void;
+  clearMessages: (serverId?: string) => void;
+};
+
 export const useMessages = create<MessageStore>()(
   persist(
     (set) => ({
@@ -25,3 +32,44 @@ export const useMessages = create<MessageStore>()(
     { name: "chat-messages" }
   )
 );
+
+export const useServerMessages = create<ServerMessageStore>()(
+  persist(
+    (set) => ({
+      messages: {},
+
+      setMessages: (serverId, msgs) =>
+        set((state) => ({
+          messages: { ...state.messages, [serverId]: msgs },
+        })),
+
+      addMessage: (serverId, msg) =>
+        set((state) => {
+          const serverMsgs = state.messages[serverId] || [];
+
+          // avoid duplicates
+          if (serverMsgs.some((m) => m.id === msg.id)) return state;
+
+          return {
+            messages: {
+              ...state.messages,
+              [serverId]: [...serverMsgs, msg],
+            },
+          };
+        }),
+
+      clearMessages: (serverId) =>
+        set((state) =>
+          serverId
+            ? {
+                messages: {
+                  ...state.messages,
+                  [serverId]: [],
+                },
+              }
+            : { messages: {} }
+        ),
+    }),
+    { name: "server-messages" }
+  )
+);

src/hooks/use-once.ts

@@ -0,0 +1,18 @@
+import { useEffect, useRef } from "react";
+
+export function useEffectOnceWhenReady(
+  effect: () => void,
+  deps: any[],
+  testers: (undefined | ((m: any) => boolean))[]
+) {
+  const hasRun = useRef(false);
+
+  useEffect(() => {
+    const allReady = deps.every(
+      (d, i) => d !== undefined && d !== null && (!testers[i] || testers[i](d))
+    );
+    if (!allReady || hasRun.current) return;
+    hasRun.current = true;
+    effect();
+  }, deps);
+}