Refine receipt item expense selection

components/expenses/ReceiptItemSelector.tsx

@@ -33,7 +33,7 @@ export function ReceiptItemSelector({
 }: ReceiptItemSelectorProps) {
   const { colors } = useAppTheme();
   const [selectedIds, setSelectedIds] = useState<Set<string>>(
-    () => new Set(items.map((item) => item.id)),
+    () => new Set(items.length === 1 ? [items[0]!.id] : []),
   );
 
   const calculation = useMemo(() => {
@@ -84,10 +84,11 @@ export function ReceiptItemSelector({
       <View style={styles.header}>
         <View style={styles.headerCopy}>
           <Text style={[styles.title, { color: colors.foreground }]}>
-            Split receipt items
+            Select expense items
           </Text>
           <Text style={[styles.subtitle, { color: colors.mutedForeground }]}>
-            Select what this person owes. Tax is split proportionally.
+            Pick only the receipt lines that should become this expense. Tax is
+            split proportionally.
           </Text>
         </View>
         <Text style={[styles.total, { color: colors.foreground }]}>
@@ -95,6 +96,39 @@ export function ReceiptItemSelector({
         </Text>
       </View>
 
+      {items.length > 1 ? (
+        <View style={styles.bulkActions}>
+          <Pressable
+            accessibilityRole="button"
+            onPress={() =>
+              setSelectedIds(new Set(items.map((item) => item.id)))
+            }
+            style={({ pressed }) => [
+              styles.bulkAction,
+              pressed && styles.pressed,
+            ]}
+          >
+            <Text style={[styles.bulkActionText, { color: colors.primary }]}>
+              Select all
+            </Text>
+          </Pressable>
+          <Pressable
+            accessibilityRole="button"
+            onPress={() => setSelectedIds(new Set())}
+            style={({ pressed }) => [
+              styles.bulkAction,
+              pressed && styles.pressed,
+            ]}
+          >
+            <Text
+              style={[styles.bulkActionText, { color: colors.mutedForeground }]}
+            >
+              Clear
+            </Text>
+          </Pressable>
+        </View>
+      ) : null}
+
       <View style={styles.itemList}>
         {items.map((item) => {
           const selected = selectedIds.has(item.id);
@@ -137,7 +171,11 @@ export function ReceiptItemSelector({
       </View>
 
       <Button
-        title="Apply owed amount"
+        title={
+          calculation.selected.length === 0
+            ? "Select an item to apply"
+            : "Apply selected items"
+        }
         disabled={calculation.selected.length === 0}
         onPress={() =>
           onApply({
@@ -218,6 +256,18 @@ const styles = StyleSheet.create({
   itemList: {
     gap: spacing.sm,
   },
+  bulkActions: {
+    flexDirection: "row",
+    gap: spacing.sm,
+  },
+  bulkAction: {
+    minHeight: 34,
+    justifyContent: "center",
+  },
+  bulkActionText: {
+    fontFamily: fonts.bodyMedium,
+    fontSize: 13,
+  },
   item: {
     minHeight: 48,
     borderWidth: 1,