2480f39b244fdf6f1bc12eccdb42cd0fe741f6b9
Original ask: in the chat page, give users a clear way to create a
group chat (the "+" button already opened a dialog, but it had no name
field, no Direct/Group distinction, and no way to tell groups apart in
the conversation list).
Backend, DB schema, and OpenAPI already supported groups
(isGroup/nameAr/nameEn/participantIds + isAdmin on creator), so this
task was UI-only.
Changes:
- artifacts/teaboy-os/src/pages/chat.tsx — rebuilt the "New
conversation" dialog with:
* Direct / Group segmented tabs (default Direct)
* Bilingual group name fields (AR + EN, at least one required)
* Search-filterable participant list (matches username,
displayNameAr, displayNameEn)
* Custom checkbox UI; direct mode is single-select (clicking
another user replaces selection), group mode multi-select
* Live participant counter and inline validation messages
(pickOnePerson / minTwoMembers / needGroupName)
* Submit button driven by validation; closes on backdrop click
and resets state on open/close
* Switching to Direct mode clears stale group-name input
- Conversation list rows and chat header now show a "Group" / "مجموعة"
badge for is_group conversations; group avatar uses a Users icon
instead of name initials. Direct chats unchanged.
- New convDisplayName helper: prefers active-language name, falls back
to other language, then participant names, then "Direct Message".
- artifacts/teaboy-os/src/locales/{ar,en}.json — added all new strings
under chat.* (modeDirect, modeGroup, groupNameAr/En, placeholders,
searchUsersPlaceholder, participantsCount, validation.*, create,
noUsersFound). Updated EN groupChat label to compact "Group".
No backend, schema, codegen, or OpenAPI changes. Regenerated api
client locally only because pre-existing pages had stale types from
prior merges.
Verification: e2e test passed — login, open dialog, verify Direct/Group
tabs, validation messages, group creation, header + list badge, and
search filtering all work.
Out of scope (proposed as follow-ups): group avatar upload, manage
members after creation, leave/mute/archive a group.
Description
No description provided
Languages
TypeScript
69.4%
JavaScript
29%
CSS
0.6%
Shell
0.6%
Dockerfile
0.2%
Other
0.2%