add progress bar to data transfer

src/View/ChatPages/settingsPage.tsx

@@ -140,11 +140,12 @@ export function SettingsPage(
                         <div class="flex-row width-input">
                             <button
                                 class="width-50"
-                                on:click={
-                                    settingsPageViewModel.randomizeKey
-                                }
+                                on:click={settingsPageViewModel.randomizeKey}
                             >
-                                {coreViewModel.translations.chatPage.settings.randomizeKey}
+                                {
+                                    coreViewModel.translations.chatPage.settings
+                                        .randomizeKey
+                                }
                                 <span class="icon">shuffle</span>
                             </button>
                             <button
@@ -176,7 +177,7 @@ export function SettingsPage(
                                 coreViewModel.translations.chatPage.settings
                                     .showEncryptionKey
                             }
-			</label>
+                        </label>
 
                         <hr></hr>
 

src/View/ChatPages/taskPage.tsx

@@ -65,10 +65,10 @@ export function TaskPage(
                                 class="no-outline"
                                 bind:value={taskPageViewModel.boardQuery}
                                 on:enter={taskPageViewModel.createBoard}
-                                placeholder={
-                                    coreViewModel.translations.general
-                                        .filterOrCreateLabel(coreViewModel.translations.chatPage.task.typeBoard)
-                                }
+                                placeholder={coreViewModel.translations.general.filterOrCreateLabel(
+                                    coreViewModel.translations.chatPage.task
+                                        .typeBoard,
+                                )}
                             ></input>
                         </div>
                     </div>

src/View/Components/boardViewToggleButton.tsx

@@ -12,8 +12,8 @@ export function BoardViewToggleButton(
     key: string,
 ) {
     function select() {
-	boardViewModel.selectedPage.value = page;
-	boardViewModel.resetPinchZoom();
+        boardViewModel.selectedPage.value = page;
+        boardViewModel.resetPinchZoom();
     }
 
     const isSelected = React.createProxyState(

src/View/Components/progressBar.tsx

@@ -0,0 +1,24 @@
+import * as React from "../../react";
+
+export function ProgressBar(
+    valueLabel: React.State<string>,
+    value: React.State<number>,
+    maximum: React.State<number>,
+) {
+    const style = React.createProxyState(
+        [value, maximum],
+        () => `width: ${100 * (value.value / maximum.value)}%`,
+    );
+
+    return (
+        <div>
+            <div class="width-100 surface-alt" style="height: 18px">
+                <div
+                    class="height-100 background-primary"
+                    set:style={style}
+                ></div>
+            </div>
+            <span class="secondary" subscribe:innerText={valueLabel}></span>
+        </div>
+    );
+}

src/View/Modals/dataTransferModal.tsx

@@ -1,6 +1,7 @@
 import { ViewController } from "../viewController";
 import { CommonKeys, getKeySymbol } from "../keystrokes";
 import { StringToTextSpan } from "../Components/textSpan";
+import { ProgressBar } from "../Components/progressBar";
 import * as React from "../../react";
 import FileTransferViewModel, {
     FileTransferModals,
@@ -370,6 +371,18 @@ function TransferDisplayModal(
             FileTransferModals.TransferDisplay,
     );
 
+    const progressLabel = React.createProxyState(
+        [
+            fileTransferViewModel.fileTransferProgress,
+            fileTransferViewModel.fileTransferTotal,
+        ],
+        () =>
+            coreViewModel.translations.dataTransferModal.filesSentProgress(
+                fileTransferViewModel.fileTransferProgress.value,
+                fileTransferViewModel.fileTransferTotal.value,
+            ),
+    );
+
     return (
         <div class="modal" toggle:open={isPresented}>
             <div>
@@ -381,24 +394,11 @@ function TransferDisplayModal(
                         }
                     </h2>
 
-                    <p
-                        class="secondary"
-                        subscribe:innerText={
-                            fileTransferViewModel.filesSentText
-                        }
-                    ></p>
-
-                    <p
-                        class="secondary"
-                        toggle:hidden={
-                            fileTransferViewModel.didNotFinishSending
-                        }
-                    >
-                        {
-                            coreViewModel.translations.dataTransferModal
-                                .allFilesSent
-                        }
-                    </p>
+                    {ProgressBar(
+                        progressLabel,
+                        fileTransferViewModel.fileTransferProgress,
+                        fileTransferViewModel.fileTransferTotal,
+                    )}
 
                     <hr></hr>
 
@@ -460,13 +460,7 @@ function TransferDisplayModal(
                         }
                         <span class="icon">restart_alt</span>
                     </button>
-                    <button
-                        class="flex"
-                        on:click={fileTransferViewModel.close}
-                        toggle:disabled={
-                            fileTransferViewModel.didNotFinishSending
-                        }
-                    >
+                    <button class="flex" on:click={fileTransferViewModel.close}>
                         {coreViewModel.translations.general.closeButton}
                         <span class="icon">close</span>
                     </button>
@@ -588,6 +582,18 @@ function DataReceptionModal(
             FileTransferModals.ReceptionDisplay,
     );
 
+    const progressLabel = React.createProxyState(
+        [
+            fileTransferViewModel.fileTransferProgress,
+            fileTransferViewModel.fileTransferTotal,
+        ],
+        () =>
+            coreViewModel.translations.dataTransferModal.filesReceivedProgress(
+                fileTransferViewModel.fileTransferProgress.value,
+                fileTransferViewModel.fileTransferTotal.value,
+            ),
+    );
+
     return (
         <div class="modal" toggle:open={isPresented}>
             <div>
@@ -599,12 +605,11 @@ function DataReceptionModal(
                         }
                     </h2>
 
-                    <p
-                        class="secondary"
-                        subscribe:innerText={
-                            fileTransferViewModel.filesReceivedText
-                        }
-                    ></p>
+                    {ProgressBar(
+                        progressLabel,
+                        fileTransferViewModel.fileTransferProgress,
+                        fileTransferViewModel.fileTransferTotal,
+                    )}
 
                     <hr></hr>
 

src/View/homePage.css

@@ -50,7 +50,7 @@
 
 @media (min-width: 640px) {
     #home-page > div {
-	gap: var(--content-padding);
+        gap: var(--content-padding);
     }
 
     #home-page #overview-section {
@@ -66,11 +66,11 @@
 
 @media (min-width: 1000px) {
     #home-page > div {
-	gap: var(--large-gap);
+        gap: var(--large-gap);
     }
 
     #home-page > h1 {
-	padding-top: 3rem;
-	padding-bottom: 1rem;
+        padding-top: 3rem;
+        padding-bottom: 1rem;
     }
 }

src/View/homePage.tsx

@@ -1,5 +1,6 @@
 import "./homePage.css";
 import { StringToOption } from "./Components/option";
+import { NewItemEntry } from "./Components/newItemEntry";
 import { HomePageButton } from "./Components/homePageButton";
 import { ChatViewModelToChatEntry } from "./Components/chatEntry";
 import * as React from "../react";
@@ -9,7 +10,6 @@ import FileTransferViewModel from "../ViewModel/Global/fileTransferViewModel";
 import CoreViewModel from "../ViewModel/Global/coreViewModel";
 import ConnectionViewModel from "../ViewModel/Global/connectionViewModel";
 import ChatListViewModel from "../ViewModel/Chat/chatListViewModel";
-import {NewItemEntry} from "./Components/newItemEntry";
 
 export function HomePage(
     coreViewModel: CoreViewModel,
@@ -19,9 +19,18 @@ export function HomePage(
     fileTransferViewModel: FileTransferViewModel,
     chatListViewModel: ChatListViewModel,
 ) {
-    const greeting = React.createProxyState([settingsViewModel.username], ()=>coreViewModel.translations.homePage.greeting(settingsViewModel.username.value));
+    const greeting = React.createProxyState([settingsViewModel.username], () =>
+        coreViewModel.translations.homePage.greeting(
+            settingsViewModel.username.value,
+        ),
+    );
 
-    const isChatPlaceholderHidden = React.createProxyState([chatListViewModel.chatMatches, chatListViewModel.chatQuery], ()=>chatListViewModel.chatMatches.value.size > 0 || chatListViewModel.chatQuery.value != "");
+    const isChatPlaceholderHidden = React.createProxyState(
+        [chatListViewModel.chatMatches, chatListViewModel.chatQuery],
+        () =>
+            chatListViewModel.chatMatches.value.size > 0 ||
+            chatListViewModel.chatQuery.value != "",
+    );
 
     // sections
     const overviewSection = (
@@ -119,8 +128,8 @@ export function HomePage(
                 <span subscribe:innerText={coreViewModel.updateText}></span>
                 <span class="icon">update</span>
             </button>
-	
-	    <hr class="mobile-only"></hr>
+
+            <hr class="mobile-only"></hr>
         </div>
     );
 
@@ -128,25 +137,25 @@ export function HomePage(
         <div id="chat-section">
             <div class="flex-row width-input">
                 <input
-                                placeholder={
-                                    coreViewModel.translations.general
-                                        .filterOrCreateLabel(coreViewModel.translations.homePage.typeChat)
-                                }
+                    placeholder={coreViewModel.translations.general.filterOrCreateLabel(
+                        coreViewModel.translations.homePage.typeChat,
+                    )}
                     bind:value={chatListViewModel.chatQuery}
                     on:enter={chatListViewModel.createChat}
                 ></input>
-	    </div>
+            </div>
 
-	    <hr></hr>
+            <hr></hr>
 
-	    {NewItemEntry(coreViewModel, chatListViewModel.chatQuery, chatListViewModel.createChat)}
+            {NewItemEntry(
+                coreViewModel,
+                chatListViewModel.chatQuery,
+                chatListViewModel.createChat,
+            )}
 
-	    <span
-		class="secondary"
-		toggle:hidden={isChatPlaceholderHidden}
-	    >
-		{coreViewModel.translations.homePage.noChatsPlaceholder}
-	    </span>
+            <span class="secondary" toggle:hidden={isChatPlaceholderHidden}>
+                {coreViewModel.translations.homePage.noChatsPlaceholder}
+            </span>
 
             <div
                 id="chat-grid"
@@ -154,14 +163,14 @@ export function HomePage(
                     chatListViewModel.chatMatches,
                     ChatViewModelToChatEntry,
                 ]}
-	    ></div>
+            ></div>
         </div>
     );
 
     // final
     return (
-	<article id="home-page">
-	    <h1 subscribe:innerText={greeting}></h1>
+        <article id="home-page">
+            <h1 subscribe:innerText={greeting}></h1>
             <div>
                 {overviewSection}
                 {chatSection}