--wip-- [skip ci]

Author: luke-h1

src/components/Chat/Chat.tsx

@@ -15,6 +15,8 @@ import {
   TextInput,
   useWindowDimensions,
   View,
+  NativeSyntheticEvent,
+  NativeScrollEvent,
 } from 'react-native';
 import { createStyleSheet, useStyles } from 'react-native-unistyles';
 import { Button } from '../Button';
@@ -90,6 +92,13 @@ export const Chat = memo(({ channelName, channelId }: ChatProps) => {
   const [connectionError, setConnectionError] = useState<string | null>(null);
   const [isConnecting, setIsConnecting] = useState<boolean>(false);
   const [showEmotePicker, setShowEmotePicker] = useState<boolean>(false);
+  const [paused, setPaused] = useState(false);
+  const pausedRef = useRef(paused);
+
+  // Keep pausedRef in sync with paused
+  useEffect(() => {
+    pausedRef.current = paused;
+  }, [paused]);
 
   const connectToChat = async () => {
     if (isConnecting) return;
@@ -155,18 +164,15 @@ export const Chat = memo(({ channelName, channelId }: ChatProps) => {
           sender: userstate.username || '',
         };
 
-        // Append the new message to the existing messages
-        messagesRef.current = [...messagesRef.current, newMessage];
-        setMessages([...messagesRef.current]);
-
-        // Scroll to the end of the chat
-        flashListRef.current?.scrollToEnd({ animated: false });
+        addMessageAndMaybeScroll(newMessage);
       });
 
       client.on('clearchat', () => {
         messagesRef.current = [];
         setMessages([]);
-        flashListRef.current?.scrollToEnd({ animated: false });
+        setTimeout(() => {
+          flashListRef.current?.scrollToEnd({ animated: false });
+        }, 0);
       });
 
       client.on('disconnected', reason => {
@@ -187,6 +193,35 @@ export const Chat = memo(({ channelName, channelId }: ChatProps) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [status]);
 
+  // Helper to check if user is at the bottom
+  const handleScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+    const { layoutMeasurement, contentOffset, contentSize } = event.nativeEvent;
+    const paddingToBottom = 20;
+    const isAtBottom =
+      layoutMeasurement.height + contentOffset.y >=
+      contentSize.height - paddingToBottom;
+    setPaused(!isAtBottom);
+  };
+
+  // Resume chat when user taps overlay
+  const handleResume = () => {
+    setPaused(false);
+    setTimeout(() => {
+      flashListRef.current?.scrollToEnd({ animated: true });
+    }, 50);
+  };
+
+  // Only auto-scroll if not paused
+  const addMessageAndMaybeScroll = (newMessage: ChatMessageProps) => {
+    messagesRef.current = [...messagesRef.current, newMessage];
+    setMessages([...messagesRef.current]);
+    if (!pausedRef.current) {
+      setTimeout(() => {
+        flashListRef.current?.scrollToEnd({ animated: false });
+      }, 0);
+    }
+  };
+
   if (status === 'loading') {
     return (
       <View>
@@ -238,7 +273,17 @@ export const Chat = memo(({ channelName, channelId }: ChatProps) => {
             offset: 40 * index,
             index,
           })}
+          onScroll={handleScroll}
+          scrollEventThrottle={16}
         />
+        {paused && (
+          <View style={styles.pausedOverlay}>
+            <Typography style={styles.pausedText}>Chat Paused</Typography>
+            <Button style={styles.resumeButton} onPress={handleResume}>
+              <Typography style={styles.resumeButtonText}>Resume</Typography>
+            </Button>
+          </View>
+        )}
       </View>
       <View style={styles.inputContainer}>
         <Button

src/components/Chat/ChatMessage.tsx

@@ -16,12 +16,12 @@ import { View, ViewStyle } from 'react-native';
 import { createStyleSheet, useStyles } from 'react-native-unistyles';
 import { toast } from 'sonner-native';
 import { ChatUserstate } from 'tmi.js';
+import { BrandIcon } from '../BrandIcon';
 import { Button } from '../Button';
 import { Icon } from '../Icon';
 import { Image } from '../Image';
 import { ModalHandle } from '../ModalHandle';
 import { Typography } from '../Typography';
-import { BrandIcon } from '../BrandIcon';
 
 export interface ChatMessageProps {
   userstate: ChatUserstate;