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',
+ },
+});