Remove duplicate node logic, UI Update, flatten build output (#586)

* refactor nodes to getNodes fn. ui updates

* fixed several styling issues

* fix: message specific styling/overflow

* added footer, fixed tests. styling

* fix: added theme support back to app component

* fix: hide emojis/reactions

* fix: added more padding to content element

* fix: fixed padding in content element

* updated color scheme

* fix: more dark mode styling improvements

* fix: padding and alignment fixes

* fix: prevent left sidebar collapse, added battery component

* fix: change scrollbars to "tiny" style, improved message scrolling, fixed bug with message input

* message store fixes, ui fixes

* fix: disabled message persistance until after release

src/components/PageComponents/Messages/ChannelChat.tsx

@@ -1,72 +1,77 @@
 import { MessageItem } from "@components/PageComponents/Messages/MessageItem.tsx";
-import type { Message as MessageType } from "@core/stores/messageStore.ts";
 import { InboxIcon } from "lucide-react";
 import { useCallback, useEffect, useRef } from "react";
+import { Message } from "@core/stores/messageStore/types.ts";
 
 export interface ChannelChatProps {
-  messages?: MessageType[];
+  messages?: Message[];
 }
 
 const EmptyState = () => (
-  <div className="flex flex-col place-content-center place-items-center p-8 text-gray-500 dark:text-gray-400">
-    <InboxIcon className="h-8 w-8 mb-2" />
+  <div className="flex flex-1 flex-col place-content-center place-items-center p-8 text-slate-500 dark:text-slate-400">
+    <InboxIcon className="mb-2 h-8 w-8" />
     <span className="text-sm">No Messages</span>
   </div>
 );
 
-export const ChannelChat = ({
-  messages = [],
-}: ChannelChatProps) => {
+export const ChannelChat = ({ messages = [] }: ChannelChatProps) => {
   const messagesEndRef = useRef<HTMLDivElement>(null);
-  const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const scrollContainerRef = useRef<HTMLUListElement>(null);
+  const userScrolledUpRef = useRef(false);
 
-  const scrollToBottom = useCallback(() => {
-    const scrollContainer = scrollContainerRef.current;
-    if (scrollContainer) {
-      const isNearBottom =
-        scrollContainer.scrollHeight -
-        scrollContainer.scrollTop -
-        scrollContainer.clientHeight <
-        100;
-
-      if (isNearBottom) {
-        messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
-      }
-    }
+  const scrollToBottom = useCallback((behavior: ScrollBehavior = 'smooth') => {
+    requestAnimationFrame(() => {
+      messagesEndRef.current?.scrollIntoView({ behavior });
+    });
   }, []);
 
   useEffect(() => {
-    scrollToBottom();
-  }, [scrollToBottom, messages]);
+    const scrollContainer = scrollContainerRef.current;
+    if (!scrollContainer) return;
+    const isScrolledToBottom = scrollContainer.scrollHeight - scrollContainer.scrollTop - scrollContainer.clientHeight <= 10;
+
+    if (isScrolledToBottom || !userScrolledUpRef.current) {
+      scrollToBottom('smooth');
+    }
+  }, [messages, scrollToBottom]);
+
+  useEffect(() => {
+    const scrollContainer = scrollContainerRef.current;
+    const handleScroll = () => {
+      if (!scrollContainer) return;
+      const isAtBottom = scrollContainer.scrollHeight - scrollContainer.scrollTop - scrollContainer.clientHeight <= 10;
+      userScrolledUpRef.current = !isAtBottom;
+    };
+    scrollContainer?.addEventListener('scroll', handleScroll, { passive: true });
+    return () => {
+      scrollContainer?.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
 
   if (!messages?.length) {
     return (
-      <div className="flex flex-col h-full">
-        <div className="flex-1 flex items-center justify-center">
-          <EmptyState />
-        </div>
+      <div className="flex flex-1 flex-col items-center justify-center">
+        <EmptyState />
+        <div ref={messagesEndRef} />
       </div>
     );
   }
 
   return (
-    <div className="flex flex-col h-full">
-      <div
-        ref={scrollContainerRef}
-        className="flex-1 overflow-y-auto py-4"
-      >
-        <div className="flex flex-col justify-end min-h-full space-y-4">
-          {messages?.map((message) => {
-            return (
-              <MessageItem
-                key={message?.messageId}
-                message={message}
-              />
-            );
-          })}
-          <div ref={messagesEndRef} className="h-0 w-full" />
-        </div>
-      </div>
-    </div>
+    <ul
+      ref={scrollContainerRef}
+      className="flex flex-col flex-grow overflow-y-auto px-3 py-2"
+    >
+      <div className="flex-grow" />
+
+      {messages?.map((message) => (
+        <MessageItem
+          key={message.messageId ?? `${message.from}-${message.date}`}
+          message={message}
+        />
+      ))}
+
+      <div ref={messagesEndRef} className="h-px" />
+    </ul>
   );
 };