Fine tune more downdrop settings, use SVG for labels, improve Repo Topic Edit form (#23626)

Although it seems that some different purposes are mixed in this PR,
however, they are all related, and can be tested together, so I put them
together to save everyone's time.

Diff: `+79 −84`, everything becomes much better.

### Improve the dropdown settings.

Move all fomantic-init related code into our `fomantic.js`

Fine-tune some dropdown global settings, see the comments.

Also help to fix the first problem in #23625 , cc: @yp05327 

The "language" menu has been simplified, and it works with small-height
window better.

### Use SVG instead of `<i class="delete icon">`

It's also done by `$.fn.dropdown.settings.templates.label` , cc:
@silverwind

### Remove incorrect `tabable` CSS class

It doesn't have CSS styles, and it was only in Vue. So it's totally
unnecessary, remove it by the way.

### Improve the Repo Topic Edit form

* Simplify the code
* Add a "Cancel" button
* Align elements

Before:

<details>

![image](https://user-images.githubusercontent.com/2114189/223325782-f09532de-0c38-4742-ba86-ed35cc9a858d.png)

</details>

After:

![image](https://user-images.githubusercontent.com/2114189/226796347-207feb0a-b3cd-4820-8a3e-01930bab1069.png)

2 files changed, 17 insertions, 23 deletions

diff --git a/templates/base/footer_content.tmpl b/templates/base/footer_content.tmpl
index 53d0a2c77c..245a615735 100644
--- a/templates/base/footer_content.tmpl
+++ b/templates/base/footer_content.tmpl
@@ -19,9 +19,8 @@
 			{{if .ShowFooterBranding}}
 				<a target="_blank" rel="noopener noreferrer" href="https://github.com/go-gitea/gitea">{{svg "octicon-mark-github"}}<span class="sr-only">GitHub</span></a>
 			{{end}}
-			<div class="ui language bottom floating slide up dropdown link item">
-				{{svg "octicon-globe"}}
-				<span>{{.locale.LangName}}</span>
+			<div class="ui dropdown upward language">
+				<span>{{svg "octicon-globe"}} {{.locale.LangName}}</span>
 				<div class="menu language-menu">
 					{{range .AllLangs}}
 						<a lang="{{.Lang}}" data-url="{{AppSubUrl}}/?lang={{.Lang}}" class="item {{if eq $.locale.Lang .Lang}}active selected{{end}}">{{.Name}}</a>
diff --git a/templates/repo/home.tmpl b/templates/repo/home.tmpl
index f31a38fc5f..e544b7aab5 100644
--- a/templates/repo/home.tmpl
+++ b/templates/repo/home.tmpl
@@ -28,34 +28,29 @@
 				</div>
 			{{end}}
 		</div>
-		<div class="gt-mt-3" id="repo-topics">
-		{{range .Topics}}<a class="ui repo-topic large label topic" href="{{AppSubUrl}}/explore/repos?q={{.Name}}&topic=1">{{.Name}}</a>{{end}}
-		{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}<a id="manage_topic" class="muted">{{.locale.Tr "repo.topic.manage_topics"}}</a>{{end}}
+		<div class="gt-df gt-ac gt-fw gt-mt-3" id="repo-topics">
+			{{range .Topics}}<a class="ui repo-topic large label topic" href="{{AppSubUrl}}/explore/repos?q={{.Name}}&topic=1">{{.Name}}</a>{{end}}
+			{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}<button id="manage_topic" class="ui button tiny tertiary gt-ml-2">{{.locale.Tr "repo.topic.manage_topics"}}</button>{{end}}
 		</div>
 		{{end}}
 		{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}
-		<div class="ui repo-topic-edit grid form gt-hidden" id="topic_edit">
-			<div class="fourteen wide column">
-				<div class="field">
-					<div class="ui fluid multiple search selection dropdown">
-						<input type="hidden" name="topics" value="{{range $i, $v := .Topics}}{{.Name}}{{if lt (Add $i 1) (len $.Topics)}},{{end}}{{end}}">
-						{{range .Topics}}
-						<div class="ui small label topic transition visible" data-value="{{.Name}}" style="display: inline-block !important; cursor: default;">{{.Name}}{{svg "octicon-x" 16 "delete icon gt-ml-3 gt-mt-1"}}</div>
-						{{end}}
-						<div class="text"></div>
-					</div>
+		<div class="ui form gt-hidden gt-df gt-mt-4" id="topic_edit">
+			<div class="field gt-f1 gt-mr-3">
+				<div class="ui fluid multiple search selection dropdown" data-text-count-prompt="{{.locale.Tr "repo.topic.count_prompt"}}" data-text-format-prompt="{{.locale.Tr "repo.topic.format_prompt"}}">
+					<input type="hidden" name="topics" value="{{range $i, $v := .Topics}}{{.Name}}{{if lt (Add $i 1) (len $.Topics)}},{{end}}{{end}}">
+					{{range .Topics}}
+						{{/* keey the same layout as Fomantic UI generated labels */}}
+						<a class="ui label transition visible gt-cursor-default" data-value="{{.Name}}" style="display: inline-block !important;">{{.Name}}{{svg "octicon-x" 16 "delete icon"}}</a>
+					{{end}}
+					<div class="text"></div>
 				</div>
 			</div>
-			<div class="two wide column">
-				<a class="ui button primary" role="button" tabindex="0" id="save_topic"
-				data-link="{{.RepoLink}}/topics">{{.locale.Tr "repo.topic.done"}}</a>
+			<div>
+				<button class="ui basic button secondary" id="cancel_topic_edit">{{.locale.Tr "cancel"}}</button>
+				<button class="ui primary button" id="save_topic" data-link="{{.RepoLink}}/topics">{{.locale.Tr "save"}}</button>
 			</div>
 		</div>
 		{{end}}
-		<div class="gt-hidden" id="validate_prompt">
-			<span id="count_prompt">{{.locale.Tr "repo.topic.count_prompt"}}</span>
-			<span id="format_prompt">{{.locale.Tr "repo.topic.format_prompt"}}</span>
-		</div>
 		{{if .Repository.IsArchived}}
 			<div class="ui warning message">
 				{{.locale.Tr "repo.archive.title"}}