Fix download media banner styles

stylesheets/_modules.scss

@@ -5352,9 +5352,7 @@ button.module-calling-participants-list__contact {
 }
 
 .module-left-pane__dialogs {
-  &:first-child {
-    margin-top: 8px;
-  }
+  margin-bottom: 8px;
 }
 
 .module-left-pane__header {

stylesheets/components/BackupMediaDownloadProgress.scss

@@ -2,12 +2,14 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 .BackupMediaDownloadProgress {
-  border-radius: 10px;
+  border-radius: 12px;
   display: flex;
   gap: 10px;
   padding: 11px;
   padding-inline-end: 16px;
   margin-inline: 10px;
+  margin-block-end: 6px;
+  margin-block-start: 2px;
   user-select: none;
   position: relative;
 

ts/components/BackupMediaDownloadProgress.tsx

@@ -35,7 +35,8 @@ export function BackupMediaDownloadProgress({
 }: PropsType): JSX.Element | null {
   const [isShowingCancelConfirmation, setIsShowingCancelConfirmation] =
     useState(false);
-  if (totalBytes === 0) {
+
+  if (totalBytes <= 0) {
     return null;
   }
 

ts/components/LeftPane.stories.tsx

@@ -80,6 +80,13 @@ const defaultGroups: Array<GroupListItemConversationType> = [
   }),
 ];
 
+const backupMediaDownloadProgress = {
+  downloadedBytes: 1024,
+  totalBytes: 4098,
+  downloadBannerDismissed: false,
+  isIdle: false,
+  isPaused: false,
+};
 const defaultArchivedConversations: Array<ConversationType> = [
   getDefaultConversation({
     id: 'michelle-archive-convo',
@@ -342,6 +349,45 @@ export function InboxNoConversations(): JSX.Element {
   );
 }
 
+export function InboxBackupMediaDownload(): JSX.Element {
+  return (
+    <LeftPaneInContainer
+      {...useProps({
+        backupMediaDownloadProgress,
+      })}
+    />
+  );
+}
+
+export function InboxBackupMediaDownloadWithDialogs(): JSX.Element {
+  return (
+    <LeftPaneInContainer
+      {...useProps({
+        backupMediaDownloadProgress,
+        unsupportedOSDialogType: 'error',
+      })}
+    />
+  );
+}
+export function InboxBackupMediaDownloadWithDialogsAndUnpinnedConversations(): JSX.Element {
+  return (
+    <LeftPaneInContainer
+      {...useProps({
+        backupMediaDownloadProgress,
+        unsupportedOSDialogType: 'error',
+        modeSpecificProps: {
+          ...defaultSearchProps,
+          mode: LeftPaneMode.Inbox,
+          pinnedConversations: [],
+          conversations: defaultConversations,
+          archivedConversations: [],
+          isAboutToSearch: false,
+        },
+      })}
+    />
+  );
+}
+
 export function InboxUsernameCorrupted(): JSX.Element {
   return (
     <LeftPaneInContainer
@@ -480,6 +526,24 @@ export function InboxPinnedAndNonPinnedConversations(): JSX.Element {
   );
 }
 
+export function InboxPinnedAndNonPinnedConversationsWithBackupDownload(): JSX.Element {
+  return (
+    <LeftPaneInContainer
+      {...useProps({
+        modeSpecificProps: {
+          ...defaultSearchProps,
+          mode: LeftPaneMode.Inbox,
+          pinnedConversations,
+          conversations: defaultConversations,
+          archivedConversations: [],
+          isAboutToSearch: false,
+        },
+        backupMediaDownloadProgress,
+      })}
+    />
+  );
+}
+
 export function InboxPinnedNonPinnedAndArchivedConversations(): JSX.Element {
   return <LeftPaneInContainer {...useProps()} />;
 }

ts/components/LeftPane.tsx

@@ -651,27 +651,6 @@ export function LeftPane({
     dialogs.push({ key: 'banner', dialog: maybeBanner });
   }
 
-  const hasMediaBeenQueuedForBackup =
-    backupMediaDownloadProgress?.totalBytes > 0;
-  if (
-    hasMediaBeenQueuedForBackup &&
-    !backupMediaDownloadProgress.downloadBannerDismissed
-  ) {
-    dialogs.push({
-      key: 'backupMediaDownload',
-      dialog: (
-        <BackupMediaDownloadProgress
-          i18n={i18n}
-          {...backupMediaDownloadProgress}
-          handleClose={dismissBackupMediaDownloadBanner}
-          handlePause={pauseBackupMediaDownload}
-          handleResume={resumeBackupMediaDownload}
-          handleCancel={cancelBackupMediaDownload}
-        />
-      ),
-    });
-  }
-
   const hideHeader =
     modeSpecificProps.mode === LeftPaneMode.Archive ||
     modeSpecificProps.mode === LeftPaneMode.Compose ||
@@ -680,6 +659,9 @@ export function LeftPane({
     modeSpecificProps.mode === LeftPaneMode.ChooseGroupMembers ||
     modeSpecificProps.mode === LeftPaneMode.SetGroupMetadata;
 
+  const showBackupMediaDownloadProgress =
+    !hideHeader && !backupMediaDownloadProgress.downloadBannerDismissed;
+
   return (
     <NavSidebar
       title={i18n('icu:LeftPane--chats')}
@@ -770,12 +752,24 @@ export function LeftPane({
             })}
           </NavSidebarSearchHeader>
         )}
-        <div className="module-left-pane__dialogs">
-          {!hideHeader &&
-            dialogs.map(({ key, dialog }) => (
+
+        {dialogs.length && !hideHeader ? (
+          <div className="module-left-pane__dialogs">
+            {dialogs.map(({ key, dialog }) => (
               <React.Fragment key={key}>{dialog}</React.Fragment>
             ))}
-        </div>
+          </div>
+        ) : null}
+        {showBackupMediaDownloadProgress ? (
+          <BackupMediaDownloadProgress
+            i18n={i18n}
+            {...backupMediaDownloadProgress}
+            handleClose={dismissBackupMediaDownloadBanner}
+            handlePause={pauseBackupMediaDownload}
+            handleResume={resumeBackupMediaDownload}
+            handleCancel={cancelBackupMediaDownload}
+          />
+        ) : null}
         {preRowsNode && <React.Fragment key={0}>{preRowsNode}</React.Fragment>}
         <div className="module-left-pane__list--measure" ref={measureRef}>
           <div className="module-left-pane__list--wrapper">