diff --git a/.dockerignore b/.dockerignore
index 80cbeb040cf87..fc7da40dbe99c 100644
--- a/.dockerignore
+++ b/.dockerignore
@@ -75,10 +75,8 @@ cpu.out
 /yarn.lock
 /yarn-error.log
 /npm-debug.log*
-/public/assets/js
-/public/assets/css
-/public/assets/fonts
-/public/assets/img/webpack
+/public/assets/*
+!/public/assets/img
 /vendor
 /web_src/fomantic/node_modules
 /web_src/fomantic/build/*
diff --git a/.gitignore b/.gitignore
index 6b699e08700f3..2a5f013dde2ec 100644
--- a/.gitignore
+++ b/.gitignore
@@ -72,10 +72,8 @@ cpu.out
 /yarn.lock
 /yarn-error.log
 /npm-debug.log*
-/public/assets/js
-/public/assets/css
-/public/assets/fonts
-/public/assets/img/webpack
+/public/assets/*
+!/public/assets/img
 /vendor
 /web_src/fomantic/node_modules
 /web_src/fomantic/build/*
diff --git a/Makefile b/Makefile
index 167f56c6b9266..7e1bdcd2a161b 100644
--- a/Makefile
+++ b/Makefile
@@ -116,8 +116,7 @@ FOMANTIC_WORK_DIR := web_src/fomantic
 
 WEBPACK_SOURCES := $(shell find web_src/js web_src/css -type f)
 WEBPACK_CONFIGS := webpack.config.js
-WEBPACK_DEST := public/assets/js/index.js public/assets/css/index.css
-WEBPACK_DEST_ENTRIES := public/assets/js public/assets/css public/assets/fonts public/assets/img/webpack
+WEBPACK_DEST := public/assets/index.js public/assets/index.css
 
 BINDATA_DEST := modules/public/bindata.go modules/options/bindata.go modules/templates/bindata.go
 BINDATA_HASH := $(addsuffix .hash,$(BINDATA_DEST))
@@ -271,8 +270,9 @@ node-check:
 	fi
 
 .PHONY: clean-all
-clean-all: clean
-	rm -rf $(WEBPACK_DEST_ENTRIES) node_modules
+clean-all:
+	$(eval WEBPACK_ASSETS := $(filter-out public/assets/img, $(wildcard public/assets/*)))
+	@rm -rf $(WEBPACK_ASSETS) node_modules
 
 .PHONY: clean
 clean:
@@ -433,7 +433,6 @@ watch:
 
 .PHONY: watch-frontend
 watch-frontend: node-check node_modules
-	@rm -rf $(WEBPACK_DEST_ENTRIES)
 	NODE_ENV=development npx webpack --watch --progress
 
 .PHONY: watch-backend
@@ -950,7 +949,6 @@ webpack: $(WEBPACK_DEST)
 
 $(WEBPACK_DEST): $(WEBPACK_SOURCES) $(WEBPACK_CONFIGS) package-lock.json
 	@$(MAKE) -s node-check node_modules
-	rm -rf $(WEBPACK_DEST_ENTRIES)
 	npx webpack
 	@touch $(WEBPACK_DEST)
 
diff --git a/package-lock.json b/package-lock.json
index 87288565bc943..fdcbd94bd1bcd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,7 +27,6 @@
         "escape-goat": "4.0.0",
         "fast-glob": "3.3.0",
         "jquery": "3.7.0",
-        "jquery.are-you-sure": "1.9.0",
         "katex": "0.16.8",
         "license-checker-webpack-plugin": "0.2.1",
         "lightningcss-loader": "2.1.0",
@@ -6511,17 +6510,6 @@
       "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.0.tgz",
       "integrity": "sha512-umpJ0/k8X0MvD1ds0P9SfowREz2LenHsQaxSohMZ5OMNEU2r0tf8pdeEFTHMFxWVxKNyU9rTtK3CWzUCTKJUeQ=="
     },
-    "node_modules/jquery.are-you-sure": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/jquery.are-you-sure/-/jquery.are-you-sure-1.9.0.tgz",
-      "integrity": "sha512-2r0uFx8CyAopjeHGOdvvwpFP921TnW1+v1uJXcAWQYHYGB1tryTDhQY+5u6HsVeMwbWiRTKVZFWnLaFpDvIqZQ==",
-      "dependencies": {
-        "jquery": ">=1.4.2"
-      },
-      "engines": {
-        "node": ">=0.8.0"
-      }
-    },
     "node_modules/js-levenshtein-esm": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/js-levenshtein-esm/-/js-levenshtein-esm-1.2.0.tgz",
diff --git a/package.json b/package.json
index 571de3acf526b..5620726f25afb 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,6 @@
     "escape-goat": "4.0.0",
     "fast-glob": "3.3.0",
     "jquery": "3.7.0",
-    "jquery.are-you-sure": "1.9.0",
     "katex": "0.16.8",
     "license-checker-webpack-plugin": "0.2.1",
     "lightningcss-loader": "2.1.0",
diff --git a/templates/base/footer.tmpl b/templates/base/footer.tmpl
index e3cac806a4d91..2b1922d31a906 100644
--- a/templates/base/footer.tmpl
+++ b/templates/base/footer.tmpl
@@ -25,7 +25,7 @@
 		<script src='https://challenges.cloudflare.com/turnstile/v0/api.js'></script>
 	{{end}}
 {{end}}
-	<script src="{{AssetUrlPrefix}}/js/index.js?v={{AssetVersion}}" onerror="alert('Failed to load asset files from ' + this.src + '. Please make sure the asset files can be accessed.')"></script>
+	<script type="module" src="{{AssetUrlPrefix}}/index.js?v={{AssetVersion}}" onerror="alert('Failed to load asset files from ' + this.src + '. Please make sure the asset files can be accessed.')"></script>
 {{template "custom/footer" .}}
 </body>
 </html>
diff --git a/templates/base/footer_content.tmpl b/templates/base/footer_content.tmpl
index 3b87f25d63786..cf647f1cc60ef 100644
--- a/templates/base/footer_content.tmpl
+++ b/templates/base/footer_content.tmpl
@@ -23,7 +23,7 @@
 				{{end}}
 			</div>
 		</div>
-		<a href="{{AssetUrlPrefix}}/js/licenses.txt">{{.locale.Tr "licenses"}}</a>
+		<a href="{{AssetUrlPrefix}}/licenses.txt">{{.locale.Tr "licenses"}}</a>
 		{{if .EnableSwagger}}<a href="{{AppSubUrl}}/api/swagger">API</a>{{end}}
 		{{template "custom/extra_links_footer" .}}
 	</div>
diff --git a/templates/base/head_script.tmpl b/templates/base/head_script.tmpl
index c7477ff4c0f2e..a8aa6439f198d 100644
--- a/templates/base/head_script.tmpl
+++ b/templates/base/head_script.tmpl
@@ -4,7 +4,10 @@ If you are customizing Gitea, please do not change this file.
 If you introduce mistakes in it, Gitea JavaScript code wouldn't run correctly.
 */}}
 <script>
-	window.addEventListener('error', function(e) {window._globalHandlerErrors=window._globalHandlerErrors||[]; window._globalHandlerErrors.push(e);});
+	window._globalHandlerErrors = [];
+	window.addEventListener('error', function(e) {
+		window._globalHandlerErrors.push(e);
+	});
 	window.config = {
 		appUrl: '{{AppUrl}}',
 		appSubUrl: '{{AppSubUrl}}',
@@ -44,4 +47,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 src="{{AssetUrlPrefix}}/js/webcomponents.js?v={{AssetVersion}}"></script>
+{{/* not using type=module to avoid flicker from automatic defer attribute */}}
+<script src="{{AssetUrlPrefix}}/webcomponents.js?v={{AssetVersion}}"></script>
diff --git a/templates/base/head_style.tmpl b/templates/base/head_style.tmpl
index 7e8cba2aedde0..85bfaac41a429 100644
--- a/templates/base/head_style.tmpl
+++ b/templates/base/head_style.tmpl
@@ -1,8 +1,8 @@
-<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/index.css?v={{AssetVersion}}">
+<link rel="stylesheet" href="{{AssetUrlPrefix}}/index.css?v={{AssetVersion}}">
 {{if .IsSigned}}
 	{{if ne .SignedUser.Theme "gitea"}}
-		<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/theme-{{.SignedUser.Theme | PathEscape}}.css?v={{AssetVersion}}">
+		<link rel="stylesheet" href="{{AssetUrlPrefix}}/theme-{{.SignedUser.Theme | PathEscape}}.css?v={{AssetVersion}}">
 	{{end}}
 {{else if ne DefaultTheme "gitea"}}
-	<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/theme-{{DefaultTheme | PathEscape}}.css?v={{AssetVersion}}">
+	<link rel="stylesheet" href="{{AssetUrlPrefix}}/theme-{{DefaultTheme | PathEscape}}.css?v={{AssetVersion}}">
 {{end}}
diff --git a/templates/devtest/fetch-action.tmpl b/templates/devtest/fetch-action.tmpl
index 70844a8751ab3..368d02121939d 100644
--- a/templates/devtest/fetch-action.tmpl
+++ b/templates/devtest/fetch-action.tmpl
@@ -1,4 +1,5 @@
 {{template "base/head" .}}
+<link rel="stylesheet" href="{{AssetUrlPrefix}}/devtest.css?v={{AssetVersion}}">
 <div class="page-content devtest ui container">
 	{{template "base/alert" .}}
 	<div>
diff --git a/templates/devtest/fomantic-modal.tmpl b/templates/devtest/fomantic-modal.tmpl
index 799bab7594e2b..d73c89aa79570 100644
--- a/templates/devtest/fomantic-modal.tmpl
+++ b/templates/devtest/fomantic-modal.tmpl
@@ -1,4 +1,5 @@
 {{template "base/head" .}}
+<link rel="stylesheet" href="{{AssetUrlPrefix}}/devtest.css?v={{AssetVersion}}">
 <div class="page-content devtest ui container">
 	{{template "base/alert" .}}
 
@@ -47,16 +48,5 @@
 	</div>
 
 	<div class="modal-buttons"></div>
-	<script type="module">
-		for (const el of $('.ui.modal')) {
-			const $btn = $('<button>').text(`Show ${el.id}`).on('click', () => {
-				$(el).modal({onApprove() {alert('confirmed')}}).modal('show');
-			});
-			$('.modal-buttons').append($btn);
-		}
-	</script>
-	<style>
-		.modal-buttons button { margin: 5px; }
-	</style>
 </div>
 {{template "base/footer" .}}
diff --git a/templates/devtest/gitea-ui.tmpl b/templates/devtest/gitea-ui.tmpl
index 8b31957f2e0c4..9a2ca3e838f2a 100644
--- a/templates/devtest/gitea-ui.tmpl
+++ b/templates/devtest/gitea-ui.tmpl
@@ -1,5 +1,5 @@
 {{template "base/head" .}}
-<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/devtest.css?v={{AssetVersion}}">
+<link rel="stylesheet" href="{{AssetUrlPrefix}}/devtest.css?v={{AssetVersion}}">
 <div class="page-content devtest ui container">
 	<div>
 		<h1>Button</h1>
@@ -67,15 +67,6 @@
 					</div>
 				</li>
 			</ul>
-			<script type="module">
-				const $buttons = $('#devtest-button-samples').find('button.ui');
-
-				const $buttonStyles = $('input[name*="button-style"]');
-				$buttonStyles.on('click', () => $buttonStyles.map((_ ,el) => $buttons.toggleClass(el.value, el.checked)));
-
-				const $buttonStates = $('input[name*="button-state"]');
-				$buttonStates.on('click', () => $buttonStates.map((_ ,el) => $buttons.prop(el.value, el.checked)));
-			</script>
 		</div>
 	</div>
 
@@ -252,6 +243,5 @@
 		<div>ps: no JS code attached, so just a layout</div>
 		{{template "shared/combomarkdowneditor" .}}
 	</div>
-	<script src="{{AssetUrlPrefix}}/js/devtest.js?v={{AssetVersion}}"></script>
 </div>
 {{template "base/footer" .}}
diff --git a/templates/devtest/list.tmpl b/templates/devtest/list.tmpl
index 90b1fcc9d0411..ac7c0056dbdc7 100644
--- a/templates/devtest/list.tmpl
+++ b/templates/devtest/list.tmpl
@@ -1,4 +1,5 @@
 {{template "base/head" .}}
+<link rel="stylesheet" href="{{AssetUrlPrefix}}/devtest.css?v={{AssetVersion}}">
 
 <ul>
 	{{range .SubNames}}
diff --git a/templates/devtest/tmplerr.tmpl b/templates/devtest/tmplerr.tmpl
index 2fe3f1effdf3f..e08b2095c0f1a 100644
--- a/templates/devtest/tmplerr.tmpl
+++ b/templates/devtest/tmplerr.tmpl
@@ -1,7 +1,8 @@
 {{template "base/head" .}}
+<link rel="stylesheet" href="{{AssetUrlPrefix}}/devtest.css?v={{AssetVersion}}">
 <div class="page-content devtest">
 	<div class="gt-df">
-		<div style="width: 80%; ">
+		<div style="width: 80%;">
 			hello hello hello hello hello hello hello hello hello hello
 		</div>
 		<div style="width: 20%;">
diff --git a/templates/swagger/ui.tmpl b/templates/swagger/ui.tmpl
index e2324f9b5baaf..8da5fc067b106 100644
--- a/templates/swagger/ui.tmpl
+++ b/templates/swagger/ui.tmpl
@@ -2,11 +2,11 @@
 <html lang="en">
 	<head>
 		<title>Gitea API</title>
-		<link href="{{AssetUrlPrefix}}/css/swagger.css?v={{AssetVersion}}" rel="stylesheet">
+		<link href="{{AssetUrlPrefix}}/swagger.css?v={{AssetVersion}}" rel="stylesheet">
 	</head>
 	<body>
 		<a class="swagger-back-link" href="{{AppSubUrl}}/">{{svg "octicon-reply"}}{{.locale.Tr "return_to_gitea"}}</a>
 		<div id="swagger-ui" data-source="{{AppSubUrl}}/swagger.{{.APIJSONVersion}}.json"></div>
-		<script src="{{AssetUrlPrefix}}/js/swagger.js?v={{AssetVersion}}"></script>
+		<script type="module" src="{{AssetUrlPrefix}}/swagger.js?v={{AssetVersion}}"></script>
 	</body>
 </html>
diff --git a/web_src/css/index.css b/web_src/css/index.css
index fa918f49dad25..ec82b999c193a 100644
--- a/web_src/css/index.css
+++ b/web_src/css/index.css
@@ -1,3 +1,6 @@
+@import "../fomantic/build/semantic.css";
+@import "easymde/dist/easymde.min.css";
+
 @import "./modules/normalize.css";
 @import "./modules/animations.css";
 @import "./modules/button.css";
diff --git a/web_src/css/modules/devtest.css b/web_src/css/modules/devtest.css
new file mode 100644
index 0000000000000..93f1e9d0f3d9e
--- /dev/null
+++ b/web_src/css/modules/devtest.css
@@ -0,0 +1,20 @@
+.devtest .button-sample-groups {
+  margin: 0; padding: 0;
+}
+
+.devtest .button-sample-groups .sample-group {
+  list-style: none; margin: 0; padding: 0;
+}
+
+.devtest .button-sample-groups .sample-group .ui.button {
+  margin-bottom: 5px;
+}
+
+.devtest h1, .devtest h2 {
+  margin: 0;
+  padding: 10px 0;
+}
+
+.devtest .modal-buttons button {
+  margin: 5px;
+}
diff --git a/web_src/css/standalone/devtest.css b/web_src/css/standalone/devtest.css
deleted file mode 100644
index a7b00e1e56181..0000000000000
--- a/web_src/css/standalone/devtest.css
+++ /dev/null
@@ -1,16 +0,0 @@
-.button-sample-groups {
-  margin: 0; padding: 0;
-}
-
-.button-sample-groups .sample-group {
-  list-style: none; margin: 0; padding: 0;
-}
-
-.button-sample-groups .sample-group .ui.button {
-  margin-bottom: 5px;
-}
-
-h1, h2 {
-  margin: 0;
-  padding: 10px 0;
-}
diff --git a/web_src/js/bootstrap.js b/web_src/js/bootstrap.js
index f0b020ce1cf62..544c95e4a7e72 100644
--- a/web_src/js/bootstrap.js
+++ b/web_src/js/bootstrap.js
@@ -1,11 +1,9 @@
-import {joinPaths} from './utils.js';
-
 // DO NOT IMPORT window.config HERE!
 // to make sure the error handler always works, we should never import `window.config`, because some user's custom template breaks it.
 
 // This sets up the URL prefix used in webpack's chunk loading.
 // This file must be imported before any lazy-loading is being attempted.
-__webpack_public_path__ = joinPaths(window?.config?.assetUrlPrefix ?? '/', '/');
+__webpack_public_path__ = `${window.config?.assetUrlPrefix ?? '/assets'}/`;
 
 export function showGlobalErrorMessage(msg) {
   const pageContent = document.querySelector('.page-content');
@@ -29,18 +27,23 @@ function processWindowErrorEvent(e) {
   showGlobalErrorMessage(`JavaScript error: ${e.message} (${e.filename} @ ${e.lineno}:${e.colno}). Open browser console to see more details.`);
 }
 
-function initGlobalErrorHandler() {
-  if (!window.config) {
-    showGlobalErrorMessage(`Gitea JavaScript code couldn't run correctly, please check your custom templates`);
-  }
-  // we added an event handler for window error at the very beginning of <script> of page head
-  // the handler calls `_globalHandlerErrors.push` (array method) to record all errors occur before this init
-  // then in this init, we can collect all error events and show them
-  for (const e of window._globalHandlerErrors || []) {
-    processWindowErrorEvent(e);
-  }
-  // then, change _globalHandlerErrors to an object with push method, to process further error events directly
-  window._globalHandlerErrors = {'push': (e) => processWindowErrorEvent(e)};
+if (!window.config) {
+  showGlobalErrorMessage(`Gitea JavaScript code couldn't run correctly, please check your custom templates`);
 }
 
-initGlobalErrorHandler();
+// we added an event handler for window error at the very beginning of <script> of page head
+// the handler calls `_globalHandlerErrors.push` (array method) to record all errors occur,
+// now we display any errors that had occurred
+for (const e of window._globalHandlerErrors) {
+  processWindowErrorEvent(e);
+}
+
+// watch for further mutations on the array
+window._globalHandlerErrors = new Proxy(window._globalHandlerErrors, {
+  set: (target, property, value) => {
+    if (property !== 'length') {
+      processWindowErrorEvent(value);
+    }
+    return Reflect.set(target, property, value);
+  }
+});
diff --git a/web_src/js/features/common-global.js b/web_src/js/features/common-global.js
index 474993045b2b7..d7d58c1a24bb7 100644
--- a/web_src/js/features/common-global.js
+++ b/web_src/js/features/common-global.js
@@ -1,5 +1,5 @@
 import $ from 'jquery';
-import 'jquery.are-you-sure';
+import '../vendor/ays.js';
 import {createDropzone} from './dropzone.js';
 import {initCompColorPicker} from './comp/ColorPicker.js';
 import {showGlobalErrorMessage} from '../bootstrap.js';
diff --git a/web_src/js/features/notification.js b/web_src/js/features/notification.js
index 4dcf02d2dca90..56f802296d383 100644
--- a/web_src/js/features/notification.js
+++ b/web_src/js/features/notification.js
@@ -81,7 +81,7 @@ export function initNotificationCount() {
 
   if (notificationSettings.EventSourceUpdateTime > 0 && window.EventSource && window.SharedWorker) {
     // Try to connect to the event source via the shared worker first
-    const worker = new SharedWorker(`${__webpack_public_path__}js/eventsource.sharedworker.js?v=${assetVersionEncoded}`, 'notification-worker');
+    const worker = new SharedWorker(`${__webpack_public_path__}eventsource.sharedworker.js?v=${assetVersionEncoded}`, 'notification-worker');
     worker.addEventListener('error', (event) => {
       console.error('worker error', event);
     });
diff --git a/web_src/js/features/stopwatch.js b/web_src/js/features/stopwatch.js
index f43014fec5b7d..a59b9b2bee06e 100644
--- a/web_src/js/features/stopwatch.js
+++ b/web_src/js/features/stopwatch.js
@@ -43,7 +43,7 @@ export function initStopwatch() {
   // if the browser supports EventSource and SharedWorker, use it instead of the periodic poller
   if (notificationSettings.EventSourceUpdateTime > 0 && window.EventSource && window.SharedWorker) {
     // Try to connect to the event source via the shared worker first
-    const worker = new SharedWorker(`${__webpack_public_path__}js/eventsource.sharedworker.js?v=${assetVersionEncoded}`, 'notification-worker');
+    const worker = new SharedWorker(`${__webpack_public_path__}eventsource.sharedworker.js?v=${assetVersionEncoded}`, 'notification-worker');
     worker.addEventListener('error', (event) => {
       console.error('worker error', event);
     });
diff --git a/web_src/js/index.js b/web_src/js/index.js
index 8bd219bbe1576..01917268daa41 100644
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -1,5 +1,7 @@
 // bootstrap module must be the first one to be imported, it handles webpack lazy-loading and global errors
 import './bootstrap.js';
+import './jquery.js';
+import '../fomantic/build/semantic.js';
 
 import {initRepoActivityTopAuthorsChart} from './components/RepoActivityTopAuthors.vue';
 import {initScopedAccessTokenCategories} from './components/ScopedAccessTokenSelector.vue';
@@ -88,6 +90,10 @@ import {initRepoDiffCommitBranchesAndTags} from './features/repo-diff-commit.js'
 // Init Gitea's Fomantic settings
 initGiteaFomantic();
 
+if (process.env.NODE_ENV === 'development' && window.location.pathname.startsWith(`${window.config.appSubUrl}/devtest`)) {
+  import('./modules/devtest.js');
+}
+
 onDomReady(() => {
   initGlobalCommon();
 
diff --git a/web_src/js/modules/devtest.js b/web_src/js/modules/devtest.js
new file mode 100644
index 0000000000000..dca420c54ffbb
--- /dev/null
+++ b/web_src/js/modules/devtest.js
@@ -0,0 +1,27 @@
+import $ from 'jquery';
+import {showInfoToast, showWarningToast, showErrorToast} from './toast.js';
+
+document.getElementById('info-toast')?.addEventListener('click', () => {
+  showInfoToast('success 😀');
+});
+document.getElementById('warning-toast')?.addEventListener('click', () => {
+  showWarningToast('warning 😐');
+});
+document.getElementById('error-toast')?.addEventListener('click', () => {
+  showErrorToast('error 🙁');
+});
+
+const $buttons = $('#devtest-button-samples').find('button.ui');
+
+const $buttonStyles = $('input[name*="button-style"]');
+$buttonStyles.on('click', () => $buttonStyles.map((_, el) => $buttons.toggleClass(el.value, el.checked)));
+
+const $buttonStates = $('input[name*="button-state"]');
+$buttonStates.on('click', () => $buttonStates.map((_, el) => $buttons.prop(el.value, el.checked)));
+
+for (const el of $('.ui.modal')) {
+  const $btn = $('<button>').text(`Show ${el.id}`).on('click', () => {
+    $(el).modal({onApprove() {alert('confirmed')}}).modal('show');
+  });
+  $('.modal-buttons').append($btn);
+}
diff --git a/web_src/js/standalone/devtest.js b/web_src/js/standalone/devtest.js
deleted file mode 100644
index d0ca511c0f36a..0000000000000
--- a/web_src/js/standalone/devtest.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import {showInfoToast, showWarningToast, showErrorToast} from '../modules/toast.js';
-
-document.getElementById('info-toast').addEventListener('click', () => {
-  showInfoToast('success 😀');
-});
-document.getElementById('warning-toast').addEventListener('click', () => {
-  showWarningToast('warning 😐');
-});
-document.getElementById('error-toast').addEventListener('click', () => {
-  showErrorToast('error 🙁');
-});
diff --git a/web_src/js/utils.js b/web_src/js/utils.js
index 4655b8eacc6ba..1b701e1c6a53f 100644
--- a/web_src/js/utils.js
+++ b/web_src/js/utils.js
@@ -11,16 +11,6 @@ export function extname(path = '') {
   return ext || '';
 }
 
-// join a list of path segments with slashes, ensuring no double slashes
-export function joinPaths(...parts) {
-  let str = '';
-  for (const part of parts) {
-    if (!part) continue;
-    str = !str ? part : `${str.replace(/\/$/, '')}/${part.replace(/^\//, '')}`;
-  }
-  return str;
-}
-
 // test whether a variable is an object
 export function isObject(obj) {
   return Object.prototype.toString.call(obj) === '[object Object]';
diff --git a/web_src/js/utils.test.js b/web_src/js/utils.test.js
index 812ef3bedfdc0..5f60c9c30b75a 100644
--- a/web_src/js/utils.test.js
+++ b/web_src/js/utils.test.js
@@ -1,6 +1,6 @@
 import {expect, test} from 'vitest';
 import {
-  basename, extname, isObject, stripTags, joinPaths, parseIssueHref,
+  basename, extname, isObject, stripTags, parseIssueHref,
   parseUrl, translateMonth, translateDay, blobToDataURI,
   toAbsoluteUrl, encodeURLEncodedBase64, decodeURLEncodedBase64,
 } from './utils.js';
@@ -18,45 +18,6 @@ test('extname', () => {
   expect(extname('file.js')).toEqual('.js');
 });
 
-test('joinPaths', () => {
-  expect(joinPaths('', '')).toEqual('');
-  expect(joinPaths('', 'b')).toEqual('b');
-  expect(joinPaths('', '/b')).toEqual('/b');
-  expect(joinPaths('', '/b/')).toEqual('/b/');
-  expect(joinPaths('a', '')).toEqual('a');
-  expect(joinPaths('/a', '')).toEqual('/a');
-  expect(joinPaths('/a/', '')).toEqual('/a/');
-  expect(joinPaths('a', 'b')).toEqual('a/b');
-  expect(joinPaths('a', '/b')).toEqual('a/b');
-  expect(joinPaths('/a', '/b')).toEqual('/a/b');
-  expect(joinPaths('/a', '/b')).toEqual('/a/b');
-  expect(joinPaths('/a/', '/b')).toEqual('/a/b');
-  expect(joinPaths('/a', '/b/')).toEqual('/a/b/');
-  expect(joinPaths('/a/', '/b/')).toEqual('/a/b/');
-
-  expect(joinPaths('', '', '')).toEqual('');
-  expect(joinPaths('', 'b', '')).toEqual('b');
-  expect(joinPaths('', 'b', 'c')).toEqual('b/c');
-  expect(joinPaths('', '', 'c')).toEqual('c');
-  expect(joinPaths('', '/b', '/c')).toEqual('/b/c');
-  expect(joinPaths('/a', '', '/c')).toEqual('/a/c');
-  expect(joinPaths('/a', '/b', '')).toEqual('/a/b');
-
-  expect(joinPaths('', '/')).toEqual('/');
-  expect(joinPaths('a', '/')).toEqual('a/');
-  expect(joinPaths('', '/', '/')).toEqual('/');
-  expect(joinPaths('/', '/')).toEqual('/');
-  expect(joinPaths('/', '')).toEqual('/');
-  expect(joinPaths('/', 'b')).toEqual('/b');
-  expect(joinPaths('/', 'b/')).toEqual('/b/');
-  expect(joinPaths('/', '', '/')).toEqual('/');
-  expect(joinPaths('/', 'b', '/')).toEqual('/b/');
-  expect(joinPaths('/', 'b/', '/')).toEqual('/b/');
-  expect(joinPaths('a', '/', '/')).toEqual('a/');
-  expect(joinPaths('/', '/', 'c')).toEqual('/c');
-  expect(joinPaths('/', '/', 'c/')).toEqual('/c/');
-});
-
 test('isObject', () => {
   expect(isObject({})).toBeTruthy();
   expect(isObject([])).toBeFalsy();
diff --git a/web_src/js/vendor/ays.js b/web_src/js/vendor/ays.js
new file mode 100644
index 0000000000000..67711a0150733
--- /dev/null
+++ b/web_src/js/vendor/ays.js
@@ -0,0 +1,181 @@
+/* copy of https://github.com/codedance/jquery.AreYouSure/ made to work in strict mode */
+(function($) {
+
+  $.fn.areYouSure = function(options) {
+
+    var settings = $.extend(
+      {
+        'message' : 'You have unsaved changes!',
+        'dirtyClass' : 'dirty',
+        'change' : null,
+        'silent' : false,
+        'addRemoveFieldsMarksDirty' : false,
+        'fieldEvents' : 'change keyup propertychange input',
+        'fieldSelector': ":input:not(input[type=submit]):not(input[type=button])"
+      }, options);
+
+    var getValue = function($field) {
+      if ($field.hasClass('ays-ignore')
+          || $field.hasClass('aysIgnore')
+          || $field.attr('data-ays-ignore')
+          || $field.attr('name') === undefined) {
+        return null;
+      }
+
+      if ($field.is(':disabled')) {
+        return 'ays-disabled';
+      }
+
+      var val;
+      var type = $field.attr('type');
+      if ($field.is('select')) {
+        type = 'select';
+      }
+
+      switch (type) {
+        case 'checkbox':
+        case 'radio':
+          val = $field.is(':checked');
+          break;
+        case 'select':
+          val = '';
+          $field.find('option').each(function(o) {
+            var $option = $(this);
+            if ($option.is(':selected')) {
+              val += $option.val();
+            }
+          });
+          break;
+        default:
+          val = $field.val();
+      }
+
+      return val;
+    };
+
+    var storeOrigValue = function($field) {
+      $field.data('ays-orig', getValue($field));
+    };
+
+    var checkForm = function(evt) {
+
+      var isFieldDirty = function($field) {
+        var origValue = $field.data('ays-orig');
+        if (undefined === origValue) {
+          return false;
+        }
+        return (getValue($field) != origValue);
+      };
+
+      var $form = ($(this).is('form'))
+                    ? $(this)
+                    : $(this).parents('form');
+
+      // Test on the target first as it's the most likely to be dirty
+      if (isFieldDirty($(evt.target))) {
+        setDirtyStatus($form, true);
+        return;
+      }
+
+      const $fields = $form.find(settings.fieldSelector);
+
+      if (settings.addRemoveFieldsMarksDirty) {
+        // Check if field count has changed
+        var origCount = $form.data("ays-orig-field-count");
+        if (origCount != $fields.length) {
+          setDirtyStatus($form, true);
+          return;
+        }
+      }
+
+      // Brute force - check each field
+      var isDirty = false;
+      $fields.each(function() {
+        var $field = $(this);
+        if (isFieldDirty($field)) {
+          isDirty = true;
+          return false; // break
+        }
+      });
+
+      setDirtyStatus($form, isDirty);
+    };
+
+    var initForm = function($form) {
+      var fields = $form.find(settings.fieldSelector);
+      $(fields).each(function() { storeOrigValue($(this)); });
+      $(fields).unbind(settings.fieldEvents, checkForm);
+      $(fields).bind(settings.fieldEvents, checkForm);
+      $form.data("ays-orig-field-count", $(fields).length);
+      setDirtyStatus($form, false);
+    };
+
+    var setDirtyStatus = function($form, isDirty) {
+      var changed = isDirty != $form.hasClass(settings.dirtyClass);
+      $form.toggleClass(settings.dirtyClass, isDirty);
+
+      // Fire change event if required
+      if (changed) {
+        if (settings.change) settings.change.call($form, $form);
+
+        if (isDirty) $form.trigger('dirty.areYouSure', [$form]);
+        if (!isDirty) $form.trigger('clean.areYouSure', [$form]);
+        $form.trigger('change.areYouSure', [$form]);
+      }
+    };
+
+    var rescan = function() {
+      var $form = $(this);
+      var fields = $form.find(settings.fieldSelector);
+      $(fields).each(function() {
+        var $field = $(this);
+        if (!$field.data('ays-orig')) {
+          storeOrigValue($field);
+          $field.bind(settings.fieldEvents, checkForm);
+        }
+      });
+      // Check for changes while we're here
+      $form.trigger('checkform.areYouSure');
+    };
+
+    var reinitialize = function() {
+      initForm($(this));
+    }
+
+    if (!settings.silent && !window.aysUnloadSet) {
+      window.aysUnloadSet = true;
+      $(window).bind('beforeunload', function() {
+        const $dirtyForms = $("form").filter('.' + settings.dirtyClass);
+        if ($dirtyForms.length == 0) {
+          return;
+        }
+        // Prevent multiple prompts - seen on Chrome and IE
+        if (navigator.userAgent.toLowerCase().match(/msie|chrome/)) {
+          if (window.aysHasPrompted) {
+            return;
+          }
+          window.aysHasPrompted = true;
+          window.setTimeout(function() {window.aysHasPrompted = false;}, 900);
+        }
+        return settings.message;
+      });
+    }
+
+    return this.each(function(elem) {
+      if (!$(this).is('form')) {
+        return;
+      }
+      var $form = $(this);
+
+      $form.submit(function() {
+        $form.removeClass(settings.dirtyClass);
+      });
+      $form.bind('reset', function() { setDirtyStatus($form, false); });
+      // Add a custom events
+      $form.bind('rescan.areYouSure', rescan);
+      $form.bind('reinitialize.areYouSure', reinitialize);
+      $form.bind('checkform.areYouSure', checkForm);
+      initForm($form);
+    });
+  };
+})(jQuery);
diff --git a/web_src/js/webcomponents/webcomponents.js b/web_src/js/webcomponents/webcomponents.js
index 123607282bc78..03fd7abd0819e 100644
--- a/web_src/js/webcomponents/webcomponents.js
+++ b/web_src/js/webcomponents/webcomponents.js
@@ -1,3 +1,5 @@
+// do not use dynamic `import()` in any of these files because the script tag does not
+// have type=module, it need to load synchronously to avoid content flickering
 import '@webcomponents/custom-elements'; // polyfill for some browsers like Pale Moon
 import '@github/relative-time-element';
 import './GiteaOriginUrl.js';
diff --git a/webpack.config.js b/webpack.config.js
index 69d803b1e2be6..e0faa712eac99 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -40,9 +40,8 @@ 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();
 
-  if (cssFile.includes('fomantic')) {
-    if (/brand-icons/.test(importedFile)) return false;
-    if (/(eot|ttf|otf|woff|svg)$/.test(importedFile)) return false;
+  if (cssFile.includes('fomantic') && /(eot|ttf|otf|woff|svg)$/.test(importedFile)) {
+    return false;
   }
 
   if (cssFile.includes('katex') && /(ttf|woff)$/.test(importedFile)) {
@@ -57,11 +56,7 @@ export default {
   mode: isProduction ? 'production' : 'development',
   entry: {
     index: [
-      fileURLToPath(new URL('web_src/js/jquery.js', import.meta.url)),
-      fileURLToPath(new URL('web_src/fomantic/build/semantic.js', import.meta.url)),
       fileURLToPath(new URL('web_src/js/index.js', import.meta.url)),
-      fileURLToPath(new URL('node_modules/easymde/dist/easymde.min.css', import.meta.url)),
-      fileURLToPath(new URL('web_src/fomantic/build/semantic.css', import.meta.url)),
       fileURLToPath(new URL('web_src/css/index.css', import.meta.url)),
     ],
     webcomponents: [
@@ -76,21 +71,28 @@ export default {
     ],
     ...(!isProduction && {
       devtest: [
-        fileURLToPath(new URL('web_src/js/standalone/devtest.js', import.meta.url)),
-        fileURLToPath(new URL('web_src/css/standalone/devtest.css', import.meta.url)),
+        fileURLToPath(new URL('web_src/css/modules/devtest.css', import.meta.url)),
       ],
     }),
     ...themes,
   },
   devtool: false,
   output: {
+    module: true,
+    publicPath: '',
     path: fileURLToPath(new URL('public/assets', import.meta.url)),
-    filename: () => 'js/[name].js',
+    filename: () => '[name].js',
+    clean: {
+      keep: /^img\//,
+    },
     chunkFilename: ({chunk}) => {
       const language = (/monaco.*languages?_.+?_(.+?)_/.exec(chunk.id) || [])[1];
-      return `js/${language ? `monaco-language-${language.toLowerCase()}` : `[name]`}.[contenthash:8].js`;
+      return `${language ? `monaco-language-${language.toLowerCase()}` : `[name]`}.[contenthash:8].js`;
     },
   },
+  experiments: {
+    outputModule: true,
+  },
   optimization: {
     minimize: isProduction,
     minimizer: [
@@ -154,14 +156,14 @@ export default {
         test: /\.(ttf|woff2?)$/,
         type: 'asset/resource',
         generator: {
-          filename: 'fonts/[name].[contenthash:8][ext]',
+          filename: '[name].[contenthash:8][ext]',
         }
       },
       {
         test: /\.png$/i,
         type: 'asset/resource',
         generator: {
-          filename: 'img/webpack/[name].[contenthash:8][ext]',
+          filename: '[name].[contenthash:8][ext]',
         }
       },
     ],
@@ -173,17 +175,17 @@ export default {
     }),
     new VueLoaderPlugin(),
     new MiniCssExtractPlugin({
-      filename: 'css/[name].css',
-      chunkFilename: 'css/[name].[contenthash:8].css',
+      filename: '[name].css',
+      chunkFilename: '[name].[contenthash:8].css',
     }),
     sourceMapEnabled && (new SourceMapDevToolPlugin({
       filename: '[file].[contenthash:8].map',
     })),
     new MonacoWebpackPlugin({
-      filename: 'js/monaco-[name].[contenthash:8].worker.js',
+      filename: 'monaco-[name].[contenthash:8].worker.js',
     }),
     isProduction ? new LicenseCheckerWebpackPlugin({
-      outputFilename: 'js/licenses.txt',
+      outputFilename: 'licenses.txt',
       outputWriter: ({dependencies}) => {
         const line = '-'.repeat(80);
         const goJson = readFileSync('assets/go-licenses.json', 'utf8');
@@ -201,12 +203,11 @@ export default {
         }).join('\n');
       },
       override: {
-        'jquery.are-you-sure@*': {licenseName: 'MIT'}, // https://github.com/codedance/jquery.AreYouSure/pull/147
         'khroma@*': {licenseName: 'MIT'}, // https://github.com/fabiospampinato/khroma/pull/33
       },
       emitError: true,
       allow: '(Apache-2.0 OR BSD-2-Clause OR BSD-3-Clause OR MIT OR ISC OR CPAL-1.0 OR Unlicense OR EPL-1.0 OR EPL-2.0)',
-    }) : new AddAssetPlugin('js/licenses.txt', `Licenses are disabled during development`),
+    }) : new AddAssetPlugin('licenses.txt', `Licenses are disabled during development`),
   ],
   performance: {
     hints: false,
@@ -233,8 +234,8 @@ export default {
     colors: true,
     entrypoints: false,
     excludeAssets: [
-      /^js\/monaco-language-.+\.js$/,
-      !isProduction && /^js\/licenses.txt$/,
+      /^monaco-language-.+\.js$/,
+      !isProduction && /^licenses.txt$/,
     ].filter(Boolean),
     groupAssetsByChunk: false,
     groupAssetsByEmitStatus: false,