@@ -40,6 +40,7 @@ import androidx.compose.ui.text.style.TextAlign
4040import androidx.compose.ui.unit.dp
4141import androidx.compose.ui.unit.sp
4242import androidx.compose.ui.window.CanvasBasedWindow
43+ import androidx.compose.ui.window.ComposeViewport
4344import coil3.compose.AsyncImage
4445import dev.johnoreilly.common.di.initKoin
4546import dev.johnoreilly.common.remote.Assignment
@@ -59,96 +60,96 @@ fun main() {
5960
6061 val peopleInSpaceRepository = koin.get<PeopleInSpaceRepository >()
6162
62- CanvasBasedWindow ( " PeopleInSpace " , canvasElementId = " peopleInSpaceCanvas " ) {
63+ ComposeViewport (content = {
6364
64- val people by peopleInSpaceRepository.fetchPeopleAsFlow().collectAsState(emptyList())
65- var selectedPerson by remember { mutableStateOf<Assignment ?>(null ) }
65+ val people by peopleInSpaceRepository.fetchPeopleAsFlow().collectAsState(emptyList())
66+ var selectedPerson by remember { mutableStateOf<Assignment ?>(null ) }
6667
67- Surface (
68- modifier = Modifier .fillMaxSize(),
69- color = backgroundColor
70- ) {
71- Column (Modifier .fillMaxSize()) {
72- // Header
73- Box (
74- modifier = Modifier
75- .fillMaxWidth()
76- .background(primaryColor)
77- .padding(16 .dp),
78- contentAlignment = Alignment .Center
79- ) {
80- Text (
81- " People In Space" ,
82- color = Color .White ,
83- fontSize = 24 .sp,
84- fontWeight = FontWeight .Bold
85- )
86- }
87-
88- // Content
89- Row (Modifier .fillMaxSize().padding(16 .dp)) {
90- // Left panel with list of people
91- Card (
92- modifier = Modifier .width(280 .dp).fillMaxHeight(),
93- colors = CardDefaults .cardColors(containerColor = cardColor),
94- elevation = CardDefaults .cardElevation(defaultElevation = 4 .dp),
95- shape = RoundedCornerShape (8 .dp)
68+ Surface (
69+ modifier = Modifier .fillMaxSize(),
70+ color = backgroundColor
71+ ) {
72+ Column (Modifier .fillMaxSize()) {
73+ // Header
74+ Box (
75+ modifier = Modifier
76+ .fillMaxWidth()
77+ .background(primaryColor)
78+ .padding(16 .dp),
79+ contentAlignment = Alignment .Center
9680 ) {
97- Column (Modifier .fillMaxSize()) {
98- Box (
99- modifier = Modifier
100- .fillMaxWidth()
101- .background(primaryColor.copy(alpha = 0.8f ))
102- .padding(12 .dp),
103- contentAlignment = Alignment .Center
104- ) {
105- Text (
106- " Astronauts" ,
107- color = Color .White ,
108- fontSize = 18 .sp,
109- fontWeight = FontWeight .Medium
110- )
111- }
112- PersonList (people, selectedPerson) {
113- selectedPerson = it
114- }
115- }
81+ Text (
82+ " People In Space" ,
83+ color = Color .White ,
84+ fontSize = 24 .sp,
85+ fontWeight = FontWeight .Bold
86+ )
11687 }
11788
118- Spacer (modifier = Modifier .width(16 .dp))
119-
120- // Right panel with person details
121- Card (
122- modifier = Modifier .fillMaxSize(),
123- colors = CardDefaults .cardColors(containerColor = cardColor),
124- elevation = CardDefaults .cardElevation(defaultElevation = 4 .dp),
125- shape = RoundedCornerShape (8 .dp)
126- ) {
127- Box (Modifier .fillMaxSize()) {
128- selectedPerson?.let {
129- PersonDetailsView (it)
130- } ? : run {
131- // Show a message when no person is selected
89+ // Content
90+ Row (Modifier .fillMaxSize().padding(16 .dp)) {
91+ // Left panel with list of people
92+ Card (
93+ modifier = Modifier .width(280 .dp).fillMaxHeight(),
94+ colors = CardDefaults .cardColors(containerColor = cardColor),
95+ elevation = CardDefaults .cardElevation(defaultElevation = 4 .dp),
96+ shape = RoundedCornerShape (8 .dp)
97+ ) {
98+ Column (Modifier .fillMaxSize()) {
13299 Box (
133- modifier = Modifier .fillMaxSize(),
100+ modifier = Modifier
101+ .fillMaxWidth()
102+ .background(primaryColor.copy(alpha = 0.8f ))
103+ .padding(12 .dp),
134104 contentAlignment = Alignment .Center
135105 ) {
136106 Text (
137- " Select an astronaut to view details" ,
138- style = TextStyle (
139- color = Color .Gray ,
140- fontSize = 18 .sp,
141- textAlign = TextAlign .Center
142- )
107+ " Astronauts" ,
108+ color = Color .White ,
109+ fontSize = 18 .sp,
110+ fontWeight = FontWeight .Medium
143111 )
144112 }
113+ PersonList (people, selectedPerson) {
114+ selectedPerson = it
115+ }
116+ }
117+ }
118+
119+ Spacer (modifier = Modifier .width(16 .dp))
120+
121+ // Right panel with person details
122+ Card (
123+ modifier = Modifier .fillMaxSize(),
124+ colors = CardDefaults .cardColors(containerColor = cardColor),
125+ elevation = CardDefaults .cardElevation(defaultElevation = 4 .dp),
126+ shape = RoundedCornerShape (8 .dp)
127+ ) {
128+ Box (Modifier .fillMaxSize()) {
129+ selectedPerson?.let {
130+ PersonDetailsView (it)
131+ } ? : run {
132+ // Show a message when no person is selected
133+ Box (
134+ modifier = Modifier .fillMaxSize(),
135+ contentAlignment = Alignment .Center
136+ ) {
137+ Text (
138+ " Select an astronaut to view details" ,
139+ style = TextStyle (
140+ color = Color .Gray ,
141+ fontSize = 18 .sp,
142+ textAlign = TextAlign .Center
143+ )
144+ )
145+ }
146+ }
145147 }
146148 }
147149 }
148150 }
149151 }
150- }
151- }
152+ })
152153}
153154
154155@Composable
0 commit comments