From b6cca5ba5196d3b89df4708c0b1aff31ec624df0 Mon Sep 17 00:00:00 2001 From: Adam Soltys Date: Fri, 9 Oct 2026 16:03:04 -0700 Subject: Move desktop logo and search into sticky sidebars --- src/app.js | 22 ++++++++++++++-------- src/style.css | 5 +++++ 2 files changed, 19 insertions(+), 8 deletions(-) (limited to 'src') diff --git a/src/app.js b/src/app.js index 3e05c5b..02c1ef1 100644 --- a/src/app.js +++ b/src/app.js @@ -841,6 +841,7 @@ function renderInner() { // public pages — never over sign-in, onboarding or the lock prompt. const navPage = ui.pubProf || (activeAccount() && ['wallet', 'accounts', 'accountSettings'].includes(ui.screen) && !(ui.onb || onbInProgress())); const bottomNav = navPage && !lockAsk && !_bootDeciding ? featureHook('bottomNav') : null; + if (bottomNav) bottomNav.prepend(h('div', { class: 'app-nav-wide app-nav-brand' }, brandLogo())); // the wallet beside the feed and chats on a wide screen (its own page needs no twin) const side = bottomNav && featScreen && WIDE_MQ && WIDE_MQ.matches ? walletSide() : null; morphChildren(root, [screen, footer(), ...(bottomNav ? [bottomNav] : []), ...(side ? [side] : []), ...(ui.lightbox ? [imageViewer()] : [])]); @@ -2680,8 +2681,8 @@ function lockBtn() { } // Find anyone on nostr from the header — results open their profile. -// Wide screens trade the search icon for a field in the header: typing in it -// opens (and drives) the search page, which then drops its own copy of it. +// Wide screens trade the search icon for a field in the header or sticky +// wallet sidebar. It drives the search page, which drops its own copy. function headerSearch() { if (!featureHook('userSearchAvailable')) return null; return h('input', { @@ -2713,18 +2714,22 @@ function searchBtn() { })); } -function brandHeader(withLock) { - const acc = activeAccount(); +function brandLogo() { return h( - 'div', - { class: 'row between' }, - h( 'div', { class: 'brand' + (STAGING ? ' staging' : ' beta'), style: 'cursor:pointer', title: t('home'), onClick: goHome }, STAGING ? h('span', { class: 'staging-badge', title: 'staging build: new wallets start on Mutinynet' }, 'staging') : h('span', { class: 'beta-badge' }, 'v3 beta'), h('div', { class: 'logo-full', 'aria-label': 'coinos', role: 'img', html: '' }) - ), + ); +} + +function brandHeader(withLock) { + const acc = activeAccount(); + return h( + 'div', + { class: 'row between brand-header' }, + brandLogo(), withLock ? h('div', { class: 'row gap6', style: 'align-items:center' }, searchBtn(), @@ -4411,6 +4416,7 @@ function walletSide() { const line = (label, sat) => h('div', { class: 'row between small' }, h('span', { class: 'muted' }, label), h('span', {}, fmtAmount(sat) + ' ' + unitLabel())); return h('aside', { class: 'wallet-side col', 'data-key': 'wallet-side' }, + headerSearch(), h('div', { class: 'card col', style: 'gap:10px' }, h('button', { type: 'button', class: 'wallet-side-total', onClick: () => toWallet('history') }, h('span', { class: 'small muted' }, t('balance')), diff --git a/src/style.css b/src/style.css index c80f8e0..a3abb75 100644 --- a/src/style.css +++ b/src/style.css @@ -1575,6 +1575,9 @@ body::after { #app:has(> .app-bottom-nav) > * { grid-column: 2; min-width: 0; } #app:has(> .app-bottom-nav) { padding-bottom: 24px; } .app-nav-wide { display: flex; } + .app-nav-brand { padding: 0 14px; margin-bottom: 16px; } + #app:has(> .app-bottom-nav) .brand-header > .brand { display: none; } + #app:has(> .app-bottom-nav) .brand-header { justify-content: flex-end; } /* the rail carries your profile and Settings here; the header trades its search icon for a field, which the search page then doesn't repeat */ #app:has(> .app-bottom-nav) .header-railed { display: none; } @@ -1603,6 +1606,8 @@ body::after { /* three columns on every page with the nav, the wallet's own included, so the page column never jumps sideways between pages */ #app:has(> .app-bottom-nav) { grid-template-columns: 200px minmax(0, 600px) 320px; } + #app:has(> .wallet-side) .brand-header:has(.header-search) { display: none; } + #app > .wallet-side > .header-search { width: 100%; } #app > .wallet-side { grid-column: 3; grid-row: 1 / span 2; position: sticky; top: 24px; gap: 12px; } } .wallet-side-total { -- cgit v1.2.3