Add a backup media download progress bar

ts/components/BackupMediaDownloadProgress.tsx

@@ -0,0 +1,48 @@
+// Copyright 2024 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import React from 'react';
+
+import type { LocalizerType } from '../types/Util';
+import { formatFileSize } from '../util/formatFileSize';
+import { ProgressBar } from './ProgressBar';
+
+export type PropsType = Readonly<{
+  i18n: LocalizerType;
+  downloadedBytes: number;
+  totalBytes: number;
+}>;
+
+export function BackupMediaDownloadProgressBanner({
+  i18n,
+  downloadedBytes,
+  totalBytes,
+}: PropsType): JSX.Element | null {
+  if (totalBytes === 0) {
+    return null;
+  }
+
+  const fractionComplete = Math.max(
+    0,
+    Math.min(1, downloadedBytes / totalBytes)
+  );
+
+  return (
+    <div className="BackupMediaDownloadProgressBanner">
+      <div className="BackupMediaDownloadProgressBanner__icon" />
+      <div className="BackupMediaDownloadProgressBanner__content">
+        <div className="BackupMediaDownloadProgressBanner__title">
+          {i18n('icu:BackupMediaDownloadProgress__title')}
+        </div>
+        <ProgressBar fractionComplete={fractionComplete} />
+        <div className="BackupMediaDownloadProgressBanner__progressbar-hint">
+          {i18n('icu:BackupMediaDownloadProgress__progressbar-hint', {
+            currentSize: formatFileSize(downloadedBytes),
+            totalSize: formatFileSize(totalBytes),
+            fractionComplete,
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}