feat: Add manual tagging UI

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)
 

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 (
     <SafeAreaView>
       <View className="p-6">
@@ -35,15 +50,31 @@ export default function KnowledgeDetailScreen() {
           {knowledgeItem.tags.length > 0 && (
             <View className="flex flex-wrap mt-2">
               {knowledgeItem.tags.map((tag, index) => (
-                <Text 
+                <TouchableOpacity 
                   key={index}
-                  className="bg-primary/10 text-primary rounded px-2 py-1 text-xs mr-2 mb-1"
+                  onPress={() => removeTag(tag)}
+                  className="bg-primary/10 text-primary rounded px-2 py-1 text-xs mr-2 mb-1 flex-row items-center"
                 >
-                  #{tag}
-                </Text>
+                  <Text>#{tag}</Text>
+                  <Text className="ml-1 text-red-500">×</Text>
+                </TouchableOpacity>
               ))}
             </View>
           )}
+
+          {/* Add New Tag */}
+          <View className="flex-row items-center mt-2">
+            <TextInput
+              value={newTag}
+              onChangeText={setNewTag}
+              placeholder="Add a tag..."
+              className="flex-1 border-b border-gray-300 pb-1"
+              onSubmitEditing={addTag}
+            />
+            <TouchableOpacity onPress={addTag} className="ml-2 px-3 py-1 bg-primary rounded">
+              <Text className="text-white text-sm">Add</Text>
+            </TouchableOpacity>
+          </View>
         </View>
 
         <View className="bg-white rounded-lg p-4">