From f1c9db543ed0ba3875405ff6eded7019c69fbe4a Mon Sep 17 00:00:00 2001
From: Josh Perez <60019601+josh-signal@users.noreply.github.com>
Date: Fri, 29 Jul 2022 15:26:40 -0400
Subject: [PATCH] Ensure MyStories is part of the stories pane list

---
 stylesheets/components/Stories.scss |  28 +++---
 ts/components/StoriesPane.tsx       | 128 +++++++++++++++-------------
 2 files changed, 80 insertions(+), 76 deletions(-)

diff --git a/stylesheets/components/Stories.scss b/stylesheets/components/Stories.scss
index f66c9f245d51..67a63ceb13b0 100644
--- a/stylesheets/components/Stories.scss
+++ b/stylesheets/components/Stories.scss
@@ -22,20 +22,19 @@
     padding-top: calc(14px + var(--title-bar-drag-area-height));
 
     &__settings__button {
+      @include dark-theme {
+        @include color-svg(
+          '../images/icons/v2/more-horiz-24.svg',
+          $color-white
+        );
+      }
+      height: 22px;
       margin-left: 24px;
       opacity: 1;
       position: absolute;
-      right: 12px;
-      top: -6px;
-
-      &::after {
-        @include dark-theme {
-          @include color-svg(
-            '../images/icons/v2/more-horiz-24.svg',
-            $color-white
-          );
-        }
-      }
+      right: 14px;
+      top: 0px;
+      width: 22px;
     }
 
     &__header {
@@ -99,6 +98,8 @@
 
     &__list {
       @include scrollbar;
+      display: flex;
+      flex-direction: column;
       flex: 1;
       overflow-y: overlay;
       padding: 0 14px;
@@ -108,6 +109,7 @@
         align-items: center;
         color: $color-gray-45;
         display: flex;
+        flex: 1;
         flex-direction: column;
         justify-content: center;
       }
@@ -168,8 +170,4 @@
       }
     }
   }
-
-  &__my-stories {
-    padding: 0 10px;
-  }
 }
diff --git a/ts/components/StoriesPane.tsx b/ts/components/StoriesPane.tsx
index 61c7f33a1625..1a16c8458d1c 100644
--- a/ts/components/StoriesPane.tsx
+++ b/ts/components/StoriesPane.tsx
@@ -149,70 +149,76 @@ export const StoriesPane = ({
         placeholder={i18n('search')}
         value={searchTerm}
       />
-      <MyStoriesButton
-        hasMultiple={myStories.length ? myStories[0].stories.length > 1 : false}
-        i18n={i18n}
-        me={me}
-        newestStory={
-          myStories.length ? getNewestMyStory(myStories[0]) : undefined
-        }
-        onClick={onMyStoriesClicked}
-        queueStoryDownload={queueStoryDownload}
-      />
-      <div
-        className={classNames('Stories__pane__list', {
-          'Stories__pane__list--empty': !stories.length,
-        })}
-      >
-        {renderedStories.map(story => (
-          <StoryListItem
-            conversationId={story.conversationId}
-            getPreferredBadge={getPreferredBadge}
-            group={story.group}
+      <div className="Stories__pane__list">
+        <>
+          <MyStoriesButton
+            hasMultiple={
+              myStories.length ? myStories[0].stories.length > 1 : false
+            }
             i18n={i18n}
-            key={story.storyView.timestamp}
-            onHideStory={toggleHideStories}
-            onGoToConversation={conversationId => {
-              showConversation({ conversationId });
-              toggleStoriesView();
-            }}
+            me={me}
+            newestStory={
+              myStories.length ? getNewestMyStory(myStories[0]) : undefined
+            }
+            onClick={onMyStoriesClicked}
             queueStoryDownload={queueStoryDownload}
-            story={story.storyView}
-            viewUserStories={viewUserStories}
           />
-        ))}
-        {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
-                  conversationId={story.conversationId}
-                  getPreferredBadge={getPreferredBadge}
-                  key={story.storyView.timestamp}
-                  i18n={i18n}
-                  isHidden
-                  onHideStory={toggleHideStories}
-                  onGoToConversation={conversationId => {
-                    showConversation({ conversationId });
-                    toggleStoriesView();
-                  }}
-                  queueStoryDownload={queueStoryDownload}
-                  story={story.storyView}
-                  viewUserStories={viewUserStories}
-                />
-              ))}
-          </>
-        )}
-        {!stories.length && i18n('Stories__list-empty')}
+          {renderedStories.map(story => (
+            <StoryListItem
+              conversationId={story.conversationId}
+              group={story.group}
+              getPreferredBadge={getPreferredBadge}
+              i18n={i18n}
+              key={story.storyView.timestamp}
+              onHideStory={toggleHideStories}
+              onGoToConversation={conversationId => {
+                showConversation({ conversationId });
+                toggleStoriesView();
+              }}
+              queueStoryDownload={queueStoryDownload}
+              story={story.storyView}
+              viewUserStories={viewUserStories}
+            />
+          ))}
+          {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
+                    conversationId={story.conversationId}
+                    key={story.storyView.timestamp}
+                    getPreferredBadge={getPreferredBadge}
+                    i18n={i18n}
+                    isHidden
+                    onHideStory={toggleHideStories}
+                    onGoToConversation={conversationId => {
+                      showConversation({ conversationId });
+                      toggleStoriesView();
+                    }}
+                    queueStoryDownload={queueStoryDownload}
+                    story={story.storyView}
+                    viewUserStories={viewUserStories}
+                  />
+                ))}
+            </>
+          )}
+          {!stories.length && (
+            <div className="Stories__pane__list--empty">
+              {i18n('Stories__list-empty')}
+            </div>
+          )}
+        </>
       </div>
     </>
   );