feat(profile): adicionar avatar no feed, redimensão do avatar e cover…#435
Conversation
… image e correções nas traduções
📝 WalkthroughWalkthroughProfile 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: 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
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. Comment |
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (1)
app-modules/panel-app/tests/Feature/ProfilePageTest.php (1)
290-316: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winTest 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
📒 Files selected for processing (14)
app-modules/panel-app/lang/en/feed.phpapp-modules/panel-app/lang/en/profile.phpapp-modules/panel-app/lang/pt_BR/feed.phpapp-modules/panel-app/lang/pt_BR/profile.phpapp-modules/panel-app/resources/views/components/profile-media-header.blade.phpapp-modules/panel-app/resources/views/components/timeline/header.blade.phpapp-modules/panel-app/resources/views/livewire/timeline/composer.blade.phpapp-modules/panel-app/resources/views/livewire/timeline/feed.blade.phpapp-modules/panel-app/resources/views/livewire/timeline/post-show.blade.phpapp-modules/panel-app/resources/views/pages/profile.blade.phpapp-modules/panel-app/src/Livewire/Timeline/Composer.phpapp-modules/panel-app/src/Pages/ProfilePage.phpapp-modules/panel-app/tests/Feature/ProfilePageTest.phpresources/css/filament/app/theme.css
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
FileUploaddo Filament.O que mudou 🧐
Removido
$avatarUploade$coverUploadcom#[Validate]saveMedia()(chamado dentro desave())$this->saveMedia()no fluxo de salvamento do perfiltemporaryUrl()nos computedavatarPreviewUrl/coverPreviewUrl$this->avatarUpload = null) nos métodosremoveAvatar/removeCoverLivewire\Attributes\ValidateAdicionado
editAvatarAction(): Action— abre modal comFileUploadconfigurado com editor circular (1:1),storeFiles(false), e persiste imediatamente viareplaceMedia()editCoverAction(): Action— abre modal comFileUploadconfigurado com editor de imagem (3:1), redimensionamento automático para 1800×600, e persiste imediatamente viareplaceMedia()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')Filament\Forms\Components\FileUploadMotivações
ANTES
DEPOIS