Add <overflow-menu>, rename webcomponents (#29400)

1. Add `<overflow-menu>` web component
2. Rename `<gitea-origin-url>` to `<origin-url>` and make filenames
match.

<img width="439" alt="image"
src="https://github.com/go-gitea/gitea/assets/115237/2fbe4ca4-110b-4ad2-8e17-c1e116ccbd74">

<img width="444" alt="Screenshot 2024-03-02 at 21 36 52"
src="https://github.com/go-gitea/gitea/assets/115237/aa8f786e-dc8c-4030-b12d-7cfb74bdfd6e">

<img width="537" alt="Screenshot 2024-03-03 at 03 05 06"
src="https://github.com/go-gitea/gitea/assets/115237/fddd50aa-adf1-4b4b-bd7f-caf30c7b2245">


![image](https://github.com/go-gitea/gitea/assets/115237/0f43770c-834c-4a05-8e3d-d30eb8653786)


![image](https://github.com/go-gitea/gitea/assets/115237/4b4c6bd7-843f-4f49-808f-6b3aed5e9f9a)

TODO:

- [x] Check if removal of `requestAnimationFrame` is possible to avoid
flash of content. Likely needs a `MutationObserver`.
- [x] Hide tippy when button is removed from DOM.
- [x] ~~Implement right-aligned items
(https://github.com/go-gitea/gitea/pull/28976)~~. Not going to do it.
- [x] Clean up CSS so base element has no background and add background
via tailwind instead.
- [x] Use it for org and user page.

---------

Co-authored-by: Giteabot <teabot@gitea.io>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

web_src/css/modules/tippy.css

@@ -5,6 +5,11 @@
   display: none !important;
 }
 
+/* show target element once it's been moved by tippy.js */
+.tippy-content .tippy-target {
+  display: unset !important;
+}
+
 [data-tippy-root] {
   max-width: calc(100vw - 32px);
 }
@@ -46,18 +51,40 @@
 .tippy-box[data-theme="menu"] {
   background-color: var(--color-menu);
   color: var(--color-text);
+  box-shadow: 0 6px 18px var(--color-shadow);
 }
 
 .tippy-box[data-theme="menu"] .tippy-content {
-  padding: 0;
+  padding: 4px 0;
 }
 
 .tippy-box[data-theme="menu"] .tippy-svg-arrow-inner {
   fill: var(--color-menu);
 }
 
+.tippy-box[data-theme="menu"] .item {
+  display: flex;
+  align-items: center;
+  padding: 9px 18px;
+  color: inherit;
+  text-decoration: none;
+  gap: 10px;
+}
+
+.tippy-box[data-theme="menu"] .item:hover {
+  background: var(--color-hover);
+}
+
+.tippy-box[data-theme="menu"] .item:focus {
+  background: var(--color-active);
+}
+
 /* box-with-header theme to look like .ui.attached.segment. can contain .ui.attached.header */
 
+.tippy-box[data-theme="box-with-header"] {
+  box-shadow: 0 6px 18px var(--color-shadow);
+}
+
 .tippy-box[data-theme="box-with-header"] .tippy-content {
   background: var(--color-box-body);
   border-radius: var(--border-radius);