Add bottom sheet to home screen

composeApp/src/commonMain/kotlin/at/torch/compose/ui/composable/HomeScreen.kt

@@ -4,30 +4,49 @@ import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.pager.HorizontalPager
 import androidx.compose.foundation.pager.rememberPagerState
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Add
+import androidx.compose.material.icons.filled.ChevronRight
+import androidx.compose.material.icons.filled.Close
+import androidx.compose.material.icons.filled.Diversity2
+import androidx.compose.material.icons.filled.Diversity3
+import androidx.compose.material.icons.filled.Groups
+import androidx.compose.material.icons.filled.Key
 import androidx.compose.material.icons.filled.Search
+import androidx.compose.material3.Button
+import androidx.compose.material3.Card
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
 import androidx.compose.material3.ExtendedFloatingActionButton
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
+import androidx.compose.material3.ListItem
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.ModalBottomSheet
 import androidx.compose.material3.PrimaryScrollableTabRow
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Tab
 import androidx.compose.material3.Text
+import androidx.compose.material3.TextButton
 import androidx.compose.material3.TopAppBar
 import androidx.compose.material3.TopAppBarDefaults
+import androidx.compose.material3.rememberModalBottomSheetState
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
 import androidx.compose.runtime.key
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
@@ -38,7 +57,7 @@ import at.torch.compose.database.model.intermdiate.LocalProfileWithFollowing
 import at.torch.compose.repository.ChatRepository
 import at.torch.compose.repository.NostrRepository
 import at.torch.compose.ui.composable.navigation.routes.ActiveProfileRoute
-import at.torch.compose.ui.composable.navigation.routes.NostrEventDetailRoute
+import at.torch.compose.ui.composable.navigation.routes.ImplementationPendingRoute
 import at.torch.compose.ui.composable.navigation.routes.Route
 import at.torch.compose.ui.composable.widgets.LoadingDataIndicator
 import at.torch.compose.ui.theme.TorchTheme
@@ -54,14 +73,16 @@ import kotlinx.coroutines.launch
 fun HomeScreen(
     activeUserPublicKey: HexKey,
     initialHomeScreenUIState: HomeScreenUIState = HomeScreenUIState.Loading,
-    onNavigateToEvent: (Route) -> Unit,
+    onNavigateToRoute: (Route) -> Unit,
     onNavigateToDirectMessageDetail: (Route) -> Unit,
     onNavigateToChatRoomCreation: () -> Unit,
     onNavigateToSearch: () -> Unit,
     nostrRepository: NostrRepository,
     chatRepository: ChatRepository
 ) {
+    val sheetState = rememberModalBottomSheetState()
     val scope = rememberCoroutineScope()
+    var showBottomSheet by remember { mutableStateOf(false) }
 
     val homeScreenViewModel: HomeViewModel = viewModel(
         factory = HomeViewModel.factory(
@@ -111,7 +132,7 @@ fun HomeScreen(
                         navigationIcon = {
                             IconButton(
                                 onClick = {
-                                    onNavigateToEvent.invoke(
+                                    onNavigateToRoute.invoke(
                                         ActiveProfileRoute(
                                             activeUserPublicKey = activeUserPublicKey,
                                             nostrEventId = homeScreenUIState.profileWithFollowing.nostrEvent.id
@@ -142,7 +163,9 @@ fun HomeScreen(
                 },
                 floatingActionButton = {
                     ExtendedFloatingActionButton(
-                        onClick = onNavigateToChatRoomCreation,
+                        onClick = {
+                            showBottomSheet = true
+                        },
                         icon = {
                             Icon(
                                 Icons.Default.Add,
@@ -214,6 +237,99 @@ fun HomeScreen(
                         }
                     }
                 }
+
+                if (showBottomSheet) {
+                    ModalBottomSheet(
+                        onDismissRequest = {
+                            showBottomSheet = false
+                        },
+                        sheetState = sheetState
+                    ) {
+                        // Sheet content
+                        Column(
+                            modifier = Modifier.fillMaxWidth().padding(10.dp),
+                            verticalArrangement = Arrangement.spacedBy(4.dp),
+                            horizontalAlignment = Alignment.CenterHorizontally
+                        ) {
+                            Text(
+                                text = "Create new chat",
+                                textAlign = TextAlign.Center,
+                                style = MaterialTheme.typography.bodyLarge
+                            )
+                            Card(
+                                onClick = {
+                                    onNavigateToRoute.invoke(
+                                        ImplementationPendingRoute("Direct Message via npub")
+                                    )
+                                }
+                            ) {
+                                ListItem(
+                                    leadingContent = {
+                                        Icon(
+                                            Icons.Default.Key,
+                                            contentDescription = "Start npub with key"
+                                        )
+                                    },
+                                    headlineContent = {
+                                        Text("Direct Message via npub")
+                                    },
+                                    trailingContent = {
+                                        Icon(
+                                            Icons.Default.ChevronRight,
+                                            contentDescription = "Start chat with npub"
+                                        )
+                                    }
+                                )
+                            }
+
+                            Card(
+                                onClick = {
+                                    onNavigateToChatRoomCreation.invoke()
+                                }
+                            ) {
+                                ListItem(
+                                    leadingContent = {
+                                        Icon(
+                                            Icons.Default.Diversity2,
+                                            contentDescription = "Start group chat"
+                                        )
+                                    },
+                                    headlineContent = {
+                                        Text(
+                                            text = "Start a group chat"
+                                        )
+                                    },
+                                    trailingContent = {
+                                        Icon(
+                                            Icons.Default.ChevronRight,
+                                            contentDescription = "Start group chat"
+                                        )
+                                    }
+                                )
+                            }
+
+                            TextButton(
+                                onClick = {
+                                    scope.launch { sheetState.hide() }.invokeOnCompletion {
+                                        if (!sheetState.isVisible) {
+                                            showBottomSheet = false
+                                        }
+                                    }
+                                }
+                            ) {
+                                Icon(
+                                    Icons.Default.Close,
+                                    contentDescription = "Close new chat"
+                                )
+                                Spacer(
+                                    modifier = Modifier.width(10.dp)
+                                )
+                                Text("Close")
+                            }
+                        }
+
+                    }
+                }
             }
         }
         HomeScreenUIState.Loading -> {
@@ -257,7 +373,7 @@ It has survived not only five centuries, but also the leap into electronic types
                         following = emptyList()
                     )
                 ),
-                onNavigateToEvent = {},
+                onNavigateToRoute = {},
                 onNavigateToChatRoomCreation = {},
                 onNavigateToSearch = {},
                 onNavigateToDirectMessageDetail = {},

composeApp/src/commonMain/kotlin/at/torch/compose/ui/composable/navigation/TorchNavHost.kt

@@ -469,7 +469,7 @@ fun TorchNavHost(
             val route = backStackEntry.toRoute<FeedRoute>()
             HomeScreen(
                 activeUserPublicKey = route.activeUserPublicKey,
-                onNavigateToEvent = { eventRoute ->
+                onNavigateToRoute = { eventRoute ->
                     navController.navigate(
                         route = eventRoute
                     )