From 2a145e13a9e91a4567d04a04c941b4de4d7feb40 Mon Sep 17 00:00:00 2001
From: Dan Ditomaso <dan.ditomaso@gmail.com>
Date: Wed, 30 Apr 2025 16:23:03 -0400
Subject: [PATCH] fix: change scrollbars to "tiny" style, improved message
 scrolling, fixed bug with message input

---
 src/App.tsx                                   |  2 +-
 src/components/BatteryStatus.tsx              |  4 +-
 .../PageComponents/Messages/ChannelChat.tsx   | 47 ++++++++++++-------
 .../PageComponents/Messages/MessageInput.tsx  |  5 +-
 4 files changed, 33 insertions(+), 25 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 6fdd1152..db735aef 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -37,7 +37,7 @@ export const App = (): JSX.Element => {
       />
       <Toaster />
       <DeviceWrapper device={device}>
-        <div className="flex h-screen flex-col bg-background-primary text-text-primary">
+        <div className="flex h-screen flex-col bg-background-primary text-text-primary" style={{ scrollbarWidth: 'thin' }}>
           <SidebarProvider>
             <div className="h-full flex flex-col">
               {device ? (
diff --git a/src/components/BatteryStatus.tsx b/src/components/BatteryStatus.tsx
index a84df7e8..bd6022c9 100644
--- a/src/components/BatteryStatus.tsx
+++ b/src/components/BatteryStatus.tsx
@@ -27,7 +27,7 @@ const batteryStates: BatteryStateConfig[] = [
   {
     condition: level => level > 100,
     Icon: PlugZapIcon,
-    className: 'text-gray-600',
+    className: 'text-gray-500',
     text: () => 'Plugged in',
   },
   {
@@ -39,7 +39,7 @@ const batteryStates: BatteryStateConfig[] = [
   {
     condition: level => level > 20,
     Icon: BatteryMediumIcon,
-    className: 'text-yellow-400',
+    className: 'text-yellow-500',
     text: level => `${level}% charging`,
   },
   {
diff --git a/src/components/PageComponents/Messages/ChannelChat.tsx b/src/components/PageComponents/Messages/ChannelChat.tsx
index 29715b88..bc08b2d9 100644
--- a/src/components/PageComponents/Messages/ChannelChat.tsx
+++ b/src/components/PageComponents/Messages/ChannelChat.tsx
@@ -14,55 +14,66 @@ const EmptyState = () => (
   </div>
 );
 
-export const ChannelChat = ({
-  messages = [],
-}: ChannelChatProps) => {
+export const ChannelChat = ({ messages = [] }: ChannelChatProps) => {
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const scrollContainerRef = useRef<HTMLUListElement>(null);
+  const userScrolledUpRef = useRef(false);
 
   const scrollToBottom = useCallback((behavior: ScrollBehavior = 'smooth') => {
-    const scrollContainer = scrollContainerRef.current;
-    if (!scrollContainer) return;
-
-    const scrollThreshold = 50; // How close to bottom to trigger smooth scroll
-    const isNearBottom = scrollContainer.scrollHeight - scrollContainer.scrollTop - scrollContainer.clientHeight < scrollThreshold;
-
-    if (behavior === 'instant' || isNearBottom) {
+    requestAnimationFrame(() => {
       messagesEndRef.current?.scrollIntoView({ behavior });
-    }
+    });
   }, []);
 
   useEffect(() => {
-    if (messages.length > 0) {
+    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);
+
+    return () => {
+      scrollContainer?.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
 
   if (!messages?.length) {
     return (
-      <ul ref={scrollContainerRef} className="flex flex-1 flex-col items-center justify-center">
+      <div className="flex flex-1 flex-col items-center justify-center">
         <EmptyState />
         <div ref={messagesEndRef} />
-      </ul>
+      </div>
     );
   }
 
-
   return (
     <ul
       ref={scrollContainerRef}
-      className="mt-auto overflow-y-auto px-3 py-2"
+      className="flex-grow overflow-y-auto px-3 py-2"
     >
-      <div ref={messagesEndRef} className="h-px" />
       {messages?.map((message) => {
         return (
           <MessageItem
-            key={message?.messageId ?? `${message?.from}-${message?.date}`}
+            key={message.messageId ?? `${message.from}-${message.date}`}
             message={message}
           />
         );
       })}
+      <div ref={messagesEndRef} className="h-px" />
     </ul>
   );
 };
\ No newline at end of file
diff --git a/src/components/PageComponents/Messages/MessageInput.tsx b/src/components/PageComponents/Messages/MessageInput.tsx
index 3f4a32ff..f29dd25c 100644
--- a/src/components/PageComponents/Messages/MessageInput.tsx
+++ b/src/components/PageComponents/Messages/MessageInput.tsx
@@ -56,10 +56,7 @@ export const MessageInput = ({
     if (byteLength <= maxBytes) {
       setLocalDraft(newValue);
       setMessageBytes(byteLength);
-
-      startTransition(() => {
-        setDraft(to, newValue);
-      });
+      setDraft(to, newValue);
     }
   };