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.
- Kept load-more behavior accessible via menu placeholder action button.
- 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
.fillMaxWidth()
.navigationBarsPadding()
.imePadding()
.padding(horizontal = 12.dp, vertical = 8.dp),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(8.dp),
.padding(horizontal = 10.dp, vertical = 8.dp),
color = MaterialTheme.colorScheme.surfaceVariant.copy(alpha = 0.92f),
shape = RoundedCornerShape(22.dp),
) {
Button(
onClick = onPickMedia,
enabled = state.canSendMessages && !state.isUploadingMedia,
Row(
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 8.dp, vertical = 6.dp),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(6.dp),
) {
Text(if (state.isUploadingMedia) "..." else "Attach")
}
OutlinedTextField(
value = state.inputText,
onValueChange = onInputChanged,
modifier = Modifier.weight(1f),
label = { Text("Message") },
maxLines = 4,
)
Button(
onClick = onSendClick,
enabled = state.canSendMessages &&
Button(
onClick = { /* emoji placeholder */ },
enabled = state.canSendMessages,
) {
Text("\uD83D\uDE03")
}
OutlinedTextField(
value = state.inputText,
onValueChange = onInputChanged,
modifier = Modifier.weight(1f),
placeholder = { Text("Message") },
maxLines = 4,
)
Button(
onClick = onPickMedia,
enabled = state.canSendMessages && !state.isUploadingMedia,
) {
Text(if (state.isUploadingMedia) "..." else "\uD83D\uDCCE")
}
val canSend = state.canSendMessages &&
!state.isSending &&
!state.isUploadingMedia &&
state.inputText.isNotBlank(),
) {
Text(if (state.isSending) "..." else "Send")
state.inputText.isNotBlank()
Button(
onClick = { if (canSend) onSendClick() },
enabled = state.canSendMessages && !state.isUploadingMedia,
) {
Text(if (canSend) "\u27A4" else "\uD83C\uDFA4")
}
}
}

View File

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