fix: avatar - local so como fallback do R2 e gradiente vazando - #21
Merged
Conversation
Dois ajustes pedidos apos a primeira versao: 1. Copia local deixa de ser redundancia permanente e volta a ser fallback: grava no R2 quando configurado e so cai para o disco se o R2 nao estiver configurado ou o envio falhar. Evita ocupar disco do servidor com arquivos que ja estao no object storage. `storeFileWithRedundancy` -> `storeFile`; campo avatar_fallback_url removido da API e do frontend, junto com a logica de troca de URL. A limpeza do avatar anterior agora olha o campo `storage` para saber de onde remover. 2. Na sidebar, `.sidebar-user-avatar` e um quadrado arredondado com gradiente, e a foto entrava como circulo dentro dele - o gradiente aparecia nos quatro cantos ao redor da imagem. A imagem passa a preencher o container no mesmo raio (border-radius: inherit) e o gradiente e desligado via `.has-image`, ficando so no fallback da inicial do nome.
Contributor
There was a problem hiding this comment.
Pull request overview
Este PR reintegra na main as correções relacionadas ao avatar: (1) trocar o comportamento de armazenamento para usar R2 como destino principal com fallback local e (2) corrigir o vazamento do gradiente atrás da foto na sidebar, além de remover o campo avatar_fallback_url da API e do frontend.
Changes:
- Remove
avatar_fallback_urlda API (auth/me e perfis) e atualiza frontend para não depender de fallback de URL. - Ajusta o fluxo de storage para gravar no R2 quando disponível e gravar local apenas em fallback.
- Corrige o avatar da sidebar para a imagem preencher o container (mesmo border-radius) e desativar o gradiente quando há foto.
Reviewed changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/src/pages/Profile.jsx | Remove uso de avatar_fallback_url ao mesclar/propagar estado e ao renderizar AvatarUploader. |
| frontend/src/components/Sidebar.jsx | Simplifica a lógica do src do avatar (sem fallback URL) e adiciona classe has-image para controlar o fundo. |
| frontend/src/components/Sidebar.css | Impede “vazamento” do gradiente: overflow: hidden, remove background no estado com imagem e aplica border-radius: inherit na <img>. |
| frontend/src/components/AvatarUploader.jsx | Remove fallback URL do componente e passa a cair direto para a inicial quando a imagem falha. |
| backend/src/utils/storage.js | Troca o helper para armazenar no R2 quando configurado, usando disco local apenas como fallback. |
| backend/src/modules/users/users.routes.js | Atualiza upload de avatar para usar storeFile, remove campos antigos do avatar e ajusta limpeza para olhar storage. |
| backend/src/modules/auth/auth.routes.js | Remove avatar_fallback_url dos payloads de autenticação e /me. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+59
to
63
| // Imagem quebrada (URL fora do ar) cai para a inicial do nome | ||
| const [imageFailed, setImageFailed] = useState(false); | ||
|
|
||
| const displayedUrl = useFallback ? fallbackUrl : (avatarUrl || fallbackUrl); | ||
| const displayedUrl = imageFailed ? null : avatarUrl; | ||
|
|
Comment on lines
257
to
+263
| function removePreviousAvatar(avatar, tenantIdStr, logger) { | ||
| if (avatar.storage === 'r2' && avatar.key) { | ||
| deleteFromR2(avatar.key).catch(error => { | ||
| logger?.warn?.({ err: error }, 'Falha ao remover avatar anterior do R2'); | ||
| }); | ||
| return; | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Por que este PR existe
As duas correções que você pediu sobre o avatar não entraram na
main: o PR #20 foi mesclado às 17:35 e eu enviei o commit da correção logo depois, então ele ficou órfão na branch já mesclada. Este PR traz esse commit para amain.Sem ele, a
mainestá hoje com o comportamento antigo (cópia local sempre + gradiente vazando).O que corrige
1. Cópia local volta a ser fallback, não redundância. Grava no R2 quando configurado; só cai para o disco se o R2 não estiver configurado ou o envio falhar.
storeFileWithRedundancy→storeFile, e o campoavatar_fallback_urlsai da API e do frontend junto com a lógica de troca de URL. A limpeza da imagem anterior passa a consultar o campostoragepara saber de onde remover.2. Gradiente vazando atrás da foto. O
.sidebar-user-avataré um quadrado arredondado com gradiente (o fallback da inicial do nome), e a foto entrava como círculo dentro dele — sobravam os quatro cantos coloridos ao redor da imagem. Agora a imagem preenche o container no mesmo raio (border-radius: inherit) e o gradiente é desligado via.has-image.Validei a correção visual com uma comparação lado a lado no navegador (antes / depois / sem foto) antes de commitar.
Test plan
npm run buildenode --checksem errosbackend/uploads/