From 664759dee957293f5b1c7d635babc1ea8176dc49 Mon Sep 17 00:00:00 2001
From: Sergei <sergei@Sergeis-MacBook-Pro.local>
Date: Sat, 24 Jan 2026 20:45:42 -0800
Subject: [PATCH] feat: Add sort button to toggle message order in chat
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add a sort button in the chat header that toggles between oldest-first
(default) and newest-first message ordering. The arrow icon indicates
the current sort direction.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 app/(tabs)/chat.tsx | 24 ++++++++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/app/(tabs)/chat.tsx b/app/(tabs)/chat.tsx
index cca8acb..cc3edc5 100644
--- a/app/(tabs)/chat.tsx
+++ b/app/(tabs)/chat.tsx
@@ -408,6 +408,7 @@ export default function ChatScreen() {
       timestamp: new Date(),
     },
   ]);
+  const [sortNewestFirst, setSortNewestFirst] = useState(false);
 
   // Voice call state (local connecting state only)
   const [isConnectingVoice, setIsConnectingVoice] = useState(false);
@@ -765,7 +766,17 @@ export default function ChatScreen() {
           </View>
         </View>
         <TouchableOpacity
-          style={styles.eraseButton}
+          style={styles.headerButton}
+          onPress={() => setSortNewestFirst(prev => !prev)}
+        >
+          <Ionicons
+            name={sortNewestFirst ? 'arrow-up' : 'arrow-down'}
+            size={22}
+            color={AppColors.textSecondary}
+          />
+        </TouchableOpacity>
+        <TouchableOpacity
+          style={styles.headerButton}
           onPress={() => {
             Alert.alert(
               'Clear Chat',
@@ -857,12 +868,16 @@ export default function ChatScreen() {
       >
         <FlatList
           ref={flatListRef}
-          data={messages}
+          data={sortNewestFirst ? [...messages].reverse() : messages}
           keyExtractor={(item) => item.id}
           renderItem={renderMessage}
           contentContainerStyle={styles.messagesList}
           showsVerticalScrollIndicator={false}
-          onContentSizeChange={() => flatListRef.current?.scrollToEnd({ animated: true })}
+          onContentSizeChange={() => {
+            if (!sortNewestFirst) {
+              flatListRef.current?.scrollToEnd({ animated: true });
+            }
+          }}
         />
 
         {/* Input */}
@@ -999,8 +1014,9 @@ const styles = StyleSheet.create({
     fontSize: FontSizes.sm,
     color: AppColors.success,
   },
-  eraseButton: {
+  headerButton: {
     padding: Spacing.xs,
+    marginLeft: Spacing.sm,
   },
   chatContainer: {
     flex: 1,