From 0e8d752d86b86986f08c43b137cc742a2a42e7ec Mon Sep 17 00:00:00 2001
From: Beowulf <beowulf@beocode.eu>
Date: Sat, 24 May 2025 23:46:21 +0200
Subject: [PATCH] fix(ui): relative time elements were reset on htmx swap
 (#7950)

Regression cf03286b5bf23f82ac913b70b88e3bf44fdbc81e

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/7950
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
Co-authored-by: Beowulf <beowulf@beocode.eu>
Co-committed-by: Beowulf <beowulf@beocode.eu>
---
 tests/e2e/relative-time.test.e2e.ts       | 35 +++++++++++++++++++++++
 web_src/js/webcomponents/relative-time.js |  8 +++++-
 2 files changed, 42 insertions(+), 1 deletion(-)
 create mode 100644 tests/e2e/relative-time.test.e2e.ts

diff --git a/tests/e2e/relative-time.test.e2e.ts b/tests/e2e/relative-time.test.e2e.ts
new file mode 100644
index 0000000000..ab8bbc19de
--- /dev/null
+++ b/tests/e2e/relative-time.test.e2e.ts
@@ -0,0 +1,35 @@
+// Copyright 2025 The Forgejo Authors. All rights reserved.
+// SPDX-License-Identifier: GPL-3.0-or-later
+
+// @watch start
+// templates/admin/dashboard.tmpl
+// web_src/js/webcomponents/relative-time.js
+// @watch end
+
+import {expect} from '@playwright/test';
+import {test} from './utils_e2e.ts';
+
+test.use({user: 'user1'});
+
+test('Relative time after htmx swap', async ({page}, workerInfo) => {
+  test.skip(
+    workerInfo.project.name !== 'firefox' && workerInfo.project.name !== 'Mobile Chrome',
+    'This is a really slow test, so limit to a subset of client.',
+  );
+  await page.goto('/admin');
+
+  const relativeTime = page.locator('.admin-dl-horizontal > dd:nth-child(2) > relative-time');
+  await expect(relativeTime).toContainText('ago');
+
+  const body = page.locator('body');
+  await body.evaluate(
+    (element) =>
+      new Promise((resolve) =>
+        element.addEventListener('htmx:afterSwap', () => {
+          resolve();
+        }),
+      ),
+  );
+
+  await expect(relativeTime).toContainText('ago');
+});
diff --git a/web_src/js/webcomponents/relative-time.js b/web_src/js/webcomponents/relative-time.js
index a97814d2fd..5a126fd625 100644
--- a/web_src/js/webcomponents/relative-time.js
+++ b/web_src/js/webcomponents/relative-time.js
@@ -141,4 +141,10 @@ function UpdateAllRelativeTimes() {
   for (const object of document.querySelectorAll('relative-time')) UpdateRelativeTime(object);
 }
 
-document.addEventListener('DOMContentLoaded', UpdateAllRelativeTimes);
+document.addEventListener('DOMContentLoaded', () => {
+  UpdateAllRelativeTimes();
+  // Also update relative-time DOM elements after htmx swap events.
+  document.body.addEventListener('htmx:afterSwap', () => {
+    for (const object of document.querySelectorAll('relative-time')) DoUpdateRelativeTime(object);
+  });
+});