Changeset 40cf2ef in Klonkt

Timestamp:

06/24/2026 02:55:01 PM (3 months ago)

Author:

Robin Genis <roboburr@…>

Branches:

main

Children:

c901131

Parents:

dc8e9bd

Message:

style(activitypub): inline address form for reply-via-fediverse (no browser prompt)

Clicking 'Reply via the fediverse' now opens a styled inline input (handle + go +
cancel) instead of the native prompt() dialog.

Co-Authored-By: Claude <noreply@…>

Location:

src

Files:

• assets/css/style.css (modified) (1 diff)
• views/pages/post.ejs (modified) (1 diff)
• views/shell.ejs (modified) (1 diff)

src/assets/css/style.css

@@ -4430 +4430 @@
 .post-fediverse-cta .fedi-remote-reply-btn svg { color: var(--accent, currentColor); }
 .post-fediverse .comment-actions .fedi-remote-reply-btn { gap: .3rem; }
+
+/* Inline "reply via fediverse" address form (replaces the browser prompt) */
+.fedi-remote-form { display: inline-flex; align-items: center; gap: .4rem; margin: .55rem 0 0; flex-wrap: wrap; }
+.fedi-remote-form input {
+  padding: .45rem .7rem; border-radius: 9px; font: inherit; min-width: 240px;
+  border: 1px solid color-mix(in srgb, var(--ink, #000) 22%, transparent);
+  background: var(--paper, #fff); color: var(--ink, #000);
+}
+.fedi-remote-form input:focus { outline: 2px solid color-mix(in srgb, var(--accent, #888) 55%, transparent); outline-offset: 1px; }
+.fedi-remote-form .fedi-remote-go { padding: .45rem .8rem; }
+.fedi-remote-form .fedi-remote-cancel { background: none; border: none; color: var(--ink-soft, #888); cursor: pointer; font-size: 1.05rem; line-height: 1; padding: .25rem .4rem; }
+.fedi-remote-form .fedi-remote-cancel:hover { color: var(--ink, #000); }

src/views/pages/post.ejs

@@ -102 +102 @@
   (function(){
     if (window.__fediRemoteWired) return; window.__fediRemoteWired = true;
+    function go(raw, uri){
+      var d = (raw||'').trim().replace(/^@?[^@\s]*@/, '').replace(/^https?:\/\//i, '').replace(/\/.*$/, '').trim();
+      if (d) location.href = 'https://' + d + '/authorize_interaction?uri=' + encodeURIComponent(uri||'');
+    }
     document.addEventListener('click', function(e){
+      var cancel = e.target.closest && e.target.closest('.fedi-remote-cancel');
+      if (cancel) { var f0 = cancel.closest('.fedi-remote-form'); if (f0) f0.remove(); return; }
       var b = e.target.closest && e.target.closest('.fedi-remote-reply-btn');
       if (!b) return;
-      var d = prompt(b.getAttribute('data-fedi-prompt') || ''); if (!d) return;
-      d = d.trim().replace(/^@?[^@\s]*@/, '').replace(/^https?:\/\//i, '').replace(/\/.*$/, '').trim();
-      if (d) location.href = 'https://' + d + '/authorize_interaction?uri=' + encodeURIComponent(b.getAttribute('data-fedi-uri') || '');
+      e.preventDefault();
+      var mine = (b.nextElementSibling && b.nextElementSibling.classList && b.nextElementSibling.classList.contains('fedi-remote-form')) ? b.nextElementSibling : null;
+      var any = document.querySelector('.fedi-remote-form'); if (any) any.remove();
+      if (mine) return; // clicking again closes it
+      var f = document.createElement('form');
+      f.className = 'fedi-remote-form';
+      f.dataset.uri = b.getAttribute('data-fedi-uri') || '';
+      f.innerHTML = '<input type="text" placeholder="@jij@mastodon.social" autocomplete="off" spellcheck="false">'
+        + '<button type="submit" class="btn btn-primary fedi-remote-go">&rarr;</button>'
+        + '<button type="button" class="fedi-remote-cancel" aria-label="x">&times;</button>';
+      b.parentNode.insertBefore(f, b.nextSibling);
+      f.querySelector('input').focus();
+    });
+    document.addEventListener('submit', function(e){
+      var f = e.target.closest && e.target.closest('.fedi-remote-form');
+      if (!f) return;
+      e.preventDefault();
+      go(f.querySelector('input').value, f.dataset.uri);
     });
   })();

src/views/shell.ejs

@@ -175 +175 @@
 
 <!-- v9 stylesheet (full palette system) -->
-<link rel="stylesheet" href="/assets/css/style.css?v=40">
+<link rel="stylesheet" href="/assets/css/style.css?v=41">
 
 <!-- Audio player styles: loaded on every page so the mini-player works