From dfac7a5089d3175ca9a1e900baf4f9cb3b4b01a8 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Mon, 20 Oct 2025 20:31:28 +0200
Subject: [PATCH] feat: sort writings by publication date, newest first

- Add sorting to Profile component's cachedWritings
- Sort by publication date (or created_at as fallback) with newest first
- Ensures consistent sorting across all writings displays
- Uses useMemo for performance optimization
---
 src/components/Profile.tsx | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/components/Profile.tsx b/src/components/Profile.tsx
index 2c4dd659..aead399c 100644
--- a/src/components/Profile.tsx
+++ b/src/components/Profile.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from 'react'
+import React, { useState, useEffect, useCallback, useMemo } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faHighlighter, faPenToSquare } from '@fortawesome/free-solid-svg-icons'
 import { IEventStore } from 'applesauce-core'
@@ -57,6 +57,15 @@ const Profile: React.FC<ProfileProps> = ({
     [pubkey]
   )
 
+  // Sort writings by publication date, newest first
+  const sortedWritings = useMemo(() => {
+    return cachedWritings.slice().sort((a, b) => {
+      const timeA = a.published || a.event.created_at
+      const timeB = b.published || b.event.created_at
+      return timeB - timeA
+    })
+  }, [cachedWritings])
+
   // Update local state when prop changes
   useEffect(() => {
     if (propActiveTab) {
@@ -168,7 +177,7 @@ const Profile: React.FC<ProfileProps> = ({
   }
 
   const npub = nip19.npubEncode(pubkey)
-  const showSkeletons = cachedHighlights.length === 0 && cachedWritings.length === 0
+  const showSkeletons = cachedHighlights.length === 0 && sortedWritings.length === 0
 
   const renderTabContent = () => {
     switch (activeTab) {
@@ -209,13 +218,13 @@ const Profile: React.FC<ProfileProps> = ({
             </div>
           )
         }
-        return cachedWritings.length === 0 ? (
+        return sortedWritings.length === 0 ? (
           <div className="explore-loading" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '4rem', color: 'var(--text-secondary)' }}>
             No articles written yet.
           </div>
         ) : (
           <div className="explore-grid">
-            {cachedWritings.map((post) => (
+            {sortedWritings.map((post) => (
               <BlogPostCard
                 key={post.event.id}
                 post={post}