Change the MyStories sort order

ts/components/MyStoriesButton.tsx

@@ -10,6 +10,7 @@ import type { StoryViewType } from '../types/Stories';
 import { Avatar, AvatarSize } from './Avatar';
 import { StoryImage } from './StoryImage';
 import { getAvatarColor } from '../types/Colors';
+import { MessageTimestamp } from './conversation/MessageTimestamp';
 
 import { StoriesAddStoryButton } from './StoriesAddStoryButton';
 
@@ -129,11 +130,15 @@ export const MyStoriesButton = ({
         tabIndex={0}
       >
         <div className="StoryListItem__info">
-          <>
+          <div className="StoryListItem__info--title">
-            <div className="StoryListItem__info--title">
+            {i18n('Stories__mine')}
-              {i18n('Stories__mine')}
+          </div>
-            </div>
+          <MessageTimestamp
-          </>
+            i18n={i18n}
+            isRelativeTime
+            module="StoryListItem__info--timestamp"
+            timestamp={newestStory.timestamp}
+          />
         </div>
         <div
           aria-label={i18n('StoryListItem__label')}

ts/components/StoriesPane.tsx

@@ -59,7 +59,7 @@ function search(
 }
 
 function getNewestMyStory(story: MyStoryType): StoryViewType {
-  return story.stories[story.stories.length - 1];
+  return story.stories[0];
 }
 
 export type PropsType = {

ts/state/selectors/stories.ts

@@ -74,6 +74,26 @@ function sortByRecencyAndUnread(
   return storyA.storyView.timestamp > storyB.storyView.timestamp ? -1 : 1;
 }
 
+function sortMyStories(storyA: MyStoryType, storyB: MyStoryType): number {
+  if (storyA.id === MY_STORIES_ID) {
+    return -1;
+  }
+
+  if (storyB.id === MY_STORIES_ID) {
+    return 1;
+  }
+
+  if (!storyA.stories.length) {
+    return 1;
+  }
+
+  if (!storyB.stories.length) {
+    return -1;
+  }
+
+  return storyA.stories[0].timestamp > storyB.stories[0].timestamp ? -1 : 1;
+}
+
 function getAvatarData(
   conversation: ConversationType
 ): Pick<
@@ -318,7 +338,7 @@ export const getStories = createSelector(
         myStoriesById.set(sentId, {
           id: sentId,
           name: sentName,
-          stories: [...existingMyStory.stories, storyView],
+          stories: [storyView, ...existingMyStory.stories],
         });
 
         return;
@@ -345,7 +365,7 @@ export const getStories = createSelector(
 
     return {
       hiddenStories: Array.from(hiddenStoriesById.values()),
-      myStories: Array.from(myStoriesById.values()),
+      myStories: Array.from(myStoriesById.values()).sort(sortMyStories),
       stories: Array.from(storiesById.values()).sort(sortByRecencyAndUnread),
     };
   }