From f780a8eb3ee6b6eeb0144436e9e3304e5b11c662 Mon Sep 17 00:00:00 2001
From: Leo dev <klesti.selimay@icloud.com>
Date: Mon, 22 Dec 2025 20:32:52 +0100
Subject: [PATCH] Message chunk loading

---
 src/components/channel/MessageBox.tsx | 32 +++++++++++++++++++++++++++
 src/lib/auth.ts                       | 18 +++++++--------
 src/types/protocol.ts                 |  3 ++-
 3 files changed, 43 insertions(+), 10 deletions(-)

diff --git a/src/components/channel/MessageBox.tsx b/src/components/channel/MessageBox.tsx
index 1ccbb59..26999d0 100644
--- a/src/components/channel/MessageBox.tsx
+++ b/src/components/channel/MessageBox.tsx
@@ -286,6 +286,37 @@ export default function MessageBox({
 }) {
   const [text, setText] = useState("");
 
+  const ref = useRef<HTMLDivElement | null>(null);
+  const chunkRef = useRef(0);
+
+  useEffect(() => {
+    if (!ref.current) return;
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          console.log("Element is in view!");
+          if (!app.currentChannel) return;
+          sendRequest({
+            type: "load_chunk",
+            params: {
+              channel_id: app.currentChannel.id,
+              chunk_id: chunkRef.current,
+            },
+          });
+          chunkRef.current += 1;
+        }
+      },
+      {
+        threshold: 0.5,
+      }
+    );
+
+    observer.observe(ref.current);
+
+    return () => observer.disconnect();
+  }, []);
+
   const sendMessage = () => {
     if (!app.currentChannel) {
       return;
@@ -346,6 +377,7 @@ export default function MessageBox({
               />
             </motion.div>
           ))}
+          <div ref={ref} />
         </AnimatePresence>
       </div>
       <footer className="flex gap-3 pr-5 w-full h-max">
diff --git a/src/lib/auth.ts b/src/lib/auth.ts
index 4cc6351..df7c3a4 100644
--- a/src/lib/auth.ts
+++ b/src/lib/auth.ts
@@ -66,15 +66,15 @@ export default async function auth({
 
     switch (data.type) {
       case "authenticated":
-        ws.send(
-          JSON.stringify({
-            type: "load_chunk",
-            params: {
-              channel_id: "general",
-              chunk_id: 0,
-            },
-          })
-        );
+        // ws.send(
+        //   JSON.stringify({
+        //     type: "load_chunk",
+        //     params: {
+        //       channel_id: "general",
+        //       chunk_id: 0,
+        //     },
+        //   })
+        // );
         break;
 
       case "message_create":
diff --git a/src/types/protocol.ts b/src/types/protocol.ts
index fd8cffe..d40a05f 100644
--- a/src/types/protocol.ts
+++ b/src/types/protocol.ts
@@ -6,4 +6,5 @@ export interface MessageType<T = string, P = object> {
 export type ClientMessage =
   | MessageType<"send_message", { channel_id: string; contents: string }>
   | MessageType<"delete_message", { message_id: number }>
-  | MessageType<"edit_message", { message_id: number; new_contents: string }>;
+  | MessageType<"edit_message", { message_id: number; new_contents: string }>
+  | MessageType<"load_chunk", { channel_id: string; chunk_id: number }>;