Refresh home and more navigation

app/(app)/more/expenses/[id].tsx

@@ -1,6 +1,6 @@
 import { useLocalSearchParams, router } from "expo-router";
 import { useState } from "react";
-import { Alert, ScrollView, StyleSheet, Text, View } from "react-native";
+import { Alert, StyleSheet, Text, View } from "react-native";
 
 import { AppBackground } from "@/components/AppBackground";
 import {
@@ -12,6 +12,7 @@ import { LoadingScreen } from "@/components/LoadingScreen";
 import { PageHeader } from "@/components/PageHeader";
 import { SwipeableRow } from "@/components/SwipeableRow";
 import { TabPage } from "@/components/TabPage";
+import { TabScrollView } from "@/components/TabScrollView";
 import { Button } from "@/components/ui/Button";
 import { fonts, spacing } from "@/constants/theme";
 import { useAppTheme } from "@/contexts/ThemeContext";
@@ -119,7 +120,7 @@ export default function ExpenseDetailScreen() {
         "Receipt attached",
         result.items.length > 0
           ? "Select the owed items, apply the split amount, then save the expense."
-          : "OCR filled the fields below. Save to update this expense.",
+          : "We filled in what we could. Review and save to update this expense.",
       );
     } finally {
       setScanning(false);
@@ -163,10 +164,12 @@ export default function ExpenseDetailScreen() {
   if (!expense) {
     return (
       <AppBackground>
-        <TabPage>
-          <Text style={{ color: colors.mutedForeground, padding: spacing.lg }}>
-            Expense not found
-          </Text>
+        <TabPage showMoreBack>
+          <TabScrollView header={<PageHeader title="Expense" subtitle="Expense details" />}>
+            <Text style={{ color: colors.mutedForeground }}>
+              Expense not found
+            </Text>
+          </TabScrollView>
         </TabPage>
       </AppBackground>
     );
@@ -174,13 +177,16 @@ export default function ExpenseDetailScreen() {
 
   return (
     <AppBackground>
-      <TabPage>
-        <ScrollView contentContainerStyle={styles.body}>
-          <PageHeader
-            title={expense.description}
-            subtitle={formatDate(expense.date)}
-          />
-
+      <TabPage showMoreBack>
+        <TabScrollView
+          header={
+            <PageHeader
+              title={expense.description}
+              subtitle={formatDate(expense.date)}
+            />
+          }
+          keyboardShouldPersistTaps="handled"
+        >
           {editing ? (
             <>
               {receiptSplit ? (
@@ -316,22 +322,13 @@ export default function ExpenseDetailScreen() {
               onPress={() => void attachAndScan(false)}
             />
           </View>
-          <Button
-            title="Back"
-            variant="secondary"
-            onPress={() => router.back()}
-          />
-        </ScrollView>
+        </TabScrollView>
       </TabPage>
     </AppBackground>
   );
 }
 
 const styles = StyleSheet.create({
-  body: {
-    padding: spacing.lg,
-    gap: spacing.md,
-  },
   amount: {
     fontSize: 28,
     fontWeight: "600",
@@ -362,7 +359,7 @@ const styles = StyleSheet.create({
     marginTop: spacing.md,
   },
   receiptRow: {
-    paddingVertical: spacing.sm,
+    padding: spacing.md,
     fontSize: 14,
   },
   actions: {
@@ -408,8 +405,10 @@ function mergeNotes(prefix: string, existing: string) {
   const trimmed = existing.trim();
   if (!trimmed) return prefix;
   if (trimmed.startsWith("Receipt split")) {
-    const ocrStart = trimmed.indexOf("\n\nOCR text:");
-    return ocrStart >= 0 ? `${prefix}${trimmed.slice(ocrStart)}` : prefix;
+    const detailsStart = trimmed.indexOf("\n\nReceipt details:");
+    const legacyStart = trimmed.indexOf("\n\nOCR text:");
+    const noteStart = detailsStart >= 0 ? detailsStart : legacyStart;
+    return noteStart >= 0 ? `${prefix}${trimmed.slice(noteStart)}` : prefix;
   }
-  return `${prefix}\n\nOCR text:\n${trimmed}`;
+  return `${prefix}\n\nReceipt details:\n${trimmed}`;
 }