Messages

src/app/app.ts

@@ -165,17 +165,18 @@ export default class Enclave<P = Page> {
         return;
 
       case "Messages":
-        console.log("msg", msg.messages);
         Object.entries(msg.messages).forEach(([channelId, messages]) => {
           if (!server.messages[channelId]) {
-            server.messages[channelId] = new Set();
+            server.messages[channelId] = {};
           }
 
           messages.forEach((message) => {
-            server.messages[channelId].add(message);
+            server.messages[channelId][message.id] = message;
           });
         });
 
+        this.forceRender();
+
         return;
     }
   }

src/app/server.ts

@@ -29,7 +29,7 @@ export default class EnclaveServer {
   public isSecure: boolean;
   public websocket?: EnclaveWebSocket;
   public meta?: ServerMeta;
-  public messages: Record<string, Set<StoredMessage>>;
+  public messages: Record<string, Record<string, StoredMessage>>;
 
   public constructor(hostname: string, isSecure: boolean) {
     this.hostname = hostname;

src/components/page/channel/TextChannel.tsx

@@ -1,5 +1,6 @@
 import Enclave from "@/app/app";
 import { ChannelPageProps } from "@/components/page/PageView";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { StoredMessage } from "@/lib/types";
@@ -40,8 +41,10 @@ export default function TextChannel({
 
       <div className="h-full flex flex-col gap-2.5 px-3 pt-4 overflow-y-scroll">
         {appRef.current?.server?.messages[channel.id] &&
-          Array.from(appRef.current?.server?.messages[channel.id]).map(
+          Object.entries(appRef.current?.server?.messages[channel.id]).map(
-            (message) => <TextMessage appRef={appRef} message={message} />,
+            ([_, message]) => (
+              <TextMessage key={message.id} appRef={appRef} message={message} />
+            ),
           )}
       </div>
 
@@ -79,9 +82,11 @@ export function TextMessage({
 
   return (
     <div className="rounded-lg flex gap-3 px-3 py-3 hover:bg-muted/40">
-      <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-muted text-xs font-medium text-muted-foreground">
+      <Avatar className="h-10 w-10">
-        {message.author.slice(0, 2).toUpperCase()}
+        <AvatarFallback>
-      </div>
+          {message.author.slice(0, 2).toUpperCase()}
+        </AvatarFallback>
+      </Avatar>
 
       <div className="min-w-0 flex-1">
         <div className="flex items-baseline gap-2">