endpoints to add tags

mobile/components/SearchBar.tsx

@@ -17,6 +17,8 @@ interface SearchBarProps {
   onClear: () => void;
   filters: SearchFilters;
   onFiltersChange: (f: SearchFilters) => void;
+  groupByTags: boolean;
+  onGroupToggle: () => void;
   bottomPadding?: number;
 }
 
@@ -26,7 +28,7 @@ const FILTER_OPTIONS: { key: keyof SearchFilters; label: string; icon: IconName
   { key: 'tags', label: 'Tags', icon: 'label-outline' },
 ];
 
-export function SearchBar({ query, onQueryChange, onClear, filters, onFiltersChange, bottomPadding = 0 }: SearchBarProps) {
+export function SearchBar({ query, onQueryChange, onClear, filters, onFiltersChange, groupByTags, onGroupToggle, bottomPadding = 0 }: SearchBarProps) {
   const animatedHeight = useRef(new Animated.Value(0)).current;
   const [panelOpen, setPanelOpen] = React.useState(false);
 
@@ -81,6 +83,17 @@ export function SearchBar({ query, onQueryChange, onClear, filters, onFiltersCha
             color={hasActiveFilter ? '#fff' : '#1976D2'}
           />
         </TouchableOpacity>
+
+        <TouchableOpacity
+          style={[styles.groupBtn, groupByTags && styles.groupBtnActive]}
+          onPress={onGroupToggle}
+        >
+          <MaterialIcons
+            name="folder-special"
+            size={22}
+            color={groupByTags ? '#fff' : '#1976D2'}
+          />
+        </TouchableOpacity>
       </View>
 
       <Animated.View style={[styles.filterPanel, { maxHeight: panelMaxHeight, opacity: animatedHeight }]}>
@@ -151,6 +164,19 @@ const styles = StyleSheet.create({
   filterBtnActive: {
     backgroundColor: '#1976D2',
   },
+  groupBtn: {
+    width: 40,
+    height: 40,
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: '#1976D2',
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#fff',
+  },
+  groupBtnActive: {
+    backgroundColor: '#1976D2',
+  },
   filterPanel: {
     flexDirection: 'row',
     paddingHorizontal: 12,