chore(profile-editor): banner corners, advanced section, noffer field, close-button placement#421
Conversation
There was a problem hiding this comment.
Pull request overview
This PR polishes the Profile Edit modal UI by adjusting the banner/close-button layout, reorganizing form fields (including a new CLINK offer field), and bumping the app version.
Changes:
- Adjust banner styling (square bottom corners) and move the close (×) button to an overlay on the banner.
- Introduce an “Advanced” collapsible section and add CLINK offer (
noffer) support to the editor’s read/write path. - Reorder several profile fields and bump
package.jsonversion.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
src/components/ProfileEditModal.svelte |
Adds noffer, introduces an Advanced collapsible section, changes close-button placement, and tweaks banner/form layout. |
package.json |
Bumps application version. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| /> | ||
| </div> |
There was a problem hiding this comment.
The PR description was written before a follow-up request from the reviewer to move the CLINK offer field into the Advanced section. That landed in commit 4d491d8 and is the intended final placement — CLINK offer is opt-in payment plumbing only some users will set up, so the main form stays identity-first (Display Name → Username → Bio → NIP-05 → Lightning Address → Website) and the Advanced section holds Profile Picture URL, Banner URL, and CLINK offer.
The PR description has been updated to match the implementation. The single source of truth is the Advanced section.
| <div> | ||
| <label | ||
| for="profile-noffer" | ||
| class="block text-sm font-medium mb-1 text-caption">CLINK offer</label | ||
| > | ||
| <input | ||
| id="profile-noffer" | ||
| type="text" | ||
| class="input w-full" | ||
| style="touch-action: auto; user-select: text; -webkit-user-select: text;" | ||
| placeholder="noffer1..." | ||
| bind:value={formData.noffer} | ||
| autocomplete="off" | ||
| autocorrect="off" | ||
| autocapitalize="off" | ||
| spellcheck="false" | ||
| /> | ||
| <p class="text-xs text-caption mt-1"> | ||
| CLINK static offer for self-custodial Lightning payments. Generate one with Zeus, | ||
| ShockWallet or Lightning.Pub. | ||
| </p> | ||
| </div> |
There was a problem hiding this comment.
Same context as the previous comment — the CLINK offer field is intentionally placed in the Advanced section per the reviewer's follow-up request, not in the main form. There's no duplicate input: this is the single source of truth and the only place formData.noffer is bound. The PR description has been updated to reflect this.
dmnyc
force-pushed
the
chore/profile-editor-cleanup
branch
from
4d491d8 to
ee23df2
Compare
…er field, close button Five focused polish items on the profile edit modal: 1. Banner — dropped `rounded-b-xl`. Top corners still inherit the dialog's rounding (clipped via the dialog's overflow); bottom is now squared so the banner sits flush against the avatar / form below instead of carving a curve into the content area. 2. Image URLs — moved Profile Picture URL and Banner URL inputs into a collapsed "Advanced" section. Most users set these via the avatar / banner upload widgets above; surfacing the URL field inline crowded the form. CaretDown toggle rotates on expand. 3. CLINK offer field — new "CLINK offer (noffer)" input written into the kind:0 JSON as `noffer`. Tolerant on read (`noffer`, `offer`, or `clink_offer` for compat with whatever key other clients use). Pairs with the noffer consumer in the clink-noffers branch — once both land, users can set their offer in this editor and viewers see the Pay button on their profile. 4. Close (×) — moved out of the avatar row into an absolute-positioned pill overlaying the banner's top-right corner, matching the convention used by WalletModal. Translucent black bg so the icon reads on any banner photo. 5. Field order — Display Name, Username, Bio, NIP-05, Lightning Address, CLINK offer, Website (then Advanced). Mirrors bxrd.app's grouping of payment fields together; website moved to end since most users don't have one.
…elds
Copy + structure tweaks on the CLINK offer + Lightning Address fields
of the profile editor:
- Added "Zeus" to the wallet suggestions in the noffer helper text:
"Generate one with Zeus, ShockWallet or Lightning.Pub."
- Dropped the parenthetical from the Lightning Address label
("Lightning Address (lud16)" → "Lightning Address") and from the
CLINK offer label ("CLINK offer (noffer)" → "CLINK offer"). The
underlying field key in the kind:0 JSON is unchanged.
- Dropped the leading "Optional." from the noffer helper text.
- Moved the CLINK offer input from the main form into the Advanced
section. The main form now reads: Display Name → Username → Bio →
NIP-05 → Lightning Address → Website. Advanced (collapsed) holds:
Profile Picture URL → Banner URL → CLINK offer.
dmnyc
force-pushed
the
chore/profile-editor-cleanup
branch
from
ee23df2 to
90f41ad
Compare
Summary
Five focused polish items on the profile edit modal:
Banner squared bottom corners. Dropped
rounded-b-xlfrom the banner div. Top corners still inherit the dialog's rounding (clipped via the dialog'soverflow: hidden); bottom is now squared so the banner sits flush against the avatar and form below instead of carving a curve into the content area.Image URLs + CLINK offer moved to Advanced. Profile Picture URL, Banner URL, and the CLINK offer (
noffer) input now sit inside a collapsed "Advanced" section with a CaretDown toggle. Image URLs because most users set them via the avatar/banner upload widgets above; CLINK offer because it's an opt-in payment surface only some users use, so surfacing it in the main form would crowd the identity-first flow. Read is still tolerant —noffer‖offer‖clink_offer— so existing data set by another client under a slightly different key isn't lost. Pairs with the noffer consumer in feat(clink): support paying CLINK static offers (noffer1) #420; once both land, a user can set their offer in Advanced and viewers see the Pay button on their profile / in their notes.Close (×) placement. Moved out of the avatar row into an absolute-positioned pill overlaying the banner's top-right corner, matching the convention used by
WalletModal. Translucent black background so the icon reads legibly on any banner photo.Field order. Main form: Display Name → Username → Bio → NIP-05 → Lightning Address → Website. Advanced (collapsed): Profile Picture URL → Banner URL → CLINK offer. The Lightning Address and CLINK offer no longer carry parenthetical type names (
(lud16)/(noffer)) — the underlying field keys in the kind:0 JSON are unchanged.Helper-text copy. CLINK offer helper now reads: "CLINK static offer for self-custodial Lightning payments. Generate one with Zeus, ShockWallet or Lightning.Pub."
Test plan
pnpm check— 0 errors.pnpm buildclean.noffer1…into the Advanced field, save, refresh the page → the profile's kind:0 carriesnofferand (once feat(clink): support paying CLINK static offers (noffer1) #420 is merged) the Pay pill appears on the profile.Related
nofferfield that feat(clink): support paying CLINK static offers (noffer1) #420 (feat(clink): support paying CLINK static offers) reads on the consumer side. Either PR can merge first — they're independent.