Update UI of notification screen on android TV, showing title first then on click open modal bottom sheet for details of that notification item

app/src/main/java/com/vpn/fastestvpnservice/customItems/NotificationItem.kt

@@ -4,6 +4,7 @@ import android.util.Log
 import android.widget.Toast
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.gestures.detectTapGestures
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
@@ -188,34 +189,135 @@ fun NotificationItem(item: Notification) {
     }
 }
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun NotificationItemTV(item: Notification) {
+    val context = LocalContext.current
+    var isNotificationItemSheetOpen by remember { mutableStateOf(false) }
+
     Box(modifier = Modifier
         .background(MaterialTheme.colorScheme.background)
         .fillMaxWidth()
     ) {
         Column() {
-            Text(
-                text = item.title,
-                color = MaterialTheme.colorScheme.primary,
-                style = MaterialTheme.typography.displayLarge.copy(
-                    color = MaterialTheme.colorScheme.primary,
-                    fontSize = 18.sp
-                ),
-                textAlign = TextAlign.Start,
+            Box(
                 modifier = Modifier
-                    .padding(start = 16.dp, bottom = 5.dp, end = 4.dp)
-                    .fillMaxWidth(),
-            )
-            Text(
-                text = item.html,
-                color = MaterialTheme.colorScheme.primary,
-                style = MaterialTheme.typography.labelMedium,
-                textAlign = TextAlign.Start,
+                    .fillMaxWidth()
+                    .wrapContentHeight()
+                    .background(Color.Transparent)
+                    .clickable {
+                        isNotificationItemSheetOpen = true
+                    },
+            ) {
+                Text(
+                    text = item.title,
+                    color = MaterialTheme.colorScheme.primary,
+                    style = MaterialTheme.typography.displayLarge.copy(
+                        color = MaterialTheme.colorScheme.primary,
+                        fontSize = 18.sp
+                    ),
+                    textAlign = TextAlign.Start,
+                    modifier = Modifier
+                        .padding(start = 16.dp, bottom = 0.dp, end = 35.dp)
+//                        .background(Color.LightGray)
+//                        .fillMaxWidth(),
+                )
+//                Spacer(modifier = Modifier.weight(1F))
+                Image(
+                    painter = painterResource(id = R.drawable.frontarrow3x),
+                    contentDescription = "Front_Arrow",
+                    colorFilter = ColorFilter.tint(MaterialTheme.colorScheme.primary),
+                    modifier = Modifier
+                        .padding(start = 0.dp, end = 16.dp)
+                        .size(10.dp, 18.dp)
+                        .align(Alignment.CenterEnd)
+//                    .weight(1f),
+                )
+            }
+
+//            Text(
+//                text = item.html,
+//                color = MaterialTheme.colorScheme.primary,
+//                style = MaterialTheme.typography.labelMedium,
+//                textAlign = TextAlign.Start,
+//                modifier = Modifier
+//                    .padding(start = 16.dp, bottom = 0.dp, end = 4.dp)
+//                    .fillMaxWidth(),
+//            )
+
+            Spacer(modifier = Modifier.height(25.dp))
+        }
+
+        if (isNotificationItemSheetOpen) {
+            val sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true)
+
+            ModalBottomSheet(
+                onDismissRequest = {
+                    isNotificationItemSheetOpen = false
+                },
+                dragHandle = {
+                    BottomSheetDefaults.DragHandle(
+                        color = MaterialTheme.colorScheme.primary,
+                    )
+                },
+                sheetState = sheetState,
+                containerColor = MaterialTheme.colorScheme.onBackground,
                 modifier = Modifier
-                    .padding(start = 16.dp, bottom = 0.dp, end = 4.dp)
-                    .fillMaxWidth(),
-            )
+                    .padding(top = 15.dp)
+                    .fillMaxSize()
+            ) {
+                Box(
+                    modifier = Modifier
+                        .background(Color.Transparent)
+                        .fillMaxSize()
+                        .padding(start = 0.dp, top = 10.dp, bottom = 25.dp),
+                ) {
+                    Column(
+//                    verticalArrangement = Arrangement.Top,
+//                    horizontalAlignment = Alignment.Start
+                    ) {
+                        AddTextSettingsLanguage(
+                            text = context.getString(R.string.details),
+                            size = 18.sp,
+                            color = MaterialTheme.colorScheme.primary,
+                            bottomPadding = 0.dp,
+                            startPadding = 0.dp,
+                            style = MaterialTheme.typography.customTypography.displayLarge.copy(
+                                color = MaterialTheme.colorScheme.primary
+                            ),
+                        )
+
+                        Column(
+                            horizontalAlignment = Alignment.Start,
+                            modifier = Modifier
+                                .padding(top = 30.dp)
+                        ) {
+                            Text(
+                                text = item.title,
+                                color = MaterialTheme.colorScheme.primary,
+                                style = MaterialTheme.typography.displayLarge.copy(
+                                    color = MaterialTheme.colorScheme.primary,
+                                    fontSize = 17.sp
+                                ),
+                                textAlign = TextAlign.Start,
+                                modifier = Modifier
+                                    .padding(start = 10.dp, bottom = 0.dp, end = 4.dp)
+                                    .fillMaxWidth(),
+                            )
+                            Spacer(modifier = Modifier.height(10.dp))
+                            Text(
+                                text = item.html,
+                                color = MaterialTheme.colorScheme.primary,
+                                style = MaterialTheme.typography.labelMedium,
+                                textAlign = TextAlign.Start,
+                                modifier = Modifier
+                                    .padding(start = 10.dp, bottom = 0.dp, end = 4.dp)
+                                    .fillMaxWidth(),
+                            )
+                        }
+                    }
+                }
+            }
         }
     }
 }

app/src/main/java/com/vpn/fastestvpnservice/screensTV/NotificationScreenTV.kt

@@ -55,19 +55,19 @@ fun NotificationsTV(navHostController: NavHostController) {
         ) {
             val notifications = notificationViewModel.liveDataNotification.observeAsState().value
 
-            notifications?.heading?.let {
-                Text(
-                    text = it,
-                    color = MaterialTheme.colorScheme.primary,
-                    style = MaterialTheme.typography.customTypography2.bodySmall,
-                    textAlign = TextAlign.Start,
-                    modifier = Modifier
-                        .padding(start = 16.dp, top = 5.dp, end = 4.dp)
-                        .fillMaxWidth(),
-                )
-            }
+//            notifications?.heading?.let {
+//                Text(
+//                    text = it,
+//                    color = MaterialTheme.colorScheme.primary,
+//                    style = MaterialTheme.typography.customTypography2.bodySmall,
+//                    textAlign = TextAlign.Start,
+//                    modifier = Modifier
+//                        .padding(start = 16.dp, top = 5.dp, end = 4.dp)
+//                        .fillMaxWidth(),
+//                )
+//            }
 
-            Spacer(modifier = Modifier.height(25.dp))
+            Spacer(modifier = Modifier.height(10.dp))
 
             LazyColumn() {
                 notifications?.data?.let {