update time visualization

frontend/src/components/TimerWidget.tsx

@@ -1,12 +1,41 @@
-import { useState } from 'react';
-import { Play, Square, ChevronDown } from 'lucide-react';
-import { useTimer } from '@/contexts/TimerContext';
-import { useProjects } from '@/hooks/useProjects';
-import { formatDuration } from '@/utils/dateUtils';
-import { ProjectColorDot } from '@/components/ProjectColorDot';
+import { useState } from "react";
+import { Play, Square, ChevronDown } from "lucide-react";
+import { useTimer } from "@/contexts/TimerContext";
+import { useProjects } from "@/hooks/useProjects";
+import { ProjectColorDot } from "@/components/ProjectColorDot";
+
+function TimerDisplay({ totalSeconds }: { totalSeconds: number }) {
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = totalSeconds % 60;
+
+  const pad = (n: number) => n.toString().padStart(2, "0");
+
+  return (
+    <span className="text-2xl font-mono font-bold text-gray-900">
+      {hours > 0 && (
+        <>
+          <span className="mr-0.5">{pad(hours)}</span>
+          <span className="text-base font-normal text-gray-500 mr-1.5">h</span>
+        </>
+      )}
+      <span className="mr-0.5">{pad(minutes)}</span>
+      <span className="text-base font-normal text-gray-500 mr-1.5">m</span>
+      <span className="mr-0.5">{pad(seconds)}</span>
+      <span className="text-base font-normal text-gray-500">s</span>
+    </span>
+  );
+}
 
 export function TimerWidget() {
-  const { ongoingTimer, isLoading, elapsedSeconds, startTimer, stopTimer, updateTimerProject } = useTimer();
+  const {
+    ongoingTimer,
+    isLoading,
+    elapsedSeconds,
+    startTimer,
+    stopTimer,
+    updateTimerProject,
+  } = useTimer();
   const { projects } = useProjects();
   const [showProjectSelect, setShowProjectSelect] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -16,7 +45,7 @@ export function TimerWidget() {
     try {
       await startTimer();
     } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to start timer');
+      setError(err instanceof Error ? err.message : "Failed to start timer");
     }
   };
 
@@ -25,7 +54,7 @@ export function TimerWidget() {
     try {
       await stopTimer();
     } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to stop timer');
+      setError(err instanceof Error ? err.message : "Failed to stop timer");
     }
   };
 
@@ -35,7 +64,7 @@ export function TimerWidget() {
       await updateTimerProject(projectId);
       setShowProjectSelect(false);
     } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to update project');
+      setError(err instanceof Error ? err.message : "Failed to update project");
     }
   };
 
@@ -45,7 +74,7 @@ export function TimerWidget() {
       await updateTimerProject(null);
       setShowProjectSelect(false);
     } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to clear project');
+      setError(err instanceof Error ? err.message : "Failed to clear project");
     }
   };
 
@@ -68,9 +97,7 @@ export function TimerWidget() {
             <div className="flex items-center space-x-4 flex-1">
               <div className="flex items-center space-x-2">
                 <div className="w-3 h-3 bg-red-500 rounded-full animate-pulse"></div>
-                <span className="text-2xl font-mono font-bold text-gray-900">
-                  {formatDuration(elapsedSeconds)}
-                </span>
+                <TimerDisplay totalSeconds={elapsedSeconds} />
               </div>
 
               {/* Project Selector */}
@@ -110,8 +137,12 @@ export function TimerWidget() {
                       >
                         <ProjectColorDot color={project.color} />
                         <div className="min-w-0">
-                          <div className="font-medium text-gray-900 truncate">{project.name}</div>
-                          <div className="text-xs text-gray-500 truncate">{project.client.name}</div>
+                          <div className="font-medium text-gray-900 truncate">
+                            {project.name}
+                          </div>
+                          <div className="text-xs text-gray-500 truncate">
+                            {project.client.name}
+                          </div>
                         </div>
                       </button>
                     ))}

frontend/src/pages/DashboardPage.tsx

@@ -5,7 +5,7 @@ import { ProjectColorDot } from "@/components/ProjectColorDot";
 import { StatCard } from "@/components/StatCard";
 import {
   formatDate,
-  formatDurationFromDates,
+  formatDurationFromDatesHoursMinutes,
   formatDurationHoursMinutes,
   calculateDuration,
 } from "@/utils/dateUtils";
@@ -124,7 +124,7 @@ export function DashboardPage() {
                       {formatDate(entry.startTime)}
                     </td>
                      <td className="px-4 py-3 whitespace-nowrap text-sm text-gray-900 font-mono">
-                      {formatDurationFromDates(entry.startTime, entry.endTime)}
+                      {formatDurationFromDatesHoursMinutes(entry.startTime, entry.endTime)}
                     </td>
                   </tr>
                 ))}

frontend/src/pages/StatisticsPage.tsx

@@ -10,7 +10,7 @@ import { useStatistics } from "@/hooks/useTimeEntries";
 import { useClients } from "@/hooks/useClients";
 import { useProjects } from "@/hooks/useProjects";
 import { ProjectColorDot } from "@/components/ProjectColorDot";
-import { formatDuration, toISOTimezone } from "@/utils/dateUtils";
+import { formatDurationHoursMinutes, toISOTimezone } from "@/utils/dateUtils";
 import type { StatisticsFilters } from "@/types";
 
 export function StatisticsPage() {
@@ -166,7 +166,7 @@ export function StatisticsPage() {
                 {isLoading ? (
                   <span className="text-2xl">Loading...</span>
                 ) : (
-                  formatDuration(statistics?.totalSeconds || 0)
+                  formatDurationHoursMinutes(statistics?.totalSeconds || 0)
                 )}
               </p>
             </div>
@@ -202,7 +202,7 @@ export function StatisticsPage() {
                   </span>
                 </div>
                 <span className="font-mono font-semibold text-gray-900">
-                  {formatDuration(project.totalSeconds)}
+                  {formatDurationHoursMinutes(project.totalSeconds)}
                 </span>
               </div>
             ))}
@@ -232,7 +232,7 @@ export function StatisticsPage() {
                   </span>
                 </div>
                 <span className="font-mono font-semibold text-gray-900">
-                  {formatDuration(client.totalSeconds)}
+                  {formatDurationHoursMinutes(client.totalSeconds)}
                 </span>
               </div>
             ))}

frontend/src/pages/TimeEntriesPage.tsx

@@ -5,7 +5,7 @@ import { useProjects } from '@/hooks/useProjects';
 import { Modal } from '@/components/Modal';
 import { Spinner } from '@/components/Spinner';
 import { ProjectColorDot } from '@/components/ProjectColorDot';
-import { formatDate, formatDurationFromDates, getLocalISOString, toISOTimezone } from '@/utils/dateUtils';
+import { formatDate, formatDurationFromDatesHoursMinutes, getLocalISOString, toISOTimezone } from '@/utils/dateUtils';
 import type { TimeEntry, CreateTimeEntryInput, UpdateTimeEntryInput } from '@/types';
 
 export function TimeEntriesPage() {
@@ -127,7 +127,7 @@ export function TimeEntriesPage() {
                     </div>
                   </div>
                 </td>
-                <td className="px-4 py-3 whitespace-nowrap text-sm font-mono text-gray-900">{formatDurationFromDates(entry.startTime, entry.endTime)}</td>
+                <td className="px-4 py-3 whitespace-nowrap text-sm font-mono text-gray-900">{formatDurationFromDatesHoursMinutes(entry.startTime, entry.endTime)}</td>
                 <td className="px-4 py-3 whitespace-nowrap text-right">
                   <button onClick={() => handleOpenModal(entry)} className="p-1.5 text-gray-400 hover:text-gray-600 mr-1"><Edit2 className="h-4 w-4" /></button>
                   <button onClick={() => handleDelete(entry)} className="p-1.5 text-gray-400 hover:text-red-600"><Trash2 className="h-4 w-4" /></button>

frontend/src/utils/dateUtils.ts

@@ -57,6 +57,14 @@ export function formatDurationFromDates(
   return formatDuration(seconds);
 }
 
+export function formatDurationFromDatesHoursMinutes(
+  startTime: string,
+  endTime: string,
+): string {
+  const seconds = calculateDuration(startTime, endTime);
+  return formatDurationHoursMinutes(seconds);
+}
+
 export function getLocalISOString(date: Date = new Date()): string {
   const timezoneOffset = date.getTimezoneOffset() * 60000;
   const localISOTime = new Date(date.getTime() - timezoneOffset)