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)

web_src/js/features/common-global.js

@@ -83,7 +83,7 @@ export function initGlobalCommon() {
   const $uiDropdowns = $('.ui.dropdown');
 
   // do not init "custom" dropdowns, "custom" dropdowns are managed by their own code.
-  $uiDropdowns.filter(':not(.custom)').dropdown({fullTextSearch: 'exact'});
+  $uiDropdowns.filter(':not(.custom)').dropdown();
 
   // The "jump" means this dropdown is mainly used for "menu" purpose,
   // clicking an item will jump to somewhere else or trigger an action/function.
@@ -111,14 +111,12 @@ export function initGlobalCommon() {
     },
   });
 
-  // special animations/popup-directions
-  $uiDropdowns.filter('.slide.up').dropdown({transition: 'slide up'});
-  $uiDropdowns.filter('.upward').dropdown({direction: 'upward'});
+  // special popup-directions
+  $uiDropdowns.filter('.upward').dropdown('setting', 'direction', 'upward');
 
   $('.ui.checkbox').checkbox();
 
   $('.tabular.menu .item').tab();
-  $('.tabable.menu .item').tab();
 
   $('.toggle.button').on('click', function () {
     toggleElem($($(this).data('target')));

web_src/js/features/repo-home.js

@@ -6,27 +6,29 @@ const {appSubUrl, csrfToken} = window.config;
 
 export function initRepoTopicBar() {
   const mgrBtn = $('#manage_topic');
+  if (!mgrBtn.length) return;
   const editDiv = $('#topic_edit');
   const viewDiv = $('#repo-topics');
   const saveBtn = $('#save_topic');
   const topicDropdown = $('#topic_edit .dropdown');
-  const topicForm = $('#topic_edit.ui.form');
-  const topicPrompts = getPrompts();
+  const topicForm = editDiv; // the old logic, editDiv is topicForm
+  const topicDropdownSearch = topicDropdown.find('input.search');
+  const topicPrompts = {
+    countPrompt: topicDropdown.attr('data-text-count-prompt'),
+    formatPrompt: topicDropdown.attr('data-text-format-prompt'),
+  };
 
   mgrBtn.on('click', () => {
     hideElem(viewDiv);
     showElem(editDiv);
+    topicDropdownSearch.focus();
   });
 
-  function getPrompts() {
-    const hidePrompt = $('#validate_prompt');
-    const prompts = {
-      countPrompt: hidePrompt.children('#count_prompt').text(),
-      formatPrompt: hidePrompt.children('#format_prompt').text()
-    };
-    hidePrompt.remove();
-    return prompts;
-  }
+  $('#cancel_topic_edit').on('click', () => {
+    hideElem(editDiv);
+    showElem(viewDiv);
+    mgrBtn.focus();
+  });
 
   saveBtn.on('click', () => {
     const topics = $('input[name=topics]').val();
@@ -39,13 +41,11 @@ export function initRepoTopicBar() {
         viewDiv.children('.topic').remove();
         if (topics.length) {
           const topicArray = topics.split(',');
-
-          const last = viewDiv.children('a').last();
           for (let i = 0; i < topicArray.length; i++) {
             const link = $('<a class="ui repo-topic large label topic"></a>');
             link.attr('href', `${appSubUrl}/explore/repos?q=${encodeURIComponent(topicArray[i])}&topic=1`);
             link.text(topicArray[i]);
-            link.insertBefore(last);
+            link.insertBefore(mgrBtn); // insert all new topics before manage button
           }
         }
         hideElem(editDiv);
@@ -86,9 +86,6 @@ export function initRepoTopicBar() {
       duration: 200,
       variation: false,
     },
-    className: {
-      label: 'ui small label'
-    },
     apiSettings: {
       url: `${appSubUrl}/explore/topics/search?q={query}`,
       throttle: 500,
@@ -101,7 +98,7 @@ export function initRepoTopicBar() {
         const query = stripTags(this.urlData.query.trim());
         let found_query = false;
         const current_topics = [];
-        topicDropdown.find('div.label.visible.topic,a.label.visible').each((_, el) => {
+        topicDropdown.find('a.label.visible').each((_, el) => {
           current_topics.push(el.getAttribute('data-value'));
         });