Hidden stories list/unhide stories

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: () => {
-              setHasConfirmHideStory(true);
+              if (isHidden) {
+                onHideStory?.(sender.id);
+              } else {
+                setHasConfirmHideStory(true);
+              }
             },
           },
           {