Choose your look shows the look: one big avatar previews the pick — punks and uploads just change it

Co-Authored-By: Claude Fable 5 <[email protected]>
Claude-Session: https://claude.ai/code/session_01DbA53PJA8fgSvMcEzfuw22

2 files changed, 9 insertions, 2 deletions

diff --git a/src/app.js b/src/app.js
index 9c8731c..abd73c6 100644
--- a/src/app.js
+++ b/src/app.js
@@ -2285,9 +2285,17 @@ function onboardScreen() {
   if (o.step === 'avatar') {
     const me = (featureHook('nostrLoginIdentity') || {}).pubkey || (wallet.nostrPubkey && wallet.nostrPubkey());
     const sel = o.avatar;
+    // The big avatar IS the selection: it shows exactly what Continue will
+    // publish — a picked punk, an upload, or the pubkey-derived default.
+    const preview = sel || (me ? punkUrl(me) : null);
     return page([
       title(t('onbAvatarTitle')),
       h('p', { class: 'muted', style: 'margin:0' }, t('onbAvatarBody')),
+      preview ? h('img', {
+        class: 'onb-avatar', src: preview, alt: '',
+        style: ui.onbBusy ? 'opacity:.5' : '',
+        onError: (e) => { e.target.style.visibility = 'hidden'; },
+      }) : null,
       h('div', { class: 'onb-punks', 'data-keep-scroll': 'punks' },
         ...PUNK_PICKS.map((n) =>
           h('img', {
@@ -2305,7 +2313,6 @@ function onboardScreen() {
           try { o.avatar = await onbUpload(f); } catch (err) { ui.onbError = err.message; }
           ui.onbBusy = false; render();
         } })),
-      o.avatar ? h('img', { class: 'onb-preview', src: o.avatar, alt: '' }) : null,
       ui.onbError ? h('div', { class: 'notice err' }, ui.onbError) : null,
       h('button', { class: 'btn-primary btn-block', style: 'padding:14px', disabled: ui.onbBusy, onClick: async () => {
         ui.onbBusy = true; ui.onbError = ''; render();
diff --git a/src/style.css b/src/style.css
index b029e97..9e0e1bd 100644
--- a/src/style.css
+++ b/src/style.css
@@ -551,7 +551,7 @@ body::after {
 .onb-punk { width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0; cursor: pointer; border: 3px solid transparent; transition: transform .15s, border-color .15s; }
 .onb-punk:hover { transform: scale(1.08); }
 .onb-punk.sel { border-color: var(--accent); transform: scale(1.08); }
-.onb-preview { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; align-self: center; box-shadow: var(--shadow); }
+.onb-avatar { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; align-self: center; box-shadow: var(--shadow); transition: opacity .15s; }
 .onb-confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
 .onb-confetti i { position: absolute; top: -12px; width: 9px; height: 14px; opacity: .9; animation: confetti-fall 2.8s ease-in forwards; }
 .onb-confetti i:nth-child(4n) { background: #f7931a; }