fix(settings): single avatar preview, status placement, file-input tooltip (LC-432) #436
Loading…
Reference in a new issue
No description provided.
Delete branch "fix/settings-profile-polish"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Three Settings > Profile fixes after the LC-426 redesign (ref data/ref-profile.png), plus two verifications. Subtask of LC-426.
1. Single avatar preview (was a double)
The card showed a real preview AND a grey initial circle. The fallback div's
.hiddennever took effect -.lc-set-avatar-fallback{display:flex}in main.css loads after the.hiddenutility (the LC-391 ordering gotcha). Since/avatars/{id}already serves a generated initial-on-color SVG when there is no custom avatar, the card now uses one<img src="/avatars/{id}">that previews the chosen file live and reflects the saved image; the placeholder circle is removed. Remove-avatar OOB-swaps that single<img>back to the default (fresh cache-buster, since the file is gone).2. Status placement
"Profile picture updated" floated past "Remove avatar". It now sits immediately after the Save profile button; Remove avatar is pushed to the far right. The other tabs already render status right after Save, so it's consistent everywhere now.
3. Stray native file-input tooltip
The top-left "No file chosen" is the browser's native file-input chrome (that string exists nowhere in our code). The native input is now
sr-onlybehind a styled "Choose image" label + our own filename text, so the native control and its mispositioned tooltip never render.Verified + fixed
New i18n: settings-choose-image, settings-no-file (en + es). New regression test
avatar_delete_hx_returns_single_oob_image_reset.just check,just test,just test-saaspass; settings.js syntax-checked; Tailwind rebuilt. (Dev server is SSO-gated, so a quick in-browser confirm on the PR build is worthwhile.)🤖 Generated with Claude Code
Three Profile-tab fixes after the LC-426 redesign, plus two verifications. - Double avatar preview: the card rendered a real preview AND a grey initial circle, because the fallback div's `.hidden` never won (main.css `.lc-set-avatar-fallback{display:flex}` loads after the `.hidden` utility - the LC-391 gotcha). `/avatars/{id}` already serves a generated initial-on-color SVG when there is no custom avatar, so the Profile card now uses a single `<img src="/avatars/{id}">` that previews the chosen file live and reflects the saved image; the placeholder circle is gone. Avatar removal OOB-swaps that one `<img>` back to the default (with a fresh cache-buster, since the file is gone and the mtime key can't move the URL). - Status placement: the "Profile picture updated" status floated past "Remove avatar". It now sits immediately after the Save profile button; Remove avatar is pushed to the far right (margin-left:auto). The other tabs already render status right after their Save button, so the convention is now consistent everywhere. - Stray native file-input tooltip (top-left "No file chosen"): that string is the browser's native file-input chrome - it exists nowhere in our code. The native input is now `sr-only` behind a styled "Choose image" label, with our own filename text, so the native control (and its mispositioned tooltip) never renders. Verified + fixed: the inline per-form status no longer lingers - it auto-clears after a few seconds and the moment the user edits the form again (the toast already self-dismissed). The Saved-status pattern (spinner + inline status + toast) is present and consistent on every Save form - Profile, Language, Appearance, Preferences, DnD schedule; the Privacy/Account tabs have no Save form. New i18n: settings-choose-image, settings-no-file (en + es). New regression test `avatar_delete_hx_returns_single_oob_image_reset`. just check, just test, just test-saas pass; settings.js syntax-checked; Tailwind rebuilt. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>