Fix user avatar emoji handling

[samuelwei]

Type

• Bugfix
• Feature
• Documentation
• Refactoring (e.g. Style updates, Test implementation, etc.)
• Other (please describe):

Checklist

• Code updated to current develop branch head
• Passes CI checks
• Is a part of an issue
• Tests added for the bugfix or newly implemented feature, describe below why if not
• Changelog is updated
• Documentation of code and features exists

Changes

• Fixed emoji handling in user avatar

Other information

The code extracting the first char of the users first/lastname broke emojis.

Before

After

Thanks @tibroc for reporting this bug

Summary by CodeRabbit

• Bug Fixes
  • Fixed emoji handling in user avatar display.

[coderabbitai]

Walkthrough

A changelog entry documents an emoji handling fix in the user avatar feature, while the corresponding UserAvatar component is refactored to use lodash for character extraction instead of direct indexing, replacing functional logic with a lodash utility function.

Changes

Cohort / File(s)	Change Summary
Documentation updates CHANGELOG.md	Adds "Emoji handling in user avatar ([#2613])" to the Unreleased Fixed section and includes reference link
Component refactoring resources/js/components/UserAvatar.vue	Imports lodash library and replaces direct first-character extraction from firstname and lastname with lodash split approach

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

• Verify that lodash's split behavior correctly handles emoji characters and edge cases compared to direct character indexing
• Confirm the refactored character extraction in UserAvatar produces identical output for typical and non-ASCII character inputs
• Ensure lodash dependency is already declared in project dependencies

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the main change: fixing emoji handling in user avatars, which directly matches the primary functional change in the changeset.
Description check	✅ Passed	The description covers the required template sections with bugfix type identified, changelog updated confirmed, and a clear explanation of the fix with visual evidence provided.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix-emoji-handling-user-avatar

---

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 and usage tips.}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 96.75%. Comparing base (e3e9c8d) to head (6a5df32).

Additional details and impacted files

@@            Coverage Diff             @@
##             develop    #2613   +/-   ##
==========================================
  Coverage      96.75%   96.75%           
  Complexity      1816     1816           
==========================================
  Files            434      434           
  Lines          12483    12483           
  Branches        2078     2078           
==========================================
  Hits           12078    12078           
  Misses           405      405           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

[coderabbitai]

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

resources/js/components/UserAvatar.vue (1)

39-47: Fix emoji character handling in avatar label generation

The current implementation using _.split(string, "", 1)[0] operates at the UTF-16 code unit level, breaking multi-code-unit emojis (surrogate pairs). For example, an emoji like 👋 will produce a broken replacement character "�" instead of the emoji itself.

Use the spread operator to properly handle code points:

 const avatarLabel = computed(() => {
   if (!props.firstname || !props.lastname) {
     return "";
   }
   return (
-    _.split(props.firstname?.toUpperCase(), "", 1)[0] +
-    _.split(props.lastname?.toUpperCase(), "", 1)[0]
+    [...props.firstname.toUpperCase()][0] +
+    [...props.lastname.toUpperCase()][0]
   );
 });

Also remove the lodash import:

 import { computed } from "vue";
-import _ from "lodash";

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between e3e9c8d and 6a5df32.

📒 Files selected for processing (2)

• CHANGELOG.md (2 hunks)
• resources/js/components/UserAvatar.vue (2 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: Docker Build

[coderabbitai]

🛠️ Refactor suggestion | 🟠 Major

Unnecessary lodash dependency for this use case.

Adding lodash solely for the _.split function is heavyweight when JavaScript provides better native solutions for emoji handling.

🤖 Prompt for AI Agents

In resources/js/components/UserAvatar.vue around line 14, remove the unnecessary
import of lodash and replace any usage of _.split for deriving avatar characters
with native string handling: delete the import line and update calls to use
Array.from(...) or the spread operator ([...str]) to correctly iterate Unicode
code points (emoji) or String.prototype.split where simple character splitting
suffices; ensure tests/uses expect the new output shape and remove the lodash
dependency from package.json if no other usages remain.

[cypress]

PILOS    Run #2695

Run Properties:   Passed #2695  •  6a5df32767: Fix user avatar emoji handling

Project	PILOS
Branch Review	fix-emoji-handling-user-avatar
Run status	Passed #2695
Run duration	07m 23s
Commit	6a5df32767: Fix user avatar emoji handling
Committer	Samuel Weirich
View all properties for this run ↗︎

---

Test results
Failures	0
Flaky	0
Pending	0
Skipped	0
Passing	608
View all changes introduced in this branch ↗︎