Allow paging through My Stories

ts/components/StoryViewer.tsx

@@ -83,7 +83,7 @@ export type PropsType = {
   showToast: ShowToastActionCreatorType;
   skinTone?: number;
   story: StoryViewType;
-  storyViewMode?: StoryViewModeType;
+  storyViewMode: StoryViewModeType;
   toggleHasAllStoriesMuted: () => unknown;
   viewStory: ViewStoryActionCreatorType;
 };
@@ -303,9 +303,22 @@ export const StoryViewer = ({
     log.info('stories.markStoryRead', { messageId });
   }, [markStoryRead, messageId]);
 
+  const canFreelyNavigateStories =
+    storyViewMode === StoryViewModeType.All ||
+    storyViewMode === StoryViewModeType.Unread;
+
+  const canNavigateLeft =
+    (storyViewMode === StoryViewModeType.User && currentIndex > 0) ||
+    canFreelyNavigateStories;
+
+  const canNavigateRight =
+    (storyViewMode === StoryViewModeType.User &&
+      currentIndex < numStories - 1) ||
+    canFreelyNavigateStories;
+
   const navigateStories = useCallback(
     (ev: KeyboardEvent) => {
-      if (ev.key === 'ArrowRight') {
+      if (canNavigateRight && ev.key === 'ArrowRight') {
         viewStory({
           storyId: story.messageId,
           storyViewMode,
@@ -313,7 +326,7 @@ export const StoryViewer = ({
         });
         ev.preventDefault();
         ev.stopPropagation();
-      } else if (ev.key === 'ArrowLeft') {
+      } else if (canNavigateLeft && ev.key === 'ArrowLeft') {
         viewStory({
           storyId: story.messageId,
           storyViewMode,
@@ -323,7 +336,13 @@ export const StoryViewer = ({
         ev.stopPropagation();
       }
     },
-    [story.messageId, storyViewMode, viewStory]
+    [
+      canNavigateLeft,
+      canNavigateRight,
+      story.messageId,
+      storyViewMode,
+      viewStory,
+    ]
   );
 
   useEffect(() => {
@@ -383,8 +402,6 @@ export const StoryViewer = ({
   const replyCount = replies.length;
   const viewCount = views.length;
 
-  const hasPrevNextArrows = storyViewMode !== StoryViewModeType.Single;
-
   const canMuteStory = isVideoAttachment(attachment);
   const isStoryMuted = hasAllStoriesMuted || !canMuteStory;
 
@@ -453,7 +470,7 @@ export const StoryViewer = ({
           style={{ background: getStoryBackground(attachment) }}
         />
         <div className="StoryViewer__content">
-          {hasPrevNextArrows && (
+          {canNavigateLeft && (
             <button
               aria-label={i18n('back')}
               className={classNames(
@@ -685,7 +702,7 @@ export const StoryViewer = ({
               )}
             </div>
           </div>
-          {hasPrevNextArrows && (
+          {canNavigateRight && (
             <button
               aria-label={i18n('forward')}
               className={classNames(