Include total estimated time on folders and improve UI on mobile devices

Author: zigazajc007

public/app.js

@@ -498,12 +498,21 @@ function computeFolderTimeEstimate(node) {
 		}
 	}
 
+	let activeElapsed = 0;
+	for (const job of activeJobs) {
+		if (job.startedAt) {
+			activeElapsed += Date.now() - job.startedAt;
+		}
+	}
+
 	const estimatedRemaining = activeRemaining + queuedEstimate;
+	const estimatedTotal = totalElapsed + activeElapsed + estimatedRemaining;
 	const remainingCount = activeJobs.length + queuedJobs.length;
 
 	return {
 		totalElapsed,
 		estimatedRemaining,
+		estimatedTotal,
 		avgPerEpisode,
 		doneCount: doneJobs.length,
 		remainingCount,
@@ -519,10 +528,11 @@ function renderFolderTimeEstimate(node) {
 	const parts = [];
 
 	if (est.remainingCount > 0 && est.doneCount > 0) {
-		// Still encoding (show remaining estimate)
+		// Still encoding (show estimated total and remaining)
+		parts.push(`~${formatDurationShort(est.estimatedTotal)} total`);
 		parts.push(`~${formatDurationShort(est.estimatedRemaining)} remaining`);
 	} else if (est.remainingCount === 0 && est.doneCount > 0) {
-		// All done (show total time)
+		// All done (show actual total time)
 		parts.push(`Total: ${formatDurationShort(est.totalElapsed)}`);
 	}
 

public/style.css

@@ -868,8 +868,17 @@ code {
 		margin-left: 10px;
 	}
 	.folder-header {
+		flex-wrap: wrap;
 		padding: 10px 12px;
-		gap: 8px;
+		gap: 6px;
+	}
+	.folder-left {
+		flex: 1 1 100%;
+		min-width: 0;
+	}
+	.folder-right {
+		flex: 1 1 100%;
+		align-items: flex-start;
 	}
 	.folder-stats {
 		gap: 4px;
@@ -879,7 +888,11 @@ code {
 		padding: 2px 5px;
 	}
 	.folder-progress {
-		width: 80px;
+		width: 100%;
+	}
+	.folder-time-estimate {
+		font-size: 0.58rem;
+		text-align: left;
 	}
 	.folder-time-estimate {
 		font-size: 0.58rem;