From 4dc746514a53b64117f35254a6dfa7336bbbc447 Mon Sep 17 00:00:00 2001
From: billisdead <piron.antoine@gmail.com>
Date: Fri, 22 May 2026 13:40:56 +0200
Subject: [PATCH] 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 | 91 ++++++++++++--------
 1 file changed, 54 insertions(+), 37 deletions(-)

diff --git a/artifacts/postiz-mobile/app/(tabs)/posts.tsx b/artifacts/postiz-mobile/app/(tabs)/posts.tsx
index ef2770a..96ea106 100644
--- a/artifacts/postiz-mobile/app/(tabs)/posts.tsx
+++ b/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(
-      (a, b) => new Date(a.publishDate).getTime() - new Date(b.publishDate).getTime()
-    );
-  }, [posts, filter]);
+    return [...list].sort((a, b) => {
+      const diff = new Date(a.publishDate).getTime() - new Date(b.publishDate).getTime();
+      return sortOrder === "desc" ? -diff : diff;
+    });
+  }, [posts, filter, sortOrder]);
 
   const handleRefresh = async () => {
     setRefreshing(true);
@@ -249,43 +251,56 @@ export default function PostsScreen() {
         },
       ]}
     >
-      <FlatList
-        horizontal
-        data={FILTERS}
-        keyExtractor={(item) => item.key}
-        showsHorizontalScrollIndicator={false}
-        contentContainerStyle={styles.filterList}
-        renderItem={({ item }) => (
-          <TouchableOpacity
-            onPress={() => setFilter(item.key)}
-            activeOpacity={0.7}
-            style={[
-              styles.filterChip,
-              {
-                backgroundColor:
-                  filter === item.key ? colors.primary : colors.secondary,
-                borderColor:
-                  filter === item.key ? colors.primary : colors.border,
-              },
-            ]}
-          >
-            <Text
+      <View style={[styles.filterRow, { borderBottomColor: colors.border }]}>
+        <FlatList
+          horizontal
+          data={FILTERS}
+          keyExtractor={(item) => item.key}
+          showsHorizontalScrollIndicator={false}
+          contentContainerStyle={styles.filterList}
+          renderItem={({ item }) => (
+            <TouchableOpacity
+              onPress={() => setFilter(item.key)}
+              activeOpacity={0.7}
               style={[
-                styles.filterText,
+                styles.filterChip,
                 {
-                  color:
-                    filter === item.key
-                      ? colors.primaryForeground
-                      : colors.mutedForeground,
+                  backgroundColor:
+                    filter === item.key ? colors.primary : colors.secondary,
+                  borderColor:
+                    filter === item.key ? colors.primary : colors.border,
                 },
               ]}
             >
-              {item.label}
-            </Text>
-          </TouchableOpacity>
-        )}
-        style={[styles.filterBar, { borderBottomColor: colors.border }]}
-      />
+              <Text
+                style={[
+                  styles.filterText,
+                  {
+                    color:
+                      filter === item.key
+                        ? colors.primaryForeground
+                        : colors.mutedForeground,
+                  },
+                ]}
+              >
+                {item.label}
+              </Text>
+            </TouchableOpacity>
+          )}
+          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" },