feat: scroll-to-top loads older messages

Both ChatArea and DMChat now detect when you scroll near the top
and fetch the next 50 older messages. Scroll position is preserved
so you don't lose your place. Works for both server channels and
DM conversations.

web/src/components/DMChat.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState, useCallback } from "react";
 import { useParams } from "react-router-dom";
 import { useConversationStore, type ConversationMessage } from "../stores/conversation.ts";
 import { useAuthStore } from "../stores/auth.ts";
@@ -36,15 +36,31 @@ export function DMChat() {
   const conversations = useConversationStore((s) => s.conversations);
   const messagesByConv = useConversationStore((s) => s.messagesByConversation);
   const fetchMessages = useConversationStore((s) => s.fetchMessages);
+  const fetchOlderMessages = useConversationStore((s) => s.fetchOlderMessages);
+  const isLoadingOlder = useConversationStore((s) => s.isLoadingOlder);
   const sendMessage = useConversationStore((s) => s.sendMessage);
   const fetchConversations = useConversationStore((s) => s.fetchConversations);
   const currentUser = useAuthStore((s) => s.user);
   const [input, setInput] = useState("");
   const [error, setError] = useState<string | null>(null);
   const bottomRef = useRef<HTMLDivElement>(null);
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
 
   const id = conversationId || activeId;
   const conversation = conversations.find((c) => c.id === id);
+
+  const handleScroll = useCallback(() => {
+    const el = scrollContainerRef.current;
+    if (!el || !id || isLoadingOlder) return;
+    if (el.scrollTop < 100) {
+      const prevHeight = el.scrollHeight;
+      fetchOlderMessages(id).then(() => {
+        requestAnimationFrame(() => {
+          el.scrollTop = el.scrollHeight - prevHeight;
+        });
+      });
+    }
+  }, [id, isLoadingOlder, fetchOlderMessages]);
   const messages = id ? messagesByConv[id] || [] : [];
 
   useEffect(() => {
@@ -91,7 +107,8 @@ export function DMChat() {
       <div className="terminal-border border-t-0 border-x-0 px-3 py-2 text-gb-fg-s">
         @ {title}
       </div>
-      <div className="flex-1 overflow-y-auto p-3 space-y-1 font-mono text-sm">
+      <div ref={scrollContainerRef} onScroll={handleScroll} className="flex-1 overflow-y-auto p-3 space-y-1 font-mono text-sm">
+        {isLoadingOlder && <p className="text-center text-gb-fg-f text-xs">[loading older messages...]</p>}
         {!id && <p className="text-gb-fg-f">[select a conversation]</p>}
         {id && messages.length === 0 && <p className="text-gb-fg-f">[no messages]</p>}
         {messages.map((msg: ConversationMessage) => (