@@ -52,6 +52,7 @@ import {
5252HelpTooltipTrigger ,
5353} from "components/HelpTooltip/HelpTooltip" ;
5454import { Loader } from "components/Loader/Loader" ;
55+ import { Stack } from "components/Stack/Stack" ;
5556import { UserAvatar } from "components/UserAvatar/UserAvatar" ;
5657import { useEmbeddedMetadata } from "hooks/useEmbeddedMetadata" ;
5758import { useTemplateLayoutContext } from "pages/TemplatePage/TemplateLayout" ;
@@ -451,7 +452,7 @@ const TemplateUsagePanel: FC<TemplateUsagePanelProps> = ({
451452return (
452453< div
453454key = { usage . slug }
454- css = { { display :"flex" , gap :16 , alignItems :"center" } }
455+ css = { { display :"flex" , gap :24 , alignItems :"center" } }
455456>
456457< div
457458css = { { display :"flex" , alignItems :"center" , gap :8 } }
@@ -492,16 +493,27 @@ const TemplateUsagePanel: FC<TemplateUsagePanelProps> = ({
492493} ,
493494} }
494495/>
495- < div
496+ < Stack
497+ spacing = { 0 }
496498css = { {
497499fontSize :13 ,
498500color :theme . palette . text . secondary ,
499501width :120 ,
500502flexShrink :0 ,
503+ lineHeight :"1.5" ,
501504} }
502505>
503506{ formatTime ( usage . seconds ) }
504- </ div >
507+ < span
508+ css = { {
509+ fontSize :12 ,
510+ color :theme . palette . text . disabled ,
511+ } }
512+ >
513+ Opened{ usage . times_used . toLocaleString ( ) } { " " }
514+ { usage . times_used === 1 ?"time" :"times" }
515+ </ span >
516+ </ Stack >
505517</ div >
506518) ;
507519} ) }
@@ -869,20 +881,35 @@ const TextValue: FC<PropsWithChildren> = ({ children }) => {
869881} ;
870882
871883function formatTime ( seconds :number ) :string {
872- if ( seconds < 60 ) {
873- return seconds + " seconds" ;
874- } else if ( seconds >= 60 && seconds < 3600 ) {
875- const minutes = Math . floor ( seconds / 60 ) ;
876- return minutes + " minutes" ;
884+ let value :{
885+ amount :number ;
886+ unit :"seconds" | "minutes" | "hours" ;
887+ } = {
888+ amount :seconds ,
889+ unit :"seconds" ,
890+ } ;
891+
892+ if ( seconds >= 60 && seconds < 3600 ) {
893+ value = {
894+ amount :Math . floor ( seconds / 60 ) ,
895+ unit :"minutes" ,
896+ } ;
877897} else {
878- const hours = seconds / 3600 ;
879- const minutes = Math . floor ( seconds % 3600 ) ;
880- if ( minutes === 0 ) {
881- return hours . toFixed ( 0 ) + " hours" ;
882- }
898+ value = {
899+ amount : seconds / 3600 ,
900+ unit : "hours" ,
901+ } ;
902+ }
883903
884- return hours . toFixed ( 1 ) + " hours" ;
904+ if ( value . amount === 1 ) {
905+ const singularUnit = value . unit . slice ( 0 , - 1 ) ;
906+ return `${ value . amount } ${ singularUnit } ;
885907}
908+
909+ return `${ value . amount . toLocaleString ( undefined , {
910+ maximumFractionDigits :1 ,
911+ minimumFractionDigits :0 ,
912+ } ) } ${ value . unit } ;
886913}
887914
888915function toISOLocal ( d :Date , offset :number ) {