fix frontend

models/issues/stopwatch.go

@@ -46,11 +46,6 @@ func (s Stopwatch) Seconds() int64 {
 	return int64(timeutil.TimeStampNow() - s.CreatedUnix)
 }
 
-// Duration returns a human-readable duration string based on local server time
-func (s Stopwatch) Duration() string {
-	return util.SecToHours(s.Seconds())
-}
-
 func getStopwatch(ctx context.Context, userID, issueID int64) (sw *Stopwatch, exists bool, err error) {
 	sw = new(Stopwatch)
 	exists, err = db.GetEngine(ctx).

services/convert/issue.go

@@ -16,6 +16,7 @@ import (
 	"code.gitea.io/gitea/modules/log"
 	"code.gitea.io/gitea/modules/setting"
 	api "code.gitea.io/gitea/modules/structs"
+	"code.gitea.io/gitea/modules/util"
 )
 
 func ToIssue(ctx context.Context, doer *user_model.User, issue *issues_model.Issue) *api.Issue {
@@ -186,7 +187,7 @@ func ToStopWatches(ctx context.Context, sws []*issues_model.Stopwatch) (api.Stop
 		result = append(result, api.StopWatch{
 			Created:       sw.CreatedUnix.AsTime(),
 			Seconds:       sw.Seconds(),
-			Duration:      sw.Duration(),
+			Duration:      util.SecToHours(sw.Seconds()),
 			IssueIndex:    issue.Index,
 			IssueTitle:    issue.Title,
 			RepoOwnerName: repo.OwnerName,

web_src/js/features/stopwatch.ts

@@ -1,6 +1,6 @@
 import {createTippy} from '../modules/tippy.ts';
 import {GET} from '../modules/fetch.ts';
-import {hideElem, showElem} from '../utils/dom.ts';
+import {hideElem, queryElems, showElem} from '../utils/dom.ts';
 import {logoutFromWorker} from '../modules/worker.ts';
 
 const {appSubUrl, notificationSettings, enableTimeTracking, assetVersionEncoded} = window.config;
@@ -147,20 +147,9 @@ function updateStopwatchData(data) {
 // TODO: This flickers on page load, we could avoid this by making a custom
 // element to render time periods. Feeding a datetime in backend does not work
 // when time zone between server and client differs.
-function updateStopwatchTime(seconds) {
-  if (!Number.isFinite(seconds)) return;
-  const datetime = (new Date(Date.now() - seconds * 1000)).toISOString();
-  for (const parent of document.querySelectorAll('.header-stopwatch-dot')) {
-    const existing = parent.querySelector(':scope > relative-time');
-    if (existing) {
-      existing.setAttribute('datetime', datetime);
-    } else {
-      const el = document.createElement('relative-time');
-      el.setAttribute('format', 'micro');
-      el.setAttribute('datetime', datetime);
-      el.setAttribute('lang', 'en-US');
-      el.setAttribute('title', ''); // make <relative-time> show no title and therefor no tooltip
-      parent.append(el);
-    }
-  }
+function updateStopwatchTime(seconds: number) {
+  const hours = seconds / 3600 || 0;
+  const minutes = seconds / 60 || 0;
+  const timeText = hours >= 1 ? `${Math.round(hours)}h` : `${Math.round(minutes)}m`;
+  queryElems(document, '.header-stopwatch-dot', (el) => el.textContent = timeText);
 }