118 lines
4.9 KiB
TypeScript
118 lines
4.9 KiB
TypeScript
import { View, Text, TouchableOpacity, Modal, FlatList, TextInput } from 'react-native';
|
|
import { useState, useEffect } from 'react';
|
|
import { ChevronDown, Plus, X, Search } from 'lucide-react-native';
|
|
import { getDatabase } from '@/lib/database';
|
|
import * as Crypto from 'expo-crypto';
|
|
|
|
interface Props {
|
|
value: string;
|
|
onChange: (topic: string) => void;
|
|
}
|
|
|
|
interface Topic { id: string; name: string; is_default: number; }
|
|
|
|
export function TopicSelector({ value, onChange }: Props) {
|
|
const [show, setShow] = useState(false);
|
|
const [topics, setTopics] = useState<Topic[]>([]);
|
|
const [search, setSearch] = useState('');
|
|
const [newTopic, setNewTopic] = useState('');
|
|
|
|
async function loadTopics() {
|
|
const db = await getDatabase();
|
|
const rows = await db.getAllAsync<Topic>('SELECT * FROM topics ORDER BY is_default DESC, name ASC');
|
|
setTopics(rows);
|
|
}
|
|
|
|
useEffect(() => { if (show) loadTopics(); }, [show]);
|
|
|
|
async function addCustomTopic() {
|
|
if (!newTopic.trim()) return;
|
|
const db = await getDatabase();
|
|
const id = Crypto.randomUUID();
|
|
const now = Math.floor(Date.now() / 1000);
|
|
await db.runAsync('INSERT OR IGNORE INTO topics (id, name, is_default, created_at) VALUES (?, ?, 0, ?)', [id, newTopic.trim(), now]);
|
|
setNewTopic('');
|
|
await loadTopics();
|
|
}
|
|
|
|
const filtered = topics.filter((t) => t.name.toLowerCase().includes(search.toLowerCase()));
|
|
|
|
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"
|
|
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>
|
|
|
|
<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)}
|
|
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: 44 }} />
|
|
</View>
|
|
|
|
<View className="px-4 pt-3 pb-2">
|
|
<View className="flex-row items-center bg-white border border-gray-200 rounded-xl px-3 py-2 mb-3">
|
|
<Search size={16} color="#9CA3AF" />
|
|
<TextInput className="flex-1 text-charcoal ml-2" placeholder="Search topics..." value={search} onChangeText={setSearch} />
|
|
</View>
|
|
<View className="flex-row gap-2">
|
|
<TextInput
|
|
className="flex-1 border border-gray-200 rounded-xl px-3 py-2 bg-white text-charcoal"
|
|
placeholder="Add custom topic..."
|
|
value={newTopic}
|
|
onChangeText={setNewTopic}
|
|
onSubmitEditing={addCustomTopic}
|
|
/>
|
|
<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>
|
|
</View>
|
|
|
|
<FlatList
|
|
data={filtered}
|
|
keyExtractor={(item) => item.id}
|
|
contentContainerStyle={{ paddingHorizontal: 16, paddingBottom: 40, gap: 8 }}
|
|
renderItem={({ item }) => (
|
|
<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>}
|
|
</TouchableOpacity>
|
|
)}
|
|
/>
|
|
</View>
|
|
</Modal>
|
|
</View>
|
|
);
|
|
}
|