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] 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">