From 075af8eaf5dbf4dfb01fcc8b8d75de257a986f62 Mon Sep 17 00:00:00 2001
From: Epid <dev@epid.co>
Date: Thu, 2 Apr 2026 04:55:34 +0300
Subject: [PATCH] fix(stopwatch): prevent page reload when stopping/cancelling
 from navbar popup

The navbar popup stop/cancel forms used form-fetch-action, which always
reloads the page when the server returns an empty redirect. Remove that
class and add a dedicated delegated submit handler in stopwatch.ts that
POSTs the action silently; the WebSocket push (or periodic poller) then
updates the icon without any navigation.
---
 templates/base/head_navbar.tmpl  |  4 ++--
 web_src/js/features/stopwatch.ts | 14 ++++++++++++--
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/templates/base/head_navbar.tmpl b/templates/base/head_navbar.tmpl
index 5b8593ec43..10590cca66 100644
--- a/templates/base/head_navbar.tmpl
+++ b/templates/base/head_navbar.tmpl
@@ -159,14 +159,14 @@
 				<span class="stopwatch-issue">{{if $activeStopwatch}}{{$activeStopwatch.RepoSlug}}#{{$activeStopwatch.IssueIndex}}{{end}}</span>
 			</a>
 			<div class="tw-flex tw-gap-1">
-				<form class="stopwatch-commit form-fetch-action" method="post" action="{{if $activeStopwatch}}{{$activeStopwatch.IssueLink}}/times/stopwatch/stop{{end}}">
+				<form class="stopwatch-commit" method="post" action="{{if $activeStopwatch}}{{$activeStopwatch.IssueLink}}/times/stopwatch/stop{{end}}">
 					<button
 						type="submit"
 						class="ui button mini compact basic icon tw-mr-0"
 						data-tooltip-content="{{ctx.Locale.Tr "repo.issues.stop_tracking"}}"
 					>{{svg "octicon-square-fill"}}</button>
 				</form>
-				<form class="stopwatch-cancel form-fetch-action" method="post" action="{{if $activeStopwatch}}{{$activeStopwatch.IssueLink}}/times/stopwatch/cancel{{end}}">
+				<form class="stopwatch-cancel" method="post" action="{{if $activeStopwatch}}{{$activeStopwatch.IssueLink}}/times/stopwatch/cancel{{end}}">
 					<button
 						type="submit"
 						class="ui button mini compact basic icon tw-mr-0"
diff --git a/web_src/js/features/stopwatch.ts b/web_src/js/features/stopwatch.ts
index 75f6290735..8a6593ee4c 100644
--- a/web_src/js/features/stopwatch.ts
+++ b/web_src/js/features/stopwatch.ts
@@ -1,6 +1,6 @@
 import {createTippy} from '../modules/tippy.ts';
-import {GET} from '../modules/fetch.ts';
-import {hideElem, queryElems, showElem} from '../utils/dom.ts';
+import {GET, POST} from '../modules/fetch.ts';
+import {addDelegatedEventListener, hideElem, queryElems, showElem} from '../utils/dom.ts';
 import {UserEventsSharedWorker} from '../modules/worker.ts';
 
 const {appSubUrl, notificationSettings, enableTimeTracking} = window.config;
@@ -42,6 +42,16 @@ export function initStopwatch() {
     });
   }
 
+  // Handle stop/cancel from the navbar popup without triggering a page reload.
+  // These forms are not form-fetch-action so they won't navigate; the WebSocket
+  // push (or periodic poller) updates the icon after the action completes.
+  addDelegatedEventListener(document, 'submit', '.stopwatch-commit,.stopwatch-cancel', async (form: HTMLFormElement, e: SubmitEvent) => {
+    e.preventDefault();
+    const action = form.getAttribute('action');
+    if (!action) return;
+    await POST(action, {data: new FormData(form)});
+  });
+
   let usingPeriodicPoller = false;
   const startPeriodicPoller = (timeout: number) => {
     if (timeout <= 0 || !Number.isFinite(timeout)) return;