android: add floating bottom nav shell to chat list
Some checks failed
CI / test (push) Has been cancelled

This commit is contained in:
Codex
2026-03-09 14:29:35 +03:00
parent ce585f62d2
commit 1d37f8eb0b
4 changed files with 55 additions and 4 deletions

View File

@@ -259,3 +259,8 @@
- Kept unread/mention/pinned/muted indicators while aligning row structure closer to Telegram list pattern.
- Added floating compose FAB placeholder at bottom-right in chat list screen.
- Updated Telegram UI batch-2 checklist chat-list parity items.
### Step 43 - Chat list / floating bottom navigation shell
- Added floating rounded bottom navigation container on chat list screen.
- Added active tab visual state (Chats selected) with pill styling.
- Updated Telegram UI checklists for bottom-nav shell parity (batch 1 and batch 2).

View File

@@ -25,6 +25,7 @@ import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Surface
import androidx.compose.material3.Tab
import androidx.compose.material3.TabRow
import androidx.compose.material3.Text
@@ -192,10 +193,27 @@ fun ChatListScreen(
onClick = {},
modifier = Modifier
.align(Alignment.BottomEnd)
.padding(16.dp),
.padding(end = 16.dp, bottom = 88.dp),
) {
Text("+")
}
Surface(
modifier = Modifier
.align(Alignment.BottomCenter)
.padding(horizontal = 16.dp, vertical = 14.dp),
shape = CircleShape,
color = MaterialTheme.colorScheme.surfaceVariant.copy(alpha = 0.92f),
) {
Row(
modifier = Modifier.padding(horizontal = 12.dp, vertical = 8.dp),
horizontalArrangement = Arrangement.spacedBy(8.dp),
) {
BottomNavPill(label = "Chats", selected = true, onClick = {})
BottomNavPill(label = "Contacts", selected = false, onClick = {})
BottomNavPill(label = "Settings", selected = false, onClick = {})
BottomNavPill(label = "Profile", selected = false, onClick = {})
}
}
}
}
}
@@ -363,6 +381,34 @@ private fun ArchiveRow(
}
}
@Composable
private fun BottomNavPill(
label: String,
selected: Boolean,
onClick: () -> Unit,
) {
Surface(
shape = CircleShape,
color = if (selected) {
MaterialTheme.colorScheme.primaryContainer
} else {
MaterialTheme.colorScheme.surface
},
modifier = Modifier.clickable(onClick = onClick),
) {
Text(
text = label,
modifier = Modifier.padding(horizontal = 10.dp, vertical = 6.dp),
style = MaterialTheme.typography.labelMedium,
color = if (selected) {
MaterialTheme.colorScheme.onPrimaryContainer
} else {
MaterialTheme.colorScheme.onSurface
},
)
}
}
@Composable
private fun CenterState(
text: String?,

View File

@@ -4,8 +4,8 @@
Источник: первая пачка скринов (настройки, приватность, контакты, профиль, архив, общий список чатов)
## P0 — Navigation + Layout Shell
- [ ] Floating bottom navigation в rounded контейнере с полупрозрачным тёмным фоном.
- [ ] Активный tab в фиолетовом pill-состоянии, неактивные — белые/серые.
- [x] Floating bottom navigation в rounded контейнере с полупрозрачным тёмным фоном.
- [x] Активный tab в фиолетовом pill-состоянии, неактивные — белые/серые.
- [ ] Safe area для status/nav bars на всех экранах списка/настроек/профиля.
## P0 — Settings Visual System

View File

@@ -51,7 +51,7 @@
- [x] Badge unread справа.
- [x] Иконки delivery/camera/attachments в preview строке.
- [x] Плавающий FAB (compose/new chat) справа снизу.
- [ ] Floating bottom navigation с blur/dark container и активным фиолетовым tab.
- [x] Floating bottom navigation с blur/dark container и активным фиолетовым tab.
## P2 — Motion & Polish
- [ ] Плавная анимация открытия reaction/context menu (scale+fade).