fix(profile): add about character counter

[JhonataSnts]

O que foi feito

Adiciona um contador de caracteres no campo Sobre da página de perfil, exibindo o progresso no formato atual/500.

A mudança mantém o limite já existente de 500 caracteres e apenas melhora o feedback visual para o usuário durante o preenchimento do perfil.

Detalhes técnicos

• Adicionado contador no Textarea::make('about').
• Mantido maxLength(500).
• Trocado live(onBlur: true) por live() para atualizar o campo durante a digitação.
• Usado mb_strlen() para respeitar caracteres multibyte.
• O contador visual é atualizado no cliente para evitar atraso/perda de sincronia durante re-renders do Livewire.

Evidência visual

Testes

vendor\bin\pest app-modules\panel-app\tests\Feature\ProfilePageTest.php --compact

Teste manual

1. Acesse a página de perfil.
2. Digite no campo Sobre.
3. Verifique se o contador acompanha a digitação no formato atual/500.

Closes #426

[coderabbitai]

📝 Walkthrough

Walkthrough

The profile about textarea now uses live binding and renders a JsContent character counter based on the current state, capped at 500 characters. Feature coverage verifies the textarea type, hint content, maximum length marker, and live binding.

Suggested reviewers: danielhe4rt

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	It clearly summarizes the main change: adding a character counter to the profile About field.
Description check	✅ Passed	It describes the same character-counter change and stays on-topic.
Linked Issues check	✅ Passed	The change adds a visible real-time 500-character counter for the profile About field and preserves the limit.
Out of Scope Changes check	✅ Passed	No unrelated code changes are evident beyond the counter and its test coverage.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 1

🤖 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/src/Pages/ProfilePage.php`:
- Around line 135-139: Update the character-counting field configuration using
the visible hint callback and field chain to replace immediate live updates with
blur-triggered updates by setting live to onBlur mode. Preserve the existing
hint, length, row, and column settings.

🪄 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: e77e7255-6e0a-444e-a8b3-f599b58ccab0

📥 Commits

Reviewing files that changed from the base of the PR and between 1fb560d and 28887d6.

📒 Files selected for processing (2)

• app-modules/panel-app/src/Pages/ProfilePage.php
• app-modules/panel-app/tests/Feature/ProfilePageTest.php

[gvieira18]

Eu apresentei uma opção, o @Clintonrocha98 apresentou outra. Aguardamos mais sugestões

[YuriSouzaDev]

Sugiro criar um teste com inserção de emojis para ver o comportamento do input.

[ewbenigno]

Revisei e testei localmente esse PR. Registrando os testes que fiz:

1. Rodei o teste automatizado (ProfilePageTest.php): 14 passed, 1 failed. A falha foi só por falta de build do Vite no meu ambiente local (manifest.json ausente), não relacionada à lógica do PR. Confirmei isso rodando o teste manual via npm run dev, que renderizou a página normalmente.
2. Teste manual: acessei a página de perfil e digitei no campo Sobre, o contador atualiza em tempo real, sem precisar sair do campo.
3. Colei um texto de 610 caracteres de uma vez: o campo travou em 500/500.
4. Testei com emojis: contador mostrou 97/500, contagem bateu com o que eu contaria visualmente.

[YuriSouzaDev]

@ewbenigno Mas se criar um teste automatizado é bom que cobre um caso de uso além do seu teste de usuário.

[coderabbitai]

Actionable comments posted: 2

🤖 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/src/Pages/ProfilePage.php`:
- Line 138: Update the form field configuration containing ->live() to use
live(onBlur: true), so the client-side JsContent counter updates without sending
a network request on every keystroke while preserving live synchronization when
the field loses focus.

In `@app-modules/panel-app/tests/Feature/ProfilePageTest.php`:
- Around line 193-199: Update the form field setup exercised by ProfilePageTest
so the about Textarea uses live(onBlur: true), and change the assertion in the
assertFormFieldExists callback to expect the ['blur'] state binding modifier.
Add automated coverage in ProfilePageTest verifying the field’s emoji behavior
while preserving the existing hint assertions.

🪄 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: 852504c4-2461-4354-a96e-d70682907f38

📥 Commits

Reviewing files that changed from the base of the PR and between 28887d6 and c08f6d9.

📒 Files selected for processing (2)

• app-modules/panel-app/src/Pages/ProfilePage.php
• app-modules/panel-app/tests/Feature/ProfilePageTest.php

[JhonataSnts]

Sugiro criar um teste com inserção de emojis para ver o comportamento do input.

Ajustei a expressão para usar Array.from($state ?? "").length em vez de .length, o que lida melhor com emojis e caracteres especiais nesse contador.

[JhonataSnts]

Atualizei novamente seguindo os últimos comentários:

• mantive o contador com JsContent, calculado no cliente;
• troquei o campo para live(onBlur: true) para evitar requests Livewire a cada tecla;
• ajustei o teste para esperar ['live', 'blur'];
• incluí um valor com emoji no teste e mantive Array.from($state ?? "").length para lidar melhor com esse caso.

Rodei:

vendor\bin\pest app-modules\panel-app\tests\Feature\ProfilePageTest.php --compact

[coderabbitai]

Actionable comments posted: 1

🤖 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/src/Pages/ProfilePage.php`:
- Around line 135-138: Update the counter expression in the profile text field
to measure UTF-16 code units, matching the 500-character maxLength enforcement,
instead of using Array.from(...).length. Preserve the existing null-safe state
handling and 500-character display limit.

🪄 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: 85b9d964-dbd8-4878-b992-1efc93e62d24

📥 Commits

Reviewing files that changed from the base of the PR and between c08f6d9 and 5833cf9.

📒 Files selected for processing (2)

• app-modules/panel-app/src/Pages/ProfilePage.php
• app-modules/panel-app/tests/Feature/ProfilePageTest.php

[YuriSouzaDev]

LGTM

[RomuloLim]

LGTM