From e1bcffa791fe16273993dbcf87663ac27db2f53c Mon Sep 17 00:00:00 2001
From: oppiliappan <me@oppi.li>
Date: Fri, 16 Jan 2026 14:43:13 +0000
Subject: [PATCH] appview/pages: reimplement clone dropdown using popover

Signed-off-by: oppiliappan <me@oppi.li>
---
 .../repo/fragments/cloneDropdown.html         | 177 ++++++++----------
 appview/pages/templates/repo/index.html       |  13 +-
 2 files changed, 85 insertions(+), 105 deletions(-)

diff --git a/appview/pages/templates/repo/fragments/cloneDropdown.html b/appview/pages/templates/repo/fragments/cloneDropdown.html
index 9179aa5a..5c979116 100644
--- a/appview/pages/templates/repo/fragments/cloneDropdown.html
+++ b/appview/pages/templates/repo/fragments/cloneDropdown.html
@@ -1,105 +1,90 @@
 {{ define "repo/fragments/cloneDropdown" }}
-    {{ $knot := .RepoInfo.Knot }}
-    {{ if eq $knot "knot1.tangled.sh" }}
-        {{ $knot = "tangled.org" }}
-    {{ end }}
+  {{ $knot := .RepoInfo.Knot }}
+  {{ if eq $knot "knot1.tangled.sh" }}
+      {{ $knot = "tangled.org" }}
+  {{ end }}
 
-    <details id="clone-dropdown" class="relative inline-block text-left group">
-        <summary class="btn-create cursor-pointer list-none flex items-center gap-2">
-            {{ i "download" "w-4 h-4" }}
-            <span class="hidden md:inline">code</span>
-            <span class="group-open:hidden">
-                {{ i "chevron-down" "w-4 h-4" }}
-            </span>
-            <span class="hidden group-open:flex">
-                {{ i "chevron-up" "w-4 h-4" }}
-            </span>
-        </summary>
+  <button 
+    popovertarget="clone-dropdown"
+    popovertargetaction="toggle"
+    class="btn-create cursor-pointer list-none flex items-center gap-2 px-4">
+    {{ i "download" "w-4 h-4" }}
+    <span class="hidden md:inline">code</span>
+  </button>
+  <div
+    popover
+    id="clone-dropdown"
+    class="
+      bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 
+      dark:text-white backdrop:bg-gray-400/50 dark:backdrop:bg-gray-800/50 
+      w-96 p-4 rounded drop-shadow overflow-visible">
+    <h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-5">Clone this repository</h3>
 
-        <div class="absolute right-0 mt-2 w-96 bg-white dark:bg-gray-800 rounded border border-gray-200 dark:border-gray-700 drop-shadow-sm dark:text-white z-[9999]">
-            <div class="p-4">
-                <div class="mb-3">
-                    <h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-2">Clone this repository</h3>
-                </div>
+    <!-- HTTPS Clone -->
+    <div class="mb-3">
+      <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">HTTPS</label>
+      <div class="flex items-center border border-gray-300 dark:border-gray-600 rounded">
+        <code
+          class="flex-1 px-3 py-2 text-sm bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-l select-all cursor-pointer whitespace-nowrap overflow-x-auto"
+          onclick="window.getSelection().selectAllChildren(this)"
+          data-url="https://tangled.org/{{ resolve .RepoInfo.OwnerDid }}/{{ .RepoInfo.Name }}"
+          >https://tangled.org/{{ resolve .RepoInfo.OwnerDid }}/{{ .RepoInfo.Name }}</code>
+        <button
+          onclick="copyToClipboard(this, this.previousElementSibling.getAttribute('data-url'))"
+          class="px-3 py-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 border-l border-gray-300 dark:border-gray-600"
+          title="Copy to clipboard"
+          >
+          {{ i "copy" "w-4 h-4" }}
+        </button>
+      </div>
+    </div>
 
-                <!-- HTTPS Clone -->
-                <div class="mb-3">
-                    <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">HTTPS</label>
-                    <div class="flex items-center border border-gray-300 dark:border-gray-600 rounded">
-                        <code
-                            class="flex-1 px-3 py-2 text-sm bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-l select-all cursor-pointer whitespace-nowrap overflow-x-auto"
-                            onclick="window.getSelection().selectAllChildren(this)"
-                            data-url="https://tangled.org/{{ resolve .RepoInfo.OwnerDid }}/{{ .RepoInfo.Name }}"
-                        >https://tangled.org/{{ resolve .RepoInfo.OwnerDid }}/{{ .RepoInfo.Name }}</code>
-                        <button
-                            onclick="copyToClipboard(this, this.previousElementSibling.getAttribute('data-url'))"
-                            class="px-3 py-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 border-l border-gray-300 dark:border-gray-600"
-                            title="Copy to clipboard"
-                        >
-                            {{ i "copy" "w-4 h-4" }}
-                        </button>
-                    </div>
-                </div>
+    <!-- SSH Clone -->
+    <div class="mb-3">
+      {{ $repoOwnerHandle := resolve .RepoInfo.OwnerDid }}
+      <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">SSH</label>
+      <div class="flex items-center border border-gray-300 dark:border-gray-600 rounded">
+        <code
+          class="flex-1 px-3 py-2 text-sm bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-l select-all cursor-pointer whitespace-nowrap overflow-x-auto"
+          onclick="window.getSelection().selectAllChildren(this)"
+          data-url="git@{{ $knot | stripPort }}:{{ $repoOwnerHandle }}/{{ .RepoInfo.Name }}"
+          >git@{{ $knot | stripPort }}:{{ $repoOwnerHandle }}/{{ .RepoInfo.Name }}</code>
+        <button
+          onclick="copyToClipboard(this, this.previousElementSibling.getAttribute('data-url'))"
+          class="px-3 py-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 border-l border-gray-300 dark:border-gray-600"
+          title="Copy to clipboard"
+          >
+          {{ i "copy" "w-4 h-4" }}
+        </button>
+      </div>
+    </div>
 
-                <!-- SSH Clone -->
-                <div class="mb-3">
-                    {{ $repoOwnerHandle := resolve .RepoInfo.OwnerDid }}
-                    <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">SSH</label>
-                    <div class="flex items-center border border-gray-300 dark:border-gray-600 rounded">
-                        <code
-                            class="flex-1 px-3 py-2 text-sm bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-l select-all cursor-pointer whitespace-nowrap overflow-x-auto"
-                            onclick="window.getSelection().selectAllChildren(this)"
-                            data-url="git@{{ $knot | stripPort }}:{{ $repoOwnerHandle }}/{{ .RepoInfo.Name }}"
-                        >git@{{ $knot | stripPort }}:{{ $repoOwnerHandle }}/{{ .RepoInfo.Name }}</code>
-                        <button
-                            onclick="copyToClipboard(this, this.previousElementSibling.getAttribute('data-url'))"
-                            class="px-3 py-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 border-l border-gray-300 dark:border-gray-600"
-                            title="Copy to clipboard"
-                        >
-                            {{ i "copy" "w-4 h-4" }}
-                        </button>
-                    </div>
-                </div>
+    <!-- Note for self-hosted -->
+    <p class="text-xs text-gray-500 dark:text-gray-400">
+    For self-hosted knots, clone URLs may differ based on your setup.
+    </p>
 
-                <!-- Note for self-hosted -->
-                    <p class="text-xs text-gray-500 dark:text-gray-400">
-                        For self-hosted knots, clone URLs may differ based on your setup.
-                    </p>
+    <!-- Download Archive -->
+    <div class="pt-2 mt-2 border-t border-gray-200 dark:border-gray-700">
+      <a
+        href="/{{ .RepoInfo.FullName }}/archive/{{ .Ref | urlquery }}"
+        class="flex items-center gap-2 px-3 py-2 text-sm"
+        >
+        {{ i "download" "w-4 h-4" }}
+        Download tar.gz
+      </a>
+    </div>
+  </div>
 
-                <!-- Download Archive -->
-                <div class="pt-2 mt-2 border-t border-gray-200 dark:border-gray-700">
-                    <a
-                        href="/{{ .RepoInfo.FullName }}/archive/{{ .Ref | urlquery }}"
-                        class="flex items-center gap-2 px-3 py-2 text-sm"
-                    >
-                        {{ i "download" "w-4 h-4" }}
-                        Download tar.gz
-                    </a>
-                </div>
-
-            </div>
-        </div>
-    </details>
-
-    <script>
-        function copyToClipboard(button, text) {
-            navigator.clipboard.writeText(text).then(() => {
-                const originalContent = button.innerHTML;
-                button.innerHTML = `{{ i "check" "w-4 h-4" }}`;
-                setTimeout(() => {
-                    button.innerHTML = originalContent;
-                }, 2000);
-            });
-        }
-
-        // Close clone dropdown when clicking outside
-        document.addEventListener('click', function(event) {
-            const cloneDropdown = document.getElementById('clone-dropdown');
-            if (cloneDropdown && cloneDropdown.hasAttribute('open')) {
-                if (!cloneDropdown.contains(event.target)) {
-                    cloneDropdown.removeAttribute('open');
-                }
-            }
+  <script>
+    function copyToClipboard(button, text) {
+        navigator.clipboard.writeText(text).then(() => {
+            const originalContent = button.innerHTML;
+            button.innerHTML = `{{ i "check" "w-4 h-4" }}`;
+            setTimeout(() => {
+                button.innerHTML = originalContent;
+            }, 2000);
         });
-    </script>
+    }
+  </script>
 {{ end }}
diff --git a/appview/pages/templates/repo/index.html b/appview/pages/templates/repo/index.html
index abb27b78..9b0f70ea 100644
--- a/appview/pages/templates/repo/index.html
+++ b/appview/pages/templates/repo/index.html
@@ -14,14 +14,14 @@
         {{ end }}
         <div class="flex items-center justify-between pb-5">
           {{ block "branchSelector" . }}{{ end }}
-          <div class="flex md:hidden items-center gap-3">
-            <a href="/{{ .RepoInfo.FullName }}/commits/{{ .Ref | urlquery }}" class="inline-flex items-center text-sm gap-1 font-bold">
+          <div class="flex items-center gap-3">
+            <a href="/{{ .RepoInfo.FullName }}/commits/{{ .Ref | urlquery }}" class="inline-flex md:hidden items-center text-sm gap-1 font-bold">
               {{ i "git-commit-horizontal" "w-4" "h-4" }} {{ .TotalCommits }}
             </a>
-            <a href="/{{ .RepoInfo.FullName }}/branches" class="inline-flex items-center text-sm gap-1 font-bold">
+            <a href="/{{ .RepoInfo.FullName }}/branches" class="inline-flex md:hidden items-center text-sm gap-1 font-bold">
               {{ i "git-branch" "w-4" "h-4" }} {{ len .Branches }}
             </a>
-            <a href="/{{ .RepoInfo.FullName }}/tags" class="inline-flex items-center text-sm gap-1 font-bold">
+            <a href="/{{ .RepoInfo.FullName }}/tags" class="inline-flex md:hidden items-center text-sm gap-1 font-bold">
               {{ i "tags" "w-4" "h-4" }} {{ len .Tags }}
             </a>
             {{ template "repo/fragments/cloneDropdown" . }}
@@ -110,11 +110,6 @@
           </a>
       </div>
     </div>
-
-    <!-- Clone dropdown in top right -->
-    <div class="hidden md:flex items-center ">
-        {{ template "repo/fragments/cloneDropdown" . }}
-    </div>
   </div>
 {{ end }}
 
-- 
2.51.2