Changeset 33e1dbd in Klonkt for src/views

Timestamp:

07/19/2026 05:08:32 PM (7 weeks ago)

Author:

Robin <roboburr@…>

Branches:

main

Children:

feced2c

Parents:

2d66d66

git-author:

Robin <roboburr@…> (07/19/2026 05:08:12 PM)

git-committer:

Robin <roboburr@…> (07/19/2026 05:08:32 PM)

Message:

Feature: rich replies phase 1 — shared editor, mobile full-screen, language (klonkt-demo-c7f)

Replying to fediverse comments used bare textareas in four places. This adds
ONE shared, progressively-enhanced editor component and mounts it on the two
new-reply spots (inline thread reply in fedi-node, and authorize_interaction);
the edit forms and prutter follow with the media phase.

• partials/reply-editor.ejs + assets/js/reply-editor.js + css: renders a plain textarea that works without JS; the JS upgrades it to a contenteditable with a small toolbar (bold/italic/link/list/quote) and a language select. Assets load once per render even when the partial repeats per comment.
• Mobile (max-width 700px): focusing the editor opens a FULL-SCREEN compose overlay (top bar with cancel and send, scroll lock), the right pattern on phones. Two real-world fixes came out of browser verification: site CSS gives thread forms display:contents, which collapses the form box and breaks both flex and position:fixed (now overridden with !important); and the overlay sits at z-index 1200, above the bottom tab bar (1050) and sheets (1100).
• Server: fedi-reply and authorize_interaction accept content (editor HTML) + language next to text. deliverReply sanitizes the HTML (HtmlSanitizerService), runs the same mention/hashtag/URL enrichment as the plain path, and places the parent mention inline in the first paragraph (own paragraph before block content, merged paragraph around bare inline text). Plain-text path unchanged (no-JS fallback).
• ap_outbox.language (additive) -> contentMap on the outgoing Note.

5 new tests (sanitize, mention placement, plain path unchanged, empty-html
reject, bogus language dropped); 88 green. Live-verified in the browser:
desktop upgrade, mobile full-screen (enter/cancel/scroll-lock), and a real
submit landing in ap_outbox with markup + language intact.

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

Location:

src/views

Files:

• pages/authorize-interaction.ejs (modified) (1 diff)
• partials/fedi-node.ejs (modified) (1 diff)
• partials/reply-editor.ejs (added)

src/views/pages/authorize-interaction.ejs

@@ -189 +189 @@
     <p class="auth-interact-or"><%= t('fedi.or_reply') %></p>
     <p class="auth-interact-where">💬 <%= t('fedi.reply_where') %></p>
-    <form method="post" action="/authorize_interaction" class="auth-interact-form">
-      <input type="hidden" name="uri" value="<%= uri %>">
-      <textarea name="text" rows="4" required placeholder="<%= t('fedi.reply_ph') %>"></textarea>
-      <div class="auth-interact-actions">
-        <button type="submit" class="btn"><%= t('fedi.send') %></button>
-        <a href="<%= uri %>" class="btn"><%= t('comments.cancel') %></a>
-      </div>
-    </form>
+    <div class="auth-interact-form">
+      <%- include('../partials/reply-editor', {
+        action: '/authorize_interaction',
+        hiddenFields: [{ name: 'uri', value: uri }],
+        placeholder: t('fedi.reply_ph'),
+        submitLabel: t('fedi.send'),
+        rows: 4,
+      }) %>
+      <div class="auth-interact-actions"><a href="<%= uri %>" class="btn"><%= t('comments.cancel') %></a></div>
+    </div>
     <p class="auth-interact-note"><%= t('fedi.remote_as', { site: siteTitle }) %></p>
     <details class="auth-report">

src/views/partials/fedi-node.ejs

@@ -31 +31 @@
       <details class="fedi-owner-reply">
         <summary class="fedi-cact fedi-cact-reply" title="<%= t('fedi.remote_reply_short') %>" aria-label="<%= t('fedi.remote_reply_short') %>"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 17 4 12 9 7"/><path d="M20 18v-2a4 4 0 0 0-4-4H4"/></svg></summary>
-        <form method="post" action="<%= _base %>/posts/<%= postSlug %>/fedi-reply" class="comment-reply-form">
-          <input type="hidden" name="interaction_id" value="<%= n.id %>">
-          <textarea name="text" rows="2" required placeholder="<%= t('fedi.reply_ph') %>"></textarea>
-          <div class="comment-reply-form-actions">
-            <button type="submit" class="btn"><%= t('fedi.send') %></button>
-          </div>
-        </form>
+        <%- include('reply-editor', {
+          action: _base + '/posts/' + postSlug + '/fedi-reply',
+          hiddenFields: [{ name: 'interaction_id', value: n.id }],
+          placeholder: t('fedi.reply_ph'),
+          submitLabel: t('fedi.send'),
+          rows: 2,
+        }) %>
       </details>
       <%# Owner moderation: report to their instance + remove (tombstoned: never comes back via re-delivery or thread-crawl). %>