appview/pages: use duration time component

Builds on the last commit to introduce a variant of the time component but for durations. I added a verbose/long duration fmt function based on the existing short duration fmt one, and also renamed the other time fmt functions for clarity.

appview/pages/funcmap.go

···
 			s = append(s, values...)
 			return s
 		},
-		"timeFmt": humanize.Time,
-		"longTimeFmt": func(t time.Time) string {
-			return t.Format("Jan 2, 2006, 3:04 PM MST")
-		},
-		"iso8601Fmt": func(t time.Time) string {
-			return t.Format("2006-01-02T15:04:05-07:00")
-		},
-		"commaFmt": humanize.Comma,
-		"shortTimeFmt": func(t time.Time) string {
+		"commaFmt":   humanize.Comma,
+		"relTimeFmt": humanize.Time,
+		"shortRelTimeFmt": func(t time.Time) string {
 			return humanize.CustomRelTime(t, time.Now(), "", "", []humanize.RelTimeMagnitude{
 				{time.Second, "now", time.Second},
 				{2 * time.Second, "1s %s", 1},
···
 				{math.MaxInt64, "a long while %s", 1},
 			})
 		},
-		"durationFmt": func(duration time.Duration) string {
+		"longTimeFmt": func(t time.Time) string {
+			return t.Format("Jan 2, 2006, 3:04 PM MST")
+		},
+		"iso8601DateTimeFmt": func(t time.Time) string {
+			return t.Format("2006-01-02T15:04:05-07:00")
+		},
+		"iso8601DurationFmt": func(duration time.Duration) string {
 			days := int64(duration.Hours() / 24)
 			hours := int64(math.Mod(duration.Hours(), 24))
 			minutes := int64(math.Mod(duration.Minutes(), 60))
 			seconds := int64(math.Mod(duration.Seconds(), 60))
-
-			chunks := []struct {
-				name   string
-				amount int64
-			}{
-				{"d", days},
-				{"hr", hours},
-				{"min", minutes},
-				{"s", seconds},
-			}
-
-			parts := []string{}
-
-			for _, chunk := range chunks {
-				if chunk.amount != 0 {
-					parts = append(parts, fmt.Sprintf("%d%s", chunk.amount, chunk.name))
-				}
-			}
-
-			return strings.Join(parts, " ")
+			return fmt.Sprintf("P%dD%dH%dM%dS", days, hours, minutes, seconds)
+		},
+		"durationFmt": func(duration time.Duration) string {
+			return durationFmt(duration, [4]string{"d", "hr", "min", "s"})
+		},
+		"longDurationFmt": func(duration time.Duration) string {
+			return durationFmt(duration, [4]string{"days", "hours", "minutes", "seconds"})
 		},
 		"byteFmt": humanize.Bytes,
 		"length": func(slice any) int {
···
 	modifiedSVG := svgStr[:svgTagEnd] + classTag + svgStr[svgTagEnd:]
 	return template.HTML(modifiedSVG), nil
 }
+
+func durationFmt(duration time.Duration, names [4]string) string {
+	days := int64(duration.Hours() / 24)
+	hours := int64(math.Mod(duration.Hours(), 24))
+	minutes := int64(math.Mod(duration.Minutes(), 60))
+	seconds := int64(math.Mod(duration.Seconds(), 60))
+
+	chunks := []struct {
+		name   string
+		amount int64
+	}{
+		{names[0], days},
+		{names[1], hours},
+		{names[2], minutes},
+		{names[3], seconds},
+	}
+
+	parts := []string{}
+
+	for _, chunk := range chunks {
+		if chunk.amount != 0 {
+			parts = append(parts, fmt.Sprintf("%d%s", chunk.amount, chunk.name))
+		}
+	}
+
+	return strings.Join(parts, " ")
+}

appview/pages/templates/repo/fragments/time.html

···
 {{ define "repo/fragments/timeWrapper" }}
-<time datetime="{{ .Time | iso8601Fmt }}" title="{{ .Time | longTimeFmt }}">{{ .Content }}</time>
+<time datetime="{{ .Time | iso8601DateTimeFmt }}" title="{{ .Time | longTimeFmt }}">{{ .Content }}</time>
 {{ end }}
 
 {{ define "repo/fragments/time" }}
-{{ template "repo/fragments/timeWrapper" (dict "Time" . "Content" (. | timeFmt)) }}
+{{ template "repo/fragments/timeWrapper" (dict "Time" . "Content" (. | relTimeFmt)) }}
 {{ end }}
 
 {{ define "repo/fragments/shortTime" }}
-{{ template "repo/fragments/timeWrapper" (dict "Time" . "Content" (. | shortTimeFmt)) }}
+{{ template "repo/fragments/timeWrapper" (dict "Time" . "Content" (. | shortRelTimeFmt)) }}
 {{ end }}
 
 {{ define "repo/fragments/shortTimeAgo" }}
-{{ template "repo/fragments/timeWrapper" (dict "Time" . "Content" (print (. | shortTimeFmt) " ago")) }}
+{{ template "repo/fragments/timeWrapper" (dict "Time" . "Content" (print (. | shortRelTimeFmt) " ago")) }}
+{{ end }}
+
+{{ define "repo/fragments/duration" }}
+<time datetime="{{ . | iso8601DurationFmt }}" title="{{ . | longDurationFmt }}">{{ . | durationFmt }}</time>
 {{ end }}

appview/pages/templates/repo/pipelines/fragments/tooltip.html

···
           {{ $lastStatus := $all.Latest }}
           {{ $kind := $lastStatus.Status.String }}
 
-          {{ $t := .TimeTaken }}
-          {{ $time := "" }}
-          {{ if $t }}
-            {{ $time = durationFmt $t }}
-          {{ else }}
-            {{ $time = printf "%s ago" (shortTimeFmt $pipeline.Created) }}
-          {{ end }}
-
           <div id="left" class="flex items-center gap-2 flex-shrink-0">
             {{ template "repo/pipelines/fragments/workflowSymbol" $all }}
             {{ $name }}
           </div>
           <div id="right" class="flex items-center gap-2 flex-shrink-0">
             <span class="font-bold">{{ $kind }}</span>
-            <time>{{ $time }}</time>
+            {{ if .TimeTaken }}
+            {{ template "repo/fragments/duration" .TimeTaken }}
+            {{ else }}
+            {{ template "repo/fragments/shortTimeAgo" $pipeline.Created }}
+            {{ end }}
           </div>
         </div>
       </a>

appview/pages/templates/repo/pipelines/workflow.html

···
           {{ $lastStatus := $all.Latest }}
           {{ $kind := $lastStatus.Status.String }}
 
-          {{ $t := .TimeTaken }}
-          {{ $time := "" }}
-
-          {{ if $t }}
-          {{ $time = durationFmt $t }}
-          {{ else }}
-          {{ $time = printf "%s ago" (shortTimeFmt $lastStatus.Created) }}
-          {{ end }}
-
           <div id="left" class="flex items-center gap-2 flex-shrink-0">
             {{ template "repo/pipelines/fragments/workflowSymbol" $all }}
             {{ $name }}
           </div>
           <div id="right" class="flex items-center gap-2 flex-shrink-0">
             <span class="font-bold">{{ $kind }}</span>
-            <time>{{ $time }}</time>
+            {{ if .TimeTaken }}
+            {{ template "repo/fragments/duration" .TimeTaken }}
+            {{ else }}
+            {{ template "repo/fragments/shortTimeAgo" $lastStatus.Created }}
+            {{ end }}
           </div>
         </div>
       </a>

appview/pages/templates/repo/pulls/pull.html

···
             {{ $lastStatus := $all.Latest }}
             {{ $kind := $lastStatus.Status.String }}
 
-            {{ $t := .TimeTaken }}
-            {{ $time := "" }}
-
-            {{ if $t }}
-            {{ $time = durationFmt $t }}
-            {{ else }}
-            {{ $time = printf "%s ago" (shortTimeFmt $lastStatus.Created) }}
-            {{ end }}
-
             <div id="left" class="flex items-center gap-2 flex-shrink-0">
               {{ template "repo/pipelines/fragments/workflowSymbol" $all }}
               {{ $name }}
             </div>
             <div id="right" class="flex items-center gap-2 flex-shrink-0">
               <span class="font-bold">{{ $kind }}</span>
-              <time>{{ $time }}</time>
+              {{ if .TimeTaken }}
+              {{ template "repo/fragments/duration" .TimeTaken }}
+              {{ else }}
+              {{ template "repo/fragments/shortTimeAgo" $lastStatus.Created }}
+              {{ end }}
             </div>
           </div>
         </a>