refactor: replace Fomantic modal with native dialog (#39846)

Replace Fomantic's hard-forked jQuery modal with native `<dialog>`
elements, advancing https://github.com/go-gitea/gitea/issues/29849. The
UI is visually unchanged. Dialogs open with `show()` over an `inert`
page, so tooltips, popups and toasts mounted on `<body>` stay usable
above them, unlike with `showModal()`
(https://github.com/whatwg/html/issues/9936).

- Remove the Fomantic modal and dimmer, add `showModal` and `hideModal`
- Declare modals as `<dialog class="modal-dialog">`, shown inside a
`.modal-backdrop`, instead of `ui modal` with its unused size classes
- Remove two modals that could never be opened
- Block the page while a modal is open, close the topmost one on Escape
and restore focus to its opener
- Allow stacked modals, use a confirm modal instead of `window.confirm`
for deleting content history
- Hide popups and toasts when a modal opens or closes
- Keep the release notes modal open when generating notes fails

Fixes: https://github.com/go-gitea/gitea/issues/39643
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

templates/shared/user/access_tokens.tmpl

@@ -101,7 +101,7 @@
 	</div>
 </div>
 
-<div class="ui small modal" id="delete-token">
+<dialog class="modal-dialog" id="delete-token">
 	<div class="header">
 		{{svg "octicon-trash"}}
 		{{ctx.Locale.Tr "settings.access_token_deletion"}}
@@ -110,10 +110,10 @@
 		<p>{{ctx.Locale.Tr "settings.access_token_deletion_desc"}}</p>
 	</div>
 	{{template "base/modal_actions_confirm"}}
-</div>
+</dialog>
 
 {{if not .IsBot}}
-	<div class="ui small modal" id="regenerate-token">
+	<dialog class="modal-dialog" id="regenerate-token">
 		<div class="header">
 			{{ctx.Locale.Tr "settings.access_token_regeneration"}}
 		</div>
@@ -121,5 +121,5 @@
 			<p>{{ctx.Locale.Tr "settings.access_token_regeneration_desc"}}</p>
 		</div>
 		{{template "base/modal_actions_confirm"}}
-	</div>
+	</dialog>
 {{end}}

templates/shared/user/block_user_dialog.tmpl

@@ -1,4 +1,4 @@
-<div class="ui small modal" id="block-user-modal">
+<dialog class="modal-dialog" id="block-user-modal">
 	<div class="header">{{ctx.Locale.Tr "user.block.title"}}</div>
 	<div class="content">
 		<div class="ui warning message">{{ctx.Locale.Tr "user.block.info"}} <a target="_blank" href="https://docs.gitea.com/usage/access-control/blocking-user">{{ctx.Locale.Tr "user.block.info.docs"}}</a></div>
@@ -10,7 +10,7 @@
 			</div>
 			<div class="field">
 				<label for="block-note">{{ctx.Locale.Tr "user.block.note.title"}}</label>
-				<input id="block-note" name="note">
+				<input id="block-note" name="note" autofocus>
 				<p class="help">{{ctx.Locale.Tr "user.block.note.info"}}</p>
 			</div>
 			<div class="actions">
@@ -19,4 +19,4 @@
 			</div>
 		</form>
 	</div>
-</div>
+</dialog>

templates/shared/user/blocked_users.tmpl

@@ -52,7 +52,7 @@
 		{{end}}
 	</div>
 </div>
-<div class="ui small modal" id="block-user-note-modal">
+<dialog class="modal-dialog" id="block-user-note-modal">
 	<div class="header">{{ctx.Locale.Tr "user.block.note.edit"}}</div>
 	<div class="content">
 		<form class="ui form form-fetch-action" action="{{$.Link}}" method="post">
@@ -69,4 +69,4 @@
 			</div>
 		</form>
 	</div>
-</div>
+</dialog>