feat(#1,#2,#5): add checkup nav/progress, image optimization controls, and raise tab bar

src/modals/ItemModal.js

@@ -5,6 +5,12 @@ import ChipGroup from '../components/ChipGroup';
 import Field from '../components/Field';
 import { styles } from '../styles';
 
+function qualityValue(level) {
+  if (level === 'high') return 0.95;
+  if (level === 'low') return 0.45;
+  return 0.75;
+}
+
 export default function ItemModal({
   visible,
   itemForm,
@@ -14,6 +20,11 @@ export default function ItemModal({
   takeItemImage,
   saveItemFromModal,
 }) {
+  const mediaOptions = {
+    quality: qualityValue(itemForm.imageQuality),
+    allowCrop: !!itemForm.imageAllowCrop,
+  };
+
   return (
     <Modal visible={visible} animationType="slide" transparent>
       <View style={styles.modalBackdrop}>
@@ -82,11 +93,28 @@ export default function ItemModal({
                 </Field>
               ) : null}
 
+              <Field label="Image optimization">
+                <View style={styles.chipGroup}>
+                  {['low', 'balanced', 'high'].map((level) => {
+                    const active = itemForm.imageQuality === level;
+                    return (
+                      <Pressable key={level} style={[styles.chip, active && styles.chipActive]} onPress={() => updateItemForm('imageQuality', level)}>
+                        <Text style={[styles.chipText, active && styles.chipTextActive]}>{level}</Text>
+                      </Pressable>
+                    );
+                  })}
+                </View>
+              </Field>
+
+              <Pressable style={styles.inlineToggle} onPress={() => updateItemForm('imageAllowCrop', !itemForm.imageAllowCrop)}>
+                <Text style={styles.inlineToggleText}>{itemForm.imageAllowCrop ? '☑' : '☐'} Enable optional crop before save</Text>
+              </Pressable>
+
               <View style={styles.actionRow}>
-                <Pressable style={[styles.secondaryBtnTight, styles.flex]} onPress={takeItemImage}>
+                <Pressable style={[styles.secondaryBtnTight, styles.flex]} onPress={() => takeItemImage(mediaOptions)}>
                   <Text style={styles.secondaryBtnText}>Take photo</Text>
                 </Pressable>
-                <Pressable style={[styles.secondaryBtnTight, styles.flex]} onPress={pickItemImage}>
+                <Pressable style={[styles.secondaryBtnTight, styles.flex]} onPress={() => pickItemImage(mediaOptions)}>
                   <Text style={styles.secondaryBtnText}>{itemForm.imageUri ? 'From gallery (change)' : 'From gallery'}</Text>
                 </Pressable>
               </View>