feat: add sort toggle (newest/oldest) in posts filter bar

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

artifacts/postiz-mobile/app/(tabs)/posts.tsx

@@ -57,6 +57,7 @@ export default function PostsScreen() {
   const queryClient = useQueryClient();
   const router = useRouter();
   const [filter, setFilter] = useState<FilterType>("all");
+  const [sortOrder, setSortOrder] = useState<"desc" | "asc">("desc");
   const [refreshing, setRefreshing] = useState(false);
 
   // reschedule state
@@ -91,10 +92,11 @@ export default function PostsScreen() {
       filter === "all"
         ? posts ?? []
         : (posts ?? []).filter((p) => p.state === filter);
-    return [...list].sort(
+    return [...list].sort((a, b) => {
-      (a, b) => new Date(a.publishDate).getTime() - new Date(b.publishDate).getTime()
+      const diff = new Date(a.publishDate).getTime() - new Date(b.publishDate).getTime();
-    );
+      return sortOrder === "desc" ? -diff : diff;
-  }, [posts, filter]);
+    });
+  }, [posts, filter, sortOrder]);
 
   const handleRefresh = async () => {
     setRefreshing(true);
@@ -249,6 +251,7 @@ export default function PostsScreen() {
         },
       ]}
     >
+      <View style={[styles.filterRow, { borderBottomColor: colors.border }]}>
         <FlatList
           horizontal
           data={FILTERS}
@@ -284,8 +287,20 @@ export default function PostsScreen() {
               </Text>
             </TouchableOpacity>
           )}
-        style={[styles.filterBar, { borderBottomColor: colors.border }]}
+          style={styles.filterBar}
         />
+        <TouchableOpacity
+          onPress={() => setSortOrder((o) => (o === "desc" ? "asc" : "desc"))}
+          activeOpacity={0.7}
+          style={[styles.sortBtn, { borderColor: colors.border, backgroundColor: colors.secondary }]}
+        >
+          <Feather
+            name={sortOrder === "desc" ? "arrow-down" : "arrow-up"}
+            size={14}
+            color={colors.mutedForeground}
+          />
+        </TouchableOpacity>
+      </View>
 
       {isLoading ? (
         <View style={styles.centered}>
@@ -389,9 +404,11 @@ const styles = StyleSheet.create({
     gap: 10,
     paddingHorizontal: 32,
   },
-  filterBar: { borderBottomWidth: StyleSheet.hairlineWidth, flexGrow: 0 },
+  filterRow: { flexDirection: "row", alignItems: "center", borderBottomWidth: StyleSheet.hairlineWidth },
+  filterBar: { flex: 1 },
   filterList: { paddingHorizontal: 16, paddingVertical: 10, gap: 8 },
   filterChip: { paddingHorizontal: 14, paddingVertical: 6, borderRadius: 20, borderWidth: 1 },
+  sortBtn: { marginRight: 12, padding: 7, borderRadius: 8, borderWidth: 1 },
   filterText: { fontSize: 13, fontFamily: "Inter_500Medium" },
   emptyState: { alignItems: "center", paddingTop: 64, gap: 10 },
   emptyTitle: { fontSize: 18, fontFamily: "Inter_600SemiBold" },