diff --git a/.eslintrc.yaml b/.eslintrc.yaml
index 0eda8a1877e2e..3b25995c0949a 100644
--- a/.eslintrc.yaml
+++ b/.eslintrc.yaml
@@ -324,7 +324,7 @@ rules:
   jquery/no-sizzle: [2]
   jquery/no-slide: [2]
   jquery/no-submit: [2]
-  jquery/no-text: [0]
+  jquery/no-text: [2]
   jquery/no-toggle: [2]
   jquery/no-trigger: [0]
   jquery/no-trim: [2]
@@ -477,7 +477,7 @@ rules:
   no-jquery/no-slide: [2]
   no-jquery/no-sub: [2]
   no-jquery/no-support: [2]
-  no-jquery/no-text: [0]
+  no-jquery/no-text: [2]
   no-jquery/no-trigger: [0]
   no-jquery/no-trim: [2]
   no-jquery/no-type: [2]
@@ -798,7 +798,7 @@ rules:
   unicorn/prefer-object-has-own: [0]
   unicorn/prefer-optional-catch-binding: [2]
   unicorn/prefer-prototype-methods: [0]
-  unicorn/prefer-query-selector: [0]
+  unicorn/prefer-query-selector: [2]
   unicorn/prefer-reflect-apply: [0]
   unicorn/prefer-regexp-test: [2]
   unicorn/prefer-set-has: [0]
diff --git a/modules/setting/packages.go b/modules/setting/packages.go
index b225615a24012..00fba67b393ac 100644
--- a/modules/setting/packages.go
+++ b/modules/setting/packages.go
@@ -6,7 +6,6 @@ package setting
 import (
 	"fmt"
 	"math"
-	"net/url"
 	"os"
 	"path/filepath"
 
@@ -19,7 +18,6 @@ var (
 		Storage           *Storage
 		Enabled           bool
 		ChunkedUploadPath string
-		RegistryHost      string
 
 		LimitTotalOwnerCount int64
 		LimitTotalOwnerSize  int64
@@ -66,9 +64,6 @@ func loadPackagesFrom(rootCfg ConfigProvider) (err error) {
 		return err
 	}
 
-	appURL, _ := url.Parse(AppURL)
-	Packages.RegistryHost = appURL.Host
-
 	Packages.ChunkedUploadPath = filepath.ToSlash(sec.Key("CHUNKED_UPLOAD_PATH").MustString("tmp/package-upload"))
 	if !filepath.IsAbs(Packages.ChunkedUploadPath) {
 		Packages.ChunkedUploadPath = filepath.ToSlash(filepath.Join(AppDataPath, Packages.ChunkedUploadPath))
diff --git a/modules/test/utils.go b/modules/test/utils.go
index 4a0c2f1b3b298..8dee92fbce49c 100644
--- a/modules/test/utils.go
+++ b/modules/test/utils.go
@@ -34,8 +34,10 @@ func IsNormalPageCompleted(s string) bool {
 	return strings.Contains(s, `<footer class="page-footer"`) && strings.Contains(s, `</html>`)
 }
 
-func MockVariableValue[T any](p *T, v T) (reset func()) {
+func MockVariableValue[T any](p *T, v ...T) (reset func()) {
 	old := *p
-	*p = v
+	if len(v) > 0 {
+		*p = v[0]
+	}
 	return func() { *p = old }
 }
diff --git a/modules/web/middleware/cookie.go b/modules/web/middleware/cookie.go
index ec6b06f9933b2..f2d25f5b1cda7 100644
--- a/modules/web/middleware/cookie.go
+++ b/modules/web/middleware/cookie.go
@@ -35,6 +35,10 @@ func GetSiteCookie(req *http.Request, name string) string {
 
 // SetSiteCookie returns given cookie value from request header.
 func SetSiteCookie(resp http.ResponseWriter, name, value string, maxAge int) {
+	// Previous versions would use a cookie path with a trailing /.
+	// These are more specific than cookies without a trailing /, so
+	// we need to delete these if they exist.
+	deleteLegacySiteCookie(resp, name)
 	cookie := &http.Cookie{
 		Name:     name,
 		Value:    url.QueryEscape(value),
@@ -46,10 +50,6 @@ func SetSiteCookie(resp http.ResponseWriter, name, value string, maxAge int) {
 		SameSite: setting.SessionConfig.SameSite,
 	}
 	resp.Header().Add("Set-Cookie", cookie.String())
-	// Previous versions would use a cookie path with a trailing /.
-	// These are more specific than cookies without a trailing /, so
-	// we need to delete these if they exist.
-	deleteLegacySiteCookie(resp, name)
 }
 
 // deleteLegacySiteCookie deletes the cookie with the given name at the cookie
diff --git a/options/locale/locale_fr-FR.ini b/options/locale/locale_fr-FR.ini
index 9a1a756264e6a..6dcc7a4f3fe25 100644
--- a/options/locale/locale_fr-FR.ini
+++ b/options/locale/locale_fr-FR.ini
@@ -25,6 +25,7 @@ enable_javascript=Ce site Web nécessite JavaScript.
 toc=Sommaire
 licenses=Licences
 return_to_gitea=Revenir à Gitea
+more_items=Plus d'éléments
 
 username=Nom d'utilisateur
 email=Courriel
@@ -113,6 +114,7 @@ loading=Chargement…
 error=Erreur
 error404=La page que vous essayez d'atteindre <strong>n'existe pas</strong> ou <strong>vous n'êtes pas autorisé</strong> à la voir.
 go_back=Retour
+invalid_data=Données invalides : %v
 
 never=Jamais
 unknown=Inconnu
@@ -143,17 +145,43 @@ name=Nom
 value=Valeur
 
 filter=Filtrer
+filter.clear=Effacer le filtre
 filter.is_archived=Archivé
+filter.not_archived=Non archivé
+filter.is_fork=Bifurqué
+filter.not_fork=Non bifurqué
+filter.is_mirror=Miroité
+filter.not_mirror=Non miroité
 filter.is_template=Modèle
+filter.not_template=Pas un modèle
 filter.public=Public
 filter.private=Privé
 
+no_results_found=Aucun résultat trouvé.
 
 [search]
+search=Rechercher…
+type_tooltip=Type de recherche
+fuzzy=Approximative
+fuzzy_tooltip=Inclure également les résultats proches de la recherche
 exact=Exact
 exact_tooltip=Inclure uniquement les résultats qui correspondent exactement au terme de recherche
+repo_kind=Chercher des dépôts…
+user_kind=Chercher des utilisateurs…
+org_kind=Chercher des organisations…
+team_kind=Chercher des équipes…
+code_kind=Chercher du code…
+code_search_unavailable=La recherche dans le code n’est pas disponible actuellement. Veuillez contacter l’administrateur de votre instance Gitea.
+code_search_by_git_grep=Les résultats de recherche de code actuels sont fournis par « git grep ». L’administrateur peut activer l’indexeur de dépôt, qui pourrait fournir de meilleurs résultats.
+package_kind=Chercher des paquets…
+project_kind=Chercher des projets…
+branch_kind=Chercher des branches…
+commit_kind=Chercher des révisions…
+runner_kind=Chercher des exécuteurs…
+no_results=Aucun résultat correspondant trouvé.
 issue_kind=Recherche de tickets…
 pull_kind=Recherche de demandes d’ajouts…
+keyword_search_unavailable=La recherche par mot clé n’est pas disponible actuellement. Veuillez contacter l’administrateur de votre instance Gitea.
 
 [aria]
 navbar=Barre de navigation
@@ -260,6 +288,7 @@ email_title=Paramètres de Messagerie
 smtp_addr=Hôte SMTP
 smtp_port=Port SMTP
 smtp_from=Envoyer les courriels en tant que
+smtp_from_invalid=L’adresse « Envoyer le courriel sous » est invalide
 smtp_from_helper=Adresse courriel utilisée par Gitea. Utilisez directement votre adresse ou la forme « Nom <email@example.com> ».
 mailer_user=Utilisateur SMTP
 mailer_password=Mot de passe SMTP
@@ -319,6 +348,7 @@ env_config_keys=Configuration de l'environnement
 env_config_keys_prompt=Les variables d'environnement suivantes seront également ajoutées à votre fichier de configuration :
 
 [home]
+nav_menu=Menu de navigation
 uname_holder=Nom d’utilisateur ou adresse courriel
 password_holder=Mot de passe
 switch_dashboard_context=Basculer le contexte du tableau de bord
@@ -333,14 +363,14 @@ filter_by_team_repositories=Dépôts filtrés par équipe
 feed_of=Flux de « %s »
 
 show_archived=Archivé
-show_both_archived_unarchived=Afficher à la fois archivé et non archivé
-show_only_archived=Afficher uniquement les archivés
-show_only_unarchived=Afficher uniquement les non archivés
+show_both_archived_unarchived=Afficher à la fois les dépôts archivés et non archivés
+show_only_archived=Afficher uniquement les dépôts archivés
+show_only_unarchived=Afficher uniquement les dépôts non archivés
 
 show_private=Privé
-show_both_private_public=Afficher les publics et privés
-show_only_private=Afficher uniquement les privés
-show_only_public=Afficher uniquement les publics
+show_both_private_public=Afficher les dépôts publics et privés
+show_only_private=Afficher uniquement les dépôts privés
+show_only_public=Afficher uniquement les dépôts publics
 
 issues.in_your_repos=Dans vos dépôts
 
@@ -367,6 +397,7 @@ forgot_password_title=Mot de passe oublié
 forgot_password=Mot de passe oublié ?
 sign_up_now=Pas de compte ? Inscrivez-vous maintenant.
 sign_up_successful=Le compte a été créé avec succès. Bienvenue !
+confirmation_mail_sent_prompt_ex=Un nouveau courriel de confirmation a été envoyé à <b>%s</b>. Veuillez vérifier votre boîte de réception dans la prochaine %s pour terminer le processus d’inscription. Si votre adresse courriel est incorrecte, vous pouvez vous reconnecter et la modifier.
 must_change_password=Réinitialisez votre mot de passe
 allow_password_change=Demande à l'utilisateur de changer son mot de passe (recommandé)
 reset_password_mail_sent_prompt=Un mail de confirmation a été envoyé à <b>%s</b>. Veuillez vérifier votre boîte de réception dans les prochaines %s pour terminer la procédure de récupération du compte.
@@ -376,6 +407,7 @@ prohibit_login=Connexion interdite
 prohibit_login_desc=Votre compte n'autorise pas la connexion, veuillez contacter l'administrateur de votre site.
 resent_limit_prompt=Désolé, vous avez récemment demandé un courriel d'activation. Veuillez réessayer dans 3 minutes.
 has_unconfirmed_mail=Bonjour %s, votre adresse courriel (<b>%s</b>) n’a pas été confirmée. Si vous n’avez reçu aucun mail de confirmation ou souhaitez renouveler l’envoi, cliquez sur le bouton ci-dessous.
+change_unconfirmed_mail_address=Si votre adresse courriel d’inscription est incorrecte, vous pouvez la modifier ici et renvoyer un nouvel courriel de confirmation.
 resend_mail=Cliquez ici pour renvoyer un mail de confirmation
 email_not_associate=L’adresse courriel n’est associée à aucun compte.
 send_reset_mail=Envoyer un courriel de récupération du compte
@@ -404,6 +436,7 @@ oauth_signin_submit=Lier un compte
 oauth.signin.error=Une erreur s'est produite lors du traitement de la demande d'autorisation. Si cette erreur persiste, veuillez contacter l'administrateur du site.
 oauth.signin.error.access_denied=La demande d'autorisation a été refusée.
 oauth.signin.error.temporarily_unavailable=L'autorisation a échoué car le serveur d'authentification est temporairement indisponible. Veuillez réessayer plus tard.
+oauth_callback_unable_auto_reg=L’inscription automatique est activée, mais le fournisseur OAuth2 %[1]s a signalé des champs manquants : %[2]s, impossible de créer un compte automatiquement, veuillez créer ou lier un compte, ou bien contacter l’administrateur du site.
 openid_connect_submit=Se connecter
 openid_connect_title=Se connecter à un compte existant
 openid_connect_desc=L'URI OpenID choisie est inconnue. Associez-le à un nouveau compte ici.
@@ -556,6 +589,7 @@ team_name_been_taken=Le nom d'équipe est déjà pris.
 team_no_units_error=Autoriser l’accès à au moins une section du dépôt.
 email_been_used=Cette adresse courriel est déjà utilisée.
 email_invalid=Cette adresse courriel est invalide.
+email_domain_is_not_allowed=Le domaine <b>%s</b> du courriel utilisateur entre en conflit avec EMAIL_DOMAIN_ALLOWLIST ou EMAIL_DOMAIN_BLOCKLIST. Veuillez vous assurer que votre opération est attendue.
 openid_been_used=Adresse OpenID "%s" déjà utilisée.
 username_password_incorrect=Identifiant ou mot de passe invalide.
 password_complexity=Le mot de passe ne respecte pas les exigences de complexité:
@@ -567,6 +601,8 @@ enterred_invalid_repo_name=Le nom de dépôt saisi est incorrect.
 enterred_invalid_org_name=Le nom de l'organisation que vous avez entré est incorrect.
 enterred_invalid_owner_name=Le nom du nouveau propriétaire est invalide.
 enterred_invalid_password=Le mot de passe saisi est incorrect.
+unset_password=L’utilisateur n’a pas défini de mot de passe.
+unsupported_login_type=Le type de connexion n’est pas pris en charge pour supprimer le compte.
 user_not_exist=Cet utilisateur n'existe pas.
 team_not_exist=L'équipe n'existe pas.
 last_org_owner=Vous ne pouvez pas retirer le dernier utilisateur de l’équipe « propriétaires ». Il doit y avoir au moins un propriétaire dans chaque organisation.
@@ -616,6 +652,29 @@ form.name_reserved=Le nom d’utilisateur "%s" est réservé.
 form.name_pattern_not_allowed=Le motif « %s » n’est pas autorisé dans un nom de d'utilisateur.
 form.name_chars_not_allowed=Le nom d'utilisateur "%s" contient des caractères non valides.
 
+block.block=Bloquer
+block.block.user=Bloquer l’utilisateur
+block.block.org=Bloquer l’utilisateur pour l’organisation
+block.block.failure=Impossible de bloquer l’utilisateur : %s
+block.unblock=Débloquer
+block.unblock.failure=Impossible de débloquer l’utilisateur : %s
+block.blocked=Vous avez bloqué cet utilisateur.
+block.title=Bloquer un utilisateur
+block.info=Bloquer un utilisateur l’empêche d’interagir avec des dépôts, comme ouvrir ou commenter des demandes de fusion ou des tickets. Apprenez-en plus sur le blocage d’un utilisateur.
+block.info_1=Bloquer un utilisateur empêche les actions suivantes sur votre compte et vos dépôts :
+block.info_2=suivre votre compte
+block.info_3=vous envoyer des notifications en vous @mentionnant
+block.info_4=vous inviter en tant que collaborateur de son(ses) dépôt(s)
+block.info_5=aimer, bifurquer ou suivre vos dépôts
+block.info_6=ouvrir ou commenter vos tickets et demandes d’ajouts
+block.info_7=réagir à vos commentaires dans les tickets ou les demandes d’ajout
+block.user_to_block=Utilisateur à bloquer
+block.note=Note
+block.note.title=Note facultative :
+block.note.info=La note n’est pas visible par l’utilisateur bloqué.
+block.note.edit=Modifier la note
+block.list=Utilisateurs bloqués
+block.list.none=Vous n’avez bloqué aucun utilisateur.
 
 [settings]
 profile=Profil
@@ -658,6 +717,7 @@ cancel=Annuler
 language=Langue
 ui=Thème
 hidden_comment_types=Catégories de commentaires masqués
+hidden_comment_types_description=Cochez les catégories suivantes pour masquer les commentaires correspondants des fils d'activité. Par exemple, « Label » cache les commentaires du genre « Cerise a attribué le label Bug il y a 2 heures. »
 hidden_comment_types.ref_tooltip=Commentaires où ce ticket a été référencé sur un autre ticket, révision, etc.
 hidden_comment_types.issue_ref_tooltip=Commentaires où l’utilisateur change la branche/étiquette associée au ticket
 comment_type_group_reference=Référence
@@ -704,6 +764,8 @@ manage_themes=Sélectionner le thème par défaut
 manage_openid=Gérer les adresses OpenID
 email_desc=Votre adresse courriel principale sera utilisée pour les notifications, la récupération de mot de passe et, à condition qu'elle ne soit pas cachée, les opérations Git basées sur le Web.
 theme_desc=Ce sera votre thème par défaut sur le site.
+theme_colorblindness_help=Support du thème daltonien
+theme_colorblindness_prompt=Gitea fournit depuis peu des thèmes daltonien basé sur un spectre coloré réduit. Encore en développement, de futures améliorations devraient enrichir les fichiers de thèmes CSS.
 primary=Principale
 activated=Activé
 requires_activation=Nécessite une activation
@@ -953,7 +1015,9 @@ fork_visibility_helper=La visibilité d'un dépôt bifurqué ne peut pas être m
 fork_branch=Branche à cloner sur la bifurcation
 all_branches=Toutes les branches
 fork_no_valid_owners=Ce dépôt ne peut pas être bifurqué car il n’a pas de propriétaire valide.
+fork.blocked_user=Impossible de bifurquer le dépôt car vous êtes bloqué par son propriétaire.
 use_template=Utiliser ce modèle
+open_with_editor=Ouvrir avec %s
 download_zip=Télécharger le ZIP
 download_tar=Télécharger le TAR.GZ
 download_bundle=Télécharger le BUNDLE
@@ -1006,6 +1070,7 @@ watchers=Observateurs
 stargazers=Fans
 stars_remove_warning=Ceci supprimera toutes les étoiles de ce dépôt.
 forks=Bifurcations
+stars=Favoris
 reactions_more=et %d de plus
 unit_disabled=L'administrateur du site a désactivé cette section du dépôt.
 language_other=Autre
@@ -1127,6 +1192,7 @@ watch=Suivre
 unstar=Retirer des favoris
 star=Ajouter aux favoris
 fork=Bifurcation
+action.blocked_user=Impossible d’effectuer cette action car vous êtes bloqué par le propriétaire du dépôt.
 download_archive=Télécharger ce dépôt
 more_operations=Plus d'opérations
 
@@ -1172,6 +1238,8 @@ file_view_rendered=Voir le rendu
 file_view_raw=Voir le Raw
 file_permalink=Lien permanent
 file_too_large=Le fichier est trop gros pour être affiché.
+code_preview_line_from_to=Lignes %[1]d à %[2]d dans %[3]s
+code_preview_line_in=Ligne %[1]d dans %[2]s
 invisible_runes_header=`Ce fichier contient des caractères Unicode invisibles.`
 invisible_runes_description=`Ce fichier contient des caractères Unicode invisibles à l'œil nu, mais peuvent être traités différemment par un ordinateur. Si vous pensez que c'est intentionnel, vous pouvez ignorer cet avertissement. Utilisez le bouton Échappe pour les dévoiler.`
 ambiguous_runes_header=`Ce fichier contient des caractères Unicode ambigus.`
@@ -1226,6 +1294,7 @@ editor.or=ou
 editor.cancel_lower=Annuler
 editor.commit_signed_changes=Réviser les changements (signé)
 editor.commit_changes=Réviser les changements
+editor.add_tmpl=Ajouter {filename}
 editor.add=Ajouter %s
 editor.update=Actualiser %s
 editor.delete=Supprimer %s
@@ -1253,6 +1322,8 @@ editor.file_editing_no_longer_exists=Impossible de modifier le fichier « %s 
 editor.file_deleting_no_longer_exists=Impossible de supprimer le fichier « %s » car il n’existe plus dans ce dépôt.
 editor.file_changed_while_editing=Le contenu du fichier a changé depuis que vous avez commencé à éditer. <a target="_blank" rel="noopener noreferrer" href="%s">Cliquez ici</a> pour voir les changements ou <strong>soumettez de nouveau</strong> pour les écraser.
 editor.file_already_exists=Un fichier nommé "%s" existe déjà dans ce dépôt.
+editor.commit_id_not_matching=L’ID de la révision ne correspond pas à l’ID lorsque vous avez commencé à éditer. Faites une révision dans une branche de correctif puis fusionnez.
+editor.push_out_of_date=Cet envoi semble être obsolète.
 editor.commit_empty_file_header=Réviser un fichier vide
 editor.commit_empty_file_text=Le fichier que vous allez réviser est vide. Continuer ?
 editor.no_changes_to_show=Il n’y a aucune modification à afficher.
@@ -1277,6 +1348,7 @@ commits.commits=Révisions
 commits.no_commits=Pas de révisions en commun. "%s" et "%s" ont des historiques entièrement différents.
 commits.nothing_to_compare=Ces branches sont égales.
 commits.search.tooltip=Vous pouvez utiliser les mots-clés "author:", "committer:", "after:", ou "before:" pour filtrer votre recherche, ex.: "revert author:Alice before:2019-01-13".
+commits.search_branch=Cette branche
 commits.search_all=Toutes les branches
 commits.author=Auteur
 commits.message=Message
@@ -1306,6 +1378,7 @@ commitstatus.success=Succès
 ext_issues=Accès aux tickets externes
 ext_issues.desc=Lien vers un gestionnaire de tickets externe.
 
+projects.desc=Gérer les tickets et les demandes d’ajouts dans les projets.
 projects.description=Description (facultative)
 projects.description_placeholder=Description
 projects.create=Créer un projet
@@ -1333,6 +1406,7 @@ projects.column.new=Nouvelle colonne
 projects.column.set_default=Définir par défaut
 projects.column.set_default_desc=Les tickets et demandes d’ajout non-catégorisés seront placés dans cette colonne.
 projects.column.delete=Supprimer la colonne
+projects.column.deletion_desc=La suppression d’une colonne déplace tous ses tickets dans la colonne par défaut. Continuer ?
 projects.column.color=Couleur
 projects.open=Ouvrir
 projects.close=Fermer
@@ -1367,6 +1441,9 @@ issues.new.assignees=Assignés
 issues.new.clear_assignees=Supprimer les affectations
 issues.new.no_assignees=Sans assignation
 issues.new.no_reviewers=Sans évaluateur
+issues.new.blocked_user=Impossible de créer un ticket car vous êtes bloqué par le propriétaire du dépôt.
+issues.edit.already_changed=Impossible d’enregistrer le ticket. Il semble que le contenu ait été modifié par un autre utilisateur. Veuillez rafraîchir la page et réessayer pour éviter d’écraser ses modifications.
+issues.edit.blocked_user=Impossible de modifier ce contenu car vous êtes bloqué par son propriétaire.
 issues.choose.get_started=Démarrons
 issues.choose.open_external_link=Ouvrir
 issues.choose.blank=Par défaut
@@ -1477,8 +1554,11 @@ issues.no_content=Sans contenu.
 issues.close=Fermer le ticket
 issues.comment_pull_merged_at=a fusionné la révision %[1]s dans %[2]s %[3]s
 issues.comment_manually_pull_merged_at=a fusionné manuellement la révision %[1]s dans %[2]s %[3]s
+issues.close_comment_issue=Commenter et Fermer
 issues.reopen_issue=Rouvrir
+issues.reopen_comment_issue=Commenter et Réouvrir
 issues.create_comment=Commenter
+issues.comment.blocked_user=Impossible créer ou de modifier un commentaire car vous êtes bloqué par le propriétaire du dépôt.
 issues.closed_at=`a fermé ce ticket <a id="%[1]s" href="#%[1]s">%[2]s</a>.`
 issues.reopened_at=`a réouvert ce ticket <a id="%[1]s" href="#%[1]s">%[2]s</a>.`
 issues.commit_ref_at=`a référencé ce ticket depuis une révision <a id="%[1]s" href="#%[1]s"> %[2]s</a>.`
@@ -1677,6 +1757,8 @@ compare.compare_head=comparer
 
 pulls.desc=Active les demandes d’ajouts et l’évaluation du code.
 pulls.new=Nouvelle demande d'ajout
+pulls.new.blocked_user=Impossible de créer une demande d’ajout car vous êtes bloqué par le propriétaire du dépôt.
+pulls.edit.already_changed=Impossible d’enregistrer la demande d’ajout. Il semble que le contenu ait été modifié par un autre utilisateur. Veuillez rafraîchir la page et réessayer afin d’éviter d’écraser leurs modifications.
 pulls.view=Voir la demande d'ajout
 pulls.compare_changes=Nouvelle demande d’ajout
 pulls.allow_edits_from_maintainers=Autoriser les modifications des mainteneurs
@@ -1822,6 +1904,7 @@ pulls.recently_pushed_new_branches=Vous avez soumis sur la branche <strong>%[1]s
 
 pull.deleted_branch=(supprimé) : %s
 
+comments.edit.already_changed=Impossible d’enregistrer ce commentaire. Il semble que le contenu ait été modifié par un autre utilisateur. Veuillez rafraîchir la page et réessayer afin d’éviter d’écraser leurs modifications.
 
 milestones.new=Nouveau jalon
 milestones.closed=%s fermé
@@ -1898,7 +1981,10 @@ wiki.page_name_desc=Entrez un nom pour cette page Wiki. Certains noms spéciaux
 wiki.original_git_entry_tooltip=Voir le fichier Git original au lieu d'utiliser un lien convivial.
 
 activity=Activité
+activity.navbar.pulse=Impulsion
+activity.navbar.code_frequency=Fréquence du code
 activity.navbar.contributors=Contributeurs
+activity.navbar.recent_commits=Révisions récentes
 activity.period.filter_label=Période :
 activity.period.daily=1 jour
 activity.period.halfweekly=3 jours
@@ -2017,7 +2103,9 @@ settings.branches.add_new_rule=Ajouter une nouvelle règle
 settings.advanced_settings=Paramètres avancés
 settings.wiki_desc=Activer le wiki du dépôt
 settings.use_internal_wiki=Utiliser le wiki interne
+settings.default_wiki_branch_name=Nom de la branche du Wiki par défaut
 settings.default_wiki_everyone_access=Autorisation d’accès par défaut pour les utilisateurs connectés :
+settings.failed_to_change_default_wiki_branch=Impossible de modifier la branche du wiki par défaut.
 settings.use_external_wiki=Utiliser un wiki externe
 settings.external_wiki_url=URL Wiki externe
 settings.external_wiki_url_error=L’URL du wiki externe n’est pas une URL valide.
@@ -2048,6 +2136,9 @@ settings.pulls.default_allow_edits_from_maintainers=Autoriser les modifications
 settings.releases_desc=Activer les publications du dépôt
 settings.packages_desc=Activer le registre des paquets du dépôt
 settings.projects_desc=Activer les projets de dépôt
+settings.projects_mode_desc=Mode Projets (type de projets à afficher)
+settings.projects_mode_repo=Projets de dépôt uniquement
+settings.projects_mode_owner=Projets d’utilisateur ou d’organisation uniquement
 settings.projects_mode_all=Tous les projets
 settings.actions_desc=Activer les actions du dépôt
 settings.admin_settings=Paramètres administrateur
@@ -2074,6 +2165,7 @@ settings.convert_fork_succeed=La bifurcation a été convertie en dépôt standa
 settings.transfer=Changer de propriétaire
 settings.transfer.rejected=Le transfert du dépôt a été rejeté.
 settings.transfer.success=Le transfert du dépôt a réussi.
+settings.transfer.blocked_user=Impossible de transférer ce dépôt car vous êtes bloqué par l’acquéreur.
 settings.transfer_abort=Annuler le transfert
 settings.transfer_abort_invalid=Vous ne pouvez pas annuler un transfert de dépôt inexistant.
 settings.transfer_abort_success=Le transfert du dépôt vers %s a bien été stoppé.
@@ -2119,6 +2211,7 @@ settings.add_collaborator_success=Le collaborateur a été ajouté.
 settings.add_collaborator_inactive_user=Impossible d'ajouter un utilisateur inactif en tant que collaborateur.
 settings.add_collaborator_owner=Impossible d'ajouter un propriétaire en tant que collaborateur.
 settings.add_collaborator_duplicate=Le collaborateur est déjà ajouté à ce dépôt.
+settings.add_collaborator.blocked_user=Ce collaborateur est bloqué par le propriétaire du dépôt ou inversement.
 settings.delete_collaborator=Supprimer
 settings.collaborator_deletion=Supprimer le collaborateur
 settings.collaborator_deletion_desc=La suppression d'un collaborateur révoque son accès à ce dépôt. Continuer ?
@@ -2557,13 +2650,16 @@ find_file.no_matching=Aucun fichier correspondant trouvé
 error.csv.too_large=Impossible de visualiser le fichier car il est trop volumineux.
 error.csv.unexpected=Impossible de visualiser ce fichier car il contient un caractère inattendu ligne %d, colonne %d.
 error.csv.invalid_field_count=Impossible de visualiser ce fichier car il contient un nombre de champs incorrect à la ligne %d.
+error.broken_git_hook=Les crochets Git de ce dépôt semblent cassés. Veuillez suivre la <a target="_blank" rel="noreferrer" href="%s">documentation</a> pour les corriger, puis pousser des révisions pour actualiser le statut.
 
 [graphs]
 component_loading=Chargement de %s…
 component_loading_failed=Impossible de charger %s.
 component_loading_info=Ça prend son temps…
 component_failed_to_load=Une erreur inattendue s’est produite.
+code_frequency.what=fréquence du code
 contributors.what=contributions
+recent_commits.what=révisions récentes
 
 [org]
 org_name_holder=Nom de l'organisation
@@ -2677,6 +2773,7 @@ teams.add_nonexistent_repo=Le dépôt que vous essayez d'ajouter n'existe pas, v
 teams.add_duplicate_users=L’utilisateur est déjà un membre de l’équipe.
 teams.repos.none=Aucun dépôt n'est accessible par cette équipe.
 teams.members.none=Aucun membre dans cette équipe.
+teams.members.blocked_user=Impossible d’ajouter l’utilisateur car il est bloqué par l’organisation.
 teams.specific_repositories=Dépôts spécifiques
 teams.specific_repositories_helper=Les membres auront seulement accès aux dépôts explicitement ajoutés à l'équipe. Sélectionner ceci <strong>ne supprimera pas automatiquement</strong> les dépôts déjà ajoutés avec <i>Tous les dépôts</i>.
 teams.all_repositories=Tous les dépôts
@@ -2689,6 +2786,7 @@ teams.invite.by=Invité par %s
 teams.invite.description=Veuillez cliquer sur le bouton ci-dessous pour rejoindre l’équipe.
 
 [admin]
+maintenance=Maintenance
 dashboard=Tableau de bord
 self_check=Autodiagnostique
 identity_access=Identité et accès
@@ -2712,6 +2810,7 @@ settings=Paramètres administrateur
 
 dashboard.new_version_hint=Gitea %s est maintenant disponible, vous utilisez %s. Consultez <a target="_blank" rel="noreferrer" href="https://blog.gitea.io">le blog</a> pour plus de détails.
 dashboard.statistic=Résumé
+dashboard.maintenance_operations=Opérations de maintenance
 dashboard.system_status=État du système
 dashboard.operation_name=Nom de l'Opération
 dashboard.operation_switch=Basculer
@@ -2997,11 +3096,14 @@ auths.tips=Conseils
 auths.tips.oauth2.general=Authentification OAuth2
 auths.tips.oauth2.general.tip=Lors de l'enregistrement d'une nouvelle authentification OAuth2, l'URL de rappel/redirection doit être :
 auths.tip.oauth2_provider=Fournisseur OAuth2
+auths.tip.bitbucket=Créez un nouveau jeton OAuth sur https://bitbucket.org/account/user/{your username}/oauth-consumers/new et ajoutez la permission “Compte” - “Lecture”.
 auths.tip.nextcloud=`Enregistrez un nouveau consommateur OAuth sur votre instance en utilisant le menu "Paramètres -> Sécurité -> Client OAuth 2.0"`
 auths.tip.dropbox=Créez une nouvelle application sur https://www.dropbox.com/developers/apps
 auths.tip.facebook=`Enregistrez une nouvelle application sur https://developers.facebook.com/apps et ajoutez le produit "Facebook Login"`
 auths.tip.github=Créez une nouvelle application OAuth sur https://github.com/settings/applications/new
+auths.tip.gitlab_new=Enregistrez une nouvelle application sur https://gitlab.com/-/profile/applications
 auths.tip.google_plus=Obtenez des identifiants OAuth2 sur la console API de Google (https://console.developers.google.com/)
+auths.tip.openid_connect=Utilisez l’URL de découverte OpenID « https://{server}/.well-known/openid-configuration » pour spécifier les points d'accès.
 auths.tip.twitter=Rendez-vous sur https://dev.twitter.com/apps, créez une application et assurez-vous que l'option "Autoriser l'application à être utilisée avec Twitter Connect" est activée
 auths.tip.discord=Enregistrer une nouvelle application sur https://discordapp.com/developers/applications/me
 auths.tip.gitea=Enregistrez une nouvelle application OAuth2. Le guide peut être trouvé sur https://docs.gitea.com/development/oauth2-provider
@@ -3135,6 +3237,7 @@ config.picture_config=Configuration de l'avatar
 config.picture_service=Service d'Imagerie
 config.disable_gravatar=Désactiver Gravatar
 config.enable_federated_avatar=Activer les avatars unifiés
+config.open_with_editor_app_help=Les éditeurs disponibles via « Ouvrir avec ». Si laissé vide, la valeur par défaut sera utilisée. Développez pour voir la valeur par défaut.
 
 config.git_config=Configuration de Git
 config.git_disable_diff_highlight=Désactiver la surbrillance syntaxique de Diff
@@ -3214,11 +3317,13 @@ notices.op=Opération
 notices.delete_success=Les informations systèmes ont été supprimées.
 
 self_check.no_problem_found=Aucun problème trouvé pour l’instant.
+self_check.startup_warnings=Avertissements au démarrage :
 self_check.database_collation_mismatch=Exige que la base de données utilise la collation %s.
 self_check.database_collation_case_insensitive=La base de données utilise la collation %s, insensible à la casse. Bien que Gitea soit compatible, il peut y avoir quelques rares cas qui ne fonctionnent pas comme prévu.
 self_check.database_inconsistent_collation_columns=La base de données utilise la collation %s, mais ces colonnes utilisent des collations différentes. Cela peut causer des problèmes imprévus.
 self_check.database_fix_mysql=Pour les utilisateurs de MySQL ou MariaDB, vous pouvez utiliser la commande « gitea doctor convert » dans un terminal ou exécuter une requête du type « ALTER … COLLATE ... » pour résoudre les problèmes de collation.
 self_check.database_fix_mssql=Pour les utilisateurs de MSSQL, vous ne pouvez résoudre le problème qu’en exécutant une requête SQL du type « ALTER … COLLATE … ».
+self_check.location_origin_mismatch=L’URL actuelle (%[1]s) ne correspond pas à l’URL vue par Gitea (%[2]). Si vous utilisez un proxy inverse, assurez-vous que les en-têtes « Host » et « X-Forwarded-Proto » sont correctement définis.
 
 [action]
 create_repo=a créé le dépôt <a href="%s">%s</a>
@@ -3246,6 +3351,7 @@ mirror_sync_create=a synchronisé la nouvelle référence <a href="%[2]s">%[3]s<
 mirror_sync_delete=a synchronisé puis supprimé la nouvelle référence <code>%[2]s</code> vers <a href="%[1]s">%[3]s</a> depuis le miroir
 approve_pull_request=`a approuvé <a href="%[1]s">%[3]s#%[2]s</a>`
 reject_pull_request=`a suggérés des changements pour <a href="%[1]s">%[3]s#%[2]s</a>`
+publish_release=`a publié <a href="%[2]s"> "%[4]s" </a> dans <a href="%[1]s">%[3]s</a>`
 review_dismissed=`a révoqué l’évaluation de <b>%[4]s</b> dans <a href="%[1]s">%[3]s#%[2]s</a>`
 review_dismissed_reason=Raison :
 create_branch=a créé la branche <a href="%[2]s">%[3]s</a> dans <a href="%[1]s">%[4]s</a>
@@ -3312,6 +3418,7 @@ error.unit_not_allowed=Vous n'êtes pas autorisé à accéder à cette section d
 title=Paquets
 desc=Gérer les paquets du dépôt.
 empty=Il n'y pas de paquet pour le moment.
+no_metadata=Pas de métadonnées.
 empty.documentation=Pour plus d'informations sur le registre de paquets, voir <a target="_blank" rel="noopener noreferrer" href="%s">la documentation</a>.
 empty.repo=Avez-vous téléchargé un paquet, mais il n'est pas affiché ici? Allez dans les <a href="%[1]s">paramètres du paquet</a> et liez le à ce dépôt.
 registry.documentation=Pour plus d’informations sur le registre %s, voir <a target="_blank" rel="noopener noreferrer" href="%s">la documentation</a>.
@@ -3393,6 +3500,7 @@ npm.install=Pour installer le paquet en utilisant npm, exécutez la commande sui
 npm.install2=ou ajoutez-le au fichier package.json :
 npm.dependencies=Dépendances
 npm.dependencies.development=Dépendances de développement
+npm.dependencies.bundle=Dépendances emballées
 npm.dependencies.peer=Dépendances de pairs
 npm.dependencies.optional=Dépendances optionnelles
 npm.details.tag=Balise
@@ -3532,6 +3640,8 @@ runs.scheduled=Planifié
 runs.pushed_by=soumis par
 runs.invalid_workflow_helper=La configuration du flux de travail est invalide. Veuillez vérifier votre fichier %s.
 runs.no_matching_online_runner_helper=Aucun exécuteur en ligne correspondant au libellé %s
+runs.no_job_without_needs=Le flux de travail doit contenir au moins une tâche sans dépendance.
+runs.no_job=Le flux de travail doit contenir au moins une tâche
 runs.actor=Acteur
 runs.status=Statut
 runs.actors_no_select=Tous les acteurs
diff --git a/options/locale/locale_ja-JP.ini b/options/locale/locale_ja-JP.ini
index 89df5ac0b9dba..d85ffb469408d 100644
--- a/options/locale/locale_ja-JP.ini
+++ b/options/locale/locale_ja-JP.ini
@@ -1378,6 +1378,7 @@ commitstatus.success=成功
 ext_issues=外部イシューへのアクセス
 ext_issues.desc=外部のイシュートラッカーへのリンク。
 
+projects.desc=プロジェクトでイシューとプルリクエストを管理します。
 projects.description=説明 (オプション)
 projects.description_placeholder=説明
 projects.create=プロジェクトを作成
@@ -1552,7 +1553,9 @@ issues.no_content=説明はありません。
 issues.close=イシューをクローズ
 issues.comment_pull_merged_at=がコミット %[1]s を %[2]s にマージ %[3]s
 issues.comment_manually_pull_merged_at=がコミット %[1]s を %[2]s に手動マージ %[3]s
+issues.close_comment_issue=コメントしてクローズ
 issues.reopen_issue=再オープンする
+issues.reopen_comment_issue=コメントして再オープン
 issues.create_comment=コメントする
 issues.comment.blocked_user=投稿者またはリポジトリのオーナーがあなたをブロックしているため、コメントの作成や編集はできません。
 issues.closed_at=`がイシューをクローズ <a id="%[1]s" href="#%[1]s">%[2]s</a>`
@@ -3412,6 +3415,7 @@ error.unit_not_allowed=このセクションへのアクセスが許可されて
 title=パッケージ
 desc=リポジトリ パッケージを管理します。
 empty=パッケージはまだありません。
+no_metadata=メタデータがありません。
 empty.documentation=パッケージレジストリの詳細については、 <a target="_blank" rel="noopener noreferrer" href="%s">ドキュメント</a> を参照してください。
 empty.repo=パッケージはアップロード済みで、ここに表示されていないですか？ <a href="%[1]s">パッケージ設定</a>を開いて、パッケージをこのリポジトリにリンクしてください。
 registry.documentation=%sレジストリの詳細については、 <a target="_blank" rel="noopener noreferrer" href="%s">ドキュメント</a> を参照してください。
@@ -3634,6 +3638,7 @@ runs.pushed_by=pushed by
 runs.invalid_workflow_helper=ワークフロー設定ファイルは無効です。あなたの設定ファイルを確認してください: %s
 runs.no_matching_online_runner_helper=ラベルに一致するオンラインのランナーが見つかりません: %s
 runs.no_job_without_needs=ワークフローには依存関係のないジョブが少なくとも1つ含まれている必要があります。
+runs.no_job=ワークフローには少なくとも1つのジョブが含まれている必要があります
 runs.actor=アクター
 runs.status=ステータス
 runs.actors_no_select=すべてのアクター
diff --git a/routers/api/packages/container/container.go b/routers/api/packages/container/container.go
index 2a6d44ba08124..b0c4458d5114e 100644
--- a/routers/api/packages/container/container.go
+++ b/routers/api/packages/container/container.go
@@ -116,9 +116,9 @@ func apiErrorDefined(ctx *context.Context, err *namedError) {
 }
 
 func apiUnauthorizedError(ctx *context.Context) {
-	// TODO: it doesn't seem quite right but it doesn't really cause problem at the moment.
-	// container registry requires that the "/v2" must be in the root, so the sub-path in AppURL should be removed, ideally.
-	ctx.Resp.Header().Add("WWW-Authenticate", `Bearer realm="`+httplib.GuessCurrentAppURL(ctx)+`v2/token",service="container_registry",scope="*"`)
+	// container registry requires that the "/v2" must be in the root, so the sub-path in AppURL should be removed
+	realmURL := strings.TrimSuffix(httplib.GuessCurrentAppURL(ctx), setting.AppSubURL+"/") + "/v2/token"
+	ctx.Resp.Header().Add("WWW-Authenticate", `Bearer realm="`+realmURL+`",service="container_registry",scope="*"`)
 	apiErrorDefined(ctx, errUnauthorized)
 }
 
diff --git a/routers/web/user/package.go b/routers/web/user/package.go
index 2a18796687363..dad4c8f602a57 100644
--- a/routers/web/user/package.go
+++ b/routers/web/user/package.go
@@ -5,6 +5,7 @@ package user
 
 import (
 	"net/http"
+	"net/url"
 
 	"code.gitea.io/gitea/models/db"
 	org_model "code.gitea.io/gitea/models/organization"
@@ -15,6 +16,7 @@ import (
 	repo_model "code.gitea.io/gitea/models/repo"
 	"code.gitea.io/gitea/modules/base"
 	"code.gitea.io/gitea/modules/container"
+	"code.gitea.io/gitea/modules/httplib"
 	"code.gitea.io/gitea/modules/log"
 	"code.gitea.io/gitea/modules/optional"
 	alpine_module "code.gitea.io/gitea/modules/packages/alpine"
@@ -178,7 +180,11 @@ func ViewPackageVersion(ctx *context.Context) {
 
 	switch pd.Package.Type {
 	case packages_model.TypeContainer:
-		ctx.Data["RegistryHost"] = setting.Packages.RegistryHost
+		registryAppURL, err := url.Parse(httplib.GuessCurrentAppURL(ctx))
+		if err != nil {
+			registryAppURL, _ = url.Parse(setting.AppURL)
+		}
+		ctx.Data["RegistryHost"] = registryAppURL.Host
 	case packages_model.TypeAlpine:
 		branches := make(container.Set[string])
 		repositories := make(container.Set[string])
diff --git a/templates/admin/packages/list.tmpl b/templates/admin/packages/list.tmpl
index 863f11da25142..d1d77b6220158 100644
--- a/templates/admin/packages/list.tmpl
+++ b/templates/admin/packages/list.tmpl
@@ -5,7 +5,7 @@
 			{{ctx.Locale.Tr "admin.packages.total_size" (FileSize .TotalBlobSize)}},
 			{{ctx.Locale.Tr "admin.packages.unreferenced_size" (FileSize .TotalUnreferencedBlobSize)}})
 			<div class="ui right">
-				<form method="post" action="/admin/packages/cleanup">
+				<form method="post" action="{{AppSubUrl}}/admin/packages/cleanup">
 					{{.CsrfTokenHtml}}
 					<button class="ui primary tiny button">{{ctx.Locale.Tr "admin.packages.cleanup"}}</button>
 				</form>
diff --git a/templates/devtest/fetch-action.tmpl b/templates/devtest/fetch-action.tmpl
index 2b25e6c9c49e4..66f41fc6de0b4 100644
--- a/templates/devtest/fetch-action.tmpl
+++ b/templates/devtest/fetch-action.tmpl
@@ -25,7 +25,7 @@
 				<div><label><input name="check" type="checkbox"> check</label></div>
 				<div><button name="btn">submit post</button></div>
 			</form>
-			<form method="post" action="/no-such-uri" class="form-fetch-action">
+			<form method="post" action="no-such-uri" class="form-fetch-action">
 				<div class="tw-py-8">bad action url</div>
 				<div><button name="btn">submit test</button></div>
 			</form>
diff --git a/templates/repo/editor/commit_form.tmpl b/templates/repo/editor/commit_form.tmpl
index 21ef63288fd84..61122417d260f 100644
--- a/templates/repo/editor/commit_form.tmpl
+++ b/templates/repo/editor/commit_form.tmpl
@@ -23,7 +23,7 @@
 		<div class="quick-pull-choice js-quick-pull-choice">
 			<div class="field">
 				<div class="ui radio checkbox {{if not .CanCommitToBranch.CanCommitToBranch}}disabled{{end}}">
-					<input type="radio" class="js-quick-pull-choice-option" name="commit_choice" value="direct" button_text="{{ctx.Locale.Tr "repo.editor.commit_changes"}}" {{if eq .commit_choice "direct"}}checked{{end}}>
+					<input type="radio" class="js-quick-pull-choice-option" name="commit_choice" value="direct" data-button-text="{{ctx.Locale.Tr "repo.editor.commit_changes"}}" {{if eq .commit_choice "direct"}}checked{{end}}>
 					<label>
 						{{svg "octicon-git-commit"}}
 						{{ctx.Locale.Tr "repo.editor.commit_directly_to_this_branch" .BranchName}}
@@ -43,9 +43,9 @@
 				<div class="field">
 					<div class="ui radio checkbox">
 						{{if .CanCreatePullRequest}}
-							<input type="radio" class="js-quick-pull-choice-option" name="commit_choice" value="commit-to-new-branch" button_text="{{ctx.Locale.Tr "repo.editor.propose_file_change"}}" {{if eq .commit_choice "commit-to-new-branch"}}checked{{end}}>
+							<input type="radio" class="js-quick-pull-choice-option" name="commit_choice" value="commit-to-new-branch" data-button-text="{{ctx.Locale.Tr "repo.editor.propose_file_change"}}" {{if eq .commit_choice "commit-to-new-branch"}}checked{{end}}>
 						{{else}}
-							<input type="radio" class="js-quick-pull-choice-option" name="commit_choice" value="commit-to-new-branch" button_text="{{ctx.Locale.Tr "repo.editor.commit_changes"}}" {{if eq .commit_choice "commit-to-new-branch"}}checked{{end}}>
+							<input type="radio" class="js-quick-pull-choice-option" name="commit_choice" value="commit-to-new-branch" data-button-text="{{ctx.Locale.Tr "repo.editor.commit_changes"}}" {{if eq .commit_choice "commit-to-new-branch"}}checked{{end}}>
 						{{end}}
 						<label>
 							{{svg "octicon-git-pull-request"}}
diff --git a/templates/repo/settings/collaboration.tmpl b/templates/repo/settings/collaboration.tmpl
index ed4d5e7eb3e8e..255d0d59a1217 100644
--- a/templates/repo/settings/collaboration.tmpl
+++ b/templates/repo/settings/collaboration.tmpl
@@ -19,13 +19,13 @@
 						<div class="flex-item-trailing">
 							<div class="flex-text-block">
 								{{svg "octicon-shield-lock"}}
-								<div class="ui inline dropdown access-mode" data-url="{{$.Link}}/access_mode" data-uid="{{.ID}}" data-last-value="{{printf "%d" .Collaboration.Mode}}">
+								<div class="ui dropdown custom access-mode" data-url="{{$.Link}}/access_mode" data-uid="{{.ID}}" data-last-value="{{.Collaboration.Mode}}">
 									<div class="text">{{if eq .Collaboration.Mode 1}}{{ctx.Locale.Tr "repo.settings.collaboration.read"}}{{else if eq .Collaboration.Mode 2}}{{ctx.Locale.Tr "repo.settings.collaboration.write"}}{{else if eq .Collaboration.Mode 3}}{{ctx.Locale.Tr "repo.settings.collaboration.admin"}}{{else}}{{ctx.Locale.Tr "repo.settings.collaboration.undefined"}}{{end}}</div>
 									{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 									<div class="menu">
-										<div class="item" data-text="{{ctx.Locale.Tr "repo.settings.collaboration.admin"}}" data-value="3">{{ctx.Locale.Tr "repo.settings.collaboration.admin"}}</div>
-										<div class="item" data-text="{{ctx.Locale.Tr "repo.settings.collaboration.write"}}" data-value="2">{{ctx.Locale.Tr "repo.settings.collaboration.write"}}</div>
-										<div class="item" data-text="{{ctx.Locale.Tr "repo.settings.collaboration.read"}}" data-value="1">{{ctx.Locale.Tr "repo.settings.collaboration.read"}}</div>
+										<div class="item" data-value="3">{{ctx.Locale.Tr "repo.settings.collaboration.admin"}}</div>
+										<div class="item" data-value="2">{{ctx.Locale.Tr "repo.settings.collaboration.write"}}</div>
+										<div class="item" data-value="1">{{ctx.Locale.Tr "repo.settings.collaboration.read"}}</div>
 									</div>
 								</div>
 							</div>
diff --git a/templates/user/settings/applications.tmpl b/templates/user/settings/applications.tmpl
index 8c67653e58932..3c1934dd8b471 100644
--- a/templates/user/settings/applications.tmpl
+++ b/templates/user/settings/applications.tmpl
@@ -75,7 +75,7 @@
 						{{ctx.Locale.Tr "settings.select_permissions"}}
 					</summary>
 					<p class="activity meta">
-						<i>{{ctx.Locale.Tr "settings.access_token_desc" (`href="/api/swagger" target="_blank"`|SafeHTML) (`href="https://docs.gitea.com/development/oauth2-provider#scopes" target="_blank"`|SafeHTML)}}</i>
+						<i>{{ctx.Locale.Tr "settings.access_token_desc" (HTMLFormat `href="%s/api/swagger" target="_blank"` AppSubUrl) (`href="https://docs.gitea.com/development/oauth2-provider#scopes" target="_blank"`|SafeHTML)}}</i>
 					</p>
 					<div class="scoped-access-token-mount">
 						<scoped-access-token-selector
diff --git a/tests/integration/api_packages_container_test.go b/tests/integration/api_packages_container_test.go
index 9ac6e5256b14c..fcd1cc529f214 100644
--- a/tests/integration/api_packages_container_test.go
+++ b/tests/integration/api_packages_container_test.go
@@ -84,7 +84,7 @@ func TestPackageContainer(t *testing.T) {
 			Token string `json:"token"`
 		}
 
-		authenticate := []string{`Bearer realm="` + setting.AppURL + `v2/token",service="container_registry",scope="*"`}
+		defaultAuthenticateValues := []string{`Bearer realm="` + setting.AppURL + `v2/token",service="container_registry",scope="*"`}
 
 		t.Run("Anonymous", func(t *testing.T) {
 			defer tests.PrintCurrentTest(t)()
@@ -92,7 +92,7 @@ func TestPackageContainer(t *testing.T) {
 			req := NewRequest(t, "GET", fmt.Sprintf("%sv2", setting.AppURL))
 			resp := MakeRequest(t, req, http.StatusUnauthorized)
 
-			assert.ElementsMatch(t, authenticate, resp.Header().Values("WWW-Authenticate"))
+			assert.ElementsMatch(t, defaultAuthenticateValues, resp.Header().Values("WWW-Authenticate"))
 
 			req = NewRequest(t, "GET", fmt.Sprintf("%sv2/token", setting.AppURL))
 			resp = MakeRequest(t, req, http.StatusOK)
@@ -115,6 +115,12 @@ func TestPackageContainer(t *testing.T) {
 
 			req = NewRequest(t, "GET", fmt.Sprintf("%sv2/token", setting.AppURL))
 			MakeRequest(t, req, http.StatusUnauthorized)
+
+			defer test.MockVariableValue(&setting.AppURL, "https://domain:8443/sub-path/")()
+			defer test.MockVariableValue(&setting.AppSubURL, "/sub-path")()
+			req = NewRequest(t, "GET", "/v2")
+			resp = MakeRequest(t, req, http.StatusUnauthorized)
+			assert.Equal(t, `Bearer realm="https://domain:8443/v2/token",service="container_registry",scope="*"`, resp.Header().Get("WWW-Authenticate"))
 		})
 
 		t.Run("User", func(t *testing.T) {
@@ -123,7 +129,7 @@ func TestPackageContainer(t *testing.T) {
 			req := NewRequest(t, "GET", fmt.Sprintf("%sv2", setting.AppURL))
 			resp := MakeRequest(t, req, http.StatusUnauthorized)
 
-			assert.ElementsMatch(t, authenticate, resp.Header().Values("WWW-Authenticate"))
+			assert.ElementsMatch(t, defaultAuthenticateValues, resp.Header().Values("WWW-Authenticate"))
 
 			req = NewRequest(t, "GET", fmt.Sprintf("%sv2/token", setting.AppURL)).
 				AddBasicAuth(user.Name)
diff --git a/web_src/css/base.css b/web_src/css/base.css
index 0e54d17262e2e..3bdcde99f6d22 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -1001,8 +1001,6 @@ overflow-menu .ui.label {
   padding: 0 8px;
   text-align: right !important;
   color: var(--color-text-light-2);
-  width: 1%;
-  font-family: var(--fonts-monospace);
 }
 
 .lines-num span.bottom-line::after {
diff --git a/web_src/js/components/DashboardRepoList.vue b/web_src/js/components/DashboardRepoList.vue
index 3f9f427cd7b97..23984b3164c4d 100644
--- a/web_src/js/components/DashboardRepoList.vue
+++ b/web_src/js/components/DashboardRepoList.vue
@@ -101,7 +101,7 @@ const sfc = {
   },
 
   mounted() {
-    const el = document.getElementById('dashboard-repo-list');
+    const el = document.querySelector('#dashboard-repo-list');
     this.changeReposFilter(this.reposFilter);
     $(el).find('.dropdown').dropdown();
     nextTick(() => {
@@ -330,7 +330,7 @@ const sfc = {
 };
 
 export function initDashboardRepoList() {
-  const el = document.getElementById('dashboard-repo-list');
+  const el = document.querySelector('#dashboard-repo-list');
   if (el) {
     createApp(sfc).mount(el);
   }
diff --git a/web_src/js/components/DiffCommitSelector.vue b/web_src/js/components/DiffCommitSelector.vue
index 352d08573184f..c28be67e388cf 100644
--- a/web_src/js/components/DiffCommitSelector.vue
+++ b/web_src/js/components/DiffCommitSelector.vue
@@ -5,7 +5,7 @@ import {GET} from '../modules/fetch.js';
 export default {
   components: {SvgIcon},
   data: () => {
-    const el = document.getElementById('diff-commit-select');
+    const el = document.querySelector('#diff-commit-select');
     return {
       menuVisible: false,
       isLoading: false,
diff --git a/web_src/js/components/DiffFileList.vue b/web_src/js/components/DiffFileList.vue
index 916780d9137dc..806c8385bb306 100644
--- a/web_src/js/components/DiffFileList.vue
+++ b/web_src/js/components/DiffFileList.vue
@@ -7,10 +7,10 @@ export default {
     return {store: diffTreeStore()};
   },
   mounted() {
-    document.getElementById('show-file-list-btn').addEventListener('click', this.toggleFileList);
+    document.querySelector('#show-file-list-btn').addEventListener('click', this.toggleFileList);
   },
   unmounted() {
-    document.getElementById('show-file-list-btn').removeEventListener('click', this.toggleFileList);
+    document.querySelector('#show-file-list-btn').removeEventListener('click', this.toggleFileList);
   },
   methods: {
     toggleFileList() {
diff --git a/web_src/js/components/DiffFileTree.vue b/web_src/js/components/DiffFileTree.vue
index cddfee1e04d05..fd5120f18b9f5 100644
--- a/web_src/js/components/DiffFileTree.vue
+++ b/web_src/js/components/DiffFileTree.vue
@@ -112,7 +112,7 @@ export default {
     updateState(visible) {
       const btn = document.querySelector('.diff-toggle-file-tree-button');
       const [toShow, toHide] = btn.querySelectorAll('.icon');
-      const tree = document.getElementById('diff-file-tree');
+      const tree = document.querySelector('#diff-file-tree');
       const newTooltip = btn.getAttribute(visible ? 'data-hide-text' : 'data-show-text');
       btn.setAttribute('data-tooltip-content', newTooltip);
       toggleElem(tree, visible);
diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index 8b39d0504b5d4..7f6524c7e3ddd 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -325,7 +325,7 @@ const sfc = {
 export default sfc;
 
 export function initRepositoryActionView() {
-  const el = document.getElementById('repo-action-view');
+  const el = document.querySelector('#repo-action-view');
   if (!el) return;
 
   // TODO: the parent element's full height doesn't work well now,
diff --git a/web_src/js/components/RepoActivityTopAuthors.vue b/web_src/js/components/RepoActivityTopAuthors.vue
index a41fb61d7891f..295641f7e566e 100644
--- a/web_src/js/components/RepoActivityTopAuthors.vue
+++ b/web_src/js/components/RepoActivityTopAuthors.vue
@@ -51,7 +51,7 @@ const sfc = {
 };
 
 export function initRepoActivityTopAuthorsChart() {
-  const el = document.getElementById('repo-activity-top-authors-chart');
+  const el = document.querySelector('#repo-activity-top-authors-chart');
   if (el) {
     createApp(sfc).mount(el);
   }
diff --git a/web_src/js/components/RepoBranchTagSelector.vue b/web_src/js/components/RepoBranchTagSelector.vue
index 87530225e3dd3..d18378bea1709 100644
--- a/web_src/js/components/RepoBranchTagSelector.vue
+++ b/web_src/js/components/RepoBranchTagSelector.vue
@@ -85,7 +85,7 @@ const sfc = {
         this.isViewBranch = false;
         this.$refs.dropdownRefName.textContent = item.name;
         if (this.setAction) {
-          document.getElementById(this.branchForm)?.setAttribute('action', url);
+          document.querySelector(`#${this.branchForm}`)?.setAttribute('action', url);
         } else {
           $(`#${this.branchForm} input[name="refURL"]`).val(url);
         }
diff --git a/web_src/js/components/ScopedAccessTokenSelector.vue b/web_src/js/components/ScopedAccessTokenSelector.vue
index 103cc525ad021..9ff3627c119ab 100644
--- a/web_src/js/components/ScopedAccessTokenSelector.vue
+++ b/web_src/js/components/ScopedAccessTokenSelector.vue
@@ -43,25 +43,25 @@ const sfc = {
   },
 
   mounted() {
-    document.getElementById('scoped-access-submit').addEventListener('click', this.onClickSubmit);
+    document.querySelector('#scoped-access-submit').addEventListener('click', this.onClickSubmit);
   },
 
   unmounted() {
-    document.getElementById('scoped-access-submit').removeEventListener('click', this.onClickSubmit);
+    document.querySelector('#scoped-access-submit').removeEventListener('click', this.onClickSubmit);
   },
 
   methods: {
     onClickSubmit(e) {
       e.preventDefault();
 
-      const warningEl = document.getElementById('scoped-access-warning');
+      const warningEl = document.querySelector('#scoped-access-warning');
       // check that at least one scope has been selected
-      for (const el of document.getElementsByClassName('access-token-select')) {
+      for (const el of document.querySelectorAll('.access-token-select')) {
         if (el.value) {
           // Hide the error if it was visible from previous attempt.
           hideElem(warningEl);
           // Submit the form.
-          document.getElementById('scoped-access-form').submit();
+          document.querySelector('#scoped-access-form').submit();
           // Don't show the warning.
           return;
         }
@@ -78,7 +78,7 @@ export default sfc;
  * Initialize category toggle sections
  */
 export function initScopedAccessTokenCategories() {
-  for (const el of document.getElementsByClassName('scoped-access-token-mount')) {
+  for (const el of document.querySelectorAll('.scoped-access-token-mount')) {
     createApp({})
       .component('scoped-access-token-selector', sfc)
       .mount(el);
diff --git a/web_src/js/features/admin/common.js b/web_src/js/features/admin/common.js
index 3c90b546b86b9..429d6a808cdd2 100644
--- a/web_src/js/features/admin/common.js
+++ b/web_src/js/features/admin/common.js
@@ -6,7 +6,7 @@ import {POST} from '../../modules/fetch.js';
 const {appSubUrl} = window.config;
 
 function onSecurityProtocolChange() {
-  if (Number(document.getElementById('security_protocol')?.value) > 0) {
+  if (Number(document.querySelector('#security_protocol')?.value) > 0) {
     showElem('.has-tls');
   } else {
     hideElem('.has-tls');
@@ -21,34 +21,34 @@ export function initAdminCommon() {
 
   // New user
   if ($('.admin.new.user').length > 0 || $('.admin.edit.user').length > 0) {
-    document.getElementById('login_type')?.addEventListener('change', function () {
+    document.querySelector('#login_type')?.addEventListener('change', function () {
       if (this.value?.substring(0, 1) === '0') {
-        document.getElementById('user_name')?.removeAttribute('disabled');
-        document.getElementById('login_name')?.removeAttribute('required');
+        document.querySelector('#user_name')?.removeAttribute('disabled');
+        document.querySelector('#login_name')?.removeAttribute('required');
         hideElem('.non-local');
         showElem('.local');
-        document.getElementById('user_name')?.focus();
+        document.querySelector('#user_name')?.focus();
 
         if (this.getAttribute('data-password') === 'required') {
-          document.getElementById('password')?.setAttribute('required', 'required');
+          document.querySelector('#password')?.setAttribute('required', 'required');
         }
       } else {
         if (document.querySelector('.admin.edit.user')) {
-          document.getElementById('user_name')?.setAttribute('disabled', 'disabled');
+          document.querySelector('#user_name')?.setAttribute('disabled', 'disabled');
         }
-        document.getElementById('login_name')?.setAttribute('required', 'required');
+        document.querySelector('#login_name')?.setAttribute('required', 'required');
         showElem('.non-local');
         hideElem('.local');
-        document.getElementById('login_name')?.focus();
+        document.querySelector('#login_name')?.focus();
 
-        document.getElementById('password')?.removeAttribute('required');
+        document.querySelector('#password')?.removeAttribute('required');
       }
     });
   }
 
   function onUsePagedSearchChange() {
     const searchPageSizeElements = document.querySelectorAll('.search-page-size');
-    if (document.getElementById('use_paged_search').checked) {
+    if (document.querySelector('#use_paged_search').checked) {
       showElem('.search-page-size');
       for (const el of searchPageSizeElements) {
         el.querySelector('input')?.setAttribute('required', 'required');
@@ -67,7 +67,7 @@ export function initAdminCommon() {
       input.removeAttribute('required');
     }
 
-    const provider = document.getElementById('oauth2_provider').value;
+    const provider = document.querySelector('#oauth2_provider').value;
     switch (provider) {
       case 'openidConnect':
         document.querySelector('.open_id_connect_auto_discovery_url input').setAttribute('required', 'required');
@@ -91,19 +91,19 @@ export function initAdminCommon() {
   }
 
   function onOAuth2UseCustomURLChange(applyDefaultValues) {
-    const provider = document.getElementById('oauth2_provider').value;
+    const provider = document.querySelector('#oauth2_provider').value;
     hideElem('.oauth2_use_custom_url_field');
     for (const input of document.querySelectorAll('.oauth2_use_custom_url_field input[required]')) {
       input.removeAttribute('required');
     }
 
     const elProviderCustomUrlSettings = document.querySelector(`#${provider}_customURLSettings`);
-    if (elProviderCustomUrlSettings && document.getElementById('oauth2_use_custom_url').checked) {
+    if (elProviderCustomUrlSettings && document.querySelector('#oauth2_use_custom_url').checked) {
       for (const custom of ['token_url', 'auth_url', 'profile_url', 'email_url', 'tenant']) {
         if (applyDefaultValues) {
-          document.getElementById(`oauth2_${custom}`).value = document.getElementById(`${provider}_${custom}`).value;
+          document.querySelector(`#oauth2_${custom}`).value = document.querySelector(`#${provider}_${custom}`).value;
         }
-        const customInput = document.getElementById(`${provider}_${custom}`);
+        const customInput = document.querySelector(`#${provider}_${custom}`);
         if (customInput && customInput.getAttribute('data-available') === 'true') {
           for (const input of document.querySelectorAll(`.oauth2_${custom} input`)) {
             input.setAttribute('required', 'required');
@@ -115,12 +115,12 @@ export function initAdminCommon() {
   }
 
   function onEnableLdapGroupsChange() {
-    toggleElem(document.getElementById('ldap-group-options'), $('.js-ldap-group-toggle')[0].checked);
+    toggleElem(document.querySelector('#ldap-group-options'), $('.js-ldap-group-toggle')[0].checked);
   }
 
   // New authentication
   if (document.querySelector('.admin.new.authentication')) {
-    document.getElementById('auth_type')?.addEventListener('change', function () {
+    document.querySelector('#auth_type')?.addEventListener('change', function () {
       hideElem('.ldap, .dldap, .smtp, .pam, .oauth2, .has-tls, .search-page-size, .sspi');
 
       for (const input of document.querySelectorAll('.ldap input[required], .binddnrequired input[required], .dldap input[required], .smtp input[required], .pam input[required], .oauth2 input[required], .has-tls input[required], .sspi input[required]')) {
@@ -180,25 +180,25 @@ export function initAdminCommon() {
       }
     });
     $('#auth_type').trigger('change');
-    document.getElementById('security_protocol')?.addEventListener('change', onSecurityProtocolChange);
-    document.getElementById('use_paged_search')?.addEventListener('change', onUsePagedSearchChange);
-    document.getElementById('oauth2_provider')?.addEventListener('change', () => onOAuth2Change(true));
-    document.getElementById('oauth2_use_custom_url')?.addEventListener('change', () => onOAuth2UseCustomURLChange(true));
+    document.querySelector('#security_protocol')?.addEventListener('change', onSecurityProtocolChange);
+    document.querySelector('#use_paged_search')?.addEventListener('change', onUsePagedSearchChange);
+    document.querySelector('#oauth2_provider')?.addEventListener('change', () => onOAuth2Change(true));
+    document.querySelector('#oauth2_use_custom_url')?.addEventListener('change', () => onOAuth2UseCustomURLChange(true));
     $('.js-ldap-group-toggle').on('change', onEnableLdapGroupsChange);
   }
   // Edit authentication
   if (document.querySelector('.admin.edit.authentication')) {
-    const authType = document.getElementById('auth_type')?.value;
+    const authType = document.querySelector('#auth_type')?.value;
     if (authType === '2' || authType === '5') {
-      document.getElementById('security_protocol')?.addEventListener('change', onSecurityProtocolChange);
+      document.querySelector('#security_protocol')?.addEventListener('change', onSecurityProtocolChange);
       $('.js-ldap-group-toggle').on('change', onEnableLdapGroupsChange);
       onEnableLdapGroupsChange();
       if (authType === '2') {
-        document.getElementById('use_paged_search')?.addEventListener('change', onUsePagedSearchChange);
+        document.querySelector('#use_paged_search')?.addEventListener('change', onUsePagedSearchChange);
       }
     } else if (authType === '6') {
-      document.getElementById('oauth2_provider')?.addEventListener('change', () => onOAuth2Change(true));
-      document.getElementById('oauth2_use_custom_url')?.addEventListener('change', () => onOAuth2UseCustomURLChange(false));
+      document.querySelector('#oauth2_provider')?.addEventListener('change', () => onOAuth2Change(true));
+      document.querySelector('#oauth2_use_custom_url')?.addEventListener('change', () => onOAuth2UseCustomURLChange(false));
       onOAuth2Change(false);
     }
   }
@@ -206,13 +206,13 @@ export function initAdminCommon() {
   if (document.querySelector('.admin.authentication')) {
     $('#auth_name').on('input', function () {
       // appSubUrl is either empty or is a path that starts with `/` and doesn't have a trailing slash.
-      document.getElementById('oauth2-callback-url').textContent = `${window.location.origin}${appSubUrl}/user/oauth2/${encodeURIComponent(this.value)}/callback`;
+      document.querySelector('#oauth2-callback-url').textContent = `${window.location.origin}${appSubUrl}/user/oauth2/${encodeURIComponent(this.value)}/callback`;
     }).trigger('input');
   }
 
   // Notice
   if (document.querySelector('.admin.notice')) {
-    const detailModal = document.getElementById('detail-modal');
+    const detailModal = document.querySelector('#detail-modal');
 
     // Attach view detail modals
     $('.view-detail').on('click', function () {
@@ -244,7 +244,7 @@ export function initAdminCommon() {
           break;
       }
     });
-    document.getElementById('delete-selection')?.addEventListener('click', async function (e) {
+    document.querySelector('#delete-selection')?.addEventListener('click', async function (e) {
       e.preventDefault();
       this.classList.add('is-loading', 'disabled');
       const data = new FormData();
diff --git a/web_src/js/features/citation.js b/web_src/js/features/citation.js
index 918a4671364c2..245ba56f81a6a 100644
--- a/web_src/js/features/citation.js
+++ b/web_src/js/features/citation.js
@@ -27,9 +27,9 @@ export async function initCitationFileCopyContent() {
 
   if (!pageData.citationFileContent) return;
 
-  const citationCopyApa = document.getElementById('citation-copy-apa');
-  const citationCopyBibtex = document.getElementById('citation-copy-bibtex');
-  const inputContent = document.getElementById('citation-copy-content');
+  const citationCopyApa = document.querySelector('#citation-copy-apa');
+  const citationCopyBibtex = document.querySelector('#citation-copy-bibtex');
+  const inputContent = document.querySelector('#citation-copy-content');
 
   if ((!citationCopyApa && !citationCopyBibtex) || !inputContent) return;
 
@@ -41,7 +41,7 @@ export async function initCitationFileCopyContent() {
     citationCopyApa.classList.toggle('primary', !isBibtex);
   };
 
-  document.getElementById('cite-repo-button')?.addEventListener('click', async (e) => {
+  document.querySelector('#cite-repo-button')?.addEventListener('click', async (e) => {
     const dropdownBtn = e.target.closest('.ui.dropdown.button');
     dropdownBtn.classList.add('is-loading');
 
diff --git a/web_src/js/features/code-frequency.js b/web_src/js/features/code-frequency.js
index 47e1539ddc960..da7cd6b2c0094 100644
--- a/web_src/js/features/code-frequency.js
+++ b/web_src/js/features/code-frequency.js
@@ -1,7 +1,7 @@
 import {createApp} from 'vue';
 
 export async function initRepoCodeFrequency() {
-  const el = document.getElementById('repo-code-frequency-chart');
+  const el = document.querySelector('#repo-code-frequency-chart');
   if (!el) return;
 
   const {default: RepoCodeFrequency} = await import(/* webpackChunkName: "code-frequency-graph" */'../components/RepoCodeFrequency.vue');
diff --git a/web_src/js/features/colorpicker.js b/web_src/js/features/colorpicker.js
index 6d00d908c9678..a85c04de41173 100644
--- a/web_src/js/features/colorpicker.js
+++ b/web_src/js/features/colorpicker.js
@@ -1,7 +1,7 @@
 import {createTippy} from '../modules/tippy.js';
 
 export async function initColorPickers() {
-  const els = document.getElementsByClassName('js-color-picker-input');
+  const els = document.querySelectorAll('.js-color-picker-input');
   if (!els.length) return;
 
   await Promise.all([
diff --git a/web_src/js/features/common-global.js b/web_src/js/features/common-global.js
index 65eb237ddeee3..1ab2a556993fd 100644
--- a/web_src/js/features/common-global.js
+++ b/web_src/js/features/common-global.js
@@ -24,8 +24,8 @@ export function initGlobalFormDirtyLeaveConfirm() {
 }
 
 export function initHeadNavbarContentToggle() {
-  const navbar = document.getElementById('navbar');
-  const btn = document.getElementById('navbar-expand-toggle');
+  const navbar = document.querySelector('#navbar');
+  const btn = document.querySelector('#navbar-expand-toggle');
   if (!navbar || !btn) return;
 
   btn.addEventListener('click', () => {
@@ -301,52 +301,65 @@ async function linkAction(e) {
   }
 }
 
-export function initGlobalLinkActions() {
-  function showDeletePopup(e) {
-    e.preventDefault();
-    const $this = $(this);
-    const dataArray = $this.data();
-    let filter = '';
-    if (this.getAttribute('data-modal-id')) {
-      filter += `#${this.getAttribute('data-modal-id')}`;
-    }
+export function initGlobalDeleteButton() {
+  // ".delete-button" shows a confirmation modal defined by `data-modal-id` attribute.
+  // Some model/form elements will be filled by `data-id` / `data-name` / `data-data-xxx` attributes.
+  // If there is a form defined by `data-form`, then the form will be submitted as-is (without any modification).
+  // If there is no form, then the data will be posted to `data-url`.
+  // TODO: it's not encouraged to use this method. `show-modal` does far better than this.
+  for (const btn of document.querySelectorAll('.delete-button')) {
+    btn.addEventListener('click', (e) => {
+      e.preventDefault();
 
-    const $dialog = $(`.delete.modal${filter}`);
-    $dialog.find('.name').text($this.data('name'));
-    for (const [key, value] of Object.entries(dataArray)) {
-      if (key && key.startsWith('data')) {
-        $dialog.find(`.${key}`).text(value);
-      }
-    }
+      // eslint-disable-next-line github/no-dataset -- code depends on the camel-casing
+      const dataObj = btn.dataset;
+
+      const modalId = btn.getAttribute('data-modal-id');
+      const modal = document.querySelector(`.delete.modal${modalId ? `#${modalId}` : ''}`);
 
-    $dialog.modal({
-      closable: false,
-      onApprove: async () => {
-        if ($this.data('type') === 'form') {
-          $($this.data('form')).trigger('submit');
-          return;
+      // set the modal "display name" by `data-name`
+      const modalNameEl = modal.querySelector('.name');
+      if (modalNameEl) modalNameEl.textContent = btn.getAttribute('data-name');
+
+      // fill the modal elements with data-xxx attributes: `data-data-organization-name="..."` => `<span class="dataOrganizationName">...</span>`
+      for (const [key, value] of Object.entries(dataObj)) {
+        if (key.startsWith('data')) {
+          const textEl = modal.querySelector(`.${key}`);
+          if (textEl) textEl.textContent = value;
         }
-        const postData = new FormData();
-        for (const [key, value] of Object.entries(dataArray)) {
-          if (key && key.startsWith('data')) {
-            postData.append(key.slice(4), value);
+      }
+
+      $(modal).modal({
+        closable: false,
+        onApprove: async () => {
+          // if `data-type="form"` exists, then submit the form by the selector provided by `data-form="..."`
+          if (btn.getAttribute('data-type') === 'form') {
+            const formSelector = btn.getAttribute('data-form');
+            const form = document.querySelector(formSelector);
+            if (!form) throw new Error(`no form named ${formSelector} found`);
+            form.submit();
           }
-          if (key === 'id') {
-            postData.append('id', value);
+
+          // prepare an AJAX form by data attributes
+          const postData = new FormData();
+          for (const [key, value] of Object.entries(dataObj)) {
+            if (key.startsWith('data')) { // for data-data-xxx (HTML) -> dataXxx (form)
+              postData.append(key.slice(4), value);
+            }
+            if (key === 'id') { // for data-id="..."
+              postData.append('id', value);
+            }
           }
-        }
 
-        const response = await POST($this.data('url'), {data: postData});
-        if (response.ok) {
-          const data = await response.json();
-          window.location.href = data.redirect;
-        }
-      },
-    }).modal('show');
+          const response = await POST(btn.getAttribute('data-url'), {data: postData});
+          if (response.ok) {
+            const data = await response.json();
+            window.location.href = data.redirect;
+          }
+        },
+      }).modal('show');
+    });
   }
-
-  // Helpers.
-  $('.delete-button').on('click', showDeletePopup);
 }
 
 function initGlobalShowModal() {
@@ -382,7 +395,7 @@ function initGlobalShowModal() {
       } else if ($attrTarget[0].matches('input, textarea')) {
         $attrTarget.val(attrib.value); // FIXME: add more supports like checkbox
       } else {
-        $attrTarget.text(attrib.value); // FIXME: it should be more strict here, only handle div/span/p
+        $attrTarget[0].textContent = attrib.value; // FIXME: it should be more strict here, only handle div/span/p
       }
     }
 
diff --git a/web_src/js/features/common-issue-list.js b/web_src/js/features/common-issue-list.js
index 219a8a9c9a09b..707776487bf05 100644
--- a/web_src/js/features/common-issue-list.js
+++ b/web_src/js/features/common-issue-list.js
@@ -29,7 +29,7 @@ export function parseIssueListQuickGotoLink(repoLink, searchText) {
 }
 
 export function initCommonIssueListQuickGoto() {
-  const goto = document.getElementById('issue-list-quick-goto');
+  const goto = document.querySelector('#issue-list-quick-goto');
   if (!goto) return;
 
   const form = goto.closest('form');
diff --git a/web_src/js/features/comp/SearchUserBox.js b/web_src/js/features/comp/SearchUserBox.js
index 081c47425f8b8..7ef23fe4b02c8 100644
--- a/web_src/js/features/comp/SearchUserBox.js
+++ b/web_src/js/features/comp/SearchUserBox.js
@@ -5,7 +5,7 @@ const {appSubUrl} = window.config;
 const looksLikeEmailAddressCheck = /^\S+@\S+$/;
 
 export function initCompSearchUserBox() {
-  const searchUserBox = document.getElementById('search-user-box');
+  const searchUserBox = document.querySelector('#search-user-box');
   if (!searchUserBox) return;
 
   const $searchUserBox = $(searchUserBox);
diff --git a/web_src/js/features/comp/WebHookEditor.js b/web_src/js/features/comp/WebHookEditor.js
index d74b59fd2aa64..38ff75e5a35a2 100644
--- a/web_src/js/features/comp/WebHookEditor.js
+++ b/web_src/js/features/comp/WebHookEditor.js
@@ -23,18 +23,18 @@ export function initCompWebHookEditor() {
   }
 
   // some webhooks (like Gitea) allow to set the request method (GET/POST), and it would toggle the "Content Type" field
-  const httpMethodInput = document.getElementById('http_method');
+  const httpMethodInput = document.querySelector('#http_method');
   if (httpMethodInput) {
     const updateContentType = function () {
       const visible = httpMethodInput.value === 'POST';
-      toggleElem(document.getElementById('content_type').closest('.field'), visible);
+      toggleElem(document.querySelector('#content_type').closest('.field'), visible);
     };
     updateContentType();
     httpMethodInput.addEventListener('change', updateContentType);
   }
 
   // Test delivery
-  document.getElementById('test-delivery')?.addEventListener('click', async function () {
+  document.querySelector('#test-delivery')?.addEventListener('click', async function () {
     this.classList.add('is-loading', 'disabled');
     await POST(this.getAttribute('data-link'));
     setTimeout(() => {
diff --git a/web_src/js/features/contributors.js b/web_src/js/features/contributors.js
index 79b3389feea3b..475c66e90060a 100644
--- a/web_src/js/features/contributors.js
+++ b/web_src/js/features/contributors.js
@@ -1,7 +1,7 @@
 import {createApp} from 'vue';
 
 export async function initRepoContributors() {
-  const el = document.getElementById('repo-contributors-chart');
+  const el = document.querySelector('#repo-contributors-chart');
   if (!el) return;
 
   const {default: RepoContributors} = await import(/* webpackChunkName: "contributors-graph" */'../components/RepoContributors.vue');
diff --git a/web_src/js/features/copycontent.js b/web_src/js/features/copycontent.js
index 03efe00701f46..ea1e5cf7d007c 100644
--- a/web_src/js/features/copycontent.js
+++ b/web_src/js/features/copycontent.js
@@ -6,7 +6,7 @@ import {GET} from '../modules/fetch.js';
 const {i18n} = window.config;
 
 export function initCopyContent() {
-  const btn = document.getElementById('copy-content');
+  const btn = document.querySelector('#copy-content');
   if (!btn || btn.classList.contains('disabled')) return;
 
   btn.addEventListener('click', async () => {
diff --git a/web_src/js/features/heatmap.js b/web_src/js/features/heatmap.js
index 719eeb75fb567..9155e844a20cd 100644
--- a/web_src/js/features/heatmap.js
+++ b/web_src/js/features/heatmap.js
@@ -3,7 +3,7 @@ import ActivityHeatmap from '../components/ActivityHeatmap.vue';
 import {translateMonth, translateDay} from '../utils.js';
 
 export function initHeatmap() {
-  const el = document.getElementById('user-heatmap');
+  const el = document.querySelector('#user-heatmap');
   if (!el) return;
 
   try {
diff --git a/web_src/js/features/imagediff.js b/web_src/js/features/imagediff.js
index d1b139ffdead5..2d28b4b526aff 100644
--- a/web_src/js/features/imagediff.js
+++ b/web_src/js/features/imagediff.js
@@ -79,20 +79,20 @@ export function initImageDiff() {
       path: this.getAttribute('data-path-after'),
       mime: this.getAttribute('data-mime-after'),
       $images: $container.find('img.image-after'), // matches 3 <img>
-      $boundsInfo: $container.find('.bounds-info-after'),
+      boundsInfo: this.querySelector('.bounds-info-after'),
     }, {
       path: this.getAttribute('data-path-before'),
       mime: this.getAttribute('data-mime-before'),
       $images: $container.find('img.image-before'), // matches 3 <img>
-      $boundsInfo: $container.find('.bounds-info-before'),
+      boundsInfo: this.querySelector('.bounds-info-before'),
     }];
 
     await Promise.all(imageInfos.map(async (info) => {
       const [success] = await Promise.all(Array.from(info.$images, (img) => {
         return loadElem(img, info.path);
       }));
-      // only the first images is associated with $boundsInfo
-      if (!success) info.$boundsInfo.text('(image error)');
+      // only the first images is associated with boundsInfo
+      if (!success && info.boundsInfo) info.boundsInfo.textContent = '(image error)';
       if (info.mime === 'image/svg+xml') {
         const resp = await GET(info.path);
         const text = await resp.text();
@@ -102,7 +102,7 @@ export function initImageDiff() {
             this.setAttribute('width', bounds.width);
             this.setAttribute('height', bounds.height);
           });
-          hideElem(info.$boundsInfo);
+          hideElem(info.boundsInfo);
         }
       }
     }));
diff --git a/web_src/js/features/install.js b/web_src/js/features/install.js
index 54ba3778f8538..6354db6cdc99f 100644
--- a/web_src/js/features/install.js
+++ b/web_src/js/features/install.js
@@ -22,12 +22,12 @@ function initPreInstall() {
     mssql: '127.0.0.1:1433',
   };
 
-  const dbHost = document.getElementById('db_host');
-  const dbUser = document.getElementById('db_user');
-  const dbName = document.getElementById('db_name');
+  const dbHost = document.querySelector('#db_host');
+  const dbUser = document.querySelector('#db_user');
+  const dbName = document.querySelector('#db_name');
 
   // Database type change detection.
-  document.getElementById('db_type').addEventListener('change', function () {
+  document.querySelector('#db_type').addEventListener('change', function () {
     const dbType = this.value;
     hideElem('div[data-db-setting-for]');
     showElem(`div[data-db-setting-for=${dbType}]`);
@@ -46,14 +46,14 @@ function initPreInstall() {
       }
     } // else: for SQLite3, the default path is always prepared by backend code (setting)
   });
-  document.getElementById('db_type').dispatchEvent(new Event('change'));
+  document.querySelector('#db_type').dispatchEvent(new Event('change'));
 
-  const appUrl = document.getElementById('app_url');
+  const appUrl = document.querySelector('#app_url');
   if (appUrl.value.includes('://localhost')) {
     appUrl.value = window.location.href;
   }
 
-  const domain = document.getElementById('domain');
+  const domain = document.querySelector('#domain');
   if (domain.value.trim() === 'localhost') {
     domain.value = window.location.hostname;
   }
@@ -103,7 +103,7 @@ function initPreInstall() {
 }
 
 function initPostInstall() {
-  const el = document.getElementById('goto-user-login');
+  const el = document.querySelector('#goto-user-login');
   if (!el) return;
 
   const targetUrl = el.getAttribute('href');
diff --git a/web_src/js/features/notification.js b/web_src/js/features/notification.js
index 8e5a1f83db803..c22fc1730678e 100644
--- a/web_src/js/features/notification.js
+++ b/web_src/js/features/notification.js
@@ -7,13 +7,13 @@ const {appSubUrl, notificationSettings, assetVersionEncoded} = window.config;
 let notificationSequenceNumber = 0;
 
 export function initNotificationsTable() {
-  const table = document.getElementById('notification_table');
+  const table = document.querySelector('#notification_table');
   if (!table) return;
 
   // when page restores from bfcache, delete previously clicked items
   window.addEventListener('pageshow', (e) => {
     if (e.persisted) { // page was restored from bfcache
-      const table = document.getElementById('notification_table');
+      const table = document.querySelector('#notification_table');
       const unreadCountEl = document.querySelector('.notifications-unread-count');
       let unreadCount = parseInt(unreadCountEl.textContent);
       for (const item of table.querySelectorAll('.notifications-item[data-remove="true"]')) {
@@ -47,17 +47,13 @@ async function receiveUpdateCount(event) {
 }
 
 export function initNotificationCount() {
-  const $notificationCount = $('.notification_count');
-
-  if (!$notificationCount.length) {
-    return;
-  }
+  if (!document.querySelector('.notification_count')) return;
 
   let usingPeriodicPoller = false;
   const startPeriodicPoller = (timeout, lastCount) => {
     if (timeout <= 0 || !Number.isFinite(timeout)) return;
     usingPeriodicPoller = true;
-    lastCount = lastCount ?? $notificationCount.text();
+    lastCount = lastCount ?? getCurrentCount();
     setTimeout(async () => {
       await updateNotificationCountWithCallback(startPeriodicPoller, timeout, lastCount);
     }, timeout);
@@ -121,8 +117,12 @@ export function initNotificationCount() {
   startPeriodicPoller(notificationSettings.MinTimeout);
 }
 
+function getCurrentCount() {
+  return document.querySelector('.notification_count').textContent;
+}
+
 async function updateNotificationCountWithCallback(callback, timeout, lastCount) {
-  const currentCount = $('.notification_count').text();
+  const currentCount = getCurrentCount();
   if (lastCount !== currentCount) {
     callback(notificationSettings.MinTimeout, currentCount);
     return;
@@ -145,7 +145,7 @@ async function updateNotificationCountWithCallback(callback, timeout, lastCount)
 }
 
 async function updateNotificationTable() {
-  const notificationDiv = document.getElementById('notification_div');
+  const notificationDiv = document.querySelector('#notification_div');
   if (notificationDiv) {
     try {
       const params = new URLSearchParams(window.location.search);
@@ -181,7 +181,7 @@ async function updateNotificationCount() {
 
     toggleElem('.notification_count', data.new !== 0);
 
-    for (const el of document.getElementsByClassName('notification_count')) {
+    for (const el of document.querySelectorAll('.notification_count')) {
       el.textContent = `${data.new}`;
     }
 
diff --git a/web_src/js/features/pull-view-file.js b/web_src/js/features/pull-view-file.js
index 2472e5a0bd6c5..84c5eddb45c92 100644
--- a/web_src/js/features/pull-view-file.js
+++ b/web_src/js/features/pull-view-file.js
@@ -12,9 +12,9 @@ const collapseFilesBtnSelector = '#collapse-files-btn';
 // Refreshes the summary of viewed files if present
 // The data used will be window.config.pageData.prReview.numberOf{Viewed}Files
 function refreshViewedFilesSummary() {
-  const viewedFilesProgress = document.getElementById('viewed-files-summary');
+  const viewedFilesProgress = document.querySelector('#viewed-files-summary');
   viewedFilesProgress?.setAttribute('value', prReview.numberOfViewedFiles);
-  const summaryLabel = document.getElementById('viewed-files-summary-label');
+  const summaryLabel = document.querySelector('#viewed-files-summary-label');
   if (summaryLabel) summaryLabel.innerHTML = summaryLabel.getAttribute('data-text-changed-template')
     .replace('%[1]d', prReview.numberOfViewedFiles)
     .replace('%[2]d', prReview.numberOfFiles);
diff --git a/web_src/js/features/recent-commits.js b/web_src/js/features/recent-commits.js
index 030c251a050eb..b7f7c4998736d 100644
--- a/web_src/js/features/recent-commits.js
+++ b/web_src/js/features/recent-commits.js
@@ -1,7 +1,7 @@
 import {createApp} from 'vue';
 
 export async function initRepoRecentCommits() {
-  const el = document.getElementById('repo-recent-commits-chart');
+  const el = document.querySelector('#repo-recent-commits-chart');
   if (!el) return;
 
   const {default: RepoRecentCommits} = await import(/* webpackChunkName: "recent-commits-graph" */'../components/RepoRecentCommits.vue');
diff --git a/web_src/js/features/repo-diff-commitselect.js b/web_src/js/features/repo-diff-commitselect.js
index ebac64e855c26..2d0d63946c810 100644
--- a/web_src/js/features/repo-diff-commitselect.js
+++ b/web_src/js/features/repo-diff-commitselect.js
@@ -2,7 +2,7 @@ import {createApp} from 'vue';
 import DiffCommitSelector from '../components/DiffCommitSelector.vue';
 
 export function initDiffCommitSelect() {
-  const el = document.getElementById('diff-commit-select');
+  const el = document.querySelector('#diff-commit-select');
   if (!el) return;
 
   const commitSelect = createApp(DiffCommitSelector);
diff --git a/web_src/js/features/repo-diff-filetree.js b/web_src/js/features/repo-diff-filetree.js
index 5dd2c42e74e29..6d9533d0669f0 100644
--- a/web_src/js/features/repo-diff-filetree.js
+++ b/web_src/js/features/repo-diff-filetree.js
@@ -3,13 +3,13 @@ import DiffFileTree from '../components/DiffFileTree.vue';
 import DiffFileList from '../components/DiffFileList.vue';
 
 export function initDiffFileTree() {
-  const el = document.getElementById('diff-file-tree');
+  const el = document.querySelector('#diff-file-tree');
   if (!el) return;
 
   const fileTreeView = createApp(DiffFileTree);
   fileTreeView.mount(el);
 
-  const fileListElement = document.getElementById('diff-file-list');
+  const fileListElement = document.querySelector('#diff-file-list');
   if (!fileListElement) return;
 
   const fileListView = createApp(DiffFileList);
diff --git a/web_src/js/features/repo-diff.js b/web_src/js/features/repo-diff.js
index 00f74515df6a8..cd01232a7e533 100644
--- a/web_src/js/features/repo-diff.js
+++ b/web_src/js/features/repo-diff.js
@@ -13,7 +13,7 @@ import {POST, GET} from '../modules/fetch.js';
 const {pageData, i18n} = window.config;
 
 function initRepoDiffReviewButton() {
-  const reviewBox = document.getElementById('review-box');
+  const reviewBox = document.querySelector('#review-box');
   if (!reviewBox) return;
 
   const counter = reviewBox.querySelector('.review-comments-counter');
diff --git a/web_src/js/features/repo-editor.js b/web_src/js/features/repo-editor.js
index a5232cb4b659d..aa9ca657b0986 100644
--- a/web_src/js/features/repo-editor.js
+++ b/web_src/js/features/repo-editor.js
@@ -1,7 +1,7 @@
 import $ from 'jquery';
 import {htmlEscape} from 'escape-goat';
 import {createCodeEditor} from './codeeditor.js';
-import {hideElem, showElem} from '../utils/dom.js';
+import {hideElem, queryElems, showElem} from '../utils/dom.js';
 import {initMarkupContent} from '../markup/content.js';
 import {attachRefIssueContextPopup} from './contextpopup.js';
 import {POST} from '../modules/fetch.js';
@@ -40,102 +40,79 @@ function initEditPreviewTab($form) {
   }
 }
 
-function initEditorForm() {
-  const $form = $('.repository .edit.form');
-  if (!$form) return;
-  initEditPreviewTab($form);
-}
-
-function getCursorPosition($e) {
-  const el = $e.get(0);
-  let pos = 0;
-  if ('selectionStart' in el) {
-    pos = el.selectionStart;
-  } else if ('selection' in document) {
-    el.focus();
-    const Sel = document.selection.createRange();
-    const SelLength = document.selection.createRange().text.length;
-    Sel.moveStart('character', -el.value.length);
-    pos = Sel.text.length - SelLength;
-  }
-  return pos;
-}
-
 export function initRepoEditor() {
-  initEditorForm();
-
-  $('.js-quick-pull-choice-option').on('change', function () {
-    if ($(this).val() === 'commit-to-new-branch') {
-      showElem('.quick-pull-branch-name');
-      document.querySelector('.quick-pull-branch-name input').required = true;
-    } else {
-      hideElem('.quick-pull-branch-name');
-      document.querySelector('.quick-pull-branch-name input').required = false;
-    }
-    $('#commit-button').text(this.getAttribute('button_text'));
-  });
+  const $editArea = $('.repository.editor textarea#edit_area');
+  if (!$editArea.length) return;
 
-  const joinTreePath = ($fileNameEl) => {
-    const parts = [];
-    $('.breadcrumb span.section').each(function () {
-      const $element = $(this);
-      if ($element.find('a').length) {
-        parts.push($element.find('a').text());
+  for (const el of queryElems('.js-quick-pull-choice-option')) {
+    el.addEventListener('input', () => {
+      if (el.value === 'commit-to-new-branch') {
+        showElem('.quick-pull-branch-name');
+        document.querySelector('.quick-pull-branch-name input').required = true;
       } else {
-        parts.push($element.text());
+        hideElem('.quick-pull-branch-name');
+        document.querySelector('.quick-pull-branch-name input').required = false;
       }
+      document.querySelector('#commit-button').textContent = el.getAttribute('data-button-text');
     });
-    if ($fileNameEl.val()) parts.push($fileNameEl.val());
-    $('#tree_path').val(parts.join('/'));
-  };
-
-  const $editFilename = $('#file-name');
-  $editFilename.on('input', function () {
-    const parts = $(this).val().split('/');
+  }
 
+  const filenameInput = document.querySelector('#file-name');
+  function joinTreePath() {
+    const parts = [];
+    for (const el of document.querySelectorAll('.breadcrumb span.section')) {
+      const link = el.querySelector('a');
+      parts.push(link ? link.textContent : el.textContent);
+    }
+    if (filenameInput.value) {
+      parts.push(filenameInput.value);
+    }
+    document.querySelector('#tree_path').value = parts.join('/');
+  }
+  filenameInput.addEventListener('input', function () {
+    const parts = filenameInput.value.split('/');
     if (parts.length > 1) {
       for (let i = 0; i < parts.length; ++i) {
         const value = parts[i];
         if (i < parts.length - 1) {
           if (value.length) {
-            $(`<span class="section"><a href="#">${htmlEscape(value)}</a></span>`).insertBefore($(this));
-            $('<div class="breadcrumb-divider">/</div>').insertBefore($(this));
+            $(`<span class="section"><a href="#">${htmlEscape(value)}</a></span>`).insertBefore($(filenameInput));
+            $('<div class="breadcrumb-divider">/</div>').insertBefore($(filenameInput));
           }
         } else {
-          $(this).val(value);
+          filenameInput.value = value;
         }
         this.setSelectionRange(0, 0);
       }
     }
-
-    joinTreePath($(this));
+    joinTreePath();
   });
-
-  $editFilename.on('keydown', function (e) {
-    const $section = $('.breadcrumb span.section');
-
+  filenameInput.addEventListener('keydown', function (e) {
+    const sections = queryElems('.breadcrumb span.section');
+    const dividers = queryElems('.breadcrumb .breadcrumb-divider');
     // Jump back to last directory once the filename is empty
-    if (e.code === 'Backspace' && getCursorPosition($(this)) === 0 && $section.length > 0) {
+    if (e.code === 'Backspace' && filenameInput.selectionStart === 0 && sections.length > 0) {
       e.preventDefault();
-      const $divider = $('.breadcrumb .breadcrumb-divider');
-      const value = $section.last().find('a').text();
-      $(this).val(value + $(this).val());
+      const lastSection = sections[sections.length - 1];
+      const lastDivider = dividers.length ? dividers[dividers.length - 1] : null;
+      const value = lastSection.querySelector('a').textContent;
+      filenameInput.value = value + filenameInput.value;
       this.setSelectionRange(value.length, value.length);
-      $section.last().remove();
-      $divider.last().remove();
-      joinTreePath($(this));
+      lastDivider?.remove();
+      lastSection.remove();
+      joinTreePath();
     }
   });
 
-  const $editArea = $('.repository.editor textarea#edit_area');
-  if (!$editArea.length) return;
+  const $form = $('.repository.editor .edit.form');
+  initEditPreviewTab($form);
 
   (async () => {
-    const editor = await createCodeEditor($editArea[0], $editFilename[0]);
+    const editor = await createCodeEditor($editArea[0], filenameInput);
 
     // Using events from https://github.com/codedance/jquery.AreYouSure#advanced-usage
     // to enable or disable the commit button
-    const commitButton = document.getElementById('commit-button');
+    const commitButton = document.querySelector('#commit-button');
     const $editForm = $('.ui.edit.form');
     const dirtyFileClass = 'dirty-file';
 
diff --git a/web_src/js/features/repo-findfile.js b/web_src/js/features/repo-findfile.js
index cff5068a1e200..945eeeceffe71 100644
--- a/web_src/js/features/repo-findfile.js
+++ b/web_src/js/features/repo-findfile.js
@@ -106,11 +106,11 @@ async function loadRepoFiles() {
 }
 
 export function initFindFileInRepo() {
-  repoFindFileInput = document.getElementById('repo-file-find-input');
+  repoFindFileInput = document.querySelector('#repo-file-find-input');
   if (!repoFindFileInput) return;
 
   repoFindFileTableBody = document.querySelector('#repo-find-file-table tbody');
-  repoFindFileNoResult = document.getElementById('repo-find-file-no-result');
+  repoFindFileNoResult = document.querySelector('#repo-find-file-no-result');
   repoFindFileInput.addEventListener('input', () => filterRepoFiles(repoFindFileInput.value));
 
   loadRepoFiles();
diff --git a/web_src/js/features/repo-graph.js b/web_src/js/features/repo-graph.js
index 0086b92021bd8..7084e409778ff 100644
--- a/web_src/js/features/repo-graph.js
+++ b/web_src/js/features/repo-graph.js
@@ -3,12 +3,12 @@ import {hideElem, showElem} from '../utils/dom.js';
 import {GET} from '../modules/fetch.js';
 
 export function initRepoGraphGit() {
-  const graphContainer = document.getElementById('git-graph-container');
+  const graphContainer = document.querySelector('#git-graph-container');
   if (!graphContainer) return;
 
-  document.getElementById('flow-color-monochrome')?.addEventListener('click', () => {
-    document.getElementById('flow-color-monochrome').classList.add('active');
-    document.getElementById('flow-color-colored')?.classList.remove('active');
+  document.querySelector('#flow-color-monochrome')?.addEventListener('click', () => {
+    document.querySelector('#flow-color-monochrome').classList.add('active');
+    document.querySelector('#flow-color-colored')?.classList.remove('active');
     graphContainer.classList.remove('colored');
     graphContainer.classList.add('monochrome');
     const params = new URLSearchParams(window.location.search);
@@ -30,9 +30,9 @@ export function initRepoGraphGit() {
     }
   });
 
-  document.getElementById('flow-color-colored')?.addEventListener('click', () => {
-    document.getElementById('flow-color-colored').classList.add('active');
-    document.getElementById('flow-color-monochrome')?.classList.remove('active');
+  document.querySelector('#flow-color-colored')?.addEventListener('click', () => {
+    document.querySelector('#flow-color-colored').classList.add('active');
+    document.querySelector('#flow-color-monochrome')?.classList.remove('active');
     graphContainer.classList.add('colored');
     graphContainer.classList.remove('monochrome');
     for (const link of document.querySelectorAll('.pagination a')) {
@@ -60,7 +60,7 @@ export function initRepoGraphGit() {
     const ajaxUrl = new URL(url);
     ajaxUrl.searchParams.set('div-only', 'true');
     window.history.replaceState({}, '', queryString ? `?${queryString}` : window.location.pathname);
-    document.getElementById('pagination').innerHTML = '';
+    document.querySelector('#pagination').innerHTML = '';
     hideElem('#rel-container');
     hideElem('#rev-container');
     showElem('#loading-indicator');
@@ -69,9 +69,9 @@ export function initRepoGraphGit() {
       const html = await response.text();
       const div = document.createElement('div');
       div.innerHTML = html;
-      document.getElementById('pagination').innerHTML = div.getElementById('pagination').innerHTML;
-      document.getElementById('rel-container').innerHTML = div.getElementById('rel-container').innerHTML;
-      document.getElementById('rev-container').innerHTML = div.getElementById('rev-container').innerHTML;
+      document.querySelector('#pagination').innerHTML = div.querySelector('#pagination').innerHTML;
+      document.querySelector('#rel-container').innerHTML = div.querySelector('#rel-container').innerHTML;
+      document.querySelector('#rev-container').innerHTML = div.querySelector('#rev-container').innerHTML;
       hideElem('#loading-indicator');
       showElem('#rel-container');
       showElem('#rev-container');
@@ -82,7 +82,7 @@ export function initRepoGraphGit() {
     dropdownSelected.splice(0, 0, '...flow-hide-pr-refs');
   }
 
-  const flowSelectRefsDropdown = document.getElementById('flow-select-refs-dropdown');
+  const flowSelectRefsDropdown = document.querySelector('#flow-select-refs-dropdown');
   $(flowSelectRefsDropdown).dropdown('set selected', dropdownSelected);
   $(flowSelectRefsDropdown).dropdown({
     clearable: true,
@@ -115,7 +115,7 @@ export function initRepoGraphGit() {
     if (e.target.matches('#rev-list li')) {
       const flow = e.target.getAttribute('data-flow');
       if (flow === '0') return;
-      document.getElementById(`flow-${flow}`)?.classList.add('highlight');
+      document.querySelector(`#flow-${flow}`)?.classList.add('highlight');
       e.target.classList.add('hover');
       for (const item of document.querySelectorAll(`#rev-list li[data-flow='${flow}']`)) {
         item.classList.add('highlight');
@@ -136,7 +136,7 @@ export function initRepoGraphGit() {
     if (e.target.matches('#rev-list li')) {
       const flow = e.target.getAttribute('data-flow');
       if (flow === '0') return;
-      document.getElementById(`flow-${flow}`)?.classList.remove('highlight');
+      document.querySelector(`#flow-${flow}`)?.classList.remove('highlight');
       e.target.classList.remove('hover');
       for (const item of document.querySelectorAll(`#rev-list li[data-flow='${flow}']`)) {
         item.classList.remove('highlight');
diff --git a/web_src/js/features/repo-home.js b/web_src/js/features/repo-home.js
index 6a5bce8268054..f48c1b1bb303e 100644
--- a/web_src/js/features/repo-home.js
+++ b/web_src/js/features/repo-home.js
@@ -7,11 +7,11 @@ import {showErrorToast} from '../modules/toast.js';
 const {appSubUrl} = window.config;
 
 export function initRepoTopicBar() {
-  const mgrBtn = document.getElementById('manage_topic');
+  const mgrBtn = document.querySelector('#manage_topic');
   if (!mgrBtn) return;
 
-  const editDiv = document.getElementById('topic_edit');
-  const viewDiv = document.getElementById('repo-topics');
+  const editDiv = document.querySelector('#topic_edit');
+  const viewDiv = document.querySelector('#repo-topics');
   const topicDropdown = editDiv.querySelector('.ui.dropdown');
   let lastErrorToast;
 
@@ -28,7 +28,7 @@ export function initRepoTopicBar() {
     mgrBtn.focus();
   });
 
-  document.getElementById('save_topic').addEventListener('click', async (e) => {
+  document.querySelector('#save_topic').addEventListener('click', async (e) => {
     lastErrorToast?.hideToast();
     const topics = editDiv.querySelector('input[name=topics]').value;
 
diff --git a/web_src/js/features/repo-issue-edit.js b/web_src/js/features/repo-issue-edit.js
index 9a8d737e0158c..8d43b6620c21f 100644
--- a/web_src/js/features/repo-issue-edit.js
+++ b/web_src/js/features/repo-issue-edit.js
@@ -55,7 +55,7 @@ async function onEditContent(event) {
           dropzone.querySelector('.files').append(input);
         });
         this.on('removedfile', async (file) => {
-          document.getElementById(file.uuid)?.remove();
+          document.querySelector(`#${file.uuid}`)?.remove();
           if (disableRemovedfileEvent) return;
           if (dropzone.getAttribute('data-remove-url') && !fileUuidDict[file.uuid].submitted) {
             try {
@@ -137,7 +137,7 @@ async function onEditContent(event) {
       }
       editContentZone.setAttribute('data-content-version', data.contentVersion);
       if (!data.content) {
-        renderContent.innerHTML = document.getElementById('no-content').innerHTML;
+        renderContent.innerHTML = document.querySelector('#no-content').innerHTML;
         rawContent.textContent = '';
       } else {
         renderContent.innerHTML = data.content;
@@ -166,7 +166,7 @@ async function onEditContent(event) {
 
   comboMarkdownEditor = getComboMarkdownEditor(editContentZone.querySelector('.combo-markdown-editor'));
   if (!comboMarkdownEditor) {
-    editContentZone.innerHTML = document.getElementById('issue-comment-editor-template').innerHTML;
+    editContentZone.innerHTML = document.querySelector('#issue-comment-editor-template').innerHTML;
     comboMarkdownEditor = await initComboMarkdownEditor(editContentZone.querySelector('.combo-markdown-editor'));
     comboMarkdownEditor.attachedDropzoneInst = await setupDropzone(editContentZone.querySelector('.dropzone'));
     editContentZone.querySelector('.ui.cancel.button').addEventListener('click', cancelAndReset);
@@ -189,11 +189,12 @@ export function initRepoIssueCommentEdit() {
   // Quote reply
   $(document).on('click', '.quote-reply', async function (event) {
     event.preventDefault();
-    const target = $(this).data('target');
-    const quote = $(`#${target}`).text().replace(/\n/g, '\n> ');
+    const target = this.getAttribute('data-target');
+    const quote = document.querySelector(`#${target}`).textContent.replace(/\n/g, '\n> ');
     const content = `> ${quote}\n\n`;
+
     let editor;
-    if ($(this).hasClass('quote-reply-diff')) {
+    if (this.classList.contains('quote-reply-diff')) {
       const $replyBtn = $(this).closest('.comment-code-cloud').find('button.comment-form-reply');
       editor = await handleReply($replyBtn);
     } else {
diff --git a/web_src/js/features/repo-issue-list.js b/web_src/js/features/repo-issue-list.js
index 5d18a7ff8d330..c8ae91d4538b4 100644
--- a/web_src/js/features/repo-issue-list.js
+++ b/web_src/js/features/repo-issue-list.js
@@ -158,7 +158,7 @@ function initRepoIssueListAuthorDropdown() {
 }
 
 function initPinRemoveButton() {
-  for (const button of document.getElementsByClassName('issue-card-unpin')) {
+  for (const button of document.querySelectorAll('.issue-card-unpin')) {
     button.addEventListener('click', async (event) => {
       const el = event.currentTarget;
       const id = Number(el.getAttribute('data-issue-id'));
@@ -182,7 +182,7 @@ async function pinMoveEnd(e) {
 }
 
 async function initIssuePinSort() {
-  const pinDiv = document.getElementById('issue-pins');
+  const pinDiv = document.querySelector('#issue-pins');
 
   if (pinDiv === null) return;
 
diff --git a/web_src/js/features/repo-issue-pr-form.js b/web_src/js/features/repo-issue-pr-form.js
index 7b26e643c04af..94a28573409b1 100644
--- a/web_src/js/features/repo-issue-pr-form.js
+++ b/web_src/js/features/repo-issue-pr-form.js
@@ -2,7 +2,7 @@ import {createApp} from 'vue';
 import PullRequestMergeForm from '../components/PullRequestMergeForm.vue';
 
 export function initRepoPullRequestMergeForm() {
-  const el = document.getElementById('pull-request-merge-form');
+  const el = document.querySelector('#pull-request-merge-form');
   if (!el) return;
 
   const view = createApp(PullRequestMergeForm);
diff --git a/web_src/js/features/repo-issue.js b/web_src/js/features/repo-issue.js
index 95910e34bc9af..d53c3346f33cf 100644
--- a/web_src/js/features/repo-issue.js
+++ b/web_src/js/features/repo-issue.js
@@ -44,14 +44,14 @@ export function initRepoIssueTimeTracking() {
 
 async function updateDeadline(deadlineString) {
   hideElem('#deadline-err-invalid-date');
-  document.getElementById('deadline-loader')?.classList.add('is-loading');
+  document.querySelector('#deadline-loader')?.classList.add('is-loading');
 
   let realDeadline = null;
   if (deadlineString !== '') {
     const newDate = Date.parse(deadlineString);
 
     if (Number.isNaN(newDate)) {
-      document.getElementById('deadline-loader')?.classList.remove('is-loading');
+      document.querySelector('#deadline-loader')?.classList.remove('is-loading');
       showElem('#deadline-err-invalid-date');
       return false;
     }
@@ -59,7 +59,7 @@ async function updateDeadline(deadlineString) {
   }
 
   try {
-    const response = await POST(document.getElementById('update-issue-deadline-form').getAttribute('action'), {
+    const response = await POST(document.querySelector('#update-issue-deadline-form').getAttribute('action'), {
       data: {due_date: realDeadline},
     });
 
@@ -70,7 +70,7 @@ async function updateDeadline(deadlineString) {
     }
   } catch (error) {
     console.error(error);
-    document.getElementById('deadline-loader').classList.remove('is-loading');
+    document.querySelector('#deadline-loader').classList.remove('is-loading');
     showElem('#deadline-err-invalid-date');
   }
 }
@@ -182,7 +182,7 @@ export function initRepoIssueCommentDelete() {
           counter.textContent = String(num);
         }
 
-        document.getElementById(deleteButton.getAttribute('data-comment-id'))?.remove();
+        document.querySelector(`#${deleteButton.getAttribute('data-comment-id')}`)?.remove();
 
         if (conversationHolder && !conversationHolder.querySelector('.comment')) {
           const path = conversationHolder.getAttribute('data-path');
@@ -278,11 +278,12 @@ export function initRepoPullRequestUpdate() {
 
   $('.update-button > .dropdown').dropdown({
     onChange(_text, _value, $choice) {
-      const url = $choice[0].getAttribute('data-do');
+      const choiceEl = $choice[0];
+      const url = choiceEl.getAttribute('data-do');
       if (url) {
         const buttonText = pullUpdateButton.querySelector('.button-text');
         if (buttonText) {
-          buttonText.textContent = $choice.text();
+          buttonText.textContent = choiceEl.textContent;
         }
         pullUpdateButton.setAttribute('data-do', url);
       }
@@ -297,7 +298,7 @@ export function initRepoPullRequestMergeInstruction() {
 }
 
 export function initRepoPullRequestAllowMaintainerEdit() {
-  const wrapper = document.getElementById('allow-edits-from-maintainers');
+  const wrapper = document.querySelector('#allow-edits-from-maintainers');
   if (!wrapper) return;
   const checkbox = wrapper.querySelector('input[type="checkbox"]');
   checkbox.addEventListener('input', async () => {
@@ -567,14 +568,15 @@ export function initRepoPullRequestReview() {
 export function initRepoIssueReferenceIssue() {
   // Reference issue
   $(document).on('click', '.reference-issue', function (event) {
-    const $this = $(this);
-    const content = $(`#${$this.data('target')}`).text();
-    const poster = $this.data('poster-username');
-    const reference = toAbsoluteUrl($this.data('reference'));
-    const $modal = $($this.data('modal'));
-    $modal.find('textarea[name="content"]').val(`${content}\n\n_Originally posted by @${poster} in ${reference}_`);
-    $modal.modal('show');
-
+    const target = this.getAttribute('data-target');
+    const content = document.querySelector(`#${target}`)?.textContent ?? '';
+    const poster = this.getAttribute('data-poster-username');
+    const reference = toAbsoluteUrl(this.getAttribute('data-reference'));
+    const modalSelector = this.getAttribute('data-modal');
+    const modal = document.querySelector(modalSelector);
+    const textarea = modal.querySelector('textarea[name="content"]');
+    textarea.value = `${content}\n\n_Originally posted by @${poster} in ${reference}_`;
+    $(modal).modal('show');
     event.preventDefault();
   });
 }
@@ -676,7 +678,7 @@ export function initSingleCommentEditor($commentForm) {
   // * normal new issue/pr page, no status-button
   // * issue/pr view page, with comment form, has status-button
   const opts = {};
-  const statusButton = document.getElementById('status-button');
+  const statusButton = document.querySelector('#status-button');
   if (statusButton) {
     opts.onContentChanged = (editor) => {
       const statusText = statusButton.getAttribute(editor.value().trim() ? 'data-status-and-comment' : 'data-status');
diff --git a/web_src/js/features/repo-legacy.js b/web_src/js/features/repo-legacy.js
index 2323d818c2e33..e53d86cca07c7 100644
--- a/web_src/js/features/repo-legacy.js
+++ b/web_src/js/features/repo-legacy.js
@@ -272,9 +272,9 @@ export function initRepoCommentForm() {
       }
 
       $list.find('.selected').html(`
-        <a class="item muted sidebar-item-link" href=${$(this).data('href')}>
+        <a class="item muted sidebar-item-link" href=${htmlEscape(this.getAttribute('href'))}>
           ${icon}
-          ${htmlEscape($(this).text())}
+          ${htmlEscape(this.textContent)}
         </a>
       `);
 
diff --git a/web_src/js/features/repo-migrate.js b/web_src/js/features/repo-migrate.js
index 490e7df0e43ad..b8157e2dad9cc 100644
--- a/web_src/js/features/repo-migrate.js
+++ b/web_src/js/features/repo-migrate.js
@@ -4,10 +4,10 @@ import {GET, POST} from '../modules/fetch.js';
 const {appSubUrl} = window.config;
 
 export function initRepoMigrationStatusChecker() {
-  const repoMigrating = document.getElementById('repo_migrating');
+  const repoMigrating = document.querySelector('#repo_migrating');
   if (!repoMigrating) return;
 
-  document.getElementById('repo_migrating_retry').addEventListener('click', doMigrationRetry);
+  document.querySelector('#repo_migrating_retry').addEventListener('click', doMigrationRetry);
 
   const task = repoMigrating.getAttribute('data-migrating-task-id');
 
@@ -20,7 +20,7 @@ export function initRepoMigrationStatusChecker() {
 
     // for all status
     if (data.message) {
-      document.getElementById('repo_migrating_progress_message').textContent = data.message;
+      document.querySelector('#repo_migrating_progress_message').textContent = data.message;
     }
 
     // TaskStatusFinished
@@ -36,7 +36,7 @@ export function initRepoMigrationStatusChecker() {
       showElem('#repo_migrating_retry');
       showElem('#repo_migrating_failed');
       showElem('#repo_migrating_failed_image');
-      document.getElementById('repo_migrating_failed_error').textContent = data.message;
+      document.querySelector('#repo_migrating_failed_error').textContent = data.message;
       return false;
     }
 
diff --git a/web_src/js/features/repo-migration.js b/web_src/js/features/repo-migration.js
index 59e282e4e7fad..7f7aa237ee201 100644
--- a/web_src/js/features/repo-migration.js
+++ b/web_src/js/features/repo-migration.js
@@ -1,13 +1,13 @@
 import {hideElem, showElem, toggleElem} from '../utils/dom.js';
 
-const service = document.getElementById('service_type');
-const user = document.getElementById('auth_username');
-const pass = document.getElementById('auth_password');
-const token = document.getElementById('auth_token');
-const mirror = document.getElementById('mirror');
-const lfs = document.getElementById('lfs');
-const lfsSettings = document.getElementById('lfs_settings');
-const lfsEndpoint = document.getElementById('lfs_endpoint');
+const service = document.querySelector('#service_type');
+const user = document.querySelector('#auth_username');
+const pass = document.querySelector('#auth_password');
+const token = document.querySelector('#auth_token');
+const mirror = document.querySelector('#mirror');
+const lfs = document.querySelector('#lfs');
+const lfsSettings = document.querySelector('#lfs_settings');
+const lfsEndpoint = document.querySelector('#lfs_endpoint');
 const items = document.querySelectorAll('#migrate_items input[type=checkbox]');
 
 export function initRepoMigration() {
@@ -18,16 +18,16 @@ export function initRepoMigration() {
   pass?.addEventListener('input', () => {checkItems(false)});
   token?.addEventListener('input', () => {checkItems(true)});
   mirror?.addEventListener('change', () => {checkItems(true)});
-  document.getElementById('lfs_settings_show')?.addEventListener('click', (e) => {
+  document.querySelector('#lfs_settings_show')?.addEventListener('click', (e) => {
     e.preventDefault();
     e.stopPropagation();
     showElem(lfsEndpoint);
   });
   lfs?.addEventListener('change', setLFSSettingsVisibility);
 
-  const cloneAddr = document.getElementById('clone_addr');
+  const cloneAddr = document.querySelector('#clone_addr');
   cloneAddr?.addEventListener('change', () => {
-    const repoName = document.getElementById('repo_name');
+    const repoName = document.querySelector('#repo_name');
     if (cloneAddr.value && !repoName?.value) { // Only modify if repo_name input is blank
       repoName.value = cloneAddr.value.match(/^(.*\/)?((.+?)(\.git)?)$/)[3];
     }
diff --git a/web_src/js/features/repo-projects.js b/web_src/js/features/repo-projects.js
index a1cc4b346bb8b..706942363d4ae 100644
--- a/web_src/js/features/repo-projects.js
+++ b/web_src/js/features/repo-projects.js
@@ -5,8 +5,8 @@ import {POST, DELETE, PUT} from '../modules/fetch.js';
 
 function updateIssueCount(cards) {
   const parent = cards.parentElement;
-  const cnt = parent.getElementsByClassName('issue-card').length;
-  parent.getElementsByClassName('project-column-issue-count')[0].textContent = cnt;
+  const cnt = parent.querySelectorAll('.issue-card').length;
+  parent.querySelectorAll('.project-column-issue-count')[0].textContent = cnt;
 }
 
 async function createNewColumn(url, columnTitle, projectColorInput) {
@@ -26,7 +26,7 @@ async function createNewColumn(url, columnTitle, projectColorInput) {
 }
 
 async function moveIssue({item, from, to, oldIndex}) {
-  const columnCards = to.getElementsByClassName('issue-card');
+  const columnCards = to.querySelectorAll('.issue-card');
   updateIssueCount(from);
   updateIssueCount(to);
 
@@ -53,7 +53,7 @@ async function initRepoProjectSortable() {
 
   // the HTML layout is: #project-board > .board > .project-column .cards > .issue-card
   const mainBoard = els[0];
-  let boardColumns = mainBoard.getElementsByClassName('project-column');
+  let boardColumns = mainBoard.querySelectorAll('.project-column');
   createSortable(mainBoard, {
     group: 'project-column',
     draggable: '.project-column',
@@ -61,7 +61,7 @@ async function initRepoProjectSortable() {
     delayOnTouchOnly: true,
     delay: 500,
     onSort: async () => {
-      boardColumns = mainBoard.getElementsByClassName('project-column');
+      boardColumns = mainBoard.querySelectorAll('.project-column');
 
       const columnSorting = {
         columns: Array.from(boardColumns, (column, i) => ({
@@ -81,7 +81,7 @@ async function initRepoProjectSortable() {
   });
 
   for (const boardColumn of boardColumns) {
-    const boardCardList = boardColumn.getElementsByClassName('cards')[0];
+    const boardCardList = boardColumn.querySelectorAll('.cards')[0];
     createSortable(boardCardList, {
       group: 'shared',
       onAdd: moveIssue,
@@ -99,7 +99,7 @@ export function initRepoProject() {
 
   const _promise = initRepoProjectSortable();
 
-  for (const modal of document.getElementsByClassName('edit-project-column-modal')) {
+  for (const modal of document.querySelectorAll('.edit-project-column-modal')) {
     const projectHeader = modal.closest('.project-column-header');
     const projectTitleLabel = projectHeader?.querySelector('.project-column-title-label');
     const projectTitleInput = modal.querySelector('.project-column-title-input');
diff --git a/web_src/js/features/repo-release.js b/web_src/js/features/repo-release.js
index f3cfa7441815b..2be1ec58c612b 100644
--- a/web_src/js/features/repo-release.js
+++ b/web_src/js/features/repo-release.js
@@ -20,7 +20,7 @@ export function initRepoReleaseNew() {
 }
 
 function initTagNameEditor() {
-  const el = document.getElementById('tag-name-editor');
+  const el = document.querySelector('#tag-name-editor');
   if (!el) return;
 
   const existingTags = JSON.parse(el.getAttribute('data-existing-tags'));
@@ -30,10 +30,10 @@ function initTagNameEditor() {
   const newTagHelperText = el.getAttribute('data-tag-helper-new');
   const existingTagHelperText = el.getAttribute('data-tag-helper-existing');
 
-  const tagNameInput = document.getElementById('tag-name');
+  const tagNameInput = document.querySelector('#tag-name');
   const hideTargetInput = function(tagNameInput) {
     const value = tagNameInput.value;
-    const tagHelper = document.getElementById('tag-helper');
+    const tagHelper = document.querySelector('#tag-helper');
     if (existingTags.includes(value)) {
       // If the tag already exists, hide the target branch selector.
       hideElem('#tag-target-selector');
diff --git a/web_src/js/features/repo-settings.js b/web_src/js/features/repo-settings.js
index 52c5de2bfaea2..6590c2b56cc3d 100644
--- a/web_src/js/features/repo-settings.js
+++ b/web_src/js/features/repo-settings.js
@@ -1,51 +1,50 @@
 import $ from 'jquery';
 import {minimatch} from 'minimatch';
 import {createMonaco} from './codeeditor.js';
-import {onInputDebounce, toggleElem} from '../utils/dom.js';
+import {onInputDebounce, queryElems, toggleElem} from '../utils/dom.js';
 import {POST} from '../modules/fetch.js';
 
 const {appSubUrl, csrfToken} = window.config;
 
 export function initRepoSettingsCollaboration() {
   // Change collaborator access mode
-  $('.page-content.repository .ui.dropdown.access-mode').each((_, el) => {
-    const $dropdown = $(el);
-    const $text = $dropdown.find('> .text');
-    $dropdown.dropdown({
-      async action(_text, value) {
-        const lastValue = el.getAttribute('data-last-value');
+  for (const dropdownEl of queryElems('.page-content.repository .ui.dropdown.access-mode')) {
+    const textEl = dropdownEl.querySelector(':scope > .text');
+    $(dropdownEl).dropdown({
+      async action(text, value) {
+        dropdownEl.classList.add('is-loading', 'loading-icon-2px');
+        const lastValue = dropdownEl.getAttribute('data-last-value');
+        $(dropdownEl).dropdown('hide');
         try {
-          el.setAttribute('data-last-value', value);
-          $dropdown.dropdown('hide');
-          const data = new FormData();
-          data.append('uid', el.getAttribute('data-uid'));
-          data.append('mode', value);
-          await POST(el.getAttribute('data-url'), {data});
+          const uid = dropdownEl.getAttribute('data-uid');
+          await POST(dropdownEl.getAttribute('data-url'), {data: new URLSearchParams({uid, 'mode': value})});
+          textEl.textContent = text;
+          dropdownEl.setAttribute('data-last-value', value);
         } catch {
-          $text.text('(error)'); // prevent from misleading users when error occurs
-          el.setAttribute('data-last-value', lastValue);
+          textEl.textContent = '(error)'; // prevent from misleading users when error occurs
+          dropdownEl.setAttribute('data-last-value', lastValue);
+        } finally {
+          dropdownEl.classList.remove('is-loading');
         }
       },
-      onChange(_value, text, _$choice) {
-        $text.text(text); // update the text when using keyboard navigating
-      },
       onHide() {
-        // set to the really selected value, defer to next tick to make sure `action` has finished its work because the calling order might be onHide -> action
+        // set to the really selected value, defer to next tick to make sure `action` has finished
+        // its work because the calling order might be onHide -> action
         setTimeout(() => {
-          const $item = $dropdown.dropdown('get item', el.getAttribute('data-last-value'));
+          const $item = $(dropdownEl).dropdown('get item', dropdownEl.getAttribute('data-last-value'));
           if ($item) {
-            $dropdown.dropdown('set selected', el.getAttribute('data-last-value'));
+            $(dropdownEl).dropdown('set selected', dropdownEl.getAttribute('data-last-value'));
           } else {
-            $text.text('(none)'); // prevent from misleading users when the access mode is undefined
+            textEl.textContent = '(none)'; // prevent from misleading users when the access mode is undefined
           }
         }, 0);
       },
     });
-  });
+  }
 }
 
 export function initRepoSettingSearchTeamBox() {
-  const searchTeamBox = document.getElementById('search-team-box');
+  const searchTeamBox = document.querySelector('#search-team-box');
   if (!searchTeamBox) return;
 
   $(searchTeamBox).search({
@@ -79,29 +78,29 @@ export function initRepoSettingGitHook() {
 export function initRepoSettingBranches() {
   if (!document.querySelector('.repository.settings.branches')) return;
 
-  for (const el of document.getElementsByClassName('toggle-target-enabled')) {
+  for (const el of document.querySelectorAll('.toggle-target-enabled')) {
     el.addEventListener('change', function () {
       const target = document.querySelector(this.getAttribute('data-target'));
       target?.classList.toggle('disabled', !this.checked);
     });
   }
 
-  for (const el of document.getElementsByClassName('toggle-target-disabled')) {
+  for (const el of document.querySelectorAll('.toggle-target-disabled')) {
     el.addEventListener('change', function () {
       const target = document.querySelector(this.getAttribute('data-target'));
       if (this.checked) target?.classList.add('disabled'); // only disable, do not auto enable
     });
   }
 
-  document.getElementById('dismiss_stale_approvals')?.addEventListener('change', function () {
-    document.getElementById('ignore_stale_approvals_box')?.classList.toggle('disabled', this.checked);
+  document.querySelector('#dismiss_stale_approvals')?.addEventListener('change', function () {
+    document.querySelector('#ignore_stale_approvals_box')?.classList.toggle('disabled', this.checked);
   });
 
   // show the `Matched` mark for the status checks that match the pattern
   const markMatchedStatusChecks = () => {
-    const patterns = (document.getElementById('status_check_contexts').value || '').split(/[\r\n]+/);
+    const patterns = (document.querySelector('#status_check_contexts').value || '').split(/[\r\n]+/);
     const validPatterns = patterns.map((item) => item.trim()).filter(Boolean);
-    const marks = document.getElementsByClassName('status-check-matched-mark');
+    const marks = document.querySelectorAll('.status-check-matched-mark');
 
     for (const el of marks) {
       let matched = false;
@@ -116,5 +115,5 @@ export function initRepoSettingBranches() {
     }
   };
   markMatchedStatusChecks();
-  document.getElementById('status_check_contexts').addEventListener('input', onInputDebounce(markMatchedStatusChecks));
+  document.querySelector('#status_check_contexts').addEventListener('input', onInputDebounce(markMatchedStatusChecks));
 }
diff --git a/web_src/js/features/sshkey-helper.js b/web_src/js/features/sshkey-helper.js
index 3960eefe8e54f..5531c184516d8 100644
--- a/web_src/js/features/sshkey-helper.js
+++ b/web_src/js/features/sshkey-helper.js
@@ -1,8 +1,8 @@
 export function initSshKeyFormParser() {
   // Parse SSH Key
-  document.getElementById('ssh-key-content')?.addEventListener('input', function () {
+  document.querySelector('#ssh-key-content')?.addEventListener('input', function () {
     const arrays = this.value.split(' ');
-    const title = document.getElementById('ssh-key-title');
+    const title = document.querySelector('#ssh-key-title');
     if (!title.value && arrays.length === 3 && arrays[2] !== '') {
       title.value = arrays[2];
     }
diff --git a/web_src/js/features/user-auth-webauthn.js b/web_src/js/features/user-auth-webauthn.js
index 6dfbb4d76536d..ea26614ba7696 100644
--- a/web_src/js/features/user-auth-webauthn.js
+++ b/web_src/js/features/user-auth-webauthn.js
@@ -109,7 +109,7 @@ async function webauthnRegistered(newCredential) {
 }
 
 function webAuthnError(errorType, message) {
-  const elErrorMsg = document.getElementById(`webauthn-error-msg`);
+  const elErrorMsg = document.querySelector(`#webauthn-error-msg`);
 
   if (errorType === 'general') {
     elErrorMsg.textContent = message || 'unknown error';
@@ -140,7 +140,7 @@ function detectWebAuthnSupport() {
 }
 
 export function initUserAuthWebAuthnRegister() {
-  const elRegister = document.getElementById('register-webauthn');
+  const elRegister = document.querySelector('#register-webauthn');
   if (!elRegister) {
     return;
   }
@@ -155,7 +155,7 @@ export function initUserAuthWebAuthnRegister() {
 }
 
 async function webAuthnRegisterRequest() {
-  const elNickname = document.getElementById('nickname');
+  const elNickname = document.querySelector('#nickname');
 
   const formData = new FormData();
   formData.append('name', elNickname.value);
diff --git a/web_src/js/features/user-auth.js b/web_src/js/features/user-auth.js
index a871ac471c2ec..1ea131e75f24a 100644
--- a/web_src/js/features/user-auth.js
+++ b/web_src/js/features/user-auth.js
@@ -1,9 +1,9 @@
 import {checkAppUrl} from './common-global.js';
 
 export function initUserAuthOauth2() {
-  const outer = document.getElementById('oauth2-login-navigator');
+  const outer = document.querySelector('#oauth2-login-navigator');
   if (!outer) return;
-  const inner = document.getElementById('oauth2-login-navigator-inner');
+  const inner = document.querySelector('#oauth2-login-navigator-inner');
 
   checkAppUrl();
 
diff --git a/web_src/js/features/user-settings.js b/web_src/js/features/user-settings.js
index 2d8c53e457734..8cb1f0582fdb3 100644
--- a/web_src/js/features/user-settings.js
+++ b/web_src/js/features/user-settings.js
@@ -3,11 +3,11 @@ import {hideElem, showElem} from '../utils/dom.js';
 export function initUserSettings() {
   if (!document.querySelectorAll('.user.settings.profile').length) return;
 
-  const usernameInput = document.getElementById('username');
+  const usernameInput = document.querySelector('#username');
   if (!usernameInput) return;
   usernameInput.addEventListener('input', function () {
-    const prompt = document.getElementById('name-change-prompt');
-    const promptRedirect = document.getElementById('name-change-redirect-prompt');
+    const prompt = document.querySelector('#name-change-prompt');
+    const promptRedirect = document.querySelector('#name-change-redirect-prompt');
     if (this.value.toLowerCase() !== this.getAttribute('data-name').toLowerCase()) {
       showElem(prompt);
       showElem(promptRedirect);
diff --git a/web_src/js/index.js b/web_src/js/index.js
index 1867556eeed21..12cd0ee15a2ad 100644
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -43,7 +43,7 @@ import {
   initGlobalDropzone,
   initGlobalEnterQuickSubmit,
   initGlobalFormDirtyLeaveConfirm,
-  initGlobalLinkActions,
+  initGlobalDeleteButton,
   initHeadNavbarContentToggle,
 } from './features/common-global.js';
 import {initRepoTopicBar} from './features/repo-home.js';
@@ -103,7 +103,7 @@ onDomReady(() => {
   initGlobalDropzone();
   initGlobalEnterQuickSubmit();
   initGlobalFormDirtyLeaveConfirm();
-  initGlobalLinkActions();
+  initGlobalDeleteButton();
 
   initCommonOrganization();
   initCommonIssueListQuickGoto();
diff --git a/web_src/js/markup/anchors.js b/web_src/js/markup/anchors.js
index 0e2c92713a068..6f36d09683142 100644
--- a/web_src/js/markup/anchors.js
+++ b/web_src/js/markup/anchors.js
@@ -9,19 +9,16 @@ function scrollToAnchor(encodedId) {
   if (!encodedId) return;
   const id = decodeURIComponent(encodedId);
   const prefixedId = addPrefix(id);
-  let el = document.getElementById(prefixedId);
+  let el = document.querySelector(`#${prefixedId}`);
 
   // check for matching user-generated `a[name]`
   if (!el) {
-    const nameAnchors = document.getElementsByName(prefixedId);
-    if (nameAnchors.length) {
-      el = nameAnchors[0];
-    }
+    el = document.querySelector(`a[name="${CSS.escape(prefixedId)}"]`);
   }
 
   // compat for links with old 'user-content-' prefixed hashes
   if (!el && hasPrefix(id)) {
-    return document.getElementById(id)?.scrollIntoView();
+    return document.querySelector(`#${id}`)?.scrollIntoView();
   }
 
   el?.scrollIntoView();
diff --git a/web_src/js/standalone/devtest.js b/web_src/js/standalone/devtest.js
index d0ca511c0f36a..8dbba554acb80 100644
--- a/web_src/js/standalone/devtest.js
+++ b/web_src/js/standalone/devtest.js
@@ -1,11 +1,11 @@
 import {showInfoToast, showWarningToast, showErrorToast} from '../modules/toast.js';
 
-document.getElementById('info-toast').addEventListener('click', () => {
+document.querySelector('#info-toast').addEventListener('click', () => {
   showInfoToast('success 😀');
 });
-document.getElementById('warning-toast').addEventListener('click', () => {
+document.querySelector('#warning-toast').addEventListener('click', () => {
   showWarningToast('warning 😐');
 });
-document.getElementById('error-toast').addEventListener('click', () => {
+document.querySelector('#error-toast').addEventListener('click', () => {
   showErrorToast('error 🙁');
 });
diff --git a/web_src/js/standalone/swagger.js b/web_src/js/standalone/swagger.js
index 00854ef5d71ff..2928813167682 100644
--- a/web_src/js/standalone/swagger.js
+++ b/web_src/js/standalone/swagger.js
@@ -2,7 +2,7 @@ import SwaggerUI from 'swagger-ui-dist/swagger-ui-es-bundle.js';
 import 'swagger-ui-dist/swagger-ui.css';
 
 window.addEventListener('load', async () => {
-  const url = document.getElementById('swagger-ui').getAttribute('data-source');
+  const url = document.querySelector('#swagger-ui').getAttribute('data-source');
   const res = await fetch(url);
   const spec = await res.json();