// Tapping a face in the feed should land on a profile that is already // there: the bio, the banner and some of their posts painted in the first // frame, not half a second later once relays answer — which is what made // the page jump under your thumb. // // The bio and banner come free: the batched kind-0 fetch that named these // people in the feed downloaded their whole profile, so it is already in // hand. The posts come from the feed itself. // // Measured as the browser measures it — layout-shift entries after the tap. // // Run: bun tools/profile-open-test.js import puppeteer from 'puppeteer-core'; import { generateMnemonic } from '@scure/bip39'; import { wordlist } from '@scure/bip39/wordlists/english'; import { cacheKeyFor } from '../src/wallet.js'; import { buildHtml } from '../build.js'; import { SimplePool } from 'nostr-tools/pool'; 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; }; // Real people with real bios: pull recent posters, then keep only the ones // whose kind 0 actually carries an `about`, so "the bio painted" is a claim // that can be true. const pool = new SimplePool(); const RELAYS = ['wss://relay.primal.net', 'wss://nos.lol', 'wss://relay.damus.io']; const recent = await pool.querySync(RELAYS, { kinds: [1], limit: 150, since: Math.floor(Date.now() / 1000) - 7200 }, { maxWait: 8000 }).catch(() => []); const posters = [...new Set(recent.map((e) => e.pubkey))].slice(0, 40); const withBio = new Map(); for (const e of await pool.querySync(RELAYS, { kinds: [0], authors: posters }, { maxWait: 8000 }).catch(() => [])) { try { const m = JSON.parse(e.content); if ((m.display_name || m.name) && typeof m.about === 'string' && m.about.trim().length > 30) { const p = withBio.get(e.pubkey); if (!p || e.created_at > p.created_at) withBio.set(e.pubkey, e); } } catch {} } const authors = [...withBio.keys()]; const notes = recent.filter((e) => withBio.has(e.pubkey)); if (authors.length < 4 || notes.length < 6) { console.log(' ✗ not enough people with bios posting right now'); process.exit(1); } console.log(` ${authors.length} people with a real bio, ${notes.length} of their posts`); const html = await buildHtml({ minify: true, pwa: false }); const server = Bun.serve({ port: 5276, 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(); await page.evaluateOnNewDocument(() => { window.__shift = 0; window.__shiftOn = false; new PerformanceObserver((l) => { for (const e of l.getEntries()) if (!e.hadRecentInput && window.__shiftOn) window.__shift += e.value; }).observe({ type: 'layout-shift', buffered: true }); }); const click = (t) => page.evaluate((x) => { const e = [...document.querySelectorAll('button')].find((n) => n.textContent.trim().toLowerCase().includes(x)); if (e) { e.click(); return true; } return false; }, t); const waitText = async (x, ms = 25000) => { for (let i = 0; i < ms / 250; i++) { if ((await page.evaluate(() => document.body.innerText)).toLowerCase().includes(x)) return true; await sleep(250); } return false; }; try { await page.setViewport({ width: 390, height: 844 }); await page.goto('http://localhost:5276/', { waitUntil: 'domcontentloaded' }); await page.evaluate(() => localStorage.setItem('btc-wallet-network', 'regtest')); await page.reload({ waitUntil: 'domcontentloaded' }); await sleep(400); await click('create a new wallet'); await sleep(500); await click('to import'); await sleep(400); await page.waitForSelector('textarea'); const mn = generateMnemonic(wordlist); await page.type('textarea', mn); await click('open wallet'); await waitText('receive', 20000); const base = cacheKeyFor(mn + '\n'); await page.evaluate(([k, pks, ns]) => { localStorage.setItem(k + ':follows', JSON.stringify({ tags: pks.map((p) => ['p', p]), c: '', at: Math.floor(Date.now() / 1000) })); localStorage.setItem(k + ':feedNotes', JSON.stringify(ns)); }, [base, authors, notes.map((e) => ({ id: e.id, pubkey: e.pubkey, kind: 1, created_at: e.created_at, content: e.content.slice(0, 200), tags: [] }))]); await page.reload({ waitUntil: 'domcontentloaded' }); await waitText('receive', 20000); await page.evaluate(() => { const b = [...document.querySelectorAll('button')].find((e) => /message/i.test(e.getAttribute('aria-label') || '')); if (b) b.click(); }); await sleep(1000); await page.evaluate(() => { const e = [...document.querySelectorAll('.item')].find((n) => /feed/i.test(n.textContent)); if (e) e.click(); }); // let the feed settle completely — this test is about what happens AFTER await sleep(12000); // tap the first face whose person we know has a bio const target = await page.evaluate((pks) => { const rows = [...document.querySelectorAll('.notes-feed > .row')]; for (const r of rows) { const a = r.querySelector('.note-avatar'); if (!a) continue; window.__shiftOn = true; a.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true })); a.click(); return true; } return false; }, authors); check('a face in the feed opens a profile', target); // the very next frame: what is on the page? await page.evaluate(() => new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(r)))); const first = await page.evaluate(() => ({ npub: /npub1/.test(document.body.innerText), // the bio is the paragraph in the profile card, not a post bio: (document.querySelector('.card p') || {}).textContent || '', posts: document.querySelectorAll('.notes-feed > .row').length, })); check('the bio is there in the first frame', first.bio.trim().length > 20, first.bio ? first.bio.trim().slice(0, 48).replace(/\n/g, ' ') + '…' : 'blank'); check('...and so are some of their posts', first.posts > 0, first.posts + ' posts'); // and nothing jumps while the relays answer await sleep(7000); const shift = await page.evaluate(() => window.__shift); const after = await page.evaluate(() => document.querySelectorAll('.notes-feed > .row').length); // 0.1 is the browser's own "good" threshold for cumulative layout shift check('the page does not jump while it loads', shift < 0.1, 'layout shift ' + shift.toFixed(3)); check('the relay answer fills in behind it', after > 0, first.posts + ' posts on open, ' + after + ' after'); } finally { await browser.close(); server.stop(true); } console.log(ok ? '\n✅ the profile is already there when you land on it' : '\n❌ failed'); process.exit(ok ? 0 : 1); l */ .highlight .gd { color: #000; background-color: #FDD } /* Generic.Deleted */ .highlight .ge { font-style: italic } /* Generic.Emph */ .highlight .ges { font-weight: bold; font-style: italic } /* Generic.EmphStrong */ .highlight .gr { color: #A00 } /* Generic.Error */ .highlight .gh { color: #333 } /* Generic.Heading */ .highlight .gi { color: #000; background-color: #DFD } /* Generic.Inserted */ .highlight .go { color: #888 } /* Generic.Output */ .highlight .gp { color: #555 } /* Generic.Prompt */ .highlight .gs { font-weight: bold } /* Generic.Strong */ .highlight .gu { color: #666 } /* Generic.Subheading */ .highlight .gt { color: #A00 } /* Generic.Traceback */ .highlight .kc { color: #080; font-weight: bold } /* Keyword.Constant */ .highlight .kd { color: #080; font-weight: bold } /* Keyword.Declaration */ .highlight .kn { color: #080; font-weight: bold } /* Keyword.Namespace */ .highlight .kp { color: #080 } /* Keyword.Pseudo */ .highlight .kr { color: #080; font-weight: bold } /* Keyword.Reserved */ .highlight .kt { color: #888; font-weight: bold } /* Keyword.Type */ .highlight .m { color: #00D; font-weight: bold } /* Literal.Number */ .highlight .s { color: #D20; background-color: #FFF0F0 } /* Literal.String */ .highlight .na { color: #369 } /* Name.Attribute */ .highlight .nb { color: #038 } /* Name.Builtin */ .highlight .nc { color: #B06; font-weight: bold } /* Name.Class */ .highlight .no { color: #036; font-weight: bold } /* Name.Constant */ .highlight .nd { color: #555 } /* Name.Decorator */ .highlight .ne { color: #B06; font-weight: bold } /* Name.Exception */ .highlight .nf { color: #06B; font-weight: bold } /* Name.Function */ .highlight .nl { color: #369; font-style: italic } /* Name.Label */ .highlight .nn { color: #B06; font-weight: bold } /* Name.Namespace */ .highlight .py { color: #369; font-weight: bold } /* Name.Property */ .highlight .nt { color: #B06; font-weight: bold } /* Name.Tag */ .highlight .nv { color: #369 } /* Name.Variable */ .highlight .ow { color: #080 } /* Operator.Word */ .highlight .w { color: #BBB } /* Text.Whitespace */ .highlight .mb { color: #00D; font-weight: bold } /* Literal.Number.Bin */ .highlight .mf { color: #00D; font-weight: bold } /* Literal.Number.Float */ .highlight .mh { color: #00D; font-weight: bold } /* Literal.Number.Hex */ .highlight .mi { color: #00D; font-weight: bold } /* Literal.Number.Integer */ .highlight .mo { color: #00D; font-weight: bold } /* Literal.Number.Oct */ .highlight .sa { color: #D20; background-color: #FFF0F0 } /* Literal.String.Affix */ .highlight .sb { color: #D20; background-color: #FFF0F0 } /* Literal.String.Backtick */ .highlight .sc { color: #D20; background-color: #FFF0F0 } /* Literal.String.Char */ .highlight .dl { color: #D20; background-color: #FFF0F0 } /* Literal.String.Delimiter */ .highlight .sd { color: #D20; background-color: #FFF0F0 } /* Literal.String.Doc */ .highlight .s2 { color: #D20; background-color: #FFF0F0 } /* Literal.String.Double */ .highlight .se { color: #04D; background-color: #FFF0F0 } /* Literal.String.Escape */ .highlight .sh { color: #D20; background-color: #FFF0F0 } /* Literal.String.Heredoc */ .highlight .si { color: #33B; background-color: #FFF0F0 } /* Literal.String.Interpol */ .highlight .sx { color: #2B2; background-color: #F0FFF0 } /* Literal.String.Other */ .highlight .sr { color: #080; background-color: #FFF0FF } /* Literal.String.Regex */ .highlight .s1 { color: #D20; background-color: #FFF0F0 } /* Literal.String.Single */ .highlight .ss { color: #A60; background-color: #FFF0F0 } /* Literal.String.Symbol */ .highlight .bp { color: #038 } /* Name.Builtin.Pseudo */ .highlight .fm { color: #06B; font-weight: bold } /* Name.Function.Magic */ .highlight .vc { color: #369 } /* Name.Variable.Class */ .highlight .vg { color: #D70 } /* Name.Variable.Global */ .highlight .vi { color: #33B } /* Name.Variable.Instance */ .highlight .vm { color: #369 } /* Name.Variable.Magic */ .highlight .il { color: #00D; font-weight: bold } /* Literal.Number.Integer.Long */
@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
	font-family: 'PublicSans';
	src: url('/fonts/Public_Sans/static/PublicSans-Regular.ttf') format('truetype');
}

html {
	font-family: PublicSans, sans-serif;
}

::selection {
	color: black;
	background: #eaf2ff;
}