diff --git a/mobile/app/index.tsx b/mobile/app/index.tsx index 743ff72..7be89f5 100644 --- a/mobile/app/index.tsx +++ b/mobile/app/index.tsx @@ -8,6 +8,7 @@ import { useAddTags, useMoveResources, useFolders, useFiles, useFreeLocalSpace, import { SelectionPanel } from '../components/SelectionPanel'; import { UnifiedFileItem, isFolder } from '../types'; import { SearchBar, SearchFilters, SortState } from '../components/SearchBar'; +import { SortChips } from '../components/SortChips'; import { FileCard } from '../components/FileCard'; import { SettingsModal } from '../components/SettingsModal'; import { ConfirmModal, type ConfirmOption } from '../components/ConfirmModal'; @@ -460,6 +461,10 @@ export function HomeScreen() { )} )} + ['name']; + +interface SortChipsProps { + sort: SortState; + onSortChange: (s: SortState) => void; +} + +const OPTIONS: { key: SortState['key']; label: string; icon: IconName }[] = [ + { key: 'name', label: 'A-Z', icon: 'sort-by-alpha' }, + { key: 'date', label: 'Date', icon: 'schedule' }, +]; + +export function SortChips({ sort, onSortChange }: SortChipsProps) { + const select = (key: SortState['key']) => { + if (sort.key === key) { + onSortChange({ key, direction: sort.direction === 'asc' ? 'desc' : 'asc' }); + } else { + onSortChange({ key, direction: key === 'name' ? 'asc' : 'desc' }); + } + }; + + return ( + + {OPTIONS.map((opt) => { + const active = sort.key === opt.key; + return ( + select(opt.key)} + > + + {opt.label} + + ); + })} + + ); +} + +const styles = StyleSheet.create({ + container: { + flexDirection: 'row', + alignItems: 'center', + gap: 8, + paddingHorizontal: 15, + paddingVertical: 8, + backgroundColor: '#f5f5f5', + }, + chip: { + flexDirection: 'row', + alignItems: 'center', + gap: 4, + paddingHorizontal: 12, + paddingVertical: 6, + borderRadius: 16, + borderWidth: 1, + borderColor: '#1976D2', + backgroundColor: '#fff', + }, + chipActive: { + backgroundColor: '#1976D2', + }, + chipText: { + fontSize: 13, + fontWeight: '600', + color: '#1976D2', + }, + chipTextActive: { + color: '#fff', + }, +});