Changeset ff3b8ce in Klonkt


Ignore:
Timestamp:
07/19/2026 11:36:33 PM (7 weeks ago)
Author:
Robin <roboburr@…>
Branches:
main
Children:
8ed65a6
Parents:
e9c9ae1
git-author:
Robin <roboburr@…> (07/19/2026 11:36:10 PM)
git-committer:
Robin <roboburr@…> (07/19/2026 11:36:33 PM)
Message:

Polish: reply editor styled as a sibling of the post editor (klonkt-demo-3dp)

The rich reply editor worked but looked ad-hoc. This is a visual pass, no
behavior change:

  • Toolbar: text glyphs (B/I/link/list/quote/paperclip) replaced with the post editor's Feather SVG icons; 32px buttons, transparent border, 6px radius, hover only on hover-capable devices, and an is-active accent-filled state reflecting the caret's formatting (bold/italic/list) via queryCommandState.
  • Editor box: framed with a rule border and an accent focus ring, tidy paragraph/list/blockquote/link spacing.
  • Footer, language select, mentions chips and attachment chips restyled to the same rule/paper/accent tokens; the mobile full-screen top bar gets a divider.

Reuses the theme's --rule/--paper/--paper-2/--accent tokens so it tracks light
and dark. 97 tests green; browser-verified: 32px SVG buttons + separator, framed
editor (10px radius), bold shows is-active on selection, mobile full-screen top
bar order and z-index intact.

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

Files:
6 edited

Legend:

Unmodified
Added
Removed

  • CHANGELOG.de.md

    re9c9ae1 rff3b8ce  
    77
    88### Hinzugefügt
     9- **Der Antwort-Editor wurde optisch aufgeräumt.** Seine Symbolleiste nutzt jetzt
     10  dieselben Icons und 32px-Buttons wie der Beitragseditor, aktive Formatierung
     11  in der Akzentfarbe gefüllt, eine gerahmte Editor-Box mit Fokus-Ring und
     12  aufgeräumtere Sprach-, Mention- und Anhang-Chips. Eine Editor-Familie auf der
     13  ganzen Seite.
    914- **Der Antwort-Editor zeigt, wen du adressierst (reichhaltige Antworten,
    1015  Phase 3).** Eine "An:"-Leiste über dem Editor zeigt die Gesprächspartner (den

  • CHANGELOG.md

    re9c9ae1 rff3b8ce  
    77
    88### Added
     9- **The reply editor got a visual clean-up.** Its toolbar now uses the same
     10  icon set and 32px buttons as the post editor, with active formatting shown
     11  filled in the accent colour, a framed editor box with a focus ring, and
     12  tidier language, mention and attachment chips. One editor family across the
     13  site.
    914- **The reply editor shows who you are addressing (rich replies, phase 3).** A
    1015  "To:" bar above the editor lists the conversation partners (the author you

  • CHANGELOG.nl.md

    re9c9ae1 rff3b8ce  
    77
    88### Toegevoegd
     9- **De reactie-editor is visueel opgeschoond.** De werkbalk gebruikt nu dezelfde
     10  iconen en 32px-knoppen als de post-editor, met actieve opmaak gevuld in de
     11  accentkleur, een gekaderde editor-box met focus-ring, en nettere taal-,
     12  mention- en bijlage-chips. Eén editor-familie op de hele site.
    913- **De reactie-editor toont wie je adresseert (rijke reacties, fase 3).** Een
    1014  "Aan:"-balk boven de editor toont de gesprekspartners (de auteur waarop je

  • src/assets/css/reply-editor.css

    re9c9ae1 rff3b8ce  
    1 /* Rich reply editor (partials/reply-editor.ejs + js/reply-editor.js). */
     1/* Rich reply editor (partials/reply-editor.ejs + js/reply-editor.js).
     2   Styled as a small sibling of the post editor (pe-*): same 32px icon buttons,
     3   same accent-active state, same framed feel, scaled down for a reply. */
     4
    25/* !important: site CSS gives forms inside comment threads `display: contents`,
    36   which collapses the form to a 0x0 non-box — flex layout AND the fixed
    47   full-screen overlay silently break. This component must own its box. */
    5 .re-form[data-re] { display: flex !important; flex-direction: column; gap: .45rem; }
     8.re-form[data-re] { display: flex !important; flex-direction: column; gap: .5rem; }
    69
    7 .re-toolbar { display: flex; gap: .25rem; flex-wrap: wrap; }
     10/* ── Toolbar (matches .pe-toolbar) ─────────────────────────────────────── */
     11.re-toolbar { display: flex; align-items: center; gap: .1rem; flex-wrap: wrap; }
    812.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  display: inline-flex; align-items: center; justify-content: center;
     14  width: 32px; height: 32px; padding: 0;
     15  background: transparent; border: 1px solid transparent; border-radius: 6px;
     16  color: var(--ink, currentColor); cursor: pointer;
     17  touch-action: manipulation; -webkit-user-select: none; user-select: none;
     18  -webkit-tap-highlight-color: transparent;
     19  transition: background .15s ease, color .15s ease, border-color .15s ease;
    1320}
    14 .re-toolbar button:hover { background: color-mix(in srgb, var(--ink, #000) 8%, transparent); }
     21.re-toolbar button svg { width: 16px; height: 16px; }
     22@media (hover: hover) {
     23  .re-toolbar button:hover { background: var(--paper-2, color-mix(in srgb, var(--ink, #000) 8%, transparent)); color: var(--accent, #06c); }
     24}
     25.re-toolbar button:active { transform: scale(.94); }
     26.re-toolbar button.is-active { background: var(--accent, #06c); color: #fff; border-color: var(--accent, #06c); }
     27.re-toolbar button.is-active svg { color: #fff; }
     28.re-toolbar-sep { width: 1px; height: 18px; background: var(--rule, color-mix(in srgb, var(--ink, #000) 16%, transparent)); margin: 0 .3rem; flex-shrink: 0; }
    1529
     30/* ── Editor box (matches .pe-editor) ───────────────────────────────────── */
    1631.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;
     32  min-height: 4rem; padding: .6rem .75rem; border-radius: 10px;
     33  border: 1px solid var(--rule, color-mix(in srgb, var(--ink, #000) 16%, transparent));
     34  background: var(--paper, transparent); color: inherit;
     35  overflow-wrap: anywhere; outline: none; line-height: 1.5;
     36  transition: border-color .15s ease, box-shadow .15s ease;
    2037}
    21 .re-editor:focus { border-color: var(--accent, #06c); }
     38.re-editor:focus {
     39  border-color: var(--accent, #06c);
     40  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #06c) 18%, transparent);
     41}
    2242.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); }
     43.re-editor p { margin: 0 0 .5rem; }
     44.re-editor p:last-child { margin-bottom: 0; }
     45.re-editor ul, .re-editor ol { margin: .4rem 0; padding-left: 1.4rem; }
     46.re-editor blockquote {
     47  margin: .4rem 0; padding: .1rem 0 .1rem .75rem;
     48  border-left: 3px solid color-mix(in srgb, var(--ink, #000) 22%, transparent);
     49  color: color-mix(in srgb, var(--ink, #000) 78%, transparent);
     50}
     51.re-editor a { color: var(--accent, #06c); }
     52.re-editor.re-drop { border-color: var(--accent, #06c); border-style: dashed; background: color-mix(in srgb, var(--accent, #06c) 6%, transparent); }
    2453
    25 .re-foot { display: flex; align-items: center; gap: .6rem; justify-content: flex-end; }
     54/* ── Footer: language + send ───────────────────────────────────────────── */
     55.re-foot { display: flex; align-items: center; gap: .6rem; }
     56.re-foot .re-send { margin-left: auto; }
    2657.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;
     58  font: inherit; font-size: .82rem; padding: .32rem .5rem; border-radius: 8px;
     59  border: 1px solid var(--rule, color-mix(in srgb, var(--ink, #000) 16%, transparent));
     60  background: transparent; color: inherit; max-width: 11rem;
    3061}
    3162
    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); }
     63/* ── Mentions bar (u02): removable partner chips ───────────────────────── */
     64.re-mentions { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
     65.re-mentions-label { font-size: .76rem; text-transform: uppercase; letter-spacing: .03em; color: color-mix(in srgb, var(--ink, #000) 50%, transparent); }
    3566.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);
     67  display: inline-flex; align-items: center; gap: .1rem;
     68  padding: .12rem .2rem .12rem .5rem; border-radius: 999px; font-size: .78rem; line-height: 1.5;
     69  background: color-mix(in srgb, var(--accent, #06c) 12%, transparent);
     70  border: 1px solid color-mix(in srgb, var(--accent, #06c) 28%, transparent);
    4071  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    4172}
    42 .re-mention-del { border: none; background: none; color: inherit; font-size: 1rem; line-height: 1; cursor: pointer; padding: 0 .25rem; }
     73.re-mention-del { display: inline-flex; align-items: center; justify-content: center; width: 1.2rem; height: 1.2rem; border: none; background: none; color: inherit; opacity: .65; font-size: 1rem; line-height: 1; cursor: pointer; }
     74.re-mention-del:hover { opacity: 1; }
    4375
    44 /* Media attachments (chips under the editor). */
     76/* ── Media attachment chips (while composing) ──────────────────────────── */
    4577.re-attachments { display: flex; flex-wrap: wrap; gap: .4rem; }
    4678.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);
     79  display: inline-flex; align-items: center; gap: .4rem;
     80  padding: .25rem .3rem .25rem .5rem; border-radius: 10px; font-size: .78rem;
     81  background: var(--paper-2, color-mix(in srgb, var(--ink, #000) 7%, transparent));
     82  border: 1px solid var(--rule, color-mix(in srgb, var(--ink, #000) 12%, transparent));
    5083  max-width: 100%; overflow: hidden;
    5184}
    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; }
     85.re-att img { width: 40px; height: 40px; object-fit: cover; border-radius: 7px; display: block; }
     86.re-att-del { display: inline-flex; align-items: center; justify-content: center; width: 1.3rem; height: 1.3rem; border: none; background: none; color: inherit; opacity: .65; font-size: 1.05rem; line-height: 1; cursor: pointer; }
     87.re-att-del:hover { opacity: 1; }
     88.re-att-busy { opacity: .7; }
     89.re-att-err { background: color-mix(in srgb, #c00 16%, transparent); border-color: color-mix(in srgb, #c00 35%, transparent); }
    5690
    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; }
     91/* ── Media on a sent reply in the thread (fedi-node) ───────────────────── */
     92.re-reply-media { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
     93.re-reply-media img { max-width: min(260px, 100%); max-height: 260px; border-radius: 12px; display: block; }
    6094.re-reply-media audio { max-width: 100%; }
    61 .re-reply-media video { max-width: min(320px, 100%); border-radius: 10px; }
     95.re-reply-media video { max-width: min(320px, 100%); border-radius: 12px; }
    6296
    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 }
     97/* ── Full-screen compose (mobile). JS toggles .re-full on the form. ────── */
     98.re-head { display: flex; align-items: center; gap: .6rem; padding-bottom: .2rem; border-bottom: 1px solid var(--rule, color-mix(in srgb, var(--ink, #000) 12%, transparent)); }
     99.re-head-title { flex: 1; text-align: center; font-size: .95rem; font-weight: 600; }
     100.re-cancel { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: none; background: none; color: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer; border-radius: 8px; }
     101@media (hover: hover) { .re-cancel:hover { background: var(--paper-2, color-mix(in srgb, var(--ink, #000) 8%, transparent)); } }
     102
    70103.re-form.re-full {
    71104  /* Above the bottom tab bar (1050) and the profile/audio sheets (1100). */
    72105  position: fixed; inset: 0; z-index: 1200;
    73   background: var(--paper, #fff); padding: .8rem .9rem;
     106  background: var(--paper, #fff); padding: .8rem .9rem; gap: .55rem;
    74107  padding-top: calc(.8rem + env(safe-area-inset-top));
    75108  padding-bottom: calc(.8rem + env(safe-area-inset-bottom));
    76   gap: .6rem;
    77109}
    78110.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; }
     111.re-form.re-full .re-editor { flex: 1; min-height: 0; overflow-y: auto; border: none; box-shadow: none; padding: .4rem .1rem; }
     112.re-form.re-full .re-editor:focus { border: none; box-shadow: none; }
    81113.re-form.re-full .re-send { display: none; }         /* send lives in the top bar */
    82114.re-form.re-full .re-foot { justify-content: flex-start; }

  • src/assets/js/reply-editor.js

    re9c9ae1 rff3b8ce  
    107107      }
    108108    });
     109
     110    // Reflect the current formatting on the toolbar (bold/italic/list active),
     111    // like the post editor, while the caret is inside this editor.
     112    function syncToolbar() {
     113      if (document.activeElement !== ed) return;
     114      var map = { bold: 'bold', italic: 'italic', list: 'insertUnorderedList' };
     115      bar.querySelectorAll('button[data-cmd]').forEach(function (b) {
     116        var c = map[b.getAttribute('data-cmd')];
     117        if (!c) return;
     118        var on = false; try { on = document.queryCommandState(c); } catch (e) { on = false; }
     119        b.classList.toggle('is-active', on);
     120      });
     121    }
     122    document.addEventListener('selectionchange', syncToolbar);
     123    ed.addEventListener('keyup', syncToolbar);
     124    ed.addEventListener('mouseup', syncToolbar);
     125
    109126    if (fileInput) fileInput.addEventListener('change', function () {
    110127      uploadFiles(fileInput.files);

  • src/views/partials/reply-editor.ejs

    re9c9ae1 rff3b8ce  
    5353  </div>
    5454  <div class="re-toolbar" role="toolbar" aria-label="<%= t('re.title') %>" hidden>
    55     <button type="button" data-cmd="bold" title="<%= t('re.bold') %>" aria-label="<%= t('re.bold') %>"><b>B</b></button>
    56     <button type="button" data-cmd="italic" title="<%= t('re.italic') %>" aria-label="<%= t('re.italic') %>"><i>I</i></button>
    57     <button type="button" data-cmd="link" title="<%= t('re.link') %>" aria-label="<%= t('re.link') %>">🔗</button>
    58     <button type="button" data-cmd="list" title="<%= t('re.list') %>" aria-label="<%= t('re.list') %>">•≡</button>
    59     <button type="button" data-cmd="quote" title="<%= t('re.quote') %>" aria-label="<%= t('re.quote') %>">❝</button>
     55    <button type="button" data-cmd="bold" title="<%= t('re.bold') %>" aria-label="<%= t('re.bold') %>"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 4h8a4 4 0 0 1 0 8H6z"/><path d="M6 12h9a4 4 0 0 1 0 8H6z"/></svg></button>
     56    <button type="button" data-cmd="italic" title="<%= t('re.italic') %>" aria-label="<%= t('re.italic') %>"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="19" y1="4" x2="10" y2="4"/><line x1="14" y1="20" x2="5" y2="20"/><line x1="15" y1="4" x2="9" y2="20"/></svg></button>
     57    <button type="button" data-cmd="link" title="<%= t('re.link') %>" aria-label="<%= t('re.link') %>"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg></button>
     58    <button type="button" data-cmd="list" title="<%= t('re.list') %>" aria-label="<%= t('re.list') %>"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="9" y1="6" x2="20" y2="6"/><line x1="9" y1="12" x2="20" y2="12"/><line x1="9" y1="18" x2="20" y2="18"/><circle cx="4.5" cy="6" r="1.2"/><circle cx="4.5" cy="12" r="1.2"/><circle cx="4.5" cy="18" r="1.2"/></svg></button>
     59    <button type="button" data-cmd="quote" title="<%= t('re.quote') %>" aria-label="<%= t('re.quote') %>"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 21c3 0 7-1 7-8V5c0-1.25-.75-2-2-2H4c-1.25 0-2 .75-2 2v6c0 1.25.75 2 2 2h2.5C6 17.5 4 19 3 19v2z"/><path d="M14 21c3 0 7-1 7-8V5c0-1.25-.75-2-2-2h-4c-1.25 0-2 .75-2 2v6c0 1.25.75 2 2 2h2.5c-.5 4.5-2.5 6-3.5 6v2z"/></svg></button>
    6060    <% if (!_reNoAttach) { %>
    61       <button type="button" data-cmd="attach" title="<%= t('re.attach') %>" aria-label="<%= t('re.attach') %>">📎</button>
     61      <span class="re-toolbar-sep" aria-hidden="true"></span>
     62      <button type="button" data-cmd="attach" title="<%= t('re.attach') %>" aria-label="<%= t('re.attach') %>"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg></button>
    6263      <input type="file" class="re-file" accept="image/*,audio/*,video/*" multiple hidden>
    6364    <% } %>
Note: See TracChangeset for help on using the changeset viewer.