From fda681331ae3de5abee04042caed994954e1b705 Mon Sep 17 00:00:00 2001 From: Adam Soltys Date: Sun, 13 Sep 2026 09:53:45 -0700 Subject: See the post before you post it. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit A draft is written as plain text but doesn't arrive as plain text: a URL ending in .jpg becomes a picture, a youtu.be link becomes a player, a nostr: reference becomes the note it points at, an npub becomes a name. The only way to find out how yours would land was to send it. The eye beside the paperclip — on the composer and on a reply — opens a preview. It runs the draft through noteBody, the very renderer the feed uses, so this isn't a lookalike of the real thing: it IS the real thing, in a dashed frame with a PREVIEW label so it can never be mistaken for the post itself. It follows the draft live while it's open (and only while it's open — a render per keystroke is not free). Attaching a picture opens it by itself. Showing you what you attached is the answer to the question attaching it raises, and it costs no tap. tools/compose-preview-test.js covers both the composer and a reply: the picture renders rather than sitting there as a URL, the YouTube link becomes a player, the preview tracks typing, and it puts itself away. Co-Authored-By: Claude Opus 5 (1M context) Claude-Session: https://claude.ai/code/session_019mrt228Upn9nNCwGixzSLx --- src/features/messages.js | 51 +++++++++++++++++++++++++++++++++++++++++++----- src/i18n.js | 4 ++++ src/style.css | 13 ++++++++++++ 3 files changed, 63 insertions(+), 5 deletions(-) (limited to 'src') diff --git a/src/features/messages.js b/src/features/messages.js index 6cb3322..667c516 100644 --- a/src/features/messages.js +++ b/src/features/messages.js @@ -3464,12 +3464,16 @@ export function messagesFeature(ctx) { const row = (ev) => noteRow(ev.pubkey, ev, displayName(ev.pubkey), { open: false, focus: ev.id === s.focusId && ev.id !== c.rootId }); // The reply box sits INLINE, right under the note it answers — it used // to live at the bottom of the thread, where nobody scrolled to find it. - const replyBox = () => h('div', { class: 'row', style: 'gap:8px;align-items:center;padding:2px 0 10px' }, + const replyBox = () => h('div', { class: 'col', style: 'gap:8px;padding:2px 0 10px' }, + s.preview ? draftPreview(s.draft) : null, + h('div', { class: 'row', style: 'gap:8px;align-items:center' }, h('input', { type: 'text', class: 'grow thread-reply-input', placeholder: t('threadReplyHint'), value: s.draft || '', - onInput: (e) => { s.draft = e.target.value; }, - onKeydown: (e) => { if (e.key === 'Enter') e.target.parentElement.querySelector('.thread-reply-send')?.click(); }, + // a render per keystroke only while the preview is open; the morph + // leaves a focused field alone, so this can't fight the typing + onInput: (e) => { s.draft = e.target.value; if (s.preview) render(); }, + onKeydown: (e) => { if (e.key === 'Enter') e.target.closest('.col').querySelector('.thread-reply-send')?.click(); }, }), // A reply can carry a picture too — same upload, same imeta tag, same // paperclip. The URL lands in the draft, which is what every client @@ -3487,9 +3491,11 @@ export function messagesFeature(ctx) { s.draft = ((s.draft || '').replace(/\s+$/, '') + ' ' + url).trim(); const inp = document.querySelector('.thread-reply-input'); if (inp) inp.value = s.draft; + s.preview = true; // same as the composer: show what was attached }); }, }), + previewBtn(!!s.preview, () => { s.preview = !s.preview; render(); }), h('button', { class: 'btn-primary thread-reply-send', disabled: !!s.sending || !!ui.postUploading, onClick: async () => { @@ -3508,7 +3514,7 @@ export function messagesFeature(ctx) { } catch (e) { if (!e.silent) toast(e.message); } s.sending = false; render(); }, - }, s.sending ? h('span', { class: 'spinner sm' }) : t('threadReplySend'))); + }, s.sending ? h('span', { class: 'spinner sm' }) : t('threadReplySend')))); // rows with the reply box slotted under the focused note (the root when // nothing narrower is focused; appended at the end if the focused note // hasn't loaded yet, so the box never disappears entirely) @@ -3990,8 +3996,34 @@ export function messagesFeature(ctx) { const next = (cur ? cur + '\n' : '') + url; ui.profCompose = next; setDraft(POST_DRAFT, next); + // you just attached a picture; showing it IS the answer to the question + // attaching one raises + ui.postPreview = true; }); const CLIP = ''; + const EYE = ''; + + // ---- draft preview -------------------------------------------------------- + // A post is written as plain text, but it doesn't ARRIVE as plain text: a + // URL ending in .jpg becomes a picture, a youtu.be link becomes a player, a + // nostr: reference becomes the note it points at, an npub becomes a name. + // You could only find out by posting. This runs the draft through noteBody + // — the very renderer the feed uses — so the preview is not a lookalike of + // the real thing, it IS the real thing. + function draftPreview(text) { + const body = String(text || '').trim(); + return h('div', { class: 'draft-preview' }, + h('div', { class: 'draft-preview-tag' }, t('composePreviewTag')), + body + ? h('div', { class: 'note-text', style: 'white-space:pre-wrap;overflow-wrap:anywhere' }, ...noteBody(body)) + : h('div', { class: 'small faint' }, t('composePreviewEmpty'))); + } + const previewBtn = (on, toggle) => h('button', { + class: 'attach-btn' + (on ? ' on' : ''), + title: on ? t('composePreviewHide') : t('composePreview'), + 'aria-label': on ? t('composePreviewHide') : t('composePreview'), + onClick: toggle, + }, h('span', { style: 'display:flex', html: EYE })); function postComposer() { if (ui.profCompose == null && !draftFor(POST_DRAFT)) return null; const text = composeText(); @@ -4000,8 +4032,16 @@ export function messagesFeature(ctx) { rows: '3', placeholder: t('profComposePh'), style: 'font-family:var(--sans);min-height:64px', value: text, - onInput: (ev) => { ui.profCompose = ev.target.value; setDraft(POST_DRAFT, ev.target.value); }, + onInput: (ev) => { + ui.profCompose = ev.target.value; + setDraft(POST_DRAFT, ev.target.value); + // only while the preview is open — otherwise typing costs a render + // per keystroke for nothing. The morph never rewrites a focused + // field, so this can't fight the typing. + if (ui.postPreview) render(); + }, }), + ui.postPreview ? draftPreview(text) : null, h('div', { class: 'row gap6' }, h('button', { class: 'btn-primary grow', disabled: !!ui.postUploading, onClick: async () => { const body = composeText().trim(); @@ -4025,6 +4065,7 @@ export function messagesFeature(ctx) { class: 'attach-btn', title: t('feedAttach'), 'aria-label': t('feedAttach'), disabled: !!ui.postUploading, onClick: () => document.getElementById('post-file')?.click(), }, ui.postUploading ? h('span', { class: 'spinner sm' }) : h('span', { style: 'display:flex', html: CLIP })) : null, + previewBtn(!!ui.postPreview, () => { ui.postPreview = !ui.postPreview; render(); }), h('input', { type: 'file', id: 'post-file', accept: 'image/*,video/*', style: 'display:none', onChange: async (e) => { const f = e.target.files && e.target.files[0]; e.target.value = ''; await attachMedia(f); }, diff --git a/src/i18n.js b/src/i18n.js index 6a46823..5ec5986 100644 --- a/src/i18n.js +++ b/src/i18n.js @@ -715,6 +715,10 @@ const STR = { arkLnPaidTitle: 'Paid!', or: 'or', nlSignIn: 'Sign in', + composePreview: 'Preview', + composePreviewHide: 'Hide preview', + composePreviewTag: 'Preview', + composePreviewEmpty: 'Nothing to preview yet.', onbWelcomeTitle: 'Welcome to coinos', onbWelcomeBody: 'Bitcoin you actually hold. Your wallet is twelve words — nobody else ever has them, and they work in any wallet, anywhere.', onbStart: 'Create a new wallet', diff --git a/src/style.css b/src/style.css index c9b4368..fc25801 100644 --- a/src/style.css +++ b/src/style.css @@ -598,6 +598,19 @@ html.no-scroll { overflow: hidden; scrollbar-gutter: auto; } .quote-card.clickable { cursor: pointer; } .quote-card.clickable:hover { border-color: var(--line-strong); } .quote-loading { flex-direction: row; align-items: center; gap: 8px; } +/* What a draft will look like once it's out there. Framed and labelled, so + it can hold real post content — pictures, players, quoted notes — without + ever being mistaken for the post itself. */ +.draft-preview { + border: 1px dashed var(--line-strong); border-radius: 10px; + padding: 10px 12px; background: var(--surface2); + display: flex; flex-direction: column; gap: 6px; +} +.draft-preview-tag { + font-size: 11px; font-weight: 650; letter-spacing: .04em; + text-transform: uppercase; color: var(--faint); +} +.attach-btn.on { color: var(--accent-ink); border-color: var(--accent); } .quote-card .note-text { font-size: 14px; } .quote-name { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .quote-card .note-img { max-height: 220px; } -- cgit v1.2.3