source: Klonkt/src/assets/css/reply-editor.css@ e9c9ae1

main
Last change on this file since e9c9ae1 was e9c9ae1, checked in by Robin <roboburr@…>, 7 weeks ago

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@…>
  • Property mode set to 100644
File size: 4.6 KB
Line 
1/* Rich reply editor (partials/reply-editor.ejs + js/reply-editor.js). */
2/* !important: site CSS gives forms inside comment threads `display: contents`,
3 which collapses the form to a 0x0 non-box — flex layout AND the fixed
4 full-screen overlay silently break. This component must own its box. */
5.re-form[data-re] { display: flex !important; flex-direction: column; gap: .45rem; }
6
7.re-toolbar { display: flex; gap: .25rem; flex-wrap: wrap; }
8.re-toolbar button {
9 border: 1px solid color-mix(in srgb, var(--ink, #000) 14%, transparent);
10 background: none; color: inherit; border-radius: 8px;
11 min-width: 2rem; height: 1.9rem; padding: 0 .45rem;
12 font-size: .85rem; line-height: 1; cursor: pointer;
13}
14.re-toolbar button:hover { background: color-mix(in srgb, var(--ink, #000) 8%, transparent); }
15
16.re-editor {
17 min-height: 4.2rem; padding: .55rem .7rem; border-radius: 10px;
18 border: 1px solid color-mix(in srgb, var(--ink, #000) 16%, transparent);
19 background: transparent; overflow-wrap: anywhere; outline: none;
20}
21.re-editor:focus { border-color: var(--accent, #06c); }
22.re-editor:empty::before { content: attr(data-ph); color: color-mix(in srgb, var(--ink, #000) 40%, transparent); pointer-events: none; }
23.re-editor blockquote { margin: .4rem 0; padding-left: .7rem; border-left: 3px solid color-mix(in srgb, var(--ink, #000) 20%, transparent); }
24
25.re-foot { display: flex; align-items: center; gap: .6rem; justify-content: flex-end; }
26.re-lang {
27 font: inherit; font-size: .82rem; padding: .3rem .45rem; border-radius: 8px;
28 border: 1px solid color-mix(in srgb, var(--ink, #000) 16%, transparent);
29 background: transparent; color: inherit; max-width: 10rem;
30}
31
32/* Mentions bar (u02): conversation partners as removable chips. */
33.re-mentions { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
34.re-mentions-label { font-size: .78rem; color: color-mix(in srgb, var(--ink, #000) 55%, transparent); }
35.re-mention {
36 display: inline-flex; align-items: center; gap: .2rem;
37 padding: .15rem .3rem .15rem .55rem; border-radius: 999px; font-size: .8rem;
38 background: color-mix(in srgb, var(--accent, #06c) 14%, transparent);
39 border: 1px solid color-mix(in srgb, var(--accent, #06c) 30%, transparent);
40 max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
41}
42.re-mention-del { border: none; background: none; color: inherit; font-size: 1rem; line-height: 1; cursor: pointer; padding: 0 .25rem; }
43
44/* Media attachments (chips under the editor). */
45.re-attachments { display: flex; flex-wrap: wrap; gap: .4rem; }
46.re-att {
47 display: inline-flex; align-items: center; gap: .35rem;
48 padding: .25rem .4rem; border-radius: 8px; font-size: .8rem;
49 background: color-mix(in srgb, var(--ink, #000) 7%, transparent);
50 max-width: 100%; overflow: hidden;
51}
52.re-att img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; display: block; }
53.re-att-del { border: none; background: none; color: inherit; font-size: 1rem; line-height: 1; cursor: pointer; padding: 0 .15rem; }
54.re-att-err { background: color-mix(in srgb, #c00 18%, transparent); }
55.re-editor.re-drop { border-color: var(--accent, #06c); border-style: dashed; }
56
57/* Media on a sent reply in the thread (fedi-node). */
58.re-reply-media { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .4rem; }
59.re-reply-media img { max-width: min(260px, 100%); max-height: 260px; border-radius: 10px; display: block; }
60.re-reply-media audio { max-width: 100%; }
61.re-reply-media video { max-width: min(320px, 100%); border-radius: 10px; }
62
63/* Full-screen compose (mobile). JS toggles .re-full on the form. */
64.re-head { display: flex; align-items: center; gap: .6rem; }
65.re-head-title { flex: 1; text-align: center; font-size: .95rem; }
66.re-cancel {
67 border: none; background: none; color: inherit; font-size: 1.5rem;
68 line-height: 1; padding: .25rem .5rem; cursor: pointer;
69}
70.re-form.re-full {
71 /* Above the bottom tab bar (1050) and the profile/audio sheets (1100). */
72 position: fixed; inset: 0; z-index: 1200;
73 background: var(--paper, #fff); padding: .8rem .9rem;
74 padding-top: calc(.8rem + env(safe-area-inset-top));
75 padding-bottom: calc(.8rem + env(safe-area-inset-bottom));
76 gap: .6rem;
77}
78.re-form.re-full .re-head { order: -1; } /* the top bar stays topmost, above the mentions bar */
79.re-form.re-full .re-editor { flex: 1; min-height: 0; overflow-y: auto; border: none; padding: .4rem .1rem; }
80.re-form.re-full .re-editor:focus { border: none; }
81.re-form.re-full .re-send { display: none; } /* send lives in the top bar */
82.re-form.re-full .re-foot { justify-content: flex-start; }
83html.re-lock, html.re-lock body { overflow: hidden; }
Note: See TracBrowser for help on using the repository browser.