11package com.pira.gnetp.ui.home
22
33import android.content.Intent
4+ import androidx.compose.animation.AnimatedVisibility
5+ import androidx.compose.animation.core.tween
6+ import androidx.compose.animation.fadeIn
7+ import androidx.compose.animation.fadeOut
8+ import androidx.compose.animation.slideInVertically
9+ import androidx.compose.animation.slideOutVertically
10+ import androidx.compose.foundation.clickable
11+ import androidx.compose.foundation.background
412import androidx.compose.foundation.layout.Arrangement
13+ import androidx.compose.foundation.layout.Box
514import androidx.compose.foundation.layout.Column
615import androidx.compose.foundation.layout.Row
716import androidx.compose.foundation.layout.Spacer
@@ -12,8 +21,10 @@ import androidx.compose.foundation.layout.padding
1221import androidx.compose.foundation.layout.size
1322import androidx.compose.foundation.lazy.LazyColumn
1423import androidx.compose.foundation.lazy.items
24+ import androidx.compose.foundation.rememberScrollState
1525import androidx.compose.foundation.selection.selectable
1626import androidx.compose.foundation.shape.RoundedCornerShape
27+ import androidx.compose.foundation.verticalScroll
1728import androidx.compose.material.icons.Icons
1829import androidx.compose.material.icons.automirrored.filled.List
1930import androidx.compose.material.icons.filled.Info
@@ -27,7 +38,11 @@ import androidx.compose.material3.OutlinedButton
2738import androidx.compose.material3.RadioButton
2839import androidx.compose.material3.Text
2940import androidx.compose.runtime.Composable
41+ import androidx.compose.runtime.getValue
3042import androidx.compose.runtime.key
43+ import androidx.compose.runtime.mutableStateOf
44+ import androidx.compose.runtime.remember
45+ import androidx.compose.runtime.setValue
3146import androidx.compose.ui.Alignment
3247import androidx.compose.ui.Modifier
3348import androidx.compose.ui.graphics.Color
@@ -46,10 +61,14 @@ fun HomeScreen(
4661 onVpnPermissionRequest : (Intent ) -> Unit ,
4762 onSelectIpAddress : (String ) -> Unit = {}
4863) {
64+ val scrollState = rememberScrollState()
65+ var showIpSelector by remember { mutableStateOf(false ) }
66+
4967 Column (
5068 modifier = Modifier
5169 .fillMaxSize()
52- .padding(16 .dp),
70+ .padding(16 .dp)
71+ .verticalScroll(scrollState),
5372 horizontalAlignment = Alignment .CenterHorizontally ,
5473 verticalArrangement = Arrangement .Top
5574 ) {
@@ -179,7 +198,8 @@ fun HomeScreen(
179198 Card (
180199 modifier = Modifier
181200 .fillMaxWidth()
182- .padding(bottom = 16 .dp),
201+ .padding(bottom = 16 .dp)
202+ .clickable { showIpSelector = true },
183203 shape = RoundedCornerShape (16 .dp),
184204 colors = CardDefaults .cardColors(
185205 containerColor = MaterialTheme .colorScheme.surfaceVariant
@@ -198,18 +218,11 @@ fun HomeScreen(
198218 modifier = Modifier .padding(bottom = 16 .dp)
199219 )
200220
201- LazyColumn {
202- items(uiState.availableIPs) { ip ->
203- // Use key to ensure proper recomposition
204- key(ip) {
205- IpAddressOption (
206- ip = ip,
207- isSelected = ip == uiState.selectedIpAddress,
208- onSelect = { onSelectIpAddress(ip) } // Fixed: pass ip instead of it
209- )
210- }
211- }
212- }
221+ Text (
222+ text = uiState.selectedIpAddress.ifEmpty { " Tap to select an IP" },
223+ style = MaterialTheme .typography.bodyLarge,
224+ color = MaterialTheme .colorScheme.onSurfaceVariant
225+ )
213226 }
214227 }
215228 }
@@ -308,6 +321,65 @@ fun HomeScreen(
308321 }
309322 }
310323 }
324+
325+ // Full-screen IP selector bottom sheet
326+ AnimatedVisibility (
327+ visible = showIpSelector,
328+ enter = slideInVertically(initialOffsetY = { it }) + fadeIn(),
329+ exit = slideOutVertically(targetOffsetY = { it }) + fadeOut()
330+ ) {
331+ Box (
332+ modifier = Modifier
333+ .fillMaxSize()
334+ .clickable { showIpSelector = false }
335+ ) {
336+ Column (
337+ modifier = Modifier
338+ .fillMaxWidth()
339+ .fillMaxSize(0.8f ) // Take 80% of screen height
340+ .align(Alignment .BottomCenter )
341+ .clickable(enabled = false ) { } // Prevent closing when clicking on content
342+ .background(MaterialTheme .colorScheme.surface)
343+ .padding(16 .dp)
344+ ) {
345+ Row (
346+ modifier = Modifier .fillMaxWidth(),
347+ horizontalArrangement = Arrangement .SpaceBetween ,
348+ verticalAlignment = Alignment .CenterVertically
349+ ) {
350+ Text (
351+ text = " Select IP Address" ,
352+ style = MaterialTheme .typography.headlineSmall,
353+ fontWeight = FontWeight .Bold
354+ )
355+
356+ Button (
357+ onClick = { showIpSelector = false },
358+ modifier = Modifier
359+ ) {
360+ Text (" Close" )
361+ }
362+ }
363+
364+ Spacer (modifier = Modifier .height(16 .dp))
365+
366+ LazyColumn {
367+ items(uiState.availableIPs) { ip ->
368+ key(ip) {
369+ IpAddressOption (
370+ ip = ip,
371+ isSelected = ip == uiState.selectedIpAddress,
372+ onSelect = {
373+ onSelectIpAddress(ip)
374+ showIpSelector = false // Close sheet after selection
375+ }
376+ )
377+ }
378+ }
379+ }
380+ }
381+ }
382+ }
311383}
312384
313385@Composable
0 commit comments