From bd215cbd2e6f46870cb69729673c3e5218f4ee86 Mon Sep 17 00:00:00 2001 From: Adam Soltys Date: Mon, 3 Aug 2026 23:17:33 -0700 Subject: The chat window fits the screen, and the header stops asking questions MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The message log had a fixed 62vh height, so the card was head + panels + log + composer tall and the input fell off the bottom of the screen. The card is now sized to the viewport and the log is the only part that flexes: opening the invite or member panel shrinks the scroll area instead of pushing the composer out of reach. Three header changes, all the same idea — don't show a control for a choice nobody is making: '+' becomes 'Add person', because a plus sign doesn't say what it adds. A lone channel isn't named at all. '#general' next to a composer that says 'Message #general' points at a choice of one; several channels become a select, which is what a choice looks like. The new-channel field hides behind a 'New channel' button. Sitting open right after you create a community, it reads as something you're supposed to fill in. tools/chat-layout-test.js holds the line at three viewport sizes with both panels open, and covers the header behaviour through actually adding a second channel. Co-Authored-By: Claude Opus 5 Claude-Session: https://claude.ai/code/session_01Wvj4aoeMZwA7VUGdJP9Swi --- src/features/messages.js | 44 +++++++++------ src/i18n.js | 3 ++ src/style.css | 23 +++++--- tools/chat-layout-test.js | 133 ++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 181 insertions(+), 22 deletions(-) create mode 100644 tools/chat-layout-test.js diff --git a/src/features/messages.js b/src/features/messages.js index ed16f76..8fbc27a 100644 --- a/src/features/messages.js +++ b/src/features/messages.js @@ -462,6 +462,7 @@ export function messagesFeature(ctx) { const ok = await publishOn(room.relays, wrap); if (!ok) { toast(t('msgSendFailed')); return; } ui.msgNewChannel = ''; + ui.msgChannelPanel = false; // the field has done its job — put it away toast('#' + name.replace(/^#/, '')); } @@ -1494,13 +1495,14 @@ export function messagesFeature(ctx) { memberCount ? t('msgMembers', { n: memberCount }) : t('msgEncrypted'), onlineCount ? h('span', { class: 'online-count' }, ' · ', t('msgNOnline', { n: onlineCount })) : null))), h('div', { class: 'row gap6', style: 'align-items:center' }, + // One channel needs no label — naming it only asks people to notice a + // choice they don't have. Several become a picker. chans.length > 1 - ? h('div', { class: 'seg' }, chans.map((c) => - h('button', { - class: c.id === ch?.id ? 'active' : '', - onClick: () => { ui.msgChannel = c.id; ui.msgStick = true; subChannel(room, c.id); render(); }, - }, '#' + c.name))) - : h('div', { class: 'tag' }, '#' + (ch ? ch.name : '')), + ? h('select', { + class: 'chan-pick', + onChange: (e) => { ui.msgChannel = e.target.value; ui.msgStick = true; subChannel(room, e.target.value); render(); }, + }, chans.map((c) => h('option', { value: c.id, selected: c.id === ch?.id }, '#' + c.name))) + : null, h('button', { class: 'iconbtn bell' + (roomNotify(jm.community_id) ? ' on' : ''), title: roomNotify(jm.community_id) ? t('msgNotifyOn') : t('msgNotifyOff'), @@ -1510,9 +1512,9 @@ export function messagesFeature(ctx) { : '', }), h('button', { - class: 'iconbtn', title: t('msgInviteTitle'), + class: 'btn-sm', title: t('msgInviteTitle'), onClick: () => { ui.msgInvitePanel = !ui.msgInvitePanel; render(); }, - }, '+'))), + }, t('msgAddPerson')))), ui.msgInvitePanel ? invitePanel(room) : null, ui.msgMembers ? memberPanel(room, members) : null, h('div', { @@ -1524,7 +1526,7 @@ export function messagesFeature(ctx) { }, ...(ch ? messageRows(room, ch.id) : [])), ch ? typingLine(room, ch.id) : null, composer( - t('msgPlaceholder', { channel: ch ? ch.name : '' }), + chans.length > 1 ? t('msgPlaceholder', { channel: ch ? ch.name : '' }) : t('msgPlaceholderPlain'), () => ch && sendMessage(room, ch.id), () => ch && ping(room, ch.id, TYPING))); } @@ -1580,14 +1582,24 @@ export function messagesFeature(ctx) { class: 'btn-sm', onClick: () => { sendDirectInvite(room, ui.msgInviteTo); ui.msgInviteTo = ''; render(); }, }, t('msgSend'))), - // owners can add channels (an owner-signed control edition) + // Owners can add channels (an owner-signed control edition), but a naming + // field sitting open is a question nobody asked — it reads as something + // you're meant to fill in right after making a community. myPubkeys().includes(room.jm.owner) - ? h('div', { class: 'row gap6' }, - h('input', { - class: 'grow', type: 'text', placeholder: t('msgChannelPlaceholder'), maxlength: '64', - value: ui.msgNewChannel || '', onInput: (e) => { ui.msgNewChannel = e.target.value; }, - }), - h('button', { class: 'btn-sm', onClick: () => createChannel(room, ui.msgNewChannel) }, t('msgCreate'))) + ? (ui.msgChannelPanel + ? h('div', { class: 'row gap6' }, + h('input', { + class: 'grow', type: 'text', placeholder: t('msgChannelPlaceholder'), maxlength: '64', + value: ui.msgNewChannel || '', onInput: (e) => { ui.msgNewChannel = e.target.value; }, + onKeydown: (e) => { if (e.key === 'Enter') createChannel(room, ui.msgNewChannel); }, + }), + h('button', { class: 'btn-sm', onClick: () => createChannel(room, ui.msgNewChannel) }, t('msgCreate')), + h('button', { class: 'btn-ghost btn-sm', onClick: () => { ui.msgChannelPanel = false; render(); } }, t('cancel'))) + : h('div', { class: 'row' }, + h('button', { + class: 'btn-sm', + onClick: () => { ui.msgChannelPanel = true; render(); }, + }, t('msgNewChannel')))) : null, // leaving discards the keys on this identity — two taps, default community exempt builtin ? null : h('div', { class: 'row' }, diff --git a/src/i18n.js b/src/i18n.js index 428ccb0..b5a64af 100644 --- a/src/i18n.js +++ b/src/i18n.js @@ -152,8 +152,11 @@ const STR = { msgSend: 'Send', msgEmpty: 'No messages yet — say hi!', msgPlaceholder: 'Message #{channel}', + msgPlaceholderPlain: 'Message…', msgMembers: '{n} members', msgEncrypted: 'End-to-end encrypted', + msgAddPerson: 'Add person', + msgNewChannel: 'New channel', msgAdmin: 'admin', msgEdited: '(edited)', msgDelete: 'Delete message', diff --git a/src/style.css b/src/style.css index 759ee61..5d98aa1 100644 --- a/src/style.css +++ b/src/style.css @@ -314,11 +314,21 @@ hr.divider { margin: 16px 0; } .sel-ico svg { display: block; } /* Messages — Concord community chat. */ -.chat-card { padding: 0; overflow: hidden; } -.chat-head { padding: 14px 16px 10px; border-bottom: 1px solid var(--line); } +/* The composer must never be below the fold. The card is sized to the + viewport and the message log is the only part that flexes, so opening the + invite or member panel shrinks the scroll area instead of pushing the input + off the bottom of the screen. The subtracted space is what sits around the + card: #app's padding plus the brand header and its gap. */ +.chat-card { + padding: 0; overflow: hidden; display: flex; flex-direction: column; + height: calc(100vh - 144px); max-height: calc(100vh - 144px); + height: calc(100dvh - 144px); max-height: calc(100dvh - 144px); + min-height: 320px; +} +.chat-head { padding: 14px 16px 10px; border-bottom: 1px solid var(--line); flex: 0 0 auto; } .chat-title { font-weight: 650; } .chat-log { - height: min(62vh, 640px); overflow-y: auto; padding: 12px 14px; + flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; background: var(--surface2); } .chat-row { display: flex; gap: 9px; align-items: flex-start; } @@ -361,7 +371,7 @@ hr.divider { margin: 16px 0; } } .chat-compose { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); - align-items: center; + align-items: center; flex: 0 0 auto; } .chat-compose input { flex: 1; min-width: 0; font: inherit; color: var(--ink); background: var(--paper); @@ -373,7 +383,7 @@ hr.divider { margin: 16px 0; } .chat-back { font-size: 22px; line-height: 1; padding: 2px 10px 4px; flex-shrink: 0; } .chat-thread-row { display: flex; gap: 10px; align-items: center; cursor: pointer; } .chat-preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } -.chat-invite { padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--surface2); } +.chat-invite { padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--surface2); flex: 0 0 auto; max-height: 40vh; overflow-y: auto; } .chat-invite input { font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--line-strong); border-radius: 9px; padding: 7px 10px; min-width: 0; } .chat-row.dm { justify-content: flex-start; } .chat-row.dm.mine { justify-content: flex-end; } @@ -401,7 +411,7 @@ hr.divider { margin: 16px 0; } .typing-dots i:nth-child(2) { animation-delay: .15s; } .typing-dots i:nth-child(3) { animation-delay: .3s; } @keyframes typing-bounce { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } } -.chat-members { max-height: 260px; overflow-y: auto; border-bottom: 1px solid var(--line); } +.chat-members { flex: 0 0 auto; max-height: min(260px, 40vh); overflow-y: auto; border-bottom: 1px solid var(--line); } .ava-wrap { position: relative; display: inline-flex; flex-shrink: 0; } .ava-wrap.online::after { content: ''; position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; @@ -557,3 +567,4 @@ body::after { .balance-move .amt-field { flex: 1 1 150px; } .balance-move .input-group > button { flex: 1 1 150px; } .chat-signer-off { padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface2); } +.chan-pick { width: auto; min-width: 0; padding: 6px 32px 6px 10px; font-size: 13px; font-weight: 600; border-radius: 9px; background-position: right 10px center; } diff --git a/tools/chat-layout-test.js b/tools/chat-layout-test.js new file mode 100644 index 0000000..ef86291 --- /dev/null +++ b/tools/chat-layout-test.js @@ -0,0 +1,133 @@ +// You must always be able to type. The chat card is sized to the viewport and +// only the message log flexes, so the header, an open invite or member panel, +// and a long backlog all shrink the scroll area rather than pushing the +// composer below the fold. +// +// Run: bun tools/chat-layout-test.js +import puppeteer from 'puppeteer-core'; +import { generateMnemonic } from '@scure/bip39'; +import { wordlist } from '@scure/bip39/wordlists/english'; +import { buildHtml } from '../build.js'; + +const sleep = (ms) => new Promise((r) => setTimeout(r, ms)); +let ok = true; +const check = (n, c, d = '') => { console.log(` ${c ? '✓' : '✗'} ${n}${d ? ' — ' + d : ''}`); if (!c) ok = false; }; + +const html = await buildHtml({ minify: true, pwa: false }); +const server = Bun.serve({ port: 5229, fetch: () => new Response(html, { headers: { 'content-type': 'text/html' } }) }); +const browser = await puppeteer.launch({ executablePath: '/usr/bin/google-chrome', headless: 'new', args: ['--no-sandbox'] }); +const page = await browser.newPage(); +const click = (sel, t) => page.evaluate((s, x) => { const e = [...document.querySelectorAll(s)].find((n) => n.textContent.trim().toLowerCase().includes(x.toLowerCase())); if (e) { e.click(); return true; } return false; }, sel, t); +const setInput = (sel, v) => page.evaluate((s, val) => { const e = document.querySelector(s); if (!e) return false; e.value = val; e.dispatchEvent(new Event('input', { bubbles: true })); return true; }, sel, v); +const waitText = async (x, ms = 25000) => { for (let i = 0; i < ms / 250; i++) { if ((await page.evaluate(() => document.body.innerText)).toLowerCase().includes(x.toLowerCase())) return true; await sleep(250); } return false; }; + +// Is the composer fully inside the window, without scrolling? +const composerFits = () => page.evaluate(() => { + const c = document.querySelector('.chat-compose'); + if (!c) return { found: false }; + const r = c.getBoundingClientRect(); + return { found: true, top: Math.round(r.top), bottom: Math.round(r.bottom), vh: window.innerHeight, fits: r.bottom <= window.innerHeight && r.top >= 0 }; +}); + +try { + for (const vp of [{ width: 1280, height: 800, name: 'laptop' }, { width: 390, height: 844, name: 'phone' }, { width: 1024, height: 600, name: 'short laptop' }]) { + console.log(`\n[${vp.name} ${vp.width}x${vp.height}]`); + await page.setViewport({ width: vp.width, height: vp.height }); + if (vp.name === 'laptop') { + await page.goto('http://localhost:5229/', { waitUntil: 'domcontentloaded' }); + await page.evaluate(() => localStorage.setItem('btc-wallet-network', 'regtest')); + await page.reload({ waitUntil: 'domcontentloaded' }); + await sleep(400); + await click('button', 'I already have a wallet'); + await sleep(300); + await click('button', 'Import existing'); + await sleep(300); + await page.waitForSelector('textarea'); + await page.type('textarea', generateMnemonic(wordlist)); + await click('button', 'Open wallet'); + await waitText('receive', 15000); + await page.evaluate(() => document.querySelector('.header-msgs')?.click()); + await sleep(800); + await click('button', 'Create'); + await sleep(300); + await setInput('input[placeholder*="name" i]', 'layout test'); + await sleep(200); + await page.evaluate(() => { const i = document.querySelector('input[placeholder*="name" i]'); const b = i && i.parentElement.querySelector('button'); if (b) b.click(); }); + await waitText('layout test', 25000); + await click('.item', 'layout test'); + await sleep(2000); + } + await sleep(600); + + let r = await composerFits(); + check('composer is on screen', r.found && r.fits, `bottom ${r.bottom} of ${r.vh}`); + + // the state from the report: the invite panel open above the log + await page.evaluate(() => { const b = [...document.querySelectorAll('.chat-head button')].find((e) => /add person/i.test(e.textContent)); if (b) b.click(); }); + await sleep(600); + const panelOpen = await page.$('.chat-invite'); + r = await composerFits(); + check('...and still on screen with the invite panel open', !!panelOpen && r.fits, `bottom ${r.bottom} of ${r.vh}`); + + // and with the member list open too + await page.evaluate(() => { const e = [...document.querySelectorAll('.chat-head .col')].find((n) => n.className.includes('clickable')); if (e) e.click(); }); + await sleep(600); + r = await composerFits(); + check('...and with the member list open as well', r.fits, `bottom ${r.bottom} of ${r.vh}`); + + // NB not asserting the page never scrolls: the footer legitimately sits + // below the fold. What matters is that the composer doesn't. + + // put it back for the next viewport + await page.evaluate(() => { const e = [...document.querySelectorAll('.chat-head .col')].find((n) => n.className.includes('clickable')); if (e) e.click(); }); + await sleep(300); + await page.evaluate(() => { const b = [...document.querySelectorAll('.chat-head button')].find((e) => /add person/i.test(e.textContent)); if (b) b.click(); }); + await sleep(300); + } + await page.setViewport({ width: 1280, height: 800 }); + await sleep(500); + await page.screenshot({ path: '/tmp/claude-1000/-home-adam-halwallet/11ef6049-3f7a-4687-a8e8-79c6f9403a6b/scratchpad/chat-layout.png' }); + + console.log('\n[the channel header]'); + const one = await page.evaluate(() => ({ + picker: !!document.querySelector('.chan-pick'), + named: document.body.innerText.includes('#general'), + placeholder: (document.querySelector('#msg-draft') || {}).placeholder, + })); + check('a single channel is not named', !one.picker && !one.named, JSON.stringify(one)); + check('and the composer says just "Message"', /^Message/.test(one.placeholder || '') && !/#/.test(one.placeholder || ''), one.placeholder); + + console.log('\n[adding a channel]'); + await page.evaluate(() => { const b = [...document.querySelectorAll('.chat-head button')].find((e) => /add person/i.test(e.textContent)); if (b) b.click(); }); + await sleep(600); + const gated = await page.evaluate(() => ({ + field: !!document.querySelector('input[placeholder*="channel" i]'), + button: [...document.querySelectorAll('.chat-invite button')].some((b) => /new channel/i.test(b.textContent)), + })); + check('the naming field is not just sitting there', !gated.field, JSON.stringify(gated)); + check('there is a New channel button instead', gated.button); + + await click('.chat-invite button', 'New channel'); + await sleep(500); + check('which reveals the field', !!(await page.$('input[placeholder*="channel" i]'))); + await setInput('input[placeholder*="channel" i]', 'random'); + await sleep(200); + await page.evaluate(() => { const i = document.querySelector('input[placeholder*="channel" i]'); const b = i && i.parentElement.querySelector('button'); if (b) b.click(); }); + + for (let i = 0; i < 60 && !(await page.$('.chan-pick')); i++) await sleep(500); + const two = await page.evaluate(() => { + const sel = document.querySelector('.chan-pick'); + return { picker: !!sel, tag: sel && sel.tagName, opts: sel ? [...sel.options].map((o) => o.textContent) : [], field: !!document.querySelector('input[placeholder*="channel" i]') }; + }); + check('two channels become a select', two.picker && two.tag === 'SELECT' && two.opts.length === 2, JSON.stringify(two.opts)); + check('and the naming field puts itself away', !two.field); + const r2 = await composerFits(); + check('composer still on screen', r2.fits, `bottom ${r2.bottom} of ${r2.vh}`); +} catch (e) { + check('run completed', false, e.message); +} finally { + await browser.close(); + server.stop(true); +} +console.log(ok ? '\n✅ the composer stays put' : '\n❌ failures above'); +process.exit(ok ? 0 : 1); -- cgit v1.2.3