From 2dcab376e6cb6f2c6f262f2f809281cb02e69c9a Mon Sep 17 00:00:00 2001
From: Thomas Luizon Rodrigues Gregorio <thomaslrgregorio@gmail.com>
Date: Sun, 14 Jun 2026 21:49:26 -0300
Subject: [PATCH] fix(mobile): flank frequency carousel with arrows + surface
 all speech errors

- Frequency carousel: move the prev/next arrows out of the card into a flex
  row that flanks it, so they no longer overlap the card content. The
  disabled end-state dims the arrow instead of hiding it (no layout shift).
- Chat voice: surface every speech-recognition error, not just mic-denied.
  Non-permission errors (no-speech, language-not-supported, service errors)
  were computed in the hook but never rendered, so a failing recognizer looked
  like a silent no-op. Now matches web, which already routes speech errors to
  the notice area.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../components/chat/chat-input-area.tsx       |  8 +++
 .../frequency-type-cards.tsx                  | 63 ++++++++++---------
 .../habits/habit-form-fields/styles.ts        | 24 +++----
 3 files changed, 49 insertions(+), 46 deletions(-)

diff --git a/apps/mobile/components/chat/chat-input-area.tsx b/apps/mobile/components/chat/chat-input-area.tsx
index 3fd5175688..f915b7c953 100644
--- a/apps/mobile/components/chat/chat-input-area.tsx
+++ b/apps/mobile/components/chat/chat-input-area.tsx
@@ -109,6 +109,14 @@ function ChatInputNotices({
           compact
         />
       )}
+      {speechError && (
+        <Text
+          style={[styles.errorText, { color: tokens.statusBadText }]}
+          accessibilityRole="alert"
+        >
+          {speechError}
+        </Text>
+      )}
       {speechError === t("speech.micDenied") && (
         <TouchableOpacity
           style={styles.permissionAction}
diff --git a/apps/mobile/components/habits/habit-form-fields/frequency-type-cards.tsx b/apps/mobile/components/habits/habit-form-fields/frequency-type-cards.tsx
index 595a024335..c2f43d9b60 100644
--- a/apps/mobile/components/habits/habit-form-fields/frequency-type-cards.tsx
+++ b/apps/mobile/components/habits/habit-form-fields/frequency-type-cards.tsx
@@ -120,9 +120,25 @@ export function FrequencyTypeCards({
   return (
     <View style={styles.fieldGroup}>
       <Text style={styles.label}>{t("habits.form.frequency")}</Text>
-      <View style={styles.frequencyCarousel} onLayout={handleLayout}>
+      <View style={styles.frequencyCarouselRow}>
+        <Pressable
+          style={[
+            styles.frequencyArrow,
+            activeIndex === 0 ? styles.frequencyArrowDisabled : null,
+          ]}
+          disabled={activeIndex === 0}
+          onPress={() => goToIndex(activeIndex - 1)}
+          accessibilityRole="button"
+          accessibilityLabel={t("common.previous")}
+          hitSlop={8}
+        >
+          <ChevronLeft size={18} strokeWidth={2} color={tokens.fg2} />
+        </Pressable>
+
         <ScrollView
           ref={scrollRef}
+          style={styles.frequencyScroll}
+          onLayout={handleLayout}
           horizontal
           pagingEnabled
           showsHorizontalScrollIndicator={false}
@@ -165,36 +181,21 @@ export function FrequencyTypeCards({
           })}
         </ScrollView>
 
-        <View style={styles.frequencyArrowRow} pointerEvents="box-none">
-          <Pressable
-            style={[
-              styles.frequencyArrow,
-              activeIndex === 0 ? styles.frequencyArrowHidden : null,
-            ]}
-            disabled={activeIndex === 0}
-            onPress={() => goToIndex(activeIndex - 1)}
-            accessibilityRole="button"
-            accessibilityLabel={t("common.previous")}
-            hitSlop={8}
-          >
-            <ChevronLeft size={18} strokeWidth={2} color={tokens.fg2} />
-          </Pressable>
-          <Pressable
-            style={[
-              styles.frequencyArrow,
-              activeIndex === FREQUENCY_TYPE_CARDS.length - 1
-                ? styles.frequencyArrowHidden
-                : null,
-            ]}
-            disabled={activeIndex === FREQUENCY_TYPE_CARDS.length - 1}
-            onPress={() => goToIndex(activeIndex + 1)}
-            accessibilityRole="button"
-            accessibilityLabel={t("common.next")}
-            hitSlop={8}
-          >
-            <ChevronRight size={18} strokeWidth={2} color={tokens.fg2} />
-          </Pressable>
-        </View>
+        <Pressable
+          style={[
+            styles.frequencyArrow,
+            activeIndex === FREQUENCY_TYPE_CARDS.length - 1
+              ? styles.frequencyArrowDisabled
+              : null,
+          ]}
+          disabled={activeIndex === FREQUENCY_TYPE_CARDS.length - 1}
+          onPress={() => goToIndex(activeIndex + 1)}
+          accessibilityRole="button"
+          accessibilityLabel={t("common.next")}
+          hitSlop={8}
+        >
+          <ChevronRight size={18} strokeWidth={2} color={tokens.fg2} />
+        </Pressable>
       </View>
 
       <View style={styles.frequencyDots}>
diff --git a/apps/mobile/components/habits/habit-form-fields/styles.ts b/apps/mobile/components/habits/habit-form-fields/styles.ts
index 1594f6dd55..00b985ca94 100644
--- a/apps/mobile/components/habits/habit-form-fields/styles.ts
+++ b/apps/mobile/components/habits/habit-form-fields/styles.ts
@@ -431,8 +431,13 @@ export function createStyles(tokens: AppTokens) {
       fontSize: 20,
       lineHeight: 25,
     },
-    frequencyCarousel: {
-      position: "relative",
+    frequencyCarouselRow: {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: 6,
+    },
+    frequencyScroll: {
+      flex: 1,
     },
     frequencySlide: {
       paddingHorizontal: 4,
@@ -448,17 +453,6 @@ export function createStyles(tokens: AppTokens) {
       borderWidth: 1.5,
       borderColor: tokens.primary,
     },
-    frequencyArrowRow: {
-      position: "absolute",
-      top: 0,
-      bottom: 0,
-      left: 0,
-      right: 0,
-      flexDirection: "row",
-      justifyContent: "space-between",
-      alignItems: "center",
-      paddingHorizontal: 2,
-    },
     frequencyArrow: {
       width: 32,
       height: 32,
@@ -469,8 +463,8 @@ export function createStyles(tokens: AppTokens) {
       borderWidth: 1,
       borderColor: tokens.hairline,
     },
-    frequencyArrowHidden: {
-      opacity: 0,
+    frequencyArrowDisabled: {
+      opacity: 0.3,
     },
     frequencyDots: {
       flexDirection: "row",