Fixed download sizes and directory highlighting

Co-Authored-By: Claude Opus 5.5 <[email protected]>

Frontend/src/Components/Sidebar.jsx

@@ -45,7 +45,6 @@ function TreeNode({
   const [ErrorMessage, SetErrorMessage] = useState(null);
   const FullPath = ParentPath ? `${ParentPath}/${Entry.Name}` : Entry.Name;
   const IsSelected = SelectedFile === FullPath;
-  const IsCurrentDirectory = Entry.IsDirectory && CurrentDirectoryPath === FullPath;
   const IsAncestorOfCurrentDirectory =
     Entry.IsDirectory &&
     CurrentDirectoryPath &&
@@ -144,7 +143,7 @@ function TreeNode({
     <div className="TreeNode">
       <div
         className={`TreeRow${IsSelected ? " TreeRowSelected" : ""}${
-          IsCurrentDirectory ? " TreeRowCurrentDirectory" : ""
+          IsAncestorOfCurrentDirectory ? " TreeRowCurrentDirectory" : ""
         }`}
         onClick={ToggleExpand}
       >

Frontend/src/Components/UploadToast.jsx

@@ -1,6 +1,6 @@
 import React, { useSyncExternalStore } from "react";
 
-import { FormatSize, GetUploadState, SubscribeUploads } from "../Upload.js";
+import { FormatDuration, FormatSize, GetUploadState, SubscribeUploads } from "../Upload.js";
 
 export default function UploadToast() {
   const State = useSyncExternalStore(SubscribeUploads, GetUploadState);
@@ -8,13 +8,18 @@ export default function UploadToast() {
 
   const Files = `${State.Count} file${State.Count === 1 ? "" : "s"}`;
   const Percent = State.Total > 0 ? Math.floor((State.Done / State.Total) * 100) : 100;
+  const Elapsed = (performance.now() - State.Started) / 1000;
+  const Left =
+    Elapsed > 2 && State.Done > 0 && State.Done < State.Total
+      ? `, about ${FormatDuration(((State.Total - State.Done) * Elapsed) / State.Done)} left`
+      : "";
 
   return (
     <div className="UploadToast" role="status">
       <span>
         {State.Finished
           ? `Uploaded ${Files}.`
-          : `Uploading ${Files}: ${Percent}% (${FormatSize(State.Done)} of ${FormatSize(State.Total)})`}
+          : `Uploading ${Files}: ${Percent}% (${FormatSize(State.Done)} of ${FormatSize(State.Total)}${Left})`}
       </span>
       {!State.Finished && (
         <div className="UploadToastBar">

Frontend/src/Upload.js

@@ -5,7 +5,7 @@
 
 import { IsLargeUpload, UploadFileChunked, UploadFiles } from "./Api.js";
 
-let State = null; // { Count, Done, Total (bytes), Finished }
+let State = null; // { Count, Done, Total (bytes), Started (ms), Finished }
 let ActiveUploads = 0;
 const Listeners = new Set();
 
@@ -23,6 +23,16 @@ export function GetUploadState() {
   return State;
 }
 
+// Roughly, for "about ... left": 8 s, 3 min, 1 h, 1 h 20 min. Same as the client's HumanDuration.
+export function FormatDuration(Seconds) {
+  const Rounded = Math.max(1, Math.round(Seconds));
+  if (Rounded < 60) return `${Rounded} s`;
+  const Minutes = Math.round(Rounded / 60);
+  const Hours = Math.floor(Minutes / 60);
+  if (!Hours) return `${Minutes} min`;
+  return Minutes % 60 ? `${Hours} h ${Minutes % 60} min` : `${Hours} h`;
+}
+
 export function FormatSize(Bytes) {
   const Units = ["B", "KB", "MB", "GB", "TB"];
   let Size = Bytes;
@@ -53,8 +63,9 @@ export async function UploadAll(RootName, DirectoryPath, Files) {
   const Errors = [];
   let Finished = 0; // bytes of the parts already done
 
+  const Started = performance.now();
   const Report = (Current) =>
-    Publish({ Count: FileArray.length, Done: Math.min(Total, Finished + Current), Total, Finished: false });
+    Publish({ Count: FileArray.length, Done: Math.min(Total, Finished + Current), Total, Started, Finished: false });
 
   ActiveUploads++;
   Report(0);