Load user data

app/build.gradle.kts

@@ -108,6 +108,9 @@ dependencies {
     implementation(libs.coil.compose)
     implementation(libs.coil.network)
 
+    // Coil
+    implementation(libs.coil.kt.coil.compose)
+
     // ktor
     implementation(libs.io.ktor.client)
     implementation(libs.io.ktor.content.negotiation)

app/src/main/java/com/github/feelbeatapp/androidclient/auth/AuthManager.kt

@@ -17,5 +17,5 @@ interface AuthManager {
 
     suspend fun getAccessToken(): String
 
-    fun logout(ctx: Context)
+    fun logout()
 }

app/src/main/java/com/github/feelbeatapp/androidclient/auth/spotify/SpotifyAuthManager.kt

@@ -130,7 +130,7 @@ constructor(
     }
 
     private fun hasExpired(expires: Instant): Boolean {
-        return expires >= Instant.now()
+        return expires <= Instant.now()
     }
 
     private suspend fun refreshAccessToken() {
@@ -177,7 +177,7 @@ constructor(
         )
     }
 
-    override fun logout(ctx: Context) {
+    override fun logout() {
         try {
             authStorage.clearAuthData()
             authData = null

app/src/main/java/com/github/feelbeatapp/androidclient/ui/FeelBeatApp.kt

@@ -37,12 +37,6 @@ fun FeelBeatApp(
                 composable(route = FeelBeatRoute.NEW_ROOM_SETTINGS.name) {
                     NewRoomSettingsScreen(navController = navController)
                 }
-                composable(route = FeelBeatRoute.ROOM_SETTINGS.name) {
-                    EditRoomSettingsScreen(navController = navController)
-                }
-                composable(route = FeelBeatRoute.ACCEPT_GAME.name) {
-                    AcceptGameScreen(navController = navController)
-                }
                 composable(route = FeelBeatRoute.GAME_RESULT.name) {
                     GameResultScreen(navController = navController)
                 }

app/src/main/java/com/github/feelbeatapp/androidclient/ui/FeelBeatRoute.kt

@@ -6,7 +6,6 @@ enum class FeelBeatRoute {
     NEW_ROOM_SETTINGS,
     ROOM_SETTINGS,
     ACCEPT_GAME,
-    ACCOUNT_SETTINGS,
     GAME_RESULT,
     GUESS_SONG,
     GUESS_RESULT,

app/src/main/java/com/github/feelbeatapp/androidclient/ui/acceptgame/AcceptGameScreen.kt

@@ -10,6 +10,7 @@ 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.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
@@ -33,14 +34,16 @@ import androidx.compose.ui.unit.dp
 import androidx.navigation.NavController
 import androidx.navigation.compose.rememberNavController
 import com.github.feelbeatapp.androidclient.R
-import com.github.feelbeatapp.androidclient.ui.FeelBeatRoute
 import com.github.feelbeatapp.androidclient.model.Song
+import com.github.feelbeatapp.androidclient.ui.FeelBeatRoute
+import com.github.feelbeatapp.androidclient.ui.home.HomeRoute
 import com.github.feelbeatapp.androidclient.ui.startgame.PlayerCard
 
 @Composable
 fun AcceptGameScreen(
     viewModel: AcceptGameViewModel = AcceptGameViewModel(),
     navController: NavController,
+    internalNavController: NavController,
     isRoomCreator: Boolean = true,
 ) {
     val gameState = viewModel.gameState.collectAsState().value
@@ -53,10 +56,12 @@ fun AcceptGameScreen(
                     .verticalScroll(rememberScrollState()),
             horizontalAlignment = Alignment.CenterHorizontally,
         ) {
-            IconButton(onClick = { navController.navigate(FeelBeatRoute.ACCEPT_GAME.name) }) {
+            Spacer(modifier = Modifier.height(24.dp))
+            IconButton(onClick = { internalNavController.navigate(HomeRoute.HOME.name) }) {
                 Icon(
                     Icons.AutoMirrored.Filled.KeyboardArrowLeft,
                     contentDescription = stringResource(R.string.back),
+                    modifier = Modifier.size(40.dp),
                 )
             }
 
@@ -110,15 +115,15 @@ fun AcceptGameScreen(
 
         if (isRoomCreator) {
             BottomNavigationBar(
-                navController = navController,
+                internalNavController = internalNavController,
                 modifier = Modifier.align(Alignment.BottomCenter),
             )
         }
     }
 }
 
 @Composable
-fun BottomNavigationBar(navController: NavController, modifier: Modifier = Modifier) {
+fun BottomNavigationBar(internalNavController: NavController, modifier: Modifier = Modifier) {
     NavigationBar(
         modifier = modifier,
         containerColor = MaterialTheme.colorScheme.surface,
@@ -130,15 +135,15 @@ fun BottomNavigationBar(navController: NavController, modifier: Modifier = Modif
             },
             label = { Text(stringResource(R.string.selected_room)) },
             selected = false,
-            onClick = { navController.navigate(FeelBeatRoute.ACCEPT_GAME.name) },
+            onClick = { internalNavController.navigate(FeelBeatRoute.ACCEPT_GAME.name) },
         )
         NavigationBarItem(
             icon = {
                 Icon(Icons.Filled.Settings, contentDescription = stringResource(R.string.settings))
             },
             label = { Text(stringResource(R.string.settings)) },
             selected = false,
-            onClick = { navController.navigate(FeelBeatRoute.ROOM_SETTINGS.name) },
+            onClick = { internalNavController.navigate(FeelBeatRoute.ROOM_SETTINGS.name) },
         )
     }
 }
@@ -161,5 +166,5 @@ fun SongItem(song: Song) {
 @Composable
 fun PreviewAcceptScreen() {
     val navController = rememberNavController()
-    AcceptGameScreen(navController = navController)
+    AcceptGameScreen(navController = navController, internalNavController = navController)
 }

app/src/main/java/com/github/feelbeatapp/androidclient/ui/home/HomeRoute.kt

@@ -0,0 +1,7 @@
+package com.github.feelbeatapp.androidclient.ui.home
+
+enum class HomeRoute {
+    HOME,
+    ROOM_SETTINGS,
+    ACCEPT_GAME,
+}

app/src/main/java/com/github/feelbeatapp/androidclient/ui/home/HomeScreen.kt

@@ -15,7 +15,6 @@ import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Add
-import androidx.compose.material.icons.outlined.Person
 import androidx.compose.material3.Card
 import androidx.compose.material3.CardDefaults
 import androidx.compose.material3.CenterAlignedTopAppBar
@@ -35,17 +34,24 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.navigation.NavController
+import androidx.navigation.compose.NavHost
+import androidx.navigation.compose.composable
 import androidx.navigation.compose.rememberNavController
+import coil3.compose.AsyncImage
 import com.github.feelbeatapp.androidclient.R
-import com.github.feelbeatapp.androidclient.ui.FeelBeatRoute
 import com.github.feelbeatapp.androidclient.model.Room
+import com.github.feelbeatapp.androidclient.ui.FeelBeatRoute
+import com.github.feelbeatapp.androidclient.ui.acceptgame.AcceptGameScreen
+import com.github.feelbeatapp.androidclient.ui.roomsettings.screens.EditRoomSettingsScreen
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
@@ -55,68 +61,48 @@ fun HomeScreen(
     navController: NavController,
 ) {
     val title = stringResource(R.string.feel_beat)
-    val rooms by viewModel.rooms.collectAsState()
-    val selectedRoom by viewModel.selectedRoom.collectAsState()
-    val ctx = LocalContext.current
+    val playerName by viewModel.playerName.collectAsState()
+    val playerImageUrl by viewModel.playerImageUrl.collectAsState()
+    val internalNavController = rememberNavController()
 
     var isBottomSheetVisible by remember { mutableStateOf(false) }
 
     if (isBottomSheetVisible) {
         ModalBottomSheet(onDismissRequest = { isBottomSheetVisible = false }) {
             UserAccountBottomSheetContent(
                 onLogoutClick = {
-                    viewModel.logout(ctx)
+                    viewModel.logout()
                     isBottomSheetVisible = false
                     navController.navigate(FeelBeatRoute.LOGIN.name)
-                }
+                },
+                name = playerName.toString(),
+                imageUrl = playerImageUrl.toString(),
             )
         }
     }
 
-    Scaffold(topBar = { HomeTopBar(title) { isBottomSheetVisible = true } }) { innerPadding ->
+    Scaffold(
+        topBar = {
+            HomeTopBar(title, imageUrl = playerImageUrl.toString()) { isBottomSheetVisible = true }
+        }
+    ) { innerPadding ->
         Column(modifier = modifier.padding(innerPadding).fillMaxSize()) {
-            Text(
-                text = stringResource(R.string.current_games),
-                style = MaterialTheme.typography.titleMedium,
-                modifier = Modifier.padding(16.dp),
-            )
-            LazyColumn(
-                modifier = Modifier.weight(1f).fillMaxWidth().padding(horizontal = 16.dp),
-                verticalArrangement = Arrangement.spacedBy(8.dp),
-            ) {
-                items(rooms) { room ->
-                    RoomItem(
-                        room = room,
-                        isSelected = room == selectedRoom,
-                        onClick = { navController.navigate(FeelBeatRoute.ACCEPT_GAME.name) },
+            NavHost(internalNavController, startDestination = HomeRoute.HOME.name) {
+                composable(route = HomeRoute.HOME.name) {
+                    HomeBody(
+                        viewModel = viewModel,
+                        internalNavController = internalNavController,
+                        navController = navController,
                     )
                 }
-            }
-
-            Box(
-                modifier =
-                    Modifier.fillMaxWidth().padding(bottom = 80.dp, start = 16.dp, end = 16.dp)
-            ) {
-                Box(
-                    modifier =
-                        Modifier.align(Alignment.BottomEnd)
-                            .size(60.dp)
-                            .background(
-                                MaterialTheme.colorScheme.primary,
-                                shape = MaterialTheme.shapes.medium,
-                            )
-                ) {
-                    IconButton(
-                        onClick = { navController.navigate(FeelBeatRoute.NEW_ROOM_SETTINGS.name) },
-                        modifier = Modifier.fillMaxSize(),
-                    ) {
-                        Icon(
-                            imageVector = Icons.Default.Add,
-                            contentDescription = "Add",
-                            modifier = Modifier.size(36.dp),
-                            tint = MaterialTheme.colorScheme.onPrimary,
-                        )
-                    }
+                composable(route = HomeRoute.ACCEPT_GAME.name) {
+                    AcceptGameScreen(
+                        internalNavController = internalNavController,
+                        navController = navController,
+                    )
+                }
+                composable(route = HomeRoute.ROOM_SETTINGS.name) {
+                    EditRoomSettingsScreen(internalNavController = internalNavController)
                 }
             }
         }
@@ -125,7 +111,7 @@ fun HomeScreen(
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
-fun HomeTopBar(title: String, onAccountClick: () -> Unit) {
+fun HomeTopBar(title: String, imageUrl: String, onAccountClick: () -> Unit) {
     CenterAlignedTopAppBar(
         title = { Text(title) },
         colors =
@@ -135,17 +121,78 @@ fun HomeTopBar(title: String, onAccountClick: () -> Unit) {
             ),
         actions = {
             IconButton(onClick = onAccountClick) {
-                Icon(
-                    imageVector = Icons.Outlined.Person,
-                    contentDescription = stringResource(R.string.account),
+                AsyncImage(
+                    model = imageUrl,
+                    contentDescription = "Player Image",
+                    modifier = Modifier.size(80.dp).clip(MaterialTheme.shapes.large),
+                    contentScale = ContentScale.Crop,
+                    placeholder = painterResource(R.drawable.account),
+                    error = painterResource(R.drawable.account),
                 )
             }
         },
     )
 }
 
 @Composable
-fun UserAccountBottomSheetContent(onLogoutClick: () -> Unit) {
+fun HomeBody(
+    viewModel: HomeViewModel,
+    navController: NavController,
+    internalNavController: NavController,
+) {
+    val rooms by viewModel.rooms.collectAsState()
+    val selectedRoom by viewModel.selectedRoom.collectAsState()
+
+    Column(modifier = Modifier.fillMaxSize()) {
+        Text(
+            text = stringResource(R.string.current_games),
+            style = MaterialTheme.typography.titleMedium,
+            modifier = Modifier.padding(16.dp),
+        )
+
+        LazyColumn(
+            modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp).weight(1f),
+            verticalArrangement = Arrangement.spacedBy(8.dp),
+        ) {
+            items(rooms) { room ->
+                RoomItem(
+                    room = room,
+                    isSelected = room == selectedRoom,
+                    onClick = { internalNavController.navigate(FeelBeatRoute.ACCEPT_GAME.name) },
+                )
+            }
+        }
+
+        Box(
+            modifier = Modifier.fillMaxWidth().padding(bottom = 16.dp).padding(horizontal = 16.dp)
+        ) {
+            Box(
+                modifier =
+                    Modifier.align(Alignment.BottomEnd)
+                        .size(60.dp)
+                        .background(
+                            MaterialTheme.colorScheme.primary,
+                            shape = MaterialTheme.shapes.medium,
+                        )
+            ) {
+                IconButton(
+                    onClick = { navController.navigate(FeelBeatRoute.NEW_ROOM_SETTINGS.name) },
+                    modifier = Modifier.fillMaxSize(),
+                ) {
+                    Icon(
+                        imageVector = Icons.Default.Add,
+                        contentDescription = "Add",
+                        modifier = Modifier.size(36.dp),
+                        tint = MaterialTheme.colorScheme.onPrimary,
+                    )
+                }
+            }
+        }
+    }
+}
+
+@Composable
+fun UserAccountBottomSheetContent(onLogoutClick: () -> Unit, name: String, imageUrl: String) {
     Column(
         modifier = Modifier.fillMaxWidth().padding(16.dp),
         horizontalAlignment = Alignment.CenterHorizontally,
@@ -156,13 +203,16 @@ fun UserAccountBottomSheetContent(onLogoutClick: () -> Unit) {
                 Modifier.size(80.dp).background(Color.Gray, shape = MaterialTheme.shapes.large),
             contentAlignment = Alignment.Center,
         ) {
-            Text(
-                text = "U", // Placeholder for user's avatar
-                style = MaterialTheme.typography.headlineMedium,
-                color = Color.White,
+            AsyncImage(
+                model = imageUrl,
+                contentDescription = "Player Image",
+                modifier = Modifier.size(80.dp).clip(MaterialTheme.shapes.large),
+                contentScale = ContentScale.Crop,
+                placeholder = painterResource(R.drawable.account),
+                error = painterResource(R.drawable.account),
             )
         }
-        Text(text = "User Name", style = MaterialTheme.typography.titleMedium)
+        Text(text = name, style = MaterialTheme.typography.titleMedium)
         Box(
             modifier =
                 Modifier.fillMaxWidth()