feat: add interaction panel

- open toot link from user's instance
- send webmention from input

this commit was vibe coded and needs more work before publishing to
production

1 files changed, 69 insertions, 3 deletions

diff --git a/layouts/_partials/posts/webmention-likes.html b/layouts/_partials/posts/webmention-likes.html
index 7169a655..46314842 100644
--- a/layouts/_partials/posts/webmention-likes.html
+++ b/layouts/_partials/posts/webmention-likes.html
@@ -1,9 +1,35 @@
-{{ with . }}
+{{ $likes := .likes }}
+{{ $page := .page }}
+{{ with $likes }}
 <section class="mb-6 flex gap-2 items-center">
-  <div class="flex gap-1 group">
-      <a data-tooltip title="互动" class="hover:no-underline cursor-pointer">
+  <div class="flex gap-1 group relative">
+      <a data-tooltip title="互动" class="hover:no-underline cursor-pointer" onclick="toggleActionArea()">
           <div class="w-5 h-5 bg-neutral-200 dark:bg-neutral-600 flex justify-center items-center rd-full font-800">+</div>
       </a>
+      <!-- Action Area -->
+      <div id="action-area" class="hidden absolute top-7 left-0 z-50 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-600 rounded-lg shadow-lg p-4 w-80">
+          <div class="grid grid-cols-2 gap-4">
+              <!-- Column 1: Fediverse Instance -->
+              <div class="flex flex-col gap-2">
+                  <h4 class="text-sm font-semibold m-0">Fediverse</h4>
+                  {{ with $page.Params.toot }}
+                  <input type="text" id="fediverse-instance" placeholder="your.instance.com" class="text-sm px-2 py-1 border border-neutral-300 dark:border-neutral-600 rounded bg-transparent">
+                  <button onclick="openInFediverse()" class="text-xs px-2 py-1 bg-neutral-200 dark:bg-neutral-600 rounded hover:bg-neutral-300 dark:hover:bg-neutral-500 transition-colors">Open Toot</button>
+                  {{ else }}
+                  <p class="text-xs text-neutral-500 m-0">No toot available</p>
+                  <input type="text" id="fediverse-instance" placeholder="your.instance.com" class="text-sm px-2 py-1 border border-neutral-300 dark:border-neutral-600 rounded bg-transparent opacity-50" disabled>
+                  <button disabled class="text-xs px-2 py-1 bg-neutral-200 dark:bg-neutral-600 rounded opacity-50 cursor-not-allowed">Open Toot</button>
+                  {{ end }}
+              </div>
+               <!-- Column 2: Webmention -->
+               <form action="https://webmention.io/www.geedea.pro/webmention" method="POST" class="flex flex-col gap-2">
+                   <h4 class="text-sm font-semibold m-0">Webmention</h4>
+                   <input type="url" name="source" placeholder="Your post URL" class="text-sm px-2 py-1 border border-neutral-300 dark:border-neutral-600 rounded bg-transparent">
+                   <input type="hidden" name="target" value="{{ $page.Permalink }}">
+                   <button type="submit" class="text-xs px-2 py-1 bg-neutral-200 dark:bg-neutral-600 rounded hover:bg-neutral-300 dark:hover:bg-neutral-500 transition-colors">Send</button>
+               </form>
+          </div>
+      </div>
     {{ range . }}
       <a href="{{ .author.url }}" target="_blank" title="{{ .author.name }}">
           {{ $value := math.Floor (mul math.Rand 80) }}
@@ -16,5 +42,45 @@
  </div>
  <p class="text-secondary m-0 text-sm">{{ printf (T "webmention.likedBy") (len . ) }}</p>
 </section>
+
+<script>
+function toggleActionArea() {
+    const actionArea = document.getElementById('action-area');
+    actionArea.classList.toggle('hidden');
+}
+
+function openInFediverse() {
+    const instance = document.getElementById('fediverse-instance').value.trim();
+    {{ with $page.Params.toot }}
+    const tootUrl = '{{ . }}';
+    {{ else }}
+    const tootUrl = '';
+    {{ end }}
+
+    if (!instance) {
+        alert('Please enter your Fediverse instance URL');
+        return;
+    }
+
+    if (!tootUrl) {
+        alert('No toot available for this post');
+        return;
+    }
+
+    // Open the toot interaction page on the user's instance
+    const url = 'https://' + instance + '/authorize_interaction?uri=' + encodeURIComponent(tootUrl);
+    window.open(url, '_blank');
+}
+
+// Close action area when clicking outside
+document.addEventListener('click', function(event) {
+    const actionArea = document.getElementById('action-area');
+    const toggleBtn = event.target.closest('[onclick="toggleActionArea()"]');
+
+    if (!toggleBtn && !actionArea.contains(event.target)) {
+        actionArea.classList.add('hidden');
+    }
+});
+</script>
 {{ end }}