Skip to content

feat(profile): adicionar avatar no feed, redimensão do avatar e cover…#435

Merged
danielhe4rt merged 2 commits into
he4rt:4.xfrom
fernanduandrade:fix/profile-cover
Jul 19, 2026
Merged

feat(profile): adicionar avatar no feed, redimensão do avatar e cover…#435
danielhe4rt merged 2 commits into
he4rt:4.xfrom
fernanduandrade:fix/profile-cover

Conversation

@fernanduandrade

@fernanduandrade fernanduandrade commented Jul 18, 2026

Copy link
Copy Markdown
Contributor

Contexto

Este PR implementa a solução da issue #428 .

Atualmente, o upload de avatar e capa na página de Perfil (/app/profile) não oferece nenhuma opção de recorte antes do salvamento. Como consequência, imagens com proporções diferentes das esperadas podem ser exibidas de forma distorcida, esticada ou com cortes indesejados.

Para melhorar a experiência do usuário e garantir consistência visual entre os perfis, o fluxo de upload foi atualizado para permitir o recorte e redimensionamento das imagens antes do envio.

Alterações

  • Substitui o componente de upload do avatar pelo FileUpload do Filament.
  • Adiciona suporte ao editor de imagens para permitir o recorte (crop) antes do upload.
  • Configura proporções específicas para cada tipo de imagem:
    • Avatar com proporção quadrada.
    • Capa/banner com proporção widescreen.
  • Configura redimensionamento automático das imagens para as dimensões esperadas pela aplicação.
  • Exibe o avatar do usuário no feed quando houver uma imagem de perfil cadastrada.
  • Adiciona traduções ausentes para os novos textos e componentes utilizados, garantindo suporte aos idiomas disponíveis na plataforma.

O que mudou 🧐

Removido

  • Propriedades públicas $avatarUpload e $coverUpload com #[Validate]
  • Método privado saveMedia() (chamado dentro de save())
  • Chamada $this->saveMedia() no fluxo de salvamento do perfil
  • Lógica de temporaryUrl() nos computed avatarPreviewUrl / coverPreviewUrl
  • Reset das propriedades ($this->avatarUpload = null) nos métodos removeAvatar / removeCover
  • Import de Livewire\Attributes\Validate

Adicionado

  • editAvatarAction(): Action — abre modal com FileUpload configurado com editor circular (1:1), storeFiles(false), e persiste imediatamente via replaceMedia()
  • editCoverAction(): Action — abre modal com FileUpload configurado com editor de imagem (3:1), redimensionamento automático para 1800×600, e persiste imediatamente via replaceMedia()
  • replaceMedia(string $collection, TemporaryUploadedFile $file): void — método unificado que limpa a coleção e adiciona a nova mídia com fallback de extensão (getClientOriginalExtension() ?: guessExtension() ?: 'jpg')
  • Import de Filament\Forms\Components\FileUpload

Motivações

  • Melhora a experiência de upload de imagens.
  • Garante maior consistência visual entre os perfis.
  • Evita imagens achatadas, esticadas ou cortadas de forma inesperada.
  • Permite ao usuário visualizar e ajustar o enquadramento da imagem antes de salvá-la.
  • Torna o feed mais personalizado ao exibir o avatar dos usuários.

ANTES

antes

DEPOIS

chrome-capture-2026-07-18

@coderabbitai

coderabbitai Bot commented Jul 18, 2026

Copy link
Copy Markdown

Review Change Stack

📝 Walkthrough

Walkthrough

Profile avatar and cover uploads now use Filament actions with persisted media replacement and removal. Profile and feed text is localized in English and Brazilian Portuguese. Timeline avatars render stored images with initials fallbacks, and profile media upload tests now fake storage. Filament file-upload controls receive primary-theme styling.

Possibly related PRs

Suggested reviewers: clintonrocha98, gvieira18, danielhe4rt

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
Title check ✅ Passed The title matches the main changes: feed avatar display plus avatar and cover image resizing.
Description check ✅ Passed The description is aligned with the PR and covers the profile upload, feed avatar, and translation updates.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 4

🧹 Nitpick comments (1)
app-modules/panel-app/tests/Feature/ProfilePageTest.php (1)

290-316: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Test the image transformations, not only persistence.

These already-sized fixtures and collection assertions cannot detect broken cropping or resizing. Upload mismatched dimensions and assert the stored image dimensions/aspect ratio.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@app-modules/panel-app/tests/Feature/ProfilePageTest.php` around lines 290 -
316, Update the avatar and cover upload tests around the profile page action
flows to use deliberately mismatched image dimensions, then inspect the stored
media files and assert the configured transformation dimensions or aspect
ratios. Preserve the existing action-error, notification, and collection
assertions while ensuring the tests fail if cropping or resizing is removed.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In
`@app-modules/panel-app/resources/views/components/profile-media-header.blade.php`:
- Around line 22-36: Update the edit-cover button and its inner action label in
the profile media header to expose the controls on keyboard focus via
focus-visible styling, while preserving the hover behavior. Add a persistent
visible affordance for touch/coarse-pointer devices so the controls do not
depend on the hover state.

In `@app-modules/panel-app/src/Pages/ProfilePage.php`:
- Around line 561-564: Update the media replacement flow around
clearMediaCollection and addMedia so the new media is persisted successfully
before removing the existing collection item. Retain a reference to the previous
media, clean up the staged replacement if persistence or subsequent deletion
fails, and ensure the user’s original image remains available on failure.
- Around line 560-564: Update the filename extension assignment in the media
upload flow before addMedia to avoid trusting getClientOriginalExtension(); use
the detected MIME-derived extension from guessExtension(), or a fixed
allowlisted mapping, and retain jpg only as the fallback. Keep the UUID-based
filename and media collection behavior unchanged.
- Around line 426-434: Update the avatar FileUpload configuration to enforce a
1:1 image ratio rather than merely offering it as an editor option. Add the
required imageAspectRatio setting and enable the component’s automatic crop/open
handling with target dimensions, preserving the existing avatar editor, circular
cropper, required status, and size limit.

---

Nitpick comments:
In `@app-modules/panel-app/tests/Feature/ProfilePageTest.php`:
- Around line 290-316: Update the avatar and cover upload tests around the
profile page action flows to use deliberately mismatched image dimensions, then
inspect the stored media files and assert the configured transformation
dimensions or aspect ratios. Preserve the existing action-error, notification,
and collection assertions while ensuring the tests fail if cropping or resizing
is removed.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository YAML (base), Central YAML (inherited)

Review profile: CHILL

Plan: Pro

Run ID: 54eb71ee-9203-40c4-94f3-fd8ea375bbe6

📥 Commits

Reviewing files that changed from the base of the PR and between 1eb7a1b and 1684549.

📒 Files selected for processing (14)
  • app-modules/panel-app/lang/en/feed.php
  • app-modules/panel-app/lang/en/profile.php
  • app-modules/panel-app/lang/pt_BR/feed.php
  • app-modules/panel-app/lang/pt_BR/profile.php
  • app-modules/panel-app/resources/views/components/profile-media-header.blade.php
  • app-modules/panel-app/resources/views/components/timeline/header.blade.php
  • app-modules/panel-app/resources/views/livewire/timeline/composer.blade.php
  • app-modules/panel-app/resources/views/livewire/timeline/feed.blade.php
  • app-modules/panel-app/resources/views/livewire/timeline/post-show.blade.php
  • app-modules/panel-app/resources/views/pages/profile.blade.php
  • app-modules/panel-app/src/Livewire/Timeline/Composer.php
  • app-modules/panel-app/src/Pages/ProfilePage.php
  • app-modules/panel-app/tests/Feature/ProfilePageTest.php
  • resources/css/filament/app/theme.css

Comment thread app-modules/panel-app/src/Pages/ProfilePage.php
Comment thread app-modules/panel-app/src/Pages/ProfilePage.php
Comment thread app-modules/panel-app/src/Pages/ProfilePage.php
@danielhe4rt
danielhe4rt merged commit 4f778b8 into he4rt:4.x Jul 19, 2026
9 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Upload de foto de perfil e capa não permite redimensionar/recortar imagem, causando distorção

3 participants