From 1d4c65ca7ef40df865c3d6c75e6c880655aebc78 Mon Sep 17 00:00:00 2001
From: Klesti Selimaj <klesti.selimay@icloud.com>
Date: Fri, 21 Aug 2026 12:49:41 +0200
Subject: [PATCH 01/14] Chunksc

---
 src/components/page/channel/TextChannel.tsx | 41 ++++++++++++++++-----
 1 file changed, 31 insertions(+), 10 deletions(-)

diff --git a/src/components/page/channel/TextChannel.tsx b/src/components/page/channel/TextChannel.tsx
index e613936..67a2cc1 100644
--- a/src/components/page/channel/TextChannel.tsx
+++ b/src/components/page/channel/TextChannel.tsx
@@ -4,7 +4,7 @@ import { Avatar, AvatarFallback } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { StoredMessage } from "@/lib/types";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
 export default function TextChannel({
   appRef,
@@ -14,17 +14,37 @@ export default function TextChannel({
   const [currentMessage, setCurrentMessage] = useState("");
   const channel = appRef.current?.page?.channel;
 
+  const intersectionRef = useRef<HTMLDivElement | null>(null);
+  const chunkRef = useRef(0);
+
   useEffect(() => {
-    if (!channel) return;
+    if (!intersectionRef.current) return;
 
-    appRef.current?.server?.websocket?.send({
-      method: "GetMessages",
-      channel_id: channel.id,
-      chunk: 0,
-    });
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          console.log("Element is in view!");
+          if (!channel) return;
 
-    appRef.current?.forceRender();
-  }, [channel]);
+          appRef.current?.server?.websocket?.send({
+            method: "GetMessages",
+            channel_id: channel.id,
+            chunk: chunkRef.current,
+          });
+
+          appRef.current?.forceRender();
+          chunkRef.current += 1;
+        }
+      },
+      {
+        threshold: 0.5,
+      },
+    );
+
+    observer.observe(intersectionRef.current);
+
+    return () => observer.disconnect();
+  }, []);
 
   if (!channel) return null;
 
@@ -34,12 +54,13 @@ export default function TextChannel({
   };
 
   return (
-    <div className="flex flex-col h-full">
+    <div className="flex flex-col h-screen">
       <header className="px-3 pt-3 pb-3 text-sm text-muted-foreground border-b border-b-border">
         <h2>{channel.name}</h2>
       </header>
 
       <div className="h-full flex flex-col gap-2.5 px-3 pt-4 overflow-y-scroll">
+        <div ref={intersectionRef} />
         {appRef.current?.server?.messages[channel.id] &&
           Object.entries(appRef.current?.server?.messages[channel.id]).map(
             ([_, message]) => (

From dc7f4d2f6116c187bb10682834428af11c90f954 Mon Sep 17 00:00:00 2001
From: Klesti Selimaj <klesti.selimay@icloud.com>
Date: Fri, 21 Aug 2026 13:14:52 +0200
Subject: [PATCH 02/14] Current user author

---
 src/components/page/channel/TextChannel.tsx | 30 ++++++++++++++++++---
 1 file changed, 26 insertions(+), 4 deletions(-)

diff --git a/src/components/page/channel/TextChannel.tsx b/src/components/page/channel/TextChannel.tsx
index 67a2cc1..54c2e93 100644
--- a/src/components/page/channel/TextChannel.tsx
+++ b/src/components/page/channel/TextChannel.tsx
@@ -1,10 +1,12 @@
 import Enclave from "@/app/app";
 import { ChannelPageProps } from "@/components/page/PageView";
-import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { StoredMessage } from "@/lib/types";
+import { ClientMeta, StoredMessage } from "@/lib/types";
+import { base58 } from "@scure/base";
 import { useEffect, useRef, useState } from "react";
+import * as ed from "@noble/ed25519";
 
 export default function TextChannel({
   appRef,
@@ -90,6 +92,7 @@ export default function TextChannel({
 }
 
 export function TextMessage({
+  appRef,
   message,
 }: {
   appRef: React.RefObject<Enclave<ChannelPageProps> | null>;
@@ -100,18 +103,37 @@ export function TextMessage({
     minute: "2-digit",
   });
 
+  const [author, setAuthor] = useState<ClientMeta | null>(null);
+
+  useEffect(() => {
+    const currentAccount = appRef.current?.getAccount();
+
+    if (currentAccount) {
+      const pubKey = base58.encode(
+        ed.getPublicKey(base58.decode(currentAccount.privateKey)),
+      );
+
+      if (pubKey === message.author) {
+        setAuthor(currentAccount.meta);
+      }
+    }
+  }, []);
+
   return (
     <div className="rounded-lg flex gap-3 px-3 py-3 hover:bg-muted/40">
       <Avatar className="h-10 w-10">
+        <AvatarImage src={author?.avatar} />
+
         <AvatarFallback>
-          {message.author.slice(0, 2).toUpperCase()}
+          {author?.displayName.slice(0, 1).toUpperCase() ||
+            message.author.slice(0, 2).toUpperCase()}
         </AvatarFallback>
       </Avatar>
 
       <div className="min-w-0 flex-1">
         <div className="flex items-baseline gap-2">
           <span className="text-sm font-medium">
-            {message.author.slice(0, 8)}
+            {author?.displayName || message.author.slice(0, 8)}
           </span>
           <span className="text-xs text-muted-foreground">{time}</span>
         </div>

From ff36a84a23dcba0c5caaafe5b59e49b457ca2879 Mon Sep 17 00:00:00 2001
From: Klesti Selimaj <klesti.selimay@icloud.com>
Date: Fri, 21 Aug 2026 15:06:20 +0200
Subject: [PATCH 03/14] idk[

---
 src/components/page/channel/TextChannel.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/page/channel/TextChannel.tsx b/src/components/page/channel/TextChannel.tsx
index 54c2e93..17c4ce5 100644
--- a/src/components/page/channel/TextChannel.tsx
+++ b/src/components/page/channel/TextChannel.tsx
@@ -56,7 +56,7 @@ export default function TextChannel({
   };
 
   return (
-    <div className="flex flex-col h-screen">
+    <div className="flex flex-col h-screen gap-2">
       <header className="px-3 pt-3 pb-3 text-sm text-muted-foreground border-b border-b-border">
         <h2>{channel.name}</h2>
       </header>
@@ -131,7 +131,7 @@ export function TextMessage({
       </Avatar>
 
       <div className="min-w-0 flex-1">
-        <div className="flex items-baseline gap-2">
+        <div className="flex items-center gap-2">
           <span className="text-sm font-medium">
             {author?.displayName || message.author.slice(0, 8)}
           </span>

From 8b80ecb8a80d6cde72c352ed1570de449d4d6d2a Mon Sep 17 00:00:00 2001
From: Klesti Selimaj <klesti.selimay@icloud.com>
Date: Sat, 22 Aug 2026 10:35:34 +0200
Subject: [PATCH 04/14] Auto scroll

---
 src/components/page/channel/TextChannel.tsx | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/page/channel/TextChannel.tsx b/src/components/page/channel/TextChannel.tsx
index 17c4ce5..f20e413 100644
--- a/src/components/page/channel/TextChannel.tsx
+++ b/src/components/page/channel/TextChannel.tsx
@@ -50,6 +50,8 @@ export default function TextChannel({
 
   if (!channel) return null;
 
+  const messages = appRef.current?.server?.messages[channel.id];
+
   const sendMessage = () => {
     appRef.current?.sendMessage(currentMessage, channel.id);
     setCurrentMessage("");
@@ -61,14 +63,14 @@ export default function TextChannel({
         <h2>{channel.name}</h2>
       </header>
 
-      <div className="h-full flex flex-col gap-2.5 px-3 pt-4 overflow-y-scroll">
+      <div className="h-full flex flex-col-reverse gap-2.5 px-3 pt-4 overflow-y-scroll">
         <div ref={intersectionRef} />
-        {appRef.current?.server?.messages[channel.id] &&
-          Object.entries(appRef.current?.server?.messages[channel.id]).map(
-            ([_, message]) => (
+        {messages &&
+          Object.entries(messages)
+            .sort((a, b) => b[1].timestamp - a[1].timestamp)
+            .map(([_, message]) => (
               <TextMessage key={message.id} appRef={appRef} message={message} />
-            ),
-          )}
+            ))}
       </div>
 
       <div className="pb-6 px-4 flex flex-row gap-3">

From 21261098dc25f20af5b402e4add6f3f973b61360 Mon Sep 17 00:00:00 2001
From: Klesti Selimaj <klesti.selimay@icloud.com>
Date: Sat, 22 Aug 2026 10:58:34 +0200
Subject: [PATCH 05/14] Message verification

---
 src/components/page/channel/TextChannel.tsx | 35 ++++++++++++++++-----
 1 file changed, 28 insertions(+), 7 deletions(-)

diff --git a/src/components/page/channel/TextChannel.tsx b/src/components/page/channel/TextChannel.tsx
index f20e413..33638e2 100644
--- a/src/components/page/channel/TextChannel.tsx
+++ b/src/components/page/channel/TextChannel.tsx
@@ -7,6 +7,7 @@ import { ClientMeta, StoredMessage } from "@/lib/types";
 import { base58 } from "@scure/base";
 import { useEffect, useRef, useState } from "react";
 import * as ed from "@noble/ed25519";
+import { CircleXIcon } from "lucide-react";
 
 export default function TextChannel({
   appRef,
@@ -64,13 +65,13 @@ export default function TextChannel({
       </header>
 
       <div className="h-full flex flex-col-reverse gap-2.5 px-3 pt-4 overflow-y-scroll">
-        <div ref={intersectionRef} />
         {messages &&
           Object.entries(messages)
             .sort((a, b) => b[1].timestamp - a[1].timestamp)
             .map(([_, message]) => (
               <TextMessage key={message.id} appRef={appRef} message={message} />
             ))}
+        <div ref={intersectionRef} />
       </div>
 
       <div className="pb-6 px-4 flex flex-row gap-3">
@@ -107,15 +108,32 @@ export function TextMessage({
 
   const [author, setAuthor] = useState<ClientMeta | null>(null);
 
+  const [verified, setVerified] = useState(true);
+
   useEffect(() => {
+    const serverPubKey =
+      appRef.current?.server?.serverPublicKey &&
+      base58.encode(appRef.current?.server?.serverPublicKey);
+
+    if (!serverPubKey) return;
+
+    const authorPubKey = base58.decode(message.author);
+
+    setVerified(
+      ed.verify(
+        base58.decode(message.signature),
+        new TextEncoder().encode(
+          `${message.timestamp}@${serverPubKey}@${message.content}`,
+        ),
+        authorPubKey,
+      ),
+    );
+
     const currentAccount = appRef.current?.getAccount();
-
     if (currentAccount) {
-      const pubKey = base58.encode(
-        ed.getPublicKey(base58.decode(currentAccount.privateKey)),
-      );
+      const pubKey = ed.getPublicKey(base58.decode(currentAccount.privateKey));
 
-      if (pubKey === message.author) {
+      if (pubKey === authorPubKey) {
         setAuthor(currentAccount.meta);
       }
     }
@@ -134,7 +152,10 @@ export function TextMessage({
 
       <div className="min-w-0 flex-1">
         <div className="flex items-center gap-2">
-          <span className="text-sm font-medium">
+          <span className="text-sm font-medium flex items-center gap-1">
+            {!verified && (
+              <CircleXIcon className="h-3.5 w-3.5 text-destructive" />
+            )}
             {author?.displayName || message.author.slice(0, 8)}
           </span>
           <span className="text-xs text-muted-foreground">{time}</span>

From a9cf2d4c70885c9f2adafdf09283e7dc3a6a8279 Mon Sep 17 00:00:00 2001
From: Klesti Selimaj <klesti.selimay@icloud.com>
Date: Sat, 22 Aug 2026 11:06:10 +0200
Subject: [PATCH 06/14] Fix current account

---
 src/components/page/channel/TextChannel.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/page/channel/TextChannel.tsx b/src/components/page/channel/TextChannel.tsx
index 33638e2..fd2d0b4 100644
--- a/src/components/page/channel/TextChannel.tsx
+++ b/src/components/page/channel/TextChannel.tsx
@@ -131,9 +131,11 @@ export function TextMessage({
 
     const currentAccount = appRef.current?.getAccount();
     if (currentAccount) {
-      const pubKey = ed.getPublicKey(base58.decode(currentAccount.privateKey));
+      const accountPubKey = ed.getPublicKey(
+        base58.decode(currentAccount.privateKey),
+      );
 
-      if (pubKey === authorPubKey) {
+      if (base58.encode(accountPubKey) === message.author) {
         setAuthor(currentAccount.meta);
       }
     }

From 78f5544952d3db50503e8426978ed524a836dccf Mon Sep 17 00:00:00 2001
From: Klesti Selimaj <klesti.selimay@icloud.com>
Date: Sat, 22 Aug 2026 11:14:51 +0200
Subject: [PATCH 07/14] Improved serverlist

---
 src/components/view/ServerList.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/view/ServerList.tsx b/src/components/view/ServerList.tsx
index ae84df4..2e1da81 100644
--- a/src/components/view/ServerList.tsx
+++ b/src/components/view/ServerList.tsx
@@ -1,6 +1,7 @@
 import Enclave from "@/app/app";
 import { getHTTPUrl, saveServerList } from "@/lib/serverList";
 import { AddServerDialog } from "../dialog/AddServerDialog";
+import { cn } from "@/lib/utils";
 
 export default function ServerList({
   appRef,
@@ -16,11 +17,11 @@ export default function ServerList({
           <img
             src={getHTTPUrl(hostname, server.isSecure, "/icon")}
             key={hostname}
-            className={
-              hostname === appRef.current?.server?.hostname
-                ? "rounded-lg"
-                : "rounded-full"
-            }
+            className={cn(
+              "rounded-lg",
+              hostname === appRef.current?.server?.hostname &&
+                "border-primary border border-2",
+            )}
 
             onClick={async () => {
               if (!appRef.current) {

From 546670b9d2c059f3962b5e8e9f25fe7508ca4c9a Mon Sep 17 00:00:00 2001
From: Klesti Selimaj <klesti.selimay@icloud.com>
Date: Sat, 22 Aug 2026 12:14:11 +0200
Subject: [PATCH 08/14] Get users

---
 src/app/app.ts      | 30 +++++++++++++++++++++++-------
 src/app/protocol.ts |  8 ++++++++
 src/app/server.ts   | 14 +++++++++++++-
 3 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/src/app/app.ts b/src/app/app.ts
index b79a940..ca8c339 100644
--- a/src/app/app.ts
+++ b/src/app/app.ts
@@ -165,14 +165,30 @@ export default class Enclave<P = Page> {
         return;
 
       case "Messages":
-        Object.entries(msg.messages).forEach(([channelId, messages]) => {
-          if (!server.messages[channelId]) {
-            server.messages[channelId] = {};
-          }
+        const authors = Object.entries(msg.messages).flatMap(
+          ([channelId, messages]) => {
+            if (!server.messages[channelId]) {
+              server.messages[channelId] = {};
+            }
 
-          messages.forEach((message) => {
-            server.messages[channelId][message.id] = message;
-          });
+            return messages.map((message) => {
+              server.messages[channelId][message.id] = message;
+              return message.author;
+            });
+          },
+        );
+
+        const dedupedAuthors = Array.from(new Set(authors));
+
+        this.server?.getUsers(dedupedAuthors);
+
+        this.forceRender();
+
+        return;
+
+      case "Users":
+        Object.entries(msg.users).forEach(([pubKey, user]) => {
+          server.users[pubKey] = user;
         });
 
         this.forceRender();
diff --git a/src/app/protocol.ts b/src/app/protocol.ts
index ed48003..69b5777 100644
--- a/src/app/protocol.ts
+++ b/src/app/protocol.ts
@@ -15,6 +15,10 @@ export type ClientMethod =
   | {
       method: "Messages";
       messages: Record<string, StoredMessage[]>;
+    }
+  | {
+      method: "Users";
+      users: Record<string, ClientMeta>;
     };
 
 export type ServerMethod =
@@ -41,4 +45,8 @@ export type ServerMethod =
       method: "GetMessages";
       channel_id: string;
       chunk: number;
+    }
+  | {
+      method: "GetUsers";
+      pubkeys: string[];
     };
diff --git a/src/app/server.ts b/src/app/server.ts
index be0d8fe..37ed228 100644
--- a/src/app/server.ts
+++ b/src/app/server.ts
@@ -3,7 +3,7 @@ import * as ed from "@noble/ed25519";
 import EnclaveWebSocket from "./ws";
 import { sha512 } from "@noble/hashes/sha2.js";
 import { getWSUrl } from "@/lib/serverList";
-import { ServerMeta, StoredMessage } from "@/lib/types";
+import { ClientMeta, ServerMeta, StoredMessage } from "@/lib/types";
 
 ed.hashes.sha512 = sha512;
 
@@ -30,11 +30,13 @@ export default class EnclaveServer {
   public websocket?: EnclaveWebSocket;
   public meta?: ServerMeta;
   public messages: Record<string, Record<string, StoredMessage>>;
+  public users: Record<string, ClientMeta | null>;
 
   public constructor(hostname: string, isSecure: boolean) {
     this.hostname = hostname;
     this.isSecure = isSecure;
     this.messages = {};
+    this.users = {};
   }
 
   public disconnect() {
@@ -94,4 +96,14 @@ export default class EnclaveServer {
       throw Error("Invalid signature");
     }
   }
+
+  public getUsers(pubkeys: string[]) {
+    const filteredPubkeys = pubkeys.filter((pubkey) => {
+      const exists = this.users[pubkey] !== undefined;
+      if (!exists) this.users[pubkey] = null;
+      return !exists;
+    });
+
+    this.websocket?.send({ method: "GetUsers", pubkeys: filteredPubkeys });
+  }
 }

From b4f9210486ea411a5d5faceb0ec8082fc155d6b9 Mon Sep 17 00:00:00 2001
From: Klesti Selimaj <klesti.selimay@icloud.com>
Date: Sat, 22 Aug 2026 12:19:06 +0200
Subject: [PATCH 09/14] Author

---
 src/components/page/channel/TextChannel.tsx | 13 +------------
 1 file changed, 1 insertion(+), 12 deletions(-)

diff --git a/src/components/page/channel/TextChannel.tsx b/src/components/page/channel/TextChannel.tsx
index fd2d0b4..af8c0c4 100644
--- a/src/components/page/channel/TextChannel.tsx
+++ b/src/components/page/channel/TextChannel.tsx
@@ -106,7 +106,7 @@ export function TextMessage({
     minute: "2-digit",
   });
 
-  const [author, setAuthor] = useState<ClientMeta | null>(null);
+  const author = appRef.current?.server?.users[message.author];
 
   const [verified, setVerified] = useState(true);
 
@@ -128,17 +128,6 @@ export function TextMessage({
         authorPubKey,
       ),
     );
-
-    const currentAccount = appRef.current?.getAccount();
-    if (currentAccount) {
-      const accountPubKey = ed.getPublicKey(
-        base58.decode(currentAccount.privateKey),
-      );
-
-      if (base58.encode(accountPubKey) === message.author) {
-        setAuthor(currentAccount.meta);
-      }
-    }
   }, []);
 
   return (

From 0dc30233e944ca4de32ce3e13b39e2a483c6aa65 Mon Sep 17 00:00:00 2001
From: Klesti Selimaj <klesti.selimay@icloud.com>
Date: Sat, 22 Aug 2026 12:39:23 +0200
Subject: [PATCH 10/14] Msg delete and edit protocol and events

---
 src/app/app.ts      | 10 ++++++++++
 src/app/protocol.ts | 22 ++++++++++++++++++++++
 2 files changed, 32 insertions(+)

diff --git a/src/app/app.ts b/src/app/app.ts
index ca8c339..1150284 100644
--- a/src/app/app.ts
+++ b/src/app/app.ts
@@ -194,6 +194,16 @@ export default class Enclave<P = Page> {
         this.forceRender();
 
         return;
+
+      case "MessageDeleted":
+        delete server.messages[msg.channel_id][msg.message_id];
+        this.forceRender();
+        return;
+
+      case "MessageEdited":
+        server.messages[msg.channel_id][msg.message.id] = msg.message;
+        this.forceRender();
+        return;
     }
   }
 }
diff --git a/src/app/protocol.ts b/src/app/protocol.ts
index 69b5777..0d1c204 100644
--- a/src/app/protocol.ts
+++ b/src/app/protocol.ts
@@ -19,6 +19,16 @@ export type ClientMethod =
   | {
       method: "Users";
       users: Record<string, ClientMeta>;
+    }
+  | {
+      method: "MessageEdited";
+      channel_id: string;
+      message: StoredMessage;
+    }
+  | {
+      method: "MessageDeleted";
+      channel_id: string;
+      message_id: string;
     };
 
 export type ServerMethod =
@@ -49,4 +59,16 @@ export type ServerMethod =
   | {
       method: "GetUsers";
       pubkeys: string[];
+    }
+  | {
+      method: "EditMessage";
+      message_id: string;
+      channel_id: string;
+      content: string;
+      signature: string;
+    }
+  | {
+      method: "DeleteMessage";
+      channel_id: string;
+      message_id: string;
     };

From e5ffc51189715d7866ebdf45afd6e0a5d6bb3a8a Mon Sep 17 00:00:00 2001
From: Klesti Selimaj <klesti.selimay@icloud.com>
Date: Sat, 22 Aug 2026 12:54:38 +0200
Subject: [PATCH 11/14] Msg delete

---
 src/components/page/channel/TextChannel.tsx | 72 +++++++++++++++++----
 src/lib/types.ts                            |  1 +
 2 files changed, 62 insertions(+), 11 deletions(-)

diff --git a/src/components/page/channel/TextChannel.tsx b/src/components/page/channel/TextChannel.tsx
index af8c0c4..55ccff4 100644
--- a/src/components/page/channel/TextChannel.tsx
+++ b/src/components/page/channel/TextChannel.tsx
@@ -3,11 +3,17 @@ import { ChannelPageProps } from "@/components/page/PageView";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { ClientMeta, StoredMessage } from "@/lib/types";
+import { Channel, StoredMessage } from "@/lib/types";
 import { base58 } from "@scure/base";
 import { useEffect, useRef, useState } from "react";
 import * as ed from "@noble/ed25519";
-import { CircleXIcon } from "lucide-react";
+import { CircleXIcon, PencilIcon, Trash2Icon } from "lucide-react";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuTrigger,
+} from "@/components/ui/context-menu";
 
 export default function TextChannel({
   appRef,
@@ -20,6 +26,13 @@ export default function TextChannel({
   const intersectionRef = useRef<HTMLDivElement | null>(null);
   const chunkRef = useRef(0);
 
+  const account = appRef.current?.getAccount();
+
+  const userPubKey =
+    (account &&
+      base58.encode(ed.getPublicKey(base58.decode(account.privateKey)))) ||
+    null;
+
   useEffect(() => {
     if (!intersectionRef.current) return;
 
@@ -69,7 +82,13 @@ export default function TextChannel({
           Object.entries(messages)
             .sort((a, b) => b[1].timestamp - a[1].timestamp)
             .map(([_, message]) => (
-              <TextMessage key={message.id} appRef={appRef} message={message} />
+              <TextMessage
+                key={message.id}
+                appRef={appRef}
+                message={message}
+                channel={channel}
+                userPubKey={userPubKey}
+              />
             ))}
         <div ref={intersectionRef} />
       </div>
@@ -97,28 +116,28 @@ export default function TextChannel({
 export function TextMessage({
   appRef,
   message,
+
+  channel,
+  userPubKey,
 }: {
   appRef: React.RefObject<Enclave<ChannelPageProps> | null>;
   message: StoredMessage;
+  channel: Channel;
+  userPubKey: string | null;
 }) {
   const time = new Date(message.timestamp).toLocaleTimeString([], {
     hour: "numeric",
     minute: "2-digit",
   });
-
   const author = appRef.current?.server?.users[message.author];
-
   const [verified, setVerified] = useState(true);
 
   useEffect(() => {
     const serverPubKey =
       appRef.current?.server?.serverPublicKey &&
       base58.encode(appRef.current?.server?.serverPublicKey);
-
     if (!serverPubKey) return;
-
     const authorPubKey = base58.decode(message.author);
-
     setVerified(
       ed.verify(
         base58.decode(message.signature),
@@ -130,17 +149,25 @@ export function TextMessage({
     );
   }, []);
 
-  return (
+  const isOwnMessage = message.author === userPubKey;
+
+  function handleDelete() {
+    appRef.current?.server?.websocket?.send({
+      method: "DeleteMessage",
+      message_id: message.id,
+      channel_id: channel.id,
+    });
+  }
+
+  const content = (
     <div className="rounded-lg flex gap-3 px-3 py-3 hover:bg-muted/40">
       <Avatar className="h-10 w-10">
         <AvatarImage src={author?.avatar} />
-
         <AvatarFallback>
           {author?.displayName.slice(0, 1).toUpperCase() ||
             message.author.slice(0, 2).toUpperCase()}
         </AvatarFallback>
       </Avatar>
-
       <div className="min-w-0 flex-1">
         <div className="flex items-center gap-2">
           <span className="text-sm font-medium flex items-center gap-1">
@@ -150,6 +177,9 @@ export function TextMessage({
             {author?.displayName || message.author.slice(0, 8)}
           </span>
           <span className="text-xs text-muted-foreground">{time}</span>
+          {message.is_edited && (
+            <span className="text-xs text-muted-foreground">(edited)</span>
+          )}
         </div>
         <p className="whitespace-pre-wrap break-words text-sm leading-snug">
           {message.content}
@@ -157,4 +187,24 @@ export function TextMessage({
       </div>
     </div>
   );
+
+  if (!isOwnMessage) {
+    return content;
+  }
+
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger>{content}</ContextMenuTrigger>
+      <ContextMenuContent>
+        <ContextMenuItem onClick={() => {}}>
+          <PencilIcon className="mr-2 h-4 w-4" />
+          Edit
+        </ContextMenuItem>
+        <ContextMenuItem onClick={handleDelete} variant="destructive">
+          <Trash2Icon className="mr-2 h-4 w-4" />
+          Delete
+        </ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
+  );
 }
diff --git a/src/lib/types.ts b/src/lib/types.ts
index 1c77ea6..647e08e 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -18,6 +18,7 @@ export interface MessageData {
 export interface StoredMessage extends MessageData {
   id: string;
   author: string;
+  is_edited: boolean;
 }
 
 export type Channel = { id: string; name: string } & ChannelKind;

From f7b7b5b637be0712b0157b3dfe49094c4c6b5eb7 Mon Sep 17 00:00:00 2001
From: Klesti Selimaj <klesti.selimay@icloud.com>
Date: Sat, 22 Aug 2026 13:03:25 +0200
Subject: [PATCH 12/14] Msg edit

---
 src/components/page/channel/TextChannel.tsx | 116 ++++++++++++++++++--
 1 file changed, 104 insertions(+), 12 deletions(-)

diff --git a/src/components/page/channel/TextChannel.tsx b/src/components/page/channel/TextChannel.tsx
index 55ccff4..27c2151 100644
--- a/src/components/page/channel/TextChannel.tsx
+++ b/src/components/page/channel/TextChannel.tsx
@@ -14,6 +14,7 @@ import {
   ContextMenuItem,
   ContextMenuTrigger,
 } from "@/components/ui/context-menu";
+import { Textarea } from "@/components/ui/textarea";
 
 export default function TextChannel({
   appRef,
@@ -28,10 +29,9 @@ export default function TextChannel({
 
   const account = appRef.current?.getAccount();
 
-  const userPubKey =
-    (account &&
-      base58.encode(ed.getPublicKey(base58.decode(account.privateKey)))) ||
-    null;
+  const secretKey = (account && base58.decode(account.privateKey)) || null;
+
+  const userPubKey = secretKey && base58.encode(ed.getPublicKey(secretKey));
 
   useEffect(() => {
     if (!intersectionRef.current) return;
@@ -88,6 +88,7 @@ export default function TextChannel({
                 message={message}
                 channel={channel}
                 userPubKey={userPubKey}
+                secretKey={secretKey}
               />
             ))}
         <div ref={intersectionRef} />
@@ -116,28 +117,36 @@ export default function TextChannel({
 export function TextMessage({
   appRef,
   message,
-
   channel,
   userPubKey,
+  secretKey,
 }: {
   appRef: React.RefObject<Enclave<ChannelPageProps> | null>;
   message: StoredMessage;
   channel: Channel;
   userPubKey: string | null;
+  secretKey: Uint8Array | null;
 }) {
   const time = new Date(message.timestamp).toLocaleTimeString([], {
     hour: "numeric",
     minute: "2-digit",
   });
+
   const author = appRef.current?.server?.users[message.author];
+
   const [verified, setVerified] = useState(true);
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState(message.content);
 
   useEffect(() => {
     const serverPubKey =
       appRef.current?.server?.serverPublicKey &&
-      base58.encode(appRef.current?.server?.serverPublicKey);
+      base58.encode(appRef.current.server.serverPublicKey);
+
     if (!serverPubKey) return;
+
     const authorPubKey = base58.decode(message.author);
+
     setVerified(
       ed.verify(
         base58.decode(message.signature),
@@ -159,6 +168,56 @@ export function TextMessage({
     });
   }
 
+  function startEditing() {
+    setDraft(message.content);
+    setEditing(true);
+  }
+
+  function cancelEditing() {
+    setDraft(message.content);
+    setEditing(false);
+  }
+
+  function handleSave() {
+    const content = draft.trim();
+
+    if (
+      !content ||
+      content === message.content ||
+      !secretKey ||
+      !appRef.current?.server?.serverPublicKey
+    ) {
+      cancelEditing();
+      return;
+    }
+
+    const signature = new TextEncoder().encode(
+      `${message.timestamp}@${base58.encode(appRef.current.server?.serverPublicKey)}@${content}`,
+    );
+
+    appRef.current?.server?.websocket?.send({
+      method: "EditMessage",
+      message_id: message.id,
+      channel_id: channel.id,
+      signature: base58.encode(ed.sign(signature, secretKey)),
+      content,
+    });
+
+    setEditing(false);
+  }
+
+  function handleKeyDown(e: React.KeyboardEvent<HTMLTextAreaElement>) {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      cancelEditing();
+    }
+
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSave();
+    }
+  }
+
   const content = (
     <div className="rounded-lg flex gap-3 px-3 py-3 hover:bg-muted/40">
       <Avatar className="h-10 w-10">
@@ -168,6 +227,7 @@ export function TextMessage({
             message.author.slice(0, 2).toUpperCase()}
         </AvatarFallback>
       </Avatar>
+
       <div className="min-w-0 flex-1">
         <div className="flex items-center gap-2">
           <span className="text-sm font-medium flex items-center gap-1">
@@ -176,30 +236,62 @@ export function TextMessage({
             )}
             {author?.displayName || message.author.slice(0, 8)}
           </span>
+
           <span className="text-xs text-muted-foreground">{time}</span>
-          {message.is_edited && (
+
+          {message.is_edited && !editing && (
             <span className="text-xs text-muted-foreground">(edited)</span>
           )}
         </div>
-        <p className="whitespace-pre-wrap break-words text-sm leading-snug">
-          {message.content}
-        </p>
+
+        {editing ? (
+          <div className="mt-2">
+            <Textarea
+              value={draft}
+              onChange={(e) => setDraft(e.target.value)}
+              onKeyDown={handleKeyDown}
+              autoFocus
+              className="min-h-20 resize-none"
+            />
+
+            <div className="mt-2 flex items-center gap-2">
+              <Button size="sm" onClick={handleSave}>
+                Save
+              </Button>
+
+              <Button size="sm" variant="ghost" onClick={cancelEditing}>
+                Cancel
+              </Button>
+
+              <span className="text-xs text-muted-foreground">
+                Enter to save · Shift + Enter for new line · Esc to cancel
+              </span>
+            </div>
+          </div>
+        ) : (
+          <p className="whitespace-pre-wrap break-words text-sm leading-snug">
+            {message.content}
+          </p>
+        )}
       </div>
     </div>
   );
 
-  if (!isOwnMessage) {
+  // Don't allow the context menu while editing
+  if (!isOwnMessage || editing) {
     return content;
   }
 
   return (
     <ContextMenu>
       <ContextMenuTrigger>{content}</ContextMenuTrigger>
+
       <ContextMenuContent>
-        <ContextMenuItem onClick={() => {}}>
+        <ContextMenuItem onClick={startEditing}>
           <PencilIcon className="mr-2 h-4 w-4" />
           Edit
         </ContextMenuItem>
+
         <ContextMenuItem onClick={handleDelete} variant="destructive">
           <Trash2Icon className="mr-2 h-4 w-4" />
           Delete

From 5245e3ba715854d0aa991c5f258de42f5c5dac3c Mon Sep 17 00:00:00 2001
From: Klesti Selimaj <klesti.selimay@icloud.com>
Date: Sat, 22 Aug 2026 13:07:39 +0200
Subject: [PATCH 13/14] components

---
 src/components/ui/context-menu.tsx | 269 +++++++++++++++++++++++++++++
 src/components/ui/textarea.tsx     |  18 ++
 2 files changed, 287 insertions(+)
 create mode 100644 src/components/ui/context-menu.tsx
 create mode 100644 src/components/ui/textarea.tsx

diff --git a/src/components/ui/context-menu.tsx b/src/components/ui/context-menu.tsx
new file mode 100644
index 0000000..86840fa
--- /dev/null
+++ b/src/components/ui/context-menu.tsx
@@ -0,0 +1,269 @@
+import * as React from "react"
+import { ContextMenu as ContextMenuPrimitive } from "@base-ui/react/context-menu"
+
+import { cn } from "@/lib/utils"
+import { ChevronRightIcon, CheckIcon } from "lucide-react"
+
+function ContextMenu({ ...props }: ContextMenuPrimitive.Root.Props) {
+  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />
+}
+
+function ContextMenuPortal({ ...props }: ContextMenuPrimitive.Portal.Props) {
+  return (
+    <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
+  )
+}
+
+function ContextMenuTrigger({
+  className,
+  ...props
+}: ContextMenuPrimitive.Trigger.Props) {
+  return (
+    <ContextMenuPrimitive.Trigger
+      data-slot="context-menu-trigger"
+      className={cn("select-none", className)}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuContent({
+  className,
+  align = "start",
+  alignOffset = 4,
+  side = "right",
+  sideOffset = 0,
+  ...props
+}: ContextMenuPrimitive.Popup.Props &
+  Pick<
+    ContextMenuPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset"
+  >) {
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.Positioner
+        className="isolate z-50 outline-none"
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+      >
+        <ContextMenuPrimitive.Popup
+          data-slot="context-menu-content"
+          className={cn("z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+          {...props}
+        />
+      </ContextMenuPrimitive.Positioner>
+    </ContextMenuPrimitive.Portal>
+  )
+}
+
+function ContextMenuGroup({ ...props }: ContextMenuPrimitive.Group.Props) {
+  return (
+    <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
+  )
+}
+
+function ContextMenuLabel({
+  className,
+  inset,
+  ...props
+}: ContextMenuPrimitive.GroupLabel.Props & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.GroupLabel
+      data-slot="context-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: ContextMenuPrimitive.Item.Props & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <ContextMenuPrimitive.Item
+      data-slot="context-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "group/context-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuSub({ ...props }: ContextMenuPrimitive.SubmenuRoot.Props) {
+  return (
+    <ContextMenuPrimitive.SubmenuRoot data-slot="context-menu-sub" {...props} />
+  )
+}
+
+function ContextMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: ContextMenuPrimitive.SubmenuTrigger.Props & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.SubmenuTrigger
+      data-slot="context-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto" />
+    </ContextMenuPrimitive.SubmenuTrigger>
+  )
+}
+
+function ContextMenuSubContent({
+  ...props
+}: React.ComponentProps<typeof ContextMenuContent>) {
+  return (
+    <ContextMenuContent
+      data-slot="context-menu-sub-content"
+      className="shadow-lg"
+      side="right"
+      {...props}
+    />
+  )
+}
+
+function ContextMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  inset,
+  ...props
+}: ContextMenuPrimitive.CheckboxItem.Props & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.CheckboxItem
+      data-slot="context-menu-checkbox-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute right-2">
+        <ContextMenuPrimitive.CheckboxItemIndicator>
+          <CheckIcon
+          />
+        </ContextMenuPrimitive.CheckboxItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.CheckboxItem>
+  )
+}
+
+function ContextMenuRadioGroup({
+  ...props
+}: ContextMenuPrimitive.RadioGroup.Props) {
+  return (
+    <ContextMenuPrimitive.RadioGroup
+      data-slot="context-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function ContextMenuRadioItem({
+  className,
+  children,
+  inset,
+  ...props
+}: ContextMenuPrimitive.RadioItem.Props & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.RadioItem
+      data-slot="context-menu-radio-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute right-2">
+        <ContextMenuPrimitive.RadioItemIndicator>
+          <CheckIcon
+          />
+        </ContextMenuPrimitive.RadioItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.RadioItem>
+  )
+}
+
+function ContextMenuSeparator({
+  className,
+  ...props
+}: ContextMenuPrimitive.Separator.Props) {
+  return (
+    <ContextMenuPrimitive.Separator
+      data-slot="context-menu-separator"
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="context-menu-shortcut"
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground group-focus/context-menu-item:text-accent-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+}
diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
new file mode 100644
index 0000000..04d27f7
--- /dev/null
+++ b/src/components/ui/textarea.tsx
@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }

From bb8f80457a5ffc8d48b680ae3440cc20ddf19aaf Mon Sep 17 00:00:00 2001
From: Klesti Selimaj <klesti.selimay@icloud.com>
Date: Sat, 22 Aug 2026 13:15:44 +0200
Subject: [PATCH 14/14] Disable scrollbar

---
 src/components/page/channel/TextChannel.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/page/channel/TextChannel.tsx b/src/components/page/channel/TextChannel.tsx
index 27c2151..efb70cf 100644
--- a/src/components/page/channel/TextChannel.tsx
+++ b/src/components/page/channel/TextChannel.tsx
@@ -77,7 +77,7 @@ export default function TextChannel({
         <h2>{channel.name}</h2>
       </header>
 
-      <div className="h-full flex flex-col-reverse gap-2.5 px-3 pt-4 overflow-y-scroll">
+      <div className="h-full flex flex-col-reverse gap-2.5 px-3 pt-4 overflow-y-scroll scrollbar-none [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
         {messages &&
           Object.entries(messages)
             .sort((a, b) => b[1].timestamp - a[1].timestamp)