feat: polish UI, fix top inset, and add check-up correctness stats

src/tabs/CheckupTab.js

@@ -2,7 +2,14 @@ import React from 'react';
 import { Pressable, Text, View } from 'react-native';
 import { styles } from '../styles';
 
-export default function CheckupTab({ checkupSession, answerCheckupYes, openFixModal, createFreshCheckupSession, saveCheckup }) {
+export default function CheckupTab({
+  checkupSession,
+  checkupStats,
+  answerCheckupYes,
+  openFixModal,
+  createFreshCheckupSession,
+  saveCheckup,
+}) {
   return (
     <View style={styles.section}>
       <View style={styles.sectionRow}>
@@ -12,6 +19,20 @@ export default function CheckupTab({ checkupSession, answerCheckupYes, openFixMo
         </Pressable>
       </View>
 
+      {!!checkupSession.length && (
+        <View style={styles.statsRow}>
+          <View style={[styles.statPill, styles.statPillCorrect]}>
+            <Text style={styles.statPillText}>Correct: {checkupStats.correct}</Text>
+          </View>
+          <View style={[styles.statPill, styles.statPillBad]}>
+            <Text style={styles.statPillText}>Bad: {checkupStats.bad}</Text>
+          </View>
+          <View style={[styles.statPill, styles.statPillPending]}>
+            <Text style={styles.statPillText}>Pending: {checkupStats.pending}</Text>
+          </View>
+        </View>
+      )}
+
       {checkupSession.length === 0 ? <Text style={styles.muted}>No items for this trip yet.</Text> : null}
 
       {checkupSession.map((entry) => (
@@ -30,7 +51,13 @@ export default function CheckupTab({ checkupSession, answerCheckupYes, openFixMo
             <Pressable style={styles.answerNo} onPress={() => openFixModal(entry.itemId)}>
               <Text style={styles.answerText}>No</Text>
             </Pressable>
-            <View style={[styles.answerStateDot, entry.confirmed ? styles.answerStateDotOn : null]} />
+            <View
+              style={[
+                styles.answerStateDot,
+                entry.result === 'correct' ? styles.answerStateDotOn : null,
+                entry.result === 'bad' ? styles.answerStateDotBad : null,
+              ]}
+            />
           </View>
         </View>
       ))}

src/tabs/HistoryTab.js

@@ -15,7 +15,10 @@ export default function HistoryTab({ selectedTrip, selectedTripCheckups, selecte
         <View key={checkup.id} style={styles.cardSoft}>
           <Pressable onPress={() => setSelectedCheckupId((prev) => (prev === checkup.id ? null : checkup.id))}>
             <Text style={styles.cardTitle}>{new Date(checkup.createdAt).toLocaleString()}</Text>
-            <Text style={styles.cardMeta}>{checkup.snapshot.length} items</Text>
+            <Text style={styles.cardMeta}>
+              {checkup.snapshot.length} items · correct: {checkup.stats?.correct ?? checkup.snapshot.filter((x) => x.result === 'correct').length} · bad:{' '}
+              {checkup.stats?.bad ?? checkup.snapshot.filter((x) => x.result === 'bad').length}
+            </Text>
             <Text style={styles.cardMeta}>{selectedCheckupId === checkup.id ? 'Tap to collapse' : 'Tap to open'}</Text>
           </Pressable>