fix: critical UX audit fixes — scroll, animations, colors, feedback

Batch 1 of full audit fixes (10 critical issues):

1. Auto-scroll only when at bottom — stops hijacking scroll during streaming
2. Staggered pulsing dots — 150ms delay between each dot for wave effect
3. Follow-up chips press feedback — haptics + hover + pressed scale
4. Error banner dismiss button — X button to clear errors
5. Search no-results state — "No books match" message
6. Hardcoded colors replaced with theme tokens across 6 files:
   - Onboarding: all 8 hex values + SafeAreaView wrapper
   - VerseCard: expandToggle, actionButton hover
   - HistoryDrawer: editInput, newChatButton hover
   - read.tsx: search, bookCard, bookAbbr
   - chapter reader: 12 hardcoded values replaced

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: Raoof128

app/(tabs)/read.tsx

@@ -168,6 +168,13 @@ export default function ReadScreen() {
           columnWrapperStyle={styles.row}
           contentContainerStyle={styles.listContent}
           showsVerticalScrollIndicator={false}
+          ListEmptyComponent={
+            search.trim().length > 0 ? (
+              <View style={styles.emptySearch}>
+                <Text style={styles.emptySearchText}>No books match "{search}"</Text>
+              </View>
+            ) : null
+          }
         />
       </Animated.View>
     </SafeAreaView>
@@ -266,11 +273,11 @@ const styles = StyleSheet.create({
   },
   bookCard: {
     flex: 1,
-    backgroundColor: "rgba(255,255,255,0.06)",
+    backgroundColor: colors.glass,
     borderRadius: 14,
     padding: 16,
     borderWidth: 1,
-    borderColor: "rgba(255,255,255,0.10)",
+    borderColor: colors.glassBorder,
     minHeight: 80,
   },
   bookCardHovered: {
@@ -284,23 +291,23 @@ const styles = StyleSheet.create({
   searchContainer: {
     flexDirection: "row",
     alignItems: "center",
-    backgroundColor: "rgba(255,255,255,0.06)",
+    backgroundColor: colors.glass,
     borderWidth: 1,
-    borderColor: "rgba(255,255,255,0.10)",
+    borderColor: colors.glassBorder,
     borderRadius: 14,
     marginHorizontal: 20,
     marginBottom: 16,
     paddingHorizontal: 14,
     paddingVertical: 10,
   },
   searchIcon: { marginRight: 10 },
-  searchInput: { flex: 1, color: "#F0F0F5", fontSize: 14 },
+  searchInput: { flex: 1, color: colors.textPrimary, fontSize: 14, fontFamily: fonts.ui },
   searchContainerFocused: {
     borderColor: "rgba(138, 43, 226, 0.35)",
     backgroundColor: "rgba(255, 255, 255, 0.08)",
   },
   bookAbbr: {
-    color: "#A855F7",
+    color: colors.purpleGlow,
     fontSize: 10,
     fontWeight: "700",
     letterSpacing: 1.5,
@@ -318,4 +325,13 @@ const styles = StyleSheet.create({
     fontFamily: fonts.ui,
     color: colors.textGhost,
   },
+  emptySearch: {
+    alignItems: "center",
+    paddingTop: 40,
+  },
+  emptySearchText: {
+    color: colors.textMuted,
+    fontSize: 14,
+    fontFamily: fonts.ui,
+  },
 });

app/chat/[id].tsx

@@ -3,7 +3,8 @@ import { View, Text, FlatList, KeyboardAvoidingView, Platform, Pressable, StyleS
 import { useLocalSearchParams, useRouter } from "expo-router";
 import { SafeAreaView } from "react-native-safe-area-context";
 import Animated, { FadeIn, FadeOut } from "react-native-reanimated";
-import { ChevronLeft, Share2, ChevronDown, Sparkles } from "lucide-react-native";
+import { ChevronLeft, Share2, ChevronDown, Sparkles, X } from "lucide-react-native";
+import * as Haptics from "expo-haptics";
 import { supabase } from "../../lib/supabase";
 import { useChat } from "../../lib/chat";
 import { ChatBubble } from "../../components/ChatBubble";
@@ -37,8 +38,10 @@ export default function ChatScreen() {
 
   const [messages, setMessages] = useState<DisplayMessage[]>([]);
   const [showScrollButton, setShowScrollButton] = useState(false);
+  const [errorDismissed, setErrorDismissed] = useState(false);
   const flatListRef = useRef<FlatList>(null);
   const hasSentInitial = useRef(false);
+  const isAtBottom = useRef(true);
 
   const isNewChat = id === "new" || id.startsWith("new-");
 
@@ -52,6 +55,10 @@ export default function ChatScreen() {
     }
   }, [id]);
 
+  useEffect(() => {
+    if (error) setErrorDismissed(false);
+  }, [error]);
+
   useEffect(() => {
     if (initialMessage && !hasSentInitial.current) {
       hasSentInitial.current = true;
@@ -205,12 +212,17 @@ export default function ChatScreen() {
             />
           )}
           contentContainerStyle={styles.messageList}
-          onContentSizeChange={() => flatListRef.current?.scrollToEnd({ animated: true })}
+          onContentSizeChange={() => {
+            if (isAtBottom.current) {
+              flatListRef.current?.scrollToEnd({ animated: true });
+            }
+          }}
           onScroll={(e) => {
             const { contentOffset, contentSize, layoutMeasurement } = e.nativeEvent;
             const distanceFromBottom =
               contentSize.height - layoutMeasurement.height - contentOffset.y;
             setShowScrollButton(distanceFromBottom > 100);
+            isAtBottom.current = distanceFromBottom <= 100;
           }}
           scrollEventThrottle={100}
           ListEmptyComponent={
@@ -226,7 +238,18 @@ export default function ChatScreen() {
             displayMessages.length > 0 && !isStreaming ? (
               <View style={styles.followUps}>
                 {FOLLOW_UPS.map((text) => (
-                  <Pressable key={text} onPress={() => handleSend(text)} style={styles.followUpChip}>
+                  <Pressable
+                    key={text}
+                    onPress={() => {
+                      if (Platform.OS !== "web") Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+                      handleSend(text);
+                    }}
+                    style={({ pressed, hovered }: any) => [
+                      styles.followUpChip,
+                      hovered && styles.followUpChipHovered,
+                      pressed && styles.followUpChipPressed,
+                    ]}
+                  >
                     <Text style={styles.followUpText}>{text}</Text>
                   </Pressable>
                 ))}
@@ -235,13 +258,16 @@ export default function ChatScreen() {
           }
         />
 
-        {error && (
+        {error && !errorDismissed && (
           <View
             style={styles.errorBanner}
             accessibilityRole="alert"
             accessibilityLabel={`Error: ${error}`}
           >
             <Text style={styles.errorText}>{error}</Text>
+            <Pressable onPress={() => setErrorDismissed(true)} style={styles.errorDismiss}>
+              <X size={14} color={colors.error} />
+            </Pressable>
           </View>
         )}
 
@@ -373,6 +399,9 @@ const styles = StyleSheet.create({
     shadowRadius: 8,
   },
   errorBanner: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
     backgroundColor: colors.errorBg,
     borderWidth: 1,
     borderColor: colors.error,
@@ -382,10 +411,14 @@ const styles = StyleSheet.create({
     marginBottom: 4,
     borderRadius: 10,
   },
+  errorDismiss: {
+    padding: 4,
+  },
   errorText: {
     color: colors.error,
     fontSize: 13,
     fontFamily: fonts.ui,
+    flex: 1,
   },
   followUps: {
     flexDirection: "row",
@@ -402,6 +435,14 @@ const styles = StyleSheet.create({
     paddingHorizontal: 12,
     paddingVertical: 6,
   },
+  followUpChipHovered: {
+    backgroundColor: colors.purpleAccent,
+    borderColor: colors.purple,
+  },
+  followUpChipPressed: {
+    backgroundColor: colors.purpleAccent,
+    transform: [{ scale: 0.97 }],
+  },
   followUpText: {
     color: colors.purpleGlow,
     fontSize: 12,

app/reader/[bookId]/[chapter].tsx

@@ -480,7 +480,7 @@ const styles = StyleSheet.create({
     justifyContent: "center",
   },
   headerButtonHovered: {
-    backgroundColor: "rgba(255,255,255,0.06)",
+    backgroundColor: colors.glass,
     borderRadius: 10,
   },
   headerNav: {
@@ -499,8 +499,8 @@ const styles = StyleSheet.create({
     justifyContent: "center",
   },
   navArrowHovered: {
-    backgroundColor: "rgba(138, 43, 226, 0.10)",
-    borderColor: "rgba(138, 43, 226, 0.20)",
+    backgroundColor: colors.purpleMist,
+    borderColor: colors.purpleBorder,
   },
   navArrowDisabled: {
     opacity: 0.4,
@@ -512,11 +512,11 @@ const styles = StyleSheet.create({
   },
   progressBarBg: {
     height: 2,
-    backgroundColor: "rgba(255,255,255,0.05)",
+    backgroundColor: colors.glass,
   },
   progressBarFill: {
     height: 2,
-    backgroundColor: "#8A2BE2",
+    backgroundColor: colors.purple,
   },
   centered: {
     flex: 1,
@@ -558,18 +558,18 @@ const styles = StyleSheet.create({
   headingLine: {
     flex: 1,
     height: 1,
-    backgroundColor: "rgba(255,255,255,0.06)",
+    backgroundColor: colors.glass,
   },
   headingText: {
-    color: "#9494A8",
+    color: colors.textSecondary,
     fontSize: 11,
     fontWeight: "700",
     letterSpacing: 3,
     textTransform: "uppercase",
     paddingHorizontal: 12,
   },
   chapterNumLarge: {
-    color: "#A855F7",
+    color: colors.purpleGlow,
     fontSize: 48,
     fontWeight: "200",
     textAlign: "center",
@@ -640,8 +640,8 @@ const styles = StyleSheet.create({
     borderColor: colors.glassBorder,
   },
   bottomButtonHovered: {
-    backgroundColor: "rgba(138, 43, 226, 0.06)",
-    borderColor: "rgba(138, 43, 226, 0.20)",
+    backgroundColor: colors.purpleMist,
+    borderColor: colors.purpleBorder,
   },
   bottomButtonPressed: {
     backgroundColor: colors.purpleAccent,
@@ -659,7 +659,7 @@ const styles = StyleSheet.create({
     color: colors.textGhost,
   },
   verseLineSelected: {
-    backgroundColor: "rgba(138, 43, 226, 0.08)",
+    backgroundColor: colors.purpleMist,
     borderRadius: 8,
     marginHorizontal: -4,
     paddingHorizontal: 8,
@@ -679,35 +679,35 @@ const styles = StyleSheet.create({
     paddingHorizontal: 12,
     paddingVertical: 6,
     borderRadius: 8,
-    backgroundColor: "rgba(255,255,255,0.06)",
+    backgroundColor: colors.glass,
     borderWidth: 1,
-    borderColor: "rgba(255,255,255,0.10)",
+    borderColor: colors.glassBorder,
   },
   verseActionPrimary: {
-    backgroundColor: "rgba(138, 43, 226, 0.12)",
-    borderColor: "rgba(138, 43, 226, 0.25)",
+    backgroundColor: colors.purpleMist,
+    borderColor: colors.purpleAccent,
   },
   verseActionRow: {
     flexDirection: "row",
     alignItems: "center",
   },
   verseActionText: {
-    color: "#9494A8",
+    color: colors.textSecondary,
     fontSize: 12,
   },
   verseActionPrimaryText: {
-    color: "#A855F7",
+    color: colors.purpleGlow,
   },
   copiedBadge: {
-    color: "#A855F7",
+    color: colors.purpleGlow,
     fontSize: 12,
     fontStyle: "italic",
   },
   verseActionActive: {
-    backgroundColor: "rgba(138, 43, 226, 0.12)",
-    borderColor: "rgba(138, 43, 226, 0.25)",
+    backgroundColor: colors.purpleMist,
+    borderColor: colors.purpleBorder,
   },
   verseActionActiveText: {
-    color: "#A855F7",
+    color: colors.purpleGlow,
   },
 });

components/ChatBubble.tsx

@@ -2,11 +2,11 @@ import { useEffect, useState } from "react";
 import { View, Text, Pressable, Platform, StyleSheet } from "react-native";
 import { Copy, RotateCcw, ThumbsUp, ThumbsDown } from "lucide-react-native";
 import Animated, {
-
   FadeInLeft,
   FadeInRight,
   useAnimatedStyle,
   useSharedValue,
+  withDelay,
   withRepeat,
   withTiming,
 } from "react-native-reanimated";
@@ -16,32 +16,35 @@ import { VerseCard } from "./VerseCard";
 import { colors, fonts } from "../lib/theme";
 import type { Verse } from "../lib/types";
 
-function PulsingDot() {
+function PulsingDotItem({ delay }: { delay: number }) {
   const opacity = useSharedValue(0.3);
 
   useEffect(() => {
-    opacity.value = withRepeat(withTiming(1, { duration: 800 }), -1, true);
+    opacity.value = withDelay(
+      delay,
+      withRepeat(withTiming(1, { duration: 600 }), -1, true)
+    );
   }, []);
 
   const style = useAnimatedStyle(() => ({
     opacity: opacity.value,
   }));
 
+  return (
+    <Animated.View
+      style={[
+        { width: 6, height: 6, borderRadius: 3, backgroundColor: colors.purple },
+        style,
+      ]}
+    />
+  );
+}
+
+function PulsingDot() {
   return (
     <View style={{ flexDirection: "row", alignItems: "center", gap: 6, paddingVertical: 8 }}>
       {[0, 1, 2].map((i) => (
-        <Animated.View
-          key={i}
-          style={[
-            {
-              width: 6,
-              height: 6,
-              borderRadius: 3,
-              backgroundColor: colors.purple,
-            },
-            style,
-          ]}
-        />
+        <PulsingDotItem key={i} delay={i * 150} />
       ))}
     </View>
   );
@@ -169,9 +172,9 @@ const styles = StyleSheet.create({
     marginVertical: 6,
   },
   userBubble: {
-    backgroundColor: "rgba(138, 43, 226, 0.08)",
+    backgroundColor: colors.purpleMist,
     borderWidth: 1,
-    borderColor: "rgba(138, 43, 226, 0.15)",
+    borderColor: colors.purpleBorder,
     borderRadius: 20,
     borderBottomRightRadius: 4,
     paddingHorizontal: 16,