feat(app): subtask categories, live refresh on save, nested subtask fixes
This commit is contained in:
@@ -5,8 +5,8 @@ import { useSettings } from '@/theme';
|
||||
import Svg, { Path } from 'react-native-svg';
|
||||
|
||||
interface CategorySelectorProps {
|
||||
value: string;
|
||||
onChange: (value: string) => void;
|
||||
value: string[];
|
||||
onChange: (value: string[]) => void;
|
||||
error?: string;
|
||||
}
|
||||
|
||||
@@ -15,11 +15,30 @@ export function CategorySelector({ value, onChange, error }: CategorySelectorPro
|
||||
const { theme } = useSettings();
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
|
||||
const selectedCategory = categories.find(c => c.id === value);
|
||||
const selected = new Set(value);
|
||||
const selectedCategories = categories.filter((c) => selected.has(c.id));
|
||||
|
||||
const toggle = (id: string) => {
|
||||
const next = new Set(selected);
|
||||
if (next.has(id)) {
|
||||
next.delete(id);
|
||||
} else {
|
||||
next.add(id);
|
||||
}
|
||||
onChange(Array.from(next));
|
||||
};
|
||||
|
||||
const summary =
|
||||
selectedCategories.length === 0
|
||||
? 'None'
|
||||
: selectedCategories
|
||||
.slice(0, 2)
|
||||
.map((c) => c.name)
|
||||
.join(', ') + (selectedCategories.length > 2 ? ` +${selectedCategories.length - 2}` : '');
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Text style={[styles.label, { color: theme.text }]}>Category</Text>
|
||||
<Text style={[styles.label, { color: theme.text }]}>Tags</Text>
|
||||
<TouchableOpacity
|
||||
style={[
|
||||
styles.selectorButton,
|
||||
@@ -28,14 +47,22 @@ export function CategorySelector({ value, onChange, error }: CategorySelectorPro
|
||||
onPress={() => setShowModal(true)}
|
||||
activeOpacity={0.8}
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel="Select category"
|
||||
accessibilityHint="Opens a list of categories to choose from"
|
||||
accessibilityLabel="Select tags"
|
||||
accessibilityHint="Opens a list of tags to choose from"
|
||||
>
|
||||
<View style={styles.selectorContent}>
|
||||
<View style={styles.selectorRow}>
|
||||
<View style={[styles.colorCircle, { backgroundColor: selectedCategory?.color || '#9E9E9E' }]} />
|
||||
<Text style={[styles.selectorValue, { color: theme.text }]}>{selectedCategory?.name || 'None'}</Text>
|
||||
</View>
|
||||
{selectedCategories.length > 0 ? (
|
||||
<View style={styles.chipRow}>
|
||||
{selectedCategories.slice(0, 3).map((c) => (
|
||||
<View key={c.id} style={[styles.chip, { backgroundColor: theme.cardAlt, borderColor: theme.border }]}>
|
||||
<View style={[styles.colorCircle, { backgroundColor: c.color }]} />
|
||||
<Text style={[styles.chipText, { color: theme.textSecondary }]} numberOfLines={1}>{c.name}</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
) : (
|
||||
<Text style={[styles.selectorValue, { color: theme.textMuted }]}>None</Text>
|
||||
)}
|
||||
</View>
|
||||
<Svg width={20} height={20} viewBox="0 0 24 24">
|
||||
<Path d="M9 18l6-6-6-6" stroke={theme.textSecondary} strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round" fill="none" />
|
||||
@@ -51,67 +78,62 @@ export function CategorySelector({ value, onChange, error }: CategorySelectorPro
|
||||
<Pressable style={styles.modalOverlay} onPress={() => setShowModal(false)}>
|
||||
<Pressable style={[styles.modalSheet, { backgroundColor: theme.sheetBg }]}>
|
||||
<View style={styles.modalHeader}>
|
||||
<Text style={[styles.modalTitle, { color: theme.text }]}>Select Category</Text>
|
||||
<TouchableOpacity onPress={() => setShowModal(false)} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }} accessibilityRole="button" accessibilityLabel="Close category picker">
|
||||
<Text style={[styles.closeText, { color: theme.textMuted }]}>✕</Text>
|
||||
</TouchableOpacity>
|
||||
<Text style={[styles.modalTitle, { color: theme.text }]}>Select Tags</Text>
|
||||
<View style={styles.modalHeaderRight}>
|
||||
<TouchableOpacity
|
||||
onPress={() => { onChange([]); setShowModal(false); }}
|
||||
activeOpacity={0.7}
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel="Clear all tags"
|
||||
>
|
||||
<Text style={[styles.clearText, { color: theme.textMuted }]}>Clear</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
onPress={() => setShowModal(false)}
|
||||
hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel="Done selecting tags"
|
||||
>
|
||||
<Text style={[styles.doneText, { color: theme.accent }]}>Done</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
<ScrollView contentContainerStyle={styles.modalContent}>
|
||||
<TouchableOpacity
|
||||
style={[
|
||||
styles.modalOption,
|
||||
{ backgroundColor: theme.card, borderColor: theme.borderStrong },
|
||||
!value && { borderColor: theme.accent, backgroundColor: theme.accentSoft, borderWidth: 2 },
|
||||
]}
|
||||
onPress={() => { onChange(''); setShowModal(false); }}
|
||||
activeOpacity={0.8}
|
||||
accessibilityRole="radio"
|
||||
accessibilityLabel="No category"
|
||||
accessibilityState={{ selected: !value }}
|
||||
>
|
||||
<View style={[styles.colorCircle, { backgroundColor: '#9E9E9E' }, !value && styles.colorCircleSelected]} />
|
||||
<Text style={[
|
||||
styles.categoryName,
|
||||
{ color: theme.textSecondary },
|
||||
!value && { color: theme.accentStrong, fontWeight: '600' },
|
||||
]}>
|
||||
None
|
||||
</Text>
|
||||
{!value && (
|
||||
<Svg width={20} height={20} viewBox="0 0 24 24">
|
||||
<Path d="M5 12l5 5 9-10" stroke={theme.accent} strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round" fill="none" />
|
||||
</Svg>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
{categories.map((category) => (
|
||||
<TouchableOpacity
|
||||
key={category.id}
|
||||
style={[
|
||||
styles.modalOption,
|
||||
{ backgroundColor: theme.card, borderColor: theme.borderStrong },
|
||||
value === category.id && { borderColor: theme.accent, backgroundColor: theme.accentSoft, borderWidth: 2 },
|
||||
]}
|
||||
onPress={() => { onChange(category.id); setShowModal(false); }}
|
||||
activeOpacity={0.8}
|
||||
accessibilityRole="radio"
|
||||
accessibilityLabel={`Category ${category.name}`}
|
||||
accessibilityState={{ selected: value === category.id }}
|
||||
>
|
||||
<View style={[styles.colorCircle, { backgroundColor: category.color }, value === category.id && styles.colorCircleSelected]} />
|
||||
<Text style={[
|
||||
styles.categoryName,
|
||||
{ color: theme.textSecondary },
|
||||
value === category.id && { color: theme.accentStrong, fontWeight: '600' },
|
||||
]}>
|
||||
{category.name}
|
||||
</Text>
|
||||
{value === category.id && (
|
||||
<Svg width={20} height={20} viewBox="0 0 24 24">
|
||||
<Path d="M5 12l5 5 9-10" stroke={theme.accent} strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round" fill="none" />
|
||||
</Svg>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
<Text style={[styles.modalHint, { color: theme.textMuted }]}>
|
||||
A task can have multiple tags. Selected: {selected.size}
|
||||
</Text>
|
||||
{categories.map((category) => {
|
||||
const isSelected = selected.has(category.id);
|
||||
return (
|
||||
<TouchableOpacity
|
||||
key={category.id}
|
||||
style={[
|
||||
styles.modalOption,
|
||||
{ backgroundColor: theme.card, borderColor: theme.borderStrong },
|
||||
isSelected && { borderColor: theme.accent, backgroundColor: theme.accentSoft, borderWidth: 2 },
|
||||
]}
|
||||
onPress={() => toggle(category.id)}
|
||||
activeOpacity={0.8}
|
||||
accessibilityRole="checkbox"
|
||||
accessibilityLabel={`Tag ${category.name}`}
|
||||
accessibilityState={{ checked: isSelected }}
|
||||
>
|
||||
<View style={[styles.colorCircle, { backgroundColor: category.color }, isSelected && styles.colorCircleSelected]} />
|
||||
<Text style={[
|
||||
styles.categoryName,
|
||||
{ color: theme.textSecondary },
|
||||
isSelected && { color: theme.text, fontWeight: '600' },
|
||||
]}>
|
||||
{category.name}
|
||||
</Text>
|
||||
{isSelected && (
|
||||
<Svg width={20} height={20} viewBox="0 0 24 24">
|
||||
<Path d="M5 12l5 5 9-10" stroke={theme.accent} strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round" fill="none" />
|
||||
</Svg>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
);
|
||||
})}
|
||||
</ScrollView>
|
||||
</Pressable>
|
||||
</Pressable>
|
||||
@@ -141,11 +163,25 @@ const styles = StyleSheet.create({
|
||||
},
|
||||
selectorContent: {
|
||||
flex: 1,
|
||||
paddingRight: 8,
|
||||
},
|
||||
selectorRow: {
|
||||
chipRow: {
|
||||
flexDirection: 'row',
|
||||
flexWrap: 'wrap',
|
||||
gap: 6,
|
||||
},
|
||||
chip: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 10,
|
||||
gap: 6,
|
||||
paddingHorizontal: 8,
|
||||
paddingVertical: 4,
|
||||
borderRadius: 12,
|
||||
borderWidth: 1,
|
||||
},
|
||||
chipText: {
|
||||
fontSize: 12,
|
||||
fontWeight: '600',
|
||||
},
|
||||
colorCircle: {
|
||||
width: 12,
|
||||
@@ -185,13 +221,27 @@ const styles = StyleSheet.create({
|
||||
padding: 20,
|
||||
borderBottomWidth: 1,
|
||||
},
|
||||
modalHeaderRight: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 16,
|
||||
},
|
||||
modalTitle: {
|
||||
fontSize: 18,
|
||||
fontWeight: '700',
|
||||
},
|
||||
closeText: {
|
||||
fontSize: 22,
|
||||
fontWeight: '300',
|
||||
clearText: {
|
||||
fontSize: 14,
|
||||
fontWeight: '500',
|
||||
},
|
||||
doneText: {
|
||||
fontSize: 15,
|
||||
fontWeight: '700',
|
||||
},
|
||||
modalHint: {
|
||||
fontSize: 12,
|
||||
paddingHorizontal: 4,
|
||||
paddingBottom: 4,
|
||||
},
|
||||
modalContent: {
|
||||
padding: 12,
|
||||
|
||||
Reference in New Issue
Block a user