From d6a014ef847096a4b7531d4cbc2ea8719e0d3c0b Mon Sep 17 00:00:00 2001
From: m <m@mail.com>
Date: Fri, 28 Aug 2026 23:36:14 +0200
Subject: [PATCH] add sort into header

---
 mobile/app/index.tsx            |  5 ++
 mobile/components/SortChips.tsx | 82 +++++++++++++++++++++++++++++++++
 2 files changed, 87 insertions(+)
 create mode 100644 mobile/components/SortChips.tsx

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() {
           )}
         </View>
       )}
+      <SortChips
+        sort={sort}
+        onSortChange={setSort}
+      />
       <View style={styles.listWrapper}>
         <FlatList
           ref={listRef}
diff --git a/mobile/components/SortChips.tsx b/mobile/components/SortChips.tsx
new file mode 100644
index 0000000..297bf89
--- /dev/null
+++ b/mobile/components/SortChips.tsx
@@ -0,0 +1,82 @@
+import React from 'react';
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import { MaterialIcons } from '@expo/vector-icons';
+import type { ComponentProps } from 'react';
+import type { SortState } from './SearchBar';
+
+type IconName = ComponentProps<typeof MaterialIcons>['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 (
+    <View style={styles.container}>
+      {OPTIONS.map((opt) => {
+        const active = sort.key === opt.key;
+        return (
+          <TouchableOpacity
+            key={opt.key}
+            style={[styles.chip, active && styles.chipActive]}
+            onPress={() => select(opt.key)}
+          >
+            <MaterialIcons
+              name={active && sort.direction === 'desc' ? 'arrow-downward' : active && sort.direction === 'asc' ? 'arrow-upward' : opt.icon}
+              size={16}
+              color={active ? '#fff' : '#1976D2'}
+            />
+            <Text style={[styles.chipText, active && styles.chipTextActive]}>{opt.label}</Text>
+          </TouchableOpacity>
+        );
+      })}
+    </View>
+  );
+}
+
+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',
+  },
+});