feat: Sprint 5 - Toast, ConfirmDialog, EmptyStates, Settings, Export/Import, Accessibility (TERLOG-52/53/54/55/56/57/58/59)
This commit is contained in:
@@ -40,7 +40,14 @@ export function TopicSelector({ value, onChange }: Props) {
|
||||
return (
|
||||
<View className="mb-4">
|
||||
<Text className="text-charcoal font-medium mb-1">Topic</Text>
|
||||
<TouchableOpacity onPress={() => setShow(true)} className="flex-row items-center border border-gray-200 rounded-xl px-4 py-3 bg-white">
|
||||
<TouchableOpacity
|
||||
onPress={() => setShow(true)}
|
||||
className="flex-row items-center border border-gray-200 rounded-xl px-4 py-3 bg-white"
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel={value ? `Selected topic: ${value}` : 'Select topic'}
|
||||
accessibilityHint="Opens topic selector"
|
||||
style={{ minHeight: 48 }}
|
||||
>
|
||||
<Text className={`flex-1 ${value ? 'text-charcoal' : 'text-gray-400'}`}>{value || 'Select topic...'}</Text>
|
||||
<ChevronDown size={16} color="#9CA3AF" />
|
||||
</TouchableOpacity>
|
||||
@@ -48,9 +55,16 @@ export function TopicSelector({ value, onChange }: Props) {
|
||||
<Modal visible={show} animationType="slide" presentationStyle="pageSheet">
|
||||
<View className="flex-1 bg-secondary">
|
||||
<View className="flex-row items-center justify-between px-4 py-4 border-b border-gray-200 bg-white">
|
||||
<TouchableOpacity onPress={() => setShow(false)}><X size={22} color="#2C3E50" /></TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
onPress={() => setShow(false)}
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel="Close topic selector"
|
||||
style={{ minWidth: 44, minHeight: 44, alignItems: 'center', justifyContent: 'center' }}
|
||||
>
|
||||
<X size={22} color="#2C3E50" />
|
||||
</TouchableOpacity>
|
||||
<Text className="text-charcoal font-semibold text-lg">Select Topic</Text>
|
||||
<View style={{ width: 22 }} />
|
||||
<View style={{ width: 44 }} />
|
||||
</View>
|
||||
|
||||
<View className="px-4 pt-3 pb-2">
|
||||
@@ -66,7 +80,13 @@ export function TopicSelector({ value, onChange }: Props) {
|
||||
onChangeText={setNewTopic}
|
||||
onSubmitEditing={addCustomTopic}
|
||||
/>
|
||||
<TouchableOpacity onPress={addCustomTopic} className="bg-primary rounded-xl px-3 items-center justify-center">
|
||||
<TouchableOpacity
|
||||
onPress={addCustomTopic}
|
||||
className="bg-primary rounded-xl px-3 items-center justify-center"
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel="Add custom topic"
|
||||
style={{ minWidth: 44, minHeight: 44 }}
|
||||
>
|
||||
<Plus size={18} color="white" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
@@ -80,6 +100,10 @@ export function TopicSelector({ value, onChange }: Props) {
|
||||
<TouchableOpacity
|
||||
onPress={() => { onChange(item.name); setShow(false); }}
|
||||
className={`bg-white rounded-xl px-4 py-3 flex-row items-center justify-between ${value === item.name ? 'border-2 border-primary' : 'border border-gray-100'}`}
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel={item.name}
|
||||
accessibilityState={{ selected: value === item.name }}
|
||||
style={{ minHeight: 48 }}
|
||||
>
|
||||
<Text className="text-charcoal">{item.name}</Text>
|
||||
{item.is_default === 1 && <Text className="text-xs text-gray-400">Default</Text>}
|
||||
|
||||
Reference in New Issue
Block a user