From 8a8c625bc19153be7336f8a1e8d370210eb05916 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sun, 25 Feb 2024 17:39:41 +0100
Subject: [PATCH 01/74] WIP: Overflow menu

---
 templates/explore/navbar.tmpl                 |  4 +-
 templates/repo/diff/image_diff.tmpl           |  4 +-
 templates/repo/header.tmpl                    |  6 +--
 templates/user/auth/link_account.tmpl         |  4 +-
 templates/user/auth/signin_navbar.tmpl        |  4 +-
 templates/user/auth/signup_openid_navbar.tmpl |  4 +-
 web_src/css/base.css                          | 46 ++-----------------
 web_src/css/repo.css                          |  4 +-
 web_src/css/repo/header.css                   |  4 +-
 web_src/js/behaviours/overflow-menu.js        | 40 ++++++++++++++++
 web_src/js/index.js                           |  2 +
 web_src/js/utils/dom.js                       | 10 ++++
 12 files changed, 73 insertions(+), 59 deletions(-)
 create mode 100644 web_src/js/behaviours/overflow-menu.js

diff --git a/templates/explore/navbar.tmpl b/templates/explore/navbar.tmpl
index 7f2aea497affe..d5d2b8b87345c 100644
--- a/templates/explore/navbar.tmpl
+++ b/templates/explore/navbar.tmpl
@@ -1,5 +1,5 @@
-<div class="ui secondary pointing tabular top attached borderless menu new-menu navbar">
-	<div class="new-menu-inner">
+<div class="ui secondary pointing tabular top attached borderless menu overflow-menu navbar">
+	<div class="overflow-menu-items">
 		<a class="{{if .PageIsExploreRepositories}}active {{end}}item" href="{{AppSubUrl}}/explore/repos">
 			{{svg "octicon-repo"}} {{ctx.Locale.Tr "explore.repos"}}
 		</a>
diff --git a/templates/repo/diff/image_diff.tmpl b/templates/repo/diff/image_diff.tmpl
index 02cca784f6760..5e6e87efb29de 100644
--- a/templates/repo/diff/image_diff.tmpl
+++ b/templates/repo/diff/image_diff.tmpl
@@ -7,8 +7,8 @@
 			data-mime-before="{{.sniffedTypeBase.GetMimeType}}"
 			data-mime-after="{{.sniffedTypeHead.GetMimeType}}"
 		>
-			<div class="ui secondary pointing tabular top attached borderless menu new-menu">
-				<div class="new-menu-inner">
+			<div class="ui secondary pointing tabular top attached borderless menu overflow-menu">
+				<div class="overflow-menu-items">
 					<a class="item active" data-tab="diff-side-by-side-{{.file.Index}}">{{ctx.Locale.Tr "repo.diff.image.side_by_side"}}</a>
 					{{if and .blobBase .blobHead}}
 					<a class="item" data-tab="diff-swipe-{{.file.Index}}">{{ctx.Locale.Tr "repo.diff.image.swipe"}}</a>
diff --git a/templates/repo/header.tmpl b/templates/repo/header.tmpl
index 3e27d963bb600..566ca4f588182 100644
--- a/templates/repo/header.tmpl
+++ b/templates/repo/header.tmpl
@@ -126,9 +126,9 @@
 		{{if .IsGenerated}}<div class="fork-flag">{{ctx.Locale.Tr "repo.generated_from"}} <a href="{{(.TemplateRepo ctx).Link}}">{{(.TemplateRepo ctx).FullName}}</a></div>{{end}}
 	</div>
 {{end}}
-	<div class="ui container secondary pointing tabular top attached borderless menu new-menu navbar">
+	<div class="ui container secondary pointing tabular top attached borderless menu overflow-menu navbar">
 		{{if not (or .Repository.IsBeingCreated .Repository.IsBroken)}}
-			<div class="new-menu-inner">
+			<div class="overflow-menu-items">
 				{{if .Permission.CanRead $.UnitTypeCode}}
 				<a class="{{if .PageIsViewCode}}active {{end}}item" href="{{.RepoLink}}{{if and (ne .BranchName .Repository.DefaultBranch) (not $.PageIsWiki)}}/src/{{.BranchNameSubURL}}{{end}}">
 					{{svg "octicon-code"}} {{ctx.Locale.Tr "repo.code"}}
@@ -219,7 +219,7 @@
 				{{end}}
 			</div>
 		{{else if .Permission.IsAdmin}}
-			<div class="new-menu-inner">
+			<div class="overflow-menu-items">
 				<a class="{{if .PageIsRepoSettings}}active {{end}} item" href="{{.RepoLink}}/settings">
 					{{svg "octicon-tools"}} {{ctx.Locale.Tr "repo.settings"}}
 				</a>
diff --git a/templates/user/auth/link_account.tmpl b/templates/user/auth/link_account.tmpl
index 5235cbf69f7b3..879f678fa76d2 100644
--- a/templates/user/auth/link_account.tmpl
+++ b/templates/user/auth/link_account.tmpl
@@ -1,7 +1,7 @@
 {{template "base/head" .}}
 <div role="main" aria-label="{{.Title}}" class="page-content user link-account">
-	<div class="ui secondary pointing tabular top attached borderless menu new-menu navbar">
-		<div class="new-menu-inner">
+	<div class="ui secondary pointing tabular top attached borderless menu overflow-menu navbar">
+		<div class="overflow-menu-items">
 			<!-- TODO handle .ShowRegistrationButton once other login bugs are fixed -->
 			{{if not .AllowOnlyInternalRegistration}}
 				<a class="item {{if not .user_exists}}active{{end}}"
diff --git a/templates/user/auth/signin_navbar.tmpl b/templates/user/auth/signin_navbar.tmpl
index bc7fd03e137e3..25d5d1eb96cef 100644
--- a/templates/user/auth/signin_navbar.tmpl
+++ b/templates/user/auth/signin_navbar.tmpl
@@ -1,6 +1,6 @@
 {{if or .EnableOpenIDSignIn .EnableSSPI}}
-<div class="ui secondary pointing tabular top attached borderless menu new-menu navbar">
-	<div class="new-menu-inner">
+<div class="ui secondary pointing tabular top attached borderless menu overflow-menu navbar">
+	<div class="overflow-menu-items">
 		<a class="{{if .PageIsLogin}}active {{end}}item" rel="nofollow" href="{{AppSubUrl}}/user/login">
 			{{ctx.Locale.Tr "auth.login_userpass"}}
 		</a>
diff --git a/templates/user/auth/signup_openid_navbar.tmpl b/templates/user/auth/signup_openid_navbar.tmpl
index 075f2e4d7b1e2..5c6b5f5757e56 100644
--- a/templates/user/auth/signup_openid_navbar.tmpl
+++ b/templates/user/auth/signup_openid_navbar.tmpl
@@ -1,5 +1,5 @@
-<div class="ui secondary pointing tabular top attached borderless menu new-menu navbar">
-	<div class="new-menu-inner">
+<div class="ui secondary pointing tabular top attached borderless menu overflow-menu navbar">
+	<div class="overflow-menu-items">
 		<a class="{{if .PageIsOpenIDConnect}}active {{end}}item" href="{{AppSubUrl}}/user/openid/connect">
 			{{ctx.Locale.Tr "auth.openid_connect_title"}}
 		</a>
diff --git a/web_src/css/base.css b/web_src/css/base.css
index 280808a5ce7db..5830d5c331746 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -248,7 +248,7 @@ a.label,
 }
 
 .page-content .header-wrapper,
-.page-content .new-menu {
+.page-content .overflow-menu {
   margin-top: -15px !important;
   padding-top: 15px !important;
 }
@@ -1339,59 +1339,21 @@ strong.attention-caution, span.attention-caution {
   }
 }
 
-.ui.menu.new-menu {
+.ui.menu.overflow-menu {
   margin-bottom: 15px;
   background: var(--color-header-wrapper);
   border-bottom: 1px solid var(--color-secondary) !important;
-  overflow: auto;
 }
 
-.ui.menu.new-menu .new-menu-inner {
+.ui.menu.overflow-menu .overflow-menu-items {
   display: flex;
-  margin-left: auto;
-  margin-right: auto;
-  overflow-x: auto;
   width: 100%;
-  mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 60px), transparent 100%);
-  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 60px), transparent 100%);
 }
 
-.ui.menu.new-menu .item {
+.ui.menu.overflow-menu .overflow-menu-items .item {
   margin-bottom: 0 !important; /* reset fomantic's margin, because the active menu has special bottom border */
 }
 
-@media (max-width: 767.98px) {
-  .ui.menu.new-menu .item {
-    width: auto !important;
-  }
-}
-
-.ui.menu.new-menu .item:first-child {
-  margin-left: auto; /* "justify-content: center" doesn't work with "overflow: auto", so use margin: auto */
-}
-
-.ui.menu.new-menu .item:last-child {
-  padding-right: 30px !important;
-  margin-right: auto;
-}
-
-.ui.menu.new-menu::-webkit-scrollbar {
-  height: 6px;
-  display: none;
-}
-
-.ui.menu.new-menu::-webkit-scrollbar-track {
-  background: none !important;
-}
-
-.ui.menu.new-menu::-webkit-scrollbar-thumb {
-  box-shadow: none !important;
-}
-
-.ui.menu.new-menu:hover::-webkit-scrollbar {
-  display: block;
-}
-
 .repos-search {
   padding-bottom: 0 !important;
 }
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index 31cff0ca15eb0..83af50fd94be4 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -2778,12 +2778,12 @@ tbody.commit-list {
   border-left: 1px solid var(--color-secondary);
 }
 
-.repository .ui.menu.new-menu {
+.repository .ui.menu.overflow-menu {
   background: none !important;
 }
 
 @media (max-width: 1200px) {
-  .repository .ui.menu.new-menu::after {
+  .repository .ui.menu.overflow-menu::after {
     background: none !important;
   }
 }
diff --git a/web_src/css/repo/header.css b/web_src/css/repo/header.css
index d5c7d212e8e75..071251d07a1da 100644
--- a/web_src/css/repo/header.css
+++ b/web_src/css/repo/header.css
@@ -74,13 +74,13 @@
   background-color: var(--color-header-wrapper);
 }
 
-.repository .header-wrapper .new-menu {
+.repository .header-wrapper .overflow-menu {
   padding-top: 0 !important;
   margin-top: 0 !important;
   margin-bottom: 0 !important;
 }
 
-.repository .header-wrapper .new-menu .item {
+.repository .header-wrapper .overflow-menu .item {
   margin-left: 0 !important;
   margin-right: 0 !important;
 }
diff --git a/web_src/js/behaviours/overflow-menu.js b/web_src/js/behaviours/overflow-menu.js
new file mode 100644
index 0000000000000..0fd325b0d1ee7
--- /dev/null
+++ b/web_src/js/behaviours/overflow-menu.js
@@ -0,0 +1,40 @@
+import {throttle} from 'throttle-debounce';
+import {isHorizontallyOverflown, createElementFromHTML} from '../utils/dom.js';
+import {svg} from '../svg.js';
+import $ from 'jquery';
+
+const update = throttle(100, (menu) => {
+  const isOverflown = isHorizontallyOverflown(menu);
+  if (isOverflown) {
+    const overflownItems = [];
+    const {right: menuRight} = menu.getBoundingClientRect();
+    for (const item of menu.querySelectorAll('.overflow-menu-items .item')) {
+      const {right: itemRight} = item.getBoundingClientRect();
+      if (itemRight >= menuRight) {
+        overflownItems.push(item.cloneNode(true));
+        item.remove();
+      }
+    }
+    if (overflownItems.length) {
+      menu.querySelector('.overflow-menu')?.remove();
+      menu.append(createElementFromHTML(`
+        <div class="ui dropdown overflow-menu gt-px-2">
+          <div class="text">${svg('octicon-kebab-horizontal')}</div>
+          <div class="menu">${overflownItems.map((item) => item.outerHTML).join('')}</div>
+        </div>
+      `));
+      $(menu).dropdown();
+    }
+  }
+});
+
+export function initOverflowMenu() {
+  for (const el of document.querySelectorAll('.overflow-menu')) {
+    update(el);
+    (new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        update(entry.target);
+      }
+    })).observe(el);
+  }
+}
diff --git a/web_src/js/index.js b/web_src/js/index.js
index b7f3ba99a0e95..8b69613626fcc 100644
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -88,6 +88,7 @@ import {initRepoCodeFrequency} from './features/code-frequency.js';
 import {initRepoRecentCommits} from './features/recent-commits.js';
 import {initRepoDiffCommitBranchesAndTags} from './features/repo-diff-commit.js';
 import {initDirAuto} from './modules/dirauto.js';
+import {initOverflowMenu} from './behaviours/overflow-menu.js';
 
 // Init Gitea's Fomantic settings
 initGiteaFomantic();
@@ -189,4 +190,5 @@ onDomReady(() => {
   initRepoDiffView();
   initPdfViewer();
   initScopedAccessTokenCategories();
+  initOverflowMenu();
 });
diff --git a/web_src/js/utils/dom.js b/web_src/js/utils/dom.js
index 91535dc187595..3c96e7708462d 100644
--- a/web_src/js/utils/dom.js
+++ b/web_src/js/utils/dom.js
@@ -243,3 +243,13 @@ export function isElemVisible(element) {
 
   return Boolean(element.offsetWidth || element.offsetHeight || element.getClientRects().length);
 }
+
+export function isHorizontallyOverflown(el) {
+  return (el.scrollWidth ?? 0) - (el.clientWidth ?? 0) > 1;
+}
+
+export function createElementFromHTML(str) {
+  const div = document.createElement('div');
+  div.innerHTML = str.trim();
+  return div.firstChild;
+}

From ba133600b3eb04b6bcf499bae04d653dd58f7893 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Mon, 26 Feb 2024 00:32:10 +0100
Subject: [PATCH 02/74] fix calc

---
 web_src/js/utils/dom.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web_src/js/utils/dom.js b/web_src/js/utils/dom.js
index 3c96e7708462d..680c1159eee91 100644
--- a/web_src/js/utils/dom.js
+++ b/web_src/js/utils/dom.js
@@ -245,7 +245,7 @@ export function isElemVisible(element) {
 }
 
 export function isHorizontallyOverflown(el) {
-  return (el.scrollWidth ?? 0) - (el.clientWidth ?? 0) > 1;
+  return (el.scrollWidth ?? 0) - (el.clientWidth ?? 0) > 0;
 }
 
 export function createElementFromHTML(str) {

From 9cc21fe84f3e442a66a52c785b185388de2951bd Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Mon, 26 Feb 2024 01:41:01 +0100
Subject: [PATCH 03/74] progress

---
 web_src/js/behaviours/overflow-menu.js | 53 ++++++++++++++++----------
 web_src/js/utils/dom.js                | 10 -----
 2 files changed, 32 insertions(+), 31 deletions(-)

diff --git a/web_src/js/behaviours/overflow-menu.js b/web_src/js/behaviours/overflow-menu.js
index 0fd325b0d1ee7..13334fd8ca932 100644
--- a/web_src/js/behaviours/overflow-menu.js
+++ b/web_src/js/behaviours/overflow-menu.js
@@ -1,30 +1,41 @@
 import {throttle} from 'throttle-debounce';
-import {isHorizontallyOverflown, createElementFromHTML} from '../utils/dom.js';
 import {svg} from '../svg.js';
-import $ from 'jquery';
+import {createTippy} from '../modules/tippy.js';
 
 const update = throttle(100, (menu) => {
-  const isOverflown = isHorizontallyOverflown(menu);
-  if (isOverflown) {
-    const overflownItems = [];
-    const {right: menuRight} = menu.getBoundingClientRect();
-    for (const item of menu.querySelectorAll('.overflow-menu-items .item')) {
-      const {right: itemRight} = item.getBoundingClientRect();
-      if (itemRight >= menuRight) {
-        overflownItems.push(item.cloneNode(true));
-        item.remove();
-      }
+  const menuItems = menu.querySelectorAll('.overflow-menu-items .item');
+  const buttonItems = [];
+
+  const {right: menuRight} = menu.getBoundingClientRect();
+  for (const item of menuItems) {
+    const {right: itemRight} = item.getBoundingClientRect();
+    if (itemRight >= menuRight) {
+      buttonItems.push(item.cloneNode(true));
+      item.remove();
     }
-    if (overflownItems.length) {
-      menu.querySelector('.overflow-menu')?.remove();
-      menu.append(createElementFromHTML(`
-        <div class="ui dropdown overflow-menu gt-px-2">
-          <div class="text">${svg('octicon-kebab-horizontal')}</div>
-          <div class="menu">${overflownItems.map((item) => item.outerHTML).join('')}</div>
-        </div>
-      `));
-      $(menu).dropdown();
+  }
+
+  if (buttonItems.length && !menu.querySelector('.overflow-menu-button')) {
+    const btn = document.createElement('button');
+    btn.classList.add('overflow-menu-button', 'btn', 'tw-px-4');
+    btn.innerHTML = svg('octicon-kebab-horizontal');
+
+    const itemsMenu = document.createElement('div');
+    itemsMenu.classList.add('overflow-menu-tippy', 'ui', 'vertical', 'menu');
+    for (const item of buttonItems) {
+      itemsMenu.append(item);
     }
+
+    createTippy(btn, {
+      trigger: 'click',
+      hideOnClick: true,
+      interactive: true,
+      placement: 'bottom-end',
+      role: 'menu',
+      content: itemsMenu,
+    });
+
+    menu.append(btn);
   }
 });
 
diff --git a/web_src/js/utils/dom.js b/web_src/js/utils/dom.js
index 680c1159eee91..91535dc187595 100644
--- a/web_src/js/utils/dom.js
+++ b/web_src/js/utils/dom.js
@@ -243,13 +243,3 @@ export function isElemVisible(element) {
 
   return Boolean(element.offsetWidth || element.offsetHeight || element.getClientRects().length);
 }
-
-export function isHorizontallyOverflown(el) {
-  return (el.scrollWidth ?? 0) - (el.clientWidth ?? 0) > 0;
-}
-
-export function createElementFromHTML(str) {
-  const div = document.createElement('div');
-  div.innerHTML = str.trim();
-  return div.firstChild;
-}

From 2a439caa72db65ef56b0eef453c82ef19fa740c3 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Mon, 26 Feb 2024 01:57:18 +0100
Subject: [PATCH 04/74] progress

---
 web_src/js/behaviours/overflow-menu.js | 13 ++++++++-----
 web_src/js/bootstrap.js                |  3 ++-
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/web_src/js/behaviours/overflow-menu.js b/web_src/js/behaviours/overflow-menu.js
index 13334fd8ca932..845667b34812d 100644
--- a/web_src/js/behaviours/overflow-menu.js
+++ b/web_src/js/behaviours/overflow-menu.js
@@ -17,11 +17,11 @@ const update = throttle(100, (menu) => {
 
   if (buttonItems.length && !menu.querySelector('.overflow-menu-button')) {
     const btn = document.createElement('button');
-    btn.classList.add('overflow-menu-button', 'btn', 'tw-px-4');
+    btn.classList.add('overflow-menu-button', 'btn', 'tw-px-2');
     btn.innerHTML = svg('octicon-kebab-horizontal');
 
     const itemsMenu = document.createElement('div');
-    itemsMenu.classList.add('overflow-menu-tippy', 'ui', 'vertical', 'menu');
+    itemsMenu.classList.add('overflow-menu-tippy', 'ui', 'secondary', 'vertical', 'menu');
     for (const item of buttonItems) {
       itemsMenu.append(item);
     }
@@ -43,9 +43,12 @@ export function initOverflowMenu() {
   for (const el of document.querySelectorAll('.overflow-menu')) {
     update(el);
     (new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        update(entry.target);
-      }
+      // raf seems to avoid 'ResizeObserver loop completed with undelivered notifications' error
+      requestAnimationFrame(() => {
+        for (const entry of entries) {
+          update(entry.target);
+        }
+      });
     })).observe(el);
   }
 }
diff --git a/web_src/js/bootstrap.js b/web_src/js/bootstrap.js
index e46c91e5e6d98..1f181a646d54e 100644
--- a/web_src/js/bootstrap.js
+++ b/web_src/js/bootstrap.js
@@ -33,7 +33,7 @@ function processWindowErrorEvent(e) {
   const assetBaseUrl = String(new URL(__webpack_public_path__, window.location.origin));
 
   // error is likely from browser extension or inline script. Do not show these in production builds.
-  if (!err.stack?.includes(assetBaseUrl) && window.config?.runModeIsProd) return;
+  if (err?.stack && !err.stack?.includes(assetBaseUrl) && window.config?.runModeIsProd) return;
 
   let message;
   if (e.type === 'unhandledrejection') {
@@ -49,6 +49,7 @@ function processWindowErrorEvent(e) {
   }
 
   showGlobalErrorMessage(`${message} Open browser console to see more details.`);
+  console.error(err ?? e);
 }
 
 function initGlobalErrorHandler() {

From c73d3abeaa78c6daf8e2a5a5eb8203cf5102ce0a Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Mon, 26 Feb 2024 20:11:18 +0100
Subject: [PATCH 05/74] error handler stuff

---
 web_src/js/bootstrap.js | 35 ++++++++++++++++++-----------------
 1 file changed, 18 insertions(+), 17 deletions(-)

diff --git a/web_src/js/bootstrap.js b/web_src/js/bootstrap.js
index 1f181a646d54e..b1ce395bc7cd6 100644
--- a/web_src/js/bootstrap.js
+++ b/web_src/js/bootstrap.js
@@ -28,28 +28,29 @@ export function showGlobalErrorMessage(msg) {
 /**
  * @param {ErrorEvent} e
  */
-function processWindowErrorEvent(e) {
-  const err = e.error ?? e.reason;
+function processWindowErrorEvent({error, reason, message, type, filename, lineno, colno}) {
+  let err = error ?? reason;
   const assetBaseUrl = String(new URL(__webpack_public_path__, window.location.origin));
 
-  // error is likely from browser extension or inline script. Do not show these in production builds.
-  if (err?.stack && !err.stack?.includes(assetBaseUrl) && window.config?.runModeIsProd) return;
+  // Normally the browser will log the error to the console, but in some cases like "ResizeObserver
+  // loop completed with undelivered notifications" in Firefox, e.error is undefined, resulting in
+  // nothing being logged by the browser, so we do it instead.
+  if (!err && message) console.error(new Error(message));
 
-  let message;
-  if (e.type === 'unhandledrejection') {
-    message = `JavaScript promise rejection: ${err.message}.`;
-  } else {
-    message = `JavaScript error: ${e.message} (${e.filename} @ ${e.lineno}:${e.colno}).`;
-  }
+  // If the error stack trace does not include the base URL of our scripts, it is likely from a
+  // browser extension or inline script. Do not show these in production builds.
+  if (!err?.stack?.includes(assetBaseUrl) && window.config?.runModeIsProd) return;
 
-  if (!e.error && e.lineno === 0 && e.colno === 0 && e.filename === '' && window.navigator.userAgent.includes('FxiOS/')) {
-    // At the moment, Firefox (iOS) (10x) has an engine bug. See https://github.com/go-gitea/gitea/issues/20240
-    // If a script inserts a newly created (and content changed) element into DOM, there will be a nonsense error event reporting: Script error: line 0, col 0.
-    return; // ignore such nonsense error event
-  }
+  // At the moment, Firefox (iOS) (10x) has an engine bug. If a script inserts a newly created (and
+  // content changed) element into DOM, there will be a nonsense error event reporting: Script
+  // error: line 0, col 0, ignore such nonsense error event.
+  // See https://github.com/go-gitea/gitea/issues/20240
+  if (!err && lineno === 0 && colno === 0 && filename === '' && window.navigator.userAgent.includes('FxiOS/')) return;
 
-  showGlobalErrorMessage(`${message} Open browser console to see more details.`);
-  console.error(err ?? e);
+  const renderedType = type === 'unhandledrejection' ? 'promise rejection' : type;
+  let msg = err?.message ?? message;
+  if (lineno) msg += `(${filename} @ ${lineno}:${colno})`;
+  showGlobalErrorMessage(`JavaScript ${renderedType}: ${msg}. Open browser console to see more details.`);
 }
 
 function initGlobalErrorHandler() {

From 049c6cf49a4ac9aade948124187cf4f01f1df987 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Mon, 26 Feb 2024 20:11:35 +0100
Subject: [PATCH 06/74] const

---
 web_src/js/bootstrap.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web_src/js/bootstrap.js b/web_src/js/bootstrap.js
index b1ce395bc7cd6..84a667d5361f7 100644
--- a/web_src/js/bootstrap.js
+++ b/web_src/js/bootstrap.js
@@ -29,7 +29,7 @@ export function showGlobalErrorMessage(msg) {
  * @param {ErrorEvent} e
  */
 function processWindowErrorEvent({error, reason, message, type, filename, lineno, colno}) {
-  let err = error ?? reason;
+  const err = error ?? reason;
   const assetBaseUrl = String(new URL(__webpack_public_path__, window.location.origin));
 
   // Normally the browser will log the error to the console, but in some cases like "ResizeObserver

From 708aad310984eb898c8b6866a30618ec8781f3bd Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Mon, 26 Feb 2024 20:15:20 +0100
Subject: [PATCH 07/74] dot

---
 web_src/js/bootstrap.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/web_src/js/bootstrap.js b/web_src/js/bootstrap.js
index 84a667d5361f7..d27153153e209 100644
--- a/web_src/js/bootstrap.js
+++ b/web_src/js/bootstrap.js
@@ -50,7 +50,8 @@ function processWindowErrorEvent({error, reason, message, type, filename, lineno
   const renderedType = type === 'unhandledrejection' ? 'promise rejection' : type;
   let msg = err?.message ?? message;
   if (lineno) msg += `(${filename} @ ${lineno}:${colno})`;
-  showGlobalErrorMessage(`JavaScript ${renderedType}: ${msg}. Open browser console to see more details.`);
+  const dot = msg.endsWith('.') ? '' : '.';
+  showGlobalErrorMessage(`JavaScript ${renderedType}: ${msg}${dot} Open browser console to see more details.`);
 }
 
 function initGlobalErrorHandler() {

From c2585363396fb7bee3743b5f393b7a77214264a1 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Mon, 26 Feb 2024 21:39:35 +0100
Subject: [PATCH 08/74] progress

---
 web_src/js/behaviours/overflow-menu.js | 78 ++++++++++++++++----------
 1 file changed, 48 insertions(+), 30 deletions(-)

diff --git a/web_src/js/behaviours/overflow-menu.js b/web_src/js/behaviours/overflow-menu.js
index 845667b34812d..409a0244de1bc 100644
--- a/web_src/js/behaviours/overflow-menu.js
+++ b/web_src/js/behaviours/overflow-menu.js
@@ -1,54 +1,72 @@
-import {throttle} from 'throttle-debounce';
+import {debounce} from 'throttle-debounce';
 import {svg} from '../svg.js';
 import {createTippy} from '../modules/tippy.js';
 
-const update = throttle(100, (menu) => {
-  const menuItems = menu.querySelectorAll('.overflow-menu-items .item');
-  const buttonItems = [];
+const update = debounce(250, (menu) => {
+  const menuParent = menu.querySelector('.overflow-menu-items');
+  let buttonParent = menu.querySelector('.overflow-menu-button-items');
+  const menuItems = menuParent.querySelectorAll('.item');
 
-  const {right: menuRight} = menu.getBoundingClientRect();
+  if (!buttonParent) {
+    const div = document.createElement('div');
+    div.classList.add('overflow-menu-button-items', 'ui', 'secondary', 'vertical', 'menu', 'tippy-target');
+    menu.append(div);
+    buttonParent = div;
+  }
+
+  const buttonItems = buttonParent?.querySelectorAll('.item') || [];
+
+  for (const item of buttonItems) {
+    menuParent.append(item);
+  }
+
+  // measure which items are outside the element boundary and move them into the button menu
+  const itemsToMove = [];
+  const {right: menuRight} = menu.parentNode.getBoundingClientRect();
   for (const item of menuItems) {
     const {right: itemRight} = item.getBoundingClientRect();
-    if (itemRight >= menuRight) {
-      buttonItems.push(item.cloneNode(true));
-      item.remove();
+    if (menuRight - itemRight < 40) {
+      itemsToMove.push(item);
     }
   }
 
-  if (buttonItems.length && !menu.querySelector('.overflow-menu-button')) {
-    const btn = document.createElement('button');
-    btn.classList.add('overflow-menu-button', 'btn', 'tw-px-2');
-    btn.innerHTML = svg('octicon-kebab-horizontal');
-
-    const itemsMenu = document.createElement('div');
-    itemsMenu.classList.add('overflow-menu-tippy', 'ui', 'secondary', 'vertical', 'menu');
-    for (const item of buttonItems) {
-      itemsMenu.append(item);
+  if (itemsToMove?.length) {
+    for (const item of itemsToMove) {
+      buttonParent.append(item);
     }
 
-    createTippy(btn, {
-      trigger: 'click',
-      hideOnClick: true,
-      interactive: true,
-      placement: 'bottom-end',
-      role: 'menu',
-      content: itemsMenu,
-    });
+    if (!menu.querySelector('.overflow-menu-button')) {
+      const btn = document.createElement('button');
+      btn.classList.add('overflow-menu-button', 'btn', 'tw-px-2');
+      btn.innerHTML = svg('octicon-kebab-horizontal');
+      menu.append(btn);
 
-    menu.append(btn);
+      createTippy(btn, {
+        trigger: 'click',
+        hideOnClick: true,
+        interactive: true,
+        placement: 'bottom-end',
+        role: 'menu',
+        content: buttonParent.cloneNode(true),
+      });
+    }
+  } else {
+    menu.querySelector('.overflow-menu-button')?.remove();
   }
 });
 
 export function initOverflowMenu() {
   for (const el of document.querySelectorAll('.overflow-menu')) {
     update(el);
+    let lastSize;
     (new ResizeObserver((entries) => {
-      // raf seems to avoid 'ResizeObserver loop completed with undelivered notifications' error
-      requestAnimationFrame(() => {
-        for (const entry of entries) {
+      for (const entry of entries) {
+        const newSize = entry.contentBoxSize[0].inlineSize;
+        if (newSize !== lastSize) { // only trigger update on horizontal size change
           update(entry.target);
+          lastSize = newSize;
         }
-      });
+      }
     })).observe(el);
   }
 }

From c945b614fc0fb09b0a42a01878c28a8db823182e Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Mon, 26 Feb 2024 21:46:55 +0100
Subject: [PATCH 09/74] revert bootstrap changes

---
 web_src/js/bootstrap.js | 35 ++++++++++++++++-------------------
 1 file changed, 16 insertions(+), 19 deletions(-)

diff --git a/web_src/js/bootstrap.js b/web_src/js/bootstrap.js
index d27153153e209..e46c91e5e6d98 100644
--- a/web_src/js/bootstrap.js
+++ b/web_src/js/bootstrap.js
@@ -28,30 +28,27 @@ export function showGlobalErrorMessage(msg) {
 /**
  * @param {ErrorEvent} e
  */
-function processWindowErrorEvent({error, reason, message, type, filename, lineno, colno}) {
-  const err = error ?? reason;
+function processWindowErrorEvent(e) {
+  const err = e.error ?? e.reason;
   const assetBaseUrl = String(new URL(__webpack_public_path__, window.location.origin));
 
-  // Normally the browser will log the error to the console, but in some cases like "ResizeObserver
-  // loop completed with undelivered notifications" in Firefox, e.error is undefined, resulting in
-  // nothing being logged by the browser, so we do it instead.
-  if (!err && message) console.error(new Error(message));
+  // error is likely from browser extension or inline script. Do not show these in production builds.
+  if (!err.stack?.includes(assetBaseUrl) && window.config?.runModeIsProd) return;
 
-  // If the error stack trace does not include the base URL of our scripts, it is likely from a
-  // browser extension or inline script. Do not show these in production builds.
-  if (!err?.stack?.includes(assetBaseUrl) && window.config?.runModeIsProd) return;
+  let message;
+  if (e.type === 'unhandledrejection') {
+    message = `JavaScript promise rejection: ${err.message}.`;
+  } else {
+    message = `JavaScript error: ${e.message} (${e.filename} @ ${e.lineno}:${e.colno}).`;
+  }
 
-  // At the moment, Firefox (iOS) (10x) has an engine bug. If a script inserts a newly created (and
-  // content changed) element into DOM, there will be a nonsense error event reporting: Script
-  // error: line 0, col 0, ignore such nonsense error event.
-  // See https://github.com/go-gitea/gitea/issues/20240
-  if (!err && lineno === 0 && colno === 0 && filename === '' && window.navigator.userAgent.includes('FxiOS/')) return;
+  if (!e.error && e.lineno === 0 && e.colno === 0 && e.filename === '' && window.navigator.userAgent.includes('FxiOS/')) {
+    // At the moment, Firefox (iOS) (10x) has an engine bug. See https://github.com/go-gitea/gitea/issues/20240
+    // If a script inserts a newly created (and content changed) element into DOM, there will be a nonsense error event reporting: Script error: line 0, col 0.
+    return; // ignore such nonsense error event
+  }
 
-  const renderedType = type === 'unhandledrejection' ? 'promise rejection' : type;
-  let msg = err?.message ?? message;
-  if (lineno) msg += `(${filename} @ ${lineno}:${colno})`;
-  const dot = msg.endsWith('.') ? '' : '.';
-  showGlobalErrorMessage(`JavaScript ${renderedType}: ${msg}${dot} Open browser console to see more details.`);
+  showGlobalErrorMessage(`${message} Open browser console to see more details.`);
 }
 
 function initGlobalErrorHandler() {

From 93bcd099e96e51d8eb35ce4d92ed1626133419e2 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Tue, 27 Feb 2024 00:35:16 +0100
Subject: [PATCH 10/74] more progress

---
 web_src/css/modules/tippy.css          |  9 +++++
 web_src/css/repo/linebutton.css        |  5 ---
 web_src/js/behaviours/overflow-menu.js | 52 ++++++++++++--------------
 3 files changed, 33 insertions(+), 33 deletions(-)

diff --git a/web_src/css/modules/tippy.css b/web_src/css/modules/tippy.css
index d65ecc89fbd9d..172c6c0d1f271 100644
--- a/web_src/css/modules/tippy.css
+++ b/web_src/css/modules/tippy.css
@@ -56,6 +56,15 @@
   fill: var(--color-menu);
 }
 
+.tippy-box[data-theme="menu"] .tippy-content > .ui.menu {
+  width: auto; /* unset fomantic's default 15rem */
+  border: none; /* remove `.ui.menu` border as it is provided by tippy */
+}
+
+.tippy-box[data-theme="menu"] .tippy-content .ui.vertical.menu .item::before {
+  content: none; /* remove lines between items */
+}
+
 /* box-with-header theme to look like .ui.attached.segment. can contain .ui.attached.header */
 
 .tippy-box[data-theme="box-with-header"] .tippy-content {
diff --git a/web_src/css/repo/linebutton.css b/web_src/css/repo/linebutton.css
index 1e5e51eac5df3..79be5a7a9e76f 100644
--- a/web_src/css/repo/linebutton.css
+++ b/web_src/css/repo/linebutton.css
@@ -2,11 +2,6 @@
   color: var(--color-text-dark) !important;
 }
 
-.code-line-menu {
-  width: auto !important;
-  border: none !important; /* the border is provided by tippy, not using the `.ui.menu` border */
-}
-
 .code-line-button {
   background-color: var(--color-menu);
   color: var(--color-text-light);
diff --git a/web_src/js/behaviours/overflow-menu.js b/web_src/js/behaviours/overflow-menu.js
index 409a0244de1bc..e591f2118a520 100644
--- a/web_src/js/behaviours/overflow-menu.js
+++ b/web_src/js/behaviours/overflow-menu.js
@@ -1,31 +1,28 @@
-import {debounce} from 'throttle-debounce';
+import {throttle} from 'throttle-debounce';
 import {svg} from '../svg.js';
 import {createTippy} from '../modules/tippy.js';
 
-const update = debounce(250, (menu) => {
-  const menuParent = menu.querySelector('.overflow-menu-items');
-  let buttonParent = menu.querySelector('.overflow-menu-button-items');
-  const menuItems = menuParent.querySelectorAll('.item');
-
+const update = throttle(100, (menu) => {
+  let buttonParent = menu.querySelector('.overflow-menu-dropdown');
   if (!buttonParent) {
     const div = document.createElement('div');
-    div.classList.add('overflow-menu-button-items', 'ui', 'secondary', 'vertical', 'menu', 'tippy-target');
+    div.classList.add('overflow-menu-dropdown', 'ui', 'vertical', 'menu', 'tippy-target');
     menu.append(div);
     buttonParent = div;
   }
 
-  const buttonItems = buttonParent?.querySelectorAll('.item') || [];
-
-  for (const item of buttonItems) {
+  const menuParent = menu.querySelector('.overflow-menu-items');
+  const dropdownItems = buttonParent?.querySelectorAll('.item') || [];
+  for (const item of dropdownItems) {
     menuParent.append(item);
   }
 
   // measure which items are outside the element boundary and move them into the button menu
   const itemsToMove = [];
-  const {right: menuRight} = menu.parentNode.getBoundingClientRect();
-  for (const item of menuItems) {
-    const {right: itemRight} = item.getBoundingClientRect();
-    if (menuRight - itemRight < 40) {
+  const menuRight = menu.parentNode.getBoundingClientRect().right;
+  for (const item of menuParent.querySelectorAll('.item')) {
+    const itemRight = item.getBoundingClientRect().right;
+    if (menuRight - itemRight < 50) {
       itemsToMove.push(item);
     }
   }
@@ -35,21 +32,20 @@ const update = debounce(250, (menu) => {
       buttonParent.append(item);
     }
 
-    if (!menu.querySelector('.overflow-menu-button')) {
-      const btn = document.createElement('button');
-      btn.classList.add('overflow-menu-button', 'btn', 'tw-px-2');
-      btn.innerHTML = svg('octicon-kebab-horizontal');
-      menu.append(btn);
+    menu.querySelector('.overflow-menu-button')?.remove();
+    const btn = document.createElement('button');
+    btn.classList.add('overflow-menu-button', 'btn', 'tw-px-2');
+    btn.innerHTML = svg('octicon-kebab-horizontal');
+    menu.append(btn);
 
-      createTippy(btn, {
-        trigger: 'click',
-        hideOnClick: true,
-        interactive: true,
-        placement: 'bottom-end',
-        role: 'menu',
-        content: buttonParent.cloneNode(true),
-      });
-    }
+    createTippy(btn, {
+      trigger: 'click',
+      hideOnClick: true,
+      interactive: true,
+      placement: 'bottom-end',
+      role: 'menu',
+      content: buttonParent.cloneNode(true),
+    });
   } else {
     menu.querySelector('.overflow-menu-button')?.remove();
   }

From ef7ecf79c32ed337f5c1ecc539a99e00a86c8acb Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Tue, 27 Feb 2024 00:41:05 +0100
Subject: [PATCH 11/74] rename variable

---
 web_src/js/behaviours/overflow-menu.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/web_src/js/behaviours/overflow-menu.js b/web_src/js/behaviours/overflow-menu.js
index e591f2118a520..15bc5eafa280f 100644
--- a/web_src/js/behaviours/overflow-menu.js
+++ b/web_src/js/behaviours/overflow-menu.js
@@ -3,16 +3,16 @@ import {svg} from '../svg.js';
 import {createTippy} from '../modules/tippy.js';
 
 const update = throttle(100, (menu) => {
-  let buttonParent = menu.querySelector('.overflow-menu-dropdown');
-  if (!buttonParent) {
+  let dropdownParent = menu.querySelector('.overflow-menu-dropdown');
+  if (!dropdownParent) {
     const div = document.createElement('div');
     div.classList.add('overflow-menu-dropdown', 'ui', 'vertical', 'menu', 'tippy-target');
     menu.append(div);
-    buttonParent = div;
+    dropdownParent = div;
   }
 
   const menuParent = menu.querySelector('.overflow-menu-items');
-  const dropdownItems = buttonParent?.querySelectorAll('.item') || [];
+  const dropdownItems = dropdownParent?.querySelectorAll('.item') || [];
   for (const item of dropdownItems) {
     menuParent.append(item);
   }
@@ -29,7 +29,7 @@ const update = throttle(100, (menu) => {
 
   if (itemsToMove?.length) {
     for (const item of itemsToMove) {
-      buttonParent.append(item);
+      dropdownParent.append(item);
     }
 
     menu.querySelector('.overflow-menu-button')?.remove();
@@ -44,7 +44,7 @@ const update = throttle(100, (menu) => {
       interactive: true,
       placement: 'bottom-end',
       role: 'menu',
-      content: buttonParent.cloneNode(true),
+      content: dropdownParent.cloneNode(true),
     });
   } else {
     menu.querySelector('.overflow-menu-button')?.remove();

From 8c6acd9ea8bac3986ac6c4c43e5b8f422259a193 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Tue, 27 Feb 2024 00:42:27 +0100
Subject: [PATCH 12/74] rename another variable

---
 web_src/js/behaviours/overflow-menu.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/web_src/js/behaviours/overflow-menu.js b/web_src/js/behaviours/overflow-menu.js
index 15bc5eafa280f..20b293b743099 100644
--- a/web_src/js/behaviours/overflow-menu.js
+++ b/web_src/js/behaviours/overflow-menu.js
@@ -54,13 +54,13 @@ const update = throttle(100, (menu) => {
 export function initOverflowMenu() {
   for (const el of document.querySelectorAll('.overflow-menu')) {
     update(el);
-    let lastSize;
+    let lastWidth;
     (new ResizeObserver((entries) => {
       for (const entry of entries) {
-        const newSize = entry.contentBoxSize[0].inlineSize;
-        if (newSize !== lastSize) { // only trigger update on horizontal size change
+        const newWidth = entry.contentBoxSize[0].inlineSize;
+        if (newWidth !== lastWidth) {
           update(entry.target);
-          lastSize = newSize;
+          lastWidth = newWidth;
         }
       }
     })).observe(el);

From f1463f75ca41e43012c37dd9882bdba74d23a5ac Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sat, 2 Mar 2024 20:32:02 +0100
Subject: [PATCH 13/74] prevent layout shift when active element hides

---
 web_src/css/base.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/web_src/css/base.css b/web_src/css/base.css
index 0a28efa45701e..41b2fe2ed07b6 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -1873,7 +1873,6 @@ table th[data-sortt-desc] .svg {
   background: var(--color-body);
   border-color: var(--color-secondary);
   color: var(--color-text);
-  margin-top: 1px; /* offset fomantic's margin-bottom: -1px */
 }
 
 .ui.segment .ui.tabular.menu .active.item,

From eb902679118bd23f056ee3710dd56c196836a06c Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sat, 2 Mar 2024 20:53:21 +0100
Subject: [PATCH 14/74] move it to a web component

---
 templates/repo/header.tmpl                    |  4 +-
 web_src/js/index.js                           |  2 -
 .../GiteaOverflowMenu.js}                     | 45 ++++++++++---------
 web_src/js/webcomponents/webcomponents.js     |  1 +
 4 files changed, 27 insertions(+), 25 deletions(-)
 rename web_src/js/{behaviours/overflow-menu.js => webcomponents/GiteaOverflowMenu.js} (55%)

diff --git a/templates/repo/header.tmpl b/templates/repo/header.tmpl
index 68b797caeb69f..bda5602c24c92 100644
--- a/templates/repo/header.tmpl
+++ b/templates/repo/header.tmpl
@@ -126,7 +126,7 @@
 		{{if .IsGenerated}}<div class="fork-flag">{{ctx.Locale.Tr "repo.generated_from"}} <a href="{{(.TemplateRepo ctx).Link}}">{{(.TemplateRepo ctx).FullName}}</a></div>{{end}}
 	</div>
 {{end}}
-	<div class="ui container secondary pointing tabular top attached borderless menu overflow-menu navbar">
+	<gitea-overflow-menu class="ui container secondary pointing tabular top attached borderless menu overflow-menu navbar">
 		{{if not (or .Repository.IsBeingCreated .Repository.IsBroken)}}
 			<div class="overflow-menu-items">
 				{{if .Permission.CanRead $.UnitTypeCode}}
@@ -225,6 +225,6 @@
 				</a>
 			</div>
 		{{end}}
-	</div>
+	</gitea-overflow-menu>
 	<div class="ui tabs divider"></div>
 </div>
diff --git a/web_src/js/index.js b/web_src/js/index.js
index 8b69613626fcc..b7f3ba99a0e95 100644
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -88,7 +88,6 @@ import {initRepoCodeFrequency} from './features/code-frequency.js';
 import {initRepoRecentCommits} from './features/recent-commits.js';
 import {initRepoDiffCommitBranchesAndTags} from './features/repo-diff-commit.js';
 import {initDirAuto} from './modules/dirauto.js';
-import {initOverflowMenu} from './behaviours/overflow-menu.js';
 
 // Init Gitea's Fomantic settings
 initGiteaFomantic();
@@ -190,5 +189,4 @@ onDomReady(() => {
   initRepoDiffView();
   initPdfViewer();
   initScopedAccessTokenCategories();
-  initOverflowMenu();
 });
diff --git a/web_src/js/behaviours/overflow-menu.js b/web_src/js/webcomponents/GiteaOverflowMenu.js
similarity index 55%
rename from web_src/js/behaviours/overflow-menu.js
rename to web_src/js/webcomponents/GiteaOverflowMenu.js
index 20b293b743099..a31a36978f5a5 100644
--- a/web_src/js/behaviours/overflow-menu.js
+++ b/web_src/js/webcomponents/GiteaOverflowMenu.js
@@ -2,16 +2,16 @@ import {throttle} from 'throttle-debounce';
 import {svg} from '../svg.js';
 import {createTippy} from '../modules/tippy.js';
 
-const update = throttle(100, (menu) => {
-  let dropdownParent = menu.querySelector('.overflow-menu-dropdown');
+const update = throttle(100, (overflowMenu) => {
+  let dropdownParent = overflowMenu.querySelector('.overflow-menu-dropdown');
   if (!dropdownParent) {
     const div = document.createElement('div');
     div.classList.add('overflow-menu-dropdown', 'ui', 'vertical', 'menu', 'tippy-target');
-    menu.append(div);
+    overflowMenu.append(div);
     dropdownParent = div;
   }
 
-  const menuParent = menu.querySelector('.overflow-menu-items');
+  const menuParent = overflowMenu.querySelector('.overflow-menu-items');
   const dropdownItems = dropdownParent?.querySelectorAll('.item') || [];
   for (const item of dropdownItems) {
     menuParent.append(item);
@@ -19,7 +19,7 @@ const update = throttle(100, (menu) => {
 
   // measure which items are outside the element boundary and move them into the button menu
   const itemsToMove = [];
-  const menuRight = menu.parentNode.getBoundingClientRect().right;
+  const menuRight = overflowMenu.parentNode.getBoundingClientRect().right;
   for (const item of menuParent.querySelectorAll('.item')) {
     const itemRight = item.getBoundingClientRect().right;
     if (menuRight - itemRight < 50) {
@@ -32,11 +32,11 @@ const update = throttle(100, (menu) => {
       dropdownParent.append(item);
     }
 
-    menu.querySelector('.overflow-menu-button')?.remove();
+    overflowMenu.querySelector('.overflow-menu-button')?.remove();
     const btn = document.createElement('button');
     btn.classList.add('overflow-menu-button', 'btn', 'tw-px-2');
     btn.innerHTML = svg('octicon-kebab-horizontal');
-    menu.append(btn);
+    overflowMenu.append(btn);
 
     createTippy(btn, {
       trigger: 'click',
@@ -47,22 +47,25 @@ const update = throttle(100, (menu) => {
       content: dropdownParent.cloneNode(true),
     });
   } else {
-    menu.querySelector('.overflow-menu-button')?.remove();
+    overflowMenu.querySelector('.overflow-menu-button')?.remove();
   }
 });
 
-export function initOverflowMenu() {
-  for (const el of document.querySelectorAll('.overflow-menu')) {
-    update(el);
-    let lastWidth;
-    (new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        const newWidth = entry.contentBoxSize[0].inlineSize;
-        if (newWidth !== lastWidth) {
-          update(entry.target);
-          lastWidth = newWidth;
+window.customElements.define('gitea-overflow-menu', class extends HTMLElement {
+  connectedCallback() {
+    // raf is needed, otherwise the first update will no see all children
+    requestAnimationFrame(() => {
+      update(this);
+      let lastWidth;
+      (new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          const newWidth = entry.contentBoxSize[0].inlineSize;
+          if (newWidth !== lastWidth) {
+            update(entry.target);
+            lastWidth = newWidth;
+          }
         }
-      }
-    })).observe(el);
+      })).observe(this);
+    });
   }
-}
+});
diff --git a/web_src/js/webcomponents/webcomponents.js b/web_src/js/webcomponents/webcomponents.js
index 916a588db64bf..f9be387c84213 100644
--- a/web_src/js/webcomponents/webcomponents.js
+++ b/web_src/js/webcomponents/webcomponents.js
@@ -3,3 +3,4 @@ import './polyfill.js';
 
 import '@github/relative-time-element';
 import './GiteaOriginUrl.js';
+import './GiteaOverflowMenu.js';

From 2d404d0f73899e4e83afb3b25c9fb9e1d3e68c2d Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sat, 2 Mar 2024 21:05:54 +0100
Subject: [PATCH 15/74] rename to 'overflow-menu' and use it everywhere

---
 templates/explore/navbar.tmpl                        |  4 ++--
 templates/repo/diff/image_diff.tmpl                  |  4 ++--
 templates/repo/header.tmpl                           |  4 ++--
 templates/user/auth/link_account.tmpl                |  4 ++--
 templates/user/auth/signin_navbar.tmpl               |  4 ++--
 templates/user/auth/signup_openid_navbar.tmpl        |  4 ++--
 web_src/css/base.css                                 | 12 ++++++------
 web_src/css/repo/header.css                          |  4 ++--
 web_src/js/webcomponents/README.md                   |  1 -
 web_src/js/webcomponents/index.js                    |  4 ++++
 .../{GiteaOverflowMenu.js => overflow-menu.js}       |  2 +-
 .../js/webcomponents/{polyfill.js => polyfills.js}   |  2 ++
 web_src/js/webcomponents/webcomponents.js            |  6 ------
 webpack.config.js                                    |  2 +-
 14 files changed, 28 insertions(+), 29 deletions(-)
 create mode 100644 web_src/js/webcomponents/index.js
 rename web_src/js/webcomponents/{GiteaOverflowMenu.js => overflow-menu.js} (96%)
 rename web_src/js/webcomponents/{polyfill.js => polyfills.js} (87%)
 delete mode 100644 web_src/js/webcomponents/webcomponents.js

diff --git a/templates/explore/navbar.tmpl b/templates/explore/navbar.tmpl
index d5d2b8b87345c..631387a527efc 100644
--- a/templates/explore/navbar.tmpl
+++ b/templates/explore/navbar.tmpl
@@ -1,4 +1,4 @@
-<div class="ui secondary pointing tabular top attached borderless menu overflow-menu navbar">
+<overflow-menu class="ui secondary pointing tabular top attached borderless menu navbar">
 	<div class="overflow-menu-items">
 		<a class="{{if .PageIsExploreRepositories}}active {{end}}item" href="{{AppSubUrl}}/explore/repos">
 			{{svg "octicon-repo"}} {{ctx.Locale.Tr "explore.repos"}}
@@ -17,4 +17,4 @@
 		</a>
 		{{end}}
 	</div>
-</div>
+</overflow-menu>
diff --git a/templates/repo/diff/image_diff.tmpl b/templates/repo/diff/image_diff.tmpl
index 5e6e87efb29de..82d12186f83b9 100644
--- a/templates/repo/diff/image_diff.tmpl
+++ b/templates/repo/diff/image_diff.tmpl
@@ -7,7 +7,7 @@
 			data-mime-before="{{.sniffedTypeBase.GetMimeType}}"
 			data-mime-after="{{.sniffedTypeHead.GetMimeType}}"
 		>
-			<div class="ui secondary pointing tabular top attached borderless menu overflow-menu">
+			<overflow-menu class="ui secondary pointing tabular top attached borderless menu">
 				<div class="overflow-menu-items">
 					<a class="item active" data-tab="diff-side-by-side-{{.file.Index}}">{{ctx.Locale.Tr "repo.diff.image.side_by_side"}}</a>
 					{{if and .blobBase .blobHead}}
@@ -15,7 +15,7 @@
 					<a class="item" data-tab="diff-overlay-{{.file.Index}}">{{ctx.Locale.Tr "repo.diff.image.overlay"}}</a>
 					{{end}}
 				</div>
-			</div>
+			</overflow-menu>
 			<div class="image-diff-tabs is-loading">
 				<div class="ui bottom attached tab image-diff-container active" data-tab="diff-side-by-side-{{.file.Index}}">
 					<div class="diff-side-by-side">
diff --git a/templates/repo/header.tmpl b/templates/repo/header.tmpl
index bda5602c24c92..bf459d3055e92 100644
--- a/templates/repo/header.tmpl
+++ b/templates/repo/header.tmpl
@@ -126,7 +126,7 @@
 		{{if .IsGenerated}}<div class="fork-flag">{{ctx.Locale.Tr "repo.generated_from"}} <a href="{{(.TemplateRepo ctx).Link}}">{{(.TemplateRepo ctx).FullName}}</a></div>{{end}}
 	</div>
 {{end}}
-	<gitea-overflow-menu class="ui container secondary pointing tabular top attached borderless menu overflow-menu navbar">
+	<overflow-menu class="ui container secondary pointing tabular top attached borderless menu navbar">
 		{{if not (or .Repository.IsBeingCreated .Repository.IsBroken)}}
 			<div class="overflow-menu-items">
 				{{if .Permission.CanRead $.UnitTypeCode}}
@@ -225,6 +225,6 @@
 				</a>
 			</div>
 		{{end}}
-	</gitea-overflow-menu>
+	</overflow-menu>
 	<div class="ui tabs divider"></div>
 </div>
diff --git a/templates/user/auth/link_account.tmpl b/templates/user/auth/link_account.tmpl
index 879f678fa76d2..d184647d688a5 100644
--- a/templates/user/auth/link_account.tmpl
+++ b/templates/user/auth/link_account.tmpl
@@ -1,6 +1,6 @@
 {{template "base/head" .}}
 <div role="main" aria-label="{{.Title}}" class="page-content user link-account">
-	<div class="ui secondary pointing tabular top attached borderless menu overflow-menu navbar">
+	<overflow-menu class="ui secondary pointing tabular top attached borderless menu navbar">
 		<div class="overflow-menu-items">
 			<!-- TODO handle .ShowRegistrationButton once other login bugs are fixed -->
 			{{if not .AllowOnlyInternalRegistration}}
@@ -14,7 +14,7 @@
 				{{ctx.Locale.Tr "auth.oauth_signin_tab"}}
 			</a>
 		</div>
-	</div>
+	</overflow-menu>
 	<div class="ui middle very relaxed page grid">
 		<div class="column">
 			<div class="ui tab {{if not .user_exists}}active{{end}}"
diff --git a/templates/user/auth/signin_navbar.tmpl b/templates/user/auth/signin_navbar.tmpl
index 25d5d1eb96cef..75fa42c7891d9 100644
--- a/templates/user/auth/signin_navbar.tmpl
+++ b/templates/user/auth/signin_navbar.tmpl
@@ -1,5 +1,5 @@
 {{if or .EnableOpenIDSignIn .EnableSSPI}}
-<div class="ui secondary pointing tabular top attached borderless menu overflow-menu navbar">
+<overflow-menu class="ui secondary pointing tabular top attached borderless menu navbar">
 	<div class="overflow-menu-items">
 		<a class="{{if .PageIsLogin}}active {{end}}item" rel="nofollow" href="{{AppSubUrl}}/user/login">
 			{{ctx.Locale.Tr "auth.login_userpass"}}
@@ -20,5 +20,5 @@
 		</a>
 		{{end}}
 	</div>
-</div>
+</overflow-menu>
 {{end}}
diff --git a/templates/user/auth/signup_openid_navbar.tmpl b/templates/user/auth/signup_openid_navbar.tmpl
index 5c6b5f5757e56..9ec4995e2ba6c 100644
--- a/templates/user/auth/signup_openid_navbar.tmpl
+++ b/templates/user/auth/signup_openid_navbar.tmpl
@@ -1,4 +1,4 @@
-<div class="ui secondary pointing tabular top attached borderless menu overflow-menu navbar">
+<overflow-menu class="ui secondary pointing tabular top attached borderless menu navbar">
 	<div class="overflow-menu-items">
 		<a class="{{if .PageIsOpenIDConnect}}active {{end}}item" href="{{AppSubUrl}}/user/openid/connect">
 			{{ctx.Locale.Tr "auth.openid_connect_title"}}
@@ -9,4 +9,4 @@
 			</a>
 		{{end}}
 	</div>
-</div>
+</overflow-menu>
diff --git a/web_src/css/base.css b/web_src/css/base.css
index 41b2fe2ed07b6..754cc503b67d6 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -248,7 +248,7 @@ a.label,
 }
 
 .page-content .header-wrapper,
-.page-content .overflow-menu {
+.page-content overflow-menu {
   margin-top: -15px !important;
   padding-top: 15px !important;
 }
@@ -1339,18 +1339,18 @@ strong.attention-caution, span.attention-caution {
   }
 }
 
-.ui.menu.overflow-menu {
-  margin-bottom: 15px;
-  background: var(--color-header-wrapper);
+overflow-menu {
+  margin-bottom: 15px !important;
+  background: var(--color-header-wrapper) !important;
   border-bottom: 1px solid var(--color-secondary) !important;
 }
 
-.ui.menu.overflow-menu .overflow-menu-items {
+overflow-menu .overflow-menu-items {
   display: flex;
   width: 100%;
 }
 
-.ui.menu.overflow-menu .overflow-menu-items .item {
+overflow-menu .overflow-menu-items .item {
   margin-bottom: 0 !important; /* reset fomantic's margin, because the active menu has special bottom border */
 }
 
diff --git a/web_src/css/repo/header.css b/web_src/css/repo/header.css
index 071251d07a1da..1aeadf137ba35 100644
--- a/web_src/css/repo/header.css
+++ b/web_src/css/repo/header.css
@@ -74,13 +74,13 @@
   background-color: var(--color-header-wrapper);
 }
 
-.repository .header-wrapper .overflow-menu {
+.repository .header-wrapper overflow-menu {
   padding-top: 0 !important;
   margin-top: 0 !important;
   margin-bottom: 0 !important;
 }
 
-.repository .header-wrapper .overflow-menu .item {
+.repository .header-wrapper overflow-menu .item {
   margin-left: 0 !important;
   margin-right: 0 !important;
 }
diff --git a/web_src/js/webcomponents/README.md b/web_src/js/webcomponents/README.md
index 0fde50731011f..c694c73250524 100644
--- a/web_src/js/webcomponents/README.md
+++ b/web_src/js/webcomponents/README.md
@@ -9,4 +9,3 @@ https://developer.mozilla.org/en-US/docs/Web/Web_Components
 * These components are loaded in `<head>` (before DOM body),
   so they should have their own dependencies and should be very light,
   then they won't affect the page loading time too much.
-* If the component is not a public one, it's suggested to have its own `Gitea` or `gitea-` prefix to avoid conflicts.
diff --git a/web_src/js/webcomponents/index.js b/web_src/js/webcomponents/index.js
new file mode 100644
index 0000000000000..a2f335c698824
--- /dev/null
+++ b/web_src/js/webcomponents/index.js
@@ -0,0 +1,4 @@
+import './polyfills.js';
+import '@github/relative-time-element';
+import './GiteaOriginUrl.js';
+import './overflow-menu.js';
diff --git a/web_src/js/webcomponents/GiteaOverflowMenu.js b/web_src/js/webcomponents/overflow-menu.js
similarity index 96%
rename from web_src/js/webcomponents/GiteaOverflowMenu.js
rename to web_src/js/webcomponents/overflow-menu.js
index a31a36978f5a5..ea1c868161628 100644
--- a/web_src/js/webcomponents/GiteaOverflowMenu.js
+++ b/web_src/js/webcomponents/overflow-menu.js
@@ -51,7 +51,7 @@ const update = throttle(100, (overflowMenu) => {
   }
 });
 
-window.customElements.define('gitea-overflow-menu', class extends HTMLElement {
+window.customElements.define('overflow-menu', class extends HTMLElement {
   connectedCallback() {
     // raf is needed, otherwise the first update will no see all children
     requestAnimationFrame(() => {
diff --git a/web_src/js/webcomponents/polyfill.js b/web_src/js/webcomponents/polyfills.js
similarity index 87%
rename from web_src/js/webcomponents/polyfill.js
rename to web_src/js/webcomponents/polyfills.js
index 88c7276881313..18277153394b4 100644
--- a/web_src/js/webcomponents/polyfill.js
+++ b/web_src/js/webcomponents/polyfills.js
@@ -1,3 +1,5 @@
+import '@webcomponents/custom-elements'; // polyfill for some browsers like PaleMoon
+
 try {
   // some browsers like PaleMoon don't have full support for Intl.NumberFormat, so do the minimum polyfill to support "relative-time-element"
   // https://repo.palemoon.org/MoonchildProductions/UXP/issues/2289
diff --git a/web_src/js/webcomponents/webcomponents.js b/web_src/js/webcomponents/webcomponents.js
deleted file mode 100644
index f9be387c84213..0000000000000
--- a/web_src/js/webcomponents/webcomponents.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import '@webcomponents/custom-elements'; // polyfill for some browsers like PaleMoon
-import './polyfill.js';
-
-import '@github/relative-time-element';
-import './GiteaOriginUrl.js';
-import './GiteaOverflowMenu.js';
diff --git a/webpack.config.js b/webpack.config.js
index 3973d85344e6f..357a776195b32 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -70,7 +70,7 @@ export default {
       fileURLToPath(new URL('web_src/css/index.css', import.meta.url)),
     ],
     webcomponents: [
-      fileURLToPath(new URL('web_src/js/webcomponents/webcomponents.js', import.meta.url)),
+      fileURLToPath(new URL('web_src/js/webcomponents/index.js', import.meta.url)),
     ],
     swagger: [
       fileURLToPath(new URL('web_src/js/standalone/swagger.js', import.meta.url)),

From ae228bcab2fe002d8c931fe607aaec93b7e05304 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sat, 2 Mar 2024 21:19:20 +0100
Subject: [PATCH 16/74] rename 'gitea-origin-url' to 'origin-url', misc tweaks

---
 templates/devtest/gitea-ui.tmpl               | 33 +++++++++++++++++--
 templates/package/content/alpine.tmpl         |  4 +--
 templates/package/content/cargo.tmpl          |  4 +--
 templates/package/content/chef.tmpl           |  2 +-
 templates/package/content/composer.tmpl       |  2 +-
 templates/package/content/conan.tmpl          |  2 +-
 templates/package/content/conda.tmpl          |  6 ++--
 templates/package/content/cran.tmpl           |  2 +-
 templates/package/content/debian.tmpl         |  4 +--
 templates/package/content/generic.tmpl        |  2 +-
 templates/package/content/go.tmpl             |  2 +-
 templates/package/content/helm.tmpl           |  2 +-
 templates/package/content/maven.tmpl          |  8 ++---
 templates/package/content/npm.tmpl            |  2 +-
 templates/package/content/nuget.tmpl          |  2 +-
 templates/package/content/pub.tmpl            |  2 +-
 templates/package/content/pypi.tmpl           |  2 +-
 templates/package/content/rpm.tmpl            |  4 +--
 templates/package/content/rubygems.tmpl       |  4 +--
 templates/package/content/swift.tmpl          |  2 +-
 templates/package/content/vagrant.tmpl        |  2 +-
 .../view_content/pull_merge_instruction.tmpl  |  2 +-
 web_src/js/webcomponents/index.js             |  2 +-
 .../{GiteaOriginUrl.js => origin-url.js}      |  2 +-
 ...eaOriginUrl.test.js => origin-url.test.js} |  2 +-
 web_src/js/webcomponents/overflow-menu.js     |  2 +-
 26 files changed, 65 insertions(+), 38 deletions(-)
 rename web_src/js/webcomponents/{GiteaOriginUrl.js => origin-url.js} (91%)
 rename web_src/js/webcomponents/{GiteaOriginUrl.test.js => origin-url.test.js} (94%)

diff --git a/templates/devtest/gitea-ui.tmpl b/templates/devtest/gitea-ui.tmpl
index ccf188609c91d..89edb5f04bc11 100644
--- a/templates/devtest/gitea-ui.tmpl
+++ b/templates/devtest/gitea-ui.tmpl
@@ -105,9 +105,36 @@
 	</div>
 
 	<div>
-		<h1>GiteaOriginUrl</h1>
-		<div><gitea-origin-url data-url="test/url"></gitea-origin-url></div>
-		<div><gitea-origin-url data-url="/test/url"></gitea-origin-url></div>
+		<h1>&lt;origin-url&gt;</h1>
+		<div><origin-url data-url="test/url"></gitea-url></div>
+		<div><origin-url data-url="/test/url"></gitea-url></div>
+	</div>
+
+	<div>
+		<h1>&lt;overflow-menu&gt;</h1>
+		<overflow-menu class="ui secondary pointing tabular top attached borderless menu navbar">
+			<div class="overflow-menu-items">
+				<a class="active item">item</a>
+				<a class="item">item 1</a>
+				<a class="item">item 2</a>
+				<a class="item">item 3</a>
+				<a class="item">item 4</a>
+				<a class="item">item 5</a>
+				<a class="item">item 6</a>
+				<a class="item">item 7</a>
+				<a class="item">item 8</a>
+				<a class="item">item 9</a>
+				<a class="item">item 10</a>
+				<a class="item">item 11</a>
+				<a class="item">item 12</a>
+				<a class="item">item 13</a>
+				<a class="item">item 14</a>
+				<a class="item">item 15</a>
+				<a class="item">item 16</a>
+				<a class="item">item 17</a>
+				<a class="item">item 18</a>
+			</div>
+		</overflow-menu>
 	</div>
 
 	<div>
diff --git a/templates/package/content/alpine.tmpl b/templates/package/content/alpine.tmpl
index 7bc22ae382a75..5c144b977903c 100644
--- a/templates/package/content/alpine.tmpl
+++ b/templates/package/content/alpine.tmpl
@@ -4,12 +4,12 @@
 		<div class="ui form">
 			<div class="field">
 				<label>{{svg "octicon-code"}} {{ctx.Locale.Tr "packages.alpine.registry"}}</label>
-				<div class="markup"><pre class="code-block"><code><gitea-origin-url data-url="{{AppSubUrl}}/api/packages/{{$.PackageDescriptor.Owner.Name}}/alpine"></gitea-origin-url>/$branch/$repository</code></pre></div>
+				<div class="markup"><pre class="code-block"><code><origin-url data-url="{{AppSubUrl}}/api/packages/{{$.PackageDescriptor.Owner.Name}}/alpine"></origin-url>/$branch/$repository</code></pre></div>
 				<p>{{ctx.Locale.Tr "packages.alpine.registry.info"}}</p>
 			</div>
 			<div class="field">
 				<label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.alpine.registry.key"}}</label>
-				<div class="markup"><pre class="code-block"><code>curl -JO <gitea-origin-url data-url="{{AppSubUrl}}/api/packages/{{$.PackageDescriptor.Owner.Name}}/alpine/key"></gitea-origin-url></code></pre></div>
+				<div class="markup"><pre class="code-block"><code>curl -JO <origin-url data-url="{{AppSubUrl}}/api/packages/{{$.PackageDescriptor.Owner.Name}}/alpine/key"></origin-url></code></pre></div>
 			</div>
 			<div class="field">
 				<label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.alpine.install"}}</label>
diff --git a/templates/package/content/cargo.tmpl b/templates/package/content/cargo.tmpl
index eff6d6c3b3162..7fd88a284a296 100644
--- a/templates/package/content/cargo.tmpl
+++ b/templates/package/content/cargo.tmpl
@@ -8,8 +8,8 @@
 default = "gitea"
 
 [registries.gitea]
-index = "sparse+<gitea-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/cargo/"></gitea-origin-url>" # Sparse index
-# index = "<gitea-origin-url data-url="{{AppSubUrl}}/{{.PackageDescriptor.Owner.Name}}/_cargo-index.git"></gitea-origin-url>" # Git
+index = "sparse+<origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/cargo/"></origin-url>" # Sparse index
+# index = "<origin-url data-url="{{AppSubUrl}}/{{.PackageDescriptor.Owner.Name}}/_cargo-index.git"></origin-url>" # Git
 
 [net]
 git-fetch-with-cli = true</code></pre></div>
diff --git a/templates/package/content/chef.tmpl b/templates/package/content/chef.tmpl
index c8172b8126354..03ce9f852bde8 100644
--- a/templates/package/content/chef.tmpl
+++ b/templates/package/content/chef.tmpl
@@ -4,7 +4,7 @@
 		<div class="ui form">
 			<div class="field">
 				<label>{{svg "octicon-code"}} {{ctx.Locale.Tr "packages.chef.registry"}}</label>
-				<div class="markup"><pre class="code-block"><code>knife[:supermarket_site] = '<gitea-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/chef"></gitea-origin-url>'</code></pre></div>
+				<div class="markup"><pre class="code-block"><code>knife[:supermarket_site] = '<origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/chef"></origin-url>'</code></pre></div>
 			</div>
 			<div class="field">
 				<label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.chef.install"}}</label>
diff --git a/templates/package/content/composer.tmpl b/templates/package/content/composer.tmpl
index 70bfbc4488d41..c2dc6345c3764 100644
--- a/templates/package/content/composer.tmpl
+++ b/templates/package/content/composer.tmpl
@@ -7,7 +7,7 @@
 				<div class="markup"><pre class="code-block"><code>{
 	"repositories": [{
 			"type": "composer",
-			"url": "<gitea-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/composer"></gitea-origin-url>"
+			"url": "<origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/composer"></origin-url>"
 		}
 	]
 }</code></pre></div>
diff --git a/templates/package/content/conan.tmpl b/templates/package/content/conan.tmpl
index c5019c6fd6e62..b68a45fde30d1 100644
--- a/templates/package/content/conan.tmpl
+++ b/templates/package/content/conan.tmpl
@@ -4,7 +4,7 @@
 		<div class="ui form">
 			<div class="field">
 				<label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.conan.registry"}}</label>
-				<div class="markup"><pre class="code-block"><code>conan remote add gitea <gitea-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/conan"></gitea-origin-url></code></pre></div>
+				<div class="markup"><pre class="code-block"><code>conan remote add gitea <origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/conan"></origin-url></code></pre></div>
 			</div>
 			<div class="field">
 				<label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.conan.install"}}</label>
diff --git a/templates/package/content/conda.tmpl b/templates/package/content/conda.tmpl
index 0172966145c90..031b51aa10805 100644
--- a/templates/package/content/conda.tmpl
+++ b/templates/package/content/conda.tmpl
@@ -4,11 +4,11 @@
 		<div class="ui form">
 			<div class="field">
 				<label>{{svg "octicon-code"}} {{ctx.Locale.Tr "packages.conda.registry"}}</label>
-				<div class="markup"><pre class="code-block"><code>channel_alias: <gitea-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/conda"></gitea-origin-url>
+				<div class="markup"><pre class="code-block"><code>channel_alias: <origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/conda"></origin-url>
 channels:
-&#32;&#32;- <gitea-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/conda"></gitea-origin-url>
+&#32;&#32;- <origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/conda"></origin-url>
 default_channels:
-&#32;&#32;- <gitea-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/conda"></gitea-origin-url></code></pre></div>
+&#32;&#32;- <origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/conda"></origin-url></code></pre></div>
 			</div>
 			<div class="field">
 				<label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.conda.install"}}</label>
diff --git a/templates/package/content/cran.tmpl b/templates/package/content/cran.tmpl
index 3b5c741701f19..ae58e6f334c75 100644
--- a/templates/package/content/cran.tmpl
+++ b/templates/package/content/cran.tmpl
@@ -4,7 +4,7 @@
 		<div class="ui form">
 			<div class="field">
 				<label>{{svg "octicon-code"}} {{ctx.Locale.Tr "packages.cran.registry"}}</label>
-				<div class="markup"><pre class="code-block"><code>options("repos" = c(getOption("repos"), c(gitea="<gitea-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/cran"></gitea-origin-url>")))</code></pre></div>
+				<div class="markup"><pre class="code-block"><code>options("repos" = c(getOption("repos"), c(gitea="<origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/cran"></origin-url>")))</code></pre></div>
 			</div>
 			<div class="field">
 				<label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.cran.install"}}</label>
diff --git a/templates/package/content/debian.tmpl b/templates/package/content/debian.tmpl
index 08b50b46ff15d..73b82578357fd 100644
--- a/templates/package/content/debian.tmpl
+++ b/templates/package/content/debian.tmpl
@@ -4,8 +4,8 @@
 		<div class="ui form">
 			<div class="field">
 				<label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.debian.registry"}}</label>
-				<div class="markup"><pre class="code-block"><code>sudo curl <gitea-origin-url data-url="{{AppSubUrl}}/api/packages/{{$.PackageDescriptor.Owner.Name}}/debian/repository.key"></gitea-origin-url> -o /etc/apt/keyrings/gitea-{{$.PackageDescriptor.Owner.Name}}.asc
-echo "deb [signed-by=/etc/apt/keyrings/gitea-{{$.PackageDescriptor.Owner.Name}}.asc] <gitea-origin-url data-url="{{AppSubUrl}}/api/packages/{{$.PackageDescriptor.Owner.Name}}/debian"></gitea-origin-url> $distribution $component" | sudo tee -a /etc/apt/sources.list.d/gitea.list
+				<div class="markup"><pre class="code-block"><code>sudo curl <origin-url data-url="{{AppSubUrl}}/api/packages/{{$.PackageDescriptor.Owner.Name}}/debian/repository.key"></origin-url> -o /etc/apt/keyrings/gitea-{{$.PackageDescriptor.Owner.Name}}.asc
+echo "deb [signed-by=/etc/apt/keyrings/gitea-{{$.PackageDescriptor.Owner.Name}}.asc] <origin-url data-url="{{AppSubUrl}}/api/packages/{{$.PackageDescriptor.Owner.Name}}/debian"></origin-url> $distribution $component" | sudo tee -a /etc/apt/sources.list.d/gitea.list
 sudo apt update</code></pre></div>
 				<p>{{ctx.Locale.Tr "packages.debian.registry.info"}}</p>
 			</div>
diff --git a/templates/package/content/generic.tmpl b/templates/package/content/generic.tmpl
index b5a6059f751eb..2fd952105f244 100644
--- a/templates/package/content/generic.tmpl
+++ b/templates/package/content/generic.tmpl
@@ -6,7 +6,7 @@
 				<label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.generic.download"}}</label>
 				<div class="markup"><pre class="code-block"><code>
 {{- range .PackageDescriptor.Files -}}
-curl -OJ <gitea-origin-url data-url="{{AppSubUrl}}/api/packages/{{$.PackageDescriptor.Owner.Name}}/generic/{{$.PackageDescriptor.Package.Name}}/{{$.PackageDescriptor.Version.Version}}/{{.File.Name}}"></gitea-origin-url>
+curl -OJ <origin-url data-url="{{AppSubUrl}}/api/packages/{{$.PackageDescriptor.Owner.Name}}/generic/{{$.PackageDescriptor.Package.Name}}/{{$.PackageDescriptor.Version.Version}}/{{.File.Name}}"></origin-url>
 {{end -}}
 				</code></pre></div>
 			</div>
diff --git a/templates/package/content/go.tmpl b/templates/package/content/go.tmpl
index c74c19095aa0c..80d1ab231a433 100644
--- a/templates/package/content/go.tmpl
+++ b/templates/package/content/go.tmpl
@@ -4,7 +4,7 @@
 		<div class="ui form">
 			<div class="field">
 				<label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.go.install"}}</label>
-				<div class="markup"><pre class="code-block"><code>GOPROXY=<gitea-origin-url data-url="{{AppSubUrl}}/api/packages/{{$.PackageDescriptor.Owner.Name}}/go"></gitea-origin-url> go install {{$.PackageDescriptor.Package.Name}}@{{$.PackageDescriptor.Version.Version}}</code></pre></div>
+				<div class="markup"><pre class="code-block"><code>GOPROXY=<origin-url data-url="{{AppSubUrl}}/api/packages/{{$.PackageDescriptor.Owner.Name}}/go"></origin-url> go install {{$.PackageDescriptor.Package.Name}}@{{$.PackageDescriptor.Version.Version}}</code></pre></div>
 			</div>
 			<div class="field">
 				<label>{{ctx.Locale.Tr "packages.registry.documentation" "Go" "https://docs.gitea.com/usage/packages/go"}}</label>
diff --git a/templates/package/content/helm.tmpl b/templates/package/content/helm.tmpl
index 3fc217fbb0806..da846e934db34 100644
--- a/templates/package/content/helm.tmpl
+++ b/templates/package/content/helm.tmpl
@@ -4,7 +4,7 @@
 		<div class="ui form">
 			<div class="field">
 				<label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.helm.registry"}}</label>
-				<div class="markup"><pre class="code-block"><code>helm repo add {{AppDomain}} <gitea-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/helm"></gitea-origin-url>
+				<div class="markup"><pre class="code-block"><code>helm repo add {{AppDomain}} <origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/helm"></origin-url>
 helm repo update</code></pre></div>
 			</div>
 			<div class="field">
diff --git a/templates/package/content/maven.tmpl b/templates/package/content/maven.tmpl
index 9c694094b96b3..3a7de335de88f 100644
--- a/templates/package/content/maven.tmpl
+++ b/templates/package/content/maven.tmpl
@@ -7,19 +7,19 @@
 				<div class="markup"><pre class="code-block"><code>&lt;repositories&gt;
 	&lt;repository&gt;
 		&lt;id&gt;gitea&lt;/id&gt;
-			&lt;url&gt;<gitea-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/maven"></gitea-origin-url>&lt;/url&gt;
+			&lt;url&gt;<origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/maven"></origin-url>&lt;/url&gt;
 	&lt;/repository&gt;
 &lt;/repositories&gt;
 
 &lt;distributionManagement&gt;
 	&lt;repository&gt;
 		&lt;id&gt;gitea&lt;/id&gt;
-		&lt;url&gt;<gitea-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/maven"></gitea-origin-url>&lt;/url&gt;
+		&lt;url&gt;<origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/maven"></origin-url>&lt;/url&gt;
 	&lt;/repository&gt;
 
 	&lt;snapshotRepository&gt;
 		&lt;id&gt;gitea&lt;/id&gt;
-		&lt;url&gt;<gitea-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/maven"></gitea-origin-url>&lt;/url&gt;
+		&lt;url&gt;<origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/maven"></origin-url>&lt;/url&gt;
 	&lt;/snapshotRepository&gt;
 &lt;/distributionManagement&gt;</code></pre></div>
 			</div>
@@ -37,7 +37,7 @@
 			</div>
 			<div class="field">
 				<label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.maven.download"}}</label>
-				<div class="markup"><pre class="code-block"><code>mvn dependency:get -DremoteRepositories=<gitea-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/maven"></gitea-origin-url> -Dartifact={{.PackageDescriptor.Metadata.GroupID}}:{{.PackageDescriptor.Metadata.ArtifactID}}:{{.PackageDescriptor.Version.Version}}</code></pre></div>
+				<div class="markup"><pre class="code-block"><code>mvn dependency:get -DremoteRepositories=<origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/maven"></origin-url> -Dartifact={{.PackageDescriptor.Metadata.GroupID}}:{{.PackageDescriptor.Metadata.ArtifactID}}:{{.PackageDescriptor.Version.Version}}</code></pre></div>
 			</div>
 			<div class="field">
 				<label>{{ctx.Locale.Tr "packages.registry.documentation" "Maven" "https://docs.gitea.com/usage/packages/maven/"}}</label>
diff --git a/templates/package/content/npm.tmpl b/templates/package/content/npm.tmpl
index bf15ec34e9432..a78a07d874673 100644
--- a/templates/package/content/npm.tmpl
+++ b/templates/package/content/npm.tmpl
@@ -4,7 +4,7 @@
 		<div class="ui form">
 			<div class="field">
 				<label>{{svg "octicon-code"}} {{ctx.Locale.Tr "packages.npm.registry"}}</label>
-				<div class="markup"><pre class="code-block"><code>{{if .PackageDescriptor.Metadata.Scope}}{{.PackageDescriptor.Metadata.Scope}}:{{end}}registry=<gitea-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/npm/"></gitea-origin-url></code></pre></div>
+				<div class="markup"><pre class="code-block"><code>{{if .PackageDescriptor.Metadata.Scope}}{{.PackageDescriptor.Metadata.Scope}}:{{end}}registry=<origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/npm/"></origin-url></code></pre></div>
 			</div>
 			<div class="field">
 				<label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.npm.install"}}</label>
diff --git a/templates/package/content/nuget.tmpl b/templates/package/content/nuget.tmpl
index 2008cf4cc87ab..0911260fbaa21 100644
--- a/templates/package/content/nuget.tmpl
+++ b/templates/package/content/nuget.tmpl
@@ -4,7 +4,7 @@
 		<div class="ui form">
 			<div class="field">
 				<label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.nuget.registry"}}</label>
-				<div class="markup"><pre class="code-block"><code>dotnet nuget add source --name {{.PackageDescriptor.Owner.Name}} --username your_username --password your_token <gitea-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/nuget/index.json"></gitea-origin-url></code></pre></div>
+				<div class="markup"><pre class="code-block"><code>dotnet nuget add source --name {{.PackageDescriptor.Owner.Name}} --username your_username --password your_token <origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/nuget/index.json"></origin-url></code></pre></div>
 			</div>
 			<div class="field">
 				<label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.nuget.install"}}</label>
diff --git a/templates/package/content/pub.tmpl b/templates/package/content/pub.tmpl
index e0608e533f93b..f2c7ac938faad 100644
--- a/templates/package/content/pub.tmpl
+++ b/templates/package/content/pub.tmpl
@@ -4,7 +4,7 @@
 		<div class="ui form">
 			<div class="field">
 				<label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.pub.install"}}</label>
-				<div class="markup"><pre class="code-block"><code>dart pub add {{.PackageDescriptor.Package.Name}}:{{.PackageDescriptor.Version.Version}} --hosted-url=<gitea-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/pub/"></gitea-origin-url></code></pre></div>
+				<div class="markup"><pre class="code-block"><code>dart pub add {{.PackageDescriptor.Package.Name}}:{{.PackageDescriptor.Version.Version}} --hosted-url=<origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/pub/"></origin-url></code></pre></div>
 			</div>
 			<div class="field">
 				<label>{{ctx.Locale.Tr "packages.registry.documentation" "Pub" "https://docs.gitea.com/usage/packages/pub/"}}</label>
diff --git a/templates/package/content/pypi.tmpl b/templates/package/content/pypi.tmpl
index d0ce2cd65dc42..817fced97b960 100644
--- a/templates/package/content/pypi.tmpl
+++ b/templates/package/content/pypi.tmpl
@@ -4,7 +4,7 @@
 		<div class="ui form">
 			<div class="field">
 				<label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.pypi.install"}}</label>
-				<div class="markup"><pre class="code-block"><code>pip install --index-url <gitea-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/pypi/simple/"></gitea-origin-url> {{.PackageDescriptor.Package.Name}}</code></pre></div>
+				<div class="markup"><pre class="code-block"><code>pip install --index-url <origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/pypi/simple/"></origin-url> {{.PackageDescriptor.Package.Name}}</code></pre></div>
 			</div>
 			<div class="field">
 				<label>{{ctx.Locale.Tr "packages.registry.documentation" "PyPI" "https://docs.gitea.com/usage/packages/pypi/"}}</label>
diff --git a/templates/package/content/rpm.tmpl b/templates/package/content/rpm.tmpl
index 28d875fca3d94..3faa8a0dc75a5 100644
--- a/templates/package/content/rpm.tmpl
+++ b/templates/package/content/rpm.tmpl
@@ -11,13 +11,13 @@
 # {{ctx.Locale.Tr "packages.rpm.distros.redhat"}}
 {{- range $group := .Groups}}
 	{{- if $group}}{{$group = print "/" $group}}{{end}}
-dnf config-manager --add-repo <gitea-origin-url data-url="{{AppSubUrl}}/api/packages/{{$.PackageDescriptor.Owner.Name}}/rpm{{$group}}.repo"></gitea-origin-url>
+dnf config-manager --add-repo <origin-url data-url="{{AppSubUrl}}/api/packages/{{$.PackageDescriptor.Owner.Name}}/rpm{{$group}}.repo"></origin-url>
 {{- end}}
 
 # {{ctx.Locale.Tr "packages.rpm.distros.suse"}}
 {{- range $group := .Groups}}
 	{{- if $group}}{{$group = print "/" $group}}{{end}}
-zypper addrepo <gitea-origin-url data-url="{{AppSubUrl}}/api/packages/{{$.PackageDescriptor.Owner.Name}}/rpm{{$group}}.repo"></gitea-origin-url>
+zypper addrepo <origin-url data-url="{{AppSubUrl}}/api/packages/{{$.PackageDescriptor.Owner.Name}}/rpm{{$group}}.repo"></origin-url>
 {{- end}}</code></pre></div>
 			</div>
 			<div class="field">
diff --git a/templates/package/content/rubygems.tmpl b/templates/package/content/rubygems.tmpl
index e19aab70807ec..610dfc78563dd 100644
--- a/templates/package/content/rubygems.tmpl
+++ b/templates/package/content/rubygems.tmpl
@@ -4,11 +4,11 @@
 		<div class="ui form">
 			<div class="field">
 				<label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.rubygems.install"}}:</label>
-				<div class="markup"><pre class="code-block"><code>gem install {{.PackageDescriptor.Package.Name}} --version &quot;{{.PackageDescriptor.Version.Version}}&quot; --source &quot;<gitea-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/rubygems"></gitea-origin-url>&quot;</code></pre></div>
+				<div class="markup"><pre class="code-block"><code>gem install {{.PackageDescriptor.Package.Name}} --version &quot;{{.PackageDescriptor.Version.Version}}&quot; --source &quot;<origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/rubygems"></origin-url>&quot;</code></pre></div>
 			</div>
 			<div class="field">
 				<label>{{svg "octicon-code"}} {{ctx.Locale.Tr "packages.rubygems.install2"}}:</label>
-				<div class="markup"><pre class="code-block"><code>source "<gitea-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/rubygems"></gitea-origin-url>" do
+				<div class="markup"><pre class="code-block"><code>source "<origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/rubygems"></origin-url>" do
 	gem "{{.PackageDescriptor.Package.Name}}", "{{.PackageDescriptor.Version.Version}}"
 end</code></pre></div>
 			</div>
diff --git a/templates/package/content/swift.tmpl b/templates/package/content/swift.tmpl
index 819cc7f3d014f..aacbc83980f18 100644
--- a/templates/package/content/swift.tmpl
+++ b/templates/package/content/swift.tmpl
@@ -4,7 +4,7 @@
 		<div class="ui form">
 			<div class="field">
 				<label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.swift.registry"}}</label>
-				<div class="markup"><pre class="code-block"><code>swift package-registry set <gitea-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/swift"></gitea-origin-url></code></pre></div>
+				<div class="markup"><pre class="code-block"><code>swift package-registry set <origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/swift"></origin-url></code></pre></div>
 			</div>
 			<div class="field">
 				<label>{{svg "octicon-code"}} {{ctx.Locale.Tr "packages.swift.install"}}</label>
diff --git a/templates/package/content/vagrant.tmpl b/templates/package/content/vagrant.tmpl
index cd294b4ea5712..7666284b87126 100644
--- a/templates/package/content/vagrant.tmpl
+++ b/templates/package/content/vagrant.tmpl
@@ -4,7 +4,7 @@
 		<div class="ui form">
 			<div class="field">
 				<label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.vagrant.install"}}</label>
-				<div class="markup"><pre class="code-block"><code>vagrant box add --box-version {{.PackageDescriptor.Version.Version}} "<gitea-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/vagrant/{{.PackageDescriptor.Package.Name}}"></gitea-origin-url>"</code></pre></div>
+				<div class="markup"><pre class="code-block"><code>vagrant box add --box-version {{.PackageDescriptor.Version.Version}} "<origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/vagrant/{{.PackageDescriptor.Package.Name}}"></origin-url>"</code></pre></div>
 			</div>
 			<div class="field">
 				<label>{{ctx.Locale.Tr "packages.registry.documentation" "Vagrant" "https://docs.gitea.com/usage/packages/vagrant/"}}</label>
diff --git a/templates/repo/issue/view_content/pull_merge_instruction.tmpl b/templates/repo/issue/view_content/pull_merge_instruction.tmpl
index a2269feeafef9..12b0c4b4e0fd3 100644
--- a/templates/repo/issue/view_content/pull_merge_instruction.tmpl
+++ b/templates/repo/issue/view_content/pull_merge_instruction.tmpl
@@ -8,7 +8,7 @@
 	{{end}}
 	<div class="ui secondary segment">
 		{{if eq .PullRequest.Flow 0}}
-		<div>git fetch -u {{if ne .PullRequest.HeadRepo.ID .PullRequest.BaseRepo.ID}}<gitea-origin-url data-url="{{.PullRequest.HeadRepo.Link}}"></gitea-origin-url>{{else}}origin{{end}} {{.PullRequest.HeadBranch}}:{{$localBranch}}</div>
+		<div>git fetch -u {{if ne .PullRequest.HeadRepo.ID .PullRequest.BaseRepo.ID}}<origin-url data-url="{{.PullRequest.HeadRepo.Link}}"></origin-url>{{else}}origin{{end}} {{.PullRequest.HeadBranch}}:{{$localBranch}}</div>
 		<div>git checkout {{$localBranch}}</div>
 		{{else}}
 		<div>git fetch -u origin {{.GetGitRefName}}:{{$localBranch}}</div>
diff --git a/web_src/js/webcomponents/index.js b/web_src/js/webcomponents/index.js
index a2f335c698824..0d84ebfc86061 100644
--- a/web_src/js/webcomponents/index.js
+++ b/web_src/js/webcomponents/index.js
@@ -1,4 +1,4 @@
 import './polyfills.js';
 import '@github/relative-time-element';
-import './GiteaOriginUrl.js';
+import './origin-url.js';
 import './overflow-menu.js';
diff --git a/web_src/js/webcomponents/GiteaOriginUrl.js b/web_src/js/webcomponents/origin-url.js
similarity index 91%
rename from web_src/js/webcomponents/GiteaOriginUrl.js
rename to web_src/js/webcomponents/origin-url.js
index 6e6f84d739c2d..09aa77f2c0f14 100644
--- a/web_src/js/webcomponents/GiteaOriginUrl.js
+++ b/web_src/js/webcomponents/origin-url.js
@@ -15,7 +15,7 @@ export function toOriginUrl(urlStr) {
   return urlStr;
 }
 
-window.customElements.define('gitea-origin-url', class extends HTMLElement {
+window.customElements.define('origin-url', class extends HTMLElement {
   connectedCallback() {
     this.textContent = toOriginUrl(this.getAttribute('data-url'));
   }
diff --git a/web_src/js/webcomponents/GiteaOriginUrl.test.js b/web_src/js/webcomponents/origin-url.test.js
similarity index 94%
rename from web_src/js/webcomponents/GiteaOriginUrl.test.js
rename to web_src/js/webcomponents/origin-url.test.js
index f0629842b85a4..3b2ab89f2a545 100644
--- a/web_src/js/webcomponents/GiteaOriginUrl.test.js
+++ b/web_src/js/webcomponents/origin-url.test.js
@@ -1,4 +1,4 @@
-import {toOriginUrl} from './GiteaOriginUrl.js';
+import {toOriginUrl} from './origin-url.js';
 
 test('toOriginUrl', () => {
   const oldLocation = window.location;
diff --git a/web_src/js/webcomponents/overflow-menu.js b/web_src/js/webcomponents/overflow-menu.js
index ea1c868161628..f3625ce76fc53 100644
--- a/web_src/js/webcomponents/overflow-menu.js
+++ b/web_src/js/webcomponents/overflow-menu.js
@@ -22,7 +22,7 @@ const update = throttle(100, (overflowMenu) => {
   const menuRight = overflowMenu.parentNode.getBoundingClientRect().right;
   for (const item of menuParent.querySelectorAll('.item')) {
     const itemRight = item.getBoundingClientRect().right;
-    if (menuRight - itemRight < 50) {
+    if (menuRight - itemRight < 22) { // slightly less than width of .overflow-menu-button
       itemsToMove.push(item);
     }
   }

From 886f105da849cf7fb75f3715bc6a358ccc409543 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sat, 2 Mar 2024 21:34:00 +0100
Subject: [PATCH 17/74] fix justify on centered menus

---
 templates/explore/navbar.tmpl                 | 2 +-
 templates/repo/diff/image_diff.tmpl           | 2 +-
 templates/user/auth/link_account.tmpl         | 2 +-
 templates/user/auth/signin_navbar.tmpl        | 2 +-
 templates/user/auth/signup_openid_navbar.tmpl | 2 +-
 web_src/js/webcomponents/overflow-menu.js     | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/templates/explore/navbar.tmpl b/templates/explore/navbar.tmpl
index 631387a527efc..8841613b9f128 100644
--- a/templates/explore/navbar.tmpl
+++ b/templates/explore/navbar.tmpl
@@ -1,5 +1,5 @@
 <overflow-menu class="ui secondary pointing tabular top attached borderless menu navbar">
-	<div class="overflow-menu-items">
+	<div class="overflow-menu-items tw-justify-center">
 		<a class="{{if .PageIsExploreRepositories}}active {{end}}item" href="{{AppSubUrl}}/explore/repos">
 			{{svg "octicon-repo"}} {{ctx.Locale.Tr "explore.repos"}}
 		</a>
diff --git a/templates/repo/diff/image_diff.tmpl b/templates/repo/diff/image_diff.tmpl
index 82d12186f83b9..9ad7916398a41 100644
--- a/templates/repo/diff/image_diff.tmpl
+++ b/templates/repo/diff/image_diff.tmpl
@@ -8,7 +8,7 @@
 			data-mime-after="{{.sniffedTypeHead.GetMimeType}}"
 		>
 			<overflow-menu class="ui secondary pointing tabular top attached borderless menu">
-				<div class="overflow-menu-items">
+				<div class="overflow-menu-items tw-justify-center">
 					<a class="item active" data-tab="diff-side-by-side-{{.file.Index}}">{{ctx.Locale.Tr "repo.diff.image.side_by_side"}}</a>
 					{{if and .blobBase .blobHead}}
 					<a class="item" data-tab="diff-swipe-{{.file.Index}}">{{ctx.Locale.Tr "repo.diff.image.swipe"}}</a>
diff --git a/templates/user/auth/link_account.tmpl b/templates/user/auth/link_account.tmpl
index d184647d688a5..88d842877b97e 100644
--- a/templates/user/auth/link_account.tmpl
+++ b/templates/user/auth/link_account.tmpl
@@ -1,7 +1,7 @@
 {{template "base/head" .}}
 <div role="main" aria-label="{{.Title}}" class="page-content user link-account">
 	<overflow-menu class="ui secondary pointing tabular top attached borderless menu navbar">
-		<div class="overflow-menu-items">
+		<div class="overflow-menu-items tw-justify-center">
 			<!-- TODO handle .ShowRegistrationButton once other login bugs are fixed -->
 			{{if not .AllowOnlyInternalRegistration}}
 				<a class="item {{if not .user_exists}}active{{end}}"
diff --git a/templates/user/auth/signin_navbar.tmpl b/templates/user/auth/signin_navbar.tmpl
index 75fa42c7891d9..cebb8466864ee 100644
--- a/templates/user/auth/signin_navbar.tmpl
+++ b/templates/user/auth/signin_navbar.tmpl
@@ -1,6 +1,6 @@
 {{if or .EnableOpenIDSignIn .EnableSSPI}}
 <overflow-menu class="ui secondary pointing tabular top attached borderless menu navbar">
-	<div class="overflow-menu-items">
+	<div class="overflow-menu-items tw-justify-center">
 		<a class="{{if .PageIsLogin}}active {{end}}item" rel="nofollow" href="{{AppSubUrl}}/user/login">
 			{{ctx.Locale.Tr "auth.login_userpass"}}
 		</a>
diff --git a/templates/user/auth/signup_openid_navbar.tmpl b/templates/user/auth/signup_openid_navbar.tmpl
index 9ec4995e2ba6c..cbbc77c44fc57 100644
--- a/templates/user/auth/signup_openid_navbar.tmpl
+++ b/templates/user/auth/signup_openid_navbar.tmpl
@@ -1,5 +1,5 @@
 <overflow-menu class="ui secondary pointing tabular top attached borderless menu navbar">
-	<div class="overflow-menu-items">
+	<div class="overflow-menu-items tw-justify-center">
 		<a class="{{if .PageIsOpenIDConnect}}active {{end}}item" href="{{AppSubUrl}}/user/openid/connect">
 			{{ctx.Locale.Tr "auth.openid_connect_title"}}
 		</a>
diff --git a/web_src/js/webcomponents/overflow-menu.js b/web_src/js/webcomponents/overflow-menu.js
index f3625ce76fc53..83f0cede5a5e8 100644
--- a/web_src/js/webcomponents/overflow-menu.js
+++ b/web_src/js/webcomponents/overflow-menu.js
@@ -22,7 +22,7 @@ const update = throttle(100, (overflowMenu) => {
   const menuRight = overflowMenu.parentNode.getBoundingClientRect().right;
   for (const item of menuParent.querySelectorAll('.item')) {
     const itemRight = item.getBoundingClientRect().right;
-    if (menuRight - itemRight < 22) { // slightly less than width of .overflow-menu-button
+    if (menuRight - itemRight < 24) { // slightly less than width of .overflow-menu-button
       itemsToMove.push(item);
     }
   }

From 16e7ffb06bdb77381c6a3c265868b37b6ecc5fea Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sat, 2 Mar 2024 21:59:20 +0100
Subject: [PATCH 18/74] update tippy after creation

---
 web_src/css/modules/tippy.css             |  4 ++++
 web_src/js/webcomponents/overflow-menu.js | 10 ++++++++--
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/web_src/css/modules/tippy.css b/web_src/css/modules/tippy.css
index 172c6c0d1f271..1a9f2f4bdf03c 100644
--- a/web_src/css/modules/tippy.css
+++ b/web_src/css/modules/tippy.css
@@ -5,6 +5,10 @@
   display: none !important;
 }
 
+.tippy-content .tippy-target {
+  display: unset !important;
+}
+
 [data-tippy-root] {
   max-width: calc(100vw - 32px);
 }
diff --git a/web_src/js/webcomponents/overflow-menu.js b/web_src/js/webcomponents/overflow-menu.js
index 83f0cede5a5e8..dfbdb475ab44a 100644
--- a/web_src/js/webcomponents/overflow-menu.js
+++ b/web_src/js/webcomponents/overflow-menu.js
@@ -32,7 +32,13 @@ const update = throttle(100, (overflowMenu) => {
       dropdownParent.append(item);
     }
 
-    overflowMenu.querySelector('.overflow-menu-button')?.remove();
+    const content = dropdownParent.cloneNode(true);
+    const existingBtn = overflowMenu.querySelector('.overflow-menu-button');
+    if (existingBtn?._tippy) {
+      existingBtn._tippy.setContent(content);
+      return;
+    }
+
     const btn = document.createElement('button');
     btn.classList.add('overflow-menu-button', 'btn', 'tw-px-2');
     btn.innerHTML = svg('octicon-kebab-horizontal');
@@ -44,7 +50,7 @@ const update = throttle(100, (overflowMenu) => {
       interactive: true,
       placement: 'bottom-end',
       role: 'menu',
-      content: dropdownParent.cloneNode(true),
+      content,
     });
   } else {
     overflowMenu.querySelector('.overflow-menu-button')?.remove();

From 26a7d01c026f63398c9ede7bceecd12ab6e975f0 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sat, 2 Mar 2024 22:03:08 +0100
Subject: [PATCH 19/74] remove now-unnecessary class removal

---
 web_src/css/modules/tippy.css | 1 +
 web_src/js/modules/tippy.js   | 7 -------
 2 files changed, 1 insertion(+), 7 deletions(-)

diff --git a/web_src/css/modules/tippy.css b/web_src/css/modules/tippy.css
index 1a9f2f4bdf03c..9478ba7a20120 100644
--- a/web_src/css/modules/tippy.css
+++ b/web_src/css/modules/tippy.css
@@ -5,6 +5,7 @@
   display: none !important;
 }
 
+/* show target element once it's been moved by tippy.js */
 .tippy-content .tippy-target {
   display: unset !important;
 }
diff --git a/web_src/js/modules/tippy.js b/web_src/js/modules/tippy.js
index 27f371fd88659..7e739df8e80c1 100644
--- a/web_src/js/modules/tippy.js
+++ b/web_src/js/modules/tippy.js
@@ -40,13 +40,6 @@ export function createTippy(target, opts = {}) {
     ...other,
   });
 
-  // for popups where content refers to a DOM element, we use the 'tippy-target' class
-  // to initially hide the content, now we can remove it as the content has been removed
-  // from the DOM by tippy
-  if (other.content instanceof Element) {
-    other.content.classList.remove('tippy-target');
-  }
-
   return instance;
 }
 

From 73b2cb39bf1223d0ab602e3c2337321a36f1bd55 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sat, 2 Mar 2024 22:05:40 +0100
Subject: [PATCH 20/74] destroy tippy when removing button

---
 web_src/js/webcomponents/overflow-menu.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/web_src/js/webcomponents/overflow-menu.js b/web_src/js/webcomponents/overflow-menu.js
index dfbdb475ab44a..adf9aab508a3d 100644
--- a/web_src/js/webcomponents/overflow-menu.js
+++ b/web_src/js/webcomponents/overflow-menu.js
@@ -53,7 +53,9 @@ const update = throttle(100, (overflowMenu) => {
       content,
     });
   } else {
-    overflowMenu.querySelector('.overflow-menu-button')?.remove();
+    const btn = overflowMenu.querySelector('.overflow-menu-button');
+    btn?._tippy?.destroy();
+    btn?.remove();
   }
 });
 

From 1843a969dec42c105124a164c9c72a0dca95208e Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sat, 2 Mar 2024 22:08:04 +0100
Subject: [PATCH 21/74] remove dead css

---
 web_src/css/repo.css | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index 83af50fd94be4..c271bd71da175 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -2778,16 +2778,6 @@ tbody.commit-list {
   border-left: 1px solid var(--color-secondary);
 }
 
-.repository .ui.menu.overflow-menu {
-  background: none !important;
-}
-
-@media (max-width: 1200px) {
-  .repository .ui.menu.overflow-menu::after {
-    background: none !important;
-  }
-}
-
 .migrate-entries {
   display: grid !important;
   grid-template-columns: repeat(3, 1fr);

From 44b801960e54c01f7da727c22b62b9aaf0b93a26 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sat, 2 Mar 2024 22:12:55 +0100
Subject: [PATCH 22/74] rename variable and class

---
 web_src/js/webcomponents/overflow-menu.js | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/web_src/js/webcomponents/overflow-menu.js b/web_src/js/webcomponents/overflow-menu.js
index adf9aab508a3d..d5e90b8b42c75 100644
--- a/web_src/js/webcomponents/overflow-menu.js
+++ b/web_src/js/webcomponents/overflow-menu.js
@@ -3,16 +3,16 @@ import {svg} from '../svg.js';
 import {createTippy} from '../modules/tippy.js';
 
 const update = throttle(100, (overflowMenu) => {
-  let dropdownParent = overflowMenu.querySelector('.overflow-menu-dropdown');
-  if (!dropdownParent) {
+  let tippyContent = overflowMenu.querySelector('.overflow-menu-tippy-content');
+  if (!tippyContent) {
     const div = document.createElement('div');
-    div.classList.add('overflow-menu-dropdown', 'ui', 'vertical', 'menu', 'tippy-target');
+    div.classList.add('overflow-menu-tippy-content', 'ui', 'vertical', 'menu', 'tippy-target');
     overflowMenu.append(div);
-    dropdownParent = div;
+    tippyContent = div;
   }
 
   const menuParent = overflowMenu.querySelector('.overflow-menu-items');
-  const dropdownItems = dropdownParent?.querySelectorAll('.item') || [];
+  const dropdownItems = tippyContent?.querySelectorAll('.item') || [];
   for (const item of dropdownItems) {
     menuParent.append(item);
   }
@@ -29,10 +29,10 @@ const update = throttle(100, (overflowMenu) => {
 
   if (itemsToMove?.length) {
     for (const item of itemsToMove) {
-      dropdownParent.append(item);
+      tippyContent.append(item);
     }
 
-    const content = dropdownParent.cloneNode(true);
+    const content = tippyContent.cloneNode(true);
     const existingBtn = overflowMenu.querySelector('.overflow-menu-button');
     if (existingBtn?._tippy) {
       existingBtn._tippy.setContent(content);

From 878f7e66dc6965ed71e109c07e62b369c4f6bec2 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sat, 2 Mar 2024 22:14:03 +0100
Subject: [PATCH 23/74] typo

---
 web_src/js/webcomponents/overflow-menu.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web_src/js/webcomponents/overflow-menu.js b/web_src/js/webcomponents/overflow-menu.js
index d5e90b8b42c75..2487c7c5790ec 100644
--- a/web_src/js/webcomponents/overflow-menu.js
+++ b/web_src/js/webcomponents/overflow-menu.js
@@ -61,7 +61,7 @@ const update = throttle(100, (overflowMenu) => {
 
 window.customElements.define('overflow-menu', class extends HTMLElement {
   connectedCallback() {
-    // raf is needed, otherwise the first update will no see all children
+    // raf is needed, otherwise the first update will not see all children
     requestAnimationFrame(() => {
       update(this);
       let lastWidth;

From ab70cb1ba4e86e2393349e595f3430fa871631b8 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sat, 2 Mar 2024 22:24:22 +0100
Subject: [PATCH 24/74] fix lint-templates

---
 templates/devtest/gitea-ui.tmpl | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/templates/devtest/gitea-ui.tmpl b/templates/devtest/gitea-ui.tmpl
index 89edb5f04bc11..7a648b0ba805b 100644
--- a/templates/devtest/gitea-ui.tmpl
+++ b/templates/devtest/gitea-ui.tmpl
@@ -106,8 +106,8 @@
 
 	<div>
 		<h1>&lt;origin-url&gt;</h1>
-		<div><origin-url data-url="test/url"></gitea-url></div>
-		<div><origin-url data-url="/test/url"></gitea-url></div>
+		<div><origin-url data-url="test/url"></origin-url></div>
+		<div><origin-url data-url="/test/url"></origin-url></div>
 	</div>
 
 	<div>

From 682ae3a959d3f8eba13a8162cadc0b888fc47889 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sun, 3 Mar 2024 02:34:02 +0100
Subject: [PATCH 25/74] remove default background and add it via tailwind on
 login pages

---
 templates/repo/header.tmpl                    |  2 +-
 templates/user/auth/link_account.tmpl         |  2 +-
 templates/user/auth/signin_navbar.tmpl        |  2 +-
 templates/user/auth/signup_openid_navbar.tmpl |  2 +-
 web_src/css/base.css                          |  1 -
 web_src/css/repo/header.css                   | 11 -----------
 6 files changed, 4 insertions(+), 16 deletions(-)

diff --git a/templates/repo/header.tmpl b/templates/repo/header.tmpl
index bf459d3055e92..fa61ddfa97cd3 100644
--- a/templates/repo/header.tmpl
+++ b/templates/repo/header.tmpl
@@ -126,7 +126,7 @@
 		{{if .IsGenerated}}<div class="fork-flag">{{ctx.Locale.Tr "repo.generated_from"}} <a href="{{(.TemplateRepo ctx).Link}}">{{(.TemplateRepo ctx).FullName}}</a></div>{{end}}
 	</div>
 {{end}}
-	<overflow-menu class="ui container secondary pointing tabular top attached borderless menu navbar">
+	<overflow-menu class="ui container secondary pointing tabular top attached borderless menu navbar tw-pt-0 tw-my-0">
 		{{if not (or .Repository.IsBeingCreated .Repository.IsBroken)}}
 			<div class="overflow-menu-items">
 				{{if .Permission.CanRead $.UnitTypeCode}}
diff --git a/templates/user/auth/link_account.tmpl b/templates/user/auth/link_account.tmpl
index 88d842877b97e..81ea92c9594a3 100644
--- a/templates/user/auth/link_account.tmpl
+++ b/templates/user/auth/link_account.tmpl
@@ -1,6 +1,6 @@
 {{template "base/head" .}}
 <div role="main" aria-label="{{.Title}}" class="page-content user link-account">
-	<overflow-menu class="ui secondary pointing tabular top attached borderless menu navbar">
+	<overflow-menu class="ui secondary pointing tabular top attached borderless menu navbar tw-bg-header-wrapper">
 		<div class="overflow-menu-items tw-justify-center">
 			<!-- TODO handle .ShowRegistrationButton once other login bugs are fixed -->
 			{{if not .AllowOnlyInternalRegistration}}
diff --git a/templates/user/auth/signin_navbar.tmpl b/templates/user/auth/signin_navbar.tmpl
index cebb8466864ee..a5768830652f6 100644
--- a/templates/user/auth/signin_navbar.tmpl
+++ b/templates/user/auth/signin_navbar.tmpl
@@ -1,5 +1,5 @@
 {{if or .EnableOpenIDSignIn .EnableSSPI}}
-<overflow-menu class="ui secondary pointing tabular top attached borderless menu navbar">
+<overflow-menu class="ui secondary pointing tabular top attached borderless menu navbar tw-bg-header-wrapper">
 	<div class="overflow-menu-items tw-justify-center">
 		<a class="{{if .PageIsLogin}}active {{end}}item" rel="nofollow" href="{{AppSubUrl}}/user/login">
 			{{ctx.Locale.Tr "auth.login_userpass"}}
diff --git a/templates/user/auth/signup_openid_navbar.tmpl b/templates/user/auth/signup_openid_navbar.tmpl
index cbbc77c44fc57..9cf81b048f8a8 100644
--- a/templates/user/auth/signup_openid_navbar.tmpl
+++ b/templates/user/auth/signup_openid_navbar.tmpl
@@ -1,4 +1,4 @@
-<overflow-menu class="ui secondary pointing tabular top attached borderless menu navbar">
+<overflow-menu class="ui secondary pointing tabular top attached borderless menu navbar tw-bg-header-wrapper">
 	<div class="overflow-menu-items tw-justify-center">
 		<a class="{{if .PageIsOpenIDConnect}}active {{end}}item" href="{{AppSubUrl}}/user/openid/connect">
 			{{ctx.Locale.Tr "auth.openid_connect_title"}}
diff --git a/web_src/css/base.css b/web_src/css/base.css
index 754cc503b67d6..c642a5e1884bc 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -1341,7 +1341,6 @@ strong.attention-caution, span.attention-caution {
 
 overflow-menu {
   margin-bottom: 15px !important;
-  background: var(--color-header-wrapper) !important;
   border-bottom: 1px solid var(--color-secondary) !important;
 }
 
diff --git a/web_src/css/repo/header.css b/web_src/css/repo/header.css
index 1aeadf137ba35..ecbb58bb7168d 100644
--- a/web_src/css/repo/header.css
+++ b/web_src/css/repo/header.css
@@ -74,17 +74,6 @@
   background-color: var(--color-header-wrapper);
 }
 
-.repository .header-wrapper overflow-menu {
-  padding-top: 0 !important;
-  margin-top: 0 !important;
-  margin-bottom: 0 !important;
-}
-
-.repository .header-wrapper overflow-menu .item {
-  margin-left: 0 !important;
-  margin-right: 0 !important;
-}
-
 @media (max-width: 767.98px) {
   .repo-header .flex-item {
     flex-grow: 1;

From 8045ca378b3fa83fd5dc8fa26bcb608871919c08 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sun, 3 Mar 2024 02:40:18 +0100
Subject: [PATCH 26/74] use it on org page

---
 templates/devtest/gitea-ui.tmpl |  2 +-
 templates/org/menu.tmpl         | 71 ++++++++++++++++-----------------
 web_src/css/shared/repoorg.css  |  7 ----
 3 files changed, 36 insertions(+), 44 deletions(-)

diff --git a/templates/devtest/gitea-ui.tmpl b/templates/devtest/gitea-ui.tmpl
index 7a648b0ba805b..f04986c05627e 100644
--- a/templates/devtest/gitea-ui.tmpl
+++ b/templates/devtest/gitea-ui.tmpl
@@ -112,7 +112,7 @@
 
 	<div>
 		<h1>&lt;overflow-menu&gt;</h1>
-		<overflow-menu class="ui secondary pointing tabular top attached borderless menu navbar">
+		<overflow-menu class="ui secondary pointing tabular borderless menu">
 			<div class="overflow-menu-items">
 				<a class="active item">item</a>
 				<a class="item">item 1</a>
diff --git a/templates/org/menu.tmpl b/templates/org/menu.tmpl
index f07b26865a5c7..8eacc17e82a96 100644
--- a/templates/org/menu.tmpl
+++ b/templates/org/menu.tmpl
@@ -1,50 +1,49 @@
 <div class="ui container">
-	<div class="ui secondary stackable pointing menu">
-		<a class="{{if .PageIsViewRepositories}}active {{end}}item" href="{{$.Org.HomeLink}}">
-			{{svg "octicon-repo"}} {{ctx.Locale.Tr "user.repositories"}}
-			{{if .RepoCount}}
-				<div class="ui small label">{{.RepoCount}}</div>
+	<overflow-menu class="ui secondary pointing tabular borderless menu">
+		<div class="overflow-menu-items">
+			<a class="{{if .PageIsViewRepositories}}active {{end}}item" href="{{$.Org.HomeLink}}">
+				{{svg "octicon-repo"}} {{ctx.Locale.Tr "user.repositories"}}
+				{{if .RepoCount}}
+					<div class="ui small label">{{.RepoCount}}</div>
+				{{end}}
+			</a>
+			{{if .CanReadProjects}}
+			<a class="{{if .PageIsViewProjects}}active {{end}}item" href="{{$.Org.HomeLink}}/-/projects">
+				{{svg "octicon-project-symlink"}} {{ctx.Locale.Tr "user.projects"}}
+				{{if .ProjectCount}}
+					<div class="ui small label">{{.ProjectCount}}</div>
+				{{end}}
+			</a>
 			{{end}}
-		</a>
-		{{if .CanReadProjects}}
-		<a class="{{if .PageIsViewProjects}}active {{end}}item" href="{{$.Org.HomeLink}}/-/projects">
-			{{svg "octicon-project-symlink"}} {{ctx.Locale.Tr "user.projects"}}
-			{{if .ProjectCount}}
-				<div class="ui small label">{{.ProjectCount}}</div>
+			{{if and .IsPackageEnabled .CanReadPackages}}
+			<a class="{{if .IsPackagesPage}}active {{end}}item" href="{{$.Org.HomeLink}}/-/packages">
+				{{svg "octicon-package"}} {{ctx.Locale.Tr "packages.title"}}
+			</a>
 			{{end}}
-		</a>
-		{{end}}
-		{{if and .IsPackageEnabled .CanReadPackages}}
-		<a class="{{if .IsPackagesPage}}active {{end}}item" href="{{$.Org.HomeLink}}/-/packages">
-			{{svg "octicon-package"}} {{ctx.Locale.Tr "packages.title"}}
-		</a>
-		{{end}}
-		{{if and .IsRepoIndexerEnabled .CanReadCode}}
-		<a class="{{if .IsCodePage}}active {{end}}item" href="{{$.Org.HomeLink}}/-/code">
-			{{svg "octicon-code"}} {{ctx.Locale.Tr "org.code"}}
-		</a>
-		{{end}}
-		{{if .NumMembers}}
+			{{if and .IsRepoIndexerEnabled .CanReadCode}}
+			<a class="{{if .IsCodePage}}active {{end}}item" href="{{$.Org.HomeLink}}/-/code">
+				{{svg "octicon-code"}} {{ctx.Locale.Tr "org.code"}}
+			</a>
+			{{end}}
+			{{if .NumMembers}}
 			<a class="{{if $.PageIsOrgMembers}}active {{end}}item" href="{{$.OrgLink}}/members">
 				{{svg "octicon-person"}} {{ctx.Locale.Tr "org.members"}}
 				<div class="ui small label">{{.NumMembers}}</div>
 			</a>
-		{{end}}
-		{{if .IsOrganizationMember}}
+			{{end}}
+			{{if .IsOrganizationMember}}
 			<a class="{{if $.PageIsOrgTeams}}active {{end}}item" href="{{$.OrgLink}}/teams">
 				{{svg "octicon-people"}} {{ctx.Locale.Tr "org.teams"}}
 				{{if .NumTeams}}
 					<div class="ui small label">{{.NumTeams}}</div>
 				{{end}}
 			</a>
-		{{end}}
-
-		{{if .IsOrganizationOwner}}
-			<div class="right menu">
-				<a class="{{if .PageIsOrgSettings}}active {{end}}item" href="{{.OrgLink}}/settings">
-				{{svg "octicon-tools"}} {{ctx.Locale.Tr "repo.settings"}}
-				</a>
-			</div>
-		{{end}}
-	</div>
+			{{end}}
+			{{if .IsOrganizationOwner}}
+			<a class="{{if .PageIsOrgSettings}}active {{end}}item" href="{{.OrgLink}}/settings">
+			{{svg "octicon-tools"}} {{ctx.Locale.Tr "repo.settings"}}
+			</a>
+			{{end}}
+		</div>
+	</overflow-menu>
 </div>
diff --git a/web_src/css/shared/repoorg.css b/web_src/css/shared/repoorg.css
index 7f0a805d0ff30..5573ae47b81ec 100644
--- a/web_src/css/shared/repoorg.css
+++ b/web_src/css/shared/repoorg.css
@@ -5,13 +5,6 @@
   margin-left: 15px;
 }
 
-.repository .ui.secondary.stackable.pointing.menu,
-.organization .ui.secondary.stackable.pointing.menu {
-  flex-wrap: wrap;
-  margin-top: 5px;
-  margin-bottom: 10px;
-}
-
 .repository .ui.tabs.container,
 .organization .ui.tabs.container {
   margin-top: 14px;

From f769241a9d12fb9bc84af05dae27dfd7c942e9d5 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sun, 3 Mar 2024 02:43:32 +0100
Subject: [PATCH 27/74] use it on user page

---
 templates/user/overview/header.tmpl | 71 +++++++++++++++--------------
 1 file changed, 36 insertions(+), 35 deletions(-)

diff --git a/templates/user/overview/header.tmpl b/templates/user/overview/header.tmpl
index 4fdaa70d879fa..64d7254c6d561 100644
--- a/templates/user/overview/header.tmpl
+++ b/templates/user/overview/header.tmpl
@@ -1,47 +1,48 @@
-<div class="ui secondary stackable pointing menu">
-	{{if and .HasProfileReadme .ContextUser.IsIndividual}}
-	<a class="{{if eq .TabName "overview"}}active {{end}}item" href="{{.ContextUser.HomeLink}}?tab=overview">
-		{{svg "octicon-info"}} {{ctx.Locale.Tr "user.overview"}}
-	</a>
-	{{end}}
-	<a class="{{if eq .TabName "repositories"}}active {{end}} item" href="{{.ContextUser.HomeLink}}?tab=repositories">
-		{{svg "octicon-repo"}} {{ctx.Locale.Tr "user.repositories"}}
-		{{if .RepoCount}}
-			<div class="ui small label">{{.RepoCount}}</div>
-		{{end}}
-	</a>
-	{{if or .ContextUser.IsIndividual .CanReadProjects}}
-	<a href="{{.ContextUser.HomeLink}}/-/projects" class="{{if .PageIsViewProjects}}active {{end}}item">
-		{{svg "octicon-project-symlink"}} {{ctx.Locale.Tr "user.projects"}}
-		{{if .ProjectCount}}
-			<div class="ui small label">{{.ProjectCount}}</div>
+<overflow-menu class="ui secondary pointing tabular borderless menu">
+	<div class="overflow-menu-items">
+		{{if and .HasProfileReadme .ContextUser.IsIndividual}}
+		<a class="{{if eq .TabName "overview"}}active {{end}}item" href="{{.ContextUser.HomeLink}}?tab=overview">
+			{{svg "octicon-info"}} {{ctx.Locale.Tr "user.overview"}}
+		</a>
 		{{end}}
-	</a>
-	{{end}}
-	{{if and .IsPackageEnabled (or .ContextUser.IsIndividual .CanReadPackages)}}
-		<a href="{{.ContextUser.HomeLink}}/-/packages" class="{{if .IsPackagesPage}}active {{end}}item">
-			{{svg "octicon-package"}} {{ctx.Locale.Tr "packages.title"}}
+		<a class="{{if eq .TabName "repositories"}}active {{end}} item" href="{{.ContextUser.HomeLink}}?tab=repositories">
+			{{svg "octicon-repo"}} {{ctx.Locale.Tr "user.repositories"}}
+			{{if .RepoCount}}
+				<div class="ui small label">{{.RepoCount}}</div>
+			{{end}}
 		</a>
-	{{end}}
-	{{if and .IsRepoIndexerEnabled (or .ContextUser.IsIndividual .CanReadCode)}}
-		<a href="{{.ContextUser.HomeLink}}/-/code" class="{{if .IsCodePage}}active {{end}}item">
-			{{svg "octicon-code"}} {{ctx.Locale.Tr "user.code"}}
+		{{if or .ContextUser.IsIndividual .CanReadProjects}}
+		<a href="{{.ContextUser.HomeLink}}/-/projects" class="{{if .PageIsViewProjects}}active {{end}}item">
+			{{svg "octicon-project-symlink"}} {{ctx.Locale.Tr "user.projects"}}
+			{{if .ProjectCount}}
+				<div class="ui small label">{{.ProjectCount}}</div>
+			{{end}}
 		</a>
-	{{end}}
-
-	<a class="{{if eq .TabName "activity"}}active {{end}}item" href="{{.ContextUser.HomeLink}}?tab=activity">
-		{{svg "octicon-rss"}} {{ctx.Locale.Tr "user.activity"}}
-	</a>
-	{{if not .DisableStars}}
+		{{end}}
+		{{if and .IsPackageEnabled (or .ContextUser.IsIndividual .CanReadPackages)}}
+			<a href="{{.ContextUser.HomeLink}}/-/packages" class="{{if .IsPackagesPage}}active {{end}}item">
+				{{svg "octicon-package"}} {{ctx.Locale.Tr "packages.title"}}
+			</a>
+		{{end}}
+		{{if and .IsRepoIndexerEnabled (or .ContextUser.IsIndividual .CanReadCode)}}
+			<a href="{{.ContextUser.HomeLink}}/-/code" class="{{if .IsCodePage}}active {{end}}item">
+				{{svg "octicon-code"}} {{ctx.Locale.Tr "user.code"}}
+			</a>
+		{{end}}
+		<a class="{{if eq .TabName "activity"}}active {{end}}item" href="{{.ContextUser.HomeLink}}?tab=activity">
+			{{svg "octicon-rss"}} {{ctx.Locale.Tr "user.activity"}}
+		</a>
+		{{if not .DisableStars}}
 		<a class="{{if eq .TabName "stars"}}active {{end}}item" href="{{.ContextUser.HomeLink}}?tab=stars">
 			{{svg "octicon-star"}} {{ctx.Locale.Tr "user.starred"}}
 			{{if .ContextUser.NumStars}}
 				<div class="ui small label">{{.ContextUser.NumStars}}</div>
 			{{end}}
 		</a>
-	{{else}}
+		{{else}}
 		<a class="{{if eq .TabName "watching"}}active {{end}}item" href="{{.ContextUser.HomeLink}}?tab=watching">
 			{{svg "octicon-eye"}} {{ctx.Locale.Tr "user.watched"}}
 		</a>
-	{{end}}
-</div>
+		{{end}}
+	</div>
+</overflow-menu>

From 27c94c09f2ab517dd466d332ce0d9ac0d1dabbe2 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sun, 3 Mar 2024 02:46:25 +0100
Subject: [PATCH 28/74] hide sooner

---
 web_src/js/webcomponents/overflow-menu.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web_src/js/webcomponents/overflow-menu.js b/web_src/js/webcomponents/overflow-menu.js
index 2487c7c5790ec..f7448536c1c38 100644
--- a/web_src/js/webcomponents/overflow-menu.js
+++ b/web_src/js/webcomponents/overflow-menu.js
@@ -22,7 +22,7 @@ const update = throttle(100, (overflowMenu) => {
   const menuRight = overflowMenu.parentNode.getBoundingClientRect().right;
   for (const item of menuParent.querySelectorAll('.item')) {
     const itemRight = item.getBoundingClientRect().right;
-    if (menuRight - itemRight < 24) { // slightly less than width of .overflow-menu-button
+    if (menuRight - itemRight < 38) { // slightly less than width of .overflow-menu-button
       itemsToMove.push(item);
     }
   }

From b14e132f370dae5d604a09a16e687a34145f1a01 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sun, 3 Mar 2024 03:01:16 +0100
Subject: [PATCH 29/74] replace requestAnimationFrame with MutationObserver

---
 web_src/js/webcomponents/overflow-menu.js | 33 +++++++++++++++--------
 1 file changed, 22 insertions(+), 11 deletions(-)

diff --git a/web_src/js/webcomponents/overflow-menu.js b/web_src/js/webcomponents/overflow-menu.js
index f7448536c1c38..afa5b13aa871b 100644
--- a/web_src/js/webcomponents/overflow-menu.js
+++ b/web_src/js/webcomponents/overflow-menu.js
@@ -1,6 +1,7 @@
 import {throttle} from 'throttle-debounce';
 import {svg} from '../svg.js';
 import {createTippy} from '../modules/tippy.js';
+import {isDocumentFragmentOrElementNode} from '../utils/dom.js';
 
 const update = throttle(100, (overflowMenu) => {
   let tippyContent = overflowMenu.querySelector('.overflow-menu-tippy-content');
@@ -61,19 +62,29 @@ const update = throttle(100, (overflowMenu) => {
 
 window.customElements.define('overflow-menu', class extends HTMLElement {
   connectedCallback() {
-    // raf is needed, otherwise the first update will not see all children
-    requestAnimationFrame(() => {
-      update(this);
-      let lastWidth;
-      (new ResizeObserver((entries) => {
-        for (const entry of entries) {
-          const newWidth = entry.contentBoxSize[0].inlineSize;
-          if (newWidth !== lastWidth) {
-            update(entry.target);
-            lastWidth = newWidth;
+    // wait for the addition of .overflow-menu-items and then update once and install a ResizeObserver
+    // to detect future resize events where we need to update again
+    const observer = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        for (const node of mutation.addedNodes) {
+          if (!isDocumentFragmentOrElementNode(node)) continue;
+          if (node.classList.contains('overflow-menu-items')) {
+            observer.disconnect();
+            update(this);
+            let lastWidth;
+            (new ResizeObserver((entries) => {
+              for (const entry of entries) {
+                const newWidth = entry.contentBoxSize[0].inlineSize;
+                if (newWidth !== lastWidth) {
+                  update(entry.target);
+                  lastWidth = newWidth;
+                }
+              }
+            })).observe(this);
           }
         }
-      })).observe(this);
+      }
     });
+    observer.observe(this, {childList: true});
   }
 });

From 6182d5f229f1e2142b01e51885c90a9b2c6fc2aa Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sun, 3 Mar 2024 04:28:43 +0100
Subject: [PATCH 30/74] add vue compat for custom elements, styling tweaks

---
 .eslintrc.yaml                            |  2 +-
 web_src/css/base.css                      |  3 +-
 web_src/js/webcomponents/overflow-menu.js | 55 +++++++++++++----------
 webpack.config.js                         |  5 +++
 4 files changed, 40 insertions(+), 25 deletions(-)

diff --git a/.eslintrc.yaml b/.eslintrc.yaml
index e9991c02baed2..c7aba59de583c 100644
--- a/.eslintrc.yaml
+++ b/.eslintrc.yaml
@@ -828,7 +828,7 @@ rules:
   wc/guard-super-call: [2]
   wc/max-elements-per-file: [0]
   wc/no-child-traversal-in-attributechangedcallback: [2]
-  wc/no-child-traversal-in-connectedcallback: [2]
+  wc/no-child-traversal-in-connectedcallback: [0] # neccesary for custom elements in Vue
   wc/no-closed-shadow-root: [2]
   wc/no-constructor-attributes: [2]
   wc/no-constructor-params: [2]
diff --git a/web_src/css/base.css b/web_src/css/base.css
index c642a5e1884bc..cababf0ca28be 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -1342,11 +1342,12 @@ strong.attention-caution, span.attention-caution {
 overflow-menu {
   margin-bottom: 15px !important;
   border-bottom: 1px solid var(--color-secondary) !important;
+  display: flex;
 }
 
 overflow-menu .overflow-menu-items {
   display: flex;
-  width: 100%;
+  flex: 1;
 }
 
 overflow-menu .overflow-menu-items .item {
diff --git a/web_src/js/webcomponents/overflow-menu.js b/web_src/js/webcomponents/overflow-menu.js
index afa5b13aa871b..28cc57a394295 100644
--- a/web_src/js/webcomponents/overflow-menu.js
+++ b/web_src/js/webcomponents/overflow-menu.js
@@ -41,7 +41,7 @@ const update = throttle(100, (overflowMenu) => {
     }
 
     const btn = document.createElement('button');
-    btn.classList.add('overflow-menu-button', 'btn', 'tw-px-2');
+    btn.classList.add('overflow-menu-button', 'btn', 'tw-px-2', 'hover:tw-text-text-dark');
     btn.innerHTML = svg('octicon-kebab-horizontal');
     overflowMenu.append(btn);
 
@@ -61,30 +61,39 @@ const update = throttle(100, (overflowMenu) => {
 });
 
 window.customElements.define('overflow-menu', class extends HTMLElement {
+  init(observer) {
+    observer?.disconnect();
+    update(this);
+    let lastWidth;
+    (new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const newWidth = entry.contentBoxSize[0].inlineSize;
+        if (newWidth !== lastWidth) {
+          update(entry.target);
+          lastWidth = newWidth;
+        }
+      }
+    })).observe(this);
+  }
+
   connectedCallback() {
-    // wait for the addition of .overflow-menu-items and then update once and install a ResizeObserver
-    // to detect future resize events where we need to update again
-    const observer = new MutationObserver((mutations) => {
-      for (const mutation of mutations) {
-        for (const node of mutation.addedNodes) {
-          if (!isDocumentFragmentOrElementNode(node)) continue;
-          if (node.classList.contains('overflow-menu-items')) {
-            observer.disconnect();
-            update(this);
-            let lastWidth;
-            (new ResizeObserver((entries) => {
-              for (const entry of entries) {
-                const newWidth = entry.contentBoxSize[0].inlineSize;
-                if (newWidth !== lastWidth) {
-                  update(entry.target);
-                  lastWidth = newWidth;
-                }
-              }
-            })).observe(this);
+    // check whether the mandatory .overflow-menu-items child element is present initially which can
+    // happen when used with Vue. If it's not there, wait for its addition via Mutationobserver, which
+    // is generally what happens when rendered via templates.
+    if (this.querySelector('.overflow-menu-items')) {
+      this.init();
+    } else {
+      const observer = new MutationObserver((mutations) => {
+        for (const mutation of mutations) {
+          for (const node of mutation.addedNodes) {
+            if (!isDocumentFragmentOrElementNode(node)) continue;
+            if (node.classList.contains('overflow-menu-items')) {
+              this.init(observer);
+            }
           }
         }
-      }
-    });
-    observer.observe(this, {childList: true});
+      });
+      observer.observe(this, {childList: true});
+    }
   }
 });
diff --git a/webpack.config.js b/webpack.config.js
index 357a776195b32..250c8d33ff238 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -119,6 +119,11 @@ export default {
         test: /\.vue$/i,
         exclude: /node_modules/,
         loader: 'vue-loader',
+        options: {
+          compilerOptions: {
+            isCustomElement: (tag) => ['origin-url', 'overflow-menu'].includes(tag),
+          },
+        },
       },
       {
         test: /\.js$/i,

From 6aa9f881374ab4fa02b6a20e4242286f308d01b7 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sun, 3 Mar 2024 04:34:55 +0100
Subject: [PATCH 31/74] move observer disconnect

---
 web_src/js/webcomponents/overflow-menu.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/web_src/js/webcomponents/overflow-menu.js b/web_src/js/webcomponents/overflow-menu.js
index 28cc57a394295..a3db1da0405ca 100644
--- a/web_src/js/webcomponents/overflow-menu.js
+++ b/web_src/js/webcomponents/overflow-menu.js
@@ -61,8 +61,7 @@ const update = throttle(100, (overflowMenu) => {
 });
 
 window.customElements.define('overflow-menu', class extends HTMLElement {
-  init(observer) {
-    observer?.disconnect();
+  init() {
     update(this);
     let lastWidth;
     (new ResizeObserver((entries) => {
@@ -88,7 +87,8 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
           for (const node of mutation.addedNodes) {
             if (!isDocumentFragmentOrElementNode(node)) continue;
             if (node.classList.contains('overflow-menu-items')) {
-              this.init(observer);
+              observer?.disconnect();
+              this.init();
             }
           }
         }

From 8a64b70b6161f6fadb0817afed37a8e82f9612cd Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sun, 3 Mar 2024 04:57:05 +0100
Subject: [PATCH 32/74] prevent fouc with defer in webcomponents script

---
 templates/base/head_script.tmpl | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/base/head_script.tmpl b/templates/base/head_script.tmpl
index 4a723f63b9c9e..f916e4c309fd5 100644
--- a/templates/base/head_script.tmpl
+++ b/templates/base/head_script.tmpl
@@ -46,4 +46,4 @@ If you introduce mistakes in it, Gitea JavaScript code wouldn't run correctly.
 	{{/* in case some pages don't render the pageData, we make sure it is an object to prevent null access */}}
 	window.config.pageData = window.config.pageData || {};
 </script>
-<script src="{{AssetUrlPrefix}}/js/webcomponents.js?v={{AssetVersion}}"></script>
+<script defer src="{{AssetUrlPrefix}}/js/webcomponents.js?v={{AssetVersion}}"></script>

From e145a5de0bd922abc3311924d559e65a5e8a1efd Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sun, 3 Mar 2024 05:10:45 +0100
Subject: [PATCH 33/74] split webcomponents into two scripts to avoid all FOUCs

---
 templates/base/head_script.tmpl   | 3 ++-
 web_src/js/webcomponents/defer.js | 3 +++
 web_src/js/webcomponents/index.js | 1 -
 webpack.config.js                 | 3 +++
 4 files changed, 8 insertions(+), 2 deletions(-)
 create mode 100644 web_src/js/webcomponents/defer.js

diff --git a/templates/base/head_script.tmpl b/templates/base/head_script.tmpl
index f916e4c309fd5..572edb67a4b50 100644
--- a/templates/base/head_script.tmpl
+++ b/templates/base/head_script.tmpl
@@ -46,4 +46,5 @@ If you introduce mistakes in it, Gitea JavaScript code wouldn't run correctly.
 	{{/* in case some pages don't render the pageData, we make sure it is an object to prevent null access */}}
 	window.config.pageData = window.config.pageData || {};
 </script>
-<script defer src="{{AssetUrlPrefix}}/js/webcomponents.js?v={{AssetVersion}}"></script>
+<script src="{{AssetUrlPrefix}}/js/webcomponents.js?v={{AssetVersion}}"></script>
+<script defer src="{{AssetUrlPrefix}}/js/webcomponents.defer.js?v={{AssetVersion}}"></script>
diff --git a/web_src/js/webcomponents/defer.js b/web_src/js/webcomponents/defer.js
new file mode 100644
index 0000000000000..87d0fa2e21771
--- /dev/null
+++ b/web_src/js/webcomponents/defer.js
@@ -0,0 +1,3 @@
+// components here will load in a <script defer> element which may be necessary to prevent
+// whole-page FOUC
+import './overflow-menu.js';
diff --git a/web_src/js/webcomponents/index.js b/web_src/js/webcomponents/index.js
index 0d84ebfc86061..46bfef4a25b21 100644
--- a/web_src/js/webcomponents/index.js
+++ b/web_src/js/webcomponents/index.js
@@ -1,4 +1,3 @@
 import './polyfills.js';
 import '@github/relative-time-element';
 import './origin-url.js';
-import './overflow-menu.js';
diff --git a/webpack.config.js b/webpack.config.js
index 250c8d33ff238..d3844d60a5ba8 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -72,6 +72,9 @@ export default {
     webcomponents: [
       fileURLToPath(new URL('web_src/js/webcomponents/index.js', import.meta.url)),
     ],
+    'webcomponents.defer': [
+      fileURLToPath(new URL('web_src/js/webcomponents/defer.js', import.meta.url)),
+    ],
     swagger: [
       fileURLToPath(new URL('web_src/js/standalone/swagger.js', import.meta.url)),
       fileURLToPath(new URL('web_src/css/standalone/swagger.css', import.meta.url)),

From 07cea898f2b6398c367b7ee6e8e6b8b44681372a Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sun, 3 Mar 2024 13:39:38 +0100
Subject: [PATCH 34/74] move back to one webcomponents file, remove
 getBoundingClientRect

---
 templates/base/head_script.tmpl           |   1 -
 web_src/js/webcomponents/index.js         |   1 +
 web_src/js/webcomponents/overflow-menu.js | 105 +++++++++++-----------
 webpack.config.js                         |   3 -
 4 files changed, 53 insertions(+), 57 deletions(-)

diff --git a/templates/base/head_script.tmpl b/templates/base/head_script.tmpl
index 572edb67a4b50..4a723f63b9c9e 100644
--- a/templates/base/head_script.tmpl
+++ b/templates/base/head_script.tmpl
@@ -47,4 +47,3 @@ If you introduce mistakes in it, Gitea JavaScript code wouldn't run correctly.
 	window.config.pageData = window.config.pageData || {};
 </script>
 <script src="{{AssetUrlPrefix}}/js/webcomponents.js?v={{AssetVersion}}"></script>
-<script defer src="{{AssetUrlPrefix}}/js/webcomponents.defer.js?v={{AssetVersion}}"></script>
diff --git a/web_src/js/webcomponents/index.js b/web_src/js/webcomponents/index.js
index 46bfef4a25b21..0d84ebfc86061 100644
--- a/web_src/js/webcomponents/index.js
+++ b/web_src/js/webcomponents/index.js
@@ -1,3 +1,4 @@
 import './polyfills.js';
 import '@github/relative-time-element';
 import './origin-url.js';
+import './overflow-menu.js';
diff --git a/web_src/js/webcomponents/overflow-menu.js b/web_src/js/webcomponents/overflow-menu.js
index a3db1da0405ca..7388fb652a28d 100644
--- a/web_src/js/webcomponents/overflow-menu.js
+++ b/web_src/js/webcomponents/overflow-menu.js
@@ -1,74 +1,73 @@
 import {throttle} from 'throttle-debounce';
-import {svg} from '../svg.js';
 import {createTippy} from '../modules/tippy.js';
 import {isDocumentFragmentOrElementNode} from '../utils/dom.js';
 
-const update = throttle(100, (overflowMenu) => {
-  let tippyContent = overflowMenu.querySelector('.overflow-menu-tippy-content');
-  if (!tippyContent) {
-    const div = document.createElement('div');
-    div.classList.add('overflow-menu-tippy-content', 'ui', 'vertical', 'menu', 'tippy-target');
-    overflowMenu.append(div);
-    tippyContent = div;
-  }
-
-  const menuParent = overflowMenu.querySelector('.overflow-menu-items');
-  const dropdownItems = tippyContent?.querySelectorAll('.item') || [];
-  for (const item of dropdownItems) {
-    menuParent.append(item);
-  }
-
-  // measure which items are outside the element boundary and move them into the button menu
-  const itemsToMove = [];
-  const menuRight = overflowMenu.parentNode.getBoundingClientRect().right;
-  for (const item of menuParent.querySelectorAll('.item')) {
-    const itemRight = item.getBoundingClientRect().right;
-    if (menuRight - itemRight < 38) { // slightly less than width of .overflow-menu-button
-      itemsToMove.push(item);
+window.customElements.define('overflow-menu', class extends HTMLElement {
+  updateItems = throttle(100, () => {
+    let tippyContent = this.querySelector('.overflow-menu-tippy-content');
+    if (!tippyContent) {
+      const div = document.createElement('div');
+      div.classList.add('overflow-menu-tippy-content', 'ui', 'vertical', 'menu', 'tippy-target');
+      this.append(div);
+      tippyContent = div;
     }
-  }
 
-  if (itemsToMove?.length) {
-    for (const item of itemsToMove) {
-      tippyContent.append(item);
+    const menuParent = this.querySelector('.overflow-menu-items');
+    const dropdownItems = tippyContent?.querySelectorAll('.item');
+    for (const item of dropdownItems) {
+      menuParent.append(item);
     }
 
-    const content = tippyContent.cloneNode(true);
-    const existingBtn = overflowMenu.querySelector('.overflow-menu-button');
-    if (existingBtn?._tippy) {
-      existingBtn._tippy.setContent(content);
-      return;
+    // measure which items are partially outside the element boundary and move them into the button menu
+    const itemsToMove = [];
+    const menuRight = this.offsetLeft + this.offsetWidth;
+    for (const item of menuParent.querySelectorAll('.item')) {
+      const itemRight = item.offsetLeft + item.offsetWidth;
+      if (menuRight - itemRight < 38) { // slightly less than width of .overflow-menu-button
+        itemsToMove.push(item);
+      }
     }
 
-    const btn = document.createElement('button');
-    btn.classList.add('overflow-menu-button', 'btn', 'tw-px-2', 'hover:tw-text-text-dark');
-    btn.innerHTML = svg('octicon-kebab-horizontal');
-    overflowMenu.append(btn);
+    if (itemsToMove?.length) {
+      for (const item of itemsToMove) {
+        tippyContent.append(item);
+      }
 
-    createTippy(btn, {
-      trigger: 'click',
-      hideOnClick: true,
-      interactive: true,
-      placement: 'bottom-end',
-      role: 'menu',
-      content,
-    });
-  } else {
-    const btn = overflowMenu.querySelector('.overflow-menu-button');
-    btn?._tippy?.destroy();
-    btn?.remove();
-  }
-});
+      const content = tippyContent.cloneNode(true);
+      const existingBtn = this.querySelector('.overflow-menu-button');
+      if (existingBtn?._tippy) {
+        existingBtn._tippy.setContent(content);
+        return;
+      }
+
+      const btn = document.createElement('button');
+      btn.classList.add('overflow-menu-button', 'btn', 'tw-px-2', 'hover:tw-text-text-dark');
+      btn.innerHTML = '<svg viewBox="0 0 16 16" class="svg octicon-kebab-horizontal" width="16" height="16" aria-hidden="true"><path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3M1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3m13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"/></svg>';
+      this.append(btn);
+
+      createTippy(btn, {
+        trigger: 'click',
+        hideOnClick: true,
+        interactive: true,
+        placement: 'bottom-end',
+        role: 'menu',
+        content,
+      });
+    } else {
+      const btn = this.querySelector('.overflow-menu-button');
+      btn?._tippy?.destroy();
+      btn?.remove();
+    }
+  });
 
-window.customElements.define('overflow-menu', class extends HTMLElement {
   init() {
-    update(this);
+    this.updateItems();
     let lastWidth;
     (new ResizeObserver((entries) => {
       for (const entry of entries) {
         const newWidth = entry.contentBoxSize[0].inlineSize;
         if (newWidth !== lastWidth) {
-          update(entry.target);
+          this.updateItems();
           lastWidth = newWidth;
         }
       }
diff --git a/webpack.config.js b/webpack.config.js
index d3844d60a5ba8..250c8d33ff238 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -72,9 +72,6 @@ export default {
     webcomponents: [
       fileURLToPath(new URL('web_src/js/webcomponents/index.js', import.meta.url)),
     ],
-    'webcomponents.defer': [
-      fileURLToPath(new URL('web_src/js/webcomponents/defer.js', import.meta.url)),
-    ],
     swagger: [
       fileURLToPath(new URL('web_src/js/standalone/swagger.js', import.meta.url)),
       fileURLToPath(new URL('web_src/css/standalone/swagger.css', import.meta.url)),

From 2cf34a36292e85e33575573ee963cdd7b1322f9a Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sun, 3 Mar 2024 14:13:11 +0100
Subject: [PATCH 35/74] fix the fouc

---
 web_src/js/webcomponents/overflow-menu.js | 33 ++++++++++++-----------
 1 file changed, 18 insertions(+), 15 deletions(-)

diff --git a/web_src/js/webcomponents/overflow-menu.js b/web_src/js/webcomponents/overflow-menu.js
index 7388fb652a28d..aa4646b7c996d 100644
--- a/web_src/js/webcomponents/overflow-menu.js
+++ b/web_src/js/webcomponents/overflow-menu.js
@@ -12,17 +12,16 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
       tippyContent = div;
     }
 
-    const menuParent = this.querySelector('.overflow-menu-items');
-    const dropdownItems = tippyContent?.querySelectorAll('.item');
-    for (const item of dropdownItems) {
-      menuParent.append(item);
+    const tippyItems = tippyContent?.querySelectorAll('.item');
+    for (const item of tippyItems) {
+      this.menuItemsEl.append(item);
     }
 
     // measure which items are partially outside the element boundary and move them into the button menu
     const itemsToMove = [];
-    const menuRight = this.offsetLeft + this.offsetWidth;
-    for (const item of menuParent.querySelectorAll('.item')) {
-      const itemRight = item.offsetLeft + item.offsetWidth;
+    const menuRight = this.getBoundingClientRect().right;
+    for (const item of this.menuItemsEl.querySelectorAll('.item')) {
+      const itemRight = item.getBoundingClientRect().right;
       if (menuRight - itemRight < 38) { // slightly less than width of .overflow-menu-button
         itemsToMove.push(item);
       }
@@ -61,24 +60,27 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
   });
 
   init() {
-    this.updateItems();
-    let lastWidth;
+    // ResizeObserver seems to reliably trigger on page load, so we don't manually call updateItems()
+    // for the initial rendering, which also avoids a full-page FOUC in Firefox that happens when
+    // updateItems is called too soon.
     (new ResizeObserver((entries) => {
       for (const entry of entries) {
         const newWidth = entry.contentBoxSize[0].inlineSize;
-        if (newWidth !== lastWidth) {
+        if (newWidth !== this.lastWidth) {
           this.updateItems();
-          lastWidth = newWidth;
+          this.lastWidth = newWidth;
         }
       }
     })).observe(this);
   }
 
   connectedCallback() {
-    // check whether the mandatory .overflow-menu-items child element is present initially which can
-    // happen when used with Vue. If it's not there, wait for its addition via Mutationobserver, which
-    // is generally what happens when rendered via templates.
-    if (this.querySelector('.overflow-menu-items')) {
+    // check whether the mandatory .overflow-menu-items child element is present initially which happens
+    // with Vue which renders differently than browsers. If it's not there, like in the case of browser
+    // template rendering, wait for its addition.
+    const menuItemsEl = this.querySelector('.overflow-menu-items');
+    if (menuItemsEl) {
+      this.menuItemsEl = menuItemsEl;
       this.init();
     } else {
       const observer = new MutationObserver((mutations) => {
@@ -86,6 +88,7 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
           for (const node of mutation.addedNodes) {
             if (!isDocumentFragmentOrElementNode(node)) continue;
             if (node.classList.contains('overflow-menu-items')) {
+              this.menuItemsEl = node;
               observer?.disconnect();
               this.init();
             }

From 551f9101df3018ace676bca62841d491e53a95b8 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sun, 3 Mar 2024 14:16:57 +0100
Subject: [PATCH 36/74] avoid one querySelector

---
 web_src/js/webcomponents/overflow-menu.js | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/web_src/js/webcomponents/overflow-menu.js b/web_src/js/webcomponents/overflow-menu.js
index aa4646b7c996d..7bf241c0f410c 100644
--- a/web_src/js/webcomponents/overflow-menu.js
+++ b/web_src/js/webcomponents/overflow-menu.js
@@ -4,15 +4,14 @@ import {isDocumentFragmentOrElementNode} from '../utils/dom.js';
 
 window.customElements.define('overflow-menu', class extends HTMLElement {
   updateItems = throttle(100, () => {
-    let tippyContent = this.querySelector('.overflow-menu-tippy-content');
-    if (!tippyContent) {
+    if (!this.tippyContent) {
       const div = document.createElement('div');
       div.classList.add('overflow-menu-tippy-content', 'ui', 'vertical', 'menu', 'tippy-target');
       this.append(div);
-      tippyContent = div;
+      this.tippyContent = div;
     }
 
-    const tippyItems = tippyContent?.querySelectorAll('.item');
+    const tippyItems = this.tippyContent?.querySelectorAll('.item');
     for (const item of tippyItems) {
       this.menuItemsEl.append(item);
     }
@@ -29,10 +28,10 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
 
     if (itemsToMove?.length) {
       for (const item of itemsToMove) {
-        tippyContent.append(item);
+        this.tippyContent.append(item);
       }
 
-      const content = tippyContent.cloneNode(true);
+      const content = this.tippyContent.cloneNode(true);
       const existingBtn = this.querySelector('.overflow-menu-button');
       if (existingBtn?._tippy) {
         existingBtn._tippy.setContent(content);

From f74a4912fb52bdc7efecf1c771ed8286bdaa9add Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sun, 3 Mar 2024 14:26:01 +0100
Subject: [PATCH 37/74] avoid another querySelector, tweak comments

---
 web_src/js/webcomponents/overflow-menu.js | 23 ++++++++++++-----------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/web_src/js/webcomponents/overflow-menu.js b/web_src/js/webcomponents/overflow-menu.js
index 7bf241c0f410c..6b9503b6e8f6c 100644
--- a/web_src/js/webcomponents/overflow-menu.js
+++ b/web_src/js/webcomponents/overflow-menu.js
@@ -11,12 +11,12 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
       this.tippyContent = div;
     }
 
-    const tippyItems = this.tippyContent?.querySelectorAll('.item');
-    for (const item of tippyItems) {
+    // move items in tippy back into the menu items for subsequent measurement
+    for (const item of this.tippyContent?.querySelectorAll('.item')) {
       this.menuItemsEl.append(item);
     }
 
-    // measure which items are partially outside the element boundary and move them into the button menu
+    // measure which items are partially outside the element and move them into the button menu
     const itemsToMove = [];
     const menuRight = this.getBoundingClientRect().right;
     for (const item of this.menuItemsEl.querySelectorAll('.item')) {
@@ -27,14 +27,15 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
     }
 
     if (itemsToMove?.length) {
+      // move all items that overflow into tippy
       for (const item of itemsToMove) {
         this.tippyContent.append(item);
       }
-
       const content = this.tippyContent.cloneNode(true);
-      const existingBtn = this.querySelector('.overflow-menu-button');
-      if (existingBtn?._tippy) {
-        existingBtn._tippy.setContent(content);
+
+      // update existing tippy
+      if (this.button?._tippy) {
+        this.button._tippy.setContent(content);
         return;
       }
 
@@ -42,6 +43,7 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
       btn.classList.add('overflow-menu-button', 'btn', 'tw-px-2', 'hover:tw-text-text-dark');
       btn.innerHTML = '<svg viewBox="0 0 16 16" class="svg octicon-kebab-horizontal" width="16" height="16" aria-hidden="true"><path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3M1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3m13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"/></svg>';
       this.append(btn);
+      this.button = btn;
 
       createTippy(btn, {
         trigger: 'click',
@@ -59,9 +61,8 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
   });
 
   init() {
-    // ResizeObserver seems to reliably trigger on page load, so we don't manually call updateItems()
-    // for the initial rendering, which also avoids a full-page FOUC in Firefox that happens when
-    // updateItems is called too soon.
+    // ResizeObserver triggers on initial render, so we don't manually call `updateItems` there which
+    // also avoids a full-page FOUC in Firefox that happens when `updateItems` is called too soon.
     (new ResizeObserver((entries) => {
       for (const entry of entries) {
         const newWidth = entry.contentBoxSize[0].inlineSize;
@@ -74,7 +75,7 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
   }
 
   connectedCallback() {
-    // check whether the mandatory .overflow-menu-items child element is present initially which happens
+    // check whether the mandatory `.overflow-menu-items` element is present initially which happens
     // with Vue which renders differently than browsers. If it's not there, like in the case of browser
     // template rendering, wait for its addition.
     const menuItemsEl = this.querySelector('.overflow-menu-items');

From 562543d83366132f5daefae0ba0cb1cd05efec8b Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sun, 3 Mar 2024 14:27:20 +0100
Subject: [PATCH 38/74] remove cloneNode

---
 web_src/js/webcomponents/overflow-menu.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web_src/js/webcomponents/overflow-menu.js b/web_src/js/webcomponents/overflow-menu.js
index 6b9503b6e8f6c..3f6b388467050 100644
--- a/web_src/js/webcomponents/overflow-menu.js
+++ b/web_src/js/webcomponents/overflow-menu.js
@@ -31,7 +31,7 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
       for (const item of itemsToMove) {
         this.tippyContent.append(item);
       }
-      const content = this.tippyContent.cloneNode(true);
+      const content = this.tippyContent;
 
       // update existing tippy
       if (this.button?._tippy) {

From 5dfe109989aee7d760c7fc96e3d02a45e3426b16 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sun, 3 Mar 2024 14:30:19 +0100
Subject: [PATCH 39/74] remove last querySelector

---
 web_src/js/webcomponents/overflow-menu.js | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/web_src/js/webcomponents/overflow-menu.js b/web_src/js/webcomponents/overflow-menu.js
index 3f6b388467050..451705096fe60 100644
--- a/web_src/js/webcomponents/overflow-menu.js
+++ b/web_src/js/webcomponents/overflow-menu.js
@@ -12,30 +12,29 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
     }
 
     // move items in tippy back into the menu items for subsequent measurement
-    for (const item of this.tippyContent?.querySelectorAll('.item')) {
+    for (const item of this.tippyItems || []) {
       this.menuItemsEl.append(item);
     }
 
     // measure which items are partially outside the element and move them into the button menu
-    const itemsToMove = [];
+    this.tippyItems = [];
     const menuRight = this.getBoundingClientRect().right;
     for (const item of this.menuItemsEl.querySelectorAll('.item')) {
       const itemRight = item.getBoundingClientRect().right;
       if (menuRight - itemRight < 38) { // slightly less than width of .overflow-menu-button
-        itemsToMove.push(item);
+        this.tippyItems.push(item);
       }
     }
 
-    if (itemsToMove?.length) {
+    if (this.tippyItems?.length) {
       // move all items that overflow into tippy
-      for (const item of itemsToMove) {
+      for (const item of this.tippyItems) {
         this.tippyContent.append(item);
       }
-      const content = this.tippyContent;
 
       // update existing tippy
       if (this.button?._tippy) {
-        this.button._tippy.setContent(content);
+        this.button._tippy.setContent(this.tippyContent);
         return;
       }
 
@@ -51,7 +50,7 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
         interactive: true,
         placement: 'bottom-end',
         role: 'menu',
-        content,
+        content: this.tippyContent,
       });
     } else {
       const btn = this.querySelector('.overflow-menu-button');

From 90a53b12ba398dec52075f2a0af482796a273723 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sun, 3 Mar 2024 14:34:18 +0100
Subject: [PATCH 40/74] typo

---
 .eslintrc.yaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.eslintrc.yaml b/.eslintrc.yaml
index c7aba59de583c..d3a36c022de1a 100644
--- a/.eslintrc.yaml
+++ b/.eslintrc.yaml
@@ -828,7 +828,7 @@ rules:
   wc/guard-super-call: [2]
   wc/max-elements-per-file: [0]
   wc/no-child-traversal-in-attributechangedcallback: [2]
-  wc/no-child-traversal-in-connectedcallback: [0] # neccesary for custom elements in Vue
+  wc/no-child-traversal-in-connectedcallback: [0] # neccessary for custom elements in Vue
   wc/no-closed-shadow-root: [2]
   wc/no-constructor-attributes: [2]
   wc/no-constructor-params: [2]

From d67b19dfdba2acdf3e70f0e4069ccebbc4bbb5c3 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sun, 3 Mar 2024 14:35:38 +0100
Subject: [PATCH 41/74] Update .eslintrc.yaml

---
 .eslintrc.yaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.eslintrc.yaml b/.eslintrc.yaml
index d3a36c022de1a..cb004c0534679 100644
--- a/.eslintrc.yaml
+++ b/.eslintrc.yaml
@@ -828,7 +828,7 @@ rules:
   wc/guard-super-call: [2]
   wc/max-elements-per-file: [0]
   wc/no-child-traversal-in-attributechangedcallback: [2]
-  wc/no-child-traversal-in-connectedcallback: [0] # neccessary for custom elements in Vue
+  wc/no-child-traversal-in-connectedcallback: [0] # needed for custom elements in Vue where children are available during connectedCallback
   wc/no-closed-shadow-root: [2]
   wc/no-constructor-attributes: [2]
   wc/no-constructor-params: [2]

From 18308514d5e863bb1f5b3f4bb062060b8d2a4d53 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sun, 3 Mar 2024 14:37:40 +0100
Subject: [PATCH 42/74] remove unneeded class

---
 web_src/js/webcomponents/overflow-menu.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web_src/js/webcomponents/overflow-menu.js b/web_src/js/webcomponents/overflow-menu.js
index 451705096fe60..6fe695b31f76d 100644
--- a/web_src/js/webcomponents/overflow-menu.js
+++ b/web_src/js/webcomponents/overflow-menu.js
@@ -6,7 +6,7 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
   updateItems = throttle(100, () => {
     if (!this.tippyContent) {
       const div = document.createElement('div');
-      div.classList.add('overflow-menu-tippy-content', 'ui', 'vertical', 'menu', 'tippy-target');
+      div.classList.add('ui', 'vertical', 'menu', 'tippy-target');
       this.append(div);
       this.tippyContent = div;
     }

From 22e4e074493b0b60939f2089fa36d18e5959df44 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sun, 3 Mar 2024 14:40:00 +0100
Subject: [PATCH 43/74] tweak comment

---
 web_src/js/webcomponents/overflow-menu.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web_src/js/webcomponents/overflow-menu.js b/web_src/js/webcomponents/overflow-menu.js
index 6fe695b31f76d..24f77aee636f2 100644
--- a/web_src/js/webcomponents/overflow-menu.js
+++ b/web_src/js/webcomponents/overflow-menu.js
@@ -60,7 +60,7 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
   });
 
   init() {
-    // ResizeObserver triggers on initial render, so we don't manually call `updateItems` there which
+    // ResizeObserver triggers on initial render, so we don't manually call `updateItems` here which
     // also avoids a full-page FOUC in Firefox that happens when `updateItems` is called too soon.
     (new ResizeObserver((entries) => {
       for (const entry of entries) {

From 2d0ec1bd833d25687e7b0c76131427769ffb24f1 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sun, 3 Mar 2024 15:38:05 +0100
Subject: [PATCH 44/74] remove obsolete file

---
 web_src/js/webcomponents/defer.js | 3 ---
 1 file changed, 3 deletions(-)
 delete mode 100644 web_src/js/webcomponents/defer.js

diff --git a/web_src/js/webcomponents/defer.js b/web_src/js/webcomponents/defer.js
deleted file mode 100644
index 87d0fa2e21771..0000000000000
--- a/web_src/js/webcomponents/defer.js
+++ /dev/null
@@ -1,3 +0,0 @@
-// components here will load in a <script defer> element which may be necessary to prevent
-// whole-page FOUC
-import './overflow-menu.js';

From f37213a612f86c22fad442e84b419a3432dce098 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sun, 3 Mar 2024 16:32:45 +0100
Subject: [PATCH 45/74] use it in DashboardRepoList

---
 web_src/css/base.css                        | 16 ------
 web_src/js/components/DashboardRepoList.vue | 62 +++++++++++++--------
 web_src/js/webcomponents/overflow-menu.js   |  4 +-
 3 files changed, 42 insertions(+), 40 deletions(-)

diff --git a/web_src/css/base.css b/web_src/css/base.css
index cababf0ca28be..5e61e51193348 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -1354,22 +1354,6 @@ overflow-menu .overflow-menu-items .item {
   margin-bottom: 0 !important; /* reset fomantic's margin, because the active menu has special bottom border */
 }
 
-.repos-search {
-  padding-bottom: 0 !important;
-}
-
-.repos-filter {
-  margin-top: 0 !important;
-  border-bottom-width: 0 !important;
-  margin-bottom: 2px !important;
-  justify-content: space-evenly;
-}
-
-.ui.secondary.pointing.menu.repos-filter .item {
-  padding-left: 4.5px;
-  padding-right: 4.5px;
-}
-
 .activity-bar-graph {
   background-color: var(--color-primary);
   color: var(--color-primary-contrast);
diff --git a/web_src/js/components/DashboardRepoList.vue b/web_src/js/components/DashboardRepoList.vue
index 6f742bbea05aa..0278151bb607b 100644
--- a/web_src/js/components/DashboardRepoList.vue
+++ b/web_src/js/components/DashboardRepoList.vue
@@ -384,28 +384,30 @@ export default sfc; // activate the IDE's Vue plugin
             </div>
           </div>
         </div>
-        <div class="ui secondary tiny pointing borderless menu center grid repos-filter">
-          <a class="item" :class="{active: reposFilter === 'all'}" @click="changeReposFilter('all')">
-            {{ textAll }}
-            <div v-show="reposFilter === 'all'" class="ui circular mini grey label">{{ repoTypeCount }}</div>
-          </a>
-          <a class="item" :class="{active: reposFilter === 'sources'}" @click="changeReposFilter('sources')">
-            {{ textSources }}
-            <div v-show="reposFilter === 'sources'" class="ui circular mini grey label">{{ repoTypeCount }}</div>
-          </a>
-          <a class="item" :class="{active: reposFilter === 'forks'}" @click="changeReposFilter('forks')">
-            {{ textForks }}
-            <div v-show="reposFilter === 'forks'" class="ui circular mini grey label">{{ repoTypeCount }}</div>
-          </a>
-          <a class="item" :class="{active: reposFilter === 'mirrors'}" @click="changeReposFilter('mirrors')" v-if="isMirrorsEnabled">
-            {{ textMirrors }}
-            <div v-show="reposFilter === 'mirrors'" class="ui circular mini grey label">{{ repoTypeCount }}</div>
-          </a>
-          <a class="item" :class="{active: reposFilter === 'collaborative'}" @click="changeReposFilter('collaborative')">
-            {{ textCollaborative }}
-            <div v-show="reposFilter === 'collaborative'" class="ui circular mini grey label">{{ repoTypeCount }}</div>
-          </a>
-        </div>
+        <overflow-menu class="ui secondary pointing tabular borderless menu repos-filter">
+          <div class="overflow-menu-items tw-justify-center">
+            <a class="item" :class="{active: reposFilter === 'all'}" @click="changeReposFilter('all')">
+              {{ textAll }}
+              <div v-show="reposFilter === 'all'" class="ui circular mini grey label">{{ repoTypeCount }}</div>
+            </a>
+            <a class="item" :class="{active: reposFilter === 'sources'}" @click="changeReposFilter('sources')">
+              {{ textSources }}
+              <div v-show="reposFilter === 'sources'" class="ui circular mini grey label">{{ repoTypeCount }}</div>
+            </a>
+            <a class="item" :class="{active: reposFilter === 'forks'}" @click="changeReposFilter('forks')">
+              {{ textForks }}
+              <div v-show="reposFilter === 'forks'" class="ui circular mini grey label">{{ repoTypeCount }}</div>
+            </a>
+            <a class="item" :class="{active: reposFilter === 'mirrors'}" @click="changeReposFilter('mirrors')" v-if="isMirrorsEnabled">
+              {{ textMirrors }}
+              <div v-show="reposFilter === 'mirrors'" class="ui circular mini grey label">{{ repoTypeCount }}</div>
+            </a>
+            <a class="item" :class="{active: reposFilter === 'collaborative'}" @click="changeReposFilter('collaborative')">
+              {{ textCollaborative }}
+              <div v-show="reposFilter === 'collaborative'" class="ui circular mini grey label">{{ repoTypeCount }}</div>
+            </a>
+          </div>
+        </overflow-menu>
       </div>
       <div v-if="repos.length" class="ui attached table segment gt-rounded-bottom">
         <ul class="repo-owner-name-list">
@@ -501,6 +503,22 @@ ul li:not(:last-child) {
   border-bottom: 1px solid var(--color-secondary);
 }
 
+.repos-search {
+  padding-bottom: 0 !important;
+}
+
+.repos-filter {
+  padding-top: 0 !important;
+  margin-top: 0 !important;
+  border-bottom-width: 0 !important;
+  margin-bottom: 2px !important;
+}
+
+.repos-filter .item {
+  padding-left: 6px !important;
+  padding-right: 6px !important;
+}
+
 .repo-list-link {
   min-width: 0; /* for text truncation */
   display: flex;
diff --git a/web_src/js/webcomponents/overflow-menu.js b/web_src/js/webcomponents/overflow-menu.js
index 24f77aee636f2..769d4bcf2e8e6 100644
--- a/web_src/js/webcomponents/overflow-menu.js
+++ b/web_src/js/webcomponents/overflow-menu.js
@@ -18,9 +18,9 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
 
     // measure which items are partially outside the element and move them into the button menu
     this.tippyItems = [];
-    const menuRight = this.getBoundingClientRect().right;
+    const menuRight = this.offsetLeft + this.offsetWidth;
     for (const item of this.menuItemsEl.querySelectorAll('.item')) {
-      const itemRight = item.getBoundingClientRect().right;
+      const itemRight = item.offsetLeft + item.offsetWidth;
       if (menuRight - itemRight < 38) { // slightly less than width of .overflow-menu-button
         this.tippyItems.push(item);
       }

From 77a8e1e9c08ec66fed296aad8e1efadca08115bd Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sun, 3 Mar 2024 16:53:12 +0100
Subject: [PATCH 46/74] use requestAnimationFrame to avoid warning, add
 disconnects

---
 web_src/js/webcomponents/overflow-menu.js | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/web_src/js/webcomponents/overflow-menu.js b/web_src/js/webcomponents/overflow-menu.js
index 769d4bcf2e8e6..df9512a78370f 100644
--- a/web_src/js/webcomponents/overflow-menu.js
+++ b/web_src/js/webcomponents/overflow-menu.js
@@ -62,15 +62,18 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
   init() {
     // ResizeObserver triggers on initial render, so we don't manually call `updateItems` here which
     // also avoids a full-page FOUC in Firefox that happens when `updateItems` is called too soon.
-    (new ResizeObserver((entries) => {
+    this.resizeObserver = new ResizeObserver((entries) => {
       for (const entry of entries) {
         const newWidth = entry.contentBoxSize[0].inlineSize;
         if (newWidth !== this.lastWidth) {
-          this.updateItems();
+          requestAnimationFrame(() => {
+            this.updateItems();
+          });
           this.lastWidth = newWidth;
         }
       }
-    })).observe(this);
+    });
+    this.resizeObserver.observe(this);
   }
 
   connectedCallback() {
@@ -82,19 +85,24 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
       this.menuItemsEl = menuItemsEl;
       this.init();
     } else {
-      const observer = new MutationObserver((mutations) => {
+      this.mutationObserver = new MutationObserver((mutations) => {
         for (const mutation of mutations) {
           for (const node of mutation.addedNodes) {
             if (!isDocumentFragmentOrElementNode(node)) continue;
             if (node.classList.contains('overflow-menu-items')) {
               this.menuItemsEl = node;
-              observer?.disconnect();
+              this.mutationObserver?.disconnect();
               this.init();
             }
           }
         }
       });
-      observer.observe(this, {childList: true});
+      this.mutationObserver.observe(this, {childList: true});
     }
   }
+
+  disconnectedCallback() {
+    this.mutationObserver?.disconnect();
+    this.resizeObserver?.disconnect();
+  }
 });

From f13f8e054ec2f86a86395660aca35022e5673cd5 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Mon, 4 Mar 2024 22:58:36 +0100
Subject: [PATCH 47/74] use wc- prefix

---
 .../contributing/guidelines-frontend.en-us.md |   1 +
 .../contributing/guidelines-frontend.zh-cn.md |   1 +
 templates/devtest/gitea-ui.tmpl               |  14 +--
 templates/explore/navbar.tmpl                 |   6 +-
 templates/org/menu.tmpl                       |   6 +-
 templates/package/content/alpine.tmpl         |   4 +-
 templates/package/content/cargo.tmpl          |   4 +-
 templates/package/content/chef.tmpl           |   2 +-
 templates/package/content/composer.tmpl       |   2 +-
 templates/package/content/conan.tmpl          |   2 +-
 templates/package/content/conda.tmpl          |   6 +-
 templates/package/content/cran.tmpl           |   2 +-
 templates/package/content/debian.tmpl         |   4 +-
 templates/package/content/generic.tmpl        |   2 +-
 templates/package/content/go.tmpl             |   2 +-
 templates/package/content/helm.tmpl           |   2 +-
 templates/package/content/maven.tmpl          |   8 +-
 templates/package/content/npm.tmpl            |   2 +-
 templates/package/content/nuget.tmpl          |   2 +-
 templates/package/content/pub.tmpl            |   2 +-
 templates/package/content/pypi.tmpl           |   2 +-
 templates/package/content/rpm.tmpl            |   4 +-
 templates/package/content/rubygems.tmpl       |   4 +-
 templates/package/content/swift.tmpl          |   2 +-
 templates/package/content/vagrant.tmpl        |   2 +-
 templates/repo/diff/image_diff.tmpl           |   6 +-
 templates/repo/header.tmpl                    |   8 +-
 .../view_content/pull_merge_instruction.tmpl  |   2 +-
 templates/user/auth/link_account.tmpl         |   6 +-
 templates/user/auth/signin_navbar.tmpl        |   6 +-
 templates/user/auth/signup_openid_navbar.tmpl |   6 +-
 templates/user/overview/header.tmpl           |   6 +-
 web_src/css/base.css                          |   8 +-
 web_src/js/components/DashboardRepoList.vue   |   6 +-
 web_src/js/webcomponents/index.js             |   4 +-
 web_src/js/webcomponents/origin-url.js        |  22 ----
 web_src/js/webcomponents/origin-url.test.js   |  17 ---
 web_src/js/webcomponents/overflow-menu.js     | 108 ------------------
 webpack.config.js                             |   2 +-
 39 files changed, 75 insertions(+), 220 deletions(-)
 delete mode 100644 web_src/js/webcomponents/origin-url.js
 delete mode 100644 web_src/js/webcomponents/origin-url.test.js
 delete mode 100644 web_src/js/webcomponents/overflow-menu.js

diff --git a/docs/content/contributing/guidelines-frontend.en-us.md b/docs/content/contributing/guidelines-frontend.en-us.md
index a33a38a6f92b4..d91832736d5ee 100644
--- a/docs/content/contributing/guidelines-frontend.en-us.md
+++ b/docs/content/contributing/guidelines-frontend.en-us.md
@@ -49,6 +49,7 @@ We recommend [Google HTML/CSS Style Guide](https://google.github.io/styleguide/h
 11. Custom event names are recommended to use `ce-` prefix.
 12. Gitea's tailwind-style CSS classes use `gt-` prefix (`gt-relative`), while Gitea's own private framework-level CSS classes use `g-` prefix (`g-modal-confirm`).
 13. Avoid inline scripts & styles as much as possible, it's recommended to put JS code into JS files and use CSS classes. If inline scripts & styles are unavoidable, explain the reason why it can't be avoided.
+14. Gitea's web components use the `wc-` prefix.
 
 ### Accessibility / ARIA
 
diff --git a/docs/content/contributing/guidelines-frontend.zh-cn.md b/docs/content/contributing/guidelines-frontend.zh-cn.md
index 43f72b48083a0..4eb3e4d597cfe 100644
--- a/docs/content/contributing/guidelines-frontend.zh-cn.md
+++ b/docs/content/contributing/guidelines-frontend.zh-cn.md
@@ -49,6 +49,7 @@ HTML 页面由[Go HTML Template](https://pkg.go.dev/html/template)渲染。
 11. 推荐使用自定义事件名称前缀`ce-`。
 12. Gitea 的 tailwind-style CSS 类使用`gt-`前缀（`gt-relative`），而 Gitea 自身的私有框架级 CSS 类使用`g-`前缀（`g-modal-confirm`）。
 13. 尽量避免内联脚本和样式，建议将JS代码放入JS文件中并使用CSS类。如果内联脚本和样式不可避免，请解释无法避免的原因。
+1. Gitea 的 Web 组件使用 `wc-` 前缀。
 
 ### 可访问性 / ARIA
 
diff --git a/templates/devtest/gitea-ui.tmpl b/templates/devtest/gitea-ui.tmpl
index f04986c05627e..a2cf7b29a2e34 100644
--- a/templates/devtest/gitea-ui.tmpl
+++ b/templates/devtest/gitea-ui.tmpl
@@ -105,15 +105,15 @@
 	</div>
 
 	<div>
-		<h1>&lt;origin-url&gt;</h1>
-		<div><origin-url data-url="test/url"></origin-url></div>
-		<div><origin-url data-url="/test/url"></origin-url></div>
+		<h1>&lt;wc-origin-url&gt;</h1>
+		<div><wc-origin-url data-url="test/url"></wc-origin-url></div>
+		<div><wc-origin-url data-url="/test/url"></wc-origin-url></div>
 	</div>
 
 	<div>
-		<h1>&lt;overflow-menu&gt;</h1>
-		<overflow-menu class="ui secondary pointing tabular borderless menu">
-			<div class="overflow-menu-items">
+		<h1>&lt;wc-overflow-menu&gt;</h1>
+		<wc-overflow-menu class="ui secondary pointing tabular borderless menu">
+			<div class="wc-overflow-menu-items">
 				<a class="active item">item</a>
 				<a class="item">item 1</a>
 				<a class="item">item 2</a>
@@ -134,7 +134,7 @@
 				<a class="item">item 17</a>
 				<a class="item">item 18</a>
 			</div>
-		</overflow-menu>
+		</wc-overflow-menu>
 	</div>
 
 	<div>
diff --git a/templates/explore/navbar.tmpl b/templates/explore/navbar.tmpl
index 8841613b9f128..f32325cd354cb 100644
--- a/templates/explore/navbar.tmpl
+++ b/templates/explore/navbar.tmpl
@@ -1,5 +1,5 @@
-<overflow-menu class="ui secondary pointing tabular top attached borderless menu navbar">
-	<div class="overflow-menu-items tw-justify-center">
+<wc-overflow-menu class="ui secondary pointing tabular top attached borderless menu navbar">
+	<div class="wc-overflow-menu-items tw-justify-center">
 		<a class="{{if .PageIsExploreRepositories}}active {{end}}item" href="{{AppSubUrl}}/explore/repos">
 			{{svg "octicon-repo"}} {{ctx.Locale.Tr "explore.repos"}}
 		</a>
@@ -17,4 +17,4 @@
 		</a>
 		{{end}}
 	</div>
-</overflow-menu>
+</wc-overflow-menu>
diff --git a/templates/org/menu.tmpl b/templates/org/menu.tmpl
index 8eacc17e82a96..ff782f71d9685 100644
--- a/templates/org/menu.tmpl
+++ b/templates/org/menu.tmpl
@@ -1,6 +1,6 @@
 <div class="ui container">
-	<overflow-menu class="ui secondary pointing tabular borderless menu">
-		<div class="overflow-menu-items">
+	<wc-overflow-menu class="ui secondary pointing tabular borderless menu">
+		<div class="wc-overflow-menu-items">
 			<a class="{{if .PageIsViewRepositories}}active {{end}}item" href="{{$.Org.HomeLink}}">
 				{{svg "octicon-repo"}} {{ctx.Locale.Tr "user.repositories"}}
 				{{if .RepoCount}}
@@ -45,5 +45,5 @@
 			</a>
 			{{end}}
 		</div>
-	</overflow-menu>
+	</wc-overflow-menu>
 </div>
diff --git a/templates/package/content/alpine.tmpl b/templates/package/content/alpine.tmpl
index 5c144b977903c..a6438b6ead536 100644
--- a/templates/package/content/alpine.tmpl
+++ b/templates/package/content/alpine.tmpl
@@ -4,12 +4,12 @@
 		<div class="ui form">
 			<div class="field">
 				<label>{{svg "octicon-code"}} {{ctx.Locale.Tr "packages.alpine.registry"}}</label>
-				<div class="markup"><pre class="code-block"><code><origin-url data-url="{{AppSubUrl}}/api/packages/{{$.PackageDescriptor.Owner.Name}}/alpine"></origin-url>/$branch/$repository</code></pre></div>
+				<div class="markup"><pre class="code-block"><code><wc-origin-url data-url="{{AppSubUrl}}/api/packages/{{$.PackageDescriptor.Owner.Name}}/alpine"></wc-origin-url>/$branch/$repository</code></pre></div>
 				<p>{{ctx.Locale.Tr "packages.alpine.registry.info"}}</p>
 			</div>
 			<div class="field">
 				<label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.alpine.registry.key"}}</label>
-				<div class="markup"><pre class="code-block"><code>curl -JO <origin-url data-url="{{AppSubUrl}}/api/packages/{{$.PackageDescriptor.Owner.Name}}/alpine/key"></origin-url></code></pre></div>
+				<div class="markup"><pre class="code-block"><code>curl -JO <wc-origin-url data-url="{{AppSubUrl}}/api/packages/{{$.PackageDescriptor.Owner.Name}}/alpine/key"></wc-origin-url></code></pre></div>
 			</div>
 			<div class="field">
 				<label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.alpine.install"}}</label>
diff --git a/templates/package/content/cargo.tmpl b/templates/package/content/cargo.tmpl
index 7fd88a284a296..498fa54095d9a 100644
--- a/templates/package/content/cargo.tmpl
+++ b/templates/package/content/cargo.tmpl
@@ -8,8 +8,8 @@
 default = "gitea"
 
 [registries.gitea]
-index = "sparse+<origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/cargo/"></origin-url>" # Sparse index
-# index = "<origin-url data-url="{{AppSubUrl}}/{{.PackageDescriptor.Owner.Name}}/_cargo-index.git"></origin-url>" # Git
+index = "sparse+<wc-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/cargo/"></wc-origin-url>" # Sparse index
+# index = "<wc-origin-url data-url="{{AppSubUrl}}/{{.PackageDescriptor.Owner.Name}}/_cargo-index.git"></wc-origin-url>" # Git
 
 [net]
 git-fetch-with-cli = true</code></pre></div>
diff --git a/templates/package/content/chef.tmpl b/templates/package/content/chef.tmpl
index 03ce9f852bde8..a3cbf67acc940 100644
--- a/templates/package/content/chef.tmpl
+++ b/templates/package/content/chef.tmpl
@@ -4,7 +4,7 @@
 		<div class="ui form">
 			<div class="field">
 				<label>{{svg "octicon-code"}} {{ctx.Locale.Tr "packages.chef.registry"}}</label>
-				<div class="markup"><pre class="code-block"><code>knife[:supermarket_site] = '<origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/chef"></origin-url>'</code></pre></div>
+				<div class="markup"><pre class="code-block"><code>knife[:supermarket_site] = '<wc-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/chef"></wc-origin-url>'</code></pre></div>
 			</div>
 			<div class="field">
 				<label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.chef.install"}}</label>
diff --git a/templates/package/content/composer.tmpl b/templates/package/content/composer.tmpl
index c2dc6345c3764..1f7f0605f9c05 100644
--- a/templates/package/content/composer.tmpl
+++ b/templates/package/content/composer.tmpl
@@ -7,7 +7,7 @@
 				<div class="markup"><pre class="code-block"><code>{
 	"repositories": [{
 			"type": "composer",
-			"url": "<origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/composer"></origin-url>"
+			"url": "<wc-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/composer"></wc-origin-url>"
 		}
 	]
 }</code></pre></div>
diff --git a/templates/package/content/conan.tmpl b/templates/package/content/conan.tmpl
index b68a45fde30d1..171209396c4da 100644
--- a/templates/package/content/conan.tmpl
+++ b/templates/package/content/conan.tmpl
@@ -4,7 +4,7 @@
 		<div class="ui form">
 			<div class="field">
 				<label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.conan.registry"}}</label>
-				<div class="markup"><pre class="code-block"><code>conan remote add gitea <origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/conan"></origin-url></code></pre></div>
+				<div class="markup"><pre class="code-block"><code>conan remote add gitea <wc-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/conan"></wc-origin-url></code></pre></div>
 			</div>
 			<div class="field">
 				<label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.conan.install"}}</label>
diff --git a/templates/package/content/conda.tmpl b/templates/package/content/conda.tmpl
index 031b51aa10805..89370e6fb493e 100644
--- a/templates/package/content/conda.tmpl
+++ b/templates/package/content/conda.tmpl
@@ -4,11 +4,11 @@
 		<div class="ui form">
 			<div class="field">
 				<label>{{svg "octicon-code"}} {{ctx.Locale.Tr "packages.conda.registry"}}</label>
-				<div class="markup"><pre class="code-block"><code>channel_alias: <origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/conda"></origin-url>
+				<div class="markup"><pre class="code-block"><code>channel_alias: <wc-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/conda"></wc-origin-url>
 channels:
-&#32;&#32;- <origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/conda"></origin-url>
+&#32;&#32;- <wc-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/conda"></wc-origin-url>
 default_channels:
-&#32;&#32;- <origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/conda"></origin-url></code></pre></div>
+&#32;&#32;- <wc-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/conda"></wc-origin-url></code></pre></div>
 			</div>
 			<div class="field">
 				<label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.conda.install"}}</label>
diff --git a/templates/package/content/cran.tmpl b/templates/package/content/cran.tmpl
index ae58e6f334c75..a21891cc3530f 100644
--- a/templates/package/content/cran.tmpl
+++ b/templates/package/content/cran.tmpl
@@ -4,7 +4,7 @@
 		<div class="ui form">
 			<div class="field">
 				<label>{{svg "octicon-code"}} {{ctx.Locale.Tr "packages.cran.registry"}}</label>
-				<div class="markup"><pre class="code-block"><code>options("repos" = c(getOption("repos"), c(gitea="<origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/cran"></origin-url>")))</code></pre></div>
+				<div class="markup"><pre class="code-block"><code>options("repos" = c(getOption("repos"), c(gitea="<wc-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/cran"></wc-origin-url>")))</code></pre></div>
 			</div>
 			<div class="field">
 				<label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.cran.install"}}</label>
diff --git a/templates/package/content/debian.tmpl b/templates/package/content/debian.tmpl
index 73b82578357fd..1f0e1bfa0d50a 100644
--- a/templates/package/content/debian.tmpl
+++ b/templates/package/content/debian.tmpl
@@ -4,8 +4,8 @@
 		<div class="ui form">
 			<div class="field">
 				<label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.debian.registry"}}</label>
-				<div class="markup"><pre class="code-block"><code>sudo curl <origin-url data-url="{{AppSubUrl}}/api/packages/{{$.PackageDescriptor.Owner.Name}}/debian/repository.key"></origin-url> -o /etc/apt/keyrings/gitea-{{$.PackageDescriptor.Owner.Name}}.asc
-echo "deb [signed-by=/etc/apt/keyrings/gitea-{{$.PackageDescriptor.Owner.Name}}.asc] <origin-url data-url="{{AppSubUrl}}/api/packages/{{$.PackageDescriptor.Owner.Name}}/debian"></origin-url> $distribution $component" | sudo tee -a /etc/apt/sources.list.d/gitea.list
+				<div class="markup"><pre class="code-block"><code>sudo curl <wc-origin-url data-url="{{AppSubUrl}}/api/packages/{{$.PackageDescriptor.Owner.Name}}/debian/repository.key"></wc-origin-url> -o /etc/apt/keyrings/gitea-{{$.PackageDescriptor.Owner.Name}}.asc
+echo "deb [signed-by=/etc/apt/keyrings/gitea-{{$.PackageDescriptor.Owner.Name}}.asc] <wc-origin-url data-url="{{AppSubUrl}}/api/packages/{{$.PackageDescriptor.Owner.Name}}/debian"></wc-origin-url> $distribution $component" | sudo tee -a /etc/apt/sources.list.d/gitea.list
 sudo apt update</code></pre></div>
 				<p>{{ctx.Locale.Tr "packages.debian.registry.info"}}</p>
 			</div>
diff --git a/templates/package/content/generic.tmpl b/templates/package/content/generic.tmpl
index 2fd952105f244..6c697f72f4632 100644
--- a/templates/package/content/generic.tmpl
+++ b/templates/package/content/generic.tmpl
@@ -6,7 +6,7 @@
 				<label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.generic.download"}}</label>
 				<div class="markup"><pre class="code-block"><code>
 {{- range .PackageDescriptor.Files -}}
-curl -OJ <origin-url data-url="{{AppSubUrl}}/api/packages/{{$.PackageDescriptor.Owner.Name}}/generic/{{$.PackageDescriptor.Package.Name}}/{{$.PackageDescriptor.Version.Version}}/{{.File.Name}}"></origin-url>
+curl -OJ <wc-origin-url data-url="{{AppSubUrl}}/api/packages/{{$.PackageDescriptor.Owner.Name}}/generic/{{$.PackageDescriptor.Package.Name}}/{{$.PackageDescriptor.Version.Version}}/{{.File.Name}}"></wc-origin-url>
 {{end -}}
 				</code></pre></div>
 			</div>
diff --git a/templates/package/content/go.tmpl b/templates/package/content/go.tmpl
index 80d1ab231a433..5b9e0cbe94416 100644
--- a/templates/package/content/go.tmpl
+++ b/templates/package/content/go.tmpl
@@ -4,7 +4,7 @@
 		<div class="ui form">
 			<div class="field">
 				<label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.go.install"}}</label>
-				<div class="markup"><pre class="code-block"><code>GOPROXY=<origin-url data-url="{{AppSubUrl}}/api/packages/{{$.PackageDescriptor.Owner.Name}}/go"></origin-url> go install {{$.PackageDescriptor.Package.Name}}@{{$.PackageDescriptor.Version.Version}}</code></pre></div>
+				<div class="markup"><pre class="code-block"><code>GOPROXY=<wc-origin-url data-url="{{AppSubUrl}}/api/packages/{{$.PackageDescriptor.Owner.Name}}/go"></wc-origin-url> go install {{$.PackageDescriptor.Package.Name}}@{{$.PackageDescriptor.Version.Version}}</code></pre></div>
 			</div>
 			<div class="field">
 				<label>{{ctx.Locale.Tr "packages.registry.documentation" "Go" "https://docs.gitea.com/usage/packages/go"}}</label>
diff --git a/templates/package/content/helm.tmpl b/templates/package/content/helm.tmpl
index da846e934db34..8fc86d03550e0 100644
--- a/templates/package/content/helm.tmpl
+++ b/templates/package/content/helm.tmpl
@@ -4,7 +4,7 @@
 		<div class="ui form">
 			<div class="field">
 				<label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.helm.registry"}}</label>
-				<div class="markup"><pre class="code-block"><code>helm repo add {{AppDomain}} <origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/helm"></origin-url>
+				<div class="markup"><pre class="code-block"><code>helm repo add {{AppDomain}} <wc-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/helm"></wc-origin-url>
 helm repo update</code></pre></div>
 			</div>
 			<div class="field">
diff --git a/templates/package/content/maven.tmpl b/templates/package/content/maven.tmpl
index 3a7de335de88f..3925803730ff6 100644
--- a/templates/package/content/maven.tmpl
+++ b/templates/package/content/maven.tmpl
@@ -7,19 +7,19 @@
 				<div class="markup"><pre class="code-block"><code>&lt;repositories&gt;
 	&lt;repository&gt;
 		&lt;id&gt;gitea&lt;/id&gt;
-			&lt;url&gt;<origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/maven"></origin-url>&lt;/url&gt;
+			&lt;url&gt;<wc-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/maven"></wc-origin-url>&lt;/url&gt;
 	&lt;/repository&gt;
 &lt;/repositories&gt;
 
 &lt;distributionManagement&gt;
 	&lt;repository&gt;
 		&lt;id&gt;gitea&lt;/id&gt;
-		&lt;url&gt;<origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/maven"></origin-url>&lt;/url&gt;
+		&lt;url&gt;<wc-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/maven"></wc-origin-url>&lt;/url&gt;
 	&lt;/repository&gt;
 
 	&lt;snapshotRepository&gt;
 		&lt;id&gt;gitea&lt;/id&gt;
-		&lt;url&gt;<origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/maven"></origin-url>&lt;/url&gt;
+		&lt;url&gt;<wc-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/maven"></wc-origin-url>&lt;/url&gt;
 	&lt;/snapshotRepository&gt;
 &lt;/distributionManagement&gt;</code></pre></div>
 			</div>
@@ -37,7 +37,7 @@
 			</div>
 			<div class="field">
 				<label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.maven.download"}}</label>
-				<div class="markup"><pre class="code-block"><code>mvn dependency:get -DremoteRepositories=<origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/maven"></origin-url> -Dartifact={{.PackageDescriptor.Metadata.GroupID}}:{{.PackageDescriptor.Metadata.ArtifactID}}:{{.PackageDescriptor.Version.Version}}</code></pre></div>
+				<div class="markup"><pre class="code-block"><code>mvn dependency:get -DremoteRepositories=<wc-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/maven"></wc-origin-url> -Dartifact={{.PackageDescriptor.Metadata.GroupID}}:{{.PackageDescriptor.Metadata.ArtifactID}}:{{.PackageDescriptor.Version.Version}}</code></pre></div>
 			</div>
 			<div class="field">
 				<label>{{ctx.Locale.Tr "packages.registry.documentation" "Maven" "https://docs.gitea.com/usage/packages/maven/"}}</label>
diff --git a/templates/package/content/npm.tmpl b/templates/package/content/npm.tmpl
index a78a07d874673..d0f8a337c1e04 100644
--- a/templates/package/content/npm.tmpl
+++ b/templates/package/content/npm.tmpl
@@ -4,7 +4,7 @@
 		<div class="ui form">
 			<div class="field">
 				<label>{{svg "octicon-code"}} {{ctx.Locale.Tr "packages.npm.registry"}}</label>
-				<div class="markup"><pre class="code-block"><code>{{if .PackageDescriptor.Metadata.Scope}}{{.PackageDescriptor.Metadata.Scope}}:{{end}}registry=<origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/npm/"></origin-url></code></pre></div>
+				<div class="markup"><pre class="code-block"><code>{{if .PackageDescriptor.Metadata.Scope}}{{.PackageDescriptor.Metadata.Scope}}:{{end}}registry=<wc-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/npm/"></wc-origin-url></code></pre></div>
 			</div>
 			<div class="field">
 				<label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.npm.install"}}</label>
diff --git a/templates/package/content/nuget.tmpl b/templates/package/content/nuget.tmpl
index 0911260fbaa21..cfa12fbea6dec 100644
--- a/templates/package/content/nuget.tmpl
+++ b/templates/package/content/nuget.tmpl
@@ -4,7 +4,7 @@
 		<div class="ui form">
 			<div class="field">
 				<label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.nuget.registry"}}</label>
-				<div class="markup"><pre class="code-block"><code>dotnet nuget add source --name {{.PackageDescriptor.Owner.Name}} --username your_username --password your_token <origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/nuget/index.json"></origin-url></code></pre></div>
+				<div class="markup"><pre class="code-block"><code>dotnet nuget add source --name {{.PackageDescriptor.Owner.Name}} --username your_username --password your_token <wc-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/nuget/index.json"></wc-origin-url></code></pre></div>
 			</div>
 			<div class="field">
 				<label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.nuget.install"}}</label>
diff --git a/templates/package/content/pub.tmpl b/templates/package/content/pub.tmpl
index f2c7ac938faad..a2c89336c30d1 100644
--- a/templates/package/content/pub.tmpl
+++ b/templates/package/content/pub.tmpl
@@ -4,7 +4,7 @@
 		<div class="ui form">
 			<div class="field">
 				<label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.pub.install"}}</label>
-				<div class="markup"><pre class="code-block"><code>dart pub add {{.PackageDescriptor.Package.Name}}:{{.PackageDescriptor.Version.Version}} --hosted-url=<origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/pub/"></origin-url></code></pre></div>
+				<div class="markup"><pre class="code-block"><code>dart pub add {{.PackageDescriptor.Package.Name}}:{{.PackageDescriptor.Version.Version}} --hosted-url=<wc-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/pub/"></wc-origin-url></code></pre></div>
 			</div>
 			<div class="field">
 				<label>{{ctx.Locale.Tr "packages.registry.documentation" "Pub" "https://docs.gitea.com/usage/packages/pub/"}}</label>
diff --git a/templates/package/content/pypi.tmpl b/templates/package/content/pypi.tmpl
index 817fced97b960..9bacdf7c194e2 100644
--- a/templates/package/content/pypi.tmpl
+++ b/templates/package/content/pypi.tmpl
@@ -4,7 +4,7 @@
 		<div class="ui form">
 			<div class="field">
 				<label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.pypi.install"}}</label>
-				<div class="markup"><pre class="code-block"><code>pip install --index-url <origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/pypi/simple/"></origin-url> {{.PackageDescriptor.Package.Name}}</code></pre></div>
+				<div class="markup"><pre class="code-block"><code>pip install --index-url <wc-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/pypi/simple/"></wc-origin-url> {{.PackageDescriptor.Package.Name}}</code></pre></div>
 			</div>
 			<div class="field">
 				<label>{{ctx.Locale.Tr "packages.registry.documentation" "PyPI" "https://docs.gitea.com/usage/packages/pypi/"}}</label>
diff --git a/templates/package/content/rpm.tmpl b/templates/package/content/rpm.tmpl
index 3faa8a0dc75a5..a83db37e5c343 100644
--- a/templates/package/content/rpm.tmpl
+++ b/templates/package/content/rpm.tmpl
@@ -11,13 +11,13 @@
 # {{ctx.Locale.Tr "packages.rpm.distros.redhat"}}
 {{- range $group := .Groups}}
 	{{- if $group}}{{$group = print "/" $group}}{{end}}
-dnf config-manager --add-repo <origin-url data-url="{{AppSubUrl}}/api/packages/{{$.PackageDescriptor.Owner.Name}}/rpm{{$group}}.repo"></origin-url>
+dnf config-manager --add-repo <wc-origin-url data-url="{{AppSubUrl}}/api/packages/{{$.PackageDescriptor.Owner.Name}}/rpm{{$group}}.repo"></wc-origin-url>
 {{- end}}
 
 # {{ctx.Locale.Tr "packages.rpm.distros.suse"}}
 {{- range $group := .Groups}}
 	{{- if $group}}{{$group = print "/" $group}}{{end}}
-zypper addrepo <origin-url data-url="{{AppSubUrl}}/api/packages/{{$.PackageDescriptor.Owner.Name}}/rpm{{$group}}.repo"></origin-url>
+zypper addrepo <wc-origin-url data-url="{{AppSubUrl}}/api/packages/{{$.PackageDescriptor.Owner.Name}}/rpm{{$group}}.repo"></wc-origin-url>
 {{- end}}</code></pre></div>
 			</div>
 			<div class="field">
diff --git a/templates/package/content/rubygems.tmpl b/templates/package/content/rubygems.tmpl
index 610dfc78563dd..381f39cf8a445 100644
--- a/templates/package/content/rubygems.tmpl
+++ b/templates/package/content/rubygems.tmpl
@@ -4,11 +4,11 @@
 		<div class="ui form">
 			<div class="field">
 				<label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.rubygems.install"}}:</label>
-				<div class="markup"><pre class="code-block"><code>gem install {{.PackageDescriptor.Package.Name}} --version &quot;{{.PackageDescriptor.Version.Version}}&quot; --source &quot;<origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/rubygems"></origin-url>&quot;</code></pre></div>
+				<div class="markup"><pre class="code-block"><code>gem install {{.PackageDescriptor.Package.Name}} --version &quot;{{.PackageDescriptor.Version.Version}}&quot; --source &quot;<wc-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/rubygems"></wc-origin-url>&quot;</code></pre></div>
 			</div>
 			<div class="field">
 				<label>{{svg "octicon-code"}} {{ctx.Locale.Tr "packages.rubygems.install2"}}:</label>
-				<div class="markup"><pre class="code-block"><code>source "<origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/rubygems"></origin-url>" do
+				<div class="markup"><pre class="code-block"><code>source "<wc-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/rubygems"></wc-origin-url>" do
 	gem "{{.PackageDescriptor.Package.Name}}", "{{.PackageDescriptor.Version.Version}}"
 end</code></pre></div>
 			</div>
diff --git a/templates/package/content/swift.tmpl b/templates/package/content/swift.tmpl
index aacbc83980f18..8bef02082a011 100644
--- a/templates/package/content/swift.tmpl
+++ b/templates/package/content/swift.tmpl
@@ -4,7 +4,7 @@
 		<div class="ui form">
 			<div class="field">
 				<label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.swift.registry"}}</label>
-				<div class="markup"><pre class="code-block"><code>swift package-registry set <origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/swift"></origin-url></code></pre></div>
+				<div class="markup"><pre class="code-block"><code>swift package-registry set <wc-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/swift"></wc-origin-url></code></pre></div>
 			</div>
 			<div class="field">
 				<label>{{svg "octicon-code"}} {{ctx.Locale.Tr "packages.swift.install"}}</label>
diff --git a/templates/package/content/vagrant.tmpl b/templates/package/content/vagrant.tmpl
index 7666284b87126..d837cccbdadf0 100644
--- a/templates/package/content/vagrant.tmpl
+++ b/templates/package/content/vagrant.tmpl
@@ -4,7 +4,7 @@
 		<div class="ui form">
 			<div class="field">
 				<label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.vagrant.install"}}</label>
-				<div class="markup"><pre class="code-block"><code>vagrant box add --box-version {{.PackageDescriptor.Version.Version}} "<origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/vagrant/{{.PackageDescriptor.Package.Name}}"></origin-url>"</code></pre></div>
+				<div class="markup"><pre class="code-block"><code>vagrant box add --box-version {{.PackageDescriptor.Version.Version}} "<wc-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/vagrant/{{.PackageDescriptor.Package.Name}}"></wc-origin-url>"</code></pre></div>
 			</div>
 			<div class="field">
 				<label>{{ctx.Locale.Tr "packages.registry.documentation" "Vagrant" "https://docs.gitea.com/usage/packages/vagrant/"}}</label>
diff --git a/templates/repo/diff/image_diff.tmpl b/templates/repo/diff/image_diff.tmpl
index 9ad7916398a41..4be6c0806ff75 100644
--- a/templates/repo/diff/image_diff.tmpl
+++ b/templates/repo/diff/image_diff.tmpl
@@ -7,15 +7,15 @@
 			data-mime-before="{{.sniffedTypeBase.GetMimeType}}"
 			data-mime-after="{{.sniffedTypeHead.GetMimeType}}"
 		>
-			<overflow-menu class="ui secondary pointing tabular top attached borderless menu">
-				<div class="overflow-menu-items tw-justify-center">
+			<wc-overflow-menu class="ui secondary pointing tabular top attached borderless menu">
+				<div class="wc-overflow-menu-items tw-justify-center">
 					<a class="item active" data-tab="diff-side-by-side-{{.file.Index}}">{{ctx.Locale.Tr "repo.diff.image.side_by_side"}}</a>
 					{{if and .blobBase .blobHead}}
 					<a class="item" data-tab="diff-swipe-{{.file.Index}}">{{ctx.Locale.Tr "repo.diff.image.swipe"}}</a>
 					<a class="item" data-tab="diff-overlay-{{.file.Index}}">{{ctx.Locale.Tr "repo.diff.image.overlay"}}</a>
 					{{end}}
 				</div>
-			</overflow-menu>
+			</wc-overflow-menu>
 			<div class="image-diff-tabs is-loading">
 				<div class="ui bottom attached tab image-diff-container active" data-tab="diff-side-by-side-{{.file.Index}}">
 					<div class="diff-side-by-side">
diff --git a/templates/repo/header.tmpl b/templates/repo/header.tmpl
index 6e0a9985f704b..cce4edcf721db 100644
--- a/templates/repo/header.tmpl
+++ b/templates/repo/header.tmpl
@@ -126,9 +126,9 @@
 		{{if .IsGenerated}}<div class="fork-flag">{{ctx.Locale.Tr "repo.generated_from"}} <a href="{{(.TemplateRepo ctx).Link}}">{{(.TemplateRepo ctx).FullName}}</a></div>{{end}}
 	</div>
 {{end}}
-	<overflow-menu class="ui container secondary pointing tabular top attached borderless menu navbar tw-pt-0 tw-my-0">
+	<wc-overflow-menu class="ui container secondary pointing tabular top attached borderless menu navbar tw-pt-0 tw-my-0">
 		{{if not (or .Repository.IsBeingCreated .Repository.IsBroken)}}
-			<div class="overflow-menu-items">
+			<div class="wc-overflow-menu-items">
 				{{if .Permission.CanRead $.UnitTypeCode}}
 				<a class="{{if .PageIsViewCode}}active {{end}}item" href="{{.RepoLink}}{{if and (ne .BranchName .Repository.DefaultBranch) (not $.PageIsWiki)}}/src/{{.BranchNameSubURL}}{{end}}">
 					{{svg "octicon-code"}} {{ctx.Locale.Tr "repo.code"}}
@@ -220,12 +220,12 @@
 				{{end}}
 			</div>
 		{{else if .Permission.IsAdmin}}
-			<div class="overflow-menu-items">
+			<div class="wc-overflow-menu-items">
 				<a class="{{if .PageIsRepoSettings}}active {{end}} item" href="{{.RepoLink}}/settings">
 					{{svg "octicon-tools"}} {{ctx.Locale.Tr "repo.settings"}}
 				</a>
 			</div>
 		{{end}}
-	</overflow-menu>
+	</wc-overflow-menu>
 	<div class="ui tabs divider"></div>
 </div>
diff --git a/templates/repo/issue/view_content/pull_merge_instruction.tmpl b/templates/repo/issue/view_content/pull_merge_instruction.tmpl
index 12b0c4b4e0fd3..3a936faf20491 100644
--- a/templates/repo/issue/view_content/pull_merge_instruction.tmpl
+++ b/templates/repo/issue/view_content/pull_merge_instruction.tmpl
@@ -8,7 +8,7 @@
 	{{end}}
 	<div class="ui secondary segment">
 		{{if eq .PullRequest.Flow 0}}
-		<div>git fetch -u {{if ne .PullRequest.HeadRepo.ID .PullRequest.BaseRepo.ID}}<origin-url data-url="{{.PullRequest.HeadRepo.Link}}"></origin-url>{{else}}origin{{end}} {{.PullRequest.HeadBranch}}:{{$localBranch}}</div>
+		<div>git fetch -u {{if ne .PullRequest.HeadRepo.ID .PullRequest.BaseRepo.ID}}<wc-origin-url data-url="{{.PullRequest.HeadRepo.Link}}"></wc-origin-url>{{else}}origin{{end}} {{.PullRequest.HeadBranch}}:{{$localBranch}}</div>
 		<div>git checkout {{$localBranch}}</div>
 		{{else}}
 		<div>git fetch -u origin {{.GetGitRefName}}:{{$localBranch}}</div>
diff --git a/templates/user/auth/link_account.tmpl b/templates/user/auth/link_account.tmpl
index 81ea92c9594a3..38e8172d615ce 100644
--- a/templates/user/auth/link_account.tmpl
+++ b/templates/user/auth/link_account.tmpl
@@ -1,7 +1,7 @@
 {{template "base/head" .}}
 <div role="main" aria-label="{{.Title}}" class="page-content user link-account">
-	<overflow-menu class="ui secondary pointing tabular top attached borderless menu navbar tw-bg-header-wrapper">
-		<div class="overflow-menu-items tw-justify-center">
+	<wc-overflow-menu class="ui secondary pointing tabular top attached borderless menu navbar tw-bg-header-wrapper">
+		<div class="wc-overflow-menu-items tw-justify-center">
 			<!-- TODO handle .ShowRegistrationButton once other login bugs are fixed -->
 			{{if not .AllowOnlyInternalRegistration}}
 				<a class="item {{if not .user_exists}}active{{end}}"
@@ -14,7 +14,7 @@
 				{{ctx.Locale.Tr "auth.oauth_signin_tab"}}
 			</a>
 		</div>
-	</overflow-menu>
+	</wc-overflow-menu>
 	<div class="ui middle very relaxed page grid">
 		<div class="column">
 			<div class="ui tab {{if not .user_exists}}active{{end}}"
diff --git a/templates/user/auth/signin_navbar.tmpl b/templates/user/auth/signin_navbar.tmpl
index a5768830652f6..efdbaaa6b9c7a 100644
--- a/templates/user/auth/signin_navbar.tmpl
+++ b/templates/user/auth/signin_navbar.tmpl
@@ -1,6 +1,6 @@
 {{if or .EnableOpenIDSignIn .EnableSSPI}}
-<overflow-menu class="ui secondary pointing tabular top attached borderless menu navbar tw-bg-header-wrapper">
-	<div class="overflow-menu-items tw-justify-center">
+<wc-overflow-menu class="ui secondary pointing tabular top attached borderless menu navbar tw-bg-header-wrapper">
+	<div class="wc-overflow-menu-items tw-justify-center">
 		<a class="{{if .PageIsLogin}}active {{end}}item" rel="nofollow" href="{{AppSubUrl}}/user/login">
 			{{ctx.Locale.Tr "auth.login_userpass"}}
 		</a>
@@ -20,5 +20,5 @@
 		</a>
 		{{end}}
 	</div>
-</overflow-menu>
+</wc-overflow-menu>
 {{end}}
diff --git a/templates/user/auth/signup_openid_navbar.tmpl b/templates/user/auth/signup_openid_navbar.tmpl
index 9cf81b048f8a8..e6a758750905e 100644
--- a/templates/user/auth/signup_openid_navbar.tmpl
+++ b/templates/user/auth/signup_openid_navbar.tmpl
@@ -1,5 +1,5 @@
-<overflow-menu class="ui secondary pointing tabular top attached borderless menu navbar tw-bg-header-wrapper">
-	<div class="overflow-menu-items tw-justify-center">
+<wc-overflow-menu class="ui secondary pointing tabular top attached borderless menu navbar tw-bg-header-wrapper">
+	<div class="wc-overflow-menu-items tw-justify-center">
 		<a class="{{if .PageIsOpenIDConnect}}active {{end}}item" href="{{AppSubUrl}}/user/openid/connect">
 			{{ctx.Locale.Tr "auth.openid_connect_title"}}
 		</a>
@@ -9,4 +9,4 @@
 			</a>
 		{{end}}
 	</div>
-</overflow-menu>
+</wc-overflow-menu>
diff --git a/templates/user/overview/header.tmpl b/templates/user/overview/header.tmpl
index 64d7254c6d561..ff846e04a9904 100644
--- a/templates/user/overview/header.tmpl
+++ b/templates/user/overview/header.tmpl
@@ -1,5 +1,5 @@
-<overflow-menu class="ui secondary pointing tabular borderless menu">
-	<div class="overflow-menu-items">
+<wc-overflow-menu class="ui secondary pointing tabular borderless menu">
+	<div class="wc-overflow-menu-items">
 		{{if and .HasProfileReadme .ContextUser.IsIndividual}}
 		<a class="{{if eq .TabName "overview"}}active {{end}}item" href="{{.ContextUser.HomeLink}}?tab=overview">
 			{{svg "octicon-info"}} {{ctx.Locale.Tr "user.overview"}}
@@ -45,4 +45,4 @@
 		</a>
 		{{end}}
 	</div>
-</overflow-menu>
+</wc-overflow-menu>
diff --git a/web_src/css/base.css b/web_src/css/base.css
index 5e61e51193348..8972cc656ecd3 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -248,7 +248,7 @@ a.label,
 }
 
 .page-content .header-wrapper,
-.page-content overflow-menu {
+.page-content wc-overflow-menu {
   margin-top: -15px !important;
   padding-top: 15px !important;
 }
@@ -1339,18 +1339,18 @@ strong.attention-caution, span.attention-caution {
   }
 }
 
-overflow-menu {
+wc-overflow-menu {
   margin-bottom: 15px !important;
   border-bottom: 1px solid var(--color-secondary) !important;
   display: flex;
 }
 
-overflow-menu .overflow-menu-items {
+wc-overflow-menu .wc-overflow-menu-items {
   display: flex;
   flex: 1;
 }
 
-overflow-menu .overflow-menu-items .item {
+wc-overflow-menu .wc-overflow-menu-items .item {
   margin-bottom: 0 !important; /* reset fomantic's margin, because the active menu has special bottom border */
 }
 
diff --git a/web_src/js/components/DashboardRepoList.vue b/web_src/js/components/DashboardRepoList.vue
index 0278151bb607b..73408c7fd52f3 100644
--- a/web_src/js/components/DashboardRepoList.vue
+++ b/web_src/js/components/DashboardRepoList.vue
@@ -384,8 +384,8 @@ export default sfc; // activate the IDE's Vue plugin
             </div>
           </div>
         </div>
-        <overflow-menu class="ui secondary pointing tabular borderless menu repos-filter">
-          <div class="overflow-menu-items tw-justify-center">
+        <wc-overflow-menu class="ui secondary pointing tabular borderless menu repos-filter">
+          <div class="wc-overflow-menu-items tw-justify-center">
             <a class="item" :class="{active: reposFilter === 'all'}" @click="changeReposFilter('all')">
               {{ textAll }}
               <div v-show="reposFilter === 'all'" class="ui circular mini grey label">{{ repoTypeCount }}</div>
@@ -407,7 +407,7 @@ export default sfc; // activate the IDE's Vue plugin
               <div v-show="reposFilter === 'collaborative'" class="ui circular mini grey label">{{ repoTypeCount }}</div>
             </a>
           </div>
-        </overflow-menu>
+        </wc-overflow-menu>
       </div>
       <div v-if="repos.length" class="ui attached table segment gt-rounded-bottom">
         <ul class="repo-owner-name-list">
diff --git a/web_src/js/webcomponents/index.js b/web_src/js/webcomponents/index.js
index 0d84ebfc86061..9e87a69cb497a 100644
--- a/web_src/js/webcomponents/index.js
+++ b/web_src/js/webcomponents/index.js
@@ -1,4 +1,4 @@
 import './polyfills.js';
 import '@github/relative-time-element';
-import './origin-url.js';
-import './overflow-menu.js';
+import './wc-origin-url.js';
+import './wc-overflow-menu.js';
diff --git a/web_src/js/webcomponents/origin-url.js b/web_src/js/webcomponents/origin-url.js
deleted file mode 100644
index 09aa77f2c0f14..0000000000000
--- a/web_src/js/webcomponents/origin-url.js
+++ /dev/null
@@ -1,22 +0,0 @@
-// Convert an absolute or relative URL to an absolute URL with the current origin. It only
-// processes absolute HTTP/HTTPS URLs or relative URLs like '/xxx' or '//host/xxx'.
-// NOTE: Keep this function in sync with clone_script.tmpl
-export function toOriginUrl(urlStr) {
-  try {
-    if (urlStr.startsWith('http://') || urlStr.startsWith('https://') || urlStr.startsWith('/')) {
-      const {origin, protocol, hostname, port} = window.location;
-      const url = new URL(urlStr, origin);
-      url.protocol = protocol;
-      url.hostname = hostname;
-      url.port = port || (protocol === 'https:' ? '443' : '80');
-      return url.toString();
-    }
-  } catch {}
-  return urlStr;
-}
-
-window.customElements.define('origin-url', class extends HTMLElement {
-  connectedCallback() {
-    this.textContent = toOriginUrl(this.getAttribute('data-url'));
-  }
-});
diff --git a/web_src/js/webcomponents/origin-url.test.js b/web_src/js/webcomponents/origin-url.test.js
deleted file mode 100644
index 3b2ab89f2a545..0000000000000
--- a/web_src/js/webcomponents/origin-url.test.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import {toOriginUrl} from './origin-url.js';
-
-test('toOriginUrl', () => {
-  const oldLocation = window.location;
-  for (const origin of ['https://example.com', 'https://example.com:3000']) {
-    window.location = new URL(`${origin}/`);
-    expect(toOriginUrl('/')).toEqual(`${origin}/`);
-    expect(toOriginUrl('/org/repo.git')).toEqual(`${origin}/org/repo.git`);
-    expect(toOriginUrl('https://another.com')).toEqual(`${origin}/`);
-    expect(toOriginUrl('https://another.com/')).toEqual(`${origin}/`);
-    expect(toOriginUrl('https://another.com/org/repo.git')).toEqual(`${origin}/org/repo.git`);
-    expect(toOriginUrl('https://another.com:4000')).toEqual(`${origin}/`);
-    expect(toOriginUrl('https://another.com:4000/')).toEqual(`${origin}/`);
-    expect(toOriginUrl('https://another.com:4000/org/repo.git')).toEqual(`${origin}/org/repo.git`);
-  }
-  window.location = oldLocation;
-});
diff --git a/web_src/js/webcomponents/overflow-menu.js b/web_src/js/webcomponents/overflow-menu.js
deleted file mode 100644
index df9512a78370f..0000000000000
--- a/web_src/js/webcomponents/overflow-menu.js
+++ /dev/null
@@ -1,108 +0,0 @@
-import {throttle} from 'throttle-debounce';
-import {createTippy} from '../modules/tippy.js';
-import {isDocumentFragmentOrElementNode} from '../utils/dom.js';
-
-window.customElements.define('overflow-menu', class extends HTMLElement {
-  updateItems = throttle(100, () => {
-    if (!this.tippyContent) {
-      const div = document.createElement('div');
-      div.classList.add('ui', 'vertical', 'menu', 'tippy-target');
-      this.append(div);
-      this.tippyContent = div;
-    }
-
-    // move items in tippy back into the menu items for subsequent measurement
-    for (const item of this.tippyItems || []) {
-      this.menuItemsEl.append(item);
-    }
-
-    // measure which items are partially outside the element and move them into the button menu
-    this.tippyItems = [];
-    const menuRight = this.offsetLeft + this.offsetWidth;
-    for (const item of this.menuItemsEl.querySelectorAll('.item')) {
-      const itemRight = item.offsetLeft + item.offsetWidth;
-      if (menuRight - itemRight < 38) { // slightly less than width of .overflow-menu-button
-        this.tippyItems.push(item);
-      }
-    }
-
-    if (this.tippyItems?.length) {
-      // move all items that overflow into tippy
-      for (const item of this.tippyItems) {
-        this.tippyContent.append(item);
-      }
-
-      // update existing tippy
-      if (this.button?._tippy) {
-        this.button._tippy.setContent(this.tippyContent);
-        return;
-      }
-
-      const btn = document.createElement('button');
-      btn.classList.add('overflow-menu-button', 'btn', 'tw-px-2', 'hover:tw-text-text-dark');
-      btn.innerHTML = '<svg viewBox="0 0 16 16" class="svg octicon-kebab-horizontal" width="16" height="16" aria-hidden="true"><path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3M1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3m13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"/></svg>';
-      this.append(btn);
-      this.button = btn;
-
-      createTippy(btn, {
-        trigger: 'click',
-        hideOnClick: true,
-        interactive: true,
-        placement: 'bottom-end',
-        role: 'menu',
-        content: this.tippyContent,
-      });
-    } else {
-      const btn = this.querySelector('.overflow-menu-button');
-      btn?._tippy?.destroy();
-      btn?.remove();
-    }
-  });
-
-  init() {
-    // ResizeObserver triggers on initial render, so we don't manually call `updateItems` here which
-    // also avoids a full-page FOUC in Firefox that happens when `updateItems` is called too soon.
-    this.resizeObserver = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        const newWidth = entry.contentBoxSize[0].inlineSize;
-        if (newWidth !== this.lastWidth) {
-          requestAnimationFrame(() => {
-            this.updateItems();
-          });
-          this.lastWidth = newWidth;
-        }
-      }
-    });
-    this.resizeObserver.observe(this);
-  }
-
-  connectedCallback() {
-    // check whether the mandatory `.overflow-menu-items` element is present initially which happens
-    // with Vue which renders differently than browsers. If it's not there, like in the case of browser
-    // template rendering, wait for its addition.
-    const menuItemsEl = this.querySelector('.overflow-menu-items');
-    if (menuItemsEl) {
-      this.menuItemsEl = menuItemsEl;
-      this.init();
-    } else {
-      this.mutationObserver = new MutationObserver((mutations) => {
-        for (const mutation of mutations) {
-          for (const node of mutation.addedNodes) {
-            if (!isDocumentFragmentOrElementNode(node)) continue;
-            if (node.classList.contains('overflow-menu-items')) {
-              this.menuItemsEl = node;
-              this.mutationObserver?.disconnect();
-              this.init();
-            }
-          }
-        }
-      });
-      this.mutationObserver.observe(this, {childList: true});
-    }
-  }
-
-  disconnectedCallback() {
-    this.mutationObserver?.disconnect();
-    this.resizeObserver?.disconnect();
-  }
-});
diff --git a/webpack.config.js b/webpack.config.js
index 250c8d33ff238..64029dd68f938 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -121,7 +121,7 @@ export default {
         loader: 'vue-loader',
         options: {
           compilerOptions: {
-            isCustomElement: (tag) => ['origin-url', 'overflow-menu'].includes(tag),
+            isCustomElement: (tag) => tag.startsWith('wc-'),
           },
         },
       },

From b4583a9c6b581610ac827bce4b2eb3fe774e60db Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Mon, 4 Mar 2024 23:12:32 +0100
Subject: [PATCH 48/74] add files, docs and enhance isCustomElement

---
 web_src/js/webcomponents/README.md            |   6 +-
 web_src/js/webcomponents/wc-origin-url.js     |  22 ++++
 .../js/webcomponents/wc-origin-url.test.js    |  17 +++
 web_src/js/webcomponents/wc-overflow-menu.js  | 109 ++++++++++++++++++
 webpack.config.js                             |   9 +-
 5 files changed, 159 insertions(+), 4 deletions(-)
 create mode 100644 web_src/js/webcomponents/wc-origin-url.js
 create mode 100644 web_src/js/webcomponents/wc-origin-url.test.js
 create mode 100644 web_src/js/webcomponents/wc-overflow-menu.js

diff --git a/web_src/js/webcomponents/README.md b/web_src/js/webcomponents/README.md
index c694c73250524..da0958b974e02 100644
--- a/web_src/js/webcomponents/README.md
+++ b/web_src/js/webcomponents/README.md
@@ -6,6 +6,6 @@ https://developer.mozilla.org/en-US/docs/Web/Web_Components
 
 # Guidelines
 
-* These components are loaded in `<head>` (before DOM body),
-  so they should have their own dependencies and should be very light,
-  then they won't affect the page loading time too much.
+* All our components must start with `wc-` prefix. Any used third party component names should be added to webpack config.
+* These components are loaded in `<head>` (before DOM body) in a separate entry point, they need to be lightweight to not affect the page loading time too much.
+* Do not import `svg.js` into a web component because that file is currently not tree-shakeable, import svg files individually insteat.
diff --git a/web_src/js/webcomponents/wc-origin-url.js b/web_src/js/webcomponents/wc-origin-url.js
new file mode 100644
index 0000000000000..ece5cf0af1a34
--- /dev/null
+++ b/web_src/js/webcomponents/wc-origin-url.js
@@ -0,0 +1,22 @@
+// Convert an absolute or relative URL to an absolute URL with the current origin. It only
+// processes absolute HTTP/HTTPS URLs or relative URLs like '/xxx' or '//host/xxx'.
+// NOTE: Keep this function in sync with clone_script.tmpl
+export function toOriginUrl(urlStr) {
+  try {
+    if (urlStr.startsWith('http://') || urlStr.startsWith('https://') || urlStr.startsWith('/')) {
+      const {origin, protocol, hostname, port} = window.location;
+      const url = new URL(urlStr, origin);
+      url.protocol = protocol;
+      url.hostname = hostname;
+      url.port = port || (protocol === 'https:' ? '443' : '80');
+      return url.toString();
+    }
+  } catch {}
+  return urlStr;
+}
+
+window.customElements.define('wc-origin-url', class extends HTMLElement {
+  connectedCallback() {
+    this.textContent = toOriginUrl(this.getAttribute('data-url'));
+  }
+});
diff --git a/web_src/js/webcomponents/wc-origin-url.test.js b/web_src/js/webcomponents/wc-origin-url.test.js
new file mode 100644
index 0000000000000..9ac40ae4e0563
--- /dev/null
+++ b/web_src/js/webcomponents/wc-origin-url.test.js
@@ -0,0 +1,17 @@
+import {toOriginUrl} from './wc-origin-url.js';
+
+test('toOriginUrl', () => {
+  const oldLocation = window.location;
+  for (const origin of ['https://example.com', 'https://example.com:3000']) {
+    window.location = new URL(`${origin}/`);
+    expect(toOriginUrl('/')).toEqual(`${origin}/`);
+    expect(toOriginUrl('/org/repo.git')).toEqual(`${origin}/org/repo.git`);
+    expect(toOriginUrl('https://another.com')).toEqual(`${origin}/`);
+    expect(toOriginUrl('https://another.com/')).toEqual(`${origin}/`);
+    expect(toOriginUrl('https://another.com/org/repo.git')).toEqual(`${origin}/org/repo.git`);
+    expect(toOriginUrl('https://another.com:4000')).toEqual(`${origin}/`);
+    expect(toOriginUrl('https://another.com:4000/')).toEqual(`${origin}/`);
+    expect(toOriginUrl('https://another.com:4000/org/repo.git')).toEqual(`${origin}/org/repo.git`);
+  }
+  window.location = oldLocation;
+});
diff --git a/web_src/js/webcomponents/wc-overflow-menu.js b/web_src/js/webcomponents/wc-overflow-menu.js
new file mode 100644
index 0000000000000..61ba042277192
--- /dev/null
+++ b/web_src/js/webcomponents/wc-overflow-menu.js
@@ -0,0 +1,109 @@
+import {throttle} from 'throttle-debounce';
+import {createTippy} from '../modules/tippy.js';
+import {isDocumentFragmentOrElementNode} from '../utils/dom.js';
+import octiconKebabHorizontal from '../../../public/assets/img/svg/octicon-kebab-horizontal.svg';
+
+window.customElements.define('wc-overflow-menu', class extends HTMLElement {
+  updateItems = throttle(100, () => {
+    if (!this.tippyContent) {
+      const div = document.createElement('div');
+      div.classList.add('ui', 'vertical', 'menu', 'tippy-target');
+      this.append(div);
+      this.tippyContent = div;
+    }
+
+    // move items in tippy back into the menu items for subsequent measurement
+    for (const item of this.tippyItems || []) {
+      this.menuItemsEl.append(item);
+    }
+
+    // measure which items are partially outside the element and move them into the button menu
+    this.tippyItems = [];
+    const menuRight = this.offsetLeft + this.offsetWidth;
+    for (const item of this.menuItemsEl.querySelectorAll('.item')) {
+      const itemRight = item.offsetLeft + item.offsetWidth;
+      if (menuRight - itemRight < 38) { // slightly less than width of .wc-overflow-menu-button
+        this.tippyItems.push(item);
+      }
+    }
+
+    if (this.tippyItems?.length) {
+      // move all items that overflow into tippy
+      for (const item of this.tippyItems) {
+        this.tippyContent.append(item);
+      }
+
+      // update existing tippy
+      if (this.button?._tippy) {
+        this.button._tippy.setContent(this.tippyContent);
+        return;
+      }
+
+      const btn = document.createElement('button');
+      btn.classList.add('wc-overflow-menu-button', 'btn', 'tw-px-2', 'hover:tw-text-text-dark');
+      btn.innerHTML = octiconKebabHorizontal;
+      this.append(btn);
+      this.button = btn;
+
+      createTippy(btn, {
+        trigger: 'click',
+        hideOnClick: true,
+        interactive: true,
+        placement: 'bottom-end',
+        role: 'menu',
+        content: this.tippyContent,
+      });
+    } else {
+      const btn = this.querySelector('.wc-overflow-menu-button');
+      btn?._tippy?.destroy();
+      btn?.remove();
+    }
+  });
+
+  init() {
+    // ResizeObserver triggers on initial render, so we don't manually call `updateItems` here which
+    // also avoids a full-page FOUC in Firefox that happens when `updateItems` is called too soon.
+    this.resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const newWidth = entry.contentBoxSize[0].inlineSize;
+        if (newWidth !== this.lastWidth) {
+          requestAnimationFrame(() => {
+            this.updateItems();
+          });
+          this.lastWidth = newWidth;
+        }
+      }
+    });
+    this.resizeObserver.observe(this);
+  }
+
+  connectedCallback() {
+    // check whether the mandatory `.wc-overflow-menu-items` element is present initially which happens
+    // with Vue which renders differently than browsers. If it's not there, like in the case of browser
+    // template rendering, wait for its addition.
+    const menuItemsEl = this.querySelector('.wc-overflow-menu-items');
+    if (menuItemsEl) {
+      this.menuItemsEl = menuItemsEl;
+      this.init();
+    } else {
+      this.mutationObserver = new MutationObserver((mutations) => {
+        for (const mutation of mutations) {
+          for (const node of mutation.addedNodes) {
+            if (!isDocumentFragmentOrElementNode(node)) continue;
+            if (node.classList.contains('wc-overflow-menu-items')) {
+              this.menuItemsEl = node;
+              this.mutationObserver?.disconnect();
+              this.init();
+            }
+          }
+        }
+      });
+      this.mutationObserver.observe(this, {childList: true});
+    }
+  }
+
+  disconnectedCallback() {
+    this.mutationObserver?.disconnect();
+    this.resizeObserver?.disconnect();
+  }
+});
diff --git a/webpack.config.js b/webpack.config.js
index 64029dd68f938..55ccfa0c31d9f 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -41,6 +41,13 @@ if ('ENABLE_SOURCEMAP' in env) {
   sourceMaps = isProduction ? 'reduced' : 'true';
 }
 
+// define which web components we use for Vue to not interpret them as Vue components
+const isCustomElement = (tag) => {
+  if (tag.startsWith('wc-')) return true; // first-party
+  if (['markdown-toolbar', 'relative-time', 'text-expander'].includes(tag)) return true;
+  return false;
+};
+
 const filterCssImport = (url, ...args) => {
   const cssFile = args[1] || args[0]; // resourcePath is 2nd argument for url and 3rd for import
   const importedFile = url.replace(/[?#].+/, '').toLowerCase();
@@ -121,7 +128,7 @@ export default {
         loader: 'vue-loader',
         options: {
           compilerOptions: {
-            isCustomElement: (tag) => tag.startsWith('wc-'),
+            isCustomElement,
           },
         },
       },

From ba8a47b3e04ec6b96a3917d124056e90a5e8460a Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Tue, 5 Mar 2024 12:37:30 +0100
Subject: [PATCH 49/74] Update web_src/js/webcomponents/wc-overflow-menu.js

---
 web_src/js/webcomponents/wc-overflow-menu.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web_src/js/webcomponents/wc-overflow-menu.js b/web_src/js/webcomponents/wc-overflow-menu.js
index 61ba042277192..9b7c7d004d0f8 100644
--- a/web_src/js/webcomponents/wc-overflow-menu.js
+++ b/web_src/js/webcomponents/wc-overflow-menu.js
@@ -22,7 +22,7 @@ window.customElements.define('wc-overflow-menu', class extends HTMLElement {
     const menuRight = this.offsetLeft + this.offsetWidth;
     for (const item of this.menuItemsEl.querySelectorAll('.item')) {
       const itemRight = item.offsetLeft + item.offsetWidth;
-      if (menuRight - itemRight < 38) { // slightly less than width of .wc-overflow-menu-button
+      if (menuRight - itemRight < 38) { // roughly the width of .wc-overflow-menu-button
         this.tippyItems.push(item);
       }
     }

From 8718035efaf9b3315402fdc4277e6ec8ff46b9b5 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Wed, 6 Mar 2024 23:05:59 +0100
Subject: [PATCH 50/74] revert to unprefixed

---
 .../contributing/guidelines-frontend.en-us.md    |  1 -
 .../contributing/guidelines-frontend.zh-cn.md    |  1 -
 templates/devtest/gitea-ui.tmpl                  | 14 +++++++-------
 templates/explore/navbar.tmpl                    |  6 +++---
 templates/org/menu.tmpl                          |  6 +++---
 templates/package/content/alpine.tmpl            |  4 ++--
 templates/package/content/cargo.tmpl             |  4 ++--
 templates/package/content/chef.tmpl              |  2 +-
 templates/package/content/composer.tmpl          |  2 +-
 templates/package/content/conan.tmpl             |  2 +-
 templates/package/content/conda.tmpl             |  6 +++---
 templates/package/content/cran.tmpl              |  2 +-
 templates/package/content/debian.tmpl            |  4 ++--
 templates/package/content/generic.tmpl           |  2 +-
 templates/package/content/go.tmpl                |  2 +-
 templates/package/content/helm.tmpl              |  2 +-
 templates/package/content/maven.tmpl             |  8 ++++----
 templates/package/content/npm.tmpl               |  2 +-
 templates/package/content/nuget.tmpl             |  2 +-
 templates/package/content/pub.tmpl               |  2 +-
 templates/package/content/pypi.tmpl              |  2 +-
 templates/package/content/rpm.tmpl               |  4 ++--
 templates/package/content/rubygems.tmpl          |  4 ++--
 templates/package/content/swift.tmpl             |  2 +-
 templates/package/content/vagrant.tmpl           |  2 +-
 templates/repo/diff/image_diff.tmpl              |  6 +++---
 templates/repo/header.tmpl                       |  8 ++++----
 .../view_content/pull_merge_instruction.tmpl     |  2 +-
 templates/user/auth/link_account.tmpl            |  6 +++---
 templates/user/auth/signin_navbar.tmpl           |  6 +++---
 templates/user/auth/signup_openid_navbar.tmpl    |  6 +++---
 templates/user/overview/header.tmpl              |  6 +++---
 web_src/css/base.css                             |  8 ++++----
 web_src/js/components/DashboardRepoList.vue      |  6 +++---
 web_src/js/webcomponents/README.md               |  2 +-
 web_src/js/webcomponents/index.js                |  4 ++--
 web_src/js/webcomponents/wc-origin-url.js        |  2 +-
 web_src/js/webcomponents/wc-origin-url.test.js   |  2 +-
 web_src/js/webcomponents/wc-overflow-menu.js     | 14 +++++++-------
 webpack.config.js                                | 16 ++++++++++------
 40 files changed, 92 insertions(+), 90 deletions(-)

diff --git a/docs/content/contributing/guidelines-frontend.en-us.md b/docs/content/contributing/guidelines-frontend.en-us.md
index d91832736d5ee..a33a38a6f92b4 100644
--- a/docs/content/contributing/guidelines-frontend.en-us.md
+++ b/docs/content/contributing/guidelines-frontend.en-us.md
@@ -49,7 +49,6 @@ We recommend [Google HTML/CSS Style Guide](https://google.github.io/styleguide/h
 11. Custom event names are recommended to use `ce-` prefix.
 12. Gitea's tailwind-style CSS classes use `gt-` prefix (`gt-relative`), while Gitea's own private framework-level CSS classes use `g-` prefix (`g-modal-confirm`).
 13. Avoid inline scripts & styles as much as possible, it's recommended to put JS code into JS files and use CSS classes. If inline scripts & styles are unavoidable, explain the reason why it can't be avoided.
-14. Gitea's web components use the `wc-` prefix.
 
 ### Accessibility / ARIA
 
diff --git a/docs/content/contributing/guidelines-frontend.zh-cn.md b/docs/content/contributing/guidelines-frontend.zh-cn.md
index 4eb3e4d597cfe..43f72b48083a0 100644
--- a/docs/content/contributing/guidelines-frontend.zh-cn.md
+++ b/docs/content/contributing/guidelines-frontend.zh-cn.md
@@ -49,7 +49,6 @@ HTML 页面由[Go HTML Template](https://pkg.go.dev/html/template)渲染。
 11. 推荐使用自定义事件名称前缀`ce-`。
 12. Gitea 的 tailwind-style CSS 类使用`gt-`前缀（`gt-relative`），而 Gitea 自身的私有框架级 CSS 类使用`g-`前缀（`g-modal-confirm`）。
 13. 尽量避免内联脚本和样式，建议将JS代码放入JS文件中并使用CSS类。如果内联脚本和样式不可避免，请解释无法避免的原因。
-1. Gitea 的 Web 组件使用 `wc-` 前缀。
 
 ### 可访问性 / ARIA
 
diff --git a/templates/devtest/gitea-ui.tmpl b/templates/devtest/gitea-ui.tmpl
index a2cf7b29a2e34..f04986c05627e 100644
--- a/templates/devtest/gitea-ui.tmpl
+++ b/templates/devtest/gitea-ui.tmpl
@@ -105,15 +105,15 @@
 	</div>
 
 	<div>
-		<h1>&lt;wc-origin-url&gt;</h1>
-		<div><wc-origin-url data-url="test/url"></wc-origin-url></div>
-		<div><wc-origin-url data-url="/test/url"></wc-origin-url></div>
+		<h1>&lt;origin-url&gt;</h1>
+		<div><origin-url data-url="test/url"></origin-url></div>
+		<div><origin-url data-url="/test/url"></origin-url></div>
 	</div>
 
 	<div>
-		<h1>&lt;wc-overflow-menu&gt;</h1>
-		<wc-overflow-menu class="ui secondary pointing tabular borderless menu">
-			<div class="wc-overflow-menu-items">
+		<h1>&lt;overflow-menu&gt;</h1>
+		<overflow-menu class="ui secondary pointing tabular borderless menu">
+			<div class="overflow-menu-items">
 				<a class="active item">item</a>
 				<a class="item">item 1</a>
 				<a class="item">item 2</a>
@@ -134,7 +134,7 @@
 				<a class="item">item 17</a>
 				<a class="item">item 18</a>
 			</div>
-		</wc-overflow-menu>
+		</overflow-menu>
 	</div>
 
 	<div>
diff --git a/templates/explore/navbar.tmpl b/templates/explore/navbar.tmpl
index f32325cd354cb..8841613b9f128 100644
--- a/templates/explore/navbar.tmpl
+++ b/templates/explore/navbar.tmpl
@@ -1,5 +1,5 @@
-<wc-overflow-menu class="ui secondary pointing tabular top attached borderless menu navbar">
-	<div class="wc-overflow-menu-items tw-justify-center">
+<overflow-menu class="ui secondary pointing tabular top attached borderless menu navbar">
+	<div class="overflow-menu-items tw-justify-center">
 		<a class="{{if .PageIsExploreRepositories}}active {{end}}item" href="{{AppSubUrl}}/explore/repos">
 			{{svg "octicon-repo"}} {{ctx.Locale.Tr "explore.repos"}}
 		</a>
@@ -17,4 +17,4 @@
 		</a>
 		{{end}}
 	</div>
-</wc-overflow-menu>
+</overflow-menu>
diff --git a/templates/org/menu.tmpl b/templates/org/menu.tmpl
index ff782f71d9685..8eacc17e82a96 100644
--- a/templates/org/menu.tmpl
+++ b/templates/org/menu.tmpl
@@ -1,6 +1,6 @@
 <div class="ui container">
-	<wc-overflow-menu class="ui secondary pointing tabular borderless menu">
-		<div class="wc-overflow-menu-items">
+	<overflow-menu class="ui secondary pointing tabular borderless menu">
+		<div class="overflow-menu-items">
 			<a class="{{if .PageIsViewRepositories}}active {{end}}item" href="{{$.Org.HomeLink}}">
 				{{svg "octicon-repo"}} {{ctx.Locale.Tr "user.repositories"}}
 				{{if .RepoCount}}
@@ -45,5 +45,5 @@
 			</a>
 			{{end}}
 		</div>
-	</wc-overflow-menu>
+	</overflow-menu>
 </div>
diff --git a/templates/package/content/alpine.tmpl b/templates/package/content/alpine.tmpl
index a6438b6ead536..5c144b977903c 100644
--- a/templates/package/content/alpine.tmpl
+++ b/templates/package/content/alpine.tmpl
@@ -4,12 +4,12 @@
 		<div class="ui form">
 			<div class="field">
 				<label>{{svg "octicon-code"}} {{ctx.Locale.Tr "packages.alpine.registry"}}</label>
-				<div class="markup"><pre class="code-block"><code><wc-origin-url data-url="{{AppSubUrl}}/api/packages/{{$.PackageDescriptor.Owner.Name}}/alpine"></wc-origin-url>/$branch/$repository</code></pre></div>
+				<div class="markup"><pre class="code-block"><code><origin-url data-url="{{AppSubUrl}}/api/packages/{{$.PackageDescriptor.Owner.Name}}/alpine"></origin-url>/$branch/$repository</code></pre></div>
 				<p>{{ctx.Locale.Tr "packages.alpine.registry.info"}}</p>
 			</div>
 			<div class="field">
 				<label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.alpine.registry.key"}}</label>
-				<div class="markup"><pre class="code-block"><code>curl -JO <wc-origin-url data-url="{{AppSubUrl}}/api/packages/{{$.PackageDescriptor.Owner.Name}}/alpine/key"></wc-origin-url></code></pre></div>
+				<div class="markup"><pre class="code-block"><code>curl -JO <origin-url data-url="{{AppSubUrl}}/api/packages/{{$.PackageDescriptor.Owner.Name}}/alpine/key"></origin-url></code></pre></div>
 			</div>
 			<div class="field">
 				<label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.alpine.install"}}</label>
diff --git a/templates/package/content/cargo.tmpl b/templates/package/content/cargo.tmpl
index 498fa54095d9a..7fd88a284a296 100644
--- a/templates/package/content/cargo.tmpl
+++ b/templates/package/content/cargo.tmpl
@@ -8,8 +8,8 @@
 default = "gitea"
 
 [registries.gitea]
-index = "sparse+<wc-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/cargo/"></wc-origin-url>" # Sparse index
-# index = "<wc-origin-url data-url="{{AppSubUrl}}/{{.PackageDescriptor.Owner.Name}}/_cargo-index.git"></wc-origin-url>" # Git
+index = "sparse+<origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/cargo/"></origin-url>" # Sparse index
+# index = "<origin-url data-url="{{AppSubUrl}}/{{.PackageDescriptor.Owner.Name}}/_cargo-index.git"></origin-url>" # Git
 
 [net]
 git-fetch-with-cli = true</code></pre></div>
diff --git a/templates/package/content/chef.tmpl b/templates/package/content/chef.tmpl
index a3cbf67acc940..03ce9f852bde8 100644
--- a/templates/package/content/chef.tmpl
+++ b/templates/package/content/chef.tmpl
@@ -4,7 +4,7 @@
 		<div class="ui form">
 			<div class="field">
 				<label>{{svg "octicon-code"}} {{ctx.Locale.Tr "packages.chef.registry"}}</label>
-				<div class="markup"><pre class="code-block"><code>knife[:supermarket_site] = '<wc-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/chef"></wc-origin-url>'</code></pre></div>
+				<div class="markup"><pre class="code-block"><code>knife[:supermarket_site] = '<origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/chef"></origin-url>'</code></pre></div>
 			</div>
 			<div class="field">
 				<label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.chef.install"}}</label>
diff --git a/templates/package/content/composer.tmpl b/templates/package/content/composer.tmpl
index 1f7f0605f9c05..c2dc6345c3764 100644
--- a/templates/package/content/composer.tmpl
+++ b/templates/package/content/composer.tmpl
@@ -7,7 +7,7 @@
 				<div class="markup"><pre class="code-block"><code>{
 	"repositories": [{
 			"type": "composer",
-			"url": "<wc-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/composer"></wc-origin-url>"
+			"url": "<origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/composer"></origin-url>"
 		}
 	]
 }</code></pre></div>
diff --git a/templates/package/content/conan.tmpl b/templates/package/content/conan.tmpl
index 171209396c4da..b68a45fde30d1 100644
--- a/templates/package/content/conan.tmpl
+++ b/templates/package/content/conan.tmpl
@@ -4,7 +4,7 @@
 		<div class="ui form">
 			<div class="field">
 				<label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.conan.registry"}}</label>
-				<div class="markup"><pre class="code-block"><code>conan remote add gitea <wc-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/conan"></wc-origin-url></code></pre></div>
+				<div class="markup"><pre class="code-block"><code>conan remote add gitea <origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/conan"></origin-url></code></pre></div>
 			</div>
 			<div class="field">
 				<label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.conan.install"}}</label>
diff --git a/templates/package/content/conda.tmpl b/templates/package/content/conda.tmpl
index 89370e6fb493e..031b51aa10805 100644
--- a/templates/package/content/conda.tmpl
+++ b/templates/package/content/conda.tmpl
@@ -4,11 +4,11 @@
 		<div class="ui form">
 			<div class="field">
 				<label>{{svg "octicon-code"}} {{ctx.Locale.Tr "packages.conda.registry"}}</label>
-				<div class="markup"><pre class="code-block"><code>channel_alias: <wc-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/conda"></wc-origin-url>
+				<div class="markup"><pre class="code-block"><code>channel_alias: <origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/conda"></origin-url>
 channels:
-&#32;&#32;- <wc-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/conda"></wc-origin-url>
+&#32;&#32;- <origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/conda"></origin-url>
 default_channels:
-&#32;&#32;- <wc-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/conda"></wc-origin-url></code></pre></div>
+&#32;&#32;- <origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/conda"></origin-url></code></pre></div>
 			</div>
 			<div class="field">
 				<label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.conda.install"}}</label>
diff --git a/templates/package/content/cran.tmpl b/templates/package/content/cran.tmpl
index a21891cc3530f..ae58e6f334c75 100644
--- a/templates/package/content/cran.tmpl
+++ b/templates/package/content/cran.tmpl
@@ -4,7 +4,7 @@
 		<div class="ui form">
 			<div class="field">
 				<label>{{svg "octicon-code"}} {{ctx.Locale.Tr "packages.cran.registry"}}</label>
-				<div class="markup"><pre class="code-block"><code>options("repos" = c(getOption("repos"), c(gitea="<wc-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/cran"></wc-origin-url>")))</code></pre></div>
+				<div class="markup"><pre class="code-block"><code>options("repos" = c(getOption("repos"), c(gitea="<origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/cran"></origin-url>")))</code></pre></div>
 			</div>
 			<div class="field">
 				<label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.cran.install"}}</label>
diff --git a/templates/package/content/debian.tmpl b/templates/package/content/debian.tmpl
index 1f0e1bfa0d50a..73b82578357fd 100644
--- a/templates/package/content/debian.tmpl
+++ b/templates/package/content/debian.tmpl
@@ -4,8 +4,8 @@
 		<div class="ui form">
 			<div class="field">
 				<label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.debian.registry"}}</label>
-				<div class="markup"><pre class="code-block"><code>sudo curl <wc-origin-url data-url="{{AppSubUrl}}/api/packages/{{$.PackageDescriptor.Owner.Name}}/debian/repository.key"></wc-origin-url> -o /etc/apt/keyrings/gitea-{{$.PackageDescriptor.Owner.Name}}.asc
-echo "deb [signed-by=/etc/apt/keyrings/gitea-{{$.PackageDescriptor.Owner.Name}}.asc] <wc-origin-url data-url="{{AppSubUrl}}/api/packages/{{$.PackageDescriptor.Owner.Name}}/debian"></wc-origin-url> $distribution $component" | sudo tee -a /etc/apt/sources.list.d/gitea.list
+				<div class="markup"><pre class="code-block"><code>sudo curl <origin-url data-url="{{AppSubUrl}}/api/packages/{{$.PackageDescriptor.Owner.Name}}/debian/repository.key"></origin-url> -o /etc/apt/keyrings/gitea-{{$.PackageDescriptor.Owner.Name}}.asc
+echo "deb [signed-by=/etc/apt/keyrings/gitea-{{$.PackageDescriptor.Owner.Name}}.asc] <origin-url data-url="{{AppSubUrl}}/api/packages/{{$.PackageDescriptor.Owner.Name}}/debian"></origin-url> $distribution $component" | sudo tee -a /etc/apt/sources.list.d/gitea.list
 sudo apt update</code></pre></div>
 				<p>{{ctx.Locale.Tr "packages.debian.registry.info"}}</p>
 			</div>
diff --git a/templates/package/content/generic.tmpl b/templates/package/content/generic.tmpl
index 6c697f72f4632..2fd952105f244 100644
--- a/templates/package/content/generic.tmpl
+++ b/templates/package/content/generic.tmpl
@@ -6,7 +6,7 @@
 				<label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.generic.download"}}</label>
 				<div class="markup"><pre class="code-block"><code>
 {{- range .PackageDescriptor.Files -}}
-curl -OJ <wc-origin-url data-url="{{AppSubUrl}}/api/packages/{{$.PackageDescriptor.Owner.Name}}/generic/{{$.PackageDescriptor.Package.Name}}/{{$.PackageDescriptor.Version.Version}}/{{.File.Name}}"></wc-origin-url>
+curl -OJ <origin-url data-url="{{AppSubUrl}}/api/packages/{{$.PackageDescriptor.Owner.Name}}/generic/{{$.PackageDescriptor.Package.Name}}/{{$.PackageDescriptor.Version.Version}}/{{.File.Name}}"></origin-url>
 {{end -}}
 				</code></pre></div>
 			</div>
diff --git a/templates/package/content/go.tmpl b/templates/package/content/go.tmpl
index 5b9e0cbe94416..80d1ab231a433 100644
--- a/templates/package/content/go.tmpl
+++ b/templates/package/content/go.tmpl
@@ -4,7 +4,7 @@
 		<div class="ui form">
 			<div class="field">
 				<label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.go.install"}}</label>
-				<div class="markup"><pre class="code-block"><code>GOPROXY=<wc-origin-url data-url="{{AppSubUrl}}/api/packages/{{$.PackageDescriptor.Owner.Name}}/go"></wc-origin-url> go install {{$.PackageDescriptor.Package.Name}}@{{$.PackageDescriptor.Version.Version}}</code></pre></div>
+				<div class="markup"><pre class="code-block"><code>GOPROXY=<origin-url data-url="{{AppSubUrl}}/api/packages/{{$.PackageDescriptor.Owner.Name}}/go"></origin-url> go install {{$.PackageDescriptor.Package.Name}}@{{$.PackageDescriptor.Version.Version}}</code></pre></div>
 			</div>
 			<div class="field">
 				<label>{{ctx.Locale.Tr "packages.registry.documentation" "Go" "https://docs.gitea.com/usage/packages/go"}}</label>
diff --git a/templates/package/content/helm.tmpl b/templates/package/content/helm.tmpl
index 8fc86d03550e0..da846e934db34 100644
--- a/templates/package/content/helm.tmpl
+++ b/templates/package/content/helm.tmpl
@@ -4,7 +4,7 @@
 		<div class="ui form">
 			<div class="field">
 				<label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.helm.registry"}}</label>
-				<div class="markup"><pre class="code-block"><code>helm repo add {{AppDomain}} <wc-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/helm"></wc-origin-url>
+				<div class="markup"><pre class="code-block"><code>helm repo add {{AppDomain}} <origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/helm"></origin-url>
 helm repo update</code></pre></div>
 			</div>
 			<div class="field">
diff --git a/templates/package/content/maven.tmpl b/templates/package/content/maven.tmpl
index 3925803730ff6..3a7de335de88f 100644
--- a/templates/package/content/maven.tmpl
+++ b/templates/package/content/maven.tmpl
@@ -7,19 +7,19 @@
 				<div class="markup"><pre class="code-block"><code>&lt;repositories&gt;
 	&lt;repository&gt;
 		&lt;id&gt;gitea&lt;/id&gt;
-			&lt;url&gt;<wc-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/maven"></wc-origin-url>&lt;/url&gt;
+			&lt;url&gt;<origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/maven"></origin-url>&lt;/url&gt;
 	&lt;/repository&gt;
 &lt;/repositories&gt;
 
 &lt;distributionManagement&gt;
 	&lt;repository&gt;
 		&lt;id&gt;gitea&lt;/id&gt;
-		&lt;url&gt;<wc-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/maven"></wc-origin-url>&lt;/url&gt;
+		&lt;url&gt;<origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/maven"></origin-url>&lt;/url&gt;
 	&lt;/repository&gt;
 
 	&lt;snapshotRepository&gt;
 		&lt;id&gt;gitea&lt;/id&gt;
-		&lt;url&gt;<wc-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/maven"></wc-origin-url>&lt;/url&gt;
+		&lt;url&gt;<origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/maven"></origin-url>&lt;/url&gt;
 	&lt;/snapshotRepository&gt;
 &lt;/distributionManagement&gt;</code></pre></div>
 			</div>
@@ -37,7 +37,7 @@
 			</div>
 			<div class="field">
 				<label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.maven.download"}}</label>
-				<div class="markup"><pre class="code-block"><code>mvn dependency:get -DremoteRepositories=<wc-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/maven"></wc-origin-url> -Dartifact={{.PackageDescriptor.Metadata.GroupID}}:{{.PackageDescriptor.Metadata.ArtifactID}}:{{.PackageDescriptor.Version.Version}}</code></pre></div>
+				<div class="markup"><pre class="code-block"><code>mvn dependency:get -DremoteRepositories=<origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/maven"></origin-url> -Dartifact={{.PackageDescriptor.Metadata.GroupID}}:{{.PackageDescriptor.Metadata.ArtifactID}}:{{.PackageDescriptor.Version.Version}}</code></pre></div>
 			</div>
 			<div class="field">
 				<label>{{ctx.Locale.Tr "packages.registry.documentation" "Maven" "https://docs.gitea.com/usage/packages/maven/"}}</label>
diff --git a/templates/package/content/npm.tmpl b/templates/package/content/npm.tmpl
index d0f8a337c1e04..a78a07d874673 100644
--- a/templates/package/content/npm.tmpl
+++ b/templates/package/content/npm.tmpl
@@ -4,7 +4,7 @@
 		<div class="ui form">
 			<div class="field">
 				<label>{{svg "octicon-code"}} {{ctx.Locale.Tr "packages.npm.registry"}}</label>
-				<div class="markup"><pre class="code-block"><code>{{if .PackageDescriptor.Metadata.Scope}}{{.PackageDescriptor.Metadata.Scope}}:{{end}}registry=<wc-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/npm/"></wc-origin-url></code></pre></div>
+				<div class="markup"><pre class="code-block"><code>{{if .PackageDescriptor.Metadata.Scope}}{{.PackageDescriptor.Metadata.Scope}}:{{end}}registry=<origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/npm/"></origin-url></code></pre></div>
 			</div>
 			<div class="field">
 				<label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.npm.install"}}</label>
diff --git a/templates/package/content/nuget.tmpl b/templates/package/content/nuget.tmpl
index cfa12fbea6dec..0911260fbaa21 100644
--- a/templates/package/content/nuget.tmpl
+++ b/templates/package/content/nuget.tmpl
@@ -4,7 +4,7 @@
 		<div class="ui form">
 			<div class="field">
 				<label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.nuget.registry"}}</label>
-				<div class="markup"><pre class="code-block"><code>dotnet nuget add source --name {{.PackageDescriptor.Owner.Name}} --username your_username --password your_token <wc-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/nuget/index.json"></wc-origin-url></code></pre></div>
+				<div class="markup"><pre class="code-block"><code>dotnet nuget add source --name {{.PackageDescriptor.Owner.Name}} --username your_username --password your_token <origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/nuget/index.json"></origin-url></code></pre></div>
 			</div>
 			<div class="field">
 				<label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.nuget.install"}}</label>
diff --git a/templates/package/content/pub.tmpl b/templates/package/content/pub.tmpl
index a2c89336c30d1..f2c7ac938faad 100644
--- a/templates/package/content/pub.tmpl
+++ b/templates/package/content/pub.tmpl
@@ -4,7 +4,7 @@
 		<div class="ui form">
 			<div class="field">
 				<label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.pub.install"}}</label>
-				<div class="markup"><pre class="code-block"><code>dart pub add {{.PackageDescriptor.Package.Name}}:{{.PackageDescriptor.Version.Version}} --hosted-url=<wc-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/pub/"></wc-origin-url></code></pre></div>
+				<div class="markup"><pre class="code-block"><code>dart pub add {{.PackageDescriptor.Package.Name}}:{{.PackageDescriptor.Version.Version}} --hosted-url=<origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/pub/"></origin-url></code></pre></div>
 			</div>
 			<div class="field">
 				<label>{{ctx.Locale.Tr "packages.registry.documentation" "Pub" "https://docs.gitea.com/usage/packages/pub/"}}</label>
diff --git a/templates/package/content/pypi.tmpl b/templates/package/content/pypi.tmpl
index 9bacdf7c194e2..817fced97b960 100644
--- a/templates/package/content/pypi.tmpl
+++ b/templates/package/content/pypi.tmpl
@@ -4,7 +4,7 @@
 		<div class="ui form">
 			<div class="field">
 				<label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.pypi.install"}}</label>
-				<div class="markup"><pre class="code-block"><code>pip install --index-url <wc-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/pypi/simple/"></wc-origin-url> {{.PackageDescriptor.Package.Name}}</code></pre></div>
+				<div class="markup"><pre class="code-block"><code>pip install --index-url <origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/pypi/simple/"></origin-url> {{.PackageDescriptor.Package.Name}}</code></pre></div>
 			</div>
 			<div class="field">
 				<label>{{ctx.Locale.Tr "packages.registry.documentation" "PyPI" "https://docs.gitea.com/usage/packages/pypi/"}}</label>
diff --git a/templates/package/content/rpm.tmpl b/templates/package/content/rpm.tmpl
index a83db37e5c343..3faa8a0dc75a5 100644
--- a/templates/package/content/rpm.tmpl
+++ b/templates/package/content/rpm.tmpl
@@ -11,13 +11,13 @@
 # {{ctx.Locale.Tr "packages.rpm.distros.redhat"}}
 {{- range $group := .Groups}}
 	{{- if $group}}{{$group = print "/" $group}}{{end}}
-dnf config-manager --add-repo <wc-origin-url data-url="{{AppSubUrl}}/api/packages/{{$.PackageDescriptor.Owner.Name}}/rpm{{$group}}.repo"></wc-origin-url>
+dnf config-manager --add-repo <origin-url data-url="{{AppSubUrl}}/api/packages/{{$.PackageDescriptor.Owner.Name}}/rpm{{$group}}.repo"></origin-url>
 {{- end}}
 
 # {{ctx.Locale.Tr "packages.rpm.distros.suse"}}
 {{- range $group := .Groups}}
 	{{- if $group}}{{$group = print "/" $group}}{{end}}
-zypper addrepo <wc-origin-url data-url="{{AppSubUrl}}/api/packages/{{$.PackageDescriptor.Owner.Name}}/rpm{{$group}}.repo"></wc-origin-url>
+zypper addrepo <origin-url data-url="{{AppSubUrl}}/api/packages/{{$.PackageDescriptor.Owner.Name}}/rpm{{$group}}.repo"></origin-url>
 {{- end}}</code></pre></div>
 			</div>
 			<div class="field">
diff --git a/templates/package/content/rubygems.tmpl b/templates/package/content/rubygems.tmpl
index 381f39cf8a445..610dfc78563dd 100644
--- a/templates/package/content/rubygems.tmpl
+++ b/templates/package/content/rubygems.tmpl
@@ -4,11 +4,11 @@
 		<div class="ui form">
 			<div class="field">
 				<label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.rubygems.install"}}:</label>
-				<div class="markup"><pre class="code-block"><code>gem install {{.PackageDescriptor.Package.Name}} --version &quot;{{.PackageDescriptor.Version.Version}}&quot; --source &quot;<wc-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/rubygems"></wc-origin-url>&quot;</code></pre></div>
+				<div class="markup"><pre class="code-block"><code>gem install {{.PackageDescriptor.Package.Name}} --version &quot;{{.PackageDescriptor.Version.Version}}&quot; --source &quot;<origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/rubygems"></origin-url>&quot;</code></pre></div>
 			</div>
 			<div class="field">
 				<label>{{svg "octicon-code"}} {{ctx.Locale.Tr "packages.rubygems.install2"}}:</label>
-				<div class="markup"><pre class="code-block"><code>source "<wc-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/rubygems"></wc-origin-url>" do
+				<div class="markup"><pre class="code-block"><code>source "<origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/rubygems"></origin-url>" do
 	gem "{{.PackageDescriptor.Package.Name}}", "{{.PackageDescriptor.Version.Version}}"
 end</code></pre></div>
 			</div>
diff --git a/templates/package/content/swift.tmpl b/templates/package/content/swift.tmpl
index 8bef02082a011..aacbc83980f18 100644
--- a/templates/package/content/swift.tmpl
+++ b/templates/package/content/swift.tmpl
@@ -4,7 +4,7 @@
 		<div class="ui form">
 			<div class="field">
 				<label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.swift.registry"}}</label>
-				<div class="markup"><pre class="code-block"><code>swift package-registry set <wc-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/swift"></wc-origin-url></code></pre></div>
+				<div class="markup"><pre class="code-block"><code>swift package-registry set <origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/swift"></origin-url></code></pre></div>
 			</div>
 			<div class="field">
 				<label>{{svg "octicon-code"}} {{ctx.Locale.Tr "packages.swift.install"}}</label>
diff --git a/templates/package/content/vagrant.tmpl b/templates/package/content/vagrant.tmpl
index d837cccbdadf0..7666284b87126 100644
--- a/templates/package/content/vagrant.tmpl
+++ b/templates/package/content/vagrant.tmpl
@@ -4,7 +4,7 @@
 		<div class="ui form">
 			<div class="field">
 				<label>{{svg "octicon-terminal"}} {{ctx.Locale.Tr "packages.vagrant.install"}}</label>
-				<div class="markup"><pre class="code-block"><code>vagrant box add --box-version {{.PackageDescriptor.Version.Version}} "<wc-origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/vagrant/{{.PackageDescriptor.Package.Name}}"></wc-origin-url>"</code></pre></div>
+				<div class="markup"><pre class="code-block"><code>vagrant box add --box-version {{.PackageDescriptor.Version.Version}} "<origin-url data-url="{{AppSubUrl}}/api/packages/{{.PackageDescriptor.Owner.Name}}/vagrant/{{.PackageDescriptor.Package.Name}}"></origin-url>"</code></pre></div>
 			</div>
 			<div class="field">
 				<label>{{ctx.Locale.Tr "packages.registry.documentation" "Vagrant" "https://docs.gitea.com/usage/packages/vagrant/"}}</label>
diff --git a/templates/repo/diff/image_diff.tmpl b/templates/repo/diff/image_diff.tmpl
index 4be6c0806ff75..9ad7916398a41 100644
--- a/templates/repo/diff/image_diff.tmpl
+++ b/templates/repo/diff/image_diff.tmpl
@@ -7,15 +7,15 @@
 			data-mime-before="{{.sniffedTypeBase.GetMimeType}}"
 			data-mime-after="{{.sniffedTypeHead.GetMimeType}}"
 		>
-			<wc-overflow-menu class="ui secondary pointing tabular top attached borderless menu">
-				<div class="wc-overflow-menu-items tw-justify-center">
+			<overflow-menu class="ui secondary pointing tabular top attached borderless menu">
+				<div class="overflow-menu-items tw-justify-center">
 					<a class="item active" data-tab="diff-side-by-side-{{.file.Index}}">{{ctx.Locale.Tr "repo.diff.image.side_by_side"}}</a>
 					{{if and .blobBase .blobHead}}
 					<a class="item" data-tab="diff-swipe-{{.file.Index}}">{{ctx.Locale.Tr "repo.diff.image.swipe"}}</a>
 					<a class="item" data-tab="diff-overlay-{{.file.Index}}">{{ctx.Locale.Tr "repo.diff.image.overlay"}}</a>
 					{{end}}
 				</div>
-			</wc-overflow-menu>
+			</overflow-menu>
 			<div class="image-diff-tabs is-loading">
 				<div class="ui bottom attached tab image-diff-container active" data-tab="diff-side-by-side-{{.file.Index}}">
 					<div class="diff-side-by-side">
diff --git a/templates/repo/header.tmpl b/templates/repo/header.tmpl
index cce4edcf721db..6e0a9985f704b 100644
--- a/templates/repo/header.tmpl
+++ b/templates/repo/header.tmpl
@@ -126,9 +126,9 @@
 		{{if .IsGenerated}}<div class="fork-flag">{{ctx.Locale.Tr "repo.generated_from"}} <a href="{{(.TemplateRepo ctx).Link}}">{{(.TemplateRepo ctx).FullName}}</a></div>{{end}}
 	</div>
 {{end}}
-	<wc-overflow-menu class="ui container secondary pointing tabular top attached borderless menu navbar tw-pt-0 tw-my-0">
+	<overflow-menu class="ui container secondary pointing tabular top attached borderless menu navbar tw-pt-0 tw-my-0">
 		{{if not (or .Repository.IsBeingCreated .Repository.IsBroken)}}
-			<div class="wc-overflow-menu-items">
+			<div class="overflow-menu-items">
 				{{if .Permission.CanRead $.UnitTypeCode}}
 				<a class="{{if .PageIsViewCode}}active {{end}}item" href="{{.RepoLink}}{{if and (ne .BranchName .Repository.DefaultBranch) (not $.PageIsWiki)}}/src/{{.BranchNameSubURL}}{{end}}">
 					{{svg "octicon-code"}} {{ctx.Locale.Tr "repo.code"}}
@@ -220,12 +220,12 @@
 				{{end}}
 			</div>
 		{{else if .Permission.IsAdmin}}
-			<div class="wc-overflow-menu-items">
+			<div class="overflow-menu-items">
 				<a class="{{if .PageIsRepoSettings}}active {{end}} item" href="{{.RepoLink}}/settings">
 					{{svg "octicon-tools"}} {{ctx.Locale.Tr "repo.settings"}}
 				</a>
 			</div>
 		{{end}}
-	</wc-overflow-menu>
+	</overflow-menu>
 	<div class="ui tabs divider"></div>
 </div>
diff --git a/templates/repo/issue/view_content/pull_merge_instruction.tmpl b/templates/repo/issue/view_content/pull_merge_instruction.tmpl
index 3a936faf20491..12b0c4b4e0fd3 100644
--- a/templates/repo/issue/view_content/pull_merge_instruction.tmpl
+++ b/templates/repo/issue/view_content/pull_merge_instruction.tmpl
@@ -8,7 +8,7 @@
 	{{end}}
 	<div class="ui secondary segment">
 		{{if eq .PullRequest.Flow 0}}
-		<div>git fetch -u {{if ne .PullRequest.HeadRepo.ID .PullRequest.BaseRepo.ID}}<wc-origin-url data-url="{{.PullRequest.HeadRepo.Link}}"></wc-origin-url>{{else}}origin{{end}} {{.PullRequest.HeadBranch}}:{{$localBranch}}</div>
+		<div>git fetch -u {{if ne .PullRequest.HeadRepo.ID .PullRequest.BaseRepo.ID}}<origin-url data-url="{{.PullRequest.HeadRepo.Link}}"></origin-url>{{else}}origin{{end}} {{.PullRequest.HeadBranch}}:{{$localBranch}}</div>
 		<div>git checkout {{$localBranch}}</div>
 		{{else}}
 		<div>git fetch -u origin {{.GetGitRefName}}:{{$localBranch}}</div>
diff --git a/templates/user/auth/link_account.tmpl b/templates/user/auth/link_account.tmpl
index 38e8172d615ce..81ea92c9594a3 100644
--- a/templates/user/auth/link_account.tmpl
+++ b/templates/user/auth/link_account.tmpl
@@ -1,7 +1,7 @@
 {{template "base/head" .}}
 <div role="main" aria-label="{{.Title}}" class="page-content user link-account">
-	<wc-overflow-menu class="ui secondary pointing tabular top attached borderless menu navbar tw-bg-header-wrapper">
-		<div class="wc-overflow-menu-items tw-justify-center">
+	<overflow-menu class="ui secondary pointing tabular top attached borderless menu navbar tw-bg-header-wrapper">
+		<div class="overflow-menu-items tw-justify-center">
 			<!-- TODO handle .ShowRegistrationButton once other login bugs are fixed -->
 			{{if not .AllowOnlyInternalRegistration}}
 				<a class="item {{if not .user_exists}}active{{end}}"
@@ -14,7 +14,7 @@
 				{{ctx.Locale.Tr "auth.oauth_signin_tab"}}
 			</a>
 		</div>
-	</wc-overflow-menu>
+	</overflow-menu>
 	<div class="ui middle very relaxed page grid">
 		<div class="column">
 			<div class="ui tab {{if not .user_exists}}active{{end}}"
diff --git a/templates/user/auth/signin_navbar.tmpl b/templates/user/auth/signin_navbar.tmpl
index efdbaaa6b9c7a..a5768830652f6 100644
--- a/templates/user/auth/signin_navbar.tmpl
+++ b/templates/user/auth/signin_navbar.tmpl
@@ -1,6 +1,6 @@
 {{if or .EnableOpenIDSignIn .EnableSSPI}}
-<wc-overflow-menu class="ui secondary pointing tabular top attached borderless menu navbar tw-bg-header-wrapper">
-	<div class="wc-overflow-menu-items tw-justify-center">
+<overflow-menu class="ui secondary pointing tabular top attached borderless menu navbar tw-bg-header-wrapper">
+	<div class="overflow-menu-items tw-justify-center">
 		<a class="{{if .PageIsLogin}}active {{end}}item" rel="nofollow" href="{{AppSubUrl}}/user/login">
 			{{ctx.Locale.Tr "auth.login_userpass"}}
 		</a>
@@ -20,5 +20,5 @@
 		</a>
 		{{end}}
 	</div>
-</wc-overflow-menu>
+</overflow-menu>
 {{end}}
diff --git a/templates/user/auth/signup_openid_navbar.tmpl b/templates/user/auth/signup_openid_navbar.tmpl
index e6a758750905e..9cf81b048f8a8 100644
--- a/templates/user/auth/signup_openid_navbar.tmpl
+++ b/templates/user/auth/signup_openid_navbar.tmpl
@@ -1,5 +1,5 @@
-<wc-overflow-menu class="ui secondary pointing tabular top attached borderless menu navbar tw-bg-header-wrapper">
-	<div class="wc-overflow-menu-items tw-justify-center">
+<overflow-menu class="ui secondary pointing tabular top attached borderless menu navbar tw-bg-header-wrapper">
+	<div class="overflow-menu-items tw-justify-center">
 		<a class="{{if .PageIsOpenIDConnect}}active {{end}}item" href="{{AppSubUrl}}/user/openid/connect">
 			{{ctx.Locale.Tr "auth.openid_connect_title"}}
 		</a>
@@ -9,4 +9,4 @@
 			</a>
 		{{end}}
 	</div>
-</wc-overflow-menu>
+</overflow-menu>
diff --git a/templates/user/overview/header.tmpl b/templates/user/overview/header.tmpl
index ff846e04a9904..64d7254c6d561 100644
--- a/templates/user/overview/header.tmpl
+++ b/templates/user/overview/header.tmpl
@@ -1,5 +1,5 @@
-<wc-overflow-menu class="ui secondary pointing tabular borderless menu">
-	<div class="wc-overflow-menu-items">
+<overflow-menu class="ui secondary pointing tabular borderless menu">
+	<div class="overflow-menu-items">
 		{{if and .HasProfileReadme .ContextUser.IsIndividual}}
 		<a class="{{if eq .TabName "overview"}}active {{end}}item" href="{{.ContextUser.HomeLink}}?tab=overview">
 			{{svg "octicon-info"}} {{ctx.Locale.Tr "user.overview"}}
@@ -45,4 +45,4 @@
 		</a>
 		{{end}}
 	</div>
-</wc-overflow-menu>
+</overflow-menu>
diff --git a/web_src/css/base.css b/web_src/css/base.css
index 8972cc656ecd3..5e61e51193348 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -248,7 +248,7 @@ a.label,
 }
 
 .page-content .header-wrapper,
-.page-content wc-overflow-menu {
+.page-content overflow-menu {
   margin-top: -15px !important;
   padding-top: 15px !important;
 }
@@ -1339,18 +1339,18 @@ strong.attention-caution, span.attention-caution {
   }
 }
 
-wc-overflow-menu {
+overflow-menu {
   margin-bottom: 15px !important;
   border-bottom: 1px solid var(--color-secondary) !important;
   display: flex;
 }
 
-wc-overflow-menu .wc-overflow-menu-items {
+overflow-menu .overflow-menu-items {
   display: flex;
   flex: 1;
 }
 
-wc-overflow-menu .wc-overflow-menu-items .item {
+overflow-menu .overflow-menu-items .item {
   margin-bottom: 0 !important; /* reset fomantic's margin, because the active menu has special bottom border */
 }
 
diff --git a/web_src/js/components/DashboardRepoList.vue b/web_src/js/components/DashboardRepoList.vue
index 73408c7fd52f3..0278151bb607b 100644
--- a/web_src/js/components/DashboardRepoList.vue
+++ b/web_src/js/components/DashboardRepoList.vue
@@ -384,8 +384,8 @@ export default sfc; // activate the IDE's Vue plugin
             </div>
           </div>
         </div>
-        <wc-overflow-menu class="ui secondary pointing tabular borderless menu repos-filter">
-          <div class="wc-overflow-menu-items tw-justify-center">
+        <overflow-menu class="ui secondary pointing tabular borderless menu repos-filter">
+          <div class="overflow-menu-items tw-justify-center">
             <a class="item" :class="{active: reposFilter === 'all'}" @click="changeReposFilter('all')">
               {{ textAll }}
               <div v-show="reposFilter === 'all'" class="ui circular mini grey label">{{ repoTypeCount }}</div>
@@ -407,7 +407,7 @@ export default sfc; // activate the IDE's Vue plugin
               <div v-show="reposFilter === 'collaborative'" class="ui circular mini grey label">{{ repoTypeCount }}</div>
             </a>
           </div>
-        </wc-overflow-menu>
+        </overflow-menu>
       </div>
       <div v-if="repos.length" class="ui attached table segment gt-rounded-bottom">
         <ul class="repo-owner-name-list">
diff --git a/web_src/js/webcomponents/README.md b/web_src/js/webcomponents/README.md
index da0958b974e02..92094da8e6407 100644
--- a/web_src/js/webcomponents/README.md
+++ b/web_src/js/webcomponents/README.md
@@ -6,6 +6,6 @@ https://developer.mozilla.org/en-US/docs/Web/Web_Components
 
 # Guidelines
 
-* All our components must start with `wc-` prefix. Any used third party component names should be added to webpack config.
+* All our components must be added to `webpack.config.js` so they work correctly in Vue.
 * These components are loaded in `<head>` (before DOM body) in a separate entry point, they need to be lightweight to not affect the page loading time too much.
 * Do not import `svg.js` into a web component because that file is currently not tree-shakeable, import svg files individually insteat.
diff --git a/web_src/js/webcomponents/index.js b/web_src/js/webcomponents/index.js
index 9e87a69cb497a..0d84ebfc86061 100644
--- a/web_src/js/webcomponents/index.js
+++ b/web_src/js/webcomponents/index.js
@@ -1,4 +1,4 @@
 import './polyfills.js';
 import '@github/relative-time-element';
-import './wc-origin-url.js';
-import './wc-overflow-menu.js';
+import './origin-url.js';
+import './overflow-menu.js';
diff --git a/web_src/js/webcomponents/wc-origin-url.js b/web_src/js/webcomponents/wc-origin-url.js
index ece5cf0af1a34..09aa77f2c0f14 100644
--- a/web_src/js/webcomponents/wc-origin-url.js
+++ b/web_src/js/webcomponents/wc-origin-url.js
@@ -15,7 +15,7 @@ export function toOriginUrl(urlStr) {
   return urlStr;
 }
 
-window.customElements.define('wc-origin-url', class extends HTMLElement {
+window.customElements.define('origin-url', class extends HTMLElement {
   connectedCallback() {
     this.textContent = toOriginUrl(this.getAttribute('data-url'));
   }
diff --git a/web_src/js/webcomponents/wc-origin-url.test.js b/web_src/js/webcomponents/wc-origin-url.test.js
index 9ac40ae4e0563..3b2ab89f2a545 100644
--- a/web_src/js/webcomponents/wc-origin-url.test.js
+++ b/web_src/js/webcomponents/wc-origin-url.test.js
@@ -1,4 +1,4 @@
-import {toOriginUrl} from './wc-origin-url.js';
+import {toOriginUrl} from './origin-url.js';
 
 test('toOriginUrl', () => {
   const oldLocation = window.location;
diff --git a/web_src/js/webcomponents/wc-overflow-menu.js b/web_src/js/webcomponents/wc-overflow-menu.js
index 9b7c7d004d0f8..1420ca1f03a1c 100644
--- a/web_src/js/webcomponents/wc-overflow-menu.js
+++ b/web_src/js/webcomponents/wc-overflow-menu.js
@@ -3,7 +3,7 @@ import {createTippy} from '../modules/tippy.js';
 import {isDocumentFragmentOrElementNode} from '../utils/dom.js';
 import octiconKebabHorizontal from '../../../public/assets/img/svg/octicon-kebab-horizontal.svg';
 
-window.customElements.define('wc-overflow-menu', class extends HTMLElement {
+window.customElements.define('overflow-menu', class extends HTMLElement {
   updateItems = throttle(100, () => {
     if (!this.tippyContent) {
       const div = document.createElement('div');
@@ -22,7 +22,7 @@ window.customElements.define('wc-overflow-menu', class extends HTMLElement {
     const menuRight = this.offsetLeft + this.offsetWidth;
     for (const item of this.menuItemsEl.querySelectorAll('.item')) {
       const itemRight = item.offsetLeft + item.offsetWidth;
-      if (menuRight - itemRight < 38) { // roughly the width of .wc-overflow-menu-button
+      if (menuRight - itemRight < 38) { // roughly the width of .overflow-menu-button
         this.tippyItems.push(item);
       }
     }
@@ -40,7 +40,7 @@ window.customElements.define('wc-overflow-menu', class extends HTMLElement {
       }
 
       const btn = document.createElement('button');
-      btn.classList.add('wc-overflow-menu-button', 'btn', 'tw-px-2', 'hover:tw-text-text-dark');
+      btn.classList.add('overflow-menu-button', 'btn', 'tw-px-2', 'hover:tw-text-text-dark');
       btn.innerHTML = octiconKebabHorizontal;
       this.append(btn);
       this.button = btn;
@@ -54,7 +54,7 @@ window.customElements.define('wc-overflow-menu', class extends HTMLElement {
         content: this.tippyContent,
       });
     } else {
-      const btn = this.querySelector('.wc-overflow-menu-button');
+      const btn = this.querySelector('.overflow-menu-button');
       btn?._tippy?.destroy();
       btn?.remove();
     }
@@ -78,10 +78,10 @@ window.customElements.define('wc-overflow-menu', class extends HTMLElement {
   }
 
   connectedCallback() {
-    // check whether the mandatory `.wc-overflow-menu-items` element is present initially which happens
+    // check whether the mandatory `.overflow-menu-items` element is present initially which happens
     // with Vue which renders differently than browsers. If it's not there, like in the case of browser
     // template rendering, wait for its addition.
-    const menuItemsEl = this.querySelector('.wc-overflow-menu-items');
+    const menuItemsEl = this.querySelector('.overflow-menu-items');
     if (menuItemsEl) {
       this.menuItemsEl = menuItemsEl;
       this.init();
@@ -90,7 +90,7 @@ window.customElements.define('wc-overflow-menu', class extends HTMLElement {
         for (const mutation of mutations) {
           for (const node of mutation.addedNodes) {
             if (!isDocumentFragmentOrElementNode(node)) continue;
-            if (node.classList.contains('wc-overflow-menu-items')) {
+            if (node.classList.contains('overflow-menu-items')) {
               this.menuItemsEl = node;
               this.mutationObserver?.disconnect();
               this.init();
diff --git a/webpack.config.js b/webpack.config.js
index 55ccfa0c31d9f..939d60af93d9c 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -42,11 +42,15 @@ if ('ENABLE_SOURCEMAP' in env) {
 }
 
 // define which web components we use for Vue to not interpret them as Vue components
-const isCustomElement = (tag) => {
-  if (tag.startsWith('wc-')) return true; // first-party
-  if (['markdown-toolbar', 'relative-time', 'text-expander'].includes(tag)) return true;
-  return false;
-};
+const webComponents = new Set([
+  // our own, in web_src/js/webcomponents
+  'overflow-menu',
+  'origin-url',
+  // from dependencies
+  'markdown-toolbar',
+  'relative-time',
+  'text-expander',
+]);
 
 const filterCssImport = (url, ...args) => {
   const cssFile = args[1] || args[0]; // resourcePath is 2nd argument for url and 3rd for import
@@ -128,7 +132,7 @@ export default {
         loader: 'vue-loader',
         options: {
           compilerOptions: {
-            isCustomElement,
+            isCustomElement: (tag) => webComponents.has(tag),
           },
         },
       },

From 9fe309aceabb6101a8936b312141d4ebd795d427 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Wed, 6 Mar 2024 23:10:19 +0100
Subject: [PATCH 51/74] fix filenames

---
 web_src/js/webcomponents/{wc-origin-url.js => origin-url.js}      | 0
 .../webcomponents/{wc-origin-url.test.js => origin-url.test.js}   | 0
 .../js/webcomponents/{wc-overflow-menu.js => overflow-menu.js}    | 0
 3 files changed, 0 insertions(+), 0 deletions(-)
 rename web_src/js/webcomponents/{wc-origin-url.js => origin-url.js} (100%)
 rename web_src/js/webcomponents/{wc-origin-url.test.js => origin-url.test.js} (100%)
 rename web_src/js/webcomponents/{wc-overflow-menu.js => overflow-menu.js} (100%)

diff --git a/web_src/js/webcomponents/wc-origin-url.js b/web_src/js/webcomponents/origin-url.js
similarity index 100%
rename from web_src/js/webcomponents/wc-origin-url.js
rename to web_src/js/webcomponents/origin-url.js
diff --git a/web_src/js/webcomponents/wc-origin-url.test.js b/web_src/js/webcomponents/origin-url.test.js
similarity index 100%
rename from web_src/js/webcomponents/wc-origin-url.test.js
rename to web_src/js/webcomponents/origin-url.test.js
diff --git a/web_src/js/webcomponents/wc-overflow-menu.js b/web_src/js/webcomponents/overflow-menu.js
similarity index 100%
rename from web_src/js/webcomponents/wc-overflow-menu.js
rename to web_src/js/webcomponents/overflow-menu.js

From fe950b9bb8ccb6595245d6c4ac6319f3bfabe9df Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Wed, 6 Mar 2024 23:23:11 +0100
Subject: [PATCH 52/74] remove fomantic menu dependency

---
 web_src/css/modules/tippy.css             | 12 +++++++-----
 web_src/js/webcomponents/overflow-menu.js |  2 +-
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/web_src/css/modules/tippy.css b/web_src/css/modules/tippy.css
index 9478ba7a20120..4791c2eb6fb98 100644
--- a/web_src/css/modules/tippy.css
+++ b/web_src/css/modules/tippy.css
@@ -61,13 +61,15 @@
   fill: var(--color-menu);
 }
 
-.tippy-box[data-theme="menu"] .tippy-content > .ui.menu {
-  width: auto; /* unset fomantic's default 15rem */
-  border: none; /* remove `.ui.menu` border as it is provided by tippy */
+.tippy-box[data-theme="menu"] .item {
+  display: block;
+  padding: 10px 16px;
+  color: inherit;
+  text-decoration: none;
 }
 
-.tippy-box[data-theme="menu"] .tippy-content .ui.vertical.menu .item::before {
-  content: none; /* remove lines between items */
+.tippy-box[data-theme="menu"] .item:hover {
+  background: var(--color-hover);
 }
 
 /* box-with-header theme to look like .ui.attached.segment. can contain .ui.attached.header */
diff --git a/web_src/js/webcomponents/overflow-menu.js b/web_src/js/webcomponents/overflow-menu.js
index 1420ca1f03a1c..e12195f4f7e8a 100644
--- a/web_src/js/webcomponents/overflow-menu.js
+++ b/web_src/js/webcomponents/overflow-menu.js
@@ -7,7 +7,7 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
   updateItems = throttle(100, () => {
     if (!this.tippyContent) {
       const div = document.createElement('div');
-      div.classList.add('ui', 'vertical', 'menu', 'tippy-target');
+      div.classList.add('tippy-target');
       this.append(div);
       this.tippyContent = div;
     }

From 0ede83064a84d242f0d99f2b5dbfdd9e1f0f803b Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Wed, 6 Mar 2024 23:24:00 +0100
Subject: [PATCH 53/74] remove from code-line-menu as well

---
 templates/repo/view_file.tmpl | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/repo/view_file.tmpl b/templates/repo/view_file.tmpl
index 75f45b293fa30..5c9c694541fbf 100644
--- a/templates/repo/view_file.tmpl
+++ b/templates/repo/view_file.tmpl
@@ -135,7 +135,7 @@
 						{{end}}
 					</tbody>
 				</table>
-				<div class="code-line-menu ui vertical pointing menu tippy-target">
+				<div class="code-line-menu tippy-target">
 					{{if $.Permission.CanRead $.UnitTypeIssues}}
 						<a class="item ref-in-new-issue" data-url-issue-new="{{.RepoLink}}/issues/new" data-url-param-body-link="{{.Repository.Link}}/src/commit/{{PathEscape .CommitID}}/{{PathEscapeSegments .TreePath}}{{if $.HasSourceRenderedToggle}}?display=source{{end}}" rel="nofollow noindex">{{ctx.Locale.Tr "repo.issues.context.reference_issue"}}</a>
 					{{end}}

From f586358e3caeb25ae611296f00b10215c5836608 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Wed, 6 Mar 2024 23:47:21 +0100
Subject: [PATCH 54/74] add some aria

---
 options/locale/locale_en-US.ini           |  1 +
 templates/base/head_script.tmpl           |  1 +
 web_src/css/modules/tippy.css             |  3 +++
 web_src/js/webcomponents/overflow-menu.js | 13 ++++++++++++-
 4 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini
index d30c8e521d031..8ebc3df752c42 100644
--- a/options/locale/locale_en-US.ini
+++ b/options/locale/locale_en-US.ini
@@ -25,6 +25,7 @@ enable_javascript = This website requires JavaScript.
 toc = Table of Contents
 licenses = Licenses
 return_to_gitea = Return to Gitea
+additional_options = Additional options
 
 username = Username
 email = Email Address
diff --git a/templates/base/head_script.tmpl b/templates/base/head_script.tmpl
index 4a723f63b9c9e..fc33f423f0cbe 100644
--- a/templates/base/head_script.tmpl
+++ b/templates/base/head_script.tmpl
@@ -41,6 +41,7 @@ If you introduce mistakes in it, Gitea JavaScript code wouldn't run correctly.
 			remove_label_str: {{ctx.Locale.Tr "remove_label_str"}},
 			modal_confirm: {{ctx.Locale.Tr "modal.confirm"}},
 			modal_cancel: {{ctx.Locale.Tr "modal.cancel"}},
+			additional_options: {{ctx.Locale.Tr "additional_options"}},
 		},
 	};
 	{{/* in case some pages don't render the pageData, we make sure it is an object to prevent null access */}}
diff --git a/web_src/css/modules/tippy.css b/web_src/css/modules/tippy.css
index 4791c2eb6fb98..02718637a4d6e 100644
--- a/web_src/css/modules/tippy.css
+++ b/web_src/css/modules/tippy.css
@@ -66,6 +66,9 @@
   padding: 10px 16px;
   color: inherit;
   text-decoration: none;
+  display: flex;
+  align-items: center;
+  gap: 10px;
 }
 
 .tippy-box[data-theme="menu"] .item:hover {
diff --git a/web_src/js/webcomponents/overflow-menu.js b/web_src/js/webcomponents/overflow-menu.js
index e12195f4f7e8a..15b2ca655ad31 100644
--- a/web_src/js/webcomponents/overflow-menu.js
+++ b/web_src/js/webcomponents/overflow-menu.js
@@ -20,7 +20,8 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
     // measure which items are partially outside the element and move them into the button menu
     this.tippyItems = [];
     const menuRight = this.offsetLeft + this.offsetWidth;
-    for (const item of this.menuItemsEl.querySelectorAll('.item')) {
+    const menuItems = this.menuItemsEl.querySelectorAll('.item');
+    for (const item of menuItems) {
       const itemRight = item.offsetLeft + item.offsetWidth;
       if (menuRight - itemRight < 38) { // roughly the width of .overflow-menu-button
         this.tippyItems.push(item);
@@ -28,8 +29,16 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
     }
 
     if (this.tippyItems?.length) {
+      // remove aria-role from items that moved from tippy to menu
+      for (const item of menuItems) {
+        if (!this.tippyItems.includes(item)) {
+          item.removeAttribute('aria-role');
+        }
+      }
+
       // move all items that overflow into tippy
       for (const item of this.tippyItems) {
+        item.setAttribute('aria-role', 'menuitem');
         this.tippyContent.append(item);
       }
 
@@ -41,6 +50,8 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
 
       const btn = document.createElement('button');
       btn.classList.add('overflow-menu-button', 'btn', 'tw-px-2', 'hover:tw-text-text-dark');
+      btn.setAttribute('aria-haspopup', 'true');
+      btn.setAttribute('aria-label', window.config.i18n.additional_options);
       btn.innerHTML = octiconKebabHorizontal;
       this.append(btn);
       this.button = btn;

From d7c0b01ba9a93febfd5843815d02d27fdab8a65e Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Wed, 6 Mar 2024 23:54:07 +0100
Subject: [PATCH 55/74] set aria-haspopup on all tippy with click trigger

---
 templates/repo/view_file.tmpl             | 6 +++---
 web_src/js/modules/tippy.js               | 8 +++++++-
 web_src/js/webcomponents/overflow-menu.js | 1 -
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/templates/repo/view_file.tmpl b/templates/repo/view_file.tmpl
index 5c9c694541fbf..c059b7a4091bb 100644
--- a/templates/repo/view_file.tmpl
+++ b/templates/repo/view_file.tmpl
@@ -137,10 +137,10 @@
 				</table>
 				<div class="code-line-menu tippy-target">
 					{{if $.Permission.CanRead $.UnitTypeIssues}}
-						<a class="item ref-in-new-issue" data-url-issue-new="{{.RepoLink}}/issues/new" data-url-param-body-link="{{.Repository.Link}}/src/commit/{{PathEscape .CommitID}}/{{PathEscapeSegments .TreePath}}{{if $.HasSourceRenderedToggle}}?display=source{{end}}" rel="nofollow noindex">{{ctx.Locale.Tr "repo.issues.context.reference_issue"}}</a>
+						<a class="item ref-in-new-issue" aria-role="menuitem" data-url-issue-new="{{.RepoLink}}/issues/new" data-url-param-body-link="{{.Repository.Link}}/src/commit/{{PathEscape .CommitID}}/{{PathEscapeSegments .TreePath}}{{if $.HasSourceRenderedToggle}}?display=source{{end}}" rel="nofollow noindex">{{ctx.Locale.Tr "repo.issues.context.reference_issue"}}</a>
 					{{end}}
-					<a class="item view_git_blame" href="{{.Repository.Link}}/blame/commit/{{PathEscape .CommitID}}/{{PathEscapeSegments .TreePath}}">{{ctx.Locale.Tr "repo.view_git_blame"}}</a>
-					<a class="item copy-line-permalink" data-url="{{.Repository.Link}}/src/commit/{{PathEscape .CommitID}}/{{PathEscapeSegments .TreePath}}{{if $.HasSourceRenderedToggle}}?display=source{{end}}">{{ctx.Locale.Tr "repo.file_copy_permalink"}}</a>
+					<a class="item view_git_blame" aria-role="menuitem" href="{{.Repository.Link}}/blame/commit/{{PathEscape .CommitID}}/{{PathEscapeSegments .TreePath}}">{{ctx.Locale.Tr "repo.view_git_blame"}}</a>
+					<a class="item copy-line-permalink" aria-role="menuitem" data-url="{{.Repository.Link}}/src/commit/{{PathEscape .CommitID}}/{{PathEscapeSegments .TreePath}}{{if $.HasSourceRenderedToggle}}?display=source{{end}}">{{ctx.Locale.Tr "repo.file_copy_permalink"}}</a>
 				</div>
 				{{end}}
 			{{end}}
diff --git a/web_src/js/modules/tippy.js b/web_src/js/modules/tippy.js
index 7e739df8e80c1..be20f21b9c42b 100644
--- a/web_src/js/modules/tippy.js
+++ b/web_src/js/modules/tippy.js
@@ -6,7 +6,8 @@ const visibleInstances = new Set();
 export function createTippy(target, opts = {}) {
   // the callback functions should be destructured from opts,
   // because we should use our own wrapper functions to handle them, do not let the user override them
-  const {onHide, onShow, onDestroy, ...other} = opts;
+  const {onHide, onShow, onDestroy, trigger, ...other} = opts;
+
   const instance = tippy(target, {
     appendTo: document.body,
     animation: false,
@@ -37,9 +38,14 @@ export function createTippy(target, opts = {}) {
     role: 'menu', // HTML role attribute, only tooltips should use "tooltip"
     theme: other.role || 'menu', // CSS theme, either "tooltip", "menu" or "box-with-header"
     plugins: [followCursor],
+    trigger,
     ...other,
   });
 
+  if (trigger === 'click') {
+    target.setAttribute('aria-haspopup', 'menu');
+  }
+
   return instance;
 }
 
diff --git a/web_src/js/webcomponents/overflow-menu.js b/web_src/js/webcomponents/overflow-menu.js
index 15b2ca655ad31..55330fb9ced89 100644
--- a/web_src/js/webcomponents/overflow-menu.js
+++ b/web_src/js/webcomponents/overflow-menu.js
@@ -50,7 +50,6 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
 
       const btn = document.createElement('button');
       btn.classList.add('overflow-menu-button', 'btn', 'tw-px-2', 'hover:tw-text-text-dark');
-      btn.setAttribute('aria-haspopup', 'true');
       btn.setAttribute('aria-label', window.config.i18n.additional_options);
       btn.innerHTML = octiconKebabHorizontal;
       this.append(btn);

From fc193c2272154cd5f093d0646ce0b154a4c58062 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Thu, 7 Mar 2024 00:00:35 +0100
Subject: [PATCH 56/74] css tweaks

---
 web_src/css/modules/tippy.css | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/web_src/css/modules/tippy.css b/web_src/css/modules/tippy.css
index 02718637a4d6e..50a5b8073abd5 100644
--- a/web_src/css/modules/tippy.css
+++ b/web_src/css/modules/tippy.css
@@ -51,6 +51,7 @@
 .tippy-box[data-theme="menu"] {
   background-color: var(--color-menu);
   color: var(--color-text);
+  box-shadow: 0 6px 18px var(--color-shadow);
 }
 
 .tippy-box[data-theme="menu"] .tippy-content {
@@ -62,12 +63,11 @@
 }
 
 .tippy-box[data-theme="menu"] .item {
-  display: block;
-  padding: 10px 16px;
-  color: inherit;
-  text-decoration: none;
   display: flex;
   align-items: center;
+  padding: 9px 18px;
+  color: inherit;
+  text-decoration: none;
   gap: 10px;
 }
 

From 5df5e4468f66328b7c859f2b8643b603f6a2e34f Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Thu, 7 Mar 2024 00:03:06 +0100
Subject: [PATCH 57/74] re-enable eslint rule

---
 .eslintrc.yaml                            | 2 +-
 web_src/js/webcomponents/overflow-menu.js | 5 +++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/.eslintrc.yaml b/.eslintrc.yaml
index cb004c0534679..e9991c02baed2 100644
--- a/.eslintrc.yaml
+++ b/.eslintrc.yaml
@@ -828,7 +828,7 @@ rules:
   wc/guard-super-call: [2]
   wc/max-elements-per-file: [0]
   wc/no-child-traversal-in-attributechangedcallback: [2]
-  wc/no-child-traversal-in-connectedcallback: [0] # needed for custom elements in Vue where children are available during connectedCallback
+  wc/no-child-traversal-in-connectedcallback: [2]
   wc/no-closed-shadow-root: [2]
   wc/no-constructor-attributes: [2]
   wc/no-constructor-params: [2]
diff --git a/web_src/js/webcomponents/overflow-menu.js b/web_src/js/webcomponents/overflow-menu.js
index 55330fb9ced89..8969dcf2411d2 100644
--- a/web_src/js/webcomponents/overflow-menu.js
+++ b/web_src/js/webcomponents/overflow-menu.js
@@ -90,8 +90,9 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
   connectedCallback() {
     // check whether the mandatory `.overflow-menu-items` element is present initially which happens
     // with Vue which renders differently than browsers. If it's not there, like in the case of browser
-    // template rendering, wait for its addition.
-    const menuItemsEl = this.querySelector('.overflow-menu-items');
+    // template rendering, wait for its addition. The eslint rule is not sophisticated enough or aware of
+    // this problem.
+    const menuItemsEl = this.querySelector('.overflow-menu-items'); // eslint-disable-line wc/no-child-traversal-in-connectedcallback
     if (menuItemsEl) {
       this.menuItemsEl = menuItemsEl;
       this.init();

From 98b3523b51978c3513834d4aeaa5d57767b9f630 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Thu, 7 Mar 2024 00:03:48 +0100
Subject: [PATCH 58/74] add link

---
 web_src/js/webcomponents/overflow-menu.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/web_src/js/webcomponents/overflow-menu.js b/web_src/js/webcomponents/overflow-menu.js
index 8969dcf2411d2..e45b0f2b8e25a 100644
--- a/web_src/js/webcomponents/overflow-menu.js
+++ b/web_src/js/webcomponents/overflow-menu.js
@@ -90,8 +90,9 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
   connectedCallback() {
     // check whether the mandatory `.overflow-menu-items` element is present initially which happens
     // with Vue which renders differently than browsers. If it's not there, like in the case of browser
-    // template rendering, wait for its addition. The eslint rule is not sophisticated enough or aware of
-    // this problem.
+    // template rendering, wait for its addition.
+    // The eslint rule is not sophisticated enough or aware of this problem, see
+    // https://github.com/43081j/eslint-plugin-wc/pull/130
     const menuItemsEl = this.querySelector('.overflow-menu-items'); // eslint-disable-line wc/no-child-traversal-in-connectedcallback
     if (menuItemsEl) {
       this.menuItemsEl = menuItemsEl;

From b37df7476310f94cb00355bcc17a4aa65e12f5cf Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Thu, 7 Mar 2024 00:05:14 +0100
Subject: [PATCH 59/74] move guide

---
 web_src/js/webcomponents/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web_src/js/webcomponents/README.md b/web_src/js/webcomponents/README.md
index 92094da8e6407..45af58e1d221d 100644
--- a/web_src/js/webcomponents/README.md
+++ b/web_src/js/webcomponents/README.md
@@ -6,6 +6,6 @@ https://developer.mozilla.org/en-US/docs/Web/Web_Components
 
 # Guidelines
 
-* All our components must be added to `webpack.config.js` so they work correctly in Vue.
 * These components are loaded in `<head>` (before DOM body) in a separate entry point, they need to be lightweight to not affect the page loading time too much.
 * Do not import `svg.js` into a web component because that file is currently not tree-shakeable, import svg files individually insteat.
+* All our components must be added to `webpack.config.js` so they work correctly in Vue.

From 680b0329337a9b80b110f70dd7b8cbc42fc7c2b9 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Thu, 7 Mar 2024 00:05:57 +0100
Subject: [PATCH 60/74] remove unneeded polyfill, available in palemoon now

---
 package-lock.json                     | 6 ------
 package.json                          | 1 -
 web_src/js/webcomponents/polyfills.js | 2 --
 3 files changed, 9 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 6a6eb4b947836..cdd8492e7db63 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,7 +15,6 @@
         "@github/text-expander-element": "2.6.1",
         "@mcaptcha/vanilla-glue": "0.1.0-alpha-3",
         "@primer/octicons": "19.8.0",
-        "@webcomponents/custom-elements": "1.6.0",
         "add-asset-webpack-plugin": "2.0.1",
         "ansi_up": "6.0.2",
         "asciinema-player": "3.7.0",
@@ -2843,11 +2842,6 @@
         "@xtuc/long": "4.2.2"
       }
     },
-    "node_modules/@webcomponents/custom-elements": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/@webcomponents/custom-elements/-/custom-elements-1.6.0.tgz",
-      "integrity": "sha512-CqTpxOlUCPWRNUPZDxT5v2NnHXA4oox612iUGnmTUGQFhZ1Gkj8kirtl/2wcF6MqX7+PqqicZzOCBKKfIn0dww=="
-    },
     "node_modules/@webpack-cli/configtest": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-2.1.1.tgz",
diff --git a/package.json b/package.json
index d5e8170228c8b..aba5e599c5fbd 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,6 @@
     "@github/text-expander-element": "2.6.1",
     "@mcaptcha/vanilla-glue": "0.1.0-alpha-3",
     "@primer/octicons": "19.8.0",
-    "@webcomponents/custom-elements": "1.6.0",
     "add-asset-webpack-plugin": "2.0.1",
     "ansi_up": "6.0.2",
     "asciinema-player": "3.7.0",
diff --git a/web_src/js/webcomponents/polyfills.js b/web_src/js/webcomponents/polyfills.js
index 18277153394b4..88c7276881313 100644
--- a/web_src/js/webcomponents/polyfills.js
+++ b/web_src/js/webcomponents/polyfills.js
@@ -1,5 +1,3 @@
-import '@webcomponents/custom-elements'; // polyfill for some browsers like PaleMoon
-
 try {
   // some browsers like PaleMoon don't have full support for Intl.NumberFormat, so do the minimum polyfill to support "relative-time-element"
   // https://repo.palemoon.org/MoonchildProductions/UXP/issues/2289

From d524b2489982c49ec679419f5b2a50d9a0250b0e Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Thu, 7 Mar 2024 00:15:39 +0100
Subject: [PATCH 61/74] de-intend via early exit button removal

---
 web_src/js/webcomponents/overflow-menu.js | 73 ++++++++++++-----------
 1 file changed, 38 insertions(+), 35 deletions(-)

diff --git a/web_src/js/webcomponents/overflow-menu.js b/web_src/js/webcomponents/overflow-menu.js
index e45b0f2b8e25a..7b3479d228fd0 100644
--- a/web_src/js/webcomponents/overflow-menu.js
+++ b/web_src/js/webcomponents/overflow-menu.js
@@ -28,46 +28,49 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
       }
     }
 
-    if (this.tippyItems?.length) {
-      // remove aria-role from items that moved from tippy to menu
-      for (const item of menuItems) {
-        if (!this.tippyItems.includes(item)) {
-          item.removeAttribute('aria-role');
-        }
-      }
-
-      // move all items that overflow into tippy
-      for (const item of this.tippyItems) {
-        item.setAttribute('aria-role', 'menuitem');
-        this.tippyContent.append(item);
-      }
+    // if there are no overflown items, remove any previously created button
+    if (!this.tippyItems?.length) {
+      const btn = this.querySelector('.overflow-menu-button');
+      btn?._tippy?.destroy();
+      btn?.remove();
+      return;
+    }
 
-      // update existing tippy
-      if (this.button?._tippy) {
-        this.button._tippy.setContent(this.tippyContent);
-        return;
+    // remove aria-role from items that moved from tippy to menu
+    for (const item of menuItems) {
+      if (!this.tippyItems.includes(item)) {
+        item.removeAttribute('aria-role');
       }
+    }
 
-      const btn = document.createElement('button');
-      btn.classList.add('overflow-menu-button', 'btn', 'tw-px-2', 'hover:tw-text-text-dark');
-      btn.setAttribute('aria-label', window.config.i18n.additional_options);
-      btn.innerHTML = octiconKebabHorizontal;
-      this.append(btn);
-      this.button = btn;
+    // move all items that overflow into tippy
+    for (const item of this.tippyItems) {
+      item.setAttribute('aria-role', 'menuitem');
+      this.tippyContent.append(item);
+    }
 
-      createTippy(btn, {
-        trigger: 'click',
-        hideOnClick: true,
-        interactive: true,
-        placement: 'bottom-end',
-        role: 'menu',
-        content: this.tippyContent,
-      });
-    } else {
-      const btn = this.querySelector('.overflow-menu-button');
-      btn?._tippy?.destroy();
-      btn?.remove();
+    // update existing tippy
+    if (this.button?._tippy) {
+      this.button._tippy.setContent(this.tippyContent);
+      return;
     }
+
+    // create button initially
+    const btn = document.createElement('button');
+    btn.classList.add('overflow-menu-button', 'btn', 'tw-px-2', 'hover:tw-text-text-dark');
+    btn.setAttribute('aria-label', window.config.i18n.additional_options);
+    btn.innerHTML = octiconKebabHorizontal;
+    this.append(btn);
+    this.button = btn;
+
+    createTippy(btn, {
+      trigger: 'click',
+      hideOnClick: true,
+      interactive: true,
+      placement: 'bottom-end',
+      role: 'menu',
+      content: this.tippyContent,
+    });
   });
 
   init() {

From 40bfc8b148830be33c6b0c40d6799da1012ea0d1 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Tue, 12 Mar 2024 22:52:28 +0100
Subject: [PATCH 62/74] add padding

---
 web_src/css/modules/tippy.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web_src/css/modules/tippy.css b/web_src/css/modules/tippy.css
index 50a5b8073abd5..50d97e60b3d0b 100644
--- a/web_src/css/modules/tippy.css
+++ b/web_src/css/modules/tippy.css
@@ -55,7 +55,7 @@
 }
 
 .tippy-box[data-theme="menu"] .tippy-content {
-  padding: 0;
+  padding: 4px 0;
 }
 
 .tippy-box[data-theme="menu"] .tippy-svg-arrow-inner {

From 98893a405610c8278dd0883f5877f4bb1de8d07e Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Tue, 12 Mar 2024 23:06:09 +0100
Subject: [PATCH 63/74] use 'More items'

---
 options/locale/locale_en-US.ini           | 2 +-
 templates/base/head_script.tmpl           | 2 +-
 web_src/js/webcomponents/overflow-menu.js | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini
index 41031e53a506d..68a7de21fc3c6 100644
--- a/options/locale/locale_en-US.ini
+++ b/options/locale/locale_en-US.ini
@@ -25,7 +25,7 @@ enable_javascript = This website requires JavaScript.
 toc = Table of Contents
 licenses = Licenses
 return_to_gitea = Return to Gitea
-additional_options = Additional options
+more_items = More items
 
 username = Username
 email = Email Address
diff --git a/templates/base/head_script.tmpl b/templates/base/head_script.tmpl
index fc33f423f0cbe..22e08e9c8f69c 100644
--- a/templates/base/head_script.tmpl
+++ b/templates/base/head_script.tmpl
@@ -41,7 +41,7 @@ If you introduce mistakes in it, Gitea JavaScript code wouldn't run correctly.
 			remove_label_str: {{ctx.Locale.Tr "remove_label_str"}},
 			modal_confirm: {{ctx.Locale.Tr "modal.confirm"}},
 			modal_cancel: {{ctx.Locale.Tr "modal.cancel"}},
-			additional_options: {{ctx.Locale.Tr "additional_options"}},
+			more_items: {{ctx.Locale.Tr "more_items"}},
 		},
 	};
 	{{/* in case some pages don't render the pageData, we make sure it is an object to prevent null access */}}
diff --git a/web_src/js/webcomponents/overflow-menu.js b/web_src/js/webcomponents/overflow-menu.js
index 7b3479d228fd0..8cc7b7a401c82 100644
--- a/web_src/js/webcomponents/overflow-menu.js
+++ b/web_src/js/webcomponents/overflow-menu.js
@@ -58,7 +58,7 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
     // create button initially
     const btn = document.createElement('button');
     btn.classList.add('overflow-menu-button', 'btn', 'tw-px-2', 'hover:tw-text-text-dark');
-    btn.setAttribute('aria-label', window.config.i18n.additional_options);
+    btn.setAttribute('aria-label', window.config.i18n.more_items);
     btn.innerHTML = octiconKebabHorizontal;
     this.append(btn);
     this.button = btn;

From cd77433f9cc41287e8a0a3006f7b66a055b12ebf Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Tue, 12 Mar 2024 23:17:18 +0100
Subject: [PATCH 64/74] tippy fixes, add missing box-shadow

---
 web_src/css/modules/tippy.css | 4 ++++
 web_src/js/modules/tippy.js   | 9 ++++-----
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/web_src/css/modules/tippy.css b/web_src/css/modules/tippy.css
index 50d97e60b3d0b..ade01ba8de895 100644
--- a/web_src/css/modules/tippy.css
+++ b/web_src/css/modules/tippy.css
@@ -77,6 +77,10 @@
 
 /* box-with-header theme to look like .ui.attached.segment. can contain .ui.attached.header */
 
+.tippy-box[data-theme="box-with-header"] {
+  box-shadow: 0 6px 18px var(--color-shadow);
+}
+
 .tippy-box[data-theme="box-with-header"] .tippy-content {
   background: var(--color-box-body);
   border-radius: var(--border-radius);
diff --git a/web_src/js/modules/tippy.js b/web_src/js/modules/tippy.js
index b046098d42f91..8323865cb1c02 100644
--- a/web_src/js/modules/tippy.js
+++ b/web_src/js/modules/tippy.js
@@ -7,7 +7,7 @@ const visibleInstances = new Set();
 export function createTippy(target, opts = {}) {
   // the callback functions should be destructured from opts,
   // because we should use our own wrapper functions to handle them, do not let the user override them
-  const {onHide, onShow, onDestroy, trigger, ...other} = opts;
+  const {onHide, onShow, onDestroy, role, theme, ...other} = opts;
 
   const instance = tippy(target, {
     appendTo: document.body,
@@ -36,14 +36,13 @@ export function createTippy(target, opts = {}) {
       return onShow?.(instance);
     },
     arrow: `<svg width="16" height="7"><path d="m0 7 8-7 8 7Z" class="tippy-svg-arrow-outer"/><path d="m0 8 8-7 8 7Z" class="tippy-svg-arrow-inner"/></svg>`,
-    role: 'menu', // HTML role attribute, only tooltips should use "tooltip"
-    theme: other.role || 'menu', // CSS theme, either "tooltip", "menu" or "box-with-header"
+    role: role || 'menu', // HTML role attribute
+    theme: theme || role || 'menu', // CSS theme, either "tooltip", "menu" or "box-with-header"
     plugins: [followCursor],
-    trigger,
     ...other,
   });
 
-  if (trigger === 'click') {
+  if (role === 'menu') {
     target.setAttribute('aria-haspopup', 'menu');
   }
 

From b3703f814b68a67b5fbe872ab47359442163bd77 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Wed, 13 Mar 2024 00:53:03 +0100
Subject: [PATCH 65/74] add navigation role

---
 web_src/js/webcomponents/overflow-menu.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/web_src/js/webcomponents/overflow-menu.js b/web_src/js/webcomponents/overflow-menu.js
index 8cc7b7a401c82..13ce411a9d514 100644
--- a/web_src/js/webcomponents/overflow-menu.js
+++ b/web_src/js/webcomponents/overflow-menu.js
@@ -91,6 +91,8 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
   }
 
   connectedCallback() {
+    this.setAttribute('role', 'navigation');
+
     // check whether the mandatory `.overflow-menu-items` element is present initially which happens
     // with Vue which renders differently than browsers. If it's not there, like in the case of browser
     // template rendering, wait for its addition.

From 84a7d6b5d29b0a7aeaab1165a7e8c40652e476de Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Wed, 13 Mar 2024 13:50:50 +0800
Subject: [PATCH 66/74] fix incorrect aria attribute

---
 templates/repo/view_file.tmpl             | 6 +++---
 web_src/js/webcomponents/overflow-menu.js | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/templates/repo/view_file.tmpl b/templates/repo/view_file.tmpl
index c059b7a4091bb..cdd415a47a99b 100644
--- a/templates/repo/view_file.tmpl
+++ b/templates/repo/view_file.tmpl
@@ -137,10 +137,10 @@
 				</table>
 				<div class="code-line-menu tippy-target">
 					{{if $.Permission.CanRead $.UnitTypeIssues}}
-						<a class="item ref-in-new-issue" aria-role="menuitem" data-url-issue-new="{{.RepoLink}}/issues/new" data-url-param-body-link="{{.Repository.Link}}/src/commit/{{PathEscape .CommitID}}/{{PathEscapeSegments .TreePath}}{{if $.HasSourceRenderedToggle}}?display=source{{end}}" rel="nofollow noindex">{{ctx.Locale.Tr "repo.issues.context.reference_issue"}}</a>
+						<a class="item ref-in-new-issue" role="menuitem" data-url-issue-new="{{.RepoLink}}/issues/new" data-url-param-body-link="{{.Repository.Link}}/src/commit/{{PathEscape .CommitID}}/{{PathEscapeSegments .TreePath}}{{if $.HasSourceRenderedToggle}}?display=source{{end}}" rel="nofollow noindex">{{ctx.Locale.Tr "repo.issues.context.reference_issue"}}</a>
 					{{end}}
-					<a class="item view_git_blame" aria-role="menuitem" href="{{.Repository.Link}}/blame/commit/{{PathEscape .CommitID}}/{{PathEscapeSegments .TreePath}}">{{ctx.Locale.Tr "repo.view_git_blame"}}</a>
-					<a class="item copy-line-permalink" aria-role="menuitem" data-url="{{.Repository.Link}}/src/commit/{{PathEscape .CommitID}}/{{PathEscapeSegments .TreePath}}{{if $.HasSourceRenderedToggle}}?display=source{{end}}">{{ctx.Locale.Tr "repo.file_copy_permalink"}}</a>
+					<a class="item view_git_blame" role="menuitem" href="{{.Repository.Link}}/blame/commit/{{PathEscape .CommitID}}/{{PathEscapeSegments .TreePath}}">{{ctx.Locale.Tr "repo.view_git_blame"}}</a>
+					<a class="item copy-line-permalink" role="menuitem" data-url="{{.Repository.Link}}/src/commit/{{PathEscape .CommitID}}/{{PathEscapeSegments .TreePath}}{{if $.HasSourceRenderedToggle}}?display=source{{end}}">{{ctx.Locale.Tr "repo.file_copy_permalink"}}</a>
 				</div>
 				{{end}}
 			{{end}}
diff --git a/web_src/js/webcomponents/overflow-menu.js b/web_src/js/webcomponents/overflow-menu.js
index 13ce411a9d514..335d4e76fb49c 100644
--- a/web_src/js/webcomponents/overflow-menu.js
+++ b/web_src/js/webcomponents/overflow-menu.js
@@ -36,16 +36,16 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
       return;
     }
 
-    // remove aria-role from items that moved from tippy to menu
+    // remove aria role from items that moved from tippy to menu
     for (const item of menuItems) {
       if (!this.tippyItems.includes(item)) {
-        item.removeAttribute('aria-role');
+        item.removeAttribute('role');
       }
     }
 
     // move all items that overflow into tippy
     for (const item of this.tippyItems) {
-      item.setAttribute('aria-role', 'menuitem');
+      item.setAttribute('role', 'menuitem');
       this.tippyContent.append(item);
     }
 

From 9c2fdb97353f3307208ebe98e6a76ce25acc6a0f Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Wed, 13 Mar 2024 14:47:59 +0800
Subject: [PATCH 67/74] add basic aria support

---
 web_src/js/modules/tippy.js               |  2 +-
 web_src/js/webcomponents/overflow-menu.js | 30 +++++++++++++++++++++++
 2 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/web_src/js/modules/tippy.js b/web_src/js/modules/tippy.js
index 8323865cb1c02..e7eb39f457607 100644
--- a/web_src/js/modules/tippy.js
+++ b/web_src/js/modules/tippy.js
@@ -43,7 +43,7 @@ export function createTippy(target, opts = {}) {
   });
 
   if (role === 'menu') {
-    target.setAttribute('aria-haspopup', 'menu');
+    target.setAttribute('aria-haspopup', 'true');
   }
 
   return instance;
diff --git a/web_src/js/webcomponents/overflow-menu.js b/web_src/js/webcomponents/overflow-menu.js
index 335d4e76fb49c..8e98ef6b49a70 100644
--- a/web_src/js/webcomponents/overflow-menu.js
+++ b/web_src/js/webcomponents/overflow-menu.js
@@ -8,6 +8,33 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
     if (!this.tippyContent) {
       const div = document.createElement('div');
       div.classList.add('tippy-target');
+      div.addEventListener('keydown', (e) => {
+        if (e.code === 'Tab') {
+          const items = this.tippyContent.querySelectorAll('[role="menuitem"]');
+          if (e.shiftKey) {
+            if (document.activeElement === items[0]) {
+              e.preventDefault();
+              items[items.length - 1].focus();
+            }
+          } else {
+            if (document.activeElement === items[items.length-1]) {
+              e.preventDefault();
+              items[0].focus();
+            }
+          }
+        } else if (e.code === 'Escape') {
+          e.preventDefault();
+          this.button._tippy.hide();
+          this.button.focus();
+        } else if (e.code === 'Space') {
+          // eslint-disable-next-line unicorn/no-lonely-if
+          if (document.activeElement.matches('[role="menuitem"]')) {
+            e.preventDefault();
+            document.activeElement.click();
+          }
+        }
+        // TODO: handle arrow keys (at the moment, tab&shift-tab also work)
+      });
       this.append(div);
       this.tippyContent = div;
     }
@@ -70,6 +97,9 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
       placement: 'bottom-end',
       role: 'menu',
       content: this.tippyContent,
+      onShow: () => { // FIXME: onShown doesn't work (never be called)
+        setTimeout(() => this.tippyContent.querySelector('[role="menuitem"]').focus());
+      },
     });
   });
 

From 0532acbec133f85878bbce2d74285ce2d8a1d417 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Wed, 13 Mar 2024 20:43:13 +0100
Subject: [PATCH 68/74] rename to gitea-absolute-date to absolute-date

---
 modules/timeutil/datetime.go                           |  2 +-
 modules/timeutil/datetime_test.go                      | 10 +++++-----
 templates/devtest/gitea-ui.tmpl                        | 10 +++++-----
 .../{GiteaAbsoluteDate.js => absolute-date.js}         |  2 +-
 web_src/js/webcomponents/index.js                      |  2 +-
 5 files changed, 13 insertions(+), 13 deletions(-)
 rename web_src/js/webcomponents/{GiteaAbsoluteDate.js => absolute-date.js} (95%)

diff --git a/modules/timeutil/datetime.go b/modules/timeutil/datetime.go
index 50c8d44f132be..3ae44cb714c30 100644
--- a/modules/timeutil/datetime.go
+++ b/modules/timeutil/datetime.go
@@ -56,7 +56,7 @@ func DateTime(format string, datetime any, extraAttrs ...string) template.HTML {
 	switch format {
 	case "short", "long": // date only
 		attrs = append(attrs, `month="`+format+`"`, `day="numeric"`)
-		return template.HTML(fmt.Sprintf(`<gitea-absolute-date %s date="%s">%s</gitea-absolute-date>`, strings.Join(attrs, " "), datetimeEscaped, textEscaped))
+		return template.HTML(fmt.Sprintf(`<absolute-date %s date="%s">%s</absolute-date>`, strings.Join(attrs, " "), datetimeEscaped, textEscaped))
 	case "full": // full date including time
 		attrs = append(attrs, `format="datetime"`, `month="short"`, `day="numeric"`, `hour="numeric"`, `minute="numeric"`, `second="numeric"`, `data-tooltip-content`, `data-tooltip-interactive="true"`)
 		return template.HTML(fmt.Sprintf(`<relative-time %s datetime="%s">%s</relative-time>`, strings.Join(attrs, " "), datetimeEscaped, textEscaped))
diff --git a/modules/timeutil/datetime_test.go b/modules/timeutil/datetime_test.go
index 39aecbc43bdf6..ac2ce35ba2731 100644
--- a/modules/timeutil/datetime_test.go
+++ b/modules/timeutil/datetime_test.go
@@ -28,19 +28,19 @@ func TestDateTime(t *testing.T) {
 	assert.EqualValues(t, "-", DateTime("short", TimeStamp(0)))
 
 	actual := DateTime("short", "invalid")
-	assert.EqualValues(t, `<gitea-absolute-date weekday="" year="numeric" month="short" day="numeric" date="invalid">invalid</gitea-absolute-date>`, actual)
+	assert.EqualValues(t, `<absolute-date weekday="" year="numeric" month="short" day="numeric" date="invalid">invalid</absolute-date>`, actual)
 
 	actual = DateTime("short", refTimeStr)
-	assert.EqualValues(t, `<gitea-absolute-date weekday="" year="numeric" month="short" day="numeric" date="2018-01-01T00:00:00Z">2018-01-01T00:00:00Z</gitea-absolute-date>`, actual)
+	assert.EqualValues(t, `<absolute-date weekday="" year="numeric" month="short" day="numeric" date="2018-01-01T00:00:00Z">2018-01-01T00:00:00Z</absolute-date>`, actual)
 
 	actual = DateTime("short", refTime)
-	assert.EqualValues(t, `<gitea-absolute-date weekday="" year="numeric" month="short" day="numeric" date="2018-01-01T00:00:00Z">2018-01-01</gitea-absolute-date>`, actual)
+	assert.EqualValues(t, `<absolute-date weekday="" year="numeric" month="short" day="numeric" date="2018-01-01T00:00:00Z">2018-01-01</absolute-date>`, actual)
 
 	actual = DateTime("short", refDateStr)
-	assert.EqualValues(t, `<gitea-absolute-date weekday="" year="numeric" month="short" day="numeric" date="2018-01-01">2018-01-01</gitea-absolute-date>`, actual)
+	assert.EqualValues(t, `<absolute-date weekday="" year="numeric" month="short" day="numeric" date="2018-01-01">2018-01-01</absolute-date>`, actual)
 
 	actual = DateTime("short", refTimeStamp)
-	assert.EqualValues(t, `<gitea-absolute-date weekday="" year="numeric" month="short" day="numeric" date="2017-12-31T19:00:00-05:00">2017-12-31</gitea-absolute-date>`, actual)
+	assert.EqualValues(t, `<absolute-date weekday="" year="numeric" month="short" day="numeric" date="2017-12-31T19:00:00-05:00">2017-12-31</absolute-date>`, actual)
 
 	actual = DateTime("full", refTimeStamp)
 	assert.EqualValues(t, `<relative-time weekday="" year="numeric" format="datetime" month="short" day="numeric" hour="numeric" minute="numeric" second="numeric" data-tooltip-content data-tooltip-interactive="true" datetime="2017-12-31T19:00:00-05:00">2017-12-31 19:00:00 -05:00</relative-time>`, actual)
diff --git a/templates/devtest/gitea-ui.tmpl b/templates/devtest/gitea-ui.tmpl
index 883fac47e59ac..0b1f982ee4f77 100644
--- a/templates/devtest/gitea-ui.tmpl
+++ b/templates/devtest/gitea-ui.tmpl
@@ -139,11 +139,11 @@
 
 	<div>
 		<h1>GiteaAbsoluteDate</h1>
-		<div><gitea-absolute-date date="2024-03-11" year="numeric" day="numeric" month="short"></gitea-absolute-date></div>
-		<div><gitea-absolute-date date="2024-03-11" year="numeric" day="numeric" month="long"></gitea-absolute-date></div>
-		<div><gitea-absolute-date date="2024-03-11" year="" day="numeric" month="numeric"></gitea-absolute-date></div>
-		<div><gitea-absolute-date date="2024-03-11" year="" day="numeric" month="numeric" weekday="long"></gitea-absolute-date></div>
-		<div><gitea-absolute-date date="2024-03-11T19:00:00-05:00" year="" day="numeric" month="numeric" weekday="long"></gitea-absolute-date></div>
+		<div><absolute-date date="2024-03-11" year="numeric" day="numeric" month="short"></absolute-date></div>
+		<div><absolute-date date="2024-03-11" year="numeric" day="numeric" month="long"></absolute-date></div>
+		<div><absolute-date date="2024-03-11" year="" day="numeric" month="numeric"></absolute-date></div>
+		<div><absolute-date date="2024-03-11" year="" day="numeric" month="numeric" weekday="long"></absolute-date></div>
+		<div><absolute-date date="2024-03-11T19:00:00-05:00" year="" day="numeric" month="numeric" weekday="long"></absolute-date></div>
 		<div class="tw-text-text-light-2">relative-time: <relative-time format="datetime" datetime="2024-03-11" year="" day="numeric" month="numeric"></relative-time></div>
 	</div>
 
diff --git a/web_src/js/webcomponents/GiteaAbsoluteDate.js b/web_src/js/webcomponents/absolute-date.js
similarity index 95%
rename from web_src/js/webcomponents/GiteaAbsoluteDate.js
rename to web_src/js/webcomponents/absolute-date.js
index 660aa99d07036..d12ea0a437ff5 100644
--- a/web_src/js/webcomponents/GiteaAbsoluteDate.js
+++ b/web_src/js/webcomponents/absolute-date.js
@@ -1,4 +1,4 @@
-window.customElements.define('gitea-absolute-date', class extends HTMLElement {
+window.customElements.define('absolute-date', class extends HTMLElement {
   static observedAttributes = ['date', 'year', 'month', 'weekday', 'day'];
 
   update = () => {
diff --git a/web_src/js/webcomponents/index.js b/web_src/js/webcomponents/index.js
index f89e111d63f1e..7cec9da734ce6 100644
--- a/web_src/js/webcomponents/index.js
+++ b/web_src/js/webcomponents/index.js
@@ -2,4 +2,4 @@ import './polyfills.js';
 import '@github/relative-time-element';
 import './origin-url.js';
 import './overflow-menu.js';
-import './GiteaAbsoluteDate.js';
+import './absolute-date.js';

From 1b8f7ffe97ce21977a747a235b938ad6f4db52b9 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Wed, 13 Mar 2024 20:44:33 +0100
Subject: [PATCH 69/74] add absolute-date to vue config

---
 webpack.config.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/webpack.config.js b/webpack.config.js
index 939d60af93d9c..742699e93cfea 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -46,6 +46,7 @@ const webComponents = new Set([
   // our own, in web_src/js/webcomponents
   'overflow-menu',
   'origin-url',
+  'absolute-date',
   // from dependencies
   'markdown-toolbar',
   'relative-time',

From 9f9fbee219f4164c94dc464d7b3ba78604660902 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Wed, 13 Mar 2024 20:46:20 +0100
Subject: [PATCH 70/74] fix lint

---
 web_src/js/webcomponents/overflow-menu.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web_src/js/webcomponents/overflow-menu.js b/web_src/js/webcomponents/overflow-menu.js
index 8e98ef6b49a70..25d066fe5354b 100644
--- a/web_src/js/webcomponents/overflow-menu.js
+++ b/web_src/js/webcomponents/overflow-menu.js
@@ -17,7 +17,7 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
               items[items.length - 1].focus();
             }
           } else {
-            if (document.activeElement === items[items.length-1]) {
+            if (document.activeElement === items[items.length - 1]) {
               e.preventDefault();
               items[0].focus();
             }

From 19d55ec145bb69921106f390c95de1e852fc16da Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Wed, 13 Mar 2024 21:17:30 +0100
Subject: [PATCH 71/74] add arrow key handling, move focus to target element
 initially

---
 web_src/css/modules/tippy.css             |  4 +++
 web_src/js/webcomponents/overflow-menu.js | 35 +++++++++++++++++------
 2 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/web_src/css/modules/tippy.css b/web_src/css/modules/tippy.css
index ade01ba8de895..76d36b42930f3 100644
--- a/web_src/css/modules/tippy.css
+++ b/web_src/css/modules/tippy.css
@@ -75,6 +75,10 @@
   background: var(--color-hover);
 }
 
+.tippy-box[data-theme="menu"] .item:focus {
+  background: var(--color-active);
+}
+
 /* box-with-header theme to look like .ui.attached.segment. can contain .ui.attached.header */
 
 .tippy-box[data-theme="box-with-header"] {
diff --git a/web_src/js/webcomponents/overflow-menu.js b/web_src/js/webcomponents/overflow-menu.js
index 25d066fe5354b..94e94630495e9 100644
--- a/web_src/js/webcomponents/overflow-menu.js
+++ b/web_src/js/webcomponents/overflow-menu.js
@@ -8,8 +8,9 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
     if (!this.tippyContent) {
       const div = document.createElement('div');
       div.classList.add('tippy-target');
+      div.tabIndex = '-1';
       div.addEventListener('keydown', (e) => {
-        if (e.code === 'Tab') {
+        if (e.key === 'Tab') {
           const items = this.tippyContent.querySelectorAll('[role="menuitem"]');
           if (e.shiftKey) {
             if (document.activeElement === items[0]) {
@@ -22,18 +23,34 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
               items[0].focus();
             }
           }
-        } else if (e.code === 'Escape') {
+        } else if (e.key === 'Escape') {
           e.preventDefault();
+          e.stopPropagation();
           this.button._tippy.hide();
           this.button.focus();
-        } else if (e.code === 'Space') {
-          // eslint-disable-next-line unicorn/no-lonely-if
-          if (document.activeElement.matches('[role="menuitem"]')) {
-            e.preventDefault();
+        } else if (e.key === ' ' || e.code === 'Enter') {
+          e.preventDefault();
+          e.stopPropagation();
+          if (document.activeElement?.matches('[role="menuitem"]')) {
             document.activeElement.click();
           }
+        } else if (e.key === 'ArrowDown') {
+          e.preventDefault();
+          e.stopPropagation();
+          if (document.activeElement?.matches('.tippy-target')) {
+            document.activeElement.querySelector('[role="menuitem"]').focus();
+          } else if (document.activeElement?.matches('[role="menuitem"]')) {
+            document.activeElement.nextElementSibling?.focus();
+          }
+        } else if (e.key === 'ArrowUp') {
+          e.preventDefault();
+          e.stopPropagation();
+          if (document.activeElement?.matches('.tippy-target')) {
+            document.activeElement.querySelector('[role="menuitem"]:last-of-type').focus();
+          } else if (document.activeElement?.matches('[role="menuitem"]')) {
+            document.activeElement.previousElementSibling?.focus();
+          }
         }
-        // TODO: handle arrow keys (at the moment, tab&shift-tab also work)
       });
       this.append(div);
       this.tippyContent = div;
@@ -98,7 +115,9 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
       role: 'menu',
       content: this.tippyContent,
       onShow: () => { // FIXME: onShown doesn't work (never be called)
-        setTimeout(() => this.tippyContent.querySelector('[role="menuitem"]').focus());
+        setTimeout(() => {
+          this.tippyContent.focus();
+        }, 0);
       },
     });
   });

From cbf3fc1a27e8653b5c43c226ad6260b6ec226d0d Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Wed, 13 Mar 2024 21:32:07 +0100
Subject: [PATCH 72/74] fix unfocusable vue links

---
 web_src/js/components/DashboardRepoList.vue | 10 +++++-----
 web_src/js/webcomponents/overflow-menu.js   |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/web_src/js/components/DashboardRepoList.vue b/web_src/js/components/DashboardRepoList.vue
index 0278151bb607b..29f278d8ae9b4 100644
--- a/web_src/js/components/DashboardRepoList.vue
+++ b/web_src/js/components/DashboardRepoList.vue
@@ -386,23 +386,23 @@ export default sfc; // activate the IDE's Vue plugin
         </div>
         <overflow-menu class="ui secondary pointing tabular borderless menu repos-filter">
           <div class="overflow-menu-items tw-justify-center">
-            <a class="item" :class="{active: reposFilter === 'all'}" @click="changeReposFilter('all')">
+            <a class="item" tabindex="0" :class="{active: reposFilter === 'all'}" @click="changeReposFilter('all')">
               {{ textAll }}
               <div v-show="reposFilter === 'all'" class="ui circular mini grey label">{{ repoTypeCount }}</div>
             </a>
-            <a class="item" :class="{active: reposFilter === 'sources'}" @click="changeReposFilter('sources')">
+            <a class="item" tabindex="0" :class="{active: reposFilter === 'sources'}" @click="changeReposFilter('sources')">
               {{ textSources }}
               <div v-show="reposFilter === 'sources'" class="ui circular mini grey label">{{ repoTypeCount }}</div>
             </a>
-            <a class="item" :class="{active: reposFilter === 'forks'}" @click="changeReposFilter('forks')">
+            <a class="item" tabindex="0" :class="{active: reposFilter === 'forks'}" @click="changeReposFilter('forks')">
               {{ textForks }}
               <div v-show="reposFilter === 'forks'" class="ui circular mini grey label">{{ repoTypeCount }}</div>
             </a>
-            <a class="item" :class="{active: reposFilter === 'mirrors'}" @click="changeReposFilter('mirrors')" v-if="isMirrorsEnabled">
+            <a class="item" tabindex="0" :class="{active: reposFilter === 'mirrors'}" @click="changeReposFilter('mirrors')" v-if="isMirrorsEnabled">
               {{ textMirrors }}
               <div v-show="reposFilter === 'mirrors'" class="ui circular mini grey label">{{ repoTypeCount }}</div>
             </a>
-            <a class="item" :class="{active: reposFilter === 'collaborative'}" @click="changeReposFilter('collaborative')">
+            <a class="item" tabindex="0" :class="{active: reposFilter === 'collaborative'}" @click="changeReposFilter('collaborative')">
               {{ textCollaborative }}
               <div v-show="reposFilter === 'collaborative'" class="ui circular mini grey label">{{ repoTypeCount }}</div>
             </a>
diff --git a/web_src/js/webcomponents/overflow-menu.js b/web_src/js/webcomponents/overflow-menu.js
index 94e94630495e9..b57498df52415 100644
--- a/web_src/js/webcomponents/overflow-menu.js
+++ b/web_src/js/webcomponents/overflow-menu.js
@@ -38,7 +38,7 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
           e.preventDefault();
           e.stopPropagation();
           if (document.activeElement?.matches('.tippy-target')) {
-            document.activeElement.querySelector('[role="menuitem"]').focus();
+            document.activeElement.querySelector('[role="menuitem"]:first-of-type').focus();
           } else if (document.activeElement?.matches('[role="menuitem"]')) {
             document.activeElement.nextElementSibling?.focus();
           }

From 05df5b69280e25cee31ae06fc1bf151522d47382 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Wed, 13 Mar 2024 22:07:07 +0100
Subject: [PATCH 73/74] add comment

---
 web_src/js/webcomponents/overflow-menu.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web_src/js/webcomponents/overflow-menu.js b/web_src/js/webcomponents/overflow-menu.js
index b57498df52415..a1a9a38cf6a67 100644
--- a/web_src/js/webcomponents/overflow-menu.js
+++ b/web_src/js/webcomponents/overflow-menu.js
@@ -8,7 +8,7 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
     if (!this.tippyContent) {
       const div = document.createElement('div');
       div.classList.add('tippy-target');
-      div.tabIndex = '-1';
+      div.tabIndex = '-1'; // for initial focus, programmatic focus only
       div.addEventListener('keydown', (e) => {
         if (e.key === 'Tab') {
           const items = this.tippyContent.querySelectorAll('[role="menuitem"]');

From 97ed9ed33f871d36c5885f50ccc868d5fe6383bf Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Thu, 14 Mar 2024 21:48:23 +0100
Subject: [PATCH 74/74] move prevent/stop into conditionals

---
 web_src/js/webcomponents/overflow-menu.js | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/web_src/js/webcomponents/overflow-menu.js b/web_src/js/webcomponents/overflow-menu.js
index a1a9a38cf6a67..9fa45855677fe 100644
--- a/web_src/js/webcomponents/overflow-menu.js
+++ b/web_src/js/webcomponents/overflow-menu.js
@@ -29,25 +29,29 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
           this.button._tippy.hide();
           this.button.focus();
         } else if (e.key === ' ' || e.code === 'Enter') {
-          e.preventDefault();
-          e.stopPropagation();
           if (document.activeElement?.matches('[role="menuitem"]')) {
+            e.preventDefault();
+            e.stopPropagation();
             document.activeElement.click();
           }
         } else if (e.key === 'ArrowDown') {
-          e.preventDefault();
-          e.stopPropagation();
           if (document.activeElement?.matches('.tippy-target')) {
+            e.preventDefault();
+            e.stopPropagation();
             document.activeElement.querySelector('[role="menuitem"]:first-of-type').focus();
           } else if (document.activeElement?.matches('[role="menuitem"]')) {
+            e.preventDefault();
+            e.stopPropagation();
             document.activeElement.nextElementSibling?.focus();
           }
         } else if (e.key === 'ArrowUp') {
-          e.preventDefault();
-          e.stopPropagation();
           if (document.activeElement?.matches('.tippy-target')) {
+            e.preventDefault();
+            e.stopPropagation();
             document.activeElement.querySelector('[role="menuitem"]:last-of-type').focus();
           } else if (document.activeElement?.matches('[role="menuitem"]')) {
+            e.preventDefault();
+            e.stopPropagation();
             document.activeElement.previousElementSibling?.focus();
           }
         }