feat(popup): Show entry durations in simple format

User preferences will need to come later.

src/scripts/components/TimeEntriesList.tsx

@@ -1,14 +1,14 @@
 import * as React from 'react';
 import styled from '@emotion/styled';
-import { format } from 'date-fns';
+import { format, subSeconds } from 'date-fns';
 
 import BillableIcon from './BillableIcon.jsx';
 import TagsIcon from './TagsIcon.jsx';
 import { ProjectLargeDot } from '../@toggl/ui/icons/index';
 import * as color from '../@toggl/style/lib/color';
 import * as text from '../@toggl/style/lib/text';
 import { borderRadius } from '../@toggl/style/lib/variables';
-import { secToDecimalHours } from '../@toggl/time-format-utils';
+import { formatDuration } from './Timer';
 import play from './play.svg';
 
 const NO_DESCRIPTION = '(no description)';
@@ -24,7 +24,6 @@ const getTimeEntryDayGroups = (timeEntries: Array<Array<TimeEntry>>): {[date: st
     .filter((timeEntries) => timeEntries.some((te) => te.duration >= 0))
     .reduce((groups: { [date: string]: Array<Array<TimeEntry>> }, entries) => {
       const date = format(entries[0].start, 'YYYY-MM-DD');
-      console.log(date);
       groups[date] = groups[date] || [];
       groups[date].push(entries);
 
@@ -127,8 +126,9 @@ const GroupedEntryCounter = styled.div`
 
 function TimeEntryDuration ({ duration }: { duration: number }) {
   if (!duration || duration < 0) return null;
+  const since = subSeconds(Date.now(),  duration).toUTCString();
   return (
-    <div>{secToDecimalHours(duration)}</div>
+    <div>{formatDuration(since)}</div>
   );
 }
 

src/scripts/components/Timer.tsx

@@ -13,10 +13,14 @@ import stop from './icon-stop.svg';
 
 const NO_DESCRIPTION = '(no description)';
 
-export const formatDuration = (start: string) => {
-  const hours = differenceInHours(Date.now(), start);
-  const minutes = differenceInMinutes(subHours(Date.now(), hours), start);
-  const seconds = differenceInSeconds(subMinutes(Date.now(), minutes), start);
+/**
+ * Returns the elapsed time since `since` as a duration in the format hh:mm:ss.
+ */
+export const formatDuration = (start: string | number, stop?: string | number) => {
+  const now = stop || Date.now();
+  const hours = differenceInHours(now, start);
+  const minutes = differenceInMinutes(subHours(now, hours), start);
+  const seconds = differenceInSeconds(subMinutes(subHours(now, hours), minutes), start);
   const timeValue = (value) => value > 9 ? value : (value > 0 ? '0' + value : '00');
 
   return `${timeValue(hours)}:${timeValue(minutes)}:${timeValue(seconds)}`;