android: restyle chat composer to telegram-like container
Some checks are pending
CI / test (push) Has started running

This commit is contained in:
Codex
2026-03-09 14:05:45 +03:00
parent db048b9f12
commit 7381d611cc
3 changed files with 46 additions and 26 deletions

View File

@@ -212,3 +212,8 @@
- Updated chat top app bar layout to Telegram-like structure: back, avatar, title, status, call action, menu action. - Updated chat top app bar layout to Telegram-like structure: back, avatar, title, status, call action, menu action.
- Kept load-more behavior accessible via menu placeholder action button. - Kept load-more behavior accessible via menu placeholder action button.
- Updated Telegram UI batch-2 checklist item for chat top app bar. - Updated Telegram UI batch-2 checklist item for chat top app bar.
### Step 34 - Chat UI / composer restyling
- Reworked chat composer into rounded Telegram-like container with emoji slot, text input, attach button, and send/voice state button.
- Preserved send/upload state guards and existing insets handling (`navigationBarsPadding` + `imePadding`).
- Updated Telegram UI batch-2 checklist composer-related items.

View File

@@ -333,36 +333,51 @@ fun ChatScreen(
} }
} }
Row( Surface(
modifier = Modifier modifier = Modifier
.fillMaxWidth() .fillMaxWidth()
.navigationBarsPadding() .navigationBarsPadding()
.imePadding() .imePadding()
.padding(horizontal = 12.dp, vertical = 8.dp), .padding(horizontal = 10.dp, vertical = 8.dp),
color = MaterialTheme.colorScheme.surfaceVariant.copy(alpha = 0.92f),
shape = RoundedCornerShape(22.dp),
) {
Row(
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 8.dp, vertical = 6.dp),
verticalAlignment = Alignment.CenterVertically, verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(8.dp), horizontalArrangement = Arrangement.spacedBy(6.dp),
) { ) {
Button( Button(
onClick = onPickMedia, onClick = { /* emoji placeholder */ },
enabled = state.canSendMessages && !state.isUploadingMedia, enabled = state.canSendMessages,
) { ) {
Text(if (state.isUploadingMedia) "..." else "Attach") Text("\uD83D\uDE03")
} }
OutlinedTextField( OutlinedTextField(
value = state.inputText, value = state.inputText,
onValueChange = onInputChanged, onValueChange = onInputChanged,
modifier = Modifier.weight(1f), modifier = Modifier.weight(1f),
label = { Text("Message") }, placeholder = { Text("Message") },
maxLines = 4, maxLines = 4,
) )
Button( Button(
onClick = onSendClick, onClick = onPickMedia,
enabled = state.canSendMessages && enabled = state.canSendMessages && !state.isUploadingMedia,
) {
Text(if (state.isUploadingMedia) "..." else "\uD83D\uDCCE")
}
val canSend = state.canSendMessages &&
!state.isSending && !state.isSending &&
!state.isUploadingMedia && !state.isUploadingMedia &&
state.inputText.isNotBlank(), state.inputText.isNotBlank()
Button(
onClick = { if (canSend) onSendClick() },
enabled = state.canSendMessages && !state.isUploadingMedia,
) { ) {
Text(if (state.isSending) "..." else "Send") Text(if (canSend) "\u27A4" else "\uD83C\uDFA4")
}
} }
} }

View File

@@ -6,10 +6,10 @@
## P0 — Chat Screen Parity (must-have) ## P0 — Chat Screen Parity (must-have)
- [x] Top app bar чата: back + avatar + name + status + call + menu, полупрозрачная подложка на фоне обоев. - [x] Top app bar чата: back + avatar + name + status + call + menu, полупрозрачная подложка на фоне обоев.
- [x] Закреплённое сообщение блоком под app bar (2 строки, иконки pin/close, tap для перехода). - [x] Закреплённое сообщение блоком под app bar (2 строки, иконки pin/close, tap для перехода).
- [ ] Message composer Telegram-стиля: - [x] Message composer Telegram-стиля:
- [ ] Полупрозрачный rounded input контейнер. - [x] Полупрозрачный rounded input контейнер.
- [ ] Иконка emoji слева, поле ввода, скрепка, кнопка отправки/голосового. - [x] Иконка emoji слева, поле ввода, скрепка, кнопка отправки/голосового.
- [ ] Корректные отступы от nav bar + IME. - [x] Корректные отступы от nav bar + IME.
- [ ] Сообщения вход/выход: плотные пузыри, время и delivery статус внизу справа. - [ ] Сообщения вход/выход: плотные пузыри, время и delivery статус внизу справа.
- [x] Reply-preview внутри outgoing bubble (вертикальная полоска, автор, snippet). - [x] Reply-preview внутри outgoing bubble (вертикальная полоска, автор, snippet).
- [x] Forwarded header в сообщении ("Переслано от ...") + мини-аватар. - [x] Forwarded header в сообщении ("Переслано от ...") + мини-аватар.