Rearrange Clone Panel (#31142)

Rearrange the clone panel to use less horizontal space.
The following changes have been made to achieve this:
- Moved everything into the dropdown menu
- Moved the HTTPS/SSH Switch to a separate line
- Moved the "Clone in VS Code"-Button up and added a divider
- Named the dropdown button "Code", added appropriate icon

---------

Co-authored-by: techknowlogick <techknowlogick@gitea.com>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

web_src/js/features/repo-common.ts

@@ -5,6 +5,8 @@ import {showErrorToast} from '../modules/toast.ts';
 import {sleep} from '../utils.ts';
 import RepoActivityTopAuthors from '../components/RepoActivityTopAuthors.vue';
 import {createApp} from 'vue';
+import {toOriginUrl} from '../utils/url.ts';
+import {createTippy} from '../modules/tippy.ts';
 
 async function onDownloadArchive(e) {
   e.preventDefault();
@@ -41,27 +43,68 @@ export function initRepoActivityTopAuthorsChart() {
   }
 }
 
-export function initRepoCloneLink() {
-  const $repoCloneSsh = $('#repo-clone-ssh');
-  const $repoCloneHttps = $('#repo-clone-https');
-  const $inputLink = $('#repo-clone-url');
+function initCloneSchemeUrlSelection(parent: Element) {
+  const elCloneUrlInput = parent.querySelector<HTMLInputElement>('.repo-clone-url');
 
-  if ((!$repoCloneSsh.length && !$repoCloneHttps.length) || !$inputLink.length) {
-    return;
-  }
+  const tabSsh = parent.querySelector('.repo-clone-ssh');
+  const tabHttps = parent.querySelector('.repo-clone-https');
+  const updateClonePanelUi = function() {
+    const scheme = localStorage.getItem('repo-clone-protocol') || 'https';
+    const isSSH = scheme === 'ssh' && Boolean(tabSsh) || scheme !== 'ssh' && !tabHttps;
+    if (tabHttps) {
+      tabHttps.textContent = window.origin.split(':')[0].toUpperCase(); // show "HTTP" or "HTTPS"
+      tabHttps.classList.toggle('active', !isSSH);
+    }
+    if (tabSsh) {
+      tabSsh.classList.toggle('active', isSSH);
+    }
 
-  $repoCloneSsh.on('click', () => {
+    const tab = isSSH ? tabSsh : tabHttps;
+    if (!tab) return;
+    const link = toOriginUrl(tab.getAttribute('data-link'));
+
+    for (const el of document.querySelectorAll('.js-clone-url')) {
+      if (el.nodeName === 'INPUT') {
+        (el as HTMLInputElement).value = link;
+      } else {
+        el.textContent = link;
+      }
+    }
+    for (const el of parent.querySelectorAll<HTMLAnchorElement>('.js-clone-url-editor')) {
+      el.href = el.getAttribute('data-href-template').replace('{url}', encodeURIComponent(link));
+    }
+  };
+
+  updateClonePanelUi();
+
+  tabSsh.addEventListener('click', () => {
     localStorage.setItem('repo-clone-protocol', 'ssh');
-    window.updateCloneStates();
+    updateClonePanelUi();
   });
-  $repoCloneHttps.on('click', () => {
+  tabHttps.addEventListener('click', () => {
     localStorage.setItem('repo-clone-protocol', 'https');
-    window.updateCloneStates();
+    updateClonePanelUi();
   });
+  elCloneUrlInput.addEventListener('focus', () => {
+    elCloneUrlInput.select();
+  });
+}
 
-  $inputLink.on('focus', () => {
-    $inputLink.trigger('select');
+function initClonePanelButton(btn: HTMLButtonElement) {
+  const elPanel = btn.nextElementSibling;
+  createTippy(btn, {
+    content: elPanel,
+    trigger: 'click',
+    placement: 'bottom-end',
+    interactive: true,
+    hideOnClick: true,
   });
+  initCloneSchemeUrlSelection(elPanel);
+}
+
+export function initRepoCloneButtons() {
+  queryElems(document, '.js-btn-clone-panel', initClonePanelButton);
+  queryElems(document, '.clone-buttons-combo', initCloneSchemeUrlSelection);
 }
 
 export function initRepoCommonBranchOrTagDropdown(selector: string) {