Changeset feced2c in Klonkt for src/assets/css/reply-editor.css

Timestamp:

07/19/2026 05:25:26 PM (7 weeks ago)

Author:

Robin <roboburr@…>

Branches:

main

Children:

5190152

Parents:

33e1dbd

git-author:

Robin <roboburr@…> (07/19/2026 05:24:58 PM)

git-committer:

Robin <roboburr@…> (07/19/2026 05:25:26 PM)

Message:

Feature: media in replies — rich replies phase 2 (klonkt-demo-c7f)

Drop, paste or pick images/audio/video in the reply editor; they upload, show
as removable chips, travel as AS2 attachments on the federated Note, and render
in the thread.

• POST /posts/upload-reply-media (requireSiteManager): image/audio/video by extension AND mimetype, stored as-is under /media/reply-media/ (no transcode; a reply attachment is not a track), 32MB cap, returns {url, mediaType, name}.
• Editor: paperclip button + hidden file input (the mobile path), paste-files and drag/drop handlers, busy/error chips, image thumbnails, max 4, hidden attachments JSON field. Media-only submit allowed (text no longer required when something is attached).
• deliverReply({attachments}): re-validates server-side — own /media/ paths only (the upload route is the sole producer, remote URLs rejected), image|audio|video mimetypes, capped at 4; stored as JSON on ap_outbox (additive column). Dedup guard now includes attachments so two media-only replies to the same parent are distinct from each other but double-submits still dedup.
• buildNote reply branch: attachment array with Image/Audio/Video types and absolute URLs. getInteractions passes media through; fedi-node renders it (img/audio/video) for visitors too, loading the stylesheet when the owner-only editor is not on the page.

3 new tests (foreign-URL and type rejection, typed absolute Note attachments,
media-only allowed, only-invalid rejected); 91 green. Browser-verified end to
end: real upload via the endpoint, paste-event -> chip with thumbnail ->
submit -> ap_outbox row with content+language+attachments -> media rendered in
the thread -> /ap/notes/<id> serves the typed absolute attachment.

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

File:

• src/assets/css/reply-editor.css (modified) (1 diff)

src/assets/css/reply-editor.css

@@ -30 +30 @@
 }
 
+/* Media attachments (chips under the editor). */
+.re-attachments { display: flex; flex-wrap: wrap; gap: .4rem; }
+.re-att {
+  display: inline-flex; align-items: center; gap: .35rem;
+  padding: .25rem .4rem; border-radius: 8px; font-size: .8rem;
+  background: color-mix(in srgb, var(--ink, #000) 7%, transparent);
+  max-width: 100%; overflow: hidden;
+}
+.re-att img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; display: block; }
+.re-att-del { border: none; background: none; color: inherit; font-size: 1rem; line-height: 1; cursor: pointer; padding: 0 .15rem; }
+.re-att-err { background: color-mix(in srgb, #c00 18%, transparent); }
+.re-editor.re-drop { border-color: var(--accent, #06c); border-style: dashed; }
+
+/* Media on a sent reply in the thread (fedi-node). */
+.re-reply-media { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .4rem; }
+.re-reply-media img { max-width: min(260px, 100%); max-height: 260px; border-radius: 10px; display: block; }
+.re-reply-media audio { max-width: 100%; }
+.re-reply-media video { max-width: min(320px, 100%); border-radius: 10px; }
+
 /* Full-screen compose (mobile). JS toggles .re-full on the form. */
 .re-head { display: flex; align-items: center; gap: .6rem; }