Auto-save profile picture on selection (don't require Update Profile click) #101

New issue

Open

opened 2026-06-10 15:59:29 +00:00 by padreug · 0 comments

padreug commented

2026-06-10 15:59:29 +00:00

Owner

Context

In the profile edit form (src/modules/base/components/ProfileSettings.vue), picking a new picture uploads to pict-rs immediately, but the URL only gets written to user.extra.picture (and broadcast as kind-0 metadata) when the user clicks Update Profile and submits the form.

Problem

This is a footgun:

The pict-rs upload has already happened — the bytes are on the server — but the user's profile doesn't reference them until they remember to hit Update Profile.
If they close the gear popup right after picking a picture, they leave thinking the change is saved but it isn't.
Discoverability of the Update Profile button isn't obvious now that the form lives behind a gear icon in the hamburger sidebar.

Proposal

When an image lands in uploadedPicture (i.e. ImageUpload v-model emits a result), trigger an auto-save that:

Calls updateProfile() with the new picture URL.
Leaves the rest of the form fields untouched.
Shows the existing "Profile updated!" toast.

Display-name and username edits stay manual (still require Update Profile) — the user types those incrementally, so auto-save would fire on every keystroke. Only the picture (a discrete pick action) should auto-save.

Files

src/modules/base/components/ProfileSettings.vue — wire a watcher on uploadedPicture that submits picture-only when a new image arrives.

Acceptance

Picking a picture in the gear popup writes user.extra.picture and publishes a kind-0 metadata event without any extra click.
Closing the popup right after picking still results in a saved picture.
Display-name / username edits still need explicit submit.
Toast feedback is consistent with the existing flow.

## Context In the profile edit form (`src/modules/base/components/ProfileSettings.vue`), picking a new picture uploads to pict-rs immediately, but the URL only gets written to `user.extra.picture` (and broadcast as kind-0 metadata) when the user clicks **Update Profile** and submits the form. ## Problem This is a footgun: - The pict-rs upload has already happened — the bytes are on the server — but the user's profile doesn't reference them until they remember to hit Update Profile. - If they close the gear popup right after picking a picture, they leave thinking the change is saved but it isn't. - Discoverability of the Update Profile button isn't obvious now that the form lives behind a gear icon in the hamburger sidebar. ## Proposal When an image lands in `uploadedPicture` (i.e. `ImageUpload` v-model emits a result), trigger an auto-save that: 1. Calls `updateProfile()` with the new picture URL. 2. Leaves the rest of the form fields untouched. 3. Shows the existing "Profile updated!" toast. Display-name and username edits stay manual (still require Update Profile) — the user types those incrementally, so auto-save would fire on every keystroke. Only the picture (a discrete pick action) should auto-save. ## Files - `src/modules/base/components/ProfileSettings.vue` — wire a watcher on `uploadedPicture` that submits picture-only when a new image arrives. ## Acceptance - Picking a picture in the gear popup writes `user.extra.picture` and publishes a kind-0 metadata event without any extra click. - Closing the popup right after picking still results in a saved picture. - Display-name / username edits still need explicit submit. - Toast feedback is consistent with the existing flow.

padreug added the

app:webapp

enhancement

labels

2026-06-10 16:01:54 +00:00