For break progress only show time remaining

Author: tom-james-watson

app/renderer/components/break/break-progress.tsx

@@ -16,30 +16,6 @@ interface BreakProgressProps {
   sharedBreakEndTime?: number | null;
 }
 
-function TimeDisplay({
-  seconds,
-  textColor,
-}: {
-  seconds: number;
-  textColor: string;
-}) {
-  const minutes = Math.floor(seconds / 60);
-  const remainingSeconds = seconds % 60;
-
-  return (
-    <div
-      className="text-sm font-medium opacity-60 flex-shrink-0 tabular-nums flex items-center gap-0.5"
-      style={{ color: textColor }}
-    >
-      <span style={{ color: textColor }}>{minutes}</span>
-      <span style={{ color: textColor }}>:</span>
-      <span style={{ color: textColor }}>
-        {String(remainingSeconds).padStart(2, "0")}
-      </span>
-    </div>
-  );
-}
-
 export function BreakProgress({
   breakMessage,
   breakTitle,
@@ -150,12 +126,6 @@ export function BreakProgress({
 
   const progressPercentage = (progress || 0) * 100;
 
-  const elapsedSeconds =
-    settings.breakLengthSeconds -
-    (timeRemaining?.hours || 0) * 3600 -
-    (timeRemaining?.minutes || 0) * 60 -
-    Math.floor(timeRemaining?.seconds || 0);
-
   return (
     <motion.div
       className="flex flex-col h-full w-full z-10 relative space-y-6"
@@ -193,12 +163,21 @@ export function BreakProgress({
       </div>
 
       <div className="w-full">
-        <div className="flex justify-between items-center mb-2">
-          <TimeDisplay seconds={elapsedSeconds} textColor={textColor} />
-          <TimeDisplay
-            seconds={settings.breakLengthSeconds}
-            textColor={textColor}
-          />
+        <div className="flex justify-end items-center mb-2">
+          <div
+            className="text-sm font-medium opacity-60 flex-shrink-0 tabular-nums flex items-center gap-0.5"
+            style={{ color: textColor }}
+          >
+            <span style={{ color: textColor }}>
+              {String(
+                Math.floor(timeRemaining.hours * 60 + timeRemaining.minutes),
+              ).padStart(2, "0")}{" "}
+            </span>
+            <span style={{ color: textColor }}>:</span>
+            <span style={{ color: textColor }}>
+              {String(Math.floor(timeRemaining.seconds)).padStart(2, "0")}
+            </span>
+          </div>
         </div>
         <div
           className="w-full h-2 rounded-full overflow-hidden"