Update UI of notification screen on android, 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

@@ -1,19 +1,43 @@
 package com.vpn.fastestvpnservice.customItems
 
+import android.util.Log
+import android.widget.Toast
+import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
+import androidx.compose.foundation.gestures.detectTapGestures
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.wrapContentHeight
+import androidx.compose.foundation.selection.selectable
 import androidx.compose.material.Text
+import androidx.compose.material3.BottomSheetDefaults
+import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.ModalBottomSheet
+import androidx.compose.material3.RadioButton
+import androidx.compose.material3.RadioButtonDefaults
+import androidx.compose.material3.rememberModalBottomSheetState
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.ColorFilter
+import androidx.compose.ui.input.pointer.pointerInput
+import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
@@ -21,39 +45,147 @@ import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import com.vpn.fastestvpnservice.R
 import com.vpn.fastestvpnservice.beans.Notification
+import com.vpn.fastestvpnservice.constants.smartConnect
+import com.vpn.fastestvpnservice.screens.bottomNavBarScreens.AddTextSettings
+import com.vpn.fastestvpnservice.screens.bottomNavBarScreens.AddTextSettingsLanguage
+import com.vpn.fastestvpnservice.sealedClass.BottomBarScreen
+import com.vpn.fastestvpnservice.ui.theme.customTypography
 import com.vpn.fastestvpnservice.ui.theme.customTypography2
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun NotificationItem(item: Notification) {
-    Box(modifier = Modifier
-        .background(MaterialTheme.colorScheme.background)
-        .fillMaxWidth()
+    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,
-                modifier = Modifier
-                    .padding(start = 16.dp, bottom = 0.dp, end = 4.dp)
-                    .fillMaxWidth(),
-            )
+                    .fillMaxWidth()
+                    .wrapContentHeight()
+                    .background(Color.Transparent)
+                    .pointerInput(Unit) {
+                        detectTapGestures {
+                            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(20.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(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 = "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 = 16.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(),
+                        )
+                    }
+                }
+            }
+        }
+    }
 }
 
 @Composable
@@ -87,6 +219,7 @@ fun NotificationItemTV(item: Notification) {
         }
     }
 }
+
 @Preview
 @Composable
 fun NotificationItemPreview() {