Changeset e9c9ae1 in Klonkt for src/assets

Timestamp:

07/19/2026 10:48:15 PM (7 weeks ago)

Author:

Robin <roboburr@…>

Branches:

main

Children:

ff3b8ce

Parents:

5190152

git-author:

Robin <roboburr@…> (07/19/2026 10:47:10 PM)

git-committer:

Robin <roboburr@…> (07/19/2026 10:48:15 PM)

Message:

Feature: mentions bar with conversation partners (klonkt-demo-u02)

Implicit mentions leave the text and become an editable "To:" bar above the
reply editor: the parent author plus the thread's ancestor authors as chips.
Removing a chip stops addressing that partner (no mention anchor, no Mention
tag, no inbox ping); explicit @mentions typed in the text keep working via the
existing resolveMentionsInText path.

• getInteractions: each thread node gets "participants" (author + ancestor chain via the byId map, own nodes skipped, deduped, capped at 8) and carries actor_uri now.
• reply-editor partial: the bar renders server-side with a hidden "mentions" JSON field carrying the full list, so the no-JS path addresses everyone; the JS removes chips and mirrors the remaining list into the field.
• deliverReply({mentions}): undefined = legacy parent-only behavior; an array (possibly empty) = the kept list drives the mention prefix, the Mention tags (mentionTags reads the content anchors) and the per-actor inbox pings. to_actor/to_handle follow the kept list (parent when kept, else the first chip, else null -> the note addresses Public only).
• deliverOutboxUpdate: an edit reuses the OLD content's leading mention anchors instead of rebuilding just to_actor, so co-mentions survive edits (legacy rows fall back as before).
• Interact page passes the target author as the single chip. Full-screen mobile keeps the top bar above the mentions bar (flex order).

4 new tests (participant chains, multi-chip tags + to_actor, empty bar goes
Public-only, co-mentions survive edits); 97 green. Browser-verified: bar shows
@bob + @alice on a nested reply, removing @alice updates the hidden field, the
sent reply mentions and addresses only @bob; no console errors.

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

Location:

src/assets

Files:

• css/reply-editor.css (modified) (2 diffs)
• js/reply-editor.js (modified) (1 diff)

src/assets/css/reply-editor.css

@@ -29 +29 @@
   background: transparent; color: inherit; max-width: 10rem;
 }
+
+/* Mentions bar (u02): conversation partners as removable chips. */
+.re-mentions { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
+.re-mentions-label { font-size: .78rem; color: color-mix(in srgb, var(--ink, #000) 55%, transparent); }
+.re-mention {
+  display: inline-flex; align-items: center; gap: .2rem;
+  padding: .15rem .3rem .15rem .55rem; border-radius: 999px; font-size: .8rem;
+  background: color-mix(in srgb, var(--accent, #06c) 14%, transparent);
+  border: 1px solid color-mix(in srgb, var(--accent, #06c) 30%, transparent);
+  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.re-mention-del { border: none; background: none; color: inherit; font-size: 1rem; line-height: 1; cursor: pointer; padding: 0 .25rem; }
 
 /* Media attachments (chips under the editor). */
@@ -64 +76 @@
   gap: .6rem;
 }
+.re-form.re-full .re-head { order: -1; }   /* the top bar stays topmost, above the mentions bar */
 .re-form.re-full .re-editor { flex: 1; min-height: 0; overflow-y: auto; border: none; padding: .4rem .1rem; }
 .re-form.re-full .re-editor:focus { border: none; }

src/assets/js/reply-editor.js

@@ -145 +145 @@
     }
 
+    // Mentions bar (u02): removing a chip stops addressing that partner. The
+    // hidden field always mirrors the remaining chips.
+    var mField = form.querySelector('input[name="mentions"]');
+    if (mField) {
+      var parts = [];
+      try { parts = JSON.parse(mField.value || '[]'); } catch (e) { parts = []; }
+      form.querySelectorAll('.re-mention-del').forEach(function (btn) {
+        btn.addEventListener('click', function () {
+          var chip = btn.closest('.re-mention');
+          var uri = chip.getAttribute('data-uri');
+          parts = parts.filter(function (p) { return p.uri !== uri; });
+          mField.value = JSON.stringify(parts);
+          chip.remove();
+        });
+      });
+    }
+
     // Full-screen compose on mobile: enter on focus, leave via ×.
     function setFull(on) {