Hidden stories list/unhide stories

_locales/en/messages.json

@@ -6992,6 +6992,10 @@
     "message": "Add a story",
     "description": "Description hint to add a story"
   },
+  "Stories__hidden-stories": {
+    "message": "Hidden stories",
+    "description": "Button label to go to hidden stories pane"
+  },
   "Stories__list-empty": {
     "message": "No recent stories to show right now",
     "description": "Description for when there are no stories to show"
@@ -7042,6 +7046,10 @@
     "message": "Story",
     "description": "aria-label for the story list button"
   },
+  "StoryListItem__unhide": {
+    "message": "Show stories",
+    "description": "Label for menu item to un-hide the story"
+  },
   "StoryListItem__hide": {
     "message": "Hide story",
     "description": "Label for menu item to hide the story"

stylesheets/components/Stories.scss

@@ -132,4 +132,35 @@
       );
     }
   }
+
+  &__hidden-stories {
+    @include button-reset;
+    @include font-body-1-bold;
+    align-items: center;
+    color: $color-gray-05;
+    display: flex;
+    justify-content: space-between;
+    padding: 12px 24px;
+    position: relative;
+    width: 100%;
+
+    &::after {
+      @include color-svg(
+        '../images/icons/v2/chevron-right-24.svg',
+        $color-gray-05
+      );
+      content: '';
+      height: 16px;
+      width: 16px;
+    }
+
+    &--expanded {
+      &::after {
+        @include color-svg(
+          '../images/icons/v2/chevron-down-24.svg',
+          $color-gray-05
+        );
+      }
+    }
+  }
 }

ts/components/Stories.tsx

@@ -52,7 +52,7 @@ export const Stories = ({
             const storyIndex = stories.findIndex(
               x => x.conversationId === conversationIdToView
             );
-            if (storyIndex >= stories.length - 1) {
+            if (storyIndex >= stories.length - 1 || storyIndex === -1) {
               setConversationIdToView(undefined);
               return;
             }
@@ -63,7 +63,7 @@ export const Stories = ({
             const storyIndex = stories.findIndex(
               x => x.conversationId === conversationIdToView
             );
-            if (storyIndex === 0) {
+            if (storyIndex <= 0) {
               setConversationIdToView(undefined);
               return;
             }
@@ -77,16 +77,7 @@ export const Stories = ({
             hiddenStories={hiddenStories}
             i18n={i18n}
             onBack={toggleStoriesView}
-            onStoryClicked={conversationId => {
-              const storyIndex = stories.findIndex(
-                x => x.conversationId === conversationId
-              );
-              const foundStory = stories[storyIndex];
-
-              if (foundStory) {
-                setConversationIdToView(conversationId);
-              }
-            }}
+            onStoryClicked={setConversationIdToView}
             openConversationInternal={openConversationInternal}
             queueStoryDownload={queueStoryDownload}
             stories={stories}

ts/components/StoriesPane.tsx

@@ -61,6 +61,7 @@ export type PropsType = {
 };
 
 export const StoriesPane = ({
+  hiddenStories,
   i18n,
   onBack,
   onStoryClicked,
@@ -70,6 +71,7 @@ export const StoriesPane = ({
   toggleHideStories,
 }: PropsType): JSX.Element => {
   const [searchTerm, setSearchTerm] = useState('');
+  const [isShowingHiddenStories, setIsShowingHiddenStories] = useState(false);
   const [renderedStories, setRenderedStories] =
     useState<Array<ConversationStoryType>>(stories);
 
@@ -127,6 +129,38 @@ export const StoriesPane = ({
             story={getNewestStory(story)}
           />
         ))}
+        {Boolean(hiddenStories.length) && (
+          <>
+            <button
+              className={classNames('Stories__hidden-stories', {
+                'Stories__hidden-stories--expanded': isShowingHiddenStories,
+              })}
+              onClick={() => setIsShowingHiddenStories(!isShowingHiddenStories)}
+              type="button"
+            >
+              {i18n('Stories__hidden-stories')}
+            </button>
+            {isShowingHiddenStories &&
+              hiddenStories.map(story => (
+                <StoryListItem
+                  key={getNewestStory(story).timestamp}
+                  i18n={i18n}
+                  isHidden
+                  onClick={() => {
+                    onStoryClicked(story.conversationId);
+                  }}
+                  onHideStory={() => {
+                    toggleHideStories(getNewestStory(story).sender.id);
+                  }}
+                  onGoToConversation={conversationId => {
+                    openConversationInternal({ conversationId });
+                  }}
+                  queueStoryDownload={queueStoryDownload}
+                  story={getNewestStory(story)}
+                />
+              ))}
+          </>
+        )}
         {!stories.length && i18n('Stories__list-empty')}
       </div>
     </>

ts/components/StoryListItem.tsx

@@ -213,9 +213,15 @@ export const StoryListItem = ({
         menuOptions={[
           {
             icon: 'StoryListItem__icon--hide',
-            label: i18n('StoryListItem__hide'),
+            label: isHidden
+              ? i18n('StoryListItem__unhide')
+              : i18n('StoryListItem__hide'),
             onClick: () => {
+              if (isHidden) {
+                onHideStory?.(sender.id);
+              } else {
                 setHasConfirmHideStory(true);
+              }
             },
           },
           {