diff --git a/TODO.md b/TODO.md index 094462e..53bc869 100644 --- a/TODO.md +++ b/TODO.md @@ -31,7 +31,7 @@ ### 5. Organization & Library - [ ] Create auto-organized sections (All Notes, Ideas, Tasks, Projects, People) -- [ ] Implement manual tagging UI +- [x] Implement manual tagging UI - [ ] Create folders system (optional) - [ ] Implement graph/connections view (using react-native-graph or similar) diff --git a/app/knowledge/[id].tsx b/app/knowledge/[id].tsx index 1f51288..285e69e 100644 --- a/app/knowledge/[id].tsx +++ b/app/knowledge/[id].tsx @@ -1,13 +1,16 @@ -import { View, Text, SafeAreaView, Platform } from 'react-native'; +import { View, Text, TextInput, TouchableOpacity, SafeAreaView, Platform } from 'react-native'; import { useRouter, useParams } from 'expo-router'; +import { useKnowledgeStore } from '../lib/store'; import type { KnowledgeItem } from '../types/knowledge'; export default function KnowledgeDetailScreen() { const router = useRouter(); const { id } = useParams<{ id: string }>(); + const { items, updateItem } = useKnowledgeStore(); + const [newTag, setNewTag] = useState(''); - // Mock data - in real app, fetch from database - const knowledgeItem: KnowledgeItem = { + // Get item from store + const knowledgeItem = items.find(item => item.id === id) || { id: '1', title: 'React Native Performance Tips', content: 'Learned about useMemo and useCallback optimizations for large lists. Also discovered that using FlatList with removeClippedSubviews can significantly improve performance for long lists.', @@ -16,6 +19,18 @@ export default function KnowledgeDetailScreen() { tags: ['React Native', 'Performance'], }; + const addTag = () => { + if (!newTag.trim()) return; + const updatedTags = [...knowledgeItem.tags, newTag.trim()]; + updateItem(id, { tags: updatedTags }); + setNewTag(''); + }; + + const removeTag = (tagToRemove: string) => { + const updatedTags = knowledgeItem.tags.filter(tag => tag !== tagToRemove); + updateItem(id, { tags: updatedTags }); + }; + return ( @@ -35,15 +50,31 @@ export default function KnowledgeDetailScreen() { {knowledgeItem.tags.length > 0 && ( {knowledgeItem.tags.map((tag, index) => ( - removeTag(tag)} + className="bg-primary/10 text-primary rounded px-2 py-1 text-xs mr-2 mb-1 flex-row items-center" > - #{tag} - + #{tag} + × + ))} )} + + {/* Add New Tag */} + + + + Add + +