fix: standardize timer duration formatting

.github/workflows/deploy-docs.yml

@@ -55,7 +55,7 @@ jobs:
       run: cd frontend && npm ci
 
     - name: Build Storybook
-      run: cd frontend && npm run build-storybook -- --base=/ProgressRPG/storybook/
+      run: cd frontend && npm run build-storybook
 
     - name: Combine sites
       run: |

frontend/src/components/ActivityInput/ActivityInput.tsx

@@ -7,15 +7,15 @@ import EntitySearchInput from "../EntitySearchInput/EntitySearchInput";
 import styles from "./ActivityInput.module.scss";
 import { useActivityInput } from "./useActivityInput";
 import SupportFlowModal from "../SupportFlow/SupportFlowModal";
+import { formatDuration } from "../../utils/formatUtils";
 
 export default function ActivityInput() {
   const {
     name,
     setName,
     isActive,
     inputValue,
-    minutes,
-    seconds,
+    elapsed,
     formattedLimit,
     showAutoStopWarning,
     flowState,
@@ -63,7 +63,7 @@ export default function ActivityInput() {
             </div>
 
             <div className={classNames(styles.timerPill, styles.control)}>
-              {minutes}:{seconds.toString().padStart(2, "0")}
+              {formatDuration(elapsed)}
             </div>
 
             <Button

frontend/src/components/ActivityInput/useActivityInput.ts

@@ -8,6 +8,7 @@ import { useFeatureFlag } from "../../hooks/useFeatureFlag";
 import { TODAY_POINTS_QUERY_KEY } from "../../hooks/usePlayer";
 import type { PlayerActivity } from "../../types";
 import { playLimitReachedSound, primeAudio } from "../../utils/sounds";
+import { formatDuration } from "../../utils/formatUtils";
 
 /** Populated on stop when `results_mode` is on, instead of opening the SupportFlow modal. */
 export interface ResultsData {
@@ -536,8 +537,8 @@ export function useActivityInput() {
     stop,
   ]);
 
-  const minutes = Math.floor(elapsed / 60);
-  const seconds = elapsed % 60;
+  const formattedElapsed =
+  formatDuration(elapsed)
 
   const formattedLimit = useMemo(() => {
     if (typeof limitSeconds !== "number" || limitSeconds <= 0) {
@@ -563,8 +564,8 @@ export function useActivityInput() {
     inputValue,
     taskId: currentActivity?.taskId ?? null,
     activityCatalogId: currentActivity?.activity ?? null,
-    minutes,
-    seconds,
+    elapsed,
+    formattedElapsed,
     formattedLimit,
     showAutoStopWarning,
     flowState,

frontend/src/components/UnifiedTimerHome/UnifiedTimerHome.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useRef, useState } from "react";
 import classNames from "classnames";
 import { AnimatePresence, motion } from "framer-motion";
+import { formatDuration } from "../../utils/formatUtils";
 
 import Button from "../Button/Button";
 import AlertDialog from "../AlertDialog/AlertDialog";
@@ -40,8 +41,7 @@ export default function UnifiedTimerHome() {
     inputValue,
     taskId,
     activityCatalogId,
-    minutes,
-    seconds,
+    elapsed,
     formattedLimit,
     showAutoStopWarning,
     flowState,
@@ -191,7 +191,7 @@ export default function UnifiedTimerHome() {
             <AnimatePresence mode="popLayout" initial={false}>
               {isActive && (
                 <motion.div key="timer" layout {...fadeProps} className={styles.timerPill}>
-                  {minutes}:{seconds.toString().padStart(2, "0")}
+                  {formatDuration(elapsed)}
                 </motion.div>
               )}
             </AnimatePresence>

frontend/src/config.ts

@@ -1,16 +1,14 @@
 // src/config.ts
-let API_BASE_URL: string;
-const envApiBaseUrl = import.meta.env.VITE_API_BASE_URL as string | undefined;
+function resolveApiBaseUrl(): string {
+  const envApiBaseUrl = import.meta.env.VITE_API_BASE_URL as string | undefined;
 
-if (envApiBaseUrl) {
-  API_BASE_URL = envApiBaseUrl;
-} else if (window.location.hostname === 'localhost') {
-  API_BASE_URL = 'http://localhost:8000';
-} else {
-  API_BASE_URL = window.location.origin;
-}
+  const base =
+    envApiBaseUrl ??
+    (window.location.hostname === 'localhost'
+      ? 'http://localhost:8000'
+      : window.location.origin);
 
-API_BASE_URL = API_BASE_URL.replace(/\/api\/v1\/?$/i, '');
-API_BASE_URL = API_BASE_URL.replace(/\/$/, '');
+  return base.replace(/\/api\/v1\/?$/i, '').replace(/\/$/, '');
+}
 
-export { API_BASE_URL };
+export const API_BASE_URL = resolveApiBaseUrl();