Add fomantic-dropdown webcomponent

Using a vanilla web component add the correct event listener for
handling dropdowns.

Author: McRaeAlex

templates/repo/issue/view_content/context_menu.tmpl

@@ -1,4 +1,4 @@
-<div class="item action ui dropdown jump pointing top right context-dropdown">
+<fomantic-dropdown class="item action ui dropdown jump pointing top right context-dropdown">
 	<a class="context-menu muted">
 		{{svg "octicon-kebab-horizontal"}}
 	</a>
@@ -41,4 +41,4 @@
 			{{end}}
 		{{end}}
 	</div>
-</div>
+</fomantic-dropdown>

web_src/js/webcomponents/fomantic-dropdown.ts

@@ -0,0 +1,20 @@
+/**
+ * Dropdown web component.
+ *
+ * This component wraps a Fomantic UI dropdown, allowing you to apply the same
+ * classes and attributes as you would with a standard Fomantic dropdown.
+ *
+ * It ensures automatic initialization when connected to the DOM, which is useful
+ * for dynamically added elements, eliminating the need for manual initialization.
+ */
+class FomanticDropdown extends HTMLElement {
+  connectedCallback() {
+    if (window.jQuery) {
+      window.$(this).dropdown();
+    }
+        // note: if jquery is not defined then this component was part of the initial page load and
+        // will be initialized by the fomantic-ui js
+  }
+}
+
+customElements.define('fomantic-dropdown', FomanticDropdown);

web_src/js/webcomponents/index.ts

@@ -3,3 +3,4 @@ import '@github/relative-time-element';
 import './origin-url.ts';
 import './overflow-menu.ts';
 import './absolute-date.ts';
+import './fomantic-dropdown.ts';