pass seconds again, can not emit datetime from backend

routers/web/repo/issue_stopwatch.go

@@ -6,7 +6,6 @@ package repo
 import (
 	"net/http"
 	"strings"
-	"time"
 
 	"code.gitea.io/gitea/models/db"
 	issues_model "code.gitea.io/gitea/models/issues"
@@ -101,7 +100,7 @@ func GetActiveStopwatch(ctx *context.Context) {
 		issue.Link(),
 		issue.Repo.FullName(),
 		issue.Index,
-		time.Unix(time.Now().Unix() - sw.Seconds(), 0).Format(time.RFC3339),
+		sw.Seconds() + 1, // ensure time is never zero in ui
 	}
 }
 
@@ -110,5 +109,5 @@ type StopwatchTmplInfo struct {
 	IssueLink  string
 	RepoSlug   string
 	IssueIndex int64
-	Datetime   string
+	Seconds    int64
 }

templates/base/head_navbar.tmpl

@@ -13,16 +13,10 @@
 		<!-- mobile right menu, it must be here because in mobile view, each item is a flex column, the first item is a full row column -->
 		<div class="ui secondary menu item navbar-mobile-right only-mobile">
 			{{if and .IsSigned EnableTimetracking .ActiveStopwatch}}
-			<a id="mobile-stopwatch-icon" class="active-stopwatch item tw-mx-0" href="{{.ActiveStopwatch.IssueLink}}" title="{{ctx.Locale.Tr "active_stopwatch"}}" data-datetime="{{.ActiveStopwatch.Datetime}}">
+			<a id="mobile-stopwatch-icon" class="active-stopwatch item tw-mx-0" href="{{.ActiveStopwatch.IssueLink}}" title="{{ctx.Locale.Tr "active_stopwatch"}}" data-seconds="{{.ActiveStopwatch.Seconds}}">
 				<div class="tw-relative">
 					{{svg "octicon-stopwatch"}}
-					<span class="header-stopwatch-dot">
+					<span class="header-stopwatch-dot"></span>
-						<relative-time
-							format="micro"
-							datetime="{{.ActiveStopwatch.Datetime}}"
-							data-no-tooltip="true"
-						></relative-time>
-					</span>
 				</div>
 			</a>
 			{{end}}
@@ -89,15 +83,10 @@
 			</div><!-- end dropdown avatar menu -->
 		{{else if .IsSigned}}
 			{{if and EnableTimetracking .ActiveStopwatch}}
-			<a class="item not-mobile active-stopwatch tw-mx-0" href="{{.ActiveStopwatch.IssueLink}}" title="{{ctx.Locale.Tr "active_stopwatch"}}" data-datetime="{{.ActiveStopwatch.Datetime}}">
+			<a class="item not-mobile active-stopwatch tw-mx-0" href="{{.ActiveStopwatch.IssueLink}}" title="{{ctx.Locale.Tr "active_stopwatch"}}" data-seconds="{{.ActiveStopwatch.Seconds}}">
 				<div class="tw-relative">
 					{{svg "octicon-stopwatch"}}
-					<span class="header-stopwatch-dot">
+					<span class="header-stopwatch-dot"></relative-time>
-						<relative-time
-							format="micro"
-							datetime="{{.ActiveStopwatch.Datetime}}"
-							data-no-tooltip="true"
-						></relative-time>
 					</span>
 				</div>
 			</a>

web_src/js/features/stopwatch.js

@@ -17,9 +17,9 @@ export function initStopwatch() {
   }
 
   // global stop watch (in the head_navbar), it should always work in any case either the EventSource or the PeriodicPoller is used.
-  const datetime = stopwatchEls[0]?.getAttribute('data-datetime');
+  const seconds = stopwatchEls[0]?.getAttribute('data-seconds');
-  if (datetime) {
+  if (seconds) {
-    updateStopwatchTime(datetime);
+    updateStopwatchTime(seconds);
   }
 
   for (const stopwatchEl of stopwatchEls) {
@@ -137,17 +137,14 @@ function updateStopwatchData(data) {
     document.querySelector('.stopwatch-cancel')?.setAttribute('action', `${issueUrl}/times/stopwatch/cancel`);
     const stopwatchIssue = document.querySelector('.stopwatch-issue');
     if (stopwatchIssue) stopwatchIssue.textContent = `${repo_owner_name}/${repo_name}#${issue_index}`;
-    updateStopwatchTime(secondsToDatetime(seconds));
+    updateStopwatchTime(seconds);
     showElem(btnEl);
   }
   return Boolean(data.length);
 }
 
-function secondsToDatetime(seconds) {
+function updateStopwatchTime(seconds) {
-  return (new Date(Date.now() - seconds * 1000)).toISOString();
+  const datetime = (new Date(Date.now() - seconds * 1000)).toISOString();
-}
-
-function updateStopwatchTime(datetime) {
   for (const parent of document.querySelectorAll('.header-stopwatch-dot')) {
     const existing = parent.querySelector(':scope > relative-time');
     if (existing) {